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 {
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
async createWindows(parameters): Promise<any> {
const postData = {parameters};
......@@ -41,20 +35,6 @@ export class ApiService {
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
async createTables(parameters): Promise<any> {
console.log("creating tables");
......@@ -70,21 +50,6 @@ export class ApiService {
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) {
const response = await fetch('http://127.0.0.1:5000/query', {
method: 'POST',
......
......@@ -5,8 +5,8 @@ import {ApiService, RawData} from './api.service';
providedIn: 'root'
})
export class CacheService {
public rawValues: number[][];
public rawIndices: string[][];
public rawValues: number[];
public rawIndices: string[];
public loadingProgress: number = 0;
private _currentTab: number;
......@@ -56,20 +56,19 @@ export class CacheService {
}
async getRawData(): Promise<void> {
const channels = await this.api.readMtsFile();
console.log(channels);
this.rawIndices = channels.map((channel) => channel.index);
this.rawValues = channels.map((channel) => channel.values);
const rawData: RawData = await this.api.readFile();
this.rawIndices = rawData.index;
this.rawValues = rawData.values;
this.onNewData.emit();
}
async createWindows(): Promise<void> {
await this.api.createMtsWindows(this.parameters);
await this.api.createWindows(this.parameters);
this.onNewWindows.emit();
}
async createTables(): Promise<void> {
this.tables = await this.api.createMtsTables(this.parameters);
this.tables = await this.api.createTables(this.parameters);
}
async getSimilarWindows(): Promise<any> {
......
......@@ -2,7 +2,6 @@
margin-right: 20px;
display: flex;
justify-content: center;
border-right: groove;
}
.subplot-container {
......
......@@ -78,66 +78,45 @@ export class LabelingWindowComponent implements OnInit {
}
}
this.topk = topk;
this.subplots = [];
for (const windowIndex of this.topk) {
const window = this.service.rawValues.map((channel) => channel.slice(windowIndex.index, windowIndex.index + this.service.windowSize));
const data = [];
window.forEach((channel, index) => {
data.push({
x: [...Array(channel.length).keys()],
y: channel,
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: {
grid: {
rows: this.service.queryWindow.length,
columns: 1,
subplots: subplots,
},
showlegend: false,
title: `Index: ${windowIndex.index.toString()} Similarity: ${windowIndex.frequency.toString()}%`,
hovermode: 'closest',
autosize: true,
margin: {
l: 30,
r: 30,
t: 30,
b: 0,
pad: 4
},
height: 300,
width: 150,
titlefont: {
size: 9
},
xaxis: {
showgrid: false,
zeroline: false,
showticklabels: false,
},
yaxis: {
zeroline: false,
showticklabels: false,
for (const window of this.topk) {
this.subplots.push(
{
index: window.index,
data: [{
x: this.service.rawIndices.slice(window.index, window.index + this.service.windowSize),
y: this.service.rawValues.slice(window.index, window.index + this.service.windowSize),
type: 'line'
}],
layout: {
title: `Index: ${window.index.toString()} Similarity: ${window.frequency.toString()}%`,
hovermode: 'closest',
autosize: true,
margin: {
l: 30,
r: 30,
t: 30,
b: 0,
pad: 4
},
height: 150,
width: 150,
titlefont: {
size: 9
},
xaxis: {
showgrid: false,
zeroline: false,
showticklabels: false,
},
yaxis: {
zeroline: 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 {
{
index,
data: [{
x: [...Array(this.service.windowSize).keys()],
y: this.service.rawValues[0].slice(index, index + this.service.windowSize),
x: this.service.rawIndices.slice(index, index + this.service.windowSize),
y: this.service.rawValues.slice(index, index + this.service.windowSize),
type: 'line'
}],
layout: {
......
<zingchart-angular #chart [id]="id" [config]="config" (mousewheel)="zoom($event)" (click)="clicked($event)" [height]="300"></zingchart-angular>
<div id="test"></div>
<zingchart-angular [id]="id" [config]="config" (dblclick)="doubleClick($event)" (mousewheel)="zoom($event)" (click)="clicked($event)" [height]="150"></zingchart-angular>
import {Component, OnInit, ViewChild} from '@angular/core';
import {Component, OnInit} from '@angular/core';
import { CacheService } from '../cache.service';
import zingchart from 'zingchart/es6';
......@@ -9,13 +9,11 @@ import zingchart from 'zingchart/es6';
})
export class OverviewWindowComponent implements OnInit {
public config;
public graphset = [];
public id = "overview";
public markers = [];
public series = [];
public goodLabels = [];
public badLabels = [];
@ViewChild('chart') chart;
public data;
public layout;
......@@ -34,122 +32,62 @@ export class OverviewWindowComponent implements OnInit {
}
async initializePlot() {
// Initialize label chart
this.graphset.push({
id: 'preview',
type: "scatter",
x: 0,
y: 0,
this.service.queryWindow = undefined;
this.data = [];
for (let i = 0; i < this.service.rawValues.length; i++) {
this.data.push([i, this.service.rawValues[i]]);
}
this.series = [
{
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: {
zooming: true,
minValue: 0,
maxValue: this.service.rawValues[0].length,
zoomTo: [0, this.service.windowSize],
'auto-fit': true,
visible: false,
guide: {
visible: false
}
markers: this.markers
},
height: '30px',
scaleY: {
maxValue: 1,
minValue: -1,
visible: false,
guide: {
visible: false
}
},
preview: {
x: 50,
y: 10,
height: '30px',
'scale-y': {
'auto-fit': true
},
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.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: {
zooming: true,
zoomTo: [0, this.service.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
series: this.series
};
console.log(this.config);
console.log("showing plot");
}
......@@ -158,13 +96,12 @@ export class OverviewWindowComponent implements OnInit {
return;
}
this.service.querySelectionMode = false;
const xyInformation = JSON.parse(this.chart.getxyinfo({
const xyInformation = zingchart.exec("zingchart-ng-1", 'getxyinfo', {
x: clickData.x,
y: clickData.y
}));
console.log(xyInformation);
const index = Math.floor(xyInformation[8].nodeidx / this.service.stepSize);
await this.service.getQueryWindow(this.service.rawValues.map((channel) => channel.slice(index, index + this.service.windowSize)));
});
const index = Math.floor(xyInformation[2].nodeidx / this.service.stepSize);
await this.service.getQueryWindow(this.service.rawValues.slice(index, index + this.service.windowSize));
const temp = {};
temp[index] = true;
this.service.labels = temp;
......@@ -181,36 +118,32 @@ export class OverviewWindowComponent implements OnInit {
this.markers = [];
for (const index in this.service.labels) {
if (this.service.labels[index]) {
this.goodLabels.push([Number(index), 0]);
this.goodLabels.push(this.data[index]);
this.markers.push({
type: 'area',
// 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",
});
} else {
this.badLabels.push([Number(index), -1]);
this.badLabels.push(this.data[index]);
this.markers.push({
type: 'area',
// 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",
});
}
}
for (const channel of this.config.graphset) {
if (channel.type === 'line') {
channel.scaleX.markers = this.markers;
} else {
channel.series[0].values = this.goodLabels;
channel.series[1].values = this.badLabels;
channel.series[2].values = [];
}
}
this.chart.setdata({
this.series[1].values = this.goodLabels;
this.series[2].values = this.badLabels;
this.config.scaleX.markers = this.markers;
zingchart.exec("zingchart-ng-1", 'setdata', {
data: this.config
});
console.log('querying');
await this.service.getSimilarWindows();
console.log('done');
}
async updateCandidates(sliderIndex) {
......@@ -222,22 +155,27 @@ export class OverviewWindowComponent implements OnInit {
const labels = [];
const markers = [];
for (const index of candidates) {
labels.push([Number(index), 1]);
labels.push(this.data[index]);
markers.push({
type: 'area',
// 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",
});
}
for (const channel of this.config.graphset) {
if (channel.type === 'line') {
channel.scaleX.markers = channel.scaleX.markers.concat(markers);
} else {
channel.series[2].values = labels;
}
}
this.chart.setdata({
const newSeries = this.config.series.slice(0, 3);
newSeries.push({
type: 'scatter',
values: labels,
text: 'Similar windows',
marker: {
backgroundColor: '#b1a343'
},
zIndex: 20,
});
this.config.series = newSeries;
this.config.scaleX.markers = this.markers.concat(markers);
zingchart.exec("zingchart-ng-1", 'setdata', {
data: this.config
});
}
......@@ -247,16 +185,13 @@ export class OverviewWindowComponent implements OnInit {
return;
}
if (p.ev.wheelDelta > 0) {
for (let i = 0; i < this.graphset.length; i ++) {
this.chart.zoomin({
graphid: i
});
}
zingchart.exec("zingchart-ng-1", 'zoomin');
} else if (p.ev.wheelDelta < 0) {
for (let i = 0; i < this.graphset.length; i ++) {
this.chart.zoomout({
graphid: i
});
} }
zingchart.exec("zingchart-ng-1", 'zoomout');
}
}
doubleClick(e) {
zingchart.exec("zingchart-ng-1", 'viewall');
}
}
......@@ -21,29 +21,14 @@ export class QueryWindowComponent implements OnInit {
}
initializePlot(): void {
const data = [];
this.service.queryWindow.forEach((channel, index) => {
data.push({
x: [...Array(channel.length).keys()],
y: channel,
type: 'line',
xaxis: 'x',
yaxis: `y${index + 2}`,
});
});
const subplots = [];
this.service.queryWindow.forEach((channel, index) => {
subplots.push([`xy${index + 2}`]);
});
const plot =
this.plot =
{
data: data,
data: [{
x: [...Array(this.service.queryWindow.length).keys()],
y: this.service.queryWindow,
type: 'line'
}],
layout: {
grid: {
rows: this.service.queryWindow.length,