@perses-dev/components 0.43.0 → 0.44.0-rc0

package/dist/LineChart/LineChart.js

@@ -35,18 +35,18 @@ use([
     LegendComponent,
     CanvasRenderer
 ]);
-export const LineChart = /*#__PURE__*/ forwardRef(function LineChart({ height , data , yAxis , format , grid , legend , tooltipConfig =DEFAULT_TOOLTIP_CONFIG , noDataVariant ='message' , syncGroup , onDataZoom , onDoubleClick , __experimentalEChartsOptionsOverride  }, ref) {
+export const LineChart = /*#__PURE__*/ forwardRef(function LineChart({ height, data, yAxis, format, grid, legend, tooltipConfig = DEFAULT_TOOLTIP_CONFIG, noDataVariant = 'message', syncGroup, onDataZoom, onDoubleClick, __experimentalEChartsOptionsOverride }, ref) {
     var _option_tooltip;
     const chartsTheme = useChartsTheme();
     const chartRef = useRef();
     const [showTooltip, setShowTooltip] = useState(true);
     const [tooltipPinnedCoords, setTooltipPinnedCoords] = useState(null);
-    const { timeZone  } = useTimeZone();
+    const { timeZone } = useTimeZone();
     const [isDragging, setIsDragging] = useState(false);
     const [startX, setStartX] = useState(0);
     useImperativeHandle(ref, ()=>{
         return {
-            highlightSeries ({ id  }) {
+            highlightSeries ({ id }) {
                 if (!chartRef.current) {
                     // when chart undef, do not highlight series when hovering over legend
                     return;
@@ -61,12 +61,10 @@ export const LineChart = /*#__PURE__*/ forwardRef(function LineChart({ height ,
                     // when chart undef, do not clear highlight series
                     return;
                 }
-                clearHighlightedSeries(chartRef.current, data.timeSeries.length);
+                clearHighlightedSeries(chartRef.current);
             }
         };
-    }, [
-        data.timeSeries.length
-    ]);
+    }, []);
     const handleEvents = useMemo(()=>{
         return {
             datazoom: (params)=>{
@@ -102,7 +100,7 @@ export const LineChart = /*#__PURE__*/ forwardRef(function LineChart({ height ,
     if (chartRef.current !== undefined) {
         enableDataZoom(chartRef.current);
     }
-    const { noDataOption  } = chartsTheme;
+    const { noDataOption } = chartsTheme;
     const option = useMemo(()=>{
         if (data.timeSeries === undefined) return {};
         // The "chart" `noDataVariant` is only used when the `timeSeries` is an
@@ -194,7 +192,7 @@ export const LineChart = /*#__PURE__*/ forwardRef(function LineChart({ height ,
             }
         },
         onMouseDown: (e)=>{
-            const { clientX  } = e;
+            const { clientX } = e;
             setIsDragging(true);
             setStartX(clientX);
         },
@@ -203,7 +201,7 @@ export const LineChart = /*#__PURE__*/ forwardRef(function LineChart({ height ,
             if (!(e.target instanceof HTMLCanvasElement)) {
                 return;
             }
-            const { clientX  } = e;
+            const { clientX } = e;
             if (isDragging) {
                 const deltaX = clientX - startX;
                 if (deltaX > 0) {
@@ -222,7 +220,7 @@ export const LineChart = /*#__PURE__*/ forwardRef(function LineChart({ height ,
                 setShowTooltip(false);
             }
             if (chartRef.current !== undefined) {
-                clearHighlightedSeries(chartRef.current, data.timeSeries.length);
+                clearHighlightedSeries(chartRef.current);
             }
         },
         onMouseEnter: ()=>{

package/dist/LineChart/LineChart.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/LineChart/LineChart.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 { forwardRef, MouseEvent, useImperativeHandle, useMemo, useRef, useState } from 'react';\nimport { FormatOptions } from '@perses-dev/core';\nimport { Box } from '@mui/material';\nimport type {\n  EChartsCoreOption,\n  GridComponentOption,\n  LineSeriesOption,\n  LegendComponentOption,\n  YAXisComponentOption,\n  TooltipComponentOption,\n} from 'echarts';\nimport { ECharts as EChartsInstance, use } from 'echarts/core';\nimport { LineChart as EChartsLineChart } from 'echarts/charts';\nimport {\n  GridComponent,\n  DataZoomComponent,\n  MarkAreaComponent,\n  MarkLineComponent,\n  MarkPointComponent,\n  TitleComponent,\n  ToolboxComponent,\n  TooltipComponent,\n  LegendComponent,\n} from 'echarts/components';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport { EChart, OnEventsType } from '../EChart';\nimport { EChartsDataFormat, ChartInstanceFocusOpts, ChartInstance } from '../model/graph';\nimport { useChartsTheme } from '../context/ChartsProvider';\nimport { CursorCoordinates, LineChartTooltip, TooltipConfig, DEFAULT_TOOLTIP_CONFIG } from '../TimeSeriesTooltip';\nimport { useTimeZone } from '../context/TimeZoneProvider';\nimport {\n  clearHighlightedSeries,\n  enableDataZoom,\n  getDateRange,\n  getFormattedDate,\n  getFormattedAxis,\n  restoreChart,\n  ZoomEventData,\n} from '../utils';\n\nuse([\n  EChartsLineChart,\n  GridComponent,\n  DataZoomComponent,\n  MarkAreaComponent,\n  MarkLineComponent,\n  MarkPointComponent,\n  TitleComponent,\n  ToolboxComponent,\n  TooltipComponent,\n  LegendComponent,\n  CanvasRenderer,\n]);\n\nexport interface LineChartProps {\n  height: number;\n  data: EChartsDataFormat;\n  yAxis?: YAXisComponentOption;\n  format?: FormatOptions;\n  grid?: GridComponentOption;\n  legend?: LegendComponentOption;\n  tooltipConfig?: TooltipConfig;\n  noDataVariant?: 'chart' | 'message';\n  syncGroup?: string;\n  onDataZoom?: (e: ZoomEventData) => void;\n  onDoubleClick?: (e: MouseEvent) => void;\n  __experimentalEChartsOptionsOverride?: (options: EChartsCoreOption) => EChartsCoreOption;\n}\n\nexport const LineChart = forwardRef<ChartInstance, LineChartProps>(function LineChart(\n  {\n    height,\n    data,\n    yAxis,\n    format,\n    grid,\n    legend,\n    tooltipConfig = DEFAULT_TOOLTIP_CONFIG,\n    noDataVariant = 'message',\n    syncGroup,\n    onDataZoom,\n    onDoubleClick,\n    __experimentalEChartsOptionsOverride,\n  },\n  ref\n) {\n  const chartsTheme = useChartsTheme();\n  const chartRef = useRef<EChartsInstance>();\n  const [showTooltip, setShowTooltip] = useState<boolean>(true);\n  const [tooltipPinnedCoords, setTooltipPinnedCoords] = useState<CursorCoordinates | null>(null);\n  const { timeZone } = useTimeZone();\n\n  const [isDragging, setIsDragging] = useState(false);\n  const [startX, setStartX] = useState(0);\n\n  useImperativeHandle(\n    ref,\n    () => {\n      return {\n        highlightSeries({ id }: ChartInstanceFocusOpts) {\n          if (!chartRef.current) {\n            // when chart undef, do not highlight series when hovering over legend\n            return;\n          }\n\n          chartRef.current.dispatchAction({ type: 'highlight', seriesId: id });\n        },\n        clearHighlightedSeries: () => {\n          if (!chartRef.current) {\n            // when chart undef, do not clear highlight series\n            return;\n          }\n          clearHighlightedSeries(chartRef.current, data.timeSeries.length);\n        },\n      };\n    },\n    [data.timeSeries.length]\n  );\n\n  const handleEvents: OnEventsType<LineSeriesOption['data'] | unknown> = useMemo(() => {\n    return {\n      datazoom: (params) => {\n        if (onDataZoom === undefined) {\n          setTimeout(() => {\n            // workaround so unpin happens after click event\n            setTooltipPinnedCoords(null);\n          }, 10);\n        }\n        if (onDataZoom === undefined || params.batch[0] === undefined) return;\n        const startIndex = params.batch[0].startValue ?? 0;\n        const endIndex = params.batch[0].endValue ?? data.xAxis.length - 1;\n        const xAxisStartValue = data.xAxis[startIndex];\n        const xAxisEndValue = data.xAxis[endIndex];\n\n        if (xAxisStartValue !== undefined && xAxisEndValue !== undefined) {\n          const zoomEvent: ZoomEventData = {\n            start: xAxisStartValue,\n            end: xAxisEndValue,\n            startIndex,\n            endIndex,\n          };\n          onDataZoom(zoomEvent);\n        }\n      },\n    };\n  }, [data, onDataZoom, setTooltipPinnedCoords]);\n\n  if (chartRef.current !== undefined) {\n    enableDataZoom(chartRef.current);\n  }\n\n  const { noDataOption } = chartsTheme;\n\n  const option: EChartsCoreOption = useMemo(() => {\n    if (data.timeSeries === undefined) return {};\n\n    // The \"chart\" `noDataVariant` is only used when the `timeSeries` is an\n    // empty array because a `null` value will throw an error.\n    if (data.timeSeries === null || (data.timeSeries.length === 0 && noDataVariant === 'message')) return noDataOption;\n\n    const rangeMs = data.rangeMs ?? getDateRange(data.xAxis);\n\n    const option: EChartsCoreOption = {\n      series: data.timeSeries,\n      xAxis: {\n        type: 'category',\n        data: data.xAxis,\n        max: data.xAxisMax,\n        axisLabel: {\n          formatter: (value: number) => {\n            return getFormattedDate(value, rangeMs, timeZone);\n          },\n        },\n      },\n      yAxis: getFormattedAxis(yAxis, format),\n      animation: false,\n      tooltip: {\n        show: true,\n        trigger: 'axis',\n        showContent: false, // echarts tooltip content hidden since we use custom tooltip instead\n      },\n      // https://echarts.apache.org/en/option.html#axisPointer\n      axisPointer: {\n        type: 'line',\n        z: 0, // ensure point symbol shows on top of dashed line\n        triggerEmphasis: false, // https://github.com/apache/echarts/issues/18495\n        triggerTooltip: false,\n        snap: true,\n      },\n      toolbox: {\n        feature: {\n          dataZoom: {\n            icon: null, // https://stackoverflow.com/a/67684076/17575201\n            yAxisIndex: 'none',\n          },\n        },\n      },\n      grid,\n      legend,\n    };\n\n    if (__experimentalEChartsOptionsOverride) {\n      return __experimentalEChartsOptionsOverride(option);\n    }\n    return option;\n  }, [data, yAxis, format, grid, legend, noDataOption, timeZone, __experimentalEChartsOptionsOverride, noDataVariant]);\n\n  return (\n    <Box\n      sx={{ height }}\n      onClick={(e) => {\n        // Pin and unpin when clicking on chart canvas but not tooltip text.\n        if (tooltipConfig.enablePinning && e.target instanceof HTMLCanvasElement) {\n          setTooltipPinnedCoords((current) => {\n            if (current === null) {\n              return {\n                page: {\n                  x: e.pageX,\n                  y: e.pageY,\n                },\n                client: {\n                  x: e.clientX,\n                  y: e.clientY,\n                },\n                plotCanvas: {\n                  x: e.nativeEvent.offsetX,\n                  y: e.nativeEvent.offsetY,\n                },\n                target: e.target,\n              };\n            } else {\n              return null;\n            }\n          });\n        }\n      }}\n      onMouseDown={(e) => {\n        const { clientX } = e;\n        setIsDragging(true);\n        setStartX(clientX);\n      }}\n      onMouseMove={(e) => {\n        // Allow clicking inside tooltip to copy labels.\n        if (!(e.target instanceof HTMLCanvasElement)) {\n          return;\n        }\n        const { clientX } = e;\n        if (isDragging) {\n          const deltaX = clientX - startX;\n          if (deltaX > 0) {\n            // Hide tooltip when user drags to zoom.\n            setShowTooltip(false);\n          }\n        }\n      }}\n      onMouseUp={() => {\n        setIsDragging(false);\n        setStartX(0);\n        setShowTooltip(true);\n      }}\n      onMouseLeave={() => {\n        if (tooltipPinnedCoords === null) {\n          setShowTooltip(false);\n        }\n        if (chartRef.current !== undefined) {\n          clearHighlightedSeries(chartRef.current, data.timeSeries.length);\n        }\n      }}\n      onMouseEnter={() => {\n        setShowTooltip(true);\n        if (chartRef.current !== undefined) {\n          enableDataZoom(chartRef.current);\n        }\n      }}\n      onDoubleClick={(e) => {\n        setTooltipPinnedCoords(null);\n        // either dispatch ECharts restore action to return to orig state or allow consumer to define behavior\n        if (onDoubleClick === undefined) {\n          if (chartRef.current !== undefined) {\n            restoreChart(chartRef.current);\n          }\n        } else {\n          onDoubleClick(e);\n        }\n      }}\n    >\n      {/* Allows overrides prop to hide custom tooltip and use the ECharts option.tooltip instead */}\n      {showTooltip === true &&\n        (option.tooltip as TooltipComponentOption)?.showContent === false &&\n        tooltipConfig.hidden !== true && (\n          <LineChartTooltip\n            chartRef={chartRef}\n            chartData={data}\n            wrapLabels={tooltipConfig.wrapLabels}\n            enablePinning={tooltipConfig.enablePinning}\n            pinnedPos={tooltipPinnedCoords}\n            format={format}\n            onUnpinClick={() => {\n              setTooltipPinnedCoords(null);\n            }}\n            containerId={chartsTheme.tooltipPortalContainerId}\n          />\n        )}\n      <EChart\n        sx={{\n          width: '100%',\n          height: '100%',\n        }}\n        option={option}\n        theme={chartsTheme.echartsTheme}\n        onEvents={handleEvents}\n        _instance={chartRef}\n        syncGroup={syncGroup}\n      />\n    </Box>\n  );\n});\n"],"names":["forwardRef","useImperativeHandle","useMemo","useRef","useState","Box","use","LineChart","EChartsLineChart","GridComponent","DataZoomComponent","MarkAreaComponent","MarkLineComponent","MarkPointComponent","TitleComponent","ToolboxComponent","TooltipComponent","LegendComponent","CanvasRenderer","EChart","useChartsTheme","LineChartTooltip","DEFAULT_TOOLTIP_CONFIG","useTimeZone","clearHighlightedSeries","enableDataZoom","getDateRange","getFormattedDate","getFormattedAxis","restoreChart","height","data","yAxis","format","grid","legend","tooltipConfig","noDataVariant","syncGroup","onDataZoom","onDoubleClick","__experimentalEChartsOptionsOverride","ref","option","chartsTheme","chartRef","showTooltip","setShowTooltip","tooltipPinnedCoords","setTooltipPinnedCoords","timeZone","isDragging","setIsDragging","startX","setStartX","highlightSeries","id","current","dispatchAction","type","seriesId","timeSeries","length","handleEvents","datazoom","params","undefined","setTimeout","batch","startIndex","startValue","endIndex","endValue","xAxis","xAxisStartValue","xAxisEndValue","zoomEvent","start","end","noDataOption","rangeMs","series","max","xAxisMax","axisLabel","formatter","value","animation","tooltip","show","trigger","showContent","axisPointer","z","triggerEmphasis","triggerTooltip","snap","toolbox","feature","dataZoom","icon","yAxisIndex","sx","onClick","e","enablePinning","target","HTMLCanvasElement","page","x","pageX","y","pageY","client","clientX","clientY","plotCanvas","nativeEvent","offsetX","offsetY","onMouseDown","onMouseMove","deltaX","onMouseUp","onMouseLeave","onMouseEnter","hidden","chartData","wrapLabels","pinnedPos","onUnpinClick","containerId","tooltipPortalContainerId","width","theme","echartsTheme","onEvents","_instance"],"mappings":"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"}
+{"version":3,"sources":["../../src/LineChart/LineChart.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 { forwardRef, MouseEvent, useImperativeHandle, useMemo, useRef, useState } from 'react';\nimport { FormatOptions } from '@perses-dev/core';\nimport { Box } from '@mui/material';\nimport type {\n  EChartsCoreOption,\n  GridComponentOption,\n  LineSeriesOption,\n  LegendComponentOption,\n  YAXisComponentOption,\n  TooltipComponentOption,\n} from 'echarts';\nimport { ECharts as EChartsInstance, use } from 'echarts/core';\nimport { LineChart as EChartsLineChart } from 'echarts/charts';\nimport {\n  GridComponent,\n  DataZoomComponent,\n  MarkAreaComponent,\n  MarkLineComponent,\n  MarkPointComponent,\n  TitleComponent,\n  ToolboxComponent,\n  TooltipComponent,\n  LegendComponent,\n} from 'echarts/components';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport { EChart, OnEventsType } from '../EChart';\nimport { EChartsDataFormat, ChartInstanceFocusOpts, ChartInstance } from '../model/graph';\nimport { useChartsTheme } from '../context/ChartsProvider';\nimport { CursorCoordinates, LineChartTooltip, TooltipConfig, DEFAULT_TOOLTIP_CONFIG } from '../TimeSeriesTooltip';\nimport { useTimeZone } from '../context/TimeZoneProvider';\nimport {\n  clearHighlightedSeries,\n  enableDataZoom,\n  getDateRange,\n  getFormattedDate,\n  getFormattedAxis,\n  restoreChart,\n  ZoomEventData,\n} from '../utils';\n\nuse([\n  EChartsLineChart,\n  GridComponent,\n  DataZoomComponent,\n  MarkAreaComponent,\n  MarkLineComponent,\n  MarkPointComponent,\n  TitleComponent,\n  ToolboxComponent,\n  TooltipComponent,\n  LegendComponent,\n  CanvasRenderer,\n]);\n\nexport interface LineChartProps {\n  height: number;\n  data: EChartsDataFormat;\n  yAxis?: YAXisComponentOption;\n  format?: FormatOptions;\n  grid?: GridComponentOption;\n  legend?: LegendComponentOption;\n  tooltipConfig?: TooltipConfig;\n  noDataVariant?: 'chart' | 'message';\n  syncGroup?: string;\n  onDataZoom?: (e: ZoomEventData) => void;\n  onDoubleClick?: (e: MouseEvent) => void;\n  __experimentalEChartsOptionsOverride?: (options: EChartsCoreOption) => EChartsCoreOption;\n}\n\nexport const LineChart = forwardRef<ChartInstance, LineChartProps>(function LineChart(\n  {\n    height,\n    data,\n    yAxis,\n    format,\n    grid,\n    legend,\n    tooltipConfig = DEFAULT_TOOLTIP_CONFIG,\n    noDataVariant = 'message',\n    syncGroup,\n    onDataZoom,\n    onDoubleClick,\n    __experimentalEChartsOptionsOverride,\n  },\n  ref\n) {\n  const chartsTheme = useChartsTheme();\n  const chartRef = useRef<EChartsInstance>();\n  const [showTooltip, setShowTooltip] = useState<boolean>(true);\n  const [tooltipPinnedCoords, setTooltipPinnedCoords] = useState<CursorCoordinates | null>(null);\n  const { timeZone } = useTimeZone();\n\n  const [isDragging, setIsDragging] = useState(false);\n  const [startX, setStartX] = useState(0);\n\n  useImperativeHandle(\n    ref,\n    () => {\n      return {\n        highlightSeries({ id }: ChartInstanceFocusOpts) {\n          if (!chartRef.current) {\n            // when chart undef, do not highlight series when hovering over legend\n            return;\n          }\n\n          chartRef.current.dispatchAction({ type: 'highlight', seriesId: id });\n        },\n        clearHighlightedSeries: () => {\n          if (!chartRef.current) {\n            // when chart undef, do not clear highlight series\n            return;\n          }\n          clearHighlightedSeries(chartRef.current);\n        },\n      };\n    },\n    []\n  );\n\n  const handleEvents: OnEventsType<LineSeriesOption['data'] | unknown> = useMemo(() => {\n    return {\n      datazoom: (params) => {\n        if (onDataZoom === undefined) {\n          setTimeout(() => {\n            // workaround so unpin happens after click event\n            setTooltipPinnedCoords(null);\n          }, 10);\n        }\n        if (onDataZoom === undefined || params.batch[0] === undefined) return;\n        const startIndex = params.batch[0].startValue ?? 0;\n        const endIndex = params.batch[0].endValue ?? data.xAxis.length - 1;\n        const xAxisStartValue = data.xAxis[startIndex];\n        const xAxisEndValue = data.xAxis[endIndex];\n\n        if (xAxisStartValue !== undefined && xAxisEndValue !== undefined) {\n          const zoomEvent: ZoomEventData = {\n            start: xAxisStartValue,\n            end: xAxisEndValue,\n            startIndex,\n            endIndex,\n          };\n          onDataZoom(zoomEvent);\n        }\n      },\n    };\n  }, [data, onDataZoom, setTooltipPinnedCoords]);\n\n  if (chartRef.current !== undefined) {\n    enableDataZoom(chartRef.current);\n  }\n\n  const { noDataOption } = chartsTheme;\n\n  const option: EChartsCoreOption = useMemo(() => {\n    if (data.timeSeries === undefined) return {};\n\n    // The \"chart\" `noDataVariant` is only used when the `timeSeries` is an\n    // empty array because a `null` value will throw an error.\n    if (data.timeSeries === null || (data.timeSeries.length === 0 && noDataVariant === 'message')) return noDataOption;\n\n    const rangeMs = data.rangeMs ?? getDateRange(data.xAxis);\n\n    const option: EChartsCoreOption = {\n      series: data.timeSeries,\n      xAxis: {\n        type: 'category',\n        data: data.xAxis,\n        max: data.xAxisMax,\n        axisLabel: {\n          formatter: (value: number) => {\n            return getFormattedDate(value, rangeMs, timeZone);\n          },\n        },\n      },\n      yAxis: getFormattedAxis(yAxis, format),\n      animation: false,\n      tooltip: {\n        show: true,\n        trigger: 'axis',\n        showContent: false, // echarts tooltip content hidden since we use custom tooltip instead\n      },\n      // https://echarts.apache.org/en/option.html#axisPointer\n      axisPointer: {\n        type: 'line',\n        z: 0, // ensure point symbol shows on top of dashed line\n        triggerEmphasis: false, // https://github.com/apache/echarts/issues/18495\n        triggerTooltip: false,\n        snap: true,\n      },\n      toolbox: {\n        feature: {\n          dataZoom: {\n            icon: null, // https://stackoverflow.com/a/67684076/17575201\n            yAxisIndex: 'none',\n          },\n        },\n      },\n      grid,\n      legend,\n    };\n\n    if (__experimentalEChartsOptionsOverride) {\n      return __experimentalEChartsOptionsOverride(option);\n    }\n    return option;\n  }, [data, yAxis, format, grid, legend, noDataOption, timeZone, __experimentalEChartsOptionsOverride, noDataVariant]);\n\n  return (\n    <Box\n      sx={{ height }}\n      onClick={(e) => {\n        // Pin and unpin when clicking on chart canvas but not tooltip text.\n        if (tooltipConfig.enablePinning && e.target instanceof HTMLCanvasElement) {\n          setTooltipPinnedCoords((current) => {\n            if (current === null) {\n              return {\n                page: {\n                  x: e.pageX,\n                  y: e.pageY,\n                },\n                client: {\n                  x: e.clientX,\n                  y: e.clientY,\n                },\n                plotCanvas: {\n                  x: e.nativeEvent.offsetX,\n                  y: e.nativeEvent.offsetY,\n                },\n                target: e.target,\n              };\n            } else {\n              return null;\n            }\n          });\n        }\n      }}\n      onMouseDown={(e) => {\n        const { clientX } = e;\n        setIsDragging(true);\n        setStartX(clientX);\n      }}\n      onMouseMove={(e) => {\n        // Allow clicking inside tooltip to copy labels.\n        if (!(e.target instanceof HTMLCanvasElement)) {\n          return;\n        }\n        const { clientX } = e;\n        if (isDragging) {\n          const deltaX = clientX - startX;\n          if (deltaX > 0) {\n            // Hide tooltip when user drags to zoom.\n            setShowTooltip(false);\n          }\n        }\n      }}\n      onMouseUp={() => {\n        setIsDragging(false);\n        setStartX(0);\n        setShowTooltip(true);\n      }}\n      onMouseLeave={() => {\n        if (tooltipPinnedCoords === null) {\n          setShowTooltip(false);\n        }\n        if (chartRef.current !== undefined) {\n          clearHighlightedSeries(chartRef.current);\n        }\n      }}\n      onMouseEnter={() => {\n        setShowTooltip(true);\n        if (chartRef.current !== undefined) {\n          enableDataZoom(chartRef.current);\n        }\n      }}\n      onDoubleClick={(e) => {\n        setTooltipPinnedCoords(null);\n        // either dispatch ECharts restore action to return to orig state or allow consumer to define behavior\n        if (onDoubleClick === undefined) {\n          if (chartRef.current !== undefined) {\n            restoreChart(chartRef.current);\n          }\n        } else {\n          onDoubleClick(e);\n        }\n      }}\n    >\n      {/* Allows overrides prop to hide custom tooltip and use the ECharts option.tooltip instead */}\n      {showTooltip === true &&\n        (option.tooltip as TooltipComponentOption)?.showContent === false &&\n        tooltipConfig.hidden !== true && (\n          <LineChartTooltip\n            chartRef={chartRef}\n            chartData={data}\n            wrapLabels={tooltipConfig.wrapLabels}\n            enablePinning={tooltipConfig.enablePinning}\n            pinnedPos={tooltipPinnedCoords}\n            format={format}\n            onUnpinClick={() => {\n              setTooltipPinnedCoords(null);\n            }}\n            containerId={chartsTheme.tooltipPortalContainerId}\n          />\n        )}\n      <EChart\n        sx={{\n          width: '100%',\n          height: '100%',\n        }}\n        option={option}\n        theme={chartsTheme.echartsTheme}\n        onEvents={handleEvents}\n        _instance={chartRef}\n        syncGroup={syncGroup}\n      />\n    </Box>\n  );\n});\n"],"names":["forwardRef","useImperativeHandle","useMemo","useRef","useState","Box","use","LineChart","EChartsLineChart","GridComponent","DataZoomComponent","MarkAreaComponent","MarkLineComponent","MarkPointComponent","TitleComponent","ToolboxComponent","TooltipComponent","LegendComponent","CanvasRenderer","EChart","useChartsTheme","LineChartTooltip","DEFAULT_TOOLTIP_CONFIG","useTimeZone","clearHighlightedSeries","enableDataZoom","getDateRange","getFormattedDate","getFormattedAxis","restoreChart","height","data","yAxis","format","grid","legend","tooltipConfig","noDataVariant","syncGroup","onDataZoom","onDoubleClick","__experimentalEChartsOptionsOverride","ref","option","chartsTheme","chartRef","showTooltip","setShowTooltip","tooltipPinnedCoords","setTooltipPinnedCoords","timeZone","isDragging","setIsDragging","startX","setStartX","highlightSeries","id","current","dispatchAction","type","seriesId","handleEvents","datazoom","params","undefined","setTimeout","batch","startIndex","startValue","endIndex","endValue","xAxis","length","xAxisStartValue","xAxisEndValue","zoomEvent","start","end","noDataOption","timeSeries","rangeMs","series","max","xAxisMax","axisLabel","formatter","value","animation","tooltip","show","trigger","showContent","axisPointer","z","triggerEmphasis","triggerTooltip","snap","toolbox","feature","dataZoom","icon","yAxisIndex","sx","onClick","e","enablePinning","target","HTMLCanvasElement","page","x","pageX","y","pageY","client","clientX","clientY","plotCanvas","nativeEvent","offsetX","offsetY","onMouseDown","onMouseMove","deltaX","onMouseUp","onMouseLeave","onMouseEnter","hidden","chartData","wrapLabels","pinnedPos","onUnpinClick","containerId","tooltipPortalContainerId","width","theme","echartsTheme","onEvents","_instance"],"mappings":"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"}

package/dist/ModeSelector/ModeSelector.d.ts

@@ -1,9 +1,8 @@
-/// <reference types="react" />
-export declare type ModeOption = 'value' | 'percentage';
+export type ModeOption = 'value' | 'percentage';
 export interface ModeSelectorProps {
     disablePercentageMode: boolean;
     onChange: (mode: ModeOption) => void;
     value?: ModeOption;
 }
-export declare function ModeSelector({ disablePercentageMode, onChange, value }: ModeSelectorProps): JSX.Element;
+export declare function ModeSelector({ disablePercentageMode, onChange, value }: ModeSelectorProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ModeSelector.d.ts.map

package/dist/ModeSelector/ModeSelector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ModeSelector.d.ts","sourceRoot":"","sources":["../../src/ModeSelector/ModeSelector.tsx"],"names":[],"mappings":";AAqBA,oBAAY,UAAU,GAAG,OAAO,GAAG,YAAY,CAAC;AAEhD,MAAM,WAAW,iBAAiB;IAChC,qBAAqB,EAAE,OAAO,CAAC;IAC/B,QAAQ,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,IAAI,CAAC;IACrC,KAAK,CAAC,EAAE,UAAU,CAAC;CACpB;AAED,wBAAgB,YAAY,CAAC,EAAE,qBAAqB,EAAE,QAAQ,EAAE,KAAe,EAAE,EAAE,iBAAiB,eAoBnG"}
+{"version":3,"file":"ModeSelector.d.ts","sourceRoot":"","sources":["../../src/ModeSelector/ModeSelector.tsx"],"names":[],"mappings":"AAqBA,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,YAAY,CAAC;AAEhD,MAAM,WAAW,iBAAiB;IAChC,qBAAqB,EAAE,OAAO,CAAC;IAC/B,QAAQ,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,IAAI,CAAC;IACrC,KAAK,CAAC,EAAE,UAAU,CAAC;CACpB;AAED,wBAAgB,YAAY,CAAC,EAAE,qBAAqB,EAAE,QAAQ,EAAE,KAAe,EAAE,EAAE,iBAAiB,2CAoBnG"}

package/dist/ModeSelector/ModeSelector.js

@@ -23,8 +23,8 @@ const MODE_OPTIONS = [
         label: 'Percentage'
     }
 ];
-export function ModeSelector({ disablePercentageMode , onChange , value ='value'  }) {
-    const handleModeChange = (_, { id  })=>{
+export function ModeSelector({ disablePercentageMode, onChange, value = 'value' }) {
+    const handleModeChange = (_, { id })=>{
         onChange(id);
     };
     return /*#__PURE__*/ _jsx(OptionsEditorControl, {

package/dist/ModeSelector/ModeSelector.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/ModeSelector/ModeSelector.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 { OptionsEditorControl } from '../OptionsEditorLayout';\nimport { SettingsAutocomplete } from '../SettingsAutocomplete';\n\nconst MODE_OPTIONS: Array<{ id: ModeOption; label: string }> = [\n  { id: 'value', label: 'Value' },\n  { id: 'percentage', label: 'Percentage' },\n];\n\nexport type ModeOption = 'value' | 'percentage';\n\nexport interface ModeSelectorProps {\n  disablePercentageMode: boolean;\n  onChange: (mode: ModeOption) => void;\n  value?: ModeOption;\n}\n\nexport function ModeSelector({ disablePercentageMode, onChange, value = 'value' }: ModeSelectorProps) {\n  const handleModeChange = (_: unknown, { id }: { id: ModeOption }) => {\n    onChange(id);\n  };\n\n  return (\n    <OptionsEditorControl\n      label=\"Mode\"\n      control={\n        <SettingsAutocomplete\n          value={MODE_OPTIONS.find((o) => o.id === value)}\n          options={MODE_OPTIONS}\n          getOptionLabel={(o) => o.label}\n          getOptionDisabled={(o) => o.id === 'percentage' && disablePercentageMode}\n          onChange={handleModeChange}\n          disableClearable\n        />\n      }\n    />\n  );\n}\n"],"names":["OptionsEditorControl","SettingsAutocomplete","MODE_OPTIONS","id","label","ModeSelector","disablePercentageMode","onChange","value","handleModeChange","_","control","find","o","options","getOptionLabel","getOptionDisabled","disableClearable"],"mappings":"AAAA,oCAAoC;AACpC,oEAAoE;AACpE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,wEAAwE;AACxE,qEAAqE;AACrE,6EAA6E;AAC7E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,oBAAoB,QAAQ,yBAAyB;AAC9D,SAASC,oBAAoB,QAAQ,0BAA0B;AAE/D,MAAMC,eAAyD;IAC7D;QAAEC,IAAI;QAASC,OAAO;IAAQ;IAC9B;QAAED,IAAI;QAAcC,OAAO;IAAa;CACzC;AAUD,OAAO,SAASC,aAAa,EAAEC,sBAAqB,EAAEC,SAAQ,EAAEC,OAAQ,QAAO,EAAqB;IAClG,MAAMC,mBAAmB,CAACC,GAAY,EAAEP,GAAE,EAAsB;QAC9DI,SAASJ;IACX;IAEA,qBACE,KAACH;QACCI,OAAM;QACNO,uBACE,KAACV;YACCO,OAAON,aAAaU,KAAK,CAACC,IAAMA,EAAEV,OAAOK;YACzCM,SAASZ;YACTa,gBAAgB,CAACF,IAAMA,EAAET;YACzBY,mBAAmB,CAACH,IAAMA,EAAEV,OAAO,gBAAgBG;YACnDC,UAAUE;YACVQ,gBAAgB;;;AAK1B"}
+{"version":3,"sources":["../../src/ModeSelector/ModeSelector.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 { OptionsEditorControl } from '../OptionsEditorLayout';\nimport { SettingsAutocomplete } from '../SettingsAutocomplete';\n\nconst MODE_OPTIONS: Array<{ id: ModeOption; label: string }> = [\n  { id: 'value', label: 'Value' },\n  { id: 'percentage', label: 'Percentage' },\n];\n\nexport type ModeOption = 'value' | 'percentage';\n\nexport interface ModeSelectorProps {\n  disablePercentageMode: boolean;\n  onChange: (mode: ModeOption) => void;\n  value?: ModeOption;\n}\n\nexport function ModeSelector({ disablePercentageMode, onChange, value = 'value' }: ModeSelectorProps) {\n  const handleModeChange = (_: unknown, { id }: { id: ModeOption }) => {\n    onChange(id);\n  };\n\n  return (\n    <OptionsEditorControl\n      label=\"Mode\"\n      control={\n        <SettingsAutocomplete\n          value={MODE_OPTIONS.find((o) => o.id === value)}\n          options={MODE_OPTIONS}\n          getOptionLabel={(o) => o.label}\n          getOptionDisabled={(o) => o.id === 'percentage' && disablePercentageMode}\n          onChange={handleModeChange}\n          disableClearable\n        />\n      }\n    />\n  );\n}\n"],"names":["OptionsEditorControl","SettingsAutocomplete","MODE_OPTIONS","id","label","ModeSelector","disablePercentageMode","onChange","value","handleModeChange","_","control","find","o","options","getOptionLabel","getOptionDisabled","disableClearable"],"mappings":"AAAA,oCAAoC;AACpC,oEAAoE;AACpE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,wEAAwE;AACxE,qEAAqE;AACrE,6EAA6E;AAC7E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,oBAAoB,QAAQ,yBAAyB;AAC9D,SAASC,oBAAoB,QAAQ,0BAA0B;AAE/D,MAAMC,eAAyD;IAC7D;QAAEC,IAAI;QAASC,OAAO;IAAQ;IAC9B;QAAED,IAAI;QAAcC,OAAO;IAAa;CACzC;AAUD,OAAO,SAASC,aAAa,EAAEC,qBAAqB,EAAEC,QAAQ,EAAEC,QAAQ,OAAO,EAAqB;IAClG,MAAMC,mBAAmB,CAACC,GAAY,EAAEP,EAAE,EAAsB;QAC9DI,SAASJ;IACX;IAEA,qBACE,KAACH;QACCI,OAAM;QACNO,uBACE,KAACV;YACCO,OAAON,aAAaU,IAAI,CAAC,CAACC,IAAMA,EAAEV,EAAE,KAAKK;YACzCM,SAASZ;YACTa,gBAAgB,CAACF,IAAMA,EAAET,KAAK;YAC9BY,mBAAmB,CAACH,IAAMA,EAAEV,EAAE,KAAK,gBAAgBG;YACnDC,UAAUE;YACVQ,gBAAgB;;;AAK1B"}

package/dist/OptionsEditorLayout/OptionsEditorColumn.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export declare type OptionsEditorColumnProps = {
+export type OptionsEditorColumnProps = {
     /**
      * Components to render in the column. These will usually be
      * `OptionsEditorGroup` components.
@@ -9,5 +9,5 @@ export declare type OptionsEditorColumnProps = {
 /**
  * Lay out content in a column within panel options.
  */
-export declare const OptionsEditorColumn: ({ children }: OptionsEditorColumnProps) => JSX.Element;
+export declare const OptionsEditorColumn: ({ children }: OptionsEditorColumnProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=OptionsEditorColumn.d.ts.map

package/dist/OptionsEditorLayout/OptionsEditorColumn.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OptionsEditorColumn.d.ts","sourceRoot":"","sources":["../../src/OptionsEditorLayout/OptionsEditorColumn.tsx"],"names":[],"mappings":";AAeA,oBAAY,wBAAwB,GAAG;IACrC;;;OAGG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,mBAAmB,iBAAkB,wBAAwB,gBAMzE,CAAC"}
+{"version":3,"file":"OptionsEditorColumn.d.ts","sourceRoot":"","sources":["../../src/OptionsEditorLayout/OptionsEditorColumn.tsx"],"names":[],"mappings":";AAeA,MAAM,MAAM,wBAAwB,GAAG;IACrC;;;OAGG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,mBAAmB,iBAAkB,wBAAwB,4CAMzE,CAAC"}

package/dist/OptionsEditorLayout/OptionsEditorColumn.js

@@ -14,7 +14,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Grid, Stack } from '@mui/material';
 /**
  * Lay out content in a column within panel options.
- */ export const OptionsEditorColumn = ({ children  })=>{
+ */ export const OptionsEditorColumn = ({ children })=>{
     return /*#__PURE__*/ _jsx(Grid, {
         item: true,
         xs: 4,

package/dist/OptionsEditorLayout/OptionsEditorColumn.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/OptionsEditorLayout/OptionsEditorColumn.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 { Grid, Stack } from '@mui/material';\n\nexport type OptionsEditorColumnProps = {\n  /**\n   * Components to render in the column. These will usually be\n   * `OptionsEditorGroup` components.\n   */\n  children: React.ReactNode;\n};\n\n/**\n * Lay out content in a column within panel options.\n */\nexport const OptionsEditorColumn = ({ children }: OptionsEditorColumnProps) => {\n  return (\n    <Grid item xs={4}>\n      <Stack spacing={3}>{children}</Stack>\n    </Grid>\n  );\n};\n"],"names":["Grid","Stack","OptionsEditorColumn","children","item","xs","spacing"],"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,SAASA,IAAI,EAAEC,KAAK,QAAQ,gBAAgB;AAU5C;;CAEC,GACD,OAAO,MAAMC,sBAAsB,CAAC,EAAEC,SAAQ,EAA4B;IACxE,qBACE,KAACH;QAAKI,IAAI;QAACC,IAAI;kBACb,cAAA,KAACJ;YAAMK,SAAS;sBAAIH;;;AAG1B,EAAE"}
+{"version":3,"sources":["../../src/OptionsEditorLayout/OptionsEditorColumn.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 { Grid, Stack } from '@mui/material';\n\nexport type OptionsEditorColumnProps = {\n  /**\n   * Components to render in the column. These will usually be\n   * `OptionsEditorGroup` components.\n   */\n  children: React.ReactNode;\n};\n\n/**\n * Lay out content in a column within panel options.\n */\nexport const OptionsEditorColumn = ({ children }: OptionsEditorColumnProps) => {\n  return (\n    <Grid item xs={4}>\n      <Stack spacing={3}>{children}</Stack>\n    </Grid>\n  );\n};\n"],"names":["Grid","Stack","OptionsEditorColumn","children","item","xs","spacing"],"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,SAASA,IAAI,EAAEC,KAAK,QAAQ,gBAAgB;AAU5C;;CAEC,GACD,OAAO,MAAMC,sBAAsB,CAAC,EAAEC,QAAQ,EAA4B;IACxE,qBACE,KAACH;QAAKI,IAAI;QAACC,IAAI;kBACb,cAAA,KAACJ;YAAMK,SAAS;sBAAIH;;;AAG1B,EAAE"}

package/dist/OptionsEditorLayout/OptionsEditorControl.d.ts

@@ -1,7 +1,6 @@
-/// <reference types="react" />
 import { FormControlLabelProps } from '@mui/material';
-export declare type OptionsEditorControlProps = Pick<FormControlLabelProps, 'label' | 'control'> & {
+export type OptionsEditorControlProps = Pick<FormControlLabelProps, 'label' | 'control'> & {
     description?: string;
 };
-export declare const OptionsEditorControl: ({ label, control, description }: OptionsEditorControlProps) => JSX.Element;
+export declare const OptionsEditorControl: ({ label, control, description }: OptionsEditorControlProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=OptionsEditorControl.d.ts.map

package/dist/OptionsEditorLayout/OptionsEditorControl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OptionsEditorControl.d.ts","sourceRoot":"","sources":["../../src/OptionsEditorLayout/OptionsEditorControl.tsx"],"names":[],"mappings":";AAaA,OAAO,EAA0B,qBAAqB,EAA0B,MAAM,eAAe,CAAC;AAMtG,oBAAY,yBAAyB,GAAG,IAAI,CAAC,qBAAqB,EAAE,OAAO,GAAG,SAAS,CAAC,GAAG;IACzF,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,oBAAoB,oCAAqC,yBAAyB,gBAmC9F,CAAC"}
+{"version":3,"file":"OptionsEditorControl.d.ts","sourceRoot":"","sources":["../../src/OptionsEditorLayout/OptionsEditorControl.tsx"],"names":[],"mappings":"AAaA,OAAO,EAA0B,qBAAqB,EAA0B,MAAM,eAAe,CAAC;AAMtG,MAAM,MAAM,yBAAyB,GAAG,IAAI,CAAC,qBAAqB,EAAE,OAAO,GAAG,SAAS,CAAC,GAAG;IACzF,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,oBAAoB,oCAAqC,yBAAyB,4CAmC9F,CAAC"}

package/dist/OptionsEditorLayout/OptionsEditorControl.js

@@ -16,7 +16,7 @@ import React from 'react';
 import InformationOutlineIcon from 'mdi-material-ui/InformationOutline';
 import { useId } from '../utils';
 import { InfoTooltip } from '../InfoTooltip';
-export const OptionsEditorControl = ({ label , control , description  })=>{
+export const OptionsEditorControl = ({ label, control, description })=>{
     // Make sure we have a unique ID we can use for associating labels and
     // controls for a11y.
     const generatedControlId = useId('EditorSectionControl');

package/dist/OptionsEditorLayout/OptionsEditorControl.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/OptionsEditorLayout/OptionsEditorControl.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 { FormControl, FormLabel, FormControlLabelProps, Stack, Box, IconButton } from '@mui/material';\nimport React from 'react';\nimport InformationOutlineIcon from 'mdi-material-ui/InformationOutline';\nimport { useId } from '../utils';\nimport { InfoTooltip } from '../InfoTooltip';\n\nexport type OptionsEditorControlProps = Pick<FormControlLabelProps, 'label' | 'control'> & {\n  description?: string;\n};\n\nexport const OptionsEditorControl = ({ label, control, description }: OptionsEditorControlProps) => {\n  // Make sure we have a unique ID we can use for associating labels and\n  // controls for a11y.\n  const generatedControlId = useId('EditorSectionControl');\n  const controlId = `${generatedControlId}-control`;\n\n  const controlProps = {\n    id: controlId,\n  };\n\n  return (\n    <FormControl>\n      <Stack direction=\"row\" alignItems=\"center\" justifyContent=\"space-between\">\n        <Stack direction=\"row\" alignItems=\"center\" justifyContent=\"center\">\n          <FormLabel htmlFor={controlId}>{label}</FormLabel>\n          {description && (\n            <InfoTooltip description={description} enterDelay={100}>\n              <IconButton\n                size=\"small\"\n                sx={(theme) => ({ borderRadius: theme.shape.borderRadius, padding: '4x', margin: '0 2px' })}\n              >\n                <InformationOutlineIcon\n                  aria-describedby=\"info-tooltip\"\n                  aria-hidden={false}\n                  fontSize=\"inherit\"\n                  sx={{ color: (theme) => theme.palette.grey[700] }}\n                />\n              </IconButton>\n            </InfoTooltip>\n          )}\n        </Stack>\n        <Box sx={{ width: '180px', textAlign: 'right' }}> {React.cloneElement(control, controlProps)}</Box>\n      </Stack>\n    </FormControl>\n  );\n};\n"],"names":["FormControl","FormLabel","Stack","Box","IconButton","React","InformationOutlineIcon","useId","InfoTooltip","OptionsEditorControl","label","control","description","generatedControlId","controlId","controlProps","id","direction","alignItems","justifyContent","htmlFor","enterDelay","size","sx","theme","borderRadius","shape","padding","margin","aria-describedby","aria-hidden","fontSize","color","palette","grey","width","textAlign","cloneElement"],"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,SAASA,WAAW,EAAEC,SAAS,EAAyBC,KAAK,EAAEC,GAAG,EAAEC,UAAU,QAAQ,gBAAgB;AACtG,OAAOC,WAAW,QAAQ;AAC1B,OAAOC,4BAA4B,qCAAqC;AACxE,SAASC,KAAK,QAAQ,WAAW;AACjC,SAASC,WAAW,QAAQ,iBAAiB;AAM7C,OAAO,MAAMC,uBAAuB,CAAC,EAAEC,MAAK,EAAEC,QAAO,EAAEC,YAAW,EAA6B;IAC7F,sEAAsE;IACtE,qBAAqB;IACrB,MAAMC,qBAAqBN,MAAM;IACjC,MAAMO,YAAY,CAAC,EAAED,mBAAmB,QAAQ,CAAC;IAEjD,MAAME,eAAe;QACnBC,IAAIF;IACN;IAEA,qBACE,KAACd;kBACC,cAAA,MAACE;YAAMe,WAAU;YAAMC,YAAW;YAASC,gBAAe;;8BACxD,MAACjB;oBAAMe,WAAU;oBAAMC,YAAW;oBAASC,gBAAe;;sCACxD,KAAClB;4BAAUmB,SAASN;sCAAYJ;;wBAC/BE,6BACC,KAACJ;4BAAYI,aAAaA;4BAAaS,YAAY;sCACjD,cAAA,KAACjB;gCACCkB,MAAK;gCACLC,IAAI,CAACC,QAAW,CAAA;wCAAEC,cAAcD,MAAME,MAAMD;wCAAcE,SAAS;wCAAMC,QAAQ;oCAAQ,CAAA;0CAEzF,cAAA,KAACtB;oCACCuB,oBAAiB;oCACjBC,eAAa;oCACbC,UAAS;oCACTR,IAAI;wCAAES,OAAO,CAACR,QAAUA,MAAMS,QAAQC,IAAI,CAAC,IAAI;oCAAC;;;;;;8BAM1D,MAAC/B;oBAAIoB,IAAI;wBAAEY,OAAO;wBAASC,WAAW;oBAAQ;;wBAAG;sCAAE/B,MAAMgC,aAAa1B,SAASI;;;;;;AAIvF,EAAE"}
+{"version":3,"sources":["../../src/OptionsEditorLayout/OptionsEditorControl.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 { FormControl, FormLabel, FormControlLabelProps, Stack, Box, IconButton } from '@mui/material';\nimport React from 'react';\nimport InformationOutlineIcon from 'mdi-material-ui/InformationOutline';\nimport { useId } from '../utils';\nimport { InfoTooltip } from '../InfoTooltip';\n\nexport type OptionsEditorControlProps = Pick<FormControlLabelProps, 'label' | 'control'> & {\n  description?: string;\n};\n\nexport const OptionsEditorControl = ({ label, control, description }: OptionsEditorControlProps) => {\n  // Make sure we have a unique ID we can use for associating labels and\n  // controls for a11y.\n  const generatedControlId = useId('EditorSectionControl');\n  const controlId = `${generatedControlId}-control`;\n\n  const controlProps = {\n    id: controlId,\n  };\n\n  return (\n    <FormControl>\n      <Stack direction=\"row\" alignItems=\"center\" justifyContent=\"space-between\">\n        <Stack direction=\"row\" alignItems=\"center\" justifyContent=\"center\">\n          <FormLabel htmlFor={controlId}>{label}</FormLabel>\n          {description && (\n            <InfoTooltip description={description} enterDelay={100}>\n              <IconButton\n                size=\"small\"\n                sx={(theme) => ({ borderRadius: theme.shape.borderRadius, padding: '4x', margin: '0 2px' })}\n              >\n                <InformationOutlineIcon\n                  aria-describedby=\"info-tooltip\"\n                  aria-hidden={false}\n                  fontSize=\"inherit\"\n                  sx={{ color: (theme) => theme.palette.grey[700] }}\n                />\n              </IconButton>\n            </InfoTooltip>\n          )}\n        </Stack>\n        <Box sx={{ width: '180px', textAlign: 'right' }}> {React.cloneElement(control, controlProps)}</Box>\n      </Stack>\n    </FormControl>\n  );\n};\n"],"names":["FormControl","FormLabel","Stack","Box","IconButton","React","InformationOutlineIcon","useId","InfoTooltip","OptionsEditorControl","label","control","description","generatedControlId","controlId","controlProps","id","direction","alignItems","justifyContent","htmlFor","enterDelay","size","sx","theme","borderRadius","shape","padding","margin","aria-describedby","aria-hidden","fontSize","color","palette","grey","width","textAlign","cloneElement"],"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,SAASA,WAAW,EAAEC,SAAS,EAAyBC,KAAK,EAAEC,GAAG,EAAEC,UAAU,QAAQ,gBAAgB;AACtG,OAAOC,WAAW,QAAQ;AAC1B,OAAOC,4BAA4B,qCAAqC;AACxE,SAASC,KAAK,QAAQ,WAAW;AACjC,SAASC,WAAW,QAAQ,iBAAiB;AAM7C,OAAO,MAAMC,uBAAuB,CAAC,EAAEC,KAAK,EAAEC,OAAO,EAAEC,WAAW,EAA6B;IAC7F,sEAAsE;IACtE,qBAAqB;IACrB,MAAMC,qBAAqBN,MAAM;IACjC,MAAMO,YAAY,CAAC,EAAED,mBAAmB,QAAQ,CAAC;IAEjD,MAAME,eAAe;QACnBC,IAAIF;IACN;IAEA,qBACE,KAACd;kBACC,cAAA,MAACE;YAAMe,WAAU;YAAMC,YAAW;YAASC,gBAAe;;8BACxD,MAACjB;oBAAMe,WAAU;oBAAMC,YAAW;oBAASC,gBAAe;;sCACxD,KAAClB;4BAAUmB,SAASN;sCAAYJ;;wBAC/BE,6BACC,KAACJ;4BAAYI,aAAaA;4BAAaS,YAAY;sCACjD,cAAA,KAACjB;gCACCkB,MAAK;gCACLC,IAAI,CAACC,QAAW,CAAA;wCAAEC,cAAcD,MAAME,KAAK,CAACD,YAAY;wCAAEE,SAAS;wCAAMC,QAAQ;oCAAQ,CAAA;0CAEzF,cAAA,KAACtB;oCACCuB,oBAAiB;oCACjBC,eAAa;oCACbC,UAAS;oCACTR,IAAI;wCAAES,OAAO,CAACR,QAAUA,MAAMS,OAAO,CAACC,IAAI,CAAC,IAAI;oCAAC;;;;;;8BAM1D,MAAC/B;oBAAIoB,IAAI;wBAAEY,OAAO;wBAASC,WAAW;oBAAQ;;wBAAG;sCAAE/B,MAAMgC,YAAY,CAAC1B,SAASI;;;;;;AAIvF,EAAE"}

package/dist/OptionsEditorLayout/OptionsEditorGrid.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export declare type OptionsEditorGridProps = {
+export type OptionsEditorGridProps = {
     /**
      * 1-3 `OptionsEditorColumn` components to render content in columns.
      */
@@ -9,5 +9,5 @@ export declare type OptionsEditorGridProps = {
  * Top level grid container used to lay out content for editing in panel
  * options.
  */
-export declare const OptionsEditorGrid: ({ children }: OptionsEditorGridProps) => JSX.Element;
+export declare const OptionsEditorGrid: ({ children }: OptionsEditorGridProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=OptionsEditorGrid.d.ts.map

package/dist/OptionsEditorLayout/OptionsEditorGrid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OptionsEditorGrid.d.ts","sourceRoot":"","sources":["../../src/OptionsEditorLayout/OptionsEditorGrid.tsx"],"names":[],"mappings":";AAeA,oBAAY,sBAAsB,GAAG;IACnC;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,iBAAiB,iBAAkB,sBAAsB,gBAMrE,CAAC"}
+{"version":3,"file":"OptionsEditorGrid.d.ts","sourceRoot":"","sources":["../../src/OptionsEditorLayout/OptionsEditorGrid.tsx"],"names":[],"mappings":";AAeA,MAAM,MAAM,sBAAsB,GAAG;IACnC;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,iBAAiB,iBAAkB,sBAAsB,4CAMrE,CAAC"}

package/dist/OptionsEditorLayout/OptionsEditorGrid.js

@@ -15,7 +15,7 @@ import { Grid } from '@mui/material';
 /**
  * Top level grid container used to lay out content for editing in panel
  * options.
- */ export const OptionsEditorGrid = ({ children  })=>{
+ */ export const OptionsEditorGrid = ({ children })=>{
     return /*#__PURE__*/ _jsx(Grid, {
         container: true,
         spacing: 8,

package/dist/OptionsEditorLayout/OptionsEditorGrid.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/OptionsEditorLayout/OptionsEditorGrid.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 { Grid } from '@mui/material';\n\nexport type OptionsEditorGridProps = {\n  /**\n   * 1-3 `OptionsEditorColumn` components to render content in columns.\n   */\n  children: React.ReactNode;\n};\n\n/**\n * Top level grid container used to lay out content for editing in panel\n * options.\n */\nexport const OptionsEditorGrid = ({ children }: OptionsEditorGridProps) => {\n  return (\n    <Grid container spacing={8}>\n      {children}\n    </Grid>\n  );\n};\n"],"names":["Grid","OptionsEditorGrid","children","container","spacing"],"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,SAASA,IAAI,QAAQ,gBAAgB;AASrC;;;CAGC,GACD,OAAO,MAAMC,oBAAoB,CAAC,EAAEC,SAAQ,EAA0B;IACpE,qBACE,KAACF;QAAKG,SAAS;QAACC,SAAS;kBACtBF;;AAGP,EAAE"}
+{"version":3,"sources":["../../src/OptionsEditorLayout/OptionsEditorGrid.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 { Grid } from '@mui/material';\n\nexport type OptionsEditorGridProps = {\n  /**\n   * 1-3 `OptionsEditorColumn` components to render content in columns.\n   */\n  children: React.ReactNode;\n};\n\n/**\n * Top level grid container used to lay out content for editing in panel\n * options.\n */\nexport const OptionsEditorGrid = ({ children }: OptionsEditorGridProps) => {\n  return (\n    <Grid container spacing={8}>\n      {children}\n    </Grid>\n  );\n};\n"],"names":["Grid","OptionsEditorGrid","children","container","spacing"],"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,SAASA,IAAI,QAAQ,gBAAgB;AASrC;;;CAGC,GACD,OAAO,MAAMC,oBAAoB,CAAC,EAAEC,QAAQ,EAA0B;IACpE,qBACE,KAACF;QAAKG,SAAS;QAACC,SAAS;kBACtBF;;AAGP,EAAE"}

package/dist/OptionsEditorLayout/OptionsEditorGroup.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-export declare type OptionsEditorGroupProps = {
+export type OptionsEditorGroupProps = {
     /**
      * Text that communicates the purpose of the grouping.
      */
@@ -10,5 +10,5 @@ export declare type OptionsEditorGroupProps = {
 /**
  * Group similar content within panel options.
  */
-export declare const OptionsEditorGroup: ({ title, children, icon }: OptionsEditorGroupProps) => JSX.Element;
+export declare const OptionsEditorGroup: ({ title, children, icon }: OptionsEditorGroupProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=OptionsEditorGroup.d.ts.map

package/dist/OptionsEditorLayout/OptionsEditorGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OptionsEditorGroup.d.ts","sourceRoot":"","sources":["../../src/OptionsEditorLayout/OptionsEditorGroup.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,oBAAY,uBAAuB,GAAG;IACpC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,kBAAkB,8BAA+B,uBAAuB,gBAYpF,CAAC"}
+{"version":3,"file":"OptionsEditorGroup.d.ts","sourceRoot":"","sources":["../../src/OptionsEditorLayout/OptionsEditorGroup.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,MAAM,uBAAuB,GAAG;IACpC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,kBAAkB,8BAA+B,uBAAuB,4CAYpF,CAAC"}

package/dist/OptionsEditorLayout/OptionsEditorGroup.js

@@ -15,7 +15,7 @@ import { Box, Typography, Stack } from '@mui/material';
 import React from 'react';
 /**
  * Group similar content within panel options.
- */ export const OptionsEditorGroup = ({ title , children , icon  })=>{
+ */ export const OptionsEditorGroup = ({ title, children, icon })=>{
     return /*#__PURE__*/ _jsxs(Box, {
         children: [
             /*#__PURE__*/ _jsxs(Box, {

package/dist/OptionsEditorLayout/OptionsEditorGroup.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/OptionsEditorLayout/OptionsEditorGroup.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, Typography, Stack } from '@mui/material';\nimport React from 'react';\n\nexport type OptionsEditorGroupProps = {\n  /**\n   * Text that communicates the purpose of the grouping.\n   */\n  title: string;\n  children: React.ReactNode;\n  icon?: React.ReactNode;\n};\n\n/**\n * Group similar content within panel options.\n */\nexport const OptionsEditorGroup = ({ title, children, icon }: OptionsEditorGroupProps) => {\n  return (\n    <Box>\n      <Box display=\"flex\" borderBottom={1} borderColor=\"grey.300\" marginBottom={(theme) => theme.spacing(1)}>\n        <Typography variant=\"overline\" component=\"h4\">\n          {title}\n        </Typography>\n        {icon && <Box sx={{ marginLeft: 'auto' }}>{icon}</Box>}\n      </Box>\n      <Stack spacing={1}>{children}</Stack>\n    </Box>\n  );\n};\n"],"names":["Box","Typography","Stack","React","OptionsEditorGroup","title","children","icon","display","borderBottom","borderColor","marginBottom","theme","spacing","variant","component","sx","marginLeft"],"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,SAASA,GAAG,EAAEC,UAAU,EAAEC,KAAK,QAAQ,gBAAgB;AACvD,OAAOC,WAAW,QAAQ;AAW1B;;CAEC,GACD,OAAO,MAAMC,qBAAqB,CAAC,EAAEC,MAAK,EAAEC,SAAQ,EAAEC,KAAI,EAA2B;IACnF,qBACE,MAACP;;0BACC,MAACA;gBAAIQ,SAAQ;gBAAOC,cAAc;gBAAGC,aAAY;gBAAWC,cAAc,CAACC,QAAUA,MAAMC,QAAQ;;kCACjG,KAACZ;wBAAWa,SAAQ;wBAAWC,WAAU;kCACtCV;;oBAEFE,sBAAQ,KAACP;wBAAIgB,IAAI;4BAAEC,YAAY;wBAAO;kCAAIV;;;;0BAE7C,KAACL;gBAAMW,SAAS;0BAAIP;;;;AAG1B,EAAE"}
+{"version":3,"sources":["../../src/OptionsEditorLayout/OptionsEditorGroup.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, Typography, Stack } from '@mui/material';\nimport React from 'react';\n\nexport type OptionsEditorGroupProps = {\n  /**\n   * Text that communicates the purpose of the grouping.\n   */\n  title: string;\n  children: React.ReactNode;\n  icon?: React.ReactNode;\n};\n\n/**\n * Group similar content within panel options.\n */\nexport const OptionsEditorGroup = ({ title, children, icon }: OptionsEditorGroupProps) => {\n  return (\n    <Box>\n      <Box display=\"flex\" borderBottom={1} borderColor=\"grey.300\" marginBottom={(theme) => theme.spacing(1)}>\n        <Typography variant=\"overline\" component=\"h4\">\n          {title}\n        </Typography>\n        {icon && <Box sx={{ marginLeft: 'auto' }}>{icon}</Box>}\n      </Box>\n      <Stack spacing={1}>{children}</Stack>\n    </Box>\n  );\n};\n"],"names":["Box","Typography","Stack","React","OptionsEditorGroup","title","children","icon","display","borderBottom","borderColor","marginBottom","theme","spacing","variant","component","sx","marginLeft"],"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,SAASA,GAAG,EAAEC,UAAU,EAAEC,KAAK,QAAQ,gBAAgB;AACvD,OAAOC,WAAW,QAAQ;AAW1B;;CAEC,GACD,OAAO,MAAMC,qBAAqB,CAAC,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,IAAI,EAA2B;IACnF,qBACE,MAACP;;0BACC,MAACA;gBAAIQ,SAAQ;gBAAOC,cAAc;gBAAGC,aAAY;gBAAWC,cAAc,CAACC,QAAUA,MAAMC,OAAO,CAAC;;kCACjG,KAACZ;wBAAWa,SAAQ;wBAAWC,WAAU;kCACtCV;;oBAEFE,sBAAQ,KAACP;wBAAIgB,IAAI;4BAAEC,YAAY;wBAAO;kCAAIV;;;;0BAE7C,KAACL;gBAAMW,SAAS;0BAAIP;;;;AAG1B,EAAE"}

package/dist/RefreshIntervalPicker/RefreshIntervalPicker.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { DurationString } from '@perses-dev/core';
 import { TimeOption } from '../model';
 interface RefreshIntervalPickerProps {
@@ -7,6 +6,6 @@ interface RefreshIntervalPickerProps {
     onChange: (value: DurationString) => void;
     height?: string;
 }
-export declare function RefreshIntervalPicker(props: RefreshIntervalPickerProps): JSX.Element;
+export declare function RefreshIntervalPicker(props: RefreshIntervalPickerProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=RefreshIntervalPicker.d.ts.map

package/dist/RefreshIntervalPicker/RefreshIntervalPicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RefreshIntervalPicker.d.ts","sourceRoot":"","sources":["../../src/RefreshIntervalPicker/RefreshIntervalPicker.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAElD,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAEtC,UAAU,0BAA0B;IAClC,WAAW,EAAE,UAAU,EAAE,CAAC;IAC1B,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,QAAQ,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IAC1C,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,0BAA0B,eAsCtE"}
+{"version":3,"file":"RefreshIntervalPicker.d.ts","sourceRoot":"","sources":["../../src/RefreshIntervalPicker/RefreshIntervalPicker.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAElD,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAEtC,UAAU,0BAA0B;IAClC,WAAW,EAAE,UAAU,EAAE,CAAC;IAC1B,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,QAAQ,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IAC1C,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,0BAA0B,2CAsCtE"}

package/dist/RefreshIntervalPicker/RefreshIntervalPicker.js

@@ -14,7 +14,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, FormControl, MenuItem, Select } from '@mui/material';
 import { useMemo } from 'react';
 export function RefreshIntervalPicker(props) {
-    const { value , onChange , timeOptions , height  } = props;
+    const { value, onChange, timeOptions, height } = props;
     const formattedValue = value;
     // If the dashboard refresh interval is not provided in timeOptions, it will create a specific option for the select
     const customInterval = useMemo(()=>{

package/dist/RefreshIntervalPicker/RefreshIntervalPicker.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/RefreshIntervalPicker/RefreshIntervalPicker.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, FormControl, MenuItem, Select } from '@mui/material';\nimport { DurationString } from '@perses-dev/core';\nimport { useMemo } from 'react';\nimport { TimeOption } from '../model';\n\ninterface RefreshIntervalPickerProps {\n  timeOptions: TimeOption[];\n  value?: DurationString;\n  onChange: (value: DurationString) => void;\n  height?: string;\n}\n\nexport function RefreshIntervalPicker(props: RefreshIntervalPickerProps) {\n  const { value, onChange, timeOptions, height } = props;\n  const formattedValue = value;\n\n  // If the dashboard refresh interval is not provided in timeOptions, it will create a specific option for the select\n  const customInterval = useMemo(() => {\n    if (value && !timeOptions.some((option) => option.value.pastDuration === value)) {\n      return <MenuItem value={value}>{value}</MenuItem>;\n    }\n  }, [timeOptions, value]);\n\n  return (\n    <FormControl>\n      <Box>\n        <Select\n          id=\"refreshInterval\"\n          value={formattedValue}\n          onChange={(event) => {\n            const duration = event.target.value as DurationString;\n            onChange(duration);\n          }}\n          inputProps={{\n            'aria-label': `Select refresh interval. Currently set to ${formattedValue}`,\n          }}\n          sx={{\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          {customInterval}\n        </Select>\n      </Box>\n    </FormControl>\n  );\n}\n"],"names":["Box","FormControl","MenuItem","Select","useMemo","RefreshIntervalPicker","props","value","onChange","timeOptions","height","formattedValue","customInterval","some","option","pastDuration","id","event","duration","target","inputProps","sx","lineHeight","paddingY","map","item","idx","display"],"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,SAASA,GAAG,EAAEC,WAAW,EAAEC,QAAQ,EAAEC,MAAM,QAAQ,gBAAgB;AAEnE,SAASC,OAAO,QAAQ,QAAQ;AAUhC,OAAO,SAASC,sBAAsBC,KAAiC;IACrE,MAAM,EAAEC,MAAK,EAAEC,SAAQ,EAAEC,YAAW,EAAEC,OAAM,EAAE,GAAGJ;IACjD,MAAMK,iBAAiBJ;IAEvB,oHAAoH;IACpH,MAAMK,iBAAiBR,QAAQ;QAC7B,IAAIG,SAAS,CAACE,YAAYI,KAAK,CAACC,SAAWA,OAAOP,MAAMQ,iBAAiBR,QAAQ;YAC/E,qBAAO,KAACL;gBAASK,OAAOA;0BAAQA;;QAClC;IACF,GAAG;QAACE;QAAaF;KAAM;IAEvB,qBACE,KAACN;kBACC,cAAA,KAACD;sBACC,cAAA,MAACG;gBACCa,IAAG;gBACHT,OAAOI;gBACPH,UAAU,CAACS;oBACT,MAAMC,WAAWD,MAAME,OAAOZ;oBAC9BC,SAASU;gBACX;gBACAE,YAAY;oBACV,cAAc,CAAC,0CAA0C,EAAET,eAAe,CAAC;gBAC7E;gBACAU,IAAI;oBACF,qBAAqBX,SAAS;wBAAEY,YAAYZ;wBAAQa,UAAU;oBAAE,IAAI,CAAC;gBACvE;;oBAECd,YAAYe,IAAI,CAACC,MAAMC,oBACtB,KAACxB;4BAAmBK,OAAOkB,KAAKlB,MAAMQ;sCACnCU,KAAKE;2BADOD;oBAIhBd;;;;;AAKX"}
+{"version":3,"sources":["../../src/RefreshIntervalPicker/RefreshIntervalPicker.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, FormControl, MenuItem, Select } from '@mui/material';\nimport { DurationString } from '@perses-dev/core';\nimport { useMemo } from 'react';\nimport { TimeOption } from '../model';\n\ninterface RefreshIntervalPickerProps {\n  timeOptions: TimeOption[];\n  value?: DurationString;\n  onChange: (value: DurationString) => void;\n  height?: string;\n}\n\nexport function RefreshIntervalPicker(props: RefreshIntervalPickerProps) {\n  const { value, onChange, timeOptions, height } = props;\n  const formattedValue = value;\n\n  // If the dashboard refresh interval is not provided in timeOptions, it will create a specific option for the select\n  const customInterval = useMemo(() => {\n    if (value && !timeOptions.some((option) => option.value.pastDuration === value)) {\n      return <MenuItem value={value}>{value}</MenuItem>;\n    }\n  }, [timeOptions, value]);\n\n  return (\n    <FormControl>\n      <Box>\n        <Select\n          id=\"refreshInterval\"\n          value={formattedValue}\n          onChange={(event) => {\n            const duration = event.target.value as DurationString;\n            onChange(duration);\n          }}\n          inputProps={{\n            'aria-label': `Select refresh interval. Currently set to ${formattedValue}`,\n          }}\n          sx={{\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          {customInterval}\n        </Select>\n      </Box>\n    </FormControl>\n  );\n}\n"],"names":["Box","FormControl","MenuItem","Select","useMemo","RefreshIntervalPicker","props","value","onChange","timeOptions","height","formattedValue","customInterval","some","option","pastDuration","id","event","duration","target","inputProps","sx","lineHeight","paddingY","map","item","idx","display"],"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,SAASA,GAAG,EAAEC,WAAW,EAAEC,QAAQ,EAAEC,MAAM,QAAQ,gBAAgB;AAEnE,SAASC,OAAO,QAAQ,QAAQ;AAUhC,OAAO,SAASC,sBAAsBC,KAAiC;IACrE,MAAM,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,WAAW,EAAEC,MAAM,EAAE,GAAGJ;IACjD,MAAMK,iBAAiBJ;IAEvB,oHAAoH;IACpH,MAAMK,iBAAiBR,QAAQ;QAC7B,IAAIG,SAAS,CAACE,YAAYI,IAAI,CAAC,CAACC,SAAWA,OAAOP,KAAK,CAACQ,YAAY,KAAKR,QAAQ;YAC/E,qBAAO,KAACL;gBAASK,OAAOA;0BAAQA;;QAClC;IACF,GAAG;QAACE;QAAaF;KAAM;IAEvB,qBACE,KAACN;kBACC,cAAA,KAACD;sBACC,cAAA,MAACG;gBACCa,IAAG;gBACHT,OAAOI;gBACPH,UAAU,CAACS;oBACT,MAAMC,WAAWD,MAAME,MAAM,CAACZ,KAAK;oBACnCC,SAASU;gBACX;gBACAE,YAAY;oBACV,cAAc,CAAC,0CAA0C,EAAET,eAAe,CAAC;gBAC7E;gBACAU,IAAI;oBACF,qBAAqBX,SAAS;wBAAEY,YAAYZ;wBAAQa,UAAU;oBAAE,IAAI,CAAC;gBACvE;;oBAECd,YAAYe,GAAG,CAAC,CAACC,MAAMC,oBACtB,KAACxB;4BAAmBK,OAAOkB,KAAKlB,KAAK,CAACQ,YAAY;sCAC/CU,KAAKE,OAAO;2BADAD;oBAIhBd;;;;;AAKX"}

package/dist/SettingsAutocomplete/SettingsAutocomplete.d.ts

@@ -32,5 +32,5 @@ export interface SettingsAutocompleteProps<OptionType extends SettingsAutocomple
  *
  * **Note: This component is currently experimental and is likely to have significant breaking changes in the near future. Use with caution outside of the core Perses codebase.**
  */
-export declare function SettingsAutocomplete<OptionType extends SettingsAutocompleteOption, Multiple extends boolean | undefined = false, DisableClearable extends boolean | undefined = false>({ options, renderInput, ...otherProps }: SettingsAutocompleteProps<OptionType, Multiple, DisableClearable>): JSX.Element;
+export declare function SettingsAutocomplete<OptionType extends SettingsAutocompleteOption, Multiple extends boolean | undefined = false, DisableClearable extends boolean | undefined = false>({ options, renderInput, ...otherProps }: SettingsAutocompleteProps<OptionType, Multiple, DisableClearable>): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=SettingsAutocomplete.d.ts.map

package/dist/SettingsAutocomplete/SettingsAutocomplete.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SettingsAutocomplete.d.ts","sourceRoot":"","sources":["../../src/SettingsAutocomplete/SettingsAutocomplete.tsx"],"names":[],"mappings":"AAaA,OAAO,EAEL,iBAAiB,EAKlB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC;;GAEG;AACH,MAAM,WAAW,0BAA0B;IACzC;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IAEX;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IAExB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,yBAAyB,CACxC,UAAU,SAAS,0BAA0B,EAC7C,QAAQ,SAAS,OAAO,GAAG,SAAS,EACpC,gBAAgB,SAAS,OAAO,GAAG,SAAS,CAI5C,SAAQ,IAAI,CAAC,iBAAiB,CAAC,UAAU,EAAE,QAAQ,EAAE,gBAAgB,EAAE,KAAK,CAAC,EAAE,aAAa,CAAC;IAG7F,WAAW,CAAC,EAAE,iBAAiB,CAAC,UAAU,EAAE,QAAQ,EAAE,gBAAgB,EAAE,KAAK,CAAC,CAAC,aAAa,CAAC,CAAC;CAC/F;AAED;;;;;GAKG;AACH,wBAAgB,oBAAoB,CAClC,UAAU,SAAS,0BAA0B,EAC7C,QAAQ,SAAS,OAAO,GAAG,SAAS,GAAG,KAAK,EAC5C,gBAAgB,SAAS,OAAO,GAAG,SAAS,GAAG,KAAK,EACpD,EACA,OAAO,EACP,WAAmD,EACnD,GAAG,UAAU,EACd,EAAE,yBAAyB,CAAC,UAAU,EAAE,QAAQ,EAAE,gBAAgB,CAAC,eAyCnE"}
+{"version":3,"file":"SettingsAutocomplete.d.ts","sourceRoot":"","sources":["../../src/SettingsAutocomplete/SettingsAutocomplete.tsx"],"names":[],"mappings":"AAaA,OAAO,EAEL,iBAAiB,EAKlB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC;;GAEG;AACH,MAAM,WAAW,0BAA0B;IACzC;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IAEX;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IAExB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,yBAAyB,CACxC,UAAU,SAAS,0BAA0B,EAC7C,QAAQ,SAAS,OAAO,GAAG,SAAS,EACpC,gBAAgB,SAAS,OAAO,GAAG,SAAS,CAI5C,SAAQ,IAAI,CAAC,iBAAiB,CAAC,UAAU,EAAE,QAAQ,EAAE,gBAAgB,EAAE,KAAK,CAAC,EAAE,aAAa,CAAC;IAG7F,WAAW,CAAC,EAAE,iBAAiB,CAAC,UAAU,EAAE,QAAQ,EAAE,gBAAgB,EAAE,KAAK,CAAC,CAAC,aAAa,CAAC,CAAC;CAC/F;AAED;;;;;GAKG;AACH,wBAAgB,oBAAoB,CAClC,UAAU,SAAS,0BAA0B,EAC7C,QAAQ,SAAS,OAAO,GAAG,SAAS,GAAG,KAAK,EAC5C,gBAAgB,SAAS,OAAO,GAAG,SAAS,GAAG,KAAK,EACpD,EACA,OAAO,EACP,WAAmD,EACnD,GAAG,UAAU,EACd,EAAE,yBAAyB,CAAC,UAAU,EAAE,QAAQ,EAAE,gBAAgB,CAAC,2CAyCnE"}

package/dist/SettingsAutocomplete/SettingsAutocomplete.js

@@ -17,9 +17,9 @@ import { Autocomplete, TextField, Typography, createFilterOptions } from '@mui/m
  * for settings that require selecting one or more options from a list.
  *
  * **Note: This component is currently experimental and is likely to have significant breaking changes in the near future. Use with caution outside of the core Perses codebase.**
- */ export function SettingsAutocomplete({ options , renderInput =(params)=>/*#__PURE__*/ _jsx(TextField, {
+ */ export function SettingsAutocomplete({ options, renderInput = (params)=>/*#__PURE__*/ _jsx(TextField, {
         ...params
-    }) , ...otherProps }) {
+    }), ...otherProps }) {
     const getOptionLabel = (option)=>{
         var _option_label;
         return (_option_label = option.label) !== null && _option_label !== void 0 ? _option_label : option.id;

package/dist/SettingsAutocomplete/SettingsAutocomplete.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/SettingsAutocomplete/SettingsAutocomplete.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 {\n  Autocomplete,\n  AutocompleteProps,\n  TextField,\n  Typography,\n  UseAutocompleteProps,\n  createFilterOptions,\n} from '@mui/material';\nimport { ReactNode } from 'react';\n\n/**\n * Interface to extend from for `options` when using `SettingsAutocomplete`.\n */\nexport interface SettingsAutocompleteOption {\n  /**\n   * Unique identifier for the option.\n   */\n  id: string;\n\n  /**\n   * Optional value that is presented to the user for each option. If not set,\n   * the `id` will be used instead.\n   */\n  label?: string;\n\n  /**\n   * Optional description that will be rendered below the `label` to provide the\n   * user with additional information about the option.\n   */\n  description?: ReactNode;\n\n  /**\n   * When `true`, the option will be disabled.\n   */\n  disabled?: boolean;\n}\n\nexport interface SettingsAutocompleteProps<\n  OptionType extends SettingsAutocompleteOption,\n  Multiple extends boolean | undefined,\n  DisableClearable extends boolean | undefined\n  // Note that the last `false` in the generic arguments sets the `freeSolo` option to `false`.\n  // This component is intended to be used with a discrete list of options, so `freeSolo` never\n  // needs to be `true`.\n> extends Omit<AutocompleteProps<OptionType, Multiple, DisableClearable, false>, 'renderInput'> {\n  // Modifying this to optional, so we can define a sensible default below that\n  // is used in many of the simple cases.\n  renderInput?: AutocompleteProps<OptionType, Multiple, DisableClearable, false>['renderInput'];\n}\n\n/**\n * Opinionated autocomplete component useful for providing users with a dropdown\n * for settings that require selecting one or more options from a list.\n *\n * **Note: This component is currently experimental and is likely to have significant breaking changes in the near future. Use with caution outside of the core Perses codebase.**\n */\nexport function SettingsAutocomplete<\n  OptionType extends SettingsAutocompleteOption,\n  Multiple extends boolean | undefined = false,\n  DisableClearable extends boolean | undefined = false\n>({\n  options,\n  renderInput = (params) => <TextField {...params} />,\n  ...otherProps\n}: SettingsAutocompleteProps<OptionType, Multiple, DisableClearable>) {\n  const getOptionLabel: UseAutocompleteProps<OptionType, undefined, boolean, undefined>['getOptionLabel'] = (\n    option\n  ) => {\n    return option.label ?? option.id;\n  };\n\n  // Note: this component currently is not virtualized because it is specific\n  // to being used for settings, which generally have a pretty small list of\n  // options. If this changes to include values with many options, virtualization\n  // should be added using react-virtuoso.\n  return (\n    <Autocomplete\n      isOptionEqualToValue={(option, value) => option.id === value.id}\n      getOptionDisabled={(option) => !!option.disabled}\n      getOptionLabel={getOptionLabel}\n      options={options}\n      renderInput={renderInput}\n      renderOption={(props, option) => {\n        return (\n          <li {...props}>\n            <div>\n              <Typography variant=\"body1\" component=\"div\">\n                {getOptionLabel(option)}\n              </Typography>\n              {option.description && (\n                <Typography variant=\"body2\" component=\"div\" color={(theme) => theme.palette.text.secondary}>\n                  {option.description}\n                </Typography>\n              )}\n            </div>\n          </li>\n        );\n      }}\n      filterOptions={createFilterOptions({\n        // Include the label and the description in search.\n        stringify: (option) => `${getOptionLabel(option)} ${option.description || ''}`,\n      })}\n      {...otherProps}\n    />\n  );\n}\n"],"names":["Autocomplete","TextField","Typography","createFilterOptions","SettingsAutocomplete","options","renderInput","params","otherProps","getOptionLabel","option","label","id","isOptionEqualToValue","value","getOptionDisabled","disabled","renderOption","props","li","div","variant","component","description","color","theme","palette","text","secondary","filterOptions","stringify"],"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,SACEA,YAAY,EAEZC,SAAS,EACTC,UAAU,EAEVC,mBAAmB,QACd,gBAAgB;AA2CvB;;;;;CAKC,GACD,OAAO,SAASC,qBAId,EACAC,QAAO,EACPC,aAAc,CAACC,uBAAW,KAACN;QAAW,GAAGM,MAAM;OAAI,EACnD,GAAGC,YAC+D;IAClE,MAAMC,iBAAoG,CACxGC;YAEOA;QAAP,OAAOA,CAAAA,gBAAAA,OAAOC,mBAAPD,2BAAAA,gBAAgBA,OAAOE;IAChC;IAEA,2EAA2E;IAC3E,0EAA0E;IAC1E,+EAA+E;IAC/E,wCAAwC;IACxC,qBACE,KAACZ;QACCa,sBAAsB,CAACH,QAAQI,QAAUJ,OAAOE,OAAOE,MAAMF;QAC7DG,mBAAmB,CAACL,SAAW,CAAC,CAACA,OAAOM;QACxCP,gBAAgBA;QAChBJ,SAASA;QACTC,aAAaA;QACbW,cAAc,CAACC,OAAOR;YACpB,qBACE,KAACS;gBAAI,GAAGD,KAAK;0BACX,cAAA,MAACE;;sCACC,KAAClB;4BAAWmB,SAAQ;4BAAQC,WAAU;sCACnCb,eAAeC;;wBAEjBA,OAAOa,6BACN,KAACrB;4BAAWmB,SAAQ;4BAAQC,WAAU;4BAAME,OAAO,CAACC,QAAUA,MAAMC,QAAQC,KAAKC;sCAC9ElB,OAAOa;;;;;QAMpB;QACAM,eAAe1B,oBAAoB;YACjC,mDAAmD;YACnD2B,WAAW,CAACpB,SAAW,CAAC,EAAED,eAAeC,QAAQ,CAAC,EAAEA,OAAOa,eAAe,GAAG,CAAC;QAChF;QACC,GAAGf,UAAU;;AAGpB"}
+{"version":3,"sources":["../../src/SettingsAutocomplete/SettingsAutocomplete.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 {\n  Autocomplete,\n  AutocompleteProps,\n  TextField,\n  Typography,\n  UseAutocompleteProps,\n  createFilterOptions,\n} from '@mui/material';\nimport { ReactNode } from 'react';\n\n/**\n * Interface to extend from for `options` when using `SettingsAutocomplete`.\n */\nexport interface SettingsAutocompleteOption {\n  /**\n   * Unique identifier for the option.\n   */\n  id: string;\n\n  /**\n   * Optional value that is presented to the user for each option. If not set,\n   * the `id` will be used instead.\n   */\n  label?: string;\n\n  /**\n   * Optional description that will be rendered below the `label` to provide the\n   * user with additional information about the option.\n   */\n  description?: ReactNode;\n\n  /**\n   * When `true`, the option will be disabled.\n   */\n  disabled?: boolean;\n}\n\nexport interface SettingsAutocompleteProps<\n  OptionType extends SettingsAutocompleteOption,\n  Multiple extends boolean | undefined,\n  DisableClearable extends boolean | undefined,\n  // Note that the last `false` in the generic arguments sets the `freeSolo` option to `false`.\n  // This component is intended to be used with a discrete list of options, so `freeSolo` never\n  // needs to be `true`.\n> extends Omit<AutocompleteProps<OptionType, Multiple, DisableClearable, false>, 'renderInput'> {\n  // Modifying this to optional, so we can define a sensible default below that\n  // is used in many of the simple cases.\n  renderInput?: AutocompleteProps<OptionType, Multiple, DisableClearable, false>['renderInput'];\n}\n\n/**\n * Opinionated autocomplete component useful for providing users with a dropdown\n * for settings that require selecting one or more options from a list.\n *\n * **Note: This component is currently experimental and is likely to have significant breaking changes in the near future. Use with caution outside of the core Perses codebase.**\n */\nexport function SettingsAutocomplete<\n  OptionType extends SettingsAutocompleteOption,\n  Multiple extends boolean | undefined = false,\n  DisableClearable extends boolean | undefined = false,\n>({\n  options,\n  renderInput = (params) => <TextField {...params} />,\n  ...otherProps\n}: SettingsAutocompleteProps<OptionType, Multiple, DisableClearable>) {\n  const getOptionLabel: UseAutocompleteProps<OptionType, undefined, boolean, undefined>['getOptionLabel'] = (\n    option\n  ) => {\n    return option.label ?? option.id;\n  };\n\n  // Note: this component currently is not virtualized because it is specific\n  // to being used for settings, which generally have a pretty small list of\n  // options. If this changes to include values with many options, virtualization\n  // should be added using react-virtuoso.\n  return (\n    <Autocomplete\n      isOptionEqualToValue={(option, value) => option.id === value.id}\n      getOptionDisabled={(option) => !!option.disabled}\n      getOptionLabel={getOptionLabel}\n      options={options}\n      renderInput={renderInput}\n      renderOption={(props, option) => {\n        return (\n          <li {...props}>\n            <div>\n              <Typography variant=\"body1\" component=\"div\">\n                {getOptionLabel(option)}\n              </Typography>\n              {option.description && (\n                <Typography variant=\"body2\" component=\"div\" color={(theme) => theme.palette.text.secondary}>\n                  {option.description}\n                </Typography>\n              )}\n            </div>\n          </li>\n        );\n      }}\n      filterOptions={createFilterOptions({\n        // Include the label and the description in search.\n        stringify: (option) => `${getOptionLabel(option)} ${option.description || ''}`,\n      })}\n      {...otherProps}\n    />\n  );\n}\n"],"names":["Autocomplete","TextField","Typography","createFilterOptions","SettingsAutocomplete","options","renderInput","params","otherProps","getOptionLabel","option","label","id","isOptionEqualToValue","value","getOptionDisabled","disabled","renderOption","props","li","div","variant","component","description","color","theme","palette","text","secondary","filterOptions","stringify"],"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,SACEA,YAAY,EAEZC,SAAS,EACTC,UAAU,EAEVC,mBAAmB,QACd,gBAAgB;AA2CvB;;;;;CAKC,GACD,OAAO,SAASC,qBAId,EACAC,OAAO,EACPC,cAAc,CAACC,uBAAW,KAACN;QAAW,GAAGM,MAAM;MAAI,EACnD,GAAGC,YAC+D;IAClE,MAAMC,iBAAoG,CACxGC;YAEOA;QAAP,OAAOA,CAAAA,gBAAAA,OAAOC,KAAK,cAAZD,2BAAAA,gBAAgBA,OAAOE,EAAE;IAClC;IAEA,2EAA2E;IAC3E,0EAA0E;IAC1E,+EAA+E;IAC/E,wCAAwC;IACxC,qBACE,KAACZ;QACCa,sBAAsB,CAACH,QAAQI,QAAUJ,OAAOE,EAAE,KAAKE,MAAMF,EAAE;QAC/DG,mBAAmB,CAACL,SAAW,CAAC,CAACA,OAAOM,QAAQ;QAChDP,gBAAgBA;QAChBJ,SAASA;QACTC,aAAaA;QACbW,cAAc,CAACC,OAAOR;YACpB,qBACE,KAACS;gBAAI,GAAGD,KAAK;0BACX,cAAA,MAACE;;sCACC,KAAClB;4BAAWmB,SAAQ;4BAAQC,WAAU;sCACnCb,eAAeC;;wBAEjBA,OAAOa,WAAW,kBACjB,KAACrB;4BAAWmB,SAAQ;4BAAQC,WAAU;4BAAME,OAAO,CAACC,QAAUA,MAAMC,OAAO,CAACC,IAAI,CAACC,SAAS;sCACvFlB,OAAOa,WAAW;;;;;QAM/B;QACAM,eAAe1B,oBAAoB;YACjC,mDAAmD;YACnD2B,WAAW,CAACpB,SAAW,CAAC,EAAED,eAAeC,QAAQ,CAAC,EAAEA,OAAOa,WAAW,IAAI,GAAG,CAAC;QAChF;QACC,GAAGf,UAAU;;AAGpB"}

package/dist/SortSelector/SortSelector.d.ts

@@ -1,8 +1,7 @@
-/// <reference types="react" />
-export declare type SortOption = 'asc' | 'desc';
+export type SortOption = 'asc' | 'desc';
 export interface SortSelectorProps {
     onChange: (sort: SortOption) => void;
     value?: SortOption;
 }
-export declare function SortSelector({ onChange, value }: SortSelectorProps): JSX.Element;
+export declare function SortSelector({ onChange, value }: SortSelectorProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=SortSelector.d.ts.map

package/dist/SortSelector/SortSelector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SortSelector.d.ts","sourceRoot":"","sources":["../../src/SortSelector/SortSelector.tsx"],"names":[],"mappings":";AAqBA,oBAAY,UAAU,GAAG,KAAK,GAAG,MAAM,CAAC;AAExC,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,IAAI,CAAC;IACrC,KAAK,CAAC,EAAE,UAAU,CAAC;CACpB;AAED,wBAAgB,YAAY,CAAC,EAAE,QAAQ,EAAE,KAAc,EAAE,EAAE,iBAAiB,eAmB3E"}
+{"version":3,"file":"SortSelector.d.ts","sourceRoot":"","sources":["../../src/SortSelector/SortSelector.tsx"],"names":[],"mappings":"AAqBA,MAAM,MAAM,UAAU,GAAG,KAAK,GAAG,MAAM,CAAC;AAExC,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,IAAI,CAAC;IACrC,KAAK,CAAC,EAAE,UAAU,CAAC;CACpB;AAED,wBAAgB,YAAY,CAAC,EAAE,QAAQ,EAAE,KAAc,EAAE,EAAE,iBAAiB,2CAmB3E"}

package/dist/SortSelector/SortSelector.js

@@ -23,8 +23,8 @@ const SORT_OPTIONS = [
         label: 'Descending'
     }
 ];
-export function SortSelector({ onChange , value ='desc'  }) {
-    const handleSortChange = (_, { id  })=>{
+export function SortSelector({ onChange, value = 'desc' }) {
+    const handleSortChange = (_, { id })=>{
         onChange(id);
     };
     return /*#__PURE__*/ _jsx(OptionsEditorControl, {

package/dist/SortSelector/SortSelector.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/SortSelector/SortSelector.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 { OptionsEditorControl } from '../OptionsEditorLayout';\nimport { SettingsAutocomplete } from '../SettingsAutocomplete';\n\nconst SORT_OPTIONS: Array<{ id: SortOption; label: string }> = [\n  { id: 'asc', label: 'Ascending' },\n  { id: 'desc', label: 'Descending' },\n];\n\nexport type SortOption = 'asc' | 'desc';\n\nexport interface SortSelectorProps {\n  onChange: (sort: SortOption) => void;\n  value?: SortOption;\n}\n\nexport function SortSelector({ onChange, value = 'desc' }: SortSelectorProps) {\n  const handleSortChange = (_: unknown, { id }: { id: SortOption }) => {\n    onChange(id);\n  };\n\n  return (\n    <OptionsEditorControl\n      label=\"Sort\"\n      control={\n        <SettingsAutocomplete\n          value={SORT_OPTIONS.find((o) => o.id === value)}\n          options={SORT_OPTIONS}\n          getOptionLabel={(o) => o.label}\n          onChange={handleSortChange}\n          disableClearable\n        />\n      }\n    />\n  );\n}\n"],"names":["OptionsEditorControl","SettingsAutocomplete","SORT_OPTIONS","id","label","SortSelector","onChange","value","handleSortChange","_","control","find","o","options","getOptionLabel","disableClearable"],"mappings":"AAAA,oCAAoC;AACpC,oEAAoE;AACpE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,wEAAwE;AACxE,qEAAqE;AACrE,6EAA6E;AAC7E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,oBAAoB,QAAQ,yBAAyB;AAC9D,SAASC,oBAAoB,QAAQ,0BAA0B;AAE/D,MAAMC,eAAyD;IAC7D;QAAEC,IAAI;QAAOC,OAAO;IAAY;IAChC;QAAED,IAAI;QAAQC,OAAO;IAAa;CACnC;AASD,OAAO,SAASC,aAAa,EAAEC,SAAQ,EAAEC,OAAQ,OAAM,EAAqB;IAC1E,MAAMC,mBAAmB,CAACC,GAAY,EAAEN,GAAE,EAAsB;QAC9DG,SAASH;IACX;IAEA,qBACE,KAACH;QACCI,OAAM;QACNM,uBACE,KAACT;YACCM,OAAOL,aAAaS,KAAK,CAACC,IAAMA,EAAET,OAAOI;YACzCM,SAASX;YACTY,gBAAgB,CAACF,IAAMA,EAAER;YACzBE,UAAUE;YACVO,gBAAgB;;;AAK1B"}
+{"version":3,"sources":["../../src/SortSelector/SortSelector.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 { OptionsEditorControl } from '../OptionsEditorLayout';\nimport { SettingsAutocomplete } from '../SettingsAutocomplete';\n\nconst SORT_OPTIONS: Array<{ id: SortOption; label: string }> = [\n  { id: 'asc', label: 'Ascending' },\n  { id: 'desc', label: 'Descending' },\n];\n\nexport type SortOption = 'asc' | 'desc';\n\nexport interface SortSelectorProps {\n  onChange: (sort: SortOption) => void;\n  value?: SortOption;\n}\n\nexport function SortSelector({ onChange, value = 'desc' }: SortSelectorProps) {\n  const handleSortChange = (_: unknown, { id }: { id: SortOption }) => {\n    onChange(id);\n  };\n\n  return (\n    <OptionsEditorControl\n      label=\"Sort\"\n      control={\n        <SettingsAutocomplete\n          value={SORT_OPTIONS.find((o) => o.id === value)}\n          options={SORT_OPTIONS}\n          getOptionLabel={(o) => o.label}\n          onChange={handleSortChange}\n          disableClearable\n        />\n      }\n    />\n  );\n}\n"],"names":["OptionsEditorControl","SettingsAutocomplete","SORT_OPTIONS","id","label","SortSelector","onChange","value","handleSortChange","_","control","find","o","options","getOptionLabel","disableClearable"],"mappings":"AAAA,oCAAoC;AACpC,oEAAoE;AACpE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,wEAAwE;AACxE,qEAAqE;AACrE,6EAA6E;AAC7E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,oBAAoB,QAAQ,yBAAyB;AAC9D,SAASC,oBAAoB,QAAQ,0BAA0B;AAE/D,MAAMC,eAAyD;IAC7D;QAAEC,IAAI;QAAOC,OAAO;IAAY;IAChC;QAAED,IAAI;QAAQC,OAAO;IAAa;CACnC;AASD,OAAO,SAASC,aAAa,EAAEC,QAAQ,EAAEC,QAAQ,MAAM,EAAqB;IAC1E,MAAMC,mBAAmB,CAACC,GAAY,EAAEN,EAAE,EAAsB;QAC9DG,SAASH;IACX;IAEA,qBACE,KAACH;QACCI,OAAM;QACNM,uBACE,KAACT;YACCM,OAAOL,aAAaS,IAAI,CAAC,CAACC,IAAMA,EAAET,EAAE,KAAKI;YACzCM,SAASX;YACTY,gBAAgB,CAACF,IAAMA,EAAER,KAAK;YAC9BE,UAAUE;YACVO,gBAAgB;;;AAK1B"}

package/dist/StatChart/StatChart.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { FormatOptions } from '@perses-dev/core';
 import { LineSeriesOption } from 'echarts/charts';
 import { GraphSeries } from '../model/graph';
@@ -17,5 +16,5 @@ export interface StatChartProps {
     showSeriesName?: boolean;
     valueFontSize?: FontSizeOption;
 }
-export declare function StatChart(props: StatChartProps): JSX.Element;
+export declare function StatChart(props: StatChartProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=StatChart.d.ts.map

package/dist/StatChart/StatChart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StatChart.d.ts","sourceRoot":"","sources":["../../src/StatChart/StatChart.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAe,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAI9D,OAAO,EAAiC,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAKjF,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAUrD,MAAM,WAAW,aAAa;IAC5B,eAAe,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,UAAU,CAAC,EAAE,WAAW,CAAC;CAC1B;AAED,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,aAAa,CAAC;IACpB,MAAM,EAAE,aAAa,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,aAAa,CAAC,EAAE,cAAc,CAAC;CAChC;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,eAoI9C"}
+{"version":3,"file":"StatChart.d.ts","sourceRoot":"","sources":["../../src/StatChart/StatChart.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAe,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAI9D,OAAO,EAAiC,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAKjF,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAUrD,MAAM,WAAW,aAAa;IAC5B,eAAe,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,UAAU,CAAC,EAAE,WAAW,CAAC;CAC1B;AAED,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,aAAa,CAAC;IACpB,MAAM,EAAE,aAAa,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,aAAa,CAAC,EAAE,cAAc,CAAC;CAChC;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,2CAoI9C"}