@perses-dev/dashboards 0.45.0 → 0.46.0-rc0

package/dist/components/Panel/PanelHeader.js

@@ -17,19 +17,37 @@ import InformationOutlineIcon from 'mdi-material-ui/InformationOutline';
 import PencilIcon from 'mdi-material-ui/PencilOutline';
 import DeleteIcon from 'mdi-material-ui/DeleteOutline';
 import DragIcon from 'mdi-material-ui/DragVertical';
+import ArrowExpandIcon from 'mdi-material-ui/ArrowExpand';
+import ArrowCollapseIcon from 'mdi-material-ui/ArrowCollapse';
 import ContentCopyIcon from 'mdi-material-ui/ContentCopy';
 import { useReplaceVariablesInString } from '@perses-dev/plugin-system';
 import { ARIA_LABEL_TEXT, TOOLTIP_TEXT } from '../../constants';
 import { PanelLinks } from './PanelLinks';
-export function PanelHeader({ id, title: rawTitle, description: rawDescription, links, editHandlers, sx, extra, ...rest }) {
+export function PanelHeader({ id, title: rawTitle, description: rawDescription, links, readHandlers, editHandlers, sx, extra, ...rest }) {
     const titleElementId = `${id}-title`;
     const descriptionTooltipId = `${id}-description`;
     const title = useReplaceVariablesInString(rawTitle);
     const description = useReplaceVariablesInString(rawDescription);
-    let actions = undefined;
+    let readActions = undefined;
+    if (readHandlers !== undefined) {
+        readActions = /*#__PURE__*/ _jsx(InfoTooltip, {
+            description: TOOLTIP_TEXT.viewPanel,
+            children: /*#__PURE__*/ _jsx(HeaderIconButton, {
+                "aria-label": ARIA_LABEL_TEXT.viewPanel(title),
+                size: "small",
+                onClick: readHandlers.onViewPanelClick,
+                children: readHandlers.isPanelViewed ? /*#__PURE__*/ _jsx(ArrowCollapseIcon, {
+                    fontSize: "inherit"
+                }) : /*#__PURE__*/ _jsx(ArrowExpandIcon, {
+                    fontSize: "inherit"
+                })
+            })
+        });
+    }
+    let editActions = undefined;
     if (editHandlers !== undefined) {
         // If there are edit handlers, always just show the edit buttons
-        actions = /*#__PURE__*/ _jsxs(_Fragment, {
+        editActions = /*#__PURE__*/ _jsxs(_Fragment, {
             children: [
                 /*#__PURE__*/ _jsx(InfoTooltip, {
                     description: TOOLTIP_TEXT.editPanel,
@@ -138,7 +156,9 @@ export function PanelHeader({ id, title: rawTitle, description: rawDescription,
             children: [
                 editHandlers === undefined && extra,
                 " ",
-                actions
+                readActions,
+                " ",
+                editActions
             ]
         }),
         sx: combineSx((theme)=>({

package/dist/components/Panel/PanelHeader.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Panel/PanelHeader.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { CardHeader, Typography, Stack, CardHeaderProps, styled, IconButton } from '@mui/material';\nimport { InfoTooltip, combineSx } from '@perses-dev/components';\nimport InformationOutlineIcon from 'mdi-material-ui/InformationOutline';\nimport PencilIcon from 'mdi-material-ui/PencilOutline';\nimport DeleteIcon from 'mdi-material-ui/DeleteOutline';\nimport DragIcon from 'mdi-material-ui/DragVertical';\nimport ContentCopyIcon from 'mdi-material-ui/ContentCopy';\nimport { useReplaceVariablesInString } from '@perses-dev/plugin-system';\nimport { ReactNode } from 'react';\nimport { Link } from '@perses-dev/core';\nimport { ARIA_LABEL_TEXT, TOOLTIP_TEXT } from '../../constants';\nimport { PanelLinks } from './PanelLinks';\ntype OmittedProps = 'children' | 'action' | 'title' | 'disableTypography';\n\nexport interface PanelHeaderProps extends Omit<CardHeaderProps, OmittedProps> {\n  id: string;\n  title: string;\n  description?: string;\n  links?: Link[];\n  extra?: ReactNode;\n  editHandlers?: {\n    onEditPanelClick: () => void;\n    onDuplicatePanelClick: () => void;\n    onDeletePanelClick: () => void;\n  };\n}\n\nexport function PanelHeader({\n  id,\n  title: rawTitle,\n  description: rawDescription,\n  links,\n  editHandlers,\n  sx,\n  extra,\n  ...rest\n}: PanelHeaderProps) {\n  const titleElementId = `${id}-title`;\n  const descriptionTooltipId = `${id}-description`;\n\n  const title = useReplaceVariablesInString(rawTitle) as string;\n  const description = useReplaceVariablesInString(rawDescription);\n\n  let actions: CardHeaderProps['action'] = undefined;\n  if (editHandlers !== undefined) {\n    // If there are edit handlers, always just show the edit buttons\n    actions = (\n      <>\n        <InfoTooltip description={TOOLTIP_TEXT.editPanel}>\n          <HeaderIconButton\n            aria-label={ARIA_LABEL_TEXT.editPanel(title)}\n            size=\"small\"\n            onClick={editHandlers.onEditPanelClick}\n          >\n            <PencilIcon fontSize=\"inherit\" />\n          </HeaderIconButton>\n        </InfoTooltip>\n        <InfoTooltip description={TOOLTIP_TEXT.duplicatePanel}>\n          <HeaderIconButton\n            aria-label={ARIA_LABEL_TEXT.duplicatePanel(title)}\n            size=\"small\"\n            onClick={editHandlers.onDuplicatePanelClick}\n          >\n            <ContentCopyIcon\n              fontSize=\"inherit\"\n              sx={{\n                // Shrink this icon a little bit to look more consistent\n                // with the other icons in the header.\n                transform: 'scale(0.925)',\n              }}\n            />\n          </HeaderIconButton>\n        </InfoTooltip>\n        <InfoTooltip description={TOOLTIP_TEXT.deletePanel}>\n          <HeaderIconButton\n            aria-label={ARIA_LABEL_TEXT.deletePanel(title)}\n            size=\"small\"\n            onClick={editHandlers.onDeletePanelClick}\n          >\n            <DeleteIcon fontSize=\"inherit\" />\n          </HeaderIconButton>\n        </InfoTooltip>\n        <InfoTooltip description={TOOLTIP_TEXT.movePanel}>\n          <HeaderIconButton aria-label={ARIA_LABEL_TEXT.movePanel(title)} size=\"small\">\n            <DragIcon className=\"drag-handle\" sx={{ cursor: 'grab' }} fontSize=\"inherit\" />\n          </HeaderIconButton>\n        </InfoTooltip>\n      </>\n    );\n  }\n\n  return (\n    <CardHeader\n      id={id}\n      component=\"header\"\n      aria-labelledby={titleElementId}\n      aria-describedby={descriptionTooltipId}\n      disableTypography\n      title={\n        <Stack direction=\"row\">\n          <Typography\n            id={titleElementId}\n            variant=\"subtitle1\"\n            sx={{\n              // `minHeight` guarantees that the header has the correct height\n              // when there is no title (i.e. in the preview)\n              lineHeight: '24px',\n              minHeight: '24px',\n              whiteSpace: 'nowrap',\n              overflow: 'hidden',\n              textOverflow: 'ellipsis',\n            }}\n          >\n            {title}\n          </Typography>\n          {/* Show the info tooltip when description is defined and is not all whitespace */}\n          {description !== undefined && description.trim().length > 0 && (\n            <InfoTooltip id={descriptionTooltipId} description={description} enterDelay={100}>\n              <HeaderIconButton aria-label=\"panel description\" size=\"small\">\n                <InformationOutlineIcon\n                  aria-describedby=\"info-tooltip\"\n                  aria-hidden={false}\n                  fontSize=\"inherit\"\n                  sx={{ color: (theme) => theme.palette.text.secondary }}\n                />\n              </HeaderIconButton>\n            </InfoTooltip>\n          )}\n          {links !== undefined && links.length > 0 && <PanelLinks links={links} />}\n        </Stack>\n      }\n      action={\n        <HeaderActionWrapper direction=\"row\" spacing={0.25} alignItems=\"center\">\n          {editHandlers === undefined && extra} {actions}\n        </HeaderActionWrapper>\n      }\n      sx={combineSx(\n        (theme) => ({\n          padding: theme.spacing(1),\n          borderBottom: `solid 1px ${theme.palette.divider}`,\n          '.MuiCardHeader-content': {\n            overflow: 'hidden',\n          },\n          '.MuiCardHeader-action': {\n            // Overriding the negative margins from MUI's defaults, so we\n            // can vertically center the icons. Moving these values to a wrapper\n            // inside the action in `HeaderActionWrapper` below.\n            // https://github.com/mui/material-ui/blob/master/packages/mui-material/src/CardHeader/CardHeader.js#L56-L58\n            margin: 'auto',\n          },\n        }),\n        sx\n      )}\n      {...rest}\n    />\n  );\n}\n\nconst HeaderIconButton = styled(IconButton)(({ theme }) => ({\n  borderRadius: theme.shape.borderRadius,\n  padding: '4px',\n}));\n\nconst HeaderActionWrapper = styled(Stack)(() => ({\n  // Adding back the negative margins from MUI's defaults for actions, so we\n  // avoid increasing the header size when actions are present while also being\n  // able to vertically center the actions.\n  // https://github.com/mui/material-ui/blob/master/packages/mui-material/src/CardHeader/CardHeader.js#L56-L58\n  marginTop: -4,\n  marginBottom: -4,\n}));\n"],"names":["CardHeader","Typography","Stack","styled","IconButton","InfoTooltip","combineSx","InformationOutlineIcon","PencilIcon","DeleteIcon","DragIcon","ContentCopyIcon","useReplaceVariablesInString","ARIA_LABEL_TEXT","TOOLTIP_TEXT","PanelLinks","PanelHeader","id","title","rawTitle","description","rawDescription","links","editHandlers","sx","extra","rest","titleElementId","descriptionTooltipId","actions","undefined","editPanel","HeaderIconButton","aria-label","size","onClick","onEditPanelClick","fontSize","duplicatePanel","onDuplicatePanelClick","transform","deletePanel","onDeletePanelClick","movePanel","className","cursor","component","aria-labelledby","aria-describedby","disableTypography","direction","variant","lineHeight","minHeight","whiteSpace","overflow","textOverflow","trim","length","enterDelay","aria-hidden","color","theme","palette","text","secondary","action","HeaderActionWrapper","spacing","alignItems","padding","borderBottom","divider","margin","borderRadius","shape","marginTop","marginBottom"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/Panel/PanelHeader.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { CardHeader, Typography, Stack, CardHeaderProps, styled, IconButton } from '@mui/material';\nimport { InfoTooltip, combineSx } from '@perses-dev/components';\nimport InformationOutlineIcon from 'mdi-material-ui/InformationOutline';\nimport PencilIcon from 'mdi-material-ui/PencilOutline';\nimport DeleteIcon from 'mdi-material-ui/DeleteOutline';\nimport DragIcon from 'mdi-material-ui/DragVertical';\nimport ArrowExpandIcon from 'mdi-material-ui/ArrowExpand';\nimport ArrowCollapseIcon from 'mdi-material-ui/ArrowCollapse';\nimport ContentCopyIcon from 'mdi-material-ui/ContentCopy';\nimport { useReplaceVariablesInString } from '@perses-dev/plugin-system';\nimport { ReactNode } from 'react';\nimport { Link } from '@perses-dev/core';\nimport { ARIA_LABEL_TEXT, TOOLTIP_TEXT } from '../../constants';\nimport { PanelLinks } from './PanelLinks';\ntype OmittedProps = 'children' | 'action' | 'title' | 'disableTypography';\n\nexport interface PanelHeaderProps extends Omit<CardHeaderProps, OmittedProps> {\n  id: string;\n  title: string;\n  description?: string;\n  links?: Link[];\n  extra?: ReactNode;\n  readHandlers?: {\n    isPanelViewed?: boolean;\n    onViewPanelClick: () => void;\n  };\n  editHandlers?: {\n    onEditPanelClick: () => void;\n    onDuplicatePanelClick: () => void;\n    onDeletePanelClick: () => void;\n  };\n}\n\nexport function PanelHeader({\n  id,\n  title: rawTitle,\n  description: rawDescription,\n  links,\n  readHandlers,\n  editHandlers,\n  sx,\n  extra,\n  ...rest\n}: PanelHeaderProps) {\n  const titleElementId = `${id}-title`;\n  const descriptionTooltipId = `${id}-description`;\n\n  const title = useReplaceVariablesInString(rawTitle) as string;\n  const description = useReplaceVariablesInString(rawDescription);\n\n  let readActions: CardHeaderProps['action'] = undefined;\n  if (readHandlers !== undefined) {\n    readActions = (\n      <InfoTooltip description={TOOLTIP_TEXT.viewPanel}>\n        <HeaderIconButton\n          aria-label={ARIA_LABEL_TEXT.viewPanel(title)}\n          size=\"small\"\n          onClick={readHandlers.onViewPanelClick}\n        >\n          {readHandlers.isPanelViewed ? (\n            <ArrowCollapseIcon fontSize=\"inherit\" />\n          ) : (\n            <ArrowExpandIcon fontSize=\"inherit\" />\n          )}\n        </HeaderIconButton>\n      </InfoTooltip>\n    );\n  }\n  let editActions: CardHeaderProps['action'] = undefined;\n  if (editHandlers !== undefined) {\n    // If there are edit handlers, always just show the edit buttons\n    editActions = (\n      <>\n        <InfoTooltip description={TOOLTIP_TEXT.editPanel}>\n          <HeaderIconButton\n            aria-label={ARIA_LABEL_TEXT.editPanel(title)}\n            size=\"small\"\n            onClick={editHandlers.onEditPanelClick}\n          >\n            <PencilIcon fontSize=\"inherit\" />\n          </HeaderIconButton>\n        </InfoTooltip>\n        <InfoTooltip description={TOOLTIP_TEXT.duplicatePanel}>\n          <HeaderIconButton\n            aria-label={ARIA_LABEL_TEXT.duplicatePanel(title)}\n            size=\"small\"\n            onClick={editHandlers.onDuplicatePanelClick}\n          >\n            <ContentCopyIcon\n              fontSize=\"inherit\"\n              sx={{\n                // Shrink this icon a little bit to look more consistent\n                // with the other icons in the header.\n                transform: 'scale(0.925)',\n              }}\n            />\n          </HeaderIconButton>\n        </InfoTooltip>\n        <InfoTooltip description={TOOLTIP_TEXT.deletePanel}>\n          <HeaderIconButton\n            aria-label={ARIA_LABEL_TEXT.deletePanel(title)}\n            size=\"small\"\n            onClick={editHandlers.onDeletePanelClick}\n          >\n            <DeleteIcon fontSize=\"inherit\" />\n          </HeaderIconButton>\n        </InfoTooltip>\n        <InfoTooltip description={TOOLTIP_TEXT.movePanel}>\n          <HeaderIconButton aria-label={ARIA_LABEL_TEXT.movePanel(title)} size=\"small\">\n            <DragIcon className=\"drag-handle\" sx={{ cursor: 'grab' }} fontSize=\"inherit\" />\n          </HeaderIconButton>\n        </InfoTooltip>\n      </>\n    );\n  }\n\n  return (\n    <CardHeader\n      id={id}\n      component=\"header\"\n      aria-labelledby={titleElementId}\n      aria-describedby={descriptionTooltipId}\n      disableTypography\n      title={\n        <Stack direction=\"row\">\n          <Typography\n            id={titleElementId}\n            variant=\"subtitle1\"\n            sx={{\n              // `minHeight` guarantees that the header has the correct height\n              // when there is no title (i.e. in the preview)\n              lineHeight: '24px',\n              minHeight: '24px',\n              whiteSpace: 'nowrap',\n              overflow: 'hidden',\n              textOverflow: 'ellipsis',\n            }}\n          >\n            {title}\n          </Typography>\n          {/* Show the info tooltip when description is defined and is not all whitespace */}\n          {description !== undefined && description.trim().length > 0 && (\n            <InfoTooltip id={descriptionTooltipId} description={description} enterDelay={100}>\n              <HeaderIconButton aria-label=\"panel description\" size=\"small\">\n                <InformationOutlineIcon\n                  aria-describedby=\"info-tooltip\"\n                  aria-hidden={false}\n                  fontSize=\"inherit\"\n                  sx={{ color: (theme) => theme.palette.text.secondary }}\n                />\n              </HeaderIconButton>\n            </InfoTooltip>\n          )}\n          {links !== undefined && links.length > 0 && <PanelLinks links={links} />}\n        </Stack>\n      }\n      action={\n        <HeaderActionWrapper direction=\"row\" spacing={0.25} alignItems=\"center\">\n          {editHandlers === undefined && extra} {readActions} {editActions}\n        </HeaderActionWrapper>\n      }\n      sx={combineSx(\n        (theme) => ({\n          padding: theme.spacing(1),\n          borderBottom: `solid 1px ${theme.palette.divider}`,\n          '.MuiCardHeader-content': {\n            overflow: 'hidden',\n          },\n          '.MuiCardHeader-action': {\n            // Overriding the negative margins from MUI's defaults, so we\n            // can vertically center the icons. Moving these values to a wrapper\n            // inside the action in `HeaderActionWrapper` below.\n            // https://github.com/mui/material-ui/blob/master/packages/mui-material/src/CardHeader/CardHeader.js#L56-L58\n            margin: 'auto',\n          },\n        }),\n        sx\n      )}\n      {...rest}\n    />\n  );\n}\n\nconst HeaderIconButton = styled(IconButton)(({ theme }) => ({\n  borderRadius: theme.shape.borderRadius,\n  padding: '4px',\n}));\n\nconst HeaderActionWrapper = styled(Stack)(() => ({\n  // Adding back the negative margins from MUI's defaults for actions, so we\n  // avoid increasing the header size when actions are present while also being\n  // able to vertically center the actions.\n  // https://github.com/mui/material-ui/blob/master/packages/mui-material/src/CardHeader/CardHeader.js#L56-L58\n  marginTop: -4,\n  marginBottom: -4,\n}));\n"],"names":["CardHeader","Typography","Stack","styled","IconButton","InfoTooltip","combineSx","InformationOutlineIcon","PencilIcon","DeleteIcon","DragIcon","ArrowExpandIcon","ArrowCollapseIcon","ContentCopyIcon","useReplaceVariablesInString","ARIA_LABEL_TEXT","TOOLTIP_TEXT","PanelLinks","PanelHeader","id","title","rawTitle","description","rawDescription","links","readHandlers","editHandlers","sx","extra","rest","titleElementId","descriptionTooltipId","readActions","undefined","viewPanel","HeaderIconButton","aria-label","size","onClick","onViewPanelClick","isPanelViewed","fontSize","editActions","editPanel","onEditPanelClick","duplicatePanel","onDuplicatePanelClick","transform","deletePanel","onDeletePanelClick","movePanel","className","cursor","component","aria-labelledby","aria-describedby","disableTypography","direction","variant","lineHeight","minHeight","whiteSpace","overflow","textOverflow","trim","length","enterDelay","aria-hidden","color","theme","palette","text","secondary","action","HeaderActionWrapper","spacing","alignItems","padding","borderBottom","divider","margin","borderRadius","shape","marginTop","marginBottom"],"mappings":"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"}

package/dist/components/PanelDrawer/PanelPreview.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PanelPreview.d.ts","sourceRoot":"","sources":["../../../src/components/PanelDrawer/PanelPreview.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAMlD,wBAAgB,YAAY,CAAC,EAAE,eAAe,EAAE,EAAE,IAAI,CAAC,iBAAiB,EAAE,iBAAiB,CAAC,kDA+B3F"}
+{"version":3,"file":"PanelPreview.d.ts","sourceRoot":"","sources":["../../../src/components/PanelDrawer/PanelPreview.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAMlD,wBAAgB,YAAY,CAAC,EAAE,eAAe,EAAE,EAAE,IAAI,CAAC,iBAAiB,EAAE,iBAAiB,CAAC,kDAoC3F"}

package/dist/components/PanelDrawer/PanelPreview.js

@@ -13,7 +13,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useRef } from 'react';
 import { Box } from '@mui/material';
-import { DataQueriesProvider, useSuggestedStepMs } from '@perses-dev/plugin-system';
+import { DataQueriesProvider, usePlugin, useSuggestedStepMs } from '@perses-dev/plugin-system';
 import { Panel } from '../Panel';
 const PANEL_PREVIEW_HEIGHT = 300;
 const PANEL_PREVIEW_DEFAULT_WIDTH = 840;
@@ -24,6 +24,10 @@ export function PanelPreview({ panelDefinition }) {
         width = boxRef.current.getBoundingClientRect().width;
     }
     const suggestedStepMs = useSuggestedStepMs(width);
+    const { data: plugin, isLoading } = usePlugin('Panel', panelDefinition.spec.plugin.kind);
+    if (isLoading) {
+        return null;
+    }
     if (panelDefinition.spec.plugin.kind === '') {
         return null;
     }
@@ -42,7 +46,8 @@ export function PanelPreview({ panelDefinition }) {
         children: /*#__PURE__*/ _jsx(DataQueriesProvider, {
             definitions: definitions,
             options: {
-                suggestedStepMs
+                suggestedStepMs,
+                ...plugin === null || plugin === void 0 ? void 0 : plugin.queryOptions
             },
             children: /*#__PURE__*/ _jsx(Panel, {
                 definition: panelDefinition

package/dist/components/PanelDrawer/PanelPreview.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PanelDrawer/PanelPreview.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { useRef } from 'react';\nimport { Box } from '@mui/material';\nimport { DataQueriesProvider, useSuggestedStepMs } from '@perses-dev/plugin-system';\nimport { PanelEditorValues } from '../../context';\nimport { Panel } from '../Panel';\n\nconst PANEL_PREVIEW_HEIGHT = 300;\nconst PANEL_PREVIEW_DEFAULT_WIDTH = 840;\n\nexport function PanelPreview({ panelDefinition }: Pick<PanelEditorValues, 'panelDefinition'>) {\n  const boxRef = useRef<HTMLDivElement>(null);\n  let width = PANEL_PREVIEW_DEFAULT_WIDTH;\n  if (boxRef.current !== null) {\n    width = boxRef.current.getBoundingClientRect().width;\n  }\n  const suggestedStepMs = useSuggestedStepMs(width);\n\n  if (panelDefinition.spec.plugin.kind === '') {\n    return null;\n  }\n\n  const queries = panelDefinition.spec.queries ?? [];\n\n  // map TimeSeriesQueryDefinition to Definition<UnknownSpec>\n  const definitions = queries.length\n    ? queries.map((query) => {\n        return {\n          kind: query.spec.plugin.kind,\n          spec: query.spec.plugin.spec,\n        };\n      })\n    : [];\n\n  return (\n    <Box ref={boxRef} height={PANEL_PREVIEW_HEIGHT}>\n      <DataQueriesProvider definitions={definitions} options={{ suggestedStepMs }}>\n        <Panel definition={panelDefinition} />\n      </DataQueriesProvider>\n    </Box>\n  );\n}\n"],"names":["useRef","Box","DataQueriesProvider","useSuggestedStepMs","Panel","PANEL_PREVIEW_HEIGHT","PANEL_PREVIEW_DEFAULT_WIDTH","PanelPreview","panelDefinition","boxRef","width","current","getBoundingClientRect","suggestedStepMs","spec","plugin","kind","queries","definitions","length","map","query","ref","height","options","definition"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,MAAM,QAAQ,QAAQ;AAC/B,SAASC,GAAG,QAAQ,gBAAgB;AACpC,SAASC,mBAAmB,EAAEC,kBAAkB,QAAQ,4BAA4B;AAEpF,SAASC,KAAK,QAAQ,WAAW;AAEjC,MAAMC,uBAAuB;AAC7B,MAAMC,8BAA8B;AAEpC,OAAO,SAASC,aAAa,EAAEC,eAAe,EAA8C;IAC1F,MAAMC,SAAST,OAAuB;IACtC,IAAIU,QAAQJ;IACZ,IAAIG,OAAOE,OAAO,KAAK,MAAM;QAC3BD,QAAQD,OAAOE,OAAO,CAACC,qBAAqB,GAAGF,KAAK;IACtD;IACA,MAAMG,kBAAkBV,mBAAmBO;IAE3C,IAAIF,gBAAgBM,IAAI,CAACC,MAAM,CAACC,IAAI,KAAK,IAAI;QAC3C,OAAO;IACT;QAEgBR;IAAhB,MAAMS,UAAUT,CAAAA,gCAAAA,gBAAgBM,IAAI,CAACG,OAAO,cAA5BT,2CAAAA,gCAAgC,EAAE;IAElD,2DAA2D;IAC3D,MAAMU,cAAcD,QAAQE,MAAM,GAC9BF,QAAQG,GAAG,CAAC,CAACC;QACX,OAAO;YACLL,MAAMK,MAAMP,IAAI,CAACC,MAAM,CAACC,IAAI;YAC5BF,MAAMO,MAAMP,IAAI,CAACC,MAAM,CAACD,IAAI;QAC9B;IACF,KACA,EAAE;IAEN,qBACE,KAACb;QAAIqB,KAAKb;QAAQc,QAAQlB;kBACxB,cAAA,KAACH;YAAoBgB,aAAaA;YAAaM,SAAS;gBAAEX;YAAgB;sBACxE,cAAA,KAACT;gBAAMqB,YAAYjB;;;;AAI3B"}
+{"version":3,"sources":["../../../src/components/PanelDrawer/PanelPreview.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { useRef } from 'react';\nimport { Box } from '@mui/material';\nimport { DataQueriesProvider, usePlugin, useSuggestedStepMs } from '@perses-dev/plugin-system';\nimport { PanelEditorValues } from '../../context';\nimport { Panel } from '../Panel';\n\nconst PANEL_PREVIEW_HEIGHT = 300;\nconst PANEL_PREVIEW_DEFAULT_WIDTH = 840;\n\nexport function PanelPreview({ panelDefinition }: Pick<PanelEditorValues, 'panelDefinition'>) {\n  const boxRef = useRef<HTMLDivElement>(null);\n  let width = PANEL_PREVIEW_DEFAULT_WIDTH;\n  if (boxRef.current !== null) {\n    width = boxRef.current.getBoundingClientRect().width;\n  }\n  const suggestedStepMs = useSuggestedStepMs(width);\n\n  const { data: plugin, isLoading } = usePlugin('Panel', panelDefinition.spec.plugin.kind);\n  if (isLoading) {\n    return null;\n  }\n\n  if (panelDefinition.spec.plugin.kind === '') {\n    return null;\n  }\n\n  const queries = panelDefinition.spec.queries ?? [];\n\n  // map TimeSeriesQueryDefinition to Definition<UnknownSpec>\n  const definitions = queries.length\n    ? queries.map((query) => {\n        return {\n          kind: query.spec.plugin.kind,\n          spec: query.spec.plugin.spec,\n        };\n      })\n    : [];\n\n  return (\n    <Box ref={boxRef} height={PANEL_PREVIEW_HEIGHT}>\n      <DataQueriesProvider definitions={definitions} options={{ suggestedStepMs, ...plugin?.queryOptions }}>\n        <Panel definition={panelDefinition} />\n      </DataQueriesProvider>\n    </Box>\n  );\n}\n"],"names":["useRef","Box","DataQueriesProvider","usePlugin","useSuggestedStepMs","Panel","PANEL_PREVIEW_HEIGHT","PANEL_PREVIEW_DEFAULT_WIDTH","PanelPreview","panelDefinition","boxRef","width","current","getBoundingClientRect","suggestedStepMs","data","plugin","isLoading","spec","kind","queries","definitions","length","map","query","ref","height","options","queryOptions","definition"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,MAAM,QAAQ,QAAQ;AAC/B,SAASC,GAAG,QAAQ,gBAAgB;AACpC,SAASC,mBAAmB,EAAEC,SAAS,EAAEC,kBAAkB,QAAQ,4BAA4B;AAE/F,SAASC,KAAK,QAAQ,WAAW;AAEjC,MAAMC,uBAAuB;AAC7B,MAAMC,8BAA8B;AAEpC,OAAO,SAASC,aAAa,EAAEC,eAAe,EAA8C;IAC1F,MAAMC,SAASV,OAAuB;IACtC,IAAIW,QAAQJ;IACZ,IAAIG,OAAOE,OAAO,KAAK,MAAM;QAC3BD,QAAQD,OAAOE,OAAO,CAACC,qBAAqB,GAAGF,KAAK;IACtD;IACA,MAAMG,kBAAkBV,mBAAmBO;IAE3C,MAAM,EAAEI,MAAMC,MAAM,EAAEC,SAAS,EAAE,GAAGd,UAAU,SAASM,gBAAgBS,IAAI,CAACF,MAAM,CAACG,IAAI;IACvF,IAAIF,WAAW;QACb,OAAO;IACT;IAEA,IAAIR,gBAAgBS,IAAI,CAACF,MAAM,CAACG,IAAI,KAAK,IAAI;QAC3C,OAAO;IACT;QAEgBV;IAAhB,MAAMW,UAAUX,CAAAA,gCAAAA,gBAAgBS,IAAI,CAACE,OAAO,cAA5BX,2CAAAA,gCAAgC,EAAE;IAElD,2DAA2D;IAC3D,MAAMY,cAAcD,QAAQE,MAAM,GAC9BF,QAAQG,GAAG,CAAC,CAACC;QACX,OAAO;YACLL,MAAMK,MAAMN,IAAI,CAACF,MAAM,CAACG,IAAI;YAC5BD,MAAMM,MAAMN,IAAI,CAACF,MAAM,CAACE,IAAI;QAC9B;IACF,KACA,EAAE;IAEN,qBACE,KAACjB;QAAIwB,KAAKf;QAAQgB,QAAQpB;kBACxB,cAAA,KAACJ;YAAoBmB,aAAaA;YAAaM,SAAS;gBAAEb;mBAAoBE,mBAAAA,6BAAAA,OAAQY,YAAY,AAAvB;YAAwB;sBACjG,cAAA,KAACvB;gBAAMwB,YAAYpB;;;;AAI3B"}

package/dist/components/Variables/VariableList.d.ts

@@ -3,5 +3,5 @@ export declare function TemplateVariableList(): import("react/jsx-runtime").JSX.
 export declare function TemplateVariableListItem({ spec, source }: {
     spec: VariableSpec;
     source?: string;
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react/jsx-runtime").JSX.Element | null;
 //# sourceMappingURL=VariableList.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"VariableList.d.ts","sourceRoot":"","sources":["../../../src/components/Variables/VariableList.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAsB,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAUpE,wBAAgB,oBAAoB,4CAmBnC;AAED,wBAAgB,wBAAwB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAAE,IAAI,EAAE,YAAY,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,2CAcjG"}
+{"version":3,"file":"VariableList.d.ts","sourceRoot":"","sources":["../../../src/components/Variables/VariableList.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAsB,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAUpE,wBAAgB,oBAAoB,4CAmBnC;AAED,wBAAgB,wBAAwB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAAE,IAAI,EAAE,YAAY,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,kDAiBjG"}

package/dist/components/Variables/VariableList.js

@@ -34,9 +34,12 @@ export function TemplateVariableList() {
 export function TemplateVariableListItem({ spec, source }) {
     var _ctx_state, _spec_display;
     const ctx = useTemplateVariable(spec.name, source);
+    if ((_ctx_state = ctx.state) === null || _ctx_state === void 0 ? void 0 : _ctx_state.overridden) {
+        return null;
+    }
     var _ref, _ref1;
     return /*#__PURE__*/ _jsx(Box, {
-        display: ((_ctx_state = ctx.state) === null || _ctx_state === void 0 ? void 0 : _ctx_state.overridden) || ((_spec_display = spec.display) === null || _spec_display === void 0 ? void 0 : _spec_display.hidden) ? 'none' : undefined,
+        display: ((_spec_display = spec.display) === null || _spec_display === void 0 ? void 0 : _spec_display.hidden) ? 'none' : undefined,
         minWidth: `${MIN_TEMPLATE_VARIABLE_WIDTH}px`,
         maxWidth: `${MAX_TEMPLATE_VARIABLE_WIDTH}px`,
         flexShrink: 0,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Variables/VariableList.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Box } from '@mui/material';\nimport { VariableDefinition, VariableSpec } from '@perses-dev/core';\nimport {\n  ExternalVariableDefinition,\n  useTemplateExternalVariableDefinitions,\n  useTemplateVariable,\n  useTemplateVariableDefinitions,\n} from '../../context';\nimport { MAX_TEMPLATE_VARIABLE_WIDTH, MIN_TEMPLATE_VARIABLE_WIDTH } from '../../constants';\nimport { TemplateVariable } from './TemplateVariable';\n\nexport function TemplateVariableList() {\n  const variableDefinitions: VariableDefinition[] = useTemplateVariableDefinitions();\n  const externalVariableDefinitions: ExternalVariableDefinition[] = useTemplateExternalVariableDefinitions();\n\n  return (\n    <>\n      {externalVariableDefinitions\n        .slice()\n        .reverse() // We reverse to have the most prioritized on top\n        .map((def) =>\n          def.definitions.map((v) => (\n            <TemplateVariableListItem key={v.spec.name + def.source} spec={v.spec} source={def.source} />\n          ))\n        )}\n      {variableDefinitions.map((v) => (\n        <TemplateVariableListItem key={v.spec.name} spec={v.spec} />\n      ))}\n    </>\n  );\n}\n\nexport function TemplateVariableListItem({ spec, source }: { spec: VariableSpec; source?: string }) {\n  const ctx = useTemplateVariable(spec.name, source);\n  return (\n    <Box\n      key={spec.name + source ?? ''}\n      display={ctx.state?.overridden || spec.display?.hidden ? 'none' : undefined}\n      minWidth={`${MIN_TEMPLATE_VARIABLE_WIDTH}px`}\n      maxWidth={`${MAX_TEMPLATE_VARIABLE_WIDTH}px`}\n      flexShrink={0}\n      data-testid={'template-variable-' + spec.name}\n    >\n      <TemplateVariable key={spec.name + source ?? ''} name={spec.name} source={source} />\n    </Box>\n  );\n}\n"],"names":["Box","useTemplateExternalVariableDefinitions","useTemplateVariable","useTemplateVariableDefinitions","MAX_TEMPLATE_VARIABLE_WIDTH","MIN_TEMPLATE_VARIABLE_WIDTH","TemplateVariable","TemplateVariableList","variableDefinitions","externalVariableDefinitions","slice","reverse","map","def","definitions","v","TemplateVariableListItem","spec","source","name","ctx","display","state","overridden","hidden","undefined","minWidth","maxWidth","flexShrink","data-testid"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,GAAG,QAAQ,gBAAgB;AAEpC,SAEEC,sCAAsC,EACtCC,mBAAmB,EACnBC,8BAA8B,QACzB,gBAAgB;AACvB,SAASC,2BAA2B,EAAEC,2BAA2B,QAAQ,kBAAkB;AAC3F,SAASC,gBAAgB,QAAQ,qBAAqB;AAEtD,OAAO,SAASC;IACd,MAAMC,sBAA4CL;IAClD,MAAMM,8BAA4DR;IAElE,qBACE;;YACGQ,4BACEC,KAAK,GACLC,OAAO,GAAG,iDAAiD;aAC3DC,GAAG,CAAC,CAACC,MACJA,IAAIC,WAAW,CAACF,GAAG,CAAC,CAACG,kBACnB,KAACC;wBAAwDC,MAAMF,EAAEE,IAAI;wBAAEC,QAAQL,IAAIK,MAAM;uBAA1DH,EAAEE,IAAI,CAACE,IAAI,GAAGN,IAAIK,MAAM;YAG5DV,oBAAoBI,GAAG,CAAC,CAACG,kBACxB,KAACC;oBAA2CC,MAAMF,EAAEE,IAAI;mBAAzBF,EAAEE,IAAI,CAACE,IAAI;;;AAIlD;AAEA,OAAO,SAASH,yBAAyB,EAAEC,IAAI,EAAEC,MAAM,EAA2C;QAKnFE,YAAyBH;IAJtC,MAAMG,MAAMlB,oBAAoBe,KAAKE,IAAI,EAAED;QAUhBD,MAPlBA;IAFT,qBACE,KAACjB;QAECqB,SAASD,EAAAA,aAAAA,IAAIE,KAAK,cAATF,iCAAAA,WAAWG,UAAU,OAAIN,gBAAAA,KAAKI,OAAO,cAAZJ,oCAAAA,cAAcO,MAAM,IAAG,SAASC;QAClEC,UAAU,CAAC,EAAErB,4BAA4B,EAAE,CAAC;QAC5CsB,UAAU,CAAC,EAAEvB,4BAA4B,EAAE,CAAC;QAC5CwB,YAAY;QACZC,eAAa,uBAAuBZ,KAAKE,IAAI;kBAE7C,cAAA,KAACb;YAAgDa,MAAMF,KAAKE,IAAI;YAAED,QAAQA;WAAnDD,CAAAA,OAAAA,KAAKE,IAAI,GAAGD,oBAAZD,kBAAAA,OAAsB;OAPxCA,CAAAA,QAAAA,KAAKE,IAAI,GAAGD,oBAAZD,mBAAAA,QAAsB;AAUjC"}
+{"version":3,"sources":["../../../src/components/Variables/VariableList.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Box } from '@mui/material';\nimport { VariableDefinition, VariableSpec } from '@perses-dev/core';\nimport {\n  ExternalVariableDefinition,\n  useTemplateExternalVariableDefinitions,\n  useTemplateVariable,\n  useTemplateVariableDefinitions,\n} from '../../context';\nimport { MAX_TEMPLATE_VARIABLE_WIDTH, MIN_TEMPLATE_VARIABLE_WIDTH } from '../../constants';\nimport { TemplateVariable } from './TemplateVariable';\n\nexport function TemplateVariableList() {\n  const variableDefinitions: VariableDefinition[] = useTemplateVariableDefinitions();\n  const externalVariableDefinitions: ExternalVariableDefinition[] = useTemplateExternalVariableDefinitions();\n\n  return (\n    <>\n      {externalVariableDefinitions\n        .slice()\n        .reverse() // We reverse to have the most prioritized on top\n        .map((def) =>\n          def.definitions.map((v) => (\n            <TemplateVariableListItem key={v.spec.name + def.source} spec={v.spec} source={def.source} />\n          ))\n        )}\n      {variableDefinitions.map((v) => (\n        <TemplateVariableListItem key={v.spec.name} spec={v.spec} />\n      ))}\n    </>\n  );\n}\n\nexport function TemplateVariableListItem({ spec, source }: { spec: VariableSpec; source?: string }) {\n  const ctx = useTemplateVariable(spec.name, source);\n  if (ctx.state?.overridden) {\n    return null;\n  }\n  return (\n    <Box\n      key={spec.name + source ?? ''}\n      display={spec.display?.hidden ? 'none' : undefined}\n      minWidth={`${MIN_TEMPLATE_VARIABLE_WIDTH}px`}\n      maxWidth={`${MAX_TEMPLATE_VARIABLE_WIDTH}px`}\n      flexShrink={0}\n      data-testid={'template-variable-' + spec.name}\n    >\n      <TemplateVariable key={spec.name + source ?? ''} name={spec.name} source={source} />\n    </Box>\n  );\n}\n"],"names":["Box","useTemplateExternalVariableDefinitions","useTemplateVariable","useTemplateVariableDefinitions","MAX_TEMPLATE_VARIABLE_WIDTH","MIN_TEMPLATE_VARIABLE_WIDTH","TemplateVariable","TemplateVariableList","variableDefinitions","externalVariableDefinitions","slice","reverse","map","def","definitions","v","TemplateVariableListItem","spec","source","name","ctx","state","overridden","display","hidden","undefined","minWidth","maxWidth","flexShrink","data-testid"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,GAAG,QAAQ,gBAAgB;AAEpC,SAEEC,sCAAsC,EACtCC,mBAAmB,EACnBC,8BAA8B,QACzB,gBAAgB;AACvB,SAASC,2BAA2B,EAAEC,2BAA2B,QAAQ,kBAAkB;AAC3F,SAASC,gBAAgB,QAAQ,qBAAqB;AAEtD,OAAO,SAASC;IACd,MAAMC,sBAA4CL;IAClD,MAAMM,8BAA4DR;IAElE,qBACE;;YACGQ,4BACEC,KAAK,GACLC,OAAO,GAAG,iDAAiD;aAC3DC,GAAG,CAAC,CAACC,MACJA,IAAIC,WAAW,CAACF,GAAG,CAAC,CAACG,kBACnB,KAACC;wBAAwDC,MAAMF,EAAEE,IAAI;wBAAEC,QAAQL,IAAIK,MAAM;uBAA1DH,EAAEE,IAAI,CAACE,IAAI,GAAGN,IAAIK,MAAM;YAG5DV,oBAAoBI,GAAG,CAAC,CAACG,kBACxB,KAACC;oBAA2CC,MAAMF,EAAEE,IAAI;mBAAzBF,EAAEE,IAAI,CAACE,IAAI;;;AAIlD;AAEA,OAAO,SAASH,yBAAyB,EAAEC,IAAI,EAAEC,MAAM,EAA2C;QAE5FE,YAMSH;IAPb,MAAMG,MAAMlB,oBAAoBe,KAAKE,IAAI,EAAED;IAC3C,KAAIE,aAAAA,IAAIC,KAAK,cAATD,iCAAAA,WAAWE,UAAU,EAAE;QACzB,OAAO;IACT;QAU2BL,MAPlBA;IAFT,qBACE,KAACjB;QAECuB,SAASN,EAAAA,gBAAAA,KAAKM,OAAO,cAAZN,oCAAAA,cAAcO,MAAM,IAAG,SAASC;QACzCC,UAAU,CAAC,EAAErB,4BAA4B,EAAE,CAAC;QAC5CsB,UAAU,CAAC,EAAEvB,4BAA4B,EAAE,CAAC;QAC5CwB,YAAY;QACZC,eAAa,uBAAuBZ,KAAKE,IAAI;kBAE7C,cAAA,KAACb;YAAgDa,MAAMF,KAAKE,IAAI;YAAED,QAAQA;WAAnDD,CAAAA,OAAAA,KAAKE,IAAI,GAAGD,oBAAZD,kBAAAA,OAAsB;OAPxCA,CAAAA,QAAAA,KAAKE,IAAI,GAAGD,oBAAZD,mBAAAA,QAAsB;AAUjC"}

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

@@ -11,6 +11,7 @@ export declare const TOOLTIP_TEXT: {
     editGroup: string;
     moveGroupDown: string;
     moveGroupUp: string;
+    viewPanel: string;
     editPanel: string;
     duplicatePanel: string;
     deletePanel: string;
@@ -24,6 +25,7 @@ export declare const ARIA_LABEL_TEXT: {
     editGroup: (groupName: string) => string;
     moveGroupDown: (groupName: string) => string;
     moveGroupUp: (groupName: string) => string;
+    viewPanel: (panelName: string) => string;
     editPanel: (panelName: string) => string;
     duplicatePanel: (panelName: string) => string;
     deletePanel: (panelName: string) => 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;;;;;;;;;;;;;;;;;;;CAuBxB,CAAC;AAEF,eAAO,MAAM,eAAe;iCAEG,MAAM;6BACV,MAAM;2BACR,MAAM;+BACF,MAAM;6BACR,MAAM;2BAER,MAAM;gCACD,MAAM;6BACT,MAAM;2BACR,MAAM;CAC9B,CAAC"}
+{"version":3,"file":"user-interface-text.d.ts","sourceRoot":"","sources":["../../src/constants/user-interface-text.ts"],"names":[],"mappings":"AAaA,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;CAwBxB,CAAC;AAEF,eAAO,MAAM,eAAe;iCAEG,MAAM;6BACV,MAAM;2BACR,MAAM;+BACF,MAAM;6BACR,MAAM;2BAER,MAAM;2BACN,MAAM;gCACD,MAAM;6BACT,MAAM;2BACR,MAAM;CAC9B,CAAC"}

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

@@ -26,6 +26,7 @@ export const TOOLTIP_TEXT = {
     moveGroupDown: 'Move group down',
     moveGroupUp: 'Move group up',
     // Panel buttons
+    viewPanel: 'Toggle View Mode',
     editPanel: 'Edit',
     duplicatePanel: 'Duplicate',
     deletePanel: 'Delete',
@@ -42,6 +43,7 @@ export const ARIA_LABEL_TEXT = {
     moveGroupDown: (groupName)=>`move group ${groupName} down`,
     moveGroupUp: (groupName)=>`move group ${groupName} up`,
     // Panel buttons
+    viewPanel: (panelName)=>`toggle panel ${panelName} view mode`,
     editPanel: (panelName)=>`edit panel ${panelName}`,
     duplicatePanel: (panelName)=>`duplicate panel ${panelName}`,
     deletePanel: (panelName)=>`delete panel ${panelName}`,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/constants/user-interface-text.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nexport const TOOLTIP_TEXT = {\n  // Toolbar buttons\n  addPanel: 'Add panel',\n  addGroup: 'Add panel group',\n  downloadDashboard: 'Download JSON',\n  editDatasources: 'Edit datasources',\n  editJson: 'Edit JSON',\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  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};\n\nexport const ARIA_LABEL_TEXT = {\n  // Group buttons\n  addPanelToGroup: (groupName: string) => `add panel to group ${groupName}`,\n  deleteGroup: (groupName: string) => `delete group ${groupName}`,\n  editGroup: (groupName: string) => `edit group ${groupName}`,\n  moveGroupDown: (groupName: string) => `move group ${groupName} down`,\n  moveGroupUp: (groupName: string) => `move group ${groupName} up`,\n  // Panel buttons\n  editPanel: (panelName: string) => `edit panel ${panelName}`,\n  duplicatePanel: (panelName: string) => `duplicate panel ${panelName}`,\n  deletePanel: (panelName: string) => `delete panel ${panelName}`,\n  movePanel: (panelName: string) => `move panel ${panelName}`,\n};\n"],"names":["TOOLTIP_TEXT","addPanel","addGroup","downloadDashboard","editDatasources","editJson","editVariables","viewJson","addPanelToGroup","deleteGroup","editGroup","moveGroupDown","moveGroupUp","editPanel","duplicatePanel","deletePanel","movePanel","refreshVariableValues","copyVariableValues","ARIA_LABEL_TEXT","groupName","panelName"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,OAAO,MAAMA,eAAe;IAC1B,kBAAkB;IAClBC,UAAU;IACVC,UAAU;IACVC,mBAAmB;IACnBC,iBAAiB;IACjBC,UAAU;IACVC,eAAe;IACfC,UAAU;IACV,gBAAgB;IAChBC,iBAAiB;IACjBC,aAAa;IACbC,WAAW;IACXC,eAAe;IACfC,aAAa;IACb,gBAAgB;IAChBC,WAAW;IACXC,gBAAgB;IAChBC,aAAa;IACbC,WAAW;IACX,0BAA0B;IAC1BC,uBAAuB;IACvBC,oBAAoB;AACtB,EAAE;AAEF,OAAO,MAAMC,kBAAkB;IAC7B,gBAAgB;IAChBX,iBAAiB,CAACY,YAAsB,CAAC,mBAAmB,EAAEA,UAAU,CAAC;IACzEX,aAAa,CAACW,YAAsB,CAAC,aAAa,EAAEA,UAAU,CAAC;IAC/DV,WAAW,CAACU,YAAsB,CAAC,WAAW,EAAEA,UAAU,CAAC;IAC3DT,eAAe,CAACS,YAAsB,CAAC,WAAW,EAAEA,UAAU,KAAK,CAAC;IACpER,aAAa,CAACQ,YAAsB,CAAC,WAAW,EAAEA,UAAU,GAAG,CAAC;IAChE,gBAAgB;IAChBP,WAAW,CAACQ,YAAsB,CAAC,WAAW,EAAEA,UAAU,CAAC;IAC3DP,gBAAgB,CAACO,YAAsB,CAAC,gBAAgB,EAAEA,UAAU,CAAC;IACrEN,aAAa,CAACM,YAAsB,CAAC,aAAa,EAAEA,UAAU,CAAC;IAC/DL,WAAW,CAACK,YAAsB,CAAC,WAAW,EAAEA,UAAU,CAAC;AAC7D,EAAE"}
+{"version":3,"sources":["../../src/constants/user-interface-text.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nexport const TOOLTIP_TEXT = {\n  // Toolbar buttons\n  addPanel: 'Add panel',\n  addGroup: 'Add panel group',\n  downloadDashboard: 'Download JSON',\n  editDatasources: 'Edit datasources',\n  editJson: 'Edit JSON',\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};\n\nexport const ARIA_LABEL_TEXT = {\n  // Group buttons\n  addPanelToGroup: (groupName: string) => `add panel to group ${groupName}`,\n  deleteGroup: (groupName: string) => `delete group ${groupName}`,\n  editGroup: (groupName: string) => `edit group ${groupName}`,\n  moveGroupDown: (groupName: string) => `move group ${groupName} down`,\n  moveGroupUp: (groupName: string) => `move group ${groupName} up`,\n  // Panel buttons\n  viewPanel: (panelName: string) => `toggle panel ${panelName} view mode`,\n  editPanel: (panelName: string) => `edit panel ${panelName}`,\n  duplicatePanel: (panelName: string) => `duplicate panel ${panelName}`,\n  deletePanel: (panelName: string) => `delete panel ${panelName}`,\n  movePanel: (panelName: string) => `move panel ${panelName}`,\n};\n"],"names":["TOOLTIP_TEXT","addPanel","addGroup","downloadDashboard","editDatasources","editJson","editVariables","viewJson","addPanelToGroup","deleteGroup","editGroup","moveGroupDown","moveGroupUp","viewPanel","editPanel","duplicatePanel","deletePanel","movePanel","refreshVariableValues","copyVariableValues","ARIA_LABEL_TEXT","groupName","panelName"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,OAAO,MAAMA,eAAe;IAC1B,kBAAkB;IAClBC,UAAU;IACVC,UAAU;IACVC,mBAAmB;IACnBC,iBAAiB;IACjBC,UAAU;IACVC,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;AACtB,EAAE;AAEF,OAAO,MAAMC,kBAAkB;IAC7B,gBAAgB;IAChBZ,iBAAiB,CAACa,YAAsB,CAAC,mBAAmB,EAAEA,UAAU,CAAC;IACzEZ,aAAa,CAACY,YAAsB,CAAC,aAAa,EAAEA,UAAU,CAAC;IAC/DX,WAAW,CAACW,YAAsB,CAAC,WAAW,EAAEA,UAAU,CAAC;IAC3DV,eAAe,CAACU,YAAsB,CAAC,WAAW,EAAEA,UAAU,KAAK,CAAC;IACpET,aAAa,CAACS,YAAsB,CAAC,WAAW,EAAEA,UAAU,GAAG,CAAC;IAChE,gBAAgB;IAChBR,WAAW,CAACS,YAAsB,CAAC,aAAa,EAAEA,UAAU,UAAU,CAAC;IACvER,WAAW,CAACQ,YAAsB,CAAC,WAAW,EAAEA,UAAU,CAAC;IAC3DP,gBAAgB,CAACO,YAAsB,CAAC,gBAAgB,EAAEA,UAAU,CAAC;IACrEN,aAAa,CAACM,YAAsB,CAAC,aAAa,EAAEA,UAAU,CAAC;IAC/DL,WAAW,CAACK,YAAsB,CAAC,WAAW,EAAEA,UAAU,CAAC;AAC7D,EAAE"}

package/dist/context/DashboardProvider/DashboardProvider.d.ts

@@ -11,7 +11,8 @@ import { DiscardChangesConfirmationDialogSlice } from './discard-changes-dialog-
 import { SaveChangesConfirmationDialogSlice } from './save-changes-dialog-slice';
 import { DuplicatePanelSlice } from './duplicate-panel-slice';
 import { EditJsonDialogSlice } from './edit-json-dialog-slice';
-export interface DashboardStoreState extends PanelGroupSlice, PanelSlice, PanelGroupEditorSlice, DeletePanelGroupSlice, PanelEditorSlice, DeletePanelSlice, DiscardChangesConfirmationDialogSlice, DuplicatePanelSlice, EditJsonDialogSlice, SaveChangesConfirmationDialogSlice {
+import { ViewPanelSlice } from './view-panel-slice';
+export interface DashboardStoreState extends PanelGroupSlice, PanelSlice, PanelGroupEditorSlice, DeletePanelGroupSlice, PanelEditorSlice, DeletePanelSlice, DiscardChangesConfirmationDialogSlice, DuplicatePanelSlice, EditJsonDialogSlice, SaveChangesConfirmationDialogSlice, ViewPanelSlice {
     isEditMode: boolean;
     setEditMode: (isEditMode: boolean) => void;
     setDashboard: (dashboard: DashboardResource | EphemeralDashboardResource) => void;
@@ -26,6 +27,8 @@ export interface DashboardStoreState extends PanelGroupSlice, PanelSlice, PanelG
 export interface DashboardStoreProps {
     dashboardResource: DashboardResource | EphemeralDashboardResource;
     isEditMode?: boolean;
+    viewPanelRef?: string;
+    setViewPanelRef?: (viewPanelRef: string | undefined) => void;
 }
 export interface DashboardProviderProps {
     initialState: DashboardStoreProps;

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

@@ -1 +1 @@
-{"version":3,"file":"DashboardProvider.d.ts","sourceRoot":"","sources":["../../../src/context/DashboardProvider/DashboardProvider.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAIxC,OAAO,EAAiB,SAAS,EAAgD,MAAM,OAAO,CAAC;AAC/F,OAAO,EACL,iBAAiB,EACjB,OAAO,EACP,eAAe,EACf,cAAc,EAEd,cAAc,EACd,0BAA0B,EAC3B,MAAM,kBAAkB,CAAC;AAE1B,OAAO,EAA+B,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AAChG,OAAO,EAAsD,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAC1G,OAAO,EAA0B,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAChF,OAAO,EAAoB,UAAU,EAAE,MAAM,eAAe,CAAC;AAC7D,OAAO,EAA+B,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AAChG,OAAO,EAA0B,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAChF,OAAO,EAAmC,qCAAqC,EAAE,MAAM,gCAAgC,CAAC;AACxH,OAAO,EAAgC,kCAAkC,EAAE,MAAM,6BAA6B,CAAC;AAC/G,OAAO,EAA6B,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AACzF,OAAO,EAA6B,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAG1F,MAAM,WAAW,mBACf,SAAQ,eAAe,EACrB,UAAU,EACV,qBAAqB,EACrB,qBAAqB,EACrB,gBAAgB,EAChB,gBAAgB,EAChB,qCAAqC,EACrC,mBAAmB,EACnB,mBAAmB,EACnB,kCAAkC;IACpC,UAAU,EAAE,OAAO,CAAC;IACpB,WAAW,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3C,YAAY,EAAE,CAAC,SAAS,EAAE,iBAAiB,GAAG,0BAA0B,KAAK,IAAI,CAAC;IAClF,IAAI,EAAE,iBAAiB,CAAC,MAAM,CAAC,GAAG,0BAA0B,CAAC,MAAM,CAAC,CAAC;IACrE,QAAQ,EAAE,eAAe,CAAC;IAC1B,QAAQ,EAAE,cAAc,CAAC;IACzB,eAAe,EAAE,cAAc,CAAC;IAChC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC;IAC7C,GAAG,CAAC,EAAE,cAAc,CAAC;CACtB;AAED,MAAM,WAAW,mBAAmB;IAClC,iBAAiB,EAAE,iBAAiB,GAAG,0BAA0B,CAAC;IAClE,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,sBAAsB;IACrC,YAAY,EAAE,mBAAmB,CAAC;IAClC,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,eAAO,MAAM,gBAAgB,oEAAsE,CAAC;AAEpG,wBAAgB,iBAAiB,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,CAAC,KAM/E;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,2CA0B9D"}
+{"version":3,"file":"DashboardProvider.d.ts","sourceRoot":"","sources":["../../../src/context/DashboardProvider/DashboardProvider.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAIxC,OAAO,EAAiB,SAAS,EAAgD,MAAM,OAAO,CAAC;AAC/F,OAAO,EACL,iBAAiB,EACjB,OAAO,EACP,eAAe,EACf,cAAc,EAEd,cAAc,EACd,0BAA0B,EAC3B,MAAM,kBAAkB,CAAC;AAE1B,OAAO,EAA+B,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AAChG,OAAO,EAAsD,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAC1G,OAAO,EAA0B,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAChF,OAAO,EAAoB,UAAU,EAAE,MAAM,eAAe,CAAC;AAC7D,OAAO,EAA+B,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AAChG,OAAO,EAA0B,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAChF,OAAO,EAAmC,qCAAqC,EAAE,MAAM,gCAAgC,CAAC;AACxH,OAAO,EAAgC,kCAAkC,EAAE,MAAM,6BAA6B,CAAC;AAC/G,OAAO,EAA6B,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AACzF,OAAO,EAA6B,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAE1F,OAAO,EAAwB,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAE1E,MAAM,WAAW,mBACf,SAAQ,eAAe,EACrB,UAAU,EACV,qBAAqB,EACrB,qBAAqB,EACrB,gBAAgB,EAChB,gBAAgB,EAChB,qCAAqC,EACrC,mBAAmB,EACnB,mBAAmB,EACnB,kCAAkC,EAClC,cAAc;IAChB,UAAU,EAAE,OAAO,CAAC;IACpB,WAAW,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3C,YAAY,EAAE,CAAC,SAAS,EAAE,iBAAiB,GAAG,0BAA0B,KAAK,IAAI,CAAC;IAClF,IAAI,EAAE,iBAAiB,CAAC,MAAM,CAAC,GAAG,0BAA0B,CAAC,MAAM,CAAC,CAAC;IACrE,QAAQ,EAAE,eAAe,CAAC;IAC1B,QAAQ,EAAE,cAAc,CAAC;IACzB,eAAe,EAAE,cAAc,CAAC;IAChC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC;IAC7C,GAAG,CAAC,EAAE,cAAc,CAAC;CACtB;AAED,MAAM,WAAW,mBAAmB;IAClC,iBAAiB,EAAE,iBAAiB,GAAG,0BAA0B,CAAC;IAClE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,eAAe,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;CAC9D;AAED,MAAM,WAAW,sBAAsB;IACrC,YAAY,EAAE,mBAAmB,CAAC;IAClC,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,eAAO,MAAM,gBAAgB,oEAAsE,CAAC;AAEpG,wBAAgB,iBAAiB,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,CAAC,KAM/E;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,2CA0B9D"}

package/dist/context/DashboardProvider/DashboardProvider.js

@@ -29,6 +29,7 @@ import { createSaveChangesDialogSlice } from './save-changes-dialog-slice';
 import { createDuplicatePanelSlice } from './duplicate-panel-slice';
 import { createEditJsonDialogSlice } from './edit-json-dialog-slice';
 import { createPanelDefinition } from './common';
+import { createViewPanelSlice } from './view-panel-slice';
 export const DashboardContext = /*#__PURE__*/ createContext(undefined);
 export function useDashboardStore(selector) {
     const store = useContext(DashboardContext);
@@ -67,7 +68,7 @@ export function DashboardProvider(props) {
     });
 }
 function initStore(props) {
-    const { initialState: { dashboardResource, isEditMode } } = props;
+    const { initialState: { dashboardResource, isEditMode, viewPanelRef, setViewPanelRef } } = props;
     const { kind, metadata, spec: { display, duration, refreshInterval = DEFAULT_REFRESH_INTERVAL, datasources } } = dashboardResource;
     const ttl = 'ttl' in dashboardResource.spec ? dashboardResource.spec.ttl : undefined;
     let { spec: { layouts, panels } } = dashboardResource;
@@ -84,6 +85,7 @@ function initStore(props) {
             ...createPanelEditorSlice()(...args),
             ...createDeletePanelSlice()(...args),
             ...createDuplicatePanelSlice()(...args),
+            ...createViewPanelSlice(viewPanelRef, setViewPanelRef)(...args),
             /* General */ ...createDiscardChangesDialogSlice(...args),
             ...createEditJsonDialogSlice(...args),
             ...createSaveChangesDialogSlice(...args),

package/dist/context/DashboardProvider/DashboardProvider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/context/DashboardProvider/DashboardProvider.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { createStore, useStore } from 'zustand';\nimport type { StoreApi } from 'zustand';\nimport { devtools } from 'zustand/middleware';\nimport { immer } from 'zustand/middleware/immer';\nimport { shallow } from 'zustand/shallow';\nimport { createContext, ReactNode, useCallback, useContext, useEffect, useState } from 'react';\nimport {\n  DashboardResource,\n  Display,\n  ProjectMetadata,\n  DurationString,\n  DEFAULT_REFRESH_INTERVAL,\n  DatasourceSpec,\n  EphemeralDashboardResource,\n} from '@perses-dev/core';\nimport { usePlugin, usePluginRegistry } from '@perses-dev/plugin-system';\nimport { createPanelGroupEditorSlice, PanelGroupEditorSlice } from './panel-group-editor-slice';\nimport { convertLayoutsToPanelGroups, createPanelGroupSlice, PanelGroupSlice } from './panel-group-slice';\nimport { createPanelEditorSlice, PanelEditorSlice } from './panel-editor-slice';\nimport { createPanelSlice, PanelSlice } from './panel-slice';\nimport { createDeletePanelGroupSlice, DeletePanelGroupSlice } from './delete-panel-group-slice';\nimport { createDeletePanelSlice, DeletePanelSlice } from './delete-panel-slice';\nimport { createDiscardChangesDialogSlice, DiscardChangesConfirmationDialogSlice } from './discard-changes-dialog-slice';\nimport { createSaveChangesDialogSlice, SaveChangesConfirmationDialogSlice } from './save-changes-dialog-slice';\nimport { createDuplicatePanelSlice, DuplicatePanelSlice } from './duplicate-panel-slice';\nimport { createEditJsonDialogSlice, EditJsonDialogSlice } from './edit-json-dialog-slice';\nimport { createPanelDefinition } from './common';\n\nexport interface DashboardStoreState\n  extends PanelGroupSlice,\n    PanelSlice,\n    PanelGroupEditorSlice,\n    DeletePanelGroupSlice,\n    PanelEditorSlice,\n    DeletePanelSlice,\n    DiscardChangesConfirmationDialogSlice,\n    DuplicatePanelSlice,\n    EditJsonDialogSlice,\n    SaveChangesConfirmationDialogSlice {\n  isEditMode: boolean;\n  setEditMode: (isEditMode: boolean) => void;\n  setDashboard: (dashboard: DashboardResource | EphemeralDashboardResource) => void;\n  kind: DashboardResource['kind'] | EphemeralDashboardResource['kind'];\n  metadata: ProjectMetadata;\n  duration: DurationString;\n  refreshInterval: DurationString;\n  display?: Display;\n  datasources?: Record<string, DatasourceSpec>;\n  ttl?: DurationString;\n}\n\nexport interface DashboardStoreProps {\n  dashboardResource: DashboardResource | EphemeralDashboardResource;\n  isEditMode?: boolean;\n}\n\nexport interface DashboardProviderProps {\n  initialState: DashboardStoreProps;\n  children?: ReactNode;\n}\n\nexport const DashboardContext = createContext<StoreApi<DashboardStoreState> | undefined>(undefined);\n\nexport function useDashboardStore<T>(selector: (state: DashboardStoreState) => T) {\n  const store = useContext(DashboardContext);\n  if (store === undefined) {\n    throw new Error('No DashboardContext found. Did you forget a Provider?');\n  }\n  return useStore(store, selector, shallow);\n}\n\nexport function DashboardProvider(props: DashboardProviderProps) {\n  const createDashboardStore = useCallback(initStore, [props]);\n\n  // load plugin to retrieve initial spec if default panel kind is defined\n  const { defaultPluginKinds } = usePluginRegistry();\n  const defaultPanelKind = defaultPluginKinds?.['Panel'] ?? '';\n  const { data: plugin } = usePlugin('Panel', defaultPanelKind);\n\n  const [store] = useState(createDashboardStore(props)); // prevent calling createDashboardStore every time it rerenders\n\n  useEffect(() => {\n    if (plugin === undefined) return;\n    const defaultPanelSpec = plugin.createInitialOptions();\n    // set default panel kind, spec, and queries for add panel editor\n    store.setState({\n      initialValues: {\n        panelDefinition: createPanelDefinition(defaultPanelKind, defaultPanelSpec),\n      },\n    });\n  }, [plugin, store, defaultPanelKind]);\n\n  return (\n    <DashboardContext.Provider value={store as StoreApi<DashboardStoreState>}>\n      {props.children}\n    </DashboardContext.Provider>\n  );\n}\n\nfunction initStore(props: DashboardProviderProps) {\n  const {\n    initialState: { dashboardResource, isEditMode },\n  } = props;\n\n  const {\n    kind,\n    metadata,\n    spec: { display, duration, refreshInterval = DEFAULT_REFRESH_INTERVAL, datasources },\n  } = dashboardResource;\n\n  const ttl = 'ttl' in dashboardResource.spec ? dashboardResource.spec.ttl : undefined;\n\n  let {\n    spec: { layouts, panels },\n  } = dashboardResource;\n\n  // Set fallbacks in case the frontend is used with a non-Perses backend\n  layouts = layouts ?? [];\n  panels = panels ?? {};\n\n  const store = createStore<DashboardStoreState>()(\n    immer(\n      devtools((...args) => {\n        const [set] = args;\n        return {\n          /* Groups */\n          ...createPanelGroupSlice(layouts)(...args),\n          ...createPanelGroupEditorSlice(...args),\n          ...createDeletePanelGroupSlice(...args),\n          /* Panels */\n          ...createPanelSlice(panels)(...args),\n          ...createPanelEditorSlice()(...args),\n          ...createDeletePanelSlice()(...args),\n          ...createDuplicatePanelSlice()(...args),\n          /* General */\n          ...createDiscardChangesDialogSlice(...args),\n          ...createEditJsonDialogSlice(...args),\n          ...createSaveChangesDialogSlice(...args),\n          kind,\n          metadata,\n          display,\n          duration,\n          refreshInterval,\n          datasources,\n          ttl,\n          isEditMode: !!isEditMode,\n          setEditMode: (isEditMode: boolean) => set({ isEditMode }),\n          setDashboard: ({\n            kind,\n            metadata,\n            spec: { display, panels = {}, layouts = [], duration, refreshInterval, datasources = {} },\n          }) => {\n            set((state) => {\n              state.kind = kind;\n              state.metadata = metadata;\n              state.display = display;\n              state.panels = panels;\n              const { panelGroups, panelGroupOrder } = convertLayoutsToPanelGroups(layouts);\n              state.panelGroups = panelGroups;\n              state.panelGroupOrder = panelGroupOrder;\n              state.duration = duration;\n              state.refreshInterval = refreshInterval ?? DEFAULT_REFRESH_INTERVAL;\n              state.datasources = datasources;\n              // TODO: add ttl here to e.g allow edition from JSON view, but probably requires quite some refactoring\n            });\n          },\n        };\n      })\n    )\n  );\n\n  return store;\n}\n"],"names":["createStore","useStore","devtools","immer","shallow","createContext","useCallback","useContext","useEffect","useState","DEFAULT_REFRESH_INTERVAL","usePlugin","usePluginRegistry","createPanelGroupEditorSlice","convertLayoutsToPanelGroups","createPanelGroupSlice","createPanelEditorSlice","createPanelSlice","createDeletePanelGroupSlice","createDeletePanelSlice","createDiscardChangesDialogSlice","createSaveChangesDialogSlice","createDuplicatePanelSlice","createEditJsonDialogSlice","createPanelDefinition","DashboardContext","undefined","useDashboardStore","selector","store","Error","DashboardProvider","props","createDashboardStore","initStore","defaultPluginKinds","defaultPanelKind","data","plugin","defaultPanelSpec","createInitialOptions","setState","initialValues","panelDefinition","Provider","value","children","initialState","dashboardResource","isEditMode","kind","metadata","spec","display","duration","refreshInterval","datasources","ttl","layouts","panels","args","set","setEditMode","setDashboard","state","panelGroups","panelGroupOrder"],"mappings":"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"}
+{"version":3,"sources":["../../../src/context/DashboardProvider/DashboardProvider.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { createStore, useStore } from 'zustand';\nimport type { StoreApi } from 'zustand';\nimport { devtools } from 'zustand/middleware';\nimport { immer } from 'zustand/middleware/immer';\nimport { shallow } from 'zustand/shallow';\nimport { createContext, ReactNode, useCallback, useContext, useEffect, useState } from 'react';\nimport {\n  DashboardResource,\n  Display,\n  ProjectMetadata,\n  DurationString,\n  DEFAULT_REFRESH_INTERVAL,\n  DatasourceSpec,\n  EphemeralDashboardResource,\n} from '@perses-dev/core';\nimport { usePlugin, usePluginRegistry } from '@perses-dev/plugin-system';\nimport { createPanelGroupEditorSlice, PanelGroupEditorSlice } from './panel-group-editor-slice';\nimport { convertLayoutsToPanelGroups, createPanelGroupSlice, PanelGroupSlice } from './panel-group-slice';\nimport { createPanelEditorSlice, PanelEditorSlice } from './panel-editor-slice';\nimport { createPanelSlice, PanelSlice } from './panel-slice';\nimport { createDeletePanelGroupSlice, DeletePanelGroupSlice } from './delete-panel-group-slice';\nimport { createDeletePanelSlice, DeletePanelSlice } from './delete-panel-slice';\nimport { createDiscardChangesDialogSlice, DiscardChangesConfirmationDialogSlice } from './discard-changes-dialog-slice';\nimport { createSaveChangesDialogSlice, SaveChangesConfirmationDialogSlice } from './save-changes-dialog-slice';\nimport { createDuplicatePanelSlice, DuplicatePanelSlice } from './duplicate-panel-slice';\nimport { createEditJsonDialogSlice, EditJsonDialogSlice } from './edit-json-dialog-slice';\nimport { createPanelDefinition } from './common';\nimport { createViewPanelSlice, ViewPanelSlice } from './view-panel-slice';\n\nexport interface DashboardStoreState\n  extends PanelGroupSlice,\n    PanelSlice,\n    PanelGroupEditorSlice,\n    DeletePanelGroupSlice,\n    PanelEditorSlice,\n    DeletePanelSlice,\n    DiscardChangesConfirmationDialogSlice,\n    DuplicatePanelSlice,\n    EditJsonDialogSlice,\n    SaveChangesConfirmationDialogSlice,\n    ViewPanelSlice {\n  isEditMode: boolean;\n  setEditMode: (isEditMode: boolean) => void;\n  setDashboard: (dashboard: DashboardResource | EphemeralDashboardResource) => void;\n  kind: DashboardResource['kind'] | EphemeralDashboardResource['kind'];\n  metadata: ProjectMetadata;\n  duration: DurationString;\n  refreshInterval: DurationString;\n  display?: Display;\n  datasources?: Record<string, DatasourceSpec>;\n  ttl?: DurationString;\n}\n\nexport interface DashboardStoreProps {\n  dashboardResource: DashboardResource | EphemeralDashboardResource;\n  isEditMode?: boolean;\n  viewPanelRef?: string;\n  setViewPanelRef?: (viewPanelRef: string | undefined) => void;\n}\n\nexport interface DashboardProviderProps {\n  initialState: DashboardStoreProps;\n  children?: ReactNode;\n}\n\nexport const DashboardContext = createContext<StoreApi<DashboardStoreState> | undefined>(undefined);\n\nexport function useDashboardStore<T>(selector: (state: DashboardStoreState) => T) {\n  const store = useContext(DashboardContext);\n  if (store === undefined) {\n    throw new Error('No DashboardContext found. Did you forget a Provider?');\n  }\n  return useStore(store, selector, shallow);\n}\n\nexport function DashboardProvider(props: DashboardProviderProps) {\n  const createDashboardStore = useCallback(initStore, [props]);\n\n  // load plugin to retrieve initial spec if default panel kind is defined\n  const { defaultPluginKinds } = usePluginRegistry();\n  const defaultPanelKind = defaultPluginKinds?.['Panel'] ?? '';\n  const { data: plugin } = usePlugin('Panel', defaultPanelKind);\n\n  const [store] = useState(createDashboardStore(props)); // prevent calling createDashboardStore every time it rerenders\n\n  useEffect(() => {\n    if (plugin === undefined) return;\n    const defaultPanelSpec = plugin.createInitialOptions();\n    // set default panel kind, spec, and queries for add panel editor\n    store.setState({\n      initialValues: {\n        panelDefinition: createPanelDefinition(defaultPanelKind, defaultPanelSpec),\n      },\n    });\n  }, [plugin, store, defaultPanelKind]);\n\n  return (\n    <DashboardContext.Provider value={store as StoreApi<DashboardStoreState>}>\n      {props.children}\n    </DashboardContext.Provider>\n  );\n}\n\nfunction initStore(props: DashboardProviderProps) {\n  const {\n    initialState: { dashboardResource, isEditMode, viewPanelRef, setViewPanelRef },\n  } = props;\n\n  const {\n    kind,\n    metadata,\n    spec: { display, duration, refreshInterval = DEFAULT_REFRESH_INTERVAL, datasources },\n  } = dashboardResource;\n\n  const ttl = 'ttl' in dashboardResource.spec ? dashboardResource.spec.ttl : undefined;\n\n  let {\n    spec: { layouts, panels },\n  } = dashboardResource;\n\n  // Set fallbacks in case the frontend is used with a non-Perses backend\n  layouts = layouts ?? [];\n  panels = panels ?? {};\n\n  const store = createStore<DashboardStoreState>()(\n    immer(\n      devtools((...args) => {\n        const [set] = args;\n        return {\n          /* Groups */\n          ...createPanelGroupSlice(layouts)(...args),\n          ...createPanelGroupEditorSlice(...args),\n          ...createDeletePanelGroupSlice(...args),\n          /* Panels */\n          ...createPanelSlice(panels)(...args),\n          ...createPanelEditorSlice()(...args),\n          ...createDeletePanelSlice()(...args),\n          ...createDuplicatePanelSlice()(...args),\n          ...createViewPanelSlice(viewPanelRef, setViewPanelRef)(...args),\n          /* General */\n          ...createDiscardChangesDialogSlice(...args),\n          ...createEditJsonDialogSlice(...args),\n          ...createSaveChangesDialogSlice(...args),\n          kind,\n          metadata,\n          display,\n          duration,\n          refreshInterval,\n          datasources,\n          ttl,\n          isEditMode: !!isEditMode,\n          setEditMode: (isEditMode: boolean) => set({ isEditMode }),\n          setDashboard: ({\n            kind,\n            metadata,\n            spec: { display, panels = {}, layouts = [], duration, refreshInterval, datasources = {} },\n          }) => {\n            set((state) => {\n              state.kind = kind;\n              state.metadata = metadata;\n              state.display = display;\n              state.panels = panels;\n              const { panelGroups, panelGroupOrder } = convertLayoutsToPanelGroups(layouts);\n              state.panelGroups = panelGroups;\n              state.panelGroupOrder = panelGroupOrder;\n              state.duration = duration;\n              state.refreshInterval = refreshInterval ?? DEFAULT_REFRESH_INTERVAL;\n              state.datasources = datasources;\n              // TODO: add ttl here to e.g allow edition from JSON view, but probably requires quite some refactoring\n            });\n          },\n        };\n      })\n    )\n  );\n\n  return store;\n}\n"],"names":["createStore","useStore","devtools","immer","shallow","createContext","useCallback","useContext","useEffect","useState","DEFAULT_REFRESH_INTERVAL","usePlugin","usePluginRegistry","createPanelGroupEditorSlice","convertLayoutsToPanelGroups","createPanelGroupSlice","createPanelEditorSlice","createPanelSlice","createDeletePanelGroupSlice","createDeletePanelSlice","createDiscardChangesDialogSlice","createSaveChangesDialogSlice","createDuplicatePanelSlice","createEditJsonDialogSlice","createPanelDefinition","createViewPanelSlice","DashboardContext","undefined","useDashboardStore","selector","store","Error","DashboardProvider","props","createDashboardStore","initStore","defaultPluginKinds","defaultPanelKind","data","plugin","defaultPanelSpec","createInitialOptions","setState","initialValues","panelDefinition","Provider","value","children","initialState","dashboardResource","isEditMode","viewPanelRef","setViewPanelRef","kind","metadata","spec","display","duration","refreshInterval","datasources","ttl","layouts","panels","args","set","setEditMode","setDashboard","state","panelGroups","panelGroupOrder"],"mappings":"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"}

package/dist/context/DashboardProvider/DashboardProviderWithQueryParams.d.ts

@@ -0,0 +1,3 @@
+import { DashboardProviderProps } from './DashboardProvider';
+export declare function DashboardProviderWithQueryParams({ children, initialState }: DashboardProviderProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=DashboardProviderWithQueryParams.d.ts.map

package/dist/context/DashboardProvider/DashboardProviderWithQueryParams.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DashboardProviderWithQueryParams.d.ts","sourceRoot":"","sources":["../../../src/context/DashboardProvider/DashboardProviderWithQueryParams.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAqB,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;AAEhF,wBAAgB,gCAAgC,CAAC,EAAE,QAAQ,EAAE,YAAY,EAAE,EAAE,sBAAsB,2CAclG"}

package/dist/context/DashboardProvider/DashboardProviderWithQueryParams.js

@@ -0,0 +1,28 @@
+// Copyright 2024 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 { jsx as _jsx } from "react/jsx-runtime";
+import { StringParam, useQueryParam } from 'use-query-params';
+import { DashboardProvider } from './DashboardProvider';
+export function DashboardProviderWithQueryParams({ children, initialState }) {
+    const [viewPanelRef, setViewPanelRef] = useQueryParam('viewPanelRef', StringParam);
+    return /*#__PURE__*/ _jsx(DashboardProvider, {
+        initialState: {
+            viewPanelRef: viewPanelRef !== null && viewPanelRef !== void 0 ? viewPanelRef : undefined,
+            setViewPanelRef: setViewPanelRef,
+            ...initialState
+        },
+        children: children
+    });
+}
+
+//# sourceMappingURL=DashboardProviderWithQueryParams.js.map

package/dist/context/DashboardProvider/DashboardProviderWithQueryParams.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/context/DashboardProvider/DashboardProviderWithQueryParams.tsx"],"sourcesContent":["// Copyright 2024 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { StringParam, useQueryParam } from 'use-query-params';\nimport { DashboardProvider, DashboardProviderProps } from './DashboardProvider';\n\nexport function DashboardProviderWithQueryParams({ children, initialState }: DashboardProviderProps) {\n  const [viewPanelRef, setViewPanelRef] = useQueryParam('viewPanelRef', StringParam);\n\n  return (\n    <DashboardProvider\n      initialState={{\n        viewPanelRef: viewPanelRef ?? undefined, // viewPanelRef can be null, forcing to undefined\n        setViewPanelRef: setViewPanelRef,\n        ...initialState,\n      }}\n    >\n      {children}\n    </DashboardProvider>\n  );\n}\n"],"names":["StringParam","useQueryParam","DashboardProvider","DashboardProviderWithQueryParams","children","initialState","viewPanelRef","setViewPanelRef","undefined"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,WAAW,EAAEC,aAAa,QAAQ,mBAAmB;AAC9D,SAASC,iBAAiB,QAAgC,sBAAsB;AAEhF,OAAO,SAASC,iCAAiC,EAAEC,QAAQ,EAAEC,YAAY,EAA0B;IACjG,MAAM,CAACC,cAAcC,gBAAgB,GAAGN,cAAc,gBAAgBD;IAEtE,qBACE,KAACE;QACCG,cAAc;YACZC,cAAcA,yBAAAA,0BAAAA,eAAgBE;YAC9BD,iBAAiBA;YACjB,GAAGF,YAAY;QACjB;kBAECD;;AAGP"}

package/dist/context/DashboardProvider/dashboard-provider-api.d.ts

@@ -58,6 +58,7 @@ export declare function usePanelActions(panelGroupItemId: PanelGroupItemId): {
     openEditPanel: () => void;
     openDeletePanelDialog: () => void;
     duplicatePanel: () => void;
+    viewPanel: (panelGroupItemId?: PanelGroupItemId) => void;
 };
 /**
  * Gets the state for the Panel Editor.
@@ -72,6 +73,10 @@ export declare function useDeletePanelDialog(): {
     closeDeletePanelDialog: () => void;
 };
 export declare function useDashboardDuration(): import("@perses-dev/core").DurationString;
+/**
+ * Gets the current panel viewed in max size ("full screen").
+ */
+export declare function useViewPanel(): PanelGroupItemId | undefined;
 export declare function useSaveChangesConfirmationDialog(): {
     saveChangesConfirmationDialog: import("./save-changes-dialog-slice").SaveChangesConfirmationDialogState | undefined;
     openSaveChangesConfirmationDialog: (saveChangesConfirmationDialog: import("./save-changes-dialog-slice").SaveChangesConfirmationDialogState) => void;

package/dist/context/DashboardProvider/dashboard-provider-api.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dashboard-provider-api.d.ts","sourceRoot":"","sources":["../../../src/context/DashboardProvider/dashboard-provider-api.ts"],"names":[],"mappings":"AAeA,OAAO,EAAE,gBAAgB,EAAE,YAAY,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAG3F,wBAAgB,WAAW;;;EAE1B;AAOD;;GAEG;AACH,wBAAgB,mBAAmB;;;;EAOlC;AAGD;;GAEG;AACH,wBAAgB,gBAAgB,aAE/B;AAGD;;GAEG;AACH,wBAAgB,kBAAkB,yDAYjC;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,YAAY,EAAE,YAAY,sDAMvD;AAaD;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,YAAY,EAAE,YAAY;;;;;;2CAWpB,oBAAoB,EAAE;EAGhE;AA4BD;;GAEG;AACH,wBAAgB,mBAAmB,sEAElC;AAaD;;GAEG;AACH,wBAAgB,yBAAyB;;;;;EASxC;AAED;;GAEG;AACH,wBAAgB,QAAQ,CAAC,gBAAgB,EAAE,gBAAgB,sFAiB1D;AAQD;;GAEG;AACH,wBAAgB,eAAe,CAAC,gBAAgB,EAAE,gBAAgB;;;;EAOjE;AAGD;;GAEG;AACH,wBAAgB,cAAc,gEAE7B;AAQD;;GAEG;AACH,wBAAgB,oBAAoB;;;;EAGnC;AAGD,wBAAgB,oBAAoB,8CAEnC;AAWD,wBAAgB,gCAAgC;;;;EAE/C;AAWD,wBAAgB,mCAAmC;;;;EAElD;AAOD;;GAEG;AACH,wBAAgB,iBAAiB;;;;EAEhC"}
+{"version":3,"file":"dashboard-provider-api.d.ts","sourceRoot":"","sources":["../../../src/context/DashboardProvider/dashboard-provider-api.ts"],"names":[],"mappings":"AAeA,OAAO,EAAE,gBAAgB,EAAE,YAAY,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAG3F,wBAAgB,WAAW;;;EAE1B;AAOD;;GAEG;AACH,wBAAgB,mBAAmB;;;;EAOlC;AAGD;;GAEG;AACH,wBAAgB,gBAAgB,aAE/B;AAGD;;GAEG;AACH,wBAAgB,kBAAkB,yDAYjC;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,YAAY,EAAE,YAAY,sDAMvD;AAaD;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,YAAY,EAAE,YAAY;;;;;;2CAWpB,oBAAoB,EAAE;EAGhE;AA4BD;;GAEG;AACH,wBAAgB,mBAAmB,sEAElC;AAaD;;GAEG;AACH,wBAAgB,yBAAyB;;;;;EASxC;AAED;;GAEG;AACH,wBAAgB,QAAQ,CAAC,gBAAgB,EAAE,gBAAgB,sFAiB1D;AAcD;;GAEG;AACH,wBAAgB,eAAe,CAAC,gBAAgB,EAAE,gBAAgB;;;;mCAM/B,gBAAgB;EAElD;AAGD;;GAEG;AACH,wBAAgB,cAAc,gEAE7B;AAQD;;GAEG;AACH,wBAAgB,oBAAoB;;;;EAGnC;AAGD,wBAAgB,oBAAoB,8CAEnC;AAGD;;GAEG;AACH,wBAAgB,YAAY,iCAE3B;AAWD,wBAAgB,gCAAgC;;;;EAE/C;AAWD,wBAAgB,mCAAmC;;;;EAElD;AAOD;;GAEG;AACH,wBAAgB,iBAAiB;;;;EAEhC"}

package/dist/context/DashboardProvider/dashboard-provider-api.js

@@ -152,19 +152,21 @@ const selectDeletePanelGroupDialog = ({ deletePanelGroupDialog, openDeletePanelG
     }
     return panel;
 }
-const selectPanelActions = ({ openEditPanel, openDeletePanelDialog, duplicatePanel })=>({
+const selectPanelActions = ({ openEditPanel, openDeletePanelDialog, duplicatePanel, setViewPanel })=>({
         openEditPanel,
         openDeletePanelDialog,
-        duplicatePanel
+        duplicatePanel,
+        setViewPanel
     });
 /**
  * Returns actions that can be performed on the given Panel.
  */ export function usePanelActions(panelGroupItemId) {
-    const { openEditPanel, openDeletePanelDialog, duplicatePanel } = useDashboardStore(selectPanelActions);
+    const { openEditPanel, openDeletePanelDialog, duplicatePanel, setViewPanel } = useDashboardStore(selectPanelActions);
     return {
         openEditPanel: ()=>openEditPanel(panelGroupItemId),
         openDeletePanelDialog: ()=>openDeletePanelDialog(panelGroupItemId),
-        duplicatePanel: ()=>duplicatePanel(panelGroupItemId)
+        duplicatePanel: ()=>duplicatePanel(panelGroupItemId),
+        viewPanel: (panelGroupItemId)=>setViewPanel(panelGroupItemId)
     };
 }
 const selectPanelEditor = (state)=>state.panelEditor;
@@ -188,6 +190,12 @@ const selectDashboardDuration = (state)=>state.duration;
 export function useDashboardDuration() {
     return useDashboardStore(selectDashboardDuration);
 }
+const selectViewPanel = (state)=>state.getViewPanel();
+/**
+ * Gets the current panel viewed in max size ("full screen").
+ */ export function useViewPanel() {
+    return useDashboardStore(selectViewPanel);
+}
 const selectSaveChangesConfirmationDialog = ({ saveChangesConfirmationDialog, openSaveChangesConfirmationDialog, closeSaveChangesConfirmationDialog })=>({
         saveChangesConfirmationDialog,
         openSaveChangesConfirmationDialog,