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]]
......
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