better bubble

web-console/src/components/index.ts

@@ -43,6 +43,7 @@ export * from './menu-checkbox/menu-checkbox';
 export * from './more-button/more-button';
 export * from './plural-pair-if-needed/plural-pair-if-needed';
 export * from './popover-text/popover-text';
+export * from './portal-bubble/portal-bubble';
 export * from './query-error-pane/query-error-pane';
 export * from './record-table-pane/record-table-pane';
 export * from './refresh-button/refresh-button';

web-console/src/components/portal-bubble/portal-bubble.scss

@@ -18,7 +18,7 @@
 
 @import '../../variables';
 
-$shpitz-size: 10px;
+$shpitz-size: 9px;
 
 .portal-bubble {
   position: absolute;
@@ -44,11 +44,18 @@ $shpitz-size: 10px;
     content: '';
     position: absolute;
     transform: translate(-50%, 0);
-    bottom: -$shpitz-size;
-    border-top: $shpitz-size solid $dark-gray1;
     border-right: $shpitz-size solid transparent;
     border-left: $shpitz-size solid transparent;
-    border-bottom: none;
+  }
+
+  &.up > .shpitz {
+    bottom: -$shpitz-size;
+    border-top: $shpitz-size solid $dark-gray1;
+  }
+
+  &.down > .shpitz {
+    top: -$shpitz-size;
+    border-bottom: $shpitz-size solid $dark-gray1;
   }
 
   & > .bubble-title-bar {

web-console/src/components/portal-bubble/portal-bubble.tsx

@@ -27,9 +27,18 @@ import { clamp } from '../../utils';
 
 import './portal-bubble.scss';
 
-interface PortalBubbleProps {
+const SHPITZ_SIZE = 10;
+
+export interface PortalBubbleOpenOn {
+  x: number;
+  y: number;
+  title?: string;
+  text: ReactNode;
+}
+
+export interface PortalBubbleProps {
   className?: string;
-  openOn: { x: number; y: number; title?: string; text: ReactNode } | undefined;
+  openOn: PortalBubbleOpenOn | undefined;
   direction?: 'up' | 'down';
   onClose?(): void;
   mute?: boolean;
@@ -55,7 +64,10 @@ export const PortalBubble = function PortalBubble(props: PortalBubbleProps) {
         if (!element) return;
         setMyWidth(element.offsetWidth);
       }}
-      style={{ left: x, top: openOn.y }}
+      style={{
+        left: x,
+        top: openOn.y + (minimal ? 0 : direction === 'up' ? -SHPITZ_SIZE : SHPITZ_SIZE),
+      }}
     >
       {(openOn.title || onClose) && (
         <div className={classNames('bubble-title-bar', { 'with-close': Boolean(onClose) })}>

web-console/src/components/segment-timeline/segment-bar-chart-render.tsx

@@ -47,11 +47,12 @@ import {
   uniq,
 } from '../../utils';
 import type { Margin, Stage } from '../../utils/stage';
+import type { PortalBubbleOpenOn } from '../portal-bubble/portal-bubble';
+import { PortalBubble } from '../portal-bubble/portal-bubble';
 
 import { ChartAxis } from './chart-axis';
 import type { IntervalBar, IntervalRow, IntervalStat, TrimmedIntervalRow } from './common';
 import { aggregateSegmentStats, formatIntervalStat, formatIsoDateOnly } from './common';
-import { PortalBubble } from './portal-bubble';
 
 import './segment-bar-chart-render.scss';
 
@@ -543,7 +544,7 @@ export const SegmentBarChartRender = function SegmentBarChartRender(
     };
   }
 
-  let hoveredOpenOn: { x: number; y: number; title?: string; text: ReactNode } | undefined;
+  let hoveredOpenOn: PortalBubbleOpenOn | undefined;
   if (svgRef.current) {
     const rect = svgRef.current.getBoundingClientRect();
 
@@ -594,7 +595,7 @@ export const SegmentBarChartRender = function SegmentBarChartRender(
           rect.x +
           CHART_MARGIN.left +
           timeScale(new Date((bubbleInfo.start.valueOf() + bubbleInfo.end.valueOf()) / 2)),
-        y: rect.y + CHART_MARGIN.top - 10,
+        y: rect.y + CHART_MARGIN.top,
         title,
         text,
       };
@@ -611,7 +612,7 @@ export const SegmentBarChartRender = function SegmentBarChartRender(
           rect.x +
           CHART_MARGIN.left +
           timeScale(new Date((selection.start.valueOf() + selection.end.valueOf()) / 2)),
-        y: rect.y + CHART_MARGIN.top - 10,
+        y: rect.y + CHART_MARGIN.top,
         title: `${formatIsoDateOnly(selection.start)} → ${formatIsoDateOnly(selection.end)}`,
         text: (
           <>