Skip to content

fix clicking on datasets #230

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ddelpiano merged 7 commits into from
May 8, 2026
Merged

fix clicking on datasets #230

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
2ea6d26
fix clicking on datasets
ddelpiano May 7, 2026
e5ae1af
load dataset type
ddelpiano May 7, 2026
a92a035
warnings and other improvements
ddelpiano May 7, 2026
f9f3e40
term info alignment
ddelpiano May 7, 2026
002cae7
Potential fix for pull request finding
ddelpiano May 7, 2026
6465568
fix linter
ddelpiano May 8, 2026
3d59703
Merge branch 'fix/datasets' of https://github.com/metacell/virtual-fl…
ddelpiano May 8, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 6 additions & 3 deletions applications/virtual-fly-brain/frontend/src/components/CameraControls.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/* eslint-disable react-refresh/only-export-components */
import React, { useState } from 'react';
import React, { useState, forwardRef } from 'react';
import { Box, IconButton, Tooltip } from '@mui/material';
import { useDispatch } from 'react-redux';
import {
Expand Down Expand Up @@ -42,7 +42,8 @@ export const cameraControlsRotateState = {
STOPPING: 'stopping',
};

const CameraControls = (props) => {
// eslint-disable-next-line no-unused-vars
const CameraControls = forwardRef((props, _ref) => {
const {
cameraControlsHandler,
canvasHeight,
Expand Down Expand Up @@ -163,6 +164,8 @@ const CameraControls = (props) => {
)}
</Box>
);
};
});

CameraControls.displayName = 'CameraControls';

export default CameraControls;
22 changes: 12 additions & 10 deletions applications/virtual-fly-brain/frontend/src/components/StackViewerComponent.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -173,7 +173,7 @@ const rgbToHex = (color) => {
this.app = new Application({ width : this.props.width, height : this.props.height});
// this.app.renderer.backgroundColor = '#1a1a1a';
// maintain full window size
this.refs.stackCanvas?.getElementsByTagName("canvas")?.length == 0 && this.refs.stackCanvas?.appendChild(this.app.view);
this.stackCanvas?.getElementsByTagName("canvas")?.length == 0 && this.stackCanvas?.appendChild(this.app.view);

this.disp = new Container({ width : this.props.width, height : this.props.height});
this.disp.pivot.x = 0;
Expand Down Expand Up @@ -243,8 +243,8 @@ const rgbToHex = (color) => {
this.lastWindowHeight = window.innerHeight;

// Create bound methods for proper cleanup
this.boundHandleWindowResize = this.handleWindowResize.bind(this);
this.boundHandleVisualViewportChange = this.handleVisualViewportChange.bind(this);
this.boundHandleWindowResize = this.handleWindowResize;
this.boundHandleVisualViewportChange = this.handleVisualViewportChange;

// Listen for window resize events (covers most zoom scenarios)
window.addEventListener('resize', this.boundHandleWindowResize);
Expand All @@ -255,7 +255,7 @@ const rgbToHex = (color) => {
}

// Setup ResizeObserver for the canvas container if available
if (window.ResizeObserver && this.refs.stackCanvas) {
if (window.ResizeObserver && this.stackCanvas) {
this.resizeObserver = new ResizeObserver(() => {
if (!this._isMounted) return;

Expand All @@ -268,13 +268,13 @@ const rgbToHex = (color) => {
}
});

this.resizeObserver.observe(this.refs.stackCanvas);
this.resizeObserver.observe(this.stackCanvas);
}

// Fallback: Listen for devicePixelRatio changes (Webkit-based browsers)
if (window.matchMedia) {
this.mediaQueryList = window.matchMedia(`(resolution: ${window.devicePixelRatio}dppx)`);
this.boundHandleDevicePixelRatioChange = this.handleDevicePixelRatioChange.bind(this);
this.boundHandleDevicePixelRatioChange = this.handleDevicePixelRatioChange;
this.mediaQueryList.addListener(this.boundHandleDevicePixelRatioChange);
}

Expand Down Expand Up @@ -343,7 +343,7 @@ const rgbToHex = (color) => {
// Properly cleanup PIXI application and WebGL context
if (this.app) {
// Remove canvas from DOM
if (this.refs.stackCanvas && this.app.view && this.app.view.parentNode) {
if (this.stackCanvas && this.app.view && this.app.view.parentNode) {
this.app.view.parentNode.removeChild(this.app.view);
}

Expand Down Expand Up @@ -494,7 +494,9 @@ const rgbToHex = (color) => {
let extent = { imageX: imageX, imageY: imageY };
that.setState(extent);
that.props.setExtent(extent);
that.onResize(that.props.width, that.props.height);
if (typeof that.onResize === 'function') {
that.onResize(that.props.width, that.props.height);
}
that.checkStack();
that.callPlaneEdges();
that.state.iBuffer = {};
Expand Down Expand Up @@ -1519,7 +1521,7 @@ const rgbToHex = (color) => {
*/
render: function () {
return (
< div className="stack-canvas-container" ref="stackCanvas"> </div>
<div className="stack-canvas-container" ref={(el) => { this.stackCanvas = el; }}></div>
);
},

Expand Down Expand Up @@ -2251,7 +2253,7 @@ const StackViewerComponent = () => createClass({
}

return <ReactResizeDetector skipOnMount={true} onResize={this.onResize}>
<div id='slice-viewer' style={{width: '100%', height: '100%'}} ref={this.refs.stackCanvas}>
<div id='slice-viewer' style={{width: '100%', height: '100%'}}>
{markup}
</div>
</ReactResizeDetector>
Expand Down
9 changes: 5 additions & 4 deletions applications/virtual-fly-brain/frontend/src/components/TermInfo.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -748,6 +748,7 @@ const TermInfo = ({ open, setOpen }) => {
>
{!open ? (
<Typography
component="div"
sx={{
maxWidth: "10rem",
display: "flex",
Expand All @@ -771,9 +772,10 @@ const TermInfo = ({ open, setOpen }) => {
sx={{ justifyContent: { lg: "space-between", xs: "flex-end" } }}
>
<MediaQuery minWidth={768}>
<Grid item xs={12} lg={4.5} sm={6}>
<Grid size={{ xs: 12, sm: 6, lg: 4.5 }}>
Comment thread
ddelpiano marked this conversation as resolved.
<Box>
<Typography
component="div"
sx={{
maxWidth: "10rem",
fontWeight: 500,
Expand All @@ -790,7 +792,7 @@ const TermInfo = ({ open, setOpen }) => {
</Grid>
</MediaQuery>

<Grid item xs={12} lg={7.5} sm={6}>
<Grid size={{ xs: 12, sm: 6, lg: 7.5 }}>
<Box
display="flex"
rowGap={1}
Expand Down Expand Up @@ -1106,8 +1108,7 @@ const TermInfo = ({ open, setOpen }) => {
<AccordionDetails>
<SimpleTreeView
aria-label="customized"
defaultExpandIcon={<ArrowRight />}
defaultCollapseIcon={<ArrowDown />}
slots={{ expandIcon: ArrowRight, collapseIcon: ArrowDown }}
>
{/* Group queries that start with "Neurons with" */}
{groupedQueries.map((group, groupIndex) => (
Expand Down
17 changes: 9 additions & 8 deletions applications/virtual-fly-brain/frontend/src/components/TermInfo/GeneralInformation.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,8 @@ const GeneralInformation = ({ data, classes, showMetadataOnly = false }) => {
message: ''
});
const [isLoading, setIsLoading] = useState(false);
const reduxState = useSelector(state => state);
const launchTemplate = useSelector(state => state.instances.launchTemplate);
const alignedTemplates = useSelector(state => state.globalInfo.alignedTemplates);
const MAX_LENGTH = 300;

// Utility function to decode URL-encoded strings
Expand All @@ -50,7 +51,7 @@ const GeneralInformation = ({ data, classes, showMetadataOnly = false }) => {
};

// Get current template information
const currentTemplate = reduxState.instances.launchTemplate;
const currentTemplate = launchTemplate;
const currentTemplateName = currentTemplate?.metadata?.Name || 'Unknown Template';
const currentTemplateId = currentTemplate?.metadata?.Id;

Expand All @@ -64,7 +65,6 @@ const GeneralInformation = ({ data, classes, showMetadataOnly = false }) => {
);
} else {
// Check if template is aligned
const alignedTemplates = reduxState.globalInfo.alignedTemplates;
const isAligned = alignedTemplates[templateId];

// If template is aligned, load it directly
Expand Down Expand Up @@ -410,7 +410,8 @@ const GeneralInformation = ({ data, classes, showMetadataOnly = false }) => {
{
templateIds.map((templateId) => {
return (
templateId !== currentTemplateId && <Chip
templateId !== currentTemplateId && <Chip
key={templateId}
icon={<LinkIcon />}
label={alignedTemplatesLabels[templateId] || templateId}
sx={{
Expand Down Expand Up @@ -1042,7 +1043,7 @@ const GeneralInformation = ({ data, classes, showMetadataOnly = false }) => {
return (
<>
<Grid container columnSpacing={2}>
{!showMetadataOnly && <Grid item xs={12} sm={4} md={5} lg={5}>
{!showMetadataOnly && <Grid size={{ xs: 12, sm: 4, md: 5, lg: 5 }}>
<Box
sx={{
Comment on lines 1045 to 1048
width: '15rem',
Expand Down Expand Up @@ -1071,8 +1072,8 @@ const GeneralInformation = ({ data, classes, showMetadataOnly = false }) => {
sm: 0,
},
width: showMetadataOnly ? '100%' : 'initial'
}} item xs={12} sm={showMetadataOnly ? 12 : 8} md={showMetadataOnly ? 12 : 7} lg={showMetadataOnly ? 12 : 7}>
<Box display='flex' flexDirection='column' sx={{ rowGap: { xs: 1.25, sm: 1, lg: 1.25 }, width: showMetadataOnly ? '100%' : '15rem' }}>
}} size={{ xs: 12, sm: showMetadataOnly ? 12 : 8, md: showMetadataOnly ? 12 : 7, lg: showMetadataOnly ? 12 : 7 }}>
<Box display='flex' flexDirection='column' sx={{ rowGap: { xs: 1.25, sm: 1, lg: 1.25 }, width: '100%' }}>
{getMetadataProperties().map(({ key, value, isStatic, isAlignedTo }) => {
// Handle special cases
if (key === 'Description' || key === 'Comment') {
Expand Down Expand Up @@ -1122,7 +1123,7 @@ const GeneralInformation = ({ data, classes, showMetadataOnly = false }) => {

return (
<Box key={key} display='flex' justifyContent='space-between' columnGap={key === 'Name' ? '0.188rem' : 1}>
<Typography sx={classes.heading}>{key}</Typography>
<Typography sx={{...classes.heading, paddingLeft: showMetadataOnly ? 0 : '1.5rem'}}>{key}</Typography>
{renderedValue}
</Box>
);
Expand Down
19 changes: 9 additions & 10 deletions applications/virtual-fly-brain/frontend/src/components/TermInfo/TerminfoSlider.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,7 +114,8 @@ const TerminfoSlider = (props) => {
message: ''
});
const [isLoading, setIsLoading] = useState(false);
const reduxState = useSelector(state => state);
const launchTemplate = useSelector(state => state.instances.launchTemplate);
const focusedInstance = useSelector(state => state.instances.focusedInstance);
const misalignedTemplate = useSelector(state => state.globalInfo.misalignedTemplate)
const alignedTemplates = useSelector(state => state.globalInfo.alignedTemplates)
const misalignedIDs = useSelector(state => state.globalInfo.misalignedIDs)
Expand Down Expand Up @@ -142,16 +143,16 @@ const TerminfoSlider = (props) => {
};

const imageClick = (image) => {
if (image !== reduxState.instances.launchTemplate?.metadata?.Id) {
const templates = Object.keys(reduxState.instances.focusedInstance.metadata.Examples);
if (image !== launchTemplate?.metadata?.Id) {
const templates = Object.keys(focusedInstance.metadata.Examples);
const examples = new Map();
templates.forEach(t => {
Comment thread
ddelpiano marked this conversation as resolved.
reduxState.instances.focusedInstance.metadata.Examples[t].forEach(e => {
focusedInstance.metadata.Examples[t].forEach(e => {
examples.set(e.id, {...e, template: t});
});
});
const example = examples.get(image);
if (example.template !== reduxState.instances.launchTemplate?.metadata?.Id) {
if (example.template !== launchTemplate?.metadata?.Id) {
setConfirmationModal({
open: true,
example,
Expand Down Expand Up @@ -183,7 +184,7 @@ const TerminfoSlider = (props) => {
const keys = Object.keys(props.examples);

// Get current template from store
const currentTemplate = reduxState.instances.launchTemplate?.metadata?.Id;
const currentTemplate = launchTemplate?.metadata?.Id;

// Define the priority order for templates
const templatePriorityOrder = [
Expand Down Expand Up @@ -225,12 +226,11 @@ const TerminfoSlider = (props) => {
});
});

console.log('TerminfoSlider: Setting slideImages with priority order', images);
setSlideImages(images);
} else {
setSlideImages([]);
}
}, [props.examples, reduxState.instances.launchTemplate?.metadata?.Id]);
}, [props.examples, launchTemplate?.metadata?.Id]);

return (
<Box sx={classes.root}>
Expand All @@ -255,8 +255,7 @@ const TerminfoSlider = (props) => {
src={slideImage.url}
onClick={() => imageClick(slideImage.id)}
alt={slideImage.caption}
onLoad={() => console.log(`Image ${index} loaded:`, slideImage.url)}
onError={() => console.log(`Image ${index} failed to load:`, slideImage.url)}
onError={() => console.error(`Image ${index} failed to load:`, slideImage.url)}
/>
))}
</Slide>
Expand Down
Loading
Loading