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

Reintroduced MTS data

parent 9353b768
import { Injectable } from '@angular/core'; import { Injectable } from '@angular/core';
export interface RawData { export interface RawData {
index: string[]; index: string[][];
values: number[]; values: number[][];
} }
export interface LshData { export interface LshData {
...@@ -29,15 +29,15 @@ export class ApiService { ...@@ -29,15 +29,15 @@ export class ApiService {
constructor() { } constructor() { }
// Read input data // Read input data
async readFile(): Promise<RawData> { async readFile(): Promise<RawData[]> {
const response = await fetch('http://127.0.0.1:5000/read-data'); const response = await fetch('http://127.0.0.1:5000/read-mts-data');
return await response.json(); 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};
const response = await fetch('http://127.0.0.1:5000/create-windows', { const response = await fetch('http://127.0.0.1:5000/create-mts-windows', {
method: 'POST', method: 'POST',
headers: { headers: {
'Accept': 'application/json', 'Accept': 'application/json',
...@@ -74,7 +74,7 @@ export class ApiService { ...@@ -74,7 +74,7 @@ export class ApiService {
} }
// Get query window based on windows labeled correct // Get query window based on windows labeled correct
async getQueryWindow(window): Promise<number[]> { async getQueryWindow(window): Promise<number[][]> {
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',
headers: { headers: {
...@@ -87,7 +87,7 @@ export class ApiService { ...@@ -87,7 +87,7 @@ export class ApiService {
} }
// Get data of a window by indices // Get data of a window by indices
async getWindowByIndices(indices: number[]): Promise<number[][]> { async getWindowByIndices(indices: number[]): Promise<number[][][]> {
const response = await fetch('http://127.0.0.1:5000/window', { const response = await fetch('http://127.0.0.1:5000/window', {
method: 'POST', method: 'POST',
headers: { headers: {
......
...@@ -48,18 +48,34 @@ export class LabelingWindowComponent implements OnInit { ...@@ -48,18 +48,34 @@ export class LabelingWindowComponent implements OnInit {
.filter((candidate) => this.state.labels[candidate] !== true) .filter((candidate) => this.state.labels[candidate] !== true)
.slice(0, this.k); .slice(0, this.k);
this.subplots = []; this.subplots = [];
const values = await this.state.getWindow(this.topk); const values: number[][][] = await this.state.getWindow(this.topk);
this.topk.forEach((index, i) => { for (const idx in this.topk) {
this.subplots.push( const window = values[idx].slice(0, 1);
{ const data = [];
index, window.forEach((channel: number[], index: number) => {
data: [{ data.push({
x: [...Array(values[i].length).keys()], x: [...Array(channel.length).keys()],
y: values[i], y: channel,
type: 'line' type: 'line',
}], xaxis: 'x',
yaxis: `y${index + 2}`,
});
});
const subplots = [];
window.forEach((channel: number[], index: number) => {
subplots.push([`xy${index + 2}`]);
});
const plot = {
index: this.topk[idx],
data: data,
layout: { layout: {
title: `Index: ${index.toString()}`, grid: {
rows: 1, //this.state.queryWindow.length,
columns: 1,
subplots: subplots,
},
showlegend: false,
title: `Index: ${this.topk[idx].toString()}`,
hovermode: 'closest', hovermode: 'closest',
autosize: true, autosize: true,
margin: { margin: {
...@@ -69,7 +85,7 @@ export class LabelingWindowComponent implements OnInit { ...@@ -69,7 +85,7 @@ export class LabelingWindowComponent implements OnInit {
b: 0, b: 0,
pad: 4 pad: 4
}, },
height: 150, height: 100,
width: 300, width: 300,
titlefont: { titlefont: {
size: 9 size: 9
...@@ -84,9 +100,15 @@ export class LabelingWindowComponent implements OnInit { ...@@ -84,9 +100,15 @@ export class LabelingWindowComponent implements OnInit {
showticklabels: false, showticklabels: false,
} }
} }
} };
); window.forEach((channel: number[], index: number) => {
plot.layout[`yaxis${index + 2}`] = {
zeroline: false,
showticklabels: false,
};
}); });
this.subplots.push(plot);
}
} }
public get show() { public get show() {
......
<zingchart-angular [id]="id" [config]="config" (mousewheel)="zoom($event)" (click)="clicked($event)" [height]="150"></zingchart-angular> <zingchart-angular #chart [id]="id" [config]="config" (mousewheel)="zoom($event)" (click)="clicked($event)" [height]="150"></zingchart-angular>
import {Component, OnInit} from '@angular/core'; import {Component, OnInit, ViewChild} from '@angular/core';
import { StateService } from '../state.service'; import { StateService } from '../state.service';
import zingchart from 'zingchart/es6'; import zingchart from 'zingchart/es6';
...@@ -8,7 +8,9 @@ import zingchart from 'zingchart/es6'; ...@@ -8,7 +8,9 @@ import zingchart from 'zingchart/es6';
styleUrls: ['./overview-window.component.css'] styleUrls: ['./overview-window.component.css']
}) })
export class OverviewWindowComponent implements OnInit { export class OverviewWindowComponent implements OnInit {
@ViewChild('chart') chart;
public config; public config;
public graphset = [];
public id = 'overview'; public id = 'overview';
public markers = []; public markers = [];
public series = []; public series = [];
...@@ -29,21 +31,37 @@ export class OverviewWindowComponent implements OnInit { ...@@ -29,21 +31,37 @@ export class OverviewWindowComponent implements OnInit {
async initializePlot() { async initializePlot() {
this.state.queryWindow = undefined; this.state.queryWindow = undefined;
// this.debugClicked(); // this.debugClicked();
this.data = []; this.graphset.push({
for (let i = 0; i < this.state.rawData.values.length; i++) { id: 'preview',
this.data.push([this.state.rawData.index[i], this.state.rawData.values[i]]); type: "scatter",
x: 0,
y: 0,
scaleX: {
zooming: true,
minValue: 0,
maxValue: this.state.rawData[0].values.length,
zoomTo: [0, this.state.windowSize],
'auto-fit': true,
visible: false,
guide: {
visible: false
} }
this.series = [ },
{ height: '30px',
type: 'line', scaleY: {
values: this.data, maxValue: 1,
text: 'Raw Values', minValue: -1,
zIndex: 5, visible: false,
marker: { guide: {
alpha: 0.0, visible: false
zIndex: 10
} }
}, },
preview: {
x: 50,
y: 10,
height: '30px',
},
series: [
{ {
type: 'scatter', type: 'scatter',
values: [], values: [],
...@@ -51,7 +69,7 @@ export class OverviewWindowComponent implements OnInit { ...@@ -51,7 +69,7 @@ export class OverviewWindowComponent implements OnInit {
marker: { marker: {
backgroundColor: '#4caf50' backgroundColor: '#4caf50'
}, },
zIndex: 20, zIndex: 3,
}, },
{ {
type: 'scatter', type: 'scatter',
...@@ -60,30 +78,78 @@ export class OverviewWindowComponent implements OnInit { ...@@ -60,30 +78,78 @@ export class OverviewWindowComponent implements OnInit {
marker: { marker: {
backgroundColor: '#f44336' backgroundColor: '#f44336'
}, },
zIndex: 20, zIndex: 2,
}];
this.config = {
type: 'mixed',
preview: {
height: '30px',
position: '0% 100%',
'auto-fit': true
}, },
plotarea: { {
'margin-top': '10px', type: 'scatter',
'margin-bottom': '50%' values: [],
text: 'Candidates',
marker: {
backgroundColor: '#b1a343'
}, },
zIndex: 1,
}
]
});
// Initialize channels
this.state.rawData.forEach((channel, index) => {
if (index !== 0) {
return;
}
const data = [];
for (let i = 0; i < channel.values.length; i++) {
data.push([i, channel.values[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.state.windowSize], zoomTo: [0, this.state.windowSize],
'auto-fit': true, markers: []
markers: this.markers
}, },
'scale-y': { 'scale-y': {
zooming: false,
'auto-fit': true 'auto-fit': true
}, },
series: this.series plotarea: {
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");
} }
async updatePlot() { async updatePlot() {
...@@ -170,7 +236,7 @@ export class OverviewWindowComponent implements OnInit { ...@@ -170,7 +236,7 @@ export class OverviewWindowComponent implements OnInit {
} }
async debugClicked() { async debugClicked() {
const index = 80503; const index = 1234;
await this.state.getQueryWindow(index); await this.state.getQueryWindow(index);
await this.state.lshInitial(); await this.state.lshInitial();
} }
......
...@@ -22,8 +22,8 @@ export class QueryWindowComponent implements OnInit { ...@@ -22,8 +22,8 @@ export class QueryWindowComponent implements OnInit {
initializePlot(): void { initializePlot(): void {
const data = [{ const data = [{
x: [...Array(this.state.queryWindow.length).keys()], x: [...Array(this.state.queryWindow[0].length).keys()],
y: this.state.queryWindow, y: this.state.queryWindow[0],
type: 'line' type: 'line'
}]; }];
// if (this.service.distances.length !== 0) { // if (this.service.distances.length !== 0) {
......
...@@ -7,16 +7,16 @@ import {ApiService, LshData, RawData, TableInfoData} from './api.service'; ...@@ -7,16 +7,16 @@ import {ApiService, LshData, RawData, TableInfoData} from './api.service';
export class StateService { export class StateService {
public loadingProgress: number = 0; public loadingProgress: number = 0;
private _rawData: RawData; private _rawData: RawData[];
private _lshData: LshData; private _lshData: LshData;
private _tableInfo: TableInfoData; private _tableInfo: TableInfoData;
private _queryWindow: number[]; private _queryWindow: number[][];
private _table: {[bucket: string]: number[]}; private _table: {[bucket: string]: number[]};
private _currentTab: number; private _currentTab: number;
private _labels = {}; private _labels = {};
private _sliderValue; private _sliderValue;
private _parameters: number[]; private _lshParameters: number[];
public windowSize = 120; public windowSize = 120;
public nrOfTables = 5; public nrOfTables = 5;
...@@ -63,11 +63,12 @@ export class StateService { ...@@ -63,11 +63,12 @@ export class StateService {
async lshInitial(): Promise<void> { async lshInitial(): Promise<void> {
this.lshData = await this.api.lshInitial(this._queryWindow); this.lshData = await this.api.lshInitial(this._queryWindow);
this._lshParameters = this.lshData.parameters;
this.createTable(); this.createTable();
} }
async update(): Promise<void> { async update(): Promise<void> {
this.lshData = await this.api.lshUpdate(this._queryWindow, [], this.lshData.parameters); this.lshData = await this.api.lshUpdate(this._queryWindow, [], this._lshParameters);
this.createTable(); this.createTable();
} }
...@@ -76,12 +77,12 @@ export class StateService { ...@@ -76,12 +77,12 @@ export class StateService {
return this.tableInfo; return this.tableInfo;
} }
async getQueryWindow(windowIndex: number | {[index: number]: boolean}): Promise<number[]> { async getQueryWindow(windowIndex: number | {[index: number]: boolean}): Promise<number[][]> {
this.queryWindow = await this.api.getQueryWindow(windowIndex); this.queryWindow = await this.api.getQueryWindow(windowIndex);
return this._queryWindow; return this._queryWindow;
} }
async getWindow(indices: number[]): Promise<number[][]> { async getWindow(indices: number[]): Promise<number[][][]> {
return await this.api.getWindowByIndices(indices); return await this.api.getWindowByIndices(indices);
} }
...@@ -99,12 +100,13 @@ export class StateService { ...@@ -99,12 +100,13 @@ export class StateService {
this.getTableInfo(); this.getTableInfo();
} }
public set rawData(v: RawData) { public set rawData(v: RawData[]) {
this._rawData = v; this._rawData = v;
console.log(this._rawData);
this.onNewData.emit(); this.onNewData.emit();
} }
public get rawData(): RawData { public get rawData(): RawData []{
return this._rawData; return this._rawData;
} }
...@@ -163,15 +165,19 @@ export class StateService { ...@@ -163,15 +165,19 @@ export class StateService {
return this._sliderValue; return this._sliderValue;
} }
public set queryWindow(v: number[]) { public set queryWindow(v: number[][]) {
this._queryWindow = v; this._queryWindow = v;
this.onNewQuery.emit(); this.onNewQuery.emit();
} }
public get queryWindow(): number[] { public get queryWindow(): number[][] {
return this._queryWindow; return this._queryWindow;
} }
public get lshParameters(): number[] {
return this._lshParameters;
}
public get parameters(): {[parameter: string]: number} { public get parameters(): {[parameter: string]: number} {
return { return {
windowsize: this.windowSize, windowsize: this.windowSize,
......
...@@ -20,17 +20,11 @@ ...@@ -20,17 +20,11 @@
</component> </component>
<component name="ChangeListManager"> <component name="ChangeListManager">
<list default="true" id="556080ba-825c-4b55-a92a-867a4df4fb32" name="Default Changelist" comment=""> <list default="true" id="556080ba-825c-4b55-a92a-867a4df4fb32" name="Default Changelist" comment="">
<change beforePath="$PROJECT_DIR$/../AngularApp/prototype/src/app/labeling-window/labeling-window.component.html" beforeDir="false" afterPath="$PROJECT_DIR$/../AngularApp/prototype/src/app/labeling-window/labeling-window.component.html" afterDir="false" />
<change beforePath="$PROJECT_DIR$/../AngularApp/prototype/src/app/overview-window/overview-window.component.ts" beforeDir="false" afterPath="$PROJECT_DIR$/../AngularApp/prototype/src/app/overview-window/overview-window.component.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/../AngularApp/prototype/src/app/table-overview/table-overview.component.ts" beforeDir="false" afterPath="$PROJECT_DIR$/../AngularApp/prototype/src/app/table-overview/table-overview.component.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" /> <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
<change beforePath="$PROJECT_DIR$/1.csv" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/DailyDelhiClimateTrain.csv" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/_lsh.cpython-38-x86_64-linux-gnu.so" beforeDir="false" afterPath="$PROJECT_DIR$/_lsh.cpython-38-x86_64-linux-gnu.so" afterDir="false" /> <change beforePath="$PROJECT_DIR$/_lsh.cpython-38-x86_64-linux-gnu.so" beforeDir="false" afterPath="$PROJECT_DIR$/_lsh.cpython-38-x86_64-linux-gnu.so" afterDir="false" />
<change beforePath="$PROJECT_DIR$/build/lib.linux-x86_64-3.8/_lsh.cpython-38-x86_64-linux-gnu.so" beforeDir="false" afterPath="$PROJECT_DIR$/build/lib.linux-x86_64-3.8/_lsh.cpython-38-x86_64-linux-gnu.so" afterDir="false" /> <change beforePath="$PROJECT_DIR$/build/lib.linux-x86_64-3.8/_lsh.cpython-38-x86_64-linux-gnu.so" beforeDir="false" afterPath="$PROJECT_DIR$/build/lib.linux-x86_64-3.8/_lsh.cpython-38-x86_64-linux-gnu.so" afterDir="false" />
<change beforePath="$PROJECT_DIR$/build/temp.linux-x86_64-3.8/locality-sensitive-hashing-visual-analytics/lsh-fast/_lsh.o" beforeDir="false" afterPath="$PROJECT_DIR$/build/temp.linux-x86_64-3.8/locality-sensitive-hashing-visual-analytics/lsh-fast/_lsh.o" afterDir="false" />
<change beforePath="$PROJECT_DIR$/main.py" beforeDir="false" afterPath="$PROJECT_DIR$/main.py" afterDir="false" /> <change beforePath="$PROJECT_DIR$/main.py" beforeDir="false" afterPath="$PROJECT_DIR$/main.py" afterDir="false" />
<change beforePath="$PROJECT_DIR$/setup.py" beforeDir="false" afterPath="$PROJECT_DIR$/setup.py" afterDir="false" />
<change beforePath="$PROJECT_DIR$/../environment.yml" beforeDir="false" afterPath="$PROJECT_DIR$/../environment.yml" afterDir="false" />
</list> </list>
<option name="SHOW_DIALOG" value="false" /> <option name="SHOW_DIALOG" value="false" />
<option name="HIGHLIGHT_CONFLICTS" value="true" /> <option name="HIGHLIGHT_CONFLICTS" value="true" />
...@@ -50,7 +44,7 @@ ...@@ -50,7 +44,7 @@
<property name="RunOnceActivity.OpenProjectViewOnStart" value="true" /> <property name="RunOnceActivity.OpenProjectViewOnStart" value="true" />
<property name="SHARE_PROJECT_CONFIGURATION_FILES" value="true" /> <property name="SHARE_PROJECT_CONFIGURATION_FILES" value="true" />
<property name="WebServerToolWindowFactoryState" value="false" /> <property name="WebServerToolWindowFactoryState" value="false" />
<property name="last_opened_file_path" value="$PROJECT_DIR$" /> <property name="last_opened_file_path" value="$PROJECT_DIR$/../experiments/utils.py" />
<property name="nodejs_interpreter_path.stuck_in_default_project" value="undefined stuck path" /> <property name="nodejs_interpreter_path.stuck_in_default_project" value="undefined stuck path" />
<property name="nodejs_npm_path_reset_for_default_project" value="true" /> <property name="nodejs_npm_path_reset_for_default_project" value="true" />
</component> </component>
...@@ -137,13 +131,21 @@ ...@@ -137,13 +131,21 @@
<screen x="72" y="27" width="1848" height="1053" /> <screen x="72" y="27" width="1848" height="1053" />
</state> </state>
<state x="686" y="355" width="777" height="403" key="#com.intellij.fileTypes.FileTypeChooser/72.27.1848.1053@72.27.1848.1053" timestamp="1603212805629" /> <state x="686" y="355" width="777" height="403" key="#com.intellij.fileTypes.FileTypeChooser/72.27.1848.1053@72.27.1848.1053" timestamp="1603212805629" />
<state x="729" y="302" width="524" height="509" key="#com.intellij.refactoring.safeDelete.UnsafeUsagesDialog" timestamp="1605036046833">
<screen x="72" y="27" width="1848" height="1053" />
</state>
<state x="729" y="302" width="524" height="509" key="#com.intellij.refactoring.safeDelete.UnsafeUsagesDialog/72.27.1848.1053@72.27.1848.1053" timestamp="1605036046833" />
<state x="479" y="254" width="1200" height="800" key="DiffContextDialog" timestamp="1603129938934"> <state x="479" y="254" width="1200" height="800" key="DiffContextDialog" timestamp="1603129938934">
<screen x="72" y="27" width="1848" height="1053" /> <screen x="72" y="27" width="1848" height="1053" />
</state> </state>
<state x="479" y="254" width="1200" height="800" key="DiffContextDialog/72.27.1848.1053@72.27.1848.1053" timestamp="1603129938934" /> <state x="479" y="254" width="1200" height="800" key="DiffContextDialog/72.27.1848.1053@72.27.1848.1053" timestamp="1603129938934" />
<state x="779" y="311" width="424" height="491" key="FileChooserDialogImpl" timestamp="1603390700256"> <state x="779" y="311" width="424" height="491" key="FileChooserDialogImpl" timestamp="1604916700277">
<screen x="72" y="27" width="1848" height="1053" />
</state>
<state x="779" y="311" width="424" height="491" key="FileChooserDialogImpl/72.27.1848.1053@72.27.1848.1053" timestamp="1604916700277" />