Skip to content

Commit

Permalink
explore manages viz pane height and width
Browse files Browse the repository at this point in the history
  • Loading branch information
@jzhang621
jzhang621 committed Nov 26, 2024
1 parent 323e8ea commit cd54e53
Show file tree
Hide file tree
Showing 3 changed files with 123 additions and 45 deletions.
75 changes: 38 additions & 37 deletions web/src/components/Explore/VisualizationPane.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,8 @@ function VisualizationPane({
onHover,
hovered,
containerRef,
width,
height,
}) {
const [xDomain, setXDomain] = useState([-1, 1]);
const [yDomain, setYDomain] = useState([-1, 1]);
Expand All @@ -50,37 +52,41 @@ function VisualizationPane({

// const [isFullScreen, setIsFullScreen] = useState(false);
const [isFullScreen, setIsFullScreen] = useState(true);
const [size, setSize] = useState([500, 500]);
// const [size, setSize] = useState([initialWidth, initialHeight]);
const umapRef = useRef(null);
const [umapOffset, setUmapOffset] = useState(0);

// let's fill the container and update the width and height if window resizes
useEffect(() => {
function updateSize() {
if (!containerRef.current) return;

if (isFullScreen) {
const rect = umapRef.current.getBoundingClientRect();
// debugger;
setSize([rect.width, rect.height]);
setUmapOffset(rect.top + 40); // 40 is the height of the top header
} else {
const rect = containerRef.current.getBoundingClientRect();
const urect = umapRef.current.getBoundingClientRect();
const width = rect.width;
let swidth = width > 500 ? 500 : width - 50;
setSize([swidth, rect.height - urect.top + 30]);
setUmapOffset(urect.top + 40); // 40 is the height of the top header
}

// console.log("UMAP OFFSET", rect.top + top)
}
window.addEventListener('resize', updateSize);
updateSize();
return () => window.removeEventListener('resize', updateSize);
}, [isFullScreen]);

const [width, height] = size;
// // let's fill the container and update the width and height if window resizes
// useEffect(() => {
// function updateSize() {
// // console.log('updateSize', containerRef.current);
// if (!containerRef.current) return;

// if (isFullScreen) {
// const rect = umapRef.current.getBoundingClientRect();
// debugger;
// setSize([rect.width, rect.height]);
// setUmapOffset(rect.top + 40); // 40 is the height of the top header
// } else {
// const rect = containerRef.current.getBoundingClientRect();
// const urect = umapRef.current.getBoundingClientRect();
// const width = rect.width;
// let swidth = width > 500 ? 500 : width - 50;
// setSize([swidth, rect.height - urect.top + 30]);
// setUmapOffset(urect.top + 40); // 40 is the height of the top header
// }

// // console.log("UMAP OFFSET", rect.top + top)
// }
// window.addEventListener('resize', updateSize);
// updateSize();
// return () => window.removeEventListener('resize', updateSize);
// }, [isFullScreen]);

// const [width, height] = size;
const size = [width, height];

console.log('=== VIZ PANE ====', width, height);

const drawingPoints = useMemo(() => {
return scopeRows.map((p, i) => {
Expand Down Expand Up @@ -135,7 +141,7 @@ function VisualizationPane({
});
}
}
}, [hovered, scopeRows, xDomain, yDomain, width, size, umapOffset]);
}, [hovered, scopeRows, xDomain, yDomain, width, height, umapOffset]);

const hulls = useMemo(() => {
return processHulls(clusterLabels, scopeRows, (d) => (d.deleted ? null : [d.x, d.y]));
Expand Down Expand Up @@ -215,14 +221,7 @@ function VisualizationPane({
return mapSelectionOpacity.map((d) => d * vizConfig.pointOpacity);
}, [vizConfig.pointOpacity]);

console.log({
hoveredCluster,
hoverAnnotations,
intersectedIndices,
slide,
hovered,
hoveredIndex,
});
console.log('=== VIZ PANE ====', width, height);

return (
// <div style={{ width, height }} ref={umapRef}>
Expand Down Expand Up @@ -254,6 +253,8 @@ function VisualizationPane({
<Scatter
points={drawingPoints}
duration={2000}
// width={1505}
// height={778}
width={width}
height={height}
colorScaleType="categorical"
Expand Down
2 changes: 2 additions & 0 deletions web/src/components/Scatter.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,6 +99,8 @@ function ScatterPlot ({
const scatterplot = createScatterplot(scatterSettings);
scatterplotRef.current = scatterplot;

console.log('=== SCATTER ====', xDomain.current, yDomain.current);

scatterplot.zoomToArea({
x: xDomain.current[0],
y: yDomain.current[0],
Expand Down
91 changes: 83 additions & 8 deletions web/src/pages/FullScreenExplore.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -343,23 +343,95 @@ function Explore() {
// Fullscreen related logic
// ====================================================================================================
const [size, setSize] = useState([500, 500]);
const visualizationContainerRef = useRef(null);

// initial size
useEffect(() => {
const observer = new MutationObserver((mutations, obs) => {
if (containerRef.current && visualizationContainerRef.current) {
const rect = containerRef.current.getBoundingClientRect();
const vizRect = visualizationContainerRef.current.getBoundingClientRect();
setSize([vizRect.width, rect.height - vizRect.top + 30]);
console.log('=== INITIAL SIZE ====', vizRect.width, rect.height - vizRect.top + 30);
}
});

observer.observe(document.body, {
childList: true,
subtree: true,
});

return () => observer.disconnect();
}, []);

const xOffset = 50;
const yOffset = 100;

// let's fill the container and update the width and height if window resizes
// useEffect(() => {
// const node = containerRef.current;
// if (!node) return;

// const rect = containerRef.current.getBoundingClientRect();
// const vizRect = visualizationContainerRef.current.getBoundingClientRect();
// // const width = rect.width;
// // let swidth = width > 500 ? 500 : width - 50;
// setSize([vizRect.width, rect.height - vizRect.top + 30]);
// // const windowWidth = node.clientWidth;
// // const windowHeight = node.clientHeight;
// // setSize([windowWidth - xOffset, windowHeight - yOffset]);
// // window.addEventListener('resize', updateSize);
// // updateSize();
// // return () => window.removeEventListener('resize', updateSize);
// }, [containerRef]);

// let's fill the container and update the width and height if window resizes
useEffect(() => {
const node = containerRef.current;
if (!node) return;
const windowWidth = node.clientWidth;
const windowHeight = node.clientHeight;
setSize([windowWidth - xOffset, windowHeight - yOffset]);
// window.addEventListener('resize', updateSize);
// updateSize();
// return () => window.removeEventListener('resize', updateSize);
function updateSize() {
// console.log('updateSize', containerRef.current);
if (!containerRef.current) return;

// if (isFullScreen) {
// const rect = visualizationContainerRef.current.getBoundingClientRect();
// setSize([rect.width, rect.height]);
// else {
const rect = containerRef.current.getBoundingClientRect();
const vizRect = visualizationContainerRef.current.getBoundingClientRect();
// const width = rect.width;
// let swidth = width > 500 ? 500 : width - 50;
setSize([vizRect.width, rect.height - vizRect.top + 30]);
// }

// console.log("UMAP OFFSET", rect.top + top)
}
window.addEventListener('resize', updateSize);
updateSize();
return () => window.removeEventListener('resize', updateSize);
}, [containerRef]);

// // Create resize observer effect
// useEffect(() => {
// const resizeObserver = new ResizeObserver((entries) => {
// for (let entry of entries) {
// const { width, height } = entry.contentRect;
// // Update visualization size
// setSize([width - xOffset, height - yOffset]);
// }
// });

// if (visualizationContainerRef.current) {
// resizeObserver.observe(visualizationContainerRef.current);
// }

// return () => {
// if (visualizationContainerRef.current) {
// resizeObserver.unobserve(visualizationContainerRef.current);
// }
// };
// }, [xOffset, yOffset]);

const [width, height] = size;
console.log('=== SIZE ====', width, height);

// ====================================================================================================
// Draggable State
Expand Down Expand Up @@ -467,6 +539,7 @@ function Explore() {
</div>
</div>
<div
ref={visualizationContainerRef}
className="visualization-pane-container"
onMouseLeave={() => {
setHoveredIndex(null);
Expand All @@ -492,6 +565,8 @@ function Explore() {
hovered={hovered}
dataset={dataset}
deletedIndices={deletedIndices}
width={width}
height={height}
/>
) : null}
</div>
Expand Down

0 comments on commit cd54e53

Please sign in to comment.