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

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/DashboardToolbar/DashboardToolbar.d.ts

@@ -6,6 +6,7 @@ export interface DashboardToolbarProps {
     initialVariableIsSticky?: boolean;
     isReadonly: boolean;
     isVariableEnabled: boolean;
+    isAnnotationEnabled: boolean;
     isDatasourceEnabled: boolean;
     isLinksEnabled?: boolean;
     onEditButtonClick: () => void;

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

@@ -1 +1 @@
-{"version":3,"file":"DashboardToolbar.d.ts","sourceRoot":"","sources":["../../../src/components/DashboardToolbar/DashboardToolbar.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAChD,OAAO,EAAE,eAAe,EAAkC,MAAM,eAAe,CAAC;AAahF,MAAM,WAAW,qBAAqB;IACpC,aAAa,EAAE,MAAM,CAAC;IACtB,uBAAuB,CAAC,EAAE,SAAS,CAAC;IACpC,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,UAAU,EAAE,OAAO,CAAC;IACpB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,mBAAmB,EAAE,OAAO,CAAC;IAC7B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,iBAAiB,EAAE,MAAM,IAAI,CAAC;IAC9B,mBAAmB,EAAE,MAAM,IAAI,CAAC;IAChC,MAAM,CAAC,EAAE,eAAe,CAAC;CAC1B;AAED,eAAO,MAAM,gBAAgB,UAAW,qBAAqB,KAAG,YAyG/D,CAAC"}
+{"version":3,"file":"DashboardToolbar.d.ts","sourceRoot":"","sources":["../../../src/components/DashboardToolbar/DashboardToolbar.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAChD,OAAO,EAAE,eAAe,EAAkC,MAAM,eAAe,CAAC;AAchF,MAAM,WAAW,qBAAqB;IACpC,aAAa,EAAE,MAAM,CAAC;IACtB,uBAAuB,CAAC,EAAE,SAAS,CAAC;IACpC,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,UAAU,EAAE,OAAO,CAAC;IACpB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,mBAAmB,EAAE,OAAO,CAAC;IAC7B,mBAAmB,EAAE,OAAO,CAAC;IAC7B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,iBAAiB,EAAE,MAAM,IAAI,CAAC;IAC9B,mBAAmB,EAAE,MAAM,IAAI,CAAC;IAChC,MAAM,CAAC,EAAE,eAAe,CAAC;CAC1B;AAED,eAAO,MAAM,gBAAgB,UAAW,qBAAqB,KAAG,YA2G/D,CAAC"}

package/dist/components/DashboardToolbar/DashboardToolbar.js

@@ -24,10 +24,11 @@ import { EditButton } from '../EditButton';
 import { EditJsonButton } from '../EditJsonButton';
 import { SaveDashboardButton } from '../SaveDashboardButton';
 import { DashboardStickyToolbar } from '../DashboardStickyToolbar';
+import { EditAnnotationsButton } from '../Annotations/EditAnnotationsButton';
 import { EditDashboardLinksButton } from '../DashboardLinks';
 import { LinksDisplay } from '../LinksDisplay';
 export 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 } = useEditMode();
     const { timeZone, setTimeZone } = useTimeZoneParams('local');
     const dashboardLinks = useDashboardLinks();
@@ -81,6 +82,7 @@ export const DashboardToolbar = (props)=>{
                                     ml: 1,
                                     whiteSpace: "nowrap",
                                     children: [
+                                        isAnnotationEnabled && /*#__PURE__*/ _jsx(EditAnnotationsButton, {}),
                                         isVariableEnabled && /*#__PURE__*/ _jsx(EditVariablesButton, {}),
                                         isDatasourceEnabled && /*#__PURE__*/ _jsx(EditDatasourcesButton, {}),
                                         isLinksEnabled && /*#__PURE__*/ _jsx(EditDashboardLinksButton, {}),

package/dist/components/DashboardToolbar/DashboardToolbar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/DashboardToolbar/DashboardToolbar.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 { Typography, Stack, Button, Box, useTheme, useMediaQuery, Alert } from '@mui/material';\nimport { ErrorBoundary, ErrorAlert } from '@perses-dev/components';\nimport { TimeRangeControls, useTimeZoneParams } from '@perses-dev/plugin-system';\nimport { ReactElement, ReactNode } from 'react';\nimport { OnSaveDashboard, useEditMode, useDashboardLinks } from '../../context';\nimport { AddPanelButton } from '../AddPanelButton';\nimport { AddGroupButton } from '../AddGroupButton';\nimport { DownloadButton } from '../DownloadButton';\nimport { EditVariablesButton } from '../Variables';\nimport { EditDatasourcesButton } from '../Datasources';\nimport { EditButton } from '../EditButton';\nimport { EditJsonButton } from '../EditJsonButton';\nimport { SaveDashboardButton } from '../SaveDashboardButton';\nimport { DashboardStickyToolbar } from '../DashboardStickyToolbar';\nimport { EditDashboardLinksButton } from '../DashboardLinks';\nimport { LinksDisplay } from '../LinksDisplay';\n\nexport interface DashboardToolbarProps {\n  dashboardName: string;\n  dashboardTitleComponent?: ReactNode;\n  initialVariableIsSticky?: boolean;\n  isReadonly: boolean;\n  isVariableEnabled: boolean;\n  isDatasourceEnabled: boolean;\n  isLinksEnabled?: boolean;\n  onEditButtonClick: () => void;\n  onCancelButtonClick: () => void;\n  onSave?: OnSaveDashboard;\n}\n\nexport const DashboardToolbar = (props: DashboardToolbarProps): ReactElement => {\n  const {\n    dashboardName,\n    dashboardTitleComponent,\n    initialVariableIsSticky,\n    isReadonly,\n    isVariableEnabled,\n    isDatasourceEnabled,\n    isLinksEnabled = true,\n    onEditButtonClick,\n    onCancelButtonClick,\n    onSave,\n  } = props;\n\n  const { isEditMode } = useEditMode();\n  const { timeZone, setTimeZone } = useTimeZoneParams('local');\n  const dashboardLinks = useDashboardLinks();\n\n  const isBiggerThanSm = useMediaQuery(useTheme().breakpoints.up('sm'));\n  const isBiggerThanMd = useMediaQuery(useTheme().breakpoints.up('md'));\n\n  const dashboardTitle = dashboardTitleComponent ? (\n    dashboardTitleComponent\n  ) : (\n    <Typography variant=\"h2\">{dashboardName}</Typography>\n  );\n\n  const testId = 'dashboard-toolbar';\n\n  return (\n    <>\n      <Stack data-testid={testId}>\n        <Box\n          px={2}\n          py={1.5}\n          display=\"flex\"\n          sx={{ gap: 2, backgroundColor: (theme) => theme.palette.primary.main + (isEditMode ? '30' : '0') }}\n        >\n          {dashboardTitle}\n          {isLinksEnabled && (\n            <Stack display=\"flex\" justifyItems=\"center\" alignItems=\"center\" justifyContent=\"center\">\n              <LinksDisplay links={dashboardLinks} variant=\"dashboard\" />\n            </Stack>\n          )}\n          {isEditMode ? (\n            <Stack direction=\"row\" gap={1} ml=\"auto\">\n              {isReadonly && (\n                <Alert severity=\"warning\" sx={{ backgroundColor: 'transparent', padding: 0 }}>\n                  Dashboard managed via code only. Download JSON and commit changes to save.\n                </Alert>\n              )}\n              <Stack direction=\"row\" spacing={0.5} ml={1} whiteSpace=\"nowrap\">\n                {isVariableEnabled && <EditVariablesButton />}\n                {isDatasourceEnabled && <EditDatasourcesButton />}\n                {isLinksEnabled && <EditDashboardLinksButton />}\n                <AddPanelButton />\n                <AddGroupButton />\n              </Stack>\n              <SaveDashboardButton onSave={onSave} isDisabled={isReadonly} />\n              <Button variant=\"outlined\" onClick={onCancelButtonClick}>\n                Cancel\n              </Button>\n            </Stack>\n          ) : (\n            <>\n              {isBiggerThanSm && (\n                <Stack direction=\"row\" gap={1} ml=\"auto\">\n                  <EditButton onClick={onEditButtonClick} />\n                </Stack>\n              )}\n            </>\n          )}\n        </Box>\n        <Box\n          sx={{\n            display: 'flex',\n            width: '100%',\n            alignItems: 'start',\n            padding: (theme) => theme.spacing(1, 2, 0, 2),\n            flexDirection: isBiggerThanMd ? 'row' : 'column',\n            flexWrap: 'nowrap',\n            gap: 1,\n          }}\n        >\n          <Box width=\"100%\">\n            <ErrorBoundary FallbackComponent={ErrorAlert}>\n              <DashboardStickyToolbar\n                initialVariableIsSticky={initialVariableIsSticky}\n                sx={{\n                  backgroundColor: ({ palette }) => palette.background.default,\n                }}\n              />\n            </ErrorBoundary>\n          </Box>\n          <Stack direction=\"row\" ml=\"auto\" flexWrap=\"wrap\" justifyContent=\"end\">\n            <Stack direction=\"row\" spacing={1} mt={1} ml={1}>\n              <TimeRangeControls timeZone={timeZone} onTimeZoneChange={(tz) => setTimeZone(tz.value)} />\n              <DownloadButton />\n              <EditJsonButton isReadonly={!isEditMode} />\n            </Stack>\n          </Stack>\n        </Box>\n      </Stack>\n    </>\n  );\n};\n"],"names":["Typography","Stack","Button","Box","useTheme","useMediaQuery","Alert","ErrorBoundary","ErrorAlert","TimeRangeControls","useTimeZoneParams","useEditMode","useDashboardLinks","AddPanelButton","AddGroupButton","DownloadButton","EditVariablesButton","EditDatasourcesButton","EditButton","EditJsonButton","SaveDashboardButton","DashboardStickyToolbar","EditDashboardLinksButton","LinksDisplay","DashboardToolbar","props","dashboardName","dashboardTitleComponent","initialVariableIsSticky","isReadonly","isVariableEnabled","isDatasourceEnabled","isLinksEnabled","onEditButtonClick","onCancelButtonClick","onSave","isEditMode","timeZone","setTimeZone","dashboardLinks","isBiggerThanSm","breakpoints","up","isBiggerThanMd","dashboardTitle","variant","testId","data-testid","px","py","display","sx","gap","backgroundColor","theme","palette","primary","main","justifyItems","alignItems","justifyContent","links","direction","ml","severity","padding","spacing","whiteSpace","isDisabled","onClick","width","flexDirection","flexWrap","FallbackComponent","background","default","mt","onTimeZoneChange","tz","value"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/DashboardToolbar/DashboardToolbar.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 { Typography, Stack, Button, Box, useTheme, useMediaQuery, Alert } from '@mui/material';\nimport { ErrorBoundary, ErrorAlert } from '@perses-dev/components';\nimport { TimeRangeControls, useTimeZoneParams } from '@perses-dev/plugin-system';\nimport { ReactElement, ReactNode } from 'react';\nimport { OnSaveDashboard, useEditMode, useDashboardLinks } from '../../context';\nimport { AddPanelButton } from '../AddPanelButton';\nimport { AddGroupButton } from '../AddGroupButton';\nimport { DownloadButton } from '../DownloadButton';\nimport { EditVariablesButton } from '../Variables';\nimport { EditDatasourcesButton } from '../Datasources';\nimport { EditButton } from '../EditButton';\nimport { EditJsonButton } from '../EditJsonButton';\nimport { SaveDashboardButton } from '../SaveDashboardButton';\nimport { DashboardStickyToolbar } from '../DashboardStickyToolbar';\nimport { EditAnnotationsButton } from '../Annotations/EditAnnotationsButton';\nimport { EditDashboardLinksButton } from '../DashboardLinks';\nimport { LinksDisplay } from '../LinksDisplay';\n\nexport interface DashboardToolbarProps {\n  dashboardName: string;\n  dashboardTitleComponent?: ReactNode;\n  initialVariableIsSticky?: boolean;\n  isReadonly: boolean;\n  isVariableEnabled: boolean;\n  isAnnotationEnabled: boolean;\n  isDatasourceEnabled: boolean;\n  isLinksEnabled?: boolean;\n  onEditButtonClick: () => void;\n  onCancelButtonClick: () => void;\n  onSave?: OnSaveDashboard;\n}\n\nexport const DashboardToolbar = (props: DashboardToolbarProps): ReactElement => {\n  const {\n    dashboardName,\n    dashboardTitleComponent,\n    initialVariableIsSticky,\n    isReadonly,\n    isVariableEnabled,\n    isAnnotationEnabled,\n    isDatasourceEnabled,\n    isLinksEnabled = true,\n    onEditButtonClick,\n    onCancelButtonClick,\n    onSave,\n  } = props;\n\n  const { isEditMode } = useEditMode();\n  const { timeZone, setTimeZone } = useTimeZoneParams('local');\n  const dashboardLinks = useDashboardLinks();\n\n  const isBiggerThanSm = useMediaQuery(useTheme().breakpoints.up('sm'));\n  const isBiggerThanMd = useMediaQuery(useTheme().breakpoints.up('md'));\n\n  const dashboardTitle = dashboardTitleComponent ? (\n    dashboardTitleComponent\n  ) : (\n    <Typography variant=\"h2\">{dashboardName}</Typography>\n  );\n\n  const testId = 'dashboard-toolbar';\n\n  return (\n    <>\n      <Stack data-testid={testId}>\n        <Box\n          px={2}\n          py={1.5}\n          display=\"flex\"\n          sx={{ gap: 2, backgroundColor: (theme) => theme.palette.primary.main + (isEditMode ? '30' : '0') }}\n        >\n          {dashboardTitle}\n          {isLinksEnabled && (\n            <Stack display=\"flex\" justifyItems=\"center\" alignItems=\"center\" justifyContent=\"center\">\n              <LinksDisplay links={dashboardLinks} variant=\"dashboard\" />\n            </Stack>\n          )}\n          {isEditMode ? (\n            <Stack direction=\"row\" gap={1} ml=\"auto\">\n              {isReadonly && (\n                <Alert severity=\"warning\" sx={{ backgroundColor: 'transparent', padding: 0 }}>\n                  Dashboard managed via code only. Download JSON and commit changes to save.\n                </Alert>\n              )}\n              <Stack direction=\"row\" spacing={0.5} ml={1} whiteSpace=\"nowrap\">\n                {isAnnotationEnabled && <EditAnnotationsButton />}\n                {isVariableEnabled && <EditVariablesButton />}\n                {isDatasourceEnabled && <EditDatasourcesButton />}\n                {isLinksEnabled && <EditDashboardLinksButton />}\n                <AddPanelButton />\n                <AddGroupButton />\n              </Stack>\n              <SaveDashboardButton onSave={onSave} isDisabled={isReadonly} />\n              <Button variant=\"outlined\" onClick={onCancelButtonClick}>\n                Cancel\n              </Button>\n            </Stack>\n          ) : (\n            <>\n              {isBiggerThanSm && (\n                <Stack direction=\"row\" gap={1} ml=\"auto\">\n                  <EditButton onClick={onEditButtonClick} />\n                </Stack>\n              )}\n            </>\n          )}\n        </Box>\n        <Box\n          sx={{\n            display: 'flex',\n            width: '100%',\n            alignItems: 'start',\n            padding: (theme) => theme.spacing(1, 2, 0, 2),\n            flexDirection: isBiggerThanMd ? 'row' : 'column',\n            flexWrap: 'nowrap',\n            gap: 1,\n          }}\n        >\n          <Box width=\"100%\">\n            <ErrorBoundary FallbackComponent={ErrorAlert}>\n              <DashboardStickyToolbar\n                initialVariableIsSticky={initialVariableIsSticky}\n                sx={{\n                  backgroundColor: ({ palette }) => palette.background.default,\n                }}\n              />\n            </ErrorBoundary>\n          </Box>\n          <Stack direction=\"row\" ml=\"auto\" flexWrap=\"wrap\" justifyContent=\"end\">\n            <Stack direction=\"row\" spacing={1} mt={1} ml={1}>\n              <TimeRangeControls timeZone={timeZone} onTimeZoneChange={(tz) => setTimeZone(tz.value)} />\n              <DownloadButton />\n              <EditJsonButton isReadonly={!isEditMode} />\n            </Stack>\n          </Stack>\n        </Box>\n      </Stack>\n    </>\n  );\n};\n"],"names":["Typography","Stack","Button","Box","useTheme","useMediaQuery","Alert","ErrorBoundary","ErrorAlert","TimeRangeControls","useTimeZoneParams","useEditMode","useDashboardLinks","AddPanelButton","AddGroupButton","DownloadButton","EditVariablesButton","EditDatasourcesButton","EditButton","EditJsonButton","SaveDashboardButton","DashboardStickyToolbar","EditAnnotationsButton","EditDashboardLinksButton","LinksDisplay","DashboardToolbar","props","dashboardName","dashboardTitleComponent","initialVariableIsSticky","isReadonly","isVariableEnabled","isAnnotationEnabled","isDatasourceEnabled","isLinksEnabled","onEditButtonClick","onCancelButtonClick","onSave","isEditMode","timeZone","setTimeZone","dashboardLinks","isBiggerThanSm","breakpoints","up","isBiggerThanMd","dashboardTitle","variant","testId","data-testid","px","py","display","sx","gap","backgroundColor","theme","palette","primary","main","justifyItems","alignItems","justifyContent","links","direction","ml","severity","padding","spacing","whiteSpace","isDisabled","onClick","width","flexDirection","flexWrap","FallbackComponent","background","default","mt","onTimeZoneChange","tz","value"],"mappings":"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"}

package/dist/components/Variables/VariableEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VariableEditor.d.ts","sourceRoot":"","sources":["../../../src/components/Variables/VariableEditor.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAqB,MAAM,OAAO,CAAC;AAwBxD,OAAO,EAAE,yBAAyB,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAWjF,OAAO,EAIL,aAAa,EAEd,MAAM,2BAA2B,CAAC;AAEnC,OAAO,EAAE,0BAA0B,EAAE,MAAM,gCAAgC,CAAC;AAwB5E,wBAAgB,cAAc,CAAC,KAAK,EAAE;IACpC,mBAAmB,EAAE,kBAAkB,EAAE,CAAC;IAC1C,2BAA2B,EAAE,0BAA0B,EAAE,CAAC;IAC1D,0BAA0B,EAAE,yBAAyB,EAAE,CAAC;IACxD,QAAQ,EAAE,CAAC,mBAAmB,EAAE,kBAAkB,EAAE,KAAK,IAAI,CAAC;IAC9D,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB,GAAG,YAAY,CAsVf;AAmED,wBAAgB,YAAY,CAAC,KAAK,EAAE;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,aAAa,GAAG,SAAS,CAAA;CAAE,GAAG,YAAY,CAoBpG"}
+{"version":3,"file":"VariableEditor.d.ts","sourceRoot":"","sources":["../../../src/components/Variables/VariableEditor.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAqB,MAAM,OAAO,CAAC;AAwBxD,OAAO,EAAE,yBAAyB,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAWjF,OAAO,EAIL,aAAa,EAEd,MAAM,2BAA2B,CAAC;AAEnC,OAAO,EAAE,0BAA0B,EAAE,MAAM,gCAAgC,CAAC;AAwB5E,wBAAgB,cAAc,CAAC,KAAK,EAAE;IACpC,mBAAmB,EAAE,kBAAkB,EAAE,CAAC;IAC1C,2BAA2B,EAAE,0BAA0B,EAAE,CAAC;IAC1D,0BAA0B,EAAE,yBAAyB,EAAE,CAAC;IACxD,QAAQ,EAAE,CAAC,mBAAmB,EAAE,kBAAkB,EAAE,KAAK,IAAI,CAAC;IAC9D,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB,GAAG,YAAY,CAuVf;AAmED,wBAAgB,YAAY,CAAC,KAAK,EAAE;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,aAAa,GAAG,SAAS,CAAA;CAAE,GAAG,YAAY,CAoBpG"}

package/dist/components/Variables/VariableEditor.js

@@ -60,7 +60,7 @@ export function VariableEditor(props) {
         externalVariableDefinitions,
         variableDefinitions
     ]);
-    const currentEditingVariableDefinition = typeof variableEditIdx === 'number' && variableDefinitions[variableEditIdx];
+    const currentEditingVariableDefinition = variableEditIdx !== null ? variableDefinitions[variableEditIdx] : undefined;
     const { openDiscardChangesConfirmationDialog, closeDiscardChangesConfirmationDialog } = useDiscardChangesConfirmationDialog();
     const handleCancel = ()=>{
         if (JSON.stringify(props.variableDefinitions) !== JSON.stringify(variableDefinitions)) {
@@ -143,7 +143,7 @@ export function VariableEditor(props) {
     };
     return /*#__PURE__*/ _jsxs(_Fragment, {
         children: [
-            currentEditingVariableDefinition && /*#__PURE__*/ _jsx(VariableEditorFormWithContext, {
+            variableEditIdx !== null && currentEditingVariableDefinition && /*#__PURE__*/ _jsx(VariableEditorFormWithContext, {
                 variableDefinitions: variableDefinitions,
                 externalVariableDefinitions: externalVariableDefinitions,
                 builtinVariableDefinitions: builtinVariableDefinitions,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Variables/VariableEditor.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, useMemo, useState } from 'react';\nimport {\n  Accordion,\n  AccordionDetails,\n  AccordionSummary,\n  Alert,\n  Box,\n  Button,\n  capitalize,\n  CircularProgress,\n  IconButton,\n  Stack,\n  styled,\n  Switch,\n  Table,\n  TableBody,\n  TableCell as MuiTableCell,\n  TableContainer,\n  TableHead,\n  TableRow,\n  Tooltip,\n  Typography,\n} from '@mui/material';\nimport AddIcon from 'mdi-material-ui/Plus';\nimport { BuiltinVariableDefinition, VariableDefinition } from '@perses-dev/spec';\nimport { useImmer } from 'use-immer';\nimport PencilIcon from 'mdi-material-ui/Pencil';\nimport CloneIcon from 'mdi-material-ui/ContentCopy';\nimport TrashIcon from 'mdi-material-ui/TrashCan';\nimport ArrowUp from 'mdi-material-ui/ArrowUp';\nimport ArrowDown from 'mdi-material-ui/ArrowDown';\nimport ContentDuplicate from 'mdi-material-ui/ContentDuplicate';\nimport OpenInNewIcon from 'mdi-material-ui/OpenInNew';\nimport ExpandMoreIcon from 'mdi-material-ui/ChevronUp';\n\nimport {\n  ValidationProvider,\n  VARIABLE_TYPES,\n  VariableEditorForm,\n  VariableState,\n  useResolveListVariableValues,\n} from '@perses-dev/plugin-system';\nimport { InfoTooltip, Action } from '@perses-dev/components';\nimport { ExternalVariableDefinition } from '../../model/VariableDefinition';\nimport { useDiscardChangesConfirmationDialog, VariableProvider } from '../../context';\nimport { hydrateVariableDefinitionStates } from '../../context/VariableProvider/hydrationUtils';\nimport { BuiltinVariableAccordions } from './BuiltinVariableAccordions';\n\nfunction getVariableLabelByKind(kind: string): 'List' | 'Text' | undefined {\n  return VARIABLE_TYPES.find((variableType) => variableType.kind === kind)?.label;\n}\n\nfunction getValidation(variableDefinitions: VariableDefinition[]): { isValid: boolean; errors: string[] } {\n  const errors: string[] = [];\n\n  /**  Variable names must be unique */\n  const variableNames = variableDefinitions.map((variableDefinition) => variableDefinition.spec.name);\n  const uniqueVariableNames = new Set(variableNames);\n  if (variableNames.length !== uniqueVariableNames.size) {\n    errors.push('Variable names must be unique');\n  }\n  return {\n    errors: errors,\n    isValid: errors.length === 0,\n  };\n}\n\nexport function VariableEditor(props: {\n  variableDefinitions: VariableDefinition[];\n  externalVariableDefinitions: ExternalVariableDefinition[];\n  builtinVariableDefinitions: BuiltinVariableDefinition[];\n  onChange: (variableDefinitions: VariableDefinition[]) => void;\n  onCancel: () => void;\n}): ReactElement {\n  const [variableDefinitions, setVariableDefinitions] = useImmer(props.variableDefinitions);\n  const [variableEditIdx, setVariableEditIdx] = useState<number | null>(null);\n  const [variableFormAction, setVariableFormAction] = useState<Action>('update');\n\n  const externalVariableDefinitions = props.externalVariableDefinitions;\n  const builtinVariableDefinitions = props.builtinVariableDefinitions;\n  const validation = useMemo(() => getValidation(variableDefinitions), [variableDefinitions]);\n  const [variableState] = useMemo(() => {\n    return [hydrateVariableDefinitionStates(variableDefinitions, {}, externalVariableDefinitions)];\n  }, [externalVariableDefinitions, variableDefinitions]);\n  const currentEditingVariableDefinition = typeof variableEditIdx === 'number' && variableDefinitions[variableEditIdx];\n\n  const { openDiscardChangesConfirmationDialog, closeDiscardChangesConfirmationDialog } =\n    useDiscardChangesConfirmationDialog();\n  const handleCancel = (): void => {\n    if (JSON.stringify(props.variableDefinitions) !== JSON.stringify(variableDefinitions)) {\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 removeVariable = (index: number): void => {\n    setVariableDefinitions((draft) => {\n      draft.splice(index, 1);\n    });\n  };\n\n  const addVariable = (): void => {\n    setVariableFormAction('create');\n    setVariableDefinitions((draft) => {\n      draft.push({\n        kind: 'TextVariable',\n        spec: {\n          name: 'NewVariable',\n          value: '',\n        },\n      });\n    });\n    setVariableEditIdx(variableDefinitions.length);\n  };\n\n  const editVariable = (index: number): void => {\n    setVariableFormAction('update');\n    setVariableEditIdx(index);\n  };\n\n  const toggleVariableVisibility = (index: number, visible: boolean): void => {\n    setVariableDefinitions((draft) => {\n      const v = draft[index];\n      if (!v) {\n        return;\n      }\n      if (!v.spec.display) {\n        v.spec.display = {\n          name: v.spec.name,\n          hidden: false,\n        };\n      }\n      v.spec.display.hidden = visible === false;\n    });\n  };\n\n  const changeVariableOrder = (index: number, direction: 'up' | 'down'): void => {\n    setVariableDefinitions((draft) => {\n      if (direction === 'up') {\n        const prevElement = draft[index - 1];\n        const currentElement = draft[index];\n        if (index === 0 || !prevElement || !currentElement) {\n          return;\n        }\n        draft[index - 1] = currentElement;\n        draft[index] = prevElement;\n      } else {\n        const nextElement = draft[index + 1];\n        const currentElement = draft[index];\n        if (index === draft.length - 1 || !nextElement || !currentElement) {\n          return;\n        }\n        draft[index + 1] = currentElement;\n        draft[index] = nextElement;\n      }\n    });\n  };\n\n  const overrideVariable = (v: VariableDefinition): void => {\n    setVariableDefinitions((draft) => {\n      draft.push(v);\n    });\n  };\n\n  return (\n    <>\n      {currentEditingVariableDefinition && (\n        <VariableEditorFormWithContext\n          variableDefinitions={variableDefinitions}\n          externalVariableDefinitions={externalVariableDefinitions}\n          builtinVariableDefinitions={builtinVariableDefinitions}\n          currentEditingVariableDefinition={currentEditingVariableDefinition}\n          variableFormAction={variableFormAction}\n          onActionChange={setVariableFormAction}\n          onSave={(definition: VariableDefinition) => {\n            setVariableDefinitions((draft) => {\n              draft[variableEditIdx] = definition;\n              setVariableEditIdx(null);\n            });\n          }}\n          onClose={() => {\n            if (variableFormAction === 'create') {\n              removeVariable(variableEditIdx);\n            }\n            setVariableEditIdx(null);\n          }}\n        />\n      )}\n      {!currentEditingVariableDefinition && (\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 Variables</Typography>\n            <Stack direction=\"row\" spacing={1} marginLeft=\"auto\">\n              <Button\n                disabled={props.variableDefinitions === variableDefinitions || !validation.isValid}\n                variant=\"contained\"\n                onClick={() => {\n                  props.onChange(variableDefinitions);\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 variables\">\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                      {variableDefinitions.map((v, idx) => (\n                        <TableRow key={v.spec.name}>\n                          <TableCell component=\"th\" scope=\"row\">\n                            <Switch\n                              checked={v.spec.display?.hidden !== true}\n                              onChange={(e) => {\n                                toggleVariableVisibility(idx, e.target.checked);\n                              }}\n                            />\n                          </TableCell>\n                          <TableCell component=\"th\" scope=\"row\" sx={{ fontWeight: 'bold' }}>\n                            <VariableName name={v.spec.name} state={variableState.get({ name: v.spec.name })} />\n                          </TableCell>\n                          <TableCell>{getVariableLabelByKind(v.kind) ?? v.kind}</TableCell>\n                          <TableCell>{v.spec.display?.description ?? ''}</TableCell>\n                          <TableCell align=\"right\" sx={{ whiteSpace: 'nowrap' }}>\n                            <IconButton onClick={() => changeVariableOrder(idx, 'up')} disabled={idx === 0}>\n                              <ArrowUp />\n                            </IconButton>\n                            <IconButton\n                              onClick={() => changeVariableOrder(idx, 'down')}\n                              disabled={idx === variableDefinitions.length - 1}\n                            >\n                              <ArrowDown />\n                            </IconButton>\n                            <IconButton onClick={() => editVariable(idx)}>\n                              <PencilIcon />\n                            </IconButton>\n                            <IconButton\n                              onClick={() => {\n                                setVariableDefinitions((draft) => {\n                                  if (v.kind === 'TextVariable') {\n                                    draft.push({\n                                      ...v,\n                                      spec: { ...v.spec, value: v.spec.value, name: `${v.spec.name}_copy` },\n                                    });\n                                  } else {\n                                    draft.push({ ...v, spec: { ...v.spec, name: `${v.spec.name}_copy` } });\n                                  }\n                                });\n                              }}\n                            >\n                              <CloneIcon />\n                            </IconButton>\n                            <IconButton onClick={() => removeVariable(idx)}>\n                              <TrashIcon />\n                            </IconButton>\n                          </TableCell>\n                        </TableRow>\n                      ))}\n                    </TableBody>\n                  </Table>\n                </TableContainer>\n                <Box display=\"flex\">\n                  <Button variant=\"contained\" startIcon={<AddIcon />} sx={{ marginLeft: 'auto' }} onClick={addVariable}>\n                    Add Variable\n                  </Button>\n                </Box>\n              </Stack>\n              {externalVariableDefinitions &&\n                !externalVariableDefinitions.every((v) => v.definitions.length === 0) &&\n                externalVariableDefinitions.map(\n                  (extVar, key) =>\n                    extVar.definitions.length > 0 && (\n                      <Accordion\n                        key={key}\n                        sx={(theme) => ({\n                          '.MuiAccordionSummary-root': {\n                            backgroundColor: theme.palette.background.lighter,\n                          },\n                          '.MuiAccordionDetails-root': {\n                            backgroundColor: theme.palette.background.lighter,\n                          },\n                        })}\n                      >\n                        <AccordionSummary\n                          expandIcon={<ExpandMoreIcon />}\n                          aria-controls={extVar.source}\n                          id={extVar.source}\n                        >\n                          <Stack flexDirection=\"row\" alignItems=\"center\" justifyContent=\"start\">\n                            <>\n                              {extVar.tooltip ? (\n                                <Typography variant=\"h2\">\n                                  <InfoTooltip\n                                    title={extVar.tooltip.title || ''}\n                                    description={extVar.tooltip.description || ''}\n                                  >\n                                    <span>{capitalize(extVar.source)} Variables</span>\n                                  </InfoTooltip>\n                                </Typography>\n                              ) : (\n                                <Typography variant=\"h2\">{capitalize(extVar.source)} Variables</Typography>\n                              )}\n                              {extVar.editLink && (\n                                <IconButton href={extVar.editLink} target=\"_blank\">\n                                  <OpenInNewIcon fontSize=\"small\" />\n                                </IconButton>\n                              )}\n                            </>\n                          </Stack>\n                        </AccordionSummary>\n                        <AccordionDetails>\n                          <TableContainer>\n                            <Table sx={{ minWidth: 650 }} aria-label=\"table of external variables\">\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                                {extVar.definitions.map((v) => (\n                                  <TableRow key={v.spec.name}>\n                                    <TableCell component=\"th\" scope=\"row\">\n                                      <Switch checked={v.spec.display?.hidden !== true} disabled />\n                                    </TableCell>\n\n                                    <TableCell component=\"th\" scope=\"row\" sx={{ fontWeight: 'bold' }}>\n                                      <VariableName\n                                        name={v.spec.name}\n                                        state={variableState.get({ name: v.spec.name, source: extVar.source })}\n                                      />\n                                    </TableCell>\n                                    <TableCell>{getVariableLabelByKind(v.kind) ?? v.kind}</TableCell>\n                                    <TableCell>{v.spec.display?.description ?? ''}</TableCell>\n                                    <TableCell align=\"right\">\n                                      <Tooltip title=\"Override\">\n                                        <IconButton\n                                          onClick={() => overrideVariable(v)}\n                                          disabled={!!variableState.get({ name: v.spec.name })}\n                                        >\n                                          <ContentDuplicate />\n                                        </IconButton>\n                                      </Tooltip>\n                                      <IconButton disabled>\n                                        <ArrowUp />\n                                      </IconButton>\n                                      <IconButton disabled>\n                                        <ArrowDown />\n                                      </IconButton>\n                                      <IconButton disabled>\n                                        <PencilIcon />\n                                      </IconButton>\n                                      <IconButton disabled>\n                                        <TrashIcon />\n                                      </IconButton>\n                                    </TableCell>\n                                  </TableRow>\n                                ))}\n                              </TableBody>\n                            </Table>\n                          </TableContainer>\n                        </AccordionDetails>\n                      </Accordion>\n                    )\n                )}\n              {builtinVariableDefinitions && (\n                <BuiltinVariableAccordions builtinVariableDefinitions={builtinVariableDefinitions} />\n              )}\n            </Stack>\n          </Box>\n        </>\n      )}\n    </>\n  );\n}\n\nconst TableCell = styled(MuiTableCell)(({ theme }) => ({\n  borderBottom: `solid 1px ${theme.palette.divider}`,\n}));\n\ninterface VariableEditorFormWithContextProps {\n  variableDefinitions: VariableDefinition[];\n  externalVariableDefinitions: ExternalVariableDefinition[];\n  builtinVariableDefinitions: BuiltinVariableDefinition[];\n  currentEditingVariableDefinition: VariableDefinition;\n  variableFormAction: Action;\n  onActionChange: (action: Action) => void;\n  onSave: (definition: VariableDefinition) => void;\n  onClose: () => void;\n}\n\nfunction VariableEditorFormWithContext({\n  variableDefinitions,\n  externalVariableDefinitions,\n  builtinVariableDefinitions,\n  currentEditingVariableDefinition,\n  variableFormAction,\n  onActionChange,\n  onSave,\n  onClose,\n}: VariableEditorFormWithContextProps): ReactElement | null {\n  const { initialVariableValues, isLoading } = useResolveListVariableValues(variableDefinitions);\n\n  if (isLoading) {\n    return (\n      <Stack\n        sx={{\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'center',\n          height: '100%',\n          width: '100%',\n          overflow: 'hidden',\n        }}\n      >\n        <CircularProgress aria-label=\"loading\" />\n      </Stack>\n    );\n  }\n\n  return (\n    <VariableProvider\n      initialVariableDefinitions={variableDefinitions}\n      externalVariableDefinitions={externalVariableDefinitions}\n      builtinVariableDefinitions={builtinVariableDefinitions}\n      initialVariableValues={initialVariableValues}\n    >\n      <ValidationProvider>\n        <VariableEditorForm\n          initialVariableDefinition={currentEditingVariableDefinition}\n          action={variableFormAction}\n          isDraft={true}\n          onActionChange={onActionChange}\n          onSave={onSave}\n          onClose={onClose}\n        />\n      </ValidationProvider>\n    </VariableProvider>\n  );\n}\n\nexport function VariableName(props: { name: string; state: VariableState | undefined }): ReactElement {\n  const { name, state } = props;\n  return (\n    <>\n      {!state?.overridden && `${name} `}\n      {!state?.overridden && state?.overriding && (\n        <Box fontWeight=\"normal\" color={(theme) => theme.palette.primary.main}>\n          (overriding)\n        </Box>\n      )}\n      {state?.overridden && (\n        <>\n          <Box color={(theme) => theme.palette.grey[500]}>{name}</Box>\n          <Box fontWeight=\"normal\" color={(theme) => theme.palette.grey[500]}>\n            (overridden)\n          </Box>\n        </>\n      )}\n    </>\n  );\n}\n"],"names":["useMemo","useState","Accordion","AccordionDetails","AccordionSummary","Alert","Box","Button","capitalize","CircularProgress","IconButton","Stack","styled","Switch","Table","TableBody","TableCell","MuiTableCell","TableContainer","TableHead","TableRow","Tooltip","Typography","AddIcon","useImmer","PencilIcon","CloneIcon","TrashIcon","ArrowUp","ArrowDown","ContentDuplicate","OpenInNewIcon","ExpandMoreIcon","ValidationProvider","VARIABLE_TYPES","VariableEditorForm","useResolveListVariableValues","InfoTooltip","useDiscardChangesConfirmationDialog","VariableProvider","hydrateVariableDefinitionStates","BuiltinVariableAccordions","getVariableLabelByKind","kind","find","variableType","label","getValidation","variableDefinitions","errors","variableNames","map","variableDefinition","spec","name","uniqueVariableNames","Set","length","size","push","isValid","VariableEditor","props","setVariableDefinitions","variableEditIdx","setVariableEditIdx","variableFormAction","setVariableFormAction","externalVariableDefinitions","builtinVariableDefinitions","validation","variableState","currentEditingVariableDefinition","openDiscardChangesConfirmationDialog","closeDiscardChangesConfirmationDialog","handleCancel","JSON","stringify","onDiscardChanges","onCancel","description","removeVariable","index","draft","splice","addVariable","value","editVariable","toggleVariableVisibility","visible","v","display","hidden","changeVariableOrder","direction","prevElement","currentElement","nextElement","overrideVariable","VariableEditorFormWithContext","onActionChange","onSave","definition","onClose","sx","alignItems","padding","theme","spacing","borderBottom","palette","divider","variant","marginLeft","disabled","onClick","onChange","color","overflowY","error","severity","minWidth","aria-label","align","idx","component","scope","checked","e","target","fontWeight","VariableName","state","get","whiteSpace","startIcon","every","definitions","extVar","key","backgroundColor","background","lighter","expandIcon","aria-controls","source","id","flexDirection","justifyContent","tooltip","title","span","editLink","href","fontSize","initialVariableValues","isLoading","height","width","overflow","initialVariableDefinitions","initialVariableDefinition","action","isDraft","overridden","overriding","primary","main","grey"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/Variables/VariableEditor.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, useMemo, useState } from 'react';\nimport {\n  Accordion,\n  AccordionDetails,\n  AccordionSummary,\n  Alert,\n  Box,\n  Button,\n  capitalize,\n  CircularProgress,\n  IconButton,\n  Stack,\n  styled,\n  Switch,\n  Table,\n  TableBody,\n  TableCell as MuiTableCell,\n  TableContainer,\n  TableHead,\n  TableRow,\n  Tooltip,\n  Typography,\n} from '@mui/material';\nimport AddIcon from 'mdi-material-ui/Plus';\nimport { BuiltinVariableDefinition, VariableDefinition } from '@perses-dev/spec';\nimport { useImmer } from 'use-immer';\nimport PencilIcon from 'mdi-material-ui/Pencil';\nimport CloneIcon from 'mdi-material-ui/ContentCopy';\nimport TrashIcon from 'mdi-material-ui/TrashCan';\nimport ArrowUp from 'mdi-material-ui/ArrowUp';\nimport ArrowDown from 'mdi-material-ui/ArrowDown';\nimport ContentDuplicate from 'mdi-material-ui/ContentDuplicate';\nimport OpenInNewIcon from 'mdi-material-ui/OpenInNew';\nimport ExpandMoreIcon from 'mdi-material-ui/ChevronUp';\n\nimport {\n  ValidationProvider,\n  VARIABLE_TYPES,\n  VariableEditorForm,\n  VariableState,\n  useResolveListVariableValues,\n} from '@perses-dev/plugin-system';\nimport { InfoTooltip, Action } from '@perses-dev/components';\nimport { ExternalVariableDefinition } from '../../model/VariableDefinition';\nimport { useDiscardChangesConfirmationDialog, VariableProvider } from '../../context';\nimport { hydrateVariableDefinitionStates } from '../../context/VariableProvider/hydrationUtils';\nimport { BuiltinVariableAccordions } from './BuiltinVariableAccordions';\n\nfunction getVariableLabelByKind(kind: string): 'List' | 'Text' | undefined {\n  return VARIABLE_TYPES.find((variableType) => variableType.kind === kind)?.label;\n}\n\nfunction getValidation(variableDefinitions: VariableDefinition[]): { isValid: boolean; errors: string[] } {\n  const errors: string[] = [];\n\n  /**  Variable names must be unique */\n  const variableNames = variableDefinitions.map((variableDefinition) => variableDefinition.spec.name);\n  const uniqueVariableNames = new Set(variableNames);\n  if (variableNames.length !== uniqueVariableNames.size) {\n    errors.push('Variable names must be unique');\n  }\n  return {\n    errors: errors,\n    isValid: errors.length === 0,\n  };\n}\n\nexport function VariableEditor(props: {\n  variableDefinitions: VariableDefinition[];\n  externalVariableDefinitions: ExternalVariableDefinition[];\n  builtinVariableDefinitions: BuiltinVariableDefinition[];\n  onChange: (variableDefinitions: VariableDefinition[]) => void;\n  onCancel: () => void;\n}): ReactElement {\n  const [variableDefinitions, setVariableDefinitions] = useImmer(props.variableDefinitions);\n  const [variableEditIdx, setVariableEditIdx] = useState<number | null>(null);\n  const [variableFormAction, setVariableFormAction] = useState<Action>('update');\n\n  const externalVariableDefinitions = props.externalVariableDefinitions;\n  const builtinVariableDefinitions = props.builtinVariableDefinitions;\n  const validation = useMemo(() => getValidation(variableDefinitions), [variableDefinitions]);\n  const [variableState] = useMemo(() => {\n    return [hydrateVariableDefinitionStates(variableDefinitions, {}, externalVariableDefinitions)];\n  }, [externalVariableDefinitions, variableDefinitions]);\n  const currentEditingVariableDefinition: VariableDefinition | undefined =\n    variableEditIdx !== null ? variableDefinitions[variableEditIdx] : undefined;\n\n  const { openDiscardChangesConfirmationDialog, closeDiscardChangesConfirmationDialog } =\n    useDiscardChangesConfirmationDialog();\n  const handleCancel = (): void => {\n    if (JSON.stringify(props.variableDefinitions) !== JSON.stringify(variableDefinitions)) {\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 removeVariable = (index: number): void => {\n    setVariableDefinitions((draft) => {\n      draft.splice(index, 1);\n    });\n  };\n\n  const addVariable = (): void => {\n    setVariableFormAction('create');\n    setVariableDefinitions((draft) => {\n      draft.push({\n        kind: 'TextVariable',\n        spec: {\n          name: 'NewVariable',\n          value: '',\n        },\n      });\n    });\n    setVariableEditIdx(variableDefinitions.length);\n  };\n\n  const editVariable = (index: number): void => {\n    setVariableFormAction('update');\n    setVariableEditIdx(index);\n  };\n\n  const toggleVariableVisibility = (index: number, visible: boolean): void => {\n    setVariableDefinitions((draft) => {\n      const v = draft[index];\n      if (!v) {\n        return;\n      }\n      if (!v.spec.display) {\n        v.spec.display = {\n          name: v.spec.name,\n          hidden: false,\n        };\n      }\n      v.spec.display.hidden = visible === false;\n    });\n  };\n\n  const changeVariableOrder = (index: number, direction: 'up' | 'down'): void => {\n    setVariableDefinitions((draft) => {\n      if (direction === 'up') {\n        const prevElement = draft[index - 1];\n        const currentElement = draft[index];\n        if (index === 0 || !prevElement || !currentElement) {\n          return;\n        }\n        draft[index - 1] = currentElement;\n        draft[index] = prevElement;\n      } else {\n        const nextElement = draft[index + 1];\n        const currentElement = draft[index];\n        if (index === draft.length - 1 || !nextElement || !currentElement) {\n          return;\n        }\n        draft[index + 1] = currentElement;\n        draft[index] = nextElement;\n      }\n    });\n  };\n\n  const overrideVariable = (v: VariableDefinition): void => {\n    setVariableDefinitions((draft) => {\n      draft.push(v);\n    });\n  };\n\n  return (\n    <>\n      {variableEditIdx !== null && currentEditingVariableDefinition && (\n        <VariableEditorFormWithContext\n          variableDefinitions={variableDefinitions}\n          externalVariableDefinitions={externalVariableDefinitions}\n          builtinVariableDefinitions={builtinVariableDefinitions}\n          currentEditingVariableDefinition={currentEditingVariableDefinition}\n          variableFormAction={variableFormAction}\n          onActionChange={setVariableFormAction}\n          onSave={(definition: VariableDefinition) => {\n            setVariableDefinitions((draft) => {\n              draft[variableEditIdx] = definition;\n              setVariableEditIdx(null);\n            });\n          }}\n          onClose={() => {\n            if (variableFormAction === 'create') {\n              removeVariable(variableEditIdx);\n            }\n            setVariableEditIdx(null);\n          }}\n        />\n      )}\n      {!currentEditingVariableDefinition && (\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 Variables</Typography>\n            <Stack direction=\"row\" spacing={1} marginLeft=\"auto\">\n              <Button\n                disabled={props.variableDefinitions === variableDefinitions || !validation.isValid}\n                variant=\"contained\"\n                onClick={() => {\n                  props.onChange(variableDefinitions);\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 variables\">\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                      {variableDefinitions.map((v, idx) => (\n                        <TableRow key={v.spec.name}>\n                          <TableCell component=\"th\" scope=\"row\">\n                            <Switch\n                              checked={v.spec.display?.hidden !== true}\n                              onChange={(e) => {\n                                toggleVariableVisibility(idx, e.target.checked);\n                              }}\n                            />\n                          </TableCell>\n                          <TableCell component=\"th\" scope=\"row\" sx={{ fontWeight: 'bold' }}>\n                            <VariableName name={v.spec.name} state={variableState.get({ name: v.spec.name })} />\n                          </TableCell>\n                          <TableCell>{getVariableLabelByKind(v.kind) ?? v.kind}</TableCell>\n                          <TableCell>{v.spec.display?.description ?? ''}</TableCell>\n                          <TableCell align=\"right\" sx={{ whiteSpace: 'nowrap' }}>\n                            <IconButton onClick={() => changeVariableOrder(idx, 'up')} disabled={idx === 0}>\n                              <ArrowUp />\n                            </IconButton>\n                            <IconButton\n                              onClick={() => changeVariableOrder(idx, 'down')}\n                              disabled={idx === variableDefinitions.length - 1}\n                            >\n                              <ArrowDown />\n                            </IconButton>\n                            <IconButton onClick={() => editVariable(idx)}>\n                              <PencilIcon />\n                            </IconButton>\n                            <IconButton\n                              onClick={() => {\n                                setVariableDefinitions((draft) => {\n                                  if (v.kind === 'TextVariable') {\n                                    draft.push({\n                                      ...v,\n                                      spec: { ...v.spec, value: v.spec.value, name: `${v.spec.name}_copy` },\n                                    });\n                                  } else {\n                                    draft.push({ ...v, spec: { ...v.spec, name: `${v.spec.name}_copy` } });\n                                  }\n                                });\n                              }}\n                            >\n                              <CloneIcon />\n                            </IconButton>\n                            <IconButton onClick={() => removeVariable(idx)}>\n                              <TrashIcon />\n                            </IconButton>\n                          </TableCell>\n                        </TableRow>\n                      ))}\n                    </TableBody>\n                  </Table>\n                </TableContainer>\n                <Box display=\"flex\">\n                  <Button variant=\"contained\" startIcon={<AddIcon />} sx={{ marginLeft: 'auto' }} onClick={addVariable}>\n                    Add Variable\n                  </Button>\n                </Box>\n              </Stack>\n              {externalVariableDefinitions &&\n                !externalVariableDefinitions.every((v) => v.definitions.length === 0) &&\n                externalVariableDefinitions.map(\n                  (extVar, key) =>\n                    extVar.definitions.length > 0 && (\n                      <Accordion\n                        key={key}\n                        sx={(theme) => ({\n                          '.MuiAccordionSummary-root': {\n                            backgroundColor: theme.palette.background.lighter,\n                          },\n                          '.MuiAccordionDetails-root': {\n                            backgroundColor: theme.palette.background.lighter,\n                          },\n                        })}\n                      >\n                        <AccordionSummary\n                          expandIcon={<ExpandMoreIcon />}\n                          aria-controls={extVar.source}\n                          id={extVar.source}\n                        >\n                          <Stack flexDirection=\"row\" alignItems=\"center\" justifyContent=\"start\">\n                            <>\n                              {extVar.tooltip ? (\n                                <Typography variant=\"h2\">\n                                  <InfoTooltip\n                                    title={extVar.tooltip.title || ''}\n                                    description={extVar.tooltip.description || ''}\n                                  >\n                                    <span>{capitalize(extVar.source)} Variables</span>\n                                  </InfoTooltip>\n                                </Typography>\n                              ) : (\n                                <Typography variant=\"h2\">{capitalize(extVar.source)} Variables</Typography>\n                              )}\n                              {extVar.editLink && (\n                                <IconButton href={extVar.editLink} target=\"_blank\">\n                                  <OpenInNewIcon fontSize=\"small\" />\n                                </IconButton>\n                              )}\n                            </>\n                          </Stack>\n                        </AccordionSummary>\n                        <AccordionDetails>\n                          <TableContainer>\n                            <Table sx={{ minWidth: 650 }} aria-label=\"table of external variables\">\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                                {extVar.definitions.map((v) => (\n                                  <TableRow key={v.spec.name}>\n                                    <TableCell component=\"th\" scope=\"row\">\n                                      <Switch checked={v.spec.display?.hidden !== true} disabled />\n                                    </TableCell>\n\n                                    <TableCell component=\"th\" scope=\"row\" sx={{ fontWeight: 'bold' }}>\n                                      <VariableName\n                                        name={v.spec.name}\n                                        state={variableState.get({ name: v.spec.name, source: extVar.source })}\n                                      />\n                                    </TableCell>\n                                    <TableCell>{getVariableLabelByKind(v.kind) ?? v.kind}</TableCell>\n                                    <TableCell>{v.spec.display?.description ?? ''}</TableCell>\n                                    <TableCell align=\"right\">\n                                      <Tooltip title=\"Override\">\n                                        <IconButton\n                                          onClick={() => overrideVariable(v)}\n                                          disabled={!!variableState.get({ name: v.spec.name })}\n                                        >\n                                          <ContentDuplicate />\n                                        </IconButton>\n                                      </Tooltip>\n                                      <IconButton disabled>\n                                        <ArrowUp />\n                                      </IconButton>\n                                      <IconButton disabled>\n                                        <ArrowDown />\n                                      </IconButton>\n                                      <IconButton disabled>\n                                        <PencilIcon />\n                                      </IconButton>\n                                      <IconButton disabled>\n                                        <TrashIcon />\n                                      </IconButton>\n                                    </TableCell>\n                                  </TableRow>\n                                ))}\n                              </TableBody>\n                            </Table>\n                          </TableContainer>\n                        </AccordionDetails>\n                      </Accordion>\n                    )\n                )}\n              {builtinVariableDefinitions && (\n                <BuiltinVariableAccordions builtinVariableDefinitions={builtinVariableDefinitions} />\n              )}\n            </Stack>\n          </Box>\n        </>\n      )}\n    </>\n  );\n}\n\nconst TableCell = styled(MuiTableCell)(({ theme }) => ({\n  borderBottom: `solid 1px ${theme.palette.divider}`,\n}));\n\ninterface VariableEditorFormWithContextProps {\n  variableDefinitions: VariableDefinition[];\n  externalVariableDefinitions: ExternalVariableDefinition[];\n  builtinVariableDefinitions: BuiltinVariableDefinition[];\n  currentEditingVariableDefinition: VariableDefinition;\n  variableFormAction: Action;\n  onActionChange: (action: Action) => void;\n  onSave: (definition: VariableDefinition) => void;\n  onClose: () => void;\n}\n\nfunction VariableEditorFormWithContext({\n  variableDefinitions,\n  externalVariableDefinitions,\n  builtinVariableDefinitions,\n  currentEditingVariableDefinition,\n  variableFormAction,\n  onActionChange,\n  onSave,\n  onClose,\n}: VariableEditorFormWithContextProps): ReactElement | null {\n  const { initialVariableValues, isLoading } = useResolveListVariableValues(variableDefinitions);\n\n  if (isLoading) {\n    return (\n      <Stack\n        sx={{\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'center',\n          height: '100%',\n          width: '100%',\n          overflow: 'hidden',\n        }}\n      >\n        <CircularProgress aria-label=\"loading\" />\n      </Stack>\n    );\n  }\n\n  return (\n    <VariableProvider\n      initialVariableDefinitions={variableDefinitions}\n      externalVariableDefinitions={externalVariableDefinitions}\n      builtinVariableDefinitions={builtinVariableDefinitions}\n      initialVariableValues={initialVariableValues}\n    >\n      <ValidationProvider>\n        <VariableEditorForm\n          initialVariableDefinition={currentEditingVariableDefinition}\n          action={variableFormAction}\n          isDraft={true}\n          onActionChange={onActionChange}\n          onSave={onSave}\n          onClose={onClose}\n        />\n      </ValidationProvider>\n    </VariableProvider>\n  );\n}\n\nexport function VariableName(props: { name: string; state: VariableState | undefined }): ReactElement {\n  const { name, state } = props;\n  return (\n    <>\n      {!state?.overridden && `${name} `}\n      {!state?.overridden && state?.overriding && (\n        <Box fontWeight=\"normal\" color={(theme) => theme.palette.primary.main}>\n          (overriding)\n        </Box>\n      )}\n      {state?.overridden && (\n        <>\n          <Box color={(theme) => theme.palette.grey[500]}>{name}</Box>\n          <Box fontWeight=\"normal\" color={(theme) => theme.palette.grey[500]}>\n            (overridden)\n          </Box>\n        </>\n      )}\n    </>\n  );\n}\n"],"names":["useMemo","useState","Accordion","AccordionDetails","AccordionSummary","Alert","Box","Button","capitalize","CircularProgress","IconButton","Stack","styled","Switch","Table","TableBody","TableCell","MuiTableCell","TableContainer","TableHead","TableRow","Tooltip","Typography","AddIcon","useImmer","PencilIcon","CloneIcon","TrashIcon","ArrowUp","ArrowDown","ContentDuplicate","OpenInNewIcon","ExpandMoreIcon","ValidationProvider","VARIABLE_TYPES","VariableEditorForm","useResolveListVariableValues","InfoTooltip","useDiscardChangesConfirmationDialog","VariableProvider","hydrateVariableDefinitionStates","BuiltinVariableAccordions","getVariableLabelByKind","kind","find","variableType","label","getValidation","variableDefinitions","errors","variableNames","map","variableDefinition","spec","name","uniqueVariableNames","Set","length","size","push","isValid","VariableEditor","props","setVariableDefinitions","variableEditIdx","setVariableEditIdx","variableFormAction","setVariableFormAction","externalVariableDefinitions","builtinVariableDefinitions","validation","variableState","currentEditingVariableDefinition","undefined","openDiscardChangesConfirmationDialog","closeDiscardChangesConfirmationDialog","handleCancel","JSON","stringify","onDiscardChanges","onCancel","description","removeVariable","index","draft","splice","addVariable","value","editVariable","toggleVariableVisibility","visible","v","display","hidden","changeVariableOrder","direction","prevElement","currentElement","nextElement","overrideVariable","VariableEditorFormWithContext","onActionChange","onSave","definition","onClose","sx","alignItems","padding","theme","spacing","borderBottom","palette","divider","variant","marginLeft","disabled","onClick","onChange","color","overflowY","error","severity","minWidth","aria-label","align","idx","component","scope","checked","e","target","fontWeight","VariableName","state","get","whiteSpace","startIcon","every","definitions","extVar","key","backgroundColor","background","lighter","expandIcon","aria-controls","source","id","flexDirection","justifyContent","tooltip","title","span","editLink","href","fontSize","initialVariableValues","isLoading","height","width","overflow","initialVariableDefinitions","initialVariableDefinition","action","isDraft","overridden","overriding","primary","main","grey"],"mappings":"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"}

package/dist/constants/user-interface-text.d.ts

@@ -5,6 +5,7 @@ export declare const TOOLTIP_TEXT: {
     editJson: string;
     editLinks: string;
     editVariables: string;
+    editAnnotations: string;
     viewJson: string;
     addPanelToGroup: string;
     deleteGroup: string;

package/dist/constants/user-interface-text.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"user-interface-text.d.ts","sourceRoot":"","sources":["../../src/constants/user-interface-text.ts"],"names":[],"mappings":"AAaA,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;CAyBxB,CAAC;AAEF,eAAO,MAAM,eAAe;iCAEG,MAAM,KAAG,MAAM;6BACnB,MAAM,KAAG,MAAM;2BACjB,MAAM,KAAG,MAAM;+BACX,MAAM,KAAG,MAAM;6BACjB,MAAM,KAAG,MAAM;4BAEhB,MAAM,KAAG,MAAM;4BAEf,MAAM,KAAG,MAAM;iCACV,MAAM,KAAG,MAAM;8BAClB,MAAM,KAAG,MAAM;mCACV,MAAM,KAAG,MAAM;4BAEtB,MAAM,KAAG,MAAM;gCACX,MAAM,KAAG,MAAM;CAE5C,CAAC"}
+{"version":3,"file":"user-interface-text.d.ts","sourceRoot":"","sources":["../../src/constants/user-interface-text.ts"],"names":[],"mappings":"AAaA,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;CA0BxB,CAAC;AAEF,eAAO,MAAM,eAAe;iCAEG,MAAM,KAAG,MAAM;6BACnB,MAAM,KAAG,MAAM;2BACjB,MAAM,KAAG,MAAM;+BACX,MAAM,KAAG,MAAM;6BACjB,MAAM,KAAG,MAAM;4BAEhB,MAAM,KAAG,MAAM;4BAEf,MAAM,KAAG,MAAM;iCACV,MAAM,KAAG,MAAM;8BAClB,MAAM,KAAG,MAAM;mCACV,MAAM,KAAG,MAAM;4BAEtB,MAAM,KAAG,MAAM;gCACX,MAAM,KAAG,MAAM;CAE5C,CAAC"}

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

@@ -18,6 +18,7 @@ export 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/constants/user-interface-text.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/constants/user-interface-text.ts"],"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\nexport const TOOLTIP_TEXT = {\n  // Toolbar buttons\n  addPanel: 'Add panel',\n  addGroup: 'Add panel group',\n  editDatasources: 'Edit datasources',\n  editJson: 'Edit JSON',\n  editLinks: 'Edit links',\n  editVariables: 'Edit variables',\n  viewJson: 'View JSON',\n  // Group buttons\n  addPanelToGroup: 'Add panel to group',\n  deleteGroup: 'Delete group',\n  editGroup: 'Edit group',\n  moveGroupDown: 'Move group down',\n  moveGroupUp: 'Move group up',\n  // Panel buttons\n  viewPanel: 'Toggle View Mode',\n  editPanel: 'Edit',\n  duplicatePanel: 'Duplicate',\n  deletePanel: 'Delete',\n  movePanel: 'Move',\n  // Variable editor buttons\n  refreshVariableValues: 'Refresh values',\n  copyVariableValues: 'Copy values to clipboard',\n  queryView: 'Open query view',\n};\n\nexport const ARIA_LABEL_TEXT = {\n  // Group buttons\n  addPanelToGroup: (groupName: string): string => `add panel to group ${groupName}`,\n  deleteGroup: (groupName: string): string => `delete group ${groupName}`,\n  editGroup: (groupName: string): string => `edit group ${groupName}`,\n  moveGroupDown: (groupName: string): string => `move group ${groupName} down`,\n  moveGroupUp: (groupName: string): string => `move group ${groupName} up`,\n  // Panel buttons\n  viewPanel: (panelName?: string): string =>\n    panelName ? `toggle panel ${panelName} view mode` : 'toggle panel view mode',\n  editPanel: (panelName?: string): string => (panelName ? `edit panel ${panelName}` : 'edit panel'),\n  duplicatePanel: (panelName?: string): string => (panelName ? `duplicate panel ${panelName}` : 'duplicate panel'),\n  deletePanel: (panelName?: string): string => (panelName ? `delete panel ${panelName}` : 'delete panel'),\n  showPanelActions: (panelName?: string): string =>\n    panelName ? `show panel actions for ${panelName}` : 'show panel actions',\n  movePanel: (panelName?: string): string => (panelName ? `move panel ${panelName}` : 'move panel'),\n  openQueryView: (panelName?: string): string =>\n    panelName ? `open query view for panel ${panelName}` : 'open query view for panel',\n};\n"],"names":["TOOLTIP_TEXT","addPanel","addGroup","editDatasources","editJson","editLinks","editVariables","viewJson","addPanelToGroup","deleteGroup","editGroup","moveGroupDown","moveGroupUp","viewPanel","editPanel","duplicatePanel","deletePanel","movePanel","refreshVariableValues","copyVariableValues","queryView","ARIA_LABEL_TEXT","groupName","panelName","showPanelActions","openQueryView"],"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,OAAO,MAAMA,eAAe;IAC1B,kBAAkB;IAClBC,UAAU;IACVC,UAAU;IACVC,iBAAiB;IACjBC,UAAU;IACVC,WAAW;IACXC,eAAe;IACfC,UAAU;IACV,gBAAgB;IAChBC,iBAAiB;IACjBC,aAAa;IACbC,WAAW;IACXC,eAAe;IACfC,aAAa;IACb,gBAAgB;IAChBC,WAAW;IACXC,WAAW;IACXC,gBAAgB;IAChBC,aAAa;IACbC,WAAW;IACX,0BAA0B;IAC1BC,uBAAuB;IACvBC,oBAAoB;IACpBC,WAAW;AACb,EAAE;AAEF,OAAO,MAAMC,kBAAkB;IAC7B,gBAAgB;IAChBb,iBAAiB,CAACc,YAA8B,CAAC,mBAAmB,EAAEA,WAAW;IACjFb,aAAa,CAACa,YAA8B,CAAC,aAAa,EAAEA,WAAW;IACvEZ,WAAW,CAACY,YAA8B,CAAC,WAAW,EAAEA,WAAW;IACnEX,eAAe,CAACW,YAA8B,CAAC,WAAW,EAAEA,UAAU,KAAK,CAAC;IAC5EV,aAAa,CAACU,YAA8B,CAAC,WAAW,EAAEA,UAAU,GAAG,CAAC;IACxE,gBAAgB;IAChBT,WAAW,CAACU,YACVA,YAAY,CAAC,aAAa,EAAEA,UAAU,UAAU,CAAC,GAAG;IACtDT,WAAW,CAACS,YAAgCA,YAAY,CAAC,WAAW,EAAEA,WAAW,GAAG;IACpFR,gBAAgB,CAACQ,YAAgCA,YAAY,CAAC,gBAAgB,EAAEA,WAAW,GAAG;IAC9FP,aAAa,CAACO,YAAgCA,YAAY,CAAC,aAAa,EAAEA,WAAW,GAAG;IACxFC,kBAAkB,CAACD,YACjBA,YAAY,CAAC,uBAAuB,EAAEA,WAAW,GAAG;IACtDN,WAAW,CAACM,YAAgCA,YAAY,CAAC,WAAW,EAAEA,WAAW,GAAG;IACpFE,eAAe,CAACF,YACdA,YAAY,CAAC,0BAA0B,EAAEA,WAAW,GAAG;AAC3D,EAAE"}
+{"version":3,"sources":["../../src/constants/user-interface-text.ts"],"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\nexport const TOOLTIP_TEXT = {\n  // Toolbar buttons\n  addPanel: 'Add panel',\n  addGroup: 'Add panel group',\n  editDatasources: 'Edit datasources',\n  editJson: 'Edit JSON',\n  editLinks: 'Edit links',\n  editVariables: 'Edit variables',\n  editAnnotations: 'Edit annotations',\n  viewJson: 'View JSON',\n  // Group buttons\n  addPanelToGroup: 'Add panel to group',\n  deleteGroup: 'Delete group',\n  editGroup: 'Edit group',\n  moveGroupDown: 'Move group down',\n  moveGroupUp: 'Move group up',\n  // Panel buttons\n  viewPanel: 'Toggle View Mode',\n  editPanel: 'Edit',\n  duplicatePanel: 'Duplicate',\n  deletePanel: 'Delete',\n  movePanel: 'Move',\n  // Variable editor buttons\n  refreshVariableValues: 'Refresh values',\n  copyVariableValues: 'Copy values to clipboard',\n  queryView: 'Open query view',\n};\n\nexport const ARIA_LABEL_TEXT = {\n  // Group buttons\n  addPanelToGroup: (groupName: string): string => `add panel to group ${groupName}`,\n  deleteGroup: (groupName: string): string => `delete group ${groupName}`,\n  editGroup: (groupName: string): string => `edit group ${groupName}`,\n  moveGroupDown: (groupName: string): string => `move group ${groupName} down`,\n  moveGroupUp: (groupName: string): string => `move group ${groupName} up`,\n  // Panel buttons\n  viewPanel: (panelName?: string): string =>\n    panelName ? `toggle panel ${panelName} view mode` : 'toggle panel view mode',\n  editPanel: (panelName?: string): string => (panelName ? `edit panel ${panelName}` : 'edit panel'),\n  duplicatePanel: (panelName?: string): string => (panelName ? `duplicate panel ${panelName}` : 'duplicate panel'),\n  deletePanel: (panelName?: string): string => (panelName ? `delete panel ${panelName}` : 'delete panel'),\n  showPanelActions: (panelName?: string): string =>\n    panelName ? `show panel actions for ${panelName}` : 'show panel actions',\n  movePanel: (panelName?: string): string => (panelName ? `move panel ${panelName}` : 'move panel'),\n  openQueryView: (panelName?: string): string =>\n    panelName ? `open query view for panel ${panelName}` : 'open query view for panel',\n};\n"],"names":["TOOLTIP_TEXT","addPanel","addGroup","editDatasources","editJson","editLinks","editVariables","editAnnotations","viewJson","addPanelToGroup","deleteGroup","editGroup","moveGroupDown","moveGroupUp","viewPanel","editPanel","duplicatePanel","deletePanel","movePanel","refreshVariableValues","copyVariableValues","queryView","ARIA_LABEL_TEXT","groupName","panelName","showPanelActions","openQueryView"],"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,OAAO,MAAMA,eAAe;IAC1B,kBAAkB;IAClBC,UAAU;IACVC,UAAU;IACVC,iBAAiB;IACjBC,UAAU;IACVC,WAAW;IACXC,eAAe;IACfC,iBAAiB;IACjBC,UAAU;IACV,gBAAgB;IAChBC,iBAAiB;IACjBC,aAAa;IACbC,WAAW;IACXC,eAAe;IACfC,aAAa;IACb,gBAAgB;IAChBC,WAAW;IACXC,WAAW;IACXC,gBAAgB;IAChBC,aAAa;IACbC,WAAW;IACX,0BAA0B;IAC1BC,uBAAuB;IACvBC,oBAAoB;IACpBC,WAAW;AACb,EAAE;AAEF,OAAO,MAAMC,kBAAkB;IAC7B,gBAAgB;IAChBb,iBAAiB,CAACc,YAA8B,CAAC,mBAAmB,EAAEA,WAAW;IACjFb,aAAa,CAACa,YAA8B,CAAC,aAAa,EAAEA,WAAW;IACvEZ,WAAW,CAACY,YAA8B,CAAC,WAAW,EAAEA,WAAW;IACnEX,eAAe,CAACW,YAA8B,CAAC,WAAW,EAAEA,UAAU,KAAK,CAAC;IAC5EV,aAAa,CAACU,YAA8B,CAAC,WAAW,EAAEA,UAAU,GAAG,CAAC;IACxE,gBAAgB;IAChBT,WAAW,CAACU,YACVA,YAAY,CAAC,aAAa,EAAEA,UAAU,UAAU,CAAC,GAAG;IACtDT,WAAW,CAACS,YAAgCA,YAAY,CAAC,WAAW,EAAEA,WAAW,GAAG;IACpFR,gBAAgB,CAACQ,YAAgCA,YAAY,CAAC,gBAAgB,EAAEA,WAAW,GAAG;IAC9FP,aAAa,CAACO,YAAgCA,YAAY,CAAC,aAAa,EAAEA,WAAW,GAAG;IACxFC,kBAAkB,CAACD,YACjBA,YAAY,CAAC,uBAAuB,EAAEA,WAAW,GAAG;IACtDN,WAAW,CAACM,YAAgCA,YAAY,CAAC,WAAW,EAAEA,WAAW,GAAG;IACpFE,eAAe,CAACF,YACdA,YAAY,CAAC,0BAA0B,EAAEA,WAAW,GAAG;AAC3D,EAAE"}

package/dist/context/AnnotationProvider/AnnotationHydrationWrapper.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+interface AnnotationHydrationWrapperProps {
+    children: ReactNode;
+}
+export declare function AnnotationHydrationWrapper({ children }: AnnotationHydrationWrapperProps): ReactNode;
+export {};
+//# sourceMappingURL=AnnotationHydrationWrapper.d.ts.map

package/dist/context/AnnotationProvider/AnnotationHydrationWrapper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnnotationHydrationWrapper.d.ts","sourceRoot":"","sources":["../../../src/context/AnnotationProvider/AnnotationHydrationWrapper.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,SAAS,EAAa,MAAM,OAAO,CAAC;AAM7C,UAAU,+BAA+B;IACvC,QAAQ,EAAE,SAAS,CAAC;CACrB;AASD,wBAAgB,0BAA0B,CAAC,EAAE,QAAQ,EAAE,EAAE,+BAA+B,GAAG,SAAS,CAmBnG"}

package/dist/context/AnnotationProvider/AnnotationHydrationWrapper.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, 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 { useEffect } from 'react';
+import { useAnnotations } from '@perses-dev/plugin-system';
+import { useAnnotationActions, useAnnotationSpecs } from './AnnotationProvider';
+/*
+ * This component is responsible for hydrating the annotation states in the store.
+ * It should be used inside the AnnotationProvider, and will fetch the annotations data and update the store accordingly.
+ *
+ * Contrary to VariableProvider that is hydrating variable state at input component level, annotations don't have component
+ * that can trigger the hydration manually, so we need to do it at provider level.
+ */ export function AnnotationHydrationWrapper({ children }) {
+    const annotationSpecs = useAnnotationSpecs();
+    const { setAnnotationState } = useAnnotationActions();
+    const annotations = useAnnotations(annotationSpecs);
+    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__*/ _jsx(_Fragment, {
+        children: children
+    });
+}
+
+//# sourceMappingURL=AnnotationHydrationWrapper.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/context/AnnotationProvider/AnnotationHydrationWrapper.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 { ReactNode, useEffect } from 'react';\nimport { AnnotationData } from '@perses-dev/spec';\nimport { useAnnotations } from '@perses-dev/plugin-system';\nimport { UseQueryResult } from '@tanstack/react-query';\nimport { useAnnotationActions, useAnnotationSpecs } from './AnnotationProvider';\n\ninterface AnnotationHydrationWrapperProps {\n  children: ReactNode;\n}\n\n/*\n * This component is responsible for hydrating the annotation states in the store.\n * It should be used inside the AnnotationProvider, and will fetch the annotations data and update the store accordingly.\n *\n * Contrary to VariableProvider that is hydrating variable state at input component level, annotations don't have component\n * that can trigger the hydration manually, so we need to do it at provider level.\n */\nexport function AnnotationHydrationWrapper({ children }: AnnotationHydrationWrapperProps): ReactNode {\n  const annotationSpecs = useAnnotationSpecs();\n  const { setAnnotationState } = useAnnotationActions();\n  const annotations: Array<UseQueryResult<AnnotationData[]>> = useAnnotations(annotationSpecs);\n\n  useEffect(() => {\n    for (const [index, definition] of annotationSpecs.entries()) {\n      const query = annotations[index] ?? null;\n      if (query) {\n        setAnnotationState(definition.display.name, {\n          data: query.data ?? null,\n          isPending: query.isLoading,\n          error: (query?.error as Error) ?? null,\n        });\n      }\n    }\n  }, [annotationSpecs, annotations, setAnnotationState]);\n\n  return <>{children}</>;\n}\n"],"names":["useEffect","useAnnotations","useAnnotationActions","useAnnotationSpecs","AnnotationHydrationWrapper","children","annotationSpecs","setAnnotationState","annotations","index","definition","entries","query","display","name","data","isPending","isLoading","error"],"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,SAAoBA,SAAS,QAAQ,QAAQ;AAE7C,SAASC,cAAc,QAAQ,4BAA4B;AAE3D,SAASC,oBAAoB,EAAEC,kBAAkB,QAAQ,uBAAuB;AAMhF;;;;;;CAMC,GACD,OAAO,SAASC,2BAA2B,EAAEC,QAAQ,EAAmC;IACtF,MAAMC,kBAAkBH;IACxB,MAAM,EAAEI,kBAAkB,EAAE,GAAGL;IAC/B,MAAMM,cAAuDP,eAAeK;IAE5EN,UAAU;QACR,KAAK,MAAM,CAACS,OAAOC,WAAW,IAAIJ,gBAAgBK,OAAO,GAAI;YAC3D,MAAMC,QAAQJ,WAAW,CAACC,MAAM,IAAI;YACpC,IAAIG,OAAO;gBACTL,mBAAmBG,WAAWG,OAAO,CAACC,IAAI,EAAE;oBAC1CC,MAAMH,MAAMG,IAAI,IAAI;oBACpBC,WAAWJ,MAAMK,SAAS;oBAC1BC,OAAO,AAACN,OAAOM,SAAmB;gBACpC;YACF;QACF;IACF,GAAG;QAACZ;QAAiBE;QAAaD;KAAmB;IAErD,qBAAO;kBAAGF;;AACZ"}

package/dist/context/AnnotationProvider/AnnotationProvider.d.ts

@@ -0,0 +1,40 @@
+import { ReactNode } from 'react';
+import { AnnotationData, AnnotationSpec } from '@perses-dev/spec';
+import { StoreApi } from 'zustand';
+export type AnnotationState = {
+    data: AnnotationData[] | null;
+    isPending: boolean;
+    error?: Error;
+};
+export type AnnotationStateMap = {
+    [name: string]: AnnotationState;
+};
+type AnnotationStoreState = {
+    annotationSpecs: AnnotationSpec[];
+    annotationState: AnnotationStateMap;
+};
+type AnnotationStoreActions = {
+    setAnnotationSpecs: (definitions: AnnotationSpec[]) => void;
+    setAnnotationState: (name: string, state: AnnotationState) => void;
+};
+type AnnotationStore = AnnotationStoreState & AnnotationStoreActions;
+export declare function useAnnotationStoreCtx(): StoreApi<AnnotationStore>;
+export declare function useAnnotationSpecs(): AnnotationSpec[];
+export declare function useAnnotationStates(annotationNames?: string[]): AnnotationStateMap;
+export declare function useAnnotationActions(): AnnotationStoreActions;
+export declare function useAnnotationSpecAndState(name: string): {
+    definition: AnnotationSpec | undefined;
+    state: AnnotationState | undefined;
+};
+export type AnnotationSpecWithData = {
+    definition: AnnotationSpec;
+    data: AnnotationData[];
+};
+export declare function useAnnotationsWithData(): AnnotationSpecWithData[];
+export interface AnnotationProviderProps {
+    children: ReactNode;
+    initialAnnotationSpecs?: AnnotationSpec[];
+}
+export declare function AnnotationProvider({ children, initialAnnotationSpecs }: AnnotationProviderProps): ReactNode;
+export {};
+//# sourceMappingURL=AnnotationProvider.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AnnotationProvider.d.ts","sourceRoot":"","sources":["../../../src/context/AnnotationProvider/AnnotationProvider.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAiB,SAAS,EAAwB,MAAM,OAAO,CAAC;AACvE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClE,OAAO,EAAe,QAAQ,EAAY,MAAM,SAAS,CAAC;AAO1D,MAAM,MAAM,eAAe,GAAG;IAC5B,IAAI,EAAE,cAAc,EAAE,GAAG,IAAI,CAAC;IAC9B,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,CAAC,IAAI,EAAE,MAAM,GAAG,eAAe,CAAC;CACjC,CAAC;AAEF,KAAK,oBAAoB,GAAG;IAC1B,eAAe,EAAE,cAAc,EAAE,CAAC;IAClC,eAAe,EAAE,kBAAkB,CAAC;CACrC,CAAC;AAEF,KAAK,sBAAsB,GAAG;IAC5B,kBAAkB,EAAE,CAAC,WAAW,EAAE,cAAc,EAAE,KAAK,IAAI,CAAC;IAC5D,kBAAkB,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;CACpE,CAAC;AAEF,KAAK,eAAe,GAAG,oBAAoB,GAAG,sBAAsB,CAAC;AAIrE,wBAAgB,qBAAqB,IAAI,QAAQ,CAAC,eAAe,CAAC,CAMjE;AAED,wBAAgB,kBAAkB,IAAI,cAAc,EAAE,CAGrD;AAED,wBAAgB,mBAAmB,CAAC,eAAe,CAAC,EAAE,MAAM,EAAE,GAAG,kBAAkB,CAsBlF;AAED,wBAAgB,oBAAoB,IAAI,sBAAsB,CAY7D;AAED,wBAAgB,yBAAyB,CAAC,IAAI,EAAE,MAAM,GAAG;IACvD,UAAU,EAAE,cAAc,GAAG,SAAS,CAAC;IACvC,KAAK,EAAE,eAAe,GAAG,SAAS,CAAC;CACpC,CAQA;AAED,MAAM,MAAM,sBAAsB,GAAG;IACnC,UAAU,EAAE,cAAc,CAAC;IAC3B,IAAI,EAAE,cAAc,EAAE,CAAC;CACxB,CAAC;AAEF,wBAAgB,sBAAsB,IAAI,sBAAsB,EAAE,CAcjE;AAoCD,MAAM,WAAW,uBAAuB;IACtC,QAAQ,EAAE,SAAS,CAAC;IACpB,sBAAsB,CAAC,EAAE,cAAc,EAAE,CAAC;CAC3C;AAED,wBAAgB,kBAAkB,CAAC,EAAE,QAAQ,EAAE,sBAA2B,EAAE,EAAE,uBAAuB,GAAG,SAAS,CAQhH"}

package/dist/context/AnnotationProvider/AnnotationProvider.js

@@ -0,0 +1,114 @@
+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.
+// 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 { createContext, useContext, useState } from 'react';
+import { createStore, useStore } from 'zustand';
+import { useStoreWithEqualityFn } from 'zustand/traditional';
+import { shallow } from 'zustand/shallow';
+import { devtools } from 'zustand/middleware';
+import { immer } from 'zustand/middleware/immer';
+import { AnnotationHydrationWrapper } from './AnnotationHydrationWrapper';
+const AnnotationStoreContext = /*#__PURE__*/ createContext(undefined);
+export function useAnnotationStoreCtx() {
+    const context = useContext(AnnotationStoreContext);
+    if (!context) {
+        return createAnnotationStore({
+            initialAnnotationSpecs: []
+        });
+    }
+    return context;
+}
+export function useAnnotationSpecs() {
+    const store = useAnnotationStoreCtx();
+    return useStore(store, (s)=>s.annotationSpecs);
+}
+export function useAnnotationStates(annotationNames) {
+    const store = useAnnotationStoreCtx();
+    return 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);
+    });
+}
+export function useAnnotationActions() {
+    const store = useAnnotationStoreCtx();
+    return useStoreWithEqualityFn(store, (s)=>{
+        return {
+            setAnnotationState: s.setAnnotationState,
+            setAnnotationSpecs: s.setAnnotationSpecs
+        };
+    }, shallow);
+}
+export function useAnnotationSpecAndState(name) {
+    const store = useAnnotationStoreCtx();
+    return useStore(store, (s)=>{
+        return {
+            definition: s.annotationSpecs.find((d)=>d.display.name === name),
+            state: s.annotationState[name]
+        };
+    });
+}
+export function useAnnotationsWithData() {
+    const store = useAnnotationStoreCtx();
+    return 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 = createStore()(devtools(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;
+}
+export function AnnotationProvider({ children, initialAnnotationSpecs = [] }) {
+    const [store] = useState(()=>createAnnotationStore({
+            initialAnnotationSpecs
+        }));
+    return /*#__PURE__*/ _jsx(AnnotationStoreContext.Provider, {
+        value: store,
+        children: /*#__PURE__*/ _jsx(AnnotationHydrationWrapper, {
+            children: children
+        })
+    });
+}
+
+//# sourceMappingURL=AnnotationProvider.js.map