Next tuesday 25th january around 21.30 we'll be upgrading to GitLab version 14.7

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():
@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)]
......
<?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 @@
<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
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
Markdown is supported
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