@perses-dev/plugin-system 0.53.1 → 0.54.0-beta.1

package/dist/components/MultiQueryEditor/MultiQueryEditor.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/MultiQueryEditor/MultiQueryEditor.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { forwardRef, ReactElement, useState } from 'react';\nimport { produce } from 'immer';\nimport { Button, Stack } from '@mui/material';\nimport AddIcon from 'mdi-material-ui/Plus';\nimport { QueryDefinition, QueryPluginType } from '@perses-dev/core';\nimport { QueryData, useListPluginMetadata, usePlugin, usePluginRegistry } from '../../runtime';\nimport { PluginEditorRef } from '../PluginEditor';\nimport { QueryEditorContainer } from './QueryEditorContainer';\n\nexport interface MultiQueryEditorProps {\n  queryTypes: QueryPluginType[];\n  filteredQueryPlugins?: string[];\n  queries?: QueryDefinition[];\n  queryResults?: QueryData[];\n  onChange: (queries: QueryDefinition[]) => void;\n  onQueryRun: (index: number, query: QueryDefinition) => void;\n}\n\nfunction useDefaultQueryDefinition(\n  queryTypes: QueryPluginType[],\n  filteredQueryPlugins?: string[]\n): {\n  defaultInitialQueryDefinition: QueryDefinition;\n  isLoading: boolean;\n} {\n  // Build the default query plugin\n  // This will be used only if the queries are empty, to open a starting query\n\n  // Firs the default query type\n  const defaultQueryType = queryTypes[0]!;\n  // Then the default plugin kind\n  // Use as default the plugin kind explicitly set as default or the first in the list\n  const { data: queryPlugins, isLoading } = useListPluginMetadata(queryTypes);\n  const { defaultPluginKinds } = usePluginRegistry();\n\n  let defaultQueryKind: string = '';\n\n  if (filteredQueryPlugins?.length) {\n    defaultQueryKind = queryPlugins?.find((i) => filteredQueryPlugins.includes(i.spec.name))!.spec.name ?? '';\n  } else {\n    defaultQueryKind = defaultPluginKinds?.[defaultQueryType] ?? queryPlugins?.[0]?.spec.name ?? '';\n  }\n\n  const { data: defaultQueryPlugin } = usePlugin(defaultQueryType, defaultQueryKind, {\n    useErrorBoundary: true,\n    enabled: true,\n  });\n\n  // This default query definition is used if no query is provided initially or when we add a new query\n  return {\n    defaultInitialQueryDefinition: {\n      kind: defaultQueryType,\n      spec: {\n        plugin: { kind: defaultQueryKind, spec: defaultQueryPlugin?.createInitialOptions() || {} },\n      },\n    },\n    isLoading,\n  };\n}\n\n/**\n * A component render a list of {@link QueryEditorContainer} for the given query definitions.\n * It allows adding, removing and editing queries.\n * @param queryTypes The list of query types that the underlying editor will propose\n * @param queries The list of query definitions to render\n * @param onChange The callback to call when the queries are modified\n * @constructor\n */\n\nexport const MultiQueryEditor = forwardRef<PluginEditorRef, MultiQueryEditorProps>((props, ref): ReactElement => {\n  const { queryTypes, queries = [], queryResults, filteredQueryPlugins, onChange, onQueryRun } = props;\n  const { defaultInitialQueryDefinition, isLoading } = useDefaultQueryDefinition(queryTypes, filteredQueryPlugins);\n  // State for which queries are collapsed\n  const [queriesCollapsed, setQueriesCollapsed] = useState(queries.map(() => false));\n\n  // Query handlers\n  const handleQueryChange = (index: number, queryDef: QueryDefinition): void => {\n    onChange(\n      produce(queries, (draft) => {\n        if (draft) {\n          draft[index] = queryDef;\n        } else {\n          draft = [queryDef];\n        }\n      })\n    );\n  };\n\n  const handleQueryRun = (index: number, queryDef: QueryDefinition): void => {\n    onQueryRun(index, queryDef);\n  };\n\n  const handleQueryAdd = (): void => {\n    onChange(\n      produce(queries, (draft) => {\n        if (draft) {\n          draft.push(defaultInitialQueryDefinition);\n        } else {\n          draft = [...queries, defaultInitialQueryDefinition];\n        }\n      })\n    );\n    setQueriesCollapsed((queriesCollapsed) => {\n      queriesCollapsed.push(false);\n      return [...queriesCollapsed];\n    });\n  };\n\n  const handleQueryDelete = (index: number): void => {\n    onChange(\n      produce(queries, (draft) => {\n        draft.splice(index, 1);\n      })\n    );\n    setQueriesCollapsed((queriesCollapsed) => {\n      queriesCollapsed.splice(index, 1);\n      return [...queriesCollapsed];\n    });\n  };\n\n  const handleQueryCollapseExpand = (index: number): void => {\n    setQueriesCollapsed((queriesCollapsed) => {\n      queriesCollapsed[index] = !queriesCollapsed[index];\n      return [...queriesCollapsed];\n    });\n  };\n\n  // show one query input if queries is empty\n  const queryDefinitions: QueryDefinition[] = queries.length\n    ? queries\n    : !isLoading\n      ? [defaultInitialQueryDefinition]\n      : [];\n\n  return (\n    <>\n      <Stack spacing={1}>\n        {queryDefinitions.map((query: QueryDefinition, i: number) => (\n          <QueryEditorContainer\n            ref={ref}\n            queryTypes={queryTypes}\n            key={i}\n            index={i}\n            query={query}\n            queryResult={queryResults?.[i]}\n            filteredQueryPlugins={filteredQueryPlugins}\n            isCollapsed={!!queriesCollapsed[i]}\n            onChange={handleQueryChange}\n            onQueryRun={handleQueryRun}\n            onDelete={queries.length > 1 ? handleQueryDelete : undefined}\n            onCollapseExpand={handleQueryCollapseExpand}\n          />\n        ))}\n      </Stack>\n      <Button variant=\"contained\" startIcon={<AddIcon />} sx={{ marginTop: 1 }} onClick={handleQueryAdd}>\n        Add Query\n      </Button>\n    </>\n  );\n});\n\nMultiQueryEditor.displayName = 'MultiQueryEditor';\n"],"names":["forwardRef","useState","produce","Button","Stack","AddIcon","useListPluginMetadata","usePlugin","usePluginRegistry","QueryEditorContainer","useDefaultQueryDefinition","queryTypes","filteredQueryPlugins","defaultQueryType","data","queryPlugins","isLoading","defaultPluginKinds","defaultQueryKind","length","find","i","includes","spec","name","defaultQueryPlugin","useErrorBoundary","enabled","defaultInitialQueryDefinition","kind","plugin","createInitialOptions","MultiQueryEditor","props","ref","queries","queryResults","onChange","onQueryRun","queriesCollapsed","setQueriesCollapsed","map","handleQueryChange","index","queryDef","draft","handleQueryRun","handleQueryAdd","push","handleQueryDelete","splice","handleQueryCollapseExpand","queryDefinitions","spacing","query","queryResult","isCollapsed","onDelete","undefined","onCollapseExpand","variant","startIcon","sx","marginTop","onClick","displayName"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/MultiQueryEditor/MultiQueryEditor.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { forwardRef, ReactElement, useState } from 'react';\nimport { produce } from 'immer';\nimport { Button, Stack } from '@mui/material';\nimport AddIcon from 'mdi-material-ui/Plus';\nimport { QueryDefinition, QueryPluginType } from '@perses-dev/spec';\nimport { QueryData, useListPluginMetadata, usePlugin, usePluginRegistry } from '../../runtime';\nimport { PluginEditorRef } from '../PluginEditor';\nimport { QueryEditorContainer } from './QueryEditorContainer';\n\nexport interface MultiQueryEditorProps {\n  queryTypes: QueryPluginType[];\n  filteredQueryPlugins?: string[];\n  queries?: QueryDefinition[];\n  queryResults?: QueryData[];\n  onChange: (queries: QueryDefinition[]) => void;\n  onQueryRun: (index: number, query: QueryDefinition) => void;\n}\n\nfunction useDefaultQueryDefinition(\n  queryTypes: QueryPluginType[],\n  filteredQueryPlugins?: string[]\n): {\n  defaultInitialQueryDefinition: QueryDefinition;\n  isLoading: boolean;\n} {\n  // Build the default query plugin\n  // This will be used only if the queries are empty, to open a starting query\n\n  // Firs the default query type\n  const defaultQueryType = queryTypes[0]!;\n  // Then the default plugin kind\n  // Use as default the plugin kind explicitly set as default or the first in the list\n  const { data: queryPlugins, isLoading } = useListPluginMetadata(queryTypes);\n  const { defaultPluginKinds } = usePluginRegistry();\n\n  let defaultQueryKind: string = '';\n\n  if (filteredQueryPlugins?.length) {\n    defaultQueryKind = queryPlugins?.find((i) => filteredQueryPlugins.includes(i.spec.name))!.spec.name ?? '';\n  } else {\n    defaultQueryKind = defaultPluginKinds?.[defaultQueryType] ?? queryPlugins?.[0]?.spec.name ?? '';\n  }\n\n  const { data: defaultQueryPlugin } = usePlugin(defaultQueryType, defaultQueryKind, {\n    useErrorBoundary: true,\n    enabled: true,\n  });\n\n  // This default query definition is used if no query is provided initially or when we add a new query\n  return {\n    defaultInitialQueryDefinition: {\n      kind: defaultQueryType,\n      spec: {\n        plugin: { kind: defaultQueryKind, spec: defaultQueryPlugin?.createInitialOptions() || {} },\n      },\n    },\n    isLoading,\n  };\n}\n\n/**\n * A component render a list of {@link QueryEditorContainer} for the given query definitions.\n * It allows adding, removing and editing queries.\n * @param queryTypes The list of query types that the underlying editor will propose\n * @param queries The list of query definitions to render\n * @param onChange The callback to call when the queries are modified\n * @constructor\n */\n\nexport const MultiQueryEditor = forwardRef<PluginEditorRef, MultiQueryEditorProps>((props, ref): ReactElement => {\n  const { queryTypes, queries = [], queryResults, filteredQueryPlugins, onChange, onQueryRun } = props;\n  const { defaultInitialQueryDefinition, isLoading } = useDefaultQueryDefinition(queryTypes, filteredQueryPlugins);\n  // State for which queries are collapsed\n  const [queriesCollapsed, setQueriesCollapsed] = useState(queries.map(() => false));\n\n  // Query handlers\n  const handleQueryChange = (index: number, queryDef: QueryDefinition): void => {\n    onChange(\n      produce(queries, (draft) => {\n        if (draft) {\n          draft[index] = queryDef;\n        } else {\n          draft = [queryDef];\n        }\n      })\n    );\n  };\n\n  const handleQueryRun = (index: number, queryDef: QueryDefinition): void => {\n    onQueryRun(index, queryDef);\n  };\n\n  const handleQueryAdd = (): void => {\n    onChange(\n      produce(queries, (draft) => {\n        if (draft) {\n          draft.push(defaultInitialQueryDefinition);\n        } else {\n          draft = [...queries, defaultInitialQueryDefinition];\n        }\n      })\n    );\n    setQueriesCollapsed((queriesCollapsed) => {\n      queriesCollapsed.push(false);\n      return [...queriesCollapsed];\n    });\n  };\n\n  const handleQueryDelete = (index: number): void => {\n    onChange(\n      produce(queries, (draft) => {\n        draft.splice(index, 1);\n      })\n    );\n    setQueriesCollapsed((queriesCollapsed) => {\n      queriesCollapsed.splice(index, 1);\n      return [...queriesCollapsed];\n    });\n  };\n\n  const handleQueryCollapseExpand = (index: number): void => {\n    setQueriesCollapsed((queriesCollapsed) => {\n      queriesCollapsed[index] = !queriesCollapsed[index];\n      return [...queriesCollapsed];\n    });\n  };\n\n  // show one query input if queries is empty\n  const queryDefinitions: QueryDefinition[] = queries.length\n    ? queries\n    : !isLoading\n      ? [defaultInitialQueryDefinition]\n      : [];\n\n  return (\n    <>\n      <Stack spacing={1}>\n        {queryDefinitions.map((query: QueryDefinition, i: number) => (\n          <QueryEditorContainer\n            ref={ref}\n            queryTypes={queryTypes}\n            key={i}\n            index={i}\n            query={query}\n            queryResult={queryResults?.[i]}\n            filteredQueryPlugins={filteredQueryPlugins}\n            isCollapsed={!!queriesCollapsed[i]}\n            onChange={handleQueryChange}\n            onQueryRun={handleQueryRun}\n            onDelete={queries.length > 1 ? handleQueryDelete : undefined}\n            onCollapseExpand={handleQueryCollapseExpand}\n          />\n        ))}\n      </Stack>\n      <Button variant=\"contained\" startIcon={<AddIcon />} sx={{ marginTop: 1 }} onClick={handleQueryAdd}>\n        Add Query\n      </Button>\n    </>\n  );\n});\n\nMultiQueryEditor.displayName = 'MultiQueryEditor';\n"],"names":["forwardRef","useState","produce","Button","Stack","AddIcon","useListPluginMetadata","usePlugin","usePluginRegistry","QueryEditorContainer","useDefaultQueryDefinition","queryTypes","filteredQueryPlugins","defaultQueryType","data","queryPlugins","isLoading","defaultPluginKinds","defaultQueryKind","length","find","i","includes","spec","name","defaultQueryPlugin","useErrorBoundary","enabled","defaultInitialQueryDefinition","kind","plugin","createInitialOptions","MultiQueryEditor","props","ref","queries","queryResults","onChange","onQueryRun","queriesCollapsed","setQueriesCollapsed","map","handleQueryChange","index","queryDef","draft","handleQueryRun","handleQueryAdd","push","handleQueryDelete","splice","handleQueryCollapseExpand","queryDefinitions","spacing","query","queryResult","isCollapsed","onDelete","undefined","onCollapseExpand","variant","startIcon","sx","marginTop","onClick","displayName"],"mappings":"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"}

package/dist/components/MultiQueryEditor/QueryEditorContainer.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { QueryDefinition, QueryPluginType } from '@perses-dev/core';
+import { QueryDefinition, QueryPluginType } from '@perses-dev/spec';
 import { QueryData } from '../../runtime';
 import { PluginEditorRef } from '../PluginEditor';
 /**

package/dist/components/MultiQueryEditor/QueryEditorContainer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/MultiQueryEditor/QueryEditorContainer.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { produce } from 'immer';\nimport { QueryDefinition, QueryPluginType } from '@perses-dev/core';\nimport { Stack, IconButton, Typography, BoxProps, Box, CircularProgress } from '@mui/material';\nimport DeleteIcon from 'mdi-material-ui/DeleteOutline';\nimport ChevronDown from 'mdi-material-ui/ChevronDown';\nimport ChevronRight from 'mdi-material-ui/ChevronRight';\nimport { forwardRef, ReactElement } from 'react';\nimport AlertIcon from 'mdi-material-ui/Alert';\nimport { InfoTooltip } from '@perses-dev/components';\nimport { QueryData } from '../../runtime';\nimport { PluginEditor, PluginEditorProps, PluginEditorRef } from '../PluginEditor';\n\n/**\n * Properties for {@link QueryEditorContainer}\n */\ninterface QueryEditorContainerProps {\n  queryTypes: QueryPluginType[];\n  index: number;\n  query: QueryDefinition;\n  queryResult?: QueryData;\n  filteredQueryPlugins?: string[];\n  onChange: (index: number, query: QueryDefinition) => void;\n  onQueryRun: (index: number, query: QueryDefinition) => void;\n  onCollapseExpand: (index: number) => void;\n  isCollapsed?: boolean;\n  onDelete?: (index: number) => void;\n}\n\n/**\n * Container for a query editor. This component is responsible for rendering the query editor, and make it collapsible\n * to not take too much space.\n * @param queryTypes the supported query types\n * @param index the index of the query in the list\n * @param query the query definition\n * @param isCollapsed whether the query editor is collapsed or not\n * @param onDelete callback when the query is deleted\n * @param onChange callback when the query is changed\n * @param onCollapseExpand callback when the query is collapsed or expanded\n * @constructor\n */\n\nexport const QueryEditorContainer = forwardRef<PluginEditorRef, QueryEditorContainerProps>(\n  (props, ref): ReactElement => {\n    const {\n      queryTypes,\n      index,\n      query,\n      queryResult,\n      filteredQueryPlugins,\n      isCollapsed,\n      onDelete,\n      onChange,\n      onQueryRun,\n      onCollapseExpand,\n    } = props;\n    return (\n      <Stack key={index} spacing={1}>\n        <Stack\n          direction=\"row\"\n          alignItems=\"center\"\n          justifyContent=\"space-between\"\n          borderBottom={1}\n          borderColor={(theme) => theme.palette.divider}\n        >\n          <Stack direction=\"row\">\n            <IconButton size=\"small\" onClick={() => onCollapseExpand(index)}>\n              {isCollapsed ? <ChevronRight /> : <ChevronDown />}\n            </IconButton>\n            <Typography variant=\"overline\" component=\"h4\">\n              Query #{index + 1}\n            </Typography>\n          </Stack>\n          <Stack direction=\"row\" alignItems=\"center\">\n            {queryResult?.isFetching && <CircularProgress aria-label=\"loading\" size=\"1.125rem\" />}\n            {queryResult?.error && (\n              <InfoTooltip description={queryResult.error.message}>\n                <Stack\n                  direction=\"row\"\n                  alignItems=\"center\"\n                  sx={{\n                    color: (theme) => theme.palette.error.main,\n                  }}\n                >\n                  <IconButton\n                    aria-label=\"query error\"\n                    size=\"small\"\n                    sx={{\n                      color: (theme) => theme.palette.error.main,\n                    }}\n                  >\n                    <AlertIcon />\n                  </IconButton>\n                  <Typography\n                    sx={{\n                      maxWidth: 300,\n                      whiteSpace: 'nowrap',\n                      overflow: 'hidden',\n                      textOverflow: 'ellipsis',\n                      '&:hover ::after': { content: '\"Click to copy\"' },\n                    }}\n                  >\n                    {queryResult.error.message}\n                  </Typography>\n                </Stack>\n              </InfoTooltip>\n            )}\n            {onDelete && (\n              <IconButton aria-label=\"delete query\" size=\"small\" onClick={() => onDelete && onDelete(index)}>\n                <DeleteIcon />\n              </IconButton>\n            )}\n          </Stack>\n        </Stack>\n        {!isCollapsed && (\n          <QueryEditor\n            ref={ref}\n            queryTypes={queryTypes}\n            value={query}\n            filteredQueryPlugins={filteredQueryPlugins}\n            onChange={(next) => onChange(index, next)}\n            onQueryRun={() => onQueryRun(index, query)}\n          />\n        )}\n      </Stack>\n    );\n  }\n);\n\nQueryEditorContainer.displayName = 'QueryEditorContainer';\n\n// Props on MUI Box that we don't want people to pass because we're either redefining them or providing them in\n// this component\ntype OmittedMuiProps = 'children' | 'value' | 'onChange';\ninterface QueryEditorProps extends Omit<BoxProps, OmittedMuiProps> {\n  queryTypes: QueryPluginType[];\n  value: QueryDefinition;\n  filteredQueryPlugins?: string[];\n  onChange: (next: QueryDefinition) => void;\n  onQueryRun: () => void;\n}\n\n/**\n * Editor for a query definition. This component is responsible for rendering the plugin editor for the given query.\n * This will allow user to select a plugin extending from the given supported query types, and then edit the plugin\n * spec for this plugin.\n * @param props\n * @constructor\n */\n\nconst QueryEditor = forwardRef<PluginEditorRef, QueryEditorProps>((props, ref): ReactElement => {\n  const { queryTypes, value, filteredQueryPlugins, onChange, onQueryRun, ...others } = props;\n\n  const handlePluginChange: PluginEditorProps['onChange'] = (next) => {\n    onChange(\n      produce(value, (draft) => {\n        draft.kind = next.selection.type;\n        draft.spec.plugin.kind = next.selection.kind;\n        draft.spec.plugin.spec = next.spec;\n      })\n    );\n  };\n\n  return (\n    <Box {...others}>\n      <PluginEditor\n        ref={ref}\n        pluginTypes={queryTypes}\n        pluginKindLabel=\"Query Type\"\n        value={{\n          selection: {\n            kind: value.spec.plugin.kind,\n            type: value.kind,\n          },\n          spec: value.spec.plugin.spec,\n        }}\n        filteredQueryPlugins={filteredQueryPlugins}\n        withRunQueryButton\n        onRunQuery={onQueryRun}\n        onChange={handlePluginChange}\n      />\n    </Box>\n  );\n});\n\nQueryEditor.displayName = 'QueryEditor';\n"],"names":["produce","Stack","IconButton","Typography","Box","CircularProgress","DeleteIcon","ChevronDown","ChevronRight","forwardRef","AlertIcon","InfoTooltip","PluginEditor","QueryEditorContainer","props","ref","queryTypes","index","query","queryResult","filteredQueryPlugins","isCollapsed","onDelete","onChange","onQueryRun","onCollapseExpand","spacing","direction","alignItems","justifyContent","borderBottom","borderColor","theme","palette","divider","size","onClick","variant","component","isFetching","aria-label","error","description","message","sx","color","main","maxWidth","whiteSpace","overflow","textOverflow","content","QueryEditor","value","next","displayName","others","handlePluginChange","draft","kind","selection","type","spec","plugin","pluginTypes","pluginKindLabel","withRunQueryButton","onRunQuery"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/MultiQueryEditor/QueryEditorContainer.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { produce } from 'immer';\nimport { QueryDefinition, QueryPluginType } from '@perses-dev/spec';\nimport { Stack, IconButton, Typography, BoxProps, Box, CircularProgress } from '@mui/material';\nimport DeleteIcon from 'mdi-material-ui/DeleteOutline';\nimport ChevronDown from 'mdi-material-ui/ChevronDown';\nimport ChevronRight from 'mdi-material-ui/ChevronRight';\nimport { forwardRef, ReactElement } from 'react';\nimport AlertIcon from 'mdi-material-ui/Alert';\nimport { InfoTooltip } from '@perses-dev/components';\nimport { QueryData } from '../../runtime';\nimport { PluginEditor, PluginEditorProps, PluginEditorRef } from '../PluginEditor';\n\n/**\n * Properties for {@link QueryEditorContainer}\n */\ninterface QueryEditorContainerProps {\n  queryTypes: QueryPluginType[];\n  index: number;\n  query: QueryDefinition;\n  queryResult?: QueryData;\n  filteredQueryPlugins?: string[];\n  onChange: (index: number, query: QueryDefinition) => void;\n  onQueryRun: (index: number, query: QueryDefinition) => void;\n  onCollapseExpand: (index: number) => void;\n  isCollapsed?: boolean;\n  onDelete?: (index: number) => void;\n}\n\n/**\n * Container for a query editor. This component is responsible for rendering the query editor, and make it collapsible\n * to not take too much space.\n * @param queryTypes the supported query types\n * @param index the index of the query in the list\n * @param query the query definition\n * @param isCollapsed whether the query editor is collapsed or not\n * @param onDelete callback when the query is deleted\n * @param onChange callback when the query is changed\n * @param onCollapseExpand callback when the query is collapsed or expanded\n * @constructor\n */\n\nexport const QueryEditorContainer = forwardRef<PluginEditorRef, QueryEditorContainerProps>(\n  (props, ref): ReactElement => {\n    const {\n      queryTypes,\n      index,\n      query,\n      queryResult,\n      filteredQueryPlugins,\n      isCollapsed,\n      onDelete,\n      onChange,\n      onQueryRun,\n      onCollapseExpand,\n    } = props;\n    return (\n      <Stack key={index} spacing={1}>\n        <Stack\n          direction=\"row\"\n          alignItems=\"center\"\n          justifyContent=\"space-between\"\n          borderBottom={1}\n          borderColor={(theme) => theme.palette.divider}\n        >\n          <Stack direction=\"row\">\n            <IconButton size=\"small\" onClick={() => onCollapseExpand(index)}>\n              {isCollapsed ? <ChevronRight /> : <ChevronDown />}\n            </IconButton>\n            <Typography variant=\"overline\" component=\"h4\">\n              Query #{index + 1}\n            </Typography>\n          </Stack>\n          <Stack direction=\"row\" alignItems=\"center\">\n            {queryResult?.isFetching && <CircularProgress aria-label=\"loading\" size=\"1.125rem\" />}\n            {queryResult?.error && (\n              <InfoTooltip description={queryResult.error.message}>\n                <Stack\n                  direction=\"row\"\n                  alignItems=\"center\"\n                  sx={{\n                    color: (theme) => theme.palette.error.main,\n                  }}\n                >\n                  <IconButton\n                    aria-label=\"query error\"\n                    size=\"small\"\n                    sx={{\n                      color: (theme) => theme.palette.error.main,\n                    }}\n                  >\n                    <AlertIcon />\n                  </IconButton>\n                  <Typography\n                    sx={{\n                      maxWidth: 300,\n                      whiteSpace: 'nowrap',\n                      overflow: 'hidden',\n                      textOverflow: 'ellipsis',\n                      '&:hover ::after': { content: '\"Click to copy\"' },\n                    }}\n                  >\n                    {queryResult.error.message}\n                  </Typography>\n                </Stack>\n              </InfoTooltip>\n            )}\n            {onDelete && (\n              <IconButton aria-label=\"delete query\" size=\"small\" onClick={() => onDelete && onDelete(index)}>\n                <DeleteIcon />\n              </IconButton>\n            )}\n          </Stack>\n        </Stack>\n        {!isCollapsed && (\n          <QueryEditor\n            ref={ref}\n            queryTypes={queryTypes}\n            value={query}\n            filteredQueryPlugins={filteredQueryPlugins}\n            onChange={(next) => onChange(index, next)}\n            onQueryRun={() => onQueryRun(index, query)}\n          />\n        )}\n      </Stack>\n    );\n  }\n);\n\nQueryEditorContainer.displayName = 'QueryEditorContainer';\n\n// Props on MUI Box that we don't want people to pass because we're either redefining them or providing them in\n// this component\ntype OmittedMuiProps = 'children' | 'value' | 'onChange';\ninterface QueryEditorProps extends Omit<BoxProps, OmittedMuiProps> {\n  queryTypes: QueryPluginType[];\n  value: QueryDefinition;\n  filteredQueryPlugins?: string[];\n  onChange: (next: QueryDefinition) => void;\n  onQueryRun: () => void;\n}\n\n/**\n * Editor for a query definition. This component is responsible for rendering the plugin editor for the given query.\n * This will allow user to select a plugin extending from the given supported query types, and then edit the plugin\n * spec for this plugin.\n * @param props\n * @constructor\n */\n\nconst QueryEditor = forwardRef<PluginEditorRef, QueryEditorProps>((props, ref): ReactElement => {\n  const { queryTypes, value, filteredQueryPlugins, onChange, onQueryRun, ...others } = props;\n\n  const handlePluginChange: PluginEditorProps['onChange'] = (next) => {\n    onChange(\n      produce(value, (draft) => {\n        draft.kind = next.selection.type;\n        draft.spec.plugin.kind = next.selection.kind;\n        draft.spec.plugin.spec = next.spec;\n      })\n    );\n  };\n\n  return (\n    <Box {...others}>\n      <PluginEditor\n        ref={ref}\n        pluginTypes={queryTypes}\n        pluginKindLabel=\"Query Type\"\n        value={{\n          selection: {\n            kind: value.spec.plugin.kind,\n            type: value.kind,\n          },\n          spec: value.spec.plugin.spec,\n        }}\n        filteredQueryPlugins={filteredQueryPlugins}\n        withRunQueryButton\n        onRunQuery={onQueryRun}\n        onChange={handlePluginChange}\n      />\n    </Box>\n  );\n});\n\nQueryEditor.displayName = 'QueryEditor';\n"],"names":["produce","Stack","IconButton","Typography","Box","CircularProgress","DeleteIcon","ChevronDown","ChevronRight","forwardRef","AlertIcon","InfoTooltip","PluginEditor","QueryEditorContainer","props","ref","queryTypes","index","query","queryResult","filteredQueryPlugins","isCollapsed","onDelete","onChange","onQueryRun","onCollapseExpand","spacing","direction","alignItems","justifyContent","borderBottom","borderColor","theme","palette","divider","size","onClick","variant","component","isFetching","aria-label","error","description","message","sx","color","main","maxWidth","whiteSpace","overflow","textOverflow","content","QueryEditor","value","next","displayName","others","handlePluginChange","draft","kind","selection","type","spec","plugin","pluginTypes","pluginKindLabel","withRunQueryButton","onRunQuery"],"mappings":"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"}

package/dist/components/PanelSpecEditor/PanelSpecEditor.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { PanelDefinition, PanelEditorValues, QueryDefinition, UnknownSpec } from '@perses-dev/core';
+import { PanelDefinition, PanelEditorValues, QueryDefinition, UnknownSpec } from '@perses-dev/spec';
 import { Control } from 'react-hook-form';
 import { PluginEditorRef } from '../PluginEditor';
 export interface PanelSpecEditorProps {

package/dist/components/PanelSpecEditor/PanelSpecEditor.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PanelSpecEditor/PanelSpecEditor.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { ErrorAlert, JSONEditor, LinksEditor } from '@perses-dev/components';\nimport { PanelDefinition, PanelEditorValues, QueryDefinition, UnknownSpec } from '@perses-dev/core';\nimport { Control, Controller } from 'react-hook-form';\nimport { forwardRef, ReactElement } from 'react';\nimport { QueryCountProvider, useDataQueriesContext, usePlugin } from '../../runtime';\nimport { PanelPlugin } from '../../model';\nimport { OptionsEditorTabsProps, OptionsEditorTabs } from '../OptionsEditorTabs';\nimport { MultiQueryEditor } from '../MultiQueryEditor';\nimport { PluginEditorRef } from '../PluginEditor';\n\nexport interface PanelSpecEditorProps {\n  control: Control<PanelEditorValues>;\n  panelDefinition: PanelDefinition;\n  onQueriesChange: (queries: QueryDefinition[]) => void;\n  onQueryRun: (index: number, query: QueryDefinition) => void;\n  onPluginSpecChange: (spec: UnknownSpec) => void;\n  onJSONChange: (panelDefinitionStr: string) => void;\n}\n\nexport const PanelSpecEditor = forwardRef<PluginEditorRef, PanelSpecEditorProps>((props, ref): ReactElement | null => {\n  const { control, panelDefinition, onQueriesChange, onQueryRun, onPluginSpecChange, onJSONChange } = props;\n  const { kind } = panelDefinition.spec.plugin;\n  const { data: plugin, isLoading, error } = usePlugin('Panel', kind);\n\n  const { queryResults } = useDataQueriesContext();\n\n  if (error) {\n    return <ErrorAlert error={error} />;\n  }\n\n  if (isLoading) {\n    return null;\n  }\n\n  if (!plugin) {\n    throw new Error(`Missing implementation for panel plugin with kind '${kind}'`);\n  }\n\n  const { panelOptionsEditorComponents, hideQueryEditor } = plugin as PanelPlugin;\n  let tabs: OptionsEditorTabsProps['tabs'] = [];\n\n  if (!hideQueryEditor) {\n    tabs.push({\n      label: 'Query',\n      content: (\n        <Controller\n          control={control}\n          name=\"panelDefinition.spec.queries\"\n          render={({ field }) => (\n            <MultiQueryEditor\n              ref={ref}\n              queryTypes={plugin.supportedQueryTypes ?? []}\n              queries={panelDefinition.spec.queries ?? []}\n              queryResults={queryResults}\n              onChange={(queries) => {\n                field.onChange(queries);\n                onQueriesChange(queries);\n              }}\n              onQueryRun={(index, query) => {\n                onQueryRun(index, query);\n                // If spec has not changed, refetch to update the data\n                if (JSON.stringify(panelDefinition.spec.queries?.[index]) === JSON.stringify(query)) {\n                  queryResults[index]?.refetch?.();\n                }\n              }}\n            />\n          )}\n        />\n      ),\n    });\n  }\n\n  if (panelOptionsEditorComponents) {\n    tabs = tabs.concat(\n      panelOptionsEditorComponents.map(({ label, content: OptionsEditorComponent }) => ({\n        label,\n        content: (\n          <Controller\n            control={control}\n            name=\"panelDefinition.spec.plugin.spec\"\n            render={({ field }) => (\n              <OptionsEditorComponent\n                value={panelDefinition.spec.plugin.spec}\n                onChange={(spec) => {\n                  field.onChange(spec);\n                  onPluginSpecChange(spec);\n                }}\n              />\n            )}\n          />\n        ),\n      }))\n    );\n  }\n\n  // always show json editor and links editor by default\n  tabs.push({\n    label: 'Links',\n    content: <LinksEditor control={control} />,\n  });\n  tabs.push({\n    label: 'JSON',\n    content: (\n      <Controller\n        control={control}\n        name=\"panelDefinition\"\n        render={({ field }) => (\n          <JSONEditor\n            maxHeight=\"80vh\"\n            value={panelDefinition}\n            onChange={(json) => {\n              field.onChange(JSON.parse(json));\n              onJSONChange(json);\n            }}\n          />\n        )}\n      />\n    ),\n  });\n\n  return (\n    <QueryCountProvider queryCount={(panelDefinition.spec.queries ?? []).length}>\n      <OptionsEditorTabs key={tabs.length} tabs={tabs} />\n    </QueryCountProvider>\n  );\n});\n\nPanelSpecEditor.displayName = 'PanelSpecEditor';\n"],"names":["ErrorAlert","JSONEditor","LinksEditor","Controller","forwardRef","QueryCountProvider","useDataQueriesContext","usePlugin","OptionsEditorTabs","MultiQueryEditor","PanelSpecEditor","props","ref","control","panelDefinition","onQueriesChange","onQueryRun","onPluginSpecChange","onJSONChange","kind","spec","plugin","data","isLoading","error","queryResults","Error","panelOptionsEditorComponents","hideQueryEditor","tabs","push","label","content","name","render","field","queryTypes","supportedQueryTypes","queries","onChange","index","query","JSON","stringify","refetch","concat","map","OptionsEditorComponent","value","maxHeight","json","parse","queryCount","length","displayName"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/PanelSpecEditor/PanelSpecEditor.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { ErrorAlert, JSONEditor, LinksEditor } from '@perses-dev/components';\nimport { PanelDefinition, PanelEditorValues, QueryDefinition, UnknownSpec } from '@perses-dev/spec';\nimport { Control, Controller } from 'react-hook-form';\nimport { forwardRef, ReactElement } from 'react';\nimport { QueryCountProvider, useDataQueriesContext, usePlugin } from '../../runtime';\nimport { PanelPlugin } from '../../model';\nimport { OptionsEditorTabsProps, OptionsEditorTabs } from '../OptionsEditorTabs';\nimport { MultiQueryEditor } from '../MultiQueryEditor';\nimport { PluginEditorRef } from '../PluginEditor';\n\nexport interface PanelSpecEditorProps {\n  control: Control<PanelEditorValues>;\n  panelDefinition: PanelDefinition;\n  onQueriesChange: (queries: QueryDefinition[]) => void;\n  onQueryRun: (index: number, query: QueryDefinition) => void;\n  onPluginSpecChange: (spec: UnknownSpec) => void;\n  onJSONChange: (panelDefinitionStr: string) => void;\n}\n\nexport const PanelSpecEditor = forwardRef<PluginEditorRef, PanelSpecEditorProps>((props, ref): ReactElement | null => {\n  const { control, panelDefinition, onQueriesChange, onQueryRun, onPluginSpecChange, onJSONChange } = props;\n  const { kind } = panelDefinition.spec.plugin;\n  const { data: plugin, isLoading, error } = usePlugin('Panel', kind);\n\n  const { queryResults } = useDataQueriesContext();\n\n  if (error) {\n    return <ErrorAlert error={error} />;\n  }\n\n  if (isLoading) {\n    return null;\n  }\n\n  if (!plugin) {\n    throw new Error(`Missing implementation for panel plugin with kind '${kind}'`);\n  }\n\n  const { panelOptionsEditorComponents, hideQueryEditor } = plugin as PanelPlugin;\n  let tabs: OptionsEditorTabsProps['tabs'] = [];\n\n  if (!hideQueryEditor) {\n    tabs.push({\n      label: 'Query',\n      content: (\n        <Controller\n          control={control}\n          name=\"panelDefinition.spec.queries\"\n          render={({ field }) => (\n            <MultiQueryEditor\n              ref={ref}\n              queryTypes={plugin.supportedQueryTypes ?? []}\n              queries={panelDefinition.spec.queries ?? []}\n              queryResults={queryResults}\n              onChange={(queries) => {\n                field.onChange(queries);\n                onQueriesChange(queries);\n              }}\n              onQueryRun={(index, query) => {\n                onQueryRun(index, query);\n                // If spec has not changed, refetch to update the data\n                if (JSON.stringify(panelDefinition.spec.queries?.[index]) === JSON.stringify(query)) {\n                  queryResults[index]?.refetch?.();\n                }\n              }}\n            />\n          )}\n        />\n      ),\n    });\n  }\n\n  if (panelOptionsEditorComponents) {\n    tabs = tabs.concat(\n      panelOptionsEditorComponents.map(({ label, content: OptionsEditorComponent }) => ({\n        label,\n        content: (\n          <Controller\n            control={control}\n            name=\"panelDefinition.spec.plugin.spec\"\n            render={({ field }) => (\n              <OptionsEditorComponent\n                value={panelDefinition.spec.plugin.spec}\n                onChange={(spec) => {\n                  field.onChange(spec);\n                  onPluginSpecChange(spec);\n                }}\n              />\n            )}\n          />\n        ),\n      }))\n    );\n  }\n\n  // always show json editor and links editor by default\n  tabs.push({\n    label: 'Links',\n    content: <LinksEditor control={control} />,\n  });\n  tabs.push({\n    label: 'JSON',\n    content: (\n      <Controller\n        control={control}\n        name=\"panelDefinition\"\n        render={({ field }) => (\n          <JSONEditor\n            maxHeight=\"80vh\"\n            value={panelDefinition}\n            onChange={(json) => {\n              field.onChange(JSON.parse(json));\n              onJSONChange(json);\n            }}\n          />\n        )}\n      />\n    ),\n  });\n\n  return (\n    <QueryCountProvider queryCount={(panelDefinition.spec.queries ?? []).length}>\n      <OptionsEditorTabs key={tabs.length} tabs={tabs} />\n    </QueryCountProvider>\n  );\n});\n\nPanelSpecEditor.displayName = 'PanelSpecEditor';\n"],"names":["ErrorAlert","JSONEditor","LinksEditor","Controller","forwardRef","QueryCountProvider","useDataQueriesContext","usePlugin","OptionsEditorTabs","MultiQueryEditor","PanelSpecEditor","props","ref","control","panelDefinition","onQueriesChange","onQueryRun","onPluginSpecChange","onJSONChange","kind","spec","plugin","data","isLoading","error","queryResults","Error","panelOptionsEditorComponents","hideQueryEditor","tabs","push","label","content","name","render","field","queryTypes","supportedQueryTypes","queries","onChange","index","query","JSON","stringify","refetch","concat","map","OptionsEditorComponent","value","maxHeight","json","parse","queryCount","length","displayName"],"mappings":"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"}

package/dist/components/PluginEditor/PluginEditor.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PluginEditor/PluginEditor.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Box, Button } from '@mui/material';\nimport Reload from 'mdi-material-ui/Reload';\nimport { ErrorAlert, ErrorBoundary } from '@perses-dev/components';\nimport { ReactElement, useCallback } from 'react';\nimport { UnknownSpec } from '@perses-dev/core';\nimport { PluginKindSelect } from '../PluginKindSelect';\nimport { PluginSpecEditor } from '../PluginSpecEditor';\nimport { PluginEditorProps, usePluginEditor } from './plugin-editor-api';\n\n/**\n * A combination `PluginKindSelect` and `PluginSpecEditor` component. This is meant for editing the `plugin` property\n * that's common in our JSON specs where a user selects a plugin `kind` and then edits the `spec` via that plugin's\n * editor component. It takes care of transitioning from one plugin kind to another \"all at once\" so that when the\n * plugin's kind changes, the spec is also changed at the same time so those options editor components don't see a\n * previous plugin's spec state. If you just want this behavior, but in a different UI layout from this, try the\n * `usePluginEditor` hook that powers this component.\n */\n\nexport function PluginEditor(props: PluginEditorProps): ReactElement {\n  const {\n    value,\n    withRunQueryButton = true,\n    pluginTypes,\n    pluginKindLabel,\n    onChange: _,\n    isReadonly,\n    onRunQuery,\n    filteredQueryPlugins,\n    ...others\n  } = props;\n\n  const { pendingSelection, isLoading, error, onSelectionChange, onSpecChange } = usePluginEditor(props);\n\n  const handleSpecChange = useCallback(\n    (nextSpec: UnknownSpec) => {\n      onSpecChange(nextSpec);\n    },\n    [onSpecChange]\n  );\n\n  return (\n    <Box {...others}>\n      <Box\n        sx={{\n          display: 'flex',\n          flexDirection: 'row',\n          alignItems: 'center',\n          justifyContent: 'space-between',\n          gap: 1,\n          mb: 1,\n        }}\n      >\n        <PluginKindSelect\n          fullWidth={false}\n          sx={{ minWidth: 120 }}\n          margin=\"dense\"\n          label={pluginKindLabel}\n          pluginTypes={pluginTypes}\n          disabled={isLoading}\n          value={pendingSelection ? pendingSelection : value.selection}\n          slotProps={{ input: { readOnly: isReadonly } }}\n          error={!!error}\n          helperText={error?.message}\n          onChange={onSelectionChange}\n          filteredQueryPlugins={filteredQueryPlugins}\n        />\n\n        {withRunQueryButton && (\n          <Button\n            data-testid=\"run_query_button\"\n            variant=\"contained\"\n            startIcon={<Reload />}\n            onClick={onRunQuery}\n            disabled={isLoading}\n          >\n            Run Query\n          </Button>\n        )}\n      </Box>\n\n      <ErrorBoundary FallbackComponent={ErrorAlert}>\n        <PluginSpecEditor\n          pluginSelection={value.selection}\n          value={value.spec}\n          onChange={handleSpecChange}\n          isReadonly={isReadonly}\n        />\n      </ErrorBoundary>\n    </Box>\n  );\n}\n"],"names":["Box","Button","Reload","ErrorAlert","ErrorBoundary","useCallback","PluginKindSelect","PluginSpecEditor","usePluginEditor","PluginEditor","props","value","withRunQueryButton","pluginTypes","pluginKindLabel","onChange","_","isReadonly","onRunQuery","filteredQueryPlugins","others","pendingSelection","isLoading","error","onSelectionChange","onSpecChange","handleSpecChange","nextSpec","sx","display","flexDirection","alignItems","justifyContent","gap","mb","fullWidth","minWidth","margin","label","disabled","selection","slotProps","input","readOnly","helperText","message","data-testid","variant","startIcon","onClick","FallbackComponent","pluginSelection","spec"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,GAAG,EAAEC,MAAM,QAAQ,gBAAgB;AAC5C,OAAOC,YAAY,yBAAyB;AAC5C,SAASC,UAAU,EAAEC,aAAa,QAAQ,yBAAyB;AACnE,SAAuBC,WAAW,QAAQ,QAAQ;AAElD,SAASC,gBAAgB,QAAQ,sBAAsB;AACvD,SAASC,gBAAgB,QAAQ,sBAAsB;AACvD,SAA4BC,eAAe,QAAQ,sBAAsB;AAEzE;;;;;;;CAOC,GAED,OAAO,SAASC,aAAaC,KAAwB;IACnD,MAAM,EACJC,KAAK,EACLC,qBAAqB,IAAI,EACzBC,WAAW,EACXC,eAAe,EACfC,UAAUC,CAAC,EACXC,UAAU,EACVC,UAAU,EACVC,oBAAoB,EACpB,GAAGC,QACJ,GAAGV;IAEJ,MAAM,EAAEW,gBAAgB,EAAEC,SAAS,EAAEC,KAAK,EAAEC,iBAAiB,EAAEC,YAAY,EAAE,GAAGjB,gBAAgBE;IAEhG,MAAMgB,mBAAmBrB,YACvB,CAACsB;QACCF,aAAaE;IACf,GACA;QAACF;KAAa;IAGhB,qBACE,MAACzB;QAAK,GAAGoB,MAAM;;0BACb,MAACpB;gBACC4B,IAAI;oBACFC,SAAS;oBACTC,eAAe;oBACfC,YAAY;oBACZC,gBAAgB;oBAChBC,KAAK;oBACLC,IAAI;gBACN;;kCAEA,KAAC5B;wBACC6B,WAAW;wBACXP,IAAI;4BAAEQ,UAAU;wBAAI;wBACpBC,QAAO;wBACPC,OAAOxB;wBACPD,aAAaA;wBACb0B,UAAUjB;wBACVX,OAAOU,mBAAmBA,mBAAmBV,MAAM6B,SAAS;wBAC5DC,WAAW;4BAAEC,OAAO;gCAAEC,UAAU1B;4BAAW;wBAAE;wBAC7CM,OAAO,CAAC,CAACA;wBACTqB,YAAYrB,OAAOsB;wBACnB9B,UAAUS;wBACVL,sBAAsBA;;oBAGvBP,oCACC,KAACX;wBACC6C,eAAY;wBACZC,SAAQ;wBACRC,yBAAW,KAAC9C;wBACZ+C,SAAS/B;wBACTqB,UAAUjB;kCACX;;;;0BAML,KAAClB;gBAAc8C,mBAAmB/C;0BAChC,cAAA,KAACI;oBACC4C,iBAAiBxC,MAAM6B,SAAS;oBAChC7B,OAAOA,MAAMyC,IAAI;oBACjBrC,UAAUW;oBACVT,YAAYA;;;;;AAKtB"}
+{"version":3,"sources":["../../../src/components/PluginEditor/PluginEditor.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Box, Button } from '@mui/material';\nimport Reload from 'mdi-material-ui/Reload';\nimport { ErrorAlert, ErrorBoundary } from '@perses-dev/components';\nimport { ReactElement, useCallback } from 'react';\nimport { UnknownSpec } from '@perses-dev/spec';\nimport { PluginKindSelect } from '../PluginKindSelect';\nimport { PluginSpecEditor } from '../PluginSpecEditor';\nimport { PluginEditorProps, usePluginEditor } from './plugin-editor-api';\n\n/**\n * A combination `PluginKindSelect` and `PluginSpecEditor` component. This is meant for editing the `plugin` property\n * that's common in our JSON specs where a user selects a plugin `kind` and then edits the `spec` via that plugin's\n * editor component. It takes care of transitioning from one plugin kind to another \"all at once\" so that when the\n * plugin's kind changes, the spec is also changed at the same time so those options editor components don't see a\n * previous plugin's spec state. If you just want this behavior, but in a different UI layout from this, try the\n * `usePluginEditor` hook that powers this component.\n */\n\nexport function PluginEditor(props: PluginEditorProps): ReactElement {\n  const {\n    value,\n    withRunQueryButton = true,\n    pluginTypes,\n    pluginKindLabel,\n    onChange: _,\n    isReadonly,\n    onRunQuery,\n    filteredQueryPlugins,\n    ...others\n  } = props;\n\n  const { pendingSelection, isLoading, error, onSelectionChange, onSpecChange } = usePluginEditor(props);\n\n  const handleSpecChange = useCallback(\n    (nextSpec: UnknownSpec) => {\n      onSpecChange(nextSpec);\n    },\n    [onSpecChange]\n  );\n\n  return (\n    <Box {...others}>\n      <Box\n        sx={{\n          display: 'flex',\n          flexDirection: 'row',\n          alignItems: 'center',\n          justifyContent: 'space-between',\n          gap: 1,\n          mb: 1,\n        }}\n      >\n        <PluginKindSelect\n          fullWidth={false}\n          sx={{ minWidth: 120 }}\n          margin=\"dense\"\n          label={pluginKindLabel}\n          pluginTypes={pluginTypes}\n          disabled={isLoading}\n          value={pendingSelection ? pendingSelection : value.selection}\n          slotProps={{ input: { readOnly: isReadonly } }}\n          error={!!error}\n          helperText={error?.message}\n          onChange={onSelectionChange}\n          filteredQueryPlugins={filteredQueryPlugins}\n        />\n\n        {withRunQueryButton && (\n          <Button\n            data-testid=\"run_query_button\"\n            variant=\"contained\"\n            startIcon={<Reload />}\n            onClick={onRunQuery}\n            disabled={isLoading}\n          >\n            Run Query\n          </Button>\n        )}\n      </Box>\n\n      <ErrorBoundary FallbackComponent={ErrorAlert}>\n        <PluginSpecEditor\n          pluginSelection={value.selection}\n          value={value.spec}\n          onChange={handleSpecChange}\n          isReadonly={isReadonly}\n        />\n      </ErrorBoundary>\n    </Box>\n  );\n}\n"],"names":["Box","Button","Reload","ErrorAlert","ErrorBoundary","useCallback","PluginKindSelect","PluginSpecEditor","usePluginEditor","PluginEditor","props","value","withRunQueryButton","pluginTypes","pluginKindLabel","onChange","_","isReadonly","onRunQuery","filteredQueryPlugins","others","pendingSelection","isLoading","error","onSelectionChange","onSpecChange","handleSpecChange","nextSpec","sx","display","flexDirection","alignItems","justifyContent","gap","mb","fullWidth","minWidth","margin","label","disabled","selection","slotProps","input","readOnly","helperText","message","data-testid","variant","startIcon","onClick","FallbackComponent","pluginSelection","spec"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,GAAG,EAAEC,MAAM,QAAQ,gBAAgB;AAC5C,OAAOC,YAAY,yBAAyB;AAC5C,SAASC,UAAU,EAAEC,aAAa,QAAQ,yBAAyB;AACnE,SAAuBC,WAAW,QAAQ,QAAQ;AAElD,SAASC,gBAAgB,QAAQ,sBAAsB;AACvD,SAASC,gBAAgB,QAAQ,sBAAsB;AACvD,SAA4BC,eAAe,QAAQ,sBAAsB;AAEzE;;;;;;;CAOC,GAED,OAAO,SAASC,aAAaC,KAAwB;IACnD,MAAM,EACJC,KAAK,EACLC,qBAAqB,IAAI,EACzBC,WAAW,EACXC,eAAe,EACfC,UAAUC,CAAC,EACXC,UAAU,EACVC,UAAU,EACVC,oBAAoB,EACpB,GAAGC,QACJ,GAAGV;IAEJ,MAAM,EAAEW,gBAAgB,EAAEC,SAAS,EAAEC,KAAK,EAAEC,iBAAiB,EAAEC,YAAY,EAAE,GAAGjB,gBAAgBE;IAEhG,MAAMgB,mBAAmBrB,YACvB,CAACsB;QACCF,aAAaE;IACf,GACA;QAACF;KAAa;IAGhB,qBACE,MAACzB;QAAK,GAAGoB,MAAM;;0BACb,MAACpB;gBACC4B,IAAI;oBACFC,SAAS;oBACTC,eAAe;oBACfC,YAAY;oBACZC,gBAAgB;oBAChBC,KAAK;oBACLC,IAAI;gBACN;;kCAEA,KAAC5B;wBACC6B,WAAW;wBACXP,IAAI;4BAAEQ,UAAU;wBAAI;wBACpBC,QAAO;wBACPC,OAAOxB;wBACPD,aAAaA;wBACb0B,UAAUjB;wBACVX,OAAOU,mBAAmBA,mBAAmBV,MAAM6B,SAAS;wBAC5DC,WAAW;4BAAEC,OAAO;gCAAEC,UAAU1B;4BAAW;wBAAE;wBAC7CM,OAAO,CAAC,CAACA;wBACTqB,YAAYrB,OAAOsB;wBACnB9B,UAAUS;wBACVL,sBAAsBA;;oBAGvBP,oCACC,KAACX;wBACC6C,eAAY;wBACZC,SAAQ;wBACRC,yBAAW,KAAC9C;wBACZ+C,SAAS/B;wBACTqB,UAAUjB;kCACX;;;;0BAML,KAAClB;gBAAc8C,mBAAmB/C;0BAChC,cAAA,KAACI;oBACC4C,iBAAiBxC,MAAM6B,SAAS;oBAChC7B,OAAOA,MAAMyC,IAAI;oBACjBrC,UAAUW;oBACVT,YAAYA;;;;;AAKtB"}

package/dist/components/PluginEditor/plugin-editor-api.d.ts

@@ -1,5 +1,5 @@
 import { BoxProps } from '@mui/material';
-import { UnknownSpec } from '@perses-dev/core';
+import { UnknownSpec } from '@perses-dev/spec';
 import { PluginType } from '../../model';
 export interface PluginEditorSelection {
     type: PluginType;

package/dist/components/PluginEditor/plugin-editor-api.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PluginEditor/plugin-editor-api.ts"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { BoxProps } from '@mui/material';\nimport { UnknownSpec } from '@perses-dev/core';\nimport { useState, useRef, useEffect } from 'react';\nimport { produce } from 'immer';\nimport { PanelPlugin, PluginType } from '../../model';\nimport { PluginKindSelectProps } from '../PluginKindSelect';\nimport { PluginSpecEditorProps } from '../PluginSpecEditor';\nimport { usePlugin, usePluginRegistry } from '../../runtime';\nimport { useEvent } from '../../utils';\n\nexport interface PluginEditorSelection {\n  type: PluginType;\n  kind: string;\n}\n\nexport interface PluginEditorValue {\n  selection: PluginEditorSelection;\n  spec: UnknownSpec;\n}\n\n// Props on MUI Box that we don't want people to pass because we're either redefining them or providing them in\n// this component\ntype OmittedMuiProps = 'children' | 'value' | 'onChange';\n\nexport interface PluginEditorProps extends Omit<BoxProps, OmittedMuiProps> {\n  pluginTypes: PluginType[];\n  pluginKindLabel: string;\n  value: PluginEditorValue;\n  isReadonly?: boolean;\n  withRunQueryButton?: boolean;\n  filteredQueryPlugins?: string[];\n  onChange: (next: PluginEditorValue) => void;\n  onRunQuery?: () => void;\n}\n\nexport interface PluginEditorRef {\n  flushChanges?: () => void;\n}\n\ntype PreviousSpecState = Record<string, Record<string, UnknownSpec>>;\ntype HideQueryEditorState = Record<string, boolean>;\n\n/**\n * Props needed by the usePluginEditor hook.\n */\nexport type UsePluginEditorProps = Pick<PluginEditorProps, 'pluginTypes' | 'value' | 'onChange'> & {\n  onHideQueryEditorChange?: (isHidden: boolean) => void;\n};\n\n/**\n * Returns the state/handlers that power the `PluginEditor` component. Useful for custom components that want to provide\n * a different UI, but want the same behavior of changing `kind` and `spec` together on plugin kind changes. Also\n * remembers previous `spec` values that it's seen, allowing and restores those values if a user switches the plugin\n * kind back.\n */\nexport function usePluginEditor(props: UsePluginEditorProps): {\n  pendingSelection?: PluginEditorSelection;\n  isLoading: boolean;\n  error: Error | null;\n  onSelectionChange: (s: PluginEditorSelection) => void;\n  onSpecChange: (next: UnknownSpec) => void;\n  rememberCurrentSpecState: () => void;\n} {\n  // eslint-disable-next-line @typescript-eslint/no-empty-function\n  const { pluginTypes, value, onHideQueryEditorChange = (): void => {} } = props; // setting onHideQueryEditorChange to empty function here because useEvent requires a function\n\n  // Keep a stable reference, so we don't run the effect below when we don't need to\n  const onChange = useEvent(props.onChange);\n  const onHideQuery = useEvent(onHideQueryEditorChange);\n\n  // The previous spec state for PluginType and kind and a helper function for remembering current values\n  const prevSpecState = useRef<PreviousSpecState>({\n    [value.selection.type]: { [value.selection.kind]: value.spec },\n  });\n  const rememberCurrentSpecState = useEvent(() => {\n    let byPluginType = prevSpecState.current[value.selection.type];\n    if (byPluginType === undefined) {\n      byPluginType = {};\n      prevSpecState.current[value.selection.type] = byPluginType;\n    }\n    byPluginType[value.selection.kind] = value.spec;\n  });\n\n  // The previous hide query state for each panel kind\n  const hideQueryState = useRef<HideQueryEditorState>({\n    [value.selection.kind]: false,\n  });\n\n  const { defaultPluginKinds } = usePluginRegistry();\n  const defaultPluginType = pluginTypes[0];\n  const defaultPluginKind = defaultPluginType ? defaultPluginKinds?.[defaultPluginType] : undefined;\n  const defaultPluginSelection =\n    defaultPluginType && defaultPluginKind\n      ? {\n          type: defaultPluginType,\n          kind: defaultPluginKind,\n        }\n      : undefined;\n  const initPendingSelection = !value.selection && defaultPluginSelection ? defaultPluginSelection : undefined;\n\n  // When kind changes and we haven't loaded that plugin before, we will need to enter a \"pending\" state so that we\n  // can generate proper initial spec values that match the new plugin kind\n  const [pendingSelection, setPendingSelection] = useState<PluginEditorSelection | undefined>(initPendingSelection);\n\n  // Take a default kind in case user write explicitly an empty kind in the initial value\n  useEffect(() => {\n    if (value.selection.kind === '') {\n      value.selection.kind = defaultPluginKind || '';\n    }\n  }, [value.selection, defaultPluginKind]);\n\n  const { data: plugin, isFetching, error } = usePlugin(pendingSelection?.type, pendingSelection?.kind || '');\n\n  useEffect(() => {\n    // Nothing to do if no new plugin kind is pending\n    if (!pendingSelection) return;\n\n    // Can't get spec value until we have a plugin\n    if (plugin === undefined || isFetching) return;\n\n    // Fire an onChange to change to the pending kind with initial values from the plugin\n    rememberCurrentSpecState();\n    onChange({\n      selection: pendingSelection,\n      spec: plugin.createInitialOptions ? plugin.createInitialOptions() : {},\n    });\n\n    if (pendingSelection.type === 'Panel') {\n      const panelPlugin = plugin as PanelPlugin;\n      hideQueryState.current[pendingSelection.kind] = !!panelPlugin.hideQueryEditor;\n      if (!!panelPlugin.hideQueryEditor !== hideQueryState.current[value.selection.kind]) {\n        onHideQuery(!!panelPlugin.hideQueryEditor);\n      }\n    }\n    setPendingSelection(undefined);\n  }, [\n    pendingSelection,\n    plugin,\n    isFetching,\n    rememberCurrentSpecState,\n    onChange,\n    onHideQuery,\n    hideQueryState,\n    value.selection,\n  ]);\n\n  /**\n   * When the user tries to change the plugin kind, make sure we have the correct spec for that plugin kind before we\n   * make the switch.\n   */\n  const onSelectionChange: PluginKindSelectProps['onChange'] = (nextSelection) => {\n    // If we already have state for this plugin type/kind from a previous selection, just use it\n    const previousState = prevSpecState.current[nextSelection.type]?.[nextSelection.kind];\n    if (previousState !== undefined) {\n      rememberCurrentSpecState();\n      onChange({\n        selection: nextSelection,\n        spec: previousState,\n      });\n    } else {\n      // Otherwise, kick off the async loading process\n      setPendingSelection(nextSelection);\n    }\n\n    if (\n      nextSelection.type === 'Panel' &&\n      hideQueryState.current[nextSelection.kind] !== undefined &&\n      hideQueryState.current[value.selection.kind] !== hideQueryState.current[nextSelection.kind]\n    ) {\n      onHideQuery(!!hideQueryState.current[nextSelection.kind]);\n    }\n  };\n\n  /**\n   * Spec changes are independent and always just set the spec state.\n   */\n  const onSpecChange: PluginSpecEditorProps['onChange'] = (next) => {\n    onChange(\n      produce(value, (draft) => {\n        draft.spec = next;\n      })\n    );\n  };\n\n  return {\n    pendingSelection,\n    isLoading: isFetching,\n    error,\n    onSelectionChange,\n    onSpecChange,\n    rememberCurrentSpecState,\n  };\n}\n"],"names":["useState","useRef","useEffect","produce","usePlugin","usePluginRegistry","useEvent","usePluginEditor","props","pluginTypes","value","onHideQueryEditorChange","onChange","onHideQuery","prevSpecState","selection","type","kind","spec","rememberCurrentSpecState","byPluginType","current","undefined","hideQueryState","defaultPluginKinds","defaultPluginType","defaultPluginKind","defaultPluginSelection","initPendingSelection","pendingSelection","setPendingSelection","data","plugin","isFetching","error","createInitialOptions","panelPlugin","hideQueryEditor","onSelectionChange","nextSelection","previousState","onSpecChange","next","draft","isLoading"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/PluginEditor/plugin-editor-api.ts"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { BoxProps } from '@mui/material';\nimport { UnknownSpec } from '@perses-dev/spec';\nimport { useState, useRef, useEffect } from 'react';\nimport { produce } from 'immer';\nimport { PanelPlugin, PluginType } from '../../model';\nimport { PluginKindSelectProps } from '../PluginKindSelect';\nimport { PluginSpecEditorProps } from '../PluginSpecEditor';\nimport { usePlugin, usePluginRegistry } from '../../runtime';\nimport { useEvent } from '../../utils';\n\nexport interface PluginEditorSelection {\n  type: PluginType;\n  kind: string;\n}\n\nexport interface PluginEditorValue {\n  selection: PluginEditorSelection;\n  spec: UnknownSpec;\n}\n\n// Props on MUI Box that we don't want people to pass because we're either redefining them or providing them in\n// this component\ntype OmittedMuiProps = 'children' | 'value' | 'onChange';\n\nexport interface PluginEditorProps extends Omit<BoxProps, OmittedMuiProps> {\n  pluginTypes: PluginType[];\n  pluginKindLabel: string;\n  value: PluginEditorValue;\n  isReadonly?: boolean;\n  withRunQueryButton?: boolean;\n  filteredQueryPlugins?: string[];\n  onChange: (next: PluginEditorValue) => void;\n  onRunQuery?: () => void;\n}\n\nexport interface PluginEditorRef {\n  flushChanges?: () => void;\n}\n\ntype PreviousSpecState = Record<string, Record<string, UnknownSpec>>;\ntype HideQueryEditorState = Record<string, boolean>;\n\n/**\n * Props needed by the usePluginEditor hook.\n */\nexport type UsePluginEditorProps = Pick<PluginEditorProps, 'pluginTypes' | 'value' | 'onChange'> & {\n  onHideQueryEditorChange?: (isHidden: boolean) => void;\n};\n\n/**\n * Returns the state/handlers that power the `PluginEditor` component. Useful for custom components that want to provide\n * a different UI, but want the same behavior of changing `kind` and `spec` together on plugin kind changes. Also\n * remembers previous `spec` values that it's seen, allowing and restores those values if a user switches the plugin\n * kind back.\n */\nexport function usePluginEditor(props: UsePluginEditorProps): {\n  pendingSelection?: PluginEditorSelection;\n  isLoading: boolean;\n  error: Error | null;\n  onSelectionChange: (s: PluginEditorSelection) => void;\n  onSpecChange: (next: UnknownSpec) => void;\n  rememberCurrentSpecState: () => void;\n} {\n  // eslint-disable-next-line @typescript-eslint/no-empty-function\n  const { pluginTypes, value, onHideQueryEditorChange = (): void => {} } = props; // setting onHideQueryEditorChange to empty function here because useEvent requires a function\n\n  // Keep a stable reference, so we don't run the effect below when we don't need to\n  const onChange = useEvent(props.onChange);\n  const onHideQuery = useEvent(onHideQueryEditorChange);\n\n  // The previous spec state for PluginType and kind and a helper function for remembering current values\n  const prevSpecState = useRef<PreviousSpecState>({\n    [value.selection.type]: { [value.selection.kind]: value.spec },\n  });\n  const rememberCurrentSpecState = useEvent(() => {\n    let byPluginType = prevSpecState.current[value.selection.type];\n    if (byPluginType === undefined) {\n      byPluginType = {};\n      prevSpecState.current[value.selection.type] = byPluginType;\n    }\n    byPluginType[value.selection.kind] = value.spec;\n  });\n\n  // The previous hide query state for each panel kind\n  const hideQueryState = useRef<HideQueryEditorState>({\n    [value.selection.kind]: false,\n  });\n\n  const { defaultPluginKinds } = usePluginRegistry();\n  const defaultPluginType = pluginTypes[0];\n  const defaultPluginKind = defaultPluginType ? defaultPluginKinds?.[defaultPluginType] : undefined;\n  const defaultPluginSelection =\n    defaultPluginType && defaultPluginKind\n      ? {\n          type: defaultPluginType,\n          kind: defaultPluginKind,\n        }\n      : undefined;\n  const initPendingSelection = !value.selection && defaultPluginSelection ? defaultPluginSelection : undefined;\n\n  // When kind changes and we haven't loaded that plugin before, we will need to enter a \"pending\" state so that we\n  // can generate proper initial spec values that match the new plugin kind\n  const [pendingSelection, setPendingSelection] = useState<PluginEditorSelection | undefined>(initPendingSelection);\n\n  // Take a default kind in case user write explicitly an empty kind in the initial value\n  useEffect(() => {\n    if (value.selection.kind === '') {\n      value.selection.kind = defaultPluginKind || '';\n    }\n  }, [value.selection, defaultPluginKind]);\n\n  const { data: plugin, isFetching, error } = usePlugin(pendingSelection?.type, pendingSelection?.kind || '');\n\n  useEffect(() => {\n    // Nothing to do if no new plugin kind is pending\n    if (!pendingSelection) return;\n\n    // Can't get spec value until we have a plugin\n    if (plugin === undefined || isFetching) return;\n\n    // Fire an onChange to change to the pending kind with initial values from the plugin\n    rememberCurrentSpecState();\n    onChange({\n      selection: pendingSelection,\n      spec: plugin.createInitialOptions ? plugin.createInitialOptions() : {},\n    });\n\n    if (pendingSelection.type === 'Panel') {\n      const panelPlugin = plugin as PanelPlugin;\n      hideQueryState.current[pendingSelection.kind] = !!panelPlugin.hideQueryEditor;\n      if (!!panelPlugin.hideQueryEditor !== hideQueryState.current[value.selection.kind]) {\n        onHideQuery(!!panelPlugin.hideQueryEditor);\n      }\n    }\n    setPendingSelection(undefined);\n  }, [\n    pendingSelection,\n    plugin,\n    isFetching,\n    rememberCurrentSpecState,\n    onChange,\n    onHideQuery,\n    hideQueryState,\n    value.selection,\n  ]);\n\n  /**\n   * When the user tries to change the plugin kind, make sure we have the correct spec for that plugin kind before we\n   * make the switch.\n   */\n  const onSelectionChange: PluginKindSelectProps['onChange'] = (nextSelection) => {\n    // If we already have state for this plugin type/kind from a previous selection, just use it\n    const previousState = prevSpecState.current[nextSelection.type]?.[nextSelection.kind];\n    if (previousState !== undefined) {\n      rememberCurrentSpecState();\n      onChange({\n        selection: nextSelection,\n        spec: previousState,\n      });\n    } else {\n      // Otherwise, kick off the async loading process\n      setPendingSelection(nextSelection);\n    }\n\n    if (\n      nextSelection.type === 'Panel' &&\n      hideQueryState.current[nextSelection.kind] !== undefined &&\n      hideQueryState.current[value.selection.kind] !== hideQueryState.current[nextSelection.kind]\n    ) {\n      onHideQuery(!!hideQueryState.current[nextSelection.kind]);\n    }\n  };\n\n  /**\n   * Spec changes are independent and always just set the spec state.\n   */\n  const onSpecChange: PluginSpecEditorProps['onChange'] = (next) => {\n    onChange(\n      produce(value, (draft) => {\n        draft.spec = next;\n      })\n    );\n  };\n\n  return {\n    pendingSelection,\n    isLoading: isFetching,\n    error,\n    onSelectionChange,\n    onSpecChange,\n    rememberCurrentSpecState,\n  };\n}\n"],"names":["useState","useRef","useEffect","produce","usePlugin","usePluginRegistry","useEvent","usePluginEditor","props","pluginTypes","value","onHideQueryEditorChange","onChange","onHideQuery","prevSpecState","selection","type","kind","spec","rememberCurrentSpecState","byPluginType","current","undefined","hideQueryState","defaultPluginKinds","defaultPluginType","defaultPluginKind","defaultPluginSelection","initPendingSelection","pendingSelection","setPendingSelection","data","plugin","isFetching","error","createInitialOptions","panelPlugin","hideQueryEditor","onSelectionChange","nextSelection","previousState","onSpecChange","next","draft","isLoading"],"mappings":"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"}

package/dist/components/PluginRegistry/PluginRegistry.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PluginRegistry/PluginRegistry.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { UnknownSpec } from '@perses-dev/core';\nimport { useRef, useCallback, useMemo, ReactNode, ReactElement } from 'react';\nimport {\n  PluginModuleResource,\n  PluginType,\n  PluginImplementation,\n  Plugin,\n  PluginLoader,\n  DefaultPluginKinds,\n} from '../../model';\nimport { PluginRegistryContext } from '../../runtime';\nimport { useEvent } from '../../utils';\nimport { usePluginIndexes, getTypeAndKindKey } from './plugin-indexes';\n\nexport interface PluginRegistryProps {\n  pluginLoader: PluginLoader;\n  defaultPluginKinds?: DefaultPluginKinds;\n  children?: ReactNode;\n}\n\n/**\n * PluginRegistryContext provider that keeps track of all available plugins and provides an API for getting them or\n * querying the metadata about them.\n */\nexport function PluginRegistry(props: PluginRegistryProps): ReactElement {\n  const {\n    pluginLoader: { getInstalledPlugins, importPluginModule },\n    children,\n    defaultPluginKinds,\n  } = props;\n\n  const getPluginIndexes = usePluginIndexes(getInstalledPlugins);\n\n  // De-dupe calls to import plugin modules\n  const importCache = useRef(new Map<PluginModuleResource, Promise<unknown>>());\n\n  // Do useEvent here since this accesses the importPluginModule prop and we want a stable reference to it for the\n  // callback below\n  const loadPluginModule = useEvent((resource: PluginModuleResource) => {\n    let request = importCache.current.get(resource);\n    if (request === undefined) {\n      request = importPluginModule(resource);\n      importCache.current.set(resource, request);\n\n      // Remove failed requests from the cache so they can potentially be retried\n      request.catch(() => importCache.current.delete(resource));\n    }\n    return request;\n  });\n\n  const getPlugin = useCallback(\n    async <T extends PluginType>(kind: T, name: string): Promise<PluginImplementation<T>> => {\n      // Get the indexes of the installed plugins\n      const pluginIndexes = await getPluginIndexes();\n\n      // Figure out what module the plugin is in by looking in the index\n      const typeAndKindKey = getTypeAndKindKey(kind, name);\n      const resource = pluginIndexes.pluginResourcesByNameAndKind.get(typeAndKindKey);\n      if (resource === undefined) {\n        throw new Error(`A ${name} plugin for kind '${kind}' is not installed`);\n      }\n\n      // Treat the plugin module as a bunch of named exports that have plugins\n      const pluginModule = (await loadPluginModule(resource)) as Record<string, Plugin<UnknownSpec>>;\n\n      // We currently assume that plugin modules will have named exports that match the kinds they handle\n      const plugin = pluginModule[name];\n      if (plugin === undefined) {\n        throw new Error(\n          `The ${name} plugin for kind '${kind}' is missing from the ${resource.metadata.name} plugin module`\n        );\n      }\n\n      return plugin as PluginImplementation<T>;\n    },\n    [getPluginIndexes, loadPluginModule]\n  );\n\n  const listPluginMetadata = useCallback(\n    async (pluginTypes: PluginType[]) => {\n      const pluginIndexes = await getPluginIndexes();\n      return pluginTypes.flatMap((type) => pluginIndexes.pluginMetadataByKind.get(type) ?? []);\n    },\n    [getPluginIndexes]\n  );\n\n  // Create the registry's context value and render\n  const context = useMemo(\n    () => ({ getPlugin, listPluginMetadata, defaultPluginKinds }),\n    [getPlugin, listPluginMetadata, defaultPluginKinds]\n  );\n  return <PluginRegistryContext.Provider value={context}>{children}</PluginRegistryContext.Provider>;\n}\n"],"names":["useRef","useCallback","useMemo","PluginRegistryContext","useEvent","usePluginIndexes","getTypeAndKindKey","PluginRegistry","props","pluginLoader","getInstalledPlugins","importPluginModule","children","defaultPluginKinds","getPluginIndexes","importCache","Map","loadPluginModule","resource","request","current","get","undefined","set","catch","delete","getPlugin","kind","name","pluginIndexes","typeAndKindKey","pluginResourcesByNameAndKind","Error","pluginModule","plugin","metadata","listPluginMetadata","pluginTypes","flatMap","type","pluginMetadataByKind","context","Provider","value"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAGjC,SAASA,MAAM,EAAEC,WAAW,EAAEC,OAAO,QAAiC,QAAQ;AAS9E,SAASC,qBAAqB,QAAQ,gBAAgB;AACtD,SAASC,QAAQ,QAAQ,cAAc;AACvC,SAASC,gBAAgB,EAAEC,iBAAiB,QAAQ,mBAAmB;AAQvE;;;CAGC,GACD,OAAO,SAASC,eAAeC,KAA0B;IACvD,MAAM,EACJC,cAAc,EAAEC,mBAAmB,EAAEC,kBAAkB,EAAE,EACzDC,QAAQ,EACRC,kBAAkB,EACnB,GAAGL;IAEJ,MAAMM,mBAAmBT,iBAAiBK;IAE1C,yCAAyC;IACzC,MAAMK,cAAcf,OAAO,IAAIgB;IAE/B,gHAAgH;IAChH,iBAAiB;IACjB,MAAMC,mBAAmBb,SAAS,CAACc;QACjC,IAAIC,UAAUJ,YAAYK,OAAO,CAACC,GAAG,CAACH;QACtC,IAAIC,YAAYG,WAAW;YACzBH,UAAUR,mBAAmBO;YAC7BH,YAAYK,OAAO,CAACG,GAAG,CAACL,UAAUC;YAElC,2EAA2E;YAC3EA,QAAQK,KAAK,CAAC,IAAMT,YAAYK,OAAO,CAACK,MAAM,CAACP;QACjD;QACA,OAAOC;IACT;IAEA,MAAMO,YAAYzB,YAChB,OAA6B0B,MAASC;QACpC,2CAA2C;QAC3C,MAAMC,gBAAgB,MAAMf;QAE5B,kEAAkE;QAClE,MAAMgB,iBAAiBxB,kBAAkBqB,MAAMC;QAC/C,MAAMV,WAAWW,cAAcE,4BAA4B,CAACV,GAAG,CAACS;QAChE,IAAIZ,aAAaI,WAAW;YAC1B,MAAM,IAAIU,MAAM,CAAC,EAAE,EAAEJ,KAAK,kBAAkB,EAAED,KAAK,kBAAkB,CAAC;QACxE;QAEA,wEAAwE;QACxE,MAAMM,eAAgB,MAAMhB,iBAAiBC;QAE7C,mGAAmG;QACnG,MAAMgB,SAASD,YAAY,CAACL,KAAK;QACjC,IAAIM,WAAWZ,WAAW;YACxB,MAAM,IAAIU,MACR,CAAC,IAAI,EAAEJ,KAAK,kBAAkB,EAAED,KAAK,sBAAsB,EAAET,SAASiB,QAAQ,CAACP,IAAI,CAAC,cAAc,CAAC;QAEvG;QAEA,OAAOM;IACT,GACA;QAACpB;QAAkBG;KAAiB;IAGtC,MAAMmB,qBAAqBnC,YACzB,OAAOoC;QACL,MAAMR,gBAAgB,MAAMf;QAC5B,OAAOuB,YAAYC,OAAO,CAAC,CAACC,OAASV,cAAcW,oBAAoB,CAACnB,GAAG,CAACkB,SAAS,EAAE;IACzF,GACA;QAACzB;KAAiB;IAGpB,iDAAiD;IACjD,MAAM2B,UAAUvC,QACd,IAAO,CAAA;YAAEwB;YAAWU;YAAoBvB;QAAmB,CAAA,GAC3D;QAACa;QAAWU;QAAoBvB;KAAmB;IAErD,qBAAO,KAACV,sBAAsBuC,QAAQ;QAACC,OAAOF;kBAAU7B;;AAC1D"}
+{"version":3,"sources":["../../../src/components/PluginRegistry/PluginRegistry.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { UnknownSpec } from '@perses-dev/spec';\nimport { useRef, useCallback, useMemo, ReactNode, ReactElement } from 'react';\nimport {\n  PluginModuleResource,\n  PluginType,\n  PluginImplementation,\n  Plugin,\n  PluginLoader,\n  DefaultPluginKinds,\n} from '../../model';\nimport { PluginRegistryContext } from '../../runtime';\nimport { useEvent } from '../../utils';\nimport { usePluginIndexes, getTypeAndKindKey } from './plugin-indexes';\n\nexport interface PluginRegistryProps {\n  pluginLoader: PluginLoader;\n  defaultPluginKinds?: DefaultPluginKinds;\n  children?: ReactNode;\n}\n\n/**\n * PluginRegistryContext provider that keeps track of all available plugins and provides an API for getting them or\n * querying the metadata about them.\n */\nexport function PluginRegistry(props: PluginRegistryProps): ReactElement {\n  const {\n    pluginLoader: { getInstalledPlugins, importPluginModule },\n    children,\n    defaultPluginKinds,\n  } = props;\n\n  const getPluginIndexes = usePluginIndexes(getInstalledPlugins);\n\n  // De-dupe calls to import plugin modules\n  const importCache = useRef(new Map<PluginModuleResource, Promise<unknown>>());\n\n  // Do useEvent here since this accesses the importPluginModule prop and we want a stable reference to it for the\n  // callback below\n  const loadPluginModule = useEvent((resource: PluginModuleResource) => {\n    let request = importCache.current.get(resource);\n    if (request === undefined) {\n      request = importPluginModule(resource);\n      importCache.current.set(resource, request);\n\n      // Remove failed requests from the cache so they can potentially be retried\n      request.catch(() => importCache.current.delete(resource));\n    }\n    return request;\n  });\n\n  const getPlugin = useCallback(\n    async <T extends PluginType>(kind: T, name: string): Promise<PluginImplementation<T>> => {\n      // Get the indexes of the installed plugins\n      const pluginIndexes = await getPluginIndexes();\n\n      // Figure out what module the plugin is in by looking in the index\n      const typeAndKindKey = getTypeAndKindKey(kind, name);\n      const resource = pluginIndexes.pluginResourcesByNameAndKind.get(typeAndKindKey);\n      if (resource === undefined) {\n        throw new Error(`A ${name} plugin for kind '${kind}' is not installed`);\n      }\n\n      // Treat the plugin module as a bunch of named exports that have plugins\n      const pluginModule = (await loadPluginModule(resource)) as Record<string, Plugin<UnknownSpec>>;\n\n      // We currently assume that plugin modules will have named exports that match the kinds they handle\n      const plugin = pluginModule[name];\n      if (plugin === undefined) {\n        throw new Error(\n          `The ${name} plugin for kind '${kind}' is missing from the ${resource.metadata.name} plugin module`\n        );\n      }\n\n      return plugin as PluginImplementation<T>;\n    },\n    [getPluginIndexes, loadPluginModule]\n  );\n\n  const listPluginMetadata = useCallback(\n    async (pluginTypes: PluginType[]) => {\n      const pluginIndexes = await getPluginIndexes();\n      return pluginTypes.flatMap((type) => pluginIndexes.pluginMetadataByKind.get(type) ?? []);\n    },\n    [getPluginIndexes]\n  );\n\n  // Create the registry's context value and render\n  const context = useMemo(\n    () => ({ getPlugin, listPluginMetadata, defaultPluginKinds }),\n    [getPlugin, listPluginMetadata, defaultPluginKinds]\n  );\n  return <PluginRegistryContext.Provider value={context}>{children}</PluginRegistryContext.Provider>;\n}\n"],"names":["useRef","useCallback","useMemo","PluginRegistryContext","useEvent","usePluginIndexes","getTypeAndKindKey","PluginRegistry","props","pluginLoader","getInstalledPlugins","importPluginModule","children","defaultPluginKinds","getPluginIndexes","importCache","Map","loadPluginModule","resource","request","current","get","undefined","set","catch","delete","getPlugin","kind","name","pluginIndexes","typeAndKindKey","pluginResourcesByNameAndKind","Error","pluginModule","plugin","metadata","listPluginMetadata","pluginTypes","flatMap","type","pluginMetadataByKind","context","Provider","value"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAGjC,SAASA,MAAM,EAAEC,WAAW,EAAEC,OAAO,QAAiC,QAAQ;AAS9E,SAASC,qBAAqB,QAAQ,gBAAgB;AACtD,SAASC,QAAQ,QAAQ,cAAc;AACvC,SAASC,gBAAgB,EAAEC,iBAAiB,QAAQ,mBAAmB;AAQvE;;;CAGC,GACD,OAAO,SAASC,eAAeC,KAA0B;IACvD,MAAM,EACJC,cAAc,EAAEC,mBAAmB,EAAEC,kBAAkB,EAAE,EACzDC,QAAQ,EACRC,kBAAkB,EACnB,GAAGL;IAEJ,MAAMM,mBAAmBT,iBAAiBK;IAE1C,yCAAyC;IACzC,MAAMK,cAAcf,OAAO,IAAIgB;IAE/B,gHAAgH;IAChH,iBAAiB;IACjB,MAAMC,mBAAmBb,SAAS,CAACc;QACjC,IAAIC,UAAUJ,YAAYK,OAAO,CAACC,GAAG,CAACH;QACtC,IAAIC,YAAYG,WAAW;YACzBH,UAAUR,mBAAmBO;YAC7BH,YAAYK,OAAO,CAACG,GAAG,CAACL,UAAUC;YAElC,2EAA2E;YAC3EA,QAAQK,KAAK,CAAC,IAAMT,YAAYK,OAAO,CAACK,MAAM,CAACP;QACjD;QACA,OAAOC;IACT;IAEA,MAAMO,YAAYzB,YAChB,OAA6B0B,MAASC;QACpC,2CAA2C;QAC3C,MAAMC,gBAAgB,MAAMf;QAE5B,kEAAkE;QAClE,MAAMgB,iBAAiBxB,kBAAkBqB,MAAMC;QAC/C,MAAMV,WAAWW,cAAcE,4BAA4B,CAACV,GAAG,CAACS;QAChE,IAAIZ,aAAaI,WAAW;YAC1B,MAAM,IAAIU,MAAM,CAAC,EAAE,EAAEJ,KAAK,kBAAkB,EAAED,KAAK,kBAAkB,CAAC;QACxE;QAEA,wEAAwE;QACxE,MAAMM,eAAgB,MAAMhB,iBAAiBC;QAE7C,mGAAmG;QACnG,MAAMgB,SAASD,YAAY,CAACL,KAAK;QACjC,IAAIM,WAAWZ,WAAW;YACxB,MAAM,IAAIU,MACR,CAAC,IAAI,EAAEJ,KAAK,kBAAkB,EAAED,KAAK,sBAAsB,EAAET,SAASiB,QAAQ,CAACP,IAAI,CAAC,cAAc,CAAC;QAEvG;QAEA,OAAOM;IACT,GACA;QAACpB;QAAkBG;KAAiB;IAGtC,MAAMmB,qBAAqBnC,YACzB,OAAOoC;QACL,MAAMR,gBAAgB,MAAMf;QAC5B,OAAOuB,YAAYC,OAAO,CAAC,CAACC,OAASV,cAAcW,oBAAoB,CAACnB,GAAG,CAACkB,SAAS,EAAE;IACzF,GACA;QAACzB;KAAiB;IAGpB,iDAAiD;IACjD,MAAM2B,UAAUvC,QACd,IAAO,CAAA;YAAEwB;YAAWU;YAAoBvB;QAAmB,CAAA,GAC3D;QAACa;QAAWU;QAAoBvB;KAAmB;IAErD,qBAAO,KAACV,sBAAsBuC,QAAQ;QAACC,OAAOF;kBAAU7B;;AAC1D"}

package/dist/components/PluginSpecEditor/PluginSpecEditor.d.ts

@@ -1,4 +1,4 @@
-import { UnknownSpec } from '@perses-dev/core';
+import { UnknownSpec } from '@perses-dev/spec';
 import { ReactElement } from 'react';
 import { OptionsEditorProps } from '../../model';
 import { PluginEditorSelection } from '../PluginEditor';

package/dist/components/PluginSpecEditor/PluginSpecEditor.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PluginSpecEditor/PluginSpecEditor.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { ErrorAlert } from '@perses-dev/components';\nimport { UnknownSpec } from '@perses-dev/core';\nimport { ReactElement } from 'react';\nimport { CircularProgress, Stack } from '@mui/material';\nimport { OptionsEditorProps } from '../../model';\nimport { usePlugin } from '../../runtime';\nimport { PluginEditorSelection } from '../PluginEditor';\n\nexport interface PluginSpecEditorProps extends OptionsEditorProps<UnknownSpec> {\n  pluginSelection: PluginEditorSelection;\n  isEditor?: boolean;\n}\n\nexport function PluginSpecEditor(props: PluginSpecEditorProps): ReactElement | null {\n  const {\n    pluginSelection: { type: pluginType, kind: pluginKind },\n    ...others\n  } = props;\n  const { data: plugin, isLoading, error } = usePlugin(pluginType, pluginKind);\n\n  if (error) {\n    return <ErrorAlert error={error} />;\n  }\n\n  if (isLoading) {\n    return (\n      <Stack width=\"100%\" sx={{ alignItems: 'center', justifyContent: 'center' }}>\n        <CircularProgress />\n      </Stack>\n    );\n  }\n\n  if (!plugin) {\n    throw new Error(`Missing implementation for ${pluginType} plugin with kind '${pluginKind}'`);\n  }\n\n  if (pluginType === 'Panel') {\n    throw new Error('This editor should not be used for panel type. Please use Panel Spec Editor instead.');\n  }\n  const { OptionsEditorComponent } = plugin;\n\n  return OptionsEditorComponent ? <OptionsEditorComponent {...others} /> : null;\n}\n"],"names":["ErrorAlert","CircularProgress","Stack","usePlugin","PluginSpecEditor","props","pluginSelection","type","pluginType","kind","pluginKind","others","data","plugin","isLoading","error","width","sx","alignItems","justifyContent","Error","OptionsEditorComponent"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,UAAU,QAAQ,yBAAyB;AAGpD,SAASC,gBAAgB,EAAEC,KAAK,QAAQ,gBAAgB;AAExD,SAASC,SAAS,QAAQ,gBAAgB;AAQ1C,OAAO,SAASC,iBAAiBC,KAA4B;IAC3D,MAAM,EACJC,iBAAiB,EAAEC,MAAMC,UAAU,EAAEC,MAAMC,UAAU,EAAE,EACvD,GAAGC,QACJ,GAAGN;IACJ,MAAM,EAAEO,MAAMC,MAAM,EAAEC,SAAS,EAAEC,KAAK,EAAE,GAAGZ,UAAUK,YAAYE;IAEjE,IAAIK,OAAO;QACT,qBAAO,KAACf;YAAWe,OAAOA;;IAC5B;IAEA,IAAID,WAAW;QACb,qBACE,KAACZ;YAAMc,OAAM;YAAOC,IAAI;gBAAEC,YAAY;gBAAUC,gBAAgB;YAAS;sBACvE,cAAA,KAAClB;;IAGP;IAEA,IAAI,CAACY,QAAQ;QACX,MAAM,IAAIO,MAAM,CAAC,2BAA2B,EAAEZ,WAAW,mBAAmB,EAAEE,WAAW,CAAC,CAAC;IAC7F;IAEA,IAAIF,eAAe,SAAS;QAC1B,MAAM,IAAIY,MAAM;IAClB;IACA,MAAM,EAAEC,sBAAsB,EAAE,GAAGR;IAEnC,OAAOQ,uCAAyB,KAACA;QAAwB,GAAGV,MAAM;SAAO;AAC3E"}
+{"version":3,"sources":["../../../src/components/PluginSpecEditor/PluginSpecEditor.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { ErrorAlert } from '@perses-dev/components';\nimport { UnknownSpec } from '@perses-dev/spec';\nimport { ReactElement } from 'react';\nimport { CircularProgress, Stack } from '@mui/material';\nimport { OptionsEditorProps } from '../../model';\nimport { usePlugin } from '../../runtime';\nimport { PluginEditorSelection } from '../PluginEditor';\n\nexport interface PluginSpecEditorProps extends OptionsEditorProps<UnknownSpec> {\n  pluginSelection: PluginEditorSelection;\n  isEditor?: boolean;\n}\n\nexport function PluginSpecEditor(props: PluginSpecEditorProps): ReactElement | null {\n  const {\n    pluginSelection: { type: pluginType, kind: pluginKind },\n    ...others\n  } = props;\n  const { data: plugin, isLoading, error } = usePlugin(pluginType, pluginKind);\n\n  if (error) {\n    return <ErrorAlert error={error} />;\n  }\n\n  if (isLoading) {\n    return (\n      <Stack width=\"100%\" sx={{ alignItems: 'center', justifyContent: 'center' }}>\n        <CircularProgress />\n      </Stack>\n    );\n  }\n\n  if (!plugin) {\n    throw new Error(`Missing implementation for ${pluginType} plugin with kind '${pluginKind}'`);\n  }\n\n  if (pluginType === 'Panel') {\n    throw new Error('This editor should not be used for panel type. Please use Panel Spec Editor instead.');\n  }\n  const { OptionsEditorComponent } = plugin;\n\n  return OptionsEditorComponent ? <OptionsEditorComponent {...others} /> : null;\n}\n"],"names":["ErrorAlert","CircularProgress","Stack","usePlugin","PluginSpecEditor","props","pluginSelection","type","pluginType","kind","pluginKind","others","data","plugin","isLoading","error","width","sx","alignItems","justifyContent","Error","OptionsEditorComponent"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,UAAU,QAAQ,yBAAyB;AAGpD,SAASC,gBAAgB,EAAEC,KAAK,QAAQ,gBAAgB;AAExD,SAASC,SAAS,QAAQ,gBAAgB;AAQ1C,OAAO,SAASC,iBAAiBC,KAA4B;IAC3D,MAAM,EACJC,iBAAiB,EAAEC,MAAMC,UAAU,EAAEC,MAAMC,UAAU,EAAE,EACvD,GAAGC,QACJ,GAAGN;IACJ,MAAM,EAAEO,MAAMC,MAAM,EAAEC,SAAS,EAAEC,KAAK,EAAE,GAAGZ,UAAUK,YAAYE;IAEjE,IAAIK,OAAO;QACT,qBAAO,KAACf;YAAWe,OAAOA;;IAC5B;IAEA,IAAID,WAAW;QACb,qBACE,KAACZ;YAAMc,OAAM;YAAOC,IAAI;gBAAEC,YAAY;gBAAUC,gBAAgB;YAAS;sBACvE,cAAA,KAAClB;;IAGP;IAEA,IAAI,CAACY,QAAQ;QACX,MAAM,IAAIO,MAAM,CAAC,2BAA2B,EAAEZ,WAAW,mBAAmB,EAAEE,WAAW,CAAC,CAAC;IAC7F;IAEA,IAAIF,eAAe,SAAS;QAC1B,MAAM,IAAIY,MAAM;IAClB;IACA,MAAM,EAAEC,sBAAsB,EAAE,GAAGR;IAEnC,OAAOQ,uCAAyB,KAACA;QAAwB,GAAGV,MAAM;SAAO;AAC3E"}

package/dist/components/TimeRangeControls/TimeRangeControls.js

@@ -18,7 +18,7 @@ import ZoomIn from 'mdi-material-ui/PlusCircleOutline';
 import ZoomOut from 'mdi-material-ui/MinusCircleOutline';
 import { Stack } from '@mui/material';
 import { RefreshIntervalPicker, InfoTooltip, ToolbarIconButton, TimeRangeSelector, getTimeZoneOptions, buildRelativeTimeOption } from '@perses-dev/components';
-import { parseDurationString } from '@perses-dev/core';
+import { parseDurationString } from '@perses-dev/spec';
 import { useCallback } from 'react';
 import { TOOLTIP_TEXT } from '../../constants';
 import { useTimeRange, useShowCustomTimeRangeSetting, useTimeRangeOptionsSetting, useShowZoomRangeSetting } from '../../runtime';

package/dist/components/TimeRangeControls/TimeRangeControls.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/TimeRangeControls/TimeRangeControls.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport RefreshIcon from 'mdi-material-ui/Refresh';\n// eslint-disable-next-line import/no-duplicates\nimport ZoomIn from 'mdi-material-ui/PlusCircleOutline';\n// eslint-disable-next-line import/no-duplicates\nimport ZoomOut from 'mdi-material-ui/MinusCircleOutline';\nimport { Stack } from '@mui/material';\nimport {\n  RefreshIntervalPicker,\n  InfoTooltip,\n  TimeOption,\n  ToolbarIconButton,\n  TimeRangeSelector,\n  TimeZoneOption,\n  getTimeZoneOptions,\n  buildRelativeTimeOption,\n} from '@perses-dev/components';\nimport { AbsoluteTimeRange, DurationString, parseDurationString, RelativeTimeRange } from '@perses-dev/core';\nimport { ReactElement, useCallback } from 'react';\nimport { TOOLTIP_TEXT } from '../../constants';\nimport {\n  useTimeRange,\n  useShowCustomTimeRangeSetting,\n  useTimeRangeOptionsSetting,\n  useShowZoomRangeSetting,\n} from '../../runtime';\nexport const DEFAULT_REFRESH_INTERVAL_OPTIONS: TimeOption[] = [\n  { value: { pastDuration: '0s' }, display: 'Off' },\n  { value: { pastDuration: '5s' }, display: '5s' },\n  { value: { pastDuration: '10s' }, display: '10s' },\n  { value: { pastDuration: '15s' }, display: '15s' },\n  { value: { pastDuration: '30s' }, display: '30s' },\n  { value: { pastDuration: '60s' }, display: '1m' },\n];\n\nconst DEFAULT_HEIGHT = '34px';\n\ninterface TimeRangeControlsProps {\n  // The controls look best at heights >= 28 pixels\n  heightPx?: number;\n  showTimeRangeSelector?: boolean;\n  showRefreshButton?: boolean;\n  showRefreshInterval?: boolean;\n  showCustomTimeRange?: boolean;\n  showZoomButtons?: boolean;\n  timePresets?: TimeOption[];\n  timeZone: string;\n  onTimeZoneChange: (timeZone: TimeZoneOption) => void;\n}\n\nexport function TimeRangeControls({\n  heightPx,\n  showTimeRangeSelector = true,\n  showRefreshButton = true,\n  showRefreshInterval = true,\n  showCustomTimeRange,\n  showZoomButtons = true,\n  timePresets,\n  timeZone,\n  onTimeZoneChange,\n}: TimeRangeControlsProps): ReactElement {\n  const { timeRange, setTimeRange, refresh, refreshInterval, setRefreshInterval } = useTimeRange();\n\n  const showCustomTimeRangeValue = useShowCustomTimeRangeSetting(showCustomTimeRange);\n  const showZoomInOutButtons = useShowZoomRangeSetting(showZoomButtons);\n  const timePresetsValue = useTimeRangeOptionsSetting(timePresets);\n\n  // Convert height to a string, then use the string for styling\n  const height = heightPx === undefined ? DEFAULT_HEIGHT : `${heightPx}px`;\n\n  // add time preset if one does not match duration given in time range\n  if (\n    'pastDuration' in timeRange &&\n    !timePresetsValue.some((option) => option.value.pastDuration === timeRange['pastDuration'])\n  ) {\n    timePresetsValue.push(buildRelativeTimeOption(timeRange['pastDuration']));\n  }\n\n  // set the new refresh interval both in the dashboard context & as query param\n  const handleRefreshIntervalChange = useCallback(\n    (duration: DurationString) => {\n      setRefreshInterval(duration);\n    },\n    [setRefreshInterval]\n  );\n\n  const fromDurationToMillis = (strDuration: string): number => {\n    const duration = parseDurationString(strDuration);\n    const millis =\n      // eslint-disable-next-line prettier/prettier\n      ((duration.seconds ?? 0) +\n        (duration.minutes ?? 0) * 60 +\n        (duration.hours ?? 0) * 3600 +\n        (duration.days ?? 0) * 86400 +\n        (duration.weeks ?? 0) * 7 * 86400 +\n        (duration.months ?? 0) * 30.436875 * 86400 + // avg month duration is ok for zoom purposes\n        (duration.years ?? 0) * 365.2425 * 86400) * // avg year duration is ok for zoom purposes\n      // eslint-disable-next-line prettier/prettier\n      1000; // to milliseconds\n    return millis;\n  };\n\n  // Function to double current time range, adding 50% before current start and 50% after current end\n  const doubleTimeRange = (): AbsoluteTimeRange => {\n    let newStart, newEnd, extendEndsBy;\n    const now = new Date();\n    if (Object.hasOwn(timeRange, 'start')) {\n      // current range is absolute\n      const absVal = timeRange as AbsoluteTimeRange;\n      extendEndsBy = (absVal.end.getTime() - absVal.start.getTime()) / 2; // half it to add 50% before current start and after current end\n      newStart = new Date(absVal.start.getTime() - extendEndsBy);\n      newEnd = new Date(absVal.end.getTime() + extendEndsBy);\n    } else {\n      // current range is relative\n      const relVal = timeRange as RelativeTimeRange;\n      extendEndsBy = fromDurationToMillis(relVal.pastDuration) / 2;\n      newEnd = typeof relVal.end === 'undefined' ? now : new Date(relVal.end.getTime() + extendEndsBy);\n      newStart = new Date(newEnd.getTime() - extendEndsBy * 4);\n    }\n    if (newEnd.getTime() > now.getTime()) {\n      // if the new computed end is in the future\n      newEnd = now;\n      newStart.setTime(now.getTime() - extendEndsBy * 4);\n    }\n    if (newStart.getTime() < 1) {\n      newStart.setTime(1);\n    }\n    return { start: newStart, end: newEnd };\n  };\n\n  // Function to half current time range, cutting 25% before current start and 25% after current end\n  const halfTimeRange = (): AbsoluteTimeRange => {\n    let newStart, newEnd;\n    if (Object.hasOwn(timeRange, 'start')) {\n      const absVal = timeRange as AbsoluteTimeRange;\n      const shrinkEndsBy = (absVal.end.getTime() - absVal.start.getTime()) / 4;\n      newStart = new Date(absVal.start.getTime() + shrinkEndsBy);\n      newEnd = new Date(absVal.end.getTime() - shrinkEndsBy);\n    } else {\n      const relVal = timeRange as RelativeTimeRange;\n      const shrinkEndsBy = fromDurationToMillis(relVal.pastDuration) / 4; // 25% of it to cut after current start and before current end\n      const endIsAbsolute = typeof relVal.end !== 'undefined';\n      newEnd = endIsAbsolute ? new Date(relVal.end!.getTime() - shrinkEndsBy) : new Date();\n      newStart = new Date(newEnd.getTime() - shrinkEndsBy * 2);\n    }\n    if (newStart.getTime() >= newEnd.getTime() - 1000) {\n      newStart.setTime(newEnd.getTime() - 1000);\n    }\n    return { start: newStart, end: newEnd };\n  };\n\n  const setHalfTimeRange = (): void => setTimeRange(halfTimeRange());\n  const setDoubleTimeRange = (): void => setTimeRange(doubleTimeRange());\n\n  const handleTimeZoneChange = useCallback(\n    (tz: TimeZoneOption) => {\n      onTimeZoneChange(tz);\n    },\n    [onTimeZoneChange]\n  );\n\n  return (\n    <Stack direction=\"row\" spacing={1}>\n      {showTimeRangeSelector && (\n        <TimeRangeSelector\n          timeOptions={timePresetsValue}\n          value={timeRange}\n          onChange={setTimeRange}\n          height={height}\n          showCustomTimeRange={showCustomTimeRangeValue}\n          timeZone={timeZone}\n          timeZoneOptions={getTimeZoneOptions()}\n          onTimeZoneChange={handleTimeZoneChange}\n        />\n      )}\n      {showZoomInOutButtons && (\n        <InfoTooltip description={TOOLTIP_TEXT.zoomOut}>\n          <ToolbarIconButton aria-label={TOOLTIP_TEXT.zoomOut} onClick={setDoubleTimeRange} sx={{ height }}>\n            <ZoomOut />\n          </ToolbarIconButton>\n        </InfoTooltip>\n      )}\n      {showZoomInOutButtons && (\n        <InfoTooltip description={TOOLTIP_TEXT.zoomIn}>\n          <ToolbarIconButton aria-label={TOOLTIP_TEXT.zoomIn} onClick={setHalfTimeRange} sx={{ height }}>\n            <ZoomIn />\n          </ToolbarIconButton>\n        </InfoTooltip>\n      )}\n      {showRefreshButton && (\n        <InfoTooltip description={TOOLTIP_TEXT.refresh}>\n          <ToolbarIconButton aria-label={TOOLTIP_TEXT.refresh} onClick={refresh} sx={{ height }}>\n            <RefreshIcon />\n          </ToolbarIconButton>\n        </InfoTooltip>\n      )}\n      {showRefreshInterval && (\n        <InfoTooltip description={TOOLTIP_TEXT.refreshInterval}>\n          <RefreshIntervalPicker\n            timeOptions={DEFAULT_REFRESH_INTERVAL_OPTIONS}\n            value={\n              /* TODO: There is a bug here which should be fixed in a proper way. (This is only a quick remedy)\n                 display: 1m has the pastDuration of 60s. Initially (if the persisted value is 1m) when the page is loaded, instead of 60s, 1m is passed down.              \n                 This only happens for 1m, because for other items the display and the pastDuration are the same.  Example 30s-30s\n                 HERE The value MUST always be pastDuration, otherwise the component would not work as expected. \n              */\n              DEFAULT_REFRESH_INTERVAL_OPTIONS.some((i) => i.value.pastDuration === refreshInterval)\n                ? refreshInterval\n                : DEFAULT_REFRESH_INTERVAL_OPTIONS.find((i) => i.display === refreshInterval)?.value.pastDuration\n            }\n            onChange={handleRefreshIntervalChange}\n            height={height}\n          />\n        </InfoTooltip>\n      )}\n    </Stack>\n  );\n}\n"],"names":["RefreshIcon","ZoomIn","ZoomOut","Stack","RefreshIntervalPicker","InfoTooltip","ToolbarIconButton","TimeRangeSelector","getTimeZoneOptions","buildRelativeTimeOption","parseDurationString","useCallback","TOOLTIP_TEXT","useTimeRange","useShowCustomTimeRangeSetting","useTimeRangeOptionsSetting","useShowZoomRangeSetting","DEFAULT_REFRESH_INTERVAL_OPTIONS","value","pastDuration","display","DEFAULT_HEIGHT","TimeRangeControls","heightPx","showTimeRangeSelector","showRefreshButton","showRefreshInterval","showCustomTimeRange","showZoomButtons","timePresets","timeZone","onTimeZoneChange","timeRange","setTimeRange","refresh","refreshInterval","setRefreshInterval","showCustomTimeRangeValue","showZoomInOutButtons","timePresetsValue","height","undefined","some","option","push","handleRefreshIntervalChange","duration","fromDurationToMillis","strDuration","millis","seconds","minutes","hours","days","weeks","months","years","doubleTimeRange","newStart","newEnd","extendEndsBy","now","Date","Object","hasOwn","absVal","end","getTime","start","relVal","setTime","halfTimeRange","shrinkEndsBy","endIsAbsolute","setHalfTimeRange","setDoubleTimeRange","handleTimeZoneChange","tz","direction","spacing","timeOptions","onChange","timeZoneOptions","description","zoomOut","aria-label","onClick","sx","zoomIn","i","find"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/TimeRangeControls/TimeRangeControls.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport RefreshIcon from 'mdi-material-ui/Refresh';\n// eslint-disable-next-line import/no-duplicates\nimport ZoomIn from 'mdi-material-ui/PlusCircleOutline';\n// eslint-disable-next-line import/no-duplicates\nimport ZoomOut from 'mdi-material-ui/MinusCircleOutline';\nimport { Stack } from '@mui/material';\nimport {\n  RefreshIntervalPicker,\n  InfoTooltip,\n  TimeOption,\n  ToolbarIconButton,\n  TimeRangeSelector,\n  TimeZoneOption,\n  getTimeZoneOptions,\n  buildRelativeTimeOption,\n} from '@perses-dev/components';\nimport { AbsoluteTimeRange, DurationString, parseDurationString, RelativeTimeRange } from '@perses-dev/spec';\nimport { ReactElement, useCallback } from 'react';\nimport { TOOLTIP_TEXT } from '../../constants';\nimport {\n  useTimeRange,\n  useShowCustomTimeRangeSetting,\n  useTimeRangeOptionsSetting,\n  useShowZoomRangeSetting,\n} from '../../runtime';\nexport const DEFAULT_REFRESH_INTERVAL_OPTIONS: TimeOption[] = [\n  { value: { pastDuration: '0s' }, display: 'Off' },\n  { value: { pastDuration: '5s' }, display: '5s' },\n  { value: { pastDuration: '10s' }, display: '10s' },\n  { value: { pastDuration: '15s' }, display: '15s' },\n  { value: { pastDuration: '30s' }, display: '30s' },\n  { value: { pastDuration: '60s' }, display: '1m' },\n];\n\nconst DEFAULT_HEIGHT = '34px';\n\ninterface TimeRangeControlsProps {\n  // The controls look best at heights >= 28 pixels\n  heightPx?: number;\n  showTimeRangeSelector?: boolean;\n  showRefreshButton?: boolean;\n  showRefreshInterval?: boolean;\n  showCustomTimeRange?: boolean;\n  showZoomButtons?: boolean;\n  timePresets?: TimeOption[];\n  timeZone: string;\n  onTimeZoneChange: (timeZone: TimeZoneOption) => void;\n}\n\nexport function TimeRangeControls({\n  heightPx,\n  showTimeRangeSelector = true,\n  showRefreshButton = true,\n  showRefreshInterval = true,\n  showCustomTimeRange,\n  showZoomButtons = true,\n  timePresets,\n  timeZone,\n  onTimeZoneChange,\n}: TimeRangeControlsProps): ReactElement {\n  const { timeRange, setTimeRange, refresh, refreshInterval, setRefreshInterval } = useTimeRange();\n\n  const showCustomTimeRangeValue = useShowCustomTimeRangeSetting(showCustomTimeRange);\n  const showZoomInOutButtons = useShowZoomRangeSetting(showZoomButtons);\n  const timePresetsValue = useTimeRangeOptionsSetting(timePresets);\n\n  // Convert height to a string, then use the string for styling\n  const height = heightPx === undefined ? DEFAULT_HEIGHT : `${heightPx}px`;\n\n  // add time preset if one does not match duration given in time range\n  if (\n    'pastDuration' in timeRange &&\n    !timePresetsValue.some((option) => option.value.pastDuration === timeRange['pastDuration'])\n  ) {\n    timePresetsValue.push(buildRelativeTimeOption(timeRange['pastDuration']));\n  }\n\n  // set the new refresh interval both in the dashboard context & as query param\n  const handleRefreshIntervalChange = useCallback(\n    (duration: DurationString) => {\n      setRefreshInterval(duration);\n    },\n    [setRefreshInterval]\n  );\n\n  const fromDurationToMillis = (strDuration: string): number => {\n    const duration = parseDurationString(strDuration);\n    const millis =\n      // eslint-disable-next-line prettier/prettier\n      ((duration.seconds ?? 0) +\n        (duration.minutes ?? 0) * 60 +\n        (duration.hours ?? 0) * 3600 +\n        (duration.days ?? 0) * 86400 +\n        (duration.weeks ?? 0) * 7 * 86400 +\n        (duration.months ?? 0) * 30.436875 * 86400 + // avg month duration is ok for zoom purposes\n        (duration.years ?? 0) * 365.2425 * 86400) * // avg year duration is ok for zoom purposes\n      // eslint-disable-next-line prettier/prettier\n      1000; // to milliseconds\n    return millis;\n  };\n\n  // Function to double current time range, adding 50% before current start and 50% after current end\n  const doubleTimeRange = (): AbsoluteTimeRange => {\n    let newStart, newEnd, extendEndsBy;\n    const now = new Date();\n    if (Object.hasOwn(timeRange, 'start')) {\n      // current range is absolute\n      const absVal = timeRange as AbsoluteTimeRange;\n      extendEndsBy = (absVal.end.getTime() - absVal.start.getTime()) / 2; // half it to add 50% before current start and after current end\n      newStart = new Date(absVal.start.getTime() - extendEndsBy);\n      newEnd = new Date(absVal.end.getTime() + extendEndsBy);\n    } else {\n      // current range is relative\n      const relVal = timeRange as RelativeTimeRange;\n      extendEndsBy = fromDurationToMillis(relVal.pastDuration) / 2;\n      newEnd = typeof relVal.end === 'undefined' ? now : new Date(relVal.end.getTime() + extendEndsBy);\n      newStart = new Date(newEnd.getTime() - extendEndsBy * 4);\n    }\n    if (newEnd.getTime() > now.getTime()) {\n      // if the new computed end is in the future\n      newEnd = now;\n      newStart.setTime(now.getTime() - extendEndsBy * 4);\n    }\n    if (newStart.getTime() < 1) {\n      newStart.setTime(1);\n    }\n    return { start: newStart, end: newEnd };\n  };\n\n  // Function to half current time range, cutting 25% before current start and 25% after current end\n  const halfTimeRange = (): AbsoluteTimeRange => {\n    let newStart, newEnd;\n    if (Object.hasOwn(timeRange, 'start')) {\n      const absVal = timeRange as AbsoluteTimeRange;\n      const shrinkEndsBy = (absVal.end.getTime() - absVal.start.getTime()) / 4;\n      newStart = new Date(absVal.start.getTime() + shrinkEndsBy);\n      newEnd = new Date(absVal.end.getTime() - shrinkEndsBy);\n    } else {\n      const relVal = timeRange as RelativeTimeRange;\n      const shrinkEndsBy = fromDurationToMillis(relVal.pastDuration) / 4; // 25% of it to cut after current start and before current end\n      const endIsAbsolute = typeof relVal.end !== 'undefined';\n      newEnd = endIsAbsolute ? new Date(relVal.end!.getTime() - shrinkEndsBy) : new Date();\n      newStart = new Date(newEnd.getTime() - shrinkEndsBy * 2);\n    }\n    if (newStart.getTime() >= newEnd.getTime() - 1000) {\n      newStart.setTime(newEnd.getTime() - 1000);\n    }\n    return { start: newStart, end: newEnd };\n  };\n\n  const setHalfTimeRange = (): void => setTimeRange(halfTimeRange());\n  const setDoubleTimeRange = (): void => setTimeRange(doubleTimeRange());\n\n  const handleTimeZoneChange = useCallback(\n    (tz: TimeZoneOption) => {\n      onTimeZoneChange(tz);\n    },\n    [onTimeZoneChange]\n  );\n\n  return (\n    <Stack direction=\"row\" spacing={1}>\n      {showTimeRangeSelector && (\n        <TimeRangeSelector\n          timeOptions={timePresetsValue}\n          value={timeRange}\n          onChange={setTimeRange}\n          height={height}\n          showCustomTimeRange={showCustomTimeRangeValue}\n          timeZone={timeZone}\n          timeZoneOptions={getTimeZoneOptions()}\n          onTimeZoneChange={handleTimeZoneChange}\n        />\n      )}\n      {showZoomInOutButtons && (\n        <InfoTooltip description={TOOLTIP_TEXT.zoomOut}>\n          <ToolbarIconButton aria-label={TOOLTIP_TEXT.zoomOut} onClick={setDoubleTimeRange} sx={{ height }}>\n            <ZoomOut />\n          </ToolbarIconButton>\n        </InfoTooltip>\n      )}\n      {showZoomInOutButtons && (\n        <InfoTooltip description={TOOLTIP_TEXT.zoomIn}>\n          <ToolbarIconButton aria-label={TOOLTIP_TEXT.zoomIn} onClick={setHalfTimeRange} sx={{ height }}>\n            <ZoomIn />\n          </ToolbarIconButton>\n        </InfoTooltip>\n      )}\n      {showRefreshButton && (\n        <InfoTooltip description={TOOLTIP_TEXT.refresh}>\n          <ToolbarIconButton aria-label={TOOLTIP_TEXT.refresh} onClick={refresh} sx={{ height }}>\n            <RefreshIcon />\n          </ToolbarIconButton>\n        </InfoTooltip>\n      )}\n      {showRefreshInterval && (\n        <InfoTooltip description={TOOLTIP_TEXT.refreshInterval}>\n          <RefreshIntervalPicker\n            timeOptions={DEFAULT_REFRESH_INTERVAL_OPTIONS}\n            value={\n              /* TODO: There is a bug here which should be fixed in a proper way. (This is only a quick remedy)\n                 display: 1m has the pastDuration of 60s. Initially (if the persisted value is 1m) when the page is loaded, instead of 60s, 1m is passed down.              \n                 This only happens for 1m, because for other items the display and the pastDuration are the same.  Example 30s-30s\n                 HERE The value MUST always be pastDuration, otherwise the component would not work as expected. \n              */\n              DEFAULT_REFRESH_INTERVAL_OPTIONS.some((i) => i.value.pastDuration === refreshInterval)\n                ? refreshInterval\n                : DEFAULT_REFRESH_INTERVAL_OPTIONS.find((i) => i.display === refreshInterval)?.value.pastDuration\n            }\n            onChange={handleRefreshIntervalChange}\n            height={height}\n          />\n        </InfoTooltip>\n      )}\n    </Stack>\n  );\n}\n"],"names":["RefreshIcon","ZoomIn","ZoomOut","Stack","RefreshIntervalPicker","InfoTooltip","ToolbarIconButton","TimeRangeSelector","getTimeZoneOptions","buildRelativeTimeOption","parseDurationString","useCallback","TOOLTIP_TEXT","useTimeRange","useShowCustomTimeRangeSetting","useTimeRangeOptionsSetting","useShowZoomRangeSetting","DEFAULT_REFRESH_INTERVAL_OPTIONS","value","pastDuration","display","DEFAULT_HEIGHT","TimeRangeControls","heightPx","showTimeRangeSelector","showRefreshButton","showRefreshInterval","showCustomTimeRange","showZoomButtons","timePresets","timeZone","onTimeZoneChange","timeRange","setTimeRange","refresh","refreshInterval","setRefreshInterval","showCustomTimeRangeValue","showZoomInOutButtons","timePresetsValue","height","undefined","some","option","push","handleRefreshIntervalChange","duration","fromDurationToMillis","strDuration","millis","seconds","minutes","hours","days","weeks","months","years","doubleTimeRange","newStart","newEnd","extendEndsBy","now","Date","Object","hasOwn","absVal","end","getTime","start","relVal","setTime","halfTimeRange","shrinkEndsBy","endIsAbsolute","setHalfTimeRange","setDoubleTimeRange","handleTimeZoneChange","tz","direction","spacing","timeOptions","onChange","timeZoneOptions","description","zoomOut","aria-label","onClick","sx","zoomIn","i","find"],"mappings":"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"}

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

@@ -1,5 +1,6 @@
 import { DispatchWithoutAction, ReactElement } from 'react';
-import { VariableDefinition, Action } from '@perses-dev/core';
+import { VariableDefinition } from '@perses-dev/spec';
+import { Action } from '@perses-dev/components';
 interface VariableEditorFormProps {
     initialVariableDefinition: VariableDefinition;
     action: Action;

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

@@ -1 +1 @@
-{"version":3,"file":"VariableEditorForm.d.ts","sourceRoot":"","sources":["../../../../src/components/Variables/VariableEditorForm/VariableEditorForm.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,qBAAqB,EAAE,YAAY,EAAyB,MAAM,OAAO,CAAC;AAEnF,OAAO,EAAE,kBAAkB,EAA0B,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAkWtF,UAAU,uBAAuB;IAC/B,yBAAyB,EAAE,kBAAkB,CAAC;IAC9C,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,MAAM,EAAE,CAAC,GAAG,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAC1C,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,qBAAqB,CAAC;CAClC;AAED,wBAAgB,kBAAkB,CAAC,EACjC,yBAAyB,EACzB,MAAM,EACN,OAAO,EACP,UAAU,EACV,cAAc,EACd,MAAM,EACN,OAAO,EACP,QAAQ,GACT,EAAE,uBAAuB,GAAG,YAAY,CAoMxC"}
+{"version":3,"file":"VariableEditorForm.d.ts","sourceRoot":"","sources":["../../../../src/components/Variables/VariableEditorForm/VariableEditorForm.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,qBAAqB,EAAE,YAAY,EAAyB,MAAM,OAAO,CAAC;AAEnF,OAAO,EAAE,kBAAkB,EAA0B,MAAM,kBAAkB,CAAC;AAE9E,OAAO,EAKL,MAAM,EAGP,MAAM,wBAAwB,CAAC;AAgWhC,UAAU,uBAAuB;IAC/B,yBAAyB,EAAE,kBAAkB,CAAC;IAC9C,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,MAAM,EAAE,CAAC,GAAG,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAC1C,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,qBAAqB,CAAC;CAClC;AAED,wBAAgB,kBAAkB,CAAC,EACjC,yBAAyB,EACzB,MAAM,EACN,OAAO,EACP,UAAU,EACV,cAAc,EACd,MAAM,EACN,OAAO,EACP,QAAQ,GACT,EAAE,uBAAuB,GAAG,YAAY,CAoMxC"}

package/dist/components/Variables/VariableEditorForm/VariableEditorForm.js

@@ -13,11 +13,10 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useCallback, useState } from 'react';
 import { Box, Typography, Switch, TextField, Grid, FormControlLabel, MenuItem, Stack, Divider } from '@mui/material';
-import { DiscardChangesConfirmationDialog, ErrorAlert, ErrorBoundary, FormActions } from '@perses-dev/components';
+import { DiscardChangesConfirmationDialog, ErrorAlert, ErrorBoundary, FormActions, getSubmitText, getTitleAction } from '@perses-dev/components';
 import { Controller, FormProvider, useForm, useFormContext, useWatch } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useQueryClient } from '@tanstack/react-query';
-import { getSubmitText, getTitleAction } from '../../../utils';
 import { PluginEditor } from '../../PluginEditor';
 import { useValidationSchemas } from '../../../context';
 import { VARIABLE_TYPES } from '../variable-model';