@perses-dev/dashboards 0.52.0-beta.5 → 0.52.0-rc.1

package/dist/components/PanelGroupDialog/PanelGroupEditorForm.js

@@ -12,20 +12,18 @@
 // limitations under the License.
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
-import { FormControl, InputLabel, TextField, Select, MenuItem } from '@mui/material';
+import { FormControl, TextField, MenuItem, Typography } from '@mui/material';
 export function PanelGroupEditorForm(props) {
-    const { initialValues, onSubmit } = props;
+    const { initialValues, variables, onSubmit } = props;
     const [title, setTitle] = useState(initialValues.title);
     const [isCollapsed, setIsCollapsed] = useState(initialValues.isCollapsed);
-    const handleCollapsedChange = (e)=>{
-        const next = e.target.value;
-        setIsCollapsed(next === 'Closed');
-    };
+    const [repeatVariable, setRepeatVariable] = useState(initialValues.repeatVariable);
     const handleSubmit = (e)=>{
         e.preventDefault();
         onSubmit({
             title,
-            isCollapsed
+            isCollapsed,
+            repeatVariable
         });
     };
     return /*#__PURE__*/ _jsxs("form", {
@@ -40,25 +38,21 @@ export function PanelGroupEditorForm(props) {
                     label: "Name",
                     variant: "outlined",
                     value: title,
-                    onChange: (e)=>setTitle(e.target.value)
+                    onChange: (e)=>setTitle(e.target.value),
+                    "data-testid": "panel-group-editor-name"
                 })
             }),
             /*#__PURE__*/ _jsxs(FormControl, {
                 fullWidth: true,
                 margin: "normal",
                 children: [
-                    /*#__PURE__*/ _jsx(InputLabel, {
-                        id: "select-collapse-state",
-                        children: "Collapse State"
-                    }),
-                    /*#__PURE__*/ _jsxs(Select, {
+                    /*#__PURE__*/ _jsxs(TextField, {
+                        select: true,
                         required: true,
-                        displayEmpty: true,
-                        labelId: "select-collapse-state",
                         label: "Collapse State",
                         size: "small",
                         value: isCollapsed ? 'Closed' : 'Open',
-                        onChange: handleCollapsedChange,
+                        onChange: (e)=>setIsCollapsed(e.target.value === 'Closed'),
                         children: [
                             /*#__PURE__*/ _jsx(MenuItem, {
                                 value: "Open",
@@ -69,6 +63,32 @@ export function PanelGroupEditorForm(props) {
                                 children: "Closed"
                             })
                         ]
+                    }),
+                    /*#__PURE__*/ _jsx(FormControl, {
+                        fullWidth: true,
+                        margin: "normal",
+                        children: /*#__PURE__*/ _jsxs(TextField, {
+                            select: true,
+                            label: "Repeat Variable",
+                            variant: "outlined",
+                            value: repeatVariable ?? '',
+                            onChange: (e)=>setRepeatVariable(e.target.value === '' ? undefined : e.target.value),
+                            children: [
+                                /*#__PURE__*/ _jsx(MenuItem, {
+                                    value: "",
+                                    children: /*#__PURE__*/ _jsx(Typography, {
+                                        sx: {
+                                            fontStyle: 'italic'
+                                        },
+                                        children: "None"
+                                    })
+                                }),
+                                variables?.sort((a, b)=>a.localeCompare(b)).map((variable)=>/*#__PURE__*/ _jsx(MenuItem, {
+                                        value: variable,
+                                        children: variable
+                                    }, variable))
+                            ]
+                        })
                     })
                 ]
             })

package/dist/components/PanelGroupDialog/PanelGroupEditorForm.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PanelGroupDialog/PanelGroupEditorForm.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 { FormEventHandler, ReactElement, useState } from 'react';\nimport { FormControl, InputLabel, TextField, Select, SelectProps, MenuItem } from '@mui/material';\nimport { PanelGroupEditorValues } from '../../context';\n\ntype CollapsedState = 'Open' | 'Closed';\n\nexport interface PanelGroupEditorFormProps {\n  initialValues: PanelGroupEditorValues;\n  onSubmit: (next: PanelGroupEditorValues) => void;\n}\n\nexport function PanelGroupEditorForm(props: PanelGroupEditorFormProps): ReactElement {\n  const { initialValues, onSubmit } = props;\n\n  const [title, setTitle] = useState(initialValues.title);\n  const [isCollapsed, setIsCollapsed] = useState(initialValues.isCollapsed);\n\n  const handleCollapsedChange: SelectProps<CollapsedState>['onChange'] = (e) => {\n    const next = e.target.value;\n    setIsCollapsed(next === 'Closed');\n  };\n\n  const handleSubmit: FormEventHandler = (e) => {\n    e.preventDefault();\n    onSubmit({ title, isCollapsed });\n  };\n\n  return (\n    <form id={panelGroupEditorFormId} onSubmit={handleSubmit}>\n      <FormControl fullWidth margin=\"normal\">\n        <TextField required label=\"Name\" variant=\"outlined\" value={title} onChange={(e) => setTitle(e.target.value)} />\n      </FormControl>\n      <FormControl fullWidth margin=\"normal\">\n        <InputLabel id=\"select-collapse-state\">Collapse State</InputLabel>\n        <Select<CollapsedState>\n          required\n          displayEmpty\n          labelId=\"select-collapse-state\"\n          label=\"Collapse State\"\n          size=\"small\"\n          value={isCollapsed ? 'Closed' : 'Open'}\n          onChange={handleCollapsedChange}\n        >\n          <MenuItem value=\"Open\">Open</MenuItem>\n          <MenuItem value=\"Closed\">Closed</MenuItem>\n        </Select>\n      </FormControl>\n    </form>\n  );\n}\n\n/**\n * The `id` attribute added to the `PanelGroupEditorForm` component, allowing submit buttons to live outside the form.\n */\nexport const panelGroupEditorFormId = 'panel-group-editor-form';\n"],"names":["useState","FormControl","InputLabel","TextField","Select","MenuItem","PanelGroupEditorForm","props","initialValues","onSubmit","title","setTitle","isCollapsed","setIsCollapsed","handleCollapsedChange","e","next","target","value","handleSubmit","preventDefault","form","id","panelGroupEditorFormId","fullWidth","margin","required","label","variant","onChange","displayEmpty","labelId","size"],"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,SAAyCA,QAAQ,QAAQ,QAAQ;AACjE,SAASC,WAAW,EAAEC,UAAU,EAAEC,SAAS,EAAEC,MAAM,EAAeC,QAAQ,QAAQ,gBAAgB;AAUlG,OAAO,SAASC,qBAAqBC,KAAgC;IACnE,MAAM,EAAEC,aAAa,EAAEC,QAAQ,EAAE,GAAGF;IAEpC,MAAM,CAACG,OAAOC,SAAS,GAAGX,SAASQ,cAAcE,KAAK;IACtD,MAAM,CAACE,aAAaC,eAAe,GAAGb,SAASQ,cAAcI,WAAW;IAExE,MAAME,wBAAiE,CAACC;QACtE,MAAMC,OAAOD,EAAEE,MAAM,CAACC,KAAK;QAC3BL,eAAeG,SAAS;IAC1B;IAEA,MAAMG,eAAiC,CAACJ;QACtCA,EAAEK,cAAc;QAChBX,SAAS;YAAEC;YAAOE;QAAY;IAChC;IAEA,qBACE,MAACS;QAAKC,IAAIC;QAAwBd,UAAUU;;0BAC1C,KAAClB;gBAAYuB,SAAS;gBAACC,QAAO;0BAC5B,cAAA,KAACtB;oBAAUuB,QAAQ;oBAACC,OAAM;oBAAOC,SAAQ;oBAAWV,OAAOR;oBAAOmB,UAAU,CAACd,IAAMJ,SAASI,EAAEE,MAAM,CAACC,KAAK;;;0BAE5G,MAACjB;gBAAYuB,SAAS;gBAACC,QAAO;;kCAC5B,KAACvB;wBAAWoB,IAAG;kCAAwB;;kCACvC,MAAClB;wBACCsB,QAAQ;wBACRI,YAAY;wBACZC,SAAQ;wBACRJ,OAAM;wBACNK,MAAK;wBACLd,OAAON,cAAc,WAAW;wBAChCiB,UAAUf;;0CAEV,KAACT;gCAASa,OAAM;0CAAO;;0CACvB,KAACb;gCAASa,OAAM;0CAAS;;;;;;;;AAKnC;AAEA;;CAEC,GACD,OAAO,MAAMK,yBAAyB,0BAA0B"}
+{"version":3,"sources":["../../../src/components/PanelGroupDialog/PanelGroupEditorForm.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 { FormEventHandler, ReactElement, useState } from 'react';\nimport { FormControl, TextField, MenuItem, Typography } from '@mui/material';\nimport { PanelGroupEditorValues } from '../../context';\n\nexport interface PanelGroupEditorFormProps {\n  initialValues: PanelGroupEditorValues;\n  variables?: string[];\n  onSubmit: (next: PanelGroupEditorValues) => void;\n}\n\nexport function PanelGroupEditorForm(props: PanelGroupEditorFormProps): ReactElement {\n  const { initialValues, variables, onSubmit } = props;\n\n  const [title, setTitle] = useState(initialValues.title);\n  const [isCollapsed, setIsCollapsed] = useState(initialValues.isCollapsed);\n  const [repeatVariable, setRepeatVariable] = useState<string | undefined>(initialValues.repeatVariable);\n\n  const handleSubmit: FormEventHandler = (e) => {\n    e.preventDefault();\n    onSubmit({ title, isCollapsed, repeatVariable });\n  };\n\n  return (\n    <form id={panelGroupEditorFormId} onSubmit={handleSubmit}>\n      <FormControl fullWidth margin=\"normal\">\n        <TextField\n          required\n          label=\"Name\"\n          variant=\"outlined\"\n          value={title}\n          onChange={(e) => setTitle(e.target.value)}\n          data-testid=\"panel-group-editor-name\"\n        />\n      </FormControl>\n      <FormControl fullWidth margin=\"normal\">\n        <TextField\n          select\n          required\n          label=\"Collapse State\"\n          size=\"small\"\n          value={isCollapsed ? 'Closed' : 'Open'}\n          onChange={(e) => setIsCollapsed(e.target.value === 'Closed')}\n        >\n          <MenuItem value=\"Open\">Open</MenuItem>\n          <MenuItem value=\"Closed\">Closed</MenuItem>\n        </TextField>\n        <FormControl fullWidth margin=\"normal\">\n          <TextField\n            select\n            label=\"Repeat Variable\"\n            variant=\"outlined\"\n            value={repeatVariable ?? ''}\n            onChange={(e) => setRepeatVariable(e.target.value === '' ? undefined : e.target.value)}\n          >\n            <MenuItem value=\"\">\n              <Typography sx={{ fontStyle: 'italic' }}>None</Typography>\n            </MenuItem>\n            {variables\n              ?.sort((a, b) => a.localeCompare(b))\n              .map((variable) => (\n                <MenuItem key={variable} value={variable}>\n                  {variable}\n                </MenuItem>\n              ))}\n          </TextField>\n        </FormControl>\n      </FormControl>\n    </form>\n  );\n}\n\n/**\n * The `id` attribute added to the `PanelGroupEditorForm` component, allowing submit buttons to live outside the form.\n */\nexport const panelGroupEditorFormId = 'panel-group-editor-form';\n"],"names":["useState","FormControl","TextField","MenuItem","Typography","PanelGroupEditorForm","props","initialValues","variables","onSubmit","title","setTitle","isCollapsed","setIsCollapsed","repeatVariable","setRepeatVariable","handleSubmit","e","preventDefault","form","id","panelGroupEditorFormId","fullWidth","margin","required","label","variant","value","onChange","target","data-testid","select","size","undefined","sx","fontStyle","sort","a","b","localeCompare","map","variable"],"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,SAAyCA,QAAQ,QAAQ,QAAQ;AACjE,SAASC,WAAW,EAAEC,SAAS,EAAEC,QAAQ,EAAEC,UAAU,QAAQ,gBAAgB;AAS7E,OAAO,SAASC,qBAAqBC,KAAgC;IACnE,MAAM,EAAEC,aAAa,EAAEC,SAAS,EAAEC,QAAQ,EAAE,GAAGH;IAE/C,MAAM,CAACI,OAAOC,SAAS,GAAGX,SAASO,cAAcG,KAAK;IACtD,MAAM,CAACE,aAAaC,eAAe,GAAGb,SAASO,cAAcK,WAAW;IACxE,MAAM,CAACE,gBAAgBC,kBAAkB,GAAGf,SAA6BO,cAAcO,cAAc;IAErG,MAAME,eAAiC,CAACC;QACtCA,EAAEC,cAAc;QAChBT,SAAS;YAAEC;YAAOE;YAAaE;QAAe;IAChD;IAEA,qBACE,MAACK;QAAKC,IAAIC;QAAwBZ,UAAUO;;0BAC1C,KAACf;gBAAYqB,SAAS;gBAACC,QAAO;0BAC5B,cAAA,KAACrB;oBACCsB,QAAQ;oBACRC,OAAM;oBACNC,SAAQ;oBACRC,OAAOjB;oBACPkB,UAAU,CAACX,IAAMN,SAASM,EAAEY,MAAM,CAACF,KAAK;oBACxCG,eAAY;;;0BAGhB,MAAC7B;gBAAYqB,SAAS;gBAACC,QAAO;;kCAC5B,MAACrB;wBACC6B,MAAM;wBACNP,QAAQ;wBACRC,OAAM;wBACNO,MAAK;wBACLL,OAAOf,cAAc,WAAW;wBAChCgB,UAAU,CAACX,IAAMJ,eAAeI,EAAEY,MAAM,CAACF,KAAK,KAAK;;0CAEnD,KAACxB;gCAASwB,OAAM;0CAAO;;0CACvB,KAACxB;gCAASwB,OAAM;0CAAS;;;;kCAE3B,KAAC1B;wBAAYqB,SAAS;wBAACC,QAAO;kCAC5B,cAAA,MAACrB;4BACC6B,MAAM;4BACNN,OAAM;4BACNC,SAAQ;4BACRC,OAAOb,kBAAkB;4BACzBc,UAAU,CAACX,IAAMF,kBAAkBE,EAAEY,MAAM,CAACF,KAAK,KAAK,KAAKM,YAAYhB,EAAEY,MAAM,CAACF,KAAK;;8CAErF,KAACxB;oCAASwB,OAAM;8CACd,cAAA,KAACvB;wCAAW8B,IAAI;4CAAEC,WAAW;wCAAS;kDAAG;;;gCAE1C3B,WACG4B,KAAK,CAACC,GAAGC,IAAMD,EAAEE,aAAa,CAACD,IAChCE,IAAI,CAACC,yBACJ,KAACtC;wCAAwBwB,OAAOc;kDAC7BA;uCADYA;;;;;;;;AAS/B;AAEA;;CAEC,GACD,OAAO,MAAMpB,yBAAyB,0BAA0B"}

package/dist/components/Variables/VariableEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VariableEditor.d.ts","sourceRoot":"","sources":["../../../src/components/Variables/VariableEditor.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAqB,YAAY,EAAE,MAAM,OAAO,CAAC;AAuBxD,OAAO,EAAU,yBAAyB,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAUzF,OAAO,EAA0C,aAAa,EAAkB,MAAM,2BAA2B,CAAC;AAElH,OAAO,EAAE,0BAA0B,EAAuC,MAAM,eAAe,CAAC;AAuBhG,wBAAgB,cAAc,CAAC,KAAK,EAAE;IACpC,mBAAmB,EAAE,kBAAkB,EAAE,CAAC;IAC1C,2BAA2B,EAAE,0BAA0B,EAAE,CAAC;IAC1D,0BAA0B,EAAE,yBAAyB,EAAE,CAAC;IACxD,QAAQ,EAAE,CAAC,mBAAmB,EAAE,kBAAkB,EAAE,KAAK,IAAI,CAAC;IAC9D,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB,GAAG,YAAY,CAsUf;AAMD,wBAAgB,YAAY,CAAC,KAAK,EAAE;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,aAAa,GAAG,SAAS,CAAA;CAAE,GAAG,YAAY,CAoBpG"}
+{"version":3,"file":"VariableEditor.d.ts","sourceRoot":"","sources":["../../../src/components/Variables/VariableEditor.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAqB,YAAY,EAAE,MAAM,OAAO,CAAC;AAuBxD,OAAO,EAAU,yBAAyB,EAA8B,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAUrH,OAAO,EAGL,aAAa,EAId,MAAM,2BAA2B,CAAC;AAEnC,OAAO,EAAE,0BAA0B,EAAqD,MAAM,eAAe,CAAC;AAuB9G,wBAAgB,cAAc,CAAC,KAAK,EAAE;IACpC,mBAAmB,EAAE,kBAAkB,EAAE,CAAC;IAC1C,2BAA2B,EAAE,0BAA0B,EAAE,CAAC;IAC1D,0BAA0B,EAAE,yBAAyB,EAAE,CAAC;IACxD,QAAQ,EAAE,CAAC,mBAAmB,EAAE,kBAAkB,EAAE,KAAK,IAAI,CAAC;IAC9D,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB,GAAG,YAAY,CA4Uf;AAMD,wBAAgB,YAAY,CAAC,KAAK,EAAE;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,aAAa,GAAG,SAAS,CAAA;CAAE,GAAG,YAAY,CAoBpG"}

package/dist/components/Variables/VariableEditor.js

@@ -14,6 +14,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useState, useMemo } from 'react';
 import { Button, Stack, Box, TableContainer, TableBody, TableRow, TableCell as MuiTableCell, Table, TableHead, Switch, Typography, IconButton, Alert, styled, capitalize, Tooltip, Accordion, AccordionSummary, AccordionDetails } from '@mui/material';
 import AddIcon from 'mdi-material-ui/Plus';
+import { DEFAULT_DASHBOARD_DURATION } from '@perses-dev/core';
 import { useImmer } from 'use-immer';
 import PencilIcon from 'mdi-material-ui/Pencil';
 import TrashIcon from 'mdi-material-ui/TrashCan';
@@ -22,9 +23,9 @@ import ArrowDown from 'mdi-material-ui/ArrowDown';
 import ContentDuplicate from 'mdi-material-ui/ContentDuplicate';
 import OpenInNewIcon from 'mdi-material-ui/OpenInNew';
 import ExpandMoreIcon from 'mdi-material-ui/ChevronUp';
-import { ValidationProvider, VariableEditorForm, VARIABLE_TYPES } from '@perses-dev/plugin-system';
+import { ValidationProvider, VariableEditorForm, VARIABLE_TYPES, useInitialTimeRange, TimeRangeProvider } from '@perses-dev/plugin-system';
 import { InfoTooltip } from '@perses-dev/components';
-import { useDiscardChangesConfirmationDialog } from '../../context';
+import { useDashboard, useDiscardChangesConfirmationDialog } from '../../context';
 import { hydrateVariableDefinitionStates } from '../../context/VariableProvider/hydrationUtils';
 import { BuiltinVariableAccordions } from './BuiltinVariableAccordions';
 function getVariableLabelByKind(kind) {
@@ -140,26 +141,32 @@ export function VariableEditor(props) {
             draft.push(v);
         });
     };
+    const { dashboard } = useDashboard();
+    const dashboardDuration = dashboard?.kind === 'Dashboard' ? dashboard.spec.duration : DEFAULT_DASHBOARD_DURATION;
+    const initialTimeRange = useInitialTimeRange(dashboardDuration);
     return /*#__PURE__*/ _jsxs(_Fragment, {
         children: [
             currentEditingVariableDefinition && /*#__PURE__*/ _jsx(ValidationProvider, {
-                children: /*#__PURE__*/ _jsx(VariableEditorForm, {
-                    initialVariableDefinition: currentEditingVariableDefinition,
-                    action: variableFormAction,
-                    isDraft: true,
-                    onActionChange: setVariableFormAction,
-                    onSave: (definition)=>{
-                        setVariableDefinitions((draft)=>{
-                            draft[variableEditIdx] = definition;
+                children: /*#__PURE__*/ _jsx(TimeRangeProvider, {
+                    timeRange: initialTimeRange,
+                    children: /*#__PURE__*/ _jsx(VariableEditorForm, {
+                        initialVariableDefinition: currentEditingVariableDefinition,
+                        action: variableFormAction,
+                        isDraft: true,
+                        onActionChange: setVariableFormAction,
+                        onSave: (definition)=>{
+                            setVariableDefinitions((draft)=>{
+                                draft[variableEditIdx] = definition;
+                                setVariableEditIdx(null);
+                            });
+                        },
+                        onClose: ()=>{
+                            if (variableFormAction === 'create') {
+                                removeVariable(variableEditIdx);
+                            }
                             setVariableEditIdx(null);
-                        });
-                    },
-                    onClose: ()=>{
-                        if (variableFormAction === 'create') {
-                            removeVariable(variableEditIdx);
                         }
-                        setVariableEditIdx(null);
-                    }
+                    })
                 })
             }),
             !currentEditingVariableDefinition && /*#__PURE__*/ _jsxs(_Fragment, {

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/components/index.d.ts

@@ -12,6 +12,7 @@ export * from './EditJsonButton';
 export * from './EditJsonDialog';
 export * from './EmptyDashboard';
 export * from './GridLayout';
+export * from './LeaveDialog';
 export * from './Panel';
 export * from './PanelDrawer';
 export * from './PanelGroupDialog';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAaA,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,aAAa,CAAC;AAC5B,cAAc,oBAAoB,CAAC;AACnC,cAAc,0BAA0B,CAAC;AACzC,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,0BAA0B,CAAC;AACzC,cAAc,oCAAoC,CAAC;AACnD,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,iCAAiC,CAAC;AAChD,cAAc,uBAAuB,CAAC;AACtC,cAAc,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAaA,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,aAAa,CAAC;AAC5B,cAAc,oBAAoB,CAAC;AACnC,cAAc,0BAA0B,CAAC;AACzC,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,0BAA0B,CAAC;AACzC,cAAc,oCAAoC,CAAC;AACnD,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,iCAAiC,CAAC;AAChD,cAAc,uBAAuB,CAAC;AACtC,cAAc,aAAa,CAAC"}

package/dist/components/index.js

@@ -24,6 +24,7 @@ export * from './EditJsonButton';
 export * from './EditJsonDialog';
 export * from './EmptyDashboard';
 export * from './GridLayout';
+export * from './LeaveDialog';
 export * from './Panel';
 export * from './PanelDrawer';
 export * from './PanelGroupDialog';

package/dist/components/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/index.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\nexport * from './AddGroupButton';\nexport * from './AddPanelButton';\nexport * from './Dashboard';\nexport * from './DashboardToolbar';\nexport * from './DashboardStickyToolbar';\nexport * from './Datasources';\nexport * from './DeletePanelDialog';\nexport * from './DeletePanelGroupDialog';\nexport * from './DiscardChangesConfirmationDialog';\nexport * from './DownloadButton';\nexport * from './EditJsonButton';\nexport * from './EditJsonDialog';\nexport * from './EmptyDashboard';\nexport * from './GridLayout';\nexport * from './Panel';\nexport * from './PanelDrawer';\nexport * from './PanelGroupDialog';\nexport * from './QuerySummaryTable';\nexport * from './SaveChangesConfirmationDialog';\nexport * from './SaveDashboardButton';\nexport * from './Variables';\n"],"names":[],"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,cAAc,mBAAmB;AACjC,cAAc,mBAAmB;AACjC,cAAc,cAAc;AAC5B,cAAc,qBAAqB;AACnC,cAAc,2BAA2B;AACzC,cAAc,gBAAgB;AAC9B,cAAc,sBAAsB;AACpC,cAAc,2BAA2B;AACzC,cAAc,qCAAqC;AACnD,cAAc,mBAAmB;AACjC,cAAc,mBAAmB;AACjC,cAAc,mBAAmB;AACjC,cAAc,mBAAmB;AACjC,cAAc,eAAe;AAC7B,cAAc,UAAU;AACxB,cAAc,gBAAgB;AAC9B,cAAc,qBAAqB;AACnC,cAAc,sBAAsB;AACpC,cAAc,kCAAkC;AAChD,cAAc,wBAAwB;AACtC,cAAc,cAAc"}
+{"version":3,"sources":["../../src/components/index.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\nexport * from './AddGroupButton';\nexport * from './AddPanelButton';\nexport * from './Dashboard';\nexport * from './DashboardToolbar';\nexport * from './DashboardStickyToolbar';\nexport * from './Datasources';\nexport * from './DeletePanelDialog';\nexport * from './DeletePanelGroupDialog';\nexport * from './DiscardChangesConfirmationDialog';\nexport * from './DownloadButton';\nexport * from './EditJsonButton';\nexport * from './EditJsonDialog';\nexport * from './EmptyDashboard';\nexport * from './GridLayout';\nexport * from './LeaveDialog';\nexport * from './Panel';\nexport * from './PanelDrawer';\nexport * from './PanelGroupDialog';\nexport * from './QuerySummaryTable';\nexport * from './SaveChangesConfirmationDialog';\nexport * from './SaveDashboardButton';\nexport * from './Variables';\n"],"names":[],"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,cAAc,mBAAmB;AACjC,cAAc,mBAAmB;AACjC,cAAc,cAAc;AAC5B,cAAc,qBAAqB;AACnC,cAAc,2BAA2B;AACzC,cAAc,gBAAgB;AAC9B,cAAc,sBAAsB;AACpC,cAAc,2BAA2B;AACzC,cAAc,qCAAqC;AACnD,cAAc,mBAAmB;AACjC,cAAc,mBAAmB;AACjC,cAAc,mBAAmB;AACjC,cAAc,mBAAmB;AACjC,cAAc,eAAe;AAC7B,cAAc,gBAAgB;AAC9B,cAAc,UAAU;AACxB,cAAc,gBAAgB;AAC9B,cAAc,qBAAqB;AACnC,cAAc,sBAAsB;AACpC,cAAc,kCAAkC;AAChD,cAAc,wBAAwB;AACtC,cAAc,cAAc"}

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

@@ -11,7 +11,7 @@ import { DiscardChangesConfirmationDialogSlice } from './discard-changes-dialog-
 import { SaveChangesConfirmationDialogSlice } from './save-changes-dialog-slice';
 import { DuplicatePanelSlice } from './duplicate-panel-slice';
 import { EditJsonDialogSlice } from './edit-json-dialog-slice';
-import { ViewPanelSlice } from './view-panel-slice';
+import { ViewPanelSlice, VirtualPanelRef } from './view-panel-slice';
 export interface DashboardStoreState extends PanelGroupSlice, PanelSlice, PanelGroupEditorSlice, DeletePanelGroupSlice, PanelEditorSlice, DeletePanelSlice, DiscardChangesConfirmationDialogSlice, DuplicatePanelSlice, EditJsonDialogSlice, SaveChangesConfirmationDialogSlice, ViewPanelSlice {
     isEditMode: boolean;
     setEditMode: (isEditMode: boolean) => void;
@@ -24,17 +24,17 @@ export interface DashboardStoreState extends PanelGroupSlice, PanelSlice, PanelG
     datasources?: Record<string, DatasourceSpec>;
     ttl?: DurationString;
 }
+export declare const DashboardContext: import("react").Context<StoreApi<DashboardStoreState> | undefined>;
+export declare function useDashboardStore<T>(selector: (state: DashboardStoreState) => T): T;
 export interface DashboardStoreProps {
     dashboardResource: DashboardResource | EphemeralDashboardResource;
     isEditMode?: boolean;
-    viewPanelRef?: string;
-    setViewPanelRef?: (viewPanelRef: string | undefined) => void;
+    viewPanelRef?: VirtualPanelRef;
+    setViewPanelRef?: (viewPanelRef: VirtualPanelRef | undefined) => void;
 }
 export interface DashboardProviderProps {
     initialState: DashboardStoreProps;
     children?: ReactNode;
 }
-export declare const DashboardContext: import("react").Context<StoreApi<DashboardStoreState> | undefined>;
-export declare function useDashboardStore<T>(selector: (state: DashboardStoreState) => T): T;
 export declare function DashboardProvider(props: DashboardProviderProps): ReactElement;
 //# sourceMappingURL=DashboardProvider.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"DashboardProvider.d.ts","sourceRoot":"","sources":["../../../src/context/DashboardProvider/DashboardProvider.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAIxC,OAAO,EAAiB,YAAY,EAAE,SAAS,EAAgD,MAAM,OAAO,CAAC;AAC7G,OAAO,EACL,iBAAiB,EACjB,OAAO,EACP,eAAe,EACf,cAAc,EAEd,cAAc,EACd,0BAA0B,EAC3B,MAAM,kBAAkB,CAAC;AAE1B,OAAO,EAA+B,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AAChG,OAAO,EAAsD,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAC1G,OAAO,EAA0B,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAChF,OAAO,EAAoB,UAAU,EAAE,MAAM,eAAe,CAAC;AAC7D,OAAO,EAA+B,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AAChG,OAAO,EAA0B,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAChF,OAAO,EAAmC,qCAAqC,EAAE,MAAM,gCAAgC,CAAC;AACxH,OAAO,EAAgC,kCAAkC,EAAE,MAAM,6BAA6B,CAAC;AAC/G,OAAO,EAA6B,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AACzF,OAAO,EAA6B,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAE1F,OAAO,EAAwB,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAE1E,MAAM,WAAW,mBACf,SAAQ,eAAe,EACrB,UAAU,EACV,qBAAqB,EACrB,qBAAqB,EACrB,gBAAgB,EAChB,gBAAgB,EAChB,qCAAqC,EACrC,mBAAmB,EACnB,mBAAmB,EACnB,kCAAkC,EAClC,cAAc;IAChB,UAAU,EAAE,OAAO,CAAC;IACpB,WAAW,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3C,YAAY,EAAE,CAAC,SAAS,EAAE,iBAAiB,GAAG,0BAA0B,KAAK,IAAI,CAAC;IAClF,IAAI,EAAE,iBAAiB,CAAC,MAAM,CAAC,GAAG,0BAA0B,CAAC,MAAM,CAAC,CAAC;IACrE,QAAQ,EAAE,eAAe,CAAC;IAC1B,QAAQ,EAAE,cAAc,CAAC;IACzB,eAAe,EAAE,cAAc,CAAC;IAChC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC;IAC7C,GAAG,CAAC,EAAE,cAAc,CAAC;CACtB;AAED,MAAM,WAAW,mBAAmB;IAClC,iBAAiB,EAAE,iBAAiB,GAAG,0BAA0B,CAAC;IAClE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,eAAe,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;CAC9D;AAED,MAAM,WAAW,sBAAsB;IACrC,YAAY,EAAE,mBAAmB,CAAC;IAClC,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,eAAO,MAAM,gBAAgB,oEAAsE,CAAC;AAEpG,wBAAgB,iBAAiB,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,CAAC,GAAG,CAAC,CAMnF;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,GAAG,YAAY,CA0B7E"}
+{"version":3,"file":"DashboardProvider.d.ts","sourceRoot":"","sources":["../../../src/context/DashboardProvider/DashboardProvider.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAIxC,OAAO,EAAiB,YAAY,EAAE,SAAS,EAAgD,MAAM,OAAO,CAAC;AAC7G,OAAO,EACL,iBAAiB,EACjB,OAAO,EACP,eAAe,EACf,cAAc,EAEd,cAAc,EACd,0BAA0B,EAC3B,MAAM,kBAAkB,CAAC;AAE1B,OAAO,EAA+B,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AAChG,OAAO,EAAsD,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAC1G,OAAO,EAA0B,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAChF,OAAO,EAAoB,UAAU,EAAE,MAAM,eAAe,CAAC;AAC7D,OAAO,EAA+B,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AAChG,OAAO,EAA0B,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAChF,OAAO,EAAmC,qCAAqC,EAAE,MAAM,gCAAgC,CAAC;AACxH,OAAO,EAAgC,kCAAkC,EAAE,MAAM,6BAA6B,CAAC;AAC/G,OAAO,EAA6B,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AACzF,OAAO,EAA6B,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAE1F,OAAO,EAAwB,cAAc,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAE3F,MAAM,WAAW,mBACf,SAAQ,eAAe,EACrB,UAAU,EACV,qBAAqB,EACrB,qBAAqB,EACrB,gBAAgB,EAChB,gBAAgB,EAChB,qCAAqC,EACrC,mBAAmB,EACnB,mBAAmB,EACnB,kCAAkC,EAClC,cAAc;IAChB,UAAU,EAAE,OAAO,CAAC;IACpB,WAAW,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3C,YAAY,EAAE,CAAC,SAAS,EAAE,iBAAiB,GAAG,0BAA0B,KAAK,IAAI,CAAC;IAClF,IAAI,EAAE,iBAAiB,CAAC,MAAM,CAAC,GAAG,0BAA0B,CAAC,MAAM,CAAC,CAAC;IACrE,QAAQ,EAAE,eAAe,CAAC;IAC1B,QAAQ,EAAE,cAAc,CAAC;IACzB,eAAe,EAAE,cAAc,CAAC;IAChC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC;IAC7C,GAAG,CAAC,EAAE,cAAc,CAAC;CACtB;AAED,eAAO,MAAM,gBAAgB,oEAAsE,CAAC;AAEpG,wBAAgB,iBAAiB,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,CAAC,GAAG,CAAC,CAMnF;AAED,MAAM,WAAW,mBAAmB;IAClC,iBAAiB,EAAE,iBAAiB,GAAG,0BAA0B,CAAC;IAClE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,eAAe,CAAC;IAC/B,eAAe,CAAC,EAAE,CAAC,YAAY,EAAE,eAAe,GAAG,SAAS,KAAK,IAAI,CAAC;CACvE;AAED,MAAM,WAAW,sBAAsB;IACrC,YAAY,EAAE,mBAAmB,CAAC;IAClC,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,GAAG,YAAY,CA0B7E"}

package/dist/context/DashboardProvider/DashboardProvider.js

@@ -40,14 +40,15 @@ export function useDashboardStore(selector) {
     return useStoreWithEqualityFn(store, selector, shallow);
 }
 export function DashboardProvider(props) {
+    // Prevent calling createDashboardStore every time it rerenders
     const createDashboardStore = useCallback(initStore, [
         props
     ]);
+    const [store] = useState(createDashboardStore(props));
     // load plugin to retrieve initial spec if default panel kind is defined
     const { defaultPluginKinds } = usePluginRegistry();
     const defaultPanelKind = defaultPluginKinds?.['Panel'] ?? '';
     const { data: plugin } = usePlugin('Panel', defaultPanelKind);
-    const [store] = useState(createDashboardStore(props)); // prevent calling createDashboardStore every time it rerenders
     useEffect(()=>{
         if (plugin === undefined) return;
         const defaultPanelSpec = plugin.createInitialOptions ? plugin.createInitialOptions() : {};
@@ -69,12 +70,8 @@ export function DashboardProvider(props) {
 }
 function initStore(props) {
     const { initialState: { dashboardResource, isEditMode, viewPanelRef, setViewPanelRef } } = props;
-    const { kind, metadata, spec: { display, duration, refreshInterval = DEFAULT_REFRESH_INTERVAL, datasources } } = dashboardResource;
+    const { kind, metadata, spec: { display, duration, refreshInterval = DEFAULT_REFRESH_INTERVAL, datasources, layouts = [], panels = {} } } = dashboardResource;
     const ttl = 'ttl' in dashboardResource.spec ? dashboardResource.spec.ttl : undefined;
-    let { spec: { layouts, panels } } = dashboardResource;
-    // Set fallbacks in case the frontend is used with a non-Perses backend
-    layouts = layouts ?? [];
-    panels = panels ?? {};
     const store = createStore()(immer(devtools((...args)=>{
         const [set] = args;
         return {
@@ -97,9 +94,11 @@ function initStore(props) {
             datasources,
             ttl,
             isEditMode: !!isEditMode,
-            setEditMode: (isEditMode)=>set({
+            setEditMode: (isEditMode)=>{
+                set({
                     isEditMode
-                }),
+                });
+            },
             setDashboard: ({ kind, metadata, spec: { display, panels = {}, layouts = [], duration, refreshInterval, datasources = {} } })=>{
                 set((state)=>{
                     state.kind = kind;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/context/DashboardProvider/DashboardProvider.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 { createStore } from 'zustand';\nimport { useStoreWithEqualityFn } from 'zustand/traditional';\nimport type { StoreApi } from 'zustand';\nimport { devtools } from 'zustand/middleware';\nimport { immer } from 'zustand/middleware/immer';\nimport { shallow } from 'zustand/shallow';\nimport { createContext, ReactElement, ReactNode, useCallback, useContext, useEffect, useState } from 'react';\nimport {\n  DashboardResource,\n  Display,\n  ProjectMetadata,\n  DurationString,\n  DEFAULT_REFRESH_INTERVAL,\n  DatasourceSpec,\n  EphemeralDashboardResource,\n} from '@perses-dev/core';\nimport { usePlugin, usePluginRegistry } from '@perses-dev/plugin-system';\nimport { createPanelGroupEditorSlice, PanelGroupEditorSlice } from './panel-group-editor-slice';\nimport { convertLayoutsToPanelGroups, createPanelGroupSlice, PanelGroupSlice } from './panel-group-slice';\nimport { createPanelEditorSlice, PanelEditorSlice } from './panel-editor-slice';\nimport { createPanelSlice, PanelSlice } from './panel-slice';\nimport { createDeletePanelGroupSlice, DeletePanelGroupSlice } from './delete-panel-group-slice';\nimport { createDeletePanelSlice, DeletePanelSlice } from './delete-panel-slice';\nimport { createDiscardChangesDialogSlice, DiscardChangesConfirmationDialogSlice } from './discard-changes-dialog-slice';\nimport { createSaveChangesDialogSlice, SaveChangesConfirmationDialogSlice } from './save-changes-dialog-slice';\nimport { createDuplicatePanelSlice, DuplicatePanelSlice } from './duplicate-panel-slice';\nimport { createEditJsonDialogSlice, EditJsonDialogSlice } from './edit-json-dialog-slice';\nimport { createPanelDefinition } from './common';\nimport { createViewPanelSlice, ViewPanelSlice } from './view-panel-slice';\n\nexport interface DashboardStoreState\n  extends PanelGroupSlice,\n    PanelSlice,\n    PanelGroupEditorSlice,\n    DeletePanelGroupSlice,\n    PanelEditorSlice,\n    DeletePanelSlice,\n    DiscardChangesConfirmationDialogSlice,\n    DuplicatePanelSlice,\n    EditJsonDialogSlice,\n    SaveChangesConfirmationDialogSlice,\n    ViewPanelSlice {\n  isEditMode: boolean;\n  setEditMode: (isEditMode: boolean) => void;\n  setDashboard: (dashboard: DashboardResource | EphemeralDashboardResource) => void;\n  kind: DashboardResource['kind'] | EphemeralDashboardResource['kind'];\n  metadata: ProjectMetadata;\n  duration: DurationString;\n  refreshInterval: DurationString;\n  display?: Display;\n  datasources?: Record<string, DatasourceSpec>;\n  ttl?: DurationString;\n}\n\nexport interface DashboardStoreProps {\n  dashboardResource: DashboardResource | EphemeralDashboardResource;\n  isEditMode?: boolean;\n  viewPanelRef?: string;\n  setViewPanelRef?: (viewPanelRef: string | undefined) => void;\n}\n\nexport interface DashboardProviderProps {\n  initialState: DashboardStoreProps;\n  children?: ReactNode;\n}\n\nexport const DashboardContext = createContext<StoreApi<DashboardStoreState> | undefined>(undefined);\n\nexport function useDashboardStore<T>(selector: (state: DashboardStoreState) => T): T {\n  const store = useContext(DashboardContext);\n  if (store === undefined) {\n    throw new Error('No DashboardContext found. Did you forget a Provider?');\n  }\n  return useStoreWithEqualityFn(store, selector, shallow);\n}\n\nexport function DashboardProvider(props: DashboardProviderProps): ReactElement {\n  const createDashboardStore = useCallback(initStore, [props]);\n\n  // load plugin to retrieve initial spec if default panel kind is defined\n  const { defaultPluginKinds } = usePluginRegistry();\n  const defaultPanelKind = defaultPluginKinds?.['Panel'] ?? '';\n  const { data: plugin } = usePlugin('Panel', defaultPanelKind);\n\n  const [store] = useState(createDashboardStore(props)); // prevent calling createDashboardStore every time it rerenders\n\n  useEffect(() => {\n    if (plugin === undefined) return;\n    const defaultPanelSpec = plugin.createInitialOptions ? plugin.createInitialOptions() : {};\n    // set default panel kind, spec, and queries for add panel editor\n    store.setState({\n      initialValues: {\n        panelDefinition: createPanelDefinition(defaultPanelKind, defaultPanelSpec),\n      },\n    });\n  }, [plugin, store, defaultPanelKind]);\n\n  return (\n    <DashboardContext.Provider value={store as StoreApi<DashboardStoreState>}>\n      {props.children}\n    </DashboardContext.Provider>\n  );\n}\n\nfunction initStore(props: DashboardProviderProps): StoreApi<DashboardStoreState> {\n  const {\n    initialState: { dashboardResource, isEditMode, viewPanelRef, setViewPanelRef },\n  } = props;\n\n  const {\n    kind,\n    metadata,\n    spec: { display, duration, refreshInterval = DEFAULT_REFRESH_INTERVAL, datasources },\n  } = dashboardResource;\n\n  const ttl = 'ttl' in dashboardResource.spec ? dashboardResource.spec.ttl : undefined;\n\n  let {\n    spec: { layouts, panels },\n  } = dashboardResource;\n\n  // Set fallbacks in case the frontend is used with a non-Perses backend\n  layouts = layouts ?? [];\n  panels = panels ?? {};\n\n  const store = createStore<DashboardStoreState>()(\n    immer(\n      devtools((...args) => {\n        const [set] = args;\n        return {\n          /* Groups */\n          ...createPanelGroupSlice(layouts)(...args),\n          ...createPanelGroupEditorSlice(...args),\n          ...createDeletePanelGroupSlice(...args),\n          /* Panels */\n          ...createPanelSlice(panels)(...args),\n          ...createPanelEditorSlice()(...args),\n          ...createDeletePanelSlice()(...args),\n          ...createDuplicatePanelSlice()(...args),\n          ...createViewPanelSlice(viewPanelRef, setViewPanelRef)(...args),\n          /* General */\n          ...createDiscardChangesDialogSlice(...args),\n          ...createEditJsonDialogSlice(...args),\n          ...createSaveChangesDialogSlice(...args),\n          kind,\n          metadata,\n          display,\n          duration,\n          refreshInterval,\n          datasources,\n          ttl,\n          isEditMode: !!isEditMode,\n          setEditMode: (isEditMode: boolean): void => set({ isEditMode }),\n          setDashboard: ({\n            kind,\n            metadata,\n            spec: { display, panels = {}, layouts = [], duration, refreshInterval, datasources = {} },\n          }): void => {\n            set((state) => {\n              state.kind = kind;\n              state.metadata = metadata;\n              state.display = display;\n              state.panels = panels;\n              const { panelGroups, panelGroupOrder } = convertLayoutsToPanelGroups(layouts);\n              state.panelGroups = panelGroups;\n              state.panelGroupOrder = panelGroupOrder;\n              state.duration = duration;\n              state.refreshInterval = refreshInterval ?? DEFAULT_REFRESH_INTERVAL;\n              state.datasources = datasources;\n              // TODO: add ttl here to e.g allow edition from JSON view, but probably requires quite some refactoring\n            });\n          },\n        };\n      })\n    )\n  );\n\n  return store;\n}\n"],"names":["createStore","useStoreWithEqualityFn","devtools","immer","shallow","createContext","useCallback","useContext","useEffect","useState","DEFAULT_REFRESH_INTERVAL","usePlugin","usePluginRegistry","createPanelGroupEditorSlice","convertLayoutsToPanelGroups","createPanelGroupSlice","createPanelEditorSlice","createPanelSlice","createDeletePanelGroupSlice","createDeletePanelSlice","createDiscardChangesDialogSlice","createSaveChangesDialogSlice","createDuplicatePanelSlice","createEditJsonDialogSlice","createPanelDefinition","createViewPanelSlice","DashboardContext","undefined","useDashboardStore","selector","store","Error","DashboardProvider","props","createDashboardStore","initStore","defaultPluginKinds","defaultPanelKind","data","plugin","defaultPanelSpec","createInitialOptions","setState","initialValues","panelDefinition","Provider","value","children","initialState","dashboardResource","isEditMode","viewPanelRef","setViewPanelRef","kind","metadata","spec","display","duration","refreshInterval","datasources","ttl","layouts","panels","args","set","setEditMode","setDashboard","state","panelGroups","panelGroupOrder"],"mappings":"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"}
+{"version":3,"sources":["../../../src/context/DashboardProvider/DashboardProvider.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 { createStore } from 'zustand';\nimport { useStoreWithEqualityFn } from 'zustand/traditional';\nimport type { StoreApi } from 'zustand';\nimport { devtools } from 'zustand/middleware';\nimport { immer } from 'zustand/middleware/immer';\nimport { shallow } from 'zustand/shallow';\nimport { createContext, ReactElement, ReactNode, useCallback, useContext, useEffect, useState } from 'react';\nimport {\n  DashboardResource,\n  Display,\n  ProjectMetadata,\n  DurationString,\n  DEFAULT_REFRESH_INTERVAL,\n  DatasourceSpec,\n  EphemeralDashboardResource,\n} from '@perses-dev/core';\nimport { usePlugin, usePluginRegistry } from '@perses-dev/plugin-system';\nimport { createPanelGroupEditorSlice, PanelGroupEditorSlice } from './panel-group-editor-slice';\nimport { convertLayoutsToPanelGroups, createPanelGroupSlice, PanelGroupSlice } from './panel-group-slice';\nimport { createPanelEditorSlice, PanelEditorSlice } from './panel-editor-slice';\nimport { createPanelSlice, PanelSlice } from './panel-slice';\nimport { createDeletePanelGroupSlice, DeletePanelGroupSlice } from './delete-panel-group-slice';\nimport { createDeletePanelSlice, DeletePanelSlice } from './delete-panel-slice';\nimport { createDiscardChangesDialogSlice, DiscardChangesConfirmationDialogSlice } from './discard-changes-dialog-slice';\nimport { createSaveChangesDialogSlice, SaveChangesConfirmationDialogSlice } from './save-changes-dialog-slice';\nimport { createDuplicatePanelSlice, DuplicatePanelSlice } from './duplicate-panel-slice';\nimport { createEditJsonDialogSlice, EditJsonDialogSlice } from './edit-json-dialog-slice';\nimport { createPanelDefinition } from './common';\nimport { createViewPanelSlice, ViewPanelSlice, VirtualPanelRef } from './view-panel-slice';\n\nexport interface DashboardStoreState\n  extends PanelGroupSlice,\n    PanelSlice,\n    PanelGroupEditorSlice,\n    DeletePanelGroupSlice,\n    PanelEditorSlice,\n    DeletePanelSlice,\n    DiscardChangesConfirmationDialogSlice,\n    DuplicatePanelSlice,\n    EditJsonDialogSlice,\n    SaveChangesConfirmationDialogSlice,\n    ViewPanelSlice {\n  isEditMode: boolean;\n  setEditMode: (isEditMode: boolean) => void;\n  setDashboard: (dashboard: DashboardResource | EphemeralDashboardResource) => void;\n  kind: DashboardResource['kind'] | EphemeralDashboardResource['kind'];\n  metadata: ProjectMetadata;\n  duration: DurationString;\n  refreshInterval: DurationString;\n  display?: Display;\n  datasources?: Record<string, DatasourceSpec>;\n  ttl?: DurationString;\n}\n\nexport const DashboardContext = createContext<StoreApi<DashboardStoreState> | undefined>(undefined);\n\nexport function useDashboardStore<T>(selector: (state: DashboardStoreState) => T): T {\n  const store = useContext(DashboardContext);\n  if (store === undefined) {\n    throw new Error('No DashboardContext found. Did you forget a Provider?');\n  }\n  return useStoreWithEqualityFn(store, selector, shallow);\n}\n\nexport interface DashboardStoreProps {\n  dashboardResource: DashboardResource | EphemeralDashboardResource;\n  isEditMode?: boolean;\n  viewPanelRef?: VirtualPanelRef;\n  setViewPanelRef?: (viewPanelRef: VirtualPanelRef | undefined) => void;\n}\n\nexport interface DashboardProviderProps {\n  initialState: DashboardStoreProps;\n  children?: ReactNode;\n}\n\nexport function DashboardProvider(props: DashboardProviderProps): ReactElement {\n  // Prevent calling createDashboardStore every time it rerenders\n  const createDashboardStore = useCallback(initStore, [props]);\n  const [store] = useState(createDashboardStore(props));\n\n  // load plugin to retrieve initial spec if default panel kind is defined\n  const { defaultPluginKinds } = usePluginRegistry();\n  const defaultPanelKind = defaultPluginKinds?.['Panel'] ?? '';\n  const { data: plugin } = usePlugin('Panel', defaultPanelKind);\n\n  useEffect(() => {\n    if (plugin === undefined) return;\n    const defaultPanelSpec = plugin.createInitialOptions ? plugin.createInitialOptions() : {};\n    // set default panel kind, spec, and queries for add panel editor\n    store.setState({\n      initialValues: {\n        panelDefinition: createPanelDefinition(defaultPanelKind, defaultPanelSpec),\n      },\n    });\n  }, [plugin, store, defaultPanelKind]);\n\n  return (\n    <DashboardContext.Provider value={store as StoreApi<DashboardStoreState>}>\n      {props.children}\n    </DashboardContext.Provider>\n  );\n}\n\nfunction initStore(props: DashboardProviderProps): StoreApi<DashboardStoreState> {\n  const {\n    initialState: { dashboardResource, isEditMode, viewPanelRef, setViewPanelRef },\n  } = props;\n\n  const {\n    kind,\n    metadata,\n    spec: { display, duration, refreshInterval = DEFAULT_REFRESH_INTERVAL, datasources, layouts = [], panels = {} },\n  } = dashboardResource;\n\n  const ttl = 'ttl' in dashboardResource.spec ? dashboardResource.spec.ttl : undefined;\n\n  const store = createStore<DashboardStoreState>()(\n    immer(\n      devtools((...args) => {\n        const [set] = args;\n        return {\n          /* Groups */\n          ...createPanelGroupSlice(layouts)(...args),\n          ...createPanelGroupEditorSlice(...args),\n          ...createDeletePanelGroupSlice(...args),\n          /* Panels */\n          ...createPanelSlice(panels)(...args),\n          ...createPanelEditorSlice()(...args),\n          ...createDeletePanelSlice()(...args),\n          ...createDuplicatePanelSlice()(...args),\n          ...createViewPanelSlice(viewPanelRef, setViewPanelRef)(...args),\n          /* General */\n          ...createDiscardChangesDialogSlice(...args),\n          ...createEditJsonDialogSlice(...args),\n          ...createSaveChangesDialogSlice(...args),\n          kind,\n          metadata,\n          display,\n          duration,\n          refreshInterval,\n          datasources,\n          ttl,\n          isEditMode: !!isEditMode,\n          setEditMode: (isEditMode: boolean): void => {\n            set({ isEditMode });\n          },\n          setDashboard: ({\n            kind,\n            metadata,\n            spec: { display, panels = {}, layouts = [], duration, refreshInterval, datasources = {} },\n          }): void => {\n            set((state) => {\n              state.kind = kind;\n              state.metadata = metadata;\n              state.display = display;\n              state.panels = panels;\n              const { panelGroups, panelGroupOrder } = convertLayoutsToPanelGroups(layouts);\n              state.panelGroups = panelGroups;\n              state.panelGroupOrder = panelGroupOrder;\n              state.duration = duration;\n              state.refreshInterval = refreshInterval ?? DEFAULT_REFRESH_INTERVAL;\n              state.datasources = datasources;\n              // TODO: add ttl here to e.g allow edition from JSON view, but probably requires quite some refactoring\n            });\n          },\n        };\n      })\n    )\n  );\n\n  return store;\n}\n"],"names":["createStore","useStoreWithEqualityFn","devtools","immer","shallow","createContext","useCallback","useContext","useEffect","useState","DEFAULT_REFRESH_INTERVAL","usePlugin","usePluginRegistry","createPanelGroupEditorSlice","convertLayoutsToPanelGroups","createPanelGroupSlice","createPanelEditorSlice","createPanelSlice","createDeletePanelGroupSlice","createDeletePanelSlice","createDiscardChangesDialogSlice","createSaveChangesDialogSlice","createDuplicatePanelSlice","createEditJsonDialogSlice","createPanelDefinition","createViewPanelSlice","DashboardContext","undefined","useDashboardStore","selector","store","Error","DashboardProvider","props","createDashboardStore","initStore","defaultPluginKinds","defaultPanelKind","data","plugin","defaultPanelSpec","createInitialOptions","setState","initialValues","panelDefinition","Provider","value","children","initialState","dashboardResource","isEditMode","viewPanelRef","setViewPanelRef","kind","metadata","spec","display","duration","refreshInterval","datasources","layouts","panels","ttl","args","set","setEditMode","setDashboard","state","panelGroups","panelGroupOrder"],"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 { StringParam, 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', StringParam);
+    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: {
-            viewPanelRef: viewPanelRef ?? undefined,
-            setViewPanelRef: setViewPanelRef,
-            ...initialState
+            ...initialState,
+            viewPanelRef: viewPanelRefNotNull,
+            setViewPanelRef: handleSetViewPanelRef
         },
         children: children
     });