feat: add click-and-drag zoom to bandwidth and stream count charts

Add useChartZoom hook that enables click-and-drag time range selection
on the BandwidthChart with synchronized zoom on the StreamCountChart.
Includes 10px drag threshold, 30-second minimum selection, right-to-left
normalization, blue ReferenceArea overlay during selection, tooltip
suppression while dragging, zoom-aware XAxis formatting (HH:mm:ss when
zoomed ≤1hr), and text selection prevention during drag. Three reset
mechanisms: toolbar button, double-click, or time range dropdown change.

Author: coreyeaston

frontend/src/components/ActiveStreams.tsx

@@ -27,6 +27,7 @@ import {
 import { Play, Pause, StopCircle, Loader2, AlertCircle, X } from 'lucide-react';
 import { StreamCountChart } from './StreamCountChart';
 import type { TimeRange, DataInterval } from './BandwidthChart';
+import type { ZoomRange } from '@/hooks/useChartZoom';
 import { formatInTimeZone } from 'date-fns-tz';
 
 const getStateIcon = (state: string) => {
@@ -58,9 +59,10 @@ const getStateBadgeVariant = (state: string): "default" | "secondary" | "destruc
 interface ActiveStreamsProps {
   timeRange: TimeRange;
   dataInterval: DataInterval;
+  zoomRange?: ZoomRange | null;
 }
 
-export const ActiveStreams: React.FC<ActiveStreamsProps> = ({ timeRange, dataInterval }) => {
+export const ActiveStreams: React.FC<ActiveStreamsProps> = ({ timeRange, dataInterval, zoomRange }) => {
   const { user } = useAuth();
   const isAdmin = user?.role === 'admin';
 
@@ -119,7 +121,7 @@ export const ActiveStreams: React.FC<ActiveStreamsProps> = ({ timeRange, dataInt
   if (isLoading) {
     return (
       <>
-        <StreamCountChart timeRange={timeRange} dataInterval={dataInterval} />
+        <StreamCountChart timeRange={timeRange} dataInterval={dataInterval} zoomRange={zoomRange} />
         <Card>
           <CardContent className="flex justify-center p-8">
             <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
@@ -131,7 +133,7 @@ export const ActiveStreams: React.FC<ActiveStreamsProps> = ({ timeRange, dataInt
 
   return (
     <>
-      <StreamCountChart timeRange={timeRange} dataInterval={dataInterval} />
+      <StreamCountChart timeRange={timeRange} dataInterval={dataInterval} zoomRange={zoomRange} />
       <Card>
       <CardHeader>
         <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">

frontend/src/components/BandwidthChart.tsx

@@ -9,6 +9,7 @@ import {
   Legend,
   ResponsiveContainer,
   ReferenceLine,
+  ReferenceArea,
   Line,
 } from 'recharts';
 import { formatInTimeZone } from 'date-fns-tz';
@@ -24,7 +25,8 @@ import {
 } from '@/components/ui/select';
 import { Alert, AlertDescription } from '@/components/ui/alert';
 import { Button } from '@/components/ui/button';
-import { Loader2, AlertCircle, Layers, BarChart3, ArrowUpDown } from 'lucide-react';
+import { Loader2, AlertCircle, Layers, BarChart3, ArrowUpDown, ZoomOut } from 'lucide-react';
+import { useChartZoom, type ZoomRange } from '@/hooks/useChartZoom';
 
 // Gradient ID mapping for each client
 const DOWNLOAD_GRADIENT_IDS: Record<string, string> = {
@@ -137,6 +139,7 @@ interface BandwidthChartProps {
   dataInterval: DataInterval;
   setDataInterval: (interval: DataInterval) => void;
   timeRanges: TimeRange[];
+  onZoomChange?: (zoomRange: ZoomRange | null) => void;
 }
 
 // Default visible series configuration
@@ -188,6 +191,7 @@ export const BandwidthChart: React.FC<BandwidthChartProps> = ({
   dataInterval,
   setDataInterval,
   timeRanges,
+  onZoomChange,
 }) => {
   const [rawData, setRawData] = useState<ChartDataPoint[]>([]);
   const [isInitialLoad, setIsInitialLoad] = useState(true);
@@ -211,6 +215,26 @@ export const BandwidthChart: React.FC<BandwidthChartProps> = ({
     return [];
   });
 
+  // Chart zoom state
+  const {
+    isSelecting,
+    selectionStart,
+    selectionEnd,
+    zoomRange,
+    isZoomed,
+    handleMouseDown: zoomMouseDown,
+    handleMouseMove: zoomMouseMove,
+    handleMouseUp: zoomMouseUp,
+    handleDoubleClick: zoomDoubleClick,
+    resetZoom,
+    filterDataByZoom,
+  } = useChartZoom();
+
+  // Notify parent of zoom range changes
+  useEffect(() => {
+    onZoomChange?.(zoomRange);
+  }, [zoomRange, onZoomChange]);
+
   // Save stacking preferences to localStorage
   useEffect(() => {
     localStorage.setItem('speedarr_chart_stacked', JSON.stringify(stackChart));
@@ -377,17 +401,20 @@ export const BandwidthChart: React.FC<BandwidthChartProps> = ({
     }
   }, [visibleSeries]);
 
-  // Memoize aggregation - only recomputes when rawData or dataInterval changes
+  // Apply zoom filter before aggregation
+  const zoomedRawData = useMemo(() => filterDataByZoom(rawData), [rawData, filterDataByZoom]);
+
+  // Memoize aggregation - only recomputes when zoomedRawData or dataInterval changes
   const aggregatedData = useMemo(() => {
-    if (rawData.length === 0) return [];
-    if (dataInterval === 'raw') return rawData;
+    if (zoomedRawData.length === 0) return [];
+    if (dataInterval === 'raw') return zoomedRawData;
 
     const intervalMinutes = dataInterval as number;
     const intervalMs = intervalMinutes * 60 * 1000;
     const buckets: Map<number, ChartDataPoint[]> = new Map();
 
     // Group data points into time buckets
-    rawData.forEach((point) => {
+    zoomedRawData.forEach((point) => {
       const timestamp = new Date(point.timestamp).getTime();
       const bucketKey = Math.floor(timestamp / intervalMs) * intervalMs;
 
@@ -433,7 +460,7 @@ export const BandwidthChart: React.FC<BandwidthChartProps> = ({
     });
 
     return aggregated.sort((a, b) => new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime());
-  }, [rawData, dataInterval]);
+  }, [zoomedRawData, dataInterval]);
 
   const fetchData = useCallback(async () => {
     setError('');
@@ -551,13 +578,27 @@ export const BandwidthChart: React.FC<BandwidthChartProps> = ({
   }, [fetchData]);
 
 
+  // Reset zoom when time range dropdown changes
+  useEffect(() => {
+    resetZoom();
+  }, [timeRange, resetZoom]);
+
+  // Calculate zoomed duration for XAxis formatting
+  const zoomedDurationHours = useMemo(() => {
+    if (!isZoomed || zoomedRawData.length < 2) return null;
+    const first = new Date((zoomedRawData[0].timestamp.endsWith('Z') ? zoomedRawData[0].timestamp : zoomedRawData[0].timestamp + 'Z')).getTime();
+    const last = new Date((zoomedRawData[zoomedRawData.length - 1].timestamp.endsWith('Z') ? zoomedRawData[zoomedRawData.length - 1].timestamp : zoomedRawData[zoomedRawData.length - 1].timestamp + 'Z')).getTime();
+    return (last - first) / (1000 * 60 * 60);
+  }, [isZoomed, zoomedRawData]);
+
   const formatXAxis = (timestamp: string) => {
     const tz = Intl.DateTimeFormat().resolvedOptions().timeZone;
     // Ensure timestamp is parsed as UTC (API returns UTC without 'Z' suffix)
     const utcTimestamp = timestamp.endsWith('Z') ? timestamp : timestamp + 'Z';
-    if (timeRange.hours <= 6) {
-      return formatInTimeZone(new Date(utcTimestamp), tz, 'HH:mm');
-    } else if (timeRange.hours <= 24) {
+    const effectiveHours = zoomedDurationHours ?? timeRange.hours;
+    if (effectiveHours <= 1) {
+      return formatInTimeZone(new Date(utcTimestamp), tz, 'HH:mm:ss');
+    } else if (effectiveHours <= 24) {
       return formatInTimeZone(new Date(utcTimestamp), tz, 'HH:mm');
     } else {
       return formatInTimeZone(new Date(utcTimestamp), tz, 'MM/dd HH:mm');
@@ -679,6 +720,19 @@ export const BandwidthChart: React.FC<BandwidthChartProps> = ({
               <ArrowUpDown className="h-4 w-4" aria-hidden="true" />
               {flipped ? 'UL on Top' : 'DL on Top'}
             </Button>
+            {isZoomed && (
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={resetZoom}
+                className="gap-2"
+                title="Reset zoom to full time range"
+                aria-label="Reset zoom"
+              >
+                <ZoomOut className="h-4 w-4" aria-hidden="true" />
+                Reset Zoom
+              </Button>
+            )}
           </div>
         </div>
       </CardHeader>
@@ -706,11 +760,17 @@ export const BandwidthChart: React.FC<BandwidthChartProps> = ({
               <AlertDescription>All metrics are hidden. Click on a legend item below to show data.</AlertDescription>
             </Alert>
           )}
+          <div style={{ touchAction: isSelecting ? 'none' : 'pan-y', userSelect: 'none', WebkitUserSelect: 'none' }}>
           <ResponsiveContainer width="100%" height={700}>
               <ComposedChart
                 key={`chart-${flipped}`}
                 data={data}
                 margin={{ top: 10, right: 10, left: 10, bottom: 20 }}
+                onMouseDown={zoomMouseDown}
+                onMouseMove={zoomMouseMove}
+                onMouseUp={zoomMouseUp}
+                onDoubleClick={zoomDoubleClick}
+                style={{ cursor: isSelecting ? 'col-resize' : 'crosshair' }}
               >
                 <defs key={`chart-defs-${flipped}`}>
                   {/* Download gradients - only for enabled clients */}
@@ -792,6 +852,7 @@ export const BandwidthChart: React.FC<BandwidthChartProps> = ({
                   allowDataOverflow={!!domainExtent}
                 />
                 <Tooltip
+                  active={isSelecting ? false : undefined}
                   formatter={formatTooltip}
                   labelFormatter={(label) => {
                     const utcLabel = String(label).endsWith('Z') ? label : label + 'Z';
@@ -817,6 +878,17 @@ export const BandwidthChart: React.FC<BandwidthChartProps> = ({
                   stroke="#999"
                   strokeWidth={2}
                 />
+                {isSelecting && selectionStart !== null && selectionEnd !== null && (
+                  <ReferenceArea
+                    yAxisId="left"
+                    x1={new Date(Math.min(selectionStart, selectionEnd)).toISOString().replace('Z', '')}
+                    x2={new Date(Math.max(selectionStart, selectionEnd)).toISOString().replace('Z', '')}
+                    fill="#3b82f6"
+                    fillOpacity={0.15}
+                    stroke="#3b82f6"
+                    strokeOpacity={0.4}
+                  />
+                )}
                 {/* Per-client download limit lines - only show for enabled clients */}
                 {isClientEnabled('qbittorrent') && (
                   <Line
@@ -1050,6 +1122,7 @@ export const BandwidthChart: React.FC<BandwidthChartProps> = ({
                 })}
               </ComposedChart>
             </ResponsiveContainer>
+          </div>
           </>
         )}
       </CardContent>

frontend/src/components/StreamCountChart.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useMemo } from 'react';
 import {
   LineChart,
   Line,
@@ -15,13 +15,15 @@ import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Alert, AlertDescription } from '@/components/ui/alert';
 import { Loader2, AlertCircle } from 'lucide-react';
 import type { TimeRange, DataInterval } from './BandwidthChart';
+import { filterDataByZoomRange, type ZoomRange } from '@/hooks/useChartZoom';
 
 interface StreamCountChartProps {
   timeRange: TimeRange;
   dataInterval: DataInterval;
+  zoomRange?: ZoomRange | null;
 }
 
-export const StreamCountChart: React.FC<StreamCountChartProps> = ({ timeRange, dataInterval }) => {
+export const StreamCountChart: React.FC<StreamCountChartProps> = ({ timeRange, dataInterval, zoomRange }) => {
   const [rawData, setRawData] = useState<ChartDataPoint[]>([]);
   const [data, setData] = useState<any[]>([]);
   const [isInitialLoad, setIsInitialLoad] = useState(true);
@@ -73,37 +75,49 @@ export const StreamCountChart: React.FC<StreamCountChartProps> = ({ timeRange, d
     }
   };
 
-  // Process data when interval changes or raw data updates
+  // Apply zoom filter before processing
+  const zoomedRawData = useMemo(() => filterDataByZoomRange(rawData, zoomRange ?? null), [rawData, zoomRange]);
+
+  // Process data when interval changes or zoomed data updates
   useEffect(() => {
-    if (rawData.length === 0) {
+    if (zoomedRawData.length === 0) {
       setData([]);
       return;
     }
 
     // Aggregate or use raw data based on interval
     const processedData = dataInterval === 'raw'
-      ? rawData.map(point => ({
+      ? zoomedRawData.map(point => ({
           timestamp: point.timestamp,
           stream_count: point.active_streams_count || 0,
         }))
-      : aggregateData(rawData, dataInterval);
+      : aggregateData(zoomedRawData, dataInterval);
 
     setData(processedData);
-  }, [rawData, dataInterval]);
+  }, [zoomedRawData, dataInterval]);
 
   useEffect(() => {
     fetchData();
     const interval = setInterval(fetchData, 30000); // Refresh every 30s
     return () => clearInterval(interval);
   }, [timeRange.hours]);
 
+  // Calculate zoomed duration for XAxis formatting
+  const zoomedDurationHours = useMemo(() => {
+    if (!zoomRange || zoomedRawData.length < 2) return null;
+    const first = new Date((zoomedRawData[0].timestamp.endsWith('Z') ? zoomedRawData[0].timestamp : zoomedRawData[0].timestamp + 'Z')).getTime();
+    const last = new Date((zoomedRawData[zoomedRawData.length - 1].timestamp.endsWith('Z') ? zoomedRawData[zoomedRawData.length - 1].timestamp : zoomedRawData[zoomedRawData.length - 1].timestamp + 'Z')).getTime();
+    return (last - first) / (1000 * 60 * 60);
+  }, [zoomRange, zoomedRawData]);
+
   const formatXAxis = (timestamp: string) => {
     const tz = Intl.DateTimeFormat().resolvedOptions().timeZone;
     // Ensure timestamp is parsed as UTC (API returns UTC without 'Z' suffix)
     const utcTimestamp = timestamp.endsWith('Z') ? timestamp : timestamp + 'Z';
-    if (timeRange.hours <= 6) {
-      return formatInTimeZone(new Date(utcTimestamp), tz, 'HH:mm');
-    } else if (timeRange.hours <= 24) {
+    const effectiveHours = zoomedDurationHours ?? timeRange.hours;
+    if (effectiveHours <= 1) {
+      return formatInTimeZone(new Date(utcTimestamp), tz, 'HH:mm:ss');
+    } else if (effectiveHours <= 24) {
       return formatInTimeZone(new Date(utcTimestamp), tz, 'HH:mm');
     } else {
       return formatInTimeZone(new Date(utcTimestamp), tz, 'MM/dd HH:mm');