Added zingchart hooks

AngularApp/prototype/src/app/app.component.html

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

 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

@@ -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

@@ -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

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

+<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

+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

 <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

 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

 <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

@@ -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

@@ -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

@@ -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" />