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 { NodeService } from '../../../navigator/node.service';
import { forkJoin, Observable, of, throwError } from 'rxjs';
import { Attribute, Node, NodeArray } from '../../../navigator/node';
import { SelectItem } from 'primeng/api';
import { PropertyService } from 'src/app/core/property.service';
import { PreferenceService, Scope } from '../../../core/preference.service';
import { ChartViewerDataService } from '../../services/chart-viewer-data.service';
import { Query, QueryService, Row, SearchResult } from '../../../tableview/query.service';
import { map, switchMap } from 'rxjs/operators';
import { Measurement } from '../../model/types/measurement.class';
import { TYPE_CHANNEL, TYPE_CHANNELGROUP, TYPE_MEASUREMENT } from '../../model/constants';

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

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

  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 nodeService: NodeService,
    private _prop: PropertyService,
    private preferenceService: PreferenceService,
    private chartService: ChartViewerDataService,
    private queryService: QueryService) {}

  ngOnInit() {
    this.modes = [
      { label: this.translateService.instant('chartviewer.chart'), value: 'chart' },
      { label: this.translateService.instant('chartviewer.table'), value: 'table' },
    ];
    this.onSelectedNodeChange(this.navigatorService.getSelectedNode());
    this.subscription = this.navigatorService.selectedNodeChanged.subscribe(
      node => this.onSelectedNodeChange(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);
      }
    });
  }

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

  onSelectedNodeChange(node: Node) {
    if (!node) {
      return;
    }
    if (node.type === TYPE_MEASUREMENT || node.type === TYPE_CHANNELGROUP || node.type === TYPE_CHANNEL) {
      this.selectedNode = node;
      this.cleanData();
      this.loadData(node, this.limit, false);
    } 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, limit: number, join: boolean) {
    this.chartService.loadMeasurement(node).subscribe(measurement => {
      this.cachedMeasurement = measurement;
      this.displayNextChannels();
    });
  }

  displayNextChannels() {
    let m = new Measurement(this.cachedMeasurement);

    if (this.measurement) {
      // Added already selected channels
      for (let channel of this.measurement.allChannels()) {
        m.put(this.measurement.findChannelGroupByChannel(channel), channel);
      }
    }

    let channels = Array.from(this.cachedMeasurement.allChannels());
    let loadedChannels = channels.slice(this.offset, this.offset + this.limit);
    loadedChannels.forEach(c => m.put(this.cachedMeasurement.findChannelGroupByChannel(c), c));

    this.totalCachedChannels = channels.length;
    this.offset += loadedChannels.length;
    this.allLoaded = this.offset >= this.totalCachedChannels;
    this.openChannels = { limit: this.loadInterval, offset: this.offset, total: this.totalCachedChannels };
    this.measurement = m;
  }

  loadMissingChannels(event) {
    this.displayNextChannels();
  }
}