chore(weave): remove vertical drawer (#1231)

* remove vertical drawer * delete more styles
wandb · Feb 20, 2024 · 93a3097 · 93a3097
1 parent e33716c
commit 93a3097
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 78 deletions.
diff --git a/weave-js/src/components/PagePanelComponents/Home/Browse3.tsx b/weave-js/src/components/PagePanelComponents/Home/Browse3.tsx
@@ -73,7 +73,6 @@ import {useURLSearchParamsDict} from './Browse3/pages/util';
 import {useCall} from './Browse3/pages/wfReactInterface/interface';
 import {SideNav} from './Browse3/SideNav';
 import {useDrawerResize} from './useDrawerResize';
-import {useFlexDirection} from './useFlexDirection';
 
 LicenseInfo.setLicenseKey(
   '7684ecd9a2d817a3af28ae2a8682895aTz03NjEwMSxFPTE3MjgxNjc2MzEwMDAsUz1wcm8sTE09c3Vic2NyaXB0aW9uLEtWPTI='
@@ -135,9 +134,6 @@ const browse3Paths = (projectRoot: string) => [
   `${projectRoot}`,
 ];
 
-const SIDEBAR_WIDTH = 56;
-const NAVBAR_HEIGHT = 60;
-
 export const Browse3: FC<{
   hideHeader?: boolean;
   headerOffset?: number;
@@ -303,12 +299,10 @@ const MainPeekingLayout: FC = () => {
     params.project!
   );
   const targetBase = baseRouter.projectUrl(params.entity!, params.project!);
-  const flexDirection = useFlexDirection();
-  const isFlexRow = flexDirection === 'row';
   const isDrawerOpen = peekLocation != null;
   const windowSize = useWindowSize();
 
-  const {handleMousedown, drawerWidthPct, drawerHeightPct} = useDrawerResize();
+  const {handleMousedown, drawerWidthPct} = useDrawerResize();
   const closePeek = useClosePeek();
 
   useMousetrap('esc', closePeek);
@@ -321,7 +315,7 @@ const MainPeekingLayout: FC = () => {
         height: '100%',
         display: 'flex',
         overflow: 'hidden',
-        flexDirection,
+        flexDirection: 'row',
         alignContent: 'stretch',
       }}>
       <Box
@@ -333,41 +327,28 @@ const MainPeekingLayout: FC = () => {
           transition: !isDrawerOpen
             ? 'margin 225ms cubic-bezier(0, 0, 0.2, 1) 0ms'
             : 'none',
-          marginRight:
-            !isDrawerOpen || !isFlexRow
-              ? 0
-              : `${(drawerWidthPct * windowSize.width) / 100}px`,
-          // this is px hack to account for the navbar height
-          marginBottom:
-            !isDrawerOpen || isFlexRow
-              ? 0
-              : `${
-                  (drawerHeightPct * (windowSize.height - NAVBAR_HEIGHT)) / 100
-                }px`,
+          marginRight: !isDrawerOpen
+            ? 0
+            : `${(drawerWidthPct * windowSize.width) / 100}px`,
         }}>
         <Browse3ProjectRoot projectRoot={baseRouterProjectRoot} />
       </Box>
 
       <Drawer
         variant="persistent"
-        anchor={isFlexRow ? 'right' : 'bottom'}
+        anchor="right"
         open={isDrawerOpen}
         onClose={closePeek}
         PaperProps={{
           style: {
             overflow: 'hidden',
             display: 'flex',
             zIndex: 1,
-            width: isFlexRow
-              ? `${drawerWidthPct}%`
-              : `calc(100% - ${SIDEBAR_WIDTH}px)`,
-            height: !isFlexRow ? `${drawerHeightPct}%` : '100%',
-            margin: isFlexRow ? 0 : `0 0 0 ${SIDEBAR_WIDTH + 1}px`,
-            boxShadow: isFlexRow
-              ? 'rgba(15, 15, 15, 0.04) 0px 0px 0px 1px, rgba(15, 15, 15, 0.03) 0px 3px 6px, rgba(15, 15, 15, 0.06) 0px 9px 24px'
-              : 'rgba(15, 15, 15, 0.04) 0px 0px 0px 1px, rgba(15, 15, 15, 0.03) 3px 0px 6px, rgba(15, 15, 15, 0.06) 9px 0px 24px',
-            borderLeft: isFlexRow ? `1px solid ${MOON_200}` : 'none',
-            borderTop: !isFlexRow ? `1px solid ${MOON_200}` : 'none',
+            width: `${drawerWidthPct}%`,
+            height: '100%',
+            boxShadow:
+              'rgba(15, 15, 15, 0.04) 0px 0px 0px 1px, rgba(15, 15, 15, 0.03) 0px 3px 6px, rgba(15, 15, 15, 0.06) 0px 9px 24px',
+            borderLeft: `1px solid ${MOON_200}`,
             position: 'absolute',
           },
         }}
@@ -380,16 +361,11 @@ const MainPeekingLayout: FC = () => {
           style={{
             borderTop: '1px solid #ddd',
             position: 'absolute',
-            top: 0,
-            left: 0,
-            zIndex: 100,
+            inset: '0 auto 0 0',
+            zIndex: 2,
             backgroundColor: '#f4f7f9',
-            cursor: isFlexRow ? 'col-resize' : 'row-resize',
-            padding: isFlexRow ? '4px 0 0' : '0 4px 0 0',
-            bottom: isFlexRow ? 0 : 'auto',
-            right: isFlexRow ? 'auto' : 0,
-            width: isFlexRow ? '5px' : 'auto',
-            height: isFlexRow ? 'auto' : '5px',
+            cursor: 'col-resize',
+            width: '5px',
           }}
         />
         {peekLocation && (

diff --git a/weave-js/src/components/PagePanelComponents/Home/useDrawerResize.tsx b/weave-js/src/components/PagePanelComponents/Home/useDrawerResize.tsx
@@ -2,8 +2,6 @@ import {useWindowSize} from '@wandb/weave/common/hooks/useWindowSize';
 import {useLocalStorage} from '@wandb/weave/util/useLocalStorage';
 import React, {useCallback, useEffect, useRef, useState} from 'react';
 
-import {useFlexDirection} from './useFlexDirection';
-
 const setDrawerSize = (
   newSize: number,
   setSize: (value: number) => void,
@@ -20,30 +18,21 @@ const setDrawerSize = (
 };
 
 export const useDrawerResize = () => {
-  const flexDirection = useFlexDirection();
   const windowSize = useWindowSize();
   const defaultSize = 60;
-  const maxHeight = 85;
   const maxWidth = 90;
 
   //  We store the drawer width and height in local storage so that it persists
   const [width, setWidth] = useLocalStorage(
     'weaveflow-drawer-width-number',
     defaultSize
   );
-  const [height, setHeight] = useLocalStorage(
-    'weaveflow-drawer-height-number',
-    defaultSize
-  );
 
   useEffect(() => {
     if (width > maxWidth) {
       setWidth(defaultSize);
     }
-    if (height > maxHeight) {
-      setHeight(defaultSize);
-    }
-  }, [height, setHeight, setWidth, width]);
+  }, [setWidth, width]);
 
   //  We store this in a ref so that we can access it in the mousemove handler, in a useEffect.
   const [isResizing, setIsResizing] = useState(false);
@@ -77,20 +66,13 @@ export const useDrawerResize = () => {
         return;
       }
       const minWidth = (300 / windowSize.width) * 100;
-      const minHeight = (300 / windowSize.height) * 100;
-
       e.preventDefault();
-      if (flexDirection === 'row') {
-        const newWidth =
-          ((windowSize.width - e.clientX) * 100) / windowSize.width;
-        setDrawerSize(newWidth, setWidth, minWidth, maxWidth);
-      } else if (flexDirection === 'column') {
-        const newHeight =
-          ((windowSize.height - e.clientY) * 100) / windowSize.height;
-        setDrawerSize(newHeight, setHeight, minHeight, maxHeight);
-      }
+
+      const newWidth =
+        ((windowSize.width - e.clientX) * 100) / windowSize.width;
+      setDrawerSize(newWidth, setWidth, minWidth, maxWidth);
     },
-    [flexDirection, windowSize.height, windowSize.width, setHeight, setWidth]
+    [windowSize.width, setWidth]
   );
 
   useEffect(() => {
@@ -106,6 +88,5 @@ export const useDrawerResize = () => {
   return {
     handleMousedown,
     drawerWidthPct: width,
-    drawerHeightPct: height,
   };
 };
diff --git a/weave-js/src/components/PagePanelComponents/Home/useFlexDirection.tsx b/weave-js/src/components/PagePanelComponents/Home/useFlexDirection.tsx