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

package/dist/TimeSeriesTooltip/TooltipHeader.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.
@@ -17,139 +18,238 @@ import PinOutline from "mdi-material-ui/PinOutline";
 import { memo } from "react";
 import { useTimeZone } from "../context/TimeZoneProvider.js";
 import { TOOLTIP_BG_COLOR_FALLBACK, TOOLTIP_MAX_WIDTH, PIN_TOOLTIP_HELP_TEXT, UNPIN_TOOLTIP_HELP_TEXT } from "./tooltip-model.js";
-export const TooltipHeader = /*#__PURE__*/ memo(function TooltipHeader({ nearbySeries, totalSeries, isTooltipPinned, showAllSeries, enablePinning = true, onShowAllClick, onUnpinClick }) {
+export const TooltipHeader = /*#__PURE__*/ memo(function TooltipHeader(t0) {
+    const $ = _c(25);
+    const { nearbySeries, totalSeries, isTooltipPinned, showAllSeries, enablePinning: t1, onShowAllClick, onUnpinClick } = t0;
+    const enablePinning = t1 === undefined ? true : t1;
     const { formatWithUserTimeZone } = useTimeZone();
     const seriesTimeMs = nearbySeries[0]?.date ?? 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, {
+    let t2;
+    if ($[0] !== formatWithUserTimeZone) {
+        t2 = (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: _temp,
+                        children: formattedDate
+                    }),
+                    /*#__PURE__*/ _jsx(Typography, {
+                        variant: "caption",
+                        children: /*#__PURE__*/ _jsx("strong", {
+                            children: formattedTime
+                        })
+                    })
+                ]
+            });
+        };
+        $[0] = formatWithUserTimeZone;
+        $[1] = t2;
+    } else {
+        t2 = $[1];
+    }
+    const formatTimeSeriesHeader = t2;
+    const showAllSeriesToggle = enablePinning && totalSeries > 5;
+    const pinTooltipHelpText = isTooltipPinned ? UNPIN_TOOLTIP_HELP_TEXT : PIN_TOOLTIP_HELP_TEXT;
+    let t3;
+    if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+        t3 = {
+            width: "100%",
+            display: "flex",
+            justifyContent: "start",
+            alignItems: "center",
+            paddingBottom: 0.5
+        };
+        $[2] = t3;
+    } else {
+        t3 = $[2];
+    }
+    let t4;
+    if ($[3] !== formatTimeSeriesHeader || $[4] !== seriesTimeMs) {
+        t4 = formatTimeSeriesHeader(seriesTimeMs);
+        $[3] = formatTimeSeriesHeader;
+        $[4] = seriesTimeMs;
+        $[5] = t4;
+    } else {
+        t4 = $[5];
+    }
+    let t5;
+    if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+        t5 = {
+            marginLeft: "auto"
+        };
+        $[6] = t5;
+    } else {
+        t5 = $[6];
+    }
+    let t6;
+    if ($[7] !== onShowAllClick || $[8] !== showAllSeries || $[9] !== showAllSeriesToggle) {
+        t6 = showAllSeriesToggle && /*#__PURE__*/ _jsxs(Stack, {
+            direction: "row",
+            gap: 0.5,
+            alignItems: "center",
+            sx: {
+                textAlign: "right"
+            },
             children: [
                 /*#__PURE__*/ _jsx(Typography, {
-                    variant: "caption",
-                    sx: (theme)=>({
-                            color: theme.palette.common.white
-                        }),
-                    children: formattedDate
+                    sx: {
+                        fontSize: 11
+                    },
+                    children: "Show All"
                 }),
+                /*#__PURE__*/ _jsx(Switch, {
+                    checked: showAllSeries,
+                    size: "small",
+                    onChange: (_, checked)=>{
+                        if (onShowAllClick !== undefined) {
+                            return onShowAllClick(checked);
+                        }
+                    },
+                    sx: _temp3
+                })
+            ]
+        });
+        $[7] = onShowAllClick;
+        $[8] = showAllSeries;
+        $[9] = showAllSeriesToggle;
+        $[10] = t6;
+    } else {
+        t6 = $[10];
+    }
+    let t7;
+    if ($[11] !== enablePinning || $[12] !== isTooltipPinned || $[13] !== onUnpinClick || $[14] !== pinTooltipHelpText) {
+        t7 = enablePinning && /*#__PURE__*/ _jsxs(Stack, {
+            direction: "row",
+            alignItems: "center",
+            children: [
                 /*#__PURE__*/ _jsx(Typography, {
-                    variant: "caption",
-                    children: /*#__PURE__*/ _jsx("strong", {
-                        children: formattedTime
-                    })
+                    sx: {
+                        marginRight: 0.5,
+                        fontSize: 11,
+                        verticalAlign: "middle"
+                    },
+                    children: pinTooltipHelpText
+                }),
+                isTooltipPinned ? /*#__PURE__*/ _jsx(Pin, {
+                    onClick: ()=>{
+                        if (onUnpinClick !== undefined) {
+                            onUnpinClick();
+                        }
+                    },
+                    sx: {
+                        fontSize: 16,
+                        cursor: "pointer"
+                    }
+                }) : /*#__PURE__*/ _jsx(PinOutline, {
+                    sx: {
+                        fontSize: 16
+                    }
                 })
             ]
         });
-    };
-    // TODO: accurately calc whether more series are outside scrollable region using yBuffer, avg series name length, TOOLTIP_MAX_HEIGHT
-    const showAllSeriesToggle = enablePinning && totalSeries > 5;
-    const pinTooltipHelpText = isTooltipPinned ? UNPIN_TOOLTIP_HELP_TEXT : PIN_TOOLTIP_HELP_TEXT;
-    return /*#__PURE__*/ _jsxs(Box, {
-        sx: (theme)=>({
-                width: '100%',
-                maxWidth: TOOLTIP_MAX_WIDTH,
-                padding: theme.spacing(1.5, 2, 0.5, 2),
-                backgroundColor: theme.palette.designSystem?.grey[800] ?? 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
-                                                }
-                                            })
-                                    })
-                                ]
-                            }),
-                            enablePinning && /*#__PURE__*/ _jsxs(Stack, {
-                                direction: "row",
-                                alignItems: "center",
-                                children: [
-                                    /*#__PURE__*/ _jsx(Typography, {
-                                        sx: {
-                                            marginRight: 0.5,
-                                            fontSize: 11,
-                                            verticalAlign: 'middle'
-                                        },
-                                        children: pinTooltipHelpText
-                                    }),
-                                    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']
-                    })
-            })
-        ]
-    });
+        $[11] = enablePinning;
+        $[12] = isTooltipPinned;
+        $[13] = onUnpinClick;
+        $[14] = pinTooltipHelpText;
+        $[15] = t7;
+    } else {
+        t7 = $[15];
+    }
+    let t8;
+    if ($[16] !== t6 || $[17] !== t7) {
+        t8 = /*#__PURE__*/ _jsxs(Stack, {
+            direction: "row",
+            gap: 1,
+            sx: t5,
+            children: [
+                t6,
+                t7
+            ]
+        });
+        $[16] = t6;
+        $[17] = t7;
+        $[18] = t8;
+    } else {
+        t8 = $[18];
+    }
+    let t9;
+    if ($[19] !== t4 || $[20] !== t8) {
+        t9 = /*#__PURE__*/ _jsxs(Box, {
+            sx: t3,
+            children: [
+                t4,
+                t8
+            ]
+        });
+        $[19] = t4;
+        $[20] = t8;
+        $[21] = t9;
+    } else {
+        t9 = $[21];
+    }
+    let t10;
+    if ($[22] === Symbol.for("react.memo_cache_sentinel")) {
+        t10 = /*#__PURE__*/ _jsx(Divider, {
+            sx: _temp4
+        });
+        $[22] = t10;
+    } else {
+        t10 = $[22];
+    }
+    let t11;
+    if ($[23] !== t9) {
+        t11 = /*#__PURE__*/ _jsxs(Box, {
+            sx: _temp2,
+            children: [
+                t9,
+                t10
+            ]
+        });
+        $[23] = t9;
+        $[24] = t11;
+    } else {
+        t11 = $[24];
+    }
+    return t11;
 });
+function _temp(theme) {
+    return {
+        color: theme.palette.common.white
+    };
+}
+function _temp2(theme_0) {
+    return {
+        width: "100%",
+        maxWidth: TOOLTIP_MAX_WIDTH,
+        padding: theme_0.spacing(1.5, 2, 0.5, 2),
+        backgroundColor: theme_0.palette.designSystem?.grey[800] ?? TOOLTIP_BG_COLOR_FALLBACK,
+        position: "sticky",
+        top: 0,
+        left: 0
+    };
+}
+function _temp3(theme_1) {
+    return {
+        "& .MuiSwitch-switchBase": {
+            color: theme_1.palette.common.white
+        },
+        "& .MuiSwitch-track": {
+            backgroundColor: theme_1.palette.common.white
+        }
+    };
+}
+function _temp4(theme_2) {
+    return {
+        width: "100%",
+        borderColor: theme_2.palette.grey["500"]
+    };
+}
 
 //# sourceMappingURL=TooltipHeader.js.map

package/dist/TimeSeriesTooltip/TooltipHeader.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/TimeSeriesTooltip/TooltipHeader.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, Divider, Typography, Stack, Switch } from '@mui/material';\nimport Pin from 'mdi-material-ui/Pin';\nimport PinOutline from 'mdi-material-ui/PinOutline';\nimport type { ReactElement } from 'react';\nimport { memo } from 'react';\n\nimport { useTimeZone } from '../context/TimeZoneProvider';\nimport {\n  TOOLTIP_BG_COLOR_FALLBACK,\n  TOOLTIP_MAX_WIDTH,\n  PIN_TOOLTIP_HELP_TEXT,\n  UNPIN_TOOLTIP_HELP_TEXT,\n} from './tooltip-model';\nimport type { NearbySeriesArray } from './types';\n\nexport interface TooltipHeaderProps {\n  nearbySeries: NearbySeriesArray;\n  totalSeries: number;\n  isTooltipPinned: boolean;\n  showAllSeries: boolean;\n  enablePinning?: 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  enablePinning = true,\n  onShowAllClick,\n  onUnpinClick,\n}: TooltipHeaderProps) {\n  const { formatWithUserTimeZone } = useTimeZone();\n  const seriesTimeMs = nearbySeries[0]?.date ?? null;\n  if (seriesTimeMs === null) {\n    return null;\n  }\n\n  const formatTimeSeriesHeader = (timeMs: number): ReactElement => {\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 = enablePinning && totalSeries > 5;\n\n  const pinTooltipHelpText = isTooltipPinned ? UNPIN_TOOLTIP_HELP_TEXT : PIN_TOOLTIP_HELP_TEXT;\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          {enablePinning && (\n            <Stack direction=\"row\" alignItems=\"center\">\n              <Typography\n                sx={{\n                  marginRight: 0.5,\n                  fontSize: 11,\n                  verticalAlign: 'middle',\n                }}\n              >\n                {pinTooltipHelpText}\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          )}\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","PIN_TOOLTIP_HELP_TEXT","UNPIN_TOOLTIP_HELP_TEXT","TooltipHeader","nearbySeries","totalSeries","isTooltipPinned","showAllSeries","enablePinning","onShowAllClick","onUnpinClick","formatWithUserTimeZone","seriesTimeMs","date","formatTimeSeriesHeader","timeMs","Date","formattedDate","formattedTime","variant","sx","theme","color","palette","common","white","strong","showAllSeriesToggle","pinTooltipHelpText","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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"}
+{"version":3,"sources":["../../src/TimeSeriesTooltip/TooltipHeader.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, Divider, Typography, Stack, Switch } from '@mui/material';\nimport Pin from 'mdi-material-ui/Pin';\nimport PinOutline from 'mdi-material-ui/PinOutline';\nimport type { ReactElement } from 'react';\nimport { memo } from 'react';\n\nimport { useTimeZone } from '../context/TimeZoneProvider';\nimport {\n  TOOLTIP_BG_COLOR_FALLBACK,\n  TOOLTIP_MAX_WIDTH,\n  PIN_TOOLTIP_HELP_TEXT,\n  UNPIN_TOOLTIP_HELP_TEXT,\n} from './tooltip-model';\nimport type { NearbySeriesArray } from './types';\n\nexport interface TooltipHeaderProps {\n  nearbySeries: NearbySeriesArray;\n  totalSeries: number;\n  isTooltipPinned: boolean;\n  showAllSeries: boolean;\n  enablePinning?: 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  enablePinning = true,\n  onShowAllClick,\n  onUnpinClick,\n}: TooltipHeaderProps) {\n  const { formatWithUserTimeZone } = useTimeZone();\n  const seriesTimeMs = nearbySeries[0]?.date ?? null;\n  if (seriesTimeMs === null) {\n    return null;\n  }\n\n  const formatTimeSeriesHeader = (timeMs: number): ReactElement => {\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 = enablePinning && totalSeries > 5;\n\n  const pinTooltipHelpText = isTooltipPinned ? UNPIN_TOOLTIP_HELP_TEXT : PIN_TOOLTIP_HELP_TEXT;\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          {enablePinning && (\n            <Stack direction=\"row\" alignItems=\"center\">\n              <Typography\n                sx={{\n                  marginRight: 0.5,\n                  fontSize: 11,\n                  verticalAlign: 'middle',\n                }}\n              >\n                {pinTooltipHelpText}\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          )}\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","PIN_TOOLTIP_HELP_TEXT","UNPIN_TOOLTIP_HELP_TEXT","TooltipHeader"],"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,OAAO,EAAEC,UAAU,EAAEC,KAAK,EAAEC,MAAM,QAAQ,gBAAgB;AACxE,OAAOC,SAAS,sBAAsB;AACtC,OAAOC,gBAAgB,6BAA6B;AAEpD,SAASC,IAAI,QAAQ,QAAQ;AAE7B,SAASC,WAAW,QAAQ,iCAA8B;AAC1D,SACEC,yBAAyB,EACzBC,iBAAiB,EACjBC,qBAAqB,EACrBC,uBAAuB,QAClB,qBAAkB;AAazB,OAAO,MAAMC,8BAAgBN,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4H/B"}

package/dist/TimeSeriesTooltip/tooltip-model.js

@@ -1,3 +1,4 @@
+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.
@@ -18,16 +19,16 @@ export const TOOLTIP_LABELS_MAX_WIDTH = TOOLTIP_MAX_WIDTH - 150;
 export const TOOLTIP_ADJUST_Y_POS_MULTIPLIER = 0.75;
 export const TOOLTIP_PADDING = 8;
 export const FALLBACK_CHART_WIDTH = 750;
-export const NEARBY_SERIES_DESCRIPTION = 'nearby series showing in tooltip';
-export const EMPHASIZED_SERIES_DESCRIPTION = 'emphasized series showing as bold in tooltip';
-export const TOOLTIP_BG_COLOR_FALLBACK = '#2E313E';
+export const NEARBY_SERIES_DESCRIPTION = "nearby series showing in tooltip";
+export const EMPHASIZED_SERIES_DESCRIPTION = "emphasized series showing as bold in tooltip";
+export const TOOLTIP_BG_COLOR_FALLBACK = "#2E313E";
 export const TOOLTIP_DATE_FORMAT = new Intl.DateTimeFormat(undefined, {
-    year: 'numeric',
-    month: 'short',
-    day: 'numeric',
-    hour: 'numeric',
-    minute: 'numeric',
-    second: 'numeric',
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+    hour: "numeric",
+    minute: "numeric",
+    second: "numeric",
     hour12: true
 });
 export const defaultCursorData = {
@@ -46,42 +47,47 @@ export const defaultCursorData = {
 };
 export const EMPTY_TOOLTIP_DATA = [];
 export const useMousePosition = ()=>{
+    const $ = _c(2);
     const [coords, setCoords] = useState(null);
-    useEffect(()=>{
-        const setFromEvent = (e)=>{
-            return setCoords({
-                page: {
-                    x: e.pageX,
-                    y: e.pageY
-                },
-                client: {
-                    x: e.clientX,
-                    y: e.clientY
-                },
-                plotCanvas: {
-                    // Default to zrender mousemove coords since they handle browser inconsistencies for us
-                    // ex: Firefox and Chrome have slightly different implementations of offsetX and offsetY
-                    // more info: https://github.com/ecomfe/zrender/blob/5.5.0/src/core/event.ts#L46-L120
-                    // Fallback to offsetX and offsetY to ensure tooltip works correctly in Edge
-                    x: e.zrX ?? e.offsetX,
-                    y: e.zrY ?? e.offsetY
-                },
-                // necessary to check whether cursor target matches correct chart canvas (since each chart has its own mousemove listener)
-                target: e.target
-            });
+    let t0;
+    let t1;
+    if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+        t0 = ()=>{
+            const setFromEvent = (e)=>setCoords({
+                    page: {
+                        x: e.pageX,
+                        y: e.pageY
+                    },
+                    client: {
+                        x: e.clientX,
+                        y: e.clientY
+                    },
+                    plotCanvas: {
+                        x: e.zrX ?? e.offsetX,
+                        y: e.zrY ?? e.offsetY
+                    },
+                    target: e.target
+                });
+            window.addEventListener("mousemove", setFromEvent);
+            return ()=>{
+                window.removeEventListener("mousemove", setFromEvent);
+            };
         };
-        window.addEventListener('mousemove', setFromEvent);
-        return ()=>{
-            window.removeEventListener('mousemove', setFromEvent);
-        };
-    }, []);
+        t1 = [];
+        $[0] = t0;
+        $[1] = t1;
+    } else {
+        t0 = $[0];
+        t1 = $[1];
+    }
+    useEffect(t0, t1);
     return coords;
 };
 export const DEFAULT_TOOLTIP_CONFIG = {
     wrapLabels: true,
     enablePinning: true
 };
-export const PIN_TOOLTIP_HELP_TEXT = 'Click chart to pin';
-export const UNPIN_TOOLTIP_HELP_TEXT = 'Click chart to unpin';
+export const PIN_TOOLTIP_HELP_TEXT = "Click chart to pin";
+export const UNPIN_TOOLTIP_HELP_TEXT = "Click chart to unpin";
 
 //# sourceMappingURL=tooltip-model.js.map

package/dist/TimeSeriesTooltip/tooltip-model.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/TimeSeriesTooltip/tooltip-model.ts"],"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 { useEffect, useState } from 'react';\n\nimport type { NearbySeriesArray } from './types';\n\nexport const TOOLTIP_MIN_WIDTH = 375;\nexport const TOOLTIP_MAX_WIDTH = 650;\nexport const TOOLTIP_MAX_HEIGHT = 650;\nexport const TOOLTIP_LABELS_MAX_WIDTH = TOOLTIP_MAX_WIDTH - 150;\nexport const TOOLTIP_ADJUST_Y_POS_MULTIPLIER = 0.75;\nexport const TOOLTIP_PADDING = 8;\n\nexport const FALLBACK_CHART_WIDTH = 750;\n\nexport const NEARBY_SERIES_DESCRIPTION = 'nearby series showing in tooltip';\nexport const EMPHASIZED_SERIES_DESCRIPTION = 'emphasized series showing as bold in tooltip';\n\nexport const TOOLTIP_BG_COLOR_FALLBACK = '#2E313E';\n\nexport const TOOLTIP_DATE_FORMAT = new Intl.DateTimeFormat(undefined, {\n  year: 'numeric',\n  month: 'short',\n  day: 'numeric',\n  hour: 'numeric',\n  minute: 'numeric',\n  second: 'numeric',\n  hour12: true,\n});\n\nexport const defaultCursorData = {\n  coords: {\n    plotCanvas: {\n      x: 0,\n      y: 0,\n    },\n    zrender: {\n      x: 0,\n      y: 0,\n    },\n    target: null,\n  },\n  chartWidth: 0,\n};\n\nexport const EMPTY_TOOLTIP_DATA: NearbySeriesArray = [];\n\n/**\n * ECharts is built with zrender, zrX and zrY are undefined when not hovering over a chart canvas\n */\nexport interface ZRCoordinate {\n  x?: number;\n  y?: number;\n}\n\nexport interface Coordinate {\n  x: number;\n  y: number;\n}\n\nexport interface CursorCoordinates {\n  page: Coordinate;\n  client: Coordinate;\n  plotCanvas: ZRCoordinate;\n  target: EventTarget | null;\n}\n\nexport interface CursorData {\n  coords: CursorCoordinates | null;\n  chartWidth?: number;\n}\n\nexport interface TooltipData {\n  focusedSeries: NearbySeriesArray | null;\n  cursor: CursorData;\n}\n\ntype ZREventProperties = {\n  zrX?: number;\n  zrY?: number;\n  zrDelta?: number;\n  zrEventControl?: 'no_globalout' | 'only_globalout';\n  zrByTouch?: boolean;\n};\n\nexport type ZRRawMouseEvent = MouseEvent & ZREventProperties;\n\nexport const useMousePosition = (): CursorData['coords'] => {\n  const [coords, setCoords] = useState<CursorData['coords']>(null);\n\n  useEffect(() => {\n    const setFromEvent = (e: ZRRawMouseEvent): void => {\n      return setCoords({\n        page: {\n          x: e.pageX,\n          y: e.pageY,\n        },\n        client: {\n          x: e.clientX,\n          y: e.clientY,\n        },\n        plotCanvas: {\n          // Default to zrender mousemove coords since they handle browser inconsistencies for us\n          // ex: Firefox and Chrome have slightly different implementations of offsetX and offsetY\n          // more info: https://github.com/ecomfe/zrender/blob/5.5.0/src/core/event.ts#L46-L120\n          // Fallback to offsetX and offsetY to ensure tooltip works correctly in Edge\n          x: e.zrX ?? e.offsetX,\n          y: e.zrY ?? e.offsetY,\n        },\n        // necessary to check whether cursor target matches correct chart canvas (since each chart has its own mousemove listener)\n        target: e.target,\n      });\n    };\n    window.addEventListener('mousemove', setFromEvent);\n\n    return (): void => {\n      window.removeEventListener('mousemove', setFromEvent);\n    };\n  }, []);\n\n  return coords;\n};\n\nexport type TooltipConfig = {\n  wrapLabels: boolean;\n  hidden?: boolean;\n  enablePinning?: boolean;\n};\n\nexport const DEFAULT_TOOLTIP_CONFIG: TooltipConfig = {\n  wrapLabels: true,\n  enablePinning: true,\n};\n\nexport const PIN_TOOLTIP_HELP_TEXT = 'Click chart to pin';\n\nexport const UNPIN_TOOLTIP_HELP_TEXT = 'Click chart to unpin';\n"],"names":["useEffect","useState","TOOLTIP_MIN_WIDTH","TOOLTIP_MAX_WIDTH","TOOLTIP_MAX_HEIGHT","TOOLTIP_LABELS_MAX_WIDTH","TOOLTIP_ADJUST_Y_POS_MULTIPLIER","TOOLTIP_PADDING","FALLBACK_CHART_WIDTH","NEARBY_SERIES_DESCRIPTION","EMPHASIZED_SERIES_DESCRIPTION","TOOLTIP_BG_COLOR_FALLBACK","TOOLTIP_DATE_FORMAT","Intl","DateTimeFormat","undefined","year","month","day","hour","minute","second","hour12","defaultCursorData","coords","plotCanvas","x","y","zrender","target","chartWidth","EMPTY_TOOLTIP_DATA","useMousePosition","setCoords","setFromEvent","e","page","pageX","pageY","client","clientX","clientY","zrX","offsetX","zrY","offsetY","window","addEventListener","removeEventListener","DEFAULT_TOOLTIP_CONFIG","wrapLabels","enablePinning","PIN_TOOLTIP_HELP_TEXT","UNPIN_TOOLTIP_HELP_TEXT"],"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,SAAS,EAAEC,QAAQ,QAAQ,QAAQ;AAI5C,OAAO,MAAMC,oBAAoB,IAAI;AACrC,OAAO,MAAMC,oBAAoB,IAAI;AACrC,OAAO,MAAMC,qBAAqB,IAAI;AACtC,OAAO,MAAMC,2BAA2BF,oBAAoB,IAAI;AAChE,OAAO,MAAMG,kCAAkC,KAAK;AACpD,OAAO,MAAMC,kBAAkB,EAAE;AAEjC,OAAO,MAAMC,uBAAuB,IAAI;AAExC,OAAO,MAAMC,4BAA4B,mCAAmC;AAC5E,OAAO,MAAMC,gCAAgC,+CAA+C;AAE5F,OAAO,MAAMC,4BAA4B,UAAU;AAEnD,OAAO,MAAMC,sBAAsB,IAAIC,KAAKC,cAAc,CAACC,WAAW;IACpEC,MAAM;IACNC,OAAO;IACPC,KAAK;IACLC,MAAM;IACNC,QAAQ;IACRC,QAAQ;IACRC,QAAQ;AACV,GAAG;AAEH,OAAO,MAAMC,oBAAoB;IAC/BC,QAAQ;QACNC,YAAY;YACVC,GAAG;YACHC,GAAG;QACL;QACAC,SAAS;YACPF,GAAG;YACHC,GAAG;QACL;QACAE,QAAQ;IACV;IACAC,YAAY;AACd,EAAE;AAEF,OAAO,MAAMC,qBAAwC,EAAE,CAAC;AA0CxD,OAAO,MAAMC,mBAAmB;IAC9B,MAAM,CAACR,QAAQS,UAAU,GAAGhC,SAA+B;IAE3DD,UAAU;QACR,MAAMkC,eAAe,CAACC;YACpB,OAAOF,UAAU;gBACfG,MAAM;oBACJV,GAAGS,EAAEE,KAAK;oBACVV,GAAGQ,EAAEG,KAAK;gBACZ;gBACAC,QAAQ;oBACNb,GAAGS,EAAEK,OAAO;oBACZb,GAAGQ,EAAEM,OAAO;gBACd;gBACAhB,YAAY;oBACV,uFAAuF;oBACvF,wFAAwF;oBACxF,qFAAqF;oBACrF,4EAA4E;oBAC5EC,GAAGS,EAAEO,GAAG,IAAIP,EAAEQ,OAAO;oBACrBhB,GAAGQ,EAAES,GAAG,IAAIT,EAAEU,OAAO;gBACvB;gBACA,0HAA0H;gBAC1HhB,QAAQM,EAAEN,MAAM;YAClB;QACF;QACAiB,OAAOC,gBAAgB,CAAC,aAAab;QAErC,OAAO;YACLY,OAAOE,mBAAmB,CAAC,aAAad;QAC1C;IACF,GAAG,EAAE;IAEL,OAAOV;AACT,EAAE;AAQF,OAAO,MAAMyB,yBAAwC;IACnDC,YAAY;IACZC,eAAe;AACjB,EAAE;AAEF,OAAO,MAAMC,wBAAwB,qBAAqB;AAE1D,OAAO,MAAMC,0BAA0B,uBAAuB"}
+{"version":3,"sources":["../../src/TimeSeriesTooltip/tooltip-model.ts"],"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 { useEffect, useState } from 'react';\n\nimport type { NearbySeriesArray } from './types';\n\nexport const TOOLTIP_MIN_WIDTH = 375;\nexport const TOOLTIP_MAX_WIDTH = 650;\nexport const TOOLTIP_MAX_HEIGHT = 650;\nexport const TOOLTIP_LABELS_MAX_WIDTH = TOOLTIP_MAX_WIDTH - 150;\nexport const TOOLTIP_ADJUST_Y_POS_MULTIPLIER = 0.75;\nexport const TOOLTIP_PADDING = 8;\n\nexport const FALLBACK_CHART_WIDTH = 750;\n\nexport const NEARBY_SERIES_DESCRIPTION = 'nearby series showing in tooltip';\nexport const EMPHASIZED_SERIES_DESCRIPTION = 'emphasized series showing as bold in tooltip';\n\nexport const TOOLTIP_BG_COLOR_FALLBACK = '#2E313E';\n\nexport const TOOLTIP_DATE_FORMAT = new Intl.DateTimeFormat(undefined, {\n  year: 'numeric',\n  month: 'short',\n  day: 'numeric',\n  hour: 'numeric',\n  minute: 'numeric',\n  second: 'numeric',\n  hour12: true,\n});\n\nexport const defaultCursorData = {\n  coords: {\n    plotCanvas: {\n      x: 0,\n      y: 0,\n    },\n    zrender: {\n      x: 0,\n      y: 0,\n    },\n    target: null,\n  },\n  chartWidth: 0,\n};\n\nexport const EMPTY_TOOLTIP_DATA: NearbySeriesArray = [];\n\n/**\n * ECharts is built with zrender, zrX and zrY are undefined when not hovering over a chart canvas\n */\nexport interface ZRCoordinate {\n  x?: number;\n  y?: number;\n}\n\nexport interface Coordinate {\n  x: number;\n  y: number;\n}\n\nexport interface CursorCoordinates {\n  page: Coordinate;\n  client: Coordinate;\n  plotCanvas: ZRCoordinate;\n  target: EventTarget | null;\n}\n\nexport interface CursorData {\n  coords: CursorCoordinates | null;\n  chartWidth?: number;\n}\n\nexport interface TooltipData {\n  focusedSeries: NearbySeriesArray | null;\n  cursor: CursorData;\n}\n\ntype ZREventProperties = {\n  zrX?: number;\n  zrY?: number;\n  zrDelta?: number;\n  zrEventControl?: 'no_globalout' | 'only_globalout';\n  zrByTouch?: boolean;\n};\n\nexport type ZRRawMouseEvent = MouseEvent & ZREventProperties;\n\nexport const useMousePosition = (): CursorData['coords'] => {\n  const [coords, setCoords] = useState<CursorData['coords']>(null);\n\n  useEffect(() => {\n    const setFromEvent = (e: ZRRawMouseEvent): void => {\n      return setCoords({\n        page: {\n          x: e.pageX,\n          y: e.pageY,\n        },\n        client: {\n          x: e.clientX,\n          y: e.clientY,\n        },\n        plotCanvas: {\n          // Default to zrender mousemove coords since they handle browser inconsistencies for us\n          // ex: Firefox and Chrome have slightly different implementations of offsetX and offsetY\n          // more info: https://github.com/ecomfe/zrender/blob/5.5.0/src/core/event.ts#L46-L120\n          // Fallback to offsetX and offsetY to ensure tooltip works correctly in Edge\n          x: e.zrX ?? e.offsetX,\n          y: e.zrY ?? e.offsetY,\n        },\n        // necessary to check whether cursor target matches correct chart canvas (since each chart has its own mousemove listener)\n        target: e.target,\n      });\n    };\n    window.addEventListener('mousemove', setFromEvent);\n\n    return (): void => {\n      window.removeEventListener('mousemove', setFromEvent);\n    };\n  }, []);\n\n  return coords;\n};\n\nexport type TooltipConfig = {\n  wrapLabels: boolean;\n  hidden?: boolean;\n  enablePinning?: boolean;\n};\n\nexport const DEFAULT_TOOLTIP_CONFIG: TooltipConfig = {\n  wrapLabels: true,\n  enablePinning: true,\n};\n\nexport const PIN_TOOLTIP_HELP_TEXT = 'Click chart to pin';\n\nexport const UNPIN_TOOLTIP_HELP_TEXT = 'Click chart to unpin';\n"],"names":["useEffect","useState","TOOLTIP_MIN_WIDTH","TOOLTIP_MAX_WIDTH","TOOLTIP_MAX_HEIGHT","TOOLTIP_LABELS_MAX_WIDTH","TOOLTIP_ADJUST_Y_POS_MULTIPLIER","TOOLTIP_PADDING","FALLBACK_CHART_WIDTH","NEARBY_SERIES_DESCRIPTION","EMPHASIZED_SERIES_DESCRIPTION","TOOLTIP_BG_COLOR_FALLBACK","TOOLTIP_DATE_FORMAT","Intl","DateTimeFormat","undefined","year","month","day","hour","minute","second","hour12","defaultCursorData","coords","plotCanvas","x","y","zrender","target","chartWidth","EMPTY_TOOLTIP_DATA","useMousePosition","DEFAULT_TOOLTIP_CONFIG","wrapLabels","enablePinning","PIN_TOOLTIP_HELP_TEXT","UNPIN_TOOLTIP_HELP_TEXT"],"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,SAAS,EAAEC,QAAQ,QAAQ,QAAQ;AAI5C,OAAO,MAAMC,oBAAoB,IAAI;AACrC,OAAO,MAAMC,oBAAoB,IAAI;AACrC,OAAO,MAAMC,qBAAqB,IAAI;AACtC,OAAO,MAAMC,2BAA2BF,oBAAoB,IAAI;AAChE,OAAO,MAAMG,kCAAkC,KAAK;AACpD,OAAO,MAAMC,kBAAkB,EAAE;AAEjC,OAAO,MAAMC,uBAAuB,IAAI;AAExC,OAAO,MAAMC,4BAA4B,mCAAmC;AAC5E,OAAO,MAAMC,gCAAgC,+CAA+C;AAE5F,OAAO,MAAMC,4BAA4B,UAAU;AAEnD,OAAO,MAAMC,sBAAsB,IAAIC,KAAKC,cAAc,CAACC,WAAW;IACpEC,MAAM;IACNC,OAAO;IACPC,KAAK;IACLC,MAAM;IACNC,QAAQ;IACRC,QAAQ;IACRC,QAAQ;AACV,GAAG;AAEH,OAAO,MAAMC,oBAAoB;IAC/BC,QAAQ;QACNC,YAAY;YACVC,GAAG;YACHC,GAAG;QACL;QACAC,SAAS;YACPF,GAAG;YACHC,GAAG;QACL;QACAE,QAAQ;IACV;IACAC,YAAY;AACd,EAAE;AAEF,OAAO,MAAMC,qBAAwC,EAAE,CAAC;AA0CxD,OAAO,MAAMC,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkC9B;AAQF,OAAO,MAAMC,yBAAwC;IACnDC,YAAY;IACZC,eAAe;AACjB,EAAE;AAEF,OAAO,MAAMC,wBAAwB,qBAAqB;AAE1D,OAAO,MAAMC,0BAA0B,uBAAuB"}