feat(plot): add shouldPinPlotXScaleToLogRange utility and update usePlotChart logic

Introduce a new utility function to determine if the X axis should be pinned to the full log range during incremental updates. Update the usePlotChart implementation to utilize this function, ensuring the X scale remains consistent while data is loading. Additionally, refine the scoped preflight CSS for better integration with the host application.

Author: joaner

src/features/panels/Plot/usePlotChart.test.ts

@@ -1,6 +1,7 @@
 import { describe, expect, it } from 'vitest';
 import {
   diffSeriesTopology,
+  shouldPinPlotXScaleToLogRange,
   shouldRemountForIncrementalSeriesUpdate,
   type SeriesSignature,
 } from './usePlotChart';
@@ -86,3 +87,19 @@ describe('shouldRemountForIncrementalSeriesUpdate', () => {
       .toBe(false);
   });
 });
+
+describe('shouldPinPlotXScaleToLogRange', () => {
+  const logRange = { min: 0, max: 55 };
+
+  it('pins when log range exists and following view is off', () => {
+    expect(shouldPinPlotXScaleToLogRange(logRange, 0)).toBe(true);
+  });
+
+  it('does not pin without log range', () => {
+    expect(shouldPinPlotXScaleToLogRange(undefined, 0)).toBe(false);
+  });
+
+  it('does not pin when playhead following owns the X axis', () => {
+    expect(shouldPinPlotXScaleToLogRange(logRange, 10)).toBe(false);
+  });
+});

src/features/panels/Plot/usePlotChart.ts

@@ -171,6 +171,25 @@ export function shouldRemountForIncrementalSeriesUpdate(
   return false;
 }
 
+/**
+ * Whether incremental updates should pin the X axis to the full log range.
+ * Skipped when playhead-following mode owns the X scale.
+ */
+export function shouldPinPlotXScaleToLogRange(
+  xRange: { min: number; max: number } | undefined,
+  followingViewWidthSec: number,
+): xRange is { min: number; max: number } {
+  return xRange != null && followingViewWidthSec <= 0;
+}
+
+/** Keep the X viewport on the full recording duration during range reads. */
+export function pinPlotXScaleToLogRange(
+  chart: uPlot,
+  xRange: { min: number; max: number },
+): void {
+  chart.setScale('x', xRange);
+}
+
 export function usePlotChart({
   containerRef,
   player,
@@ -228,8 +247,15 @@ export function usePlotChart({
       isLoading: () => loadingRef.current,
     });
 
-    uplotRef.current = mountPlotChart(container, dataset, options, xRange);
+    const chart = mountPlotChart(container, dataset, options, xRange);
+    uplotRef.current = chart;
     seriesSignaturesRef.current = seriesSignatures(dataset, hiddenSeries);
+    if (
+      loadingRef.current
+      && shouldPinPlotXScaleToLogRange(xRange, followingViewWidthRef.current)
+    ) {
+      pinPlotXScaleToLogRange(chart, xRange);
+    }
 
     const observer = new ResizeObserver(() => {
       const chart = uplotRef.current;
@@ -309,13 +335,32 @@ export function usePlotChart({
     // setData second arg = false avoids a hard scale reset every batch, which is
     // what made the chart flash while data was streaming in.
     chart.setData(dataset.data, false);
+    // setData(false) can shrink X to the loaded points only; pin to the full log
+    // range so the axis stays 0…duration while curves grow incrementally.
+    if (
+      loadingRef.current
+      && shouldPinPlotXScaleToLogRange(xRange, followingViewWidthRef.current)
+    ) {
+      pinPlotXScaleToLogRange(chart, xRange);
+    }
     // Style mutations are read at draw time, so force one rebuild+redraw to
     // surface the new width/dash/stroke immediately.
     if (diff.kind === 'styleUpdate') {
       chart.redraw(true);
+    } else if (loadingRef.current) {
+      chart.redraw(false);
     }
     seriesSignaturesRef.current = nextSignatures;
-  }, [config.followingViewWidthSec, config.xAxisMode, containerRef, dataset, destroyChart, hiddenSeries, mountChart]);
+  }, [
+    config.followingViewWidthSec,
+    config.xAxisMode,
+    containerRef,
+    dataset,
+    destroyChart,
+    hiddenSeries,
+    mountChart,
+    xRange,
+  ]);
 
   // When loading completes, force one Y-scale recompute so the locked-min/max
   // is replaced with the natural auto-fit range.

src/index.css

@@ -2,18 +2,22 @@
 @tailwind components;
 @tailwind utilities;
 
-/* ── Scoped preflight ─────────────────────────────────────────────
-   Replaces Tailwind's global CSS reset with one limited to
-   #rosview-root so it doesn't bleed into the host application.
-   ──────────────────────────────────────────────────────────────── */
+/* ── Scoped preflight (tailwind preflight: false in tailwind.config.js) ──
+   Limited to #rosview-root so resets never touch the host page.
+   Only box-sizing is applied on * — do NOT zero borders globally; libraries
+   such as uPlot and Dockview rely on border-* for chrome (e.g. hover crosshair).
+   Border color for Tailwind utilities comes from `#rosview-root * { border-border }`.
+   ─────────────────────────────────────────────────────────────────────── */
 @layer base {
-  #rosview-root *, #rosview-root ::before, #rosview-root ::after {
+  #rosview-root *,
+  #rosview-root ::before,
+  #rosview-root ::after {
     box-sizing: border-box;
-    border-width: 0;
-    border-style: solid;
-    border-color: hsl(var(--border));
   }
-  #rosview-root ::before, #rosview-root ::after { --tw-content: ''; }
+  #rosview-root ::before,
+  #rosview-root ::after {
+    --tw-content: '';
+  }
   #rosview-root {
     line-height: 1.5;
     -webkit-text-size-adjust: 100%;