Epic Branch Step 1: Merge Staging into Routing

.eslintrc.cjs

@@ -26,7 +26,7 @@ module.exports = {
     'react/react-in-jsx-scope': 'off',
     'react/jsx-uses-react': 'off',
     'simple-import-sort/imports': 'error',
-    'simple-import-sort/exports': 'error'
+    'simple-import-sort/exports': 'error',
   },
   'overrides': [
     {
@@ -55,5 +55,10 @@ module.exports = {
         ]
       }
     }
-  ]
+  ],
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  }
 }

.github/workflows/build.yml

@@ -12,14 +12,15 @@ jobs:
       contents: read
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
           fetch-depth: 0
       - name: Use Node.js
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
-          node-version: '20.x'
+          node-version: '22.x'
       - run: npm ci
       - run: npm run build
         env:
           BASE_URL: '/ePlant'
+          VITE_MAPS_API_KEY: ${{ secrets.VITE_MAPS_API_KEY }}

.github/workflows/deploy.yml

@@ -17,22 +17,21 @@ jobs:
       contents: read
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
           fetch-depth: 0
       - name: Use Node.js
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
-          node-version: '20.x'
+          node-version: '22.x'
       - run: npm ci
       - run: npm run build
         env:
           BASE_URL: '/ePlant'
           VITE_MAPS_API_KEY: ${{ secrets.VITE_MAPS_API_KEY }}
-          VITE_MAPS_ID: ${{ secrets.VITE_MAPS_ID }}
       - run: mv dist _site
       - name: Upload artifact
-        uses: actions/upload-pages-artifact@v2
+        uses: actions/upload-pages-artifact@v3
   deploy:
     environment:
       name: github-pages
@@ -42,4 +41,4 @@ jobs:
     steps:
       - name: Deploy to GitHub Pages
         id: deployment
-        uses: actions/deploy-pages@v2
+        uses: actions/deploy-pages@v4

.github/workflows/linting.yml

@@ -10,10 +10,10 @@ jobs:
 
     steps:
       - name: Checkout code
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
 
       - name: Setup Node.js
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: '20.x'
 

.github/workflows/node.js.yml

@@ -20,9 +20,9 @@ jobs:
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
 
     steps:
-    - uses: actions/checkout@v3
+    - uses: actions/checkout@v4
     - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v3
+      uses: actions/setup-node@v4
       with:
         node-version: ${{ matrix.node-version }}
         cache: 'npm'

.gitignore

@@ -106,4 +106,4 @@ dist
 
 # notes files
 *-notes.md
-.DS_Store
+.DS_Store

Eplant/config.ts

@@ -7,6 +7,8 @@ import ExperimentEFP from './views/ExperimentEFP'
 import FallbackView from './views/FallbackView'
 import GeneInfoView from './views/GeneInfoView'
 import GetStartedView from './views/GetStartedView'
+import InteractionsViewer from './views/InteractionsViewer'
+import NavigatorView from './views/NavigatorViewer'
 import PlantEFP from './views/PlantEFP'
 import PublicationViewer from './views/PublicationViewer'
 import WorldEFP from './views/WorldEFP'
@@ -35,6 +37,8 @@ const userViews = [
   ExperimentEFP,
   WorldEFP,
   ChromosomeViewer,
+  InteractionsViewer,
+  NavigatorView,
 ]
 
 // List of views that are used to lookup a view by id

Eplant/state/index.tsx

@@ -95,7 +95,7 @@ export function atomWithStorage<T>(
 
 // TODO: This should probably be removed
 // Atom with storage that doesn't persist when persistAtom is set to false
-function atomWithOptionalStorage<T>(
+export function atomWithOptionalStorage<T>(
   key: string,
   initialValue: T,
   serialize: (value: T) => string = JSON.stringify,

Eplant/tutorial.md

@@ -32,6 +32,10 @@
   - [How to create a new `View`](#how-to-create-a-new-view)
     - [Steps to Update `config.ts`](#steps-to-update-configts)
     - [Example](#example)
+    - [View Switching Functionality](#view-switching-functionality)
+- [Documentation and Commenting Style](#documentation-and-commenting-style)
+- [Eslint Code Standards](#eslint-code-standards)
+- [Local Testing Requirements](#local-testing-requirements)
 - [Eplant2](#eplant2)
   - [API](#api)
 
@@ -366,6 +370,72 @@ const genericViews = [GetStartedView, FallbackView, NewView]
 const views = [...genericViews, ...userViews]
 ```
 
+#### View Switching Functionality
+
+If your new view has function to swap to a different view and/or gene available on ePlant, you may benefit from the generalized view switching component file (name tbd).
+
+To utilize the component:
+
+1. Import createViewSwitchProvider into your index file and export it:
+
+```
+export const ViewSwitchProvider = createViewSwitchProvider();
+```
+
+2. Import your exported provider into your view's main component and wrap your component in the view's return statement:
+
+```
+const App = () => {
+  return (
+    <ViewSwitchProvider>
+      <YourComponent />
+    </ViewSwitchProvider>
+  );
+};
+```
+
+3.  Import and use useViewSwitch in your main component whenever you want to invoke the switching functionality. For example: `switchViewAndGene('Cell eFP', geneName);`
+
+There are 3 main swithing functions you can invoke based on needs.
+
+```
+  /** Function to switch view only */
+  switchViewOnly: (viewId: string) => Promise<void>;
+
+  /** Function to switch gene only */
+  switchGeneOnly: (geneName: string, speciesUrl?: string) => Promise<void>;
+
+  /** Function to switch both view and gene */
+  switchViewAndGene: (viewId: string, geneName: string, speciesUrl?: string) => Promise<void>;
+```
+
+## Documentation and Commenting Style
+
+It is important to maintain a common standard for commenting code and documentation. If you want to make contributions to the project, we ask that you follow the TSdoc(typescript) commenting style. As an example this includes adding function/class headers and comments as seen below:
+
+```
+/**
+ * Extracts the primary gene identifier from the API URL
+ *
+ * @param url - The complete API URL containing query parameters
+ * @returns The primary gene identifier, or an empty string not found
+ *
+ * Uses regex to find the primaryGene parameter in the URL
+ */
+function extractPrimaryGene(url: string): string {
+  const match = url.match(/primaryGene=([^&]+)/);
+  return match ? match[1] : "";
+}
+```
+
+## ESlint Code Standards
+
+The codebase relies on ESlint to handle automatic checking for issues with the code. With ESlint, you will not need to manually parse all of your code for accurate documentation, imports order, etc. When running ePlant locally in a browser, if there are any outstanding issues, it will be made known to you automatically. A common way to fix any issues without much thought is to run `npx eslint . --fix`. The `.` can be replaced if you do not want to check and fix every file in your current working directory. Documentation issues are not as big of a concern as others and your local site may work as normal, but to keep in line with our standards, please resolve any issues and warnings before making a pull request.
+
+## Local Testing Requirements
+
+To allow ESlint to work, and to run the site locally you are required to install Node.js and NPM on your system. Once installed, you can activate a local connection to the site using `npm run dev` and connecting to the generated web access point.
+
 ## Eplant2
 
 https://bar.utoronto.ca/eplant/

Eplant/util/ErrorBoundary/index.tsx

@@ -8,6 +8,11 @@ export default class ErrorBoundary extends Component<
     this.state = { hasError: false }
   }
   componentDidCatch(error: Error, info: ErrorInfo) {
+    console.log(
+      'Error caught by ErrorBoundary:',
+      error.message,
+      info.componentStack
+    )
     this.setState({ hasError: true })
   }
   render() {

Eplant/views/ChromosomeViewer/Viewer/GeneInfoPopup.tsx

@@ -43,7 +43,6 @@ const GeneInfoPopup: FC<GeneInfoPopupProps> = (props) => {
   const geneticElements = useGeneticElements()
   const setGeneticElements = useSetGeneticElements()
   const theme = useTheme()
-
   useEffect(() => {
     if (props.gene != gene) {
       setOpen(props.open)

Eplant/views/InteractionsViewer/components/GeneDialog.tsx

@@ -0,0 +1,77 @@
+import React, { FC, useEffect, useState } from 'react'
+
+import GeneticElement from '@eplant/GeneticElement'
+import arabidopsis from '@eplant/Species/arabidopsis'
+import {
+  useActiveGeneId,
+  useGeneticElements,
+  useSetGeneticElements,
+} from '@eplant/state'
+import Box from '@mui/material/Box'
+import useTheme from '@mui/material/styles/useTheme'
+import Table from '@mui/material/Table'
+import TableBody from '@mui/material/TableBody'
+import TableCell from '@mui/material/TableCell'
+import TableRow from '@mui/material/TableRow'
+
+import { GeneItem } from '../../ChromosomeViewer/types'
+interface GeneDialogProps {
+  gene: GeneItem
+}
+/** Gene dialog to show gene infomation when hovering over gene node. currently not implemented due to restrictions of cytoscape
+ * @param {GeneItem} gene GeneItem object to show in table format in the dialog
+ * */
+const GeneDialog: FC<GeneDialogProps> = ({ gene }) => {
+  // Global State
+  const [activeGeneId, setActiveGeneId] = useActiveGeneId()
+  const geneticElements = useGeneticElements()
+  const setGeneticElements = useSetGeneticElements()
+  const theme = useTheme()
+
+  const handleLoadGeneClick = (event: React.MouseEvent<HTMLElement>) => {
+    if (gene != null) {
+      const geneticElement = new GeneticElement(
+        gene.id,
+        gene.annotation,
+        arabidopsis,
+        gene.aliases
+      )
+
+      setGeneticElements([...geneticElements[0], geneticElement])
+      setActiveGeneId(gene.id)
+    }
+  }
+
+  return (
+    <div
+      style={{
+        minWidth: '350px',
+        maxWidth: '350px',
+        minHeight: '150px',
+        maxHeight: '400px',
+        paddingInline: 2,
+        paddingBlockStart: 1,
+        paddingBlockEnd: 2,
+        border: '2px solid white',
+      }}
+    >
+      {/* GENE INFO TABLE */}
+      <table>
+        <tr>
+          <td className='label'>Identifier</td>
+          <td>{gene.id}</td>
+        </tr>
+        <tr>
+          <td className='label'>Aliases</td>
+          <td>{gene.aliases.length > 0 ? gene.aliases : 'N/A'}</td>
+        </tr>
+        <tr>
+          <td className='label'>Annotation</td>
+          <td>{gene.annotation != '' ? gene.annotation : 'N/A'}</td>
+        </tr>
+      </table>
+    </div>
+  )
+}
+
+export default GeneDialog

Eplant/views/InteractionsViewer/components/NumberInput.tsx

@@ -0,0 +1,51 @@
+import { ChangeEvent } from 'react'
+
+import InputAdornment from '@mui/material/InputAdornment'
+import TextField from '@mui/material/TextField'
+
+interface numberInputProps {
+  label: string
+  changeFunc: (event: ChangeEvent) => void
+  prefix?: string
+}
+
+/** Number selector for filter dialog
+ * @param {string} label number selector label
+ * @param {func} changeFunc function to call on change
+ * @param {string} prefix prefix to prepend to number
+ */
+const NumberInput = (props: numberInputProps) => {
+  return (
+    <>
+      <TextField
+        label={props.label}
+        size='small'
+        variant='outlined'
+        color='secondary'
+        type='number'
+        margin='dense'
+        onChange={(event: ChangeEvent) => {
+          props.changeFunc(event)
+        }}
+        inputProps={{
+          defaultValue: 0,
+          step: 0.1,
+          min: -1,
+          max: 1,
+        }}
+        InputProps={
+          props.prefix
+            ? {
+                startAdornment: (
+                  <InputAdornment position='start'>
+                    {props.prefix}
+                  </InputAdornment>
+                ),
+              }
+            : {}
+        }
+      />
+    </>
+  )
+}
+export default NumberInput