@perses-dev/components 0.29.1 → 0.31.0

package/dist/DateTimeRangePicker/TimeRangeSelector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TimeRangeSelector.d.ts","sourceRoot":"","sources":["../../src/DateTimeRangePicker/TimeRangeSelector.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAoB,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAEpE,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAuB,MAAM,kBAAkB,CAAC;AAM1F,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,iBAAiB,CAAC;IACzB,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,UAAU,sBAAsB;IAC9B,KAAK,EAAE,cAAc,CAAC;IACtB,WAAW,EAAE,UAAU,EAAE,CAAC;IAC1B,cAAc,EAAE,CAAC,KAAK,EAAE,iBAAiB,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC;IAC3D,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,eA+C9D"}
+{"version":3,"file":"TimeRangeSelector.d.ts","sourceRoot":"","sources":["../../src/DateTimeRangePicker/TimeRangeSelector.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAoB,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAEpE,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAuB,MAAM,kBAAkB,CAAC;AAM1F,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,iBAAiB,CAAC;IACzB,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,UAAU,sBAAsB;IAC9B,KAAK,EAAE,cAAc,CAAC;IACtB,WAAW,EAAE,UAAU,EAAE,CAAC;IAC1B,cAAc,EAAE,CAAC,KAAK,EAAE,iBAAiB,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC;IAC3D,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,eAqD9D"}

package/dist/DateTimeRangePicker/TimeRangeSelector.js

@@ -29,8 +29,14 @@ export function TimeRangeSelector(props) {
             'aria-label': `Select time range. Currently set to ${formattedValue}`
         },
         sx: {
+            // `transform: none` prevents calendar icon from flipping over when menu is open
             '.MuiSelect-icon': {
-                marginTop: '1px'
+                marginTop: '1px',
+                transform: 'none'
+            },
+            // paddingRight creates more space for the calendar icon (it's a bigger icon)
+            '.MuiSelect-select.MuiSelect-outlined.MuiInputBase-input': {
+                paddingRight: '36px'
             },
             '.MuiSelect-select': height ? {
                 lineHeight: height,

package/dist/DateTimeRangePicker/TimeRangeSelector.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/DateTimeRangePicker/TimeRangeSelector.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 { MenuItem, Select, SelectChangeEvent } from '@mui/material';\nimport Calendar from 'mdi-material-ui/Calendar';\nimport { TimeRangeValue, RelativeTimeRange, isRelativeTimeRange } from '@perses-dev/core';\nimport { useTimeZone } from '../context/TimeZoneProvider';\nimport { formatAbsoluteRange } from './utils';\n\nconst DATE_TIME_FORMAT = 'yyyy-MM-dd HH:mm:ss';\n\nexport interface TimeOption {\n  value: RelativeTimeRange;\n  display: string;\n}\n\ninterface TimeRangeSelectorProps {\n  value: TimeRangeValue;\n  timeOptions: TimeOption[];\n  onSelectChange: (event: SelectChangeEvent<string>) => void;\n  onCustomClick: () => void;\n  height?: string;\n}\n\nexport function TimeRangeSelector(props: TimeRangeSelectorProps) {\n  const { value, timeOptions, onSelectChange, onCustomClick, height } = props;\n  const { timeZone } = useTimeZone();\n  const formattedValue = !isRelativeTimeRange(value)\n    ? formatAbsoluteRange(value, DATE_TIME_FORMAT, timeZone)\n    : value.pastDuration;\n  return (\n    <Select\n      value={formattedValue}\n      onChange={onSelectChange}\n      IconComponent={Calendar}\n      inputProps={{\n        'aria-label': `Select time range. Currently set to ${formattedValue}`,\n      }}\n      sx={{\n        '.MuiSelect-icon': {\n          marginTop: '1px',\n        },\n        '.MuiSelect-select': height ? { lineHeight: height, paddingY: 0 } : {},\n      }}\n    >\n      {timeOptions.map((item, idx) => (\n        <MenuItem key={idx} value={item.value.pastDuration}>\n          {item.display}\n        </MenuItem>\n      ))}\n\n      {isRelativeTimeRange(value) ? (\n        <MenuItem\n          onClick={() => {\n            onCustomClick();\n          }}\n        >\n          Custom time range\n        </MenuItem>\n      ) : (\n        <MenuItem\n          value={formattedValue}\n          onClick={() => {\n            onCustomClick();\n          }}\n        >\n          {formattedValue}\n        </MenuItem>\n      )}\n    </Select>\n  );\n}\n"],"names":["MenuItem","Select","Calendar","isRelativeTimeRange","useTimeZone","formatAbsoluteRange","DATE_TIME_FORMAT","TimeRangeSelector","props","value","timeOptions","onSelectChange","onCustomClick","height","timeZone","formattedValue","pastDuration","onChange","IconComponent","inputProps","sx","marginTop","lineHeight","paddingY","map","item","idx","display","onClick"],"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,MAAM,QAA2B,eAAe,CAAC;AACpE,OAAOC,QAAQ,MAAM,0BAA0B,CAAC;AAChD,SAA4CC,mBAAmB,QAAQ,kBAAkB,CAAC;AAC1F,SAASC,WAAW,QAAQ,6BAA6B,CAAC;AAC1D,SAASC,mBAAmB,QAAQ,SAAS,CAAC;AAE9C,MAAMC,gBAAgB,GAAG,qBAAqB,AAAC;AAe/C,OAAO,SAASC,iBAAiB,CAACC,KAA6B,EAAE;IAC/D,MAAM,EAAEC,KAAK,CAAA,EAAEC,WAAW,CAAA,EAAEC,cAAc,CAAA,EAAEC,aAAa,CAAA,EAAEC,MAAM,CAAA,EAAE,GAAGL,KAAK,AAAC;IAC5E,MAAM,EAAEM,QAAQ,CAAA,EAAE,GAAGV,WAAW,EAAE,AAAC;IACnC,MAAMW,cAAc,GAAG,CAACZ,mBAAmB,CAACM,KAAK,CAAC,GAC9CJ,mBAAmB,CAACI,KAAK,EAAEH,gBAAgB,EAAEQ,QAAQ,CAAC,GACtDL,KAAK,CAACO,YAAY,AAAC;IACvB,qBACE,MAACf,MAAM;QACLQ,KAAK,EAAEM,cAAc;QACrBE,QAAQ,EAAEN,cAAc;QACxBO,aAAa,EAAEhB,QAAQ;QACvBiB,UAAU,EAAE;YACV,YAAY,EAAE,CAAC,oCAAoC,EAAEJ,cAAc,CAAC,CAAC;SACtE;QACDK,EAAE,EAAE;YACF,iBAAiB,EAAE;gBACjBC,SAAS,EAAE,KAAK;aACjB;YACD,mBAAmB,EAAER,MAAM,GAAG;gBAAES,UAAU,EAAET,MAAM;gBAAEU,QAAQ,EAAE,CAAC;aAAE,GAAG,EAAE;SACvE;;YAEAb,WAAW,CAACc,GAAG,CAAC,CAACC,IAAI,EAAEC,GAAG,iBACzB,KAAC1B,QAAQ;oBAAWS,KAAK,EAAEgB,IAAI,CAAChB,KAAK,CAACO,YAAY;8BAC/CS,IAAI,CAACE,OAAO;mBADAD,GAAG,CAEP,AACZ,CAAC;YAEDvB,mBAAmB,CAACM,KAAK,CAAC,iBACzB,KAACT,QAAQ;gBACP4B,OAAO,EAAE,IAAM;oBACbhB,aAAa,EAAE,CAAC;gBAClB,CAAC;0BACF,mBAED;cAAW,iBAEX,KAACZ,QAAQ;gBACPS,KAAK,EAAEM,cAAc;gBACrBa,OAAO,EAAE,IAAM;oBACbhB,aAAa,EAAE,CAAC;gBAClB,CAAC;0BAEAG,cAAc;cACN,AACZ;;MACM,CACT;AACJ,CAAC"}
+{"version":3,"sources":["../../src/DateTimeRangePicker/TimeRangeSelector.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 { MenuItem, Select, SelectChangeEvent } from '@mui/material';\nimport Calendar from 'mdi-material-ui/Calendar';\nimport { TimeRangeValue, RelativeTimeRange, isRelativeTimeRange } from '@perses-dev/core';\nimport { useTimeZone } from '../context/TimeZoneProvider';\nimport { formatAbsoluteRange } from './utils';\n\nconst DATE_TIME_FORMAT = 'yyyy-MM-dd HH:mm:ss';\n\nexport interface TimeOption {\n  value: RelativeTimeRange;\n  display: string;\n}\n\ninterface TimeRangeSelectorProps {\n  value: TimeRangeValue;\n  timeOptions: TimeOption[];\n  onSelectChange: (event: SelectChangeEvent<string>) => void;\n  onCustomClick: () => void;\n  height?: string;\n}\n\nexport function TimeRangeSelector(props: TimeRangeSelectorProps) {\n  const { value, timeOptions, onSelectChange, onCustomClick, height } = props;\n  const { timeZone } = useTimeZone();\n  const formattedValue = !isRelativeTimeRange(value)\n    ? formatAbsoluteRange(value, DATE_TIME_FORMAT, timeZone)\n    : value.pastDuration;\n  return (\n    <Select\n      value={formattedValue}\n      onChange={onSelectChange}\n      IconComponent={Calendar}\n      inputProps={{\n        'aria-label': `Select time range. Currently set to ${formattedValue}`,\n      }}\n      sx={{\n        // `transform: none` prevents calendar icon from flipping over when menu is open\n        '.MuiSelect-icon': {\n          marginTop: '1px',\n          transform: 'none',\n        },\n        // paddingRight creates more space for the calendar icon (it's a bigger icon)\n        '.MuiSelect-select.MuiSelect-outlined.MuiInputBase-input': {\n          paddingRight: '36px',\n        },\n        '.MuiSelect-select': height ? { lineHeight: height, paddingY: 0 } : {},\n      }}\n    >\n      {timeOptions.map((item, idx) => (\n        <MenuItem key={idx} value={item.value.pastDuration}>\n          {item.display}\n        </MenuItem>\n      ))}\n\n      {isRelativeTimeRange(value) ? (\n        <MenuItem\n          onClick={() => {\n            onCustomClick();\n          }}\n        >\n          Custom time range\n        </MenuItem>\n      ) : (\n        <MenuItem\n          value={formattedValue}\n          onClick={() => {\n            onCustomClick();\n          }}\n        >\n          {formattedValue}\n        </MenuItem>\n      )}\n    </Select>\n  );\n}\n"],"names":["MenuItem","Select","Calendar","isRelativeTimeRange","useTimeZone","formatAbsoluteRange","DATE_TIME_FORMAT","TimeRangeSelector","props","value","timeOptions","onSelectChange","onCustomClick","height","timeZone","formattedValue","pastDuration","onChange","IconComponent","inputProps","sx","marginTop","transform","paddingRight","lineHeight","paddingY","map","item","idx","display","onClick"],"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,MAAM,QAA2B,eAAe,CAAC;AACpE,OAAOC,QAAQ,MAAM,0BAA0B,CAAC;AAChD,SAA4CC,mBAAmB,QAAQ,kBAAkB,CAAC;AAC1F,SAASC,WAAW,QAAQ,6BAA6B,CAAC;AAC1D,SAASC,mBAAmB,QAAQ,SAAS,CAAC;AAE9C,MAAMC,gBAAgB,GAAG,qBAAqB,AAAC;AAe/C,OAAO,SAASC,iBAAiB,CAACC,KAA6B,EAAE;IAC/D,MAAM,EAAEC,KAAK,CAAA,EAAEC,WAAW,CAAA,EAAEC,cAAc,CAAA,EAAEC,aAAa,CAAA,EAAEC,MAAM,CAAA,EAAE,GAAGL,KAAK,AAAC;IAC5E,MAAM,EAAEM,QAAQ,CAAA,EAAE,GAAGV,WAAW,EAAE,AAAC;IACnC,MAAMW,cAAc,GAAG,CAACZ,mBAAmB,CAACM,KAAK,CAAC,GAC9CJ,mBAAmB,CAACI,KAAK,EAAEH,gBAAgB,EAAEQ,QAAQ,CAAC,GACtDL,KAAK,CAACO,YAAY,AAAC;IACvB,qBACE,MAACf,MAAM;QACLQ,KAAK,EAAEM,cAAc;QACrBE,QAAQ,EAAEN,cAAc;QACxBO,aAAa,EAAEhB,QAAQ;QACvBiB,UAAU,EAAE;YACV,YAAY,EAAE,CAAC,oCAAoC,EAAEJ,cAAc,CAAC,CAAC;SACtE;QACDK,EAAE,EAAE;YACF,gFAAgF;YAChF,iBAAiB,EAAE;gBACjBC,SAAS,EAAE,KAAK;gBAChBC,SAAS,EAAE,MAAM;aAClB;YACD,6EAA6E;YAC7E,yDAAyD,EAAE;gBACzDC,YAAY,EAAE,MAAM;aACrB;YACD,mBAAmB,EAAEV,MAAM,GAAG;gBAAEW,UAAU,EAAEX,MAAM;gBAAEY,QAAQ,EAAE,CAAC;aAAE,GAAG,EAAE;SACvE;;YAEAf,WAAW,CAACgB,GAAG,CAAC,CAACC,IAAI,EAAEC,GAAG,iBACzB,KAAC5B,QAAQ;oBAAWS,KAAK,EAAEkB,IAAI,CAAClB,KAAK,CAACO,YAAY;8BAC/CW,IAAI,CAACE,OAAO;mBADAD,GAAG,CAEP,AACZ,CAAC;YAEDzB,mBAAmB,CAACM,KAAK,CAAC,iBACzB,KAACT,QAAQ;gBACP8B,OAAO,EAAE,IAAM;oBACblB,aAAa,EAAE,CAAC;gBAClB,CAAC;0BACF,mBAED;cAAW,iBAEX,KAACZ,QAAQ;gBACPS,KAAK,EAAEM,cAAc;gBACrBe,OAAO,EAAE,IAAM;oBACblB,aAAa,EAAE,CAAC;gBAClB,CAAC;0BAEAG,cAAc;cACN,AACZ;;MACM,CACT;AACJ,CAAC"}

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

@@ -15,7 +15,6 @@ import React, { useEffect, useLayoutEffect, useRef } from 'react';
 import { init } from 'echarts/core';
 import { Box } from '@mui/material';
 import { isEqual, debounce } from 'lodash-es';
-import { combineSx } from '../utils';
 const mouseEvents = [
     'click',
     'dblclick',
@@ -107,12 +106,7 @@ export const EChart = /*#__PURE__*/ React.memo(function EChart({ option , theme
     ]);
     return /*#__PURE__*/ _jsx(Box, {
         ref: containerRef,
-        sx: combineSx({
-            // Ensures chart fills container and updates size correctly when resizing,
-            // combineSx allows this default behavior to be overriden from parent component
-            width: '100%',
-            height: '100%'
-        }, sx)
+        sx: sx
     });
 });
 // Validate event config and bind custom events

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';\nimport { combineSx } from '../utils';\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 (\n    <Box\n      ref={containerRef}\n      sx={combineSx(\n        {\n          // Ensures chart fills container and updates size correctly when resizing,\n          // combineSx allows this default behavior to be overriden from parent component\n          width: '100%',\n          height: '100%',\n        },\n        sx\n      )}\n    ></Box>\n  );\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","combineSx","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","width","height","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  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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"}

package/dist/Legend/CompactLegend.d.ts

@@ -1,8 +1,11 @@
 /// <reference types="react" />
-import { LegendItem } from '../model';
-interface CompactLegendProps {
+import { LegendItem, SelectedLegendItemState } from '../model';
+import { ListLegendItemProps } from './ListLegendItem';
+export interface CompactLegendProps {
     height: number;
     items: LegendItem[];
+    selectedItems: SelectedLegendItemState;
+    onLegendItemClick: ListLegendItemProps['onClick'];
 }
 /**
  * CompactLegend is default and used when legend items need to show side by side
@@ -10,6 +13,5 @@ interface CompactLegendProps {
  * number of items. The `ListLegend` is used for cases with large numbers of items
  * because it is virtualized.
  */
-export declare function CompactLegend({ height, items }: CompactLegendProps): JSX.Element;
-export {};
+export declare function CompactLegend({ height, items, selectedItems, onLegendItemClick }: CompactLegendProps): JSX.Element;
 //# sourceMappingURL=CompactLegend.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"CompactLegend.d.ts","sourceRoot":"","sources":["../../src/Legend/CompactLegend.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAGtC,UAAU,kBAAkB;IAC1B,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,UAAU,EAAE,CAAC;CACrB;AAED;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,kBAAkB,eAgBlE"}
+{"version":3,"file":"CompactLegend.d.ts","sourceRoot":"","sources":["../../src/Legend/CompactLegend.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAE,UAAU,EAAE,uBAAuB,EAAgC,MAAM,UAAU,CAAC;AAC7F,OAAO,EAAkB,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAEvE,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,UAAU,EAAE,CAAC;IACpB,aAAa,EAAE,uBAAuB,CAAC;IACvC,iBAAiB,EAAE,mBAAmB,CAAC,SAAS,CAAC,CAAC;CACnD;AAED;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,aAAa,EAAE,iBAAiB,EAAE,EAAE,kBAAkB,eAkBpG"}

package/dist/Legend/CompactLegend.js

@@ -12,13 +12,14 @@
 // limitations under the License.
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Box } from '@mui/material';
+import { isLegendItemVisuallySelected } from '../model';
 import { ListLegendItem } from './ListLegendItem';
 /**
  * CompactLegend is default and used when legend items need to show side by side
  * which corresponds to when legend.position is `bottom` with a relatively small
  * number of items. The `ListLegend` is used for cases with large numbers of items
  * because it is virtualized.
- */ export function CompactLegend({ height , items  }) {
+ */ export function CompactLegend({ height , items , selectedItems , onLegendItemClick  }) {
     return /*#__PURE__*/ _jsx(Box, {
         component: "ul",
         sx: {
@@ -35,6 +36,8 @@ import { ListLegendItem } from './ListLegendItem';
         },
         children: items.map((item)=>/*#__PURE__*/ _jsx(ListLegendItem, {
                 item: item,
+                isVisuallySelected: isLegendItemVisuallySelected(item, selectedItems),
+                onClick: onLegendItemClick,
                 sx: {
                     width: 'auto',
                     float: 'left',

package/dist/Legend/CompactLegend.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Legend/CompactLegend.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 { LegendItem } from '../model';\nimport { ListLegendItem } from './ListLegendItem';\n\ninterface CompactLegendProps {\n  height: number;\n  items: LegendItem[];\n}\n\n/**\n * CompactLegend is default and used when legend items need to show side by side\n * which corresponds to when legend.position is `bottom` with a relatively small\n * number of items. The `ListLegend` is used for cases with large numbers of items\n * because it is virtualized.\n */\nexport function CompactLegend({ height, items }: CompactLegendProps) {\n  return (\n    <Box component=\"ul\" sx={{ width: '100%', height, padding: [0, 1, 0, 0], overflowY: 'scroll', margin: 0 }}>\n      {items.map((item) => (\n        <ListLegendItem\n          key={item.id}\n          item={item}\n          sx={{\n            width: 'auto',\n            float: 'left',\n            paddingRight: 1.5,\n          }}\n        />\n      ))}\n    </Box>\n  );\n}\n"],"names":["Box","ListLegendItem","CompactLegend","height","items","component","sx","width","padding","overflowY","margin","map","item","float","paddingRight","id"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAASA,GAAG,QAAQ,eAAe,CAAC;AAEpC,SAASC,cAAc,QAAQ,kBAAkB,CAAC;AAOlD;;;;;CAKC,GACD,OAAO,SAASC,aAAa,CAAC,EAAEC,MAAM,CAAA,EAAEC,KAAK,CAAA,EAAsB,EAAE;IACnE,qBACE,KAACJ,GAAG;QAACK,SAAS,EAAC,IAAI;QAACC,EAAE,EAAE;YAAEC,KAAK,EAAE,MAAM;YAAEJ,MAAM;YAAEK,OAAO,EAAE;AAAC,iBAAC;AAAE,iBAAC;AAAE,iBAAC;AAAE,iBAAC;aAAC;YAAEC,SAAS,EAAE,QAAQ;YAAEC,MAAM,EAAE,CAAC;SAAE;kBACrGN,KAAK,CAACO,GAAG,CAAC,CAACC,IAAI,iBACd,KAACX,cAAc;gBAEbW,IAAI,EAAEA,IAAI;gBACVN,EAAE,EAAE;oBACFC,KAAK,EAAE,MAAM;oBACbM,KAAK,EAAE,MAAM;oBACbC,YAAY,EAAE,GAAG;iBAClB;eANIF,IAAI,CAACG,EAAE,CAOZ,AACH,CAAC;MACE,CACN;AACJ,CAAC"}
+{"version":3,"sources":["../../src/Legend/CompactLegend.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 { LegendItem, SelectedLegendItemState, isLegendItemVisuallySelected } from '../model';\nimport { ListLegendItem, ListLegendItemProps } from './ListLegendItem';\n\nexport interface CompactLegendProps {\n  height: number;\n  items: LegendItem[];\n  selectedItems: SelectedLegendItemState;\n  onLegendItemClick: ListLegendItemProps['onClick'];\n}\n\n/**\n * CompactLegend is default and used when legend items need to show side by side\n * which corresponds to when legend.position is `bottom` with a relatively small\n * number of items. The `ListLegend` is used for cases with large numbers of items\n * because it is virtualized.\n */\nexport function CompactLegend({ height, items, selectedItems, onLegendItemClick }: CompactLegendProps) {\n  return (\n    <Box component=\"ul\" sx={{ width: '100%', height, padding: [0, 1, 0, 0], overflowY: 'scroll', margin: 0 }}>\n      {items.map((item) => (\n        <ListLegendItem\n          key={item.id}\n          item={item}\n          isVisuallySelected={isLegendItemVisuallySelected(item, selectedItems)}\n          onClick={onLegendItemClick}\n          sx={{\n            width: 'auto',\n            float: 'left',\n            paddingRight: 1.5,\n          }}\n        />\n      ))}\n    </Box>\n  );\n}\n"],"names":["Box","isLegendItemVisuallySelected","ListLegendItem","CompactLegend","height","items","selectedItems","onLegendItemClick","component","sx","width","padding","overflowY","margin","map","item","isVisuallySelected","onClick","float","paddingRight","id"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAASA,GAAG,QAAQ,eAAe,CAAC;AACpC,SAA8CC,4BAA4B,QAAQ,UAAU,CAAC;AAC7F,SAASC,cAAc,QAA6B,kBAAkB,CAAC;AASvE;;;;;CAKC,GACD,OAAO,SAASC,aAAa,CAAC,EAAEC,MAAM,CAAA,EAAEC,KAAK,CAAA,EAAEC,aAAa,CAAA,EAAEC,iBAAiB,CAAA,EAAsB,EAAE;IACrG,qBACE,KAACP,GAAG;QAACQ,SAAS,EAAC,IAAI;QAACC,EAAE,EAAE;YAAEC,KAAK,EAAE,MAAM;YAAEN,MAAM;YAAEO,OAAO,EAAE;AAAC,iBAAC;AAAE,iBAAC;AAAE,iBAAC;AAAE,iBAAC;aAAC;YAAEC,SAAS,EAAE,QAAQ;YAAEC,MAAM,EAAE,CAAC;SAAE;kBACrGR,KAAK,CAACS,GAAG,CAAC,CAACC,IAAI,iBACd,KAACb,cAAc;gBAEba,IAAI,EAAEA,IAAI;gBACVC,kBAAkB,EAAEf,4BAA4B,CAACc,IAAI,EAAET,aAAa,CAAC;gBACrEW,OAAO,EAAEV,iBAAiB;gBAC1BE,EAAE,EAAE;oBACFC,KAAK,EAAE,MAAM;oBACbQ,KAAK,EAAE,MAAM;oBACbC,YAAY,EAAE,GAAG;iBAClB;eARIJ,IAAI,CAACK,EAAE,CASZ,AACH,CAAC;MACE,CACN;AACJ,CAAC"}

package/dist/Legend/Legend.d.ts

@@ -1,19 +1,21 @@
 /// <reference types="react" />
-import { LegendOptions, LegendItem } from '../model';
-import { ListLegendProps } from './ListLegend';
+import { LegendOptions, LegendItem, SelectedLegendItemState } from '../model';
 export interface LegendProps {
     width: number;
     height: number;
     data: LegendItem[];
     options: LegendOptions;
     /**
-     * Additional props that will be passed to the list variation of the legend
-     * that is used when:
-     * - The legend is positioned on the right.
-     * - The legend has a large number of items to display and requires virtualization
-     *   to render performantly.
+     * State of selected items in the legend.
+     *
+     * Selected legend item state is a controlled value that should be managed using a
+     * combination of this prop and `onSelectedChange`.
      */
-    listProps?: Pick<ListLegendProps, 'initialRowHeight'>;
+    selectedItems: SelectedLegendItemState;
+    /**
+     * Callback fired when the selected items in the legend changes.
+     */
+    onSelectedItemsChange: (newSelected: SelectedLegendItemState) => void;
 }
-export declare function Legend({ width, height, options, data, listProps }: LegendProps): JSX.Element;
+export declare function Legend({ width, height, options, data, selectedItems, onSelectedItemsChange }: LegendProps): JSX.Element;
 //# sourceMappingURL=Legend.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Legend.d.ts","sourceRoot":"","sources":["../../src/Legend/Legend.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACrD,OAAO,EAAc,eAAe,EAAE,MAAM,cAAc,CAAC;AAG3D,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;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,IAAI,CAAC,eAAe,EAAE,kBAAkB,CAAC,CAAC;CACvD;AASD,wBAAgB,MAAM,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,WAAW,eAsC9E"}
+{"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"}

package/dist/Legend/Legend.js

@@ -12,6 +12,7 @@
 // limitations under the License.
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Box } from '@mui/material';
+import { produce } from 'immer';
 import { ListLegend } from './ListLegend';
 import { CompactLegend } from './CompactLegend';
 // When the number of items to display is above this number, it is likely to
@@ -20,7 +21,45 @@ import { CompactLegend } from './CompactLegend';
 // Set this number based on testing, but it may need to be tuned a bit on the
 // future as people test this out on different machines.
 const NEED_VIRTUALIZATION_LIMIT = 500;
-export function Legend({ width , height , options , data , listProps  }) {
+export function Legend({ width , height , options , data , selectedItems , onSelectedItemsChange  }) {
+    const onLegendItemClick = (e, seriesId)=>{
+        const isModifiedClick = e.metaKey || e.shiftKey;
+        const newSelected = produce(selectedItems, (draft)=>{
+            if (draft === 'ALL') {
+                return {
+                    [seriesId]: true
+                };
+            }
+            const isSelected = !!draft[seriesId];
+            // Clicks with modifier key can select multiple items.
+            if (isModifiedClick) {
+                if (isSelected) {
+                    // Modified click on already selected item. Remove that item.
+                    delete draft[seriesId];
+                } else {
+                    // Modified click on not-selected item. Add it.
+                    draft[seriesId] = true;
+                }
+                return draft;
+            }
+            if (isSelected) {
+                // Clicked item was already selected. Unselect it and return to
+                // ALL state.
+                return 'ALL';
+            }
+            // Select clicked item.
+            return {
+                [seriesId]: true
+            };
+        });
+        onSelectedItemsChange(newSelected);
+    };
+    const commonLegendProps = {
+        height,
+        items: data,
+        selectedItems,
+        onLegendItemClick
+    };
     if (options.position === 'Right') {
         return /*#__PURE__*/ _jsx(Box, {
             sx: {
@@ -31,10 +70,8 @@ export function Legend({ width , height , options , data , listProps  }) {
                 right: 0
             },
             children: /*#__PURE__*/ _jsx(ListLegend, {
-                items: data,
-                width: width,
-                height: height,
-                ...listProps
+                ...commonLegendProps,
+                width: width
             })
         });
     }
@@ -51,13 +88,10 @@ export function Legend({ width , height , options , data , listProps  }) {
             bottom: 0
         },
         children: needsVirtualization ? /*#__PURE__*/ _jsx(ListLegend, {
-            items: data,
-            width: width,
-            height: height,
-            ...listProps
+            ...commonLegendProps,
+            width: width
         }) : /*#__PURE__*/ _jsx(CompactLegend, {
-            items: data,
-            height: height
+            ...commonLegendProps
         })
     });
 }

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 { LegendOptions, LegendItem } from '../model';\nimport { ListLegend, ListLegendProps } from './ListLegend';\nimport { CompactLegend } from './CompactLegend';\n\nexport interface LegendProps {\n  width: number;\n  height: number;\n  data: LegendItem[];\n  options: LegendOptions;\n\n  /**\n   * Additional props that will be passed to the list variation of the legend\n   * that is used when:\n   * - The legend is positioned on the right.\n   * - The legend has a large number of items to display and requires virtualization\n   *   to render performantly.\n   */\n  listProps?: Pick<ListLegendProps, 'initialRowHeight'>;\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, listProps }: LegendProps) {\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 items={data} width={width} height={height} {...listProps} />\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 items={data} width={width} height={height} {...listProps} />\n      ) : (\n        <CompactLegend items={data} height={height} />\n      )}\n    </Box>\n  );\n}\n"],"names":["Box","ListLegend","CompactLegend","NEED_VIRTUALIZATION_LIMIT","Legend","width","height","options","data","listProps","position","sx","top","right","items","needsVirtualization","length","bottom"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAASA,GAAG,QAAQ,eAAe,CAAC;AAEpC,SAASC,UAAU,QAAyB,cAAc,CAAC;AAC3D,SAASC,aAAa,QAAQ,iBAAiB,CAAC;AAkBhD,4EAA4E;AAC5E,6EAA6E;AAC7E,mFAAmF;AACnF,6EAA6E;AAC7E,wDAAwD;AACxD,MAAMC,yBAAyB,GAAG,GAAG,AAAC;AAEtC,OAAO,SAASC,MAAM,CAAC,EAAEC,KAAK,CAAA,EAAEC,MAAM,CAAA,EAAEC,OAAO,CAAA,EAAEC,IAAI,CAAA,EAAEC,SAAS,CAAA,EAAe,EAAE;IAC/E,IAAIF,OAAO,CAACG,QAAQ,KAAK,OAAO,EAAE;QAChC,qBACE,KAACV,GAAG;YACFW,EAAE,EAAE;gBACFN,KAAK,EAAEA,KAAK;gBACZC,MAAM,EAAEA,MAAM;gBACdI,QAAQ,EAAE,UAAU;gBACpBE,GAAG,EAAE,CAAC;gBACNC,KAAK,EAAE,CAAC;aACT;sBAED,cAAA,KAACZ,UAAU;gBAACa,KAAK,EAAEN,IAAI;gBAAEH,KAAK,EAAEA,KAAK;gBAAEC,MAAM,EAAEA,MAAM;gBAAG,GAAGG,SAAS;cAAI;UACpE,CACN;IACJ,CAAC;IAED,2EAA2E;IAC3E,+EAA+E;IAC/E,2EAA2E;IAC3E,sBAAsB;IACtB,MAAMM,mBAAmB,GAAGP,IAAI,CAACQ,MAAM,IAAIb,yBAAyB,AAAC;IACrE,qBACE,KAACH,GAAG;QACFW,EAAE,EAAE;YACFN,KAAK,EAAEA,KAAK;YACZC,MAAM,EAAEA,MAAM;YACdI,QAAQ,EAAE,UAAU;YACpBO,MAAM,EAAE,CAAC;SACV;kBAEAF,mBAAmB,iBAClB,KAACd,UAAU;YAACa,KAAK,EAAEN,IAAI;YAAEH,KAAK,EAAEA,KAAK;YAAEC,MAAM,EAAEA,MAAM;YAAG,GAAGG,SAAS;UAAI,iBAExE,KAACP,aAAa;YAACY,KAAK,EAAEN,IAAI;YAAEF,MAAM,EAAEA,MAAM;UAAI,AAC/C;MACG,CACN;AACJ,CAAC"}
+{"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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"}

package/dist/Legend/ListLegend.d.ts

@@ -1,15 +1,12 @@
 /// <reference types="react" />
-import { LegendItem } from '../model';
+import { LegendItem, SelectedLegendItemState } from '../model';
+import { ListLegendItemProps } from './ListLegendItem';
 export interface ListLegendProps {
     items: LegendItem[];
     height: number;
     width: number;
-    /**
-     * The height used when initially laying out items in the list. Once items
-     * render, the height is determined based on the content. This is needed
-     * because the list is virtualized.
-     */
-    initialRowHeight?: number;
+    selectedItems: SelectedLegendItemState;
+    onLegendItemClick: ListLegendItemProps['onClick'];
 }
 /**
  * ListLegend is used when legend.position is 'right' since legend items are
@@ -17,5 +14,5 @@ export interface ListLegendProps {
  * 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 declare function ListLegend({ items, height, width, initialRowHeight }: ListLegendProps): JSX.Element;
+export declare function ListLegend({ items, height, width, selectedItems, onLegendItemClick }: ListLegendProps): JSX.Element;
 //# sourceMappingURL=ListLegend.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ListLegend.d.ts","sourceRoot":"","sources":["../../src/Legend/ListLegend.tsx"],"names":[],"mappings":";AAgBA,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAGtC,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,UAAU,EAAE,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IAEd;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAID;;;;;GAKG;AACH,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,gBAA6C,EAAE,EAAE,eAAe,eAgIlH"}
+{"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"}

package/dist/Legend/ListLegend.js

@@ -11,91 +11,42 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useTheme } from '@mui/material';
-import { VariableSizeList } from 'react-window';
-import { useRef, useEffect, forwardRef, useCallback } from 'react';
+import { useTheme, Box } from '@mui/material';
+import { Virtuoso } from 'react-virtuoso';
+import { isLegendItemVisuallySelected } from '../model';
 import { ListLegendItem } from './ListLegendItem';
-const DEFAULT_INITIAL_ROW_HEIGHT = 26;
 /**
  * ListLegend is used when legend.position is 'right' since legend items are
  * stacked. It is also used for `bottom` positioned legends when there are a
  * 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 , initialRowHeight =DEFAULT_INITIAL_ROW_HEIGHT  }) {
-    // Storing a ref to the react-window `VariableSizeList`, so we can call
-    // `resetAfterIndex` to resize the list after mouseover/out events to account
-    // for the change in list items on hover.
-    const listRef = useRef(null);
-    // Storing row heights, so we can use dynamic heights, which enables the
-    // user the hover to show the full label, while still having a virtualized
-    // list.
-    const rowHeights = useRef({});
+ */ export function ListLegend({ items , height , width , selectedItems , onLegendItemClick  }) {
     const theme = useTheme();
-    // Padding value used throughout to adjust the react-window virtual layouts
-    // to simulate padding per the guidance from:
-    // https://github.com/bvaughn/react-window#can-i-add-padding-to-the-top-and-bottom-of-a-list
+    // 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;
-    // Gets the row height for a given item to enable the virtualized list to
-    // render the row properly.
-    function getRowHeight(index) {
-        const currentHeight = rowHeights.current[index];
-        return currentHeight !== null && currentHeight !== void 0 ? currentHeight : initialRowHeight;
-    }
-    // Set the height for a given item to enable the virtualized list to
-    // adjust to size changes.
-    function setRowHeight(index, size) {
-        var // Tell the virtualized list that items changed size and need to be
-        // re-evaluated.
-        ref;
-        (ref = listRef.current) === null || ref === void 0 ? void 0 : ref.resetAfterIndex(0);
-        rowHeights.current = {
-            ...rowHeights.current,
-            [index]: size
-        };
-    }
-    // Renderer for virtualized rows in `VariableSizeList`.
-    function ListLegendRow({ index , style  }) {
-        // Storing a ref to the row's `ListLegendItem`, so we can get the "real"
-        // height and adjust the height of the row based on it, enabling the dynamic
-        // heights on hover.
-        const rowRef = useRef(null);
-        // useCallback is important here to avoid constantly running the useEffect
-        // that calls this in `ListLegendItem`.
-        const handleRowLayoutChange = useCallback(()=>{
-            // Handle size changes from hovering on a list item.
-            if (rowRef.current) {
-                setRowHeight(index, rowRef.current.clientHeight);
-            }
-        }, [
-            index
-        ]);
-        // Adjust row heights when the row being rendered changes.
-        useEffect(()=>{
-            handleRowLayoutChange();
-        }, [
-            handleRowLayoutChange
-        ]);
-        const item = items[index];
-        if (!item) {
-            // This shouldn't happen if configured correctly, but covering
-            // the case to appease the type checking and to cover any edge
-            // cases.
-            return null;
-        }
-        const originalTop = parseFloat(`${style.top}`);
-        return /*#__PURE__*/ _jsx("div", {
-            style: {
-                ...style,
-                // Adjust the top position to simulate top padding on the list.
-                top: `${originalTop + LIST_PADDING}px`
-            },
-            children: /*#__PURE__*/ _jsx(ListLegendItem, {
-                ref: rowRef,
+    return /*#__PURE__*/ _jsx(Virtuoso, {
+        style: {
+            height,
+            width
+        },
+        data: items,
+        itemContent: (index, item)=>{
+            return /*#__PURE__*/ _jsx(ListLegendItem, {
                 item: item,
                 truncateLabel: truncateLabels,
-                onLayoutChange: handleRowLayoutChange,
+                isVisuallySelected: isLegendItemVisuallySelected(item, selectedItems),
+                onClick: onLegendItemClick,
                 sx: {
                     // Having an explicit width is important for the ellipsizing to
                     // work correctly. Subtract padding to simulate padding.
@@ -103,33 +54,17 @@ const DEFAULT_INITIAL_ROW_HEIGHT = 26;
                     wordBreak: 'break-word',
                     overflow: 'hidden'
                 }
-            }, item.id)
-        });
-    }
-    // Renderer for the inner container element of the `VariableSizeList` used
-    // to adjust styles to simulate padding on the list per:
-    // https://github.com/bvaughn/react-window#can-i-add-padding-to-the-top-and-bottom-of-a-list
-    const InnerElementType = /*#__PURE__*/ forwardRef(function InnerElementType({ style , ...rest }, ref) {
-        const originalHeight = (style === null || style === void 0 ? void 0 : style.height) ? parseFloat(`${style === null || style === void 0 ? void 0 : style.height}`) : 0;
-        return /*#__PURE__*/ _jsx("div", {
-            ref: ref,
-            role: "list",
-            style: {
-                ...style,
-                // Adjust height to account for simulated padding.
-                height: `${originalHeight + LIST_PADDING * 2}px`
+            }, item.id);
+        },
+        role: "list",
+        components: {
+            Header: ()=>{
+                return mockPadding;
             },
-            ...rest
-        });
-    });
-    return /*#__PURE__*/ _jsx(VariableSizeList, {
-        height: height,
-        width: width,
-        itemCount: items.length,
-        itemSize: getRowHeight,
-        innerElementType: InnerElementType,
-        ref: listRef,
-        children: ListLegendRow
+            Footer: ()=>{
+                return mockPadding;
+            }
+        }
     });
 }