npm - @perses-dev/dashboards - Versions diffs - 0.0.0-snapshot-explorer-plugin-c4a7621 → 0.0.0-snapshot-profile-8090608 - Mend

@perses-dev/dashboards 0.0.0-snapshot-explorer-plugin-c4a7621 → 0.0.0-snapshot-profile-8090608

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (136) hide show

package/dist/components/GridLayout/GridLayout.js CHANGED Viewed

@@ -11,11 +11,11 @@
 // 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';
-import { useEditMode, usePanelGroup, usePanelGroupActions, useViewPanel } from '../../context';
+import { useEditMode, usePanelGroup, usePanelGroupActions, useViewPanelGroup } from '../../context';
 import { GRID_LAYOUT_COLS, GRID_LAYOUT_SMALL_BREAKPOINT } from '../../constants';
 import { GridTitle } from './GridTitle';
 import { GridItemContent } from './GridItemContent';
@@ -29,25 +29,21 @@ const ROW_HEIGHT = 30;
     const theme = useTheme();
     const groupDefinition = usePanelGroup(panelGroupId);
     const { updatePanelGroupLayouts } = usePanelGroupActions(panelGroupId);
-    const [isOpen, setIsOpen] = useState(!groupDefinition.isCollapsed ?? true);
+    const [isOpen, setIsOpen] = useState(!groupDefinition.isCollapsed);
     const { isEditMode } = useEditMode();
     const [gridColWidth, setGridColWidth] = useState(0);
-    const viewPanelItemId = useViewPanel();
+    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 CHANGED Viewed

	@@ -1 +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 useViewPanel,\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 ?? true);\n const { isEditMode } = useEditMode();\n\n const [gridColWidth, setGridColWidth] = useState(0);\n\n const viewPanelItemId = useViewPanel();\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","useViewPanel","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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"}
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, 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":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AACjC,SAAuBA,SAAS,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,QAAQ;AACnE,SAASC,UAAU,EAAEC,aAAa,QAAyB,oBAAoB;AAC/E,SAASC,QAAQ,EAAEC,QAAQ,QAAQ,gBAAgB;AACnD,SAASC,UAAU,EAAEC,aAAa,QAAQ,yBAAyB;AAEnE,SACEC,WAAW,EACXC,aAAa,EACbC,oBAAoB,EAEpBC,iBAAiB,QAEZ,gBAAgB;AACvB,SAASC,gBAAgB,EAAEC,4BAA4B,QAAQ,kBAAkB;AAEjF,SAASC,SAAS,QAAQ,cAAc;AACxC,SAASC,eAAe,QAAQ,oBAAoB;AACpD,SAASC,aAAa,QAAQ,kBAAkB;AAChD,MAAMC,iBAAiB;AACvB,MAAMC,aAAa;AAQnB;;CAEC,GACD,OAAO,SAASC,WAAWC,KAAsB;IAC/C,MAAM,EAAEC,YAAY,EAAEC,YAAY,EAAEC,eAAe,EAAE,GAAGH;IACxD,MAAMI,QAAQnB;IACd,MAAMoB,kBAAwChB,cAAcY;IAC5D,MAAM,EAAEK,uBAAuB,EAAE,GAAGhB,qBAAqBW;IAEzD,MAAM,CAACM,QAAQC,UAAU,GAAG3B,SAAS,CAACwB,gBAAgBI,WAAW;IACjE,MAAM,EAAEC,UAAU,EAAE,GAAGtB;IAEvB,MAAM,CAACuB,cAAcC,gBAAgB,GAAG/B,SAAS;IAEjD,MAAMgC,kBAAkBtB;IACxB,MAAMuB,eAAeD,iBAAiBZ,iBAAiBA,cAAc,kDAAkD;IACvH,MAAMc,mBAAmBF,iBAAiBG;IAE1CrC,UAAU;QACR,IAAImC,cAAc;YAChBN,UAAU;QACZ;IACF,GAAG;QAACM;KAAa;IAEjB,sGAAsG;IACtG,MAAMG,kBAAkBJ,oBAAoBK,aAAaJ;IAEzD,2DAA2D;IAC3D,MAAMK,cAAsCvC,QAAQ;QAClD,IAAImC,kBAAkB;YACpB,OAAOV,gBAAgBc,WAAW,CAACC,GAAG,CAAC,CAACC;gBACtC,IAAIA,WAAWC,CAAC,KAAKP,kBAAkB;oBACrC,MAAMQ,iBAAiB,KAAK,GAAG,+DAA+D;oBAC9F,OAAO;wBACLC,GAAGC,KAAKC,KAAK,CAAC,AAAC,CAAA,AAACvB,CAAAA,mBAAmBwB,OAAOC,WAAW,AAAD,IAAKL,cAAa,IAAMzB,CAAAA,aAAaD,cAAa;wBACtGyB,GAAGP;wBACHc,GAAG;wBACHC,GAAG;wBACHC,GAAG;oBACL;gBACF;gBACA,OAAOV;YACT;QACF;QACA,OAAOhB,gBAAgBc,WAAW;IACpC,GAAG;QAACd,gBAAgBc,WAAW;QAAEJ;QAAkBZ;KAAgB;IAEnE,MAAM6B,qBAAqB,CAACC,eAAyBC;QACnD,0EAA0E;QAC1E,4EAA4E;QAC5E,2EAA2E;QAC3E,qEAAqE;QACrE,MAAMC,cAAcD,UAAU,CAACzC,6BAA6B;QAC5D,IAAI0C,eAAe,CAACrB,cAAc;YAChCR,wBAAwB6B;QAC1B;IACF;IAEA;;;GAGC,GACD,MAAMC,oBAAoB,CACxBC,gBACAC,QACAC,MACAC;QAEA,MAAMC,UAAUH,MAAM,CAAC,EAAE;QACzB,MAAMI,cAAcD,UAAWF,CAAAA,OAAO,CAAA;QACtC,MAAMI,wBAAwBH,gBAAgB,CAAC,EAAE,GAAG;QACpD,8CAA8C;QAC9C5B,gBAAgB,AAACyB,CAAAA,iBAAiBK,cAAcC,qBAAoB,IAAKJ;IAC3E;IAEA,oGAAoG;IACpG,MAAMK,uBAAuBhE,QAAQ,IAAMG,cAAcD,aAAa,EAAE;IAExE,qBACE,MAACc;QACCiD,IAAI;YACFC,SAAS7B,kBAAkB,UAAU;YACrC8B,QAAQhC,mBAAmB,GAAGZ,gBAAgB,EAAE,CAAC,GAAG;YACpD6C,UAAUjC,mBAAmB,WAAW;QAC1C;;YAECV,gBAAgB4C,KAAK,KAAK/B,2BACzB,KAACxB;gBACCO,cAAcA;gBACdgD,OAAO5C,gBAAgB4C,KAAK;gBAC5BC,UACE7C,gBAAgBI,WAAW,KAAKS,YAC5BA,YACA;oBAAEX;oBAAQ4C,cAAc,IAAM3C,UAAU,CAAC4C,UAAY,CAACA;gBAAS;;0BAIzE,KAACpE;gBAASqE,IAAI9C;gBAAQ+C,aAAa;gBAACC,QAAQ;gBAAOC,eAAY;0BAC7D,cAAA,KAACZ;oBACCa,WAAU;oBACVC,aAAa;wBAAEC,IAAIvD,MAAMsD,WAAW,CAACE,MAAM,CAACD,EAAE;wBAAEE,KAAK;oBAAE;oBACvDtB,MAAM/C;oBACNsE,WAAWhE;oBACXiE,iBAAgB;oBAChBC,eAAe;wBAAC;qBAAK;oBACrBC,aAAavD,cAAc,CAACI;oBAC5BoD,aAAaxD,cAAc,CAACI;oBAC5BwB,QAAQ;wBAACzC;wBAAgBA;qBAAe;oBACxC2C,kBAAkB;wBAAC;wBAAG;qBAAG;oBACzB2B,SAAS;wBAAE,CAAC1E,6BAA6B,EAAE0B;oBAAY;oBACvDiD,gBAAgBpC;oBAChBqC,eAAejC;oBACfkC,cAAcxD;8BAEbK,YAAYC,GAAG,CAAC,CAAC,EAAEE,CAAC,EAAEO,CAAC,EAAE,iBACxB,KAAC0C;4BAECC,OAAO;gCACL1B,SAAS/B,qBAAqBG,YAAaH,qBAAqBO,IAAI,UAAU,SAAU;4BAC1F;sCAEA,cAAA,KAACnC;gCAAcsF,mBAAmBvF;0CAChC,cAAA,KAACS;oCACCO,cAAcA;oCACdwE,kBAAkB;wCAAEzE;wCAAce,wBAAwBM;oCAAE;oCAC5DqD,OAAOC,uBAAuB/C,GAAGlB;;;2BAThCW;;;;;AAkBnB;AAEA;;;;;;CAMC,GACD,MAAMsD,yBAAyB,CAAC/C,GAAWgD;IACzC,qEAAqE;IACrE,IAAI,CAACC,OAAOC,QAAQ,CAAClD,IAAI,OAAOA;IAChC,OAAOJ,KAAKC,KAAK,CAACmD,WAAWhD,IAAIJ,KAAKuD,GAAG,CAAC,GAAGnD,IAAI,KAAKhC;AACxD"}

package/dist/components/GridLayout/GridTitle.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/GridLayout/GridTitle.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Box, IconButton, Stack, Typography } from '@mui/material';\nimport ExpandedIcon from 'mdi-material-ui/ChevronDown';\nimport CollapsedIcon from 'mdi-material-ui/ChevronRight';\nimport AddPanelIcon from 'mdi-material-ui/ChartBoxPlusOutline';\nimport PencilIcon from 'mdi-material-ui/PencilOutline';\nimport ArrowUpIcon from 'mdi-material-ui/ArrowUp';\nimport ArrowDownIcon from 'mdi-material-ui/ArrowDown';\nimport DeleteIcon from 'mdi-material-ui/DeleteOutline';\nimport { InfoTooltip } from '@perses-dev/components';\nimport { useReplaceVariablesInString } from '@perses-dev/plugin-system';\nimport { PanelGroupId } from '@perses-dev/core';\nimport { ReactElement } from 'react';\nimport { ARIA_LABEL_TEXT, TOOLTIP_TEXT } from '../../constants';\nimport { usePanelGroupActions, useEditMode, useDeletePanelGroupDialog } from '../../context';\n\nexport interface GridTitleProps {\n panelGroupId: PanelGroupId;\n title: string;\n collapse?: {\n isOpen: boolean;\n onToggleOpen: () => void;\n };\n}\n\n/*\n Renders the title for a Grid section, optionally also supporting expanding\n * and collapsing\n */\nexport function GridTitle(props: GridTitleProps): ReactElement {\n const { panelGroupId, title: rawTitle, collapse } = props;\n\n const title = useReplaceVariablesInString(rawTitle) as string;\n\n const { openAddPanel, openEditPanelGroup, moveUp, moveDown } = usePanelGroupActions(panelGroupId);\n const { openDeletePanelGroupDialog } = useDeletePanelGroupDialog();\n const { isEditMode } = useEditMode();\n\n const text = <Typography variant=\"h2\">{title}</Typography>;\n\n return (\n <Box\n onClick={collapse?.onToggleOpen}\n sx={{\n display: 'flex',\n justifyContent: 'start',\n alignItems: 'center',\n cursor: collapse ? 'pointer' : 'auto',\n backgroundColor: ({ palette }) => palette.background.paper,\n }}\n data-testid=\"panel-group-header\"\n >\n {collapse ? (\n <>\n <IconButton sx={{ marginRight: 1 }} aria-label={`${collapse.isOpen ? 'collapse' : 'expand'} group ${title}`}>\n {collapse.isOpen ? <ExpandedIcon /> : <CollapsedIcon />}\n </IconButton>\n {text}\n {isEditMode && (\n <Stack direction=\"row\" marginLeft=\"auto\">\n <InfoTooltip description={TOOLTIP_TEXT.addPanelToGroup}>\n <IconButton\n aria-label={ARIA_LABEL_TEXT.addPanelToGroup(title)}\n onClick={(e) => {\n // Don't trigger expand/collapse\n e.stopPropagation();\n openAddPanel();\n }}\n >\n <AddPanelIcon />\n </IconButton>\n </InfoTooltip>\n <InfoTooltip description={TOOLTIP_TEXT.editGroup}>\n <IconButton\n aria-label={ARIA_LABEL_TEXT.editGroup(title)}\n onClick={(e) => {\n // Don't trigger expand/collapse\n e.stopPropagation();\n openEditPanelGroup();\n }}\n >\n <PencilIcon />\n </IconButton>\n </InfoTooltip>\n <InfoTooltip description={TOOLTIP_TEXT.deleteGroup}>\n <IconButton\n aria-label={ARIA_LABEL_TEXT.deleteGroup(title)}\n onClick={(e) => {\n // Don't trigger expand/collapse\n e.stopPropagation();\n openDeletePanelGroupDialog(panelGroupId);\n }}\n >\n <DeleteIcon />\n </IconButton>\n </InfoTooltip>\n <InfoTooltip description={TOOLTIP_TEXT.moveGroupDown}>\n <IconButton\n aria-label={ARIA_LABEL_TEXT.moveGroupDown(title)}\n disabled={moveDown === undefined}\n onClick={(e) => {\n // Don't trigger expand/collapse\n e.stopPropagation();\n moveDown?.();\n }}\n >\n <ArrowDownIcon />\n </IconButton>\n </InfoTooltip>\n <InfoTooltip description={TOOLTIP_TEXT.moveGroupUp}>\n <IconButton\n aria-label={ARIA_LABEL_TEXT.moveGroupUp(title)}\n disabled={moveUp === undefined}\n onClick={(e) => {\n // Don't trigger expand/collapse\n e.stopPropagation();\n moveUp?.();\n }}\n >\n <ArrowUpIcon />\n </IconButton>\n </InfoTooltip>\n </Stack>\n )}\n </>\n ) : (\n // If we don't need expand/collapse, just render the title text\n text\n )}\n </Box>\n );\n}\n"],"names":["Box","IconButton","Stack","Typography","ExpandedIcon","CollapsedIcon","AddPanelIcon","PencilIcon","ArrowUpIcon","ArrowDownIcon","DeleteIcon","InfoTooltip","useReplaceVariablesInString","ARIA_LABEL_TEXT","TOOLTIP_TEXT","usePanelGroupActions","useEditMode","useDeletePanelGroupDialog","GridTitle","props","panelGroupId","title","rawTitle","collapse","openAddPanel","openEditPanelGroup","moveUp","moveDown","openDeletePanelGroupDialog","isEditMode","text","variant","onClick","onToggleOpen","sx","display","justifyContent","alignItems","cursor","backgroundColor","palette","background","paper","data-testid","marginRight","aria-label","isOpen","direction","marginLeft","description","addPanelToGroup","e","stopPropagation","editGroup","deleteGroup","moveGroupDown","disabled","undefined","moveGroupUp"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,GAAG,EAAEC,UAAU,EAAEC,KAAK,EAAEC,UAAU,QAAQ,gBAAgB;AACnE,OAAOC,kBAAkB,8BAA8B;AACvD,OAAOC,mBAAmB,+BAA+B;AACzD,OAAOC,kBAAkB,sCAAsC;AAC/D,OAAOC,gBAAgB,gCAAgC;AACvD,OAAOC,iBAAiB,0BAA0B;AAClD,OAAOC,mBAAmB,4BAA4B;AACtD,OAAOC,gBAAgB,gCAAgC;AACvD,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,2BAA2B,QAAQ,4BAA4B;AAGxE,SAASC,eAAe,EAAEC,YAAY,QAAQ,kBAAkB;AAChE,SAASC,oBAAoB,EAAEC,WAAW,EAAEC,yBAAyB,QAAQ,gBAAgB;AAW7F;;;CAGC,GACD,OAAO,SAASC,UAAUC,KAAqB;IAC7C,MAAM,EAAEC,YAAY,EAAEC,OAAOC,QAAQ,EAAEC,QAAQ,EAAE,GAAGJ;IAEpD,MAAME,QAAQT,4BAA4BU;IAE1C,MAAM,EAAEE,YAAY,EAAEC,kBAAkB,EAAEC,MAAM,EAAEC,QAAQ,EAAE,GAAGZ,qBAAqBK;IACpF,MAAM,EAAEQ,0BAA0B,EAAE,GAAGX;IACvC,MAAM,EAAEY,UAAU,EAAE,GAAGb;IAEvB,MAAMc,qBAAO,KAAC3B;QAAW4B,SAAQ;kBAAMV;;IAEvC,qBACE,KAACrB;QACCgC,SAAST,UAAUU;QACnBC,IAAI;YACFC,SAAS;YACTC,gBAAgB;YAChBC,YAAY;YACZC,QAAQf,WAAW,YAAY;YAC/BgB,iBAAiB,CAAC,EAAEC,OAAO,EAAE,GAAKA,QAAQC,UAAU,CAACC,KAAK;QAC5D;QACAC,eAAY;kBAEXpB,yBACC;;8BACE,KAACtB;oBAAWiC,IAAI;wBAAEU,aAAa;oBAAE;oBAAGC,cAAY,~~CAAC~~,~~EAAEtB,~~SAASuB,MAAM,GAAG,aAAa,SAAS,OAAO,EAAEzB,~~MAAM,CAAC~~;8BACxGE,SAASuB,MAAM,iBAAG,KAAC1C,kCAAkB,KAACC;;gBAExCyB;gBACAD,4BACC,MAAC3B;oBAAM6C,WAAU;oBAAMC,YAAW;;sCAChC,KAACrC;4BAAYsC,aAAanC,aAAaoC,eAAe;sCACpD,cAAA,KAACjD;gCACC4C,cAAYhC,gBAAgBqC,eAAe,CAAC7B;gCAC5CW,SAAS,CAACmB;oCACR,gCAAgC;oCAChCA,EAAEC,eAAe;oCACjB5B;gCACF;0CAEA,cAAA,KAAClB;;;sCAGL,KAACK;4BAAYsC,aAAanC,aAAauC,SAAS;sCAC9C,cAAA,KAACpD;gCACC4C,cAAYhC,gBAAgBwC,SAAS,CAAChC;gCACtCW,SAAS,CAACmB;oCACR,gCAAgC;oCAChCA,EAAEC,eAAe;oCACjB3B;gCACF;0CAEA,cAAA,KAAClB;;;sCAGL,KAACI;4BAAYsC,aAAanC,aAAawC,WAAW;sCAChD,cAAA,KAACrD;gCACC4C,cAAYhC,gBAAgByC,WAAW,CAACjC;gCACxCW,SAAS,CAACmB;oCACR,gCAAgC;oCAChCA,EAAEC,eAAe;oCACjBxB,2BAA2BR;gCAC7B;0CAEA,cAAA,KAACV;;;sCAGL,KAACC;4BAAYsC,aAAanC,aAAayC,aAAa;sCAClD,cAAA,KAACtD;gCACC4C,cAAYhC,gBAAgB0C,aAAa,CAAClC;gCAC1CmC,UAAU7B,aAAa8B;gCACvBzB,SAAS,CAACmB;oCACR,gCAAgC;oCAChCA,EAAEC,eAAe;oCACjBzB;gCACF;0CAEA,cAAA,KAAClB;;;sCAGL,KAACE;4BAAYsC,aAAanC,aAAa4C,WAAW;sCAChD,cAAA,KAACzD;gCACC4C,cAAYhC,gBAAgB6C,WAAW,CAACrC;gCACxCmC,UAAU9B,WAAW+B;gCACrBzB,SAAS,CAACmB;oCACR,gCAAgC;oCAChCA,EAAEC,eAAe;oCACjB1B;gCACF;0CAEA,cAAA,KAAClB;;;;;;aAOX,+DAA+D;QAC/DsB;;AAIR"}
1	+ {"version":3,"sources":["../../../src/components/GridLayout/GridTitle.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Box, IconButton, Stack, Typography } from '@mui/material';\nimport ExpandedIcon from 'mdi-material-ui/ChevronDown';\nimport CollapsedIcon from 'mdi-material-ui/ChevronRight';\nimport AddPanelIcon from 'mdi-material-ui/ChartBoxPlusOutline';\nimport PencilIcon from 'mdi-material-ui/PencilOutline';\nimport ArrowUpIcon from 'mdi-material-ui/ArrowUp';\nimport ArrowDownIcon from 'mdi-material-ui/ArrowDown';\nimport DeleteIcon from 'mdi-material-ui/DeleteOutline';\nimport { InfoTooltip } from '@perses-dev/components';\nimport { useReplaceVariablesInString } from '@perses-dev/plugin-system';\nimport { PanelGroupId } from '@perses-dev/core';\nimport { ReactElement } from 'react';\nimport { ARIA_LABEL_TEXT, TOOLTIP_TEXT } from '../../constants';\nimport { usePanelGroupActions, useEditMode, useDeletePanelGroupDialog } from '../../context';\n\nexport interface GridTitleProps {\n panelGroupId: PanelGroupId;\n title: string;\n collapse?: {\n isOpen: boolean;\n onToggleOpen: () => void;\n };\n}\n\n/*\n Renders the title for a Grid section, optionally also supporting expanding\n * and collapsing\n */\nexport function GridTitle(props: GridTitleProps): ReactElement {\n const { panelGroupId, title: rawTitle, collapse } = props;\n\n const title = useReplaceVariablesInString(rawTitle) as string;\n\n const { openAddPanel, openEditPanelGroup, moveUp, moveDown } = usePanelGroupActions(panelGroupId);\n const { openDeletePanelGroupDialog } = useDeletePanelGroupDialog();\n const { isEditMode } = useEditMode();\n\n const text = <Typography variant=\"h2\">{title}</Typography>;\n\n return (\n <Box\n onClick={collapse?.onToggleOpen}\n sx={{\n display: 'flex',\n justifyContent: 'start',\n alignItems: 'center',\n cursor: collapse ? 'pointer' : 'auto',\n backgroundColor: ({ palette }) => palette.background.paper,\n }}\n data-testid=\"panel-group-header\"\n >\n {collapse ? (\n <>\n <IconButton sx={{ marginRight: 1 }} aria-label={`${collapse.isOpen ? 'collapse' : 'expand'} group ${title}`}>\n {collapse.isOpen ? <ExpandedIcon /> : <CollapsedIcon />}\n </IconButton>\n {text}\n {isEditMode && (\n <Stack direction=\"row\" marginLeft=\"auto\">\n <InfoTooltip description={TOOLTIP_TEXT.addPanelToGroup}>\n <IconButton\n aria-label={ARIA_LABEL_TEXT.addPanelToGroup(title)}\n onClick={(e) => {\n // Don't trigger expand/collapse\n e.stopPropagation();\n openAddPanel();\n }}\n >\n <AddPanelIcon />\n </IconButton>\n </InfoTooltip>\n <InfoTooltip description={TOOLTIP_TEXT.editGroup}>\n <IconButton\n aria-label={ARIA_LABEL_TEXT.editGroup(title)}\n onClick={(e) => {\n // Don't trigger expand/collapse\n e.stopPropagation();\n openEditPanelGroup();\n }}\n >\n <PencilIcon />\n </IconButton>\n </InfoTooltip>\n <InfoTooltip description={TOOLTIP_TEXT.deleteGroup}>\n <IconButton\n aria-label={ARIA_LABEL_TEXT.deleteGroup(title)}\n onClick={(e) => {\n // Don't trigger expand/collapse\n e.stopPropagation();\n openDeletePanelGroupDialog(panelGroupId);\n }}\n >\n <DeleteIcon />\n </IconButton>\n </InfoTooltip>\n <InfoTooltip description={TOOLTIP_TEXT.moveGroupDown}>\n <IconButton\n aria-label={ARIA_LABEL_TEXT.moveGroupDown(title)}\n disabled={moveDown === undefined}\n onClick={(e) => {\n // Don't trigger expand/collapse\n e.stopPropagation();\n moveDown?.();\n }}\n >\n <ArrowDownIcon />\n </IconButton>\n </InfoTooltip>\n <InfoTooltip description={TOOLTIP_TEXT.moveGroupUp}>\n <IconButton\n aria-label={ARIA_LABEL_TEXT.moveGroupUp(title)}\n disabled={moveUp === undefined}\n onClick={(e) => {\n // Don't trigger expand/collapse\n e.stopPropagation();\n moveUp?.();\n }}\n >\n <ArrowUpIcon />\n </IconButton>\n </InfoTooltip>\n </Stack>\n )}\n </>\n ) : (\n // If we don't need expand/collapse, just render the title text\n text\n )}\n </Box>\n );\n}\n"],"names":["Box","IconButton","Stack","Typography","ExpandedIcon","CollapsedIcon","AddPanelIcon","PencilIcon","ArrowUpIcon","ArrowDownIcon","DeleteIcon","InfoTooltip","useReplaceVariablesInString","ARIA_LABEL_TEXT","TOOLTIP_TEXT","usePanelGroupActions","useEditMode","useDeletePanelGroupDialog","GridTitle","props","panelGroupId","title","rawTitle","collapse","openAddPanel","openEditPanelGroup","moveUp","moveDown","openDeletePanelGroupDialog","isEditMode","text","variant","onClick","onToggleOpen","sx","display","justifyContent","alignItems","cursor","backgroundColor","palette","background","paper","data-testid","marginRight","aria-label","isOpen","direction","marginLeft","description","addPanelToGroup","e","stopPropagation","editGroup","deleteGroup","moveGroupDown","disabled","undefined","moveGroupUp"],"mappings":"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"}

package/dist/components/Panel/HeaderIconButton.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 export declare const HeaderIconButton: import("@emotion/styled").StyledComponent<import("@mui/material").IconButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
     ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
-}, "className" | "style" | "tabIndex" | "color" | "children" | "size" | "classes" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+}, "className" | "style" | "tabIndex" | "color" | "children" | "classes" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "loading" | "loadingIndicator" | "size" | "edge"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
 //# sourceMappingURL=HeaderIconButton.d.ts.map

package/dist/components/Panel/HeaderIconButton.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"HeaderIconButton.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/HeaderIconButton.tsx"],"names":[],"mappings":";AAeA,eAAO,MAAM,gBAAgB;;~~uZAG1B~~,CAAC"}
1	+ {"version":3,"file":"HeaderIconButton.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/HeaderIconButton.tsx"],"names":[],"mappings":";AAeA,eAAO,MAAM,gBAAgB;;wbAG1B,CAAC"}

package/dist/components/Panel/Panel.d.ts CHANGED Viewed

@@ -34,6 +34,11 @@ export type PanelExtraProps = {
 };
 /**
  * Renders a PanelDefinition's content inside of a Card.
+ *
+ * Internal structure:
+ * <Panel>                  // renders an entire panel, incl. header and action buttons
+ *   <PanelContent>         // renders loading, error or panel based on the queries' status
+ *     <PanelPluginLoader>  // loads a panel plugin from the plugin registry and renders the PanelComponent with data from props.queryResults
  */
 export declare const Panel: import("react").NamedExoticComponent<PanelProps>;
 //# sourceMappingURL=Panel.d.ts.map

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

	@@ -1 +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;~~AACnD~~,OAAO,EAAE,SAAS,EAA2B,MAAM,OAAO,CAAC;AAE3D,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;CACrC;AAED,MAAM,MAAM,YAAY,GAAG;IACzB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;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~~;;GAEG~~;AACH,eAAO,MAAM,KAAK,~~kDA+FhB~~,CAAC"}
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,EAA2B,MAAM,OAAO,CAAC;AAE3D,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;CACrC;AAED,MAAM,MAAM,YAAY,GAAG;IACzB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;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,kDAmGhB,CAAC"}

package/dist/components/Panel/Panel.js CHANGED Viewed

@@ -13,12 +13,18 @@
 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 { useDataQueriesContext } from '@perses-dev/plugin-system';
 import { memo, useMemo, useState } from 'react';
 import useResizeObserver from 'use-resize-observer';
 import { PanelContent } from './PanelContent';
 import { PanelHeader } from './PanelHeader';
 /**
  * Renders a PanelDefinition's content inside of a Card.
+ *
+ * Internal structure:
+ * <Panel>                  // renders an entire panel, incl. header and action buttons
+ *   <PanelContent>         // renders loading, error or panel based on the queries' status
+ *     <PanelPluginLoader>  // loads a panel plugin from the plugin registry and renders the PanelComponent with data from props.queryResults
  */ export const Panel = /*#__PURE__*/ memo(function Panel(props) {
     const { definition, readHandlers, editHandlers, onMouseEnter, onMouseLeave, sx, panelOptions, panelGroupItemId, ...others } = props;
     // Make sure we have an ID we can use for aria attributes
@@ -39,6 +45,7 @@ import { PanelHeader } from './PanelHeader';
         height
     ]);
     const chartsTheme = useChartsTheme();
+    const { queryResults } = useDataQueriesContext();
     const handleMouseEnter = (e)=>{
         onMouseEnter?.(e);
     };
@@ -53,7 +60,7 @@ import { PanelHeader } from './PanelHeader';
             display: 'flex',
             flexFlow: 'column nowrap',
             ':hover': {
-                '--panel-hover': 'true'
+                '--panel-hover': 'block'
             }
         }, sx),
         variant: "outlined",
@@ -72,6 +79,7 @@ import { PanelHeader } from './PanelHeader';
                 id: headerId,
                 title: definition.spec.display.name,
                 description: definition.spec.display.description,
+                queryResults: queryResults,
                 readHandlers: readHandlers,
                 editHandlers: editHandlers,
                 links: definition.spec.links,
@@ -102,7 +110,8 @@ import { PanelHeader } from './PanelHeader';
                         definition: definition,
                         panelPluginKind: definition.spec.plugin.kind,
                         spec: definition.spec.plugin.spec,
-                        contentDimensions: contentDimensions
+                        contentDimensions: contentDimensions,
+                        queryResults: queryResults
                     })
                 })
             })

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

	@@ -1 +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 { ReactNode, memo, useMemo, useState } 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}\n\nexport type PanelOptions = {\n /*\n Allow you to hide the panel header if desired.\n * This can be useful in embedded mode for example.\n /\n hideHeader?: boolean;\n /\n Content to render in right of the panel header. (top right of the panel)\n * It will only be rendered when the panel is in edit mode.\n /\n extra?: (props: PanelExtraProps) => ReactNode;\n};\n\nexport type PanelExtraProps = {\n /\n The PanelDefinition for the panel.\n /\n panelDefinition?: PanelDefinition;\n /\n The PanelGroupItemId for the panel.\n /\n panelGroupItemId?: PanelGroupItemId;\n};\n\n/\n Renders a PanelDefinition's content inside of a Card.\n */\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 ...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 handleMouseEnter: CardProps['onMouseEnter'] = (e) => {\n onMouseEnter?.(e);\n };\n\n const handleMouseLeave: CardProps['onMouseLeave'] = (e) => {\n onMouseLeave?.(e);\n };\n\n return (\n <Card\n component=\"section\"\n sx={combineSx(\n {\n width: '100%',\n height: '100%',\n display: 'flex',\n flexFlow: 'column nowrap',\n ':hover': { '--panel-hover': '~~true~~' },\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 readHandlers={readHandlers}\n editHandlers={editHandlers}\n links={definition.spec.links}\n sx={{ paddingX: `${chartsTheme.container.padding.default}px` }}\n />\n )}\n <CardContent\n component=\"figure\"\n sx={{\n position: 'relative',\n overflow: 'hidden',\n flexGrow: 1,\n margin: 0,\n padding: 0,\n // Override MUI default style for last-child\n ':last-child': {\n padding: 0,\n },\n }}\n ref={setContentElement}\n >\n <ErrorBoundary FallbackComponent={ErrorAlert} resetKeys={[definition.spec]}>\n <PanelContent\n definition={definition}\n panelPluginKind={definition.spec.plugin.kind}\n spec={definition.spec.plugin.spec}\n contentDimensions={contentDimensions}\n />\n </ErrorBoundary>\n </CardContent>\n </Card>\n );\n});\n"],"names":["Card","CardContent","ErrorAlert","ErrorBoundary","combineSx","useChartsTheme","useId","memo","useMemo","useState","useResizeObserver","PanelContent","PanelHeader","Panel","props","definition","readHandlers","editHandlers","onMouseEnter","onMouseLeave","sx","panelOptions","panelGroupItemId","others","generatedPanelId","headerId","contentElement","setContentElement","width","height","ref","contentDimensions","undefined","chartsTheme","handleMouseEnter","e","handleMouseLeave","component","display","flexFlow","variant","aria-labelledby","aria-describedby","data-testid","hideHeader","extra","panelDefinition","id","title","spec","name","description","links","paddingX","container","padding","default","position","overflow","flexGrow","margin","FallbackComponent","resetKeys","panelPluginKind","plugin","kind"],"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,IAAI,EAAEC,WAAW,QAAmB,gBAAgB;AAC7D,SAASC,UAAU,EAAEC,aAAa,EAAEC,SAAS,EAAEC,cAAc,EAAEC,KAAK,QAAQ,yBAAyB;AAErG,SAAoBC,IAAI,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,QAAQ;AAC3D,OAAOC,uBAAuB,sBAAsB;AAEpD,SAASC,YAAY,QAAQ,iBAAiB;AAC9C,SAASC,WAAW,QAA0B,gBAAgB;AAkC9D~~;;CAEC~~,GACD,OAAO,MAAMC,sBAAQN,KAAK,SAASM,MAAMC,KAAiB;IACxD,MAAM,EACJC,UAAU,EACVC,YAAY,EACZC,YAAY,EACZC,YAAY,EACZC,YAAY,EACZC,EAAE,EACFC,YAAY,EACZC,gBAAgB,EAChB,GAAGC,QACJ,GAAGT;IAEJ,yDAAyD;IACzD,MAAMU,~~mBAAmBlB~~,MAAM;IAC/B,~~MAAMmB~~,WAAW,~~CAAC~~,~~EAAED,~~iBAAiB,OAAO,CAAC;IAE7C,MAAM,CAACE,gBAAgBC,kBAAkB,GAAGlB,SAA6B;IAEzE,MAAM,EAAEmB,KAAK,EAAEC,MAAM,EAAE,GAAGnB,kBAAkB;QAAEoB,KAAKJ;IAAe;IAElE,MAAMK,oBAAoBvB,QAAQ;QAChC,IAAIoB,UAAUI,aAAaH,WAAWG,WAAW,OAAOA;QACxD,OAAO;YAAEJ;YAAOC;QAAO;IACzB,GAAG;QAACD;QAAOC;KAAO;IAElB,MAAMI,~~cAAc5B~~;IAEpB,MAAM6B,mBAA8C,CAACC;~~QACnDjB~~,~~eAAeiB~~;IACjB;IAEA,MAAMC,mBAA8C,CAACD;~~QACnDhB~~,~~eAAegB~~;IACjB;IAEA,qBACE,~~MAACnC~~;~~QACCqC~~,WAAU;~~QACVjB~~,~~IAAIhB~~,UACF;~~YACEwB~~,OAAO;YACPC,QAAQ;~~YACRS~~,SAAS;YACTC,UAAU;YACV,UAAU;gBAAE,iBAAiB;~~YAAO~~;~~QACtC~~,~~GACAnB~~;~~QAEFoB~~,SAAQ;~~QACRtB~~,~~cAAcgB~~;~~QACdf~~,~~cAAciB~~;QACdK,~~mBAAiBhB~~;~~QACjBiB~~,~~oBAAkBjB~~;~~QAClBkB~~,eAAY;QACX,~~GAAGpB~~,MAAM;;YAET,CAACF,~~cAAcuB~~,4BACd,~~KAAChC~~;~~gBACCiC~~,~~OAAOxB~~,~~cAAcwB~~,QAAQ;oBAAEC,~~iBAAiB/B~~;oBAAYO;gBAAiB;~~gBAC7EyB~~,~~IAAItB~~;~~gBACJuB~~,~~OAAOjC~~,~~WAAWkC~~,IAAI,CAACX,OAAO,CAACY,IAAI;gBACnCC,~~aAAapC~~,~~WAAWkC~~,IAAI,CAACX,OAAO,CAACa,WAAW;~~gBAChDnC~~,cAAcA;gBACdC,cAAcA;~~gBACdmC~~,~~OAAOrC~~,~~WAAWkC~~,IAAI,CAACG,KAAK;~~gBAC5BhC~~,IAAI;~~oBAAEiC~~,UAAU,~~CAAC~~,~~EAAEpB~~,~~YAAYqB,~~SAAS,CAACC,OAAO,CAACC,OAAO,CAAC,EAAE,CAAC;gBAAC;;0BAGjE,~~KAACvD~~;~~gBACCoC~~,WAAU;~~gBACVjB~~,IAAI;~~oBACFqC~~,UAAU;oBACVC,UAAU;oBACVC,UAAU;oBACVC,QAAQ;oBACRL,SAAS;oBACT,4CAA4C;oBAC5C,eAAe;wBACbA,SAAS;oBACX;gBACF;~~gBACAzB~~,KAAKH;0BAEL,cAAA,~~KAACxB~~;~~oBAAc0D~~,~~mBAAmB3D~~;~~oBAAY4D~~,WAAW;~~wBAAC/C~~,~~WAAWkC~~,IAAI;qBAAC;8BACxE,cAAA,~~KAACtC~~;wBACCI,YAAYA;~~wBACZgD~~,~~iBAAiBhD~~,~~WAAWkC~~,IAAI,CAACe,MAAM,CAACC,IAAI;wBAC5ChB,~~MAAMlC~~,~~WAAWkC~~,IAAI,CAACe,MAAM,CAACf,IAAI;~~wBACjClB~~,mBAAmBA;;;;;;~~AAM/B~~,GAAG"}
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 } from '@perses-dev/plugin-system';\nimport { ReactNode, memo, useMemo, useState } 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}\n\nexport type PanelOptions = {\n /*\n Allow you to hide the panel header if desired.\n * This can be useful in embedded mode for example.\n /\n hideHeader?: boolean;\n /\n Content to render in right of the panel header. (top right of the panel)\n * It will only be rendered when the panel is in edit mode.\n /\n extra?: (props: PanelExtraProps) => ReactNode;\n};\n\nexport type PanelExtraProps = {\n /\n The PanelDefinition for the panel.\n /\n panelDefinition?: PanelDefinition;\n /\n The PanelGroupItemId for the panel.\n /\n panelGroupItemId?: PanelGroupItemId;\n};\n\n/\n Renders a PanelDefinition's content inside of a Card.\n \n Internal structure:\n * <Panel> // renders an entire panel, incl. header and action buttons\n * <PanelContent> // renders loading, error or panel based on the queries' status\n * <PanelPluginLoader> // loads a panel plugin from the plugin registry and renders the PanelComponent with data from props.queryResults\n */\nexport const Panel = memo(function Panel(props: PanelProps) {\n const {\n definition,\n readHandlers,\n editHandlers,\n onMouseEnter,\n onMouseLeave,\n sx,\n panelOptions,\n panelGroupItemId,\n ...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\n const handleMouseEnter: CardProps['onMouseEnter'] = (e) => {\n onMouseEnter?.(e);\n };\n\n const handleMouseLeave: CardProps['onMouseLeave'] = (e) => {\n onMouseLeave?.(e);\n };\n\n return (\n <Card\n component=\"section\"\n sx={combineSx(\n {\n width: '100%',\n height: '100%',\n display: 'flex',\n flexFlow: 'column nowrap',\n ':hover': { '--panel-hover': 'block' },\n },\n sx\n )}\n variant=\"outlined\"\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n aria-labelledby={headerId}\n aria-describedby={headerId}\n data-testid=\"panel\"\n {...others}\n >\n {!panelOptions?.hideHeader && (\n <PanelHeader\n extra={panelOptions?.extra?.({ panelDefinition: definition, panelGroupItemId })}\n id={headerId}\n title={definition.spec.display.name}\n description={definition.spec.display.description}\n queryResults={queryResults}\n readHandlers={readHandlers}\n editHandlers={editHandlers}\n links={definition.spec.links}\n sx={{ paddingX: `${chartsTheme.container.padding.default}px` }}\n />\n )}\n <CardContent\n component=\"figure\"\n sx={{\n position: 'relative',\n overflow: 'hidden',\n flexGrow: 1,\n margin: 0,\n padding: 0,\n // Override MUI default style for last-child\n ':last-child': {\n padding: 0,\n },\n }}\n ref={setContentElement}\n >\n <ErrorBoundary FallbackComponent={ErrorAlert} resetKeys={[definition.spec]}>\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","memo","useMemo","useState","useResizeObserver","PanelContent","PanelHeader","Panel","props","definition","readHandlers","editHandlers","onMouseEnter","onMouseLeave","sx","panelOptions","panelGroupItemId","others","generatedPanelId","headerId","contentElement","setContentElement","width","height","ref","contentDimensions","undefined","chartsTheme","queryResults","handleMouseEnter","e","handleMouseLeave","component","display","flexFlow","variant","aria-labelledby","aria-describedby","data-testid","hideHeader","extra","panelDefinition","id","title","spec","name","description","links","paddingX","container","padding","default","position","overflow","flexGrow","margin","FallbackComponent","resetKeys","panelPluginKind","plugin","kind"],"mappings":"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"}

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

@@ -1,5 +1,12 @@
 /// <reference types="react" />
+import { QueryData } from '@perses-dev/plugin-system';
+import { Link } from '@perses-dev/core';
 export interface PanelActionsProps {
+    title: string;
+    description?: string;
+    descriptionTooltipId: string;
+    links?: Link[];
+    extra?: React.ReactNode;
     editHandlers?: {
         onEditPanelClick: () => void;
         onDuplicatePanelClick: () => void;
@@ -9,8 +16,7 @@ export interface PanelActionsProps {
         isPanelViewed?: boolean;
         onViewPanelClick: () => void;
     };
-    extra?: React.ReactNode;
-    title: string;
+    queryResults: QueryData[];
 }
 export declare const PanelActions: React.FC<PanelActionsProps>;
 //# sourceMappingURL=PanelActions.d.ts.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"PanelActions.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/PanelActions.tsx"],"names":[],"mappings":";~~AA+BA~~,MAAM,WAAW,iBAAiB;IAChC,YAAY,CAAC,EAAE;QACb,gBAAgB,EAAE,MAAM,IAAI,CAAC;QAC7B,qBAAqB,EAAE,MAAM,IAAI,CAAC;QAClC,kBAAkB,EAAE,MAAM,IAAI,CAAC;KAChC,CAAC;IACF,YAAY,CAAC,EAAE;QACb,aAAa,CAAC,EAAE,OAAO,CAAC;QACxB,gBAAgB,EAAE,MAAM,IAAI,CAAC;KAC9B,CAAC;IACF,~~KAAK~~,~~CAAC,~~EAAE,~~KAAK,CAAC,~~SAAS,~~CAAC;IACxB,KAAK,~~EAAE,~~MAAM,~~CAAC;~~CACf~~;~~AAED~~,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,~~CA0GpD~~,CAAC"}
1	+ {"version":3,"file":"PanelActions.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/PanelActions.tsx"],"names":[],"mappings":";AAuBA,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAGtD,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAWxC,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oBAAoB,EAAE,MAAM,CAAC;IAC7B,KAAK,CAAC,EAAE,IAAI,EAAE,CAAC;IACf,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,YAAY,CAAC,EAAE;QACb,gBAAgB,EAAE,MAAM,IAAI,CAAC;QAC7B,qBAAqB,EAAE,MAAM,IAAI,CAAC;QAClC,kBAAkB,EAAE,MAAM,IAAI,CAAC;KAChC,CAAC;IACF,YAAY,CAAC,EAAE;QACb,aAAa,CAAC,EAAE,OAAO,CAAC;QACxB,gBAAgB,EAAE,MAAM,IAAI,CAAC;KAC9B,CAAC;IACF,YAAY,EAAE,SAAS,EAAE,CAAC;CAC3B;AASD,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAqMpD,CAAC"}