@perses-dev/components 0.31.0 → 0.32.0

package/dist/TimeSeriesTooltip/TimeSeriesTooltip.js

@@ -11,27 +11,28 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Portal, Typography, Stack, Switch } from '@mui/material';
-import React, { useState } from 'react';
+import { Box, Portal, Stack } from '@mui/material';
+import { memo, useState } from 'react';
 import useResizeObserver from 'use-resize-observer';
 import { TooltipContent } from './TooltipContent';
+import { TooltipHeader } from './TooltipHeader';
 import { getNearbySeriesData } from './nearby-series';
-import { FALLBACK_CHART_WIDTH, TOOLTIP_MAX_HEIGHT, TOOLTIP_MIN_WIDTH, TOOLTIP_MAX_WIDTH, useMousePosition } from './tooltip-model';
+import { FALLBACK_CHART_WIDTH, TOOLTIP_BG_COLOR_FALLBACK, TOOLTIP_MAX_HEIGHT, TOOLTIP_MAX_WIDTH, TOOLTIP_MIN_WIDTH, useMousePosition } from './tooltip-model';
 import { assembleTransform } from './utils';
-export const TimeSeriesTooltip = /*#__PURE__*/ React.memo(function TimeSeriesTooltip({ chartRef , chartData , wrapLabels , isTooltipPinned , unit , onUnpinClick  }) {
+export const TimeSeriesTooltip = /*#__PURE__*/ memo(function TimeSeriesTooltip({ chartRef , chartData , wrapLabels , unit , onUnpinClick , pinnedPos  }) {
     const [showAllSeries, setShowAllSeries] = useState(false);
-    const [pinnedPos, setPinnedPos] = useState(null);
     const mousePos = useMousePosition();
     const { height , width , ref: tooltipRef  } = useResizeObserver();
+    const isTooltipPinned = pinnedPos !== null;
     if (mousePos === null || mousePos.target === null) return null;
     // Ensure user is hovering over a chart before checking for nearby series.
     if (pinnedPos === null && mousePos.target.tagName !== 'CANVAS') return null;
     const chart = chartRef.current;
     var ref;
-    const chartWidth = (ref = chart === null || chart === void 0 ? void 0 : chart.getWidth()) !== null && ref !== void 0 ? ref : FALLBACK_CHART_WIDTH; // Fallback width not likely to every be needed.
+    const chartWidth = (ref = chart === null || chart === void 0 ? void 0 : chart.getWidth()) !== null && ref !== void 0 ? ref : FALLBACK_CHART_WIDTH; // Fallback width not likely to ever be needed.
     const cursorTransform = assembleTransform(mousePos, chartWidth, pinnedPos, height !== null && height !== void 0 ? height : 0, width !== null && width !== void 0 ? width : 0);
     // Get series nearby the cursor and pass into tooltip content children.
-    const focusedSeries = getNearbySeriesData({
+    const nearbySeries = getNearbySeriesData({
         mousePos,
         chartData,
         pinnedPos,
@@ -39,27 +40,25 @@ export const TimeSeriesTooltip = /*#__PURE__*/ React.memo(function TimeSeriesToo
         unit,
         showAllSeries
     });
-    if (focusedSeries.length === 0) {
+    if (nearbySeries.length === 0) {
         return null;
     }
-    if (isTooltipPinned === true && pinnedPos === null) {
-        setPinnedPos(mousePos);
-    }
-    // Option for user to see all series instead of only the nearby focused series.
-    // Only relevant when there are more total series than are visible.
-    const showAllSeriesToggle = isTooltipPinned === true && showAllSeries === false && chartData.timeSeries.length > 1 && focusedSeries.length !== chartData.timeSeries.length;
+    const totalSeries = chartData.timeSeries.length;
+    var ref1;
     return /*#__PURE__*/ _jsx(Portal, {
-        children: /*#__PURE__*/ _jsxs(Box, {
+        children: /*#__PURE__*/ _jsx(Box, {
             ref: tooltipRef,
-            sx: (theme)=>({
+            sx: (theme)=>{
+                var ref;
+                return {
                     minWidth: TOOLTIP_MIN_WIDTH,
                     maxWidth: TOOLTIP_MAX_WIDTH,
                     maxHeight: TOOLTIP_MAX_HEIGHT,
-                    padding: theme.spacing(0.5, 2),
+                    padding: 0,
                     position: 'absolute',
                     top: 0,
                     left: 0,
-                    backgroundColor: '#2E313E',
+                    backgroundColor: (ref1 = (ref = theme.palette.designSystem) === null || ref === void 0 ? void 0 : ref.grey[800]) !== null && ref1 !== void 0 ? ref1 : TOOLTIP_BG_COLOR_FALLBACK,
                     borderRadius: '6px',
                     color: '#fff',
                     fontSize: '11px',
@@ -71,45 +70,28 @@ export const TimeSeriesTooltip = /*#__PURE__*/ React.memo(function TimeSeriesToo
                     '&:hover': {
                         overflowY: 'auto'
                     }
-                }),
+                };
+            },
             style: {
                 transform: cursorTransform
             },
-            children: [
-                /*#__PURE__*/ _jsx(TooltipContent, {
-                    series: focusedSeries,
-                    wrapLabels: wrapLabels,
-                    isTooltipPinned: isTooltipPinned,
-                    onUnpinClick: ()=>{
-                        setPinnedPos(null);
-                        if (onUnpinClick !== undefined) {
-                            onUnpinClick();
-                        }
-                    }
-                }),
-                showAllSeriesToggle && /*#__PURE__*/ _jsxs(Stack, {
-                    direction: "row",
-                    gap: 1,
-                    alignItems: "center",
-                    sx: {
-                        textAlign: 'right'
-                    },
-                    children: [
-                        /*#__PURE__*/ _jsx(Typography, {
-                            children: "Show All?"
-                        }),
-                        /*#__PURE__*/ _jsx(Switch, {
-                            checked: showAllSeries,
-                            onChange: (_, checked)=>setShowAllSeries(checked),
-                            sx: (theme)=>({
-                                    '& .MuiSwitch-switchBase': {
-                                        color: theme.palette.common.white
-                                    }
-                                })
-                        })
-                    ]
-                })
-            ]
+            children: /*#__PURE__*/ _jsxs(Stack, {
+                spacing: 0.5,
+                children: [
+                    /*#__PURE__*/ _jsx(TooltipHeader, {
+                        nearbySeries: nearbySeries,
+                        totalSeries: totalSeries,
+                        isTooltipPinned: isTooltipPinned,
+                        showAllSeries: showAllSeries,
+                        onShowAllClick: (checked)=>setShowAllSeries(checked),
+                        onUnpinClick: onUnpinClick
+                    }),
+                    /*#__PURE__*/ _jsx(TooltipContent, {
+                        series: nearbySeries,
+                        wrapLabels: wrapLabels
+                    })
+                ]
+            })
         })
     });
 });

package/dist/TimeSeriesTooltip/TimeSeriesTooltip.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/TimeSeriesTooltip/TimeSeriesTooltip.tsx"],"sourcesContent":["// Copyright 2023 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, Typography, Stack, Switch } from '@mui/material';\nimport { ECharts as EChartsInstance } from 'echarts/core';\nimport React, { useState } from 'react';\nimport useResizeObserver from 'use-resize-observer';\nimport { EChartsDataFormat, UnitOptions } from '../model';\nimport { TooltipContent } from './TooltipContent';\nimport { getNearbySeriesData } from './nearby-series';\nimport {\n  CursorCoordinates,\n  FALLBACK_CHART_WIDTH,\n  TOOLTIP_MAX_HEIGHT,\n  TOOLTIP_MIN_WIDTH,\n  TOOLTIP_MAX_WIDTH,\n  useMousePosition,\n} from './tooltip-model';\nimport { assembleTransform } from './utils';\n\ninterface TimeSeriesTooltipProps {\n  chartRef: React.MutableRefObject<EChartsInstance | undefined>;\n  chartData: EChartsDataFormat;\n  isTooltipPinned: boolean;\n  wrapLabels?: boolean;\n  unit?: UnitOptions;\n  onUnpinClick?: () => void;\n}\n\nexport const TimeSeriesTooltip = React.memo(function TimeSeriesTooltip({\n  chartRef,\n  chartData,\n  wrapLabels,\n  isTooltipPinned,\n  unit,\n  onUnpinClick,\n}: TimeSeriesTooltipProps) {\n  const [showAllSeries, setShowAllSeries] = useState(false);\n  const [pinnedPos, setPinnedPos] = useState<CursorCoordinates | null>(null);\n  const mousePos = useMousePosition();\n  const { height, width, ref: tooltipRef } = useResizeObserver();\n\n  if (mousePos === null || mousePos.target === null) return null;\n\n  // Ensure user is hovering over a chart before checking for nearby series.\n  if (pinnedPos === null && (mousePos.target as HTMLElement).tagName !== 'CANVAS') return null;\n\n  const chart = chartRef.current;\n  const chartWidth = chart?.getWidth() ?? FALLBACK_CHART_WIDTH; // Fallback width not likely to every be needed.\n  const cursorTransform = assembleTransform(mousePos, chartWidth, pinnedPos, height ?? 0, width ?? 0);\n\n  // Get series nearby the cursor and pass into tooltip content children.\n  const focusedSeries = getNearbySeriesData({\n    mousePos,\n    chartData,\n    pinnedPos,\n    chart,\n    unit,\n    showAllSeries,\n  });\n  if (focusedSeries.length === 0) {\n    return null;\n  }\n\n  if (isTooltipPinned === true && pinnedPos === null) {\n    setPinnedPos(mousePos);\n  }\n\n  // Option for user to see all series instead of only the nearby focused series.\n  // Only relevant when there are more total series than are visible.\n  const showAllSeriesToggle =\n    isTooltipPinned === true &&\n    showAllSeries === false &&\n    chartData.timeSeries.length > 1 &&\n    focusedSeries.length !== chartData.timeSeries.length;\n\n  return (\n    <Portal>\n      <Box\n        ref={tooltipRef}\n        sx={(theme) => ({\n          minWidth: TOOLTIP_MIN_WIDTH,\n          maxWidth: TOOLTIP_MAX_WIDTH,\n          maxHeight: TOOLTIP_MAX_HEIGHT,\n          padding: theme.spacing(0.5, 2),\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          backgroundColor: '#2E313E', // TODO: use colors from theme, separate styles for dark mode\n          borderRadius: '6px',\n          color: '#fff',\n          fontSize: '11px',\n          visibility: 'visible',\n          opacity: 1,\n          transition: 'all 0.1s ease-out',\n          zIndex: theme.zIndex.tooltip,\n          overflow: 'hidden',\n          '&:hover': {\n            overflowY: 'auto',\n          },\n        })}\n        style={{\n          transform: cursorTransform,\n        }}\n      >\n        <TooltipContent\n          series={focusedSeries}\n          wrapLabels={wrapLabels}\n          isTooltipPinned={isTooltipPinned}\n          onUnpinClick={() => {\n            setPinnedPos(null);\n            if (onUnpinClick !== undefined) {\n              onUnpinClick();\n            }\n          }}\n        />\n        {showAllSeriesToggle && (\n          <Stack direction=\"row\" gap={1} alignItems=\"center\" sx={{ textAlign: 'right' }}>\n            <Typography>Show All?</Typography>\n            <Switch\n              checked={showAllSeries}\n              onChange={(_, checked) => setShowAllSeries(checked)}\n              sx={(theme) => ({\n                '& .MuiSwitch-switchBase': {\n                  color: theme.palette.common.white,\n                },\n              })}\n            />\n          </Stack>\n        )}\n      </Box>\n    </Portal>\n  );\n});\n"],"names":["Box","Portal","Typography","Stack","Switch","React","useState","useResizeObserver","TooltipContent","getNearbySeriesData","FALLBACK_CHART_WIDTH","TOOLTIP_MAX_HEIGHT","TOOLTIP_MIN_WIDTH","TOOLTIP_MAX_WIDTH","useMousePosition","assembleTransform","TimeSeriesTooltip","memo","chartRef","chartData","wrapLabels","isTooltipPinned","unit","onUnpinClick","showAllSeries","setShowAllSeries","pinnedPos","setPinnedPos","mousePos","height","width","ref","tooltipRef","target","tagName","chart","current","chartWidth","getWidth","cursorTransform","focusedSeries","length","showAllSeriesToggle","timeSeries","sx","theme","minWidth","maxWidth","maxHeight","padding","spacing","position","top","left","backgroundColor","borderRadius","color","fontSize","visibility","opacity","transition","zIndex","tooltip","overflow","overflowY","style","transform","series","undefined","direction","gap","alignItems","textAlign","checked","onChange","_","palette","common","white"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAASA,GAAG,EAAEC,MAAM,EAAEC,UAAU,EAAEC,KAAK,EAAEC,MAAM,QAAQ,eAAe,CAAC;AAEvE,OAAOC,KAAK,IAAIC,QAAQ,QAAQ,OAAO,CAAC;AACxC,OAAOC,iBAAiB,MAAM,qBAAqB,CAAC;AAEpD,SAASC,cAAc,QAAQ,kBAAkB,CAAC;AAClD,SAASC,mBAAmB,QAAQ,iBAAiB,CAAC;AACtD,SAEEC,oBAAoB,EACpBC,kBAAkB,EAClBC,iBAAiB,EACjBC,iBAAiB,EACjBC,gBAAgB,QACX,iBAAiB,CAAC;AACzB,SAASC,iBAAiB,QAAQ,SAAS,CAAC;AAW5C,OAAO,MAAMC,iBAAiB,iBAAGX,KAAK,CAACY,IAAI,CAAC,SAASD,iBAAiB,CAAC,EACrEE,QAAQ,CAAA,EACRC,SAAS,CAAA,EACTC,UAAU,CAAA,EACVC,eAAe,CAAA,EACfC,IAAI,CAAA,EACJC,YAAY,CAAA,EACW,EAAE;IACzB,MAAM,CAACC,aAAa,EAAEC,gBAAgB,CAAC,GAAGnB,QAAQ,CAAC,KAAK,CAAC,AAAC;IAC1D,MAAM,CAACoB,SAAS,EAAEC,YAAY,CAAC,GAAGrB,QAAQ,CAA2B,IAAI,CAAC,AAAC;IAC3E,MAAMsB,QAAQ,GAAGd,gBAAgB,EAAE,AAAC;IACpC,MAAM,EAAEe,MAAM,CAAA,EAAEC,KAAK,CAAA,EAAEC,GAAG,EAAEC,UAAU,CAAA,EAAE,GAAGzB,iBAAiB,EAAE,AAAC;IAE/D,IAAIqB,QAAQ,KAAK,IAAI,IAAIA,QAAQ,CAACK,MAAM,KAAK,IAAI,EAAE,OAAO,IAAI,CAAC;IAE/D,0EAA0E;IAC1E,IAAIP,SAAS,KAAK,IAAI,IAAI,AAACE,QAAQ,CAACK,MAAM,CAAiBC,OAAO,KAAK,QAAQ,EAAE,OAAO,IAAI,CAAC;IAE7F,MAAMC,KAAK,GAAGjB,QAAQ,CAACkB,OAAO,AAAC;QACZD,GAAiB;IAApC,MAAME,UAAU,GAAGF,CAAAA,GAAiB,GAAjBA,KAAK,aAALA,KAAK,WAAU,GAAfA,KAAAA,CAAe,GAAfA,KAAK,CAAEG,QAAQ,EAAE,cAAjBH,GAAiB,cAAjBA,GAAiB,GAAIzB,oBAAoB,AAAC,EAAC,gDAAgD;IAC9G,MAAM6B,eAAe,GAAGxB,iBAAiB,CAACa,QAAQ,EAAES,UAAU,EAAEX,SAAS,EAAEG,MAAM,aAANA,MAAM,cAANA,MAAM,GAAI,CAAC,EAAEC,KAAK,aAALA,KAAK,cAALA,KAAK,GAAI,CAAC,CAAC,AAAC;IAEpG,uEAAuE;IACvE,MAAMU,aAAa,GAAG/B,mBAAmB,CAAC;QACxCmB,QAAQ;QACRT,SAAS;QACTO,SAAS;QACTS,KAAK;QACLb,IAAI;QACJE,aAAa;KACd,CAAC,AAAC;IACH,IAAIgB,aAAa,CAACC,MAAM,KAAK,CAAC,EAAE;QAC9B,OAAO,IAAI,CAAC;IACd,CAAC;IAED,IAAIpB,eAAe,KAAK,IAAI,IAAIK,SAAS,KAAK,IAAI,EAAE;QAClDC,YAAY,CAACC,QAAQ,CAAC,CAAC;IACzB,CAAC;IAED,+EAA+E;IAC/E,mEAAmE;IACnE,MAAMc,mBAAmB,GACvBrB,eAAe,KAAK,IAAI,IACxBG,aAAa,KAAK,KAAK,IACvBL,SAAS,CAACwB,UAAU,CAACF,MAAM,GAAG,CAAC,IAC/BD,aAAa,CAACC,MAAM,KAAKtB,SAAS,CAACwB,UAAU,CAACF,MAAM,AAAC;IAEvD,qBACE,KAACxC,MAAM;kBACL,cAAA,MAACD,GAAG;YACF+B,GAAG,EAAEC,UAAU;YACfY,EAAE,EAAE,CAACC,KAAK,GAAM,CAAA;oBACdC,QAAQ,EAAElC,iBAAiB;oBAC3BmC,QAAQ,EAAElC,iBAAiB;oBAC3BmC,SAAS,EAAErC,kBAAkB;oBAC7BsC,OAAO,EAAEJ,KAAK,CAACK,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC;oBAC9BC,QAAQ,EAAE,UAAU;oBACpBC,GAAG,EAAE,CAAC;oBACNC,IAAI,EAAE,CAAC;oBACPC,eAAe,EAAE,SAAS;oBAC1BC,YAAY,EAAE,KAAK;oBACnBC,KAAK,EAAE,MAAM;oBACbC,QAAQ,EAAE,MAAM;oBAChBC,UAAU,EAAE,SAAS;oBACrBC,OAAO,EAAE,CAAC;oBACVC,UAAU,EAAE,mBAAmB;oBAC/BC,MAAM,EAAEhB,KAAK,CAACgB,MAAM,CAACC,OAAO;oBAC5BC,QAAQ,EAAE,QAAQ;oBAClB,SAAS,EAAE;wBACTC,SAAS,EAAE,MAAM;qBAClB;iBACF,CAAA,AAAC;YACFC,KAAK,EAAE;gBACLC,SAAS,EAAE3B,eAAe;aAC3B;;8BAED,KAAC/B,cAAc;oBACb2D,MAAM,EAAE3B,aAAa;oBACrBpB,UAAU,EAAEA,UAAU;oBACtBC,eAAe,EAAEA,eAAe;oBAChCE,YAAY,EAAE,IAAM;wBAClBI,YAAY,CAAC,IAAI,CAAC,CAAC;wBACnB,IAAIJ,YAAY,KAAK6C,SAAS,EAAE;4BAC9B7C,YAAY,EAAE,CAAC;wBACjB,CAAC;oBACH,CAAC;kBACD;gBACDmB,mBAAmB,kBAClB,MAACvC,KAAK;oBAACkE,SAAS,EAAC,KAAK;oBAACC,GAAG,EAAE,CAAC;oBAAEC,UAAU,EAAC,QAAQ;oBAAC3B,EAAE,EAAE;wBAAE4B,SAAS,EAAE,OAAO;qBAAE;;sCAC3E,KAACtE,UAAU;sCAAC,WAAS;0BAAa;sCAClC,KAACE,MAAM;4BACLqE,OAAO,EAAEjD,aAAa;4BACtBkD,QAAQ,EAAE,CAACC,CAAC,EAAEF,OAAO,GAAKhD,gBAAgB,CAACgD,OAAO,CAAC;4BACnD7B,EAAE,EAAE,CAACC,KAAK,GAAM,CAAA;oCACd,yBAAyB,EAAE;wCACzBW,KAAK,EAAEX,KAAK,CAAC+B,OAAO,CAACC,MAAM,CAACC,KAAK;qCAClC;iCACF,CAAA,AAAC;0BACF;;kBACI,AACT;;UACG;MACC,CACT;AACJ,CAAC,CAAC,CAAC"}
+{"version":3,"sources":["../../src/TimeSeriesTooltip/TimeSeriesTooltip.tsx"],"sourcesContent":["// Copyright 2023 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 { ECharts as EChartsInstance } from 'echarts/core';\nimport { memo, useState } from 'react';\nimport useResizeObserver from 'use-resize-observer';\nimport { EChartsDataFormat, UnitOptions } from '../model';\nimport { TooltipContent } from './TooltipContent';\nimport { TooltipHeader } from './TooltipHeader';\nimport { getNearbySeriesData } from './nearby-series';\nimport {\n  CursorCoordinates,\n  FALLBACK_CHART_WIDTH,\n  TOOLTIP_BG_COLOR_FALLBACK,\n  TOOLTIP_MAX_HEIGHT,\n  TOOLTIP_MAX_WIDTH,\n  TOOLTIP_MIN_WIDTH,\n  useMousePosition,\n} from './tooltip-model';\nimport { assembleTransform } from './utils';\n\nexport interface TimeSeriesTooltipProps {\n  chartRef: React.MutableRefObject<EChartsInstance | undefined>;\n  chartData: EChartsDataFormat;\n  wrapLabels?: boolean;\n  unit?: UnitOptions;\n  onUnpinClick?: () => void;\n  pinnedPos: CursorCoordinates | null;\n}\n\nexport const TimeSeriesTooltip = memo(function TimeSeriesTooltip({\n  chartRef,\n  chartData,\n  wrapLabels,\n  unit,\n  onUnpinClick,\n  pinnedPos,\n}: TimeSeriesTooltipProps) {\n  const [showAllSeries, setShowAllSeries] = useState(false);\n  const mousePos = useMousePosition();\n  const { height, width, ref: tooltipRef } = useResizeObserver();\n\n  const isTooltipPinned = pinnedPos !== null;\n\n  if (mousePos === null || mousePos.target === null) return null;\n\n  // Ensure user is hovering over a chart before checking for nearby series.\n  if (pinnedPos === null && (mousePos.target as HTMLElement).tagName !== 'CANVAS') return null;\n\n  const chart = chartRef.current;\n  const chartWidth = chart?.getWidth() ?? FALLBACK_CHART_WIDTH; // Fallback width not likely to ever be needed.\n  const cursorTransform = assembleTransform(mousePos, chartWidth, pinnedPos, height ?? 0, width ?? 0);\n\n  // Get series nearby the cursor and pass into tooltip content children.\n  const nearbySeries = getNearbySeriesData({\n    mousePos,\n    chartData,\n    pinnedPos,\n    chart,\n    unit,\n    showAllSeries,\n  });\n  if (nearbySeries.length === 0) {\n    return null;\n  }\n\n  const totalSeries = chartData.timeSeries.length;\n\n  return (\n    <Portal>\n      <Box\n        ref={tooltipRef}\n        sx={(theme) => ({\n          minWidth: TOOLTIP_MIN_WIDTH,\n          maxWidth: TOOLTIP_MAX_WIDTH,\n          maxHeight: TOOLTIP_MAX_HEIGHT,\n          padding: 0,\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          backgroundColor: theme.palette.designSystem?.grey[800] ?? TOOLTIP_BG_COLOR_FALLBACK,\n          borderRadius: '6px',\n          color: '#fff',\n          fontSize: '11px',\n          visibility: 'visible',\n          opacity: 1,\n          transition: 'all 0.1s ease-out',\n          zIndex: theme.zIndex.tooltip,\n          overflow: 'hidden',\n          '&:hover': {\n            overflowY: 'auto',\n          },\n        })}\n        style={{\n          transform: cursorTransform,\n        }}\n      >\n        <Stack spacing={0.5}>\n          <TooltipHeader\n            nearbySeries={nearbySeries}\n            totalSeries={totalSeries}\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","useState","useResizeObserver","TooltipContent","TooltipHeader","getNearbySeriesData","FALLBACK_CHART_WIDTH","TOOLTIP_BG_COLOR_FALLBACK","TOOLTIP_MAX_HEIGHT","TOOLTIP_MAX_WIDTH","TOOLTIP_MIN_WIDTH","useMousePosition","assembleTransform","TimeSeriesTooltip","chartRef","chartData","wrapLabels","unit","onUnpinClick","pinnedPos","showAllSeries","setShowAllSeries","mousePos","height","width","ref","tooltipRef","isTooltipPinned","target","tagName","chart","current","chartWidth","getWidth","cursorTransform","nearbySeries","length","totalSeries","timeSeries","theme","sx","minWidth","maxWidth","maxHeight","padding","position","top","left","backgroundColor","palette","designSystem","grey","borderRadius","color","fontSize","visibility","opacity","transition","zIndex","tooltip","overflow","overflowY","style","transform","spacing","onShowAllClick","checked","series"],"mappings":"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"}

package/dist/TimeSeriesTooltip/TooltipContent.d.ts

@@ -2,9 +2,7 @@
 import { NearbySeriesArray } from './nearby-series';
 export interface TooltipContentProps {
     series: NearbySeriesArray | null;
-    isTooltipPinned: boolean;
     wrapLabels?: boolean;
-    onUnpinClick: () => void;
 }
 export declare function TooltipContent(props: TooltipContentProps): JSX.Element | null;
 //# sourceMappingURL=TooltipContent.d.ts.map

package/dist/TimeSeriesTooltip/TooltipContent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TooltipContent.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesTooltip/TooltipContent.tsx"],"names":[],"mappings":";AAkBA,OAAO,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAGpD,MAAM,WAAW,mBAAmB;IAClC,MAAM,EAAE,iBAAiB,GAAG,IAAI,CAAC;IACjC,eAAe,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,EAAE,MAAM,IAAI,CAAC;CAC1B;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,sBAyFxD"}
+{"version":3,"file":"TooltipContent.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesTooltip/TooltipContent.tsx"],"names":[],"mappings":";AAeA,OAAO,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAGpD,MAAM,WAAW,mBAAmB;IAClC,MAAM,EAAE,iBAAiB,GAAG,IAAI,CAAC;IACjC,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,sBAsCxD"}

package/dist/TimeSeriesTooltip/TooltipContent.js

@@ -10,116 +10,40 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from 'react';
-import PinOutline from 'mdi-material-ui/PinOutline';
-import Pin from 'mdi-material-ui/Pin';
-import { Box, Divider, Stack, Typography } from '@mui/material';
-import { useTimeZone } from '../context/TimeZoneProvider';
+import { Box } from '@mui/material';
 import { SeriesInfo } from './SeriesInfo';
 export function TooltipContent(props) {
-    const { series , wrapLabels , isTooltipPinned , onUnpinClick  } = props;
-    const { formatWithUserTimeZone  } = useTimeZone();
-    const seriesTime = series && series[0] && series[0].date ? series[0].date : null;
-    const formatTimeSeriesHeader = (timeMs)=>{
-        const date = new Date(timeMs);
-        const formattedDate = formatWithUserTimeZone(date, 'MMM dd, yyyy - ');
-        const formattedTime = formatWithUserTimeZone(date, 'HH:mm:ss');
-        return /*#__PURE__*/ _jsxs(Box, {
-            children: [
-                /*#__PURE__*/ _jsx(Typography, {
-                    variant: "caption",
-                    sx: (theme)=>({
-                            color: theme.palette.common.white
-                        }),
-                    children: formattedDate
-                }),
-                /*#__PURE__*/ _jsx(Typography, {
-                    variant: "caption",
-                    children: /*#__PURE__*/ _jsx("strong", {
-                        children: formattedTime
-                    })
-                })
-            ]
-        });
-    };
+    const { series , wrapLabels  } = props;
     const sortedFocusedSeries = useMemo(()=>{
         if (series === null) return null;
         return series.sort((a, b)=>a.y > b.y ? -1 : 1);
     }, [
         series
     ]);
-    if (sortedFocusedSeries === null || seriesTime === null) {
+    if (series === null || sortedFocusedSeries === null) {
         return null;
     }
     // TODO: use react-virtuoso to improve performance
-    return /*#__PURE__*/ _jsxs(Stack, {
-        py: 1,
-        spacing: 0.5,
-        children: [
-            /*#__PURE__*/ _jsxs(Box, {
-                sx: {
-                    display: 'flex',
-                    justifyContent: 'start',
-                    alignItems: 'center'
-                },
-                children: [
-                    formatTimeSeriesHeader(seriesTime),
-                    /*#__PURE__*/ _jsxs(Stack, {
-                        direction: "row",
-                        gap: 1,
-                        sx: {
-                            marginLeft: 'auto'
-                        },
-                        children: [
-                            /*#__PURE__*/ _jsxs(Typography, {
-                                sx: {
-                                    fontSize: 11
-                                },
-                                children: [
-                                    "Click to ",
-                                    isTooltipPinned ? 'Unpin' : 'Pin'
-                                ]
-                            }),
-                            isTooltipPinned ? /*#__PURE__*/ _jsx(Pin, {
-                                onClick: onUnpinClick,
-                                sx: {
-                                    fontSize: 16,
-                                    cursor: 'pointer'
-                                }
-                            }) : /*#__PURE__*/ _jsx(PinOutline, {
-                                sx: {
-                                    fontSize: 16
-                                }
-                            })
-                        ]
-                    })
-                ]
+    return /*#__PURE__*/ _jsx(Box, {
+        sx: (theme)=>({
+                display: 'table',
+                padding: theme.spacing(0.5, 2)
             }),
-            /*#__PURE__*/ _jsx(Divider, {
-                sx: (theme)=>({
-                        borderColor: theme.palette.grey['500']
-                    })
-            }),
-            /*#__PURE__*/ _jsx(Box, {
-                sx: {
-                    display: 'table'
-                },
-                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);
-                })
-            })
-        ]
+        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);
+        })
     });
 }
 

package/dist/TimeSeriesTooltip/TooltipContent.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/TimeSeriesTooltip/TooltipContent.tsx"],"sourcesContent":["// Copyright 2023 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 { useMemo } from 'react';\nimport PinOutline from 'mdi-material-ui/PinOutline';\nimport Pin from 'mdi-material-ui/Pin';\nimport { Box, Divider, Stack, Typography } from '@mui/material';\nimport { useTimeZone } from '../context/TimeZoneProvider';\nimport { NearbySeriesArray } from './nearby-series';\nimport { SeriesInfo } from './SeriesInfo';\n\nexport interface TooltipContentProps {\n  series: NearbySeriesArray | null;\n  isTooltipPinned: boolean;\n  wrapLabels?: boolean;\n  onUnpinClick: () => void;\n}\n\nexport function TooltipContent(props: TooltipContentProps) {\n  const { series, wrapLabels, isTooltipPinned, onUnpinClick } = props;\n  const { formatWithUserTimeZone } = useTimeZone();\n\n  const seriesTime = series && series[0] && series[0].date ? series[0].date : null;\n\n  const formatTimeSeriesHeader = (timeMs: number) => {\n    const date = new Date(timeMs);\n    const formattedDate = formatWithUserTimeZone(date, 'MMM dd, yyyy - ');\n    const formattedTime = formatWithUserTimeZone(date, 'HH:mm:ss');\n    return (\n      <Box>\n        <Typography\n          variant=\"caption\"\n          sx={(theme) => ({\n            color: theme.palette.common.white,\n          })}\n        >\n          {formattedDate}\n        </Typography>\n        <Typography variant=\"caption\">\n          <strong>{formattedTime}</strong>\n        </Typography>\n      </Box>\n    );\n  };\n\n  const sortedFocusedSeries = useMemo(() => {\n    if (series === null) return null;\n    return series.sort((a, b) => (a.y > b.y ? -1 : 1));\n  }, [series]);\n\n  if (sortedFocusedSeries === null || seriesTime === null) {\n    return null;\n  }\n\n  // TODO: use react-virtuoso to improve performance\n  return (\n    <Stack py={1} spacing={0.5}>\n      <Box\n        sx={{\n          display: 'flex',\n          justifyContent: 'start',\n          alignItems: 'center',\n        }}\n      >\n        {formatTimeSeriesHeader(seriesTime)}\n        <Stack direction=\"row\" gap={1} sx={{ marginLeft: 'auto' }}>\n          <Typography sx={{ fontSize: 11 }}>Click to {isTooltipPinned ? 'Unpin' : 'Pin'}</Typography>\n          {isTooltipPinned ? (\n            <Pin onClick={onUnpinClick} sx={{ fontSize: 16, cursor: 'pointer' }} />\n          ) : (\n            <PinOutline sx={{ fontSize: 16 }} />\n          )}\n        </Stack>\n      </Box>\n\n      <Divider\n        sx={(theme) => ({\n          borderColor: theme.palette.grey['500'],\n        })}\n      />\n      <Box\n        sx={{\n          display: 'table',\n        }}\n      >\n        {sortedFocusedSeries.map(\n          ({ 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        )}\n      </Box>\n    </Stack>\n  );\n}\n"],"names":["useMemo","PinOutline","Pin","Box","Divider","Stack","Typography","useTimeZone","SeriesInfo","TooltipContent","props","series","wrapLabels","isTooltipPinned","onUnpinClick","formatWithUserTimeZone","seriesTime","date","formatTimeSeriesHeader","timeMs","Date","formattedDate","formattedTime","variant","sx","theme","color","palette","common","white","strong","sortedFocusedSeries","sort","a","b","y","py","spacing","display","justifyContent","alignItems","direction","gap","marginLeft","fontSize","onClick","cursor","borderColor","grey","map","datumIdx","seriesIdx","seriesName","formattedY","markerColor","isClosestToCursor","key","toString","totalSeries","length","emphasizeText"],"mappings":"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"}
+{"version":3,"sources":["../../src/TimeSeriesTooltip/TooltipContent.tsx"],"sourcesContent":["// Copyright 2023 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 { useMemo } from 'react';\nimport { Box } from '@mui/material';\nimport { NearbySeriesArray } from './nearby-series';\nimport { SeriesInfo } from './SeriesInfo';\n\nexport interface TooltipContentProps {\n  series: NearbySeriesArray | null;\n  wrapLabels?: boolean;\n}\n\nexport function TooltipContent(props: TooltipContentProps) {\n  const { series, wrapLabels } = props;\n\n  const sortedFocusedSeries = useMemo(() => {\n    if (series === null) return null;\n    return series.sort((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":["useMemo","Box","SeriesInfo","TooltipContent","props","series","wrapLabels","sortedFocusedSeries","sort","a","b","y","sx","theme","display","padding","spacing","map","datumIdx","seriesIdx","seriesName","formattedY","markerColor","isClosestToCursor","key","toString","totalSeries","length","emphasizeText"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAASA,OAAO,QAAQ,OAAO,CAAC;AAChC,SAASC,GAAG,QAAQ,eAAe,CAAC;AAEpC,SAASC,UAAU,QAAQ,cAAc,CAAC;AAO1C,OAAO,SAASC,cAAc,CAACC,KAA0B,EAAE;IACzD,MAAM,EAAEC,MAAM,CAAA,EAAEC,UAAU,CAAA,EAAE,GAAGF,KAAK,AAAC;IAErC,MAAMG,mBAAmB,GAAGP,OAAO,CAAC,IAAM;QACxC,IAAIK,MAAM,KAAK,IAAI,EAAE,OAAO,IAAI,CAAC;QACjC,OAAOA,MAAM,CAACG,IAAI,CAAC,CAACC,CAAC,EAAEC,CAAC,GAAMD,CAAC,CAACE,CAAC,GAAGD,CAAC,CAACC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,AAAC,CAAC,CAAC;IACrD,CAAC,EAAE;QAACN,MAAM;KAAC,CAAC,AAAC;IAEb,IAAIA,MAAM,KAAK,IAAI,IAAIE,mBAAmB,KAAK,IAAI,EAAE;QACnD,OAAO,IAAI,CAAC;IACd,CAAC;IACD,kDAAkD;IAClD,qBACE,KAACN,GAAG;QACFW,EAAE,EAAE,CAACC,KAAK,GAAM,CAAA;gBACdC,OAAO,EAAE,OAAO;gBAChBC,OAAO,EAAEF,KAAK,CAACG,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC;aAC/B,CAAA,AAAC;kBAEDT,mBAAmB,CAACU,GAAG,CAAC,CAAC,EAAEC,QAAQ,CAAA,EAAEC,SAAS,CAAA,EAAEC,UAAU,CAAA,EAAET,CAAC,CAAA,EAAEU,UAAU,CAAA,EAAEC,WAAW,CAAA,EAAEC,iBAAiB,CAAA,EAAE,GAAK;YAC/G,IAAIL,QAAQ,KAAK,IAAI,IAAIC,SAAS,KAAK,IAAI,EAAE,OAAO,IAAI,CAAC;YACzD,MAAMK,GAAG,GAAGL,SAAS,CAACM,QAAQ,EAAE,GAAGP,QAAQ,CAACO,QAAQ,EAAE,AAAC;YAEvD,qBACE,KAACvB,UAAU;gBAETkB,UAAU,EAAEA,UAAU;gBACtBT,CAAC,EAAEA,CAAC;gBACJU,UAAU,EAAEA,UAAU;gBACtBC,WAAW,EAAEA,WAAW;gBACxBI,WAAW,EAAEnB,mBAAmB,CAACoB,MAAM;gBACvCrB,UAAU,EAAEA,UAAU;gBACtBsB,aAAa,EAAEL,iBAAiB;eAP3BC,GAAG,CAQR,CACF;QACJ,CAAC,CAAC;MACE,CACN;AACJ,CAAC"}

package/dist/TimeSeriesTooltip/TooltipHeader.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { NearbySeriesArray } from './nearby-series';
+export interface TooltipHeaderProps {
+    nearbySeries: NearbySeriesArray;
+    totalSeries: number;
+    isTooltipPinned: boolean;
+    showAllSeries: boolean;
+    onShowAllClick?: (checked: boolean) => void;
+    onUnpinClick?: () => void;
+}
+export declare const TooltipHeader: import("react").NamedExoticComponent<TooltipHeaderProps>;
+//# sourceMappingURL=TooltipHeader.d.ts.map

package/dist/TimeSeriesTooltip/TooltipHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TooltipHeader.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesTooltip/TooltipHeader.tsx"],"names":[],"mappings":";AAkBA,OAAO,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAGpD,MAAM,WAAW,kBAAkB;IACjC,YAAY,EAAE,iBAAiB,CAAC;IAChC,WAAW,EAAE,MAAM,CAAC;IACpB,eAAe,EAAE,OAAO,CAAC;IACzB,aAAa,EAAE,OAAO,CAAC;IACvB,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC5C,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B;AAED,eAAO,MAAM,aAAa,0DAwHxB,CAAC"}

package/dist/TimeSeriesTooltip/TooltipHeader.js

@@ -0,0 +1,163 @@
+// Copyright 2023 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.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Divider, Typography, Stack, Switch } from '@mui/material';
+import Pin from 'mdi-material-ui/Pin';
+import PinOutline from 'mdi-material-ui/PinOutline';
+import { memo } from 'react';
+import { useTimeZone } from '../context/TimeZoneProvider';
+import { TOOLTIP_BG_COLOR_FALLBACK, TOOLTIP_MAX_WIDTH } from './tooltip-model';
+export const TooltipHeader = /*#__PURE__*/ memo(function TooltipHeader({ nearbySeries , totalSeries , isTooltipPinned , showAllSeries , onShowAllClick , onUnpinClick  }) {
+    var ref;
+    const { formatWithUserTimeZone  } = useTimeZone();
+    var ref1;
+    const seriesTimeMs = (ref1 = (ref = nearbySeries[0]) === null || ref === void 0 ? void 0 : ref.date) !== null && ref1 !== void 0 ? ref1 : null;
+    if (seriesTimeMs === null) {
+        return null;
+    }
+    const formatTimeSeriesHeader = (timeMs)=>{
+        const date = new Date(timeMs);
+        const formattedDate = formatWithUserTimeZone(date, 'MMM dd, yyyy - ');
+        const formattedTime = formatWithUserTimeZone(date, 'HH:mm:ss');
+        return /*#__PURE__*/ _jsxs(Box, {
+            children: [
+                /*#__PURE__*/ _jsx(Typography, {
+                    variant: "caption",
+                    sx: (theme)=>({
+                            color: theme.palette.common.white
+                        }),
+                    children: formattedDate
+                }),
+                /*#__PURE__*/ _jsx(Typography, {
+                    variant: "caption",
+                    children: /*#__PURE__*/ _jsx("strong", {
+                        children: formattedTime
+                    })
+                })
+            ]
+        });
+    };
+    // TODO: accurately calc whether more series are outside scrollable region using yBuffer, avg series name length, TOOLTIP_MAX_HEIGHT
+    const showAllSeriesToggle = totalSeries > 5;
+    var ref2;
+    return /*#__PURE__*/ _jsxs(Box, {
+        sx: (theme)=>{
+            var ref;
+            return {
+                width: '100%',
+                maxWidth: TOOLTIP_MAX_WIDTH,
+                padding: theme.spacing(1.5, 2, 0.5, 2),
+                backgroundColor: (ref2 = (ref = theme.palette.designSystem) === null || ref === void 0 ? void 0 : ref.grey[800]) !== null && ref2 !== void 0 ? ref2 : TOOLTIP_BG_COLOR_FALLBACK,
+                position: 'sticky',
+                top: 0,
+                left: 0
+            };
+        },
+        children: [
+            /*#__PURE__*/ _jsxs(Box, {
+                sx: {
+                    width: '100%',
+                    display: 'flex',
+                    justifyContent: 'start',
+                    alignItems: 'center',
+                    paddingBottom: 0.5
+                },
+                children: [
+                    formatTimeSeriesHeader(seriesTimeMs),
+                    /*#__PURE__*/ _jsxs(Stack, {
+                        direction: "row",
+                        gap: 1,
+                        sx: {
+                            marginLeft: 'auto'
+                        },
+                        children: [
+                            showAllSeriesToggle && /*#__PURE__*/ _jsxs(Stack, {
+                                direction: "row",
+                                gap: 0.5,
+                                alignItems: "center",
+                                sx: {
+                                    textAlign: 'right'
+                                },
+                                children: [
+                                    /*#__PURE__*/ _jsx(Typography, {
+                                        sx: {
+                                            fontSize: 11
+                                        },
+                                        children: "Show All"
+                                    }),
+                                    /*#__PURE__*/ _jsx(Switch, {
+                                        checked: showAllSeries,
+                                        size: "small",
+                                        onChange: (_, checked)=>{
+                                            if (onShowAllClick !== undefined) {
+                                                return onShowAllClick(checked);
+                                            }
+                                        },
+                                        sx: (theme)=>({
+                                                '& .MuiSwitch-switchBase': {
+                                                    color: theme.palette.common.white
+                                                },
+                                                '& .MuiSwitch-track': {
+                                                    backgroundColor: theme.palette.common.white
+                                                }
+                                            })
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsxs(Stack, {
+                                direction: "row",
+                                alignItems: "center",
+                                children: [
+                                    /*#__PURE__*/ _jsxs(Typography, {
+                                        sx: {
+                                            marginRight: 0.5,
+                                            fontSize: 11,
+                                            verticalAlign: 'middle'
+                                        },
+                                        children: [
+                                            "Click to ",
+                                            isTooltipPinned ? 'Unpin' : 'Pin'
+                                        ]
+                                    }),
+                                    isTooltipPinned ? /*#__PURE__*/ _jsx(Pin, {
+                                        onClick: ()=>{
+                                            if (onUnpinClick !== undefined) {
+                                                onUnpinClick();
+                                            }
+                                        },
+                                        sx: {
+                                            fontSize: 16,
+                                            cursor: 'pointer'
+                                        }
+                                    }) : /*#__PURE__*/ _jsx(PinOutline, {
+                                        sx: {
+                                            fontSize: 16
+                                        }
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx(Divider, {
+                sx: (theme)=>({
+                        width: '100%',
+                        borderColor: theme.palette.grey['500']
+                    })
+            })
+        ]
+    });
+});
+
+//# sourceMappingURL=TooltipHeader.js.map

package/dist/TimeSeriesTooltip/TooltipHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/TimeSeriesTooltip/TooltipHeader.tsx"],"sourcesContent":["// Copyright 2023 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, Divider, Typography, Stack, Switch } from '@mui/material';\nimport Pin from 'mdi-material-ui/Pin';\nimport PinOutline from 'mdi-material-ui/PinOutline';\nimport { memo } from 'react';\nimport { useTimeZone } from '../context/TimeZoneProvider';\nimport { NearbySeriesArray } from './nearby-series';\nimport { TOOLTIP_BG_COLOR_FALLBACK, TOOLTIP_MAX_WIDTH } from './tooltip-model';\n\nexport interface TooltipHeaderProps {\n  nearbySeries: NearbySeriesArray;\n  totalSeries: number;\n  isTooltipPinned: boolean;\n  showAllSeries: boolean;\n  onShowAllClick?: (checked: boolean) => void;\n  onUnpinClick?: () => void;\n}\n\nexport const TooltipHeader = memo(function TooltipHeader({\n  nearbySeries,\n  totalSeries,\n  isTooltipPinned,\n  showAllSeries,\n  onShowAllClick,\n  onUnpinClick,\n}: TooltipHeaderProps) {\n  const { formatWithUserTimeZone } = useTimeZone();\n\n  const seriesTimeMs = nearbySeries[0]?.date ?? null;\n  if (seriesTimeMs === null) {\n    return null;\n  }\n\n  const formatTimeSeriesHeader = (timeMs: number) => {\n    const date = new Date(timeMs);\n    const formattedDate = formatWithUserTimeZone(date, 'MMM dd, yyyy - ');\n    const formattedTime = formatWithUserTimeZone(date, 'HH:mm:ss');\n    return (\n      <Box>\n        <Typography\n          variant=\"caption\"\n          sx={(theme) => ({\n            color: theme.palette.common.white,\n          })}\n        >\n          {formattedDate}\n        </Typography>\n        <Typography variant=\"caption\">\n          <strong>{formattedTime}</strong>\n        </Typography>\n      </Box>\n    );\n  };\n\n  // TODO: accurately calc whether more series are outside scrollable region using yBuffer, avg series name length, TOOLTIP_MAX_HEIGHT\n  const showAllSeriesToggle = totalSeries > 5;\n\n  return (\n    <Box\n      sx={(theme) => ({\n        width: '100%',\n        maxWidth: TOOLTIP_MAX_WIDTH,\n        padding: theme.spacing(1.5, 2, 0.5, 2),\n        backgroundColor: theme.palette.designSystem?.grey[800] ?? TOOLTIP_BG_COLOR_FALLBACK,\n        position: 'sticky',\n        top: 0,\n        left: 0,\n      })}\n    >\n      <Box\n        sx={{\n          width: '100%',\n          display: 'flex',\n          justifyContent: 'start',\n          alignItems: 'center',\n          paddingBottom: 0.5,\n        }}\n      >\n        {formatTimeSeriesHeader(seriesTimeMs)}\n        <Stack direction=\"row\" gap={1} sx={{ marginLeft: 'auto' }}>\n          {showAllSeriesToggle && (\n            <Stack direction=\"row\" gap={0.5} alignItems=\"center\" sx={{ textAlign: 'right' }}>\n              <Typography sx={{ fontSize: 11 }}>Show All</Typography>\n              <Switch\n                checked={showAllSeries}\n                size=\"small\"\n                onChange={(_, checked) => {\n                  if (onShowAllClick !== undefined) {\n                    return onShowAllClick(checked);\n                  }\n                }}\n                sx={(theme) => ({\n                  '& .MuiSwitch-switchBase': {\n                    color: theme.palette.common.white,\n                  },\n                  '& .MuiSwitch-track': {\n                    backgroundColor: theme.palette.common.white,\n                  },\n                })}\n              />\n            </Stack>\n          )}\n          <Stack direction=\"row\" alignItems=\"center\">\n            <Typography\n              sx={{\n                marginRight: 0.5,\n                fontSize: 11,\n                verticalAlign: 'middle',\n              }}\n            >\n              Click to {isTooltipPinned ? 'Unpin' : 'Pin'}\n            </Typography>\n            {isTooltipPinned ? (\n              <Pin\n                onClick={() => {\n                  if (onUnpinClick !== undefined) {\n                    onUnpinClick();\n                  }\n                }}\n                sx={{\n                  fontSize: 16,\n                  cursor: 'pointer',\n                }}\n              />\n            ) : (\n              <PinOutline sx={{ fontSize: 16 }} />\n            )}\n          </Stack>\n        </Stack>\n      </Box>\n      <Divider\n        sx={(theme) => ({\n          width: '100%',\n          borderColor: theme.palette.grey['500'],\n        })}\n      />\n    </Box>\n  );\n});\n"],"names":["Box","Divider","Typography","Stack","Switch","Pin","PinOutline","memo","useTimeZone","TOOLTIP_BG_COLOR_FALLBACK","TOOLTIP_MAX_WIDTH","TooltipHeader","nearbySeries","totalSeries","isTooltipPinned","showAllSeries","onShowAllClick","onUnpinClick","formatWithUserTimeZone","seriesTimeMs","date","formatTimeSeriesHeader","timeMs","Date","formattedDate","formattedTime","variant","sx","theme","color","palette","common","white","strong","showAllSeriesToggle","width","maxWidth","padding","spacing","backgroundColor","designSystem","grey","position","top","left","display","justifyContent","alignItems","paddingBottom","direction","gap","marginLeft","textAlign","fontSize","checked","size","onChange","_","undefined","marginRight","verticalAlign","onClick","cursor","borderColor"],"mappings":"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"}

package/dist/TimeSeriesTooltip/index.d.ts

@@ -3,6 +3,7 @@ export * from './SeriesInfo';
 export * from './SeriesLabelsStack';
 export * from './SeriesMarker';
 export * from './TooltipContent';
+export * from './TooltipHeader';
 export * from './nearby-series';
 export * from './tooltip-model';
 export * from './utils';

package/dist/TimeSeriesTooltip/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesTooltip/index.ts"],"names":[],"mappings":"AAaA,cAAc,qBAAqB,CAAC;AACpC,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesTooltip/index.ts"],"names":[],"mappings":"AAaA,cAAc,qBAAqB,CAAC;AACpC,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,SAAS,CAAC"}

package/dist/TimeSeriesTooltip/index.js

@@ -15,6 +15,7 @@ export * from './SeriesInfo';
 export * from './SeriesLabelsStack';
 export * from './SeriesMarker';
 export * from './TooltipContent';
+export * from './TooltipHeader';
 export * from './nearby-series';
 export * from './tooltip-model';
 export * from './utils';

package/dist/TimeSeriesTooltip/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/TimeSeriesTooltip/index.ts"],"sourcesContent":["// Copyright 2023 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\nexport * from './TimeSeriesTooltip';\nexport * from './SeriesInfo';\nexport * from './SeriesLabelsStack';\nexport * from './SeriesMarker';\nexport * from './TooltipContent';\nexport * from './nearby-series';\nexport * from './tooltip-model';\nexport * from './utils';\n"],"names":[],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,cAAc,qBAAqB,CAAC;AACpC,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,SAAS,CAAC"}
+{"version":3,"sources":["../../src/TimeSeriesTooltip/index.ts"],"sourcesContent":["// Copyright 2023 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\nexport * from './TimeSeriesTooltip';\nexport * from './SeriesInfo';\nexport * from './SeriesLabelsStack';\nexport * from './SeriesMarker';\nexport * from './TooltipContent';\nexport * from './TooltipHeader';\nexport * from './nearby-series';\nexport * from './tooltip-model';\nexport * from './utils';\n"],"names":[],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,cAAc,qBAAqB,CAAC;AACpC,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,SAAS,CAAC"}