@perses-dev/dashboards 0.0.0-snapshot-scatterplot-fix-imports-95e1b59 → 0.0.0-snapshot-explorer-plugin-c4a7621

package/dist/components/SaveDashboardButton/SaveDashboardButton.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 2024 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at
@@ -15,11 +15,11 @@ 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, useTemplateVariableActions } from '../../context';
+import { useDashboard, useEditMode, useSaveChangesConfirmationDialog, useVariableDefinitionActions } from '../../context';
 export const SaveDashboardButton = ({ onSave, isDisabled, variant = 'contained' })=>{
     const [isSavingDashboard, setSavingDashboard] = useState(false);
     const { dashboard, setDashboard } = useDashboard();
-    const { getSavedVariablesStatus, setVariableDefaultValues } = useTemplateVariableActions();
+    const { getSavedVariablesStatus, setVariableDefaultValues } = useVariableDefinitionActions();
     const { isSavedVariableModified } = getSavedVariablesStatus();
     const { timeRange } = useTimeRange();
     const { setEditMode } = useEditMode();

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/SaveDashboardButton/SaveDashboardButton.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { 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  useTemplateVariableActions,\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 = ({ onSave, isDisabled, variant = 'contained' }: SaveDashboardButtonProps) => {\n  const [isSavingDashboard, setSavingDashboard] = useState<boolean>(false);\n  const { dashboard, setDashboard } = useDashboard();\n  const { getSavedVariablesStatus, setVariableDefaultValues } = useTemplateVariableActions();\n  const { isSavedVariableModified } = getSavedVariablesStatus();\n  const { timeRange } = useTimeRange();\n  const { setEditMode } = useEditMode();\n  const { openSaveChangesConfirmationDialog, closeSaveChangesConfirmationDialog } = useSaveChangesConfirmationDialog();\n\n  const onSaveButtonClick = () => {\n    const isSavedDurationModified =\n      isRelativeTimeRange(timeRange) && dashboard.spec.duration !== timeRange.pastDuration;\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) {\n      openSaveChangesConfirmationDialog({\n        onSaveChanges: (saveDefaultTimeRange, saveDefaultVariables) => {\n          if (isRelativeTimeRange(timeRange) && saveDefaultTimeRange === true) {\n            dashboard.spec.duration = timeRange.pastDuration;\n          }\n          if (saveDefaultVariables === true) {\n            const variables = setVariableDefaultValues();\n            dashboard.spec.variables = variables;\n          }\n          setDashboard(dashboard);\n          saveDashboard();\n        },\n        onCancel: () => {\n          closeSaveChangesConfirmationDialog();\n        },\n        isSavedDurationModified,\n        isSavedVariableModified,\n      });\n    } else {\n      saveDashboard();\n    }\n  };\n\n  const saveDashboard = async () => {\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","useTemplateVariableActions","SaveDashboardButton","onSave","isDisabled","variant","isSavingDashboard","setSavingDashboard","dashboard","setDashboard","getSavedVariablesStatus","setVariableDefaultValues","isSavedVariableModified","timeRange","setEditMode","openSaveChangesConfirmationDialog","closeSaveChangesConfirmationDialog","onSaveButtonClick","isSavedDurationModified","spec","duration","pastDuration","onSaveChanges","saveDefaultTimeRange","saveDefaultVariables","variables","saveDashboard","onCancel","error","Error","onClick","disabled"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,QAAQ,QAAQ,QAAQ;AACjC,SAASC,MAAM,QAAqB,gBAAgB;AACpD,SAASC,mBAAmB,QAAQ,mBAAmB;AACvD,SAASC,YAAY,QAAQ,4BAA4B;AACzD,SAEEC,YAAY,EACZC,WAAW,EACXC,gCAAgC,EAChCC,0BAA0B,QACrB,gBAAgB;AAQvB,OAAO,MAAMC,sBAAsB,CAAC,EAAEC,MAAM,EAAEC,UAAU,EAAEC,UAAU,WAAW,EAA4B;IACzG,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,EAAE,GAAGhB;IACtB,MAAM,EAAEiB,WAAW,EAAE,GAAGf;IACxB,MAAM,EAAEgB,iCAAiC,EAAEC,kCAAkC,EAAE,GAAGhB;IAElF,MAAMiB,oBAAoB;QACxB,MAAMC,0BACJtB,oBAAoBiB,cAAcL,UAAUW,IAAI,CAACC,QAAQ,KAAKP,UAAUQ,YAAY;QAEtF,iBAAiB;QACjB,0FAA0F;QAC1F,iEAAiE;QACjE,IAAIH,2BAA2BN,yBAAyB;YACtDG,kCAAkC;gBAChCO,eAAe,CAACC,sBAAsBC;oBACpC,IAAI5B,oBAAoBiB,cAAcU,yBAAyB,MAAM;wBACnEf,UAAUW,IAAI,CAACC,QAAQ,GAAGP,UAAUQ,YAAY;oBAClD;oBACA,IAAIG,yBAAyB,MAAM;wBACjC,MAAMC,YAAYd;wBAClBH,UAAUW,IAAI,CAACM,SAAS,GAAGA;oBAC7B;oBACAhB,aAAaD;oBACbkB;gBACF;gBACAC,UAAU;oBACRX;gBACF;gBACAE;gBACAN;YACF;QACF,OAAO;YACLc;QACF;IACF;IAEA,MAAMA,gBAAgB;QACpB,IAAIvB,QAAQ;YACV,IAAI;gBACFI,mBAAmB;gBACnB,MAAMJ,OAAOK;gBACbQ;gBACAF,YAAY;YACd,EAAE,OAAOc,OAAO;gBACd,MAAM,IAAIC,MAAM,CAAC,8CAA8C,EAAED,MAAM,CAAC;YAC1E,SAAU;gBACRrB,mBAAmB;YACrB;QACF,OAAO;YACLO,YAAY;QACd;IACF;IAEA,qBACE,KAACnB;QAAOU,SAASA;QAASyB,SAASb;QAAmBc,UAAU3B,cAAcE;kBAAmB;;AAIrG,EAAE"}
+{"version":3,"sources":["../../../src/components/SaveDashboardButton/SaveDashboardButton.tsx"],"sourcesContent":["// Copyright 2024 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { 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 } = 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    // 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) {\n      openSaveChangesConfirmationDialog({\n        onSaveChanges: (saveDefaultTimeRange, saveDefaultVariables) => {\n          if (isRelativeTimeRange(timeRange) && saveDefaultTimeRange === true) {\n            dashboard.spec.duration = timeRange.pastDuration;\n          }\n          if (saveDefaultVariables === true) {\n            const variables = setVariableDefaultValues();\n            dashboard.spec.variables = variables;\n          }\n          setDashboard(dashboard);\n          saveDashboard();\n        },\n        onCancel: () => {\n          closeSaveChangesConfirmationDialog();\n        },\n        isSavedDurationModified,\n        isSavedVariableModified,\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","setEditMode","openSaveChangesConfirmationDialog","closeSaveChangesConfirmationDialog","onSaveButtonClick","isSavedDurationModified","spec","duration","pastDuration","onSaveChanges","saveDefaultTimeRange","saveDefaultVariables","variables","saveDashboard","onCancel","error","Error","onClick","disabled"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,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,EAAE,GAAGhB;IACtB,MAAM,EAAEiB,WAAW,EAAE,GAAGf;IACxB,MAAM,EAAEgB,iCAAiC,EAAEC,kCAAkC,EAAE,GAAGhB;IAElF,MAAMiB,oBAAoB;QACxB,MAAMC,0BACJtB,oBAAoBiB,cAAcL,UAAUW,IAAI,CAACC,QAAQ,KAAKP,UAAUQ,YAAY;QAEtF,iBAAiB;QACjB,0FAA0F;QAC1F,iEAAiE;QACjE,IAAIH,2BAA2BN,yBAAyB;YACtDG,kCAAkC;gBAChCO,eAAe,CAACC,sBAAsBC;oBACpC,IAAI5B,oBAAoBiB,cAAcU,yBAAyB,MAAM;wBACnEf,UAAUW,IAAI,CAACC,QAAQ,GAAGP,UAAUQ,YAAY;oBAClD;oBACA,IAAIG,yBAAyB,MAAM;wBACjC,MAAMC,YAAYd;wBAClBH,UAAUW,IAAI,CAACM,SAAS,GAAGA;oBAC7B;oBACAhB,aAAaD;oBACbkB;gBACF;gBACAC,UAAU;oBACRX;gBACF;gBACAE;gBACAN;YACF;QACF,OAAO;YACLc;QACF;IACF;IAEA,MAAMA,gBAAgB;QACpB,IAAIvB,QAAQ;YACV,IAAI;gBACFI,mBAAmB;gBACnB,MAAMJ,OAAOK;gBACbQ;gBACAF,YAAY;YACd,EAAE,OAAOc,OAAO;gBACd,MAAM,IAAIC,MAAM,CAAC,8CAA8C,EAAED,MAAM,CAAC;YAC1E,SAAU;gBACRrB,mBAAmB;YACrB;QACF,OAAO;YACLO,YAAY;QACd;IACF;IAEA,qBACE,KAACnB;QAAOU,SAASA;QAASyB,SAASb;QAAmBc,UAAU3B,cAAcE;kBAAmB;;AAIrG,EAAE"}

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

@@ -1,7 +1,8 @@
 import { BuiltinVariableDefinition } from '@perses-dev/core';
+import { ReactElement } from 'react';
 type BuiltinVariableAccordionsProps = {
     builtinVariableDefinitions: BuiltinVariableDefinition[];
 };
-export declare function BuiltinVariableAccordions({ builtinVariableDefinitions }: BuiltinVariableAccordionsProps): import("react/jsx-runtime").JSX.Element;
+export declare function BuiltinVariableAccordions({ builtinVariableDefinitions, }: BuiltinVariableAccordionsProps): ReactElement;
 export {};
 //# sourceMappingURL=BuiltinVariableAccordions.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"BuiltinVariableAccordions.d.ts","sourceRoot":"","sources":["../../../src/components/Variables/BuiltinVariableAccordions.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,yBAAyB,EAAE,MAAM,kBAAkB,CAAC;AAiB7D,KAAK,8BAA8B,GAAG;IACpC,0BAA0B,EAAE,yBAAyB,EAAE,CAAC;CACzD,CAAC;AAEF,wBAAgB,yBAAyB,CAAC,EAAE,0BAA0B,EAAE,EAAE,8BAA8B,2CA0EvG"}
+{"version":3,"file":"BuiltinVariableAccordions.d.ts","sourceRoot":"","sources":["../../../src/components/Variables/BuiltinVariableAccordions.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,yBAAyB,EAAE,MAAM,kBAAkB,CAAC;AAe7D,OAAO,EAAE,YAAY,EAAW,MAAM,OAAO,CAAC;AAE9C,KAAK,8BAA8B,GAAG;IACpC,0BAA0B,EAAE,yBAAyB,EAAE,CAAC;CACzD,CAAC;AAEF,wBAAgB,yBAAyB,CAAC,EACxC,0BAA0B,GAC3B,EAAE,8BAA8B,GAAG,YAAY,CA0E/C"}

package/dist/components/Variables/BuiltinVariableAccordions.js

@@ -44,9 +44,7 @@ export function BuiltinVariableAccordions({ builtinVariableDefinitions }) {
         builtinVariablesBySource
     ]);
     return /*#__PURE__*/ _jsx(_Fragment, {
-        children: sources.map((source)=>/*#__PURE__*/ {
-            var _builtinVariablesBySource_source;
-            return _jsxs(Accordion, {
+        children: sources.map((source)=>/*#__PURE__*/ _jsxs(Accordion, {
                 sx: (theme)=>({
                         '.MuiAccordionSummary-root': {
                             backgroundColor: theme.palette.background.lighter
@@ -63,12 +61,12 @@ export function BuiltinVariableAccordions({ builtinVariableDefinitions }) {
                         children: /*#__PURE__*/ _jsx(Typography, {
                             variant: "h2",
                             children: /*#__PURE__*/ _jsx(InfoTooltip, {
-                                title: `${source} Builtin Variables`,
+                                title: `${source} Built-in Variables`,
                                 description: "Variables computed during dashboard rendering.",
                                 children: /*#__PURE__*/ _jsxs("span", {
                                     children: [
                                         source,
-                                        " Builtin Variables"
+                                        " Built-in Variables"
                                     ]
                                 })
                             })
@@ -95,10 +93,7 @@ export function BuiltinVariableAccordions({ builtinVariableDefinitions }) {
                                         })
                                     }),
                                     /*#__PURE__*/ _jsx(TableBody, {
-                                        children: ((_builtinVariablesBySource_source = builtinVariablesBySource[source]) !== null && _builtinVariablesBySource_source !== void 0 ? _builtinVariablesBySource_source : []).map((v)=>/*#__PURE__*/ {
-                                            var _v_spec_display;
-                                            var _v_spec_display_description;
-                                            return _jsxs(TableRow, {
+                                        children: (builtinVariablesBySource[source] ?? []).map((v)=>/*#__PURE__*/ _jsxs(TableRow, {
                                                 children: [
                                                     /*#__PURE__*/ _jsx(TableCell, {
                                                         component: "th",
@@ -109,19 +104,17 @@ export function BuiltinVariableAccordions({ builtinVariableDefinitions }) {
                                                         children: v.spec.name
                                                     }),
                                                     /*#__PURE__*/ _jsx(TableCell, {
-                                                        children: (_v_spec_display_description = (_v_spec_display = v.spec.display) === null || _v_spec_display === void 0 ? void 0 : _v_spec_display.description) !== null && _v_spec_display_description !== void 0 ? _v_spec_display_description : ''
+                                                        children: v.spec.display?.description ?? ''
                                                     })
                                                 ]
-                                            }, source + '-' + v.spec.name);
-                                        })
+                                            }, source + '-' + v.spec.name))
                                     })
                                 ]
                             })
                         })
                     })
                 ]
-            }, source);
-        })
+            }, source))
     });
 }
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Variables/BuiltinVariableAccordions.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { 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 { useMemo } from 'react';\n\ntype BuiltinVariableAccordionsProps = {\n  builtinVariableDefinitions: BuiltinVariableDefinition[];\n};\n\nexport function BuiltinVariableAccordions({ builtinVariableDefinitions }: BuiltinVariableAccordionsProps) {\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} Builtin Variables`}\n                description=\"Variables computed during dashboard rendering.\"\n              >\n                <span>{source} Builtin 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,oCAAoC;AACpC,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,SAASC,OAAO,QAAQ,QAAQ;AAMhC,OAAO,SAASC,0BAA0B,EAAEC,0BAA0B,EAAkC;IACtG,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;gBAgCAL;mBA/BZ,MAACf;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,CAAC,EAAEf,OAAO,kBAAkB,CAAC;gCACpCgB,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,CAAAA,mCAAAA,wBAAwB,CAACK,OAAO,cAAhCL,8CAAAA,mCAAoC,EAAE,AAAD,EAAGS,GAAG,CAAC,CAACgB;gDAK/BA;gDAAAA;mDAJd,MAAChC;;kEACC,KAACH;wDAAUoC,WAAU;wDAAKC,OAAM;wDAAMjB,IAAI;4DAAEkB,YAAY;wDAAO;kEAC5DH,EAAErB,IAAI,CAACyB,IAAI;;kEAEd,KAACvC;kEAAWmC,CAAAA,+BAAAA,kBAAAA,EAAErB,IAAI,CAAC0B,OAAO,cAAdL,sCAAAA,gBAAgBJ,WAAW,cAA3BI,yCAAAA,8BAA+B;;;+CAJ9BpB,SAAS,MAAMoB,EAAErB,IAAI,CAACyB,IAAI;wCAK/B;;;;;;;eApCfxB;QA0CI;;AAInB"}
+{"version":3,"sources":["../../../src/components/Variables/BuiltinVariableAccordions.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { 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,oCAAoC;AACpC,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,CAAC,EAAEf,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

@@ -1,3 +1,4 @@
+import { ReactElement } from 'react';
 import { ButtonProps } from '@mui/material';
 export interface EditVariablesButtonProps extends Pick<ButtonProps, 'fullWidth'> {
     /**
@@ -13,5 +14,5 @@ export interface EditVariablesButtonProps extends Pick<ButtonProps, 'fullWidth'>
      */
     label?: string;
 }
-export declare function EditVariablesButton({ variant, label, color, fullWidth, }: EditVariablesButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function EditVariablesButton({ variant, label, color, fullWidth, }: EditVariablesButtonProps): ReactElement;
 //# sourceMappingURL=EditVariablesButton.d.ts.map

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":"AAcA,OAAO,EAAU,WAAW,EAAE,MAAM,eAAe,CAAC;AAcpD,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,2CAiD1B"}
+{"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;AAcpD,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

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 2024 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at
@@ -17,14 +17,14 @@ import PencilIcon from 'mdi-material-ui/PencilOutline';
 import { Drawer, InfoTooltip } from '@perses-dev/components';
 import { useBuiltinVariableDefinitions } from '@perses-dev/plugin-system';
 import { TOOLTIP_TEXT, editButtonStyle } from '../../constants';
-import { useTemplateExternalVariableDefinitions, useTemplateVariableActions, useTemplateVariableDefinitions } from '../../context';
+import { useExternalVariableDefinitions, useVariableDefinitionActions, useVariableDefinitions } from '../../context';
 import { VariableEditor } from './VariableEditor';
 export function EditVariablesButton({ variant = 'text', label = 'Variables', color = 'primary', fullWidth }) {
     const [isVariableEditorOpen, setIsVariableEditorOpen] = useState(false);
-    const variableDefinitions = useTemplateVariableDefinitions();
-    const externalVariableDefinitions = useTemplateExternalVariableDefinitions();
+    const variableDefinitions = useVariableDefinitions();
+    const externalVariableDefinitions = useExternalVariableDefinitions();
     const builtinVariableDefinitions = useBuiltinVariableDefinitions();
-    const { setVariableDefinitions } = useTemplateVariableActions();
+    const { setVariableDefinitions } = useVariableDefinitionActions();
     const openVariableEditor = ()=>{
         setIsVariableEditorOpen(true);
     };

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Variables/EditVariablesButton.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { 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/core';\nimport { useBuiltinVariableDefinitions } from '@perses-dev/plugin-system';\nimport { TOOLTIP_TEXT, editButtonStyle } from '../../constants';\nimport {\n  ExternalVariableDefinition,\n  useTemplateExternalVariableDefinitions,\n  useTemplateVariableActions,\n  useTemplateVariableDefinitions,\n} 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) {\n  const [isVariableEditorOpen, setIsVariableEditorOpen] = useState(false);\n  const variableDefinitions: VariableDefinition[] = useTemplateVariableDefinitions();\n  const externalVariableDefinitions: ExternalVariableDefinition[] = useTemplateExternalVariableDefinitions();\n  const builtinVariableDefinitions: BuiltinVariableDefinition[] = useBuiltinVariableDefinitions();\n  const { setVariableDefinitions } = useTemplateVariableActions();\n\n  const openVariableEditor = () => {\n    setIsVariableEditorOpen(true);\n  };\n\n  const closeVariableEditor = () => {\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","useTemplateExternalVariableDefinitions","useTemplateVariableActions","useTemplateVariableDefinitions","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,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,QAAQ,QAAQ,QAAQ;AACjC,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,SAEEC,sCAAsC,EACtCC,0BAA0B,EAC1BC,8BAA8B,QACzB,gBAAgB;AACvB,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 2024 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { 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/core';\nimport { useBuiltinVariableDefinitions } from '@perses-dev/plugin-system';\nimport { TOOLTIP_TEXT, editButtonStyle } from '../../constants';\nimport {\n  ExternalVariableDefinition,\n  useExternalVariableDefinitions,\n  useVariableDefinitionActions,\n  useVariableDefinitions,\n} 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,oCAAoC;AACpC,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,SAEEC,8BAA8B,EAC9BC,4BAA4B,EAC5BC,sBAAsB,QACjB,gBAAgB;AACvB,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/{TemplateVariable.d.ts → Variable.d.ts}

@@ -1,12 +1,13 @@
-import { ListVariableSpec, UnknownSpec, VariableName, VariableValue } from '@perses-dev/core';
+import { ReactElement } from 'react';
+import { ListVariableSpec, VariableName, VariableValue } from '@perses-dev/core';
 import { VariableOption, VariableState } from '@perses-dev/plugin-system';
 import { UseQueryResult } from '@tanstack/react-query';
-type TemplateVariableProps = {
+type VariableProps = {
     name: VariableName;
     source?: string;
 };
-export declare function TemplateVariable({ name, source }: TemplateVariableProps): import("react/jsx-runtime").JSX.Element;
-export declare function useListVariableState(spec: ListVariableSpec<UnknownSpec> | undefined, state: VariableState | undefined, variablesOptionsQuery: Partial<UseQueryResult<VariableOption[]>>): {
+export declare function Variable({ name, source }: VariableProps): ReactElement;
+export declare function useListVariableState(spec: ListVariableSpec | undefined, state: VariableState | undefined, variablesOptionsQuery: Partial<UseQueryResult<VariableOption[]>>): {
     value: VariableValue | undefined;
     loading: boolean;
     options: VariableOption[] | undefined;
@@ -14,4 +15,4 @@ export declare function useListVariableState(spec: ListVariableSpec<UnknownSpec>
     viewOptions: VariableOption[];
 };
 export {};
-//# sourceMappingURL=TemplateVariable.d.ts.map
+//# sourceMappingURL=Variable.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Variable.d.ts","sourceRoot":"","sources":["../../../src/components/Variables/Variable.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAgC,MAAM,OAAO,CAAC;AAEnE,OAAO,EAGL,gBAAgB,EAEhB,YAAY,EACZ,aAAa,EACd,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAA+B,cAAc,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AACvG,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAIvD,KAAK,aAAa,GAAG;IACnB,IAAI,EAAE,YAAY,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAcF,wBAAgB,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,aAAa,GAAG,YAAY,CAWtE;AAED,wBAAgB,oBAAoB,CAClC,IAAI,EAAE,gBAAgB,GAAG,SAAS,EAClC,KAAK,EAAE,aAAa,GAAG,SAAS,EAChC,qBAAqB,EAAE,OAAO,CAAC,cAAc,CAAC,cAAc,EAAE,CAAC,CAAC,GAC/D;IAED,KAAK,EAAE,aAAa,GAAG,SAAS,CAAC;IACjC,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,cAAc,EAAE,GAAG,SAAS,CAAC;IAEtC,eAAe,EAAE,cAAc,GAAG,cAAc,EAAE,CAAC;IAEnD,WAAW,EAAE,cAAc,EAAE,CAAC;CAC/B,CA2FA"}

package/dist/components/Variables/{TemplateVariable.js → Variable.js}

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 2024 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at
@@ -15,8 +15,8 @@ import { useEffect, useMemo, useState } from 'react';
 import { LinearProgress, TextField, Autocomplete, Popper } from '@mui/material';
 import { DEFAULT_ALL_VALUE } from '@perses-dev/core';
 import { useListVariablePluginValues } from '@perses-dev/plugin-system';
-import { useTemplateVariable, useTemplateVariableActions } from '../../context';
-import { MAX_TEMPLATE_VARIABLE_WIDTH, MIN_TEMPLATE_VARIABLE_WIDTH } from '../../constants';
+import { useVariableDefinitionAndState, useVariableDefinitionActions } from '../../context';
+import { MAX_VARIABLE_WIDTH, MIN_VARIABLE_WIDTH } from '../../constants';
 function variableOptionToVariableValue(options) {
     if (options === null) {
         return null;
@@ -28,10 +28,9 @@ function variableOptionToVariableValue(options) {
     }
     return options.value;
 }
-export function TemplateVariable({ name, source }) {
-    var _ctx_definition;
-    const ctx = useTemplateVariable(name, source);
-    const kind = (_ctx_definition = ctx.definition) === null || _ctx_definition === void 0 ? void 0 : _ctx_definition.kind;
+export function Variable({ name, source }) {
+    const ctx = useVariableDefinitionAndState(name, source);
+    const kind = ctx.definition?.kind;
     switch(kind){
         case 'TextVariable':
             return /*#__PURE__*/ _jsx(TextVariable, {
@@ -52,22 +51,16 @@ export function TemplateVariable({ name, source }) {
     });
 }
 export function useListVariableState(spec, state, variablesOptionsQuery) {
-    const allowMultiple = (spec === null || spec === void 0 ? void 0 : spec.allowMultiple) === true;
-    const allowAllValue = (spec === null || spec === void 0 ? void 0 : spec.allowAllValue) === true;
-    const sort = spec === null || spec === void 0 ? void 0 : spec.sort;
-    const loading = useMemo(()=>{
-        var _variablesOptionsQuery_isFetching;
-        return (_variablesOptionsQuery_isFetching = variablesOptionsQuery.isFetching) !== null && _variablesOptionsQuery_isFetching !== void 0 ? _variablesOptionsQuery_isFetching : false;
-    }, [
+    const allowMultiple = spec?.allowMultiple === true;
+    const allowAllValue = spec?.allowAllValue === true;
+    const sort = spec?.sort;
+    const loading = useMemo(()=>variablesOptionsQuery.isFetching ?? false, [
         variablesOptionsQuery.isFetching
     ]);
-    const options = useMemo(()=>{
-        var _variablesOptionsQuery_data;
-        return (_variablesOptionsQuery_data = variablesOptionsQuery.data) !== null && _variablesOptionsQuery_data !== void 0 ? _variablesOptionsQuery_data : [];
-    }, [
+    const options = useMemo(()=>variablesOptionsQuery.data ?? [], [
         variablesOptionsQuery.data
     ]);
-    let value = state === null || state === void 0 ? void 0 : state.value;
+    let value = state?.value;
     // Make sure value is an array if allowMultiple is true
     if (allowMultiple && !Array.isArray(value)) {
         value = typeof value === 'string' ? [
@@ -128,8 +121,7 @@ export function useListVariableState(spec, state, variablesOptionsQuery) {
         allowMultiple
     ]);
     value = useMemo(()=>{
-        var _viewOptions_;
-        const firstOptionValue = viewOptions === null || viewOptions === void 0 ? void 0 : (_viewOptions_ = viewOptions[allowAllValue ? 1 : 0]) === null || _viewOptions_ === void 0 ? void 0 : _viewOptions_.value;
+        const firstOptionValue = viewOptions?.[allowAllValue ? 1 : 0]?.value;
         // If there is no value but there are options, or the value is not in options, we set the value to the first option.
         if (firstOptionValue) {
             if (!valueIsInOptions || !value || value.length === 0) {
@@ -151,13 +143,12 @@ export function useListVariableState(spec, state, variablesOptionsQuery) {
         // an array, hence this conditional
         if (Array.isArray(value)) {
             return viewOptions.filter((o)=>{
-                return value === null || value === void 0 ? void 0 : value.includes(o.value);
+                return value?.includes(o.value);
             });
         } else {
-            var _viewOptions_find;
-            return (_viewOptions_find = viewOptions.find((o)=>{
+            return viewOptions.find((o)=>{
                 return value === o.value;
-            })) !== null && _viewOptions_find !== void 0 ? _viewOptions_find : {
+            }) ?? {
                 value: '',
                 label: ''
             };
@@ -175,7 +166,6 @@ export function useListVariableState(spec, state, variablesOptionsQuery) {
     };
 }
 const StyledPopper = (props)=>/*#__PURE__*/ _jsx(Popper, {
-        placeholder: undefined,
         ...props,
         sx: {
             minWidth: 'fit-content'
@@ -185,28 +175,25 @@ const StyledPopper = (props)=>/*#__PURE__*/ _jsx(Popper, {
 const LETTER_HSIZE = 8; // approximation
 const ARROW_OFFSET = 40; // right offset for list variables (= take into account the dropdown toggle size)
 const getWidthPx = (inputValue, kind)=>{
-    const width = (inputValue.length + 1) * LETTER_HSIZE + (kind == 'list' ? ARROW_OFFSET : 0);
-    if (width < MIN_TEMPLATE_VARIABLE_WIDTH) {
-        return MIN_TEMPLATE_VARIABLE_WIDTH;
-    } else if (width > MAX_TEMPLATE_VARIABLE_WIDTH) {
-        return MAX_TEMPLATE_VARIABLE_WIDTH;
+    const width = (inputValue.length + 1) * LETTER_HSIZE + (kind === 'list' ? ARROW_OFFSET : 0);
+    if (width < MIN_VARIABLE_WIDTH) {
+        return MIN_VARIABLE_WIDTH;
+    } else if (width > MAX_VARIABLE_WIDTH) {
+        return MAX_VARIABLE_WIDTH;
     } else {
         return width;
     }
 };
 function ListVariable({ name, source }) {
-    var _definition_spec_display;
-    const ctx = useTemplateVariable(name, source);
+    const ctx = useVariableDefinitionAndState(name, source);
     const definition = ctx.definition;
     const variablesOptionsQuery = useListVariablePluginValues(definition);
-    const { setVariableValue, setVariableLoading, setVariableOptions } = useTemplateVariableActions();
-    const { selectedOptions, value, loading, options, viewOptions } = useListVariableState(definition === null || definition === void 0 ? void 0 : definition.spec, ctx.state, variablesOptionsQuery);
-    const [inputValue, setInputValue] = useState('');
-    const [inputWidth, setInputWidth] = useState(MIN_TEMPLATE_VARIABLE_WIDTH);
-    var _definition_spec_display_name;
-    const title = (_definition_spec_display_name = definition === null || definition === void 0 ? void 0 : (_definition_spec_display = definition.spec.display) === null || _definition_spec_display === void 0 ? void 0 : _definition_spec_display.name) !== null && _definition_spec_display_name !== void 0 ? _definition_spec_display_name : name;
-    const allowMultiple = (definition === null || definition === void 0 ? void 0 : definition.spec.allowMultiple) === true;
-    const allowAllValue = (definition === null || definition === void 0 ? void 0 : definition.spec.allowAllValue) === true;
+    const { setVariableValue, setVariableLoading, setVariableOptions } = useVariableDefinitionActions();
+    const { selectedOptions, value, loading, options, viewOptions } = useListVariableState(definition?.spec, ctx.state, variablesOptionsQuery);
+    const [inputWidth, setInputWidth] = useState(MIN_VARIABLE_WIDTH);
+    const title = definition?.spec.display?.name ?? name;
+    const allowMultiple = definition?.spec.allowMultiple === true;
+    const allowAllValue = definition?.spec.allowAllValue === true;
     // Update value when changed
     useEffect(()=>{
         if (value) {
@@ -248,7 +235,9 @@ function ListVariable({ name, source }) {
                 limitTags: 3,
                 size: "small",
                 disableClearable: true,
-                PopperComponent: StyledPopper,
+                slots: {
+                    popper: StyledPopper
+                },
                 renderInput: (params)=>{
                     return allowMultiple ? /*#__PURE__*/ _jsx(TextField, {
                         ...params,
@@ -265,9 +254,8 @@ function ListVariable({ name, source }) {
                     '& .MuiInputBase-root': {
                         minHeight: '38px'
                     },
-                    '& .MuiInputBase-root.MuiOutlinedInput-root.MuiInputBase-sizeSmall': {
-                        paddingY: '5px',
-                        paddingLeft: '5px'
+                    '& .MuiAutocomplete-tag': {
+                        margin: '1px 2px'
                     }
                 },
                 value: selectedOptions,
@@ -278,9 +266,7 @@ function ListVariable({ name, source }) {
                         setVariableValue(name, variableOptionToVariableValue(value), source);
                     }
                 },
-                inputValue: inputValue,
                 onInputChange: (_, newInputValue)=>{
-                    setInputValue(newInputValue);
                     if (!allowMultiple) {
                         setInputWidth(getWidthPx(newInputValue, 'list'));
                     }
@@ -292,34 +278,31 @@ function ListVariable({ name, source }) {
     });
 }
 function TextVariable({ name, source }) {
-    var _definition_spec_display;
-    const ctx = useTemplateVariable(name, source);
+    const ctx = useVariableDefinitionAndState(name, source);
     const state = ctx.state;
     const definition = ctx.definition;
-    var _state_value;
-    const [tempValue, setTempValue] = useState((_state_value = state === null || state === void 0 ? void 0 : state.value) !== null && _state_value !== void 0 ? _state_value : '');
+    const [tempValue, setTempValue] = useState(state?.value ?? '');
     const [inputWidth, setInputWidth] = useState(getWidthPx(tempValue, 'text'));
-    const { setVariableValue } = useTemplateVariableActions();
+    const { setVariableValue } = useVariableDefinitionActions();
     useEffect(()=>{
-        var _state_value;
-        setTempValue((_state_value = state === null || state === void 0 ? void 0 : state.value) !== null && _state_value !== void 0 ? _state_value : '');
+        setTempValue(state?.value ?? '');
     }, [
-        state === null || state === void 0 ? void 0 : state.value
+        state?.value
     ]);
-    var _definition_spec_display_name, _definition_spec_constant;
     return /*#__PURE__*/ _jsx(TextField, {
         title: tempValue,
         value: tempValue,
-        //onChange={(e) => setTempValue(e.target.value)}
         onChange: (e)=>{
             setTempValue(e.target.value);
             setInputWidth(getWidthPx(e.target.value, 'text'));
         },
         onBlur: ()=>setVariableValue(name, tempValue, source),
         placeholder: name,
-        label: (_definition_spec_display_name = definition === null || definition === void 0 ? void 0 : (_definition_spec_display = definition.spec.display) === null || _definition_spec_display === void 0 ? void 0 : _definition_spec_display.name) !== null && _definition_spec_display_name !== void 0 ? _definition_spec_display_name : name,
-        InputProps: {
-            readOnly: (_definition_spec_constant = definition === null || definition === void 0 ? void 0 : definition.spec.constant) !== null && _definition_spec_constant !== void 0 ? _definition_spec_constant : false
+        label: definition?.spec.display?.name ?? name,
+        slotProps: {
+            input: {
+                readOnly: definition?.spec.constant ?? false
+            }
         },
         sx: {
             width: `${inputWidth}px`,
@@ -333,4 +316,4 @@ function TextVariable({ name, source }) {
     });
 }
 
-//# sourceMappingURL=TemplateVariable.js.map
+//# sourceMappingURL=Variable.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Variables/Variable.tsx"],"sourcesContent":["// Copyright 2024 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { ReactElement, useEffect, useMemo, useState } from 'react';\nimport { LinearProgress, TextField, Autocomplete, Popper, PopperProps } from '@mui/material';\nimport {\n  DEFAULT_ALL_VALUE,\n  ListVariableDefinition,\n  ListVariableSpec,\n  TextVariableDefinition,\n  VariableName,\n  VariableValue,\n} from '@perses-dev/core';\nimport { useListVariablePluginValues, VariableOption, VariableState } 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';\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\n    switch (sort) {\n      case 'alphabetical-asc':\n        return opts.sort((a, b) => (a.label > b.label ? 1 : -1));\n      case 'alphabetical-desc':\n        return opts.sort((a, b) => (a.label > b.label ? -1 : 1));\n      case 'numerical-asc':\n        return opts.sort((a, b) => (parseInt(a.label) > parseInt(b.label) ? 1 : -1));\n      case 'numerical-desc':\n        return opts.sort((a, b) => (parseInt(a.label) < parseInt(b.label) ? 1 : -1));\n      case 'alphabetical-ci-asc':\n        return opts.sort((a, b) => (a.label.toLowerCase() > b.label.toLowerCase() ? 1 : -1));\n      case 'alphabetical-ci-desc':\n        return opts.sort((a, b) => (a.label.toLowerCase() > b.label.toLowerCase() ? -1 : 1));\n      default:\n        return opts;\n    }\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\n  const title = definition?.spec.display?.name ?? name;\n  const allowMultiple = definition?.spec.allowMultiple === true;\n  const allowAllValue = definition?.spec.allowAllValue === true;\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  return (\n    <>\n      <Autocomplete\n        disablePortal\n        disableCloseOnSelect={allowMultiple}\n        multiple={allowMultiple}\n        fullWidth\n        limitTags={3}\n        size=\"small\"\n        disableClearable\n        slots={{ popper: StyledPopper }}\n        renderInput={(params) => {\n          return allowMultiple ? (\n            <TextField {...params} label={title} />\n          ) : (\n            <TextField {...params} label={title} style={{ width: `${inputWidth}px` }} />\n          );\n        }}\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        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), source);\n          }\n        }}\n        onInputChange={(_, newInputValue) => {\n          if (!allowMultiple) {\n            setInputWidth(getWidthPx(newInputValue, 'list'));\n          }\n        }}\n        options={viewOptions}\n      />\n      {loading && <LinearProgress />}\n    </>\n  );\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":["useEffect","useMemo","useState","LinearProgress","TextField","Autocomplete","Popper","DEFAULT_ALL_VALUE","useListVariablePluginValues","useVariableDefinitionAndState","useVariableDefinitionActions","MAX_VARIABLE_WIDTH","MIN_VARIABLE_WIDTH","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","a","b","label","parseInt","toLowerCase","viewOptions","computedOptions","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","title","display","disablePortal","disableCloseOnSelect","multiple","fullWidth","limitTags","size","disableClearable","slots","popper","renderInput","params","style","minHeight","margin","onChange","_","onInputChange","newInputValue","tempValue","setTempValue","e","target","onBlur","placeholder","slotProps","input","readOnly","constant","textOverflow"],"mappings":"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"}

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

@@ -1,3 +1,4 @@
+import { ReactElement } from 'react';
 import { BuiltinVariableDefinition, VariableDefinition } from '@perses-dev/core';
 import { VariableState } from '@perses-dev/plugin-system';
 import { ExternalVariableDefinition } from '../../context';
@@ -7,9 +8,9 @@ export declare function VariableEditor(props: {
     builtinVariableDefinitions: BuiltinVariableDefinition[];
     onChange: (variableDefinitions: VariableDefinition[]) => void;
     onCancel: () => void;
-}): import("react/jsx-runtime").JSX.Element;
+}): ReactElement;
 export declare function VariableName(props: {
     name: string;
     state: VariableState | undefined;
-}): import("react/jsx-runtime").JSX.Element;
+}): ReactElement;
 //# sourceMappingURL=VariableEditor.d.ts.map

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":"AAoCA,OAAO,EAAU,yBAAyB,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAUzF,OAAO,EAAsB,aAAa,EAAkB,MAAM,2BAA2B,CAAC;AAE9F,OAAO,EAAE,0BAA0B,EAAuC,MAAM,eAAe,CAAC;AAuBhG,wBAAgB,cAAc,CAAC,KAAK,EAAE;IACpC,mBAAmB,EAAE,kBAAkB,EAAE,CAAC;IAC1C,2BAA2B,EAAE,0BAA0B,EAAE,CAAC;IAC1D,0BAA0B,EAAE,yBAAyB,EAAE,CAAC;IACxD,QAAQ,EAAE,CAAC,mBAAmB,EAAE,kBAAkB,EAAE,KAAK,IAAI,CAAC;IAC9D,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB,2CAmUA;AAMD,wBAAgB,YAAY,CAAC,KAAK,EAAE;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,aAAa,GAAG,SAAS,CAAA;CAAE,2CAoBrF"}
+{"version":3,"file":"VariableEditor.d.ts","sourceRoot":"","sources":["../../../src/components/Variables/VariableEditor.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAqB,YAAY,EAAE,MAAM,OAAO,CAAC;AAuBxD,OAAO,EAAU,yBAAyB,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAUzF,OAAO,EAA0C,aAAa,EAAkB,MAAM,2BAA2B,CAAC;AAElH,OAAO,EAAE,0BAA0B,EAAuC,MAAM,eAAe,CAAC;AAuBhG,wBAAgB,cAAc,CAAC,KAAK,EAAE;IACpC,mBAAmB,EAAE,kBAAkB,EAAE,CAAC;IAC1C,2BAA2B,EAAE,0BAA0B,EAAE,CAAC;IAC1D,0BAA0B,EAAE,yBAAyB,EAAE,CAAC;IACxD,QAAQ,EAAE,CAAC,mBAAmB,EAAE,kBAAkB,EAAE,KAAK,IAAI,CAAC;IAC9D,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB,GAAG,YAAY,CAsUf;AAMD,wBAAgB,YAAY,CAAC,KAAK,EAAE;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,aAAa,GAAG,SAAS,CAAA;CAAE,GAAG,YAAY,CAoBpG"}