overview-window.component.ts

import {Component, OnInit} from '@angular/core';
import { StateService } from '../state.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 state: StateService) {
  }

  async ngOnInit(): Promise<void> {
    this.state.onNewData.subscribe(() => this.initializePlot());
    this.state.onNewTable.subscribe(() => this.updatePlot());
  }

  async initializePlot() {
    this.state.queryWindow = undefined;
    this.debugClicked();
    this.data = [];
    for (let i = 0; i < this.state.rawData.values.length; i++) {
      this.data.push([this.state.rawData.index[i], this.state.rawData.values[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',
        position: '0% 100%',
        'auto-fit': true
      },
      plotarea: {
        'margin-top': '10px',
        'margin-bottom': '50%'
      },
      scaleX: {
        zooming: true,
        zoomTo: [0, this.state.windowSize],
        'auto-fit': true,
        markers: this.markers
      },
      'scale-y': {
        'auto-fit': true
      },
      series: this.series
    };
  }

  async updatePlot() {
    this.goodLabels = [];
    this.badLabels = [];
    this.markers = [];
    for (const index in this.state.labels) {
      if (this.state.labels[index]) {
        this.goodLabels.push([Number(index) * (12000 / 6), 0]);
        this.markers.push({
          type: 'area',
          // BUG: For some reason the range values are multiplied by 10
          range: [Number(index) * (12000 / 6) / 10, (Number(index) * (12000 / 6) + this.state.windowSize) / 10],
          backgroundColor: '#4caf50',
        });
      } else {
        this.badLabels.push([Number(index) * (12000 / 6), 0]);
        this.markers.push({
          type: 'area',
          // BUG: For some reason the range values are multiplied by 10
          range: [Number(index) * (12000 / 6) / 10, (Number(index) * (12000 / 6) + this.state.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
    });
  }

  async updateCandidates(sliderIndex) {
    // 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([Number(index) * (12000 / 6), 0]);
    //   markers.push({
    //     type: 'area',
    //     // BUG: For some reason the range values are multiplied by 10
    //     range: [Number(index) * (12000 / 6) / 10, (Number(index) * (12000 / 6) + this.state.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
    // });
  }

  async clicked(clickData) {
    if (!this.state.querySelectionMode) {
      return;
    }
    this.state.querySelectionMode = false;
    const xyInformation = zingchart.exec('zingchart-ng-1', 'getxyinfo', {
      x: clickData.x,
      y: clickData.y
    });
    const index = Math.floor(xyInformation[0].scalenumvalue / (12000 / 6));
    await this.state.getQueryWindow(index);
    await this.state.lshInitial();
    const temp = {};
    temp[index] = true;
    this.state.labels = temp;
  }

  async debugClicked() {
    const index = 80503;
    await this.state.getQueryWindow(index);
    await this.state.lshInitial();
  }

  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');
    }
  }
}