Skip to content
GitLab
Commit 34732969 authored by Kruyff,D.L.W. (Dylan)'s avatar Kruyff,D.L.W. (Dylan)
Browse files

Display similar windows as subplots

parent 69f8e465
Hide whitespace changes
Inline Side-by-side
Flaskserver/main.py
View file @ 34732969
......@@ -29,9 +29,9 @@ def read_data():
@app.route('/create-windows', methods=['POST'])
def create_windows():
window_size = 180
raw_data = request.json
values = raw_data["values"]
window_size = int(raw_data["windowsize"])
data = []
for index in range(len(values) - window_size):
window = values[index:index + window_size]
......@@ -40,16 +40,18 @@ def create_windows():
data.append(window)
else:
data.append((window / norm).tolist())
print(len(values) - window_size)
response = jsonify(data)
return response
@app.route('/create-tables', methods=['POST'])
def create_tables():
t0 = time()
data = request.json
raw_data = request.json
data = raw_data["windows"]
window_size = int(raw_data["windowsize"])
hash_size = int(raw_data["hashsize"])
table_size = int(raw_data["tablesize"])
data = np.array(data)
window_size, hash_size, table_size = 180, 10, 5
tables = [defaultdict(list) for _ in range(table_size)]
tables_hash_function = [np.random.randn(window_size, hash_size) for _ in range(table_size)]
......
Webserver/.idea/vcs.xml 0 → 100644
View file @ 34732969
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="VcsDirectoryMappings">
<mapping directory="$PROJECT_DIR$/.." vcs="Git" />
</component>
</project>
\ No newline at end of file
Webserver/index.html
View file @ 34732969
......@@ -2,19 +2,40 @@
<html>
<head>
<style>
.modebar{
.modebar {
display: none !important;
}
.container {
display: flex;
}
#subplots {
display: flex;
}
</style>
<!-- Plotly.js -->
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<!-- Plotly.js -->
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<link rel="shortcut icon" href="favicon.ico">
</head>
<body>
<!-- Plotly chart will be drawn inside this DIV -->
<button type="button" onclick="updateTables()">Generate new tables</button>
<button type="button" onclick="reset()">Reset</button>
<div id="test"></div>
<div class="container">
<div class="settings">
<button type="button" onclick="updateTables()">Generate new tables</button>
<button type="button" onclick="reset()">Reset</button>
<form id="parameters">
<label for="windowsize">Window Size:</label><br>
<input type="text" id="windowsize" name="windowsize" value="20"><br>
<label for="tablesize">Table Size:</label><br>
<input type="text" id="tablesize" name="tablesize" value="10"><br>
<label for="hashsize">Hash Size:</label><br>
<input type="text" id="hashsize" name="hashsize" value="10"><br>
</form>
</div>
<div id="main-plot" style="width:100%"></div>
</div>
<div id="subplots"></div>
<script src="index.js"></script>
</body>
</html>
\ No newline at end of file
Webserver/index.js
View file @ 34732969
var TEST = document.getElementById('test');
var layout = {
hovermode:'closest',
title:'Temperature'
};
const PLOT = document.getElementById('main-plot');
const SUBPLOTS = document.getElementById('subplots');
const FORM = document.getElementById('parameters');
var default_colors = [];
var default_sizes = [];
var window_size = 180;
var indices, values, windows, tables, hash_functions;
var plot;
var selectedIndex;
// Start the application
async function runApp() {
await readFile();
await createWindows();
......@@ -17,6 +16,29 @@ async function runApp() {
makePlot();
}
// Generate new tables
async function updateTables() {
await createTables();
let click_data = {
points: [
{
pointNumber: this.selectedIndex
}
]
};
await updatePlot(click_data);
}
// Reset everything (parameters, windows) except for input data
async function reset() {
await createWindows();
await createTables();
SUBPLOTS.innerHTML = '';
var update = {'marker':{color: this.default_colors.slice(), size:this.default_sizes.slice()}};
Plotly.restyle(PLOT, update);
}
// Read input data
async function readFile() {
const response = await fetch('http://127.0.0.1:5000/read-data');
const data = await response.json(); //extract JSON from the http response
......@@ -24,32 +46,45 @@ async function readFile() {
this.values = data.values;
}
// Split data into windows and normalize
async function createWindows() {
let postData = {values: this.values}
const parameters = new FormData(FORM);
for (let [key, value] of parameters.entries()) {
postData[key] = value
}
const response = await fetch('http://127.0.0.1:5000/create-windows', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({index: this.indices, values: this.values})
body: JSON.stringify(postData)
});
this.windows = await response.json();
}
// Generate LSH-tables by hashing each window
async function createTables() {
let postData = {windows: this.windows}
const parameters = new FormData(FORM);
for (let [key, value] of parameters.entries()) {
postData[key] = value
}
const response = await fetch('http://127.0.0.1:5000/create-tables', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify(this.windows)
body: JSON.stringify(postData)
});
const data = await response.json();
this.tables = data.tables;
this.hash_functions = data.hash_functions;
}
// Return similar windows based on an input query
async function getSimilarWindows(window) {
const response = await fetch('http://127.0.0.1:5000/query', {
method: 'POST',
......@@ -64,6 +99,7 @@ async function getSimilarWindows(window) {
return data;
}
// Draw the main plot that shows all the data
function makePlot() {
for (var i = 0; i < this.values.length; i++) {
this.default_colors.push('#a3a7e4');
......@@ -75,14 +111,28 @@ function makePlot() {
type:'scatter',
mode:'markers', marker:{size:this.default_sizes.slice(), color: this.default_colors.slice()}
}]
Plotly.newPlot(TEST, plot, layout);
var layout = {
hovermode:'closest',
autosize: true,
margin: {
l: 0,
r: 0,
b: 0,
t: 0,
pad: 4
},
height: 200
};
Plotly.newPlot(PLOT, plot, layout);
TEST.on('plotly_click', function(click_data){
PLOT.on('plotly_click', function(click_data){
updatePlot(click_data)
})
}
// Update the plot depending on the selected point
async function updatePlot(click_data) {
SUBPLOTS.innerHTML = '';
var pn='',
colors=this.default_colors.slice(),
sizes=this.default_sizes.slice();
......@@ -96,25 +146,41 @@ async function updatePlot(click_data) {
sizes[similar_indices[i]] = 8;
}
createSubPlot(pn);
let nr_of_subplots = Math.min(similar_indices.length, 4);
for (let i = 0; i < nr_of_subplots; i++) {
createSubPlot(similar_indices[i]);
}
var update = {'marker':{color: colors, size:sizes}};
Plotly.restyle(TEST, update);
Plotly.restyle(PLOT, update);
}
async function updateTables() {
await createTables();
let click_data = {
points: [
{
pointNumber: this.selectedIndex
}
]
// Create subplots for each similar window
function createSubPlot(index) {
let newDiv = document.createElement("div");
SUBPLOTS.appendChild(newDiv);
let window = this.windows[index];
let subplot= [{
x: this.indices.slice(index, index + Number(document.getElementById("windowsize").value)),
y: window,
type:'line'
}]
let layout = {
title: index.toString(),
hovermode:'closest',
autosize: true,
margin: {
l: 0,
r: 20,
b: 0,
t: 50,
pad: 4
},
height: 200,
width: 200,
};
await updatePlot(click_data);
}
async function reset() {
var update = {'marker':{color: this.default_colors.slice(), size:this.default_sizes.slice()}};
Plotly.restyle(TEST, update);
Plotly.newPlot(newDiv, subplot, layout);
}
runApp()
\ No newline at end of file
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment