Scrolling working

Plotly does not always size correctly

frontend/src/App.tsx

@@ -23,7 +23,7 @@ import { Snack, SeverityType } from './Snack';
 import { VectorVisualizer } from './VectorVisualizer';
 import { Controls } from './Controls';
 import { Conversation, ConversationHandle } from './Conversation';
-import { useAutoScrollToBottom } from './AutoScroll';
+import { Scrollable } from './AutoScroll';
 
 import './App.css';
 import './Conversation.css';
@@ -81,7 +81,6 @@ const App = () => {
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down('md'));
   const snackRef = useRef<any>(null);
-  const scrollRef = useAutoScrollToBottom();
 
   useEffect(() => {
     if (prevIsDesktopRef.current === isDesktop)
@@ -302,17 +301,11 @@ const App = () => {
     ];
 
     return [
-      <Box
+      <Scrollable
         sx={{
           maxWidth: "1024px",
-          margin: "0 auto",
-          flexGrow: 1,
-          display: "flex",
           height: "calc(100vh - 72px)",
-          overflow: "auto",
-          backgroundColor: "#F5F5F5",
         }}
-        ref={scrollRef}
       >
         <Conversation
           ref={chatRef}
@@ -326,7 +319,7 @@ const App = () => {
             defaultPrompts: chatQuestions
           }}
         />
-      </Box>,
+      </Scrollable>,
       <ResumeBuilder sx={{
         margin: "0 auto",
         height: "calc(100vh - 72px)",
@@ -335,20 +328,14 @@ const App = () => {
         display: "flex",
         flexGrow: 1
       }} {...{ setSnack, connectionBase, sessionId }} />,
-      <Box
+      <Scrollable
         sx={{
           maxWidth: "1024px",
-          margin: "0 auto",
-          flexGrow: 1,
-          display: "flex",
           height: "calc(100vh - 72px)",
-          overflow: "auto",
-          backgroundColor: "#F5F5F5",
         }}
-        ref={scrollRef}
       >
         <VectorVisualizer {...{ connectionBase, sessionId, setSnack }} />
-      </Box>,
+      </Scrollable>,
       <Box className="ChatBox">
         <Box className="Conversation">
           <Message {...{ message: { role: 'content', content: about }, submitQuery: handleSubmitChatQuery, connectionBase, sessionId, setSnack }} />
@@ -360,7 +347,7 @@ const App = () => {
         }
       </Box>
     ];
-  }, [about, connectionBase, sessionId, setSnack, isMobile, scrollRef]);
+  }, [about, connectionBase, sessionId, setSnack, isMobile]);
 
 
   /* toolbar height is 64px + 8px margin-top */

frontend/src/AutoScroll.tsx

@@ -1,4 +1,6 @@
 import { useEffect, useRef, useState, RefObject } from 'react';
+import Box from '@mui/material/Box';
+import { SxProps, Theme } from '@mui/material';
 
 /**
  * Hook that automatically scrolls a container to the bottom when content changes
@@ -13,7 +15,6 @@ const useAutoScrollToBottom = (
   smooth: boolean = true
 ): RefObject<HTMLDivElement> => {
   const containerRef = useRef<HTMLDivElement>(null);
-  const [isUserScrollingUp, setIsUserScrollingUp] = useState<boolean>(false);
   const lastScrollTop = useRef<number>(0);
   const scrollTimeout = useRef<NodeJS.Timeout | null>(null);
   
@@ -24,7 +25,8 @@ const useAutoScrollToBottom = (
       return;
     }
     const lastScrollHeight = container.scrollHeight;
-    
+    var isUserScrollingUp = false;
+
     // Function to check if we should scroll to bottom
     const checkAndScrollToBottom = (priorScrollHeight?: number | undefined): void => {
       if (!container) return;
@@ -36,30 +38,30 @@ const useAutoScrollToBottom = (
       scrollHeight - container.scrollTop - container.clientHeight <= container.clientHeight * threshold;
       
       if (isNearBottom && !isUserScrollingUp) {
-        console.log('Scrolling', {
+        // console.log('Scrolling', {
-          isNearBottom, 
+        //   isNearBottom,
-          isUserScrollingUp, 
+        //   isUserScrollingUp,
-          scrollHeightToUser: scrollHeight,
+        //   scrollHeightToUser: scrollHeight,
-          scrollHeight: container.scrollHeight, 
+        //   scrollHeight: container.scrollHeight,
-          scrollTop: container.scrollTop, 
+        //   scrollTop: container.scrollTop,
-          clientHeight: container.clientHeight,
+        //   clientHeight: container.clientHeight,
-          threshold,
+        //   threshold,
-          delta: container.scrollHeight - container.scrollTop - container.clientHeight
+        //   delta: container.scrollHeight - container.scrollTop - container.clientHeight
-        });
+        // });
         container.scrollTo({
           top: container.scrollHeight,
           behavior: smooth ? 'smooth' : 'auto'
         });
       } else {
-        console.log('Not scrolling', {
+        // console.log('Not scrolling', {
-          isNearBottom, 
+        //   isNearBottom,
-          isUserScrollingUp, 
+        //   isUserScrollingUp,
-          scrollHeight: container.scrollHeight, 
+        //   scrollHeight: container.scrollHeight,
-          scrollTop: container.scrollTop, 
+        //   scrollTop: container.scrollTop,
-          clientHeight: container.clientHeight,
+        //   clientHeight: container.clientHeight,
-          threshold,
+        //   threshold,
-          delta: container.scrollHeight - container.scrollTop - container.clientHeight
+        //   delta: container.scrollHeight - container.scrollTop - container.clientHeight
-        });
+        // });
       }
     };
     
@@ -93,12 +95,12 @@ const useAutoScrollToBottom = (
       
       // Determine scroll direction
       const currentScrollTop = container.scrollTop;
-      setIsUserScrollingUp(currentScrollTop < lastScrollTop.current);
+      isUserScrollingUp = currentScrollTop < lastScrollTop.current;
       lastScrollTop.current = currentScrollTop;
       
       // Reset the scrolling flag after user stops scrolling
       scrollTimeout.current = setTimeout(() => {
-        setIsUserScrollingUp(false);
+        //setIsUserScrollingUp(false);
       }, 500);
     };
     
@@ -120,12 +122,33 @@ const useAutoScrollToBottom = (
         clearTimeout(scrollTimeout.current);
       }
     };
-  }, [isUserScrollingUp, smooth, threshold]); // Re-run when dependencies change or scrolling state changes
+  }, [smooth, threshold]); // Re-run when dependencies change or scrolling state changes
   
   return containerRef as RefObject<HTMLDivElement>;
 };
 
-export {
+interface ScrollableProps {
-  useAutoScrollToBottom
+  children?: React.ReactNode;
+  sx?: SxProps<Theme>,
+}
+
+const Scrollable = ({ sx, children }: ScrollableProps) => {
+  const scrollRef = useAutoScrollToBottom();
+  return <Box
+    sx={{
+      display: "flex",
+      margin: "0 auto",
+      flexGrow: 1,
+      overflow: "auto",
+      backgroundColor: "#F5F5F5",
+      ...sx
+    }}
+    ref={scrollRef}
+  >{children}</Box>;
+};
+
+export {
+  useAutoScrollToBottom,
+  Scrollable,
 };
 

frontend/src/ResumeBuilder.tsx

@@ -222,6 +222,7 @@ const ResumeBuilder: React.FC<ResumeBuilderProps> = ({
   }, []);
 
   const renderJobDescriptionView = useCallback((small: boolean) => {
+    console.log('renderJobDescriptionView');
     const jobDescriptionQuestions = [
       <Box sx={{ display: "flex", flexDirection: small ? "column" : "row" }}>
         <ChatQuery text="What are the key skills necessary for this position?" submitQuery={handleJobQuery} />
@@ -456,22 +457,6 @@ const ResumeBuilder: React.FC<ResumeBuilderProps> = ({
 
   // Render mobile view
   if (isMobile) {
-    /**
-     * Gets the appropriate content based on active tab
-     */
-    const getActiveMobileContent = () => {
-      switch (activeTab) {
-        case 0:
-          return renderJobDescriptionView(true);
-        case 1:
-          return renderResumeView(true);
-        case 2:
-          return renderFactCheckView(true);
-        default:
-          return renderJobDescriptionView(true);
-      }
-    };
-
     return (
       <Box sx={{
         p: 0,
@@ -499,7 +484,9 @@ const ResumeBuilder: React.FC<ResumeBuilderProps> = ({
 
         {/* Document display area */}
         <Box sx={{ display: 'flex', flexDirection: 'column', flexGrow: 1, p: 0, width: "100%", ...sx }}>
-          {getActiveMobileContent()}
+          <Box sx={{ display: activeTab === 0 ? "flex" : "none" }}>{renderJobDescriptionView(true)}</Box>
+          <Box sx={{ display: activeTab === 1 ? "flex" : "none" }}>{renderResumeView(true)}</Box>
+          <Box sx={{ display: activeTab === 2 ? "flex" : "none" }}>{renderFactCheckView(true)}</Box>
         </Box>
       </Box>
     );

frontend/src/VectorVisualizer.tsx

@@ -12,6 +12,8 @@ import Switch from '@mui/material/Switch';
 
 import { SetSnackType } from './Snack';
 
+import './VectorVisualizer.css';
+
 interface Metadata {
   doc_type?: string;
   [key: string]: any;
@@ -299,16 +301,30 @@ const VectorVisualizer: React.FC<VectorVisualizerProps> = ({ setSnack, rag, inli
   );
 
   return (
-    <Box className="VectorVisualizer" sx={{ display: 'flex', flexDirection: 'column', flexGrow: 1, overflow: 'hidden' }}>
+    <Box className="VectorVisualizer"
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        flexGrow: 1
+      }}>
       {
         !inline &&
-        <Card sx={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', mb: 1, pt: 0 }}>
+        <Card sx={{ display: 'flex', flexDirection: 'column', flexGrow: 1, minHeight: '2.5rem', justifyContent: 'center', alignItems: 'center', m: 0, p: 0, mb: 1 }}>
           <Typography variant="h6" sx={{ p: 1, pt: 0 }}>
             Similarity Visualization via Uniform Manifold Approximation and Projection (UMAP)
           </Typography>
         </Card>
       }
-      <FormControlLabel sx={{ display: "inline-flex", width: "fit-content", mb: '-2.5rem', zIndex: 100, ml: 1, flexBasis: 0, flexGrow: 0 }} control={<Switch checked={!view2D} />} onChange={() => setView2D(!view2D)} label="3D" />
+      <FormControlLabel sx={{
+        display: "inline-flex",
+        width: "fit-content",
+        mb: '-2.5rem',
+        zIndex: 100,
+        ml: 1,
+        flexBasis: 0,
+        flexGrow: 0
+      }}
+        control={<Switch checked={!view2D} />} onChange={() => setView2D(!view2D)} label="3D" />
       <Plot
         onClick={(event: any) => {
           const point = event.points[0];
@@ -323,7 +339,6 @@ const VectorVisualizer: React.FC<VectorVisualizerProps> = ({ setSnack, rag, inli
             content: `${emoji} ${type.toUpperCase()}\n${text}`,
           });
         }}
-
         data={[plotData.data]}
         useResizeHandler={true}
         config={{
@@ -333,7 +348,17 @@ const VectorVisualizer: React.FC<VectorVisualizerProps> = ({ setSnack, rag, inli
           showSendToCloud: false,
           staticPlot: false,
         }}
-        style={{ display: "flex", flexGrow: 1, justifyContent: 'center', alignItems: 'center', minHeight: '30vh', height: '30vh', padding: 0, margin: 0 }}
+        style={{
+          display: "flex",
+          flexGrow: 1,
+          justifyContent: 'center',
+          alignItems: 'center',
+          minHeight: '240px',
+          padding: 0,
+          margin: 0,
+          width: "100%",
+          height: "100%",
+        }}
         layout={plotData.layout}
       />
       {!inline &&
@@ -389,7 +414,7 @@ const VectorVisualizer: React.FC<VectorVisualizerProps> = ({ setSnack, rag, inli
   );
 };
 
-export type { VectorVisualizerProps, ResultData, Metadata };
+export type { VectorVisualizerProps, ResultData };
 
 export {
   VectorVisualizer