@perses-dev/dashboards 0.54.0-beta.1 → 0.54.0-beta.11

package/dist/cjs/views/ViewDashboard/ViewDashboard.js

@@ -30,7 +30,7 @@ const _context = require("../../context");
 const _DashboardProviderWithQueryParams = require("../../context/DashboardProvider/DashboardProviderWithQueryParams");
 const _DashboardApp = require("./DashboardApp");
 function ViewDashboard(props) {
-    const { dashboardResource, datasourceApi, externalVariableDefinitions, emptyDashboardProps, isReadonly, isVariableEnabled, isDatasourceEnabled, disableShortcuts, isEditing, isCreating, isInitialVariableSticky, isLeavingConfirmDialogEnabled, dashboardTitleComponent, onSave, onDiscard, sx, ...others } = props;
+    const { dashboardResource, datasourceApi, externalVariableDefinitions, emptyDashboardProps, isReadonly, isVariableEnabled, isAnnotationEnabled, isDatasourceEnabled, disableShortcuts, isEditing, isCreating, isInitialVariableSticky, isLeavingConfirmDialogEnabled, dashboardTitleComponent, onSave, onDiscard, sx, userPreferenceTimezone, ...others } = props;
     const { spec } = dashboardResource;
     const dashboardDuration = spec.duration ?? _constants.DEFAULT_DASHBOARD_DURATION;
     const dashboardRefreshInterval = spec.refreshInterval ?? _constants.DEFAULT_REFRESH_INTERVAL;
@@ -90,30 +90,35 @@ function ViewDashboard(props) {
                     initialVariableDefinitions: spec.variables,
                     externalVariableDefinitions: externalVariableDefinitions,
                     builtinVariableDefinitions: builtinVariables,
-                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
-                        sx: (0, _components.combineSx)({
-                            display: 'flex',
-                            width: '100%',
-                            height: '100%',
-                            position: 'relative',
-                            overflow: 'hidden'
-                        }, sx),
-                        ...others,
-                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ErrorBoundary, {
-                            FallbackComponent: _components.ErrorAlert,
-                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_DashboardApp.DashboardApp, {
-                                dashboardResource: dashboardResource,
-                                emptyDashboardProps: emptyDashboardProps,
-                                isReadonly: isReadonly,
-                                isVariableEnabled: isVariableEnabled,
-                                isDatasourceEnabled: isDatasourceEnabled,
-                                disableShortcuts: disableShortcuts,
-                                isCreating: isCreating,
-                                isInitialVariableSticky: isInitialVariableSticky,
-                                isLeavingConfirmDialogEnabled: isLeavingConfirmDialogEnabled,
-                                dashboardTitleComponent: dashboardTitleComponent,
-                                onSave: onSave,
-                                onDiscard: onDiscard
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_context.AnnotationProvider, {
+                        initialAnnotationSpecs: spec.annotations ?? [],
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+                            sx: (0, _components.combineSx)({
+                                display: 'flex',
+                                width: '100%',
+                                height: '100%',
+                                position: 'relative',
+                                overflow: 'hidden'
+                            }, sx),
+                            ...others,
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ErrorBoundary, {
+                                FallbackComponent: _components.ErrorAlert,
+                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_DashboardApp.DashboardApp, {
+                                    dashboardResource: dashboardResource,
+                                    emptyDashboardProps: emptyDashboardProps,
+                                    isReadonly: isReadonly,
+                                    isVariableEnabled: isVariableEnabled,
+                                    isAnnotationEnabled: isAnnotationEnabled,
+                                    isDatasourceEnabled: isDatasourceEnabled,
+                                    disableShortcuts: disableShortcuts,
+                                    isCreating: isCreating,
+                                    isInitialVariableSticky: isInitialVariableSticky,
+                                    isLeavingConfirmDialogEnabled: isLeavingConfirmDialogEnabled,
+                                    dashboardTitleComponent: dashboardTitleComponent,
+                                    onSave: onSave,
+                                    onDiscard: onDiscard,
+                                    userPreferenceTimezone: userPreferenceTimezone
+                                })
                             })
                         })
                     })

package/dist/components/AddGroupButton/AddGroupButton.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } 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.
@@ -10,7 +11,6 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { jsx as _jsx } from "react/jsx-runtime";
 import { Button } from '@mui/material';
 import AddGroupIcon from 'mdi-material-ui/PlusBoxOutline';
 import { InfoTooltip } from '@perses-dev/components';

package/dist/components/AddGroupButton/AddGroupButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/AddGroupButton/AddGroupButton.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 { Button } from '@mui/material';\nimport AddGroupIcon from 'mdi-material-ui/PlusBoxOutline';\nimport { InfoTooltip } from '@perses-dev/components';\nimport { ReactElement } from 'react';\nimport { TOOLTIP_TEXT, editButtonStyle } from '../../constants';\nimport { useDashboardActions } from '../../context';\n\nexport const AddGroupButton = (): ReactElement => {\n  const { openAddPanelGroup } = useDashboardActions();\n\n  return (\n    <InfoTooltip description={TOOLTIP_TEXT.addGroup}>\n      <Button\n        startIcon={<AddGroupIcon />}\n        onClick={openAddPanelGroup}\n        aria-label={TOOLTIP_TEXT.addGroup}\n        sx={editButtonStyle}\n      >\n        Panel Group\n      </Button>\n    </InfoTooltip>\n  );\n};\n"],"names":["Button","AddGroupIcon","InfoTooltip","TOOLTIP_TEXT","editButtonStyle","useDashboardActions","AddGroupButton","openAddPanelGroup","description","addGroup","startIcon","onClick","aria-label","sx"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,MAAM,QAAQ,gBAAgB;AACvC,OAAOC,kBAAkB,iCAAiC;AAC1D,SAASC,WAAW,QAAQ,yBAAyB;AAErD,SAASC,YAAY,EAAEC,eAAe,QAAQ,kBAAkB;AAChE,SAASC,mBAAmB,QAAQ,gBAAgB;AAEpD,OAAO,MAAMC,iBAAiB;IAC5B,MAAM,EAAEC,iBAAiB,EAAE,GAAGF;IAE9B,qBACE,KAACH;QAAYM,aAAaL,aAAaM,QAAQ;kBAC7C,cAAA,KAACT;YACCU,yBAAW,KAACT;YACZU,SAASJ;YACTK,cAAYT,aAAaM,QAAQ;YACjCI,IAAIT;sBACL;;;AAKP,EAAE"}
+{"version":3,"sources":["../../../src/components/AddGroupButton/AddGroupButton.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 { Button } from '@mui/material';\nimport AddGroupIcon from 'mdi-material-ui/PlusBoxOutline';\nimport { InfoTooltip } from '@perses-dev/components';\nimport { ReactElement } from 'react';\nimport { TOOLTIP_TEXT, editButtonStyle } from '../../constants';\nimport { useDashboardActions } from '../../context';\n\nexport const AddGroupButton = (): ReactElement => {\n  const { openAddPanelGroup } = useDashboardActions();\n\n  return (\n    <InfoTooltip description={TOOLTIP_TEXT.addGroup}>\n      <Button\n        startIcon={<AddGroupIcon />}\n        onClick={openAddPanelGroup}\n        aria-label={TOOLTIP_TEXT.addGroup}\n        sx={editButtonStyle}\n      >\n        Panel Group\n      </Button>\n    </InfoTooltip>\n  );\n};\n"],"names":["Button","AddGroupIcon","InfoTooltip","TOOLTIP_TEXT","editButtonStyle","useDashboardActions","AddGroupButton","openAddPanelGroup","description","addGroup","startIcon","onClick","aria-label","sx"],"mappings":";AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,MAAM,QAAQ,gBAAgB;AACvC,OAAOC,kBAAkB,iCAAiC;AAC1D,SAASC,WAAW,QAAQ,yBAAyB;AAErD,SAASC,YAAY,EAAEC,eAAe,QAAQ,kBAAkB;AAChE,SAASC,mBAAmB,QAAQ,gBAAgB;AAEpD,OAAO,MAAMC,iBAAiB;IAC5B,MAAM,EAAEC,iBAAiB,EAAE,GAAGF;IAE9B,qBACE,KAACH;QAAYM,aAAaL,aAAaM,QAAQ;kBAC7C,cAAA,KAACT;YACCU,yBAAW,KAACT;YACZU,SAASJ;YACTK,cAAYT,aAAaM,QAAQ;YACjCI,IAAIT;sBACL;;;AAKP,EAAE"}

package/dist/components/AddPanelButton/AddPanelButton.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } 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.
@@ -10,7 +11,6 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { jsx as _jsx } from "react/jsx-runtime";
 import { Button } from '@mui/material';
 import AddPanelIcon from 'mdi-material-ui/ChartBoxPlusOutline';
 import { InfoTooltip } from '@perses-dev/components';

package/dist/components/AddPanelButton/AddPanelButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/AddPanelButton/AddPanelButton.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 { Button, ButtonProps } from '@mui/material';\nimport AddPanelIcon from 'mdi-material-ui/ChartBoxPlusOutline';\nimport { InfoTooltip } from '@perses-dev/components';\nimport { ReactElement } from 'react';\nimport { TOOLTIP_TEXT, editButtonStyle } from '../../constants';\nimport { useDashboardActions } from '../../context';\n\nexport interface AddPanelButtonProps extends Pick<ButtonProps, 'fullWidth'> {\n  /**\n   * The variant to use to display the button.\n   */\n  variant?: 'text' | 'outlined';\n\n  /**\n   * The color to use to display the button.\n   */\n  color?: 'primary' | 'secondary';\n\n  /**\n   * The label used inside the button.\n   */\n  label?: string;\n}\n\nexport const AddPanelButton = ({\n  variant = 'text',\n  color = 'primary',\n  label = 'Panel',\n  fullWidth,\n}: AddPanelButtonProps): ReactElement => {\n  const { openAddPanel } = useDashboardActions();\n\n  return (\n    <InfoTooltip description={TOOLTIP_TEXT.addPanel}>\n      <Button\n        startIcon={<AddPanelIcon />}\n        onClick={openAddPanel}\n        aria-label={TOOLTIP_TEXT.addPanel}\n        variant={variant}\n        color={color}\n        fullWidth={fullWidth}\n        sx={editButtonStyle}\n      >\n        {label}\n      </Button>\n    </InfoTooltip>\n  );\n};\n"],"names":["Button","AddPanelIcon","InfoTooltip","TOOLTIP_TEXT","editButtonStyle","useDashboardActions","AddPanelButton","variant","color","label","fullWidth","openAddPanel","description","addPanel","startIcon","onClick","aria-label","sx"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,MAAM,QAAqB,gBAAgB;AACpD,OAAOC,kBAAkB,sCAAsC;AAC/D,SAASC,WAAW,QAAQ,yBAAyB;AAErD,SAASC,YAAY,EAAEC,eAAe,QAAQ,kBAAkB;AAChE,SAASC,mBAAmB,QAAQ,gBAAgB;AAmBpD,OAAO,MAAMC,iBAAiB,CAAC,EAC7BC,UAAU,MAAM,EAChBC,QAAQ,SAAS,EACjBC,QAAQ,OAAO,EACfC,SAAS,EACW;IACpB,MAAM,EAAEC,YAAY,EAAE,GAAGN;IAEzB,qBACE,KAACH;QAAYU,aAAaT,aAAaU,QAAQ;kBAC7C,cAAA,KAACb;YACCc,yBAAW,KAACb;YACZc,SAASJ;YACTK,cAAYb,aAAaU,QAAQ;YACjCN,SAASA;YACTC,OAAOA;YACPE,WAAWA;YACXO,IAAIb;sBAEHK;;;AAIT,EAAE"}
+{"version":3,"sources":["../../../src/components/AddPanelButton/AddPanelButton.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 { Button, ButtonProps } from '@mui/material';\nimport AddPanelIcon from 'mdi-material-ui/ChartBoxPlusOutline';\nimport { InfoTooltip } from '@perses-dev/components';\nimport { ReactElement } from 'react';\nimport { TOOLTIP_TEXT, editButtonStyle } from '../../constants';\nimport { useDashboardActions } from '../../context';\n\nexport interface AddPanelButtonProps extends Pick<ButtonProps, 'fullWidth'> {\n  /**\n   * The variant to use to display the button.\n   */\n  variant?: 'text' | 'outlined';\n\n  /**\n   * The color to use to display the button.\n   */\n  color?: 'primary' | 'secondary';\n\n  /**\n   * The label used inside the button.\n   */\n  label?: string;\n}\n\nexport const AddPanelButton = ({\n  variant = 'text',\n  color = 'primary',\n  label = 'Panel',\n  fullWidth,\n}: AddPanelButtonProps): ReactElement => {\n  const { openAddPanel } = useDashboardActions();\n\n  return (\n    <InfoTooltip description={TOOLTIP_TEXT.addPanel}>\n      <Button\n        startIcon={<AddPanelIcon />}\n        onClick={openAddPanel}\n        aria-label={TOOLTIP_TEXT.addPanel}\n        variant={variant}\n        color={color}\n        fullWidth={fullWidth}\n        sx={editButtonStyle}\n      >\n        {label}\n      </Button>\n    </InfoTooltip>\n  );\n};\n"],"names":["Button","AddPanelIcon","InfoTooltip","TOOLTIP_TEXT","editButtonStyle","useDashboardActions","AddPanelButton","variant","color","label","fullWidth","openAddPanel","description","addPanel","startIcon","onClick","aria-label","sx"],"mappings":";AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,MAAM,QAAqB,gBAAgB;AACpD,OAAOC,kBAAkB,sCAAsC;AAC/D,SAASC,WAAW,QAAQ,yBAAyB;AAErD,SAASC,YAAY,EAAEC,eAAe,QAAQ,kBAAkB;AAChE,SAASC,mBAAmB,QAAQ,gBAAgB;AAmBpD,OAAO,MAAMC,iBAAiB,CAAC,EAC7BC,UAAU,MAAM,EAChBC,QAAQ,SAAS,EACjBC,QAAQ,OAAO,EACfC,SAAS,EACW;IACpB,MAAM,EAAEC,YAAY,EAAE,GAAGN;IAEzB,qBACE,KAACH;QAAYU,aAAaT,aAAaU,QAAQ;kBAC7C,cAAA,KAACb;YACCc,yBAAW,KAACb;YACZc,SAASJ;YACTK,cAAYb,aAAaU,QAAQ;YACjCN,SAASA;YACTC,OAAOA;YACPE,WAAWA;YACXO,IAAIb;sBAEHK;;;AAIT,EAAE"}

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

@@ -0,0 +1,8 @@
+import { ReactElement } from 'react';
+import { AnnotationSpec } from '@perses-dev/spec';
+export declare function AnnotationEditor(props: {
+    annotationSpecs: AnnotationSpec[];
+    onChange: (annotationSpecs: AnnotationSpec[]) => void;
+    onCancel: () => void;
+}): ReactElement;
+//# sourceMappingURL=AnnotationsEditor.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AnnotationsEditor.d.ts","sourceRoot":"","sources":["../../../src/components/Annotations/AnnotationsEditor.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAqB,YAAY,EAAE,MAAM,OAAO,CAAC;AAkBxD,OAAO,EAAE,cAAc,EAA2B,MAAM,kBAAkB,CAAC;AA8B3E,wBAAgB,gBAAgB,CAAC,KAAK,EAAE;IACtC,eAAe,EAAE,cAAc,EAAE,CAAC;IAClC,QAAQ,EAAE,CAAC,eAAe,EAAE,cAAc,EAAE,KAAK,IAAI,CAAC;IACtD,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB,GAAG,YAAY,CAyMf"}

package/dist/components/Annotations/AnnotationsEditor.js

@@ -0,0 +1,289 @@
+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 { useState, useMemo } from 'react';
+import { Button, Stack, Box, TableContainer, TableBody, TableRow, TableCell as MuiTableCell, Table, TableHead, Switch, Typography, IconButton, Alert, styled } from '@mui/material';
+import AddIcon from 'mdi-material-ui/Plus';
+import { useImmer } from 'use-immer';
+import PencilIcon from 'mdi-material-ui/Pencil';
+import TrashIcon from 'mdi-material-ui/TrashCan';
+import ArrowUp from 'mdi-material-ui/ArrowUp';
+import ArrowDown from 'mdi-material-ui/ArrowDown';
+import { ValidationProvider, AnnotationEditorForm } from '@perses-dev/plugin-system';
+import { useDiscardChangesConfirmationDialog } from '../../context';
+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
+    };
+}
+export function AnnotationEditor(props) {
+    const [annotationSpecs, setAnnotationSpecs] = useImmer(props.annotationSpecs);
+    const [annotationEditIdx, setAnnotationEditIdx] = useState(null);
+    const [annotationFormAction, setAnnotationFormAction] = useState('update');
+    const validation = useMemo(()=>validateAnnotationSpecs(annotationSpecs), [
+        annotationSpecs
+    ]);
+    const currentEditingAnnotationSpec = annotationEditIdx !== null ? annotationSpecs[annotationEditIdx] : undefined;
+    const { openDiscardChangesConfirmationDialog, closeDiscardChangesConfirmationDialog } = 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__*/ _jsx(_Fragment, {
+        children: annotationEditIdx !== null && currentEditingAnnotationSpec ? /*#__PURE__*/ _jsx(ValidationProvider, {
+            children: /*#__PURE__*/ _jsx(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__*/ _jsxs(_Fragment, {
+            children: [
+                /*#__PURE__*/ _jsxs(Box, {
+                    sx: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        padding: (theme)=>theme.spacing(1, 2),
+                        borderBottom: (theme)=>`1px solid ${theme.palette.divider}`
+                    },
+                    children: [
+                        /*#__PURE__*/ _jsx(Typography, {
+                            variant: "h2",
+                            children: "Edit Dashboard Annotations"
+                        }),
+                        /*#__PURE__*/ _jsxs(Stack, {
+                            direction: "row",
+                            spacing: 1,
+                            marginLeft: "auto",
+                            children: [
+                                /*#__PURE__*/ _jsx(Button, {
+                                    disabled: props.annotationSpecs === annotationSpecs || !validation.isValid,
+                                    variant: "contained",
+                                    onClick: ()=>{
+                                        props.onChange(annotationSpecs);
+                                    },
+                                    children: "Apply"
+                                }),
+                                /*#__PURE__*/ _jsx(Button, {
+                                    color: "secondary",
+                                    variant: "outlined",
+                                    onClick: handleCancel,
+                                    children: "Cancel"
+                                })
+                            ]
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsx(Box, {
+                    padding: 2,
+                    sx: {
+                        overflowY: 'scroll'
+                    },
+                    children: /*#__PURE__*/ _jsx(Stack, {
+                        spacing: 2,
+                        children: /*#__PURE__*/ _jsxs(Stack, {
+                            spacing: 2,
+                            children: [
+                                !validation.isValid && validation.errors.map((error)=>/*#__PURE__*/ _jsx(Alert, {
+                                        severity: "error",
+                                        children: error
+                                    }, error)),
+                                /*#__PURE__*/ _jsx(TableContainer, {
+                                    children: /*#__PURE__*/ _jsxs(Table, {
+                                        sx: {
+                                            minWidth: 650
+                                        },
+                                        "aria-label": "table of annotations",
+                                        children: [
+                                            /*#__PURE__*/ _jsx(TableHead, {
+                                                children: /*#__PURE__*/ _jsxs(TableRow, {
+                                                    children: [
+                                                        /*#__PURE__*/ _jsx(TableCell, {
+                                                            children: "Visibility"
+                                                        }),
+                                                        /*#__PURE__*/ _jsx(TableCell, {
+                                                            children: "Name"
+                                                        }),
+                                                        /*#__PURE__*/ _jsx(TableCell, {
+                                                            children: "Type"
+                                                        }),
+                                                        /*#__PURE__*/ _jsx(TableCell, {
+                                                            children: "Description"
+                                                        }),
+                                                        /*#__PURE__*/ _jsx(TableCell, {
+                                                            align: "right",
+                                                            children: "Actions"
+                                                        })
+                                                    ]
+                                                })
+                                            }),
+                                            /*#__PURE__*/ _jsx(TableBody, {
+                                                children: annotationSpecs.map((v, idx)=>/*#__PURE__*/ _jsxs(TableRow, {
+                                                        children: [
+                                                            /*#__PURE__*/ _jsx(TableCell, {
+                                                                component: "th",
+                                                                scope: "row",
+                                                                children: /*#__PURE__*/ _jsx(Switch, {
+                                                                    checked: v.display?.hidden !== true,
+                                                                    onChange: (e)=>{
+                                                                        toggleAnnotationVisibility(idx, e.target.checked);
+                                                                    }
+                                                                })
+                                                            }),
+                                                            /*#__PURE__*/ _jsx(TableCell, {
+                                                                component: "th",
+                                                                scope: "row",
+                                                                sx: {
+                                                                    fontWeight: 'bold'
+                                                                },
+                                                                children: v.display.name
+                                                            }),
+                                                            /*#__PURE__*/ _jsx(TableCell, {
+                                                                children: v.plugin.kind
+                                                            }),
+                                                            /*#__PURE__*/ _jsx(TableCell, {
+                                                                children: v.display?.description ?? ''
+                                                            }),
+                                                            /*#__PURE__*/ _jsxs(TableCell, {
+                                                                align: "right",
+                                                                sx: {
+                                                                    whiteSpace: 'nowrap'
+                                                                },
+                                                                children: [
+                                                                    /*#__PURE__*/ _jsx(IconButton, {
+                                                                        onClick: ()=>changeAnnotationOrder(idx, 'up'),
+                                                                        disabled: idx === 0,
+                                                                        children: /*#__PURE__*/ _jsx(ArrowUp, {})
+                                                                    }),
+                                                                    /*#__PURE__*/ _jsx(IconButton, {
+                                                                        onClick: ()=>changeAnnotationOrder(idx, 'down'),
+                                                                        disabled: idx === annotationSpecs.length - 1,
+                                                                        children: /*#__PURE__*/ _jsx(ArrowDown, {})
+                                                                    }),
+                                                                    /*#__PURE__*/ _jsx(IconButton, {
+                                                                        onClick: ()=>editAnnotation(idx),
+                                                                        children: /*#__PURE__*/ _jsx(PencilIcon, {})
+                                                                    }),
+                                                                    /*#__PURE__*/ _jsx(IconButton, {
+                                                                        onClick: ()=>removeAnnotation(idx),
+                                                                        children: /*#__PURE__*/ _jsx(TrashIcon, {})
+                                                                    })
+                                                                ]
+                                                            })
+                                                        ]
+                                                    }, v.display.name))
+                                            })
+                                        ]
+                                    })
+                                }),
+                                /*#__PURE__*/ _jsx(Box, {
+                                    display: "flex",
+                                    children: /*#__PURE__*/ _jsx(Button, {
+                                        variant: "contained",
+                                        startIcon: /*#__PURE__*/ _jsx(AddIcon, {}),
+                                        sx: {
+                                            marginLeft: 'auto'
+                                        },
+                                        onClick: addAnnotation,
+                                        children: "Add Annotation"
+                                    })
+                                })
+                            ]
+                        })
+                    })
+                })
+            ]
+        })
+    });
+}
+const TableCell = styled(MuiTableCell)(({ theme })=>({
+        borderBottom: `solid 1px ${theme.palette.divider}`
+    }));
+
+//# sourceMappingURL=AnnotationsEditor.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Annotations/AnnotationsEditor.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 { useState, useMemo, ReactElement } from 'react';\nimport {\n  Button,\n  Stack,\n  Box,\n  TableContainer,\n  TableBody,\n  TableRow,\n  TableCell as MuiTableCell,\n  Table,\n  TableHead,\n  Switch,\n  Typography,\n  IconButton,\n  Alert,\n  styled,\n} from '@mui/material';\nimport AddIcon from 'mdi-material-ui/Plus';\nimport { AnnotationSpec, Definition, UnknownSpec } from '@perses-dev/spec';\nimport { useImmer } from 'use-immer';\nimport PencilIcon from 'mdi-material-ui/Pencil';\nimport TrashIcon from 'mdi-material-ui/TrashCan';\nimport ArrowUp from 'mdi-material-ui/ArrowUp';\nimport ArrowDown from 'mdi-material-ui/ArrowDown';\n\nimport { ValidationProvider, AnnotationEditorForm } from '@perses-dev/plugin-system';\nimport { Action } from '@perses-dev/client';\nimport { useDiscardChangesConfirmationDialog } from '../../context';\n\nfunction validateAnnotationSpecs(annotationSpecs: AnnotationSpec[]): { isValid: boolean; errors: string[] } {\n  const errors: string[] = [];\n\n  const annotationNames: string[] = [];\n\n  for (const annotationSpec of annotationSpecs) {\n    if (annotationNames.includes(annotationSpec.display.name)) {\n      errors.push(`Duplicate annotation name: ${annotationSpec.display.name}`);\n    } else {\n      annotationNames.push(annotationSpec.display.name);\n    }\n  }\n\n  return {\n    errors: errors,\n    isValid: errors.length === 0,\n  };\n}\n\nexport function AnnotationEditor(props: {\n  annotationSpecs: AnnotationSpec[];\n  onChange: (annotationSpecs: AnnotationSpec[]) => void;\n  onCancel: () => void;\n}): ReactElement {\n  const [annotationSpecs, setAnnotationSpecs] = useImmer(props.annotationSpecs);\n  const [annotationEditIdx, setAnnotationEditIdx] = useState<number | null>(null);\n  const [annotationFormAction, setAnnotationFormAction] = useState<Action>('update');\n\n  const validation = useMemo(() => validateAnnotationSpecs(annotationSpecs), [annotationSpecs]);\n  const currentEditingAnnotationSpec: AnnotationSpec | undefined =\n    annotationEditIdx !== null ? annotationSpecs[annotationEditIdx] : undefined;\n\n  const { openDiscardChangesConfirmationDialog, closeDiscardChangesConfirmationDialog } =\n    useDiscardChangesConfirmationDialog();\n  const handleCancel = (): void => {\n    if (JSON.stringify(props.annotationSpecs) !== JSON.stringify(annotationSpecs)) {\n      openDiscardChangesConfirmationDialog({\n        onDiscardChanges: () => {\n          closeDiscardChangesConfirmationDialog();\n          props.onCancel();\n        },\n        onCancel: () => {\n          closeDiscardChangesConfirmationDialog();\n        },\n        description:\n          'You have unapplied changes. Are you sure you want to discard these changes? Changes cannot be recovered.',\n      });\n    } else {\n      props.onCancel();\n    }\n  };\n\n  const removeAnnotation = (index: number): void => {\n    setAnnotationSpecs((draft) => {\n      draft.splice(index, 1);\n    });\n  };\n\n  const addAnnotation = (): void => {\n    setAnnotationFormAction('create');\n    setAnnotationSpecs((draft) => {\n      draft.push({\n        display: { name: 'NewAnnotation' },\n        plugin: {} as Definition<UnknownSpec>,\n      });\n    });\n    setAnnotationEditIdx(annotationSpecs.length);\n  };\n\n  const editAnnotation = (index: number): void => {\n    setAnnotationFormAction('update');\n    setAnnotationEditIdx(index);\n  };\n\n  const toggleAnnotationVisibility = (index: number, visible: boolean): void => {\n    setAnnotationSpecs((draft) => {\n      const v = draft[index];\n      if (!v) {\n        return;\n      }\n      v.display.hidden = !visible;\n    });\n  };\n\n  const changeAnnotationOrder = (index: number, direction: 'up' | 'down'): void => {\n    const step = direction === 'up' ? -1 : 1;\n\n    setAnnotationSpecs((draft) => {\n      const current = draft[index];\n      const adjacent = draft[index + step];\n\n      if (!current || !adjacent) {\n        return;\n      }\n\n      draft[index + step] = current;\n      draft[index] = adjacent;\n    });\n  };\n\n  return (\n    <>\n      {annotationEditIdx !== null && currentEditingAnnotationSpec ? (\n        <ValidationProvider>\n          <AnnotationEditorForm\n            initialAnnotationSpec={currentEditingAnnotationSpec}\n            action={annotationFormAction}\n            isDraft={true}\n            onActionChange={setAnnotationFormAction}\n            onSave={(definition: AnnotationSpec) => {\n              setAnnotationSpecs((draft) => {\n                draft[annotationEditIdx] = definition;\n                setAnnotationEditIdx(null);\n              });\n            }}\n            onClose={() => {\n              if (annotationFormAction === 'create') {\n                removeAnnotation(annotationEditIdx);\n              }\n              setAnnotationEditIdx(null);\n            }}\n          />\n        </ValidationProvider>\n      ) : (\n        <>\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\">Edit Dashboard Annotations</Typography>\n            <Stack direction=\"row\" spacing={1} marginLeft=\"auto\">\n              <Button\n                disabled={props.annotationSpecs === annotationSpecs || !validation.isValid}\n                variant=\"contained\"\n                onClick={() => {\n                  props.onChange(annotationSpecs);\n                }}\n              >\n                Apply\n              </Button>\n              <Button color=\"secondary\" variant=\"outlined\" onClick={handleCancel}>\n                Cancel\n              </Button>\n            </Stack>\n          </Box>\n          <Box padding={2} sx={{ overflowY: 'scroll' }}>\n            <Stack spacing={2}>\n              <Stack spacing={2}>\n                {!validation.isValid &&\n                  validation.errors.map((error) => (\n                    <Alert severity=\"error\" key={error}>\n                      {error}\n                    </Alert>\n                  ))}\n                <TableContainer>\n                  <Table sx={{ minWidth: 650 }} aria-label=\"table of annotations\">\n                    <TableHead>\n                      <TableRow>\n                        <TableCell>Visibility</TableCell>\n                        <TableCell>Name</TableCell>\n                        <TableCell>Type</TableCell>\n                        <TableCell>Description</TableCell>\n                        <TableCell align=\"right\">Actions</TableCell>\n                      </TableRow>\n                    </TableHead>\n                    <TableBody>\n                      {annotationSpecs.map((v, idx) => (\n                        <TableRow key={v.display.name}>\n                          <TableCell component=\"th\" scope=\"row\">\n                            <Switch\n                              checked={v.display?.hidden !== true}\n                              onChange={(e) => {\n                                toggleAnnotationVisibility(idx, e.target.checked);\n                              }}\n                            />\n                          </TableCell>\n                          <TableCell component=\"th\" scope=\"row\" sx={{ fontWeight: 'bold' }}>\n                            {v.display.name}\n                          </TableCell>\n                          <TableCell>{v.plugin.kind}</TableCell>\n                          <TableCell>{v.display?.description ?? ''}</TableCell>\n                          <TableCell align=\"right\" sx={{ whiteSpace: 'nowrap' }}>\n                            <IconButton onClick={() => changeAnnotationOrder(idx, 'up')} disabled={idx === 0}>\n                              <ArrowUp />\n                            </IconButton>\n                            <IconButton\n                              onClick={() => changeAnnotationOrder(idx, 'down')}\n                              disabled={idx === annotationSpecs.length - 1}\n                            >\n                              <ArrowDown />\n                            </IconButton>\n                            <IconButton onClick={() => editAnnotation(idx)}>\n                              <PencilIcon />\n                            </IconButton>\n                            <IconButton onClick={() => removeAnnotation(idx)}>\n                              <TrashIcon />\n                            </IconButton>\n                          </TableCell>\n                        </TableRow>\n                      ))}\n                    </TableBody>\n                  </Table>\n                </TableContainer>\n                <Box display=\"flex\">\n                  <Button\n                    variant=\"contained\"\n                    startIcon={<AddIcon />}\n                    sx={{ marginLeft: 'auto' }}\n                    onClick={addAnnotation}\n                  >\n                    Add Annotation\n                  </Button>\n                </Box>\n              </Stack>\n            </Stack>\n          </Box>\n        </>\n      )}\n    </>\n  );\n}\n\nconst TableCell = styled(MuiTableCell)(({ theme }) => ({\n  borderBottom: `solid 1px ${theme.palette.divider}`,\n}));\n"],"names":["useState","useMemo","Button","Stack","Box","TableContainer","TableBody","TableRow","TableCell","MuiTableCell","Table","TableHead","Switch","Typography","IconButton","Alert","styled","AddIcon","useImmer","PencilIcon","TrashIcon","ArrowUp","ArrowDown","ValidationProvider","AnnotationEditorForm","useDiscardChangesConfirmationDialog","validateAnnotationSpecs","annotationSpecs","errors","annotationNames","annotationSpec","includes","display","name","push","isValid","length","AnnotationEditor","props","setAnnotationSpecs","annotationEditIdx","setAnnotationEditIdx","annotationFormAction","setAnnotationFormAction","validation","currentEditingAnnotationSpec","undefined","openDiscardChangesConfirmationDialog","closeDiscardChangesConfirmationDialog","handleCancel","JSON","stringify","onDiscardChanges","onCancel","description","removeAnnotation","index","draft","splice","addAnnotation","plugin","editAnnotation","toggleAnnotationVisibility","visible","v","hidden","changeAnnotationOrder","direction","step","current","adjacent","initialAnnotationSpec","action","isDraft","onActionChange","onSave","definition","onClose","sx","alignItems","padding","theme","spacing","borderBottom","palette","divider","variant","marginLeft","disabled","onClick","onChange","color","overflowY","map","error","severity","minWidth","aria-label","align","idx","component","scope","checked","e","target","fontWeight","kind","whiteSpace","startIcon"],"mappings":"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"}

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

@@ -0,0 +1,18 @@
+import { ReactElement } from 'react';
+import { ButtonProps } from '@mui/material';
+export interface EditAnnotationsButtonProps extends Pick<ButtonProps, 'fullWidth'> {
+    /**
+     * The variant to use to display the button.
+     */
+    variant?: 'text' | 'outlined';
+    /**
+     * The color to use to display the button.
+     */
+    color?: 'primary' | 'secondary';
+    /**
+     * The label used inside the button.
+     */
+    label?: string;
+}
+export declare function EditAnnotationsButton({ variant, label, color, fullWidth, }: EditAnnotationsButtonProps): ReactElement;
+//# sourceMappingURL=EditAnnotationsButton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EditAnnotationsButton.d.ts","sourceRoot":"","sources":["../../../src/components/Annotations/EditAnnotationsButton.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAY,MAAM,OAAO,CAAC;AAC/C,OAAO,EAAU,WAAW,EAAE,MAAM,eAAe,CAAC;AAQpD,MAAM,WAAW,0BAA2B,SAAQ,IAAI,CAAC,WAAW,EAAE,WAAW,CAAC;IAChF;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IAE9B;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;IAEhC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,qBAAqB,CAAC,EACpC,OAAgB,EAChB,KAAqB,EACrB,KAAiB,EACjB,SAAS,GACV,EAAE,0BAA0B,GAAG,YAAY,CA6C3C"}

package/dist/components/Annotations/EditAnnotationsButton.js

@@ -0,0 +1,70 @@
+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 { useState } from 'react';
+import { Button } from '@mui/material';
+import PencilIcon from 'mdi-material-ui/PencilOutline';
+import { Drawer, InfoTooltip } from '@perses-dev/components';
+import { TOOLTIP_TEXT, editButtonStyle } from '../../constants';
+import { useAnnotationActions, useAnnotationSpecs } from '../../context';
+import { AnnotationEditor } from './AnnotationsEditor';
+export function EditAnnotationsButton({ variant = 'text', label = 'Annotations', color = 'primary', fullWidth }) {
+    const [isAnnotationEditorOpen, setIsAnnotationEditorOpen] = useState(false);
+    const annotationSpecs = useAnnotationSpecs();
+    const { setAnnotationSpecs } = useAnnotationActions();
+    const openAnnotationEditor = ()=>{
+        setIsAnnotationEditorOpen(true);
+    };
+    const closeAnnotationEditor = ()=>{
+        setIsAnnotationEditorOpen(false);
+    };
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx(InfoTooltip, {
+                description: TOOLTIP_TEXT.editAnnotations,
+                children: /*#__PURE__*/ _jsx(Button, {
+                    startIcon: /*#__PURE__*/ _jsx(PencilIcon, {}),
+                    onClick: openAnnotationEditor,
+                    "aria-label": TOOLTIP_TEXT.editAnnotations,
+                    variant: variant,
+                    color: color,
+                    fullWidth: fullWidth,
+                    sx: editButtonStyle,
+                    children: label
+                })
+            }),
+            /*#__PURE__*/ _jsx(Drawer, {
+                isOpen: isAnnotationEditorOpen,
+                onClose: closeAnnotationEditor,
+                slotProps: {
+                    paper: {
+                        sx: {
+                            width: '50%'
+                        }
+                    }
+                },
+                "data-testid": "annotation-editor",
+                children: /*#__PURE__*/ _jsx(AnnotationEditor, {
+                    annotationSpecs: annotationSpecs,
+                    onCancel: closeAnnotationEditor,
+                    onChange: (annotations)=>{
+                        setAnnotationSpecs(annotations);
+                        setIsAnnotationEditorOpen(false);
+                    }
+                })
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=EditAnnotationsButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Annotations/EditAnnotationsButton.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 { ReactElement, useState } from 'react';\nimport { Button, ButtonProps } from '@mui/material';\nimport PencilIcon from 'mdi-material-ui/PencilOutline';\nimport { Drawer, InfoTooltip } from '@perses-dev/components';\nimport { AnnotationSpec } from '@perses-dev/spec';\nimport { TOOLTIP_TEXT, editButtonStyle } from '../../constants';\nimport { useAnnotationActions, useAnnotationSpecs } from '../../context';\nimport { AnnotationEditor } from './AnnotationsEditor';\n\nexport interface EditAnnotationsButtonProps extends Pick<ButtonProps, 'fullWidth'> {\n  /**\n   * The variant to use to display the button.\n   */\n  variant?: 'text' | 'outlined';\n\n  /**\n   * The color to use to display the button.\n   */\n  color?: 'primary' | 'secondary';\n\n  /**\n   * The label used inside the button.\n   */\n  label?: string;\n}\n\nexport function EditAnnotationsButton({\n  variant = 'text',\n  label = 'Annotations',\n  color = 'primary',\n  fullWidth,\n}: EditAnnotationsButtonProps): ReactElement {\n  const [isAnnotationEditorOpen, setIsAnnotationEditorOpen] = useState(false);\n  const annotationSpecs: AnnotationSpec[] = useAnnotationSpecs();\n  const { setAnnotationSpecs } = useAnnotationActions();\n\n  const openAnnotationEditor = (): void => {\n    setIsAnnotationEditorOpen(true);\n  };\n\n  const closeAnnotationEditor = (): void => {\n    setIsAnnotationEditorOpen(false);\n  };\n\n  return (\n    <>\n      <InfoTooltip description={TOOLTIP_TEXT.editAnnotations}>\n        <Button\n          startIcon={<PencilIcon />}\n          onClick={openAnnotationEditor}\n          aria-label={TOOLTIP_TEXT.editAnnotations}\n          variant={variant}\n          color={color}\n          fullWidth={fullWidth}\n          sx={editButtonStyle}\n        >\n          {label}\n        </Button>\n      </InfoTooltip>\n      <Drawer\n        isOpen={isAnnotationEditorOpen}\n        onClose={closeAnnotationEditor}\n        slotProps={{ paper: { sx: { width: '50%' } } }}\n        data-testid=\"annotation-editor\"\n      >\n        <AnnotationEditor\n          annotationSpecs={annotationSpecs}\n          onCancel={closeAnnotationEditor}\n          onChange={(annotations: AnnotationSpec[]) => {\n            setAnnotationSpecs(annotations);\n            setIsAnnotationEditorOpen(false);\n          }}\n        />\n      </Drawer>\n    </>\n  );\n}\n"],"names":["useState","Button","PencilIcon","Drawer","InfoTooltip","TOOLTIP_TEXT","editButtonStyle","useAnnotationActions","useAnnotationSpecs","AnnotationEditor","EditAnnotationsButton","variant","label","color","fullWidth","isAnnotationEditorOpen","setIsAnnotationEditorOpen","annotationSpecs","setAnnotationSpecs","openAnnotationEditor","closeAnnotationEditor","description","editAnnotations","startIcon","onClick","aria-label","sx","isOpen","onClose","slotProps","paper","width","data-testid","onCancel","onChange","annotations"],"mappings":";AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAAuBA,QAAQ,QAAQ,QAAQ;AAC/C,SAASC,MAAM,QAAqB,gBAAgB;AACpD,OAAOC,gBAAgB,gCAAgC;AACvD,SAASC,MAAM,EAAEC,WAAW,QAAQ,yBAAyB;AAE7D,SAASC,YAAY,EAAEC,eAAe,QAAQ,kBAAkB;AAChE,SAASC,oBAAoB,EAAEC,kBAAkB,QAAQ,gBAAgB;AACzE,SAASC,gBAAgB,QAAQ,sBAAsB;AAmBvD,OAAO,SAASC,sBAAsB,EACpCC,UAAU,MAAM,EAChBC,QAAQ,aAAa,EACrBC,QAAQ,SAAS,EACjBC,SAAS,EACkB;IAC3B,MAAM,CAACC,wBAAwBC,0BAA0B,GAAGhB,SAAS;IACrE,MAAMiB,kBAAoCT;IAC1C,MAAM,EAAEU,kBAAkB,EAAE,GAAGX;IAE/B,MAAMY,uBAAuB;QAC3BH,0BAA0B;IAC5B;IAEA,MAAMI,wBAAwB;QAC5BJ,0BAA0B;IAC5B;IAEA,qBACE;;0BACE,KAACZ;gBAAYiB,aAAahB,aAAaiB,eAAe;0BACpD,cAAA,KAACrB;oBACCsB,yBAAW,KAACrB;oBACZsB,SAASL;oBACTM,cAAYpB,aAAaiB,eAAe;oBACxCX,SAASA;oBACTE,OAAOA;oBACPC,WAAWA;oBACXY,IAAIpB;8BAEHM;;;0BAGL,KAACT;gBACCwB,QAAQZ;gBACRa,SAASR;gBACTS,WAAW;oBAAEC,OAAO;wBAAEJ,IAAI;4BAAEK,OAAO;wBAAM;oBAAE;gBAAE;gBAC7CC,eAAY;0BAEZ,cAAA,KAACvB;oBACCQ,iBAAiBA;oBACjBgB,UAAUb;oBACVc,UAAU,CAACC;wBACTjB,mBAAmBiB;wBACnBnB,0BAA0B;oBAC5B;;;;;AAKV"}

package/dist/components/Dashboard/Dashboard.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } 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.
@@ -10,7 +11,6 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box } from '@mui/material';
 import { ErrorBoundary, ErrorAlert } from '@perses-dev/components';
 import { useRef } from 'react';

package/dist/components/Dashboard/Dashboard.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Dashboard/Dashboard.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 { Box, BoxProps } from '@mui/material';\nimport { ErrorBoundary, ErrorAlert } from '@perses-dev/components';\nimport { ReactElement, useRef } from 'react';\nimport { usePanelGroupIds } from '../../context';\nimport { GridLayout } from '../GridLayout';\nimport { EmptyDashboard, EmptyDashboardProps } from '../EmptyDashboard';\nimport { PanelOptions } from '../Panel';\n\nexport type DashboardProps = BoxProps & {\n  /**\n   * Props for `EmptyDashboard` component that will be rendered when the dashboard\n   * is empty (i.e. has no panel groups). If not specified, the defaults will\n   * be used.\n   */\n  emptyDashboardProps?: EmptyDashboardProps;\n  panelOptions?: PanelOptions;\n};\nconst HEADER_HEIGHT = 165; // Approximate height of the header in dashboard view (including the navbar and variables toolbar)\n\n/**\n * Renders a Dashboard for the provided Dashboard spec.\n */\nexport function Dashboard({ emptyDashboardProps, panelOptions, ...boxProps }: DashboardProps): ReactElement {\n  const panelGroupIds = usePanelGroupIds();\n  const boxRef = useRef<HTMLDivElement>(null);\n  const isEmpty = !panelGroupIds.length;\n  const dashboardTopPosition = boxRef.current?.getBoundingClientRect().top ?? HEADER_HEIGHT;\n  const panelFullHeight = window.innerHeight - dashboardTopPosition - window.scrollY;\n\n  return (\n    <Box {...boxProps} sx={{ height: '100%' }} ref={boxRef}>\n      <ErrorBoundary FallbackComponent={ErrorAlert}>\n        {isEmpty && (\n          <Box sx={{ height: '100%', display: 'flex', alignItems: 'center' }}>\n            <EmptyDashboard {...emptyDashboardProps} />\n          </Box>\n        )}\n        {!isEmpty &&\n          panelGroupIds.map((panelGroupId) => (\n            <GridLayout\n              key={panelGroupId}\n              panelGroupId={panelGroupId}\n              panelOptions={panelOptions}\n              panelFullHeight={panelFullHeight}\n            />\n          ))}\n      </ErrorBoundary>\n    </Box>\n  );\n}\n"],"names":["Box","ErrorBoundary","ErrorAlert","useRef","usePanelGroupIds","GridLayout","EmptyDashboard","HEADER_HEIGHT","Dashboard","emptyDashboardProps","panelOptions","boxProps","panelGroupIds","boxRef","isEmpty","length","dashboardTopPosition","current","getBoundingClientRect","top","panelFullHeight","window","innerHeight","scrollY","sx","height","ref","FallbackComponent","display","alignItems","map","panelGroupId"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,GAAG,QAAkB,gBAAgB;AAC9C,SAASC,aAAa,EAAEC,UAAU,QAAQ,yBAAyB;AACnE,SAAuBC,MAAM,QAAQ,QAAQ;AAC7C,SAASC,gBAAgB,QAAQ,gBAAgB;AACjD,SAASC,UAAU,QAAQ,gBAAgB;AAC3C,SAASC,cAAc,QAA6B,oBAAoB;AAYxE,MAAMC,gBAAgB,KAAK,kGAAkG;AAE7H;;CAEC,GACD,OAAO,SAASC,UAAU,EAAEC,mBAAmB,EAAEC,YAAY,EAAE,GAAGC,UAA0B;IAC1F,MAAMC,gBAAgBR;IACtB,MAAMS,SAASV,OAAuB;IACtC,MAAMW,UAAU,CAACF,cAAcG,MAAM;IACrC,MAAMC,uBAAuBH,OAAOI,OAAO,EAAEC,wBAAwBC,OAAOZ;IAC5E,MAAMa,kBAAkBC,OAAOC,WAAW,GAAGN,uBAAuBK,OAAOE,OAAO;IAElF,qBACE,KAACvB;QAAK,GAAGW,QAAQ;QAAEa,IAAI;YAAEC,QAAQ;QAAO;QAAGC,KAAKb;kBAC9C,cAAA,MAACZ;YAAc0B,mBAAmBzB;;gBAC/BY,yBACC,KAACd;oBAAIwB,IAAI;wBAAEC,QAAQ;wBAAQG,SAAS;wBAAQC,YAAY;oBAAS;8BAC/D,cAAA,KAACvB;wBAAgB,GAAGG,mBAAmB;;;gBAG1C,CAACK,WACAF,cAAckB,GAAG,CAAC,CAACC,6BACjB,KAAC1B;wBAEC0B,cAAcA;wBACdrB,cAAcA;wBACdU,iBAAiBA;uBAHZW;;;;AASnB"}
+{"version":3,"sources":["../../../src/components/Dashboard/Dashboard.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 { Box, BoxProps } from '@mui/material';\nimport { ErrorBoundary, ErrorAlert } from '@perses-dev/components';\nimport { ReactElement, useRef } from 'react';\nimport { usePanelGroupIds } from '../../context';\nimport { GridLayout } from '../GridLayout';\nimport { EmptyDashboard, EmptyDashboardProps } from '../EmptyDashboard';\nimport { PanelOptions } from '../Panel';\n\nexport type DashboardProps = BoxProps & {\n  /**\n   * Props for `EmptyDashboard` component that will be rendered when the dashboard\n   * is empty (i.e. has no panel groups). If not specified, the defaults will\n   * be used.\n   */\n  emptyDashboardProps?: EmptyDashboardProps;\n  panelOptions?: PanelOptions;\n};\nconst HEADER_HEIGHT = 165; // Approximate height of the header in dashboard view (including the navbar and variables toolbar)\n\n/**\n * Renders a Dashboard for the provided Dashboard spec.\n */\nexport function Dashboard({ emptyDashboardProps, panelOptions, ...boxProps }: DashboardProps): ReactElement {\n  const panelGroupIds = usePanelGroupIds();\n  const boxRef = useRef<HTMLDivElement>(null);\n  const isEmpty = !panelGroupIds.length;\n  const dashboardTopPosition = boxRef.current?.getBoundingClientRect().top ?? HEADER_HEIGHT;\n  const panelFullHeight = window.innerHeight - dashboardTopPosition - window.scrollY;\n\n  return (\n    <Box {...boxProps} sx={{ height: '100%' }} ref={boxRef}>\n      <ErrorBoundary FallbackComponent={ErrorAlert}>\n        {isEmpty && (\n          <Box sx={{ height: '100%', display: 'flex', alignItems: 'center' }}>\n            <EmptyDashboard {...emptyDashboardProps} />\n          </Box>\n        )}\n        {!isEmpty &&\n          panelGroupIds.map((panelGroupId) => (\n            <GridLayout\n              key={panelGroupId}\n              panelGroupId={panelGroupId}\n              panelOptions={panelOptions}\n              panelFullHeight={panelFullHeight}\n            />\n          ))}\n      </ErrorBoundary>\n    </Box>\n  );\n}\n"],"names":["Box","ErrorBoundary","ErrorAlert","useRef","usePanelGroupIds","GridLayout","EmptyDashboard","HEADER_HEIGHT","Dashboard","emptyDashboardProps","panelOptions","boxProps","panelGroupIds","boxRef","isEmpty","length","dashboardTopPosition","current","getBoundingClientRect","top","panelFullHeight","window","innerHeight","scrollY","sx","height","ref","FallbackComponent","display","alignItems","map","panelGroupId"],"mappings":";AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,GAAG,QAAkB,gBAAgB;AAC9C,SAASC,aAAa,EAAEC,UAAU,QAAQ,yBAAyB;AACnE,SAAuBC,MAAM,QAAQ,QAAQ;AAC7C,SAASC,gBAAgB,QAAQ,gBAAgB;AACjD,SAASC,UAAU,QAAQ,gBAAgB;AAC3C,SAASC,cAAc,QAA6B,oBAAoB;AAYxE,MAAMC,gBAAgB,KAAK,kGAAkG;AAE7H;;CAEC,GACD,OAAO,SAASC,UAAU,EAAEC,mBAAmB,EAAEC,YAAY,EAAE,GAAGC,UAA0B;IAC1F,MAAMC,gBAAgBR;IACtB,MAAMS,SAASV,OAAuB;IACtC,MAAMW,UAAU,CAACF,cAAcG,MAAM;IACrC,MAAMC,uBAAuBH,OAAOI,OAAO,EAAEC,wBAAwBC,OAAOZ;IAC5E,MAAMa,kBAAkBC,OAAOC,WAAW,GAAGN,uBAAuBK,OAAOE,OAAO;IAElF,qBACE,KAACvB;QAAK,GAAGW,QAAQ;QAAEa,IAAI;YAAEC,QAAQ;QAAO;QAAGC,KAAKb;kBAC9C,cAAA,MAACZ;YAAc0B,mBAAmBzB;;gBAC/BY,yBACC,KAACd;oBAAIwB,IAAI;wBAAEC,QAAQ;wBAAQG,SAAS;wBAAQC,YAAY;oBAAS;8BAC/D,cAAA,KAACvB;wBAAgB,GAAGG,mBAAmB;;;gBAG1C,CAACK,WACAF,cAAckB,GAAG,CAAC,CAACC,6BACjB,KAAC1B;wBAEC0B,cAAcA;wBACdrB,cAAcA;wBACdU,iBAAiBA;uBAHZW;;;;AASnB"}