@perses-dev/dashboards 0.53.0-beta.0 → 0.53.0-beta.1

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":"AAaA,OAAO,EAAqB,SAAS,EAAE,MAAM,eAAe,CAAC;AAE7D,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAEnD,OAAO,EAAE,SAAS,EAAsC,MAAM,OAAO,CAAC;AAEtE,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEjD,OAAO,EAAe,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAE9D,MAAM,WAAW,UAAW,SAAQ,SAAS,CAAC,SAAS,CAAC;IACtD,UAAU,EAAE,eAAe,CAAC;IAC5B,YAAY,CAAC,EAAE,gBAAgB,CAAC,cAAc,CAAC,CAAC;IAChD,YAAY,CAAC,EAAE,gBAAgB,CAAC,cAAc,CAAC,CAAC;IAChD,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,kBAAkB,CAAC,EAAE,gBAAgB,CAAC,oBAAoB,CAAC,CAAC;CAC7D;AAED,MAAM,MAAM,YAAY,GAAG;IACzB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,SAAS,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC/B;;;OAGG;IACH,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,SAAS,CAAC;CAC/C,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B;;OAEG;IACH,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC;;OAEG;IACH,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;CACrC,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,KAAK,kDAyMhB,CAAC"}
+{"version":3,"file":"Panel.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/Panel.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAqB,SAAS,EAAE,MAAM,eAAe,CAAC;AAE7D,OAAO,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAErE,OAAO,EAAE,SAAS,EAAsC,MAAM,OAAO,CAAC;AAGtE,OAAO,EAAe,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAE9D,MAAM,WAAW,UAAW,SAAQ,SAAS,CAAC,SAAS,CAAC;IACtD,UAAU,EAAE,eAAe,CAAC;IAC5B,YAAY,CAAC,EAAE,gBAAgB,CAAC,cAAc,CAAC,CAAC;IAChD,YAAY,CAAC,EAAE,gBAAgB,CAAC,cAAc,CAAC,CAAC;IAChD,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,kBAAkB,CAAC,EAAE,gBAAgB,CAAC,oBAAoB,CAAC,CAAC;CAC7D;AAED,MAAM,MAAM,YAAY,GAAG;IACzB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,SAAS,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC/B;;;OAGG;IACH,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,SAAS,CAAC;CAC/C,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B;;OAEG;IACH,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC;;OAEG;IACH,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;CACrC,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,KAAK,kDAuMhB,CAAC"}

package/dist/components/Panel/Panel.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 2025 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
@@ -12,7 +12,7 @@
 // limitations under the License.
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Card, CardContent } from '@mui/material';
-import { ErrorAlert, ErrorBoundary, combineSx, useChartsTheme, useId } from '@perses-dev/components';
+import { ErrorAlert, ErrorBoundary, combineSx, useId } from '@perses-dev/components';
 import { useDataQueriesContext, usePluginRegistry } from '@perses-dev/plugin-system';
 import { memo, useMemo, useState, useEffect } from 'react';
 import useResizeObserver from 'use-resize-observer';
@@ -44,7 +44,6 @@ import { PanelHeader } from './PanelHeader';
         width,
         height
     ]);
-    const chartsTheme = useChartsTheme();
     const { queryResults } = useDataQueriesContext();
     const { getPlugin } = usePluginRegistry();
     const panelPropsForActions = useMemo(()=>{
@@ -171,7 +170,9 @@ import { PanelHeader } from './PanelHeader';
                 pluginActions: pluginActions,
                 showIcons: showIcons,
                 sx: {
-                    paddingX: `${chartsTheme.container.padding.default}px`
+                    py: '2px',
+                    pl: '8px',
+                    pr: '2px'
                 },
                 dimension: contentDimensions
             }),

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   * 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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"}
+{"version":3,"sources":["../../../src/components/Panel/Panel.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 { Card, CardContent, CardProps } from '@mui/material';\nimport { ErrorAlert, ErrorBoundary, combineSx, useId } from '@perses-dev/components';\nimport { PanelDefinition, PanelGroupItemId } 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 { 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 { 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={{ py: '2px', pl: '8px', pr: '2px' }}\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","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","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","py","pl","pr","dimension","position","overflow","flexGrow","margin","padding","FallbackComponent","resetKeys"],"mappings":"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"}

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,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"}
+{"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,EAAU,MAAM,OAAO,CAAC;AAExD,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,CAqEjC"}

package/dist/components/Panel/PanelHeader.js

@@ -14,7 +14,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 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 { useRef } 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, showIcons, viewQueriesHandler, dimension, ...rest }) {
@@ -23,15 +23,7 @@ export function PanelHeader({ id, title: rawTitle, description: rawDescription,
     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
-    ]);
+    const isEllipsisActive = textRef.current && dimension?.width ? textRef.current.scrollWidth > textRef.current.clientWidth : false;
     return /*#__PURE__*/ _jsx(CardHeader, {
         id: id,
         component: "header",

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, 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"}
+{"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, useRef } 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\n  const isEllipsisActive =\n    textRef.current && dimension?.width ? textRef.current.scrollWidth > textRef.current.clientWidth : false;\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","useRef","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","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,MAAM,QAAQ,QAAQ;AACxD,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,QAAQN,4BAA4BO;IAC1C,MAAMC,cAAcR,4BAA4BS;IAEhD,MAAMc,UAAUtB,OAAuB;IAEvC,MAAMuB,mBACJD,QAAQE,OAAO,IAAIN,WAAWO,QAAQH,QAAQE,OAAO,CAACE,WAAW,GAAGJ,QAAQE,OAAO,CAACG,WAAW,GAAG;IAEpG,qBACE,KAACjC;QACCU,IAAIA;QACJwB,WAAU;QACVC,mBAAiBT;QACjBU,oBAAkBT;QAClBU,iBAAiB;QACjB1B,qBACE,MAACV;YAAMqC,WAAU;YAAMC,YAAW;YAASC,QAAO;;8BAChD,KAACrC;oBAAQQ,OAAOA;oBAAO8B,sBAAsB,CAACZ;8BAC5C,cAAA,KAAC3B;wBACCQ,IAAIgB;wBACJgB,SAAQ;wBACRC,KAAKf;wBACLT,IAAI;4BACF,gEAAgE;4BAChE,+CAA+C;4BAC/CyB,YAAY;4BACZC,WAAW;4BACXC,YAAY;4BACZC,UAAU;4BACVC,cAAc;wBAChB;kCAECrC;;;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,IAAIf,UACF,CAAC6C,QAAW,CAAA;gBACVC,eAAe;gBACfC,eAAe5C;gBACf6C,SAASH,MAAMI,OAAO,CAAC;gBACvBC,cAAc,CAAC,UAAU,EAAEL,MAAMM,OAAO,CAACC,OAAO,EAAE;gBAClD,0BAA0B;oBACxBT,UAAU;gBACZ;YACF,CAAA,GACA5B;QAED,GAAGM,IAAI;;AAGd"}

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

@@ -1 +1 @@
-{"version":3,"file":"SaveChangesConfirmationDialog.d.ts","sourceRoot":"","sources":["../../../src/components/SaveChangesConfirmationDialog/SaveChangesConfirmationDialog.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAY,MAAM,OAAO,CAAC;AAU/C,eAAO,MAAM,6BAA6B,QAAO,YAqEhD,CAAC"}
+{"version":3,"file":"SaveChangesConfirmationDialog.d.ts","sourceRoot":"","sources":["../../../src/components/SaveChangesConfirmationDialog/SaveChangesConfirmationDialog.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAY,MAAM,OAAO,CAAC;AAU/C,eAAO,MAAM,6BAA6B,QAAO,YAyFhD,CAAC"}

package/dist/components/SaveChangesConfirmationDialog/SaveChangesConfirmationDialog.js

@@ -13,7 +13,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState } from 'react';
 import { Checkbox, FormGroup, FormControlLabel, Typography } from '@mui/material';
-import { useTimeRange } from '@perses-dev/plugin-system';
+import { DEFAULT_REFRESH_INTERVAL_OPTIONS, useTimeRange } from '@perses-dev/plugin-system';
 import { isRelativeTimeRange } from '@perses-dev/core';
 import { Dialog } from '@perses-dev/components';
 import { useSaveChangesConfirmationDialog, useVariableDefinitionActions } from '../../context';
@@ -22,15 +22,19 @@ export const SaveChangesConfirmationDialog = ()=>{
     const { saveChangesConfirmationDialog: dialog } = useSaveChangesConfirmationDialog();
     const isSavedDurationModified = dialog?.isSavedDurationModified ?? true;
     const isSavedVariableModified = dialog?.isSavedVariableModified ?? true;
+    const isSavedRefreshIntervalModified = dialog?.isSavedRefreshIntervalModified ?? true;
     const [saveDefaultTimeRange, setSaveDefaultTimeRange] = useState(isSavedDurationModified);
     const [saveDefaultVariables, setSaveDefaultVariables] = useState(isSavedVariableModified);
+    const [saveDefaultRefreshInterval, setDefaultRefreshInterval] = useState(isSavedRefreshIntervalModified);
     const { getSavedVariablesStatus } = useVariableDefinitionActions();
     const { modifiedVariableNames } = getSavedVariablesStatus();
     const isOpen = dialog !== undefined;
-    const { timeRange } = useTimeRange();
+    const { timeRange, refreshInterval } = useTimeRange();
     const currentTimeRangeText = isRelativeTimeRange(timeRange) ? `(Last ${timeRange.pastDuration})` : '(Absolute time ranges can not be saved)';
-    const saveTimeRangeText = `Save current time range as new default ${currentTimeRangeText}`;
-    const saveVariablesText = `Save current variable values as new default (${modifiedVariableNames.length > 0 ? modifiedVariableNames.join(', ') : 'No modified variables'})`;
+    const saveTimeRangeMessage = `Save current time range as new default ${currentTimeRangeText}`;
+    const saveVariableMessage = `Save current variable values as new default (${modifiedVariableNames.length > 0 ? modifiedVariableNames.join(', ') : 'No modified variables'})`;
+    const refreshIntervalDisplay = DEFAULT_REFRESH_INTERVAL_OPTIONS.some((i)=>i.display === refreshInterval) ? refreshInterval : DEFAULT_REFRESH_INTERVAL_OPTIONS.find((i)=>i.value.pastDuration === refreshInterval)?.display;
+    const saveRefreshIntervalMessage = `Save current refresh interval as new default ${refreshIntervalDisplay ? `(${refreshIntervalDisplay})` : 'refresh interval not modified'}`;
     return /*#__PURE__*/ _jsx(Dialog, {
         open: isOpen,
         children: dialog !== undefined && /*#__PURE__*/ _jsxs(_Fragment, {
@@ -53,7 +57,15 @@ export const SaveChangesConfirmationDialog = ()=>{
                                         checked: saveDefaultTimeRange && isSavedDurationModified && isRelativeTimeRange(timeRange),
                                         onChange: (e)=>setSaveDefaultTimeRange(e.target.checked)
                                     }),
-                                    label: saveTimeRangeText
+                                    label: saveTimeRangeMessage
+                                }),
+                                /*#__PURE__*/ _jsx(FormControlLabel, {
+                                    control: /*#__PURE__*/ _jsx(Checkbox, {
+                                        disabled: !isSavedRefreshIntervalModified,
+                                        checked: saveDefaultRefreshInterval && isSavedRefreshIntervalModified,
+                                        onChange: (e)=>setDefaultRefreshInterval(e.target.checked)
+                                    }),
+                                    label: saveRefreshIntervalMessage
                                 }),
                                 /*#__PURE__*/ _jsx(FormControlLabel, {
                                     control: /*#__PURE__*/ _jsx(Checkbox, {
@@ -61,7 +73,7 @@ export const SaveChangesConfirmationDialog = ()=>{
                                         checked: saveDefaultVariables && isSavedVariableModified,
                                         onChange: (e)=>setSaveDefaultVariables(e.target.checked)
                                     }),
-                                    label: saveVariablesText
+                                    label: saveVariableMessage
                                 })
                             ]
                         })
@@ -71,7 +83,7 @@ export const SaveChangesConfirmationDialog = ()=>{
                     children: [
                         /*#__PURE__*/ _jsx(Dialog.PrimaryButton, {
                             onClick: ()=>{
-                                return dialog.onSaveChanges(saveDefaultTimeRange, saveDefaultVariables);
+                                return dialog.onSaveChanges(saveDefaultTimeRange, saveDefaultRefreshInterval, saveDefaultVariables);
                             },
                             children: "Save Changes"
                         }),

package/dist/components/SaveChangesConfirmationDialog/SaveChangesConfirmationDialog.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/SaveChangesConfirmationDialog/SaveChangesConfirmationDialog.tsx"],"sourcesContent":["// Copyright 2024 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { ReactElement, useState } from 'react';\nimport { Checkbox, FormGroup, FormControlLabel, Typography } from '@mui/material';\nimport { useTimeRange } from '@perses-dev/plugin-system';\nimport { isRelativeTimeRange } from '@perses-dev/core';\nimport { Dialog } from '@perses-dev/components';\nimport { useSaveChangesConfirmationDialog, useVariableDefinitionActions } from '../../context';\n\nconst SAVE_DEFAULTS_DIALOG_TEXT =\n  'You have made changes to the time range or the variables values. Would you like to save these as defaults?';\n\nexport const SaveChangesConfirmationDialog = (): ReactElement => {\n  const { saveChangesConfirmationDialog: dialog } = useSaveChangesConfirmationDialog();\n  const isSavedDurationModified = dialog?.isSavedDurationModified ?? true;\n  const isSavedVariableModified = dialog?.isSavedVariableModified ?? true;\n  const [saveDefaultTimeRange, setSaveDefaultTimeRange] = useState(isSavedDurationModified);\n  const [saveDefaultVariables, setSaveDefaultVariables] = useState(isSavedVariableModified);\n\n  const { getSavedVariablesStatus } = useVariableDefinitionActions();\n  const { modifiedVariableNames } = getSavedVariablesStatus();\n\n  const isOpen = dialog !== undefined;\n\n  const { timeRange } = useTimeRange();\n  const currentTimeRangeText = isRelativeTimeRange(timeRange)\n    ? `(Last ${timeRange.pastDuration})`\n    : '(Absolute time ranges can not be saved)';\n\n  const saveTimeRangeText = `Save current time range as new default ${currentTimeRangeText}`;\n\n  const saveVariablesText = `Save current variable values as new default (${\n    modifiedVariableNames.length > 0 ? modifiedVariableNames.join(', ') : 'No modified variables'\n  })`;\n\n  return (\n    <Dialog open={isOpen}>\n      {dialog !== undefined && (\n        <>\n          <Dialog.Header onClose={() => dialog.onCancel()}>Save Dashboard</Dialog.Header>\n\n          <Dialog.Content>\n            <Typography marginBottom={2}>{dialog.description || SAVE_DEFAULTS_DIALOG_TEXT}</Typography>\n            <FormGroup>\n              <FormControlLabel\n                control={\n                  <Checkbox\n                    disabled={!isSavedDurationModified || !isRelativeTimeRange(timeRange)}\n                    checked={saveDefaultTimeRange && isSavedDurationModified && isRelativeTimeRange(timeRange)}\n                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSaveDefaultTimeRange(e.target.checked)}\n                  />\n                }\n                label={saveTimeRangeText}\n              />\n              <FormControlLabel\n                control={\n                  <Checkbox\n                    disabled={!isSavedVariableModified}\n                    checked={saveDefaultVariables && isSavedVariableModified}\n                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSaveDefaultVariables(e.target.checked)}\n                  />\n                }\n                label={saveVariablesText}\n              />\n            </FormGroup>\n          </Dialog.Content>\n\n          <Dialog.Actions>\n            <Dialog.PrimaryButton\n              onClick={() => {\n                return dialog.onSaveChanges(saveDefaultTimeRange, saveDefaultVariables);\n              }}\n            >\n              Save Changes\n            </Dialog.PrimaryButton>\n            <Dialog.SecondaryButton onClick={() => dialog.onCancel()}>Cancel</Dialog.SecondaryButton>\n          </Dialog.Actions>\n        </>\n      )}\n    </Dialog>\n  );\n};\n"],"names":["useState","Checkbox","FormGroup","FormControlLabel","Typography","useTimeRange","isRelativeTimeRange","Dialog","useSaveChangesConfirmationDialog","useVariableDefinitionActions","SAVE_DEFAULTS_DIALOG_TEXT","SaveChangesConfirmationDialog","saveChangesConfirmationDialog","dialog","isSavedDurationModified","isSavedVariableModified","saveDefaultTimeRange","setSaveDefaultTimeRange","saveDefaultVariables","setSaveDefaultVariables","getSavedVariablesStatus","modifiedVariableNames","isOpen","undefined","timeRange","currentTimeRangeText","pastDuration","saveTimeRangeText","saveVariablesText","length","join","open","Header","onClose","onCancel","Content","marginBottom","description","control","disabled","checked","onChange","e","target","label","Actions","PrimaryButton","onClick","onSaveChanges","SecondaryButton"],"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,SAAuBA,QAAQ,QAAQ,QAAQ;AAC/C,SAASC,QAAQ,EAAEC,SAAS,EAAEC,gBAAgB,EAAEC,UAAU,QAAQ,gBAAgB;AAClF,SAASC,YAAY,QAAQ,4BAA4B;AACzD,SAASC,mBAAmB,QAAQ,mBAAmB;AACvD,SAASC,MAAM,QAAQ,yBAAyB;AAChD,SAASC,gCAAgC,EAAEC,4BAA4B,QAAQ,gBAAgB;AAE/F,MAAMC,4BACJ;AAEF,OAAO,MAAMC,gCAAgC;IAC3C,MAAM,EAAEC,+BAA+BC,MAAM,EAAE,GAAGL;IAClD,MAAMM,0BAA0BD,QAAQC,2BAA2B;IACnE,MAAMC,0BAA0BF,QAAQE,2BAA2B;IACnE,MAAM,CAACC,sBAAsBC,wBAAwB,GAAGjB,SAASc;IACjE,MAAM,CAACI,sBAAsBC,wBAAwB,GAAGnB,SAASe;IAEjE,MAAM,EAAEK,uBAAuB,EAAE,GAAGX;IACpC,MAAM,EAAEY,qBAAqB,EAAE,GAAGD;IAElC,MAAME,SAAST,WAAWU;IAE1B,MAAM,EAAEC,SAAS,EAAE,GAAGnB;IACtB,MAAMoB,uBAAuBnB,oBAAoBkB,aAC7C,CAAC,MAAM,EAAEA,UAAUE,YAAY,CAAC,CAAC,CAAC,GAClC;IAEJ,MAAMC,oBAAoB,CAAC,uCAAuC,EAAEF,sBAAsB;IAE1F,MAAMG,oBAAoB,CAAC,6CAA6C,EACtEP,sBAAsBQ,MAAM,GAAG,IAAIR,sBAAsBS,IAAI,CAAC,QAAQ,wBACvE,CAAC,CAAC;IAEH,qBACE,KAACvB;QAAOwB,MAAMT;kBACXT,WAAWU,2BACV;;8BACE,KAAChB,OAAOyB,MAAM;oBAACC,SAAS,IAAMpB,OAAOqB,QAAQ;8BAAI;;8BAEjD,MAAC3B,OAAO4B,OAAO;;sCACb,KAAC/B;4BAAWgC,cAAc;sCAAIvB,OAAOwB,WAAW,IAAI3B;;sCACpD,MAACR;;8CACC,KAACC;oCACCmC,uBACE,KAACrC;wCACCsC,UAAU,CAACzB,2BAA2B,CAACR,oBAAoBkB;wCAC3DgB,SAASxB,wBAAwBF,2BAA2BR,oBAAoBkB;wCAChFiB,UAAU,CAACC,IAA2CzB,wBAAwByB,EAAEC,MAAM,CAACH,OAAO;;oCAGlGI,OAAOjB;;8CAET,KAACxB;oCACCmC,uBACE,KAACrC;wCACCsC,UAAU,CAACxB;wCACXyB,SAAStB,wBAAwBH;wCACjC0B,UAAU,CAACC,IAA2CvB,wBAAwBuB,EAAEC,MAAM,CAACH,OAAO;;oCAGlGI,OAAOhB;;;;;;8BAKb,MAACrB,OAAOsC,OAAO;;sCACb,KAACtC,OAAOuC,aAAa;4BACnBC,SAAS;gCACP,OAAOlC,OAAOmC,aAAa,CAAChC,sBAAsBE;4BACpD;sCACD;;sCAGD,KAACX,OAAO0C,eAAe;4BAACF,SAAS,IAAMlC,OAAOqB,QAAQ;sCAAI;;;;;;;AAMtE,EAAE"}
+{"version":3,"sources":["../../../src/components/SaveChangesConfirmationDialog/SaveChangesConfirmationDialog.tsx"],"sourcesContent":["// Copyright 2024 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { ReactElement, useState } from 'react';\nimport { Checkbox, FormGroup, FormControlLabel, Typography } from '@mui/material';\nimport { DEFAULT_REFRESH_INTERVAL_OPTIONS, useTimeRange } from '@perses-dev/plugin-system';\nimport { isRelativeTimeRange } from '@perses-dev/core';\nimport { Dialog } from '@perses-dev/components';\nimport { useSaveChangesConfirmationDialog, useVariableDefinitionActions } from '../../context';\n\nconst SAVE_DEFAULTS_DIALOG_TEXT =\n  'You have made changes to the time range or the variables values. Would you like to save these as defaults?';\n\nexport const SaveChangesConfirmationDialog = (): ReactElement => {\n  const { saveChangesConfirmationDialog: dialog } = useSaveChangesConfirmationDialog();\n  const isSavedDurationModified = dialog?.isSavedDurationModified ?? true;\n  const isSavedVariableModified = dialog?.isSavedVariableModified ?? true;\n  const isSavedRefreshIntervalModified = dialog?.isSavedRefreshIntervalModified ?? true;\n\n  const [saveDefaultTimeRange, setSaveDefaultTimeRange] = useState(isSavedDurationModified);\n  const [saveDefaultVariables, setSaveDefaultVariables] = useState(isSavedVariableModified);\n  const [saveDefaultRefreshInterval, setDefaultRefreshInterval] = useState(isSavedRefreshIntervalModified);\n\n  const { getSavedVariablesStatus } = useVariableDefinitionActions();\n  const { modifiedVariableNames } = getSavedVariablesStatus();\n\n  const isOpen = dialog !== undefined;\n\n  const { timeRange, refreshInterval } = useTimeRange();\n\n  const currentTimeRangeText = isRelativeTimeRange(timeRange)\n    ? `(Last ${timeRange.pastDuration})`\n    : '(Absolute time ranges can not be saved)';\n\n  const saveTimeRangeMessage = `Save current time range as new default ${currentTimeRangeText}`;\n\n  const saveVariableMessage = `Save current variable values as new default (${\n    modifiedVariableNames.length > 0 ? modifiedVariableNames.join(', ') : 'No modified variables'\n  })`;\n\n  const refreshIntervalDisplay = DEFAULT_REFRESH_INTERVAL_OPTIONS.some((i) => i.display === refreshInterval)\n    ? refreshInterval\n    : DEFAULT_REFRESH_INTERVAL_OPTIONS.find((i) => i.value.pastDuration === refreshInterval)?.display;\n\n  const saveRefreshIntervalMessage = `Save current refresh interval as new default ${refreshIntervalDisplay ? `(${refreshIntervalDisplay})` : 'refresh interval not modified'}`;\n\n  return (\n    <Dialog open={isOpen}>\n      {dialog !== undefined && (\n        <>\n          <Dialog.Header onClose={() => dialog.onCancel()}>Save Dashboard</Dialog.Header>\n\n          <Dialog.Content>\n            <Typography marginBottom={2}>{dialog.description || SAVE_DEFAULTS_DIALOG_TEXT}</Typography>\n            <FormGroup>\n              <FormControlLabel\n                control={\n                  <Checkbox\n                    disabled={!isSavedDurationModified || !isRelativeTimeRange(timeRange)}\n                    checked={saveDefaultTimeRange && isSavedDurationModified && isRelativeTimeRange(timeRange)}\n                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSaveDefaultTimeRange(e.target.checked)}\n                  />\n                }\n                label={saveTimeRangeMessage}\n              />\n              <FormControlLabel\n                control={\n                  <Checkbox\n                    disabled={!isSavedRefreshIntervalModified}\n                    checked={saveDefaultRefreshInterval && isSavedRefreshIntervalModified}\n                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => setDefaultRefreshInterval(e.target.checked)}\n                  />\n                }\n                label={saveRefreshIntervalMessage}\n              />\n              <FormControlLabel\n                control={\n                  <Checkbox\n                    disabled={!isSavedVariableModified}\n                    checked={saveDefaultVariables && isSavedVariableModified}\n                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSaveDefaultVariables(e.target.checked)}\n                  />\n                }\n                label={saveVariableMessage}\n              />\n            </FormGroup>\n          </Dialog.Content>\n\n          <Dialog.Actions>\n            <Dialog.PrimaryButton\n              onClick={() => {\n                return dialog.onSaveChanges(saveDefaultTimeRange, saveDefaultRefreshInterval, saveDefaultVariables);\n              }}\n            >\n              Save Changes\n            </Dialog.PrimaryButton>\n            <Dialog.SecondaryButton onClick={() => dialog.onCancel()}>Cancel</Dialog.SecondaryButton>\n          </Dialog.Actions>\n        </>\n      )}\n    </Dialog>\n  );\n};\n"],"names":["useState","Checkbox","FormGroup","FormControlLabel","Typography","DEFAULT_REFRESH_INTERVAL_OPTIONS","useTimeRange","isRelativeTimeRange","Dialog","useSaveChangesConfirmationDialog","useVariableDefinitionActions","SAVE_DEFAULTS_DIALOG_TEXT","SaveChangesConfirmationDialog","saveChangesConfirmationDialog","dialog","isSavedDurationModified","isSavedVariableModified","isSavedRefreshIntervalModified","saveDefaultTimeRange","setSaveDefaultTimeRange","saveDefaultVariables","setSaveDefaultVariables","saveDefaultRefreshInterval","setDefaultRefreshInterval","getSavedVariablesStatus","modifiedVariableNames","isOpen","undefined","timeRange","refreshInterval","currentTimeRangeText","pastDuration","saveTimeRangeMessage","saveVariableMessage","length","join","refreshIntervalDisplay","some","i","display","find","value","saveRefreshIntervalMessage","open","Header","onClose","onCancel","Content","marginBottom","description","control","disabled","checked","onChange","e","target","label","Actions","PrimaryButton","onClick","onSaveChanges","SecondaryButton"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"SaveDashboardButton.d.ts","sourceRoot":"","sources":["../../../src/components/SaveDashboardButton/SaveDashboardButton.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAY,MAAM,OAAO,CAAC;AAC/C,OAAO,EAAU,WAAW,EAAE,MAAM,eAAe,CAAC;AAGpD,OAAO,EACL,eAAe,EAKhB,MAAM,eAAe,CAAC;AAEvB,MAAM,WAAW,wBAAyB,SAAQ,IAAI,CAAC,WAAW,EAAE,WAAW,CAAC;IAC9E,MAAM,CAAC,EAAE,eAAe,CAAC;IACzB,UAAU,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,UAAU,CAAC;CAC7C;AAED,eAAO,MAAM,mBAAmB,qCAI7B,wBAAwB,KAAG,YA8D7B,CAAC"}
+{"version":3,"file":"SaveDashboardButton.d.ts","sourceRoot":"","sources":["../../../src/components/SaveDashboardButton/SaveDashboardButton.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAY,MAAM,OAAO,CAAC;AAC/C,OAAO,EAAU,WAAW,EAAE,MAAM,eAAe,CAAC;AAGpD,OAAO,EACL,eAAe,EAKhB,MAAM,eAAe,CAAC;AAEvB,MAAM,WAAW,wBAAyB,SAAQ,IAAI,CAAC,WAAW,EAAE,WAAW,CAAC;IAC9E,MAAM,CAAC,EAAE,eAAe,CAAC;IACzB,UAAU,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,UAAU,CAAC;CAC7C;AAED,eAAO,MAAM,mBAAmB,qCAI7B,wBAAwB,KAAG,YAoE7B,CAAC"}

package/dist/components/SaveDashboardButton/SaveDashboardButton.js

@@ -21,24 +21,28 @@ export const SaveDashboardButton = ({ onSave, isDisabled, variant = 'contained'
     const { dashboard, setDashboard } = useDashboard();
     const { getSavedVariablesStatus, setVariableDefaultValues } = useVariableDefinitionActions();
     const { isSavedVariableModified } = getSavedVariablesStatus();
-    const { timeRange } = useTimeRange();
+    const { timeRange, refreshInterval } = useTimeRange();
     const { setEditMode } = useEditMode();
     const { openSaveChangesConfirmationDialog, closeSaveChangesConfirmationDialog } = useSaveChangesConfirmationDialog();
     const onSaveButtonClick = ()=>{
         const isSavedDurationModified = isRelativeTimeRange(timeRange) && dashboard.spec.duration !== timeRange.pastDuration;
+        const isSavedRefreshIntervalModified = dashboard.spec.refreshInterval !== refreshInterval;
         // Save dashboard
         // - if active timeRange from plugin-system is relative and different from currently saved
         // - or if the saved variables are different from currently saved
-        if (isSavedDurationModified || isSavedVariableModified) {
+        if (isSavedDurationModified || isSavedVariableModified || isSavedRefreshIntervalModified) {
             openSaveChangesConfirmationDialog({
-                onSaveChanges: (saveDefaultTimeRange, saveDefaultVariables)=>{
-                    if (isRelativeTimeRange(timeRange) && saveDefaultTimeRange === true) {
+                onSaveChanges: (saveDefaultTimeRange, saveDefaultRefreshInterval, saveDefaultVariables)=>{
+                    if (isRelativeTimeRange(timeRange) && saveDefaultTimeRange) {
                         dashboard.spec.duration = timeRange.pastDuration;
                     }
-                    if (saveDefaultVariables === true) {
+                    if (saveDefaultVariables) {
                         const variables = setVariableDefaultValues();
                         dashboard.spec.variables = variables;
                     }
+                    if (saveDefaultRefreshInterval && isSavedRefreshIntervalModified) {
+                        dashboard.spec.refreshInterval = refreshInterval;
+                    }
                     setDashboard(dashboard);
                     saveDashboard();
                 },
@@ -46,7 +50,8 @@ export const SaveDashboardButton = ({ onSave, isDisabled, variant = 'contained'
                     closeSaveChangesConfirmationDialog();
                 },
                 isSavedDurationModified,
-                isSavedVariableModified
+                isSavedVariableModified,
+                isSavedRefreshIntervalModified
             });
         } else {
             saveDashboard();

package/dist/components/SaveDashboardButton/SaveDashboardButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/SaveDashboardButton/SaveDashboardButton.tsx"],"sourcesContent":["// Copyright 2024 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { ReactElement, useState } from 'react';\nimport { Button, ButtonProps } from '@mui/material';\nimport { isRelativeTimeRange } from '@perses-dev/core';\nimport { useTimeRange } from '@perses-dev/plugin-system';\nimport {\n  OnSaveDashboard,\n  useDashboard,\n  useEditMode,\n  useSaveChangesConfirmationDialog,\n  useVariableDefinitionActions,\n} from '../../context';\n\nexport interface SaveDashboardButtonProps extends Pick<ButtonProps, 'fullWidth'> {\n  onSave?: OnSaveDashboard;\n  isDisabled: boolean;\n  variant?: 'contained' | 'text' | 'outlined';\n}\n\nexport const SaveDashboardButton = ({\n  onSave,\n  isDisabled,\n  variant = 'contained',\n}: SaveDashboardButtonProps): ReactElement => {\n  const [isSavingDashboard, setSavingDashboard] = useState<boolean>(false);\n  const { dashboard, setDashboard } = useDashboard();\n  const { getSavedVariablesStatus, setVariableDefaultValues } = useVariableDefinitionActions();\n  const { isSavedVariableModified } = getSavedVariablesStatus();\n  const { timeRange } = useTimeRange();\n  const { setEditMode } = useEditMode();\n  const { openSaveChangesConfirmationDialog, closeSaveChangesConfirmationDialog } = useSaveChangesConfirmationDialog();\n\n  const onSaveButtonClick = (): void => {\n    const isSavedDurationModified =\n      isRelativeTimeRange(timeRange) && dashboard.spec.duration !== timeRange.pastDuration;\n\n    // Save dashboard\n    // - if active timeRange from plugin-system is relative and different from currently saved\n    // - or if the saved variables are different from currently saved\n    if (isSavedDurationModified || isSavedVariableModified) {\n      openSaveChangesConfirmationDialog({\n        onSaveChanges: (saveDefaultTimeRange, saveDefaultVariables) => {\n          if (isRelativeTimeRange(timeRange) && saveDefaultTimeRange === true) {\n            dashboard.spec.duration = timeRange.pastDuration;\n          }\n          if (saveDefaultVariables === true) {\n            const variables = setVariableDefaultValues();\n            dashboard.spec.variables = variables;\n          }\n          setDashboard(dashboard);\n          saveDashboard();\n        },\n        onCancel: () => {\n          closeSaveChangesConfirmationDialog();\n        },\n        isSavedDurationModified,\n        isSavedVariableModified,\n      });\n    } else {\n      saveDashboard();\n    }\n  };\n\n  const saveDashboard = async (): Promise<void> => {\n    if (onSave) {\n      try {\n        setSavingDashboard(true);\n        await onSave(dashboard);\n        closeSaveChangesConfirmationDialog();\n        setEditMode(false);\n      } catch (error) {\n        throw new Error(`An error occurred while saving the dashboard. ${error}`);\n      } finally {\n        setSavingDashboard(false);\n      }\n    } else {\n      setEditMode(false);\n    }\n  };\n\n  return (\n    <Button variant={variant} onClick={onSaveButtonClick} disabled={isDisabled || isSavingDashboard}>\n      Save\n    </Button>\n  );\n};\n"],"names":["useState","Button","isRelativeTimeRange","useTimeRange","useDashboard","useEditMode","useSaveChangesConfirmationDialog","useVariableDefinitionActions","SaveDashboardButton","onSave","isDisabled","variant","isSavingDashboard","setSavingDashboard","dashboard","setDashboard","getSavedVariablesStatus","setVariableDefaultValues","isSavedVariableModified","timeRange","setEditMode","openSaveChangesConfirmationDialog","closeSaveChangesConfirmationDialog","onSaveButtonClick","isSavedDurationModified","spec","duration","pastDuration","onSaveChanges","saveDefaultTimeRange","saveDefaultVariables","variables","saveDashboard","onCancel","error","Error","onClick","disabled"],"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,SAAuBA,QAAQ,QAAQ,QAAQ;AAC/C,SAASC,MAAM,QAAqB,gBAAgB;AACpD,SAASC,mBAAmB,QAAQ,mBAAmB;AACvD,SAASC,YAAY,QAAQ,4BAA4B;AACzD,SAEEC,YAAY,EACZC,WAAW,EACXC,gCAAgC,EAChCC,4BAA4B,QACvB,gBAAgB;AAQvB,OAAO,MAAMC,sBAAsB,CAAC,EAClCC,MAAM,EACNC,UAAU,EACVC,UAAU,WAAW,EACI;IACzB,MAAM,CAACC,mBAAmBC,mBAAmB,GAAGb,SAAkB;IAClE,MAAM,EAAEc,SAAS,EAAEC,YAAY,EAAE,GAAGX;IACpC,MAAM,EAAEY,uBAAuB,EAAEC,wBAAwB,EAAE,GAAGV;IAC9D,MAAM,EAAEW,uBAAuB,EAAE,GAAGF;IACpC,MAAM,EAAEG,SAAS,EAAE,GAAGhB;IACtB,MAAM,EAAEiB,WAAW,EAAE,GAAGf;IACxB,MAAM,EAAEgB,iCAAiC,EAAEC,kCAAkC,EAAE,GAAGhB;IAElF,MAAMiB,oBAAoB;QACxB,MAAMC,0BACJtB,oBAAoBiB,cAAcL,UAAUW,IAAI,CAACC,QAAQ,KAAKP,UAAUQ,YAAY;QAEtF,iBAAiB;QACjB,0FAA0F;QAC1F,iEAAiE;QACjE,IAAIH,2BAA2BN,yBAAyB;YACtDG,kCAAkC;gBAChCO,eAAe,CAACC,sBAAsBC;oBACpC,IAAI5B,oBAAoBiB,cAAcU,yBAAyB,MAAM;wBACnEf,UAAUW,IAAI,CAACC,QAAQ,GAAGP,UAAUQ,YAAY;oBAClD;oBACA,IAAIG,yBAAyB,MAAM;wBACjC,MAAMC,YAAYd;wBAClBH,UAAUW,IAAI,CAACM,SAAS,GAAGA;oBAC7B;oBACAhB,aAAaD;oBACbkB;gBACF;gBACAC,UAAU;oBACRX;gBACF;gBACAE;gBACAN;YACF;QACF,OAAO;YACLc;QACF;IACF;IAEA,MAAMA,gBAAgB;QACpB,IAAIvB,QAAQ;YACV,IAAI;gBACFI,mBAAmB;gBACnB,MAAMJ,OAAOK;gBACbQ;gBACAF,YAAY;YACd,EAAE,OAAOc,OAAO;gBACd,MAAM,IAAIC,MAAM,CAAC,8CAA8C,EAAED,OAAO;YAC1E,SAAU;gBACRrB,mBAAmB;YACrB;QACF,OAAO;YACLO,YAAY;QACd;IACF;IAEA,qBACE,KAACnB;QAAOU,SAASA;QAASyB,SAASb;QAAmBc,UAAU3B,cAAcE;kBAAmB;;AAIrG,EAAE"}
+{"version":3,"sources":["../../../src/components/SaveDashboardButton/SaveDashboardButton.tsx"],"sourcesContent":["// Copyright 2024 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { ReactElement, useState } from 'react';\nimport { Button, ButtonProps } from '@mui/material';\nimport { isRelativeTimeRange } from '@perses-dev/core';\nimport { useTimeRange } from '@perses-dev/plugin-system';\nimport {\n  OnSaveDashboard,\n  useDashboard,\n  useEditMode,\n  useSaveChangesConfirmationDialog,\n  useVariableDefinitionActions,\n} from '../../context';\n\nexport interface SaveDashboardButtonProps extends Pick<ButtonProps, 'fullWidth'> {\n  onSave?: OnSaveDashboard;\n  isDisabled: boolean;\n  variant?: 'contained' | 'text' | 'outlined';\n}\n\nexport const SaveDashboardButton = ({\n  onSave,\n  isDisabled,\n  variant = 'contained',\n}: SaveDashboardButtonProps): ReactElement => {\n  const [isSavingDashboard, setSavingDashboard] = useState<boolean>(false);\n  const { dashboard, setDashboard } = useDashboard();\n  const { getSavedVariablesStatus, setVariableDefaultValues } = useVariableDefinitionActions();\n  const { isSavedVariableModified } = getSavedVariablesStatus();\n  const { timeRange, refreshInterval } = useTimeRange();\n  const { setEditMode } = useEditMode();\n  const { openSaveChangesConfirmationDialog, closeSaveChangesConfirmationDialog } = useSaveChangesConfirmationDialog();\n\n  const onSaveButtonClick = (): void => {\n    const isSavedDurationModified =\n      isRelativeTimeRange(timeRange) && dashboard.spec.duration !== timeRange.pastDuration;\n\n    const isSavedRefreshIntervalModified = dashboard.spec.refreshInterval !== refreshInterval;\n\n    // Save dashboard\n    // - if active timeRange from plugin-system is relative and different from currently saved\n    // - or if the saved variables are different from currently saved\n    if (isSavedDurationModified || isSavedVariableModified || isSavedRefreshIntervalModified) {\n      openSaveChangesConfirmationDialog({\n        onSaveChanges: (saveDefaultTimeRange, saveDefaultRefreshInterval, saveDefaultVariables) => {\n          if (isRelativeTimeRange(timeRange) && saveDefaultTimeRange) {\n            dashboard.spec.duration = timeRange.pastDuration;\n          }\n          if (saveDefaultVariables) {\n            const variables = setVariableDefaultValues();\n            dashboard.spec.variables = variables;\n          }\n          if (saveDefaultRefreshInterval && isSavedRefreshIntervalModified) {\n            dashboard.spec.refreshInterval = refreshInterval;\n          }\n          setDashboard(dashboard);\n          saveDashboard();\n        },\n        onCancel: () => {\n          closeSaveChangesConfirmationDialog();\n        },\n        isSavedDurationModified,\n        isSavedVariableModified,\n        isSavedRefreshIntervalModified,\n      });\n    } else {\n      saveDashboard();\n    }\n  };\n\n  const saveDashboard = async (): Promise<void> => {\n    if (onSave) {\n      try {\n        setSavingDashboard(true);\n        await onSave(dashboard);\n        closeSaveChangesConfirmationDialog();\n        setEditMode(false);\n      } catch (error) {\n        throw new Error(`An error occurred while saving the dashboard. ${error}`);\n      } finally {\n        setSavingDashboard(false);\n      }\n    } else {\n      setEditMode(false);\n    }\n  };\n\n  return (\n    <Button variant={variant} onClick={onSaveButtonClick} disabled={isDisabled || isSavingDashboard}>\n      Save\n    </Button>\n  );\n};\n"],"names":["useState","Button","isRelativeTimeRange","useTimeRange","useDashboard","useEditMode","useSaveChangesConfirmationDialog","useVariableDefinitionActions","SaveDashboardButton","onSave","isDisabled","variant","isSavingDashboard","setSavingDashboard","dashboard","setDashboard","getSavedVariablesStatus","setVariableDefaultValues","isSavedVariableModified","timeRange","refreshInterval","setEditMode","openSaveChangesConfirmationDialog","closeSaveChangesConfirmationDialog","onSaveButtonClick","isSavedDurationModified","spec","duration","pastDuration","isSavedRefreshIntervalModified","onSaveChanges","saveDefaultTimeRange","saveDefaultRefreshInterval","saveDefaultVariables","variables","saveDashboard","onCancel","error","Error","onClick","disabled"],"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,SAAuBA,QAAQ,QAAQ,QAAQ;AAC/C,SAASC,MAAM,QAAqB,gBAAgB;AACpD,SAASC,mBAAmB,QAAQ,mBAAmB;AACvD,SAASC,YAAY,QAAQ,4BAA4B;AACzD,SAEEC,YAAY,EACZC,WAAW,EACXC,gCAAgC,EAChCC,4BAA4B,QACvB,gBAAgB;AAQvB,OAAO,MAAMC,sBAAsB,CAAC,EAClCC,MAAM,EACNC,UAAU,EACVC,UAAU,WAAW,EACI;IACzB,MAAM,CAACC,mBAAmBC,mBAAmB,GAAGb,SAAkB;IAClE,MAAM,EAAEc,SAAS,EAAEC,YAAY,EAAE,GAAGX;IACpC,MAAM,EAAEY,uBAAuB,EAAEC,wBAAwB,EAAE,GAAGV;IAC9D,MAAM,EAAEW,uBAAuB,EAAE,GAAGF;IACpC,MAAM,EAAEG,SAAS,EAAEC,eAAe,EAAE,GAAGjB;IACvC,MAAM,EAAEkB,WAAW,EAAE,GAAGhB;IACxB,MAAM,EAAEiB,iCAAiC,EAAEC,kCAAkC,EAAE,GAAGjB;IAElF,MAAMkB,oBAAoB;QACxB,MAAMC,0BACJvB,oBAAoBiB,cAAcL,UAAUY,IAAI,CAACC,QAAQ,KAAKR,UAAUS,YAAY;QAEtF,MAAMC,iCAAiCf,UAAUY,IAAI,CAACN,eAAe,KAAKA;QAE1E,iBAAiB;QACjB,0FAA0F;QAC1F,iEAAiE;QACjE,IAAIK,2BAA2BP,2BAA2BW,gCAAgC;YACxFP,kCAAkC;gBAChCQ,eAAe,CAACC,sBAAsBC,4BAA4BC;oBAChE,IAAI/B,oBAAoBiB,cAAcY,sBAAsB;wBAC1DjB,UAAUY,IAAI,CAACC,QAAQ,GAAGR,UAAUS,YAAY;oBAClD;oBACA,IAAIK,sBAAsB;wBACxB,MAAMC,YAAYjB;wBAClBH,UAAUY,IAAI,CAACQ,SAAS,GAAGA;oBAC7B;oBACA,IAAIF,8BAA8BH,gCAAgC;wBAChEf,UAAUY,IAAI,CAACN,eAAe,GAAGA;oBACnC;oBACAL,aAAaD;oBACbqB;gBACF;gBACAC,UAAU;oBACRb;gBACF;gBACAE;gBACAP;gBACAW;YACF;QACF,OAAO;YACLM;QACF;IACF;IAEA,MAAMA,gBAAgB;QACpB,IAAI1B,QAAQ;YACV,IAAI;gBACFI,mBAAmB;gBACnB,MAAMJ,OAAOK;gBACbS;gBACAF,YAAY;YACd,EAAE,OAAOgB,OAAO;gBACd,MAAM,IAAIC,MAAM,CAAC,8CAA8C,EAAED,OAAO;YAC1E,SAAU;gBACRxB,mBAAmB;YACrB;QACF,OAAO;YACLQ,YAAY;QACd;IACF;IAEA,qBACE,KAACpB;QAAOU,SAASA;QAAS4B,SAASf;QAAmBgB,UAAU9B,cAAcE;kBAAmB;;AAIrG,EAAE"}

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":"AAaA,OAAO,EAAE,YAAY,EAAY,MAAM,OAAO,CAAC;AAC/C,OAAO,EAAU,WAAW,EAAE,MAAM,eAAe,CAAC;AAcpD,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,GAAG,YAAY,CAiDzC"}
+{"version":3,"file":"EditVariablesButton.d.ts","sourceRoot":"","sources":["../../../src/components/Variables/EditVariablesButton.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAY,MAAM,OAAO,CAAC;AAC/C,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,GAAG,YAAY,CAiDzC"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Variables/EditVariablesButton.tsx"],"sourcesContent":["// Copyright 2024 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { ReactElement, useState } from 'react';\nimport { Button, ButtonProps } from '@mui/material';\nimport PencilIcon from 'mdi-material-ui/PencilOutline';\nimport { Drawer, InfoTooltip } from '@perses-dev/components';\nimport { BuiltinVariableDefinition, VariableDefinition } from '@perses-dev/core';\nimport { useBuiltinVariableDefinitions } from '@perses-dev/plugin-system';\nimport { TOOLTIP_TEXT, editButtonStyle } from '../../constants';\nimport {\n  ExternalVariableDefinition,\n  useExternalVariableDefinitions,\n  useVariableDefinitionActions,\n  useVariableDefinitions,\n} 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): ReactElement {\n  const [isVariableEditorOpen, setIsVariableEditorOpen] = useState(false);\n  const variableDefinitions: VariableDefinition[] = useVariableDefinitions();\n  const externalVariableDefinitions: ExternalVariableDefinition[] = useExternalVariableDefinitions();\n  const builtinVariableDefinitions: BuiltinVariableDefinition[] = useBuiltinVariableDefinitions();\n  const { setVariableDefinitions } = useVariableDefinitionActions();\n\n  const openVariableEditor = (): void => {\n    setIsVariableEditorOpen(true);\n  };\n\n  const closeVariableEditor = (): void => {\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={editButtonStyle}\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          externalVariableDefinitions={externalVariableDefinitions}\n          builtinVariableDefinitions={builtinVariableDefinitions}\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","useBuiltinVariableDefinitions","TOOLTIP_TEXT","editButtonStyle","useExternalVariableDefinitions","useVariableDefinitionActions","useVariableDefinitions","VariableEditor","EditVariablesButton","variant","label","color","fullWidth","isVariableEditorOpen","setIsVariableEditorOpen","variableDefinitions","externalVariableDefinitions","builtinVariableDefinitions","setVariableDefinitions","openVariableEditor","closeVariableEditor","description","editVariables","startIcon","onClick","aria-label","sx","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,SAAuBA,QAAQ,QAAQ,QAAQ;AAC/C,SAASC,MAAM,QAAqB,gBAAgB;AACpD,OAAOC,gBAAgB,gCAAgC;AACvD,SAASC,MAAM,EAAEC,WAAW,QAAQ,yBAAyB;AAE7D,SAASC,6BAA6B,QAAQ,4BAA4B;AAC1E,SAASC,YAAY,EAAEC,eAAe,QAAQ,kBAAkB;AAChE,SAEEC,8BAA8B,EAC9BC,4BAA4B,EAC5BC,sBAAsB,QACjB,gBAAgB;AACvB,SAASC,cAAc,QAAQ,mBAAmB;AAmBlD,OAAO,SAASC,oBAAoB,EAClCC,UAAU,MAAM,EAChBC,QAAQ,WAAW,EACnBC,QAAQ,SAAS,EACjBC,SAAS,EACgB;IACzB,MAAM,CAACC,sBAAsBC,wBAAwB,GAAGlB,SAAS;IACjE,MAAMmB,sBAA4CT;IAClD,MAAMU,8BAA4DZ;IAClE,MAAMa,6BAA0DhB;IAChE,MAAM,EAAEiB,sBAAsB,EAAE,GAAGb;IAEnC,MAAMc,qBAAqB;QACzBL,wBAAwB;IAC1B;IAEA,MAAMM,sBAAsB;QAC1BN,wBAAwB;IAC1B;IAEA,qBACE;;0BACE,KAACd;gBAAYqB,aAAanB,aAAaoB,aAAa;0BAClD,cAAA,KAACzB;oBACC0B,yBAAW,KAACzB;oBACZ0B,SAASL;oBACTM,cAAYvB,aAAaoB,aAAa;oBACtCb,SAASA;oBACTE,OAAOA;oBACPC,WAAWA;oBACXc,IAAIvB;8BAEHO;;;0BAGL,KAACX;gBACC4B,QAAQd;gBACRe,SAASR;gBACTS,YAAY;oBAAEH,IAAI;wBAAEI,OAAO;oBAAM;gBAAE;gBACnCC,eAAY;0BAEZ,cAAA,KAACxB;oBACCQ,qBAAqBA;oBACrBC,6BAA6BA;oBAC7BC,4BAA4BA;oBAC5Be,UAAUZ;oBACVa,UAAU,CAACC;wBACThB,uBAAuBgB;wBACvBpB,wBAAwB;oBAC1B;;;;;AAKV"}
+{"version":3,"sources":["../../../src/components/Variables/EditVariablesButton.tsx"],"sourcesContent":["// Copyright 2024 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { ReactElement, useState } from 'react';\nimport { Button, ButtonProps } from '@mui/material';\nimport PencilIcon from 'mdi-material-ui/PencilOutline';\nimport { Drawer, InfoTooltip } from '@perses-dev/components';\nimport { BuiltinVariableDefinition, VariableDefinition, ExternalVariableDefinition } from '@perses-dev/core';\nimport { useBuiltinVariableDefinitions } from '@perses-dev/plugin-system';\nimport { TOOLTIP_TEXT, editButtonStyle } from '../../constants';\nimport { useExternalVariableDefinitions, useVariableDefinitionActions, useVariableDefinitions } 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): ReactElement {\n  const [isVariableEditorOpen, setIsVariableEditorOpen] = useState(false);\n  const variableDefinitions: VariableDefinition[] = useVariableDefinitions();\n  const externalVariableDefinitions: ExternalVariableDefinition[] = useExternalVariableDefinitions();\n  const builtinVariableDefinitions: BuiltinVariableDefinition[] = useBuiltinVariableDefinitions();\n  const { setVariableDefinitions } = useVariableDefinitionActions();\n\n  const openVariableEditor = (): void => {\n    setIsVariableEditorOpen(true);\n  };\n\n  const closeVariableEditor = (): void => {\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={editButtonStyle}\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          externalVariableDefinitions={externalVariableDefinitions}\n          builtinVariableDefinitions={builtinVariableDefinitions}\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","useBuiltinVariableDefinitions","TOOLTIP_TEXT","editButtonStyle","useExternalVariableDefinitions","useVariableDefinitionActions","useVariableDefinitions","VariableEditor","EditVariablesButton","variant","label","color","fullWidth","isVariableEditorOpen","setIsVariableEditorOpen","variableDefinitions","externalVariableDefinitions","builtinVariableDefinitions","setVariableDefinitions","openVariableEditor","closeVariableEditor","description","editVariables","startIcon","onClick","aria-label","sx","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,SAAuBA,QAAQ,QAAQ,QAAQ;AAC/C,SAASC,MAAM,QAAqB,gBAAgB;AACpD,OAAOC,gBAAgB,gCAAgC;AACvD,SAASC,MAAM,EAAEC,WAAW,QAAQ,yBAAyB;AAE7D,SAASC,6BAA6B,QAAQ,4BAA4B;AAC1E,SAASC,YAAY,EAAEC,eAAe,QAAQ,kBAAkB;AAChE,SAASC,8BAA8B,EAAEC,4BAA4B,EAAEC,sBAAsB,QAAQ,gBAAgB;AACrH,SAASC,cAAc,QAAQ,mBAAmB;AAmBlD,OAAO,SAASC,oBAAoB,EAClCC,UAAU,MAAM,EAChBC,QAAQ,WAAW,EACnBC,QAAQ,SAAS,EACjBC,SAAS,EACgB;IACzB,MAAM,CAACC,sBAAsBC,wBAAwB,GAAGlB,SAAS;IACjE,MAAMmB,sBAA4CT;IAClD,MAAMU,8BAA4DZ;IAClE,MAAMa,6BAA0DhB;IAChE,MAAM,EAAEiB,sBAAsB,EAAE,GAAGb;IAEnC,MAAMc,qBAAqB;QACzBL,wBAAwB;IAC1B;IAEA,MAAMM,sBAAsB;QAC1BN,wBAAwB;IAC1B;IAEA,qBACE;;0BACE,KAACd;gBAAYqB,aAAanB,aAAaoB,aAAa;0BAClD,cAAA,KAACzB;oBACC0B,yBAAW,KAACzB;oBACZ0B,SAASL;oBACTM,cAAYvB,aAAaoB,aAAa;oBACtCb,SAASA;oBACTE,OAAOA;oBACPC,WAAWA;oBACXc,IAAIvB;8BAEHO;;;0BAGL,KAACX;gBACC4B,QAAQd;gBACRe,SAASR;gBACTS,YAAY;oBAAEH,IAAI;wBAAEI,OAAO;oBAAM;gBAAE;gBACnCC,eAAY;0BAEZ,cAAA,KAACxB;oBACCQ,qBAAqBA;oBACrBC,6BAA6BA;oBAC7BC,4BAA4BA;oBAC5Be,UAAUZ;oBACVa,UAAU,CAACC;wBACThB,uBAAuBgB;wBACvBpB,wBAAwB;oBAC1B;;;;;AAKV"}

package/dist/components/Variables/Variable.js

@@ -10,9 +10,10 @@
 // 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 { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import { TextField, Popper, Checkbox, Autocomplete, createFilterOptions } from '@mui/material';
+import { TextField, Popper, Checkbox, Autocomplete, createFilterOptions, Chip, Box } from '@mui/material';
 import { DEFAULT_ALL_VALUE } from '@perses-dev/core';
 import { SORT_METHODS, useListVariablePluginValues } from '@perses-dev/plugin-system';
 import { useVariableDefinitionAndState, useVariableDefinitionActions } from '../../context';
@@ -320,6 +321,40 @@ function ListVariable({ name, source }) {
                         option.label
                     ]
                 }, key);
+            },
+            renderTags: (value, getTagProps, ownerState)=>{
+                // When focused, if there are too much value selected, it will use all screen place. Putting limit to 200px (~6 lines of chips)
+                if (ownerState.focused) {
+                    return /*#__PURE__*/ _jsx(Box, {
+                        sx: {
+                            maxHeight: 200,
+                            overflowY: 'auto'
+                        },
+                        children: value.map((option, index)=>/*#__PURE__*/ _createElement(Chip, {
+                                ...getTagProps({
+                                    index
+                                }),
+                                key: index,
+                                label: option.label,
+                                size: "small"
+                            }))
+                    });
+                }
+                const limitTags = ownerState.limitTags;
+                const numTags = value.length;
+                return /*#__PURE__*/ _jsxs(_Fragment, {
+                    children: [
+                        value.slice(0, limitTags).map((option, index)=>/*#__PURE__*/ _createElement(Chip, {
+                                ...getTagProps({
+                                    index
+                                }),
+                                key: index,
+                                label: option.label,
+                                size: "small"
+                            })),
+                        limitTags && numTags > limitTags && ` +${numTags - limitTags}`
+                    ]
+                });
             }
         });
     }, [