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

Added query by example feature

parent b164296c
...@@ -99,8 +99,8 @@ export class ApiService { ...@@ -99,8 +99,8 @@ export class ApiService {
return await response.json(); return await response.json();
} }
async updateTables(labelData, tables, parameters): Promise<any> { async updateTables(query, labelData, tables, parameters): Promise<any> {
const postData = {labelData, tables, parameters}; const postData = {query, labelData, tables, parameters};
const response = await fetch('http://127.0.0.1:5000/update', { const response = await fetch('http://127.0.0.1:5000/update', {
method: 'POST', method: 'POST',
headers: { headers: {
......
...@@ -15,7 +15,7 @@ export class CacheService { ...@@ -15,7 +15,7 @@ export class CacheService {
private _tables; private _tables;
private _windowSimilarity; private _windowSimilarity;
private _sliderValue; private _sliderValue;
private _queryWindow = []; private _queryWindow;
public windowSize = 500; public windowSize = 500;
public nrOfTables = 10; public nrOfTables = 10;
...@@ -86,18 +86,17 @@ export class CacheService { ...@@ -86,18 +86,17 @@ export class CacheService {
} }
async getQueryWindow(queryIndex): Promise<number[]> { async getQueryWindow(queryIndex): Promise<number[]> {
this._queryWindow = await this.api.getQueryWindow(this.rawValues.slice(queryIndex, queryIndex + this.windowSize)); this.queryWindow = await this.api.getQueryWindow(this.rawValues.slice(queryIndex, queryIndex + this.windowSize));
console.log(this._queryWindow); console.log(this._queryWindow);
return this._queryWindow; return this._queryWindow;
} }
async updateTables(): Promise<void> { async updateTables(): Promise<void> {
this.tables = await this.api.updateTables(this.labels, this.tables, this.parameters); this.tables = await this.api.updateTables(this.queryWindow, this.labels, this.tables, this.parameters);
} }
public set query(v) { public set query(v) {
this._query = v; this._query = v;
this.onNewQuery.emit();
} }
public get query(): number { public get query(): number {
...@@ -158,6 +157,10 @@ export class CacheService { ...@@ -158,6 +157,10 @@ export class CacheService {
this.onNewQuery.emit(); this.onNewQuery.emit();
} }
public get queryWindow() {
return this._queryWindow;
}
public get parameters(): {[parameter: string]: any} { public get parameters(): {[parameter: string]: any} {
return { return {
windowsize: this.windowSize, windowsize: this.windowSize,
......
...@@ -24,7 +24,7 @@ export class OverviewWindowComponent implements OnInit { ...@@ -24,7 +24,7 @@ export class OverviewWindowComponent implements OnInit {
async ngOnInit(): Promise<void> { async ngOnInit(): Promise<void> {
this.service.onNewData.subscribe(() => this.initializePlot()); this.service.onNewData.subscribe(() => this.initializePlot());
this.service.onNewTables.subscribe(() => { this.service.onNewTables.subscribe(() => {
if (this.service.query) { if (this.service.queryWindow) {
this.updatePlot(); this.updatePlot();
} }
}); });
...@@ -32,7 +32,7 @@ export class OverviewWindowComponent implements OnInit { ...@@ -32,7 +32,7 @@ export class OverviewWindowComponent implements OnInit {
} }
async initializePlot() { async initializePlot() {
this.service.query = undefined; this.service.queryWindow = undefined;
this.data = []; this.data = [];
for (let i = 0; i < this.service.rawValues.length; i++) { for (let i = 0; i < this.service.rawValues.length; i++) {
this.data.push([i, this.service.rawValues[i]]); this.data.push([i, this.service.rawValues[i]]);
...@@ -99,7 +99,7 @@ export class OverviewWindowComponent implements OnInit { ...@@ -99,7 +99,7 @@ export class OverviewWindowComponent implements OnInit {
y: clickData.y y: clickData.y
}); });
const index = Math.floor(xyInformation[2].nodeidx / this.service.stepSize); const index = Math.floor(xyInformation[2].nodeidx / this.service.stepSize);
this.service.query = index; await this.service.getQueryWindow(index);
const temp = {}; const temp = {};
temp[index] = true; temp[index] = true;
this.service.labels = temp; this.service.labels = temp;
...@@ -108,7 +108,7 @@ export class OverviewWindowComponent implements OnInit { ...@@ -108,7 +108,7 @@ export class OverviewWindowComponent implements OnInit {
async updatePlot() { async updatePlot() {
console.log('updating plot'); console.log('updating plot');
if (!this.service.query) { if (!this.service.queryWindow) {
return; return;
} }
this.goodLabels = []; this.goodLabels = [];
...@@ -141,7 +141,6 @@ export class OverviewWindowComponent implements OnInit { ...@@ -141,7 +141,6 @@ export class OverviewWindowComponent implements OnInit {
data: this.config data: this.config
}); });
console.log('querying'); console.log('querying');
await this.service.getQueryWindow(this.service.query);
await this.service.getSimilarWindows(); await this.service.getSimilarWindows();
console.log('done'); console.log('done');
} }
......
<div *ngIf="plot" class="window"> <div *ngIf="data" class="window">
<div class="plots"> <div class="plots">
<plotly-plot [data]="plot.data" [layout]="plot.layout" (sliderEnd)="setSliderValue($event)"></plotly-plot> <plotly-plot [data]="data" [layout]="layout" (sliderEnd)="setSliderValue($event)"></plotly-plot>
</div> </div>
</div> </div>
...@@ -8,6 +8,8 @@ import {CacheService} from '../cache.service'; ...@@ -8,6 +8,8 @@ import {CacheService} from '../cache.service';
}) })
export class ProgressViewComponent implements OnInit { export class ProgressViewComponent implements OnInit {
public plot; public plot;
public data;
public layout;
constructor(private cache: CacheService) { } constructor(private cache: CacheService) { }
...@@ -16,12 +18,16 @@ export class ProgressViewComponent implements OnInit { ...@@ -16,12 +18,16 @@ export class ProgressViewComponent implements OnInit {
} }
averagePlot(averages) { averagePlot(averages) {
let highest = 100;
const data = averages.map((average, i) => { const data = averages.map((average, i) => {
if (average.length !== 0 && i < highest) {
highest = i;
}
return { return {
x: [...Array(average.length).keys()], x: [...Array(average.length).keys()],
y: average, y: average,
type: 'line', type: 'line',
visible: i === 0 visible: i === highest
}; };
}); });
const visibility = Array(averages.length).fill(false); const visibility = Array(averages.length).fill(false);
...@@ -35,45 +41,45 @@ export class ProgressViewComponent implements OnInit { ...@@ -35,45 +41,45 @@ export class ProgressViewComponent implements OnInit {
args: ['visible', v] args: ['visible', v]
}); });
} }
visibility[averages.length - 1] = true; console.log(averages.length - 1 - highest);
return { visibility[averages.length - 1 - highest] = true;
data, this.data = data;
layout: { this.layout = {
showlegend: false, showlegend: false,
hovermode: 'closest', hovermode: 'closest',
autosize: true, autosize: true,
margin: { margin: {
l: 50, l: 50,
r: 30, r: 30,
t: 30, t: 30,
pad: 4 pad: 4
},
xaxis: {
showticklabels: false
},
yaxis: {
showticklabels: false
},
height: 300,
width: 200,
sliders: [{
active: averages.length - 1,
pad: {t: 30},
currentvalue: {
xanchor: 'right',
prefix: 'Similarity: ',
font: {
color: '#888',
size: 10
}
},
steps
}]
}, },
xaxis: {
showticklabels: false
},
yaxis: {
showticklabels: false
},
height: 300,
width: 200,
sliders: [{
active: averages.length - 1 - highest,
pad: {t: 30},
currentvalue: {
xanchor: 'right',
prefix: 'Similarity: ',
font: {
color: '#888',
size: 10
}
},
steps
}]
}; };
} }
async initializeInfo(): Promise<void> { async initializeInfo(): Promise<void> {
console.log('Updating progress view');
const allWindows = []; const allWindows = [];
const keys = Object.keys(this.similarity); const keys = Object.keys(this.similarity);
for (let i = this.cache.nrOfTables; i >= 1; i--) { for (let i = this.cache.nrOfTables; i >= 1; i--) {
...@@ -83,7 +89,9 @@ export class ProgressViewComponent implements OnInit { ...@@ -83,7 +89,9 @@ export class ProgressViewComponent implements OnInit {
allWindows.push(this.similarity[i.toString()]); allWindows.push(this.similarity[i.toString()]);
} }
} }
console.log(allWindows);
const averages = await this.cache.getAverageProgressWindows(allWindows); const averages = await this.cache.getAverageProgressWindows(allWindows);
console.log(averages);
this.plot = this.averagePlot(averages); this.plot = this.averagePlot(averages);
} }
......
<div class="query-container"> <div class="query-container">
<div *ngIf="!query"> <div *ngIf="!isQuerySet">
Select a point in the data to start the similarity search. Select a point in the data to start the similarity search.
</div> </div>
<div *ngIf="query" class="query-contents"> <div *ngIf="isQuerySet" class="query-contents">
<span style="display: flex; justify-content: center"><b>Current query</b></span> <span style="display: flex; justify-content: center"><b>Current query</b></span>
<plotly-plot [data]="plot.data" [layout]="plot.layout"></plotly-plot> <plotly-plot [data]="plot.data" [layout]="plot.layout"></plotly-plot>
<button style="display: flex; justify-content: center; margin: 5px" (click)="newQuery()">Select new query</button> <button style="display: flex; justify-content: center; margin: 5px" (click)="newQuery()">Select new query</button>
......
...@@ -14,7 +14,7 @@ export class QueryWindowComponent implements OnInit { ...@@ -14,7 +14,7 @@ export class QueryWindowComponent implements OnInit {
ngOnInit(): void { ngOnInit(): void {
this.service.onNewQuery.subscribe(() => { this.service.onNewQuery.subscribe(() => {
if (this.service.query) { if (this.service.queryWindow) {
this.initializePlot(); this.initializePlot();
} }
}); });
...@@ -23,14 +23,12 @@ export class QueryWindowComponent implements OnInit { ...@@ -23,14 +23,12 @@ export class QueryWindowComponent implements OnInit {
initializePlot(): void { initializePlot(): void {
this.plot = this.plot =
{ {
index: this.service.query,
data: [{ data: [{
x: this.service.rawIndices.slice(this.service.query, this.service.query + this.service.windowSize), x: [...Array(this.service.queryWindow.length).keys()],
y: this.service.rawValues.slice(this.service.query, this.service.query + this.service.windowSize), y: this.service.queryWindow,
type: 'line' type: 'line'
}], }],
layout: { layout: {
title: `Index: ${this.service.query.toString()}`,
hovermode: 'closest', hovermode: 'closest',
autosize: true, autosize: true,
margin: { margin: {
...@@ -47,13 +45,16 @@ export class QueryWindowComponent implements OnInit { ...@@ -47,13 +45,16 @@ export class QueryWindowComponent implements OnInit {
}, },
xaxis: { xaxis: {
showticklabels: false, showticklabels: false,
},
yaxis: {
showticklabels: false,
} }
} }
}; };
} }
get query(): number { get isQuerySet(): boolean {
return this.service.query; return !!this.service.queryWindow;
} }
public newQuery() { public newQuery() {
......
...@@ -50,17 +50,25 @@ export class TableOverviewComponent implements OnInit { ...@@ -50,17 +50,25 @@ export class TableOverviewComponent implements OnInit {
}; };
} }
calculateSignature(hashFunction, window): string {
const output = new Array(hashFunction[0].length);
output.fill(0);
for (const hash of hashFunction) {
for (let i = 0; i < hash.length; i++) {
output[i] += window[i] * hash[i];
}
}
return output.map((x) => x > 0 ? '1' : '0').join('');
}
async createPlots() { async createPlots() {
this.subplots = []; this.subplots = [];
this.averages = []; this.averages = [];
const listOfWindows = []; const listOfWindows = [];
for (const tableIndex in this.tables) { for (const tableIndex in this.tables) {
const table = this.tables[tableIndex]; const table = this.tables[tableIndex];
if (this.service.query) { if (this.service.queryWindow) {
const queryEntry = Object.keys(table.entries).filter((hash: string) => { const queryEntry = this.calculateSignature(table.hash, this.service.queryWindow);
return table.entries[hash].indexOf(this.service.query) > -1;
})[0];
console.log(queryEntry);
listOfWindows.push(table.entries[queryEntry]); listOfWindows.push(table.entries[queryEntry]);
} }
this.subplots.push( this.subplots.push(
...@@ -103,14 +111,16 @@ export class TableOverviewComponent implements OnInit { ...@@ -103,14 +111,16 @@ export class TableOverviewComponent implements OnInit {
} }
); );
} }
if (this.service.query) { if (this.service.queryWindow) {
console.log(listOfWindows); console.log(listOfWindows);
const temp = await this.service.getAverageTableWindows(listOfWindows); const temp = await this.service.getAverageTableWindows(listOfWindows);
this.averages = temp.map(x => this.averagePlot(x)); this.averages = temp.map(x => this.averagePlot(x));
} }
} }
public setQuery(data) { async setQuery(data) {
this.service.queryWindow = data.y; console.log('clicked for query');
this.service.queryWindow = data[0].y;
await this.service.getSimilarWindows();
} }
} }
...@@ -2,9 +2,12 @@ ...@@ -2,9 +2,12 @@
<project version="4"> <project version="4">
<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/api.service.ts" beforeDir="false" afterPath="$PROJECT_DIR$/../AngularApp/prototype/src/app/api.service.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/../AngularApp/prototype/src/app/cache.service.ts" beforeDir="false" afterPath="$PROJECT_DIR$/../AngularApp/prototype/src/app/cache.service.ts" afterDir="false" /> <change beforePath="$PROJECT_DIR$/../AngularApp/prototype/src/app/cache.service.ts" beforeDir="false" afterPath="$PROJECT_DIR$/../AngularApp/prototype/src/app/cache.service.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/../AngularApp/prototype/src/app/overview-window/overview-window.component.html" beforeDir="false" afterPath="$PROJECT_DIR$/../AngularApp/prototype/src/app/overview-window/overview-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/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/progress-view/progress-view.component.ts" beforeDir="false" afterPath="$PROJECT_DIR$/../AngularApp/prototype/src/app/progress-view/progress-view.component.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/../AngularApp/prototype/src/app/query-window/query-window.component.html" beforeDir="false" afterPath="$PROJECT_DIR$/../AngularApp/prototype/src/app/query-window/query-window.component.html" afterDir="false" />
<change beforePath="$PROJECT_DIR$/../AngularApp/prototype/src/app/query-window/query-window.component.ts" beforeDir="false" afterPath="$PROJECT_DIR$/../AngularApp/prototype/src/app/query-window/query-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$/../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$/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" />
...@@ -20,8 +23,8 @@ ...@@ -20,8 +23,8 @@
<file pinned="false" current-in-tab="true"> <file pinned="false" current-in-tab="true">
<entry file="file://$PROJECT_DIR$/main.py"> <entry file="file://$PROJECT_DIR$/main.py">
<provider selected="true" editor-type-id="text-editor"> <provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="204"> <state relative-caret-position="245">
<caret line="138" column="27" selection-start-line="138" selection-start-column="27" selection-end-line="138" selection-end-column="27" /> <caret line="141" column="20" lean-forward="true" selection-start-line="141" selection-start-column="20" selection-end-line="141" selection-end-column="20" />
<folding> <folding>
<element signature="e#0#41#0" expanded="true" /> <element signature="e#0#41#0" expanded="true" />
</folding> </folding>
...@@ -61,8 +64,8 @@ ...@@ -61,8 +64,8 @@
</list> </list>
</option> </option>
</component> </component>
<component name="ProjectFrameBounds" extendedState="1"> <component name="ProjectFrameBounds" extendedState="7">
<option name="x" value="12" /> <option name="x" value="100" />
<option name="y" value="-36" /> <option name="y" value="-36" />
<option name="width" value="1890" /> <option name="width" value="1890" />
<option name="height" value="960" /> <option name="height" value="960" />
...@@ -144,18 +147,19 @@ ...@@ -144,18 +147,19 @@
<workItem from="1598968498970" duration="1311000" /> <workItem from="1598968498970" duration="1311000" />
<workItem from="1599302780310" duration="2605000" /> <workItem from="1599302780310" duration="2605000" />
<workItem from="1599487808817" duration="1192000" /> <workItem from="1599487808817" duration="1192000" />
<workItem from="1599578907139" duration="7726000" /> <workItem from="1599578907139" duration="8436000" />
<workItem from="1599661275060" duration="1249000" />
</task> </task>
<servers /> <servers />
</component> </component>
<component name="TimeTrackingManager"> <component name="TimeTrackingManager">
<option name="totallyTimeSpent" value="92097000" /> <option name="totallyTimeSpent" value="94056000" />
</component> </component>
<component name="ToolWindowManager"> <component name="ToolWindowManager">
<frame x="8" y="-24" width="1260" height="640" extended-state="0" /> <frame x="-7" y="-7" width="1295" height="695" extended-state="7" />
<editor active="true" /> <editor active="true" />
<layout> <layout>
<window_info content_ui="combo" id="Project" order="0" visible="true" weight="0.2936772" /> <window_info content_ui="combo" id="Project" order="0" visible="true" weight="0.29021826" />
<window_info id="Structure" order="1" side_tool="true" weight="0.25" /> <window_info id="Structure" order="1" side_tool="true" weight="0.25" />
<window_info id="Favorites" order="2" side_tool="true" /> <window_info id="Favorites" order="2" side_tool="true" />
<window_info anchor="bottom" id="Message" order="0" /> <window_info anchor="bottom" id="Message" order="0" />
...@@ -211,8 +215,8 @@ ...@@ -211,8 +215,8 @@
</entry> </entry>
<entry file="file://$PROJECT_DIR$/main.py"> <entry file="file://$PROJECT_DIR$/main.py">
<provider selected="true" editor-type-id="text-editor"> <provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="204"> <state relative-caret-position="245">
<caret line="138" column="27" selection-start-line="138" selection-start-column="27" selection-end-line="138" selection-end-column="27" /> <caret line="141" column="20" lean-forward="true" selection-start-line="141" selection-start-column="20" selection-end-line="141" selection-end-column="20" />
<folding> <folding>
<element signature="e#0#41#0" expanded="true" /> <element signature="e#0#41#0" expanded="true" />
</folding> </folding>
......
...@@ -137,6 +137,9 @@ def average_progress(): ...@@ -137,6 +137,9 @@ def average_progress():
for windows in all_windows: for windows in all_windows:
t1 = time() t1 = time()
actual_windows.extend(data[windows]) actual_windows.extend(data[windows])
if len(actual_windows) == 0:
output.append([])
continue
print(len(actual_windows)) print(len(actual_windows))
output.append((np.sum(actual_windows, 0)/len(actual_windows)).tolist()) output.append((np.sum(actual_windows, 0)/len(actual_windows)).tolist())
print("Average calculated: " + str(time() - t1)) print("Average calculated: " + str(time() - t1))
...@@ -171,6 +174,7 @@ def update(): ...@@ -171,6 +174,7 @@ def update():
data = np.load('processed-data.npy') data = np.load('processed-data.npy')
label_data = raw_data["labelData"] label_data = raw_data["labelData"]
tables = raw_data["tables"] tables = raw_data["tables"]
window = raw_data["query"]