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

More styling


Former-commit-id: ba4985b6
parent 0744aab0
...@@ -114,14 +114,15 @@ export class ApiService { ...@@ -114,14 +114,15 @@ export class ApiService {
/** /**
* Get query window based on windows labeled correct * Get query window based on windows labeled correct
*/ */
async getQueryWindow(indices: number | {[index: number]: boolean}): Promise<number[][]> { async getQueryWindow(indices: number | {[index: number]: boolean}, query_size: number, start_index:number): Promise<number[][]> {
console.log('sending query')
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: {
'Accept': 'application/json', 'Accept': 'application/json',
'Content-Type': 'application/json' 'Content-Type': 'application/json'
}, },
body: JSON.stringify({indices}) body: JSON.stringify({indices, query_size, start_index})
}); });
return await response.json(); return await response.json();
} }
......
...@@ -54,3 +54,21 @@ ...@@ -54,3 +54,21 @@
justify-content: space-between; justify-content: space-between;
height: 100%; height: 100%;
} }
mat-tab-group {
height: 100%;
}
::ng-deep .mat-tab-body-wrapper {
height: 100%;
}
.channel_header {
height: 20px;
background-color: lightblue;
border-bottom: 1px solid lightgray;
color: black;
font-weight: 400;
text-align: center;
vertical-align: middle;
}
...@@ -4,6 +4,9 @@ ...@@ -4,6 +4,9 @@
<app-overview-window style="z-index: 10"></app-overview-window> <app-overview-window style="z-index: 10"></app-overview-window>
</div> </div>
<div class="bot"> <div class="bot">
<div class="channel_header">
Feedback
</div>
<mat-tab-group animationDuration="0ms" (selectedTabChange)="changeTab($event)"> <mat-tab-group animationDuration="0ms" (selectedTabChange)="changeTab($event)">
<mat-tab label="Training"> <mat-tab label="Training">
<app-training-window></app-training-window> <app-training-window></app-training-window>
...@@ -19,9 +22,15 @@ ...@@ -19,9 +22,15 @@
</div> </div>
<div class="right"> <div class="right">
<div class="top"> <div class="top">
<div class="channel_header">
Query
</div>
<app-query-window></app-query-window> <app-query-window></app-query-window>
</div> </div>
<div class="bot"> <div class="bot">
<div class="channel_header">
Progress
</div>
<app-progress-view></app-progress-view> <app-progress-view></app-progress-view>
</div> </div>
</div> </div>
......
...@@ -10,10 +10,9 @@ ...@@ -10,10 +10,9 @@
width: 15%; width: 15%;
} }
ul { .list {
padding-top: 10px; padding-top: 10px;
margin: 0; margin-left: 5px;
list-style-type: none;
} }
.right { .right {
...@@ -45,6 +44,14 @@ html, body { ...@@ -45,6 +44,14 @@ html, body {
overflow: scroll; overflow: scroll;
} }
.small-margin {
margin: auto;
}
button {
float: right;
}
table { table {
margin-right: 0; margin-right: 0;
margin-left: auto; margin-left: auto;
...@@ -90,3 +97,13 @@ path { ...@@ -90,3 +97,13 @@ path {
.toolbar { .toolbar {
display: flex; display: flex;
} }
.channel_header {
height: 20px;
background-color: lightblue;
border-bottom: 1px solid lightgray;
color: black;
font-weight: 400;
text-align: center;
vertical-align: middle;
}
<div class="container"> <div class="container">
<div class="left"> <div class="left">
<div class="channel_header">
Channels
</div>
<span class="example-list-section"> <span class="example-list-section">
<ul> <div class="list">
<li *ngFor="let index of allChannels"> <div class="list-element" *ngFor="let index of allChannels">
<mat-checkbox [checked]="isInSelection(index)" <mat-checkbox [checked]="isInSelection(index)"
(change)="changeSelection(index)"> (change)="changeSelection(index)">
Channel {{index}} Channel {{index}}
</mat-checkbox> </mat-checkbox>
</li> </div>
</ul> </div>
</span> </span>
</div> </div>
<div class="right"> <div class="right">
<div class="channel_header">
Overview
</div>
<div class="toolbar"> <div class="toolbar">
<button (click)="setquery()">
Set as query
</button>
<label class="small-margin" for="windowsize">Start</label><br> <label class="small-margin" for="windowsize">Start</label><br>
<input class="small-margin" id="windowsize" [(ngModel)]="minx"> <input class="small-margin" id="windowsize" [(ngModel)]="minx">
<label class="small-margin" for="hashsize">End</label><br> <label class="small-margin" for="hashsize">End</label><br>
<input class="small-margin" [(ngModel)]="maxx" id="hashsize"> <input class="small-margin" [(ngModel)]="maxx" id="hashsize">
<button (click)="setquery()">
Set as query
</button>
</div> </div>
<zingchart-angular #chart [id]="id" (mousewheel)="zoom($event)" (zoom)="ping()" (click)="clicked($event)" [height]="height" (complete)="ping()"></zingchart-angular> <zingchart-angular #chart [id]="id" (mousewheel)="zoom($event)" (zoom)="ping()" [height]="height" (complete)="ping()"></zingchart-angular>
</div> </div>
</div> </div>
...@@ -120,8 +120,8 @@ export class OverviewWindowComponent implements OnInit { ...@@ -120,8 +120,8 @@ export class OverviewWindowComponent implements OnInit {
scaleX: { scaleX: {
zooming: true, zooming: true,
minValue: 0, minValue: 0,
maxValue: this.state.rawData[0].values.length, maxValue: this.state.rawData[0].index[this.state.rawData[0].index.length - 1], // //this.state.rawData[0].values.length,
zoomTo: [0, this.state.windowSize], zoomTo: [0, 200],
'auto-fit': true, 'auto-fit': true,
visible: false, visible: false,
guide: { guide: {
...@@ -181,7 +181,7 @@ export class OverviewWindowComponent implements OnInit { ...@@ -181,7 +181,7 @@ export class OverviewWindowComponent implements OnInit {
const channel = this.state.rawData[channelIndex]; const channel = this.state.rawData[channelIndex];
const data = []; const data = [];
for (let i = 0; i < channel.values.length; i++) { for (let i = 0; i < channel.values.length; i++) {
data.push([i, channel.values[i]]); data.push([channel.index[i].toString(), channel.values[i]]);
} }
this.graphset.push({ this.graphset.push({
id: index, id: index,
...@@ -266,7 +266,7 @@ export class OverviewWindowComponent implements OnInit { ...@@ -266,7 +266,7 @@ export class OverviewWindowComponent implements OnInit {
const channel = this.state.rawData[channelIndex]; const channel = this.state.rawData[channelIndex];
const data = []; const data = [];
for (let i = 0; i < channel.values.length; i++) { for (let i = 0; i < channel.values.length; i++) {
data.push([i, channel.values[i]]); data.push([channel.index[i].toString(), channel.values[i]]);
} }
this.graphset.push({ this.graphset.push({
id: channelIndex, id: channelIndex,
...@@ -326,7 +326,7 @@ export class OverviewWindowComponent implements OnInit { ...@@ -326,7 +326,7 @@ export class OverviewWindowComponent implements OnInit {
this.markers.push({ this.markers.push({
type: 'area', type: 'area',
// BUG: For some reason the range values are multiplied by 10 // BUG: For some reason the range values are multiplied by 10
range: [Number(index) / 10, (Number(index) + this.state.windowSize) / 10], range: [Number(index) / 100, (Number(index) + this.state.windowSize) / 100],
backgroundColor: "#4caf50", backgroundColor: "#4caf50",
}); });
} else { } else {
...@@ -334,7 +334,7 @@ export class OverviewWindowComponent implements OnInit { ...@@ -334,7 +334,7 @@ export class OverviewWindowComponent implements OnInit {
this.markers.push({ this.markers.push({
type: 'area', type: 'area',
// BUG: For some reason the range values are multiplied by 10 // BUG: For some reason the range values are multiplied by 10
range: [Number(index) / 10, (Number(index) + this.state.windowSize) / 10], range: [Number(index) / 100, (Number(index) + this.state.windowSize) / 100],
backgroundColor: "#f44336", backgroundColor: "#f44336",
}); });
} }
...@@ -344,7 +344,7 @@ export class OverviewWindowComponent implements OnInit { ...@@ -344,7 +344,7 @@ export class OverviewWindowComponent implements OnInit {
this.markers.push({ this.markers.push({
type: 'area', type: 'area',
// BUG: For some reason the range values are multiplied by 10 // BUG: For some reason the range values are multiplied by 10
range: [Number(index) / 10, (Number(index) + this.state.windowSize) / 10], range: [Number(index) / 100, (Number(index) + this.state.windowSize) / 100],
backgroundColor: '#b1a343', backgroundColor: '#b1a343',
}); });
} }
...@@ -401,34 +401,34 @@ export class OverviewWindowComponent implements OnInit { ...@@ -401,34 +401,34 @@ export class OverviewWindowComponent implements OnInit {
// }); // });
} }
async clicked(clickData) { // async clicked(clickData) {
console.log(clickData); // console.log(clickData);
if (!this.state.querySelectionMode) { // if (!this.state.querySelectionMode) {
return; // return;
} // }
this.state.querySelectionMode = false; // this.state.querySelectionMode = false;
await this.debugClicked(); // await this.debugClicked();
return; // return;
const xyInformation = zingchart.exec('zingchart-ng-1', 'getxyinfo', { // const xyInformation = zingchart.exec('zingchart-ng-1', 'getxyinfo', {
x: clickData.x, // x: clickData.x,
y: clickData.y // y: clickData.y
}); // });
const index = Math.floor(xyInformation[0].scalenumvalue / (12000 / 6)); // const index = Math.floor(xyInformation[0].scalenumvalue / (12000 / 6));
await this.state.getQueryWindow(index); // await this.state.getQueryWindow(index);
await this.state.lshInitial(); // await this.state.lshInitial();
const temp = {}; // const temp = {};
temp[index] = true; // temp[index] = true;
this.state.labels = temp; // this.state.labels = temp;
} // }
//
async debugClicked() { // async debugClicked() {
const index = 6713; // const index = 6713;
await this.state.getQueryWindow(index); // await this.state.getQueryWindow(index);
await this.state.lshInitial(); // await this.state.lshInitial();
const temp = {}; // const temp = {};
temp[index] = true; // temp[index] = true;
this.state.labels = temp; // this.state.labels = temp;
} // }
zoom(p) { zoom(p) {
if (!p.ev) { if (!p.ev) {
...@@ -459,25 +459,18 @@ export class OverviewWindowComponent implements OnInit { ...@@ -459,25 +459,18 @@ export class OverviewWindowComponent implements OnInit {
return Math.max(75 * this.state.selection.length + 50, this.initialHeight); return Math.max(75 * this.state.selection.length + 50, this.initialHeight);
} }
setquery() { async setquery() {
console.log(zingchart.exec('zingchart-ng-1-graph-0', 'getscales')); this.state.windowSize = this.maxx - this.minx;
console.log(zingchart.exec('zingchart-ng-1-graph-1', 'getscales')); await this.state.getQueryWindow(null, this.maxx - this.minx, this.minx);
console.log(zingchart.exec('zingchart-ng-1', 'getscaleinfo', { graphid: 0, name: 'scale-x' })); await this.state.lshInitial();
console.log(zingchart.exec('zingchart-ng-1', 'getscaleinfo', { graphid: 1, name: 'scale-x' }));
console.log(zingchart.exec('zingchart-ng-1', 'getscaleinfo', { graphid: '1', name: 'scale-x' }));
console.log(zingchart.exec('zingchart-ng-1', 'getscaleinfo', { graphid: 'preview', name: 'scale-x' }));
console.log(zingchart.exec('zingchart-ng-1', 'getscaleinfo', { name: 'scale-x' }));
console.log(zingchart.exec('zingchart-ng-1', 'getscaleinfo'));
console.log(this.minx);
console.log(this.maxx);
} }
get maxx(): number { get maxx(): number {
return this._maxx * 10; return this._maxx * 100;
} }
set maxx(max: number) { set maxx(max: number) {
this._maxx = max / 10; this._maxx = max / 100;
this.chart.zoomto({ this.chart.zoomto({
graphid: `zingchart-ng-1-graph-preview`, graphid: `zingchart-ng-1-graph-preview`,
xmin: this._minx, xmin: this._minx,
...@@ -495,11 +488,11 @@ export class OverviewWindowComponent implements OnInit { ...@@ -495,11 +488,11 @@ export class OverviewWindowComponent implements OnInit {
} }
get minx(): number { get minx(): number {
return this._minx * 10; return this._minx * 100;
} }
set minx(min: number) { set minx(min: number) {
this._minx = min / 10; this._minx = min / 100;
this.chart.zoomto({ this.chart.zoomto({
graphid: `zingchart-ng-1-graph-preview`, graphid: `zingchart-ng-1-graph-preview`,
xmin: this._minx, xmin: this._minx,
......
...@@ -6,7 +6,6 @@ ...@@ -6,7 +6,6 @@
} }
.query-contents { .query-contents {
margin: auto;
} }
html, body { html, body {
......
<div class="query-container"> <div class="query-container">
<div *ngIf="!isQuerySet"> <div *ngIf="!isQuerySet">
Select a point in the data to start the similarity search. Select a query from the data to start the similarity search.
</div> </div>
<div *ngIf="isQuerySet" class="query-contents"> <div *ngIf="isQuerySet" class="query-contents">
<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>
</div> </div>
</div> </div>
...@@ -144,8 +144,4 @@ export class QueryWindowComponent implements OnInit { ...@@ -144,8 +144,4 @@ export class QueryWindowComponent implements OnInit {
get isQuerySet(): boolean { get isQuerySet(): boolean {
return !!this.state.queryWindow; return !!this.state.queryWindow;
} }
public newQuery() {
this.state.querySelectionMode = true;
}
} }
...@@ -46,7 +46,7 @@ export class StateService { ...@@ -46,7 +46,7 @@ export class StateService {
public onNewSelection: EventEmitter<number[]> = new EventEmitter<number[]>(); public onNewSelection: EventEmitter<number[]> = new EventEmitter<number[]>();
constructor(private api: ApiService) { constructor(private api: ApiService) {
this._selection = [0]; this._selection = [];
this.initialize(); this.initialize();
} }
...@@ -56,8 +56,8 @@ export class StateService { ...@@ -56,8 +56,8 @@ export class StateService {
async initialize(): Promise<void> { async initialize(): Promise<void> {
this.loadingProgress = 0; this.loadingProgress = 0;
await this.getRawData(); await this.getRawData();
this.loadingProgress = 50; // this.loadingProgress = 50;
await this.createWindows(); // await this.createWindows();
this.loadingProgress = 100; this.loadingProgress = 100;
} }
...@@ -75,6 +75,7 @@ export class StateService { ...@@ -75,6 +75,7 @@ export class StateService {
*/ */
async getRawData(): Promise<void> { async getRawData(): Promise<void> {
this.rawData = await this.api.readFile(); this.rawData = await this.api.readFile();
console.log(this.rawData)
} }
/** /**
...@@ -112,8 +113,8 @@ export class StateService { ...@@ -112,8 +113,8 @@ export class StateService {
/** /**
* This function retrieves the query * This function retrieves the query
*/ */
async getQueryWindow(windowIndex: number | {[index: number]: boolean}): Promise<number[][]> { async getQueryWindow(windowIndex: number | {[index: number]: boolean}, querySize, startIndex): Promise<number[][]> {
this.queryWindow = await this.api.getQueryWindow(windowIndex); this.queryWindow = await this.api.getQueryWindow(windowIndex, querySize, startIndex);
console.log(this.queryWindow); console.log(this.queryWindow);
return this._queryWindow; return this._queryWindow;
} }
......
.container {
height: 100%;
}
.top { .top {
height: 50%; height: 50%;
overflow-y: scroll; overflow-y: scroll;
......
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<app-table-overview (labelsOutput)="hashFunctionLabels = $event"></app-table-overview> <app-table-overview (labelsOutput)="hashFunctionLabels = $event"></app-table-overview>
</div> </div>
<div class="bot"> <div class="bot">
<app-labeling-window (labelsOutput)="labels = $event"></app-labeling-window> <app-labeling-window (labelsOutput)="labels = $event"></app-labeling-window>
</div> </div>
</div> </div>
......
...@@ -17,7 +17,7 @@ export class TrainingWindowComponent implements OnInit { ...@@ -17,7 +17,7 @@ export class TrainingWindowComponent implements OnInit {
async train() { async train() {
this.state.labels = Object.assign({}, this.state.labels, this.labels); this.state.labels = Object.assign({}, this.state.labels, this.labels);
await this.state.getQueryWindow(this.state.labels); await this.state.getQueryWindow(this.state.labels, null, null);
console.log(this.hashFunctionLabels); console.log(this.hashFunctionLabels);
const hashFunctions: number[][] = []; const hashFunctions: number[][] = [];
this.hashFunctionLabels.forEach((label, index) => { this.hashFunctionLabels.forEach((label, index) => {
......
...@@ -20,40 +20,14 @@ ...@@ -20,40 +20,14 @@
</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/overview-window/overview-window.component.css" beforeDir="false" afterPath="$PROJECT_DIR$/../AngularApp/prototype/src/app/overview-window/overview-window.component.css" 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/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$/.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$/pseudo.py" beforeDir="false" afterPath="$PROJECT_DIR$/pseudo.py" afterDir="false" /> <change beforePath="$PROJECT_DIR$/data/processed-data.npy" beforeDir="false" afterPath="$PROJECT_DIR$/data/processed-data.npy" afterDir="false" />
<change beforePath="$PROJECT_DIR$/../experiments/.ipynb_checkpoints/Compare Recall and Precision on EEG data, M=100.000 T=128, d=35-checkpoint.ipynb" beforeDir="false" /> <change beforePath="$PROJECT_DIR$/main.py" beforeDir="false" afterPath="$PROJECT_DIR$/main.py" afterDir="false" />