@perses-dev/plugin-system 0.54.0-beta.4 → 0.54.0-beta.6

package/dist/cjs/runtime/annotations.js

@@ -0,0 +1,148 @@
+// Copyright The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: Object.getOwnPropertyDescriptor(all, name).get
+    });
+}
+_export(exports, {
+    get ANNOTATION_KEY () {
+        return ANNOTATION_KEY;
+    },
+    get useAnnotationData () {
+        return useAnnotationData;
+    },
+    get useAnnotations () {
+        return useAnnotations;
+    }
+});
+const _reactquery = require("@tanstack/react-query");
+const _pluginregistry = require("./plugin-registry");
+const _TimeRangeProvider = require("./TimeRangeProvider");
+const _variables = require("./variables");
+const _datasources = require("./datasources");
+const _utils = require("./utils");
+const ANNOTATION_KEY = 'Annotation';
+function useAnnotationContext() {
+    const { absoluteTimeRange } = (0, _TimeRangeProvider.useTimeRange)();
+    const variableState = (0, _variables.useAllVariableValues)();
+    const datasourceStore = (0, _datasources.useDatasourceStore)();
+    return {
+        variableState,
+        datasourceStore,
+        absoluteTimeRange
+    };
+}
+function getQueryOptions({ plugin, definition, context }) {
+    const { variableState, absoluteTimeRange } = context;
+    const dependencies = plugin?.dependsOn ? plugin.dependsOn(definition.plugin.spec, context) : {};
+    const variableDependencies = dependencies?.variables;
+    const filteredVariableState = (0, _utils.filterVariableStateMap)(variableState, variableDependencies);
+    const variablesValueKey = (0, _utils.getVariableValuesKey)(filteredVariableState);
+    const queryKey = [
+        ANNOTATION_KEY,
+        definition,
+        absoluteTimeRange,
+        variablesValueKey
+    ];
+    let waitToLoad = false;
+    if (variableDependencies) {
+        waitToLoad = variableDependencies.some((v)=>variableState[v]?.loading);
+    }
+    const queryEnabled = plugin !== undefined && !waitToLoad;
+    return {
+        queryKey,
+        queryEnabled
+    };
+}
+function useAnnotations(definitions) {
+    const { getPlugin } = (0, _pluginregistry.usePluginRegistry)();
+    const context = useAnnotationContext();
+    const pluginLoaderResponse = (0, _pluginregistry.usePlugins)('Annotation', definitions.map((d)=>({
+            kind: d.plugin.kind
+        })));
+    // useQueries() handles data fetching from query plugins
+    return (0, _reactquery.useQueries)({
+        queries: definitions.map((definition, idx)=>{
+            const plugin = pluginLoaderResponse[idx]?.data;
+            const { queryEnabled, queryKey } = getQueryOptions({
+                context,
+                definition,
+                plugin
+            });
+            const annotationKind = definition?.plugin?.kind;
+            return {
+                enabled: queryEnabled,
+                queryKey: queryKey,
+                refetchOnMount: false,
+                refetchOnWindowFocus: false,
+                refetchOnReconnect: false,
+                staleTime: Infinity,
+                queryFn: async ({ signal })=>{
+                    const plugin = await getPlugin({
+                        kind: ANNOTATION_KEY,
+                        name: annotationKind
+                    });
+                    const data = await plugin.getAnnotationData(definition.plugin.spec, context, signal);
+                    return data;
+                }
+            };
+        })
+    });
+}
+function useAnnotationData(spec) {
+    const { data: annotationPlugin } = (0, _pluginregistry.usePlugin)('Annotation', spec.plugin.kind);
+    const datasourceStore = (0, _datasources.useDatasourceStore)();
+    const allVariables = (0, _variables.useAllVariableValues)();
+    const { absoluteTimeRange: timeRange } = (0, _TimeRangeProvider.useTimeRange)();
+    const variablePluginCtx = {
+        absoluteTimeRange: timeRange,
+        datasourceStore,
+        variableState: allVariables
+    };
+    let dependsOnVariables = Object.keys(allVariables); // Default to all variables
+    if (annotationPlugin?.dependsOn) {
+        const dependencies = annotationPlugin.dependsOn(spec.plugin.spec, variablePluginCtx);
+        dependsOnVariables = dependencies.variables ? dependencies.variables : dependsOnVariables;
+    }
+    const variables = (0, _variables.useAllVariableValues)(dependsOnVariables);
+    let waitToLoad = false;
+    if (dependsOnVariables) {
+        waitToLoad = dependsOnVariables.some((v)=>variables[v]?.loading);
+    }
+    const variablesValueKey = (0, _utils.getVariableValuesKey)(variables);
+    return (0, _reactquery.useQuery)({
+        queryKey: [
+            'annotation',
+            spec,
+            timeRange,
+            variablesValueKey
+        ],
+        queryFn: async ({ signal })=>{
+            const resp = await annotationPlugin?.getAnnotationData(spec.plugin.spec, {
+                ...variablePluginCtx,
+                variableState: variables
+            }, signal);
+            if (!resp?.length) {
+                return [];
+            }
+            return resp;
+        },
+        enabled: !!annotationPlugin || waitToLoad
+    });
+}

package/dist/cjs/runtime/index.js

@@ -14,6 +14,7 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
+_export_star(require("./annotations"), exports);
 _export_star(require("./builtin-variables"), exports);
 _export_star(require("./datasources"), exports);
 _export_star(require("./plugin-registry"), exports);

package/dist/components/Annotations/AnnotationEditorForm/AnnotationEditorForm.d.ts

@@ -0,0 +1,16 @@
+import { DispatchWithoutAction, ReactElement } from 'react';
+import { AnnotationSpec } from '@perses-dev/spec';
+import { Action } from '@perses-dev/components';
+interface AnnotationEditorFormProps {
+    initialAnnotationSpec: AnnotationSpec;
+    action: Action;
+    isDraft: boolean;
+    isReadonly?: boolean;
+    onActionChange?: (action: Action) => void;
+    onSave: (def: AnnotationSpec) => void;
+    onClose: () => void;
+    onDelete?: DispatchWithoutAction;
+}
+export declare function AnnotationEditorForm({ initialAnnotationSpec, action, isDraft, isReadonly, onActionChange, onSave, onClose, onDelete, }: AnnotationEditorFormProps): ReactElement;
+export {};
+//# sourceMappingURL=AnnotationEditorForm.d.ts.map

package/dist/components/Annotations/AnnotationEditorForm/AnnotationEditorForm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnnotationEditorForm.d.ts","sourceRoot":"","sources":["../../../../src/components/Annotations/AnnotationEditorForm/AnnotationEditorForm.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,qBAAqB,EAAE,YAAY,EAAyB,MAAM,OAAO,CAAC;AAEnF,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAML,MAAM,EAGP,MAAM,wBAAwB,CAAC;AAwDhC,UAAU,yBAAyB;IACjC,qBAAqB,EAAE,cAAc,CAAC;IACtC,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,MAAM,EAAE,CAAC,GAAG,EAAE,cAAc,KAAK,IAAI,CAAC;IACtC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,qBAAqB,CAAC;CAClC;AAED,wBAAgB,oBAAoB,CAAC,EACnC,qBAAqB,EACrB,MAAM,EACN,OAAO,EACP,UAAU,EACV,cAAc,EACd,MAAM,EACN,OAAO,EACP,QAAQ,GACT,EAAE,yBAAyB,GAAG,YAAY,CAuK1C"}

package/dist/components/Annotations/AnnotationEditorForm/AnnotationEditorForm.js

@@ -0,0 +1,270 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// Copyright The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { useCallback, useState } from 'react';
+import { Box, Typography, TextField, Grid, Divider, Stack, IconButton } from '@mui/material';
+import { DiscardChangesConfirmationDialog, ErrorAlert, ErrorBoundary, FormActions, OptionsColorPicker, getSubmitText, getTitleAction } from '@perses-dev/components';
+import { Controller, FormProvider, useForm, useWatch } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useQueryClient } from '@tanstack/react-query';
+import InvertColorsIcon from 'mdi-material-ui/InvertColors';
+import { PluginEditor } from '../../PluginEditor';
+import { useValidationSchemas } from '../../../context';
+import { AnnotationPreview } from './AnnotationPreview';
+const DEFAULT_ANNOTATION_COLOR = '#FF6B6B';
+function FallbackPreview() {
+    return /*#__PURE__*/ _jsx("div", {
+        children: "Error previewing annotations"
+    });
+}
+function AnnotationPluginControl({ action, control, onRunQuery }) {
+    const plugin = useWatch({
+        control,
+        name: 'plugin'
+    });
+    const kind = plugin?.kind;
+    const pluginSpec = plugin?.spec;
+    return /*#__PURE__*/ _jsx(Controller, {
+        control: control,
+        name: "plugin",
+        render: ({ field })=>{
+            return /*#__PURE__*/ _jsx(PluginEditor, {
+                withRunQueryButton: true,
+                width: "100%",
+                pluginTypes: [
+                    'Annotation'
+                ],
+                pluginKindLabel: "Source",
+                value: {
+                    selection: {
+                        type: 'Annotation',
+                        kind: kind ?? 'StaticListAnnotation'
+                    },
+                    spec: pluginSpec ?? {}
+                },
+                isReadonly: action === 'read',
+                onChange: (v)=>{
+                    field.onChange({
+                        kind: v.selection.kind,
+                        spec: v.spec
+                    });
+                },
+                onRunQuery: onRunQuery
+            });
+        }
+    });
+}
+export function AnnotationEditorForm({ initialAnnotationSpec, action, isDraft, isReadonly, onActionChange, onSave, onClose, onDelete }) {
+    const queryClient = useQueryClient();
+    const [isDiscardDialogOpened, setDiscardDialogOpened] = useState(false);
+    const titleAction = getTitleAction(action, isDraft);
+    const submitText = getSubmitText(action, isDraft);
+    const { annotationEditorSchema } = useValidationSchemas();
+    const form = useForm({
+        resolver: zodResolver(annotationEditorSchema),
+        mode: 'onBlur',
+        defaultValues: initialAnnotationSpec
+    });
+    /* We use `previewDefinition` to explicitly update the spec
+   * that will be used for preview when running query. The reason why we do this is to avoid
+   * having to re-fetch the values when the user is still editing the spec.
+   * Using structuredClone to not have reference issues with nested objects.
+   */ const [previewSpec, setPreviewSpec] = useState(structuredClone(form.getValues()));
+    const handleRunQuery = useCallback(async ()=>{
+        const values = form.getValues();
+        if (JSON.stringify(previewSpec) === JSON.stringify(values)) {
+            await queryClient.invalidateQueries({
+                queryKey: [
+                    'annotation',
+                    previewSpec
+                ]
+            });
+        } else {
+            setPreviewSpec(structuredClone(values));
+        }
+    }, [
+        form,
+        previewSpec,
+        queryClient
+    ]);
+    const processForm = (data)=>{
+        // reset display attributes to undefined when empty, because we don't want to save empty strings
+        onSave(data);
+    };
+    function handleCancel() {
+        if (JSON.stringify(initialAnnotationSpec) !== JSON.stringify(form.getValues())) {
+            setDiscardDialogOpened(true);
+        } else {
+            onClose();
+        }
+    }
+    return /*#__PURE__*/ _jsxs(FormProvider, {
+        ...form,
+        children: [
+            /*#__PURE__*/ _jsxs(Box, {
+                sx: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    padding: (theme)=>theme.spacing(1, 2),
+                    borderBottom: (theme)=>`1px solid ${theme.palette.divider}`
+                },
+                children: [
+                    /*#__PURE__*/ _jsxs(Typography, {
+                        variant: "h2",
+                        children: [
+                            titleAction,
+                            " Annotation"
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx(FormActions, {
+                        action: action,
+                        submitText: submitText,
+                        isReadonly: isReadonly,
+                        isValid: form.formState.isValid,
+                        onActionChange: onActionChange,
+                        onSubmit: form.handleSubmit(processForm),
+                        onDelete: onDelete,
+                        onCancel: handleCancel
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs(Box, {
+                padding: 2,
+                sx: {
+                    overflowY: 'scroll'
+                },
+                children: [
+                    /*#__PURE__*/ _jsxs(Grid, {
+                        container: true,
+                        spacing: 2,
+                        mb: 2,
+                        children: [
+                            /*#__PURE__*/ _jsx(Grid, {
+                                item: true,
+                                xs: 12,
+                                children: /*#__PURE__*/ _jsx(Controller, {
+                                    control: form.control,
+                                    name: "display.name",
+                                    render: ({ field, fieldState })=>/*#__PURE__*/ _jsx(TextField, {
+                                            ...field,
+                                            required: true,
+                                            fullWidth: true,
+                                            label: "Name",
+                                            InputLabelProps: {
+                                                shrink: action === 'read' ? true : undefined
+                                            },
+                                            InputProps: {
+                                                disabled: action === 'update' && !isDraft,
+                                                readOnly: action === 'read'
+                                            },
+                                            error: !!fieldState.error,
+                                            helperText: fieldState.error?.message,
+                                            value: field.value ?? '',
+                                            onChange: (event)=>{
+                                                field.onChange(event);
+                                            }
+                                        })
+                                })
+                            }),
+                            /*#__PURE__*/ _jsx(Grid, {
+                                item: true,
+                                xs: 12,
+                                children: /*#__PURE__*/ _jsxs(Stack, {
+                                    direction: "row",
+                                    gap: 1,
+                                    children: [
+                                        /*#__PURE__*/ _jsx(Controller, {
+                                            control: form.control,
+                                            name: "display.color",
+                                            render: ({ field })=>{
+                                                const isEnabled = field.value !== undefined;
+                                                return /*#__PURE__*/ _jsx(_Fragment, {
+                                                    children: isEnabled ? /*#__PURE__*/ _jsx(OptionsColorPicker, {
+                                                        size: "medium",
+                                                        label: "annotation",
+                                                        color: field.value ?? DEFAULT_ANNOTATION_COLOR,
+                                                        onColorChange: (color)=>field.onChange(color),
+                                                        onClear: ()=>field.onChange(undefined)
+                                                    }) : /*#__PURE__*/ _jsx(IconButton, {
+                                                        size: "medium",
+                                                        onClick: ()=>field.onChange(DEFAULT_ANNOTATION_COLOR),
+                                                        children: /*#__PURE__*/ _jsx(InvertColorsIcon, {})
+                                                    })
+                                                });
+                                            }
+                                        }),
+                                        /*#__PURE__*/ _jsx(Controller, {
+                                            control: form.control,
+                                            name: "display.description",
+                                            render: ({ field, fieldState })=>/*#__PURE__*/ _jsx(TextField, {
+                                                    ...field,
+                                                    fullWidth: true,
+                                                    label: "Description",
+                                                    InputLabelProps: {
+                                                        shrink: action === 'read' ? true : undefined
+                                                    },
+                                                    InputProps: {
+                                                        readOnly: action === 'read'
+                                                    },
+                                                    error: !!fieldState.error,
+                                                    helperText: fieldState.error?.message,
+                                                    value: field.value ?? '',
+                                                    onChange: (event)=>{
+                                                        field.onChange(event);
+                                                    }
+                                                })
+                                        })
+                                    ]
+                                })
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx(Divider, {}),
+                    /*#__PURE__*/ _jsx(ErrorBoundary, {
+                        FallbackComponent: FallbackPreview,
+                        resetKeys: [
+                            previewSpec
+                        ],
+                        children: /*#__PURE__*/ _jsx(AnnotationPreview, {
+                            spec: previewSpec,
+                            sx: {
+                                marginY: 2
+                            }
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(ErrorBoundary, {
+                        FallbackComponent: ErrorAlert,
+                        children: /*#__PURE__*/ _jsx(AnnotationPluginControl, {
+                            action: action,
+                            control: form.control,
+                            onRunQuery: handleRunQuery
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx(DiscardChangesConfirmationDialog, {
+                description: "Are you sure you want to discard these changes? Changes cannot be recovered.",
+                isOpen: isDiscardDialogOpened,
+                onCancel: ()=>{
+                    setDiscardDialogOpened(false);
+                },
+                onDiscardChanges: ()=>{
+                    setDiscardDialogOpened(false);
+                    onClose();
+                }
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=AnnotationEditorForm.js.map

package/dist/components/Annotations/AnnotationEditorForm/AnnotationEditorForm.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/Annotations/AnnotationEditorForm/AnnotationEditorForm.tsx"],"sourcesContent":["// Copyright 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 { DispatchWithoutAction, ReactElement, useCallback, useState } from 'react';\nimport { Box, Typography, TextField, Grid, Divider, Stack, IconButton } from '@mui/material';\nimport { AnnotationSpec } from '@perses-dev/spec';\nimport {\n  DiscardChangesConfirmationDialog,\n  ErrorAlert,\n  ErrorBoundary,\n  FormActions,\n  OptionsColorPicker,\n  Action,\n  getSubmitText,\n  getTitleAction,\n} from '@perses-dev/components';\nimport { Control, Controller, FormProvider, SubmitHandler, useForm, useWatch } from 'react-hook-form';\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport { useQueryClient } from '@tanstack/react-query';\nimport InvertColorsIcon from 'mdi-material-ui/InvertColors';\nimport { PluginEditor } from '../../PluginEditor';\nimport { useValidationSchemas } from '../../../context';\nimport { AnnotationPreview } from './AnnotationPreview';\n\nconst DEFAULT_ANNOTATION_COLOR = '#FF6B6B';\n\nfunction FallbackPreview(): ReactElement {\n  return <div>Error previewing annotations</div>;\n}\n\ninterface KindAnnotationEditorFormProps {\n  action: Action;\n  control: Control<AnnotationSpec>;\n  onRunQuery: () => void;\n}\n\nfunction AnnotationPluginControl({ action, control, onRunQuery }: KindAnnotationEditorFormProps): ReactElement {\n  const plugin = useWatch<AnnotationSpec, 'plugin'>({ control, name: 'plugin' });\n  const kind = plugin?.kind;\n  const pluginSpec = plugin?.spec;\n\n  return (\n    <Controller\n      control={control}\n      name=\"plugin\"\n      render={({ field }) => {\n        return (\n          <PluginEditor\n            withRunQueryButton\n            width=\"100%\"\n            pluginTypes={['Annotation']}\n            pluginKindLabel=\"Source\"\n            value={{\n              selection: {\n                type: 'Annotation',\n                kind: kind ?? 'StaticListAnnotation',\n              },\n              spec: pluginSpec ?? {},\n            }}\n            isReadonly={action === 'read'}\n            onChange={(v) => {\n              field.onChange({ kind: v.selection.kind, spec: v.spec });\n            }}\n            onRunQuery={onRunQuery}\n          />\n        );\n      }}\n    />\n  );\n}\n\ninterface AnnotationEditorFormProps {\n  initialAnnotationSpec: AnnotationSpec;\n  action: Action;\n  isDraft: boolean;\n  isReadonly?: boolean;\n  onActionChange?: (action: Action) => void;\n  onSave: (def: AnnotationSpec) => void;\n  onClose: () => void;\n  onDelete?: DispatchWithoutAction;\n}\n\nexport function AnnotationEditorForm({\n  initialAnnotationSpec,\n  action,\n  isDraft,\n  isReadonly,\n  onActionChange,\n  onSave,\n  onClose,\n  onDelete,\n}: AnnotationEditorFormProps): ReactElement {\n  const queryClient = useQueryClient();\n\n  const [isDiscardDialogOpened, setDiscardDialogOpened] = useState<boolean>(false);\n  const titleAction = getTitleAction(action, isDraft);\n  const submitText = getSubmitText(action, isDraft);\n\n  const { annotationEditorSchema } = useValidationSchemas();\n  const form = useForm<AnnotationSpec>({\n    resolver: zodResolver(annotationEditorSchema),\n    mode: 'onBlur',\n    defaultValues: initialAnnotationSpec,\n  });\n\n  /* We use `previewDefinition` to explicitly update the spec\n   * that will be used for preview when running query. The reason why we do this is to avoid\n   * having to re-fetch the values when the user is still editing the spec.\n   * Using structuredClone to not have reference issues with nested objects.\n   */\n  const [previewSpec, setPreviewSpec] = useState(structuredClone(form.getValues()));\n\n  const handleRunQuery = useCallback(async () => {\n    const values = form.getValues();\n    if (JSON.stringify(previewSpec) === JSON.stringify(values)) {\n      await queryClient.invalidateQueries({ queryKey: ['annotation', previewSpec] });\n    } else {\n      setPreviewSpec(structuredClone(values));\n    }\n  }, [form, previewSpec, queryClient]);\n\n  const processForm: SubmitHandler<AnnotationSpec> = (data: AnnotationSpec) => {\n    // reset display attributes to undefined when empty, because we don't want to save empty strings\n    onSave(data);\n  };\n\n  function handleCancel(): void {\n    if (JSON.stringify(initialAnnotationSpec) !== JSON.stringify(form.getValues())) {\n      setDiscardDialogOpened(true);\n    } else {\n      onClose();\n    }\n  }\n\n  return (\n    <FormProvider {...form}>\n      <Box\n        sx={{\n          display: 'flex',\n          alignItems: 'center',\n          padding: (theme) => theme.spacing(1, 2),\n          borderBottom: (theme) => `1px solid ${theme.palette.divider}`,\n        }}\n      >\n        <Typography variant=\"h2\">{titleAction} Annotation</Typography>\n        <FormActions\n          action={action}\n          submitText={submitText}\n          isReadonly={isReadonly}\n          isValid={form.formState.isValid}\n          onActionChange={onActionChange}\n          onSubmit={form.handleSubmit(processForm)}\n          onDelete={onDelete}\n          onCancel={handleCancel}\n        />\n      </Box>\n      <Box padding={2} sx={{ overflowY: 'scroll' }}>\n        <Grid container spacing={2} mb={2}>\n          <Grid item xs={12}>\n            <Controller\n              control={form.control}\n              name=\"display.name\"\n              render={({ field, fieldState }) => (\n                <TextField\n                  {...field}\n                  required\n                  fullWidth\n                  label=\"Name\"\n                  InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n                  InputProps={{\n                    disabled: action === 'update' && !isDraft,\n                    readOnly: action === 'read',\n                  }}\n                  error={!!fieldState.error}\n                  helperText={fieldState.error?.message}\n                  value={field.value ?? ''}\n                  onChange={(event) => {\n                    field.onChange(event);\n                  }}\n                />\n              )}\n            />\n          </Grid>\n          <Grid item xs={12}>\n            <Stack direction=\"row\" gap={1}>\n              <Controller\n                control={form.control}\n                name=\"display.color\"\n                render={({ field }) => {\n                  const isEnabled = field.value !== undefined;\n                  return (\n                    <>\n                      {isEnabled ? (\n                        <OptionsColorPicker\n                          size=\"medium\"\n                          label=\"annotation\"\n                          color={field.value ?? DEFAULT_ANNOTATION_COLOR}\n                          onColorChange={(color) => field.onChange(color)}\n                          onClear={() => field.onChange(undefined)}\n                        />\n                      ) : (\n                        <IconButton size=\"medium\" onClick={() => field.onChange(DEFAULT_ANNOTATION_COLOR)}>\n                          <InvertColorsIcon />\n                        </IconButton>\n                      )}\n                    </>\n                  );\n                }}\n              />\n\n              <Controller\n                control={form.control}\n                name=\"display.description\"\n                render={({ field, fieldState }) => (\n                  <TextField\n                    {...field}\n                    fullWidth\n                    label=\"Description\"\n                    InputLabelProps={{ shrink: action === 'read' ? true : undefined }}\n                    InputProps={{\n                      readOnly: action === 'read',\n                    }}\n                    error={!!fieldState.error}\n                    helperText={fieldState.error?.message}\n                    value={field.value ?? ''}\n                    onChange={(event) => {\n                      field.onChange(event);\n                    }}\n                  />\n                )}\n              />\n            </Stack>\n          </Grid>\n        </Grid>\n\n        <Divider />\n\n        <ErrorBoundary FallbackComponent={FallbackPreview} resetKeys={[previewSpec]}>\n          <AnnotationPreview spec={previewSpec} sx={{ marginY: 2 }} />\n        </ErrorBoundary>\n\n        <ErrorBoundary FallbackComponent={ErrorAlert}>\n          <AnnotationPluginControl action={action} control={form.control} onRunQuery={handleRunQuery} />\n        </ErrorBoundary>\n      </Box>\n      <DiscardChangesConfirmationDialog\n        description=\"Are you sure you want to discard these changes? Changes cannot be recovered.\"\n        isOpen={isDiscardDialogOpened}\n        onCancel={() => {\n          setDiscardDialogOpened(false);\n        }}\n        onDiscardChanges={() => {\n          setDiscardDialogOpened(false);\n          onClose();\n        }}\n      />\n    </FormProvider>\n  );\n}\n"],"names":["useCallback","useState","Box","Typography","TextField","Grid","Divider","Stack","IconButton","DiscardChangesConfirmationDialog","ErrorAlert","ErrorBoundary","FormActions","OptionsColorPicker","getSubmitText","getTitleAction","Controller","FormProvider","useForm","useWatch","zodResolver","useQueryClient","InvertColorsIcon","PluginEditor","useValidationSchemas","AnnotationPreview","DEFAULT_ANNOTATION_COLOR","FallbackPreview","div","AnnotationPluginControl","action","control","onRunQuery","plugin","name","kind","pluginSpec","spec","render","field","withRunQueryButton","width","pluginTypes","pluginKindLabel","value","selection","type","isReadonly","onChange","v","AnnotationEditorForm","initialAnnotationSpec","isDraft","onActionChange","onSave","onClose","onDelete","queryClient","isDiscardDialogOpened","setDiscardDialogOpened","titleAction","submitText","annotationEditorSchema","form","resolver","mode","defaultValues","previewSpec","setPreviewSpec","structuredClone","getValues","handleRunQuery","values","JSON","stringify","invalidateQueries","queryKey","processForm","data","handleCancel","sx","display","alignItems","padding","theme","spacing","borderBottom","palette","divider","variant","isValid","formState","onSubmit","handleSubmit","onCancel","overflowY","container","mb","item","xs","fieldState","required","fullWidth","label","InputLabelProps","shrink","undefined","InputProps","disabled","readOnly","error","helperText","message","event","direction","gap","isEnabled","size","color","onColorChange","onClear","onClick","FallbackComponent","resetKeys","marginY","description","isOpen","onDiscardChanges"],"mappings":"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"}

package/dist/components/Annotations/AnnotationEditorForm/AnnotationPreview.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+import { AnnotationSpec } from '@perses-dev/spec';
+import { CardProps } from '@mui/material';
+export interface AnnotationPreviewProps extends CardProps {
+    spec: AnnotationSpec;
+}
+export declare function AnnotationPreview({ spec, ...props }: AnnotationPreviewProps): ReactNode;
+//# sourceMappingURL=AnnotationPreview.d.ts.map

package/dist/components/Annotations/AnnotationEditorForm/AnnotationPreview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnnotationPreview.d.ts","sourceRoot":"","sources":["../../../../src/components/Annotations/AnnotationEditorForm/AnnotationPreview.tsx"],"names":[],"mappings":"AAaA,OAAc,EAAE,SAAS,EAAqB,MAAM,OAAO,CAAC;AAC5D,OAAO,EAAkB,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClE,OAAO,EAIL,SAAS,EAOV,MAAM,eAAe,CAAC;AAmEvB,MAAM,WAAW,sBAAuB,SAAQ,SAAS;IACvD,IAAI,EAAE,cAAc,CAAC;CACtB;AAED,wBAAgB,iBAAiB,CAAC,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,sBAAsB,GAAG,SAAS,CA0DvF"}