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

package/dist/DragAndDrop/DropIndicator.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.
@@ -13,32 +14,56 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // limitations under the License.
 import { Box, Stack } from "@mui/material";
 export function DropIndicator() {
-    return /*#__PURE__*/ _jsxs(Stack, {
-        direction: "row",
-        alignItems: "center",
-        children: [
-            /*#__PURE__*/ _jsx(Box, {
-                sx: {
-                    content: '""',
-                    width: 8,
-                    height: 8,
-                    boxSizing: 'border-box',
-                    position: 'absolute',
-                    backgroundColor: (theme)=>theme.palette.background.default,
-                    border: (theme)=>`2px solid ${theme.palette.info.main}`,
-                    borderRadius: '50%'
-                }
-            }),
-            /*#__PURE__*/ _jsx(Box, {
-                sx: {
-                    content: '""',
-                    height: 2,
-                    background: (theme)=>theme.palette.info.main,
-                    width: '100%'
-                }
-            })
-        ]
-    });
+    const $ = _c(2);
+    let t0;
+    if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+        t0 = /*#__PURE__*/ _jsx(Box, {
+            sx: {
+                content: '""',
+                width: 8,
+                height: 8,
+                boxSizing: "border-box",
+                position: "absolute",
+                backgroundColor: _temp,
+                border: _temp2,
+                borderRadius: "50%"
+            }
+        });
+        $[0] = t0;
+    } else {
+        t0 = $[0];
+    }
+    let t1;
+    if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+        t1 = /*#__PURE__*/ _jsxs(Stack, {
+            direction: "row",
+            alignItems: "center",
+            children: [
+                t0,
+                /*#__PURE__*/ _jsx(Box, {
+                    sx: {
+                        content: '""',
+                        height: 2,
+                        background: _temp3,
+                        width: "100%"
+                    }
+                })
+            ]
+        });
+        $[1] = t1;
+    } else {
+        t1 = $[1];
+    }
+    return t1;
+}
+function _temp3(theme_1) {
+    return theme_1.palette.info.main;
+}
+function _temp2(theme_0) {
+    return `2px solid ${theme_0.palette.info.main}`;
+}
+function _temp(theme) {
+    return theme.palette.background.default;
 }
 
 //# sourceMappingURL=DropIndicator.js.map

package/dist/DragAndDrop/DropIndicator.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/DragAndDrop/DropIndicator.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, Stack } from '@mui/material';\nimport type { ReactElement } from 'react';\n\nexport function DropIndicator(): ReactElement {\n  return (\n    <Stack direction=\"row\" alignItems=\"center\">\n      <Box\n        sx={{\n          content: '\"\"',\n          width: 8,\n          height: 8,\n          boxSizing: 'border-box',\n          position: 'absolute',\n          backgroundColor: (theme) => theme.palette.background.default,\n          border: (theme) => `2px solid ${theme.palette.info.main}`,\n          borderRadius: '50%',\n        }}\n      ></Box>\n      <Box\n        sx={{\n          content: '\"\"',\n          height: 2,\n          background: (theme) => theme.palette.info.main,\n          width: '100%',\n        }}\n      ></Box>\n    </Stack>\n  );\n}\n"],"names":["Box","Stack","DropIndicator","direction","alignItems","sx","content","width","height","boxSizing","position","backgroundColor","theme","palette","background","default","border","info","main","borderRadius"],"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,KAAK,QAAQ,gBAAgB;AAG3C,OAAO,SAASC;IACd,qBACE,MAACD;QAAME,WAAU;QAAMC,YAAW;;0BAChC,KAACJ;gBACCK,IAAI;oBACFC,SAAS;oBACTC,OAAO;oBACPC,QAAQ;oBACRC,WAAW;oBACXC,UAAU;oBACVC,iBAAiB,CAACC,QAAUA,MAAMC,OAAO,CAACC,UAAU,CAACC,OAAO;oBAC5DC,QAAQ,CAACJ,QAAU,CAAC,UAAU,EAAEA,MAAMC,OAAO,CAACI,IAAI,CAACC,IAAI,EAAE;oBACzDC,cAAc;gBAChB;;0BAEF,KAACnB;gBACCK,IAAI;oBACFC,SAAS;oBACTE,QAAQ;oBACRM,YAAY,CAACF,QAAUA,MAAMC,OAAO,CAACI,IAAI,CAACC,IAAI;oBAC9CX,OAAO;gBACT;;;;AAIR"}
+{"version":3,"sources":["../../src/DragAndDrop/DropIndicator.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, Stack } from '@mui/material';\nimport type { ReactElement } from 'react';\n\nexport function DropIndicator(): ReactElement {\n  return (\n    <Stack direction=\"row\" alignItems=\"center\">\n      <Box\n        sx={{\n          content: '\"\"',\n          width: 8,\n          height: 8,\n          boxSizing: 'border-box',\n          position: 'absolute',\n          backgroundColor: (theme) => theme.palette.background.default,\n          border: (theme) => `2px solid ${theme.palette.info.main}`,\n          borderRadius: '50%',\n        }}\n      ></Box>\n      <Box\n        sx={{\n          content: '\"\"',\n          height: 2,\n          background: (theme) => theme.palette.info.main,\n          width: '100%',\n        }}\n      ></Box>\n    </Stack>\n  );\n}\n"],"names":["Box","Stack"],"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,KAAK,QAAQ,gBAAgB;AAG3C,OAAO"}

package/dist/Drawer/Drawer.js

@@ -11,26 +11,86 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { jsx as _jsx } from "react/jsx-runtime";
+import { c as _c } from "react-compiler-runtime";
 import { Drawer as MuiDrawer, useMediaQuery } from "@mui/material";
 import { combineSx } from "../utils/index.js";
 const DRAWER_DEFAULT_WIDTH = 1080;
-export const Drawer = ({ anchor = 'right', isOpen, onClose, PaperProps, children, ...rest })=>{
+export const Drawer = (t0)=>{
+    const $ = _c(21);
+    let PaperProps;
+    let children;
+    let isOpen;
+    let onClose;
+    let rest;
+    let t1;
+    if ($[0] !== t0) {
+        ({ anchor: t1, isOpen, onClose, PaperProps, children, ...rest } = t0);
+        $[0] = t0;
+        $[1] = PaperProps;
+        $[2] = children;
+        $[3] = isOpen;
+        $[4] = onClose;
+        $[5] = rest;
+        $[6] = t1;
+    } else {
+        PaperProps = $[1];
+        children = $[2];
+        isOpen = $[3];
+        onClose = $[4];
+        rest = $[5];
+        t1 = $[6];
+    }
+    const anchor = t1 === undefined ? "right" : t1;
     const isSmaller = useMediaQuery(`(max-width:${DRAWER_DEFAULT_WIDTH}px)`);
-    return /*#__PURE__*/ _jsx(MuiDrawer, {
-        ...rest,
-        open: isOpen,
-        onClose: onClose,
-        anchor: anchor,
-        PaperProps: {
+    const t2 = isSmaller ? "100%" : `${DRAWER_DEFAULT_WIDTH}px`;
+    let t3;
+    if ($[7] !== PaperProps?.sx || $[8] !== t2) {
+        t3 = combineSx({
+            width: t2,
+            overflow: "hidden"
+        }, PaperProps?.sx);
+        $[7] = PaperProps?.sx;
+        $[8] = t2;
+        $[9] = t3;
+    } else {
+        t3 = $[9];
+    }
+    let t4;
+    if ($[10] !== PaperProps || $[11] !== t3) {
+        t4 = {
             ...PaperProps,
-            sx: combineSx({
-                width: isSmaller ? '100%' : `${DRAWER_DEFAULT_WIDTH}px`,
-                overflow: 'hidden'
-            }, PaperProps?.sx)
-        },
-        "aria-hidden": !isOpen,
-        children: children
-    });
+            sx: t3
+        };
+        $[10] = PaperProps;
+        $[11] = t3;
+        $[12] = t4;
+    } else {
+        t4 = $[12];
+    }
+    const t5 = !isOpen;
+    let t6;
+    if ($[13] !== anchor || $[14] !== children || $[15] !== isOpen || $[16] !== onClose || $[17] !== rest || $[18] !== t4 || $[19] !== t5) {
+        t6 = /*#__PURE__*/ _jsx(MuiDrawer, {
+            ...rest,
+            open: isOpen,
+            onClose: onClose,
+            anchor: anchor,
+            PaperProps: t4,
+            "aria-hidden": t5,
+            children: children
+        });
+        $[13] = anchor;
+        $[14] = children;
+        $[15] = isOpen;
+        $[16] = onClose;
+        $[17] = rest;
+        $[18] = t4;
+        $[19] = t5;
+        $[20] = t6;
+    } else {
+        t6 = $[20];
+    }
+    return t6;
 };
 
 //# sourceMappingURL=Drawer.js.map

package/dist/Drawer/Drawer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Drawer/Drawer.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport type { DrawerProps as MuiDrawerProps } from '@mui/material';\nimport { Drawer as MuiDrawer, useMediaQuery } from '@mui/material';\nimport type { ReactElement } from 'react';\n\nimport { combineSx } from '../utils';\n\nexport interface DrawerProps extends MuiDrawerProps {\n  isOpen: boolean;\n  onClose: () => void;\n  anchor?: 'left' | 'right';\n}\n\nconst DRAWER_DEFAULT_WIDTH = 1080;\n\nexport const Drawer = ({\n  anchor = 'right',\n  isOpen,\n  onClose,\n  PaperProps,\n  children,\n  ...rest\n}: DrawerProps): ReactElement => {\n  const isSmaller = useMediaQuery(`(max-width:${DRAWER_DEFAULT_WIDTH}px)`);\n\n  return (\n    <MuiDrawer\n      {...rest}\n      open={isOpen}\n      onClose={onClose}\n      anchor={anchor}\n      PaperProps={{\n        ...PaperProps,\n        sx: combineSx(\n          {\n            width: isSmaller ? '100%' : `${DRAWER_DEFAULT_WIDTH}px`,\n            overflow: 'hidden',\n          },\n          PaperProps?.sx,\n        ),\n      }}\n      aria-hidden={!isOpen} // Ensure the drawer is not focusable when closed + disable console.error about focusable elements\n    >\n      {children}\n    </MuiDrawer>\n  );\n};\n"],"names":["Drawer","MuiDrawer","useMediaQuery","combineSx","DRAWER_DEFAULT_WIDTH","anchor","isOpen","onClose","PaperProps","children","rest","isSmaller","open","sx","width","overflow","aria-hidden"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAGjC,SAASA,UAAUC,SAAS,EAAEC,aAAa,QAAQ,gBAAgB;AAGnE,SAASC,SAAS,QAAQ,oBAAW;AAQrC,MAAMC,uBAAuB;AAE7B,OAAO,MAAMJ,SAAS,CAAC,EACrBK,SAAS,OAAO,EAChBC,MAAM,EACNC,OAAO,EACPC,UAAU,EACVC,QAAQ,EACR,GAAGC,MACS;IACZ,MAAMC,YAAYT,cAAc,CAAC,WAAW,EAAEE,qBAAqB,GAAG,CAAC;IAEvE,qBACE,KAACH;QACE,GAAGS,IAAI;QACRE,MAAMN;QACNC,SAASA;QACTF,QAAQA;QACRG,YAAY;YACV,GAAGA,UAAU;YACbK,IAAIV,UACF;gBACEW,OAAOH,YAAY,SAAS,GAAGP,qBAAqB,EAAE,CAAC;gBACvDW,UAAU;YACZ,GACAP,YAAYK;QAEhB;QACAG,eAAa,CAACV;kBAEbG;;AAGP,EAAE"}
+{"version":3,"sources":["../../src/Drawer/Drawer.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport type { DrawerProps as MuiDrawerProps } from '@mui/material';\nimport { Drawer as MuiDrawer, useMediaQuery } from '@mui/material';\nimport type { ReactElement } from 'react';\n\nimport { combineSx } from '../utils';\n\nexport interface DrawerProps extends MuiDrawerProps {\n  isOpen: boolean;\n  onClose: () => void;\n  anchor?: 'left' | 'right';\n}\n\nconst DRAWER_DEFAULT_WIDTH = 1080;\n\nexport const Drawer = ({\n  anchor = 'right',\n  isOpen,\n  onClose,\n  PaperProps,\n  children,\n  ...rest\n}: DrawerProps): ReactElement => {\n  const isSmaller = useMediaQuery(`(max-width:${DRAWER_DEFAULT_WIDTH}px)`);\n\n  return (\n    <MuiDrawer\n      {...rest}\n      open={isOpen}\n      onClose={onClose}\n      anchor={anchor}\n      PaperProps={{\n        ...PaperProps,\n        sx: combineSx(\n          {\n            width: isSmaller ? '100%' : `${DRAWER_DEFAULT_WIDTH}px`,\n            overflow: 'hidden',\n          },\n          PaperProps?.sx,\n        ),\n      }}\n      aria-hidden={!isOpen} // Ensure the drawer is not focusable when closed + disable console.error about focusable elements\n    >\n      {children}\n    </MuiDrawer>\n  );\n};\n"],"names":["Drawer","MuiDrawer","useMediaQuery","combineSx","DRAWER_DEFAULT_WIDTH"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;;AAGjC,SAASA,UAAUC,SAAS,EAAEC,aAAa,QAAQ,gBAAgB;AAGnE,SAASC,SAAS,QAAQ,oBAAW;AAQrC,MAAMC,uBAAuB;AAE7B,OAAO,MAAMJ,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+BpB"}

package/dist/EChart/EChart.js

@@ -11,6 +11,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { jsx as _jsx } from "react/jsx-runtime";
+import { c as _c } from "react-compiler-runtime";
 import { Box } from "@mui/material";
 import { BarChart as EChartsBarChart, LineChart as EChartsLineChart, GaugeChart as EChartsGaugeChart, PieChart as EChartsPieChart, ScatterChart as EChartsScatterChart, CustomChart as EChartsCustomChart, HeatmapChart as EChartsHeatmapChart } from "echarts/charts";
 import { DatasetComponent, DataZoomComponent, LegendComponent, GridComponent, TitleComponent, TooltipComponent, VisualMapComponent, ToolboxComponent, MarkPointComponent, MarkAreaComponent, MarkLineComponent } from "echarts/components";
@@ -43,112 +44,200 @@ registerEChartsComponents([
     MarkPointComponent
 ]);
 const mouseEvents = [
-    'click',
-    'dblclick',
-    'mousedown',
-    'mousemove',
-    'mouseup',
-    'mouseover',
-    'mouseout',
-    'globalout',
-    'contextmenu'
+    "click",
+    "dblclick",
+    "mousedown",
+    "mousemove",
+    "mouseup",
+    "mouseover",
+    "mouseout",
+    "globalout",
+    "contextmenu"
 ];
 const batchEvents = [
-    'datazoom',
-    'downplay',
-    'highlight'
+    "datazoom",
+    "downplay",
+    "highlight"
 ];
-export const EChart = /*#__PURE__*/ memo(function EChart({ option, theme, renderer, sx, style, onEvents, _instance: instanceRef, syncGroup, onChartInitialized }) {
+export const EChart = /*#__PURE__*/ memo(function EChart(t0) {
+    const $ = _c(20);
+    const { option, theme, renderer, sx, style, onEvents, _instance: instanceRef, syncGroup, onChartInitialized } = t0;
     const initialOption = useRef(option);
     const prevOption = useRef(option);
     const containerRef = useRef(null);
     const chartElement = useRef(null);
-    // Initialize chart, dispose on unmount
-    useLayoutEffect(()=>{
-        if (containerRef.current === null || chartElement.current !== null) return;
-        chartElement.current = init(containerRef.current, theme, {
-            renderer: renderer ?? 'canvas'
-        });
-        if (chartElement.current === undefined) return;
-        chartElement.current.setOption(initialOption.current, true);
-        onChartInitialized?.(chartElement.current);
-        if (instanceRef !== undefined) {
-            instanceRef.current = chartElement.current;
-        }
-        return ()=>{
-            if (chartElement.current === null) return;
-            chartElement.current.dispose();
-            chartElement.current = null;
+    let t1;
+    let t2;
+    if ($[0] !== instanceRef || $[1] !== onChartInitialized || $[2] !== renderer || $[3] !== theme) {
+        t1 = ()=>{
+            if (containerRef.current === null || chartElement.current !== null) {
+                return;
+            }
+            chartElement.current = init(containerRef.current, theme, {
+                renderer: renderer ?? "canvas"
+            });
+            if (chartElement.current === undefined) {
+                return;
+            }
+            chartElement.current.setOption(initialOption.current, true);
+            onChartInitialized?.(chartElement.current);
+            if (instanceRef !== undefined) {
+                instanceRef.current = chartElement.current;
+            }
+            return ()=>{
+                if (chartElement.current === null) {
+                    return;
+                }
+                chartElement.current.dispose();
+                chartElement.current = null;
+            };
+        };
+        t2 = [
+            instanceRef,
+            onChartInitialized,
+            theme,
+            renderer
+        ];
+        $[0] = instanceRef;
+        $[1] = onChartInitialized;
+        $[2] = renderer;
+        $[3] = theme;
+        $[4] = t1;
+        $[5] = t2;
+    } else {
+        t1 = $[4];
+        t2 = $[5];
+    }
+    useLayoutEffect(t1, t2);
+    let t3;
+    let t4;
+    if ($[6] !== syncGroup) {
+        t3 = ()=>{
+            if (!chartElement.current || !syncGroup) {
+                return;
+            }
+            chartElement.current.group = syncGroup;
+            connect([
+                chartElement.current
+            ]);
+        };
+        t4 = [
+            syncGroup,
+            chartElement
+        ];
+        $[6] = syncGroup;
+        $[7] = t3;
+        $[8] = t4;
+    } else {
+        t3 = $[7];
+        t4 = $[8];
+    }
+    useEffect(t3, t4);
+    let t5;
+    let t6;
+    if ($[9] !== option) {
+        t5 = ()=>{
+            if (prevOption.current === undefined || isEqual(prevOption.current, option)) {
+                return;
+            }
+            if (!chartElement.current) {
+                return;
+            }
+            chartElement.current.setOption(option, true);
+            prevOption.current = option;
         };
-    }, [
-        instanceRef,
-        onChartInitialized,
-        theme,
-        renderer
-    ]);
-    // When syncGroup is explicitly set, charts within same group share interactions such as crosshair
-    useEffect(()=>{
-        if (!chartElement.current || !syncGroup) return;
-        chartElement.current.group = syncGroup;
-        connect([
-            chartElement.current
-        ]); // more info: https://echarts.apache.org/en/api.html#echarts.connect
-    }, [
-        syncGroup,
-        chartElement
-    ]);
-    // Update chart data when option changes
-    useEffect(()=>{
-        if (prevOption.current === undefined || isEqual(prevOption.current, option)) return;
-        if (!chartElement.current) return;
-        chartElement.current.setOption(option, true);
-        prevOption.current = option;
-    }, [
-        option
-    ]);
-    // Observe actual container size, including layout and style changes.
-    useLayoutEffect(()=>{
-        const container = containerRef.current;
-        if (!container) return;
-        const updateSize = debounce(()=>{
-            chartElement.current?.resize();
-        }, 200);
-        const observer = new ResizeObserver(updateSize);
-        observer.observe(container);
-        window.addEventListener('resize', updateSize);
-        updateSize();
-        return ()=>{
-            observer.disconnect();
-            window.removeEventListener('resize', updateSize);
-            updateSize.cancel();
+        t6 = [
+            option
+        ];
+        $[9] = option;
+        $[10] = t5;
+        $[11] = t6;
+    } else {
+        t5 = $[10];
+        t6 = $[11];
+    }
+    useEffect(t5, t6);
+    let t7;
+    let t8;
+    if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
+        t7 = ()=>{
+            const container = containerRef.current;
+            if (!container) {
+                return;
+            }
+            const updateSize = debounce(()=>{
+                chartElement.current?.resize();
+            }, 200);
+            const observer = new ResizeObserver(updateSize);
+            observer.observe(container);
+            window.addEventListener("resize", updateSize);
+            updateSize();
+            return ()=>{
+                observer.disconnect();
+                window.removeEventListener("resize", updateSize);
+                updateSize.cancel();
+            };
         };
-    }, []);
-    // Bind and unbind chart events passed as prop
-    useEffect(()=>{
-        const chart = chartElement.current;
-        if (!chart || onEvents === undefined) return;
-        bindEvents(chart, onEvents);
-        return ()=>{
-            if (chart === undefined) return;
-            if (chart.isDisposed() === true) return;
-            for(const event in onEvents){
-                chart.off(event);
+        t8 = [];
+        $[12] = t7;
+        $[13] = t8;
+    } else {
+        t7 = $[12];
+        t8 = $[13];
+    }
+    useLayoutEffect(t7, t8);
+    let t10;
+    let t9;
+    if ($[14] !== onEvents) {
+        t9 = ()=>{
+            const chart = chartElement.current;
+            if (!chart || onEvents === undefined) {
+                return;
             }
+            bindEvents(chart, onEvents);
+            return ()=>{
+                if (chart === undefined) {
+                    return;
+                }
+                if (chart.isDisposed() === true) {
+                    return;
+                }
+                for(const event in onEvents){
+                    chart.off(event);
+                }
+            };
         };
-    }, [
-        onEvents
-    ]);
-    return /*#__PURE__*/ _jsx(Box, {
-        ref: containerRef,
-        sx: sx,
-        style: style
-    });
+        t10 = [
+            onEvents
+        ];
+        $[14] = onEvents;
+        $[15] = t10;
+        $[16] = t9;
+    } else {
+        t10 = $[15];
+        t9 = $[16];
+    }
+    useEffect(t9, t10);
+    let t11;
+    if ($[17] !== style || $[18] !== sx) {
+        t11 = /*#__PURE__*/ _jsx(Box, {
+            ref: containerRef,
+            sx: sx,
+            style: style
+        });
+        $[17] = style;
+        $[18] = sx;
+        $[19] = t11;
+    } else {
+        t11 = $[19];
+    }
+    return t11;
 });
 // Validate event config and bind custom events
 function bindEvents(instance, events) {
     if (events === undefined) return;
     function bindEvent(eventName, OnEventFunction) {
-        if (typeof OnEventFunction === 'function') {
+        if (typeof OnEventFunction === "function") {
             if (isMouseEvent(eventName)) {
                 instance.on(eventName, (params)=>OnEventFunction(params, instance));
             } else if (isBatchEvent(eventName)) {

package/dist/EChart/EChart.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/EChart/EChart.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport type { SxProps, Theme } from '@mui/material';\nimport { Box } from '@mui/material';\nimport {\n  BarChart as EChartsBarChart,\n  LineChart as EChartsLineChart,\n  GaugeChart as EChartsGaugeChart,\n  PieChart as EChartsPieChart,\n  ScatterChart as EChartsScatterChart,\n  CustomChart as EChartsCustomChart,\n  HeatmapChart as EChartsHeatmapChart,\n} from 'echarts/charts';\nimport {\n  DatasetComponent,\n  DataZoomComponent,\n  LegendComponent,\n  GridComponent,\n  TitleComponent,\n  TooltipComponent,\n  VisualMapComponent,\n  ToolboxComponent,\n  MarkPointComponent,\n  MarkAreaComponent,\n  MarkLineComponent,\n} from 'echarts/components';\nimport type { ECharts, EChartsCoreOption } from 'echarts/core';\nimport { init, connect, use as registerEChartsComponents } from 'echarts/core';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport debounce from 'lodash/debounce';\nimport isEqual from 'lodash/isEqual';\nimport type { CSSProperties } from 'react';\nimport { memo, useEffect, useLayoutEffect, useRef } from 'react';\n\nimport type { EChartsTheme } from '../model';\n\n// Loading the ECharts extensions should happen in the respective plugins.\n// This is a workaround for https://github.com/perses/plugins/issues/83.\nregisterEChartsComponents([\n  DatasetComponent,\n  DataZoomComponent,\n  LegendComponent,\n  EChartsBarChart,\n  EChartsLineChart,\n  EChartsGaugeChart,\n  EChartsPieChart,\n  EChartsScatterChart,\n  EChartsCustomChart,\n  EChartsHeatmapChart,\n  GridComponent,\n  TitleComponent,\n  ToolboxComponent,\n  TooltipComponent,\n  CanvasRenderer,\n  VisualMapComponent,\n  MarkAreaComponent,\n  MarkLineComponent,\n  MarkPointComponent,\n]);\n\n// see docs for info about each property: https://echarts.apache.org/en/api.html#events\nexport interface MouseEventsParameters<T> {\n  componentType: string;\n  seriesType: string;\n  seriesIndex: number;\n  seriesName: string;\n  name: string;\n  dataIndex: number;\n  data: Record<string, unknown> & T;\n  dataType: string;\n  value: number | number[];\n  color: string;\n  info: Record<string, unknown>;\n}\n\ntype OnEventFunction<T> = (\n  params: MouseEventsParameters<T>,\n  // This is potentially undefined for testing purposes\n  instance?: ECharts,\n) => void;\n\nconst mouseEvents = [\n  'click',\n  'dblclick',\n  'mousedown',\n  'mousemove',\n  'mouseup',\n  'mouseover',\n  'mouseout',\n  'globalout',\n  'contextmenu',\n] as const;\n\nexport type MouseEventName = (typeof mouseEvents)[number];\n\n// batch event types\nexport interface DataZoomPayloadBatchItem {\n  dataZoomId: string;\n  // start and end not returned unless dataZoom is based on percentProp,\n  // which is for cases when a dataZoom component controls multiple axes\n  start?: number;\n  end?: number;\n  // startValue and endValue return data index for 'category' axes,\n  // for axis types 'value' and 'time', actual values are returned\n  startValue?: number;\n  endValue?: number;\n}\n\nexport interface HighlightPayloadBatchItem {\n  dataIndex: number;\n  dataIndexInside: number;\n  seriesIndex: number;\n  // highlight action can effect multiple connected charts\n  escapeConnect?: boolean;\n  // whether blur state was triggered\n  notBlur?: boolean;\n}\n\nexport interface BatchEventsParameters {\n  type: BatchEventName;\n  batch: DataZoomPayloadBatchItem[] & HighlightPayloadBatchItem[];\n}\n\ntype OnBatchEventFunction = (params: BatchEventsParameters) => void;\n\nconst batchEvents = ['datazoom', 'downplay', 'highlight'] as const;\n\nexport type BatchEventName = (typeof batchEvents)[number];\n\ntype ChartEventName = 'finished';\n\ntype EventName = MouseEventName | ChartEventName | BatchEventName;\n\nexport type OnEventsType<T> = {\n  [mouseEventName in MouseEventName]?: OnEventFunction<T>;\n} & {\n  [batchEventName in BatchEventName]?: OnBatchEventFunction;\n} & {\n  [eventName in ChartEventName]?: () => void;\n};\n\nexport interface EChartsProps<T> {\n  option: EChartsCoreOption;\n  theme?: string | EChartsTheme;\n  renderer?: 'canvas' | 'svg';\n  sx?: SxProps<Theme>;\n  style?: CSSProperties;\n  onEvents?: OnEventsType<T>;\n  _instance?: React.MutableRefObject<ECharts | undefined>;\n  syncGroup?: string;\n  onChartInitialized?: (instance: ECharts) => void;\n}\n\nexport const EChart = memo(function EChart<T>({\n  option,\n  theme,\n  renderer,\n  sx,\n  style,\n  onEvents,\n  _instance: instanceRef,\n  syncGroup,\n  onChartInitialized,\n}: EChartsProps<T>) {\n  const initialOption = useRef<EChartsCoreOption>(option);\n  const prevOption = useRef<EChartsCoreOption>(option);\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const chartElement = useRef<ECharts | null>(null);\n\n  // Initialize chart, dispose on unmount\n  useLayoutEffect(() => {\n    if (containerRef.current === null || chartElement.current !== null) return;\n    chartElement.current = init(containerRef.current, theme, { renderer: renderer ?? 'canvas' });\n    if (chartElement.current === undefined) return;\n    chartElement.current.setOption(initialOption.current, true);\n    onChartInitialized?.(chartElement.current);\n    if (instanceRef !== undefined) {\n      instanceRef.current = chartElement.current;\n    }\n    return (): void => {\n      if (chartElement.current === null) return;\n      chartElement.current.dispose();\n      chartElement.current = null;\n    };\n  }, [instanceRef, onChartInitialized, theme, renderer]);\n\n  // When syncGroup is explicitly set, charts within same group share interactions such as crosshair\n  useEffect(() => {\n    if (!chartElement.current || !syncGroup) return;\n    chartElement.current.group = syncGroup;\n    connect([chartElement.current]); // more info: https://echarts.apache.org/en/api.html#echarts.connect\n  }, [syncGroup, chartElement]);\n\n  // Update chart data when option changes\n  useEffect(() => {\n    if (prevOption.current === undefined || isEqual(prevOption.current, option)) return;\n    if (!chartElement.current) return;\n    chartElement.current.setOption(option, true);\n    prevOption.current = option;\n  }, [option]);\n\n  // Observe actual container size, including layout and style changes.\n  useLayoutEffect(() => {\n    const container = containerRef.current;\n    if (!container) return;\n    const updateSize = debounce(() => {\n      chartElement.current?.resize();\n    }, 200);\n    const observer = new ResizeObserver(updateSize);\n    observer.observe(container);\n    window.addEventListener('resize', updateSize);\n    updateSize();\n    return (): void => {\n      observer.disconnect();\n      window.removeEventListener('resize', updateSize);\n      updateSize.cancel();\n    };\n  }, []);\n\n  // Bind and unbind chart events passed as prop\n  useEffect(() => {\n    const chart = chartElement.current;\n    if (!chart || onEvents === undefined) return;\n    bindEvents(chart, onEvents);\n    return (): void => {\n      if (chart === undefined) return;\n      if (chart.isDisposed() === true) return;\n      for (const event in onEvents) {\n        chart.off(event);\n      }\n    };\n  }, [onEvents]);\n\n  return <Box ref={containerRef} sx={sx} style={style}></Box>;\n});\n\n// Validate event config and bind custom events\nfunction bindEvents<T>(instance: ECharts, events?: OnEventsType<T>): void {\n  if (events === undefined) return;\n\n  function bindEvent(eventName: EventName, OnEventFunction: unknown): void {\n    if (typeof OnEventFunction === 'function') {\n      if (isMouseEvent(eventName)) {\n        instance.on(eventName, (params) => OnEventFunction(params, instance));\n      } else if (isBatchEvent(eventName)) {\n        instance.on(eventName, (params) => OnEventFunction(params));\n      } else {\n        instance.on(eventName, () => OnEventFunction(null, instance));\n      }\n    }\n  }\n\n  for (const eventName in events) {\n    if (Object.prototype.hasOwnProperty.call(events, eventName)) {\n      const customEvent = events[eventName as EventName] ?? null;\n      if (customEvent) {\n        bindEvent(eventName as EventName, customEvent);\n      }\n    }\n  }\n}\n\nfunction isMouseEvent(eventName: EventName): eventName is MouseEventName {\n  return (mouseEvents as readonly string[]).includes(eventName);\n}\n\nfunction isBatchEvent(eventName: EventName): eventName is BatchEventName {\n  return (batchEvents as readonly string[]).includes(eventName);\n}\n"],"names":["Box","BarChart","EChartsBarChart","LineChart","EChartsLineChart","GaugeChart","EChartsGaugeChart","PieChart","EChartsPieChart","ScatterChart","EChartsScatterChart","CustomChart","EChartsCustomChart","HeatmapChart","EChartsHeatmapChart","DatasetComponent","DataZoomComponent","LegendComponent","GridComponent","TitleComponent","TooltipComponent","VisualMapComponent","ToolboxComponent","MarkPointComponent","MarkAreaComponent","MarkLineComponent","init","connect","use","registerEChartsComponents","CanvasRenderer","debounce","isEqual","memo","useEffect","useLayoutEffect","useRef","mouseEvents","batchEvents","EChart","option","theme","renderer","sx","style","onEvents","_instance","instanceRef","syncGroup","onChartInitialized","initialOption","prevOption","containerRef","chartElement","current","undefined","setOption","dispose","group","container","updateSize","resize","observer","ResizeObserver","observe","window","addEventListener","disconnect","removeEventListener","cancel","chart","bindEvents","isDisposed","event","off","ref","instance","events","bindEvent","eventName","OnEventFunction","isMouseEvent","on","params","isBatchEvent","Object","prototype","hasOwnProperty","call","customEvent","includes"],"mappings":"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"}
+{"version":3,"sources":["../../src/EChart/EChart.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport type { SxProps, Theme } from '@mui/material';\nimport { Box } from '@mui/material';\nimport {\n  BarChart as EChartsBarChart,\n  LineChart as EChartsLineChart,\n  GaugeChart as EChartsGaugeChart,\n  PieChart as EChartsPieChart,\n  ScatterChart as EChartsScatterChart,\n  CustomChart as EChartsCustomChart,\n  HeatmapChart as EChartsHeatmapChart,\n} from 'echarts/charts';\nimport {\n  DatasetComponent,\n  DataZoomComponent,\n  LegendComponent,\n  GridComponent,\n  TitleComponent,\n  TooltipComponent,\n  VisualMapComponent,\n  ToolboxComponent,\n  MarkPointComponent,\n  MarkAreaComponent,\n  MarkLineComponent,\n} from 'echarts/components';\nimport type { ECharts, EChartsCoreOption } from 'echarts/core';\nimport { init, connect, use as registerEChartsComponents } from 'echarts/core';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport debounce from 'lodash/debounce';\nimport isEqual from 'lodash/isEqual';\nimport type { CSSProperties } from 'react';\nimport { memo, useEffect, useLayoutEffect, useRef } from 'react';\n\nimport type { EChartsTheme } from '../model';\n\n// Loading the ECharts extensions should happen in the respective plugins.\n// This is a workaround for https://github.com/perses/plugins/issues/83.\nregisterEChartsComponents([\n  DatasetComponent,\n  DataZoomComponent,\n  LegendComponent,\n  EChartsBarChart,\n  EChartsLineChart,\n  EChartsGaugeChart,\n  EChartsPieChart,\n  EChartsScatterChart,\n  EChartsCustomChart,\n  EChartsHeatmapChart,\n  GridComponent,\n  TitleComponent,\n  ToolboxComponent,\n  TooltipComponent,\n  CanvasRenderer,\n  VisualMapComponent,\n  MarkAreaComponent,\n  MarkLineComponent,\n  MarkPointComponent,\n]);\n\n// see docs for info about each property: https://echarts.apache.org/en/api.html#events\nexport interface MouseEventsParameters<T> {\n  componentType: string;\n  seriesType: string;\n  seriesIndex: number;\n  seriesName: string;\n  name: string;\n  dataIndex: number;\n  data: Record<string, unknown> & T;\n  dataType: string;\n  value: number | number[];\n  color: string;\n  info: Record<string, unknown>;\n}\n\ntype OnEventFunction<T> = (\n  params: MouseEventsParameters<T>,\n  // This is potentially undefined for testing purposes\n  instance?: ECharts,\n) => void;\n\nconst mouseEvents = [\n  'click',\n  'dblclick',\n  'mousedown',\n  'mousemove',\n  'mouseup',\n  'mouseover',\n  'mouseout',\n  'globalout',\n  'contextmenu',\n] as const;\n\nexport type MouseEventName = (typeof mouseEvents)[number];\n\n// batch event types\nexport interface DataZoomPayloadBatchItem {\n  dataZoomId: string;\n  // start and end not returned unless dataZoom is based on percentProp,\n  // which is for cases when a dataZoom component controls multiple axes\n  start?: number;\n  end?: number;\n  // startValue and endValue return data index for 'category' axes,\n  // for axis types 'value' and 'time', actual values are returned\n  startValue?: number;\n  endValue?: number;\n}\n\nexport interface HighlightPayloadBatchItem {\n  dataIndex: number;\n  dataIndexInside: number;\n  seriesIndex: number;\n  // highlight action can effect multiple connected charts\n  escapeConnect?: boolean;\n  // whether blur state was triggered\n  notBlur?: boolean;\n}\n\nexport interface BatchEventsParameters {\n  type: BatchEventName;\n  batch: DataZoomPayloadBatchItem[] & HighlightPayloadBatchItem[];\n}\n\ntype OnBatchEventFunction = (params: BatchEventsParameters) => void;\n\nconst batchEvents = ['datazoom', 'downplay', 'highlight'] as const;\n\nexport type BatchEventName = (typeof batchEvents)[number];\n\ntype ChartEventName = 'finished';\n\ntype EventName = MouseEventName | ChartEventName | BatchEventName;\n\nexport type OnEventsType<T> = {\n  [mouseEventName in MouseEventName]?: OnEventFunction<T>;\n} & {\n  [batchEventName in BatchEventName]?: OnBatchEventFunction;\n} & {\n  [eventName in ChartEventName]?: () => void;\n};\n\nexport interface EChartsProps<T> {\n  option: EChartsCoreOption;\n  theme?: string | EChartsTheme;\n  renderer?: 'canvas' | 'svg';\n  sx?: SxProps<Theme>;\n  style?: CSSProperties;\n  onEvents?: OnEventsType<T>;\n  _instance?: React.MutableRefObject<ECharts | undefined>;\n  syncGroup?: string;\n  onChartInitialized?: (instance: ECharts) => void;\n}\n\nexport const EChart = memo(function EChart<T>({\n  option,\n  theme,\n  renderer,\n  sx,\n  style,\n  onEvents,\n  _instance: instanceRef,\n  syncGroup,\n  onChartInitialized,\n}: EChartsProps<T>) {\n  const initialOption = useRef<EChartsCoreOption>(option);\n  const prevOption = useRef<EChartsCoreOption>(option);\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const chartElement = useRef<ECharts | null>(null);\n\n  // Initialize chart, dispose on unmount\n  useLayoutEffect(() => {\n    if (containerRef.current === null || chartElement.current !== null) return;\n    chartElement.current = init(containerRef.current, theme, { renderer: renderer ?? 'canvas' });\n    if (chartElement.current === undefined) return;\n    chartElement.current.setOption(initialOption.current, true);\n    onChartInitialized?.(chartElement.current);\n    if (instanceRef !== undefined) {\n      instanceRef.current = chartElement.current;\n    }\n    return (): void => {\n      if (chartElement.current === null) return;\n      chartElement.current.dispose();\n      chartElement.current = null;\n    };\n  }, [instanceRef, onChartInitialized, theme, renderer]);\n\n  // When syncGroup is explicitly set, charts within same group share interactions such as crosshair\n  useEffect(() => {\n    if (!chartElement.current || !syncGroup) return;\n    chartElement.current.group = syncGroup;\n    connect([chartElement.current]); // more info: https://echarts.apache.org/en/api.html#echarts.connect\n  }, [syncGroup, chartElement]);\n\n  // Update chart data when option changes\n  useEffect(() => {\n    if (prevOption.current === undefined || isEqual(prevOption.current, option)) return;\n    if (!chartElement.current) return;\n    chartElement.current.setOption(option, true);\n    prevOption.current = option;\n  }, [option]);\n\n  // Observe actual container size, including layout and style changes.\n  useLayoutEffect(() => {\n    const container = containerRef.current;\n    if (!container) return;\n    const updateSize = debounce(() => {\n      chartElement.current?.resize();\n    }, 200);\n    const observer = new ResizeObserver(updateSize);\n    observer.observe(container);\n    window.addEventListener('resize', updateSize);\n    updateSize();\n    return (): void => {\n      observer.disconnect();\n      window.removeEventListener('resize', updateSize);\n      updateSize.cancel();\n    };\n  }, []);\n\n  // Bind and unbind chart events passed as prop\n  useEffect(() => {\n    const chart = chartElement.current;\n    if (!chart || onEvents === undefined) return;\n    bindEvents(chart, onEvents);\n    return (): void => {\n      if (chart === undefined) return;\n      if (chart.isDisposed() === true) return;\n      for (const event in onEvents) {\n        chart.off(event);\n      }\n    };\n  }, [onEvents]);\n\n  return <Box ref={containerRef} sx={sx} style={style}></Box>;\n});\n\n// Validate event config and bind custom events\nfunction bindEvents<T>(instance: ECharts, events?: OnEventsType<T>): void {\n  if (events === undefined) return;\n\n  function bindEvent(eventName: EventName, OnEventFunction: unknown): void {\n    if (typeof OnEventFunction === 'function') {\n      if (isMouseEvent(eventName)) {\n        instance.on(eventName, (params) => OnEventFunction(params, instance));\n      } else if (isBatchEvent(eventName)) {\n        instance.on(eventName, (params) => OnEventFunction(params));\n      } else {\n        instance.on(eventName, () => OnEventFunction(null, instance));\n      }\n    }\n  }\n\n  for (const eventName in events) {\n    if (Object.prototype.hasOwnProperty.call(events, eventName)) {\n      const customEvent = events[eventName as EventName] ?? null;\n      if (customEvent) {\n        bindEvent(eventName as EventName, customEvent);\n      }\n    }\n  }\n}\n\nfunction isMouseEvent(eventName: EventName): eventName is MouseEventName {\n  return (mouseEvents as readonly string[]).includes(eventName);\n}\n\nfunction isBatchEvent(eventName: EventName): eventName is BatchEventName {\n  return (batchEvents as readonly string[]).includes(eventName);\n}\n"],"names":["Box","BarChart","EChartsBarChart","LineChart","EChartsLineChart","GaugeChart","EChartsGaugeChart","PieChart","EChartsPieChart","ScatterChart","EChartsScatterChart","CustomChart","EChartsCustomChart","HeatmapChart","EChartsHeatmapChart","DatasetComponent","DataZoomComponent","LegendComponent","GridComponent","TitleComponent","TooltipComponent","VisualMapComponent","ToolboxComponent","MarkPointComponent","MarkAreaComponent","MarkLineComponent","init","connect","use","registerEChartsComponents","CanvasRenderer","debounce","isEqual","memo","useEffect","useLayoutEffect","useRef","mouseEvents","batchEvents","EChart","bindEvents","instance","events","undefined","bindEvent","eventName","OnEventFunction","isMouseEvent","on","params","isBatchEvent","Object","prototype","hasOwnProperty","call","customEvent","includes"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;;AAGjC,SAASA,GAAG,QAAQ,gBAAgB;AACpC,SACEC,YAAYC,eAAe,EAC3BC,aAAaC,gBAAgB,EAC7BC,cAAcC,iBAAiB,EAC/BC,YAAYC,eAAe,EAC3BC,gBAAgBC,mBAAmB,EACnCC,eAAeC,kBAAkB,EACjCC,gBAAgBC,mBAAmB,QAC9B,iBAAiB;AACxB,SACEC,gBAAgB,EAChBC,iBAAiB,EACjBC,eAAe,EACfC,aAAa,EACbC,cAAc,EACdC,gBAAgB,EAChBC,kBAAkB,EAClBC,gBAAgB,EAChBC,kBAAkB,EAClBC,iBAAiB,EACjBC,iBAAiB,QACZ,qBAAqB;AAE5B,SAASC,IAAI,EAAEC,OAAO,EAAEC,OAAOC,yBAAyB,QAAQ,eAAe;AAC/E,SAASC,cAAc,QAAQ,oBAAoB;AACnD,OAAOC,cAAc,kBAAkB;AACvC,OAAOC,aAAa,iBAAiB;AAErC,SAASC,IAAI,EAAEC,SAAS,EAAEC,eAAe,EAAEC,MAAM,QAAQ,QAAQ;AAIjE,0EAA0E;AAC1E,wEAAwE;AACxEP,0BAA0B;IACxBd;IACAC;IACAC;IACAf;IACAE;IACAE;IACAE;IACAE;IACAE;IACAE;IACAI;IACAC;IACAG;IACAF;IACAU;IACAT;IACAG;IACAC;IACAF;CACD;AAuBD,MAAMc,cAAc;IAClB;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;CACD;AAkCD,MAAMC,cAAc;IAAC;IAAY;IAAY;CAAY;AA4BzD,OAAO,MAAMC,uBAASN,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiFxB;AAEH,+CAA+C;AAC/C,SAASO,WAAcC,QAAQ,EAAWC,MAAM;IAC9C,IAAIA,WAAWC,WAAW;IAE1B,SAASC,UAAUC,SAAS,EAAaC,eAAe;QACtD,IAAI,OAAOA,oBAAoB,YAAY;YACzC,IAAIC,aAAaF,YAAY;gBAC3BJ,SAASO,EAAE,CAACH,WAAW,CAACI,SAAWH,gBAAgBG,QAAQR;YAC7D,OAAO,IAAIS,aAAaL,YAAY;gBAClCJ,SAASO,EAAE,CAACH,WAAW,CAACI,SAAWH,gBAAgBG;YACrD,OAAO;gBACLR,SAASO,EAAE,CAACH,WAAW,IAAMC,gBAAgB,MAAML;YACrD;QACF;IACF;IAEA,IAAK,MAAMI,aAAaH,OAAQ;QAC9B,IAAIS,OAAOC,SAAS,CAACC,cAAc,CAACC,IAAI,CAACZ,QAAQG,YAAY;YAC3D,MAAMU,cAAcb,MAAOG,CAAAA,UAAsB,AAAC,IAAI;YACtD,IAAIU,aAAa;gBACfX,UAAUC,WAAwBU;YACpC;QACF;IACF;AACF;AAEA,SAASR,aAAaF,SAAS;IAC7B,OAAO,AAACR,YAAkCmB,QAAQ,CAACX;AACrD;AAEA,SAASK,aAAaL,SAAS;IAC7B,OAAO,AAACP,YAAkCkB,QAAQ,CAACX;AACrD"}

package/dist/ErrorAlert.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { c as _c } from "react-compiler-runtime";
 // Copyright The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
@@ -15,11 +16,20 @@ import { Alert } from "@mui/material";
 /**
  * Shows an MUI Alert with the `Error.message` as its contents.
  */ export function ErrorAlert(props) {
+    const $ = _c(2);
     const { error } = props;
-    return /*#__PURE__*/ _jsx(Alert, {
-        severity: "error",
-        children: error.message
-    });
+    let t0;
+    if ($[0] !== error.message) {
+        t0 = /*#__PURE__*/ _jsx(Alert, {
+            severity: "error",
+            children: error.message
+        });
+        $[0] = error.message;
+        $[1] = t0;
+    } else {
+        t0 = $[1];
+    }
+    return t0;
 }
 
 //# sourceMappingURL=ErrorAlert.js.map

package/dist/ErrorAlert.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/ErrorAlert.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 { Alert } from '@mui/material';\nimport type { ReactElement } from 'react';\n\nexport interface ErrorAlertProps {\n  error: Error;\n}\n\n/**\n * Shows an MUI Alert with the `Error.message` as its contents.\n */\nexport function ErrorAlert(props: ErrorAlertProps): ReactElement {\n  const { error } = props;\n  return <Alert severity=\"error\">{error.message}</Alert>;\n}\n"],"names":["Alert","ErrorAlert","props","error","severity","message"],"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,KAAK,QAAQ,gBAAgB;AAOtC;;CAEC,GACD,OAAO,SAASC,WAAWC,KAAsB;IAC/C,MAAM,EAAEC,KAAK,EAAE,GAAGD;IAClB,qBAAO,KAACF;QAAMI,UAAS;kBAASD,MAAME,OAAO;;AAC/C"}
+{"version":3,"sources":["../src/ErrorAlert.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 { Alert } from '@mui/material';\nimport type { ReactElement } from 'react';\n\nexport interface ErrorAlertProps {\n  error: Error;\n}\n\n/**\n * Shows an MUI Alert with the `Error.message` as its contents.\n */\nexport function ErrorAlert(props: ErrorAlertProps): ReactElement {\n  const { error } = props;\n  return <Alert severity=\"error\">{error.message}</Alert>;\n}\n"],"names":["Alert"],"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,KAAK,QAAQ,gBAAgB;AAOtC;;CAEC,GACD,OAAO"}