diff --git a/weave-js/src/components/PagePanelComponents/Home/Browse3.tsx b/weave-js/src/components/PagePanelComponents/Home/Browse3.tsx index 5b347286368e..cc0c0951d705 100644 --- 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', }}> { 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`, }}> { 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 index d06a5b3d7198..a29318a5381f 100644 --- 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,10 +18,8 @@ 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 @@ -31,19 +27,12 @@ export const useDrawerResize = () => { '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 deleted file mode 100644 index e04d6e61d4b0..000000000000 --- a/weave-js/src/components/PagePanelComponents/Home/useFlexDirection.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import {useWindowSize} from '@wandb/weave/common/hooks/useWindowSize'; -import {useMemo} from 'react'; - -export const useFlexDirection = () => { - const windowSize = useWindowSize(); - - const flexDirection = useMemo(() => { - if (windowSize.height > windowSize.width * 0.66) { - return 'column'; - } - return 'row'; - }, [windowSize.height, windowSize.width]); - return flexDirection; -};