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,45 +48,67 @@ export class LabelingWindowComponent implements OnInit { ...@@ -48,45 +48,67 @@ 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',
layout: { yaxis: `y${index + 2}`,
title: `Index: ${index.toString()}`, });
hovermode: 'closest', });
autosize: true, const subplots = [];
margin: { window.forEach((channel: number[], index: number) => {
l: 30, subplots.push([`xy${index + 2}`]);
r: 30, });
t: 30, const plot = {
b: 0, index: this.topk[idx],
pad: 4 data: data,
}, layout: {
height: 150, grid: {
width: 300, rows: 1, //this.state.queryWindow.length,
titlefont: { columns: 1,
size: 9 subplots: subplots,
}, },
xaxis: { showlegend: false,
showgrid: false, title: `Index: ${this.topk[idx].toString()}`,
zeroline: false, hovermode: 'closest',
showticklabels: false, autosize: true,
}, margin: {
yaxis: { l: 30,
zeroline: false, r: 30,
showticklabels: false, t: 30,
} b: 0,
pad: 4
},
height: 100,
width: 300,
titlefont: {
size: 9
},
xaxis: {
showgrid: false,
zeroline: false,
showticklabels: false,
},
yaxis: {
zeroline: 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,61 +31,125 @@ export class OverviewWindowComponent implements OnInit { ...@@ -29,61 +31,125 @@ 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,
this.series = [ y: 0,
{
type: 'line',
values: this.data,
text: 'Raw Values',
zIndex: 5,
marker: {
alpha: 0.0,
zIndex: 10
}
},
{
type: 'scatter',
values: [],
text: 'Good labels',
marker: {
backgroundColor: '#4caf50'
},
zIndex: 20,
},
{
type: 'scatter',
values: [],
text: 'Bad labels',
marker: {
backgroundColor: '#f44336'
},
zIndex: 20,
}];
this.config = {
type: 'mixed',
preview: {
height: '30px',
position: '0% 100%',
'auto-fit': true
},
plotarea: {
'margin-top': '10px',
'margin-bottom': '50%'
},
scaleX: { scaleX: {
zooming: true, zooming: true,
minValue: 0,
maxValue: this.state.rawData[0].values.length,
zoomTo: [0, this.state.windowSize], zoomTo: [0, this.state.windowSize],
'auto-fit': true, 'auto-fit': true,
markers: this.markers visible: false,
guide: {
visible: false
}
}, },
'scale-y': { height: '30px',
'auto-fit': true scaleY: {
maxValue: 1,
minValue: -1,
visible: false,
guide: {
visible: false
}
},
preview: {
x: 50,
y: 10,
height: '30px',
}, },
series: this.series series: [
{
type: 'scatter',
values: [],
text: 'Good labels',
marker: {
backgroundColor: '#4caf50'
},
zIndex: 3,
},
{
type: 'scatter',
values: [],
text: 'Bad labels',
marker: {
backgroundColor: '#f44336'
},
zIndex: 2,
},
{
type: 'scatter',
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: {
zooming: true,
zoomTo: [0, this.state.windowSize],
markers: []
},
'scale-y': {
zooming: false,
'auto-fit': true
},
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" />