@perses-dev/components 0.31.0 → 0.33.0

package/dist/ContentWithLegend/ContentWithLegend.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { ContentWithLegendProps } from './model/content-with-legend-model';
+/**
+ * Component to help lay out content alongside a `Legend` component based on the
+ * configuration of the legend.
+ *
+ * See the documentation for the `Legend` component for more details about the
+ * features and configuration of the legend.
+ */
+export declare function ContentWithLegend({ children, legendProps, width, height, spacing, minChildrenWidth, minChildrenHeight, }: ContentWithLegendProps): JSX.Element;
+//# sourceMappingURL=ContentWithLegend.d.ts.map

package/dist/ContentWithLegend/ContentWithLegend.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContentWithLegend.d.ts","sourceRoot":"","sources":["../../src/ContentWithLegend/ContentWithLegend.tsx"],"names":[],"mappings":";AAgBA,OAAO,EAAE,sBAAsB,EAA8B,MAAM,mCAAmC,CAAC;AAEvG;;;;;;GAMG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,QAAQ,EACR,WAAW,EACX,KAAK,EACL,MAAM,EACN,OAAW,EACX,gBAAsB,EACtB,iBAAuB,GACxB,EAAE,sBAAsB,eAmCxB"}

package/dist/ContentWithLegend/ContentWithLegend.js

@@ -0,0 +1,65 @@
+// Copyright 2023 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { Box, useTheme } from '@mui/material';
+import { Legend } from '../Legend';
+import { getContentWithLegendLayout } from './model/content-with-legend-model';
+/**
+ * Component to help lay out content alongside a `Legend` component based on the
+ * configuration of the legend.
+ *
+ * See the documentation for the `Legend` component for more details about the
+ * features and configuration of the legend.
+ */ export function ContentWithLegend({ children , legendProps , width , height , spacing =0 , minChildrenWidth =100 , minChildrenHeight =100  }) {
+    const theme = useTheme();
+    const { content , legend , margin  } = getContentWithLegendLayout({
+        width,
+        height,
+        legendOptions: legendProps === null || legendProps === void 0 ? void 0 : legendProps.options,
+        minChildrenHeight,
+        minChildrenWidth,
+        spacing,
+        theme
+    });
+    return /*#__PURE__*/ _jsxs(Box, {
+        sx: {
+            width,
+            height,
+            position: 'relative',
+            overflow: 'hidden'
+        },
+        children: [
+            /*#__PURE__*/ _jsx(Box, {
+                sx: {
+                    width: content.width,
+                    height: content.height,
+                    marginRight: `${margin.right}px`,
+                    marginBottom: `${margin.bottom}px`,
+                    overflow: 'hidden'
+                },
+                children: typeof children === 'function' ? children({
+                    width: content.width,
+                    height: content.height
+                }) : children
+            }),
+            legendProps && legend.show && /*#__PURE__*/ _jsx(Legend, {
+                ...legendProps,
+                height: legend.height,
+                width: legend.width
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=ContentWithLegend.js.map

package/dist/ContentWithLegend/ContentWithLegend.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/ContentWithLegend/ContentWithLegend.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport React from 'react';\nimport { Box, useTheme } from '@mui/material';\nimport { Legend } from '../Legend';\nimport { ContentWithLegendProps, getContentWithLegendLayout } from './model/content-with-legend-model';\n\n/**\n * Component to help lay out content alongside a `Legend` component based on the\n * configuration of the legend.\n *\n * See the documentation for the `Legend` component for more details about the\n * features and configuration of the legend.\n */\nexport function ContentWithLegend({\n  children,\n  legendProps,\n  width,\n  height,\n  spacing = 0,\n  minChildrenWidth = 100,\n  minChildrenHeight = 100,\n}: ContentWithLegendProps) {\n  const theme = useTheme();\n  const { content, legend, margin } = getContentWithLegendLayout({\n    width,\n    height,\n    legendOptions: legendProps?.options,\n    minChildrenHeight,\n    minChildrenWidth,\n    spacing,\n    theme,\n  });\n\n  return (\n    <Box\n      sx={{\n        width,\n        height,\n        position: 'relative',\n        overflow: 'hidden',\n      }}\n    >\n      <Box\n        sx={{\n          width: content.width,\n          height: content.height,\n          marginRight: `${margin.right}px`,\n          marginBottom: `${margin.bottom}px`,\n          overflow: 'hidden',\n        }}\n      >\n        {typeof children === 'function' ? children({ width: content.width, height: content.height }) : children}\n      </Box>\n      {legendProps && legend.show && <Legend {...legendProps} height={legend.height} width={legend.width} />}\n    </Box>\n  );\n}\n"],"names":["React","Box","useTheme","Legend","getContentWithLegendLayout","ContentWithLegend","children","legendProps","width","height","spacing","minChildrenWidth","minChildrenHeight","theme","content","legend","margin","legendOptions","options","sx","position","overflow","marginRight","right","marginBottom","bottom","show"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,OAAOA,KAAK,MAAM,OAAO,CAAC;AAC1B,SAASC,GAAG,EAAEC,QAAQ,QAAQ,eAAe,CAAC;AAC9C,SAASC,MAAM,QAAQ,WAAW,CAAC;AACnC,SAAiCC,0BAA0B,QAAQ,mCAAmC,CAAC;AAEvG;;;;;;CAMC,GACD,OAAO,SAASC,iBAAiB,CAAC,EAChCC,QAAQ,CAAA,EACRC,WAAW,CAAA,EACXC,KAAK,CAAA,EACLC,MAAM,CAAA,EACNC,OAAO,EAAG,CAAC,CAAA,EACXC,gBAAgB,EAAG,GAAG,CAAA,EACtBC,iBAAiB,EAAG,GAAG,CAAA,EACA,EAAE;IACzB,MAAMC,KAAK,GAAGX,QAAQ,EAAE,AAAC;IACzB,MAAM,EAAEY,OAAO,CAAA,EAAEC,MAAM,CAAA,EAAEC,MAAM,CAAA,EAAE,GAAGZ,0BAA0B,CAAC;QAC7DI,KAAK;QACLC,MAAM;QACNQ,aAAa,EAAEV,WAAW,aAAXA,WAAW,WAAS,GAApBA,KAAAA,CAAoB,GAApBA,WAAW,CAAEW,OAAO;QACnCN,iBAAiB;QACjBD,gBAAgB;QAChBD,OAAO;QACPG,KAAK;KACN,CAAC,AAAC;IAEH,qBACE,MAACZ,GAAG;QACFkB,EAAE,EAAE;YACFX,KAAK;YACLC,MAAM;YACNW,QAAQ,EAAE,UAAU;YACpBC,QAAQ,EAAE,QAAQ;SACnB;;0BAED,KAACpB,GAAG;gBACFkB,EAAE,EAAE;oBACFX,KAAK,EAAEM,OAAO,CAACN,KAAK;oBACpBC,MAAM,EAAEK,OAAO,CAACL,MAAM;oBACtBa,WAAW,EAAE,CAAC,EAAEN,MAAM,CAACO,KAAK,CAAC,EAAE,CAAC;oBAChCC,YAAY,EAAE,CAAC,EAAER,MAAM,CAACS,MAAM,CAAC,EAAE,CAAC;oBAClCJ,QAAQ,EAAE,QAAQ;iBACnB;0BAEA,OAAOf,QAAQ,KAAK,UAAU,GAAGA,QAAQ,CAAC;oBAAEE,KAAK,EAAEM,OAAO,CAACN,KAAK;oBAAEC,MAAM,EAAEK,OAAO,CAACL,MAAM;iBAAE,CAAC,GAAGH,QAAQ;cACnG;YACLC,WAAW,IAAIQ,MAAM,CAACW,IAAI,kBAAI,KAACvB,MAAM;gBAAE,GAAGI,WAAW;gBAAEE,MAAM,EAAEM,MAAM,CAACN,MAAM;gBAAED,KAAK,EAAEO,MAAM,CAACP,KAAK;cAAI;;MAClG,CACN;AACJ,CAAC"}

package/dist/ContentWithLegend/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ContentWithLegend';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ContentWithLegend/index.ts"],"names":[],"mappings":"AAaA,cAAc,qBAAqB,CAAC"}

package/dist/ContentWithLegend/index.js

@@ -0,0 +1,15 @@
+// Copyright 2023 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+export * from './ContentWithLegend';
+
+//# sourceMappingURL=index.js.map

package/dist/ContentWithLegend/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/ContentWithLegend/index.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nexport * from './ContentWithLegend';\n"],"names":[],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,cAAc,qBAAqB,CAAC"}

package/dist/ContentWithLegend/model/content-with-legend-model.d.ts

@@ -0,0 +1,68 @@
+/// <reference types="react" />
+import { Theme } from '@mui/material';
+import { LegendProps } from '../../Legend';
+import { LegendPositions } from '../../model/legend';
+declare type Dimensions = {
+    width: number;
+    height: number;
+};
+export interface ContentWithLegendProps {
+    /**
+     * Width of the overall component layout in pixels.
+     */
+    width: number;
+    /**
+     * Height of overall component layout in pixels.
+     */
+    height: number;
+    /**
+     * Child content to render next to the legend. May be a react node or a
+     * function that returns a react node. The function provides the expected
+     * height and width for the content, which can be useful for passing down
+     * to chart components.
+     */
+    children: React.ReactNode | (({ width, height }: Dimensions) => React.ReactNode);
+    /**
+     * Props to configure the legend. If not set, the content is rendered without
+     * a legend.
+     */
+    legendProps?: Omit<LegendProps, 'width' | 'height'>;
+    /**
+     * Space to put between the children and the legend in pixels.
+     */
+    spacing?: number;
+    /**
+     * Minimum width required for the content specified by the `children` prop.
+     * If this width cannot be maintained with a right positioned legend, the
+     * legend will not be shown.
+     */
+    minChildrenWidth?: number;
+    /**
+     * Minimum height required for the content specified by the `children` prop.
+     * If this width cannot be maintained with a bottom positioned legend, the
+     * legend will not be shown.
+     */
+    minChildrenHeight?: number;
+}
+export interface ContentWithLegendLayoutOpts extends Required<Omit<ContentWithLegendProps, 'children' | 'legendProps'>> {
+    legendOptions?: LegendProps['options'];
+    theme: Theme;
+}
+export interface ContentWithLegendLayout {
+    legend: Dimensions & {
+        show: boolean;
+    };
+    content: Dimensions;
+    margin: {
+        right: number;
+        bottom: number;
+    };
+}
+declare type LegendSizeConfig = Record<LegendPositions, number>;
+export declare const TABLE_LEGEND_SIZE: LegendSizeConfig;
+/**
+ * Returns information for laying out content alongside a legend.
+ */
+export declare function getContentWithLegendLayout({ width, height, legendOptions, minChildrenHeight, minChildrenWidth, spacing, theme, }: ContentWithLegendLayoutOpts): ContentWithLegendLayout;
+export {};
+//# sourceMappingURL=content-with-legend-model.d.ts.map

package/dist/ContentWithLegend/model/content-with-legend-model.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"content-with-legend-model.d.ts","sourceRoot":"","sources":["../../../src/ContentWithLegend/model/content-with-legend-model.ts"],"names":[],"mappings":";AAaA,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAE3C,OAAO,EAAE,eAAe,EAAiB,MAAM,oBAAoB,CAAC;AAEpE,aAAK,UAAU,GAAG;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,WAAW,sBAAsB;IACrC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IACf;;;;;OAKG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,UAAU,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;IACjF;;;OAGG;IACH,WAAW,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,OAAO,GAAG,QAAQ,CAAC,CAAC;IACpD;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,MAAM,WAAW,2BACf,SAAQ,QAAQ,CAAC,IAAI,CAAC,sBAAsB,EAAE,UAAU,GAAG,aAAa,CAAC,CAAC;IAC1E,aAAa,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IACvC,KAAK,EAAE,KAAK,CAAC;CACd;AAED,MAAM,WAAW,uBAAuB;IACtC,MAAM,EAAE,UAAU,GAAG;QACnB,IAAI,EAAE,OAAO,CAAC;KACf,CAAC;IACF,OAAO,EAAE,UAAU,CAAC;IACpB,MAAM,EAAE;QACN,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;CACH;AAED,aAAK,gBAAgB,GAAG,MAAM,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;AAExD,eAAO,MAAM,iBAAiB,EAAE,gBAM/B,CAAC;AAMF;;GAEG;AACH,wBAAgB,0BAA0B,CAAC,EACzC,KAAK,EACL,MAAM,EACN,aAAa,EACb,iBAAiB,EACjB,gBAAgB,EAChB,OAAO,EACP,KAAK,GACN,EAAE,2BAA2B,GAAG,uBAAuB,CA4EvD"}

package/dist/ContentWithLegend/model/content-with-legend-model.js

@@ -0,0 +1,90 @@
+// Copyright 2023 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { getTableCellLayout } from '../../Table';
+import { getLegendMode } from '../../model/legend';
+export const TABLE_LEGEND_SIZE = {
+    // 5 rows plus header. Value to be multiplied by row height in pixels.
+    Bottom: 6,
+    // Pixel value
+    Right: 250
+};
+const PANEL_HEIGHT_LG_BREAKPOINT = 300;
+const LEGEND_HEIGHT_SM = 40;
+const LEGEND_HEIGHT_LG = 100;
+/**
+ * Returns information for laying out content alongside a legend.
+ */ export function getContentWithLegendLayout({ width , height , legendOptions , minChildrenHeight , minChildrenWidth , spacing , theme  }) {
+    const hasLegend = !!legendOptions;
+    const noLegendLayout = {
+        legend: {
+            show: false,
+            width: 0,
+            height: 0
+        },
+        content: {
+            width,
+            height
+        },
+        margin: {
+            right: 0,
+            bottom: 0
+        }
+    };
+    if (!hasLegend) {
+        return noLegendLayout;
+    }
+    const { position  } = legendOptions;
+    const mode = getLegendMode(legendOptions.mode);
+    let legendWidth;
+    let legendHeight;
+    if (mode === 'List') {
+        // TODO: normalize list to share similar height options as the table
+        // when we add more size options.
+        legendWidth = position === 'Right' ? 200 : width;
+        // TODO: account for number of legend items returned when adjusting legend spacing
+        legendHeight = LEGEND_HEIGHT_SM;
+        if (position === 'Right') {
+            legendHeight = height;
+        } else if (height >= PANEL_HEIGHT_LG_BREAKPOINT) {
+            legendHeight = LEGEND_HEIGHT_LG;
+        }
+    } else {
+        // Table mode
+        const tableLayout = getTableCellLayout(theme, 'compact');
+        legendWidth = position === 'Right' ? TABLE_LEGEND_SIZE['Right'] : width;
+        legendHeight = position === 'Bottom' ? TABLE_LEGEND_SIZE['Bottom'] * tableLayout.height : height;
+    }
+    const contentWidth = position === 'Right' ? width - legendWidth - spacing : width;
+    const contentHeight = position === 'Bottom' ? height - legendHeight - spacing : height;
+    if (position === 'Right' && contentWidth < minChildrenWidth || position === 'Bottom' && contentHeight < minChildrenHeight) {
+        // Legend does not fit. Just show the content.
+        return noLegendLayout;
+    }
+    return {
+        legend: {
+            width: legendWidth,
+            height: legendHeight,
+            show: true
+        },
+        content: {
+            width: contentWidth,
+            height: contentHeight
+        },
+        margin: {
+            right: position === 'Right' ? spacing : 0,
+            bottom: position === 'Bottom' ? spacing : 0
+        }
+    };
+}
+
+//# sourceMappingURL=content-with-legend-model.js.map

package/dist/ContentWithLegend/model/content-with-legend-model.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ContentWithLegend/model/content-with-legend-model.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Theme } from '@mui/material';\nimport { LegendProps } from '../../Legend';\nimport { getTableCellLayout } from '../../Table';\nimport { LegendPositions, getLegendMode } from '../../model/legend';\n\ntype Dimensions = {\n  width: number;\n  height: number;\n};\n\nexport interface ContentWithLegendProps {\n  /**\n   * Width of the overall component layout in pixels.\n   */\n  width: number;\n  /**\n   * Height of overall component layout in pixels.\n   */\n  height: number;\n  /**\n   * Child content to render next to the legend. May be a react node or a\n   * function that returns a react node. The function provides the expected\n   * height and width for the content, which can be useful for passing down\n   * to chart components.\n   */\n  children: React.ReactNode | (({ width, height }: Dimensions) => React.ReactNode);\n  /**\n   * Props to configure the legend. If not set, the content is rendered without\n   * a legend.\n   */\n  legendProps?: Omit<LegendProps, 'width' | 'height'>;\n  /**\n   * Space to put between the children and the legend in pixels.\n   */\n  spacing?: number;\n\n  /**\n   * Minimum width required for the content specified by the `children` prop.\n   * If this width cannot be maintained with a right positioned legend, the\n   * legend will not be shown.\n   */\n  minChildrenWidth?: number;\n\n  /**\n   * Minimum height required for the content specified by the `children` prop.\n   * If this width cannot be maintained with a bottom positioned legend, the\n   * legend will not be shown.\n   */\n  minChildrenHeight?: number;\n}\n\nexport interface ContentWithLegendLayoutOpts\n  extends Required<Omit<ContentWithLegendProps, 'children' | 'legendProps'>> {\n  legendOptions?: LegendProps['options'];\n  theme: Theme;\n}\n\nexport interface ContentWithLegendLayout {\n  legend: Dimensions & {\n    show: boolean;\n  };\n  content: Dimensions;\n  margin: {\n    right: number;\n    bottom: number;\n  };\n}\n\ntype LegendSizeConfig = Record<LegendPositions, number>;\n\nexport const TABLE_LEGEND_SIZE: LegendSizeConfig = {\n  // 5 rows plus header. Value to be multiplied by row height in pixels.\n  Bottom: 6,\n\n  // Pixel value\n  Right: 250,\n};\n\nconst PANEL_HEIGHT_LG_BREAKPOINT = 300;\nconst LEGEND_HEIGHT_SM = 40;\nconst LEGEND_HEIGHT_LG = 100;\n\n/**\n * Returns information for laying out content alongside a legend.\n */\nexport function getContentWithLegendLayout({\n  width,\n  height,\n  legendOptions,\n  minChildrenHeight,\n  minChildrenWidth,\n  spacing,\n  theme,\n}: ContentWithLegendLayoutOpts): ContentWithLegendLayout {\n  const hasLegend = !!legendOptions;\n\n  const noLegendLayout: ContentWithLegendLayout = {\n    legend: {\n      show: false,\n      width: 0,\n      height: 0,\n    },\n    content: {\n      width,\n      height,\n    },\n    margin: {\n      right: 0,\n      bottom: 0,\n    },\n  };\n\n  if (!hasLegend) {\n    return noLegendLayout;\n  }\n\n  const { position } = legendOptions;\n  const mode = getLegendMode(legendOptions.mode);\n\n  let legendWidth;\n  let legendHeight;\n\n  if (mode === 'List') {\n    // TODO: normalize list to share similar height options as the table\n    // when we add more size options.\n    legendWidth = position === 'Right' ? 200 : width;\n\n    // TODO: account for number of legend items returned when adjusting legend spacing\n    legendHeight = LEGEND_HEIGHT_SM;\n    if (position === 'Right') {\n      legendHeight = height;\n    } else if (height >= PANEL_HEIGHT_LG_BREAKPOINT) {\n      legendHeight = LEGEND_HEIGHT_LG;\n    }\n  } else {\n    // Table mode\n\n    const tableLayout = getTableCellLayout(theme, 'compact');\n\n    legendWidth = position === 'Right' ? TABLE_LEGEND_SIZE['Right'] : width;\n    legendHeight = position === 'Bottom' ? TABLE_LEGEND_SIZE['Bottom'] * tableLayout.height : height;\n  }\n\n  const contentWidth = position === 'Right' ? width - legendWidth - spacing : width;\n  const contentHeight = position === 'Bottom' ? height - legendHeight - spacing : height;\n\n  if (\n    (position === 'Right' && contentWidth < minChildrenWidth) ||\n    (position === 'Bottom' && contentHeight < minChildrenHeight)\n  ) {\n    // Legend does not fit. Just show the content.\n    return noLegendLayout;\n  }\n\n  return {\n    legend: {\n      width: legendWidth,\n      height: legendHeight,\n      show: true,\n    },\n    content: {\n      width: contentWidth,\n      height: contentHeight,\n    },\n    margin: {\n      right: position === 'Right' ? spacing : 0,\n      bottom: position === 'Bottom' ? spacing : 0,\n    },\n  };\n}\n"],"names":["getTableCellLayout","getLegendMode","TABLE_LEGEND_SIZE","Bottom","Right","PANEL_HEIGHT_LG_BREAKPOINT","LEGEND_HEIGHT_SM","LEGEND_HEIGHT_LG","getContentWithLegendLayout","width","height","legendOptions","minChildrenHeight","minChildrenWidth","spacing","theme","hasLegend","noLegendLayout","legend","show","content","margin","right","bottom","position","mode","legendWidth","legendHeight","tableLayout","contentWidth","contentHeight"],"mappings":"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"}

package/dist/EChart/EChart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EChart.d.ts","sourceRoot":"","sources":["../../src/EChart/EChart.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"EChart.d.ts","sourceRoot":"","sources":["../../src/EChart/EChart.tsx"],"names":[],"mappings":"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"}

package/dist/EChart/EChart.js

@@ -95,11 +95,19 @@ export const EChart = /*#__PURE__*/ React.memo(function EChart({ option , theme
     }, [
         onEvents
     ]);
+    // TODO: re-evaluate how this is triggered. It's technically working right
+    // now because the sx prop is an object that gets re-created, but that also
+    // means it runs unnecessarily some of the time and theoretically might
+    // not run in some other cases. Maybe it should use a resize observer?
     useEffect(()=>{
+        // TODO: fix this debouncing. This likely isn't working as intended because
+        // the debounced function is re-created every time this useEffect is called.
         const updateSize = debounce(()=>{
             if (!chartElement.current) return;
             chartElement.current.resize();
-        }, 200);
+        }, 200, {
+            leading: true
+        });
         updateSize();
     }, [
         sx

package/dist/EChart/EChart.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/EChart/EChart.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport React, { useEffect, useLayoutEffect, useRef } from 'react';\nimport { ECharts, EChartsCoreOption, init } from 'echarts/core';\nimport { Box, SxProps, Theme } from '@mui/material';\nimport { isEqual, debounce } from 'lodash-es';\nimport { EChartsTheme } from '../model';\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  onEvents?: OnEventsType<T>;\n  _instance?: React.MutableRefObject<ECharts | undefined>;\n  onChartInitialized?: (instance: ECharts) => void;\n}\n\nexport const EChart = React.memo(function EChart<T>({\n  option,\n  theme,\n  renderer,\n  sx,\n  onEvents,\n  _instance,\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 (_instance !== undefined) {\n      _instance.current = chartElement.current;\n    }\n    return () => {\n      if (chartElement.current === null) return;\n      chartElement.current.dispose();\n      chartElement.current = null;\n    };\n  }, [_instance, onChartInitialized, theme, renderer]);\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  // Resize chart, cleanup listener on unmount\n  useLayoutEffect(() => {\n    const updateSize = debounce(() => {\n      if (!chartElement.current) return;\n      chartElement.current.resize();\n    }, 200);\n    window.addEventListener('resize', updateSize);\n    updateSize();\n    return () => {\n      window.removeEventListener('resize', updateSize);\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 () => {\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  useEffect(() => {\n    const updateSize = debounce(() => {\n      if (!chartElement.current) return;\n      chartElement.current.resize();\n    }, 200);\n    updateSize();\n  }, [sx]);\n\n  return <Box ref={containerRef} sx={sx}></Box>;\n});\n\n// Validate event config and bind custom events\nfunction bindEvents<T>(instance: ECharts, events?: OnEventsType<T>) {\n  if (events === undefined) return;\n\n  function bindEvent(eventName: EventName, OnEventFunction: unknown) {\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":["React","useEffect","useLayoutEffect","useRef","init","Box","isEqual","debounce","mouseEvents","batchEvents","EChart","memo","option","theme","renderer","sx","onEvents","_instance","onChartInitialized","initialOption","prevOption","containerRef","chartElement","current","undefined","setOption","dispose","updateSize","resize","window","addEventListener","removeEventListener","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 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport React, { useEffect, useLayoutEffect, useRef } from 'react';\nimport { ECharts, EChartsCoreOption, init } from 'echarts/core';\nimport { Box, SxProps, Theme } from '@mui/material';\nimport { isEqual, debounce } from 'lodash-es';\nimport { EChartsTheme } from '../model';\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  onEvents?: OnEventsType<T>;\n  _instance?: React.MutableRefObject<ECharts | undefined>;\n  onChartInitialized?: (instance: ECharts) => void;\n}\n\nexport const EChart = React.memo(function EChart<T>({\n  option,\n  theme,\n  renderer,\n  sx,\n  onEvents,\n  _instance,\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 (_instance !== undefined) {\n      _instance.current = chartElement.current;\n    }\n    return () => {\n      if (chartElement.current === null) return;\n      chartElement.current.dispose();\n      chartElement.current = null;\n    };\n  }, [_instance, onChartInitialized, theme, renderer]);\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  // Resize chart, cleanup listener on unmount\n  useLayoutEffect(() => {\n    const updateSize = debounce(() => {\n      if (!chartElement.current) return;\n      chartElement.current.resize();\n    }, 200);\n    window.addEventListener('resize', updateSize);\n    updateSize();\n    return () => {\n      window.removeEventListener('resize', updateSize);\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 () => {\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  // TODO: re-evaluate how this is triggered. It's technically working right\n  // now because the sx prop is an object that gets re-created, but that also\n  // means it runs unnecessarily some of the time and theoretically might\n  // not run in some other cases. Maybe it should use a resize observer?\n  useEffect(() => {\n    // TODO: fix this debouncing. This likely isn't working as intended because\n    // the debounced function is re-created every time this useEffect is called.\n    const updateSize = debounce(\n      () => {\n        if (!chartElement.current) return;\n        chartElement.current.resize();\n      },\n      200,\n      {\n        leading: true,\n      }\n    );\n    updateSize();\n  }, [sx]);\n\n  return <Box ref={containerRef} sx={sx}></Box>;\n});\n\n// Validate event config and bind custom events\nfunction bindEvents<T>(instance: ECharts, events?: OnEventsType<T>) {\n  if (events === undefined) return;\n\n  function bindEvent(eventName: EventName, OnEventFunction: unknown) {\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":["React","useEffect","useLayoutEffect","useRef","init","Box","isEqual","debounce","mouseEvents","batchEvents","EChart","memo","option","theme","renderer","sx","onEvents","_instance","onChartInitialized","initialOption","prevOption","containerRef","chartElement","current","undefined","setOption","dispose","updateSize","resize","window","addEventListener","removeEventListener","chart","bindEvents","isDisposed","event","off","leading","ref","instance","events","bindEvent","eventName","OnEventFunction","isMouseEvent","on","params","isBatchEvent","Object","prototype","hasOwnProperty","call","customEvent","includes"],"mappings":"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"}

package/dist/Legend/Legend.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Legend.d.ts","sourceRoot":"","sources":["../../src/Legend/Legend.tsx"],"names":[],"mappings":";AAeA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,uBAAuB,EAAE,MAAM,UAAU,CAAC;AAI9E,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,UAAU,EAAE,CAAC;IACnB,OAAO,EAAE,aAAa,CAAC;IAEvB;;;;;OAKG;IACH,aAAa,EAAE,uBAAuB,CAAC;IAEvC;;OAEG;IACH,qBAAqB,EAAE,CAAC,WAAW,EAAE,uBAAuB,KAAK,IAAI,CAAC;CACvE;AASD,wBAAgB,MAAM,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,aAAa,EAAE,qBAAqB,EAAE,EAAE,WAAW,eAiFzG"}
+{"version":3,"file":"Legend.d.ts","sourceRoot":"","sources":["../../src/Legend/Legend.tsx"],"names":[],"mappings":";AAgBA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,uBAAuB,EAAiB,MAAM,UAAU,CAAC;AAK7F,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,UAAU,EAAE,CAAC;IACnB,OAAO,EAAE,aAAa,CAAC;IAEvB;;;;;OAKG;IACH,aAAa,EAAE,uBAAuB,CAAC;IAEvC;;OAEG;IACH,qBAAqB,EAAE,CAAC,WAAW,EAAE,uBAAuB,KAAK,IAAI,CAAC;CACvE;AASD,wBAAgB,MAAM,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,aAAa,EAAE,qBAAqB,EAAE,EAAE,WAAW,eA0FzG"}

package/dist/Legend/Legend.js

@@ -13,8 +13,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Box } from '@mui/material';
 import { produce } from 'immer';
+import { getLegendMode } from '../model';
 import { ListLegend } from './ListLegend';
 import { CompactLegend } from './CompactLegend';
+import { TableLegend } from './TableLegend';
 // When the number of items to display is above this number, it is likely to
 // cause performance issues in the browser. The legend will be displayed in a
 // format (list) that allows for virtualization to minimize the performance impact.
@@ -54,12 +56,37 @@ export function Legend({ width , height , options , data , selectedItems , onSel
         });
         onSelectedItemsChange(newSelected);
     };
+    const mode = getLegendMode(options.mode);
+    // The bottom legend is displayed as a list when the number of items is too
+    // large and requires virtualization. Otherwise, it is rendered more compactly.
+    // We do not need this check for the right-side legend because it is always
+    // a virtualized list.
+    const needsVirtualization = data.length >= NEED_VIRTUALIZATION_LIMIT;
     const commonLegendProps = {
         height,
         items: data,
         selectedItems,
         onLegendItemClick
     };
+    let legendContent;
+    if (mode === 'Table') {
+        legendContent = /*#__PURE__*/ _jsx(TableLegend, {
+            ...commonLegendProps,
+            onSelectedItemsChange: onSelectedItemsChange,
+            width: width
+        });
+    } else if (options.position === 'Right' || needsVirtualization) {
+        legendContent = /*#__PURE__*/ _jsx(ListLegend, {
+            ...commonLegendProps,
+            width: width,
+            onLegendItemClick: onLegendItemClick
+        });
+    } else {
+        legendContent = /*#__PURE__*/ _jsx(CompactLegend, {
+            ...commonLegendProps,
+            onLegendItemClick: onLegendItemClick
+        });
+    }
     if (options.position === 'Right') {
         return /*#__PURE__*/ _jsx(Box, {
             sx: {
@@ -69,17 +96,10 @@ export function Legend({ width , height , options , data , selectedItems , onSel
                 top: 0,
                 right: 0
             },
-            children: /*#__PURE__*/ _jsx(ListLegend, {
-                ...commonLegendProps,
-                width: width
-            })
+            children: legendContent
         });
     }
-    // The bottom legend is displayed as a list when the number of items is too
-    // large and requires virtualization. Otherwise, it is rendered more compactly.
-    // We do not need this check for the right-side legend because it is always
-    // a virtualized list.
-    const needsVirtualization = data.length >= NEED_VIRTUALIZATION_LIMIT;
+    // Position bottom
     return /*#__PURE__*/ _jsx(Box, {
         sx: {
             width: width,
@@ -87,12 +107,7 @@ export function Legend({ width , height , options , data , selectedItems , onSel
             position: 'absolute',
             bottom: 0
         },
-        children: needsVirtualization ? /*#__PURE__*/ _jsx(ListLegend, {
-            ...commonLegendProps,
-            width: width
-        }) : /*#__PURE__*/ _jsx(CompactLegend, {
-            ...commonLegendProps
-        })
+        children: legendContent
     });
 }
 

package/dist/Legend/Legend.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Legend/Legend.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Box } from '@mui/material';\nimport { produce } from 'immer';\nimport { LegendOptions, LegendItem, SelectedLegendItemState } from '../model';\nimport { ListLegend, ListLegendProps } from './ListLegend';\nimport { CompactLegend, CompactLegendProps } from './CompactLegend';\n\nexport interface LegendProps {\n  width: number;\n  height: number;\n  data: LegendItem[];\n  options: LegendOptions;\n\n  /**\n   * State of selected items in the legend.\n   *\n   * Selected legend item state is a controlled value that should be managed using a\n   * combination of this prop and `onSelectedChange`.\n   */\n  selectedItems: SelectedLegendItemState;\n\n  /**\n   * Callback fired when the selected items in the legend changes.\n   */\n  onSelectedItemsChange: (newSelected: SelectedLegendItemState) => void;\n}\n\n// When the number of items to display is above this number, it is likely to\n// cause performance issues in the browser. The legend will be displayed in a\n// format (list) that allows for virtualization to minimize the performance impact.\n// Set this number based on testing, but it may need to be tuned a bit on the\n// future as people test this out on different machines.\nconst NEED_VIRTUALIZATION_LIMIT = 500;\n\nexport function Legend({ width, height, options, data, selectedItems, onSelectedItemsChange }: LegendProps) {\n  const onLegendItemClick = (e: React.MouseEvent<HTMLElement, MouseEvent>, seriesId: string) => {\n    const isModifiedClick = e.metaKey || e.shiftKey;\n\n    const newSelected = produce(selectedItems, (draft) => {\n      if (draft === 'ALL') {\n        return {\n          [seriesId]: true,\n        };\n      }\n\n      const isSelected = !!draft[seriesId];\n\n      // Clicks with modifier key can select multiple items.\n      if (isModifiedClick) {\n        if (isSelected) {\n          // Modified click on already selected item. Remove that item.\n          delete draft[seriesId];\n        } else {\n          // Modified click on not-selected item. Add it.\n          draft[seriesId] = true;\n        }\n        return draft;\n      }\n\n      if (isSelected) {\n        // Clicked item was already selected. Unselect it and return to\n        // ALL state.\n        return 'ALL' as const;\n      }\n\n      // Select clicked item.\n      return { [seriesId]: true };\n    });\n    onSelectedItemsChange(newSelected);\n  };\n\n  const commonLegendProps: ListLegendProps | CompactLegendProps = {\n    height,\n    items: data,\n    selectedItems,\n    onLegendItemClick,\n  };\n\n  if (options.position === 'Right') {\n    return (\n      <Box\n        sx={{\n          width: width,\n          height: height,\n          position: 'absolute',\n          top: 0,\n          right: 0,\n        }}\n      >\n        <ListLegend {...commonLegendProps} width={width} />\n      </Box>\n    );\n  }\n\n  // The bottom legend is displayed as a list when the number of items is too\n  // large and requires virtualization. Otherwise, it is rendered more compactly.\n  // We do not need this check for the right-side legend because it is always\n  // a virtualized list.\n  const needsVirtualization = data.length >= NEED_VIRTUALIZATION_LIMIT;\n  return (\n    <Box\n      sx={{\n        width: width,\n        height: height,\n        position: 'absolute',\n        bottom: 0,\n      }}\n    >\n      {needsVirtualization ? (\n        <ListLegend {...commonLegendProps} width={width} />\n      ) : (\n        <CompactLegend {...commonLegendProps} />\n      )}\n    </Box>\n  );\n}\n"],"names":["Box","produce","ListLegend","CompactLegend","NEED_VIRTUALIZATION_LIMIT","Legend","width","height","options","data","selectedItems","onSelectedItemsChange","onLegendItemClick","e","seriesId","isModifiedClick","metaKey","shiftKey","newSelected","draft","isSelected","commonLegendProps","items","position","sx","top","right","needsVirtualization","length","bottom"],"mappings":"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"}
+{"version":3,"sources":["../../src/Legend/Legend.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Box } from '@mui/material';\nimport { produce } from 'immer';\nimport { ReactNode } from 'react';\nimport { LegendOptions, LegendItem, SelectedLegendItemState, getLegendMode } from '../model';\nimport { ListLegend } from './ListLegend';\nimport { CompactLegend } from './CompactLegend';\nimport { TableLegend } from './TableLegend';\n\nexport interface LegendProps {\n  width: number;\n  height: number;\n  data: LegendItem[];\n  options: LegendOptions;\n\n  /**\n   * State of selected items in the legend.\n   *\n   * Selected legend item state is a controlled value that should be managed using a\n   * combination of this prop and `onSelectedChange`.\n   */\n  selectedItems: SelectedLegendItemState;\n\n  /**\n   * Callback fired when the selected items in the legend changes.\n   */\n  onSelectedItemsChange: (newSelected: SelectedLegendItemState) => void;\n}\n\n// When the number of items to display is above this number, it is likely to\n// cause performance issues in the browser. The legend will be displayed in a\n// format (list) that allows for virtualization to minimize the performance impact.\n// Set this number based on testing, but it may need to be tuned a bit on the\n// future as people test this out on different machines.\nconst NEED_VIRTUALIZATION_LIMIT = 500;\n\nexport function Legend({ width, height, options, data, selectedItems, onSelectedItemsChange }: LegendProps) {\n  const onLegendItemClick = (e: React.MouseEvent<HTMLElement, MouseEvent>, seriesId: string) => {\n    const isModifiedClick = e.metaKey || e.shiftKey;\n\n    const newSelected = produce(selectedItems, (draft) => {\n      if (draft === 'ALL') {\n        return {\n          [seriesId]: true,\n        };\n      }\n\n      const isSelected = !!draft[seriesId];\n\n      // Clicks with modifier key can select multiple items.\n      if (isModifiedClick) {\n        if (isSelected) {\n          // Modified click on already selected item. Remove that item.\n          delete draft[seriesId];\n        } else {\n          // Modified click on not-selected item. Add it.\n          draft[seriesId] = true;\n        }\n        return draft;\n      }\n\n      if (isSelected) {\n        // Clicked item was already selected. Unselect it and return to\n        // ALL state.\n        return 'ALL' as const;\n      }\n\n      // Select clicked item.\n      return { [seriesId]: true };\n    });\n    onSelectedItemsChange(newSelected);\n  };\n\n  const mode = getLegendMode(options.mode);\n\n  // The bottom legend is displayed as a list when the number of items is too\n  // large and requires virtualization. Otherwise, it is rendered more compactly.\n  // We do not need this check for the right-side legend because it is always\n  // a virtualized list.\n  const needsVirtualization = data.length >= NEED_VIRTUALIZATION_LIMIT;\n\n  const commonLegendProps = {\n    height,\n    items: data,\n    selectedItems,\n    onLegendItemClick,\n  };\n\n  let legendContent: ReactNode;\n  if (mode === 'Table') {\n    legendContent = <TableLegend {...commonLegendProps} onSelectedItemsChange={onSelectedItemsChange} width={width} />;\n  } else if (options.position === 'Right' || needsVirtualization) {\n    legendContent = <ListLegend {...commonLegendProps} width={width} onLegendItemClick={onLegendItemClick} />;\n  } else {\n    legendContent = <CompactLegend {...commonLegendProps} onLegendItemClick={onLegendItemClick} />;\n  }\n\n  if (options.position === 'Right') {\n    return (\n      <Box\n        sx={{\n          width: width,\n          height: height,\n          position: 'absolute',\n          top: 0,\n          right: 0,\n        }}\n      >\n        {legendContent}\n      </Box>\n    );\n  }\n\n  // Position bottom\n  return (\n    <Box\n      sx={{\n        width: width,\n        height: height,\n        position: 'absolute',\n        bottom: 0,\n      }}\n    >\n      {legendContent}\n    </Box>\n  );\n}\n"],"names":["Box","produce","getLegendMode","ListLegend","CompactLegend","TableLegend","NEED_VIRTUALIZATION_LIMIT","Legend","width","height","options","data","selectedItems","onSelectedItemsChange","onLegendItemClick","e","seriesId","isModifiedClick","metaKey","shiftKey","newSelected","draft","isSelected","mode","needsVirtualization","length","commonLegendProps","items","legendContent","position","sx","top","right","bottom"],"mappings":"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"}

package/dist/Legend/ListLegend.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ListLegend.d.ts","sourceRoot":"","sources":["../../src/Legend/ListLegend.tsx"],"names":[],"mappings":";AAeA,OAAO,EAAE,UAAU,EAAE,uBAAuB,EAAgC,MAAM,UAAU,CAAC;AAC7F,OAAO,EAAkB,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAEvE,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,UAAU,EAAE,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,uBAAuB,CAAC;IACvC,iBAAiB,EAAE,mBAAmB,CAAC,SAAS,CAAC,CAAC;CACnD;AAED;;;;;GAKG;AACH,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,aAAa,EAAE,iBAAiB,EAAE,EAAE,eAAe,eA6CrG"}
+{"version":3,"file":"ListLegend.d.ts","sourceRoot":"","sources":["../../src/Legend/ListLegend.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAE,UAAU,EAAE,uBAAuB,EAAgC,MAAM,UAAU,CAAC;AAC7F,OAAO,EAAkB,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAEvE,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,UAAU,EAAE,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,uBAAuB,CAAC;IACvC,iBAAiB,EAAE,mBAAmB,CAAC,SAAS,CAAC,CAAC;CACnD;AAED;;;;;GAKG;AACH,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,aAAa,EAAE,iBAAiB,EAAE,EAAE,eAAe,eA6BrG"}

package/dist/Legend/ListLegend.js

@@ -11,7 +11,6 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useTheme, Box } from '@mui/material';
 import { Virtuoso } from 'react-virtuoso';
 import { isLegendItemVisuallySelected } from '../model';
 import { ListLegendItem } from './ListLegendItem';
@@ -21,18 +20,6 @@ import { ListLegendItem } from './ListLegendItem';
  * large number of items because it is virtualized and easier to visually scan
  * large numbers of items when there is a single item per row.
  */ export function ListLegend({ items , height , width , selectedItems , onLegendItemClick  }) {
-    const theme = useTheme();
-    // Padding value used in the react virtuoso header/footer components to
-    // simulate top/bottom padding based on recommendation in this
-    // issue.
-    // https://github.com/petyosi/react-virtuoso/issues/238
-    const LIST_PADDING = parseInt(theme.spacing(1), 10);
-    const mockPadding = /*#__PURE__*/ _jsx(Box, {
-        sx: {
-            width: '100%',
-            height: `${LIST_PADDING}px`
-        }
-    });
     // show full labels on hover when there are many total series
     const truncateLabels = items.length > 5;
     return /*#__PURE__*/ _jsx(Virtuoso, {
@@ -50,21 +37,13 @@ import { ListLegendItem } from './ListLegendItem';
                 sx: {
                     // Having an explicit width is important for the ellipsizing to
                     // work correctly. Subtract padding to simulate padding.
-                    width: width - LIST_PADDING,
+                    width: width,
                     wordBreak: 'break-word',
                     overflow: 'hidden'
                 }
             }, item.id);
         },
-        role: "list",
-        components: {
-            Header: ()=>{
-                return mockPadding;
-            },
-            Footer: ()=>{
-                return mockPadding;
-            }
-        }
+        role: "list"
     });
 }
 

package/dist/Legend/ListLegend.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Legend/ListLegend.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { useTheme, Box } from '@mui/material';\nimport { Virtuoso } from 'react-virtuoso';\nimport { LegendItem, SelectedLegendItemState, isLegendItemVisuallySelected } from '../model';\nimport { ListLegendItem, ListLegendItemProps } from './ListLegendItem';\n\nexport interface ListLegendProps {\n  items: LegendItem[];\n  height: number;\n  width: number;\n  selectedItems: SelectedLegendItemState;\n  onLegendItemClick: ListLegendItemProps['onClick'];\n}\n\n/**\n * ListLegend is used when legend.position is 'right' since legend items are\n * stacked. It is also used for `bottom` positioned legends when there are a\n * large number of items because it is virtualized and easier to visually scan\n * large numbers of items when there is a single item per row.\n */\nexport function ListLegend({ items, height, width, selectedItems, onLegendItemClick }: ListLegendProps) {\n  const theme = useTheme();\n  // Padding value used in the react virtuoso header/footer components to\n  // simulate top/bottom padding based on recommendation in this\n  // issue.\n  // https://github.com/petyosi/react-virtuoso/issues/238\n  const LIST_PADDING = parseInt(theme.spacing(1), 10);\n  const mockPadding = <Box sx={{ width: '100%', height: `${LIST_PADDING}px` }}></Box>;\n\n  // show full labels on hover when there are many total series\n  const truncateLabels = items.length > 5;\n\n  return (\n    <Virtuoso\n      style={{ height, width }}\n      data={items}\n      itemContent={(index, item) => {\n        return (\n          <ListLegendItem\n            key={item.id}\n            item={item}\n            truncateLabel={truncateLabels}\n            isVisuallySelected={isLegendItemVisuallySelected(item, selectedItems)}\n            onClick={onLegendItemClick}\n            sx={{\n              // Having an explicit width is important for the ellipsizing to\n              // work correctly. Subtract padding to simulate padding.\n              width: width - LIST_PADDING,\n              wordBreak: 'break-word',\n              overflow: 'hidden',\n            }}\n          />\n        );\n      }}\n      role=\"list\"\n      components={{\n        Header: () => {\n          return mockPadding;\n        },\n        Footer: () => {\n          return mockPadding;\n        },\n      }}\n    />\n  );\n}\n"],"names":["useTheme","Box","Virtuoso","isLegendItemVisuallySelected","ListLegendItem","ListLegend","items","height","width","selectedItems","onLegendItemClick","theme","LIST_PADDING","parseInt","spacing","mockPadding","sx","truncateLabels","length","style","data","itemContent","index","item","truncateLabel","isVisuallySelected","onClick","wordBreak","overflow","id","role","components","Header","Footer"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAASA,QAAQ,EAAEC,GAAG,QAAQ,eAAe,CAAC;AAC9C,SAASC,QAAQ,QAAQ,gBAAgB,CAAC;AAC1C,SAA8CC,4BAA4B,QAAQ,UAAU,CAAC;AAC7F,SAASC,cAAc,QAA6B,kBAAkB,CAAC;AAUvE;;;;;CAKC,GACD,OAAO,SAASC,UAAU,CAAC,EAAEC,KAAK,CAAA,EAAEC,MAAM,CAAA,EAAEC,KAAK,CAAA,EAAEC,aAAa,CAAA,EAAEC,iBAAiB,CAAA,EAAmB,EAAE;IACtG,MAAMC,KAAK,GAAGX,QAAQ,EAAE,AAAC;IACzB,uEAAuE;IACvE,8DAA8D;IAC9D,SAAS;IACT,uDAAuD;IACvD,MAAMY,YAAY,GAAGC,QAAQ,CAACF,KAAK,CAACG,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,AAAC;IACpD,MAAMC,WAAW,iBAAG,KAACd,GAAG;QAACe,EAAE,EAAE;YAAER,KAAK,EAAE,MAAM;YAAED,MAAM,EAAE,CAAC,EAAEK,YAAY,CAAC,EAAE,CAAC;SAAE;MAAQ,AAAC;IAEpF,6DAA6D;IAC7D,MAAMK,cAAc,GAAGX,KAAK,CAACY,MAAM,GAAG,CAAC,AAAC;IAExC,qBACE,KAAChB,QAAQ;QACPiB,KAAK,EAAE;YAAEZ,MAAM;YAAEC,KAAK;SAAE;QACxBY,IAAI,EAAEd,KAAK;QACXe,WAAW,EAAE,CAACC,KAAK,EAAEC,IAAI,GAAK;YAC5B,qBACE,KAACnB,cAAc;gBAEbmB,IAAI,EAAEA,IAAI;gBACVC,aAAa,EAAEP,cAAc;gBAC7BQ,kBAAkB,EAAEtB,4BAA4B,CAACoB,IAAI,EAAEd,aAAa,CAAC;gBACrEiB,OAAO,EAAEhB,iBAAiB;gBAC1BM,EAAE,EAAE;oBACF,+DAA+D;oBAC/D,wDAAwD;oBACxDR,KAAK,EAAEA,KAAK,GAAGI,YAAY;oBAC3Be,SAAS,EAAE,YAAY;oBACvBC,QAAQ,EAAE,QAAQ;iBACnB;eAXIL,IAAI,CAACM,EAAE,CAYZ,CACF;QACJ,CAAC;QACDC,IAAI,EAAC,MAAM;QACXC,UAAU,EAAE;YACVC,MAAM,EAAE,IAAM;gBACZ,OAAOjB,WAAW,CAAC;YACrB,CAAC;YACDkB,MAAM,EAAE,IAAM;gBACZ,OAAOlB,WAAW,CAAC;YACrB,CAAC;SACF;MACD,CACF;AACJ,CAAC"}
+{"version":3,"sources":["../../src/Legend/ListLegend.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Virtuoso } from 'react-virtuoso';\nimport { LegendItem, SelectedLegendItemState, isLegendItemVisuallySelected } from '../model';\nimport { ListLegendItem, ListLegendItemProps } from './ListLegendItem';\n\nexport interface ListLegendProps {\n  items: LegendItem[];\n  height: number;\n  width: number;\n  selectedItems: SelectedLegendItemState;\n  onLegendItemClick: ListLegendItemProps['onClick'];\n}\n\n/**\n * ListLegend is used when legend.position is 'right' since legend items are\n * stacked. It is also used for `bottom` positioned legends when there are a\n * large number of items because it is virtualized and easier to visually scan\n * large numbers of items when there is a single item per row.\n */\nexport function ListLegend({ items, height, width, selectedItems, onLegendItemClick }: ListLegendProps) {\n  // show full labels on hover when there are many total series\n  const truncateLabels = items.length > 5;\n\n  return (\n    <Virtuoso\n      style={{ height, width }}\n      data={items}\n      itemContent={(index, item) => {\n        return (\n          <ListLegendItem\n            key={item.id}\n            item={item}\n            truncateLabel={truncateLabels}\n            isVisuallySelected={isLegendItemVisuallySelected(item, selectedItems)}\n            onClick={onLegendItemClick}\n            sx={{\n              // Having an explicit width is important for the ellipsizing to\n              // work correctly. Subtract padding to simulate padding.\n              width: width,\n              wordBreak: 'break-word',\n              overflow: 'hidden',\n            }}\n          />\n        );\n      }}\n      role=\"list\"\n    />\n  );\n}\n"],"names":["Virtuoso","isLegendItemVisuallySelected","ListLegendItem","ListLegend","items","height","width","selectedItems","onLegendItemClick","truncateLabels","length","style","data","itemContent","index","item","truncateLabel","isVisuallySelected","onClick","sx","wordBreak","overflow","id","role"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAASA,QAAQ,QAAQ,gBAAgB,CAAC;AAC1C,SAA8CC,4BAA4B,QAAQ,UAAU,CAAC;AAC7F,SAASC,cAAc,QAA6B,kBAAkB,CAAC;AAUvE;;;;;CAKC,GACD,OAAO,SAASC,UAAU,CAAC,EAAEC,KAAK,CAAA,EAAEC,MAAM,CAAA,EAAEC,KAAK,CAAA,EAAEC,aAAa,CAAA,EAAEC,iBAAiB,CAAA,EAAmB,EAAE;IACtG,6DAA6D;IAC7D,MAAMC,cAAc,GAAGL,KAAK,CAACM,MAAM,GAAG,CAAC,AAAC;IAExC,qBACE,KAACV,QAAQ;QACPW,KAAK,EAAE;YAAEN,MAAM;YAAEC,KAAK;SAAE;QACxBM,IAAI,EAAER,KAAK;QACXS,WAAW,EAAE,CAACC,KAAK,EAAEC,IAAI,GAAK;YAC5B,qBACE,KAACb,cAAc;gBAEba,IAAI,EAAEA,IAAI;gBACVC,aAAa,EAAEP,cAAc;gBAC7BQ,kBAAkB,EAAEhB,4BAA4B,CAACc,IAAI,EAAER,aAAa,CAAC;gBACrEW,OAAO,EAAEV,iBAAiB;gBAC1BW,EAAE,EAAE;oBACF,+DAA+D;oBAC/D,wDAAwD;oBACxDb,KAAK,EAAEA,KAAK;oBACZc,SAAS,EAAE,YAAY;oBACvBC,QAAQ,EAAE,QAAQ;iBACnB;eAXIN,IAAI,CAACO,EAAE,CAYZ,CACF;QACJ,CAAC;QACDC,IAAI,EAAC,MAAM;MACX,CACF;AACJ,CAAC"}