feat: recreate GE layout and add resizing with mouse and keyboard

package.json

@@ -8,9 +8,10 @@
                 "@azure/msal-browser": "3.26.1",
                 "@babel/core": "7.26.0",
                 "@babel/runtime": "7.26.0",
+                "@fluentui-contrib/react-resize-handle": "^0.6.1",
+                "@fluentui/react": "8.122.4",
                 "@fluentui/react-components": "9.56.8",
                 "@fluentui/react-icons": "2.0.270",
-                "@fluentui/react": "8.122.4",
                 "@fluentui/react-icons-mdl2": "1.3.80",
                 "@microsoft/applicationinsights-react-js": "17.3.4",
                 "@microsoft/applicationinsights-web": "3.3.4",
@@ -131,4 +132,4 @@
                 "reportFile": "test-report.xml",
                 "indent": 4
         }
-}
+}

public/index.html

@@ -63,9 +63,10 @@
     }
 
     body {
+      height: 100vh;
       margin: 0;
-      padding: 0;
-      border: 0;
+      display: flex;
+      flex-direction: column;
     }
 
     @keyframes lds-ring {

src/app/services/context/resize-context/ResizeContext.tsx

@@ -0,0 +1,11 @@
+import { createContext } from 'react';
+
+interface ResizeContext {
+  sidebarSize: number;
+  responseAreaSize: number;
+  dragValue: number;
+  parentHeight: number;
+  initiator: string;
+}
+
+export const ResizeContext = createContext<ResizeContext>({} as ResizeContext);

src/app/services/context/resize-context/ResizeProvider.tsx

@@ -0,0 +1,53 @@
+import { ReactNode, useEffect, useMemo, useState } from 'react';
+import { ResizeContext } from './ResizeContext';
+
+interface ResizeProviderProps {
+  children: ReactNode;
+}
+export const ResizeProvider = (props: ResizeProviderProps) => {
+  const { children } = props;
+  const [sidebarSize, setSidebarSize] = useState(0);
+  const [responseSize, setResponseSize] = useState(0);
+  const [parentHeight, setParentHeight] = useState(0);
+  const [initiatorValue, setInitiatorValue] = useState('');
+  const [dragValue, setDragValue] = useState(-1);
+
+  useEffect(() => {
+    const handleResize = (e: Event) => {
+      const layout = document.getElementById('layout');
+      if (layout) {
+        const parentOffset = layout.parentElement?.offsetHeight ?? 0;
+        setParentHeight(parentOffset);
+        const customEvent = e as CustomEvent;
+        const { initiator, value } = customEvent.detail as {
+          initiator: string;
+          value: number;
+        };
+        if (initiator === 'responseSize') {
+          setResponseSize(value);
+        } else if (initiator === 'sidebar') {
+          setSidebarSize(value);
+        }
+        setInitiatorValue(initiator);
+        setDragValue(value);
+      }
+    };
+    window.addEventListener('onResizeDragEnd', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  const contextValue = useMemo(() => {
+    return {
+      sidebarSize,
+      responseAreaSize: responseSize,
+      parentHeight,
+      initiator: initiatorValue,
+      dragValue
+    };
+  }, [sidebarSize, responseSize, parentHeight, initiatorValue, dragValue]);
+  return (
+    <ResizeContext.Provider value={contextValue}>
+      {children}
+    </ResizeContext.Provider>
+  );
+};

src/app/views/App.styles.ts

@@ -1,93 +1,94 @@
 import { FontSizes, ITheme } from '@fluentui/react';
 
 export const appStyles = (theme: ITheme) => {
-  return {
-    app: {
-      background: theme.semanticColors.bodyBackground,
-      color: theme.semanticColors.bodyText,
-      paddingTop: theme.spacing.s1,
-      height: '100%',
-      paddingRight: '15px',
-      paddingLeft: '4px',
-      paddingBottom: '5px',
-      marginLeft: 'auto',
-      marginRight: 'auto'
-    },
-    appRow: {
-      display: 'flex',
-      flexWrap: 'no-wrap',
-      alignItems: 'stretch'
-    },
-    tryItMessage: {
-      marginBottom: theme.spacing.s1
-    },
-    sidebar: {
-      background: theme.palette.neutralLighter,
-      paddingRight: 10,
-      paddingLeft: 10,
-      marginRight: 10,
-      marginBottom: 9
-    },
-    sidebarMini: {
-      background: theme.palette.neutralLighter,
-      maxWidth: '65px',
-      minWidth: '55px',
-      padding: 10,
-      marginBottom: 9
-    },
-    layoutExtra: {
-      minWidth: '95%',
-      maxWidth: '96%'
-    },
-    separator: {
-      borderBottom: '1px solid ' + theme.palette.neutralLight
-    },
-    sidebarToggle: {
-      marginBottom: theme.spacing.s1,
-      marginTop: theme.spacing.s1
-    },
-    previewButton: {
-      marginTop: theme.spacing.s1
-    },
-    graphExplorerLabel: {
-      fontSize: FontSizes.xLarge,
-      fontWeight: 600
-    },
-    graphExplorerLabelContainer: {
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'space-between',
-      width: 500
-    },
-    versionLabel: {
-      color: theme.palette.neutralSecondary,
-      fontSize: '10px',
-      paddingLeft: 3,
-      paddingTop: 5
-    },
-    statusAreaMobileScreen: {
-      marginTop: 5
-    },
-    statusAreaFullScreen: {
-      marginTop: 6,
-      position: 'relative',
-      bottom: 0
-    },
-    vResizeHandle: {
-      zIndex: 1,
-      borderRight: '1px solid silver',
-      '&:hover': {
-        borderRight: '3px solid silver'
-      }
-    },
-    feedbackButtonFullScreenDisplay: {
-      position: 'relative',
-      top: '5px'
-    },
-    feedbackButtonMobileDisplay: {
-      position: 'absolute',
-      top: '13px',
-      right: '10px'
-    }
-  };
+  // return {
+  //   app: {
+  //     background: theme.semanticColors.bodyBackground,
+  //     color: theme.semanticColors.bodyText,
+  //     paddingTop: theme.spacing.s1,
+  //     height: '100%',
+  //     paddingRight: '15px',
+  //     paddingLeft: '4px',
+  //     paddingBottom: '5px',
+  //     marginLeft: 'auto',
+  //     marginRight: 'auto'
+  //   },
+  //   appRow: {
+  //     display: 'flex',
+  //     flexWrap: 'no-wrap',
+  //     alignItems: 'stretch'
+  //   },
+  //   tryItMessage: {
+  //     marginBottom: theme.spacing.s1
+  //   },
+  //   sidebar: {
+  //     background: theme.palette.neutralLighter,
+  //     paddingRight: 10,
+  //     paddingLeft: 10,
+  //     marginRight: 10,
+  //     marginBottom: 9
+  //   },
+  //   sidebarMini: {
+  //     background: theme.palette.neutralLighter,
+  //     maxWidth: '65px',
+  //     minWidth: '55px',
+  //     padding: 10,
+  //     marginBottom: 9
+  //   },
+  //   layoutExtra: {
+  //     minWidth: '95%',
+  //     maxWidth: '96%'
+  //   },
+  //   separator: {
+  //     borderBottom: '1px solid ' + theme.palette.neutralLight
+  //   },
+  //   sidebarToggle: {
+  //     marginBottom: theme.spacing.s1,
+  //     marginTop: theme.spacing.s1
+  //   },
+  //   previewButton: {
+  //     marginTop: theme.spacing.s1
+  //   },
+  //   graphExplorerLabel: {
+  //     fontSize: FontSizes.xLarge,
+  //     fontWeight: 600
+  //   },
+  //   graphExplorerLabelContainer: {
+  //     display: 'flex',
+  //     alignItems: 'center',
+  //     justifyContent: 'space-between',
+  //     width: 500
+  //   },
+  //   versionLabel: {
+  //     color: theme.palette.neutralSecondary,
+  //     fontSize: '10px',
+  //     paddingLeft: 3,
+  //     paddingTop: 5
+  //   },
+  //   statusAreaMobileScreen: {
+  //     marginTop: 5
+  //   },
+  //   statusAreaFullScreen: {
+  //     marginTop: 6,
+  //     position: 'relative',
+  //     bottom: 0
+  //   },
+  //   vResizeHandle: {
+  //     zIndex: 1,
+  //     borderRight: '1px solid silver',
+  //     '&:hover': {
+  //       borderRight: '3px solid silver'
+  //     }
+  //   },
+  //   feedbackButtonFullScreenDisplay: {
+  //     position: 'relative',
+  //     top: '5px'
+  //   },
+  //   feedbackButtonMobileDisplay: {
+  //     position: 'absolute',
+  //     top: '13px',
+  //     right: '10px'
+  //   }
+  // };
+  return {}
 };