simpler tooltip api

pan-kot · pan-kot · commit 10428e881b90 · 2025-03-11T12:15:15.000+01:00
diff --git a/package.json b/package.json
@@ -7,7 +7,7 @@
   },
   "homepage": "https://cloudscape.design",
   "scripts": {
-    "prebuild": "rm -rf lib dist .cache",
+    "prebuild": "rm -rf lib dist .cache && rm -rf node_modules/.vite && rm -rf node_modules/.vite-temp",
     "build": "npm-run-all build:pkg --parallel build:src:* --parallel build:pages:* build:themeable",
     "lint": "npm-run-all --parallel lint:*",
     "lint:eslint": "eslint --ignore-path .gitignore --ext ts,tsx,js .",
diff --git a/src/cartesian-chart/chart-tooltip-cartesian.tsx b/src/cartesian-chart/chart-tooltip-cartesian.tsx
@@ -3,7 +3,7 @@
 
 import { useState } from "react";
 
-import { TooltipContentGetter } from "../core/interfaces-core";
+import { TooltipContent } from "../core/interfaces-core";
 import ChartSeriesDetails, { ChartSeriesDetailItem } from "../internal/components/series-details";
 import { ChartSeriesMarkerStatus, ChartSeriesMarkerType } from "../internal/components/series-marker";
 import { getDefaultFormatter } from "./default-formatters";
@@ -24,14 +24,11 @@ export function useChartTooltipCartesian(
   const { xAxis, series } = props.options;
   const [expandedSeries, setExpandedSeries] = useState<Record<string, Set<string>>>({});
 
-  const getContent: TooltipContentGetter<{ expandedSeries: Record<string, Set<string>> }> = (point: {
-    x: number;
-    y: number;
-  }) => {
+  const getContent = (point: { x: number; y: number }): null | TooltipContent => {
     const chart = getChart();
     if (!chart) {
       console.warn("Chart instance is not available.");
-      return () => ({ title: null, body: null });
+      return null;
     }
 
     const matchedItems: CartesianChartProps.TooltipSeriesDetailItem[] = [];
@@ -120,41 +117,39 @@ export function useChartTooltipCartesian(
 
     const tooltipDetails = { x: point.x, items: matchedItems };
 
-    return ({ expandedSeries }) => {
-      const content = props.tooltip?.content?.(tooltipDetails) ?? (
-        <ChartSeriesDetails
-          details={details}
-          expandedSeries={expandedSeries[point.x]}
-          setExpandedState={(id, isExpanded) => {
-            setExpandedSeries((oldState) => {
-              const expandedSeriesInCurrentCoordinate = new Set(oldState[point.x]);
-              if (isExpanded) {
-                expandedSeriesInCurrentCoordinate.add(id);
-              } else {
-                expandedSeriesInCurrentCoordinate.delete(id);
-              }
-              return {
-                ...oldState,
-                [point.x]: expandedSeriesInCurrentCoordinate,
-              };
-            });
-          }}
-        />
-      );
-
-      const footer = props.tooltip?.footer?.(tooltipDetails);
-
-      const body = content;
-
-      return {
-        title: props.tooltip?.title?.(tooltipDetails) ?? titleFormatter(point.x),
-        body,
-        footer,
-      };
+    const content = props.tooltip?.content?.(tooltipDetails) ?? (
+      <ChartSeriesDetails
+        details={details}
+        expandedSeries={expandedSeries[point.x]}
+        setExpandedState={(id, isExpanded) => {
+          setExpandedSeries((oldState) => {
+            const expandedSeriesInCurrentCoordinate = new Set(oldState[point.x]);
+            if (isExpanded) {
+              expandedSeriesInCurrentCoordinate.add(id);
+            } else {
+              expandedSeriesInCurrentCoordinate.delete(id);
+            }
+            return {
+              ...oldState,
+              [point.x]: expandedSeriesInCurrentCoordinate,
+            };
+          });
+        }}
+      />
+    );
+
+    const footer = props.tooltip?.footer?.(tooltipDetails);
+
+    const body = content;
+
+    return {
+      title: props.tooltip?.title?.(tooltipDetails) ?? titleFormatter(point.x),
+      body,
+      footer,
     };
   };
 
-  return { getContent, state: { expandedSeries } };
+  return { getContent };
 }
 
 function getSeriesMarkerType(series: CartesianChartProps.Series): ChartSeriesMarkerType {
diff --git a/src/core/chart-core.tsx b/src/core/chart-core.tsx
@@ -19,10 +19,10 @@ import { ChartNoDataProps, LegendMarkersProps, TooltipProps } from "./interfaces
 import * as Styles from "./styles";
 import { getSeriesToIdMap } from "./utils";
 
-interface CloudscapeHighchartsCoreProps<TooltipState> {
+interface CloudscapeHighchartsCoreProps {
   highcharts: null | typeof Highcharts;
   options: Highcharts.Options;
-  tooltip?: TooltipProps<TooltipState>;
+  tooltip?: TooltipProps;
   noData?: ChartNoDataProps;
   legendMarkers?: LegendMarkersProps;
   fallback?: React.ReactNode;
@@ -38,7 +38,7 @@ export interface CloudscapeHighchartsRef {
 }
 
 interface CloudscapeHighchartsForwardRefType {
-  <T>(props: CloudscapeHighchartsCoreProps<T> & { ref?: React.Ref<CloudscapeHighchartsRef> }): JSX.Element;
+  (props: CloudscapeHighchartsCoreProps & { ref?: React.Ref<CloudscapeHighchartsRef> }): JSX.Element;
 }
 
 /**
@@ -298,7 +298,7 @@ export const CloudscapeHighcharts = forwardRef(
           }}
         />
 
-        {tooltipProps && <ChartTooltip {...tooltip.props} tooltipState={tooltipProps.state} />}
+        {tooltipProps && <ChartTooltip {...tooltip.props} />}
 
         {noDataProps && <ChartNoData {...noData.props} />}
 
diff --git a/src/core/chart-tooltip.tsx b/src/core/chart-tooltip.tsx
@@ -9,7 +9,7 @@ import { colorChartsLineTick } from "@cloudscape-design/design-tokens";
 import Popover from "../internal/components/popover";
 import AsyncStore, { useSelector } from "../internal/utils/async-store";
 import { DebouncedCall } from "../internal/utils/utils";
-import { Point, TooltipContent, TooltipContentGetter } from "./interfaces-core";
+import { Point, TooltipContent } from "./interfaces-core";
 
 const MOUSE_LEAVE_DELAY = 300;
 const LAST_DISMISS_DELAY = 250;
@@ -19,15 +19,14 @@ const LAST_DISMISS_DELAY = 250;
 // The tooltip is can be hidden then we receive mouse-leave. It can also be pinned/unpinned on mouse click.
 // Despite event names, they events also fire on keyboard interactions.
 
-export function useChartTooltip<State>(
+export function useChartTooltip(
   highcharts: null | typeof Highcharts,
   getChart: () => Highcharts.Chart,
   tooltipProps?: {
-    state: State;
-    getContent: TooltipContentGetter<State>;
+    getContent: (point: Point) => null | TooltipContent;
   },
 ) {
-  const tooltipStore = useRef(new TooltipStore(getChart, tooltipProps?.getContent)).current;
+  const tooltipStore = useRef(new TooltipStore(getChart)).current;
 
   const options: Highcharts.Options = {
     chart: {
@@ -63,21 +62,24 @@ export function useChartTooltip<State>(
     },
   };
 
-  return { options, props: { tooltipStore } };
+  return { options, props: { tooltipStore, getContent: tooltipProps?.getContent ?? (() => null) } };
 }
 
-export function ChartTooltip<TooltipState>({
+export function ChartTooltip({
   tooltipStore,
-  tooltipState,
+  getContent,
 }: {
-  tooltipStore: TooltipStore<TooltipState>;
-  tooltipState: TooltipState;
+  tooltipStore: TooltipStore;
+  getContent: (point: Point) => null | TooltipContent;
 }) {
   const tooltip = useSelector(tooltipStore, (s) => s);
-  if (!tooltip.content) {
+  if (!tooltip.visible) {
+    return null;
+  }
+  const content = getContent(tooltip.point);
+  if (!content) {
     return null;
   }
-  const renderedContent = tooltip.content(tooltipState);
   return (
     <Popover
       getTrack={tooltipStore.getTrack}
@@ -87,36 +89,33 @@ export function ChartTooltip<TooltipState>({
       onDismiss={tooltipStore.onDismiss}
       onMouseEnter={tooltipStore.onMouseEnterTooltip}
       onMouseLeave={tooltipStore.onMouseLeaveTooltip}
-      title={renderedContent.title}
-      footer={renderedContent.footer}
+      title={content.title}
+      footer={content.footer}
     >
-      {renderedContent.body}
+      {content.body}
     </Popover>
   );
 }
 
-interface ReactiveTooltipState<TooltipState> {
+interface ReactiveTooltipState {
   visible: boolean;
   pinned: boolean;
   point: Point;
-  content: null | ((state: TooltipState) => TooltipContent);
 }
 
-class TooltipStore<TooltipState> extends AsyncStore<ReactiveTooltipState<TooltipState>> {
+class TooltipStore extends AsyncStore<ReactiveTooltipState> {
   public getTrack: () => null | HTMLElement | SVGElement = () => null;
 
   private getChart: () => Highcharts.Chart;
-  private getContent?: TooltipContentGetter<TooltipState>;
   private targetElement: null | Highcharts.SVGElement = null;
   private markerElement: null | Highcharts.SVGElement = null;
   private mouseLeaveCall = new DebouncedCall();
   private lastDismissTime = 0;
   private tooltipHovered = false;
 
-  constructor(getChart: () => Highcharts.Chart, getContent?: TooltipContentGetter<TooltipState>) {
-    super({ visible: false, pinned: false, point: { x: 0, y: 0 }, content: null });
+  constructor(getChart: () => Highcharts.Chart) {
+    super({ visible: false, pinned: false, point: { x: 0, y: 0 } });
     this.getChart = getChart;
-    this.getContent = getContent;
   }
 
   // When hovering (or focusing) over the target (point, bar, segment, etc.) we show the tooltip in the target coordinate.
@@ -131,8 +130,7 @@ class TooltipStore<TooltipState> extends AsyncStore<ReactiveTooltipState<Tooltip
     this.moveMarkers(target);
     this.set(() => {
       const point = { x: target.x, y: target.y ?? 0 };
-      const content = this.getContent?.(point) ?? null;
-      return { visible: !!content, pinned: false, point, content };
+      return { visible: true, pinned: false, point };
     });
   };
 
@@ -147,16 +145,14 @@ class TooltipStore<TooltipState> extends AsyncStore<ReactiveTooltipState<Tooltip
       this.moveMarkers(target);
       this.set((prev) => {
         const point = target ? { x: target.x, y: target.y ?? 0 } : prev.point;
-        const content = this.getContent?.(point) ?? null;
-        return { visible: !!content, pinned: false, point, content };
+        return { visible: true, pinned: false, point };
       });
     }
     // If the click point is missing or matches the current position and it wasn't recently dismissed - it is pinned in this position.
     else if (new Date().getTime() - this.lastDismissTime > LAST_DISMISS_DELAY) {
       this.set((prev) => {
         const point = target ? { x: target.x, y: target.y ?? 0 } : prev.point;
-        const content = this.getContent?.(point) ?? null;
-        return { visible: !!content, pinned: !!content, point, content };
+        return { visible: true, pinned: true, point };
       });
     }
   };
diff --git a/src/core/interfaces-core.ts b/src/core/interfaces-core.ts
@@ -65,9 +65,8 @@ export interface CloudscapeHighchartsBase {
   noData?: ChartNoDataProps;
 }
 
-export interface TooltipProps<TooltipState> {
-  state: TooltipState;
-  getContent: TooltipContentGetter<TooltipState>;
+export interface TooltipProps {
+  getContent: (point: Point) => null | TooltipContent;
 }
 
 export interface TooltipContent {
@@ -81,8 +80,6 @@ export interface Point {
   y: number;
 }
 
-export type TooltipContentGetter<State> = (point: Point) => null | ((state: State) => TooltipContent);
-
 export interface ChartNoDataProps {
   statusType?: "finished" | "loading" | "error";
   empty?: React.ReactNode;
diff --git a/src/pie-chart/chart-tooltip-pie.tsx b/src/pie-chart/chart-tooltip-pie.tsx
@@ -3,7 +3,7 @@
 
 import Box from "@cloudscape-design/components/box";
 
-import { TooltipContentGetter } from "../core/interfaces-core";
+import { TooltipContent } from "../core/interfaces-core";
 import ChartSeriesDetails from "../internal/components/series-details";
 import { ChartSeriesMarker } from "../internal/components/series-marker";
 import { InternalPieChartOptions, PieChartProps } from "./interfaces-pie";
@@ -15,11 +15,11 @@ export function useChartTooltipPie(
     tooltip?: PieChartProps.TooltipProps;
   },
 ) {
-  const getContent: TooltipContentGetter<undefined> = (point: { x: number; y: number }) => {
+  const getContent = (point: { x: number; y: number }): null | TooltipContent => {
     const chart = getChart();
     if (!chart) {
       console.warn("Chart instance is not available.");
-      return () => ({ title: null, body: null });
+      return null;
     }
     const series = props.options.series[0] as undefined | PieChartProps.Series;
     const matchedChartSeries = chart.series.find((s) => (s.userOptions.id ?? s.name) === (series?.id ?? series?.name));
@@ -62,10 +62,10 @@ export function useChartTooltipPie(
 
     const footer = props.tooltip?.footer?.(tooltipDetails);
 
-    const body = (content ?? footer) ? content : null;
+    const body = content;
 
-    return () => ({ title, body, footer });
+    return { title, body, footer };
   };
 
-  return { getContent, state: undefined };
+  return { getContent };
 }

Original file line number	Diff line number	Diff line change
`@@ -65,9 +65,8 @@ export interface CloudscapeHighchartsBase {`
`65`	`65`	`noData?: ChartNoDataProps;`
`66`	`66`	`}`
`67`	`67`
`68`		`-export interface TooltipProps<TooltipState> {`
`69`		`- state: TooltipState;`
`70`		`- getContent: TooltipContentGetter<TooltipState>;`
	`68`	`+export interface TooltipProps {`
	`69`	`+ getContent: (point: Point) => null \| TooltipContent;`
`71`	`70`	`}`
`72`	`71`
`73`	`72`	`export interface TooltipContent {`
`@@ -81,8 +80,6 @@ export interface Point {`
`81`	`80`	`y: number;`
`82`	`81`	`}`
`83`	`82`
`84`		`-export type TooltipContentGetter<State> = (point: Point) => null \| ((state: State) => TooltipContent);`
`85`		`-`
`86`	`83`	`export interface ChartNoDataProps {`
`87`	`84`	`statusType?: "finished" \| "loading" \| "error";`
`88`	`85`	`empty?: React.ReactNode;`