Code indexing in gitaly is broken and leads to code not being visible to the user. We work on the issue with highest priority.

Skip to content
Snippets Groups Projects
Commit 91aebae4 authored by GotthardG's avatar GotthardG
Browse files

Enhance dynamic height handling for RunDetails components. 

Added support for dynamic height calculation in RunDetails and integrated it with ResultGrid to adjust detail panel heights based on content changes. This ensures proper rendering and improves responsiveness of the UI.
parent 6bd4843d
No related branches found
No related tags found
No related merge requests found
Pipeline #51612 failed
Hide whitespace changes
Inline Side-by-side
frontend/src/components/ResultGrid.tsx
+ 23
− 2
View file @ 91aebae4
......@@ -102,6 +102,8 @@ interface ResultGridProps {
const ResultGrid: React.FC<ResultGridProps> = ({ activePgroup }) => {
const [rows, setRows] = useState<TreeRow[]>([]);
const [basePath, setBasePath] = useState('');
const [detailPanelHeights, setDetailPanelHeights] = useState<{ [key: string]: number }>({}); // Store dynamic heights
const hasProcessingResults = (row: TreeRow): boolean => {
// You can later replace this placeholder with actual logic.
// Mocking the logic by returning `true` for demonstration.
......@@ -282,19 +284,38 @@ const ResultGrid: React.FC<ResultGridProps> = ({ activePgroup }) => {
},
];
const handleDetailPanelHeightChange = (rowId: string, height: number) => {
// Update the height of the specific detail panel dynamically
setDetailPanelHeights((prev) => {
if (prev[rowId] !== height) {
return { ...prev, [rowId]: height };
}
return prev;
});
};
const getDetailPanelContent = (params: any) => {
if (params.row.type === 'run') {
return <RunDetails run={params.row} />;
return (
<RunDetails
run={params.row}
onHeightChange={(height: number) => handleDetailPanelHeightChange(params.row.id, height)} // Pass callback for dynamic height
/>
);
}
return null;
};
const getDetailPanelHeight = (params: any) => {
if (params.row.type === 'run') return 300;
if (params.row.type === 'run') {
// Use the dynamically calculated height from state
return detailPanelHeights[params.row.id] || 600; // Fallback to default height if not yet calculated
}
return 0;
};
return (
<DataGridPremium
rows={rows}
......
frontend/src/components/RunDetails.tsx
+ 167
− 112
View file @ 91aebae4
import React from 'react';
import {
Accordion,
AccordionSummary,
AccordionDetails,
Typography,
} from '@mui/material';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import React, { useEffect, useRef, useState } from 'react';
import {
Accordion,
AccordionSummary,
AccordionDetails,
Typography,
Grid,
} from '@mui/material';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import './SampleImage.css';
const RunDetails: React.FC<RunDetailsProps> = ({ run }) => {
const { beamline_parameters } = run;
const { synchrotron, beamline, detector } = beamline_parameters;
interface RunDetailsProps {
run: ExperimentParameters;
onHeightChange?: (height: number) => void; // Callback to notify the parent about height changes
}
return (
<div style={{ padding: '16px', border: '1px solid #ccc', borderRadius: '4px' }}>
<Typography variant="h6" gutterBottom>
Run {run.run_number} Details
</Typography>
<Typography variant="subtitle1" gutterBottom>
Beamline: {beamline} | Synchrotron: {synchrotron}
</Typography>
const RunDetails: React.FC<RunDetailsProps> = ({ run, onHeightChange }) => {
const containerRef = useRef<HTMLDivElement | null>(null); // Ref to track component height
const [currentHeight, setCurrentHeight] = useState<number>(0);
<Accordion>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="detector-content"
id="detector-header"
>
<Typography><strong>Detector Details</strong></Typography>
</AccordionSummary>
<AccordionDetails>
<Typography>Manufacturer: {detector?.manufacturer || 'N/A'}</Typography>
<Typography>Model: {detector?.model || 'N/A'}</Typography>
<Typography>Type: {detector?.type || 'N/A'}</Typography>
<Typography>
Beam Center (px): x: {detector?.beamCenterX_px || 'N/A'}, y: {detector?.beamCenterY_px || 'N/A'}
</Typography>
</AccordionDetails>
</Accordion>
const { beamline_parameters, images } = run;
const { synchrotron, beamline, detector } = beamline_parameters;
<Accordion>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="beamline-content"
id="beamline-header"
>
<Typography><strong>Beamline Details</strong></Typography>
</AccordionSummary>
<AccordionDetails>
<Typography>Synchrotron: {beamline_parameters?.synchrotron || 'N/A'}</Typography>
<Typography>Ring mode: {beamline_parameters?.ringMode || 'N/A'}</Typography>
<Typography>Ring current: {beamline_parameters?.ringCurrent_A || 'N/A'}</Typography>
<Typography>Beamline: {beamline_parameters?.beamline || 'N/A'}</Typography>
<Typography>Undulator: {beamline_parameters?.undulator || 'N/A'}</Typography>
<Typography>Undulator gap: {beamline_parameters?.undulatorgap_mm || 'N/A'}</Typography>
<Typography>Focusing optic: {beamline_parameters?.focusingOptic || 'N/A'}</Typography>
<Typography>Monochromator: {beamline_parameters?.monochromator || 'N/A'}</Typography>
</AccordionDetails>
</Accordion>
// Calculate and notify the parent about height changes
const updateHeight = () => {
if (containerRef.current) {
const newHeight = containerRef.current.offsetHeight;
if (newHeight !== currentHeight) {
setCurrentHeight(newHeight);
if (onHeightChange) {
onHeightChange(newHeight);
}
}
}
};
<Accordion>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="beam-content"
id="beam-header"
>
<Typography><strong>Beam characteristics</strong></Typography>
</AccordionSummary>
<AccordionDetails>
<Typography>Wavelength: {beamline_parameters?.wavelength || 'N/A'}</Typography>
<Typography>Energy: {beamline_parameters?.energy || 'N/A'}</Typography>
<Typography>Transmission: {beamline_parameters?.transmission || 'N/A'}</Typography>
<Typography>Beam focus (µm): vertical: {beamline_parameters?.beamSizeHeight || 'N/A'} , horizontal: {beamline_parameters?.beamSizeWidth || 'N/A'}</Typography>
<Typography>Flux at sample (ph/s): {beamline_parameters?.beamlineFluxAtSample_ph_s || 'N/A'}</Typography>
</AccordionDetails>
</Accordion>
useEffect(() => {
updateHeight(); // Update height on initial render
}, []);
<Accordion>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="sample-content"
id="sample-header"
>
<Typography><strong>Sample environment</strong></Typography>
</AccordionSummary>
<AccordionDetails>
<Typography>Cryojet temperature (K): {beamline_parameters?.cryojetTemperature_K || 'N/A'}</Typography>
<Typography>Humidifier temperature (K): {beamline_parameters?.humidifierTemperature_K || 'N/A'}</Typography>
<Typography>Humidifier humidity (%): {beamline_parameters?.humidifierHumidity || 'N/A'}</Typography>
</AccordionDetails>
</Accordion>
useEffect(() => {
// Update height whenever the component content changes
const observer = new ResizeObserver(updateHeight);
if (containerRef.current) {
observer.observe(containerRef.current);
}
return () => {
observer.disconnect();
};
}, [containerRef]);
<Accordion>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="images-content"
id="images-header"
>
<Typography><strong>Associated Images</strong></Typography>
</AccordionSummary>
<AccordionDetails>
{run.images?.map((img) => (
<img
key={img.id}
src={img.filepath}
alt={img.comment || 'Sample Image'}
style={{
width: '100%',
border: '1px solid #ccc',
marginTop: 8,
}}
/>
)) || 'No Images Available'}
</AccordionDetails>
</Accordion>
</div>
);
};
return (
<div
ref={containerRef} // Attach the ref to the main container
style={{
display: 'flex',
gap: '16px',
padding: '16px',
border: '1px solid #ccc',
borderRadius: '4px',
alignItems: 'flex-start',
}}
>
{/* Main Details Section */}
<div style={{ flexGrow: 1 }}>
<Typography variant="h6" gutterBottom>
Run {run.run_number} Details
</Typography>
<Typography variant="subtitle1" gutterBottom>
Beamline: {beamline} | Synchrotron: {synchrotron}
</Typography>
export default RunDetails;
\ No newline at end of file
{/* Detector Details Accordion */}
<Accordion>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="detector-content"
id="detector-header"
>
<Typography>
<strong>Detector Details</strong>
</Typography>
</AccordionSummary>
<AccordionDetails>
<Typography>Manufacturer: {detector?.manufacturer || 'N/A'}</Typography>
<Typography>Model: {detector?.model || 'N/A'}</Typography>
<Typography>Type: {detector?.type || 'N/A'}</Typography>
<Typography>
Beam Center (px): x: {detector?.beamCenterX_px || 'N/A'}, y: {detector?.beamCenterY_px || 'N/A'}
</Typography>
</AccordionDetails>
</Accordion>
{/* Beamline Details Accordion */}
<Accordion>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="beamline-content"
id="beamline-header"
>
<Typography>
<strong>Beamline Details</strong>
</Typography>
</AccordionSummary>
<AccordionDetails>
<Typography>Synchrotron: {beamline_parameters?.synchrotron || 'N/A'}</Typography>
<Typography>Ring mode: {beamline_parameters?.ringMode || 'N/A'}</Typography>
<Typography>Ring current: {beamline_parameters?.ringCurrent_A || 'N/A'}</Typography>
<Typography>Beamline: {beamline_parameters?.beamline || 'N/A'}</Typography>
<Typography>Undulator: {beamline_parameters?.undulator || 'N/A'}</Typography>
<Typography>Undulator gap: {beamline_parameters?.undulatorgap_mm || 'N/A'}</Typography>
<Typography>Focusing optic: {beamline_parameters?.focusingOptic || 'N/A'}</Typography>
<Typography>Monochromator: {beamline_parameters?.monochromator || 'N/A'}</Typography>
</AccordionDetails>
</Accordion>
{/* Beam Characteristics Accordion */}
<Accordion>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="beam-content"
id="beam-header"
>
<Typography>
<strong>Beam Characteristics</strong>
</Typography>
</AccordionSummary>
<AccordionDetails>
<Typography>Wavelength: {beamline_parameters?.wavelength || 'N/A'}</Typography>
<Typography>Energy: {beamline_parameters?.energy || 'N/A'}</Typography>
<Typography>Transmission: {beamline_parameters?.transmission || 'N/A'}</Typography>
<Typography>
Beam focus (µm): vertical: {beamline_parameters?.beamSizeHeight || 'N/A'}, horizontal:{' '}
{beamline_parameters?.beamSizeWidth || 'N/A'}
</Typography>
<Typography>Flux at sample (ph/s): {beamline_parameters?.beamlineFluxAtSample_ph_s || 'N/A'}</Typography>
</AccordionDetails>
</Accordion>
</div>
{/* Image Section */}
<div style={{ width: '900px' }}>
<Typography variant="h6" gutterBottom>
Associated Images
</Typography>
{images && images.length > 0 ? (
<Grid container spacing={2}>
{images.map((img) => (
<Grid item xs={6} key={img.id}>
<div className="image-container">
<img
src={img.filepath}
alt={img.comment || 'Image'}
className="zoom-image"
style={{
width: '100%',
maxWidth: '100%',
borderRadius: '4px',
}}
/>
</div>
</Grid>
))}
</Grid>
) : (
<Typography variant="body2" color="textSecondary">
No images available.
</Typography>
)}
</div>
</div>
);
};
export default RunDetails;
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment