@perses-dev/dashboards 0.54.0-beta.5 → 0.54.0-beta.6

package/dist/cjs/components/Annotations/AnnotationsEditor.js

@@ -0,0 +1,302 @@
+// 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
+});
+Object.defineProperty(exports, "AnnotationEditor", {
+    enumerable: true,
+    get: function() {
+        return AnnotationEditor;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = require("react");
+const _material = require("@mui/material");
+const _Plus = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Plus"));
+const _useimmer = require("use-immer");
+const _Pencil = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Pencil"));
+const _TrashCan = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/TrashCan"));
+const _ArrowUp = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/ArrowUp"));
+const _ArrowDown = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/ArrowDown"));
+const _pluginsystem = require("@perses-dev/plugin-system");
+const _context = require("../../context");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function validateAnnotationSpecs(annotationSpecs) {
+    const errors = [];
+    const annotationNames = [];
+    for (const annotationSpec of annotationSpecs){
+        if (annotationNames.includes(annotationSpec.display.name)) {
+            errors.push(`Duplicate annotation name: ${annotationSpec.display.name}`);
+        } else {
+            annotationNames.push(annotationSpec.display.name);
+        }
+    }
+    return {
+        errors: errors,
+        isValid: errors.length === 0
+    };
+}
+function AnnotationEditor(props) {
+    const [annotationSpecs, setAnnotationSpecs] = (0, _useimmer.useImmer)(props.annotationSpecs);
+    const [annotationEditIdx, setAnnotationEditIdx] = (0, _react.useState)(null);
+    const [annotationFormAction, setAnnotationFormAction] = (0, _react.useState)('update');
+    const validation = (0, _react.useMemo)(()=>validateAnnotationSpecs(annotationSpecs), [
+        annotationSpecs
+    ]);
+    const currentEditingAnnotationSpec = annotationEditIdx !== null ? annotationSpecs[annotationEditIdx] : undefined;
+    const { openDiscardChangesConfirmationDialog, closeDiscardChangesConfirmationDialog } = (0, _context.useDiscardChangesConfirmationDialog)();
+    const handleCancel = ()=>{
+        if (JSON.stringify(props.annotationSpecs) !== JSON.stringify(annotationSpecs)) {
+            openDiscardChangesConfirmationDialog({
+                onDiscardChanges: ()=>{
+                    closeDiscardChangesConfirmationDialog();
+                    props.onCancel();
+                },
+                onCancel: ()=>{
+                    closeDiscardChangesConfirmationDialog();
+                },
+                description: 'You have unapplied changes. Are you sure you want to discard these changes? Changes cannot be recovered.'
+            });
+        } else {
+            props.onCancel();
+        }
+    };
+    const removeAnnotation = (index)=>{
+        setAnnotationSpecs((draft)=>{
+            draft.splice(index, 1);
+        });
+    };
+    const addAnnotation = ()=>{
+        setAnnotationFormAction('create');
+        setAnnotationSpecs((draft)=>{
+            draft.push({
+                display: {
+                    name: 'NewAnnotation'
+                },
+                plugin: {}
+            });
+        });
+        setAnnotationEditIdx(annotationSpecs.length);
+    };
+    const editAnnotation = (index)=>{
+        setAnnotationFormAction('update');
+        setAnnotationEditIdx(index);
+    };
+    const toggleAnnotationVisibility = (index, visible)=>{
+        setAnnotationSpecs((draft)=>{
+            const v = draft[index];
+            if (!v) {
+                return;
+            }
+            v.display.hidden = !visible;
+        });
+    };
+    const changeAnnotationOrder = (index, direction)=>{
+        const step = direction === 'up' ? -1 : 1;
+        setAnnotationSpecs((draft)=>{
+            const current = draft[index];
+            const adjacent = draft[index + step];
+            if (!current || !adjacent) {
+                return;
+            }
+            draft[index + step] = current;
+            draft[index] = adjacent;
+        });
+    };
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
+        children: annotationEditIdx !== null && currentEditingAnnotationSpec ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.ValidationProvider, {
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.AnnotationEditorForm, {
+                initialAnnotationSpec: currentEditingAnnotationSpec,
+                action: annotationFormAction,
+                isDraft: true,
+                onActionChange: setAnnotationFormAction,
+                onSave: (definition)=>{
+                    setAnnotationSpecs((draft)=>{
+                        draft[annotationEditIdx] = definition;
+                        setAnnotationEditIdx(null);
+                    });
+                },
+                onClose: ()=>{
+                    if (annotationFormAction === 'create') {
+                        removeAnnotation(annotationEditIdx);
+                    }
+                    setAnnotationEditIdx(null);
+                }
+            })
+        }) : /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
+                    sx: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        padding: (theme)=>theme.spacing(1, 2),
+                        borderBottom: (theme)=>`1px solid ${theme.palette.divider}`
+                    },
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                            variant: "h2",
+                            children: "Edit Dashboard Annotations"
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+                            direction: "row",
+                            spacing: 1,
+                            marginLeft: "auto",
+                            children: [
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
+                                    disabled: props.annotationSpecs === annotationSpecs || !validation.isValid,
+                                    variant: "contained",
+                                    onClick: ()=>{
+                                        props.onChange(annotationSpecs);
+                                    },
+                                    children: "Apply"
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
+                                    color: "secondary",
+                                    variant: "outlined",
+                                    onClick: handleCancel,
+                                    children: "Cancel"
+                                })
+                            ]
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+                    padding: 2,
+                    sx: {
+                        overflowY: 'scroll'
+                    },
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
+                        spacing: 2,
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+                            spacing: 2,
+                            children: [
+                                !validation.isValid && validation.errors.map((error)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Alert, {
+                                        severity: "error",
+                                        children: error
+                                    }, error)),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TableContainer, {
+                                    children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Table, {
+                                        sx: {
+                                            minWidth: 650
+                                        },
+                                        "aria-label": "table of annotations",
+                                        children: [
+                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TableHead, {
+                                                children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.TableRow, {
+                                                    children: [
+                                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(TableCell, {
+                                                            children: "Visibility"
+                                                        }),
+                                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(TableCell, {
+                                                            children: "Name"
+                                                        }),
+                                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(TableCell, {
+                                                            children: "Type"
+                                                        }),
+                                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(TableCell, {
+                                                            children: "Description"
+                                                        }),
+                                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(TableCell, {
+                                                            align: "right",
+                                                            children: "Actions"
+                                                        })
+                                                    ]
+                                                })
+                                            }),
+                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TableBody, {
+                                                children: annotationSpecs.map((v, idx)=>/*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.TableRow, {
+                                                        children: [
+                                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(TableCell, {
+                                                                component: "th",
+                                                                scope: "row",
+                                                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Switch, {
+                                                                    checked: v.display?.hidden !== true,
+                                                                    onChange: (e)=>{
+                                                                        toggleAnnotationVisibility(idx, e.target.checked);
+                                                                    }
+                                                                })
+                                                            }),
+                                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(TableCell, {
+                                                                component: "th",
+                                                                scope: "row",
+                                                                sx: {
+                                                                    fontWeight: 'bold'
+                                                                },
+                                                                children: v.display.name
+                                                            }),
+                                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(TableCell, {
+                                                                children: v.plugin.kind
+                                                            }),
+                                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(TableCell, {
+                                                                children: v.display?.description ?? ''
+                                                            }),
+                                                            /*#__PURE__*/ (0, _jsxruntime.jsxs)(TableCell, {
+                                                                align: "right",
+                                                                sx: {
+                                                                    whiteSpace: 'nowrap'
+                                                                },
+                                                                children: [
+                                                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
+                                                                        onClick: ()=>changeAnnotationOrder(idx, 'up'),
+                                                                        disabled: idx === 0,
+                                                                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_ArrowUp.default, {})
+                                                                    }),
+                                                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
+                                                                        onClick: ()=>changeAnnotationOrder(idx, 'down'),
+                                                                        disabled: idx === annotationSpecs.length - 1,
+                                                                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_ArrowDown.default, {})
+                                                                    }),
+                                                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
+                                                                        onClick: ()=>editAnnotation(idx),
+                                                                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Pencil.default, {})
+                                                                    }),
+                                                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
+                                                                        onClick: ()=>removeAnnotation(idx),
+                                                                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_TrashCan.default, {})
+                                                                    })
+                                                                ]
+                                                            })
+                                                        ]
+                                                    }, v.display.name))
+                                            })
+                                        ]
+                                    })
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+                                    display: "flex",
+                                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
+                                        variant: "contained",
+                                        startIcon: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Plus.default, {}),
+                                        sx: {
+                                            marginLeft: 'auto'
+                                        },
+                                        onClick: addAnnotation,
+                                        children: "Add Annotation"
+                                    })
+                                })
+                            ]
+                        })
+                    })
+                })
+            ]
+        })
+    });
+}
+const TableCell = (0, _material.styled)(_material.TableCell)(({ theme })=>({
+        borderBottom: `solid 1px ${theme.palette.divider}`
+    }));

package/dist/cjs/components/Annotations/EditAnnotationsButton.js

@@ -0,0 +1,83 @@
+// 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
+});
+Object.defineProperty(exports, "EditAnnotationsButton", {
+    enumerable: true,
+    get: function() {
+        return EditAnnotationsButton;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = require("react");
+const _material = require("@mui/material");
+const _PencilOutline = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/PencilOutline"));
+const _components = require("@perses-dev/components");
+const _constants = require("../../constants");
+const _context = require("../../context");
+const _AnnotationsEditor = require("./AnnotationsEditor");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function EditAnnotationsButton({ variant = 'text', label = 'Annotations', color = 'primary', fullWidth }) {
+    const [isAnnotationEditorOpen, setIsAnnotationEditorOpen] = (0, _react.useState)(false);
+    const annotationSpecs = (0, _context.useAnnotationSpecs)();
+    const { setAnnotationSpecs } = (0, _context.useAnnotationActions)();
+    const openAnnotationEditor = ()=>{
+        setIsAnnotationEditorOpen(true);
+    };
+    const closeAnnotationEditor = ()=>{
+        setIsAnnotationEditorOpen(false);
+    };
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.InfoTooltip, {
+                description: _constants.TOOLTIP_TEXT.editAnnotations,
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
+                    startIcon: /*#__PURE__*/ (0, _jsxruntime.jsx)(_PencilOutline.default, {}),
+                    onClick: openAnnotationEditor,
+                    "aria-label": _constants.TOOLTIP_TEXT.editAnnotations,
+                    variant: variant,
+                    color: color,
+                    fullWidth: fullWidth,
+                    sx: _constants.editButtonStyle,
+                    children: label
+                })
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.Drawer, {
+                isOpen: isAnnotationEditorOpen,
+                onClose: closeAnnotationEditor,
+                slotProps: {
+                    paper: {
+                        sx: {
+                            width: '50%'
+                        }
+                    }
+                },
+                "data-testid": "annotation-editor",
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_AnnotationsEditor.AnnotationEditor, {
+                    annotationSpecs: annotationSpecs,
+                    onCancel: closeAnnotationEditor,
+                    onChange: (annotations)=>{
+                        setAnnotationSpecs(annotations);
+                        setIsAnnotationEditorOpen(false);
+                    }
+                })
+            })
+        ]
+    });
+}

package/dist/cjs/components/DashboardToolbar/DashboardToolbar.js

@@ -34,10 +34,11 @@ const _EditButton = require("../EditButton");
 const _EditJsonButton = require("../EditJsonButton");
 const _SaveDashboardButton = require("../SaveDashboardButton");
 const _DashboardStickyToolbar = require("../DashboardStickyToolbar");
+const _EditAnnotationsButton = require("../Annotations/EditAnnotationsButton");
 const _DashboardLinks = require("../DashboardLinks");
 const _LinksDisplay = require("../LinksDisplay");
 const DashboardToolbar = (props)=>{
-    const { dashboardName, dashboardTitleComponent, initialVariableIsSticky, isReadonly, isVariableEnabled, isDatasourceEnabled, isLinksEnabled = true, onEditButtonClick, onCancelButtonClick, onSave } = props;
+    const { dashboardName, dashboardTitleComponent, initialVariableIsSticky, isReadonly, isVariableEnabled, isAnnotationEnabled, isDatasourceEnabled, isLinksEnabled = true, onEditButtonClick, onCancelButtonClick, onSave } = props;
     const { isEditMode } = (0, _context.useEditMode)();
     const { timeZone, setTimeZone } = (0, _pluginsystem.useTimeZoneParams)('local');
     const dashboardLinks = (0, _context.useDashboardLinks)();
@@ -91,6 +92,7 @@ const DashboardToolbar = (props)=>{
                                     ml: 1,
                                     whiteSpace: "nowrap",
                                     children: [
+                                        isAnnotationEnabled && /*#__PURE__*/ (0, _jsxruntime.jsx)(_EditAnnotationsButton.EditAnnotationsButton, {}),
                                         isVariableEnabled && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Variables.EditVariablesButton, {}),
                                         isDatasourceEnabled && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Datasources.EditDatasourcesButton, {}),
                                         isLinksEnabled && /*#__PURE__*/ (0, _jsxruntime.jsx)(_DashboardLinks.EditDashboardLinksButton, {}),

package/dist/cjs/components/Variables/VariableEditor.js

@@ -83,7 +83,7 @@ function VariableEditor(props) {
         externalVariableDefinitions,
         variableDefinitions
     ]);
-    const currentEditingVariableDefinition = typeof variableEditIdx === 'number' && variableDefinitions[variableEditIdx];
+    const currentEditingVariableDefinition = variableEditIdx !== null ? variableDefinitions[variableEditIdx] : undefined;
     const { openDiscardChangesConfirmationDialog, closeDiscardChangesConfirmationDialog } = (0, _context.useDiscardChangesConfirmationDialog)();
     const handleCancel = ()=>{
         if (JSON.stringify(props.variableDefinitions) !== JSON.stringify(variableDefinitions)) {
@@ -166,7 +166,7 @@ function VariableEditor(props) {
     };
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
         children: [
-            currentEditingVariableDefinition && /*#__PURE__*/ (0, _jsxruntime.jsx)(VariableEditorFormWithContext, {
+            variableEditIdx !== null && currentEditingVariableDefinition && /*#__PURE__*/ (0, _jsxruntime.jsx)(VariableEditorFormWithContext, {
                 variableDefinitions: variableDefinitions,
                 externalVariableDefinitions: externalVariableDefinitions,
                 builtinVariableDefinitions: builtinVariableDefinitions,

package/dist/cjs/constants/user-interface-text.js

@@ -36,6 +36,7 @@ const TOOLTIP_TEXT = {
     editJson: 'Edit JSON',
     editLinks: 'Edit links',
     editVariables: 'Edit variables',
+    editAnnotations: 'Edit annotations',
     viewJson: 'View JSON',
     // Group buttons
     addPanelToGroup: 'Add panel to group',

package/dist/cjs/context/AnnotationProvider/AnnotationHydrationWrapper.js

@@ -0,0 +1,50 @@
+// 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
+});
+Object.defineProperty(exports, "AnnotationHydrationWrapper", {
+    enumerable: true,
+    get: function() {
+        return AnnotationHydrationWrapper;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = require("react");
+const _pluginsystem = require("@perses-dev/plugin-system");
+const _AnnotationProvider = require("./AnnotationProvider");
+function AnnotationHydrationWrapper({ children }) {
+    const annotationSpecs = (0, _AnnotationProvider.useAnnotationSpecs)();
+    const { setAnnotationState } = (0, _AnnotationProvider.useAnnotationActions)();
+    const annotations = (0, _pluginsystem.useAnnotations)(annotationSpecs);
+    (0, _react.useEffect)(()=>{
+        for (const [index, definition] of annotationSpecs.entries()){
+            const query = annotations[index] ?? null;
+            if (query) {
+                setAnnotationState(definition.display.name, {
+                    data: query.data ?? null,
+                    isPending: query.isLoading,
+                    error: query?.error ?? null
+                });
+            }
+        }
+    }, [
+        annotationSpecs,
+        annotations,
+        setAnnotationState
+    ]);
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
+        children: children
+    });
+}

package/dist/cjs/context/AnnotationProvider/AnnotationProvider.js

@@ -0,0 +1,145 @@
+// 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 AnnotationProvider () {
+        return AnnotationProvider;
+    },
+    get useAnnotationActions () {
+        return useAnnotationActions;
+    },
+    get useAnnotationSpecAndState () {
+        return useAnnotationSpecAndState;
+    },
+    get useAnnotationSpecs () {
+        return useAnnotationSpecs;
+    },
+    get useAnnotationStates () {
+        return useAnnotationStates;
+    },
+    get useAnnotationStoreCtx () {
+        return useAnnotationStoreCtx;
+    },
+    get useAnnotationsWithData () {
+        return useAnnotationsWithData;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = require("react");
+const _zustand = require("zustand");
+const _traditional = require("zustand/traditional");
+const _shallow = require("zustand/shallow");
+const _middleware = require("zustand/middleware");
+const _immer = require("zustand/middleware/immer");
+const _AnnotationHydrationWrapper = require("./AnnotationHydrationWrapper");
+const AnnotationStoreContext = /*#__PURE__*/ (0, _react.createContext)(undefined);
+function useAnnotationStoreCtx() {
+    const context = (0, _react.useContext)(AnnotationStoreContext);
+    if (!context) {
+        return createAnnotationStore({
+            initialAnnotationSpecs: []
+        });
+    }
+    return context;
+}
+function useAnnotationSpecs() {
+    const store = useAnnotationStoreCtx();
+    return (0, _zustand.useStore)(store, (s)=>s.annotationSpecs);
+}
+function useAnnotationStates(annotationNames) {
+    const store = useAnnotationStoreCtx();
+    return (0, _traditional.useStoreWithEqualityFn)(store, (s)=>{
+        if (annotationNames) {
+            const result = {};
+            annotationNames.forEach((name)=>{
+                const s = store.getState().annotationState[name];
+                if (s) {
+                    result[name] = s;
+                }
+            });
+            return result;
+        }
+        return s.annotationState;
+    }, (left, right)=>{
+        return JSON.stringify(left) === JSON.stringify(right);
+    });
+}
+function useAnnotationActions() {
+    const store = useAnnotationStoreCtx();
+    return (0, _traditional.useStoreWithEqualityFn)(store, (s)=>{
+        return {
+            setAnnotationState: s.setAnnotationState,
+            setAnnotationSpecs: s.setAnnotationSpecs
+        };
+    }, _shallow.shallow);
+}
+function useAnnotationSpecAndState(name) {
+    const store = useAnnotationStoreCtx();
+    return (0, _zustand.useStore)(store, (s)=>{
+        return {
+            definition: s.annotationSpecs.find((d)=>d.display.name === name),
+            state: s.annotationState[name]
+        };
+    });
+}
+function useAnnotationsWithData() {
+    const store = useAnnotationStoreCtx();
+    return (0, _zustand.useStore)(store, (s)=>{
+        return s.annotationSpecs.map((definition)=>{
+            const state = s.annotationState[definition.display.name];
+            return {
+                definition,
+                data: state?.data
+            };
+        }).filter((annotation)=>!!annotation.data);
+    });
+}
+function createAnnotationStore({ initialAnnotationSpecs = [] }) {
+    const store = (0, _zustand.createStore)()((0, _middleware.devtools)((0, _immer.immer)((set, _get)=>({
+            annotationSpecs: initialAnnotationSpecs,
+            annotationState: {},
+            setAnnotationSpecs (definitions) {
+                set((s)=>{
+                    s.annotationSpecs = definitions;
+                }, false, '[Annotations] setAnnotationSpecs' // Used for action name in Redux devtools
+                );
+            },
+            setAnnotationState: (name, state)=>{
+                set((s)=>{
+                    s.annotationState[name] = state;
+                }, false, '[Annotations] setAnnotationState' // Used for action name in Redux devtools
+                );
+            }
+        }))));
+    return store;
+}
+function AnnotationProvider({ children, initialAnnotationSpecs = [] }) {
+    const [store] = (0, _react.useState)(()=>createAnnotationStore({
+            initialAnnotationSpecs
+        }));
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(AnnotationStoreContext.Provider, {
+        value: store,
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_AnnotationHydrationWrapper.AnnotationHydrationWrapper, {
+            children: children
+        })
+    });
+}

package/dist/cjs/context/AnnotationProvider/index.js

@@ -0,0 +1,30 @@
+// 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
+});
+_export_star(require("./AnnotationProvider"), exports);
+function _export_star(from, to) {
+    Object.keys(from).forEach(function(k) {
+        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {
+            Object.defineProperty(to, k, {
+                enumerable: true,
+                get: function() {
+                    return from[k];
+                }
+            });
+        }
+    });
+    return from;
+}