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

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":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,QAAQ,EAAEC,OAAO,QAAsB,QAAQ;AACxD,SACEC,MAAM,EACNC,KAAK,EACLC,GAAG,EACHC,cAAc,EACdC,SAAS,EACTC,QAAQ,EACRC,aAAaC,YAAY,EACzBC,KAAK,EACLC,SAAS,EACTC,MAAM,EACNC,UAAU,EACVC,UAAU,EACVC,KAAK,EACLC,MAAM,EACNC,UAAU,EACVC,OAAO,EACPC,SAAS,EACTC,gBAAgB,EAChBC,gBAAgB,QACX,gBAAgB;AACvB,OAAOC,aAAa,uBAAuB;AAE3C,SAASC,QAAQ,QAAQ,YAAY;AACrC,OAAOC,gBAAgB,yBAAyB;AAChD,OAAOC,eAAe,2BAA2B;AACjD,OAAOC,aAAa,0BAA0B;AAC9C,OAAOC,eAAe,4BAA4B;AAClD,OAAOC,sBAAsB,mCAAmC;AAChE,OAAOC,mBAAmB,4BAA4B;AACtD,OAAOC,oBAAoB,4BAA4B;AAEvD,SAASC,kBAAkB,EAAEC,kBAAkB,EAAiBC,cAAc,QAAQ,4BAA4B;AAClH,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAAqCC,mCAAmC,QAAQ,gBAAgB;AAChG,SAASC,+BAA+B,QAAQ,gDAAgD;AAChG,SAASC,yBAAyB,QAAQ,8BAA8B;AAExE,SAASC,uBAAuBC,IAAY;IAC1C,OAAON,eAAeO,IAAI,CAAC,CAACC,eAAiBA,aAAaF,IAAI,KAAKA,OAAOG;AAC5E;AAEA,SAASC,cAAcC,mBAAyC;IAC9D,MAAMC,SAAmB,EAAE;IAE3B,mCAAmC,GACnC,MAAMC,gBAAgBF,oBAAoBG,GAAG,CAAC,CAACC,qBAAuBA,mBAAmBC,IAAI,CAACC,IAAI;IAClG,MAAMC,sBAAsB,IAAIC,IAAIN;IACpC,IAAIA,cAAcO,MAAM,KAAKF,oBAAoBG,IAAI,EAAE;QACrDT,OAAOU,IAAI,CAAC;IACd;IACA,OAAO;QACLV,QAAQA;QACRW,SAASX,OAAOQ,MAAM,KAAK;IAC7B;AACF;AAEA,OAAO,SAASI,eAAeC,KAM9B;IACC,MAAM,CAACd,qBAAqBe,uBAAuB,GAAGpC,SAASmC,MAAMd,mBAAmB;IACxF,MAAM,CAACgB,iBAAiBC,mBAAmB,GAAG7D,SAAwB;IACtE,MAAM,CAAC8D,oBAAoBC,sBAAsB,GAAG/D,SAAiB;IAErE,MAAMgE,8BAA8BN,MAAMM,2BAA2B;IACrE,MAAMC,6BAA6BP,MAAMO,0BAA0B;IACnE,MAAMC,aAAajE,QAAQ,IAAM0C,cAAcC,sBAAsB;QAACA;KAAoB;IAC1F,MAAM,CAACuB,cAAc,GAAGlE,QAAQ;QAC9B,OAAO;YAACmC,gCAAgCQ,qBAAqB,CAAC,GAAGoB;SAA6B;IAChG,GAAG;QAACA;QAA6BpB;KAAoB;IACrD,MAAMwB,mCAAmC,OAAOR,oBAAoB,YAAYhB,mBAAmB,CAACgB,gBAAgB;IAEpH,MAAM,EAAES,oCAAoC,EAAEC,qCAAqC,EAAE,GACnFnC;IACF,MAAMoC,eAAe;QACnB,IAAIC,KAAKC,SAAS,CAACf,MAAMd,mBAAmB,MAAM4B,KAAKC,SAAS,CAAC7B,sBAAsB;YACrFyB,qCAAqC;gBACnCK,kBAAkB;oBAChBJ;oBACAZ,MAAMiB,QAAQ;gBAChB;gBACAA,UAAU;oBACRL;gBACF;gBACAM,aACE;YACJ;QACF,OAAO;YACLlB,MAAMiB,QAAQ;QAChB;IACF;IAEA,MAAME,iBAAiB,CAACC;QACtBnB,uBAAuB,CAACoB;YACtBA,MAAMC,MAAM,CAACF,OAAO;QACtB;IACF;IAEA,MAAMG,cAAc;QAClBlB,sBAAsB;QACtBJ,uBAAuB,CAACoB;YACtBA,MAAMxB,IAAI,CAAC;gBACThB,MAAM;gBACNU,MAAM;oBACJC,MAAM;oBACNgC,OAAO;gBACT;YACF;QACF;QACArB,mBAAmBjB,oBAAoBS,MAAM;IAC/C;IAEA,MAAM8B,eAAe,CAACL;QACpBf,sBAAsB;QACtBF,mBAAmBiB;IACrB;IAEA,MAAMM,2BAA2B,CAACN,OAAeO;QAC/C1B,uBAAuB,CAACoB;YACtB,MAAMO,IAAIP,KAAK,CAACD,MAAM;YACtB,IAAI,CAACQ,GAAG;gBACN;YACF;YACA,IAAI,CAACA,EAAErC,IAAI,CAACsC,OAAO,EAAE;gBACnBD,EAAErC,IAAI,CAACsC,OAAO,GAAG;oBACfrC,MAAMoC,EAAErC,IAAI,CAACC,IAAI;oBACjBsC,QAAQ;gBACV;YACF;YACAF,EAAErC,IAAI,CAACsC,OAAO,CAACC,MAAM,GAAGH,YAAY;QACtC;IACF;IAEA,MAAMI,sBAAsB,CAACX,OAAeY;QAC1C/B,uBAAuB,CAACoB;YACtB,IAAIW,cAAc,MAAM;gBACtB,MAAMC,cAAcZ,KAAK,CAACD,QAAQ,EAAE;gBACpC,MAAMc,iBAAiBb,KAAK,CAACD,MAAM;gBACnC,IAAIA,UAAU,KAAK,CAACa,eAAe,CAACC,gBAAgB;oBAClD;gBACF;gBACAb,KAAK,CAACD,QAAQ,EAAE,GAAGc;gBACnBb,KAAK,CAACD,MAAM,GAAGa;YACjB,OAAO;gBACL,MAAME,cAAcd,KAAK,CAACD,QAAQ,EAAE;gBACpC,MAAMc,iBAAiBb,KAAK,CAACD,MAAM;gBACnC,IAAIA,UAAUC,MAAM1B,MAAM,GAAG,KAAK,CAACwC,eAAe,CAACD,gBAAgB;oBACjE;gBACF;gBACAb,KAAK,CAACD,QAAQ,EAAE,GAAGc;gBACnBb,KAAK,CAACD,MAAM,GAAGe;YACjB;QACF;IACF;IAEA,MAAMC,mBAAmB,CAACR;QACxB3B,uBAAuB,CAACoB;YACtBA,MAAMxB,IAAI,CAAC+B;QACb;IACF;IAEA,qBACE;;YACGlB,kDACC,KAACrC;0BACC,cAAA,KAACC;oBACC+D,2BAA2B3B;oBAC3B4B,QAAQlC;oBACRmC,SAAS;oBACTC,gBAAgBnC;oBAChBoC,QAAQ,CAACC;wBACPzC,uBAAuB,CAACoB;4BACtBA,KAAK,CAACnB,gBAAgB,GAAGwC;4BACzBvC,mBAAmB;wBACrB;oBACF;oBACAwC,SAAS;wBACP,IAAIvC,uBAAuB,UAAU;4BACnCe,eAAejB;wBACjB;wBACAC,mBAAmB;oBACrB;;;YAIL,CAACO,kDACA;;kCACE,MAAChE;wBACCkG,IAAI;4BACFf,SAAS;4BACTgB,YAAY;4BACZC,SAAS,CAACC,QAAUA,MAAMC,OAAO,CAAC,GAAG;4BACrCC,cAAc,CAACF,QAAU,CAAC,UAAU,EAAEA,MAAMG,OAAO,CAACC,OAAO,EAAE;wBAC/D;;0CAEA,KAAChG;gCAAWiG,SAAQ;0CAAK;;0CACzB,MAAC3G;gCAAMuF,WAAU;gCAAMgB,SAAS;gCAAGK,YAAW;;kDAC5C,KAAC7G;wCACC8G,UAAUtD,MAAMd,mBAAmB,KAAKA,uBAAuB,CAACsB,WAAWV,OAAO;wCAClFsD,SAAQ;wCACRG,SAAS;4CACPvD,MAAMwD,QAAQ,CAACtE;wCACjB;kDACD;;kDAGD,KAAC1C;wCAAOiH,OAAM;wCAAYL,SAAQ;wCAAWG,SAAS1C;kDAAc;;;;;;kCAKxE,KAACnE;wBAAIoG,SAAS;wBAAGF,IAAI;4BAAEc,WAAW;wBAAS;kCACzC,cAAA,MAACjH;4BAAMuG,SAAS;;8CACd,MAACvG;oCAAMuG,SAAS;;wCACb,CAACxC,WAAWV,OAAO,IAClBU,WAAWrB,MAAM,CAACE,GAAG,CAAC,CAACsE,sBACrB,KAACtG;gDAAMuG,UAAS;0DACbD;+CAD0BA;sDAIjC,KAAChH;sDACC,cAAA,MAACK;gDAAM4F,IAAI;oDAAEiB,UAAU;gDAAI;gDAAGC,cAAW;;kEACvC,KAAC7G;kEACC,cAAA,MAACJ;;8EACC,KAACC;8EAAU;;8EACX,KAACA;8EAAU;;8EACX,KAACA;8EAAU;;8EACX,KAACA;8EAAU;;8EACX,KAACA;oEAAUiH,OAAM;8EAAQ;;;;;kEAG7B,KAACnH;kEACEsC,oBAAoBG,GAAG,CAAC,CAACuC,GAAGoC,oBAC3B,MAACnH;;kFACC,KAACC;wEAAUmH,WAAU;wEAAKC,OAAM;kFAC9B,cAAA,KAAChH;4EACCiH,SAASvC,EAAErC,IAAI,CAACsC,OAAO,EAAEC,WAAW;4EACpC0B,UAAU,CAACY;gFACT1C,yBAAyBsC,KAAKI,EAAEC,MAAM,CAACF,OAAO;4EAChD;;;kFAGJ,KAACrH;wEAAUmH,WAAU;wEAAKC,OAAM;wEAAMtB,IAAI;4EAAE0B,YAAY;wEAAO;kFAC7D,cAAA,KAACC;4EAAa/E,MAAMoC,EAAErC,IAAI,CAACC,IAAI;4EAAEgF,OAAO/D,cAAcgE,GAAG,CAAC;gFAAEjF,MAAMoC,EAAErC,IAAI,CAACC,IAAI;4EAAC;;;kFAEhF,KAAC1C;kFAAW8B,uBAAuBgD,EAAE/C,IAAI,KAAK+C,EAAE/C,IAAI;;kFACpD,KAAC/B;kFAAW8E,EAAErC,IAAI,CAACsC,OAAO,EAAEX,eAAe;;kFAC3C,MAACpE;wEAAUiH,OAAM;wEAAQnB,IAAI;4EAAE8B,YAAY;wEAAS;;0FAClD,KAACtH;gFAAWmG,SAAS,IAAMxB,oBAAoBiC,KAAK;gFAAOV,UAAUU,QAAQ;0FAC3E,cAAA,KAAChG;;0FAEH,KAACZ;gFACCmG,SAAS,IAAMxB,oBAAoBiC,KAAK;gFACxCV,UAAUU,QAAQ9E,oBAAoBS,MAAM,GAAG;0FAE/C,cAAA,KAAC1B;;0FAEH,KAACb;gFAAWmG,SAAS,IAAM9B,aAAauC;0FACtC,cAAA,KAAClG;;0FAEH,KAACV;gFAAWmG,SAAS,IAAMpC,eAAe6C;0FACxC,cAAA,KAACjG;;;;;+DA5BQ6D,EAAErC,IAAI,CAACC,IAAI;;;;;sDAoClC,KAAC9C;4CAAImF,SAAQ;sDACX,cAAA,KAACrF;gDAAO4G,SAAQ;gDAAYuB,yBAAW,KAAC/G;gDAAYgF,IAAI;oDAAES,YAAY;gDAAO;gDAAGE,SAAShC;0DAAa;;;;;gCAKzGjB,+BACC,CAACA,4BAA4BsE,KAAK,CAAC,CAAChD,IAAMA,EAAEiD,WAAW,CAAClF,MAAM,KAAK,MACnEW,4BAA4BjB,GAAG,CAC7B,CAACyF,QAAQC,MACPD,OAAOD,WAAW,CAAClF,MAAM,GAAG,mBAC1B,MAAClC;wCAECmF,IAAI,CAACG,QAAW,CAAA;gDACd,6BAA6B;oDAC3BiC,iBAAiBjC,MAAMG,OAAO,CAAC+B,UAAU,CAACC,OAAO;gDACnD;gDACA,6BAA6B;oDAC3BF,iBAAiBjC,MAAMG,OAAO,CAAC+B,UAAU,CAACC,OAAO;gDACnD;4CACF,CAAA;;0DAEA,KAACxH;gDACCyH,0BAAY,KAAC/G;gDACbgH,iBAAeN,OAAOO,MAAM;gDAC5BC,IAAIR,OAAOO,MAAM;0DAEjB,cAAA,KAAC5I;oDAAM8I,eAAc;oDAAM1C,YAAW;oDAAS2C,gBAAe;8DAC5D,cAAA;;4DACGV,OAAOW,OAAO,iBACb,KAACtI;gEAAWiG,SAAQ;0EAClB,cAAA,KAAC5E;oEACCkH,OAAOZ,OAAOW,OAAO,CAACC,KAAK,IAAI;oEAC/BxE,aAAa4D,OAAOW,OAAO,CAACvE,WAAW,IAAI;8EAE3C,cAAA,MAACyE;;4EAAMpI,WAAWuH,OAAOO,MAAM;4EAAE;;;;+EAIrC,MAAClI;gEAAWiG,SAAQ;;oEAAM7F,WAAWuH,OAAOO,MAAM;oEAAE;;;4DAErDP,OAAOc,QAAQ,kBACd,KAACxI;gEAAWyI,MAAMf,OAAOc,QAAQ;gEAAEvB,QAAO;0EACxC,cAAA,KAAClG;oEAAc2H,UAAS;;;;;;;0DAMlC,KAACnI;0DACC,cAAA,KAAChB;8DACC,cAAA,MAACK;wDAAM4F,IAAI;4DAAEiB,UAAU;wDAAI;wDAAGC,cAAW;;0EACvC,KAAC7G;0EACC,cAAA,MAACJ;;sFACC,KAACC;sFAAU;;sFACX,KAACA;sFAAU;;sFACX,KAACA;sFAAU;;sFACX,KAACA;sFAAU;;sFACX,KAACA;4EAAUiH,OAAM;sFAAQ;;;;;0EAG7B,KAACnH;0EACEkI,OAAOD,WAAW,CAACxF,GAAG,CAAC,CAACuC,kBACvB,MAAC/E;;0FACC,KAACC;gFAAUmH,WAAU;gFAAKC,OAAM;0FAC9B,cAAA,KAAChH;oFAAOiH,SAASvC,EAAErC,IAAI,CAACsC,OAAO,EAAEC,WAAW;oFAAMwB,QAAQ;;;0FAG5D,KAACxG;gFAAUmH,WAAU;gFAAKC,OAAM;gFAAMtB,IAAI;oFAAE0B,YAAY;gFAAO;0FAC7D,cAAA,KAACC;oFACC/E,MAAMoC,EAAErC,IAAI,CAACC,IAAI;oFACjBgF,OAAO/D,cAAcgE,GAAG,CAAC;wFAAEjF,MAAMoC,EAAErC,IAAI,CAACC,IAAI;wFAAE6F,QAAQP,OAAOO,MAAM;oFAAC;;;0FAGxE,KAACvI;0FAAW8B,uBAAuBgD,EAAE/C,IAAI,KAAK+C,EAAE/C,IAAI;;0FACpD,KAAC/B;0FAAW8E,EAAErC,IAAI,CAACsC,OAAO,EAAEX,eAAe;;0FAC3C,MAACpE;gFAAUiH,OAAM;;kGACf,KAACvG;wFAAQkI,OAAM;kGACb,cAAA,KAACtI;4FACCmG,SAAS,IAAMnB,iBAAiBR;4FAChC0B,UAAU,CAAC,CAAC7C,cAAcgE,GAAG,CAAC;gGAAEjF,MAAMoC,EAAErC,IAAI,CAACC,IAAI;4FAAC;sGAElD,cAAA,KAACtB;;;kGAGL,KAACd;wFAAWkG,QAAQ;kGAClB,cAAA,KAACtF;;kGAEH,KAACZ;wFAAWkG,QAAQ;kGAClB,cAAA,KAACrF;;kGAEH,KAACb;wFAAWkG,QAAQ;kGAClB,cAAA,KAACxF;;kGAEH,KAACV;wFAAWkG,QAAQ;kGAClB,cAAA,KAACvF;;;;;uEAhCQ6D,EAAErC,IAAI,CAACC,IAAI;;;;;;;uCAnD/BuF;gCA+FdxE,4CACC,KAAC5B;oCAA0B4B,4BAA4BA;;;;;;;;;AAQvE;AAEA,MAAMzD,YAAYQ,OAAOP,cAAc,CAAC,EAAEgG,KAAK,EAAE,GAAM,CAAA;QACrDE,cAAc,CAAC,UAAU,EAAEF,MAAMG,OAAO,CAACC,OAAO,EAAE;IACpD,CAAA;AAEA,OAAO,SAASoB,aAAavE,KAAyD;IACpF,MAAM,EAAER,IAAI,EAAEgF,KAAK,EAAE,GAAGxE;IACxB,qBACE;;YACG,CAACwE,OAAOuB,cAAc,GAAGvG,KAAK,CAAC,CAAC;YAChC,CAACgF,OAAOuB,cAAcvB,OAAOwB,4BAC5B,KAACtJ;gBAAI4H,YAAW;gBAASb,OAAO,CAACV,QAAUA,MAAMG,OAAO,CAAC+C,OAAO,CAACC,IAAI;0BAAE;;YAIxE1B,OAAOuB,4BACN;;kCACE,KAACrJ;wBAAI+G,OAAO,CAACV,QAAUA,MAAMG,OAAO,CAACiD,IAAI,CAAC,IAAI;kCAAG3G;;kCACjD,KAAC9C;wBAAI4H,YAAW;wBAASb,OAAO,CAACV,QAAUA,MAAMG,OAAO,CAACiD,IAAI,CAAC,IAAI;kCAAE;;;;;;AAO9E"}
+{"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":"AAcA,OAAO,EAAE,YAAY,EAAwB,MAAM,OAAO,CAAC;AAE3D,OAAO,EAAqB,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;AAGhF,wBAAgB,gCAAgC,CAAC,EAAE,QAAQ,EAAE,YAAY,EAAE,EAAE,sBAAsB,GAAG,YAAY,CAuCjH"}

package/dist/context/DashboardProvider/DashboardProviderWithQueryParams.js

@@ -11,15 +11,37 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { jsx as _jsx } from "react/jsx-runtime";
-import { JsonParam, useQueryParam } from 'use-query-params';
+import { z } from 'zod';
+import { useCallback, useMemo } from 'react';
+import { parseAsJson, useQueryState } from 'nuqs';
 import { DashboardProvider } from './DashboardProvider';
 export function DashboardProviderWithQueryParams({ children, initialState }) {
-    const [viewPanelRef, setViewPanelRef] = useQueryParam('viewPanelRef', JsonParam);
+    const [viewPanelRef, setViewPanelRef] = useQueryState('viewPanelRef', parseAsJson(z.object({
+        ref: z.string(),
+        repeatVariable: z.tuple([
+            z.string(),
+            z.string()
+        ]).optional()
+    }).optional()));
+    // nuqs returns null when the query param is not present, but our state expects undefined when not present
+    const viewPanelRefNotNull = useMemo(()=>{
+        return viewPanelRef ?? undefined;
+    }, [
+        viewPanelRef
+    ]);
+    const handleSetViewPanelRef = useCallback((panelRef)=>{
+        if (panelRef) {
+            return setViewPanelRef(panelRef);
+        }
+        return setViewPanelRef(null);
+    }, [
+        setViewPanelRef
+    ]);
     return /*#__PURE__*/ _jsx(DashboardProvider, {
         initialState: {
             ...initialState,
-            viewPanelRef: viewPanelRef ?? undefined,
-            setViewPanelRef: setViewPanelRef
+            viewPanelRef: viewPanelRefNotNull,
+            setViewPanelRef: handleSetViewPanelRef
         },
         children: children
     });

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 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 { z } from 'zod';\nimport { ReactElement, useCallback, useMemo } from 'react';\nimport { parseAsJson, useQueryState } from 'nuqs';\nimport { DashboardProvider, DashboardProviderProps } from './DashboardProvider';\nimport { VirtualPanelRef } from './view-panel-slice';\n\nexport function DashboardProviderWithQueryParams({ children, initialState }: DashboardProviderProps): ReactElement {\n  const [viewPanelRef, setViewPanelRef] = useQueryState(\n    'viewPanelRef',\n    parseAsJson(\n      z\n        .object({\n          ref: z.string(),\n          repeatVariable: z.tuple([z.string(), z.string()]).optional(),\n        })\n        .optional()\n    )\n  );\n\n  // nuqs returns null when the query param is not present, but our state expects undefined when not present\n  const viewPanelRefNotNull = useMemo(() => {\n    return viewPanelRef ?? undefined;\n  }, [viewPanelRef]);\n\n  const handleSetViewPanelRef = useCallback(\n    (panelRef: VirtualPanelRef | undefined) => {\n      if (panelRef) {\n        return setViewPanelRef(panelRef);\n      }\n      return setViewPanelRef(null);\n    },\n    [setViewPanelRef]\n  );\n\n  return (\n    <DashboardProvider\n      initialState={{\n        ...initialState,\n        viewPanelRef: viewPanelRefNotNull,\n        setViewPanelRef: handleSetViewPanelRef,\n      }}\n    >\n      {children}\n    </DashboardProvider>\n  );\n}\n"],"names":["z","useCallback","useMemo","parseAsJson","useQueryState","DashboardProvider","DashboardProviderWithQueryParams","children","initialState","viewPanelRef","setViewPanelRef","object","ref","string","repeatVariable","tuple","optional","viewPanelRefNotNull","undefined","handleSetViewPanelRef","panelRef"],"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,CAAC,QAAQ,MAAM;AACxB,SAAuBC,WAAW,EAAEC,OAAO,QAAQ,QAAQ;AAC3D,SAASC,WAAW,EAAEC,aAAa,QAAQ,OAAO;AAClD,SAASC,iBAAiB,QAAgC,sBAAsB;AAGhF,OAAO,SAASC,iCAAiC,EAAEC,QAAQ,EAAEC,YAAY,EAA0B;IACjG,MAAM,CAACC,cAAcC,gBAAgB,GAAGN,cACtC,gBACAD,YACEH,EACGW,MAAM,CAAC;QACNC,KAAKZ,EAAEa,MAAM;QACbC,gBAAgBd,EAAEe,KAAK,CAAC;YAACf,EAAEa,MAAM;YAAIb,EAAEa,MAAM;SAAG,EAAEG,QAAQ;IAC5D,GACCA,QAAQ;IAIf,0GAA0G;IAC1G,MAAMC,sBAAsBf,QAAQ;QAClC,OAAOO,gBAAgBS;IACzB,GAAG;QAACT;KAAa;IAEjB,MAAMU,wBAAwBlB,YAC5B,CAACmB;QACC,IAAIA,UAAU;YACZ,OAAOV,gBAAgBU;QACzB;QACA,OAAOV,gBAAgB;IACzB,GACA;QAACA;KAAgB;IAGnB,qBACE,KAACL;QACCG,cAAc;YACZ,GAAGA,YAAY;YACfC,cAAcQ;YACdP,iBAAiBS;QACnB;kBAECZ;;AAGP"}

package/dist/context/VariableProvider/query-params.d.ts

@@ -1,8 +1,9 @@
 import { VariableValue, VariableDefinition } from '@perses-dev/core';
-import { useQueryParams } from 'use-query-params';
+import { useQueryStates } from 'nuqs';
 export declare function getURLQueryParamName(name: string): string;
-export declare function encodeVariableValue(value: VariableValue): string | null;
+export declare function encodeVariableValue(value: VariableValue): string;
 export declare function decodeVariableValue(value: string): VariableValue;
-export declare function useVariableQueryParams(defs: VariableDefinition[]): ReturnType<typeof useQueryParams>;
+export declare const parseAsVariableValue: import("nuqs").ParserBuilder<VariableValue>;
+export declare function useVariableQueryParams(defs: VariableDefinition[]): ReturnType<typeof useQueryStates>;
 export declare function getInitalValuesFromQueryParameters(queryParamValues: Record<string, VariableValue>): Record<string, VariableValue>;
 //# sourceMappingURL=query-params.d.ts.map

package/dist/context/VariableProvider/query-params.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"query-params.d.ts","sourceRoot":"","sources":["../../../src/context/VariableProvider/query-params.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,aAAa,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AACrE,OAAO,EAAoB,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAIpE,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAEzD;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,aAAa,GAAG,MAAM,GAAG,IAAI,CAKvE;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,MAAM,GAAG,aAAa,CAShE;AAYD,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,kBAAkB,EAAE,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAOpG;AAED,wBAAgB,kCAAkC,CAChD,gBAAgB,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,GAC9C,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,CAW/B"}
+{"version":3,"file":"query-params.d.ts","sourceRoot":"","sources":["../../../src/context/VariableProvider/query-params.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,aAAa,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AACrE,OAAO,EAAgB,cAAc,EAAE,MAAM,MAAM,CAAC;AAIpD,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAEzD;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,aAAa,GAAG,MAAM,CAKhE;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,MAAM,GAAG,aAAa,CAShE;AAED,eAAO,MAAM,oBAAoB,6CAG/B,CAAC;AAEH,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,kBAAkB,EAAE,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAOpG;AAED,wBAAgB,kCAAkC,CAChD,gBAAgB,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,GAC9C,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,CAW/B"}

package/dist/context/VariableProvider/query-params.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 { useQueryParams } from 'use-query-params';
+import { createParser, useQueryStates } from 'nuqs';
 const variableQueryParameterPrefix = 'var-';
 export function getURLQueryParamName(name) {
     return `${variableQueryParameterPrefix}${name}`;
@@ -19,7 +19,7 @@ export function encodeVariableValue(value) {
     if (Array.isArray(value)) {
         return value.join(',');
     }
-    return value;
+    return value ?? '';
 }
 export function decodeVariableValue(value) {
     if (!value) {
@@ -31,23 +31,18 @@ export function decodeVariableValue(value) {
     }
     return values;
 }
-const VariableValueParam = {
-    encode: encodeVariableValue,
-    decode: (v)=>{
-        if (typeof v === 'string') {
-            return decodeVariableValue(v);
-        }
-        return '';
-    }
-};
+export const parseAsVariableValue = createParser({
+    parse: decodeVariableValue,
+    serialize: encodeVariableValue
+});
 export function useVariableQueryParams(defs) {
     const config = {};
     defs.forEach((def)=>{
         const name = getURLQueryParamName(def.spec.name);
-        config[name] = VariableValueParam;
+        config[name] = parseAsVariableValue;
     });
-    return useQueryParams(config, {
-        updateType: 'replaceIn'
+    return useQueryStates(config, {
+        history: 'replace'
     });
 }
 export function getInitalValuesFromQueryParameters(queryParamValues) {

package/dist/context/VariableProvider/query-params.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/context/VariableProvider/query-params.ts"],"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 { VariableValue, VariableDefinition } from '@perses-dev/core';\nimport { QueryParamConfig, useQueryParams } from 'use-query-params';\n\nconst variableQueryParameterPrefix = 'var-';\n\nexport function getURLQueryParamName(name: string): string {\n  return `${variableQueryParameterPrefix}${name}`;\n}\n\nexport function encodeVariableValue(value: VariableValue): string | null {\n  if (Array.isArray(value)) {\n    return value.join(',');\n  }\n  return value;\n}\n\nexport function decodeVariableValue(value: string): VariableValue {\n  if (!value) {\n    return null;\n  }\n  const values = value.split(',');\n  if (values.length === 1) {\n    return values[0] as string;\n  }\n  return values;\n}\n\nconst VariableValueParam: QueryParamConfig<VariableValue> = {\n  encode: encodeVariableValue,\n  decode: (v) => {\n    if (typeof v === 'string') {\n      return decodeVariableValue(v);\n    }\n    return '';\n  },\n};\n\nexport function useVariableQueryParams(defs: VariableDefinition[]): ReturnType<typeof useQueryParams> {\n  const config: Record<string, typeof VariableValueParam> = {};\n  defs.forEach((def) => {\n    const name = getURLQueryParamName(def.spec.name);\n    config[name] = VariableValueParam;\n  });\n  return useQueryParams(config, { updateType: 'replaceIn' });\n}\n\nexport function getInitalValuesFromQueryParameters(\n  queryParamValues: Record<string, VariableValue>\n): Record<string, VariableValue> {\n  const values: Record<string, VariableValue> = {};\n  Object.keys(queryParamValues).forEach((key) => {\n    const value = queryParamValues[key];\n    if (!value) {\n      return;\n    }\n    const name = key.replace(variableQueryParameterPrefix, '');\n    values[name] = value;\n  });\n  return values;\n}\n"],"names":["useQueryParams","variableQueryParameterPrefix","getURLQueryParamName","name","encodeVariableValue","value","Array","isArray","join","decodeVariableValue","values","split","length","VariableValueParam","encode","decode","v","useVariableQueryParams","defs","config","forEach","def","spec","updateType","getInitalValuesFromQueryParameters","queryParamValues","Object","keys","key","replace"],"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,SAA2BA,cAAc,QAAQ,mBAAmB;AAEpE,MAAMC,+BAA+B;AAErC,OAAO,SAASC,qBAAqBC,IAAY;IAC/C,OAAO,GAAGF,+BAA+BE,MAAM;AACjD;AAEA,OAAO,SAASC,oBAAoBC,KAAoB;IACtD,IAAIC,MAAMC,OAAO,CAACF,QAAQ;QACxB,OAAOA,MAAMG,IAAI,CAAC;IACpB;IACA,OAAOH;AACT;AAEA,OAAO,SAASI,oBAAoBJ,KAAa;IAC/C,IAAI,CAACA,OAAO;QACV,OAAO;IACT;IACA,MAAMK,SAASL,MAAMM,KAAK,CAAC;IAC3B,IAAID,OAAOE,MAAM,KAAK,GAAG;QACvB,OAAOF,MAAM,CAAC,EAAE;IAClB;IACA,OAAOA;AACT;AAEA,MAAMG,qBAAsD;IAC1DC,QAAQV;IACRW,QAAQ,CAACC;QACP,IAAI,OAAOA,MAAM,UAAU;YACzB,OAAOP,oBAAoBO;QAC7B;QACA,OAAO;IACT;AACF;AAEA,OAAO,SAASC,uBAAuBC,IAA0B;IAC/D,MAAMC,SAAoD,CAAC;IAC3DD,KAAKE,OAAO,CAAC,CAACC;QACZ,MAAMlB,OAAOD,qBAAqBmB,IAAIC,IAAI,CAACnB,IAAI;QAC/CgB,MAAM,CAAChB,KAAK,GAAGU;IACjB;IACA,OAAOb,eAAemB,QAAQ;QAAEI,YAAY;IAAY;AAC1D;AAEA,OAAO,SAASC,mCACdC,gBAA+C;IAE/C,MAAMf,SAAwC,CAAC;IAC/CgB,OAAOC,IAAI,CAACF,kBAAkBL,OAAO,CAAC,CAACQ;QACrC,MAAMvB,QAAQoB,gBAAgB,CAACG,IAAI;QACnC,IAAI,CAACvB,OAAO;YACV;QACF;QACA,MAAMF,OAAOyB,IAAIC,OAAO,CAAC5B,8BAA8B;QACvDS,MAAM,CAACP,KAAK,GAAGE;IACjB;IACA,OAAOK;AACT"}
+{"version":3,"sources":["../../../src/context/VariableProvider/query-params.ts"],"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 { VariableValue, VariableDefinition } from '@perses-dev/core';\nimport { createParser, useQueryStates } from 'nuqs';\n\nconst variableQueryParameterPrefix = 'var-';\n\nexport function getURLQueryParamName(name: string): string {\n  return `${variableQueryParameterPrefix}${name}`;\n}\n\nexport function encodeVariableValue(value: VariableValue): string {\n  if (Array.isArray(value)) {\n    return value.join(',');\n  }\n  return value ?? '';\n}\n\nexport function decodeVariableValue(value: string): VariableValue {\n  if (!value) {\n    return null;\n  }\n  const values = value.split(',');\n  if (values.length === 1) {\n    return values[0] as string;\n  }\n  return values;\n}\n\nexport const parseAsVariableValue = createParser<VariableValue>({\n  parse: decodeVariableValue,\n  serialize: encodeVariableValue,\n});\n\nexport function useVariableQueryParams(defs: VariableDefinition[]): ReturnType<typeof useQueryStates> {\n  const config: Record<string, typeof parseAsVariableValue> = {};\n  defs.forEach((def) => {\n    const name = getURLQueryParamName(def.spec.name);\n    config[name] = parseAsVariableValue;\n  });\n  return useQueryStates(config, { history: 'replace' });\n}\n\nexport function getInitalValuesFromQueryParameters(\n  queryParamValues: Record<string, VariableValue>\n): Record<string, VariableValue> {\n  const values: Record<string, VariableValue> = {};\n  Object.keys(queryParamValues).forEach((key) => {\n    const value = queryParamValues[key];\n    if (!value) {\n      return;\n    }\n    const name = key.replace(variableQueryParameterPrefix, '');\n    values[name] = value;\n  });\n  return values;\n}\n"],"names":["createParser","useQueryStates","variableQueryParameterPrefix","getURLQueryParamName","name","encodeVariableValue","value","Array","isArray","join","decodeVariableValue","values","split","length","parseAsVariableValue","parse","serialize","useVariableQueryParams","defs","config","forEach","def","spec","history","getInitalValuesFromQueryParameters","queryParamValues","Object","keys","key","replace"],"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,YAAY,EAAEC,cAAc,QAAQ,OAAO;AAEpD,MAAMC,+BAA+B;AAErC,OAAO,SAASC,qBAAqBC,IAAY;IAC/C,OAAO,GAAGF,+BAA+BE,MAAM;AACjD;AAEA,OAAO,SAASC,oBAAoBC,KAAoB;IACtD,IAAIC,MAAMC,OAAO,CAACF,QAAQ;QACxB,OAAOA,MAAMG,IAAI,CAAC;IACpB;IACA,OAAOH,SAAS;AAClB;AAEA,OAAO,SAASI,oBAAoBJ,KAAa;IAC/C,IAAI,CAACA,OAAO;QACV,OAAO;IACT;IACA,MAAMK,SAASL,MAAMM,KAAK,CAAC;IAC3B,IAAID,OAAOE,MAAM,KAAK,GAAG;QACvB,OAAOF,MAAM,CAAC,EAAE;IAClB;IACA,OAAOA;AACT;AAEA,OAAO,MAAMG,uBAAuBd,aAA4B;IAC9De,OAAOL;IACPM,WAAWX;AACb,GAAG;AAEH,OAAO,SAASY,uBAAuBC,IAA0B;IAC/D,MAAMC,SAAsD,CAAC;IAC7DD,KAAKE,OAAO,CAAC,CAACC;QACZ,MAAMjB,OAAOD,qBAAqBkB,IAAIC,IAAI,CAAClB,IAAI;QAC/Ce,MAAM,CAACf,KAAK,GAAGU;IACjB;IACA,OAAOb,eAAekB,QAAQ;QAAEI,SAAS;IAAU;AACrD;AAEA,OAAO,SAASC,mCACdC,gBAA+C;IAE/C,MAAMd,SAAwC,CAAC;IAC/Ce,OAAOC,IAAI,CAACF,kBAAkBL,OAAO,CAAC,CAACQ;QACrC,MAAMtB,QAAQmB,gBAAgB,CAACG,IAAI;QACnC,IAAI,CAACtB,OAAO;YACV;QACF;QACA,MAAMF,OAAOwB,IAAIC,OAAO,CAAC3B,8BAA8B;QACvDS,MAAM,CAACP,KAAK,GAAGE;IACjB;IACA,OAAOK;AACT"}

package/dist/test/render.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"render.d.ts","sourceRoot":"","sources":["../../src/test/render.tsx"],"names":[],"mappings":";AAgBA,OAAO,EAAU,aAAa,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAC7E,OAAO,EAAuB,aAAa,EAAE,MAAM,SAAS,CAAC;AAiC7D;;GAEG;AACH,wBAAgB,iBAAiB,CAC/B,EAAE,EAAE,KAAK,CAAC,YAAY,EACtB,OAAO,CAAC,EAAE,IAAI,CAAC,aAAa,EAAE,SAAS,CAAC,EACxC,OAAO,CAAC,EAAE,aAAa,GACtB,YAAY,CA4Bd"}
+{"version":3,"file":"render.d.ts","sourceRoot":"","sources":["../../src/test/render.tsx"],"names":[],"mappings":";AAgBA,OAAO,EAAU,aAAa,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAC7E,OAAO,EAAuB,aAAa,EAAE,MAAM,SAAS,CAAC;AAgC7D;;GAEG;AACH,wBAAgB,iBAAiB,CAC/B,EAAE,EAAE,KAAK,CAAC,YAAY,EACtB,OAAO,CAAC,EAAE,IAAI,CAAC,aAAa,EAAE,SAAS,CAAC,EACxC,OAAO,CAAC,EAAE,aAAa,GACtB,YAAY,CA4Bd"}

package/dist/test/render.js

@@ -18,8 +18,7 @@ import { render } from '@testing-library/react';
 import { createMemoryHistory } from 'history';
 import { useLayoutEffect, useState } from 'react';
 import { Router } from 'react-router-dom';
-import { QueryParamProvider } from 'use-query-params';
-import { ReactRouter6Adapter } from 'use-query-params/adapters/react-router-6';
+import { NuqsAdapter } from 'nuqs/adapters/react-router/v6';
 import { DatasourceStoreProvider } from '../context';
 import { defaultDatasourceProps } from '../test';
 import { MOCK_PLUGINS } from './plugin-registry';
@@ -55,12 +54,11 @@ import { MOCK_PLUGINS } from './plugin-registry';
     });
     const customHistory = history ?? createMemoryHistory();
     const mockRegistry = mockPluginRegistry(...MOCK_PLUGINS);
-    const BaseRender = ()=>/*#__PURE__*/ _jsx(CustomRouter, {
-            history: customHistory,
-            children: /*#__PURE__*/ _jsx(QueryClientProvider, {
-                client: queryClient,
-                children: /*#__PURE__*/ _jsx(QueryParamProvider, {
-                    adapter: ReactRouter6Adapter,
+    const BaseRender = ()=>/*#__PURE__*/ _jsx(NuqsAdapter, {
+            children: /*#__PURE__*/ _jsx(CustomRouter, {
+                history: customHistory,
+                children: /*#__PURE__*/ _jsx(QueryClientProvider, {
+                    client: queryClient,
                     children: /*#__PURE__*/ _jsx(SnackbarProvider, {
                         anchorOrigin: {
                             vertical: 'bottom',

package/dist/test/render.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/test/render.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { ChartsProvider, SnackbarProvider, testChartsTheme } from '@perses-dev/components';\nimport { mockPluginRegistry, PluginRegistry } from '@perses-dev/plugin-system';\nimport { QueryClient, QueryClientProvider } from '@tanstack/react-query';\nimport { render, RenderOptions, RenderResult } from '@testing-library/react';\nimport { createMemoryHistory, MemoryHistory } from 'history';\nimport { ReactElement, useLayoutEffect, useState } from 'react';\nimport { Router } from 'react-router-dom';\nimport { QueryParamProvider } from 'use-query-params';\nimport { ReactRouter6Adapter } from 'use-query-params/adapters/react-router-6';\nimport { DatasourceStoreProvider } from '../context';\nimport { defaultDatasourceProps } from '../test';\nimport { MOCK_PLUGINS } from './plugin-registry';\n\ninterface CustomRouterProps {\n  history: MemoryHistory;\n  children: React.ReactNode;\n}\n\n/*\n * Workaround for React router upgrade type errors.\n * More details: https://stackoverflow.com/a/69948457/17575201\n */\nconst CustomRouter: React.FC<CustomRouterProps> = ({ history, children }) => {\n  const [state, setState] = useState({\n    action: history.action,\n    location: history.location,\n  });\n\n  useLayoutEffect(() => history.listen(setState), [history]);\n\n  return (\n    <Router location={state.location} navigationType={state.action} navigator={history}>\n      {children}\n    </Router>\n  );\n};\n\n/**\n * Test helper to render a React component with some common app-level providers wrapped around it.\n */\nexport function renderWithContext(\n  ui: React.ReactElement,\n  options?: Omit<RenderOptions, 'queries'>,\n  history?: MemoryHistory\n): RenderResult {\n  // Create a new QueryClient for each test to avoid caching issues\n  const queryClient = new QueryClient({ defaultOptions: { queries: { refetchOnWindowFocus: false, retry: false } } });\n\n  const customHistory = history ?? createMemoryHistory();\n\n  const mockRegistry = mockPluginRegistry(...MOCK_PLUGINS);\n\n  const BaseRender = (): ReactElement => (\n    <CustomRouter history={customHistory}>\n      <QueryClientProvider client={queryClient}>\n        <QueryParamProvider adapter={ReactRouter6Adapter}>\n          <SnackbarProvider anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}>\n            <ChartsProvider chartsTheme={testChartsTheme}>\n              <PluginRegistry\n                pluginLoader={mockRegistry.pluginLoader}\n                defaultPluginKinds={mockRegistry.defaultPluginKinds}\n              >\n                <DatasourceStoreProvider {...defaultDatasourceProps}>{ui}</DatasourceStoreProvider>\n              </PluginRegistry>\n            </ChartsProvider>\n          </SnackbarProvider>\n        </QueryParamProvider>\n      </QueryClientProvider>\n    </CustomRouter>\n  );\n\n  return render(<BaseRender />, options);\n}\n"],"names":["ChartsProvider","SnackbarProvider","testChartsTheme","mockPluginRegistry","PluginRegistry","QueryClient","QueryClientProvider","render","createMemoryHistory","useLayoutEffect","useState","Router","QueryParamProvider","ReactRouter6Adapter","DatasourceStoreProvider","defaultDatasourceProps","MOCK_PLUGINS","CustomRouter","history","children","state","setState","action","location","listen","navigationType","navigator","renderWithContext","ui","options","queryClient","defaultOptions","queries","refetchOnWindowFocus","retry","customHistory","mockRegistry","BaseRender","client","adapter","anchorOrigin","vertical","horizontal","chartsTheme","pluginLoader","defaultPluginKinds"],"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,cAAc,EAAEC,gBAAgB,EAAEC,eAAe,QAAQ,yBAAyB;AAC3F,SAASC,kBAAkB,EAAEC,cAAc,QAAQ,4BAA4B;AAC/E,SAASC,WAAW,EAAEC,mBAAmB,QAAQ,wBAAwB;AACzE,SAASC,MAAM,QAAqC,yBAAyB;AAC7E,SAASC,mBAAmB,QAAuB,UAAU;AAC7D,SAAuBC,eAAe,EAAEC,QAAQ,QAAQ,QAAQ;AAChE,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,SAASC,kBAAkB,QAAQ,mBAAmB;AACtD,SAASC,mBAAmB,QAAQ,2CAA2C;AAC/E,SAASC,uBAAuB,QAAQ,aAAa;AACrD,SAASC,sBAAsB,QAAQ,UAAU;AACjD,SAASC,YAAY,QAAQ,oBAAoB;AAOjD;;;CAGC,GACD,MAAMC,eAA4C,CAAC,EAAEC,OAAO,EAAEC,QAAQ,EAAE;IACtE,MAAM,CAACC,OAAOC,SAAS,GAAGX,SAAS;QACjCY,QAAQJ,QAAQI,MAAM;QACtBC,UAAUL,QAAQK,QAAQ;IAC5B;IAEAd,gBAAgB,IAAMS,QAAQM,MAAM,CAACH,WAAW;QAACH;KAAQ;IAEzD,qBACE,KAACP;QAAOY,UAAUH,MAAMG,QAAQ;QAAEE,gBAAgBL,MAAME,MAAM;QAAEI,WAAWR;kBACxEC;;AAGP;AAEA;;CAEC,GACD,OAAO,SAASQ,kBACdC,EAAsB,EACtBC,OAAwC,EACxCX,OAAuB;IAEvB,iEAAiE;IACjE,MAAMY,cAAc,IAAIzB,YAAY;QAAE0B,gBAAgB;YAAEC,SAAS;gBAAEC,sBAAsB;gBAAOC,OAAO;YAAM;QAAE;IAAE;IAEjH,MAAMC,gBAAgBjB,WAAWV;IAEjC,MAAM4B,eAAejC,sBAAsBa;IAE3C,MAAMqB,aAAa,kBACjB,KAACpB;YAAaC,SAASiB;sBACrB,cAAA,KAAC7B;gBAAoBgC,QAAQR;0BAC3B,cAAA,KAAClB;oBAAmB2B,SAAS1B;8BAC3B,cAAA,KAACZ;wBAAiBuC,cAAc;4BAAEC,UAAU;4BAAUC,YAAY;wBAAQ;kCACxE,cAAA,KAAC1C;4BAAe2C,aAAazC;sCAC3B,cAAA,KAACE;gCACCwC,cAAcR,aAAaQ,YAAY;gCACvCC,oBAAoBT,aAAaS,kBAAkB;0CAEnD,cAAA,KAAC/B;oCAAyB,GAAGC,sBAAsB;8CAAGa;;;;;;;;IASpE,OAAOrB,qBAAO,KAAC8B,iBAAeR;AAChC"}
+{"version":3,"sources":["../../src/test/render.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { ChartsProvider, SnackbarProvider, testChartsTheme } from '@perses-dev/components';\nimport { mockPluginRegistry, PluginRegistry } from '@perses-dev/plugin-system';\nimport { QueryClient, QueryClientProvider } from '@tanstack/react-query';\nimport { render, RenderOptions, RenderResult } from '@testing-library/react';\nimport { createMemoryHistory, MemoryHistory } from 'history';\nimport { ReactElement, useLayoutEffect, useState } from 'react';\nimport { Router } from 'react-router-dom';\nimport { NuqsAdapter } from 'nuqs/adapters/react-router/v6';\nimport { DatasourceStoreProvider } from '../context';\nimport { defaultDatasourceProps } from '../test';\nimport { MOCK_PLUGINS } from './plugin-registry';\n\ninterface CustomRouterProps {\n  history: MemoryHistory;\n  children: React.ReactNode;\n}\n\n/*\n * Workaround for React router upgrade type errors.\n * More details: https://stackoverflow.com/a/69948457/17575201\n */\nconst CustomRouter: React.FC<CustomRouterProps> = ({ history, children }) => {\n  const [state, setState] = useState({\n    action: history.action,\n    location: history.location,\n  });\n\n  useLayoutEffect(() => history.listen(setState), [history]);\n\n  return (\n    <Router location={state.location} navigationType={state.action} navigator={history}>\n      {children}\n    </Router>\n  );\n};\n\n/**\n * Test helper to render a React component with some common app-level providers wrapped around it.\n */\nexport function renderWithContext(\n  ui: React.ReactElement,\n  options?: Omit<RenderOptions, 'queries'>,\n  history?: MemoryHistory\n): RenderResult {\n  // Create a new QueryClient for each test to avoid caching issues\n  const queryClient = new QueryClient({ defaultOptions: { queries: { refetchOnWindowFocus: false, retry: false } } });\n\n  const customHistory = history ?? createMemoryHistory();\n\n  const mockRegistry = mockPluginRegistry(...MOCK_PLUGINS);\n\n  const BaseRender = (): ReactElement => (\n    <NuqsAdapter>\n      <CustomRouter history={customHistory}>\n        <QueryClientProvider client={queryClient}>\n          <SnackbarProvider anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}>\n            <ChartsProvider chartsTheme={testChartsTheme}>\n              <PluginRegistry\n                pluginLoader={mockRegistry.pluginLoader}\n                defaultPluginKinds={mockRegistry.defaultPluginKinds}\n              >\n                <DatasourceStoreProvider {...defaultDatasourceProps}>{ui}</DatasourceStoreProvider>\n              </PluginRegistry>\n            </ChartsProvider>\n          </SnackbarProvider>\n        </QueryClientProvider>\n      </CustomRouter>\n    </NuqsAdapter>\n  );\n\n  return render(<BaseRender />, options);\n}\n"],"names":["ChartsProvider","SnackbarProvider","testChartsTheme","mockPluginRegistry","PluginRegistry","QueryClient","QueryClientProvider","render","createMemoryHistory","useLayoutEffect","useState","Router","NuqsAdapter","DatasourceStoreProvider","defaultDatasourceProps","MOCK_PLUGINS","CustomRouter","history","children","state","setState","action","location","listen","navigationType","navigator","renderWithContext","ui","options","queryClient","defaultOptions","queries","refetchOnWindowFocus","retry","customHistory","mockRegistry","BaseRender","client","anchorOrigin","vertical","horizontal","chartsTheme","pluginLoader","defaultPluginKinds"],"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,cAAc,EAAEC,gBAAgB,EAAEC,eAAe,QAAQ,yBAAyB;AAC3F,SAASC,kBAAkB,EAAEC,cAAc,QAAQ,4BAA4B;AAC/E,SAASC,WAAW,EAAEC,mBAAmB,QAAQ,wBAAwB;AACzE,SAASC,MAAM,QAAqC,yBAAyB;AAC7E,SAASC,mBAAmB,QAAuB,UAAU;AAC7D,SAAuBC,eAAe,EAAEC,QAAQ,QAAQ,QAAQ;AAChE,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,SAASC,WAAW,QAAQ,gCAAgC;AAC5D,SAASC,uBAAuB,QAAQ,aAAa;AACrD,SAASC,sBAAsB,QAAQ,UAAU;AACjD,SAASC,YAAY,QAAQ,oBAAoB;AAOjD;;;CAGC,GACD,MAAMC,eAA4C,CAAC,EAAEC,OAAO,EAAEC,QAAQ,EAAE;IACtE,MAAM,CAACC,OAAOC,SAAS,GAAGV,SAAS;QACjCW,QAAQJ,QAAQI,MAAM;QACtBC,UAAUL,QAAQK,QAAQ;IAC5B;IAEAb,gBAAgB,IAAMQ,QAAQM,MAAM,CAACH,WAAW;QAACH;KAAQ;IAEzD,qBACE,KAACN;QAAOW,UAAUH,MAAMG,QAAQ;QAAEE,gBAAgBL,MAAME,MAAM;QAAEI,WAAWR;kBACxEC;;AAGP;AAEA;;CAEC,GACD,OAAO,SAASQ,kBACdC,EAAsB,EACtBC,OAAwC,EACxCX,OAAuB;IAEvB,iEAAiE;IACjE,MAAMY,cAAc,IAAIxB,YAAY;QAAEyB,gBAAgB;YAAEC,SAAS;gBAAEC,sBAAsB;gBAAOC,OAAO;YAAM;QAAE;IAAE;IAEjH,MAAMC,gBAAgBjB,WAAWT;IAEjC,MAAM2B,eAAehC,sBAAsBY;IAE3C,MAAMqB,aAAa,kBACjB,KAACxB;sBACC,cAAA,KAACI;gBAAaC,SAASiB;0BACrB,cAAA,KAAC5B;oBAAoB+B,QAAQR;8BAC3B,cAAA,KAAC5B;wBAAiBqC,cAAc;4BAAEC,UAAU;4BAAUC,YAAY;wBAAQ;kCACxE,cAAA,KAACxC;4BAAeyC,aAAavC;sCAC3B,cAAA,KAACE;gCACCsC,cAAcP,aAAaO,YAAY;gCACvCC,oBAAoBR,aAAaQ,kBAAkB;0CAEnD,cAAA,KAAC9B;oCAAyB,GAAGC,sBAAsB;8CAAGa;;;;;;;;IASpE,OAAOpB,qBAAO,KAAC6B,iBAAeR;AAChC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@perses-dev/dashboards",
-  "version": "0.52.0-rc.0",
+  "version": "0.52.0-rc.1",
   "description": "The dashboards feature in Perses",
   "license": "Apache-2.0",
   "homepage": "https://github.com/perses/perses/blob/main/README.md",
@@ -29,24 +29,24 @@
     "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-rc.1",
+    "@perses-dev/core": "0.52.0-rc.1",
+    "@perses-dev/plugin-system": "0.52.0-rc.1",
     "@types/react-grid-layout": "^1.3.2",
     "date-fns": "^4.1.0",
     "immer": "^10.1.1",
     "mdi-material-ui": "^7.9.2",
+    "nuqs": "^2.5.1",
     "react-grid-layout": "^1.3.4",
     "react-hook-form": "^7.46.1",
     "react-intersection-observer": "^9.4.0",
     "use-immer": "^0.11.0",
-    "use-query-params": "^2.1.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-rc.1",
     "history": "^5.3.0",
     "intersection-observer": "^0.12.2"
   },