@splunk/visualizations 28.6.0 → 28.8.0

package/Timeline.js

@@ -875,7 +875,7 @@ var Cover = styled_components_default.div`
     bottom: 0;
 `;
 var Blocker = styled_components_default.div.attrs({
-  "data-splunk-visualization-version": "28.6.0 - 92427899a"
+  "data-splunk-visualization-version": "28.8.0 - 633c53372"
 })`
     position: relative;
     width: 100%;
@@ -956,7 +956,7 @@ var withFixedSizeContainer = (Viz) => {
       FixSizeItem,
       {
         "data-test": "fix-size-item",
-        "data-splunk-visualization-version": "28.6.0 - 92427899a",
+        "data-splunk-visualization-version": "28.8.0 - 633c53372",
         width,
         height,
         backgroundColor
@@ -3116,6 +3116,19 @@ var tooltipLocaleTimeFormat = (displaySeconds) => {
     year: "numeric"
   }, seconds);
 };
+var MAX_TOOLTIP_MOVE_TRANSITION_DISTANCE = 200;
+var isNearbyTooltipAnchor = ({
+  anchorPoint,
+  previousAnchorPoint
+}) => {
+  if (!previousAnchorPoint) {
+    return false;
+  }
+  const deltaX = anchorPoint.x - previousAnchorPoint.x;
+  const deltaY = anchorPoint.y - previousAnchorPoint.y;
+  const distance = Math.hypot(deltaX, deltaY);
+  return distance > 0 && distance <= MAX_TOOLTIP_MOVE_TRANSITION_DISTANCE;
+};
 var applyCanvasScale = (u, scaleFactor) => {
   var _a;
   if (!((_a = u.ctx) == null ? void 0 : _a.canvas)) {
@@ -3163,9 +3176,22 @@ var ZoomContext_default = "default" in defaultImport39 ? defaultImport39.default
 
 // src/Timeline/PureTimeline/src/CursorPlugin.tsx
 var FIXED_LANE_HEIGHT = 32;
-var MIN_BAR_WIDTH = 20;
-var CIRCLE_X_OFFSET = 10;
+var MIN_BAR_WIDTH = 1;
+var MIN_BAR_HOVER_WIDTH = 6;
 var CIRCLE_LANE_SCALE_FACTOR = 0.85;
+var EVENT_VERTICAL_HIT_PADDING = FIXED_LANE_HEIGHT * (1 - CIRCLE_LANE_SCALE_FACTOR) / 2;
+var TIMELINE_TOOLTIP_WIDTH = 300;
+var shouldClearOnPointerExit = (event, chartContainer) => {
+  const { relatedTarget } = event;
+  if (event.currentTarget !== chartContainer && relatedTarget !== null) {
+    return false;
+  }
+  if (relatedTarget instanceof Node && chartContainer.contains(relatedTarget)) {
+    return false;
+  }
+  const { target: eventTarget } = event;
+  return eventTarget instanceof Node && chartContainer.contains(eventTarget);
+};
 var CursorPlugin = (props) => {
   const {
     laneSeries,
@@ -3177,22 +3203,24 @@ var CursorPlugin = (props) => {
     setHighlightedLane,
     handleEventClick,
     tooltipRef,
+    scrollContainerRef,
     locale,
     scaleFactor
   } = props;
   let previousTooltipContent = null;
+  const clearTooltip = (chart) => {
+    clearTooltipIfVisible({
+      chart,
+      tooltipRef,
+      setHighlightedLane,
+      setHighlightedEvent,
+      setHighlightedCategory
+    });
+  };
   const handleMouseLeave = (u) => {
     const xCursorLine = u.root.querySelector(".u-cursor-x");
     xCursorLine.classList.add("u-off");
-    tooltipRef.current = {
-      visible: false,
-      overflow: false,
-      content: "",
-      meta: ""
-    };
-    setHighlightedLane(null);
-    setHighlightedEvent(null);
-    setHighlightedCategory(null);
+    clearTooltip(u);
   };
   const handleClick2 = () => {
     if (tooltipRef.current.visible) {
@@ -3206,18 +3234,44 @@ var CursorPlugin = (props) => {
   return {
     hooks: {
       init: (u) => {
+        var _a;
         const chartContainer = u.root;
         chartContainer.addEventListener("click", handleClick2);
         const pointerExitHandler = (e) => {
-          if (!chartContainer.contains(e.relatedTarget)) {
+          if (shouldClearOnPointerExit(e, chartContainer)) {
             handleMouseLeave(u);
           }
         };
+        const pointerMoveHandler = (e) => {
+          if (!tooltipRef.current.visible || !tooltipRef.current.bounds) {
+            return;
+          }
+          const rect = chartContainer.getBoundingClientRect();
+          const dpr = globalThis.devicePixelRatio || 1;
+          const cursorPosition = getCursorPosition({
+            mouseEvent: e,
+            rect,
+            bbox: u.bbox,
+            scaleFactor,
+            dpr
+          });
+          if (!isCursorWithinBounds({ cursorPosition, bounds: tooltipRef.current.bounds })) {
+            clearTooltip(u);
+          }
+        };
+        const scrollContainer = (_a = scrollContainerRef == null ? void 0 : scrollContainerRef.current) != null ? _a : chartContainer.closest('[data-test="timeline-chart-scroll-area"]');
+        const scrollHandler = () => {
+          clearTooltip(u);
+        };
         chartContainer.addEventListener("pointerleave", pointerExitHandler);
+        document.addEventListener("pointermove", pointerMoveHandler, true);
         document.addEventListener("pointerout", pointerExitHandler, true);
+        scrollContainer == null ? void 0 : scrollContainer.addEventListener("scroll", scrollHandler);
         return () => {
           chartContainer.removeEventListener("pointerleave", pointerExitHandler);
+          document.removeEventListener("pointermove", pointerMoveHandler, true);
           document.removeEventListener("pointerout", pointerExitHandler, true);
+          scrollContainer == null ? void 0 : scrollContainer.removeEventListener("scroll", scrollHandler);
           chartContainer.removeEventListener("click", handleClick2);
         };
       },
@@ -3225,12 +3279,11 @@ var CursorPlugin = (props) => {
         const mouseEvent = u.cursor.event;
         const xCursorLine = u.root.querySelector(".u-cursor-x");
         if (!mouseEvent) {
-          tooltipRef.current.visible = false;
           toggleCursorLine(xCursorLine, true);
           return;
         }
         const rect = u.root.getBoundingClientRect();
-        const dpr = window.devicePixelRatio || 1;
+        const dpr = globalThis.devicePixelRatio || 1;
         const cursorPosition = getCursorPosition({
           mouseEvent,
           rect,
@@ -3241,13 +3294,7 @@ var CursorPlugin = (props) => {
         u.cursor.left = cursorPosition.x;
         u.cursor.top = cursorPosition.y;
         if (updateCursorLine(xCursorLine, cursorPosition, u, dpr)) {
-          clearTooltipIfVisible({
-            chart: u,
-            tooltipRef,
-            setHighlightedLane,
-            setHighlightedEvent,
-            setHighlightedCategory
-          });
+          clearTooltip(u);
           return;
         }
         const tooltipState = getTooltipState({
@@ -3261,13 +3308,7 @@ var CursorPlugin = (props) => {
           chart: u
         });
         if (!tooltipState) {
-          clearTooltipIfVisible({
-            chart: u,
-            tooltipRef,
-            setHighlightedLane,
-            setHighlightedEvent,
-            setHighlightedCategory
-          });
+          clearTooltip(u);
           return;
         }
         applyTooltipState({
@@ -3353,12 +3394,15 @@ function getTooltipState({
   if (!lane) {
     return null;
   }
-  const tooltip = adjustForOverflow({
-    tooltipX: hit.tooltipX,
-    tooltipY: hit.tooltipY,
-    event: hit.event,
-    plotRightEdge: chart.bbox.width / dpr
-  });
+  const tooltip = {
+    x: hit.anchorX,
+    y: hit.anchorY,
+    eventWidth: hit.eventWidth,
+    eventHeight: hit.eventHeight,
+    eventAnchorOffsetX: hit.eventAnchorOffsetX,
+    bounds: hit.bounds,
+    overflow: hit.anchorX + hit.eventWidth + TIMELINE_TOOLTIP_WIDTH / 2 > chart.bbox.width / dpr
+  };
   const displaySeconds = durationPerTick < 6e4 && hit.event.duration !== 0;
   const content = buildTooltipContent({ lane, event: hit.event, locale, displaySeconds });
   const meta = buildTooltipMeta(hit.event);
@@ -3392,6 +3436,7 @@ function findEventHit({
   widthPerTick,
   xScaleMin
 }) {
+  const candidates = [];
   for (let i = events.length - 1; i >= 0; i -= 1) {
     const event = events[i];
     const metrics = getEventMetrics({
@@ -3402,56 +3447,97 @@ function findEventHit({
       xScaleMin
     });
     if (metrics && hitTestEvent({ metrics, cursorPosition })) {
-      return {
-        event,
-        tooltipX: metrics.tooltipX,
-        tooltipY: metrics.tooltipY
-      };
+      candidates.push({ event, metrics });
     }
   }
-  return null;
+  if (candidates.length === 0) {
+    return null;
+  }
+  const minWidthCandidates = candidates.filter(({ metrics }) => metrics.isMinWidthBar);
+  const hit = minWidthCandidates.length ? getClosestMinWidthHit({ candidates: minWidthCandidates, cursorPosition }) : candidates[0];
+  return {
+    event: hit.event,
+    anchorX: hit.metrics.anchorX,
+    anchorY: hit.metrics.anchorY,
+    eventWidth: hit.metrics.eventWidth,
+    eventHeight: hit.metrics.eventHeight,
+    eventAnchorOffsetX: hit.metrics.eventAnchorOffsetX,
+    bounds: {
+      xMin: hit.metrics.hitMin,
+      xMax: hit.metrics.hitMax,
+      yMin: hit.metrics.hitYMin,
+      yMax: hit.metrics.hitYMax
+    }
+  };
+}
+function getClosestMinWidthHit({ candidates, cursorPosition }) {
+  return candidates.reduce((closest, candidate) => {
+    const closestDistance = Math.abs(cursorPosition.x - closest.metrics.anchorX);
+    const candidateDistance = Math.abs(cursorPosition.x - candidate.metrics.anchorX);
+    return candidateDistance < closestDistance ? candidate : closest;
+  }, candidates[0]);
 }
 function getEventMetrics({ event, cursorSeriesIndex, durationPerTick, widthPerTick, xScaleMin }) {
   const xStartFraction = (event.start - xScaleMin) / durationPerTick;
   const xStartBase = xStartFraction * widthPerTick;
   const xStart = cursorSeriesIndex - 1 === 0 ? xStartBase + 2 : xStartBase;
-  if (event.duration === 0) {
-    const circleRadius = FIXED_LANE_HEIGHT * CIRCLE_LANE_SCALE_FACTOR / 2;
+  const laneTop = (cursorSeriesIndex - 1) * FIXED_LANE_HEIGHT;
+  const laneCenterY = laneTop + FIXED_LANE_HEIGHT / 2;
+  const eventHeight = FIXED_LANE_HEIGHT * CIRCLE_LANE_SCALE_FACTOR;
+  const eventTop = laneCenterY - eventHeight / 2;
+  const eventBottom = eventTop + eventHeight;
+  const hitYMin = eventTop - EVENT_VERTICAL_HIT_PADDING;
+  const hitYMax = eventBottom + EVENT_VERTICAL_HIT_PADDING;
+  if (event.duration === null || event.duration === 0) {
+    const circleRadius = eventHeight / 2;
+    const circleLeft = xStart - circleRadius;
     return {
-      tooltipX: xStart + CIRCLE_X_OFFSET,
-      tooltipY: cursorSeriesIndex * FIXED_LANE_HEIGHT,
-      hitMin: xStart - circleRadius,
-      hitMax: xStart + circleRadius
+      anchorX: circleLeft,
+      anchorY: eventTop,
+      eventWidth: eventHeight,
+      eventHeight,
+      eventAnchorOffsetX: circleRadius,
+      hitMin: circleLeft,
+      hitMax: xStart + circleRadius,
+      hitYMin,
+      hitYMax
     };
   }
   const durationWidth = event.duration / durationPerTick * widthPerTick;
   const barWidth = Math.max(durationWidth, MIN_BAR_WIDTH);
+  const isMinWidthBar = barWidth <= MIN_BAR_WIDTH;
+  const hitXMin = isMinWidthBar ? xStart - MIN_BAR_HOVER_WIDTH / 2 : xStart;
+  const hitXMax = isMinWidthBar ? xStart + MIN_BAR_HOVER_WIDTH / 2 : xStart + barWidth;
   return {
-    tooltipX: xStart + CIRCLE_X_OFFSET,
-    tooltipY: cursorSeriesIndex * FIXED_LANE_HEIGHT,
-    hitMin: xStart,
-    hitMax: xStart + barWidth
+    anchorX: xStart,
+    anchorY: eventTop,
+    eventWidth: barWidth,
+    eventHeight,
+    eventAnchorOffsetX: 0,
+    hitMin: hitXMin,
+    hitMax: hitXMax,
+    hitYMin,
+    hitYMax,
+    isMinWidthBar
   };
 }
 function hitTestEvent({ metrics, cursorPosition }) {
-  const { x } = cursorPosition;
-  return x >= metrics.hitMin && x <= metrics.hitMax;
+  return isCursorWithinBounds({
+    cursorPosition,
+    bounds: {
+      xMin: metrics.hitMin,
+      xMax: metrics.hitMax,
+      yMin: metrics.hitYMin,
+      yMax: metrics.hitYMax
+    }
+  });
 }
-function adjustForOverflow({ tooltipX, tooltipY, event, plotRightEdge }) {
-  const tooltipWidth = 85;
-  let overflow = false;
-  let adjustedX = tooltipX;
-  let adjustedY = tooltipY;
-  if (tooltipX + tooltipWidth > plotRightEdge) {
-    overflow = true;
-    adjustedY -= FIXED_LANE_HEIGHT / 2;
-    adjustedX -= event.duration === 0 ? FIXED_LANE_HEIGHT : MIN_BAR_WIDTH;
-  }
-  return {
-    x: adjustedX,
-    y: adjustedY,
-    overflow
-  };
+function isCursorWithinBounds({
+  cursorPosition,
+  bounds
+}) {
+  const { x, y } = cursorPosition;
+  return x >= bounds.xMin && x <= bounds.xMax && y >= bounds.yMin && y <= bounds.yMax;
 }
 function buildTooltipContent({ lane, event, locale, displaySeconds }) {
   const startTime = new Date(event.start).toLocaleTimeString(
@@ -3485,6 +3571,10 @@ function applyTooltipState({
     visible: true,
     x: tooltipState.tooltip.x,
     y: tooltipState.tooltip.y,
+    eventWidth: tooltipState.tooltip.eventWidth,
+    eventHeight: tooltipState.tooltip.eventHeight,
+    eventAnchorOffsetX: tooltipState.tooltip.eventAnchorOffsetX,
+    bounds: tooltipState.tooltip.bounds,
     overflow: tooltipState.tooltip.overflow,
     content: tooltipState.content,
     meta: tooltipState.meta
@@ -3504,12 +3594,9 @@ function clearTooltipIfVisible({
     return;
   }
   chart.root.style.cursor = "default";
-  tooltipRef.current = {
-    visible: false,
-    overflow: false,
-    content: "",
-    meta: ""
-  };
+  tooltipRef.current = __spreadProps(__spreadValues({}, tooltipRef.current), {
+    visible: false
+  });
   setHighlightedLane(null);
   setHighlightedEvent(null);
   setHighlightedCategory(null);
@@ -3620,7 +3707,7 @@ var TimelinePlugin = ({
 var TimelinePlugin_default = TimelinePlugin;
 
 // src/Timeline/PureTimeline/src/XAxisPlugin.tsx
-var X_AXIS_HEIGHT = 60;
+var X_AXIS_HEIGHT = 50;
 var XAxisPlugin = ({
   durationPerTick = 0,
   numTicks = 0,
@@ -3660,7 +3747,6 @@ var XAxisPlugin = ({
       draw: (u) => {
         const { ctx } = u;
         const scaleMin = u.scales.x.min;
-        const maxLabelWidth = 50;
         const ticks = [scaleMin];
         for (let i = 1; i <= numTicks; i += 1) {
           ticks.push(scaleMin + i * durationPerTick);
@@ -3716,7 +3802,9 @@ var XAxisPlugin = ({
           } else {
             xTickPosition = i * (u.width / numTicks);
           }
-          if (i === ticks.length - 1 && xTickPosition + maxLabelWidth > u.width) {
+          const label = labels[i];
+          const labelPixelWidth = label ? Math.max(...label.map((line) => ctx.measureText(line).width)) : 0;
+          if (xTickPosition + labelPixelWidth > u.width) {
             return;
           }
           const yLabelPosition = xAxisY + tickHeight + labelOffset;
@@ -3726,7 +3814,6 @@ var XAxisPlugin = ({
           ctx.strokeStyle = "rgba(144, 144, 144, 0.5)";
           ctx.lineWidth = i === 0 ? 1 : 0.5;
           ctx.stroke();
-          const label = labels[i];
           if (label) {
             label.forEach((line, idx) => {
               ctx.fillText(line, xTickPosition, yLabelPosition + idx * lineHeight);
@@ -3802,12 +3889,14 @@ var TimelineYAxis = ({
         laneTextColor = theme.contentColorActive;
       }
     }
+    const laneText = lane.toString();
     const truncatedText = truncateText(
-      lane.toString(),
+      laneText,
       yAxisLabelWidth - lanePadding,
       "ellipsisMiddle",
       `14px ${VIZ_FONT_FAMILY}`
     );
+    const isTruncated = truncatedText !== laneText;
     return /* @__PURE__ */ react_exports.createElement(
       YAxisLane,
       {
@@ -3818,6 +3907,7 @@ var TimelineYAxis = ({
         isEven: (lanes.length - index - 1) % 2 === 0,
         backgroundColor,
         clickable: !!handleLaneClick,
+        title: isTruncated ? laneText : void 0,
         onClick: () => {
           handleLaneClick == null ? void 0 : handleLaneClick(lane);
         }
@@ -3834,35 +3924,48 @@ TimelineYAxis.propTypes = {
 var TimelineYAxis_default = TimelineYAxis;
 
 // src/Timeline/PureTimeline/src/TimelineLegend.tsx
-var LEGEND_WIDTH = 88;
+var LEGEND_WIDTH = 79;
+var SCROLLBAR_GUTTER_WIDTH = 16;
 var LEGEND_TEXT_WIDTH = 55;
+var BOTTOM_LEGEND_MIN_HEIGHT = 34;
 var LegendContainer = styled_components_default.div`
     display: flex;
-    justify-content: center;
+    justify-content: ${({ legendDisplay, hasVerticalOverflow }) => legendDisplay === "right" && hasVerticalOverflow ? "flex-start" : "center"};
     flex-direction: ${({ legendDisplay }) => legendDisplay === "bottom" ? "row" : "column"};
     align-items: flex-start;
     background-color: ${({ backgroundColor }) => backgroundColor};
     color: #fafafa;
     font-size: 10px;
-    ${({ legendDisplay, height, width, yAxisLabelWidth }) => legendDisplay === "right" ? `
+    flex-shrink: 0;
+    box-sizing: border-box;
+    padding-right: ${({ scrollbarGutterWidth }) => scrollbarGutterWidth}px;
+    ${({ legendDisplay, height, maxHeight, yAxisLabelWidth }) => legendDisplay === "right" ? `
                 width: ${LEGEND_WIDTH}px;
-                height: ${height}px;
-                margin-top: -30px;
-                margin-left: 10px;
-                margin-right: 12px;
+                min-height: ${Math.min(height, maxHeight)}px;
+                max-height: ${maxHeight}px;
+                align-self: flex-start;
+                margin-left: 9px;
                 overflow-x: hidden;
+                overflow-y: auto;
             ` : `
                 flex-wrap: wrap;
-                height: 60px;
-                width: ${width}px;
+                align-content: flex-start;
+                min-height: ${BOTTOM_LEGEND_MIN_HEIGHT}px;
+                max-height: ${maxHeight}px;
+                overflow-y: auto;
+                width: calc(100% - ${yAxisLabelWidth}px);
                 margin-left: ${yAxisLabelWidth}px;
-                padding-bottom: 10px;
+                padding-top: 8px;
+                padding-bottom: 0;
             `}
 `;
 var LegendItem = styled_components_default.div`
     display: flex;
     align-items: ${({ legendTruncation }) => legendTruncation === "ellipsisOff" ? "flex-start" : "center"};
-    margin: ${({ legendDisplay }) => legendDisplay === "bottom" ? "10px 20px 10px 0px" : "4px"};
+    margin: ${({ legendDisplay }) => legendDisplay === "bottom" ? "4px 20px 4px 0px" : "4px"};
+    max-width: 100%;
+    min-width: 0;
+    box-sizing: border-box;
     cursor: pointer;
     opacity: ${({ isHighlighted }) => isHighlighted ? 1 : 0.5};
     transition: opacity 0.2s ease;
@@ -3889,19 +3992,43 @@ var LegendText = styled_components_default.div`
         `}
     font-size: 10px;
     color: ${themes_exports.variables.contentColorActive};
+    max-width: 100%;
+    min-width: 0;
 `;
 var TimelineLegend = ({
   backgroundColor,
   categoryColors,
   highlightedCategory = null,
   setHighlightedCategory,
-  height,
-  width,
   handleLegendClick: handleLegendClick2,
   legendDisplay = "right",
   legendTruncation = "ellipsisEnd",
+  height = 0,
+  maxHeight = height,
   yAxisLabelWidth = 0
 }) => {
+  const containerRef = react_exports.useRef(null);
+  const [scrollbarGutter, setScrollbarGutter] = react_exports.useState({
+    reservedWidth: 0,
+    paddingRight: 0,
+    hasVerticalOverflow: false
+  });
+  const categoryColorEntries = Array.from(categoryColors.entries());
+  const legendTextWidth = Math.max(0, LEGEND_TEXT_WIDTH - scrollbarGutter.reservedWidth);
+  react_exports.useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    const hasVerticalOverflow = el.scrollHeight > el.clientHeight;
+    const measuredScrollbarWidth = hasVerticalOverflow ? Math.max(0, el.offsetWidth - el.clientWidth) : 0;
+    const nextGutter = hasVerticalOverflow ? {
+      reservedWidth: Math.max(SCROLLBAR_GUTTER_WIDTH, measuredScrollbarWidth),
+      paddingRight: Math.max(0, SCROLLBAR_GUTTER_WIDTH - measuredScrollbarWidth),
+      hasVerticalOverflow
+    } : { reservedWidth: 0, paddingRight: 0, hasVerticalOverflow };
+    setScrollbarGutter(
+      (current) => current.reservedWidth === nextGutter.reservedWidth && current.paddingRight === nextGutter.paddingRight && current.hasVerticalOverflow === nextGutter.hasVerticalOverflow ? current : nextGutter
+    );
+  }, [categoryColors, height, legendDisplay, legendTruncation, maxHeight]);
   const handleMouseEnter = (category) => {
     setHighlightedCategory == null ? void 0 : setHighlightedCategory(category);
   };
@@ -3911,31 +4038,36 @@ var TimelineLegend = ({
   return /* @__PURE__ */ react_exports.createElement(
     LegendContainer,
     {
+      ref: containerRef,
       "data-test": "legend-container",
       "data-test-position-value": legendDisplay,
       "data-test-truncation-value": legendTruncation,
       legendDisplay,
       backgroundColor,
+      yAxisLabelWidth,
       height,
-      width,
-      yAxisLabelWidth
+      maxHeight,
+      scrollbarGutterWidth: scrollbarGutter.paddingRight,
+      hasVerticalOverflow: scrollbarGutter.hasVerticalOverflow
     },
-    Array.from(categoryColors.entries()).map(([category, color]) => {
+    categoryColorEntries.map(([category, color]) => {
       const isHighlighted = !highlightedCategory || highlightedCategory === category;
-      const truncatedText = legendTruncation === "ellipsisOff" || legendDisplay === "bottom" ? category : truncateText(category, LEGEND_TEXT_WIDTH, legendTruncation);
+      const truncatedText = legendTruncation === "ellipsisOff" || legendDisplay === "bottom" ? category : truncateText(category, legendTextWidth, legendTruncation);
+      const canTruncate = legendTruncation !== "ellipsisOff";
       return /* @__PURE__ */ react_exports.createElement(
         LegendItem,
         {
           "data-test": "legend-item",
           key: category,
-          color,
           isHighlighted,
           legendDisplay,
           legendTruncation,
+          title: canTruncate ? category : void 0,
+          "aria-label": category,
           onMouseEnter: () => handleMouseEnter(category),
           onMouseLeave: handleMouseLeave,
           onClick: () => {
-            handleLegendClick2(category);
+            handleLegendClick2 == null ? void 0 : handleLegendClick2(category);
           }
         },
         /* @__PURE__ */ react_exports.createElement(
@@ -3955,104 +4087,133 @@ var TimelineLegend = ({
 };
 TimelineLegend.propTypes = {
   backgroundColor: prop_types_exports.string.isRequired,
-  height: prop_types_exports.number.isRequired,
-  legendDisplay: prop_types_exports.oneOf(["right", "bottom"]),
+  height: prop_types_exports.number,
+  legendDisplay: prop_types_exports.oneOf(["right", "bottom", "off"]),
   legendTruncation: prop_types_exports.oneOf(["ellipsisEnd", "ellipsisMiddle", "ellipsisStart", "ellipsisOff"]),
   categoryColors: prop_types_exports.any,
   highlightedCategory: prop_types_exports.string,
-  setHighlightedCategory: prop_types_exports.func
+  setHighlightedCategory: prop_types_exports.func,
+  maxHeight: prop_types_exports.number
 };
 var TimelineLegend_default = TimelineLegend;
 
-// esm-externals:@splunk/themes/useSplunkTheme
-var useSplunkTheme_exports = {};
-__export(useSplunkTheme_exports, {
-  default: () => useSplunkTheme_default
+// esm-externals:@splunk/react-ui/Popover
+var Popover_exports = {};
+__export(Popover_exports, {
+  default: () => Popover_default
 });
-var defaultImport40 = __toESM(require("@splunk/themes/useSplunkTheme"));
-__reExport(useSplunkTheme_exports, require("@splunk/themes/useSplunkTheme"));
-var useSplunkTheme_default = "default" in defaultImport40 ? defaultImport40.default : defaultImport40;
+var defaultImport40 = __toESM(require("@splunk/react-ui/Popover"));
+__reExport(Popover_exports, require("@splunk/react-ui/Popover"));
+var Popover_default = "default" in defaultImport40 ? defaultImport40.default : defaultImport40;
 
 // src/Timeline/PureTimeline/src/TimelineTooltip.tsx
-var TooltipContainer = styled_components_default.div`
+var TOOLTIP_ANCHOR_GAP = 4;
+var TOOLTIP_MOVE_TRANSITION = "transform 0.1s ease-out, left 0.1s ease-out, top 0.1s ease-out";
+var VirtualAnchor = styled_components_default.div`
     position: absolute;
-    background-color: ${({ backgroundColor }) => `${backgroundColor}`};
-    box-shadow: ${themes_exports.variables.overlayShadow};
-    padding: 12px 16px;
-    border-radius: 3px;
     pointer-events: none;
-    display: ${({ visible }) => visible ? "block" : "none"};
-    white-space: nowrap;
+    width: ${({ width }) => `${width}px`};
+    height: ${({ height }) => `${height}px`};
     left: ${({ x }) => `${x}px`};
-    top: ${({ y, chartOverflow }) => `${chartOverflow ? y : y + 7}px`};
-    transform: ${({ chartOverflow }) => chartOverflow ? "translate(-100%, -50%);" : "translate(-55%, 0);"}
-    transition: left 0.1s ease-out, top 0.1s ease-out;
-    z-index: 1000;
-
-    ::after {
-        content: '';
-        position: absolute;
-        ${({ chartOverflow, backgroundColor }) => chartOverflow ? `
-            top: 50%;
-            left: 100%;
-            transform: translateY(-50%);
-            border-width: 5px;
-            border-style: solid;
-            border-bottom-color: transparent;
-            border-top-color: transparent;
-            border-right-color: transparent;
-            border-left-color: ${backgroundColor};
-        ` : `
-            bottom: 100%;
-            left: 50%;
-            transform: translateX(-50%);
-            border-width: 5px;
-            border-style: solid;
-            border-bottom-color: ${backgroundColor};
-            border-top-color: transparent;
-            border-right-color: transparent;
-            border-left-color: transparent;
-        `}
-    }
+    top: ${({ y }) => `${y}px`};
 `;
-var TooltipLabel = styled_components_default.div`
-    color: ${themes_exports.variables.contentColorDefault};
-`;
-var TooltipValue = styled_components_default.div`
-    color: ${themes_exports.variables.contentColorActive};
+var TooltipContainer = styled_components_default.div`
+    padding: 12px 16px;
 `;
-var TooltipContent = styled_components_default.div`
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-    gap: 16px;
+var TooltipTable = styled_components_default.table`
+    border-collapse: collapse;
     font-weight: 400;
     font-size: 12px;
     line-height: 16px;
+    max-width: 280px;
 `;
-var TimelineTooltip = ({ visible, content, x, y, overflow }) => {
-  const theme = useSplunkTheme_default();
-  let popoverBackground = "#33343b";
-  if (theme.isPrisma) {
-    popoverBackground = theme.backgroundColorPopup;
-  } else if (theme.isEnterprise && theme.isLight) {
-    popoverBackground = theme.white;
-  }
-  return /* @__PURE__ */ react_default.createElement(
-    TooltipContainer,
+var TooltipLabel = styled_components_default.td`
+    color: ${themes_exports.variables.contentColorDefault};
+    overflow-wrap: normal;
+    word-break: normal;
+    white-space: normal;
+    vertical-align: top;
+    padding-right: 16px;
+    padding-bottom: 2px;
+    min-width: 8ch;
+    max-width: 18ch;
+`;
+var TooltipValue = styled_components_default.td`
+    color: ${themes_exports.variables.contentColorActive};
+    overflow-wrap: anywhere;
+    word-break: normal;
+    white-space: normal;
+    vertical-align: top;
+    text-align: right;
+    padding-bottom: 2px;
+`;
+var POPOVER_STYLE = { pointerEvents: "none" };
+var TimelineTooltip = ({
+  visible,
+  content,
+  x,
+  y,
+  eventWidth = 0,
+  eventHeight = 0,
+  eventAnchorOffsetX = 0,
+  overflow,
+  scaleFactor = 1
+}) => {
+  const [anchorEl, setAnchorEl] = react_default.useState(null);
+  const preferredPlacement = overflow ? "left" : "below";
+  const previousAnchorRef = react_default.useRef(null);
+  const anchorX = x - TOOLTIP_ANCHOR_GAP;
+  const anchorY = y - TOOLTIP_ANCHOR_GAP;
+  const anchorWidth = eventWidth + TOOLTIP_ANCHOR_GAP * 2;
+  const anchorHeight = eventHeight + TOOLTIP_ANCHOR_GAP * 2;
+  const pointTo = overflow ? void 0 : { x: (eventAnchorOffsetX + TOOLTIP_ANCHOR_GAP) * scaleFactor };
+  const tooltipRows = Object.entries(content).filter(([, value]) => value !== void 0 && value !== null);
+  const open = visible && anchorEl !== null;
+  const previousAnchor = previousAnchorRef.current;
+  const shouldTransitionTooltipMove = open ? isNearbyTooltipAnchor({
+    anchorPoint: { x: anchorX, y: anchorY },
+    previousAnchorPoint: previousAnchor
+  }) : false;
+  react_default.useEffect(() => {
+    if (!open) {
+      return;
+    }
+    previousAnchorRef.current = { x: anchorX, y: anchorY };
+  }, [anchorX, anchorY, open]);
+  const applyOuterPopoverStyles = react_default.useCallback(
+    (element) => {
+      if (!element) return;
+      const { style } = element;
+      style.pointerEvents = "none";
+      style.minWidth = "0";
+      style.transition = shouldTransitionTooltipMove ? TOOLTIP_MOVE_TRANSITION : "none";
+    },
+    [shouldTransitionTooltipMove]
+  );
+  return /* @__PURE__ */ react_default.createElement(react_default.Fragment, null, /* @__PURE__ */ react_default.createElement(
+    VirtualAnchor,
+    {
+      ref: setAnchorEl,
+      x: anchorX,
+      y: anchorY,
+      width: anchorWidth,
+      height: anchorHeight,
+      "data-test": "timeline-tooltip-anchor"
+    }
+  ), /* @__PURE__ */ react_default.createElement(
+    Popover_default,
     {
       "data-test": "timeline-tooltip",
-      backgroundColor: popoverBackground,
-      visible,
-      x,
-      y,
-      chartOverflow: overflow
+      open,
+      anchor: anchorEl,
+      defaultPlacement: preferredPlacement,
+      outerRef: applyOuterPopoverStyles,
+      pointTo,
+      repositionMode: "flip",
+      style: POPOVER_STYLE
     },
-    Object.entries(content).map(
-      ([key, value]) => value !== void 0 && value !== null && /* @__PURE__ */ react_default.createElement(TooltipContent, { key }, /* @__PURE__ */ react_default.createElement(TooltipLabel, null, key.charAt(0).toUpperCase() + key.slice(1)), /* @__PURE__ */ react_default.createElement(TooltipValue, null, value))
-    )
-  );
+    /* @__PURE__ */ react_default.createElement(TooltipContainer, null, /* @__PURE__ */ react_default.createElement(TooltipTable, null, /* @__PURE__ */ react_default.createElement("tbody", null, tooltipRows.map(([key, value]) => /* @__PURE__ */ react_default.createElement("tr", { key }, /* @__PURE__ */ react_default.createElement(TooltipLabel, null, key.charAt(0).toUpperCase() + key.slice(1)), /* @__PURE__ */ react_default.createElement(TooltipValue, null, value))))))
+  ));
 };
 var TimelineTooltip_default = TimelineTooltip;
 
@@ -4066,18 +4227,66 @@ __reExport(uPlot_min_exports, require("uplot/dist/uPlot.min.css"));
 var uPlot_min_default = "default" in defaultImport41 ? defaultImport41.default : defaultImport41;
 
 // src/Timeline/PureTimeline/src/TimelineUplot.tsx
+var TIMELINE_CONTAINER_PADDING = 10;
+var BOTTOM_LEGEND_SCROLLBAR_GAP = 8;
+var LANE_HEIGHT = 32;
+var SCROLLBAR_GUTTER_WIDTH2 = 24;
+var RIGHT_LEGEND_FOOTPRINT = 88;
+var getTimelineLayout = ({
+  width,
+  height,
+  yAxisLabelWidth,
+  laneCount,
+  showLegend = false,
+  legendDisplay
+}) => {
+  const laneBandHeight = LANE_HEIGHT * laneCount;
+  const chartHeight = laneBandHeight + X_AXIS_HEIGHT;
+  const visibleTimelineHeight = Math.max(0, height - TIMELINE_CONTAINER_PADDING * 2);
+  const bottomLegendReservedHeight = showLegend && legendDisplay === "bottom" ? BOTTOM_LEGEND_SCROLLBAR_GAP + BOTTOM_LEGEND_MIN_HEIGHT : 0;
+  const reserveScrollbarGutter = chartHeight > Math.max(0, visibleTimelineHeight - bottomLegendReservedHeight);
+  const legendWidth = showLegend && legendDisplay === "right" ? RIGHT_LEGEND_FOOTPRINT : 0;
+  const chartWidth = Math.max(
+    1,
+    width - yAxisLabelWidth - legendWidth - TIMELINE_CONTAINER_PADDING * 2 - (reserveScrollbarGutter ? SCROLLBAR_GUTTER_WIDTH2 : 0)
+  );
+  const legendMaxHeight = legendDisplay === "bottom" ? Math.max(
+    BOTTOM_LEGEND_MIN_HEIGHT,
+    visibleTimelineHeight - BOTTOM_LEGEND_SCROLLBAR_GAP - chartHeight
+  ) : visibleTimelineHeight;
+  return {
+    laneBandHeight,
+    chartHeight,
+    chartWidth,
+    reserveScrollbarGutter,
+    legendMaxHeight
+  };
+};
 var TimelineUplotContainer = styled_components_default.div`
     display: flex;
     flex-direction: ${({ legendDisplay }) => legendDisplay === "bottom" ? "column" : "row"};
     width: 100%;
     height: 100%;
-    padding: 10px 10px;
-    overflow-y: scroll;
+    padding: ${TIMELINE_CONTAINER_PADDING}px ${TIMELINE_CONTAINER_PADDING}px;
+    overflow: visible;
+    box-sizing: border-box;
+    position: relative;
+    ${({ legendDisplay }) => legendDisplay === "bottom" ? `gap: ${BOTTOM_LEGEND_SCROLLBAR_GAP}px;` : ""}
+`;
+var TimelineChartScrollArea = styled_components_default.div`
+    flex: ${({ hasBottomLegend }) => hasBottomLegend ? "0 0 auto" : "1 1 auto"};
+    max-height: ${({ hasBottomLegend }) => hasBottomLegend ? `calc(100% - ${BOTTOM_LEGEND_SCROLLBAR_GAP + BOTTOM_LEGEND_MIN_HEIGHT}px)` : "none"};
+    min-height: 0;
+    min-width: 0;
+    overflow-y: auto;
     overflow-x: hidden;
+    box-sizing: border-box;
+    padding-right: ${({ reserveScrollbarGutter }) => reserveScrollbarGutter ? SCROLLBAR_GUTTER_WIDTH2 : 0}px;
 `;
 var TimelineUplotWrapper = styled_components_default.div`
     width: ${({ width }) => `${width}px`};
     position: relative;
+    overflow: visible;
 `;
 var TimelineChartContainer = styled_components_default.div`
     display: flex;
@@ -4087,6 +4296,7 @@ var TimelineChartContainer = styled_components_default.div`
 var TimelineUplot = ({
   backgroundColor,
   width,
+  height,
   yAxisLabelWidth,
   laneSeries,
   lanes,
@@ -4109,27 +4319,33 @@ var TimelineUplot = ({
   const fullscreenEl = typeof document !== "undefined" ? document.fullscreenElement : null;
   const scaleFactor = fullscreenEl && fullscreenEl.tagName !== "BODY" ? 1 : zoom || 1;
   const { version: dprVersion } = (0, visualization_canvas_exports.useDevicePixelRatio)();
+  const scrollContainerRef = react_exports.useRef(null);
   const tooltipRef = react_exports.useRef({
     visible: false,
     x: 0,
     y: 0,
+    eventAnchorOffsetX: 0,
+    bounds: null,
     overflow: false,
     content: {},
     meta: {}
   });
-  const xMin = Math.min(...laneSeries.flatMap((lane) => lane.map((dp) => dp.start))) || 0;
-  const xMax = Math.max(...laneSeries.flatMap((lane) => lane.map((dp) => dp.end))) || 1;
-  const xAxisHeight = 60;
-  const laneHeight = 32;
-  const padding = 20;
-  const legendWidth = showLegend && legendDisplay === "right" ? 88 : 0;
-  const containerWidth = typeof width === "string" ? window.innerWidth : width;
-  const chartWidth = containerWidth - yAxisLabelWidth - legendWidth - padding;
-  const chartHeight = laneHeight * lanes.length + xAxisHeight;
+  const eventStarts = laneSeries.flatMap((lane) => lane.map((dp) => dp.start));
+  const eventEnds = laneSeries.flatMap((lane) => lane.map((dp) => dp.end));
+  const xMin = eventStarts.length ? Math.min(...eventStarts) : 0;
+  const xMax = eventEnds.length ? Math.max(...eventEnds) : 1;
+  const { laneBandHeight, chartHeight, chartWidth, reserveScrollbarGutter, legendMaxHeight } = getTimelineLayout({
+    width,
+    height,
+    yAxisLabelWidth,
+    laneCount: lanes.length,
+    showLegend,
+    legendDisplay
+  });
   const granularityMultiplier = convertTickIntervalToMs(tickInterval);
   const totalRange = xMax + granularityMultiplier - xMin;
   const totalNumberOfTicks = totalRange / granularityMultiplier;
-  const maxNumOfTicks = calculateMaxNumberOfTicks(chartWidth, 50, 10);
+  const maxNumOfTicks = Math.max(1, calculateMaxNumberOfTicks(chartWidth, 50, 10));
   const unitsPerTick = Math.ceil(totalNumberOfTicks / maxNumOfTicks);
   const numTicks = totalNumberOfTicks / unitsPerTick;
   const durationPerTick = granularityMultiplier * unitsPerTick;
@@ -4193,6 +4409,7 @@ var TimelineUplot = ({
           setHighlightedLane,
           handleEventClick,
           tooltipRef,
+          scrollContainerRef,
           locale,
           scaleFactor
         })
@@ -4221,32 +4438,42 @@ var TimelineUplot = ({
       setHighlightedLane,
       handleEventClick,
       tooltipRef,
+      scrollContainerRef,
       theme
     ]
   );
-  return /* @__PURE__ */ react_exports.createElement(TimelineUplotContainer, { legendDisplay, "data-test": "timeline-uplot-container" }, /* @__PURE__ */ react_exports.createElement(TimelineChartContainer, { "data-test": "timeline-chart-container" }, /* @__PURE__ */ react_exports.createElement(
-    TimelineYAxis_default,
-    {
-      height: chartHeight,
-      laneHeight,
-      lanes,
-      yAxisLabelWidth,
-      backgroundColor,
-      highlightedLane,
-      handleLaneClick
-    }
-  ), /* @__PURE__ */ react_exports.createElement(TimelineUplotWrapper, { width: chartWidth }, /* @__PURE__ */ react_exports.createElement(
-    uplot_react_default,
+  return /* @__PURE__ */ react_exports.createElement(TimelineUplotContainer, { legendDisplay, "data-test": "timeline-uplot-container" }, /* @__PURE__ */ react_exports.createElement(
+    TimelineChartScrollArea,
     {
-      key: `timeline-${dprVersion}-${scaleFactor}`,
-      options: opts,
-      data: [[xMin], ...lanes.map(() => [])]
-    }
-  ), /* @__PURE__ */ react_exports.createElement(TimelineTooltip_default, __spreadValues({}, tooltipRef.current)))), showLegend && /* @__PURE__ */ react_exports.createElement(
+      ref: scrollContainerRef,
+      "data-test": "timeline-chart-scroll-area",
+      hasBottomLegend: showLegend && legendDisplay === "bottom",
+      reserveScrollbarGutter
+    },
+    /* @__PURE__ */ react_exports.createElement(TimelineChartContainer, { "data-test": "timeline-chart-container" }, /* @__PURE__ */ react_exports.createElement(
+      TimelineYAxis_default,
+      {
+        height: chartHeight,
+        laneHeight: LANE_HEIGHT,
+        lanes,
+        yAxisLabelWidth,
+        backgroundColor,
+        highlightedLane,
+        handleLaneClick
+      }
+    ), /* @__PURE__ */ react_exports.createElement(TimelineUplotWrapper, { width: chartWidth }, /* @__PURE__ */ react_exports.createElement(
+      uplot_react_default,
+      {
+        key: `timeline-${dprVersion}-${scaleFactor}`,
+        options: opts,
+        data: [[xMin], ...lanes.map(() => [])]
+      }
+    ), /* @__PURE__ */ react_exports.createElement(TimelineTooltip_default, __spreadProps(__spreadValues({}, tooltipRef.current), { scaleFactor }))))
+  ), showLegend && /* @__PURE__ */ react_exports.createElement(
     TimelineLegend_default,
     {
-      height: chartHeight,
-      width: chartWidth,
+      height: laneBandHeight,
+      maxHeight: legendMaxHeight,
       yAxisLabelWidth,
       backgroundColor,
       legendDisplay,
@@ -4296,6 +4523,15 @@ var PureTimeline = (_a) => {
   const showLegend = (!dataColors || (dataColors == null ? void 0 : dataColors.length) === 0) && (category == null ? void 0 : category.length) > 0 && (legendDisplay === "right" || legendDisplay === "bottom");
   const timezone = react_exports.useContext(TimezoneContext_default);
   const theme = (0, themes_exports.useSplunkTheme)();
+  const [containerSize, setContainerSize] = react_exports.useState({
+    width: typeof width === "number" ? width : 0,
+    height: typeof height === "number" ? height : 0
+  });
+  const handleResize = react_exports.useCallback((nextWidth, nextHeight) => {
+    setContainerSize(
+      (current) => current.width === nextWidth && current.height === nextHeight ? current : { width: nextWidth, height: nextHeight }
+    );
+  }, []);
   const { laneSeries, lanes, categoricalColors, tickInterval, hasInvalidData } = mapDataToTimeline({
     resultLimit,
     x,
@@ -4370,11 +4606,13 @@ var PureTimeline = (_a) => {
       height,
       "data-test-data-colors": JSON.stringify(dataColors)
     },
+    /* @__PURE__ */ react_exports.createElement(SizeAwareWrapper_default, { width, height, onResize: handleResize }),
     /* @__PURE__ */ react_exports.createElement(
       TimelineUplot_default,
       {
         backgroundColor: backgroundColor || theme.backgroundColorPage,
-        width,
+        width: containerSize.width,
+        height: containerSize.height,
         lanes,
         laneSeries,
         yAxisLabelWidth,
@@ -4397,8 +4635,8 @@ PureTimeline.propTypes = {
   duration: prop_types_exports.arrayOf(prop_types_exports.oneOfType([prop_types_exports.string, prop_types_exports.number])),
   category: prop_types_exports.arrayOf(prop_types_exports.oneOfType([prop_types_exports.string, prop_types_exports.number])),
   backgroundColor: prop_types_exports.string,
-  width: prop_types_exports.number,
-  height: prop_types_exports.number,
+  width: prop_types_exports.oneOfType([prop_types_exports.string, prop_types_exports.number]),
+  height: prop_types_exports.oneOfType([prop_types_exports.string, prop_types_exports.number]),
   xField: prop_types_exports.string,
   yField: prop_types_exports.string,
   durationField: prop_types_exports.string,