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

Simple table visualisation

parent eb98d613
...@@ -24,6 +24,7 @@ ...@@ -24,6 +24,7 @@
"src/assets" "src/assets"
], ],
"styles": [ "styles": [
"./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
"src/styles.css" "src/styles.css"
], ],
"scripts": [] "scripts": []
...@@ -88,6 +89,7 @@ ...@@ -88,6 +89,7 @@
"src/assets" "src/assets"
], ],
"styles": [ "styles": [
"./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
"src/styles.css" "src/styles.css"
], ],
"scripts": [] "scripts": []
...@@ -119,6 +121,7 @@ ...@@ -119,6 +121,7 @@
} }
} }
} }
}}, }
},
"defaultProject": "prototype" "defaultProject": "prototype"
} }
\ No newline at end of file
...@@ -215,6 +215,22 @@ ...@@ -215,6 +215,22 @@
"resolved": "https://registry.npmjs.org/@angular/animations/-/animations-9.1.12.tgz", "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-9.1.12.tgz",
"integrity": "sha512-tphpf9QHnOPoL2Jl7KpR+R5aHNW3oifLEmRUTajJYJGvo1uzdUDE82+V9OGOinxJsYseCth9gYJhN24aYTB9NA==" "integrity": "sha512-tphpf9QHnOPoL2Jl7KpR+R5aHNW3oifLEmRUTajJYJGvo1uzdUDE82+V9OGOinxJsYseCth9gYJhN24aYTB9NA=="
}, },
"@angular/cdk": {
"version": "9.2.4",
"resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-9.2.4.tgz",
"integrity": "sha512-iw2+qHMXHYVC6K/fttHeNHIieSKiTEodVutZoOEcBu9rmRTGbLB26V/CRsfIRmA1RBk+uFYWc6UQZnMC3RdnJQ==",
"requires": {
"parse5": "^5.0.0"
},
"dependencies": {
"parse5": {
"version": "5.1.1",
"resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.1.tgz",
"integrity": "sha512-ugq4DFI0Ptb+WWjAdOK16+u/nHfiIrcE+sh8kZMaM0WllQKLI9rOUq6c2b7cwPkXdzfQESqvoqK6ug7U/Yyzug==",
"optional": true
}
}
},
"@angular/cli": { "@angular/cli": {
"version": "9.1.11", "version": "9.1.11",
"resolved": "https://registry.npmjs.org/@angular/cli/-/cli-9.1.11.tgz", "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-9.1.11.tgz",
...@@ -459,6 +475,11 @@ ...@@ -459,6 +475,11 @@
"resolved": "https://registry.npmjs.org/@angular/forms/-/forms-9.1.12.tgz", "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-9.1.12.tgz",
"integrity": "sha512-LhjnZlC4WEsEsAJfOZLte+Lks3WBAFVeRv2lzoQNFVr/IMzBNDVfjEaaSqKF1cei3cjY39Df2nYDMJM7HfqbJA==" "integrity": "sha512-LhjnZlC4WEsEsAJfOZLte+Lks3WBAFVeRv2lzoQNFVr/IMzBNDVfjEaaSqKF1cei3cjY39Df2nYDMJM7HfqbJA=="
}, },
"@angular/material": {
"version": "9.2.4",
"resolved": "https://registry.npmjs.org/@angular/material/-/material-9.2.4.tgz",
"integrity": "sha512-LkoTXE6B0slvMhvfZDdPWaz4yaYLkaAp5VSPunI9pxGsPxzqEV9e210wC1/sjG/76Nk8Ep7/2z9XKac8Q9bMwA=="
},
"@angular/platform-browser": { "@angular/platform-browser": {
"version": "9.1.12", "version": "9.1.12",
"resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-9.1.12.tgz", "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-9.1.12.tgz",
......
...@@ -12,10 +12,12 @@ ...@@ -12,10 +12,12 @@
"private": true, "private": true,
"dependencies": { "dependencies": {
"@angular/animations": "~9.1.12", "@angular/animations": "~9.1.12",
"@angular/cdk": "^9.2.4",
"@angular/common": "~9.1.12", "@angular/common": "~9.1.12",
"@angular/compiler": "~9.1.12", "@angular/compiler": "~9.1.12",
"@angular/core": "~9.1.12", "@angular/core": "~9.1.12",
"@angular/forms": "~9.1.12", "@angular/forms": "~9.1.12",
"@angular/material": "^9.2.4",
"@angular/platform-browser": "~9.1.12", "@angular/platform-browser": "~9.1.12",
"@angular/platform-browser-dynamic": "~9.1.12", "@angular/platform-browser-dynamic": "~9.1.12",
"@angular/router": "~9.1.12", "@angular/router": "~9.1.12",
......
...@@ -48,7 +48,6 @@ export class ApiService { ...@@ -48,7 +48,6 @@ export class ApiService {
// Return similar windows based on an input query // Return similar windows based on an input query
async getSimilarWindows(window, tables) { async getSimilarWindows(window, tables) {
console.log(tables);
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: {
......
<div style="display: flex"> <div style="display: flex">
<div style="width: 70%">
<app-settings></app-settings> <app-settings></app-settings>
<app-overview-window></app-overview-window> <app-overview-window></app-overview-window>
<app-labeling-window></app-labeling-window>
</div>
<div style="width: 30%">
<app-table-overview></app-table-overview>
</div>
</div> </div>
<app-labeling-window></app-labeling-window>
...@@ -5,5 +5,4 @@ import { Component } from '@angular/core'; ...@@ -5,5 +5,4 @@ import { Component } from '@angular/core';
templateUrl: './app.component.html', templateUrl: './app.component.html',
}) })
export class AppComponent { export class AppComponent {
title = 'prototype';
} }
...@@ -9,6 +9,9 @@ import * as PlotlyJS from 'plotly.js/dist/plotly.js'; ...@@ -9,6 +9,9 @@ import * as PlotlyJS from 'plotly.js/dist/plotly.js';
import { PlotlyModule } from 'angular-plotly.js'; import { PlotlyModule } from 'angular-plotly.js';
import {FormsModule} from '@angular/forms'; import {FormsModule} from '@angular/forms';
import { LabelingWindowComponent } from './labeling-window/labeling-window.component'; import { LabelingWindowComponent } from './labeling-window/labeling-window.component';
import { TableOverviewComponent } from './table-overview/table-overview.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {MatTabsModule} from '@angular/material/tabs';
PlotlyModule.plotlyjs = PlotlyJS; PlotlyModule.plotlyjs = PlotlyJS;
...@@ -18,11 +21,14 @@ PlotlyModule.plotlyjs = PlotlyJS; ...@@ -18,11 +21,14 @@ PlotlyModule.plotlyjs = PlotlyJS;
SettingsComponent, SettingsComponent,
OverviewWindowComponent, OverviewWindowComponent,
LabelingWindowComponent, LabelingWindowComponent,
TableOverviewComponent,
], ],
imports: [ imports: [
BrowserModule, BrowserModule,
FormsModule, FormsModule,
PlotlyModule PlotlyModule,
BrowserAnimationsModule,
MatTabsModule
], ],
providers: [], providers: [],
bootstrap: [AppComponent] bootstrap: [AppComponent]
......
.subplot { .subplot {
margin-right: 20px; margin-right: 20px;
width: 150px;
} }
button { button {
color: white; padding: 0 20px;
}
.label-button {
padding: 10px 20px;
margin-top: 20px;
} }
.button-holder { .button-holder {
display: flex; display: flex;
justify-content: center;
}
.correct-selected {
background-color: #4caf50
}
.neutral-selected { background-color: #ffa300
} }
.correct-selected { background-color: #4CAF50 }
.neutral-selected { background-color: #008CBA }
.incorrect-selected { background-color: #f44336 } .incorrect-selected { background-color: #f44336 }
<div *ngIf="windowSimilarity" style="display: flex;"> <div *ngIf="windowSimilarity" style="display: flex">
<div class="subplot" *ngFor="let subplot of subplots"> <div class="subplot" *ngFor="let subplot of subplots">
<plotly-plot [data]="subplot.data" [layout]="subplot.layout"></plotly-plot> <plotly-plot [data]="subplot.data" [layout]="subplot.layout"></plotly-plot>
<div class="button-holder"> <div class="button-holder">
<button class="correct-button" [class.correct-selected]="labels[subplot.index]" (click)="labelCorrect(subplot.index)">Correct</button> <button class="correct-button" [class.correct-selected]="labels[subplot.index]" (click)="labelCorrect(subplot.index)">V</button>
<button class="neutral-button" [class.neutral-selected]="labels[subplot.index] == undefined" (click)="labelUndefined(subplot.index)">Neutral</button> <button class="neutral-button" [class.neutral-selected]="labels[subplot.index] == undefined" (click)="labelUndefined(subplot.index)">-</button>
<button class="incorrect-button" [class.incorrect-selected]="labels[subplot.index] == false" (click)="labelIncorrect(subplot.index)">Incorrect</button> <button class="incorrect-button" [class.incorrect-selected]="labels[subplot.index] == false" (click)="labelIncorrect(subplot.index)">X</button>
</div> </div>
</div> </div>
</div> </div>
<button (click)="changeTables()">Label data</button> <div class="button-holder">
<button *ngIf="windowSimilarity" (click)="changeTables()" class="label-button">Update tables</button>
</div>
...@@ -19,7 +19,6 @@ export class LabelingWindowComponent implements OnInit { ...@@ -19,7 +19,6 @@ export class LabelingWindowComponent implements OnInit {
} }
public changeTables() { public changeTables() {
console.log(this.labels);
this.service.updateTables(this.labels); this.service.updateTables(this.labels);
} }
...@@ -63,6 +62,10 @@ export class LabelingWindowComponent implements OnInit { ...@@ -63,6 +62,10 @@ export class LabelingWindowComponent implements OnInit {
this.subplots = []; this.subplots = [];
for (const window of this.topk) { for (const window of this.topk) {
console.log(this.service.rawValues);
console.log(window.index);
console.log(this.service.windowSize);
console.log(this.service.rawValues.slice(window.index, window.index + this.service.windowSize));
this.subplots.push( this.subplots.push(
{ {
index: window.index, index: window.index,
...@@ -82,7 +85,7 @@ export class LabelingWindowComponent implements OnInit { ...@@ -82,7 +85,7 @@ export class LabelingWindowComponent implements OnInit {
pad: 4 pad: 4
}, },
height: 200, height: 200,
width: 200, width: 150,
titlefont: { titlefont: {
size: 9 size: 9
}, },
...@@ -90,5 +93,7 @@ export class LabelingWindowComponent implements OnInit { ...@@ -90,5 +93,7 @@ export class LabelingWindowComponent implements OnInit {
} }
); );
} }
console.log(this.topk);
console.log(this.subplots);
} }
} }
...@@ -54,7 +54,8 @@ export class OverviewWindowComponent implements OnInit { ...@@ -54,7 +54,8 @@ export class OverviewWindowComponent implements OnInit {
t: 0, t: 0,
pad: 4 pad: 4
}, },
height: 200 height: 200,
width: screen.width * 0.7
}; };
this.showPlot = true; this.showPlot = true;
} }
......
...@@ -2,6 +2,10 @@ input { ...@@ -2,6 +2,10 @@ input {
width: 30px; width: 30px;
} }
.settings-container { .small-margin {
margin-right: 10px;
}
.settings-container {
display: flex;
} }
<div class="settings-container"> <div class="settings-container">
<button (click)="reset()">Full Reset</button> <button class="small-margin" (click)="reset()">Full Reset</button>
<button (click)="newTables()">Generate new tables</button> <button class="small-margin" (click)="newTables()">Generate random tables</button>
<div> <label class="small-margin" for="windowsize">Window Size:</label><br>
<label for="windowsize">Window Size:</label><br> <input class="small-margin" [(ngModel)]="windowSize" id="windowsize">
<input [(ngModel)]="windowSize" id="windowsize">
</div>
<div> <label class="small-margin" for="hashsize">Hash Size:</label><br>
<label for="hashsize">Hash Size:</label><br> <input class="small-margin" [(ngModel)]="hashSize" id="hashsize">
<input [(ngModel)]="hashSize" id="hashsize">
</div>
<div> <label class="small-margin" for="nroftables">Number of tables:</label><br>
<label for="nroftables">Number of tables:</label><br> <input class="small-margin" [(ngModel)]="nrOfTables" id="nroftables">
<input [(ngModel)]="nrOfTables" id="nroftables">
</div>
</div> </div>
...@@ -20,15 +20,15 @@ export class SettingsComponent implements OnInit { ...@@ -20,15 +20,15 @@ export class SettingsComponent implements OnInit {
} }
public reset() { public reset() {
this.service.windowSize = this._windowSize; this.service.windowSize = Number(this._windowSize);
this.service.hashSize = this._hashSize; this.service.hashSize = Number(this._hashSize);
this.service.nrOfTables = this._nrOfTables; this.service.nrOfTables = Number(this._nrOfTables);
this.service.reset(); this.service.reset();
} }
public newTables() { public newTables() {
this.service.hashSize = this._hashSize; this.service.hashSize = Number(this._hashSize);
this.service.nrOfTables = this._nrOfTables; this.service.nrOfTables = Number(this._nrOfTables);
this.service.createTables(); this.service.createTables();
} }
......
.window {
width: 450px;
display: flex;
flex-wrap: wrap;
}
.subplot:hover {
cursor: pointer !important;
background-color: #4CAF50;
}
<div *ngIf="tables" class="window">
<div class="subplot" *ngFor="let subplot of subplots">
<plotly-plot [data]="subplot.data" [layout]="subplot.layout"></plotly-plot>
</div>
</div>
import { Component, OnInit } from '@angular/core';
import {CacheService} from '../cache.service';
@Component({
selector: 'app-table-overview',
templateUrl: './table-overview.component.html',
styleUrls: ['./table-overview.component.css']
})
export class TableOverviewComponent implements OnInit {
public subplots;
constructor(private service: CacheService) { }
ngOnInit(): void {
this.service.onNewTables.subscribe(() => this.createPlots());
}
public get tables() {
return this.service.tables;
}
createPlots() {
this.subplots = [];
for (const tableIndex in this.tables) {
const table = this.tables[tableIndex];
this.subplots.push(
{
data: [{
x: Object.keys(table.entries).map((hash: string) => {
return hash;
}
),
y: Object.values(table.entries).map((values: number[]) => values.length / this.service.windows.length),
type: 'bar'
}],
layout: {
hovermode: 'closest',
autosize: true,
margin: {
l: 10,
r: 10,
t: 10,
b: 10,
pad: 4
},
xaxis: {
showticklabels: false
},
yaxis: {
showticklabels: false
},
height: 100,
width: screen.width * 0.1,
}
}
);
}
}
}
...@@ -6,6 +6,8 @@ ...@@ -6,6 +6,8 @@
<base href="/"> <base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico"> <link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head> </head>
<body> <body>
<app-root></app-root> <app-root></app-root>
......
/* You can add global styles to this file, and also import other style files */ /* You can add global styles to this file, and also import other style files */
html, body { height: 100%; }
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
...@@ -2,9 +2,9 @@ ...@@ -2,9 +2,9 @@
<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$/main.py" beforeDir="false" afterPath="$PROJECT_DIR$/main.py" afterDir="false" /> <change beforePath="$PROJECT_DIR$/../AngularApp/prototype/src/app/app.component.html" beforeDir="false" afterPath="$PROJECT_DIR$/../AngularApp/prototype/src/app/app.component.html" afterDir="false" />
<change beforePath="$PROJECT_DIR$/../Webserver/index.html" beforeDir="false" afterPath="$PROJECT_DIR$/../Webserver/index.html" afterDir="false" /> <change beforePath="$PROJECT_DIR$/../AngularApp/prototype/src/app/app.component.ts" beforeDir="false" afterPath="$PROJECT_DIR$/../AngularApp/prototype/src/app/app.component.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/../Webserver/index.js" beforeDir="false" afterPath="$PROJECT_DIR$/../Webserver/index.js" afterDir="false" /> <change beforePath="$PROJECT_DIR$/../AngularApp/prototype/src/app/app.module.ts" beforeDir="false" afterPath="$PROJECT_DIR$/../AngularApp/prototype/src/app/app.module.ts" afterDir="false" />
</list> </list>
<option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" /> <option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" />
<option name="SHOW_DIALOG" value="false" /> <option name="SHOW_DIALOG" value="false" />
...@@ -17,8 +17,8 @@ ...@@ -17,8 +17,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="-1300"> <state relative-caret-position="1080">
<caret line="53" column="25" lean-forward="true" selection-start-line="53" selection-start-column="25" selection-end-line="53" selection-end-column="25" /> <caret line="142" column="43" lean-forward="true" selection-start-line="142" selection-start-column="43" selection-end-line="142" selection-end-column="43" />
<folding> <folding>
<element signature="e#0#41#0" expanded="true" /> <element signature="e#0#41#0" expanded="true" />
</folding> </folding>
...@@ -65,6 +65,7 @@ ...@@ -65,6 +65,7 @@
</panes> </panes>
</component> </component>
<component name="PropertiesComponent"> <component name="PropertiesComponent">
<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$" />
<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" />
...@@ -114,12 +115,12 @@ ...@@ -114,12 +115,12 @@
<workItem from="1594223646564" duration="1330000" /> <workItem from="1594223646564" duration="1330000" />
<workItem from="1594494759659" duration="1411000" /> <workItem from="1594494759659" duration="1411000" />
<workItem from="1594589515579" duration="1044000" /> <workItem from="1594589515579" duration="1044000" />
<workItem from="1594719112139" duration="9023000" /> <workItem from="1594719112139" duration="10388000" />
</task> </task>
<servers /> <servers />
</component> </component>
<component name="TimeTrackingManager"> <component name="TimeTrackingManager">
<option name="totallyTimeSpent" value="15384000" /> <option name="totallyTimeSpent" value="16749000" />
</component> </component>
<component name="ToolWindowManager"> <component name="ToolWindowManager">
<frame x="-7" y="-7" width="1295" height="695" extended-state="7" /> <frame x="-7" y="-7" width="1295" height="695" extended-state="7" />
...@@ -154,8 +155,8 @@ ...@@ -154,8 +155,8 @@
<component name="editorHistoryManager"> <component name="editorHistoryManager">
<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="-1300"> <state relative-caret-position="1080">
<caret line="53" column="25" lean-forward="true" selection-start-line="53" selection-start-column="25" selection-end-line="53" selection-end-column="25" /> <caret line="142" column="43" lean-forward="true" selection-start-line="142" selection-start-column="43" selection-end-line="142" selection-end-column="43" />
<folding> <folding>
<element signature="e#0#41#0" expanded="true" /> <element signature="e#0#41#0" expanded="true" />
</folding> </folding>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment