Update dependencies and improve Python path handling

Updated several frontend dependencies including MUI packages and added new ones like `@mui/x-charts`. Adjusted the Python path setup in the CI configuration to correctly point to the `aaredb` backend, ensuring accurate module resolution.
This commit is contained in:
GotthardG
2025-03-19 09:14:12 +01:00
parent 68f87f0d8d
commit 536cfcd34b
8 changed files with 487 additions and 63 deletions

View File

@@ -4,7 +4,10 @@ import {
} from '@mui/material';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import './SampleImage.css';
import { DataGridPremium, GridColDef } from "@mui/x-data-grid-premium";
import { DataGridPremium, GridColDef, GridValueGetterParams } from "@mui/x-data-grid-premium";
import { LineChart } from '@mui/x-charts/LineChart';
import { SamplesService } from "../../openapi";
interface RunDetailsProps {
@@ -15,6 +18,10 @@ interface RunDetailsProps {
onHeightChange?: (height: number) => void;
}
interface CCPoint {
resolution: number;
value: number;
}
interface ExperimentParameters {
run_number: number;
@@ -26,6 +33,7 @@ interface ExperimentParameters {
interface ProcessingResults {
id: number;
pipeline: string;
resolution: number;
unit_cell: string;
@@ -33,8 +41,8 @@ interface ProcessingResults {
rmerge: number;
rmeas: number;
isig: number;
cc: number;
cchalf: number;
cc: CCPoint[];
cchalf: CCPoint[];
completeness: number;
multiplicity: number;
nobs: number;
@@ -43,6 +51,7 @@ interface ProcessingResults {
comments?: string | null;
}
const RunDetails: React.FC<RunDetailsProps> = ({ run, onHeightChange, basePath, runId, sample_id }) => {
const containerRef = useRef<HTMLDivElement | null>(null);
const [currentHeight, setCurrentHeight] = useState<number>(0);
@@ -71,8 +80,8 @@ const RunDetails: React.FC<RunDetailsProps> = ({ run, onHeightChange, basePath,
rmerge: res.result?.rmerge ?? 0,
rmeas: res.result?.rmeas ?? 0,
isig: res.result?.isig ?? 0,
cc: res.result?.cc ?? 0,
cchalf: res.result?.cchalf ?? 0,
cc: res.result?.cc || [],
cchalf: res.result?.cchalf || [],
completeness: res.result?.completeness ?? 0,
multiplicity: res.result?.multiplicity ?? 0,
nobs: res.result?.nobs ?? 0,
@@ -88,22 +97,38 @@ const RunDetails: React.FC<RunDetailsProps> = ({ run, onHeightChange, basePath,
};
const resultColumns: GridColDef[] = [
{field: 'pipeline', headerName: 'Pipeline', flex: 1},
{field: 'resolution', headerName: 'Resolution (Å)', flex: 1},
{field: 'unit_cell', headerName: 'Unit Cell (Å)', flex: 1.5},
{field: 'spacegroup', headerName: 'Spacegroup', flex: 1},
{field: 'rmerge', headerName: 'Rmerge', flex: 1},
{field: 'rmeas', headerName: 'Rmeas', flex: 1},
{field: 'isig', headerName: 'I/sig(I)', flex: 1},
{field: 'cc', headerName: 'CC', flex: 1},
{field: 'cchalf', headerName: 'CC(1/2)', flex: 1},
{field: 'completeness', headerName: 'Completeness (%)', flex: 1},
{field: 'multiplicity', headerName: 'Multiplicity', flex: 1},
{field: 'nobs', headerName: 'N obs.', flex: 1},
{field: 'total_refl', headerName: 'Total Reflections', flex: 1},
{field: 'unique_refl', headerName: 'Unique Reflections', flex: 1},
{field: 'comments', headerName: 'Comments', flex: 2},
const resultColumns: GridColDef<ProcessingResults>[] = [
{ field: 'pipeline', headerName: 'Pipeline', flex: 1 },
{ field: 'resolution', headerName: 'Resolution (Å)', flex: 1 },
{ field: 'unit_cell', headerName: 'Unit Cell (Å)', flex: 1.5 },
{ field: 'spacegroup', headerName: 'Spacegroup', flex: 1 },
{ field: 'rmerge', headerName: 'Rmerge', flex: 1 },
{ field: 'rmeas', headerName: 'Rmeas', flex: 1 },
{ field: 'isig', headerName: 'I/sig(I)', flex: 1 },
{
field: 'cc',
headerName: 'CC',
flex: 1,
valueGetter: (params: GridValueGetterParams<ProcessingResults, string>) =>
Array.isArray(params.row?.cc)
? params.row.cc.map((point: CCPoint) => `${point.value.toFixed(2)}@${point.resolution.toFixed(2)}`).join(', ')
: '',
},
{
field: 'cchalf',
headerName: 'CC(1/2)',
flex: 1,
valueGetter: (params: GridValueGetterParams<ProcessingResults, string>) =>
Array.isArray(params.row?.cchalf)
? params.row.cchalf.map((point: CCPoint) => `${point.value.toFixed(2)}@${point.resolution.toFixed(2)}`).join(', ')
: '',
},
{ field: 'completeness', headerName: 'Completeness (%)', flex: 1 },
{ field: 'multiplicity', headerName: 'Multiplicity', flex: 1 },
{ field: 'nobs', headerName: 'N obs.', flex: 1 },
{ field: 'total_refl', headerName: 'Total Reflections', flex: 1 },
{ field: 'unique_refl', headerName: 'Unique Reflections', flex: 1 },
{ field: 'comments', headerName: 'Comments', flex: 2 },
];
const updateHeight = () => {
@@ -260,12 +285,12 @@ const RunDetails: React.FC<RunDetailsProps> = ({ run, onHeightChange, basePath,
<AccordionDetails style={{width: '100%', overflowX: 'auto'}}>
{processingResult ? (
<div style={{width: '100%'}}>
<DataGridPremium
rows={processingResult.map((res, idx) => ({id: idx, ...res}))}
<DataGridPremium<ProcessingResults>
rows={processingResult.map((res, idx) => ({ id: idx, ...res }))}
columns={resultColumns}
autoHeight
hideFooter
columnVisibilityModel={{id: false}}
columnVisibilityModel={{ id: false }}
disableColumnResize={false}
/>
</div>
@@ -276,6 +301,38 @@ const RunDetails: React.FC<RunDetailsProps> = ({ run, onHeightChange, basePath,
</Accordion>
</div>
{processingResult && processingResult.length > 0 && (
<div style={{width: 400, marginTop: '16px' }}>
<Typography variant="h6" gutterBottom>CC and CC(1/2) vs Resolution</Typography>
<LineChart
xAxis={[
{
data: processingResult[0].cc
.map((point) => point.resolution) // Grab the resolution values
.reverse(), // Reverse the data for resolution
label: 'Resolution (Å)',
reverse: true, // This ensures the visual flip on the chart, low-res to right and high-res to left
},
]}
series={[
{
data: processingResult[0].cc
.map((point) => point.value)
.reverse(), // Reverse the CC values to match the reversed resolution
label: 'CC',
},
{
data: processingResult[0].cchalf
.map((point) => point.value)
.reverse(), // Reverse the CC(1/2) values to match the reversed resolution
label: 'CC(1/2)',
},
]}
height={300}
/>
</div>
)}
{/* Modal for Zoomed Image */}
<Modal open={modalOpen} onClose={closeModal}>
<Box