overview-window.component.ts

import {Component, OnInit} from '@angular/core';
import { CacheService } from '../cache.service';
import zingchart from 'zingchart/es6';

@Component({
  selector: 'app-overview-window',
  templateUrl: './overview-window.component.html',
  styleUrls: ['./overview-window.component.css']
})
export class OverviewWindowComponent implements OnInit {
  public config;
  public id = "overview";
  public markers = [];
  public series = [];
  public goodLabels = [];
  public badLabels = [];

  public data;
  public layout;

  constructor(private service: CacheService) {
  }

  async ngOnInit(): Promise<void> {
    this.service.onNewData.subscribe(() => this.initializePlot());
    this.service.onNewTables.subscribe(() => {
      if (this.service.queryWindow) {
        this.updatePlot();
      }
    });
    this.service.onNewSlider.subscribe((v) => this.updateCandidates(v));
  }

  async initializePlot() {
    this.service.queryWindow = undefined;
    this.data = [];
    for (let i = 0; i < this.service.rawValues.length; i++) {
      this.data.push([i, this.service.rawValues[i]]);
    }
    this.series = [
      {
        type: 'line',
        values: this.data,
        text: 'Raw Values',
        zIndex: 5,
        marker: {
          alpha: 0.0,
          zIndex: 10
        }
      },
      {
        type: 'scatter',
        values: [],
        text: 'Good labels',
        marker: {
          backgroundColor: '#4caf50'
        },
        zIndex: 20,
      },
      {
        type: 'scatter',
        values: [],
        text: 'Bad labels',
        marker: {
          backgroundColor: '#f44336'
        },
        zIndex: 20,
      }];
    this.config = {
      type: "mixed",
      preview: {
        height: " 30px",
        'auto-fit': true
      },
      "plotarea": {
        "margin-top": "10px"
      },
      scaleX: {
        zooming: true,
        zoomTo: [0, this.service.windowSize],
        'auto-fit': true,
        markers: this.markers
      },
      'scale-y': {
        'auto-fit': true
      },
      series: this.series
    };
    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
    });
    const index = Math.floor(xyInformation[2].nodeidx / this.service.stepSize);
    await this.service.getQueryWindow(this.service.rawValues.slice(index, index + this.service.windowSize));
    const temp = {};
    temp[index] = true;
    this.service.labels = temp;
    await this.updatePlot();
  }

  async updatePlot() {
    console.log('updating plot');
    if (!this.service.queryWindow) {
      return;
    }
    this.goodLabels = [];
    this.badLabels = [];
    this.markers = [];
    for (const index in this.service.labels) {
      if (this.service.labels[index]) {
        this.goodLabels.push(this.data[index]);
        this.markers.push({
          type: 'area',
          // BUG: For some reason the range values are multiplied by 10
          range: [this.data[index][0] / 10, (this.data[index][0] + this.service.windowSize) / 10],
          backgroundColor: "#4caf50",
        });
      } else {
        this.badLabels.push(this.data[index]);
        this.markers.push({
          type: 'area',
          // BUG: For some reason the range values are multiplied by 10
          range: [this.data[index][0] / 10, (this.data[index][0] + this.service.windowSize) / 10],
          backgroundColor: "#f44336",
        });
      }
    }
    this.series[1].values = this.goodLabels;
    this.series[2].values = this.badLabels;
    this.config.scaleX.markers = this.markers;
    zingchart.exec("zingchart-ng-1", 'setdata', {
      data: this.config
    });
    console.log('querying');
    await this.service.getSimilarWindows();
    console.log('done');
  }

  async updateCandidates(sliderIndex) {
    console.log("Updating chart");
    let candidates = [];
    for (let i = sliderIndex; i < this.service.nrOfTables; i++) {
      candidates = candidates.concat(this.service.windowSimilarity[sliderIndex.toString()]);
    }
    const labels = [];
    const markers = [];
    for (const index of candidates) {
      labels.push(this.data[index]);
      markers.push({
        type: 'area',
        // BUG: For some reason the range values are multiplied by 10
        range: [this.data[index][0] / 10, (this.data[index][0] + this.service.windowSize) / 10],
        backgroundColor: "#b1a343",
      });
    }
    const newSeries = this.config.series.slice(0, 3);
    newSeries.push({
      type: 'scatter',
      values: labels,
      text: 'Similar windows',
      marker: {
        backgroundColor: '#b1a343'
      },
      zIndex: 20,
    });
    this.config.series = newSeries;
    this.config.scaleX.markers = this.markers.concat(markers);
    zingchart.exec("zingchart-ng-1", 'setdata', {
      data: this.config
    });
  }

  zoom(p) {
    if (!p.ev) {
      return;
    }
    if (p.ev.wheelDelta > 0) {
      zingchart.exec("zingchart-ng-1", 'zoomin');
    } else if (p.ev.wheelDelta < 0) {
      zingchart.exec("zingchart-ng-1", 'zoomout');
    }
  }

  doubleClick(e) {
    zingchart.exec("zingchart-ng-1", 'viewall');
  }
}