@perses-dev/plugin-system 0.54.0-beta.0 → 0.54.0-beta.10

package/dist/components/LegendOptionsEditor/LegendOptionsEditor.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/LegendOptionsEditor/LegendOptionsEditor.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Switch, SwitchProps, ToggleButtonGroup, ToggleButton } from '@mui/material';\nimport { DEFAULT_LEGEND, getLegendMode, getLegendPosition, getLegendSize } from '@perses-dev/core'; // TODO should go to components\nimport { ErrorAlert, OptionsEditorControl, OptionsEditorGroup, SettingsAutocomplete } from '@perses-dev/components';\nimport { ReactElement, useMemo } from 'react';\nimport {\n  LEGEND_MODE_CONFIG,\n  LEGEND_POSITIONS_CONFIG,\n  LegendSpecOptions,\n  LegendSingleSelectConfig,\n  validateLegendSpec,\n  LEGEND_VALUE_CONFIG,\n  LegendValue,\n  LEGEND_SIZE_CONFIG,\n  comparisonLegends,\n  ComparisonValues,\n} from '../../model';\n\ntype LegendPositionOption = LegendSingleSelectConfig & { id: LegendSpecOptions['position'] };\n\nconst POSITION_OPTIONS: LegendPositionOption[] = Object.entries(LEGEND_POSITIONS_CONFIG).map(([id, config]) => {\n  return {\n    id: id as LegendSpecOptions['position'],\n    ...config,\n  };\n});\n\ntype LegendSizeOption = LegendSingleSelectConfig & { id: Required<LegendSpecOptions>['size'] };\n\nconst SIZE_OPTIONS: LegendSizeOption[] = Object.entries(LEGEND_SIZE_CONFIG).map(([id, config]) => {\n  return {\n    id: id as Required<LegendSpecOptions>['size'],\n    ...config,\n  };\n});\n\ntype LegendValueOption = LegendSingleSelectConfig & { id: LegendValue | ComparisonValues };\n\nexport interface LegendOptionsEditorProps {\n  value?: LegendSpecOptions;\n  onChange: (legend?: LegendSpecOptions) => void;\n  showValuesEditor?: boolean;\n  calculation?: 'aggregation' | 'comparison';\n}\n\nexport function LegendOptionsEditor({\n  value,\n  onChange,\n  showValuesEditor = true,\n  calculation = 'aggregation',\n}: LegendOptionsEditorProps): ReactElement {\n  const handleLegendShowChange: SwitchProps['onChange'] = (_: unknown, checked: boolean) => {\n    // legend is hidden when legend obj is undefined\n    const legendValue = checked === true ? { position: DEFAULT_LEGEND.position } : undefined;\n    onChange(legendValue);\n  };\n\n  const handleLegendPositionChange = (_: unknown, newValue: LegendPositionOption): void => {\n    onChange({\n      ...value,\n      position: newValue.id,\n    });\n  };\n\n  const handleLegendSizeChange = (_: unknown, newValue: LegendSizeOption): void => {\n    onChange({\n      ...value,\n      position: currentPosition,\n      size: newValue.id,\n    });\n  };\n\n  const handleLegendValueChange = (_: unknown, newValue: LegendValueOption[]): void => {\n    onChange({\n      ...value,\n      position: currentPosition,\n      values: newValue.map((value) => {\n        return value.id;\n      }),\n    });\n  };\n\n  const isValidLegend = validateLegendSpec(value);\n  const currentPosition = getLegendPosition(value?.position);\n  const legendPositionConfig = LEGEND_POSITIONS_CONFIG[currentPosition];\n\n  const currentMode = getLegendMode(value?.mode);\n\n  const currentSize = getLegendSize(value?.size);\n  const legendSizeConfig = LEGEND_SIZE_CONFIG[currentSize];\n\n  const legendValuesConfig = useMemo(() => {\n    const currentValues = value?.values;\n    if (!currentValues?.length) return [];\n\n    if (calculation === 'aggregation') {\n      return currentValues.reduce((result, item) => {\n        const config = LEGEND_VALUE_CONFIG[item as LegendValue];\n        if (config) {\n          result.push({ ...config, id: item });\n        }\n        return result;\n      }, [] as LegendValueOption[]);\n    }\n\n    return currentValues.map((id) => {\n      const { label, description } = comparisonLegends[id as ComparisonValues];\n      return {\n        id,\n        label,\n        description,\n      };\n    });\n  }, [calculation, value?.values]);\n\n  const valueOptions = useMemo(() => {\n    if (calculation === 'aggregation') {\n      return Object.entries(LEGEND_VALUE_CONFIG || {}).map(([id, config]) => {\n        return {\n          id: id as LegendValue,\n          ...config,\n        };\n      });\n    }\n\n    return Object.entries(comparisonLegends).map(([id, config]) => ({\n      id: id as ComparisonValues,\n      ...config,\n    }));\n  }, [calculation]);\n\n  return (\n    <OptionsEditorGroup title=\"Legend\">\n      {!isValidLegend && <ErrorAlert error={{ name: 'invalid-legend', message: 'Invalid legend spec' }} />}\n      <OptionsEditorControl label=\"Show\" control={<Switch checked={!!value} onChange={handleLegendShowChange} />} />\n      {value && (\n        <>\n          <OptionsEditorControl\n            label=\"Position\"\n            control={\n              <SettingsAutocomplete\n                value={{\n                  ...legendPositionConfig,\n                  id: currentPosition,\n                }}\n                options={POSITION_OPTIONS}\n                onChange={handleLegendPositionChange}\n                disableClearable\n              />\n            }\n          />\n          <OptionsEditorControl\n            label=\"Mode\"\n            control={\n              <ToggleButtonGroup\n                color=\"primary\"\n                exclusive\n                value={currentMode}\n                aria-label=\"Mode\"\n                onChange={(__, newValue) => {\n                  onChange({\n                    ...value,\n                    position: currentPosition,\n                    mode: newValue,\n                  });\n                }}\n              >\n                {Object.entries(LEGEND_MODE_CONFIG).map(([modeId, config]) => (\n                  <ToggleButton\n                    key={modeId}\n                    value={modeId}\n                    selected={currentMode === modeId}\n                    aria-label={`display ${modeId} mode`}\n                  >\n                    {config.label}\n                  </ToggleButton>\n                ))}\n              </ToggleButtonGroup>\n            }\n          />\n          {currentMode === 'table' && (\n            <>\n              <OptionsEditorControl\n                label=\"Size\"\n                control={\n                  <SettingsAutocomplete\n                    value={{\n                      ...legendSizeConfig,\n                      id: currentSize,\n                    }}\n                    options={SIZE_OPTIONS}\n                    onChange={handleLegendSizeChange}\n                    // TODO: enable sizes for list mode when we normalize the layout of\n                    // lists to more closely match tables.\n                    disableClearable\n                  />\n                }\n              />\n              {showValuesEditor && (\n                <OptionsEditorControl\n                  label=\"Values\"\n                  control={\n                    // For some reason, the inferred option type doesn't always seem to work\n                    // quite right when `multiple` is true. Explicitly setting the generics\n                    // to work around this.\n                    <SettingsAutocomplete<LegendValueOption, true, true>\n                      multiple={true}\n                      disableCloseOnSelect\n                      disableClearable\n                      value={legendValuesConfig}\n                      options={valueOptions}\n                      onChange={handleLegendValueChange}\n                      limitTags={1}\n                      ChipProps={{\n                        size: 'small',\n                      }}\n                    />\n                  }\n                />\n              )}\n            </>\n          )}\n        </>\n      )}\n    </OptionsEditorGroup>\n  );\n}\n"],"names":["Switch","ToggleButtonGroup","ToggleButton","DEFAULT_LEGEND","getLegendMode","getLegendPosition","getLegendSize","ErrorAlert","OptionsEditorControl","OptionsEditorGroup","SettingsAutocomplete","useMemo","LEGEND_MODE_CONFIG","LEGEND_POSITIONS_CONFIG","validateLegendSpec","LEGEND_VALUE_CONFIG","LEGEND_SIZE_CONFIG","comparisonLegends","POSITION_OPTIONS","Object","entries","map","id","config","SIZE_OPTIONS","LegendOptionsEditor","value","onChange","showValuesEditor","calculation","handleLegendShowChange","_","checked","legendValue","position","undefined","handleLegendPositionChange","newValue","handleLegendSizeChange","currentPosition","size","handleLegendValueChange","values","isValidLegend","legendPositionConfig","currentMode","mode","currentSize","legendSizeConfig","legendValuesConfig","currentValues","length","reduce","result","item","push","label","description","valueOptions","title","error","name","message","control","options","disableClearable","color","exclusive","aria-label","__","modeId","selected","multiple","disableCloseOnSelect","limitTags","ChipProps"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/LegendOptionsEditor/LegendOptionsEditor.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Switch, SwitchProps, ToggleButtonGroup, ToggleButton } from '@mui/material';\nimport {\n  ErrorAlert,\n  OptionsEditorControl,\n  OptionsEditorGroup,\n  SettingsAutocomplete,\n  DEFAULT_LEGEND,\n  getLegendSize,\n  getLegendMode,\n  getLegendPosition,\n} from '@perses-dev/components';\nimport { ReactElement, useMemo } from 'react';\nimport {\n  LEGEND_MODE_CONFIG,\n  LEGEND_POSITIONS_CONFIG,\n  LegendSpecOptions,\n  LegendSingleSelectConfig,\n  validateLegendSpec,\n  LEGEND_VALUE_CONFIG,\n  LegendValue,\n  LEGEND_SIZE_CONFIG,\n  comparisonLegends,\n  ComparisonValues,\n} from '../../model';\n\ntype LegendPositionOption = LegendSingleSelectConfig & { id: LegendSpecOptions['position'] };\n\nconst POSITION_OPTIONS: LegendPositionOption[] = Object.entries(LEGEND_POSITIONS_CONFIG).map(([id, config]) => {\n  return {\n    id: id as LegendSpecOptions['position'],\n    ...config,\n  };\n});\n\ntype LegendSizeOption = LegendSingleSelectConfig & { id: Required<LegendSpecOptions>['size'] };\n\nconst SIZE_OPTIONS: LegendSizeOption[] = Object.entries(LEGEND_SIZE_CONFIG).map(([id, config]) => {\n  return {\n    id: id as Required<LegendSpecOptions>['size'],\n    ...config,\n  };\n});\n\ntype LegendValueOption = LegendSingleSelectConfig & { id: LegendValue | ComparisonValues };\n\nexport interface LegendOptionsEditorProps {\n  value?: LegendSpecOptions;\n  onChange: (legend?: LegendSpecOptions) => void;\n  showValuesEditor?: boolean;\n  calculation?: 'aggregation' | 'comparison';\n}\n\nexport function LegendOptionsEditor({\n  value,\n  onChange,\n  showValuesEditor = true,\n  calculation = 'aggregation',\n}: LegendOptionsEditorProps): ReactElement {\n  const handleLegendShowChange: SwitchProps['onChange'] = (_: unknown, checked: boolean) => {\n    // legend is hidden when legend obj is undefined\n    const legendValue = checked === true ? { position: DEFAULT_LEGEND.position } : undefined;\n    onChange(legendValue);\n  };\n\n  const handleLegendPositionChange = (_: unknown, newValue: LegendPositionOption): void => {\n    onChange({\n      ...value,\n      position: newValue.id,\n    });\n  };\n\n  const handleLegendSizeChange = (_: unknown, newValue: LegendSizeOption): void => {\n    onChange({\n      ...value,\n      position: currentPosition,\n      size: newValue.id,\n    });\n  };\n\n  const handleLegendValueChange = (_: unknown, newValue: LegendValueOption[]): void => {\n    onChange({\n      ...value,\n      position: currentPosition,\n      values: newValue.map((value) => {\n        return value.id;\n      }),\n    });\n  };\n\n  const isValidLegend = validateLegendSpec(value);\n  const currentPosition = getLegendPosition(value?.position);\n  const legendPositionConfig = LEGEND_POSITIONS_CONFIG[currentPosition];\n\n  const currentMode = getLegendMode(value?.mode);\n\n  const currentSize = getLegendSize(value?.size);\n  const legendSizeConfig = LEGEND_SIZE_CONFIG[currentSize];\n\n  const legendValuesConfig = useMemo(() => {\n    const currentValues = value?.values;\n    if (!currentValues?.length) return [];\n\n    if (calculation === 'aggregation') {\n      return currentValues.reduce((result, item) => {\n        const config = LEGEND_VALUE_CONFIG[item as LegendValue];\n        if (config) {\n          result.push({ ...config, id: item });\n        }\n        return result;\n      }, [] as LegendValueOption[]);\n    }\n\n    return currentValues.map((id) => {\n      const { label, description } = comparisonLegends[id as ComparisonValues];\n      return {\n        id,\n        label,\n        description,\n      };\n    });\n  }, [calculation, value?.values]);\n\n  const valueOptions = useMemo(() => {\n    if (calculation === 'aggregation') {\n      return Object.entries(LEGEND_VALUE_CONFIG || {}).map(([id, config]) => {\n        return {\n          id: id as LegendValue,\n          ...config,\n        };\n      });\n    }\n\n    return Object.entries(comparisonLegends).map(([id, config]) => ({\n      id: id as ComparisonValues,\n      ...config,\n    }));\n  }, [calculation]);\n\n  return (\n    <OptionsEditorGroup title=\"Legend\">\n      {!isValidLegend && <ErrorAlert error={{ name: 'invalid-legend', message: 'Invalid legend spec' }} />}\n      <OptionsEditorControl label=\"Show\" control={<Switch checked={!!value} onChange={handleLegendShowChange} />} />\n      {value && (\n        <>\n          <OptionsEditorControl\n            label=\"Position\"\n            control={\n              <SettingsAutocomplete\n                value={{\n                  ...legendPositionConfig,\n                  id: currentPosition,\n                }}\n                options={POSITION_OPTIONS}\n                onChange={handleLegendPositionChange}\n                disableClearable\n              />\n            }\n          />\n          <OptionsEditorControl\n            label=\"Mode\"\n            control={\n              <ToggleButtonGroup\n                color=\"primary\"\n                exclusive\n                value={currentMode}\n                aria-label=\"Mode\"\n                onChange={(__, newValue) => {\n                  onChange({\n                    ...value,\n                    position: currentPosition,\n                    mode: newValue,\n                  });\n                }}\n              >\n                {Object.entries(LEGEND_MODE_CONFIG).map(([modeId, config]) => (\n                  <ToggleButton\n                    key={modeId}\n                    value={modeId}\n                    selected={currentMode === modeId}\n                    aria-label={`display ${modeId} mode`}\n                  >\n                    {config.label}\n                  </ToggleButton>\n                ))}\n              </ToggleButtonGroup>\n            }\n          />\n          {currentMode === 'table' && (\n            <>\n              <OptionsEditorControl\n                label=\"Size\"\n                control={\n                  <SettingsAutocomplete\n                    value={{\n                      ...legendSizeConfig,\n                      id: currentSize,\n                    }}\n                    options={SIZE_OPTIONS}\n                    onChange={handleLegendSizeChange}\n                    // TODO: enable sizes for list mode when we normalize the layout of\n                    // lists to more closely match tables.\n                    disableClearable\n                  />\n                }\n              />\n              {showValuesEditor && (\n                <OptionsEditorControl\n                  label=\"Values\"\n                  control={\n                    // For some reason, the inferred option type doesn't always seem to work\n                    // quite right when `multiple` is true. Explicitly setting the generics\n                    // to work around this.\n                    <SettingsAutocomplete<LegendValueOption, true, true>\n                      multiple={true}\n                      disableCloseOnSelect\n                      disableClearable\n                      value={legendValuesConfig}\n                      options={valueOptions}\n                      onChange={handleLegendValueChange}\n                      limitTags={1}\n                      ChipProps={{\n                        size: 'small',\n                      }}\n                    />\n                  }\n                />\n              )}\n            </>\n          )}\n        </>\n      )}\n    </OptionsEditorGroup>\n  );\n}\n"],"names":["Switch","ToggleButtonGroup","ToggleButton","ErrorAlert","OptionsEditorControl","OptionsEditorGroup","SettingsAutocomplete","DEFAULT_LEGEND","getLegendSize","getLegendMode","getLegendPosition","useMemo","LEGEND_MODE_CONFIG","LEGEND_POSITIONS_CONFIG","validateLegendSpec","LEGEND_VALUE_CONFIG","LEGEND_SIZE_CONFIG","comparisonLegends","POSITION_OPTIONS","Object","entries","map","id","config","SIZE_OPTIONS","LegendOptionsEditor","value","onChange","showValuesEditor","calculation","handleLegendShowChange","_","checked","legendValue","position","undefined","handleLegendPositionChange","newValue","handleLegendSizeChange","currentPosition","size","handleLegendValueChange","values","isValidLegend","legendPositionConfig","currentMode","mode","currentSize","legendSizeConfig","legendValuesConfig","currentValues","length","reduce","result","item","push","label","description","valueOptions","title","error","name","message","control","options","disableClearable","color","exclusive","aria-label","__","modeId","selected","multiple","disableCloseOnSelect","limitTags","ChipProps"],"mappings":"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"}

package/dist/components/MetricLabelInput/MetricLabelInput.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 // Copyright The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
@@ -10,7 +11,6 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { jsx as _jsx } from "react/jsx-runtime";
 import { TextField } from '@mui/material';
 import { OptionsEditorControl } from '@perses-dev/components';
 export const MetricLabelInput = ({ value, onChange })=>{

package/dist/components/MetricLabelInput/MetricLabelInput.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/MetricLabelInput/MetricLabelInput.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { TextField } from '@mui/material';\nimport { OptionsEditorControl } from '@perses-dev/components';\nimport { FC } from 'react';\n\nexport interface MetricLabelInputProps {\n  value?: string;\n  onChange: (metricLabel?: string) => void;\n}\n\nexport const MetricLabelInput: FC<MetricLabelInputProps> = ({ value, onChange }) => {\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\n    const newValue = event.target.value;\n    onChange(newValue || undefined);\n  };\n\n  return (\n    <OptionsEditorControl\n      label=\"Metric label\"\n      description=\"Specify label to display\"\n      control={<TextField fullWidth name=\"Metric label\" value={value || ''} onChange={handleChange} />}\n    />\n  );\n};\n"],"names":["TextField","OptionsEditorControl","MetricLabelInput","value","onChange","handleChange","event","newValue","target","undefined","label","description","control","fullWidth","name"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,SAAS,QAAQ,gBAAgB;AAC1C,SAASC,oBAAoB,QAAQ,yBAAyB;AAQ9D,OAAO,MAAMC,mBAA8C,CAAC,EAAEC,KAAK,EAAEC,QAAQ,EAAE;IAC7E,MAAMC,eAAe,CAACC;QACpB,MAAMC,WAAWD,MAAME,MAAM,CAACL,KAAK;QACnCC,SAASG,YAAYE;IACvB;IAEA,qBACE,KAACR;QACCS,OAAM;QACNC,aAAY;QACZC,uBAAS,KAACZ;YAAUa,SAAS;YAACC,MAAK;YAAeX,OAAOA,SAAS;YAAIC,UAAUC;;;AAGtF,EAAE"}
+{"version":3,"sources":["../../../src/components/MetricLabelInput/MetricLabelInput.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { TextField } from '@mui/material';\nimport { OptionsEditorControl } from '@perses-dev/components';\nimport { FC } from 'react';\n\nexport interface MetricLabelInputProps {\n  value?: string;\n  onChange: (metricLabel?: string) => void;\n}\n\nexport const MetricLabelInput: FC<MetricLabelInputProps> = ({ value, onChange }) => {\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\n    const newValue = event.target.value;\n    onChange(newValue || undefined);\n  };\n\n  return (\n    <OptionsEditorControl\n      label=\"Metric label\"\n      description=\"Specify label to display\"\n      control={<TextField fullWidth name=\"Metric label\" value={value || ''} onChange={handleChange} />}\n    />\n  );\n};\n"],"names":["TextField","OptionsEditorControl","MetricLabelInput","value","onChange","handleChange","event","newValue","target","undefined","label","description","control","fullWidth","name"],"mappings":";AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,SAAS,QAAQ,gBAAgB;AAC1C,SAASC,oBAAoB,QAAQ,yBAAyB;AAQ9D,OAAO,MAAMC,mBAA8C,CAAC,EAAEC,KAAK,EAAEC,QAAQ,EAAE;IAC7E,MAAMC,eAAe,CAACC;QACpB,MAAMC,WAAWD,MAAME,MAAM,CAACL,KAAK;QACnCC,SAASG,YAAYE;IACvB;IAEA,qBACE,KAACR;QACCS,OAAM;QACNC,aAAY;QACZC,uBAAS,KAACZ;YAAUa,SAAS;YAACC,MAAK;YAAeX,OAAOA,SAAS;YAAIC,UAAUC;;;AAGtF,EAAE"}

package/dist/components/MultiQueryEditor/MultiQueryEditor.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { QueryDefinition, QueryPluginType } from '@perses-dev/core';
+import { QueryDefinition, QueryPluginType } from '@perses-dev/spec';
 import { QueryData } from '../../runtime';
 import { PluginEditorRef } from '../PluginEditor';
 export interface MultiQueryEditorProps {

package/dist/components/MultiQueryEditor/MultiQueryEditor.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 // Copyright The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
@@ -10,7 +11,6 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { forwardRef, useState } from 'react';
 import { produce } from 'immer';
 import { Button, Stack } from '@mui/material';

package/dist/components/MultiQueryEditor/MultiQueryEditor.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/MultiQueryEditor/MultiQueryEditor.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { forwardRef, ReactElement, useState } from 'react';\nimport { produce } from 'immer';\nimport { Button, Stack } from '@mui/material';\nimport AddIcon from 'mdi-material-ui/Plus';\nimport { QueryDefinition, QueryPluginType } from '@perses-dev/core';\nimport { QueryData, useListPluginMetadata, usePlugin, usePluginRegistry } from '../../runtime';\nimport { PluginEditorRef } from '../PluginEditor';\nimport { QueryEditorContainer } from './QueryEditorContainer';\n\nexport interface MultiQueryEditorProps {\n  queryTypes: QueryPluginType[];\n  filteredQueryPlugins?: string[];\n  queries?: QueryDefinition[];\n  queryResults?: QueryData[];\n  onChange: (queries: QueryDefinition[]) => void;\n  onQueryRun: (index: number, query: QueryDefinition) => void;\n}\n\nfunction useDefaultQueryDefinition(\n  queryTypes: QueryPluginType[],\n  filteredQueryPlugins?: string[]\n): {\n  defaultInitialQueryDefinition: QueryDefinition;\n  isLoading: boolean;\n} {\n  // Build the default query plugin\n  // This will be used only if the queries are empty, to open a starting query\n\n  // Firs the default query type\n  const defaultQueryType = queryTypes[0]!;\n  // Then the default plugin kind\n  // Use as default the plugin kind explicitly set as default or the first in the list\n  const { data: queryPlugins, isLoading } = useListPluginMetadata(queryTypes);\n  const { defaultPluginKinds } = usePluginRegistry();\n\n  let defaultQueryKind: string = '';\n\n  if (filteredQueryPlugins?.length) {\n    defaultQueryKind = queryPlugins?.find((i) => filteredQueryPlugins.includes(i.spec.name))!.spec.name ?? '';\n  } else {\n    defaultQueryKind = defaultPluginKinds?.[defaultQueryType] ?? queryPlugins?.[0]?.spec.name ?? '';\n  }\n\n  const { data: defaultQueryPlugin } = usePlugin(defaultQueryType, defaultQueryKind, {\n    useErrorBoundary: true,\n    enabled: true,\n  });\n\n  // This default query definition is used if no query is provided initially or when we add a new query\n  return {\n    defaultInitialQueryDefinition: {\n      kind: defaultQueryType,\n      spec: {\n        plugin: { kind: defaultQueryKind, spec: defaultQueryPlugin?.createInitialOptions() || {} },\n      },\n    },\n    isLoading,\n  };\n}\n\n/**\n * A component render a list of {@link QueryEditorContainer} for the given query definitions.\n * It allows adding, removing and editing queries.\n * @param queryTypes The list of query types that the underlying editor will propose\n * @param queries The list of query definitions to render\n * @param onChange The callback to call when the queries are modified\n * @constructor\n */\n\nexport const MultiQueryEditor = forwardRef<PluginEditorRef, MultiQueryEditorProps>((props, ref): ReactElement => {\n  const { queryTypes, queries = [], queryResults, filteredQueryPlugins, onChange, onQueryRun } = props;\n  const { defaultInitialQueryDefinition, isLoading } = useDefaultQueryDefinition(queryTypes, filteredQueryPlugins);\n  // State for which queries are collapsed\n  const [queriesCollapsed, setQueriesCollapsed] = useState(queries.map(() => false));\n\n  // Query handlers\n  const handleQueryChange = (index: number, queryDef: QueryDefinition): void => {\n    onChange(\n      produce(queries, (draft) => {\n        if (draft) {\n          draft[index] = queryDef;\n        } else {\n          draft = [queryDef];\n        }\n      })\n    );\n  };\n\n  const handleQueryRun = (index: number, queryDef: QueryDefinition): void => {\n    onQueryRun(index, queryDef);\n  };\n\n  const handleQueryAdd = (): void => {\n    onChange(\n      produce(queries, (draft) => {\n        if (draft) {\n          draft.push(defaultInitialQueryDefinition);\n        } else {\n          draft = [...queries, defaultInitialQueryDefinition];\n        }\n      })\n    );\n    setQueriesCollapsed((queriesCollapsed) => {\n      queriesCollapsed.push(false);\n      return [...queriesCollapsed];\n    });\n  };\n\n  const handleQueryDelete = (index: number): void => {\n    onChange(\n      produce(queries, (draft) => {\n        draft.splice(index, 1);\n      })\n    );\n    setQueriesCollapsed((queriesCollapsed) => {\n      queriesCollapsed.splice(index, 1);\n      return [...queriesCollapsed];\n    });\n  };\n\n  const handleQueryCollapseExpand = (index: number): void => {\n    setQueriesCollapsed((queriesCollapsed) => {\n      queriesCollapsed[index] = !queriesCollapsed[index];\n      return [...queriesCollapsed];\n    });\n  };\n\n  // show one query input if queries is empty\n  const queryDefinitions: QueryDefinition[] = queries.length\n    ? queries\n    : !isLoading\n      ? [defaultInitialQueryDefinition]\n      : [];\n\n  return (\n    <>\n      <Stack spacing={1}>\n        {queryDefinitions.map((query: QueryDefinition, i: number) => (\n          <QueryEditorContainer\n            ref={ref}\n            queryTypes={queryTypes}\n            key={i}\n            index={i}\n            query={query}\n            queryResult={queryResults?.[i]}\n            filteredQueryPlugins={filteredQueryPlugins}\n            isCollapsed={!!queriesCollapsed[i]}\n            onChange={handleQueryChange}\n            onQueryRun={handleQueryRun}\n            onDelete={queries.length > 1 ? handleQueryDelete : undefined}\n            onCollapseExpand={handleQueryCollapseExpand}\n          />\n        ))}\n      </Stack>\n      <Button variant=\"contained\" startIcon={<AddIcon />} sx={{ marginTop: 1 }} onClick={handleQueryAdd}>\n        Add Query\n      </Button>\n    </>\n  );\n});\n\nMultiQueryEditor.displayName = 'MultiQueryEditor';\n"],"names":["forwardRef","useState","produce","Button","Stack","AddIcon","useListPluginMetadata","usePlugin","usePluginRegistry","QueryEditorContainer","useDefaultQueryDefinition","queryTypes","filteredQueryPlugins","defaultQueryType","data","queryPlugins","isLoading","defaultPluginKinds","defaultQueryKind","length","find","i","includes","spec","name","defaultQueryPlugin","useErrorBoundary","enabled","defaultInitialQueryDefinition","kind","plugin","createInitialOptions","MultiQueryEditor","props","ref","queries","queryResults","onChange","onQueryRun","queriesCollapsed","setQueriesCollapsed","map","handleQueryChange","index","queryDef","draft","handleQueryRun","handleQueryAdd","push","handleQueryDelete","splice","handleQueryCollapseExpand","queryDefinitions","spacing","query","queryResult","isCollapsed","onDelete","undefined","onCollapseExpand","variant","startIcon","sx","marginTop","onClick","displayName"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/MultiQueryEditor/MultiQueryEditor.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { forwardRef, ReactElement, useState } from 'react';\nimport { produce } from 'immer';\nimport { Button, Stack } from '@mui/material';\nimport AddIcon from 'mdi-material-ui/Plus';\nimport { QueryDefinition, QueryPluginType } from '@perses-dev/spec';\nimport { QueryData, useListPluginMetadata, usePlugin, usePluginRegistry } from '../../runtime';\nimport { PluginEditorRef } from '../PluginEditor';\nimport { QueryEditorContainer } from './QueryEditorContainer';\n\nexport interface MultiQueryEditorProps {\n  queryTypes: QueryPluginType[];\n  filteredQueryPlugins?: string[];\n  queries?: QueryDefinition[];\n  queryResults?: QueryData[];\n  onChange: (queries: QueryDefinition[]) => void;\n  onQueryRun: (index: number, query: QueryDefinition) => void;\n}\n\nfunction useDefaultQueryDefinition(\n  queryTypes: QueryPluginType[],\n  filteredQueryPlugins?: string[]\n): {\n  defaultInitialQueryDefinition: QueryDefinition;\n  isLoading: boolean;\n} {\n  // Build the default query plugin\n  // This will be used only if the queries are empty, to open a starting query\n\n  // Firs the default query type\n  const defaultQueryType = queryTypes[0]!;\n  // Then the default plugin kind\n  // Use as default the plugin kind explicitly set as default or the first in the list\n  const { data: queryPlugins, isLoading } = useListPluginMetadata(queryTypes);\n  const { defaultPluginKinds } = usePluginRegistry();\n\n  let defaultQueryKind: string = '';\n\n  if (filteredQueryPlugins?.length) {\n    defaultQueryKind = queryPlugins?.find((i) => filteredQueryPlugins.includes(i.spec.name))!.spec.name ?? '';\n  } else {\n    defaultQueryKind = defaultPluginKinds?.[defaultQueryType] ?? queryPlugins?.[0]?.spec.name ?? '';\n  }\n\n  const { data: defaultQueryPlugin } = usePlugin(defaultQueryType, defaultQueryKind, {\n    useErrorBoundary: true,\n    enabled: true,\n  });\n\n  // This default query definition is used if no query is provided initially or when we add a new query\n  return {\n    defaultInitialQueryDefinition: {\n      kind: defaultQueryType,\n      spec: {\n        plugin: { kind: defaultQueryKind, spec: defaultQueryPlugin?.createInitialOptions() || {} },\n      },\n    },\n    isLoading,\n  };\n}\n\n/**\n * A component render a list of {@link QueryEditorContainer} for the given query definitions.\n * It allows adding, removing and editing queries.\n * @param queryTypes The list of query types that the underlying editor will propose\n * @param queries The list of query definitions to render\n * @param onChange The callback to call when the queries are modified\n * @constructor\n */\n\nexport const MultiQueryEditor = forwardRef<PluginEditorRef, MultiQueryEditorProps>((props, ref): ReactElement => {\n  const { queryTypes, queries = [], queryResults, filteredQueryPlugins, onChange, onQueryRun } = props;\n  const { defaultInitialQueryDefinition, isLoading } = useDefaultQueryDefinition(queryTypes, filteredQueryPlugins);\n  // State for which queries are collapsed\n  const [queriesCollapsed, setQueriesCollapsed] = useState(queries.map(() => false));\n\n  // Query handlers\n  const handleQueryChange = (index: number, queryDef: QueryDefinition): void => {\n    onChange(\n      produce(queries, (draft) => {\n        if (draft) {\n          draft[index] = queryDef;\n        } else {\n          draft = [queryDef];\n        }\n      })\n    );\n  };\n\n  const handleQueryRun = (index: number, queryDef: QueryDefinition): void => {\n    onQueryRun(index, queryDef);\n  };\n\n  const handleQueryAdd = (): void => {\n    onChange(\n      produce(queries, (draft) => {\n        if (draft) {\n          draft.push(defaultInitialQueryDefinition);\n        } else {\n          draft = [...queries, defaultInitialQueryDefinition];\n        }\n      })\n    );\n    setQueriesCollapsed((queriesCollapsed) => {\n      queriesCollapsed.push(false);\n      return [...queriesCollapsed];\n    });\n  };\n\n  const handleQueryDelete = (index: number): void => {\n    onChange(\n      produce(queries, (draft) => {\n        draft.splice(index, 1);\n      })\n    );\n    setQueriesCollapsed((queriesCollapsed) => {\n      queriesCollapsed.splice(index, 1);\n      return [...queriesCollapsed];\n    });\n  };\n\n  const handleQueryCollapseExpand = (index: number): void => {\n    setQueriesCollapsed((queriesCollapsed) => {\n      queriesCollapsed[index] = !queriesCollapsed[index];\n      return [...queriesCollapsed];\n    });\n  };\n\n  // show one query input if queries is empty\n  const queryDefinitions: QueryDefinition[] = queries.length\n    ? queries\n    : !isLoading\n      ? [defaultInitialQueryDefinition]\n      : [];\n\n  return (\n    <>\n      <Stack spacing={1}>\n        {queryDefinitions.map((query: QueryDefinition, i: number) => (\n          <QueryEditorContainer\n            ref={ref}\n            queryTypes={queryTypes}\n            key={i}\n            index={i}\n            query={query}\n            queryResult={queryResults?.[i]}\n            filteredQueryPlugins={filteredQueryPlugins}\n            isCollapsed={!!queriesCollapsed[i]}\n            onChange={handleQueryChange}\n            onQueryRun={handleQueryRun}\n            onDelete={queries.length > 1 ? handleQueryDelete : undefined}\n            onCollapseExpand={handleQueryCollapseExpand}\n          />\n        ))}\n      </Stack>\n      <Button variant=\"contained\" startIcon={<AddIcon />} sx={{ marginTop: 1 }} onClick={handleQueryAdd}>\n        Add Query\n      </Button>\n    </>\n  );\n});\n\nMultiQueryEditor.displayName = 'MultiQueryEditor';\n"],"names":["forwardRef","useState","produce","Button","Stack","AddIcon","useListPluginMetadata","usePlugin","usePluginRegistry","QueryEditorContainer","useDefaultQueryDefinition","queryTypes","filteredQueryPlugins","defaultQueryType","data","queryPlugins","isLoading","defaultPluginKinds","defaultQueryKind","length","find","i","includes","spec","name","defaultQueryPlugin","useErrorBoundary","enabled","defaultInitialQueryDefinition","kind","plugin","createInitialOptions","MultiQueryEditor","props","ref","queries","queryResults","onChange","onQueryRun","queriesCollapsed","setQueriesCollapsed","map","handleQueryChange","index","queryDef","draft","handleQueryRun","handleQueryAdd","push","handleQueryDelete","splice","handleQueryCollapseExpand","queryDefinitions","spacing","query","queryResult","isCollapsed","onDelete","undefined","onCollapseExpand","variant","startIcon","sx","marginTop","onClick","displayName"],"mappings":"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"}

package/dist/components/MultiQueryEditor/QueryEditorContainer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"QueryEditorContainer.d.ts","sourceRoot":"","sources":["../../../src/components/MultiQueryEditor/QueryEditorContainer.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAQpE,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1C,OAAO,EAAmC,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAEnF;;GAEG;AACH,UAAU,yBAAyB;IACjC,UAAU,EAAE,eAAe,EAAE,CAAC;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,eAAe,CAAC;IACvB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,oBAAoB,CAAC,EAAE,MAAM,EAAE,CAAC;IAChC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;IAC1D,UAAU,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;IAC5D,gBAAgB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAED;;;;;;;;;;;GAWG;AAEH,eAAO,MAAM,oBAAoB,uHAqFhC,CAAC"}
+{"version":3,"file":"QueryEditorContainer.d.ts","sourceRoot":"","sources":["../../../src/components/MultiQueryEditor/QueryEditorContainer.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAoBpE,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1C,OAAO,EAAmC,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAGnF;;GAEG;AACH,UAAU,yBAAyB;IACjC,UAAU,EAAE,eAAe,EAAE,CAAC;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,eAAe,CAAC;IACvB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,oBAAoB,CAAC,EAAE,MAAM,EAAE,CAAC;IAChC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;IAC1D,UAAU,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;IAC5D,gBAAgB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAED;;;;;;;;;;;GAWG;AAEH,eAAO,MAAM,oBAAoB,uHAyIhC,CAAC"}

package/dist/components/MultiQueryEditor/QueryEditorContainer.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Copyright The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
@@ -10,16 +11,19 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { produce } from 'immer';
-import { Stack, IconButton, Typography, Box, CircularProgress } from '@mui/material';
+import { Stack, IconButton, Typography, Box, CircularProgress, TextField, InputAdornment } from '@mui/material';
 import DeleteIcon from 'mdi-material-ui/DeleteOutline';
 import ChevronDown from 'mdi-material-ui/ChevronDown';
 import ChevronRight from 'mdi-material-ui/ChevronRight';
-import { forwardRef } from 'react';
+import { forwardRef, useState } from 'react';
 import AlertIcon from 'mdi-material-ui/Alert';
 import { InfoTooltip } from '@perses-dev/components';
+import PencilIcon from 'mdi-material-ui/Pencil';
+import CheckIcon from 'mdi-material-ui/Check';
+import CloseIcon from 'mdi-material-ui/Close';
 import { PluginEditor } from '../PluginEditor';
+import { defaultQueryName } from './utils';
 /**
  * Container for a query editor. This component is responsible for rendering the query editor, and make it collapsible
  * to not take too much space.
@@ -33,6 +37,16 @@ import { PluginEditor } from '../PluginEditor';
  * @constructor
  */ export const QueryEditorContainer = /*#__PURE__*/ forwardRef((props, ref)=>{
     const { queryTypes, index, query, queryResult, filteredQueryPlugins, isCollapsed, onDelete, onChange, onQueryRun, onCollapseExpand } = props;
+    // The displayed name is always derived from props so it stays in sync with the
+    // current query/index, even when queries are added, removed or reordered.
+    const displayedName = query.spec.name ?? defaultQueryName(index);
+    const [isEditingName, setIsEditingName] = useState(false);
+    function handleNameSave(name) {
+        setIsEditingName(false);
+        onChange(index, produce(query, (draft)=>{
+            draft.spec.name = name;
+        }));
+    }
     return /*#__PURE__*/ _jsxs(Stack, {
         spacing: 1,
         children: [
@@ -45,19 +59,40 @@ import { PluginEditor } from '../PluginEditor';
                 children: [
                     /*#__PURE__*/ _jsxs(Stack, {
                         direction: "row",
+                        gap: 1,
+                        sx: {
+                            width: '100%'
+                        },
                         children: [
                             /*#__PURE__*/ _jsx(IconButton, {
                                 size: "small",
+                                sx: {
+                                    width: 'fit-content',
+                                    height: 'fit-content'
+                                },
                                 onClick: ()=>onCollapseExpand(index),
                                 children: isCollapsed ? /*#__PURE__*/ _jsx(ChevronRight, {}) : /*#__PURE__*/ _jsx(ChevronDown, {})
                             }),
-                            /*#__PURE__*/ _jsxs(Typography, {
-                                variant: "overline",
-                                component: "h4",
-                                children: [
-                                    "Query #",
-                                    index + 1
-                                ]
+                            /*#__PURE__*/ _jsx(Stack, {
+                                direction: "row",
+                                gap: 1,
+                                alignItems: "center",
+                                alignContent: "center",
+                                sx: {
+                                    width: '100%',
+                                    '&:hover button': {
+                                        visibility: 'visible'
+                                    }
+                                },
+                                children: isEditingName ? /*#__PURE__*/ _jsx(QueryNameInput, {
+                                    initialName: displayedName,
+                                    onSave: handleNameSave,
+                                    onCancel: ()=>setIsEditingName(false)
+                                }, displayedName) : /*#__PURE__*/ _jsx(Typography, {
+                                    variant: "overline",
+                                    component: "h4",
+                                    children: displayedName
+                                })
                             })
                         ]
                     }),
@@ -101,11 +136,24 @@ import { PluginEditor } from '../PluginEditor';
                                     ]
                                 })
                             }),
-                            onDelete && /*#__PURE__*/ _jsx(IconButton, {
-                                "aria-label": "delete query",
-                                size: "small",
-                                onClick: ()=>onDelete && onDelete(index),
-                                children: /*#__PURE__*/ _jsx(DeleteIcon, {})
+                            /*#__PURE__*/ _jsxs(Stack, {
+                                direction: "row",
+                                children: [
+                                    !isEditingName && /*#__PURE__*/ _jsx(IconButton, {
+                                        "aria-label": "edit query name",
+                                        size: "small",
+                                        onClick: ()=>setIsEditingName(true),
+                                        children: /*#__PURE__*/ _jsx(PencilIcon, {
+                                            fontSize: "small"
+                                        })
+                                    }),
+                                    onDelete && /*#__PURE__*/ _jsx(IconButton, {
+                                        "aria-label": "delete query",
+                                        size: "small",
+                                        onClick: ()=>onDelete && onDelete(index),
+                                        children: /*#__PURE__*/ _jsx(DeleteIcon, {})
+                                    })
+                                ]
                             })
                         ]
                     })
@@ -123,6 +171,43 @@ import { PluginEditor } from '../PluginEditor';
     }, index);
 });
 QueryEditorContainer.displayName = 'QueryEditorContainer';
+/**
+ * Self-contained input to edit a query name. The draft value is local state seeded from
+ * `initialName`; callers reset it by changing the `key` (remounting) rather than syncing
+ * with an useEffect.
+ */ function QueryNameInput({ initialName, onSave, onCancel }) {
+    const [draftName, setDraftName] = useState(initialName);
+    return /*#__PURE__*/ _jsx(TextField, {
+        size: "small",
+        variant: "outlined",
+        label: "Query name",
+        "aria-label": "query name",
+        value: draftName,
+        onChange: (e)=>setDraftName(e.target.value),
+        fullWidth: true,
+        InputProps: {
+            endAdornment: /*#__PURE__*/ _jsxs(InputAdornment, {
+                position: "end",
+                children: [
+                    /*#__PURE__*/ _jsx(IconButton, {
+                        size: "small",
+                        "aria-label": "cancel edit",
+                        onClick: onCancel,
+                        edge: "end",
+                        children: /*#__PURE__*/ _jsx(CloseIcon, {})
+                    }),
+                    /*#__PURE__*/ _jsx(IconButton, {
+                        size: "small",
+                        "aria-label": "save query name",
+                        onClick: ()=>onSave(draftName),
+                        edge: "end",
+                        children: /*#__PURE__*/ _jsx(CheckIcon, {})
+                    })
+                ]
+            })
+        }
+    });
+}
 /**
  * Editor for a query definition. This component is responsible for rendering the plugin editor for the given query.
  * This will allow user to select a plugin extending from the given supported query types, and then edit the plugin

package/dist/components/MultiQueryEditor/QueryEditorContainer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/MultiQueryEditor/QueryEditorContainer.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { produce } from 'immer';\nimport { QueryDefinition, QueryPluginType } from '@perses-dev/spec';\nimport { Stack, IconButton, Typography, BoxProps, Box, CircularProgress } from '@mui/material';\nimport DeleteIcon from 'mdi-material-ui/DeleteOutline';\nimport ChevronDown from 'mdi-material-ui/ChevronDown';\nimport ChevronRight from 'mdi-material-ui/ChevronRight';\nimport { forwardRef, ReactElement } from 'react';\nimport AlertIcon from 'mdi-material-ui/Alert';\nimport { InfoTooltip } from '@perses-dev/components';\nimport { QueryData } from '../../runtime';\nimport { PluginEditor, PluginEditorProps, PluginEditorRef } from '../PluginEditor';\n\n/**\n * Properties for {@link QueryEditorContainer}\n */\ninterface QueryEditorContainerProps {\n  queryTypes: QueryPluginType[];\n  index: number;\n  query: QueryDefinition;\n  queryResult?: QueryData;\n  filteredQueryPlugins?: string[];\n  onChange: (index: number, query: QueryDefinition) => void;\n  onQueryRun: (index: number, query: QueryDefinition) => void;\n  onCollapseExpand: (index: number) => void;\n  isCollapsed?: boolean;\n  onDelete?: (index: number) => void;\n}\n\n/**\n * Container for a query editor. This component is responsible for rendering the query editor, and make it collapsible\n * to not take too much space.\n * @param queryTypes the supported query types\n * @param index the index of the query in the list\n * @param query the query definition\n * @param isCollapsed whether the query editor is collapsed or not\n * @param onDelete callback when the query is deleted\n * @param onChange callback when the query is changed\n * @param onCollapseExpand callback when the query is collapsed or expanded\n * @constructor\n */\n\nexport const QueryEditorContainer = forwardRef<PluginEditorRef, QueryEditorContainerProps>(\n  (props, ref): ReactElement => {\n    const {\n      queryTypes,\n      index,\n      query,\n      queryResult,\n      filteredQueryPlugins,\n      isCollapsed,\n      onDelete,\n      onChange,\n      onQueryRun,\n      onCollapseExpand,\n    } = props;\n    return (\n      <Stack key={index} spacing={1}>\n        <Stack\n          direction=\"row\"\n          alignItems=\"center\"\n          justifyContent=\"space-between\"\n          borderBottom={1}\n          borderColor={(theme) => theme.palette.divider}\n        >\n          <Stack direction=\"row\">\n            <IconButton size=\"small\" onClick={() => onCollapseExpand(index)}>\n              {isCollapsed ? <ChevronRight /> : <ChevronDown />}\n            </IconButton>\n            <Typography variant=\"overline\" component=\"h4\">\n              Query #{index + 1}\n            </Typography>\n          </Stack>\n          <Stack direction=\"row\" alignItems=\"center\">\n            {queryResult?.isFetching && <CircularProgress aria-label=\"loading\" size=\"1.125rem\" />}\n            {queryResult?.error && (\n              <InfoTooltip description={queryResult.error.message}>\n                <Stack\n                  direction=\"row\"\n                  alignItems=\"center\"\n                  sx={{\n                    color: (theme) => theme.palette.error.main,\n                  }}\n                >\n                  <IconButton\n                    aria-label=\"query error\"\n                    size=\"small\"\n                    sx={{\n                      color: (theme) => theme.palette.error.main,\n                    }}\n                  >\n                    <AlertIcon />\n                  </IconButton>\n                  <Typography\n                    sx={{\n                      maxWidth: 300,\n                      whiteSpace: 'nowrap',\n                      overflow: 'hidden',\n                      textOverflow: 'ellipsis',\n                      '&:hover ::after': { content: '\"Click to copy\"' },\n                    }}\n                  >\n                    {queryResult.error.message}\n                  </Typography>\n                </Stack>\n              </InfoTooltip>\n            )}\n            {onDelete && (\n              <IconButton aria-label=\"delete query\" size=\"small\" onClick={() => onDelete && onDelete(index)}>\n                <DeleteIcon />\n              </IconButton>\n            )}\n          </Stack>\n        </Stack>\n        {!isCollapsed && (\n          <QueryEditor\n            ref={ref}\n            queryTypes={queryTypes}\n            value={query}\n            filteredQueryPlugins={filteredQueryPlugins}\n            onChange={(next) => onChange(index, next)}\n            onQueryRun={() => onQueryRun(index, query)}\n          />\n        )}\n      </Stack>\n    );\n  }\n);\n\nQueryEditorContainer.displayName = 'QueryEditorContainer';\n\n// Props on MUI Box that we don't want people to pass because we're either redefining them or providing them in\n// this component\ntype OmittedMuiProps = 'children' | 'value' | 'onChange';\ninterface QueryEditorProps extends Omit<BoxProps, OmittedMuiProps> {\n  queryTypes: QueryPluginType[];\n  value: QueryDefinition;\n  filteredQueryPlugins?: string[];\n  onChange: (next: QueryDefinition) => void;\n  onQueryRun: () => void;\n}\n\n/**\n * Editor for a query definition. This component is responsible for rendering the plugin editor for the given query.\n * This will allow user to select a plugin extending from the given supported query types, and then edit the plugin\n * spec for this plugin.\n * @param props\n * @constructor\n */\n\nconst QueryEditor = forwardRef<PluginEditorRef, QueryEditorProps>((props, ref): ReactElement => {\n  const { queryTypes, value, filteredQueryPlugins, onChange, onQueryRun, ...others } = props;\n\n  const handlePluginChange: PluginEditorProps['onChange'] = (next) => {\n    onChange(\n      produce(value, (draft) => {\n        draft.kind = next.selection.type;\n        draft.spec.plugin.kind = next.selection.kind;\n        draft.spec.plugin.spec = next.spec;\n      })\n    );\n  };\n\n  return (\n    <Box {...others}>\n      <PluginEditor\n        ref={ref}\n        pluginTypes={queryTypes}\n        pluginKindLabel=\"Query Type\"\n        value={{\n          selection: {\n            kind: value.spec.plugin.kind,\n            type: value.kind,\n          },\n          spec: value.spec.plugin.spec,\n        }}\n        filteredQueryPlugins={filteredQueryPlugins}\n        withRunQueryButton\n        onRunQuery={onQueryRun}\n        onChange={handlePluginChange}\n      />\n    </Box>\n  );\n});\n\nQueryEditor.displayName = 'QueryEditor';\n"],"names":["produce","Stack","IconButton","Typography","Box","CircularProgress","DeleteIcon","ChevronDown","ChevronRight","forwardRef","AlertIcon","InfoTooltip","PluginEditor","QueryEditorContainer","props","ref","queryTypes","index","query","queryResult","filteredQueryPlugins","isCollapsed","onDelete","onChange","onQueryRun","onCollapseExpand","spacing","direction","alignItems","justifyContent","borderBottom","borderColor","theme","palette","divider","size","onClick","variant","component","isFetching","aria-label","error","description","message","sx","color","main","maxWidth","whiteSpace","overflow","textOverflow","content","QueryEditor","value","next","displayName","others","handlePluginChange","draft","kind","selection","type","spec","plugin","pluginTypes","pluginKindLabel","withRunQueryButton","onRunQuery"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,OAAO,QAAQ,QAAQ;AAEhC,SAASC,KAAK,EAAEC,UAAU,EAAEC,UAAU,EAAYC,GAAG,EAAEC,gBAAgB,QAAQ,gBAAgB;AAC/F,OAAOC,gBAAgB,gCAAgC;AACvD,OAAOC,iBAAiB,8BAA8B;AACtD,OAAOC,kBAAkB,+BAA+B;AACxD,SAASC,UAAU,QAAsB,QAAQ;AACjD,OAAOC,eAAe,wBAAwB;AAC9C,SAASC,WAAW,QAAQ,yBAAyB;AAErD,SAASC,YAAY,QAA4C,kBAAkB;AAkBnF;;;;;;;;;;;CAWC,GAED,OAAO,MAAMC,qCAAuBJ,WAClC,CAACK,OAAOC;IACN,MAAM,EACJC,UAAU,EACVC,KAAK,EACLC,KAAK,EACLC,WAAW,EACXC,oBAAoB,EACpBC,WAAW,EACXC,QAAQ,EACRC,QAAQ,EACRC,UAAU,EACVC,gBAAgB,EACjB,GAAGX;IACJ,qBACE,MAACb;QAAkByB,SAAS;;0BAC1B,MAACzB;gBACC0B,WAAU;gBACVC,YAAW;gBACXC,gBAAe;gBACfC,cAAc;gBACdC,aAAa,CAACC,QAAUA,MAAMC,OAAO,CAACC,OAAO;;kCAE7C,MAACjC;wBAAM0B,WAAU;;0CACf,KAACzB;gCAAWiC,MAAK;gCAAQC,SAAS,IAAMX,iBAAiBR;0CACtDI,4BAAc,KAACb,kCAAkB,KAACD;;0CAErC,MAACJ;gCAAWkC,SAAQ;gCAAWC,WAAU;;oCAAK;oCACpCrB,QAAQ;;;;;kCAGpB,MAAChB;wBAAM0B,WAAU;wBAAMC,YAAW;;4BAC/BT,aAAaoB,4BAAc,KAAClC;gCAAiBmC,cAAW;gCAAUL,MAAK;;4BACvEhB,aAAasB,uBACZ,KAAC9B;gCAAY+B,aAAavB,YAAYsB,KAAK,CAACE,OAAO;0CACjD,cAAA,MAAC1C;oCACC0B,WAAU;oCACVC,YAAW;oCACXgB,IAAI;wCACFC,OAAO,CAACb,QAAUA,MAAMC,OAAO,CAACQ,KAAK,CAACK,IAAI;oCAC5C;;sDAEA,KAAC5C;4CACCsC,cAAW;4CACXL,MAAK;4CACLS,IAAI;gDACFC,OAAO,CAACb,QAAUA,MAAMC,OAAO,CAACQ,KAAK,CAACK,IAAI;4CAC5C;sDAEA,cAAA,KAACpC;;sDAEH,KAACP;4CACCyC,IAAI;gDACFG,UAAU;gDACVC,YAAY;gDACZC,UAAU;gDACVC,cAAc;gDACd,mBAAmB;oDAAEC,SAAS;gDAAkB;4CAClD;sDAEChC,YAAYsB,KAAK,CAACE,OAAO;;;;;4BAKjCrB,0BACC,KAACpB;gCAAWsC,cAAW;gCAAeL,MAAK;gCAAQC,SAAS,IAAMd,YAAYA,SAASL;0CACrF,cAAA,KAACX;;;;;;YAKR,CAACe,6BACA,KAAC+B;gBACCrC,KAAKA;gBACLC,YAAYA;gBACZqC,OAAOnC;gBACPE,sBAAsBA;gBACtBG,UAAU,CAAC+B,OAAS/B,SAASN,OAAOqC;gBACpC9B,YAAY,IAAMA,WAAWP,OAAOC;;;OAhE9BD;AAqEhB,GACA;AAEFJ,qBAAqB0C,WAAW,GAAG;AAanC;;;;;;CAMC,GAED,MAAMH,4BAAc3C,WAA8C,CAACK,OAAOC;IACxE,MAAM,EAAEC,UAAU,EAAEqC,KAAK,EAAEjC,oBAAoB,EAAEG,QAAQ,EAAEC,UAAU,EAAE,GAAGgC,QAAQ,GAAG1C;IAErF,MAAM2C,qBAAoD,CAACH;QACzD/B,SACEvB,QAAQqD,OAAO,CAACK;YACdA,MAAMC,IAAI,GAAGL,KAAKM,SAAS,CAACC,IAAI;YAChCH,MAAMI,IAAI,CAACC,MAAM,CAACJ,IAAI,GAAGL,KAAKM,SAAS,CAACD,IAAI;YAC5CD,MAAMI,IAAI,CAACC,MAAM,CAACD,IAAI,GAAGR,KAAKQ,IAAI;QACpC;IAEJ;IAEA,qBACE,KAAC1D;QAAK,GAAGoD,MAAM;kBACb,cAAA,KAAC5C;YACCG,KAAKA;YACLiD,aAAahD;YACbiD,iBAAgB;YAChBZ,OAAO;gBACLO,WAAW;oBACTD,MAAMN,MAAMS,IAAI,CAACC,MAAM,CAACJ,IAAI;oBAC5BE,MAAMR,MAAMM,IAAI;gBAClB;gBACAG,MAAMT,MAAMS,IAAI,CAACC,MAAM,CAACD,IAAI;YAC9B;YACA1C,sBAAsBA;YACtB8C,kBAAkB;YAClBC,YAAY3C;YACZD,UAAUkC;;;AAIlB;AAEAL,YAAYG,WAAW,GAAG"}
+{"version":3,"sources":["../../../src/components/MultiQueryEditor/QueryEditorContainer.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { produce } from 'immer';\nimport { QueryDefinition, QueryPluginType } from '@perses-dev/spec';\nimport {\n  Stack,\n  IconButton,\n  Typography,\n  BoxProps,\n  Box,\n  CircularProgress,\n  TextField,\n  InputAdornment,\n} from '@mui/material';\nimport DeleteIcon from 'mdi-material-ui/DeleteOutline';\nimport ChevronDown from 'mdi-material-ui/ChevronDown';\nimport ChevronRight from 'mdi-material-ui/ChevronRight';\nimport { forwardRef, ReactElement, useState } from 'react';\nimport AlertIcon from 'mdi-material-ui/Alert';\nimport { InfoTooltip } from '@perses-dev/components';\nimport PencilIcon from 'mdi-material-ui/Pencil';\nimport CheckIcon from 'mdi-material-ui/Check';\nimport CloseIcon from 'mdi-material-ui/Close';\nimport { QueryData } from '../../runtime';\nimport { PluginEditor, PluginEditorProps, PluginEditorRef } from '../PluginEditor';\nimport { defaultQueryName } from './utils';\n\n/**\n * Properties for {@link QueryEditorContainer}\n */\ninterface QueryEditorContainerProps {\n  queryTypes: QueryPluginType[];\n  index: number;\n  query: QueryDefinition;\n  queryResult?: QueryData;\n  filteredQueryPlugins?: string[];\n  onChange: (index: number, query: QueryDefinition) => void;\n  onQueryRun: (index: number, query: QueryDefinition) => void;\n  onCollapseExpand: (index: number) => void;\n  isCollapsed?: boolean;\n  onDelete?: (index: number) => void;\n}\n\n/**\n * Container for a query editor. This component is responsible for rendering the query editor, and make it collapsible\n * to not take too much space.\n * @param queryTypes the supported query types\n * @param index the index of the query in the list\n * @param query the query definition\n * @param isCollapsed whether the query editor is collapsed or not\n * @param onDelete callback when the query is deleted\n * @param onChange callback when the query is changed\n * @param onCollapseExpand callback when the query is collapsed or expanded\n * @constructor\n */\n\nexport const QueryEditorContainer = forwardRef<PluginEditorRef, QueryEditorContainerProps>(\n  (props, ref): ReactElement => {\n    const {\n      queryTypes,\n      index,\n      query,\n      queryResult,\n      filteredQueryPlugins,\n      isCollapsed,\n      onDelete,\n      onChange,\n      onQueryRun,\n      onCollapseExpand,\n    } = props;\n\n    // The displayed name is always derived from props so it stays in sync with the\n    // current query/index, even when queries are added, removed or reordered.\n    const displayedName = query.spec.name ?? defaultQueryName(index);\n\n    const [isEditingName, setIsEditingName] = useState(false);\n\n    function handleNameSave(name: string): void {\n      setIsEditingName(false);\n      onChange(\n        index,\n        produce(query, (draft) => {\n          draft.spec.name = name;\n        })\n      );\n    }\n\n    return (\n      <Stack key={index} spacing={1}>\n        <Stack\n          direction=\"row\"\n          alignItems=\"center\"\n          justifyContent=\"space-between\"\n          borderBottom={1}\n          borderColor={(theme) => theme.palette.divider}\n        >\n          <Stack direction=\"row\" gap={1} sx={{ width: '100%' }}>\n            <IconButton\n              size=\"small\"\n              sx={{ width: 'fit-content', height: 'fit-content' }}\n              onClick={() => onCollapseExpand(index)}\n            >\n              {isCollapsed ? <ChevronRight /> : <ChevronDown />}\n            </IconButton>\n            <Stack\n              direction=\"row\"\n              gap={1}\n              alignItems=\"center\"\n              alignContent=\"center\"\n              sx={{\n                width: '100%',\n                '&:hover button': {\n                  visibility: 'visible',\n                },\n              }}\n            >\n              {isEditingName ? (\n                <QueryNameInput\n                  // Remounting on identity change resets the draft so editing always\n                  // targets the currently displayed query.\n                  key={displayedName}\n                  initialName={displayedName}\n                  onSave={handleNameSave}\n                  onCancel={() => setIsEditingName(false)}\n                />\n              ) : (\n                <Typography variant=\"overline\" component=\"h4\">\n                  {displayedName}\n                </Typography>\n              )}\n            </Stack>\n          </Stack>\n          <Stack direction=\"row\" alignItems=\"center\">\n            {queryResult?.isFetching && <CircularProgress aria-label=\"loading\" size=\"1.125rem\" />}\n            {queryResult?.error && (\n              <InfoTooltip description={queryResult.error.message}>\n                <Stack\n                  direction=\"row\"\n                  alignItems=\"center\"\n                  sx={{\n                    color: (theme) => theme.palette.error.main,\n                  }}\n                >\n                  <IconButton\n                    aria-label=\"query error\"\n                    size=\"small\"\n                    sx={{\n                      color: (theme) => theme.palette.error.main,\n                    }}\n                  >\n                    <AlertIcon />\n                  </IconButton>\n                  <Typography\n                    sx={{\n                      maxWidth: 300,\n                      whiteSpace: 'nowrap',\n                      overflow: 'hidden',\n                      textOverflow: 'ellipsis',\n                      '&:hover ::after': { content: '\"Click to copy\"' },\n                    }}\n                  >\n                    {queryResult.error.message}\n                  </Typography>\n                </Stack>\n              </InfoTooltip>\n            )}\n            <Stack direction=\"row\">\n              {!isEditingName && (\n                <IconButton aria-label=\"edit query name\" size=\"small\" onClick={() => setIsEditingName(true)}>\n                  <PencilIcon fontSize=\"small\" />\n                </IconButton>\n              )}\n              {onDelete && (\n                <IconButton aria-label=\"delete query\" size=\"small\" onClick={() => onDelete && onDelete(index)}>\n                  <DeleteIcon />\n                </IconButton>\n              )}\n            </Stack>\n          </Stack>\n        </Stack>\n        {!isCollapsed && (\n          <QueryEditor\n            ref={ref}\n            queryTypes={queryTypes}\n            value={query}\n            filteredQueryPlugins={filteredQueryPlugins}\n            onChange={(next) => onChange(index, next)}\n            onQueryRun={() => onQueryRun(index, query)}\n          />\n        )}\n      </Stack>\n    );\n  }\n);\n\nQueryEditorContainer.displayName = 'QueryEditorContainer';\n\n/**\n * Properties for {@link QueryNameInput}\n */\ninterface QueryNameInputProps {\n  initialName: string;\n  onSave: (name: string) => void;\n  onCancel: () => void;\n}\n\n/**\n * Self-contained input to edit a query name. The draft value is local state seeded from\n * `initialName`; callers reset it by changing the `key` (remounting) rather than syncing\n * with an useEffect.\n */\nfunction QueryNameInput({ initialName, onSave, onCancel }: QueryNameInputProps): ReactElement {\n  const [draftName, setDraftName] = useState(initialName);\n\n  return (\n    <TextField\n      size=\"small\"\n      variant=\"outlined\"\n      label=\"Query name\"\n      aria-label=\"query name\"\n      value={draftName}\n      onChange={(e) => setDraftName(e.target.value)}\n      fullWidth={true}\n      InputProps={{\n        endAdornment: (\n          <InputAdornment position=\"end\">\n            <IconButton size=\"small\" aria-label=\"cancel edit\" onClick={onCancel} edge=\"end\">\n              <CloseIcon />\n            </IconButton>\n            <IconButton size=\"small\" aria-label=\"save query name\" onClick={() => onSave(draftName)} edge=\"end\">\n              <CheckIcon />\n            </IconButton>\n          </InputAdornment>\n        ),\n      }}\n    />\n  );\n}\n\n// Props on MUI Box that we don't want people to pass because we're either redefining them or providing them in\n// this component\ntype OmittedMuiProps = 'children' | 'value' | 'onChange';\ninterface QueryEditorProps extends Omit<BoxProps, OmittedMuiProps> {\n  queryTypes: QueryPluginType[];\n  value: QueryDefinition;\n  filteredQueryPlugins?: string[];\n  onChange: (next: QueryDefinition) => void;\n  onQueryRun: () => void;\n}\n\n/**\n * Editor for a query definition. This component is responsible for rendering the plugin editor for the given query.\n * This will allow user to select a plugin extending from the given supported query types, and then edit the plugin\n * spec for this plugin.\n * @param props\n * @constructor\n */\n\nconst QueryEditor = forwardRef<PluginEditorRef, QueryEditorProps>((props, ref): ReactElement => {\n  const { queryTypes, value, filteredQueryPlugins, onChange, onQueryRun, ...others } = props;\n\n  const handlePluginChange: PluginEditorProps['onChange'] = (next) => {\n    onChange(\n      produce(value, (draft) => {\n        draft.kind = next.selection.type;\n        draft.spec.plugin.kind = next.selection.kind;\n        draft.spec.plugin.spec = next.spec;\n      })\n    );\n  };\n\n  return (\n    <Box {...others}>\n      <PluginEditor\n        ref={ref}\n        pluginTypes={queryTypes}\n        pluginKindLabel=\"Query Type\"\n        value={{\n          selection: {\n            kind: value.spec.plugin.kind,\n            type: value.kind,\n          },\n          spec: value.spec.plugin.spec,\n        }}\n        filteredQueryPlugins={filteredQueryPlugins}\n        withRunQueryButton\n        onRunQuery={onQueryRun}\n        onChange={handlePluginChange}\n      />\n    </Box>\n  );\n});\n\nQueryEditor.displayName = 'QueryEditor';\n"],"names":["produce","Stack","IconButton","Typography","Box","CircularProgress","TextField","InputAdornment","DeleteIcon","ChevronDown","ChevronRight","forwardRef","useState","AlertIcon","InfoTooltip","PencilIcon","CheckIcon","CloseIcon","PluginEditor","defaultQueryName","QueryEditorContainer","props","ref","queryTypes","index","query","queryResult","filteredQueryPlugins","isCollapsed","onDelete","onChange","onQueryRun","onCollapseExpand","displayedName","spec","name","isEditingName","setIsEditingName","handleNameSave","draft","spacing","direction","alignItems","justifyContent","borderBottom","borderColor","theme","palette","divider","gap","sx","width","size","height","onClick","alignContent","visibility","QueryNameInput","initialName","onSave","onCancel","variant","component","isFetching","aria-label","error","description","message","color","main","maxWidth","whiteSpace","overflow","textOverflow","content","fontSize","QueryEditor","value","next","displayName","draftName","setDraftName","label","e","target","fullWidth","InputProps","endAdornment","position","edge","others","handlePluginChange","kind","selection","type","plugin","pluginTypes","pluginKindLabel","withRunQueryButton","onRunQuery"],"mappings":"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"}

package/dist/components/MultiQueryEditor/index.d.ts

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

package/dist/components/MultiQueryEditor/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/MultiQueryEditor/index.tsx"],"names":[],"mappings":"AAaA,cAAc,oBAAoB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/MultiQueryEditor/index.tsx"],"names":[],"mappings":"AAaA,cAAc,oBAAoB,CAAC;AACnC,cAAc,SAAS,CAAC"}

package/dist/components/MultiQueryEditor/index.js

@@ -11,5 +11,6 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 export * from './MultiQueryEditor';
+export * from './utils';
 
 //# sourceMappingURL=index.js.map

package/dist/components/MultiQueryEditor/index.js.map

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

package/dist/components/MultiQueryEditor/utils.d.ts

@@ -0,0 +1,8 @@
+import { QueryDefinition } from '@perses-dev/spec';
+export declare function defaultQueryName(index: number): string;
+/**
+ * Returns the display name of each query definition, falling back to a default
+ * name based on the query position when no explicit name is set.
+ */
+export declare function generateQueryNames(definitions: QueryDefinition[]): string[];
+//# sourceMappingURL=utils.d.ts.map

package/dist/components/MultiQueryEditor/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/MultiQueryEditor/utils.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAEnD,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAEtD;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,WAAW,EAAE,eAAe,EAAE,GAAG,MAAM,EAAE,CAE3E"}

package/dist/{utils/action.js → components/MultiQueryEditor/utils.js}

@@ -10,18 +10,14 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-export function getTitleAction(action, isDraft) {
-    if (action === 'read') return 'View';
-    if (isDraft && action === 'create') return 'Add';
-    if (!isDraft && action === 'create') return 'Create';
-    if (action === 'update') return 'Edit';
-    return '';
+export function defaultQueryName(index) {
+    return `Query #${index + 1}`;
 }
-export function getSubmitText(action, isDraft) {
-    if (isDraft && action === 'create') return 'Add';
-    if (isDraft && action === 'update') return 'Apply';
-    if (!isDraft) return 'Save';
-    return '';
+/**
+ * Returns the display name of each query definition, falling back to a default
+ * name based on the query position when no explicit name is set.
+ */ export function generateQueryNames(definitions) {
+    return definitions.map((queryDef, index)=>queryDef.spec.name ?? defaultQueryName(index));
 }
 
-//# sourceMappingURL=action.js.map
+//# sourceMappingURL=utils.js.map

package/dist/components/MultiQueryEditor/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/MultiQueryEditor/utils.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { QueryDefinition } from '@perses-dev/spec';\n\nexport function defaultQueryName(index: number): string {\n  return `Query #${index + 1}`;\n}\n\n/**\n * Returns the display name of each query definition, falling back to a default\n * name based on the query position when no explicit name is set.\n */\nexport function generateQueryNames(definitions: QueryDefinition[]): string[] {\n  return definitions.map((queryDef: QueryDefinition, index: number) => queryDef.spec.name ?? defaultQueryName(index));\n}\n"],"names":["defaultQueryName","index","generateQueryNames","definitions","map","queryDef","spec","name"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAIjC,OAAO,SAASA,iBAAiBC,KAAa;IAC5C,OAAO,CAAC,OAAO,EAAEA,QAAQ,GAAG;AAC9B;AAEA;;;CAGC,GACD,OAAO,SAASC,mBAAmBC,WAA8B;IAC/D,OAAOA,YAAYC,GAAG,CAAC,CAACC,UAA2BJ,QAAkBI,SAASC,IAAI,CAACC,IAAI,IAAIP,iBAAiBC;AAC9G"}

package/dist/components/OptionsEditorRadios/OptionsEditorRadios.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 // Copyright The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
@@ -10,7 +11,6 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { FormControl, FormControlLabel, Radio, RadioGroup, Box } from '@mui/material';
 import { useState } from 'react';
 import { OptionsEditorTabPanel } from '../OptionsEditorTabPanel';

package/dist/components/OptionsEditorRadios/OptionsEditorRadios.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/OptionsEditorRadios/OptionsEditorRadios.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { FormControl, FormControlLabel, Radio, RadioGroup, RadioGroupProps, Box } from '@mui/material';\nimport { ReactElement, ReactNode, useState } from 'react';\nimport { OptionsEditorTabPanel } from '../OptionsEditorTabPanel';\n\nexport type OptionsEditorRadio = {\n  label: string;\n  /**\n   * Content rendered when the tab is active.\n   */\n  content: ReactNode;\n};\n\nexport type OptionsEditorRadiosProps = {\n  tabs: OptionsEditorRadio[];\n  defaultTab: number;\n  onModeChange: (value: number) => void;\n  isReadonly?: boolean;\n};\n\nexport const OptionsEditorRadios = (props: OptionsEditorRadiosProps): ReactElement => {\n  const { tabs, defaultTab, onModeChange, isReadonly } = props;\n  const [activeTab, setActiveTab] = useState(defaultTab);\n\n  const handleChange: RadioGroupProps['onChange'] = (_, value) => {\n    const v = parseInt(value);\n    setActiveTab(v);\n    onModeChange(v);\n  };\n\n  return (\n    <>\n      <Box sx={{ borderBottom: 1, borderColor: (theme) => theme.palette.divider }}>\n        <FormControl>\n          <RadioGroup\n            row\n            defaultValue={defaultTab}\n            value={activeTab}\n            onChange={handleChange}\n            aria-labelledby=\"Configuration radio\"\n          >\n            {tabs.map(({ label }, i) => {\n              return <FormControlLabel disabled={isReadonly} key={label} value={i} control={<Radio />} label={label} />;\n            })}\n          </RadioGroup>\n        </FormControl>\n      </Box>\n      {tabs.map(({ label, content }, i) => {\n        return (\n          <OptionsEditorTabPanel key={label} value={activeTab} index={i}>\n            {content}\n          </OptionsEditorTabPanel>\n        );\n      })}\n    </>\n  );\n};\n"],"names":["FormControl","FormControlLabel","Radio","RadioGroup","Box","useState","OptionsEditorTabPanel","OptionsEditorRadios","props","tabs","defaultTab","onModeChange","isReadonly","activeTab","setActiveTab","handleChange","_","value","v","parseInt","sx","borderBottom","borderColor","theme","palette","divider","row","defaultValue","onChange","aria-labelledby","map","label","i","disabled","control","content","index"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,WAAW,EAAEC,gBAAgB,EAAEC,KAAK,EAAEC,UAAU,EAAmBC,GAAG,QAAQ,gBAAgB;AACvG,SAAkCC,QAAQ,QAAQ,QAAQ;AAC1D,SAASC,qBAAqB,QAAQ,2BAA2B;AAiBjE,OAAO,MAAMC,sBAAsB,CAACC;IAClC,MAAM,EAAEC,IAAI,EAAEC,UAAU,EAAEC,YAAY,EAAEC,UAAU,EAAE,GAAGJ;IACvD,MAAM,CAACK,WAAWC,aAAa,GAAGT,SAASK;IAE3C,MAAMK,eAA4C,CAACC,GAAGC;QACpD,MAAMC,IAAIC,SAASF;QACnBH,aAAaI;QACbP,aAAaO;IACf;IAEA,qBACE;;0BACE,KAACd;gBAAIgB,IAAI;oBAAEC,cAAc;oBAAGC,aAAa,CAACC,QAAUA,MAAMC,OAAO,CAACC,OAAO;gBAAC;0BACxE,cAAA,KAACzB;8BACC,cAAA,KAACG;wBACCuB,GAAG;wBACHC,cAAcjB;wBACdO,OAAOJ;wBACPe,UAAUb;wBACVc,mBAAgB;kCAEfpB,KAAKqB,GAAG,CAAC,CAAC,EAAEC,KAAK,EAAE,EAAEC;4BACpB,qBAAO,KAAC/B;gCAAiBgC,UAAUrB;gCAAwBK,OAAOe;gCAAGE,uBAAS,KAAChC;gCAAU6B,OAAOA;+BAA5CA;wBACtD;;;;YAILtB,KAAKqB,GAAG,CAAC,CAAC,EAAEC,KAAK,EAAEI,OAAO,EAAE,EAAEH;gBAC7B,qBACE,KAAC1B;oBAAkCW,OAAOJ;oBAAWuB,OAAOJ;8BACzDG;mBADyBJ;YAIhC;;;AAGN,EAAE"}
+{"version":3,"sources":["../../../src/components/OptionsEditorRadios/OptionsEditorRadios.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { FormControl, FormControlLabel, Radio, RadioGroup, RadioGroupProps, Box } from '@mui/material';\nimport { ReactElement, ReactNode, useState } from 'react';\nimport { OptionsEditorTabPanel } from '../OptionsEditorTabPanel';\n\nexport type OptionsEditorRadio = {\n  label: string;\n  /**\n   * Content rendered when the tab is active.\n   */\n  content: ReactNode;\n};\n\nexport type OptionsEditorRadiosProps = {\n  tabs: OptionsEditorRadio[];\n  defaultTab: number;\n  onModeChange: (value: number) => void;\n  isReadonly?: boolean;\n};\n\nexport const OptionsEditorRadios = (props: OptionsEditorRadiosProps): ReactElement => {\n  const { tabs, defaultTab, onModeChange, isReadonly } = props;\n  const [activeTab, setActiveTab] = useState(defaultTab);\n\n  const handleChange: RadioGroupProps['onChange'] = (_, value) => {\n    const v = parseInt(value);\n    setActiveTab(v);\n    onModeChange(v);\n  };\n\n  return (\n    <>\n      <Box sx={{ borderBottom: 1, borderColor: (theme) => theme.palette.divider }}>\n        <FormControl>\n          <RadioGroup\n            row\n            defaultValue={defaultTab}\n            value={activeTab}\n            onChange={handleChange}\n            aria-labelledby=\"Configuration radio\"\n          >\n            {tabs.map(({ label }, i) => {\n              return <FormControlLabel disabled={isReadonly} key={label} value={i} control={<Radio />} label={label} />;\n            })}\n          </RadioGroup>\n        </FormControl>\n      </Box>\n      {tabs.map(({ label, content }, i) => {\n        return (\n          <OptionsEditorTabPanel key={label} value={activeTab} index={i}>\n            {content}\n          </OptionsEditorTabPanel>\n        );\n      })}\n    </>\n  );\n};\n"],"names":["FormControl","FormControlLabel","Radio","RadioGroup","Box","useState","OptionsEditorTabPanel","OptionsEditorRadios","props","tabs","defaultTab","onModeChange","isReadonly","activeTab","setActiveTab","handleChange","_","value","v","parseInt","sx","borderBottom","borderColor","theme","palette","divider","row","defaultValue","onChange","aria-labelledby","map","label","i","disabled","control","content","index"],"mappings":";AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,WAAW,EAAEC,gBAAgB,EAAEC,KAAK,EAAEC,UAAU,EAAmBC,GAAG,QAAQ,gBAAgB;AACvG,SAAkCC,QAAQ,QAAQ,QAAQ;AAC1D,SAASC,qBAAqB,QAAQ,2BAA2B;AAiBjE,OAAO,MAAMC,sBAAsB,CAACC;IAClC,MAAM,EAAEC,IAAI,EAAEC,UAAU,EAAEC,YAAY,EAAEC,UAAU,EAAE,GAAGJ;IACvD,MAAM,CAACK,WAAWC,aAAa,GAAGT,SAASK;IAE3C,MAAMK,eAA4C,CAACC,GAAGC;QACpD,MAAMC,IAAIC,SAASF;QACnBH,aAAaI;QACbP,aAAaO;IACf;IAEA,qBACE;;0BACE,KAACd;gBAAIgB,IAAI;oBAAEC,cAAc;oBAAGC,aAAa,CAACC,QAAUA,MAAMC,OAAO,CAACC,OAAO;gBAAC;0BACxE,cAAA,KAACzB;8BACC,cAAA,KAACG;wBACCuB,GAAG;wBACHC,cAAcjB;wBACdO,OAAOJ;wBACPe,UAAUb;wBACVc,mBAAgB;kCAEfpB,KAAKqB,GAAG,CAAC,CAAC,EAAEC,KAAK,EAAE,EAAEC;4BACpB,qBAAO,KAAC/B;gCAAiBgC,UAAUrB;gCAAwBK,OAAOe;gCAAGE,uBAAS,KAAChC;gCAAU6B,OAAOA;+BAA5CA;wBACtD;;;;YAILtB,KAAKqB,GAAG,CAAC,CAAC,EAAEC,KAAK,EAAEI,OAAO,EAAE,EAAEH;gBAC7B,qBACE,KAAC1B;oBAAkCW,OAAOJ;oBAAWuB,OAAOJ;8BACzDG;mBADyBJ;YAIhC;;;AAGN,EAAE"}

package/dist/components/OptionsEditorTabPanel/OptionsEditorTabPanel.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 // Copyright The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
@@ -10,7 +11,6 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { jsx as _jsx } from "react/jsx-runtime";
 import { Box } from '@mui/material';
 export function OptionsEditorTabPanel(props) {
     const { children, value, index, ...other } = props;

package/dist/components/OptionsEditorTabPanel/OptionsEditorTabPanel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/OptionsEditorTabPanel/OptionsEditorTabPanel.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Box } from '@mui/material';\nimport { ReactElement } from 'react';\n\ninterface OptionsEditorTabPanelProps {\n  children: React.ReactNode;\n  index: number;\n  value: number;\n}\n\nexport function OptionsEditorTabPanel(props: OptionsEditorTabPanelProps): ReactElement {\n  const { children, value, index, ...other } = props;\n\n  const isActive = value === index;\n\n  return (\n    <div\n      role=\"tabpanel\"\n      hidden={!isActive}\n      id={`options-editor-tabpanel-${index}`}\n      aria-labelledby={`options-editor-tab-${index}`}\n      {...other}\n    >\n      {isActive && <Box mt={2}>{children}</Box>}\n    </div>\n  );\n}\n"],"names":["Box","OptionsEditorTabPanel","props","children","value","index","other","isActive","div","role","hidden","id","aria-labelledby","mt"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,GAAG,QAAQ,gBAAgB;AASpC,OAAO,SAASC,sBAAsBC,KAAiC;IACrE,MAAM,EAAEC,QAAQ,EAAEC,KAAK,EAAEC,KAAK,EAAE,GAAGC,OAAO,GAAGJ;IAE7C,MAAMK,WAAWH,UAAUC;IAE3B,qBACE,KAACG;QACCC,MAAK;QACLC,QAAQ,CAACH;QACTI,IAAI,CAAC,wBAAwB,EAAEN,OAAO;QACtCO,mBAAiB,CAAC,mBAAmB,EAAEP,OAAO;QAC7C,GAAGC,KAAK;kBAERC,0BAAY,KAACP;YAAIa,IAAI;sBAAIV;;;AAGhC"}
+{"version":3,"sources":["../../../src/components/OptionsEditorTabPanel/OptionsEditorTabPanel.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Box } from '@mui/material';\nimport { ReactElement } from 'react';\n\ninterface OptionsEditorTabPanelProps {\n  children: React.ReactNode;\n  index: number;\n  value: number;\n}\n\nexport function OptionsEditorTabPanel(props: OptionsEditorTabPanelProps): ReactElement {\n  const { children, value, index, ...other } = props;\n\n  const isActive = value === index;\n\n  return (\n    <div\n      role=\"tabpanel\"\n      hidden={!isActive}\n      id={`options-editor-tabpanel-${index}`}\n      aria-labelledby={`options-editor-tab-${index}`}\n      {...other}\n    >\n      {isActive && <Box mt={2}>{children}</Box>}\n    </div>\n  );\n}\n"],"names":["Box","OptionsEditorTabPanel","props","children","value","index","other","isActive","div","role","hidden","id","aria-labelledby","mt"],"mappings":";AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,GAAG,QAAQ,gBAAgB;AASpC,OAAO,SAASC,sBAAsBC,KAAiC;IACrE,MAAM,EAAEC,QAAQ,EAAEC,KAAK,EAAEC,KAAK,EAAE,GAAGC,OAAO,GAAGJ;IAE7C,MAAMK,WAAWH,UAAUC;IAE3B,qBACE,KAACG;QACCC,MAAK;QACLC,QAAQ,CAACH;QACTI,IAAI,CAAC,wBAAwB,EAAEN,OAAO;QACtCO,mBAAiB,CAAC,mBAAmB,EAAEP,OAAO;QAC7C,GAAGC,KAAK;kBAERC,0BAAY,KAACP;YAAIa,IAAI;sBAAIV;;;AAGhC"}

package/dist/components/OptionsEditorTabs/OptionsEditorTabs.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 // Copyright The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
@@ -10,7 +11,6 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Tab, Tabs, Box } from '@mui/material';
 import { useState } from 'react';
 import { OptionsEditorTabPanel } from '../OptionsEditorTabPanel';

package/dist/components/OptionsEditorTabs/OptionsEditorTabs.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/OptionsEditorTabs/OptionsEditorTabs.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Tab, Tabs, TabsProps, Box } from '@mui/material';\nimport { ReactElement, ReactNode, useState } from 'react';\nimport { OptionsEditorTabPanel } from '../OptionsEditorTabPanel';\n\nexport type OptionsEditorTab = {\n  label: string;\n  /**\n   * Content rendered when the tab is active.\n   */\n  content: ReactNode;\n};\n\nexport type OptionsEditorTabsProps = {\n  tabs: OptionsEditorTab[];\n};\n\nexport const OptionsEditorTabs = ({ tabs }: OptionsEditorTabsProps): ReactElement => {\n  const [activeTab, setActiveTab] = useState(0);\n\n  const handleChange: TabsProps['onChange'] = (_, newValue) => {\n    setActiveTab(newValue);\n  };\n\n  return (\n    <>\n      <Box sx={{ borderBottom: 1, borderColor: (theme) => theme.palette.divider }}>\n        <Tabs value={activeTab} onChange={handleChange} aria-label=\"Panel configuration tabs\">\n          {tabs.map(({ label }, i) => {\n            return (\n              <Tab\n                key={label}\n                label={label}\n                id={`options-editor-tab-${i}`}\n                aria-controls={`options-editor-tabpanel-${i}`}\n              />\n            );\n          })}\n        </Tabs>\n      </Box>\n      {tabs.map(({ label, content }, i) => {\n        return (\n          <OptionsEditorTabPanel key={label} value={activeTab} index={i}>\n            {content}\n          </OptionsEditorTabPanel>\n        );\n      })}\n    </>\n  );\n};\n"],"names":["Tab","Tabs","Box","useState","OptionsEditorTabPanel","OptionsEditorTabs","tabs","activeTab","setActiveTab","handleChange","_","newValue","sx","borderBottom","borderColor","theme","palette","divider","value","onChange","aria-label","map","label","i","id","aria-controls","content","index"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,GAAG,EAAEC,IAAI,EAAaC,GAAG,QAAQ,gBAAgB;AAC1D,SAAkCC,QAAQ,QAAQ,QAAQ;AAC1D,SAASC,qBAAqB,QAAQ,2BAA2B;AAcjE,OAAO,MAAMC,oBAAoB,CAAC,EAAEC,IAAI,EAA0B;IAChE,MAAM,CAACC,WAAWC,aAAa,GAAGL,SAAS;IAE3C,MAAMM,eAAsC,CAACC,GAAGC;QAC9CH,aAAaG;IACf;IAEA,qBACE;;0BACE,KAACT;gBAAIU,IAAI;oBAAEC,cAAc;oBAAGC,aAAa,CAACC,QAAUA,MAAMC,OAAO,CAACC,OAAO;gBAAC;0BACxE,cAAA,KAAChB;oBAAKiB,OAAOX;oBAAWY,UAAUV;oBAAcW,cAAW;8BACxDd,KAAKe,GAAG,CAAC,CAAC,EAAEC,KAAK,EAAE,EAAEC;wBACpB,qBACE,KAACvB;4BAECsB,OAAOA;4BACPE,IAAI,CAAC,mBAAmB,EAAED,GAAG;4BAC7BE,iBAAe,CAAC,wBAAwB,EAAEF,GAAG;2BAHxCD;oBAMX;;;YAGHhB,KAAKe,GAAG,CAAC,CAAC,EAAEC,KAAK,EAAEI,OAAO,EAAE,EAAEH;gBAC7B,qBACE,KAACnB;oBAAkCc,OAAOX;oBAAWoB,OAAOJ;8BACzDG;mBADyBJ;YAIhC;;;AAGN,EAAE"}
+{"version":3,"sources":["../../../src/components/OptionsEditorTabs/OptionsEditorTabs.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Tab, Tabs, TabsProps, Box } from '@mui/material';\nimport { ReactElement, ReactNode, useState } from 'react';\nimport { OptionsEditorTabPanel } from '../OptionsEditorTabPanel';\n\nexport type OptionsEditorTab = {\n  label: string;\n  /**\n   * Content rendered when the tab is active.\n   */\n  content: ReactNode;\n};\n\nexport type OptionsEditorTabsProps = {\n  tabs: OptionsEditorTab[];\n};\n\nexport const OptionsEditorTabs = ({ tabs }: OptionsEditorTabsProps): ReactElement => {\n  const [activeTab, setActiveTab] = useState(0);\n\n  const handleChange: TabsProps['onChange'] = (_, newValue) => {\n    setActiveTab(newValue);\n  };\n\n  return (\n    <>\n      <Box sx={{ borderBottom: 1, borderColor: (theme) => theme.palette.divider }}>\n        <Tabs value={activeTab} onChange={handleChange} aria-label=\"Panel configuration tabs\">\n          {tabs.map(({ label }, i) => {\n            return (\n              <Tab\n                key={label}\n                label={label}\n                id={`options-editor-tab-${i}`}\n                aria-controls={`options-editor-tabpanel-${i}`}\n              />\n            );\n          })}\n        </Tabs>\n      </Box>\n      {tabs.map(({ label, content }, i) => {\n        return (\n          <OptionsEditorTabPanel key={label} value={activeTab} index={i}>\n            {content}\n          </OptionsEditorTabPanel>\n        );\n      })}\n    </>\n  );\n};\n"],"names":["Tab","Tabs","Box","useState","OptionsEditorTabPanel","OptionsEditorTabs","tabs","activeTab","setActiveTab","handleChange","_","newValue","sx","borderBottom","borderColor","theme","palette","divider","value","onChange","aria-label","map","label","i","id","aria-controls","content","index"],"mappings":";AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,GAAG,EAAEC,IAAI,EAAaC,GAAG,QAAQ,gBAAgB;AAC1D,SAAkCC,QAAQ,QAAQ,QAAQ;AAC1D,SAASC,qBAAqB,QAAQ,2BAA2B;AAcjE,OAAO,MAAMC,oBAAoB,CAAC,EAAEC,IAAI,EAA0B;IAChE,MAAM,CAACC,WAAWC,aAAa,GAAGL,SAAS;IAE3C,MAAMM,eAAsC,CAACC,GAAGC;QAC9CH,aAAaG;IACf;IAEA,qBACE;;0BACE,KAACT;gBAAIU,IAAI;oBAAEC,cAAc;oBAAGC,aAAa,CAACC,QAAUA,MAAMC,OAAO,CAACC,OAAO;gBAAC;0BACxE,cAAA,KAAChB;oBAAKiB,OAAOX;oBAAWY,UAAUV;oBAAcW,cAAW;8BACxDd,KAAKe,GAAG,CAAC,CAAC,EAAEC,KAAK,EAAE,EAAEC;wBACpB,qBACE,KAACvB;4BAECsB,OAAOA;4BACPE,IAAI,CAAC,mBAAmB,EAAED,GAAG;4BAC7BE,iBAAe,CAAC,wBAAwB,EAAEF,GAAG;2BAHxCD;oBAMX;;;YAGHhB,KAAKe,GAAG,CAAC,CAAC,EAAEC,KAAK,EAAEI,OAAO,EAAE,EAAEH;gBAC7B,qBACE,KAACnB;oBAAkCc,OAAOX;oBAAWoB,OAAOJ;8BACzDG;mBADyBJ;YAIhC;;;AAGN,EAAE"}