@perses-dev/dashboards 0.52.0-beta.5 → 0.52.0-rc.0

package/dist/components/Panel/Panel.js

@@ -134,6 +134,8 @@ import { PanelHeader } from './PanelHeader';
     const handleMouseLeave = (e)=>{
         onMouseLeave?.(e);
     };
+    // default value for showIcons: if the dashboard is in editing mode or the panel is in fullscreen mode: 'always', otherwise 'hover'
+    const showIcons = panelOptions?.showIcons ?? (editHandlers || readHandlers?.isPanelViewed ? 'always' : 'hover');
     return /*#__PURE__*/ _jsxs(Card, {
         component: "section",
         sx: combineSx({
@@ -167,9 +169,11 @@ import { PanelHeader } from './PanelHeader';
                 viewQueriesHandler: viewQueriesHandler,
                 links: definition.spec.links,
                 pluginActions: pluginActions,
+                showIcons: showIcons,
                 sx: {
                     paddingX: `${chartsTheme.container.padding.default}px`
-                }
+                },
+                dimension: contentDimensions
             }),
             /*#__PURE__*/ _jsx(CardContent, {
                 component: "figure",

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 { Card, CardContent, CardProps } from '@mui/material';\nimport { ErrorAlert, ErrorBoundary, combineSx, useChartsTheme, useId } from '@perses-dev/components';\nimport { PanelDefinition } from '@perses-dev/core';\nimport { useDataQueriesContext, usePluginRegistry } from '@perses-dev/plugin-system';\nimport { ReactNode, memo, useMemo, useState, useEffect } from 'react';\nimport useResizeObserver from 'use-resize-observer';\nimport { PanelGroupItemId } from '../../context';\nimport { PanelContent } from './PanelContent';\nimport { PanelHeader, PanelHeaderProps } from './PanelHeader';\n\nexport interface PanelProps extends CardProps<'section'> {\n  definition: PanelDefinition;\n  readHandlers?: PanelHeaderProps['readHandlers'];\n  editHandlers?: PanelHeaderProps['editHandlers'];\n  panelOptions?: PanelOptions;\n  panelGroupItemId?: PanelGroupItemId;\n  viewQueriesHandler?: PanelHeaderProps['viewQueriesHandler'];\n}\n\nexport type PanelOptions = {\n  /**\n   * Allow you to hide the panel header if desired.\n   * This can be useful in embedded mode for example.\n   */\n  hideHeader?: boolean;\n  /**\n   * Content to render in right of the panel header. (top right of the panel)\n   * It will only be rendered when the panel is in edit mode.\n   */\n  extra?: (props: PanelExtraProps) => ReactNode;\n};\n\nexport type PanelExtraProps = {\n  /**\n   * The PanelDefinition for the panel.\n   */\n  panelDefinition?: PanelDefinition;\n  /**\n   * The PanelGroupItemId for the panel.\n   */\n  panelGroupItemId?: PanelGroupItemId;\n};\n\n/**\n * Renders a PanelDefinition's content inside of a Card.\n *\n * Internal structure:\n * <Panel>                  // renders an entire panel, incl. header and action buttons\n *   <PanelContent>         // renders loading, error or panel based on the queries' status\n *     <PanelPluginLoader>  // loads a panel plugin from the plugin registry and renders the PanelComponent with data from props.queryResults\n */\nexport const Panel = memo(function Panel(props: PanelProps) {\n  const {\n    definition,\n    readHandlers,\n    editHandlers,\n    onMouseEnter,\n    onMouseLeave,\n    sx,\n    panelOptions,\n    panelGroupItemId,\n    viewQueriesHandler,\n    ...others\n  } = 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 chartsTheme = useChartsTheme();\n\n  const { queryResults } = useDataQueriesContext();\n  const { getPlugin } = usePluginRegistry();\n\n  const panelPropsForActions = useMemo(() => {\n    return {\n      spec: definition.spec.plugin.spec,\n      queryResults: queryResults.map((query) => ({\n        definition: query.definition,\n        data: query.data,\n      })),\n      contentDimensions,\n      definition,\n    };\n  }, [definition, contentDimensions, queryResults]);\n\n  // Load plugin actions from the plugin\n  const [pluginActions, setPluginActions] = useState<ReactNode[]>([]);\n\n  useEffect(() => {\n    let cancelled = false;\n\n    const loadPluginActions = async (): Promise<void> => {\n      const panelPluginKind = definition.spec.plugin.kind;\n      const panelProps = panelPropsForActions;\n\n      if (!panelPluginKind || !panelProps) {\n        if (!cancelled) {\n          setPluginActions([]);\n        }\n        return;\n      }\n\n      try {\n        // Add defensive check for getPlugin availability\n        if (!getPlugin || typeof getPlugin !== 'function') {\n          if (!cancelled) {\n            setPluginActions([]);\n          }\n          return;\n        }\n\n        const plugin = await getPlugin('Panel', panelPluginKind);\n\n        if (cancelled) return;\n\n        // More defensive checking for plugin and actions\n        if (\n          !plugin ||\n          typeof plugin !== 'object' ||\n          !plugin.actions ||\n          !Array.isArray(plugin.actions) ||\n          plugin.actions.length === 0\n        ) {\n          if (!cancelled) {\n            setPluginActions([]);\n          }\n          return;\n        }\n\n        // Render plugin actions in header location\n        const headerActions = plugin.actions\n          .filter((action) => !action.location || action.location === 'header')\n          .map((action, index): ReactNode | null => {\n            const ActionComponent = action.component;\n            try {\n              // eslint-disable-next-line @typescript-eslint/no-explicit-any\n              return <ActionComponent key={`plugin-action-${index}`} {...(panelProps as any)} />;\n            } catch (error) {\n              console.warn(`Failed to render plugin action ${index}:`, error);\n              return null;\n            }\n          })\n          .filter((item): item is ReactNode => Boolean(item));\n\n        if (!cancelled) {\n          setPluginActions(headerActions);\n        }\n      } catch (error) {\n        if (!cancelled) {\n          console.warn('Failed to load plugin actions:', error);\n          setPluginActions([]);\n        }\n      }\n    };\n\n    // Use setTimeout to defer the async operation to the next tick\n    const timeoutId = setTimeout(() => {\n      loadPluginActions();\n    }, 0);\n\n    return (): void => {\n      cancelled = true;\n      clearTimeout(timeoutId);\n    };\n  }, [definition.spec.plugin.kind, panelPropsForActions, getPlugin]);\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      component=\"section\"\n      sx={combineSx(\n        {\n          width: '100%',\n          height: '100%',\n          display: 'flex',\n          flexFlow: 'column nowrap',\n          ':hover': { '--panel-hover': 'block' },\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      {!panelOptions?.hideHeader && (\n        <PanelHeader\n          extra={panelOptions?.extra?.({ panelDefinition: definition, panelGroupItemId })}\n          id={headerId}\n          title={definition.spec.display.name}\n          description={definition.spec.display.description}\n          queryResults={queryResults}\n          readHandlers={readHandlers}\n          editHandlers={editHandlers}\n          viewQueriesHandler={viewQueriesHandler}\n          links={definition.spec.links}\n          pluginActions={pluginActions}\n          sx={{ paddingX: `${chartsTheme.container.padding.default}px` }}\n        />\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, queryResults]}>\n          <PanelContent\n            definition={definition}\n            panelPluginKind={definition.spec.plugin.kind}\n            spec={definition.spec.plugin.spec}\n            contentDimensions={contentDimensions}\n            queryResults={queryResults}\n          />\n        </ErrorBoundary>\n      </CardContent>\n    </Card>\n  );\n});\n"],"names":["Card","CardContent","ErrorAlert","ErrorBoundary","combineSx","useChartsTheme","useId","useDataQueriesContext","usePluginRegistry","memo","useMemo","useState","useEffect","useResizeObserver","PanelContent","PanelHeader","Panel","props","definition","readHandlers","editHandlers","onMouseEnter","onMouseLeave","sx","panelOptions","panelGroupItemId","viewQueriesHandler","others","generatedPanelId","headerId","contentElement","setContentElement","width","height","ref","contentDimensions","undefined","chartsTheme","queryResults","getPlugin","panelPropsForActions","spec","plugin","map","query","data","pluginActions","setPluginActions","cancelled","loadPluginActions","panelPluginKind","kind","panelProps","actions","Array","isArray","length","headerActions","filter","action","location","index","ActionComponent","component","error","console","warn","item","Boolean","timeoutId","setTimeout","clearTimeout","handleMouseEnter","e","handleMouseLeave","display","flexFlow","variant","aria-labelledby","aria-describedby","data-testid","hideHeader","extra","panelDefinition","id","title","name","description","links","paddingX","container","padding","default","position","overflow","flexGrow","margin","FallbackComponent","resetKeys"],"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 { Card, CardContent, CardProps } from '@mui/material';\nimport { ErrorAlert, ErrorBoundary, combineSx, useChartsTheme, useId } from '@perses-dev/components';\nimport { PanelDefinition } from '@perses-dev/core';\nimport { useDataQueriesContext, usePluginRegistry } from '@perses-dev/plugin-system';\nimport { ReactNode, memo, useMemo, useState, useEffect } from 'react';\nimport useResizeObserver from 'use-resize-observer';\nimport { PanelGroupItemId } from '../../context';\nimport { PanelContent } from './PanelContent';\nimport { PanelHeader, PanelHeaderProps } from './PanelHeader';\n\nexport interface PanelProps extends CardProps<'section'> {\n  definition: PanelDefinition;\n  readHandlers?: PanelHeaderProps['readHandlers'];\n  editHandlers?: PanelHeaderProps['editHandlers'];\n  panelOptions?: PanelOptions;\n  panelGroupItemId?: PanelGroupItemId;\n  viewQueriesHandler?: PanelHeaderProps['viewQueriesHandler'];\n}\n\nexport type PanelOptions = {\n  /**\n   * Allow you to hide the panel header if desired.\n   * This can be useful in embedded mode for example.\n   */\n  hideHeader?: boolean;\n  /**\n   * Whether to show panel icons always, or only when hovering over the panel.\n   * Default: if the dashboard is in editing mode or the panel is in fullscreen mode: 'always', otherwise 'hover'\n   */\n  showIcons?: 'always' | 'hover';\n  /**\n   * Content to render in right of the panel header. (top right of the panel)\n   * It will only be rendered when the panel is in edit mode.\n   */\n  extra?: (props: PanelExtraProps) => ReactNode;\n};\n\nexport type PanelExtraProps = {\n  /**\n   * The PanelDefinition for the panel.\n   */\n  panelDefinition?: PanelDefinition;\n  /**\n   * The PanelGroupItemId for the panel.\n   */\n  panelGroupItemId?: PanelGroupItemId;\n};\n\n/**\n * Renders a PanelDefinition's content inside of a Card.\n *\n * Internal structure:\n * <Panel>                  // renders an entire panel, incl. header and action buttons\n *   <PanelContent>         // renders loading, error or panel based on the queries' status\n *     <PanelPluginLoader>  // loads a panel plugin from the plugin registry and renders the PanelComponent with data from props.queryResults\n */\nexport const Panel = memo(function Panel(props: PanelProps) {\n  const {\n    definition,\n    readHandlers,\n    editHandlers,\n    onMouseEnter,\n    onMouseLeave,\n    sx,\n    panelOptions,\n    panelGroupItemId,\n    viewQueriesHandler,\n    ...others\n  } = 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 chartsTheme = useChartsTheme();\n\n  const { queryResults } = useDataQueriesContext();\n  const { getPlugin } = usePluginRegistry();\n\n  const panelPropsForActions = useMemo(() => {\n    return {\n      spec: definition.spec.plugin.spec,\n      queryResults: queryResults.map((query) => ({\n        definition: query.definition,\n        data: query.data,\n      })),\n      contentDimensions,\n      definition,\n    };\n  }, [definition, contentDimensions, queryResults]);\n\n  // Load plugin actions from the plugin\n  const [pluginActions, setPluginActions] = useState<ReactNode[]>([]);\n\n  useEffect(() => {\n    let cancelled = false;\n\n    const loadPluginActions = async (): Promise<void> => {\n      const panelPluginKind = definition.spec.plugin.kind;\n      const panelProps = panelPropsForActions;\n\n      if (!panelPluginKind || !panelProps) {\n        if (!cancelled) {\n          setPluginActions([]);\n        }\n        return;\n      }\n\n      try {\n        // Add defensive check for getPlugin availability\n        if (!getPlugin || typeof getPlugin !== 'function') {\n          if (!cancelled) {\n            setPluginActions([]);\n          }\n          return;\n        }\n\n        const plugin = await getPlugin('Panel', panelPluginKind);\n\n        if (cancelled) return;\n\n        // More defensive checking for plugin and actions\n        if (\n          !plugin ||\n          typeof plugin !== 'object' ||\n          !plugin.actions ||\n          !Array.isArray(plugin.actions) ||\n          plugin.actions.length === 0\n        ) {\n          if (!cancelled) {\n            setPluginActions([]);\n          }\n          return;\n        }\n\n        // Render plugin actions in header location\n        const headerActions = plugin.actions\n          .filter((action) => !action.location || action.location === 'header')\n          .map((action, index): ReactNode | null => {\n            const ActionComponent = action.component;\n            try {\n              // eslint-disable-next-line @typescript-eslint/no-explicit-any\n              return <ActionComponent key={`plugin-action-${index}`} {...(panelProps as any)} />;\n            } catch (error) {\n              console.warn(`Failed to render plugin action ${index}:`, error);\n              return null;\n            }\n          })\n          .filter((item): item is ReactNode => Boolean(item));\n\n        if (!cancelled) {\n          setPluginActions(headerActions);\n        }\n      } catch (error) {\n        if (!cancelled) {\n          console.warn('Failed to load plugin actions:', error);\n          setPluginActions([]);\n        }\n      }\n    };\n\n    // Use setTimeout to defer the async operation to the next tick\n    const timeoutId = setTimeout(() => {\n      loadPluginActions();\n    }, 0);\n\n    return (): void => {\n      cancelled = true;\n      clearTimeout(timeoutId);\n    };\n  }, [definition.spec.plugin.kind, panelPropsForActions, getPlugin]);\n\n  const handleMouseEnter: CardProps['onMouseEnter'] = (e) => {\n    onMouseEnter?.(e);\n  };\n\n  const handleMouseLeave: CardProps['onMouseLeave'] = (e) => {\n    onMouseLeave?.(e);\n  };\n\n  // default value for showIcons: if the dashboard is in editing mode or the panel is in fullscreen mode: 'always', otherwise 'hover'\n  const showIcons = panelOptions?.showIcons ?? (editHandlers || readHandlers?.isPanelViewed ? 'always' : 'hover');\n\n  return (\n    <Card\n      component=\"section\"\n      sx={combineSx(\n        {\n          width: '100%',\n          height: '100%',\n          display: 'flex',\n          flexFlow: 'column nowrap',\n          ':hover': { '--panel-hover': 'block' },\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      {!panelOptions?.hideHeader && (\n        <PanelHeader\n          extra={panelOptions?.extra?.({ panelDefinition: definition, panelGroupItemId })}\n          id={headerId}\n          title={definition.spec.display.name}\n          description={definition.spec.display.description}\n          queryResults={queryResults}\n          readHandlers={readHandlers}\n          editHandlers={editHandlers}\n          viewQueriesHandler={viewQueriesHandler}\n          links={definition.spec.links}\n          pluginActions={pluginActions}\n          showIcons={showIcons}\n          sx={{ paddingX: `${chartsTheme.container.padding.default}px` }}\n          dimension={contentDimensions}\n        />\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, queryResults]}>\n          <PanelContent\n            definition={definition}\n            panelPluginKind={definition.spec.plugin.kind}\n            spec={definition.spec.plugin.spec}\n            contentDimensions={contentDimensions}\n            queryResults={queryResults}\n          />\n        </ErrorBoundary>\n      </CardContent>\n    </Card>\n  );\n});\n"],"names":["Card","CardContent","ErrorAlert","ErrorBoundary","combineSx","useChartsTheme","useId","useDataQueriesContext","usePluginRegistry","memo","useMemo","useState","useEffect","useResizeObserver","PanelContent","PanelHeader","Panel","props","definition","readHandlers","editHandlers","onMouseEnter","onMouseLeave","sx","panelOptions","panelGroupItemId","viewQueriesHandler","others","generatedPanelId","headerId","contentElement","setContentElement","width","height","ref","contentDimensions","undefined","chartsTheme","queryResults","getPlugin","panelPropsForActions","spec","plugin","map","query","data","pluginActions","setPluginActions","cancelled","loadPluginActions","panelPluginKind","kind","panelProps","actions","Array","isArray","length","headerActions","filter","action","location","index","ActionComponent","component","error","console","warn","item","Boolean","timeoutId","setTimeout","clearTimeout","handleMouseEnter","e","handleMouseLeave","showIcons","isPanelViewed","display","flexFlow","variant","aria-labelledby","aria-describedby","data-testid","hideHeader","extra","panelDefinition","id","title","name","description","links","paddingX","container","padding","default","dimension","position","overflow","flexGrow","margin","FallbackComponent","resetKeys"],"mappings":"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"}

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

@@ -1,6 +1,7 @@
 import { ReactNode } from 'react';
 import { QueryData } from '@perses-dev/plugin-system';
 import { Link } from '@perses-dev/core';
+import { PanelOptions } from './Panel';
 export interface PanelActionsProps {
     title: string;
     description?: string;
@@ -21,6 +22,7 @@ export interface PanelActionsProps {
     };
     queryResults: QueryData[];
     pluginActions?: ReactNode[];
+    showIcons: PanelOptions['showIcons'];
 }
 export declare const PanelActions: React.FC<PanelActionsProps>;
 //# sourceMappingURL=PanelActions.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"PanelActions.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/PanelActions.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAqC,SAAS,EAAqB,MAAM,OAAO,CAAC;AAExF,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAWtD,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAWxC,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oBAAoB,EAAE,MAAM,CAAC;IAC7B,KAAK,CAAC,EAAE,IAAI,EAAE,CAAC;IACf,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,YAAY,CAAC,EAAE;QACb,gBAAgB,EAAE,MAAM,IAAI,CAAC;QAC7B,qBAAqB,EAAE,MAAM,IAAI,CAAC;QAClC,kBAAkB,EAAE,MAAM,IAAI,CAAC;KAChC,CAAC;IACF,YAAY,CAAC,EAAE;QACb,aAAa,CAAC,EAAE,OAAO,CAAC;QACxB,gBAAgB,EAAE,MAAM,IAAI,CAAC;KAC9B,CAAC;IACF,kBAAkB,CAAC,EAAE;QACnB,OAAO,EAAE,MAAM,IAAI,CAAC;KACrB,CAAC;IACF,YAAY,EAAE,SAAS,EAAE,CAAC;IAC1B,aAAa,CAAC,EAAE,SAAS,EAAE,CAAC;CAC7B;AASD,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAgOpD,CAAC"}
+{"version":3,"file":"PanelActions.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/PanelActions.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAqC,SAAS,EAAqB,MAAM,OAAO,CAAC;AAExF,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAWtD,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAUxC,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEvC,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oBAAoB,EAAE,MAAM,CAAC;IAC7B,KAAK,CAAC,EAAE,IAAI,EAAE,CAAC;IACf,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,YAAY,CAAC,EAAE;QACb,gBAAgB,EAAE,MAAM,IAAI,CAAC;QAC7B,qBAAqB,EAAE,MAAM,IAAI,CAAC;QAClC,kBAAkB,EAAE,MAAM,IAAI,CAAC;KAChC,CAAC;IACF,YAAY,CAAC,EAAE;QACb,aAAa,CAAC,EAAE,OAAO,CAAC;QACxB,gBAAgB,EAAE,MAAM,IAAI,CAAC;KAC9B,CAAC;IACF,kBAAkB,CAAC,EAAE;QACnB,OAAO,EAAE,MAAM,IAAI,CAAC;KACrB,CAAC;IACF,YAAY,EAAE,SAAS,EAAE,CAAC;IAC1B,aAAa,CAAC,EAAE,SAAS,EAAE,CAAC;IAC5B,SAAS,EAAE,YAAY,CAAC,WAAW,CAAC,CAAC;CACtC;AASD,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA6NpD,CAAC"}

package/dist/components/Panel/PanelActions.js

@@ -33,7 +33,7 @@ const ConditionalBox = styled(Box)({
     flexGrow: 1,
     justifyContent: 'flex-end'
 });
-export const PanelActions = ({ editHandlers, readHandlers, viewQueriesHandler, extra, title, description, descriptionTooltipId, links, queryResults, pluginActions = [] })=>{
+export const PanelActions = ({ editHandlers, readHandlers, viewQueriesHandler, extra, title, description, descriptionTooltipId, links, queryResults, pluginActions = [], showIcons })=>{
     const descriptionAction = useMemo(()=>{
         if (description && description.trim().length > 0) {
             return /*#__PURE__*/ _jsx(InfoTooltip, {
@@ -206,8 +206,8 @@ export const PanelActions = ({ editHandlers, readHandlers, viewQueriesHandler, e
             flexGrow: 1
         }
     });
-    // if the panel is in non-editing, non-fullscreen mode, show certain icons only on hover
-    const OnHover = ({ children })=>editHandlers === undefined && !readHandlers?.isPanelViewed ? /*#__PURE__*/ _jsx(Box, {
+    // By default, the panel header shows certain icons only on hover if the panel is in non-editing, non-fullscreen mode
+    const OnHover = ({ children })=>showIcons === 'hover' ? /*#__PURE__*/ _jsx(Box, {
             sx: {
                 display: 'var(--panel-hover, none)'
             },

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Panel/PanelActions.tsx"],"sourcesContent":["// Copyright 2025 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 { Stack, Box, Popover, CircularProgress, styled, PopoverPosition } from '@mui/material';\nimport { isValidElement, PropsWithChildren, ReactNode, useMemo, useState } from 'react';\nimport { InfoTooltip } from '@perses-dev/components';\nimport { QueryData } from '@perses-dev/plugin-system';\nimport DatabaseSearch from 'mdi-material-ui/DatabaseSearch';\nimport ArrowCollapseIcon from 'mdi-material-ui/ArrowCollapse';\nimport ArrowExpandIcon from 'mdi-material-ui/ArrowExpand';\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 MenuIcon from 'mdi-material-ui/Menu';\nimport AlertIcon from 'mdi-material-ui/Alert';\nimport InformationOutlineIcon from 'mdi-material-ui/InformationOutline';\nimport { Link } from '@perses-dev/core';\nimport {\n  ARIA_LABEL_TEXT,\n  HEADER_ACTIONS_CONTAINER_NAME,\n  HEADER_MEDIUM_WIDTH,\n  HEADER_SMALL_WIDTH,\n  TOOLTIP_TEXT,\n} from '../../constants';\nimport { HeaderIconButton } from './HeaderIconButton';\nimport { PanelLinks } from './PanelLinks';\n\nexport interface PanelActionsProps {\n  title: string;\n  description?: string;\n  descriptionTooltipId: string;\n  links?: Link[];\n  extra?: React.ReactNode;\n  editHandlers?: {\n    onEditPanelClick: () => void;\n    onDuplicatePanelClick: () => void;\n    onDeletePanelClick: () => void;\n  };\n  readHandlers?: {\n    isPanelViewed?: boolean;\n    onViewPanelClick: () => void;\n  };\n  viewQueriesHandler?: {\n    onClick: () => void;\n  };\n  queryResults: QueryData[];\n  pluginActions?: ReactNode[];\n}\n\nconst ConditionalBox = styled(Box)({\n  display: 'none',\n  alignItems: 'center',\n  flexGrow: 1,\n  justifyContent: 'flex-end',\n});\n\nexport const PanelActions: React.FC<PanelActionsProps> = ({\n  editHandlers,\n  readHandlers,\n  viewQueriesHandler,\n  extra,\n  title,\n  description,\n  descriptionTooltipId,\n  links,\n  queryResults,\n  pluginActions = [],\n}) => {\n  const descriptionAction = useMemo((): ReactNode | undefined => {\n    if (description && description.trim().length > 0) {\n      return (\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    }\n    return undefined;\n  }, [descriptionTooltipId, description]);\n\n  const linksAction = links && links.length > 0 && <PanelLinks links={links} />;\n  const extraActions = editHandlers === undefined && extra;\n\n  const queryStateIndicator = useMemo((): ReactNode | undefined => {\n    const hasData = queryResults.some((q) => q.data);\n    const isFetching = queryResults.some((q) => q.isFetching);\n    const queryErrors = queryResults.filter((q) => q.error);\n\n    if (isFetching && hasData) {\n      return <CircularProgress aria-label=\"loading\" size=\"1.125rem\" />;\n    } else if (queryErrors.length > 0) {\n      const errorTexts = queryErrors\n        .map((q) => q.error)\n        .map((e: any) => e?.message ?? e?.toString() ?? 'Unknown error') // eslint-disable-line @typescript-eslint/no-explicit-any\n        .join('\\n');\n\n      return (\n        <InfoTooltip description={errorTexts}>\n          <HeaderIconButton aria-label=\"panel errors\" size=\"small\">\n            <AlertIcon fontSize=\"inherit\" />\n          </HeaderIconButton>\n        </InfoTooltip>\n      );\n    }\n  }, [queryResults]);\n\n  const readActions = useMemo((): ReactNode | undefined => {\n    if (readHandlers !== undefined) {\n      return (\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    return undefined;\n  }, [readHandlers, title]);\n\n  const viewQueryAction = useMemo(() => {\n    if (!viewQueriesHandler?.onClick) return null;\n    return (\n      <InfoTooltip description={TOOLTIP_TEXT.queryView}>\n        <HeaderIconButton\n          aria-label={ARIA_LABEL_TEXT.openQueryView(title)}\n          size=\"small\"\n          onClick={viewQueriesHandler.onClick}\n        >\n          <DatabaseSearch fontSize=\"inherit\" />\n        </HeaderIconButton>\n      </InfoTooltip>\n    );\n  }, [viewQueriesHandler, title]);\n\n  const editActions = useMemo((): ReactNode | undefined => {\n    if (editHandlers !== undefined) {\n      // If there are edit handlers, always just show the edit buttons\n      return (\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        </>\n      );\n    }\n    return undefined;\n  }, [editHandlers, title]);\n\n  const moveAction = useMemo((): ReactNode | undefined => {\n    if (editActions && !readHandlers?.isPanelViewed) {\n      return (\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    return undefined;\n  }, [editActions, readHandlers, title]);\n\n  const divider = <Box sx={{ flexGrow: 1 }}></Box>;\n\n  // if the panel is in non-editing, non-fullscreen mode, show certain icons only on hover\n  const OnHover = ({ children }: PropsWithChildren): ReactNode =>\n    editHandlers === undefined && !readHandlers?.isPanelViewed ? (\n      <Box sx={{ display: 'var(--panel-hover, none)' }}>{children}</Box>\n    ) : (\n      <>{children}</>\n    );\n\n  return (\n    <>\n      {/* small panel width: move all icons except move/grab to overflow menu */}\n      <ConditionalBox\n        sx={(theme) => ({\n          [theme.containerQueries(HEADER_ACTIONS_CONTAINER_NAME).between(0, HEADER_SMALL_WIDTH)]: { display: 'flex' },\n        })}\n      >\n        {divider}\n        <OnHover>\n          <OverflowMenu title={title}>\n            {descriptionAction} {linksAction} {queryStateIndicator} {extraActions} {viewQueryAction}\n            {readActions} {pluginActions}\n            {editActions}\n          </OverflowMenu>\n          {moveAction}\n        </OnHover>\n      </ConditionalBox>\n\n      {/* medium panel width: move edit icons to overflow menu */}\n      <ConditionalBox\n        sx={(theme) => ({\n          [theme.containerQueries(HEADER_ACTIONS_CONTAINER_NAME).between(HEADER_SMALL_WIDTH, HEADER_MEDIUM_WIDTH)]: {\n            display: 'flex',\n          },\n        })}\n      >\n        <OnHover>\n          {descriptionAction} {linksAction}\n        </OnHover>\n        {divider} {queryStateIndicator}\n        <OnHover>\n          {extraActions}\n          {readActions}\n          <OverflowMenu title={title}>\n            {editActions} {viewQueryAction} {pluginActions}\n          </OverflowMenu>\n          {moveAction}\n        </OnHover>\n      </ConditionalBox>\n\n      {/* large panel width: show all icons in panel header */}\n      <ConditionalBox\n        sx={(theme) => ({\n          // flip the logic here; if the browser (or jsdom) does not support container queries, always show all icons\n          display: 'flex',\n          [theme.containerQueries(HEADER_ACTIONS_CONTAINER_NAME).down(HEADER_MEDIUM_WIDTH)]: { display: 'none' },\n        })}\n      >\n        <OnHover>\n          {descriptionAction} {linksAction}\n        </OnHover>\n        {divider} {queryStateIndicator}\n        <OnHover>\n          {extraActions}\n          {viewQueryAction}\n          {readActions} {editActions}\n          {/* Show plugin actions inside a menu if it gets crowded */}\n          {pluginActions.length <= 1 ? pluginActions : <OverflowMenu title={title}>{pluginActions}</OverflowMenu>}\n          {moveAction}\n        </OnHover>\n      </ConditionalBox>\n    </>\n  );\n};\n\nconst OverflowMenu: React.FC<PropsWithChildren<{ title: string }>> = ({ children, title }) => {\n  const [anchorPosition, setAnchorPosition] = useState<PopoverPosition>();\n\n  // do not show overflow menu if there is no content (for example, edit actions are hidden)\n  const hasContent = isValidElement(children) || (Array.isArray(children) && children.some(isValidElement));\n  if (!hasContent) {\n    return undefined;\n  }\n\n  const handleClick = (event: React.MouseEvent<HTMLElement>): void => {\n    setAnchorPosition(event.currentTarget.getBoundingClientRect());\n  };\n\n  const handleClose = (): void => {\n    setAnchorPosition(undefined);\n  };\n\n  const open = Boolean(anchorPosition);\n  const id = open ? 'actions-menu' : undefined;\n\n  return (\n    <>\n      <HeaderIconButton\n        className=\"show-actions\"\n        aria-describedby={id}\n        onClick={handleClick}\n        aria-label={ARIA_LABEL_TEXT.showPanelActions(title)}\n        size=\"small\"\n      >\n        <MenuIcon fontSize=\"inherit\" />\n      </HeaderIconButton>\n      <Popover\n        id={id}\n        open={open}\n        anchorReference=\"anchorPosition\"\n        anchorPosition={anchorPosition}\n        onClose={handleClose}\n        anchorOrigin={{\n          vertical: 'bottom',\n          horizontal: 'left',\n        }}\n      >\n        <Stack direction=\"row\" alignItems=\"center\" sx={{ padding: 1 }} onClick={handleClose}>\n          {children}\n        </Stack>\n      </Popover>\n    </>\n  );\n};\n"],"names":["Stack","Box","Popover","CircularProgress","styled","isValidElement","useMemo","useState","InfoTooltip","DatabaseSearch","ArrowCollapseIcon","ArrowExpandIcon","PencilIcon","DeleteIcon","DragIcon","ContentCopyIcon","MenuIcon","AlertIcon","InformationOutlineIcon","ARIA_LABEL_TEXT","HEADER_ACTIONS_CONTAINER_NAME","HEADER_MEDIUM_WIDTH","HEADER_SMALL_WIDTH","TOOLTIP_TEXT","HeaderIconButton","PanelLinks","ConditionalBox","display","alignItems","flexGrow","justifyContent","PanelActions","editHandlers","readHandlers","viewQueriesHandler","extra","title","description","descriptionTooltipId","links","queryResults","pluginActions","descriptionAction","trim","length","id","enterDelay","aria-label","size","aria-describedby","aria-hidden","fontSize","sx","color","theme","palette","text","secondary","undefined","linksAction","extraActions","queryStateIndicator","hasData","some","q","data","isFetching","queryErrors","filter","error","errorTexts","map","e","message","toString","join","readActions","viewPanel","onClick","onViewPanelClick","isPanelViewed","viewQueryAction","queryView","openQueryView","editActions","editPanel","onEditPanelClick","duplicatePanel","onDuplicatePanelClick","transform","deletePanel","onDeletePanelClick","moveAction","movePanel","className","cursor","divider","OnHover","children","containerQueries","between","OverflowMenu","down","anchorPosition","setAnchorPosition","hasContent","Array","isArray","handleClick","event","currentTarget","getBoundingClientRect","handleClose","open","Boolean","showPanelActions","anchorReference","onClose","anchorOrigin","vertical","horizontal","direction","padding"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/Panel/PanelActions.tsx"],"sourcesContent":["// Copyright 2025 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 { Stack, Box, Popover, CircularProgress, styled, PopoverPosition } from '@mui/material';\nimport { isValidElement, PropsWithChildren, ReactNode, useMemo, useState } from 'react';\nimport { InfoTooltip } from '@perses-dev/components';\nimport { QueryData } from '@perses-dev/plugin-system';\nimport DatabaseSearch from 'mdi-material-ui/DatabaseSearch';\nimport ArrowCollapseIcon from 'mdi-material-ui/ArrowCollapse';\nimport ArrowExpandIcon from 'mdi-material-ui/ArrowExpand';\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 MenuIcon from 'mdi-material-ui/Menu';\nimport AlertIcon from 'mdi-material-ui/Alert';\nimport InformationOutlineIcon from 'mdi-material-ui/InformationOutline';\nimport { Link } from '@perses-dev/core';\nimport {\n  ARIA_LABEL_TEXT,\n  HEADER_ACTIONS_CONTAINER_NAME,\n  HEADER_MEDIUM_WIDTH,\n  HEADER_SMALL_WIDTH,\n  TOOLTIP_TEXT,\n} from '../../constants';\nimport { HeaderIconButton } from './HeaderIconButton';\nimport { PanelLinks } from './PanelLinks';\nimport { PanelOptions } from './Panel';\n\nexport interface PanelActionsProps {\n  title: string;\n  description?: string;\n  descriptionTooltipId: string;\n  links?: Link[];\n  extra?: React.ReactNode;\n  editHandlers?: {\n    onEditPanelClick: () => void;\n    onDuplicatePanelClick: () => void;\n    onDeletePanelClick: () => void;\n  };\n  readHandlers?: {\n    isPanelViewed?: boolean;\n    onViewPanelClick: () => void;\n  };\n  viewQueriesHandler?: {\n    onClick: () => void;\n  };\n  queryResults: QueryData[];\n  pluginActions?: ReactNode[];\n  showIcons: PanelOptions['showIcons'];\n}\n\nconst ConditionalBox = styled(Box)({\n  display: 'none',\n  alignItems: 'center',\n  flexGrow: 1,\n  justifyContent: 'flex-end',\n});\n\nexport const PanelActions: React.FC<PanelActionsProps> = ({\n  editHandlers,\n  readHandlers,\n  viewQueriesHandler,\n  extra,\n  title,\n  description,\n  descriptionTooltipId,\n  links,\n  queryResults,\n  pluginActions = [],\n  showIcons,\n}) => {\n  const descriptionAction = useMemo((): ReactNode | undefined => {\n    if (description && description.trim().length > 0) {\n      return (\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    }\n    return undefined;\n  }, [descriptionTooltipId, description]);\n\n  const linksAction = links && links.length > 0 && <PanelLinks links={links} />;\n  const extraActions = editHandlers === undefined && extra;\n\n  const queryStateIndicator = useMemo((): ReactNode | undefined => {\n    const hasData = queryResults.some((q) => q.data);\n    const isFetching = queryResults.some((q) => q.isFetching);\n    const queryErrors = queryResults.filter((q) => q.error);\n\n    if (isFetching && hasData) {\n      return <CircularProgress aria-label=\"loading\" size=\"1.125rem\" />;\n    } else if (queryErrors.length > 0) {\n      const errorTexts = queryErrors\n        .map((q) => q.error)\n        .map((e: any) => e?.message ?? e?.toString() ?? 'Unknown error') // eslint-disable-line @typescript-eslint/no-explicit-any\n        .join('\\n');\n\n      return (\n        <InfoTooltip description={errorTexts}>\n          <HeaderIconButton aria-label=\"panel errors\" size=\"small\">\n            <AlertIcon fontSize=\"inherit\" />\n          </HeaderIconButton>\n        </InfoTooltip>\n      );\n    }\n  }, [queryResults]);\n\n  const readActions = useMemo((): ReactNode | undefined => {\n    if (readHandlers !== undefined) {\n      return (\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    return undefined;\n  }, [readHandlers, title]);\n\n  const viewQueryAction = useMemo(() => {\n    if (!viewQueriesHandler?.onClick) return null;\n    return (\n      <InfoTooltip description={TOOLTIP_TEXT.queryView}>\n        <HeaderIconButton\n          aria-label={ARIA_LABEL_TEXT.openQueryView(title)}\n          size=\"small\"\n          onClick={viewQueriesHandler.onClick}\n        >\n          <DatabaseSearch fontSize=\"inherit\" />\n        </HeaderIconButton>\n      </InfoTooltip>\n    );\n  }, [viewQueriesHandler, title]);\n\n  const editActions = useMemo((): ReactNode | undefined => {\n    if (editHandlers !== undefined) {\n      // If there are edit handlers, always just show the edit buttons\n      return (\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        </>\n      );\n    }\n    return undefined;\n  }, [editHandlers, title]);\n\n  const moveAction = useMemo((): ReactNode | undefined => {\n    if (editActions && !readHandlers?.isPanelViewed) {\n      return (\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    return undefined;\n  }, [editActions, readHandlers, title]);\n\n  const divider = <Box sx={{ flexGrow: 1 }}></Box>;\n\n  // By default, the panel header shows certain icons only on hover if the panel is in non-editing, non-fullscreen mode\n  const OnHover = ({ children }: PropsWithChildren): ReactNode =>\n    showIcons === 'hover' ? <Box sx={{ display: 'var(--panel-hover, none)' }}>{children}</Box> : <>{children}</>;\n\n  return (\n    <>\n      {/* small panel width: move all icons except move/grab to overflow menu */}\n      <ConditionalBox\n        sx={(theme) => ({\n          [theme.containerQueries(HEADER_ACTIONS_CONTAINER_NAME).between(0, HEADER_SMALL_WIDTH)]: { display: 'flex' },\n        })}\n      >\n        {divider}\n        <OnHover>\n          <OverflowMenu title={title}>\n            {descriptionAction} {linksAction} {queryStateIndicator} {extraActions} {viewQueryAction}\n            {readActions} {pluginActions}\n            {editActions}\n          </OverflowMenu>\n          {moveAction}\n        </OnHover>\n      </ConditionalBox>\n\n      {/* medium panel width: move edit icons to overflow menu */}\n      <ConditionalBox\n        sx={(theme) => ({\n          [theme.containerQueries(HEADER_ACTIONS_CONTAINER_NAME).between(HEADER_SMALL_WIDTH, HEADER_MEDIUM_WIDTH)]: {\n            display: 'flex',\n          },\n        })}\n      >\n        <OnHover>\n          {descriptionAction} {linksAction}\n        </OnHover>\n        {divider} {queryStateIndicator}\n        <OnHover>\n          {extraActions}\n          {readActions}\n          <OverflowMenu title={title}>\n            {editActions} {viewQueryAction} {pluginActions}\n          </OverflowMenu>\n          {moveAction}\n        </OnHover>\n      </ConditionalBox>\n\n      {/* large panel width: show all icons in panel header */}\n      <ConditionalBox\n        sx={(theme) => ({\n          // flip the logic here; if the browser (or jsdom) does not support container queries, always show all icons\n          display: 'flex',\n          [theme.containerQueries(HEADER_ACTIONS_CONTAINER_NAME).down(HEADER_MEDIUM_WIDTH)]: { display: 'none' },\n        })}\n      >\n        <OnHover>\n          {descriptionAction} {linksAction}\n        </OnHover>\n        {divider} {queryStateIndicator}\n        <OnHover>\n          {extraActions}\n          {viewQueryAction}\n          {readActions} {editActions}\n          {/* Show plugin actions inside a menu if it gets crowded */}\n          {pluginActions.length <= 1 ? pluginActions : <OverflowMenu title={title}>{pluginActions}</OverflowMenu>}\n          {moveAction}\n        </OnHover>\n      </ConditionalBox>\n    </>\n  );\n};\n\nconst OverflowMenu: React.FC<PropsWithChildren<{ title: string }>> = ({ children, title }) => {\n  const [anchorPosition, setAnchorPosition] = useState<PopoverPosition>();\n\n  // do not show overflow menu if there is no content (for example, edit actions are hidden)\n  const hasContent = isValidElement(children) || (Array.isArray(children) && children.some(isValidElement));\n  if (!hasContent) {\n    return undefined;\n  }\n\n  const handleClick = (event: React.MouseEvent<HTMLElement>): void => {\n    setAnchorPosition(event.currentTarget.getBoundingClientRect());\n  };\n\n  const handleClose = (): void => {\n    setAnchorPosition(undefined);\n  };\n\n  const open = Boolean(anchorPosition);\n  const id = open ? 'actions-menu' : undefined;\n\n  return (\n    <>\n      <HeaderIconButton\n        className=\"show-actions\"\n        aria-describedby={id}\n        onClick={handleClick}\n        aria-label={ARIA_LABEL_TEXT.showPanelActions(title)}\n        size=\"small\"\n      >\n        <MenuIcon fontSize=\"inherit\" />\n      </HeaderIconButton>\n      <Popover\n        id={id}\n        open={open}\n        anchorReference=\"anchorPosition\"\n        anchorPosition={anchorPosition}\n        onClose={handleClose}\n        anchorOrigin={{\n          vertical: 'bottom',\n          horizontal: 'left',\n        }}\n      >\n        <Stack direction=\"row\" alignItems=\"center\" sx={{ padding: 1 }} onClick={handleClose}>\n          {children}\n        </Stack>\n      </Popover>\n    </>\n  );\n};\n"],"names":["Stack","Box","Popover","CircularProgress","styled","isValidElement","useMemo","useState","InfoTooltip","DatabaseSearch","ArrowCollapseIcon","ArrowExpandIcon","PencilIcon","DeleteIcon","DragIcon","ContentCopyIcon","MenuIcon","AlertIcon","InformationOutlineIcon","ARIA_LABEL_TEXT","HEADER_ACTIONS_CONTAINER_NAME","HEADER_MEDIUM_WIDTH","HEADER_SMALL_WIDTH","TOOLTIP_TEXT","HeaderIconButton","PanelLinks","ConditionalBox","display","alignItems","flexGrow","justifyContent","PanelActions","editHandlers","readHandlers","viewQueriesHandler","extra","title","description","descriptionTooltipId","links","queryResults","pluginActions","showIcons","descriptionAction","trim","length","id","enterDelay","aria-label","size","aria-describedby","aria-hidden","fontSize","sx","color","theme","palette","text","secondary","undefined","linksAction","extraActions","queryStateIndicator","hasData","some","q","data","isFetching","queryErrors","filter","error","errorTexts","map","e","message","toString","join","readActions","viewPanel","onClick","onViewPanelClick","isPanelViewed","viewQueryAction","queryView","openQueryView","editActions","editPanel","onEditPanelClick","duplicatePanel","onDuplicatePanelClick","transform","deletePanel","onDeletePanelClick","moveAction","movePanel","className","cursor","divider","OnHover","children","containerQueries","between","OverflowMenu","down","anchorPosition","setAnchorPosition","hasContent","Array","isArray","handleClick","event","currentTarget","getBoundingClientRect","handleClose","open","Boolean","showPanelActions","anchorReference","onClose","anchorOrigin","vertical","horizontal","direction","padding"],"mappings":"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"}

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

@@ -3,6 +3,7 @@ import { Link } from '@perses-dev/core';
 import { QueryData } from '@perses-dev/plugin-system';
 import { ReactElement, ReactNode } from 'react';
 import { PanelActionsProps } from './PanelActions';
+import { PanelOptions } from './Panel';
 type OmittedProps = 'children' | 'action' | 'title' | 'disableTypography';
 export interface PanelHeaderProps extends Omit<CardHeaderProps, OmittedProps> {
     id: string;
@@ -15,7 +16,11 @@ export interface PanelHeaderProps extends Omit<CardHeaderProps, OmittedProps> {
     readHandlers?: PanelActionsProps['readHandlers'];
     editHandlers?: PanelActionsProps['editHandlers'];
     pluginActions?: ReactNode[];
+    showIcons: PanelOptions['showIcons'];
+    dimension?: {
+        width: number;
+    };
 }
-export declare function PanelHeader({ id, title: rawTitle, description: rawDescription, links, queryResults, readHandlers, editHandlers, sx, extra, pluginActions, viewQueriesHandler, ...rest }: PanelHeaderProps): ReactElement;
+export declare function PanelHeader({ id, title: rawTitle, description: rawDescription, links, queryResults, readHandlers, editHandlers, sx, extra, pluginActions, showIcons, viewQueriesHandler, dimension, ...rest }: PanelHeaderProps): ReactElement;
 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,EAAc,eAAe,EAAqB,MAAM,eAAe,CAAC;AAE/E,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,SAAS,EAA+B,MAAM,2BAA2B,CAAC;AACnF,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEhD,OAAO,EAAgB,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAEjE,KAAK,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,KAAK,CAAC,EAAE,IAAI,EAAE,CAAC;IACf,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,YAAY,EAAE,SAAS,EAAE,CAAC;IAC1B,kBAAkB,CAAC,EAAE,iBAAiB,CAAC,oBAAoB,CAAC,CAAC;IAC7D,YAAY,CAAC,EAAE,iBAAiB,CAAC,cAAc,CAAC,CAAC;IACjD,YAAY,CAAC,EAAE,iBAAiB,CAAC,cAAc,CAAC,CAAC;IACjD,aAAa,CAAC,EAAE,SAAS,EAAE,CAAC;CAC7B;AAED,wBAAgB,WAAW,CAAC,EAC1B,EAAE,EACF,KAAK,EAAE,QAAQ,EACf,WAAW,EAAE,cAAc,EAC3B,KAAK,EACL,YAAY,EACZ,YAAY,EACZ,YAAY,EACZ,EAAE,EACF,KAAK,EACL,aAAa,EACb,kBAAkB,EAClB,GAAG,IAAI,EACR,EAAE,gBAAgB,GAAG,YAAY,CA4DjC"}
+{"version":3,"file":"PanelHeader.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/PanelHeader.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAc,eAAe,EAA8B,MAAM,eAAe,CAAC;AAExF,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,SAAS,EAA+B,MAAM,2BAA2B,CAAC;AACnF,OAAO,EAAE,YAAY,EAAE,SAAS,EAA+B,MAAM,OAAO,CAAC;AAE7E,OAAO,EAAgB,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACjE,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEvC,KAAK,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,KAAK,CAAC,EAAE,IAAI,EAAE,CAAC;IACf,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,YAAY,EAAE,SAAS,EAAE,CAAC;IAC1B,kBAAkB,CAAC,EAAE,iBAAiB,CAAC,oBAAoB,CAAC,CAAC;IAC7D,YAAY,CAAC,EAAE,iBAAiB,CAAC,cAAc,CAAC,CAAC;IACjD,YAAY,CAAC,EAAE,iBAAiB,CAAC,cAAc,CAAC,CAAC;IACjD,aAAa,CAAC,EAAE,SAAS,EAAE,CAAC;IAC5B,SAAS,EAAE,YAAY,CAAC,WAAW,CAAC,CAAC;IACrC,SAAS,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;CAC/B;AAED,wBAAgB,WAAW,CAAC,EAC1B,EAAE,EACF,KAAK,EAAE,QAAQ,EACf,WAAW,EAAE,cAAc,EAC3B,KAAK,EACL,YAAY,EACZ,YAAY,EACZ,YAAY,EACZ,EAAE,EACF,KAAK,EACL,aAAa,EACb,SAAS,EACT,kBAAkB,EAClB,SAAS,EACT,GAAG,IAAI,EACR,EAAE,gBAAgB,GAAG,YAAY,CAyEjC"}

package/dist/components/Panel/PanelHeader.js

@@ -11,16 +11,27 @@
 // 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 { CardHeader, Stack, Typography } from '@mui/material';
+import { CardHeader, Stack, Typography, Tooltip } from '@mui/material';
 import { combineSx } from '@perses-dev/components';
 import { useReplaceVariablesInString } from '@perses-dev/plugin-system';
+import { useEffect, useRef, useState } from 'react';
 import { HEADER_ACTIONS_CONTAINER_NAME } from '../../constants';
 import { PanelActions } from './PanelActions';
-export function PanelHeader({ id, title: rawTitle, description: rawDescription, links, queryResults, readHandlers, editHandlers, sx, extra, pluginActions, viewQueriesHandler, ...rest }) {
+export function PanelHeader({ id, title: rawTitle, description: rawDescription, links, queryResults, readHandlers, editHandlers, sx, extra, pluginActions, showIcons, viewQueriesHandler, dimension, ...rest }) {
     const titleElementId = `${id}-title`;
     const descriptionTooltipId = `${id}-description`;
     const title = useReplaceVariablesInString(rawTitle);
     const description = useReplaceVariablesInString(rawDescription);
+    const textRef = useRef(null);
+    const [isEllipsisActive, setIsEllipsisActive] = useState(false);
+    useEffect(()=>{
+        if (textRef.current && dimension?.width) {
+            setIsEllipsisActive(textRef.current.scrollWidth > textRef.current.clientWidth);
+        }
+    }, [
+        title,
+        dimension?.width
+    ]);
     return /*#__PURE__*/ _jsx(CardHeader, {
         id: id,
         component: "header",
@@ -32,19 +43,24 @@ export function PanelHeader({ id, title: rawTitle, description: rawDescription,
             alignItems: "center",
             height: "var(--panel-header-height, 30px)",
             children: [
-                /*#__PURE__*/ _jsx(Typography, {
-                    id: titleElementId,
-                    variant: "subtitle1",
-                    sx: {
-                        // `minHeight` guarantees that the header has the correct height
-                        // when there is no title (i.e. in the preview)
-                        lineHeight: '24px',
-                        minHeight: '26px',
-                        whiteSpace: 'nowrap',
-                        overflow: 'hidden',
-                        textOverflow: 'ellipsis'
-                    },
-                    children: title
+                /*#__PURE__*/ _jsx(Tooltip, {
+                    title: title,
+                    disableHoverListener: !isEllipsisActive,
+                    children: /*#__PURE__*/ _jsx(Typography, {
+                        id: titleElementId,
+                        variant: "subtitle1",
+                        ref: textRef,
+                        sx: {
+                            // `minHeight` guarantees that the header has the correct height
+                            // when there is no title (i.e. in the preview)
+                            lineHeight: '24px',
+                            minHeight: '26px',
+                            whiteSpace: 'nowrap',
+                            overflow: 'hidden',
+                            textOverflow: 'ellipsis'
+                        },
+                        children: title
+                    })
                 }),
                 /*#__PURE__*/ _jsx(PanelActions, {
                     title: title,
@@ -56,7 +72,8 @@ export function PanelHeader({ id, title: rawTitle, description: rawDescription,
                     viewQueriesHandler: viewQueriesHandler,
                     extra: extra,
                     queryResults: queryResults,
-                    pluginActions: pluginActions
+                    pluginActions: pluginActions,
+                    showIcons: showIcons
                 })
             ]
         }),

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Panel/PanelHeader.tsx"],"sourcesContent":["// Copyright 2025 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, CardHeaderProps, Stack, Typography } from '@mui/material';\nimport { combineSx } from '@perses-dev/components';\nimport { Link } from '@perses-dev/core';\nimport { QueryData, useReplaceVariablesInString } from '@perses-dev/plugin-system';\nimport { ReactElement, ReactNode } from 'react';\nimport { HEADER_ACTIONS_CONTAINER_NAME } from '../../constants';\nimport { PanelActions, PanelActionsProps } from './PanelActions';\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  links?: Link[];\n  extra?: ReactNode;\n  queryResults: QueryData[];\n  viewQueriesHandler?: PanelActionsProps['viewQueriesHandler'];\n  readHandlers?: PanelActionsProps['readHandlers'];\n  editHandlers?: PanelActionsProps['editHandlers'];\n  pluginActions?: ReactNode[]; // Add pluginActions prop\n}\n\nexport function PanelHeader({\n  id,\n  title: rawTitle,\n  description: rawDescription,\n  links,\n  queryResults,\n  readHandlers,\n  editHandlers,\n  sx,\n  extra,\n  pluginActions,\n  viewQueriesHandler,\n  ...rest\n}: PanelHeaderProps): ReactElement {\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  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\" alignItems=\"center\" height=\"var(--panel-header-height, 30px)\">\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: '26px',\n              whiteSpace: 'nowrap',\n              overflow: 'hidden',\n              textOverflow: 'ellipsis',\n            }}\n          >\n            {title}\n          </Typography>\n          <PanelActions\n            title={title}\n            description={description}\n            descriptionTooltipId={descriptionTooltipId}\n            links={links}\n            readHandlers={readHandlers}\n            editHandlers={editHandlers}\n            viewQueriesHandler={viewQueriesHandler}\n            extra={extra}\n            queryResults={queryResults}\n            pluginActions={pluginActions}\n          />\n        </Stack>\n      }\n      sx={combineSx(\n        (theme) => ({\n          containerType: 'inline-size',\n          containerName: HEADER_ACTIONS_CONTAINER_NAME,\n          padding: theme.spacing(1),\n          borderBottom: `solid 1px ${theme.palette.divider}`,\n          '.MuiCardHeader-content': {\n            overflow: 'hidden',\n          },\n        }),\n        sx\n      )}\n      {...rest}\n    />\n  );\n}\n"],"names":["CardHeader","Stack","Typography","combineSx","useReplaceVariablesInString","HEADER_ACTIONS_CONTAINER_NAME","PanelActions","PanelHeader","id","title","rawTitle","description","rawDescription","links","queryResults","readHandlers","editHandlers","sx","extra","pluginActions","viewQueriesHandler","rest","titleElementId","descriptionTooltipId","component","aria-labelledby","aria-describedby","disableTypography","direction","alignItems","height","variant","lineHeight","minHeight","whiteSpace","overflow","textOverflow","theme","containerType","containerName","padding","spacing","borderBottom","palette","divider"],"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,UAAU,EAAmBC,KAAK,EAAEC,UAAU,QAAQ,gBAAgB;AAC/E,SAASC,SAAS,QAAQ,yBAAyB;AAEnD,SAAoBC,2BAA2B,QAAQ,4BAA4B;AAEnF,SAASC,6BAA6B,QAAQ,kBAAkB;AAChE,SAASC,YAAY,QAA2B,iBAAiB;AAiBjE,OAAO,SAASC,YAAY,EAC1BC,EAAE,EACFC,OAAOC,QAAQ,EACfC,aAAaC,cAAc,EAC3BC,KAAK,EACLC,YAAY,EACZC,YAAY,EACZC,YAAY,EACZC,EAAE,EACFC,KAAK,EACLC,aAAa,EACbC,kBAAkB,EAClB,GAAGC,MACc;IACjB,MAAMC,iBAAiB,GAAGd,GAAG,MAAM,CAAC;IACpC,MAAMe,uBAAuB,GAAGf,GAAG,YAAY,CAAC;IAEhD,MAAMC,QAAQL,4BAA4BM;IAC1C,MAAMC,cAAcP,4BAA4BQ;IAEhD,qBACE,KAACZ;QACCQ,IAAIA;QACJgB,WAAU;QACVC,mBAAiBH;QACjBI,oBAAkBH;QAClBI,iBAAiB;QACjBlB,qBACE,MAACR;YAAM2B,WAAU;YAAMC,YAAW;YAASC,QAAO;;8BAChD,KAAC5B;oBACCM,IAAIc;oBACJS,SAAQ;oBACRd,IAAI;wBACF,gEAAgE;wBAChE,+CAA+C;wBAC/Ce,YAAY;wBACZC,WAAW;wBACXC,YAAY;wBACZC,UAAU;wBACVC,cAAc;oBAChB;8BAEC3B;;8BAEH,KAACH;oBACCG,OAAOA;oBACPE,aAAaA;oBACbY,sBAAsBA;oBACtBV,OAAOA;oBACPE,cAAcA;oBACdC,cAAcA;oBACdI,oBAAoBA;oBACpBF,OAAOA;oBACPJ,cAAcA;oBACdK,eAAeA;;;;QAIrBF,IAAId,UACF,CAACkC,QAAW,CAAA;gBACVC,eAAe;gBACfC,eAAelC;gBACfmC,SAASH,MAAMI,OAAO,CAAC;gBACvBC,cAAc,CAAC,UAAU,EAAEL,MAAMM,OAAO,CAACC,OAAO,EAAE;gBAClD,0BAA0B;oBACxBT,UAAU;gBACZ;YACF,CAAA,GACAlB;QAED,GAAGI,IAAI;;AAGd"}
+{"version":3,"sources":["../../../src/components/Panel/PanelHeader.tsx"],"sourcesContent":["// Copyright 2025 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, CardHeaderProps, Stack, Typography, Tooltip } from '@mui/material';\nimport { combineSx } from '@perses-dev/components';\nimport { Link } from '@perses-dev/core';\nimport { QueryData, useReplaceVariablesInString } from '@perses-dev/plugin-system';\nimport { ReactElement, ReactNode, useEffect, useRef, useState } from 'react';\nimport { HEADER_ACTIONS_CONTAINER_NAME } from '../../constants';\nimport { PanelActions, PanelActionsProps } from './PanelActions';\nimport { PanelOptions } from './Panel';\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  links?: Link[];\n  extra?: ReactNode;\n  queryResults: QueryData[];\n  viewQueriesHandler?: PanelActionsProps['viewQueriesHandler'];\n  readHandlers?: PanelActionsProps['readHandlers'];\n  editHandlers?: PanelActionsProps['editHandlers'];\n  pluginActions?: ReactNode[]; // Add pluginActions prop\n  showIcons: PanelOptions['showIcons'];\n  dimension?: { width: number };\n}\n\nexport function PanelHeader({\n  id,\n  title: rawTitle,\n  description: rawDescription,\n  links,\n  queryResults,\n  readHandlers,\n  editHandlers,\n  sx,\n  extra,\n  pluginActions,\n  showIcons,\n  viewQueriesHandler,\n  dimension,\n  ...rest\n}: PanelHeaderProps): ReactElement {\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  const textRef = useRef<HTMLDivElement>(null);\n  const [isEllipsisActive, setIsEllipsisActive] = useState(false);\n\n  useEffect(() => {\n    if (textRef.current && dimension?.width) {\n      setIsEllipsisActive(textRef.current.scrollWidth > textRef.current.clientWidth);\n    }\n  }, [title, dimension?.width]);\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\" alignItems=\"center\" height=\"var(--panel-header-height, 30px)\">\n          <Tooltip title={title} disableHoverListener={!isEllipsisActive}>\n            <Typography\n              id={titleElementId}\n              variant=\"subtitle1\"\n              ref={textRef}\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: '26px',\n                whiteSpace: 'nowrap',\n                overflow: 'hidden',\n                textOverflow: 'ellipsis',\n              }}\n            >\n              {title}\n            </Typography>\n          </Tooltip>\n          <PanelActions\n            title={title}\n            description={description}\n            descriptionTooltipId={descriptionTooltipId}\n            links={links}\n            readHandlers={readHandlers}\n            editHandlers={editHandlers}\n            viewQueriesHandler={viewQueriesHandler}\n            extra={extra}\n            queryResults={queryResults}\n            pluginActions={pluginActions}\n            showIcons={showIcons}\n          />\n        </Stack>\n      }\n      sx={combineSx(\n        (theme) => ({\n          containerType: 'inline-size',\n          containerName: HEADER_ACTIONS_CONTAINER_NAME,\n          padding: theme.spacing(1),\n          borderBottom: `solid 1px ${theme.palette.divider}`,\n          '.MuiCardHeader-content': {\n            overflow: 'hidden',\n          },\n        }),\n        sx\n      )}\n      {...rest}\n    />\n  );\n}\n"],"names":["CardHeader","Stack","Typography","Tooltip","combineSx","useReplaceVariablesInString","useEffect","useRef","useState","HEADER_ACTIONS_CONTAINER_NAME","PanelActions","PanelHeader","id","title","rawTitle","description","rawDescription","links","queryResults","readHandlers","editHandlers","sx","extra","pluginActions","showIcons","viewQueriesHandler","dimension","rest","titleElementId","descriptionTooltipId","textRef","isEllipsisActive","setIsEllipsisActive","current","width","scrollWidth","clientWidth","component","aria-labelledby","aria-describedby","disableTypography","direction","alignItems","height","disableHoverListener","variant","ref","lineHeight","minHeight","whiteSpace","overflow","textOverflow","theme","containerType","containerName","padding","spacing","borderBottom","palette","divider"],"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,UAAU,EAAmBC,KAAK,EAAEC,UAAU,EAAEC,OAAO,QAAQ,gBAAgB;AACxF,SAASC,SAAS,QAAQ,yBAAyB;AAEnD,SAAoBC,2BAA2B,QAAQ,4BAA4B;AACnF,SAAkCC,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,QAAQ;AAC7E,SAASC,6BAA6B,QAAQ,kBAAkB;AAChE,SAASC,YAAY,QAA2B,iBAAiB;AAoBjE,OAAO,SAASC,YAAY,EAC1BC,EAAE,EACFC,OAAOC,QAAQ,EACfC,aAAaC,cAAc,EAC3BC,KAAK,EACLC,YAAY,EACZC,YAAY,EACZC,YAAY,EACZC,EAAE,EACFC,KAAK,EACLC,aAAa,EACbC,SAAS,EACTC,kBAAkB,EAClBC,SAAS,EACT,GAAGC,MACc;IACjB,MAAMC,iBAAiB,GAAGhB,GAAG,MAAM,CAAC;IACpC,MAAMiB,uBAAuB,GAAGjB,GAAG,YAAY,CAAC;IAEhD,MAAMC,QAAQR,4BAA4BS;IAC1C,MAAMC,cAAcV,4BAA4BW;IAEhD,MAAMc,UAAUvB,OAAuB;IACvC,MAAM,CAACwB,kBAAkBC,oBAAoB,GAAGxB,SAAS;IAEzDF,UAAU;QACR,IAAIwB,QAAQG,OAAO,IAAIP,WAAWQ,OAAO;YACvCF,oBAAoBF,QAAQG,OAAO,CAACE,WAAW,GAAGL,QAAQG,OAAO,CAACG,WAAW;QAC/E;IACF,GAAG;QAACvB;QAAOa,WAAWQ;KAAM;IAE5B,qBACE,KAAClC;QACCY,IAAIA;QACJyB,WAAU;QACVC,mBAAiBV;QACjBW,oBAAkBV;QAClBW,iBAAiB;QACjB3B,qBACE,MAACZ;YAAMwC,WAAU;YAAMC,YAAW;YAASC,QAAO;;8BAChD,KAACxC;oBAAQU,OAAOA;oBAAO+B,sBAAsB,CAACb;8BAC5C,cAAA,KAAC7B;wBACCU,IAAIgB;wBACJiB,SAAQ;wBACRC,KAAKhB;wBACLT,IAAI;4BACF,gEAAgE;4BAChE,+CAA+C;4BAC/C0B,YAAY;4BACZC,WAAW;4BACXC,YAAY;4BACZC,UAAU;4BACVC,cAAc;wBAChB;kCAECtC;;;8BAGL,KAACH;oBACCG,OAAOA;oBACPE,aAAaA;oBACbc,sBAAsBA;oBACtBZ,OAAOA;oBACPE,cAAcA;oBACdC,cAAcA;oBACdK,oBAAoBA;oBACpBH,OAAOA;oBACPJ,cAAcA;oBACdK,eAAeA;oBACfC,WAAWA;;;;QAIjBH,IAAIjB,UACF,CAACgD,QAAW,CAAA;gBACVC,eAAe;gBACfC,eAAe7C;gBACf8C,SAASH,MAAMI,OAAO,CAAC;gBACvBC,cAAc,CAAC,UAAU,EAAEL,MAAMM,OAAO,CAACC,OAAO,EAAE;gBAClD,0BAA0B;oBACxBT,UAAU;gBACZ;YACF,CAAA,GACA7B;QAED,GAAGM,IAAI;;AAGd"}

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

@@ -1 +1 @@
-{"version":3,"file":"PanelDrawer.d.ts","sourceRoot":"","sources":["../../../src/components/PanelDrawer/PanelDrawer.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,YAAY,EAAY,MAAM,OAAO,CAAC;AAM/C;;GAEG;AACH,eAAO,MAAM,WAAW,QAAO,YAiD9B,CAAC"}
+{"version":3,"file":"PanelDrawer.d.ts","sourceRoot":"","sources":["../../../src/components/PanelDrawer/PanelDrawer.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,YAAY,EAA6C,MAAM,OAAO,CAAC;AAOhF;;GAEG;AACH,eAAO,MAAM,WAAW,QAAO,YAsE9B,CAAC"}

package/dist/components/PanelDrawer/PanelDrawer.js

@@ -11,8 +11,9 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useState } from 'react';
+import { useState, useMemo, useCallback } from 'react';
 import { Drawer, ErrorAlert, ErrorBoundary } from '@perses-dev/components';
+import { useVariableValues, VariableContext } from '@perses-dev/plugin-system';
 import { usePanelEditor } from '../../context';
 import { PanelEditorForm } from './PanelEditorForm';
 /**
@@ -22,44 +23,80 @@ import { PanelEditorForm } from './PanelEditorForm';
     // When the user clicks close, start closing but don't call the store yet to keep values stable during animtation
     const [isClosing, setIsClosing] = useState(false);
     // Drawer is open if we have a model and we're not transitioning out
-    const isOpen = panelEditor !== undefined && isClosing === false;
-    function handleSave(values) {
+    const isOpen = panelEditor !== undefined && !isClosing;
+    const handleSave = useCallback((values)=>{
         // This shouldn't happen since we don't render the submit button until we have a model, but check to make TS happy
         if (panelEditor === undefined || values === undefined) {
             throw new Error('Cannot apply changes');
         }
         panelEditor.applyChanges(values);
         setIsClosing(true);
-    }
+    }, [
+        panelEditor
+    ]);
     const handleClose = ()=>{
         setIsClosing(true);
     };
     // Don't call closeDrawer on the store until the Drawer has completely transitioned out and reset close state
-    const handleExited = ()=>{
+    const handleExited = useCallback(()=>{
         panelEditor?.close();
         setIsClosing(false);
-    };
+    }, [
+        panelEditor
+    ]);
     // Disables closing on click out. This is a quick-win solution to avoid losing draft changes.
     // -> TODO find a way to enable closing by clicking-out in edit view, with a discard confirmation modal popping up
     const handleClickOut = ()=>{
     /* do nothing */ };
-    return /*#__PURE__*/ _jsx(Drawer, {
-        isOpen: isOpen,
-        onClose: handleClickOut,
-        SlideProps: {
-            onExited: handleExited
-        },
-        "data-testid": "panel-editor",
-        children: panelEditor && /*#__PURE__*/ _jsx(ErrorBoundary, {
-            FallbackComponent: ErrorAlert,
-            children: /*#__PURE__*/ _jsx(PanelEditorForm, {
-                initialAction: panelEditor.mode,
-                initialValues: panelEditor.initialValues,
-                onSave: handleSave,
-                onClose: handleClose
+    const drawer = useMemo(()=>{
+        return /*#__PURE__*/ _jsx(Drawer, {
+            isOpen: isOpen,
+            onClose: handleClickOut,
+            SlideProps: {
+                onExited: handleExited
+            },
+            "data-testid": "panel-editor",
+            children: panelEditor && /*#__PURE__*/ _jsx(ErrorBoundary, {
+                FallbackComponent: ErrorAlert,
+                children: /*#__PURE__*/ _jsx(PanelEditorForm, {
+                    initialAction: panelEditor.mode,
+                    initialValues: panelEditor.initialValues,
+                    onSave: handleSave,
+                    onClose: handleClose
+                })
             })
-        })
-    });
+        });
+    }, [
+        handleExited,
+        handleSave,
+        isOpen,
+        panelEditor
+    ]);
+    // If the panel editor is using a repeat variable, we need to wrap the drawer in a VariableContext.Provider
+    if (panelEditor?.panelGroupItemId?.repeatVariable) {
+        return /*#__PURE__*/ _jsx(RepeatVariableWrapper, {
+            repeatVariable: panelEditor.panelGroupItemId.repeatVariable,
+            children: drawer
+        });
+    }
+    return drawer;
 };
+// Wraps the drawer in a VariableContext.Provider to provide the repeat variable value
+// This is necessary for previewing panels that use repeat variables and query editor
+function RepeatVariableWrapper({ repeatVariable, children }) {
+    const variables = useVariableValues();
+    return /*#__PURE__*/ _jsx(VariableContext.Provider, {
+        value: {
+            state: {
+                ...variables,
+                [repeatVariable[0]]: {
+                    value: repeatVariable[1],
+                    loading: false
+                }
+            }
+        },
+        children: children
+    });
+}
 
 //# sourceMappingURL=PanelDrawer.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PanelDrawer/PanelDrawer.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-empty-function */\n// 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 { ReactElement, useState } from 'react';\nimport { Drawer, ErrorAlert, ErrorBoundary } from '@perses-dev/components';\nimport { PanelEditorValues } from '@perses-dev/core';\nimport { usePanelEditor } from '../../context';\nimport { PanelEditorForm } from './PanelEditorForm';\n\n/**\n * The Add/Edit panel drawer for editing a panel's options.\n */\nexport const PanelDrawer = (): ReactElement => {\n  const panelEditor = usePanelEditor();\n\n  // When the user clicks close, start closing but don't call the store yet to keep values stable during animtation\n  const [isClosing, setIsClosing] = useState(false);\n\n  // Drawer is open if we have a model and we're not transitioning out\n  const isOpen = panelEditor !== undefined && isClosing === false;\n\n  function handleSave(values: PanelEditorValues): void {\n    // This shouldn't happen since we don't render the submit button until we have a model, but check to make TS happy\n    if (panelEditor === undefined || values === undefined) {\n      throw new Error('Cannot apply changes');\n    }\n    panelEditor.applyChanges(values);\n    setIsClosing(true);\n  }\n\n  const handleClose = (): void => {\n    setIsClosing(true);\n  };\n\n  // Don't call closeDrawer on the store until the Drawer has completely transitioned out and reset close state\n  const handleExited = (): void => {\n    panelEditor?.close();\n    setIsClosing(false);\n  };\n\n  // Disables closing on click out. This is a quick-win solution to avoid losing draft changes.\n  // -> TODO find a way to enable closing by clicking-out in edit view, with a discard confirmation modal popping up\n  const handleClickOut = (): void => {\n    /* do nothing */\n  };\n\n  return (\n    <Drawer isOpen={isOpen} onClose={handleClickOut} SlideProps={{ onExited: handleExited }} data-testid=\"panel-editor\">\n      {/* When the drawer is opened, we should have panel editor state (this also ensures the form state gets reset between opens) */}\n      {panelEditor && (\n        <ErrorBoundary FallbackComponent={ErrorAlert}>\n          <PanelEditorForm\n            initialAction={panelEditor.mode}\n            initialValues={panelEditor.initialValues}\n            onSave={handleSave}\n            onClose={handleClose}\n          />\n        </ErrorBoundary>\n      )}\n    </Drawer>\n  );\n};\n"],"names":["useState","Drawer","ErrorAlert","ErrorBoundary","usePanelEditor","PanelEditorForm","PanelDrawer","panelEditor","isClosing","setIsClosing","isOpen","undefined","handleSave","values","Error","applyChanges","handleClose","handleExited","close","handleClickOut","onClose","SlideProps","onExited","data-testid","FallbackComponent","initialAction","mode","initialValues","onSave"],"mappings":"AAAA,uDAAuD,GACvD,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAAuBA,QAAQ,QAAQ,QAAQ;AAC/C,SAASC,MAAM,EAAEC,UAAU,EAAEC,aAAa,QAAQ,yBAAyB;AAE3E,SAASC,cAAc,QAAQ,gBAAgB;AAC/C,SAASC,eAAe,QAAQ,oBAAoB;AAEpD;;CAEC,GACD,OAAO,MAAMC,cAAc;IACzB,MAAMC,cAAcH;IAEpB,iHAAiH;IACjH,MAAM,CAACI,WAAWC,aAAa,GAAGT,SAAS;IAE3C,oEAAoE;IACpE,MAAMU,SAASH,gBAAgBI,aAAaH,cAAc;IAE1D,SAASI,WAAWC,MAAyB;QAC3C,kHAAkH;QAClH,IAAIN,gBAAgBI,aAAaE,WAAWF,WAAW;YACrD,MAAM,IAAIG,MAAM;QAClB;QACAP,YAAYQ,YAAY,CAACF;QACzBJ,aAAa;IACf;IAEA,MAAMO,cAAc;QAClBP,aAAa;IACf;IAEA,6GAA6G;IAC7G,MAAMQ,eAAe;QACnBV,aAAaW;QACbT,aAAa;IACf;IAEA,6FAA6F;IAC7F,kHAAkH;IAClH,MAAMU,iBAAiB;IACrB,cAAc,GAChB;IAEA,qBACE,KAAClB;QAAOS,QAAQA;QAAQU,SAASD;QAAgBE,YAAY;YAAEC,UAAUL;QAAa;QAAGM,eAAY;kBAElGhB,6BACC,KAACJ;YAAcqB,mBAAmBtB;sBAChC,cAAA,KAACG;gBACCoB,eAAelB,YAAYmB,IAAI;gBAC/BC,eAAepB,YAAYoB,aAAa;gBACxCC,QAAQhB;gBACRQ,SAASJ;;;;AAMrB,EAAE"}
+{"version":3,"sources":["../../../src/components/PanelDrawer/PanelDrawer.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-empty-function */\n// 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 { ReactElement, useState, useMemo, ReactNode, useCallback } from 'react';\nimport { Drawer, ErrorAlert, ErrorBoundary } from '@perses-dev/components';\nimport { PanelEditorValues } from '@perses-dev/core';\nimport { useVariableValues, VariableContext } from '@perses-dev/plugin-system';\nimport { usePanelEditor } from '../../context';\nimport { PanelEditorForm } from './PanelEditorForm';\n\n/**\n * The Add/Edit panel drawer for editing a panel's options.\n */\nexport const PanelDrawer = (): ReactElement => {\n  const panelEditor = usePanelEditor();\n\n  // When the user clicks close, start closing but don't call the store yet to keep values stable during animtation\n  const [isClosing, setIsClosing] = useState(false);\n\n  // Drawer is open if we have a model and we're not transitioning out\n  const isOpen = panelEditor !== undefined && !isClosing;\n\n  const handleSave = useCallback(\n    (values: PanelEditorValues) => {\n      // This shouldn't happen since we don't render the submit button until we have a model, but check to make TS happy\n      if (panelEditor === undefined || values === undefined) {\n        throw new Error('Cannot apply changes');\n      }\n      panelEditor.applyChanges(values);\n      setIsClosing(true);\n    },\n    [panelEditor]\n  );\n\n  const handleClose = (): void => {\n    setIsClosing(true);\n  };\n\n  // Don't call closeDrawer on the store until the Drawer has completely transitioned out and reset close state\n  const handleExited = useCallback(() => {\n    panelEditor?.close();\n    setIsClosing(false);\n  }, [panelEditor]);\n\n  // Disables closing on click out. This is a quick-win solution to avoid losing draft changes.\n  // -> TODO find a way to enable closing by clicking-out in edit view, with a discard confirmation modal popping up\n  const handleClickOut = (): void => {\n    /* do nothing */\n  };\n\n  const drawer = useMemo(() => {\n    return (\n      <Drawer\n        isOpen={isOpen}\n        onClose={handleClickOut}\n        SlideProps={{ onExited: handleExited }}\n        data-testid=\"panel-editor\"\n      >\n        {/* When the drawer is opened, we should have panel editor state (this also ensures the form state gets reset between opens) */}\n        {panelEditor && (\n          <ErrorBoundary FallbackComponent={ErrorAlert}>\n            <PanelEditorForm\n              initialAction={panelEditor.mode}\n              initialValues={panelEditor.initialValues}\n              onSave={handleSave}\n              onClose={handleClose}\n            />\n          </ErrorBoundary>\n        )}\n      </Drawer>\n    );\n  }, [handleExited, handleSave, isOpen, panelEditor]);\n\n  // If the panel editor is using a repeat variable, we need to wrap the drawer in a VariableContext.Provider\n  if (panelEditor?.panelGroupItemId?.repeatVariable) {\n    return (\n      <RepeatVariableWrapper repeatVariable={panelEditor.panelGroupItemId.repeatVariable}>\n        {drawer}\n      </RepeatVariableWrapper>\n    );\n  }\n\n  return drawer;\n};\n\n// Wraps the drawer in a VariableContext.Provider to provide the repeat variable value\n// This is necessary for previewing panels that use repeat variables and query editor\nfunction RepeatVariableWrapper({\n  repeatVariable,\n  children,\n}: {\n  repeatVariable: [string, string];\n  children: ReactNode;\n}): ReactElement {\n  const variables = useVariableValues();\n\n  return (\n    <VariableContext.Provider\n      value={{ state: { ...variables, [repeatVariable[0]]: { value: repeatVariable[1], loading: false } } }}\n    >\n      {children}\n    </VariableContext.Provider>\n  );\n}\n"],"names":["useState","useMemo","useCallback","Drawer","ErrorAlert","ErrorBoundary","useVariableValues","VariableContext","usePanelEditor","PanelEditorForm","PanelDrawer","panelEditor","isClosing","setIsClosing","isOpen","undefined","handleSave","values","Error","applyChanges","handleClose","handleExited","close","handleClickOut","drawer","onClose","SlideProps","onExited","data-testid","FallbackComponent","initialAction","mode","initialValues","onSave","panelGroupItemId","repeatVariable","RepeatVariableWrapper","children","variables","Provider","value","state","loading"],"mappings":"AAAA,uDAAuD,GACvD,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAAuBA,QAAQ,EAAEC,OAAO,EAAaC,WAAW,QAAQ,QAAQ;AAChF,SAASC,MAAM,EAAEC,UAAU,EAAEC,aAAa,QAAQ,yBAAyB;AAE3E,SAASC,iBAAiB,EAAEC,eAAe,QAAQ,4BAA4B;AAC/E,SAASC,cAAc,QAAQ,gBAAgB;AAC/C,SAASC,eAAe,QAAQ,oBAAoB;AAEpD;;CAEC,GACD,OAAO,MAAMC,cAAc;IACzB,MAAMC,cAAcH;IAEpB,iHAAiH;IACjH,MAAM,CAACI,WAAWC,aAAa,GAAGb,SAAS;IAE3C,oEAAoE;IACpE,MAAMc,SAASH,gBAAgBI,aAAa,CAACH;IAE7C,MAAMI,aAAad,YACjB,CAACe;QACC,kHAAkH;QAClH,IAAIN,gBAAgBI,aAAaE,WAAWF,WAAW;YACrD,MAAM,IAAIG,MAAM;QAClB;QACAP,YAAYQ,YAAY,CAACF;QACzBJ,aAAa;IACf,GACA;QAACF;KAAY;IAGf,MAAMS,cAAc;QAClBP,aAAa;IACf;IAEA,6GAA6G;IAC7G,MAAMQ,eAAenB,YAAY;QAC/BS,aAAaW;QACbT,aAAa;IACf,GAAG;QAACF;KAAY;IAEhB,6FAA6F;IAC7F,kHAAkH;IAClH,MAAMY,iBAAiB;IACrB,cAAc,GAChB;IAEA,MAAMC,SAASvB,QAAQ;QACrB,qBACE,KAACE;YACCW,QAAQA;YACRW,SAASF;YACTG,YAAY;gBAAEC,UAAUN;YAAa;YACrCO,eAAY;sBAGXjB,6BACC,KAACN;gBAAcwB,mBAAmBzB;0BAChC,cAAA,KAACK;oBACCqB,eAAenB,YAAYoB,IAAI;oBAC/BC,eAAerB,YAAYqB,aAAa;oBACxCC,QAAQjB;oBACRS,SAASL;;;;IAMrB,GAAG;QAACC;QAAcL;QAAYF;QAAQH;KAAY;IAElD,2GAA2G;IAC3G,IAAIA,aAAauB,kBAAkBC,gBAAgB;QACjD,qBACE,KAACC;YAAsBD,gBAAgBxB,YAAYuB,gBAAgB,CAACC,cAAc;sBAC/EX;;IAGP;IAEA,OAAOA;AACT,EAAE;AAEF,sFAAsF;AACtF,qFAAqF;AACrF,SAASY,sBAAsB,EAC7BD,cAAc,EACdE,QAAQ,EAIT;IACC,MAAMC,YAAYhC;IAElB,qBACE,KAACC,gBAAgBgC,QAAQ;QACvBC,OAAO;YAAEC,OAAO;gBAAE,GAAGH,SAAS;gBAAE,CAACH,cAAc,CAAC,EAAE,CAAC,EAAE;oBAAEK,OAAOL,cAAc,CAAC,EAAE;oBAAEO,SAAS;gBAAM;YAAE;QAAE;kBAEnGL;;AAGP"}

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

@@ -1 +1 @@
-{"version":3,"file":"PanelGroupDialog.d.ts","sourceRoot":"","sources":["../../../src/components/PanelGroupDialog/PanelGroupDialog.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAE,YAAY,EAAY,MAAM,OAAO,CAAC;AAI/C;;GAEG;AACH,wBAAgB,gBAAgB,IAAI,YAAY,CAwD/C"}
+{"version":3,"file":"PanelGroupDialog.d.ts","sourceRoot":"","sources":["../../../src/components/PanelGroupDialog/PanelGroupDialog.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAE,YAAY,EAAY,MAAM,OAAO,CAAC;AAK/C;;GAEG;AACH,wBAAgB,gBAAgB,IAAI,YAAY,CA6D/C"}

package/dist/components/PanelGroupDialog/PanelGroupDialog.js

@@ -14,12 +14,14 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { IconButton, Dialog, DialogTitle, DialogContent, DialogActions, Button } from '@mui/material';
 import CloseIcon from 'mdi-material-ui/Close';
 import { useState } from 'react';
+import { useVariableValues } from '@perses-dev/plugin-system';
 import { usePanelGroupEditor } from '../../context';
 import { PanelGroupEditorForm, panelGroupEditorFormId } from './PanelGroupEditorForm';
 /**
  * A dialog for adding or editing a Panel Group. Open and initial state is controlled by the DashboardStore.
  */ export function PanelGroupDialog() {
     const panelGroupEditor = usePanelGroupEditor();
+    const variables = useVariableValues();
     // When the user clicks close, start closing but don't call the store yet to keep values stable during animtation
     const [isClosing, setIsClosing] = useState(false);
     const handleClose = ()=>setIsClosing(true);
@@ -68,6 +70,7 @@ import { PanelGroupEditorForm, panelGroupEditorFormId } from './PanelGroupEditor
                     },
                     children: /*#__PURE__*/ _jsx(PanelGroupEditorForm, {
                         initialValues: panelGroupEditor.initialValues,
+                        variables: Object.keys(variables),
                         onSubmit: handleSubmit
                     })
                 }),