diff --git a/Eplant/views/InteractionsViewer/FilterDialog.1.tsx b/Eplant/views/InteractionsViewer/FilterDialog.1.tsx
new file mode 100644
index 0000000..0931a56
--- /dev/null
+++ b/Eplant/views/InteractionsViewer/FilterDialog.1.tsx
@@ -0,0 +1,241 @@
+import { FC, useState } from 'react'
+import Box from '@mui/material/Box'
+import Button from '@mui/material/Button'
+import Checkbox from '@mui/material/Checkbox'
+import FormControlLabel from '@mui/material/FormControlLabel'
+import FormGroup from '@mui/material/FormGroup'
+import { applyFilter, cleanNodes } from './scripts/filterLogic'
+import { FilterProps, NumberInput } from './FilterDialog'
+
+export const FilterDialog: FC<FilterProps> = ({ cy }) => {
+  const [eppiSelected, setEppiSelected] = useState<boolean>(false)
+  const [eppiCorrSelected, setEppiCorrSelected] = useState<boolean>(false)
+  const [eppiCorrValue, setEppiCorrValue] = useState<number>()
+  const [pppiSelected, setPppiSelected] = useState<boolean>(false)
+  const [pppiCorrSelected, setPppiCorrSelected] = useState<boolean>(false)
+  const [pppiCorrValue, setPppiCorrValue] = useState<number>()
+  const [pppiConfSelected, setPppiConfSelected] = useState<boolean>(false)
+  const [pppiConfValue, setPppiConfValue] = useState<number>()
+  const [epdiSelected, setEpdiSelected] = useState<boolean>(false)
+  const [ppdiSelected, setPpdiSelected] = useState<boolean>(false)
+  const [ppdiConfSelected, setPpdiConfSelected] = useState<boolean>(false)
+  const [ppdiConfValue, setPpdiConfValue] = useState<number>()
+  const selectors = {
+    EPPISelector: '[type = "PPI"][method = "E"]', // checkbox
+    corrSelector: '[correlation <= ', // eppi-correlation spinner + checkbox
+    PPPISelector: '[type = "PPI"][method = "P"]', // checkbox
+    interConfSelector: '[interolog_conf <=', // PPPI correlation
+    EPDISelector: '[type = "PDI"][method = "E"]',
+    PPDISelector: '[type = "PDI"][method = "P"]',
+    fimoConfSelector: '[fimo_conf >= ',
+  }
+
+  const applyFilters = () => {}
+
+  const handleSubmit = () => {
+    const filterStatus = [
+      eppiSelected,
+      eppiCorrSelected,
+      pppiSelected,
+      pppiCorrSelected,
+      pppiConfSelected,
+      epdiSelected,
+      ppdiSelected,
+      ppdiConfSelected,
+    ]
+
+    // Create selectors
+    const eppiCorr =
+      selectors.EPPISelector + selectors.corrSelector + eppiCorrValue + ']'
+    const pppiCorr =
+      selectors.PPPISelector + selectors.corrSelector + pppiCorrValue + ']'
+    const pppiConf =
+      selectors.PPPISelector + selectors.interConfSelector + pppiConfValue + ']'
+    const ppdiConf =
+      selectors.PPDISelector +
+      selectors.fimoConfSelector +
+      '1e-' +
+      ppdiConfValue +
+      ']'
+
+    const filters = [
+      selectors.EPPISelector,
+      eppiCorr,
+      selectors.PPPISelector,
+      pppiCorr,
+      pppiConf,
+      selectors.EPDISelector,
+      selectors.PPDISelector,
+      ppdiConf,
+    ]
+    for (let i = 0; i < filterStatus.length; i++) {
+      console.log(i)
+      applyFilter(cy, filterStatus[i], filters[i])
+    }
+    // Hide orphaned nodes
+    cleanNodes()
+    // Hide parent nodes
+    cleanCompoundNode('COMPOUND_DNA')
+    cleanCompoundNode('COMPOUND_PROTEIN')
+  }
+
+  return (
+    <FormGroup onSubmit={handleSubmit}>
+      <FormControlLabel
+        control={
+          <Checkbox
+            checked={eppiSelected}
+            onChange={() => setEppiSelected(!eppiSelected)}
+          />
+        }
+        label='Hide ALL experimentally determined Protein-Protein interactions'
+      />
+      <Box sx={{ display: 'flex', flexDirection: 'row', ml: 3 }}>
+        <FormControlLabel
+          control={
+            <Checkbox
+              checked={eppiCorrSelected}
+              onChange={() => setEppiCorrSelected(!eppiCorrSelected)}
+            />
+          }
+          label='Hide only with correlation less than: '
+        />
+        {eppiCorrSelected && (
+          <NumberInput
+            label='correlation'
+            changeFunc={(event) => {
+              let value = parseFloat(event.target.value)
+              if (value > 1) {
+                value = 1
+              } else if (value < -1) {
+                value = -1
+              }
+              setEppiCorrValue(value)
+            }}
+          />
+        )}
+      </Box>
+
+      <FormControlLabel
+        control={
+          <Checkbox
+            checked={pppiSelected}
+            onChange={() => setPppiSelected(!pppiSelected)}
+          />
+        }
+        label='Hide ALL predicted Protein-Protein interactions'
+      />
+      <Box sx={{ display: 'flex', flexDirection: 'row', ml: 3 }}>
+        {/* pppi (correlation <=) */}
+        <FormControlLabel
+          control={
+            <Checkbox
+              checked={pppiCorrSelected}
+              onChange={() => setPppiCorrSelected(!pppiCorrSelected)}
+            />
+          }
+          label='Hide only with correlation less than: '
+        />
+        {/* pppi corr number input */}
+        {pppiCorrSelected && (
+          <NumberInput
+            label='correlation'
+            changeFunc={(event) => {
+              let value = parseFloat(event.target.value)
+              if (value > 1) {
+                value = 1
+              } else if (value < -1) {
+                value = -1
+              }
+              setPppiCorrValue(value)
+            }}
+          />
+        )}
+      </Box>
+      <Box sx={{ display: 'flex', flexDirection: 'row', ml: 3 }}>
+        {/* pppi (interolog_conf <=)*/}
+        <FormControlLabel
+          control={
+            <Checkbox
+              checked={pppiConfSelected}
+              onChange={() => setPppiConfSelected(!pppiConfSelected)}
+            />
+          }
+          label='Hide only with confidence less than: '
+        />
+        {/* pppi conf number input */}
+        {pppiConfSelected && (
+          <NumberInput
+            label='confidence'
+            changeFunc={(event) => {
+              let value = parseFloat(event.target.value)
+              if (value > 1) {
+                value = 1
+              } else if (value < -1) {
+                value = -1
+              }
+              setEppiCorrValue(value)
+            }}
+          />
+        )}
+      </Box>
+
+      <FormControlLabel
+        control={
+          <Checkbox
+            checked={epdiSelected}
+            onChange={() => setEpdiSelected(!epdiSelected)}
+          />
+        }
+        label='Hide ALL experimentall determined Protein-DNA interactions'
+      />
+
+      <FormControlLabel
+        control={
+          <Checkbox
+            checked={ppdiSelected}
+            onChange={() => setPpdiSelected(!ppdiSelected)}
+          />
+        }
+        label='Hide ALL predicted Protien-DNA interactions'
+      />
+      <Box sx={{ display: 'flex', flexDirection: 'row', ml: 3 }}>
+        {/* ppdi (interolog_conf <=)*/}
+        <FormControlLabel
+          control={
+            <Checkbox
+              checked={ppdiConfSelected}
+              onChange={() => setPpdiConfSelected(!ppdiConfSelected)}
+            />
+          }
+          label='Hide only with confidence greater than'
+        />
+        {/* ppdi conf number input */}
+        {ppdiConfSelected && (
+          <NumberInput
+            label='confidence'
+            changeFunc={(event) => {
+              let value = parseFloat(event.target.value)
+              if (value > 1) {
+                value = 1
+              } else if (value < -1) {
+                value = -1
+              }
+              setPpdiConfValue(value)
+            }}
+            prefix='1e-'
+          />
+        )}
+      </Box>
+      <Button
+        sx={{ mt: 1 }}
+        type='submit'
+        onClick={handleSubmit}
+        variant='contained'
+        color='info'
+      >
+        Apply filters
+      </Button>
+    </FormGroup>
+  )
+}
diff --git a/Eplant/views/InteractionsViewer/FilterDialog.tsx b/Eplant/views/InteractionsViewer/FilterDialog.tsx
index 7f54de8..6df8f1d 100644
--- a/Eplant/views/InteractionsViewer/FilterDialog.tsx
+++ b/Eplant/views/InteractionsViewer/FilterDialog.tsx
@@ -1,4 +1,5 @@
 import { FC, useState } from 'react'
+import { Core } from 'cytoscape'
 
 import Box from '@mui/material/Box'
 import Button from '@mui/material/Button'
@@ -8,6 +9,15 @@ import FormGroup from '@mui/material/FormGroup'
 import InputAdornment from '@mui/material/InputAdornment'
 import TextField from '@mui/material/TextField'
 
+import {
+  applyFilter,
+  cleanCompoundNode,
+  cleanNodes,
+} from './scripts/filterLogic'
+
+interface FilterProps {
+  cy: Core
+}
 type numberInputProps = {
   label: string
   changeFunc: (event: object) => void
@@ -47,7 +57,7 @@ const NumberInput = (props: numberInputProps) => {
     </>
   )
 }
-const FilterDialog: FC = () => {
+const FilterDialog: FC<FilterProps> = ({ cy }) => {
   const [eppiSelected, setEppiSelected] = useState<boolean>(false)
   const [eppiCorrSelected, setEppiCorrSelected] = useState<boolean>(false)
   const [eppiCorrValue, setEppiCorrValue] = useState<number>()
@@ -70,7 +80,20 @@ const FilterDialog: FC = () => {
     fimoConfSelector: '[fimo_conf >= ',
   }
 
-  const applyFilters = () => {
+  const applyFilters = () => {}
+
+  const handleSubmit = () => {
+    const filterStatus = [
+      eppiSelected,
+      eppiCorrSelected,
+      pppiSelected,
+      pppiCorrSelected,
+      pppiConfSelected,
+      epdiSelected,
+      ppdiSelected,
+      ppdiConfSelected,
+    ]
+
     // Create selectors
     const eppiCorr =
       selectors.EPPISelector + selectors.corrSelector + eppiCorrValue + ']'
@@ -84,172 +107,187 @@ const FilterDialog: FC = () => {
       '1e-' +
       ppdiConfValue +
       ']'
+
+    const filters = [
+      selectors.EPPISelector,
+      eppiCorr,
+      selectors.PPPISelector,
+      pppiCorr,
+      pppiConf,
+      selectors.EPDISelector,
+      selectors.PPDISelector,
+      ppdiConf,
+    ]
+    cy.elements().show()
+    for (let i = 0; i < filterStatus.length; i++) {
+      console.log(i)
+      applyFilter(cy, filterStatus[i], filters[i])
+    }
+    // Hide orphaned nodes
+    cleanNodes(cy)
+    // Hide parent nodes
+    cleanCompoundNode(cy, 'COMPOUND_DNA')
+    cleanCompoundNode(cy, 'COMPOUND_PROTEIN')
   }
 
   return (
-    <Box>
-      <FormGroup
-        sx={(theme) => ({
-          maxWidth: 600,
-          padding: 3,
-          mr: 10,
-          bgcolor: theme.palette.background.transparentOverlay,
-          color: 'white',
-        })}
-      >
+    <FormGroup onSubmit={handleSubmit}>
+      <FormControlLabel
+        control={
+          <Checkbox
+            checked={eppiSelected}
+            onChange={() => setEppiSelected(!eppiSelected)}
+          />
+        }
+        label='Hide ALL experimentally determined Protein-Protein interactions'
+      />
+      <Box sx={{ display: 'flex', flexDirection: 'row', ml: 3 }}>
         <FormControlLabel
           control={
             <Checkbox
-              checked={eppiSelected}
-              onChange={() => setEppiSelected(!eppiSelected)}
+              checked={eppiCorrSelected}
+              onChange={() => setEppiCorrSelected(!eppiCorrSelected)}
             />
           }
-          label='Hide ALL experimentally determined Protein-Protein interactions'
+          label='Hide only with correlation less than: '
         />
-        <Box sx={{ display: 'flex', flexDirection: 'row', ml: 3 }}>
-          <FormControlLabel
-            control={
-              <Checkbox
-                checked={eppiCorrSelected}
-                onChange={() => setEppiCorrSelected(!eppiCorrSelected)}
-              />
-            }
-            label='Hide only with correlation less than: '
+        {eppiCorrSelected && (
+          <NumberInput
+            label='correlation'
+            changeFunc={(event) => {
+              let value = parseFloat(event.target.value)
+              if (value > 1) {
+                value = 1
+              } else if (value < -1) {
+                value = -1
+              }
+              setEppiCorrValue(value)
+            }}
           />
-          {eppiCorrSelected && (
-            <NumberInput
-              label='correlation'
-              changeFunc={(event) => {
-                let value = parseFloat(event.target.value)
-                if (value > 1) {
-                  value = 1
-                } else if (value < -1) {
-                  value = -1
-                }
-                setEppiCorrValue(value)
-              }}
-            />
-          )}
-        </Box>
+        )}
+      </Box>
 
+      <FormControlLabel
+        control={
+          <Checkbox
+            checked={pppiSelected}
+            onChange={() => setPppiSelected(!pppiSelected)}
+          />
+        }
+        label='Hide ALL predicted Protein-Protein interactions'
+      />
+      <Box sx={{ display: 'flex', flexDirection: 'row', ml: 3 }}>
+        {/* pppi (correlation <=) */}
         <FormControlLabel
           control={
             <Checkbox
-              checked={pppiSelected}
-              onChange={() => setPppiSelected(!pppiSelected)}
+              checked={pppiCorrSelected}
+              onChange={() => setPppiCorrSelected(!pppiCorrSelected)}
             />
           }
-          label='Hide ALL predicted Protein-Protein interactions'
+          label='Hide only with correlation less than: '
         />
-        <Box sx={{ display: 'flex', flexDirection: 'row', ml: 3 }}>
-          {/* pppi (correlation <=) */}
-          <FormControlLabel
-            control={
-              <Checkbox
-                checked={pppiCorrSelected}
-                onChange={() => setPppiCorrSelected(!pppiCorrSelected)}
-              />
-            }
-            label='Hide only with correlation less than: '
-          />
-          {/* pppi corr number input */}
-          {pppiCorrSelected && (
-            <NumberInput
-              label='correlation'
-              changeFunc={(event) => {
-                let value = parseFloat(event.target.value)
-                if (value > 1) {
-                  value = 1
-                } else if (value < -1) {
-                  value = -1
-                }
-                setPppiCorrValue(value)
-              }}
-            />
-          )}
-        </Box>
-        <Box sx={{ display: 'flex', flexDirection: 'row', ml: 3 }}>
-          {/* pppi (interolog_conf <=)*/}
-          <FormControlLabel
-            control={
-              <Checkbox
-                checked={pppiConfSelected}
-                onChange={() => setPppiConfSelected(!pppiConfSelected)}
-              />
-            }
-            label='Hide only with confidence less than: '
+        {/* pppi corr number input */}
+        {pppiCorrSelected && (
+          <NumberInput
+            label='correlation'
+            changeFunc={(event) => {
+              let value = parseFloat(event.target.value)
+              if (value > 1) {
+                value = 1
+              } else if (value < -1) {
+                value = -1
+              }
+              setPppiCorrValue(value)
+            }}
           />
-          {/* pppi conf number input */}
-          {pppiConfSelected && (
-            <NumberInput
-              label='confidence'
-              changeFunc={(event) => {
-                let value = parseFloat(event.target.value)
-                if (value > 1) {
-                  value = 1
-                } else if (value < -1) {
-                  value = -1
-                }
-                setEppiCorrValue(value)
-              }}
-            />
-          )}
-        </Box>
-
+        )}
+      </Box>
+      <Box sx={{ display: 'flex', flexDirection: 'row', ml: 3 }}>
+        {/* pppi (interolog_conf <=)*/}
         <FormControlLabel
           control={
             <Checkbox
-              checked={epdiSelected}
-              onChange={() => setEpdiSelected(!epdiSelected)}
+              checked={pppiConfSelected}
+              onChange={() => setPppiConfSelected(!pppiConfSelected)}
             />
           }
-          label='Hide ALL experimentall determined Protein-DNA interactions'
+          label='Hide only with confidence less than: '
         />
+        {/* pppi conf number input */}
+        {pppiConfSelected && (
+          <NumberInput
+            label='confidence'
+            changeFunc={(event) => {
+              let value = parseFloat(event.target.value)
+              if (value > 1) {
+                value = 1
+              } else if (value < -1) {
+                value = -1
+              }
+              setEppiCorrValue(value)
+            }}
+          />
+        )}
+      </Box>
+
+      <FormControlLabel
+        control={
+          <Checkbox
+            checked={epdiSelected}
+            onChange={() => setEpdiSelected(!epdiSelected)}
+          />
+        }
+        label='Hide ALL experimentall determined Protein-DNA interactions'
+      />
 
+      <FormControlLabel
+        control={
+          <Checkbox
+            checked={ppdiSelected}
+            onChange={() => setPpdiSelected(!ppdiSelected)}
+          />
+        }
+        label='Hide ALL predicted Protien-DNA interactions'
+      />
+      <Box sx={{ display: 'flex', flexDirection: 'row', ml: 3 }}>
+        {/* ppdi (interolog_conf <=)*/}
         <FormControlLabel
           control={
             <Checkbox
-              checked={ppdiSelected}
-              onChange={() => setPpdiSelected(!ppdiSelected)}
+              checked={ppdiConfSelected}
+              onChange={() => setPpdiConfSelected(!ppdiConfSelected)}
             />
           }
-          label='Hide ALL predicted Protien-DNA interactions'
+          label='Hide only with confidence greater than'
         />
-        <Box sx={{ display: 'flex', flexDirection: 'row', ml: 3 }}>
-          {/* ppdi (interolog_conf <=)*/}
-          <FormControlLabel
-            control={
-              <Checkbox
-                checked={ppdiConfSelected}
-                onChange={() => setPpdiConfSelected(!ppdiConfSelected)}
-              />
-            }
-            label='Hide only with confidence greater than'
+        {/* ppdi conf number input */}
+        {ppdiConfSelected && (
+          <NumberInput
+            label='confidence'
+            changeFunc={(event) => {
+              let value = parseFloat(event.target.value)
+              if (value > 1) {
+                value = 1
+              } else if (value < -1) {
+                value = -1
+              }
+              setPpdiConfValue(value)
+            }}
+            prefix='1e-'
           />
-          {/* ppdi conf number input */}
-          {ppdiConfSelected && (
-            <NumberInput
-              label='confidence'
-              changeFunc={(event) => {
-                let value = parseFloat(event.target.value)
-                if (value > 1) {
-                  value = 1
-                } else if (value < -1) {
-                  value = -1
-                }
-                setPpdiConfValue(value)
-              }}
-              prefix='1e-'
-            />
-          )}
-        </Box>
-        {/* Hide only with confidence greater than */}
-
-        <Button color='error' size='small' sx={{ width: 60 }}>
-          Close
-        </Button>
-      </FormGroup>
-    </Box>
+        )}
+      </Box>
+      <Button
+        sx={{ mt: 1 }}
+        type='submit'
+        onClick={handleSubmit}
+        variant='contained'
+        color='info'
+      >
+        Apply filters
+      </Button>
+    </FormGroup>
   )
 }
 export default FilterDialog
diff --git a/Eplant/views/InteractionsViewer/Topbar.tsx b/Eplant/views/InteractionsViewer/Topbar.tsx
index 4f29e01..8415534 100644
--- a/Eplant/views/InteractionsViewer/Topbar.tsx
+++ b/Eplant/views/InteractionsViewer/Topbar.tsx
@@ -1,66 +1,44 @@
 import { FC, useRef, useState } from 'react'
+import { Core } from 'cytoscape'
 
 import { Unstable_Popup as Popup } from '@mui/base/Unstable_Popup'
-import { Filter, FilterAlt, QuestionMark } from '@mui/icons-material'
-import Add from '@mui/icons-material/Add'
-import Remove from '@mui/icons-material/Remove'
-import { ListItemText, ListSubheader, Switch } from '@mui/material'
+import { Close, FilterAlt, QuestionMark } from '@mui/icons-material'
 import AppBar from '@mui/material/AppBar'
 import Box from '@mui/material/Box'
 import Button from '@mui/material/Button'
 import ButtonGroup from '@mui/material/ButtonGroup'
-import List from '@mui/material/List'
-import ListItem from '@mui/material/ListItem'
+import IconButton from '@mui/material/IconButton'
+import Popover from '@mui/material/Popover'
 import Toolbar from '@mui/material/Toolbar'
 import Typography from '@mui/material/Typography'
 
-import FilterDialog from './FilterDialog'
+import FilterDialog from './FilterDialog.1'
 
 interface TopbarProps {
+  cy: Core
   gene: string
 }
 
-const Topbar: FC<TopbarProps> = ({ gene }) => {
+const Topbar: FC<TopbarProps> = ({ cy, gene }) => {
   const [showLegend, setShowLegend] = useState<boolean>(false)
   const legendRef = useRef(null)
-  const [showFilter, setShowFilter] = useState<boolean>(false)
+  const [showFilters, setShowFilters] = useState<boolean>(false)
   const filterRef = useRef(null)
-  const selectors = {
-    EPPISelector: '[type = "PPI"][method = "E"]', // checkbox
-    corrSelector: '[correlation <= ', // eppi-correlation spinner + checkbox
-    PPPISelector: '[type = "PPI"][method = "P"]', // checkbox
-    interConfSelector: '[interolog_conf <=', // PPPI correlation
-    EPDISelector: '[type = "PDI"][method = "E"]',
-    PPDISelector: '[type = "PDI"][method = "P"]',
-    fimoConfSelector: '[fimo_conf >= ',
-  }
-  const zoomValue = 1000
 
-  const applyFilters = () => {
-    // Create selectors
-    const eppiCorr =
-      selectors.EPPISelector + selectors.corrSelector + EPPICorrValue + ']'
-    const pppiCorr =
-      selectors.PPPISelector + selectors.corrSelector + PPPICorrValue + ']'
-    const pppiConf =
-      selectors.PPPISelector + selectors.interConfSelector + PPPIConfValue + ']'
-    const ppdiConf =
-      selectors.PPDISelector + selectors.fimoConfSelector + PPDIConfValue + ']'
-  }
   const handleLegendClick = () => {
     setShowLegend(!showLegend)
   }
   const handleFilterClick = () => {
-    setShowFilter(!showFilter)
+    setShowFilters(!showFilters)
   }
   return (
     <AppBar position='sticky' color='default' sx={{ overflow: 'overlay' }}>
-      <Toolbar variant='dense'>
+      <Toolbar variant='regular' sx={{ flexWrap: 'wrap', pb: 1 }}>
         {/* VIEW TITLE */}
-        <Typography variant='h6' sx={{ flexGrow: 0.6 }}>
+        <Typography variant='h6' sx={{ flexGrow: 2 }}>
           Interactions Viewer: {gene}
         </Typography>
-        <ButtonGroup variant='outlined' sx={{ marginLeft: '300px' }}>
+        <ButtonGroup variant='outlined' sx={{}}>
           <Button
             ref={legendRef}
             size='medium'
@@ -94,9 +72,45 @@ const Topbar: FC<TopbarProps> = ({ gene }) => {
           <img src='thumbnails/legendAIV.png' width={200}></img>
         </Box>
       </Popup>
-      <Popup open={showFilter} anchor={filterRef.current}>
-        <FilterDialog />
-      </Popup>
+      <Popover
+        open={showFilters}
+        onClose={() => {
+          setShowFilters(!showFilters)
+        }}
+        anchorEl={filterRef.current}
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: 'right',
+        }}
+        transformOrigin={{
+          vertical: 'top',
+          horizontal: 'right',
+        }}
+      >
+        <Box
+          sx={(theme) => ({
+            maxWidth: 600,
+            padding: 4,
+            pt: 2,
+            bgcolor: theme.palette.background.transparentOverlay,
+            color: 'white',
+          })}
+        >
+          <Box
+            sx={{
+              display: 'flex',
+              flexDirection: 'row',
+              justifyContent: 'space-between',
+            }}
+          >
+            <Typography variant='h4'>Filter Data</Typography>
+            <IconButton color='secondary' onClick={handleFilterClick}>
+              <Close />
+            </IconButton>
+          </Box>
+          <FilterDialog cy={cy} />
+        </Box>
+      </Popover>
     </AppBar>
   )
 }
diff --git a/Eplant/views/InteractionsViewer/index.tsx b/Eplant/views/InteractionsViewer/index.tsx
index f8e9cca..cd90060 100644
--- a/Eplant/views/InteractionsViewer/index.tsx
+++ b/Eplant/views/InteractionsViewer/index.tsx
@@ -7,7 +7,11 @@ import cytoscape, {
 import automove from 'cytoscape-automove'
 import coseBilkent from 'cytoscape-cose-bilkent'
 import popper from 'cytoscape-popper'
-import tippy, { Instance as TippyInstance, Props as TProps } from 'tippy.js'
+import tippy, {
+  followCursor,
+  Instance as TippyInstance,
+  Props as TProps,
+} from 'tippy.js'
 
 import GeneticElement from '@eplant/GeneticElement'
 import { ViewDataError } from '@eplant/View/viewData'
@@ -23,7 +27,6 @@ import { InteractionsIcon } from './icon'
 import Topbar from './Topbar'
 // import GeneDialog from './GeneDialog'
 import {
-  Interaction,
   InteractionsViewAction,
   InteractionsViewData,
   InteractionsViewState,
@@ -38,23 +41,33 @@ declare module 'cytoscape-popper' {
   interface PopperInstance extends TippyInstance {}
 }
 
-function tippyFactory(ref: { getBoundingClientRect: any }, content: any) {
+type Content = {
+  content: any
+  duration: number
+  followCursor: boolean
+  arrow: boolean
+  interactive: boolean
+}
+function tippyFactory(ref: { getBoundingClientRect: any }, content: Content) {
   // Since tippy constructor requires DOM element/elements, create a placeholder
   const dummyDomEle = document.createElement('div')
   const config: Partial<TProps> = {
     getReferenceClientRect: ref.getBoundingClientRect,
-    trigger: 'manual', // mandatory
+    // touch: add this later for touch screen capablities
     // dom element inside the tippy:
-    content: content,
+    content: content.content,
     // your own preferences:
-    arrow: true,
-    placement: 'bottom',
-    hideOnClick: false,
-    sticky: 'reference',
-
-    // if interactive:
-    interactive: true,
+    arrow: content.arrow,
+    placement: 'left',
+    delay: [1000, 1000],
+    animation: 'fade',
+    followCursor: content.followCursor,
+    duration: content.duration,
+    sticky: false,
+    interactive: content.interactive,
+    interactiveBorder: 3,
     appendTo: document.body, // or append dummyDomEle to document.body
+    plugins: [followCursor],
   }
   const tip = tippy(dummyDomEle, config)
   return tip
@@ -78,7 +91,6 @@ const InteractionsViewer: View = {
     gene: GeneticElement | null,
     loadEvent: (progress: number) => void
   ) {
-    console.log('eeee')
     let data: ViewData
     if (gene) {
       const query = gene.id.toUpperCase()
@@ -94,7 +106,7 @@ const InteractionsViewer: View = {
         .then((response) => response.json())
         .then((json) => json[query])
         .then((interactions: [] | undefined) => {
-          console.log(interactions)
+          // console.log(interactions)
           if (interactions === undefined) {
             recursive = 'false'
             return []
@@ -123,14 +135,11 @@ const InteractionsViewer: View = {
     InteractionsViewState,
     InteractionsViewAction
   >) {
-    // const [cy, setCy] = useState<Core>(cytoscape())
+    const [cyto, setCyto] = useState<Core>(cytoscape())
     const cyRef = useRef(null)
-    let cy: Core
     const geneId = geneticElement?.id
-    console.log(activeData)
     const viewData = activeData.viewData
     const elements: any = [...viewData.nodes, ...viewData.edges]
-    const styles = cytoStyles
 
     useEffect(() => {
       const cy: Core = cytoscape({
@@ -138,6 +147,7 @@ const InteractionsViewer: View = {
         elements: elements,
         style: cytoStyles,
       })
+      setCyto(cy)
 
       setLayout(cy, viewData.loadFlags)
       // Listen for mouseover events on nodes
@@ -148,7 +158,7 @@ const InteractionsViewer: View = {
 
     return (
       <div style={{ background: 'white' }}>
-        <Topbar gene={geneId === undefined ? '' : geneId}></Topbar>
+        <Topbar cy={cyto} gene={geneId === undefined ? '' : geneId}></Topbar>
         <div
           ref={cyRef}
           id='cy'
diff --git a/Eplant/views/InteractionsViewer/scripts/eventHandlers.ts b/Eplant/views/InteractionsViewer/scripts/eventHandlers.ts
index 19b8384..6f12d6f 100644
--- a/Eplant/views/InteractionsViewer/scripts/eventHandlers.ts
+++ b/Eplant/views/InteractionsViewer/scripts/eventHandlers.ts
@@ -1,5 +1,6 @@
 import { Core } from 'cytoscape'
 import { PopperInstance } from 'cytoscape-popper'
+import { followCursor } from 'tippy.js'
 
 // import GeneticElement from '@eplant/GeneticElement'
 // import arabidopsis from '@eplant/Species/arabidopsis'
@@ -13,28 +14,28 @@ import { PopperInstance } from 'cytoscape-popper'
 // Event Listeners
 // --------------
 export const addNodeListener = (cy: Core) => {
-    cy.on('mouseover', 'node', (event) => {
-        const nodeId = event.target.data('id')
-        // Check that the node is not a compound node
-        if (nodeId !== 'COMPOUND_DNA' && nodeId !== 'COMPOUND_PROTEIN') {
-            if (nodeId.substring(0, 3) === 'chr') {
-                chrNodeMouseOverHandler(cy, event)
-            } else {
-                nodeMouseOverHandler(cy, event)
-            }
-        }
-    })
+  cy.on('mouseover', 'node', (event) => {
+    const nodeId = event.target.data('id')
+    // Check that the node is not a compound node
+    if (nodeId !== 'COMPOUND_DNA' && nodeId !== 'COMPOUND_PROTEIN') {
+      if (nodeId.substring(0, 3) === 'chr') {
+        chrNodeMouseOverHandler(cy, event)
+      } else {
+        nodeMouseOverHandler(cy, event)
+      }
+    }
+  })
 }
 
 export const addEdgeListener = (cy: Core) => {
-    // Listen for pointer events on edges
-    cy.on('mouseover', 'edge', (event) => {
-        // No tooltip on chr edges
-        if (event.target._private.classes.values().next().value == 'chr-edge') {
-            return false
-        }
-        edgeMouseOverHandler(cy, event)
-    })
+  // Listen for pointer events on edges
+  cy.on('mouseover', 'edge', (event) => {
+    // No tooltip on chr edges
+    if (event.target._private.classes.values().next().value == 'chr-edge') {
+      return false
+    }
+    edgeMouseOverHandler(cy, event)
+  })
 }
 
 // --------------
@@ -65,19 +66,19 @@ export const addEdgeListener = (cy: Core) => {
 
 // Handle regular node hover
 const nodeMouseOverHandler = (cy: Core, event) => {
-    const node = event.target
-    const id = node._private.data.content
-    fetch(
-        'https://bar.utoronto.ca/eplant/cgi-bin/querygene.cgi?species=Arabidopsis_thaliana&term=' +
-        id
-    )
-        .then((response) => response.json())
-        .then((gene) => {
-            const tip: PopperInstance = node.popper({
-                content: () => {
-                    const content = document.createElement('div')
-
-                    content.innerHTML = `<style>
+  const node = event.target
+  const id = node._private.data.content
+  fetch(
+    'https://bar.utoronto.ca/eplant/cgi-bin/querygene.cgi?species=Arabidopsis_thaliana&term=' +
+    id
+  )
+    .then((response) => response.json())
+    .then((gene) => {
+      const tip: PopperInstance = node.popper({
+        content: () => {
+          const content = document.createElement('div')
+
+          content.innerHTML = `<style>
                                             .tooltip {
                                             padding: 8px;
                                             background: white;
@@ -115,28 +116,31 @@ const nodeMouseOverHandler = (cy: Core, event) => {
                                                 </tr>
                                             </table>
                                         </div>`
-                    return content
-                },
-            })
+          const props = {
+            content: content, duration: 200, arrow: false, followCursor: false, interactive: true
+          }
+          return props
+        }
+      })
 
-            tip.show()
-            destroyTip(cy, tip)
-        })
+      tip.show()
+      destroyTip(cy, tip)
+    })
 }
 // Handle edge hover
 const edgeMouseOverHandler = (cy: Core, event) => {
-    const edge = event.target
-    const data = edge._private.data
-    const references =
-        data.reference != 'None'
-            ? generateLinks(data.reference).map((link, i) => `<a href=${link}>${link}</a>\n`)
-            : 'N/A'
-
-    const tip = edge.popper({
-        content: () => {
-            const content = document.createElement('div')
+  const edge = event.target
+  const data = edge._private.data
+  const references =
+    data.reference != 'None'
+      ? generateLinks(data.reference).map((link, i) => `<a href=${link}>${link}</a>\n`)
+      : 'N/A'
+
+  const tip = edge.popper({
+    content: () => {
+      const content = document.createElement('div')
 
-            content.innerHTML = `
+      content.innerHTML = `
           <style>
           .tooltip {
             padding: 8px;
@@ -155,24 +159,26 @@ const edgeMouseOverHandler = (cy: Core, event) => {
             <p>Reference: \n${references}</p>
 
 		 </div>`
-            return content
-        },
-    })
-    tip.show()
-
-    destroyTip(cy, tip)
+      const props = {
+        content: content, duration: 1000, arrow: true, followCursor: true, interactive: false
+      }
+      return props
+    }
+  })
+  tip.show()
+  destroyTip(cy, tip)
 }
 
 // Handler chr node hover
 const chrNodeMouseOverHandler = (cy: Core, event) => {
-    const node = event.target
-    const chrNum = node._private.data.id.substring(3, 4)
-    const genes = node._private.data.genes
-    const tip: PopperInstance = node.popper({
-        content: () => {
-            const content = document.createElement('div')
+  const node = event.target
+  const chrNum = node._private.data.id.substring(3, 4)
+  const genes = node._private.data.genes
+  const tip: PopperInstance = node.popper({
+    content: () => {
+      const content = document.createElement('div')
 
-            content.innerHTML = `
+      content.innerHTML = `
                     <style>
                     .tooltip {
                         padding: 8px;
@@ -201,55 +207,58 @@ const chrNodeMouseOverHandler = (cy: Core, event) => {
                         </table>
                     </div>
                 `
-            return content
-        },
-    })
-    tip.show()
+      const props = {
+        content: content, duration: 200, arrow: false, followCursor: false, interactive: true
+      }
+      return props
+    }
+  })
+  tip.show()
 
-    destroyTip(cy, tip)
+  destroyTip(cy, tip)
 }
 
 
 
 
 const destroyTip = (cy: Core, tip: PopperInstance) => {
-    // add handler to node for mouse leave
-    cy.on('mouseout', 'node', (event) => {
-        const nodeID = event.target.data('id')
-        if (nodeID !== 'COMPOUND_DNA' && nodeID !== 'COMPOUND_PROTEIN') {
-            tip.destroy()
-        }
-    })
-    // add handler to edge for mouse leave
-    cy.on('mouseout', 'edge', (event) => {
-        tip.destroy()
-    })
+  // add handler to node for mouse leave
+  cy.on('mouseout', 'node', (event) => {
+    const nodeID = event.target.data('id')
+    if (nodeID !== 'COMPOUND_DNA' && nodeID !== 'COMPOUND_PROTEIN') {
+      tip.destroy()
+    }
+  })
+  // add handler to edge for mouse leave
+  cy.on('mouseout', 'edge', (event) => {
+    tip.destroy()
+  })
 }
 
 // --------
 // Helpers
 // --------
 const generateLinks = (reference: string): string[] => {
-    const AL1_HYPERLINK = 'http://interactome.dfci.harvard.edu/A_thaliana/'
-
-    // Sanitize the reference
-    const sanitizedReference = reference.split('\n')
-    const hyperlinks = []
-
-    for (let i = 0; i < sanitizedReference.length; i = i + 1) {
-        // Processes links by reference type
-        if (sanitizedReference[i].search('PubMed') !== -1) {
-            // Append PubMed link to array
-            const subReference = sanitizedReference[i].replace('PubMed', '')
-            hyperlinks.push('http://www.ncbi.nlm.nih.gov/pubmed/' + subReference)
-        } else if (sanitizedReference[i].search('doi:') !== -1) {
-            // Append doi link to array
-            const subReference = sanitizedReference[i].replace('doi:', '')
-            hyperlinks.push('http://dx.doi.org/' + subReference)
-        } else if (sanitizedReference[i].search('AI-1') !== -1) {
-            // Append static AL1 link to array
-            hyperlinks.push(AL1_HYPERLINK)
-        }
+  const AL1_HYPERLINK = 'http://interactome.dfci.harvard.edu/A_thaliana/'
+
+  // Sanitize the reference
+  const sanitizedReference = reference.split('\n')
+  const hyperlinks = []
+
+  for (let i = 0; i < sanitizedReference.length; i = i + 1) {
+    // Processes links by reference type
+    if (sanitizedReference[i].search('PubMed') !== -1) {
+      // Append PubMed link to array
+      const subReference = sanitizedReference[i].replace('PubMed', '')
+      hyperlinks.push('http://www.ncbi.nlm.nih.gov/pubmed/' + subReference)
+    } else if (sanitizedReference[i].search('doi:') !== -1) {
+      // Append doi link to array
+      const subReference = sanitizedReference[i].replace('doi:', '')
+      hyperlinks.push('http://dx.doi.org/' + subReference)
+    } else if (sanitizedReference[i].search('AI-1') !== -1) {
+      // Append static AL1 link to array
+      hyperlinks.push(AL1_HYPERLINK)
     }
-    return hyperlinks
+  }
+  return hyperlinks
 }
diff --git a/Eplant/views/InteractionsViewer/scripts/filterLogic.ts b/Eplant/views/InteractionsViewer/scripts/filterLogic.ts
index aaf7d36..b961e35 100644
--- a/Eplant/views/InteractionsViewer/scripts/filterLogic.ts
+++ b/Eplant/views/InteractionsViewer/scripts/filterLogic.ts
@@ -9,31 +9,39 @@ import { Core } from 'cytoscape'
 * @param {String} selector The selector by which to filter edges
 * @return {boolean} The state of the related checkbox element
 */
-export const applyFilter = (cy: Core, selector: string) => {
+export const applyFilter = (cy: Core, status: boolean, selector: string) => {
+  if (status) {
     const edges = cy.edges(selector);
     edges.hide();
+  }
 }
 
 
+export const cleanCompoundNode = (cy: Core, id: string) => {
+  if (cy.nodes('[parent = "' + id + '"]:visible').length === 0) {
+    cy.nodes('#' + id).hide();
+  }
+}
+
 
 /**
  * Clears interaction view of nodes without associated edges
  * @returns {void}
  */
 export const cleanNodes = (cy: Core) => {
-    // Get all nodes in interaction view
-    const nodes = cy.nodes();
-    for (let n = 0; n < nodes.length; n = n + 1) {
-        const node = nodes[n];
-        const type = node.data('id').substring(9);
-
-        // Remove nodes with no connecting interactions
-        const isOrphaned = node.connectedEdges(':visible').length === 0;
-
-        if (type === 'DNA_NODE' && isOrphaned) {
-            node.hide();
-        } else if (type === 'PROTEIN_NODE' && isOrphaned) {
-            node._private.parent.hide();
-        }
+  // Get all nodes in interaction view
+  const nodes = cy.nodes();
+  for (let n = 0; n < nodes.length; n = n + 1) {
+    const node = nodes[n];
+    const type = node.data('id').substring(9);
+
+    // Remove nodes with no connecting interactions
+    const isOrphaned = node.connectedEdges(':visible').length === 0;
+
+    if (type === 'DNA_NODE' && isOrphaned) {
+      node.hide();
+    } else if (type === 'PROTEIN_NODE' && isOrphaned) {
+      node._private.parent.hide();
     }
+  }
 };
\ No newline at end of file