overview-window.component.ts

import {Component, OnInit, ViewChild} 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 {
  @ViewChild('chart') chart;
  public config;
  public graphset = [];
  public id = 'overview';
  public markers = [];
  public series = [];
  public goodLabels = [];
  public badLabels = [];
  public candidateLabels = [];

  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.graphset.push({
      id: 'preview',
      type: "scatter",
      x: 0,
      y: 0,
      scaleX: {
        zooming: true,
        minValue: 0,
        maxValue: this.state.rawData[0].values.length,
        zoomTo: [0, this.state.windowSize],
        'auto-fit': true,
        visible: false,
        guide: {
          visible: false
        }
      },
      height: '30px',
      scaleY: {
        maxValue: 1,
        minValue: -1,
        visible: false,
        guide: {
          visible: false
        }
      },
      preview: {
        x: 50,
        y: 10,
        height: '30px',
      },
      series: [
        {
          type: 'scatter',
          values: [],
          text: 'Good labels',
          marker: {
            backgroundColor: '#4caf50'
          },
          zIndex: 3,
        },
        {
          type: 'scatter',
          values: [],
          text: 'Bad labels',
          marker: {
            backgroundColor: '#f44336'
          },
          zIndex: 2,
        },
        {
          type: 'scatter',
          values: [],
          text: 'Candidates',
          marker: {
            backgroundColor: '#b1a343'
          },
          zIndex: 1,
        }
      ]
    });
    // Initialize channels
    this.state.rawData.forEach((channel, index) => {
      const data = [];
      for (let i = 0; i < channel.values.length; i++) {
        data.push([i, channel.values[i]]);
      }
      this.graphset.push({
        id: index,
        x: 0,
        y: `${75 * index + 50}px`,
        type: 'line',
        height: '50px',
        scaleX: {
          zooming: true,
          zoomTo: [0, this.state.windowSize],
          markers: []
        },
        'scale-y': {
          zooming: false,
          'auto-fit': true
        },
        plotarea: {
          height: '50px',
          'margin-top': '0px',
          'margin-bot': '0px'
        },
        series: [{
          type: 'line',
          values: data,
          text: 'Raw Values',
          zIndex: 5,
          marker: {
            alpha: 0.0,
            zIndex: 10
          }
        }]
      });
    });
    zingchart.bind('zingchart-ng-1', 'zoom', (e) => {
      if (e.graphid !== `zingchart-ng-1-graph-preview`) {
        return;
      }
      for (let i = 1; i < this.graphset.length; i ++) {
        this.chart.zoomto({
          graphid: i,
          xmin: e.xmin,
          xmax: e.xmax
        });
      }
    });
    this.config = {
      layout: `${this.graphset.length}x1`,
      graphset: this.graphset
    };
    console.log(this.config);
    console.log("showing plot");
    await this.debugClicked();
  }

  async updatePlot() {
    console.log('updating plot');
    if (!this.state.queryWindow) {
      return;
    }
    this.goodLabels = [];
    this.badLabels = [];
    this.markers = [];
    for (const index in this.state.labels) {
      if (this.state.labels[index]) {
        this.goodLabels.push([Number(index), 0]);
        this.markers.push({
          type: 'area',
          // BUG: For some reason the range values are multiplied by 10
          range: [Number(index) / 10, (Number(index) + this.state.windowSize) / 10],
          backgroundColor: "#4caf50",
        });
      } else {
        this.badLabels.push([Number(index), -1]);
        this.markers.push({
          type: 'area',
          // BUG: For some reason the range values are multiplied by 10
          range: [Number(index) / 10, (Number(index) + this.state.windowSize) / 10],
          backgroundColor: "#f44336",
        });
      }
    }
    for (const index of this.state.lshData.average_candidates.slice(0, 100)) {
      this.candidateLabels.push([Number(index), 0]);
      this.markers.push({
        type: 'area',
        // BUG: For some reason the range values are multiplied by 10
        range: [Number(index) / 10, (Number(index) + this.state.windowSize) / 10],
        backgroundColor: '#b1a343',
      });
    }
    console.log(this.markers);
    for (const channel of this.config.graphset) {
      if (channel.type === 'line') {
        channel.scaleX.markers = this.markers;
      } else {
        channel.series[0].values = this.goodLabels;
        channel.series[1].values = this.badLabels;
        channel.series[2].values = this.candidateLabels;
      }
    }
    this.chart.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;
    await this.debugClicked();
    return;
    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 = 6713;
    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');
    }
  }
}