jketreno/backstory
1
0
Fork 0
Code Issues 12 Actions Releases Activity

Resize Plotly after load

Browse Source
This commit is contained in:
James Ketr 2025-04-26 18:15:05 -07:00
parent 9875b58af7
commit f7628f87d6
1 changed files with 8 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/src/VectorVisualizer.tsx
View File

@ -1,4 +1,4 @@
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState, useRef } from 'react';
import Box from '@mui/material/Box'; import Box from '@mui/material/Box';
import Card from '@mui/material/Card'; import Card from '@mui/material/Card';
import Typography from '@mui/material/Typography'; import Typography from '@mui/material/Typography';
@ -107,6 +107,7 @@ const VectorVisualizer: React.FC<VectorVisualizerProps> = (props: VectorVisualiz
const [newQueryEmbedding, setNewQueryEmbedding] = useState<ChromaResult | undefined>(undefined); const [newQueryEmbedding, setNewQueryEmbedding] = useState<ChromaResult | undefined>(undefined);
const [result, setResult] = useState<ResultData | undefined>(undefined); const [result, setResult] = useState<ResultData | undefined>(undefined);
const [view2D, setView2D] = useState<boolean>(true); const [view2D, setView2D] = useState<boolean>(true);
const plotlyRef = useRef(null);
const [tooltip, setTooltip] = useState<{ const [tooltip, setTooltip] = useState<{
visible: boolean, visible: boolean,
// x: number, // x: number,
@ -145,6 +146,9 @@ const VectorVisualizer: React.FC<VectorVisualizerProps> = (props: VectorVisualiz
/* Trigger a resize event to force Plotly to rescale */ /* Trigger a resize event to force Plotly to rescale */
useEffect(() => { useEffect(() => {
window.dispatchEvent(new Event('resize')); window.dispatchEvent(new Event('resize'));
if (plotlyRef.current) {
Plot.Plots.resize(plotlyRef.current);
}
}, []) }, [])
useEffect(() => { useEffect(() => {
@ -328,15 +332,17 @@ const VectorVisualizer: React.FC<VectorVisualizerProps> = (props: VectorVisualiz
<FormControlLabel <FormControlLabel
sx={{ sx={{
display: "flex", display: "flex",
position: "absolute", position: "relative",
width: "fit-content", width: "fit-content",
ml: 1, ml: 1,
mb: '-2.5rem',
zIndex: 100, zIndex: 100,
flexBasis: 0, flexBasis: 0,
flexGrow: 0 flexGrow: 0
}} }}
control={<Switch checked={!view2D} />} onChange={() => setView2D(!view2D)} label="3D" /> control={<Switch checked={!view2D} />} onChange={() => setView2D(!view2D)} label="3D" />
<Plot <Plot
ref={plotlyRef}
onClick={(event: any) => { onClick={(event: any) => {
const point = event.points[0]; const point = event.points[0];
console.log('Point:', point); console.log('Point:', point);