@perses-dev/plugin-system 0.46.0 → 0.47.0

package/dist/components/DatasourceEditorForm/DatasourceEditorForm.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/DatasourceEditorForm/DatasourceEditorForm.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { useImmer } from 'use-immer';\nimport { Action, DatasourceDefinition, DatasourceSpec } from '@perses-dev/core';\nimport { Box, Button, Divider, FormControlLabel, Grid, Stack, Switch, TextField, Typography } from '@mui/material';\nimport { DispatchWithoutAction, useCallback, useState } from 'react';\nimport { DiscardChangesConfirmationDialog } from '@perses-dev/components';\nimport { Controller, FormProvider, SubmitHandler, useForm } from 'react-hook-form';\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport { PluginEditor } from '../PluginEditor';\nimport { getSubmitText, getTitleAction } from '../../utils';\nimport { datasourceEditValidationSchema, DatasourceEditValidationType } from '../../validation';\n\n/**\n * This preprocessing ensures that we always have a defined object for the `display` property\n * @param datasource\n */\nfunction getInitialState(datasourceDefinition: DatasourceDefinition) {\n  const patchedDisplay = {\n    name: datasourceDefinition.spec.display?.name ?? '',\n    description: datasourceDefinition.spec.display?.description ?? '',\n  };\n\n  return {\n    name: datasourceDefinition.name,\n    spec: {\n      ...datasourceDefinition.spec,\n      display: patchedDisplay,\n    },\n  };\n}\n\ninterface DatasourceEditorFormProps {\n  initialDatasourceDefinition: DatasourceDefinition;\n  initialAction: Action;\n  isDraft: boolean;\n  isReadonly?: boolean;\n  onSave: (name: string, spec: DatasourceSpec) => void;\n  onClose: DispatchWithoutAction;\n  onDelete?: DispatchWithoutAction;\n}\n\nexport function DatasourceEditorForm(props: DatasourceEditorFormProps) {\n  const { initialDatasourceDefinition, initialAction, isDraft, isReadonly, onSave, onClose, onDelete } = props;\n\n  const initialState = getInitialState(initialDatasourceDefinition);\n  const [state, setState] = useImmer(initialState);\n  const [isDiscardDialogOpened, setDiscardDialogOpened] = useState<boolean>(false);\n  const [action, setAction] = useState(initialAction);\n  const titleAction = getTitleAction(action, isDraft);\n  const submitText = getSubmitText(action, isDraft);\n\n  const form = useForm<DatasourceEditValidationType>({\n    resolver: zodResolver(datasourceEditValidationSchema),\n    mode: 'onBlur',\n    defaultValues: {\n      name: state.name,\n      title: state.spec.display?.name,\n      description: state.spec.display?.description,\n      default: state.spec.default,\n    },\n  });\n\n  const processForm: SubmitHandler<DatasourceEditValidationType> = () => {\n    // reset display attributes to undefined when empty, because we don't want to save empty strings\n    onSave(state.name, {\n      ...state.spec,\n      display: {\n        name: state.spec.display?.name === '' ? undefined : state.spec.display?.name,\n        description: state.spec.display?.description === '' ? undefined : state.spec.display?.description,\n      },\n    });\n  };\n\n  // When user click on cancel, several possibilities:\n  // - create action: ask for discard approval\n  // - update action: ask for discard approval if changed\n  // - read action: don´t ask for discard approval\n  const handleCancel = useCallback(() => {\n    if (JSON.stringify(initialState) !== JSON.stringify(state)) {\n      setDiscardDialogOpened(true);\n    } else {\n      onClose();\n    }\n  }, [state, initialState, setDiscardDialogOpened, onClose]);\n\n  return (\n    <FormProvider {...form}>\n      <Box\n        sx={{\n          display: 'flex',\n          alignItems: 'center',\n          padding: (theme) => theme.spacing(1, 2),\n          borderBottom: (theme) => `1px solid ${theme.palette.divider}`,\n        }}\n      >\n        <Typography variant=\"h2\">{titleAction} Datasource</Typography>\n        <Stack direction=\"row\" spacing={1} sx={{ marginLeft: 'auto' }}>\n          {action === 'read' ? (\n            <>\n              <Button disabled={isReadonly} variant=\"contained\" onClick={() => setAction('update')}>\n                Edit\n              </Button>\n              <Button color=\"error\" disabled={isReadonly} variant=\"outlined\" onClick={onDelete}>\n                Delete\n              </Button>\n              <Divider\n                orientation=\"vertical\"\n                flexItem\n                sx={(theme) => ({\n                  borderColor: theme.palette.grey['500'],\n                  '&.MuiDivider-root': {\n                    marginLeft: 2,\n                    marginRight: 1,\n                  },\n                })}\n              />\n              <Button color=\"secondary\" variant=\"outlined\" onClick={onClose}>\n                Close\n              </Button>\n            </>\n          ) : (\n            <>\n              <Button variant=\"contained\" disabled={!form.formState.isValid} onClick={form.handleSubmit(processForm)}>\n                {submitText}\n              </Button>\n              <Button color=\"secondary\" variant=\"outlined\" onClick={handleCancel}>\n                Cancel\n              </Button>\n            </>\n          )}\n        </Stack>\n      </Box>\n      <Box padding={2} sx={{ overflowY: 'scroll' }}>\n        <Grid container spacing={2} mb={2}>\n          <Grid item xs={4}>\n            <Controller\n              name=\"name\"\n              render={({ field, fieldState }) => (\n                <TextField\n                  {...field}\n                  required\n                  fullWidth\n                  name=\"name\"\n                  label=\"Name\"\n                  InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n                  InputProps={{\n                    disabled: action === 'update' && !isDraft,\n                    readOnly: action === 'read',\n                  }}\n                  error={!!fieldState.error}\n                  helperText={fieldState.error?.message}\n                  onChange={(event) => {\n                    field.onChange(event);\n                    setState((draft) => {\n                      draft.name = event.target.value;\n                    });\n                  }}\n                />\n              )}\n            />\n          </Grid>\n          <Grid item xs={8}>\n            <Controller\n              name=\"title\"\n              render={({ field, fieldState }) => (\n                <TextField\n                  {...field}\n                  fullWidth\n                  name=\"title\"\n                  label=\"Display Label\"\n                  InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n                  InputProps={{\n                    readOnly: action === 'read',\n                  }}\n                  error={!!fieldState.error}\n                  helperText={fieldState.error?.message}\n                  onChange={(event) => {\n                    setState((draft) => {\n                      field.onChange(event);\n                      if (draft.spec.display) {\n                        draft.spec.display.name = event.target.value;\n                      }\n                    });\n                  }}\n                />\n              )}\n            />\n          </Grid>\n          <Grid item xs={12}>\n            <Controller\n              name=\"description\"\n              render={({ field, fieldState }) => (\n                <TextField\n                  {...field}\n                  fullWidth\n                  name=\"description\"\n                  label=\"Description\"\n                  InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n                  InputProps={{\n                    readOnly: action === 'read',\n                  }}\n                  error={!!fieldState.error}\n                  helperText={fieldState.error?.message}\n                  onChange={(event) => {\n                    field.onChange(event);\n                    setState((draft) => {\n                      if (draft.spec.display) {\n                        draft.spec.display.description = event.target.value;\n                      }\n                    });\n                  }}\n                />\n              )}\n            />\n          </Grid>\n          <Grid item xs={6} sx={{ paddingTop: '5px !important' }}>\n            <Stack>\n              <Controller\n                name=\"default\"\n                render={({ field }) => (\n                  <FormControlLabel\n                    {...field}\n                    control={\n                      <Switch\n                        checked={state.spec.default}\n                        readOnly={action === 'read'}\n                        onChange={(event) => {\n                          if (action === 'read') return; // ReadOnly prop is not blocking user interaction...\n                          field.onChange(event);\n                          setState((draft) => {\n                            draft.spec.default = event.target.checked;\n                          });\n                        }}\n                      />\n                    }\n                    label=\"Set as default\"\n                  />\n                )}\n              />\n              <Typography variant=\"caption\">\n                Whether this datasource should be the default {state.spec.plugin.kind} to be used\n              </Typography>\n            </Stack>\n          </Grid>\n        </Grid>\n        <Divider />\n        <Typography py={1} variant=\"h3\">\n          Plugin Options\n        </Typography>\n        <PluginEditor\n          width=\"100%\"\n          pluginTypes={['Datasource']}\n          pluginKindLabel=\"Source\"\n          value={{\n            selection: {\n              kind: state.spec.plugin.kind,\n              type: 'Datasource',\n            },\n            spec: state.spec.plugin.spec,\n          }}\n          isReadonly={action === 'read'}\n          onChange={(v) => {\n            setState((draft) => {\n              draft.spec.plugin.kind = v.selection.kind;\n              draft.spec.plugin.spec = v.spec;\n            });\n          }}\n        />\n      </Box>\n      <DiscardChangesConfirmationDialog\n        description=\"Are you sure you want to discard your changes? Changes cannot be recovered.\"\n        isOpen={isDiscardDialogOpened}\n        onCancel={() => setDiscardDialogOpened(false)}\n        onDiscardChanges={() => {\n          setDiscardDialogOpened(false);\n          onClose();\n        }}\n      />\n    </FormProvider>\n  );\n}\n"],"names":["useImmer","Box","Button","Divider","FormControlLabel","Grid","Stack","Switch","TextField","Typography","useCallback","useState","DiscardChangesConfirmationDialog","Controller","FormProvider","useForm","zodResolver","PluginEditor","getSubmitText","getTitleAction","datasourceEditValidationSchema","getInitialState","datasourceDefinition","patchedDisplay","name","spec","display","description","DatasourceEditorForm","props","state","initialDatasourceDefinition","initialAction","isDraft","isReadonly","onSave","onClose","onDelete","initialState","setState","isDiscardDialogOpened","setDiscardDialogOpened","action","setAction","titleAction","submitText","form","resolver","mode","defaultValues","title","default","processForm","undefined","handleCancel","JSON","stringify","sx","alignItems","padding","theme","spacing","borderBottom","palette","divider","variant","direction","marginLeft","disabled","onClick","color","orientation","flexItem","borderColor","grey","marginRight","formState","isValid","handleSubmit","overflowY","container","mb","item","xs","render","field","fieldState","required","fullWidth","label","InputLabelProps","shrink","InputProps","readOnly","error","helperText","message","onChange","event","draft","target","value","paddingTop","control","checked","plugin","kind","py","width","pluginTypes","pluginKindLabel","selection","type","v","isOpen","onCancel","onDiscardChanges"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/DatasourceEditorForm/DatasourceEditorForm.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Action, DatasourceDefinition } from '@perses-dev/core';\nimport { Box, Button, Divider, FormControlLabel, Grid, Stack, Switch, TextField, Typography } from '@mui/material';\nimport { DispatchWithoutAction, useState } from 'react';\nimport { DiscardChangesConfirmationDialog } from '@perses-dev/components';\nimport { Controller, FormProvider, SubmitHandler, useForm } from 'react-hook-form';\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport { PluginEditor } from '../PluginEditor';\nimport { getSubmitText, getTitleAction } from '../../utils';\nimport { useValidationSchemas } from '../../context';\n\ninterface DatasourceEditorFormProps {\n  initialDatasourceDefinition: DatasourceDefinition;\n  initialAction: Action;\n  isDraft: boolean;\n  isReadonly?: boolean;\n  onSave: (def: DatasourceDefinition) => void;\n  onClose: DispatchWithoutAction;\n  onDelete?: DispatchWithoutAction;\n}\n\nexport function DatasourceEditorForm(props: DatasourceEditorFormProps) {\n  const { initialDatasourceDefinition, initialAction, isDraft, isReadonly, onSave, onClose, onDelete } = props;\n\n  const [isDiscardDialogOpened, setDiscardDialogOpened] = useState<boolean>(false);\n  const [action, setAction] = useState(initialAction);\n  const titleAction = getTitleAction(action, isDraft);\n  const submitText = getSubmitText(action, isDraft);\n\n  const { datasourceEditorSchema } = useValidationSchemas();\n  const form = useForm<DatasourceDefinition>({\n    resolver: zodResolver(datasourceEditorSchema),\n    mode: 'onBlur',\n    defaultValues: initialDatasourceDefinition,\n  });\n\n  /*\n   * Remove empty fields that are optional\n   */\n  function clearFormData(data: DatasourceDefinition): DatasourceDefinition {\n    const result = { ...data };\n    if (result.spec.display?.name === undefined && result.spec.display?.description === undefined) {\n      delete result.spec.display;\n    }\n    return result;\n  }\n\n  const processForm: SubmitHandler<DatasourceDefinition> = (data: DatasourceDefinition) => {\n    onSave(clearFormData(data));\n  };\n\n  // When user click on cancel, several possibilities:\n  // - create action: ask for discard approval\n  // - update action: ask for discard approval if changed\n  // - read action: don´t ask for discard approval\n  function handleCancel() {\n    if (JSON.stringify(initialDatasourceDefinition) !== JSON.stringify(clearFormData(form.getValues()))) {\n      setDiscardDialogOpened(true);\n    } else {\n      onClose();\n    }\n  }\n\n  return (\n    <FormProvider {...form}>\n      <Box\n        sx={{\n          display: 'flex',\n          alignItems: 'center',\n          padding: (theme) => theme.spacing(1, 2),\n          borderBottom: (theme) => `1px solid ${theme.palette.divider}`,\n        }}\n      >\n        <Typography variant=\"h2\">{titleAction} Datasource</Typography>\n        <Stack direction=\"row\" spacing={1} sx={{ marginLeft: 'auto' }}>\n          {action === 'read' ? (\n            <>\n              <Button disabled={isReadonly} variant=\"contained\" onClick={() => setAction('update')}>\n                Edit\n              </Button>\n              <Button color=\"error\" disabled={isReadonly} variant=\"outlined\" onClick={onDelete}>\n                Delete\n              </Button>\n              <Divider\n                orientation=\"vertical\"\n                flexItem\n                sx={(theme) => ({\n                  borderColor: theme.palette.grey['500'],\n                  '&.MuiDivider-root': {\n                    marginLeft: 2,\n                    marginRight: 1,\n                  },\n                })}\n              />\n              <Button color=\"secondary\" variant=\"outlined\" onClick={onClose}>\n                Close\n              </Button>\n            </>\n          ) : (\n            <>\n              <Button variant=\"contained\" disabled={!form.formState.isValid} onClick={form.handleSubmit(processForm)}>\n                {submitText}\n              </Button>\n              <Button color=\"secondary\" variant=\"outlined\" onClick={handleCancel}>\n                Cancel\n              </Button>\n            </>\n          )}\n        </Stack>\n      </Box>\n      <Box padding={2} sx={{ overflowY: 'scroll' }}>\n        <Grid container spacing={2} mb={2}>\n          <Grid item xs={4}>\n            <Controller\n              control={form.control}\n              name=\"name\"\n              render={({ field, fieldState }) => (\n                <TextField\n                  {...field}\n                  required\n                  fullWidth\n                  name=\"name\"\n                  label=\"Name\"\n                  InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n                  InputProps={{\n                    disabled: action === 'update' && !isDraft,\n                    readOnly: action === 'read',\n                  }}\n                  error={!!fieldState.error}\n                  helperText={fieldState.error?.message}\n                  value={field.value ?? ''}\n                  onChange={(event) => {\n                    field.onChange(event);\n                  }}\n                />\n              )}\n            />\n          </Grid>\n          <Grid item xs={8}>\n            <Controller\n              control={form.control}\n              name=\"spec.display.name\"\n              render={({ field, fieldState }) => (\n                <TextField\n                  {...field}\n                  fullWidth\n                  name=\"title\"\n                  label=\"Display Label\"\n                  InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n                  InputProps={{\n                    readOnly: action === 'read',\n                  }}\n                  error={!!fieldState.error}\n                  helperText={fieldState.error?.message}\n                  value={field.value ?? ''}\n                  onChange={(event) => {\n                    field.onChange(event);\n                  }}\n                />\n              )}\n            />\n          </Grid>\n          <Grid item xs={12}>\n            <Controller\n              control={form.control}\n              name=\"spec.display.description\"\n              render={({ field, fieldState }) => (\n                <TextField\n                  {...field}\n                  fullWidth\n                  name=\"description\"\n                  label=\"Description\"\n                  InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n                  InputProps={{\n                    readOnly: action === 'read',\n                  }}\n                  error={!!fieldState.error}\n                  helperText={fieldState.error?.message}\n                  value={field.value ?? ''}\n                  onChange={(event) => {\n                    field.onChange(event);\n                  }}\n                />\n              )}\n            />\n          </Grid>\n          <Grid item xs={6} sx={{ paddingTop: '5px !important' }}>\n            <Stack>\n              <Controller\n                control={form.control}\n                name=\"spec.default\"\n                render={({ field }) => (\n                  <FormControlLabel\n                    label=\"Set as default\"\n                    control={\n                      <Switch\n                        {...field}\n                        checked={!!field.value}\n                        readOnly={action === 'read'}\n                        onChange={(event) => {\n                          if (action === 'read') return; // ReadOnly prop is not blocking user interaction...\n                          field.onChange(event);\n                        }}\n                      />\n                    }\n                  />\n                )}\n              />\n              <Typography variant=\"caption\">\n                Whether this datasource should be the default {form.getValues().spec.plugin.kind} to be used\n              </Typography>\n            </Stack>\n          </Grid>\n        </Grid>\n        <Divider />\n        <Typography py={1} variant=\"h3\">\n          Plugin Options\n        </Typography>\n        <Controller\n          control={form.control}\n          name=\"spec.plugin\"\n          render={({ field }) => (\n            <PluginEditor\n              width=\"100%\"\n              pluginTypes={['Datasource']}\n              pluginKindLabel=\"Source\"\n              value={{\n                selection: {\n                  type: 'Datasource',\n                  kind: field.value.kind,\n                },\n                spec: field.value.spec,\n              }}\n              isReadonly={action === 'read'}\n              onChange={(v) => {\n                field.onChange({ kind: v.selection.kind, spec: v.spec });\n              }}\n            />\n          )}\n        />\n      </Box>\n      <DiscardChangesConfirmationDialog\n        description=\"Are you sure you want to discard your changes? Changes cannot be recovered.\"\n        isOpen={isDiscardDialogOpened}\n        onCancel={() => setDiscardDialogOpened(false)}\n        onDiscardChanges={() => {\n          setDiscardDialogOpened(false);\n          onClose();\n        }}\n      />\n    </FormProvider>\n  );\n}\n"],"names":["Box","Button","Divider","FormControlLabel","Grid","Stack","Switch","TextField","Typography","useState","DiscardChangesConfirmationDialog","Controller","FormProvider","useForm","zodResolver","PluginEditor","getSubmitText","getTitleAction","useValidationSchemas","DatasourceEditorForm","props","initialDatasourceDefinition","initialAction","isDraft","isReadonly","onSave","onClose","onDelete","isDiscardDialogOpened","setDiscardDialogOpened","action","setAction","titleAction","submitText","datasourceEditorSchema","form","resolver","mode","defaultValues","clearFormData","data","result","spec","display","name","undefined","description","processForm","handleCancel","JSON","stringify","getValues","sx","alignItems","padding","theme","spacing","borderBottom","palette","divider","variant","direction","marginLeft","disabled","onClick","color","orientation","flexItem","borderColor","grey","marginRight","formState","isValid","handleSubmit","overflowY","container","mb","item","xs","control","render","field","fieldState","required","fullWidth","label","InputLabelProps","shrink","InputProps","readOnly","error","helperText","message","value","onChange","event","paddingTop","checked","plugin","kind","py","width","pluginTypes","pluginKindLabel","selection","type","v","isOpen","onCancel","onDiscardChanges"],"mappings":"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"}

package/dist/components/LegendOptionsEditor/LegendOptionsEditor.js

@@ -10,10 +10,10 @@
 // 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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Switch } from '@mui/material';
 import { DEFAULT_LEGEND, getLegendMode, getLegendPosition, getLegendSize } from '@perses-dev/core';
-import { ErrorAlert, OptionsEditorControl, SettingsAutocomplete } from '@perses-dev/components';
+import { ErrorAlert, OptionsEditorControl, OptionsEditorGroup, SettingsAutocomplete } from '@perses-dev/components';
 import { LEGEND_MODE_CONFIG, LEGEND_POSITIONS_CONFIG, validateLegendSpec, LEGEND_VALUE_CONFIG, LEGEND_SIZE_CONFIG } from '../../model';
 const POSITION_OPTIONS = Object.entries(LEGEND_POSITIONS_CONFIG).map(([id, config])=>{
     return {
@@ -94,7 +94,8 @@ export function LegendOptionsEditor({ value, onChange }) {
         }
         return result;
     }, []);
-    return /*#__PURE__*/ _jsxs(_Fragment, {
+    return /*#__PURE__*/ _jsxs(OptionsEditorGroup, {
+        title: "Legend",
         children: [
             !isValidLegend && /*#__PURE__*/ _jsx(ErrorAlert, {
                 error: {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/LegendOptionsEditor/LegendOptionsEditor.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Switch, SwitchProps } from '@mui/material';\nimport { DEFAULT_LEGEND, getLegendMode, getLegendPosition, getLegendSize } from '@perses-dev/core';\nimport { ErrorAlert, OptionsEditorControl, SettingsAutocomplete } from '@perses-dev/components';\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} 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 LegendModeOption = LegendSingleSelectConfig & { id: Required<LegendSpecOptions>['mode'] };\n\nconst MODE_OPTIONS: LegendModeOption[] = Object.entries(LEGEND_MODE_CONFIG).map(([id, config]) => {\n  return {\n    id: id as Required<LegendSpecOptions>['mode'],\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 };\nconst VALUE_OPTIONS: LegendValueOption[] = Object.entries(LEGEND_VALUE_CONFIG).map(([id, config]) => {\n  return {\n    id: id as LegendValue,\n    ...config,\n  };\n});\n\nexport interface LegendOptionsEditorProps {\n  value?: LegendSpecOptions;\n  onChange: (legend?: LegendSpecOptions) => void;\n}\n\nexport function LegendOptionsEditor({ value, onChange }: LegendOptionsEditorProps) {\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) => {\n    onChange({\n      ...value,\n      position: newValue.id,\n    });\n  };\n\n  const handleLegendModeChange = (_: unknown, newValue: LegendModeOption) => {\n    onChange({\n      ...value,\n      position: currentPosition,\n      mode: newValue.id,\n    });\n  };\n\n  const handleLegendSizeChange = (_: unknown, newValue: LegendSizeOption) => {\n    onChange({\n      ...value,\n      position: currentPosition,\n      size: newValue.id,\n    });\n  };\n\n  const handleLegendValueChange = (_: unknown, newValue: LegendValueOption[]) => {\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  const legendModeConfig = LEGEND_MODE_CONFIG[currentMode];\n\n  const currentSize = getLegendSize(value?.size);\n  const legendSizeConfig = LEGEND_SIZE_CONFIG[currentSize];\n\n  const currentValues = value?.values || [];\n  const legendValuesConfig = currentValues.reduce((result, item) => {\n    const config = LEGEND_VALUE_CONFIG[item];\n    if (config) {\n      result.push({ ...config, id: item });\n    }\n    return result;\n  }, [] as LegendValueOption[]);\n\n  return (\n    <>\n      {!isValidLegend && <ErrorAlert error={{ name: 'invalid-legend', message: 'Invalid legend spec' }} />}\n      <OptionsEditorControl\n        label=\"Show\"\n        control={<Switch checked={value !== undefined} onChange={handleLegendShowChange} />}\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            disabled={value === undefined}\n            disableClearable\n          ></SettingsAutocomplete>\n        }\n      />\n      <OptionsEditorControl\n        label=\"Mode\"\n        control={\n          <SettingsAutocomplete\n            value={{\n              ...legendModeConfig,\n              id: currentMode,\n            }}\n            options={MODE_OPTIONS}\n            onChange={handleLegendModeChange}\n            disabled={value === undefined}\n            disableClearable\n          ></SettingsAutocomplete>\n        }\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            disabled={value === undefined || currentMode !== 'table'}\n            disableClearable\n          ></SettingsAutocomplete>\n        }\n      />\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={VALUE_OPTIONS}\n            onChange={handleLegendValueChange}\n            disabled={value === undefined || currentMode !== 'table'}\n            limitTags={1}\n            ChipProps={{\n              size: 'small',\n            }}\n          />\n        }\n      />\n    </>\n  );\n}\n"],"names":["Switch","DEFAULT_LEGEND","getLegendMode","getLegendPosition","getLegendSize","ErrorAlert","OptionsEditorControl","SettingsAutocomplete","LEGEND_MODE_CONFIG","LEGEND_POSITIONS_CONFIG","validateLegendSpec","LEGEND_VALUE_CONFIG","LEGEND_SIZE_CONFIG","POSITION_OPTIONS","Object","entries","map","id","config","MODE_OPTIONS","SIZE_OPTIONS","VALUE_OPTIONS","LegendOptionsEditor","value","onChange","handleLegendShowChange","_","checked","legendValue","position","undefined","handleLegendPositionChange","newValue","handleLegendModeChange","currentPosition","mode","handleLegendSizeChange","size","handleLegendValueChange","values","isValidLegend","legendPositionConfig","currentMode","legendModeConfig","currentSize","legendSizeConfig","currentValues","legendValuesConfig","reduce","result","item","push","error","name","message","label","control","options","disabled","disableClearable","multiple","disableCloseOnSelect","limitTags","ChipProps"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/LegendOptionsEditor/LegendOptionsEditor.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Switch, SwitchProps } from '@mui/material';\nimport { DEFAULT_LEGEND, getLegendMode, getLegendPosition, getLegendSize } from '@perses-dev/core';\nimport { ErrorAlert, OptionsEditorControl, OptionsEditorGroup, SettingsAutocomplete } from '@perses-dev/components';\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} 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 LegendModeOption = LegendSingleSelectConfig & { id: Required<LegendSpecOptions>['mode'] };\n\nconst MODE_OPTIONS: LegendModeOption[] = Object.entries(LEGEND_MODE_CONFIG).map(([id, config]) => {\n  return {\n    id: id as Required<LegendSpecOptions>['mode'],\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 };\nconst VALUE_OPTIONS: LegendValueOption[] = Object.entries(LEGEND_VALUE_CONFIG).map(([id, config]) => {\n  return {\n    id: id as LegendValue,\n    ...config,\n  };\n});\n\nexport interface LegendOptionsEditorProps {\n  value?: LegendSpecOptions;\n  onChange: (legend?: LegendSpecOptions) => void;\n}\n\nexport function LegendOptionsEditor({ value, onChange }: LegendOptionsEditorProps) {\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) => {\n    onChange({\n      ...value,\n      position: newValue.id,\n    });\n  };\n\n  const handleLegendModeChange = (_: unknown, newValue: LegendModeOption) => {\n    onChange({\n      ...value,\n      position: currentPosition,\n      mode: newValue.id,\n    });\n  };\n\n  const handleLegendSizeChange = (_: unknown, newValue: LegendSizeOption) => {\n    onChange({\n      ...value,\n      position: currentPosition,\n      size: newValue.id,\n    });\n  };\n\n  const handleLegendValueChange = (_: unknown, newValue: LegendValueOption[]) => {\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  const legendModeConfig = LEGEND_MODE_CONFIG[currentMode];\n\n  const currentSize = getLegendSize(value?.size);\n  const legendSizeConfig = LEGEND_SIZE_CONFIG[currentSize];\n\n  const currentValues = value?.values || [];\n  const legendValuesConfig = currentValues.reduce((result, item) => {\n    const config = LEGEND_VALUE_CONFIG[item];\n    if (config) {\n      result.push({ ...config, id: item });\n    }\n    return result;\n  }, [] as LegendValueOption[]);\n\n  return (\n    <OptionsEditorGroup title=\"Legend\">\n      {!isValidLegend && <ErrorAlert error={{ name: 'invalid-legend', message: 'Invalid legend spec' }} />}\n      <OptionsEditorControl\n        label=\"Show\"\n        control={<Switch checked={value !== undefined} onChange={handleLegendShowChange} />}\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            disabled={value === undefined}\n            disableClearable\n          ></SettingsAutocomplete>\n        }\n      />\n      <OptionsEditorControl\n        label=\"Mode\"\n        control={\n          <SettingsAutocomplete\n            value={{\n              ...legendModeConfig,\n              id: currentMode,\n            }}\n            options={MODE_OPTIONS}\n            onChange={handleLegendModeChange}\n            disabled={value === undefined}\n            disableClearable\n          ></SettingsAutocomplete>\n        }\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            disabled={value === undefined || currentMode !== 'table'}\n            disableClearable\n          ></SettingsAutocomplete>\n        }\n      />\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={VALUE_OPTIONS}\n            onChange={handleLegendValueChange}\n            disabled={value === undefined || currentMode !== 'table'}\n            limitTags={1}\n            ChipProps={{\n              size: 'small',\n            }}\n          />\n        }\n      />\n    </OptionsEditorGroup>\n  );\n}\n"],"names":["Switch","DEFAULT_LEGEND","getLegendMode","getLegendPosition","getLegendSize","ErrorAlert","OptionsEditorControl","OptionsEditorGroup","SettingsAutocomplete","LEGEND_MODE_CONFIG","LEGEND_POSITIONS_CONFIG","validateLegendSpec","LEGEND_VALUE_CONFIG","LEGEND_SIZE_CONFIG","POSITION_OPTIONS","Object","entries","map","id","config","MODE_OPTIONS","SIZE_OPTIONS","VALUE_OPTIONS","LegendOptionsEditor","value","onChange","handleLegendShowChange","_","checked","legendValue","position","undefined","handleLegendPositionChange","newValue","handleLegendModeChange","currentPosition","mode","handleLegendSizeChange","size","handleLegendValueChange","values","isValidLegend","legendPositionConfig","currentMode","legendModeConfig","currentSize","legendSizeConfig","currentValues","legendValuesConfig","reduce","result","item","push","title","error","name","message","label","control","options","disabled","disableClearable","multiple","disableCloseOnSelect","limitTags","ChipProps"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,MAAM,QAAqB,gBAAgB;AACpD,SAASC,cAAc,EAAEC,aAAa,EAAEC,iBAAiB,EAAEC,aAAa,QAAQ,mBAAmB;AACnG,SAASC,UAAU,EAAEC,oBAAoB,EAAEC,kBAAkB,EAAEC,oBAAoB,QAAQ,yBAAyB;AACpH,SACEC,kBAAkB,EAClBC,uBAAuB,EAGvBC,kBAAkB,EAClBC,mBAAmB,EAEnBC,kBAAkB,QACb,cAAc;AAIrB,MAAMC,mBAA2CC,OAAOC,OAAO,CAACN,yBAAyBO,GAAG,CAAC,CAAC,CAACC,IAAIC,OAAO;IACxG,OAAO;QACLD,IAAIA;QACJ,GAAGC,MAAM;IACX;AACF;AAIA,MAAMC,eAAmCL,OAAOC,OAAO,CAACP,oBAAoBQ,GAAG,CAAC,CAAC,CAACC,IAAIC,OAAO;IAC3F,OAAO;QACLD,IAAIA;QACJ,GAAGC,MAAM;IACX;AACF;AAIA,MAAME,eAAmCN,OAAOC,OAAO,CAACH,oBAAoBI,GAAG,CAAC,CAAC,CAACC,IAAIC,OAAO;IAC3F,OAAO;QACLD,IAAIA;QACJ,GAAGC,MAAM;IACX;AACF;AAGA,MAAMG,gBAAqCP,OAAOC,OAAO,CAACJ,qBAAqBK,GAAG,CAAC,CAAC,CAACC,IAAIC,OAAO;IAC9F,OAAO;QACLD,IAAIA;QACJ,GAAGC,MAAM;IACX;AACF;AAOA,OAAO,SAASI,oBAAoB,EAAEC,KAAK,EAAEC,QAAQ,EAA4B;IAC/E,MAAMC,yBAAkD,CAACC,GAAYC;QACnE,gDAAgD;QAChD,MAAMC,cAAcD,YAAY,OAAO;YAAEE,UAAU7B,eAAe6B,QAAQ;QAAC,IAAIC;QAC/EN,SAASI;IACX;IAEA,MAAMG,6BAA6B,CAACL,GAAYM;QAC9CR,SAAS;YACP,GAAGD,KAAK;YACRM,UAAUG,SAASf,EAAE;QACvB;IACF;IAEA,MAAMgB,yBAAyB,CAACP,GAAYM;QAC1CR,SAAS;YACP,GAAGD,KAAK;YACRM,UAAUK;YACVC,MAAMH,SAASf,EAAE;QACnB;IACF;IAEA,MAAMmB,yBAAyB,CAACV,GAAYM;QAC1CR,SAAS;YACP,GAAGD,KAAK;YACRM,UAAUK;YACVG,MAAML,SAASf,EAAE;QACnB;IACF;IAEA,MAAMqB,0BAA0B,CAACZ,GAAYM;QAC3CR,SAAS;YACP,GAAGD,KAAK;YACRM,UAAUK;YACVK,QAAQP,SAAShB,GAAG,CAAC,CAACO;gBACpB,OAAOA,MAAMN,EAAE;YACjB;QACF;IACF;IAEA,MAAMuB,gBAAgB9B,mBAAmBa;IACzC,MAAMW,kBAAkBhC,kBAAkBqB,kBAAAA,4BAAAA,MAAOM,QAAQ;IACzD,MAAMY,uBAAuBhC,uBAAuB,CAACyB,gBAAgB;IAErE,MAAMQ,cAAczC,cAAcsB,kBAAAA,4BAAAA,MAAOY,IAAI;IAC7C,MAAMQ,mBAAmBnC,kBAAkB,CAACkC,YAAY;IAExD,MAAME,cAAczC,cAAcoB,kBAAAA,4BAAAA,MAAOc,IAAI;IAC7C,MAAMQ,mBAAmBjC,kBAAkB,CAACgC,YAAY;IAExD,MAAME,gBAAgBvB,CAAAA,kBAAAA,4BAAAA,MAAOgB,MAAM,KAAI,EAAE;IACzC,MAAMQ,qBAAqBD,cAAcE,MAAM,CAAC,CAACC,QAAQC;QACvD,MAAMhC,SAASP,mBAAmB,CAACuC,KAAK;QACxC,IAAIhC,QAAQ;YACV+B,OAAOE,IAAI,CAAC;gBAAE,GAAGjC,MAAM;gBAAED,IAAIiC;YAAK;QACpC;QACA,OAAOD;IACT,GAAG,EAAE;IAEL,qBACE,MAAC3C;QAAmB8C,OAAM;;YACvB,CAACZ,+BAAiB,KAACpC;gBAAWiD,OAAO;oBAAEC,MAAM;oBAAkBC,SAAS;gBAAsB;;0BAC/F,KAAClD;gBACCmD,OAAM;gBACNC,uBAAS,KAAC1D;oBAAO4B,SAASJ,UAAUO;oBAAWN,UAAUC;;;0BAE3D,KAACpB;gBACCmD,OAAM;gBACNC,uBACE,KAAClD;oBACCgB,OAAO;wBACL,GAAGkB,oBAAoB;wBACvBxB,IAAIiB;oBACN;oBACAwB,SAAS7C;oBACTW,UAAUO;oBACV4B,UAAUpC,UAAUO;oBACpB8B,gBAAgB;;;0BAItB,KAACvD;gBACCmD,OAAM;gBACNC,uBACE,KAAClD;oBACCgB,OAAO;wBACL,GAAGoB,gBAAgB;wBACnB1B,IAAIyB;oBACN;oBACAgB,SAASvC;oBACTK,UAAUS;oBACV0B,UAAUpC,UAAUO;oBACpB8B,gBAAgB;;;0BAItB,KAACvD;gBACCmD,OAAM;gBACNC,uBACE,KAAClD;oBACCgB,OAAO;wBACL,GAAGsB,gBAAgB;wBACnB5B,IAAI2B;oBACN;oBACAc,SAAStC;oBACTI,UAAUY;oBACV,mEAAmE;oBACnE,sCAAsC;oBACtCuB,UAAUpC,UAAUO,aAAaY,gBAAgB;oBACjDkB,gBAAgB;;;0BAItB,KAACvD;gBACCmD,OAAM;gBACNC,SACE,wEAAwE;gBACxE,uEAAuE;gBACvE,uBAAuB;8BACvB,KAAClD;oBACCsD,UAAU;oBACVC,oBAAoB;oBACpBF,gBAAgB;oBAChBrC,OAAOwB;oBACPW,SAASrC;oBACTG,UAAUc;oBACVqB,UAAUpC,UAAUO,aAAaY,gBAAgB;oBACjDqB,WAAW;oBACXC,WAAW;wBACT3B,MAAM;oBACR;;;;;AAMZ"}

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

@@ -5,7 +5,7 @@ export interface MultiQueryEditorProps {
     onChange: (queries: QueryDefinition[]) => void;
 }
 /**
- * A component render a list of {@link QueryEditor} for the given query definitions.
+ * A component render a list of {@link QueryEditorContainer} for the given query definitions.
  * It allows adding, removing and editing queries.
  * @param queryTypes The list of query types that the underlying editor will propose
  * @param queries The list of query definitions to render

package/dist/components/MultiQueryEditor/MultiQueryEditor.js

@@ -45,7 +45,7 @@ function useDefaultQueryDefinition(queryTypes) {
     };
 }
 /**
- * A component render a list of {@link QueryEditor} for the given query definitions.
+ * A component render a list of {@link QueryEditorContainer} for the given query definitions.
  * It allows adding, removing and editing queries.
  * @param queryTypes The list of query types that the underlying editor will propose
  * @param queries The list of query definitions to render

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/MultiQueryEditor/MultiQueryEditor.tsx"],"sourcesContent":["// Copyright 2024 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 { 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 { useListPluginMetadata, usePlugin, usePluginRegistry } from '../../runtime';\nimport { QueryEditorContainer } from './QueryEditorContainer';\n\nexport interface MultiQueryEditorProps {\n  queryTypes: QueryPluginType[];\n  queries?: QueryDefinition[];\n  onChange: (queries: QueryDefinition[]) => void;\n}\n\nfunction useDefaultQueryDefinition(queryTypes: QueryPluginType[]): QueryDefinition {\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\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 } = useListPluginMetadata(queryTypes);\n  const { defaultPluginKinds } = usePluginRegistry();\n  const defaultQueryKind = defaultPluginKinds?.[defaultQueryType] ?? queryPlugins?.[0]?.kind ?? '';\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    kind: defaultQueryType,\n    spec: {\n      plugin: { kind: defaultQueryKind, spec: defaultQueryPlugin?.createInitialOptions() || {} },\n    },\n  };\n}\n\n/**\n * A component render a list of {@link QueryEditor} 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 */\nexport function MultiQueryEditor({ queryTypes, queries = [], onChange }: MultiQueryEditorProps) {\n  const defaultInitialQueryDefinition = useDefaultQueryDefinition(queryTypes);\n\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) => {\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 handleQueryAdd = () => {\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) => {\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) => {\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 ? queries : [defaultInitialQueryDefinition];\n\n  return (\n    <>\n      <Stack spacing={1}>\n        {queryDefinitions.map((query: QueryDefinition, i: number) => (\n          <QueryEditorContainer\n            queryTypes={queryTypes}\n            key={i}\n            index={i}\n            query={query}\n            isCollapsed={!!queriesCollapsed[i]}\n            onChange={handleQueryChange}\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"],"names":["useState","produce","Button","Stack","AddIcon","useListPluginMetadata","usePlugin","usePluginRegistry","QueryEditorContainer","useDefaultQueryDefinition","queryTypes","queryPlugins","defaultQueryType","data","defaultPluginKinds","defaultQueryKind","kind","defaultQueryPlugin","useErrorBoundary","enabled","spec","plugin","createInitialOptions","MultiQueryEditor","queries","onChange","defaultInitialQueryDefinition","queriesCollapsed","setQueriesCollapsed","map","handleQueryChange","index","queryDef","draft","handleQueryAdd","push","handleQueryDelete","splice","handleQueryCollapseExpand","queryDefinitions","length","spacing","query","i","isCollapsed","onDelete","undefined","onCollapseExpand","variant","startIcon","sx","marginTop","onClick"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/MultiQueryEditor/MultiQueryEditor.tsx"],"sourcesContent":["// Copyright 2024 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 { 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 { useListPluginMetadata, usePlugin, usePluginRegistry } from '../../runtime';\nimport { QueryEditorContainer } from './QueryEditorContainer';\n\nexport interface MultiQueryEditorProps {\n  queryTypes: QueryPluginType[];\n  queries?: QueryDefinition[];\n  onChange: (queries: QueryDefinition[]) => void;\n}\n\nfunction useDefaultQueryDefinition(queryTypes: QueryPluginType[]): QueryDefinition {\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\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 } = useListPluginMetadata(queryTypes);\n  const { defaultPluginKinds } = usePluginRegistry();\n  const defaultQueryKind = defaultPluginKinds?.[defaultQueryType] ?? queryPlugins?.[0]?.kind ?? '';\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    kind: defaultQueryType,\n    spec: {\n      plugin: { kind: defaultQueryKind, spec: defaultQueryPlugin?.createInitialOptions() || {} },\n    },\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 */\nexport function MultiQueryEditor({ queryTypes, queries = [], onChange }: MultiQueryEditorProps) {\n  const defaultInitialQueryDefinition = useDefaultQueryDefinition(queryTypes);\n\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) => {\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 handleQueryAdd = () => {\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) => {\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) => {\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 ? queries : [defaultInitialQueryDefinition];\n\n  return (\n    <>\n      <Stack spacing={1}>\n        {queryDefinitions.map((query: QueryDefinition, i: number) => (\n          <QueryEditorContainer\n            queryTypes={queryTypes}\n            key={i}\n            index={i}\n            query={query}\n            isCollapsed={!!queriesCollapsed[i]}\n            onChange={handleQueryChange}\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"],"names":["useState","produce","Button","Stack","AddIcon","useListPluginMetadata","usePlugin","usePluginRegistry","QueryEditorContainer","useDefaultQueryDefinition","queryTypes","queryPlugins","defaultQueryType","data","defaultPluginKinds","defaultQueryKind","kind","defaultQueryPlugin","useErrorBoundary","enabled","spec","plugin","createInitialOptions","MultiQueryEditor","queries","onChange","defaultInitialQueryDefinition","queriesCollapsed","setQueriesCollapsed","map","handleQueryChange","index","queryDef","draft","handleQueryAdd","push","handleQueryDelete","splice","handleQueryCollapseExpand","queryDefinitions","length","spacing","query","i","isCollapsed","onDelete","undefined","onCollapseExpand","variant","startIcon","sx","marginTop","onClick"],"mappings":"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"}

package/dist/components/MultiQueryEditor/QueryEditorContainer.js

@@ -47,7 +47,7 @@ import { PluginEditor } from '../PluginEditor';
                         variant: "overline",
                         component: "h4",
                         children: [
-                            "Query ",
+                            "Query #",
                             index + 1
                         ]
                     }),

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/MultiQueryEditor/QueryEditorContainer.tsx"],"sourcesContent":["// Copyright 2024 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/core';\nimport { Stack, IconButton, Typography, BoxProps, Box } 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 { PluginEditor, PluginEditorProps } from '../PluginEditor';\n\n/**\n * Properties for {@link QueryEditorContainer}\n */\ninterface QueryEditorContainerProps {\n  queryTypes: QueryPluginType[];\n  index: number;\n  query: QueryDefinition;\n  onChange: (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 */\nexport const QueryEditorContainer = ({\n  queryTypes,\n  index,\n  query,\n  isCollapsed,\n  onDelete,\n  onChange,\n  onCollapseExpand,\n}: QueryEditorContainerProps) => {\n  return (\n    <Stack key={index} spacing={1}>\n      <Stack direction=\"row\" alignItems=\"center\" borderBottom={1} borderColor={(theme) => theme.palette.divider}>\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        <IconButton\n          size=\"small\"\n          // Use `visibility` to ensure that the row has the same height when delete button is visible or not visible\n          sx={{ marginLeft: 'auto', visibility: `${onDelete ? 'visible' : 'hidden'}` }}\n          onClick={() => onDelete && onDelete(index)}\n        >\n          <DeleteIcon />\n        </IconButton>\n      </Stack>\n      {!isCollapsed && <QueryEditor queryTypes={queryTypes} value={query} onChange={(next) => onChange(index, next)} />}\n    </Stack>\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  onChange: (next: QueryDefinition) => 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 */\nfunction QueryEditor(props: QueryEditorProps) {\n  const { value, onChange, queryTypes, ...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        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        onChange={handlePluginChange}\n      />\n    </Box>\n  );\n}\n"],"names":["produce","Stack","IconButton","Typography","Box","DeleteIcon","ChevronDown","ChevronRight","PluginEditor","QueryEditorContainer","queryTypes","index","query","isCollapsed","onDelete","onChange","onCollapseExpand","spacing","direction","alignItems","borderBottom","borderColor","theme","palette","divider","size","onClick","variant","component","sx","marginLeft","visibility","QueryEditor","value","next","props","others","handlePluginChange","draft","kind","selection","type","spec","plugin","pluginTypes","pluginKindLabel"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,OAAOA,aAAa,QAAQ;AAE5B,SAASC,KAAK,EAAEC,UAAU,EAAEC,UAAU,EAAYC,GAAG,QAAQ,gBAAgB;AAC7E,OAAOC,gBAAgB,gCAAgC;AACvD,OAAOC,iBAAiB,8BAA8B;AACtD,OAAOC,kBAAkB,+BAA+B;AACxD,SAASC,YAAY,QAA2B,kBAAkB;AAelE;;;;;;;;;;;CAWC,GACD,OAAO,MAAMC,uBAAuB,CAAC,EACnCC,UAAU,EACVC,KAAK,EACLC,KAAK,EACLC,WAAW,EACXC,QAAQ,EACRC,QAAQ,EACRC,gBAAgB,EACU;IAC1B,qBACE,MAACf;QAAkBgB,SAAS;;0BAC1B,MAAChB;gBAAMiB,WAAU;gBAAMC,YAAW;gBAASC,cAAc;gBAAGC,aAAa,CAACC,QAAUA,MAAMC,OAAO,CAACC,OAAO;;kCACvG,KAACtB;wBAAWuB,MAAK;wBAAQC,SAAS,IAAMV,iBAAiBL;kCACtDE,4BAAc,KAACN,kCAAkB,KAACD;;kCAErC,MAACH;wBAAWwB,SAAQ;wBAAWC,WAAU;;4BAAK;4BACrCjB,QAAQ;;;kCAEjB,KAACT;wBACCuB,MAAK;wBACL,2GAA2G;wBAC3GI,IAAI;4BAAEC,YAAY;4BAAQC,YAAY,CAAC,EAAEjB,WAAW,YAAY,SAAS,CAAC;wBAAC;wBAC3EY,SAAS,IAAMZ,YAAYA,SAASH;kCAEpC,cAAA,KAACN;;;;YAGJ,CAACQ,6BAAe,KAACmB;gBAAYtB,YAAYA;gBAAYuB,OAAOrB;gBAAOG,UAAU,CAACmB,OAASnB,SAASJ,OAAOuB;;;OAjB9FvB;AAoBhB,EAAE;AAWF;;;;;;CAMC,GACD,SAASqB,YAAYG,KAAuB;IAC1C,MAAM,EAAEF,KAAK,EAAElB,QAAQ,EAAEL,UAAU,EAAE,GAAG0B,QAAQ,GAAGD;IAEnD,MAAME,qBAAoD,CAACH;QACzDnB,SACEf,QAAQiC,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,KAACtC;QAAK,GAAGgC,MAAM;kBACb,cAAA,KAAC5B;YACCoC,aAAalC;YACbmC,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;YACA3B,UAAUsB;;;AAIlB"}
+{"version":3,"sources":["../../../src/components/MultiQueryEditor/QueryEditorContainer.tsx"],"sourcesContent":["// Copyright 2024 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/core';\nimport { Stack, IconButton, Typography, BoxProps, Box } 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 { PluginEditor, PluginEditorProps } from '../PluginEditor';\n\n/**\n * Properties for {@link QueryEditorContainer}\n */\ninterface QueryEditorContainerProps {\n  queryTypes: QueryPluginType[];\n  index: number;\n  query: QueryDefinition;\n  onChange: (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 */\nexport const QueryEditorContainer = ({\n  queryTypes,\n  index,\n  query,\n  isCollapsed,\n  onDelete,\n  onChange,\n  onCollapseExpand,\n}: QueryEditorContainerProps) => {\n  return (\n    <Stack key={index} spacing={1}>\n      <Stack direction=\"row\" alignItems=\"center\" borderBottom={1} borderColor={(theme) => theme.palette.divider}>\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        <IconButton\n          size=\"small\"\n          // Use `visibility` to ensure that the row has the same height when delete button is visible or not visible\n          sx={{ marginLeft: 'auto', visibility: `${onDelete ? 'visible' : 'hidden'}` }}\n          onClick={() => onDelete && onDelete(index)}\n        >\n          <DeleteIcon />\n        </IconButton>\n      </Stack>\n      {!isCollapsed && <QueryEditor queryTypes={queryTypes} value={query} onChange={(next) => onChange(index, next)} />}\n    </Stack>\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  onChange: (next: QueryDefinition) => 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 */\nfunction QueryEditor(props: QueryEditorProps) {\n  const { value, onChange, queryTypes, ...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        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        onChange={handlePluginChange}\n      />\n    </Box>\n  );\n}\n"],"names":["produce","Stack","IconButton","Typography","Box","DeleteIcon","ChevronDown","ChevronRight","PluginEditor","QueryEditorContainer","queryTypes","index","query","isCollapsed","onDelete","onChange","onCollapseExpand","spacing","direction","alignItems","borderBottom","borderColor","theme","palette","divider","size","onClick","variant","component","sx","marginLeft","visibility","QueryEditor","value","next","props","others","handlePluginChange","draft","kind","selection","type","spec","plugin","pluginTypes","pluginKindLabel"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,OAAOA,aAAa,QAAQ;AAE5B,SAASC,KAAK,EAAEC,UAAU,EAAEC,UAAU,EAAYC,GAAG,QAAQ,gBAAgB;AAC7E,OAAOC,gBAAgB,gCAAgC;AACvD,OAAOC,iBAAiB,8BAA8B;AACtD,OAAOC,kBAAkB,+BAA+B;AACxD,SAASC,YAAY,QAA2B,kBAAkB;AAelE;;;;;;;;;;;CAWC,GACD,OAAO,MAAMC,uBAAuB,CAAC,EACnCC,UAAU,EACVC,KAAK,EACLC,KAAK,EACLC,WAAW,EACXC,QAAQ,EACRC,QAAQ,EACRC,gBAAgB,EACU;IAC1B,qBACE,MAACf;QAAkBgB,SAAS;;0BAC1B,MAAChB;gBAAMiB,WAAU;gBAAMC,YAAW;gBAASC,cAAc;gBAAGC,aAAa,CAACC,QAAUA,MAAMC,OAAO,CAACC,OAAO;;kCACvG,KAACtB;wBAAWuB,MAAK;wBAAQC,SAAS,IAAMV,iBAAiBL;kCACtDE,4BAAc,KAACN,kCAAkB,KAACD;;kCAErC,MAACH;wBAAWwB,SAAQ;wBAAWC,WAAU;;4BAAK;4BACpCjB,QAAQ;;;kCAElB,KAACT;wBACCuB,MAAK;wBACL,2GAA2G;wBAC3GI,IAAI;4BAAEC,YAAY;4BAAQC,YAAY,CAAC,EAAEjB,WAAW,YAAY,SAAS,CAAC;wBAAC;wBAC3EY,SAAS,IAAMZ,YAAYA,SAASH;kCAEpC,cAAA,KAACN;;;;YAGJ,CAACQ,6BAAe,KAACmB;gBAAYtB,YAAYA;gBAAYuB,OAAOrB;gBAAOG,UAAU,CAACmB,OAASnB,SAASJ,OAAOuB;;;OAjB9FvB;AAoBhB,EAAE;AAWF;;;;;;CAMC,GACD,SAASqB,YAAYG,KAAuB;IAC1C,MAAM,EAAEF,KAAK,EAAElB,QAAQ,EAAEL,UAAU,EAAE,GAAG0B,QAAQ,GAAGD;IAEnD,MAAME,qBAAoD,CAACH;QACzDnB,SACEf,QAAQiC,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,KAACtC;QAAK,GAAGgC,MAAM;kBACb,cAAA,KAAC5B;YACCoC,aAAalC;YACbmC,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;YACA3B,UAAUsB;;;AAIlB"}

package/dist/components/PanelSpecEditor/PanelSpecEditor.d.ts

@@ -1,5 +1,7 @@
-import { PanelDefinition, QueryDefinition, UnknownSpec } from '@perses-dev/core';
+import { PanelDefinition, PanelEditorValues, QueryDefinition, UnknownSpec } from '@perses-dev/core';
+import { Control } from 'react-hook-form';
 export interface PanelSpecEditorProps {
+    control: Control<PanelEditorValues>;
     panelDefinition: PanelDefinition;
     onQueriesChange: (queries: QueryDefinition[]) => void;
     onPluginSpecChange: (spec: UnknownSpec) => void;

package/dist/components/PanelSpecEditor/PanelSpecEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PanelSpecEditor.d.ts","sourceRoot":"","sources":["../../../src/components/PanelSpecEditor/PanelSpecEditor.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAMjF,MAAM,WAAW,oBAAoB;IACnC,eAAe,EAAE,eAAe,CAAC;IACjC,eAAe,EAAE,CAAC,OAAO,EAAE,eAAe,EAAE,KAAK,IAAI,CAAC;IACtD,kBAAkB,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;IAChD,YAAY,EAAE,CAAC,kBAAkB,EAAE,MAAM,KAAK,IAAI,CAAC;CACpD;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,kDAsD1D"}
+{"version":3,"file":"PanelSpecEditor.d.ts","sourceRoot":"","sources":["../../../src/components/PanelSpecEditor/PanelSpecEditor.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AACpG,OAAO,EAAE,OAAO,EAAc,MAAM,iBAAiB,CAAC;AAMtD,MAAM,WAAW,oBAAoB;IACnC,OAAO,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAAC;IACpC,eAAe,EAAE,eAAe,CAAC;IACjC,eAAe,EAAE,CAAC,OAAO,EAAE,eAAe,EAAE,KAAK,IAAI,CAAC;IACtD,kBAAkB,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;IAChD,YAAY,EAAE,CAAC,kBAAkB,EAAE,MAAM,KAAK,IAAI,CAAC;CACpD;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,kDAgG1D"}

package/dist/components/PanelSpecEditor/PanelSpecEditor.js

@@ -12,11 +12,12 @@
 // limitations under the License.
 import { jsx as _jsx } from "react/jsx-runtime";
 import { ErrorAlert, JSONEditor, LinksEditor } from '@perses-dev/components';
-import { usePlugin } from '../../runtime';
+import { Controller } from 'react-hook-form';
+import { QueryCountProvider, usePlugin } from '../../runtime';
 import { OptionsEditorTabs } from '../OptionsEditorTabs';
 import { MultiQueryEditor } from '../MultiQueryEditor';
 export function PanelSpecEditor(props) {
-    const { panelDefinition, onJSONChange, onQueriesChange, onPluginSpecChange } = props;
+    const { control, panelDefinition, onJSONChange, onQueriesChange, onPluginSpecChange } = props;
     const { kind } = panelDefinition.spec.plugin;
     const { data: plugin, isLoading, error } = usePlugin('Panel', kind);
     if (error) {
@@ -34,41 +35,70 @@ export function PanelSpecEditor(props) {
     const { panelOptionsEditorComponents, hideQueryEditor } = plugin;
     let tabs = [];
     if (!hideQueryEditor) {
-        var _plugin_supportedQueryTypes, _panelDefinition_spec_queries;
         tabs.push({
             label: 'Query',
-            content: /*#__PURE__*/ _jsx(MultiQueryEditor, {
-                queryTypes: (_plugin_supportedQueryTypes = plugin.supportedQueryTypes) !== null && _plugin_supportedQueryTypes !== void 0 ? _plugin_supportedQueryTypes : [],
-                queries: (_panelDefinition_spec_queries = panelDefinition.spec.queries) !== null && _panelDefinition_spec_queries !== void 0 ? _panelDefinition_spec_queries : [],
-                onChange: onQueriesChange
+            content: /*#__PURE__*/ _jsx(Controller, {
+                control: control,
+                name: "panelDefinition.spec.queries",
+                render: ({ field })=>/*#__PURE__*/ {
+                    var _plugin_supportedQueryTypes, _panelDefinition_spec_queries;
+                    return _jsx(MultiQueryEditor, {
+                        queryTypes: (_plugin_supportedQueryTypes = plugin.supportedQueryTypes) !== null && _plugin_supportedQueryTypes !== void 0 ? _plugin_supportedQueryTypes : [],
+                        queries: (_panelDefinition_spec_queries = panelDefinition.spec.queries) !== null && _panelDefinition_spec_queries !== void 0 ? _panelDefinition_spec_queries : [],
+                        onChange: (queries)=>{
+                            field.onChange(queries);
+                            onQueriesChange(queries);
+                        }
+                    });
+                }
             })
         });
     }
     if (panelOptionsEditorComponents !== undefined) {
         tabs = tabs.concat(panelOptionsEditorComponents.map(({ label, content: OptionsEditorComponent })=>({
                 label,
-                content: /*#__PURE__*/ _jsx(OptionsEditorComponent, {
-                    value: panelDefinition.spec.plugin.spec,
-                    onChange: onPluginSpecChange
+                content: /*#__PURE__*/ _jsx(Controller, {
+                    control: control,
+                    name: "panelDefinition.spec.plugin.spec",
+                    render: ({ field })=>/*#__PURE__*/ _jsx(OptionsEditorComponent, {
+                            value: panelDefinition.spec.plugin.spec,
+                            onChange: (spec)=>{
+                                field.onChange(spec);
+                                onPluginSpecChange(spec);
+                            }
+                        })
                 })
             })));
     }
     // always show json editor and links editor by default
     tabs.push({
-        label: 'JSON',
-        content: /*#__PURE__*/ _jsx(JSONEditor, {
-            maxHeight: "80vh",
-            value: panelDefinition,
-            onChange: onJSONChange
+        label: 'Links',
+        content: /*#__PURE__*/ _jsx(LinksEditor, {
+            control: control
         })
     });
     tabs.push({
-        label: 'Links',
-        content: /*#__PURE__*/ _jsx(LinksEditor, {})
+        label: 'JSON',
+        content: /*#__PURE__*/ _jsx(Controller, {
+            control: control,
+            name: "panelDefinition.spec.plugin.spec",
+            render: ({ field })=>/*#__PURE__*/ _jsx(JSONEditor, {
+                    maxHeight: "80vh",
+                    value: panelDefinition,
+                    onChange: (json)=>{
+                        field.onChange(json);
+                        onJSONChange(json);
+                    }
+                })
+        })
+    });
+    var _panelDefinition_spec_queries;
+    return /*#__PURE__*/ _jsx(QueryCountProvider, {
+        queryCount: ((_panelDefinition_spec_queries = panelDefinition.spec.queries) !== null && _panelDefinition_spec_queries !== void 0 ? _panelDefinition_spec_queries : []).length,
+        children: /*#__PURE__*/ _jsx(OptionsEditorTabs, {
+            tabs: tabs
+        }, tabs.length)
     });
-    return /*#__PURE__*/ _jsx(OptionsEditorTabs, {
-        tabs: tabs
-    }, tabs.length);
 }
 
 //# sourceMappingURL=PanelSpecEditor.js.map

package/dist/components/PanelSpecEditor/PanelSpecEditor.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PanelSpecEditor/PanelSpecEditor.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { ErrorAlert, JSONEditor, LinksEditor } from '@perses-dev/components';\nimport { PanelDefinition, QueryDefinition, UnknownSpec } from '@perses-dev/core';\nimport { usePlugin } from '../../runtime';\nimport { PanelPlugin } from '../../model';\nimport { OptionsEditorTabsProps, OptionsEditorTabs } from '../OptionsEditorTabs';\nimport { MultiQueryEditor } from '../MultiQueryEditor';\n\nexport interface PanelSpecEditorProps {\n  panelDefinition: PanelDefinition;\n  onQueriesChange: (queries: QueryDefinition[]) => void;\n  onPluginSpecChange: (spec: UnknownSpec) => void;\n  onJSONChange: (panelDefinitionStr: string) => void;\n}\n\nexport function PanelSpecEditor(props: PanelSpecEditorProps) {\n  const { panelDefinition, onJSONChange, onQueriesChange, onPluginSpecChange } = props;\n  const { kind } = panelDefinition.spec.plugin;\n  const { data: plugin, isLoading, error } = usePlugin('Panel', kind);\n\n  if (error) {\n    return <ErrorAlert error={error} />;\n  }\n\n  // TODO: Proper loading indicator\n  if (isLoading) {\n    return null;\n  }\n\n  if (plugin === undefined) {\n    throw new Error(`Missing implementation for panel plugin with kind '${kind}'`);\n  }\n\n  const { panelOptionsEditorComponents, hideQueryEditor } = plugin as PanelPlugin;\n  let tabs: OptionsEditorTabsProps['tabs'] = [];\n\n  if (!hideQueryEditor) {\n    tabs.push({\n      label: 'Query',\n      content: (\n        <MultiQueryEditor\n          queryTypes={plugin.supportedQueryTypes ?? []}\n          queries={panelDefinition.spec.queries ?? []}\n          onChange={onQueriesChange}\n        />\n      ),\n    });\n  }\n\n  if (panelOptionsEditorComponents !== undefined) {\n    tabs = tabs.concat(\n      panelOptionsEditorComponents.map(({ label, content: OptionsEditorComponent }) => ({\n        label,\n        content: <OptionsEditorComponent value={panelDefinition.spec.plugin.spec} onChange={onPluginSpecChange} />,\n      }))\n    );\n  }\n\n  // always show json editor and links editor by default\n  tabs.push({\n    label: 'JSON',\n    content: <JSONEditor maxHeight=\"80vh\" value={panelDefinition} onChange={onJSONChange} />,\n  });\n  tabs.push({\n    label: 'Links',\n    content: <LinksEditor />,\n  });\n\n  return <OptionsEditorTabs key={tabs.length} tabs={tabs} />;\n}\n"],"names":["ErrorAlert","JSONEditor","LinksEditor","usePlugin","OptionsEditorTabs","MultiQueryEditor","PanelSpecEditor","props","panelDefinition","onJSONChange","onQueriesChange","onPluginSpecChange","kind","spec","plugin","data","isLoading","error","undefined","Error","panelOptionsEditorComponents","hideQueryEditor","tabs","push","label","content","queryTypes","supportedQueryTypes","queries","onChange","concat","map","OptionsEditorComponent","value","maxHeight","length"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,UAAU,EAAEC,UAAU,EAAEC,WAAW,QAAQ,yBAAyB;AAE7E,SAASC,SAAS,QAAQ,gBAAgB;AAE1C,SAAiCC,iBAAiB,QAAQ,uBAAuB;AACjF,SAASC,gBAAgB,QAAQ,sBAAsB;AASvD,OAAO,SAASC,gBAAgBC,KAA2B;IACzD,MAAM,EAAEC,eAAe,EAAEC,YAAY,EAAEC,eAAe,EAAEC,kBAAkB,EAAE,GAAGJ;IAC/E,MAAM,EAAEK,IAAI,EAAE,GAAGJ,gBAAgBK,IAAI,CAACC,MAAM;IAC5C,MAAM,EAAEC,MAAMD,MAAM,EAAEE,SAAS,EAAEC,KAAK,EAAE,GAAGd,UAAU,SAASS;IAE9D,IAAIK,OAAO;QACT,qBAAO,KAACjB;YAAWiB,OAAOA;;IAC5B;IAEA,iCAAiC;IACjC,IAAID,WAAW;QACb,OAAO;IACT;IAEA,IAAIF,WAAWI,WAAW;QACxB,MAAM,IAAIC,MAAM,CAAC,mDAAmD,EAAEP,KAAK,CAAC,CAAC;IAC/E;IAEA,MAAM,EAAEQ,4BAA4B,EAAEC,eAAe,EAAE,GAAGP;IAC1D,IAAIQ,OAAuC,EAAE;IAE7C,IAAI,CAACD,iBAAiB;YAKFP,6BACHN;QALfc,KAAKC,IAAI,CAAC;YACRC,OAAO;YACPC,uBACE,KAACpB;gBACCqB,YAAYZ,CAAAA,8BAAAA,OAAOa,mBAAmB,cAA1Bb,yCAAAA,8BAA8B,EAAE;gBAC5Cc,SAASpB,CAAAA,gCAAAA,gBAAgBK,IAAI,CAACe,OAAO,cAA5BpB,2CAAAA,gCAAgC,EAAE;gBAC3CqB,UAAUnB;;QAGhB;IACF;IAEA,IAAIU,iCAAiCF,WAAW;QAC9CI,OAAOA,KAAKQ,MAAM,CAChBV,6BAA6BW,GAAG,CAAC,CAAC,EAAEP,KAAK,EAAEC,SAASO,sBAAsB,EAAE,GAAM,CAAA;gBAChFR;gBACAC,uBAAS,KAACO;oBAAuBC,OAAOzB,gBAAgBK,IAAI,CAACC,MAAM,CAACD,IAAI;oBAAEgB,UAAUlB;;YACtF,CAAA;IAEJ;IAEA,sDAAsD;IACtDW,KAAKC,IAAI,CAAC;QACRC,OAAO;QACPC,uBAAS,KAACxB;YAAWiC,WAAU;YAAOD,OAAOzB;YAAiBqB,UAAUpB;;IAC1E;IACAa,KAAKC,IAAI,CAAC;QACRC,OAAO;QACPC,uBAAS,KAACvB;IACZ;IAEA,qBAAO,KAACE;QAAoCkB,MAAMA;OAAnBA,KAAKa,MAAM;AAC5C"}
+{"version":3,"sources":["../../../src/components/PanelSpecEditor/PanelSpecEditor.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { ErrorAlert, JSONEditor, LinksEditor } from '@perses-dev/components';\nimport { PanelDefinition, PanelEditorValues, QueryDefinition, UnknownSpec } from '@perses-dev/core';\nimport { Control, Controller } from 'react-hook-form';\nimport { QueryCountProvider, usePlugin } from '../../runtime';\nimport { PanelPlugin } from '../../model';\nimport { OptionsEditorTabsProps, OptionsEditorTabs } from '../OptionsEditorTabs';\nimport { MultiQueryEditor } from '../MultiQueryEditor';\n\nexport interface PanelSpecEditorProps {\n  control: Control<PanelEditorValues>;\n  panelDefinition: PanelDefinition;\n  onQueriesChange: (queries: QueryDefinition[]) => void;\n  onPluginSpecChange: (spec: UnknownSpec) => void;\n  onJSONChange: (panelDefinitionStr: string) => void;\n}\n\nexport function PanelSpecEditor(props: PanelSpecEditorProps) {\n  const { control, panelDefinition, onJSONChange, onQueriesChange, onPluginSpecChange } = props;\n  const { kind } = panelDefinition.spec.plugin;\n  const { data: plugin, isLoading, error } = usePlugin('Panel', kind);\n\n  if (error) {\n    return <ErrorAlert error={error} />;\n  }\n\n  // TODO: Proper loading indicator\n  if (isLoading) {\n    return null;\n  }\n\n  if (plugin === undefined) {\n    throw new Error(`Missing implementation for panel plugin with kind '${kind}'`);\n  }\n\n  const { panelOptionsEditorComponents, hideQueryEditor } = plugin as PanelPlugin;\n  let tabs: OptionsEditorTabsProps['tabs'] = [];\n\n  if (!hideQueryEditor) {\n    tabs.push({\n      label: 'Query',\n      content: (\n        <Controller\n          control={control}\n          name=\"panelDefinition.spec.queries\"\n          render={({ field }) => (\n            <MultiQueryEditor\n              queryTypes={plugin.supportedQueryTypes ?? []}\n              queries={panelDefinition.spec.queries ?? []}\n              onChange={(queries) => {\n                field.onChange(queries);\n                onQueriesChange(queries);\n              }}\n            />\n          )}\n        />\n      ),\n    });\n  }\n\n  if (panelOptionsEditorComponents !== undefined) {\n    tabs = tabs.concat(\n      panelOptionsEditorComponents.map(({ label, content: OptionsEditorComponent }) => ({\n        label,\n        content: (\n          <Controller\n            control={control}\n            name=\"panelDefinition.spec.plugin.spec\"\n            render={({ field }) => (\n              <OptionsEditorComponent\n                value={panelDefinition.spec.plugin.spec}\n                onChange={(spec) => {\n                  field.onChange(spec);\n                  onPluginSpecChange(spec);\n                }}\n              />\n            )}\n          />\n        ),\n      }))\n    );\n  }\n\n  // always show json editor and links editor by default\n  tabs.push({\n    label: 'Links',\n    content: <LinksEditor control={control} />,\n  });\n  tabs.push({\n    label: 'JSON',\n    content: (\n      <Controller\n        control={control}\n        name=\"panelDefinition.spec.plugin.spec\"\n        render={({ field }) => (\n          <JSONEditor\n            maxHeight=\"80vh\"\n            value={panelDefinition}\n            onChange={(json) => {\n              field.onChange(json);\n              onJSONChange(json);\n            }}\n          />\n        )}\n      />\n    ),\n  });\n\n  return (\n    <QueryCountProvider queryCount={(panelDefinition.spec.queries ?? []).length}>\n      <OptionsEditorTabs key={tabs.length} tabs={tabs} />\n    </QueryCountProvider>\n  );\n}\n"],"names":["ErrorAlert","JSONEditor","LinksEditor","Controller","QueryCountProvider","usePlugin","OptionsEditorTabs","MultiQueryEditor","PanelSpecEditor","props","control","panelDefinition","onJSONChange","onQueriesChange","onPluginSpecChange","kind","spec","plugin","data","isLoading","error","undefined","Error","panelOptionsEditorComponents","hideQueryEditor","tabs","push","label","content","name","render","field","queryTypes","supportedQueryTypes","queries","onChange","concat","map","OptionsEditorComponent","value","maxHeight","json","queryCount","length"],"mappings":"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"}

package/dist/components/PluginKindSelect/PluginKindSelect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PluginKindSelect.d.ts","sourceRoot":"","sources":["../../../src/components/PluginKindSelect/PluginKindSelect.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAuB,cAAc,EAAE,MAAM,eAAe,CAAC;AAEpE,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAEzC,OAAO,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAC;AAExD,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CAAC,cAAc,EAAE,OAAO,GAAG,UAAU,GAAG,UAAU,CAAC;IACpG,WAAW,EAAE,UAAU,EAAE,CAAC;IAC1B,KAAK,CAAC,EAAE,qBAAqB,CAAC;IAC9B,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,qBAAqB,KAAK,IAAI,CAAC;CAC/C;AAED;;;;;;GAMG;AACH,eAAO,MAAM,gBAAgB,wHA6C3B,CAAC"}
+{"version":3,"file":"PluginKindSelect.d.ts","sourceRoot":"","sources":["../../../src/components/PluginKindSelect/PluginKindSelect.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAuB,cAAc,EAAE,MAAM,eAAe,CAAC;AAEpE,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAEzC,OAAO,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAC;AAExD,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CAAC,cAAc,EAAE,OAAO,GAAG,UAAU,GAAG,UAAU,CAAC;IACpG,WAAW,EAAE,UAAU,EAAE,CAAC;IAC1B,KAAK,CAAC,EAAE,qBAAqB,CAAC;IAC9B,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,qBAAqB,KAAK,IAAI,CAAC;CAC/C;AAED;;;;;;GAMG;AACH,eAAO,MAAM,gBAAgB,wHA8C3B,CAAC"}

package/dist/components/PluginKindSelect/PluginKindSelect.js

@@ -44,6 +44,7 @@ import { useListPluginMetadata } from '../../runtime';
         inputRef: ref,
         ...others,
         value: value,
+        "aria-label": value,
         onChange: handleChange,
         SelectProps: {
             renderValue

package/dist/components/PluginKindSelect/PluginKindSelect.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PluginKindSelect/PluginKindSelect.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { MenuItem, TextField, TextFieldProps } from '@mui/material';\nimport { forwardRef, useCallback } from 'react';\nimport { PluginType } from '../../model';\nimport { useListPluginMetadata } from '../../runtime';\nimport { PluginEditorSelection } from '../PluginEditor';\n\nexport interface PluginKindSelectProps extends Omit<TextFieldProps, 'value' | 'onChange' | 'children'> {\n  pluginTypes: PluginType[];\n  value?: PluginEditorSelection;\n  onChange?: (s: PluginEditorSelection) => void;\n}\n\n/**\n * Displays a MUI Select input for selecting a plugin's kind from a list of all the available plugins of some specific\n * plugin types. (e.g. \"Show a list of all the Panel plugins\", or \"Show a list of all the Variable plugins\", or \"Show\n * a list of all the TimeSeriesQuery, TraceQuery, and LogQuery plugins\").\n * The value of the select is the kind of the plugin, but you can also listen to the `onPluginTypeChange` event to know\n * when the user changes the plugin type (it fires at start for the default value.)\n */\nexport const PluginKindSelect = forwardRef((props: PluginKindSelectProps, ref) => {\n  const { pluginTypes, value: propValue, onChange, ...others } = props;\n  const { data, isLoading } = useListPluginMetadata(pluginTypes);\n\n  // Pass an empty value while options are still loading so MUI doesn't complain about us using an \"out of range\" value\n  const value = !propValue || isLoading ? '' : selectionToOptionValue(propValue);\n\n  const handleChange = (event: { target: { value: string } }) => {\n    onChange?.(optionValueToSelection(event.target.value));\n  };\n\n  const renderValue = useCallback(\n    (selected: unknown) => {\n      if (selected === '') {\n        return '';\n      }\n      const selectedValue = optionValueToSelection(selected as string);\n      return data?.find((v) => v.pluginType === selectedValue.type && v.kind === selectedValue.kind)?.display.name;\n    },\n    [data]\n  );\n\n  // TODO: Does this need a loading indicator of some kind?\n  return (\n    <TextField\n      select\n      inputRef={ref}\n      {...others}\n      value={value}\n      onChange={handleChange}\n      SelectProps={{ renderValue }}\n      data-testid=\"plugin-kind-select\"\n    >\n      {isLoading && <MenuItem value=\"\">Loading...</MenuItem>}\n      {data?.map((metadata) => (\n        <MenuItem\n          data-testid=\"option\"\n          key={metadata.pluginType + metadata.kind}\n          value={selectionToOptionValue({ type: metadata.pluginType, kind: metadata.kind })}\n        >\n          {metadata.display.name}\n        </MenuItem>\n      ))}\n    </TextField>\n  );\n});\nPluginKindSelect.displayName = 'PluginKindSelect';\n\n// Delimiter used to stringify/parse option values\nconst OPTION_VALUE_DELIMITER = '_____';\n\n/**\n * Given a PluginEditorSelection,\n * returns a string value like `{type}_____{kind}` that can be used as a Select input value.\n * @param selector\n */\nfunction selectionToOptionValue(selector: PluginEditorSelection): string {\n  return [selector.type, selector.kind].join(OPTION_VALUE_DELIMITER);\n}\n\n/**\n * Given an option value name like `{type}_____{kind}`,\n * returns a PluginEditorSelection to be used by the query data model.\n * @param optionValue\n */\nfunction optionValueToSelection(optionValue: string): PluginEditorSelection {\n  const words = optionValue.split(OPTION_VALUE_DELIMITER);\n  const type = words[0] as PluginType | undefined;\n  const kind = words[1];\n  if (type === undefined || kind === undefined) {\n    throw new Error('Invalid optionValue string');\n  }\n  return {\n    type,\n    kind,\n  };\n}\n"],"names":["MenuItem","TextField","forwardRef","useCallback","useListPluginMetadata","PluginKindSelect","props","ref","pluginTypes","value","propValue","onChange","others","data","isLoading","selectionToOptionValue","handleChange","event","optionValueToSelection","target","renderValue","selected","selectedValue","find","v","pluginType","type","kind","display","name","select","inputRef","SelectProps","data-testid","map","metadata","displayName","OPTION_VALUE_DELIMITER","selector","join","optionValue","words","split","undefined","Error"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,QAAQ,EAAEC,SAAS,QAAwB,gBAAgB;AACpE,SAASC,UAAU,EAAEC,WAAW,QAAQ,QAAQ;AAEhD,SAASC,qBAAqB,QAAQ,gBAAgB;AAStD;;;;;;CAMC,GACD,OAAO,MAAMC,iCAAmBH,WAAW,CAACI,OAA8BC;IACxE,MAAM,EAAEC,WAAW,EAAEC,OAAOC,SAAS,EAAEC,QAAQ,EAAE,GAAGC,QAAQ,GAAGN;IAC/D,MAAM,EAAEO,IAAI,EAAEC,SAAS,EAAE,GAAGV,sBAAsBI;IAElD,qHAAqH;IACrH,MAAMC,QAAQ,CAACC,aAAaI,YAAY,KAAKC,uBAAuBL;IAEpE,MAAMM,eAAe,CAACC;QACpBN,qBAAAA,+BAAAA,SAAWO,uBAAuBD,MAAME,MAAM,CAACV,KAAK;IACtD;IAEA,MAAMW,cAAcjB,YAClB,CAACkB;YAKQR;QAJP,IAAIQ,aAAa,IAAI;YACnB,OAAO;QACT;QACA,MAAMC,gBAAgBJ,uBAAuBG;QAC7C,OAAOR,iBAAAA,4BAAAA,aAAAA,KAAMU,IAAI,CAAC,CAACC,IAAMA,EAAEC,UAAU,KAAKH,cAAcI,IAAI,IAAIF,EAAEG,IAAI,KAAKL,cAAcK,IAAI,eAAtFd,iCAAAA,WAAyFe,OAAO,CAACC,IAAI;IAC9G,GACA;QAAChB;KAAK;IAGR,yDAAyD;IACzD,qBACE,MAACZ;QACC6B,MAAM;QACNC,UAAUxB;QACT,GAAGK,MAAM;QACVH,OAAOA;QACPE,UAAUK;QACVgB,aAAa;YAAEZ;QAAY;QAC3Ba,eAAY;;YAEXnB,2BAAa,KAACd;gBAASS,OAAM;0BAAG;;YAChCI,iBAAAA,2BAAAA,KAAMqB,GAAG,CAAC,CAACC,yBACV,KAACnC;oBACCiC,eAAY;oBAEZxB,OAAOM,uBAAuB;wBAAEW,MAAMS,SAASV,UAAU;wBAAEE,MAAMQ,SAASR,IAAI;oBAAC;8BAE9EQ,SAASP,OAAO,CAACC,IAAI;mBAHjBM,SAASV,UAAU,GAAGU,SAASR,IAAI;;;AAQlD,GAAG;AACHtB,iBAAiB+B,WAAW,GAAG;AAE/B,kDAAkD;AAClD,MAAMC,yBAAyB;AAE/B;;;;CAIC,GACD,SAAStB,uBAAuBuB,QAA+B;IAC7D,OAAO;QAACA,SAASZ,IAAI;QAAEY,SAASX,IAAI;KAAC,CAACY,IAAI,CAACF;AAC7C;AAEA;;;;CAIC,GACD,SAASnB,uBAAuBsB,WAAmB;IACjD,MAAMC,QAAQD,YAAYE,KAAK,CAACL;IAChC,MAAMX,OAAOe,KAAK,CAAC,EAAE;IACrB,MAAMd,OAAOc,KAAK,CAAC,EAAE;IACrB,IAAIf,SAASiB,aAAahB,SAASgB,WAAW;QAC5C,MAAM,IAAIC,MAAM;IAClB;IACA,OAAO;QACLlB;QACAC;IACF;AACF"}
+{"version":3,"sources":["../../../src/components/PluginKindSelect/PluginKindSelect.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { MenuItem, TextField, TextFieldProps } from '@mui/material';\nimport { forwardRef, useCallback } from 'react';\nimport { PluginType } from '../../model';\nimport { useListPluginMetadata } from '../../runtime';\nimport { PluginEditorSelection } from '../PluginEditor';\n\nexport interface PluginKindSelectProps extends Omit<TextFieldProps, 'value' | 'onChange' | 'children'> {\n  pluginTypes: PluginType[];\n  value?: PluginEditorSelection;\n  onChange?: (s: PluginEditorSelection) => void;\n}\n\n/**\n * Displays a MUI Select input for selecting a plugin's kind from a list of all the available plugins of some specific\n * plugin types. (e.g. \"Show a list of all the Panel plugins\", or \"Show a list of all the Variable plugins\", or \"Show\n * a list of all the TimeSeriesQuery, TraceQuery, and LogQuery plugins\").\n * The value of the select is the kind of the plugin, but you can also listen to the `onPluginTypeChange` event to know\n * when the user changes the plugin type (it fires at start for the default value.)\n */\nexport const PluginKindSelect = forwardRef((props: PluginKindSelectProps, ref) => {\n  const { pluginTypes, value: propValue, onChange, ...others } = props;\n  const { data, isLoading } = useListPluginMetadata(pluginTypes);\n\n  // Pass an empty value while options are still loading so MUI doesn't complain about us using an \"out of range\" value\n  const value = !propValue || isLoading ? '' : selectionToOptionValue(propValue);\n\n  const handleChange = (event: { target: { value: string } }) => {\n    onChange?.(optionValueToSelection(event.target.value));\n  };\n\n  const renderValue = useCallback(\n    (selected: unknown) => {\n      if (selected === '') {\n        return '';\n      }\n      const selectedValue = optionValueToSelection(selected as string);\n      return data?.find((v) => v.pluginType === selectedValue.type && v.kind === selectedValue.kind)?.display.name;\n    },\n    [data]\n  );\n\n  // TODO: Does this need a loading indicator of some kind?\n  return (\n    <TextField\n      select\n      inputRef={ref}\n      {...others}\n      value={value}\n      aria-label={value}\n      onChange={handleChange}\n      SelectProps={{ renderValue }}\n      data-testid=\"plugin-kind-select\"\n    >\n      {isLoading && <MenuItem value=\"\">Loading...</MenuItem>}\n      {data?.map((metadata) => (\n        <MenuItem\n          data-testid=\"option\"\n          key={metadata.pluginType + metadata.kind}\n          value={selectionToOptionValue({ type: metadata.pluginType, kind: metadata.kind })}\n        >\n          {metadata.display.name}\n        </MenuItem>\n      ))}\n    </TextField>\n  );\n});\nPluginKindSelect.displayName = 'PluginKindSelect';\n\n// Delimiter used to stringify/parse option values\nconst OPTION_VALUE_DELIMITER = '_____';\n\n/**\n * Given a PluginEditorSelection,\n * returns a string value like `{type}_____{kind}` that can be used as a Select input value.\n * @param selector\n */\nfunction selectionToOptionValue(selector: PluginEditorSelection): string {\n  return [selector.type, selector.kind].join(OPTION_VALUE_DELIMITER);\n}\n\n/**\n * Given an option value name like `{type}_____{kind}`,\n * returns a PluginEditorSelection to be used by the query data model.\n * @param optionValue\n */\nfunction optionValueToSelection(optionValue: string): PluginEditorSelection {\n  const words = optionValue.split(OPTION_VALUE_DELIMITER);\n  const type = words[0] as PluginType | undefined;\n  const kind = words[1];\n  if (type === undefined || kind === undefined) {\n    throw new Error('Invalid optionValue string');\n  }\n  return {\n    type,\n    kind,\n  };\n}\n"],"names":["MenuItem","TextField","forwardRef","useCallback","useListPluginMetadata","PluginKindSelect","props","ref","pluginTypes","value","propValue","onChange","others","data","isLoading","selectionToOptionValue","handleChange","event","optionValueToSelection","target","renderValue","selected","selectedValue","find","v","pluginType","type","kind","display","name","select","inputRef","aria-label","SelectProps","data-testid","map","metadata","displayName","OPTION_VALUE_DELIMITER","selector","join","optionValue","words","split","undefined","Error"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,QAAQ,EAAEC,SAAS,QAAwB,gBAAgB;AACpE,SAASC,UAAU,EAAEC,WAAW,QAAQ,QAAQ;AAEhD,SAASC,qBAAqB,QAAQ,gBAAgB;AAStD;;;;;;CAMC,GACD,OAAO,MAAMC,iCAAmBH,WAAW,CAACI,OAA8BC;IACxE,MAAM,EAAEC,WAAW,EAAEC,OAAOC,SAAS,EAAEC,QAAQ,EAAE,GAAGC,QAAQ,GAAGN;IAC/D,MAAM,EAAEO,IAAI,EAAEC,SAAS,EAAE,GAAGV,sBAAsBI;IAElD,qHAAqH;IACrH,MAAMC,QAAQ,CAACC,aAAaI,YAAY,KAAKC,uBAAuBL;IAEpE,MAAMM,eAAe,CAACC;QACpBN,qBAAAA,+BAAAA,SAAWO,uBAAuBD,MAAME,MAAM,CAACV,KAAK;IACtD;IAEA,MAAMW,cAAcjB,YAClB,CAACkB;YAKQR;QAJP,IAAIQ,aAAa,IAAI;YACnB,OAAO;QACT;QACA,MAAMC,gBAAgBJ,uBAAuBG;QAC7C,OAAOR,iBAAAA,4BAAAA,aAAAA,KAAMU,IAAI,CAAC,CAACC,IAAMA,EAAEC,UAAU,KAAKH,cAAcI,IAAI,IAAIF,EAAEG,IAAI,KAAKL,cAAcK,IAAI,eAAtFd,iCAAAA,WAAyFe,OAAO,CAACC,IAAI;IAC9G,GACA;QAAChB;KAAK;IAGR,yDAAyD;IACzD,qBACE,MAACZ;QACC6B,MAAM;QACNC,UAAUxB;QACT,GAAGK,MAAM;QACVH,OAAOA;QACPuB,cAAYvB;QACZE,UAAUK;QACViB,aAAa;YAAEb;QAAY;QAC3Bc,eAAY;;YAEXpB,2BAAa,KAACd;gBAASS,OAAM;0BAAG;;YAChCI,iBAAAA,2BAAAA,KAAMsB,GAAG,CAAC,CAACC,yBACV,KAACpC;oBACCkC,eAAY;oBAEZzB,OAAOM,uBAAuB;wBAAEW,MAAMU,SAASX,UAAU;wBAAEE,MAAMS,SAAST,IAAI;oBAAC;8BAE9ES,SAASR,OAAO,CAACC,IAAI;mBAHjBO,SAASX,UAAU,GAAGW,SAAST,IAAI;;;AAQlD,GAAG;AACHtB,iBAAiBgC,WAAW,GAAG;AAE/B,kDAAkD;AAClD,MAAMC,yBAAyB;AAE/B;;;;CAIC,GACD,SAASvB,uBAAuBwB,QAA+B;IAC7D,OAAO;QAACA,SAASb,IAAI;QAAEa,SAASZ,IAAI;KAAC,CAACa,IAAI,CAACF;AAC7C;AAEA;;;;CAIC,GACD,SAASpB,uBAAuBuB,WAAmB;IACjD,MAAMC,QAAQD,YAAYE,KAAK,CAACL;IAChC,MAAMZ,OAAOgB,KAAK,CAAC,EAAE;IACrB,MAAMf,OAAOe,KAAK,CAAC,EAAE;IACrB,IAAIhB,SAASkB,aAAajB,SAASiB,WAAW;QAC5C,MAAM,IAAIC,MAAM;IAClB;IACA,OAAO;QACLnB;QACAC;IACF;AACF"}

package/dist/components/TimeRangeControls/TimeRangeControls.d.ts

@@ -1,13 +1,13 @@
 import { TimeOption } from '@perses-dev/components';
-export declare const DEFAULT_TIME_RANGE_OPTIONS: TimeOption[];
 export declare const DEFAULT_REFRESH_INTERVAL_OPTIONS: TimeOption[];
 interface TimeRangeControlsProps {
     heightPx?: number;
     showTimeRangeSelector?: boolean;
     showRefreshButton?: boolean;
     showRefreshInterval?: boolean;
+    showCustomTimeRange?: boolean;
     timePresets?: TimeOption[];
 }
-export declare function TimeRangeControls({ heightPx, showTimeRangeSelector, showRefreshButton, showRefreshInterval, timePresets, }: TimeRangeControlsProps): import("react/jsx-runtime").JSX.Element;
+export declare function TimeRangeControls({ heightPx, showTimeRangeSelector, showRefreshButton, showRefreshInterval, showCustomTimeRange, timePresets, }: TimeRangeControlsProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=TimeRangeControls.d.ts.map

package/dist/components/TimeRangeControls/TimeRangeControls.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TimeRangeControls.d.ts","sourceRoot":"","sources":["../../../src/components/TimeRangeControls/TimeRangeControls.tsx"],"names":[],"mappings":"AAeA,OAAO,EAIL,UAAU,EAEX,MAAM,wBAAwB,CAAC;AAMhC,eAAO,MAAM,0BAA0B,EAAE,UAAU,EAUlD,CAAC;AAEF,eAAO,MAAM,gCAAgC,EAAE,UAAU,EAOxD,CAAC;AAIF,UAAU,sBAAsB;IAE9B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,WAAW,CAAC,EAAE,UAAU,EAAE,CAAC;CAC5B;AAED,wBAAgB,iBAAiB,CAAC,EAChC,QAAQ,EACR,qBAA4B,EAC5B,iBAAwB,EACxB,mBAA0B,EAC1B,WAAwC,GACzC,EAAE,sBAAsB,2CAiDxB"}
+{"version":3,"file":"TimeRangeControls.d.ts","sourceRoot":"","sources":["../../../src/components/TimeRangeControls/TimeRangeControls.tsx"],"names":[],"mappings":"AAeA,OAAO,EAGL,UAAU,EAIX,MAAM,wBAAwB,CAAC;AAMhC,eAAO,MAAM,gCAAgC,EAAE,UAAU,EAOxD,CAAC;AAIF,UAAU,sBAAsB;IAE9B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,WAAW,CAAC,EAAE,UAAU,EAAE,CAAC;CAC5B;AAED,wBAAgB,iBAAiB,CAAC,EAChC,QAAQ,EACR,qBAA4B,EAC5B,iBAAwB,EACxB,mBAA0B,EAC1B,mBAAmB,EACnB,WAAW,GACZ,EAAE,sBAAsB,2CAuDxB"}