@perses-dev/dashboards 0.53.1 → 0.54.0-beta.1

package/dist/components/SaveDashboardButton/SaveDashboardButton.js

@@ -11,72 +11,14 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useState } from 'react';
 import { Button } from '@mui/material';
-import { isRelativeTimeRange } from '@perses-dev/core';
-import { useTimeRange } from '@perses-dev/plugin-system';
-import { useDashboard, useEditMode, useSaveChangesConfirmationDialog, useVariableDefinitionActions } from '../../context';
+import { useSaveDashboard } from '../../context';
 export const SaveDashboardButton = ({ onSave, isDisabled, variant = 'contained' })=>{
-    const [isSavingDashboard, setSavingDashboard] = useState(false);
-    const { dashboard, setDashboard } = useDashboard();
-    const { getSavedVariablesStatus, setVariableDefaultValues } = useVariableDefinitionActions();
-    const { isSavedVariableModified } = getSavedVariablesStatus();
-    const { timeRange, refreshInterval } = useTimeRange();
-    const { setEditMode } = useEditMode();
-    const { openSaveChangesConfirmationDialog, closeSaveChangesConfirmationDialog } = useSaveChangesConfirmationDialog();
-    const onSaveButtonClick = ()=>{
-        const isSavedDurationModified = isRelativeTimeRange(timeRange) && dashboard.spec.duration !== timeRange.pastDuration;
-        const isSavedRefreshIntervalModified = dashboard.spec.refreshInterval !== refreshInterval;
-        // Save dashboard
-        // - if active timeRange from plugin-system is relative and different from currently saved
-        // - or if the saved variables are different from currently saved
-        if (isSavedDurationModified || isSavedVariableModified || isSavedRefreshIntervalModified) {
-            openSaveChangesConfirmationDialog({
-                onSaveChanges: (saveDefaultTimeRange, saveDefaultRefreshInterval, saveDefaultVariables)=>{
-                    if (isRelativeTimeRange(timeRange) && saveDefaultTimeRange) {
-                        dashboard.spec.duration = timeRange.pastDuration;
-                    }
-                    if (saveDefaultVariables) {
-                        const variables = setVariableDefaultValues();
-                        dashboard.spec.variables = variables;
-                    }
-                    if (saveDefaultRefreshInterval && isSavedRefreshIntervalModified) {
-                        dashboard.spec.refreshInterval = refreshInterval;
-                    }
-                    setDashboard(dashboard);
-                    saveDashboard();
-                },
-                onCancel: ()=>{
-                    closeSaveChangesConfirmationDialog();
-                },
-                isSavedDurationModified,
-                isSavedVariableModified,
-                isSavedRefreshIntervalModified
-            });
-        } else {
-            saveDashboard();
-        }
-    };
-    const saveDashboard = async ()=>{
-        if (onSave) {
-            try {
-                setSavingDashboard(true);
-                await onSave(dashboard);
-                closeSaveChangesConfirmationDialog();
-                setEditMode(false);
-            } catch (error) {
-                throw new Error(`An error occurred while saving the dashboard. ${error}`);
-            } finally{
-                setSavingDashboard(false);
-            }
-        } else {
-            setEditMode(false);
-        }
-    };
+    const { saveDashboard, isSaving } = useSaveDashboard(onSave);
     return /*#__PURE__*/ _jsx(Button, {
         variant: variant,
-        onClick: onSaveButtonClick,
-        disabled: isDisabled || isSavingDashboard,
+        onClick: saveDashboard,
+        disabled: isDisabled || isSaving,
         children: "Save"
     });
 };

package/dist/components/SaveDashboardButton/SaveDashboardButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/SaveDashboardButton/SaveDashboardButton.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { ReactElement, useState } from 'react';\nimport { Button, ButtonProps } from '@mui/material';\nimport { isRelativeTimeRange } from '@perses-dev/core';\nimport { useTimeRange } from '@perses-dev/plugin-system';\nimport {\n  OnSaveDashboard,\n  useDashboard,\n  useEditMode,\n  useSaveChangesConfirmationDialog,\n  useVariableDefinitionActions,\n} from '../../context';\n\nexport interface SaveDashboardButtonProps extends Pick<ButtonProps, 'fullWidth'> {\n  onSave?: OnSaveDashboard;\n  isDisabled: boolean;\n  variant?: 'contained' | 'text' | 'outlined';\n}\n\nexport const SaveDashboardButton = ({\n  onSave,\n  isDisabled,\n  variant = 'contained',\n}: SaveDashboardButtonProps): ReactElement => {\n  const [isSavingDashboard, setSavingDashboard] = useState<boolean>(false);\n  const { dashboard, setDashboard } = useDashboard();\n  const { getSavedVariablesStatus, setVariableDefaultValues } = useVariableDefinitionActions();\n  const { isSavedVariableModified } = getSavedVariablesStatus();\n  const { timeRange, refreshInterval } = useTimeRange();\n  const { setEditMode } = useEditMode();\n  const { openSaveChangesConfirmationDialog, closeSaveChangesConfirmationDialog } = useSaveChangesConfirmationDialog();\n\n  const onSaveButtonClick = (): void => {\n    const isSavedDurationModified =\n      isRelativeTimeRange(timeRange) && dashboard.spec.duration !== timeRange.pastDuration;\n\n    const isSavedRefreshIntervalModified = dashboard.spec.refreshInterval !== refreshInterval;\n\n    // Save dashboard\n    // - if active timeRange from plugin-system is relative and different from currently saved\n    // - or if the saved variables are different from currently saved\n    if (isSavedDurationModified || isSavedVariableModified || isSavedRefreshIntervalModified) {\n      openSaveChangesConfirmationDialog({\n        onSaveChanges: (saveDefaultTimeRange, saveDefaultRefreshInterval, saveDefaultVariables) => {\n          if (isRelativeTimeRange(timeRange) && saveDefaultTimeRange) {\n            dashboard.spec.duration = timeRange.pastDuration;\n          }\n          if (saveDefaultVariables) {\n            const variables = setVariableDefaultValues();\n            dashboard.spec.variables = variables;\n          }\n          if (saveDefaultRefreshInterval && isSavedRefreshIntervalModified) {\n            dashboard.spec.refreshInterval = refreshInterval;\n          }\n          setDashboard(dashboard);\n          saveDashboard();\n        },\n        onCancel: () => {\n          closeSaveChangesConfirmationDialog();\n        },\n        isSavedDurationModified,\n        isSavedVariableModified,\n        isSavedRefreshIntervalModified,\n      });\n    } else {\n      saveDashboard();\n    }\n  };\n\n  const saveDashboard = async (): Promise<void> => {\n    if (onSave) {\n      try {\n        setSavingDashboard(true);\n        await onSave(dashboard);\n        closeSaveChangesConfirmationDialog();\n        setEditMode(false);\n      } catch (error) {\n        throw new Error(`An error occurred while saving the dashboard. ${error}`);\n      } finally {\n        setSavingDashboard(false);\n      }\n    } else {\n      setEditMode(false);\n    }\n  };\n\n  return (\n    <Button variant={variant} onClick={onSaveButtonClick} disabled={isDisabled || isSavingDashboard}>\n      Save\n    </Button>\n  );\n};\n"],"names":["useState","Button","isRelativeTimeRange","useTimeRange","useDashboard","useEditMode","useSaveChangesConfirmationDialog","useVariableDefinitionActions","SaveDashboardButton","onSave","isDisabled","variant","isSavingDashboard","setSavingDashboard","dashboard","setDashboard","getSavedVariablesStatus","setVariableDefaultValues","isSavedVariableModified","timeRange","refreshInterval","setEditMode","openSaveChangesConfirmationDialog","closeSaveChangesConfirmationDialog","onSaveButtonClick","isSavedDurationModified","spec","duration","pastDuration","isSavedRefreshIntervalModified","onSaveChanges","saveDefaultTimeRange","saveDefaultRefreshInterval","saveDefaultVariables","variables","saveDashboard","onCancel","error","Error","onClick","disabled"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAAuBA,QAAQ,QAAQ,QAAQ;AAC/C,SAASC,MAAM,QAAqB,gBAAgB;AACpD,SAASC,mBAAmB,QAAQ,mBAAmB;AACvD,SAASC,YAAY,QAAQ,4BAA4B;AACzD,SAEEC,YAAY,EACZC,WAAW,EACXC,gCAAgC,EAChCC,4BAA4B,QACvB,gBAAgB;AAQvB,OAAO,MAAMC,sBAAsB,CAAC,EAClCC,MAAM,EACNC,UAAU,EACVC,UAAU,WAAW,EACI;IACzB,MAAM,CAACC,mBAAmBC,mBAAmB,GAAGb,SAAkB;IAClE,MAAM,EAAEc,SAAS,EAAEC,YAAY,EAAE,GAAGX;IACpC,MAAM,EAAEY,uBAAuB,EAAEC,wBAAwB,EAAE,GAAGV;IAC9D,MAAM,EAAEW,uBAAuB,EAAE,GAAGF;IACpC,MAAM,EAAEG,SAAS,EAAEC,eAAe,EAAE,GAAGjB;IACvC,MAAM,EAAEkB,WAAW,EAAE,GAAGhB;IACxB,MAAM,EAAEiB,iCAAiC,EAAEC,kCAAkC,EAAE,GAAGjB;IAElF,MAAMkB,oBAAoB;QACxB,MAAMC,0BACJvB,oBAAoBiB,cAAcL,UAAUY,IAAI,CAACC,QAAQ,KAAKR,UAAUS,YAAY;QAEtF,MAAMC,iCAAiCf,UAAUY,IAAI,CAACN,eAAe,KAAKA;QAE1E,iBAAiB;QACjB,0FAA0F;QAC1F,iEAAiE;QACjE,IAAIK,2BAA2BP,2BAA2BW,gCAAgC;YACxFP,kCAAkC;gBAChCQ,eAAe,CAACC,sBAAsBC,4BAA4BC;oBAChE,IAAI/B,oBAAoBiB,cAAcY,sBAAsB;wBAC1DjB,UAAUY,IAAI,CAACC,QAAQ,GAAGR,UAAUS,YAAY;oBAClD;oBACA,IAAIK,sBAAsB;wBACxB,MAAMC,YAAYjB;wBAClBH,UAAUY,IAAI,CAACQ,SAAS,GAAGA;oBAC7B;oBACA,IAAIF,8BAA8BH,gCAAgC;wBAChEf,UAAUY,IAAI,CAACN,eAAe,GAAGA;oBACnC;oBACAL,aAAaD;oBACbqB;gBACF;gBACAC,UAAU;oBACRb;gBACF;gBACAE;gBACAP;gBACAW;YACF;QACF,OAAO;YACLM;QACF;IACF;IAEA,MAAMA,gBAAgB;QACpB,IAAI1B,QAAQ;YACV,IAAI;gBACFI,mBAAmB;gBACnB,MAAMJ,OAAOK;gBACbS;gBACAF,YAAY;YACd,EAAE,OAAOgB,OAAO;gBACd,MAAM,IAAIC,MAAM,CAAC,8CAA8C,EAAED,OAAO;YAC1E,SAAU;gBACRxB,mBAAmB;YACrB;QACF,OAAO;YACLQ,YAAY;QACd;IACF;IAEA,qBACE,KAACpB;QAAOU,SAASA;QAAS4B,SAASf;QAAmBgB,UAAU9B,cAAcE;kBAAmB;;AAIrG,EAAE"}
+{"version":3,"sources":["../../../src/components/SaveDashboardButton/SaveDashboardButton.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { ReactElement } from 'react';\nimport { Button, ButtonProps } from '@mui/material';\nimport { OnSaveDashboard, useSaveDashboard } from '../../context';\n\nexport interface SaveDashboardButtonProps extends Pick<ButtonProps, 'fullWidth'> {\n  onSave?: OnSaveDashboard;\n  isDisabled: boolean;\n  variant?: 'contained' | 'text' | 'outlined';\n}\n\nexport const SaveDashboardButton = ({\n  onSave,\n  isDisabled,\n  variant = 'contained',\n}: SaveDashboardButtonProps): ReactElement => {\n  const { saveDashboard, isSaving } = useSaveDashboard(onSave);\n\n  return (\n    <Button variant={variant} onClick={saveDashboard} disabled={isDisabled || isSaving}>\n      Save\n    </Button>\n  );\n};\n"],"names":["Button","useSaveDashboard","SaveDashboardButton","onSave","isDisabled","variant","saveDashboard","isSaving","onClick","disabled"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAGjC,SAASA,MAAM,QAAqB,gBAAgB;AACpD,SAA0BC,gBAAgB,QAAQ,gBAAgB;AAQlE,OAAO,MAAMC,sBAAsB,CAAC,EAClCC,MAAM,EACNC,UAAU,EACVC,UAAU,WAAW,EACI;IACzB,MAAM,EAAEC,aAAa,EAAEC,QAAQ,EAAE,GAAGN,iBAAiBE;IAErD,qBACE,KAACH;QAAOK,SAASA;QAASG,SAASF;QAAeG,UAAUL,cAAcG;kBAAU;;AAIxF,EAAE"}

package/dist/components/Variables/BuiltinVariableAccordions.d.ts

@@ -1,4 +1,4 @@
-import { BuiltinVariableDefinition } from '@perses-dev/core';
+import { BuiltinVariableDefinition } from '@perses-dev/spec';
 import { ReactElement } from 'react';
 type BuiltinVariableAccordionsProps = {
     builtinVariableDefinitions: BuiltinVariableDefinition[];

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Variables/BuiltinVariableAccordions.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { BuiltinVariableDefinition } from '@perses-dev/core';\nimport {\n  Accordion,\n  AccordionDetails,\n  AccordionSummary,\n  Table,\n  TableBody,\n  TableCell,\n  TableContainer,\n  TableHead,\n  TableRow,\n  Typography,\n} from '@mui/material';\nimport ExpandMoreIcon from 'mdi-material-ui/ChevronUp';\nimport { InfoTooltip } from '@perses-dev/components';\nimport { ReactElement, useMemo } from 'react';\n\ntype BuiltinVariableAccordionsProps = {\n  builtinVariableDefinitions: BuiltinVariableDefinition[];\n};\n\nexport function BuiltinVariableAccordions({\n  builtinVariableDefinitions,\n}: BuiltinVariableAccordionsProps): ReactElement {\n  const builtinVariablesBySource = useMemo(() => {\n    const result: Record<string, BuiltinVariableDefinition[]> = {};\n    for (const definition of builtinVariableDefinitions) {\n      const value = result[definition.spec.source];\n      if (value) {\n        value.push(definition);\n        continue;\n      }\n      result[definition.spec.source] = [definition];\n    }\n    return result;\n  }, [builtinVariableDefinitions]);\n\n  const sources = useMemo(() => {\n    const result: string[] = [];\n    for (const source in builtinVariablesBySource) {\n      if (!result.includes(source)) {\n        result.push(source);\n      }\n    }\n    return result;\n  }, [builtinVariablesBySource]);\n\n  return (\n    <>\n      {sources.map((source) => (\n        <Accordion\n          key={source}\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 expandIcon={<ExpandMoreIcon />} aria-controls=\"builtin\" id=\"builtin\">\n            <Typography variant=\"h2\">\n              <InfoTooltip\n                title={`${source} Built-in Variables`}\n                description=\"Variables computed during dashboard rendering.\"\n              >\n                <span>{source} Built-in Variables</span>\n              </InfoTooltip>\n            </Typography>\n          </AccordionSummary>\n          <AccordionDetails>\n            <TableContainer>\n              <Table sx={{ minWidth: 650 }} aria-label=\"table of external variables\">\n                <TableHead>\n                  <TableRow>\n                    <TableCell>Name</TableCell>\n                    <TableCell>Description</TableCell>\n                  </TableRow>\n                </TableHead>\n                <TableBody>\n                  {(builtinVariablesBySource[source] ?? []).map((v) => (\n                    <TableRow key={source + '-' + v.spec.name}>\n                      <TableCell component=\"th\" scope=\"row\" sx={{ fontWeight: 'bold' }}>\n                        {v.spec.name}\n                      </TableCell>\n                      <TableCell>{v.spec.display?.description ?? ''}</TableCell>\n                    </TableRow>\n                  ))}\n                </TableBody>\n              </Table>\n            </TableContainer>\n          </AccordionDetails>\n        </Accordion>\n      ))}\n    </>\n  );\n}\n"],"names":["Accordion","AccordionDetails","AccordionSummary","Table","TableBody","TableCell","TableContainer","TableHead","TableRow","Typography","ExpandMoreIcon","InfoTooltip","useMemo","BuiltinVariableAccordions","builtinVariableDefinitions","builtinVariablesBySource","result","definition","value","spec","source","push","sources","includes","map","sx","theme","backgroundColor","palette","background","lighter","expandIcon","aria-controls","id","variant","title","description","span","minWidth","aria-label","v","component","scope","fontWeight","name","display"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAGjC,SACEA,SAAS,EACTC,gBAAgB,EAChBC,gBAAgB,EAChBC,KAAK,EACLC,SAAS,EACTC,SAAS,EACTC,cAAc,EACdC,SAAS,EACTC,QAAQ,EACRC,UAAU,QACL,gBAAgB;AACvB,OAAOC,oBAAoB,4BAA4B;AACvD,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAAuBC,OAAO,QAAQ,QAAQ;AAM9C,OAAO,SAASC,0BAA0B,EACxCC,0BAA0B,EACK;IAC/B,MAAMC,2BAA2BH,QAAQ;QACvC,MAAMI,SAAsD,CAAC;QAC7D,KAAK,MAAMC,cAAcH,2BAA4B;YACnD,MAAMI,QAAQF,MAAM,CAACC,WAAWE,IAAI,CAACC,MAAM,CAAC;YAC5C,IAAIF,OAAO;gBACTA,MAAMG,IAAI,CAACJ;gBACX;YACF;YACAD,MAAM,CAACC,WAAWE,IAAI,CAACC,MAAM,CAAC,GAAG;gBAACH;aAAW;QAC/C;QACA,OAAOD;IACT,GAAG;QAACF;KAA2B;IAE/B,MAAMQ,UAAUV,QAAQ;QACtB,MAAMI,SAAmB,EAAE;QAC3B,IAAK,MAAMI,UAAUL,yBAA0B;YAC7C,IAAI,CAACC,OAAOO,QAAQ,CAACH,SAAS;gBAC5BJ,OAAOK,IAAI,CAACD;YACd;QACF;QACA,OAAOJ;IACT,GAAG;QAACD;KAAyB;IAE7B,qBACE;kBACGO,QAAQE,GAAG,CAAC,CAACJ,uBACZ,MAACpB;gBAECyB,IAAI,CAACC,QAAW,CAAA;wBACd,6BAA6B;4BAC3BC,iBAAiBD,MAAME,OAAO,CAACC,UAAU,CAACC,OAAO;wBACnD;wBACA,6BAA6B;4BAC3BH,iBAAiBD,MAAME,OAAO,CAACC,UAAU,CAACC,OAAO;wBACnD;oBACF,CAAA;;kCAEA,KAAC5B;wBAAiB6B,0BAAY,KAACrB;wBAAmBsB,iBAAc;wBAAUC,IAAG;kCAC3E,cAAA,KAACxB;4BAAWyB,SAAQ;sCAClB,cAAA,KAACvB;gCACCwB,OAAO,GAAGf,OAAO,mBAAmB,CAAC;gCACrCgB,aAAY;0CAEZ,cAAA,MAACC;;wCAAMjB;wCAAO;;;;;;kCAIpB,KAACnB;kCACC,cAAA,KAACK;sCACC,cAAA,MAACH;gCAAMsB,IAAI;oCAAEa,UAAU;gCAAI;gCAAGC,cAAW;;kDACvC,KAAChC;kDACC,cAAA,MAACC;;8DACC,KAACH;8DAAU;;8DACX,KAACA;8DAAU;;;;;kDAGf,KAACD;kDACE,AAACW,CAAAA,wBAAwB,CAACK,OAAO,IAAI,EAAE,AAAD,EAAGI,GAAG,CAAC,CAACgB,kBAC7C,MAAChC;;kEACC,KAACH;wDAAUoC,WAAU;wDAAKC,OAAM;wDAAMjB,IAAI;4DAAEkB,YAAY;wDAAO;kEAC5DH,EAAErB,IAAI,CAACyB,IAAI;;kEAEd,KAACvC;kEAAWmC,EAAErB,IAAI,CAAC0B,OAAO,EAAET,eAAe;;;+CAJ9BhB,SAAS,MAAMoB,EAAErB,IAAI,CAACyB,IAAI;;;;;;;eA/B9CxB;;AA8Cf"}
+{"version":3,"sources":["../../../src/components/Variables/BuiltinVariableAccordions.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { BuiltinVariableDefinition } from '@perses-dev/spec';\nimport {\n  Accordion,\n  AccordionDetails,\n  AccordionSummary,\n  Table,\n  TableBody,\n  TableCell,\n  TableContainer,\n  TableHead,\n  TableRow,\n  Typography,\n} from '@mui/material';\nimport ExpandMoreIcon from 'mdi-material-ui/ChevronUp';\nimport { InfoTooltip } from '@perses-dev/components';\nimport { ReactElement, useMemo } from 'react';\n\ntype BuiltinVariableAccordionsProps = {\n  builtinVariableDefinitions: BuiltinVariableDefinition[];\n};\n\nexport function BuiltinVariableAccordions({\n  builtinVariableDefinitions,\n}: BuiltinVariableAccordionsProps): ReactElement {\n  const builtinVariablesBySource = useMemo(() => {\n    const result: Record<string, BuiltinVariableDefinition[]> = {};\n    for (const definition of builtinVariableDefinitions) {\n      const value = result[definition.spec.source];\n      if (value) {\n        value.push(definition);\n        continue;\n      }\n      result[definition.spec.source] = [definition];\n    }\n    return result;\n  }, [builtinVariableDefinitions]);\n\n  const sources = useMemo(() => {\n    const result: string[] = [];\n    for (const source in builtinVariablesBySource) {\n      if (!result.includes(source)) {\n        result.push(source);\n      }\n    }\n    return result;\n  }, [builtinVariablesBySource]);\n\n  return (\n    <>\n      {sources.map((source) => (\n        <Accordion\n          key={source}\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 expandIcon={<ExpandMoreIcon />} aria-controls=\"builtin\" id=\"builtin\">\n            <Typography variant=\"h2\">\n              <InfoTooltip\n                title={`${source} Built-in Variables`}\n                description=\"Variables computed during dashboard rendering.\"\n              >\n                <span>{source} Built-in Variables</span>\n              </InfoTooltip>\n            </Typography>\n          </AccordionSummary>\n          <AccordionDetails>\n            <TableContainer>\n              <Table sx={{ minWidth: 650 }} aria-label=\"table of external variables\">\n                <TableHead>\n                  <TableRow>\n                    <TableCell>Name</TableCell>\n                    <TableCell>Description</TableCell>\n                  </TableRow>\n                </TableHead>\n                <TableBody>\n                  {(builtinVariablesBySource[source] ?? []).map((v) => (\n                    <TableRow key={source + '-' + v.spec.name}>\n                      <TableCell component=\"th\" scope=\"row\" sx={{ fontWeight: 'bold' }}>\n                        {v.spec.name}\n                      </TableCell>\n                      <TableCell>{v.spec.display?.description ?? ''}</TableCell>\n                    </TableRow>\n                  ))}\n                </TableBody>\n              </Table>\n            </TableContainer>\n          </AccordionDetails>\n        </Accordion>\n      ))}\n    </>\n  );\n}\n"],"names":["Accordion","AccordionDetails","AccordionSummary","Table","TableBody","TableCell","TableContainer","TableHead","TableRow","Typography","ExpandMoreIcon","InfoTooltip","useMemo","BuiltinVariableAccordions","builtinVariableDefinitions","builtinVariablesBySource","result","definition","value","spec","source","push","sources","includes","map","sx","theme","backgroundColor","palette","background","lighter","expandIcon","aria-controls","id","variant","title","description","span","minWidth","aria-label","v","component","scope","fontWeight","name","display"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAGjC,SACEA,SAAS,EACTC,gBAAgB,EAChBC,gBAAgB,EAChBC,KAAK,EACLC,SAAS,EACTC,SAAS,EACTC,cAAc,EACdC,SAAS,EACTC,QAAQ,EACRC,UAAU,QACL,gBAAgB;AACvB,OAAOC,oBAAoB,4BAA4B;AACvD,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAAuBC,OAAO,QAAQ,QAAQ;AAM9C,OAAO,SAASC,0BAA0B,EACxCC,0BAA0B,EACK;IAC/B,MAAMC,2BAA2BH,QAAQ;QACvC,MAAMI,SAAsD,CAAC;QAC7D,KAAK,MAAMC,cAAcH,2BAA4B;YACnD,MAAMI,QAAQF,MAAM,CAACC,WAAWE,IAAI,CAACC,MAAM,CAAC;YAC5C,IAAIF,OAAO;gBACTA,MAAMG,IAAI,CAACJ;gBACX;YACF;YACAD,MAAM,CAACC,WAAWE,IAAI,CAACC,MAAM,CAAC,GAAG;gBAACH;aAAW;QAC/C;QACA,OAAOD;IACT,GAAG;QAACF;KAA2B;IAE/B,MAAMQ,UAAUV,QAAQ;QACtB,MAAMI,SAAmB,EAAE;QAC3B,IAAK,MAAMI,UAAUL,yBAA0B;YAC7C,IAAI,CAACC,OAAOO,QAAQ,CAACH,SAAS;gBAC5BJ,OAAOK,IAAI,CAACD;YACd;QACF;QACA,OAAOJ;IACT,GAAG;QAACD;KAAyB;IAE7B,qBACE;kBACGO,QAAQE,GAAG,CAAC,CAACJ,uBACZ,MAACpB;gBAECyB,IAAI,CAACC,QAAW,CAAA;wBACd,6BAA6B;4BAC3BC,iBAAiBD,MAAME,OAAO,CAACC,UAAU,CAACC,OAAO;wBACnD;wBACA,6BAA6B;4BAC3BH,iBAAiBD,MAAME,OAAO,CAACC,UAAU,CAACC,OAAO;wBACnD;oBACF,CAAA;;kCAEA,KAAC5B;wBAAiB6B,0BAAY,KAACrB;wBAAmBsB,iBAAc;wBAAUC,IAAG;kCAC3E,cAAA,KAACxB;4BAAWyB,SAAQ;sCAClB,cAAA,KAACvB;gCACCwB,OAAO,GAAGf,OAAO,mBAAmB,CAAC;gCACrCgB,aAAY;0CAEZ,cAAA,MAACC;;wCAAMjB;wCAAO;;;;;;kCAIpB,KAACnB;kCACC,cAAA,KAACK;sCACC,cAAA,MAACH;gCAAMsB,IAAI;oCAAEa,UAAU;gCAAI;gCAAGC,cAAW;;kDACvC,KAAChC;kDACC,cAAA,MAACC;;8DACC,KAACH;8DAAU;;8DACX,KAACA;8DAAU;;;;;kDAGf,KAACD;kDACE,AAACW,CAAAA,wBAAwB,CAACK,OAAO,IAAI,EAAE,AAAD,EAAGI,GAAG,CAAC,CAACgB,kBAC7C,MAAChC;;kEACC,KAACH;wDAAUoC,WAAU;wDAAKC,OAAM;wDAAMjB,IAAI;4DAAEkB,YAAY;wDAAO;kEAC5DH,EAAErB,IAAI,CAACyB,IAAI;;kEAEd,KAACvC;kEAAWmC,EAAErB,IAAI,CAAC0B,OAAO,EAAET,eAAe;;;+CAJ9BhB,SAAS,MAAMoB,EAAErB,IAAI,CAACyB,IAAI;;;;;;;eA/B9CxB;;AA8Cf"}

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

@@ -1 +1 @@
-{"version":3,"file":"EditVariablesButton.d.ts","sourceRoot":"","sources":["../../../src/components/Variables/EditVariablesButton.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAY,MAAM,OAAO,CAAC;AAC/C,OAAO,EAAU,WAAW,EAAE,MAAM,eAAe,CAAC;AASpD,MAAM,WAAW,wBAAyB,SAAQ,IAAI,CAAC,WAAW,EAAE,WAAW,CAAC;IAC9E;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IAE9B;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;IAEhC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,mBAAmB,CAAC,EAClC,OAAgB,EAChB,KAAmB,EACnB,KAAiB,EACjB,SAAS,GACV,EAAE,wBAAwB,GAAG,YAAY,CAiDzC"}
+{"version":3,"file":"EditVariablesButton.d.ts","sourceRoot":"","sources":["../../../src/components/Variables/EditVariablesButton.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAY,MAAM,OAAO,CAAC;AAC/C,OAAO,EAAU,WAAW,EAAE,MAAM,eAAe,CAAC;AAUpD,MAAM,WAAW,wBAAyB,SAAQ,IAAI,CAAC,WAAW,EAAE,WAAW,CAAC;IAC9E;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IAE9B;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;IAEhC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,mBAAmB,CAAC,EAClC,OAAgB,EAChB,KAAmB,EACnB,KAAiB,EACjB,SAAS,GACV,EAAE,wBAAwB,GAAG,YAAY,CAiDzC"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Variables/EditVariablesButton.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { ReactElement, useState } from 'react';\nimport { Button, ButtonProps } from '@mui/material';\nimport PencilIcon from 'mdi-material-ui/PencilOutline';\nimport { Drawer, InfoTooltip } from '@perses-dev/components';\nimport { BuiltinVariableDefinition, VariableDefinition, ExternalVariableDefinition } from '@perses-dev/core';\nimport { useBuiltinVariableDefinitions } from '@perses-dev/plugin-system';\nimport { TOOLTIP_TEXT, editButtonStyle } from '../../constants';\nimport { useExternalVariableDefinitions, useVariableDefinitionActions, useVariableDefinitions } from '../../context';\nimport { VariableEditor } from './VariableEditor';\n\nexport interface EditVariablesButtonProps extends Pick<ButtonProps, 'fullWidth'> {\n  /**\n   * The variant to use to display the button.\n   */\n  variant?: 'text' | 'outlined';\n\n  /**\n   * The color to use to display the button.\n   */\n  color?: 'primary' | 'secondary';\n\n  /**\n   * The label used inside the button.\n   */\n  label?: string;\n}\n\nexport function EditVariablesButton({\n  variant = 'text',\n  label = 'Variables',\n  color = 'primary',\n  fullWidth,\n}: EditVariablesButtonProps): ReactElement {\n  const [isVariableEditorOpen, setIsVariableEditorOpen] = useState(false);\n  const variableDefinitions: VariableDefinition[] = useVariableDefinitions();\n  const externalVariableDefinitions: ExternalVariableDefinition[] = useExternalVariableDefinitions();\n  const builtinVariableDefinitions: BuiltinVariableDefinition[] = useBuiltinVariableDefinitions();\n  const { setVariableDefinitions } = useVariableDefinitionActions();\n\n  const openVariableEditor = (): void => {\n    setIsVariableEditorOpen(true);\n  };\n\n  const closeVariableEditor = (): void => {\n    setIsVariableEditorOpen(false);\n  };\n\n  return (\n    <>\n      <InfoTooltip description={TOOLTIP_TEXT.editVariables}>\n        <Button\n          startIcon={<PencilIcon />}\n          onClick={openVariableEditor}\n          aria-label={TOOLTIP_TEXT.editVariables}\n          variant={variant}\n          color={color}\n          fullWidth={fullWidth}\n          sx={editButtonStyle}\n        >\n          {label}\n        </Button>\n      </InfoTooltip>\n      <Drawer\n        isOpen={isVariableEditorOpen}\n        onClose={closeVariableEditor}\n        PaperProps={{ sx: { width: '50%' } }}\n        data-testid=\"variable-editor\"\n      >\n        <VariableEditor\n          variableDefinitions={variableDefinitions}\n          externalVariableDefinitions={externalVariableDefinitions}\n          builtinVariableDefinitions={builtinVariableDefinitions}\n          onCancel={closeVariableEditor}\n          onChange={(variables: VariableDefinition[]) => {\n            setVariableDefinitions(variables);\n            setIsVariableEditorOpen(false);\n          }}\n        />\n      </Drawer>\n    </>\n  );\n}\n"],"names":["useState","Button","PencilIcon","Drawer","InfoTooltip","useBuiltinVariableDefinitions","TOOLTIP_TEXT","editButtonStyle","useExternalVariableDefinitions","useVariableDefinitionActions","useVariableDefinitions","VariableEditor","EditVariablesButton","variant","label","color","fullWidth","isVariableEditorOpen","setIsVariableEditorOpen","variableDefinitions","externalVariableDefinitions","builtinVariableDefinitions","setVariableDefinitions","openVariableEditor","closeVariableEditor","description","editVariables","startIcon","onClick","aria-label","sx","isOpen","onClose","PaperProps","width","data-testid","onCancel","onChange","variables"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAAuBA,QAAQ,QAAQ,QAAQ;AAC/C,SAASC,MAAM,QAAqB,gBAAgB;AACpD,OAAOC,gBAAgB,gCAAgC;AACvD,SAASC,MAAM,EAAEC,WAAW,QAAQ,yBAAyB;AAE7D,SAASC,6BAA6B,QAAQ,4BAA4B;AAC1E,SAASC,YAAY,EAAEC,eAAe,QAAQ,kBAAkB;AAChE,SAASC,8BAA8B,EAAEC,4BAA4B,EAAEC,sBAAsB,QAAQ,gBAAgB;AACrH,SAASC,cAAc,QAAQ,mBAAmB;AAmBlD,OAAO,SAASC,oBAAoB,EAClCC,UAAU,MAAM,EAChBC,QAAQ,WAAW,EACnBC,QAAQ,SAAS,EACjBC,SAAS,EACgB;IACzB,MAAM,CAACC,sBAAsBC,wBAAwB,GAAGlB,SAAS;IACjE,MAAMmB,sBAA4CT;IAClD,MAAMU,8BAA4DZ;IAClE,MAAMa,6BAA0DhB;IAChE,MAAM,EAAEiB,sBAAsB,EAAE,GAAGb;IAEnC,MAAMc,qBAAqB;QACzBL,wBAAwB;IAC1B;IAEA,MAAMM,sBAAsB;QAC1BN,wBAAwB;IAC1B;IAEA,qBACE;;0BACE,KAACd;gBAAYqB,aAAanB,aAAaoB,aAAa;0BAClD,cAAA,KAACzB;oBACC0B,yBAAW,KAACzB;oBACZ0B,SAASL;oBACTM,cAAYvB,aAAaoB,aAAa;oBACtCb,SAASA;oBACTE,OAAOA;oBACPC,WAAWA;oBACXc,IAAIvB;8BAEHO;;;0BAGL,KAACX;gBACC4B,QAAQd;gBACRe,SAASR;gBACTS,YAAY;oBAAEH,IAAI;wBAAEI,OAAO;oBAAM;gBAAE;gBACnCC,eAAY;0BAEZ,cAAA,KAACxB;oBACCQ,qBAAqBA;oBACrBC,6BAA6BA;oBAC7BC,4BAA4BA;oBAC5Be,UAAUZ;oBACVa,UAAU,CAACC;wBACThB,uBAAuBgB;wBACvBpB,wBAAwB;oBAC1B;;;;;AAKV"}
+{"version":3,"sources":["../../../src/components/Variables/EditVariablesButton.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { ReactElement, useState } from 'react';\nimport { Button, ButtonProps } from '@mui/material';\nimport PencilIcon from 'mdi-material-ui/PencilOutline';\nimport { Drawer, InfoTooltip } from '@perses-dev/components';\nimport { BuiltinVariableDefinition, VariableDefinition } from '@perses-dev/spec';\nimport { useBuiltinVariableDefinitions } from '@perses-dev/plugin-system';\nimport { ExternalVariableDefinition } from '../../model/VariableDefinition';\nimport { TOOLTIP_TEXT, editButtonStyle } from '../../constants';\nimport { useExternalVariableDefinitions, useVariableDefinitionActions, useVariableDefinitions } from '../../context';\nimport { VariableEditor } from './VariableEditor';\n\nexport interface EditVariablesButtonProps extends Pick<ButtonProps, 'fullWidth'> {\n  /**\n   * The variant to use to display the button.\n   */\n  variant?: 'text' | 'outlined';\n\n  /**\n   * The color to use to display the button.\n   */\n  color?: 'primary' | 'secondary';\n\n  /**\n   * The label used inside the button.\n   */\n  label?: string;\n}\n\nexport function EditVariablesButton({\n  variant = 'text',\n  label = 'Variables',\n  color = 'primary',\n  fullWidth,\n}: EditVariablesButtonProps): ReactElement {\n  const [isVariableEditorOpen, setIsVariableEditorOpen] = useState(false);\n  const variableDefinitions: VariableDefinition[] = useVariableDefinitions();\n  const externalVariableDefinitions: ExternalVariableDefinition[] = useExternalVariableDefinitions();\n  const builtinVariableDefinitions: BuiltinVariableDefinition[] = useBuiltinVariableDefinitions();\n  const { setVariableDefinitions } = useVariableDefinitionActions();\n\n  const openVariableEditor = (): void => {\n    setIsVariableEditorOpen(true);\n  };\n\n  const closeVariableEditor = (): void => {\n    setIsVariableEditorOpen(false);\n  };\n\n  return (\n    <>\n      <InfoTooltip description={TOOLTIP_TEXT.editVariables}>\n        <Button\n          startIcon={<PencilIcon />}\n          onClick={openVariableEditor}\n          aria-label={TOOLTIP_TEXT.editVariables}\n          variant={variant}\n          color={color}\n          fullWidth={fullWidth}\n          sx={editButtonStyle}\n        >\n          {label}\n        </Button>\n      </InfoTooltip>\n      <Drawer\n        isOpen={isVariableEditorOpen}\n        onClose={closeVariableEditor}\n        PaperProps={{ sx: { width: '50%' } }}\n        data-testid=\"variable-editor\"\n      >\n        <VariableEditor\n          variableDefinitions={variableDefinitions}\n          externalVariableDefinitions={externalVariableDefinitions}\n          builtinVariableDefinitions={builtinVariableDefinitions}\n          onCancel={closeVariableEditor}\n          onChange={(variables: VariableDefinition[]) => {\n            setVariableDefinitions(variables);\n            setIsVariableEditorOpen(false);\n          }}\n        />\n      </Drawer>\n    </>\n  );\n}\n"],"names":["useState","Button","PencilIcon","Drawer","InfoTooltip","useBuiltinVariableDefinitions","TOOLTIP_TEXT","editButtonStyle","useExternalVariableDefinitions","useVariableDefinitionActions","useVariableDefinitions","VariableEditor","EditVariablesButton","variant","label","color","fullWidth","isVariableEditorOpen","setIsVariableEditorOpen","variableDefinitions","externalVariableDefinitions","builtinVariableDefinitions","setVariableDefinitions","openVariableEditor","closeVariableEditor","description","editVariables","startIcon","onClick","aria-label","sx","isOpen","onClose","PaperProps","width","data-testid","onCancel","onChange","variables"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAAuBA,QAAQ,QAAQ,QAAQ;AAC/C,SAASC,MAAM,QAAqB,gBAAgB;AACpD,OAAOC,gBAAgB,gCAAgC;AACvD,SAASC,MAAM,EAAEC,WAAW,QAAQ,yBAAyB;AAE7D,SAASC,6BAA6B,QAAQ,4BAA4B;AAE1E,SAASC,YAAY,EAAEC,eAAe,QAAQ,kBAAkB;AAChE,SAASC,8BAA8B,EAAEC,4BAA4B,EAAEC,sBAAsB,QAAQ,gBAAgB;AACrH,SAASC,cAAc,QAAQ,mBAAmB;AAmBlD,OAAO,SAASC,oBAAoB,EAClCC,UAAU,MAAM,EAChBC,QAAQ,WAAW,EACnBC,QAAQ,SAAS,EACjBC,SAAS,EACgB;IACzB,MAAM,CAACC,sBAAsBC,wBAAwB,GAAGlB,SAAS;IACjE,MAAMmB,sBAA4CT;IAClD,MAAMU,8BAA4DZ;IAClE,MAAMa,6BAA0DhB;IAChE,MAAM,EAAEiB,sBAAsB,EAAE,GAAGb;IAEnC,MAAMc,qBAAqB;QACzBL,wBAAwB;IAC1B;IAEA,MAAMM,sBAAsB;QAC1BN,wBAAwB;IAC1B;IAEA,qBACE;;0BACE,KAACd;gBAAYqB,aAAanB,aAAaoB,aAAa;0BAClD,cAAA,KAACzB;oBACC0B,yBAAW,KAACzB;oBACZ0B,SAASL;oBACTM,cAAYvB,aAAaoB,aAAa;oBACtCb,SAASA;oBACTE,OAAOA;oBACPC,WAAWA;oBACXc,IAAIvB;8BAEHO;;;0BAGL,KAACX;gBACC4B,QAAQd;gBACRe,SAASR;gBACTS,YAAY;oBAAEH,IAAI;wBAAEI,OAAO;oBAAM;gBAAE;gBACnCC,eAAY;0BAEZ,cAAA,KAACxB;oBACCQ,qBAAqBA;oBACrBC,6BAA6BA;oBAC7BC,4BAA4BA;oBAC5Be,UAAUZ;oBACVa,UAAU,CAACC;wBACThB,uBAAuBgB;wBACvBpB,wBAAwB;oBAC1B;;;;;AAKV"}

package/dist/components/Variables/ListVariableListBox.js

@@ -13,7 +13,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { forwardRef, useContext, useMemo } from 'react';
 import { Checkbox, Divider } from '@mui/material';
-import { DEFAULT_ALL_VALUE } from '@perses-dev/core';
+import { DEFAULT_ALL_VALUE } from '@perses-dev/spec';
 const ListVariableListBoxContext = /*#__PURE__*/ React.createContext(undefined);
 export function useListVariableListBoxContext() {
     const ctx = useContext(ListVariableListBoxContext);

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Variables/ListVariableListBox.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport React, { ForwardedRef, HTMLAttributes, ReactNode, forwardRef, useContext, useMemo } from 'react';\nimport { Checkbox, Divider } from '@mui/material';\nimport { VariableOption } from '@perses-dev/plugin-system';\nimport { DEFAULT_ALL_VALUE } from '@perses-dev/core';\n\nexport interface ListVariableListBoxContextValue {\n  options: VariableOption[];\n  selectedOptions: VariableOption[];\n  filteredOptions: VariableOption[];\n  allowAllValue: boolean;\n  onChange: (selectedOptions: VariableOption[]) => void;\n}\n\nconst ListVariableListBoxContext = React.createContext<ListVariableListBoxContextValue | undefined>(undefined);\n\nexport function useListVariableListBoxContext(): ListVariableListBoxContextValue {\n  const ctx = useContext(ListVariableListBoxContext);\n  if (!ctx) throw new Error('ListVariableListBoxContext not found');\n  return ctx;\n}\n\n/*\n * Handles the logic for toggling the global select checkbox in the ListBox header.\n *\n * If all options are selected, it will deselect all options.\n * Except if filteredOptions is a subset of options, then it will only deselect the filtered options.\n *\n * If some options are selected, it will select all filtered options.\n *\n * If no options are selected, it will select all filtered options.\n * Should be not possible since a ListVariable has always at least one value.\n *\n * If allowAllValue is true, it will handle the special \"All\" option logic.\n * Main difference is if some options are selected and there is no filter, it will select the \"All\" option\n */\nfunction handleGlobalSelectToggle(\n  options: VariableOption[],\n  selectedOptions: VariableOption[],\n  filteredOptions: VariableOption[],\n  isIndeterminate: boolean,\n  isAllSelected: boolean,\n  allowAllValue: boolean,\n  onChange: (selectedOptions: VariableOption[]) => void\n): void {\n  if (isAllSelected) {\n    if (filteredOptions.length !== options.length) {\n      onChange(selectedOptions.filter((o) => !filteredOptions.includes(o)));\n    } else {\n      onChange([]);\n    }\n    return;\n  }\n\n  if (isIndeterminate) {\n    if (allowAllValue) {\n      if (filteredOptions.length === options.length) {\n        if (selectedOptions[0]?.value === DEFAULT_ALL_VALUE) {\n          onChange(options.filter((o) => o.value !== DEFAULT_ALL_VALUE));\n        } else {\n          onChange([{ label: DEFAULT_ALL_VALUE, value: DEFAULT_ALL_VALUE }]);\n        }\n      } else {\n        if (filteredOptions.every((o) => selectedOptions.includes(o))) {\n          onChange(selectedOptions.filter((o) => !filteredOptions.includes(o)));\n        } else {\n          onChange([...selectedOptions, ...filteredOptions.filter((o) => o.value !== DEFAULT_ALL_VALUE)]);\n        }\n      }\n    } else {\n      if (filteredOptions.length === options.length) {\n        onChange(options);\n      } else {\n        if (filteredOptions.every((o) => selectedOptions.includes(o))) {\n          onChange(selectedOptions.filter((o) => !filteredOptions.includes(o)));\n        } else {\n          onChange([...selectedOptions, ...filteredOptions]);\n        }\n      }\n    }\n    return;\n  }\n\n  // Nothing selected, so select filtered options\n  onChange(filteredOptions);\n}\n\nexport function ListVariableListBoxProvider({\n  value,\n  children,\n}: {\n  value: ListVariableListBoxContextValue;\n  children: ReactNode;\n}): React.ReactElement {\n  return <ListVariableListBoxContext.Provider value={value}>{children}</ListVariableListBoxContext.Provider>;\n}\n\nexport const ListVariableListBox = forwardRef(function ListVariableListBox(\n  props: HTMLAttributes<HTMLUListElement>,\n  ref: ForwardedRef<HTMLUListElement>\n) {\n  const { children, ...rest } = props;\n  const { options, selectedOptions, filteredOptions, allowAllValue, onChange } = useListVariableListBoxContext();\n\n  // Derived selection metadata for context listbox header\n  const selectedCount = useMemo(() => selectedOptions.length, [selectedOptions]);\n  const isIndeterminate = useMemo(\n    () => options.length > 0 && selectedCount > 0 && selectedCount !== options.length,\n    [selectedCount, options]\n  );\n  const isAllSelected = useMemo(() => options.length > 0 && selectedCount === options.length, [selectedCount, options]);\n\n  return (\n    <ul {...rest} ref={ref} role=\"listbox\">\n      <li style={{ display: 'flex', alignItems: 'center' }}>\n        <Checkbox\n          indeterminate={isIndeterminate}\n          checked={isAllSelected}\n          // intentionally not passing event to underlying handler to mimic previous behavior\n          onChange={() =>\n            handleGlobalSelectToggle(\n              options,\n              selectedOptions,\n              filteredOptions,\n              isIndeterminate,\n              isAllSelected,\n              allowAllValue,\n              onChange\n            )\n          }\n        />\n        <span>\n          <strong>{selectedCount}</strong> Selected\n        </span>\n      </li>\n      <Divider />\n      {children}\n    </ul>\n  );\n});\n"],"names":["React","forwardRef","useContext","useMemo","Checkbox","Divider","DEFAULT_ALL_VALUE","ListVariableListBoxContext","createContext","undefined","useListVariableListBoxContext","ctx","Error","handleGlobalSelectToggle","options","selectedOptions","filteredOptions","isIndeterminate","isAllSelected","allowAllValue","onChange","length","filter","o","includes","value","label","every","ListVariableListBoxProvider","children","Provider","ListVariableListBox","props","ref","rest","selectedCount","ul","role","li","style","display","alignItems","indeterminate","checked","span","strong"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/Variables/ListVariableListBox.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport React, { ForwardedRef, HTMLAttributes, ReactNode, forwardRef, useContext, useMemo } from 'react';\nimport { Checkbox, Divider } from '@mui/material';\nimport { VariableOption } from '@perses-dev/plugin-system';\nimport { DEFAULT_ALL_VALUE } from '@perses-dev/spec';\n\nexport interface ListVariableListBoxContextValue {\n  options: VariableOption[];\n  selectedOptions: VariableOption[];\n  filteredOptions: VariableOption[];\n  allowAllValue: boolean;\n  onChange: (selectedOptions: VariableOption[]) => void;\n}\n\nconst ListVariableListBoxContext = React.createContext<ListVariableListBoxContextValue | undefined>(undefined);\n\nexport function useListVariableListBoxContext(): ListVariableListBoxContextValue {\n  const ctx = useContext(ListVariableListBoxContext);\n  if (!ctx) throw new Error('ListVariableListBoxContext not found');\n  return ctx;\n}\n\n/*\n * Handles the logic for toggling the global select checkbox in the ListBox header.\n *\n * If all options are selected, it will deselect all options.\n * Except if filteredOptions is a subset of options, then it will only deselect the filtered options.\n *\n * If some options are selected, it will select all filtered options.\n *\n * If no options are selected, it will select all filtered options.\n * Should be not possible since a ListVariable has always at least one value.\n *\n * If allowAllValue is true, it will handle the special \"All\" option logic.\n * Main difference is if some options are selected and there is no filter, it will select the \"All\" option\n */\nfunction handleGlobalSelectToggle(\n  options: VariableOption[],\n  selectedOptions: VariableOption[],\n  filteredOptions: VariableOption[],\n  isIndeterminate: boolean,\n  isAllSelected: boolean,\n  allowAllValue: boolean,\n  onChange: (selectedOptions: VariableOption[]) => void\n): void {\n  if (isAllSelected) {\n    if (filteredOptions.length !== options.length) {\n      onChange(selectedOptions.filter((o) => !filteredOptions.includes(o)));\n    } else {\n      onChange([]);\n    }\n    return;\n  }\n\n  if (isIndeterminate) {\n    if (allowAllValue) {\n      if (filteredOptions.length === options.length) {\n        if (selectedOptions[0]?.value === DEFAULT_ALL_VALUE) {\n          onChange(options.filter((o) => o.value !== DEFAULT_ALL_VALUE));\n        } else {\n          onChange([{ label: DEFAULT_ALL_VALUE, value: DEFAULT_ALL_VALUE }]);\n        }\n      } else {\n        if (filteredOptions.every((o) => selectedOptions.includes(o))) {\n          onChange(selectedOptions.filter((o) => !filteredOptions.includes(o)));\n        } else {\n          onChange([...selectedOptions, ...filteredOptions.filter((o) => o.value !== DEFAULT_ALL_VALUE)]);\n        }\n      }\n    } else {\n      if (filteredOptions.length === options.length) {\n        onChange(options);\n      } else {\n        if (filteredOptions.every((o) => selectedOptions.includes(o))) {\n          onChange(selectedOptions.filter((o) => !filteredOptions.includes(o)));\n        } else {\n          onChange([...selectedOptions, ...filteredOptions]);\n        }\n      }\n    }\n    return;\n  }\n\n  // Nothing selected, so select filtered options\n  onChange(filteredOptions);\n}\n\nexport function ListVariableListBoxProvider({\n  value,\n  children,\n}: {\n  value: ListVariableListBoxContextValue;\n  children: ReactNode;\n}): React.ReactElement {\n  return <ListVariableListBoxContext.Provider value={value}>{children}</ListVariableListBoxContext.Provider>;\n}\n\nexport const ListVariableListBox = forwardRef(function ListVariableListBox(\n  props: HTMLAttributes<HTMLUListElement>,\n  ref: ForwardedRef<HTMLUListElement>\n) {\n  const { children, ...rest } = props;\n  const { options, selectedOptions, filteredOptions, allowAllValue, onChange } = useListVariableListBoxContext();\n\n  // Derived selection metadata for context listbox header\n  const selectedCount = useMemo(() => selectedOptions.length, [selectedOptions]);\n  const isIndeterminate = useMemo(\n    () => options.length > 0 && selectedCount > 0 && selectedCount !== options.length,\n    [selectedCount, options]\n  );\n  const isAllSelected = useMemo(() => options.length > 0 && selectedCount === options.length, [selectedCount, options]);\n\n  return (\n    <ul {...rest} ref={ref} role=\"listbox\">\n      <li style={{ display: 'flex', alignItems: 'center' }}>\n        <Checkbox\n          indeterminate={isIndeterminate}\n          checked={isAllSelected}\n          // intentionally not passing event to underlying handler to mimic previous behavior\n          onChange={() =>\n            handleGlobalSelectToggle(\n              options,\n              selectedOptions,\n              filteredOptions,\n              isIndeterminate,\n              isAllSelected,\n              allowAllValue,\n              onChange\n            )\n          }\n        />\n        <span>\n          <strong>{selectedCount}</strong> Selected\n        </span>\n      </li>\n      <Divider />\n      {children}\n    </ul>\n  );\n});\n"],"names":["React","forwardRef","useContext","useMemo","Checkbox","Divider","DEFAULT_ALL_VALUE","ListVariableListBoxContext","createContext","undefined","useListVariableListBoxContext","ctx","Error","handleGlobalSelectToggle","options","selectedOptions","filteredOptions","isIndeterminate","isAllSelected","allowAllValue","onChange","length","filter","o","includes","value","label","every","ListVariableListBoxProvider","children","Provider","ListVariableListBox","props","ref","rest","selectedCount","ul","role","li","style","display","alignItems","indeterminate","checked","span","strong"],"mappings":"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"}

package/dist/components/Variables/Variable.d.ts

@@ -1,5 +1,5 @@
 import { ReactElement } from 'react';
-import { ListVariableSpec, VariableName, VariableValue } from '@perses-dev/core';
+import { ListVariableSpec, VariableName, VariableValue } from '@perses-dev/spec';
 import { VariableOption, VariableState } from '@perses-dev/plugin-system';
 import { UseQueryResult } from '@tanstack/react-query';
 type VariableProps = {

package/dist/components/Variables/Variable.js

@@ -14,7 +14,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { createElement as _createElement } from "react";
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { TextField, Popper, Checkbox, Autocomplete, createFilterOptions, Chip, Box } from '@mui/material';
-import { DEFAULT_ALL_VALUE } from '@perses-dev/core';
+import { DEFAULT_ALL_VALUE } from '@perses-dev/spec';
 import { SORT_METHODS, useListVariablePluginValues } from '@perses-dev/plugin-system';
 import { useVariableDefinitionAndState, useVariableDefinitionActions } from '../../context';
 import { MAX_VARIABLE_WIDTH, MIN_VARIABLE_WIDTH } from '../../constants';

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Variables/Variable.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { ReactElement, useCallback, useEffect, useMemo, useState } from 'react';\nimport { TextField, Popper, PopperProps, Checkbox, Autocomplete, createFilterOptions, Chip, Box } from '@mui/material';\nimport {\n  DEFAULT_ALL_VALUE,\n  ListVariableDefinition,\n  ListVariableSpec,\n  TextVariableDefinition,\n  VariableName,\n  VariableValue,\n} from '@perses-dev/core';\nimport {\n  SORT_METHODS,\n  SortMethodName,\n  useListVariablePluginValues,\n  VariableOption,\n  VariableState,\n} from '@perses-dev/plugin-system';\nimport { UseQueryResult } from '@tanstack/react-query';\nimport { useVariableDefinitionAndState, useVariableDefinitionActions } from '../../context';\nimport { MAX_VARIABLE_WIDTH, MIN_VARIABLE_WIDTH } from '../../constants';\nimport { ListVariableListBoxProvider, ListVariableListBox } from './ListVariableListBox';\n\ntype VariableProps = {\n  name: VariableName;\n  source?: string;\n};\n\nfunction variableOptionToVariableValue(options: VariableOption | VariableOption[] | null): VariableValue {\n  if (options === null) {\n    return null;\n  }\n  if (Array.isArray(options)) {\n    return options.map((v) => {\n      return v.value;\n    });\n  }\n  return options.value;\n}\n\nexport function Variable({ name, source }: VariableProps): ReactElement {\n  const ctx = useVariableDefinitionAndState(name, source);\n  const kind = ctx.definition?.kind;\n  switch (kind) {\n    case 'TextVariable':\n      return <TextVariable name={name} source={source} />;\n    case 'ListVariable':\n      return <ListVariable name={name} source={source} />;\n  }\n\n  return <div>Unsupported Variable Kind: ${kind}</div>;\n}\n\nexport function useListVariableState(\n  spec: ListVariableSpec | undefined,\n  state: VariableState | undefined,\n  variablesOptionsQuery: Partial<UseQueryResult<VariableOption[]>>\n): {\n  // Value, Loading, Options are modified only when we want to save the changes made\n  value: VariableValue | undefined;\n  loading: boolean;\n  options: VariableOption[] | undefined;\n  // selectedOptions is/are the option(s) selected in the view\n  selectedOptions: VariableOption | VariableOption[];\n  // viewOptions are the options used in the view only (= options + All if allowed)\n  viewOptions: VariableOption[];\n} {\n  const allowMultiple = spec?.allowMultiple === true;\n  const allowAllValue = spec?.allowAllValue === true;\n  const sort = spec?.sort;\n  const loading = useMemo(() => variablesOptionsQuery.isFetching ?? false, [variablesOptionsQuery.isFetching]);\n  const options = useMemo(() => variablesOptionsQuery.data ?? [], [variablesOptionsQuery.data]);\n\n  let value = state?.value;\n\n  // Make sure value is an array if allowMultiple is true\n  if (allowMultiple && !Array.isArray(value)) {\n    value = typeof value === 'string' ? [value] : [];\n  }\n\n  // Sort the provided list of options according to the method defined\n  const sortedOptions = useMemo((): VariableOption[] => {\n    const opts = options ? [...options] : [];\n\n    if (!sort || sort === 'none') return opts;\n    const sortMethod = SORT_METHODS[sort as SortMethodName];\n    return !sortMethod ? opts : sortMethod.sort(opts);\n  }, [options, sort]);\n\n  const viewOptions = useMemo(() => {\n    let computedOptions = sortedOptions;\n\n    // Add the all value if it's allowed\n    if (allowAllValue) {\n      computedOptions = [{ value: DEFAULT_ALL_VALUE, label: 'All' }, ...computedOptions];\n    }\n    return computedOptions;\n  }, [allowAllValue, sortedOptions]);\n\n  const valueIsInOptions = useMemo(\n    () =>\n      Boolean(\n        viewOptions.find((v) => {\n          if (allowMultiple) {\n            return (value as string[]).includes(v.value);\n          }\n          return value === v.value;\n        })\n      ),\n    [viewOptions, value, allowMultiple]\n  );\n\n  value = useMemo(() => {\n    const firstOptionValue = viewOptions?.[allowAllValue ? 1 : 0]?.value;\n\n    // If there is no value but there are options, or the value is not in options, we set the value to the first option.\n    if (firstOptionValue) {\n      if (!valueIsInOptions || !value || value.length === 0) {\n        return allowMultiple ? [firstOptionValue] : firstOptionValue;\n      }\n    }\n\n    return value;\n  }, [viewOptions, value, valueIsInOptions, allowMultiple, allowAllValue]);\n\n  const selectedOptions = useMemo(() => {\n    // In the case Autocomplete.multiple equals false, Autocomplete.value expects a single object, not\n    // an array, hence this conditional\n    if (Array.isArray(value)) {\n      return viewOptions.filter((o) => {\n        return value?.includes(o.value);\n      });\n    } else {\n      return (\n        viewOptions.find((o) => {\n          return value === o.value;\n        }) ?? { value: '', label: '' }\n      );\n    }\n  }, [value, viewOptions]);\n\n  return { value, loading, options, selectedOptions, viewOptions };\n}\n\nconst StyledPopper = (props: PopperProps): ReactElement => (\n  <Popper {...props} sx={{ minWidth: 'fit-content' }} placement=\"bottom-start\" />\n);\n\nconst LETTER_HSIZE = 8; // approximation\nconst ARROW_OFFSET = 40; // right offset for list variables (= take into account the dropdown toggle size)\nconst getWidthPx = (inputValue: string, kind: 'list' | 'text'): number => {\n  const width = (inputValue.length + 1) * LETTER_HSIZE + (kind === 'list' ? ARROW_OFFSET : 0);\n  if (width < MIN_VARIABLE_WIDTH) {\n    return MIN_VARIABLE_WIDTH;\n  } else if (width > MAX_VARIABLE_WIDTH) {\n    return MAX_VARIABLE_WIDTH;\n  } else {\n    return width;\n  }\n};\n\nfunction ListVariable({ name, source }: VariableProps): ReactElement {\n  const ctx = useVariableDefinitionAndState(name, source);\n  const definition = ctx.definition as ListVariableDefinition;\n  const variablesOptionsQuery = useListVariablePluginValues(definition);\n  const { setVariableValue, setVariableLoading, setVariableOptions } = useVariableDefinitionActions();\n  const { selectedOptions, value, loading, options, viewOptions } = useListVariableState(\n    definition?.spec,\n    ctx.state,\n    variablesOptionsQuery\n  );\n  const [inputWidth, setInputWidth] = useState(MIN_VARIABLE_WIDTH);\n  // Used for multiple value variables, it will not clear variable input when selecting an option\n  const [inputValue, setInputValue] = useState('');\n\n  const title = definition?.spec.display?.name ?? name;\n  const allowMultiple = definition?.spec.allowMultiple === true;\n  const allowAllValue = definition?.spec.allowAllValue === true;\n\n  const filterOptions = createFilterOptions<VariableOption>({});\n\n  const filteredOptions = useMemo(\n    () => filterOptions(viewOptions, { inputValue, getOptionLabel: (o) => o.label }),\n    [inputValue, viewOptions, filterOptions]\n  );\n\n  // Update value when changed\n  useEffect(() => {\n    if (value) {\n      setVariableValue(name, value, source);\n    }\n  }, [setVariableValue, name, value, source]);\n\n  // Update loading when changed\n  useEffect(() => {\n    setVariableLoading(name, loading, source);\n  }, [setVariableLoading, name, loading, source]);\n\n  // Update options when changed\n  useEffect(() => {\n    if (options) {\n      setVariableOptions(name, options, source);\n    }\n  }, [setVariableOptions, name, options, source]);\n\n  const handleGlobalSelect = useCallback(\n    (options: VariableOption[]): void => {\n      setVariableValue(name, variableOptionToVariableValue(options), source);\n    },\n    [name, setVariableValue, source]\n  );\n\n  const listBoxProviderValue = useMemo(\n    () => ({\n      options: viewOptions,\n      selectedOptions: selectedOptions as VariableOption[], // Only used when allowMultiple is true => selectedOptions is always an array\n      filteredOptions: filteredOptions,\n      allowAllValue,\n      onChange: handleGlobalSelect,\n    }),\n    [allowAllValue, filteredOptions, handleGlobalSelect, selectedOptions, viewOptions]\n  );\n\n  const autocompleteComponent = useMemo(() => {\n    return (\n      <Autocomplete\n        disablePortal\n        loading={loading}\n        disableCloseOnSelect={allowMultiple}\n        multiple={allowMultiple}\n        fullWidth\n        limitTags={3}\n        size=\"small\"\n        disableClearable\n        slotProps={{ listbox: { component: allowMultiple ? ListVariableListBox : undefined } }}\n        slots={{ popper: StyledPopper }}\n        sx={{\n          '& .MuiInputBase-root': {\n            minHeight: '38px',\n          },\n          '& .MuiAutocomplete-tag': {\n            margin: '1px 2px', // Default margin of 2px (Y axis) make min height of the autocomplete 40px\n          },\n        }}\n        filterOptions={filterOptions}\n        options={viewOptions}\n        value={selectedOptions}\n        onChange={(_, value) => {\n          if ((value === null || (Array.isArray(value) && value.length === 0)) && allowAllValue) {\n            setVariableValue(name, DEFAULT_ALL_VALUE, source);\n          } else {\n            setVariableValue(name, variableOptionToVariableValue(value as VariableOption), source);\n          }\n        }}\n        inputValue={allowMultiple ? inputValue : undefined}\n        onInputChange={(_, newInputValue) => {\n          if (!allowMultiple) {\n            setInputWidth(getWidthPx(newInputValue, 'list'));\n          }\n        }}\n        onBlur={() => {\n          if (allowMultiple) {\n            setInputValue('');\n          }\n        }}\n        renderInput={(params) => {\n          return allowMultiple ? (\n            <TextField {...params} label={title} onChange={(e) => setInputValue(e.target.value)} />\n          ) : (\n            <TextField {...params} label={title} style={{ width: `${inputWidth}px` }} />\n          );\n        }}\n        renderOption={(props, option, { selected }) => {\n          const { key, ...optionProps } = props;\n          return (\n            <li key={key} {...optionProps} style={{ padding: 0 }}>\n              <Checkbox style={{ marginRight: 8 }} checked={selected} />\n              {option.label}\n            </li>\n          );\n        }}\n        renderTags={(value, getTagProps, ownerState) => {\n          // When focused, if there are too much value selected, it will use all screen place. Putting limit to 200px (~6 lines of chips)\n          if (ownerState.focused) {\n            return (\n              <Box sx={{ maxHeight: 200, overflowY: 'auto' }}>\n                {value.map((option, index) => (\n                  <Chip {...getTagProps({ index })} key={index} label={option.label} size=\"small\" />\n                ))}\n              </Box>\n            );\n          }\n\n          const limitTags: number | undefined = ownerState.limitTags;\n          const numTags: number = value.length;\n\n          return (\n            <>\n              {value.slice(0, limitTags).map((option, index) => (\n                <Chip {...getTagProps({ index })} key={index} label={option.label} size=\"small\" />\n              ))}\n\n              {limitTags && numTags > limitTags && ` +${numTags - limitTags}`}\n            </>\n          );\n        }}\n      />\n    );\n  }, [\n    allowAllValue,\n    allowMultiple,\n    filterOptions,\n    inputValue,\n    inputWidth,\n    loading,\n    name,\n    selectedOptions,\n    setVariableValue,\n    source,\n    title,\n    viewOptions,\n  ]);\n\n  if (allowMultiple) {\n    return (\n      <ListVariableListBoxProvider value={listBoxProviderValue}>{autocompleteComponent}</ListVariableListBoxProvider>\n    );\n  }\n\n  return autocompleteComponent;\n}\n\nfunction TextVariable({ name, source }: VariableProps): ReactElement {\n  const ctx = useVariableDefinitionAndState(name, source);\n  const state = ctx.state;\n  const definition = ctx.definition as TextVariableDefinition;\n  const [tempValue, setTempValue] = useState(state?.value ?? '');\n  const [inputWidth, setInputWidth] = useState(getWidthPx(tempValue as string, 'text'));\n  const { setVariableValue } = useVariableDefinitionActions();\n\n  useEffect(() => {\n    setTempValue(state?.value ?? '');\n  }, [state?.value]);\n\n  return (\n    <TextField\n      title={tempValue as string}\n      value={tempValue}\n      onChange={(e) => {\n        setTempValue(e.target.value);\n        setInputWidth(getWidthPx(e.target.value, 'text'));\n      }}\n      onBlur={() => setVariableValue(name, tempValue, source)}\n      placeholder={name}\n      label={definition?.spec.display?.name ?? name}\n      slotProps={{\n        input: {\n          readOnly: definition?.spec.constant ?? false,\n        },\n      }}\n      sx={{\n        width: `${inputWidth}px`,\n        '& .MuiInputBase-root': {\n          minHeight: '38px',\n        },\n        '& .MuiInputBase-input': {\n          textOverflow: 'ellipsis',\n        },\n      }}\n    />\n  );\n}\n"],"names":["useCallback","useEffect","useMemo","useState","TextField","Popper","Checkbox","Autocomplete","createFilterOptions","Chip","Box","DEFAULT_ALL_VALUE","SORT_METHODS","useListVariablePluginValues","useVariableDefinitionAndState","useVariableDefinitionActions","MAX_VARIABLE_WIDTH","MIN_VARIABLE_WIDTH","ListVariableListBoxProvider","ListVariableListBox","variableOptionToVariableValue","options","Array","isArray","map","v","value","Variable","name","source","ctx","kind","definition","TextVariable","ListVariable","div","useListVariableState","spec","state","variablesOptionsQuery","allowMultiple","allowAllValue","sort","loading","isFetching","data","sortedOptions","opts","sortMethod","viewOptions","computedOptions","label","valueIsInOptions","Boolean","find","includes","firstOptionValue","length","selectedOptions","filter","o","StyledPopper","props","sx","minWidth","placement","LETTER_HSIZE","ARROW_OFFSET","getWidthPx","inputValue","width","setVariableValue","setVariableLoading","setVariableOptions","inputWidth","setInputWidth","setInputValue","title","display","filterOptions","filteredOptions","getOptionLabel","handleGlobalSelect","listBoxProviderValue","onChange","autocompleteComponent","disablePortal","disableCloseOnSelect","multiple","fullWidth","limitTags","size","disableClearable","slotProps","listbox","component","undefined","slots","popper","minHeight","margin","_","onInputChange","newInputValue","onBlur","renderInput","params","e","target","style","renderOption","option","selected","key","optionProps","li","padding","marginRight","checked","renderTags","getTagProps","ownerState","focused","maxHeight","overflowY","index","numTags","slice","tempValue","setTempValue","placeholder","input","readOnly","constant","textOverflow"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/Variables/Variable.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { ReactElement, useCallback, useEffect, useMemo, useState } from 'react';\nimport { TextField, Popper, PopperProps, Checkbox, Autocomplete, createFilterOptions, Chip, Box } from '@mui/material';\nimport {\n  DEFAULT_ALL_VALUE,\n  ListVariableDefinition,\n  ListVariableSpec,\n  TextVariableDefinition,\n  VariableName,\n  VariableValue,\n} from '@perses-dev/spec';\nimport {\n  SORT_METHODS,\n  SortMethodName,\n  useListVariablePluginValues,\n  VariableOption,\n  VariableState,\n} from '@perses-dev/plugin-system';\nimport { UseQueryResult } from '@tanstack/react-query';\nimport { useVariableDefinitionAndState, useVariableDefinitionActions } from '../../context';\nimport { MAX_VARIABLE_WIDTH, MIN_VARIABLE_WIDTH } from '../../constants';\nimport { ListVariableListBoxProvider, ListVariableListBox } from './ListVariableListBox';\n\ntype VariableProps = {\n  name: VariableName;\n  source?: string;\n};\n\nfunction variableOptionToVariableValue(options: VariableOption | VariableOption[] | null): VariableValue {\n  if (options === null) {\n    return null;\n  }\n  if (Array.isArray(options)) {\n    return options.map((v) => {\n      return v.value;\n    });\n  }\n  return options.value;\n}\n\nexport function Variable({ name, source }: VariableProps): ReactElement {\n  const ctx = useVariableDefinitionAndState(name, source);\n  const kind = ctx.definition?.kind;\n  switch (kind) {\n    case 'TextVariable':\n      return <TextVariable name={name} source={source} />;\n    case 'ListVariable':\n      return <ListVariable name={name} source={source} />;\n  }\n\n  return <div>Unsupported Variable Kind: ${kind}</div>;\n}\n\nexport function useListVariableState(\n  spec: ListVariableSpec | undefined,\n  state: VariableState | undefined,\n  variablesOptionsQuery: Partial<UseQueryResult<VariableOption[]>>\n): {\n  // Value, Loading, Options are modified only when we want to save the changes made\n  value: VariableValue | undefined;\n  loading: boolean;\n  options: VariableOption[] | undefined;\n  // selectedOptions is/are the option(s) selected in the view\n  selectedOptions: VariableOption | VariableOption[];\n  // viewOptions are the options used in the view only (= options + All if allowed)\n  viewOptions: VariableOption[];\n} {\n  const allowMultiple = spec?.allowMultiple === true;\n  const allowAllValue = spec?.allowAllValue === true;\n  const sort = spec?.sort;\n  const loading = useMemo(() => variablesOptionsQuery.isFetching ?? false, [variablesOptionsQuery.isFetching]);\n  const options = useMemo(() => variablesOptionsQuery.data ?? [], [variablesOptionsQuery.data]);\n\n  let value = state?.value;\n\n  // Make sure value is an array if allowMultiple is true\n  if (allowMultiple && !Array.isArray(value)) {\n    value = typeof value === 'string' ? [value] : [];\n  }\n\n  // Sort the provided list of options according to the method defined\n  const sortedOptions = useMemo((): VariableOption[] => {\n    const opts = options ? [...options] : [];\n\n    if (!sort || sort === 'none') return opts;\n    const sortMethod = SORT_METHODS[sort as SortMethodName];\n    return !sortMethod ? opts : sortMethod.sort(opts);\n  }, [options, sort]);\n\n  const viewOptions = useMemo(() => {\n    let computedOptions = sortedOptions;\n\n    // Add the all value if it's allowed\n    if (allowAllValue) {\n      computedOptions = [{ value: DEFAULT_ALL_VALUE, label: 'All' }, ...computedOptions];\n    }\n    return computedOptions;\n  }, [allowAllValue, sortedOptions]);\n\n  const valueIsInOptions = useMemo(\n    () =>\n      Boolean(\n        viewOptions.find((v) => {\n          if (allowMultiple) {\n            return (value as string[]).includes(v.value);\n          }\n          return value === v.value;\n        })\n      ),\n    [viewOptions, value, allowMultiple]\n  );\n\n  value = useMemo(() => {\n    const firstOptionValue = viewOptions?.[allowAllValue ? 1 : 0]?.value;\n\n    // If there is no value but there are options, or the value is not in options, we set the value to the first option.\n    if (firstOptionValue) {\n      if (!valueIsInOptions || !value || value.length === 0) {\n        return allowMultiple ? [firstOptionValue] : firstOptionValue;\n      }\n    }\n\n    return value;\n  }, [viewOptions, value, valueIsInOptions, allowMultiple, allowAllValue]);\n\n  const selectedOptions = useMemo(() => {\n    // In the case Autocomplete.multiple equals false, Autocomplete.value expects a single object, not\n    // an array, hence this conditional\n    if (Array.isArray(value)) {\n      return viewOptions.filter((o) => {\n        return value?.includes(o.value);\n      });\n    } else {\n      return (\n        viewOptions.find((o) => {\n          return value === o.value;\n        }) ?? { value: '', label: '' }\n      );\n    }\n  }, [value, viewOptions]);\n\n  return { value, loading, options, selectedOptions, viewOptions };\n}\n\nconst StyledPopper = (props: PopperProps): ReactElement => (\n  <Popper {...props} sx={{ minWidth: 'fit-content' }} placement=\"bottom-start\" />\n);\n\nconst LETTER_HSIZE = 8; // approximation\nconst ARROW_OFFSET = 40; // right offset for list variables (= take into account the dropdown toggle size)\nconst getWidthPx = (inputValue: string, kind: 'list' | 'text'): number => {\n  const width = (inputValue.length + 1) * LETTER_HSIZE + (kind === 'list' ? ARROW_OFFSET : 0);\n  if (width < MIN_VARIABLE_WIDTH) {\n    return MIN_VARIABLE_WIDTH;\n  } else if (width > MAX_VARIABLE_WIDTH) {\n    return MAX_VARIABLE_WIDTH;\n  } else {\n    return width;\n  }\n};\n\nfunction ListVariable({ name, source }: VariableProps): ReactElement {\n  const ctx = useVariableDefinitionAndState(name, source);\n  const definition = ctx.definition as ListVariableDefinition;\n  const variablesOptionsQuery = useListVariablePluginValues(definition);\n  const { setVariableValue, setVariableLoading, setVariableOptions } = useVariableDefinitionActions();\n  const { selectedOptions, value, loading, options, viewOptions } = useListVariableState(\n    definition?.spec,\n    ctx.state,\n    variablesOptionsQuery\n  );\n  const [inputWidth, setInputWidth] = useState(MIN_VARIABLE_WIDTH);\n  // Used for multiple value variables, it will not clear variable input when selecting an option\n  const [inputValue, setInputValue] = useState('');\n\n  const title = definition?.spec.display?.name ?? name;\n  const allowMultiple = definition?.spec.allowMultiple === true;\n  const allowAllValue = definition?.spec.allowAllValue === true;\n\n  const filterOptions = createFilterOptions<VariableOption>({});\n\n  const filteredOptions = useMemo(\n    () => filterOptions(viewOptions, { inputValue, getOptionLabel: (o) => o.label }),\n    [inputValue, viewOptions, filterOptions]\n  );\n\n  // Update value when changed\n  useEffect(() => {\n    if (value) {\n      setVariableValue(name, value, source);\n    }\n  }, [setVariableValue, name, value, source]);\n\n  // Update loading when changed\n  useEffect(() => {\n    setVariableLoading(name, loading, source);\n  }, [setVariableLoading, name, loading, source]);\n\n  // Update options when changed\n  useEffect(() => {\n    if (options) {\n      setVariableOptions(name, options, source);\n    }\n  }, [setVariableOptions, name, options, source]);\n\n  const handleGlobalSelect = useCallback(\n    (options: VariableOption[]): void => {\n      setVariableValue(name, variableOptionToVariableValue(options), source);\n    },\n    [name, setVariableValue, source]\n  );\n\n  const listBoxProviderValue = useMemo(\n    () => ({\n      options: viewOptions,\n      selectedOptions: selectedOptions as VariableOption[], // Only used when allowMultiple is true => selectedOptions is always an array\n      filteredOptions: filteredOptions,\n      allowAllValue,\n      onChange: handleGlobalSelect,\n    }),\n    [allowAllValue, filteredOptions, handleGlobalSelect, selectedOptions, viewOptions]\n  );\n\n  const autocompleteComponent = useMemo(() => {\n    return (\n      <Autocomplete\n        disablePortal\n        loading={loading}\n        disableCloseOnSelect={allowMultiple}\n        multiple={allowMultiple}\n        fullWidth\n        limitTags={3}\n        size=\"small\"\n        disableClearable\n        slotProps={{ listbox: { component: allowMultiple ? ListVariableListBox : undefined } }}\n        slots={{ popper: StyledPopper }}\n        sx={{\n          '& .MuiInputBase-root': {\n            minHeight: '38px',\n          },\n          '& .MuiAutocomplete-tag': {\n            margin: '1px 2px', // Default margin of 2px (Y axis) make min height of the autocomplete 40px\n          },\n        }}\n        filterOptions={filterOptions}\n        options={viewOptions}\n        value={selectedOptions}\n        onChange={(_, value) => {\n          if ((value === null || (Array.isArray(value) && value.length === 0)) && allowAllValue) {\n            setVariableValue(name, DEFAULT_ALL_VALUE, source);\n          } else {\n            setVariableValue(name, variableOptionToVariableValue(value as VariableOption), source);\n          }\n        }}\n        inputValue={allowMultiple ? inputValue : undefined}\n        onInputChange={(_, newInputValue) => {\n          if (!allowMultiple) {\n            setInputWidth(getWidthPx(newInputValue, 'list'));\n          }\n        }}\n        onBlur={() => {\n          if (allowMultiple) {\n            setInputValue('');\n          }\n        }}\n        renderInput={(params) => {\n          return allowMultiple ? (\n            <TextField {...params} label={title} onChange={(e) => setInputValue(e.target.value)} />\n          ) : (\n            <TextField {...params} label={title} style={{ width: `${inputWidth}px` }} />\n          );\n        }}\n        renderOption={(props, option, { selected }) => {\n          const { key, ...optionProps } = props;\n          return (\n            <li key={key} {...optionProps} style={{ padding: 0 }}>\n              <Checkbox style={{ marginRight: 8 }} checked={selected} />\n              {option.label}\n            </li>\n          );\n        }}\n        renderTags={(value, getTagProps, ownerState) => {\n          // When focused, if there are too much value selected, it will use all screen place. Putting limit to 200px (~6 lines of chips)\n          if (ownerState.focused) {\n            return (\n              <Box sx={{ maxHeight: 200, overflowY: 'auto' }}>\n                {value.map((option, index) => (\n                  <Chip {...getTagProps({ index })} key={index} label={option.label} size=\"small\" />\n                ))}\n              </Box>\n            );\n          }\n\n          const limitTags: number | undefined = ownerState.limitTags;\n          const numTags: number = value.length;\n\n          return (\n            <>\n              {value.slice(0, limitTags).map((option, index) => (\n                <Chip {...getTagProps({ index })} key={index} label={option.label} size=\"small\" />\n              ))}\n\n              {limitTags && numTags > limitTags && ` +${numTags - limitTags}`}\n            </>\n          );\n        }}\n      />\n    );\n  }, [\n    allowAllValue,\n    allowMultiple,\n    filterOptions,\n    inputValue,\n    inputWidth,\n    loading,\n    name,\n    selectedOptions,\n    setVariableValue,\n    source,\n    title,\n    viewOptions,\n  ]);\n\n  if (allowMultiple) {\n    return (\n      <ListVariableListBoxProvider value={listBoxProviderValue}>{autocompleteComponent}</ListVariableListBoxProvider>\n    );\n  }\n\n  return autocompleteComponent;\n}\n\nfunction TextVariable({ name, source }: VariableProps): ReactElement {\n  const ctx = useVariableDefinitionAndState(name, source);\n  const state = ctx.state;\n  const definition = ctx.definition as TextVariableDefinition;\n  const [tempValue, setTempValue] = useState(state?.value ?? '');\n  const [inputWidth, setInputWidth] = useState(getWidthPx(tempValue as string, 'text'));\n  const { setVariableValue } = useVariableDefinitionActions();\n\n  useEffect(() => {\n    setTempValue(state?.value ?? '');\n  }, [state?.value]);\n\n  return (\n    <TextField\n      title={tempValue as string}\n      value={tempValue}\n      onChange={(e) => {\n        setTempValue(e.target.value);\n        setInputWidth(getWidthPx(e.target.value, 'text'));\n      }}\n      onBlur={() => setVariableValue(name, tempValue, source)}\n      placeholder={name}\n      label={definition?.spec.display?.name ?? name}\n      slotProps={{\n        input: {\n          readOnly: definition?.spec.constant ?? false,\n        },\n      }}\n      sx={{\n        width: `${inputWidth}px`,\n        '& .MuiInputBase-root': {\n          minHeight: '38px',\n        },\n        '& .MuiInputBase-input': {\n          textOverflow: 'ellipsis',\n        },\n      }}\n    />\n  );\n}\n"],"names":["useCallback","useEffect","useMemo","useState","TextField","Popper","Checkbox","Autocomplete","createFilterOptions","Chip","Box","DEFAULT_ALL_VALUE","SORT_METHODS","useListVariablePluginValues","useVariableDefinitionAndState","useVariableDefinitionActions","MAX_VARIABLE_WIDTH","MIN_VARIABLE_WIDTH","ListVariableListBoxProvider","ListVariableListBox","variableOptionToVariableValue","options","Array","isArray","map","v","value","Variable","name","source","ctx","kind","definition","TextVariable","ListVariable","div","useListVariableState","spec","state","variablesOptionsQuery","allowMultiple","allowAllValue","sort","loading","isFetching","data","sortedOptions","opts","sortMethod","viewOptions","computedOptions","label","valueIsInOptions","Boolean","find","includes","firstOptionValue","length","selectedOptions","filter","o","StyledPopper","props","sx","minWidth","placement","LETTER_HSIZE","ARROW_OFFSET","getWidthPx","inputValue","width","setVariableValue","setVariableLoading","setVariableOptions","inputWidth","setInputWidth","setInputValue","title","display","filterOptions","filteredOptions","getOptionLabel","handleGlobalSelect","listBoxProviderValue","onChange","autocompleteComponent","disablePortal","disableCloseOnSelect","multiple","fullWidth","limitTags","size","disableClearable","slotProps","listbox","component","undefined","slots","popper","minHeight","margin","_","onInputChange","newInputValue","onBlur","renderInput","params","e","target","style","renderOption","option","selected","key","optionProps","li","padding","marginRight","checked","renderTags","getTagProps","ownerState","focused","maxHeight","overflowY","index","numTags","slice","tempValue","setTempValue","placeholder","input","readOnly","constant","textOverflow"],"mappings":"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"}

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

@@ -1,6 +1,7 @@
 import { ReactElement } from 'react';
-import { BuiltinVariableDefinition, VariableDefinition, ExternalVariableDefinition } from '@perses-dev/core';
+import { BuiltinVariableDefinition, VariableDefinition } from '@perses-dev/spec';
 import { VariableState } from '@perses-dev/plugin-system';
+import { ExternalVariableDefinition } from '../../model/VariableDefinition';
 export declare function VariableEditor(props: {
     variableDefinitions: VariableDefinition[];
     externalVariableDefinitions: ExternalVariableDefinition[];

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,0BAA0B,EAAE,MAAM,kBAAkB,CAAC;AAWrH,OAAO,EAA0C,aAAa,EAAkB,MAAM,2BAA2B,CAAC;AAyBlH,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,CAsVf;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,EAAE,yBAAyB,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAWjF,OAAO,EAA0C,aAAa,EAAkB,MAAM,2BAA2B,CAAC;AAElH,OAAO,EAAE,0BAA0B,EAAE,MAAM,gCAAgC,CAAC;AAwB5E,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,CAsVf;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.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Variables/VariableEditor.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { 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, ExternalVariableDefinition } from '@perses-dev/core';\nimport { useImmer } from 'use-immer';\nimport PencilIcon from 'mdi-material-ui/Pencil';\nimport CloneIcon from 'mdi-material-ui/ContentCopy';\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 { 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\n                              onClick={() => {\n                                setVariableDefinitions((draft) => {\n                                  if (v.kind === 'TextVariable') {\n                                    draft.push({\n                                      ...v,\n                                      spec: { ...v.spec, value: v.spec.value, name: `${v.spec.name}_copy` },\n                                    });\n                                  } else {\n                                    draft.push({ ...v, spec: { ...v.spec, name: `${v.spec.name}_copy` } });\n                                  }\n                                });\n                              }}\n                            >\n                              <CloneIcon />\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","CloneIcon","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 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 { BuiltinVariableDefinition, VariableDefinition } from '@perses-dev/spec';\nimport { useImmer } from 'use-immer';\nimport PencilIcon from 'mdi-material-ui/Pencil';\nimport CloneIcon from 'mdi-material-ui/ContentCopy';\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, Action } from '@perses-dev/components';\nimport { ExternalVariableDefinition } from '../../model/VariableDefinition';\nimport { 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\n                              onClick={() => {\n                                setVariableDefinitions((draft) => {\n                                  if (v.kind === 'TextVariable') {\n                                    draft.push({\n                                      ...v,\n                                      spec: { ...v.spec, value: v.spec.value, name: `${v.spec.name}_copy` },\n                                    });\n                                  } else {\n                                    draft.push({ ...v, spec: { ...v.spec, name: `${v.spec.name}_copy` } });\n                                  }\n                                });\n                              }}\n                            >\n                              <CloneIcon />\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","CloneIcon","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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"}

package/dist/components/Variables/VariableList.d.ts

@@ -1,4 +1,4 @@
-import { VariableSpec } from '@perses-dev/core';
+import { VariableSpec } from '@perses-dev/spec';
 import { ReactElement } from 'react';
 export declare function VariableList(): ReactElement;
 export declare function VariableListItem({ spec, source }: {

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

@@ -1 +1 @@
-{"version":3,"file":"VariableList.d.ts","sourceRoot":"","sources":["../../../src/components/Variables/VariableList.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAsB,YAAY,EAA8B,MAAM,kBAAkB,CAAC;AAChG,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAKrC,wBAAgB,YAAY,IAAI,YAAY,CAmB3C;AAED,wBAAgB,gBAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAAE,IAAI,EAAE,YAAY,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,YAAY,GAAG,IAAI,CAiB/G"}
+{"version":3,"file":"VariableList.d.ts","sourceRoot":"","sources":["../../../src/components/Variables/VariableList.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAsB,YAAY,EAAE,MAAM,kBAAkB,CAAC;AACpE,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAMrC,wBAAgB,YAAY,IAAI,YAAY,CAmB3C;AAED,wBAAgB,gBAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAAE,IAAI,EAAE,YAAY,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,YAAY,GAAG,IAAI,CAiB/G"}