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 {
/**
* 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', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({indices})
body: JSON.stringify({indices, query_size, start_index})
});
return await response.json();
}
......
......@@ -54,3 +54,21 @@
justify-content: space-between;
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 @@
<app-overview-window style="z-index: 10"></app-overview-window>
</div>
<div class="bot">
<div class="channel_header">
Feedback
</div>
<mat-tab-group animationDuration="0ms" (selectedTabChange)="changeTab($event)">
<mat-tab label="Training">
<app-training-window></app-training-window>
......@@ -19,9 +22,15 @@
</div>
<div class="right">
<div class="top">
<div class="channel_header">
Query
</div>
<app-query-window></app-query-window>
</div>
<div class="bot">
<div class="channel_header">
Progress
</div>
<app-progress-view></app-progress-view>
</div>
</div>
......
......@@ -10,10 +10,9 @@
width: 15%;
}
ul {
.list {
padding-top: 10px;
margin: 0;
list-style-type: none;
margin-left: 5px;
}
.right {
......@@ -45,6 +44,14 @@ html, body {
overflow: scroll;
}
.small-margin {
margin: auto;
}
button {
float: right;
}
table {
margin-right: 0;
margin-left: auto;
......@@ -90,3 +97,13 @@ path {
.toolbar {
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="left">
<div class="channel_header">
Channels
</div>
<span class="example-list-section">
<ul>
<li *ngFor="let index of allChannels">
<div class="list">
<div class="list-element" *ngFor="let index of allChannels">
<mat-checkbox [checked]="isInSelection(index)"
(change)="changeSelection(index)">
Channel {{index}}
</mat-checkbox>
</li>
</ul>
</div>
</div>
</span>
</div>
<div class="right">
<div class="channel_header">
Overview
</div>
<div class="toolbar">
<button (click)="setquery()">
Set as query
</button>
<label class="small-margin" for="windowsize">Start</label><br>
<input class="small-margin" id="windowsize" [(ngModel)]="minx">
<label class="small-margin" for="hashsize">End</label><br>
<input class="small-margin" [(ngModel)]="maxx" id="hashsize">
<button (click)="setquery()">
Set as query
</button>
</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>
......@@ -120,8 +120,8 @@ export class OverviewWindowComponent implements OnInit {
scaleX: {
zooming: true,
minValue: 0,
maxValue: this.state.rawData[0].values.length,
zoomTo: [0, this.state.windowSize],
maxValue: this.state.rawData[0].index[this.state.rawData[0].index.length - 1], // //this.state.rawData[0].values.length,
zoomTo: [0, 200],
'auto-fit': true,
visible: false,
guide: {
......@@ -181,7 +181,7 @@ export class OverviewWindowComponent implements OnInit {
const channel = this.state.rawData[channelIndex];
const data = [];
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({
id: index,
......@@ -266,7 +266,7 @@ export class OverviewWindowComponent implements OnInit {
const channel = this.state.rawData[channelIndex];
const data = [];
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({
id: channelIndex,
......@@ -326,7 +326,7 @@ export class OverviewWindowComponent implements OnInit {
this.markers.push({
type: 'area',
// 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",
});
} else {
......@@ -334,7 +334,7 @@ export class OverviewWindowComponent implements OnInit {
this.markers.push({
type: 'area',
// 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",
});
}
......@@ -344,7 +344,7 @@ export class OverviewWindowComponent implements OnInit {
this.markers.push({
type: 'area',
// 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',
});
}
......@@ -401,34 +401,34 @@ export class OverviewWindowComponent implements OnInit {
// });
}
async clicked(clickData) {
console.log(clickData);
if (!this.state.querySelectionMode) {
return;
}
this.state.querySelectionMode = false;
await this.debugClicked();
return;
const xyInformation = zingchart.exec('zingchart-ng-1', 'getxyinfo', {
x: clickData.x,
y: clickData.y
});
const index = Math.floor(xyInformation[0].scalenumvalue / (12000 / 6));
await this.state.getQueryWindow(index);
await this.state.lshInitial();
const temp = {};
temp[index] = true;
this.state.labels = temp;
}
async debugClicked() {
const index = 6713;
await this.state.getQueryWindow(index);
await this.state.lshInitial();
const temp = {};
temp[index] = true;
this.state.labels = temp;
}
// async clicked(clickData) {
// console.log(clickData);
// if (!this.state.querySelectionMode) {
// return;
// }
// this.state.querySelectionMode = false;
// await this.debugClicked();
// return;
// const xyInformation = zingchart.exec('zingchart-ng-1', 'getxyinfo', {
// x: clickData.x,
// y: clickData.y
// });
// const index = Math.floor(xyInformation[0].scalenumvalue / (12000 / 6));
// await this.state.getQueryWindow(index);
// await this.state.lshInitial();
// const temp = {};
// temp[index] = true;
// this.state.labels = temp;
// }
//
// async debugClicked() {
// const index = 6713;
// await this.state.getQueryWindow(index);
// await this.state.lshInitial();
// const temp = {};
// temp[index] = true;
// this.state.labels = temp;
// }
zoom(p) {
if (!p.ev) {
......@@ -459,25 +459,18 @@ export class OverviewWindowComponent implements OnInit {
return Math.max(75 * this.state.selection.length + 50, this.initialHeight);
}
setquery() {
console.log(zingchart.exec('zingchart-ng-1-graph-0', 'getscales'));
console.log(zingchart.exec('zingchart-ng-1-graph-1', 'getscales'));
console.log(zingchart.exec('zingchart-ng-1', 'getscaleinfo', { graphid: 0, 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: '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);
async setquery() {
this.state.windowSize = this.maxx - this.minx;
await this.state.getQueryWindow(null, this.maxx - this.minx, this.minx);
await this.state.lshInitial();
}
get maxx(): number {
return this._maxx * 10;
return this._maxx * 100;
}
set maxx(max: number) {
this._maxx = max / 10;
this._maxx = max / 100;
this.chart.zoomto({
graphid: `zingchart-ng-1-graph-preview`,
xmin: this._minx,
......@@ -495,11 +488,11 @@ export class OverviewWindowComponent implements OnInit {
}
get minx(): number {
return this._minx * 10;
return this._minx * 100;
}
set minx(min: number) {
this._minx = min / 10;
this._minx = min / 100;
this.chart.zoomto({
graphid: `zingchart-ng-1-graph-preview`,
xmin: this._minx,
......
......@@ -6,7 +6,6 @@
}
.query-contents {
margin: auto;
}
html, body {
......
<div class="query-container">
<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 *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>
<button style="display: flex; justify-content: center; margin: 5px" (click)="newQuery()">Select new query</button>
</div>
</div>
......@@ -144,8 +144,4 @@ export class QueryWindowComponent implements OnInit {
get isQuerySet(): boolean {
return !!this.state.queryWindow;
}
public newQuery() {
this.state.querySelectionMode = true;
}
}
......@@ -46,7 +46,7 @@ export class StateService {
public onNewSelection: EventEmitter<number[]> = new EventEmitter<number[]>();
constructor(private api: ApiService) {
this._selection = [0];
this._selection = [];
this.initialize();
}
......@@ -56,8 +56,8 @@ export class StateService {
async initialize(): Promise<void> {
this.loadingProgress = 0;
await this.getRawData();
this.loadingProgress = 50;
await this.createWindows();
// this.loadingProgress = 50;
// await this.createWindows();
this.loadingProgress = 100;
}
......@@ -75,6 +75,7 @@ export class StateService {
*/
async getRawData(): Promise<void> {
this.rawData = await this.api.readFile();
console.log(this.rawData)
}
/**
......@@ -112,8 +113,8 @@ export class StateService {
/**
* This function retrieves the query
*/
async getQueryWindow(windowIndex: number | {[index: number]: boolean}): Promise<number[][]> {
this.queryWindow = await this.api.getQueryWindow(windowIndex);
async getQueryWindow(windowIndex: number | {[index: number]: boolean}, querySize, startIndex): Promise<number[][]> {
this.queryWindow = await this.api.getQueryWindow(windowIndex, querySize, startIndex);
console.log(this.queryWindow);
return this._queryWindow;
}
......
.container {
height: 100%;
}
.top {
height: 50%;
overflow-y: scroll;
......
......@@ -17,7 +17,7 @@ export class TrainingWindowComponent implements OnInit {
async train() {
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);
const hashFunctions: number[][] = [];
this.hashFunctionLabels.forEach((label, index) => {
......
......@@ -20,40 +20,14 @@
</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/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$/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=100.000 T=128, d=35-checkpoint.ipynb" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/../experiments/.ipynb_checkpoints/Compare Recall and Precision on EEG data, M=100.000, T=256, d=35-checkpoint.ipynb" beforeDir="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" afterPath="$PROJECT_DIR$/../experiments/.ipynb_checkpoints/Compare Recall and Precision on EEG data, M=50.000, T=128, d=70-checkpoint.ipynb" afterDir="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" afterPath="$PROJECT_DIR$/../experiments/.ipynb_checkpoints/Compare Recall and Precision on EEG data, M=50.000, T=256, d=35-checkpoint.ipynb" afterDir="false" />
<change beforePath="$PROJECT_DIR$/../experiments/.ipynb_checkpoints/Compare Recall and Precision on EEG data, M=50.000, T=256, d=70-checkpoint.ipynb" beforeDir="false" afterPath="$PROJECT_DIR$/../experiments/.ipynb_checkpoints/Compare Recall and Precision on EEG data, M=50.000, T=256, d=70-checkpoint.ipynb" afterDir="false" />
<change beforePath="$PROJECT_DIR$/../experiments/.ipynb_checkpoints/Compare Recall and Precision on Gas Sensor data, T=100, d=16-checkpoint.ipynb" beforeDir="false" afterPath="$PROJECT_DIR$/../experiments/.ipynb_checkpoints/Compare Recall and Precision on Gas Sensor data, T=100, d=16-checkpoint.ipynb" afterDir="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 Synthetic data-checkpoint.ipynb" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/../experiments/.ipynb_checkpoints/Compare iterations on Synthetic data-checkpoint.ipynb" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/../experiments/.ipynb_checkpoints/Compare similarity search strategies MTS on EEG data-Copy1-checkpoint.ipynb" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/../experiments/.ipynb_checkpoints/Compare similarity search strategies MTS on EEG data-checkpoint.ipynb" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/../experiments/.ipynb_checkpoints/Compare similarity search strategies MTS on Synthetic data-checkpoint.ipynb" beforeDir="false" afterPath="$PROJECT_DIR$/../experiments/.ipynb_checkpoints/Compare similarity search strategies MTS on Synthetic data-checkpoint.ipynb" afterDir="false" />
<change beforePath="$PROJECT_DIR$/../experiments/.ipynb_checkpoints/Compare similarity search strategies UTS on PEAX data-checkpoint.ipynb" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/../experiments/Compare Recall and Precision on EEG data, M=100.000 T=128, d=35.ipynb" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/../experiments/Compare Recall and Precision on EEG data, M=100.000, T=256, d=35.ipynb" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/../experiments/Compare Recall and Precision on EEG data, M=50.000, T=128, d=70.ipynb" beforeDir="false" afterPath="$PROJECT_DIR$/../experiments/Compare Recall and Precision on EEG data, M=50.000, T=128, d=70.ipynb" afterDir="false" />
<change beforePath="$PROJECT_DIR$/../experiments/Compare Recall and Precision on EEG data, M=50.000, T=256, d=35.ipynb" beforeDir="false" afterPath="$PROJECT_DIR$/../experiments/Compare Recall and Precision on EEG data, M=50.000, T=256, d=35.ipynb" afterDir="false" />
<change beforePath="$PROJECT_DIR$/../experiments/Compare Recall and Precision on EEG data, M=50.000, T=256, d=70.ipynb" beforeDir="false" afterPath="$PROJECT_DIR$/../experiments/Compare Recall and Precision on EEG data, M=50.000, T=256, d=70.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=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 Synthetic data.ipynb" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/../experiments/Compare iterations on Synthetic data.ipynb" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/../experiments/Compare similarity search strategies MTS on EEG data-Copy1.ipynb" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/../experiments/Compare similarity search strategies MTS on EEG data.ipynb" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/../experiments/Compare similarity search strategies MTS on Synthetic data.ipynb" beforeDir="false" afterPath="$PROJECT_DIR$/../experiments/Compare similarity search strategies MTS on Synthetic data.ipynb" afterDir="false" />
<change beforePath="$PROJECT_DIR$/../experiments/Compare similarity search strategies UTS on PEAX data.ipynb" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/../experiments/images/visual_similarity_1.png" beforeDir="false" afterPath="$PROJECT_DIR$/../experiments/images/visual_similarity_1.png" afterDir="false" />
<change beforePath="$PROJECT_DIR$/../experiments/images/visual_similarity_2.png" beforeDir="false" afterPath="$PROJECT_DIR$/../experiments/images/visual_similarity_2.png" afterDir="false" />
<change beforePath="$PROJECT_DIR$/../experiments/images/visual_similarity_3.png" beforeDir="false" afterPath="$PROJECT_DIR$/../experiments/images/visual_similarity_3.png" afterDir="false" />
<change beforePath="$PROJECT_DIR$/../experiments/images/visual_similarity_4.png" beforeDir="false" afterPath="$PROJECT_DIR$/../experiments/images/visual_similarity_4.png" afterDir="false" />
<change beforePath="$PROJECT_DIR$/../experiments/images/visual_similarity_5.png" beforeDir="false" afterPath="$PROJECT_DIR$/../experiments/images/visual_similarity_5.png" afterDir="false" />
<change beforePath="$PROJECT_DIR$/../experiments/images/visual_similarity_time_complexity.png" beforeDir="false" afterPath="$PROJECT_DIR$/../experiments/images/visual_similarity_time_complexity.png" 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$/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" />
</list>
<option name="SHOW_DIALOG" value="false" />
<option name="HIGHLIGHT_CONFLICTS" value="true" />
......
......@@ -30,7 +30,7 @@ Output: [{
@app.route('/read-data', methods=['GET'])
def read_data():
t0 = time()
response = preprocessing.read_mts_data()
response = preprocessing.read_eeg_data(10)
response = orjson.dumps(response)
print('Data read: ' + str(time()-t0))
return response
......@@ -178,9 +178,15 @@ Output: 2d array [d][t]
def query():
t0 = time()
raw_data = orjson.loads(request.data)
print(raw_data)
start_index = raw_data['start_index']
query_size = raw_data['query_size']
window_indices = raw_data['indices']
data = np.load(data_path)
if start_index is not None:
preprocessing.create_eeg_windows(query_size, 10)
window_indices = int(start_index / 100)
data = np.load(data_path)
response = pseudo.query(data, window_indices)
response = orjson.dumps(response)
......
......@@ -92,12 +92,28 @@ def create_peax_windows_12kb_mts(window_size):
np.save(data_path, data)
return '1'
def create_eeg_windows(window_size, nr_of_channels):
datafile = '21.csv'
data_path = 'data/processed-data.npy'
def read_eeg_data(nr_of_channels):
response = []
datafile = 'data/21.csv'
data = pd.read_csv(datafile, header=None)
npdata = np.array(data, dtype="float32")
del data
for i in range(4, 4+ nr_of_channels):
response.append(
{
'index': list(range(0, len(npdata), 100)),
'values': npdata[::100,i].tolist()
}
)
print(npdata.shape)
return response
def create_eeg_windows(window_size, nr_of_channels):
data_path = 'data/processed-data_' + str(window_size) + '.npy'
datafile = 'data/21.csv'
if (not os.path.isfile(data_path)):
data = pd.read_csv(datafile, header=None)
npdata = np.array(data, dtype="float32")
del data
......@@ -105,6 +121,7 @@ def create_eeg_windows(window_size, nr_of_channels):
del npdata
data = np.reshape(np_window_data, (len(np_window_data), nr_of_channels, len(np_window_data[0])))
np.save(data_path, data)
np.save('data/processed-data', np.load(data_path))
return '1'
def create_weather_windows(window_size):
......
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