Run ESLint

Author: alexanderbock

backend/frontend/src/App.tsx

@@ -1,13 +1,14 @@
-import { BrowserRouter, Routes, Route } from 'react-router-dom';
-import Home from './pages/Home';
+import { BrowserRouter, Route,Routes } from 'react-router-dom';
+
 import Compare from './pages/Compare';
+import Home from './pages/Home';
 
 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/SortableHeader.tsx

@@ -1,4 +1,5 @@
 import { Table } from '@mantine/core';
+
 import { SortColumn } from '../types';
 
 interface Props {

backend/frontend/src/components/TestHistory.tsx

@@ -1,6 +1,8 @@
 import { Anchor, Box, Button, Table, Text } from '@mantine/core';
-import { TestRecord, TestData } from '../types';
+
+import { TestData,TestRecord } from '../types';
 import { diffDisplay, diffStyle, timingDisplay } from '../utils';
+
 import { ImageThumbnail } from './ImageThumbnail';
 
 interface Props {
@@ -12,8 +14,8 @@ 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>
@@ -31,7 +33,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>
@@ -52,7 +54,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>
@@ -63,14 +65,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}
@@ -79,7 +81,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}
@@ -88,7 +90,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}
@@ -97,7 +99,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

@@ -1,6 +1,8 @@
 import { Anchor, Box, Table, Text } from '@mantine/core';
+
 import { TestRecord } from '../types';
 import { diffDisplay, diffStyle, timingDisplay } from '../utils';
+
 import { ImageThumbnail } from './ImageThumbnail';
 
 interface Props {
@@ -34,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}
@@ -56,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}
@@ -65,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

@@ -1,13 +1,15 @@
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
-import '@mantine/core/styles.css';
-import './styles/common.css';
 import { MantineProvider } from '@mantine/core';
+
 import App from './App';
 
+import '@mantine/core/styles.css';
+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 { useState, useEffect, useRef } from 'react';
+import { useEffect, useRef,useState } from 'react';
 import { Link, useSearchParams } from 'react-router-dom';
 import {
   Anchor,
@@ -11,6 +11,7 @@ import {
   TextInput,
   Title
 } from '@mantine/core';
+
 import { TestRecord } from '../types';
 import { diffDisplay, diffStyle } from '../utils';
 
@@ -42,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}`}
@@ -55,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>
@@ -111,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)}
@@ -156,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}>
@@ -182,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>