import {
  ChangeDetectionStrategy,
  ChangeDetectorRef,
  Component,
  ElementRef, EventEmitter,
  Input, NgZone, Output,
  Renderer2,
  ViewChild
} from '@angular/core';
import {ColorHashService} from '@common/shared/services/color-hash/color-hash.service';
import {wordWrap} from '@common/tasks/tasks.utils';
import {attachColorChooser} from '@common/shared/ui-components/directives/choose-color/choose-color.directive';
import {debounceTime, filter} from 'rxjs/operators';
import {cloneDeep, escape, get, getOr} from 'lodash/fp';
import {
  AxisType,
  Config,
  Data,
  Datum,
  Margin,
  ModeBarButton,
  ModeBarDefaultButtons,
  PlotData,
  PlotlyHTMLElement, PlotMarker,
  Root
} from 'plotly.js';
import {ScalarKeyEnum} from '~/business-logic/model/events/scalarKeyEnum';
import {ExtData, ExtFrame, ExtLayout, ExtLegend, PlotlyGraphBaseComponent} from './plotly-graph-base';
import {Store} from '@ngrx/store';
import {select} from 'd3-selection';
import {MatDialog} from '@angular/material/dialog';
import {GraphViewerComponent} from './graph-viewer/graph-viewer.component';
import {PALLET} from '@common/constants';
import {download} from '@common/shared/utils/download';
import {Subject} from 'rxjs';
import {hexToRgb} from '@common/shared/services/color-hash/color-hash.utils';
import {chooseTimeUnit} from '@common/shared/utils/choose-time-unit';

// eslint-disable-next-line @typescript-eslint/naming-convention
declare const Plotly;
const DARK_THEME_GRAPH_LINES_COLOR = '#39405f';
const DARK_THEME_GRAPH_TICK_COLOR = '#c1cdf3';
const ORIGIN_COLOR = 'origin-color';
const RATIO_OFFSET_FIX = 37;

export type ChartHoverModeEnum = 'x' | 'y' | 'closest' | false | 'x unified' | 'y unified';

@Component({
  selector: 'sm-single-graph',
  templateUrl: './single-graph.component.html',
  styleUrls: ['./single-graph.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class SingleGraphComponent extends PlotlyGraphBaseComponent {
  public alreadyDrawn: boolean = false;
  public shouldRefresh: boolean = false;
  public loading: boolean;
  public type: PlotData['type'] | 'table';
  public ratio: number;
  public title: string;
  private yaxisType: AxisType = 'linear';
  private originalChart: ExtFrame;
  private _chart: ExtFrame;
  private smoothnessTimeout: number;
  private chartData: HTMLDivElement;
  private previousOffsetWidth: number;
  private modeBar: HTMLElement;
  private previousHeight: number;
  private ratioEnable: boolean;
  private smooth$ = new Subject();
  private _height: number;
  private _hoverMode: ChartHoverModeEnum;

  private drawGraph$ = new Subject();
  @Input() identifier: string;
  @Input() hideTitle: boolean = false;
  @Input() isDarkTheme: boolean;
  @Input() showLoaderOnDraw = true;
  @Input() hideMaximize: 'show' | 'hide' | 'disabled' = 'show';
  @Input() legendConfiguration: Partial<ExtLegend & { noTextWrap: boolean }> = {};

  @Input() set height(height: number) {
    this._height = height;
    if (this.chart) {
      this.drawGraph$.next({forceRedraw: true, forceSkipReact: false});
    }
  }

  get height() {
    return this._height;
  }

  @Input() set width(width: number) {
    if (this.chart) {
      this.drawGraph$.next({forceRedraw: true, forceSkipReact: false});
    }
  }

  @Input() set chart(chart: ExtFrame) {
    if (chart) {
      this.ratioEnable = !!chart.layout.width && !!chart.layout.height;
      this.ratio = this.ratioEnable ? chart.layout.width / chart.layout.height : null;
      this.height = chart.layout.height || this.height || 450;
      this.originalChart = chart;
      this._chart = cloneDeep(chart);
      this.drawGraph$.next({forceRedraw: true, forceSkipReact: false});
    }
  }

  get chart(): ExtFrame {
    return this._chart;
  }

  @Input() moveLegendToTitle = false;
  @Input() legendStringLength = 19;
  @Input() graphsNumber: number;
  @Input() xAxisType: ScalarKeyEnum;

  @Input() set hoverMode(hoverMode) {
    this._hoverMode = hoverMode;
    if (this.chart) {
      this.drawGraph$.next({forceRedraw: true, forceSkipReact: false});
    }
  }

  get hoverMode() {
    return this._hoverMode;
  }

  @Input() set smoothWeight(ratio: number) {
    this._smoothWeight = ratio;
    this.isSmooth = ratio > 0;
    if (this.alreadyDrawn) {
      this.smooth$.next(ratio);
    }
  }

  get smoothWeight() {
    return this._smoothWeight;
  }

  @Input() exportForReport = false;
  @Input() hideDownloadButtons = false;
  @Input() noMargins = false;
  @Output() hoverModeChanged = new EventEmitter<ChartHoverModeEnum>();
  @Output() createEmbedCode = new EventEmitter<DOMRect>();
  @Output() maximizeClicked = new EventEmitter();
  @ViewChild('drawHere', {static: true}) plotlyContainer: ElementRef;
  private chartElm;
  private _smoothWeight: number;


  constructor(
    protected renderer: Renderer2,
    private colorHash: ColorHashService,
    public changeDetector: ChangeDetectorRef,
    protected store: Store,
    private dialog: MatDialog,
    private readonly zone: NgZone
  ) {
    super(store);
    this.sub.add(this.smooth$
      .pipe(
        debounceTime(50),
        filter(() => !!this.chart))
      .subscribe(() => {
        this._chart = cloneDeep(this.originalChart);
        this.drawGraph$.next({forceRedraw: true, forceSkipReact: false});
      })
    );
    this.sub.add(this.drawGraph$.pipe(debounceTime(40)).subscribe(({forceRedraw, forceSkipReact}) => {
      if (this.showLoaderOnDraw) {
        this.loading = true;
        this.changeDetector.detectChanges();
      }
      const container = this.plotlyContainer.nativeElement;
      if (this.alreadyDrawn && !forceRedraw && !this.shouldRefresh) {
        return;
      }
      this.alreadyDrawn = this.alreadyDrawn && !forceRedraw;
      this.shouldRefresh = false;
      const [root, data, layout, config, graphEl] = this.drawPlotly();
      if (!document.body.contains(graphEl)) {
        container.appendChild(graphEl);
      }

      let skipReact = false;
      // root.height > 0 to avoid rare plotly exception
      if ((this.plotlyContainer.nativeElement.offsetWidth !== this.previousOffsetWidth || forceSkipReact) && (root as HTMLElement).offsetHeight > 0) {
        skipReact = true;
        this.zone.runOutsideAngular(() => Plotly.relayout(root, {
          width: this.ratio ? this.height * this.ratio + RATIO_OFFSET_FIX : Math.max(getOr(0, 'data[0].cells.values.length', data) * 100, this.plotlyContainer.nativeElement.offsetWidth - 3),
          height: this.height,
        }).then(() => {
          this.loading = false;
          this.changeDetector.detectChanges();
          this.updateLegend();
        }));
      }
      this.previousOffsetWidth = this.plotlyContainer.nativeElement.offsetWidth;
      this.previousHeight = this.height;

      if (!skipReact) {
        this.zone.runOutsideAngular(() => Plotly.react(root, data, layout, config).then(() => {
          this.loading = false;
          this.changeDetector.detectChanges();
        }));
      }

      this.initColorSubscription();
      if (!this.alreadyDrawn) {
        setTimeout(() => {
          this.subscribeColorButtons(container);
          this.updateLegend();
          this.listenToHoverModeChange();
        });
      }
      this.alreadyDrawn = true;
    }));
  }

  listenToHoverModeChange() {
    this.plotlyContainer.nativeElement.querySelector('.chart')?.on('plotly_afterplot', () => {
      const activeBtns = this.plotlyContainer.nativeElement.querySelectorAll('.modebar-btn.active');
      if (activeBtns.length > 0) {
        activeBtns.forEach((bt => {
          if (bt.attributes['data-attr'].value === 'hovermode') {
            if (bt.attributes['data-val'].value !== this.hoverMode) {
              this._hoverMode = bt.attributes['data-val'].value;
              this.hoverModeChanged.emit(bt.attributes['data-val'].value);
            }
          }
        }));
      }
    });
  }

  drawPlotly(): [Root, Data[], Partial<ExtLayout>, Partial<Config>, Element] {
    this.chartData = this.chartData || this.renderer.createElement('div');
    this.chartElm = this.chartElm || this.renderer.createElement('div');
    this.chartElm.classList.add('chart');
    if (!document.body.contains(this.chartElm)) {
      this.chartData.appendChild(this.chartElm);
    }

    const graph = this.formatChartLines() as ExtFrame;
    this.type = getOr(graph.layout.type, 'data[0].type', graph);
    const title = graph.variants?.length > 1? '' : this.addIterationString(graph.layout.title as string, graph.iter) || (graph.layout.title as Record<string, any>).text;
    this.title = this.isDarkTheme ? '' : title;
    let layout = {
      ...this.addParametersIfDarkTheme({
        font: {
          color: '#FFFFFF',
          family: '"Heebo", sans-serif',
        }
      }),
      ...graph.layout,
      // eslint-disable-next-line @typescript-eslint/naming-convention
      ...this.addParametersIfDarkTheme({plot_bgcolor: 'transparent'}),
      height: this.height,
      width: this.ratio ? (this.height * this.ratio) + RATIO_OFFSET_FIX : undefined,
      modebar: {
        color: '#5a658e',
        activecolor: '#4D66FF',
        ...this.addParametersIfDarkTheme({
          color: PALLET.blue300,
          activecolor: PALLET.blue100,
          bgcolor: 'transparent',
        }),
      },
      title: {
        ...this.addParametersIfDarkTheme({
          font: {
            color: this.isDarkTheme ? PALLET.blue100 : 'dce0ee'
          },
        }),
      },
      ...this.addParametersIfDarkTheme({
        xaxis: {
          color: DARK_THEME_GRAPH_LINES_COLOR,
          gridcolor: DARK_THEME_GRAPH_LINES_COLOR,
          zerolinecolor: DARK_THEME_GRAPH_LINES_COLOR,
          tickfont: {
            color: DARK_THEME_GRAPH_TICK_COLOR
          },
          title: {
            text: graph.layout.xaxis.title,
            font: {
              color: '#dce0ee'
            }
          },
          ...graph.layout.xaxis,
        },
        yaxis: {
          color: DARK_THEME_GRAPH_LINES_COLOR,
          gridcolor: DARK_THEME_GRAPH_LINES_COLOR,
          zerolinecolor: DARK_THEME_GRAPH_LINES_COLOR,
          tickfont: {
            color: DARK_THEME_GRAPH_TICK_COLOR
          },
          ...graph.layout.yaxis,
        }
      }),
      uirevision: 'static', // Saves the UI state between redraws https://plot.ly/javascript/uirevision/
      hoverlabel: {namelength: -1},
      legend: {
        traceorder: 'normal',
        xanchor: 'left',
        yanchor: 'top',
        ...(this.moveLegendToTitle ? {
          y: 1,
          orientation: 'v',
        } : {
          orientation: 'h',
          y: -0.2
        }),
        borderwidth: 2,
        bordercolor: '#FFFFFF',
        valign: 'top',
        font: {color: '#000', size: 12, family: 'sans-serif'},
        ...this.addParametersIfDarkTheme({
          bgcolor: 'transparent',
          bordercolor: 'transparent',
          font: {color: '#dce0ee', size: 12, family: 'sans-serif'},
        }),
        ...this.legendConfiguration,
        ...graph.layout.legend,
      },
      showlegend: this.chartElm.layout && Object.prototype.hasOwnProperty.call(this.chartElm.layout, 'showlegend') ? this.chartElm.layout.showlegend : graph.layout?.showlegend !== false,
      margin: graph.layout.margin ? graph.layout.margin : this.noMargins ? {
        l: 50,
        r: 50,
        t: 50,
        b: 50,
        pad: 0,
        autoexpand: true
      } : {
        l: 70,
        r: 50,
        t: 80,
        b: 90,
        pad: 0,
        autoexpand: true
      } as Partial<Margin>,
    } as Partial<ExtLayout>;

    if (this.type === 'table') {
      this.changeDetector.detectChanges();
      // override header design
      graph.data[0].header = {
        ...graph.data[0].header,
        line: {width: 1, color: this.isDarkTheme ? '#5a658e' : '#d4d6e0'},
        height: 29,
        align: 'left',
        font: {
          color: [this.isDarkTheme ? PALLET.blue200 : PALLET.blue400],
          size: 12
        },
        fill: {...graph.data[0].header?.fill, color: this.isDarkTheme ? PALLET.blue800 : PALLET.blue50}
      };

      // override cells design
      const isFireFox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
      graph.data[0].cells = {
        ...graph.data[0].cells,
        align: 'left',
        height: (isFireFox && this.isDarkTheme) ? 'auto' : 30,
        font: {
          color: [this.isDarkTheme ? PALLET.blue200 : PALLET.blue400],
          size: 12
        },
        fill: {...graph.data[0].cells, color: this.isDarkTheme ? PALLET.blue950 : '#ffffff'},
        line: {width: 1, color: this.isDarkTheme ? DARK_THEME_GRAPH_LINES_COLOR : PALLET.blue100}
      };
      layout.width = Math.max(getOr(0, 'data[0].cells.values.length', graph) * 100, this.plotlyContainer.nativeElement.offsetWidth - 3);
      layout.title = {
        ...layout.title as Record<string, any>,
        xanchor: 'left',
        xref: 'paper',
        x: 0
      };
      layout.margin = {
        l: 24,
        t: 52,
        r: 24,
        b: 0
      };
      layout.height = Math.min(getOr(15, 'data[0].cells.values[0].length', graph) * 30 + 150, this.height);
    }
    const barLayoutConfig = {
      hovermode: 'closest',
    };

    const scatterLayoutConfig: Partial<ExtLayout> = {
      // spikedistance: -1,
      // hoverdistance: -1,
      // hovermode    : 'x',
      xaxis: {
        ...graph.layout.xaxis,
        spikecolor: '#000000FF',
        showspikes: true,
        spikemode: 'across',
        spikesnap: 'cursor',
        spikethickness: 1,
        spikedash: 'solid',
        rangeslider: {visible: false},
        fixedrange: false,
        ...this.addParametersIfDarkTheme({
          color: DARK_THEME_GRAPH_LINES_COLOR,
          title: {
            text: graph.layout.xaxis.title,
            font: {
              color: '#dce0ee'
            }
          },
          gridcolor: DARK_THEME_GRAPH_LINES_COLOR,
          zerolinecolor: DARK_THEME_GRAPH_LINES_COLOR,
          tickfont: {
            color: DARK_THEME_GRAPH_TICK_COLOR
          }

        })
      },
      yaxis: {
        ...graph.layout.yaxis,
        spikecolor: '#000000FF',
        showspikes: false,
        spikemode: 'across',
        spikesnap: 'cursor',
        spikethickness: 1,
        spikedash: 'dash',
        rangeslider: {visible: false},
        fixedrange: false,
        type: this.yaxisType,
        ...this.addParametersIfDarkTheme({
          color: DARK_THEME_GRAPH_LINES_COLOR,
          gridcolor: DARK_THEME_GRAPH_LINES_COLOR,
          zerolinecolor: DARK_THEME_GRAPH_LINES_COLOR,
          tickfont: {
            color: DARK_THEME_GRAPH_TICK_COLOR
          }
        })
      },
    };

    if (['multiScalar', 'scalar'].includes(graph.layout.type)) {
      if (['scatter', 'scatter3d'].includes(this.type)) {
        layout = {hovermode: this.hoverMode, ...layout, ...scatterLayoutConfig} as Partial<ExtLayout>;
      }
    }
    if (['bar'].includes(this.type)) {
      layout = {...layout, ...barLayoutConfig} as Partial<ExtLayout>;
    }

    const modeBarButtonsToAdd = ['v1hovermode', 'togglespikelines'] as undefined as ModeBarButton[];

    if (['multiScalar', 'scalar'].includes(graph.layout.type)) {
      modeBarButtonsToAdd.push({
        name: 'Log view',
        title: this.getLogButtonTitle(this.yaxisType === 'log'),
        icon: this.getLogIcon(this.yaxisType === 'log'),
        click: (gd: PlotlyHTMLElement, ev: MouseEvent) => {
          this.yaxisType = this.yaxisType === 'log' ? 'linear' : 'log';
          const icon = this.getLogIcon(this.yaxisType === 'log');
          let path: SVGPathElement;
          let svg: HTMLElement;
          if ((ev.target as SVGElement).tagName === 'svg') {
            svg = ev.target as HTMLElement;
            path = (ev.target as SVGElement).firstChild as SVGPathElement;
          } else {
            path = ev.target as SVGPathElement;
            svg = path.parentElement as HTMLElement;
          }
          svg.parentElement.attributes['data-title'].value = this.getLogButtonTitle(this.yaxisType === 'log');
          path.attributes[0].value = icon.path;
          this.smoothnessTimeout = window.setTimeout(() => {
            this._chart = cloneDeep(this.originalChart);
            this.drawGraph$.next({forceRedraw: true, forceSkipReact: false});
          }, 400);
        }
      });
    }
    if (!['table', 'parcoords'].includes(get('data[0].type', graph)) && graph.layout?.showlegend !== false && !this.moveLegendToTitle) {
      modeBarButtonsToAdd.push({
        name: 'Hide legend',
        title: this.getHideButtonTitle(),
        icon: this.getToggleLegendIcon(),
        click: (element, ev: MouseEvent) => {
          const pathElement = (ev.target as HTMLElement).tagName === 'path' ? (ev.target as HTMLElement) : (ev.target as HTMLElement).querySelector('path');
          const svg = pathElement.parentElement;
          pathElement.style.fill = this.chartElm.layout?.showlegend ? 'rgb(77, 102, 255)' : 'rgb(143, 157, 201)';
          svg.parentElement.attributes['data-title'].value = this.getHideButtonTitle();
          this.chartElm.layout.showlegend = !this.chartElm.layout.showlegend;
          if (this.chartElm.layout.showlegend) {
            setTimeout(() => {
              this.subscribeColorButtons(this.plotlyContainer.nativeElement);
              this.updateLegend();
            }, 20);
          }
          this.zone.runOutsideAngular(() => Plotly.relayout(this.chartElm, {showlegend: this.chartElm.layout.showlegend}));
        }
      });
    }
    if (!['table', 'parcoords'].includes(get('data[0].type', graph)) && this.ratioEnable && !this.moveLegendToTitle) {
      modeBarButtonsToAdd.push({
        name: 'Auto Layout',
        title: 'Auto Layout',
        icon: this.getToggleRatioIcon(),
        click: (element, ev: MouseEvent) => {
          const pathElement = (ev.target as HTMLElement).tagName === 'path' ? (ev.target as HTMLElement) : (ev.target as HTMLElement).querySelector('path');
          const svg = pathElement.parentElement;
          pathElement.style.fill = this.ratio ? 'rgb(77, 102, 255)' : 'rgb(143, 157, 201)';
          svg.parentElement.attributes['data-title'].value = this.getLockRatioTitle();
          this.ratio = this.ratio ? null : this.originalChart.layout.width / this.originalChart.layout.height;
          this.drawGraph$.next({forceRedraw: true, forceSkipReact: true});
        }
      });
    }
    if (!this.hideDownloadButtons) {
      modeBarButtonsToAdd.push({
        name: 'Download JSON',
        title: 'Download JSON',
        icon: this.getJsonDownloadIcon(),
        click: () => {
          this.downloadGraphAsJson(cloneDeep(this.originalChart));
        }
      });
    }
    if (this.type === 'table') {
      modeBarButtonsToAdd.push({
        name: 'Download CSV',
        title: 'Download CSV',
        icon: this.getCSVDownloadIcon(),
        click: () => {
          this.downloadTableAsCSV();
        }
      });
    }

    if (this.exportForReport) {
      const button: ModeBarButton = {
        name: 'Embed',
        title: 'Copy embed code',
        attr: 'plotly-embedded-modebar-button',
        icon: this.getEmbedIcon(),
        click: (event) => {
          this.createEmbedCode.emit(event.querySelector('[data-title="Copy embed code"]').getBoundingClientRect()
          );
        }
      };
      modeBarButtonsToAdd.push(button);
    }

    if (this.hideMaximize !== 'hide') {
      const maximizeButton: ModeBarButton = {
        name: 'Maximize',
        title: this.hideMaximize === 'disabled' ? `Can't maximize because an iframe with the same name exists` : 'Maximize Graph',
        attr: this.hideMaximize === 'disabled' ? 'plotly-disabled-maximize' : '',
        icon: this.getMaximizeIcon(),
        click: () => {
          this.hideMaximize !== 'disabled' && this.maximizeGraph();
        }
      };
      modeBarButtonsToAdd.push(maximizeButton);
    }

    const config = {
      modeBarButtonsToRemove: (this.hideDownloadButtons ? ['sendDataToCloud', 'toImage']: ['sendDataToCloud']) as ModeBarDefaultButtons[],
      displaylogo: false,
      modeBarButtonsToAdd
    };

    return [this.chartElm, graph.data, layout, config, this.chartData];
  }

  private updateLegend() {
    const graph = select(this.plotlyContainer.nativeElement);
    graph.selectAll('.legendpoints path')
      .attr('d', 'M5.5,0A5.5,5.5 0 1,1 0,-5.5A5.5,5.5 0 0,1 5.5,0Z');
    graph.selectAll('.legendtoggle')
      .on('click', () => window.setTimeout(() => graph.selectAll('.legendpoints path')
        .attr('d', 'M5.5,0A5.5,5.5 0 1,1 0,-5.5A5.5,5.5 0 0,1 5.5,0Z'), 300)
      );
  }

  private formatChartLines() {
    if (this.alreadyDrawn || !this.chart) {
      return this.chart;
    }


    const graph = this.chart;
    if (this.isCompare) {
      graph.data = this.addIdToDuplicateExperiments(this.chart.data, this.chart.task);
    }
    const smoothLines = [];
    const timeUnit = chooseTimeUnit(graph.data) as { time: number; str: string };

    for (let i = 0; i < graph.data.length; i++) {
      if (!graph.data[i].name) {
        graph.data[i].name = `graph.metric ${i}`;
      }

      if (!this.alreadyDrawn && !graph.data[i].name.includes('<span style="display: none;"')) {
        graph.data[i].name = escape(graph.data[i].name);

        if (this.xAxisType === ScalarKeyEnum.Timestamp) {
          const zeroTime = graph.data[i].x[0] as number;
          graph.data[i].x = (graph.data[i].x as Datum[]).map((timestamp: number) => (timestamp - zeroTime) / timeUnit.time);
          // graph.data[i].hovertext = graph.data[i].x.map(timestamp => timeInWords((timestamp - zeroTime)));
        }
        if (graph.data[i].type === 'bar' && !graph.data[i].marker) {
          graph.data[i].marker = {} as Partial<PlotMarker>;
        }
        const genColorKey = this.generateColorKey(graph, i);
        const wrappedText = this.legendConfiguration.noTextWrap || this.scaleFactor === 100 ?
          graph.data[i].name :
          wordWrap(graph.data[i].name, this.legendStringLength / 2);
        const skipColor = !!this.getOriginalColor(i) ? ORIGIN_COLOR : '';
        graph.data[i].name = wrappedText + `<span style="display: none;" class="color-key" data-color-key="${genColorKey}" ${skipColor}></span>`;
      }
      const colorKey = this.extractColorKey(graph.data[i].name);
      const originalColor = this.getOriginalColor(i);
      if (!Array.isArray(originalColor)) {
        const color = (originalColor && !this.colorHash.hasColor(colorKey)) ? hexToRgb(this.getOriginalColor(i)) : this.colorHash.initColor(colorKey, null, this.isDarkTheme);
        // if (this.colorHash.hasColor(colorKey)) { // We don't save init color in color cache, so we need to recolor everytime
        this._reColorTrace(graph.data[i], color);
        // }
        if (this.isSmooth && !graph.data[i].isSmoothed) {
          graph.data[i].legendgroup = graph.data[i].name;
          graph.data[i].showlegend = false;
          graph.data[i].hoverinfo = 'skip';
          smoothLines.push(this.resmoothDataset(graph.data[i], color));
        }
      }
    }
    this.setAxisText(graph, timeUnit);
    graph.data = graph.data.filter(line => !line.isSmoothed);
    graph.data = graph.data.concat(smoothLines);
    return graph;
  }

  private getOriginalColor(i: number) {
    return this.originalChart.data[i]?.marker?.color || this.originalChart.data[i]?.line?.color;
  }

  public generateColorKey(graph: ExtFrame, i: number) {
    const variant = graph.data[i].colorHash || graph.data[i].name;
    if (!this.isCompare) {
      return `${variant}?`;  // "?" to adjust desired colors (legend title is removing this ?)
    } else {
      const task = graph.data[i].task;
      return `${variant}-${task}`;
    }
  }

  private resmoothDataset(data: ExtData, color) {
    let last = data.y?.[0] as number ?? NaN;

    return {
      ...data,
      line: {...data.line, color: `rgb(${color[0]},${color[1]},${color[2]})`},
      legendgroup: data.name,
      name: `${data.name} (Smoothed)`,
      showlegend: true,
      isSmoothed: true,
      hovertext: data.hovertext ? data.hovertext + '(Smoothed)' : '(Smoothed)',
      hoverinfo: 'all',
      y: data.y.map((d) => {
        if (!isFinite(last)) {
          return null;
        } else {
          // 1st-order IIR low-pass filter to attenuate the higher-
          // frequency components of the time-series.
          last = last * this.smoothWeight + (1 - this.smoothWeight) * d;
          return last;
        }
      })
    } as ExtData;
  }

  private initColorSubscription(forceRedraw = false) {
    if (this.colorSub) {
      // Subscription is already running
      if (forceRedraw) {
        this.colorSub.unsubscribe();
      } else {
        return;
      }
    }
    this.colorSub = this.colorHash.getColorsObservable()
      .pipe(
        filter(colorObj => !!colorObj),
        debounceTime(100)
      )
      .subscribe(colorObj => {
        const graph = this.chart;
        let changed: boolean = false;
        graph.data.forEach(trace => {
          const name = trace.name;
          const colorKey = this.extractColorKey(name);
          if (!name || !this.colorHash.hasColor(colorKey)) {
            return;
          }
          const oldColor = this._getTraceColor(trace);
          const newColorArr = colorObj[colorKey];
          const newColor = newColorArr ? `rgb(${newColorArr[0]},${newColorArr[1]},${newColorArr[2]})` : false;
          if (oldColor !== newColor && newColor) {
            changed = true;
            this._reColorTrace(trace, newColorArr);
          }
        });
        if (changed) {
          this.zone.runOutsideAngular(() => Plotly.redraw(this.chartElm));
          this.updateLegend();
        }

      });
  }

  private subscribeColorButtons(container) {
    this.repositionModeBar(this.plotlyContainer.nativeElement);
    if (this.moveLegendToTitle) {
      const graphTitle = container.querySelector('.gtitle') as SVGTextElement;
      if (graphTitle) {
        const endOfTitlePosition = (
          (this.plotlyContainer.nativeElement.offsetWidth / 2) +
          (graphTitle.getClientRects()[0].width * this.scaleFactor / 200)
        );
        const legend = container.querySelector('.legend') as SVGGElement;
        legend.style.transform = `translate(${endOfTitlePosition}px, 30px)`;
        legend.classList.add('hide-text');
      }
    }
    const traces = container.querySelectorAll('.traces');
    for (const trace of traces) {
      const textEl = trace.querySelector('.legendtext') as SVGTextElement;
      const textElData = textEl.getAttribute('data-unformatted');
      const text = textEl ? this.extractColorKey(textElData) : '';
      // const skipColor = textElData.includes(ORIGIN_COLOR);

      const title = document.createElementNS('http://www.w3.org/2000/svg', 'title');
      title.textContent = text.replace('?', '');
      textEl.parentElement.appendChild(title);

      const layers = trace.querySelector('.layers');
      const parentEl = layers.parentElement;
      parentEl.removeChild(layers); // Needed because z-index in svg is by element order
      parentEl.appendChild(layers);
      attachColorChooser(text, layers, this.colorHash, this.store);
    }
  }


  private setAxisText(chart: ExtFrame, timeUnit?: { time: number; str: string }) {
    const title = this.getAxisText(timeUnit);
    if (!chart.layout.xaxis) {
      chart.layout.xaxis = {};
    }
    if (title) {
      chart.layout.xaxis.title = {text: title, standoff: 10};
    }
    return chart;
  }

  downloadGraphAsJson(chart: ExtFrame) {
    let timeUnit;
    if (this.xAxisType === ScalarKeyEnum.Timestamp) {
      chart.data.forEach(graphData => {
        if (!graphData.name) {
          return;
        }

        timeUnit = typeof timeUnit === 'undefined' ? chooseTimeUnit(chart.data) : timeUnit;
        const zeroTime = graphData.x[0] as number;
        graphData.x = (graphData.x as number[]).map(timestamp => (timestamp - zeroTime) / timeUnit.time);
        // graph.data[i].hovertext = graph.data[i].x.map(timestamp => timeInWords((timestamp - zeroTime)));
      });
    }
    const exportName = `${chart.layout.title} - ${this.getAxisText(timeUnit) || chart.layout.name}.json`;
    const dataStr = 'data:text/json;charset=utf-8,' + encodeURIComponent(JSON.stringify(chart.data));
    download(dataStr, exportName);
  }

  getJsonDownloadIcon() {
    return {
      path: 'M21,6H15V0ZM14,7h7V22a2,2,0,0,1-2,2H5a2,2,0,0,1-2-2V2A2,2,0,0,1,5,0h9Zm1.34,13.22h.58a2.09,2.09,0,0,0,1.3-.28,1.59,1.59,0,0,0,.32-1.16v-.84a1.14,1.14,0,0,1,.22-.81,1,1,0,0,1,.76-.23h.24v-.74h-.24a1,1,0,0,1-.76-.23,1.14,1.14,0,0,1-.22-.81v-.84a1.55,1.55,0,0,0-.32-1.15,2.08,2.08,0,0,0-1.3-.29h-.58v.74h.47a.71.71,0,0,1,.55.17,1.25,1.25,0,0,1,.14.72v.82a1.54,1.54,0,0,0,.19.9.94.94,0,0,0,.68.34,1,1,0,0,0-.68.35,1.56,1.56,0,0,0-.19.9v.8a1.27,1.27,0,0,1-.14.73.72.72,0,0,1-.55.17h-.47ZM9.11,12.84H8.53a2.12,2.12,0,0,0-1.31.29,1.5,1.5,0,0,0-.33,1.15v.84a1.29,1.29,0,0,1-.2.82,1.08,1.08,0,0,1-.76.22H5.69v.74h.24a1,1,0,0,1,.76.23,1.26,1.26,0,0,1,.2.81v.84a1.54,1.54,0,0,0,.33,1.16,2.13,2.13,0,0,0,1.31.28h.58v-.74H8.63a.68.68,0,0,1-.54-.17A1.27,1.27,0,0,1,8,18.58v-.8a1.56,1.56,0,0,0-.19-.9,1,1,0,0,0-.68-.35,1,1,0,0,0,.68-.34,1.54,1.54,0,0,0,.19-.9v-.82a1.25,1.25,0,0,1,.14-.72.68.68,0,0,1,.54-.17h.48Zm4,1.7H10.83v.88H12v3.33a1.21,1.21,0,0,1-.16.73.61.61,0,0,1-.54.22h-.91v.88h1.23a1.44,1.44,0,0,0,1.17-.42,2.17,2.17,0,0,0,.36-1.41Zm0-2.12H12v1.33h1.15Z',
      width: 24,
      height: 24
    };
  }

  getCSVDownloadIcon() {
    return {
      path: 'M15,6V0l6,6Zm6,1V22a2,2,0,0,1-2,2H5a2,2,0,0,1-2-2V2A2,2,0,0,1,5,0h9V7ZM8.83,14.28a2.78,2.78,0,0,0-.57-.21A2.67,2.67,0,0,0,7.62,14a2.18,2.18,0,0,0-1.8.78A3.57,3.57,0,0,0,5.2,17a3.54,3.54,0,0,0,.62,2.24,2.18,2.18,0,0,0,1.8.78A2.59,2.59,0,0,0,8.25,20a2.66,2.66,0,0,0,.58-.21V18.49a2.42,2.42,0,0,1-.58.4,1.44,1.44,0,0,1-.57.13,1.06,1.06,0,0,1-1-.51A2.8,2.8,0,0,1,6.4,17a2.82,2.82,0,0,1,.32-1.49,1.05,1.05,0,0,1,1-.5,1.42,1.42,0,0,1,.57.12,2.42,2.42,0,0,1,.58.4Zm4.93,4a1.72,1.72,0,0,0-.33-1.08,2.27,2.27,0,0,0-1-.68l-.49-.19a2,2,0,0,1-.68-.35.52.52,0,0,1-.16-.4.55.55,0,0,1,.22-.48,1.06,1.06,0,0,1,.64-.17,2.31,2.31,0,0,1,.76.14,3,3,0,0,1,.75.4V14.36a4,4,0,0,0-.8-.27,3.57,3.57,0,0,0-.8-.09,2,2,0,0,0-1.4.45,1.61,1.61,0,0,0-.5,1.25,1.44,1.44,0,0,0,.31,1,2.87,2.87,0,0,0,1.17.7l.57.21a1,1,0,0,1,.45.31.72.72,0,0,1,.16.46.67.67,0,0,1-.23.54,1,1,0,0,1-.66.2,2.61,2.61,0,0,1-.86-.16,4,4,0,0,1-.89-.49v1.19a3.71,3.71,0,0,0,1.71.41,2.44,2.44,0,0,0,1.58-.43A1.64,1.64,0,0,0,13.76,18.3Zm5.07-4.19H17.67l-1,4.87-1-4.87H14.46l1.39,5.83h1.6Z',
      width: 24,
      height: 24,
    };
  }

  getToggleLegendIcon() {
    return {
      width: 1000,
      fill: 'rgb(77, 102, 255)',
      path: 'M200,250H50a50,50,0,0,1,0-100H200a50,50,0,0,1,0,100Zm800-50a50,50,0,0,0-50-50H400a50,50,0,0,0,0,100H950A50,50,0,0,0,1000,200ZM250,400a50,50,0,0,0-50-50H50a50,50,0,0,0,0,100H200A50,50,0,0,0,250,400Zm750,0a50,50,0,0,0-50-50H400a50,50,0,0,0,0,100H950A50,50,0,0,0,1000,400ZM250,600a50,50,0,0,0-50-50H50a50,50,0,0,0,0,100H200A50,50,0,0,0,250,600Zm750,0a50,50,0,0,0-50-50H400a50,50,0,0,0,0,100H950A50,50,0,0,0,1000,600ZM250,800a50,50,0,0,0-50-50H50a50,50,0,0,0,0,100H200A50,50,0,0,0,250,800Zm750,0a50,50,0,0,0-50-50H400a50,50,0,0,0,0,100H950A50,50,0,0,0,1000,800Z',
      ascent: 1000,
      descent: 0,
      transform: 'translate(0, -100)'
    };
  }

  getToggleRatioIcon() {
    return {
      width: 500,
      height: 500,
      fill: 'rgb(77, 102, 255)',
      path: 'M419.3,256.4H373v69.9h-69.9v46.3h116.2V256.4z M139.8,186.5h69.9v-46.3h-117v116.2H139v-69.9H139.8z M465.7,46.7H46.3C20.6,46.7,0,68,0,93.1V419c0,25.7,20.6,46.3,46.3,46.3h419.3c25.7,0,46.3-21.3,46.3-46.3V93.1C512,68,491.4,46.7,465.7,46.7z M465.7,419.7H46.3V93.1h419.3v326.6H465.7z',
      ascent: 300,
      descent: 0,
      transform: 'translate(0, -50)'
    };
  }

  getMaximizeIcon() {
    return {
      width: 1000,
      height: 1000,
      fill: 'rgb(77, 102, 255)',
      path: 'M920,80V436.38L771.51,287.89,559.4,500,500,440.6,712.11,228.49,563.62,80ZM500,559.4,440.6,500,228.49,712.11,80,563.62V920H436.38L287.89,771.51Z',
      ascent: 1000,
      descent: 0,
      transform: 'translate(0, -100)'
    };
  }

  getEmbedIcon = () => ({
    width: 24,
    height: 24,
    fill: 'rgb(77, 102, 255)',
    path: 'M22,0H2C.9,0,0,.9,0,2V22c0,1.1,.9,2,2,2H22c1.1,0,2-.9,2-2V2c0-1.1-.9-2-2-2ZM8.02,9.54l-2.59,2.59,2.59,2.58v2.83L2.6,12.13l5.42-5.42v2.83Zm3.11,11.59l-1.96-.4L12.91,3.13l1.96,.4-3.74,17.6Zm4.89-3.59v-2.83l2.59-2.58-2.59-2.59v-2.83l5.42,5.42-5.42,5.41Z',
  });


  getLogIcon(onOrOff: boolean) {
    if (!onOrOff) {
      return {
        width: 1000,
        path: 'M797,772a29.4,29.4,0,0,1-3.1-.16c-130-13.31-240.09-51.57-327.17-113.74-70.33-50.2-125.62-115.78-164.34-194.91C236.94,329.34,241.79,203.92,242,198.64A30,30,0,0,1,302,201.31h0c-.05,1.16-4.17,117.36,55.41,237.65,34.47,69.59,83.42,127.19,145.5,171.2,78.3,55.51,178.29,89.82,297.18,102A30,30,0,0,1,797,772Zm111,80.5H147.5V92H38v28H92.5v29H37v28H92.5v41H38v28H92.5v64H38v28H92.5V446H38v28H92.5V639H38v28H92.5V852.5H0v55H92.5V1000h55V907.5H908Z',
        ascent: 1000,
        descent: 0,
        transform: 'translate(0, -100)'
      };
    }
    return {
      width: 1000,
      path: 'M908,907.5H147.5V1000h-55V907.5H0v-55H92.5V120H37V92H147.5V852.5H908ZM883.79,239.14a30,30,0,0,0-41.65,8.07L672,499.21,471.48,411.78a59.49,59.49,0,0,0-117.89-.59l-154.22,71.6a30,30,0,1,0,25.26,54.42l151.74-70.45a59.48,59.48,0,0,0,71.85.33L667,562.5A29.91,29.91,0,0,0,679,565c.85,0,1.68,0,2.52-.12s1.65.11,2.47.11a30,30,0,0,0,24.89-13.21l183-271A30,30,0,0,0,883.79,239.14ZM894,627a30,30,0,0,0-41-11l-129.1,74.28a59.5,59.5,0,0,0-87.83,25.11L219.32,711H219a30,30,0,0,0-.31,60l424.43,4.47a59.48,59.48,0,0,0,106.65-30.82L883,668A30,30,0,0,0,894,627Z',
      ascent: 1000,
      descent: 0,
      transform: 'translate(0, -100)'
    };
  }

  getLogButtonTitle(onOrOff: boolean) {
    return `Switch to ${onOrOff ? 'Linear' : 'Logarithmic'} scale`;
  }

  private getAxisText(timeUnit: { time: number; str: string }) {
    switch (this.xAxisType) {
      case ScalarKeyEnum.Iter:
        return 'Iterations';
      case ScalarKeyEnum.IsoTime:
        return 'Wall Time';
      case ScalarKeyEnum.Timestamp:
        return (timeUnit && timeUnit.str) ? `${timeUnit.str} From Start` : 'Relative Time';
      default:
        return null;
    }
  }

  private getHideButtonTitle() {
    return this.chartElm.layout?.showlegend ? 'Show legend' : 'Hide legend';
  }

  private getLockRatioTitle() {
    return this.ratio ? 'Original Layout' : 'Auto Layout';
  }

  private maximizeGraph() {
    this.maximizeClicked.emit();
    this.zone.run(() => {
      this.dialog.open(GraphViewerComponent, {
        data: {
          ...(this.exportForReport && {embedFunction: (rect: DOMRect) => this.createEmbedCode.emit(rect)}),
          // signed url are updated after originChart was cloned - need to update images urls!
          chart: cloneDeep({
            ...this.originalChart,
            layout: {...this.originalChart.layout, images: this.chart.layout?.images}
          }),
          id: this.identifier,
          xAxisType: this.xAxisType,
          smoothWeight: this.smoothWeight,
          darkTheme: this.isDarkTheme,
          isCompare: this.isCompare,
        },
        panelClass: ['image-viewer-dialog', this.isDarkTheme ? 'dark-theme' : 'light-theme'],
        height: '100%',
        maxHeight: 'auto',
        width: '100%',
        maxWidth: 'auto'
      }).beforeClosed().subscribe(() => this.maximizeClicked.emit());
    });
  }

  private addParametersIfDarkTheme(object: Record<string, unknown>) {
    return this.isDarkTheme ? object : {};
  }

  private addIterationString(name: string, iter: number) {
    return name + ((iter || (this.graphsNumber > 1 && iter === 0)) ? ` - Iteration ${iter}` : '');
  }

  public repositionModeBar(singleGraphEl) {
    if (this.type === 'table') {
      this.modeBar = this.modeBar || this.chartElm.querySelector('.modebar-container');
      this.modeBar.style.right = `${singleGraphEl.scrollWidth - singleGraphEl.clientWidth - singleGraphEl.scrollLeft}px`;
    }
  }

  private downloadTableAsCSV() {
    const vals = this.chart?.data?.[0]?.cells?.values;
    const headers = this.chart?.data?.[0]?.header?.values;
    if (vals && headers) {
      let data = headers.flat().join(',') + '\n';
      for (let i = 0; i < vals[0].length; ++i) {
        for (let j = 0; j < headers.length; ++j) {
          data += `${vals[j][i]},`;
        }
        data = data.slice(0, -1) + '\n';
      }
      const exportName = `${this.chart.layout.title} - ${this.chart.layout.name}.csv`;
      data = 'data:text/csv;charset=utf-8,' + encodeURIComponent(data);
      download(data, exportName);
    }
  }

  public redrawPlot() {
    this.drawGraph$.next({forceRedraw: true, forceSkipReact: false});
  };
}