@perses-dev/dashboards 0.24.0 → 0.26.0

package/dist/components/EmptyDashboard/index.js

@@ -0,0 +1,15 @@
+// Copyright 2023 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.
+export * from './EmptyDashboard';
+
+//# sourceMappingURL=index.js.map

package/dist/components/EmptyDashboard/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/EmptyDashboard/index.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 * from './EmptyDashboard';\n"],"names":[],"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,cAAc,kBAAkB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"Panel.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/Panel.tsx"],"names":[],"mappings":";AAiBA,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAQ,SAAS,EAAe,MAAM,eAAe,CAAC;AAC7D,OAAO,EAAe,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAG9D,MAAM,WAAW,UAAW,SAAQ,SAAS,CAAC,SAAS,CAAC;IACtD,UAAU,EAAE,eAAe,CAAC;IAC5B,YAAY,CAAC,EAAE,gBAAgB,CAAC,cAAc,CAAC,CAAC;CACjD;AAED;;GAEG;AACH,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,eA2FtC"}
+{"version":3,"file":"Panel.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/Panel.tsx"],"names":[],"mappings":";AAiBA,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAQ,SAAS,EAAe,MAAM,eAAe,CAAC;AAC7D,OAAO,EAAe,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAG9D,MAAM,WAAW,UAAW,SAAQ,SAAS,CAAC,SAAS,CAAC;IACtD,UAAU,EAAE,eAAe,CAAC;IAC5B,YAAY,CAAC,EAAE,gBAAgB,CAAC,cAAc,CAAC,CAAC;CACjD;AAED;;GAEG;AACH,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,eAuFtC"}

package/dist/components/Panel/Panel.js

@@ -26,7 +26,6 @@ import { PanelContent } from './PanelContent';
     const generatedPanelId = useId('Panel');
     const headerId = `${generatedPanelId}-header`;
     const [contentElement, setContentElement] = useState(null);
-    const [isHovered, setIsHovered] = useState(false);
     const { width , height  } = useResizeObserver({
         ref: contentElement
     });
@@ -47,11 +46,9 @@ import { PanelContent } from './PanelContent';
     });
     const chartsTheme = useChartsTheme();
     const handleMouseEnter = (e)=>{
-        setIsHovered(true);
         onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter(e);
     };
     const handleMouseLeave = (e)=>{
-        setIsHovered(false);
         onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(e);
     };
     return /*#__PURE__*/ _jsxs(Card, {
@@ -76,7 +73,6 @@ import { PanelContent } from './PanelContent';
                 title: definition.spec.display.name,
                 description: definition.spec.display.description,
                 editHandlers: editHandlers,
-                isHovered: isHovered,
                 sx: {
                     paddingX: `${chartsTheme.container.padding.default}px`
                 }

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Panel/Panel.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 { useState, useMemo } from 'react';\nimport useResizeObserver from 'use-resize-observer';\nimport { useInView } from 'react-intersection-observer';\nimport { ErrorBoundary, ErrorAlert, combineSx, useId, useChartsTheme } from '@perses-dev/components';\nimport { PanelDefinition } from '@perses-dev/core';\nimport { Card, CardProps, CardContent } from '@mui/material';\nimport { PanelHeader, PanelHeaderProps } from './PanelHeader';\nimport { PanelContent } from './PanelContent';\n\nexport interface PanelProps extends CardProps<'section'> {\n  definition: PanelDefinition;\n  editHandlers?: PanelHeaderProps['editHandlers'];\n}\n\n/**\n * Renders a PanelDefinition's content inside of a Card.\n */\nexport function Panel(props: PanelProps) {\n  const { definition, editHandlers, onMouseEnter, onMouseLeave, sx, ...others } = props;\n\n  // Make sure we have an ID we can use for aria attributes\n  const generatedPanelId = useId('Panel');\n  const headerId = `${generatedPanelId}-header`;\n\n  const [contentElement, setContentElement] = useState<HTMLElement | null>(null);\n  const [isHovered, setIsHovered] = useState(false);\n\n  const { width, height } = useResizeObserver({ ref: contentElement });\n\n  const contentDimensions = useMemo(() => {\n    if (width === undefined || height === undefined) return undefined;\n    return { width, height };\n  }, [width, height]);\n\n  const { ref, inView } = useInView({\n    threshold: 0.3,\n    initialInView: false,\n    triggerOnce: true,\n  });\n\n  const chartsTheme = useChartsTheme();\n\n  const handleMouseEnter: CardProps['onMouseEnter'] = (e) => {\n    setIsHovered(true);\n    onMouseEnter?.(e);\n  };\n\n  const handleMouseLeave: CardProps['onMouseLeave'] = (e) => {\n    setIsHovered(false);\n    onMouseLeave?.(e);\n  };\n\n  return (\n    <Card\n      ref={ref}\n      component=\"section\"\n      sx={combineSx(\n        {\n          width: '100%',\n          height: '100%',\n          display: 'flex',\n          flexFlow: 'column nowrap',\n        },\n        sx\n      )}\n      variant=\"outlined\"\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      aria-labelledby={headerId}\n      aria-describedby={headerId}\n      data-testid=\"panel\"\n      {...others}\n    >\n      <PanelHeader\n        id={headerId}\n        title={definition.spec.display.name}\n        description={definition.spec.display.description}\n        editHandlers={editHandlers}\n        isHovered={isHovered}\n        sx={{ paddingX: `${chartsTheme.container.padding.default}px` }}\n      />\n      <CardContent\n        component=\"figure\"\n        sx={{\n          position: 'relative',\n          overflow: 'hidden',\n          flexGrow: 1,\n          margin: 0,\n          padding: 0,\n          // Override MUI default style for last-child\n          ':last-child': {\n            padding: 0,\n          },\n        }}\n        ref={setContentElement}\n      >\n        <ErrorBoundary FallbackComponent={ErrorAlert} resetKeys={[definition.spec.plugin.spec]}>\n          {inView === true && (\n            <PanelContent\n              panelPluginKind={definition.spec.plugin.kind}\n              spec={definition.spec.plugin.spec}\n              contentDimensions={contentDimensions}\n            />\n          )}\n        </ErrorBoundary>\n      </CardContent>\n    </Card>\n  );\n}\n"],"names":["useState","useMemo","useResizeObserver","useInView","ErrorBoundary","ErrorAlert","combineSx","useId","useChartsTheme","Card","CardContent","PanelHeader","PanelContent","Panel","props","definition","editHandlers","onMouseEnter","onMouseLeave","sx","others","generatedPanelId","headerId","contentElement","setContentElement","isHovered","setIsHovered","width","height","ref","contentDimensions","undefined","inView","threshold","initialInView","triggerOnce","chartsTheme","handleMouseEnter","e","handleMouseLeave","component","display","flexFlow","variant","aria-labelledby","aria-describedby","data-testid","id","title","spec","name","description","paddingX","container","padding","default","position","overflow","flexGrow","margin","FallbackComponent","resetKeys","plugin","panelPluginKind","kind"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/Panel/Panel.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 { useState, useMemo } from 'react';\nimport useResizeObserver from 'use-resize-observer';\nimport { useInView } from 'react-intersection-observer';\nimport { ErrorBoundary, ErrorAlert, combineSx, useId, useChartsTheme } from '@perses-dev/components';\nimport { PanelDefinition } from '@perses-dev/core';\nimport { Card, CardProps, CardContent } from '@mui/material';\nimport { PanelHeader, PanelHeaderProps } from './PanelHeader';\nimport { PanelContent } from './PanelContent';\n\nexport interface PanelProps extends CardProps<'section'> {\n  definition: PanelDefinition;\n  editHandlers?: PanelHeaderProps['editHandlers'];\n}\n\n/**\n * Renders a PanelDefinition's content inside of a Card.\n */\nexport function Panel(props: PanelProps) {\n  const { definition, editHandlers, onMouseEnter, onMouseLeave, sx, ...others } = props;\n\n  // Make sure we have an ID we can use for aria attributes\n  const generatedPanelId = useId('Panel');\n  const headerId = `${generatedPanelId}-header`;\n\n  const [contentElement, setContentElement] = useState<HTMLElement | null>(null);\n\n  const { width, height } = useResizeObserver({ ref: contentElement });\n\n  const contentDimensions = useMemo(() => {\n    if (width === undefined || height === undefined) return undefined;\n    return { width, height };\n  }, [width, height]);\n\n  const { ref, inView } = useInView({\n    threshold: 0.3,\n    initialInView: false,\n    triggerOnce: true,\n  });\n\n  const chartsTheme = useChartsTheme();\n\n  const handleMouseEnter: CardProps['onMouseEnter'] = (e) => {\n    onMouseEnter?.(e);\n  };\n\n  const handleMouseLeave: CardProps['onMouseLeave'] = (e) => {\n    onMouseLeave?.(e);\n  };\n\n  return (\n    <Card\n      ref={ref}\n      component=\"section\"\n      sx={combineSx(\n        {\n          width: '100%',\n          height: '100%',\n          display: 'flex',\n          flexFlow: 'column nowrap',\n        },\n        sx\n      )}\n      variant=\"outlined\"\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      aria-labelledby={headerId}\n      aria-describedby={headerId}\n      data-testid=\"panel\"\n      {...others}\n    >\n      <PanelHeader\n        id={headerId}\n        title={definition.spec.display.name}\n        description={definition.spec.display.description}\n        editHandlers={editHandlers}\n        sx={{ paddingX: `${chartsTheme.container.padding.default}px` }}\n      />\n      <CardContent\n        component=\"figure\"\n        sx={{\n          position: 'relative',\n          overflow: 'hidden',\n          flexGrow: 1,\n          margin: 0,\n          padding: 0,\n          // Override MUI default style for last-child\n          ':last-child': {\n            padding: 0,\n          },\n        }}\n        ref={setContentElement}\n      >\n        <ErrorBoundary FallbackComponent={ErrorAlert} resetKeys={[definition.spec.plugin.spec]}>\n          {inView === true && (\n            <PanelContent\n              panelPluginKind={definition.spec.plugin.kind}\n              spec={definition.spec.plugin.spec}\n              contentDimensions={contentDimensions}\n            />\n          )}\n        </ErrorBoundary>\n      </CardContent>\n    </Card>\n  );\n}\n"],"names":["useState","useMemo","useResizeObserver","useInView","ErrorBoundary","ErrorAlert","combineSx","useId","useChartsTheme","Card","CardContent","PanelHeader","PanelContent","Panel","props","definition","editHandlers","onMouseEnter","onMouseLeave","sx","others","generatedPanelId","headerId","contentElement","setContentElement","width","height","ref","contentDimensions","undefined","inView","threshold","initialInView","triggerOnce","chartsTheme","handleMouseEnter","e","handleMouseLeave","component","display","flexFlow","variant","aria-labelledby","aria-describedby","data-testid","id","title","spec","name","description","paddingX","container","padding","default","position","overflow","flexGrow","margin","FallbackComponent","resetKeys","plugin","panelPluginKind","kind"],"mappings":"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"}

package/dist/components/Panel/PanelHeader.d.ts

@@ -10,8 +10,7 @@ export interface PanelHeaderProps extends Omit<CardHeaderProps, OmittedProps> {
         onDuplicatePanelClick: () => void;
         onDeletePanelClick: () => void;
     };
-    isHovered: boolean;
 }
-export declare function PanelHeader({ id, title, description, editHandlers, isHovered, sx, ...rest }: PanelHeaderProps): JSX.Element;
+export declare function PanelHeader({ id, title, description, editHandlers, sx, ...rest }: PanelHeaderProps): JSX.Element;
 export {};
 //# sourceMappingURL=PanelHeader.d.ts.map

package/dist/components/Panel/PanelHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PanelHeader.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/PanelHeader.tsx"],"names":[],"mappings":";AAaA,OAAO,EAA6C,eAAe,EAAU,MAAM,eAAe,CAAC;AASnG,aAAK,YAAY,GAAG,UAAU,GAAG,QAAQ,GAAG,OAAO,GAAG,mBAAmB,CAAC;AAE1E,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,eAAe,EAAE,YAAY,CAAC;IAC3E,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE;QACb,gBAAgB,EAAE,MAAM,IAAI,CAAC;QAC7B,qBAAqB,EAAE,MAAM,IAAI,CAAC;QAClC,kBAAkB,EAAE,MAAM,IAAI,CAAC;KAChC,CAAC;IACF,SAAS,EAAE,OAAO,CAAC;CACpB;AAED,wBAAgB,WAAW,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,SAAS,EAAE,EAAE,EAAE,GAAG,IAAI,EAAE,EAAE,gBAAgB,eAmH7G"}
+{"version":3,"file":"PanelHeader.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/PanelHeader.tsx"],"names":[],"mappings":";AAaA,OAAO,EAA6C,eAAe,EAAU,MAAM,eAAe,CAAC;AASnG,aAAK,YAAY,GAAG,UAAU,GAAG,QAAQ,GAAG,OAAO,GAAG,mBAAmB,CAAC;AAE1E,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,eAAe,EAAE,YAAY,CAAC;IAC3E,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE;QACb,gBAAgB,EAAE,MAAM,IAAI,CAAC;QAC7B,qBAAqB,EAAE,MAAM,IAAI,CAAC;QAClC,kBAAkB,EAAE,MAAM,IAAI,CAAC;KAChC,CAAC;CACH;AAED,wBAAgB,WAAW,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,EAAE,EAAE,GAAG,IAAI,EAAE,EAAE,gBAAgB,eAmHlG"}

package/dist/components/Panel/PanelHeader.js

@@ -19,7 +19,7 @@ import DeleteIcon from 'mdi-material-ui/DeleteOutline';
 import DragIcon from 'mdi-material-ui/DragVertical';
 import ContentCopy from 'mdi-material-ui/ContentCopy';
 import { ARIA_LABEL_TEXT, TOOLTIP_TEXT } from '../../constants';
-export function PanelHeader({ id , title , description , editHandlers , isHovered , sx , ...rest }) {
+export function PanelHeader({ id , title , description , editHandlers , sx , ...rest }) {
     const titleElementId = `${id}-title`;
     const descriptionTooltipId = `${id}-description`;
     let actions = undefined;
@@ -81,7 +81,7 @@ export function PanelHeader({ id , title , description , editHandlers , isHovere
                 })
             ]
         });
-    } else if (description !== undefined && isHovered) {
+    } else if (description !== undefined) {
         // If there aren't edit handlers and we have a description, show a button with a tooltip for the panel description
         actions = /*#__PURE__*/ _jsx(InfoTooltip, {
             id: descriptionTooltipId,

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, IconButton, CardHeaderProps, styled } 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 ContentCopy from 'mdi-material-ui/ContentCopy';\nimport { ARIA_LABEL_TEXT, TOOLTIP_TEXT } from '../../constants';\n\ntype OmittedProps = 'children' | 'action' | 'title' | 'disableTypography';\n\nexport interface PanelHeaderProps extends Omit<CardHeaderProps, OmittedProps> {\n  id: string;\n  title: string;\n  description?: string;\n  editHandlers?: {\n    onEditPanelClick: () => void;\n    onDuplicatePanelClick: () => void;\n    onDeletePanelClick: () => void;\n  };\n  isHovered: boolean;\n}\n\nexport function PanelHeader({ id, title, description, editHandlers, isHovered, sx, ...rest }: PanelHeaderProps) {\n  const titleElementId = `${id}-title`;\n  const descriptionTooltipId = `${id}-description`;\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            <ContentCopy\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  } else if (description !== undefined && isHovered) {\n    // If there aren't edit handlers and we have a description, show a button with a tooltip for the panel description\n    actions = (\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.grey[700] }}\n          />\n        </HeaderIconButton>\n      </InfoTooltip>\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        <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      }\n      action={\n        <HeaderActionWrapper direction=\"row\" spacing={0.25} alignItems=\"center\">\n          {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","IconButton","styled","InfoTooltip","combineSx","InformationOutlineIcon","PencilIcon","DeleteIcon","DragIcon","ContentCopy","ARIA_LABEL_TEXT","TOOLTIP_TEXT","PanelHeader","id","title","description","editHandlers","isHovered","sx","rest","titleElementId","descriptionTooltipId","actions","undefined","editPanel","HeaderIconButton","aria-label","size","onClick","onEditPanelClick","fontSize","duplicatePanel","onDuplicatePanelClick","transform","deletePanel","onDeletePanelClick","movePanel","className","cursor","enterDelay","aria-describedby","aria-hidden","color","theme","palette","grey","component","aria-labelledby","disableTypography","variant","lineHeight","minHeight","whiteSpace","overflow","textOverflow","action","HeaderActionWrapper","direction","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, IconButton, CardHeaderProps, styled } 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 ContentCopy from 'mdi-material-ui/ContentCopy';\nimport { ARIA_LABEL_TEXT, TOOLTIP_TEXT } from '../../constants';\n\ntype OmittedProps = 'children' | 'action' | 'title' | 'disableTypography';\n\nexport interface PanelHeaderProps extends Omit<CardHeaderProps, OmittedProps> {\n  id: string;\n  title: string;\n  description?: string;\n  editHandlers?: {\n    onEditPanelClick: () => void;\n    onDuplicatePanelClick: () => void;\n    onDeletePanelClick: () => void;\n  };\n}\n\nexport function PanelHeader({ id, title, description, editHandlers, sx, ...rest }: PanelHeaderProps) {\n  const titleElementId = `${id}-title`;\n  const descriptionTooltipId = `${id}-description`;\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            <ContentCopy\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  } else if (description !== undefined) {\n    // If there aren't edit handlers and we have a description, show a button with a tooltip for the panel description\n    actions = (\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.grey[700] }}\n          />\n        </HeaderIconButton>\n      </InfoTooltip>\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        <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      }\n      action={\n        <HeaderActionWrapper direction=\"row\" spacing={0.25} alignItems=\"center\">\n          {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","IconButton","styled","InfoTooltip","combineSx","InformationOutlineIcon","PencilIcon","DeleteIcon","DragIcon","ContentCopy","ARIA_LABEL_TEXT","TOOLTIP_TEXT","PanelHeader","id","title","description","editHandlers","sx","rest","titleElementId","descriptionTooltipId","actions","undefined","editPanel","HeaderIconButton","aria-label","size","onClick","onEditPanelClick","fontSize","duplicatePanel","onDuplicatePanelClick","transform","deletePanel","onDeletePanelClick","movePanel","className","cursor","enterDelay","aria-describedby","aria-hidden","color","theme","palette","grey","component","aria-labelledby","disableTypography","variant","lineHeight","minHeight","whiteSpace","overflow","textOverflow","action","HeaderActionWrapper","direction","spacing","alignItems","padding","borderBottom","divider","margin","borderRadius","shape","marginTop","marginBottom"],"mappings":"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"}

package/dist/components/QuerySummaryTable/QuerySummaryTable.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+export interface WarningDisplay {
+    query: string;
+    summary: string;
+}
+interface QuerySummaryTableProps {
+    showTotalQueries?: boolean;
+}
+export declare function QuerySummaryTable(props: QuerySummaryTableProps): JSX.Element | null;
+export {};
+//# sourceMappingURL=QuerySummaryTable.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"QuerySummaryTable.d.ts","sourceRoot":"","sources":["../../../src/components/QuerySummaryTable/QuerySummaryTable.tsx"],"names":[],"mappings":";AA8BA,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;CACjB;AAID,UAAU,sBAAsB;IAC9B,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,sBAmG9D"}

package/dist/components/QuerySummaryTable/QuerySummaryTable.js

@@ -0,0 +1,179 @@
+// Copyright 2023 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, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Button, Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Typography, Stack } from '@mui/material';
+import { useQueryClient } from '@tanstack/react-query';
+import { useActiveTimeSeriesQueries, useDatasourceClient, useTimeRange } from '@perses-dev/plugin-system';
+const TABLE_MAX_WIDTH = 1000;
+export function QuerySummaryTable(props) {
+    const { showTotalQueries =true  } = props;
+    const datasourcClient = useDatasourceClient({
+        kind: 'PrometheusDatasource'
+    });
+    const { absoluteTimeRange  } = useTimeRange();
+    // for displaying a summary of recent query results
+    const queryClient = useQueryClient();
+    const queries = queryClient.getQueryCache().findAll();
+    const activeQueries = queries.filter((query)=>query.state.status === 'loading');
+    const completedQueries = queries.filter((query)=>query.state.status === 'success');
+    const querySummary = useActiveTimeSeriesQueries();
+    if (datasourcClient.isLoading === true) {
+        return null;
+    }
+    const warnings = [];
+    querySummary.forEach((query)=>{
+        var ref;
+        const queryData = query.state.data;
+        if (queryData && ((ref = queryData.metadata) === null || ref === void 0 ? void 0 : ref.notices)) {
+            var ref1;
+            const queryKey = query.queryKey;
+            const warningMessage = (ref1 = queryData.metadata.notices[0]) === null || ref1 === void 0 ? void 0 : ref1.message;
+            if (warningMessage) {
+                warnings.push({
+                    query: String(queryKey[0].spec.plugin.spec.query),
+                    summary: warningMessage
+                });
+            }
+        }
+    });
+    return /*#__PURE__*/ _jsxs(Stack, {
+        spacing: 1,
+        mb: 2,
+        sx: {
+            maxWidth: TABLE_MAX_WIDTH
+        },
+        children: [
+            /*#__PURE__*/ _jsxs(Box, {
+                sx: {
+                    p: 1
+                },
+                children: [
+                    /*#__PURE__*/ _jsx(Typography, {
+                        variant: "h2",
+                        mb: 1,
+                        children: "Query Summary"
+                    }),
+                    /*#__PURE__*/ _jsx(TableContainer, {
+                        component: Paper,
+                        children: /*#__PURE__*/ _jsxs(Table, {
+                            size: "small",
+                            "aria-label": "query summary table",
+                            children: [
+                                /*#__PURE__*/ _jsx(TableHead, {
+                                    children: /*#__PURE__*/ _jsxs(TableRow, {
+                                        children: [
+                                            /*#__PURE__*/ _jsx(TableCell, {
+                                                children: "Queries Loading"
+                                            }),
+                                            /*#__PURE__*/ _jsx(TableCell, {
+                                                children: "Recent Time Series Queries"
+                                            }),
+                                            showTotalQueries && /*#__PURE__*/ _jsx(TableCell, {
+                                                children: "Total Queries"
+                                            }),
+                                            /*#__PURE__*/ _jsx(TableCell, {
+                                                children: "Start Time"
+                                            }),
+                                            /*#__PURE__*/ _jsx(TableCell, {
+                                                children: "End Time"
+                                            })
+                                        ]
+                                    })
+                                }),
+                                /*#__PURE__*/ _jsx(TableBody, {
+                                    children: /*#__PURE__*/ _jsxs(TableRow, {
+                                        children: [
+                                            /*#__PURE__*/ _jsx(TableCell, {
+                                                children: activeQueries.length
+                                            }),
+                                            /*#__PURE__*/ _jsx(TableCell, {
+                                                children: querySummary.length
+                                            }),
+                                            showTotalQueries && /*#__PURE__*/ _jsx(TableCell, {
+                                                children: completedQueries.length
+                                            }),
+                                            /*#__PURE__*/ _jsx(TableCell, {
+                                                children: absoluteTimeRange.start.toString()
+                                            }),
+                                            /*#__PURE__*/ _jsx(TableCell, {
+                                                children: absoluteTimeRange.end.toString()
+                                            })
+                                        ]
+                                    })
+                                })
+                            ]
+                        })
+                    })
+                ]
+            }),
+            warnings.length > 0 && /*#__PURE__*/ _jsxs(Box, {
+                sx: {
+                    p: 1,
+                    m: 0
+                },
+                children: [
+                    /*#__PURE__*/ _jsx(Typography, {
+                        variant: "h3",
+                        mb: 1,
+                        children: "Warnings"
+                    }),
+                    /*#__PURE__*/ _jsx(TableContainer, {
+                        component: Paper,
+                        sx: {
+                            mb: 2
+                        },
+                        children: /*#__PURE__*/ _jsxs(Table, {
+                            size: "small",
+                            "aria-label": "query warnings table",
+                            children: [
+                                /*#__PURE__*/ _jsx(TableHead, {
+                                    children: /*#__PURE__*/ _jsxs(TableRow, {
+                                        children: [
+                                            /*#__PURE__*/ _jsx(TableCell, {
+                                                children: "Query"
+                                            }),
+                                            /*#__PURE__*/ _jsx(TableCell, {
+                                                children: "Summary"
+                                            })
+                                        ]
+                                    })
+                                }),
+                                /*#__PURE__*/ _jsx(TableBody, {
+                                    children: warnings.map((details, idx)=>{
+                                        return /*#__PURE__*/ _jsxs(TableRow, {
+                                            children: [
+                                                /*#__PURE__*/ _jsx(TableCell, {
+                                                    children: details.query
+                                                }),
+                                                /*#__PURE__*/ _jsx(TableCell, {
+                                                    children: details.summary
+                                                })
+                                            ]
+                                        }, idx);
+                                    })
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(Button, {
+                        disabled: true,
+                        variant: "outlined",
+                        children: "TODO: Action Button"
+                    })
+                ]
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=QuerySummaryTable.js.map

package/dist/components/QuerySummaryTable/QuerySummaryTable.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/QuerySummaryTable/QuerySummaryTable.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 {\n  Box,\n  Button,\n  Paper,\n  Table,\n  TableBody,\n  TableCell,\n  TableContainer,\n  TableHead,\n  TableRow,\n  Typography,\n  Stack,\n} from '@mui/material';\nimport { useQueryClient } from '@tanstack/react-query';\nimport { TimeSeriesQueryDefinition, UnknownSpec } from '@perses-dev/core';\nimport { useActiveTimeSeriesQueries, useDatasourceClient, useTimeRange } from '@perses-dev/plugin-system';\n\nexport interface WarningDisplay {\n  query: string;\n  summary: string;\n}\n\nconst TABLE_MAX_WIDTH = 1000;\n\ninterface QuerySummaryTableProps {\n  showTotalQueries?: boolean;\n}\n\nexport function QuerySummaryTable(props: QuerySummaryTableProps) {\n  const { showTotalQueries = true } = props;\n  const datasourcClient = useDatasourceClient({ kind: 'PrometheusDatasource' });\n  const { absoluteTimeRange } = useTimeRange();\n\n  // for displaying a summary of recent query results\n  const queryClient = useQueryClient();\n  const queries = queryClient.getQueryCache().findAll();\n  const activeQueries = queries.filter((query) => query.state.status === 'loading');\n  const completedQueries = queries.filter((query) => query.state.status === 'success');\n  const querySummary = useActiveTimeSeriesQueries();\n\n  if (datasourcClient.isLoading === true) {\n    return null;\n  }\n\n  const warnings: WarningDisplay[] = [];\n  querySummary.forEach((query) => {\n    const queryData = query.state.data;\n    if (queryData && queryData.metadata?.notices) {\n      const queryKey = query.queryKey as [TimeSeriesQueryDefinition<UnknownSpec>];\n      const warningMessage = queryData.metadata.notices[0]?.message;\n      if (warningMessage) {\n        warnings.push({\n          query: String(queryKey[0].spec.plugin.spec.query),\n          summary: warningMessage,\n        });\n      }\n    }\n  });\n\n  return (\n    <Stack\n      spacing={1}\n      mb={2}\n      sx={{\n        maxWidth: TABLE_MAX_WIDTH,\n      }}\n    >\n      <Box sx={{ p: 1 }}>\n        <Typography variant=\"h2\" mb={1}>\n          Query Summary\n        </Typography>\n        <TableContainer component={Paper}>\n          <Table size=\"small\" aria-label=\"query summary table\">\n            <TableHead>\n              <TableRow>\n                <TableCell>Queries Loading</TableCell>\n                <TableCell>Recent Time Series Queries</TableCell>\n                {showTotalQueries && <TableCell>Total Queries</TableCell>}\n                <TableCell>Start Time</TableCell>\n                <TableCell>End Time</TableCell>\n              </TableRow>\n            </TableHead>\n            <TableBody>\n              <TableRow>\n                <TableCell>{activeQueries.length}</TableCell>\n                <TableCell>{querySummary.length}</TableCell>\n                {showTotalQueries && <TableCell>{completedQueries.length}</TableCell>}\n                <TableCell>{absoluteTimeRange.start.toString()}</TableCell>\n                <TableCell>{absoluteTimeRange.end.toString()}</TableCell>\n              </TableRow>\n            </TableBody>\n          </Table>\n        </TableContainer>\n      </Box>\n\n      {warnings.length > 0 && (\n        <Box sx={{ p: 1, m: 0 }}>\n          <Typography variant=\"h3\" mb={1}>\n            Warnings\n          </Typography>\n          <TableContainer component={Paper} sx={{ mb: 2 }}>\n            <Table size=\"small\" aria-label=\"query warnings table\">\n              <TableHead>\n                <TableRow>\n                  <TableCell>Query</TableCell>\n                  <TableCell>Summary</TableCell>\n                </TableRow>\n              </TableHead>\n              <TableBody>\n                {warnings.map((details, idx) => {\n                  return (\n                    <TableRow key={idx}>\n                      <TableCell>{details.query}</TableCell>\n                      <TableCell>{details.summary}</TableCell>\n                    </TableRow>\n                  );\n                })}\n              </TableBody>\n            </Table>\n          </TableContainer>\n          <Button disabled variant=\"outlined\">\n            TODO: Action Button\n          </Button>\n        </Box>\n      )}\n    </Stack>\n  );\n}\n"],"names":["Box","Button","Paper","Table","TableBody","TableCell","TableContainer","TableHead","TableRow","Typography","Stack","useQueryClient","useActiveTimeSeriesQueries","useDatasourceClient","useTimeRange","TABLE_MAX_WIDTH","QuerySummaryTable","props","showTotalQueries","datasourcClient","kind","absoluteTimeRange","queryClient","queries","getQueryCache","findAll","activeQueries","filter","query","state","status","completedQueries","querySummary","isLoading","warnings","forEach","queryData","data","metadata","notices","queryKey","warningMessage","message","push","String","spec","plugin","summary","spacing","mb","sx","maxWidth","p","variant","component","size","aria-label","length","start","toString","end","m","map","details","idx","disabled"],"mappings":"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"}

package/dist/components/QuerySummaryTable/index.d.ts

@@ -0,0 +1,2 @@
+export * from './QuerySummaryTable';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/QuerySummaryTable/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/QuerySummaryTable/index.ts"],"names":[],"mappings":"AAaA,cAAc,qBAAqB,CAAC"}

package/dist/components/QuerySummaryTable/index.js

@@ -0,0 +1,15 @@
+// Copyright 2023 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.
+export * from './QuerySummaryTable';
+
+//# sourceMappingURL=index.js.map

package/dist/components/QuerySummaryTable/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/QuerySummaryTable/index.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 * from './QuerySummaryTable';\n"],"names":[],"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,cAAc,qBAAqB,CAAC"}

package/dist/components/ToolbarIconButton/ToolbarIconButton.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { ButtonProps } from '@mui/material';
 declare type ToolbarIconButtonProps = ButtonProps;
-export declare function ToolbarIconButton(props: ToolbarIconButtonProps): JSX.Element;
+export declare const ToolbarIconButton: import("react").ForwardRefExoticComponent<Pick<ToolbarIconButtonProps, "onChange" | "placeholder" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "slot" | "spellCheck" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "value" | "autoFocus" | "form" | "size" | "name" | keyof import("@mui/material/OverridableComponent").CommonProps | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "TouchRippleProps" | "touchRippleRef" | "key" | "href" | "type" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "startIcon" | "variant" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget"> & import("react").RefAttributes<HTMLButtonElement>>;
 export {};
 //# sourceMappingURL=ToolbarIconButton.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ToolbarIconButton.d.ts","sourceRoot":"","sources":["../../../src/components/ToolbarIconButton/ToolbarIconButton.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAkB,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5D,aAAK,sBAAsB,GAAG,WAAW,CAAC;AAE1C,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,eAE9D"}
+{"version":3,"file":"ToolbarIconButton.d.ts","sourceRoot":"","sources":["../../../src/components/ToolbarIconButton/ToolbarIconButton.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAkB,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5D,aAAK,sBAAsB,GAAG,WAAW,CAAC;AAa1C,eAAO,MAAM,iBAAiB,gmKAAyB,CAAC"}

package/dist/components/ToolbarIconButton/ToolbarIconButton.js

@@ -11,19 +11,22 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
 import { Button, styled } from '@mui/material';
-export function ToolbarIconButton(props) {
-    return /*#__PURE__*/ _jsx(IconButton, {
+function IconButton(props, ref) {
+    return /*#__PURE__*/ _jsx(StyledIconButton, {
+        ref: ref,
         variant: "outlined",
         color: "secondary",
         ...props
     });
 }
-const IconButton = styled(Button)(({ theme  })=>({
+const StyledIconButton = styled(Button)(({ theme  })=>({
         // Using a button with some adjusted styles because it is easier to inherit
         // styling and variants from themes than with an IconButton.
         padding: theme.spacing(0.5),
         minWidth: 'auto'
     }));
+export const ToolbarIconButton = /*#__PURE__*/ forwardRef(IconButton);
 
 //# sourceMappingURL=ToolbarIconButton.js.map

package/dist/components/ToolbarIconButton/ToolbarIconButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ToolbarIconButton/ToolbarIconButton.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 { Button, styled, ButtonProps } from '@mui/material';\n\ntype ToolbarIconButtonProps = ButtonProps;\n\nexport function ToolbarIconButton(props: ToolbarIconButtonProps) {\n  return <IconButton variant=\"outlined\" color=\"secondary\" {...props} />;\n}\n\nconst IconButton = styled(Button)(({ theme }) => ({\n  // Using a button with some adjusted styles because it is easier to inherit\n  // styling and variants from themes than with an IconButton.\n  padding: theme.spacing(0.5),\n  minWidth: 'auto',\n}));\n"],"names":["Button","styled","ToolbarIconButton","props","IconButton","variant","color","theme","padding","spacing","minWidth"],"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;AAAA,SAASA,MAAM,EAAEC,MAAM,QAAqB,eAAe,CAAC;AAI5D,OAAO,SAASC,iBAAiB,CAACC,KAA6B,EAAE;IAC/D,qBAAO,KAACC,UAAU;QAACC,OAAO,EAAC,UAAU;QAACC,KAAK,EAAC,WAAW;QAAE,GAAGH,KAAK;MAAI,CAAC;AACxE,CAAC;AAED,MAAMC,UAAU,GAAGH,MAAM,CAACD,MAAM,CAAC,CAAC,CAAC,EAAEO,KAAK,CAAA,EAAE,GAAM,CAAA;QAChD,2EAA2E;QAC3E,4DAA4D;QAC5DC,OAAO,EAAED,KAAK,CAACE,OAAO,CAAC,GAAG,CAAC;QAC3BC,QAAQ,EAAE,MAAM;KACjB,CAAA,AAAC,CAAC,AAAC"}
+{"version":3,"sources":["../../../src/components/ToolbarIconButton/ToolbarIconButton.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 { ForwardedRef, forwardRef } from 'react';\nimport { Button, styled, ButtonProps } from '@mui/material';\n\ntype ToolbarIconButtonProps = ButtonProps;\n\nfunction IconButton(props: ToolbarIconButtonProps, ref: ForwardedRef<HTMLButtonElement>) {\n  return <StyledIconButton ref={ref} variant=\"outlined\" color=\"secondary\" {...props} />;\n}\n\nconst StyledIconButton = styled(Button)(({ theme }) => ({\n  // Using a button with some adjusted styles because it is easier to inherit\n  // styling and variants from themes than with an IconButton.\n  padding: theme.spacing(0.5),\n  minWidth: 'auto',\n}));\n\nexport const ToolbarIconButton = forwardRef(IconButton);\n"],"names":["forwardRef","Button","styled","IconButton","props","ref","StyledIconButton","variant","color","theme","padding","spacing","minWidth","ToolbarIconButton"],"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;AAAA,SAAuBA,UAAU,QAAQ,OAAO,CAAC;AACjD,SAASC,MAAM,EAAEC,MAAM,QAAqB,eAAe,CAAC;AAI5D,SAASC,UAAU,CAACC,KAA6B,EAAEC,GAAoC,EAAE;IACvF,qBAAO,KAACC,gBAAgB;QAACD,GAAG,EAAEA,GAAG;QAAEE,OAAO,EAAC,UAAU;QAACC,KAAK,EAAC,WAAW;QAAE,GAAGJ,KAAK;MAAI,CAAC;AACxF,CAAC;AAED,MAAME,gBAAgB,GAAGJ,MAAM,CAACD,MAAM,CAAC,CAAC,CAAC,EAAEQ,KAAK,CAAA,EAAE,GAAM,CAAA;QACtD,2EAA2E;QAC3E,4DAA4D;QAC5DC,OAAO,EAAED,KAAK,CAACE,OAAO,CAAC,GAAG,CAAC;QAC3BC,QAAQ,EAAE,MAAM;KACjB,CAAA,AAAC,CAAC,AAAC;AAEJ,OAAO,MAAMC,iBAAiB,iBAAGb,UAAU,CAACG,UAAU,CAAC,CAAC"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"EditVariablesButton.d.ts","sourceRoot":"","sources":["../../../src/components/Variables/EditVariablesButton.tsx"],"names":[],"mappings":";AAuBA,wBAAgB,mBAAmB,gBAqClC"}
+{"version":3,"file":"EditVariablesButton.d.ts","sourceRoot":"","sources":["../../../src/components/Variables/EditVariablesButton.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAU,WAAW,EAAE,MAAM,eAAe,CAAC;AASpD,MAAM,WAAW,wBAAyB,SAAQ,IAAI,CAAC,WAAW,EAAE,WAAW,CAAC;IAC9E;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IAE9B;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;IAEhC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,mBAAmB,CAAC,EAClC,OAAgB,EAChB,KAAmB,EACnB,KAAiB,EACjB,SAAS,GACV,EAAE,wBAAwB,eA6C1B"}

package/dist/components/Variables/EditVariablesButton.js

@@ -18,7 +18,7 @@ import { Drawer, InfoTooltip } from '@perses-dev/components';
 import { TOOLTIP_TEXT } from '../../constants';
 import { useTemplateVariableDefinitions, useTemplateVariableActions } from '../../context';
 import { VariableEditor } from './VariableEditor';
-export function EditVariablesButton() {
+export function EditVariablesButton({ variant ='text' , label ='Variables' , color ='primary' , fullWidth  }) {
     const [isVariableEditorOpen, setIsVariableEditorOpen] = useState(false);
     const variableDefinitions = useTemplateVariableDefinitions();
     const { setVariableDefinitions  } = useTemplateVariableActions();
@@ -36,7 +36,14 @@ export function EditVariablesButton() {
                     startIcon: /*#__PURE__*/ _jsx(PencilIcon, {}),
                     onClick: openVariableEditor,
                     "aria-label": TOOLTIP_TEXT.editVariables,
-                    children: "Variables"
+                    variant: variant,
+                    color: color,
+                    fullWidth: fullWidth,
+                    sx: {
+                        whiteSpace: 'nowrap',
+                        minWidth: 'auto'
+                    },
+                    children: label
                 })
             }),
             /*#__PURE__*/ _jsx(Drawer, {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Variables/EditVariablesButton.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 { useState } from 'react';\nimport { Button } from '@mui/material';\nimport PencilIcon from 'mdi-material-ui/PencilOutline';\nimport { Drawer, InfoTooltip } from '@perses-dev/components';\nimport { VariableDefinition } from '@perses-dev/core';\n\nimport { TOOLTIP_TEXT } from '../../constants';\nimport { useTemplateVariableDefinitions, useTemplateVariableActions } from '../../context';\nimport { VariableEditor } from './VariableEditor';\n\nexport function EditVariablesButton() {\n  const [isVariableEditorOpen, setIsVariableEditorOpen] = useState(false);\n  const variableDefinitions: VariableDefinition[] = useTemplateVariableDefinitions();\n  const { setVariableDefinitions } = useTemplateVariableActions();\n\n  const openVariableEditor = () => {\n    setIsVariableEditorOpen(true);\n  };\n\n  const closeVariableEditor = () => {\n    setIsVariableEditorOpen(false);\n  };\n\n  return (\n    <>\n      <InfoTooltip description={TOOLTIP_TEXT.editVariables}>\n        <Button startIcon={<PencilIcon />} onClick={openVariableEditor} aria-label={TOOLTIP_TEXT.editVariables}>\n          Variables\n        </Button>\n      </InfoTooltip>\n      <Drawer\n        isOpen={isVariableEditorOpen}\n        onClose={closeVariableEditor}\n        PaperProps={{ sx: { width: '50%' } }}\n        data-testid=\"variable-editor\"\n      >\n        <VariableEditor\n          variableDefinitions={variableDefinitions}\n          onCancel={closeVariableEditor}\n          onChange={(variables: VariableDefinition[]) => {\n            setVariableDefinitions(variables);\n            setIsVariableEditorOpen(false);\n          }}\n        />\n      </Drawer>\n    </>\n  );\n}\n"],"names":["useState","Button","PencilIcon","Drawer","InfoTooltip","TOOLTIP_TEXT","useTemplateVariableDefinitions","useTemplateVariableActions","VariableEditor","EditVariablesButton","isVariableEditorOpen","setIsVariableEditorOpen","variableDefinitions","setVariableDefinitions","openVariableEditor","closeVariableEditor","description","editVariables","startIcon","onClick","aria-label","isOpen","onClose","PaperProps","sx","width","data-testid","onCancel","onChange","variables"],"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;AAAA,SAASA,QAAQ,QAAQ,OAAO,CAAC;AACjC,SAASC,MAAM,QAAQ,eAAe,CAAC;AACvC,OAAOC,UAAU,MAAM,+BAA+B,CAAC;AACvD,SAASC,MAAM,EAAEC,WAAW,QAAQ,wBAAwB,CAAC;AAG7D,SAASC,YAAY,QAAQ,iBAAiB,CAAC;AAC/C,SAASC,8BAA8B,EAAEC,0BAA0B,QAAQ,eAAe,CAAC;AAC3F,SAASC,cAAc,QAAQ,kBAAkB,CAAC;AAElD,OAAO,SAASC,mBAAmB,GAAG;IACpC,MAAM,CAACC,oBAAoB,EAAEC,uBAAuB,CAAC,GAAGX,QAAQ,CAAC,KAAK,CAAC,AAAC;IACxE,MAAMY,mBAAmB,GAAyBN,8BAA8B,EAAE,AAAC;IACnF,MAAM,EAAEO,sBAAsB,CAAA,EAAE,GAAGN,0BAA0B,EAAE,AAAC;IAEhE,MAAMO,kBAAkB,GAAG,IAAM;QAC/BH,uBAAuB,CAAC,IAAI,CAAC,CAAC;IAChC,CAAC,AAAC;IAEF,MAAMI,mBAAmB,GAAG,IAAM;QAChCJ,uBAAuB,CAAC,KAAK,CAAC,CAAC;IACjC,CAAC,AAAC;IAEF,qBACE;;0BACE,KAACP,WAAW;gBAACY,WAAW,EAAEX,YAAY,CAACY,aAAa;0BAClD,cAAA,KAAChB,MAAM;oBAACiB,SAAS,gBAAE,KAAChB,UAAU,KAAG;oBAAEiB,OAAO,EAAEL,kBAAkB;oBAAEM,YAAU,EAAEf,YAAY,CAACY,aAAa;8BAAE,WAExG;kBAAS;cACG;0BACd,KAACd,MAAM;gBACLkB,MAAM,EAAEX,oBAAoB;gBAC5BY,OAAO,EAAEP,mBAAmB;gBAC5BQ,UAAU,EAAE;oBAAEC,EAAE,EAAE;wBAAEC,KAAK,EAAE,KAAK;qBAAE;iBAAE;gBACpCC,aAAW,EAAC,iBAAiB;0BAE7B,cAAA,KAAClB,cAAc;oBACbI,mBAAmB,EAAEA,mBAAmB;oBACxCe,QAAQ,EAAEZ,mBAAmB;oBAC7Ba,QAAQ,EAAE,CAACC,SAA+B,GAAK;wBAC7ChB,sBAAsB,CAACgB,SAAS,CAAC,CAAC;wBAClClB,uBAAuB,CAAC,KAAK,CAAC,CAAC;oBACjC,CAAC;kBACD;cACK;;MACR,CACH;AACJ,CAAC"}
+{"version":3,"sources":["../../../src/components/Variables/EditVariablesButton.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 { useState } from 'react';\nimport { Button, ButtonProps } from '@mui/material';\nimport PencilIcon from 'mdi-material-ui/PencilOutline';\nimport { Drawer, InfoTooltip } from '@perses-dev/components';\nimport { VariableDefinition } from '@perses-dev/core';\n\nimport { TOOLTIP_TEXT } from '../../constants';\nimport { useTemplateVariableDefinitions, useTemplateVariableActions } from '../../context';\nimport { VariableEditor } from './VariableEditor';\n\nexport interface EditVariablesButtonProps 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 EditVariablesButton({\n  variant = 'text',\n  label = 'Variables',\n  color = 'primary',\n  fullWidth,\n}: EditVariablesButtonProps) {\n  const [isVariableEditorOpen, setIsVariableEditorOpen] = useState(false);\n  const variableDefinitions: VariableDefinition[] = useTemplateVariableDefinitions();\n  const { setVariableDefinitions } = useTemplateVariableActions();\n\n  const openVariableEditor = () => {\n    setIsVariableEditorOpen(true);\n  };\n\n  const closeVariableEditor = () => {\n    setIsVariableEditorOpen(false);\n  };\n\n  return (\n    <>\n      <InfoTooltip description={TOOLTIP_TEXT.editVariables}>\n        <Button\n          startIcon={<PencilIcon />}\n          onClick={openVariableEditor}\n          aria-label={TOOLTIP_TEXT.editVariables}\n          variant={variant}\n          color={color}\n          fullWidth={fullWidth}\n          sx={{ whiteSpace: 'nowrap', minWidth: 'auto' }}\n        >\n          {label}\n        </Button>\n      </InfoTooltip>\n      <Drawer\n        isOpen={isVariableEditorOpen}\n        onClose={closeVariableEditor}\n        PaperProps={{ sx: { width: '50%' } }}\n        data-testid=\"variable-editor\"\n      >\n        <VariableEditor\n          variableDefinitions={variableDefinitions}\n          onCancel={closeVariableEditor}\n          onChange={(variables: VariableDefinition[]) => {\n            setVariableDefinitions(variables);\n            setIsVariableEditorOpen(false);\n          }}\n        />\n      </Drawer>\n    </>\n  );\n}\n"],"names":["useState","Button","PencilIcon","Drawer","InfoTooltip","TOOLTIP_TEXT","useTemplateVariableDefinitions","useTemplateVariableActions","VariableEditor","EditVariablesButton","variant","label","color","fullWidth","isVariableEditorOpen","setIsVariableEditorOpen","variableDefinitions","setVariableDefinitions","openVariableEditor","closeVariableEditor","description","editVariables","startIcon","onClick","aria-label","sx","whiteSpace","minWidth","isOpen","onClose","PaperProps","width","data-testid","onCancel","onChange","variables"],"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;AAAA,SAASA,QAAQ,QAAQ,OAAO,CAAC;AACjC,SAASC,MAAM,QAAqB,eAAe,CAAC;AACpD,OAAOC,UAAU,MAAM,+BAA+B,CAAC;AACvD,SAASC,MAAM,EAAEC,WAAW,QAAQ,wBAAwB,CAAC;AAG7D,SAASC,YAAY,QAAQ,iBAAiB,CAAC;AAC/C,SAASC,8BAA8B,EAAEC,0BAA0B,QAAQ,eAAe,CAAC;AAC3F,SAASC,cAAc,QAAQ,kBAAkB,CAAC;AAmBlD,OAAO,SAASC,mBAAmB,CAAC,EAClCC,OAAO,EAAG,MAAM,CAAA,EAChBC,KAAK,EAAG,WAAW,CAAA,EACnBC,KAAK,EAAG,SAAS,CAAA,EACjBC,SAAS,CAAA,EACgB,EAAE;IAC3B,MAAM,CAACC,oBAAoB,EAAEC,uBAAuB,CAAC,GAAGf,QAAQ,CAAC,KAAK,CAAC,AAAC;IACxE,MAAMgB,mBAAmB,GAAyBV,8BAA8B,EAAE,AAAC;IACnF,MAAM,EAAEW,sBAAsB,CAAA,EAAE,GAAGV,0BAA0B,EAAE,AAAC;IAEhE,MAAMW,kBAAkB,GAAG,IAAM;QAC/BH,uBAAuB,CAAC,IAAI,CAAC,CAAC;IAChC,CAAC,AAAC;IAEF,MAAMI,mBAAmB,GAAG,IAAM;QAChCJ,uBAAuB,CAAC,KAAK,CAAC,CAAC;IACjC,CAAC,AAAC;IAEF,qBACE;;0BACE,KAACX,WAAW;gBAACgB,WAAW,EAAEf,YAAY,CAACgB,aAAa;0BAClD,cAAA,KAACpB,MAAM;oBACLqB,SAAS,gBAAE,KAACpB,UAAU,KAAG;oBACzBqB,OAAO,EAAEL,kBAAkB;oBAC3BM,YAAU,EAAEnB,YAAY,CAACgB,aAAa;oBACtCX,OAAO,EAAEA,OAAO;oBAChBE,KAAK,EAAEA,KAAK;oBACZC,SAAS,EAAEA,SAAS;oBACpBY,EAAE,EAAE;wBAAEC,UAAU,EAAE,QAAQ;wBAAEC,QAAQ,EAAE,MAAM;qBAAE;8BAE7ChB,KAAK;kBACC;cACG;0BACd,KAACR,MAAM;gBACLyB,MAAM,EAAEd,oBAAoB;gBAC5Be,OAAO,EAAEV,mBAAmB;gBAC5BW,UAAU,EAAE;oBAAEL,EAAE,EAAE;wBAAEM,KAAK,EAAE,KAAK;qBAAE;iBAAE;gBACpCC,aAAW,EAAC,iBAAiB;0BAE7B,cAAA,KAACxB,cAAc;oBACbQ,mBAAmB,EAAEA,mBAAmB;oBACxCiB,QAAQ,EAAEd,mBAAmB;oBAC7Be,QAAQ,EAAE,CAACC,SAA+B,GAAK;wBAC7ClB,sBAAsB,CAACkB,SAAS,CAAC,CAAC;wBAClCpB,uBAAuB,CAAC,KAAK,CAAC,CAAC;oBACjC,CAAC;kBACD;cACK;;MACR,CACH;AACJ,CAAC"}