Next tuesday 25th january around 21.30 we'll be upgrading to GitLab version 14.7

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

Use tabs and store labeled indices

parent 75131a3a
<div style="display: flex">
<div style="width: 70%">
<app-settings></app-settings>
<app-overview-window></app-overview-window>
<app-overview-window></app-overview-window>
<mat-tab-group animationDuration="0ms">
<mat-tab label="Query">
<app-query-window></app-query-window>
</mat-tab>
<mat-tab label="Samples">
<app-labeling-window></app-labeling-window>
</div>
<div style="width: 30%">
</mat-tab>
<mat-tab label="Hashtables">
<app-table-overview></app-table-overview>
</div>
</div>
</mat-tab>
<mat-tab label="Labeled data">
<app-labels></app-labels>
</mat-tab>
<mat-tab label="Settings">
<app-settings></app-settings>
</mat-tab>
</mat-tab-group>
......@@ -12,6 +12,8 @@ import { LabelingWindowComponent } from './labeling-window/labeling-window.compo
import { TableOverviewComponent } from './table-overview/table-overview.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {MatTabsModule} from '@angular/material/tabs';
import { LabelsComponent } from './labels/labels.component';
import { QueryWindowComponent } from './query-window/query-window.component';
PlotlyModule.plotlyjs = PlotlyJS;
......@@ -22,6 +24,8 @@ PlotlyModule.plotlyjs = PlotlyJS;
OverviewWindowComponent,
LabelingWindowComponent,
TableOverviewComponent,
LabelsComponent,
QueryWindowComponent,
],
imports: [
BrowserModule,
......
......@@ -7,16 +7,20 @@ import {ApiService, RawData} from './api.service';
export class CacheService {
public rawValues: number[];
public rawIndices: string[];
public windows: number[][];
public hashFunctions;
public tables;
public windowSimilarity;
public _windows: number[][];
private _query = undefined;
public _labels = {};
public _tables;
public _windowSimilarity;
public windowSize = 20;
public nrOfTables = 10;
public hashSize = 10;
public onQuery: EventEmitter<void> = new EventEmitter<void>();
public onNewSimilarity: EventEmitter<void> = new EventEmitter<void>();
public onNewLabels: EventEmitter<void> = new EventEmitter<void>();
public onNewQuery: EventEmitter<void> = new EventEmitter<void>();
public onNewTables: EventEmitter<void> = new EventEmitter<void>();
public onNewWindows: EventEmitter<void> = new EventEmitter<void>();
......@@ -47,25 +51,66 @@ export class CacheService {
async getWindows(): Promise<void> {
this.windows = await this.api.createWindows(this.rawValues, this.parameters);
this.onNewWindows.emit();
}
async createTables(): Promise<void> {
this.tables = await this.api.createTables(this.windows, this.parameters);
this.onNewTables.emit();
}
async getSimilarWindows(window): Promise<any> {
this.windowSimilarity = await this.api.getSimilarWindows(window, this.tables);
this.onQuery.emit();
return this.windowSimilarity;
}
async updateTables(labeldata): Promise<void> {
this.tables = await this.api.updateTables(this.windows, labeldata, this.tables, this.parameters);
async updateTables(): Promise<void> {
this.tables = await this.api.updateTables(this.windows, this.labels, this.tables, this.parameters);
}
public set query(v) {
this._query = v;
this.onNewQuery.emit();
}
public get query(): number {
return this._query;
}
public set windows(v) {
this._windows = v;
this.onNewWindows.emit();
}
public get windows(): number[][] {
return this._windows;
}
public set tables(v) {
this._tables = v;
this.onNewTables.emit();
}
public get tables() {
return this._tables;
}
public set labels(v) {
this._labels = v;
this.onNewLabels.emit();
}
public get labels() {
return this._labels;
}
public set windowSimilarity(v) {
this._windowSimilarity = v;
this.onNewSimilarity.emit();
}
public get windowSimilarity() {
return this._windowSimilarity;
}
public get parameters(): {[parameter: string]: any} {
return {
windowsize: this.windowSize,
......
......@@ -3,6 +3,11 @@
width: 150px;
}
.subplot-container {
display: flex;
overflow: auto;
}
button {
padding: 0 20px;
}
......
<div *ngIf="windowSimilarity" style="display: flex">
<div *ngIf="windowSimilarity" class="subplot-container">
<div class="subplot" *ngFor="let subplot of subplots">
<plotly-plot [data]="subplot.data" [layout]="subplot.layout"></plotly-plot>
<div class="button-holder">
......
......@@ -15,11 +15,12 @@ export class LabelingWindowComponent implements OnInit {
constructor(private service: CacheService) { }
ngOnInit(): void {
this.service.onQuery.subscribe(() => { this.getTopKSimilar(); });
this.service.onNewSimilarity.subscribe(() => { this.getTopKSimilar(); });
}
public changeTables() {
this.service.updateTables(this.labels);
this.service.labels = Object.assign({}, this.service.labels, this.labels);
this.service.updateTables();
}
public get windowSimilarity() {
......@@ -42,6 +43,9 @@ export class LabelingWindowComponent implements OnInit {
public getTopKSimilar() {
this.labels = [];
if (!this.windowSimilarity) {
return;
}
let topk = [];
let k = this.k;
const keys = Object.keys(this.windowSimilarity).map(a => Number(a)).sort((a, b) => b - a);
......@@ -62,10 +66,6 @@ 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,
......@@ -93,7 +93,5 @@ export class LabelingWindowComponent implements OnInit {
}
);
}
console.log(this.topk);
console.log(this.subplots);
}
}
.subplot {
margin-right: 20px;
width: 150px;
}
.good-labels {
padding: 5px;
display: flex;
overflow: auto;
background-color: rgba(76, 175, 80, 0.5);
}
.bad-labels {
padding: 5px;
display: flex;
overflow: auto;
background-color: rgba(244, 67, 54, 0.5);
}
<div class="good-labels" *ngIf="goodLabels.length > 0">
<div class="subplot" *ngFor="let subplot of goodLabels">
<plotly-plot [data]="subplot.data" [layout]="subplot.layout"></plotly-plot>
</div>
</div>
<div class="bad-labels" *ngIf="badLabels.length > 0">
<div class="subplot" *ngFor="let subplot of badLabels">
<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-labels',
templateUrl: './labels.component.html',
styleUrls: ['./labels.component.css']
})
export class LabelsComponent implements OnInit {
public goodLabels = [];
public badLabels = [];
constructor(private service: CacheService) { }
ngOnInit(): void {
this.service.onNewLabels.subscribe(() => { this.createSubplots(); });
}
createSubplots(): void {
this.goodLabels = [];
this.badLabels = [];
console.log(this.service.labels);
for (const key of Object.keys(this.service.labels)) {
const index = Number(key);
const plot =
{
index,
data: [{
x: this.service.rawIndices.slice(index, index + this.service.windowSize),
y: this.service.rawValues.slice(index, index + this.service.windowSize),
type: 'line'
}],
layout: {
title: `Index: ${index.toString()}`,
hovermode: 'closest',
autosize: true,
margin: {
l: 30,
r: 30,
t: 30,
pad: 4
},
height: 200,
width: 150,
titlefont: {
size: 9
},
}
};
if (this.service.labels[key]) {
this.goodLabels.push(plot);
} else {
this.badLabels.push(plot);
}
}
}
}
......@@ -11,7 +11,6 @@ export class OverviewWindowComponent implements OnInit {
public defaultColors: string[] = [];
public defaultSizes: number[] = [];
public defaultOpacity: number[] = [];
public selectedIndex: number;
public showPlot = false;
public data;
......@@ -22,14 +21,14 @@ export class OverviewWindowComponent implements OnInit {
async ngOnInit(): Promise<void> {
this.service.onNewWindows.subscribe(() => { this.initializePlot(); });
this.service.onNewTables.subscribe(() => {
if (this.selectedIndex) {
if (this.service.query) {
this.updatePlot();
}
});
}
async initializePlot() {
this.selectedIndex = undefined;
this.service.query = undefined;
for (const _ of this.service.rawValues) {
this.defaultColors.push('#a3a7e4');
this.defaultSizes.push(5);
......@@ -55,14 +54,16 @@ export class OverviewWindowComponent implements OnInit {
pad: 4
},
height: 200,
width: screen.width * 0.7
};
this.showPlot = true;
}
async clicked(clickData) {
for (const point of clickData.points) {
this.selectedIndex = point.pointNumber;
this.service.query = point.pointNumber;
const temp = {};
temp[point.pointNumber] = true;
this.service.labels = temp;
}
await this.updatePlot();
}
......@@ -72,7 +73,7 @@ export class OverviewWindowComponent implements OnInit {
const sizes: number[] = [];
const opacity: number[] = [];
const windowSimilarity = await this.service.getSimilarWindows(this.service.windows[this.selectedIndex]);
const windowSimilarity = await this.service.getSimilarWindows(this.service.windows[this.service.query]);
for (const frequency in windowSimilarity){
for (const index of windowSimilarity[frequency]) {
colors[index] = this.getColor(Number(frequency) / this.service.nrOfTables);
......
<div *ngIf="!query">
Select a point in the data to start the similarity search.
</div>
<div *ngIf="query">
<plotly-plot [data]="plot.data" [layout]="plot.layout"></plotly-plot>
</div>
import { Component, OnInit } from '@angular/core';
import {CacheService} from '../cache.service';
@Component({
selector: 'app-query-window',
templateUrl: './query-window.component.html',
styleUrls: ['./query-window.component.css']
})
export class QueryWindowComponent implements OnInit {
public plot;
constructor(private service: CacheService) { }
ngOnInit(): void {
this.service.onNewQuery.subscribe(() => {
if (this.service.query) {
this.initializePlot();
}
});
}
initializePlot(): void {
this.plot =
{
index: this.service.query,
data: [{
x: this.service.rawIndices.slice(this.service.query, this.service.query + this.service.windowSize),
y: this.service.rawValues.slice(this.service.query, this.service.query + this.service.windowSize),
type: 'line'
}],
layout: {
title: `Index: ${this.service.query.toString()}`,
hovermode: 'closest',
autosize: true,
margin: {
l: 30,
r: 30,
t: 30,
pad: 4
},
height: 200,
width: 150,
titlefont: {
size: 9
},
}
};
}
get query(): number {
return this.service.query;
}
}
.window {
width: 450px;
width: 100%;
display: flex;
flex-wrap: wrap;
}
......
......@@ -3,8 +3,14 @@
<component name="ChangeListManager">
<list default="true" id="556080ba-825c-4b55-a92a-867a4df4fb32" name="Default Changelist" comment="">
<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" />
<change beforePath="$PROJECT_DIR$/../AngularApp/prototype/src/app/cache.service.ts" beforeDir="false" afterPath="$PROJECT_DIR$/../AngularApp/prototype/src/app/cache.service.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/../AngularApp/prototype/src/app/labeling-window/labeling-window.component.css" beforeDir="false" afterPath="$PROJECT_DIR$/../AngularApp/prototype/src/app/labeling-window/labeling-window.component.css" afterDir="false" />
<change beforePath="$PROJECT_DIR$/../AngularApp/prototype/src/app/labeling-window/labeling-window.component.html" beforeDir="false" afterPath="$PROJECT_DIR$/../AngularApp/prototype/src/app/labeling-window/labeling-window.component.html" afterDir="false" />
<change beforePath="$PROJECT_DIR$/../AngularApp/prototype/src/app/labeling-window/labeling-window.component.ts" beforeDir="false" afterPath="$PROJECT_DIR$/../AngularApp/prototype/src/app/labeling-window/labeling-window.component.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/../AngularApp/prototype/src/app/table-overview/table-overview.component.css" beforeDir="false" afterPath="$PROJECT_DIR$/../AngularApp/prototype/src/app/table-overview/table-overview.component.css" 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" />
</list>
<option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" />
<option name="SHOW_DIALOG" value="false" />
......@@ -17,8 +23,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="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" />
<state relative-caret-position="227">
<caret line="106" column="25" selection-start-line="106" selection-start-column="25" selection-end-line="106" selection-end-column="25" />
<folding>
<element signature="e#0#41#0" expanded="true" />
</folding>
......@@ -38,7 +44,7 @@
</list>
</option>
</component>
<component name="ProjectFrameBounds" extendedState="6">
<component name="ProjectFrameBounds" extendedState="7">
<option name="x" value="12" />
<option name="y" value="-36" />
<option name="width" value="1890" />
......@@ -116,17 +122,18 @@
<workItem from="1594494759659" duration="1411000" />
<workItem from="1594589515579" duration="1044000" />
<workItem from="1594719112139" duration="10388000" />
<workItem from="1595247298901" duration="1773000" />
</task>
<servers />
</component>
<component name="TimeTrackingManager">
<option name="totallyTimeSpent" value="16749000" />
<option name="totallyTimeSpent" value="18522000" />
</component>
<component name="ToolWindowManager">
<frame x="-7" y="-7" width="1295" height="695" extended-state="7" />
<editor active="true" />
<layout>
<window_info active="true" content_ui="combo" id="Project" order="0" visible="true" weight="0.26273242" />
<window_info active="true" content_ui="combo" id="Project" order="0" visible="true" weight="0.26677445" />
<window_info id="Structure" order="1" side_tool="true" weight="0.25" />
<window_info id="Favorites" order="2" side_tool="true" />
<window_info anchor="bottom" id="Message" order="0" />
......@@ -155,8 +162,8 @@
<component name="editorHistoryManager">
<entry file="file://$PROJECT_DIR$/main.py">
<provider selected="true" editor-type-id="text-editor">
<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" />
<state relative-caret-position="227">
<caret line="106" column="25" selection-start-line="106" selection-start-column="25" selection-end-line="106" selection-end-column="25" />
<folding>
<element signature="e#0#41#0" expanded="true" />
</folding>
......
......@@ -108,8 +108,8 @@ def update():
table_size = int(raw_data['parameters']["tablesize"])
new_tables = []
correct_indices = [index for index, value in enumerate(label_data) if value is True]
incorrect_indices = [index for index, value in enumerate(label_data) if value is False]
correct_indices = [int(index) for index, value in label_data.items() if value is True]
incorrect_indices = [int(index) for index, value in label_data.items() if value is False]
window = data[correct_indices[0]]
......
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