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

more infos on the sample tracker

Browse Source
This commit is contained in:
GotthardG
2024-12-04 15:06:43 +01:00
parent 7b00db3c0d
commit 46f6122dca
2 changed files with 104 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

146
frontend/src/components/SampleTracker.tsx
View File

@ -21,75 +21,99 @@ interface Puck {
puck_type: string;
puck_location_in_dewar: number;
dewar_id: number;
samples: Sample[]; // Check that the API returns this attribute
samples: Sample[];
}
const SampleTracker: React.FC = () => {
const [pucks, setPucks] = useState<Puck[]>([]);
const [pucks, setPucks] = useState<Puck[]>([]);
const [hoveredSample, setHoveredSample] = useState<{name: string, status: string} | null>(null);
useEffect(() => {
const fetchPucks = async () => {
try {
const data: Puck[] = await SamplesService.getAllPucksWithSamplesAndEventsSamplesPucksSamplesGet();
console.log(data); // Log the data to inspect it
setPucks(data);
} catch (error) {
console.error('Error fetching pucks', error);
}
};
fetchPucks();
}, []);
const getSampleColor = (events: Event[] = []) => {
const hasMounted = events.some(e => e.event_type === 'Mounted');
const hasUnmounted = events.some(e => e.event_type === 'Unmounted');
const hasLost = events.some(e => e.event_type === 'Lost');
const hasFailed = events.some(e => e.event_type === 'Failed');
if (hasFailed) return 'red';
if (hasLost) return 'orange';
if (hasMounted && hasUnmounted) return 'green';
return 'gray';
useEffect(() => {
const fetchPucks = async () => {
try {
const data: Puck[] = await SamplesService.getAllPucksWithSamplesAndEventsSamplesPucksSamplesGet();
console.log(data); // Log the data to inspect it
setPucks(data);
} catch (error) {
console.error("Error fetching pucks", error);
}
};
fetchPucks();
}, []);
return (
<div className="sample-tracker-container">
<div className="sample-tracker">
<h2>All Pucks and Samples</h2>
<div className="pucks-container">
{pucks.map((puck) => (
<div key={puck.id} className="puck-column">
<div className="puck-label">
{puck.puck_name.split('').map((char, i) => (
<span key={i}>{char}</span>
))}
</div>
<div className="samples">
{Array.from({length: 16}).map((_, index) => {
const sample = puck.samples.find(s => s.position === index + 1);
return (
<div
key={index}
className="sample-dot"
style={{
backgroundColor: sample
? getSampleColor(sample.events)
: 'transparent',
border: sample && sample.events.some(e => e.event_type === 'Lost')
? '1px solid red' : '1px solid lightgray',
}}
></div>
);
})}
</div>
</div>
))}
</div>
const getSampleColor = (events: Event[] = []) => {
const hasMounted = events.some(e => e.event_type === 'Mounted');
const hasUnmounted = events.some(e => e.event_type === 'Unmounted');
const hasLost = events.some(e => e.event_type === 'Lost');
const hasFailed = events.some(e => e.event_type === 'Failed');
if (hasFailed) return 'red';
if (hasLost) return 'orange';
if (hasMounted && hasUnmounted) return 'green';
return 'gray';
};
const getSampleStatus = (events: Event[] = []) => {
const hasMounted = events.some(e => e.event_type === 'Mounted');
const hasUnmounted = events.some(e => e.event_type === 'Unmounted');
const hasLost = events.some(e => e.event_type === 'Lost');
const hasFailed = events.some(e => e.event_type === 'Failed');
if (hasFailed) return 'Failed';
if (hasLost) return 'Lost';
if (hasMounted && hasUnmounted) return 'Completed';
if (hasMounted) return 'In Progress';
return 'Pending';
};
return (
<div className="sample-tracker-container">
<div className="sample-tracker">
<h2>All Pucks and Samples</h2>
<div className="pucks-container">
{pucks.map((puck) => (
<div key={puck.id} className="puck-column">
<div className="puck-label">
{puck.puck_name.split('').map((char, i) => (
<span key={i}>{char}</span>
))}
</div>
<div className="samples">
{Array.from({ length: 16 }).map((_, index) => {
const sample = puck.samples.find(s => s.position === index + 1);
const status = sample ? getSampleStatus(sample.events) : '';
return (
<div
key={index}
className="sample-dot"
style={{
backgroundColor: sample
? getSampleColor(sample.events)
: 'transparent',
border: sample && sample.events.some(e => e.event_type === 'Lost')
? '1px solid red'
: '1px solid lightgray',
}}
onMouseEnter={() => sample && setHoveredSample({name: sample.sample_name, status})}
onMouseLeave={() => setHoveredSample(null)}
></div>
);
})}
</div>
</div>
))}
</div>
);
{hoveredSample && (
<div className="tooltip">
<p><strong>Name:</strong> {hoveredSample.name}</p>
<p><strong>Status:</strong> {hoveredSample.status}</p>
</div>
)}
</div>
</div>
);
};
export default SampleTracker;