@perses-dev/prometheus-plugin 0.52.1 → 0.53.1

package/lib/cjs/plugins/prometheus-variables.js

@@ -44,23 +44,53 @@ const _jsxruntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
 const _pluginsystem = require("@perses-dev/plugin-system");
 const _immer = require("immer");
+const _react = require("react");
 const _components = require("../components");
 const _model = require("../model");
 const _MatcherEditor = require("./MatcherEditor");
 function PrometheusLabelValuesVariableEditor(props) {
-    const { onChange, value } = props;
-    const { datasource } = value;
+    const { onChange, value, value: { datasource }, queryHandlerSettings } = props;
     const selectedDatasource = datasource ?? _model.DEFAULT_PROM;
-    const handleDatasourceChange = (next)=>{
+    const [labelValue, setLabelValue] = (0, _react.useState)(props.value.labelName);
+    const [matchersValues, setMatchersValues] = (0, _react.useState)(props.value.matchers ?? []);
+    const handleDatasourceChange = (0, _react.useCallback)((next)=>{
         if ((0, _model.isPrometheusDatasourceSelector)(next)) {
             onChange((0, _immer.produce)(value, (draft)=>{
                 // If they're using the default, just omit the datasource prop (i.e. set to undefined)
                 draft.datasource = (0, _model.isDefaultPromSelector)(next) ? undefined : next;
             }));
+            if (queryHandlerSettings?.setWatchOtherSpecs) queryHandlerSettings.setWatchOtherSpecs({
+                ...value,
+                datasource: next
+            });
             return;
         }
         throw new Error('Got unexpected non-Prometheus datasource selector');
-    };
+    }, [
+        onChange,
+        queryHandlerSettings,
+        value
+    ]);
+    const handleLabelChange = (0, _react.useCallback)((e)=>{
+        setLabelValue(e.target.value);
+        if (queryHandlerSettings?.setWatchOtherSpecs) queryHandlerSettings.setWatchOtherSpecs({
+            ...value,
+            labelName: e.target.value
+        });
+    }, [
+        value,
+        queryHandlerSettings
+    ]);
+    const handleMatchEditorsChange = (0, _react.useCallback)((e)=>{
+        setMatchersValues(e);
+        if (queryHandlerSettings?.setWatchOtherSpecs) queryHandlerSettings.setWatchOtherSpecs({
+            ...value,
+            matchers: e
+        });
+    }, [
+        value,
+        queryHandlerSettings
+    ]);
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
         spacing: 2,
         children: [
@@ -78,44 +108,54 @@ function PrometheusLabelValuesVariableEditor(props) {
             /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
                 label: "Label Name",
                 required: true,
-                value: props.value.labelName,
-                onChange: (e)=>{
-                    props.onChange({
-                        ...props.value,
-                        labelName: e.target.value
-                    });
-                },
+                value: labelValue,
+                onChange: handleLabelChange,
                 InputProps: {
                     readOnly: props.isReadonly
                 }
             }),
             /*#__PURE__*/ (0, _jsxruntime.jsx)(_MatcherEditor.MatcherEditor, {
-                matchers: props.value.matchers ?? [],
-                onChange: (e)=>{
-                    props.onChange({
-                        ...props.value,
-                        matchers: e
-                    });
-                },
+                matchers: matchersValues,
+                onChange: handleMatchEditorsChange,
                 isReadonly: props.isReadonly
             })
         ]
     });
 }
 function PrometheusLabelNamesVariableEditor(props) {
-    const { onChange, value } = props;
-    const { datasource } = value;
+    const { onChange, value, value: { datasource }, queryHandlerSettings } = props;
     const selectedDatasource = datasource ?? _model.DEFAULT_PROM;
-    const handleDatasourceChange = (next)=>{
+    const [matchersValues, setMatchersValues] = (0, _react.useState)(props.value.matchers ?? []);
+    const handleDatasourceChange = (0, _react.useCallback)((next)=>{
         if ((0, _model.isPrometheusDatasourceSelector)(next)) {
             onChange((0, _immer.produce)(value, (draft)=>{
                 // If they're using the default, just omit the datasource prop (i.e. set to undefined)
                 draft.datasource = (0, _model.isDefaultPromSelector)(next) ? undefined : next;
             }));
+            if (queryHandlerSettings?.setWatchOtherSpecs) queryHandlerSettings.setWatchOtherSpecs({
+                ...value,
+                datasource: next
+            });
             return;
         }
         throw new Error('Got unexpected non-Prometheus datasource selector');
-    };
+    }, [
+        onChange,
+        queryHandlerSettings,
+        value
+    ]);
+    const handleMatchEditorChange = (0, _react.useCallback)((e)=>{
+        setMatchersValues(e);
+        if (queryHandlerSettings?.setWatchOtherSpecs) {
+            queryHandlerSettings.setWatchOtherSpecs({
+                ...value,
+                matchers: e
+            });
+        }
+    }, [
+        value,
+        queryHandlerSettings
+    ]);
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
         spacing: 2,
         children: [
@@ -131,34 +171,65 @@ function PrometheusLabelNamesVariableEditor(props) {
                 })
             }),
             /*#__PURE__*/ (0, _jsxruntime.jsx)(_MatcherEditor.MatcherEditor, {
-                matchers: props.value.matchers ?? [],
+                matchers: matchersValues,
                 isReadonly: props.isReadonly,
-                onChange: (e)=>{
-                    props.onChange({
-                        ...props.value,
-                        matchers: e
-                    });
-                }
+                onChange: handleMatchEditorChange
             })
         ]
     });
 }
 function PrometheusPromQLVariableEditor(props) {
-    const { onChange, value } = props;
-    const { datasource } = value;
+    const { onChange, value, value: { datasource }, queryHandlerSettings } = props;
     const selectedDatasource = datasource ?? _model.DEFAULT_PROM;
     const { data: client } = (0, _pluginsystem.useDatasourceClient)(selectedDatasource);
     const promURL = client?.options.datasourceUrl;
-    const handleDatasourceChange = (next)=>{
+    const [labelValue, setLableValue] = (0, _react.useState)(props.value.labelName);
+    const handleDatasourceChange = (0, _react.useCallback)((next)=>{
         if ((0, _model.isPrometheusDatasourceSelector)(next)) {
             onChange((0, _immer.produce)(value, (draft)=>{
                 // If they're using the default, just omit the datasource prop (i.e. set to undefined)
                 draft.datasource = (0, _model.isDefaultPromSelector)(next) ? undefined : next;
             }));
+            if (queryHandlerSettings?.setWatchOtherSpecs) queryHandlerSettings?.setWatchOtherSpecs({
+                ...value,
+                datasource: next
+            });
             return;
         }
         throw new Error('Got unexpected non-Prometheus datasource selector');
-    };
+    }, [
+        value,
+        onChange,
+        queryHandlerSettings
+    ]);
+    const handleOnBlurPromQlChange = (0, _react.useCallback)((e)=>{
+        onChange({
+            ...value,
+            expr: e.target.textContent ?? ''
+        });
+    }, [
+        onChange,
+        value
+    ]);
+    const trackPromQlChanges = (0, _react.useCallback)((e)=>{
+        if (queryHandlerSettings?.setWatchOtherSpecs) queryHandlerSettings?.setWatchOtherSpecs({
+            ...value,
+            expr: e.target.textContent ?? ''
+        });
+    }, [
+        queryHandlerSettings,
+        value
+    ]);
+    const handleLabelNameChange = (0, _react.useCallback)((e)=>{
+        setLableValue(e.target.value);
+        if (queryHandlerSettings?.setWatchOtherSpecs) queryHandlerSettings?.setWatchOtherSpecs({
+            ...value,
+            labelName: e.target.value
+        });
+    }, [
+        queryHandlerSettings,
+        value
+    ]);
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
         spacing: 2,
         children: [
@@ -181,27 +252,18 @@ function PrometheusPromQLVariableEditor(props) {
                 },
                 value: value.expr,
                 datasource: selectedDatasource,
-                onBlur: (event)=>{
-                    props.onChange({
-                        ...props.value,
-                        expr: event.target.textContent ?? ''
-                    });
-                },
+                onBlur: queryHandlerSettings?.runWithOnBlur ? handleOnBlurPromQlChange : trackPromQlChanges,
                 readOnly: props.isReadonly,
                 width: "100%"
             }),
             /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
                 label: "Label Name",
-                value: props.value.labelName,
+                required: true,
+                value: labelValue,
                 InputProps: {
                     readOnly: props.isReadonly
                 },
-                onChange: (e)=>{
-                    props.onChange({
-                        ...props.value,
-                        labelName: e.target.value
-                    });
-                }
+                onChange: handleLabelNameChange
             })
         ]
     });

package/lib/components/PromQLEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PromQLEditor.d.ts","sourceRoot":"","sources":["../../../src/components/PromQLEditor.tsx"],"names":[],"mappings":"AAaA,OAAmB,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AACzE,OAAO,EAAmB,qBAAqB,EAAE,MAAM,kCAAkC,CAAC;AAI1F,OAAO,EAAE,YAAY,EAAqB,MAAM,OAAO,CAAC;AAIxD,OAAO,EAAE,4BAA4B,EAAE,MAAM,UAAU,CAAC;AASxD,MAAM,MAAM,iBAAiB,GAAG;IAC9B,cAAc,EAAE,qBAAqB,CAAC;IACtC,UAAU,EAAE,4BAA4B,CAAC;CAC1C,GAAG,IAAI,CAAC,oBAAoB,EAAE,OAAO,GAAG,YAAY,CAAC,CAAC;AAEvD,wBAAgB,YAAY,CAAC,EAAE,cAAc,EAAE,UAAU,EAAE,GAAG,IAAI,EAAE,EAAE,iBAAiB,GAAG,YAAY,CAoHrG"}
+{"version":3,"file":"PromQLEditor.d.ts","sourceRoot":"","sources":["../../../src/components/PromQLEditor.tsx"],"names":[],"mappings":"AAaA,OAAmB,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AACzE,OAAO,EAAmB,qBAAqB,EAAE,MAAM,kCAAkC,CAAC;AAI1F,OAAO,EAAE,YAAY,EAAqB,MAAM,OAAO,CAAC;AAIxD,OAAO,EAAE,4BAA4B,EAAE,MAAM,UAAU,CAAC;AASxD,MAAM,MAAM,iBAAiB,GAAG;IAC9B,cAAc,EAAE,qBAAqB,CAAC;IACtC,UAAU,EAAE,4BAA4B,CAAC;CAC1C,GAAG,IAAI,CAAC,oBAAoB,EAAE,OAAO,GAAG,YAAY,CAAC,CAAC;AAEvD,wBAAgB,YAAY,CAAC,EAAE,cAAc,EAAE,UAAU,EAAE,GAAG,IAAI,EAAE,EAAE,iBAAiB,GAAG,YAAY,CAsHrG"}

package/lib/components/PromQLEditor.js

@@ -64,6 +64,7 @@ export function PromQLEditor({ completeConfig, datasource, ...rest }) {
                 children: "PromQL Expression"
             }),
             /*#__PURE__*/ _jsx(CodeMirror, {
+                "data-testid": "promql_expression_editor",
                 ...rest,
                 style: {
                     border: `1px solid ${theme.palette.divider}`

package/lib/components/PromQLEditor.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PromQLEditor.tsx"],"sourcesContent":["// Copyright 2025 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport CodeMirror, { ReactCodeMirrorProps } from '@uiw/react-codemirror';\nimport { PromQLExtension, CompleteConfiguration } from '@prometheus-io/codemirror-promql';\nimport { EditorView } from '@codemirror/view';\nimport { useTheme, CircularProgress, InputLabel, Stack, IconButton, Tooltip } from '@mui/material';\nimport FileTreeIcon from 'mdi-material-ui/FileTree';\nimport { ReactElement, useMemo, useState } from 'react';\nimport { ErrorAlert } from '@perses-dev/components';\nimport CloseIcon from 'mdi-material-ui/Close';\nimport { useReplaceVariablesInString } from '@perses-dev/plugin-system';\nimport { PrometheusDatasourceSelector } from '../model';\nimport { replacePromBuiltinVariables } from '../plugins/prometheus-time-series-query/replace-prom-builtin-variables';\nimport { useParseQuery } from './query';\nimport TreeNode from './TreeNode';\n\nconst treeViewStr = 'Tree View';\nconst treeViewOpenStr = 'Open ' + treeViewStr;\nconst treeViewCloseStr = 'Close ' + treeViewStr;\n\nexport type PromQLEditorProps = {\n  completeConfig: CompleteConfiguration;\n  datasource: PrometheusDatasourceSelector;\n} & Omit<ReactCodeMirrorProps, 'theme' | 'extensions'>;\n\nexport function PromQLEditor({ completeConfig, datasource, ...rest }: PromQLEditorProps): ReactElement {\n  const theme = useTheme();\n  const isDarkMode = theme.palette.mode === 'dark';\n  const [isTreeViewVisible, setTreeViewVisible] = useState(false);\n\n  const promQLExtension = useMemo(() => {\n    return new PromQLExtension().activateLinter(false).setComplete(completeConfig).asExtension();\n  }, [completeConfig]);\n\n  let queryExpr = useReplaceVariablesInString(rest.value);\n  if (queryExpr) {\n    // TODO placeholder values for steps to be replaced with actual values\n    // Looks like providing proper values involves some refactoring: currently we'd need to rely on the timeseries query context,\n    // but these step values are actually computed independently / before the queries are getting fired, so it's useless to fire\n    // queries here, so maybe we should extract this part to independant hook(s), to be reused here?\n    queryExpr = replacePromBuiltinVariables(queryExpr, 12345, 12345);\n  }\n\n  const { data: parseQueryResponse, isLoading, error } = useParseQuery(queryExpr ?? '', datasource, isTreeViewVisible);\n\n  const handleShowTreeView = (): void => {\n    setTreeViewVisible(!isTreeViewVisible);\n  };\n\n  return (\n    <Stack position=\"relative\">\n      <InputLabel // reproduce the same kind of input label that regular MUI TextFields have\n        shrink\n        sx={{\n          position: 'absolute',\n          top: '-12px',\n          left: '10px',\n          padding: '0 4px',\n          color: theme.palette.text.primary,\n          zIndex: 1,\n        }}\n      >\n        PromQL Expression\n      </InputLabel>\n      <CodeMirror\n        {...rest}\n        style={{ border: `1px solid ${theme.palette.divider}` }}\n        theme={isDarkMode ? 'dark' : 'light'}\n        basicSetup={{\n          highlightActiveLine: false,\n          highlightActiveLineGutter: false,\n          foldGutter: false,\n        }}\n        extensions={[\n          EditorView.lineWrapping,\n          promQLExtension,\n          EditorView.theme({\n            '.cm-content': {\n              paddingTop: '8px',\n              paddingBottom: '8px',\n              paddingRight: '40px', // offset for the tree view button\n            },\n          }),\n        ]}\n        placeholder=\"Example: sum(rate(http_requests_total[5m]))\"\n      />\n      {queryExpr && (\n        <>\n          <Tooltip title={isTreeViewVisible ? treeViewCloseStr : treeViewOpenStr}>\n            <IconButton\n              aria-label={isTreeViewVisible ? treeViewCloseStr : treeViewOpenStr}\n              onClick={handleShowTreeView}\n              sx={{ position: 'absolute', right: '5px', top: '5px' }}\n              size=\"small\"\n              key=\"tree-view-button\"\n            >\n              <FileTreeIcon sx={{ fontSize: '18px' }} />\n            </IconButton>\n          </Tooltip>\n          {isTreeViewVisible && (\n            <div style={{ border: `1px solid ${theme.palette.divider}`, position: 'relative' }}>\n              <Tooltip title={treeViewCloseStr}>\n                <IconButton\n                  aria-label={treeViewCloseStr}\n                  onClick={() => setTreeViewVisible(false)}\n                  sx={{ position: 'absolute', top: '5px', right: '5px' }}\n                  size=\"small\"\n                  key=\"tree-view-close-button\"\n                >\n                  <CloseIcon sx={{ fontSize: '18px' }} />\n                </IconButton>\n              </Tooltip>\n              {error ? (\n                // Here the user is able to hide the error alert\n                <ErrorAlert\n                  error={{\n                    name: `${treeViewStr} not available`,\n                    message: error.message,\n                  }}\n                />\n              ) : (\n                <div\n                  style={{\n                    padding: `${theme.spacing(1.5)} ${theme.spacing(1.5)} 0 ${theme.spacing(1.5)}`, // let paddingBottom at 0 because nodes have margin-bottom\n                    overflowX: 'auto',\n                    backgroundColor: theme.palette.background.default,\n                  }}\n                >\n                  {isLoading ? (\n                    <CircularProgress />\n                  ) : parseQueryResponse?.data ? (\n                    <TreeNode node={parseQueryResponse.data} reverse={false} childIdx={0} datasource={datasource} />\n                  ) : null}\n                </div>\n              )}\n            </div>\n          )}\n        </>\n      )}\n    </Stack>\n  );\n}\n"],"names":["CodeMirror","PromQLExtension","EditorView","useTheme","CircularProgress","InputLabel","Stack","IconButton","Tooltip","FileTreeIcon","useMemo","useState","ErrorAlert","CloseIcon","useReplaceVariablesInString","replacePromBuiltinVariables","useParseQuery","TreeNode","treeViewStr","treeViewOpenStr","treeViewCloseStr","PromQLEditor","completeConfig","datasource","rest","theme","isDarkMode","palette","mode","isTreeViewVisible","setTreeViewVisible","promQLExtension","activateLinter","setComplete","asExtension","queryExpr","value","data","parseQueryResponse","isLoading","error","handleShowTreeView","position","shrink","sx","top","left","padding","color","text","primary","zIndex","style","border","divider","basicSetup","highlightActiveLine","highlightActiveLineGutter","foldGutter","extensions","lineWrapping","paddingTop","paddingBottom","paddingRight","placeholder","title","aria-label","onClick","right","size","fontSize","div","name","message","spacing","overflowX","backgroundColor","background","default","node","reverse","childIdx"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/PromQLEditor.tsx"],"sourcesContent":["// Copyright 2025 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport CodeMirror, { ReactCodeMirrorProps } from '@uiw/react-codemirror';\nimport { PromQLExtension, CompleteConfiguration } from '@prometheus-io/codemirror-promql';\nimport { EditorView } from '@codemirror/view';\nimport { useTheme, CircularProgress, InputLabel, Stack, IconButton, Tooltip } from '@mui/material';\nimport FileTreeIcon from 'mdi-material-ui/FileTree';\nimport { ReactElement, useMemo, useState } from 'react';\nimport { ErrorAlert } from '@perses-dev/components';\nimport CloseIcon from 'mdi-material-ui/Close';\nimport { useReplaceVariablesInString } from '@perses-dev/plugin-system';\nimport { PrometheusDatasourceSelector } from '../model';\nimport { replacePromBuiltinVariables } from '../plugins/prometheus-time-series-query/replace-prom-builtin-variables';\nimport { useParseQuery } from './query';\nimport TreeNode from './TreeNode';\n\nconst treeViewStr = 'Tree View';\nconst treeViewOpenStr = 'Open ' + treeViewStr;\nconst treeViewCloseStr = 'Close ' + treeViewStr;\n\nexport type PromQLEditorProps = {\n  completeConfig: CompleteConfiguration;\n  datasource: PrometheusDatasourceSelector;\n} & Omit<ReactCodeMirrorProps, 'theme' | 'extensions'>;\n\nexport function PromQLEditor({ completeConfig, datasource, ...rest }: PromQLEditorProps): ReactElement {\n  const theme = useTheme();\n  const isDarkMode = theme.palette.mode === 'dark';\n  const [isTreeViewVisible, setTreeViewVisible] = useState(false);\n\n  const promQLExtension = useMemo(() => {\n    return new PromQLExtension().activateLinter(false).setComplete(completeConfig).asExtension();\n  }, [completeConfig]);\n\n  let queryExpr = useReplaceVariablesInString(rest.value);\n  if (queryExpr) {\n    // TODO placeholder values for steps to be replaced with actual values\n    // Looks like providing proper values involves some refactoring: currently we'd need to rely on the timeseries query context,\n    // but these step values are actually computed independently / before the queries are getting fired, so it's useless to fire\n    // queries here, so maybe we should extract this part to independant hook(s), to be reused here?\n    queryExpr = replacePromBuiltinVariables(queryExpr, 12345, 12345);\n  }\n\n  const { data: parseQueryResponse, isLoading, error } = useParseQuery(queryExpr ?? '', datasource, isTreeViewVisible);\n\n  const handleShowTreeView = (): void => {\n    setTreeViewVisible(!isTreeViewVisible);\n  };\n\n  return (\n    <Stack position=\"relative\">\n      <InputLabel // reproduce the same kind of input label that regular MUI TextFields have\n        shrink\n        sx={{\n          position: 'absolute',\n          top: '-12px',\n          left: '10px',\n          padding: '0 4px',\n          color: theme.palette.text.primary,\n          zIndex: 1,\n        }}\n      >\n        PromQL Expression\n      </InputLabel>\n      {/* TODO: We need to wait for this to be merged, then we need to add proper e2e for some scenarios */}\n      <CodeMirror\n        data-testid=\"promql_expression_editor\"\n        {...rest}\n        style={{ border: `1px solid ${theme.palette.divider}` }}\n        theme={isDarkMode ? 'dark' : 'light'}\n        basicSetup={{\n          highlightActiveLine: false,\n          highlightActiveLineGutter: false,\n          foldGutter: false,\n        }}\n        extensions={[\n          EditorView.lineWrapping,\n          promQLExtension,\n          EditorView.theme({\n            '.cm-content': {\n              paddingTop: '8px',\n              paddingBottom: '8px',\n              paddingRight: '40px', // offset for the tree view button\n            },\n          }),\n        ]}\n        placeholder=\"Example: sum(rate(http_requests_total[5m]))\"\n      />\n      {queryExpr && (\n        <>\n          <Tooltip title={isTreeViewVisible ? treeViewCloseStr : treeViewOpenStr}>\n            <IconButton\n              aria-label={isTreeViewVisible ? treeViewCloseStr : treeViewOpenStr}\n              onClick={handleShowTreeView}\n              sx={{ position: 'absolute', right: '5px', top: '5px' }}\n              size=\"small\"\n              key=\"tree-view-button\"\n            >\n              <FileTreeIcon sx={{ fontSize: '18px' }} />\n            </IconButton>\n          </Tooltip>\n          {isTreeViewVisible && (\n            <div style={{ border: `1px solid ${theme.palette.divider}`, position: 'relative' }}>\n              <Tooltip title={treeViewCloseStr}>\n                <IconButton\n                  aria-label={treeViewCloseStr}\n                  onClick={() => setTreeViewVisible(false)}\n                  sx={{ position: 'absolute', top: '5px', right: '5px' }}\n                  size=\"small\"\n                  key=\"tree-view-close-button\"\n                >\n                  <CloseIcon sx={{ fontSize: '18px' }} />\n                </IconButton>\n              </Tooltip>\n              {error ? (\n                // Here the user is able to hide the error alert\n                <ErrorAlert\n                  error={{\n                    name: `${treeViewStr} not available`,\n                    message: error.message,\n                  }}\n                />\n              ) : (\n                <div\n                  style={{\n                    padding: `${theme.spacing(1.5)} ${theme.spacing(1.5)} 0 ${theme.spacing(1.5)}`, // let paddingBottom at 0 because nodes have margin-bottom\n                    overflowX: 'auto',\n                    backgroundColor: theme.palette.background.default,\n                  }}\n                >\n                  {isLoading ? (\n                    <CircularProgress />\n                  ) : parseQueryResponse?.data ? (\n                    <TreeNode node={parseQueryResponse.data} reverse={false} childIdx={0} datasource={datasource} />\n                  ) : null}\n                </div>\n              )}\n            </div>\n          )}\n        </>\n      )}\n    </Stack>\n  );\n}\n"],"names":["CodeMirror","PromQLExtension","EditorView","useTheme","CircularProgress","InputLabel","Stack","IconButton","Tooltip","FileTreeIcon","useMemo","useState","ErrorAlert","CloseIcon","useReplaceVariablesInString","replacePromBuiltinVariables","useParseQuery","TreeNode","treeViewStr","treeViewOpenStr","treeViewCloseStr","PromQLEditor","completeConfig","datasource","rest","theme","isDarkMode","palette","mode","isTreeViewVisible","setTreeViewVisible","promQLExtension","activateLinter","setComplete","asExtension","queryExpr","value","data","parseQueryResponse","isLoading","error","handleShowTreeView","position","shrink","sx","top","left","padding","color","text","primary","zIndex","data-testid","style","border","divider","basicSetup","highlightActiveLine","highlightActiveLineGutter","foldGutter","extensions","lineWrapping","paddingTop","paddingBottom","paddingRight","placeholder","title","aria-label","onClick","right","size","fontSize","div","name","message","spacing","overflowX","backgroundColor","background","default","node","reverse","childIdx"],"mappings":"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"}

package/lib/components/TreeNode.js

@@ -374,13 +374,21 @@ function QueryStatus({ mergedChildState, isFetching, error, resultStats, respons
                                                 sx: {
                                                     color: (theme)=>theme.palette.mode === 'dark' // TODO we shouldnt have to do that I guess..
                                                          ? theme.palette.warning.dark : theme.palette.warning.main,
-                                                    fontFamily: 'monospace'
+                                                    fontFamily: 'monospace',
+                                                    whiteSpace: 'nowrap',
+                                                    overflow: 'hidden',
+                                                    textOverflow: 'ellipsis',
+                                                    flexGrow: 1
                                                 },
                                                 children: escapeString(value)
                                             }),
                                             /*#__PURE__*/ _jsxs(Typography, {
                                                 variant: "body2",
                                                 component: "span",
+                                                sx: {
+                                                    whiteSpace: 'nowrap',
+                                                    flexShrink: 0
+                                                },
                                                 children: [
                                                     "(",
                                                     count,

package/lib/components/TreeNode.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/TreeNode.tsx"],"sourcesContent":["// Copyright 2025 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\n// Forked from https://github.com/prometheus/prometheus/blob/65f610353919b1c7b42d3776c3a95b68046a6bba/web/ui/mantine-ui/src/pages/query/TreeNode.tsx\n\nimport { Box, CircularProgress, List, ListItem, Stack, Tooltip, Typography, useTheme } from '@mui/material';\nimport CircleIcon from 'mdi-material-ui/Circle';\nimport { ReactElement, useCallback, useEffect, useLayoutEffect, useMemo, useState } from 'react';\nimport AlertCircle from 'mdi-material-ui/AlertCircle';\nimport { StatusError } from '@perses-dev/core';\nimport { PrometheusDatasourceSelector } from '../model';\nimport ASTNode, { nodeType } from './promql/ast';\nimport { escapeString, getNodeChildren } from './promql/utils';\nimport { formatNode } from './promql/format';\nimport serializeNode from './promql/serialize';\nimport { functionSignatures } from './promql/functionSignatures';\nimport { useInstantQuery } from './query';\n\n// The indentation factor for each level of the tree.\nconst nodeIndent = 5;\nconst connectorWidth = nodeIndent * 5;\n\n// max number of label names and values to show in the individual query status\nconst maxLabelNames = 10;\nconst maxLabelValues = 10;\n\ntype NodeState = 'waiting' | 'running' | 'error' | 'success';\n\n// mergeChildStates basically returns the \"worst\" state found among the children.\nconst mergeChildStates = (states: NodeState[]): NodeState => {\n  if (states.includes('error')) {\n    return 'error';\n  }\n  if (states.includes('waiting')) {\n    return 'waiting';\n  }\n  if (states.includes('running')) {\n    return 'running';\n  }\n\n  return 'success';\n};\n\ninterface TreeNodeProps {\n  // The AST node to render.\n  node: ASTNode;\n  // The parent element of this node.\n  parentEl?: HTMLDivElement | null;\n  // Used to compute the position of the connector line between this node and its parent.\n  reverse: boolean;\n  // Datasource used for the node's individual query.\n  datasource: PrometheusDatasourceSelector;\n  // The index of this node in its parent's children.\n  // Used to render the node's individual query.\n  childIdx: number;\n  // Function to report the node state to the parent.\n  // Used to render the node's individual query.\n  reportNodeState?: (childIdx: number, state: NodeState) => void;\n}\n\nexport default function TreeNode({\n  node,\n  parentEl,\n  reverse,\n  datasource,\n  childIdx,\n  reportNodeState,\n}: TreeNodeProps): ReactElement {\n  const theme = useTheme();\n  const children = getNodeChildren(node);\n\n  // A normal ref won't work properly here because the ref's `current` property\n  // going from `null` to defined won't trigger a re-render of the child\n  // component, since it's not a React state update. So we manually have to\n  // create a state update using a callback ref. See also\n  // https://tkdodo.eu/blog/avoiding-use-effect-with-callback-refs\n  const [nodeEl, setNodeEl] = useState<HTMLDivElement | null>(null);\n  const nodeRef = useCallback((node: HTMLDivElement) => setNodeEl(node), []);\n\n  const [resultStats, setResultStats] = useState<{\n    numSeries: number;\n    labelExamples: Record<string, Array<{ value: string; count: number }>>;\n    sortedLabelCards: Array<[string, number]>;\n  }>({\n    numSeries: 0,\n    labelExamples: {},\n    sortedLabelCards: [],\n  });\n\n  const [connectorStyle, setConnectorStyle] = useState({\n    borderColor: theme.palette.grey['500'],\n    borderLeftStyle: 'solid',\n    borderLeftWidth: 2,\n    width: connectorWidth,\n    left: -connectorWidth,\n  });\n\n  const [childStates, setChildStates] = useState<NodeState[]>(children.map(() => 'waiting'));\n  const mergedChildState = useMemo(() => mergeChildStates(childStates), [childStates]);\n\n  // Optimize range vector selector fetches to give us the info we're looking for\n  // more cheaply. E.g. 'foo[7w]' can be expensive to fully fetch, but wrapping it\n  // in 'last_over_time(foo[7w])' is cheaper and also gives us all the info we\n  // need (number of series and labels).\n  let queryNode = node;\n  if (queryNode.type === nodeType.matrixSelector) {\n    queryNode = {\n      type: nodeType.call,\n      func: functionSignatures.last_over_time!,\n      args: [node],\n    };\n  }\n\n  // Individual query for the current node\n  const {\n    data: instantQueryResponse,\n    isFetching,\n    error,\n  } = useInstantQuery(serializeNode(queryNode) ?? '', datasource, mergedChildState === 'success');\n\n  // report the node state to the parent\n  useEffect(() => {\n    if (reportNodeState) {\n      if (mergedChildState === 'error' || error) {\n        reportNodeState(childIdx, 'error');\n      } else if (isFetching) {\n        reportNodeState(childIdx, 'running');\n      }\n    }\n  }, [mergedChildState, error, isFetching, reportNodeState, childIdx]);\n\n  // This function is passed down to the child nodes so they can report their state.\n  const childReportNodeState = useCallback(\n    (childIdx: number, state: NodeState) => {\n      setChildStates((prev) => {\n        const newStates = [...prev];\n        newStates[childIdx] = state;\n        return newStates;\n      });\n    },\n    [setChildStates]\n  );\n\n  // Update the size and position of tree connector lines based on the node's and its parent's position.\n  useLayoutEffect(() => {\n    if (parentEl === undefined) {\n      // We're the root node.\n      return;\n    }\n\n    if (parentEl === null || nodeEl === null) {\n      // Either of the two connected nodes hasn't been rendered yet.\n      return;\n    }\n\n    const parentRect = parentEl.getBoundingClientRect();\n    const nodeRect = nodeEl.getBoundingClientRect();\n    if (reverse) {\n      setConnectorStyle((prevStyle) => ({\n        ...prevStyle,\n        top: 'calc(50% - 1px)',\n        bottom: nodeRect.bottom - parentRect.top,\n        borderTopLeftRadius: 10,\n        borderTopStyle: 'solid',\n        borderBottomLeftRadius: undefined,\n      }));\n    } else {\n      setConnectorStyle((prevStyle) => ({\n        ...prevStyle,\n        top: parentRect.bottom - nodeRect.top,\n        bottom: 'calc(50% - 1px)',\n        borderBottomLeftRadius: 10,\n        borderBottomStyle: 'solid',\n        borderTopLeftRadius: undefined,\n      }));\n    }\n  }, [parentEl, nodeEl, reverse, nodeRef, setConnectorStyle]);\n\n  // Update the node info state based on the query result.\n  useEffect(() => {\n    if (instantQueryResponse?.status !== 'success') {\n      return;\n    }\n\n    if (reportNodeState) {\n      reportNodeState(childIdx, 'success');\n    }\n\n    let resultSeries = 0;\n    // labelValuesByName records the number of times each label value appears for each label name.\n    const labelValuesByName: Record<string, Record<string, number>> = {};\n    const { resultType, result } = instantQueryResponse.data;\n\n    if (resultType === 'scalar' || resultType === 'string') {\n      resultSeries = 1;\n    } else if (result && result.length > 0) {\n      resultSeries = result.length;\n      result.forEach((s) => {\n        Object.entries(s.metric).forEach(([ln, lv]) => {\n          // TODO: If we ever want to include __name__ here again, we cannot use the\n          // last_over_time(foo[7d]) optimization since that removes the metric name.\n          if (ln !== '__name__') {\n            labelValuesByName[ln] = labelValuesByName[ln] ?? {};\n            labelValuesByName[ln]![lv] = (labelValuesByName[ln]![lv] ?? 0) + 1;\n          }\n        });\n      });\n    }\n\n    // labelCardinalities records the number of unique label values for each label name.\n    const labelCardinalities: Record<string, number> = {};\n    // labelExamples records the most common label values for each label name.\n    const labelExamples: Record<string, Array<{ value: string; count: number }>> = {};\n    Object.entries(labelValuesByName).forEach(([ln, lvs]) => {\n      labelCardinalities[ln] = Object.keys(lvs).length;\n      // Sort label values by their number of occurrences within this label name.\n      labelExamples[ln] = Object.entries(lvs)\n        .sort(([, aCnt], [, bCnt]) => bCnt - aCnt)\n        .slice(0, maxLabelValues)\n        .map(([lv, cnt]) => ({ value: lv, count: cnt }));\n    });\n\n    setResultStats({\n      numSeries: resultSeries,\n      sortedLabelCards: Object.entries(labelCardinalities).sort((a, b) => b[1] - a[1]),\n      labelExamples,\n    });\n  }, [instantQueryResponse, reportNodeState, childIdx]);\n\n  const innerNode = (\n    <Stack direction=\"row\" gap={2}>\n      <Box\n        ref={nodeRef}\n        sx={{\n          position: 'relative',\n          display: 'inline-block',\n          padding: 1,\n          marginBottom: 1.5,\n          borderRadius: 2,\n          backgroundColor: theme.palette.background.code,\n        }}\n      >\n        {parentEl !== undefined && (\n          // Connector line between this node and its parent.\n          <Box\n            sx={{\n              position: 'absolute',\n              display: 'inline-block',\n              ...connectorStyle,\n            }}\n          />\n        )}\n        {/* The node (visible box) itself. */}\n        {formatNode(node, false, 1)}\n      </Box>\n      {/* The node's individual query: */}\n      <QueryStatus\n        mergedChildState={mergedChildState}\n        isFetching={isFetching}\n        error={error}\n        resultStats={resultStats}\n        responseTime={instantQueryResponse?.responseTime}\n      />\n    </Stack>\n  );\n\n  if (node.type === nodeType.binaryExpr) {\n    return (\n      <div>\n        <Box ml={nodeIndent}>\n          <TreeNode\n            node={children[0]!}\n            parentEl={nodeEl}\n            reverse={true}\n            datasource={datasource}\n            childIdx={0}\n            reportNodeState={childReportNodeState}\n          />\n        </Box>\n        {innerNode}\n        <Box ml={nodeIndent}>\n          <TreeNode\n            node={children[1]!}\n            parentEl={nodeEl}\n            reverse={false}\n            datasource={datasource}\n            childIdx={1}\n            reportNodeState={childReportNodeState}\n          />\n        </Box>\n      </div>\n    );\n  }\n\n  return (\n    <div>\n      {innerNode}\n      {children.map((child, idx) => (\n        <Box ml={nodeIndent} key={idx}>\n          <TreeNode\n            node={child}\n            parentEl={nodeEl}\n            reverse={false}\n            datasource={datasource}\n            childIdx={idx}\n            reportNodeState={childReportNodeState}\n          />\n        </Box>\n      ))}\n    </div>\n  );\n}\n\ninterface QueryStatusProps {\n  mergedChildState: NodeState;\n  isFetching: boolean;\n  error: StatusError | null;\n  resultStats: {\n    numSeries: number;\n    labelExamples: Record<string, Array<{ value: string; count: number }>>;\n    sortedLabelCards: Array<[string, number]>;\n  };\n  responseTime?: number;\n}\n\nfunction QueryStatus({\n  mergedChildState,\n  isFetching,\n  error,\n  resultStats,\n  responseTime,\n}: QueryStatusProps): ReactElement {\n  if (mergedChildState === 'waiting') {\n    return <ProgressState text=\"Waiting for child query\" />;\n  }\n\n  if (mergedChildState === 'running') {\n    return <ProgressState text=\"Running\" />;\n  }\n\n  if (mergedChildState === 'error') {\n    return (\n      <Stack>\n        <AlertCircle />\n        Blocked on child query error\n      </Stack>\n    );\n  }\n\n  if (isFetching) {\n    return <ProgressState text=\"Loading\" />;\n  }\n\n  if (error) {\n    return (\n      <Box\n        display=\"flex\"\n        alignItems=\"center\"\n        gap={1}\n        sx={{ color: (theme) => theme.palette.error.main }}\n        marginBottom={1.5}\n      >\n        <AlertCircle />\n        <Typography variant=\"body2\">\n          <strong>Error executing query:</strong> {error.message}\n        </Typography>\n      </Box>\n    );\n  }\n\n  return (\n    <Stack direction=\"row\" gap={1} alignItems=\"center\" marginBottom={1.5}>\n      <Typography variant=\"body2\" component=\"span\" sx={{ color: (theme) => theme.palette.grey[500] }}>\n        {resultStats.numSeries} result{resultStats.numSeries !== 1 && 's'}\n        &nbsp;&nbsp;–&nbsp;&nbsp;\n        {responseTime ? `${Math.round(responseTime)}ms` : '? ms'}\n        {resultStats.sortedLabelCards.length > 0 && <>&nbsp;&nbsp;–</>}\n      </Typography>\n      {resultStats.sortedLabelCards.slice(0, maxLabelNames).map(([ln, cnt]) => (\n        <Tooltip\n          key={ln}\n          title={\n            <Box>\n              <List dense>\n                {resultStats.labelExamples[ln]?.map(({ value, count }) => (\n                  <ListItem\n                    key={value}\n                    sx={{\n                      display: 'flex',\n                      gap: 1,\n                      py: 0,\n                      px: 0.5,\n                    }}\n                  >\n                    <CircleIcon sx={{ fontSize: 8 }} />\n                    <Typography\n                      variant=\"body2\"\n                      component=\"span\"\n                      sx={{\n                        color: (theme) =>\n                          theme.palette.mode === 'dark' // TODO we shouldnt have to do that I guess..\n                            ? theme.palette.warning.dark\n                            : theme.palette.warning.main,\n                        fontFamily: 'monospace',\n                      }}\n                    >\n                      {escapeString(value)}\n                    </Typography>\n                    <Typography variant=\"body2\" component=\"span\">\n                      ({count}x)\n                    </Typography>\n                  </ListItem>\n                ))}\n                {cnt > maxLabelValues && (\n                  <ListItem\n                    sx={{\n                      display: 'flex',\n                      gap: 1,\n                      py: 0,\n                      px: 0.5,\n                    }}\n                  >\n                    <CircleIcon sx={{ fontSize: 8 }} />\n                    <Typography variant=\"body2\">. . .</Typography>\n                  </ListItem>\n                )}\n              </List>\n            </Box>\n          }\n          arrow\n        >\n          <span style={{ cursor: 'pointer', whiteSpace: 'nowrap' }}>\n            <Typography\n              variant=\"body2\"\n              component=\"span\"\n              sx={{ fontFamily: 'monospace', color: (theme) => theme.palette.success.main }}\n            >\n              {ln}\n            </Typography>\n            <Typography variant=\"body2\" component=\"span\" sx={{ color: (theme) => theme.palette.grey[500] }}>\n              : {cnt}\n            </Typography>\n          </span>\n        </Tooltip>\n      ))}\n      {resultStats.sortedLabelCards.length > maxLabelNames ? (\n        <Typography variant=\"body2\">...{resultStats.sortedLabelCards.length - maxLabelNames} more...</Typography>\n      ) : null}\n    </Stack>\n  );\n}\n\nfunction ProgressState({ text }: { text: string }): ReactElement {\n  return (\n    <Box display=\"flex\" alignItems=\"center\" gap={1} marginBottom={1.5}>\n      <CircularProgress size={16} color=\"secondary\" />\n      <Typography variant=\"body2\" color=\"text.secondary\">\n        {text}...\n      </Typography>\n    </Box>\n  );\n}\n"],"names":["Box","CircularProgress","List","ListItem","Stack","Tooltip","Typography","useTheme","CircleIcon","useCallback","useEffect","useLayoutEffect","useMemo","useState","AlertCircle","nodeType","escapeString","getNodeChildren","formatNode","serializeNode","functionSignatures","useInstantQuery","nodeIndent","connectorWidth","maxLabelNames","maxLabelValues","mergeChildStates","states","includes","TreeNode","node","parentEl","reverse","datasource","childIdx","reportNodeState","theme","children","nodeEl","setNodeEl","nodeRef","resultStats","setResultStats","numSeries","labelExamples","sortedLabelCards","connectorStyle","setConnectorStyle","borderColor","palette","grey","borderLeftStyle","borderLeftWidth","width","left","childStates","setChildStates","map","mergedChildState","queryNode","type","matrixSelector","call","func","last_over_time","args","data","instantQueryResponse","isFetching","error","childReportNodeState","state","prev","newStates","undefined","parentRect","getBoundingClientRect","nodeRect","prevStyle","top","bottom","borderTopLeftRadius","borderTopStyle","borderBottomLeftRadius","borderBottomStyle","status","resultSeries","labelValuesByName","resultType","result","length","forEach","s","Object","entries","metric","ln","lv","labelCardinalities","lvs","keys","sort","aCnt","bCnt","slice","cnt","value","count","a","b","innerNode","direction","gap","ref","sx","position","display","padding","marginBottom","borderRadius","backgroundColor","background","code","QueryStatus","responseTime","binaryExpr","div","ml","child","idx","ProgressState","text","alignItems","color","main","variant","strong","message","component","Math","round","title","dense","py","px","fontSize","mode","warning","dark","fontFamily","arrow","span","style","cursor","whiteSpace","success","size"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/TreeNode.tsx"],"sourcesContent":["// Copyright 2025 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\n// Forked from https://github.com/prometheus/prometheus/blob/65f610353919b1c7b42d3776c3a95b68046a6bba/web/ui/mantine-ui/src/pages/query/TreeNode.tsx\n\nimport { Box, CircularProgress, List, ListItem, Stack, Tooltip, Typography, useTheme } from '@mui/material';\nimport CircleIcon from 'mdi-material-ui/Circle';\nimport { ReactElement, useCallback, useEffect, useLayoutEffect, useMemo, useState } from 'react';\nimport AlertCircle from 'mdi-material-ui/AlertCircle';\nimport { StatusError } from '@perses-dev/core';\nimport { PrometheusDatasourceSelector } from '../model';\nimport ASTNode, { nodeType } from './promql/ast';\nimport { escapeString, getNodeChildren } from './promql/utils';\nimport { formatNode } from './promql/format';\nimport serializeNode from './promql/serialize';\nimport { functionSignatures } from './promql/functionSignatures';\nimport { useInstantQuery } from './query';\n\n// The indentation factor for each level of the tree.\nconst nodeIndent = 5;\nconst connectorWidth = nodeIndent * 5;\n\n// max number of label names and values to show in the individual query status\nconst maxLabelNames = 10;\nconst maxLabelValues = 10;\n\ntype NodeState = 'waiting' | 'running' | 'error' | 'success';\n\n// mergeChildStates basically returns the \"worst\" state found among the children.\nconst mergeChildStates = (states: NodeState[]): NodeState => {\n  if (states.includes('error')) {\n    return 'error';\n  }\n  if (states.includes('waiting')) {\n    return 'waiting';\n  }\n  if (states.includes('running')) {\n    return 'running';\n  }\n\n  return 'success';\n};\n\ninterface TreeNodeProps {\n  // The AST node to render.\n  node: ASTNode;\n  // The parent element of this node.\n  parentEl?: HTMLDivElement | null;\n  // Used to compute the position of the connector line between this node and its parent.\n  reverse: boolean;\n  // Datasource used for the node's individual query.\n  datasource: PrometheusDatasourceSelector;\n  // The index of this node in its parent's children.\n  // Used to render the node's individual query.\n  childIdx: number;\n  // Function to report the node state to the parent.\n  // Used to render the node's individual query.\n  reportNodeState?: (childIdx: number, state: NodeState) => void;\n}\n\nexport default function TreeNode({\n  node,\n  parentEl,\n  reverse,\n  datasource,\n  childIdx,\n  reportNodeState,\n}: TreeNodeProps): ReactElement {\n  const theme = useTheme();\n  const children = getNodeChildren(node);\n\n  // A normal ref won't work properly here because the ref's `current` property\n  // going from `null` to defined won't trigger a re-render of the child\n  // component, since it's not a React state update. So we manually have to\n  // create a state update using a callback ref. See also\n  // https://tkdodo.eu/blog/avoiding-use-effect-with-callback-refs\n  const [nodeEl, setNodeEl] = useState<HTMLDivElement | null>(null);\n  const nodeRef = useCallback((node: HTMLDivElement) => setNodeEl(node), []);\n\n  const [resultStats, setResultStats] = useState<{\n    numSeries: number;\n    labelExamples: Record<string, Array<{ value: string; count: number }>>;\n    sortedLabelCards: Array<[string, number]>;\n  }>({\n    numSeries: 0,\n    labelExamples: {},\n    sortedLabelCards: [],\n  });\n\n  const [connectorStyle, setConnectorStyle] = useState({\n    borderColor: theme.palette.grey['500'],\n    borderLeftStyle: 'solid',\n    borderLeftWidth: 2,\n    width: connectorWidth,\n    left: -connectorWidth,\n  });\n\n  const [childStates, setChildStates] = useState<NodeState[]>(children.map(() => 'waiting'));\n  const mergedChildState = useMemo(() => mergeChildStates(childStates), [childStates]);\n\n  // Optimize range vector selector fetches to give us the info we're looking for\n  // more cheaply. E.g. 'foo[7w]' can be expensive to fully fetch, but wrapping it\n  // in 'last_over_time(foo[7w])' is cheaper and also gives us all the info we\n  // need (number of series and labels).\n  let queryNode = node;\n  if (queryNode.type === nodeType.matrixSelector) {\n    queryNode = {\n      type: nodeType.call,\n      func: functionSignatures.last_over_time!,\n      args: [node],\n    };\n  }\n\n  // Individual query for the current node\n  const {\n    data: instantQueryResponse,\n    isFetching,\n    error,\n  } = useInstantQuery(serializeNode(queryNode) ?? '', datasource, mergedChildState === 'success');\n\n  // report the node state to the parent\n  useEffect(() => {\n    if (reportNodeState) {\n      if (mergedChildState === 'error' || error) {\n        reportNodeState(childIdx, 'error');\n      } else if (isFetching) {\n        reportNodeState(childIdx, 'running');\n      }\n    }\n  }, [mergedChildState, error, isFetching, reportNodeState, childIdx]);\n\n  // This function is passed down to the child nodes so they can report their state.\n  const childReportNodeState = useCallback(\n    (childIdx: number, state: NodeState) => {\n      setChildStates((prev) => {\n        const newStates = [...prev];\n        newStates[childIdx] = state;\n        return newStates;\n      });\n    },\n    [setChildStates]\n  );\n\n  // Update the size and position of tree connector lines based on the node's and its parent's position.\n  useLayoutEffect(() => {\n    if (parentEl === undefined) {\n      // We're the root node.\n      return;\n    }\n\n    if (parentEl === null || nodeEl === null) {\n      // Either of the two connected nodes hasn't been rendered yet.\n      return;\n    }\n\n    const parentRect = parentEl.getBoundingClientRect();\n    const nodeRect = nodeEl.getBoundingClientRect();\n    if (reverse) {\n      setConnectorStyle((prevStyle) => ({\n        ...prevStyle,\n        top: 'calc(50% - 1px)',\n        bottom: nodeRect.bottom - parentRect.top,\n        borderTopLeftRadius: 10,\n        borderTopStyle: 'solid',\n        borderBottomLeftRadius: undefined,\n      }));\n    } else {\n      setConnectorStyle((prevStyle) => ({\n        ...prevStyle,\n        top: parentRect.bottom - nodeRect.top,\n        bottom: 'calc(50% - 1px)',\n        borderBottomLeftRadius: 10,\n        borderBottomStyle: 'solid',\n        borderTopLeftRadius: undefined,\n      }));\n    }\n  }, [parentEl, nodeEl, reverse, nodeRef, setConnectorStyle]);\n\n  // Update the node info state based on the query result.\n  useEffect(() => {\n    if (instantQueryResponse?.status !== 'success') {\n      return;\n    }\n\n    if (reportNodeState) {\n      reportNodeState(childIdx, 'success');\n    }\n\n    let resultSeries = 0;\n    // labelValuesByName records the number of times each label value appears for each label name.\n    const labelValuesByName: Record<string, Record<string, number>> = {};\n    const { resultType, result } = instantQueryResponse.data;\n\n    if (resultType === 'scalar' || resultType === 'string') {\n      resultSeries = 1;\n    } else if (result && result.length > 0) {\n      resultSeries = result.length;\n      result.forEach((s) => {\n        Object.entries(s.metric).forEach(([ln, lv]) => {\n          // TODO: If we ever want to include __name__ here again, we cannot use the\n          // last_over_time(foo[7d]) optimization since that removes the metric name.\n          if (ln !== '__name__') {\n            labelValuesByName[ln] = labelValuesByName[ln] ?? {};\n            labelValuesByName[ln]![lv] = (labelValuesByName[ln]![lv] ?? 0) + 1;\n          }\n        });\n      });\n    }\n\n    // labelCardinalities records the number of unique label values for each label name.\n    const labelCardinalities: Record<string, number> = {};\n    // labelExamples records the most common label values for each label name.\n    const labelExamples: Record<string, Array<{ value: string; count: number }>> = {};\n    Object.entries(labelValuesByName).forEach(([ln, lvs]) => {\n      labelCardinalities[ln] = Object.keys(lvs).length;\n      // Sort label values by their number of occurrences within this label name.\n      labelExamples[ln] = Object.entries(lvs)\n        .sort(([, aCnt], [, bCnt]) => bCnt - aCnt)\n        .slice(0, maxLabelValues)\n        .map(([lv, cnt]) => ({ value: lv, count: cnt }));\n    });\n\n    setResultStats({\n      numSeries: resultSeries,\n      sortedLabelCards: Object.entries(labelCardinalities).sort((a, b) => b[1] - a[1]),\n      labelExamples,\n    });\n  }, [instantQueryResponse, reportNodeState, childIdx]);\n\n  const innerNode = (\n    <Stack direction=\"row\" gap={2}>\n      <Box\n        ref={nodeRef}\n        sx={{\n          position: 'relative',\n          display: 'inline-block',\n          padding: 1,\n          marginBottom: 1.5,\n          borderRadius: 2,\n          backgroundColor: theme.palette.background.code,\n        }}\n      >\n        {parentEl !== undefined && (\n          // Connector line between this node and its parent.\n          <Box\n            sx={{\n              position: 'absolute',\n              display: 'inline-block',\n              ...connectorStyle,\n            }}\n          />\n        )}\n        {/* The node (visible box) itself. */}\n        {formatNode(node, false, 1)}\n      </Box>\n      {/* The node's individual query: */}\n      <QueryStatus\n        mergedChildState={mergedChildState}\n        isFetching={isFetching}\n        error={error}\n        resultStats={resultStats}\n        responseTime={instantQueryResponse?.responseTime}\n      />\n    </Stack>\n  );\n\n  if (node.type === nodeType.binaryExpr) {\n    return (\n      <div>\n        <Box ml={nodeIndent}>\n          <TreeNode\n            node={children[0]!}\n            parentEl={nodeEl}\n            reverse={true}\n            datasource={datasource}\n            childIdx={0}\n            reportNodeState={childReportNodeState}\n          />\n        </Box>\n        {innerNode}\n        <Box ml={nodeIndent}>\n          <TreeNode\n            node={children[1]!}\n            parentEl={nodeEl}\n            reverse={false}\n            datasource={datasource}\n            childIdx={1}\n            reportNodeState={childReportNodeState}\n          />\n        </Box>\n      </div>\n    );\n  }\n\n  return (\n    <div>\n      {innerNode}\n      {children.map((child, idx) => (\n        <Box ml={nodeIndent} key={idx}>\n          <TreeNode\n            node={child}\n            parentEl={nodeEl}\n            reverse={false}\n            datasource={datasource}\n            childIdx={idx}\n            reportNodeState={childReportNodeState}\n          />\n        </Box>\n      ))}\n    </div>\n  );\n}\n\ninterface QueryStatusProps {\n  mergedChildState: NodeState;\n  isFetching: boolean;\n  error: StatusError | null;\n  resultStats: {\n    numSeries: number;\n    labelExamples: Record<string, Array<{ value: string; count: number }>>;\n    sortedLabelCards: Array<[string, number]>;\n  };\n  responseTime?: number;\n}\n\nfunction QueryStatus({\n  mergedChildState,\n  isFetching,\n  error,\n  resultStats,\n  responseTime,\n}: QueryStatusProps): ReactElement {\n  if (mergedChildState === 'waiting') {\n    return <ProgressState text=\"Waiting for child query\" />;\n  }\n\n  if (mergedChildState === 'running') {\n    return <ProgressState text=\"Running\" />;\n  }\n\n  if (mergedChildState === 'error') {\n    return (\n      <Stack>\n        <AlertCircle />\n        Blocked on child query error\n      </Stack>\n    );\n  }\n\n  if (isFetching) {\n    return <ProgressState text=\"Loading\" />;\n  }\n\n  if (error) {\n    return (\n      <Box\n        display=\"flex\"\n        alignItems=\"center\"\n        gap={1}\n        sx={{ color: (theme) => theme.palette.error.main }}\n        marginBottom={1.5}\n      >\n        <AlertCircle />\n        <Typography variant=\"body2\">\n          <strong>Error executing query:</strong> {error.message}\n        </Typography>\n      </Box>\n    );\n  }\n\n  return (\n    <Stack direction=\"row\" gap={1} alignItems=\"center\" marginBottom={1.5}>\n      <Typography variant=\"body2\" component=\"span\" sx={{ color: (theme) => theme.palette.grey[500] }}>\n        {resultStats.numSeries} result{resultStats.numSeries !== 1 && 's'}\n        &nbsp;&nbsp;–&nbsp;&nbsp;\n        {responseTime ? `${Math.round(responseTime)}ms` : '? ms'}\n        {resultStats.sortedLabelCards.length > 0 && <>&nbsp;&nbsp;–</>}\n      </Typography>\n      {resultStats.sortedLabelCards.slice(0, maxLabelNames).map(([ln, cnt]) => (\n        <Tooltip\n          key={ln}\n          title={\n            <Box>\n              <List dense>\n                {resultStats.labelExamples[ln]?.map(({ value, count }) => (\n                  <ListItem\n                    key={value}\n                    sx={{\n                      display: 'flex',\n                      gap: 1,\n                      py: 0,\n                      px: 0.5,\n                    }}\n                  >\n                    <CircleIcon sx={{ fontSize: 8 }} />\n                    <Typography\n                      variant=\"body2\"\n                      component=\"span\"\n                      sx={{\n                        color: (theme) =>\n                          theme.palette.mode === 'dark' // TODO we shouldnt have to do that I guess..\n                            ? theme.palette.warning.dark\n                            : theme.palette.warning.main,\n                        fontFamily: 'monospace',\n                        whiteSpace: 'nowrap',\n                        overflow: 'hidden',\n                        textOverflow: 'ellipsis',\n                        flexGrow: 1,\n                      }}\n                    >\n                      {escapeString(value)}\n                    </Typography>\n                    <Typography\n                      variant=\"body2\"\n                      component=\"span\"\n                      sx={{\n                        whiteSpace: 'nowrap',\n                        flexShrink: 0,\n                      }}\n                    >\n                      ({count}x)\n                    </Typography>\n                  </ListItem>\n                ))}\n                {cnt > maxLabelValues && (\n                  <ListItem\n                    sx={{\n                      display: 'flex',\n                      gap: 1,\n                      py: 0,\n                      px: 0.5,\n                    }}\n                  >\n                    <CircleIcon sx={{ fontSize: 8 }} />\n                    <Typography variant=\"body2\">. . .</Typography>\n                  </ListItem>\n                )}\n              </List>\n            </Box>\n          }\n          arrow\n        >\n          <span style={{ cursor: 'pointer', whiteSpace: 'nowrap' }}>\n            <Typography\n              variant=\"body2\"\n              component=\"span\"\n              sx={{ fontFamily: 'monospace', color: (theme) => theme.palette.success.main }}\n            >\n              {ln}\n            </Typography>\n            <Typography variant=\"body2\" component=\"span\" sx={{ color: (theme) => theme.palette.grey[500] }}>\n              : {cnt}\n            </Typography>\n          </span>\n        </Tooltip>\n      ))}\n      {resultStats.sortedLabelCards.length > maxLabelNames ? (\n        <Typography variant=\"body2\">...{resultStats.sortedLabelCards.length - maxLabelNames} more...</Typography>\n      ) : null}\n    </Stack>\n  );\n}\n\nfunction ProgressState({ text }: { text: string }): ReactElement {\n  return (\n    <Box display=\"flex\" alignItems=\"center\" gap={1} marginBottom={1.5}>\n      <CircularProgress size={16} color=\"secondary\" />\n      <Typography variant=\"body2\" color=\"text.secondary\">\n        {text}...\n      </Typography>\n    </Box>\n  );\n}\n"],"names":["Box","CircularProgress","List","ListItem","Stack","Tooltip","Typography","useTheme","CircleIcon","useCallback","useEffect","useLayoutEffect","useMemo","useState","AlertCircle","nodeType","escapeString","getNodeChildren","formatNode","serializeNode","functionSignatures","useInstantQuery","nodeIndent","connectorWidth","maxLabelNames","maxLabelValues","mergeChildStates","states","includes","TreeNode","node","parentEl","reverse","datasource","childIdx","reportNodeState","theme","children","nodeEl","setNodeEl","nodeRef","resultStats","setResultStats","numSeries","labelExamples","sortedLabelCards","connectorStyle","setConnectorStyle","borderColor","palette","grey","borderLeftStyle","borderLeftWidth","width","left","childStates","setChildStates","map","mergedChildState","queryNode","type","matrixSelector","call","func","last_over_time","args","data","instantQueryResponse","isFetching","error","childReportNodeState","state","prev","newStates","undefined","parentRect","getBoundingClientRect","nodeRect","prevStyle","top","bottom","borderTopLeftRadius","borderTopStyle","borderBottomLeftRadius","borderBottomStyle","status","resultSeries","labelValuesByName","resultType","result","length","forEach","s","Object","entries","metric","ln","lv","labelCardinalities","lvs","keys","sort","aCnt","bCnt","slice","cnt","value","count","a","b","innerNode","direction","gap","ref","sx","position","display","padding","marginBottom","borderRadius","backgroundColor","background","code","QueryStatus","responseTime","binaryExpr","div","ml","child","idx","ProgressState","text","alignItems","color","main","variant","strong","message","component","Math","round","title","dense","py","px","fontSize","mode","warning","dark","fontFamily","whiteSpace","overflow","textOverflow","flexGrow","flexShrink","arrow","span","style","cursor","success","size"],"mappings":"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"}

package/lib/plugins/prometheus-time-series-query/PrometheusTimeSeriesQueryEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PrometheusTimeSeriesQueryEditor.d.ts","sourceRoot":"","sources":["../../../../src/plugins/prometheus-time-series-query/PrometheusTimeSeriesQueryEditor.tsx"],"names":[],"mappings":"AAuBA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAYrC,OAAO,EACL,oCAAoC,EAIrC,MAAM,sBAAsB,CAAC;AAE9B;;GAEG;AACH,wBAAgB,+BAA+B,CAAC,KAAK,EAAE,oCAAoC,GAAG,YAAY,CAgFzG"}
+{"version":3,"file":"PrometheusTimeSeriesQueryEditor.d.ts","sourceRoot":"","sources":["../../../../src/plugins/prometheus-time-series-query/PrometheusTimeSeriesQueryEditor.tsx"],"names":[],"mappings":"AAuBA,OAAO,EAAE,YAAY,EAAe,MAAM,OAAO,CAAC;AAYlD,OAAO,EACL,oCAAoC,EAIrC,MAAM,sBAAsB,CAAC;AAE9B;;GAEG;AACH,wBAAgB,+BAA+B,CAAC,KAAK,EAAE,oCAAoC,GAAG,YAAY,CAuHzG"}

package/lib/plugins/prometheus-time-series-query/PrometheusTimeSeriesQueryEditor.js

@@ -15,6 +15,7 @@ import { produce } from 'immer';
 import { DatasourceSelect, useDatasource, useDatasourceClient, useDatasourceSelectValueToSelector } from '@perses-dev/plugin-system';
 import { useId } from '@perses-dev/components';
 import { FormControl, Stack, TextField } from '@mui/material';
+import { useCallback } from 'react';
 import { DEFAULT_PROM, isDefaultPromSelector, isPrometheusDatasourceSelector, PROM_DATASOURCE_KIND } from '../../model';
 import { DEFAULT_SCRAPE_INTERVAL } from '../types';
 import { PromQLEditor } from '../../components';
@@ -22,8 +23,7 @@ import { useQueryState, useFormatState, useMinStepState } from './query-editor-m
 /**
  * The options editor component for editing a PrometheusTimeSeriesQuery's spec.
  */ export function PrometheusTimeSeriesQueryEditor(props) {
-    const { onChange, value } = props;
-    const { datasource } = value;
+    const { onChange, value, value: { query, datasource }, queryHandlerSettings } = props;
     const datasourceSelectValue = datasource ?? DEFAULT_PROM;
     const datasourceSelectLabelID = useId('prom-datasource-label'); // for panels with multiple queries, this component is rendered multiple times on the same page
     const selectedDatasource = useDatasourceSelectValueToSelector(datasourceSelectValue, PROM_DATASOURCE_KIND);
@@ -36,15 +36,53 @@ import { useQueryState, useFormatState, useMinStepState } from './query-editor-m
     const minStepPlaceholder = minStep ?? (datasourceResource && (datasourceResource?.plugin.spec).scrapeInterval) ?? DEFAULT_SCRAPE_INTERVAL;
     const handleDatasourceChange = (next)=>{
         if (isPrometheusDatasourceSelector(next)) {
-            onChange(produce(value, (draft)=>{
+            /* Good to know: The usage of onchange here causes an immediate spec update which eventually updates the panel
+         This was probably intentional to allow for quick switching between datasources.
+         Could have been triggered only with Run Query button as well.
+      */ onChange(produce(value, (draft)=>{
                 // If they're using the default, just omit the datasource prop (i.e. set to undefined)
                 const nextDatasource = isDefaultPromSelector(next) ? undefined : next;
                 draft.datasource = nextDatasource;
             }));
+            if (queryHandlerSettings?.setWatchOtherSpecs) queryHandlerSettings.setWatchOtherSpecs({
+                ...value,
+                datasource: next
+            });
             return;
         }
         throw new Error('Got unexpected non-Prometheus datasource selector');
     };
+    const handlePromQlEditorChanges = useCallback((e)=>{
+        handleQueryChange(e);
+        if (queryHandlerSettings?.watchQueryChanges) {
+            queryHandlerSettings?.watchQueryChanges(e);
+        }
+    }, [
+        queryHandlerSettings,
+        handleQueryChange
+    ]);
+    const handleLegendSpecChange = useCallback((e)=>{
+        handleFormatChange(e.target.value);
+        if (queryHandlerSettings?.setWatchOtherSpecs) queryHandlerSettings.setWatchOtherSpecs({
+            ...value,
+            seriesNameFormat: e.target.value
+        });
+    }, [
+        queryHandlerSettings,
+        handleFormatChange,
+        value
+    ]);
+    const handleMinStepSpecChange = useCallback((e)=>{
+        handleMinStepChange(e.target.value ? e.target.value : undefined);
+        if (queryHandlerSettings?.setWatchOtherSpecs) queryHandlerSettings.setWatchOtherSpecs({
+            ...value,
+            minStep: e.target.value
+        });
+    }, [
+        queryHandlerSettings,
+        handleMinStepChange,
+        value
+    ]);
     return /*#__PURE__*/ _jsxs(Stack, {
         spacing: 2,
         children: [
@@ -66,10 +104,10 @@ import { useQueryState, useFormatState, useMinStepState } from './query-editor-m
                         url: promURL
                     }
                 },
-                value: value.query,
+                value: query,
                 datasource: selectedDatasource,
-                onChange: handleQueryChange,
-                onBlur: handleQueryBlur
+                onChange: handlePromQlEditorChanges,
+                onBlur: queryHandlerSettings?.runWithOnBlur ? handleQueryBlur : undefined
             }),
             /*#__PURE__*/ _jsxs(Stack, {
                 direction: "row",
@@ -81,16 +119,16 @@ import { useQueryState, useFormatState, useMinStepState } from './query-editor-m
                         placeholder: "Example: '{{instance}}' will generate series names like 'webserver-123', 'webserver-456'...",
                         helperText: "Text to be displayed in the legend and the tooltip. Use {{label_name}} to interpolate label values.",
                         value: format ?? '',
-                        onChange: (e)=>handleFormatChange(e.target.value),
-                        onBlur: handleFormatBlur
+                        onChange: handleLegendSpecChange,
+                        onBlur: queryHandlerSettings?.runWithOnBlur ? handleFormatBlur : undefined
                     }),
                     /*#__PURE__*/ _jsx(TextField, {
                         label: "Min Step",
                         placeholder: minStepPlaceholder,
                         helperText: "Lower bound for the step. If not provided, the scrape interval of the datasource is used.",
                         value: minStep ?? '',
-                        onChange: (e)=>handleMinStepChange(e.target.value ? e.target.value : undefined),
-                        onBlur: handleMinStepBlur,
+                        onChange: handleMinStepSpecChange,
+                        onBlur: queryHandlerSettings?.runWithOnBlur ? handleMinStepBlur : undefined,
                         sx: {
                             width: '250px'
                         }