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 {
position: relative; /* Ensure tooltip positions correctly within the container */
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
max-width: 80%; /* Reduce this percentage to fit your needs */
width: auto; /* Auto width for responsiveness */
margin: 0 auto; /* Center the tracker horizontally */
overflow-x: auto; /* Allow horizontal scrolling if necessary */
max-width: 80%;
width: auto;
margin: 0 auto;
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 {

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;