Transpose the modal table. Increase the size of the thumbnail image

Author: alexanderbock

backend/frontend/src/components/ImageThumbnail.tsx

@@ -19,7 +19,7 @@ export function ImageThumbnail({
     >
       <img
         src={`/api/result/${type}-thumbnail/${group}/${name}/${hardware}${timePart}`}
-        style={{ width: 85, height: 47.8125 }}
+        style={{ width: 170, height: 95.625 }}
         loading="lazy"
         alt={type}
       />

backend/frontend/src/components/TestHistory.tsx

@@ -12,62 +12,34 @@ export function TestHistory({
 }) {
   const testData = [...record.data].reverse()
 
-  function imageRow(type: string) {
-    return (
-      <Table.Tr key={type}>
-        <Table.Td style={{ transform: 'rotate(270deg)', whiteSpace: 'nowrap', width: 20 }}>
-          {type.charAt(0).toUpperCase() + type.slice(1)}
-        </Table.Td>
-        {testData.map((d: TestData) => (
-          <Table.Td key={d.timeStamp}>
-            <ImageThumbnail
-              type={type}
-              group={record.group}
-              name={record.name}
-              hardware={record.hardware}
-              timestamp={d.timeStamp}
-            />
-          </Table.Td>
-        ))}
-      </Table.Tr>
-    )
-  }
-
   return (
     <Box p="md" bg="dark.8">
-      <Table horizontalSpacing="xs" verticalSpacing={4}>
-        <Table.Tbody>
+      <Table horizontalSpacing="xs" verticalSpacing={4} withTableBorder withColumnBorders>
+        <Table.Thead>
           <Table.Tr>
-            <Table.Td />
-            {testData.map((d: TestData) => (
-              <Table.Td
-                key={d.timeStamp}
-                style={{ ...diffStyle(d.pixelError), width: 20, height: 15, padding: 0 }}
-              />
-            ))}
+            <Table.Th>Timestamp</Table.Th>
+            <Table.Th>Error</Table.Th>
+            <Table.Th>Commit</Table.Th>
+            <Table.Th>Timing</Table.Th>
+            <Table.Th>Log</Table.Th>
+            <Table.Th>Candidate</Table.Th>
+            <Table.Th>Reference</Table.Th>
+            <Table.Th>Difference</Table.Th>
+            <Table.Th />
           </Table.Tr>
-          <Table.Tr>
-            <Table.Td />
-            {testData.map((d: TestData) => (
-              <Table.Td key={d.timeStamp}>
+        </Table.Thead>
+        <Table.Tbody>
+          {testData.map((d: TestData, i: number) => (
+            <Table.Tr key={d.timeStamp}>
+              <Table.Td>
                 <Text size="xs" c="dimmed">{new Date(d.timeStamp).toUTCString()}</Text>
               </Table.Td>
-            ))}
-          </Table.Tr>
-          <Table.Tr>
-            <Table.Td />
-            {testData.map((d: TestData) => (
-              <Table.Td key={d.timeStamp}>
+              <Table.Td>
                 <Box px={4} style={{ borderRadius: 4, display: 'inline-block', ...diffStyle(d.pixelError) }}>
                   <Text size="sm">{diffDisplay(d.pixelError)}</Text>
                 </Box>
               </Table.Td>
-            ))}
-          </Table.Tr>
-          <Table.Tr>
-            <Table.Td />
-            {testData.map((d: TestData) => (
-              <Table.Td key={d.timeStamp}>
+              <Table.Td>
                 <Anchor
                   size="xs"
                   href={`https://github.com/OpenSpace/OpenSpace/commit/${d.commitHash}`}
@@ -76,20 +48,10 @@ export function TestHistory({
                   {d.commitHash.substring(0, 8)}
                 </Anchor>
               </Table.Td>
-            ))}
-          </Table.Tr>
-          <Table.Tr>
-            <Table.Td />
-            {testData.map((d: TestData) => (
-              <Table.Td key={d.timeStamp}>
+              <Table.Td>
                 <Text size="sm">{timingDisplay(d.timing)}</Text>
               </Table.Td>
-            ))}
-          </Table.Tr>
-          <Table.Tr>
-            <Table.Td />
-            {testData.map((d: TestData) => (
-              <Table.Td key={d.timeStamp}>
+              <Table.Td>
                 <Anchor
                   size="xs"
                   href={`/api/result/log/${record.group}/${record.name}/${record.hardware}/${d.timeStamp}`}
@@ -98,22 +60,27 @@ export function TestHistory({
                   Log ({d.nErrors} errors)
                 </Anchor>
               </Table.Td>
-            ))}
-          </Table.Tr>
-          {imageRow('candidate')}
-          {imageRow('reference')}
-          {imageRow('difference')}
-          <Table.Tr>
-            <Table.Td />
-            <Table.Td>
-              <Button size="xs" variant="default" onClick={() => onUpdateReference(record)}>
-                Upgrade Candidate to Reference
-              </Button>
-            </Table.Td>
-            {testData.slice(1).map((d: TestData) => (
-              <Table.Td key={d.timeStamp} />
-            ))}
-          </Table.Tr>
+              <Table.Td>
+                <ImageThumbnail type="candidate" group={record.group} name={record.name}
+                  hardware={record.hardware} timestamp={d.timeStamp} />
+              </Table.Td>
+              <Table.Td>
+                <ImageThumbnail type="reference" group={record.group} name={record.name}
+                  hardware={record.hardware} timestamp={d.timeStamp} />
+              </Table.Td>
+              <Table.Td>
+                <ImageThumbnail type="difference" group={record.group} name={record.name}
+                  hardware={record.hardware} timestamp={d.timeStamp} />
+              </Table.Td>
+              <Table.Td>
+                {i === 0 && (
+                  <Button size="xs" variant="default" onClick={() => onUpdateReference(record)}>
+                    Upgrade Candidate to Reference
+                  </Button>
+                )}
+              </Table.Td>
+            </Table.Tr>
+          ))}
         </Table.Tbody>
       </Table>
     </Box>