Attempt at expand panel

elastic · Dec 31, 2024 · f034811 · f034811
1 parent f3fd580
commit f034811
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 88 deletions.
diff --git a/packages/kbn-grid-layout/grid/grid_height_smoother.tsx b/packages/kbn-grid-layout/grid/grid_height_smoother.tsx
@@ -9,7 +9,7 @@
 
 import { css } from '@emotion/react';
 import React, { PropsWithChildren, useEffect, useRef } from 'react';
-import { combineLatest, distinctUntilChanged, map } from 'rxjs';
+import { combineLatest } from 'rxjs';
 import { GridLayoutStateManager } from './types';
 
 export const GridHeightSmoother = ({
@@ -23,7 +23,7 @@ export const GridHeightSmoother = ({
       gridLayoutStateManager.gridDimensions$,
       gridLayoutStateManager.interactionEvent$,
     ]).subscribe(([dimensions, interactionEvent]) => {
-      if (!smoothHeightRef.current) return;
+      if (!smoothHeightRef.current || Boolean(gridLayoutStateManager.expandedPanelId$)) return;
       if (gridLayoutStateManager.expandedPanelId$.getValue()) {
         return;
       }
@@ -45,34 +45,8 @@ export const GridHeightSmoother = ({
       smoothHeightRef.current.style.userSelect = 'none';
     });
 
-    const expandedPanelSubscription = gridLayoutStateManager.expandedPanelId$.subscribe(
-      (expandedPanelId) => {
-        if (!smoothHeightRef.current) return;
-
-        if (expandedPanelId) {
-          smoothHeightRef.current.style.height = `100%`;
-          smoothHeightRef.current.style.transition = 'none';
-        } else {
-          smoothHeightRef.current.style.height = '';
-          smoothHeightRef.current.style.transition = '';
-        }
-      }
-    );
-
-    const marginSubscription = gridLayoutStateManager.runtimeSettings$
-      .pipe(
-        map(({ gutterSize }) => gutterSize),
-        distinctUntilChanged()
-      )
-      .subscribe((gutterSize) => {
-        if (!smoothHeightRef.current) return;
-        smoothHeightRef.current.style.margin = `${gutterSize}px`;
-      });
-
     return () => {
       interactionStyleSubscription.unsubscribe();
-      expandedPanelSubscription.unsubscribe();
-      marginSubscription.unsubscribe();
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
@@ -81,8 +55,9 @@ export const GridHeightSmoother = ({
     <div
       ref={smoothHeightRef}
       css={css`
+        height: 100%;
         // the guttersize cannot currently change, so it's safe to set it just once
-        padding: ${gridLayoutStateManager.runtimeSettings$.getValue().gutterSize};
+        padding: ${gridLayoutStateManager.runtimeSettings$.getValue().gutterSize}px;
         overflow-anchor: none;
         transition: height 500ms linear;
       `}

diff --git a/packages/kbn-grid-layout/grid/grid_layout.tsx b/packages/kbn-grid-layout/grid/grid_layout.tsx
@@ -153,6 +153,16 @@ export const GridLayout = ({
         css={css`
           &.kbnGrid--hasExpandedPanel {
             height: 100%;
+            .kbnGridPanel {
+              display: none;
+              &--isExpanded {
+                display: contents;
+                height: 100%;
+              }
+            }
+            .kbnGridRow {
+              display: block !important; // overwrite grid display
+            }
           }
         `}
       >

diff --git a/packages/kbn-grid-layout/grid/grid_row/grid_row.tsx b/packages/kbn-grid-layout/grid/grid_row/grid_row.tsx
@@ -114,36 +114,6 @@ export const GridRow = forwardRef<HTMLDivElement, GridRowProps>(
             }
           });
 
-        const expandedPanelStyleSubscription = gridLayoutStateManager.expandedPanelId$
-          .pipe(skip(1)) // skip the first emit because the `initialStyles` will take care of it
-          .subscribe((expandedPanelId) => {
-            const rowContainerRef = rowContainer.current;
-            if (!rowContainerRef) return;
-
-            if (expandedPanelId) {
-              // If any panel is expanded, move all rows with their panels out of the viewport.
-              // The expanded panel is repositioned to its original location in the GridPanel component
-              // and stretched to fill the viewport.
-
-              rowContainerRef.style.transform = 'translate(-9999px, -9999px)';
-
-              const panelsIds = Object.keys(
-                gridLayoutStateManager.gridLayout$.getValue()[rowIndex].panels
-              );
-              const includesExpandedPanel = panelsIds.includes(expandedPanelId);
-              if (includesExpandedPanel) {
-                // Stretch the row with the expanded panel to occupy the entire remaining viewport
-                rowContainerRef.style.height = '100%';
-              } else {
-                // Hide the row if it does not contain the expanded panel
-                rowContainerRef.style.height = '0';
-              }
-            } else {
-              rowContainerRef.style.transform = ``;
-              rowContainerRef.style.height = ``;
-            }
-          });
-
         /**
          * This subscription ensures that the row will re-render when one of the following changes:
          * - Title
@@ -182,7 +152,6 @@ export const GridRow = forwardRef<HTMLDivElement, GridRowProps>(
         return () => {
           interactionStyleSubscription.unsubscribe();
           rowStateSubscription.unsubscribe();
-          expandedPanelStyleSubscription.unsubscribe();
         };
       },
       // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -253,7 +222,12 @@ export const GridRow = forwardRef<HTMLDivElement, GridRowProps>(
     }, [panelIds, gridLayoutStateManager, renderPanelContents, rowIndex, setInteractionEvent]);
 
     return (
-      <div ref={rowContainer}>
+      <div
+        ref={rowContainer}
+        css={css`
+          height: 100%;
+        `}
+      >
         {rowIndex !== 0 && (
           <GridRowHeader
             isCollapsed={isCollapsed}
@@ -267,8 +241,10 @@ export const GridRow = forwardRef<HTMLDivElement, GridRowProps>(
         )}
         {!isCollapsed && (
           <div
+            className={'kbnGridRow'}
             ref={gridRef}
             css={css`
+              height: 100%;
               display: grid;
               justify-items: stretch;
               transition: background-color 300ms linear;

diff --git a/...m/plugins/shared/dashboard/public/dashboard_container/component/grid/_dashboard_grid.scss b/...m/plugins/shared/dashboard/public/dashboard_container/component/grid/_dashboard_grid.scss
@@ -8,35 +8,13 @@
  * otherwise the height is set inline.
  */
 .dshLayout-isMaximizedPanel {
-  height: 100% !important; /* 1. */
-
+  height: 100%;
+  
   .embPanel__hoverActionsLeft {
     visibility: hidden;
   }
 }
 
-/**
- * When a single panel is expanded, all the other panels moved offscreen.
- * Shifting the rendered panels offscreen prevents a quick flash when redrawing the panels on minimize
- */
-.dshDashboardGrid__item--hidden {
-  transform: translate(-9999px, -9999px);
-}
-
-/**
- * 1. We need to mark this as important because react grid layout sets the width and height of the panels inline.
- */
-.dshDashboardGrid__item--expanded {
-  position: absolute;
-  height: 100% !important; /* 1 */
-  width: 100% !important; /* 1 */
-  top: 0 !important; /* 1 */
-  left: 0 !important; /* 1 */
-  transform: none !important;
-
-  // Altered panel styles can be found in ../panel
-}
-
 // Remove padding in fullscreen mode
 .kbnAppWrapper--hiddenChrome {
   .dshDashboardGrid__item--expanded {

diff --git a/...s/shared/dashboard/public/dashboard_container/component/viewport/_dashboard_viewport.scss b/...s/shared/dashboard/public/dashboard_container/component/viewport/_dashboard_viewport.scss
@@ -11,12 +11,13 @@
 
 .dshDashboardViewport {
   width: 100%;
-}
 
-.dshDashboardViewport--panelExpanded {
-  flex: 1;
+  &--panelExpanded {
+    flex: 1;
+  }
 }
 
+
 .dshDashboardViewport-controls {
   margin: 0 $euiSizeS 0 $euiSizeS;
   padding-top: $euiSizeS;