Skip to content

Commit a92a035

Browse files
ddelpianoddelpiano
committed
warnings and other improvements
1 parent e5ae1af commit a92a035

8 files changed

Lines changed: 58 additions & 43 deletions

File tree

‎applications/virtual-fly-brain/frontend/src/components/CameraControls.jsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/* eslint-disable react-refresh/only-export-components */
2-
import React, { useState } from 'react';
2+
import React, { useState, forwardRef } from 'react';
33
import { Box, IconButton, Tooltip } from '@mui/material';
44
import { useDispatch } from 'react-redux';
55
import {
@@ -42,7 +42,7 @@ export const cameraControlsRotateState = {
4242
STOPPING: 'stopping',
4343
};
4444

45-
const CameraControls = (props) => {
45+
const CameraControls = forwardRef((props, _ref) => {
4646
const {
4747
cameraControlsHandler,
4848
canvasHeight,
@@ -163,6 +163,8 @@ const CameraControls = (props) => {
163163
)}
164164
</Box>
165165
);
166-
};
166+
});
167+
168+
CameraControls.displayName = 'CameraControls';
167169

168170
export default CameraControls;

‎applications/virtual-fly-brain/frontend/src/components/StackViewerComponent.jsx‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -173,7 +173,7 @@ const rgbToHex = (color) => {
173173
this.app = new Application({ width : this.props.width, height : this.props.height});
174174
// this.app.renderer.backgroundColor = '#1a1a1a';
175175
// maintain full window size
176-
this.refs.stackCanvas?.getElementsByTagName("canvas")?.length == 0 && this.refs.stackCanvas?.appendChild(this.app.view);
176+
this.stackCanvas?.getElementsByTagName("canvas")?.length == 0 && this.stackCanvas?.appendChild(this.app.view);
177177

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

245245
// Create bound methods for proper cleanup
246-
this.boundHandleWindowResize = this.handleWindowResize.bind(this);
247-
this.boundHandleVisualViewportChange = this.handleVisualViewportChange.bind(this);
246+
this.boundHandleWindowResize = this.handleWindowResize;
247+
this.boundHandleVisualViewportChange = this.handleVisualViewportChange;
248248

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

257257
// Setup ResizeObserver for the canvas container if available
258-
if (window.ResizeObserver && this.refs.stackCanvas) {
258+
if (window.ResizeObserver && this.stackCanvas) {
259259
this.resizeObserver = new ResizeObserver(() => {
260260
if (!this._isMounted) return;
261261

@@ -268,13 +268,13 @@ const rgbToHex = (color) => {
268268
}
269269
});
270270

271-
this.resizeObserver.observe(this.refs.stackCanvas);
271+
this.resizeObserver.observe(this.stackCanvas);
272272
}
273273

274274
// Fallback: Listen for devicePixelRatio changes (Webkit-based browsers)
275275
if (window.matchMedia) {
276276
this.mediaQueryList = window.matchMedia(`(resolution: ${window.devicePixelRatio}dppx)`);
277-
this.boundHandleDevicePixelRatioChange = this.handleDevicePixelRatioChange.bind(this);
277+
this.boundHandleDevicePixelRatioChange = this.handleDevicePixelRatioChange;
278278
this.mediaQueryList.addListener(this.boundHandleDevicePixelRatioChange);
279279
}
280280

@@ -343,7 +343,7 @@ const rgbToHex = (color) => {
343343
// Properly cleanup PIXI application and WebGL context
344344
if (this.app) {
345345
// Remove canvas from DOM
346-
if (this.refs.stackCanvas && this.app.view && this.app.view.parentNode) {
346+
if (this.stackCanvas && this.app.view && this.app.view.parentNode) {
347347
this.app.view.parentNode.removeChild(this.app.view);
348348
}
349349

@@ -494,7 +494,9 @@ const rgbToHex = (color) => {
494494
let extent = { imageX: imageX, imageY: imageY };
495495
that.setState(extent);
496496
that.props.setExtent(extent);
497-
that.onResize(that.props.width, that.props.height);
497+
if (typeof that.onResize === 'function') {
498+
that.onResize(that.props.width, that.props.height);
499+
}
498500
that.checkStack();
499501
that.callPlaneEdges();
500502
that.state.iBuffer = {};
@@ -1519,7 +1521,7 @@ const rgbToHex = (color) => {
15191521
*/
15201522
render: function () {
15211523
return (
1522-
< div className="stack-canvas-container" ref="stackCanvas"> </div>
1524+
< div className="stack-canvas-container" ref={(el) => { this.stackCanvas = el; }}> </div>
15231525
);
15241526
},
15251527

@@ -2251,7 +2253,7 @@ const StackViewerComponent = () => createClass({
22512253
}
22522254

22532255
return <ReactResizeDetector skipOnMount={true} onResize={this.onResize}>
2254-
<div id='slice-viewer' style={{width: '100%', height: '100%'}} ref={this.refs.stackCanvas}>
2256+
<div id='slice-viewer' style={{width: '100%', height: '100%'}}>
22552257
{markup}
22562258
</div>
22572259
</ReactResizeDetector>

‎applications/virtual-fly-brain/frontend/src/components/TermInfo.jsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -748,6 +748,7 @@ const TermInfo = ({ open, setOpen }) => {
748748
>
749749
{!open ? (
750750
<Typography
751+
component="div"
751752
sx={{
752753
maxWidth: "10rem",
753754
display: "flex",
@@ -771,9 +772,10 @@ const TermInfo = ({ open, setOpen }) => {
771772
sx={{ justifyContent: { lg: "space-between", xs: "flex-end" } }}
772773
>
773774
<MediaQuery minWidth={768}>
774-
<Grid item xs={12} lg={4.5} sm={6}>
775+
<Grid size={{ xs: 12, sm: 6, lg: 4.5 }}>
775776
<Box>
776777
<Typography
778+
component="div"
777779
sx={{
778780
maxWidth: "10rem",
779781
fontWeight: 500,
@@ -790,7 +792,7 @@ const TermInfo = ({ open, setOpen }) => {
790792
</Grid>
791793
</MediaQuery>
792794

793-
<Grid item xs={12} lg={7.5} sm={6}>
795+
<Grid size={{ xs: 12, sm: 6, lg: 7.5 }}>
794796
<Box
795797
display="flex"
796798
rowGap={1}
@@ -1106,8 +1108,7 @@ const TermInfo = ({ open, setOpen }) => {
11061108
<AccordionDetails>
11071109
<SimpleTreeView
11081110
aria-label="customized"
1109-
defaultExpandIcon={<ArrowRight />}
1110-
defaultCollapseIcon={<ArrowDown />}
1111+
slots={{ expandIcon: ArrowRight, collapseIcon: ArrowDown }}
11111112
>
11121113
{/* Group queries that start with "Neurons with" */}
11131114
{groupedQueries.map((group, groupIndex) => (

‎applications/virtual-fly-brain/frontend/src/components/TermInfo/GeneralInformation.jsx‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,8 @@ const GeneralInformation = ({ data, classes, showMetadataOnly = false }) => {
3535
message: ''
3636
});
3737
const [isLoading, setIsLoading] = useState(false);
38-
const reduxState = useSelector(state => state);
38+
const launchTemplate = useSelector(state => state.instances.launchTemplate);
39+
const alignedTemplates = useSelector(state => state.globalInfo.alignedTemplates);
3940
const MAX_LENGTH = 300;
4041

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

5253
// Get current template information
53-
const currentTemplate = reduxState.instances.launchTemplate;
54+
const currentTemplate = launchTemplate;
5455
const currentTemplateName = currentTemplate?.metadata?.Name || 'Unknown Template';
5556
const currentTemplateId = currentTemplate?.metadata?.Id;
5657

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

7070
// If template is aligned, load it directly
@@ -410,7 +410,8 @@ const GeneralInformation = ({ data, classes, showMetadataOnly = false }) => {
410410
{
411411
templateIds.map((templateId) => {
412412
return (
413-
templateId !== currentTemplateId && <Chip
413+
templateId !== currentTemplateId && <Chip
414+
key={templateId}
414415
icon={<LinkIcon />}
415416
label={alignedTemplatesLabels[templateId] || templateId}
416417
sx={{
@@ -1042,7 +1043,7 @@ const GeneralInformation = ({ data, classes, showMetadataOnly = false }) => {
10421043
return (
10431044
<>
10441045
<Grid container columnSpacing={2}>
1045-
{!showMetadataOnly && <Grid item xs={12} sm={4} md={5} lg={5}>
1046+
{!showMetadataOnly && <Grid size={{ xs: 12, sm: 4, md: 5, lg: 5 }}>
10461047
<Box
10471048
sx={{
10481049
width: '15rem',
@@ -1071,7 +1072,7 @@ const GeneralInformation = ({ data, classes, showMetadataOnly = false }) => {
10711072
sm: 0,
10721073
},
10731074
width: showMetadataOnly ? '100%' : 'initial'
1074-
}} item xs={12} sm={showMetadataOnly ? 12 : 8} md={showMetadataOnly ? 12 : 7} lg={showMetadataOnly ? 12 : 7}>
1075+
}} size={{ xs: 12, sm: showMetadataOnly ? 12 : 8, md: showMetadataOnly ? 12 : 7, lg: showMetadataOnly ? 12 : 7 }}>
10751076
<Box display='flex' flexDirection='column' sx={{ rowGap: { xs: 1.25, sm: 1, lg: 1.25 }, width: showMetadataOnly ? '100%' : '15rem' }}>
10761077
{getMetadataProperties().map(({ key, value, isStatic, isAlignedTo }) => {
10771078
// Handle special cases

‎applications/virtual-fly-brain/frontend/src/components/TermInfo/TerminfoSlider.jsx‎

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -114,7 +114,8 @@ const TerminfoSlider = (props) => {
114114
message: ''
115115
});
116116
const [isLoading, setIsLoading] = useState(false);
117-
const reduxState = useSelector(state => state);
117+
const launchTemplate = useSelector(state => state.instances.launchTemplate);
118+
const focusedInstance = useSelector(state => state.instances.focusedInstance);
118119
const misalignedTemplate = useSelector(state => state.globalInfo.misalignedTemplate)
119120
const alignedTemplates = useSelector(state => state.globalInfo.alignedTemplates)
120121
const misalignedIDs = useSelector(state => state.globalInfo.misalignedIDs)
@@ -142,16 +143,16 @@ const TerminfoSlider = (props) => {
142143
};
143144

144145
const imageClick = (image) => {
145-
if (image !== reduxState.instances.launchTemplate?.metadata?.Id) {
146-
const templates = Object.keys(reduxState.instances.focusedInstance.metadata.Examples);
146+
if (image !== launchTemplate?.metadata?.Id) {
147+
const templates = Object.keys(focusedInstance.metadata.Examples);
147148
const examples = new Map();
148149
templates.forEach(t => {
149-
reduxState.instances.focusedInstance.metadata.Examples[t].forEach(e => {
150+
focusedInstance.metadata.Examples[t].forEach(e => {
150151
examples.set(e.id, {...e, template: t});
151152
});
152153
});
153154
const example = examples.get(image);
154-
if (example.template !== reduxState.instances.launchTemplate?.metadata?.Id) {
155+
if (example.template !== launchTemplate?.metadata?.Id) {
155156
setConfirmationModal({
156157
open: true,
157158
example,
@@ -183,7 +184,7 @@ const TerminfoSlider = (props) => {
183184
const keys = Object.keys(props.examples);
184185

185186
// Get current template from store
186-
const currentTemplate = reduxState.instances.launchTemplate?.metadata?.Id;
187+
const currentTemplate = launchTemplate?.metadata?.Id;
187188

188189
// Define the priority order for templates
189190
const templatePriorityOrder = [
@@ -225,12 +226,11 @@ const TerminfoSlider = (props) => {
225226
});
226227
});
227228

228-
console.log('TerminfoSlider: Setting slideImages with priority order', images);
229229
setSlideImages(images);
230230
} else {
231231
setSlideImages([]);
232232
}
233-
}, [props.examples, reduxState.instances.launchTemplate?.metadata?.Id]);
233+
}, [props.examples, launchTemplate?.metadata?.Id]);
234234

235235
return (
236236
<Box sx={classes.root}>
@@ -255,8 +255,7 @@ const TerminfoSlider = (props) => {
255255
src={slideImage.url}
256256
onClick={() => imageClick(slideImage.id)}
257257
alt={slideImage.caption}
258-
onLoad={() => console.log(`Image ${index} loaded:`, slideImage.url)}
259-
onError={() => console.log(`Image ${index} failed to load:`, slideImage.url)}
258+
onError={() => console.error(`Image ${index} failed to load:`, slideImage.url)}
260259
/>
261260
))}
262261
</Slide>

‎applications/virtual-fly-brain/frontend/src/components/configuration/VFBToolbar/vfbtoolbarMenuConfiguration.jsx‎

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -200,15 +200,15 @@ export const toolbarMenu = (autoSaveLayout) => { return {
200200
icon: "fa fa-search",
201201
action: {
202202
handlerAction: ACTIONS.SHOW_COMPONENT,
203-
parameters: [bottomNavSearch]
203+
parameters: [String(bottomNavSearch)]
204204
}
205205
},
206206
{
207207
label: "Query",
208208
icon: "fa fa-clipboard-question",
209209
action: {
210210
handlerAction: ACTIONS.SHOW_COMPONENT,
211-
parameters: [bottomNavQuery]
211+
parameters: [String(bottomNavQuery)]
212212
}
213213
},
214214
{
@@ -280,21 +280,21 @@ export const toolbarMenu = (autoSaveLayout) => { return {
280280
icon: "fa fa-download",
281281
action: {
282282
handlerAction: ACTIONS.SHOW_COMPONENT,
283-
parameters: [bottomNavDownload]
283+
parameters: [String(bottomNavDownload)]
284284
}
285285
},
286286
{
287287
label: "NBLAST Uploader",
288288
icon: "fa fa-upload",
289289
action: {
290290
handlerAction: ACTIONS.SHOW_COMPONENT,
291-
parameters: [bottomNavUpload]
291+
parameters: [String(bottomNavUpload)]
292292
}
293293
},
294294
{
295295
label: "NBLAST",
296296
icon: "",
297-
action: {},
297+
action: { handlerAction: "submenu", parameters: ["undefinedAction"] },
298298
position: "right-start",
299299
list: [
300300
{
@@ -320,7 +320,7 @@ export const toolbarMenu = (autoSaveLayout) => { return {
320320
{
321321
label: "CATMAID",
322322
icon: "",
323-
action: {},
323+
action: { handlerAction: "submenu", parameters: ["undefinedAction"] },
324324
position: "right-start",
325325
list: [
326326
{
@@ -505,7 +505,7 @@ export const toolbarMenu = (autoSaveLayout) => { return {
505505
{
506506
label: "VFB CONNECT (API)",
507507
icon: "",
508-
action: {},
508+
action: { handlerAction: "submenu", parameters: ["undefinedAction"] },
509509
position: "right-start",
510510
list: [
511511
{
@@ -544,10 +544,13 @@ export const toolbarMenu = (autoSaveLayout) => { return {
544544
icon: "",
545545
action: {},
546546
position: "bottom-start",
547-
dynamicListInjector: {
547+
list: [],
548+
dynamicListInjector: [{
549+
label: "",
550+
icon: "",
548551
handlerAction: ACTIONS.HISTORY_MENU_INJECTOR,
549552
parameters: [""]
550-
}
553+
}]
551554
},
552555
{
553556
label: "Templates",

‎applications/virtual-fly-brain/frontend/src/main.jsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,13 @@
11
import React from 'react';
22
import ReactDOM from 'react-dom/client';
33
import reportWebVitals from './reportWebVitals';
4+
5+
// Suppress legacy childContextTypes warning from griddle-react/recompose (third-party, no fix available)
6+
const _origConsoleError = console.error;
7+
console.error = (...args) => {
8+
if (typeof args[0] === 'string' && args[0].includes('childContextTypes')) return;
9+
_origConsoleError(...args);
10+
};
411
import './index.css';
512
import App from './App';
613
import { Provider } from 'react-redux'

‎applications/virtual-fly-brain/frontend/src/shared/header/index.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -112,7 +112,7 @@ const Header = ({ setBottomNav }) => {
112112
break;
113113
}
114114
case ACTIONS.SHOW_COMPONENT:
115-
setBottomNav(action.parameters[0])
115+
setBottomNav(Number(action.parameters[0]))
116116
break;
117117
case ACTIONS.SHOW_TERM_INFO: {
118118
dispatch(setTermInfoOpened(true))

0 commit comments

Comments
 (0)