gotthard_g/aaredb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update routing and components to handle activePgroup in URLs

Browse Source 
Modified navigation to include activePgroup as a query parameter. Updated ResultsView, SampleTracker, and ResultGrid components to utilize activePgroup for contextual filtering based on the URL. This ensures proper grouping and improved parameter handling across the application.
This commit is contained in:
GotthardG 2025-05-06 11:39:11 +02:00
parent 4328b84795
commit a169a39edd
3 changed files with 7 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/components/BeamtimeOverview.tsx
View File

@ -119,7 +119,7 @@ const BeamtimeOverview: React.FC<BeamtimeOverviewProps> = ({ activePgroup }) =>
// Navigate to the ResultsView page for the selected beamtime // Navigate to the ResultsView page for the selected beamtime
const handleViewResults = (beamtimeId: number) => { const handleViewResults = (beamtimeId: number) => {
navigate(`/results/${beamtimeId}`); // Pass the beamtimeId in the URL navigate(`/results/${beamtimeId}?pgroup=${activePgroup}`);
}; };
return ( return (

1
frontend/src/components/ResultGrid.tsx
View File

@ -13,7 +13,6 @@ import HourglassEmptyIcon from '@mui/icons-material/HourglassEmpty';
// Extend your image info interface if needed. // Extend your image info interface if needed.
interface ImageInfo { interface ImageInfo {
id: number; id: number;

9
frontend/src/pages/ResultsView.tsx
View File

@ -1,13 +1,16 @@
import React from 'react'; import React from 'react';
import { useParams } from 'react-router-dom'; import { useParams, useSearchParams} from 'react-router-dom';
import SampleTracker from '../components/SampleTracker'; import SampleTracker from '../components/SampleTracker';
import ResultGrid from '../components/ResultGrid'; import ResultGrid from '../components/ResultGrid';
interface ResultsViewProps {} interface ResultsViewProps {}
const ResultsView: React.FC<ResultsViewProps> = () => { const ResultsView: React.FC<ResultsViewProps> = () => {
// Get the selected beamtime ID from the URL // Get the selected beamtime ID from the URL
const { beamtimeId } = useParams(); const { beamtimeId } = useParams();
const [searchParams] = useSearchParams();
const activePgroup = searchParams.get("pgroup") ?? '';
return ( return (
<div> <div>
@ -15,8 +18,8 @@ const ResultsView: React.FC<ResultsViewProps> = () => {
<h2>Results for Beamtime ID: {beamtimeId}</h2> <h2>Results for Beamtime ID: {beamtimeId}</h2>
{/* Use the beamtimeId to filter or query specific results */} {/* Use the beamtimeId to filter or query specific results */}
<SampleTracker activePgroup={`beamtime_${beamtimeId}`} /> <SampleTracker activePgroup={activePgroup} beamtimeId={beamtimeId} />
<ResultGrid activePgroup={`beamtime_${beamtimeId}`} /> <ResultGrid activePgroup={activePgroup} beamtimeId={beamtimeId} />
</div> </div>
); );
}; };