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

added loading bar and fast track selection


Former-commit-id: ced94cba
parent 7a653c9e
......@@ -23,6 +23,7 @@ import { TrainingWindowComponent } from './training-window/training-window.compo
import {MatCheckboxModule} from '@angular/material/checkbox';
import { StateManagementComponent } from './state-management/state-management.component';
import {AngularSplitModule} from 'angular-split';
import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
PlotlyModule.plotlyjs = PlotlyJS;
......@@ -51,6 +52,7 @@ PlotlyModule.plotlyjs = PlotlyJS;
ZingchartAngularModule,
MatSliderModule,
AngularSplitModule,
MatProgressSpinnerModule
],
providers: [],
bootstrap: [AppComponent]
......
......@@ -7,14 +7,17 @@
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5);
z-index: 2;
background-color: rgba(0,0,0,0.7);
z-index: 8;
cursor: pointer;
}
.loading-progress {
display: flex;
flex-direction: column;
justify-content: center;
background-color: white;
z-index: 3;
z-index: 9;
width: 400px;
height: 200px;
position: absolute;
......@@ -22,6 +25,7 @@
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0,0,0,0);
margin: auto;
}
......@@ -91,3 +95,11 @@ mat-tab-group {
app-overview-window {
height: 100%;
}
.center {
margin-left: auto;
margin-right: auto;
color: white;
font-weight: bold;
margin-bottom: 10px;
}
......@@ -42,12 +42,9 @@
</as-split-area>
</as-split>
</div>
<div class="overlay" [class.show]="greyOut" *ngIf="loadingProgress != 100"></div>
<div class="loading-progress" *ngIf="loadingProgress != 100">
<span *ngIf="loadingProgress == 0">Retrieving data</span>
<span *ngIf="loadingProgress == 30">Creating windows</span>
<span *ngIf="loadingProgress == 60">Creating initial tables</span>
<mat-progress-bar mode="determinate" [value]="loadingProgress">
</mat-progress-bar>
<div class="overlay" [class.show]="greyOut" *ngIf="greyOut"></div>
<div class="loading-progress" *ngIf="greyOut">
<mat-spinner class="center" [diameter]="40"></mat-spinner>
<div class="center">{{loadingText}}</div>
</div>
......@@ -12,10 +12,10 @@ export class MainComponent {
}
public get greyOut() {
return this.state.querySelectionMode;
return this.state.loadingText !== '';
}
public get loadingProgress(): number {
return this.state.loadingProgress;
public get loadingText(): string {
return this.state.loadingText.toUpperCase();
}
}
......@@ -182,3 +182,8 @@ path {
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.content {
display: flex;
flex-direction: column;
}
......@@ -4,12 +4,15 @@
<div class="channel_header">
Channels
</div>
<div class="list">
<div class="list-element" *ngFor="let index of allChannels">
<label class="container">{{ names[index] }}
<input type="checkbox" [checked]="isInSelection(index)" (click)="changeSelection(index)">
<span class="checkmark" [ngStyle]="isInSelection(index) && {'background-color': getColor(index)} || {}"></span>
</label>
<div class="content">
<button (click)="setSelection()">Set</button>
<div class="list">
<div class="list-element" *ngFor="let index of allChannels">
<label class="container">{{ names[index] }}
<input type="checkbox" [checked]="isInSelection(index)" (click)="changeSelection(index)">
<span class="checkmark" [ngStyle]="isInSelection(index) && {'background-color': getColor(index)} || {}"></span>
</label>
</div>
</div>
</div>
</as-split-area>
......
......@@ -23,11 +23,13 @@ export class OverviewWindowComponent implements OnInit {
public allChannels: number[];
private _minx;
private _maxx;
public currentSelection;
public data;
public layout;
constructor(private state: StateService, private el: ElementRef) {
this.currentSelection = this.state.selection;
}
async ngOnInit(): Promise<void> {
......@@ -35,7 +37,10 @@ export class OverviewWindowComponent implements OnInit {
// this.state.onNewData.subscribe(() => this.dostuff3());
this.state.onNewData.subscribe(() => this.initializePlot());
this.state.onNewLshData.subscribe(() => this.updatePlot());
this.state.onNewSelection.subscribe(() => this.updateChannels());
this.state.onNewSelection.subscribe(() => {
this.currentSelection = this.state.selection;
this.updateChannels();
});
this.state.onNewSlider.subscribe(() => this.updateCandidates());
}
......@@ -473,7 +478,7 @@ export class OverviewWindowComponent implements OnInit {
}
isInSelection(i): boolean {
return this.state.selection.includes(i);
return this.currentSelection.includes(i);
}
getColor(i): string {
......@@ -482,14 +487,16 @@ export class OverviewWindowComponent implements OnInit {
changeSelection(i: number): void {
if (this.isInSelection(i)) {
this.state.selection = this.state.selection.filter((v) => v !== i);
this.currentSelection = this.currentSelection.filter((v) => v !== i);
} else {
const selection = this.state.selection;
selection.push(i);
this.state.selection = selection;
this.currentSelection.push(i);
}
}
setSelection(): void {
this.state.selection = this.currentSelection;
}
get height(): number {
return Math.max(75 * this.state.selection.length + 50, this.initialHeight);
}
......
......@@ -27,6 +27,7 @@ export class StateService {
public nrOfTables = 5;
public hashSize = 5;
public stepSize = 200;
public loadingText = '';
/**
* These are all GUI variables
......@@ -97,7 +98,9 @@ export class StateService {
async lshInitial(): Promise<void> {
this._weights = Array(this._queryWindow.length).fill(1);
const t0 = new Date().getTime();
this.loadingText = 'Creating LSH model';
this.lshData = await this.api.lshInitial(this._queryWindow);
this.loadingText = '';
this.computedTime = new Date().getTime() - t0;
this._lshParameters = this.lshData.parameters;
}
......@@ -106,9 +109,12 @@ export class StateService {
* This function performs every other iteration of LSH
*/
async update(labels, hashFunctions): Promise<void> {
this.loadingText = 'Calculating new model parameters';
this._weights = await this.api.getWeights(this._queryWindow, labels, this._weights, hashFunctions);
const t0 = new Date().getTime();
this.loadingText = 'Creating LSH model';
this.lshData = await this.api.lshUpdate(this._queryWindow, this._weights, this._lshParameters);
this.loadingText = '';
this.computedTime = new Date().getTime() - t0;
}
......
......@@ -20,56 +20,16 @@
</component>
<component name="ChangeListManager">
<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/app.module.ts" beforeDir="false" afterPath="$PROJECT_DIR$/../AngularApp/prototype/src/app/app.module.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/../AngularApp/prototype/src/app/main/main.component.html" beforeDir="false" afterPath="$PROJECT_DIR$/../AngularApp/prototype/src/app/main/main.component.html" 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/state-management/state-management.component.css" beforeDir="false" afterPath="$PROJECT_DIR$/../AngularApp/prototype/src/app/state-management/state-management.component.css" afterDir="false" />
<change beforePath="$PROJECT_DIR$/../AngularApp/prototype/src/app/state-management/state-management.component.html" beforeDir="false" afterPath="$PROJECT_DIR$/../AngularApp/prototype/src/app/state-management/state-management.component.html" afterDir="false" />
<change beforePath="$PROJECT_DIR$/../AngularApp/prototype/src/app/state-management/state-management.component.ts" beforeDir="false" afterPath="$PROJECT_DIR$/../AngularApp/prototype/src/app/state-management/state-management.component.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/../AngularApp/prototype/src/app/main/main.component.ts" beforeDir="false" afterPath="$PROJECT_DIR$/../AngularApp/prototype/src/app/main/main.component.ts" afterDir="false" />
<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/state.service.ts" beforeDir="false" afterPath="$PROJECT_DIR$/../AngularApp/prototype/src/app/state.service.ts" 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$/preprocessing.py" beforeDir="false" afterPath="$PROJECT_DIR$/preprocessing.py" afterDir="false" />
<change beforePath="$PROJECT_DIR$/pseudo.py" beforeDir="false" afterPath="$PROJECT_DIR$/pseudo.py" afterDir="false" />
<change beforePath="$PROJECT_DIR$/../experiments/.ipynb_checkpoints/Compare Recall and Precision on EEG data, M=50.000, T=128, d=20-checkpoint.ipynb" beforeDir="false" afterPath="$PROJECT_DIR$/../experiments/.ipynb_checkpoints/Compare Recall and Precision on EEG data, M=50.000, T=128, d=20-checkpoint.ipynb" afterDir="false" />
<change beforePath="$PROJECT_DIR$/../experiments/.ipynb_checkpoints/Compare Recall and Precision on EEG data, M=50.000, T=128, d=35-checkpoint.ipynb" beforeDir="false" afterPath="$PROJECT_DIR$/../experiments/.ipynb_checkpoints/Compare Recall and Precision on EEG data, M=50.000, T=128, d=35-checkpoint.ipynb" afterDir="false" />
<change beforePath="$PROJECT_DIR$/../experiments/.ipynb_checkpoints/Compare Recall and Precision on EEG data, M=50.000, T=128, d=70-checkpoint.ipynb" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/../experiments/.ipynb_checkpoints/Compare Recall and Precision on EEG data, M=50.000, T=256, d=35-Copy1-checkpoint.ipynb" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/../experiments/.ipynb_checkpoints/Compare Recall and Precision on EEG data, M=50.000, T=256, d=35-checkpoint.ipynb" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/../experiments/.ipynb_checkpoints/Compare Recall and Precision on Gas Sensor data, T=200, d=16-checkpoint.ipynb" beforeDir="false" afterPath="$PROJECT_DIR$/../experiments/.ipynb_checkpoints/Compare Recall and Precision on Gas Sensor data, T=200, d=16-checkpoint.ipynb" afterDir="false" />
<change beforePath="$PROJECT_DIR$/../experiments/.ipynb_checkpoints/Compare Recall and Precision on Gas Sensor data, T=50, d=16-checkpoint.ipynb" beforeDir="false" afterPath="$PROJECT_DIR$/../experiments/.ipynb_checkpoints/Compare Recall and Precision on Gas Sensor data, T=50, d=16-checkpoint.ipynb" afterDir="false" />
<change beforePath="$PROJECT_DIR$/../experiments/Compare Recall and Precision on EEG data, M=100.000, T=128, d=35.ipynb" beforeDir="false" afterPath="$PROJECT_DIR$/../experiments/Compare Recall and Precision on EEG data, M=100.000, T=128, d=35.ipynb" afterDir="false" />
<change beforePath="$PROJECT_DIR$/../experiments/Compare Recall and Precision on EEG data, M=25.000, T=128, d=35.ipynb" beforeDir="false" afterPath="$PROJECT_DIR$/../experiments/Compare Recall and Precision on EEG data, M=25.000, T=128, d=35.ipynb" afterDir="false" />
<change beforePath="$PROJECT_DIR$/../experiments/Compare Recall and Precision on EEG data, M=50.000, T=128, d=20.ipynb" beforeDir="false" afterPath="$PROJECT_DIR$/../experiments/Compare Recall and Precision on EEG data, M=50.000, T=128, d=20.ipynb" afterDir="false" />
<change beforePath="$PROJECT_DIR$/../experiments/Compare Recall and Precision on EEG data, M=50.000, T=128, d=35.ipynb" beforeDir="false" afterPath="$PROJECT_DIR$/../experiments/Compare Recall and Precision on EEG data, M=50.000, T=128, d=35.ipynb" afterDir="false" />
<change beforePath="$PROJECT_DIR$/../experiments/Compare Recall and Precision on EEG data, M=50.000, T=128, d=70.ipynb" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/../experiments/Compare Recall and Precision on EEG data, M=50.000, T=256, d=35-Copy1.ipynb" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/../experiments/Compare Recall and Precision on EEG data, M=50.000, T=256, d=35.ipynb" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/../experiments/Compare Recall and Precision on EEG data, M=75.000, T=128, d=35.ipynb" beforeDir="false" afterPath="$PROJECT_DIR$/../experiments/Compare Recall and Precision on EEG data, M=75.000, T=128, d=35.ipynb" afterDir="false" />
<change beforePath="$PROJECT_DIR$/../experiments/Compare Recall and Precision on Gas Sensor data, T=100, d=16.ipynb" beforeDir="false" afterPath="$PROJECT_DIR$/../experiments/Compare Recall and Precision on Gas Sensor data, T=100, d=16.ipynb" afterDir="false" />
<change beforePath="$PROJECT_DIR$/../experiments/Compare Recall and Precision on Gas Sensor data, T=150, d=16.ipynb" beforeDir="false" afterPath="$PROJECT_DIR$/../experiments/Compare Recall and Precision on Gas Sensor data, T=150, d=16.ipynb" afterDir="false" />
<change beforePath="$PROJECT_DIR$/../experiments/Compare Recall and Precision on Gas Sensor data, T=200, d=16.ipynb" beforeDir="false" afterPath="$PROJECT_DIR$/../experiments/Compare Recall and Precision on Gas Sensor data, T=200, d=16.ipynb" afterDir="false" />
<change beforePath="$PROJECT_DIR$/../experiments/Compare Recall and Precision on Gas Sensor data, T=50, d=16.ipynb" beforeDir="false" afterPath="$PROJECT_DIR$/../experiments/Compare Recall and Precision on Gas Sensor data, T=50, d=16.ipynb" afterDir="false" />
<change beforePath="$PROJECT_DIR$/../experiments/data/12kb-similarity-search.h5" beforeDir="false" afterPath="$PROJECT_DIR$/../experiments/data/12kb-similarity-search.h5" afterDir="false" />
<change beforePath="$PROJECT_DIR$/../experiments/data/cae_12kb.h5" beforeDir="false" afterPath="$PROJECT_DIR$/../experiments/data/cae_12kb.h5" afterDir="false" />
<change beforePath="$PROJECT_DIR$/../experiments/images/accuracy_eeg_100000_128_35.png" beforeDir="false" afterPath="$PROJECT_DIR$/../experiments/images/accuracy_eeg_100000_128_35.png" afterDir="false" />
<change beforePath="$PROJECT_DIR$/../experiments/images/accuracy_eeg_25000_128_35.png" beforeDir="false" afterPath="$PROJECT_DIR$/../experiments/images/accuracy_eeg_25000_128_35.png" afterDir="false" />
<change beforePath="$PROJECT_DIR$/../experiments/images/accuracy_eeg_50000_128_20.png" beforeDir="false" afterPath="$PROJECT_DIR$/../experiments/images/accuracy_eeg_50000_128_20.png" afterDir="false" />
<change beforePath="$PROJECT_DIR$/../experiments/images/accuracy_eeg_50000_128_35.png" beforeDir="false" afterPath="$PROJECT_DIR$/../experiments/images/accuracy_eeg_50000_128_35.png" afterDir="false" />
<change beforePath="$PROJECT_DIR$/../experiments/images/accuracy_eeg_50000_256_20.png" beforeDir="false" afterPath="$PROJECT_DIR$/../experiments/images/accuracy_eeg_50000_256_20.png" afterDir="false" />
<change beforePath="$PROJECT_DIR$/../experiments/images/accuracy_eeg_75000_128_35.png" beforeDir="false" afterPath="$PROJECT_DIR$/../experiments/images/accuracy_eeg_75000_128_35.png" afterDir="false" />
<change beforePath="$PROJECT_DIR$/../experiments/images/accuracy_gas_200000_100_16.png" beforeDir="false" afterPath="$PROJECT_DIR$/../experiments/images/accuracy_gas_200000_100_16.png" afterDir="false" />
<change beforePath="$PROJECT_DIR$/../experiments/images/accuracy_gas_200000_50_16.png" beforeDir="false" afterPath="$PROJECT_DIR$/../experiments/images/accuracy_gas_200000_50_16.png" afterDir="false" />
<change beforePath="$PROJECT_DIR$/../experiments/images/time_eeg_100000_128_35.png" beforeDir="false" afterPath="$PROJECT_DIR$/../experiments/images/time_eeg_100000_128_35.png" afterDir="false" />
<change beforePath="$PROJECT_DIR$/../experiments/images/time_eeg_25000_128_35.png" beforeDir="false" afterPath="$PROJECT_DIR$/../experiments/images/time_eeg_25000_128_35.png" afterDir="false" />
<change beforePath="$PROJECT_DIR$/../experiments/images/time_eeg_50000_128_20.png" beforeDir="false" afterPath="$PROJECT_DIR$/../experiments/images/time_eeg_50000_128_20.png" afterDir="false" />
<change beforePath="$PROJECT_DIR$/../experiments/images/time_eeg_50000_128_35.png" beforeDir="false" afterPath="$PROJECT_DIR$/../experiments/images/time_eeg_50000_128_35.png" afterDir="false" />
<change beforePath="$PROJECT_DIR$/../experiments/images/time_eeg_50000_256_20.png" beforeDir="false" afterPath="$PROJECT_DIR$/../experiments/images/time_eeg_50000_256_20.png" afterDir="false" />
<change beforePath="$PROJECT_DIR$/../experiments/images/time_eeg_75000_128_35.png" beforeDir="false" afterPath="$PROJECT_DIR$/../experiments/images/time_eeg_75000_128_35.png" afterDir="false" />
<change beforePath="$PROJECT_DIR$/../experiments/images/time_gas_200000_100_16.png" beforeDir="false" afterPath="$PROJECT_DIR$/../experiments/images/time_gas_200000_100_16.png" afterDir="false" />
<change beforePath="$PROJECT_DIR$/../experiments/images/time_gas_200000_50_16.png" beforeDir="false" afterPath="$PROJECT_DIR$/../experiments/images/time_gas_200000_50_16.png" afterDir="false" />
<change beforePath="$PROJECT_DIR$/../experiments/old2/.ipynb_checkpoints/Compare similarity search strategies UTS on PEAX data-checkpoint.ipynb" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/../experiments/old2/Compare similarity search strategies UTS on PEAX data.ipynb" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/../experiments/Results &amp; Graphs.ipynb" beforeDir="false" afterPath="$PROJECT_DIR$/../experiments/Results &amp; Graphs.ipynb" afterDir="false" />
</list>
<option name="SHOW_DIALOG" value="false" />
<option name="HIGHLIGHT_CONFLICTS" value="true" />
......
......@@ -79,7 +79,7 @@ def preprocess(data, r=None):
subset = []
t0 = time()
if r is None:
r = data.shape[2]
r = 19.375 # r = data.shape[2]
started = False
first = 0
last = r * 2
......
This diff is collapsed.
Markdown is supported
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