chore: fix linting and format

BioAnalyticResource · Jan 24, 2024 · 7f7cf59 · 7f7cf59
1 parent 4021f6b
commit 7f7cf59
Show file tree

Hide file tree

Showing 15 changed files with 233 additions and 131 deletions.
diff --git a/Eplant/Eplant.tsx b/Eplant/Eplant.tsx
@@ -467,7 +467,7 @@ function EplantLayout() {
         key="add-tab"
       >
         <Add fontSize="inherit" />
-      </IconButton>
+      </IconButton>,
     )
     renderValues.buttons.push(
       <Tooltip title="Open in new window">
@@ -481,7 +481,7 @@ function EplantLayout() {
         >
           <OpenInNew fontSize="inherit" />
         </IconButton>
-      </Tooltip>
+      </Tooltip>,
     )
   }
 }

diff --git a/Eplant/UI/Layout/FailedToLoad.tsx b/Eplant/UI/Layout/FailedToLoad.tsx
@@ -31,11 +31,24 @@ 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

diff --git a/Eplant/UI/Layout/ViewContainer/LoadingPage.tsx b/Eplant/UI/Layout/ViewContainer/LoadingPage.tsx
@@ -21,7 +21,6 @@ export function LoadingImage(props: SVGProps<SVGSVGElement>) {
       textRendering="geometricPrecision"
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 100 101"
-
     >
       {/* 
       // OLD IMAGE (the watering can)
@@ -48,13 +47,13 @@ export function LoadingImage(props: SVGProps<SVGSVGElement>) {
 
       <style>
         {
-          "@keyframes loading-plant-s-g1_ts__ts{0%,73.666667%,to{transform:translate(50px,96.336008px) scale(1,1)}33.666667%{transform:translate(50px,96.336008px) scale(1,1);animation-timing-function:cubic-bezier(0,0,.58,1)}53.666667%{transform:translate(50px,96.336008px) scale(1.05,1.05)}}@keyframes loading-plant-s-path2_to__to{0%{transform:translate(85.0355px,-14.598999px)}33.333333%,to{transform:translate(85.0355px,35.358801px)}}@keyframes loading-plant-s-path2_c_o{0%,50%{opacity:1}96.666667%,to{opacity:0}}@keyframes loading-plant-s-path3_to__to{0%{transform:translate(85.0355px,-39.3128px)}33.333333%,to{transform:translate(85.0355px,10.645px)}}@keyframes loading-plant-s-path3_c_o{0%,50%{opacity:1}96.666667%,to{opacity:0}}@keyframes loading-plant-s-path4_to__to{0%{transform:translate(75.025501px,-19.986899px)}33.333333%,to{transform:translate(75.025501px,29.970901px)}}@keyframes loading-plant-s-path4_c_o{0%,50%{opacity:1}96.666667%,to{opacity:0}}@keyframes loading-plant-s-path5_to__to{0%{transform:translate(75.025501px,-36.6763px)}33.333333%,to{transform:translate(75.025501px,13.2815px)}}@keyframes loading-plant-s-path5_c_o{0%,50%{opacity:1}96.666667%,to{opacity:0}}@keyframes loading-plant-s-path6_to__to{0%{transform:translate(65.015499px,-24.682px)}33.333333%,to{transform:translate(65.015499px,25.2758px)}}@keyframes loading-plant-s-path6_c_o{0%,50%{opacity:1}96.666667%,to{opacity:0}}@keyframes loading-plant-s-path7_to__to{0%{transform:translate(65.015499px,-41.7413px)}33.333333%,to{transform:translate(65.015499px,8.2165px)}}@keyframes loading-plant-s-path7_c_o{0%,50%{opacity:1}96.666667%,to{opacity:0}}@keyframes loading-plant-s-path8_to__to{0%{transform:translate(55.005499px,-18.7635px)}33.333333%,to{transform:translate(55.005499px,31.1943px)}}@keyframes loading-plant-s-path8_c_o{0%,50%{opacity:1}96.666667%,to{opacity:0}}@keyframes loading-plant-s-path9_to__to{0%{transform:translate(55.005499px,-35.5828px)}33.333333%,to{transform:translate(55.005499px,14.375px)}}@keyframes loading-plant-s-path9_c_o{0%,50%{opacity:1}96.666667%,to{opacity:0}}@keyframes loading-plant-s-path10_to__to{0%{transform:translate(44.994501px,-24.296001px)}33.333333%,to{transform:translate(44.994501px,25.661799px)}}@keyframes loading-plant-s-path10_c_o{0%,50%{opacity:1}96.666667%,to{opacity:0}}@keyframes loading-plant-s-path11_to__to{0%{transform:translate(44.994501px,-40.9208px)}33.333333%,to{transform:translate(44.994501px,9.037px)}}@keyframes loading-plant-s-path11_c_o{0%,50%{opacity:1}96.666667%,to{opacity:0}}@keyframes loading-plant-s-path12_to__to{0%{transform:translate(34.984499px,-19.143801px)}33.333333%,to{transform:translate(34.984499px,30.813999px)}}@keyframes loading-plant-s-path12_c_o{0%,50%{opacity:1}96.666667%,to{opacity:0}}@keyframes loading-plant-s-path13_to__to{0%{transform:translate(34.984499px,-35.5828px)}33.333333%,to{transform:translate(34.984499px,14.375px)}}@keyframes loading-plant-s-path13_c_o{0%,50%{opacity:1}96.666667%,to{opacity:0}}@keyframes loading-plant-s-path14_to__to{0%{transform:translate(24.975px,-22.4964px)}33.333333%,to{transform:translate(24.975px,27.4614px)}}@keyframes loading-plant-s-path14_c_o{0%,50%{opacity:1}96.666667%,to{opacity:0}}@keyframes loading-plant-s-path15_to__to{0%{transform:translate(24.975px,-39.6348px)}33.333333%,to{transform:translate(24.975px,10.323px)}}@keyframes loading-plant-s-path15_c_o{0%,50%{opacity:1}96.666667%,to{opacity:0}}@keyframes loading-plant-s-path16_to__to{0%{transform:translate(14.9645px,-6.365799px)}33.333333%,to{transform:translate(14.9645px,43.592001px)}}@keyframes loading-plant-s-path16_c_o{0%,50%{opacity:1}96.666667%,to{opacity:0}}@keyframes loading-plant-s-path17_to__to{0%{transform:translate(14.9645px,-31.4653px)}33.333333%,to{transform:translate(14.9645px,18.4925px)}}@keyframes loading-plant-s-path17_c_o{0%,50%{opacity:1}96.666667%,to{opacity:0}}"
+          '@keyframes loading-plant-s-g1_ts__ts{0%,73.666667%,to{transform:translate(50px,96.336008px) scale(1,1)}33.666667%{transform:translate(50px,96.336008px) scale(1,1);animation-timing-function:cubic-bezier(0,0,.58,1)}53.666667%{transform:translate(50px,96.336008px) scale(1.05,1.05)}}@keyframes loading-plant-s-path2_to__to{0%{transform:translate(85.0355px,-14.598999px)}33.333333%,to{transform:translate(85.0355px,35.358801px)}}@keyframes loading-plant-s-path2_c_o{0%,50%{opacity:1}96.666667%,to{opacity:0}}@keyframes loading-plant-s-path3_to__to{0%{transform:translate(85.0355px,-39.3128px)}33.333333%,to{transform:translate(85.0355px,10.645px)}}@keyframes loading-plant-s-path3_c_o{0%,50%{opacity:1}96.666667%,to{opacity:0}}@keyframes loading-plant-s-path4_to__to{0%{transform:translate(75.025501px,-19.986899px)}33.333333%,to{transform:translate(75.025501px,29.970901px)}}@keyframes loading-plant-s-path4_c_o{0%,50%{opacity:1}96.666667%,to{opacity:0}}@keyframes loading-plant-s-path5_to__to{0%{transform:translate(75.025501px,-36.6763px)}33.333333%,to{transform:translate(75.025501px,13.2815px)}}@keyframes loading-plant-s-path5_c_o{0%,50%{opacity:1}96.666667%,to{opacity:0}}@keyframes loading-plant-s-path6_to__to{0%{transform:translate(65.015499px,-24.682px)}33.333333%,to{transform:translate(65.015499px,25.2758px)}}@keyframes loading-plant-s-path6_c_o{0%,50%{opacity:1}96.666667%,to{opacity:0}}@keyframes loading-plant-s-path7_to__to{0%{transform:translate(65.015499px,-41.7413px)}33.333333%,to{transform:translate(65.015499px,8.2165px)}}@keyframes loading-plant-s-path7_c_o{0%,50%{opacity:1}96.666667%,to{opacity:0}}@keyframes loading-plant-s-path8_to__to{0%{transform:translate(55.005499px,-18.7635px)}33.333333%,to{transform:translate(55.005499px,31.1943px)}}@keyframes loading-plant-s-path8_c_o{0%,50%{opacity:1}96.666667%,to{opacity:0}}@keyframes loading-plant-s-path9_to__to{0%{transform:translate(55.005499px,-35.5828px)}33.333333%,to{transform:translate(55.005499px,14.375px)}}@keyframes loading-plant-s-path9_c_o{0%,50%{opacity:1}96.666667%,to{opacity:0}}@keyframes loading-plant-s-path10_to__to{0%{transform:translate(44.994501px,-24.296001px)}33.333333%,to{transform:translate(44.994501px,25.661799px)}}@keyframes loading-plant-s-path10_c_o{0%,50%{opacity:1}96.666667%,to{opacity:0}}@keyframes loading-plant-s-path11_to__to{0%{transform:translate(44.994501px,-40.9208px)}33.333333%,to{transform:translate(44.994501px,9.037px)}}@keyframes loading-plant-s-path11_c_o{0%,50%{opacity:1}96.666667%,to{opacity:0}}@keyframes loading-plant-s-path12_to__to{0%{transform:translate(34.984499px,-19.143801px)}33.333333%,to{transform:translate(34.984499px,30.813999px)}}@keyframes loading-plant-s-path12_c_o{0%,50%{opacity:1}96.666667%,to{opacity:0}}@keyframes loading-plant-s-path13_to__to{0%{transform:translate(34.984499px,-35.5828px)}33.333333%,to{transform:translate(34.984499px,14.375px)}}@keyframes loading-plant-s-path13_c_o{0%,50%{opacity:1}96.666667%,to{opacity:0}}@keyframes loading-plant-s-path14_to__to{0%{transform:translate(24.975px,-22.4964px)}33.333333%,to{transform:translate(24.975px,27.4614px)}}@keyframes loading-plant-s-path14_c_o{0%,50%{opacity:1}96.666667%,to{opacity:0}}@keyframes loading-plant-s-path15_to__to{0%{transform:translate(24.975px,-39.6348px)}33.333333%,to{transform:translate(24.975px,10.323px)}}@keyframes loading-plant-s-path15_c_o{0%,50%{opacity:1}96.666667%,to{opacity:0}}@keyframes loading-plant-s-path16_to__to{0%{transform:translate(14.9645px,-6.365799px)}33.333333%,to{transform:translate(14.9645px,43.592001px)}}@keyframes loading-plant-s-path16_c_o{0%,50%{opacity:1}96.666667%,to{opacity:0}}@keyframes loading-plant-s-path17_to__to{0%{transform:translate(14.9645px,-31.4653px)}33.333333%,to{transform:translate(14.9645px,18.4925px)}}@keyframes loading-plant-s-path17_c_o{0%,50%{opacity:1}96.666667%,to{opacity:0}}'
         }
       </style>
       <g
         style={{
           animation:
-            "loading-plant-s-g1_ts__ts 3000ms linear infinite normal forwards",
+            'loading-plant-s-g1_ts__ts 3000ms linear infinite normal forwards',
         }}
         transform="translate(50 96.336)"
       >
@@ -65,7 +64,6 @@ export function LoadingImage(props: SVGProps<SVGSVGElement>) {
           />
         </g>
       </g>
-
     </svg>
   )
 }

diff --git a/Eplant/UI/Layout/ViewContainer/index.tsx b/Eplant/UI/Layout/ViewContainer/index.tsx
@@ -76,7 +76,16 @@ export function ViewContainer<T, S, A>({
         position="sticky"
         elevation={0}
       >
-        <Toolbar sx={(theme) => ({ gap: '8px', paddingRight: 16, borderStyle: 'solid', borderWidth: '1px 0px 1px 1px', borderColor: theme.palette.background.edge, borderLeftColor: theme.palette.background.edgeLight })}>
+        <Toolbar
+          sx={(theme) => ({
+            gap: '8px',
+            paddingRight: 16,
+            borderStyle: 'solid',
+            borderWidth: '1px 0px 1px 1px',
+            borderColor: theme.palette.background.edge,
+            borderLeftColor: theme.palette.background.edgeLight,
+          })}
+        >
           <Stack
             direction="row"
             gap={2}
@@ -123,7 +132,9 @@ export function ViewContainer<T, S, A>({
                 inputProps={{
                   sx: (theme: {
                     shape: any
-                    palette: { background: { paperOverlay: any, edgeLight: any } }
+                    palette: {
+                      background: { paperOverlay: any; edgeLight: any }
+                    }
                   }) => ({
                     display: 'flex',
                     alignItems: 'center',
@@ -228,10 +239,8 @@ export function ViewContainer<T, S, A>({
   return (
     <Box {...props} display="flex" flexDirection="column">
       <Modal open={viewingCitations} onClose={() => setViewingCitations(false)}>
-        <DialogTitle sx={{minWidth: '512px'}}>
-          <Typography variant="h6">
-            Data sources for {view.name}
-          </Typography>
+        <DialogTitle sx={{ minWidth: '512px' }}>
+          <Typography variant="h6">Data sources for {view.name}</Typography>
         </DialogTitle>
         <DialogContent>
           {view.citation ? (

diff --git a/Eplant/UI/LeftNav/GeneSearch/index.tsx b/Eplant/UI/LeftNav/GeneSearch/index.tsx
@@ -62,7 +62,7 @@ export function SearchGroup({
       </TextField>
 
       {/* Gene selector */}
-      <SearchBar 
+      <SearchBar
         label="Search for genes"
         inputProps={{
           // TODO: Make these clickable

diff --git a/Eplant/main.tsx b/Eplant/main.tsx
@@ -67,7 +67,7 @@ const registerServiceWorker = async () => {
   if ('serviceWorker' in navigator) {
     try {
       const registration = await navigator.serviceWorker.register(
-        import.meta.env.BASE_URL + '/sw.js'
+        import.meta.env.BASE_URL + '/sw.js',
       )
       if (registration.installing) {
         console.log('Service worker installing')

diff --git a/Eplant/theme.tsx b/Eplant/theme.tsx
@@ -45,7 +45,7 @@ export const light = createTheme({
       selected: '#dddddd', // is this used?
       hover: '#cccccc', // hovered gene
       edge: '#DDDDDD', // borders around EFP canvas
-      edgeLight: '#EEEEEE' // lighter borders around page views
+      edgeLight: '#EEEEEE', // lighter borders around page views
     },
     hot: {
       main: '#ff0000',
@@ -83,7 +83,7 @@ export const dark = createTheme({
       active: '#3a3a3a',
       hover: '#444444',
       edge: '#444444',
-      edgeLight: '#333333'
+      edgeLight: '#333333',
     },
     hot: {
       main: '#ff0000',

diff --git a/Eplant/views/GeneInfoView/component.tsx b/Eplant/views/GeneInfoView/component.tsx
@@ -14,10 +14,17 @@ import {
 import { View, ViewProps } from '../../View'
 import { useViewData } from '../../View/viewData'
 import { GeneModel } from './GeneModel'
-import { Alert, Box, Button, ButtonProps, LinearProgress, Snackbar } from '@mui/material'
-import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import {
+  Alert,
+  Box,
+  Button,
+  ButtonProps,
+  LinearProgress,
+  Snackbar,
+} from '@mui/material'
+import ContentCopyIcon from '@mui/icons-material/ContentCopy'
 import { IconButton } from '@mui/material'
-import { setStroke } from '../eFP/Tooltips/EFPTooltip';
+import { setStroke } from '../eFP/Tooltips/EFPTooltip'
 
 const SecondaryText = styled(Typography)(({ theme }) => ({
   color: theme.palette.text.secondary,
@@ -192,13 +199,25 @@ export default function GeneInfoViewer({
     navigator.clipboard.writeText(text)
   }
 
-
   return (
-    <Stack direction="row" gap={'20px'} >
+    <Stack direction="row" gap={'20px'}>
       <ViewSwitcher geneticElement={geneticElement} />
-      <Stack direction="column" gap={'16px'} flex={4} sx={{ background: (theme) => theme.palette.background.paperOverlay, padding: 2, borderRadius: (theme) => theme.shape.borderRadius+'px', border: '1px solid', borderColor:  (theme) => theme.palette.background.edgeLight }}>
+      <Stack
+        direction="column"
+        gap={'16px'}
+        flex={4}
+        sx={{
+          background: (theme) => theme.palette.background.paperOverlay,
+          padding: 2,
+          borderRadius: (theme) => theme.shape.borderRadius + 'px',
+          border: '1px solid',
+          borderColor: (theme) => theme.palette.background.edgeLight,
+        }}
+      >
         <div>
-          <Typography variant="h5" sx={{fontWeight: 500}}>{geneticElement.id}</Typography>
+          <Typography variant="h5" sx={{ fontWeight: 500 }}>
+            {geneticElement.id}
+          </Typography>
           <SecondaryText>{geneticElement.aliases.join(', ')}</SecondaryText>
         </div>
         <div>
@@ -246,21 +265,23 @@ export default function GeneInfoViewer({
                 geneticElement={geneticElement}
                 activeData={activeData}
               ></GeneSequence>
-              <IconButton onClick={() => copyToClipboard(activeData.geneSequence)} color='primary' sx={{ ml: 1 }}>
+              <IconButton
+                onClick={() => copyToClipboard(activeData.geneSequence)}
+                color="primary"
+                sx={{ ml: 1 }}
+              >
                 <ContentCopyIcon />
               </IconButton>
               <Snackbar
-                anchorOrigin={
-                  {
-                    vertical: 'top',
-                    horizontal: 'center'
-                  }
-                }
+                anchorOrigin={{
+                  vertical: 'top',
+                  horizontal: 'center',
+                }}
                 open={snackBarOpen}
                 onClose={() => setSnackBarOpen(false)}
                 autoHideDuration={2000}
               >
-                <Alert severity='success'>Copied to clipboard!</Alert>
+                <Alert severity="success">Copied to clipboard!</Alert>
               </Snackbar>
             </div>
           </div>
@@ -277,14 +298,18 @@ export default function GeneInfoViewer({
               <CodeBody variant="caption" style={{ wordBreak: 'break-word' }}>
                 {activeData.proteinSequence}
               </CodeBody>
-              <IconButton onClick={() => copyToClipboard(activeData.proteinSequence)} color='primary' sx={{ ml: 1 }}>
+              <IconButton
+                onClick={() => copyToClipboard(activeData.proteinSequence)}
+                color="primary"
+                sx={{ ml: 1 }}
+              >
                 <ContentCopyIcon />
               </IconButton>
             </div>
           </div>
         ) : undefined}
       </Stack>
-    </Stack >
+    </Stack>
   )
 }
 function ViewSwitcher({ geneticElement }: { geneticElement: GeneticElement }) {

diff --git a/Eplant/views/GetStartedView/Tile.tsx b/Eplant/views/GetStartedView/Tile.tsx
@@ -48,7 +48,13 @@ export default function Tile({ view }: TileProps) {
         image={view.thumbnail}
         alt={view.name}
         height={'100%'}
-        sx={{ width: 'auto', margin: '1rem 1rem 0 1rem', border: '2px solid', borderColor: (theme) => theme.palette.background.edgeLight, borderRadius: (theme) => theme.shape.borderRadius+"px" }}
+        sx={{
+          width: 'auto',
+          margin: '1rem 1rem 0 1rem',
+          border: '2px solid',
+          borderColor: (theme) => theme.palette.background.edgeLight,
+          borderRadius: (theme) => theme.shape.borderRadius + 'px',
+        }}
       />
 
       <CardContent>

diff --git a/Eplant/views/PublicationViewer/GeneRIFs.tsx b/Eplant/views/PublicationViewer/GeneRIFs.tsx
@@ -22,7 +22,7 @@ const columns: GridColDef[] = [
         variant="outlined"
         color="secondary"
         size="small"
-        target='_blank'
+        target="_blank"
       >
         VIEW PAPER
       </Button>

diff --git a/Eplant/views/PublicationViewer/Publications.tsx b/Eplant/views/PublicationViewer/Publications.tsx
@@ -41,7 +41,7 @@ const columns: GridColDef[] = [
           variant="outlined"
           color="secondary"
           size="small"
-          target='_blank'
+          target="_blank"
         >
           VIEW PAPER
         </Button>

diff --git a/Eplant/views/PublicationViewer/index.tsx b/Eplant/views/PublicationViewer/index.tsx
@@ -9,7 +9,6 @@ import ThumbnailLight from '../../../thumbnails/publication-viewer-light.png'
 import ThumbnailDark from '../../../thumbnails/publication-viewer.png'
 import { ViewDataError } from '@eplant/View/viewData'
 
-
 const PublicationViewer: View<PublicationViewerData> = {
   name: 'Publication viewer',
   id: 'publication-viewer',
@@ -25,12 +24,32 @@ const PublicationViewer: View<PublicationViewerData> = {
           <Tab label="PUBLICATIONS" value="publications" />
           <Tab label="GENE RIFS" value="geneRIFs" />
         </Tabs>
-        <div hidden={tab !== 'publications'} style={{background: theme.palette.background.paperOverlay, padding: '0rem 1rem', border: '1px solid', borderRadius: theme.shape.borderRadius, borderTopLeftRadius: 0, borderColor: theme.palette.background.edgeLight}}>
+        <div
+          hidden={tab !== 'publications'}
+          style={{
+            background: theme.palette.background.paperOverlay,
+            padding: '0rem 1rem',
+            border: '1px solid',
+            borderRadius: theme.shape.borderRadius,
+            borderTopLeftRadius: 0,
+            borderColor: theme.palette.background.edgeLight,
+          }}
+        >
           {tab === 'publications' && (
             <Publications publications={activeData.publications} />
           )}
         </div>
-        <div hidden={tab !== 'geneRIFs'} style={{background: theme.palette.background.paperOverlay, padding: '0rem 1rem', border: '1px solid', borderRadius: theme.shape.borderRadius, borderTopLeftRadius: 0, borderColor: theme.palette.background.edgeLight}}>
+        <div
+          hidden={tab !== 'geneRIFs'}
+          style={{
+            background: theme.palette.background.paperOverlay,
+            padding: '0rem 1rem',
+            border: '1px solid',
+            borderRadius: theme.shape.borderRadius,
+            borderTopLeftRadius: 0,
+            borderColor: theme.palette.background.edgeLight,
+          }}
+        >
           {tab === 'geneRIFs' && <GeneRIFs geneRIFs={activeData.geneRIFs} />}
         </div>
       </div>