Code cleanup, bug-squashing

emeeks · emeeks · commit a13c435e6595 · 2026-03-23T07:12:32.000-07:00
diff --git a/docs/src/App.js b/docs/src/App.js
@@ -278,6 +278,12 @@ export default function DocsApp() {
             <Route path="features/styling" element={<Navigate to="/theming/styling" replace />} />
             <Route path="features/theming" element={<Navigate to="/theming/theme-provider" replace />} />
 
+            {/* Redirects for legacy v1/v2 API routes (SEO: prevent stale search results) */}
+            <Route path="api/xyframe" element={<Navigate to="/frames/xy-frame" replace />} />
+            <Route path="api/ordinalframe" element={<Navigate to="/frames/ordinal-frame" replace />} />
+            <Route path="api/networkframe" element={<Navigate to="/frames/network-frame" replace />} />
+            <Route path="api/mark" element={<Navigate to="/api/charts" replace />} />
+
             {/* Cookbook routes */}
             <Route path="cookbook" element={<Outlet />}>
               <Route
diff --git a/src/components/charts/network/ForceDirectedGraph.tsx b/src/components/charts/network/ForceDirectedGraph.tsx
@@ -2,7 +2,7 @@
 import * as React from "react"
 import { useMemo, useCallback, forwardRef, useRef, useImperativeHandle } from "react"
 import StreamNetworkFrame from "../../stream/StreamNetworkFrame"
-import type { StreamNetworkFrameProps, StreamNetworkFrameHandle } from "../../stream/networkTypes"
+import type { StreamNetworkFrameProps, StreamNetworkFrameHandle, EdgePush } from "../../stream/networkTypes"
 import type { RealtimeFrameHandle } from "../../realtime/types"
 import { getColor, getSize } from "../shared/colorUtils"
 import type { BaseChartProps, ChartAccessor } from "../shared/types"
@@ -49,8 +49,8 @@ export interface ForceDirectedGraphProps<TNode extends Record<string, any> = Rec
 export const ForceDirectedGraph = forwardRef(function ForceDirectedGraph<TNode extends Record<string, any> = Record<string, any>, TEdge extends Record<string, any> = Record<string, any>>(props: ForceDirectedGraphProps<TNode, TEdge>, ref: React.Ref<RealtimeFrameHandle>) {
   const frameRef = useRef<StreamNetworkFrameHandle>(null)
   useImperativeHandle(ref, () => ({
-    push: (point) => frameRef.current?.push(point as any),
-    pushMany: (points) => frameRef.current?.pushMany(points as any),
+    push: (point) => frameRef.current?.push(point as EdgePush),
+    pushMany: (points) => frameRef.current?.pushMany(points as EdgePush[]),
     clear: () => frameRef.current?.clear(),
     getData: () => frameRef.current?.getTopology()?.nodes?.map((n: any) => n.data) ?? []
   }))
@@ -145,7 +145,7 @@ export const ForceDirectedGraph = forwardRef(function ForceDirectedGraph<TNode e
   const edgeStyle = useMemo(() => {
     return (d: Record<string, any>) => ({
       stroke: edgeColor,
-      strokeWidth: typeof edgeWidth === "number" ? edgeWidth : typeof edgeWidth === "function" ? edgeWidth(d as any) : d[edgeWidth] || 1,
+      strokeWidth: typeof edgeWidth === "number" ? edgeWidth : typeof edgeWidth === "function" ? edgeWidth(d) : d[edgeWidth] || 1,
       opacity: edgeOpacity
     })
   }, [edgeWidth, edgeColor, edgeOpacity])
diff --git a/src/components/charts/xy/ConnectedScatterplot.tsx b/src/components/charts/xy/ConnectedScatterplot.tsx
@@ -2,7 +2,7 @@
 import * as React from "react"
 import { useMemo, forwardRef, useRef, useImperativeHandle } from "react"
 import StreamXYFrame from "../../stream/StreamXYFrame"
-import type { StreamXYFrameProps, StreamXYFrameHandle } from "../../stream/types"
+import type { StreamXYFrameProps, StreamXYFrameHandle, SceneNode, StreamScales, StreamLayout } from "../../stream/types"
 import type { RealtimeFrameHandle } from "../../realtime/types"
 import type { BaseChartProps, AxisConfig, ChartAccessor } from "../shared/types"
 import { normalizeTooltip, type TooltipProp } from "../../Tooltip/Tooltip"
@@ -129,20 +129,40 @@ export const ConnectedScatterplot = forwardRef(function ConnectedScatterplot<TDa
 
   const rawData = (data || []) as Record<string, any>[]
 
-  // Sort by orderAccessor if provided (bounded data mode only)
+  // Sort by orderAccessor if provided, then stamp __orderIndex/__orderTotal
+  // on each datum so pointStyle can read the index directly (order-independent).
   const safeData = useMemo(() => {
-    if (!orderAccessor || rawData.length === 0) return rawData
-    const getOrder = typeof orderAccessor === "function"
-      ? orderAccessor as (d: any) => number | Date
-      : (d: any) => d[orderAccessor]
-    return [...rawData].sort((a, b) => {
-      const va = getOrder(a)
-      const vb = getOrder(b)
-      const na = va instanceof Date ? va.getTime() : +va
-      const nb = vb instanceof Date ? vb.getTime() : +vb
-      return na - nb
+    const xAcc = typeof xAccessor === "function" ? xAccessor : (d: any) => d[xAccessor]
+    const yAcc = typeof yAccessor === "function" ? yAccessor : (d: any) => d[yAccessor]
+    let sorted = rawData
+    if (orderAccessor && rawData.length > 0) {
+      const getOrder = typeof orderAccessor === "function"
+        ? orderAccessor as (d: any) => number | Date
+        : (d: any) => d[orderAccessor]
+      sorted = [...rawData].sort((a, b) => {
+        const va = getOrder(a)
+        const vb = getOrder(b)
+        const na = va instanceof Date ? va.getTime() : +va
+        const nb = vb instanceof Date ? vb.getTime() : +vb
+        return na - nb
+      })
+    }
+    // Count renderable points and stamp ordering metadata
+    const renderable = sorted.filter((p: any) => {
+      const x = xAcc(p); const y = yAcc(p)
+      return x != null && y != null && isFinite(x) && isFinite(y)
     })
-  }, [rawData, orderAccessor])
+    const total = renderable.length
+    let idx = 0
+    for (const d of sorted) {
+      const x = xAcc(d); const y = yAcc(d)
+      if (x != null && y != null && isFinite(x) && isFinite(y)) {
+        (d as any).__orderIndex = idx++;
+        (d as any).__orderTotal = total
+      }
+    }
+    return sorted
+  }, [rawData, orderAccessor, xAccessor, yAccessor])
 
   // ── Dev-mode warnings ─────────────────────────────────────────────────
   warnMissingField("ConnectedScatterplot", safeData, "xAccessor", xAccessor)
@@ -221,35 +241,48 @@ export const ConnectedScatterplot = forwardRef(function ConnectedScatterplot<TDa
     [connectingLineRenderer]
   )
 
+  // ── SVG pre-renderer for SSR (same logic as canvas, produces SVG elements) ──
+  const connectingLineSVGRenderer = useMemo(() => {
+    return (nodes: SceneNode[], _scales: StreamScales, _layout: StreamLayout): React.ReactNode => {
+      const pts = nodes.filter((n) => n.type === "point") as Array<{ x: number; y: number; datum?: any }>
+      if (pts.length < 2) return null
+      const count = pts.length
+      const halo = count < 100
+      const elements: React.ReactElement[] = []
+
+      for (let i = 0; i < count - 1; i++) {
+        const p0 = pts[i]
+        const p1 = pts[i + 1]
+        const color = viridisColor(i, count)
+        if (halo) {
+          elements.push(
+            <line key={`halo-${i}`} x1={p0.x} y1={p0.y} x2={p1.x} y2={p1.y}
+              stroke="white" strokeWidth={pointRadius + 2} strokeLinecap="round" opacity={0.5} />
+          )
+        }
+        elements.push(
+          <line key={`seg-${i}`} x1={p0.x} y1={p0.y} x2={p1.x} y2={p1.y}
+            stroke={color} strokeWidth={pointRadius} strokeLinecap="round" />
+        )
+      }
+      return <>{elements}</>
+    }
+  }, [pointRadius])
+
+  const svgPreRenderers = useMemo(
+    () => [connectingLineSVGRenderer],
+    [connectingLineSVGRenderer]
+  )
+
   // ── Point style — viridis colored, fixed radius ───────────────────────
   //
-  // pointStyle is called once per datum during scene build, in data order.
-  // We use a call counter (reset each time the function reference changes)
-  // so each datum gets the correct viridis position. The total count comes
-  // from getData() which reflects the pipeline's current windowed data.
-
-  const pointCallCounter = useRef({ idx: 0, total: 0 })
+  // Each datum has __orderIndex and __orderTotal stamped during sorting,
+  // so pointStyle reads the index directly without relying on call order.
 
   const basePointStyle = useMemo(() => {
-    const xAcc = typeof xAccessor === "function" ? xAccessor : (d: any) => d[xAccessor]
-    const yAcc = typeof yAccessor === "function" ? yAccessor : (d: any) => d[yAccessor]
     return (d: Record<string, any>) => {
-      const counter = pointCallCounter.current
-      // On first call of a batch, snapshot the renderable point count
-      // (filter out invalid x/y so gradient matches the connecting-line renderer)
-      if (counter.idx === 0) {
-        const allData = frameRef.current?.getData() ?? safeData
-        counter.total = allData.filter((p: any) => {
-          const x = xAcc(p); const y = yAcc(p)
-          return x != null && y != null && isFinite(x) && isFinite(y)
-        }).length
-      }
-      const n = counter.total
-      const i = counter.idx
-      counter.idx++
-      // Reset for next scene build cycle
-      if (counter.idx >= n) counter.idx = 0
-
+      const i = (d as any).__orderIndex ?? 0
+      const n = (d as any).__orderTotal ?? 1
       return {
         fill: n > 0 ? viridisColor(i, n) : "#6366f1",
         stroke: "white",
@@ -258,7 +291,7 @@ export const ConnectedScatterplot = forwardRef(function ConnectedScatterplot<TDa
         fillOpacity: 1,
       }
     }
-  }, [pointRadius, safeData.length, xAccessor, yAccessor])
+  }, [pointRadius])
 
   const pointStyle = useMemo(
     () => wrapStyleWithSelection(basePointStyle, effectiveSelectionHook, selection),
@@ -321,6 +354,7 @@ export const ConnectedScatterplot = forwardRef(function ConnectedScatterplot<TDa
     ...((linkedHover || onObservation) && { customHoverBehavior }),
     ...(pointIdAccessor && { pointIdAccessor }),
     canvasPreRenderers,
+    svgPreRenderers,
     ...(annotations && annotations.length > 0 && { annotations }),
     ...frameProps
   }
diff --git a/src/components/charts/xy/QuadrantChart.tsx b/src/components/charts/xy/QuadrantChart.tsx
@@ -2,7 +2,7 @@
 import * as React from "react"
 import { useMemo, forwardRef, useRef, useImperativeHandle } from "react"
 import StreamXYFrame from "../../stream/StreamXYFrame"
-import type { StreamXYFrameProps, StreamXYFrameHandle, CanvasRendererFn, StreamScales, StreamLayout } from "../../stream/types"
+import type { StreamXYFrameProps, StreamXYFrameHandle, CanvasRendererFn, SVGPreRendererFn, StreamScales, StreamLayout, SceneNode } from "../../stream/types"
 import type { RealtimeFrameHandle } from "../../realtime/types"
 import { getColor, getSize } from "../shared/colorUtils"
 import type { BaseChartProps, AxisConfig, ChartAccessor } from "../shared/types"
@@ -487,6 +487,65 @@ export const QuadrantChart = forwardRef(function QuadrantChart<TDatum extends Re
     return [...fullPreRenderers, ...userRenderers]
   }, [fullPreRenderers, frameProps.canvasPreRenderers])
 
+  // ── SVG pre-renderer for SSR (quadrant fills + center lines + labels) ──
+  const svgPreRenderers = useMemo((): SVGPreRendererFn[] => {
+    const clStyle = {
+      stroke: centerlineStyle.stroke || "#999",
+      strokeWidth: centerlineStyle.strokeWidth ?? 1,
+      dashArray: centerlineStyle.strokeDasharray
+        ? Array.isArray(centerlineStyle.strokeDasharray)
+          ? (centerlineStyle.strokeDasharray as number[]).join(",")
+          : centerlineStyle.strokeDasharray
+        : undefined,
+    }
+
+    return [(_nodes: SceneNode[], scales: StreamScales, layout: StreamLayout): React.ReactNode => {
+      if (!scales?.x || !scales?.y) return null
+      const w = layout.width
+      const h = layout.height
+      const xC = xCenter != null ? scales.x(xCenter) : w / 2
+      const yC = yCenter != null ? scales.y(yCenter) : h / 2
+      if (xCenter != null && !isFinite(xC)) return null
+      if (yCenter != null && !isFinite(yC)) return null
+      const cx = Math.max(0, Math.min(w, xC))
+      const cy = Math.max(0, Math.min(h, yC))
+
+      const quads = [
+        { config: quadrants.topLeft, x: 0, y: 0, w: cx, h: cy },
+        { config: quadrants.topRight, x: cx, y: 0, w: w - cx, h: cy },
+        { config: quadrants.bottomLeft, x: 0, y: cy, w: cx, h: h - cy },
+        { config: quadrants.bottomRight, x: cx, y: cy, w: w - cx, h: h - cy },
+      ]
+      const padding = 8
+      return (
+        <>
+          {quads.map((q, i) => q.w > 0 && q.h > 0 ? (
+            <rect key={`qf-${i}`} x={q.x} y={q.y} width={q.w} height={q.h}
+              fill={q.config.color} opacity={q.config.opacity ?? 0.08} />
+          ) : null)}
+          <line x1={cx} y1={0} x2={cx} y2={h}
+            stroke={clStyle.stroke} strokeWidth={clStyle.strokeWidth}
+            strokeDasharray={clStyle.dashArray} />
+          <line x1={0} y1={cy} x2={w} y2={cy}
+            stroke={clStyle.stroke} strokeWidth={clStyle.strokeWidth}
+            strokeDasharray={clStyle.dashArray} />
+          {showQuadrantLabels && (
+            <>
+              <text x={padding} y={padding + quadrantLabelSize} fill={quadrants.topLeft.color}
+                fontWeight={600} fontSize={quadrantLabelSize} opacity={0.5}>{quadrants.topLeft.label}</text>
+              <text x={w - padding} y={padding + quadrantLabelSize} fill={quadrants.topRight.color}
+                fontWeight={600} fontSize={quadrantLabelSize} opacity={0.5} textAnchor="end">{quadrants.topRight.label}</text>
+              <text x={padding} y={h - padding} fill={quadrants.bottomLeft.color}
+                fontWeight={600} fontSize={quadrantLabelSize} opacity={0.5}>{quadrants.bottomLeft.label}</text>
+              <text x={w - padding} y={h - padding} fill={quadrants.bottomRight.color}
+                fontWeight={600} fontSize={quadrantLabelSize} opacity={0.5} textAnchor="end">{quadrants.bottomRight.label}</text>
+            </>
+          )}
+        </>
+      )
+    }]
+  }, [xCenter, yCenter, quadrants, centerlineStyle, showQuadrantLabels, quadrantLabelSize])
+
   const streamProps: StreamXYFrameProps = {
     chartType: "scatter",
     ...(data != null && { data: safeData }),
@@ -527,6 +586,7 @@ export const QuadrantChart = forwardRef(function QuadrantChart<TDatum extends Re
     ...(pointIdAccessor && { pointIdAccessor }),
     ...(annotations && annotations.length > 0 && { annotations }),
     canvasPreRenderers: mergedPreRenderers,
+    svgPreRenderers,
     ...frameProps,
     // Override canvasPreRenderers after spread so user can't clobber quadrant renderers
     ...(mergedPreRenderers.length > 0 && { canvasPreRenderers: mergedPreRenderers }),
diff --git a/src/components/stream/OrdinalSVGOverlay.tsx b/src/components/stream/OrdinalSVGOverlay.tsx
@@ -109,11 +109,13 @@ export function OrdinalSVGUnderlay(props: OrdinalSVGUnderlayProps) {
     <svg
       width={totalWidth}
       height={totalHeight}
+      overflow="visible"
       style={{
         position: "absolute",
         top: 0,
         left: 0,
-        pointerEvents: "none"
+        pointerEvents: "none",
+        overflow: "visible"
       }}
     >
       <g transform={`translate(${margin.left},${margin.top})`}>
@@ -285,11 +287,13 @@ export function OrdinalSVGOverlay(props: OrdinalSVGOverlayProps) {
       role="img"
       width={totalWidth}
       height={totalHeight}
+      overflow="visible"
       style={{
         position: "absolute",
         top: 0,
         left: 0,
-        pointerEvents: "none"
+        pointerEvents: "none",
+        overflow: "visible"
       }}
     >
       <title>{typeof title === "string" ? title : "Ordinal Chart"}</title>
diff --git a/src/components/stream/SVGOverlay.tsx b/src/components/stream/SVGOverlay.tsx
@@ -429,11 +429,13 @@ export function SVGOverlay(props: SVGOverlayProps) {
       role="img"
       width={totalWidth}
       height={totalHeight}
+      overflow="visible"
       style={{
         position: "absolute",
         top: 0,
         left: 0,
-        pointerEvents: "none"
+        pointerEvents: "none",
+        overflow: "visible"
       }}
     >
       <title>{typeof title === "string" ? title : "XY Chart"}</title>
diff --git a/src/components/stream/StreamNetworkFrame.tsx b/src/components/stream/StreamNetworkFrame.tsx
@@ -1185,13 +1185,15 @@ const StreamNetworkFrame = forwardRef<
     >
       {backgroundGraphics && (
         <svg
+          overflow="visible"
           style={{
             position: "absolute",
             top: 0,
             left: 0,
             width: size[0],
             height: size[1],
-            pointerEvents: "none"
+            pointerEvents: "none",
+            overflow: "visible"
           }}
         >
           <g transform={`translate(${margin.left},${margin.top})`}>
diff --git a/src/components/stream/StreamXYFrame.tsx b/src/components/stream/StreamXYFrame.tsx
@@ -414,6 +414,7 @@ const StreamXYFrame = forwardRef<StreamXYFrameHandle, StreamXYFrameProps>(
       backgroundGraphics,
       foregroundGraphics,
       canvasPreRenderers,
+      svgPreRenderers,
       title,
       categoryAccessor,
       brush,
@@ -1060,6 +1061,9 @@ const StreamXYFrame = forwardRef<StreamXYFrameHandle, StreamXYFrameProps>(
               {background && (
                 <rect x={0} y={0} width={adjustedWidth} height={adjustedHeight} fill={background} />
               )}
+              {svgPreRenderers && scales && svgPreRenderers.map((renderer, ri) => (
+                <React.Fragment key={`svgpre-${ri}`}>{renderer(scene, scales, { width: adjustedWidth, height: adjustedHeight })}</React.Fragment>
+              ))}
               {scene.map((node, i) => xySceneNodeToSVG(node, i)).filter(Boolean)}
             </g>
           </svg>
diff --git a/src/components/stream/types.ts b/src/components/stream/types.ts
@@ -496,6 +496,8 @@ export interface StreamXYFrameProps<T = Record<string, any>> {
   // ── Custom canvas renderers ───────────────────
   /** Canvas renderers executed before the chart-type renderers (e.g. connecting lines under points) */
   canvasPreRenderers?: CanvasRendererFn[]
+  /** SVG pre-renderers for SSR — SVG equivalent of canvasPreRenderers, rendered under data marks */
+  svgPreRenderers?: SVGPreRendererFn[]
 
   // ── Title ────────────────────────────────────────
   title?: string | ReactNode
@@ -556,6 +558,13 @@ export type CanvasRendererFn = (
   layout: StreamLayout
 ) => void
 
+/** SVG equivalent of CanvasRendererFn — returns React elements for SSR/SVG rendering */
+export type SVGPreRendererFn = (
+  nodes: SceneNode[],
+  scales: StreamScales,
+  layout: StreamLayout
+) => ReactNode
+
 // ── Re-exports for convenience ─────────────────────────────────────────
 export type {
   ArrowOfTime,
