Replace react-plotly.js with pltly's Plot, fix stddev bands with smoothing

- Remove `react-plotly.js` and `@types/react-plotly.js` dependencies
- Use pltly's `Plot` component (calls `Plotly.react()` directly)
- Bump `pltly` to `8ca11d0` (adds `onRelayout`/`onDoubleClick`/`onAfterPlot`
  callbacks, `Data[]` prop type, `plotly.js-dist-min` default loader)
- Bump `@types/plotly.js` to 3.0.10 to match pltly
- Switch `use-kbd` from GitHub dist to npm `^0.12.0`
- Fix stddev bands not showing when smoothing is active on raw data
  (`isRawData` guard now allows bands when `hasSmoothing`)
- Plotly is now code-split into its own chunk via dynamic import

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: ryan-williams

www/package.json

@@ -31,14 +31,13 @@
     "d3": "^7.9.0",
     "hyparquet": "github:runsascoded/hyparquet#6d0c51c423776ef04b21fab9f469fdc05a5dc4dd",
     "plotly.js": "github:runsascoded/plotly.js#f54c0537957a275ad24151b4a94c1a9ba4bd1878",
-    "pltly": "https://gitlab.com/runsascoded/js/pltly/-/archive/c923a595cb3a907cbf8f506665429edb6bca124e/pltly-c923a595cb3a907cbf8f506665429edb6bca124e.tar.gz",
+    "pltly": "https://gitlab.com/runsascoded/js/pltly/-/archive/6357eb6f6ae1473daeed999548f6262de550b381/pltly-6357eb6f6ae1473daeed999548f6262de550b381.tar.gz",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-icons": "^5.5.0",
-    "react-plotly.js": "^2.6.0",
     "recharts": "^3.1.0",
     "uplot": "^1.6.32",
-    "use-kbd": "https://github.com/runsascoded/use-kbd#34745efff8efdfd2c46e3e39d479a708aba704b2",
+    "use-kbd": "^0.12.0",
     "use-prms": "^0.4.1",
     "use-session-storage-state": "^19.0.1"
   },
@@ -48,10 +47,9 @@
     "@rdub/eslint-config": "^0.0.3",
     "@rdub/og-lambda": "0.1.0",
     "@types/node": "^24.10.1",
-    "@types/plotly.js": "^3.0.8",
+    "@types/plotly.js": "^3.0.10",
     "@types/react": "^19.1.8",
     "@types/react-dom": "^19.1.6",
-    "@types/react-plotly.js": "^2.6.3",
     "@vitejs/plugin-react": "^4.6.0",
     "@vitest/ui": "^3.2.4",
     "eslint": "^9.30.1",

www/pnpm-lock.yaml

@@ -1,7 +1,6 @@
 import { abs, ceil, max } from "@rdub/base"
-import { generateDateTicks, usePlotlyHoverDismiss, useTheme as usePlotTheme } from 'pltly'
+import { generateDateTicks, Plot, usePlotlyHoverDismiss, useTheme as usePlotTheme } from 'pltly'
 import { useState, useMemo, useCallback, useEffect, useRef, memo } from 'react'
-import Plot from 'react-plotly.js'
 import { useAction, useActions } from 'use-kbd'
 import { useUrlState } from 'use-prms'
 import { ChartControls, metricConfig, getRangeFloor } from './ChartControls'
@@ -806,7 +805,7 @@ export const AwairChart = memo(function AwairChart(
 
     // Stddev fill regions (±σ shaded areas) - from smoothed data when available
     // Split into segments at gaps (null values) so Plotly doesn't interpolate across gaps
-    if (!isRawData) {
+    if (!isRawData || hasSmoothing) {
       deviceData.forEach(d => {
         // Primary stddev bands
         const bandTimestamps = hasSmoothing ? d.smoothedTimestamps : d.timestamps
@@ -985,18 +984,13 @@ export const AwairChart = memo(function AwairChart(
           )
         })()}
         <Plot
-          className="plot-react"
           data={plotTraces}
           layout={{
             autosize: true,
             height: chartHeight,
-            // uirevision keeps pan/zoom state stable during re-renders
-            // Only changes when we explicitly want to reset the view
             uirevision: 'stable',
             xaxis: {
               type: 'date',
-              // Always set autorange: false to ensure consistent drag behavior
-              // If xAxisRange is null, Plotly will compute a default range
               autorange: !xAxisRange,
               ...(xAxisRange && { range: xAxisRange }),
               ...(data.length > 0 && {
@@ -1008,14 +1002,11 @@ export const AwairChart = memo(function AwairChart(
               linecolor: plotColors.gridcolor,
               zerolinecolor: plotColors.gridcolor,
               hoverformat: '',
-              // Spike line (vertical line at hover position)
               showspikes: true,
               spikemode: 'across',
               spikethickness: 0.5,
               spikecolor: plotColors.spikeColor,
               spikedash: 'solid',
-              // Use custom format for unified hover title - this overrides tick labels in hover
-              // Cast needed because unifiedhovertitle isn't in @types/plotly.js yet
               ...({ unifiedhovertitle: { text: '%{x|%b %-d, %-I:%M%p}' } } as object),
               ...(tickvals.length > 0 && {
                 tickvals: tickvals,
@@ -1025,9 +1016,8 @@ export const AwairChart = memo(function AwairChart(
             },
             yaxis: createYAxisConfig('left', leftAutoRangeDisplay, getEffectiveFloor(l.val)),
             ...(secondaryConfig && r.val !== 'none' && { yaxis2: createYAxisConfig('right', rightAutoRangeDisplay, getEffectiveFloor(r.val as Metric)) }),
-            // Legend is now in flow above plot, so minimal top margin needed
             margin: isOgMode
-              ? { l: 50, r: 50, t: 10, b: 115 }  // Minimal top (title is absolute), extra bottom for x-axis
+              ? { l: 50, r: 50, t: 10, b: 115 }
               : { l: 35, r: secondaryConfig ? 35 : 10, t: 5, b: 45 },
             hovermode: 'x unified',
             hoverlabel: {
@@ -1041,7 +1031,7 @@ export const AwairChart = memo(function AwairChart(
             plot_bgcolor: plotColors.plotBg,
             paper_bgcolor: plotColors.plotBg,
             dragmode: 'pan',
-            showlegend: false, // Custom legend rendered separately for pixel-based positioning
+            showlegend: false,
             selectdirection: 'h'
           }}
           config={{
@@ -1060,13 +1050,19 @@ export const AwairChart = memo(function AwairChart(
               scale: 1
             }
           }}
-          useResizeHandler={true}
+          disableTheme
+          disableLegendHover
+          disableSoloTrace
+          disableHoverDismiss
+          disableMobileFix
           onRelayout={handleRelayout}
           onDoubleClick={handleDoubleClick}
+          onInitialized={() => {
+            (window as Window & { chartReady?: boolean }).chartReady = true
+            setupHoverDismiss()
+          }}
           onAfterPlot={() => {
-            // Signal to og-lambda screenshot that the chart is ready
             (window as Window & { chartReady?: boolean }).chartReady = true
-            // Setup click-outside-to-dismiss hover behavior
             setupHoverDismiss()
           }}
         />

www/src/components/AwairChart.tsx

@@ -19,5 +19,5 @@ export default defineConfig({
       'plotly.js/dist/plotly': 'plotly.js/dist/plotly-basic.min.js',
       'plotly.js-dist-min': 'plotly.js/dist/plotly-basic.min.js',
     },
-  },
+  }
 })