Merge pull request #153 from BioAnalyticResource/yonah-InteractionsView

Interactions view

Author: bdls-jamal

.gitignore

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

Eplant/config.ts

@@ -7,6 +7,7 @@ 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'
@@ -36,6 +37,7 @@ const userViews = [
   ExperimentEFP,
   WorldEFP,
   ChromosomeViewer,
+  InteractionsViewer,
   NavigatorView,
 ]
 

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/InteractionsView.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/GeneDialog.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