@perses-dev/explore 0.0.0-snapshot-scatter-chart-embed-8efdfab

package/dist/components/PanelEditor/PanelEditorForm.js

@@ -0,0 +1,125 @@
+// Copyright 2023 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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PanelPreview } from '@perses-dev/dashboards';
+import { usePluginEditor } from '@perses-dev/plugin-system';
+import { FormProvider, useForm } from 'react-hook-form';
+import { Button, Grid, Stack, Typography } from '@mui/material';
+import AddIcon from 'mdi-material-ui/Plus';
+import { ErrorAlert, ErrorBoundary } from '@perses-dev/components';
+import { TimeSeriesQueryEditor } from '../TimeSeriesQueryEditor';
+import { ExploreToolbar } from '../ExploreToolbar';
+import { useTimeSeriesQueryEditorActions } from '../../context/useTimeSeriesQueryEditorActions';
+import { usePanelEditor } from '../../context/usePanelEditor';
+export function PanelEditorForm(props) {
+    const { exploreTitleComponent , initialValues: { panelDefinition: initialPanelDef  }  } = props;
+    const { setQueries , setPlugin , panelDefinition  } = usePanelEditor(initialPanelDef);
+    const { plugin  } = panelDefinition.spec;
+    var _panelDefinition_spec_queries;
+    const queries = (_panelDefinition_spec_queries = panelDefinition.spec.queries) !== null && _panelDefinition_spec_queries !== void 0 ? _panelDefinition_spec_queries : [];
+    // Use common plugin editor logic even though we've split the inputs up in this form
+    const pluginEditor = usePluginEditor({
+        pluginType: 'Panel',
+        value: {
+            kind: plugin.kind,
+            spec: plugin.spec
+        },
+        onChange: (plugin)=>{
+            setPlugin(plugin);
+        },
+        onHideQueryEditorChange: (isHidden)=>{
+            setQueries(undefined, isHidden);
+        }
+    });
+    const onChange = (queries)=>setQueries(queries);
+    const { handleQueryChange , handleQueryAdd , handleQueryCollapseExpand , handleQueryDelete , queriesCollapsed , defaultTimeSeriesQueryKind  } = useTimeSeriesQueryEditorActions({
+        onChange,
+        queries
+    });
+    const form = useForm({
+        mode: 'onBlur',
+        defaultValues: {
+            type: pluginEditor.pendingKind ? pluginEditor.pendingKind : plugin.kind
+        }
+    });
+    return /*#__PURE__*/ _jsxs(Stack, {
+        sx: {
+            width: '100%'
+        },
+        px: 2,
+        pb: 2,
+        pt: 1.5,
+        gap: 2,
+        children: [
+            /*#__PURE__*/ _jsx(ExploreToolbar, {
+                exploreTitleComponent: exploreTitleComponent
+            }),
+            /*#__PURE__*/ _jsx(FormProvider, {
+                ...form,
+                children: /*#__PURE__*/ _jsxs(Grid, {
+                    container: true,
+                    spacing: 2,
+                    children: [
+                        /*#__PURE__*/ _jsx(Grid, {
+                            item: true,
+                            xs: 12,
+                            children: /*#__PURE__*/ _jsxs(Stack, {
+                                gap: 1,
+                                children: [
+                                    /*#__PURE__*/ _jsx(TimeSeriesQueryEditor, {
+                                        handleQueryChange: handleQueryChange,
+                                        handleQueryCollapseExpand: handleQueryCollapseExpand,
+                                        handleQueryDelete: handleQueryDelete,
+                                        queriesCollapsed: queriesCollapsed,
+                                        queries: queries,
+                                        defaultTimeSeriesQueryKind: defaultTimeSeriesQueryKind
+                                    }),
+                                    /*#__PURE__*/ _jsx(Button, {
+                                        variant: "contained",
+                                        startIcon: /*#__PURE__*/ _jsx(AddIcon, {}),
+                                        sx: {
+                                            marginRight: 'auto'
+                                        },
+                                        onClick: handleQueryAdd,
+                                        children: "Add Query"
+                                    })
+                                ]
+                            })
+                        }),
+                        /*#__PURE__*/ _jsx(Grid, {
+                            item: true,
+                            xs: 12,
+                            children: /*#__PURE__*/ _jsxs(Stack, {
+                                gap: 1,
+                                children: [
+                                    /*#__PURE__*/ _jsx(Typography, {
+                                        variant: "h4",
+                                        children: "Preview"
+                                    }),
+                                    /*#__PURE__*/ _jsx(ErrorBoundary, {
+                                        FallbackComponent: ErrorAlert,
+                                        children: /*#__PURE__*/ _jsx(PanelPreview, {
+                                            panelDefinition: panelDefinition
+                                        })
+                                    })
+                                ]
+                            })
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=PanelEditorForm.js.map

package/dist/components/PanelEditor/PanelEditorForm.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/PanelEditor/PanelEditorForm.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 { PanelEditorValues, PanelPreview } from '@perses-dev/dashboards';\nimport { usePluginEditor } from '@perses-dev/plugin-system';\nimport { FormProvider, useForm } from 'react-hook-form';\nimport { Button, Grid, Stack, Typography } from '@mui/material';\nimport AddIcon from 'mdi-material-ui/Plus';\nimport { ErrorAlert, ErrorBoundary } from '@perses-dev/components';\nimport { Action, Definition, PanelDefinition, QueryDefinition, UnknownSpec } from '@perses-dev/core';\nimport { SetStateAction } from 'react';\nimport { TimeSeriesQueryEditor } from '../TimeSeriesQueryEditor';\nimport { ExploreToolbar } from '../ExploreToolbar';\nimport { useTimeSeriesQueryEditorActions } from '../../context/useTimeSeriesQueryEditorActions';\nimport { usePanelEditor } from '../../context/usePanelEditor';\n\nexport interface PanelEditorProps {\n  initialValues: PanelEditorValues;\n  initialAction: Action;\n  exploreTitleComponent?: JSX.Element;\n}\n\nexport interface PanelSpecEditorProps {\n  panelDefinition: PanelDefinition;\n  onQueriesChange: (queries: QueryDefinition[]) => void;\n  onPluginSpecChange: (spec: UnknownSpec) => void;\n}\n\nexport function PanelEditorForm(props: PanelEditorProps) {\n  const {\n    exploreTitleComponent,\n    initialValues: { panelDefinition: initialPanelDef },\n  } = props;\n\n  const { setQueries, setPlugin, panelDefinition } = usePanelEditor(initialPanelDef);\n  const { plugin } = panelDefinition.spec;\n  const queries = panelDefinition.spec.queries ?? [];\n\n  // Use common plugin editor logic even though we've split the inputs up in this form\n  const pluginEditor = usePluginEditor({\n    pluginType: 'Panel',\n    value: { kind: plugin.kind, spec: plugin.spec },\n    onChange: (plugin: SetStateAction<Definition<UnknownSpec>>) => {\n      setPlugin(plugin);\n    },\n    onHideQueryEditorChange: (isHidden: boolean | undefined) => {\n      setQueries(undefined, isHidden);\n    },\n  });\n\n  const onChange = (queries: QueryDefinition[]) => setQueries(queries);\n\n  const {\n    handleQueryChange,\n    handleQueryAdd,\n    handleQueryCollapseExpand,\n    handleQueryDelete,\n    queriesCollapsed,\n    defaultTimeSeriesQueryKind,\n  } = useTimeSeriesQueryEditorActions({ onChange, queries });\n\n  const form = useForm({\n    mode: 'onBlur',\n    defaultValues: {\n      type: pluginEditor.pendingKind ? pluginEditor.pendingKind : plugin.kind,\n    },\n  });\n\n  return (\n    <Stack sx={{ width: '100%' }} px={2} pb={2} pt={1.5} gap={2}>\n      <ExploreToolbar exploreTitleComponent={exploreTitleComponent} />\n      <FormProvider {...form}>\n        <Grid container spacing={2}>\n          <Grid item xs={12}>\n            <Stack gap={1}>\n              {/* Maybe in the future we should have something like PanelSpecEditor as we have on the Dashboard System */}\n              <TimeSeriesQueryEditor\n                handleQueryChange={handleQueryChange}\n                handleQueryCollapseExpand={handleQueryCollapseExpand}\n                handleQueryDelete={handleQueryDelete}\n                queriesCollapsed={queriesCollapsed}\n                queries={queries}\n                defaultTimeSeriesQueryKind={defaultTimeSeriesQueryKind}\n              />\n              <Button variant=\"contained\" startIcon={<AddIcon />} sx={{ marginRight: 'auto' }} onClick={handleQueryAdd}>\n                Add Query\n              </Button>\n            </Stack>\n          </Grid>\n          <Grid item xs={12}>\n            <Stack gap={1}>\n              <Typography variant=\"h4\">Preview</Typography>\n              <ErrorBoundary FallbackComponent={ErrorAlert}>\n                <PanelPreview panelDefinition={panelDefinition} />\n              </ErrorBoundary>\n            </Stack>\n          </Grid>\n        </Grid>\n      </FormProvider>\n    </Stack>\n  );\n}\n"],"names":["PanelPreview","usePluginEditor","FormProvider","useForm","Button","Grid","Stack","Typography","AddIcon","ErrorAlert","ErrorBoundary","TimeSeriesQueryEditor","ExploreToolbar","useTimeSeriesQueryEditorActions","usePanelEditor","PanelEditorForm","props","exploreTitleComponent","initialValues","panelDefinition","initialPanelDef","setQueries","setPlugin","plugin","spec","queries","pluginEditor","pluginType","value","kind","onChange","onHideQueryEditorChange","isHidden","undefined","handleQueryChange","handleQueryAdd","handleQueryCollapseExpand","handleQueryDelete","queriesCollapsed","defaultTimeSeriesQueryKind","form","mode","defaultValues","type","pendingKind","sx","width","px","pb","pt","gap","container","spacing","item","xs","variant","startIcon","marginRight","onClick","FallbackComponent"],"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,SAA4BA,YAAY,QAAQ,yBAAyB;AACzE,SAASC,eAAe,QAAQ,4BAA4B;AAC5D,SAASC,YAAY,EAAEC,OAAO,QAAQ,kBAAkB;AACxD,SAASC,MAAM,EAAEC,IAAI,EAAEC,KAAK,EAAEC,UAAU,QAAQ,gBAAgB;AAChE,OAAOC,aAAa,uBAAuB;AAC3C,SAASC,UAAU,EAAEC,aAAa,QAAQ,yBAAyB;AAGnE,SAASC,qBAAqB,QAAQ,2BAA2B;AACjE,SAASC,cAAc,QAAQ,oBAAoB;AACnD,SAASC,+BAA+B,QAAQ,gDAAgD;AAChG,SAASC,cAAc,QAAQ,+BAA+B;AAc9D,OAAO,SAASC,gBAAgBC,KAAuB;IACrD,MAAM,EACJC,sBAAqB,EACrBC,eAAe,EAAEC,iBAAiBC,gBAAe,EAAE,CAAA,EACpD,GAAGJ;IAEJ,MAAM,EAAEK,WAAU,EAAEC,UAAS,EAAEH,gBAAe,EAAE,GAAGL,eAAeM;IAClE,MAAM,EAAEG,OAAM,EAAE,GAAGJ,gBAAgBK;QACnBL;IAAhB,MAAMM,UAAUN,CAAAA,gCAAAA,gBAAgBK,KAAKC,qBAArBN,2CAAAA,gCAAgC,EAAE;IAElD,oFAAoF;IACpF,MAAMO,eAAezB,gBAAgB;QACnC0B,YAAY;QACZC,OAAO;YAAEC,MAAMN,OAAOM;YAAML,MAAMD,OAAOC;QAAK;QAC9CM,UAAU,CAACP;YACTD,UAAUC;QACZ;QACAQ,yBAAyB,CAACC;YACxBX,WAAWY,WAAWD;QACxB;IACF;IAEA,MAAMF,WAAW,CAACL,UAA+BJ,WAAWI;IAE5D,MAAM,EACJS,kBAAiB,EACjBC,eAAc,EACdC,0BAAyB,EACzBC,kBAAiB,EACjBC,iBAAgB,EAChBC,2BAA0B,EAC3B,GAAG1B,gCAAgC;QAAEiB;QAAUL;IAAQ;IAExD,MAAMe,OAAOrC,QAAQ;QACnBsC,MAAM;QACNC,eAAe;YACbC,MAAMjB,aAAakB,cAAclB,aAAakB,cAAcrB,OAAOM;QACrE;IACF;IAEA,qBACE,MAACvB;QAAMuC,IAAI;YAAEC,OAAO;QAAO;QAAGC,IAAI;QAAGC,IAAI;QAAGC,IAAI;QAAKC,KAAK;;0BACxD,KAACtC;gBAAeK,uBAAuBA;;0BACvC,KAACf;gBAAc,GAAGsC,IAAI;0BACpB,cAAA,MAACnC;oBAAK8C,SAAS;oBAACC,SAAS;;sCACvB,KAAC/C;4BAAKgD,IAAI;4BAACC,IAAI;sCACb,cAAA,MAAChD;gCAAM4C,KAAK;;kDAEV,KAACvC;wCACCuB,mBAAmBA;wCACnBE,2BAA2BA;wCAC3BC,mBAAmBA;wCACnBC,kBAAkBA;wCAClBb,SAASA;wCACTc,4BAA4BA;;kDAE9B,KAACnC;wCAAOmD,SAAQ;wCAAYC,yBAAW,KAAChD;wCAAYqC,IAAI;4CAAEY,aAAa;wCAAO;wCAAGC,SAASvB;kDAAgB;;;;;sCAK9G,KAAC9B;4BAAKgD,IAAI;4BAACC,IAAI;sCACb,cAAA,MAAChD;gCAAM4C,KAAK;;kDACV,KAAC3C;wCAAWgD,SAAQ;kDAAK;;kDACzB,KAAC7C;wCAAciD,mBAAmBlD;kDAChC,cAAA,KAACT;4CAAamB,iBAAiBA;;;;;;;;;;;AAQ/C"}

package/dist/components/TimeSeriesQueryEditor/TimeSeriesQueryEditor.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { QueryDefinition, TimeSeriesQueryDefinition } from '@perses-dev/core';
+export interface TimeSeriesQueryEditorProps {
+    queries: QueryDefinition[];
+    handleQueryChange: (index: number, queryDef: TimeSeriesQueryDefinition) => void;
+    queriesCollapsed: boolean[];
+    handleQueryDelete: (index: number) => void;
+    handleQueryCollapseExpand: (index: number) => void;
+    defaultTimeSeriesQueryKind: string;
+}
+export declare function TimeSeriesQueryEditor(props: TimeSeriesQueryEditorProps): JSX.Element;
+//# sourceMappingURL=TimeSeriesQueryEditor.d.ts.map

package/dist/components/TimeSeriesQueryEditor/TimeSeriesQueryEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimeSeriesQueryEditor.d.ts","sourceRoot":"","sources":["../../../src/components/TimeSeriesQueryEditor/TimeSeriesQueryEditor.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAE,eAAe,EAAE,yBAAyB,EAAE,MAAM,kBAAkB,CAAC;AAG9E,MAAM,WAAW,0BAA0B;IACzC,OAAO,EAAE,eAAe,EAAE,CAAC;IAC3B,iBAAiB,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,yBAAyB,KAAK,IAAI,CAAC;IAChF,gBAAgB,EAAE,OAAO,EAAE,CAAC;IAC5B,iBAAiB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,yBAAyB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnD,0BAA0B,EAAE,MAAM,CAAC;CACpC;AAED,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,0BAA0B,eA0CtE"}

package/dist/components/TimeSeriesQueryEditor/TimeSeriesQueryEditor.js

@@ -0,0 +1,43 @@
+// Copyright 2023 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 { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { TimeSeriesQueryInput } from './TimeSeriesQueryInput';
+export function TimeSeriesQueryEditor(props) {
+    const { queries , handleQueryChange , handleQueryCollapseExpand , handleQueryDelete , queriesCollapsed , defaultTimeSeriesQueryKind  } = props;
+    const hasMoreThanOneQuery = queries.length > 1;
+    const queryDefinitions = queries.length ? queries : [
+        {
+            kind: 'TimeSeriesQuery',
+            spec: {
+                plugin: {
+                    kind: defaultTimeSeriesQueryKind,
+                    spec: {
+                        query: ''
+                    }
+                }
+            }
+        }
+    ];
+    return /*#__PURE__*/ _jsx(_Fragment, {
+        children: queryDefinitions.map((query, i)=>/*#__PURE__*/ _jsx(TimeSeriesQueryInput, {
+                index: i,
+                query: query,
+                onChange: handleQueryChange,
+                isCollapsed: !!queriesCollapsed[i],
+                onDelete: hasMoreThanOneQuery ? handleQueryDelete : undefined,
+                onCollapseExpand: handleQueryCollapseExpand
+            }, i))
+    });
+}
+
+//# sourceMappingURL=TimeSeriesQueryEditor.js.map

package/dist/components/TimeSeriesQueryEditor/TimeSeriesQueryEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/TimeSeriesQueryEditor/TimeSeriesQueryEditor.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 { QueryDefinition, TimeSeriesQueryDefinition } from '@perses-dev/core';\nimport { TimeSeriesQueryInput } from './TimeSeriesQueryInput';\n\nexport interface TimeSeriesQueryEditorProps {\n  queries: QueryDefinition[];\n  handleQueryChange: (index: number, queryDef: TimeSeriesQueryDefinition) => void;\n  queriesCollapsed: boolean[];\n  handleQueryDelete: (index: number) => void;\n  handleQueryCollapseExpand: (index: number) => void;\n  defaultTimeSeriesQueryKind: string;\n}\n\nexport function TimeSeriesQueryEditor(props: TimeSeriesQueryEditorProps) {\n  const {\n    queries,\n    handleQueryChange,\n    handleQueryCollapseExpand,\n    handleQueryDelete,\n    queriesCollapsed,\n    defaultTimeSeriesQueryKind,\n  } = props;\n\n  const hasMoreThanOneQuery = queries.length > 1;\n  const queryDefinitions: TimeSeriesQueryDefinition[] = queries.length\n    ? queries\n    : [\n        {\n          kind: 'TimeSeriesQuery',\n          spec: {\n            plugin: {\n              kind: defaultTimeSeriesQueryKind,\n              spec: {\n                query: '',\n              },\n            },\n          },\n        },\n      ];\n\n  return (\n    <>\n      {queryDefinitions.map((query: TimeSeriesQueryDefinition, i: number) => (\n        <TimeSeriesQueryInput\n          key={i}\n          index={i}\n          query={query}\n          onChange={handleQueryChange}\n          isCollapsed={!!queriesCollapsed[i]}\n          onDelete={hasMoreThanOneQuery ? handleQueryDelete : undefined}\n          onCollapseExpand={handleQueryCollapseExpand}\n        />\n      ))}\n    </>\n  );\n}\n"],"names":["TimeSeriesQueryInput","TimeSeriesQueryEditor","props","queries","handleQueryChange","handleQueryCollapseExpand","handleQueryDelete","queriesCollapsed","defaultTimeSeriesQueryKind","hasMoreThanOneQuery","length","queryDefinitions","kind","spec","plugin","query","map","i","index","onChange","isCollapsed","onDelete","undefined","onCollapseExpand"],"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;;AAGjC,SAASA,oBAAoB,QAAQ,yBAAyB;AAW9D,OAAO,SAASC,sBAAsBC,KAAiC;IACrE,MAAM,EACJC,QAAO,EACPC,kBAAiB,EACjBC,0BAAyB,EACzBC,kBAAiB,EACjBC,iBAAgB,EAChBC,2BAA0B,EAC3B,GAAGN;IAEJ,MAAMO,sBAAsBN,QAAQO,SAAS;IAC7C,MAAMC,mBAAgDR,QAAQO,SAC1DP,UACA;QACE;YACES,MAAM;YACNC,MAAM;gBACJC,QAAQ;oBACNF,MAAMJ;oBACNK,MAAM;wBACJE,OAAO;oBACT;gBACF;YACF;QACF;KACD;IAEL,qBACE;kBACGJ,iBAAiBK,IAAI,CAACD,OAAkCE,kBACvD,KAACjB;gBAECkB,OAAOD;gBACPF,OAAOA;gBACPI,UAAUf;gBACVgB,aAAa,CAAC,CAACb,gBAAgB,CAACU,EAAE;gBAClCI,UAAUZ,sBAAsBH,oBAAoBgB;gBACpDC,kBAAkBlB;eANbY;;AAWf"}

package/dist/components/TimeSeriesQueryEditor/TimeSeriesQueryInput.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { TimeSeriesQueryDefinition } from '@perses-dev/core';
+export interface TimeSeriesQueryInputProps {
+    query: TimeSeriesQueryDefinition;
+    index: number;
+    onChange: (index: number, query: TimeSeriesQueryDefinition) => void;
+    onCollapseExpand: (index: number) => void;
+    onDelete?: (index: number) => void;
+    isCollapsed?: boolean;
+}
+export declare function TimeSeriesQueryInput(props: TimeSeriesQueryInputProps): JSX.Element;
+//# sourceMappingURL=TimeSeriesQueryInput.d.ts.map

package/dist/components/TimeSeriesQueryEditor/TimeSeriesQueryInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimeSeriesQueryInput.d.ts","sourceRoot":"","sources":["../../../src/components/TimeSeriesQueryEditor/TimeSeriesQueryInput.tsx"],"names":[],"mappings":";AAiBA,OAAO,EAAc,yBAAyB,EAAe,MAAM,kBAAkB,CAAC;AAKtF,MAAM,WAAW,yBAAyB;IACxC,KAAK,EAAE,yBAAyB,CAAC;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,yBAAyB,KAAK,IAAI,CAAC;IACpE,gBAAgB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,yBAAyB,eAuBpE"}

package/dist/components/TimeSeriesQueryEditor/TimeSeriesQueryInput.js

@@ -0,0 +1,83 @@
+// Copyright 2023 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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, IconButton, Stack, Typography } from '@mui/material';
+import ChevronDown from 'mdi-material-ui/ChevronDown';
+import ChevronRight from 'mdi-material-ui/ChevronRight';
+import DeleteIcon from 'mdi-material-ui/DeleteOutline';
+import { PluginEditor } from '@perses-dev/plugin-system';
+import produce from 'immer';
+export function TimeSeriesQueryInput(props) {
+    const { index , query , isCollapsed , onDelete , onChange , onCollapseExpand  } = props;
+    return /*#__PURE__*/ _jsxs(Stack, {
+        spacing: 1,
+        children: [
+            /*#__PURE__*/ _jsxs(Stack, {
+                direction: "row",
+                alignItems: "center",
+                borderBottom: 1,
+                borderColor: (theme)=>theme.palette.divider,
+                children: [
+                    /*#__PURE__*/ _jsx(IconButton, {
+                        size: "small",
+                        onClick: ()=>onCollapseExpand(index),
+                        children: isCollapsed ? /*#__PURE__*/ _jsx(ChevronRight, {}) : /*#__PURE__*/ _jsx(ChevronDown, {})
+                    }),
+                    /*#__PURE__*/ _jsxs(Typography, {
+                        variant: "overline",
+                        component: "h4",
+                        children: [
+                            "Query ",
+                            index + 1
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx(IconButton, {
+                        size: "small",
+                        // Use `visibility` to ensure that the row has the same height when delete button is visible or not visible
+                        sx: {
+                            marginLeft: 'auto',
+                            visibility: `${onDelete ? 'visible' : 'hidden'}`
+                        },
+                        onClick: ()=>onDelete && onDelete(index),
+                        children: /*#__PURE__*/ _jsx(DeleteIcon, {})
+                    })
+                ]
+            }),
+            !isCollapsed && /*#__PURE__*/ _jsx(QueryEditor, {
+                value: query,
+                onChange: (next)=>onChange(index, next)
+            })
+        ]
+    }, index);
+}
+function QueryEditor(props) {
+    const { value , onChange , ...others } = props;
+    const { spec: { plugin  }  } = value;
+    const handlePluginChange = (next)=>{
+        onChange(produce(value, (draft)=>{
+            draft.spec.plugin = next;
+        }));
+    };
+    return /*#__PURE__*/ _jsx(Box, {
+        ...others,
+        children: /*#__PURE__*/ _jsx(PluginEditor, {
+            isExplore: true,
+            pluginType: "TimeSeriesQuery",
+            pluginKindLabel: "Query Type",
+            value: plugin,
+            onChange: handlePluginChange
+        })
+    });
+}
+
+//# sourceMappingURL=TimeSeriesQueryInput.js.map

package/dist/components/TimeSeriesQueryEditor/TimeSeriesQueryInput.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/TimeSeriesQueryEditor/TimeSeriesQueryInput.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 { Box, BoxProps, IconButton, Stack, Typography } from '@mui/material';\nimport ChevronDown from 'mdi-material-ui/ChevronDown';\nimport ChevronRight from 'mdi-material-ui/ChevronRight';\nimport DeleteIcon from 'mdi-material-ui/DeleteOutline';\nimport { Definition, TimeSeriesQueryDefinition, UnknownSpec } from '@perses-dev/core';\nimport { PluginEditor, PluginEditorProps } from '@perses-dev/plugin-system';\nimport produce from 'immer';\nimport { WritableDraft } from 'immer/dist/internal';\n\nexport interface TimeSeriesQueryInputProps {\n  query: TimeSeriesQueryDefinition;\n  index: number;\n  onChange: (index: number, query: TimeSeriesQueryDefinition) => void;\n  onCollapseExpand: (index: number) => void;\n  onDelete?: (index: number) => void;\n  isCollapsed?: boolean;\n}\n\nexport function TimeSeriesQueryInput(props: TimeSeriesQueryInputProps) {\n  const { index, query, isCollapsed, onDelete, onChange, onCollapseExpand } = props;\n  return (\n    <Stack key={index} spacing={1}>\n      <Stack direction=\"row\" alignItems=\"center\" borderBottom={1} borderColor={(theme) => theme.palette.divider}>\n        <IconButton size=\"small\" onClick={() => onCollapseExpand(index)}>\n          {isCollapsed ? <ChevronRight /> : <ChevronDown />}\n        </IconButton>\n        <Typography variant=\"overline\" component=\"h4\">\n          Query {index + 1}\n        </Typography>\n        <IconButton\n          size=\"small\"\n          // Use `visibility` to ensure that the row has the same height when delete button is visible or not visible\n          sx={{ marginLeft: 'auto', visibility: `${onDelete ? 'visible' : 'hidden'}` }}\n          onClick={() => onDelete && onDelete(index)}\n        >\n          <DeleteIcon />\n        </IconButton>\n      </Stack>\n      {!isCollapsed && <QueryEditor value={query} onChange={(next) => onChange(index, next)} />}\n    </Stack>\n  );\n}\n\n// Props on MUI Box that we don't want people to pass because we're either redefining them or providing them in\n// this component\ntype OmittedMuiProps = 'children' | 'value' | 'onChange';\n\ninterface QueryEditorProps extends Omit<BoxProps, OmittedMuiProps> {\n  value: TimeSeriesQueryDefinition;\n  onChange: (next: TimeSeriesQueryDefinition) => void;\n}\n\nfunction QueryEditor(props: QueryEditorProps) {\n  const { value, onChange, ...others } = props;\n  const {\n    spec: { plugin },\n  } = value;\n\n  const handlePluginChange: PluginEditorProps['onChange'] = (next: WritableDraft<Definition<UnknownSpec>>) => {\n    onChange(\n      produce(value, (draft) => {\n        draft.spec.plugin = next;\n      })\n    );\n  };\n\n  return (\n    <Box {...others}>\n      {/* If TimeSeriesQuery plugins ever have common props on the definition, the inputs could go here */}\n      <PluginEditor\n        isExplore={true}\n        pluginType=\"TimeSeriesQuery\"\n        pluginKindLabel=\"Query Type\"\n        value={plugin}\n        onChange={handlePluginChange}\n      />\n    </Box>\n  );\n}\n"],"names":["Box","IconButton","Stack","Typography","ChevronDown","ChevronRight","DeleteIcon","PluginEditor","produce","TimeSeriesQueryInput","props","index","query","isCollapsed","onDelete","onChange","onCollapseExpand","spacing","direction","alignItems","borderBottom","borderColor","theme","palette","divider","size","onClick","variant","component","sx","marginLeft","visibility","QueryEditor","value","next","others","spec","plugin","handlePluginChange","draft","isExplore","pluginType","pluginKindLabel"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,GAAG,EAAYC,UAAU,EAAEC,KAAK,EAAEC,UAAU,QAAQ,gBAAgB;AAC7E,OAAOC,iBAAiB,8BAA8B;AACtD,OAAOC,kBAAkB,+BAA+B;AACxD,OAAOC,gBAAgB,gCAAgC;AAEvD,SAASC,YAAY,QAA2B,4BAA4B;AAC5E,OAAOC,aAAa,QAAQ;AAY5B,OAAO,SAASC,qBAAqBC,KAAgC;IACnE,MAAM,EAAEC,MAAK,EAAEC,MAAK,EAAEC,YAAW,EAAEC,SAAQ,EAAEC,SAAQ,EAAEC,iBAAgB,EAAE,GAAGN;IAC5E,qBACE,MAACR;QAAkBe,SAAS;;0BAC1B,MAACf;gBAAMgB,WAAU;gBAAMC,YAAW;gBAASC,cAAc;gBAAGC,aAAa,CAACC,QAAUA,MAAMC,QAAQC;;kCAChG,KAACvB;wBAAWwB,MAAK;wBAAQC,SAAS,IAAMV,iBAAiBL;kCACtDE,4BAAc,KAACR,kCAAkB,KAACD;;kCAErC,MAACD;wBAAWwB,SAAQ;wBAAWC,WAAU;;4BAAK;4BACrCjB,QAAQ;;;kCAEjB,KAACV;wBACCwB,MAAK;wBACL,2GAA2G;wBAC3GI,IAAI;4BAAEC,YAAY;4BAAQC,YAAY,CAAC,EAAEjB,WAAW,YAAY,SAAS,CAAC;wBAAC;wBAC3EY,SAAS,IAAMZ,YAAYA,SAASH;kCAEpC,cAAA,KAACL;;;;YAGJ,CAACO,6BAAe,KAACmB;gBAAYC,OAAOrB;gBAAOG,UAAU,CAACmB,OAASnB,SAASJ,OAAOuB;;;OAjBtEvB;AAoBhB;AAWA,SAASqB,YAAYtB,KAAuB;IAC1C,MAAM,EAAEuB,MAAK,EAAElB,SAAQ,EAAE,GAAGoB,QAAQ,GAAGzB;IACvC,MAAM,EACJ0B,MAAM,EAAEC,OAAM,EAAE,CAAA,EACjB,GAAGJ;IAEJ,MAAMK,qBAAoD,CAACJ;QACzDnB,SACEP,QAAQyB,OAAO,CAACM;YACdA,MAAMH,KAAKC,SAASH;QACtB;IAEJ;IAEA,qBACE,KAAClC;QAAK,GAAGmC,MAAM;kBAEb,cAAA,KAAC5B;YACCiC,WAAW;YACXC,YAAW;YACXC,iBAAgB;YAChBT,OAAOI;YACPtB,UAAUuB;;;AAIlB"}

package/dist/components/TimeSeriesQueryEditor/index.d.ts

@@ -0,0 +1,2 @@
+export * from './TimeSeriesQueryEditor';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/TimeSeriesQueryEditor/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/TimeSeriesQueryEditor/index.ts"],"names":[],"mappings":"AAaA,cAAc,yBAAyB,CAAC"}

package/dist/components/TimeSeriesQueryEditor/index.js

@@ -0,0 +1,15 @@
+// Copyright 2023 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.
+export * from './TimeSeriesQueryEditor';
+
+//# sourceMappingURL=index.js.map

package/dist/components/TimeSeriesQueryEditor/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/TimeSeriesQueryEditor/index.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nexport * from './TimeSeriesQueryEditor';\n"],"names":[],"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,cAAc,0BAA0B"}

package/dist/context/usePanelEditor.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { PanelDefinition, QueryDefinition } from '@perses-dev/core';
+/**
+ * UsePanelEditor is used in PanelEditorForm
+ * This hook stores the states of panel definition and returns the onChange handlers for each state
+ */
+export declare const usePanelEditor: (panelDefinition: PanelDefinition) => {
+    panelDefinition: PanelDefinition<import("@perses-dev/core").UnknownSpec>;
+    setName: import("react").Dispatch<import("react").SetStateAction<string>>;
+    setDescription: import("react").Dispatch<import("react").SetStateAction<string | undefined>>;
+    setQueries: (queries?: QueryDefinition[], hideQueryEditor?: boolean) => void;
+    setPlugin: import("react").Dispatch<import("react").SetStateAction<import("@perses-dev/core").Definition<import("@perses-dev/core").UnknownSpec>>>;
+    setPanelDefinition: (panelDefinition: PanelDefinition) => void;
+};
+//# sourceMappingURL=usePanelEditor.d.ts.map

package/dist/context/usePanelEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePanelEditor.d.ts","sourceRoot":"","sources":["../../src/context/usePanelEditor.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAEpE;;;GAGG;AACH,eAAO,MAAM,cAAc,oBAAqB,eAAe;;;;2BAehD,eAAe,EAAE,oBAAoB,OAAO;;0CAarC,eAAe;CA4BpC,CAAC"}

package/dist/context/usePanelEditor.js

@@ -0,0 +1,84 @@
+// Copyright 2023 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 { useCallback, useMemo, useState } from 'react';
+/**
+ * UsePanelEditor is used in PanelEditorForm
+ * This hook stores the states of panel definition and returns the onChange handlers for each state
+ */ export const usePanelEditor = (panelDefinition)=>{
+    const { display , plugin: pluginDefinition , queries: initialQueries  } = panelDefinition.spec;
+    const [name, setName] = useState(display.name);
+    const [description, setDescription] = useState(display.description);
+    const [plugin, setPlugin] = useState(pluginDefinition);
+    // need to keep track of prevQueries if switching from a panel with no queries (ex: markdown) to one with queries
+    const [prevQueries, setPrevQueries] = useState(initialQueries);
+    const [currentQueries, setCurrentQueries] = useState(initialQueries);
+    /**
+   * If hideQueryEditor is true, set panelDefinition.spec.queries to undefined.
+   * If hideQueryEditor is false and query is undefined, set panelDefinition.spec.queries to previous queries.
+   */ const setQueries = useCallback((queries, hideQueryEditor)=>{
+        if (hideQueryEditor) {
+            setPrevQueries(currentQueries);
+            setCurrentQueries(undefined);
+        } else {
+            setCurrentQueries(queries === undefined ? prevQueries : queries);
+        }
+    }, [
+        setCurrentQueries,
+        currentQueries,
+        setPrevQueries,
+        prevQueries
+    ]);
+    // reset panel definition
+    const setPanelDefinition = useCallback((panelDefinition)=>{
+        const { display , plugin , queries  } = panelDefinition.spec;
+        setName(display.name);
+        setDescription(display.description);
+        setPlugin(plugin);
+        setQueries(queries);
+    }, [
+        setName,
+        setDescription,
+        setPlugin,
+        setQueries
+    ]);
+    return useMemo(()=>({
+            panelDefinition: {
+                kind: 'Panel',
+                spec: {
+                    display: {
+                        name,
+                        description
+                    },
+                    plugin,
+                    queries: currentQueries
+                }
+            },
+            setName,
+            setDescription,
+            setQueries,
+            setPlugin,
+            setPanelDefinition
+        }), [
+        name,
+        description,
+        plugin,
+        currentQueries,
+        setName,
+        setDescription,
+        setQueries,
+        setPlugin,
+        setPanelDefinition
+    ]);
+};
+
+//# sourceMappingURL=usePanelEditor.js.map

package/dist/context/usePanelEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/context/usePanelEditor.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 { useCallback, useMemo, useState } from 'react';\nimport { PanelDefinition, QueryDefinition } from '@perses-dev/core';\n\n/**\n * UsePanelEditor is used in PanelEditorForm\n * This hook stores the states of panel definition and returns the onChange handlers for each state\n */\nexport const usePanelEditor = (panelDefinition: PanelDefinition) => {\n  const { display, plugin: pluginDefinition, queries: initialQueries } = panelDefinition.spec;\n  const [name, setName] = useState(display.name);\n  const [description, setDescription] = useState(display.description);\n  const [plugin, setPlugin] = useState(pluginDefinition);\n\n  // need to keep track of prevQueries if switching from a panel with no queries (ex: markdown) to one with queries\n  const [prevQueries, setPrevQueries] = useState(initialQueries);\n  const [currentQueries, setCurrentQueries] = useState(initialQueries);\n\n  /**\n   * If hideQueryEditor is true, set panelDefinition.spec.queries to undefined.\n   * If hideQueryEditor is false and query is undefined, set panelDefinition.spec.queries to previous queries.\n   */\n  const setQueries = useCallback(\n    (queries?: QueryDefinition[], hideQueryEditor?: boolean) => {\n      if (hideQueryEditor) {\n        setPrevQueries(currentQueries);\n        setCurrentQueries(undefined);\n      } else {\n        setCurrentQueries(queries === undefined ? prevQueries : queries);\n      }\n    },\n    [setCurrentQueries, currentQueries, setPrevQueries, prevQueries]\n  );\n\n  // reset panel definition\n  const setPanelDefinition = useCallback(\n    (panelDefinition: PanelDefinition) => {\n      const { display, plugin, queries } = panelDefinition.spec;\n      setName(display.name);\n      setDescription(display.description);\n      setPlugin(plugin);\n      setQueries(queries);\n    },\n    [setName, setDescription, setPlugin, setQueries]\n  );\n\n  return useMemo(\n    () => ({\n      panelDefinition: {\n        kind: 'Panel',\n        spec: {\n          display: { name, description },\n          plugin,\n          queries: currentQueries,\n        },\n      } as PanelDefinition,\n      setName,\n      setDescription,\n      setQueries,\n      setPlugin,\n      setPanelDefinition,\n    }),\n    [name, description, plugin, currentQueries, setName, setDescription, setQueries, setPlugin, setPanelDefinition]\n  );\n};\n"],"names":["useCallback","useMemo","useState","usePanelEditor","panelDefinition","display","plugin","pluginDefinition","queries","initialQueries","spec","name","setName","description","setDescription","setPlugin","prevQueries","setPrevQueries","currentQueries","setCurrentQueries","setQueries","hideQueryEditor","undefined","setPanelDefinition","kind"],"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,WAAW,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,QAAQ;AAGvD;;;CAGC,GACD,OAAO,MAAMC,iBAAiB,CAACC;IAC7B,MAAM,EAAEC,QAAO,EAAEC,QAAQC,iBAAgB,EAAEC,SAASC,eAAc,EAAE,GAAGL,gBAAgBM;IACvF,MAAM,CAACC,MAAMC,QAAQ,GAAGV,SAASG,QAAQM;IACzC,MAAM,CAACE,aAAaC,eAAe,GAAGZ,SAASG,QAAQQ;IACvD,MAAM,CAACP,QAAQS,UAAU,GAAGb,SAASK;IAErC,iHAAiH;IACjH,MAAM,CAACS,aAAaC,eAAe,GAAGf,SAASO;IAC/C,MAAM,CAACS,gBAAgBC,kBAAkB,GAAGjB,SAASO;IAErD;;;GAGC,GACD,MAAMW,aAAapB,YACjB,CAACQ,SAA6Ba;QAC5B,IAAIA,iBAAiB;YACnBJ,eAAeC;YACfC,kBAAkBG;QACpB,OAAO;YACLH,kBAAkBX,YAAYc,YAAYN,cAAcR;QAC1D;IACF,GACA;QAACW;QAAmBD;QAAgBD;QAAgBD;KAAY;IAGlE,yBAAyB;IACzB,MAAMO,qBAAqBvB,YACzB,CAACI;QACC,MAAM,EAAEC,QAAO,EAAEC,OAAM,EAAEE,QAAO,EAAE,GAAGJ,gBAAgBM;QACrDE,QAAQP,QAAQM;QAChBG,eAAeT,QAAQQ;QACvBE,UAAUT;QACVc,WAAWZ;IACb,GACA;QAACI;QAASE;QAAgBC;QAAWK;KAAW;IAGlD,OAAOnB,QACL,IAAO,CAAA;YACLG,iBAAiB;gBACfoB,MAAM;gBACNd,MAAM;oBACJL,SAAS;wBAAEM;wBAAME;oBAAY;oBAC7BP;oBACAE,SAASU;gBACX;YACF;YACAN;YACAE;YACAM;YACAL;YACAQ;QACF,CAAA,GACA;QAACZ;QAAME;QAAaP;QAAQY;QAAgBN;QAASE;QAAgBM;QAAYL;QAAWQ;KAAmB;AAEnH,EAAE"}

package/dist/context/useTimeSeriesQueryEditorActions.d.ts

@@ -0,0 +1,14 @@
+import { QueryDefinition } from '@perses-dev/core';
+export interface TimeSeriesQueryEditorActionsProps {
+    queries: QueryDefinition[];
+    onChange: (queries: QueryDefinition[]) => void;
+}
+export declare const useTimeSeriesQueryEditorActions: (props: TimeSeriesQueryEditorActionsProps) => {
+    handleQueryChange: (index: number, queryDef: QueryDefinition) => void;
+    handleQueryAdd: () => void;
+    handleQueryDelete: (index: number) => void;
+    handleQueryCollapseExpand: (index: number) => void;
+    queriesCollapsed: boolean[];
+    defaultTimeSeriesQueryKind: string;
+};
+//# sourceMappingURL=useTimeSeriesQueryEditorActions.d.ts.map

package/dist/context/useTimeSeriesQueryEditorActions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTimeSeriesQueryEditorActions.d.ts","sourceRoot":"","sources":["../../src/context/useTimeSeriesQueryEditorActions.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,eAAe,EAA6B,MAAM,kBAAkB,CAAC;AAO9E,MAAM,WAAW,iCAAiC;IAChD,OAAO,EAAE,eAAe,EAAE,CAAC;IAC3B,QAAQ,EAAE,CAAC,OAAO,EAAE,eAAe,EAAE,KAAK,IAAI,CAAC;CAChD;AAED,eAAO,MAAM,+BAA+B,UAAW,iCAAiC;+BAY5E,MAAM,YAAY,eAAe;;+BAuCjC,MAAM;uCAeN,MAAM;;;CA0BjB,CAAC"}

package/dist/context/useTimeSeriesQueryEditorActions.js

@@ -0,0 +1,119 @@
+// Copyright 2023 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 { usePlugin, usePluginRegistry } from '@perses-dev/plugin-system';
+import produce from 'immer';
+import { useCallback, useMemo, useState } from 'react';
+const DEFAULT_QUERY_PLUGIN_TYPE = 'TimeSeriesQuery';
+export const useTimeSeriesQueryEditorActions = (props)=>{
+    const { queries , onChange  } = props;
+    const { defaultPluginKinds  } = usePluginRegistry();
+    var _defaultPluginKinds_DEFAULT_QUERY_PLUGIN_TYPE;
+    const defaultTimeSeriesQueryKind = (_defaultPluginKinds_DEFAULT_QUERY_PLUGIN_TYPE = defaultPluginKinds === null || defaultPluginKinds === void 0 ? void 0 : defaultPluginKinds[DEFAULT_QUERY_PLUGIN_TYPE]) !== null && _defaultPluginKinds_DEFAULT_QUERY_PLUGIN_TYPE !== void 0 ? _defaultPluginKinds_DEFAULT_QUERY_PLUGIN_TYPE : '';
+    const { data: defaultQueryPlugin  } = usePlugin(DEFAULT_QUERY_PLUGIN_TYPE, defaultTimeSeriesQueryKind, {
+        useErrorBoundary: true,
+        enabled: true
+    });
+    const [queriesCollapsed, setQueriesCollapsed] = useState(queries.map(()=>false));
+    const handleQueryChange = useCallback((index, queryDef)=>{
+        onChange(produce(queries, (draft)=>{
+            if (draft) {
+                draft[index] = queryDef;
+                return;
+            }
+            draft = [
+                queryDef
+            ];
+        }));
+    }, [
+        onChange,
+        queries
+    ]);
+    const handleQueryAdd = useCallback(()=>{
+        if (!defaultQueryPlugin) return;
+        onChange(produce(queries, (draft)=>{
+            const queryDef = {
+                kind: DEFAULT_QUERY_PLUGIN_TYPE,
+                spec: {
+                    plugin: {
+                        kind: defaultTimeSeriesQueryKind,
+                        spec: defaultQueryPlugin.createInitialOptions()
+                    }
+                }
+            };
+            if (draft) {
+                draft.push(queryDef);
+            } else {
+                draft = [
+                    ...queries,
+                    queryDef
+                ];
+            }
+        }));
+        setQueriesCollapsed((queriesCollapsed)=>{
+            queriesCollapsed.push(false);
+            return [
+                ...queriesCollapsed
+            ];
+        });
+    }, [
+        defaultQueryPlugin,
+        defaultTimeSeriesQueryKind,
+        onChange,
+        queries,
+        setQueriesCollapsed
+    ]);
+    const handleQueryDelete = useCallback((index)=>{
+        onChange(produce(queries, (draft)=>{
+            draft.splice(index, 1);
+        }));
+        setQueriesCollapsed((queriesCollapsed)=>{
+            queriesCollapsed.splice(index, 1);
+            return [
+                ...queriesCollapsed
+            ];
+        });
+    }, [
+        onChange,
+        setQueriesCollapsed,
+        queries
+    ]);
+    const handleQueryCollapseExpand = useCallback((index)=>{
+        setQueriesCollapsed((queriesCollapsed)=>{
+            queriesCollapsed[index] = !queriesCollapsed[index];
+            return [
+                ...queriesCollapsed
+            ];
+        });
+    }, [
+        setQueriesCollapsed
+    ]);
+    return useMemo(()=>{
+        return {
+            handleQueryChange,
+            handleQueryAdd,
+            handleQueryDelete,
+            handleQueryCollapseExpand,
+            queriesCollapsed,
+            defaultTimeSeriesQueryKind
+        };
+    }, [
+        handleQueryChange,
+        handleQueryAdd,
+        handleQueryDelete,
+        handleQueryCollapseExpand,
+        queriesCollapsed,
+        defaultTimeSeriesQueryKind
+    ]);
+};
+
+//# sourceMappingURL=useTimeSeriesQueryEditorActions.js.map

package/dist/context/useTimeSeriesQueryEditorActions.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/context/useTimeSeriesQueryEditorActions.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { QueryDefinition, TimeSeriesQueryDefinition } from '@perses-dev/core';\nimport { usePlugin, usePluginRegistry } from '@perses-dev/plugin-system';\nimport produce from 'immer';\nimport { useCallback, useMemo, useState } from 'react';\n\nconst DEFAULT_QUERY_PLUGIN_TYPE = 'TimeSeriesQuery';\n\nexport interface TimeSeriesQueryEditorActionsProps {\n  queries: QueryDefinition[];\n  onChange: (queries: QueryDefinition[]) => void;\n}\n\nexport const useTimeSeriesQueryEditorActions = (props: TimeSeriesQueryEditorActionsProps) => {\n  const { queries, onChange } = props;\n  const { defaultPluginKinds } = usePluginRegistry();\n  const defaultTimeSeriesQueryKind = defaultPluginKinds?.[DEFAULT_QUERY_PLUGIN_TYPE] ?? '';\n  const { data: defaultQueryPlugin } = usePlugin(DEFAULT_QUERY_PLUGIN_TYPE, defaultTimeSeriesQueryKind, {\n    useErrorBoundary: true,\n    enabled: true,\n  });\n\n  const [queriesCollapsed, setQueriesCollapsed] = useState(queries.map(() => false));\n\n  const handleQueryChange = useCallback(\n    (index: number, queryDef: QueryDefinition) => {\n      onChange(\n        produce(queries, (draft) => {\n          if (draft) {\n            draft[index] = queryDef;\n            return;\n          }\n          draft = [queryDef];\n        })\n      );\n    },\n    [onChange, queries]\n  );\n\n  const handleQueryAdd = useCallback(() => {\n    if (!defaultQueryPlugin) return;\n    onChange(\n      produce(queries, (draft) => {\n        const queryDef: TimeSeriesQueryDefinition = {\n          kind: DEFAULT_QUERY_PLUGIN_TYPE,\n          spec: {\n            plugin: { kind: defaultTimeSeriesQueryKind, spec: defaultQueryPlugin.createInitialOptions() },\n          },\n        };\n\n        if (draft) {\n          draft.push(queryDef);\n        } else {\n          draft = [...queries, queryDef];\n        }\n      })\n    );\n    setQueriesCollapsed((queriesCollapsed) => {\n      queriesCollapsed.push(false);\n      return [...queriesCollapsed];\n    });\n  }, [defaultQueryPlugin, defaultTimeSeriesQueryKind, onChange, queries, setQueriesCollapsed]);\n\n  const handleQueryDelete = useCallback(\n    (index: number) => {\n      onChange(\n        produce(queries, (draft) => {\n          draft.splice(index, 1);\n        })\n      );\n      setQueriesCollapsed((queriesCollapsed) => {\n        queriesCollapsed.splice(index, 1);\n        return [...queriesCollapsed];\n      });\n    },\n    [onChange, setQueriesCollapsed, queries]\n  );\n\n  const handleQueryCollapseExpand = useCallback(\n    (index: number) => {\n      setQueriesCollapsed((queriesCollapsed) => {\n        queriesCollapsed[index] = !queriesCollapsed[index];\n        return [...queriesCollapsed];\n      });\n    },\n    [setQueriesCollapsed]\n  );\n\n  return useMemo(() => {\n    return {\n      handleQueryChange,\n      handleQueryAdd,\n      handleQueryDelete,\n      handleQueryCollapseExpand,\n      queriesCollapsed,\n      defaultTimeSeriesQueryKind,\n    };\n  }, [\n    handleQueryChange,\n    handleQueryAdd,\n    handleQueryDelete,\n    handleQueryCollapseExpand,\n    queriesCollapsed,\n    defaultTimeSeriesQueryKind,\n  ]);\n};\n"],"names":["usePlugin","usePluginRegistry","produce","useCallback","useMemo","useState","DEFAULT_QUERY_PLUGIN_TYPE","useTimeSeriesQueryEditorActions","props","queries","onChange","defaultPluginKinds","defaultTimeSeriesQueryKind","data","defaultQueryPlugin","useErrorBoundary","enabled","queriesCollapsed","setQueriesCollapsed","map","handleQueryChange","index","queryDef","draft","handleQueryAdd","kind","spec","plugin","createInitialOptions","push","handleQueryDelete","splice","handleQueryCollapseExpand"],"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;AAGjC,SAASA,SAAS,EAAEC,iBAAiB,QAAQ,4BAA4B;AACzE,OAAOC,aAAa,QAAQ;AAC5B,SAASC,WAAW,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,QAAQ;AAEvD,MAAMC,4BAA4B;AAOlC,OAAO,MAAMC,kCAAkC,CAACC;IAC9C,MAAM,EAAEC,QAAO,EAAEC,SAAQ,EAAE,GAAGF;IAC9B,MAAM,EAAEG,mBAAkB,EAAE,GAAGV;QACIU;IAAnC,MAAMC,6BAA6BD,CAAAA,gDAAAA,+BAAAA,gCAAAA,KAAAA,IAAAA,kBAAoB,CAACL,0BAA0B,cAA/CK,2DAAAA,gDAAmD;IACtF,MAAM,EAAEE,MAAMC,mBAAkB,EAAE,GAAGd,UAAUM,2BAA2BM,4BAA4B;QACpGG,kBAAkB;QAClBC,SAAS;IACX;IAEA,MAAM,CAACC,kBAAkBC,oBAAoB,GAAGb,SAASI,QAAQU,IAAI,IAAM;IAE3E,MAAMC,oBAAoBjB,YACxB,CAACkB,OAAeC;QACdZ,SACER,QAAQO,SAAS,CAACc;YAChB,IAAIA,OAAO;gBACTA,KAAK,CAACF,MAAM,GAAGC;gBACf;YACF;YACAC,QAAQ;gBAACD;aAAS;QACpB;IAEJ,GACA;QAACZ;QAAUD;KAAQ;IAGrB,MAAMe,iBAAiBrB,YAAY;QACjC,IAAI,CAACW,oBAAoB;QACzBJ,SACER,QAAQO,SAAS,CAACc;YAChB,MAAMD,WAAsC;gBAC1CG,MAAMnB;gBACNoB,MAAM;oBACJC,QAAQ;wBAAEF,MAAMb;wBAA4Bc,MAAMZ,mBAAmBc;oBAAuB;gBAC9F;YACF;YAEA,IAAIL,OAAO;gBACTA,MAAMM,KAAKP;YACb,OAAO;gBACLC,QAAQ;uBAAId;oBAASa;iBAAS;YAChC;QACF;QAEFJ,oBAAoB,CAACD;YACnBA,iBAAiBY,KAAK;YACtB,OAAO;mBAAIZ;aAAiB;QAC9B;IACF,GAAG;QAACH;QAAoBF;QAA4BF;QAAUD;QAASS;KAAoB;IAE3F,MAAMY,oBAAoB3B,YACxB,CAACkB;QACCX,SACER,QAAQO,SAAS,CAACc;YAChBA,MAAMQ,OAAOV,OAAO;QACtB;QAEFH,oBAAoB,CAACD;YACnBA,iBAAiBc,OAAOV,OAAO;YAC/B,OAAO;mBAAIJ;aAAiB;QAC9B;IACF,GACA;QAACP;QAAUQ;QAAqBT;KAAQ;IAG1C,MAAMuB,4BAA4B7B,YAChC,CAACkB;QACCH,oBAAoB,CAACD;YACnBA,gBAAgB,CAACI,MAAM,GAAG,CAACJ,gBAAgB,CAACI,MAAM;YAClD,OAAO;mBAAIJ;aAAiB;QAC9B;IACF,GACA;QAACC;KAAoB;IAGvB,OAAOd,QAAQ;QACb,OAAO;YACLgB;YACAI;YACAM;YACAE;YACAf;YACAL;QACF;IACF,GAAG;QACDQ;QACAI;QACAM;QACAE;QACAf;QACAL;KACD;AACH,EAAE"}

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from './views';
+//# sourceMappingURL=index.d.ts.map