BioAnalyticResource · Yukthiw · Dec 30, 2023 · Jan 2, 2024 · Jan 3, 2024 · Jan 3, 2024
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -23,5 +23,6 @@ module.exports = {
     '@typescript-eslint/no-empty-function': 'off',
     '@typescript-eslint/no-explicit-any': 'off',
     '@typescript-eslint/no-unused-vars': 'off',
+    'react/react-in-jsx-scope': 'off',
   },
 }
diff --git a/.prettierrc b/.prettierrc
@@ -2,5 +2,6 @@
   "tabWidth": 2,
   "useTabs": false,
   "semi": false,
-  "singleQuote": true
+  "singleQuote": true,
+  "jsxSingleQuote": true
 }
diff --git a/Eplant/Eplant.tsx b/Eplant/Eplant.tsx
@@ -170,7 +170,7 @@ export default function Eplant() {
       <Routes>
         <Route path={rootPath}>
           <Route index element={<MainEplant />} />
-          <Route path="pane" element={<DirectPane />} />
+          <Route path='pane' element={<DirectPane />} />
         </Route>
       </Routes>
     </ThemeProvider>
@@ -199,7 +199,7 @@ function DirectPane() {
 
   return loaded ? (
     <div
-      className="flexlayout__layout"
+      className='flexlayout__layout'
       style={{
         display: 'flex',
         flexDirection: 'column',
@@ -216,8 +216,8 @@ function DirectPane() {
         }}
         className={id == activeId ? 'flexlayout__tabset-selected' : ''}
       >
-        <div className="flexlayout__tab_button flexlayout__tab_button_top flexlayout__tab_button--selected">
-          <div className="flexlayout__tab-content">
+        <div className='flexlayout__tab_button flexlayout__tab_button_top flexlayout__tab_button--selected'>
+          <div className='flexlayout__tab-content'>
             {panes[id]?.activeGene ? panes[id]?.activeGene + ' - ' : ''}
             {views.find((v) => v.id == panes[id]?.view)?.name}
           </div>
@@ -261,7 +261,7 @@ export function MainEplant() {
   return (
     <>
       <ResponsiveDrawer
-        variant="persistent"
+        variant='persistent'
         open={true}
         PaperProps={{
           sx: {
@@ -378,7 +378,7 @@ function EplantLayout() {
             onRenderTab={(node, renderValues) => {
               renderValues.buttons = [
                 <IconButton
-                  key="close"
+                  key='close'
                   // Why is this necessary?
                   // Idk, but flexlayout-react uses it for their close buttons
                   // And they don't work without it
@@ -392,17 +392,17 @@ function EplantLayout() {
                     panesDispatch({ type: 'close', id: node.getId() })
                     model.doAction(Actions.deleteTab(node.getId()))
                   }}
-                  size="small"
+                  size='small'
                 >
-                  <Close fontSize="inherit" />
+                  <Close fontSize='inherit' />
                 </IconButton>,
               ]
             }}
           ></FlexLayout.Layout>
         ) : (
           <div>
             <CircularProgress
-              variant="indeterminate"
+              variant='indeterminate'
               value={globalProgress * 100}
             />
           </div>
@@ -463,25 +463,25 @@ function EplantLayout() {
     renderValues.stickyButtons.push(
       <IconButton
         onClick={() => addTab({ tabsetId: node.getId() })}
-        size="small"
-        key="add-tab"
+        size='small'
+        key='add-tab'
       >
-        <Add fontSize="inherit" />
-      </IconButton>
+        <Add fontSize='inherit' />
+      </IconButton>,
     )
     renderValues.buttons.push(
-      <Tooltip title="Open in new window">
+      <Tooltip title='Open in new window'>
         <IconButton
           onClick={() => {
             const id = node.getSelectedNode()?.getId()
             if (id) makePopout(id)
           }}
-          size="small"
-          key="make-popout"
+          size='small'
+          key='make-popout'
         >
-          <OpenInNew fontSize="inherit" />
+          <OpenInNew fontSize='inherit' />
         </IconButton>
-      </Tooltip>
+      </Tooltip>,
     )
   }
 }

diff --git a/Eplant/UI/Dropdown.tsx b/Eplant/UI/Dropdown.tsx
@@ -70,9 +70,9 @@ export default function Dropdown({
       <Button
         id={buttonId}
         aria-controls={open ? menuId : undefined}
-        aria-haspopup="true"
+        aria-haspopup='true'
         aria-expanded={open ? 'true' : undefined}
-        variant="contained"
+        variant='contained'
         disableElevation
         onClick={handleClick}
         endIcon={<KeyboardArrowDown />}

diff --git a/Eplant/UI/GeneHeader.tsx b/Eplant/UI/GeneHeader.tsx
@@ -17,23 +17,23 @@ export default function GeneHeader({
     >
       {geneticElement ? (
         <>
-          <Typography variant="h6">{geneticElement.id}</Typography>
+          <Typography variant='h6'>{geneticElement.id}</Typography>
           <Divider
-            orientation="vertical"
-            variant="middle"
+            orientation='vertical'
+            variant='middle'
             sx={{
               borderColor: (theme) => theme.palette.text.secondary,
               borderRightWidth: '3px',
               mx: 1,
             }}
             flexItem
           />
-          <Typography variant="h6">
+          <Typography variant='h6'>
             {geneticElement.aliases.join(', ')}
           </Typography>
         </>
       ) : (
-        <Typography variant="h4">No gene selected</Typography>
+        <Typography variant='h4'>No gene selected</Typography>
       )}
     </Box>
   )

diff --git a/Eplant/UI/GeneticElementComponent.tsx b/Eplant/UI/GeneticElementComponent.tsx
@@ -25,7 +25,7 @@ function SelectedIndicator(props: BoxProps & { hover: boolean }) {
   return (
     <Box {...props} position={'relative'}>
       <Box
-        position="absolute"
+        position='absolute'
         sx={(theme) => ({
           left: 0,
           top: 0,
@@ -36,7 +36,7 @@ function SelectedIndicator(props: BoxProps & { hover: boolean }) {
         })}
       />
       <Box
-        position="absolute"
+        position='absolute'
         sx={(theme) => ({
           left: props.hover ? '0' : '0px',
           top: 0,
@@ -161,10 +161,10 @@ export default function GeneticElementComponent({
       onClick={onClick}
     >
       <Stack
-        direction="row"
+        direction='row'
         gap={1}
         height={24}
-        overflow="hidden"
+        overflow='hidden'
         whiteSpace={'nowrap'}
         sx={(theme) => ({})}
       >
@@ -202,7 +202,7 @@ export default function GeneticElementComponent({
           ref={textContainerRef}
         >
           <Stack
-            direction="row"
+            direction='row'
             gap={1}
             sx={(theme) => ({
               animation: textScroll
@@ -217,14 +217,14 @@ export default function GeneticElementComponent({
             ref={textGroupRef}
           >
             <Typography
-              variant="body2"
+              variant='body2'
               // sx={{ fontWeight: selected ? 'bold' : 'regular' }}
             >
               {geneticElement.id}
             </Typography>
-            <Divider orientation="vertical" flexItem></Divider>
+            <Divider orientation='vertical' flexItem></Divider>
             <Typography
-              variant="body2"
+              variant='body2'
               // sx={{ fontWeight: selected ? 'bold' : 'regular' }}
             >
               {geneticElement.aliases.join(', ')}

diff --git a/Eplant/UI/Layout/FailedToLoad.tsx b/Eplant/UI/Layout/FailedToLoad.tsx
@@ -9,14 +9,14 @@ const Illustration = ({
   ...props
 }: { color: string } & SVGProps<SVGSVGElement>) => (
   <svg
-    width="120"
-    height="240"
-    viewBox="0 0 204 386"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
+    width='120'
+    height='240'
+    viewBox='0 0 204 386'
+    fill='none'
+    xmlns='http://www.w3.org/2000/svg'
   >
     <path
-      d="M196.053 220.328H98.3851C102.003 213.092 107.791 201.518 110.683 187.773C112.13 183.432 112.854 178.367 112.854 174.028L156.262 130.619C159.156 127.725 159.156 123.384 156.262 120.493C153.368 117.598 149.026 117.598 146.135 120.493L112.857 153.771C110.686 137.132 104.175 122.663 92.5998 111.086C87.5349 105.297 83.1938 100.235 80.302 94.4469L115.027 59.7216C117.922 56.8274 117.922 52.4859 115.027 49.5947C112.133 46.7005 107.792 46.7005 104.9 49.5947L75.2344 79.2524C65.8312 43.8035 91.8762 13.4166 93.3207 11.9693C96.2149 9.07511 95.4914 4.73359 92.5971 1.84246C89.7029 -1.05177 85.3614 -0.328197 82.4703 2.56604C82.4703 2.56604 61.4901 25.7171 58.5955 57.5485L42.6801 35.8447C40.5095 32.9505 35.4444 32.2269 32.5533 34.3976C29.659 36.5682 28.9354 41.6333 31.1061 44.5272L61.4902 84.3173C65.108 95.8915 71.6171 108.192 83.194 120.49C99.833 137.853 101.28 159.556 98.3857 178.366L58.5956 155.939V155.215L44.1269 113.978C42.6797 110.36 38.3384 108.189 34.7209 109.637C31.1033 111.084 28.9324 115.425 30.3796 119.043L39.7856 145.088L15.1872 131.34C12.2956 129.893 7.95416 130.617 5.78392 134.235C3.61367 137.852 5.06034 142.194 8.67815 144.361L94.7691 192.832C89.7042 208.747 82.4713 219.601 82.4713 219.601L7.95037 219.603C3.60905 219.603 0.7146 222.497 0.7146 226.839V277.48C0.7146 281.822 3.60884 284.716 7.95037 284.716H18.8009L31.8223 379.488C32.5459 383.106 35.4402 386 39.0581 386H164.939C168.557 386 171.451 383.106 172.175 379.488L185.196 284.716L196.05 284.713C200.391 284.713 203.285 281.819 203.285 277.478V226.836C203.285 223.218 200.391 220.327 196.05 220.327L196.053 220.328ZM158.433 372.252H45.5735L33.2757 285.435H170.734L158.433 372.252ZM188.82 270.969H15.1867V234.797H188.813L188.82 270.969Z"
+      d='M196.053 220.328H98.3851C102.003 213.092 107.791 201.518 110.683 187.773C112.13 183.432 112.854 178.367 112.854 174.028L156.262 130.619C159.156 127.725 159.156 123.384 156.262 120.493C153.368 117.598 149.026 117.598 146.135 120.493L112.857 153.771C110.686 137.132 104.175 122.663 92.5998 111.086C87.5349 105.297 83.1938 100.235 80.302 94.4469L115.027 59.7216C117.922 56.8274 117.922 52.4859 115.027 49.5947C112.133 46.7005 107.792 46.7005 104.9 49.5947L75.2344 79.2524C65.8312 43.8035 91.8762 13.4166 93.3207 11.9693C96.2149 9.07511 95.4914 4.73359 92.5971 1.84246C89.7029 -1.05177 85.3614 -0.328197 82.4703 2.56604C82.4703 2.56604 61.4901 25.7171 58.5955 57.5485L42.6801 35.8447C40.5095 32.9505 35.4444 32.2269 32.5533 34.3976C29.659 36.5682 28.9354 41.6333 31.1061 44.5272L61.4902 84.3173C65.108 95.8915 71.6171 108.192 83.194 120.49C99.833 137.853 101.28 159.556 98.3857 178.366L58.5956 155.939V155.215L44.1269 113.978C42.6797 110.36 38.3384 108.189 34.7209 109.637C31.1033 111.084 28.9324 115.425 30.3796 119.043L39.7856 145.088L15.1872 131.34C12.2956 129.893 7.95416 130.617 5.78392 134.235C3.61367 137.852 5.06034 142.194 8.67815 144.361L94.7691 192.832C89.7042 208.747 82.4713 219.601 82.4713 219.601L7.95037 219.603C3.60905 219.603 0.7146 222.497 0.7146 226.839V277.48C0.7146 281.822 3.60884 284.716 7.95037 284.716H18.8009L31.8223 379.488C32.5459 383.106 35.4402 386 39.0581 386H164.939C168.557 386 171.451 383.106 172.175 379.488L185.196 284.716L196.05 284.713C200.391 284.713 203.285 281.819 203.285 277.478V226.836C203.285 223.218 200.391 220.327 196.05 220.327L196.053 220.328ZM158.433 372.252H45.5735L33.2757 285.435H170.734L158.433 372.252ZM188.82 270.969H15.1867V234.797H188.813L188.82 270.969Z'
       fill={color}
     />
   </svg>
@@ -31,27 +31,40 @@ export default function FailedToLoad(props: {
 }) {
   const theme = useTheme()
   return (
-    <Stack gap={2} alignItems="center" direction="column" width="100%" height="100vh" justifyContent="center">
-      <Illustration
-        color={theme.palette.primary.main}
-      />
-      <Typography variant="h6" sx={{ textAlign: 'center', maxWidth: 600, fontWeight: 400, marginTop: 2 }}>
+    <Stack
+      gap={2}
+      alignItems='center'
+      direction='column'
+      width='100%'
+      height='100vh'
+      justifyContent='center'
+    >
+      <Illustration color={theme.palette.primary.main} />
+      <Typography
+        variant='h6'
+        sx={{
+          textAlign: 'center',
+          maxWidth: 600,
+          fontWeight: 400,
+          marginTop: 2,
+        }}
+      >
         {props.geneticElement
           ? `There was an error while trying to load ${props.view.name.toLowerCase()} for ${
               props.geneticElement.id
             }`
           : `There was an error while trying to load ${props.view.name.toLowerCase()} without a selected gene.`}
       </Typography>
       <Typography
-        variant="body1"
+        variant='body1'
         sx={(theme) => ({
           color: theme.palette.text.secondary,
           textAlign: 'center',
           marginBottom: 10,
         })}
       >
         Please contact us by opening an issue on{' '}
-        <Link href="https://github.com/BioAnalyticResource/ePlant/issues">
+        <Link href='https://github.com/BioAnalyticResource/ePlant/issues'>
           GitHub
         </Link>
       </Typography>

diff --git a/Eplant/UI/Layout/TabsetPlaceholder.tsx b/Eplant/UI/Layout/TabsetPlaceholder.tsx
@@ -10,12 +10,12 @@ const Illustration = ({
 }: { color: string } & SVGProps<SVGSVGElement>) => (
   <svg
     {...props}
-    viewBox="0 0 230 410"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
+    viewBox='0 0 230 410'
+    fill='none'
+    xmlns='http://www.w3.org/2000/svg'
   >
     <path
-      d="M167.727 250.002H116.766C115.086 222.002 122.368 199.604 129.086 174.4C185.086 172.72 234.926 136.88 229.326 75.8408C228.767 71.3603 225.967 67.4424 220.928 66.8799C182.287 65.2002 147.006 82.5599 128.53 112.239C125.17 101.598 119.569 90.9579 113.409 80.3169C111.729 56.2389 105.569 31.0359 84.8495 15.9189C63.0095 -0.3191 34.4515 -0.882105 8.68954 1.35989C4.20904 1.91848 -0.271365 4.7193 0.291135 9.7583C3.08803 42.8013 18.7681 70.8013 50.1271 83.6803C65.8071 89.8405 83.7291 93.1998 100.525 92.0787C116.205 118.399 120.127 142.477 111.724 172.72C111.166 173.841 111.166 174.958 110.603 176.079C91.5641 138.559 53.482 120.638 8.12304 129.599C4.76364 130.158 1.40424 134.08 1.96284 137.997C5.32224 172.158 23.2438 197.357 56.2828 208.557C70.2828 213.596 86.5208 215.838 101.642 214.717C99.9621 225.916 98.8411 233.197 99.9622 249.998H46.7631C27.7241 249.998 5.32214 247.759 5.32214 276.318C5.32214 296.478 19.3221 302.08 33.8811 303.197C41.1623 331.756 45.6432 362.556 57.4011 389.435C65.7996 409.037 86.5222 409.595 106.682 409.595C126.842 409.595 147.561 408.474 155.963 388.876C167.725 361.997 172.201 331.196 179.483 302.638C194.042 301.517 208.042 295.919 208.042 275.759C209.167 247.759 186.769 250.001 167.73 250.001L167.727 250.002ZM212.528 84.2418C212.528 113.922 197.969 136.32 169.407 148.082C158.208 152.562 145.329 155.363 133.009 156.48C134.689 112.804 170.529 85.3632 212.529 84.2422L212.528 84.2418ZM18.2079 17.6008C36.6879 16.4797 55.169 17.6008 71.407 27.1203C88.208 37.1983 94.3679 56.8003 96.0479 75.2803C58.5279 75.8428 24.9269 56.2413 18.2079 17.6003V17.6008ZM98.8489 196.801C89.3294 197.359 80.369 196.242 71.408 194.562C43.967 188.961 25.4859 171.043 20.4469 144.723C59.6459 139.683 89.3259 160.402 101.646 196.8H98.849L98.8489 196.801ZM148.126 362.561C144.767 374.881 141.966 387.76 127.966 391.12C124.607 391.678 91.0049 392.241 87.6459 391.678C73.6459 388.319 70.2869 375.44 66.9269 362.557C60.7667 338.479 57.4074 322.795 52.3679 300.397H162.688C157.645 322.803 154.286 338.483 148.126 362.561V362.561ZM182.849 283.6H32.209C26.6073 283.6 22.1309 280.799 22.1309 275.201C22.1309 269.6 26.6115 266.803 32.209 266.803H182.849C188.451 266.803 192.927 269.604 192.927 275.201C192.927 280.803 188.446 283.6 182.849 283.6Z"
+      d='M167.727 250.002H116.766C115.086 222.002 122.368 199.604 129.086 174.4C185.086 172.72 234.926 136.88 229.326 75.8408C228.767 71.3603 225.967 67.4424 220.928 66.8799C182.287 65.2002 147.006 82.5599 128.53 112.239C125.17 101.598 119.569 90.9579 113.409 80.3169C111.729 56.2389 105.569 31.0359 84.8495 15.9189C63.0095 -0.3191 34.4515 -0.882105 8.68954 1.35989C4.20904 1.91848 -0.271365 4.7193 0.291135 9.7583C3.08803 42.8013 18.7681 70.8013 50.1271 83.6803C65.8071 89.8405 83.7291 93.1998 100.525 92.0787C116.205 118.399 120.127 142.477 111.724 172.72C111.166 173.841 111.166 174.958 110.603 176.079C91.5641 138.559 53.482 120.638 8.12304 129.599C4.76364 130.158 1.40424 134.08 1.96284 137.997C5.32224 172.158 23.2438 197.357 56.2828 208.557C70.2828 213.596 86.5208 215.838 101.642 214.717C99.9621 225.916 98.8411 233.197 99.9622 249.998H46.7631C27.7241 249.998 5.32214 247.759 5.32214 276.318C5.32214 296.478 19.3221 302.08 33.8811 303.197C41.1623 331.756 45.6432 362.556 57.4011 389.435C65.7996 409.037 86.5222 409.595 106.682 409.595C126.842 409.595 147.561 408.474 155.963 388.876C167.725 361.997 172.201 331.196 179.483 302.638C194.042 301.517 208.042 295.919 208.042 275.759C209.167 247.759 186.769 250.001 167.73 250.001L167.727 250.002ZM212.528 84.2418C212.528 113.922 197.969 136.32 169.407 148.082C158.208 152.562 145.329 155.363 133.009 156.48C134.689 112.804 170.529 85.3632 212.529 84.2422L212.528 84.2418ZM18.2079 17.6008C36.6879 16.4797 55.169 17.6008 71.407 27.1203C88.208 37.1983 94.3679 56.8003 96.0479 75.2803C58.5279 75.8428 24.9269 56.2413 18.2079 17.6003V17.6008ZM98.8489 196.801C89.3294 197.359 80.369 196.242 71.408 194.562C43.967 188.961 25.4859 171.043 20.4469 144.723C59.6459 139.683 89.3259 160.402 101.646 196.8H98.849L98.8489 196.801ZM148.126 362.561C144.767 374.881 141.966 387.76 127.966 391.12C124.607 391.678 91.0049 392.241 87.6459 391.678C73.6459 388.319 70.2869 375.44 66.9269 362.557C60.7667 338.479 57.4074 322.795 52.3679 300.397H162.688C157.645 322.803 154.286 338.483 148.126 362.561V362.561ZM182.849 283.6H32.209C26.6073 283.6 22.1309 280.799 22.1309 275.201C22.1309 269.6 26.6115 266.803 32.209 266.803H182.849C188.451 266.803 192.927 269.604 192.927 275.201C192.927 280.803 188.446 283.6 182.849 283.6Z'
       fill={color}
     />
   </svg>
@@ -29,17 +29,17 @@ const Illustration = ({
 export default function TabsetPlaceholder(props: { addTab: () => void }) {
   const theme = useTheme()
   return (
-    <Stack gap={6} direction="column" width="100%">
+    <Stack gap={6} direction='column' width='100%'>
       <Illustration
         color={theme.palette.primary.dark}
         style={{
           maxHeight: '300px',
         }}
       />
-      <Box justifyContent="center" display="flex">
+      <Box justifyContent='center' display='flex'>
         <Button
-          variant="contained"
-          color="primary"
+          variant='contained'
+          color='primary'
           onClick={props.addTab}
           endIcon={<Add />}
         >