@perses-dev/dashboards 0.52.0-rc.0 → 0.52.0

package/dist/components/Variables/VariableEditor.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Variables/VariableEditor.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, useMemo, ReactElement } from 'react';\nimport {\n  Button,\n  Stack,\n  Box,\n  TableContainer,\n  TableBody,\n  TableRow,\n  TableCell as MuiTableCell,\n  Table,\n  TableHead,\n  Switch,\n  Typography,\n  IconButton,\n  Alert,\n  styled,\n  capitalize,\n  Tooltip,\n  Accordion,\n  AccordionSummary,\n  AccordionDetails,\n} from '@mui/material';\nimport AddIcon from 'mdi-material-ui/Plus';\nimport { Action, BuiltinVariableDefinition, VariableDefinition } from '@perses-dev/core';\nimport { useImmer } from 'use-immer';\nimport PencilIcon from 'mdi-material-ui/Pencil';\nimport TrashIcon from 'mdi-material-ui/TrashCan';\nimport ArrowUp from 'mdi-material-ui/ArrowUp';\nimport ArrowDown from 'mdi-material-ui/ArrowDown';\nimport ContentDuplicate from 'mdi-material-ui/ContentDuplicate';\nimport OpenInNewIcon from 'mdi-material-ui/OpenInNew';\nimport ExpandMoreIcon from 'mdi-material-ui/ChevronUp';\n\nimport { ValidationProvider, VariableEditorForm, VariableState, VARIABLE_TYPES } from '@perses-dev/plugin-system';\nimport { InfoTooltip } from '@perses-dev/components';\nimport { ExternalVariableDefinition, useDiscardChangesConfirmationDialog } from '../../context';\nimport { hydrateVariableDefinitionStates } from '../../context/VariableProvider/hydrationUtils';\nimport { BuiltinVariableAccordions } from './BuiltinVariableAccordions';\n\nfunction getVariableLabelByKind(kind: string): 'List' | 'Text' | undefined {\n  return VARIABLE_TYPES.find((variableType) => variableType.kind === kind)?.label;\n}\n\nfunction getValidation(variableDefinitions: VariableDefinition[]): { isValid: boolean; errors: string[] } {\n  const errors: string[] = [];\n\n  /**  Variable names must be unique */\n  const variableNames = variableDefinitions.map((variableDefinition) => variableDefinition.spec.name);\n  const uniqueVariableNames = new Set(variableNames);\n  if (variableNames.length !== uniqueVariableNames.size) {\n    errors.push('Variable names must be unique');\n  }\n  return {\n    errors: errors,\n    isValid: errors.length === 0,\n  };\n}\n\nexport function VariableEditor(props: {\n  variableDefinitions: VariableDefinition[];\n  externalVariableDefinitions: ExternalVariableDefinition[];\n  builtinVariableDefinitions: BuiltinVariableDefinition[];\n  onChange: (variableDefinitions: VariableDefinition[]) => void;\n  onCancel: () => void;\n}): ReactElement {\n  const [variableDefinitions, setVariableDefinitions] = useImmer(props.variableDefinitions);\n  const [variableEditIdx, setVariableEditIdx] = useState<number | null>(null);\n  const [variableFormAction, setVariableFormAction] = useState<Action>('update');\n\n  const externalVariableDefinitions = props.externalVariableDefinitions;\n  const builtinVariableDefinitions = props.builtinVariableDefinitions;\n  const validation = useMemo(() => getValidation(variableDefinitions), [variableDefinitions]);\n  const [variableState] = useMemo(() => {\n    return [hydrateVariableDefinitionStates(variableDefinitions, {}, externalVariableDefinitions)];\n  }, [externalVariableDefinitions, variableDefinitions]);\n  const currentEditingVariableDefinition = typeof variableEditIdx === 'number' && variableDefinitions[variableEditIdx];\n\n  const { openDiscardChangesConfirmationDialog, closeDiscardChangesConfirmationDialog } =\n    useDiscardChangesConfirmationDialog();\n  const handleCancel = (): void => {\n    if (JSON.stringify(props.variableDefinitions) !== JSON.stringify(variableDefinitions)) {\n      openDiscardChangesConfirmationDialog({\n        onDiscardChanges: () => {\n          closeDiscardChangesConfirmationDialog();\n          props.onCancel();\n        },\n        onCancel: () => {\n          closeDiscardChangesConfirmationDialog();\n        },\n        description:\n          'You have unapplied changes. Are you sure you want to discard these changes? Changes cannot be recovered.',\n      });\n    } else {\n      props.onCancel();\n    }\n  };\n\n  const removeVariable = (index: number): void => {\n    setVariableDefinitions((draft) => {\n      draft.splice(index, 1);\n    });\n  };\n\n  const addVariable = (): void => {\n    setVariableFormAction('create');\n    setVariableDefinitions((draft) => {\n      draft.push({\n        kind: 'TextVariable',\n        spec: {\n          name: 'NewVariable',\n          value: '',\n        },\n      });\n    });\n    setVariableEditIdx(variableDefinitions.length);\n  };\n\n  const editVariable = (index: number): void => {\n    setVariableFormAction('update');\n    setVariableEditIdx(index);\n  };\n\n  const toggleVariableVisibility = (index: number, visible: boolean): void => {\n    setVariableDefinitions((draft) => {\n      const v = draft[index];\n      if (!v) {\n        return;\n      }\n      if (!v.spec.display) {\n        v.spec.display = {\n          name: v.spec.name,\n          hidden: false,\n        };\n      }\n      v.spec.display.hidden = visible === false;\n    });\n  };\n\n  const changeVariableOrder = (index: number, direction: 'up' | 'down'): void => {\n    setVariableDefinitions((draft) => {\n      if (direction === 'up') {\n        const prevElement = draft[index - 1];\n        const currentElement = draft[index];\n        if (index === 0 || !prevElement || !currentElement) {\n          return;\n        }\n        draft[index - 1] = currentElement;\n        draft[index] = prevElement;\n      } else {\n        const nextElement = draft[index + 1];\n        const currentElement = draft[index];\n        if (index === draft.length - 1 || !nextElement || !currentElement) {\n          return;\n        }\n        draft[index + 1] = currentElement;\n        draft[index] = nextElement;\n      }\n    });\n  };\n\n  const overrideVariable = (v: VariableDefinition): void => {\n    setVariableDefinitions((draft) => {\n      draft.push(v);\n    });\n  };\n\n  return (\n    <>\n      {currentEditingVariableDefinition && (\n        <ValidationProvider>\n          <VariableEditorForm\n            initialVariableDefinition={currentEditingVariableDefinition}\n            action={variableFormAction}\n            isDraft={true}\n            onActionChange={setVariableFormAction}\n            onSave={(definition: VariableDefinition) => {\n              setVariableDefinitions((draft) => {\n                draft[variableEditIdx] = definition;\n                setVariableEditIdx(null);\n              });\n            }}\n            onClose={() => {\n              if (variableFormAction === 'create') {\n                removeVariable(variableEditIdx);\n              }\n              setVariableEditIdx(null);\n            }}\n          />\n        </ValidationProvider>\n      )}\n      {!currentEditingVariableDefinition && (\n        <>\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\">Edit Dashboard Variables</Typography>\n            <Stack direction=\"row\" spacing={1} marginLeft=\"auto\">\n              <Button\n                disabled={props.variableDefinitions === variableDefinitions || !validation.isValid}\n                variant=\"contained\"\n                onClick={() => {\n                  props.onChange(variableDefinitions);\n                }}\n              >\n                Apply\n              </Button>\n              <Button color=\"secondary\" variant=\"outlined\" onClick={handleCancel}>\n                Cancel\n              </Button>\n            </Stack>\n          </Box>\n          <Box padding={2} sx={{ overflowY: 'scroll' }}>\n            <Stack spacing={2}>\n              <Stack spacing={2}>\n                {!validation.isValid &&\n                  validation.errors.map((error) => (\n                    <Alert severity=\"error\" key={error}>\n                      {error}\n                    </Alert>\n                  ))}\n                <TableContainer>\n                  <Table sx={{ minWidth: 650 }} aria-label=\"table of variables\">\n                    <TableHead>\n                      <TableRow>\n                        <TableCell>Visibility</TableCell>\n                        <TableCell>Name</TableCell>\n                        <TableCell>Type</TableCell>\n                        <TableCell>Description</TableCell>\n                        <TableCell align=\"right\">Actions</TableCell>\n                      </TableRow>\n                    </TableHead>\n                    <TableBody>\n                      {variableDefinitions.map((v, idx) => (\n                        <TableRow key={v.spec.name}>\n                          <TableCell component=\"th\" scope=\"row\">\n                            <Switch\n                              checked={v.spec.display?.hidden !== true}\n                              onChange={(e) => {\n                                toggleVariableVisibility(idx, e.target.checked);\n                              }}\n                            />\n                          </TableCell>\n                          <TableCell component=\"th\" scope=\"row\" sx={{ fontWeight: 'bold' }}>\n                            <VariableName name={v.spec.name} state={variableState.get({ name: v.spec.name })} />\n                          </TableCell>\n                          <TableCell>{getVariableLabelByKind(v.kind) ?? v.kind}</TableCell>\n                          <TableCell>{v.spec.display?.description ?? ''}</TableCell>\n                          <TableCell align=\"right\" sx={{ whiteSpace: 'nowrap' }}>\n                            <IconButton onClick={() => changeVariableOrder(idx, 'up')} disabled={idx === 0}>\n                              <ArrowUp />\n                            </IconButton>\n                            <IconButton\n                              onClick={() => changeVariableOrder(idx, 'down')}\n                              disabled={idx === variableDefinitions.length - 1}\n                            >\n                              <ArrowDown />\n                            </IconButton>\n                            <IconButton onClick={() => editVariable(idx)}>\n                              <PencilIcon />\n                            </IconButton>\n                            <IconButton onClick={() => removeVariable(idx)}>\n                              <TrashIcon />\n                            </IconButton>\n                          </TableCell>\n                        </TableRow>\n                      ))}\n                    </TableBody>\n                  </Table>\n                </TableContainer>\n                <Box display=\"flex\">\n                  <Button variant=\"contained\" startIcon={<AddIcon />} sx={{ marginLeft: 'auto' }} onClick={addVariable}>\n                    Add Variable\n                  </Button>\n                </Box>\n              </Stack>\n              {externalVariableDefinitions &&\n                !externalVariableDefinitions.every((v) => v.definitions.length === 0) &&\n                externalVariableDefinitions.map(\n                  (extVar, key) =>\n                    extVar.definitions.length > 0 && (\n                      <Accordion\n                        key={key}\n                        sx={(theme) => ({\n                          '.MuiAccordionSummary-root': {\n                            backgroundColor: theme.palette.background.lighter,\n                          },\n                          '.MuiAccordionDetails-root': {\n                            backgroundColor: theme.palette.background.lighter,\n                          },\n                        })}\n                      >\n                        <AccordionSummary\n                          expandIcon={<ExpandMoreIcon />}\n                          aria-controls={extVar.source}\n                          id={extVar.source}\n                        >\n                          <Stack flexDirection=\"row\" alignItems=\"center\" justifyContent=\"start\">\n                            <>\n                              {extVar.tooltip ? (\n                                <Typography variant=\"h2\">\n                                  <InfoTooltip\n                                    title={extVar.tooltip.title || ''}\n                                    description={extVar.tooltip.description || ''}\n                                  >\n                                    <span>{capitalize(extVar.source)} Variables</span>\n                                  </InfoTooltip>\n                                </Typography>\n                              ) : (\n                                <Typography variant=\"h2\">{capitalize(extVar.source)} Variables</Typography>\n                              )}\n                              {extVar.editLink && (\n                                <IconButton href={extVar.editLink} target=\"_blank\">\n                                  <OpenInNewIcon fontSize=\"small\" />\n                                </IconButton>\n                              )}\n                            </>\n                          </Stack>\n                        </AccordionSummary>\n                        <AccordionDetails>\n                          <TableContainer>\n                            <Table sx={{ minWidth: 650 }} aria-label=\"table of external variables\">\n                              <TableHead>\n                                <TableRow>\n                                  <TableCell>Visibility</TableCell>\n                                  <TableCell>Name</TableCell>\n                                  <TableCell>Type</TableCell>\n                                  <TableCell>Description</TableCell>\n                                  <TableCell align=\"right\">Actions</TableCell>\n                                </TableRow>\n                              </TableHead>\n                              <TableBody>\n                                {extVar.definitions.map((v) => (\n                                  <TableRow key={v.spec.name}>\n                                    <TableCell component=\"th\" scope=\"row\">\n                                      <Switch checked={v.spec.display?.hidden !== true} disabled />\n                                    </TableCell>\n\n                                    <TableCell component=\"th\" scope=\"row\" sx={{ fontWeight: 'bold' }}>\n                                      <VariableName\n                                        name={v.spec.name}\n                                        state={variableState.get({ name: v.spec.name, source: extVar.source })}\n                                      />\n                                    </TableCell>\n                                    <TableCell>{getVariableLabelByKind(v.kind) ?? v.kind}</TableCell>\n                                    <TableCell>{v.spec.display?.description ?? ''}</TableCell>\n                                    <TableCell align=\"right\">\n                                      <Tooltip title=\"Override\">\n                                        <IconButton\n                                          onClick={() => overrideVariable(v)}\n                                          disabled={!!variableState.get({ name: v.spec.name })}\n                                        >\n                                          <ContentDuplicate />\n                                        </IconButton>\n                                      </Tooltip>\n                                      <IconButton disabled>\n                                        <ArrowUp />\n                                      </IconButton>\n                                      <IconButton disabled>\n                                        <ArrowDown />\n                                      </IconButton>\n                                      <IconButton disabled>\n                                        <PencilIcon />\n                                      </IconButton>\n                                      <IconButton disabled>\n                                        <TrashIcon />\n                                      </IconButton>\n                                    </TableCell>\n                                  </TableRow>\n                                ))}\n                              </TableBody>\n                            </Table>\n                          </TableContainer>\n                        </AccordionDetails>\n                      </Accordion>\n                    )\n                )}\n              {builtinVariableDefinitions && (\n                <BuiltinVariableAccordions builtinVariableDefinitions={builtinVariableDefinitions} />\n              )}\n            </Stack>\n          </Box>\n        </>\n      )}\n    </>\n  );\n}\n\nconst TableCell = styled(MuiTableCell)(({ theme }) => ({\n  borderBottom: `solid 1px ${theme.palette.divider}`,\n}));\n\nexport function VariableName(props: { name: string; state: VariableState | undefined }): ReactElement {\n  const { name, state } = props;\n  return (\n    <>\n      {!state?.overridden && `${name} `}\n      {!state?.overridden && state?.overriding && (\n        <Box fontWeight=\"normal\" color={(theme) => theme.palette.primary.main}>\n          (overriding)\n        </Box>\n      )}\n      {state?.overridden && (\n        <>\n          <Box color={(theme) => theme.palette.grey[500]}>{name}</Box>\n          <Box fontWeight=\"normal\" color={(theme) => theme.palette.grey[500]}>\n            (overridden)\n          </Box>\n        </>\n      )}\n    </>\n  );\n}\n"],"names":["useState","useMemo","Button","Stack","Box","TableContainer","TableBody","TableRow","TableCell","MuiTableCell","Table","TableHead","Switch","Typography","IconButton","Alert","styled","capitalize","Tooltip","Accordion","AccordionSummary","AccordionDetails","AddIcon","useImmer","PencilIcon","TrashIcon","ArrowUp","ArrowDown","ContentDuplicate","OpenInNewIcon","ExpandMoreIcon","ValidationProvider","VariableEditorForm","VARIABLE_TYPES","InfoTooltip","useDiscardChangesConfirmationDialog","hydrateVariableDefinitionStates","BuiltinVariableAccordions","getVariableLabelByKind","kind","find","variableType","label","getValidation","variableDefinitions","errors","variableNames","map","variableDefinition","spec","name","uniqueVariableNames","Set","length","size","push","isValid","VariableEditor","props","setVariableDefinitions","variableEditIdx","setVariableEditIdx","variableFormAction","setVariableFormAction","externalVariableDefinitions","builtinVariableDefinitions","validation","variableState","currentEditingVariableDefinition","openDiscardChangesConfirmationDialog","closeDiscardChangesConfirmationDialog","handleCancel","JSON","stringify","onDiscardChanges","onCancel","description","removeVariable","index","draft","splice","addVariable","value","editVariable","toggleVariableVisibility","visible","v","display","hidden","changeVariableOrder","direction","prevElement","currentElement","nextElement","overrideVariable","initialVariableDefinition","action","isDraft","onActionChange","onSave","definition","onClose","sx","alignItems","padding","theme","spacing","borderBottom","palette","divider","variant","marginLeft","disabled","onClick","onChange","color","overflowY","error","severity","minWidth","aria-label","align","idx","component","scope","checked","e","target","fontWeight","VariableName","state","get","whiteSpace","startIcon","every","definitions","extVar","key","backgroundColor","background","lighter","expandIcon","aria-controls","source","id","flexDirection","justifyContent","tooltip","title","span","editLink","href","fontSize","overridden","overriding","primary","main","grey"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/Variables/VariableEditor.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, useMemo, ReactElement } from 'react';\nimport {\n  Button,\n  Stack,\n  Box,\n  TableContainer,\n  TableBody,\n  TableRow,\n  TableCell as MuiTableCell,\n  Table,\n  TableHead,\n  Switch,\n  Typography,\n  IconButton,\n  Alert,\n  styled,\n  capitalize,\n  Tooltip,\n  Accordion,\n  AccordionSummary,\n  AccordionDetails,\n} from '@mui/material';\nimport AddIcon from 'mdi-material-ui/Plus';\nimport { Action, BuiltinVariableDefinition, DEFAULT_DASHBOARD_DURATION, VariableDefinition } from '@perses-dev/core';\nimport { useImmer } from 'use-immer';\nimport PencilIcon from 'mdi-material-ui/Pencil';\nimport TrashIcon from 'mdi-material-ui/TrashCan';\nimport ArrowUp from 'mdi-material-ui/ArrowUp';\nimport ArrowDown from 'mdi-material-ui/ArrowDown';\nimport ContentDuplicate from 'mdi-material-ui/ContentDuplicate';\nimport OpenInNewIcon from 'mdi-material-ui/OpenInNew';\nimport ExpandMoreIcon from 'mdi-material-ui/ChevronUp';\n\nimport {\n  ValidationProvider,\n  VariableEditorForm,\n  VariableState,\n  VARIABLE_TYPES,\n  useInitialTimeRange,\n  TimeRangeProvider,\n} from '@perses-dev/plugin-system';\nimport { InfoTooltip } from '@perses-dev/components';\nimport { ExternalVariableDefinition, useDashboard, useDiscardChangesConfirmationDialog } from '../../context';\nimport { hydrateVariableDefinitionStates } from '../../context/VariableProvider/hydrationUtils';\nimport { BuiltinVariableAccordions } from './BuiltinVariableAccordions';\n\nfunction getVariableLabelByKind(kind: string): 'List' | 'Text' | undefined {\n  return VARIABLE_TYPES.find((variableType) => variableType.kind === kind)?.label;\n}\n\nfunction getValidation(variableDefinitions: VariableDefinition[]): { isValid: boolean; errors: string[] } {\n  const errors: string[] = [];\n\n  /**  Variable names must be unique */\n  const variableNames = variableDefinitions.map((variableDefinition) => variableDefinition.spec.name);\n  const uniqueVariableNames = new Set(variableNames);\n  if (variableNames.length !== uniqueVariableNames.size) {\n    errors.push('Variable names must be unique');\n  }\n  return {\n    errors: errors,\n    isValid: errors.length === 0,\n  };\n}\n\nexport function VariableEditor(props: {\n  variableDefinitions: VariableDefinition[];\n  externalVariableDefinitions: ExternalVariableDefinition[];\n  builtinVariableDefinitions: BuiltinVariableDefinition[];\n  onChange: (variableDefinitions: VariableDefinition[]) => void;\n  onCancel: () => void;\n}): ReactElement {\n  const [variableDefinitions, setVariableDefinitions] = useImmer(props.variableDefinitions);\n  const [variableEditIdx, setVariableEditIdx] = useState<number | null>(null);\n  const [variableFormAction, setVariableFormAction] = useState<Action>('update');\n\n  const externalVariableDefinitions = props.externalVariableDefinitions;\n  const builtinVariableDefinitions = props.builtinVariableDefinitions;\n  const validation = useMemo(() => getValidation(variableDefinitions), [variableDefinitions]);\n  const [variableState] = useMemo(() => {\n    return [hydrateVariableDefinitionStates(variableDefinitions, {}, externalVariableDefinitions)];\n  }, [externalVariableDefinitions, variableDefinitions]);\n  const currentEditingVariableDefinition = typeof variableEditIdx === 'number' && variableDefinitions[variableEditIdx];\n\n  const { openDiscardChangesConfirmationDialog, closeDiscardChangesConfirmationDialog } =\n    useDiscardChangesConfirmationDialog();\n  const handleCancel = (): void => {\n    if (JSON.stringify(props.variableDefinitions) !== JSON.stringify(variableDefinitions)) {\n      openDiscardChangesConfirmationDialog({\n        onDiscardChanges: () => {\n          closeDiscardChangesConfirmationDialog();\n          props.onCancel();\n        },\n        onCancel: () => {\n          closeDiscardChangesConfirmationDialog();\n        },\n        description:\n          'You have unapplied changes. Are you sure you want to discard these changes? Changes cannot be recovered.',\n      });\n    } else {\n      props.onCancel();\n    }\n  };\n\n  const removeVariable = (index: number): void => {\n    setVariableDefinitions((draft) => {\n      draft.splice(index, 1);\n    });\n  };\n\n  const addVariable = (): void => {\n    setVariableFormAction('create');\n    setVariableDefinitions((draft) => {\n      draft.push({\n        kind: 'TextVariable',\n        spec: {\n          name: 'NewVariable',\n          value: '',\n        },\n      });\n    });\n    setVariableEditIdx(variableDefinitions.length);\n  };\n\n  const editVariable = (index: number): void => {\n    setVariableFormAction('update');\n    setVariableEditIdx(index);\n  };\n\n  const toggleVariableVisibility = (index: number, visible: boolean): void => {\n    setVariableDefinitions((draft) => {\n      const v = draft[index];\n      if (!v) {\n        return;\n      }\n      if (!v.spec.display) {\n        v.spec.display = {\n          name: v.spec.name,\n          hidden: false,\n        };\n      }\n      v.spec.display.hidden = visible === false;\n    });\n  };\n\n  const changeVariableOrder = (index: number, direction: 'up' | 'down'): void => {\n    setVariableDefinitions((draft) => {\n      if (direction === 'up') {\n        const prevElement = draft[index - 1];\n        const currentElement = draft[index];\n        if (index === 0 || !prevElement || !currentElement) {\n          return;\n        }\n        draft[index - 1] = currentElement;\n        draft[index] = prevElement;\n      } else {\n        const nextElement = draft[index + 1];\n        const currentElement = draft[index];\n        if (index === draft.length - 1 || !nextElement || !currentElement) {\n          return;\n        }\n        draft[index + 1] = currentElement;\n        draft[index] = nextElement;\n      }\n    });\n  };\n\n  const overrideVariable = (v: VariableDefinition): void => {\n    setVariableDefinitions((draft) => {\n      draft.push(v);\n    });\n  };\n\n  const { dashboard } = useDashboard();\n  const dashboardDuration = dashboard?.kind === 'Dashboard' ? dashboard.spec.duration : DEFAULT_DASHBOARD_DURATION;\n  const initialTimeRange = useInitialTimeRange(dashboardDuration);\n\n  return (\n    <>\n      {currentEditingVariableDefinition && (\n        <ValidationProvider>\n          <TimeRangeProvider timeRange={initialTimeRange}>\n            <VariableEditorForm\n              initialVariableDefinition={currentEditingVariableDefinition}\n              action={variableFormAction}\n              isDraft={true}\n              onActionChange={setVariableFormAction}\n              onSave={(definition: VariableDefinition) => {\n                setVariableDefinitions((draft) => {\n                  draft[variableEditIdx] = definition;\n                  setVariableEditIdx(null);\n                });\n              }}\n              onClose={() => {\n                if (variableFormAction === 'create') {\n                  removeVariable(variableEditIdx);\n                }\n                setVariableEditIdx(null);\n              }}\n            />\n          </TimeRangeProvider>\n        </ValidationProvider>\n      )}\n      {!currentEditingVariableDefinition && (\n        <>\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\">Edit Dashboard Variables</Typography>\n            <Stack direction=\"row\" spacing={1} marginLeft=\"auto\">\n              <Button\n                disabled={props.variableDefinitions === variableDefinitions || !validation.isValid}\n                variant=\"contained\"\n                onClick={() => {\n                  props.onChange(variableDefinitions);\n                }}\n              >\n                Apply\n              </Button>\n              <Button color=\"secondary\" variant=\"outlined\" onClick={handleCancel}>\n                Cancel\n              </Button>\n            </Stack>\n          </Box>\n          <Box padding={2} sx={{ overflowY: 'scroll' }}>\n            <Stack spacing={2}>\n              <Stack spacing={2}>\n                {!validation.isValid &&\n                  validation.errors.map((error) => (\n                    <Alert severity=\"error\" key={error}>\n                      {error}\n                    </Alert>\n                  ))}\n                <TableContainer>\n                  <Table sx={{ minWidth: 650 }} aria-label=\"table of variables\">\n                    <TableHead>\n                      <TableRow>\n                        <TableCell>Visibility</TableCell>\n                        <TableCell>Name</TableCell>\n                        <TableCell>Type</TableCell>\n                        <TableCell>Description</TableCell>\n                        <TableCell align=\"right\">Actions</TableCell>\n                      </TableRow>\n                    </TableHead>\n                    <TableBody>\n                      {variableDefinitions.map((v, idx) => (\n                        <TableRow key={v.spec.name}>\n                          <TableCell component=\"th\" scope=\"row\">\n                            <Switch\n                              checked={v.spec.display?.hidden !== true}\n                              onChange={(e) => {\n                                toggleVariableVisibility(idx, e.target.checked);\n                              }}\n                            />\n                          </TableCell>\n                          <TableCell component=\"th\" scope=\"row\" sx={{ fontWeight: 'bold' }}>\n                            <VariableName name={v.spec.name} state={variableState.get({ name: v.spec.name })} />\n                          </TableCell>\n                          <TableCell>{getVariableLabelByKind(v.kind) ?? v.kind}</TableCell>\n                          <TableCell>{v.spec.display?.description ?? ''}</TableCell>\n                          <TableCell align=\"right\" sx={{ whiteSpace: 'nowrap' }}>\n                            <IconButton onClick={() => changeVariableOrder(idx, 'up')} disabled={idx === 0}>\n                              <ArrowUp />\n                            </IconButton>\n                            <IconButton\n                              onClick={() => changeVariableOrder(idx, 'down')}\n                              disabled={idx === variableDefinitions.length - 1}\n                            >\n                              <ArrowDown />\n                            </IconButton>\n                            <IconButton onClick={() => editVariable(idx)}>\n                              <PencilIcon />\n                            </IconButton>\n                            <IconButton onClick={() => removeVariable(idx)}>\n                              <TrashIcon />\n                            </IconButton>\n                          </TableCell>\n                        </TableRow>\n                      ))}\n                    </TableBody>\n                  </Table>\n                </TableContainer>\n                <Box display=\"flex\">\n                  <Button variant=\"contained\" startIcon={<AddIcon />} sx={{ marginLeft: 'auto' }} onClick={addVariable}>\n                    Add Variable\n                  </Button>\n                </Box>\n              </Stack>\n              {externalVariableDefinitions &&\n                !externalVariableDefinitions.every((v) => v.definitions.length === 0) &&\n                externalVariableDefinitions.map(\n                  (extVar, key) =>\n                    extVar.definitions.length > 0 && (\n                      <Accordion\n                        key={key}\n                        sx={(theme) => ({\n                          '.MuiAccordionSummary-root': {\n                            backgroundColor: theme.palette.background.lighter,\n                          },\n                          '.MuiAccordionDetails-root': {\n                            backgroundColor: theme.palette.background.lighter,\n                          },\n                        })}\n                      >\n                        <AccordionSummary\n                          expandIcon={<ExpandMoreIcon />}\n                          aria-controls={extVar.source}\n                          id={extVar.source}\n                        >\n                          <Stack flexDirection=\"row\" alignItems=\"center\" justifyContent=\"start\">\n                            <>\n                              {extVar.tooltip ? (\n                                <Typography variant=\"h2\">\n                                  <InfoTooltip\n                                    title={extVar.tooltip.title || ''}\n                                    description={extVar.tooltip.description || ''}\n                                  >\n                                    <span>{capitalize(extVar.source)} Variables</span>\n                                  </InfoTooltip>\n                                </Typography>\n                              ) : (\n                                <Typography variant=\"h2\">{capitalize(extVar.source)} Variables</Typography>\n                              )}\n                              {extVar.editLink && (\n                                <IconButton href={extVar.editLink} target=\"_blank\">\n                                  <OpenInNewIcon fontSize=\"small\" />\n                                </IconButton>\n                              )}\n                            </>\n                          </Stack>\n                        </AccordionSummary>\n                        <AccordionDetails>\n                          <TableContainer>\n                            <Table sx={{ minWidth: 650 }} aria-label=\"table of external variables\">\n                              <TableHead>\n                                <TableRow>\n                                  <TableCell>Visibility</TableCell>\n                                  <TableCell>Name</TableCell>\n                                  <TableCell>Type</TableCell>\n                                  <TableCell>Description</TableCell>\n                                  <TableCell align=\"right\">Actions</TableCell>\n                                </TableRow>\n                              </TableHead>\n                              <TableBody>\n                                {extVar.definitions.map((v) => (\n                                  <TableRow key={v.spec.name}>\n                                    <TableCell component=\"th\" scope=\"row\">\n                                      <Switch checked={v.spec.display?.hidden !== true} disabled />\n                                    </TableCell>\n\n                                    <TableCell component=\"th\" scope=\"row\" sx={{ fontWeight: 'bold' }}>\n                                      <VariableName\n                                        name={v.spec.name}\n                                        state={variableState.get({ name: v.spec.name, source: extVar.source })}\n                                      />\n                                    </TableCell>\n                                    <TableCell>{getVariableLabelByKind(v.kind) ?? v.kind}</TableCell>\n                                    <TableCell>{v.spec.display?.description ?? ''}</TableCell>\n                                    <TableCell align=\"right\">\n                                      <Tooltip title=\"Override\">\n                                        <IconButton\n                                          onClick={() => overrideVariable(v)}\n                                          disabled={!!variableState.get({ name: v.spec.name })}\n                                        >\n                                          <ContentDuplicate />\n                                        </IconButton>\n                                      </Tooltip>\n                                      <IconButton disabled>\n                                        <ArrowUp />\n                                      </IconButton>\n                                      <IconButton disabled>\n                                        <ArrowDown />\n                                      </IconButton>\n                                      <IconButton disabled>\n                                        <PencilIcon />\n                                      </IconButton>\n                                      <IconButton disabled>\n                                        <TrashIcon />\n                                      </IconButton>\n                                    </TableCell>\n                                  </TableRow>\n                                ))}\n                              </TableBody>\n                            </Table>\n                          </TableContainer>\n                        </AccordionDetails>\n                      </Accordion>\n                    )\n                )}\n              {builtinVariableDefinitions && (\n                <BuiltinVariableAccordions builtinVariableDefinitions={builtinVariableDefinitions} />\n              )}\n            </Stack>\n          </Box>\n        </>\n      )}\n    </>\n  );\n}\n\nconst TableCell = styled(MuiTableCell)(({ theme }) => ({\n  borderBottom: `solid 1px ${theme.palette.divider}`,\n}));\n\nexport function VariableName(props: { name: string; state: VariableState | undefined }): ReactElement {\n  const { name, state } = props;\n  return (\n    <>\n      {!state?.overridden && `${name} `}\n      {!state?.overridden && state?.overriding && (\n        <Box fontWeight=\"normal\" color={(theme) => theme.palette.primary.main}>\n          (overriding)\n        </Box>\n      )}\n      {state?.overridden && (\n        <>\n          <Box color={(theme) => theme.palette.grey[500]}>{name}</Box>\n          <Box fontWeight=\"normal\" color={(theme) => theme.palette.grey[500]}>\n            (overridden)\n          </Box>\n        </>\n      )}\n    </>\n  );\n}\n"],"names":["useState","useMemo","Button","Stack","Box","TableContainer","TableBody","TableRow","TableCell","MuiTableCell","Table","TableHead","Switch","Typography","IconButton","Alert","styled","capitalize","Tooltip","Accordion","AccordionSummary","AccordionDetails","AddIcon","DEFAULT_DASHBOARD_DURATION","useImmer","PencilIcon","TrashIcon","ArrowUp","ArrowDown","ContentDuplicate","OpenInNewIcon","ExpandMoreIcon","ValidationProvider","VariableEditorForm","VARIABLE_TYPES","useInitialTimeRange","TimeRangeProvider","InfoTooltip","useDashboard","useDiscardChangesConfirmationDialog","hydrateVariableDefinitionStates","BuiltinVariableAccordions","getVariableLabelByKind","kind","find","variableType","label","getValidation","variableDefinitions","errors","variableNames","map","variableDefinition","spec","name","uniqueVariableNames","Set","length","size","push","isValid","VariableEditor","props","setVariableDefinitions","variableEditIdx","setVariableEditIdx","variableFormAction","setVariableFormAction","externalVariableDefinitions","builtinVariableDefinitions","validation","variableState","currentEditingVariableDefinition","openDiscardChangesConfirmationDialog","closeDiscardChangesConfirmationDialog","handleCancel","JSON","stringify","onDiscardChanges","onCancel","description","removeVariable","index","draft","splice","addVariable","value","editVariable","toggleVariableVisibility","visible","v","display","hidden","changeVariableOrder","direction","prevElement","currentElement","nextElement","overrideVariable","dashboard","dashboardDuration","duration","initialTimeRange","timeRange","initialVariableDefinition","action","isDraft","onActionChange","onSave","definition","onClose","sx","alignItems","padding","theme","spacing","borderBottom","palette","divider","variant","marginLeft","disabled","onClick","onChange","color","overflowY","error","severity","minWidth","aria-label","align","idx","component","scope","checked","e","target","fontWeight","VariableName","state","get","whiteSpace","startIcon","every","definitions","extVar","key","backgroundColor","background","lighter","expandIcon","aria-controls","source","id","flexDirection","justifyContent","tooltip","title","span","editLink","href","fontSize","overridden","overriding","primary","main","grey"],"mappings":"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"}

package/dist/context/DashboardProvider/DashboardProviderWithQueryParams.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DashboardProviderWithQueryParams.d.ts","sourceRoot":"","sources":["../../../src/context/DashboardProvider/DashboardProviderWithQueryParams.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAAqB,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;AAEhF,wBAAgB,gCAAgC,CAAC,EAAE,QAAQ,EAAE,YAAY,EAAE,EAAE,sBAAsB,GAAG,YAAY,CAcjH"}
+{"version":3,"file":"DashboardProviderWithQueryParams.d.ts","sourceRoot":"","sources":["../../../src/context/DashboardProvider/DashboardProviderWithQueryParams.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAErC,OAAO,EAAqB,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;AAEhF,wBAAgB,gCAAgC,CAAC,EAAE,QAAQ,EAAE,YAAY,EAAE,EAAE,sBAAsB,GAAG,YAAY,CAcjH"}

package/dist/context/DashboardProvider/DashboardProviderWithQueryParams.js

@@ -1,4 +1,4 @@
-// Copyright 2024 The Perses Authors
+// Copyright 2025 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at

package/dist/context/DashboardProvider/DashboardProviderWithQueryParams.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/context/DashboardProvider/DashboardProviderWithQueryParams.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 { JsonParam, useQueryParam } from 'use-query-params';\nimport { ReactElement } from 'react';\nimport { DashboardProvider, DashboardProviderProps } from './DashboardProvider';\n\nexport function DashboardProviderWithQueryParams({ children, initialState }: DashboardProviderProps): ReactElement {\n  const [viewPanelRef, setViewPanelRef] = useQueryParam('viewPanelRef', JsonParam);\n\n  return (\n    <DashboardProvider\n      initialState={{\n        ...initialState,\n        viewPanelRef: viewPanelRef ?? undefined, // viewPanelRef can be null, forcing to undefined\n        setViewPanelRef: setViewPanelRef,\n      }}\n    >\n      {children}\n    </DashboardProvider>\n  );\n}\n"],"names":["JsonParam","useQueryParam","DashboardProvider","DashboardProviderWithQueryParams","children","initialState","viewPanelRef","setViewPanelRef","undefined"],"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,SAAS,EAAEC,aAAa,QAAQ,mBAAmB;AAE5D,SAASC,iBAAiB,QAAgC,sBAAsB;AAEhF,OAAO,SAASC,iCAAiC,EAAEC,QAAQ,EAAEC,YAAY,EAA0B;IACjG,MAAM,CAACC,cAAcC,gBAAgB,GAAGN,cAAc,gBAAgBD;IAEtE,qBACE,KAACE;QACCG,cAAc;YACZ,GAAGA,YAAY;YACfC,cAAcA,gBAAgBE;YAC9BD,iBAAiBA;QACnB;kBAECH;;AAGP"}
+{"version":3,"sources":["../../../src/context/DashboardProvider/DashboardProviderWithQueryParams.tsx"],"sourcesContent":["// Copyright 2025 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 { ReactElement } from 'react';\nimport { JsonParam, useQueryParam } from 'use-query-params';\nimport { DashboardProvider, DashboardProviderProps } from './DashboardProvider';\n\nexport function DashboardProviderWithQueryParams({ children, initialState }: DashboardProviderProps): ReactElement {\n  const [viewPanelRef, setViewPanelRef] = useQueryParam('viewPanelRef', JsonParam);\n\n  return (\n    <DashboardProvider\n      initialState={{\n        ...initialState,\n        viewPanelRef: viewPanelRef ?? undefined, // viewPanelRef can be null, forcing to undefined\n        setViewPanelRef: setViewPanelRef,\n      }}\n    >\n      {children}\n    </DashboardProvider>\n  );\n}\n"],"names":["JsonParam","useQueryParam","DashboardProvider","DashboardProviderWithQueryParams","children","initialState","viewPanelRef","setViewPanelRef","undefined"],"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;;AAGjC,SAASA,SAAS,EAAEC,aAAa,QAAQ,mBAAmB;AAC5D,SAASC,iBAAiB,QAAgC,sBAAsB;AAEhF,OAAO,SAASC,iCAAiC,EAAEC,QAAQ,EAAEC,YAAY,EAA0B;IACjG,MAAM,CAACC,cAAcC,gBAAgB,GAAGN,cAAc,gBAAgBD;IAEtE,qBACE,KAACE;QACCG,cAAc;YACZ,GAAGA,YAAY;YACfC,cAAcA,gBAAgBE;YAC9BD,iBAAiBA;QACnB;kBAECH;;AAGP"}

package/dist/context/DashboardProvider/duplicate-panel-slice.js

@@ -10,7 +10,7 @@
 // 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 { getValidPanelKey, insertPanelInLayout } from '../../utils/panelUtils';
+import { insertPanelInLayout } from '../../utils/panelUtils';
 import { generateId } from './common';
 /**
  * Curried function for duplicating a panel.
@@ -41,7 +41,7 @@ import { generateId } from './common';
                     if (matchingLayout === undefined) {
                         throw new Error(`Cannot find layout for Panel with key '${panelKey}'`);
                     }
-                    const dupePanelKey = getValidPanelKey(panelKey, panels);
+                    const dupePanelKey = crypto.randomUUID().replaceAll('-', '');
                     state.panels[dupePanelKey] = panelToDupe;
                     const duplicateLayout = {
                         i: generateId().toString(),

package/dist/context/DashboardProvider/duplicate-panel-slice.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/context/DashboardProvider/duplicate-panel-slice.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { StateCreator } from 'zustand';\nimport { getValidPanelKey, insertPanelInLayout, UnpositionedPanelGroupItemLayout } from '../../utils/panelUtils';\nimport { generateId, Middleware } from './common';\nimport { PanelGroupSlice, PanelGroupItemId } from './panel-group-slice';\nimport { PanelSlice } from './panel-slice';\n\n/**\n * Slice that handles duplicating Panels.\n */\nexport interface DuplicatePanelSlice {\n  /**\n   * Duplicate panel.\n   */\n  duplicatePanel: (panelGroupItemId: PanelGroupItemId) => void;\n}\n\n/**\n * Curried function for duplicating a panel.\n */\nexport function createDuplicatePanelSlice(): StateCreator<\n  // Actions in here need to modify both Panels and Panel Groups state\n  DuplicatePanelSlice & PanelSlice & PanelGroupSlice,\n  Middleware,\n  [],\n  DuplicatePanelSlice\n> {\n  return (set) => ({\n    duplicatePanel(panelGroupItemId: PanelGroupItemId): void {\n      set((state) => {\n        const panels = state.panels;\n\n        // Figure out the panel key at that location\n        const { panelGroupId, panelGroupItemLayoutId: panelGroupLayoutId } = panelGroupItemId;\n        const group = state.panelGroups[panelGroupId];\n        if (group === undefined) {\n          throw new Error(`Missing panel group ${panelGroupId}`);\n        }\n        const panelKey = group.itemPanelKeys[panelGroupLayoutId];\n        if (panelKey === undefined) {\n          throw new Error(`Could not find Panel Group item ${panelGroupItemId}`);\n        }\n\n        // Find the panel to edit\n        const panelToDupe = panels[panelKey];\n        if (panelToDupe === undefined) {\n          throw new Error(`Cannot find Panel with key '${panelKey}'`);\n        }\n\n        // Find the layout for the item being duped\n        const matchingLayout = group.itemLayouts.find((itemLayout) => {\n          return itemLayout.i === panelGroupLayoutId;\n        });\n\n        if (matchingLayout === undefined) {\n          throw new Error(`Cannot find layout for Panel with key '${panelKey}'`);\n        }\n\n        const dupePanelKey = getValidPanelKey(panelKey, panels);\n\n        state.panels[dupePanelKey] = panelToDupe;\n\n        const duplicateLayout: UnpositionedPanelGroupItemLayout = {\n          i: generateId().toString(),\n          w: matchingLayout.w,\n          h: matchingLayout.h,\n        };\n\n        group.itemLayouts = insertPanelInLayout(duplicateLayout, matchingLayout, group.itemLayouts);\n\n        group.itemPanelKeys[duplicateLayout.i] = dupePanelKey;\n      });\n    },\n  });\n}\n"],"names":["getValidPanelKey","insertPanelInLayout","generateId","createDuplicatePanelSlice","set","duplicatePanel","panelGroupItemId","state","panels","panelGroupId","panelGroupItemLayoutId","panelGroupLayoutId","group","panelGroups","undefined","Error","panelKey","itemPanelKeys","panelToDupe","matchingLayout","itemLayouts","find","itemLayout","i","dupePanelKey","duplicateLayout","toString","w","h"],"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;AAGjC,SAASA,gBAAgB,EAAEC,mBAAmB,QAA0C,yBAAyB;AACjH,SAASC,UAAU,QAAoB,WAAW;AAclD;;CAEC,GACD,OAAO,SAASC;IAOd,OAAO,CAACC,MAAS,CAAA;YACfC,gBAAeC,gBAAkC;gBAC/CF,IAAI,CAACG;oBACH,MAAMC,SAASD,MAAMC,MAAM;oBAE3B,4CAA4C;oBAC5C,MAAM,EAAEC,YAAY,EAAEC,wBAAwBC,kBAAkB,EAAE,GAAGL;oBACrE,MAAMM,QAAQL,MAAMM,WAAW,CAACJ,aAAa;oBAC7C,IAAIG,UAAUE,WAAW;wBACvB,MAAM,IAAIC,MAAM,CAAC,oBAAoB,EAAEN,cAAc;oBACvD;oBACA,MAAMO,WAAWJ,MAAMK,aAAa,CAACN,mBAAmB;oBACxD,IAAIK,aAAaF,WAAW;wBAC1B,MAAM,IAAIC,MAAM,CAAC,gCAAgC,EAAET,kBAAkB;oBACvE;oBAEA,yBAAyB;oBACzB,MAAMY,cAAcV,MAAM,CAACQ,SAAS;oBACpC,IAAIE,gBAAgBJ,WAAW;wBAC7B,MAAM,IAAIC,MAAM,CAAC,4BAA4B,EAAEC,SAAS,CAAC,CAAC;oBAC5D;oBAEA,2CAA2C;oBAC3C,MAAMG,iBAAiBP,MAAMQ,WAAW,CAACC,IAAI,CAAC,CAACC;wBAC7C,OAAOA,WAAWC,CAAC,KAAKZ;oBAC1B;oBAEA,IAAIQ,mBAAmBL,WAAW;wBAChC,MAAM,IAAIC,MAAM,CAAC,uCAAuC,EAAEC,SAAS,CAAC,CAAC;oBACvE;oBAEA,MAAMQ,eAAexB,iBAAiBgB,UAAUR;oBAEhDD,MAAMC,MAAM,CAACgB,aAAa,GAAGN;oBAE7B,MAAMO,kBAAoD;wBACxDF,GAAGrB,aAAawB,QAAQ;wBACxBC,GAAGR,eAAeQ,CAAC;wBACnBC,GAAGT,eAAeS,CAAC;oBACrB;oBAEAhB,MAAMQ,WAAW,GAAGnB,oBAAoBwB,iBAAiBN,gBAAgBP,MAAMQ,WAAW;oBAE1FR,MAAMK,aAAa,CAACQ,gBAAgBF,CAAC,CAAC,GAAGC;gBAC3C;YACF;QACF,CAAA;AACF"}
+{"version":3,"sources":["../../../src/context/DashboardProvider/duplicate-panel-slice.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { StateCreator } from 'zustand';\nimport { insertPanelInLayout, UnpositionedPanelGroupItemLayout } from '../../utils/panelUtils';\nimport { generateId, Middleware } from './common';\nimport { PanelGroupSlice, PanelGroupItemId } from './panel-group-slice';\nimport { PanelSlice } from './panel-slice';\n\n/**\n * Slice that handles duplicating Panels.\n */\nexport interface DuplicatePanelSlice {\n  /**\n   * Duplicate panel.\n   */\n  duplicatePanel: (panelGroupItemId: PanelGroupItemId) => void;\n}\n\n/**\n * Curried function for duplicating a panel.\n */\nexport function createDuplicatePanelSlice(): StateCreator<\n  // Actions in here need to modify both Panels and Panel Groups state\n  DuplicatePanelSlice & PanelSlice & PanelGroupSlice,\n  Middleware,\n  [],\n  DuplicatePanelSlice\n> {\n  return (set) => ({\n    duplicatePanel(panelGroupItemId: PanelGroupItemId): void {\n      set((state) => {\n        const panels = state.panels;\n\n        // Figure out the panel key at that location\n        const { panelGroupId, panelGroupItemLayoutId: panelGroupLayoutId } = panelGroupItemId;\n        const group = state.panelGroups[panelGroupId];\n        if (group === undefined) {\n          throw new Error(`Missing panel group ${panelGroupId}`);\n        }\n        const panelKey = group.itemPanelKeys[panelGroupLayoutId];\n        if (panelKey === undefined) {\n          throw new Error(`Could not find Panel Group item ${panelGroupItemId}`);\n        }\n\n        // Find the panel to edit\n        const panelToDupe = panels[panelKey];\n        if (panelToDupe === undefined) {\n          throw new Error(`Cannot find Panel with key '${panelKey}'`);\n        }\n\n        // Find the layout for the item being duped\n        const matchingLayout = group.itemLayouts.find((itemLayout) => {\n          return itemLayout.i === panelGroupLayoutId;\n        });\n\n        if (matchingLayout === undefined) {\n          throw new Error(`Cannot find layout for Panel with key '${panelKey}'`);\n        }\n\n        const dupePanelKey = crypto.randomUUID().replaceAll('-', '');\n\n        state.panels[dupePanelKey] = panelToDupe;\n\n        const duplicateLayout: UnpositionedPanelGroupItemLayout = {\n          i: generateId().toString(),\n          w: matchingLayout.w,\n          h: matchingLayout.h,\n        };\n\n        group.itemLayouts = insertPanelInLayout(duplicateLayout, matchingLayout, group.itemLayouts);\n\n        group.itemPanelKeys[duplicateLayout.i] = dupePanelKey;\n      });\n    },\n  });\n}\n"],"names":["insertPanelInLayout","generateId","createDuplicatePanelSlice","set","duplicatePanel","panelGroupItemId","state","panels","panelGroupId","panelGroupItemLayoutId","panelGroupLayoutId","group","panelGroups","undefined","Error","panelKey","itemPanelKeys","panelToDupe","matchingLayout","itemLayouts","find","itemLayout","i","dupePanelKey","crypto","randomUUID","replaceAll","duplicateLayout","toString","w","h"],"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;AAGjC,SAASA,mBAAmB,QAA0C,yBAAyB;AAC/F,SAASC,UAAU,QAAoB,WAAW;AAclD;;CAEC,GACD,OAAO,SAASC;IAOd,OAAO,CAACC,MAAS,CAAA;YACfC,gBAAeC,gBAAkC;gBAC/CF,IAAI,CAACG;oBACH,MAAMC,SAASD,MAAMC,MAAM;oBAE3B,4CAA4C;oBAC5C,MAAM,EAAEC,YAAY,EAAEC,wBAAwBC,kBAAkB,EAAE,GAAGL;oBACrE,MAAMM,QAAQL,MAAMM,WAAW,CAACJ,aAAa;oBAC7C,IAAIG,UAAUE,WAAW;wBACvB,MAAM,IAAIC,MAAM,CAAC,oBAAoB,EAAEN,cAAc;oBACvD;oBACA,MAAMO,WAAWJ,MAAMK,aAAa,CAACN,mBAAmB;oBACxD,IAAIK,aAAaF,WAAW;wBAC1B,MAAM,IAAIC,MAAM,CAAC,gCAAgC,EAAET,kBAAkB;oBACvE;oBAEA,yBAAyB;oBACzB,MAAMY,cAAcV,MAAM,CAACQ,SAAS;oBACpC,IAAIE,gBAAgBJ,WAAW;wBAC7B,MAAM,IAAIC,MAAM,CAAC,4BAA4B,EAAEC,SAAS,CAAC,CAAC;oBAC5D;oBAEA,2CAA2C;oBAC3C,MAAMG,iBAAiBP,MAAMQ,WAAW,CAACC,IAAI,CAAC,CAACC;wBAC7C,OAAOA,WAAWC,CAAC,KAAKZ;oBAC1B;oBAEA,IAAIQ,mBAAmBL,WAAW;wBAChC,MAAM,IAAIC,MAAM,CAAC,uCAAuC,EAAEC,SAAS,CAAC,CAAC;oBACvE;oBAEA,MAAMQ,eAAeC,OAAOC,UAAU,GAAGC,UAAU,CAAC,KAAK;oBAEzDpB,MAAMC,MAAM,CAACgB,aAAa,GAAGN;oBAE7B,MAAMU,kBAAoD;wBACxDL,GAAGrB,aAAa2B,QAAQ;wBACxBC,GAAGX,eAAeW,CAAC;wBACnBC,GAAGZ,eAAeY,CAAC;oBACrB;oBAEAnB,MAAMQ,WAAW,GAAGnB,oBAAoB2B,iBAAiBT,gBAAgBP,MAAMQ,WAAW;oBAE1FR,MAAMK,aAAa,CAACW,gBAAgBL,CAAC,CAAC,GAAGC;gBAC3C;YACF;QACF,CAAA;AACF"}

package/dist/context/DashboardProvider/panel-editor-slice.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"panel-editor-slice.d.ts","sourceRoot":"","sources":["../../../src/context/DashboardProvider/panel-editor-slice.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,MAAM,EAAE,iBAAiB,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAC3E,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEvC,OAAO,EAAc,UAAU,EAAyB,MAAM,UAAU,CAAC;AACzE,OAAO,EACL,eAAe,EACf,gBAAgB,EAKjB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B;;OAEG;IACH,aAAa,CAAC,EAAE,IAAI,CAAC,iBAAiB,EAAE,iBAAiB,CAAC,CAAC;IAE3D;;OAEG;IACH,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAE/B;;OAEG;IACH,aAAa,EAAE,CAAC,gBAAgB,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAE5D;;OAEG;IACH,YAAY,EAAE,CAAC,YAAY,CAAC,EAAE,YAAY,KAAK,IAAI,CAAC;CACrD;AAED,MAAM,WAAW,gBAAgB;IAC/B;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IAKb,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IAEpC;;OAEG;IACH,aAAa,EAAE,iBAAiB,CAAC;IAEjC;;OAEG;IACH,YAAY,EAAE,CAAC,IAAI,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAEhD;;OAEG;IACH,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAED;;GAEG;AACH,wBAAgB,sBAAsB,IAAI,YAAY,CAEpD,gBAAgB,GAAG,UAAU,GAAG,eAAe,EAC/C,UAAU,EACV;CAAE,EACF,gBAAgB,CACjB,CA6IA"}
+{"version":3,"file":"panel-editor-slice.d.ts","sourceRoot":"","sources":["../../../src/context/DashboardProvider/panel-editor-slice.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,MAAM,EAAE,iBAAiB,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAC3E,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEvC,OAAO,EAAc,UAAU,EAAyB,MAAM,UAAU,CAAC;AACzE,OAAO,EACL,eAAe,EACf,gBAAgB,EAKjB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B;;OAEG;IACH,aAAa,CAAC,EAAE,IAAI,CAAC,iBAAiB,EAAE,iBAAiB,CAAC,CAAC;IAE3D;;OAEG;IACH,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAE/B;;OAEG;IACH,aAAa,EAAE,CAAC,gBAAgB,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAE5D;;OAEG;IACH,YAAY,EAAE,CAAC,YAAY,CAAC,EAAE,YAAY,KAAK,IAAI,CAAC;CACrD;AAED,MAAM,WAAW,gBAAgB;IAC/B;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IAKb,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IAEpC;;OAEG;IACH,aAAa,EAAE,iBAAiB,CAAC;IAEjC;;OAEG;IACH,YAAY,EAAE,CAAC,IAAI,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAEhD;;OAEG;IACH,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAED;;GAEG;AACH,wBAAgB,sBAAsB,IAAI,YAAY,CAEpD,gBAAgB,GAAG,UAAU,GAAG,eAAe,EAC/C,UAAU,EACV;CAAE,EACF,gBAAgB,CACjB,CA2IA"}

package/dist/context/DashboardProvider/panel-editor-slice.js

@@ -10,7 +10,7 @@
 // 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 { getYForNewRow, getValidPanelKey } from '../../utils';
+import { getYForNewRow } from '../../utils';
 import { generateId, createPanelDefinition } from './common';
 import { addPanelGroup, createEmptyPanelGroup } from './panel-group-slice';
 /**
@@ -102,8 +102,7 @@ import { addPanelGroup, createEmptyPanelGroup } from './panel-group-slice';
                         panelDefinition: get().initialValues?.panelDefinition ?? createPanelDefinition()
                     },
                     applyChanges: (next)=>{
-                        const name = next.panelDefinition.spec.display.name;
-                        const panelKey = getValidPanelKey(name, get().panels);
+                        const panelKey = crypto.randomUUID().replaceAll('-', '');
                         set((state)=>{
                             // Add a panel
                             state.panels[panelKey] = next.panelDefinition;

package/dist/context/DashboardProvider/panel-editor-slice.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/context/DashboardProvider/panel-editor-slice.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Action, PanelEditorValues, PanelGroupId } from '@perses-dev/core';\nimport { StateCreator } from 'zustand';\nimport { getYForNewRow, getValidPanelKey } from '../../utils';\nimport { generateId, Middleware, createPanelDefinition } from './common';\nimport {\n  PanelGroupSlice,\n  PanelGroupItemId,\n  PanelGroupDefinition,\n  PanelGroupItemLayout,\n  addPanelGroup,\n  createEmptyPanelGroup,\n} from './panel-group-slice';\nimport { PanelSlice } from './panel-slice';\n\n/**\n * Slice that handles the visual editor state and actions for adding or editing Panels.\n */\nexport interface PanelEditorSlice {\n  /**\n   * Initial values for add panel if default panel kind is defined\n   */\n  initialValues?: Pick<PanelEditorValues, 'panelDefinition'>;\n\n  /**\n   * State for the panel editor when its open, otherwise undefined when it's closed.\n   */\n  panelEditor?: PanelEditorState;\n\n  /**\n   * Opens the editor for editing an existing panel by providing its layout coordinates.\n   */\n  openEditPanel: (panelGroupItemId: PanelGroupItemId) => void;\n\n  /**\n   * Opens the editor for adding a new Panel to a panel group.\n   */\n  openAddPanel: (panelGroupId?: PanelGroupId) => void;\n}\n\nexport interface PanelEditorState {\n  /**\n   * Whether we're adding a new panel, or editing an existing panel.\n   */\n  mode: Action;\n\n  /*\n   * Original item in a PanelGroup edited\n   */\n  panelGroupItemId?: PanelGroupItemId;\n\n  /**\n   * Initial values for the things that can be edited about a panel.\n   */\n  initialValues: PanelEditorValues;\n\n  /**\n   * Applies changes, but doesn't close the editor.\n   */\n  applyChanges: (next: PanelEditorValues) => void;\n\n  /**\n   * Close the editor.\n   */\n  close: () => void;\n}\n\n/**\n * Curried function for creating the PanelEditorSlice.\n */\nexport function createPanelEditorSlice(): StateCreator<\n  // Actions in here need to modify both Panels and Panel Groups state\n  PanelEditorSlice & PanelSlice & PanelGroupSlice,\n  Middleware,\n  [],\n  PanelEditorSlice\n> {\n  // Return the state creator function for Zustand that uses the panels provided as intitial state\n  return (set, get) => ({\n    panelEditor: undefined,\n\n    openEditPanel(panelGroupItemId): void {\n      const { panels, panelGroups } = get();\n\n      // Figure out the panel key at that location\n      const { panelGroupId, panelGroupItemLayoutId: panelGroupLayoutId } = panelGroupItemId;\n      const panelKey = panelGroups[panelGroupId]?.itemPanelKeys[panelGroupLayoutId];\n      if (panelKey === undefined) {\n        throw new Error(`Could not find Panel Group item ${panelGroupItemId}`);\n      }\n\n      // Find the panel to edit\n      const panelToEdit = panels[panelKey];\n      if (panelToEdit === undefined) {\n        throw new Error(`Cannot find Panel with key '${panelKey}'`);\n      }\n\n      const editorState: PanelEditorState = {\n        mode: 'update',\n        panelGroupItemId: panelGroupItemId,\n        initialValues: {\n          groupId: panelGroupItemId.panelGroupId,\n          panelDefinition: panelToEdit,\n        },\n        applyChanges: (next) => {\n          set((state) => {\n            state.panels[panelKey] = next.panelDefinition;\n\n            // If the panel didn't change groups, nothing else to do\n            if (next.groupId === panelGroupId) {\n              return;\n            }\n\n            // Move panel to the new group\n            const existingGroup = state.panelGroups[panelGroupId];\n            if (existingGroup === undefined) {\n              throw new Error(`Missing panel group ${panelGroupId}`);\n            }\n\n            const existingLayoutIdx = existingGroup.itemLayouts.findIndex((layout) => layout.i === panelGroupLayoutId);\n            const existingLayout = existingGroup.itemLayouts[existingLayoutIdx];\n            const existingPanelKey = existingGroup.itemPanelKeys[panelGroupLayoutId];\n            if (existingLayoutIdx === -1 || existingLayout === undefined || existingPanelKey === undefined) {\n              throw new Error(`Missing panel group item ${panelGroupLayoutId}`);\n            }\n\n            // Remove item from the old group\n            existingGroup.itemLayouts.splice(existingLayoutIdx, 1);\n            delete existingGroup.itemPanelKeys[panelGroupLayoutId];\n\n            // Add item to the end of the new group\n            const newGroup = state.panelGroups[next.groupId];\n            if (newGroup === undefined) {\n              throw new Error(`Could not find new group ${next.groupId}`);\n            }\n\n            newGroup.itemLayouts.push({\n              i: existingLayout.i,\n              x: 0,\n              y: getYForNewRow(newGroup),\n              w: existingLayout.w,\n              h: existingLayout.h,\n            });\n            newGroup.itemPanelKeys[existingLayout.i] = existingPanelKey;\n          });\n        },\n        close: () => {\n          set((state) => {\n            state.panelEditor = undefined;\n          });\n        },\n      };\n\n      // Open the editor with the new state\n      set((state) => {\n        state.panelEditor = editorState;\n      });\n    },\n\n    openAddPanel(panelGroupId): void {\n      // If a panel group isn't supplied, add to the first group or create a group if there aren't any\n      let newGroup: PanelGroupDefinition | undefined = undefined;\n      panelGroupId ??= get().panelGroupOrder[0];\n      if (panelGroupId === undefined) {\n        newGroup = createEmptyPanelGroup();\n        newGroup.title = 'Panel Group';\n        panelGroupId = newGroup.id;\n      }\n\n      const editorState: PanelEditorState = {\n        mode: 'create',\n        initialValues: {\n          groupId: panelGroupId,\n          panelDefinition: get().initialValues?.panelDefinition ?? createPanelDefinition(),\n        },\n        applyChanges: (next) => {\n          const name = next.panelDefinition.spec.display.name;\n          const panelKey = getValidPanelKey(name, get().panels);\n\n          set((state) => {\n            // Add a panel\n            state.panels[panelKey] = next.panelDefinition;\n\n            // Also add a panel group item referencing the panel\n            const group = state.panelGroups[next.groupId];\n            if (group === undefined) {\n              throw new Error(`Missing panel group ${next.groupId}`);\n            }\n            const layout: PanelGroupItemLayout = {\n              i: generateId().toString(),\n              x: 0,\n              y: getYForNewRow(group),\n              w: 12,\n              h: 6,\n            };\n            group.itemLayouts.push(layout);\n            group.itemPanelKeys[layout.i] = panelKey;\n          });\n        },\n        close: () => {\n          set((state) => {\n            state.panelEditor = undefined;\n          });\n        },\n      };\n\n      set((state) => {\n        // Add the new panel group if one was created for the panel\n        if (newGroup !== undefined) {\n          addPanelGroup(state, newGroup);\n        }\n\n        // Open the editor with the new state\n        state.panelEditor = editorState;\n      });\n    },\n  });\n}\n"],"names":["getYForNewRow","getValidPanelKey","generateId","createPanelDefinition","addPanelGroup","createEmptyPanelGroup","createPanelEditorSlice","set","get","panelEditor","undefined","openEditPanel","panelGroupItemId","panels","panelGroups","panelGroupId","panelGroupItemLayoutId","panelGroupLayoutId","panelKey","itemPanelKeys","Error","panelToEdit","editorState","mode","initialValues","groupId","panelDefinition","applyChanges","next","state","existingGroup","existingLayoutIdx","itemLayouts","findIndex","layout","i","existingLayout","existingPanelKey","splice","newGroup","push","x","y","w","h","close","openAddPanel","panelGroupOrder","title","id","name","spec","display","group","toString"],"mappings":"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"}
+{"version":3,"sources":["../../../src/context/DashboardProvider/panel-editor-slice.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Action, PanelEditorValues, PanelGroupId } from '@perses-dev/core';\nimport { StateCreator } from 'zustand';\nimport { getYForNewRow } from '../../utils';\nimport { generateId, Middleware, createPanelDefinition } from './common';\nimport {\n  PanelGroupSlice,\n  PanelGroupItemId,\n  PanelGroupDefinition,\n  PanelGroupItemLayout,\n  addPanelGroup,\n  createEmptyPanelGroup,\n} from './panel-group-slice';\nimport { PanelSlice } from './panel-slice';\n\n/**\n * Slice that handles the visual editor state and actions for adding or editing Panels.\n */\nexport interface PanelEditorSlice {\n  /**\n   * Initial values for add panel if default panel kind is defined\n   */\n  initialValues?: Pick<PanelEditorValues, 'panelDefinition'>;\n\n  /**\n   * State for the panel editor when its open, otherwise undefined when it's closed.\n   */\n  panelEditor?: PanelEditorState;\n\n  /**\n   * Opens the editor for editing an existing panel by providing its layout coordinates.\n   */\n  openEditPanel: (panelGroupItemId: PanelGroupItemId) => void;\n\n  /**\n   * Opens the editor for adding a new Panel to a panel group.\n   */\n  openAddPanel: (panelGroupId?: PanelGroupId) => void;\n}\n\nexport interface PanelEditorState {\n  /**\n   * Whether we're adding a new panel, or editing an existing panel.\n   */\n  mode: Action;\n\n  /*\n   * Original item in a PanelGroup edited\n   */\n  panelGroupItemId?: PanelGroupItemId;\n\n  /**\n   * Initial values for the things that can be edited about a panel.\n   */\n  initialValues: PanelEditorValues;\n\n  /**\n   * Applies changes, but doesn't close the editor.\n   */\n  applyChanges: (next: PanelEditorValues) => void;\n\n  /**\n   * Close the editor.\n   */\n  close: () => void;\n}\n\n/**\n * Curried function for creating the PanelEditorSlice.\n */\nexport function createPanelEditorSlice(): StateCreator<\n  // Actions in here need to modify both Panels and Panel Groups state\n  PanelEditorSlice & PanelSlice & PanelGroupSlice,\n  Middleware,\n  [],\n  PanelEditorSlice\n> {\n  // Return the state creator function for Zustand that uses the panels provided as intitial state\n  return (set, get) => ({\n    panelEditor: undefined,\n\n    openEditPanel(panelGroupItemId): void {\n      const { panels, panelGroups } = get();\n\n      // Figure out the panel key at that location\n      const { panelGroupId, panelGroupItemLayoutId: panelGroupLayoutId } = panelGroupItemId;\n      const panelKey = panelGroups[panelGroupId]?.itemPanelKeys[panelGroupLayoutId];\n      if (panelKey === undefined) {\n        throw new Error(`Could not find Panel Group item ${panelGroupItemId}`);\n      }\n\n      // Find the panel to edit\n      const panelToEdit = panels[panelKey];\n      if (panelToEdit === undefined) {\n        throw new Error(`Cannot find Panel with key '${panelKey}'`);\n      }\n\n      const editorState: PanelEditorState = {\n        mode: 'update',\n        panelGroupItemId: panelGroupItemId,\n        initialValues: {\n          groupId: panelGroupItemId.panelGroupId,\n          panelDefinition: panelToEdit,\n        },\n        applyChanges: (next) => {\n          set((state) => {\n            state.panels[panelKey] = next.panelDefinition;\n\n            // If the panel didn't change groups, nothing else to do\n            if (next.groupId === panelGroupId) {\n              return;\n            }\n\n            // Move panel to the new group\n            const existingGroup = state.panelGroups[panelGroupId];\n            if (existingGroup === undefined) {\n              throw new Error(`Missing panel group ${panelGroupId}`);\n            }\n\n            const existingLayoutIdx = existingGroup.itemLayouts.findIndex((layout) => layout.i === panelGroupLayoutId);\n            const existingLayout = existingGroup.itemLayouts[existingLayoutIdx];\n            const existingPanelKey = existingGroup.itemPanelKeys[panelGroupLayoutId];\n            if (existingLayoutIdx === -1 || existingLayout === undefined || existingPanelKey === undefined) {\n              throw new Error(`Missing panel group item ${panelGroupLayoutId}`);\n            }\n\n            // Remove item from the old group\n            existingGroup.itemLayouts.splice(existingLayoutIdx, 1);\n            delete existingGroup.itemPanelKeys[panelGroupLayoutId];\n\n            // Add item to the end of the new group\n            const newGroup = state.panelGroups[next.groupId];\n            if (newGroup === undefined) {\n              throw new Error(`Could not find new group ${next.groupId}`);\n            }\n\n            newGroup.itemLayouts.push({\n              i: existingLayout.i,\n              x: 0,\n              y: getYForNewRow(newGroup),\n              w: existingLayout.w,\n              h: existingLayout.h,\n            });\n            newGroup.itemPanelKeys[existingLayout.i] = existingPanelKey;\n          });\n        },\n        close: () => {\n          set((state) => {\n            state.panelEditor = undefined;\n          });\n        },\n      };\n\n      // Open the editor with the new state\n      set((state) => {\n        state.panelEditor = editorState;\n      });\n    },\n\n    openAddPanel(panelGroupId): void {\n      // If a panel group isn't supplied, add to the first group or create a group if there aren't any\n      let newGroup: PanelGroupDefinition | undefined = undefined;\n      panelGroupId ??= get().panelGroupOrder[0];\n      if (panelGroupId === undefined) {\n        newGroup = createEmptyPanelGroup();\n        newGroup.title = 'Panel Group';\n        panelGroupId = newGroup.id;\n      }\n\n      const editorState: PanelEditorState = {\n        mode: 'create',\n        initialValues: {\n          groupId: panelGroupId,\n          panelDefinition: get().initialValues?.panelDefinition ?? createPanelDefinition(),\n        },\n        applyChanges: (next) => {\n          const panelKey = crypto.randomUUID().replaceAll('-', '');\n          set((state) => {\n            // Add a panel\n            state.panels[panelKey] = next.panelDefinition;\n\n            // Also add a panel group item referencing the panel\n            const group = state.panelGroups[next.groupId];\n            if (group === undefined) {\n              throw new Error(`Missing panel group ${next.groupId}`);\n            }\n            const layout: PanelGroupItemLayout = {\n              i: generateId().toString(),\n              x: 0,\n              y: getYForNewRow(group),\n              w: 12,\n              h: 6,\n            };\n            group.itemLayouts.push(layout);\n            group.itemPanelKeys[layout.i] = panelKey;\n          });\n        },\n        close: () => {\n          set((state) => {\n            state.panelEditor = undefined;\n          });\n        },\n      };\n\n      set((state) => {\n        // Add the new panel group if one was created for the panel\n        if (newGroup !== undefined) {\n          addPanelGroup(state, newGroup);\n        }\n\n        // Open the editor with the new state\n        state.panelEditor = editorState;\n      });\n    },\n  });\n}\n"],"names":["getYForNewRow","generateId","createPanelDefinition","addPanelGroup","createEmptyPanelGroup","createPanelEditorSlice","set","get","panelEditor","undefined","openEditPanel","panelGroupItemId","panels","panelGroups","panelGroupId","panelGroupItemLayoutId","panelGroupLayoutId","panelKey","itemPanelKeys","Error","panelToEdit","editorState","mode","initialValues","groupId","panelDefinition","applyChanges","next","state","existingGroup","existingLayoutIdx","itemLayouts","findIndex","layout","i","existingLayout","existingPanelKey","splice","newGroup","push","x","y","w","h","close","openAddPanel","panelGroupOrder","title","id","crypto","randomUUID","replaceAll","group","toString"],"mappings":"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"}

package/dist/utils/panelUtils.d.ts

@@ -19,9 +19,12 @@ export type UnpositionedPanelGroupItemLayout = Omit<PanelGroupItemLayout, 'x' |
  */
 export declare function insertPanelInLayout(newLayout: UnpositionedPanelGroupItemLayout, referenceLayout: PanelGroupItemLayout, itemLayouts: PanelGroupItemLayout[]): PanelGroupItemLayout[];
 /**
+ * @deprecated
+ *
  * Get a valid panel key, where a valid key:
  * - does not include invalid characters
  * - is unique
+ * TODO: It is not clear why too much complexity is needed for generating a panel key
  */
 export declare function getValidPanelKey(panelKey: string, panels: Record<string, PanelDefinition>): string;
 //# sourceMappingURL=panelUtils.d.ts.map

package/dist/utils/panelUtils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"panelUtils.d.ts","sourceRoot":"","sources":["../../src/utils/panelUtils.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,MAAM,YAAY,CAAC;AAIxE,wBAAgB,aAAa,CAAC,KAAK,EAAE,oBAAoB,GAAG,MAAM,CASjE;AA8BD,MAAM,MAAM,gCAAgC,GAAG,IAAI,CAAC,oBAAoB,EAAE,GAAG,GAAG,GAAG,CAAC,CAAC;AAErF;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,mBAAmB,CACjC,SAAS,EAAE,gCAAgC,EAC3C,eAAe,EAAE,oBAAoB,EACrC,WAAW,EAAE,oBAAoB,EAAE,GAClC,oBAAoB,EAAE,CAyExB;AAED;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,eAAe,CAAC,GAAG,MAAM,CASlG"}
+{"version":3,"file":"panelUtils.d.ts","sourceRoot":"","sources":["../../src/utils/panelUtils.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,MAAM,YAAY,CAAC;AAIxE,wBAAgB,aAAa,CAAC,KAAK,EAAE,oBAAoB,GAAG,MAAM,CASjE;AA8BD,MAAM,MAAM,gCAAgC,GAAG,IAAI,CAAC,oBAAoB,EAAE,GAAG,GAAG,GAAG,CAAC,CAAC;AAErF;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,mBAAmB,CACjC,SAAS,EAAE,gCAAgC,EAC3C,eAAe,EAAE,oBAAoB,EACrC,WAAW,EAAE,oBAAoB,EAAE,GAClC,oBAAoB,EAAE,CAyExB;AAED;;;;;;;GAOG;AAEH,wBAAgB,gBAAgB,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,eAAe,CAAC,GAAG,MAAM,CASlG"}

package/dist/utils/panelUtils.js

@@ -122,9 +122,12 @@ function getPanelBounds({ x, y, w, h }) {
     ];
 }
 /**
+ * @deprecated
+ *
  * Get a valid panel key, where a valid key:
  * - does not include invalid characters
  * - is unique
+ * TODO: It is not clear why too much complexity is needed for generating a panel key
  */ export function getValidPanelKey(panelKey, panels) {
     const uniquePanelKeys = getUniquePanelKeys(panels);
     let normalizedPanelKey = getPanelKeyParts(removeWhiteSpaces(panelKey)).name;

package/dist/utils/panelUtils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/panelUtils.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { PanelDefinition } from '@perses-dev/core';\nimport { PanelGroupDefinition, PanelGroupItemLayout } from '../context';\nimport { GRID_LAYOUT_SMALL_BREAKPOINT, GRID_LAYOUT_COLS } from '../constants';\n\n// Given a PanelGroup, will find the Y coordinate for adding a new row to the grid, taking into account the items present\nexport function getYForNewRow(group: PanelGroupDefinition): number {\n  let newRowY = 0;\n  for (const layout of group.itemLayouts) {\n    const itemMaxY = layout.y + layout.h;\n    if (itemMaxY > newRowY) {\n      newRowY = itemMaxY;\n    }\n  }\n  return newRowY;\n}\n\ntype PanelGroupItemBounds = {\n  /**\n   * Left horizontal position.\n   */\n  x1: number;\n  /**\n   * Right horizontal position.\n   */\n  x2: number;\n  /**\n   * Top vertical position.\n   */\n  y1: number;\n  /**\n   * Bottom vertical position\n   */\n  y2: number;\n};\n\nfunction getPanelBounds({ x, y, w, h }: PanelGroupItemLayout): PanelGroupItemBounds {\n  return {\n    x1: x,\n    x2: x + w,\n    y1: y,\n    y2: y + h,\n  };\n}\n\nexport type UnpositionedPanelGroupItemLayout = Omit<PanelGroupItemLayout, 'x' | 'y'>;\n\n/**\n * Inserts a new panel into the layout with placement determined by a specified\n * reference panel. The new panel is placed:\n * - To the right of the reference panel if there is space available without\n *   moving other panels.\n * - Otherwise, directly below the reference panel. If other panels are below\n *   this location, they will also shift downward because the grid uses\n *   vertical-based compacting.\n *\n * @param newLayout - Layout for new panel to insert into the grid.\n * @param referenceLayout - Layout for reference panel used to determine the\n *   placement of the new panel.\n * @param itemLayouts - Full grid layout.\n * @returns - Item layouts modified to insert the new panel.\n */\nexport function insertPanelInLayout(\n  newLayout: UnpositionedPanelGroupItemLayout,\n  referenceLayout: PanelGroupItemLayout,\n  itemLayouts: PanelGroupItemLayout[]\n): PanelGroupItemLayout[] {\n  const MAX_LAYOUT_WIDTH = GRID_LAYOUT_COLS[GRID_LAYOUT_SMALL_BREAKPOINT];\n\n  const referenceBounds = getPanelBounds(referenceLayout);\n\n  // Organize layouts based on vertical relation to the item being inserted\n  // after.\n  const aboveInsertRow: PanelGroupItemLayout[] = [];\n  const insertRow: PanelGroupItemLayout[] = [];\n  const belowInsertRow: PanelGroupItemLayout[] = [];\n  itemLayouts.forEach((itemLayout) => {\n    const itemBounds = getPanelBounds(itemLayout);\n\n    if (itemBounds.y2 <= referenceBounds.y1) {\n      aboveInsertRow.push(itemLayout);\n    } else if (itemBounds.y1 >= referenceBounds.y2) {\n      belowInsertRow.push(itemLayout);\n    } else {\n      insertRow.push(itemLayout);\n    }\n  });\n\n  // Cannot safely assume that the order of item layouts array is strictly\n  // left to right. Sorting the row by horizontal position to more easily find\n  // gaps.\n  insertRow.sort((a, b) => a.x - b.x);\n  const insertAfterIndex = insertRow.findIndex((item) => item.i === referenceLayout.i);\n\n  if (insertAfterIndex === insertRow.length - 1) {\n    // Insert to the right when space is available and the reference is the last\n    // item in the row.\n    if (referenceBounds.x2 + newLayout.w <= MAX_LAYOUT_WIDTH) {\n      return [\n        ...aboveInsertRow,\n        ...insertRow,\n        {\n          ...newLayout,\n          x: referenceBounds.x2,\n          y: referenceBounds.y1,\n        },\n        ...belowInsertRow,\n      ];\n    }\n  } else if (insertAfterIndex >= 0) {\n    const nextItem = insertRow[insertAfterIndex + 1];\n\n    if (nextItem && getPanelBounds(nextItem).x1 - referenceBounds.x2 >= newLayout.w) {\n      // Insert to the right when space is available between the reference and\n      // the next item in the row.\n      insertRow.splice(insertAfterIndex + 1, 0, {\n        ...newLayout,\n        x: referenceBounds.x2,\n        y: referenceBounds.y1,\n      });\n\n      return [...aboveInsertRow, ...insertRow, ...belowInsertRow];\n    }\n  }\n\n  // Insert the new item below the original and shift the items below the\n  // row where the reference is located.\n  return [\n    ...aboveInsertRow,\n    ...insertRow,\n    { x: referenceBounds.x1, y: referenceBounds.y2, ...newLayout },\n    ...belowInsertRow.map((itemLayout) => {\n      // Note: the grid will not necessarily display all of these items shifted\n      // all the way down because of vertical compacting, but shifing their\n      // y position ensures the new item gets vertical precedence over items\n      // below it in that compacting.\n      return { ...itemLayout, y: itemLayout.y + newLayout.h };\n    }),\n  ];\n}\n\n/**\n * Get a valid panel key, where a valid key:\n * - does not include invalid characters\n * - is unique\n */\nexport function getValidPanelKey(panelKey: string, panels: Record<string, PanelDefinition>): string {\n  const uniquePanelKeys = getUniquePanelKeys(panels);\n  let normalizedPanelKey = getPanelKeyParts(removeWhiteSpaces(panelKey)).name;\n\n  const matchingKey = uniquePanelKeys[normalizedPanelKey];\n  if (typeof matchingKey === 'number') {\n    normalizedPanelKey += `-${matchingKey + 1}`;\n  }\n  return normalizedPanelKey;\n}\n\ntype PanelKeyParts = {\n  name: string;\n  number?: number;\n};\n\nconst removeWhiteSpaces = (str: string): string => {\n  return str.replace(/\\s+/g, '');\n};\n\n/**\n * Breaks the specified panel key into the name and the optional `-number` used\n * for deduping panels with the same name.\n */\nfunction getPanelKeyParts(panelKey: string): PanelKeyParts {\n  const parts = panelKey.match(/(.+)-([0-9]+)/);\n  if (parts && parts[1] && parts[2]) {\n    return {\n      name: parts[1],\n      number: parseInt(parts[2], 10),\n    };\n  }\n\n  return {\n    name: panelKey,\n  };\n}\n\n// Find all the unique panel keys and the largest number used for each.\n// ex: cpu, cpu-1, cpu-2 count as the same panel key since these panels have the same name\nfunction getUniquePanelKeys(panels: Record<string, PanelDefinition>): Record<string, number> {\n  const uniquePanelKeys: Record<string, number> = {};\n  Object.keys(panels).forEach((panelKey) => {\n    const { name, number } = getPanelKeyParts(panelKey);\n    if (uniquePanelKeys[name] === undefined) {\n      uniquePanelKeys[name] = 0;\n    }\n    const currentValue = uniquePanelKeys[name];\n    if (typeof currentValue === 'number' && number) {\n      // Check for the maximum value because we cannot rely on a sequential\n      // set of numbers when panels are modified.\n      uniquePanelKeys[name] = Math.max(currentValue, number);\n    }\n  });\n  return uniquePanelKeys;\n}\n"],"names":["GRID_LAYOUT_SMALL_BREAKPOINT","GRID_LAYOUT_COLS","getYForNewRow","group","newRowY","layout","itemLayouts","itemMaxY","y","h","getPanelBounds","x","w","x1","x2","y1","y2","insertPanelInLayout","newLayout","referenceLayout","MAX_LAYOUT_WIDTH","referenceBounds","aboveInsertRow","insertRow","belowInsertRow","forEach","itemLayout","itemBounds","push","sort","a","b","insertAfterIndex","findIndex","item","i","length","nextItem","splice","map","getValidPanelKey","panelKey","panels","uniquePanelKeys","getUniquePanelKeys","normalizedPanelKey","getPanelKeyParts","removeWhiteSpaces","name","matchingKey","str","replace","parts","match","number","parseInt","Object","keys","undefined","currentValue","Math","max"],"mappings":"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"}
+{"version":3,"sources":["../../src/utils/panelUtils.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { PanelDefinition } from '@perses-dev/core';\nimport { PanelGroupDefinition, PanelGroupItemLayout } from '../context';\nimport { GRID_LAYOUT_SMALL_BREAKPOINT, GRID_LAYOUT_COLS } from '../constants';\n\n// Given a PanelGroup, will find the Y coordinate for adding a new row to the grid, taking into account the items present\nexport function getYForNewRow(group: PanelGroupDefinition): number {\n  let newRowY = 0;\n  for (const layout of group.itemLayouts) {\n    const itemMaxY = layout.y + layout.h;\n    if (itemMaxY > newRowY) {\n      newRowY = itemMaxY;\n    }\n  }\n  return newRowY;\n}\n\ntype PanelGroupItemBounds = {\n  /**\n   * Left horizontal position.\n   */\n  x1: number;\n  /**\n   * Right horizontal position.\n   */\n  x2: number;\n  /**\n   * Top vertical position.\n   */\n  y1: number;\n  /**\n   * Bottom vertical position\n   */\n  y2: number;\n};\n\nfunction getPanelBounds({ x, y, w, h }: PanelGroupItemLayout): PanelGroupItemBounds {\n  return {\n    x1: x,\n    x2: x + w,\n    y1: y,\n    y2: y + h,\n  };\n}\n\nexport type UnpositionedPanelGroupItemLayout = Omit<PanelGroupItemLayout, 'x' | 'y'>;\n\n/**\n * Inserts a new panel into the layout with placement determined by a specified\n * reference panel. The new panel is placed:\n * - To the right of the reference panel if there is space available without\n *   moving other panels.\n * - Otherwise, directly below the reference panel. If other panels are below\n *   this location, they will also shift downward because the grid uses\n *   vertical-based compacting.\n *\n * @param newLayout - Layout for new panel to insert into the grid.\n * @param referenceLayout - Layout for reference panel used to determine the\n *   placement of the new panel.\n * @param itemLayouts - Full grid layout.\n * @returns - Item layouts modified to insert the new panel.\n */\nexport function insertPanelInLayout(\n  newLayout: UnpositionedPanelGroupItemLayout,\n  referenceLayout: PanelGroupItemLayout,\n  itemLayouts: PanelGroupItemLayout[]\n): PanelGroupItemLayout[] {\n  const MAX_LAYOUT_WIDTH = GRID_LAYOUT_COLS[GRID_LAYOUT_SMALL_BREAKPOINT];\n\n  const referenceBounds = getPanelBounds(referenceLayout);\n\n  // Organize layouts based on vertical relation to the item being inserted\n  // after.\n  const aboveInsertRow: PanelGroupItemLayout[] = [];\n  const insertRow: PanelGroupItemLayout[] = [];\n  const belowInsertRow: PanelGroupItemLayout[] = [];\n  itemLayouts.forEach((itemLayout) => {\n    const itemBounds = getPanelBounds(itemLayout);\n\n    if (itemBounds.y2 <= referenceBounds.y1) {\n      aboveInsertRow.push(itemLayout);\n    } else if (itemBounds.y1 >= referenceBounds.y2) {\n      belowInsertRow.push(itemLayout);\n    } else {\n      insertRow.push(itemLayout);\n    }\n  });\n\n  // Cannot safely assume that the order of item layouts array is strictly\n  // left to right. Sorting the row by horizontal position to more easily find\n  // gaps.\n  insertRow.sort((a, b) => a.x - b.x);\n  const insertAfterIndex = insertRow.findIndex((item) => item.i === referenceLayout.i);\n\n  if (insertAfterIndex === insertRow.length - 1) {\n    // Insert to the right when space is available and the reference is the last\n    // item in the row.\n    if (referenceBounds.x2 + newLayout.w <= MAX_LAYOUT_WIDTH) {\n      return [\n        ...aboveInsertRow,\n        ...insertRow,\n        {\n          ...newLayout,\n          x: referenceBounds.x2,\n          y: referenceBounds.y1,\n        },\n        ...belowInsertRow,\n      ];\n    }\n  } else if (insertAfterIndex >= 0) {\n    const nextItem = insertRow[insertAfterIndex + 1];\n\n    if (nextItem && getPanelBounds(nextItem).x1 - referenceBounds.x2 >= newLayout.w) {\n      // Insert to the right when space is available between the reference and\n      // the next item in the row.\n      insertRow.splice(insertAfterIndex + 1, 0, {\n        ...newLayout,\n        x: referenceBounds.x2,\n        y: referenceBounds.y1,\n      });\n\n      return [...aboveInsertRow, ...insertRow, ...belowInsertRow];\n    }\n  }\n\n  // Insert the new item below the original and shift the items below the\n  // row where the reference is located.\n  return [\n    ...aboveInsertRow,\n    ...insertRow,\n    { x: referenceBounds.x1, y: referenceBounds.y2, ...newLayout },\n    ...belowInsertRow.map((itemLayout) => {\n      // Note: the grid will not necessarily display all of these items shifted\n      // all the way down because of vertical compacting, but shifing their\n      // y position ensures the new item gets vertical precedence over items\n      // below it in that compacting.\n      return { ...itemLayout, y: itemLayout.y + newLayout.h };\n    }),\n  ];\n}\n\n/**\n * @deprecated\n *\n * Get a valid panel key, where a valid key:\n * - does not include invalid characters\n * - is unique\n * TODO: It is not clear why too much complexity is needed for generating a panel key\n */\n\nexport function getValidPanelKey(panelKey: string, panels: Record<string, PanelDefinition>): string {\n  const uniquePanelKeys = getUniquePanelKeys(panels);\n  let normalizedPanelKey = getPanelKeyParts(removeWhiteSpaces(panelKey)).name;\n\n  const matchingKey = uniquePanelKeys[normalizedPanelKey];\n  if (typeof matchingKey === 'number') {\n    normalizedPanelKey += `-${matchingKey + 1}`;\n  }\n  return normalizedPanelKey;\n}\n\ntype PanelKeyParts = {\n  name: string;\n  number?: number;\n};\n\nconst removeWhiteSpaces = (str: string): string => {\n  return str.replace(/\\s+/g, '');\n};\n\n/**\n * Breaks the specified panel key into the name and the optional `-number` used\n * for deduping panels with the same name.\n */\nfunction getPanelKeyParts(panelKey: string): PanelKeyParts {\n  const parts = panelKey.match(/(.+)-([0-9]+)/);\n  if (parts && parts[1] && parts[2]) {\n    return {\n      name: parts[1],\n      number: parseInt(parts[2], 10),\n    };\n  }\n\n  return {\n    name: panelKey,\n  };\n}\n\n// Find all the unique panel keys and the largest number used for each.\n// ex: cpu, cpu-1, cpu-2 count as the same panel key since these panels have the same name\nfunction getUniquePanelKeys(panels: Record<string, PanelDefinition>): Record<string, number> {\n  const uniquePanelKeys: Record<string, number> = {};\n  Object.keys(panels).forEach((panelKey) => {\n    const { name, number } = getPanelKeyParts(panelKey);\n    if (uniquePanelKeys[name] === undefined) {\n      uniquePanelKeys[name] = 0;\n    }\n    const currentValue = uniquePanelKeys[name];\n    if (typeof currentValue === 'number' && number) {\n      // Check for the maximum value because we cannot rely on a sequential\n      // set of numbers when panels are modified.\n      uniquePanelKeys[name] = Math.max(currentValue, number);\n    }\n  });\n  return uniquePanelKeys;\n}\n"],"names":["GRID_LAYOUT_SMALL_BREAKPOINT","GRID_LAYOUT_COLS","getYForNewRow","group","newRowY","layout","itemLayouts","itemMaxY","y","h","getPanelBounds","x","w","x1","x2","y1","y2","insertPanelInLayout","newLayout","referenceLayout","MAX_LAYOUT_WIDTH","referenceBounds","aboveInsertRow","insertRow","belowInsertRow","forEach","itemLayout","itemBounds","push","sort","a","b","insertAfterIndex","findIndex","item","i","length","nextItem","splice","map","getValidPanelKey","panelKey","panels","uniquePanelKeys","getUniquePanelKeys","normalizedPanelKey","getPanelKeyParts","removeWhiteSpaces","name","matchingKey","str","replace","parts","match","number","parseInt","Object","keys","undefined","currentValue","Math","max"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@perses-dev/dashboards",
-  "version": "0.52.0-rc.0",
+  "version": "0.52.0",
   "description": "The dashboards feature in Perses",
   "license": "Apache-2.0",
   "homepage": "https://github.com/perses/perses/blob/main/README.md",
@@ -29,9 +29,9 @@
     "lint:fix": "eslint --fix src --ext .ts,.tsx"
   },
   "dependencies": {
-    "@perses-dev/components": "0.52.0-rc.0",
-    "@perses-dev/core": "0.52.0-rc.0",
-    "@perses-dev/plugin-system": "0.52.0-rc.0",
+    "@perses-dev/components": "0.52.0",
+    "@perses-dev/core": "0.52.0",
+    "@perses-dev/plugin-system": "0.52.0",
     "@types/react-grid-layout": "^1.3.2",
     "date-fns": "^4.1.0",
     "immer": "^10.1.1",
@@ -40,13 +40,13 @@
     "react-hook-form": "^7.46.1",
     "react-intersection-observer": "^9.4.0",
     "use-immer": "^0.11.0",
-    "use-query-params": "^2.1.1",
+    "use-query-params": "^2.2.1",
     "use-resize-observer": "^9.0.0",
     "yaml": "^2.7.0",
     "zustand": "^4.3.3"
   },
   "devDependencies": {
-    "@perses-dev/internal-utils": "0.52.0-rc.0",
+    "@perses-dev/internal-utils": "0.52.0",
     "history": "^5.3.0",
     "intersection-observer": "^0.12.2"
   },