Skip to content

Commit

Permalink
#235 added tooltips for toggle buttons
Browse files Browse the repository at this point in the history 
#227 added _ligand suffix
  • Loading branch information
@matej-vavrek
matej-vavrek committed Apr 5, 2020
1 parent bfcc53c commit 0cb9569
Show file tree
Hide file tree
Showing 4 changed files with 234 additions and 206 deletions.
2 changes: 1 addition & 1 deletion js/components/nglView/generatingObjects.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ export const generateCompoundMolObject = (sdf_info, identifier) => ({

// Ligand
export const generateMoleculeObject = (data, colourToggle) => ({
name: OBJECT_TYPE.MOLECULE + '_' + data.id.toString(),
name: OBJECT_TYPE.MOLECULE + '_' + data.id.toString() + '_LIGAND',
OBJECT_TYPE: OBJECT_TYPE.MOLECULE,
colour: colourToggle,
sdf_info: data.sdf_info,
Expand Down
218 changes: 116 additions & 102 deletions js/components/preview/molecule/moleculeList.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -532,109 +532,123 @@ const MoleculeList = memo(
wrap="nowrap"
className={classes.contButtonsMargin}
>
<Grid item>
<Button
variant="outlined"
className={classNames(
classes.contColButton,
{
[classes.contColButtonSelected]: hasAllValuesOn
},
{
[classes.contColButtonHalfSelected]: hasSomeValuesOn
}
)}
onClick={() => {
// TODO rework all these buttons into a separate component!
// always deselect all if are selected only some of options
selectedAll.current = hasSomeValuesOn ? false : !selectedAll.current;
<Tooltip title="all alls">
<Grid item>
<Button
variant="outlined"
className={classNames(
classes.contColButton,
{
[classes.contColButtonSelected]: hasAllValuesOn
},
{
[classes.contColButtonHalfSelected]: hasSomeValuesOn
}
)}
onClick={() => {
// TODO rework all these buttons into a separate component!
// always deselect all if are selected only some of options
selectedAll.current = hasSomeValuesOn ? false : !selectedAll.current;

onButtonToggle('ligand', true);
onButtonToggle('protein', true);
onButtonToggle('complex', true);
onButtonToggle('surface', true);
// onDensity(true);
// onVector(true);
}}
disabled={disableUserInteraction}
>
<Typography variant="subtitle2">A</Typography>
</Button>
</Grid>
<Grid item>
<Button
variant="outlined"
className={classNames(classes.contColButton, {
[classes.contColButtonSelected]: isLigandOn
})}
onClick={() => onButtonToggle('ligand')}
disabled={disableUserInteraction}
>
<Typography variant="subtitle2">L</Typography>
</Button>
</Grid>
<Grid item>
<Button
variant="outlined"
className={classNames(classes.contColButton, {
[classes.contColButtonSelected]: isProteinOn
})}
onClick={() => onButtonToggle('protein')}
disabled={disableUserInteraction}
>
<Typography variant="subtitle2">P</Typography>
</Button>
</Grid>
<Grid item>
{/* C stands for contacts now */}
<Button
variant="outlined"
className={classNames(classes.contColButton, {
[classes.contColButtonSelected]: isComplexOn
})}
onClick={() => onButtonToggle('complex')}
disabled={disableUserInteraction}
>
<Typography variant="subtitle2">C</Typography>
</Button>
</Grid>
<Grid item>
<Button
variant="outlined"
className={classNames(classes.contColButton, {
[classes.contColButtonSelected]: isSurfaceOn
})}
onClick={() => onButtonToggle('surface')}
disabled={disableUserInteraction}
>
<Typography variant="subtitle2">S</Typography>
</Button>
</Grid>
<Grid item>
{/* TODO waiting for backend data */}
<Button
variant="outlined"
className={classNames(classes.contColButton, {
[classes.contColButtonSelected]: isDensityOn
})}
onClick={() => onButtonToggle('density')}
disabled={true || disableUserInteraction}
>
<Typography variant="subtitle2">D</Typography>
</Button>
</Grid>
<Grid item>
<Button
variant="outlined"
className={classNames(classes.contColButton, {
[classes.contColButtonSelected]: isVectorOn
})}
onClick={() => onButtonToggle('vector')}
disabled={true || disableUserInteraction}
>
<Typography variant="subtitle2">V</Typography>
</Button>
</Grid>
onButtonToggle('ligand', true);
onButtonToggle('protein', true);
onButtonToggle('complex', true);
onButtonToggle('surface', true);
// onDensity(true);
// onVector(true);
}}
disabled={disableUserInteraction}
>
<Typography variant="subtitle2">A</Typography>
</Button>
</Grid>
</Tooltip>
<Tooltip title="all ligands">
<Grid item>
<Button
variant="outlined"
className={classNames(classes.contColButton, {
[classes.contColButtonSelected]: isLigandOn
})}
onClick={() => onButtonToggle('ligand')}
disabled={disableUserInteraction}
>
<Typography variant="subtitle2">L</Typography>
</Button>
</Grid>
</Tooltip>
<Tooltip title="all sidechains">
<Grid item>
<Button
variant="outlined"
className={classNames(classes.contColButton, {
[classes.contColButtonSelected]: isProteinOn
})}
onClick={() => onButtonToggle('protein')}
disabled={disableUserInteraction}
>
<Typography variant="subtitle2">P</Typography>
</Button>
</Grid>
</Tooltip>
<Tooltip title="all interactions">
<Grid item>
{/* C stands for contacts now */}
<Button
variant="outlined"
className={classNames(classes.contColButton, {
[classes.contColButtonSelected]: isComplexOn
})}
onClick={() => onButtonToggle('complex')}
disabled={disableUserInteraction}
>
<Typography variant="subtitle2">C</Typography>
</Button>
</Grid>
</Tooltip>
<Tooltip title="all surfaces">
<Grid item>
<Button
variant="outlined"
className={classNames(classes.contColButton, {
[classes.contColButtonSelected]: isSurfaceOn
})}
onClick={() => onButtonToggle('surface')}
disabled={disableUserInteraction}
>
<Typography variant="subtitle2">S</Typography>
</Button>
</Grid>
</Tooltip>
<Tooltip title="all electron densities">
<Grid item>
{/* TODO waiting for backend data */}
<Button
variant="outlined"
className={classNames(classes.contColButton, {
[classes.contColButtonSelected]: isDensityOn
})}
onClick={() => onButtonToggle('density')}
disabled={true || disableUserInteraction}
>
<Typography variant="subtitle2">D</Typography>
</Button>
</Grid>
</Tooltip>
<Tooltip title="all vectors">
<Grid item>
<Button
variant="outlined"
className={classNames(classes.contColButton, {
[classes.contColButtonSelected]: isVectorOn
})}
onClick={() => onButtonToggle('vector')}
disabled={true || disableUserInteraction}
>
<Typography variant="subtitle2">V</Typography>
</Button>
</Grid>
</Tooltip>
</Grid>
</Grid>
)}
Expand Down
Loading

0 comments on commit 0cb9569

Please sign in to comment.