nucleus/webclient/src/main/webapp/src/app/chartviewer/components/chatviewer-nav-card/chart-viewer-nav-card.component.ts

/********************************************************************************
 * Copyright (c) 2015-2018 Contributors to the Eclipse Foundation
 *
 * See the NOTICE file(s) distributed with this work for additional
 * information regarding copyright ownership.
 *
 * This program and the accompanying materials are made available under the
 * terms of the Eclipse Public License v. 2.0 which is available at
 * http://www.eclipse.org/legal/epl-2.0.
 *
 * SPDX-License-Identifier: EPL-2.0
 *
 ********************************************************************************/

import { Component, OnInit, OnDestroy } from '@angular/core';
import { NavigatorService } from '../../../navigator/navigator.service';
import { MDMNotificationService } from '../../../core/mdm-notification.service';
import { TranslateService } from '@ngx-translate/core';
import { Node } from '../../../navigator/node';
import { SelectItem } from 'primeng/api';
import { PreferenceService, Scope } from '../../../core/preference.service';
import { ChartViewerDataService } from '../../services/chart-viewer-data.service';
import { Measurement } from '../../model/types/measurement.class';
import { TYPE_CHANNEL, TYPE_CHANNELGROUP, TYPE_MEASUREMENT } from '../../model/constants';
import { MDMItem } from '@core/mdm-item';
import { Subscription } from 'rxjs';
import { filter } from 'rxjs/operators';
import { ChannelSelectionRow } from '../../model/chartviewer.model';
import { ChannelGroup } from '../../model/types/channelgroup.class';

@Component({
  selector: 'mdm5-chartViewerNavCard',
  templateUrl: 'chart-viewer-nav-card.component.html',
  styleUrls: ['../../chart-viewer.style.css'],
  providers: []
})
export class ChartViewerNavCardComponent implements OnInit, OnDestroy {
  private subscription = new Subscription();

  modes: SelectItem[] = [];
  selectedMode = 'chart';

  // public data for sub-components
  selectedNode: Node;
  cachedMeasurement: Measurement;
  measurement: Measurement;

  selectedChannelRows: ChannelSelectionRow[];

  totalCachedChannels = 0;

  // dynamic reloading
  limit = 10;
  offset = 0;
  loadInterval = 10;
  allLoaded = false;
  openChannels = { limit: 0, offset: 0, total: 0 };

  constructor(private navigatorService: NavigatorService,
    private notificationService: MDMNotificationService,
    private translateService: TranslateService,
    private preferenceService: PreferenceService,
    private chartService: ChartViewerDataService) {}

  ngOnInit() {
    this.modes = [
      { label: this.translateService.instant('chartviewer.chart'), value: 'chart' },
      { label: this.translateService.instant('chartviewer.table'), value: 'table' },
    ];
    this.subscription.add(this.navigatorService.onSelectionChanged().pipe(filter((obj: Node | MDMItem): obj is Node => obj instanceof Node))
      .subscribe(
      node => this.handleSelection(node),
      error => this.notificationService.notifyError(this.translateService.instant('details.mdm-detail-view.cannot-update-node'), error)
    ));
    this.preferenceService.getPreferenceForScope(Scope.SYSTEM, 'chart-viewer.channels.max-display').subscribe(preferences => {
      if (preferences.length > 0) {
        this.limit = parseInt(preferences[0].value, 10);
      }
    });
    this.preferenceService.getPreferenceForScope(Scope.SYSTEM, 'chart-viewer.channels.load-interval').subscribe(preferences => {
      if (preferences.length > 0) {
        this.loadInterval = parseInt(preferences[0].value, 10);
      }
    });
    this.subscription.add(
      this.navigatorService.onSelectedNodesChanged().subscribe(nodes => this.handleChannelNodeSelection(nodes))
    );
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }

  private handleChannelNodeSelection(nodes: (Node | MDMItem)[]) {

    if (!nodes || nodes.length === 0 || !nodes.some(nd => nd.type === TYPE_CHANNEL)) {
      return;
    }

    let selectedChannelNodes: Node[] = nodes.map(obj => obj as Node).filter(node => node.type === TYPE_CHANNEL);

    this.cleanData();
    if (selectedChannelNodes.length > 0) {
      this.selectedNode = selectedChannelNodes[0];
      this.loadData(this.selectedNode, selectedChannelNodes);
    }
  }

  private handleSelection(node: Node) {
    if (!node) {
      return;
    }
    if (node.type === TYPE_MEASUREMENT || node.type === TYPE_CHANNELGROUP || node.type === TYPE_CHANNEL) {

      this.selectedNode = node;
      if (node.type !== TYPE_CHANNEL) {
        this.cleanData();
        this.loadData(node);
      }
    } else {
      this.selectedNode = undefined;
      this.cleanData();
    }
  }

  cleanData() {
    this.cachedMeasurement = new Measurement();
    this.totalCachedChannels = 0;
    this.measurement = undefined;
    this.offset = 0;
    this.openChannels = { limit: 0, offset: 0, total: 0 };
    this.allLoaded = false;
  }

  loadData(node: Node, selectedChannelNodes?: Node[]) {
    this.chartService.loadMeasurement(node).subscribe(measurement => {
      this.cachedMeasurement = measurement;
      this.displayNextChannels(measurement, selectedChannelNodes);
    });
  }

  displayNextChannels(measurement: Measurement, selectedChannelNodes: Node[]) {
    if (!this.selectedNode) {
      return;
    }

    if (this.selectedNode.type === TYPE_MEASUREMENT) {

      this.selectedChannelRows = measurement.allChannels().map(c => new ChannelSelectionRow(measurement.findChannelGroupByChannel(c), c));
      this.sortSelectedChannelRows();
      this.restrictSelectedChannelRows();

    } else if (this.selectedNode.type === TYPE_CHANNELGROUP) {

      let channelGroup = measurement.findChannelGroup(this.selectedNode.id);
      this.selectedChannelRows = measurement.findChannels(measurement.findChannelGroup(this.selectedNode.id))
          .map(c => new ChannelSelectionRow(channelGroup, c));
      this.sortSelectedChannelRows();
      this.restrictSelectedChannelRows();

    } else if (this.selectedNode.type === TYPE_CHANNEL) {

      let channel = (selectedChannelNodes === undefined) ? undefined
        : selectedChannelNodes.map(cn => measurement.findChannel(cn.id)).filter(cn => cn !== undefined);
      let channelGroup: ChannelGroup = undefined;
      let cGrpID: string = undefined;
      if (channel === undefined || channel.length === 0) {
        channelGroup = measurement.findChannelGroup(this.selectedNode.id);
      } else {
        channelGroup = measurement.findChannelGroupByChannel(channel[0]);
        cGrpID = channel[0].channelGroupId;
      }
      this.selectedChannelRows = channel.filter(c => cGrpID === undefined || c.channelGroupId === cGrpID)
          .map(c => new ChannelSelectionRow(channelGroup, c));
      this.sortSelectedChannelRows();
    }
    this.measurement = measurement;
  }

  private sortSelectedChannelRows() {
    this.selectedChannelRows.sort((cr1, cr2) => cr1.yChannel.name.localeCompare(cr2.yChannel.name));
  }

  private restrictSelectedChannelRows() {
    if (this.selectedChannelRows.length > this.limit) {
      this.selectedChannelRows.splice(this.limit);
    }
  }

  loadMissingChannels(event) {
    this.displayNextChannels(this.cachedMeasurement, undefined);
  }
}