Prettier again

Author: alexanderbock

backend/frontend/src/App.tsx

@@ -1,4 +1,4 @@
-import { BrowserRouter, Route,Routes } from 'react-router-dom';
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
 
 import Compare from './pages/Compare';
 import Home from './pages/Home';
@@ -7,8 +7,8 @@ function App() {
   return (
     <BrowserRouter>
       <Routes>
-        <Route path={"/"} element={<Home />} />
-        <Route path={"/compare"} element={<Compare />} />
+        <Route path={'/'} element={<Home />} />
+        <Route path={'/compare'} element={<Compare />} />
       </Routes>
     </BrowserRouter>
   );

backend/frontend/src/components/ImageThumbnail.tsx

@@ -21,13 +21,13 @@ export function ImageThumbnail({
   return (
     <Anchor
       href={`/api/result/${type}/${group}/${name}/${hardware}${timePart}`}
-      target={"_blank"}
+      target={'_blank'}
       onClick={stopPropagation ? (e: React.MouseEvent) => e.stopPropagation() : undefined}
     >
       <img
         src={`/api/result/${type}-thumbnail/${group}/${name}/${hardware}${timePart}`}
         style={{ width: 170, height: 95.625 }}
-        loading={"lazy"}
+        loading={'lazy'}
         alt={type}
       />
     </Anchor>

backend/frontend/src/components/TestHistory.tsx

@@ -1,6 +1,6 @@
 import { Anchor, Box, Button, Table, Text } from '@mantine/core';
 
-import { TestData,TestRecord } from '../types';
+import { TestData, TestRecord } from '../types';
 import { diffDisplay, diffStyle, timingDisplay } from '../utils';
 
 import { ImageThumbnail } from './ImageThumbnail';
@@ -14,8 +14,13 @@ export function TestHistory({ record, onUpdateReference }: Props) {
   const testData = [...record.data].reverse();
 
   return (
-    <Box p={"md"} bg={"dark.8"}>
-      <Table horizontalSpacing={"xs"} verticalSpacing={4} withTableBorder withColumnBorders>
+    <Box p={'md'} bg={'dark.8'}>
+      <Table
+        horizontalSpacing={'xs'}
+        verticalSpacing={4}
+        withTableBorder
+        withColumnBorders
+      >
         <Table.Thead>
           <Table.Tr>
             <Table.Th>Timestamp</Table.Th>
@@ -33,7 +38,7 @@ export function TestHistory({ record, onUpdateReference }: Props) {
           {testData.map((d: TestData, i: number) => (
             <Table.Tr key={d.timeStamp}>
               <Table.Td>
-                <Text size={"sm"} c={"dimmed"}>
+                <Text size={'sm'} c={'dimmed'}>
                   {new Date(d.timeStamp).toUTCString()}
                 </Text>
               </Table.Td>
@@ -54,7 +59,7 @@ export function TestHistory({ record, onUpdateReference }: Props) {
               <Table.Td>
                 <Anchor
                   href={`https://github.com/OpenSpace/OpenSpace/commit/${d.commitHash}`}
-                  target={"_blank"}
+                  target={'_blank'}
                 >
                   {d.commitHash.substring(0, 8)}
                 </Anchor>
@@ -65,14 +70,14 @@ export function TestHistory({ record, onUpdateReference }: Props) {
               <Table.Td>
                 <Anchor
                   href={`/api/result/log/${record.group}/${record.name}/${record.hardware}/${d.timeStamp}`}
-                  target={"_blank"}
+                  target={'_blank'}
                 >
                   Log ({d.nErrors} errors)
                 </Anchor>
               </Table.Td>
               <Table.Td>
                 <ImageThumbnail
-                  type={"candidate"}
+                  type={'candidate'}
                   group={record.group}
                   name={record.name}
                   hardware={record.hardware}
@@ -81,7 +86,7 @@ export function TestHistory({ record, onUpdateReference }: Props) {
               </Table.Td>
               <Table.Td>
                 <ImageThumbnail
-                  type={"reference"}
+                  type={'reference'}
                   group={record.group}
                   name={record.name}
                   hardware={record.hardware}
@@ -90,7 +95,7 @@ export function TestHistory({ record, onUpdateReference }: Props) {
               </Table.Td>
               <Table.Td>
                 <ImageThumbnail
-                  type={"difference"}
+                  type={'difference'}
                   group={record.group}
                   name={record.name}
                   hardware={record.hardware}
@@ -99,7 +104,7 @@ export function TestHistory({ record, onUpdateReference }: Props) {
               </Table.Td>
               <Table.Td>
                 {i === 0 && (
-                  <Button variant={"default"} onClick={() => onUpdateReference(record)}>
+                  <Button variant={'default'} onClick={() => onUpdateReference(record)}>
                     Upgrade Candidate to Reference
                   </Button>
                 )}

backend/frontend/src/components/TestRow.tsx

@@ -36,20 +36,20 @@ export function TestRow({ record, onOpen }: Props) {
       <Table.Td>{timingDisplay(latestData.timing)}</Table.Td>
       <Table.Td>
         <Anchor
-          size={"sm"}
+          size={'sm'}
           href={`https://github.com/OpenSpace/OpenSpace/commit/${latestData.commitHash}`}
-          target={"_blank"}
+          target={'_blank'}
           onClick={(e: React.MouseEvent) => e.stopPropagation()}
         >
           {latestData.commitHash.substring(0, 8)}
         </Anchor>
       </Table.Td>
       <Table.Td>
-        <Text size={"sm"}>{new Date(latestData.timeStamp).toISOString()}</Text>
+        <Text size={'sm'}>{new Date(latestData.timeStamp).toISOString()}</Text>
       </Table.Td>
       <Table.Td>
         <ImageThumbnail
-          type={"candidate"}
+          type={'candidate'}
           group={record.group}
           name={record.name}
           hardware={record.hardware}
@@ -58,7 +58,7 @@ export function TestRow({ record, onOpen }: Props) {
       </Table.Td>
       <Table.Td>
         <ImageThumbnail
-          type={"reference"}
+          type={'reference'}
           group={record.group}
           name={record.name}
           hardware={record.hardware}
@@ -67,7 +67,7 @@ export function TestRow({ record, onOpen }: Props) {
       </Table.Td>
       <Table.Td>
         <ImageThumbnail
-          type={"difference"}
+          type={'difference'}
           group={record.group}
           name={record.name}
           hardware={record.hardware}

backend/frontend/src/main.tsx

@@ -9,7 +9,7 @@ import './styles/common.css';
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
-    <MantineProvider defaultColorScheme={"dark"}>
+    <MantineProvider defaultColorScheme={'dark'}>
       <App />
     </MantineProvider>
   </StrictMode>

backend/frontend/src/pages/Compare.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef,useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { Link, useSearchParams } from 'react-router-dom';
 import {
   Anchor,
@@ -43,7 +43,7 @@ function CompareCell({ type, group, name, hardware1, hardware2 }: Props) {
         textAlign: 'center'
       }}
     >
-      <Anchor href={compareUrl} target={"_blank"}>
+      <Anchor href={compareUrl} target={'_blank'}>
         <img
           src={compareUrl}
           alt={`${hardware1} vs ${hardware2}`}
@@ -56,7 +56,7 @@ function CompareCell({ type, group, name, hardware1, hardware2 }: Props) {
           mt={2}
           style={{ borderRadius: 4, display: 'inline-block', ...diffStyle(pixelError) }}
         >
-          <Text size={"sm"}>{diffDisplay(pixelError)}</Text>
+          <Text size={'sm'}>{diffDisplay(pixelError)}</Text>
         </Box>
       )}
     </Table.Td>
@@ -112,37 +112,37 @@ export default function Compare() {
     <Box>
       {/* Header */}
       <Box
-        py={"md"}
+        py={'md'}
         style={{ textAlign: 'center', backgroundColor: 'var(--mantine-color-dark-7)' }}
       >
         <Title order={1} style={{ fontVariant: 'small-caps' }}>
-          <Link to={"/"} style={{ textDecoration: 'none', color: 'white' }}>
+          <Link to={'/'} style={{ textDecoration: 'none', color: 'white' }}>
             OpenSpace Image Testing
           </Link>
         </Title>
       </Box>
 
       {/* Input fields */}
       <Group
-        p={"sm"}
-        align={"flex-end"}
+        p={'sm'}
+        align={'flex-end'}
         style={{ backgroundColor: 'var(--mantine-color-dark-6)' }}
       >
         <TextInput
-          label={"Group"}
-          size={"sm"}
+          label={'Group'}
+          size={'sm'}
           value={group}
           onChange={(e) => setGroup(e.target.value)}
         />
         <TextInput
-          label={"Name"}
-          size={"sm"}
+          label={'Name'}
+          size={'sm'}
           value={name}
           onChange={(e) => setName(e.target.value)}
         />
         <Select
-          label={"Type"}
-          size={"sm"}
+          label={'Type'}
+          size={'sm'}
           w={160}
           value={type}
           onChange={(val) => setType((val ?? 'reference') as ImageType)}
@@ -157,15 +157,15 @@ export default function Compare() {
       </Group>
 
       {shareUrl && (
-        <Box px={"sm"} py={"xs"}>
-          <Anchor href={shareUrl} size={"sm"}>
+        <Box px={'sm'} py={'xs'}>
+          <Anchor href={shareUrl} size={'sm'}>
             {shareUrl}
           </Anchor>
         </Box>
       )}
 
       {hasResult && (
-        <Table id={"splom"} withColumnBorders withTableBorder>
+        <Table id={'splom'} withColumnBorders withTableBorder>
           <Table.Tbody>
             {hardwares.map((hw, i) => (
               <Table.Tr key={hw}>
@@ -183,15 +183,15 @@ export default function Compare() {
                 >
                   <Anchor
                     href={`/api/result/${rType}/${rGroup}/${rName}/${hw}`}
-                    target={"_blank"}
+                    target={'_blank'}
                   >
                     <img
                       src={`/api/result/${rType}-thumbnail/${rGroup}/${rName}/${hw}`}
                       alt={hw}
                       style={{ width: 150, height: 84.375 }}
                     />
                   </Anchor>
-                  <Text size={"sm"} ta={"center"}>
+                  <Text size={'sm'} ta={'center'}>
                     {hw}
                   </Text>
                 </Table.Td>

backend/frontend/src/pages/Home.tsx

@@ -1,4 +1,4 @@
-import { useEffect,useState } from 'react';
+import { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
 import {
   Anchor,
@@ -17,7 +17,7 @@ import {
 import { SortableHeader } from '../components/SortableHeader';
 import { TestHistory } from '../components/TestHistory';
 import { TestRow } from '../components/TestRow';
-import { SortColumn,TestRecord } from '../types';
+import { SortColumn, TestRecord } from '../types';
 import { sortRecords } from '../utils';
 
 export default function Home() {
@@ -80,36 +80,36 @@ export default function Home() {
     <Box>
       {/* Header */}
       <Box
-        py={"md"}
+        py={'md'}
         style={{ textAlign: 'center', backgroundColor: 'var(--mantine-color-dark-7)' }}
       >
         <Title
           order={1}
           style={{ fontVariant: 'small-caps', fontFamily: 'Roboto, sans-serif' }}
         >
-          <Link to={"/"} style={{ textDecoration: 'none', color: 'white' }}>
+          <Link to={'/'} style={{ textDecoration: 'none', color: 'white' }}>
             OpenSpace Image Testing
           </Link>
         </Title>
       </Box>
 
       {/* Controls */}
       <Group
-        p={"sm"}
-        align={"flex-start"}
-        justify={"space-between"}
+        p={'sm'}
+        align={'flex-start'}
+        justify={'space-between'}
         style={{ backgroundColor: 'var(--mantine-color-dark-6)' }}
       >
-        <Group gap={"sm"} align={"center"} wrap={"wrap"}>
+        <Group gap={'sm'} align={'center'} wrap={'wrap'}>
           <Text fw={600}>Hardware:</Text>
           <Select
-            size={"xs"}
+            size={'xs'}
             w={200}
             data={[
               { value: 'all', label: 'All' },
               ...allHardware.map((hw) => ({ value: hw, label: hw }))
             ]}
-            defaultValue={"all"}
+            defaultValue={'all'}
             onChange={(val) => {
               if (val === 'all') setSelectedHardware(new Set(allHardware));
               else if (val) setSelectedHardware(new Set([val]));
@@ -123,14 +123,14 @@ export default function Home() {
               onChange={() => toggleHardware(hw)}
             />
           ))}
-          <Anchor component={Link as any} to={"/compare"} size={"sm"}>
+          <Anchor component={Link as any} to={'/compare'} size={'sm'}>
             Hardware Compare
           </Anchor>
         </Group>
-        <Group gap={"xs"}>
+        <Group gap={'xs'}>
           <Text fw={600}>Admin:</Text>
           <PasswordInput
-            size={"xs"}
+            size={'xs'}
             w={180}
             value={adminToken}
             onChange={(e) => setAdminToken(e.target.value)}
@@ -142,13 +142,17 @@ export default function Home() {
       <Table striped highlightOnHover withColumnBorders stickyHeader>
         <Table.Thead>
           <Table.Tr>
-            <SortableHeader sortKey={"pixelError"} label={"Error"} onSort={handleSort} />
-            <SortableHeader sortKey={"group"} label={"Group"} onSort={handleSort} />
-            <SortableHeader sortKey={"name"} label={"Name"} onSort={handleSort} />
-            <SortableHeader sortKey={"hardware"} label={"Hardware"} onSort={handleSort} />
-            <SortableHeader sortKey={"timing"} label={"Timing"} onSort={handleSort} />
-            <SortableHeader sortKey={"commitHash"} label={"Commit"} onSort={handleSort} />
-            <SortableHeader sortKey={"timeStamp"} label={"Timestamp"} onSort={handleSort} />
+            <SortableHeader sortKey={'pixelError'} label={'Error'} onSort={handleSort} />
+            <SortableHeader sortKey={'group'} label={'Group'} onSort={handleSort} />
+            <SortableHeader sortKey={'name'} label={'Name'} onSort={handleSort} />
+            <SortableHeader sortKey={'hardware'} label={'Hardware'} onSort={handleSort} />
+            <SortableHeader sortKey={'timing'} label={'Timing'} onSort={handleSort} />
+            <SortableHeader sortKey={'commitHash'} label={'Commit'} onSort={handleSort} />
+            <SortableHeader
+              sortKey={'timeStamp'}
+              label={'Timestamp'}
+              onSort={handleSort}
+            />
             <Table.Th>Candidate</Table.Th>
             <Table.Th>Reference</Table.Th>
             <Table.Th>Difference</Table.Th>
@@ -173,7 +177,7 @@ export default function Home() {
             ? `${selectedRecord.group} / ${selectedRecord.name} — ${selectedRecord.hardware}`
             : ''
         }
-        size={"auto"}
+        size={'auto'}
         scrollAreaComponent={ScrollArea.Autosize}
       >
         {selectedRecord && (

backend/frontend/src/utils.ts

@@ -1,4 +1,4 @@
-import { SortColumn,TestRecord } from './types';
+import { SortColumn, TestRecord } from './types';
 
 export function diffDisplay(diff: number): string {
   return `${Math.round(diff * 100000) / 1000}%`;