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

Simple table visualisation

parent eb98d613
Hide whitespace changes
Inline Side-by-side
AngularApp/prototype/angular.json
View file @ 75131a3a
......@@ -24,6 +24,7 @@
"src/assets"
],
"styles": [
"./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
"src/styles.css"
],
"scripts": []
......@@ -88,6 +89,7 @@
"src/assets"
],
"styles": [
"./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
"src/styles.css"
],
"scripts": []
......@@ -119,6 +121,7 @@
}
}
}
}},
}
},
"defaultProject": "prototype"
}
}
\ No newline at end of file
AngularApp/prototype/package-lock.json
View file @ 75131a3a
......@@ -215,6 +215,22 @@
"resolved": "https://registry.npmjs.org/@angular/animations/-/animations-9.1.12.tgz",
"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": {
"version": "9.1.11",
"resolved": "https://registry.npmjs.org/@angular/cli/-/cli-9.1.11.tgz",
......@@ -459,6 +475,11 @@
"resolved": "https://registry.npmjs.org/@angular/forms/-/forms-9.1.12.tgz",
"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": {
"version": "9.1.12",
"resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-9.1.12.tgz",
......
AngularApp/prototype/package.json
View file @ 75131a3a
......@@ -12,10 +12,12 @@
"private": true,
"dependencies": {
"@angular/animations": "~9.1.12",
"@angular/cdk": "^9.2.4",
"@angular/common": "~9.1.12",
"@angular/compiler": "~9.1.12",
"@angular/core": "~9.1.12",
"@angular/forms": "~9.1.12",
"@angular/material": "^9.2.4",
"@angular/platform-browser": "~9.1.12",
"@angular/platform-browser-dynamic": "~9.1.12",
"@angular/router": "~9.1.12",
......
AngularApp/prototype/src/app/api.service.ts
View file @ 75131a3a
......@@ -48,7 +48,6 @@ export class ApiService {
// Return similar windows based on an input query
async getSimilarWindows(window, tables) {
console.log(tables);
const response = await fetch('http://127.0.0.1:5000/query', {
method: 'POST',
headers: {
......
AngularApp/prototype/src/app/app.component.html
View file @ 75131a3a
<div style="display: flex">
<app-settings></app-settings>
<app-overview-window></app-overview-window>
<div style="width: 70%">
<app-settings></app-settings>
<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>
<app-labeling-window></app-labeling-window>
AngularApp/prototype/src/app/app.component.ts
View file @ 75131a3a
......@@ -5,5 +5,4 @@ import { Component } from '@angular/core';
templateUrl: './app.component.html',
})
export class AppComponent {
title = 'prototype';
}
AngularApp/prototype/src/app/app.module.ts
View file @ 75131a3a
......@@ -9,6 +9,9 @@ import * as PlotlyJS from 'plotly.js/dist/plotly.js';
import { PlotlyModule } from 'angular-plotly.js';
import {FormsModule} from '@angular/forms';
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;
......@@ -18,11 +21,14 @@ PlotlyModule.plotlyjs = PlotlyJS;
SettingsComponent,
OverviewWindowComponent,
LabelingWindowComponent,
TableOverviewComponent,
],
imports: [
BrowserModule,
FormsModule,
PlotlyModule
PlotlyModule,
BrowserAnimationsModule,
MatTabsModule
],
providers: [],
bootstrap: [AppComponent]
......
AngularApp/prototype/src/app/labeling-window/labeling-window.component.css
View file @ 75131a3a
.subplot {
margin-right: 20px;
width: 150px;
}
button {
color: white;
padding: 0 20px;
}
.label-button {
padding: 10px 20px;
margin-top: 20px;
}
.button-holder {
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 }
AngularApp/prototype/src/app/labeling-window/labeling-window.component.html
View file @ 75131a3a
<div *ngIf="windowSimilarity" style="display: flex;">
<div *ngIf="windowSimilarity" style="display: flex">
<div class="subplot" *ngFor="let subplot of subplots">
<plotly-plot [data]="subplot.data" [layout]="subplot.layout"></plotly-plot>
<div class="button-holder">
<button class="correct-button" [class.correct-selected]="labels[subplot.index]" (click)="labelCorrect(subplot.index)">Correct</button>
<button class="neutral-button" [class.neutral-selected]="labels[subplot.index] == undefined" (click)="labelUndefined(subplot.index)">Neutral</button>
<button class="incorrect-button" [class.incorrect-selected]="labels[subplot.index] == false" (click)="labelIncorrect(subplot.index)">Incorrect</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)">-</button>
<button class="incorrect-button" [class.incorrect-selected]="labels[subplot.index] == false" (click)="labelIncorrect(subplot.index)">X</button>
</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>
AngularApp/prototype/src/app/labeling-window/labeling-window.component.ts
View file @ 75131a3a
......@@ -19,7 +19,6 @@ export class LabelingWindowComponent implements OnInit {
}
public changeTables() {
console.log(this.labels);
this.service.updateTables(this.labels);
}
......@@ -63,6 +62,10 @@ export class LabelingWindowComponent implements OnInit {
this.subplots = [];
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(
{
index: window.index,
......@@ -82,7 +85,7 @@ export class LabelingWindowComponent implements OnInit {
pad: 4
},
height: 200,
width: 200,
width: 150,
titlefont: {
size: 9
},
......@@ -90,5 +93,7 @@ export class LabelingWindowComponent implements OnInit {
}
);
}
console.log(this.topk);
console.log(this.subplots);
}
}
AngularApp/prototype/src/app/overview-window/overview-window.component.ts
View file @ 75131a3a
......@@ -54,7 +54,8 @@ export class OverviewWindowComponent implements OnInit {
t: 0,
pad: 4
},
height: 200
height: 200,
width: screen.width * 0.7
};
this.showPlot = true;
}
......
AngularApp/prototype/src/app/settings/settings.component.css
View file @ 75131a3a
......@@ -2,6 +2,10 @@ input {
width: 30px;
}
.settings-container {
.small-margin {
margin-right: 10px;
}
.settings-container {
display: flex;
}
AngularApp/prototype/src/app/settings/settings.component.html
View file @ 75131a3a
<div class="settings-container">
<button (click)="reset()">Full Reset</button>
<button (click)="newTables()">Generate new tables</button>
<button class="small-margin" (click)="reset()">Full Reset</button>
<button class="small-margin" (click)="newTables()">Generate random tables</button>
<div>
<label for="windowsize">Window Size:</label><br>
<input [(ngModel)]="windowSize" id="windowsize">
</div>
<label class="small-margin" for="windowsize">Window Size:</label><br>
<input class="small-margin" [(ngModel)]="windowSize" id="windowsize">
<div>
<label for="hashsize">Hash Size:</label><br>
<input [(ngModel)]="hashSize" id="hashsize">
</div>
<label class="small-margin" for="hashsize">Hash Size:</label><br>
<input class="small-margin" [(ngModel)]="hashSize" id="hashsize">
<div>
<label for="nroftables">Number of tables:</label><br>
<input [(ngModel)]="nrOfTables" id="nroftables">
</div>
<label class="small-margin" for="nroftables">Number of tables:</label><br>
<input class="small-margin" [(ngModel)]="nrOfTables" id="nroftables">
</div>
AngularApp/prototype/src/app/settings/settings.component.ts
View file @ 75131a3a
......@@ -20,15 +20,15 @@ export class SettingsComponent implements OnInit {
}
public reset() {
this.service.windowSize = this._windowSize;
this.service.hashSize = this._hashSize;
this.service.nrOfTables = this._nrOfTables;
this.service.windowSize = Number(this._windowSize);
this.service.hashSize = Number(this._hashSize);
this.service.nrOfTables = Number(this._nrOfTables);
this.service.reset();
}
public newTables() {
this.service.hashSize = this._hashSize;
this.service.nrOfTables = this._nrOfTables;
this.service.hashSize = Number(this._hashSize);
this.service.nrOfTables = Number(this._nrOfTables);
this.service.createTables();
}
......
AngularApp/prototype/src/app/table-overview/table-overview.component.css 0 → 100644
View file @ 75131a3a
.window {
width: 450px;
display: flex;
flex-wrap: wrap;
}
.subplot:hover {
cursor: pointer !important;
background-color: #4CAF50;
}
AngularApp/prototype/src/app/table-overview/table-overview.component.html 0 → 100644
View file @ 75131a3a
<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>
AngularApp/prototype/src/app/table-overview/table-overview.component.ts 0 → 100644
View file @ 75131a3a
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,
}
}
);
}
}
}
AngularApp/prototype/src/index.html
View file @ 75131a3a
......@@ -6,6 +6,8 @@
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
<body>
<app-root></app-root>
......
AngularApp/prototype/src/styles.css
View file @ 75131a3a
/* 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; }
Flaskserver/.idea/workspace.xml
View file @ 75131a3a
......@@ -2,9 +2,9 @@
<project version="4">
<component name="ChangeListManager">
<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$/../Webserver/index.html" beforeDir="false" afterPath="$PROJECT_DIR$/../Webserver/index.html" 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.component.html" beforeDir="false" afterPath="$PROJECT_DIR$/../AngularApp/prototype/src/app/app.component.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$/../AngularApp/prototype/src/app/app.module.ts" beforeDir="false" afterPath="$PROJECT_DIR$/../AngularApp/prototype/src/app/app.module.ts" afterDir="false" />
</list>
<option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" />
<option name="SHOW_DIALOG" value="false" />
......@@ -17,8 +17,8 @@
<file pinned="false" current-in-tab="true">
<entry file="file://$PROJECT_DIR$/main.py">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="-1300">
<caret line="53" column="25" lean-forward="true" selection-start-line="53" selection-start-column="25" selection-end-line="53" selection-end-column="25" />
<state relative-caret-position="1080">
<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>
<element signature="e#0#41#0" expanded="true" />
</folding>
......@@ -65,6 +65,7 @@
</panes>
</component>
<component name="PropertiesComponent">
<property name="SHARE_PROJECT_CONFIGURATION_FILES" value="true" />
<property name="WebServerToolWindowFactoryState" value="false" />
<property name="last_opened_file_path" value="$PROJECT_DIR$" />
<property name="nodejs_interpreter_path.stuck_in_default_project" value="undefined stuck path" />
......@@ -114,12 +115,12 @@
<workItem from="1594223646564" duration="1330000" />
<workItem from="1594494759659" duration="1411000" />
<workItem from="1594589515579" duration="1044000" />
<workItem from="1594719112139" duration="9023000" />
<workItem from="1594719112139" duration="10388000" />
</task>
<servers />
</component>
<component name="TimeTrackingManager">
<option name="totallyTimeSpent" value="15384000" />
<option name="totallyTimeSpent" value="16749000" />
</component>
<component name="ToolWindowManager">
<frame x="-7" y="-7" width="1295" height="695" extended-state="7" />
......@@ -154,8 +155,8 @@
<component name="editorHistoryManager">
<entry file="file://$PROJECT_DIR$/main.py">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="-1300">
<caret line="53" column="25" lean-forward="true" selection-start-line="53" selection-start-column="25" selection-end-line="53" selection-end-column="25" />
<state relative-caret-position="1080">
<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>
<element signature="e#0#41#0" expanded="true" />
</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