@perses-dev/dashboards 0.51.0-beta.1 → 0.51.0-rc.1

package/dist/cjs/components/GridLayout/GridLayout.js

@@ -43,19 +43,15 @@ function GridLayout(props) {
     const viewPanelItemId = (0, _context.useViewPanelGroup)();
     const hasViewPanel = viewPanelItemId?.panelGroupId === panelGroupId; // current panelGroup contains the panel extended?
     const itemLayoutViewed = viewPanelItemId?.panelGroupItemLayoutId;
-    // If there is a panel in view mode, we should hide the grid if the panel is not in the current group.
-    const isGridDisplayed = (0, _react.useMemo)(()=>{
-        if (viewPanelItemId === undefined) {
-            return true;
-        }
+    (0, _react.useEffect)(()=>{
         if (hasViewPanel) {
             setIsOpen(true);
         }
-        return hasViewPanel;
     }, [
-        hasViewPanel,
-        viewPanelItemId
+        hasViewPanel
     ]);
+    // If there is a panel in view mode, we should hide the grid if the panel is not in the current group.
+    const isGridDisplayed = viewPanelItemId === undefined || hasViewPanel;
     // Item layout is override if there is a panel in view mode
     const itemLayouts = (0, _react.useMemo)(()=>{
         if (itemLayoutViewed) {

package/dist/cjs/components/Panel/PanelContent.js

@@ -28,7 +28,7 @@ const _PanelPluginLoader = require("./PanelPluginLoader");
 function PanelContent(props) {
     const { panelPluginKind, definition, queryResults, spec, contentDimensions } = props;
     const { data: plugin, isLoading: isPanelLoading } = (0, _pluginsystem.usePlugin)('Panel', panelPluginKind, {
-        throwOnError: true
+        useErrorBoundary: true
     });
     // Show fullsize skeleton if the panel plugin is loading.
     if (isPanelLoading) {

package/dist/cjs/components/Panel/PanelPluginLoader.js

@@ -26,7 +26,7 @@ const _material = require("@mui/material");
 function PanelPluginLoader(props) {
     const { kind, spec, contentDimensions, definition, queryResults } = props;
     const { data: plugin, isLoading: isPanelLoading } = (0, _pluginsystem.usePlugin)('Panel', kind, {
-        throwOnError: true
+        useErrorBoundary: true
     });
     const PanelComponent = plugin?.PanelComponent;
     const supportedQueryTypes = plugin?.supportedQueryTypes || [];

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

@@ -34,8 +34,8 @@ function PanelPreview({ panelDefinition }) {
         width = boxRef.current.getBoundingClientRect().width;
     }
     const suggestedStepMs = (0, _pluginsystem.useSuggestedStepMs)(width);
-    const { data: plugin, isPending } = (0, _pluginsystem.usePlugin)('Panel', panelDefinition.spec.plugin.kind);
-    if (isPending) {
+    const { data: plugin, isLoading } = (0, _pluginsystem.usePlugin)('Panel', panelDefinition.spec.plugin.kind);
+    if (isLoading) {
         return null;
     }
     if (panelDefinition.spec.plugin.kind === '') {

package/dist/cjs/components/QuerySummaryTable/QuerySummaryTable.js

@@ -34,7 +34,7 @@ function QuerySummaryTable(props) {
     // for displaying a summary of recent query results
     const queryClient = (0, _reactquery.useQueryClient)();
     const queries = queryClient.getQueryCache().findAll();
-    const activeQueries = queries.filter((query)=>query.state.status === 'pending');
+    const activeQueries = queries.filter((query)=>query.state.status === 'loading');
     const completedQueries = queries.filter((query)=>query.state.status === 'success');
     const querySummary = (0, _pluginsystem.useActiveTimeSeriesQueries)();
     if (datasourceClient.isLoading === true) {

package/dist/cjs/views/ViewDashboard/DashboardApp.js

@@ -105,6 +105,7 @@ const DashboardApp = (props)=>{
                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ChartsProvider, {
                         chartsTheme: chartsTheme,
                         enablePinning: false,
+                        enableSyncGrouping: false,
                         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components1.PanelDrawer, {})
                     }),
                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_components1.PanelGroupDialog, {}),

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

@@ -1 +1 @@
-{"version":3,"file":"GridLayout.d.ts","sourceRoot":"","sources":["../../../src/components/GridLayout/GridLayout.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAE,YAAY,EAAqB,MAAM,OAAO,CAAC;AAIxD,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAUhD,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAOxC,MAAM,WAAW,eAAe;IAC9B,YAAY,EAAE,YAAY,CAAC;IAC3B,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED;;GAEG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,GAAG,YAAY,CAqI/D"}
+{"version":3,"file":"GridLayout.d.ts","sourceRoot":"","sources":["../../../src/components/GridLayout/GridLayout.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAE,YAAY,EAAgC,MAAM,OAAO,CAAC;AAInE,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAUhD,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAOxC,MAAM,WAAW,eAAe;IAC9B,YAAY,EAAE,YAAY,CAAC;IAC3B,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED;;GAEG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,GAAG,YAAY,CAmI/D"}

package/dist/components/GridLayout/GridLayout.js

@@ -11,7 +11,7 @@
 // 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 { useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { Responsive, WidthProvider } from 'react-grid-layout';
 import { Collapse, useTheme } from '@mui/material';
 import { ErrorAlert, ErrorBoundary } from '@perses-dev/components';
@@ -35,19 +35,15 @@ const ROW_HEIGHT = 30;
     const viewPanelItemId = useViewPanelGroup();
     const hasViewPanel = viewPanelItemId?.panelGroupId === panelGroupId; // current panelGroup contains the panel extended?
     const itemLayoutViewed = viewPanelItemId?.panelGroupItemLayoutId;
-    // If there is a panel in view mode, we should hide the grid if the panel is not in the current group.
-    const isGridDisplayed = useMemo(()=>{
-        if (viewPanelItemId === undefined) {
-            return true;
-        }
+    useEffect(()=>{
         if (hasViewPanel) {
             setIsOpen(true);
         }
-        return hasViewPanel;
     }, [
-        hasViewPanel,
-        viewPanelItemId
+        hasViewPanel
     ]);
+    // If there is a panel in view mode, we should hide the grid if the panel is not in the current group.
+    const isGridDisplayed = viewPanelItemId === undefined || hasViewPanel;
     // Item layout is override if there is a panel in view mode
     const itemLayouts = useMemo(()=>{
         if (itemLayoutViewed) {

package/dist/components/GridLayout/GridLayout.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/GridLayout/GridLayout.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.\nimport { ReactElement, useMemo, useState } from 'react';\nimport { Responsive, WidthProvider, Layouts, Layout } from 'react-grid-layout';\nimport { Collapse, useTheme } from '@mui/material';\nimport { ErrorAlert, ErrorBoundary } from '@perses-dev/components';\nimport { PanelGroupId } from '@perses-dev/core';\nimport {\n  useEditMode,\n  usePanelGroup,\n  usePanelGroupActions,\n  PanelGroupItemLayout,\n  useViewPanelGroup,\n  PanelGroupDefinition,\n} from '../../context';\nimport { GRID_LAYOUT_COLS, GRID_LAYOUT_SMALL_BREAKPOINT } from '../../constants';\nimport { PanelOptions } from '../Panel';\nimport { GridTitle } from './GridTitle';\nimport { GridItemContent } from './GridItemContent';\nimport { GridContainer } from './GridContainer';\nconst DEFAULT_MARGIN = 10;\nconst ROW_HEIGHT = 30;\n\nexport interface GridLayoutProps {\n  panelGroupId: PanelGroupId;\n  panelOptions?: PanelOptions;\n  panelFullHeight?: number;\n}\n\n/**\n * Layout component that arranges children in a Grid based on the definition.\n */\nexport function GridLayout(props: GridLayoutProps): ReactElement {\n  const { panelGroupId, panelOptions, panelFullHeight } = props;\n  const theme = useTheme();\n  const groupDefinition: PanelGroupDefinition = usePanelGroup(panelGroupId);\n  const { updatePanelGroupLayouts } = usePanelGroupActions(panelGroupId);\n\n  const [isOpen, setIsOpen] = useState(!groupDefinition.isCollapsed);\n  const { isEditMode } = useEditMode();\n\n  const [gridColWidth, setGridColWidth] = useState(0);\n\n  const viewPanelItemId = useViewPanelGroup();\n  const hasViewPanel = viewPanelItemId?.panelGroupId === panelGroupId; // current panelGroup contains the panel extended?\n  const itemLayoutViewed = viewPanelItemId?.panelGroupItemLayoutId;\n\n  // If there is a panel in view mode, we should hide the grid if the panel is not in the current group.\n  const isGridDisplayed = useMemo(() => {\n    if (viewPanelItemId === undefined) {\n      return true;\n    }\n    if (hasViewPanel) {\n      setIsOpen(true);\n    }\n    return hasViewPanel;\n  }, [hasViewPanel, viewPanelItemId]);\n\n  // Item layout is override if there is a panel in view mode\n  const itemLayouts: PanelGroupItemLayout[] = useMemo(() => {\n    if (itemLayoutViewed) {\n      return groupDefinition.itemLayouts.map((itemLayout) => {\n        if (itemLayout.i === itemLayoutViewed) {\n          const rowTitleHeight = 40 + 8; // 40 is the height of the row title and 8 is the margin height\n          return {\n            h: Math.round(((panelFullHeight ?? window.innerHeight) - rowTitleHeight) / (ROW_HEIGHT + DEFAULT_MARGIN)), // Viewed panel should take the full height remaining\n            i: itemLayoutViewed,\n            w: 48,\n            x: 0,\n            y: 0,\n          } as PanelGroupItemLayout;\n        }\n        return itemLayout;\n      });\n    }\n    return groupDefinition.itemLayouts;\n  }, [groupDefinition.itemLayouts, itemLayoutViewed, panelFullHeight]);\n\n  const handleLayoutChange = (currentLayout: Layout[], allLayouts: Layouts): void => {\n    // Using the value from `allLayouts` instead of `currentLayout` because of\n    // a bug in react-layout-grid where `currentLayout` does not adjust properly\n    // when going to a smaller breakpoint and then back to a larger breakpoint.\n    // https://github.com/react-grid-layout/react-grid-layout/issues/1663\n    const smallLayout = allLayouts[GRID_LAYOUT_SMALL_BREAKPOINT];\n    if (smallLayout && !hasViewPanel) {\n      updatePanelGroupLayouts(smallLayout);\n    }\n  };\n\n  /**\n   * Calculate the column width so we can determine the width of each panel for suggested step ms\n   * https://github.com/react-grid-layout/react-grid-layout/blob/master/lib/calculateUtils.js#L14-L35\n   */\n  const handleWidthChange = (\n    containerWidth: number,\n    margin: [number, number],\n    cols: number,\n    containerPadding: [number, number]\n  ): void => {\n    const marginX = margin[0];\n    const marginWidth = marginX * (cols - 1);\n    const containerPaddingWidth = containerPadding[0] * 2;\n    // exclude margin and padding from total width\n    setGridColWidth((containerWidth - marginWidth - containerPaddingWidth) / cols);\n  };\n\n  // https://github.com/react-grid-layout/react-grid-layout?tab=readme-ov-file#react-hooks-performance\n  const ResponsiveGridLayout = useMemo(() => WidthProvider(Responsive), []);\n\n  return (\n    <GridContainer\n      sx={{\n        display: isGridDisplayed ? 'block' : 'none',\n        height: itemLayoutViewed ? `${panelFullHeight}px` : 'unset',\n        overflow: itemLayoutViewed ? 'hidden' : 'unset',\n      }}\n    >\n      {groupDefinition.title !== undefined && (\n        <GridTitle\n          panelGroupId={panelGroupId}\n          title={groupDefinition.title}\n          collapse={\n            groupDefinition.isCollapsed === undefined\n              ? undefined\n              : { isOpen, onToggleOpen: () => setIsOpen((current) => !current) }\n          }\n        />\n      )}\n      <Collapse in={isOpen} unmountOnExit appear={false} data-testid=\"panel-group-content\">\n        <ResponsiveGridLayout\n          className=\"layout\"\n          breakpoints={{ sm: theme.breakpoints.values.sm, xxs: 0 }}\n          cols={GRID_LAYOUT_COLS}\n          rowHeight={ROW_HEIGHT}\n          draggableHandle=\".drag-handle\"\n          resizeHandles={['se']}\n          isDraggable={isEditMode && !hasViewPanel}\n          isResizable={isEditMode && !hasViewPanel}\n          margin={[DEFAULT_MARGIN, DEFAULT_MARGIN]}\n          containerPadding={[0, 10]}\n          layouts={{ [GRID_LAYOUT_SMALL_BREAKPOINT]: itemLayouts }}\n          onLayoutChange={handleLayoutChange}\n          onWidthChange={handleWidthChange}\n          allowOverlap={hasViewPanel} // Enabling overlap when viewing a specific panel because panel in front of the viewed panel will add empty spaces (empty row height)\n        >\n          {itemLayouts.map(({ i, w }) => (\n            <div\n              key={i}\n              style={{\n                display: itemLayoutViewed !== undefined ? (itemLayoutViewed === i ? 'unset' : 'none') : 'unset',\n              }}\n            >\n              <ErrorBoundary FallbackComponent={ErrorAlert}>\n                <GridItemContent\n                  panelOptions={panelOptions}\n                  panelGroupItemId={{ panelGroupId, panelGroupItemLayoutId: i }}\n                  width={calculateGridItemWidth(w, gridColWidth)}\n                />\n              </ErrorBoundary>\n            </div>\n          ))}\n        </ResponsiveGridLayout>\n      </Collapse>\n    </GridContainer>\n  );\n}\n\n/**\n * Calculates grid item width\n * @param w number of columns the grid item spans\n * @param colWidth the width of each column in px\n * @returns grid item's width in px\n * https://github.com/react-grid-layout/react-grid-layout/blob/master/lib/calculateUtils.js#L14-L35\n */\nconst calculateGridItemWidth = (w: number, colWidth: number): number => {\n  // 0 * Infinity === NaN, which causes problems with resize contraints\n  if (!Number.isFinite(w)) return w;\n  return Math.round(colWidth * w + Math.max(0, w - 1) * DEFAULT_MARGIN);\n};\n"],"names":["useMemo","useState","Responsive","WidthProvider","Collapse","useTheme","ErrorAlert","ErrorBoundary","useEditMode","usePanelGroup","usePanelGroupActions","useViewPanelGroup","GRID_LAYOUT_COLS","GRID_LAYOUT_SMALL_BREAKPOINT","GridTitle","GridItemContent","GridContainer","DEFAULT_MARGIN","ROW_HEIGHT","GridLayout","props","panelGroupId","panelOptions","panelFullHeight","theme","groupDefinition","updatePanelGroupLayouts","isOpen","setIsOpen","isCollapsed","isEditMode","gridColWidth","setGridColWidth","viewPanelItemId","hasViewPanel","itemLayoutViewed","panelGroupItemLayoutId","isGridDisplayed","undefined","itemLayouts","map","itemLayout","i","rowTitleHeight","h","Math","round","window","innerHeight","w","x","y","handleLayoutChange","currentLayout","allLayouts","smallLayout","handleWidthChange","containerWidth","margin","cols","containerPadding","marginX","marginWidth","containerPaddingWidth","ResponsiveGridLayout","sx","display","height","overflow","title","collapse","onToggleOpen","current","in","unmountOnExit","appear","data-testid","className","breakpoints","sm","values","xxs","rowHeight","draggableHandle","resizeHandles","isDraggable","isResizable","layouts","onLayoutChange","onWidthChange","allowOverlap","div","style","FallbackComponent","panelGroupItemId","width","calculateGridItemWidth","colWidth","Number","isFinite","max"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/GridLayout/GridLayout.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.\nimport { ReactElement, useEffect, useMemo, useState } from 'react';\nimport { Responsive, WidthProvider, Layouts, Layout } from 'react-grid-layout';\nimport { Collapse, useTheme } from '@mui/material';\nimport { ErrorAlert, ErrorBoundary } from '@perses-dev/components';\nimport { PanelGroupId } from '@perses-dev/core';\nimport {\n  useEditMode,\n  usePanelGroup,\n  usePanelGroupActions,\n  PanelGroupItemLayout,\n  useViewPanelGroup,\n  PanelGroupDefinition,\n} from '../../context';\nimport { GRID_LAYOUT_COLS, GRID_LAYOUT_SMALL_BREAKPOINT } from '../../constants';\nimport { PanelOptions } from '../Panel';\nimport { GridTitle } from './GridTitle';\nimport { GridItemContent } from './GridItemContent';\nimport { GridContainer } from './GridContainer';\nconst DEFAULT_MARGIN = 10;\nconst ROW_HEIGHT = 30;\n\nexport interface GridLayoutProps {\n  panelGroupId: PanelGroupId;\n  panelOptions?: PanelOptions;\n  panelFullHeight?: number;\n}\n\n/**\n * Layout component that arranges children in a Grid based on the definition.\n */\nexport function GridLayout(props: GridLayoutProps): ReactElement {\n  const { panelGroupId, panelOptions, panelFullHeight } = props;\n  const theme = useTheme();\n  const groupDefinition: PanelGroupDefinition = usePanelGroup(panelGroupId);\n  const { updatePanelGroupLayouts } = usePanelGroupActions(panelGroupId);\n\n  const [isOpen, setIsOpen] = useState(!groupDefinition.isCollapsed);\n  const { isEditMode } = useEditMode();\n\n  const [gridColWidth, setGridColWidth] = useState(0);\n\n  const viewPanelItemId = useViewPanelGroup();\n  const hasViewPanel = viewPanelItemId?.panelGroupId === panelGroupId; // current panelGroup contains the panel extended?\n  const itemLayoutViewed = viewPanelItemId?.panelGroupItemLayoutId;\n\n  useEffect(() => {\n    if (hasViewPanel) {\n      setIsOpen(true);\n    }\n  }, [hasViewPanel]);\n\n  // If there is a panel in view mode, we should hide the grid if the panel is not in the current group.\n  const isGridDisplayed = viewPanelItemId === undefined || hasViewPanel;\n\n  // Item layout is override if there is a panel in view mode\n  const itemLayouts: PanelGroupItemLayout[] = useMemo(() => {\n    if (itemLayoutViewed) {\n      return groupDefinition.itemLayouts.map((itemLayout) => {\n        if (itemLayout.i === itemLayoutViewed) {\n          const rowTitleHeight = 40 + 8; // 40 is the height of the row title and 8 is the margin height\n          return {\n            h: Math.round(((panelFullHeight ?? window.innerHeight) - rowTitleHeight) / (ROW_HEIGHT + DEFAULT_MARGIN)), // Viewed panel should take the full height remaining\n            i: itemLayoutViewed,\n            w: 48,\n            x: 0,\n            y: 0,\n          } as PanelGroupItemLayout;\n        }\n        return itemLayout;\n      });\n    }\n    return groupDefinition.itemLayouts;\n  }, [groupDefinition.itemLayouts, itemLayoutViewed, panelFullHeight]);\n\n  const handleLayoutChange = (currentLayout: Layout[], allLayouts: Layouts): void => {\n    // Using the value from `allLayouts` instead of `currentLayout` because of\n    // a bug in react-layout-grid where `currentLayout` does not adjust properly\n    // when going to a smaller breakpoint and then back to a larger breakpoint.\n    // https://github.com/react-grid-layout/react-grid-layout/issues/1663\n    const smallLayout = allLayouts[GRID_LAYOUT_SMALL_BREAKPOINT];\n    if (smallLayout && !hasViewPanel) {\n      updatePanelGroupLayouts(smallLayout);\n    }\n  };\n\n  /**\n   * Calculate the column width so we can determine the width of each panel for suggested step ms\n   * https://github.com/react-grid-layout/react-grid-layout/blob/master/lib/calculateUtils.js#L14-L35\n   */\n  const handleWidthChange = (\n    containerWidth: number,\n    margin: [number, number],\n    cols: number,\n    containerPadding: [number, number]\n  ): void => {\n    const marginX = margin[0];\n    const marginWidth = marginX * (cols - 1);\n    const containerPaddingWidth = containerPadding[0] * 2;\n    // exclude margin and padding from total width\n    setGridColWidth((containerWidth - marginWidth - containerPaddingWidth) / cols);\n  };\n\n  // https://github.com/react-grid-layout/react-grid-layout?tab=readme-ov-file#react-hooks-performance\n  const ResponsiveGridLayout = useMemo(() => WidthProvider(Responsive), []);\n\n  return (\n    <GridContainer\n      sx={{\n        display: isGridDisplayed ? 'block' : 'none',\n        height: itemLayoutViewed ? `${panelFullHeight}px` : 'unset',\n        overflow: itemLayoutViewed ? 'hidden' : 'unset',\n      }}\n    >\n      {groupDefinition.title !== undefined && (\n        <GridTitle\n          panelGroupId={panelGroupId}\n          title={groupDefinition.title}\n          collapse={\n            groupDefinition.isCollapsed === undefined\n              ? undefined\n              : { isOpen, onToggleOpen: () => setIsOpen((current) => !current) }\n          }\n        />\n      )}\n      <Collapse in={isOpen} unmountOnExit appear={false} data-testid=\"panel-group-content\">\n        <ResponsiveGridLayout\n          className=\"layout\"\n          breakpoints={{ sm: theme.breakpoints.values.sm, xxs: 0 }}\n          cols={GRID_LAYOUT_COLS}\n          rowHeight={ROW_HEIGHT}\n          draggableHandle=\".drag-handle\"\n          resizeHandles={['se']}\n          isDraggable={isEditMode && !hasViewPanel}\n          isResizable={isEditMode && !hasViewPanel}\n          margin={[DEFAULT_MARGIN, DEFAULT_MARGIN]}\n          containerPadding={[0, 10]}\n          layouts={{ [GRID_LAYOUT_SMALL_BREAKPOINT]: itemLayouts }}\n          onLayoutChange={handleLayoutChange}\n          onWidthChange={handleWidthChange}\n          allowOverlap={hasViewPanel} // Enabling overlap when viewing a specific panel because panel in front of the viewed panel will add empty spaces (empty row height)\n        >\n          {itemLayouts.map(({ i, w }) => (\n            <div\n              key={i}\n              style={{\n                display: itemLayoutViewed !== undefined ? (itemLayoutViewed === i ? 'unset' : 'none') : 'unset',\n              }}\n            >\n              <ErrorBoundary FallbackComponent={ErrorAlert}>\n                <GridItemContent\n                  panelOptions={panelOptions}\n                  panelGroupItemId={{ panelGroupId, panelGroupItemLayoutId: i }}\n                  width={calculateGridItemWidth(w, gridColWidth)}\n                />\n              </ErrorBoundary>\n            </div>\n          ))}\n        </ResponsiveGridLayout>\n      </Collapse>\n    </GridContainer>\n  );\n}\n\n/**\n * Calculates grid item width\n * @param w number of columns the grid item spans\n * @param colWidth the width of each column in px\n * @returns grid item's width in px\n * https://github.com/react-grid-layout/react-grid-layout/blob/master/lib/calculateUtils.js#L14-L35\n */\nconst calculateGridItemWidth = (w: number, colWidth: number): number => {\n  // 0 * Infinity === NaN, which causes problems with resize contraints\n  if (!Number.isFinite(w)) return w;\n  return Math.round(colWidth * w + Math.max(0, w - 1) * DEFAULT_MARGIN);\n};\n"],"names":["useEffect","useMemo","useState","Responsive","WidthProvider","Collapse","useTheme","ErrorAlert","ErrorBoundary","useEditMode","usePanelGroup","usePanelGroupActions","useViewPanelGroup","GRID_LAYOUT_COLS","GRID_LAYOUT_SMALL_BREAKPOINT","GridTitle","GridItemContent","GridContainer","DEFAULT_MARGIN","ROW_HEIGHT","GridLayout","props","panelGroupId","panelOptions","panelFullHeight","theme","groupDefinition","updatePanelGroupLayouts","isOpen","setIsOpen","isCollapsed","isEditMode","gridColWidth","setGridColWidth","viewPanelItemId","hasViewPanel","itemLayoutViewed","panelGroupItemLayoutId","isGridDisplayed","undefined","itemLayouts","map","itemLayout","i","rowTitleHeight","h","Math","round","window","innerHeight","w","x","y","handleLayoutChange","currentLayout","allLayouts","smallLayout","handleWidthChange","containerWidth","margin","cols","containerPadding","marginX","marginWidth","containerPaddingWidth","ResponsiveGridLayout","sx","display","height","overflow","title","collapse","onToggleOpen","current","in","unmountOnExit","appear","data-testid","className","breakpoints","sm","values","xxs","rowHeight","draggableHandle","resizeHandles","isDraggable","isResizable","layouts","onLayoutChange","onWidthChange","allowOverlap","div","style","FallbackComponent","panelGroupItemId","width","calculateGridItemWidth","colWidth","Number","isFinite","max"],"mappings":"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"}

package/dist/components/Panel/PanelContent.js

@@ -21,7 +21,7 @@ import { PanelPluginLoader } from './PanelPluginLoader';
  */ export function PanelContent(props) {
     const { panelPluginKind, definition, queryResults, spec, contentDimensions } = props;
     const { data: plugin, isLoading: isPanelLoading } = usePlugin('Panel', panelPluginKind, {
-        throwOnError: true
+        useErrorBoundary: true
     });
     // Show fullsize skeleton if the panel plugin is loading.
     if (isPanelLoading) {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Panel/PanelContent.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 { usePlugin, PanelProps, QueryData, PanelPlugin } from '@perses-dev/plugin-system';\nimport { UnknownSpec, PanelDefinition, QueryDataType } from '@perses-dev/core';\nimport { ReactElement } from 'react';\nimport { LoadingOverlay } from '@perses-dev/components';\nimport { Skeleton } from '@mui/material';\nimport { PanelPluginLoader } from './PanelPluginLoader';\n\nexport interface PanelContentProps extends Omit<PanelProps<UnknownSpec>, 'queryResults'> {\n  panelPluginKind: string;\n  definition?: PanelDefinition<UnknownSpec>;\n  queryResults: QueryData[];\n}\n\n/**\n * Based on the status of the queries (loading, error or data available), this component renders a\n * loading overlay, throws an error, or renders the panel content.\n */\nexport function PanelContent(props: PanelContentProps): ReactElement {\n  const { panelPluginKind, definition, queryResults, spec, contentDimensions } = props;\n  const { data: plugin, isLoading: isPanelLoading } = usePlugin('Panel', panelPluginKind, { throwOnError: true });\n\n  // Show fullsize skeleton if the panel plugin is loading.\n  if (isPanelLoading) {\n    return (\n      <Skeleton\n        variant=\"rectangular\"\n        width={contentDimensions?.width}\n        height={contentDimensions?.height}\n        aria-label=\"Loading...\"\n      />\n    );\n  }\n\n  // Render the panel if any query has data, or the panel doesn't have a query attached (for example MarkdownPanel).\n  // Loading indicator or errors of other queries are shown in the panel header.\n  const queryResultsWithData = queryResults.flatMap((q) =>\n    q.data ? [{ data: q.data, definition: q.definition }] : []\n  );\n  if (queryResultsWithData.length > 0 || queryResults.length === 0) {\n    return (\n      <PanelPluginLoader\n        kind={panelPluginKind}\n        spec={spec}\n        contentDimensions={contentDimensions}\n        definition={definition}\n        queryResults={queryResultsWithData}\n      />\n    );\n  }\n\n  // No query has data, show loading overlay if any query is fetching data.\n  if (queryResults.some((q) => q.isFetching)) {\n    return <PanelLoading plugin={plugin} spec={spec} definition={definition} contentDimensions={contentDimensions} />;\n  }\n\n  // No query has data or is loading, show the error if any query has an error.\n  // The error will be catched in <ErrorBoundary> of <Panel>.\n  const queryError = queryResults.find((q) => q.error);\n  if (queryError) {\n    throw queryError.error;\n  }\n\n  // At this point, one or more queries are defined, but no query has data, is loading, or has an error.\n  // This can happen if all queries are disabled (e.g. dependent dashboard variables are loading, or they are not in the viewport of the browser).\n  // Most likely, some query will be enabled later. Render the panel loading skeleton.\n  return <PanelLoading plugin={plugin} spec={spec} definition={definition} contentDimensions={contentDimensions} />;\n}\n\ninterface PanelLoadingProps extends Pick<PanelContentProps, 'spec' | 'definition' | 'contentDimensions'> {\n  plugin?: PanelPlugin<UnknownSpec, PanelProps<UnknownSpec, QueryDataType>>;\n}\n\nfunction PanelLoading({ plugin, spec, definition, contentDimensions }: PanelLoadingProps): ReactElement {\n  if (plugin?.LoadingComponent) {\n    return (\n      <plugin.LoadingComponent\n        spec={spec}\n        contentDimensions={contentDimensions}\n        definition={definition}\n        queryResults={[]}\n      />\n    );\n  }\n  return <LoadingOverlay />;\n}\n"],"names":["usePlugin","LoadingOverlay","Skeleton","PanelPluginLoader","PanelContent","props","panelPluginKind","definition","queryResults","spec","contentDimensions","data","plugin","isLoading","isPanelLoading","throwOnError","variant","width","height","aria-label","queryResultsWithData","flatMap","q","length","kind","some","isFetching","PanelLoading","queryError","find","error","LoadingComponent"],"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,SAAS,QAA4C,4BAA4B;AAG1F,SAASC,cAAc,QAAQ,yBAAyB;AACxD,SAASC,QAAQ,QAAQ,gBAAgB;AACzC,SAASC,iBAAiB,QAAQ,sBAAsB;AAQxD;;;CAGC,GACD,OAAO,SAASC,aAAaC,KAAwB;IACnD,MAAM,EAAEC,eAAe,EAAEC,UAAU,EAAEC,YAAY,EAAEC,IAAI,EAAEC,iBAAiB,EAAE,GAAGL;IAC/E,MAAM,EAAEM,MAAMC,MAAM,EAAEC,WAAWC,cAAc,EAAE,GAAGd,UAAU,SAASM,iBAAiB;QAAES,cAAc;IAAK;IAE7G,yDAAyD;IACzD,IAAID,gBAAgB;QAClB,qBACE,KAACZ;YACCc,SAAQ;YACRC,OAAOP,mBAAmBO;YAC1BC,QAAQR,mBAAmBQ;YAC3BC,cAAW;;IAGjB;IAEA,kHAAkH;IAClH,8EAA8E;IAC9E,MAAMC,uBAAuBZ,aAAaa,OAAO,CAAC,CAACC,IACjDA,EAAEX,IAAI,GAAG;YAAC;gBAAEA,MAAMW,EAAEX,IAAI;gBAAEJ,YAAYe,EAAEf,UAAU;YAAC;SAAE,GAAG,EAAE;IAE5D,IAAIa,qBAAqBG,MAAM,GAAG,KAAKf,aAAae,MAAM,KAAK,GAAG;QAChE,qBACE,KAACpB;YACCqB,MAAMlB;YACNG,MAAMA;YACNC,mBAAmBA;YACnBH,YAAYA;YACZC,cAAcY;;IAGpB;IAEA,yEAAyE;IACzE,IAAIZ,aAAaiB,IAAI,CAAC,CAACH,IAAMA,EAAEI,UAAU,GAAG;QAC1C,qBAAO,KAACC;YAAaf,QAAQA;YAAQH,MAAMA;YAAMF,YAAYA;YAAYG,mBAAmBA;;IAC9F;IAEA,6EAA6E;IAC7E,2DAA2D;IAC3D,MAAMkB,aAAapB,aAAaqB,IAAI,CAAC,CAACP,IAAMA,EAAEQ,KAAK;IACnD,IAAIF,YAAY;QACd,MAAMA,WAAWE,KAAK;IACxB;IAEA,sGAAsG;IACtG,gJAAgJ;IAChJ,oFAAoF;IACpF,qBAAO,KAACH;QAAaf,QAAQA;QAAQH,MAAMA;QAAMF,YAAYA;QAAYG,mBAAmBA;;AAC9F;AAMA,SAASiB,aAAa,EAAEf,MAAM,EAAEH,IAAI,EAAEF,UAAU,EAAEG,iBAAiB,EAAqB;IACtF,IAAIE,QAAQmB,kBAAkB;QAC5B,qBACE,KAACnB,OAAOmB,gBAAgB;YACtBtB,MAAMA;YACNC,mBAAmBA;YACnBH,YAAYA;YACZC,cAAc,EAAE;;IAGtB;IACA,qBAAO,KAACP;AACV"}
+{"version":3,"sources":["../../../src/components/Panel/PanelContent.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 { usePlugin, PanelProps, QueryData, PanelPlugin } from '@perses-dev/plugin-system';\nimport { UnknownSpec, PanelDefinition, QueryDataType } from '@perses-dev/core';\nimport { ReactElement } from 'react';\nimport { LoadingOverlay } from '@perses-dev/components';\nimport { Skeleton } from '@mui/material';\nimport { PanelPluginLoader } from './PanelPluginLoader';\n\nexport interface PanelContentProps extends Omit<PanelProps<UnknownSpec>, 'queryResults'> {\n  panelPluginKind: string;\n  definition?: PanelDefinition<UnknownSpec>;\n  queryResults: QueryData[];\n}\n\n/**\n * Based on the status of the queries (loading, error or data available), this component renders a\n * loading overlay, throws an error, or renders the panel content.\n */\nexport function PanelContent(props: PanelContentProps): ReactElement {\n  const { panelPluginKind, definition, queryResults, spec, contentDimensions } = props;\n  const { data: plugin, isLoading: isPanelLoading } = usePlugin('Panel', panelPluginKind, { useErrorBoundary: true });\n\n  // Show fullsize skeleton if the panel plugin is loading.\n  if (isPanelLoading) {\n    return (\n      <Skeleton\n        variant=\"rectangular\"\n        width={contentDimensions?.width}\n        height={contentDimensions?.height}\n        aria-label=\"Loading...\"\n      />\n    );\n  }\n\n  // Render the panel if any query has data, or the panel doesn't have a query attached (for example MarkdownPanel).\n  // Loading indicator or errors of other queries are shown in the panel header.\n  const queryResultsWithData = queryResults.flatMap((q) =>\n    q.data ? [{ data: q.data, definition: q.definition }] : []\n  );\n  if (queryResultsWithData.length > 0 || queryResults.length === 0) {\n    return (\n      <PanelPluginLoader\n        kind={panelPluginKind}\n        spec={spec}\n        contentDimensions={contentDimensions}\n        definition={definition}\n        queryResults={queryResultsWithData}\n      />\n    );\n  }\n\n  // No query has data, show loading overlay if any query is fetching data.\n  if (queryResults.some((q) => q.isFetching)) {\n    return <PanelLoading plugin={plugin} spec={spec} definition={definition} contentDimensions={contentDimensions} />;\n  }\n\n  // No query has data or is loading, show the error if any query has an error.\n  // The error will be catched in <ErrorBoundary> of <Panel>.\n  const queryError = queryResults.find((q) => q.error);\n  if (queryError) {\n    throw queryError.error;\n  }\n\n  // At this point, one or more queries are defined, but no query has data, is loading, or has an error.\n  // This can happen if all queries are disabled (e.g. dependent dashboard variables are loading, or they are not in the viewport of the browser).\n  // Most likely, some query will be enabled later. Render the panel loading skeleton.\n  return <PanelLoading plugin={plugin} spec={spec} definition={definition} contentDimensions={contentDimensions} />;\n}\n\ninterface PanelLoadingProps extends Pick<PanelContentProps, 'spec' | 'definition' | 'contentDimensions'> {\n  plugin?: PanelPlugin<UnknownSpec, PanelProps<UnknownSpec, QueryDataType>>;\n}\n\nfunction PanelLoading({ plugin, spec, definition, contentDimensions }: PanelLoadingProps): ReactElement {\n  if (plugin?.LoadingComponent) {\n    return (\n      <plugin.LoadingComponent\n        spec={spec}\n        contentDimensions={contentDimensions}\n        definition={definition}\n        queryResults={[]}\n      />\n    );\n  }\n  return <LoadingOverlay />;\n}\n"],"names":["usePlugin","LoadingOverlay","Skeleton","PanelPluginLoader","PanelContent","props","panelPluginKind","definition","queryResults","spec","contentDimensions","data","plugin","isLoading","isPanelLoading","useErrorBoundary","variant","width","height","aria-label","queryResultsWithData","flatMap","q","length","kind","some","isFetching","PanelLoading","queryError","find","error","LoadingComponent"],"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,SAAS,QAA4C,4BAA4B;AAG1F,SAASC,cAAc,QAAQ,yBAAyB;AACxD,SAASC,QAAQ,QAAQ,gBAAgB;AACzC,SAASC,iBAAiB,QAAQ,sBAAsB;AAQxD;;;CAGC,GACD,OAAO,SAASC,aAAaC,KAAwB;IACnD,MAAM,EAAEC,eAAe,EAAEC,UAAU,EAAEC,YAAY,EAAEC,IAAI,EAAEC,iBAAiB,EAAE,GAAGL;IAC/E,MAAM,EAAEM,MAAMC,MAAM,EAAEC,WAAWC,cAAc,EAAE,GAAGd,UAAU,SAASM,iBAAiB;QAAES,kBAAkB;IAAK;IAEjH,yDAAyD;IACzD,IAAID,gBAAgB;QAClB,qBACE,KAACZ;YACCc,SAAQ;YACRC,OAAOP,mBAAmBO;YAC1BC,QAAQR,mBAAmBQ;YAC3BC,cAAW;;IAGjB;IAEA,kHAAkH;IAClH,8EAA8E;IAC9E,MAAMC,uBAAuBZ,aAAaa,OAAO,CAAC,CAACC,IACjDA,EAAEX,IAAI,GAAG;YAAC;gBAAEA,MAAMW,EAAEX,IAAI;gBAAEJ,YAAYe,EAAEf,UAAU;YAAC;SAAE,GAAG,EAAE;IAE5D,IAAIa,qBAAqBG,MAAM,GAAG,KAAKf,aAAae,MAAM,KAAK,GAAG;QAChE,qBACE,KAACpB;YACCqB,MAAMlB;YACNG,MAAMA;YACNC,mBAAmBA;YACnBH,YAAYA;YACZC,cAAcY;;IAGpB;IAEA,yEAAyE;IACzE,IAAIZ,aAAaiB,IAAI,CAAC,CAACH,IAAMA,EAAEI,UAAU,GAAG;QAC1C,qBAAO,KAACC;YAAaf,QAAQA;YAAQH,MAAMA;YAAMF,YAAYA;YAAYG,mBAAmBA;;IAC9F;IAEA,6EAA6E;IAC7E,2DAA2D;IAC3D,MAAMkB,aAAapB,aAAaqB,IAAI,CAAC,CAACP,IAAMA,EAAEQ,KAAK;IACnD,IAAIF,YAAY;QACd,MAAMA,WAAWE,KAAK;IACxB;IAEA,sGAAsG;IACtG,gJAAgJ;IAChJ,oFAAoF;IACpF,qBAAO,KAACH;QAAaf,QAAQA;QAAQH,MAAMA;QAAMF,YAAYA;QAAYG,mBAAmBA;;AAC9F;AAMA,SAASiB,aAAa,EAAEf,MAAM,EAAEH,IAAI,EAAEF,UAAU,EAAEG,iBAAiB,EAAqB;IACtF,IAAIE,QAAQmB,kBAAkB;QAC5B,qBACE,KAACnB,OAAOmB,gBAAgB;YACtBtB,MAAMA;YACNC,mBAAmBA;YACnBH,YAAYA;YACZC,cAAc,EAAE;;IAGtB;IACA,qBAAO,KAACP;AACV"}

package/dist/components/Panel/PanelPluginLoader.js

@@ -19,7 +19,7 @@ import { Skeleton } from '@mui/material';
  */ export function PanelPluginLoader(props) {
     const { kind, spec, contentDimensions, definition, queryResults } = props;
     const { data: plugin, isLoading: isPanelLoading } = usePlugin('Panel', kind, {
-        throwOnError: true
+        useErrorBoundary: true
     });
     const PanelComponent = plugin?.PanelComponent;
     const supportedQueryTypes = plugin?.supportedQueryTypes || [];

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Panel/PanelPluginLoader.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 { usePlugin, PanelProps } from '@perses-dev/plugin-system';\nimport { UnknownSpec, QueryDataType } from '@perses-dev/core';\nimport { ReactElement } from 'react';\nimport { Skeleton } from '@mui/material';\n\ninterface PanelPluginProps extends PanelProps<UnknownSpec, QueryDataType> {\n  kind: string;\n}\n\n/**\n * PanelPluginLoader loads the panel plugin specified by the 'kind' prop from the plugin registry and\n * renders its PanelComponent.\n */\nexport function PanelPluginLoader(props: PanelPluginProps): ReactElement {\n  const { kind, spec, contentDimensions, definition, queryResults } = props;\n  const { data: plugin, isLoading: isPanelLoading } = usePlugin('Panel', kind, { throwOnError: true });\n  const PanelComponent = plugin?.PanelComponent;\n  const supportedQueryTypes = plugin?.supportedQueryTypes || [];\n\n  // Show fullsize skeleton if the panel plugin is loading.\n  if (isPanelLoading) {\n    return (\n      <Skeleton\n        variant=\"rectangular\"\n        width={contentDimensions?.width}\n        height={contentDimensions?.height}\n        aria-label=\"Loading...\"\n      />\n    );\n  }\n\n  if (PanelComponent === undefined) {\n    throw new Error(`Missing PanelComponent from panel plugin for kind '${kind}'`);\n  }\n\n  for (const queryResult of queryResults) {\n    if (!supportedQueryTypes.includes(queryResult.definition.kind)) {\n      throw new Error(\n        `This panel does not support queries of type '${queryResult.definition.kind}'. Supported query types: ${supportedQueryTypes.join(', ')}.`\n      );\n    }\n  }\n\n  return (\n    <PanelComponent\n      spec={spec}\n      contentDimensions={contentDimensions}\n      definition={definition}\n      queryResults={queryResults}\n    />\n  );\n}\n"],"names":["usePlugin","Skeleton","PanelPluginLoader","props","kind","spec","contentDimensions","definition","queryResults","data","plugin","isLoading","isPanelLoading","throwOnError","PanelComponent","supportedQueryTypes","variant","width","height","aria-label","undefined","Error","queryResult","includes","join"],"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,SAAS,QAAoB,4BAA4B;AAGlE,SAASC,QAAQ,QAAQ,gBAAgB;AAMzC;;;CAGC,GACD,OAAO,SAASC,kBAAkBC,KAAuB;IACvD,MAAM,EAAEC,IAAI,EAAEC,IAAI,EAAEC,iBAAiB,EAAEC,UAAU,EAAEC,YAAY,EAAE,GAAGL;IACpE,MAAM,EAAEM,MAAMC,MAAM,EAAEC,WAAWC,cAAc,EAAE,GAAGZ,UAAU,SAASI,MAAM;QAAES,cAAc;IAAK;IAClG,MAAMC,iBAAiBJ,QAAQI;IAC/B,MAAMC,sBAAsBL,QAAQK,uBAAuB,EAAE;IAE7D,yDAAyD;IACzD,IAAIH,gBAAgB;QAClB,qBACE,KAACX;YACCe,SAAQ;YACRC,OAAOX,mBAAmBW;YAC1BC,QAAQZ,mBAAmBY;YAC3BC,cAAW;;IAGjB;IAEA,IAAIL,mBAAmBM,WAAW;QAChC,MAAM,IAAIC,MAAM,CAAC,mDAAmD,EAAEjB,KAAK,CAAC,CAAC;IAC/E;IAEA,KAAK,MAAMkB,eAAed,aAAc;QACtC,IAAI,CAACO,oBAAoBQ,QAAQ,CAACD,YAAYf,UAAU,CAACH,IAAI,GAAG;YAC9D,MAAM,IAAIiB,MACR,CAAC,6CAA6C,EAAEC,YAAYf,UAAU,CAACH,IAAI,CAAC,0BAA0B,EAAEW,oBAAoBS,IAAI,CAAC,MAAM,CAAC,CAAC;QAE7I;IACF;IAEA,qBACE,KAACV;QACCT,MAAMA;QACNC,mBAAmBA;QACnBC,YAAYA;QACZC,cAAcA;;AAGpB"}
+{"version":3,"sources":["../../../src/components/Panel/PanelPluginLoader.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 { usePlugin, PanelProps } from '@perses-dev/plugin-system';\nimport { UnknownSpec, QueryDataType } from '@perses-dev/core';\nimport { ReactElement } from 'react';\nimport { Skeleton } from '@mui/material';\n\ninterface PanelPluginProps extends PanelProps<UnknownSpec, QueryDataType> {\n  kind: string;\n}\n\n/**\n * PanelPluginLoader loads the panel plugin specified by the 'kind' prop from the plugin registry and\n * renders its PanelComponent.\n */\nexport function PanelPluginLoader(props: PanelPluginProps): ReactElement {\n  const { kind, spec, contentDimensions, definition, queryResults } = props;\n  const { data: plugin, isLoading: isPanelLoading } = usePlugin('Panel', kind, { useErrorBoundary: true });\n  const PanelComponent = plugin?.PanelComponent;\n  const supportedQueryTypes = plugin?.supportedQueryTypes || [];\n\n  // Show fullsize skeleton if the panel plugin is loading.\n  if (isPanelLoading) {\n    return (\n      <Skeleton\n        variant=\"rectangular\"\n        width={contentDimensions?.width}\n        height={contentDimensions?.height}\n        aria-label=\"Loading...\"\n      />\n    );\n  }\n\n  if (PanelComponent === undefined) {\n    throw new Error(`Missing PanelComponent from panel plugin for kind '${kind}'`);\n  }\n\n  for (const queryResult of queryResults) {\n    if (!supportedQueryTypes.includes(queryResult.definition.kind)) {\n      throw new Error(\n        `This panel does not support queries of type '${queryResult.definition.kind}'. Supported query types: ${supportedQueryTypes.join(', ')}.`\n      );\n    }\n  }\n\n  return (\n    <PanelComponent\n      spec={spec}\n      contentDimensions={contentDimensions}\n      definition={definition}\n      queryResults={queryResults}\n    />\n  );\n}\n"],"names":["usePlugin","Skeleton","PanelPluginLoader","props","kind","spec","contentDimensions","definition","queryResults","data","plugin","isLoading","isPanelLoading","useErrorBoundary","PanelComponent","supportedQueryTypes","variant","width","height","aria-label","undefined","Error","queryResult","includes","join"],"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,SAAS,QAAoB,4BAA4B;AAGlE,SAASC,QAAQ,QAAQ,gBAAgB;AAMzC;;;CAGC,GACD,OAAO,SAASC,kBAAkBC,KAAuB;IACvD,MAAM,EAAEC,IAAI,EAAEC,IAAI,EAAEC,iBAAiB,EAAEC,UAAU,EAAEC,YAAY,EAAE,GAAGL;IACpE,MAAM,EAAEM,MAAMC,MAAM,EAAEC,WAAWC,cAAc,EAAE,GAAGZ,UAAU,SAASI,MAAM;QAAES,kBAAkB;IAAK;IACtG,MAAMC,iBAAiBJ,QAAQI;IAC/B,MAAMC,sBAAsBL,QAAQK,uBAAuB,EAAE;IAE7D,yDAAyD;IACzD,IAAIH,gBAAgB;QAClB,qBACE,KAACX;YACCe,SAAQ;YACRC,OAAOX,mBAAmBW;YAC1BC,QAAQZ,mBAAmBY;YAC3BC,cAAW;;IAGjB;IAEA,IAAIL,mBAAmBM,WAAW;QAChC,MAAM,IAAIC,MAAM,CAAC,mDAAmD,EAAEjB,KAAK,CAAC,CAAC;IAC/E;IAEA,KAAK,MAAMkB,eAAed,aAAc;QACtC,IAAI,CAACO,oBAAoBQ,QAAQ,CAACD,YAAYf,UAAU,CAACH,IAAI,GAAG;YAC9D,MAAM,IAAIiB,MACR,CAAC,6CAA6C,EAAEC,YAAYf,UAAU,CAACH,IAAI,CAAC,0BAA0B,EAAEW,oBAAoBS,IAAI,CAAC,MAAM,CAAC,CAAC;QAE7I;IACF;IAEA,qBACE,KAACV;QACCT,MAAMA;QACNC,mBAAmBA;QACnBC,YAAYA;QACZC,cAAcA;;AAGpB"}

package/dist/components/PanelDrawer/PanelPreview.js

@@ -24,8 +24,8 @@ export function PanelPreview({ panelDefinition }) {
         width = boxRef.current.getBoundingClientRect().width;
     }
     const suggestedStepMs = useSuggestedStepMs(width);
-    const { data: plugin, isPending } = usePlugin('Panel', panelDefinition.spec.plugin.kind);
-    if (isPending) {
+    const { data: plugin, isLoading } = usePlugin('Panel', panelDefinition.spec.plugin.kind);
+    if (isLoading) {
         return null;
     }
     if (panelDefinition.spec.plugin.kind === '') {

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

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

package/dist/components/QuerySummaryTable/QuerySummaryTable.js

@@ -24,7 +24,7 @@ export function QuerySummaryTable(props) {
     // for displaying a summary of recent query results
     const queryClient = useQueryClient();
     const queries = queryClient.getQueryCache().findAll();
-    const activeQueries = queries.filter((query)=>query.state.status === 'pending');
+    const activeQueries = queries.filter((query)=>query.state.status === 'loading');
     const completedQueries = queries.filter((query)=>query.state.status === 'success');
     const querySummary = useActiveTimeSeriesQueries();
     if (datasourceClient.isLoading === true) {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/QuerySummaryTable/QuerySummaryTable.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport {\n  Box,\n  Button,\n  Paper,\n  Table,\n  TableBody,\n  TableCell,\n  TableContainer,\n  TableHead,\n  TableRow,\n  Typography,\n  Stack,\n} from '@mui/material';\nimport { useQueryClient } from '@tanstack/react-query';\nimport { TimeSeriesQueryDefinition, UnknownSpec } from '@perses-dev/core';\nimport { useActiveTimeSeriesQueries, useDatasourceClient, useTimeRange } from '@perses-dev/plugin-system';\nimport { ReactElement } from 'react';\n\nexport interface WarningDisplay {\n  query: string;\n  summary: string;\n}\n\nconst TABLE_MAX_WIDTH = 1000;\n\ninterface QuerySummaryTableProps {\n  showTotalQueries?: boolean;\n}\n\nexport function QuerySummaryTable(props: QuerySummaryTableProps): ReactElement | null {\n  const { showTotalQueries = true } = props;\n  const datasourceClient = useDatasourceClient({ kind: 'PrometheusDatasource' });\n  const { absoluteTimeRange } = useTimeRange();\n\n  // for displaying a summary of recent query results\n  const queryClient = useQueryClient();\n  const queries = queryClient.getQueryCache().findAll();\n  const activeQueries = queries.filter((query) => query.state.status === 'pending');\n  const completedQueries = queries.filter((query) => query.state.status === 'success');\n  const querySummary = useActiveTimeSeriesQueries();\n\n  if (datasourceClient.isLoading === true) {\n    return null;\n  }\n\n  const warnings: WarningDisplay[] = [];\n  querySummary.forEach((query) => {\n    const queryData = query.state.data;\n    if (queryData && queryData.metadata?.notices) {\n      const queryKey = query.queryKey as [TimeSeriesQueryDefinition<UnknownSpec>];\n      const warningMessage = queryData.metadata.notices[0]?.message;\n      if (warningMessage) {\n        warnings.push({\n          query: String(queryKey[0].spec.plugin.spec.query),\n          summary: warningMessage,\n        });\n      }\n    }\n  });\n\n  return (\n    <Stack\n      spacing={1}\n      mb={2}\n      sx={{\n        maxWidth: TABLE_MAX_WIDTH,\n      }}\n    >\n      <Box sx={{ p: 1 }}>\n        <Typography variant=\"h2\" mb={1}>\n          Query Summary\n        </Typography>\n        <TableContainer component={Paper}>\n          <Table size=\"small\" aria-label=\"query summary table\">\n            <TableHead>\n              <TableRow>\n                <TableCell>Queries Loading</TableCell>\n                <TableCell>Recent Time Series Queries</TableCell>\n                {showTotalQueries && <TableCell>Total Queries</TableCell>}\n                <TableCell>Start Time</TableCell>\n                <TableCell>End Time</TableCell>\n              </TableRow>\n            </TableHead>\n            <TableBody>\n              <TableRow>\n                <TableCell>{activeQueries.length}</TableCell>\n                <TableCell>{querySummary.length}</TableCell>\n                {showTotalQueries && <TableCell>{completedQueries.length}</TableCell>}\n                <TableCell>{absoluteTimeRange.start.toString()}</TableCell>\n                <TableCell>{absoluteTimeRange.end.toString()}</TableCell>\n              </TableRow>\n            </TableBody>\n          </Table>\n        </TableContainer>\n      </Box>\n\n      {warnings.length > 0 && (\n        <Box sx={{ p: 1, m: 0 }}>\n          <Typography variant=\"h3\" mb={1}>\n            Warnings\n          </Typography>\n          <TableContainer component={Paper} sx={{ mb: 2 }}>\n            <Table size=\"small\" aria-label=\"query warnings table\">\n              <TableHead>\n                <TableRow>\n                  <TableCell>Query</TableCell>\n                  <TableCell>Summary</TableCell>\n                </TableRow>\n              </TableHead>\n              <TableBody>\n                {warnings.map((details, idx) => {\n                  return (\n                    <TableRow key={idx}>\n                      <TableCell>{details.query}</TableCell>\n                      <TableCell>{details.summary}</TableCell>\n                    </TableRow>\n                  );\n                })}\n              </TableBody>\n            </Table>\n          </TableContainer>\n          <Button disabled variant=\"outlined\">\n            TODO: Action Button\n          </Button>\n        </Box>\n      )}\n    </Stack>\n  );\n}\n"],"names":["Box","Button","Paper","Table","TableBody","TableCell","TableContainer","TableHead","TableRow","Typography","Stack","useQueryClient","useActiveTimeSeriesQueries","useDatasourceClient","useTimeRange","TABLE_MAX_WIDTH","QuerySummaryTable","props","showTotalQueries","datasourceClient","kind","absoluteTimeRange","queryClient","queries","getQueryCache","findAll","activeQueries","filter","query","state","status","completedQueries","querySummary","isLoading","warnings","forEach","queryData","data","metadata","notices","queryKey","warningMessage","message","push","String","spec","plugin","summary","spacing","mb","sx","maxWidth","p","variant","component","size","aria-label","length","start","toString","end","m","map","details","idx","disabled"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/QuerySummaryTable/QuerySummaryTable.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport {\n  Box,\n  Button,\n  Paper,\n  Table,\n  TableBody,\n  TableCell,\n  TableContainer,\n  TableHead,\n  TableRow,\n  Typography,\n  Stack,\n} from '@mui/material';\nimport { useQueryClient } from '@tanstack/react-query';\nimport { TimeSeriesQueryDefinition, UnknownSpec } from '@perses-dev/core';\nimport { useActiveTimeSeriesQueries, useDatasourceClient, useTimeRange } from '@perses-dev/plugin-system';\nimport { ReactElement } from 'react';\n\nexport interface WarningDisplay {\n  query: string;\n  summary: string;\n}\n\nconst TABLE_MAX_WIDTH = 1000;\n\ninterface QuerySummaryTableProps {\n  showTotalQueries?: boolean;\n}\n\nexport function QuerySummaryTable(props: QuerySummaryTableProps): ReactElement | null {\n  const { showTotalQueries = true } = props;\n  const datasourceClient = useDatasourceClient({ kind: 'PrometheusDatasource' });\n  const { absoluteTimeRange } = useTimeRange();\n\n  // for displaying a summary of recent query results\n  const queryClient = useQueryClient();\n  const queries = queryClient.getQueryCache().findAll();\n  const activeQueries = queries.filter((query) => query.state.status === 'loading');\n  const completedQueries = queries.filter((query) => query.state.status === 'success');\n  const querySummary = useActiveTimeSeriesQueries();\n\n  if (datasourceClient.isLoading === true) {\n    return null;\n  }\n\n  const warnings: WarningDisplay[] = [];\n  querySummary.forEach((query) => {\n    const queryData = query.state.data;\n    if (queryData && queryData.metadata?.notices) {\n      const queryKey = query.queryKey as [TimeSeriesQueryDefinition<UnknownSpec>];\n      const warningMessage = queryData.metadata.notices[0]?.message;\n      if (warningMessage) {\n        warnings.push({\n          query: String(queryKey[0].spec.plugin.spec.query),\n          summary: warningMessage,\n        });\n      }\n    }\n  });\n\n  return (\n    <Stack\n      spacing={1}\n      mb={2}\n      sx={{\n        maxWidth: TABLE_MAX_WIDTH,\n      }}\n    >\n      <Box sx={{ p: 1 }}>\n        <Typography variant=\"h2\" mb={1}>\n          Query Summary\n        </Typography>\n        <TableContainer component={Paper}>\n          <Table size=\"small\" aria-label=\"query summary table\">\n            <TableHead>\n              <TableRow>\n                <TableCell>Queries Loading</TableCell>\n                <TableCell>Recent Time Series Queries</TableCell>\n                {showTotalQueries && <TableCell>Total Queries</TableCell>}\n                <TableCell>Start Time</TableCell>\n                <TableCell>End Time</TableCell>\n              </TableRow>\n            </TableHead>\n            <TableBody>\n              <TableRow>\n                <TableCell>{activeQueries.length}</TableCell>\n                <TableCell>{querySummary.length}</TableCell>\n                {showTotalQueries && <TableCell>{completedQueries.length}</TableCell>}\n                <TableCell>{absoluteTimeRange.start.toString()}</TableCell>\n                <TableCell>{absoluteTimeRange.end.toString()}</TableCell>\n              </TableRow>\n            </TableBody>\n          </Table>\n        </TableContainer>\n      </Box>\n\n      {warnings.length > 0 && (\n        <Box sx={{ p: 1, m: 0 }}>\n          <Typography variant=\"h3\" mb={1}>\n            Warnings\n          </Typography>\n          <TableContainer component={Paper} sx={{ mb: 2 }}>\n            <Table size=\"small\" aria-label=\"query warnings table\">\n              <TableHead>\n                <TableRow>\n                  <TableCell>Query</TableCell>\n                  <TableCell>Summary</TableCell>\n                </TableRow>\n              </TableHead>\n              <TableBody>\n                {warnings.map((details, idx) => {\n                  return (\n                    <TableRow key={idx}>\n                      <TableCell>{details.query}</TableCell>\n                      <TableCell>{details.summary}</TableCell>\n                    </TableRow>\n                  );\n                })}\n              </TableBody>\n            </Table>\n          </TableContainer>\n          <Button disabled variant=\"outlined\">\n            TODO: Action Button\n          </Button>\n        </Box>\n      )}\n    </Stack>\n  );\n}\n"],"names":["Box","Button","Paper","Table","TableBody","TableCell","TableContainer","TableHead","TableRow","Typography","Stack","useQueryClient","useActiveTimeSeriesQueries","useDatasourceClient","useTimeRange","TABLE_MAX_WIDTH","QuerySummaryTable","props","showTotalQueries","datasourceClient","kind","absoluteTimeRange","queryClient","queries","getQueryCache","findAll","activeQueries","filter","query","state","status","completedQueries","querySummary","isLoading","warnings","forEach","queryData","data","metadata","notices","queryKey","warningMessage","message","push","String","spec","plugin","summary","spacing","mb","sx","maxWidth","p","variant","component","size","aria-label","length","start","toString","end","m","map","details","idx","disabled"],"mappings":"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"}

package/dist/views/ViewDashboard/DashboardApp.js

@@ -95,6 +95,7 @@ export const DashboardApp = (props)=>{
                     /*#__PURE__*/ _jsx(ChartsProvider, {
                         chartsTheme: chartsTheme,
                         enablePinning: false,
+                        enableSyncGrouping: false,
                         children: /*#__PURE__*/ _jsx(PanelDrawer, {})
                     }),
                     /*#__PURE__*/ _jsx(PanelGroupDialog, {}),

package/dist/views/ViewDashboard/DashboardApp.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/views/ViewDashboard/DashboardApp.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 { ReactElement, useState } from 'react';\nimport { Box } from '@mui/material';\nimport { ChartsProvider, ErrorAlert, ErrorBoundary, useChartsTheme } from '@perses-dev/components';\nimport { DashboardResource, EphemeralDashboardResource } from '@perses-dev/core';\nimport { useDatasourceStore } from '@perses-dev/plugin-system';\nimport {\n  PanelDrawer,\n  Dashboard,\n  PanelGroupDialog,\n  DeletePanelGroupDialog,\n  DashboardDiscardChangesConfirmationDialog,\n  DashboardToolbar,\n  DeletePanelDialog,\n  EmptyDashboardProps,\n  EditJsonDialog,\n  SaveChangesConfirmationDialog,\n} from '../../components';\nimport { OnSaveDashboard, useDashboard, useDiscardChangesConfirmationDialog, useEditMode } from '../../context';\n\nexport interface DashboardAppProps {\n  emptyDashboardProps?: Partial<EmptyDashboardProps>;\n  dashboardResource: DashboardResource | EphemeralDashboardResource;\n  dashboardTitleComponent?: JSX.Element;\n  onSave?: OnSaveDashboard;\n  onDiscard?: (entity: DashboardResource) => void;\n  initialVariableIsSticky?: boolean;\n  isReadonly: boolean;\n  isVariableEnabled: boolean;\n  isDatasourceEnabled: boolean;\n  isCreating?: boolean;\n}\n\nexport const DashboardApp = (props: DashboardAppProps): ReactElement => {\n  const {\n    dashboardResource,\n    dashboardTitleComponent,\n    emptyDashboardProps,\n    onSave,\n    onDiscard,\n    initialVariableIsSticky,\n    isReadonly,\n    isVariableEnabled,\n    isDatasourceEnabled,\n    isCreating,\n  } = props;\n\n  const chartsTheme = useChartsTheme();\n\n  const { isEditMode, setEditMode } = useEditMode();\n  const { dashboard, setDashboard } = useDashboard();\n  const [originalDashboard, setOriginalDashboard] = useState<\n    DashboardResource | EphemeralDashboardResource | undefined\n  >(undefined);\n  const { setSavedDatasources } = useDatasourceStore();\n\n  const { openDiscardChangesConfirmationDialog, closeDiscardChangesConfirmationDialog } =\n    useDiscardChangesConfirmationDialog();\n\n  const handleDiscardChanges = (): void => {\n    // Reset to the original spec and exit edit mode\n    if (originalDashboard) {\n      setDashboard(originalDashboard);\n    }\n    setEditMode(false);\n    closeDiscardChangesConfirmationDialog();\n    if (onDiscard) {\n      onDiscard(dashboard as unknown as DashboardResource);\n    }\n  };\n\n  const onEditButtonClick = (): void => {\n    setEditMode(true);\n    setOriginalDashboard(dashboard);\n    setSavedDatasources(dashboard.spec.datasources ?? {});\n  };\n\n  const onCancelButtonClick = (): void => {\n    // check if dashboard has been modified\n    if (JSON.stringify(dashboard) === JSON.stringify(originalDashboard)) {\n      setEditMode(false);\n    } else {\n      openDiscardChangesConfirmationDialog({\n        onDiscardChanges: () => {\n          handleDiscardChanges();\n        },\n        onCancel: () => {\n          closeDiscardChangesConfirmationDialog();\n        },\n      });\n    }\n  };\n\n  return (\n    <Box\n      sx={{\n        flexGrow: 1,\n        overflowX: 'hidden',\n        overflowY: 'auto',\n        display: 'flex',\n        flexDirection: 'column',\n      }}\n    >\n      <DashboardToolbar\n        dashboardName={dashboardResource.metadata.name}\n        dashboardTitleComponent={dashboardTitleComponent}\n        initialVariableIsSticky={initialVariableIsSticky}\n        onSave={onSave}\n        isReadonly={isReadonly}\n        isVariableEnabled={isVariableEnabled}\n        isDatasourceEnabled={isDatasourceEnabled}\n        onEditButtonClick={onEditButtonClick}\n        onCancelButtonClick={onCancelButtonClick}\n      />\n      <Box sx={{ paddingTop: 2, paddingX: 2, height: '100%' }}>\n        <ErrorBoundary FallbackComponent={ErrorAlert}>\n          <Dashboard\n            emptyDashboardProps={{\n              onEditButtonClick,\n              ...emptyDashboardProps,\n            }}\n          />\n        </ErrorBoundary>\n        <ChartsProvider chartsTheme={chartsTheme} enablePinning={false}>\n          <PanelDrawer />\n        </ChartsProvider>\n        <PanelGroupDialog />\n        <DeletePanelGroupDialog />\n        <DeletePanelDialog />\n        <DashboardDiscardChangesConfirmationDialog />\n        <EditJsonDialog isReadonly={!isEditMode} disableMetadataEdition={!isCreating} />\n        <SaveChangesConfirmationDialog />\n      </Box>\n    </Box>\n  );\n};\n"],"names":["useState","Box","ChartsProvider","ErrorAlert","ErrorBoundary","useChartsTheme","useDatasourceStore","PanelDrawer","Dashboard","PanelGroupDialog","DeletePanelGroupDialog","DashboardDiscardChangesConfirmationDialog","DashboardToolbar","DeletePanelDialog","EditJsonDialog","SaveChangesConfirmationDialog","useDashboard","useDiscardChangesConfirmationDialog","useEditMode","DashboardApp","props","dashboardResource","dashboardTitleComponent","emptyDashboardProps","onSave","onDiscard","initialVariableIsSticky","isReadonly","isVariableEnabled","isDatasourceEnabled","isCreating","chartsTheme","isEditMode","setEditMode","dashboard","setDashboard","originalDashboard","setOriginalDashboard","undefined","setSavedDatasources","openDiscardChangesConfirmationDialog","closeDiscardChangesConfirmationDialog","handleDiscardChanges","onEditButtonClick","spec","datasources","onCancelButtonClick","JSON","stringify","onDiscardChanges","onCancel","sx","flexGrow","overflowX","overflowY","display","flexDirection","dashboardName","metadata","name","paddingTop","paddingX","height","FallbackComponent","enablePinning","disableMetadataEdition"],"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,GAAG,QAAQ,gBAAgB;AACpC,SAASC,cAAc,EAAEC,UAAU,EAAEC,aAAa,EAAEC,cAAc,QAAQ,yBAAyB;AAEnG,SAASC,kBAAkB,QAAQ,4BAA4B;AAC/D,SACEC,WAAW,EACXC,SAAS,EACTC,gBAAgB,EAChBC,sBAAsB,EACtBC,yCAAyC,EACzCC,gBAAgB,EAChBC,iBAAiB,EAEjBC,cAAc,EACdC,6BAA6B,QACxB,mBAAmB;AAC1B,SAA0BC,YAAY,EAAEC,mCAAmC,EAAEC,WAAW,QAAQ,gBAAgB;AAehH,OAAO,MAAMC,eAAe,CAACC;IAC3B,MAAM,EACJC,iBAAiB,EACjBC,uBAAuB,EACvBC,mBAAmB,EACnBC,MAAM,EACNC,SAAS,EACTC,uBAAuB,EACvBC,UAAU,EACVC,iBAAiB,EACjBC,mBAAmB,EACnBC,UAAU,EACX,GAAGV;IAEJ,MAAMW,cAAc1B;IAEpB,MAAM,EAAE2B,UAAU,EAAEC,WAAW,EAAE,GAAGf;IACpC,MAAM,EAAEgB,SAAS,EAAEC,YAAY,EAAE,GAAGnB;IACpC,MAAM,CAACoB,mBAAmBC,qBAAqB,GAAGrC,SAEhDsC;IACF,MAAM,EAAEC,mBAAmB,EAAE,GAAGjC;IAEhC,MAAM,EAAEkC,oCAAoC,EAAEC,qCAAqC,EAAE,GACnFxB;IAEF,MAAMyB,uBAAuB;QAC3B,gDAAgD;QAChD,IAAIN,mBAAmB;YACrBD,aAAaC;QACf;QACAH,YAAY;QACZQ;QACA,IAAIhB,WAAW;YACbA,UAAUS;QACZ;IACF;IAEA,MAAMS,oBAAoB;QACxBV,YAAY;QACZI,qBAAqBH;QACrBK,oBAAoBL,UAAUU,IAAI,CAACC,WAAW,IAAI,CAAC;IACrD;IAEA,MAAMC,sBAAsB;QAC1B,uCAAuC;QACvC,IAAIC,KAAKC,SAAS,CAACd,eAAea,KAAKC,SAAS,CAACZ,oBAAoB;YACnEH,YAAY;QACd,OAAO;YACLO,qCAAqC;gBACnCS,kBAAkB;oBAChBP;gBACF;gBACAQ,UAAU;oBACRT;gBACF;YACF;QACF;IACF;IAEA,qBACE,MAACxC;QACCkD,IAAI;YACFC,UAAU;YACVC,WAAW;YACXC,WAAW;YACXC,SAAS;YACTC,eAAe;QACjB;;0BAEA,KAAC5C;gBACC6C,eAAepC,kBAAkBqC,QAAQ,CAACC,IAAI;gBAC9CrC,yBAAyBA;gBACzBI,yBAAyBA;gBACzBF,QAAQA;gBACRG,YAAYA;gBACZC,mBAAmBA;gBACnBC,qBAAqBA;gBACrBc,mBAAmBA;gBACnBG,qBAAqBA;;0BAEvB,MAAC7C;gBAAIkD,IAAI;oBAAES,YAAY;oBAAGC,UAAU;oBAAGC,QAAQ;gBAAO;;kCACpD,KAAC1D;wBAAc2D,mBAAmB5D;kCAChC,cAAA,KAACK;4BACCe,qBAAqB;gCACnBoB;gCACA,GAAGpB,mBAAmB;4BACxB;;;kCAGJ,KAACrB;wBAAe6B,aAAaA;wBAAaiC,eAAe;kCACvD,cAAA,KAACzD;;kCAEH,KAACE;kCACD,KAACC;kCACD,KAACG;kCACD,KAACF;kCACD,KAACG;wBAAea,YAAY,CAACK;wBAAYiC,wBAAwB,CAACnC;;kCAClE,KAACf;;;;;AAIT,EAAE"}
+{"version":3,"sources":["../../../src/views/ViewDashboard/DashboardApp.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 { ReactElement, useState } from 'react';\nimport { Box } from '@mui/material';\nimport { ChartsProvider, ErrorAlert, ErrorBoundary, useChartsTheme } from '@perses-dev/components';\nimport { DashboardResource, EphemeralDashboardResource } from '@perses-dev/core';\nimport { useDatasourceStore } from '@perses-dev/plugin-system';\nimport {\n  PanelDrawer,\n  Dashboard,\n  PanelGroupDialog,\n  DeletePanelGroupDialog,\n  DashboardDiscardChangesConfirmationDialog,\n  DashboardToolbar,\n  DeletePanelDialog,\n  EmptyDashboardProps,\n  EditJsonDialog,\n  SaveChangesConfirmationDialog,\n} from '../../components';\nimport { OnSaveDashboard, useDashboard, useDiscardChangesConfirmationDialog, useEditMode } from '../../context';\n\nexport interface DashboardAppProps {\n  emptyDashboardProps?: Partial<EmptyDashboardProps>;\n  dashboardResource: DashboardResource | EphemeralDashboardResource;\n  dashboardTitleComponent?: JSX.Element;\n  onSave?: OnSaveDashboard;\n  onDiscard?: (entity: DashboardResource) => void;\n  initialVariableIsSticky?: boolean;\n  isReadonly: boolean;\n  isVariableEnabled: boolean;\n  isDatasourceEnabled: boolean;\n  isCreating?: boolean;\n}\n\nexport const DashboardApp = (props: DashboardAppProps): ReactElement => {\n  const {\n    dashboardResource,\n    dashboardTitleComponent,\n    emptyDashboardProps,\n    onSave,\n    onDiscard,\n    initialVariableIsSticky,\n    isReadonly,\n    isVariableEnabled,\n    isDatasourceEnabled,\n    isCreating,\n  } = props;\n\n  const chartsTheme = useChartsTheme();\n\n  const { isEditMode, setEditMode } = useEditMode();\n  const { dashboard, setDashboard } = useDashboard();\n  const [originalDashboard, setOriginalDashboard] = useState<\n    DashboardResource | EphemeralDashboardResource | undefined\n  >(undefined);\n  const { setSavedDatasources } = useDatasourceStore();\n\n  const { openDiscardChangesConfirmationDialog, closeDiscardChangesConfirmationDialog } =\n    useDiscardChangesConfirmationDialog();\n\n  const handleDiscardChanges = (): void => {\n    // Reset to the original spec and exit edit mode\n    if (originalDashboard) {\n      setDashboard(originalDashboard);\n    }\n    setEditMode(false);\n    closeDiscardChangesConfirmationDialog();\n    if (onDiscard) {\n      onDiscard(dashboard as unknown as DashboardResource);\n    }\n  };\n\n  const onEditButtonClick = (): void => {\n    setEditMode(true);\n    setOriginalDashboard(dashboard);\n    setSavedDatasources(dashboard.spec.datasources ?? {});\n  };\n\n  const onCancelButtonClick = (): void => {\n    // check if dashboard has been modified\n    if (JSON.stringify(dashboard) === JSON.stringify(originalDashboard)) {\n      setEditMode(false);\n    } else {\n      openDiscardChangesConfirmationDialog({\n        onDiscardChanges: () => {\n          handleDiscardChanges();\n        },\n        onCancel: () => {\n          closeDiscardChangesConfirmationDialog();\n        },\n      });\n    }\n  };\n\n  return (\n    <Box\n      sx={{\n        flexGrow: 1,\n        overflowX: 'hidden',\n        overflowY: 'auto',\n        display: 'flex',\n        flexDirection: 'column',\n      }}\n    >\n      <DashboardToolbar\n        dashboardName={dashboardResource.metadata.name}\n        dashboardTitleComponent={dashboardTitleComponent}\n        initialVariableIsSticky={initialVariableIsSticky}\n        onSave={onSave}\n        isReadonly={isReadonly}\n        isVariableEnabled={isVariableEnabled}\n        isDatasourceEnabled={isDatasourceEnabled}\n        onEditButtonClick={onEditButtonClick}\n        onCancelButtonClick={onCancelButtonClick}\n      />\n      <Box sx={{ paddingTop: 2, paddingX: 2, height: '100%' }}>\n        <ErrorBoundary FallbackComponent={ErrorAlert}>\n          <Dashboard\n            emptyDashboardProps={{\n              onEditButtonClick,\n              ...emptyDashboardProps,\n            }}\n          />\n        </ErrorBoundary>\n        <ChartsProvider chartsTheme={chartsTheme} enablePinning={false} enableSyncGrouping={false}>\n          <PanelDrawer />\n        </ChartsProvider>\n        <PanelGroupDialog />\n        <DeletePanelGroupDialog />\n        <DeletePanelDialog />\n        <DashboardDiscardChangesConfirmationDialog />\n        <EditJsonDialog isReadonly={!isEditMode} disableMetadataEdition={!isCreating} />\n        <SaveChangesConfirmationDialog />\n      </Box>\n    </Box>\n  );\n};\n"],"names":["useState","Box","ChartsProvider","ErrorAlert","ErrorBoundary","useChartsTheme","useDatasourceStore","PanelDrawer","Dashboard","PanelGroupDialog","DeletePanelGroupDialog","DashboardDiscardChangesConfirmationDialog","DashboardToolbar","DeletePanelDialog","EditJsonDialog","SaveChangesConfirmationDialog","useDashboard","useDiscardChangesConfirmationDialog","useEditMode","DashboardApp","props","dashboardResource","dashboardTitleComponent","emptyDashboardProps","onSave","onDiscard","initialVariableIsSticky","isReadonly","isVariableEnabled","isDatasourceEnabled","isCreating","chartsTheme","isEditMode","setEditMode","dashboard","setDashboard","originalDashboard","setOriginalDashboard","undefined","setSavedDatasources","openDiscardChangesConfirmationDialog","closeDiscardChangesConfirmationDialog","handleDiscardChanges","onEditButtonClick","spec","datasources","onCancelButtonClick","JSON","stringify","onDiscardChanges","onCancel","sx","flexGrow","overflowX","overflowY","display","flexDirection","dashboardName","metadata","name","paddingTop","paddingX","height","FallbackComponent","enablePinning","enableSyncGrouping","disableMetadataEdition"],"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,GAAG,QAAQ,gBAAgB;AACpC,SAASC,cAAc,EAAEC,UAAU,EAAEC,aAAa,EAAEC,cAAc,QAAQ,yBAAyB;AAEnG,SAASC,kBAAkB,QAAQ,4BAA4B;AAC/D,SACEC,WAAW,EACXC,SAAS,EACTC,gBAAgB,EAChBC,sBAAsB,EACtBC,yCAAyC,EACzCC,gBAAgB,EAChBC,iBAAiB,EAEjBC,cAAc,EACdC,6BAA6B,QACxB,mBAAmB;AAC1B,SAA0BC,YAAY,EAAEC,mCAAmC,EAAEC,WAAW,QAAQ,gBAAgB;AAehH,OAAO,MAAMC,eAAe,CAACC;IAC3B,MAAM,EACJC,iBAAiB,EACjBC,uBAAuB,EACvBC,mBAAmB,EACnBC,MAAM,EACNC,SAAS,EACTC,uBAAuB,EACvBC,UAAU,EACVC,iBAAiB,EACjBC,mBAAmB,EACnBC,UAAU,EACX,GAAGV;IAEJ,MAAMW,cAAc1B;IAEpB,MAAM,EAAE2B,UAAU,EAAEC,WAAW,EAAE,GAAGf;IACpC,MAAM,EAAEgB,SAAS,EAAEC,YAAY,EAAE,GAAGnB;IACpC,MAAM,CAACoB,mBAAmBC,qBAAqB,GAAGrC,SAEhDsC;IACF,MAAM,EAAEC,mBAAmB,EAAE,GAAGjC;IAEhC,MAAM,EAAEkC,oCAAoC,EAAEC,qCAAqC,EAAE,GACnFxB;IAEF,MAAMyB,uBAAuB;QAC3B,gDAAgD;QAChD,IAAIN,mBAAmB;YACrBD,aAAaC;QACf;QACAH,YAAY;QACZQ;QACA,IAAIhB,WAAW;YACbA,UAAUS;QACZ;IACF;IAEA,MAAMS,oBAAoB;QACxBV,YAAY;QACZI,qBAAqBH;QACrBK,oBAAoBL,UAAUU,IAAI,CAACC,WAAW,IAAI,CAAC;IACrD;IAEA,MAAMC,sBAAsB;QAC1B,uCAAuC;QACvC,IAAIC,KAAKC,SAAS,CAACd,eAAea,KAAKC,SAAS,CAACZ,oBAAoB;YACnEH,YAAY;QACd,OAAO;YACLO,qCAAqC;gBACnCS,kBAAkB;oBAChBP;gBACF;gBACAQ,UAAU;oBACRT;gBACF;YACF;QACF;IACF;IAEA,qBACE,MAACxC;QACCkD,IAAI;YACFC,UAAU;YACVC,WAAW;YACXC,WAAW;YACXC,SAAS;YACTC,eAAe;QACjB;;0BAEA,KAAC5C;gBACC6C,eAAepC,kBAAkBqC,QAAQ,CAACC,IAAI;gBAC9CrC,yBAAyBA;gBACzBI,yBAAyBA;gBACzBF,QAAQA;gBACRG,YAAYA;gBACZC,mBAAmBA;gBACnBC,qBAAqBA;gBACrBc,mBAAmBA;gBACnBG,qBAAqBA;;0BAEvB,MAAC7C;gBAAIkD,IAAI;oBAAES,YAAY;oBAAGC,UAAU;oBAAGC,QAAQ;gBAAO;;kCACpD,KAAC1D;wBAAc2D,mBAAmB5D;kCAChC,cAAA,KAACK;4BACCe,qBAAqB;gCACnBoB;gCACA,GAAGpB,mBAAmB;4BACxB;;;kCAGJ,KAACrB;wBAAe6B,aAAaA;wBAAaiC,eAAe;wBAAOC,oBAAoB;kCAClF,cAAA,KAAC1D;;kCAEH,KAACE;kCACD,KAACC;kCACD,KAACG;kCACD,KAACF;kCACD,KAACG;wBAAea,YAAY,CAACK;wBAAYkC,wBAAwB,CAACpC;;kCAClE,KAACf;;;;;AAIT,EAAE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@perses-dev/dashboards",
-  "version": "0.51.0-beta.1",
+  "version": "0.51.0-rc.1",
   "description": "The dashboards feature in Perses",
   "license": "Apache-2.0",
   "homepage": "https://github.com/perses/perses/blob/main/README.md",
@@ -29,9 +29,9 @@
     "lint:fix": "eslint --fix src --ext .ts,.tsx"
   },
   "dependencies": {
-    "@perses-dev/components": "0.51.0-beta.1",
-    "@perses-dev/core": "0.51.0-beta.1",
-    "@perses-dev/plugin-system": "0.51.0-beta.1",
+    "@perses-dev/components": "0.51.0-rc.1",
+    "@perses-dev/core": "0.51.0-rc.1",
+    "@perses-dev/plugin-system": "0.51.0-rc.1",
     "@types/react-grid-layout": "^1.3.2",
     "date-fns": "^4.1.0",
     "immer": "^10.1.1",
@@ -46,13 +46,13 @@
     "zustand": "^4.3.3"
   },
   "devDependencies": {
-    "@perses-dev/internal-utils": "0.51.0-beta.1",
+    "@perses-dev/internal-utils": "0.51.0-rc.1",
     "history": "^5.3.0",
     "intersection-observer": "^0.12.2"
   },
   "peerDependencies": {
     "@mui/material": "^6.1.10",
-    "@tanstack/react-query": "^5.64.2",
+    "@tanstack/react-query": "^4.39.1",
     "react": "^17.0.2 || ^18.0.0",
     "react-dom": "^17.0.2 || ^18.0.0"
   },