overview-window.component.ts

import { Component} 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 {
  public config;
  public series;
  public showPlot = false;
  public id = "overview";

  public data;
  public layout;

  constructor(private service: CacheService) {
  }

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

  async initializePlot() {
    this.service.query = undefined;
    // this.data = this.service.rawIndices.map((e, i) => {
    //   return [e, values[i]];
    // });
    this.data = [];
    for (let i = 0; i < this.service.rawValues.length; i++) {
      this.data.push([i, this.service.rawValues[i]]);
    }
    this.config = {
      type: "mixed",
      preview: {
        height: " 30px",
        'auto-fit': true
      },
      "plotarea": {
        "margin-top": "10px"
      },
      'scale-x': {
        zooming: true,
        zoomTo: [0, this.service.windowSize],
        'auto-fit': true
      },
      'scale-y': {
        // zooming: true,
        'auto-fit': true
      },
      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,
        }]
    };
    // 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');
    console.log(xyInformation);
    const index = Math.floor(xyInformation[2].nodeidx / this.service.stepSize);
    this.service.query = index;
    const temp = {};
    temp[index] = true;
    this.service.labels = temp;
    await this.updatePlot();
  }

  async updatePlot() {
    if (this.service.query) {
      const windowSimilarity = await this.service.getSimilarWindows(this.service.query);
    }
    let goodLabels = [];
    let badLabels = [];
    for (const index in this.service.labels) {
      if (this.service.labels[index]) {
        goodLabels.push(this.data[index]);
      } else {
        badLabels.push(this.data[index]);
      }
    }
    this.series = [
      {
        type: 'line',
        values: this.data,
        text: 'Raw Values',
        zIndex: 5,
        marker: {
          alpha: 0.0,
          zIndex: 10
        }
      },
      {
        type: 'scatter',
        values: goodLabels,
        text: 'Good labels',
        marker: {
          backgroundColor: '#4caf50'
        },
        zIndex: 20,
      },
      {
        type: 'scatter',
        values: badLabels,
        text: 'Bad labels',
        marker: {
          backgroundColor: '#f44336'
        },
        zIndex: 20,
      }
    ];
  }

  async updateCandidates(sliderIndex) {
    console.log("Updating chart");
    console.log(this.service.windowSimilarity);
    console.log(sliderIndex);
    const candidates = this.service.windowSimilarity[sliderIndex.toString()];
    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;
  }

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