Commit 10dda117 authored by Kruyff,D.L.W. (Dylan)'s avatar Kruyff,D.L.W. (Dylan)
Browse files

Revert MTS changes

parent dcd02d1e
...@@ -21,12 +21,6 @@ export class ApiService { ...@@ -21,12 +21,6 @@ export class ApiService {
return {index, values}; return {index, values};
} }
// Read input data
async readMtsFile(): Promise<any> {
const response = await fetch('http://127.0.0.1:5000/read-mts-data');
return await response.json();
}
// Split data into windows and normalize // Split data into windows and normalize
async createWindows(parameters): Promise<any> { async createWindows(parameters): Promise<any> {
const postData = {parameters}; const postData = {parameters};
...@@ -41,20 +35,6 @@ export class ApiService { ...@@ -41,20 +35,6 @@ export class ApiService {
return await response.json(); return await response.json();
} }
// Split data into windows and normalize
async createMtsWindows(parameters): Promise<any> {
const postData = {parameters};
const response = await fetch('http://127.0.0.1:5000/create-mts-windows', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify(postData)
});
return await response.json();
}
// Generate LSH-tables by hashing each window // Generate LSH-tables by hashing each window
async createTables(parameters): Promise<any> { async createTables(parameters): Promise<any> {
console.log("creating tables"); console.log("creating tables");
...@@ -70,21 +50,6 @@ export class ApiService { ...@@ -70,21 +50,6 @@ export class ApiService {
return await response.json(); return await response.json();
} }
// Generate LSH-tables by hashing each window
async createMtsTables(parameters): Promise<any> {
console.log("creating tables");
const postData = {parameters};
const response = await fetch('http://127.0.0.1:5000/create-mts-tables', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: new Blob( [ JSON.stringify(postData) ], { type: 'text/plain' } )
});
return await response.json();
}
async getQueryWindow(window) { async getQueryWindow(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',
......
...@@ -5,8 +5,8 @@ import {ApiService, RawData} from './api.service'; ...@@ -5,8 +5,8 @@ import {ApiService, RawData} from './api.service';
providedIn: 'root' providedIn: 'root'
}) })
export class CacheService { export class CacheService {
public rawValues: number[][]; public rawValues: number[];
public rawIndices: string[][]; public rawIndices: string[];
public loadingProgress: number = 0; public loadingProgress: number = 0;
private _currentTab: number; private _currentTab: number;
...@@ -56,20 +56,19 @@ export class CacheService { ...@@ -56,20 +56,19 @@ export class CacheService {
} }
async getRawData(): Promise<void> { async getRawData(): Promise<void> {
const channels = await this.api.readMtsFile(); const rawData: RawData = await this.api.readFile();
console.log(channels); this.rawIndices = rawData.index;
this.rawIndices = channels.map((channel) => channel.index); this.rawValues = rawData.values;
this.rawValues = channels.map((channel) => channel.values);
this.onNewData.emit(); this.onNewData.emit();
} }
async createWindows(): Promise<void> { async createWindows(): Promise<void> {
await this.api.createMtsWindows(this.parameters); await this.api.createWindows(this.parameters);
this.onNewWindows.emit(); this.onNewWindows.emit();
} }
async createTables(): Promise<void> { async createTables(): Promise<void> {
this.tables = await this.api.createMtsTables(this.parameters); this.tables = await this.api.createTables(this.parameters);
} }
async getSimilarWindows(): Promise<any> { async getSimilarWindows(): Promise<any> {
......
...@@ -2,7 +2,6 @@ ...@@ -2,7 +2,6 @@
margin-right: 20px; margin-right: 20px;
display: flex; display: flex;
justify-content: center; justify-content: center;
border-right: groove;
} }
.subplot-container { .subplot-container {
......
...@@ -78,34 +78,19 @@ export class LabelingWindowComponent implements OnInit { ...@@ -78,34 +78,19 @@ export class LabelingWindowComponent implements OnInit {
} }
} }
this.topk = topk; this.topk = topk;
this.subplots = []; this.subplots = [];
for (const windowIndex of this.topk) { for (const window of this.topk) {
const window = this.service.rawValues.map((channel) => channel.slice(windowIndex.index, windowIndex.index + this.service.windowSize)); this.subplots.push(
const data = []; {
window.forEach((channel, index) => { index: window.index,
data.push({ data: [{
x: [...Array(channel.length).keys()], x: this.service.rawIndices.slice(window.index, window.index + this.service.windowSize),
y: channel, y: this.service.rawValues.slice(window.index, window.index + this.service.windowSize),
type: 'line', type: 'line'
xaxis: 'x', }],
yaxis: `y${index + 2}`,
});
});
const subplots = [];
window.forEach((channel, index) => {
subplots.push([`xy${index + 2}`]);
});
const plot = {
index: windowIndex.index,
data: data,
layout: { layout: {
grid: { title: `Index: ${window.index.toString()} Similarity: ${window.frequency.toString()}%`,
rows: this.service.queryWindow.length,
columns: 1,
subplots: subplots,
},
showlegend: false,
title: `Index: ${windowIndex.index.toString()} Similarity: ${windowIndex.frequency.toString()}%`,
hovermode: 'closest', hovermode: 'closest',
autosize: true, autosize: true,
margin: { margin: {
...@@ -115,7 +100,7 @@ export class LabelingWindowComponent implements OnInit { ...@@ -115,7 +100,7 @@ export class LabelingWindowComponent implements OnInit {
b: 0, b: 0,
pad: 4 pad: 4
}, },
height: 300, height: 150,
width: 150, width: 150,
titlefont: { titlefont: {
size: 9 size: 9
...@@ -130,14 +115,8 @@ export class LabelingWindowComponent implements OnInit { ...@@ -130,14 +115,8 @@ export class LabelingWindowComponent implements OnInit {
showticklabels: false, showticklabels: false,
} }
} }
}; }
window.forEach((channel, index) => { );
plot.layout[`yaxis${index + 2}`] = {
zeroline: false,
showticklabels: false,
};
});
this.subplots.push(plot);
} }
} }
} }
...@@ -25,8 +25,8 @@ export class LabelsComponent implements OnInit { ...@@ -25,8 +25,8 @@ export class LabelsComponent implements OnInit {
{ {
index, index,
data: [{ data: [{
x: [...Array(this.service.windowSize).keys()], x: this.service.rawIndices.slice(index, index + this.service.windowSize),
y: this.service.rawValues[0].slice(index, index + this.service.windowSize), y: this.service.rawValues.slice(index, index + this.service.windowSize),
type: 'line' type: 'line'
}], }],
layout: { layout: {
......
<zingchart-angular #chart [id]="id" [config]="config" (mousewheel)="zoom($event)" (click)="clicked($event)" [height]="300"></zingchart-angular> <zingchart-angular [id]="id" [config]="config" (dblclick)="doubleClick($event)" (mousewheel)="zoom($event)" (click)="clicked($event)" [height]="150"></zingchart-angular>
<div id="test"></div>
import {Component, OnInit, ViewChild} from '@angular/core'; import {Component, OnInit} from '@angular/core';
import { CacheService } from '../cache.service'; import { CacheService } from '../cache.service';
import zingchart from 'zingchart/es6'; import zingchart from 'zingchart/es6';
...@@ -9,13 +9,11 @@ import zingchart from 'zingchart/es6'; ...@@ -9,13 +9,11 @@ import zingchart from 'zingchart/es6';
}) })
export class OverviewWindowComponent implements OnInit { export class OverviewWindowComponent implements OnInit {
public config; public config;
public graphset = [];
public id = "overview"; public id = "overview";
public markers = []; public markers = [];
public series = []; public series = [];
public goodLabels = []; public goodLabels = [];
public badLabels = []; public badLabels = [];
@ViewChild('chart') chart;
public data; public data;
public layout; public layout;
...@@ -34,38 +32,22 @@ export class OverviewWindowComponent implements OnInit { ...@@ -34,38 +32,22 @@ export class OverviewWindowComponent implements OnInit {
} }
async initializePlot() { async initializePlot() {
// Initialize label chart this.service.queryWindow = undefined;
this.graphset.push({ this.data = [];
id: 'preview', for (let i = 0; i < this.service.rawValues.length; i++) {
type: "scatter", this.data.push([i, this.service.rawValues[i]]);
x: 0,
y: 0,
scaleX: {
zooming: true,
minValue: 0,
maxValue: this.service.rawValues[0].length,
zoomTo: [0, this.service.windowSize],
'auto-fit': true,
visible: false,
guide: {
visible: false
} }
}, this.series = [
height: '30px', {
scaleY: { type: 'line',
maxValue: 1, values: this.data,
minValue: -1, text: 'Raw Values',
visible: false, zIndex: 5,
guide: { marker: {
visible: false alpha: 0.0,
zIndex: 10
} }
}, },
preview: {
x: 50,
y: 10,
height: '30px',
},
series: [
{ {
type: 'scatter', type: 'scatter',
values: [], values: [],
...@@ -73,7 +55,7 @@ export class OverviewWindowComponent implements OnInit { ...@@ -73,7 +55,7 @@ export class OverviewWindowComponent implements OnInit {
marker: { marker: {
backgroundColor: '#4caf50' backgroundColor: '#4caf50'
}, },
zIndex: 3, zIndex: 20,
}, },
{ {
type: 'scatter', type: 'scatter',
...@@ -82,74 +64,30 @@ export class OverviewWindowComponent implements OnInit { ...@@ -82,74 +64,30 @@ export class OverviewWindowComponent implements OnInit {
marker: { marker: {
backgroundColor: '#f44336' backgroundColor: '#f44336'
}, },
zIndex: 2, zIndex: 20,
}];
this.config = {
type: "mixed",
preview: {
height: "30px",
position: "0% 100%",
'auto-fit': true
}, },
{ "plotarea": {
type: 'scatter', "margin-top": "10px",
values: [], "margin-bottom": "50%"
text: 'Candidates',
marker: {
backgroundColor: '#b1a343'
}, },
zIndex: 1,
}
]
});
// Initialize channels
this.service.rawValues.forEach((channel, index) => {
const data = [];
for (let i = 0; i < channel.length; i++) {
data.push([i, channel[i]]);
}
this.graphset.push({
id: index,
x: 0,
y: `${75 * index + 50}px`,
type: 'line',
height: '50px',
scaleX: { scaleX: {
zooming: true, zooming: true,
zoomTo: [0, this.service.windowSize], zoomTo: [0, this.service.windowSize],
markers: [] 'auto-fit': true,
markers: this.markers
}, },
'scale-y': { 'scale-y': {
zooming: false,
'auto-fit': true 'auto-fit': true
}, },
plotarea: { series: this.series
height: '50px',
'margin-top': '0px',
'margin-bot': '0px'
},
series: [{
type: 'line',
values: data,
text: 'Raw Values',
zIndex: 5,
marker: {
alpha: 0.0,
zIndex: 10
}
}]
});
});
zingchart.bind('zingchart-ng-1', 'zoom', (e) => {
if (e.graphid !== `zingchart-ng-1-graph-preview`) {
return;
}
for (let i = 1; i < this.graphset.length; i ++) {
this.chart.zoomto({
graphid: i,
xmin: e.xmin,
xmax: e.xmax
});
}
});
this.config = {
layout: `${this.graphset.length}x1`,
graphset: this.graphset
}; };
console.log(this.config);
console.log("showing plot"); console.log("showing plot");
} }
...@@ -158,13 +96,12 @@ export class OverviewWindowComponent implements OnInit { ...@@ -158,13 +96,12 @@ export class OverviewWindowComponent implements OnInit {
return; return;
} }
this.service.querySelectionMode = false; this.service.querySelectionMode = false;
const xyInformation = JSON.parse(this.chart.getxyinfo({ const xyInformation = zingchart.exec("zingchart-ng-1", 'getxyinfo', {
x: clickData.x, x: clickData.x,
y: clickData.y y: clickData.y
})); });
console.log(xyInformation); const index = Math.floor(xyInformation[2].nodeidx / this.service.stepSize);
const index = Math.floor(xyInformation[8].nodeidx / this.service.stepSize); await this.service.getQueryWindow(this.service.rawValues.slice(index, index + this.service.windowSize));
await this.service.getQueryWindow(this.service.rawValues.map((channel) => channel.slice(index, index + this.service.windowSize)));
const temp = {}; const temp = {};
temp[index] = true; temp[index] = true;
this.service.labels = temp; this.service.labels = temp;
...@@ -181,36 +118,32 @@ export class OverviewWindowComponent implements OnInit { ...@@ -181,36 +118,32 @@ export class OverviewWindowComponent implements OnInit {
this.markers = []; this.markers = [];
for (const index in this.service.labels) { for (const index in this.service.labels) {
if (this.service.labels[index]) { if (this.service.labels[index]) {
this.goodLabels.push([Number(index), 0]); this.goodLabels.push(this.data[index]);
this.markers.push({ this.markers.push({
type: 'area', type: 'area',
// BUG: For some reason the range values are multiplied by 10 // BUG: For some reason the range values are multiplied by 10
range: [Number(index) / 10, (Number(index) + this.service.windowSize) / 10], range: [this.data[index][0] / 10, (this.data[index][0] + this.service.windowSize) / 10],
backgroundColor: "#4caf50", backgroundColor: "#4caf50",
}); });
} else { } else {
this.badLabels.push([Number(index), -1]); this.badLabels.push(this.data[index]);
this.markers.push({ this.markers.push({
type: 'area', type: 'area',
// BUG: For some reason the range values are multiplied by 10 // BUG: For some reason the range values are multiplied by 10
range: [Number(index) / 10, (Number(index) + this.service.windowSize) / 10], range: [this.data[index][0] / 10, (this.data[index][0] + this.service.windowSize) / 10],
backgroundColor: "#f44336", backgroundColor: "#f44336",
}); });
} }
} }
for (const channel of this.config.graphset) { this.series[1].values = this.goodLabels;
if (channel.type === 'line') { this.series[2].values = this.badLabels;
channel.scaleX.markers = this.markers; this.config.scaleX.markers = this.markers;
} else { zingchart.exec("zingchart-ng-1", 'setdata', {
channel.series[0].values = this.goodLabels;
channel.series[1].values = this.badLabels;
channel.series[2].values = [];
}
}
this.chart.setdata({
data: this.config data: this.config
}); });
console.log('querying');
await this.service.getSimilarWindows(); await this.service.getSimilarWindows();
console.log('done');
} }
async updateCandidates(sliderIndex) { async updateCandidates(sliderIndex) {
...@@ -222,22 +155,27 @@ export class OverviewWindowComponent implements OnInit { ...@@ -222,22 +155,27 @@ export class OverviewWindowComponent implements OnInit {
const labels = []; const labels = [];
const markers = []; const markers = [];
for (const index of candidates) { for (const index of candidates) {
labels.push([Number(index), 1]); labels.push(this.data[index]);
markers.push({ markers.push({
type: 'area', type: 'area',
// BUG: For some reason the range values are multiplied by 10 // BUG: For some reason the range values are multiplied by 10
range: [Number(index) / 10, (Number(index) + this.service.windowSize) / 10], range: [this.data[index][0] / 10, (this.data[index][0] + this.service.windowSize) / 10],
backgroundColor: "#b1a343", backgroundColor: "#b1a343",
}); });
} }
for (const channel of this.config.graphset) { const newSeries = this.config.series.slice(0, 3);
if (channel.type === 'line') { newSeries.push({
channel.scaleX.markers = channel.scaleX.markers.concat(markers); type: 'scatter',
} else { values: labels,
channel.series[2].values = labels; text: 'Similar windows',
} marker: {
} backgroundColor: '#b1a343'
this.chart.setdata({ },
zIndex: 20,
});
this.config.series = newSeries;
this.config.scaleX.markers = this.markers.concat(markers);
zingchart.exec("zingchart-ng-1", 'setdata', {