Scrolling working
Plotly does not always size correctly
This commit is contained in:
parent
52ec9fdcf0
commit
889a3f9e3b
@ -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 */
|
||||
|
||||
@ -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,6 +25,7 @@ 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 => {
|
||||
@ -36,30 +38,30 @@ const useAutoScrollToBottom = (
|
||||
scrollHeight - container.scrollTop - container.clientHeight <= container.clientHeight * threshold;
|
||||
|
||||
if (isNearBottom && !isUserScrollingUp) {
|
||||
console.log('Scrolling', {
|
||||
isNearBottom,
|
||||
isUserScrollingUp,
|
||||
scrollHeightToUser: scrollHeight,
|
||||
scrollHeight: container.scrollHeight,
|
||||
scrollTop: container.scrollTop,
|
||||
clientHeight: container.clientHeight,
|
||||
threshold,
|
||||
delta: container.scrollHeight - container.scrollTop - container.clientHeight
|
||||
});
|
||||
// console.log('Scrolling', {
|
||||
// isNearBottom,
|
||||
// isUserScrollingUp,
|
||||
// scrollHeightToUser: scrollHeight,
|
||||
// scrollHeight: container.scrollHeight,
|
||||
// scrollTop: container.scrollTop,
|
||||
// clientHeight: container.clientHeight,
|
||||
// threshold,
|
||||
// delta: container.scrollHeight - container.scrollTop - container.clientHeight
|
||||
// });
|
||||
container.scrollTo({
|
||||
top: container.scrollHeight,
|
||||
behavior: smooth ? 'smooth' : 'auto'
|
||||
});
|
||||
} else {
|
||||
console.log('Not scrolling', {
|
||||
isNearBottom,
|
||||
isUserScrollingUp,
|
||||
scrollHeight: container.scrollHeight,
|
||||
scrollTop: container.scrollTop,
|
||||
clientHeight: container.clientHeight,
|
||||
threshold,
|
||||
delta: container.scrollHeight - container.scrollTop - container.clientHeight
|
||||
});
|
||||
// console.log('Not scrolling', {
|
||||
// isNearBottom,
|
||||
// isUserScrollingUp,
|
||||
// scrollHeight: container.scrollHeight,
|
||||
// scrollTop: container.scrollTop,
|
||||
// clientHeight: container.clientHeight,
|
||||
// threshold,
|
||||
// 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 {
|
||||
useAutoScrollToBottom
|
||||
interface ScrollableProps {
|
||||
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,
|
||||
};
|
||||
|
||||
|
||||
@ -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>
|
||||
);
|
||||
|
||||
@ -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
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user