@spinnaker/kayenta 2025.3.0 → 2025.4.1

package/src/kayenta/report/detail/graph/semiotic/differenceArea.tsx

@@ -1,186 +0,0 @@
-import { scaleUtc } from 'd3-scale';
-import { curveStepAfter } from 'd3-shape';
-import * as React from 'react';
-import { XYFrame } from 'semiotic';
-
-import { vizConfig } from './config';
-import CustomAxisTickLabel from './customAxisTickLabel';
-import SecondaryTSXAxis from './secondaryTSXAxis';
-import { IMargin, ISemioticChartProps } from './semiotic.service';
-import * as utils from './utils';
-
-import './differenceArea.less';
-
-interface IDataPoint {
-  timestampMillis: number;
-  value: number;
-}
-
-interface IChartDataSet {
-  label: string;
-  color: string;
-  coordinates: IDataPoint[];
-}
-
-interface IInterimDataSet {
-  timestamp: number;
-  canary: number | string;
-  baseline: number | string;
-}
-
-interface IDifferenceAreaProps extends ISemioticChartProps {
-  millisSetBaseline: number[];
-}
-
-/*
- * Supplemental visualization in the time series view to highlight
- * Canary difference to baseline at any given timestamp
- */
-export default class DifferenceArea extends React.Component<IDifferenceAreaProps> {
-  private margin: IMargin = {
-    left: 60,
-    right: 20,
-    top: 8,
-  };
-
-  private chartHeight = 40; // chart height not including axes height
-  private headerHeight = 17;
-
-  private getChartData = () => {
-    const { metricSetPair } = this.props;
-    const {
-      values: { experiment, control },
-      scopes,
-    } = metricSetPair;
-
-    const stepMillis = scopes.control.stepMillis;
-    const maxDataPoints = Math.max(experiment.length, control.length);
-
-    // Align data sets in case canary & baseline have different lengths and/or starting time
-    const intDataSet: IInterimDataSet[] = Array(maxDataPoints)
-      .fill(0)
-      .map((_, i) => {
-        const e = experiment[i];
-        const c = control[i];
-        return {
-          timestamp: scopes.control.startTimeMillis + i * stepMillis,
-          canary: e,
-          baseline: c,
-        };
-      });
-
-    const baselineReferenceDataPoints: IDataPoint[] = intDataSet.map((ds: IInterimDataSet) => ({
-      timestampMillis: ds.timestamp,
-      value: 0,
-    }));
-
-    const differenceDataPoints: IDataPoint[] = intDataSet.map((ds: IInterimDataSet) => ({
-      timestampMillis: ds.timestamp,
-      value: typeof ds.canary === 'number' && typeof ds.baseline === 'number' ? ds.canary - ds.baseline : 0,
-    }));
-
-    return {
-      chartData: [
-        {
-          label: 'difference',
-          color: vizConfig.colors.canary,
-          coordinates: differenceDataPoints,
-        },
-        {
-          label: 'baselineReference',
-          color: vizConfig.colors.baseline,
-          coordinates: baselineReferenceDataPoints,
-        },
-      ],
-    };
-  };
-
-  private getSecondaryAxis = (millisOffset: number, millisSetBaseline: number[]) => {
-    const { parentWidth } = this.props;
-    const millisSetCanary = millisSetBaseline.map((ms: number) => ms + millisOffset);
-
-    return (
-      <SecondaryTSXAxis
-        margin={{ left: this.margin.left, right: this.margin.right, top: 0, bottom: 0 }}
-        width={parentWidth}
-        millisSet={millisSetCanary}
-        axisLabel={'canary'}
-        bottomOffset={0}
-      />
-    );
-  };
-
-  private getXAxisTotalHeight = (shouldUseSecondaryXAxis: boolean) => {
-    const { axisTickLineHeight, axisTickLabelHeight, axisLabelHeight } = vizConfig.timeSeries;
-
-    return shouldUseSecondaryXAxis
-      ? 2 * (axisLabelHeight + axisTickLabelHeight) + axisTickLineHeight
-      : axisTickLabelHeight;
-  };
-
-  public render() {
-    const { metricSetPair, parentWidth, millisSetBaseline } = this.props;
-
-    /*
-     * Generate the data needed for the graph components
-     */
-    const { scopes } = metricSetPair;
-    const { chartData } = this.getChartData();
-    const millisOffset = scopes.experiment.startTimeMillis - scopes.control.startTimeMillis;
-    const shouldUseSecondaryXAxis = millisOffset !== 0;
-
-    /*
-     * Build the visualization components
-     */
-    const xAxisTotalHeight = this.getXAxisTotalHeight(shouldUseSecondaryXAxis);
-    const computedConfig = {
-      lines: chartData,
-      size: [parentWidth, this.chartHeight + xAxisTotalHeight],
-      margin: { ...this.margin, bottom: xAxisTotalHeight },
-      lineType: {
-        type: 'area',
-        interpolator: curveStepAfter,
-      },
-      lineStyle: (ds: IChartDataSet) =>
-        ds.label === 'difference'
-          ? {
-              fill: ds.color,
-              fillOpacity: 0.6,
-            }
-          : {
-              stroke: ds.color,
-              strokeOpacity: 1,
-              strokeWidth: 2,
-              strokeDasharray: 5,
-            },
-      xAccessor: (d: IDataPoint) => new Date(d.timestampMillis),
-      yAccessor: 'value',
-      xScaleType: scaleUtc(),
-      axes: [
-        {
-          orient: 'left',
-          tickFormat: () => `\u0394 = 0`, // Δ = 0
-          tickValues: [0],
-        },
-        {
-          orient: 'bottom',
-          tickValues: utils.calculateDateTimeTicks(millisSetBaseline),
-          tickFormat: (d: number) => <CustomAxisTickLabel millis={d} />,
-          label: shouldUseSecondaryXAxis ? 'Baseline' : undefined,
-          className: shouldUseSecondaryXAxis ? 'baseline-dual-axis' : '',
-        },
-      ],
-      xExtent: [millisSetBaseline[0], millisSetBaseline[millisSetBaseline.length - 1]],
-    };
-
-    return (
-      <div className="difference-area">
-        <div className="chart-title" style={{ height: this.headerHeight }}>
-          Canary Value Differences from Baseline
-        </div>
-        <XYFrame {...computedConfig} />
-        {shouldUseSecondaryXAxis ? this.getSecondaryAxis(millisOffset, millisSetBaseline) : null}
-      </div>
-    );
-  }
-}

package/src/kayenta/report/detail/graph/semiotic/histogram.less

@@ -1,22 +0,0 @@
-.histogram {
-  .graph-container {
-    position: relative;
-    .bar-annotation {
-      text {
-        font-size: 12px;
-        font-weight: 600;
-      }
-      .annotation-connector {
-        display: none;
-      }
-      .note-line {
-        display: none;
-      }
-    }
-    g.ordinal-labels {
-      stroke: var(--color-text-primary);
-      font-size: 12px;
-      font-weight: 200;
-    }
-  }
-}

package/src/kayenta/report/detail/graph/semiotic/histogram.tsx

@@ -1,251 +0,0 @@
-import { extent, histogram } from 'd3-array';
-import { scaleLinear } from 'd3-scale';
-import * as React from 'react';
-import {
-  Annotation,
-  IAnnotationType,
-  IOrFrameHoverArgs,
-  IOrGroup,
-  IOrPiece,
-  IOrXyData,
-  ISemioticAnnotationArgs,
-  OrdinalFrame,
-} from 'semiotic';
-
-import ChartHeader from './chartHeader';
-import ChartLegend from './chartLegend';
-import CircleIcon from './circleIcon';
-import { vizConfig } from './config';
-import { IMargin, ISemioticChartProps, ITooltip } from './semiotic.service';
-import Tooltip from './tooltip';
-import * as utils from './utils';
-
-import './histogram.less';
-
-interface IInputDataPoint {
-  value: number;
-  group: string;
-}
-
-interface IChartDataPoint {
-  group: string;
-  count: number;
-  x0: number;
-  x1: number;
-}
-
-interface IAnnotationData extends IChartDataPoint {
-  type: string;
-}
-
-interface IHistogramState {
-  tooltip: ITooltip;
-}
-
-export default class Histogram extends React.Component<ISemioticChartProps, IHistogramState> {
-  public state: IHistogramState = {
-    tooltip: null,
-  };
-
-  private margin: IMargin = {
-    top: 20,
-    bottom: 20,
-    left: 60,
-    right: 10,
-  };
-
-  private decorateData = (dataPoints: number[], group: string): IInputDataPoint[] => {
-    return dataPoints.map((dp) => ({
-      group,
-      value: dp,
-    }));
-  };
-
-  /*
-   * Semiotic actually supports histogram as a "summary type" out of the box, but the customization is
-   * currently limited (e.g. it can't display the y-axis ticks & labels)
-   * Hence we're manually generating histogram data using D3 and display it as
-   * a grouped bar chart in semiotic
-   */
-  private generateChartData = () => {
-    const { metricSetPair } = this.props;
-    const filterFunc = (v: IInputDataPoint) => typeof v.value === 'number';
-    const baselineInput = this.decorateData(metricSetPair.values.control, 'baseline');
-    const canaryInput = this.decorateData(metricSetPair.values.experiment, 'canary');
-    const combinedInput = baselineInput.concat(canaryInput).filter(filterFunc);
-
-    const x = scaleLinear()
-      .domain(extent(combinedInput.map((o) => o.value)))
-      .nice();
-    const domain = x.domain() as [number, number];
-
-    // create histogram bins based on the combined data points
-    const histogramData = histogram<IInputDataPoint, number>()
-      .domain(domain)
-      .value((d: IInputDataPoint) => d.value)(combinedInput);
-
-    const chartData: IChartDataPoint[] = [];
-
-    // Convert it to ordinal data format for bar chart in semiotic
-    histogramData.forEach((h) => {
-      const { x0, x1 } = h;
-      const baselineBin = { group: 'baseline', x0, x1, count: 0 };
-      const canaryBin = { group: 'canary', x0, x1, count: 0 };
-      h.forEach((d) => (d.group === 'baseline' ? baselineBin.count++ : canaryBin.count++));
-      chartData.push(baselineBin);
-      chartData.push(canaryBin);
-    });
-
-    return chartData;
-  };
-
-  // Function factory to handle hover event
-  private createChartHoverHandler = (chartData: IChartDataPoint[]) => {
-    return (d: IOrFrameHoverArgs<IChartDataPoint>): void => {
-      if (d && d.type === 'column-hover') {
-        const x1Max: number = Math.max(...chartData.map((cd: IChartDataPoint) => cd.x1));
-        const xyData = d.column.xyData;
-        const x = xyData[1].xy.x + this.margin.left;
-        const halfHeight1 = xyData[0].xy.height / 2;
-        const halfHeight2 = xyData[1].xy.height / 2;
-        const y = vizConfig.height - this.margin.bottom - Math.min(halfHeight1, halfHeight2);
-        const { x0, x1 } = d.summary[0].data;
-        const tooltipRows = d.summary.map((s: IOrPiece<IChartDataPoint>) => {
-          const { group, count } = s.data;
-          const valueStyle = {
-            fontWeight: 'bold',
-          } as React.CSSProperties;
-
-          return (
-            <div key={group}>
-              <CircleIcon group={group} />
-              <span>{` ${group} count: `}</span>
-              <span style={valueStyle}>{count}</span>
-            </div>
-          );
-        });
-
-        let label = `For metric value more than / equal to ${utils.formatMetricValue(x0)} `;
-        label +=
-          x1 === x1Max
-            ? `and less than / equal to ${utils.formatMetricValue(x1)}`
-            : `and less than ${utils.formatMetricValue(x1)}`;
-
-        const tooltipContent = (
-          <div>
-            <div>{label}</div>
-            {tooltipRows}
-          </div>
-        );
-
-        this.setState({
-          tooltip: {
-            content: tooltipContent,
-            x,
-            y,
-          },
-        });
-      } else {
-        this.setState({ tooltip: null });
-      }
-    };
-  };
-
-  // generate bar value annotations object
-  private defineAnnotations = (chartData: IChartDataPoint[]) => {
-    const annotations = [] as IAnnotationData[];
-    chartData.forEach((d: IChartDataPoint) => {
-      if (d.count > 0) {
-        annotations.push({
-          type: 'bar-value-custom',
-          ...d,
-        });
-      }
-    });
-    return annotations;
-  };
-
-  // function to actually create the JSX elements based on the annotation object
-  private customAnnotationFunction = (
-    args: ISemioticAnnotationArgs<IAnnotationData, IOrGroup<IChartDataPoint>>,
-  ): JSX.Element | null => {
-    const { d, i, categories } = args;
-    if (d.type === 'bar-value-custom') {
-      const { x, y, width } = categories[d.x1].xyData.find(
-        (c: IOrXyData<IChartDataPoint>) => c.piece.data.group === d.group,
-      ).xy;
-      const noteData = {
-        x: x + width / 2,
-        y,
-        nx: x + width / 2,
-        ny: y - 1,
-        note: {
-          label: `${d.count}`,
-          wrap: 100,
-          align: 'middle',
-          orientation: 'topBottom',
-          padding: 0,
-          color: vizConfig.colors[d.group],
-          lineType: 'horizontal',
-        },
-        className: `bar-annotation`,
-      };
-      return <Annotation key={i} noteData={noteData} />;
-    } else {
-      return null;
-    }
-  };
-
-  private getChartProps = () => {
-    const { parentWidth } = this.props;
-    const chartData = this.generateChartData();
-
-    return {
-      size: [parentWidth, vizConfig.height],
-      margin: this.margin,
-      projection: 'vertical',
-      type: 'clusterbar',
-      oLabel: (v: string) => <text textAnchor="middle">{utils.formatMetricValue(parseFloat(v))}</text>,
-      oPadding: 20,
-      oAccessor: (d: IChartDataPoint) => d.x1,
-      style: (d: IChartDataPoint) => {
-        return {
-          fill: vizConfig.colors[d.group],
-          strokeWidth: 1,
-          stroke: vizConfig.colors.background,
-          strokeOpacity: 1,
-        };
-      },
-      customHoverBehavior: this.createChartHoverHandler(chartData),
-      data: this.generateChartData(),
-      axis: [
-        {
-          orient: 'left',
-          label: 'measurement count',
-          tickFormat: (d: number) => (d === 0 ? null : Math.abs(d)),
-        },
-      ],
-      rAccessor: (d: IChartDataPoint) => d.count,
-      annotations: this.defineAnnotations(chartData),
-      svgAnnotationRules: this.customAnnotationFunction,
-      hoverAnnotation: [] as IAnnotationType[],
-    };
-  };
-
-  public render() {
-    const { metricSetPair } = this.props;
-
-    return (
-      <div className="histogram">
-        <ChartHeader metric={metricSetPair.name} />
-        <ChartLegend />
-        <div className="graph-container">
-          <div className="canary-chart">
-            <OrdinalFrame {...this.getChartProps()} />
-          </div>
-          <Tooltip {...this.state.tooltip} />
-        </div>
-      </div>
-    );
-  }
-}

package/src/kayenta/report/detail/graph/semiotic/index.tsx

@@ -1,19 +0,0 @@
-import * as React from 'react';
-import { Suspense } from 'react';
-
-import { Spinner } from '@spinnaker/core';
-
-import { GraphType, IMetricSetPairGraphProps, metricSetPairGraphService } from '../metricSetPairGraph.service';
-const SemioticGraphLazy = React.lazy(() => import(/* webpackChunkName: "Lazy-KayentaGraphs" */ './semioticGraph'));
-
-const supportedGraphTypes: GraphType[] = [GraphType.TimeSeries, GraphType.Histogram, GraphType.BoxPlot];
-// Semiotic component registration
-metricSetPairGraphService.register({
-  name: 'semiotic',
-  handlesGraphType: (type) => supportedGraphTypes.includes(type),
-  getGraph: () => (props: IMetricSetPairGraphProps) => (
-    <Suspense fallback={<Spinner />}>
-      <SemioticGraphLazy {...props} />
-    </Suspense>
-  ),
-});

package/src/kayenta/report/detail/graph/semiotic/noValidDataSign.less

@@ -1,5 +0,0 @@
-.no-data-sign {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}

package/src/kayenta/report/detail/graph/semiotic/noValidDataSign.tsx

@@ -1,10 +0,0 @@
-import * as React from 'react';
-
-import { vizConfig } from './config';
-import './noValidDataSign.less';
-
-export default () => (
-  <div style={{ height: vizConfig.height }} className="no-data-sign">
-    No Valid Data is Available for This Metric
-  </div>
-);

package/src/kayenta/report/detail/graph/semiotic/secondaryTSXAxis.less

@@ -1,6 +0,0 @@
-.secondary-ts-x-axis {
-  position: absolute;
-  g.axis-title.x.axis.bottom text {
-    transform: translateY(-8px);
-  }
-}

package/src/kayenta/report/detail/graph/semiotic/secondaryTSXAxis.tsx

@@ -1,58 +0,0 @@
-import { scaleUtc } from 'd3-scale';
-import * as React from 'react';
-import { Axis } from 'semiotic';
-
-import { vizConfig } from './config';
-import CustomAxisTickLabel from './customAxisTickLabel';
-import { IMargin } from './semiotic.service';
-import * as utils from './utils';
-
-import './secondaryTSXAxis.less';
-
-interface ISecondaryTSXAxisProps {
-  margin: IMargin;
-  width: number;
-  millisSet: number[];
-  axisLabel?: string;
-  bottomOffset: number;
-}
-
-/*
- * Secondary X Axis for Time Series Graph
- * Used when canary and baseline have different start time. We can overlay this axis component
- * on the main graph component
- */
-export default class SecondaryTSXAxis extends React.Component<ISecondaryTSXAxisProps> {
-  public render() {
-    const { margin, width, millisSet, axisLabel, bottomOffset } = this.props;
-
-    const { axisTickLineHeight, axisTickLabelHeight, axisLabelHeight } = vizConfig.timeSeries;
-
-    const extent = [millisSet[0], millisSet[millisSet.length - 1]].map((ms: number) => new Date(ms));
-    const totalAxisHeight = axisTickLabelHeight + axisTickLineHeight + (axisLabel ? axisLabelHeight : 0);
-    const netWidth = width - margin.left - margin.right;
-    const range = [0, netWidth];
-    const containerStyle = {
-      bottom: bottomOffset,
-    };
-
-    const svgWrapperStyle = {
-      transform: `translateX(${margin.left}px)`,
-    };
-    return (
-      <svg className="axis secondary-ts-x-axis" width={width} height={totalAxisHeight} style={containerStyle}>
-        <g className="wrapper" style={svgWrapperStyle}>
-          <Axis
-            className="x axis bottom canary-dual-axis"
-            size={[netWidth, axisTickLineHeight]}
-            scale={scaleUtc().domain(extent).range(range)}
-            orient="bottom"
-            label="Canary"
-            tickValues={utils.calculateDateTimeTicks(millisSet)}
-            tickFormat={(d: number) => <CustomAxisTickLabel millis={d} />}
-          />
-        </g>
-      </svg>
-    );
-  }
-}

package/src/kayenta/report/detail/graph/semiotic/semioticGraph.less

@@ -1,53 +0,0 @@
-@import './config.less';
-
-.semiotic-graph {
-  margin-bottom: 8px;
-  .visualization-layer {
-    shape-rendering: crispedges;
-    .background-graphics {
-      .axis-tick-lines {
-        stroke: @grid-color;
-        opacity: 0.1;
-      }
-      .axis-title text {
-        letter-spacing: 1.5px;
-      }
-    }
-  }
-
-  .axis {
-    font-size: 12px;
-    font-weight: 400;
-    fill: @axis-color;
-    .axis-title.left.y text {
-      letter-spacing: 1.5px;
-    }
-    .x.axis.bottom text.axis-label {
-      transform: translateY(-10px);
-    }
-    .x.axis.bottom text.axis-label:nth-child(2) {
-      transform: translateY(5px);
-    }
-  }
-
-  .chart-header {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    .prefix {
-      font-weight: 600;
-    }
-  }
-
-  .chart-title {
-    display: flex;
-    justify-content: center;
-    flex-direction: row;
-    font-size: 12px;
-  }
-
-  .graph-container {
-    position: relative;
-  }
-}

package/src/kayenta/report/detail/graph/semiotic/semioticGraph.tsx

@@ -1,49 +0,0 @@
-import * as React from 'react';
-import ContainerDimensions from 'react-container-dimensions';
-
-import BoxPlot from './boxplot';
-import Histogram from './histogram';
-import { GraphType, IMetricSetPairGraphProps } from '../metricSetPairGraph.service';
-import NoValidDataSign from './noValidDataSign';
-import TimeSeries from './timeSeries';
-
-import './semioticGraph.less';
-
-export default class SemioticGraph extends React.Component<IMetricSetPairGraphProps> {
-  private fetchChart = (parentWidth: number) => {
-    const {
-      type,
-      metricSetPair: {
-        values: { control, experiment },
-      },
-    } = this.props;
-    const chartProps = {
-      ...this.props,
-      parentWidth,
-    };
-    const filterInvalidValues = (data: number[]) => data.filter((v) => typeof v === 'number');
-
-    if (filterInvalidValues(control).length === 0 && filterInvalidValues(experiment).length === 0) {
-      return <NoValidDataSign />;
-    }
-
-    switch (type) {
-      case GraphType.TimeSeries:
-        return <TimeSeries {...chartProps} />;
-      case GraphType.Histogram:
-        return <Histogram {...chartProps} />;
-      case GraphType.BoxPlot:
-        return <BoxPlot {...chartProps} />;
-      default:
-        return null;
-    }
-  };
-
-  public render() {
-    return (
-      <div className="semiotic-graph">
-        <ContainerDimensions>{({ width }: { width: number }) => this.fetchChart(width)}</ContainerDimensions>
-      </div>
-    );
-  }
-}