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
...@@ -29,9 +29,9 @@ def read_data(): ...@@ -29,9 +29,9 @@ def read_data():
@app.route('/create-windows', methods=['POST']) @app.route('/create-windows', methods=['POST'])
def create_windows(): def create_windows():
window_size = 180
raw_data = request.json raw_data = request.json
values = raw_data["values"] values = raw_data["values"]
window_size = int(raw_data["windowsize"])
data = [] data = []
for index in range(len(values) - window_size): for index in range(len(values) - window_size):
window = values[index:index + window_size] window = values[index:index + window_size]
...@@ -40,16 +40,18 @@ def create_windows(): ...@@ -40,16 +40,18 @@ def create_windows():
data.append(window) data.append(window)
else: else:
data.append((window / norm).tolist()) data.append((window / norm).tolist())
print(len(values) - window_size)
response = jsonify(data) response = jsonify(data)
return response return response
@app.route('/create-tables', methods=['POST']) @app.route('/create-tables', methods=['POST'])
def create_tables(): def create_tables():
t0 = time() 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) data = np.array(data)
window_size, hash_size, table_size = 180, 10, 5
tables = [defaultdict(list) for _ in range(table_size)] tables = [defaultdict(list) for _ in range(table_size)]
tables_hash_function = [np.random.randn(window_size, hash_size) for _ in range(table_size)] tables_hash_function = [np.random.randn(window_size, hash_size) for _ in range(table_size)]
......
<?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
...@@ -2,19 +2,40 @@ ...@@ -2,19 +2,40 @@
<html> <html>
<head> <head>
<style> <style>
.modebar{ .modebar {
display: none !important; display: none !important;
} }
.container {
display: flex;
}
#subplots {
display: flex;
}
</style> </style>
<!-- Plotly.js --> <!-- Plotly.js -->
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script> <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<link rel="shortcut icon" href="favicon.ico">
</head> </head>
<body> <body>
<!-- Plotly chart will be drawn inside this DIV --> <div class="container">
<button type="button" onclick="updateTables()">Generate new tables</button> <div class="settings">
<button type="button" onclick="reset()">Reset</button> <button type="button" onclick="updateTables()">Generate new tables</button>
<div id="test"></div> <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> <script src="index.js"></script>
</body> </body>
</html> </html>
\ No newline at end of file
var TEST = document.getElementById('test'); const PLOT = document.getElementById('main-plot');
var layout = { const SUBPLOTS = document.getElementById('subplots');
hovermode:'closest', const FORM = document.getElementById('parameters');
title:'Temperature'
};
var default_colors = []; var default_colors = [];
var default_sizes = []; var default_sizes = [];
var window_size = 180;
var indices, values, windows, tables, hash_functions; var indices, values, windows, tables, hash_functions;
var plot; var plot;
var selectedIndex; var selectedIndex;
// Start the application
async function runApp() { async function runApp() {
await readFile(); await readFile();
await createWindows(); await createWindows();
...@@ -17,6 +16,29 @@ async function runApp() { ...@@ -17,6 +16,29 @@ async function runApp() {
makePlot(); 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() { async function readFile() {
const response = await fetch('http://127.0.0.1:5000/read-data'); const response = await fetch('http://127.0.0.1:5000/read-data');
const data = await response.json(); //extract JSON from the http response const data = await response.json(); //extract JSON from the http response
...@@ -24,32 +46,45 @@ async function readFile() { ...@@ -24,32 +46,45 @@ async function readFile() {
this.values = data.values; this.values = data.values;
} }
// Split data into windows and normalize
async function createWindows() { 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', { const response = await fetch('http://127.0.0.1:5000/create-windows', {
method: 'POST', method: 'POST',
headers: { headers: {
'Accept': 'application/json', 'Accept': 'application/json',
'Content-Type': 'application/json' 'Content-Type': 'application/json'
}, },
body: JSON.stringify({index: this.indices, values: this.values}) body: JSON.stringify(postData)
}); });
this.windows = await response.json(); this.windows = await response.json();
} }
// Generate LSH-tables by hashing each window
async function createTables() { 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', { const response = await fetch('http://127.0.0.1:5000/create-tables', {
method: 'POST', method: 'POST',
headers: { headers: {
'Accept': 'application/json', 'Accept': 'application/json',
'Content-Type': 'application/json' 'Content-Type': 'application/json'
}, },
body: JSON.stringify(this.windows) body: JSON.stringify(postData)
}); });
const data = await response.json(); const data = await response.json();
this.tables = data.tables; this.tables = data.tables;
this.hash_functions = data.hash_functions; this.hash_functions = data.hash_functions;
} }
// Return similar windows based on an input query
async function getSimilarWindows(window) { async function getSimilarWindows(window) {
const response = await fetch('http://127.0.0.1:5000/query', { const response = await fetch('http://127.0.0.1:5000/query', {
method: 'POST', method: 'POST',
...@@ -64,6 +99,7 @@ async function getSimilarWindows(window) { ...@@ -64,6 +99,7 @@ async function getSimilarWindows(window) {
return data; return data;
} }
// Draw the main plot that shows all the data
function makePlot() { function makePlot() {
for (var i = 0; i < this.values.length; i++) { for (var i = 0; i < this.values.length; i++) {
this.default_colors.push('#a3a7e4'); this.default_colors.push('#a3a7e4');
...@@ -75,14 +111,28 @@ function makePlot() { ...@@ -75,14 +111,28 @@ function makePlot() {
type:'scatter', type:'scatter',
mode:'markers', marker:{size:this.default_sizes.slice(), color: this.default_colors.slice()} 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) updatePlot(click_data)
}) })
} }
// Update the plot depending on the selected point
async function updatePlot(click_data) { async function updatePlot(click_data) {
SUBPLOTS.innerHTML = '';
var pn='', var pn='',
colors=this.default_colors.slice(), colors=this.default_colors.slice(),
sizes=this.default_sizes.slice(); sizes=this.default_sizes.slice();
...@@ -96,25 +146,41 @@ async function updatePlot(click_data) { ...@@ -96,25 +146,41 @@ async function updatePlot(click_data) {
sizes[similar_indices[i]] = 8; 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}}; var update = {'marker':{color: colors, size:sizes}};
Plotly.restyle(TEST, update); Plotly.restyle(PLOT, update);
} }
async function updateTables() { // Create subplots for each similar window
await createTables(); function createSubPlot(index) {
let click_data = { let newDiv = document.createElement("div");
points: [ SUBPLOTS.appendChild(newDiv);
{ let window = this.windows[index];
pointNumber: this.selectedIndex 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); Plotly.newPlot(newDiv, subplot, layout);
}
async function reset() {
var update = {'marker':{color: this.default_colors.slice(), size:this.default_sizes.slice()}};
Plotly.restyle(TEST, update);
} }
runApp() 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