okengine 0.11.2 → 0.12.0

package/src/console/ui-next/src/components/charts/use-animated-series-path.ts

@@ -0,0 +1,155 @@
+"use client";
+
+import { animate, useReducedMotion } from "motion/react";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { LINE_LOADING_PULSE_EASE } from "./line-loading-timing";
+import {
+  computeSeriesPathPoints,
+  interpolateSeriesPathPoints,
+  type SeriesPathPoint,
+  seriesPathFromPoints,
+  seriesPathTransitionSignature,
+} from "./series-path-utils";
+
+// biome-ignore lint/suspicious/noExplicitAny: d3 curve factory type
+type CurveFactory = any;
+
+export interface UseAnimatedSeriesPathOptions {
+  renderData: Record<string, unknown>[];
+  xAccessor: (datum: Record<string, unknown>) => Date;
+  xScale: (value: Date) => number | undefined;
+  yScale: (value: number) => number | undefined;
+  dataKey: string;
+  curve: CurveFactory;
+  chartPhase: string;
+  durationMs: number;
+  innerWidth: number;
+  enabled: boolean;
+}
+
+export function useAnimatedSeriesPath({
+  renderData,
+  xAccessor,
+  xScale,
+  yScale,
+  dataKey,
+  curve,
+  chartPhase,
+  durationMs,
+  innerWidth,
+  enabled,
+}: UseAnimatedSeriesPathOptions) {
+  const reducedMotion = useReducedMotion();
+  const [animatedPoints, setAnimatedPoints] = useState<SeriesPathPoint[] | null>(null);
+  const displayedPointsRef = useRef<SeriesPathPoint[] | null>(null);
+  const animatingRef = useRef(false);
+
+  const xScaleDomain = useMemo(() => {
+    const scaleWithDomain = xScale as { domain?: () => [Date, Date] };
+    return scaleWithDomain.domain?.() ?? [new Date(0), new Date(0)];
+  }, [xScale]);
+
+  const transitionSignature = useMemo(
+    () =>
+      seriesPathTransitionSignature({
+        renderData,
+        xAccessor,
+        dataKey,
+        innerWidth,
+        xDomainMin: xScaleDomain[0]?.getTime?.() ?? 0,
+        xDomainMax: xScaleDomain[1]?.getTime?.() ?? 0,
+      }),
+    [renderData, xAccessor, dataKey, innerWidth, xScaleDomain],
+  );
+
+  const targetPoints = useMemo(
+    () => computeSeriesPathPoints(renderData, xAccessor, xScale, yScale, dataKey),
+    [renderData, xAccessor, xScale, yScale, dataKey],
+  );
+
+  const prevTransitionSignatureRef = useRef(transitionSignature);
+
+  useEffect(() => {
+    if (!animatingRef.current) {
+      displayedPointsRef.current = targetPoints;
+    }
+  }, [targetPoints]);
+
+  useEffect(() => {
+    const shouldAnimate =
+      enabled &&
+      !reducedMotion &&
+      chartPhase === "ready" &&
+      durationMs > 0 &&
+      renderData.length > 0;
+
+    if (!shouldAnimate) {
+      animatingRef.current = false;
+      setAnimatedPoints(null);
+      displayedPointsRef.current = targetPoints;
+      prevTransitionSignatureRef.current = transitionSignature;
+      return;
+    }
+
+    if (prevTransitionSignatureRef.current === transitionSignature) {
+      return;
+    }
+    prevTransitionSignatureRef.current = transitionSignature;
+
+    const fromPoints = displayedPointsRef.current ?? targetPoints;
+    if (fromPoints.length === 0) {
+      displayedPointsRef.current = targetPoints;
+      return;
+    }
+
+    animatingRef.current = true;
+    const fromSnapshot = fromPoints;
+
+    const control = animate(0, 1, {
+      duration: durationMs / 1000,
+      ease: [...LINE_LOADING_PULSE_EASE],
+      onUpdate: (progress) => {
+        const currentTarget = computeSeriesPathPoints(
+          renderData,
+          xAccessor,
+          xScale,
+          yScale,
+          dataKey,
+        );
+        const next = interpolateSeriesPathPoints(fromSnapshot, currentTarget, progress);
+        displayedPointsRef.current = next;
+        setAnimatedPoints(next);
+      },
+      onComplete: () => {
+        animatingRef.current = false;
+        displayedPointsRef.current = targetPoints;
+        setAnimatedPoints(null);
+      },
+    });
+
+    return () => {
+      control.stop();
+      animatingRef.current = false;
+    };
+  }, [
+    transitionSignature,
+    chartPhase,
+    durationMs,
+    enabled,
+    reducedMotion,
+    renderData,
+    xAccessor,
+    xScale,
+    yScale,
+    dataKey,
+    targetPoints,
+  ]);
+
+  const activePoints = animatedPoints ?? targetPoints;
+  const pathD = useMemo(() => seriesPathFromPoints(activePoints, curve), [activePoints, curve]);
+
+  return {
+    pathD,
+    isPathAnimating: animatedPoints != null,
+  };
+}

package/src/console/ui-next/src/components/charts/use-animated-y-domains.ts

@@ -0,0 +1,227 @@
+"use client";
+
+import { animate, useReducedMotion } from "motion/react";
+import { useEffect, useRef, useState } from "react";
+import type { ChartPhase } from "./chart-phase";
+import { LINE_LOADING_PULSE_EASE } from "./line-loading-timing";
+import {
+  domainsEqual,
+  isYDomainTweenPhase,
+  resolveAnimatedYDestinationDomains,
+  shouldTweenYDomain,
+  type YDomain,
+} from "./y-domain-utils";
+
+function lerpDomain(from: YDomain, to: YDomain, progress: number): YDomain {
+  return [from[0] + (to[0] - from[0]) * progress, from[1] + (to[1] - from[1]) * progress];
+}
+
+function snapDomains(
+  domains: Record<string, YDomain>,
+  setAnimatedByAxis: (domains: Record<string, YDomain>) => void,
+  animatedRef: { current: Record<string, YDomain> },
+) {
+  if (domainsEqual(animatedRef.current, domains)) {
+    return;
+  }
+  setAnimatedByAxis(domains);
+  animatedRef.current = domains;
+}
+
+function tweenDomains({
+  destination,
+  durationMs,
+  enabled,
+  reducedMotion,
+  animatedRef,
+  setAnimatedByAxis,
+  onSettled,
+}: {
+  destination: Record<string, YDomain>;
+  durationMs: number;
+  enabled: boolean;
+  reducedMotion: boolean | null;
+  animatedRef: { current: Record<string, YDomain> };
+  setAnimatedByAxis: (domains: Record<string, YDomain>) => void;
+  onSettled?: () => void;
+}) {
+  if (domainsEqual(animatedRef.current, destination)) {
+    onSettled?.();
+    return;
+  }
+
+  if (!enabled || reducedMotion) {
+    snapDomains(destination, setAnimatedByAxis, animatedRef);
+    onSettled?.();
+    return;
+  }
+
+  const axisIds = Object.keys(destination);
+  const fromSnapshot = animatedRef.current;
+
+  let needsTween = false;
+  for (const axisId of axisIds) {
+    const from = fromSnapshot[axisId] ?? destination[axisId] ?? ([0, 100] as YDomain);
+    const to = destination[axisId] ?? from;
+    if (shouldTweenYDomain(from, to)) {
+      needsTween = true;
+      break;
+    }
+  }
+
+  if (!needsTween) {
+    snapDomains(destination, setAnimatedByAxis, animatedRef);
+    onSettled?.();
+    return;
+  }
+
+  const fromByAxis: Record<string, YDomain> = {};
+  for (const axisId of axisIds) {
+    fromByAxis[axisId] = fromSnapshot[axisId] ?? destination[axisId] ?? [0, 100];
+  }
+
+  const control = animate(0, 1, {
+    duration: durationMs / 1000,
+    ease: [...LINE_LOADING_PULSE_EASE],
+    onUpdate: (progress) => {
+      const next: Record<string, YDomain> = {};
+      for (const axisId of axisIds) {
+        const from = fromByAxis[axisId] ?? destination[axisId] ?? ([0, 100] as YDomain);
+        const to = destination[axisId] ?? from;
+        next[axisId] = shouldTweenYDomain(from, to) ? lerpDomain(from, to, progress) : to;
+      }
+      animatedRef.current = next;
+      setAnimatedByAxis(next);
+    },
+    onComplete: () => {
+      snapDomains(destination, setAnimatedByAxis, animatedRef);
+      onSettled?.();
+    },
+  });
+
+  return control;
+}
+
+export interface UseAnimatedYDomainsOptions {
+  enabled: boolean;
+  durationMs: number;
+  chartPhase: ChartPhase;
+  skeletonByAxis: Record<string, YDomain>;
+  targetByAxis: Record<string, YDomain>;
+  onSettled?: () => void;
+  /** When true, tweens y-domains on target changes while the chart is in the ready phase (e.g. brush zoom). */
+  tweenOnTargetChange?: boolean;
+}
+
+export function useAnimatedYDomains({
+  enabled,
+  durationMs,
+  chartPhase,
+  skeletonByAxis,
+  targetByAxis,
+  onSettled,
+  tweenOnTargetChange = false,
+}: UseAnimatedYDomainsOptions): Record<string, YDomain> {
+  const reducedMotion = useReducedMotion();
+  const destinationByAxis = resolveAnimatedYDestinationDomains(
+    chartPhase,
+    skeletonByAxis,
+    targetByAxis,
+  );
+  const destinationRef = useRef(destinationByAxis);
+  destinationRef.current = destinationByAxis;
+  const skeletonRef = useRef(skeletonByAxis);
+  skeletonRef.current = skeletonByAxis;
+  const targetRef = useRef(targetByAxis);
+  targetRef.current = targetByAxis;
+
+  const [animatedByAxis, setAnimatedByAxis] = useState(destinationByAxis);
+  const animatedRef = useRef(animatedByAxis);
+  const prevPhaseRef = useRef(chartPhase);
+  const onSettledRef = useRef(onSettled);
+  onSettledRef.current = onSettled;
+
+  useEffect(() => {
+    animatedRef.current = animatedByAxis;
+  }, [animatedByAxis]);
+
+  useEffect(() => {
+    if (prevPhaseRef.current === chartPhase) {
+      return;
+    }
+    prevPhaseRef.current = chartPhase;
+
+    const settle = () => {
+      onSettledRef.current?.();
+    };
+
+    // Keep grid spacing frozen while the series exits the viewport.
+    if (chartPhase === "exiting") {
+      snapDomains(skeletonRef.current, setAnimatedByAxis, animatedRef);
+      return;
+    }
+    if (chartPhase === "exitingReady") {
+      snapDomains(targetRef.current, setAnimatedByAxis, animatedRef);
+      return;
+    }
+    if (chartPhase === "loading") {
+      snapDomains(skeletonRef.current, setAnimatedByAxis, animatedRef);
+      return;
+    }
+    if (chartPhase === "revealing" || chartPhase === "ready") {
+      snapDomains(targetRef.current, setAnimatedByAxis, animatedRef);
+      return;
+    }
+
+    if (!isYDomainTweenPhase(chartPhase)) {
+      return;
+    }
+
+    const control = tweenDomains({
+      destination: destinationRef.current,
+      durationMs,
+      enabled,
+      reducedMotion,
+      animatedRef,
+      setAnimatedByAxis,
+      onSettled: settle,
+    });
+
+    return () => control?.stop();
+  }, [chartPhase, durationMs, enabled, reducedMotion]);
+
+  const targetSignature = JSON.stringify(targetByAxis);
+  const prevTargetSignatureRef = useRef(targetSignature);
+
+  useEffect(() => {
+    const inLivePhase = chartPhase === "ready" || chartPhase === "revealing";
+
+    if (!inLivePhase) {
+      prevTargetSignatureRef.current = targetSignature;
+      return;
+    }
+
+    if (prevTargetSignatureRef.current === targetSignature) {
+      return;
+    }
+    prevTargetSignatureRef.current = targetSignature;
+
+    if (tweenOnTargetChange && chartPhase === "ready") {
+      const control = tweenDomains({
+        destination: targetRef.current,
+        durationMs,
+        enabled,
+        reducedMotion,
+        animatedRef,
+        setAnimatedByAxis,
+        onSettled: () => onSettledRef.current?.(),
+      });
+
+      return () => control?.stop();
+    }
+
+    snapDomains(targetRef.current, setAnimatedByAxis, animatedRef);
+  }, [chartPhase, durationMs, enabled, reducedMotion, targetSignature, tweenOnTargetChange]);
+
+  return animatedByAxis;
+}

package/src/console/ui-next/src/components/charts/use-chart-interaction.ts

@@ -0,0 +1,343 @@
+"use client";
+
+import { localPoint } from "@visx/event";
+import type { scaleLinear, scaleTime } from "@visx/scale";
+import { useCallback, useEffect, useRef, useState } from "react";
+import type { LineConfig, Margin, TooltipData } from "./chart-context";
+import { useScheduledTooltip } from "./use-scheduled-tooltip";
+import { normalizeYAxisId } from "./y-axis-scales";
+
+type ScaleTime = ReturnType<typeof scaleTime<number>>;
+type ScaleLinear = ReturnType<typeof scaleLinear<number>>;
+
+export interface ChartSelection {
+  startX: number;
+  endX: number;
+  startIndex: number;
+  endIndex: number;
+  active: boolean;
+}
+
+interface UseChartInteractionParams {
+  xScale: ScaleTime;
+  yScale: ScaleLinear;
+  yScales: Record<string, ScaleLinear>;
+  data: Record<string, unknown>[];
+  lines: LineConfig[];
+  margin: Margin;
+  xAccessor: (d: Record<string, unknown>) => Date;
+  bisectDate: (data: Record<string, unknown>[], date: Date, lo: number) => number;
+  canInteract: boolean;
+}
+
+interface ChartInteractionResult {
+  tooltipData: TooltipData | null;
+  setTooltipData: React.Dispatch<React.SetStateAction<TooltipData | null>>;
+  selection: ChartSelection | null;
+  clearSelection: () => void;
+  interactionHandlers: {
+    onMouseMove?: (event: React.MouseEvent<SVGGElement>) => void;
+    onMouseLeave?: () => void;
+    onMouseDown?: (event: React.MouseEvent<SVGGElement>) => void;
+    onMouseUp?: () => void;
+    onTouchStart?: (event: React.TouchEvent<SVGGElement>) => void;
+    onTouchMove?: (event: React.TouchEvent<SVGGElement>) => void;
+    onTouchEnd?: () => void;
+  };
+  interactionStyle: React.CSSProperties;
+}
+
+export function useChartInteraction({
+  xScale,
+  yScale,
+  yScales,
+  data,
+  lines,
+  margin,
+  xAccessor,
+  bisectDate,
+  canInteract,
+}: UseChartInteractionParams): ChartInteractionResult {
+  const [selection, setSelection] = useState<ChartSelection | null>(null);
+  const { tooltipData, setTooltipData, scheduleTooltip, clearTooltip, resetTooltipDedupe } =
+    useScheduledTooltip<TooltipData>();
+
+  const isDraggingRef = useRef(false);
+  const dragStartXRef = useRef<number>(0);
+  const lastHoveredXRef = useRef<number | null>(null);
+
+  const resolveTooltipFromX = useCallback(
+    (pixelX: number): TooltipData | null => {
+      const x0 = xScale.invert(pixelX);
+      const index = bisectDate(data, x0, 1);
+      const d0 = data[index - 1];
+      const d1 = data[index];
+
+      if (!d0) {
+        return null;
+      }
+
+      let d = d0;
+      let finalIndex = index - 1;
+      if (d1) {
+        const d0Time = xAccessor(d0).getTime();
+        const d1Time = xAccessor(d1).getTime();
+        if (x0.getTime() - d0Time > d1Time - x0.getTime()) {
+          d = d1;
+          finalIndex = index;
+        }
+      }
+
+      const yPositions: Record<string, number> = {};
+      for (const line of lines) {
+        const value = d[line.dataKey];
+        if (typeof value === "number") {
+          const axisScale = yScales[normalizeYAxisId(line.yAxisId)] ?? yScale;
+          yPositions[line.dataKey] = axisScale(value) ?? 0;
+        }
+      }
+
+      return {
+        point: d,
+        index: finalIndex,
+        x: xScale(xAccessor(d)) ?? 0,
+        yPositions,
+      };
+    },
+    [xScale, yScale, yScales, data, lines, xAccessor, bisectDate],
+  );
+
+  const resolveIndexFromX = useCallback(
+    (pixelX: number): number => {
+      const x0 = xScale.invert(pixelX);
+      const index = bisectDate(data, x0, 1);
+      const d0 = data[index - 1];
+      const d1 = data[index];
+      if (!d0) {
+        return 0;
+      }
+      if (d1) {
+        const d0Time = xAccessor(d0).getTime();
+        const d1Time = xAccessor(d1).getTime();
+        if (x0.getTime() - d0Time > d1Time - x0.getTime()) {
+          return index;
+        }
+      }
+      return index - 1;
+    },
+    [xScale, data, xAccessor, bisectDate],
+  );
+
+  const getChartX = useCallback(
+    (
+      event: React.MouseEvent<SVGGElement> | React.TouchEvent<SVGGElement>,
+      touchIndex = 0,
+    ): number | null => {
+      let point: { x: number; y: number } | null = null;
+
+      if ("touches" in event) {
+        const touch = event.touches[touchIndex];
+        if (!touch) {
+          return null;
+        }
+        const svg = event.currentTarget.ownerSVGElement;
+        if (!svg) {
+          return null;
+        }
+        point = localPoint(svg, touch as unknown as MouseEvent);
+      } else {
+        point = localPoint(event);
+      }
+
+      if (!point) {
+        return null;
+      }
+      return point.x - margin.left;
+    },
+    [margin.left],
+  );
+
+  const handleMouseMove = useCallback(
+    (event: React.MouseEvent<SVGGElement>) => {
+      const chartX = getChartX(event);
+      if (chartX === null) {
+        return;
+      }
+
+      if (isDraggingRef.current) {
+        const startX = Math.min(dragStartXRef.current, chartX);
+        const endX = Math.max(dragStartXRef.current, chartX);
+        setSelection({
+          startX,
+          endX,
+          startIndex: resolveIndexFromX(startX),
+          endIndex: resolveIndexFromX(endX),
+          active: true,
+        });
+        return;
+      }
+
+      lastHoveredXRef.current = chartX;
+      const tooltip = resolveTooltipFromX(chartX);
+      if (tooltip) {
+        scheduleTooltip(tooltip);
+      }
+    },
+    [getChartX, resolveTooltipFromX, resolveIndexFromX, scheduleTooltip],
+  );
+
+  const handleMouseLeave = useCallback(() => {
+    lastHoveredXRef.current = null;
+    clearTooltip();
+    if (isDraggingRef.current) {
+      isDraggingRef.current = false;
+    }
+    setSelection(null);
+  }, [clearTooltip]);
+
+  const handleMouseDown = useCallback(
+    (event: React.MouseEvent<SVGGElement>) => {
+      const chartX = getChartX(event);
+      if (chartX === null) {
+        return;
+      }
+      isDraggingRef.current = true;
+      dragStartXRef.current = chartX;
+      clearTooltip();
+      setSelection(null);
+    },
+    [getChartX, clearTooltip],
+  );
+
+  const handleMouseUp = useCallback(() => {
+    if (isDraggingRef.current) {
+      isDraggingRef.current = false;
+    }
+    setSelection(null);
+  }, []);
+
+  const handleTouchStart = useCallback(
+    (event: React.TouchEvent<SVGGElement>) => {
+      if (event.touches.length === 1) {
+        event.preventDefault();
+        const chartX = getChartX(event, 0);
+        if (chartX === null) {
+          return;
+        }
+        lastHoveredXRef.current = chartX;
+        const tooltip = resolveTooltipFromX(chartX);
+        if (tooltip) {
+          scheduleTooltip(tooltip);
+        }
+      } else if (event.touches.length === 2) {
+        event.preventDefault();
+        resetTooltipDedupe();
+        clearTooltip();
+        const x0 = getChartX(event, 0);
+        const x1 = getChartX(event, 1);
+        if (x0 === null || x1 === null) {
+          return;
+        }
+        const startX = Math.min(x0, x1);
+        const endX = Math.max(x0, x1);
+        setSelection({
+          startX,
+          endX,
+          startIndex: resolveIndexFromX(startX),
+          endIndex: resolveIndexFromX(endX),
+          active: true,
+        });
+      }
+    },
+    [
+      getChartX,
+      resolveTooltipFromX,
+      resolveIndexFromX,
+      scheduleTooltip,
+      resetTooltipDedupe,
+      clearTooltip,
+    ],
+  );
+
+  const handleTouchMove = useCallback(
+    (event: React.TouchEvent<SVGGElement>) => {
+      if (event.touches.length === 1) {
+        event.preventDefault();
+        const chartX = getChartX(event, 0);
+        if (chartX === null) {
+          return;
+        }
+        lastHoveredXRef.current = chartX;
+        const tooltip = resolveTooltipFromX(chartX);
+        if (tooltip) {
+          scheduleTooltip(tooltip);
+        }
+      } else if (event.touches.length === 2) {
+        event.preventDefault();
+        const x0 = getChartX(event, 0);
+        const x1 = getChartX(event, 1);
+        if (x0 === null || x1 === null) {
+          return;
+        }
+        const startX = Math.min(x0, x1);
+        const endX = Math.max(x0, x1);
+        setSelection({
+          startX,
+          endX,
+          startIndex: resolveIndexFromX(startX),
+          endIndex: resolveIndexFromX(endX),
+          active: true,
+        });
+      }
+    },
+    [getChartX, resolveTooltipFromX, resolveIndexFromX, scheduleTooltip],
+  );
+
+  const handleTouchEnd = useCallback(() => {
+    clearTooltip();
+    setSelection(null);
+  }, [clearTooltip]);
+
+  const clearSelection = useCallback(() => {
+    setSelection(null);
+  }, []);
+
+  // Re-anchor tooltip/crosshair when x-scale or visible data changes (e.g. brush zoom commit).
+  useEffect(() => {
+    if (!canInteract || lastHoveredXRef.current === null) {
+      return;
+    }
+    const tooltip = resolveTooltipFromX(lastHoveredXRef.current);
+    if (tooltip) {
+      scheduleTooltip(tooltip, `${tooltip.index}:${Math.round(tooltip.x)}`);
+      return;
+    }
+    clearTooltip();
+  }, [canInteract, clearTooltip, resolveTooltipFromX, scheduleTooltip]);
+
+  const interactionHandlers = canInteract
+    ? {
+        onMouseMove: handleMouseMove,
+        onMouseLeave: handleMouseLeave,
+        onMouseDown: handleMouseDown,
+        onMouseUp: handleMouseUp,
+        onTouchStart: handleTouchStart,
+        onTouchMove: handleTouchMove,
+        onTouchEnd: handleTouchEnd,
+      }
+    : {};
+
+  const interactionStyle: React.CSSProperties = {
+    cursor: canInteract ? "crosshair" : "default",
+    touchAction: "none",
+  };
+
+  return {
+    tooltipData,
+    setTooltipData,
+    selection,
+    clearSelection,
+    interactionHandlers,
+    interactionStyle,
+  };
+}