more infos on the sample tracker

frontend/src/App.css

@@ -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 */
+  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 {

frontend/src/components/SampleTracker.tsx

@@ -21,12 +21,12 @@ 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 [hoveredSample, setHoveredSample] = useState<{name: string, status: string} | null>(null);
 
   useEffect(() => {
     const fetchPucks = async () => {
@@ -35,7 +35,7 @@ const SampleTracker: React.FC = () => {
         console.log(data);  // Log the data to inspect it
         setPucks(data);
       } catch (error) {
-               console.error('Error fetching pucks', error);
+        console.error("Error fetching pucks", error);
       }
     };
     fetchPucks();
@@ -54,6 +54,20 @@ const SampleTracker: React.FC = () => {
     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">
@@ -69,6 +83,7 @@ const SampleTracker: React.FC = () => {
               <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}
@@ -78,8 +93,11 @@ const SampleTracker: React.FC = () => {
                           ? getSampleColor(sample.events)
                           : 'transparent',
                         border: sample && sample.events.some(e => e.event_type === 'Lost')
-                                                    ? '1px solid red' : '1px solid lightgray',
+                          ? '1px solid red'
+                          : '1px solid lightgray',
                       }}
+                      onMouseEnter={() => sample && setHoveredSample({name: sample.sample_name, status})}
+                      onMouseLeave={() => setHoveredSample(null)}
                     ></div>
                   );
                 })}
@@ -87,6 +105,12 @@ const SampleTracker: React.FC = () => {
             </div>
           ))}
         </div>
+        {hoveredSample && (
+          <div className="tooltip">
+            <p><strong>Name:</strong> {hoveredSample.name}</p>
+            <p><strong>Status:</strong> {hoveredSample.status}</p>
+          </div>
+        )}
       </div>
     </div>
   );