[FEATURE] Panels can be viewed in full screen

ui/app/src/App.tsx

@@ -20,6 +20,10 @@ import Router from './Router';
 import { SignInRoute, SignUpRoute } from './model/route';
 import { AuthorizationProvider } from './context/Authorization';
 
+function isDashboardViewRoute(pathname: string): boolean {
+  return /\/projects\/[a-zA-Z0-9_]+\/dashboards\/[a-zA-Z0-9_]+/.test(pathname);
+}
+
 function App() {
   const location = useLocation();
   return (
@@ -42,7 +46,7 @@ function App() {
         >
           <Router />
         </Box>
-        <Footer />
+        {!isDashboardViewRoute(location.pathname) && <Footer />}
       </Box>
     </AuthorizationProvider>
   );

ui/dashboards/src/components/Dashboard/Dashboard.tsx

@@ -13,6 +13,7 @@
 
 import { Box, BoxProps } from '@mui/material';
 import { ErrorBoundary, ErrorAlert } from '@perses-dev/components';
+import { useRef } from 'react';
 import { usePanelGroupIds } from '../../context';
 import { GridLayout } from '../GridLayout';
 import { EmptyDashboard, EmptyDashboardProps } from '../EmptyDashboard';
@@ -26,16 +27,20 @@ export type DashboardProps = BoxProps & {
   emptyDashboardProps?: EmptyDashboardProps;
   panelOptions?: PanelOptions;
 };
+const HEADER_HEIGHT = 165; // Approximate height of the header in dashboard view (including the navbar and variables toolbar)
 
 /**
  * Renders a Dashboard for the provided Dashboard spec.
  */
 export function Dashboard({ emptyDashboardProps, panelOptions, ...boxProps }: DashboardProps) {
   const panelGroupIds = usePanelGroupIds();
+  const boxRef = useRef<HTMLDivElement>(null);
   const isEmpty = !panelGroupIds.length;
+  const dashboardTopPosition = boxRef.current?.getBoundingClientRect().top ?? HEADER_HEIGHT;
+  const panelFullHeight = window.innerHeight - dashboardTopPosition - window.scrollY;
 
   return (
-    <Box {...boxProps} sx={{ height: '100%' }}>
+    <Box {...boxProps} sx={{ height: '100%' }} ref={boxRef}>
       <ErrorBoundary FallbackComponent={ErrorAlert}>
         {isEmpty && (
           <Box sx={{ height: '100%', display: 'flex', alignItems: 'center' }}>
@@ -44,7 +49,12 @@ export function Dashboard({ emptyDashboardProps, panelOptions, ...boxProps }: Da
         )}
         {!isEmpty &&
           panelGroupIds.map((panelGroupId) => (
-            <GridLayout key={panelGroupId} panelGroupId={panelGroupId} panelOptions={panelOptions} />
+            <GridLayout
+              key={panelGroupId}
+              panelGroupId={panelGroupId}
+              panelOptions={panelOptions}
+              panelFullHeight={panelFullHeight}
+            />
           ))}
       </ErrorBoundary>
     </Box>

ui/dashboards/src/components/GridLayout/GridContainer.tsx

@@ -11,11 +11,12 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { useEffect, useState } from 'react';
-import { styled } from '@mui/material';
+import { ReactNode, useEffect, useState } from 'react';
+import { styled, SxProps, Theme } from '@mui/material';
 
 export interface GridContainerProps {
-  children: React.ReactNode;
+  children: ReactNode;
+  sx?: SxProps<Theme>;
 }
 
 export function GridContainer(props: GridContainerProps) {
@@ -28,13 +29,16 @@ export function GridContainer(props: GridContainerProps) {
 
   return (
     <ReactGridLayoutContainer
-      sx={{
-        // This adds spcing between grids (rows) in the overall dashboard
-        '& + &': { marginTop: (theme) => theme.spacing(1) },
-        // This disables the animation of grid items when a grid is first rendered
-        // (see https://github.com/react-grid-layout/react-grid-layout/issues/103)
-        '& .react-grid-item.cssTransforms': { transitionProperty: isFirstRender ? 'none' : 'transform' },
-      }}
+      sx={[
+        {
+          // This adds spacing between grids (rows) in the overall dashboard
+          '& + &': { marginTop: 1 },
+          // This disables the animation of grid items when a grid is first rendered
+          // (see https://github.com/react-grid-layout/react-grid-layout/issues/103)
+          '& .react-grid-item.cssTransforms': { transitionProperty: isFirstRender ? 'none' : 'transform' },
+        },
+        ...(Array.isArray(props.sx) ? props.sx : [props.sx]),
+      ]}
       data-testid="panel-group"
     >
       {props.children}

ui/dashboards/src/components/GridLayout/GridItemContent.tsx

@@ -14,9 +14,9 @@
 import { Box } from '@mui/material';
 import { useInView } from 'react-intersection-observer';
 import { DataQueriesProvider, usePlugin, useSuggestedStepMs } from '@perses-dev/plugin-system';
-import { PanelGroupItemId, useEditMode, usePanel, usePanelActions } from '../../context';
-import { Panel, PanelProps } from '../Panel/Panel';
-import { PanelOptions } from '../Panel';
+import { PanelGroupItemId, useEditMode, usePanel, usePanelActions, useViewPanel } from '../../context';
+import { Panel, PanelProps, PanelOptions } from '../Panel';
+import { isPanelGroupItemIdEqual } from '../../context/DashboardProvider/panel-group-slice';
 
 export interface GridItemContentProps {
   panelGroupItemId: PanelGroupItemId;
@@ -34,14 +34,25 @@ export function GridItemContent(props: GridItemContentProps) {
     spec: { queries },
   } = panelDefinition;
   const { isEditMode } = useEditMode();
-  const { openEditPanel, openDeletePanelDialog, duplicatePanel } = usePanelActions(panelGroupItemId);
-
+  const { openEditPanel, openDeletePanelDialog, duplicatePanel, viewPanel } = usePanelActions(panelGroupItemId);
+  const viewPanelGroupItemId = useViewPanel();
   const { ref, inView } = useInView({
     threshold: 0.2, // we have the flexibility to adjust this threshold to trigger queries slightly earlier or later based on performance
     initialInView: false,
     triggerOnce: true,
   });
 
+  const readHandlers = {
+    isPanelViewed: isPanelGroupItemIdEqual(viewPanelGroupItemId, panelGroupItemId),
+    onViewPanelClick: function () {
+      if (viewPanelGroupItemId === undefined) {
+        viewPanel(panelGroupItemId);
+      } else {
+        viewPanel(undefined);
+      }
+    },
+  };
+
   // Provide actions to the panel when in edit mode
   let editHandlers: PanelProps['editHandlers'] = undefined;
   if (isEditMode) {
@@ -81,6 +92,7 @@ export function GridItemContent(props: GridItemContentProps) {
         {inView && (
           <Panel
             definition={panelDefinition}
+            readHandlers={readHandlers}
             editHandlers={editHandlers}
             panelOptions={props.panelOptions}
             panelGroupItemId={panelGroupItemId}

ui/dashboards/src/components/GridLayout/GridLayout.tsx

@@ -10,45 +10,87 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 import { Responsive, WidthProvider, Layouts, Layout } from 'react-grid-layout';
 import { Collapse, useTheme } from '@mui/material';
 import { ErrorAlert, ErrorBoundary } from '@perses-dev/components';
-import { useEditMode, usePanelGroup, usePanelGroupActions, PanelGroupId } from '../../context';
+import {
+  useEditMode,
+  usePanelGroup,
+  usePanelGroupActions,
+  PanelGroupId,
+  PanelGroupItemLayout,
+  useViewPanel,
+  PanelGroupDefinition,
+} from '../../context';
 import { GRID_LAYOUT_COLS, GRID_LAYOUT_SMALL_BREAKPOINT } from '../../constants';
 import { PanelOptions } from '../Panel';
 import { GridTitle } from './GridTitle';
 import { GridItemContent } from './GridItemContent';
 import { GridContainer } from './GridContainer';
 const DEFAULT_MARGIN = 10;
+const ROW_HEIGHT = 30;
 const ResponsiveGridLayout = WidthProvider(Responsive);
 
 export interface GridLayoutProps {
   panelGroupId: PanelGroupId;
   panelOptions?: PanelOptions;
+  panelFullHeight?: number;
 }
 
 /**
  * Layout component that arranges children in a Grid based on the definition.
  */
 export function GridLayout(props: GridLayoutProps) {
-  const { panelGroupId /*...others */ } = props;
+  const { panelGroupId, panelOptions, panelFullHeight } = props;
   const theme = useTheme();
-  const groupDefinition = usePanelGroup(panelGroupId);
+  const groupDefinition: PanelGroupDefinition = usePanelGroup(panelGroupId);
   const { updatePanelGroupLayouts } = usePanelGroupActions(panelGroupId);
 
   const [isOpen, setIsOpen] = useState(!groupDefinition.isCollapsed ?? true);
   const { isEditMode } = useEditMode();
 
   const [gridColWidth, setGridColWidth] = useState(0);
 
+  const viewPanelItemId = useViewPanel();
+  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;
+    }
+    return hasViewPanel;
+  }, [hasViewPanel, viewPanelItemId]);
+
+  // Item layout is override if there is a panel in view mode
+  const itemLayouts: PanelGroupItemLayout[] = useMemo(() => {
+    if (itemLayoutViewed) {
+      return groupDefinition.itemLayouts.map((itemLayout) => {
+        if (itemLayout.i === itemLayoutViewed) {
+          const rowTitleHeight = 40 + 8; // 40 is the height of the row title and 8 is the margin height
+          return {
+            h: Math.round(((panelFullHeight ?? window.innerHeight) - rowTitleHeight) / (ROW_HEIGHT + DEFAULT_MARGIN)), // Viewed panel should take the full height remaining
+            i: itemLayoutViewed,
+            w: 48,
+            x: 0,
+            y: 0,
+          } as PanelGroupItemLayout;
+        }
+        return itemLayout;
+      });
+    }
+    return groupDefinition.itemLayouts;
+  }, [groupDefinition.itemLayouts, itemLayoutViewed, panelFullHeight]);
+
   const handleLayoutChange = (currentLayout: Layout[], allLayouts: Layouts) => {
     // Using the value from `allLayouts` instead of `currentLayout` because of
     // a bug in react-layout-grid where `currentLayout` does not adjust properly
     // when going to a smaller breakpoint and then back to a larger breakpoint.
     // https://github.com/react-grid-layout/react-grid-layout/issues/1663
     const smallLayout = allLayouts[GRID_LAYOUT_SMALL_BREAKPOINT];
-    if (smallLayout) {
+    if (smallLayout && !hasViewPanel) {
       updatePanelGroupLayouts(smallLayout);
     }
   };
@@ -71,7 +113,7 @@ export function GridLayout(props: GridLayoutProps) {
   };
 
   return (
-    <GridContainer>
+    <GridContainer sx={{ display: isGridDisplayed ? 'block' : 'none' }}>
       {groupDefinition.title !== undefined && (
         <GridTitle
           panelGroupId={panelGroupId}
@@ -88,22 +130,28 @@ export function GridLayout(props: GridLayoutProps) {
           className="layout"
           breakpoints={{ sm: theme.breakpoints.values.sm, xxs: 0 }}
           cols={GRID_LAYOUT_COLS}
-          rowHeight={30}
+          rowHeight={ROW_HEIGHT}
           draggableHandle=".drag-handle"
           resizeHandles={['se']}
-          isDraggable={isEditMode}
-          isResizable={isEditMode}
+          isDraggable={isEditMode && !hasViewPanel}
+          isResizable={isEditMode && !hasViewPanel}
           margin={[DEFAULT_MARGIN, DEFAULT_MARGIN]}
           containerPadding={[0, 10]}
-          layouts={{ [GRID_LAYOUT_SMALL_BREAKPOINT]: groupDefinition.itemLayouts }}
+          layouts={{ [GRID_LAYOUT_SMALL_BREAKPOINT]: itemLayouts }}
           onLayoutChange={handleLayoutChange}
           onWidthChange={handleWidthChange}
+          allowOverlap={hasViewPanel} // Enabling overlap when viewing a specific panel because panel in front of the viewed panel will add empty spaces (empty row height)
         >
-          {groupDefinition.itemLayouts.map(({ i, w }) => (
-            <div key={i}>
+          {itemLayouts.map(({ i, w }) => (
+            <div
+              key={i}
+              style={{
+                display: itemLayoutViewed !== undefined ? (itemLayoutViewed === i ? 'unset' : 'none') : 'unset',
+              }}
+            >
               <ErrorBoundary FallbackComponent={ErrorAlert}>
                 <GridItemContent
-                  panelOptions={props.panelOptions}
+                  panelOptions={panelOptions}
                   panelGroupItemId={{ panelGroupId, panelGroupItemLayoutId: i }}
                   width={calculateGridItemWidth(w, gridColWidth)}
                 />

ui/dashboards/src/components/Panel/Panel.tsx

@@ -22,6 +22,7 @@ import { PanelContent } from './PanelContent';
 
 export interface PanelProps extends CardProps<'section'> {
   definition: PanelDefinition;
+  readHandlers?: PanelHeaderProps['readHandlers'];
   editHandlers?: PanelHeaderProps['editHandlers'];
   panelOptions?: PanelOptions;
   panelGroupItemId?: PanelGroupItemId;
@@ -55,7 +56,17 @@ export type PanelExtraProps = {
  * Renders a PanelDefinition's content inside of a Card.
  */
 export const Panel = memo(function Panel(props: PanelProps) {
-  const { definition, editHandlers, onMouseEnter, onMouseLeave, sx, panelOptions, panelGroupItemId, ...others } = props;
+  const {
+    definition,
+    readHandlers,
+    editHandlers,
+    onMouseEnter,
+    onMouseLeave,
+    sx,
+    panelOptions,
+    panelGroupItemId,
+    ...others
+  } = props;
 
   // Make sure we have an ID we can use for aria attributes
   const generatedPanelId = useId('Panel');
@@ -106,6 +117,7 @@ export const Panel = memo(function Panel(props: PanelProps) {
           id={headerId}
           title={definition.spec.display.name}
           description={definition.spec.display.description}
+          readHandlers={readHandlers}
           editHandlers={editHandlers}
           links={definition.spec.links}
           sx={{ paddingX: `${chartsTheme.container.padding.default}px` }}

ui/dashboards/src/components/Panel/PanelHeader.tsx

@@ -17,6 +17,8 @@ import InformationOutlineIcon from 'mdi-material-ui/InformationOutline';
 import PencilIcon from 'mdi-material-ui/PencilOutline';
 import DeleteIcon from 'mdi-material-ui/DeleteOutline';
 import DragIcon from 'mdi-material-ui/DragVertical';
+import ArrowExpandIcon from 'mdi-material-ui/ArrowExpand';
+import ArrowCollapseIcon from 'mdi-material-ui/ArrowCollapse';
 import ContentCopyIcon from 'mdi-material-ui/ContentCopy';
 import { useReplaceVariablesInString } from '@perses-dev/plugin-system';
 import { ReactNode } from 'react';
@@ -31,6 +33,10 @@ export interface PanelHeaderProps extends Omit<CardHeaderProps, OmittedProps> {
   description?: string;
   links?: Link[];
   extra?: ReactNode;
+  readHandlers?: {
+    isPanelViewed?: boolean;
+    onViewPanelClick: () => void;
+  };
   editHandlers?: {
     onEditPanelClick: () => void;
     onDuplicatePanelClick: () => void;
@@ -43,6 +49,7 @@ export function PanelHeader({
   title: rawTitle,
   description: rawDescription,
   links,
+  readHandlers,
   editHandlers,
   sx,
   extra,
@@ -54,10 +61,28 @@ export function PanelHeader({
   const title = useReplaceVariablesInString(rawTitle) as string;
   const description = useReplaceVariablesInString(rawDescription);
 
-  let actions: CardHeaderProps['action'] = undefined;
+  let readActions: CardHeaderProps['action'] = undefined;
+  if (readHandlers !== undefined) {
+    readActions = (
+      <InfoTooltip description={TOOLTIP_TEXT.viewPanel}>
+        <HeaderIconButton
+          aria-label={ARIA_LABEL_TEXT.viewPanel(title)}
+          size="small"
+          onClick={readHandlers.onViewPanelClick}
+        >
+          {readHandlers.isPanelViewed ? (
+            <ArrowCollapseIcon fontSize="inherit" />
+          ) : (
+            <ArrowExpandIcon fontSize="inherit" />
+          )}
+        </HeaderIconButton>
+      </InfoTooltip>
+    );
+  }
+  let editActions: CardHeaderProps['action'] = undefined;
   if (editHandlers !== undefined) {
     // If there are edit handlers, always just show the edit buttons
-    actions = (
+    editActions = (
       <>
         <InfoTooltip description={TOOLTIP_TEXT.editPanel}>
           <HeaderIconButton
@@ -144,7 +169,7 @@ export function PanelHeader({
       }
       action={
         <HeaderActionWrapper direction="row" spacing={0.25} alignItems="center">
-          {editHandlers === undefined && extra} {actions}
+          {editHandlers === undefined && extra} {readActions} {editActions}
         </HeaderActionWrapper>
       }
       sx={combineSx(