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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
frontend/src/App.css
View File

@ -38,14 +38,29 @@
} }
.sample-tracker-container { .sample-tracker-container {
position: relative; /* Ensure tooltip positions correctly within the container */
padding: 10px; padding: 10px;
border: 1px solid #ddd; border: 1px solid #ddd;
border-radius: 5px; border-radius: 5px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1); box-shadow: 0 2px 4px rgba(0,0,0,0.1);
max-width: 80%; /* Reduce this percentage to fit your needs */ max-width: 80%;
width: auto; /* Auto width for responsiveness */ width: auto;
margin: 0 auto; /* Center the tracker horizontally */ margin: 0 auto;
overflow-x: auto; /* Allow horizontal scrolling if necessary */ overflow-x: auto;
}
.tooltip {
position: absolute;
background-color: #f9f9f9;
border: 1px solid #ccc;
border-radius: 5px;
padding: 8px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
top: 50px; /* Adjust positioning */
left: 50%; /* Center horizontally relative to the container */
transform: translateX(-50%);
z-index: 1000;
pointer-events: none; /* Prevents tooltip from interfering with other elements */
} }
.sample-tracker { .sample-tracker {

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

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