Skip to content
GitLab
Commit eb452310 authored by Kruyff,D.L.W. (Dylan)'s avatar Kruyff,D.L.W. (Dylan)
Browse files

Added zingchart hooks

parent fae71d8c
Hide whitespace changes
Inline Side-by-side
AngularApp/prototype/src/app/app.component.html
View file @ eb452310
<div style="display: flex; justify-content: space-between;">
<div class="left" style="width: 80%">
<app-overview-window></app-overview-window>
<mat-tab-group animationDuration="0ms" (selectedTabChange)="changeTab($event)">
<mat-tab label="Training">
<app-labeling-window></app-labeling-window>
<app-table-overview></app-table-overview>
</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>
</div>
<div style="width: 20%;">
<app-query-window></app-query-window>
<app-progress-view></app-progress-view>
</div>
</div>
<app-main></app-main>
AngularApp/prototype/src/app/app.component.ts
View file @ eb452310
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;
}
}
AngularApp/prototype/src/app/app.module.ts
View file @ eb452310
......@@ -16,6 +16,7 @@ import { LabelsComponent } from './labels/labels.component';
import { QueryWindowComponent } from './query-window/query-window.component';
import {ZingchartAngularModule} from 'zingchart-angular';
import { ProgressViewComponent } from './progress-view/progress-view.component';
import { MainComponent } from './main/main.component';
PlotlyModule.plotlyjs = PlotlyJS;
......@@ -29,6 +30,7 @@ PlotlyModule.plotlyjs = PlotlyJS;
LabelsComponent,
QueryWindowComponent,
ProgressViewComponent,
MainComponent,
],
imports: [
BrowserModule,
......
AngularApp/prototype/src/app/cache.service.ts
View file @ eb452310
......@@ -19,6 +19,7 @@ export class CacheService {
public nrOfTables = 10;
public hashSize = 5;
public stepSize = 1;
public querySelectionMode = true;
public onNewData: EventEmitter<void> = new EventEmitter<void>();
public onNewSimilarity: EventEmitter<void> = new EventEmitter<void>();
......
AngularApp/prototype/src/app/main/main.component.css 0 → 100644
View file @ eb452310
.overlay {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 200px;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5);
z-index: 2;
cursor: pointer;
}
.show {
display: block;
}
AngularApp/prototype/src/app/main/main.component.html 0 → 100644
View file @ eb452310
<div style="display: flex; justify-content: space-between;">
<div class="left" style="width: 80%">
<app-overview-window style="z-index: 10"></app-overview-window>
<mat-tab-group animationDuration="0ms" (selectedTabChange)="changeTab($event)">
<mat-tab label="Training">
<app-labeling-window></app-labeling-window>
<app-table-overview></app-table-overview>
</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>
</div>
<div style="width: 20%;">
<app-query-window></app-query-window>
<app-progress-view></app-progress-view>
</div>
</div>
<div class="overlay" [class.show]="greyOut"></div>
AngularApp/prototype/src/app/main/main.component.ts 0 → 100644
View file @ eb452310
import { Component } from '@angular/core';
import {CacheService} from '../cache.service';
@Component({
selector: 'app-main',
templateUrl: './main.component.html',
styleUrls: ['./main.component.css']
})
export class MainComponent {
constructor(private service: CacheService) {
}
changeTab(tab) {
this.service.currentTab = tab.index;
}
public get greyOut() {
return this.service.querySelectionMode;
}
}
AngularApp/prototype/src/app/overview-window/overview-window.component.html
View file @ eb452310
<div style="overflow: auto">
<!-- <plotly-plot *ngIf="showPlot" [data]="data" [layout]="layout" (plotly_click)="clicked($event)"></plotly-plot>-->
</div>
<zingchart-angular [config]="config" [height]="200" [series]="series" (node_click)="clicked($event)"></zingchart-angular>
<!--<div id="overview"></div>-->
<zingchart-angular [id]="id" [config]="config" (mousewheel)="zoom($event)" (click)="clicked($event)" [height]="200" [series]="series"></zingchart-angular>
AngularApp/prototype/src/app/overview-window/overview-window.component.ts
View file @ eb452310
import { Component} from '@angular/core';
import { CacheService } from '../cache.service';
import zingchart from 'zingchart/es6';
@Component({
selector: 'app-overview-window',
......@@ -10,6 +11,7 @@ export class OverviewWindowComponent {
public config;
public series;
public showPlot = false;
public id = "overview";
public data;
public layout;
......@@ -85,12 +87,34 @@ export class OverviewWindowComponent {
zIndex: 20,
}]
};
// zingchart.render({
// id: 'overview',
// data: this.config,
// height: 200,
// width: '100%'
// });
// zingchart.bind('overview', 'click', (e) => {
// const xyInformation = zingchart.exec('overview', 'getxyinfo', {
// x: e.x,
// y: e.y
// });
// this.clicked({nodeindex: xyInformation[2].nodeidx});
// });
console.log("showing plot");
}
async clicked(clickData) {
if (!this.service.querySelectionMode) {
return;
}
this.service.querySelectionMode = false;
const xyInformation = zingchart.exec("zingchart-ng-1", 'getxyinfo', {
x: clickData.x,
y: clickData.y
});
console.log('clicked node');
const index = Math.floor(clickData.nodeindex / this.service.stepSize);
console.log(xyInformation);
const index = Math.floor(xyInformation[2].nodeidx / this.service.stepSize);
this.service.query = index;
const temp = {};
temp[index] = true;
......@@ -166,4 +190,13 @@ export class OverviewWindowComponent {
});
this.series = newSeries;
}
zoom(p) {
if (p.ev.wheelDelta > 0) {
zingchart.exec("zingchart-ng-1", 'zoomin');
} else if (p.ev.wheelDelta < 0) {
zingchart.exec("zingchart-ng-1", 'zoomout');
}
console.log(p);
}
}
AngularApp/prototype/src/app/progress-view/progress-view.component.html
View file @ eb452310
<div *ngIf="plot" class="window">
<div class="plots">
<plotly-plot [data]="plot.data" [layout]="plot.layout" (sliderEnd)=setSliderValue($event)></plotly-plot>
<plotly-plot [data]="plot.data" [layout]="plot.layout" (sliderEnd)="setSliderValue($event)"></plotly-plot>
</div>
</div>
AngularApp/prototype/src/app/query-window/query-window.component.html
View file @ eb452310
......@@ -5,5 +5,6 @@
<div *ngIf="query" 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>
AngularApp/prototype/src/app/query-window/query-window.component.ts
View file @ eb452310
......@@ -55,4 +55,8 @@ export class QueryWindowComponent implements OnInit {
get query(): number {
return this.service.query;
}
public newQuery() {
this.service.querySelectionMode = true;
}
}
Flaskserver/.idea/workspace.xml
View file @ eb452310
......@@ -2,10 +2,10 @@
<project version="4">
<component name="ChangeListManager">
<list default="true" id="556080ba-825c-4b55-a92a-867a4df4fb32" name="Default Changelist" comment="">
<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/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/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$/../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" />
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
</list>
<option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" />
<option name="SHOW_DIALOG" value="false" />
......@@ -59,7 +59,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" />
......
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