@perses-dev/plugin-system 0.0.0-snapshot-ts-panel-actions-76080ec → 0.0.0-snapshot-reverse-proxy-75afbd7

package/dist/components/PanelSpecEditor/PanelSpecEditor.js

@@ -13,10 +13,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { ErrorAlert, JSONEditor, LinksEditor } from '@perses-dev/components';
 import { Controller } from 'react-hook-form';
+import { forwardRef } from 'react';
 import { QueryCountProvider, usePlugin } from '../../runtime';
 import { OptionsEditorTabs } from '../OptionsEditorTabs';
 import { MultiQueryEditor } from '../MultiQueryEditor';
-export function PanelSpecEditor(props) {
+export const PanelSpecEditor = /*#__PURE__*/ forwardRef((props, ref)=>{
     const { control, panelDefinition, onJSONChange, onQueriesChange, onPluginSpecChange } = props;
     const { kind } = panelDefinition.spec.plugin;
     const { data: plugin, isLoading, error } = usePlugin('Panel', kind);
@@ -25,11 +26,10 @@ export function PanelSpecEditor(props) {
             error: error
         });
     }
-    // TODO: Proper loading indicator
     if (isLoading) {
         return null;
     }
-    if (plugin === undefined) {
+    if (!plugin) {
         throw new Error(`Missing implementation for panel plugin with kind '${kind}'`);
     }
     const { panelOptionsEditorComponents, hideQueryEditor } = plugin;
@@ -41,6 +41,7 @@ export function PanelSpecEditor(props) {
                 control: control,
                 name: "panelDefinition.spec.queries",
                 render: ({ field })=>/*#__PURE__*/ _jsx(MultiQueryEditor, {
+                        ref: ref,
                         queryTypes: plugin.supportedQueryTypes ?? [],
                         queries: panelDefinition.spec.queries ?? [],
                         onChange: (queries)=>{
@@ -51,7 +52,7 @@ export function PanelSpecEditor(props) {
             })
         });
     }
-    if (panelOptionsEditorComponents !== undefined) {
+    if (panelOptionsEditorComponents) {
         tabs = tabs.concat(panelOptionsEditorComponents.map(({ label, content: OptionsEditorComponent })=>({
                 label,
                 content: /*#__PURE__*/ _jsx(Controller, {
@@ -95,6 +96,7 @@ export function PanelSpecEditor(props) {
             tabs: tabs
         }, tabs.length)
     });
-}
+});
+PanelSpecEditor.displayName = 'PanelSpecEditor';
 
 //# sourceMappingURL=PanelSpecEditor.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PanelSpecEditor/PanelSpecEditor.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 { ErrorAlert, JSONEditor, LinksEditor } from '@perses-dev/components';\nimport { PanelDefinition, PanelEditorValues, QueryDefinition, UnknownSpec } from '@perses-dev/core';\nimport { Control, Controller } from 'react-hook-form';\nimport { ReactElement } from 'react';\nimport { QueryCountProvider, usePlugin } from '../../runtime';\nimport { PanelPlugin } from '../../model';\nimport { OptionsEditorTabsProps, OptionsEditorTabs } from '../OptionsEditorTabs';\nimport { MultiQueryEditor } from '../MultiQueryEditor';\n\nexport interface PanelSpecEditorProps {\n  control: Control<PanelEditorValues>;\n  panelDefinition: PanelDefinition;\n  onQueriesChange: (queries: QueryDefinition[]) => void;\n  onPluginSpecChange: (spec: UnknownSpec) => void;\n  onJSONChange: (panelDefinitionStr: string) => void;\n}\n\nexport function PanelSpecEditor(props: PanelSpecEditorProps): ReactElement | null {\n  const { control, panelDefinition, onJSONChange, onQueriesChange, onPluginSpecChange } = props;\n  const { kind } = panelDefinition.spec.plugin;\n  const { data: plugin, isLoading, error } = usePlugin('Panel', kind);\n\n  if (error) {\n    return <ErrorAlert error={error} />;\n  }\n\n  // TODO: Proper loading indicator\n  if (isLoading) {\n    return null;\n  }\n\n  if (plugin === undefined) {\n    throw new Error(`Missing implementation for panel plugin with kind '${kind}'`);\n  }\n\n  const { panelOptionsEditorComponents, hideQueryEditor } = plugin as PanelPlugin;\n  let tabs: OptionsEditorTabsProps['tabs'] = [];\n\n  if (!hideQueryEditor) {\n    tabs.push({\n      label: 'Query',\n      content: (\n        <Controller\n          control={control}\n          name=\"panelDefinition.spec.queries\"\n          render={({ field }) => (\n            <MultiQueryEditor\n              queryTypes={plugin.supportedQueryTypes ?? []}\n              queries={panelDefinition.spec.queries ?? []}\n              onChange={(queries) => {\n                field.onChange(queries);\n                onQueriesChange(queries);\n              }}\n            />\n          )}\n        />\n      ),\n    });\n  }\n\n  if (panelOptionsEditorComponents !== undefined) {\n    tabs = tabs.concat(\n      panelOptionsEditorComponents.map(({ label, content: OptionsEditorComponent }) => ({\n        label,\n        content: (\n          <Controller\n            control={control}\n            name=\"panelDefinition.spec.plugin.spec\"\n            render={({ field }) => (\n              <OptionsEditorComponent\n                value={panelDefinition.spec.plugin.spec}\n                onChange={(spec) => {\n                  field.onChange(spec);\n                  onPluginSpecChange(spec);\n                }}\n              />\n            )}\n          />\n        ),\n      }))\n    );\n  }\n\n  // always show json editor and links editor by default\n  tabs.push({\n    label: 'Links',\n    content: <LinksEditor control={control} />,\n  });\n  tabs.push({\n    label: 'JSON',\n    content: (\n      <Controller\n        control={control}\n        name=\"panelDefinition\"\n        render={({ field }) => (\n          <JSONEditor\n            maxHeight=\"80vh\"\n            value={panelDefinition}\n            onChange={(json) => {\n              field.onChange(JSON.parse(json));\n              onJSONChange(json);\n            }}\n          />\n        )}\n      />\n    ),\n  });\n\n  return (\n    <QueryCountProvider queryCount={(panelDefinition.spec.queries ?? []).length}>\n      <OptionsEditorTabs key={tabs.length} tabs={tabs} />\n    </QueryCountProvider>\n  );\n}\n"],"names":["ErrorAlert","JSONEditor","LinksEditor","Controller","QueryCountProvider","usePlugin","OptionsEditorTabs","MultiQueryEditor","PanelSpecEditor","props","control","panelDefinition","onJSONChange","onQueriesChange","onPluginSpecChange","kind","spec","plugin","data","isLoading","error","undefined","Error","panelOptionsEditorComponents","hideQueryEditor","tabs","push","label","content","name","render","field","queryTypes","supportedQueryTypes","queries","onChange","concat","map","OptionsEditorComponent","value","maxHeight","json","JSON","parse","queryCount","length"],"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,UAAU,EAAEC,UAAU,EAAEC,WAAW,QAAQ,yBAAyB;AAE7E,SAAkBC,UAAU,QAAQ,kBAAkB;AAEtD,SAASC,kBAAkB,EAAEC,SAAS,QAAQ,gBAAgB;AAE9D,SAAiCC,iBAAiB,QAAQ,uBAAuB;AACjF,SAASC,gBAAgB,QAAQ,sBAAsB;AAUvD,OAAO,SAASC,gBAAgBC,KAA2B;IACzD,MAAM,EAAEC,OAAO,EAAEC,eAAe,EAAEC,YAAY,EAAEC,eAAe,EAAEC,kBAAkB,EAAE,GAAGL;IACxF,MAAM,EAAEM,IAAI,EAAE,GAAGJ,gBAAgBK,IAAI,CAACC,MAAM;IAC5C,MAAM,EAAEC,MAAMD,MAAM,EAAEE,SAAS,EAAEC,KAAK,EAAE,GAAGf,UAAU,SAASU;IAE9D,IAAIK,OAAO;QACT,qBAAO,KAACpB;YAAWoB,OAAOA;;IAC5B;IAEA,iCAAiC;IACjC,IAAID,WAAW;QACb,OAAO;IACT;IAEA,IAAIF,WAAWI,WAAW;QACxB,MAAM,IAAIC,MAAM,CAAC,mDAAmD,EAAEP,KAAK,CAAC,CAAC;IAC/E;IAEA,MAAM,EAAEQ,4BAA4B,EAAEC,eAAe,EAAE,GAAGP;IAC1D,IAAIQ,OAAuC,EAAE;IAE7C,IAAI,CAACD,iBAAiB;QACpBC,KAAKC,IAAI,CAAC;YACRC,OAAO;YACPC,uBACE,KAACzB;gBACCO,SAASA;gBACTmB,MAAK;gBACLC,QAAQ,CAAC,EAAEC,KAAK,EAAE,iBAChB,KAACxB;wBACCyB,YAAYf,OAAOgB,mBAAmB,IAAI,EAAE;wBAC5CC,SAASvB,gBAAgBK,IAAI,CAACkB,OAAO,IAAI,EAAE;wBAC3CC,UAAU,CAACD;4BACTH,MAAMI,QAAQ,CAACD;4BACfrB,gBAAgBqB;wBAClB;;;QAKV;IACF;IAEA,IAAIX,iCAAiCF,WAAW;QAC9CI,OAAOA,KAAKW,MAAM,CAChBb,6BAA6Bc,GAAG,CAAC,CAAC,EAAEV,KAAK,EAAEC,SAASU,sBAAsB,EAAE,GAAM,CAAA;gBAChFX;gBACAC,uBACE,KAACzB;oBACCO,SAASA;oBACTmB,MAAK;oBACLC,QAAQ,CAAC,EAAEC,KAAK,EAAE,iBAChB,KAACO;4BACCC,OAAO5B,gBAAgBK,IAAI,CAACC,MAAM,CAACD,IAAI;4BACvCmB,UAAU,CAACnB;gCACTe,MAAMI,QAAQ,CAACnB;gCACfF,mBAAmBE;4BACrB;;;YAKV,CAAA;IAEJ;IAEA,sDAAsD;IACtDS,KAAKC,IAAI,CAAC;QACRC,OAAO;QACPC,uBAAS,KAAC1B;YAAYQ,SAASA;;IACjC;IACAe,KAAKC,IAAI,CAAC;QACRC,OAAO;QACPC,uBACE,KAACzB;YACCO,SAASA;YACTmB,MAAK;YACLC,QAAQ,CAAC,EAAEC,KAAK,EAAE,iBAChB,KAAC9B;oBACCuC,WAAU;oBACVD,OAAO5B;oBACPwB,UAAU,CAACM;wBACTV,MAAMI,QAAQ,CAACO,KAAKC,KAAK,CAACF;wBAC1B7B,aAAa6B;oBACf;;;IAKV;IAEA,qBACE,KAACrC;QAAmBwC,YAAY,AAACjC,CAAAA,gBAAgBK,IAAI,CAACkB,OAAO,IAAI,EAAE,AAAD,EAAGW,MAAM;kBACzE,cAAA,KAACvC;YAAoCmB,MAAMA;WAAnBA,KAAKoB,MAAM;;AAGzC"}
+{"version":3,"sources":["../../../src/components/PanelSpecEditor/PanelSpecEditor.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 { ErrorAlert, JSONEditor, LinksEditor } from '@perses-dev/components';\nimport { PanelDefinition, PanelEditorValues, QueryDefinition, UnknownSpec } from '@perses-dev/core';\nimport { Control, Controller } from 'react-hook-form';\nimport { forwardRef, ReactElement } from 'react';\nimport { QueryCountProvider, usePlugin } from '../../runtime';\nimport { PanelPlugin } from '../../model';\nimport { OptionsEditorTabsProps, OptionsEditorTabs } from '../OptionsEditorTabs';\nimport { MultiQueryEditor } from '../MultiQueryEditor';\nimport { PluginEditorRef } from '../PluginEditor';\n\nexport interface PanelSpecEditorProps {\n  control: Control<PanelEditorValues>;\n  panelDefinition: PanelDefinition;\n  onQueriesChange: (queries: QueryDefinition[]) => void;\n  onPluginSpecChange: (spec: UnknownSpec) => void;\n  onJSONChange: (panelDefinitionStr: string) => void;\n}\n\nexport const PanelSpecEditor = forwardRef<PluginEditorRef, PanelSpecEditorProps>((props, ref): ReactElement | null => {\n  const { control, panelDefinition, onJSONChange, onQueriesChange, onPluginSpecChange } = props;\n  const { kind } = panelDefinition.spec.plugin;\n  const { data: plugin, isLoading, error } = usePlugin('Panel', kind);\n\n  if (error) {\n    return <ErrorAlert error={error} />;\n  }\n\n  if (isLoading) {\n    return null;\n  }\n\n  if (!plugin) {\n    throw new Error(`Missing implementation for panel plugin with kind '${kind}'`);\n  }\n\n  const { panelOptionsEditorComponents, hideQueryEditor } = plugin as PanelPlugin;\n  let tabs: OptionsEditorTabsProps['tabs'] = [];\n\n  if (!hideQueryEditor) {\n    tabs.push({\n      label: 'Query',\n      content: (\n        <Controller\n          control={control}\n          name=\"panelDefinition.spec.queries\"\n          render={({ field }) => (\n            <MultiQueryEditor\n              ref={ref}\n              queryTypes={plugin.supportedQueryTypes ?? []}\n              queries={panelDefinition.spec.queries ?? []}\n              onChange={(queries) => {\n                field.onChange(queries);\n                onQueriesChange(queries);\n              }}\n            />\n          )}\n        />\n      ),\n    });\n  }\n\n  if (panelOptionsEditorComponents) {\n    tabs = tabs.concat(\n      panelOptionsEditorComponents.map(({ label, content: OptionsEditorComponent }) => ({\n        label,\n        content: (\n          <Controller\n            control={control}\n            name=\"panelDefinition.spec.plugin.spec\"\n            render={({ field }) => (\n              <OptionsEditorComponent\n                value={panelDefinition.spec.plugin.spec}\n                onChange={(spec) => {\n                  field.onChange(spec);\n                  onPluginSpecChange(spec);\n                }}\n              />\n            )}\n          />\n        ),\n      }))\n    );\n  }\n\n  // always show json editor and links editor by default\n  tabs.push({\n    label: 'Links',\n    content: <LinksEditor control={control} />,\n  });\n  tabs.push({\n    label: 'JSON',\n    content: (\n      <Controller\n        control={control}\n        name=\"panelDefinition\"\n        render={({ field }) => (\n          <JSONEditor\n            maxHeight=\"80vh\"\n            value={panelDefinition}\n            onChange={(json) => {\n              field.onChange(JSON.parse(json));\n              onJSONChange(json);\n            }}\n          />\n        )}\n      />\n    ),\n  });\n\n  return (\n    <QueryCountProvider queryCount={(panelDefinition.spec.queries ?? []).length}>\n      <OptionsEditorTabs key={tabs.length} tabs={tabs} />\n    </QueryCountProvider>\n  );\n});\n\nPanelSpecEditor.displayName = 'PanelSpecEditor';\n"],"names":["ErrorAlert","JSONEditor","LinksEditor","Controller","forwardRef","QueryCountProvider","usePlugin","OptionsEditorTabs","MultiQueryEditor","PanelSpecEditor","props","ref","control","panelDefinition","onJSONChange","onQueriesChange","onPluginSpecChange","kind","spec","plugin","data","isLoading","error","Error","panelOptionsEditorComponents","hideQueryEditor","tabs","push","label","content","name","render","field","queryTypes","supportedQueryTypes","queries","onChange","concat","map","OptionsEditorComponent","value","maxHeight","json","JSON","parse","queryCount","length","displayName"],"mappings":"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"}

package/dist/components/PluginEditor/PluginEditor.d.ts

@@ -1,5 +1,5 @@
-import { ReactElement } from 'react';
-import { PluginEditorProps } from './plugin-editor-api';
+/// <reference types="react" />
+import { PluginEditorProps, PluginEditorRef } from './plugin-editor-api';
 /**
  * A combination `PluginKindSelect` and `PluginSpecEditor` component. This is meant for editing the `plugin` property
  * that's common in our JSON specs where a user selects a plugin `kind` and then edits the `spec` via that plugin's
@@ -8,5 +8,5 @@ import { PluginEditorProps } from './plugin-editor-api';
  * previous plugin's spec state. If you just want this behavior, but in a different UI layout from this, try the
  * `usePluginEditor` hook that powers this component.
  */
-export declare function PluginEditor(props: PluginEditorProps): ReactElement;
+export declare const PluginEditor: import("react").ForwardRefExoticComponent<Omit<PluginEditorProps, "ref"> & import("react").RefAttributes<PluginEditorRef>>;
 //# sourceMappingURL=PluginEditor.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"PluginEditor.d.ts","sourceRoot":"","sources":["../../../src/components/PluginEditor/PluginEditor.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAGrC,OAAO,EAAE,iBAAiB,EAAmB,MAAM,qBAAqB,CAAC;AAEzE;;;;;;;GAOG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,GAAG,YAAY,CAyCnE"}
+{"version":3,"file":"PluginEditor.d.ts","sourceRoot":"","sources":["../../../src/components/PluginEditor/PluginEditor.tsx"],"names":[],"mappings":";AAoBA,OAAO,EAAE,iBAAiB,EAAE,eAAe,EAAmB,MAAM,qBAAqB,CAAC;AAE1F;;;;;;;GAOG;AAEH,eAAO,MAAM,YAAY,4HAwFvB,CAAC"}

package/dist/components/PluginEditor/PluginEditor.js

@@ -14,6 +14,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Button } from '@mui/material';
 import Reload from 'mdi-material-ui/Reload';
 import { ErrorAlert, ErrorBoundary } from '@perses-dev/components';
+import { forwardRef, useCallback, useImperativeHandle, useMemo, useState } from 'react';
 import { PluginKindSelect } from '../PluginKindSelect';
 import { PluginSpecEditor } from '../PluginSpecEditor';
 import { usePluginEditor } from './plugin-editor-api';
@@ -24,23 +25,63 @@ import { usePluginEditor } from './plugin-editor-api';
  * plugin's kind changes, the spec is also changed at the same time so those options editor components don't see a
  * previous plugin's spec state. If you just want this behavior, but in a different UI layout from this, try the
  * `usePluginEditor` hook that powers this component.
- */ export function PluginEditor(props) {
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const { value, pluginTypes, pluginKindLabel, onChange: _, isReadonly, ...others } = props;
+ */ export const PluginEditor = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { value, withRunQueryButton = true, pluginTypes, pluginKindLabel, onChange: _, isReadonly, postExecuteRunQuery: refresh, ...others } = props;
     const { pendingSelection, isLoading, error, onSelectionChange, onSpecChange } = usePluginEditor(props);
+    /* 
+     We could technically merge the watchedQuery, watchedOtherSpecs into a single watched-object,
+     because at the end of the day, they are all specs.
+     However, let's have them separated to keep the code simple and readable.
+     Reason: Only Query string field is common between all of them. Other specs may be different
+     Example: Legend, and MinSteps
+    */ const [watchedQuery, setWatchQuery] = useState(value.spec['query']);
+    const [watchedOtherSpecs, setWatchOtherSpecs] = useState(value.spec);
+    const runQueryHandler = useCallback(()=>{
+        onSpecChange({
+            ...value.spec,
+            ...watchedOtherSpecs,
+            query: watchedQuery
+        });
+        refresh?.();
+    }, [
+        value.spec,
+        onSpecChange,
+        watchedQuery,
+        watchedOtherSpecs,
+        refresh
+    ]);
+    const queryHandlerSettings = useMemo(()=>{
+        return withRunQueryButton ? {
+            runWithOnBlur: false,
+            watchQueryChanges: (query)=>{
+                setWatchQuery(query);
+            },
+            setWatchOtherSpecs: (otherSpecs)=>{
+                setWatchOtherSpecs(otherSpecs);
+            }
+        } : undefined;
+    }, [
+        withRunQueryButton
+    ]);
+    useImperativeHandle(ref, ()=>({
+            flushChanges: runQueryHandler
+        }));
     return /*#__PURE__*/ _jsxs(Box, {
         ...others,
         children: [
             /*#__PURE__*/ _jsxs(Box, {
                 sx: {
                     display: 'flex',
-                    flexDirection: 'row'
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    gap: 1,
+                    mb: 1
                 },
                 children: [
                     /*#__PURE__*/ _jsx(PluginKindSelect, {
                         fullWidth: false,
                         sx: {
-                            mb: 2,
                             minWidth: 120
                         },
                         margin: "dense",
@@ -48,23 +89,20 @@ import { usePluginEditor } from './plugin-editor-api';
                         pluginTypes: pluginTypes,
                         disabled: isLoading,
                         value: pendingSelection ? pendingSelection : value.selection,
-                        InputProps: {
-                            readOnly: isReadonly
+                        slotProps: {
+                            input: {
+                                readOnly: isReadonly
+                            }
                         },
                         error: !!error,
                         helperText: error?.message,
                         onChange: onSelectionChange
                     }),
-                    /*#__PURE__*/ _jsx(Button, {
+                    withRunQueryButton && !isLoading && /*#__PURE__*/ _jsx(Button, {
+                        "data-testid": "run_query_button",
                         variant: "contained",
-                        sx: {
-                            marginTop: 1.5,
-                            marginBottom: 1.5,
-                            paddingTop: 0.5,
-                            marginLeft: 'auto'
-                        },
                         startIcon: /*#__PURE__*/ _jsx(Reload, {}),
-                        onClick: ()=>onSpecChange(value.spec),
+                        onClick: runQueryHandler,
                         children: "Run Query"
                     })
                 ]
@@ -75,11 +113,13 @@ import { usePluginEditor } from './plugin-editor-api';
                     pluginSelection: value.selection,
                     value: value.spec,
                     onChange: onSpecChange,
-                    isReadonly: isReadonly
+                    isReadonly: isReadonly,
+                    queryHandlerSettings: queryHandlerSettings
                 })
             })
         ]
     });
-}
+});
+PluginEditor.displayName = 'PluginEditor';
 
 //# sourceMappingURL=PluginEditor.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PluginEditor/PluginEditor.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, Button } from '@mui/material';\nimport Reload from 'mdi-material-ui/Reload';\nimport { ErrorAlert, ErrorBoundary } from '@perses-dev/components';\nimport { ReactElement } from 'react';\nimport { PluginKindSelect } from '../PluginKindSelect';\nimport { PluginSpecEditor } from '../PluginSpecEditor';\nimport { PluginEditorProps, usePluginEditor } from './plugin-editor-api';\n\n/**\n * A combination `PluginKindSelect` and `PluginSpecEditor` component. This is meant for editing the `plugin` property\n * that's common in our JSON specs where a user selects a plugin `kind` and then edits the `spec` via that plugin's\n * editor component. It takes care of transitioning from one plugin kind to another \"all at once\" so that when the\n * plugin's kind changes, the spec is also changed at the same time so those options editor components don't see a\n * previous plugin's spec state. If you just want this behavior, but in a different UI layout from this, try the\n * `usePluginEditor` hook that powers this component.\n */\nexport function PluginEditor(props: PluginEditorProps): ReactElement {\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  const { value, pluginTypes, pluginKindLabel, onChange: _, isReadonly, ...others } = props;\n  const { pendingSelection, isLoading, error, onSelectionChange, onSpecChange } = usePluginEditor(props);\n  return (\n    <Box {...others}>\n      <Box sx={{ display: 'flex', flexDirection: 'row' }}>\n        <PluginKindSelect\n          fullWidth={false}\n          sx={{ mb: 2, minWidth: 120 }}\n          margin=\"dense\"\n          label={pluginKindLabel}\n          pluginTypes={pluginTypes}\n          disabled={isLoading}\n          value={pendingSelection ? pendingSelection : value.selection}\n          InputProps={{ readOnly: isReadonly }}\n          error={!!error}\n          helperText={error?.message}\n          onChange={onSelectionChange}\n        />\n\n        <Button\n          variant=\"contained\"\n          sx={{ marginTop: 1.5, marginBottom: 1.5, paddingTop: 0.5, marginLeft: 'auto' }}\n          startIcon={<Reload />}\n          onClick={() => onSpecChange(value.spec)}\n        >\n          Run Query\n        </Button>\n      </Box>\n\n      <ErrorBoundary FallbackComponent={ErrorAlert}>\n        <PluginSpecEditor\n          pluginSelection={value.selection}\n          value={value.spec}\n          onChange={onSpecChange}\n          isReadonly={isReadonly}\n        />\n      </ErrorBoundary>\n    </Box>\n  );\n}\n"],"names":["Box","Button","Reload","ErrorAlert","ErrorBoundary","PluginKindSelect","PluginSpecEditor","usePluginEditor","PluginEditor","props","value","pluginTypes","pluginKindLabel","onChange","_","isReadonly","others","pendingSelection","isLoading","error","onSelectionChange","onSpecChange","sx","display","flexDirection","fullWidth","mb","minWidth","margin","label","disabled","selection","InputProps","readOnly","helperText","message","variant","marginTop","marginBottom","paddingTop","marginLeft","startIcon","onClick","spec","FallbackComponent","pluginSelection"],"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,EAAEC,MAAM,QAAQ,gBAAgB;AAC5C,OAAOC,YAAY,yBAAyB;AAC5C,SAASC,UAAU,EAAEC,aAAa,QAAQ,yBAAyB;AAEnE,SAASC,gBAAgB,QAAQ,sBAAsB;AACvD,SAASC,gBAAgB,QAAQ,sBAAsB;AACvD,SAA4BC,eAAe,QAAQ,sBAAsB;AAEzE;;;;;;;CAOC,GACD,OAAO,SAASC,aAAaC,KAAwB;IACnD,6DAA6D;IAC7D,MAAM,EAAEC,KAAK,EAAEC,WAAW,EAAEC,eAAe,EAAEC,UAAUC,CAAC,EAAEC,UAAU,EAAE,GAAGC,QAAQ,GAAGP;IACpF,MAAM,EAAEQ,gBAAgB,EAAEC,SAAS,EAAEC,KAAK,EAAEC,iBAAiB,EAAEC,YAAY,EAAE,GAAGd,gBAAgBE;IAChG,qBACE,MAACT;QAAK,GAAGgB,MAAM;;0BACb,MAAChB;gBAAIsB,IAAI;oBAAEC,SAAS;oBAAQC,eAAe;gBAAM;;kCAC/C,KAACnB;wBACCoB,WAAW;wBACXH,IAAI;4BAAEI,IAAI;4BAAGC,UAAU;wBAAI;wBAC3BC,QAAO;wBACPC,OAAOjB;wBACPD,aAAaA;wBACbmB,UAAUZ;wBACVR,OAAOO,mBAAmBA,mBAAmBP,MAAMqB,SAAS;wBAC5DC,YAAY;4BAAEC,UAAUlB;wBAAW;wBACnCI,OAAO,CAAC,CAACA;wBACTe,YAAYf,OAAOgB;wBACnBtB,UAAUO;;kCAGZ,KAACnB;wBACCmC,SAAQ;wBACRd,IAAI;4BAAEe,WAAW;4BAAKC,cAAc;4BAAKC,YAAY;4BAAKC,YAAY;wBAAO;wBAC7EC,yBAAW,KAACvC;wBACZwC,SAAS,IAAMrB,aAAaX,MAAMiC,IAAI;kCACvC;;;;0BAKH,KAACvC;gBAAcwC,mBAAmBzC;0BAChC,cAAA,KAACG;oBACCuC,iBAAiBnC,MAAMqB,SAAS;oBAChCrB,OAAOA,MAAMiC,IAAI;oBACjB9B,UAAUQ;oBACVN,YAAYA;;;;;AAKtB"}
+{"version":3,"sources":["../../../src/components/PluginEditor/PluginEditor.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, Button } from '@mui/material';\nimport Reload from 'mdi-material-ui/Reload';\nimport { ErrorAlert, ErrorBoundary } from '@perses-dev/components';\nimport { forwardRef, ReactElement, useCallback, useImperativeHandle, useMemo, useState } from 'react';\nimport { UnknownSpec } from '@perses-dev/core';\nimport { PluginKindSelect } from '../PluginKindSelect';\nimport { PluginSpecEditor } from '../PluginSpecEditor';\nimport { PluginEditorProps, PluginEditorRef, usePluginEditor } from './plugin-editor-api';\n\n/**\n * A combination `PluginKindSelect` and `PluginSpecEditor` component. This is meant for editing the `plugin` property\n * that's common in our JSON specs where a user selects a plugin `kind` and then edits the `spec` via that plugin's\n * editor component. It takes care of transitioning from one plugin kind to another \"all at once\" so that when the\n * plugin's kind changes, the spec is also changed at the same time so those options editor components don't see a\n * previous plugin's spec state. If you just want this behavior, but in a different UI layout from this, try the\n * `usePluginEditor` hook that powers this component.\n */\n\nexport const PluginEditor = forwardRef<PluginEditorRef, PluginEditorProps>((props, ref): ReactElement => {\n  const {\n    value,\n    withRunQueryButton = true,\n    pluginTypes,\n    pluginKindLabel,\n    onChange: _,\n    isReadonly,\n    postExecuteRunQuery: refresh,\n    ...others\n  } = props;\n  const { pendingSelection, isLoading, error, onSelectionChange, onSpecChange } = usePluginEditor(props);\n\n  /* \n     We could technically merge the watchedQuery, watchedOtherSpecs into a single watched-object,\n     because at the end of the day, they are all specs.\n     However, let's have them separated to keep the code simple and readable.\n     Reason: Only Query string field is common between all of them. Other specs may be different\n     Example: Legend, and MinSteps\n    */\n  const [watchedQuery, setWatchQuery] = useState<string>(value.spec['query'] as string);\n  const [watchedOtherSpecs, setWatchOtherSpecs] = useState<UnknownSpec>(value.spec);\n\n  const runQueryHandler = useCallback((): void => {\n    onSpecChange({ ...value.spec, ...watchedOtherSpecs, query: watchedQuery });\n    refresh?.();\n  }, [value.spec, onSpecChange, watchedQuery, watchedOtherSpecs, refresh]);\n\n  const queryHandlerSettings = useMemo(() => {\n    return withRunQueryButton\n      ? {\n          runWithOnBlur: false,\n          watchQueryChanges: (query: string): void => {\n            setWatchQuery(query);\n          },\n          setWatchOtherSpecs: (otherSpecs: UnknownSpec): void => {\n            setWatchOtherSpecs(otherSpecs);\n          },\n        }\n      : undefined;\n  }, [withRunQueryButton]);\n\n  useImperativeHandle(ref, () => ({ flushChanges: runQueryHandler }));\n\n  return (\n    <Box {...others}>\n      <Box\n        sx={{\n          display: 'flex',\n          flexDirection: 'row',\n          alignItems: 'center',\n          justifyContent: 'space-between',\n          gap: 1,\n          mb: 1,\n        }}\n      >\n        <PluginKindSelect\n          fullWidth={false}\n          sx={{ minWidth: 120 }}\n          margin=\"dense\"\n          label={pluginKindLabel}\n          pluginTypes={pluginTypes}\n          disabled={isLoading}\n          value={pendingSelection ? pendingSelection : value.selection}\n          slotProps={{ input: { readOnly: isReadonly } }}\n          error={!!error}\n          helperText={error?.message}\n          onChange={onSelectionChange}\n        />\n\n        {withRunQueryButton && !isLoading && (\n          <Button data-testid=\"run_query_button\" variant=\"contained\" startIcon={<Reload />} onClick={runQueryHandler}>\n            Run Query\n          </Button>\n        )}\n      </Box>\n\n      <ErrorBoundary FallbackComponent={ErrorAlert}>\n        <PluginSpecEditor\n          pluginSelection={value.selection}\n          value={value.spec}\n          onChange={onSpecChange}\n          isReadonly={isReadonly}\n          queryHandlerSettings={queryHandlerSettings}\n        />\n      </ErrorBoundary>\n    </Box>\n  );\n});\n\nPluginEditor.displayName = 'PluginEditor';\n"],"names":["Box","Button","Reload","ErrorAlert","ErrorBoundary","forwardRef","useCallback","useImperativeHandle","useMemo","useState","PluginKindSelect","PluginSpecEditor","usePluginEditor","PluginEditor","props","ref","value","withRunQueryButton","pluginTypes","pluginKindLabel","onChange","_","isReadonly","postExecuteRunQuery","refresh","others","pendingSelection","isLoading","error","onSelectionChange","onSpecChange","watchedQuery","setWatchQuery","spec","watchedOtherSpecs","setWatchOtherSpecs","runQueryHandler","query","queryHandlerSettings","runWithOnBlur","watchQueryChanges","otherSpecs","undefined","flushChanges","sx","display","flexDirection","alignItems","justifyContent","gap","mb","fullWidth","minWidth","margin","label","disabled","selection","slotProps","input","readOnly","helperText","message","data-testid","variant","startIcon","onClick","FallbackComponent","pluginSelection","displayName"],"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,EAAEC,MAAM,QAAQ,gBAAgB;AAC5C,OAAOC,YAAY,yBAAyB;AAC5C,SAASC,UAAU,EAAEC,aAAa,QAAQ,yBAAyB;AACnE,SAASC,UAAU,EAAgBC,WAAW,EAAEC,mBAAmB,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,QAAQ;AAEtG,SAASC,gBAAgB,QAAQ,sBAAsB;AACvD,SAASC,gBAAgB,QAAQ,sBAAsB;AACvD,SAA6CC,eAAe,QAAQ,sBAAsB;AAE1F;;;;;;;CAOC,GAED,OAAO,MAAMC,6BAAeR,WAA+C,CAACS,OAAOC;IACjF,MAAM,EACJC,KAAK,EACLC,qBAAqB,IAAI,EACzBC,WAAW,EACXC,eAAe,EACfC,UAAUC,CAAC,EACXC,UAAU,EACVC,qBAAqBC,OAAO,EAC5B,GAAGC,QACJ,GAAGX;IACJ,MAAM,EAAEY,gBAAgB,EAAEC,SAAS,EAAEC,KAAK,EAAEC,iBAAiB,EAAEC,YAAY,EAAE,GAAGlB,gBAAgBE;IAEhG;;;;;;IAME,GACF,MAAM,CAACiB,cAAcC,cAAc,GAAGvB,SAAiBO,MAAMiB,IAAI,CAAC,QAAQ;IAC1E,MAAM,CAACC,mBAAmBC,mBAAmB,GAAG1B,SAAsBO,MAAMiB,IAAI;IAEhF,MAAMG,kBAAkB9B,YAAY;QAClCwB,aAAa;YAAE,GAAGd,MAAMiB,IAAI;YAAE,GAAGC,iBAAiB;YAAEG,OAAON;QAAa;QACxEP;IACF,GAAG;QAACR,MAAMiB,IAAI;QAAEH;QAAcC;QAAcG;QAAmBV;KAAQ;IAEvE,MAAMc,uBAAuB9B,QAAQ;QACnC,OAAOS,qBACH;YACEsB,eAAe;YACfC,mBAAmB,CAACH;gBAClBL,cAAcK;YAChB;YACAF,oBAAoB,CAACM;gBACnBN,mBAAmBM;YACrB;QACF,IACAC;IACN,GAAG;QAACzB;KAAmB;IAEvBV,oBAAoBQ,KAAK,IAAO,CAAA;YAAE4B,cAAcP;QAAgB,CAAA;IAEhE,qBACE,MAACpC;QAAK,GAAGyB,MAAM;;0BACb,MAACzB;gBACC4C,IAAI;oBACFC,SAAS;oBACTC,eAAe;oBACfC,YAAY;oBACZC,gBAAgB;oBAChBC,KAAK;oBACLC,IAAI;gBACN;;kCAEA,KAACxC;wBACCyC,WAAW;wBACXP,IAAI;4BAAEQ,UAAU;wBAAI;wBACpBC,QAAO;wBACPC,OAAOnC;wBACPD,aAAaA;wBACbqC,UAAU5B;wBACVX,OAAOU,mBAAmBA,mBAAmBV,MAAMwC,SAAS;wBAC5DC,WAAW;4BAAEC,OAAO;gCAAEC,UAAUrC;4BAAW;wBAAE;wBAC7CM,OAAO,CAAC,CAACA;wBACTgC,YAAYhC,OAAOiC;wBACnBzC,UAAUS;;oBAGXZ,sBAAsB,CAACU,2BACtB,KAAC1B;wBAAO6D,eAAY;wBAAmBC,SAAQ;wBAAYC,yBAAW,KAAC9D;wBAAW+D,SAAS7B;kCAAiB;;;;0BAMhH,KAAChC;gBAAc8D,mBAAmB/D;0BAChC,cAAA,KAACQ;oBACCwD,iBAAiBnD,MAAMwC,SAAS;oBAChCxC,OAAOA,MAAMiB,IAAI;oBACjBb,UAAUU;oBACVR,YAAYA;oBACZgB,sBAAsBA;;;;;AAKhC,GAAG;AAEHzB,aAAauD,WAAW,GAAG"}

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

@@ -15,7 +15,12 @@ export interface PluginEditorProps extends Omit<BoxProps, OmittedMuiProps> {
     pluginKindLabel: string;
     value: PluginEditorValue;
     isReadonly?: boolean;
+    withRunQueryButton?: boolean;
     onChange: (next: PluginEditorValue) => void;
+    postExecuteRunQuery?: () => void;
+}
+export interface PluginEditorRef {
+    flushChanges?: () => void;
 }
 /**
  * Props needed by the usePluginEditor hook.

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

@@ -1 +1 @@
-{"version":3,"file":"plugin-editor-api.d.ts","sourceRoot":"","sources":["../../../src/components/PluginEditor/plugin-editor-api.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,WAAW,EAAY,MAAM,kBAAkB,CAAC;AAGzD,OAAO,EAAe,UAAU,EAAE,MAAM,aAAa,CAAC;AAKtD,MAAM,WAAW,qBAAqB;IACpC,IAAI,EAAE,UAAU,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,iBAAiB;IAChC,SAAS,EAAE,qBAAqB,CAAC;IACjC,IAAI,EAAE,WAAW,CAAC;CACnB;AAID,KAAK,eAAe,GAAG,UAAU,GAAG,OAAO,GAAG,UAAU,CAAC;AAEzD,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,QAAQ,EAAE,eAAe,CAAC;IACxE,WAAW,EAAE,UAAU,EAAE,CAAC;IAC1B,eAAe,EAAE,MAAM,CAAC;IACxB,KAAK,EAAE,iBAAiB,CAAC;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,CAAC,IAAI,EAAE,iBAAiB,KAAK,IAAI,CAAC;CAC7C;AAKD;;GAEG;AACH,MAAM,MAAM,oBAAoB,GAAG,IAAI,CAAC,iBAAiB,EAAE,aAAa,GAAG,OAAO,GAAG,UAAU,CAAC,GAAG;IACjG,uBAAuB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;CACvD,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,GAAG;IAC5D,gBAAgB,CAAC,EAAE,qBAAqB,CAAC;IACzC,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;IACpB,iBAAiB,EAAE,CAAC,CAAC,EAAE,qBAAqB,KAAK,IAAI,CAAC;IACtD,YAAY,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;IAC1C,wBAAwB,EAAE,MAAM,IAAI,CAAC;CACtC,CAyHA"}
+{"version":3,"file":"plugin-editor-api.d.ts","sourceRoot":"","sources":["../../../src/components/PluginEditor/plugin-editor-api.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,WAAW,EAAY,MAAM,kBAAkB,CAAC;AAGzD,OAAO,EAAe,UAAU,EAAE,MAAM,aAAa,CAAC;AAKtD,MAAM,WAAW,qBAAqB;IACpC,IAAI,EAAE,UAAU,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,iBAAiB;IAChC,SAAS,EAAE,qBAAqB,CAAC;IACjC,IAAI,EAAE,WAAW,CAAC;CACnB;AAID,KAAK,eAAe,GAAG,UAAU,GAAG,OAAO,GAAG,UAAU,CAAC;AAEzD,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,QAAQ,EAAE,eAAe,CAAC;IACxE,WAAW,EAAE,UAAU,EAAE,CAAC;IAC1B,eAAe,EAAE,MAAM,CAAC;IACxB,KAAK,EAAE,iBAAiB,CAAC;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,QAAQ,EAAE,CAAC,IAAI,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAC5C,mBAAmB,CAAC,EAAE,MAAM,IAAI,CAAC;CAClC;AAED,MAAM,WAAW,eAAe;IAC9B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B;AAKD;;GAEG;AACH,MAAM,MAAM,oBAAoB,GAAG,IAAI,CAAC,iBAAiB,EAAE,aAAa,GAAG,OAAO,GAAG,UAAU,CAAC,GAAG;IACjG,uBAAuB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;CACvD,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,GAAG;IAC5D,gBAAgB,CAAC,EAAE,qBAAqB,CAAC;IACzC,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;IACpB,iBAAiB,EAAE,CAAC,CAAC,EAAE,qBAAqB,KAAK,IAAI,CAAC;IACtD,YAAY,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;IAC1C,wBAAwB,EAAE,MAAM,IAAI,CAAC;CACtC,CAyHA"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"PluginKindSelect.d.ts","sourceRoot":"","sources":["../../../src/components/PluginKindSelect/PluginKindSelect.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAuB,cAAc,EAAE,MAAM,eAAe,CAAC;AAEpE,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAEzC,OAAO,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAC;AAExD,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CAAC,cAAc,EAAE,OAAO,GAAG,UAAU,GAAG,UAAU,CAAC;IACpG,WAAW,EAAE,UAAU,EAAE,CAAC;IAC1B,KAAK,CAAC,EAAE,qBAAqB,CAAC;IAC9B,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,qBAAqB,KAAK,IAAI,CAAC;CAC/C;AAED;;;;;;GAMG;AACH,eAAO,MAAM,gBAAgB,wHA8C3B,CAAC"}
+{"version":3,"file":"PluginKindSelect.d.ts","sourceRoot":"","sources":["../../../src/components/PluginKindSelect/PluginKindSelect.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAuB,cAAc,EAAE,MAAM,eAAe,CAAC;AAEpE,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAEzC,OAAO,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAC;AAExD,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CAAC,cAAc,EAAE,OAAO,GAAG,UAAU,GAAG,UAAU,CAAC;IACpG,WAAW,EAAE,UAAU,EAAE,CAAC;IAC1B,KAAK,CAAC,EAAE,qBAAqB,CAAC;IAC9B,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,qBAAqB,KAAK,IAAI,CAAC;CAC/C;AAED;;;;;;GAMG;AACH,eAAO,MAAM,gBAAgB,wHAoD3B,CAAC"}

package/dist/components/PluginKindSelect/PluginKindSelect.js

@@ -12,7 +12,7 @@
 // limitations under the License.
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { MenuItem, TextField } from '@mui/material';
-import { forwardRef, useCallback } from 'react';
+import { forwardRef, useCallback, useMemo } from 'react';
 import { useListPluginMetadata } from '../../runtime';
 /**
  * Displays a MUI Select input for selecting a plugin's kind from a list of all the available plugins of some specific
@@ -23,6 +23,9 @@ import { useListPluginMetadata } from '../../runtime';
  */ export const PluginKindSelect = /*#__PURE__*/ forwardRef((props, ref)=>{
     const { pluginTypes, value: propValue, onChange, ...others } = props;
     const { data, isLoading } = useListPluginMetadata(pluginTypes);
+    const sortedData = useMemo(()=>data?.sort((a, b)=>a.spec.display.name.localeCompare(b.spec.display.name)), [
+        data
+    ]);
     // Pass an empty value while options are still loading so MUI doesn't complain about us using an "out of range" value
     const value = !propValue || isLoading ? '' : selectionToOptionValue(propValue);
     const handleChange = (event)=>{
@@ -33,9 +36,9 @@ import { useListPluginMetadata } from '../../runtime';
             return '';
         }
         const selectedValue = optionValueToSelection(selected);
-        return data?.find((v)=>v.kind === selectedValue.type && v.spec.name === selectedValue.kind)?.spec.display.name;
+        return sortedData?.find((v)=>v.kind === selectedValue.type && v.spec.name === selectedValue.kind)?.spec.display.name;
     }, [
-        data
+        sortedData
     ]);
     // TODO: Does this need a loading indicator of some kind?
     return /*#__PURE__*/ _jsxs(TextField, {
@@ -54,7 +57,7 @@ import { useListPluginMetadata } from '../../runtime';
                 value: "",
                 children: "Loading..."
             }),
-            data?.map((metadata)=>/*#__PURE__*/ _jsx(MenuItem, {
+            sortedData?.map((metadata)=>/*#__PURE__*/ _jsx(MenuItem, {
                     "data-testid": "option",
                     value: selectionToOptionValue({
                         type: metadata.kind,

package/dist/components/PluginKindSelect/PluginKindSelect.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PluginKindSelect/PluginKindSelect.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 { MenuItem, TextField, TextFieldProps } from '@mui/material';\nimport { forwardRef, ReactElement, useCallback } from 'react';\nimport { PluginType } from '../../model';\nimport { useListPluginMetadata } from '../../runtime';\nimport { PluginEditorSelection } from '../PluginEditor';\n\nexport interface PluginKindSelectProps extends Omit<TextFieldProps, 'value' | 'onChange' | 'children'> {\n  pluginTypes: PluginType[];\n  value?: PluginEditorSelection;\n  onChange?: (s: PluginEditorSelection) => void;\n}\n\n/**\n * Displays a MUI Select input for selecting a plugin's kind from a list of all the available plugins of some specific\n * plugin types. (e.g. \"Show a list of all the Panel plugins\", or \"Show a list of all the Variable plugins\", or \"Show\n * a list of all the TimeSeriesQuery, TraceQuery, ProfileQuery, and LogQuery plugins\").\n * The value of the select is the kind of the plugin, but you can also listen to the `onPluginTypeChange` event to know\n * when the user changes the plugin type (it fires at start for the default value.)\n */\nexport const PluginKindSelect = forwardRef((props: PluginKindSelectProps, ref): ReactElement => {\n  const { pluginTypes, value: propValue, onChange, ...others } = props;\n  const { data, isLoading } = useListPluginMetadata(pluginTypes);\n\n  // Pass an empty value while options are still loading so MUI doesn't complain about us using an \"out of range\" value\n  const value = !propValue || isLoading ? '' : selectionToOptionValue(propValue);\n\n  const handleChange = (event: { target: { value: string } }): void => {\n    onChange?.(optionValueToSelection(event.target.value));\n  };\n\n  const renderValue = useCallback(\n    (selected: unknown) => {\n      if (selected === '') {\n        return '';\n      }\n      const selectedValue = optionValueToSelection(selected as string);\n      return data?.find((v) => v.kind === selectedValue.type && v.spec.name === selectedValue.kind)?.spec.display.name;\n    },\n    [data]\n  );\n\n  // TODO: Does this need a loading indicator of some kind?\n  return (\n    <TextField\n      select\n      inputRef={ref}\n      {...others}\n      value={value}\n      aria-label={value}\n      onChange={handleChange}\n      SelectProps={{ renderValue }}\n      data-testid=\"plugin-kind-select\"\n    >\n      {isLoading && <MenuItem value=\"\">Loading...</MenuItem>}\n      {data?.map((metadata) => (\n        <MenuItem\n          data-testid=\"option\"\n          key={metadata.kind + metadata.spec.name}\n          value={selectionToOptionValue({ type: metadata.kind, kind: metadata.spec.name })}\n        >\n          {metadata.spec.display.name}\n        </MenuItem>\n      ))}\n    </TextField>\n  );\n});\nPluginKindSelect.displayName = 'PluginKindSelect';\n\n// Delimiter used to stringify/parse option values\nconst OPTION_VALUE_DELIMITER = '_____';\n\n/**\n * Given a PluginEditorSelection,\n * returns a string value like `{type}_____{kind}` that can be used as a Select input value.\n * @param selector\n */\nfunction selectionToOptionValue(selector: PluginEditorSelection): string {\n  return [selector.type, selector.kind].join(OPTION_VALUE_DELIMITER);\n}\n\n/**\n * Given an option value name like `{type}_____{kind}`,\n * returns a PluginEditorSelection to be used by the query data model.\n * @param optionValue\n */\nfunction optionValueToSelection(optionValue: string): PluginEditorSelection {\n  const words = optionValue.split(OPTION_VALUE_DELIMITER);\n  const type = words[0] as PluginType | undefined;\n  const kind = words[1];\n  if (type === undefined || kind === undefined) {\n    throw new Error('Invalid optionValue string');\n  }\n  return {\n    type,\n    kind,\n  };\n}\n"],"names":["MenuItem","TextField","forwardRef","useCallback","useListPluginMetadata","PluginKindSelect","props","ref","pluginTypes","value","propValue","onChange","others","data","isLoading","selectionToOptionValue","handleChange","event","optionValueToSelection","target","renderValue","selected","selectedValue","find","v","kind","type","spec","name","display","select","inputRef","aria-label","SelectProps","data-testid","map","metadata","displayName","OPTION_VALUE_DELIMITER","selector","join","optionValue","words","split","undefined","Error"],"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,EAAEC,SAAS,QAAwB,gBAAgB;AACpE,SAASC,UAAU,EAAgBC,WAAW,QAAQ,QAAQ;AAE9D,SAASC,qBAAqB,QAAQ,gBAAgB;AAStD;;;;;;CAMC,GACD,OAAO,MAAMC,iCAAmBH,WAAW,CAACI,OAA8BC;IACxE,MAAM,EAAEC,WAAW,EAAEC,OAAOC,SAAS,EAAEC,QAAQ,EAAE,GAAGC,QAAQ,GAAGN;IAC/D,MAAM,EAAEO,IAAI,EAAEC,SAAS,EAAE,GAAGV,sBAAsBI;IAElD,qHAAqH;IACrH,MAAMC,QAAQ,CAACC,aAAaI,YAAY,KAAKC,uBAAuBL;IAEpE,MAAMM,eAAe,CAACC;QACpBN,WAAWO,uBAAuBD,MAAME,MAAM,CAACV,KAAK;IACtD;IAEA,MAAMW,cAAcjB,YAClB,CAACkB;QACC,IAAIA,aAAa,IAAI;YACnB,OAAO;QACT;QACA,MAAMC,gBAAgBJ,uBAAuBG;QAC7C,OAAOR,MAAMU,KAAK,CAACC,IAAMA,EAAEC,IAAI,KAAKH,cAAcI,IAAI,IAAIF,EAAEG,IAAI,CAACC,IAAI,KAAKN,cAAcG,IAAI,GAAGE,KAAKE,QAAQD;IAC9G,GACA;QAACf;KAAK;IAGR,yDAAyD;IACzD,qBACE,MAACZ;QACC6B,MAAM;QACNC,UAAUxB;QACT,GAAGK,MAAM;QACVH,OAAOA;QACPuB,cAAYvB;QACZE,UAAUK;QACViB,aAAa;YAAEb;QAAY;QAC3Bc,eAAY;;YAEXpB,2BAAa,KAACd;gBAASS,OAAM;0BAAG;;YAChCI,MAAMsB,IAAI,CAACC,yBACV,KAACpC;oBACCkC,eAAY;oBAEZzB,OAAOM,uBAAuB;wBAAEW,MAAMU,SAASX,IAAI;wBAAEA,MAAMW,SAAST,IAAI,CAACC,IAAI;oBAAC;8BAE7EQ,SAAST,IAAI,CAACE,OAAO,CAACD,IAAI;mBAHtBQ,SAASX,IAAI,GAAGW,SAAST,IAAI,CAACC,IAAI;;;AAQjD,GAAG;AACHvB,iBAAiBgC,WAAW,GAAG;AAE/B,kDAAkD;AAClD,MAAMC,yBAAyB;AAE/B;;;;CAIC,GACD,SAASvB,uBAAuBwB,QAA+B;IAC7D,OAAO;QAACA,SAASb,IAAI;QAAEa,SAASd,IAAI;KAAC,CAACe,IAAI,CAACF;AAC7C;AAEA;;;;CAIC,GACD,SAASpB,uBAAuBuB,WAAmB;IACjD,MAAMC,QAAQD,YAAYE,KAAK,CAACL;IAChC,MAAMZ,OAAOgB,KAAK,CAAC,EAAE;IACrB,MAAMjB,OAAOiB,KAAK,CAAC,EAAE;IACrB,IAAIhB,SAASkB,aAAanB,SAASmB,WAAW;QAC5C,MAAM,IAAIC,MAAM;IAClB;IACA,OAAO;QACLnB;QACAD;IACF;AACF"}
+{"version":3,"sources":["../../../src/components/PluginKindSelect/PluginKindSelect.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 { MenuItem, TextField, TextFieldProps } from '@mui/material';\nimport { forwardRef, ReactElement, useCallback, useMemo } from 'react';\nimport { PluginType } from '../../model';\nimport { useListPluginMetadata } from '../../runtime';\nimport { PluginEditorSelection } from '../PluginEditor';\n\nexport interface PluginKindSelectProps extends Omit<TextFieldProps, 'value' | 'onChange' | 'children'> {\n  pluginTypes: PluginType[];\n  value?: PluginEditorSelection;\n  onChange?: (s: PluginEditorSelection) => void;\n}\n\n/**\n * Displays a MUI Select input for selecting a plugin's kind from a list of all the available plugins of some specific\n * plugin types. (e.g. \"Show a list of all the Panel plugins\", or \"Show a list of all the Variable plugins\", or \"Show\n * a list of all the TimeSeriesQuery, TraceQuery, ProfileQuery, and LogQuery plugins\").\n * The value of the select is the kind of the plugin, but you can also listen to the `onPluginTypeChange` event to know\n * when the user changes the plugin type (it fires at start for the default value.)\n */\nexport const PluginKindSelect = forwardRef((props: PluginKindSelectProps, ref): ReactElement => {\n  const { pluginTypes, value: propValue, onChange, ...others } = props;\n  const { data, isLoading } = useListPluginMetadata(pluginTypes);\n\n  const sortedData = useMemo(\n    () => data?.sort((a, b) => a.spec.display.name.localeCompare(b.spec.display.name)),\n    [data]\n  );\n\n  // Pass an empty value while options are still loading so MUI doesn't complain about us using an \"out of range\" value\n  const value = !propValue || isLoading ? '' : selectionToOptionValue(propValue);\n\n  const handleChange = (event: { target: { value: string } }): void => {\n    onChange?.(optionValueToSelection(event.target.value));\n  };\n\n  const renderValue = useCallback(\n    (selected: unknown) => {\n      if (selected === '') {\n        return '';\n      }\n      const selectedValue = optionValueToSelection(selected as string);\n      return sortedData?.find((v) => v.kind === selectedValue.type && v.spec.name === selectedValue.kind)?.spec.display\n        .name;\n    },\n    [sortedData]\n  );\n\n  // TODO: Does this need a loading indicator of some kind?\n  return (\n    <TextField\n      select\n      inputRef={ref}\n      {...others}\n      value={value}\n      aria-label={value}\n      onChange={handleChange}\n      SelectProps={{ renderValue }}\n      data-testid=\"plugin-kind-select\"\n    >\n      {isLoading && <MenuItem value=\"\">Loading...</MenuItem>}\n      {sortedData?.map((metadata) => (\n        <MenuItem\n          data-testid=\"option\"\n          key={metadata.kind + metadata.spec.name}\n          value={selectionToOptionValue({ type: metadata.kind, kind: metadata.spec.name })}\n        >\n          {metadata.spec.display.name}\n        </MenuItem>\n      ))}\n    </TextField>\n  );\n});\nPluginKindSelect.displayName = 'PluginKindSelect';\n\n// Delimiter used to stringify/parse option values\nconst OPTION_VALUE_DELIMITER = '_____';\n\n/**\n * Given a PluginEditorSelection,\n * returns a string value like `{type}_____{kind}` that can be used as a Select input value.\n * @param selector\n */\nfunction selectionToOptionValue(selector: PluginEditorSelection): string {\n  return [selector.type, selector.kind].join(OPTION_VALUE_DELIMITER);\n}\n\n/**\n * Given an option value name like `{type}_____{kind}`,\n * returns a PluginEditorSelection to be used by the query data model.\n * @param optionValue\n */\nfunction optionValueToSelection(optionValue: string): PluginEditorSelection {\n  const words = optionValue.split(OPTION_VALUE_DELIMITER);\n  const type = words[0] as PluginType | undefined;\n  const kind = words[1];\n  if (type === undefined || kind === undefined) {\n    throw new Error('Invalid optionValue string');\n  }\n  return {\n    type,\n    kind,\n  };\n}\n"],"names":["MenuItem","TextField","forwardRef","useCallback","useMemo","useListPluginMetadata","PluginKindSelect","props","ref","pluginTypes","value","propValue","onChange","others","data","isLoading","sortedData","sort","a","b","spec","display","name","localeCompare","selectionToOptionValue","handleChange","event","optionValueToSelection","target","renderValue","selected","selectedValue","find","v","kind","type","select","inputRef","aria-label","SelectProps","data-testid","map","metadata","displayName","OPTION_VALUE_DELIMITER","selector","join","optionValue","words","split","undefined","Error"],"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,EAAEC,SAAS,QAAwB,gBAAgB;AACpE,SAASC,UAAU,EAAgBC,WAAW,EAAEC,OAAO,QAAQ,QAAQ;AAEvE,SAASC,qBAAqB,QAAQ,gBAAgB;AAStD;;;;;;CAMC,GACD,OAAO,MAAMC,iCAAmBJ,WAAW,CAACK,OAA8BC;IACxE,MAAM,EAAEC,WAAW,EAAEC,OAAOC,SAAS,EAAEC,QAAQ,EAAE,GAAGC,QAAQ,GAAGN;IAC/D,MAAM,EAAEO,IAAI,EAAEC,SAAS,EAAE,GAAGV,sBAAsBI;IAElD,MAAMO,aAAaZ,QACjB,IAAMU,MAAMG,KAAK,CAACC,GAAGC,IAAMD,EAAEE,IAAI,CAACC,OAAO,CAACC,IAAI,CAACC,aAAa,CAACJ,EAAEC,IAAI,CAACC,OAAO,CAACC,IAAI,IAChF;QAACR;KAAK;IAGR,qHAAqH;IACrH,MAAMJ,QAAQ,CAACC,aAAaI,YAAY,KAAKS,uBAAuBb;IAEpE,MAAMc,eAAe,CAACC;QACpBd,WAAWe,uBAAuBD,MAAME,MAAM,CAAClB,KAAK;IACtD;IAEA,MAAMmB,cAAc1B,YAClB,CAAC2B;QACC,IAAIA,aAAa,IAAI;YACnB,OAAO;QACT;QACA,MAAMC,gBAAgBJ,uBAAuBG;QAC7C,OAAOd,YAAYgB,KAAK,CAACC,IAAMA,EAAEC,IAAI,KAAKH,cAAcI,IAAI,IAAIF,EAAEb,IAAI,CAACE,IAAI,KAAKS,cAAcG,IAAI,GAAGd,KAAKC,QACvGC;IACL,GACA;QAACN;KAAW;IAGd,yDAAyD;IACzD,qBACE,MAACf;QACCmC,MAAM;QACNC,UAAU7B;QACT,GAAGK,MAAM;QACVH,OAAOA;QACP4B,cAAY5B;QACZE,UAAUa;QACVc,aAAa;YAAEV;QAAY;QAC3BW,eAAY;;YAEXzB,2BAAa,KAACf;gBAASU,OAAM;0BAAG;;YAChCM,YAAYyB,IAAI,CAACC,yBAChB,KAAC1C;oBACCwC,eAAY;oBAEZ9B,OAAOc,uBAAuB;wBAAEW,MAAMO,SAASR,IAAI;wBAAEA,MAAMQ,SAAStB,IAAI,CAACE,IAAI;oBAAC;8BAE7EoB,SAAStB,IAAI,CAACC,OAAO,CAACC,IAAI;mBAHtBoB,SAASR,IAAI,GAAGQ,SAAStB,IAAI,CAACE,IAAI;;;AAQjD,GAAG;AACHhB,iBAAiBqC,WAAW,GAAG;AAE/B,kDAAkD;AAClD,MAAMC,yBAAyB;AAE/B;;;;CAIC,GACD,SAASpB,uBAAuBqB,QAA+B;IAC7D,OAAO;QAACA,SAASV,IAAI;QAAEU,SAASX,IAAI;KAAC,CAACY,IAAI,CAACF;AAC7C;AAEA;;;;CAIC,GACD,SAASjB,uBAAuBoB,WAAmB;IACjD,MAAMC,QAAQD,YAAYE,KAAK,CAACL;IAChC,MAAMT,OAAOa,KAAK,CAAC,EAAE;IACrB,MAAMd,OAAOc,KAAK,CAAC,EAAE;IACrB,IAAIb,SAASe,aAAahB,SAASgB,WAAW;QAC5C,MAAM,IAAIC,MAAM;IAClB;IACA,OAAO;QACLhB;QACAD;IACF;AACF"}

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

@@ -1 +1 @@
-{"version":3,"file":"PluginSpecEditor.d.ts","sourceRoot":"","sources":["../../../src/components/PluginSpecEditor/PluginSpecEditor.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAEjD,OAAO,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAC;AAExD,MAAM,WAAW,qBAAsB,SAAQ,kBAAkB,CAAC,WAAW,CAAC;IAC5E,eAAe,EAAE,qBAAqB,CAAC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,GAAG,YAAY,GAAG,IAAI,CA+BlF"}
+{"version":3,"file":"PluginSpecEditor.d.ts","sourceRoot":"","sources":["../../../src/components/PluginSpecEditor/PluginSpecEditor.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAErC,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAEjD,OAAO,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAC;AAExD,MAAM,WAAW,qBAAsB,SAAQ,kBAAkB,CAAC,WAAW,CAAC;IAC5E,eAAe,EAAE,qBAAqB,CAAC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,GAAG,YAAY,GAAG,IAAI,CA6BlF"}

package/dist/components/PluginSpecEditor/PluginSpecEditor.js

@@ -12,6 +12,7 @@
 // limitations under the License.
 import { jsx as _jsx } from "react/jsx-runtime";
 import { ErrorAlert } from '@perses-dev/components';
+import { CircularProgress, Stack } from '@mui/material';
 import { usePlugin } from '../../runtime';
 export function PluginSpecEditor(props) {
     const { pluginSelection: { type: pluginType, kind: pluginKind }, ...others } = props;
@@ -21,23 +22,26 @@ export function PluginSpecEditor(props) {
             error: error
         });
     }
-    // TODO: Proper loading indicator
     if (isLoading) {
-        return null;
+        return /*#__PURE__*/ _jsx(Stack, {
+            width: "100%",
+            sx: {
+                alignItems: 'center',
+                justifyContent: 'center'
+            },
+            children: /*#__PURE__*/ _jsx(CircularProgress, {})
+        });
     }
-    if (plugin === undefined) {
+    if (!plugin) {
         throw new Error(`Missing implementation for ${pluginType} plugin with kind '${pluginKind}'`);
     }
     if (pluginType === 'Panel') {
         throw new Error('This editor should not be used for panel type. Please use Panel Spec Editor instead.');
     }
     const { OptionsEditorComponent } = plugin;
-    if (OptionsEditorComponent !== undefined) {
-        return /*#__PURE__*/ _jsx(OptionsEditorComponent, {
-            ...others
-        });
-    }
-    return null;
+    return OptionsEditorComponent ? /*#__PURE__*/ _jsx(OptionsEditorComponent, {
+        ...others
+    }) : null;
 }
 
 //# sourceMappingURL=PluginSpecEditor.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PluginSpecEditor/PluginSpecEditor.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 { ErrorAlert } from '@perses-dev/components';\nimport { UnknownSpec } from '@perses-dev/core';\nimport { ReactElement } from 'react';\nimport { OptionsEditorProps } from '../../model';\nimport { usePlugin } from '../../runtime';\nimport { PluginEditorSelection } from '../PluginEditor';\n\nexport interface PluginSpecEditorProps extends OptionsEditorProps<UnknownSpec> {\n  pluginSelection: PluginEditorSelection;\n  isEditor?: boolean;\n}\n\nexport function PluginSpecEditor(props: PluginSpecEditorProps): ReactElement | null {\n  const {\n    pluginSelection: { type: pluginType, kind: pluginKind },\n    ...others\n  } = props;\n  const { data: plugin, isLoading, error } = usePlugin(pluginType, pluginKind);\n\n  if (error) {\n    return <ErrorAlert error={error} />;\n  }\n\n  // TODO: Proper loading indicator\n  if (isLoading) {\n    return null;\n  }\n\n  if (plugin === undefined) {\n    throw new Error(`Missing implementation for ${pluginType} plugin with kind '${pluginKind}'`);\n  }\n\n  if (pluginType === 'Panel') {\n    throw new Error('This editor should not be used for panel type. Please use Panel Spec Editor instead.');\n  }\n\n  const { OptionsEditorComponent } = plugin;\n\n  if (OptionsEditorComponent !== undefined) {\n    return <OptionsEditorComponent {...others} />;\n  }\n\n  return null;\n}\n"],"names":["ErrorAlert","usePlugin","PluginSpecEditor","props","pluginSelection","type","pluginType","kind","pluginKind","others","data","plugin","isLoading","error","undefined","Error","OptionsEditorComponent"],"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,UAAU,QAAQ,yBAAyB;AAIpD,SAASC,SAAS,QAAQ,gBAAgB;AAQ1C,OAAO,SAASC,iBAAiBC,KAA4B;IAC3D,MAAM,EACJC,iBAAiB,EAAEC,MAAMC,UAAU,EAAEC,MAAMC,UAAU,EAAE,EACvD,GAAGC,QACJ,GAAGN;IACJ,MAAM,EAAEO,MAAMC,MAAM,EAAEC,SAAS,EAAEC,KAAK,EAAE,GAAGZ,UAAUK,YAAYE;IAEjE,IAAIK,OAAO;QACT,qBAAO,KAACb;YAAWa,OAAOA;;IAC5B;IAEA,iCAAiC;IACjC,IAAID,WAAW;QACb,OAAO;IACT;IAEA,IAAID,WAAWG,WAAW;QACxB,MAAM,IAAIC,MAAM,CAAC,2BAA2B,EAAET,WAAW,mBAAmB,EAAEE,WAAW,CAAC,CAAC;IAC7F;IAEA,IAAIF,eAAe,SAAS;QAC1B,MAAM,IAAIS,MAAM;IAClB;IAEA,MAAM,EAAEC,sBAAsB,EAAE,GAAGL;IAEnC,IAAIK,2BAA2BF,WAAW;QACxC,qBAAO,KAACE;YAAwB,GAAGP,MAAM;;IAC3C;IAEA,OAAO;AACT"}
+{"version":3,"sources":["../../../src/components/PluginSpecEditor/PluginSpecEditor.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 { ErrorAlert } from '@perses-dev/components';\nimport { UnknownSpec } from '@perses-dev/core';\nimport { ReactElement } from 'react';\nimport { CircularProgress, Stack } from '@mui/material';\nimport { OptionsEditorProps } from '../../model';\nimport { usePlugin } from '../../runtime';\nimport { PluginEditorSelection } from '../PluginEditor';\n\nexport interface PluginSpecEditorProps extends OptionsEditorProps<UnknownSpec> {\n  pluginSelection: PluginEditorSelection;\n  isEditor?: boolean;\n}\n\nexport function PluginSpecEditor(props: PluginSpecEditorProps): ReactElement | null {\n  const {\n    pluginSelection: { type: pluginType, kind: pluginKind },\n    ...others\n  } = props;\n  const { data: plugin, isLoading, error } = usePlugin(pluginType, pluginKind);\n\n  if (error) {\n    return <ErrorAlert error={error} />;\n  }\n\n  if (isLoading) {\n    return (\n      <Stack width=\"100%\" sx={{ alignItems: 'center', justifyContent: 'center' }}>\n        <CircularProgress />\n      </Stack>\n    );\n  }\n\n  if (!plugin) {\n    throw new Error(`Missing implementation for ${pluginType} plugin with kind '${pluginKind}'`);\n  }\n\n  if (pluginType === 'Panel') {\n    throw new Error('This editor should not be used for panel type. Please use Panel Spec Editor instead.');\n  }\n  const { OptionsEditorComponent } = plugin;\n\n  return OptionsEditorComponent ? <OptionsEditorComponent {...others} /> : null;\n}\n"],"names":["ErrorAlert","CircularProgress","Stack","usePlugin","PluginSpecEditor","props","pluginSelection","type","pluginType","kind","pluginKind","others","data","plugin","isLoading","error","width","sx","alignItems","justifyContent","Error","OptionsEditorComponent"],"mappings":"AAAA,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,UAAU,QAAQ,yBAAyB;AAGpD,SAASC,gBAAgB,EAAEC,KAAK,QAAQ,gBAAgB;AAExD,SAASC,SAAS,QAAQ,gBAAgB;AAQ1C,OAAO,SAASC,iBAAiBC,KAA4B;IAC3D,MAAM,EACJC,iBAAiB,EAAEC,MAAMC,UAAU,EAAEC,MAAMC,UAAU,EAAE,EACvD,GAAGC,QACJ,GAAGN;IACJ,MAAM,EAAEO,MAAMC,MAAM,EAAEC,SAAS,EAAEC,KAAK,EAAE,GAAGZ,UAAUK,YAAYE;IAEjE,IAAIK,OAAO;QACT,qBAAO,KAACf;YAAWe,OAAOA;;IAC5B;IAEA,IAAID,WAAW;QACb,qBACE,KAACZ;YAAMc,OAAM;YAAOC,IAAI;gBAAEC,YAAY;gBAAUC,gBAAgB;YAAS;sBACvE,cAAA,KAAClB;;IAGP;IAEA,IAAI,CAACY,QAAQ;QACX,MAAM,IAAIO,MAAM,CAAC,2BAA2B,EAAEZ,WAAW,mBAAmB,EAAEE,WAAW,CAAC,CAAC;IAC7F;IAEA,IAAIF,eAAe,SAAS;QAC1B,MAAM,IAAIY,MAAM;IAClB;IACA,MAAM,EAAEC,sBAAsB,EAAE,GAAGR;IAEnC,OAAOQ,uCAAyB,KAACA;QAAwB,GAAGV,MAAM;SAAO;AAC3E"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/TimeRangeControls/TimeRangeControls.tsx"],"sourcesContent":["// Copyright 2024 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport RefreshIcon from 'mdi-material-ui/Refresh';\n// eslint-disable-next-line import/no-duplicates\nimport ZoomIn from 'mdi-material-ui/PlusCircleOutline';\n// eslint-disable-next-line import/no-duplicates\nimport ZoomOut from 'mdi-material-ui/MinusCircleOutline';\nimport { Stack } from '@mui/material';\nimport {\n  RefreshIntervalPicker,\n  InfoTooltip,\n  TimeOption,\n  ToolbarIconButton,\n  TimeRangeSelector,\n  buildRelativeTimeOption,\n} from '@perses-dev/components';\nimport { AbsoluteTimeRange, DurationString, parseDurationString, RelativeTimeRange } from '@perses-dev/core';\nimport { ReactElement, useCallback } from 'react';\nimport { TOOLTIP_TEXT } from '../../constants';\nimport {\n  useTimeRange,\n  useShowCustomTimeRangeSetting,\n  useTimeRangeOptionsSetting,\n  useShowZoomRangeSetting,\n} from '../../runtime';\n\nexport const DEFAULT_REFRESH_INTERVAL_OPTIONS: TimeOption[] = [\n  { value: { pastDuration: '0s' }, display: 'Off' },\n  { value: { pastDuration: '5s' }, display: '5s' },\n  { value: { pastDuration: '10s' }, display: '10s' },\n  { value: { pastDuration: '15s' }, display: '15s' },\n  { value: { pastDuration: '30s' }, display: '30s' },\n  { value: { pastDuration: '60s' }, display: '1m' },\n];\n\nconst DEFAULT_HEIGHT = '34px';\n\ninterface TimeRangeControlsProps {\n  // The controls look best at heights >= 28 pixels\n  heightPx?: number;\n  showTimeRangeSelector?: boolean;\n  showRefreshButton?: boolean;\n  showRefreshInterval?: boolean;\n  showCustomTimeRange?: boolean;\n  showZoomButtons?: boolean;\n  timePresets?: TimeOption[];\n}\n\nexport function TimeRangeControls({\n  heightPx,\n  showTimeRangeSelector = true,\n  showRefreshButton = true,\n  showRefreshInterval = true,\n  showCustomTimeRange,\n  showZoomButtons = true,\n  timePresets,\n}: TimeRangeControlsProps): ReactElement {\n  const { timeRange, setTimeRange, refresh, refreshInterval, setRefreshInterval } = useTimeRange();\n\n  const showCustomTimeRangeValue = useShowCustomTimeRangeSetting(showCustomTimeRange);\n  const showZoomInOutButtons = useShowZoomRangeSetting(showZoomButtons);\n  const timePresetsValue = useTimeRangeOptionsSetting(timePresets);\n\n  // Convert height to a string, then use the string for styling\n  const height = heightPx === undefined ? DEFAULT_HEIGHT : `${heightPx}px`;\n\n  // add time preset if one does not match duration given in time range\n  if (\n    'pastDuration' in timeRange &&\n    !timePresetsValue.some((option) => option.value.pastDuration === timeRange['pastDuration'])\n  ) {\n    timePresetsValue.push(buildRelativeTimeOption(timeRange['pastDuration']));\n  }\n\n  // set the new refresh interval both in the dashboard context & as query param\n  const handleRefreshIntervalChange = useCallback(\n    (duration: DurationString) => {\n      setRefreshInterval(duration);\n    },\n    [setRefreshInterval]\n  );\n\n  const fromDurationToMillis = (strDuration: string): number => {\n    const duration = parseDurationString(strDuration);\n    const millis =\n      // eslint-disable-next-line prettier/prettier\n        ((duration.seconds ?? 0) +\n        (duration.minutes ?? 0) * 60 +\n        (duration.hours ?? 0) * 3600 +\n        (duration.days ?? 0) * 86400 +\n        (duration.weeks ?? 0) * 7 * 86400 +\n        (duration.months ?? 0) * 30.436875 * 86400 + // avg month duration is ok for zoom purposes\n        (duration.years ?? 0) * 365.2425 * 86400) * // avg year duration is ok for zoom purposes\n      // eslint-disable-next-line prettier/prettier\n        1000; // to milliseconds\n    return millis;\n  };\n\n  // Function to double current time range, adding 50% before current start and 50% after current end\n  const doubleTimeRange = (): AbsoluteTimeRange => {\n    let newStart, newEnd, extendEndsBy;\n    const now = new Date();\n    if (Object.hasOwn(timeRange, 'start')) {\n      // current range is absolute\n      const absVal = timeRange as AbsoluteTimeRange;\n      extendEndsBy = (absVal.end.getTime() - absVal.start.getTime()) / 2; // half it to add 50% before current start and after current end\n      newStart = new Date(absVal.start.getTime() - extendEndsBy);\n      newEnd = new Date(absVal.end.getTime() + extendEndsBy);\n    } else {\n      // current range is relative\n      const relVal = timeRange as RelativeTimeRange;\n      extendEndsBy = fromDurationToMillis(relVal.pastDuration) / 2;\n      newEnd = typeof relVal.end === 'undefined' ? now : new Date(relVal.end.getTime() + extendEndsBy);\n      newStart = new Date(newEnd.getTime() - extendEndsBy * 4);\n    }\n    if (newEnd.getTime() > now.getTime()) {\n      // if the new computed end is in the future\n      newEnd = now;\n      newStart.setTime(now.getTime() - extendEndsBy * 4);\n    }\n    if (newStart.getTime() < 1) {\n      newStart.setTime(1);\n    }\n    return { start: newStart, end: newEnd };\n  };\n\n  // Function to half current time range, cutting 25% before current start and 25% after current end\n  const halfTimeRange = (): AbsoluteTimeRange => {\n    let newStart, newEnd;\n    if (Object.hasOwn(timeRange, 'start')) {\n      const absVal = timeRange as AbsoluteTimeRange;\n      const shrinkEndsBy = (absVal.end.getTime() - absVal.start.getTime()) / 4;\n      newStart = new Date(absVal.start.getTime() + shrinkEndsBy);\n      newEnd = new Date(absVal.end.getTime() - shrinkEndsBy);\n    } else {\n      const relVal = timeRange as RelativeTimeRange;\n      const shrinkEndsBy = fromDurationToMillis(relVal.pastDuration) / 4; // 25% of it to cut after current start and before current end\n      const endIsAbsolute = typeof relVal.end !== 'undefined';\n      newEnd = endIsAbsolute ? new Date(relVal.end!.getTime() - shrinkEndsBy) : new Date();\n      newStart = new Date(newEnd.getTime() - shrinkEndsBy * 2);\n    }\n    if (newStart.getTime() >= newEnd.getTime() - 1000) {\n      newStart.setTime(newEnd.getTime() - 1000);\n    }\n    return { start: newStart, end: newEnd };\n  };\n\n  const setHalfTimeRange = (): void => setTimeRange(halfTimeRange());\n  const setDoubleTimeRange = (): void => setTimeRange(doubleTimeRange());\n\n  return (\n    <Stack direction=\"row\" spacing={1}>\n      {showTimeRangeSelector && (\n        <TimeRangeSelector\n          timeOptions={timePresetsValue}\n          value={timeRange}\n          onChange={setTimeRange}\n          height={height}\n          showCustomTimeRange={showCustomTimeRangeValue}\n        />\n      )}\n      {showZoomInOutButtons && (\n        <InfoTooltip description={TOOLTIP_TEXT.zoomOut}>\n          <ToolbarIconButton aria-label={TOOLTIP_TEXT.zoomOut} onClick={setDoubleTimeRange} sx={{ height }}>\n            <ZoomOut />\n          </ToolbarIconButton>\n        </InfoTooltip>\n      )}\n      {showZoomInOutButtons && (\n        <InfoTooltip description={TOOLTIP_TEXT.zoomIn}>\n          <ToolbarIconButton aria-label={TOOLTIP_TEXT.zoomIn} onClick={setHalfTimeRange} sx={{ height }}>\n            <ZoomIn />\n          </ToolbarIconButton>\n        </InfoTooltip>\n      )}\n      {showRefreshButton && (\n        <InfoTooltip description={TOOLTIP_TEXT.refresh}>\n          <ToolbarIconButton aria-label={TOOLTIP_TEXT.refresh} onClick={refresh} sx={{ height }}>\n            <RefreshIcon />\n          </ToolbarIconButton>\n        </InfoTooltip>\n      )}\n      {showRefreshInterval && (\n        <InfoTooltip description={TOOLTIP_TEXT.refreshInterval}>\n          <RefreshIntervalPicker\n            timeOptions={DEFAULT_REFRESH_INTERVAL_OPTIONS}\n            value={refreshInterval}\n            onChange={handleRefreshIntervalChange}\n            height={height}\n          />\n        </InfoTooltip>\n      )}\n    </Stack>\n  );\n}\n"],"names":["RefreshIcon","ZoomIn","ZoomOut","Stack","RefreshIntervalPicker","InfoTooltip","ToolbarIconButton","TimeRangeSelector","buildRelativeTimeOption","parseDurationString","useCallback","TOOLTIP_TEXT","useTimeRange","useShowCustomTimeRangeSetting","useTimeRangeOptionsSetting","useShowZoomRangeSetting","DEFAULT_REFRESH_INTERVAL_OPTIONS","value","pastDuration","display","DEFAULT_HEIGHT","TimeRangeControls","heightPx","showTimeRangeSelector","showRefreshButton","showRefreshInterval","showCustomTimeRange","showZoomButtons","timePresets","timeRange","setTimeRange","refresh","refreshInterval","setRefreshInterval","showCustomTimeRangeValue","showZoomInOutButtons","timePresetsValue","height","undefined","some","option","push","handleRefreshIntervalChange","duration","fromDurationToMillis","strDuration","millis","seconds","minutes","hours","days","weeks","months","years","doubleTimeRange","newStart","newEnd","extendEndsBy","now","Date","Object","hasOwn","absVal","end","getTime","start","relVal","setTime","halfTimeRange","shrinkEndsBy","endIsAbsolute","setHalfTimeRange","setDoubleTimeRange","direction","spacing","timeOptions","onChange","description","zoomOut","aria-label","onClick","sx","zoomIn"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/TimeRangeControls/TimeRangeControls.tsx"],"sourcesContent":["// Copyright 2024 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport RefreshIcon from 'mdi-material-ui/Refresh';\n// eslint-disable-next-line import/no-duplicates\nimport ZoomIn from 'mdi-material-ui/PlusCircleOutline';\n// eslint-disable-next-line import/no-duplicates\nimport ZoomOut from 'mdi-material-ui/MinusCircleOutline';\nimport { Stack } from '@mui/material';\nimport {\n  RefreshIntervalPicker,\n  InfoTooltip,\n  TimeOption,\n  ToolbarIconButton,\n  TimeRangeSelector,\n  buildRelativeTimeOption,\n} from '@perses-dev/components';\nimport { AbsoluteTimeRange, DurationString, parseDurationString, RelativeTimeRange } from '@perses-dev/core';\nimport { ReactElement, useCallback } from 'react';\nimport { TOOLTIP_TEXT } from '../../constants';\nimport {\n  useTimeRange,\n  useShowCustomTimeRangeSetting,\n  useTimeRangeOptionsSetting,\n  useShowZoomRangeSetting,\n} from '../../runtime';\n\nexport const DEFAULT_REFRESH_INTERVAL_OPTIONS: TimeOption[] = [\n  { value: { pastDuration: '0s' }, display: 'Off' },\n  { value: { pastDuration: '5s' }, display: '5s' },\n  { value: { pastDuration: '10s' }, display: '10s' },\n  { value: { pastDuration: '15s' }, display: '15s' },\n  { value: { pastDuration: '30s' }, display: '30s' },\n  { value: { pastDuration: '60s' }, display: '1m' },\n];\n\nconst DEFAULT_HEIGHT = '34px';\n\ninterface TimeRangeControlsProps {\n  // The controls look best at heights >= 28 pixels\n  heightPx?: number;\n  showTimeRangeSelector?: boolean;\n  showRefreshButton?: boolean;\n  showRefreshInterval?: boolean;\n  showCustomTimeRange?: boolean;\n  showZoomButtons?: boolean;\n  timePresets?: TimeOption[];\n}\n\nexport function TimeRangeControls({\n  heightPx,\n  showTimeRangeSelector = true,\n  showRefreshButton = true,\n  showRefreshInterval = true,\n  showCustomTimeRange,\n  showZoomButtons = true,\n  timePresets,\n}: TimeRangeControlsProps): ReactElement {\n  const { timeRange, setTimeRange, refresh, refreshInterval, setRefreshInterval } = useTimeRange();\n\n  const showCustomTimeRangeValue = useShowCustomTimeRangeSetting(showCustomTimeRange);\n  const showZoomInOutButtons = useShowZoomRangeSetting(showZoomButtons);\n  const timePresetsValue = useTimeRangeOptionsSetting(timePresets);\n\n  // Convert height to a string, then use the string for styling\n  const height = heightPx === undefined ? DEFAULT_HEIGHT : `${heightPx}px`;\n\n  // add time preset if one does not match duration given in time range\n  if (\n    'pastDuration' in timeRange &&\n    !timePresetsValue.some((option) => option.value.pastDuration === timeRange['pastDuration'])\n  ) {\n    timePresetsValue.push(buildRelativeTimeOption(timeRange['pastDuration']));\n  }\n\n  // set the new refresh interval both in the dashboard context & as query param\n  const handleRefreshIntervalChange = useCallback(\n    (duration: DurationString) => {\n      setRefreshInterval(duration);\n    },\n    [setRefreshInterval]\n  );\n\n  const fromDurationToMillis = (strDuration: string): number => {\n    const duration = parseDurationString(strDuration);\n    const millis =\n      // eslint-disable-next-line prettier/prettier\n      ((duration.seconds ?? 0) +\n        (duration.minutes ?? 0) * 60 +\n        (duration.hours ?? 0) * 3600 +\n        (duration.days ?? 0) * 86400 +\n        (duration.weeks ?? 0) * 7 * 86400 +\n        (duration.months ?? 0) * 30.436875 * 86400 + // avg month duration is ok for zoom purposes\n        (duration.years ?? 0) * 365.2425 * 86400) * // avg year duration is ok for zoom purposes\n      // eslint-disable-next-line prettier/prettier\n      1000; // to milliseconds\n    return millis;\n  };\n\n  // Function to double current time range, adding 50% before current start and 50% after current end\n  const doubleTimeRange = (): AbsoluteTimeRange => {\n    let newStart, newEnd, extendEndsBy;\n    const now = new Date();\n    if (Object.hasOwn(timeRange, 'start')) {\n      // current range is absolute\n      const absVal = timeRange as AbsoluteTimeRange;\n      extendEndsBy = (absVal.end.getTime() - absVal.start.getTime()) / 2; // half it to add 50% before current start and after current end\n      newStart = new Date(absVal.start.getTime() - extendEndsBy);\n      newEnd = new Date(absVal.end.getTime() + extendEndsBy);\n    } else {\n      // current range is relative\n      const relVal = timeRange as RelativeTimeRange;\n      extendEndsBy = fromDurationToMillis(relVal.pastDuration) / 2;\n      newEnd = typeof relVal.end === 'undefined' ? now : new Date(relVal.end.getTime() + extendEndsBy);\n      newStart = new Date(newEnd.getTime() - extendEndsBy * 4);\n    }\n    if (newEnd.getTime() > now.getTime()) {\n      // if the new computed end is in the future\n      newEnd = now;\n      newStart.setTime(now.getTime() - extendEndsBy * 4);\n    }\n    if (newStart.getTime() < 1) {\n      newStart.setTime(1);\n    }\n    return { start: newStart, end: newEnd };\n  };\n\n  // Function to half current time range, cutting 25% before current start and 25% after current end\n  const halfTimeRange = (): AbsoluteTimeRange => {\n    let newStart, newEnd;\n    if (Object.hasOwn(timeRange, 'start')) {\n      const absVal = timeRange as AbsoluteTimeRange;\n      const shrinkEndsBy = (absVal.end.getTime() - absVal.start.getTime()) / 4;\n      newStart = new Date(absVal.start.getTime() + shrinkEndsBy);\n      newEnd = new Date(absVal.end.getTime() - shrinkEndsBy);\n    } else {\n      const relVal = timeRange as RelativeTimeRange;\n      const shrinkEndsBy = fromDurationToMillis(relVal.pastDuration) / 4; // 25% of it to cut after current start and before current end\n      const endIsAbsolute = typeof relVal.end !== 'undefined';\n      newEnd = endIsAbsolute ? new Date(relVal.end!.getTime() - shrinkEndsBy) : new Date();\n      newStart = new Date(newEnd.getTime() - shrinkEndsBy * 2);\n    }\n    if (newStart.getTime() >= newEnd.getTime() - 1000) {\n      newStart.setTime(newEnd.getTime() - 1000);\n    }\n    return { start: newStart, end: newEnd };\n  };\n\n  const setHalfTimeRange = (): void => setTimeRange(halfTimeRange());\n  const setDoubleTimeRange = (): void => setTimeRange(doubleTimeRange());\n\n  return (\n    <Stack direction=\"row\" spacing={1}>\n      {showTimeRangeSelector && (\n        <TimeRangeSelector\n          timeOptions={timePresetsValue}\n          value={timeRange}\n          onChange={setTimeRange}\n          height={height}\n          showCustomTimeRange={showCustomTimeRangeValue}\n        />\n      )}\n      {showZoomInOutButtons && (\n        <InfoTooltip description={TOOLTIP_TEXT.zoomOut}>\n          <ToolbarIconButton aria-label={TOOLTIP_TEXT.zoomOut} onClick={setDoubleTimeRange} sx={{ height }}>\n            <ZoomOut />\n          </ToolbarIconButton>\n        </InfoTooltip>\n      )}\n      {showZoomInOutButtons && (\n        <InfoTooltip description={TOOLTIP_TEXT.zoomIn}>\n          <ToolbarIconButton aria-label={TOOLTIP_TEXT.zoomIn} onClick={setHalfTimeRange} sx={{ height }}>\n            <ZoomIn />\n          </ToolbarIconButton>\n        </InfoTooltip>\n      )}\n      {showRefreshButton && (\n        <InfoTooltip description={TOOLTIP_TEXT.refresh}>\n          <ToolbarIconButton aria-label={TOOLTIP_TEXT.refresh} onClick={refresh} sx={{ height }}>\n            <RefreshIcon />\n          </ToolbarIconButton>\n        </InfoTooltip>\n      )}\n      {showRefreshInterval && (\n        <InfoTooltip description={TOOLTIP_TEXT.refreshInterval}>\n          <RefreshIntervalPicker\n            timeOptions={DEFAULT_REFRESH_INTERVAL_OPTIONS}\n            value={refreshInterval}\n            onChange={handleRefreshIntervalChange}\n            height={height}\n          />\n        </InfoTooltip>\n      )}\n    </Stack>\n  );\n}\n"],"names":["RefreshIcon","ZoomIn","ZoomOut","Stack","RefreshIntervalPicker","InfoTooltip","ToolbarIconButton","TimeRangeSelector","buildRelativeTimeOption","parseDurationString","useCallback","TOOLTIP_TEXT","useTimeRange","useShowCustomTimeRangeSetting","useTimeRangeOptionsSetting","useShowZoomRangeSetting","DEFAULT_REFRESH_INTERVAL_OPTIONS","value","pastDuration","display","DEFAULT_HEIGHT","TimeRangeControls","heightPx","showTimeRangeSelector","showRefreshButton","showRefreshInterval","showCustomTimeRange","showZoomButtons","timePresets","timeRange","setTimeRange","refresh","refreshInterval","setRefreshInterval","showCustomTimeRangeValue","showZoomInOutButtons","timePresetsValue","height","undefined","some","option","push","handleRefreshIntervalChange","duration","fromDurationToMillis","strDuration","millis","seconds","minutes","hours","days","weeks","months","years","doubleTimeRange","newStart","newEnd","extendEndsBy","now","Date","Object","hasOwn","absVal","end","getTime","start","relVal","setTime","halfTimeRange","shrinkEndsBy","endIsAbsolute","setHalfTimeRange","setDoubleTimeRange","direction","spacing","timeOptions","onChange","description","zoomOut","aria-label","onClick","sx","zoomIn"],"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,OAAOA,iBAAiB,0BAA0B;AAClD,gDAAgD;AAChD,OAAOC,YAAY,oCAAoC;AACvD,gDAAgD;AAChD,OAAOC,aAAa,qCAAqC;AACzD,SAASC,KAAK,QAAQ,gBAAgB;AACtC,SACEC,qBAAqB,EACrBC,WAAW,EAEXC,iBAAiB,EACjBC,iBAAiB,EACjBC,uBAAuB,QAClB,yBAAyB;AAChC,SAA4CC,mBAAmB,QAA2B,mBAAmB;AAC7G,SAAuBC,WAAW,QAAQ,QAAQ;AAClD,SAASC,YAAY,QAAQ,kBAAkB;AAC/C,SACEC,YAAY,EACZC,6BAA6B,EAC7BC,0BAA0B,EAC1BC,uBAAuB,QAClB,gBAAgB;AAEvB,OAAO,MAAMC,mCAAiD;IAC5D;QAAEC,OAAO;YAAEC,cAAc;QAAK;QAAGC,SAAS;IAAM;IAChD;QAAEF,OAAO;YAAEC,cAAc;QAAK;QAAGC,SAAS;IAAK;IAC/C;QAAEF,OAAO;YAAEC,cAAc;QAAM;QAAGC,SAAS;IAAM;IACjD;QAAEF,OAAO;YAAEC,cAAc;QAAM;QAAGC,SAAS;IAAM;IACjD;QAAEF,OAAO;YAAEC,cAAc;QAAM;QAAGC,SAAS;IAAM;IACjD;QAAEF,OAAO;YAAEC,cAAc;QAAM;QAAGC,SAAS;IAAK;CACjD,CAAC;AAEF,MAAMC,iBAAiB;AAavB,OAAO,SAASC,kBAAkB,EAChCC,QAAQ,EACRC,wBAAwB,IAAI,EAC5BC,oBAAoB,IAAI,EACxBC,sBAAsB,IAAI,EAC1BC,mBAAmB,EACnBC,kBAAkB,IAAI,EACtBC,WAAW,EACY;IACvB,MAAM,EAAEC,SAAS,EAAEC,YAAY,EAAEC,OAAO,EAAEC,eAAe,EAAEC,kBAAkB,EAAE,GAAGrB;IAElF,MAAMsB,2BAA2BrB,8BAA8Ba;IAC/D,MAAMS,uBAAuBpB,wBAAwBY;IACrD,MAAMS,mBAAmBtB,2BAA2Bc;IAEpD,8DAA8D;IAC9D,MAAMS,SAASf,aAAagB,YAAYlB,iBAAiB,GAAGE,SAAS,EAAE,CAAC;IAExE,qEAAqE;IACrE,IACE,kBAAkBO,aAClB,CAACO,iBAAiBG,IAAI,CAAC,CAACC,SAAWA,OAAOvB,KAAK,CAACC,YAAY,KAAKW,SAAS,CAAC,eAAe,GAC1F;QACAO,iBAAiBK,IAAI,CAACjC,wBAAwBqB,SAAS,CAAC,eAAe;IACzE;IAEA,8EAA8E;IAC9E,MAAMa,8BAA8BhC,YAClC,CAACiC;QACCV,mBAAmBU;IACrB,GACA;QAACV;KAAmB;IAGtB,MAAMW,uBAAuB,CAACC;QAC5B,MAAMF,WAAWlC,oBAAoBoC;QACrC,MAAMC,SAEJ,AADA,6CAA6C;QAC5C,CAAA,AAACH,CAAAA,SAASI,OAAO,IAAI,CAAA,IACpB,AAACJ,CAAAA,SAASK,OAAO,IAAI,CAAA,IAAK,KAC1B,AAACL,CAAAA,SAASM,KAAK,IAAI,CAAA,IAAK,OACxB,AAACN,CAAAA,SAASO,IAAI,IAAI,CAAA,IAAK,QACvB,AAACP,CAAAA,SAASQ,KAAK,IAAI,CAAA,IAAK,IAAI,QAC5B,AAACR,CAAAA,SAASS,MAAM,IAAI,CAAA,IAAK,YAAY,QACrC,AAD6C,6CAA6C;QACzFT,CAAAA,SAASU,KAAK,IAAI,CAAA,IAAK,WAAW,KAAI,IAAK,4CAA4C;QAC1F,6CAA6C;QAC7C,MAAM,kBAAkB;QAC1B,OAAOP;IACT;IAEA,mGAAmG;IACnG,MAAMQ,kBAAkB;QACtB,IAAIC,UAAUC,QAAQC;QACtB,MAAMC,MAAM,IAAIC;QAChB,IAAIC,OAAOC,MAAM,CAAChC,WAAW,UAAU;YACrC,4BAA4B;YAC5B,MAAMiC,SAASjC;YACf4B,eAAe,AAACK,CAAAA,OAAOC,GAAG,CAACC,OAAO,KAAKF,OAAOG,KAAK,CAACD,OAAO,EAAC,IAAK,GAAG,gEAAgE;YACpIT,WAAW,IAAII,KAAKG,OAAOG,KAAK,CAACD,OAAO,KAAKP;YAC7CD,SAAS,IAAIG,KAAKG,OAAOC,GAAG,CAACC,OAAO,KAAKP;QAC3C,OAAO;YACL,4BAA4B;YAC5B,MAAMS,SAASrC;YACf4B,eAAeb,qBAAqBsB,OAAOhD,YAAY,IAAI;YAC3DsC,SAAS,OAAOU,OAAOH,GAAG,KAAK,cAAcL,MAAM,IAAIC,KAAKO,OAAOH,GAAG,CAACC,OAAO,KAAKP;YACnFF,WAAW,IAAII,KAAKH,OAAOQ,OAAO,KAAKP,eAAe;QACxD;QACA,IAAID,OAAOQ,OAAO,KAAKN,IAAIM,OAAO,IAAI;YACpC,2CAA2C;YAC3CR,SAASE;YACTH,SAASY,OAAO,CAACT,IAAIM,OAAO,KAAKP,eAAe;QAClD;QACA,IAAIF,SAASS,OAAO,KAAK,GAAG;YAC1BT,SAASY,OAAO,CAAC;QACnB;QACA,OAAO;YAAEF,OAAOV;YAAUQ,KAAKP;QAAO;IACxC;IAEA,kGAAkG;IAClG,MAAMY,gBAAgB;QACpB,IAAIb,UAAUC;QACd,IAAII,OAAOC,MAAM,CAAChC,WAAW,UAAU;YACrC,MAAMiC,SAASjC;YACf,MAAMwC,eAAe,AAACP,CAAAA,OAAOC,GAAG,CAACC,OAAO,KAAKF,OAAOG,KAAK,CAACD,OAAO,EAAC,IAAK;YACvET,WAAW,IAAII,KAAKG,OAAOG,KAAK,CAACD,OAAO,KAAKK;YAC7Cb,SAAS,IAAIG,KAAKG,OAAOC,GAAG,CAACC,OAAO,KAAKK;QAC3C,OAAO;YACL,MAAMH,SAASrC;YACf,MAAMwC,eAAezB,qBAAqBsB,OAAOhD,YAAY,IAAI,GAAG,8DAA8D;YAClI,MAAMoD,gBAAgB,OAAOJ,OAAOH,GAAG,KAAK;YAC5CP,SAASc,gBAAgB,IAAIX,KAAKO,OAAOH,GAAG,CAAEC,OAAO,KAAKK,gBAAgB,IAAIV;YAC9EJ,WAAW,IAAII,KAAKH,OAAOQ,OAAO,KAAKK,eAAe;QACxD;QACA,IAAId,SAASS,OAAO,MAAMR,OAAOQ,OAAO,KAAK,MAAM;YACjDT,SAASY,OAAO,CAACX,OAAOQ,OAAO,KAAK;QACtC;QACA,OAAO;YAAEC,OAAOV;YAAUQ,KAAKP;QAAO;IACxC;IAEA,MAAMe,mBAAmB,IAAYzC,aAAasC;IAClD,MAAMI,qBAAqB,IAAY1C,aAAawB;IAEpD,qBACE,MAACnD;QAAMsE,WAAU;QAAMC,SAAS;;YAC7BnD,uCACC,KAAChB;gBACCoE,aAAavC;gBACbnB,OAAOY;gBACP+C,UAAU9C;gBACVO,QAAQA;gBACRX,qBAAqBQ;;YAGxBC,sCACC,KAAC9B;gBAAYwE,aAAalE,aAAamE,OAAO;0BAC5C,cAAA,KAACxE;oBAAkByE,cAAYpE,aAAamE,OAAO;oBAAEE,SAASR;oBAAoBS,IAAI;wBAAE5C;oBAAO;8BAC7F,cAAA,KAACnC;;;YAINiC,sCACC,KAAC9B;gBAAYwE,aAAalE,aAAauE,MAAM;0BAC3C,cAAA,KAAC5E;oBAAkByE,cAAYpE,aAAauE,MAAM;oBAAEF,SAAST;oBAAkBU,IAAI;wBAAE5C;oBAAO;8BAC1F,cAAA,KAACpC;;;YAINuB,mCACC,KAACnB;gBAAYwE,aAAalE,aAAaoB,OAAO;0BAC5C,cAAA,KAACzB;oBAAkByE,cAAYpE,aAAaoB,OAAO;oBAAEiD,SAASjD;oBAASkD,IAAI;wBAAE5C;oBAAO;8BAClF,cAAA,KAACrC;;;YAINyB,qCACC,KAACpB;gBAAYwE,aAAalE,aAAaqB,eAAe;0BACpD,cAAA,KAAC5B;oBACCuE,aAAa3D;oBACbC,OAAOe;oBACP4C,UAAUlC;oBACVL,QAAQA;;;;;AAMpB"}