@rfkit/charts 1.10.2 → 1.10.4

package/components/DragSelectBox/index.d.ts

@@ -4,7 +4,7 @@
  */
 import type React from 'react';
 import { type ReactNode } from 'react';
-import { type RectBounds, type RectPosition } from '../../hooks/useDragSelect';
+import { type DragType, type RectBounds, type RectPosition } from '../../hooks/useDragSelect';
 type DragSelectBoxVariant = 'contained' | 'projected';
 export interface DragSelectBoxProps {
     enabled: boolean;
@@ -15,7 +15,7 @@ export interface DragSelectBoxProps {
     maxSize?: number;
     snapThreshold?: number;
     onChange?: (rect: RectPosition) => void;
-    onDragStart?: () => boolean | undefined;
+    onDragStart?: (dragType: Exclude<DragType, null>) => boolean | undefined;
     onDragEnd?: (rect: RectPosition) => void;
     children?: ReactNode;
     labels?: {

package/index.js

@@ -505,10 +505,6 @@ var __webpack_modules__ = {
   inset-inline: 0;
 }
 
-[data-rfkit-charts-root] .inset-y-0 {
-  inset-block: 0;
-}
-
 [data-rfkit-charts-root] .top-0 {
   top: 0;
 }
@@ -613,10 +609,6 @@ var __webpack_modules__ = {
   isolation: isolate;
 }
 
-[data-rfkit-charts-root] .z-0 {
-  z-index: 0;
-}
-
 [data-rfkit-charts-root] .z-10 {
   z-index: 10;
 }
@@ -872,10 +864,6 @@ var __webpack_modules__ = {
   height: calc(var(--spacing) * 1.5);
 }
 
-[data-rfkit-charts-root] .h-2 {
-  height: calc(var(--spacing) * 2);
-}
-
 [data-rfkit-charts-root] .h-2\\.5 {
   height: calc(var(--spacing) * 2.5);
 }
@@ -22531,16 +22519,26 @@ const resolveHeatmapSourceRange = (snapshot, bounds)=>{
     };
 };
 const resolveHeatmapSnapshotRangeData = (snapshot, range)=>snapshot.rawData.slice(range.startIndex, range.endIndex + 1).map((row)=>Array.from(row.slice(range.startCol, range.endCol + 1)));
-const resolveHeatmapSourceRangeScreenRect = (snapshot, range)=>{
+const resolveHeatmapSourceRangeScreenRect = (snapshot, range)=>resolveHeatmapContinuousSourceRangeScreenRect(snapshot, {
+        x: [
+            Math.min(range.startCol, range.endCol),
+            Math.max(range.startCol, range.endCol) + 1
+        ],
+        y: [
+            Math.min(range.startIndex, range.endIndex),
+            Math.max(range.startIndex, range.endIndex) + 1
+        ]
+    });
+const resolveHeatmapContinuousSourceRangeScreenRect = (snapshot, range)=>{
     const [viewportXStart, viewportXEnd] = snapshot.range.x;
     const [viewportYStart, viewportYEnd] = snapshot.range.y;
     const viewportXSpan = viewportXEnd - viewportXStart;
     const viewportYSpan = viewportYEnd - viewportYStart;
     if (viewportXSpan <= 0 || viewportYSpan <= 0) return null;
-    const sourceXStart = Math.min(range.startCol, range.endCol);
-    const sourceXEnd = Math.max(range.startCol, range.endCol) + 1;
-    const sourceYStart = Math.min(range.startIndex, range.endIndex);
-    const sourceYEnd = Math.max(range.startIndex, range.endIndex) + 1;
+    const sourceXStart = Math.min(range.x[0], range.x[1]);
+    const sourceXEnd = Math.max(range.x[0], range.x[1]);
+    const sourceYStart = Math.min(range.y[0], range.y[1]);
+    const sourceYEnd = Math.max(range.y[0], range.y[1]);
     return {
         leftPosition: (sourceXStart - viewportXStart) * 100 / viewportXSpan,
         width: (sourceXEnd - sourceXStart) * 100 / viewportXSpan,
@@ -22549,19 +22547,40 @@ const resolveHeatmapSourceRangeScreenRect = (snapshot, range)=>{
     };
 };
 const SOURCE_EDGE_EPSILON = 1e-7;
-const resolveHeatmapProjectedSourceRange = (snapshot, bounds)=>{
+const resolveHeatmapProjectedContinuousSourceRange = (snapshot, bounds)=>{
     const { sourceSize } = snapshot;
     const [viewportXStart, viewportXEnd] = snapshot.range.x;
     const [viewportYStart, viewportYEnd] = snapshot.range.y;
     const viewportXSpan = viewportXEnd - viewportXStart;
     const viewportYSpan = viewportYEnd - viewportYStart;
     if (sourceSize.width <= 0 || sourceSize.height <= 0 || viewportXSpan <= 0 || viewportYSpan <= 0) return null;
-    const sourceXStart = viewportXStart + Math.min(bounds.startLeft, bounds.endLeft) * viewportXSpan / 100;
-    const sourceXEnd = viewportXStart + Math.max(bounds.startLeft, bounds.endLeft) * viewportXSpan / 100;
+    const sourceXStart = viewport_clamp(viewportXStart + Math.min(bounds.startLeft, bounds.endLeft) * viewportXSpan / 100, 0, sourceSize.width);
+    const sourceXEnd = viewport_clamp(viewportXStart + Math.max(bounds.startLeft, bounds.endLeft) * viewportXSpan / 100, 0, sourceSize.width);
     const sourceYAtStart = viewportYStart + (100 - bounds.startTop) * viewportYSpan / 100;
     const sourceYAtEnd = viewportYStart + (100 - bounds.endTop) * viewportYSpan / 100;
-    const sourceYStart = Math.min(sourceYAtStart, sourceYAtEnd);
-    const sourceYEnd = Math.max(sourceYAtStart, sourceYAtEnd);
+    const sourceYStart = viewport_clamp(Math.min(sourceYAtStart, sourceYAtEnd), 0, sourceSize.height);
+    const sourceYEnd = viewport_clamp(Math.max(sourceYAtStart, sourceYAtEnd), 0, sourceSize.height);
+    return {
+        x: [
+            sourceXStart,
+            sourceXEnd
+        ],
+        y: [
+            sourceYStart,
+            sourceYEnd
+        ]
+    };
+};
+const resolveHeatmapProjectedSourceRange = (snapshot, bounds)=>{
+    const sourceRange = resolveHeatmapProjectedContinuousSourceRange(snapshot, bounds);
+    if (!sourceRange) return null;
+    return quantizeHeatmapContinuousSourceRange(snapshot, sourceRange);
+};
+const quantizeHeatmapContinuousSourceRange = (snapshot, sourceRange)=>{
+    const { sourceSize } = snapshot;
+    if (sourceSize.width <= 0 || sourceSize.height <= 0) return null;
+    const [sourceXStart, sourceXEnd] = sourceRange.x;
+    const [sourceYStart, sourceYEnd] = sourceRange.y;
     const startCol = viewport_clamp(Math.floor(sourceXStart + SOURCE_EDGE_EPSILON), 0, sourceSize.width - 1);
     const endCol = viewport_clamp(Math.max(startCol, Math.ceil(sourceXEnd - SOURCE_EDGE_EPSILON) - 1), startCol, sourceSize.width - 1);
     const startIndex = viewport_clamp(Math.floor(sourceYStart + SOURCE_EDGE_EPSILON), 0, sourceSize.height - 1);
@@ -22630,7 +22649,7 @@ const resolveHeatmapOverviewViewportRect = (snapshot)=>{
         height: (range.y[1] - range.y[0]) / sourceSize.height
     };
 };
-const resolveHeatmapOverviewSourceRangeRect = (snapshot, range)=>{
+const resolveHeatmapOverviewContinuousSourceRangeRect = (snapshot, range)=>{
     const { sourceSize } = snapshot;
     if (sourceSize.width <= 0 || sourceSize.height <= 0) return {
         height: 0,
@@ -22638,22 +22657,22 @@ const resolveHeatmapOverviewSourceRangeRect = (snapshot, range)=>{
         top: 0,
         width: 0
     };
-    const startCol = viewport_clamp(Math.min(range.startCol, range.endCol), 0, sourceSize.width - 1);
-    const endCol = viewport_clamp(Math.max(range.startCol, range.endCol), startCol, sourceSize.width - 1);
-    const startIndex = viewport_clamp(Math.min(range.startIndex, range.endIndex), 0, sourceSize.height - 1);
-    const endIndex = viewport_clamp(Math.max(range.startIndex, range.endIndex), startIndex, sourceSize.height - 1);
+    const xStart = viewport_clamp(Math.min(range.x[0], range.x[1]), 0, sourceSize.width);
+    const xEnd = viewport_clamp(Math.max(range.x[0], range.x[1]), xStart, sourceSize.width);
+    const yStart = viewport_clamp(Math.min(range.y[0], range.y[1]), 0, sourceSize.height);
+    const yEnd = viewport_clamp(Math.max(range.y[0], range.y[1]), yStart, sourceSize.height);
     return {
-        left: startCol / sourceSize.width,
-        top: 1 - (endIndex + 1) / sourceSize.height,
-        width: (endCol + 1 - startCol) / sourceSize.width,
-        height: (endIndex + 1 - startIndex) / sourceSize.height
+        left: xStart / sourceSize.width,
+        top: 1 - yEnd / sourceSize.height,
+        width: (xEnd - xStart) / sourceSize.width,
+        height: (yEnd - yStart) / sourceSize.height
     };
 };
-const isHeatmapSourceRangeVisibleInViewport = (snapshot, range)=>Math.min(range.startCol, range.endCol) < snapshot.range.x[1] && Math.max(range.startCol, range.endCol) >= snapshot.range.x[0] && Math.min(range.startIndex, range.endIndex) < snapshot.range.y[1] && Math.max(range.startIndex, range.endIndex) >= snapshot.range.y[0];
-const isHeatmapOverviewSourcePointInRange = (range, point, tolerance = {
+const isHeatmapContinuousSourceRangeVisibleInViewport = (snapshot, range)=>Math.min(range.x[0], range.x[1]) < snapshot.range.x[1] && Math.max(range.x[0], range.x[1]) > snapshot.range.x[0] && Math.min(range.y[0], range.y[1]) < snapshot.range.y[1] && Math.max(range.y[0], range.y[1]) > snapshot.range.y[0];
+const isHeatmapOverviewSourcePointInContinuousRange = (range, point, tolerance = {
     x: 0,
     y: 0
-})=>point.x >= Math.min(range.startCol, range.endCol) - tolerance.x && point.x <= Math.max(range.startCol, range.endCol) + 1 + tolerance.x && point.y >= Math.min(range.startIndex, range.endIndex) - tolerance.y && point.y <= Math.max(range.startIndex, range.endIndex) + 1 + tolerance.y;
+})=>point.x >= Math.min(range.x[0], range.x[1]) - tolerance.x && point.x <= Math.max(range.x[0], range.x[1]) + tolerance.x && point.y >= Math.min(range.y[0], range.y[1]) - tolerance.y && point.y <= Math.max(range.y[0], range.y[1]) + tolerance.y;
 const isHeatmapViewportFullRange = (snapshot)=>{
     const { range, sourceSize } = snapshot;
     if (sourceSize.width <= 0 || sourceSize.height <= 0) return true;
@@ -22666,9 +22685,9 @@ const calculateHeatmapOverviewCenteredRange = (snapshot, point)=>{
         y: centerRange(snapshot.range.y, snapshot.sourceSize.height, sourcePoint.y)
     };
 };
-const calculateHeatmapOverviewSourceRangeCenteredRange = (snapshot, range)=>({
-        x: centerRange(snapshot.range.x, snapshot.sourceSize.width, (Math.min(range.startCol, range.endCol) + Math.max(range.startCol, range.endCol) + 1) / 2),
-        y: centerRange(snapshot.range.y, snapshot.sourceSize.height, (Math.min(range.startIndex, range.endIndex) + Math.max(range.startIndex, range.endIndex) + 1) / 2)
+const calculateHeatmapOverviewContinuousSourceRangeCenteredRange = (snapshot, range)=>({
+        x: centerRange(snapshot.range.x, snapshot.sourceSize.width, (Math.min(range.x[0], range.x[1]) + Math.max(range.x[0], range.x[1])) / 2),
+        y: centerRange(snapshot.range.y, snapshot.sourceSize.height, (Math.min(range.y[0], range.y[1]) + Math.max(range.y[0], range.y[1])) / 2)
     });
 const calculateHeatmapOverviewDragRange = (snapshot, point, grabOffset)=>{
     const sourcePoint = resolveHeatmapOverviewSourcePoint(snapshot, point);
@@ -24388,16 +24407,16 @@ function calculateAreaInfo({ endLeft, startLeft, startTop, endTop, frequencyForm
     return result;
 }
 const heatmapCaptureUpdate = (globalID, func)=>subscription_createSubscriptionManager(`heatmapCaptureUpdate-${globalID}`, '0', func, globalID);
-const getHeatmapCaptureSourceRangeKey = (globalID)=>`heatmapCaptureSourceRange-${globalID}`;
-const getHeatmapCaptureSourceRangeSubscriptionKey = (globalID)=>`${getHeatmapCaptureSourceRangeKey(globalID)}-update`;
-const isSourceRangeEqual = (left, right)=>left === right || null !== left && null !== right && left.startCol === right.startCol && left.endCol === right.endCol && left.startIndex === right.startIndex && left.endIndex === right.endIndex;
-const getHeatmapCaptureSourceRange = (globalID)=>subscription_openData(getHeatmapCaptureSourceRangeKey(globalID), void 0, null, globalID);
-const setHeatmapCaptureSourceRange = (globalID, range)=>{
-    if (!globalID || isSourceRangeEqual(getHeatmapCaptureSourceRange(globalID), range)) return;
-    subscription_openData(getHeatmapCaptureSourceRangeKey(globalID), range, null, globalID);
-    subscription_createSubscriptionManager(getHeatmapCaptureSourceRangeSubscriptionKey(globalID))(range);
-};
-const subscribeHeatmapCaptureSourceRange = (globalID, func)=>subscription_createSubscriptionManager(getHeatmapCaptureSourceRangeSubscriptionKey(globalID), 'HeatmapOverview', func, globalID);
+const getHeatmapCaptureSelectionKey = (globalID)=>`heatmapCaptureSelection-${globalID}`;
+const getHeatmapCaptureSelectionSubscriptionKey = (globalID)=>`${getHeatmapCaptureSelectionKey(globalID)}-update`;
+const isSelectionEqual = (left, right)=>left === right || null !== left && null !== right && Math.abs(left.x[0] - right.x[0]) <= 1e-7 && Math.abs(left.x[1] - right.x[1]) <= 1e-7 && Math.abs(left.y[0] - right.y[0]) <= 1e-7 && Math.abs(left.y[1] - right.y[1]) <= 1e-7;
+const getHeatmapCaptureSelection = (globalID)=>subscription_openData(getHeatmapCaptureSelectionKey(globalID), void 0, null, globalID);
+const setHeatmapCaptureSelection = (globalID, selection)=>{
+    if (!globalID || isSelectionEqual(getHeatmapCaptureSelection(globalID), selection)) return;
+    subscription_openData(getHeatmapCaptureSelectionKey(globalID), selection, null, globalID);
+    subscription_createSubscriptionManager(getHeatmapCaptureSelectionSubscriptionKey(globalID))(selection);
+};
+const subscribeHeatmapCaptureSelection = (globalID, func)=>subscription_createSubscriptionManager(getHeatmapCaptureSelectionSubscriptionKey(globalID), 'HeatmapOverview', func, globalID);
 const Area_COMPONENT_KEY = constants_ToolType.HeatmapCapture;
 const Area_Area = (props)=>{
     const { state: { heatmapCapture, axisX: { frequencyFormat, unit }, system, globalID } } = useStore_useStore();
@@ -25503,7 +25522,7 @@ const DragSelectBox = ({ enabled, defaultRect, minSize = 0, minWidth, minHeight,
         return nextRect;
     };
     const handleBoxMouseDown = (event, type, startRect)=>{
-        if (onDragStart?.() === false) return;
+        if (onDragStart?.(type) === false) return;
         event.preventDefault();
         event.stopPropagation();
         handleMouseDown(event, type, startRect);
@@ -25698,12 +25717,191 @@ const DragSelectBox = ({ enabled, defaultRect, minSize = 0, minWidth, minHeight,
     });
 };
 const components_DragSelectBox = DragSelectBox;
-const sliderInfo_PRECISION = 1e4;
-const calculateHeatmapSliderInfo = ({ formatBandwidth, frequencyFormat, heatmapData, rect, sourceRangeOverride, waterfallSnapshot })=>{
+const sliderInfo_PRECISION = 1e6;
+const sliderInfo_clamp = (value1, min, max)=>Math.min(max, Math.max(min, value1));
+const resolveFrequencyExtent = (frequencyFormat)=>{
+    if (!frequencyFormat) return null;
+    const start = Number(frequencyFormat(0));
+    const end = Number(frequencyFormat(100));
+    if (!Number.isFinite(start) || !Number.isFinite(end) || start === end) return null;
+    return [
+        start,
+        end
+    ];
+};
+const resolveContinuousFrequencyFromSegments = (ratio, segments, edge)=>{
+    if (!segments?.length) return null;
+    const percent = 100 * sliderInfo_clamp(ratio, 0, 1);
+    const lastIndex = segments.length - 1;
+    for(let index = 0; index < segments.length; index += 1){
+        const segment = segments[index];
+        const progressStart = Math.min(segment.progress[0], segment.progress[1]);
+        const progressEnd = Math.max(segment.progress[0], segment.progress[1]);
+        const contains = 'start' === edge ? percent >= progressStart && (percent < progressEnd || index === lastIndex && percent <= progressEnd) : (percent > progressStart || 0 === index) && percent <= progressEnd;
+        if (!contains) continue;
+        const progressSpan = progressEnd - progressStart;
+        const localRatio = progressSpan ? (percent - progressStart) / progressSpan : 0;
+        return segment.start + (segment.stop - segment.start) * localRatio;
+    }
+    return null;
+};
+const resolveFrequencyFromRatio = (ratio, segments, frequencyFormat, edge)=>{
+    const value1 = frequencyFormat?.(100 * sliderInfo_clamp(ratio, 0, 1));
+    const frequency = void 0 === value1 ? Number.NaN : Number(value1);
+    if (Number.isFinite(frequency)) return frequency;
+    return resolveContinuousFrequencyFromSegments(ratio, segments, edge);
+};
+const resolveRatioFromFrequency = (frequency, segments, frequencyFormat)=>{
+    if (segments?.length) {
+        let nearest = null;
+        for (const segment of segments){
+            const frequencyStart = segment.start;
+            const frequencyEnd = segment.stop;
+            const frequencyMin = Math.min(frequencyStart, frequencyEnd);
+            const frequencyMax = Math.max(frequencyStart, frequencyEnd);
+            const progressStart = segment.progress[0] / 100;
+            const progressEnd = segment.progress[1] / 100;
+            if (frequency >= frequencyMin && frequency <= frequencyMax) {
+                const frequencySpan = frequencyEnd - frequencyStart;
+                const localRatio = frequencySpan ? (frequency - frequencyStart) / frequencySpan : 0;
+                return sliderInfo_clamp(progressStart + (progressEnd - progressStart) * localRatio, 0, 1);
+            }
+            const candidates = [
+                {
+                    distance: Math.abs(frequency - frequencyStart),
+                    ratio: progressStart
+                },
+                {
+                    distance: Math.abs(frequency - frequencyEnd),
+                    ratio: progressEnd
+                }
+            ];
+            for (const candidate of candidates)if (!nearest || candidate.distance < nearest.distance) nearest = candidate;
+        }
+        if (nearest) return sliderInfo_clamp(nearest.ratio, 0, 1);
+    }
+    const extent = resolveFrequencyExtent(frequencyFormat);
+    if (!extent) return null;
+    return sliderInfo_clamp((frequency - extent[0]) / (extent[1] - extent[0]), 0, 1);
+};
+const resolveHeatmapSliderFrequencyRatioRange = ({ frequencyFormat, frequencyRange, segments })=>{
+    const start = resolveRatioFromFrequency(frequencyRange[0], segments, frequencyFormat);
+    const end = resolveRatioFromFrequency(frequencyRange[1], segments, frequencyFormat);
+    if (null === start || null === end) return null;
+    return [
+        Math.min(start, end),
+        Math.max(start, end)
+    ];
+};
+const resolveFrequencyRangeFromRatios = (ratios, segments, frequencyFormat)=>{
+    const start = resolveFrequencyFromRatio(ratios[0], segments, frequencyFormat, 'start');
+    const end = resolveFrequencyFromRatio(ratios[1], segments, frequencyFormat, 'end');
+    if (null === start || null === end) return null;
+    return [
+        Math.min(start, end),
+        Math.max(start, end)
+    ];
+};
+const resolveHeatmapSliderSelectionFromRect = ({ frequencyFormat, rect, segments, waterfallSnapshot })=>{
+    const continuousRange = resolveHeatmapProjectedContinuousSourceRange(waterfallSnapshot, {
+        startLeft: rect.leftPosition,
+        endLeft: rect.leftPosition + rect.width,
+        startTop: rect.position + rect.height,
+        endTop: rect.position
+    });
+    if (!continuousRange || waterfallSnapshot.sourceSize.width <= 0) return null;
+    const x = [
+        continuousRange.x[0] / waterfallSnapshot.sourceSize.width,
+        continuousRange.x[1] / waterfallSnapshot.sourceSize.width
+    ];
+    return {
+        frequency: resolveFrequencyRangeFromRatios(x, segments, frequencyFormat),
+        x,
+        y: continuousRange.y
+    };
+};
+const resolveHeatmapSliderSelectionFromInteraction = ({ dragType, frequencyFormat, rect, segments, startSelection, waterfallSnapshot })=>{
+    const current = resolveHeatmapSliderSelectionFromRect({
+        frequencyFormat,
+        rect,
+        segments,
+        waterfallSnapshot
+    });
+    if (!current || !startSelection) return current;
+    switch(dragType){
+        case 'left':
+            return {
+                frequency: current.frequency && startSelection.frequency ? [
+                    current.frequency[0],
+                    startSelection.frequency[1]
+                ] : current.frequency,
+                x: [
+                    current.x[0],
+                    startSelection.x[1]
+                ],
+                y: startSelection.y
+            };
+        case 'right':
+            return {
+                frequency: current.frequency && startSelection.frequency ? [
+                    startSelection.frequency[0],
+                    current.frequency[1]
+                ] : current.frequency,
+                x: [
+                    startSelection.x[0],
+                    current.x[1]
+                ],
+                y: startSelection.y
+            };
+        case 'top':
+            return {
+                frequency: startSelection.frequency,
+                x: startSelection.x,
+                y: [
+                    startSelection.y[0],
+                    current.y[1]
+                ]
+            };
+        case 'bottom':
+            return {
+                frequency: startSelection.frequency,
+                x: startSelection.x,
+                y: [
+                    current.y[0],
+                    startSelection.y[1]
+                ]
+            };
+        case 'middle':
+            return current;
+    }
+};
+const resolveHeatmapSliderSelectionSourceRange = ({ selection, waterfallSnapshot })=>{
+    const { sourceSize } = waterfallSnapshot;
+    if (sourceSize.width <= 0 || sourceSize.height <= 0) return null;
+    const xStart = sliderInfo_clamp(Math.min(selection.x[0], selection.x[1]), 0, 1);
+    const xEnd = sliderInfo_clamp(Math.max(selection.x[0], selection.x[1]), xStart, 1);
+    const yStart = sliderInfo_clamp(Math.min(selection.y[0], selection.y[1]), 0, sourceSize.height);
+    const yEnd = sliderInfo_clamp(Math.max(selection.y[0], selection.y[1]), yStart, sourceSize.height);
+    return {
+        x: [
+            xStart * sourceSize.width,
+            xEnd * sourceSize.width
+        ],
+        y: [
+            yStart,
+            yEnd
+        ]
+    };
+};
+const calculateHeatmapSliderInfo = ({ formatBandwidth, frequencyFormat, heatmapData, rect, segments, selectionOverride, sourceRangeOverride, waterfallSnapshot })=>{
     const len = heatmapData.length;
     if (len <= 0) return null;
     const { position, height, leftPosition: left, width } = rect;
-    const sourceRange = sourceRangeOverride ?? (waterfallSnapshot ? resolveHeatmapProjectedSourceRange(waterfallSnapshot, {
+    const continuousSourceRangeOverride = waterfallSnapshot && selectionOverride ? resolveHeatmapSliderSelectionSourceRange({
+        selection: selectionOverride,
+        waterfallSnapshot
+    }) : null;
+    const sourceRange = sourceRangeOverride ?? (waterfallSnapshot && continuousSourceRangeOverride ? quantizeHeatmapContinuousSourceRange(waterfallSnapshot, continuousSourceRangeOverride) : null) ?? (waterfallSnapshot ? resolveHeatmapProjectedSourceRange(waterfallSnapshot, {
         startLeft: left,
         endLeft: left + width,
         startTop: position + height,
@@ -25721,12 +25919,16 @@ const calculateHeatmapSliderInfo = ({ formatBandwidth, frequencyFormat, heatmapD
     if (!columnRange) return null;
     const { startCol, endCol } = columnRange;
     const sourceWidth = waterfallSnapshot?.sourceSize.width ?? 0;
-    const startLeft = sourceRangeOverride && sourceWidth > 0 ? 100 * startCol / sourceWidth : waterfallSnapshot ? resolveHeatmapSourceLeft(left, waterfallSnapshot) : left;
-    const endLeft = sourceRangeOverride && sourceWidth > 0 ? (endCol + 1) * 100 / sourceWidth : waterfallSnapshot ? resolveHeatmapSourceLeft(left + width, waterfallSnapshot) : left + width;
-    const startFrequencyValue = frequencyFormat?.(startLeft);
-    const endFrequencyValue = frequencyFormat?.(endLeft);
-    const startFrequency = startFrequencyValue ? Math.round(Number(startFrequencyValue) * sliderInfo_PRECISION) / sliderInfo_PRECISION : 0;
-    const endFrequency = endFrequencyValue ? Math.round(Number(endFrequencyValue) * sliderInfo_PRECISION) / sliderInfo_PRECISION : 0;
+    const startLeft = selectionOverride ? 100 * selectionOverride.x[0] : sourceRangeOverride && sourceWidth > 0 ? 100 * startCol / sourceWidth : waterfallSnapshot ? resolveHeatmapSourceLeft(left, waterfallSnapshot) : left;
+    const endLeft = selectionOverride ? 100 * selectionOverride.x[1] : sourceRangeOverride && sourceWidth > 0 ? (endCol + 1) * 100 / sourceWidth : waterfallSnapshot ? resolveHeatmapSourceLeft(left + width, waterfallSnapshot) : left + width;
+    const fallbackFrequencyRange = resolveFrequencyRangeFromRatios([
+        startLeft / 100,
+        endLeft / 100
+    ], segments, frequencyFormat);
+    const startFrequencyValue = selectionOverride?.frequency?.[0] ?? fallbackFrequencyRange?.[0];
+    const endFrequencyValue = selectionOverride?.frequency?.[1] ?? fallbackFrequencyRange?.[1];
+    const startFrequency = Number.isFinite(startFrequencyValue) ? Math.round(Number(startFrequencyValue) * sliderInfo_PRECISION) / sliderInfo_PRECISION : 0;
+    const endFrequency = Number.isFinite(endFrequencyValue) ? Math.round(Number(endFrequencyValue) * sliderInfo_PRECISION) / sliderInfo_PRECISION : 0;
     const bandwidth = Math.abs(endFrequency - startFrequency);
     return {
         startIndex,
@@ -25759,7 +25961,7 @@ const isRectEqual = (left, right)=>Math.abs(left.position - right.position) <= 0
 const isBoundsEqual = (left, right)=>Math.abs(left.top - right.top) <= 0.01 && Math.abs(left.bottom - right.bottom) <= 0.01 && Math.abs(left.left - right.left) <= 0.01 && Math.abs(left.right - right.right) <= 0.01;
 const isSliderInfoEqual = (left, right)=>left.startIndex === right.startIndex && left.endIndex === right.endIndex && left.startTimestamp === right.startTimestamp && left.endTimestamp === right.endTimestamp && left.duration === right.duration && left.startCol === right.startCol && left.endCol === right.endCol && left.startFrequency === right.startFrequency && left.startFrequencyFormat === right.startFrequencyFormat && left.endFrequency === right.endFrequency && left.endFrequencyFormat === right.endFrequencyFormat && left.bandwidth === right.bandwidth && left.bandwidthFormat === right.bandwidthFormat;
 const Slider = ({ id })=>{
-    const { state: { globalID, heatmapCapture: { type, show, display, interval, onChange }, axisX: { frequencyFormat, unit } } } = useStore_useStore();
+    const { state: { globalID, heatmapCapture: { type, show, display, interval, onChange }, axisX: { frequencyFormat, unit }, segments } } = useStore_useStore();
     const canSlider = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>type === heatmap_HeatmapCaptureType.Slider && show && display, [
         type,
         show,
@@ -25771,8 +25973,14 @@ const Slider = ({ id })=>{
     const [currentRect, setCurrentRect] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(DEFAULT_RECT);
     const [interactionBounds, setInteractionBounds] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)();
     const currentRectRef = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(currentRect);
+    const selectionRef = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(null);
+    const dragStartSelectionRef = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(null);
+    const dragStartRectRef = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(null);
+    const activeDragTypeRef = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(null);
     const frequencyFormatRef = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(frequencyFormat);
+    const segmentsRef = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(segments);
     frequencyFormatRef.current = frequencyFormat;
+    segmentsRef.current = segments;
     const updateCurrentRect = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)((rect)=>{
         currentRectRef.current = rect;
         setCurrentRect((current)=>isRectEqual(current, rect) ? current : rect);
@@ -25783,40 +25991,39 @@ const Slider = ({ id })=>{
             return isBoundsEqual(current, bounds) ? current : bounds;
         });
     }, []);
+    const updateSelectionSnapshot = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)((nextInfo)=>{
+        const waterfallSnapshot = getHeatmapWaterfallSnapshot(globalID);
+        const selection = selectionRef.current;
+        const continuousRange = waterfallSnapshot && selection ? resolveHeatmapSliderSelectionSourceRange({
+            selection,
+            waterfallSnapshot
+        }) : null;
+        setHeatmapCaptureSelection(globalID, canSlider && nextInfo && continuousRange ? continuousRange : null);
+    }, [
+        canSlider,
+        globalID
+    ]);
     const updateInfo = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)((nextInfo, notify)=>{
         infoRef.current = nextInfo;
         setInfo(nextInfo);
-        if (canSlider) setHeatmapCaptureSourceRange(globalID, {
-            endCol: nextInfo.endCol,
-            endIndex: nextInfo.endIndex,
-            startCol: nextInfo.startCol,
-            startIndex: nextInfo.startIndex
-        });
+        updateSelectionSnapshot(nextInfo);
         if (notify) {
             notifiedRawDataRef.current = getHeatmapWaterfallSnapshot(globalID)?.rawData ?? null;
             onChange?.(nextInfo);
         }
     }, [
-        canSlider,
         globalID,
-        onChange
+        onChange,
+        updateSelectionSnapshot
     ]);
     (0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>{
-        if (!globalID || !canSlider) {
-            if (globalID) setHeatmapCaptureSourceRange(globalID, null);
-            return;
-        }
-        const currentInfo = infoRef.current;
-        if (currentInfo) setHeatmapCaptureSourceRange(globalID, {
-            endCol: currentInfo.endCol,
-            endIndex: currentInfo.endIndex,
-            startCol: currentInfo.startCol,
-            startIndex: currentInfo.startIndex
-        });
-        return ()=>setHeatmapCaptureSourceRange(globalID, null);
+        if (!globalID) return;
+        updateSelectionSnapshot(canSlider ? infoRef.current ?? null : null);
+        return ()=>setHeatmapCaptureSelection(globalID, null);
     }, [
         canSlider,
-        globalID
+        globalID,
+        updateSelectionSnapshot
     ]);
     const getHeatmapData = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)(()=>{
         const waterfallData = withDatabase(globalID).getAllRawData().waterfallData ?? [];
@@ -25827,20 +26034,42 @@ const Slider = ({ id })=>{
     }, [
         globalID
     ]);
-    const calculateSliderInfo = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)((r, sourceRangeOverride)=>{
+    const calculateSliderInfo = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)((r, selectionOverride)=>{
         const [heatmapData] = getHeatmapData();
         return calculateHeatmapSliderInfo({
             formatBandwidth: getFrequencyToFixed,
             frequencyFormat: frequencyFormatRef.current,
             heatmapData,
             rect: r,
-            sourceRangeOverride,
+            segments: segmentsRef.current,
+            selectionOverride,
             waterfallSnapshot: getHeatmapWaterfallSnapshot(globalID)
         });
     }, [
         getHeatmapData,
         globalID
     ]);
+    const updateSelection = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)((rect, dragType)=>{
+        const waterfallSnapshot = getHeatmapWaterfallSnapshot(globalID);
+        if (!waterfallSnapshot) return null;
+        const nextSelection = dragType ? resolveHeatmapSliderSelectionFromInteraction({
+            dragType,
+            frequencyFormat: frequencyFormatRef.current,
+            rect,
+            segments: segmentsRef.current,
+            startSelection: dragStartSelectionRef.current,
+            waterfallSnapshot
+        }) : resolveHeatmapSliderSelectionFromRect({
+            frequencyFormat: frequencyFormatRef.current,
+            rect,
+            segments: segmentsRef.current,
+            waterfallSnapshot
+        });
+        if (nextSelection) selectionRef.current = nextSelection;
+        return nextSelection;
+    }, [
+        globalID
+    ]);
     const [updateKey, setUpdateKey] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(0);
     (0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>{
         if (!id || !globalID) return;
@@ -25850,18 +26079,32 @@ const Slider = ({ id })=>{
         globalID
     ]);
     const handleChange = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)((rect)=>{
+        const startRect = dragStartRectRef.current;
+        if (startRect && isRectEqual(startRect, rect)) return;
         updateCurrentRect(rect);
-        const newInfo = calculateSliderInfo(rect);
+        const selection = updateSelection(rect, activeDragTypeRef.current);
+        const newInfo = calculateSliderInfo(rect, selection ?? void 0);
         if (newInfo) updateInfo(newInfo, false);
     }, [
         calculateSliderInfo,
         updateCurrentRect,
-        updateInfo
+        updateInfo,
+        updateSelection
     ]);
-    const claimCaptureInteraction = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)(()=>compareEventPriority(id, constants_ToolType.HeatmapCapture), [
+    const claimCaptureInteraction = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)((dragType)=>{
+        const claimed = compareEventPriority(id, constants_ToolType.HeatmapCapture);
+        if (false === claimed) return false;
+        activeDragTypeRef.current = dragType;
+        dragStartSelectionRef.current = selectionRef.current;
+        dragStartRectRef.current = currentRectRef.current;
+        return claimed;
+    }, [
         id
     ]);
     const releaseCaptureInteraction = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)(()=>{
+        activeDragTypeRef.current = null;
+        dragStartSelectionRef.current = null;
+        dragStartRectRef.current = null;
         createMouseUpEventManager(getEID(id))();
         resetEventLevel(id, constants_ToolType.HeatmapCapture);
     }, [
@@ -25869,8 +26112,8 @@ const Slider = ({ id })=>{
     ]);
     const handleDragEnd = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)((rect)=>{
         try {
-            updateCurrentRect(rect);
-            const newInfo = calculateSliderInfo(rect);
+            const selection = selectionRef.current ?? updateSelection(rect, null);
+            const newInfo = calculateSliderInfo(rect, selection ?? void 0);
             if (newInfo) updateInfo(newInfo, true);
         } finally{
             releaseCaptureInteraction();
@@ -25878,8 +26121,8 @@ const Slider = ({ id })=>{
     }, [
         calculateSliderInfo,
         releaseCaptureInteraction,
-        updateCurrentRect,
-        updateInfo
+        updateInfo,
+        updateSelection
     ]);
     (0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>releaseCaptureInteraction, [
         canSlider,
@@ -25891,34 +26134,54 @@ const Slider = ({ id })=>{
         const waterfallSnapshot = getHeatmapWaterfallSnapshot(globalID);
         const currentInfo = infoRef.current;
         const rowsUnchanged = startIndex === currentInfo?.startIndex && endIndex === currentInfo.endIndex;
-        const frequenciesUnchanged = void 0 === startFrequency || void 0 === endFrequency ? true : Math.abs(startFrequency - (currentInfo?.startFrequency ?? NaN)) < 1e-4 && Math.abs(endFrequency - (currentInfo?.endFrequency ?? NaN)) < 1e-4;
+        const currentFrequencyRange = selectionRef.current?.frequency;
+        const frequenciesUnchanged = void 0 === startFrequency || void 0 === endFrequency ? true : Math.abs(Math.min(startFrequency, endFrequency) - (currentFrequencyRange?.[0] ?? Number.NaN)) <= 1e-7 && Math.abs(Math.max(startFrequency, endFrequency) - (currentFrequencyRange?.[1] ?? Number.NaN)) <= 1e-7;
         if (rowsUnchanged && frequenciesUnchanged) return;
         const activeRect = currentRectRef.current;
         if (waterfallSnapshot) {
+            const { sourceSize } = waterfallSnapshot;
+            if (sourceSize.width <= 0 || sourceSize.height <= 0) return;
             const validRows = len > 0 && startIndex >= 0 && endIndex < len && endIndex - startIndex >= Math.ceil(MIN_SIZE * len / 100);
-            const targetRange = {
-                startIndex: validRows ? Math.min(startIndex, endIndex) : currentInfo?.startIndex ?? waterfallSnapshot.range.y[0],
-                endIndex: validRows ? Math.max(startIndex, endIndex) : currentInfo?.endIndex ?? waterfallSnapshot.range.y[1] - 1,
-                startCol: currentInfo?.startCol ?? waterfallSnapshot.range.x[0],
-                endCol: currentInfo?.endCol ?? waterfallSnapshot.range.x[1] - 1
+            const currentSelection = selectionRef.current ?? resolveHeatmapSliderSelectionFromRect({
+                frequencyFormat: frequencyFormatRef.current,
+                rect: activeRect,
+                segments: segmentsRef.current,
+                waterfallSnapshot
+            });
+            const externalFrequencyRange = void 0 !== startFrequency && void 0 !== endFrequency ? [
+                Math.min(startFrequency, endFrequency),
+                Math.max(startFrequency, endFrequency)
+            ] : null;
+            const externalFrequencyRatios = externalFrequencyRange ? resolveHeatmapSliderFrequencyRatioRange({
+                frequencyFormat: frequencyFormatRef.current,
+                frequencyRange: externalFrequencyRange,
+                segments: segmentsRef.current
+            }) : null;
+            if (externalFrequencyRange && !externalFrequencyRatios) return;
+            const targetSelection = {
+                frequency: externalFrequencyRange ?? currentSelection?.frequency ?? null,
+                x: externalFrequencyRatios ?? currentSelection?.x ?? [
+                    waterfallSnapshot.range.x[0] / sourceSize.width,
+                    waterfallSnapshot.range.x[1] / sourceSize.width
+                ],
+                y: validRows ? [
+                    Math.min(startIndex, endIndex),
+                    Math.max(startIndex, endIndex) + 1
+                ] : currentSelection?.y ?? [
+                    currentInfo?.startIndex ?? waterfallSnapshot.range.y[0],
+                    (currentInfo?.endIndex ?? waterfallSnapshot.range.y[1] - 1) + 1
+                ]
             };
-            if (void 0 !== startFrequency && void 0 !== endFrequency && frequencyFormat) {
-                const minFrequency = Number(frequencyFormat(0));
-                const maxFrequency = Number(frequencyFormat(100));
-                const frequencySpan = maxFrequency - minFrequency;
-                if (Number.isFinite(minFrequency) && Number.isFinite(maxFrequency) && frequencySpan > 0) {
-                    const startPercent = Math.max(0, Math.min(100, (Math.min(startFrequency, endFrequency) - minFrequency) / frequencySpan * 100));
-                    const endPercent = Math.max(startPercent, Math.min(100, (Math.max(startFrequency, endFrequency) - minFrequency) / frequencySpan * 100));
-                    const sourceWidth = waterfallSnapshot.sourceSize.width;
-                    targetRange.startCol = Math.max(0, Math.min(sourceWidth - 1, Math.floor(startPercent * sourceWidth / 100)));
-                    targetRange.endCol = Math.max(targetRange.startCol, Math.min(sourceWidth - 1, Math.ceil(endPercent * sourceWidth / 100) - 1));
-                }
-            }
-            if (currentInfo?.startIndex === targetRange.startIndex && currentInfo.endIndex === targetRange.endIndex && currentInfo.startCol === targetRange.startCol && currentInfo.endCol === targetRange.endCol) return;
-            const nextRect = resolveHeatmapSourceRangeScreenRect(waterfallSnapshot, targetRange);
+            const continuousRange = resolveHeatmapSliderSelectionSourceRange({
+                selection: targetSelection,
+                waterfallSnapshot
+            });
+            if (!continuousRange) return;
+            const nextRect = resolveHeatmapContinuousSourceRangeScreenRect(waterfallSnapshot, continuousRange);
             if (!nextRect) return;
+            selectionRef.current = targetSelection;
             updateCurrentRect(nextRect);
-            const newInfo = calculateSliderInfo(nextRect, targetRange);
+            const newInfo = calculateSliderInfo(nextRect, targetSelection);
             if (newInfo) updateInfo(newInfo, true);
             return;
         }
@@ -25995,21 +26258,46 @@ const Slider = ({ id })=>{
                 top: sourceRect.position
             } : void 0);
         } else updateInteractionBounds(void 0);
-        if (!waterfallSnapshot || !sourceInfo) {
+        if (!waterfallSnapshot) {
             const newInfo = calculateSliderInfo(currentRectRef.current);
             if (newInfo) updateInfo(newInfo, true);
             return;
         }
-        const nextRect = resolveHeatmapSourceRangeScreenRect(waterfallSnapshot, sourceInfo);
+        let selection = selectionRef.current ?? resolveHeatmapSliderSelectionFromRect({
+            frequencyFormat: frequencyFormatRef.current,
+            rect: currentRectRef.current,
+            segments: segmentsRef.current,
+            waterfallSnapshot
+        });
+        if (!selection) return;
+        if (selection.frequency) {
+            const x = resolveHeatmapSliderFrequencyRatioRange({
+                frequencyFormat: frequencyFormatRef.current,
+                frequencyRange: selection.frequency,
+                segments: segmentsRef.current
+            });
+            if (x) selection = {
+                ...selection,
+                x
+            };
+        }
+        selectionRef.current = selection;
+        const continuousSourceRange = resolveHeatmapSliderSelectionSourceRange({
+            selection,
+            waterfallSnapshot
+        });
+        if (!continuousSourceRange) return;
+        const nextRect = resolveHeatmapContinuousSourceRangeScreenRect(waterfallSnapshot, continuousSourceRange);
         if (nextRect) updateCurrentRect(nextRect);
-        const refreshedInfo = calculateSliderInfo(nextRect ?? currentRectRef.current, sourceInfo);
+        const refreshedInfo = calculateSliderInfo(nextRect ?? currentRectRef.current, selection);
         if (!refreshedInfo) return;
-        const infoChanged = !isSliderInfoEqual(refreshedInfo, sourceInfo);
+        const infoChanged = !sourceInfo || !isSliderInfoEqual(refreshedInfo, sourceInfo);
         const rawDataChanged = notifiedRawDataRef.current !== waterfallSnapshot.rawData;
         if (infoChanged || rawDataChanged) updateInfo(refreshedInfo, true);
     }, [
         updateKey,
         frequencyFormat,
+        segments,
         canSlider,
         globalID,
         calculateSliderInfo,
@@ -26475,7 +26763,7 @@ const HeatmapOverview = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react__.forw
         context.restore();
         const selectionRange = selectionRangeRef.current;
         if (!selectionRange) return;
-        const selectionRect = resolveHeatmapOverviewSourceRangeRect(snapshot, selectionRange);
+        const selectionRect = resolveHeatmapOverviewContinuousSourceRangeRect(snapshot, selectionRange);
         const selectionLeft = selectionRect.left * canvas.width;
         const selectionTop = selectionRect.top * canvas.height;
         const selectionWidth = Math.max(selectionRect.width * canvas.width, 2 * lineWidth);
@@ -26584,12 +26872,12 @@ const HeatmapOverview = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react__.forw
         updateOverlayColors
     ]);
     (0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>{
-        const updateSelection = (range)=>{
-            selectionRangeRef.current = range;
+        const updateSelection = (selection)=>{
+            selectionRangeRef.current = selection;
             scheduleDraw(false);
         };
-        const unsubscribe = subscribeHeatmapCaptureSourceRange(globalID, updateSelection);
-        updateSelection(getHeatmapCaptureSourceRange(globalID));
+        const unsubscribe = subscribeHeatmapCaptureSelection(globalID, updateSelection);
+        updateSelection(getHeatmapCaptureSelection(globalID));
         return unsubscribe;
     }, [
         globalID,
@@ -26656,13 +26944,13 @@ const HeatmapOverview = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react__.forw
         const sourcePoint = resolveHeatmapOverviewSourcePoint(snapshot, point);
         const pointInViewport = isHeatmapOverviewSourcePointInViewport(snapshot, sourcePoint);
         const selectionRange = selectionRangeRef.current;
-        if (!pointInViewport && selectionRange && !isHeatmapSourceRangeVisibleInViewport(snapshot, selectionRange)) {
+        if (!pointInViewport && selectionRange && !isHeatmapContinuousSourceRangeVisibleInViewport(snapshot, selectionRange)) {
             const bounds = event.currentTarget.getBoundingClientRect();
             const tolerance = {
                 x: bounds.width ? 6 * snapshot.sourceSize.width / bounds.width : 0,
                 y: bounds.height ? 6 * snapshot.sourceSize.height / bounds.height : 0
             };
-            if (isHeatmapOverviewSourcePointInRange(selectionRange, sourcePoint, tolerance)) return void scheduleRange(calculateHeatmapOverviewSourceRangeCenteredRange(snapshot, selectionRange));
+            if (isHeatmapOverviewSourcePointInContinuousRange(selectionRange, sourcePoint, tolerance)) return void scheduleRange(calculateHeatmapOverviewContinuousSourceRangeCenteredRange(snapshot, selectionRange));
         }
         if (!pointInViewport) return void scheduleRange(calculateHeatmapOverviewCenteredRange(snapshot, point));
         dragRef.current = {
@@ -33135,38 +33423,22 @@ const SignalSegments = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react__.memo)
         style: style,
         children: signalPositions.map(({ item, key, position, color, tooltip })=>{
             const isActive = activeSignalKey === key;
-            const positionStyle = {
+            const itemStyle = {
                 left: position.left,
                 width: position.width,
-                minWidth: '1px'
+                minWidth: '1px',
+                backgroundColor: color,
+                height: isActive ? '100%' : '8px',
+                opacity: isActive ? 0.5 : 1
             };
-            return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE_react__.Fragment, {
-                children: [
-                    isActive ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
-                        "aria-hidden": "true",
-                        className: "pointer-events-none absolute inset-y-0 z-0 box-border",
-                        "data-testid": "signal-annotation-highlight",
-                        style: {
-                            ...positionStyle,
-                            backgroundColor: `color-mix(in srgb, ${color} 14%, transparent)`,
-                            borderLeft: `1px solid ${color}`,
-                            borderRight: `1px solid ${color}`
-                        }
-                    }) : null,
-                    /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
-                        className: "pointer-events-none absolute top-0 flex h-2 min-w-px items-center justify-center overflow-hidden text-ellipsis whitespace-nowrap text-center text-xs text-foreground",
-                        "data-signal-active": isActive ? 'true' : 'false',
-                        "data-signal-key": key,
-                        "data-signal-source": resolveSignalSource(item),
-                        "data-testid": "signal-annotation",
-                        style: {
-                            ...positionStyle,
-                            backgroundColor: color,
-                            zIndex: isActive ? 2 : 1
-                        },
-                        title: tooltip
-                    })
-                ]
+            return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                className: "pointer-events-none absolute top-0 flex min-w-px items-center justify-center overflow-hidden text-ellipsis whitespace-nowrap text-center text-xs text-foreground",
+                "data-signal-active": isActive ? 'true' : 'false',
+                "data-signal-key": key,
+                "data-signal-source": resolveSignalSource(item),
+                "data-testid": "signal-annotation",
+                style: itemStyle,
+                title: tooltip
             }, `segment-${segmentIndex}-signal-${key}`);
         })
     }));

package/modules/Heatmap/Capture/sliderInfo.d.ts

@@ -1,18 +1,53 @@
 import type { TimestampedFloat32Array, WaterfallSnapshot } from '@rfkit/spectrum-analyzer';
-import type { AxisXProps, HeatmapSlider2DData } from '../../../types';
-import { type HeatmapSourceRange } from '../viewport.ts';
+import type { AxisXProps, HeatmapSlider2DData, SegmentsType } from '../../../types';
+import { type HeatmapContinuousSourceRange, type HeatmapSourceRange } from '../viewport.ts';
+export interface HeatmapSliderSelection {
+    /** 业务频率。外部输入保持原值，指针交互按 axisX.frequencyFormat 解析。 */
+    frequency: readonly [start: number, end: number] | null;
+    /** 相对完整频率域的连续位置，不受瀑布矩阵列密度影响。 */
+    x: readonly [start: number, end: number];
+    /** 完整瀑布源数据中的连续行边界。 */
+    y: readonly [start: number, end: number];
+}
+export type HeatmapSliderDragType = 'top' | 'bottom' | 'left' | 'right' | 'middle';
+interface HeatmapSliderRect {
+    height: number;
+    leftPosition: number;
+    position: number;
+    width: number;
+}
 interface SliderInfoParams {
     formatBandwidth: (bandwidth: number) => string;
     frequencyFormat: AxisXProps['frequencyFormat'];
     heatmapData: readonly TimestampedFloat32Array[];
-    rect: {
-        height: number;
-        leftPosition: number;
-        position: number;
-        width: number;
-    };
+    rect: HeatmapSliderRect;
+    segments?: SegmentsType;
+    selectionOverride?: Readonly<HeatmapSliderSelection>;
     sourceRangeOverride?: HeatmapSourceRange;
     waterfallSnapshot: Readonly<WaterfallSnapshot> | null;
 }
-export declare const calculateHeatmapSliderInfo: ({ formatBandwidth, frequencyFormat, heatmapData, rect, sourceRangeOverride, waterfallSnapshot }: SliderInfoParams) => HeatmapSlider2DData | null;
+export declare const resolveHeatmapSliderFrequencyRatioRange: ({ frequencyFormat, frequencyRange, segments }: {
+    frequencyFormat: AxisXProps["frequencyFormat"];
+    frequencyRange: readonly [start: number, end: number];
+    segments?: SegmentsType;
+}) => readonly [start: number, end: number] | null;
+export declare const resolveHeatmapSliderSelectionFromRect: ({ frequencyFormat, rect, segments, waterfallSnapshot }: {
+    frequencyFormat: AxisXProps["frequencyFormat"];
+    rect: HeatmapSliderRect;
+    segments?: SegmentsType;
+    waterfallSnapshot: Readonly<WaterfallSnapshot>;
+}) => HeatmapSliderSelection | null;
+export declare const resolveHeatmapSliderSelectionFromInteraction: ({ dragType, frequencyFormat, rect, segments, startSelection, waterfallSnapshot }: {
+    dragType: HeatmapSliderDragType;
+    frequencyFormat: AxisXProps["frequencyFormat"];
+    rect: HeatmapSliderRect;
+    segments?: SegmentsType;
+    startSelection: Readonly<HeatmapSliderSelection> | null;
+    waterfallSnapshot: Readonly<WaterfallSnapshot>;
+}) => HeatmapSliderSelection | null;
+export declare const resolveHeatmapSliderSelectionSourceRange: ({ selection, waterfallSnapshot }: {
+    selection: Readonly<HeatmapSliderSelection>;
+    waterfallSnapshot: Readonly<WaterfallSnapshot>;
+}) => HeatmapContinuousSourceRange | null;
+export declare const calculateHeatmapSliderInfo: ({ formatBandwidth, frequencyFormat, heatmapData, rect, segments, selectionOverride, sourceRangeOverride, waterfallSnapshot }: SliderInfoParams) => HeatmapSlider2DData | null;
 export {};

package/modules/Heatmap/Capture/tools.d.ts

@@ -1,5 +1,5 @@
 import type { AxisXProps, HeatmapAreaData, HeatmapCaptureProps } from '../../../types';
-import { type HeatmapSourceRange } from '../viewport';
+import { type HeatmapContinuousSourceRange } from '../viewport';
 interface Coordinates {
     startLeft: number;
     endLeft: number;
@@ -27,7 +27,7 @@ export declare const defaultAreaInfoResult: {
 };
 export default function calculateAreaInfo({ endLeft, startLeft, startTop, endTop, frequencyFormat, globalID }: AreaInfoParams): HeatmapAreaData;
 export declare const heatmapCaptureUpdate: (globalID: string, func?: (props: Partial<HeatmapCaptureProps>) => void) => (...args: any[]) => void;
-export declare const getHeatmapCaptureSourceRange: (globalID: string) => Readonly<HeatmapSourceRange> | null;
-export declare const setHeatmapCaptureSourceRange: (globalID: string, range: Readonly<HeatmapSourceRange> | null) => void;
-export declare const subscribeHeatmapCaptureSourceRange: (globalID: string, func: (range: Readonly<HeatmapSourceRange> | null) => void) => (...args: any[]) => void;
+export declare const getHeatmapCaptureSelection: (globalID: string) => Readonly<HeatmapContinuousSourceRange> | null;
+export declare const setHeatmapCaptureSelection: (globalID: string, selection: Readonly<HeatmapContinuousSourceRange> | null) => void;
+export declare const subscribeHeatmapCaptureSelection: (globalID: string, func: (selection: Readonly<HeatmapContinuousSourceRange> | null) => void) => (...args: any[]) => void;
 export {};

package/modules/Heatmap/viewport.d.ts

@@ -12,6 +12,10 @@ export interface HeatmapSourceRange {
     startCol: number;
     startIndex: number;
 }
+export interface HeatmapContinuousSourceRange {
+    x: readonly [start: number, end: number];
+    y: readonly [start: number, end: number];
+}
 export interface HeatmapSourceRangeScreenRect {
     height: number;
     leftPosition: number;
@@ -50,12 +54,20 @@ export declare const resolveHeatmapSourceRange: (snapshot: Readonly<WaterfallSna
 }) => HeatmapSourceRange | null;
 export declare const resolveHeatmapSnapshotRangeData: (snapshot: Readonly<WaterfallSnapshot>, range: HeatmapSourceRange) => number[][];
 export declare const resolveHeatmapSourceRangeScreenRect: (snapshot: Readonly<HeatmapViewportSnapshot>, range: HeatmapSourceRange) => HeatmapSourceRangeScreenRect | null;
+export declare const resolveHeatmapContinuousSourceRangeScreenRect: (snapshot: Readonly<HeatmapViewportSnapshot>, range: Readonly<HeatmapContinuousSourceRange>) => HeatmapSourceRangeScreenRect | null;
+export declare const resolveHeatmapProjectedContinuousSourceRange: (snapshot: Readonly<HeatmapViewportSnapshot>, bounds: {
+    endLeft: number;
+    endTop: number;
+    startLeft: number;
+    startTop: number;
+}) => HeatmapContinuousSourceRange | null;
 export declare const resolveHeatmapProjectedSourceRange: (snapshot: Readonly<HeatmapViewportSnapshot>, bounds: {
     endLeft: number;
     endTop: number;
     startLeft: number;
     startTop: number;
 }) => HeatmapSourceRange | null;
+export declare const quantizeHeatmapContinuousSourceRange: (snapshot: Readonly<HeatmapViewportSnapshot>, sourceRange: Readonly<HeatmapContinuousSourceRange>) => HeatmapSourceRange | null;
 export declare const calculateHeatmapWheelRange: (snapshot: Readonly<WaterfallSnapshot>, wheel: number, coord: {
     left: number;
     top: number;
@@ -65,14 +77,18 @@ export declare const resolveHeatmapOverviewSourcePoint: (snapshot: Readonly<Heat
     top: number;
 }) => HeatmapOverviewSourcePoint;
 export declare const resolveHeatmapOverviewViewportRect: (snapshot: Readonly<HeatmapViewportSnapshot>) => HeatmapOverviewViewportRect;
+export declare const resolveHeatmapOverviewContinuousSourceRangeRect: (snapshot: Readonly<HeatmapViewportSnapshot>, range: Readonly<HeatmapContinuousSourceRange>) => HeatmapOverviewViewportRect;
 export declare const resolveHeatmapOverviewSourceRangeRect: (snapshot: Readonly<HeatmapViewportSnapshot>, range: HeatmapSourceRange) => HeatmapOverviewViewportRect;
+export declare const isHeatmapContinuousSourceRangeVisibleInViewport: (snapshot: Readonly<HeatmapViewportSnapshot>, range: Readonly<HeatmapContinuousSourceRange>) => boolean;
 export declare const isHeatmapSourceRangeVisibleInViewport: (snapshot: Readonly<HeatmapViewportSnapshot>, range: HeatmapSourceRange) => boolean;
+export declare const isHeatmapOverviewSourcePointInContinuousRange: (range: Readonly<HeatmapContinuousSourceRange>, point: HeatmapOverviewSourcePoint, tolerance?: HeatmapOverviewSourcePoint) => boolean;
 export declare const isHeatmapOverviewSourcePointInRange: (range: HeatmapSourceRange, point: HeatmapOverviewSourcePoint, tolerance?: HeatmapOverviewSourcePoint) => boolean;
 export declare const isHeatmapViewportFullRange: (snapshot: Readonly<HeatmapViewportSnapshot>) => boolean;
 export declare const calculateHeatmapOverviewCenteredRange: (snapshot: Readonly<HeatmapViewportSnapshot>, point: {
     left: number;
     top: number;
 }) => HeatmapViewportRange;
+export declare const calculateHeatmapOverviewContinuousSourceRangeCenteredRange: (snapshot: Readonly<HeatmapViewportSnapshot>, range: Readonly<HeatmapContinuousSourceRange>) => HeatmapViewportRange;
 export declare const calculateHeatmapOverviewSourceRangeCenteredRange: (snapshot: Readonly<HeatmapViewportSnapshot>, range: HeatmapSourceRange) => HeatmapViewportRange;
 export declare const calculateHeatmapOverviewDragRange: (snapshot: Readonly<HeatmapViewportSnapshot>, point: {
     left: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rfkit/charts",
-  "version": "1.10.2",
+  "version": "1.10.4",
   "type": "module",
   "description": "Chart components for wireless monitoring web applications",
   "exports": {