@perses-dev/dashboards 0.53.0-beta.0 → 0.53.0-beta.1

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"VariableEditor.d.ts","sourceRoot":"","sources":["../../../src/components/Variables/VariableEditor.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAqB,YAAY,EAAE,MAAM,OAAO,CAAC;AAuBxD,OAAO,EAAU,yBAAyB,EAA8B,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAUrH,OAAO,EAGL,aAAa,EAId,MAAM,2BAA2B,CAAC;AAEnC,OAAO,EAAE,0BAA0B,EAAqD,MAAM,eAAe,CAAC;AAuB9G,wBAAgB,cAAc,CAAC,KAAK,EAAE;IACpC,mBAAmB,EAAE,kBAAkB,EAAE,CAAC;IAC1C,2BAA2B,EAAE,0BAA0B,EAAE,CAAC;IAC1D,0BAA0B,EAAE,yBAAyB,EAAE,CAAC;IACxD,QAAQ,EAAE,CAAC,mBAAmB,EAAE,kBAAkB,EAAE,KAAK,IAAI,CAAC;IAC9D,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB,GAAG,YAAY,CA4Uf;AAMD,wBAAgB,YAAY,CAAC,KAAK,EAAE;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,aAAa,GAAG,SAAS,CAAA;CAAE,GAAG,YAAY,CAoBpG"}
+{"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,EAEL,yBAAyB,EAEzB,kBAAkB,EAClB,0BAA0B,EAC3B,MAAM,kBAAkB,CAAC;AAU1B,OAAO,EAGL,aAAa,EAId,MAAM,2BAA2B,CAAC;AAyBnC,wBAAgB,cAAc,CAAC,KAAK,EAAE;IACpC,mBAAmB,EAAE,kBAAkB,EAAE,CAAC;IAC1C,2BAA2B,EAAE,0BAA0B,EAAE,CAAC;IAC1D,0BAA0B,EAAE,yBAAyB,EAAE,CAAC;IACxD,QAAQ,EAAE,CAAC,mBAAmB,EAAE,kBAAkB,EAAE,KAAK,IAAI,CAAC;IAC9D,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB,GAAG,YAAY,CA4Uf;AAMD,wBAAgB,YAAY,CAAC,KAAK,EAAE;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,aAAa,GAAG,SAAS,CAAA;CAAE,GAAG,YAAY,CAoBpG"}

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

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

package/dist/components/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;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"}
+{"version":3,"file":"VariableList.d.ts","sourceRoot":"","sources":["../../../src/components/Variables/VariableList.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAsB,YAAY,EAA8B,MAAM,kBAAkB,CAAC;AAChG,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAKrC,wBAAgB,YAAY,IAAI,YAAY,CAmB3C;AAED,wBAAgB,gBAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAAE,IAAI,EAAE,YAAY,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,YAAY,GAAG,IAAI,CAiB/G"}

package/dist/components/Variables/VariableList.js

@@ -45,8 +45,8 @@ export function VariableListItem({ spec, source }) {
         children: /*#__PURE__*/ _jsx(Variable, {
             name: spec.name,
             source: source
-        }, (spec.name + source) ?? '')
-    }, (spec.name + source) ?? '');
+        }, 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 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,GAAGrB,mBAAmB,EAAE,CAAC;QACnCsB,UAAU,GAAGvB,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"}
+{"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, ExternalVariableDefinition } from '@perses-dev/core';\nimport { ReactElement } from 'react';\nimport { useExternalVariableDefinitions, useVariableDefinitionAndState, useVariableDefinitions } 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,SAASC,8BAA8B,EAAEC,6BAA6B,EAAEC,sBAAsB,QAAQ,gBAAgB;AACtH,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,GAAGrB,mBAAmB,EAAE,CAAC;QACnCsB,UAAU,GAAGvB,mBAAmB,EAAE,CAAC;QACnCwB,YAAY;QACZC,eAAa,cAAcZ,KAAKE,IAAI;kBAEpC,cAAA,KAACb;YAA0Ca,MAAMF,KAAKE,IAAI;YAAED,QAAQA;WAArDD,KAAKE,IAAI,GAAID,CAAAA,UAAU,EAAC;OAPlCD,KAAKE,IAAI,GAAID,CAAAA,UAAU,EAAC;AAUnC"}

package/dist/context/DashboardProvider/dashboard-provider-api.d.ts

@@ -1,5 +1,4 @@
-import { DashboardResource, DurationString, EphemeralDashboardResource, PanelDefinition, PanelGroupId } from '@perses-dev/core';
-import { PanelGroupDefinition, PanelGroupItemId, PanelGroupItemLayout } from './panel-group-slice';
+import { DashboardResource, DurationString, EphemeralDashboardResource, PanelDefinition, PanelGroupId, PanelGroupDefinition, PanelGroupItemId, PanelGroupItemLayout } from '@perses-dev/core';
 import { DeletePanelGroupDialogState } from './delete-panel-group-slice';
 import { PanelGroupEditor } from './panel-group-editor-slice';
 import { PanelEditorState } from './panel-editor-slice';

package/dist/context/DashboardProvider/dashboard-provider-api.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dashboard-provider-api.d.ts","sourceRoot":"","sources":["../../../src/context/DashboardProvider/dashboard-provider-api.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"dashboard-provider-api.d.ts","sourceRoot":"","sources":["../../../src/context/DashboardProvider/dashboard-provider-api.ts"],"names":[],"mappings":"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"}

package/dist/context/DashboardProvider/dashboard-provider-api.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 2025 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

package/dist/context/DashboardProvider/dashboard-provider-api.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/context/DashboardProvider/dashboard-provider-api.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { useCallback, useMemo } from 'react';\nimport {\n  DashboardResource,\n  DurationString,\n  EphemeralDashboardResource,\n  PanelDefinition,\n  PanelGroupId,\n} from '@perses-dev/core';\nimport { DashboardStoreState, useDashboardStore } from './DashboardProvider';\nimport { PanelGroupDefinition, PanelGroupItemId, PanelGroupItemLayout } from './panel-group-slice';\nimport { DeletePanelGroupDialogState } from './delete-panel-group-slice';\nimport { PanelGroupEditor } from './panel-group-editor-slice';\nimport { PanelEditorState } from './panel-editor-slice';\nimport { DeletePanelDialogState } from './delete-panel-slice';\nimport { SaveChangesConfirmationDialogState } from './save-changes-dialog-slice';\nimport { DiscardChangesConfirmationDialogState } from './discard-changes-dialog-slice';\nimport { EditJsonDialogState } from './edit-json-dialog-slice';\nimport { ViewPanelSlice } from './view-panel-slice';\n\nconst selectEditMode: ({ isEditMode, setEditMode }: DashboardStoreState) => {\n  setEditMode: (isEditMode: boolean) => void;\n  isEditMode: boolean;\n} = ({ isEditMode, setEditMode }: DashboardStoreState) => ({ isEditMode, setEditMode });\nexport function useEditMode(): { setEditMode: (isEditMode: boolean) => void; isEditMode: boolean } {\n  return useDashboardStore(selectEditMode);\n}\n\nconst selectDashboardActions: ({ setDashboard, openAddPanelGroup, openAddPanel }: DashboardStoreState) => {\n  openAddPanelGroup: () => void;\n  openAddPanel: (panelGroupId?: PanelGroupId) => void;\n  setDashboard: (dashboard: DashboardResource | EphemeralDashboardResource) => void;\n} = ({ setDashboard, openAddPanelGroup, openAddPanel }: DashboardStoreState) => ({\n  setDashboard,\n  openAddPanelGroup,\n  openAddPanel,\n});\n/**\n * Returns actions that can be performed on the current dashboard.\n */\nexport function useDashboardActions(): {\n  openAddPanelGroup: () => void;\n  openAddPanel: () => void;\n  setDashboard: (dashboard: DashboardResource | EphemeralDashboardResource) => void;\n} {\n  const { setDashboard, openAddPanelGroup, openAddPanel } = useDashboardStore(selectDashboardActions);\n  return {\n    setDashboard,\n    openAddPanelGroup: () => openAddPanelGroup(),\n    openAddPanel: () => openAddPanel(),\n  };\n}\n\nconst selectPanelGroupOrder = (state: DashboardStoreState): number[] => state.panelGroupOrder;\n/**\n * Returns an array of PanelGroupIds in the order they appear in the dashboard.\n */\nexport function usePanelGroupIds(): number[] {\n  return useDashboardStore(selectPanelGroupOrder);\n}\n\nconst selectPanelGroups: (state: DashboardStoreState) => Record<number, PanelGroupDefinition> = (\n  state: DashboardStoreState\n) => state.panelGroups;\n/**\n * Returns an array of PanelGroupDefinitions in the order they appear in the dashboard.\n */\nexport function useListPanelGroups(): PanelGroupDefinition[] {\n  const panelGroupIds = usePanelGroupIds();\n  const panelGroups = useDashboardStore(selectPanelGroups);\n  return useMemo(() => {\n    return panelGroupIds.map((id) => {\n      const group = panelGroups[id];\n      if (group === undefined) {\n        throw new Error(`Invalid panel group Id found ${id}`);\n      }\n      return group;\n    });\n  }, [panelGroupIds, panelGroups]);\n}\n\n/**\n * Gets a specific panel group by its id. Throws if the panel group does not exist.\n */\nexport function usePanelGroup(panelGroupId: PanelGroupId): PanelGroupDefinition {\n  const panelGroup = useDashboardStore(useCallback((state) => state.panelGroups[panelGroupId], [panelGroupId]));\n  if (panelGroup === undefined) {\n    throw new Error(`Panel group with Id ${panelGroupId} was not found`);\n  }\n  return panelGroup;\n}\n\nconst selectPanelGroupActions: ({\n  openEditPanelGroup,\n  deletePanelGroup,\n  openAddPanel,\n  updatePanelGroupLayouts,\n}: DashboardStoreState) => {\n  updatePanelGroupLayouts: (panelGroupId: PanelGroupId, itemLayouts: PanelGroupDefinition['itemLayouts']) => void;\n  openEditPanelGroup: (panelGroupId: PanelGroupId) => void;\n  openAddPanel: (panelGroupId?: PanelGroupId) => void;\n  deletePanelGroup: (panelGroupId: PanelGroupId) => void;\n} = ({ openEditPanelGroup, deletePanelGroup, openAddPanel, updatePanelGroupLayouts }: DashboardStoreState) => ({\n  openEditPanelGroup,\n  deletePanelGroup,\n  openAddPanel,\n  updatePanelGroupLayouts,\n});\n/**\n * Returns actions that can be performed on the given panel group.\n */\nexport function usePanelGroupActions(panelGroupId: PanelGroupId): {\n  updatePanelGroupLayouts: (itemLayouts: PanelGroupItemLayout[]) => void;\n  openEditPanelGroup: () => void;\n  openAddPanel: () => void;\n  moveDown: (() => void) | undefined;\n  deletePanelGroup: () => void;\n  moveUp: (() => void) | undefined;\n} {\n  const { moveUp, moveDown } = useMovePanelGroup(panelGroupId);\n  const { openEditPanelGroup, deletePanelGroup, openAddPanel, updatePanelGroupLayouts } =\n    useDashboardStore(selectPanelGroupActions);\n\n  return {\n    openEditPanelGroup: () => openEditPanelGroup(panelGroupId),\n    deletePanelGroup: () => deletePanelGroup(panelGroupId),\n    openAddPanel: () => openAddPanel(panelGroupId),\n    moveUp,\n    moveDown,\n    updatePanelGroupLayouts: (itemLayouts: PanelGroupItemLayout[]) =>\n      updatePanelGroupLayouts(panelGroupId, itemLayouts),\n  };\n}\n\nconst selectSwapPanelGroups: (state: DashboardStoreState) => (xIndex: number, yIndex: number) => void = (\n  state: DashboardStoreState\n) => state.swapPanelGroups;\nconst selectPanelGroupsLength: (state: DashboardStoreState) => number = (state: DashboardStoreState) =>\n  state.panelGroupOrder.length;\n/**\n * Returns functions for moving a panel group up or down. A function will be undefined if the panel group can't be\n * moved in that direction.\n */\nfunction useMovePanelGroup(panelGroupId: PanelGroupId): {\n  moveDown: (() => void) | undefined;\n  moveUp: (() => void) | undefined;\n} {\n  const currentIndex = useDashboardStore(\n    useCallback((store) => store.panelGroupOrder.findIndex((id) => id === panelGroupId), [panelGroupId])\n  );\n  const panelGroupsLength = useDashboardStore(selectPanelGroupsLength);\n  const swapPanelGroups = useDashboardStore(selectSwapPanelGroups);\n\n  if (currentIndex < 0) {\n    throw new Error(`Could not find panel group with Id ${panelGroupId} in order array`);\n  }\n\n  const moveUp: () => void = () => swapPanelGroups(currentIndex, currentIndex - 1);\n  const moveDown: () => void = () => swapPanelGroups(currentIndex, currentIndex + 1);\n  return {\n    moveUp: currentIndex > 0 ? moveUp : undefined,\n    moveDown: currentIndex < panelGroupsLength - 1 ? moveDown : undefined,\n  };\n}\n\nconst selectPanelGroupEditor: (state: DashboardStoreState) => PanelGroupEditor | undefined = (\n  state: DashboardStoreState\n) => state.panelGroupEditor;\n/**\n * Gets the Panel Group editor state.\n */\nexport function usePanelGroupEditor(): PanelGroupEditor | undefined {\n  return useDashboardStore(selectPanelGroupEditor);\n}\n\nconst selectDeletePanelGroupDialog: ({\n  deletePanelGroupDialog,\n  openDeletePanelGroupDialog,\n  closeDeletePanelGroupDialog,\n  deletePanelGroup,\n}: DashboardStoreState) => {\n  deletePanelGroupDialog: DeletePanelGroupDialogState | undefined;\n  closeDeletePanelGroupDialog: () => void;\n  openDeletePanelGroupDialog: (panelGroupId: PanelGroupId) => void;\n  deletePanelGroup: (panelGroupId: PanelGroupId) => void;\n} = ({\n  deletePanelGroupDialog,\n  openDeletePanelGroupDialog,\n  closeDeletePanelGroupDialog,\n  deletePanelGroup,\n}: DashboardStoreState) => ({\n  deletePanelGroupDialog,\n  openDeletePanelGroupDialog,\n  closeDeletePanelGroupDialog,\n  deletePanelGroup,\n});\n/**\n * Gets the Delete Panel Group dialog state.\n */\nexport function useDeletePanelGroupDialog(): {\n  deletePanelGroupDialog: DeletePanelGroupDialogState | undefined;\n  closeDeletePanelGroupDialog: () => void;\n  openDeletePanelGroupDialog: (panelGroupId: PanelGroupId) => void;\n  deletePanelGroup: (panelGroupId: PanelGroupId) => void;\n} {\n  const { deletePanelGroupDialog, openDeletePanelGroupDialog, closeDeletePanelGroupDialog, deletePanelGroup } =\n    useDashboardStore(selectDeletePanelGroupDialog);\n  return {\n    deletePanelGroupDialog,\n    deletePanelGroup,\n    openDeletePanelGroupDialog,\n    closeDeletePanelGroupDialog: () => closeDeletePanelGroupDialog(),\n  };\n}\n\n/**\n * Gets an individual panel in the store. Throws if the panel can't be found.\n */\nexport function usePanel(panelGroupItemId: PanelGroupItemId): PanelDefinition {\n  const { panelGroupId, panelGroupItemLayoutId: panelGroupLayoutId } = panelGroupItemId;\n  const panel = useDashboardStore(\n    useCallback(\n      (store) => {\n        const panelKey = store.panelGroups[panelGroupId]?.itemPanelKeys[panelGroupLayoutId];\n        if (panelKey === undefined) return;\n        return store.panels[panelKey];\n      },\n      [panelGroupId, panelGroupLayoutId]\n    )\n  );\n\n  if (panel === undefined) {\n    throw new Error(`Could not find panel for Id ${panelGroupItemId}`);\n  }\n  return panel;\n}\n\nconst selectPanelActions: ({\n  openEditPanel,\n  openDeletePanelDialog,\n  duplicatePanel,\n  setViewPanel,\n}: DashboardStoreState) => {\n  openDeletePanelDialog: (panelGroupItemId: PanelGroupItemId) => void;\n  duplicatePanel: (panelGroupItemId: PanelGroupItemId) => void;\n  openEditPanel: (panelGroupItemId: PanelGroupItemId) => void;\n  setViewPanel: (panelGroupItemId?: PanelGroupItemId) => void;\n} = ({ openEditPanel, openDeletePanelDialog, duplicatePanel, setViewPanel }: DashboardStoreState) => ({\n  openEditPanel,\n  openDeletePanelDialog,\n  duplicatePanel,\n  setViewPanel,\n});\n\n/**\n * Returns actions that can be performed on the given Panel.\n */\nexport function usePanelActions(panelGroupItemId: PanelGroupItemId): {\n  openDeletePanelDialog: () => void;\n  duplicatePanel: () => void;\n  openEditPanel: () => void;\n  viewPanel: (panelGroupItemId?: PanelGroupItemId) => void;\n} {\n  const { openEditPanel, openDeletePanelDialog, duplicatePanel, setViewPanel } = useDashboardStore(selectPanelActions);\n  return {\n    openEditPanel: () => openEditPanel(panelGroupItemId),\n    openDeletePanelDialog: () => openDeletePanelDialog(panelGroupItemId),\n    duplicatePanel: () => duplicatePanel(panelGroupItemId),\n    viewPanel: (panelGroupItemId?: PanelGroupItemId) => setViewPanel(panelGroupItemId),\n  };\n}\n\nconst selectPanelEditor: (state: DashboardStoreState) => PanelEditorState | undefined = (state: DashboardStoreState) =>\n  state.panelEditor;\n/**\n * Gets the state for the Panel Editor.\n */\nexport function usePanelEditor(): PanelEditorState | undefined {\n  return useDashboardStore(selectPanelEditor);\n}\n\nconst selectDeletePanelDialog: ({ deletePanelDialog, deletePanel, closeDeletePanelDialog }: DashboardStoreState) => {\n  deletePanelDialog: DeletePanelDialogState | undefined;\n  closeDeletePanelDialog: () => void;\n  deletePanel: (panelGroupItemId: PanelGroupItemId) => void;\n} = ({ deletePanelDialog, deletePanel, closeDeletePanelDialog }: DashboardStoreState) => ({\n  deletePanelDialog,\n  deletePanel,\n  closeDeletePanelDialog,\n});\n\n/**\n * Gets the state for the Delete Panel dialog.\n */\nexport function useDeletePanelDialog(): {\n  deletePanelDialog: DeletePanelDialogState | undefined;\n  closeDeletePanelDialog: () => void;\n  deletePanel: (panelGroupItemId: PanelGroupItemId) => void;\n} {\n  // TODO: Refactor similar to other dialogs/editors so these are on the editor state itself\n  return useDashboardStore(selectDeletePanelDialog);\n}\n\nconst selectDashboardDuration: (state: DashboardStoreState) => DurationString = (state: DashboardStoreState) =>\n  state.duration;\nexport function useDashboardDuration(): DurationString {\n  return useDashboardStore(selectDashboardDuration);\n}\n\nconst selectViewPanel: (state: DashboardStoreState) => {\n  setViewPanel: DashboardStoreState['setViewPanel'];\n  getViewPanel: DashboardStoreState['getViewPanel'];\n  viewPanelId: DashboardStoreState['viewPanel']['panelGroupItemId'];\n} = (state: DashboardStoreState) => ({\n  setViewPanel: state.setViewPanel,\n  getViewPanel: state.getViewPanel,\n  viewPanelId: state.getViewPanel(),\n});\n/**\n * Returns actions related to the ViewPanel.\n */\nexport function useViewPanel(): {\n  setViewPanel: ViewPanelSlice['setViewPanel'];\n  getViewPanel: ViewPanelSlice['getViewPanel'];\n  viewPanelId: ViewPanelSlice['viewPanel']['panelGroupItemId'];\n} {\n  return useDashboardStore(selectViewPanel);\n}\n\nconst selectViewPanelGroup: (state: DashboardStoreState) => PanelGroupItemId | undefined = (\n  state: DashboardStoreState\n) => state.getViewPanel();\n/**\n * Gets the Panel Group for the view panel.\n */\nexport function useViewPanelGroup(): PanelGroupItemId | undefined {\n  return useDashboardStore(selectViewPanelGroup);\n}\n\nconst selectSaveChangesConfirmationDialog: ({\n  saveChangesConfirmationDialog,\n  openSaveChangesConfirmationDialog,\n  closeSaveChangesConfirmationDialog,\n}: DashboardStoreState) => {\n  closeSaveChangesConfirmationDialog: () => void;\n  openSaveChangesConfirmationDialog: (saveChangesConfirmationDialog: SaveChangesConfirmationDialogState) => void;\n  saveChangesConfirmationDialog: SaveChangesConfirmationDialogState | undefined;\n} = ({\n  saveChangesConfirmationDialog,\n  openSaveChangesConfirmationDialog,\n  closeSaveChangesConfirmationDialog,\n}: DashboardStoreState) => ({\n  saveChangesConfirmationDialog,\n  openSaveChangesConfirmationDialog,\n  closeSaveChangesConfirmationDialog,\n});\nexport function useSaveChangesConfirmationDialog(): {\n  closeSaveChangesConfirmationDialog: () => void;\n  openSaveChangesConfirmationDialog: (saveChangesConfirmationDialog: SaveChangesConfirmationDialogState) => void;\n  saveChangesConfirmationDialog: SaveChangesConfirmationDialogState | undefined;\n} {\n  return useDashboardStore(selectSaveChangesConfirmationDialog);\n}\n\nconst selectDiscardChangesConfirmationDialog: ({\n  discardChangesConfirmationDialog,\n  openDiscardChangesConfirmationDialog,\n  closeDiscardChangesConfirmationDialog,\n}: DashboardStoreState) => {\n  discardChangesConfirmationDialog: DiscardChangesConfirmationDialogState | undefined;\n  closeDiscardChangesConfirmationDialog: () => void;\n  openDiscardChangesConfirmationDialog: (\n    discardChangesConfirmationDialog: DiscardChangesConfirmationDialogState\n  ) => void;\n} = ({\n  discardChangesConfirmationDialog,\n  openDiscardChangesConfirmationDialog,\n  closeDiscardChangesConfirmationDialog,\n}: DashboardStoreState) => ({\n  discardChangesConfirmationDialog,\n  openDiscardChangesConfirmationDialog,\n  closeDiscardChangesConfirmationDialog,\n});\nexport function useDiscardChangesConfirmationDialog(): {\n  discardChangesConfirmationDialog: DiscardChangesConfirmationDialogState | undefined;\n  closeDiscardChangesConfirmationDialog: () => void;\n  openDiscardChangesConfirmationDialog: (\n    discardChangesConfirmationDialog: DiscardChangesConfirmationDialogState\n  ) => void;\n} {\n  return useDashboardStore(selectDiscardChangesConfirmationDialog);\n}\n\nconst selectEditJsonDialog: ({ editJsonDialog, openEditJsonDialog, closeEditJsonDialog }: DashboardStoreState) => {\n  openEditJsonDialog: () => void;\n  closeEditJsonDialog: () => void;\n  editJsonDialog: EditJsonDialogState | undefined;\n} = ({ editJsonDialog, openEditJsonDialog, closeEditJsonDialog }: DashboardStoreState) => ({\n  editJsonDialog,\n  openEditJsonDialog,\n  closeEditJsonDialog,\n});\n/**\n * Gets the state for the edit JSON dialog.\n */\nexport function useEditJsonDialog(): {\n  openEditJsonDialog: () => void;\n  closeEditJsonDialog: () => void;\n  editJsonDialog: EditJsonDialogState | undefined;\n} {\n  return useDashboardStore(selectEditJsonDialog);\n}\n"],"names":["useCallback","useMemo","useDashboardStore","selectEditMode","isEditMode","setEditMode","useEditMode","selectDashboardActions","setDashboard","openAddPanelGroup","openAddPanel","useDashboardActions","selectPanelGroupOrder","state","panelGroupOrder","usePanelGroupIds","selectPanelGroups","panelGroups","useListPanelGroups","panelGroupIds","map","id","group","undefined","Error","usePanelGroup","panelGroupId","panelGroup","selectPanelGroupActions","openEditPanelGroup","deletePanelGroup","updatePanelGroupLayouts","usePanelGroupActions","moveUp","moveDown","useMovePanelGroup","itemLayouts","selectSwapPanelGroups","swapPanelGroups","selectPanelGroupsLength","length","currentIndex","store","findIndex","panelGroupsLength","selectPanelGroupEditor","panelGroupEditor","usePanelGroupEditor","selectDeletePanelGroupDialog","deletePanelGroupDialog","openDeletePanelGroupDialog","closeDeletePanelGroupDialog","useDeletePanelGroupDialog","usePanel","panelGroupItemId","panelGroupItemLayoutId","panelGroupLayoutId","panel","panelKey","itemPanelKeys","panels","selectPanelActions","openEditPanel","openDeletePanelDialog","duplicatePanel","setViewPanel","usePanelActions","viewPanel","selectPanelEditor","panelEditor","usePanelEditor","selectDeletePanelDialog","deletePanelDialog","deletePanel","closeDeletePanelDialog","useDeletePanelDialog","selectDashboardDuration","duration","useDashboardDuration","selectViewPanel","getViewPanel","viewPanelId","useViewPanel","selectViewPanelGroup","useViewPanelGroup","selectSaveChangesConfirmationDialog","saveChangesConfirmationDialog","openSaveChangesConfirmationDialog","closeSaveChangesConfirmationDialog","useSaveChangesConfirmationDialog","selectDiscardChangesConfirmationDialog","discardChangesConfirmationDialog","openDiscardChangesConfirmationDialog","closeDiscardChangesConfirmationDialog","useDiscardChangesConfirmationDialog","selectEditJsonDialog","editJsonDialog","openEditJsonDialog","closeEditJsonDialog","useEditJsonDialog"],"mappings":"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"}
+{"version":3,"sources":["../../../src/context/DashboardProvider/dashboard-provider-api.ts"],"sourcesContent":["// Copyright 2025 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 { useCallback, useMemo } from 'react';\nimport {\n  DashboardResource,\n  DurationString,\n  EphemeralDashboardResource,\n  PanelDefinition,\n  PanelGroupId,\n  PanelGroupDefinition,\n  PanelGroupItemId,\n  PanelGroupItemLayout,\n} from '@perses-dev/core';\nimport { DashboardStoreState, useDashboardStore } from './DashboardProvider';\nimport { DeletePanelGroupDialogState } from './delete-panel-group-slice';\nimport { PanelGroupEditor } from './panel-group-editor-slice';\nimport { PanelEditorState } from './panel-editor-slice';\nimport { DeletePanelDialogState } from './delete-panel-slice';\nimport { SaveChangesConfirmationDialogState } from './save-changes-dialog-slice';\nimport { DiscardChangesConfirmationDialogState } from './discard-changes-dialog-slice';\nimport { EditJsonDialogState } from './edit-json-dialog-slice';\nimport { ViewPanelSlice } from './view-panel-slice';\n\nconst selectEditMode: ({ isEditMode, setEditMode }: DashboardStoreState) => {\n  setEditMode: (isEditMode: boolean) => void;\n  isEditMode: boolean;\n} = ({ isEditMode, setEditMode }: DashboardStoreState) => ({ isEditMode, setEditMode });\nexport function useEditMode(): { setEditMode: (isEditMode: boolean) => void; isEditMode: boolean } {\n  return useDashboardStore(selectEditMode);\n}\n\nconst selectDashboardActions: ({ setDashboard, openAddPanelGroup, openAddPanel }: DashboardStoreState) => {\n  openAddPanelGroup: () => void;\n  openAddPanel: (panelGroupId?: PanelGroupId) => void;\n  setDashboard: (dashboard: DashboardResource | EphemeralDashboardResource) => void;\n} = ({ setDashboard, openAddPanelGroup, openAddPanel }: DashboardStoreState) => ({\n  setDashboard,\n  openAddPanelGroup,\n  openAddPanel,\n});\n/**\n * Returns actions that can be performed on the current dashboard.\n */\nexport function useDashboardActions(): {\n  openAddPanelGroup: () => void;\n  openAddPanel: () => void;\n  setDashboard: (dashboard: DashboardResource | EphemeralDashboardResource) => void;\n} {\n  const { setDashboard, openAddPanelGroup, openAddPanel } = useDashboardStore(selectDashboardActions);\n  return {\n    setDashboard,\n    openAddPanelGroup: () => openAddPanelGroup(),\n    openAddPanel: () => openAddPanel(),\n  };\n}\n\nconst selectPanelGroupOrder = (state: DashboardStoreState): number[] => state.panelGroupOrder;\n/**\n * Returns an array of PanelGroupIds in the order they appear in the dashboard.\n */\nexport function usePanelGroupIds(): number[] {\n  return useDashboardStore(selectPanelGroupOrder);\n}\n\nconst selectPanelGroups: (state: DashboardStoreState) => Record<number, PanelGroupDefinition> = (\n  state: DashboardStoreState\n) => state.panelGroups;\n/**\n * Returns an array of PanelGroupDefinitions in the order they appear in the dashboard.\n */\nexport function useListPanelGroups(): PanelGroupDefinition[] {\n  const panelGroupIds = usePanelGroupIds();\n  const panelGroups = useDashboardStore(selectPanelGroups);\n  return useMemo(() => {\n    return panelGroupIds.map((id) => {\n      const group = panelGroups[id];\n      if (group === undefined) {\n        throw new Error(`Invalid panel group Id found ${id}`);\n      }\n      return group;\n    });\n  }, [panelGroupIds, panelGroups]);\n}\n\n/**\n * Gets a specific panel group by its id. Throws if the panel group does not exist.\n */\nexport function usePanelGroup(panelGroupId: PanelGroupId): PanelGroupDefinition {\n  const panelGroup = useDashboardStore(useCallback((state) => state.panelGroups[panelGroupId], [panelGroupId]));\n  if (panelGroup === undefined) {\n    throw new Error(`Panel group with Id ${panelGroupId} was not found`);\n  }\n  return panelGroup;\n}\n\nconst selectPanelGroupActions: ({\n  openEditPanelGroup,\n  deletePanelGroup,\n  openAddPanel,\n  updatePanelGroupLayouts,\n}: DashboardStoreState) => {\n  updatePanelGroupLayouts: (panelGroupId: PanelGroupId, itemLayouts: PanelGroupDefinition['itemLayouts']) => void;\n  openEditPanelGroup: (panelGroupId: PanelGroupId) => void;\n  openAddPanel: (panelGroupId?: PanelGroupId) => void;\n  deletePanelGroup: (panelGroupId: PanelGroupId) => void;\n} = ({ openEditPanelGroup, deletePanelGroup, openAddPanel, updatePanelGroupLayouts }: DashboardStoreState) => ({\n  openEditPanelGroup,\n  deletePanelGroup,\n  openAddPanel,\n  updatePanelGroupLayouts,\n});\n/**\n * Returns actions that can be performed on the given panel group.\n */\nexport function usePanelGroupActions(panelGroupId: PanelGroupId): {\n  updatePanelGroupLayouts: (itemLayouts: PanelGroupItemLayout[]) => void;\n  openEditPanelGroup: () => void;\n  openAddPanel: () => void;\n  moveDown: (() => void) | undefined;\n  deletePanelGroup: () => void;\n  moveUp: (() => void) | undefined;\n} {\n  const { moveUp, moveDown } = useMovePanelGroup(panelGroupId);\n  const { openEditPanelGroup, deletePanelGroup, openAddPanel, updatePanelGroupLayouts } =\n    useDashboardStore(selectPanelGroupActions);\n\n  return {\n    openEditPanelGroup: () => openEditPanelGroup(panelGroupId),\n    deletePanelGroup: () => deletePanelGroup(panelGroupId),\n    openAddPanel: () => openAddPanel(panelGroupId),\n    moveUp,\n    moveDown,\n    updatePanelGroupLayouts: (itemLayouts: PanelGroupItemLayout[]) =>\n      updatePanelGroupLayouts(panelGroupId, itemLayouts),\n  };\n}\n\nconst selectSwapPanelGroups: (state: DashboardStoreState) => (xIndex: number, yIndex: number) => void = (\n  state: DashboardStoreState\n) => state.swapPanelGroups;\nconst selectPanelGroupsLength: (state: DashboardStoreState) => number = (state: DashboardStoreState) =>\n  state.panelGroupOrder.length;\n/**\n * Returns functions for moving a panel group up or down. A function will be undefined if the panel group can't be\n * moved in that direction.\n */\nfunction useMovePanelGroup(panelGroupId: PanelGroupId): {\n  moveDown: (() => void) | undefined;\n  moveUp: (() => void) | undefined;\n} {\n  const currentIndex = useDashboardStore(\n    useCallback((store) => store.panelGroupOrder.findIndex((id) => id === panelGroupId), [panelGroupId])\n  );\n  const panelGroupsLength = useDashboardStore(selectPanelGroupsLength);\n  const swapPanelGroups = useDashboardStore(selectSwapPanelGroups);\n\n  if (currentIndex < 0) {\n    throw new Error(`Could not find panel group with Id ${panelGroupId} in order array`);\n  }\n\n  const moveUp: () => void = () => swapPanelGroups(currentIndex, currentIndex - 1);\n  const moveDown: () => void = () => swapPanelGroups(currentIndex, currentIndex + 1);\n  return {\n    moveUp: currentIndex > 0 ? moveUp : undefined,\n    moveDown: currentIndex < panelGroupsLength - 1 ? moveDown : undefined,\n  };\n}\n\nconst selectPanelGroupEditor: (state: DashboardStoreState) => PanelGroupEditor | undefined = (\n  state: DashboardStoreState\n) => state.panelGroupEditor;\n/**\n * Gets the Panel Group editor state.\n */\nexport function usePanelGroupEditor(): PanelGroupEditor | undefined {\n  return useDashboardStore(selectPanelGroupEditor);\n}\n\nconst selectDeletePanelGroupDialog: ({\n  deletePanelGroupDialog,\n  openDeletePanelGroupDialog,\n  closeDeletePanelGroupDialog,\n  deletePanelGroup,\n}: DashboardStoreState) => {\n  deletePanelGroupDialog: DeletePanelGroupDialogState | undefined;\n  closeDeletePanelGroupDialog: () => void;\n  openDeletePanelGroupDialog: (panelGroupId: PanelGroupId) => void;\n  deletePanelGroup: (panelGroupId: PanelGroupId) => void;\n} = ({\n  deletePanelGroupDialog,\n  openDeletePanelGroupDialog,\n  closeDeletePanelGroupDialog,\n  deletePanelGroup,\n}: DashboardStoreState) => ({\n  deletePanelGroupDialog,\n  openDeletePanelGroupDialog,\n  closeDeletePanelGroupDialog,\n  deletePanelGroup,\n});\n/**\n * Gets the Delete Panel Group dialog state.\n */\nexport function useDeletePanelGroupDialog(): {\n  deletePanelGroupDialog: DeletePanelGroupDialogState | undefined;\n  closeDeletePanelGroupDialog: () => void;\n  openDeletePanelGroupDialog: (panelGroupId: PanelGroupId) => void;\n  deletePanelGroup: (panelGroupId: PanelGroupId) => void;\n} {\n  const { deletePanelGroupDialog, openDeletePanelGroupDialog, closeDeletePanelGroupDialog, deletePanelGroup } =\n    useDashboardStore(selectDeletePanelGroupDialog);\n  return {\n    deletePanelGroupDialog,\n    deletePanelGroup,\n    openDeletePanelGroupDialog,\n    closeDeletePanelGroupDialog: () => closeDeletePanelGroupDialog(),\n  };\n}\n\n/**\n * Gets an individual panel in the store. Throws if the panel can't be found.\n */\nexport function usePanel(panelGroupItemId: PanelGroupItemId): PanelDefinition {\n  const { panelGroupId, panelGroupItemLayoutId: panelGroupLayoutId } = panelGroupItemId;\n  const panel = useDashboardStore(\n    useCallback(\n      (store) => {\n        const panelKey = store.panelGroups[panelGroupId]?.itemPanelKeys[panelGroupLayoutId];\n        if (panelKey === undefined) return;\n        return store.panels[panelKey];\n      },\n      [panelGroupId, panelGroupLayoutId]\n    )\n  );\n\n  if (panel === undefined) {\n    throw new Error(`Could not find panel for Id ${panelGroupItemId}`);\n  }\n  return panel;\n}\n\nconst selectPanelActions: ({\n  openEditPanel,\n  openDeletePanelDialog,\n  duplicatePanel,\n  setViewPanel,\n}: DashboardStoreState) => {\n  openDeletePanelDialog: (panelGroupItemId: PanelGroupItemId) => void;\n  duplicatePanel: (panelGroupItemId: PanelGroupItemId) => void;\n  openEditPanel: (panelGroupItemId: PanelGroupItemId) => void;\n  setViewPanel: (panelGroupItemId?: PanelGroupItemId) => void;\n} = ({ openEditPanel, openDeletePanelDialog, duplicatePanel, setViewPanel }: DashboardStoreState) => ({\n  openEditPanel,\n  openDeletePanelDialog,\n  duplicatePanel,\n  setViewPanel,\n});\n\n/**\n * Returns actions that can be performed on the given Panel.\n */\nexport function usePanelActions(panelGroupItemId: PanelGroupItemId): {\n  openDeletePanelDialog: () => void;\n  duplicatePanel: () => void;\n  openEditPanel: () => void;\n  viewPanel: (panelGroupItemId?: PanelGroupItemId) => void;\n} {\n  const { openEditPanel, openDeletePanelDialog, duplicatePanel, setViewPanel } = useDashboardStore(selectPanelActions);\n  return {\n    openEditPanel: () => openEditPanel(panelGroupItemId),\n    openDeletePanelDialog: () => openDeletePanelDialog(panelGroupItemId),\n    duplicatePanel: () => duplicatePanel(panelGroupItemId),\n    viewPanel: (panelGroupItemId?: PanelGroupItemId) => setViewPanel(panelGroupItemId),\n  };\n}\n\nconst selectPanelEditor: (state: DashboardStoreState) => PanelEditorState | undefined = (state: DashboardStoreState) =>\n  state.panelEditor;\n/**\n * Gets the state for the Panel Editor.\n */\nexport function usePanelEditor(): PanelEditorState | undefined {\n  return useDashboardStore(selectPanelEditor);\n}\n\nconst selectDeletePanelDialog: ({ deletePanelDialog, deletePanel, closeDeletePanelDialog }: DashboardStoreState) => {\n  deletePanelDialog: DeletePanelDialogState | undefined;\n  closeDeletePanelDialog: () => void;\n  deletePanel: (panelGroupItemId: PanelGroupItemId) => void;\n} = ({ deletePanelDialog, deletePanel, closeDeletePanelDialog }: DashboardStoreState) => ({\n  deletePanelDialog,\n  deletePanel,\n  closeDeletePanelDialog,\n});\n\n/**\n * Gets the state for the Delete Panel dialog.\n */\nexport function useDeletePanelDialog(): {\n  deletePanelDialog: DeletePanelDialogState | undefined;\n  closeDeletePanelDialog: () => void;\n  deletePanel: (panelGroupItemId: PanelGroupItemId) => void;\n} {\n  // TODO: Refactor similar to other dialogs/editors so these are on the editor state itself\n  return useDashboardStore(selectDeletePanelDialog);\n}\n\nconst selectDashboardDuration: (state: DashboardStoreState) => DurationString = (state: DashboardStoreState) =>\n  state.duration;\nexport function useDashboardDuration(): DurationString {\n  return useDashboardStore(selectDashboardDuration);\n}\n\nconst selectViewPanel: (state: DashboardStoreState) => {\n  setViewPanel: DashboardStoreState['setViewPanel'];\n  getViewPanel: DashboardStoreState['getViewPanel'];\n  viewPanelId: DashboardStoreState['viewPanel']['panelGroupItemId'];\n} = (state: DashboardStoreState) => ({\n  setViewPanel: state.setViewPanel,\n  getViewPanel: state.getViewPanel,\n  viewPanelId: state.getViewPanel(),\n});\n/**\n * Returns actions related to the ViewPanel.\n */\nexport function useViewPanel(): {\n  setViewPanel: ViewPanelSlice['setViewPanel'];\n  getViewPanel: ViewPanelSlice['getViewPanel'];\n  viewPanelId: ViewPanelSlice['viewPanel']['panelGroupItemId'];\n} {\n  return useDashboardStore(selectViewPanel);\n}\n\nconst selectViewPanelGroup: (state: DashboardStoreState) => PanelGroupItemId | undefined = (\n  state: DashboardStoreState\n) => state.getViewPanel();\n/**\n * Gets the Panel Group for the view panel.\n */\nexport function useViewPanelGroup(): PanelGroupItemId | undefined {\n  return useDashboardStore(selectViewPanelGroup);\n}\n\nconst selectSaveChangesConfirmationDialog: ({\n  saveChangesConfirmationDialog,\n  openSaveChangesConfirmationDialog,\n  closeSaveChangesConfirmationDialog,\n}: DashboardStoreState) => {\n  closeSaveChangesConfirmationDialog: () => void;\n  openSaveChangesConfirmationDialog: (saveChangesConfirmationDialog: SaveChangesConfirmationDialogState) => void;\n  saveChangesConfirmationDialog: SaveChangesConfirmationDialogState | undefined;\n} = ({\n  saveChangesConfirmationDialog,\n  openSaveChangesConfirmationDialog,\n  closeSaveChangesConfirmationDialog,\n}: DashboardStoreState) => ({\n  saveChangesConfirmationDialog,\n  openSaveChangesConfirmationDialog,\n  closeSaveChangesConfirmationDialog,\n});\nexport function useSaveChangesConfirmationDialog(): {\n  closeSaveChangesConfirmationDialog: () => void;\n  openSaveChangesConfirmationDialog: (saveChangesConfirmationDialog: SaveChangesConfirmationDialogState) => void;\n  saveChangesConfirmationDialog: SaveChangesConfirmationDialogState | undefined;\n} {\n  return useDashboardStore(selectSaveChangesConfirmationDialog);\n}\n\nconst selectDiscardChangesConfirmationDialog: ({\n  discardChangesConfirmationDialog,\n  openDiscardChangesConfirmationDialog,\n  closeDiscardChangesConfirmationDialog,\n}: DashboardStoreState) => {\n  discardChangesConfirmationDialog: DiscardChangesConfirmationDialogState | undefined;\n  closeDiscardChangesConfirmationDialog: () => void;\n  openDiscardChangesConfirmationDialog: (\n    discardChangesConfirmationDialog: DiscardChangesConfirmationDialogState\n  ) => void;\n} = ({\n  discardChangesConfirmationDialog,\n  openDiscardChangesConfirmationDialog,\n  closeDiscardChangesConfirmationDialog,\n}: DashboardStoreState) => ({\n  discardChangesConfirmationDialog,\n  openDiscardChangesConfirmationDialog,\n  closeDiscardChangesConfirmationDialog,\n});\nexport function useDiscardChangesConfirmationDialog(): {\n  discardChangesConfirmationDialog: DiscardChangesConfirmationDialogState | undefined;\n  closeDiscardChangesConfirmationDialog: () => void;\n  openDiscardChangesConfirmationDialog: (\n    discardChangesConfirmationDialog: DiscardChangesConfirmationDialogState\n  ) => void;\n} {\n  return useDashboardStore(selectDiscardChangesConfirmationDialog);\n}\n\nconst selectEditJsonDialog: ({ editJsonDialog, openEditJsonDialog, closeEditJsonDialog }: DashboardStoreState) => {\n  openEditJsonDialog: () => void;\n  closeEditJsonDialog: () => void;\n  editJsonDialog: EditJsonDialogState | undefined;\n} = ({ editJsonDialog, openEditJsonDialog, closeEditJsonDialog }: DashboardStoreState) => ({\n  editJsonDialog,\n  openEditJsonDialog,\n  closeEditJsonDialog,\n});\n/**\n * Gets the state for the edit JSON dialog.\n */\nexport function useEditJsonDialog(): {\n  openEditJsonDialog: () => void;\n  closeEditJsonDialog: () => void;\n  editJsonDialog: EditJsonDialogState | undefined;\n} {\n  return useDashboardStore(selectEditJsonDialog);\n}\n"],"names":["useCallback","useMemo","useDashboardStore","selectEditMode","isEditMode","setEditMode","useEditMode","selectDashboardActions","setDashboard","openAddPanelGroup","openAddPanel","useDashboardActions","selectPanelGroupOrder","state","panelGroupOrder","usePanelGroupIds","selectPanelGroups","panelGroups","useListPanelGroups","panelGroupIds","map","id","group","undefined","Error","usePanelGroup","panelGroupId","panelGroup","selectPanelGroupActions","openEditPanelGroup","deletePanelGroup","updatePanelGroupLayouts","usePanelGroupActions","moveUp","moveDown","useMovePanelGroup","itemLayouts","selectSwapPanelGroups","swapPanelGroups","selectPanelGroupsLength","length","currentIndex","store","findIndex","panelGroupsLength","selectPanelGroupEditor","panelGroupEditor","usePanelGroupEditor","selectDeletePanelGroupDialog","deletePanelGroupDialog","openDeletePanelGroupDialog","closeDeletePanelGroupDialog","useDeletePanelGroupDialog","usePanel","panelGroupItemId","panelGroupItemLayoutId","panelGroupLayoutId","panel","panelKey","itemPanelKeys","panels","selectPanelActions","openEditPanel","openDeletePanelDialog","duplicatePanel","setViewPanel","usePanelActions","viewPanel","selectPanelEditor","panelEditor","usePanelEditor","selectDeletePanelDialog","deletePanelDialog","deletePanel","closeDeletePanelDialog","useDeletePanelDialog","selectDashboardDuration","duration","useDashboardDuration","selectViewPanel","getViewPanel","viewPanelId","useViewPanel","selectViewPanelGroup","useViewPanelGroup","selectSaveChangesConfirmationDialog","saveChangesConfirmationDialog","openSaveChangesConfirmationDialog","closeSaveChangesConfirmationDialog","useSaveChangesConfirmationDialog","selectDiscardChangesConfirmationDialog","discardChangesConfirmationDialog","openDiscardChangesConfirmationDialog","closeDiscardChangesConfirmationDialog","useDiscardChangesConfirmationDialog","selectEditJsonDialog","editJsonDialog","openEditJsonDialog","closeEditJsonDialog","useEditJsonDialog"],"mappings":"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"}

package/dist/context/DashboardProvider/delete-panel-slice.d.ts

@@ -1,6 +1,7 @@
 import { StateCreator } from 'zustand';
+import { PanelGroupItemId } from '@perses-dev/core';
 import { Middleware } from './common';
-import { PanelGroupSlice, PanelGroupItemId } from './panel-group-slice';
+import { PanelGroupSlice } from './panel-group-slice';
 import { PanelSlice } from './panel-slice';
 /**
  * Slice that handles the visual editor state and actions for deleting Panels.

package/dist/context/DashboardProvider/delete-panel-slice.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"delete-panel-slice.d.ts","sourceRoot":"","sources":["../../../src/context/DashboardProvider/delete-panel-slice.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AACxE,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B;;OAEG;IACH,WAAW,EAAE,CAAC,gBAAgB,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAE1D;;OAEG;IACH,iBAAiB,CAAC,EAAE,sBAAsB,CAAC;IAE3C;;OAEG;IACH,qBAAqB,EAAE,CAAC,gBAAgB,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAEpE;;OAEG;IACH,sBAAsB,EAAE,MAAM,IAAI,CAAC;CACpC;AAED,MAAM,WAAW,sBAAsB;IACrC,gBAAgB,EAAE,gBAAgB,CAAC;IACnC,SAAS,EAAE,MAAM,CAAC;IAClB,cAAc,EAAE,MAAM,CAAC;CACxB;AAED;;GAEG;AACH,wBAAgB,sBAAsB,IAAI,YAAY,CAEpD,gBAAgB,GAAG,UAAU,GAAG,eAAe,EAC/C,UAAU,EACV;CAAE,EACF,gBAAgB,CACjB,CA6DA"}
+{"version":3,"file":"delete-panel-slice.d.ts","sourceRoot":"","sources":["../../../src/context/DashboardProvider/delete-panel-slice.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AACvC,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B;;OAEG;IACH,WAAW,EAAE,CAAC,gBAAgB,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAE1D;;OAEG;IACH,iBAAiB,CAAC,EAAE,sBAAsB,CAAC;IAE3C;;OAEG;IACH,qBAAqB,EAAE,CAAC,gBAAgB,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAEpE;;OAEG;IACH,sBAAsB,EAAE,MAAM,IAAI,CAAC;CACpC;AAED,MAAM,WAAW,sBAAsB;IACrC,gBAAgB,EAAE,gBAAgB,CAAC;IACnC,SAAS,EAAE,MAAM,CAAC;IAClB,cAAc,EAAE,MAAM,CAAC;CACxB;AAED;;GAEG;AACH,wBAAgB,sBAAsB,IAAI,YAAY,CAEpD,gBAAgB,GAAG,UAAU,GAAG,eAAe,EAC/C,UAAU,EACV;CAAE,EACF,gBAAgB,CACjB,CA6DA"}

package/dist/context/DashboardProvider/delete-panel-slice.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 2025 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

package/dist/context/DashboardProvider/delete-panel-slice.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/context/DashboardProvider/delete-panel-slice.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { StateCreator } from 'zustand';\nimport { Middleware } from './common';\nimport { PanelGroupSlice, PanelGroupItemId } from './panel-group-slice';\nimport { PanelSlice } from './panel-slice';\n\n/**\n * Slice that handles the visual editor state and actions for deleting Panels.\n */\nexport interface DeletePanelSlice {\n  /**\n   * Delete panels\n   */\n  deletePanel: (panelGroupItemId: PanelGroupItemId) => void;\n\n  /**\n   * State for the delete panel dialog when it's open, otherwise undefined when it's closed.\n   */\n  deletePanelDialog?: DeletePanelDialogState;\n\n  /**\n   * Open delete panel dialog\n   */\n  openDeletePanelDialog: (panelGroupItemId: PanelGroupItemId) => void;\n\n  /**\n   * Close delete panel dialog\n   */\n  closeDeletePanelDialog: () => void;\n}\n\nexport interface DeletePanelDialogState {\n  panelGroupItemId: PanelGroupItemId;\n  panelName: string;\n  panelGroupName: string;\n}\n\n/**\n * Curried function for creating the PanelDeleteSlice.\n */\nexport function createDeletePanelSlice(): StateCreator<\n  // Actions in here need to modify both Panels and Panel Groups state\n  DeletePanelSlice & PanelSlice & PanelGroupSlice,\n  Middleware,\n  [],\n  DeletePanelSlice\n> {\n  // Return the state creator function for Zustand that uses the panels provided as intitial state\n  return (set, get) => ({\n    deletePanel(panelGroupItemId: PanelGroupItemId): void {\n      set((draft) => {\n        const { panelGroupId, panelGroupItemLayoutId: panelGroupLayoutId } = panelGroupItemId;\n        const existingGroup = draft.panelGroups[panelGroupId];\n        if (existingGroup === undefined) {\n          throw new Error(`Missing panel group ${panelGroupId}`);\n        }\n        const existingLayoutIdx = existingGroup.itemLayouts.findIndex((layout) => layout.i === panelGroupLayoutId);\n        const existingPanelKey = existingGroup.itemPanelKeys[panelGroupLayoutId];\n        if (existingLayoutIdx === -1 || existingPanelKey === undefined) {\n          throw new Error(`Missing panel group item ${panelGroupLayoutId}`);\n        }\n\n        // remove panel from panel group\n        existingGroup.itemLayouts.splice(existingLayoutIdx, 1);\n        delete existingGroup.itemPanelKeys[panelGroupLayoutId];\n\n        // See if panel key is still used and if not, delete it\n        if (isPanelKeyStillUsed(draft.panelGroups, existingPanelKey) === false) {\n          delete draft.panels[existingPanelKey];\n        }\n      });\n    },\n\n    openDeletePanelDialog(panelGroupItemId: PanelGroupItemId): void {\n      const { panelGroupId, panelGroupItemLayoutId: panelGroupLayoutId } = panelGroupItemId;\n\n      const { panels, panelGroups } = get();\n      const panelGroup = panelGroups[panelGroupId];\n      if (panelGroup === undefined) {\n        throw new Error(`Panel group not found ${panelGroupId}`);\n      }\n\n      const panelKey = panelGroup.itemPanelKeys[panelGroupLayoutId];\n      if (panelKey === undefined) {\n        throw new Error(`Could not find Panel Group item ${panelGroupLayoutId}`);\n      }\n\n      const panel = panels[panelKey];\n      if (panel === undefined) {\n        throw new Error(`Could not find panel ${panelKey}`);\n      }\n\n      set((state) => {\n        state.deletePanelDialog = {\n          panelGroupItemId: panelGroupItemId,\n          panelName: panel.spec.display.name,\n          panelGroupName: panelGroup.title ?? '',\n        };\n      });\n    },\n\n    closeDeletePanelDialog(): void {\n      set((state) => {\n        state.deletePanelDialog = undefined;\n      });\n    },\n  });\n}\n\n// Helper function to determine if a panel key is still being used somewhere in Panel Groups\nfunction isPanelKeyStillUsed(panelGroups: PanelGroupSlice['panelGroups'], panelKey: string): boolean {\n  for (const group of Object.values(panelGroups)) {\n    const found = Object.values(group.itemPanelKeys).find((key) => key === panelKey);\n    if (found !== undefined) {\n      return true;\n    }\n  }\n  return false;\n}\n"],"names":["createDeletePanelSlice","set","get","deletePanel","panelGroupItemId","draft","panelGroupId","panelGroupItemLayoutId","panelGroupLayoutId","existingGroup","panelGroups","undefined","Error","existingLayoutIdx","itemLayouts","findIndex","layout","i","existingPanelKey","itemPanelKeys","splice","isPanelKeyStillUsed","panels","openDeletePanelDialog","panelGroup","panelKey","panel","state","deletePanelDialog","panelName","spec","display","name","panelGroupName","title","closeDeletePanelDialog","group","Object","values","found","find","key"],"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;AAsCjC;;CAEC,GACD,OAAO,SAASA;IAOd,gGAAgG;IAChG,OAAO,CAACC,KAAKC,MAAS,CAAA;YACpBC,aAAYC,gBAAkC;gBAC5CH,IAAI,CAACI;oBACH,MAAM,EAAEC,YAAY,EAAEC,wBAAwBC,kBAAkB,EAAE,GAAGJ;oBACrE,MAAMK,gBAAgBJ,MAAMK,WAAW,CAACJ,aAAa;oBACrD,IAAIG,kBAAkBE,WAAW;wBAC/B,MAAM,IAAIC,MAAM,CAAC,oBAAoB,EAAEN,cAAc;oBACvD;oBACA,MAAMO,oBAAoBJ,cAAcK,WAAW,CAACC,SAAS,CAAC,CAACC,SAAWA,OAAOC,CAAC,KAAKT;oBACvF,MAAMU,mBAAmBT,cAAcU,aAAa,CAACX,mBAAmB;oBACxE,IAAIK,sBAAsB,CAAC,KAAKK,qBAAqBP,WAAW;wBAC9D,MAAM,IAAIC,MAAM,CAAC,yBAAyB,EAAEJ,oBAAoB;oBAClE;oBAEA,gCAAgC;oBAChCC,cAAcK,WAAW,CAACM,MAAM,CAACP,mBAAmB;oBACpD,OAAOJ,cAAcU,aAAa,CAACX,mBAAmB;oBAEtD,uDAAuD;oBACvD,IAAIa,oBAAoBhB,MAAMK,WAAW,EAAEQ,sBAAsB,OAAO;wBACtE,OAAOb,MAAMiB,MAAM,CAACJ,iBAAiB;oBACvC;gBACF;YACF;YAEAK,uBAAsBnB,gBAAkC;gBACtD,MAAM,EAAEE,YAAY,EAAEC,wBAAwBC,kBAAkB,EAAE,GAAGJ;gBAErE,MAAM,EAAEkB,MAAM,EAAEZ,WAAW,EAAE,GAAGR;gBAChC,MAAMsB,aAAad,WAAW,CAACJ,aAAa;gBAC5C,IAAIkB,eAAeb,WAAW;oBAC5B,MAAM,IAAIC,MAAM,CAAC,sBAAsB,EAAEN,cAAc;gBACzD;gBAEA,MAAMmB,WAAWD,WAAWL,aAAa,CAACX,mBAAmB;gBAC7D,IAAIiB,aAAad,WAAW;oBAC1B,MAAM,IAAIC,MAAM,CAAC,gCAAgC,EAAEJ,oBAAoB;gBACzE;gBAEA,MAAMkB,QAAQJ,MAAM,CAACG,SAAS;gBAC9B,IAAIC,UAAUf,WAAW;oBACvB,MAAM,IAAIC,MAAM,CAAC,qBAAqB,EAAEa,UAAU;gBACpD;gBAEAxB,IAAI,CAAC0B;oBACHA,MAAMC,iBAAiB,GAAG;wBACxBxB,kBAAkBA;wBAClByB,WAAWH,MAAMI,IAAI,CAACC,OAAO,CAACC,IAAI;wBAClCC,gBAAgBT,WAAWU,KAAK,IAAI;oBACtC;gBACF;YACF;YAEAC;gBACElC,IAAI,CAAC0B;oBACHA,MAAMC,iBAAiB,GAAGjB;gBAC5B;YACF;QACF,CAAA;AACF;AAEA,4FAA4F;AAC5F,SAASU,oBAAoBX,WAA2C,EAAEe,QAAgB;IACxF,KAAK,MAAMW,SAASC,OAAOC,MAAM,CAAC5B,aAAc;QAC9C,MAAM6B,QAAQF,OAAOC,MAAM,CAACF,MAAMjB,aAAa,EAAEqB,IAAI,CAAC,CAACC,MAAQA,QAAQhB;QACvE,IAAIc,UAAU5B,WAAW;YACvB,OAAO;QACT;IACF;IACA,OAAO;AACT"}
+{"version":3,"sources":["../../../src/context/DashboardProvider/delete-panel-slice.ts"],"sourcesContent":["// Copyright 2025 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 { StateCreator } from 'zustand';\nimport { PanelGroupItemId } from '@perses-dev/core';\nimport { Middleware } from './common';\nimport { PanelGroupSlice } from './panel-group-slice';\nimport { PanelSlice } from './panel-slice';\n\n/**\n * Slice that handles the visual editor state and actions for deleting Panels.\n */\nexport interface DeletePanelSlice {\n  /**\n   * Delete panels\n   */\n  deletePanel: (panelGroupItemId: PanelGroupItemId) => void;\n\n  /**\n   * State for the delete panel dialog when it's open, otherwise undefined when it's closed.\n   */\n  deletePanelDialog?: DeletePanelDialogState;\n\n  /**\n   * Open delete panel dialog\n   */\n  openDeletePanelDialog: (panelGroupItemId: PanelGroupItemId) => void;\n\n  /**\n   * Close delete panel dialog\n   */\n  closeDeletePanelDialog: () => void;\n}\n\nexport interface DeletePanelDialogState {\n  panelGroupItemId: PanelGroupItemId;\n  panelName: string;\n  panelGroupName: string;\n}\n\n/**\n * Curried function for creating the PanelDeleteSlice.\n */\nexport function createDeletePanelSlice(): StateCreator<\n  // Actions in here need to modify both Panels and Panel Groups state\n  DeletePanelSlice & PanelSlice & PanelGroupSlice,\n  Middleware,\n  [],\n  DeletePanelSlice\n> {\n  // Return the state creator function for Zustand that uses the panels provided as intitial state\n  return (set, get) => ({\n    deletePanel(panelGroupItemId: PanelGroupItemId): void {\n      set((draft) => {\n        const { panelGroupId, panelGroupItemLayoutId: panelGroupLayoutId } = panelGroupItemId;\n        const existingGroup = draft.panelGroups[panelGroupId];\n        if (existingGroup === undefined) {\n          throw new Error(`Missing panel group ${panelGroupId}`);\n        }\n        const existingLayoutIdx = existingGroup.itemLayouts.findIndex((layout) => layout.i === panelGroupLayoutId);\n        const existingPanelKey = existingGroup.itemPanelKeys[panelGroupLayoutId];\n        if (existingLayoutIdx === -1 || existingPanelKey === undefined) {\n          throw new Error(`Missing panel group item ${panelGroupLayoutId}`);\n        }\n\n        // remove panel from panel group\n        existingGroup.itemLayouts.splice(existingLayoutIdx, 1);\n        delete existingGroup.itemPanelKeys[panelGroupLayoutId];\n\n        // See if panel key is still used and if not, delete it\n        if (isPanelKeyStillUsed(draft.panelGroups, existingPanelKey) === false) {\n          delete draft.panels[existingPanelKey];\n        }\n      });\n    },\n\n    openDeletePanelDialog(panelGroupItemId: PanelGroupItemId): void {\n      const { panelGroupId, panelGroupItemLayoutId: panelGroupLayoutId } = panelGroupItemId;\n\n      const { panels, panelGroups } = get();\n      const panelGroup = panelGroups[panelGroupId];\n      if (panelGroup === undefined) {\n        throw new Error(`Panel group not found ${panelGroupId}`);\n      }\n\n      const panelKey = panelGroup.itemPanelKeys[panelGroupLayoutId];\n      if (panelKey === undefined) {\n        throw new Error(`Could not find Panel Group item ${panelGroupLayoutId}`);\n      }\n\n      const panel = panels[panelKey];\n      if (panel === undefined) {\n        throw new Error(`Could not find panel ${panelKey}`);\n      }\n\n      set((state) => {\n        state.deletePanelDialog = {\n          panelGroupItemId: panelGroupItemId,\n          panelName: panel.spec.display.name,\n          panelGroupName: panelGroup.title ?? '',\n        };\n      });\n    },\n\n    closeDeletePanelDialog(): void {\n      set((state) => {\n        state.deletePanelDialog = undefined;\n      });\n    },\n  });\n}\n\n// Helper function to determine if a panel key is still being used somewhere in Panel Groups\nfunction isPanelKeyStillUsed(panelGroups: PanelGroupSlice['panelGroups'], panelKey: string): boolean {\n  for (const group of Object.values(panelGroups)) {\n    const found = Object.values(group.itemPanelKeys).find((key) => key === panelKey);\n    if (found !== undefined) {\n      return true;\n    }\n  }\n  return false;\n}\n"],"names":["createDeletePanelSlice","set","get","deletePanel","panelGroupItemId","draft","panelGroupId","panelGroupItemLayoutId","panelGroupLayoutId","existingGroup","panelGroups","undefined","Error","existingLayoutIdx","itemLayouts","findIndex","layout","i","existingPanelKey","itemPanelKeys","splice","isPanelKeyStillUsed","panels","openDeletePanelDialog","panelGroup","panelKey","panel","state","deletePanelDialog","panelName","spec","display","name","panelGroupName","title","closeDeletePanelDialog","group","Object","values","found","find","key"],"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;AAuCjC;;CAEC,GACD,OAAO,SAASA;IAOd,gGAAgG;IAChG,OAAO,CAACC,KAAKC,MAAS,CAAA;YACpBC,aAAYC,gBAAkC;gBAC5CH,IAAI,CAACI;oBACH,MAAM,EAAEC,YAAY,EAAEC,wBAAwBC,kBAAkB,EAAE,GAAGJ;oBACrE,MAAMK,gBAAgBJ,MAAMK,WAAW,CAACJ,aAAa;oBACrD,IAAIG,kBAAkBE,WAAW;wBAC/B,MAAM,IAAIC,MAAM,CAAC,oBAAoB,EAAEN,cAAc;oBACvD;oBACA,MAAMO,oBAAoBJ,cAAcK,WAAW,CAACC,SAAS,CAAC,CAACC,SAAWA,OAAOC,CAAC,KAAKT;oBACvF,MAAMU,mBAAmBT,cAAcU,aAAa,CAACX,mBAAmB;oBACxE,IAAIK,sBAAsB,CAAC,KAAKK,qBAAqBP,WAAW;wBAC9D,MAAM,IAAIC,MAAM,CAAC,yBAAyB,EAAEJ,oBAAoB;oBAClE;oBAEA,gCAAgC;oBAChCC,cAAcK,WAAW,CAACM,MAAM,CAACP,mBAAmB;oBACpD,OAAOJ,cAAcU,aAAa,CAACX,mBAAmB;oBAEtD,uDAAuD;oBACvD,IAAIa,oBAAoBhB,MAAMK,WAAW,EAAEQ,sBAAsB,OAAO;wBACtE,OAAOb,MAAMiB,MAAM,CAACJ,iBAAiB;oBACvC;gBACF;YACF;YAEAK,uBAAsBnB,gBAAkC;gBACtD,MAAM,EAAEE,YAAY,EAAEC,wBAAwBC,kBAAkB,EAAE,GAAGJ;gBAErE,MAAM,EAAEkB,MAAM,EAAEZ,WAAW,EAAE,GAAGR;gBAChC,MAAMsB,aAAad,WAAW,CAACJ,aAAa;gBAC5C,IAAIkB,eAAeb,WAAW;oBAC5B,MAAM,IAAIC,MAAM,CAAC,sBAAsB,EAAEN,cAAc;gBACzD;gBAEA,MAAMmB,WAAWD,WAAWL,aAAa,CAACX,mBAAmB;gBAC7D,IAAIiB,aAAad,WAAW;oBAC1B,MAAM,IAAIC,MAAM,CAAC,gCAAgC,EAAEJ,oBAAoB;gBACzE;gBAEA,MAAMkB,QAAQJ,MAAM,CAACG,SAAS;gBAC9B,IAAIC,UAAUf,WAAW;oBACvB,MAAM,IAAIC,MAAM,CAAC,qBAAqB,EAAEa,UAAU;gBACpD;gBAEAxB,IAAI,CAAC0B;oBACHA,MAAMC,iBAAiB,GAAG;wBACxBxB,kBAAkBA;wBAClByB,WAAWH,MAAMI,IAAI,CAACC,OAAO,CAACC,IAAI;wBAClCC,gBAAgBT,WAAWU,KAAK,IAAI;oBACtC;gBACF;YACF;YAEAC;gBACElC,IAAI,CAAC0B;oBACHA,MAAMC,iBAAiB,GAAGjB;gBAC5B;YACF;QACF,CAAA;AACF;AAEA,4FAA4F;AAC5F,SAASU,oBAAoBX,WAA2C,EAAEe,QAAgB;IACxF,KAAK,MAAMW,SAASC,OAAOC,MAAM,CAAC5B,aAAc;QAC9C,MAAM6B,QAAQF,OAAOC,MAAM,CAACF,MAAMjB,aAAa,EAAEqB,IAAI,CAAC,CAACC,MAAQA,QAAQhB;QACvE,IAAIc,UAAU5B,WAAW;YACvB,OAAO;QACT;IACF;IACA,OAAO;AACT"}

package/dist/context/DashboardProvider/duplicate-panel-slice.d.ts

@@ -1,6 +1,7 @@
 import { StateCreator } from 'zustand';
+import { PanelGroupItemId } from '@perses-dev/core';
 import { Middleware } from './common';
-import { PanelGroupSlice, PanelGroupItemId } from './panel-group-slice';
+import { PanelGroupSlice } from './panel-group-slice';
 import { PanelSlice } from './panel-slice';
 /**
  * Slice that handles duplicating Panels.

package/dist/context/DashboardProvider/duplicate-panel-slice.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"duplicate-panel-slice.d.ts","sourceRoot":"","sources":["../../../src/context/DashboardProvider/duplicate-panel-slice.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEvC,OAAO,EAAc,UAAU,EAAE,MAAM,UAAU,CAAC;AAClD,OAAO,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AACxE,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC;;OAEG;IACH,cAAc,EAAE,CAAC,gBAAgB,EAAE,gBAAgB,KAAK,IAAI,CAAC;CAC9D;AAED;;GAEG;AACH,wBAAgB,yBAAyB,IAAI,YAAY,CAEvD,mBAAmB,GAAG,UAAU,GAAG,eAAe,EAClD,UAAU,EACV;CAAE,EACF,mBAAmB,CACpB,CAgDA"}
+{"version":3,"file":"duplicate-panel-slice.d.ts","sourceRoot":"","sources":["../../../src/context/DashboardProvider/duplicate-panel-slice.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AACvC,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAEpD,OAAO,EAAc,UAAU,EAAE,MAAM,UAAU,CAAC;AAClD,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC;;OAEG;IACH,cAAc,EAAE,CAAC,gBAAgB,EAAE,gBAAgB,KAAK,IAAI,CAAC;CAC9D;AAED;;GAEG;AACH,wBAAgB,yBAAyB,IAAI,YAAY,CAEvD,mBAAmB,GAAG,UAAU,GAAG,eAAe,EAClD,UAAU,EACV;CAAE,EACF,mBAAmB,CACpB,CAgDA"}

package/dist/context/DashboardProvider/duplicate-panel-slice.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 2025 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