transfered changes of InteractionsView from repos branch to main repo…

…s branch, added Interactions View icon

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 PlantEFP from './views/PlantEFP'
 import PublicationViewer from './views/PublicationViewer'
 import { type View } from './View'
@@ -33,6 +34,7 @@ const userViews = [
   CellEFP,
   ExperimentEFP,
   ChromosomeViewer,
+  InteractionsViewer
 ]
 
 // List of views that are used to lookup a view by id

Eplant/views/InteractionsViewer/GeneDialog.tsx

@@ -0,0 +1,77 @@
+/// YET TO IMPLEMENT
+
+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 { Typography } from '@mui/material'
+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
+}
+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/icon.tsx

@@ -0,0 +1,41 @@
+import { FC } from 'react'
+
+interface IconProps {
+  width?: number
+  height?: number
+  fill?: string
+  stroke?: string
+  strokeWidth?: number
+}
+export const InteractionsIcon: FC<IconProps> = ({
+  width = 24,
+  height = 24,
+  fill = 'none',
+  stroke = 'currentColor',
+  strokeWidth = 2,
+}) => {
+  return (
+    // IconChartDots3 - Tabler Icons
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width={width}
+      height={height}
+      viewBox='0 0 24 24'
+      fill={fill}
+      stroke={stroke}
+      strokeWidth={strokeWidth}
+      strokeLinecap='round'
+      strokeLinejoin='round'
+      className='icon icon-tabler icons-tabler-outline icon-tabler-chart-dots-3'
+    >
+      <path stroke='none' d='M0 0h24v24H0z' fill='none' />
+      <path d='M5 7m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0' />
+      <path d='M16 15m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0' />
+      <path d='M18 6m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0' />
+      <path d='M6 18m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0' />
+      <path d='M9 17l5 -1.5' />
+      <path d='M6.5 8.5l7.81 5.37' />
+      <path d='M7 7l8 -1' />
+    </svg>
+  )
+}