Skip to content

GitLab

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

Progress view updates overview window

parent 4ccd826a
Show whitespace changes
Inline Side-by-side
AngularApp/prototype/src/app/cache.service.ts
View file @ fae71d8c
...@@ -13,6 +13,7 @@ export class CacheService { ...@@ -13,6 +13,7 @@ export class CacheService {
private _labels = {}; private _labels = {};
private _tables; private _tables;
private _windowSimilarity; private _windowSimilarity;
private _sliderValue;
public windowSize = 500; public windowSize = 500;
public nrOfTables = 10; public nrOfTables = 10;
...@@ -26,6 +27,7 @@ export class CacheService { ...@@ -26,6 +27,7 @@ export class CacheService {
public onNewTables: EventEmitter<void> = new EventEmitter<void>(); public onNewTables: EventEmitter<void> = new EventEmitter<void>();
public onNewWindows: EventEmitter<void> = new EventEmitter<void>(); public onNewWindows: EventEmitter<void> = new EventEmitter<void>();
public onNewTab: EventEmitter<void> = new EventEmitter<void>(); public onNewTab: EventEmitter<void> = new EventEmitter<void>();
public onNewSlider: EventEmitter<void> = new EventEmitter<void>();
public initialized: Promise<void>; public initialized: Promise<void>;
...@@ -126,6 +128,15 @@ export class CacheService { ...@@ -126,6 +128,15 @@ export class CacheService {
return this._currentTab; return this._currentTab;
} }
public set sliderValue(v) {
this._sliderValue = v;
this.onNewSlider.emit(v);
}
public get sliderValue() {
return this._sliderValue;
}
public get parameters(): {[parameter: string]: any} { public get parameters(): {[parameter: string]: any} {
return { return {
windowsize: this.windowSize, windowsize: this.windowSize,
......
AngularApp/prototype/src/app/overview-window/overview-window.component.ts
View file @ fae71d8c
...@@ -25,6 +25,7 @@ export class OverviewWindowComponent { ...@@ -25,6 +25,7 @@ export class OverviewWindowComponent {
this.updatePlot(); this.updatePlot();
} }
}); });
this.service.onNewSlider.subscribe((v) => this.updateCandidates(v));
} }
async initializePlot() { async initializePlot() {
...@@ -98,19 +99,9 @@ export class OverviewWindowComponent { ...@@ -98,19 +99,9 @@ export class OverviewWindowComponent {
} }
async updatePlot() { async updatePlot() {
const colors: string[] = []; if (this.service.query) {
const sizes: number[] = [];
const opacity: number[] = [];
// Similarity
const windowSimilarity = await this.service.getSimilarWindows(this.service.query); const windowSimilarity = await this.service.getSimilarWindows(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] = 5;
// opacity[index] = Math.max(Number(frequency) / this.service.nrOfTables, 0.5);
// }
// }
let goodLabels = []; let goodLabels = [];
let badLabels = []; let badLabels = [];
for (const index in this.service.labels) { for (const index in this.service.labels) {
...@@ -150,28 +141,29 @@ export class OverviewWindowComponent { ...@@ -150,28 +141,29 @@ export class OverviewWindowComponent {
zIndex: 20, zIndex: 20,
} }
]; ];
// // 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) { async updateCandidates(sliderIndex) {
// value from 0 to 1 console.log("Updating chart");
const hueValue = Math.min((1 - value) , 1); console.log(this.service.windowSimilarity);
const hue = ((1 - hueValue) * 120).toString(10); console.log(sliderIndex);
const sat = value * 100; const candidates = this.service.windowSimilarity[sliderIndex.toString()];
return `hsl(${hue}, ${sat}%, 50%)`; console.log(candidates);
const labels = [];
for (const index of candidates) {
labels.push(this.data[index]);
}
console.log(labels);
const newSeries = this.series.slice(0, 3);
newSeries.push({
type: 'scatter',
values: labels,
text: 'Similar windows',
marker: {
backgroundColor: '#b1a343'
},
zIndex: 20,
});
this.series = newSeries;
} }
} }
AngularApp/prototype/src/app/progress-view/progress-view.component.html
View file @ fae71d8c
<div *ngIf="similarity" class="window"> <div *ngIf="plot" class="window">
<div class="plots"> <div class="plots">
<div class="subplot" *ngFor="let subplot of plots"> <plotly-plot [data]="plot.data" [layout]="plot.layout" (sliderEnd)=setSliderValue($event)></plotly-plot>
<plotly-plot [data]="subplot.data" [layout]="subplot.layout"></plotly-plot>
</div>
</div> </div>
</div> </div>
AngularApp/prototype/src/app/progress-view/progress-view.component.ts
View file @ fae71d8c
...@@ -7,12 +7,12 @@ import {CacheService} from '../cache.service'; ...@@ -7,12 +7,12 @@ import {CacheService} from '../cache.service';
styleUrls: ['./progress-view.component.css'] styleUrls: ['./progress-view.component.css']
}) })
export class ProgressViewComponent implements OnInit { export class ProgressViewComponent implements OnInit {
public plots; public plot;
constructor(private cache: CacheService) { } constructor(private cache: CacheService) { }
ngOnInit(): void { ngOnInit(): void {
this.cache.onNewSimilarity.subscribe(() => { this.initializeInfo() }); this.cache.onNewSimilarity.subscribe(() => { this.initializeInfo(); });
} }
averagePlot(averages) { averagePlot(averages) {
...@@ -74,17 +74,20 @@ export class ProgressViewComponent implements OnInit { ...@@ -74,17 +74,20 @@ export class ProgressViewComponent implements OnInit {
} }
async initializeInfo(): Promise<void> { async initializeInfo(): Promise<void> {
this.plots = [];
const keys = Object.keys(this.similarity).map(a => Number(a)).sort((a, b) => b - a); const keys = Object.keys(this.similarity).map(a => Number(a)).sort((a, b) => b - a);
const allWindows = []; const allWindows = [];
for (const key of keys) { for (const key of keys) {
allWindows.push(this.similarity[key]); allWindows.push(this.similarity[key]);
} }
const averages = await this.cache.getAverageWindow(allWindows); const averages = await this.cache.getAverageWindow(allWindows);
this.plots = [this.averagePlot(averages)]; this.plot = this.averagePlot(averages);
} }
public get similarity() { public get similarity() {
return this.cache.windowSimilarity; return this.cache.windowSimilarity;
} }
public setSliderValue(v) {
this.cache.sliderValue = v.slider.active;
}
} }
Flaskserver/.idea/workspace.xml
View file @ fae71d8c
...@@ -2,12 +2,10 @@ ...@@ -2,12 +2,10 @@
<project version="4"> <project version="4">
<component name="ChangeListManager"> <component name="ChangeListManager">
<list default="true" id="556080ba-825c-4b55-a92a-867a4df4fb32" name="Default Changelist" comment=""> <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/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.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/labels/labels.component.ts" beforeDir="false" afterPath="$PROJECT_DIR$/../AngularApp/prototype/src/app/labels/labels.component.ts" 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/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$/../AngularApp/prototype/src/app/progress-view/progress-view.component.html" beforeDir="false" afterPath="$PROJECT_DIR$/../AngularApp/prototype/src/app/progress-view/progress-view.component.html" afterDir="false" />
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" 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" />
</list> </list>
<option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" /> <option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" />
<option name="SHOW_DIALOG" value="false" /> <option name="SHOW_DIALOG" value="false" />
...@@ -20,7 +18,7 @@ ...@@ -20,7 +18,7 @@
<file pinned="false" current-in-tab="true"> <file pinned="false" current-in-tab="true">
<entry file="file://$PROJECT_DIR$/main.py"> <entry file="file://$PROJECT_DIR$/main.py">
<provider selected="true" editor-type-id="text-editor"> <provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="230"> <state relative-caret-position="128">
<caret line="120" column="15" lean-forward="true" selection-start-line="120" selection-start-column="15" selection-end-line="120" selection-end-column="15" /> <caret line="120" column="15" lean-forward="true" selection-start-line="120" selection-start-column="15" selection-end-line="120" selection-end-column="15" />
<folding> <folding>
<element signature="e#0#41#0" expanded="true" /> <element signature="e#0#41#0" expanded="true" />
...@@ -209,7 +207,7 @@ ...@@ -209,7 +207,7 @@
</entry> </entry>
<entry file="file://$PROJECT_DIR$/main.py"> <entry file="file://$PROJECT_DIR$/main.py">
<provider selected="true" editor-type-id="text-editor"> <provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="230"> <state relative-caret-position="128">
<caret line="120" column="15" lean-forward="true" selection-start-line="120" selection-start-column="15" selection-end-line="120" selection-end-column="15" /> <caret line="120" column="15" lean-forward="true" selection-start-line="120" selection-start-column="15" selection-end-line="120" selection-end-column="15" />
<folding> <folding>
<element signature="e#0#41#0" expanded="true" /> <element signature="e#0#41#0" expanded="true" />
......
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