Increase the size of the image thumbnails

Author: alexanderbock

backend/frontend/src/components/ImageThumbnail.tsx

@@ -7,6 +7,7 @@ interface Props {
   hardware: string;
   timestamp?: string;
   stopPropagation?: boolean;
+  width: number;
 }
 
 export function ImageThumbnail({
@@ -15,7 +16,8 @@ export function ImageThumbnail({
   name,
   hardware,
   timestamp,
-  stopPropagation = false
+  stopPropagation = false,
+  width
 }: Props) {
   const timePart = timestamp ? `/${timestamp}` : '';
   return (
@@ -26,7 +28,7 @@ export function ImageThumbnail({
     >
       <img
         src={`/api/result/${type}-thumbnail/${group}/${name}/${hardware}${timePart}`}
-        style={{ width: 170, height: 95.625 }}
+        style={{ width }}
         loading={'lazy'}
         alt={type}
       />

backend/frontend/src/components/TestHistory.tsx

@@ -13,6 +13,8 @@ interface Props {
 export function TestHistory({ record, onUpdateReference }: Props) {
   const testData = [...record.data].reverse();
 
+  const ImageWidth = 250;
+
   return (
     <Box p={'md'} bg={'dark.8'}>
       <Table
@@ -82,6 +84,7 @@ export function TestHistory({ record, onUpdateReference }: Props) {
                   name={record.name}
                   hardware={record.hardware}
                   timestamp={d.timeStamp}
+                  width={ImageWidth}
                 />
               </Table.Td>
               <Table.Td>
@@ -91,6 +94,7 @@ export function TestHistory({ record, onUpdateReference }: Props) {
                   name={record.name}
                   hardware={record.hardware}
                   timestamp={d.timeStamp}
+                  width={ImageWidth}
                 />
               </Table.Td>
               <Table.Td>
@@ -100,6 +104,7 @@ export function TestHistory({ record, onUpdateReference }: Props) {
                   name={record.name}
                   hardware={record.hardware}
                   timestamp={d.timeStamp}
+                  width={ImageWidth}
                 />
               </Table.Td>
               <Table.Td>

backend/frontend/src/components/TestRow.tsx

@@ -14,6 +14,8 @@ export function TestRow({ record, onOpen }: Props) {
   const latestData = record.data[record.data.length - 1];
   if (!latestData) return null;
 
+  const ImageWidth = 250;
+
   return (
     <Table.Tr style={{ cursor: 'pointer' }} onClick={() => onOpen(record)}>
       <Table.Td style={{ width: 90 }}>
@@ -47,31 +49,34 @@ export function TestRow({ record, onOpen }: Props) {
       <Table.Td>
         <Text size={'sm'}>{new Date(latestData.timeStamp).toISOString()}</Text>
       </Table.Td>
-      <Table.Td>
+      <Table.Td style={{ width: ImageWidth }}>
         <ImageThumbnail
           type={'candidate'}
           group={record.group}
           name={record.name}
           hardware={record.hardware}
           stopPropagation
+          width={ImageWidth}
         />
       </Table.Td>
-      <Table.Td>
+      <Table.Td style={{ width: ImageWidth }}>
         <ImageThumbnail
           type={'reference'}
           group={record.group}
           name={record.name}
           hardware={record.hardware}
           stopPropagation
+          width={ImageWidth}
         />
       </Table.Td>
-      <Table.Td>
+      <Table.Td style={{ width: ImageWidth }}>
         <ImageThumbnail
           type={'difference'}
           group={record.group}
           name={record.name}
           hardware={record.hardware}
           stopPropagation
+          width={ImageWidth}
         />
       </Table.Td>
     </Table.Tr>