@perses-dev/dashboards 0.0.0-snapshot-scatter-chart-embed-8efdfab → 0.0.0-snapshot-explorer-plugin-c4a7621

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,4 +1,4 @@
-/// <reference types="react" />
+import { ReactElement } from 'react';
 import { BuiltinVariableDefinition, VariableDefinition } from '@perses-dev/core';
 import { VariableState } from '@perses-dev/plugin-system';
 import { ExternalVariableDefinition } from '../../context';
@@ -8,9 +8,9 @@ export declare function VariableEditor(props: {
     builtinVariableDefinitions: BuiltinVariableDefinition[];
     onChange: (variableDefinitions: VariableDefinition[]) => void;
     onCancel: () => void;
-}): JSX.Element;
+}): ReactElement;
 export declare function VariableName(props: {
     name: string;
     state: VariableState | undefined;
-}): 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,eAkUA;AAMD,wBAAgB,YAAY,CAAC,KAAK,EAAE;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,aAAa,GAAG,SAAS,CAAA;CAAE,eAoBrF"}
+{"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"}

package/dist/components/Variables/VariableEditor.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
@@ -22,14 +22,13 @@ import ArrowDown from 'mdi-material-ui/ArrowDown';
 import ContentDuplicate from 'mdi-material-ui/ContentDuplicate';
 import OpenInNewIcon from 'mdi-material-ui/OpenInNew';
 import ExpandMoreIcon from 'mdi-material-ui/ChevronUp';
-import { VariableEditorForm, VARIABLE_TYPES } from '@perses-dev/plugin-system';
+import { ValidationProvider, VariableEditorForm, VARIABLE_TYPES } from '@perses-dev/plugin-system';
 import { InfoTooltip } from '@perses-dev/components';
 import { useDiscardChangesConfirmationDialog } from '../../context';
-import { hydrateTemplateVariableStates } from '../../context/TemplateVariableProvider/hydrationUtils';
+import { hydrateVariableDefinitionStates } from '../../context/VariableProvider/hydrationUtils';
 import { BuiltinVariableAccordions } from './BuiltinVariableAccordions';
 function getVariableLabelByKind(kind) {
-    var _VARIABLE_TYPES_find;
-    return (_VARIABLE_TYPES_find = VARIABLE_TYPES.find((variableType)=>variableType.kind === kind)) === null || _VARIABLE_TYPES_find === void 0 ? void 0 : _VARIABLE_TYPES_find.label;
+    return VARIABLE_TYPES.find((variableType)=>variableType.kind === kind)?.label;
 }
 function getValidation(variableDefinitions) {
     const errors = [];
@@ -54,14 +53,14 @@ export function VariableEditor(props) {
     ]);
     const [variableState] = useMemo(()=>{
         return [
-            hydrateTemplateVariableStates(variableDefinitions, {}, externalVariableDefinitions)
+            hydrateVariableDefinitionStates(variableDefinitions, {}, externalVariableDefinitions)
         ];
     }, [
         externalVariableDefinitions,
         variableDefinitions
     ]);
     const currentEditingVariableDefinition = typeof variableEditIdx === 'number' && variableDefinitions[variableEditIdx];
-    const { openDiscardChangesConfirmationDialog , closeDiscardChangesConfirmationDialog  } = useDiscardChangesConfirmationDialog();
+    const { openDiscardChangesConfirmationDialog, closeDiscardChangesConfirmationDialog } = useDiscardChangesConfirmationDialog();
     const handleCancel = ()=>{
         if (JSON.stringify(props.variableDefinitions) !== JSON.stringify(variableDefinitions)) {
             openDiscardChangesConfirmationDialog({
@@ -141,25 +140,27 @@ export function VariableEditor(props) {
             draft.push(v);
         });
     };
-    var _getVariableLabelByKind, _v_spec_display_description, _getVariableLabelByKind1, _v_spec_display_description1;
     return /*#__PURE__*/ _jsxs(_Fragment, {
         children: [
-            currentEditingVariableDefinition && /*#__PURE__*/ _jsx(VariableEditorForm, {
-                initialVariableDefinition: currentEditingVariableDefinition,
-                initialAction: variableFormAction,
-                isDraft: true,
-                onSave: (definition)=>{
-                    setVariableDefinitions((draft)=>{
-                        draft[variableEditIdx] = definition;
+            currentEditingVariableDefinition && /*#__PURE__*/ _jsx(ValidationProvider, {
+                children: /*#__PURE__*/ _jsx(VariableEditorForm, {
+                    initialVariableDefinition: currentEditingVariableDefinition,
+                    action: variableFormAction,
+                    isDraft: true,
+                    onActionChange: setVariableFormAction,
+                    onSave: (definition)=>{
+                        setVariableDefinitions((draft)=>{
+                            draft[variableEditIdx] = definition;
+                            setVariableEditIdx(null);
+                        });
+                    },
+                    onClose: ()=>{
+                        if (variableFormAction === 'create') {
+                            removeVariable(variableEditIdx);
+                        }
                         setVariableEditIdx(null);
-                    });
-                },
-                onClose: ()=>{
-                    if (variableFormAction === 'create') {
-                        removeVariable(variableEditIdx);
                     }
-                    setVariableEditIdx(null);
-                }
+                })
             }),
             !currentEditingVariableDefinition && /*#__PURE__*/ _jsxs(_Fragment, {
                 children: [
@@ -243,15 +244,13 @@ export function VariableEditor(props) {
                                                         })
                                                     }),
                                                     /*#__PURE__*/ _jsx(TableBody, {
-                                                        children: variableDefinitions.map((v, idx)=>{
-                                                            var _v_spec_display, _v_spec_display1;
-                                                            /*#__PURE__*/ return _jsxs(TableRow, {
+                                                        children: variableDefinitions.map((v, idx)=>/*#__PURE__*/ _jsxs(TableRow, {
                                                                 children: [
                                                                     /*#__PURE__*/ _jsx(TableCell, {
                                                                         component: "th",
                                                                         scope: "row",
                                                                         children: /*#__PURE__*/ _jsx(Switch, {
-                                                                            checked: ((_v_spec_display = v.spec.display) === null || _v_spec_display === void 0 ? void 0 : _v_spec_display.hidden) !== true,
+                                                                            checked: v.spec.display?.hidden !== true,
                                                                             onChange: (e)=>{
                                                                                 toggleVariableVisibility(idx, e.target.checked);
                                                                             }
@@ -271,10 +270,10 @@ export function VariableEditor(props) {
                                                                         })
                                                                     }),
                                                                     /*#__PURE__*/ _jsx(TableCell, {
-                                                                        children: (_getVariableLabelByKind = getVariableLabelByKind(v.kind)) !== null && _getVariableLabelByKind !== void 0 ? _getVariableLabelByKind : v.kind
+                                                                        children: getVariableLabelByKind(v.kind) ?? v.kind
                                                                     }),
                                                                     /*#__PURE__*/ _jsx(TableCell, {
-                                                                        children: (_v_spec_display_description = (_v_spec_display1 = v.spec.display) === null || _v_spec_display1 === void 0 ? void 0 : _v_spec_display1.description) !== null && _v_spec_display_description !== void 0 ? _v_spec_display_description : ''
+                                                                        children: v.spec.display?.description ?? ''
                                                                     }),
                                                                     /*#__PURE__*/ _jsxs(TableCell, {
                                                                         align: "right",
@@ -303,8 +302,7 @@ export function VariableEditor(props) {
                                                                         ]
                                                                     })
                                                                 ]
-                                                            }, v.spec.name);
-                                                        })
+                                                            }, v.spec.name))
                                                     })
                                                 ]
                                             })
@@ -323,8 +321,7 @@ export function VariableEditor(props) {
                                         })
                                     ]
                                 }),
-                                externalVariableDefinitions && !externalVariableDefinitions.every((v)=>v.definitions.length === 0) && externalVariableDefinitions.map((extVar)=>{
-                                    return extVar.definitions.length > 0 && /*#__PURE__*/ _jsxs(Accordion, {
+                                externalVariableDefinitions && !externalVariableDefinitions.every((v)=>v.definitions.length === 0) && externalVariableDefinitions.map((extVar, key)=>extVar.definitions.length > 0 && /*#__PURE__*/ _jsxs(Accordion, {
                                         sx: (theme)=>({
                                                 '.MuiAccordionSummary-root': {
                                                     backgroundColor: theme.palette.background.lighter
@@ -405,15 +402,13 @@ export function VariableEditor(props) {
                                                                 })
                                                             }),
                                                             /*#__PURE__*/ _jsx(TableBody, {
-                                                                children: extVar.definitions.map((v)=>{
-                                                                    var _v_spec_display, _v_spec_display1;
-                                                                    /*#__PURE__*/ return _jsxs(TableRow, {
+                                                                children: extVar.definitions.map((v)=>/*#__PURE__*/ _jsxs(TableRow, {
                                                                         children: [
                                                                             /*#__PURE__*/ _jsx(TableCell, {
                                                                                 component: "th",
                                                                                 scope: "row",
                                                                                 children: /*#__PURE__*/ _jsx(Switch, {
-                                                                                    checked: ((_v_spec_display = v.spec.display) === null || _v_spec_display === void 0 ? void 0 : _v_spec_display.hidden) !== true,
+                                                                                    checked: v.spec.display?.hidden !== true,
                                                                                     disabled: true
                                                                                 })
                                                                             }),
@@ -432,10 +427,10 @@ export function VariableEditor(props) {
                                                                                 })
                                                                             }),
                                                                             /*#__PURE__*/ _jsx(TableCell, {
-                                                                                children: (_getVariableLabelByKind1 = getVariableLabelByKind(v.kind)) !== null && _getVariableLabelByKind1 !== void 0 ? _getVariableLabelByKind1 : v.kind
+                                                                                children: getVariableLabelByKind(v.kind) ?? v.kind
                                                                             }),
                                                                             /*#__PURE__*/ _jsx(TableCell, {
-                                                                                children: (_v_spec_display_description1 = (_v_spec_display1 = v.spec.display) === null || _v_spec_display1 === void 0 ? void 0 : _v_spec_display1.description) !== null && _v_spec_display_description1 !== void 0 ? _v_spec_display_description1 : ''
+                                                                                children: v.spec.display?.description ?? ''
                                                                             }),
                                                                             /*#__PURE__*/ _jsxs(TableCell, {
                                                                                 align: "right",
@@ -469,16 +464,14 @@ export function VariableEditor(props) {
                                                                                 ]
                                                                             })
                                                                         ]
-                                                                    }, v.spec.name);
-                                                                })
+                                                                    }, v.spec.name))
                                                             })
                                                         ]
                                                     })
                                                 })
                                             })
                                         ]
-                                    });
-                                }),
+                                    }, key)),
                                 builtinVariableDefinitions && /*#__PURE__*/ _jsx(BuiltinVariableAccordions, {
                                     builtinVariableDefinitions: builtinVariableDefinitions
                                 })
@@ -490,20 +483,20 @@ export function VariableEditor(props) {
         ]
     });
 }
-const TableCell = styled(MuiTableCell)(({ theme  })=>({
+const TableCell = styled(MuiTableCell)(({ theme })=>({
         borderBottom: `solid 1px ${theme.palette.divider}`
     }));
 export function VariableName(props) {
-    const { name , state  } = props;
+    const { name, state } = props;
     return /*#__PURE__*/ _jsxs(_Fragment, {
         children: [
-            !(state === null || state === void 0 ? void 0 : state.overridden) && `${name} `,
-            !(state === null || state === void 0 ? void 0 : state.overridden) && (state === null || state === void 0 ? void 0 : state.overriding) && /*#__PURE__*/ _jsx(Box, {
+            !state?.overridden && `${name} `,
+            !state?.overridden && state?.overriding && /*#__PURE__*/ _jsx(Box, {
                 fontWeight: "normal",
                 color: (theme)=>theme.palette.primary.main,
                 children: "(overriding)"
             }),
-            (state === null || state === void 0 ? void 0 : state.overridden) && /*#__PURE__*/ _jsxs(_Fragment, {
+            state?.overridden && /*#__PURE__*/ _jsxs(_Fragment, {
                 children: [
                     /*#__PURE__*/ _jsx(Box, {
                         color: (theme)=>theme.palette.grey[500],

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

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

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

@@ -1,8 +1,8 @@
-/// <reference types="react" />
 import { VariableSpec } from '@perses-dev/core';
-export declare function TemplateVariableList(): JSX.Element;
-export declare function TemplateVariableListItem({ spec, source }: {
+import { ReactElement } from 'react';
+export declare function VariableList(): ReactElement;
+export declare function VariableListItem({ spec, source }: {
     spec: VariableSpec;
     source?: string;
-}): JSX.Element;
+}): ReactElement | null;
 //# sourceMappingURL=VariableList.d.ts.map

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,EAAE,MAAM,kBAAkB,CAAC;AAUpE,wBAAgB,oBAAoB,gBAmBnC;AAED,wBAAgB,wBAAwB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAAE,IAAI,EAAE,YAAY,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,eAcjG"}
+{"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;AAUrC,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"}

package/dist/components/Variables/VariableList.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
@@ -12,40 +12,41 @@
 // limitations under the License.
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Box } from '@mui/material';
-import { useTemplateExternalVariableDefinitions, useTemplateVariable, useTemplateVariableDefinitions } from '../../context';
-import { MAX_TEMPLATE_VARIABLE_WIDTH, MIN_TEMPLATE_VARIABLE_WIDTH } from '../../constants';
-import { TemplateVariable } from './TemplateVariable';
-export function TemplateVariableList() {
-    const variableDefinitions = useTemplateVariableDefinitions();
-    const externalVariableDefinitions = useTemplateExternalVariableDefinitions();
+import { useExternalVariableDefinitions, useVariableDefinitionAndState, useVariableDefinitions } from '../../context';
+import { MAX_VARIABLE_WIDTH, MIN_VARIABLE_WIDTH } from '../../constants';
+import { Variable } from './Variable';
+export function VariableList() {
+    const variableDefinitions = useVariableDefinitions();
+    const externalVariableDefinitions = useExternalVariableDefinitions();
     return /*#__PURE__*/ _jsxs(_Fragment, {
         children: [
             externalVariableDefinitions.slice().reverse() // We reverse to have the most prioritized on top
-            .map((def)=>def.definitions.map((v)=>/*#__PURE__*/ _jsx(TemplateVariableListItem, {
+            .map((def)=>def.definitions.map((v)=>/*#__PURE__*/ _jsx(VariableListItem, {
                         spec: v.spec,
                         source: def.source
                     }, v.spec.name + def.source))),
-            variableDefinitions.map((v)=>/*#__PURE__*/ _jsx(TemplateVariableListItem, {
+            variableDefinitions.map((v)=>/*#__PURE__*/ _jsx(VariableListItem, {
                     spec: v.spec
                 }, v.spec.name))
         ]
     });
 }
-export function TemplateVariableListItem({ spec , source  }) {
-    var _ctx_state, _spec_display;
-    const ctx = useTemplateVariable(spec.name, source);
-    var _ref, _ref1;
+export function VariableListItem({ spec, source }) {
+    const ctx = useVariableDefinitionAndState(spec.name, source);
+    if (ctx.state?.overridden) {
+        return null;
+    }
     return /*#__PURE__*/ _jsx(Box, {
-        display: ((_ctx_state = ctx.state) === null || _ctx_state === void 0 ? void 0 : _ctx_state.overridden) || ((_spec_display = spec.display) === null || _spec_display === void 0 ? void 0 : _spec_display.hidden) ? 'none' : undefined,
-        minWidth: `${MIN_TEMPLATE_VARIABLE_WIDTH}px`,
-        maxWidth: `${MAX_TEMPLATE_VARIABLE_WIDTH}px`,
+        display: spec.display?.hidden ? 'none' : undefined,
+        minWidth: `${MIN_VARIABLE_WIDTH}px`,
+        maxWidth: `${MAX_VARIABLE_WIDTH}px`,
         flexShrink: 0,
-        "data-testid": 'template-variable-' + spec.name,
-        children: /*#__PURE__*/ _jsx(TemplateVariable, {
+        "data-testid": 'variable-' + spec.name,
+        children: /*#__PURE__*/ _jsx(Variable, {
             name: spec.name,
             source: source
-        }, (_ref = spec.name + source) !== null && _ref !== void 0 ? _ref : '')
-    }, (_ref1 = spec.name + source) !== null && _ref1 !== void 0 ? _ref1 : '');
+        }, (spec.name + source) ?? '')
+    }, (spec.name + source) ?? '');
 }
 
 //# sourceMappingURL=VariableList.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Variables/VariableList.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 { Box } from '@mui/material';\nimport { VariableDefinition, VariableSpec } from '@perses-dev/core';\nimport {\n  ExternalVariableDefinition,\n  useTemplateExternalVariableDefinitions,\n  useTemplateVariable,\n  useTemplateVariableDefinitions,\n} from '../../context';\nimport { MAX_TEMPLATE_VARIABLE_WIDTH, MIN_TEMPLATE_VARIABLE_WIDTH } from '../../constants';\nimport { TemplateVariable } from './TemplateVariable';\n\nexport function TemplateVariableList() {\n  const variableDefinitions: VariableDefinition[] = useTemplateVariableDefinitions();\n  const externalVariableDefinitions: ExternalVariableDefinition[] = useTemplateExternalVariableDefinitions();\n\n  return (\n    <>\n      {externalVariableDefinitions\n        .slice()\n        .reverse() // We reverse to have the most prioritized on top\n        .map((def) =>\n          def.definitions.map((v) => (\n            <TemplateVariableListItem key={v.spec.name + def.source} spec={v.spec} source={def.source} />\n          ))\n        )}\n      {variableDefinitions.map((v) => (\n        <TemplateVariableListItem key={v.spec.name} spec={v.spec} />\n      ))}\n    </>\n  );\n}\n\nexport function TemplateVariableListItem({ spec, source }: { spec: VariableSpec; source?: string }) {\n  const ctx = useTemplateVariable(spec.name, source);\n  return (\n    <Box\n      key={spec.name + source ?? ''}\n      display={ctx.state?.overridden || spec.display?.hidden ? 'none' : undefined}\n      minWidth={`${MIN_TEMPLATE_VARIABLE_WIDTH}px`}\n      maxWidth={`${MAX_TEMPLATE_VARIABLE_WIDTH}px`}\n      flexShrink={0}\n      data-testid={'template-variable-' + spec.name}\n    >\n      <TemplateVariable key={spec.name + source ?? ''} name={spec.name} source={source} />\n    </Box>\n  );\n}\n"],"names":["Box","useTemplateExternalVariableDefinitions","useTemplateVariable","useTemplateVariableDefinitions","MAX_TEMPLATE_VARIABLE_WIDTH","MIN_TEMPLATE_VARIABLE_WIDTH","TemplateVariable","TemplateVariableList","variableDefinitions","externalVariableDefinitions","slice","reverse","map","def","definitions","v","TemplateVariableListItem","spec","source","name","ctx","display","state","overridden","hidden","undefined","minWidth","maxWidth","flexShrink","data-testid"],"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,GAAG,QAAQ,gBAAgB;AAEpC,SAEEC,sCAAsC,EACtCC,mBAAmB,EACnBC,8BAA8B,QACzB,gBAAgB;AACvB,SAASC,2BAA2B,EAAEC,2BAA2B,QAAQ,kBAAkB;AAC3F,SAASC,gBAAgB,QAAQ,qBAAqB;AAEtD,OAAO,SAASC;IACd,MAAMC,sBAA4CL;IAClD,MAAMM,8BAA4DR;IAElE,qBACE;;YACGQ,4BACEC,QACAC,UAAU,iDAAiD;aAC3DC,IAAI,CAACC,MACJA,IAAIC,YAAYF,IAAI,CAACG,kBACnB,KAACC;wBAAwDC,MAAMF,EAAEE;wBAAMC,QAAQL,IAAIK;uBAApDH,EAAEE,KAAKE,OAAON,IAAIK;YAGtDV,oBAAoBI,IAAI,CAACG,kBACxB,KAACC;oBAA2CC,MAAMF,EAAEE;mBAArBF,EAAEE,KAAKE;;;AAI9C;AAEA,OAAO,SAASH,yBAAyB,EAAEC,KAAI,EAAEC,OAAM,EAA2C;QAKnFE,YAAyBH;IAJtC,MAAMG,MAAMlB,oBAAoBe,KAAKE,MAAMD;QAUhBD,MAPlBA;IAFT,qBACE,KAACjB;QAECqB,SAASD,CAAAA,CAAAA,aAAAA,IAAIE,mBAAJF,wBAAAA,KAAAA,IAAAA,WAAWG,UAAS,KAAKN,CAAAA,CAAAA,gBAAAA,KAAKI,qBAALJ,2BAAAA,KAAAA,IAAAA,cAAcO,MAAK,IAAI,SAASC;QAClEC,UAAU,CAAC,EAAErB,4BAA4B,EAAE,CAAC;QAC5CsB,UAAU,CAAC,EAAEvB,4BAA4B,EAAE,CAAC;QAC5CwB,YAAY;QACZC,eAAa,uBAAuBZ,KAAKE;kBAEzC,cAAA,KAACb;YAAgDa,MAAMF,KAAKE;YAAMD,QAAQA;WAAnDD,CAAAA,OAAAA,KAAKE,OAAOD,oBAAZD,kBAAAA,OAAsB;OAPxCA,CAAAA,QAAAA,KAAKE,OAAOD,oBAAZD,mBAAAA,QAAsB;AAUjC"}
+{"version":3,"sources":["../../../src/components/Variables/VariableList.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 { Box } from '@mui/material';\nimport { VariableDefinition, VariableSpec } from '@perses-dev/core';\nimport { ReactElement } from 'react';\nimport {\n  ExternalVariableDefinition,\n  useExternalVariableDefinitions,\n  useVariableDefinitionAndState,\n  useVariableDefinitions,\n} from '../../context';\nimport { MAX_VARIABLE_WIDTH, MIN_VARIABLE_WIDTH } from '../../constants';\nimport { Variable } from './Variable';\n\nexport function VariableList(): ReactElement {\n  const variableDefinitions: VariableDefinition[] = useVariableDefinitions();\n  const externalVariableDefinitions: ExternalVariableDefinition[] = useExternalVariableDefinitions();\n\n  return (\n    <>\n      {externalVariableDefinitions\n        .slice()\n        .reverse() // We reverse to have the most prioritized on top\n        .map((def) =>\n          def.definitions.map((v) => (\n            <VariableListItem key={v.spec.name + def.source} spec={v.spec} source={def.source} />\n          ))\n        )}\n      {variableDefinitions.map((v) => (\n        <VariableListItem key={v.spec.name} spec={v.spec} />\n      ))}\n    </>\n  );\n}\n\nexport function VariableListItem({ spec, source }: { spec: VariableSpec; source?: string }): ReactElement | null {\n  const ctx = useVariableDefinitionAndState(spec.name, source);\n  if (ctx.state?.overridden) {\n    return null;\n  }\n  return (\n    <Box\n      key={spec.name + source ?? ''}\n      display={spec.display?.hidden ? 'none' : undefined}\n      minWidth={`${MIN_VARIABLE_WIDTH}px`}\n      maxWidth={`${MAX_VARIABLE_WIDTH}px`}\n      flexShrink={0}\n      data-testid={'variable-' + spec.name}\n    >\n      <Variable key={spec.name + source ?? ''} name={spec.name} source={source} />\n    </Box>\n  );\n}\n"],"names":["Box","useExternalVariableDefinitions","useVariableDefinitionAndState","useVariableDefinitions","MAX_VARIABLE_WIDTH","MIN_VARIABLE_WIDTH","Variable","VariableList","variableDefinitions","externalVariableDefinitions","slice","reverse","map","def","definitions","v","VariableListItem","spec","source","name","ctx","state","overridden","display","hidden","undefined","minWidth","maxWidth","flexShrink","data-testid"],"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,GAAG,QAAQ,gBAAgB;AAGpC,SAEEC,8BAA8B,EAC9BC,6BAA6B,EAC7BC,sBAAsB,QACjB,gBAAgB;AACvB,SAASC,kBAAkB,EAAEC,kBAAkB,QAAQ,kBAAkB;AACzE,SAASC,QAAQ,QAAQ,aAAa;AAEtC,OAAO,SAASC;IACd,MAAMC,sBAA4CL;IAClD,MAAMM,8BAA4DR;IAElE,qBACE;;YACGQ,4BACEC,KAAK,GACLC,OAAO,GAAG,iDAAiD;aAC3DC,GAAG,CAAC,CAACC,MACJA,IAAIC,WAAW,CAACF,GAAG,CAAC,CAACG,kBACnB,KAACC;wBAAgDC,MAAMF,EAAEE,IAAI;wBAAEC,QAAQL,IAAIK,MAAM;uBAA1DH,EAAEE,IAAI,CAACE,IAAI,GAAGN,IAAIK,MAAM;YAGpDV,oBAAoBI,GAAG,CAAC,CAACG,kBACxB,KAACC;oBAAmCC,MAAMF,EAAEE,IAAI;mBAAzBF,EAAEE,IAAI,CAACE,IAAI;;;AAI1C;AAEA,OAAO,SAASH,iBAAiB,EAAEC,IAAI,EAAEC,MAAM,EAA2C;IACxF,MAAME,MAAMlB,8BAA8Be,KAAKE,IAAI,EAAED;IACrD,IAAIE,IAAIC,KAAK,EAAEC,YAAY;QACzB,OAAO;IACT;IACA,qBACE,KAACtB;QAECuB,SAASN,KAAKM,OAAO,EAAEC,SAAS,SAASC;QACzCC,UAAU,CAAC,EAAErB,mBAAmB,EAAE,CAAC;QACnCsB,UAAU,CAAC,EAAEvB,mBAAmB,EAAE,CAAC;QACnCwB,YAAY;QACZC,eAAa,cAAcZ,KAAKE,IAAI;kBAEpC,cAAA,KAACb;YAAwCa,MAAMF,KAAKE,IAAI;YAAED,QAAQA;WAAnDD,CAAAA,KAAKE,IAAI,GAAGD,MAAK,KAAK;OAPhCD,CAAAA,KAAKE,IAAI,GAAGD,MAAK,KAAK;AAUjC"}

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

@@ -1,6 +1,6 @@
 export * from './BuiltinVariableAccordions';
 export * from './EditVariablesButton';
-export * from './TemplateVariable';
+export * from './Variable';
 export * from './VariableEditor';
 export * from './VariableList';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Variables/index.tsx"],"names":[],"mappings":"AAaA,cAAc,6BAA6B,CAAC;AAC5C,cAAc,uBAAuB,CAAC;AACtC,cAAc,oBAAoB,CAAC;AACnC,cAAc,kBAAkB,CAAC;AACjC,cAAc,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Variables/index.tsx"],"names":[],"mappings":"AAaA,cAAc,6BAA6B,CAAC;AAC5C,cAAc,uBAAuB,CAAC;AACtC,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC;AACjC,cAAc,gBAAgB,CAAC"}

package/dist/components/Variables/index.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
@@ -12,7 +12,7 @@
 // limitations under the License.
 export * from './BuiltinVariableAccordions';
 export * from './EditVariablesButton';
-export * from './TemplateVariable';
+export * from './Variable';
 export * from './VariableEditor';
 export * from './VariableList';
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Variables/index.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\nexport * from './BuiltinVariableAccordions';\nexport * from './EditVariablesButton';\nexport * from './TemplateVariable';\nexport * from './VariableEditor';\nexport * from './VariableList';\n"],"names":[],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,cAAc,8BAA8B;AAC5C,cAAc,wBAAwB;AACtC,cAAc,qBAAqB;AACnC,cAAc,mBAAmB;AACjC,cAAc,iBAAiB"}
+{"version":3,"sources":["../../../src/components/Variables/index.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\nexport * from './BuiltinVariableAccordions';\nexport * from './EditVariablesButton';\nexport * from './Variable';\nexport * from './VariableEditor';\nexport * from './VariableList';\n"],"names":[],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,cAAc,8BAA8B;AAC5C,cAAc,wBAAwB;AACtC,cAAc,aAAa;AAC3B,cAAc,mBAAmB;AACjC,cAAc,iBAAiB"}

package/dist/components/index.d.ts

@@ -18,7 +18,5 @@ export * from './PanelGroupDialog';
 export * from './QuerySummaryTable';
 export * from './SaveChangesConfirmationDialog';
 export * from './SaveDashboardButton';
-export * from './TimeRangeControls';
-export * from './ToolbarIconButton';
 export * from './Variables';
 //# sourceMappingURL=index.d.ts.map