diff --git a/AngularApp/prototype/src/app/api.service.ts b/AngularApp/prototype/src/app/api.service.ts index c8351667177b226b81dbb46a22586efe6624d88f..492239431b47ad69f259ba089a0e6d3b963b8cb5 100644 --- a/AngularApp/prototype/src/app/api.service.ts +++ b/AngularApp/prototype/src/app/api.service.ts @@ -15,7 +15,10 @@ export class ApiService { // Read input data async readFile(): Promise { const response = await fetch('http://127.0.0.1:5000/read-data'); - return await response.json(); + const temp = await response.json(); + const index = JSON.parse(temp.index); + const values = JSON.parse(temp.values).map(Number); + return {index, values}; } // Split data into windows and normalize diff --git a/AngularApp/prototype/src/app/app.component.html b/AngularApp/prototype/src/app/app.component.html index b412a833ab9aacf689558d710b541cf005e9fd46..b7c16c2d287af0241d390d1e7b229b519a4489b3 100644 --- a/AngularApp/prototype/src/app/app.component.html +++ b/AngularApp/prototype/src/app/app.component.html @@ -1,8 +1,12 @@ - - - +
+
+ +
+
- +
+
+ diff --git a/AngularApp/prototype/src/app/app.component.ts b/AngularApp/prototype/src/app/app.component.ts index 967833b92ea94c34d1c2e36724cc8547e26fc394..de2455aeadd62e4ce0e05d36aa6d0cf069274c56 100644 --- a/AngularApp/prototype/src/app/app.component.ts +++ b/AngularApp/prototype/src/app/app.component.ts @@ -1,8 +1,16 @@ import { Component } from '@angular/core'; +import {CacheService} from './cache.service'; @Component({ selector: 'app-root', templateUrl: './app.component.html', }) export class AppComponent { + + constructor(private service: CacheService) { + } + + changeTab(tab) { + this.service.currentTab = tab.index; + } } diff --git a/AngularApp/prototype/src/app/cache.service.ts b/AngularApp/prototype/src/app/cache.service.ts index 6b25b338ba1ed464e10a38518bc020a31d24bd00..47a67130c78facbfc6dc60935bb6868e34d563ed 100644 --- a/AngularApp/prototype/src/app/cache.service.ts +++ b/AngularApp/prototype/src/app/cache.service.ts @@ -8,13 +8,14 @@ export class CacheService { public rawValues: number[]; public rawIndices: string[]; - public _windows: number[][]; + private _currentTab: number; + private _windows: number[][]; private _query = undefined; - public _labels = {}; - public _tables; - public _windowSimilarity; + private _labels = {}; + private _tables; + private _windowSimilarity; - public windowSize = 20; + public windowSize = 60; public nrOfTables = 10; public hashSize = 10; @@ -23,6 +24,7 @@ export class CacheService { public onNewQuery: EventEmitter = new EventEmitter(); public onNewTables: EventEmitter = new EventEmitter(); public onNewWindows: EventEmitter = new EventEmitter(); + public onNewTab: EventEmitter = new EventEmitter(); public initialized: Promise; @@ -45,16 +47,19 @@ export class CacheService { async getRawData(): Promise { const rawData: RawData = await this.api.readFile(); + console.log(rawData); this.rawIndices = rawData.index; this.rawValues = rawData.values; } async getWindows(): Promise { this.windows = await this.api.createWindows(this.rawValues, this.parameters); + console.log(this.windows); } async createTables(): Promise { this.tables = await this.api.createTables(this.windows, this.parameters); + console.log(this.tables); } async getSimilarWindows(window): Promise { @@ -111,6 +116,16 @@ export class CacheService { return this._windowSimilarity; } + public set currentTab(v) { + this._currentTab = v; + console.log(this.currentTab); + this.onNewTab.emit(); + } + + public get currentTab() { + return this._currentTab; + } + public get parameters(): {[parameter: string]: any} { return { windowsize: this.windowSize, diff --git a/AngularApp/prototype/src/app/overview-window/overview-window.component.html b/AngularApp/prototype/src/app/overview-window/overview-window.component.html index ff1453f805b7d0e51078e1954b7810a4ea0170bf..de900de3f98d384198bb86e589f5876247490614 100644 --- a/AngularApp/prototype/src/app/overview-window/overview-window.component.html +++ b/AngularApp/prototype/src/app/overview-window/overview-window.component.html @@ -1 +1,3 @@ - +
+ +
diff --git a/AngularApp/prototype/src/app/overview-window/overview-window.component.ts b/AngularApp/prototype/src/app/overview-window/overview-window.component.ts index 65b87dd9774fe9b93f2e973ac145f0f9589771d7..543aeeaaa56c698470c09b5ae4fd52d8884575eb 100644 --- a/AngularApp/prototype/src/app/overview-window/overview-window.component.ts +++ b/AngularApp/prototype/src/app/overview-window/overview-window.component.ts @@ -8,9 +8,9 @@ import {throwError} from 'rxjs'; styleUrls: ['./overview-window.component.css'] }) export class OverviewWindowComponent implements OnInit { - public defaultColors: string[] = []; - public defaultSizes: number[] = []; - public defaultOpacity: number[] = []; + public defaultColors: string[]; + public defaultSizes: number[]; + public defaultOpacity: number[]; public showPlot = false; public data; @@ -29,15 +29,14 @@ export class OverviewWindowComponent implements OnInit { async initializePlot() { this.service.query = undefined; - for (const _ of this.service.rawValues) { - this.defaultColors.push('#a3a7e4'); - this.defaultSizes.push(5); - this.defaultOpacity.push(1); - } + const size = this.service.rawValues.length; + this.defaultColors = Array(size).fill('#a3a7e4'); + this.defaultSizes = Array(size).fill(5); + this.defaultOpacity = Array(size).fill(1); this.data = [{ x: this.service.rawIndices, y: this.service.rawValues, - type: 'scatter', + type: 'scattergl', mode: 'markers', marker: { size: this.defaultSizes.slice(), @@ -47,15 +46,20 @@ export class OverviewWindowComponent implements OnInit { hovermode: 'closest', autosize: true, margin: { - l: 0, + l: 40, r: 0, b: 40, t: 0, pad: 4 }, height: 200, + xaxis: { + showticklabels: false, + // rangeslider: {} + }, }; this.showPlot = true; + console.log("showing plot"); } async clicked(clickData) { @@ -73,15 +77,31 @@ export class OverviewWindowComponent implements OnInit { const sizes: number[] = []; const opacity: number[] = []; + // Similarity 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); - sizes[index] = (Number(frequency) / this.service.nrOfTables) * 10; - opacity[index] = Number(frequency) / this.service.nrOfTables; + sizes[index] = 5; + opacity[index] = Math.max(Number(frequency) / this.service.nrOfTables, 0.5); } } + + // Labeled + for (const index in this.service.labels) { + colors[Number(index)] = this.service.labels[index] ? '#4caf50' : '#f44336'; + sizes[Number(index)] = 10; + opacity[Number(index)] = 1; + } + + // Query + colors[this.service.query] = '#cf00ff'; + sizes[this.service.query] = 10; + opacity[this.service.query] = 1; + this.data[0].marker.color = colors; + this.data[0].marker.size = sizes; + this.data[0].marker.opacity = opacity; } public getColor(value: number) { diff --git a/AngularApp/prototype/src/app/query-window/query-window.component.css b/AngularApp/prototype/src/app/query-window/query-window.component.css index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..7689f61fad121eded10ef1c81c1927a9a58cd55b 100644 --- a/AngularApp/prototype/src/app/query-window/query-window.component.css +++ b/AngularApp/prototype/src/app/query-window/query-window.component.css @@ -0,0 +1,11 @@ +.query-container { + margin: auto; + border: 2px solid black; + width: 80%; + display: flex; + justify-content: center; +} + +.query-contents { + margin: auto; +} diff --git a/AngularApp/prototype/src/app/query-window/query-window.component.html b/AngularApp/prototype/src/app/query-window/query-window.component.html index d3ed670a2eb155a094ee0738cf61b780baa812ab..f8b69ed9e0ed94778aaf68523ad8012056b13897 100644 --- a/AngularApp/prototype/src/app/query-window/query-window.component.html +++ b/AngularApp/prototype/src/app/query-window/query-window.component.html @@ -1,6 +1,9 @@ -
- Select a point in the data to start the similarity search. -
-
- +
+
+ Select a point in the data to start the similarity search. +
+
+ Current query + +
diff --git a/AngularApp/prototype/src/app/query-window/query-window.component.ts b/AngularApp/prototype/src/app/query-window/query-window.component.ts index 5c9154af5f052a7159f411623649427151be238a..c325b67649999a674a741ff26927f06570d8d40a 100644 --- a/AngularApp/prototype/src/app/query-window/query-window.component.ts +++ b/AngularApp/prototype/src/app/query-window/query-window.component.ts @@ -34,7 +34,7 @@ export class QueryWindowComponent implements OnInit { hovermode: 'closest', autosize: true, margin: { - l: 30, + l: 50, r: 30, t: 30, pad: 4 diff --git a/AngularApp/prototype/src/app/table-overview/table-overview.component.ts b/AngularApp/prototype/src/app/table-overview/table-overview.component.ts index 8f3d4ca0787d0e1d59e3657d74b79551e178b92e..13a00a4f72503e8ccb6bd63fcb3a4114628a7194 100644 --- a/AngularApp/prototype/src/app/table-overview/table-overview.component.ts +++ b/AngularApp/prototype/src/app/table-overview/table-overview.component.ts @@ -26,7 +26,7 @@ export class TableOverviewComponent implements OnInit { { data: [{ x: Object.keys(table.entries).map((hash: string) => { - return hash; + return Number('0b' + hash); } ), y: Object.values(table.entries).map((values: number[]) => values.length / this.service.windows.length), diff --git a/Flaskserver/.idea/workspace.xml b/Flaskserver/.idea/workspace.xml index c2d4ca30f900992508926119a41cf26ac3e2cf7b..c60f6bf3171659ede088daf8539694d76ab22557 100644 --- a/Flaskserver/.idea/workspace.xml +++ b/Flaskserver/.idea/workspace.xml @@ -1,7 +1,224 @@ - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + set + Counter + print + + @@ -34,7 +281,7 @@ - +