cleanup vial grid

Author: imaitland

app/__tests__/unit/root.test.tsx

@@ -9,7 +9,7 @@ describe("root loader", () => {
       params: {},
       context: {},
     });
-    const data = await response.json();
+    const data = await response;
     expect(data).toEqual({
       theme: "dark",
       ENV: {
@@ -29,7 +29,7 @@ describe("root loader", () => {
       params: {},
       context: {},
     });
-    const data = await response.json();
+    const data = await response;
     expect(data.theme).toEqual("light");
   });
 });

app/components/VialGrid.tsx

@@ -9,7 +9,7 @@ const DataTable = ({
 }: {
   id: string;
   vialIndex: number;
-  data: { [key: string]: number | null };
+  data: { [key: string]: number };
   excludedProperties?: string[];
 }) => {
   return (
@@ -26,7 +26,7 @@ const DataTable = ({
         </thead>
         <tbody>
           {Object.keys(data).map((mainKey) =>
-            Object.keys(data[mainKey]).map((subKey, subIndex) => {
+            Object.keys(data[mainKey]).map((subKey: string, subIndex) => {
               let renderSubKey = true;
               if (excludedProperties.includes(subKey)) {
                 renderSubKey = false;
@@ -58,9 +58,8 @@ const DataTable = ({
                   )}
                   {renderSubKey && (
                     <td>
-                      {data[mainKey][subKey] !== null &&
-                        data[mainKey][subKey].toString()}
-                      {data[mainKey][subKey] == null && "-"}
+                      {data[mainKey][subKey]}
+                      {!data[mainKey][subKey] && "-"}
                     </td>
                   )}
                 </tr>
@@ -116,14 +115,12 @@ export function VialGrid({
           <span className="block text-[5vw] leading-none">{index}</span>
         </div>
         {hasData && (
-          <div className="relative z-10">
-            <DataTable
-              data={data}
-              id={id}
-              vialIndex={index}
-              excludedProperties={excludedProperties}
-            />
-          </div>
+          <DataTable
+            data={data}
+            id={id}
+            vialIndex={index}
+            excludedProperties={excludedProperties}
+          />
         )}
       </div>
     );

app/routes/devices.$id.hardware.$hardware_name.calibrate.tsx

@@ -346,12 +346,17 @@ const CalibrationProcedureControls = ({
 
 export function ErrorBoundary() {
   return (
-    <div className="flex flex-col gap-4 bg-base-300 rounded-box">
-      <WrenchScrewdriverIcon className="w-10 h-10" />
-      <div>
+    <div>
+      <div className="flex flex-col gap-4">
+        <CalibrationProcedureControls started={false} />
+      </div>
+      <div className="flex flex-col gap-4 bg-base-300 rounded-box">
+        <WrenchScrewdriverIcon className="w-10 h-10" />
         <div>
-          <h1 className="font-mono">{`The calibration procedure encountered an error.
+          <div>
+            <h1 className="font-mono">{`The calibration procedure encountered an error.
           Make sure there is a procedure defined on the hardware in the config and the procedure has been started`}</h1>
+          </div>
         </div>
       </div>
     </div>