@perses-dev/prometheus-plugin 0.52.1 → 0.53.0

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,CAiHzG"}

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);
@@ -45,6 +45,37 @@ import { useQueryState, useFormatState, useMinStepState } from './query-editor-m
         }
         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 +97,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 +112,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'
                         }

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/plugins/prometheus-time-series-query/PrometheusTimeSeriesQueryEditor.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { produce } from 'immer';\nimport {\n  DatasourceSelect,\n  DatasourceSelectProps,\n  useDatasource,\n  useDatasourceClient,\n  useDatasourceSelectValueToSelector,\n} from '@perses-dev/plugin-system';\nimport { useId } from '@perses-dev/components';\nimport { FormControl, Stack, TextField } from '@mui/material';\nimport { ReactElement } from 'react';\nimport {\n  DEFAULT_PROM,\n  DurationString,\n  isDefaultPromSelector,\n  isPrometheusDatasourceSelector,\n  PROM_DATASOURCE_KIND,\n  PrometheusClient,\n  PrometheusDatasourceSelector,\n} from '../../model';\nimport { DEFAULT_SCRAPE_INTERVAL, PrometheusDatasourceSpec } from '../types';\nimport { PromQLEditor } from '../../components';\nimport {\n  PrometheusTimeSeriesQueryEditorProps,\n  useQueryState,\n  useFormatState,\n  useMinStepState,\n} from './query-editor-model';\n\n/**\n * The options editor component for editing a PrometheusTimeSeriesQuery's spec.\n */\nexport function PrometheusTimeSeriesQueryEditor(props: PrometheusTimeSeriesQueryEditorProps): ReactElement {\n  const { onChange, value } = props;\n  const { datasource } = value;\n  const datasourceSelectValue = datasource ?? DEFAULT_PROM;\n\n  const datasourceSelectLabelID = useId('prom-datasource-label'); // for panels with multiple queries, this component is rendered multiple times on the same page\n\n  const selectedDatasource = useDatasourceSelectValueToSelector(\n    datasourceSelectValue,\n    PROM_DATASOURCE_KIND\n  ) as PrometheusDatasourceSelector;\n\n  const { data: client } = useDatasourceClient<PrometheusClient>(selectedDatasource);\n  const promURL = client?.options.datasourceUrl;\n  const { data: datasourceResource } = useDatasource(selectedDatasource);\n\n  const { handleQueryChange, handleQueryBlur } = useQueryState(props);\n  const { format, handleFormatChange, handleFormatBlur } = useFormatState(props);\n  const { minStep, handleMinStepChange, handleMinStepBlur } = useMinStepState(props);\n  const minStepPlaceholder =\n    minStep ??\n    (datasourceResource && (datasourceResource?.plugin.spec as PrometheusDatasourceSpec).scrapeInterval) ??\n    DEFAULT_SCRAPE_INTERVAL;\n\n  const handleDatasourceChange: DatasourceSelectProps['onChange'] = (next) => {\n    if (isPrometheusDatasourceSelector(next)) {\n      onChange(\n        produce(value, (draft) => {\n          // If they're using the default, just omit the datasource prop (i.e. set to undefined)\n          const nextDatasource = isDefaultPromSelector(next) ? undefined : next;\n          draft.datasource = nextDatasource;\n        })\n      );\n      return;\n    }\n\n    throw new Error('Got unexpected non-Prometheus datasource selector');\n  };\n\n  return (\n    <Stack spacing={2}>\n      <FormControl margin=\"dense\" fullWidth={false}>\n        <DatasourceSelect\n          datasourcePluginKind={PROM_DATASOURCE_KIND}\n          value={datasourceSelectValue}\n          onChange={handleDatasourceChange}\n          labelId={datasourceSelectLabelID}\n          label=\"Prometheus Datasource\"\n          notched\n        />\n      </FormControl>\n      <PromQLEditor\n        completeConfig={{ remote: { url: promURL } }}\n        value={value.query} // here we are passing `value.query` and not `query` from useQueryState in order to get updates only on onBlur events\n        datasource={selectedDatasource}\n        onChange={handleQueryChange}\n        onBlur={handleQueryBlur}\n      />\n      <Stack direction=\"row\" spacing={2}>\n        <TextField\n          fullWidth\n          label=\"Legend\"\n          placeholder=\"Example: '{{instance}}' will generate series names like 'webserver-123', 'webserver-456'...\"\n          helperText=\"Text to be displayed in the legend and the tooltip. Use {{label_name}} to interpolate label values.\"\n          value={format ?? ''}\n          onChange={(e) => handleFormatChange(e.target.value)}\n          onBlur={handleFormatBlur}\n        />\n        <TextField\n          label=\"Min Step\"\n          placeholder={minStepPlaceholder}\n          helperText=\"Lower bound for the step. If not provided, the scrape interval of the datasource is used.\"\n          value={minStep ?? ''}\n          onChange={(e) => handleMinStepChange(e.target.value ? (e.target.value as DurationString) : undefined)}\n          onBlur={handleMinStepBlur}\n          sx={{ width: '250px' }}\n        />\n      </Stack>\n    </Stack>\n  );\n}\n"],"names":["produce","DatasourceSelect","useDatasource","useDatasourceClient","useDatasourceSelectValueToSelector","useId","FormControl","Stack","TextField","DEFAULT_PROM","isDefaultPromSelector","isPrometheusDatasourceSelector","PROM_DATASOURCE_KIND","DEFAULT_SCRAPE_INTERVAL","PromQLEditor","useQueryState","useFormatState","useMinStepState","PrometheusTimeSeriesQueryEditor","props","onChange","value","datasource","datasourceSelectValue","datasourceSelectLabelID","selectedDatasource","data","client","promURL","options","datasourceUrl","datasourceResource","handleQueryChange","handleQueryBlur","format","handleFormatChange","handleFormatBlur","minStep","handleMinStepChange","handleMinStepBlur","minStepPlaceholder","plugin","spec","scrapeInterval","handleDatasourceChange","next","draft","nextDatasource","undefined","Error","spacing","margin","fullWidth","datasourcePluginKind","labelId","label","notched","completeConfig","remote","url","query","onBlur","direction","placeholder","helperText","e","target","sx","width"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/plugins/prometheus-time-series-query/PrometheusTimeSeriesQueryEditor.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { produce } from 'immer';\nimport {\n  DatasourceSelect,\n  DatasourceSelectProps,\n  useDatasource,\n  useDatasourceClient,\n  useDatasourceSelectValueToSelector,\n} from '@perses-dev/plugin-system';\nimport { useId } from '@perses-dev/components';\nimport { FormControl, Stack, TextField } from '@mui/material';\nimport { ReactElement, useCallback } from 'react';\nimport {\n  DEFAULT_PROM,\n  DurationString,\n  isDefaultPromSelector,\n  isPrometheusDatasourceSelector,\n  PROM_DATASOURCE_KIND,\n  PrometheusClient,\n  PrometheusDatasourceSelector,\n} from '../../model';\nimport { DEFAULT_SCRAPE_INTERVAL, PrometheusDatasourceSpec } from '../types';\nimport { PromQLEditor } from '../../components';\nimport {\n  PrometheusTimeSeriesQueryEditorProps,\n  useQueryState,\n  useFormatState,\n  useMinStepState,\n} from './query-editor-model';\n\n/**\n * The options editor component for editing a PrometheusTimeSeriesQuery's spec.\n */\nexport function PrometheusTimeSeriesQueryEditor(props: PrometheusTimeSeriesQueryEditorProps): ReactElement {\n  const {\n    onChange,\n    value,\n    value: { query, datasource },\n    queryHandlerSettings,\n  } = props;\n\n  const datasourceSelectValue = datasource ?? DEFAULT_PROM;\n\n  const datasourceSelectLabelID = useId('prom-datasource-label'); // for panels with multiple queries, this component is rendered multiple times on the same page\n\n  const selectedDatasource = useDatasourceSelectValueToSelector(\n    datasourceSelectValue,\n    PROM_DATASOURCE_KIND\n  ) as PrometheusDatasourceSelector;\n\n  const { data: client } = useDatasourceClient<PrometheusClient>(selectedDatasource);\n  const promURL = client?.options.datasourceUrl;\n  const { data: datasourceResource } = useDatasource(selectedDatasource);\n\n  const { handleQueryChange, handleQueryBlur } = useQueryState(props);\n  const { format, handleFormatChange, handleFormatBlur } = useFormatState(props);\n  const { minStep, handleMinStepChange, handleMinStepBlur } = useMinStepState(props);\n  const minStepPlaceholder =\n    minStep ??\n    (datasourceResource && (datasourceResource?.plugin.spec as PrometheusDatasourceSpec).scrapeInterval) ??\n    DEFAULT_SCRAPE_INTERVAL;\n\n  const handleDatasourceChange: DatasourceSelectProps['onChange'] = (next) => {\n    if (isPrometheusDatasourceSelector(next)) {\n      onChange(\n        produce(value, (draft) => {\n          // If they're using the default, just omit the datasource prop (i.e. set to undefined)\n          const nextDatasource = isDefaultPromSelector(next) ? undefined : next;\n          draft.datasource = nextDatasource;\n        })\n      );\n      return;\n    }\n\n    throw new Error('Got unexpected non-Prometheus datasource selector');\n  };\n\n  const handlePromQlEditorChanges = useCallback(\n    (e: string) => {\n      handleQueryChange(e);\n      if (queryHandlerSettings?.watchQueryChanges) {\n        queryHandlerSettings?.watchQueryChanges(e);\n      }\n    },\n    [queryHandlerSettings, handleQueryChange]\n  );\n\n  const handleLegendSpecChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n      handleFormatChange(e.target.value);\n      if (queryHandlerSettings?.setWatchOtherSpecs)\n        queryHandlerSettings.setWatchOtherSpecs({ ...value, seriesNameFormat: e.target.value });\n    },\n    [queryHandlerSettings, handleFormatChange, value]\n  );\n\n  const handleMinStepSpecChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n      handleMinStepChange(e.target.value ? (e.target.value as DurationString) : undefined);\n      if (queryHandlerSettings?.setWatchOtherSpecs)\n        queryHandlerSettings.setWatchOtherSpecs({ ...value, minStep: e.target.value });\n    },\n    [queryHandlerSettings, handleMinStepChange, value]\n  );\n\n  return (\n    <Stack spacing={2}>\n      <FormControl margin=\"dense\" fullWidth={false}>\n        <DatasourceSelect\n          datasourcePluginKind={PROM_DATASOURCE_KIND}\n          value={datasourceSelectValue}\n          onChange={handleDatasourceChange}\n          labelId={datasourceSelectLabelID}\n          label=\"Prometheus Datasource\"\n          notched\n        />\n      </FormControl>\n      <PromQLEditor\n        completeConfig={{ remote: { url: promURL } }}\n        value={query} // here we are passing `value.query` and not `query` from useQueryState in order to get updates only on onBlur events\n        datasource={selectedDatasource}\n        onChange={handlePromQlEditorChanges}\n        onBlur={queryHandlerSettings?.runWithOnBlur ? handleQueryBlur : undefined}\n      />\n      <Stack direction=\"row\" spacing={2}>\n        <TextField\n          fullWidth\n          label=\"Legend\"\n          placeholder=\"Example: '{{instance}}' will generate series names like 'webserver-123', 'webserver-456'...\"\n          helperText=\"Text to be displayed in the legend and the tooltip. Use {{label_name}} to interpolate label values.\"\n          value={format ?? ''}\n          onChange={handleLegendSpecChange}\n          onBlur={queryHandlerSettings?.runWithOnBlur ? handleFormatBlur : undefined}\n        />\n        <TextField\n          label=\"Min Step\"\n          placeholder={minStepPlaceholder}\n          helperText=\"Lower bound for the step. If not provided, the scrape interval of the datasource is used.\"\n          value={minStep ?? ''}\n          onChange={handleMinStepSpecChange}\n          onBlur={queryHandlerSettings?.runWithOnBlur ? handleMinStepBlur : undefined}\n          sx={{ width: '250px' }}\n        />\n      </Stack>\n    </Stack>\n  );\n}\n"],"names":["produce","DatasourceSelect","useDatasource","useDatasourceClient","useDatasourceSelectValueToSelector","useId","FormControl","Stack","TextField","useCallback","DEFAULT_PROM","isDefaultPromSelector","isPrometheusDatasourceSelector","PROM_DATASOURCE_KIND","DEFAULT_SCRAPE_INTERVAL","PromQLEditor","useQueryState","useFormatState","useMinStepState","PrometheusTimeSeriesQueryEditor","props","onChange","value","query","datasource","queryHandlerSettings","datasourceSelectValue","datasourceSelectLabelID","selectedDatasource","data","client","promURL","options","datasourceUrl","datasourceResource","handleQueryChange","handleQueryBlur","format","handleFormatChange","handleFormatBlur","minStep","handleMinStepChange","handleMinStepBlur","minStepPlaceholder","plugin","spec","scrapeInterval","handleDatasourceChange","next","draft","nextDatasource","undefined","Error","handlePromQlEditorChanges","e","watchQueryChanges","handleLegendSpecChange","target","setWatchOtherSpecs","seriesNameFormat","handleMinStepSpecChange","spacing","margin","fullWidth","datasourcePluginKind","labelId","label","notched","completeConfig","remote","url","onBlur","runWithOnBlur","direction","placeholder","helperText","sx","width"],"mappings":"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"}