@perses-dev/loki-plugin 0.1.1 → 0.2.0

package/lib/cjs/queries/query-editor-model.js

@@ -0,0 +1,53 @@
+// Copyright 2025 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useQueryState", {
+    enumerable: true,
+    get: function() {
+        return useQueryState;
+    }
+});
+const _react = require("react");
+const _immer = require("immer");
+function useQueryState(props) {
+    const { onChange, value } = props;
+    // Local copy of the query's value
+    const [query, setQuery] = (0, _react.useState)(value.query);
+    // This is basically "getDerivedStateFromProps" to make sure if spec's value changes external to this component,
+    // we render with the latest value
+    const [lastSyncedQuery, setLastSyncedQuery] = (0, _react.useState)(value.query);
+    if (value.query !== lastSyncedQuery) {
+        setQuery(value.query);
+        setLastSyncedQuery(value.query);
+    }
+    // Update our local state's copy as the user types
+    const handleQueryChange = (e)=>{
+        setQuery(e);
+    };
+    // Propagate changes to the query's value when the input is blurred to avoid constantly re-running queries in the
+    // PanelPreview
+    const handleQueryBlur = ()=>{
+        setLastSyncedQuery(query);
+        onChange((0, _immer.produce)(value, (draft)=>{
+            draft.query = query;
+        }));
+    };
+    return {
+        query,
+        handleQueryChange,
+        handleQueryBlur
+    };
+}

package/lib/panels/logstable/components/LogRow/LogsStyles.d.ts

@@ -11,12 +11,12 @@ export declare const LogRowContent: import("@emotion/styled").StyledComponent<im
 }, {}, {}>;
 export declare const ExpandButton: import("@emotion/styled").StyledComponent<import("@mui/material").IconButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
     ref?: ((instance: HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLButtonElement> | null | undefined;
-}, "className" | "style" | "tabIndex" | "color" | "children" | "sx" | "disabled" | "action" | "loading" | "size" | "classes" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge" | "loadingIndicator"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+}, "color" | "children" | "sx" | "style" | "className" | "tabIndex" | "disabled" | "action" | "loading" | "size" | "classes" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge" | "loadingIndicator"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
     isExpanded: boolean;
 }, {}, {}>;
 export declare const LogText: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
     ref?: ((instance: HTMLSpanElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLSpanElement> | null | undefined;
-}, "className" | "style" | "color" | "children" | "height" | "minHeight" | "maxHeight" | "width" | "minWidth" | "maxWidth" | "border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flex" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "zIndex" | "position" | "top" | "right" | "bottom" | "left" | "boxShadow" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "typography" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "textTransform" | "sx" | "align" | "classes" | "gutterBottom" | "noWrap" | "paragraph" | "variant" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+}, "border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flex" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "color" | "zIndex" | "position" | "top" | "right" | "bottom" | "left" | "boxShadow" | "width" | "maxWidth" | "minWidth" | "height" | "maxHeight" | "minHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "typography" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "textTransform" | "children" | "sx" | "style" | "className" | "align" | "classes" | "gutterBottom" | "noWrap" | "paragraph" | "variant" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
     wrap: boolean;
 }, {}, {}>;
 //# sourceMappingURL=LogsStyles.d.ts.map

package/lib/queries/loki-log-query/LokiLogQueryEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LokiLogQueryEditor.d.ts","sourceRoot":"","sources":["../../../../src/queries/loki-log-query/LokiLogQueryEditor.tsx"],"names":[],"mappings":"AAaA,OAAO,EAIL,kBAAkB,EAEnB,MAAM,2BAA2B,CAAC;AAEnC,OAAO,EAAE,YAAY,EAAoC,MAAM,OAAO,CAAC;AAMvE,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAE1D,KAAK,oBAAoB,GAAG,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;AAEjE,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,oBAAoB,GAAG,YAAY,CAqH5E"}
+{"version":3,"file":"LokiLogQueryEditor.d.ts","sourceRoot":"","sources":["../../../../src/queries/loki-log-query/LokiLogQueryEditor.tsx"],"names":[],"mappings":"AAaA,OAAO,EAIL,kBAAkB,EAEnB,MAAM,2BAA2B,CAAC;AAEnC,OAAO,EAAE,YAAY,EAAoC,MAAM,OAAO,CAAC;AAMvE,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAG1D,KAAK,oBAAoB,GAAG,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;AAEjE,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,oBAAoB,GAAG,YAAY,CA6H5E"}

package/lib/queries/loki-log-query/LokiLogQueryEditor.js

@@ -13,30 +13,27 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { DatasourceSelect, isVariableDatasource, useDatasourceSelectValueToSelector } from '@perses-dev/plugin-system';
 import { InputLabel, Stack, ToggleButton, ToggleButtonGroup } from '@mui/material';
-import { useCallback, useState, useEffect } from 'react';
+import { useCallback } from 'react';
 import { produce } from 'immer';
 import { OptionsEditorControl } from '@perses-dev/components';
 import { LogQLEditor } from '../../components/logql-editor';
-import { LOKI_DATASOURCE_KIND } from '../../model';
+import { isDefaultLokiSelector, LOKI_DATASOURCE_KIND } from '../../model';
 import { DATASOURCE_KIND, DEFAULT_DATASOURCE } from '../constants';
+import { useQueryState } from '../query-editor-model';
 export function LokiLogQueryEditor(props) {
-    const { onChange, value } = props;
+    const { onChange, value, queryHandlerSettings } = props;
     const { datasource } = value;
     const datasourceSelectValue = datasource ?? DEFAULT_DATASOURCE;
     const selectedDatasource = useDatasourceSelectValueToSelector(datasourceSelectValue, LOKI_DATASOURCE_KIND);
-    // const { data: client } = useDatasourceClient<LokiClient>(selectedDatasource);
-    // const lokiURL = client?.options.datasourceUrl;
-    // Local state for editor value to prevent query_range calls on every keystroke
-    const [localQuery, setLocalQuery] = useState(value.query);
-    // Update local state when prop changes
-    useEffect(()=>{
-        setLocalQuery(value.query);
-    }, [
-        value.query
-    ]);
+    const { query, handleQueryChange, handleQueryBlur } = useQueryState(props);
     const handleDatasourceChange = (newDatasourceSelection)=>{
         if (!isVariableDatasource(newDatasourceSelection) && newDatasourceSelection.kind === DATASOURCE_KIND) {
-            onChange({
+            onChange(produce(value, (draft)=>{
+                // If they're using the default, just omit the datasource prop (i.e. set to undefined)
+                const nextDatasource = isDefaultLokiSelector(newDatasourceSelection) ? undefined : newDatasourceSelection;
+                draft.datasource = nextDatasource;
+            }));
+            if (queryHandlerSettings?.setWatchOtherSpecs) queryHandlerSettings.setWatchOtherSpecs({
                 ...value,
                 datasource: newDatasourceSelection
             });
@@ -44,22 +41,26 @@ export function LokiLogQueryEditor(props) {
         }
         throw new Error('Got unexpected non LokiQuery datasource selection');
     };
-    // Debounced query change handler to prevent excessive query_range calls
-    const handleQueryChange = useCallback((newQuery)=>{
-        setLocalQuery(newQuery);
-    }, []);
     const handleLogsDirection = (_, v)=>onChange(produce(value, (draft)=>{
             draft.direction = v;
         }));
     // Immediate query execution on Enter or blur
-    const handleQueryExecute = useCallback((query)=>{
-        onChange({
-            ...value,
-            query
-        });
+    const handleQueryExecute = (query)=>{
+        if (queryHandlerSettings?.watchQueryChanges) {
+            queryHandlerSettings.watchQueryChanges(query);
+        }
+        onChange(produce(value, (draft)=>{
+            draft.query = query;
+        }));
+    };
+    const handleLogsQueryChange = useCallback((e)=>{
+        handleQueryChange(e);
+        if (queryHandlerSettings?.watchQueryChanges) {
+            queryHandlerSettings.watchQueryChanges(e);
+        }
     }, [
-        onChange,
-        value
+        handleQueryChange,
+        queryHandlerSettings
     ]);
     return /*#__PURE__*/ _jsxs(Stack, {
         spacing: 1.5,
@@ -95,13 +96,13 @@ export function LokiLogQueryEditor(props) {
                         children: "LogQL Query"
                     }),
                     /*#__PURE__*/ _jsx(LogQLEditor, {
-                        value: localQuery,
-                        onChange: handleQueryChange,
-                        onBlur: ()=>handleQueryExecute(localQuery),
+                        value: query,
+                        onChange: handleLogsQueryChange,
+                        onBlur: queryHandlerSettings?.runWithOnBlur ? handleQueryBlur : undefined,
                         onKeyDown: (event)=>{
                             if (event.key === 'Enter' && (event.ctrlKey || event.metaKey)) {
                                 event.preventDefault();
-                                handleQueryExecute(localQuery);
+                                handleQueryExecute(query);
                             }
                         },
                         placeholder: 'Enter LogQL query (e.g. {job="mysql"} |= "error")'

package/lib/queries/loki-log-query/LokiLogQueryEditor.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/queries/loki-log-query/LokiLogQueryEditor.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 {\n  DatasourceSelect,\n  DatasourceSelectProps,\n  isVariableDatasource,\n  OptionsEditorProps,\n  useDatasourceSelectValueToSelector,\n} from '@perses-dev/plugin-system';\nimport { InputLabel, Stack, ToggleButton, ToggleButtonGroup } from '@mui/material';\nimport { ReactElement, useCallback, useState, useEffect } from 'react';\nimport { produce } from 'immer';\nimport { OptionsEditorControl } from '@perses-dev/components';\nimport { LogQLEditor } from '../../components/logql-editor';\nimport { LOKI_DATASOURCE_KIND, LokiDatasourceSelector } from '../../model';\nimport { DATASOURCE_KIND, DEFAULT_DATASOURCE } from '../constants';\nimport { LokiLogQuerySpec } from './loki-log-query-types';\n\ntype LokiQueryEditorProps = OptionsEditorProps<LokiLogQuerySpec>;\n\nexport function LokiLogQueryEditor(props: LokiQueryEditorProps): ReactElement {\n  const { onChange, value } = props;\n  const { datasource } = value;\n  const datasourceSelectValue = datasource ?? DEFAULT_DATASOURCE;\n  const selectedDatasource = useDatasourceSelectValueToSelector(\n    datasourceSelectValue,\n    LOKI_DATASOURCE_KIND\n  ) as LokiDatasourceSelector;\n\n  // const { data: client } = useDatasourceClient<LokiClient>(selectedDatasource);\n  // const lokiURL = client?.options.datasourceUrl;\n\n  // Local state for editor value to prevent query_range calls on every keystroke\n  const [localQuery, setLocalQuery] = useState(value.query);\n\n  // Update local state when prop changes\n  useEffect(() => {\n    setLocalQuery(value.query);\n  }, [value.query]);\n\n  const handleDatasourceChange: DatasourceSelectProps['onChange'] = (newDatasourceSelection) => {\n    if (!isVariableDatasource(newDatasourceSelection) && newDatasourceSelection.kind === DATASOURCE_KIND) {\n      onChange({ ...value, datasource: newDatasourceSelection });\n      return;\n    }\n\n    throw new Error('Got unexpected non LokiQuery datasource selection');\n  };\n\n  // Debounced query change handler to prevent excessive query_range calls\n  const handleQueryChange = useCallback((newQuery: string) => {\n    setLocalQuery(newQuery);\n  }, []);\n\n  const handleLogsDirection = (_: React.MouseEvent, v: 'backward' | 'forward') =>\n    onChange(\n      produce(value, (draft: LokiLogQuerySpec) => {\n        draft.direction = v;\n      })\n    );\n\n  // Immediate query execution on Enter or blur\n  const handleQueryExecute = useCallback(\n    (query: string) => {\n      onChange({ ...value, query });\n    },\n    [onChange, value]\n  );\n\n  return (\n    <Stack spacing={1.5} paddingBottom={1}>\n      <div>\n        <InputLabel\n          sx={{\n            display: 'block',\n            marginBottom: '4px',\n            fontWeight: 500,\n          }}\n        >\n          Datasource\n        </InputLabel>\n        <DatasourceSelect\n          datasourcePluginKind={DATASOURCE_KIND}\n          value={selectedDatasource}\n          onChange={handleDatasourceChange}\n          label=\"Loki Datasource\"\n          notched\n        />\n      </div>\n\n      <div>\n        <InputLabel\n          sx={{\n            display: 'block',\n            marginBottom: '4px',\n            fontWeight: 500,\n          }}\n        >\n          LogQL Query\n        </InputLabel>\n        <LogQLEditor\n          value={localQuery}\n          onChange={handleQueryChange}\n          onBlur={() => handleQueryExecute(localQuery)}\n          onKeyDown={(event) => {\n            if (event.key === 'Enter' && (event.ctrlKey || event.metaKey)) {\n              event.preventDefault();\n              handleQueryExecute(localQuery);\n            }\n          }}\n          placeholder='Enter LogQL query (e.g. {job=\"mysql\"} |= \"error\")'\n          // height=\"120px\"\n        />\n      </div>\n      <div>\n        <OptionsEditorControl\n          label=\"Order\"\n          // description=\"Percentage means thresholds relative to min & max\"\n          control={\n            <ToggleButtonGroup\n              exclusive\n              value={value?.direction ?? 'backward'}\n              onChange={handleLogsDirection}\n              sx={{ height: '36px', marginLeft: '10px', width: 'max-content' }}\n            >\n              <ToggleButton aria-label=\"backward\" value=\"backward\" sx={{ fontWeight: 500 }}>\n                Newest first\n              </ToggleButton>\n              <ToggleButton aria-label=\"forward\" value=\"forward\" sx={{ fontWeight: 500 }}>\n                Oldest first\n              </ToggleButton>\n            </ToggleButtonGroup>\n          }\n        />\n      </div>\n    </Stack>\n  );\n}\n"],"names":["DatasourceSelect","isVariableDatasource","useDatasourceSelectValueToSelector","InputLabel","Stack","ToggleButton","ToggleButtonGroup","useCallback","useState","useEffect","produce","OptionsEditorControl","LogQLEditor","LOKI_DATASOURCE_KIND","DATASOURCE_KIND","DEFAULT_DATASOURCE","LokiLogQueryEditor","props","onChange","value","datasource","datasourceSelectValue","selectedDatasource","localQuery","setLocalQuery","query","handleDatasourceChange","newDatasourceSelection","kind","Error","handleQueryChange","newQuery","handleLogsDirection","_","v","draft","direction","handleQueryExecute","spacing","paddingBottom","div","sx","display","marginBottom","fontWeight","datasourcePluginKind","label","notched","onBlur","onKeyDown","event","key","ctrlKey","metaKey","preventDefault","placeholder","control","exclusive","height","marginLeft","width","aria-label"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SACEA,gBAAgB,EAEhBC,oBAAoB,EAEpBC,kCAAkC,QAC7B,4BAA4B;AACnC,SAASC,UAAU,EAAEC,KAAK,EAAEC,YAAY,EAAEC,iBAAiB,QAAQ,gBAAgB;AACnF,SAAuBC,WAAW,EAAEC,QAAQ,EAAEC,SAAS,QAAQ,QAAQ;AACvE,SAASC,OAAO,QAAQ,QAAQ;AAChC,SAASC,oBAAoB,QAAQ,yBAAyB;AAC9D,SAASC,WAAW,QAAQ,gCAAgC;AAC5D,SAASC,oBAAoB,QAAgC,cAAc;AAC3E,SAASC,eAAe,EAAEC,kBAAkB,QAAQ,eAAe;AAKnE,OAAO,SAASC,mBAAmBC,KAA2B;IAC5D,MAAM,EAAEC,QAAQ,EAAEC,KAAK,EAAE,GAAGF;IAC5B,MAAM,EAAEG,UAAU,EAAE,GAAGD;IACvB,MAAME,wBAAwBD,cAAcL;IAC5C,MAAMO,qBAAqBpB,mCACzBmB,uBACAR;IAGF,gFAAgF;IAChF,iDAAiD;IAEjD,+EAA+E;IAC/E,MAAM,CAACU,YAAYC,cAAc,GAAGhB,SAASW,MAAMM,KAAK;IAExD,uCAAuC;IACvChB,UAAU;QACRe,cAAcL,MAAMM,KAAK;IAC3B,GAAG;QAACN,MAAMM,KAAK;KAAC;IAEhB,MAAMC,yBAA4D,CAACC;QACjE,IAAI,CAAC1B,qBAAqB0B,2BAA2BA,uBAAuBC,IAAI,KAAKd,iBAAiB;YACpGI,SAAS;gBAAE,GAAGC,KAAK;gBAAEC,YAAYO;YAAuB;YACxD;QACF;QAEA,MAAM,IAAIE,MAAM;IAClB;IAEA,wEAAwE;IACxE,MAAMC,oBAAoBvB,YAAY,CAACwB;QACrCP,cAAcO;IAChB,GAAG,EAAE;IAEL,MAAMC,sBAAsB,CAACC,GAAqBC,IAChDhB,SACER,QAAQS,OAAO,CAACgB;YACdA,MAAMC,SAAS,GAAGF;QACpB;IAGJ,6CAA6C;IAC7C,MAAMG,qBAAqB9B,YACzB,CAACkB;QACCP,SAAS;YAAE,GAAGC,KAAK;YAAEM;QAAM;IAC7B,GACA;QAACP;QAAUC;KAAM;IAGnB,qBACE,MAACf;QAAMkC,SAAS;QAAKC,eAAe;;0BAClC,MAACC;;kCACC,KAACrC;wBACCsC,IAAI;4BACFC,SAAS;4BACTC,cAAc;4BACdC,YAAY;wBACd;kCACD;;kCAGD,KAAC5C;wBACC6C,sBAAsB/B;wBACtBK,OAAOG;wBACPJ,UAAUQ;wBACVoB,OAAM;wBACNC,OAAO;;;;0BAIX,MAACP;;kCACC,KAACrC;wBACCsC,IAAI;4BACFC,SAAS;4BACTC,cAAc;4BACdC,YAAY;wBACd;kCACD;;kCAGD,KAAChC;wBACCO,OAAOI;wBACPL,UAAUY;wBACVkB,QAAQ,IAAMX,mBAAmBd;wBACjC0B,WAAW,CAACC;4BACV,IAAIA,MAAMC,GAAG,KAAK,WAAYD,CAAAA,MAAME,OAAO,IAAIF,MAAMG,OAAO,AAAD,GAAI;gCAC7DH,MAAMI,cAAc;gCACpBjB,mBAAmBd;4BACrB;wBACF;wBACAgC,aAAY;;;;0BAIhB,KAACf;0BACC,cAAA,KAAC7B;oBACCmC,OAAM;oBACN,kEAAkE;oBAClEU,uBACE,MAAClD;wBACCmD,SAAS;wBACTtC,OAAOA,OAAOiB,aAAa;wBAC3BlB,UAAUc;wBACVS,IAAI;4BAAEiB,QAAQ;4BAAQC,YAAY;4BAAQC,OAAO;wBAAc;;0CAE/D,KAACvD;gCAAawD,cAAW;gCAAW1C,OAAM;gCAAWsB,IAAI;oCAAEG,YAAY;gCAAI;0CAAG;;0CAG9E,KAACvC;gCAAawD,cAAW;gCAAU1C,OAAM;gCAAUsB,IAAI;oCAAEG,YAAY;gCAAI;0CAAG;;;;;;;;AAS1F"}
+{"version":3,"sources":["../../../../src/queries/loki-log-query/LokiLogQueryEditor.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 {\n  DatasourceSelect,\n  DatasourceSelectProps,\n  isVariableDatasource,\n  OptionsEditorProps,\n  useDatasourceSelectValueToSelector,\n} from '@perses-dev/plugin-system';\nimport { InputLabel, Stack, ToggleButton, ToggleButtonGroup } from '@mui/material';\nimport { ReactElement, useCallback, useState, useEffect } from 'react';\nimport { produce } from 'immer';\nimport { OptionsEditorControl } from '@perses-dev/components';\nimport { LogQLEditor } from '../../components/logql-editor';\nimport { isDefaultLokiSelector, LOKI_DATASOURCE_KIND, LokiDatasourceSelector } from '../../model';\nimport { DATASOURCE_KIND, DEFAULT_DATASOURCE } from '../constants';\nimport { LokiLogQuerySpec } from './loki-log-query-types';\nimport { useQueryState } from '../query-editor-model';\n\ntype LokiQueryEditorProps = OptionsEditorProps<LokiLogQuerySpec>;\n\nexport function LokiLogQueryEditor(props: LokiQueryEditorProps): ReactElement {\n  const { onChange, value, queryHandlerSettings } = props;\n  const { datasource } = value;\n  const datasourceSelectValue = datasource ?? DEFAULT_DATASOURCE;\n  const selectedDatasource = useDatasourceSelectValueToSelector(\n    datasourceSelectValue,\n    LOKI_DATASOURCE_KIND\n  ) as LokiDatasourceSelector;\n  const { query, handleQueryChange, handleQueryBlur } = useQueryState(props);\n\n  const handleDatasourceChange: DatasourceSelectProps['onChange'] = (newDatasourceSelection) => {\n    if (!isVariableDatasource(newDatasourceSelection) && newDatasourceSelection.kind === DATASOURCE_KIND) {\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 = isDefaultLokiSelector(newDatasourceSelection) ? undefined : newDatasourceSelection;\n          draft.datasource = nextDatasource;\n        })\n      );\n\n      if (queryHandlerSettings?.setWatchOtherSpecs)\n        queryHandlerSettings.setWatchOtherSpecs({ ...value, datasource: newDatasourceSelection });\n      return;\n    }\n\n    throw new Error('Got unexpected non LokiQuery datasource selection');\n  };\n\n  const handleLogsDirection = (_: React.MouseEvent, v: 'backward' | 'forward') =>\n    onChange(\n      produce(value, (draft: LokiLogQuerySpec) => {\n        draft.direction = v;\n      })\n    );\n\n  // Immediate query execution on Enter or blur\n  const handleQueryExecute = (query: string) => {\n    if (queryHandlerSettings?.watchQueryChanges) {\n      queryHandlerSettings.watchQueryChanges(query);\n    }\n    onChange(\n      produce(value, (draft) => {\n        draft.query = query;\n      })\n    );\n  };\n\n  const handleLogsQueryChange = useCallback(\n    (e: string) => {\n      handleQueryChange(e);\n      if (queryHandlerSettings?.watchQueryChanges) {\n        queryHandlerSettings.watchQueryChanges(e);\n      }\n    },\n    [handleQueryChange, queryHandlerSettings]\n  );\n\n  return (\n    <Stack spacing={1.5} paddingBottom={1}>\n      <div>\n        <InputLabel\n          sx={{\n            display: 'block',\n            marginBottom: '4px',\n            fontWeight: 500,\n          }}\n        >\n          Datasource\n        </InputLabel>\n        <DatasourceSelect\n          datasourcePluginKind={DATASOURCE_KIND}\n          value={selectedDatasource}\n          onChange={handleDatasourceChange}\n          label=\"Loki Datasource\"\n          notched\n        />\n      </div>\n\n      <div>\n        <InputLabel\n          sx={{\n            display: 'block',\n            marginBottom: '4px',\n            fontWeight: 500,\n          }}\n        >\n          LogQL Query\n        </InputLabel>\n        <LogQLEditor\n          value={query}\n          onChange={handleLogsQueryChange}\n          onBlur={queryHandlerSettings?.runWithOnBlur ? handleQueryBlur : undefined}\n          onKeyDown={(event) => {\n            if (event.key === 'Enter' && (event.ctrlKey || event.metaKey)) {\n              event.preventDefault();\n              handleQueryExecute(query);\n            }\n          }}\n          placeholder='Enter LogQL query (e.g. {job=\"mysql\"} |= \"error\")'\n          // height=\"120px\"\n        />\n      </div>\n      <div>\n        <OptionsEditorControl\n          label=\"Order\"\n          // description=\"Percentage means thresholds relative to min & max\"\n          control={\n            <ToggleButtonGroup\n              exclusive\n              value={value?.direction ?? 'backward'}\n              onChange={handleLogsDirection}\n              sx={{ height: '36px', marginLeft: '10px', width: 'max-content' }}\n            >\n              <ToggleButton aria-label=\"backward\" value=\"backward\" sx={{ fontWeight: 500 }}>\n                Newest first\n              </ToggleButton>\n              <ToggleButton aria-label=\"forward\" value=\"forward\" sx={{ fontWeight: 500 }}>\n                Oldest first\n              </ToggleButton>\n            </ToggleButtonGroup>\n          }\n        />\n      </div>\n    </Stack>\n  );\n}\n"],"names":["DatasourceSelect","isVariableDatasource","useDatasourceSelectValueToSelector","InputLabel","Stack","ToggleButton","ToggleButtonGroup","useCallback","produce","OptionsEditorControl","LogQLEditor","isDefaultLokiSelector","LOKI_DATASOURCE_KIND","DATASOURCE_KIND","DEFAULT_DATASOURCE","useQueryState","LokiLogQueryEditor","props","onChange","value","queryHandlerSettings","datasource","datasourceSelectValue","selectedDatasource","query","handleQueryChange","handleQueryBlur","handleDatasourceChange","newDatasourceSelection","kind","draft","nextDatasource","undefined","setWatchOtherSpecs","Error","handleLogsDirection","_","v","direction","handleQueryExecute","watchQueryChanges","handleLogsQueryChange","e","spacing","paddingBottom","div","sx","display","marginBottom","fontWeight","datasourcePluginKind","label","notched","onBlur","runWithOnBlur","onKeyDown","event","key","ctrlKey","metaKey","preventDefault","placeholder","control","exclusive","height","marginLeft","width","aria-label"],"mappings":"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"}

package/lib/queries/loki-time-series-query/LokiTimeSeriesQueryEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LokiTimeSeriesQueryEditor.d.ts","sourceRoot":"","sources":["../../../../src/queries/loki-time-series-query/LokiTimeSeriesQueryEditor.tsx"],"names":[],"mappings":"AAaA,OAAO,EAIL,kBAAkB,EAEnB,MAAM,2BAA2B,CAAC;AAEnC,OAAO,EAAE,YAAY,EAAoC,MAAM,OAAO,CAAC;AAIvE,OAAO,EAAE,uBAAuB,EAAE,MAAM,gCAAgC,CAAC;AAEzE,KAAK,oBAAoB,GAAG,kBAAkB,CAAC,uBAAuB,CAAC,CAAC;AAExE,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,GAAG,YAAY,CAyFzE"}
+{"version":3,"file":"LokiTimeSeriesQueryEditor.d.ts","sourceRoot":"","sources":["../../../../src/queries/loki-time-series-query/LokiTimeSeriesQueryEditor.tsx"],"names":[],"mappings":"AAaA,OAAO,EAIL,kBAAkB,EAEnB,MAAM,2BAA2B,CAAC;AAEnC,OAAO,EAAE,YAAY,EAAe,MAAM,OAAO,CAAC;AAKlD,OAAO,EAAE,uBAAuB,EAAE,MAAM,gCAAgC,CAAC;AAGzE,KAAK,oBAAoB,GAAG,kBAAkB,CAAC,uBAAuB,CAAC,CAAC;AAExE,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,GAAG,YAAY,CA+FzE"}

package/lib/queries/loki-time-series-query/LokiTimeSeriesQueryEditor.js

@@ -13,28 +13,24 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { DatasourceSelect, isVariableDatasource, useDatasourceSelectValueToSelector } from '@perses-dev/plugin-system';
 import { InputLabel, Stack } from '@mui/material';
-import { useCallback, useState, useEffect } from 'react';
+import { useCallback } from 'react';
+import { produce } from 'immer';
 import { LogQLEditor } from '../../components/logql-editor';
 import { LOKI_DATASOURCE_KIND } from '../../model';
 import { DATASOURCE_KIND, DEFAULT_DATASOURCE } from '../constants';
+import { useQueryState } from '../query-editor-model';
 export function LokiQueryEditor(props) {
-    const { onChange, value } = props;
+    const { onChange, value, queryHandlerSettings } = props;
     const { datasource } = value;
     const datasourceSelectValue = datasource ?? DEFAULT_DATASOURCE;
     const selectedDatasource = useDatasourceSelectValueToSelector(datasourceSelectValue, LOKI_DATASOURCE_KIND);
-    // const { data: client } = useDatasourceClient<LokiClient>(selectedDatasource);
-    // const lokiURL = client?.options.datasourceUrl;
-    // Local state for editor value to prevent query_range calls on every keystroke
-    const [localQuery, setLocalQuery] = useState(value.query);
-    // Update local state when prop changes
-    useEffect(()=>{
-        setLocalQuery(value.query);
-    }, [
-        value.query
-    ]);
+    const { query, handleQueryChange, handleQueryBlur } = useQueryState(props);
     const handleDatasourceChange = (newDatasourceSelection)=>{
         if (!isVariableDatasource(newDatasourceSelection) && newDatasourceSelection.kind === DATASOURCE_KIND) {
-            onChange({
+            onChange(produce(value, (draft)=>{
+                draft.datasource = newDatasourceSelection;
+            }));
+            if (queryHandlerSettings?.setWatchOtherSpecs) queryHandlerSettings.setWatchOtherSpecs({
                 ...value,
                 datasource: newDatasourceSelection
             });
@@ -42,19 +38,23 @@ export function LokiQueryEditor(props) {
         }
         throw new Error('Got unexpected non LokiQuery datasource selection');
     };
-    // Debounced query change handler to prevent excessive query_range calls
-    const handleQueryChange = useCallback((newQuery)=>{
-        setLocalQuery(newQuery);
-    }, []);
     // Immediate query execution on Enter or blur
-    const handleQueryExecute = useCallback((query)=>{
-        onChange({
-            ...value,
-            query
-        });
+    const handleQueryExecute = (query)=>{
+        if (queryHandlerSettings?.watchQueryChanges) {
+            queryHandlerSettings.watchQueryChanges(query);
+        }
+        onChange(produce(value, (draft)=>{
+            draft.query = query;
+        }));
+    };
+    const handleLogsQueryChange = useCallback((e)=>{
+        handleQueryChange(e);
+        if (queryHandlerSettings?.watchQueryChanges) {
+            queryHandlerSettings.watchQueryChanges(e);
+        }
     }, [
-        onChange,
-        value
+        handleQueryChange,
+        queryHandlerSettings
     ]);
     return /*#__PURE__*/ _jsxs(Stack, {
         spacing: 1.5,
@@ -90,13 +90,13 @@ export function LokiQueryEditor(props) {
                         children: "LogQL Query"
                     }),
                     /*#__PURE__*/ _jsx(LogQLEditor, {
-                        value: localQuery,
-                        onChange: handleQueryChange,
-                        onBlur: ()=>handleQueryExecute(localQuery),
+                        value: query,
+                        onChange: handleLogsQueryChange,
+                        onBlur: queryHandlerSettings?.runWithOnBlur ? handleQueryBlur : undefined,
                         onKeyDown: (event)=>{
                             if (event.key === 'Enter' && (event.ctrlKey || event.metaKey)) {
                                 event.preventDefault();
-                                handleQueryExecute(localQuery);
+                                handleQueryExecute(query);
                             }
                         },
                         placeholder: 'Enter LogQL query (e.g. {job="mysql"} |= "error")'

package/lib/queries/loki-time-series-query/LokiTimeSeriesQueryEditor.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/queries/loki-time-series-query/LokiTimeSeriesQueryEditor.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 {\n  DatasourceSelect,\n  DatasourceSelectProps,\n  isVariableDatasource,\n  OptionsEditorProps,\n  useDatasourceSelectValueToSelector,\n} from '@perses-dev/plugin-system';\nimport { InputLabel, Stack } from '@mui/material';\nimport { ReactElement, useCallback, useState, useEffect } from 'react';\nimport { LogQLEditor } from '../../components/logql-editor';\nimport { LOKI_DATASOURCE_KIND, LokiDatasourceSelector } from '../../model';\nimport { DATASOURCE_KIND, DEFAULT_DATASOURCE } from '../constants';\nimport { LokiTimeSeriesQuerySpec } from './loki-time-series-query-types';\n\ntype LokiQueryEditorProps = OptionsEditorProps<LokiTimeSeriesQuerySpec>;\n\nexport function LokiQueryEditor(props: LokiQueryEditorProps): ReactElement {\n  const { onChange, value } = props;\n  const { datasource } = value;\n  const datasourceSelectValue = datasource ?? DEFAULT_DATASOURCE;\n  const selectedDatasource = useDatasourceSelectValueToSelector(\n    datasourceSelectValue,\n    LOKI_DATASOURCE_KIND\n  ) as LokiDatasourceSelector;\n\n  // const { data: client } = useDatasourceClient<LokiClient>(selectedDatasource);\n  // const lokiURL = client?.options.datasourceUrl;\n\n  // Local state for editor value to prevent query_range calls on every keystroke\n  const [localQuery, setLocalQuery] = useState(value.query);\n\n  // Update local state when prop changes\n  useEffect(() => {\n    setLocalQuery(value.query);\n  }, [value.query]);\n\n  const handleDatasourceChange: DatasourceSelectProps['onChange'] = (newDatasourceSelection) => {\n    if (!isVariableDatasource(newDatasourceSelection) && newDatasourceSelection.kind === DATASOURCE_KIND) {\n      onChange({ ...value, datasource: newDatasourceSelection });\n      return;\n    }\n\n    throw new Error('Got unexpected non LokiQuery datasource selection');\n  };\n\n  // Debounced query change handler to prevent excessive query_range calls\n  const handleQueryChange = useCallback((newQuery: string) => {\n    setLocalQuery(newQuery);\n  }, []);\n\n  // Immediate query execution on Enter or blur\n  const handleQueryExecute = useCallback(\n    (query: string) => {\n      onChange({ ...value, query });\n    },\n    [onChange, value]\n  );\n\n  return (\n    <Stack spacing={1.5} paddingBottom={1}>\n      <div>\n        <InputLabel\n          sx={{\n            display: 'block',\n            marginBottom: '4px',\n            fontWeight: 500,\n          }}\n        >\n          Datasource\n        </InputLabel>\n        <DatasourceSelect\n          datasourcePluginKind={DATASOURCE_KIND}\n          value={selectedDatasource}\n          onChange={handleDatasourceChange}\n          label=\"Loki Datasource\"\n          notched\n        />\n      </div>\n\n      <div>\n        <InputLabel\n          sx={{\n            display: 'block',\n            marginBottom: '4px',\n            fontWeight: 500,\n          }}\n        >\n          LogQL Query\n        </InputLabel>\n        <LogQLEditor\n          value={localQuery}\n          onChange={handleQueryChange}\n          onBlur={() => handleQueryExecute(localQuery)}\n          onKeyDown={(event) => {\n            if (event.key === 'Enter' && (event.ctrlKey || event.metaKey)) {\n              event.preventDefault();\n              handleQueryExecute(localQuery);\n            }\n          }}\n          placeholder='Enter LogQL query (e.g. {job=\"mysql\"} |= \"error\")'\n          // height=\"120px\"\n        />\n      </div>\n    </Stack>\n  );\n}\n"],"names":["DatasourceSelect","isVariableDatasource","useDatasourceSelectValueToSelector","InputLabel","Stack","useCallback","useState","useEffect","LogQLEditor","LOKI_DATASOURCE_KIND","DATASOURCE_KIND","DEFAULT_DATASOURCE","LokiQueryEditor","props","onChange","value","datasource","datasourceSelectValue","selectedDatasource","localQuery","setLocalQuery","query","handleDatasourceChange","newDatasourceSelection","kind","Error","handleQueryChange","newQuery","handleQueryExecute","spacing","paddingBottom","div","sx","display","marginBottom","fontWeight","datasourcePluginKind","label","notched","onBlur","onKeyDown","event","key","ctrlKey","metaKey","preventDefault","placeholder"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SACEA,gBAAgB,EAEhBC,oBAAoB,EAEpBC,kCAAkC,QAC7B,4BAA4B;AACnC,SAASC,UAAU,EAAEC,KAAK,QAAQ,gBAAgB;AAClD,SAAuBC,WAAW,EAAEC,QAAQ,EAAEC,SAAS,QAAQ,QAAQ;AACvE,SAASC,WAAW,QAAQ,gCAAgC;AAC5D,SAASC,oBAAoB,QAAgC,cAAc;AAC3E,SAASC,eAAe,EAAEC,kBAAkB,QAAQ,eAAe;AAKnE,OAAO,SAASC,gBAAgBC,KAA2B;IACzD,MAAM,EAAEC,QAAQ,EAAEC,KAAK,EAAE,GAAGF;IAC5B,MAAM,EAAEG,UAAU,EAAE,GAAGD;IACvB,MAAME,wBAAwBD,cAAcL;IAC5C,MAAMO,qBAAqBhB,mCACzBe,uBACAR;IAGF,gFAAgF;IAChF,iDAAiD;IAEjD,+EAA+E;IAC/E,MAAM,CAACU,YAAYC,cAAc,GAAGd,SAASS,MAAMM,KAAK;IAExD,uCAAuC;IACvCd,UAAU;QACRa,cAAcL,MAAMM,KAAK;IAC3B,GAAG;QAACN,MAAMM,KAAK;KAAC;IAEhB,MAAMC,yBAA4D,CAACC;QACjE,IAAI,CAACtB,qBAAqBsB,2BAA2BA,uBAAuBC,IAAI,KAAKd,iBAAiB;YACpGI,SAAS;gBAAE,GAAGC,KAAK;gBAAEC,YAAYO;YAAuB;YACxD;QACF;QAEA,MAAM,IAAIE,MAAM;IAClB;IAEA,wEAAwE;IACxE,MAAMC,oBAAoBrB,YAAY,CAACsB;QACrCP,cAAcO;IAChB,GAAG,EAAE;IAEL,6CAA6C;IAC7C,MAAMC,qBAAqBvB,YACzB,CAACgB;QACCP,SAAS;YAAE,GAAGC,KAAK;YAAEM;QAAM;IAC7B,GACA;QAACP;QAAUC;KAAM;IAGnB,qBACE,MAACX;QAAMyB,SAAS;QAAKC,eAAe;;0BAClC,MAACC;;kCACC,KAAC5B;wBACC6B,IAAI;4BACFC,SAAS;4BACTC,cAAc;4BACdC,YAAY;wBACd;kCACD;;kCAGD,KAACnC;wBACCoC,sBAAsB1B;wBACtBK,OAAOG;wBACPJ,UAAUQ;wBACVe,OAAM;wBACNC,OAAO;;;;0BAIX,MAACP;;kCACC,KAAC5B;wBACC6B,IAAI;4BACFC,SAAS;4BACTC,cAAc;4BACdC,YAAY;wBACd;kCACD;;kCAGD,KAAC3B;wBACCO,OAAOI;wBACPL,UAAUY;wBACVa,QAAQ,IAAMX,mBAAmBT;wBACjCqB,WAAW,CAACC;4BACV,IAAIA,MAAMC,GAAG,KAAK,WAAYD,CAAAA,MAAME,OAAO,IAAIF,MAAMG,OAAO,AAAD,GAAI;gCAC7DH,MAAMI,cAAc;gCACpBjB,mBAAmBT;4BACrB;wBACF;wBACA2B,aAAY;;;;;;AAMtB"}
+{"version":3,"sources":["../../../../src/queries/loki-time-series-query/LokiTimeSeriesQueryEditor.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 {\n  DatasourceSelect,\n  DatasourceSelectProps,\n  isVariableDatasource,\n  OptionsEditorProps,\n  useDatasourceSelectValueToSelector,\n} from '@perses-dev/plugin-system';\nimport { InputLabel, Stack } from '@mui/material';\nimport { ReactElement, useCallback } from 'react';\nimport { produce } from 'immer';\nimport { LogQLEditor } from '../../components/logql-editor';\nimport { LOKI_DATASOURCE_KIND, LokiDatasourceSelector } from '../../model';\nimport { DATASOURCE_KIND, DEFAULT_DATASOURCE } from '../constants';\nimport { LokiTimeSeriesQuerySpec } from './loki-time-series-query-types';\nimport { useQueryState } from '../query-editor-model';\n\ntype LokiQueryEditorProps = OptionsEditorProps<LokiTimeSeriesQuerySpec>;\n\nexport function LokiQueryEditor(props: LokiQueryEditorProps): ReactElement {\n  const { onChange, value, queryHandlerSettings } = props;\n  const { datasource } = value;\n  const datasourceSelectValue = datasource ?? DEFAULT_DATASOURCE;\n  const selectedDatasource = useDatasourceSelectValueToSelector(\n    datasourceSelectValue,\n    LOKI_DATASOURCE_KIND\n  ) as LokiDatasourceSelector;\n  const { query, handleQueryChange, handleQueryBlur } = useQueryState(props);\n\n  const handleDatasourceChange: DatasourceSelectProps['onChange'] = (newDatasourceSelection) => {\n    if (!isVariableDatasource(newDatasourceSelection) && newDatasourceSelection.kind === DATASOURCE_KIND) {\n      onChange(\n        produce(value, (draft) => {\n          draft.datasource = newDatasourceSelection;\n        })\n      );\n\n      if (queryHandlerSettings?.setWatchOtherSpecs)\n        queryHandlerSettings.setWatchOtherSpecs({ ...value, datasource: newDatasourceSelection });\n      return;\n    }\n\n    throw new Error('Got unexpected non LokiQuery datasource selection');\n  };\n\n  // Immediate query execution on Enter or blur\n  const handleQueryExecute = (query: string) => {\n    if (queryHandlerSettings?.watchQueryChanges) {\n      queryHandlerSettings.watchQueryChanges(query);\n    }\n    onChange(\n      produce(value, (draft) => {\n        draft.query = query;\n      })\n    );\n  };\n\n  const handleLogsQueryChange = useCallback(\n    (e: string) => {\n      handleQueryChange(e);\n      if (queryHandlerSettings?.watchQueryChanges) {\n        queryHandlerSettings.watchQueryChanges(e);\n      }\n    },\n    [handleQueryChange, queryHandlerSettings]\n  );\n\n  return (\n    <Stack spacing={1.5} paddingBottom={1}>\n      <div>\n        <InputLabel\n          sx={{\n            display: 'block',\n            marginBottom: '4px',\n            fontWeight: 500,\n          }}\n        >\n          Datasource\n        </InputLabel>\n        <DatasourceSelect\n          datasourcePluginKind={DATASOURCE_KIND}\n          value={selectedDatasource}\n          onChange={handleDatasourceChange}\n          label=\"Loki Datasource\"\n          notched\n        />\n      </div>\n\n      <div>\n        <InputLabel\n          sx={{\n            display: 'block',\n            marginBottom: '4px',\n            fontWeight: 500,\n          }}\n        >\n          LogQL Query\n        </InputLabel>\n        <LogQLEditor\n          value={query}\n          onChange={handleLogsQueryChange}\n          onBlur={queryHandlerSettings?.runWithOnBlur ? handleQueryBlur : undefined}\n          onKeyDown={(event) => {\n            if (event.key === 'Enter' && (event.ctrlKey || event.metaKey)) {\n              event.preventDefault();\n              handleQueryExecute(query);\n            }\n          }}\n          placeholder='Enter LogQL query (e.g. {job=\"mysql\"} |= \"error\")'\n          // height=\"120px\"\n        />\n      </div>\n    </Stack>\n  );\n}\n"],"names":["DatasourceSelect","isVariableDatasource","useDatasourceSelectValueToSelector","InputLabel","Stack","useCallback","produce","LogQLEditor","LOKI_DATASOURCE_KIND","DATASOURCE_KIND","DEFAULT_DATASOURCE","useQueryState","LokiQueryEditor","props","onChange","value","queryHandlerSettings","datasource","datasourceSelectValue","selectedDatasource","query","handleQueryChange","handleQueryBlur","handleDatasourceChange","newDatasourceSelection","kind","draft","setWatchOtherSpecs","Error","handleQueryExecute","watchQueryChanges","handleLogsQueryChange","e","spacing","paddingBottom","div","sx","display","marginBottom","fontWeight","datasourcePluginKind","label","notched","onBlur","runWithOnBlur","undefined","onKeyDown","event","key","ctrlKey","metaKey","preventDefault","placeholder"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SACEA,gBAAgB,EAEhBC,oBAAoB,EAEpBC,kCAAkC,QAC7B,4BAA4B;AACnC,SAASC,UAAU,EAAEC,KAAK,QAAQ,gBAAgB;AAClD,SAAuBC,WAAW,QAAQ,QAAQ;AAClD,SAASC,OAAO,QAAQ,QAAQ;AAChC,SAASC,WAAW,QAAQ,gCAAgC;AAC5D,SAASC,oBAAoB,QAAgC,cAAc;AAC3E,SAASC,eAAe,EAAEC,kBAAkB,QAAQ,eAAe;AAEnE,SAASC,aAAa,QAAQ,wBAAwB;AAItD,OAAO,SAASC,gBAAgBC,KAA2B;IACzD,MAAM,EAAEC,QAAQ,EAAEC,KAAK,EAAEC,oBAAoB,EAAE,GAAGH;IAClD,MAAM,EAAEI,UAAU,EAAE,GAAGF;IACvB,MAAMG,wBAAwBD,cAAcP;IAC5C,MAAMS,qBAAqBjB,mCACzBgB,uBACAV;IAEF,MAAM,EAAEY,KAAK,EAAEC,iBAAiB,EAAEC,eAAe,EAAE,GAAGX,cAAcE;IAEpE,MAAMU,yBAA4D,CAACC;QACjE,IAAI,CAACvB,qBAAqBuB,2BAA2BA,uBAAuBC,IAAI,KAAKhB,iBAAiB;YACpGK,SACER,QAAQS,OAAO,CAACW;gBACdA,MAAMT,UAAU,GAAGO;YACrB;YAGF,IAAIR,sBAAsBW,oBACxBX,qBAAqBW,kBAAkB,CAAC;gBAAE,GAAGZ,KAAK;gBAAEE,YAAYO;YAAuB;YACzF;QACF;QAEA,MAAM,IAAII,MAAM;IAClB;IAEA,6CAA6C;IAC7C,MAAMC,qBAAqB,CAACT;QAC1B,IAAIJ,sBAAsBc,mBAAmB;YAC3Cd,qBAAqBc,iBAAiB,CAACV;QACzC;QACAN,SACER,QAAQS,OAAO,CAACW;YACdA,MAAMN,KAAK,GAAGA;QAChB;IAEJ;IAEA,MAAMW,wBAAwB1B,YAC5B,CAAC2B;QACCX,kBAAkBW;QAClB,IAAIhB,sBAAsBc,mBAAmB;YAC3Cd,qBAAqBc,iBAAiB,CAACE;QACzC;IACF,GACA;QAACX;QAAmBL;KAAqB;IAG3C,qBACE,MAACZ;QAAM6B,SAAS;QAAKC,eAAe;;0BAClC,MAACC;;kCACC,KAAChC;wBACCiC,IAAI;4BACFC,SAAS;4BACTC,cAAc;4BACdC,YAAY;wBACd;kCACD;;kCAGD,KAACvC;wBACCwC,sBAAsB/B;wBACtBM,OAAOI;wBACPL,UAAUS;wBACVkB,OAAM;wBACNC,OAAO;;;;0BAIX,MAACP;;kCACC,KAAChC;wBACCiC,IAAI;4BACFC,SAAS;4BACTC,cAAc;4BACdC,YAAY;wBACd;kCACD;;kCAGD,KAAChC;wBACCQ,OAAOK;wBACPN,UAAUiB;wBACVY,QAAQ3B,sBAAsB4B,gBAAgBtB,kBAAkBuB;wBAChEC,WAAW,CAACC;4BACV,IAAIA,MAAMC,GAAG,KAAK,WAAYD,CAAAA,MAAME,OAAO,IAAIF,MAAMG,OAAO,AAAD,GAAI;gCAC7DH,MAAMI,cAAc;gCACpBtB,mBAAmBT;4BACrB;wBACF;wBACAgC,aAAY;;;;;;AAMtB"}

package/lib/queries/query-editor-model.d.ts

@@ -0,0 +1,20 @@
+import { OptionsEditorProps } from '@perses-dev/plugin-system';
+/**
+ * Generic type for any Loki query spec that has a query field
+ */
+type LokiQuerySpec = {
+    query: string;
+};
+/**
+ * A hook for managing the `query` state in Loki query specs. Returns the `query` value, along with
+ * `onChange` and `onBlur` event handlers to the input. Keeps a local copy of the user's input and only syncs those
+ * changes with the overall spec value once the input is blurred to prevent re-running queries in the panel's preview
+ * every time the user types.
+ */
+export declare function useQueryState<T extends LokiQuerySpec>(props: OptionsEditorProps<T>): {
+    query: string;
+    handleQueryChange: (e: string) => void;
+    handleQueryBlur: () => void;
+};
+export {};
+//# sourceMappingURL=query-editor-model.d.ts.map

package/lib/queries/query-editor-model.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"query-editor-model.d.ts","sourceRoot":"","sources":["../../../src/queries/query-editor-model.ts"],"names":[],"mappings":"AAeA,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAE/D;;GAEG;AACH,KAAK,aAAa,GAAG;IACnB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,CAAC,SAAS,aAAa,EACnD,KAAK,EAAE,kBAAkB,CAAC,CAAC,CAAC,GAC3B;IACD,KAAK,EAAE,MAAM,CAAC;IACd,iBAAiB,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,eAAe,EAAE,MAAM,IAAI,CAAC;CAC7B,CA+BA"}

package/lib/queries/query-editor-model.js

@@ -0,0 +1,50 @@
+// Copyright 2025 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { useState } from 'react';
+import { produce } from 'immer';
+/**
+ * A hook for managing the `query` state in Loki query specs. Returns the `query` value, along with
+ * `onChange` and `onBlur` event handlers to the input. Keeps a local copy of the user's input and only syncs those
+ * changes with the overall spec value once the input is blurred to prevent re-running queries in the panel's preview
+ * every time the user types.
+ */ export function useQueryState(props) {
+    const { onChange, value } = props;
+    // Local copy of the query's value
+    const [query, setQuery] = useState(value.query);
+    // This is basically "getDerivedStateFromProps" to make sure if spec's value changes external to this component,
+    // we render with the latest value
+    const [lastSyncedQuery, setLastSyncedQuery] = useState(value.query);
+    if (value.query !== lastSyncedQuery) {
+        setQuery(value.query);
+        setLastSyncedQuery(value.query);
+    }
+    // Update our local state's copy as the user types
+    const handleQueryChange = (e)=>{
+        setQuery(e);
+    };
+    // Propagate changes to the query's value when the input is blurred to avoid constantly re-running queries in the
+    // PanelPreview
+    const handleQueryBlur = ()=>{
+        setLastSyncedQuery(query);
+        onChange(produce(value, (draft)=>{
+            draft.query = query;
+        }));
+    };
+    return {
+        query,
+        handleQueryChange,
+        handleQueryBlur
+    };
+}
+
+//# sourceMappingURL=query-editor-model.js.map

package/lib/queries/query-editor-model.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/queries/query-editor-model.ts"],"sourcesContent":["// Copyright 2025 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { useState } from 'react';\nimport { produce } from 'immer';\nimport { OptionsEditorProps } from '@perses-dev/plugin-system';\n\n/**\n * Generic type for any Loki query spec that has a query field\n */\ntype LokiQuerySpec = {\n  query: string;\n};\n\n/**\n * A hook for managing the `query` state in Loki query specs. Returns the `query` value, along with\n * `onChange` and `onBlur` event handlers to the input. Keeps a local copy of the user's input and only syncs those\n * changes with the overall spec value once the input is blurred to prevent re-running queries in the panel's preview\n * every time the user types.\n */\nexport function useQueryState<T extends LokiQuerySpec>(\n  props: OptionsEditorProps<T>\n): {\n  query: string;\n  handleQueryChange: (e: string) => void;\n  handleQueryBlur: () => void;\n} {\n  const { onChange, value } = props;\n\n  // Local copy of the query's value\n  const [query, setQuery] = useState(value.query);\n\n  // This is basically \"getDerivedStateFromProps\" to make sure if spec's value changes external to this component,\n  // we render with the latest value\n  const [lastSyncedQuery, setLastSyncedQuery] = useState(value.query);\n  if (value.query !== lastSyncedQuery) {\n    setQuery(value.query);\n    setLastSyncedQuery(value.query);\n  }\n\n  // Update our local state's copy as the user types\n  const handleQueryChange = (e: string): void => {\n    setQuery(e);\n  };\n\n  // Propagate changes to the query's value when the input is blurred to avoid constantly re-running queries in the\n  // PanelPreview\n  const handleQueryBlur = (): void => {\n    setLastSyncedQuery(query);\n    onChange(\n      produce(value, (draft) => {\n        draft.query = query;\n      })\n    );\n  };\n\n  return { query, handleQueryChange, handleQueryBlur };\n}\n"],"names":["useState","produce","useQueryState","props","onChange","value","query","setQuery","lastSyncedQuery","setLastSyncedQuery","handleQueryChange","e","handleQueryBlur","draft"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,QAAQ,QAAQ,QAAQ;AACjC,SAASC,OAAO,QAAQ,QAAQ;AAUhC;;;;;CAKC,GACD,OAAO,SAASC,cACdC,KAA4B;IAM5B,MAAM,EAAEC,QAAQ,EAAEC,KAAK,EAAE,GAAGF;IAE5B,kCAAkC;IAClC,MAAM,CAACG,OAAOC,SAAS,GAAGP,SAASK,MAAMC,KAAK;IAE9C,gHAAgH;IAChH,kCAAkC;IAClC,MAAM,CAACE,iBAAiBC,mBAAmB,GAAGT,SAASK,MAAMC,KAAK;IAClE,IAAID,MAAMC,KAAK,KAAKE,iBAAiB;QACnCD,SAASF,MAAMC,KAAK;QACpBG,mBAAmBJ,MAAMC,KAAK;IAChC;IAEA,kDAAkD;IAClD,MAAMI,oBAAoB,CAACC;QACzBJ,SAASI;IACX;IAEA,iHAAiH;IACjH,eAAe;IACf,MAAMC,kBAAkB;QACtBH,mBAAmBH;QACnBF,SACEH,QAAQI,OAAO,CAACQ;YACdA,MAAMP,KAAK,GAAGA;QAChB;IAEJ;IAEA,OAAO;QAAEA;QAAOI;QAAmBE;IAAgB;AACrD"}