Skip to content

Commit

Permalink
Updated filter dialog to actually contain all the neccesary elements …
Browse files Browse the repository at this point in the history 
…required for filtering genes in interactions view
  • Loading branch information
@y330
y330 committed Oct 21, 2024
1 parent 492634b commit 8855fd3
Show file tree
Hide file tree
Showing 3 changed files with 225 additions and 98 deletions.
271 changes: 221 additions & 50 deletions Eplant/views/InteractionsViewer/FilterDialog.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,65 @@
import { FC, useState } from 'react'

import { ListItemText, ListSubheader, Switch } from '@mui/material'
import Box from '@mui/material/Box'
import List from '@mui/material/List'
import ListItem from '@mui/material/ListItem'
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 InputAdornment from '@mui/material/InputAdornment'
import TextField from '@mui/material/TextField'

export const FilterDialog: FC = () => {
const [EPPICorrValue, setEPPICorrValue] = useState<number>()
const [PPPICorrValue, setPPPICorrValue] = useState<number>()
const [PPPIConfValue, setPPPIConfValue] = useState<number>()
const [PPDIConfValue, setPPDIConfValue] = useState<number>()
type numberInputProps = {
label: string
changeFunc: (event: object) => void
prefix?: string
}
const NumberInput = (props: numberInputProps) => {
return (
<>
<TextField
label={props.label}
size='small'
variant='outlined'
color='secondary'
type='number'
margin='dense'
onChange={(event) => {
props.changeFunc(event)
}}
inputProps={{
defaultValue: 0,
step: 0.1,
min: -1,
max: 1,
}}
InputProps={
props.prefix
? {
startAdornment: (
<InputAdornment position='start'>
{props.prefix}
</InputAdornment>
),
}
: {}
}
/>
</>
)
}
const FilterDialog: FC = () => {
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
Expand All @@ -23,62 +73,183 @@ export const FilterDialog: FC = () => {
const applyFilters = () => {
// Create selectors
const eppiCorr =
selectors.EPPISelector + selectors.corrSelector + EPPICorrValue + ']'
selectors.EPPISelector + selectors.corrSelector + eppiCorrValue + ']'
const pppiCorr =
selectors.PPPISelector + selectors.corrSelector + PPPICorrValue + ']'
selectors.PPPISelector + selectors.corrSelector + pppiCorrValue + ']'
const pppiConf =
selectors.PPPISelector + selectors.interConfSelector + PPPIConfValue + ']'
selectors.PPPISelector + selectors.interConfSelector + pppiConfValue + ']'
const ppdiConf =
selectors.PPDISelector + selectors.fimoConfSelector + PPDIConfValue + ']'
selectors.PPDISelector +
selectors.fimoConfSelector +
'1e-' +
ppdiConfValue +
']'
}

return (
<Box>
<List
<FormGroup
sx={(theme) => ({
maxWidth: 360,
bgcolor: theme.palette.background.default,
maxWidth: 600,
padding: 3,
mr: 10,
bgcolor: theme.palette.background.transparentOverlay,
color: 'white',
})}
subheader={<ListSubheader>Filter Interactions</ListSubheader>}
>
<ListItem>
<ListItemText
id='filter-option-1'
primary='Hide ALL experimentally determined Protein-Protein interactions'
/>
<Switch edge='end' onChange={() => {}} checked={false} />
</ListItem>
<ListItem>
<ListItemText
id='filter-option-2'
primary='Hide only with correlation less than: 0.5 '
<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: '
/>
<Switch edge='end' onChange={() => {}} checked={false} />
</ListItem>
<ListItem>
<ListItemText
id='filter-option-3'
primary='Hide ALL predicted
Protein-Protein interactions Hide only with correlation less than:
0.5'
{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: '
/>
<Switch edge='end' onChange={() => {}} checked={false} />
</ListItem>
<ListItem>
<ListItemText
id='filter-option-4'
primary='Hide only with confidence less than 2'
{/* 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: '
/>
<Switch edge='end' onChange={() => {}} checked={false} />
</ListItem>
<ListItem>
<ListItemText
id='filter-option-5'
primary='Hide only with confidence less than 2'
{/* 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'
/>
<Switch edge='end' onChange={() => {}} checked={false} />
</ListItem>
</List>
{/* 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>
)
}
export default FilterDialog
50 changes: 3 additions & 47 deletions Eplant/views/InteractionsViewer/Topbar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,8 @@ import ListItem from '@mui/material/ListItem'
import Toolbar from '@mui/material/Toolbar'
import Typography from '@mui/material/Typography'

import FilterDialog from './FilterDialog'

interface TopbarProps {
gene: string
}
Expand Down Expand Up @@ -93,53 +95,7 @@ const Topbar: FC<TopbarProps> = ({ gene }) => {
</Box>
</Popup>
<Popup open={showFilter} anchor={filterRef.current}>
<Box>
<List
sx={(theme) => ({
maxWidth: 360,
bgcolor: theme.palette.background.default,
})}
subheader={<ListSubheader>Filter Interactions</ListSubheader>}
>
<ListItem>
<ListItemText
id='filter-option-1'
primary='Hide ALL experimentally determined Protein-Protein interactions'
/>
<Switch edge='end' onChange={() => {}} checked={false} />
</ListItem>
<ListItem>
<ListItemText
id='filter-option-2'
primary='Hide only with correlation less than: 0.5 '
/>
<Switch edge='end' onChange={() => {}} checked={false} />
</ListItem>
<ListItem>
<ListItemText
id='filter-option-3'
primary='Hide ALL predicted
Protein-Protein interactions Hide only with correlation less than:
0.5'
/>
<Switch edge='end' onChange={() => {}} checked={false} />
</ListItem>
<ListItem>
<ListItemText
id='filter-option-4'
primary='Hide only with confidence less than 2'
/>
<Switch edge='end' onChange={() => {}} checked={false} />
</ListItem>
<ListItem>
<ListItemText
id='filter-option-5'
primary='Hide only with confidence less than 2'
/>
<Switch edge='end' onChange={() => {}} checked={false} />
</ListItem>
</List>
</Box>
<FilterDialog />
</Popup>
</AppBar>
)
Expand Down
2 changes: 1 addition & 1 deletion Eplant/views/InteractionsViewer/scripts/eventHandlers.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -111,7 +111,7 @@ const nodeMouseOverHandler = (cy: Core, event) => {
</td>
</tr>
<tr>
<td><button title='Load gene into collection'>Load Gene</button>
<td><button onclick={title='Load gene into collection'>Load Gene</button>
</tr>
</table>
</div>`
Expand Down

0 comments on commit 8855fd3

Please sign in to comment.