@perses-dev/components 0.55.0-rc.1 → 0.56.0-beta.0

package/dist/TimeSeriesTooltip/SeriesMarker.js

@@ -11,23 +11,50 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { jsx as _jsx } from "react/jsx-runtime";
+import { c as _c } from "react-compiler-runtime";
 import { Box } from "@mui/material";
 import { combineSx } from "../utils/index.js";
 export function SeriesMarker(props) {
+    const $ = _c(7);
     const { markerColor, sx } = props;
-    return /*#__PURE__*/ _jsx(Box, {
-        sx: combineSx({
-            display: 'inline-block',
-            width: '11px',
-            height: '11px',
-            borderRadius: '2px',
+    let t0;
+    if ($[0] !== sx) {
+        t0 = combineSx({
+            display: "inline-block",
+            width: "11px",
+            height: "11px",
+            borderRadius: "2px",
             marginRight: 1,
-            verticalAlign: 'top'
-        }, sx),
-        style: {
+            verticalAlign: "top"
+        }, sx);
+        $[0] = sx;
+        $[1] = t0;
+    } else {
+        t0 = $[1];
+    }
+    let t1;
+    if ($[2] !== markerColor) {
+        t1 = {
             backgroundColor: markerColor
-        }
-    });
+        };
+        $[2] = markerColor;
+        $[3] = t1;
+    } else {
+        t1 = $[3];
+    }
+    let t2;
+    if ($[4] !== t0 || $[5] !== t1) {
+        t2 = /*#__PURE__*/ _jsx(Box, {
+            sx: t0,
+            style: t1
+        });
+        $[4] = t0;
+        $[5] = t1;
+        $[6] = t2;
+    } else {
+        t2 = $[6];
+    }
+    return t2;
 }
 
 //# sourceMappingURL=SeriesMarker.js.map

package/dist/TimeSeriesTooltip/SeriesMarker.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/TimeSeriesTooltip/SeriesMarker.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport type { BoxProps } from '@mui/material';\nimport { Box } from '@mui/material';\nimport type { ReactElement } from 'react';\n\nimport { combineSx } from '../utils';\n\ninterface SeriesMarkerProps extends BoxProps<'div'> {\n  markerColor: string;\n}\n\nexport function SeriesMarker(props: SeriesMarkerProps): ReactElement {\n  const { markerColor, sx } = props;\n  return (\n    <Box\n      sx={combineSx(\n        {\n          display: 'inline-block',\n          width: '11px',\n          height: '11px',\n          borderRadius: '2px',\n          marginRight: 1,\n          verticalAlign: 'top',\n        },\n        sx,\n      )}\n      style={{ backgroundColor: markerColor }}\n    ></Box>\n  );\n}\n"],"names":["Box","combineSx","SeriesMarker","props","markerColor","sx","display","width","height","borderRadius","marginRight","verticalAlign","style","backgroundColor"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAGjC,SAASA,GAAG,QAAQ,gBAAgB;AAGpC,SAASC,SAAS,QAAQ,oBAAW;AAMrC,OAAO,SAASC,aAAaC,KAAwB;IACnD,MAAM,EAAEC,WAAW,EAAEC,EAAE,EAAE,GAAGF;IAC5B,qBACE,KAACH;QACCK,IAAIJ,UACF;YACEK,SAAS;YACTC,OAAO;YACPC,QAAQ;YACRC,cAAc;YACdC,aAAa;YACbC,eAAe;QACjB,GACAN;QAEFO,OAAO;YAAEC,iBAAiBT;QAAY;;AAG5C"}
+{"version":3,"sources":["../../src/TimeSeriesTooltip/SeriesMarker.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport type { BoxProps } from '@mui/material';\nimport { Box } from '@mui/material';\nimport type { ReactElement } from 'react';\n\nimport { combineSx } from '../utils';\n\ninterface SeriesMarkerProps extends BoxProps<'div'> {\n  markerColor: string;\n}\n\nexport function SeriesMarker(props: SeriesMarkerProps): ReactElement {\n  const { markerColor, sx } = props;\n  return (\n    <Box\n      sx={combineSx(\n        {\n          display: 'inline-block',\n          width: '11px',\n          height: '11px',\n          borderRadius: '2px',\n          marginRight: 1,\n          verticalAlign: 'top',\n        },\n        sx,\n      )}\n      style={{ backgroundColor: markerColor }}\n    ></Box>\n  );\n}\n"],"names":["Box","combineSx"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;;AAGjC,SAASA,GAAG,QAAQ,gBAAgB;AAGpC,SAASC,SAAS,QAAQ,oBAAW;AAMrC,OAAO"}

package/dist/TimeSeriesTooltip/TimeChartTooltip.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { c as _c } from "react-compiler-runtime";
 // Copyright The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
@@ -12,100 +13,256 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { Box, Portal, Stack } from "@mui/material";
-import { memo, useCallback, useLayoutEffect, useRef, useState } from "react";
-import useResizeObserver from "use-resize-observer";
+import { memo, useLayoutEffect, useRef, useState } from "react";
+import { useResizeObserver } from "use-resize-observer";
 import { getNearbySeriesData } from "./nearby-series.js";
 import { useMousePosition } from "./tooltip-model.js";
 import { TooltipContent } from "./TooltipContent.js";
 import { TooltipHeader } from "./TooltipHeader.js";
 import { assembleTransform, getTooltipStyles } from "./utils.js";
-export const TimeChartTooltip = /*#__PURE__*/ memo(function TimeChartTooltip({ containerId, chartRef, data, seriesMapping, enablePinning = true, wrapLabels, format, seriesFormatMap, onUnpinClick, pinnedPos }) {
+export const TimeChartTooltip = /*#__PURE__*/ memo(function TimeChartTooltip(t0) {
+    const $ = _c(54);
+    const { containerId, chartRef, data, seriesMapping, enablePinning: t1, wrapLabels, format, seriesFormatMap, onUnpinClick, pinnedPos } = t0;
+    const enablePinning = t1 === undefined ? true : t1;
     const [showAllSeries, setShowAllSeries] = useState(false);
-    const [nearbySeries, setNearbySeries] = useState([]);
+    let t2;
+    if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+        t2 = [];
+        $[0] = t2;
+    } else {
+        t2 = $[0];
+    }
+    const [nearbySeries, setNearbySeries] = useState(t2);
     const tooltipElementRef = useRef(null);
     const mousePos = useMousePosition();
     const { height, width, ref: tooltipRef } = useResizeObserver();
     const isTooltipPinned = pinnedPos !== null && enablePinning;
-    // Stable callback — prevents the ResizeObserver from disconnecting/reconnecting on every render.
-    const setTooltipRef = useCallback((node)=>{
-        tooltipElementRef.current = node;
-        tooltipRef(node);
-    }, [
-        tooltipRef
-    ]);
-    const containerElement = containerId ? document.querySelector(containerId) : undefined;
-    // Chart reads and highlight actions synchronize with ECharts after commit.
-    useLayoutEffect(()=>{
-        const chart = chartRef.current;
-        setNearbySeries(getNearbySeriesData({
+    let t3;
+    if ($[1] !== tooltipRef) {
+        t3 = (node)=>{
+            tooltipElementRef.current = node;
+            tooltipRef(node);
+        };
+        $[1] = tooltipRef;
+        $[2] = t3;
+    } else {
+        t3 = $[2];
+    }
+    const setTooltipRef = t3;
+    let t4;
+    if ($[3] !== containerId) {
+        t4 = containerId ? document.querySelector(containerId) : undefined;
+        $[3] = containerId;
+        $[4] = t4;
+    } else {
+        t4 = $[4];
+    }
+    const containerElement = t4;
+    let t5;
+    let t6;
+    if ($[5] !== chartRef || $[6] !== data || $[7] !== format || $[8] !== mousePos || $[9] !== pinnedPos || $[10] !== seriesFormatMap || $[11] !== seriesMapping || $[12] !== showAllSeries) {
+        t5 = ()=>{
+            const chart = chartRef.current;
+            setNearbySeries(getNearbySeriesData({
+                mousePos,
+                data,
+                seriesMapping,
+                pinnedPos,
+                chart,
+                format,
+                seriesFormatMap,
+                showAllSeries
+            }));
+        };
+        t6 = [
+            chartRef,
             mousePos,
             data,
             seriesMapping,
             pinnedPos,
-            chart,
             format,
             seriesFormatMap,
             showAllSeries
-        }));
-    }, [
-        chartRef,
-        mousePos,
-        data,
-        seriesMapping,
-        pinnedPos,
-        format,
-        seriesFormatMap,
-        showAllSeries
-    ]);
-    // Synchronously reposition after every render to prevent one-frame viewport overflow.
-    useLayoutEffect(()=>{
-        if (mousePos === null) return;
-        const node = tooltipElementRef.current;
-        if (!node) return;
-        const rect = node.getBoundingClientRect();
-        if (rect.height === 0 || rect.width === 0) return;
-        const nextTransform = assembleTransform(mousePos, pinnedPos, rect.height, rect.width, containerElement);
-        if (nextTransform && nextTransform !== node.style.transform) {
-            node.style.transform = nextTransform;
-        }
-    });
-    if (mousePos === null || mousePos.target === null || data === null) return null;
-    if (pinnedPos === null && mousePos.target.tagName !== 'CANVAS') return null;
-    // Cap height to container so the tooltip is not cut off.
-    const maxHeight = containerElement ? containerElement.getBoundingClientRect().height : undefined;
-    const transform = assembleTransform(mousePos, pinnedPos, height ?? 0, width ?? 0, containerElement);
+        ];
+        $[5] = chartRef;
+        $[6] = data;
+        $[7] = format;
+        $[8] = mousePos;
+        $[9] = pinnedPos;
+        $[10] = seriesFormatMap;
+        $[11] = seriesMapping;
+        $[12] = showAllSeries;
+        $[13] = t5;
+        $[14] = t6;
+    } else {
+        t5 = $[13];
+        t6 = $[14];
+    }
+    useLayoutEffect(t5, t6);
+    let t7;
+    if ($[15] !== containerElement || $[16] !== mousePos || $[17] !== pinnedPos) {
+        t7 = ()=>{
+            if (mousePos === null) {
+                return;
+            }
+            const node_0 = tooltipElementRef.current;
+            if (!node_0) {
+                return;
+            }
+            const rect = node_0.getBoundingClientRect();
+            if (rect.height === 0 || rect.width === 0) {
+                return;
+            }
+            const nextTransform = assembleTransform(mousePos, pinnedPos, rect.height, rect.width, containerElement);
+            if (nextTransform && nextTransform !== node_0.style.transform) {
+                node_0.style.transform = nextTransform;
+            }
+        };
+        $[15] = containerElement;
+        $[16] = mousePos;
+        $[17] = pinnedPos;
+        $[18] = t7;
+    } else {
+        t7 = $[18];
+    }
+    useLayoutEffect(t7);
+    if (mousePos === null || mousePos.target === null || data === null) {
+        return null;
+    }
+    if (pinnedPos === null && mousePos.target.tagName !== "CANVAS") {
+        return null;
+    }
+    let t8;
+    if ($[19] !== containerElement) {
+        t8 = containerElement ? containerElement.getBoundingClientRect().height : undefined;
+        $[19] = containerElement;
+        $[20] = t8;
+    } else {
+        t8 = $[20];
+    }
+    const maxHeight = t8;
+    const t9 = height ?? 0;
+    const t10 = width ?? 0;
+    let t11;
+    if ($[21] !== containerElement || $[22] !== mousePos || $[23] !== pinnedPos || $[24] !== t10 || $[25] !== t9) {
+        t11 = assembleTransform(mousePos, pinnedPos, t9, t10, containerElement);
+        $[21] = containerElement;
+        $[22] = mousePos;
+        $[23] = pinnedPos;
+        $[24] = t10;
+        $[25] = t9;
+        $[26] = t11;
+    } else {
+        t11 = $[26];
+    }
+    const transform = t11;
     if (nearbySeries.length === 0) {
         return null;
     }
     const totalSeries = data.length;
-    return /*#__PURE__*/ _jsx(Portal, {
-        container: containerElement,
-        children: /*#__PURE__*/ _jsx(Box, {
+    let t12;
+    if ($[27] !== maxHeight || $[28] !== pinnedPos) {
+        t12 = (theme)=>getTooltipStyles(theme, pinnedPos, maxHeight);
+        $[27] = maxHeight;
+        $[28] = pinnedPos;
+        $[29] = t12;
+    } else {
+        t12 = $[29];
+    }
+    let t13;
+    if ($[30] !== transform) {
+        t13 = {
+            transform
+        };
+        $[30] = transform;
+        $[31] = t13;
+    } else {
+        t13 = $[31];
+    }
+    let t14;
+    if ($[32] === Symbol.for("react.memo_cache_sentinel")) {
+        t14 = (checked)=>setShowAllSeries(checked);
+        $[32] = t14;
+    } else {
+        t14 = $[32];
+    }
+    let t15;
+    if ($[33] !== enablePinning || $[34] !== isTooltipPinned || $[35] !== nearbySeries || $[36] !== onUnpinClick || $[37] !== showAllSeries || $[38] !== totalSeries) {
+        t15 = /*#__PURE__*/ _jsx(TooltipHeader, {
+            nearbySeries: nearbySeries,
+            totalSeries: totalSeries,
+            enablePinning: enablePinning,
+            isTooltipPinned: isTooltipPinned,
+            showAllSeries: showAllSeries,
+            onShowAllClick: t14,
+            onUnpinClick: onUnpinClick
+        });
+        $[33] = enablePinning;
+        $[34] = isTooltipPinned;
+        $[35] = nearbySeries;
+        $[36] = onUnpinClick;
+        $[37] = showAllSeries;
+        $[38] = totalSeries;
+        $[39] = t15;
+    } else {
+        t15 = $[39];
+    }
+    let t16;
+    if ($[40] !== nearbySeries || $[41] !== wrapLabels) {
+        t16 = /*#__PURE__*/ _jsx(TooltipContent, {
+            series: nearbySeries,
+            wrapLabels: wrapLabels
+        });
+        $[40] = nearbySeries;
+        $[41] = wrapLabels;
+        $[42] = t16;
+    } else {
+        t16 = $[42];
+    }
+    let t17;
+    if ($[43] !== t15 || $[44] !== t16) {
+        t17 = /*#__PURE__*/ _jsxs(Stack, {
+            spacing: 0.5,
+            children: [
+                t15,
+                t16
+            ]
+        });
+        $[43] = t15;
+        $[44] = t16;
+        $[45] = t17;
+    } else {
+        t17 = $[45];
+    }
+    let t18;
+    if ($[46] !== setTooltipRef || $[47] !== t12 || $[48] !== t13 || $[49] !== t17) {
+        t18 = /*#__PURE__*/ _jsx(Box, {
             ref: setTooltipRef,
-            sx: (theme)=>getTooltipStyles(theme, pinnedPos, maxHeight),
-            style: {
-                transform
-            },
-            children: /*#__PURE__*/ _jsxs(Stack, {
-                spacing: 0.5,
-                children: [
-                    /*#__PURE__*/ _jsx(TooltipHeader, {
-                        nearbySeries: nearbySeries,
-                        totalSeries: totalSeries,
-                        enablePinning: enablePinning,
-                        isTooltipPinned: isTooltipPinned,
-                        showAllSeries: showAllSeries,
-                        onShowAllClick: (checked)=>setShowAllSeries(checked),
-                        onUnpinClick: onUnpinClick
-                    }),
-                    /*#__PURE__*/ _jsx(TooltipContent, {
-                        series: nearbySeries,
-                        wrapLabels: wrapLabels
-                    })
-                ]
-            })
-        })
-    });
+            sx: t12,
+            style: t13,
+            children: t17
+        });
+        $[46] = setTooltipRef;
+        $[47] = t12;
+        $[48] = t13;
+        $[49] = t17;
+        $[50] = t18;
+    } else {
+        t18 = $[50];
+    }
+    let t19;
+    if ($[51] !== containerElement || $[52] !== t18) {
+        t19 = /*#__PURE__*/ _jsx(Portal, {
+            container: containerElement,
+            children: t18
+        });
+        $[51] = containerElement;
+        $[52] = t18;
+        $[53] = t19;
+    } else {
+        t19 = $[53];
+    }
+    return t19;
 });
 
 //# sourceMappingURL=TimeChartTooltip.js.map

package/dist/TimeSeriesTooltip/TimeChartTooltip.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/TimeSeriesTooltip/TimeChartTooltip.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Box, Portal, Stack } from '@mui/material';\nimport type { TimeSeries } from '@perses-dev/spec';\nimport type { ECharts as EChartsInstance } from 'echarts/core';\nimport type { MutableRefObject } from 'react';\nimport { memo, useCallback, useLayoutEffect, useRef, useState } from 'react';\nimport useResizeObserver from 'use-resize-observer';\n\nimport type { FormatOptions, TimeChartSeriesMapping } from '../model';\nimport type { NearbySeriesArray } from './nearby-series';\nimport { getNearbySeriesData } from './nearby-series';\nimport type { CursorCoordinates } from './tooltip-model';\nimport { useMousePosition } from './tooltip-model';\nimport { TooltipContent } from './TooltipContent';\nimport { TooltipHeader } from './TooltipHeader';\nimport { assembleTransform, getTooltipStyles } from './utils';\n\nexport interface TimeChartTooltipProps {\n  chartRef: MutableRefObject<EChartsInstance | undefined>;\n  data: TimeSeries[];\n  seriesMapping: TimeChartSeriesMapping;\n  enablePinning?: boolean;\n  pinnedPos: CursorCoordinates | null;\n  /**\n   * The id of the container that will have the chart tooltip appended to it.\n   * By default, the chart tooltip is attached to document.body.\n   */\n  containerId?: string;\n  onUnpinClick?: () => void;\n  format?: FormatOptions;\n  /**\n   * Map of series ID to format options for per-series formatting (used with multiple Y axes)\n   */\n  seriesFormatMap?: Map<string, FormatOptions>;\n  wrapLabels?: boolean;\n}\n\nexport const TimeChartTooltip = memo(function TimeChartTooltip({\n  containerId,\n  chartRef,\n  data,\n  seriesMapping,\n  enablePinning = true,\n  wrapLabels,\n  format,\n  seriesFormatMap,\n  onUnpinClick,\n  pinnedPos,\n}: TimeChartTooltipProps) {\n  const [showAllSeries, setShowAllSeries] = useState(false);\n  const [nearbySeries, setNearbySeries] = useState<NearbySeriesArray>([]);\n  const tooltipElementRef = useRef<HTMLDivElement | null>(null);\n\n  const mousePos = useMousePosition();\n  const { height, width, ref: tooltipRef } = useResizeObserver();\n\n  const isTooltipPinned = pinnedPos !== null && enablePinning;\n\n  // Stable callback — prevents the ResizeObserver from disconnecting/reconnecting on every render.\n  const setTooltipRef = useCallback(\n    (node: HTMLDivElement | null): void => {\n      tooltipElementRef.current = node;\n      tooltipRef(node);\n    },\n    [tooltipRef],\n  );\n\n  const containerElement = containerId ? document.querySelector(containerId) : undefined;\n\n  // Chart reads and highlight actions synchronize with ECharts after commit.\n  useLayoutEffect(() => {\n    const chart = chartRef.current;\n    setNearbySeries(\n      getNearbySeriesData({\n        mousePos,\n        data,\n        seriesMapping,\n        pinnedPos,\n        chart,\n        format,\n        seriesFormatMap,\n        showAllSeries,\n      }),\n    );\n  }, [chartRef, mousePos, data, seriesMapping, pinnedPos, format, seriesFormatMap, showAllSeries]);\n\n  // Synchronously reposition after every render to prevent one-frame viewport overflow.\n  useLayoutEffect(() => {\n    if (mousePos === null) return;\n    const node = tooltipElementRef.current;\n    if (!node) return;\n    const rect = node.getBoundingClientRect();\n    if (rect.height === 0 || rect.width === 0) return;\n    const nextTransform = assembleTransform(mousePos, pinnedPos, rect.height, rect.width, containerElement);\n    if (nextTransform && nextTransform !== node.style.transform) {\n      node.style.transform = nextTransform;\n    }\n  });\n\n  if (mousePos === null || mousePos.target === null || data === null) return null;\n\n  if (pinnedPos === null && (mousePos.target as HTMLElement).tagName !== 'CANVAS') return null;\n\n  // Cap height to container so the tooltip is not cut off.\n  const maxHeight = containerElement ? containerElement.getBoundingClientRect().height : undefined;\n\n  const transform = assembleTransform(mousePos, pinnedPos, height ?? 0, width ?? 0, containerElement);\n\n  if (nearbySeries.length === 0) {\n    return null;\n  }\n\n  const totalSeries = data.length;\n\n  return (\n    <Portal container={containerElement}>\n      <Box\n        ref={setTooltipRef}\n        sx={(theme) => getTooltipStyles(theme, pinnedPos, maxHeight)}\n        style={{\n          transform,\n        }}\n      >\n        <Stack spacing={0.5}>\n          <TooltipHeader\n            nearbySeries={nearbySeries}\n            totalSeries={totalSeries}\n            enablePinning={enablePinning}\n            isTooltipPinned={isTooltipPinned}\n            showAllSeries={showAllSeries}\n            onShowAllClick={(checked) => setShowAllSeries(checked)}\n            onUnpinClick={onUnpinClick}\n          />\n          <TooltipContent series={nearbySeries} wrapLabels={wrapLabels} />\n        </Stack>\n      </Box>\n    </Portal>\n  );\n});\n"],"names":["Box","Portal","Stack","memo","useCallback","useLayoutEffect","useRef","useState","useResizeObserver","getNearbySeriesData","useMousePosition","TooltipContent","TooltipHeader","assembleTransform","getTooltipStyles","TimeChartTooltip","containerId","chartRef","data","seriesMapping","enablePinning","wrapLabels","format","seriesFormatMap","onUnpinClick","pinnedPos","showAllSeries","setShowAllSeries","nearbySeries","setNearbySeries","tooltipElementRef","mousePos","height","width","ref","tooltipRef","isTooltipPinned","setTooltipRef","node","current","containerElement","document","querySelector","undefined","chart","rect","getBoundingClientRect","nextTransform","style","transform","target","tagName","maxHeight","length","totalSeries","container","sx","theme","spacing","onShowAllClick","checked","series"],"mappings":"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"}
+{"version":3,"sources":["../../src/TimeSeriesTooltip/TimeChartTooltip.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Box, Portal, Stack } from '@mui/material';\nimport type { TimeSeries } from '@perses-dev/spec';\nimport type { ECharts as EChartsInstance } from 'echarts/core';\nimport type { MutableRefObject } from 'react';\nimport { memo, useCallback, useLayoutEffect, useRef, useState } from 'react';\nimport { useResizeObserver } from 'use-resize-observer';\n\nimport type { FormatOptions, TimeChartSeriesMapping } from '../model';\nimport type { NearbySeriesArray } from './nearby-series';\nimport { getNearbySeriesData } from './nearby-series';\nimport type { CursorCoordinates } from './tooltip-model';\nimport { useMousePosition } from './tooltip-model';\nimport { TooltipContent } from './TooltipContent';\nimport { TooltipHeader } from './TooltipHeader';\nimport { assembleTransform, getTooltipStyles } from './utils';\n\nexport interface TimeChartTooltipProps {\n  chartRef: MutableRefObject<EChartsInstance | undefined>;\n  data: TimeSeries[];\n  seriesMapping: TimeChartSeriesMapping;\n  enablePinning?: boolean;\n  pinnedPos: CursorCoordinates | null;\n  /**\n   * The id of the container that will have the chart tooltip appended to it.\n   * By default, the chart tooltip is attached to document.body.\n   */\n  containerId?: string;\n  onUnpinClick?: () => void;\n  format?: FormatOptions;\n  /**\n   * Map of series ID to format options for per-series formatting (used with multiple Y axes)\n   */\n  seriesFormatMap?: Map<string, FormatOptions>;\n  wrapLabels?: boolean;\n}\n\nexport const TimeChartTooltip = memo(function TimeChartTooltip({\n  containerId,\n  chartRef,\n  data,\n  seriesMapping,\n  enablePinning = true,\n  wrapLabels,\n  format,\n  seriesFormatMap,\n  onUnpinClick,\n  pinnedPos,\n}: TimeChartTooltipProps) {\n  const [showAllSeries, setShowAllSeries] = useState(false);\n  const [nearbySeries, setNearbySeries] = useState<NearbySeriesArray>([]);\n  const tooltipElementRef = useRef<HTMLDivElement | null>(null);\n\n  const mousePos = useMousePosition();\n  const { height, width, ref: tooltipRef } = useResizeObserver();\n\n  const isTooltipPinned = pinnedPos !== null && enablePinning;\n\n  // Stable callback — prevents the ResizeObserver from disconnecting/reconnecting on every render.\n  const setTooltipRef = useCallback(\n    (node: HTMLDivElement | null): void => {\n      tooltipElementRef.current = node;\n      tooltipRef(node);\n    },\n    [tooltipRef],\n  );\n\n  const containerElement = containerId ? document.querySelector(containerId) : undefined;\n\n  // Chart reads and highlight actions synchronize with ECharts after commit.\n  useLayoutEffect(() => {\n    const chart = chartRef.current;\n    setNearbySeries(\n      getNearbySeriesData({\n        mousePos,\n        data,\n        seriesMapping,\n        pinnedPos,\n        chart,\n        format,\n        seriesFormatMap,\n        showAllSeries,\n      }),\n    );\n  }, [chartRef, mousePos, data, seriesMapping, pinnedPos, format, seriesFormatMap, showAllSeries]);\n\n  // Synchronously reposition after every render to prevent one-frame viewport overflow.\n  useLayoutEffect(() => {\n    if (mousePos === null) return;\n    const node = tooltipElementRef.current;\n    if (!node) return;\n    const rect = node.getBoundingClientRect();\n    if (rect.height === 0 || rect.width === 0) return;\n    const nextTransform = assembleTransform(mousePos, pinnedPos, rect.height, rect.width, containerElement);\n    if (nextTransform && nextTransform !== node.style.transform) {\n      node.style.transform = nextTransform;\n    }\n  });\n\n  if (mousePos === null || mousePos.target === null || data === null) return null;\n\n  if (pinnedPos === null && (mousePos.target as HTMLElement).tagName !== 'CANVAS') return null;\n\n  // Cap height to container so the tooltip is not cut off.\n  const maxHeight = containerElement ? containerElement.getBoundingClientRect().height : undefined;\n\n  const transform = assembleTransform(mousePos, pinnedPos, height ?? 0, width ?? 0, containerElement);\n\n  if (nearbySeries.length === 0) {\n    return null;\n  }\n\n  const totalSeries = data.length;\n\n  return (\n    <Portal container={containerElement}>\n      <Box\n        ref={setTooltipRef}\n        sx={(theme) => getTooltipStyles(theme, pinnedPos, maxHeight)}\n        style={{\n          transform,\n        }}\n      >\n        <Stack spacing={0.5}>\n          <TooltipHeader\n            nearbySeries={nearbySeries}\n            totalSeries={totalSeries}\n            enablePinning={enablePinning}\n            isTooltipPinned={isTooltipPinned}\n            showAllSeries={showAllSeries}\n            onShowAllClick={(checked) => setShowAllSeries(checked)}\n            onUnpinClick={onUnpinClick}\n          />\n          <TooltipContent series={nearbySeries} wrapLabels={wrapLabels} />\n        </Stack>\n      </Box>\n    </Portal>\n  );\n});\n"],"names":["Box","Portal","Stack","memo","useLayoutEffect","useRef","useState","useResizeObserver","getNearbySeriesData","useMousePosition","TooltipContent","TooltipHeader","assembleTransform","getTooltipStyles","TimeChartTooltip"],"mappings":";;AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,GAAG,EAAEC,MAAM,EAAEC,KAAK,QAAQ,gBAAgB;AAInD,SAASC,IAAI,EAAeC,eAAe,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,QAAQ;AAC7E,SAASC,iBAAiB,QAAQ,sBAAsB;AAIxD,SAASC,mBAAmB,QAAQ,qBAAkB;AAEtD,SAASC,gBAAgB,QAAQ,qBAAkB;AACnD,SAASC,cAAc,QAAQ,sBAAmB;AAClD,SAASC,aAAa,QAAQ,qBAAkB;AAChD,SAASC,iBAAiB,EAAEC,gBAAgB,QAAQ,aAAU;AAsB9D,OAAO,MAAMC,iCAAmBX,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqGlC"}

package/dist/TimeSeriesTooltip/TooltipContent.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { c as _c } from "react-compiler-runtime";
 // Copyright The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
@@ -12,39 +13,84 @@ import { jsx as _jsx } from "react/jsx-runtime";
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { Box } from "@mui/material";
-import { useMemo } from "react";
 import { SeriesInfo } from "./SeriesInfo.js";
 export function TooltipContent(props) {
+    const $ = _c(10);
     const { series, wrapLabels } = props;
-    const sortedFocusedSeries = useMemo(()=>{
-        if (series === null) return null;
-        return series.toSorted((a, b)=>a.y > b.y ? -1 : 1);
-    }, [
-        series
-    ]);
+    let t0;
+    bb0: {
+        if (series === null) {
+            t0 = null;
+            break bb0;
+        }
+        let t1;
+        if ($[0] !== series) {
+            t1 = series.toSorted(_temp);
+            $[0] = series;
+            $[1] = t1;
+        } else {
+            t1 = $[1];
+        }
+        t0 = t1;
+    }
+    const sortedFocusedSeries = t0;
     if (series === null || sortedFocusedSeries === null) {
         return null;
     }
-    // TODO: use react-virtuoso to improve performance
-    return /*#__PURE__*/ _jsx(Box, {
-        sx: (theme)=>({
-                display: 'table',
-                padding: theme.spacing(0.5, 2)
-            }),
-        children: sortedFocusedSeries.map(({ datumIdx, seriesIdx, seriesName, y, formattedY, markerColor, isClosestToCursor })=>{
-            if (datumIdx === null || seriesIdx === null) return null;
-            const key = seriesIdx.toString() + datumIdx.toString();
-            return /*#__PURE__*/ _jsx(SeriesInfo, {
-                seriesName: seriesName,
-                y: y,
-                formattedY: formattedY,
-                markerColor: markerColor,
-                totalSeries: sortedFocusedSeries.length,
-                wrapLabels: wrapLabels,
-                emphasizeText: isClosestToCursor
-            }, key);
-        })
-    });
+    let t1;
+    if ($[2] !== sortedFocusedSeries || $[3] !== wrapLabels) {
+        let t2;
+        if ($[5] !== sortedFocusedSeries.length || $[6] !== wrapLabels) {
+            t2 = (t3)=>{
+                const { datumIdx, seriesIdx, seriesName, y, formattedY, markerColor, isClosestToCursor } = t3;
+                if (datumIdx === null || seriesIdx === null) {
+                    return null;
+                }
+                const key = seriesIdx.toString() + datumIdx.toString();
+                return /*#__PURE__*/ _jsx(SeriesInfo, {
+                    seriesName: seriesName,
+                    y: y,
+                    formattedY: formattedY,
+                    markerColor: markerColor,
+                    totalSeries: sortedFocusedSeries.length,
+                    wrapLabels: wrapLabels,
+                    emphasizeText: isClosestToCursor
+                }, key);
+            };
+            $[5] = sortedFocusedSeries.length;
+            $[6] = wrapLabels;
+            $[7] = t2;
+        } else {
+            t2 = $[7];
+        }
+        t1 = sortedFocusedSeries.map(t2);
+        $[2] = sortedFocusedSeries;
+        $[3] = wrapLabels;
+        $[4] = t1;
+    } else {
+        t1 = $[4];
+    }
+    let t2;
+    if ($[8] !== t1) {
+        t2 = /*#__PURE__*/ _jsx(Box, {
+            sx: _temp2,
+            children: t1
+        });
+        $[8] = t1;
+        $[9] = t2;
+    } else {
+        t2 = $[9];
+    }
+    return t2;
+}
+function _temp2(theme) {
+    return {
+        display: "table",
+        padding: theme.spacing(0.5, 2)
+    };
+}
+function _temp(a, b) {
+    return a.y > b.y ? -1 : 1;
 }
 
 //# sourceMappingURL=TooltipContent.js.map

package/dist/TimeSeriesTooltip/TooltipContent.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/TimeSeriesTooltip/TooltipContent.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Box } from '@mui/material';\nimport type { ReactElement } from 'react';\nimport { useMemo } from 'react';\n\nimport { SeriesInfo } from './SeriesInfo';\nimport type { NearbySeriesArray } from './types';\n\nexport interface TooltipContentProps {\n  series: NearbySeriesArray | null;\n  wrapLabels?: boolean;\n}\n\nexport function TooltipContent(props: TooltipContentProps): ReactElement | null {\n  const { series, wrapLabels } = props;\n\n  const sortedFocusedSeries = useMemo(() => {\n    if (series === null) return null;\n    return series.toSorted((a, b) => (a.y > b.y ? -1 : 1));\n  }, [series]);\n\n  if (series === null || sortedFocusedSeries === null) {\n    return null;\n  }\n  // TODO: use react-virtuoso to improve performance\n  return (\n    <Box\n      sx={(theme) => ({\n        display: 'table',\n        padding: theme.spacing(0.5, 2),\n      })}\n    >\n      {sortedFocusedSeries.map(({ datumIdx, seriesIdx, seriesName, y, formattedY, markerColor, isClosestToCursor }) => {\n        if (datumIdx === null || seriesIdx === null) return null;\n        const key = seriesIdx.toString() + datumIdx.toString();\n\n        return (\n          <SeriesInfo\n            key={key}\n            seriesName={seriesName}\n            y={y}\n            formattedY={formattedY}\n            markerColor={markerColor}\n            totalSeries={sortedFocusedSeries.length}\n            wrapLabels={wrapLabels}\n            emphasizeText={isClosestToCursor}\n          />\n        );\n      })}\n    </Box>\n  );\n}\n"],"names":["Box","useMemo","SeriesInfo","TooltipContent","props","series","wrapLabels","sortedFocusedSeries","toSorted","a","b","y","sx","theme","display","padding","spacing","map","datumIdx","seriesIdx","seriesName","formattedY","markerColor","isClosestToCursor","key","toString","totalSeries","length","emphasizeText"],"mappings":";AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,GAAG,QAAQ,gBAAgB;AAEpC,SAASC,OAAO,QAAQ,QAAQ;AAEhC,SAASC,UAAU,QAAQ,kBAAe;AAQ1C,OAAO,SAASC,eAAeC,KAA0B;IACvD,MAAM,EAAEC,MAAM,EAAEC,UAAU,EAAE,GAAGF;IAE/B,MAAMG,sBAAsBN,QAAQ;QAClC,IAAII,WAAW,MAAM,OAAO;QAC5B,OAAOA,OAAOG,QAAQ,CAAC,CAACC,GAAGC,IAAOD,EAAEE,CAAC,GAAGD,EAAEC,CAAC,GAAG,CAAC,IAAI;IACrD,GAAG;QAACN;KAAO;IAEX,IAAIA,WAAW,QAAQE,wBAAwB,MAAM;QACnD,OAAO;IACT;IACA,kDAAkD;IAClD,qBACE,KAACP;QACCY,IAAI,CAACC,QAAW,CAAA;gBACdC,SAAS;gBACTC,SAASF,MAAMG,OAAO,CAAC,KAAK;YAC9B,CAAA;kBAECT,oBAAoBU,GAAG,CAAC,CAAC,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,UAAU,EAAET,CAAC,EAAEU,UAAU,EAAEC,WAAW,EAAEC,iBAAiB,EAAE;YAC1G,IAAIL,aAAa,QAAQC,cAAc,MAAM,OAAO;YACpD,MAAMK,MAAML,UAAUM,QAAQ,KAAKP,SAASO,QAAQ;YAEpD,qBACE,KAACvB;gBAECkB,YAAYA;gBACZT,GAAGA;gBACHU,YAAYA;gBACZC,aAAaA;gBACbI,aAAanB,oBAAoBoB,MAAM;gBACvCrB,YAAYA;gBACZsB,eAAeL;eAPVC;QAUX;;AAGN"}
+{"version":3,"sources":["../../src/TimeSeriesTooltip/TooltipContent.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Box } from '@mui/material';\nimport type { ReactElement } from 'react';\nimport { useMemo } from 'react';\n\nimport { SeriesInfo } from './SeriesInfo';\nimport type { NearbySeriesArray } from './types';\n\nexport interface TooltipContentProps {\n  series: NearbySeriesArray | null;\n  wrapLabels?: boolean;\n}\n\nexport function TooltipContent(props: TooltipContentProps): ReactElement | null {\n  const { series, wrapLabels } = props;\n\n  const sortedFocusedSeries = useMemo(() => {\n    if (series === null) return null;\n    return series.toSorted((a, b) => (a.y > b.y ? -1 : 1));\n  }, [series]);\n\n  if (series === null || sortedFocusedSeries === null) {\n    return null;\n  }\n  // TODO: use react-virtuoso to improve performance\n  return (\n    <Box\n      sx={(theme) => ({\n        display: 'table',\n        padding: theme.spacing(0.5, 2),\n      })}\n    >\n      {sortedFocusedSeries.map(({ datumIdx, seriesIdx, seriesName, y, formattedY, markerColor, isClosestToCursor }) => {\n        if (datumIdx === null || seriesIdx === null) return null;\n        const key = seriesIdx.toString() + datumIdx.toString();\n\n        return (\n          <SeriesInfo\n            key={key}\n            seriesName={seriesName}\n            y={y}\n            formattedY={formattedY}\n            markerColor={markerColor}\n            totalSeries={sortedFocusedSeries.length}\n            wrapLabels={wrapLabels}\n            emphasizeText={isClosestToCursor}\n          />\n        );\n      })}\n    </Box>\n  );\n}\n"],"names":["Box","SeriesInfo"],"mappings":";;AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,GAAG,QAAQ,gBAAgB;AAIpC,SAASC,UAAU,QAAQ,kBAAe;AAQ1C,OAAO"}