From 0cb9569c59733f79bcb783f7eb07e8e5dd70c7cc Mon Sep 17 00:00:00 2001
From: Matej Vavrek <matej.vavrek@m2ms.sk>
Date: Fri, 3 Apr 2020 18:08:26 +0200
Subject: [PATCH] #235 added tooltips for toggle buttons #227 added _ligand
 suffix

---
 js/components/nglView/generatingObjects.js    |   2 +-
 .../preview/molecule/moleculeList.js          | 218 ++++++++++--------
 .../preview/molecule/moleculeView.js          | 218 ++++++++++--------
 .../preview/molecule/molecules_helpers.js     |   2 +-
 4 files changed, 234 insertions(+), 206 deletions(-)

diff --git a/js/components/nglView/generatingObjects.js b/js/components/nglView/generatingObjects.js
index cf42d5620..b4b13c327 100644
--- a/js/components/nglView/generatingObjects.js
+++ b/js/components/nglView/generatingObjects.js
@@ -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,
diff --git a/js/components/preview/molecule/moleculeList.js b/js/components/preview/molecule/moleculeList.js
index ffdd4f801..5a992d2f0 100644
--- a/js/components/preview/molecule/moleculeList.js
+++ b/js/components/preview/molecule/moleculeList.js
@@ -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>
                   )}
diff --git a/js/components/preview/molecule/moleculeView.js b/js/components/preview/molecule/moleculeView.js
index abb53747a..7bf6a5201 100644
--- a/js/components/preview/molecule/moleculeView.js
+++ b/js/components/preview/molecule/moleculeView.js
@@ -477,108 +477,122 @@ const MoleculeView = memo(({ imageHeight, imageWidth, data }) => {
             wrap="nowrap"
             className={classes.contButtonsMargin}
           >
-            <Grid item>
-              <Button
-                variant="outlined"
-                className={classNames(
-                  classes.contColButton,
-                  {
-                    [classes.contColButtonSelected]: hasAllValuesOn
-                  },
-                  {
-                    [classes.contColButtonHalfSelected]: hasSomeValuesOn
-                  }
-                )}
-                onClick={() => {
-                  // always deselect all if are selected only some of options
-                  selectedAll.current = hasSomeValuesOn ? false : !selectedAll.current;
-
-                  onLigand(true);
-                  onProtein(true);
-                  onComplex(true);
-                  onSurface(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={() => onLigand()}
-                disabled={disableUserInteraction}
-              >
-                <Typography variant="subtitle2">L</Typography>
-              </Button>
-            </Grid>
-            <Grid item>
-              <Button
-                variant="outlined"
-                className={classNames(classes.contColButton, {
-                  [classes.contColButtonSelected]: isProteinOn
-                })}
-                onClick={() => onProtein()}
-                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={() => onComplex()}
-                disabled={disableUserInteraction}
-              >
-                <Typography variant="subtitle2">C</Typography>
-              </Button>
-            </Grid>
-            <Grid item>
-              <Button
-                variant="outlined"
-                className={classNames(classes.contColButton, {
-                  [classes.contColButtonSelected]: isSurfaceOn
-                })}
-                onClick={() => onSurface()}
-                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={() => onDensity()}
-                disabled={true || disableUserInteraction}
-              >
-                <Typography variant="subtitle2">D</Typography>
-              </Button>
-            </Grid>
-            <Grid item>
-              <Button
-                variant="outlined"
-                className={classNames(classes.contColButton, {
-                  [classes.contColButtonSelected]: isVectorOn
-                })}
-                onClick={() => onVector()}
-                disabled={disableUserInteraction}
-              >
-                <Typography variant="subtitle2">V</Typography>
-              </Button>
-            </Grid>
+            <Tooltip title="all">
+              <Grid item>
+                <Button
+                  variant="outlined"
+                  className={classNames(
+                    classes.contColButton,
+                    {
+                      [classes.contColButtonSelected]: hasAllValuesOn
+                    },
+                    {
+                      [classes.contColButtonHalfSelected]: hasSomeValuesOn
+                    }
+                  )}
+                  onClick={() => {
+                    // always deselect all if are selected only some of options
+                    selectedAll.current = hasSomeValuesOn ? false : !selectedAll.current;
+
+                    onLigand(true);
+                    onProtein(true);
+                    onComplex(true);
+                    onSurface(true);
+                    // onDensity(true);
+                    onVector(true);
+                  }}
+                  disabled={disableUserInteraction}
+                >
+                  <Typography variant="subtitle2">A</Typography>
+                </Button>
+              </Grid>
+            </Tooltip>
+            <Tooltip title="ligand">
+              <Grid item>
+                <Button
+                  variant="outlined"
+                  className={classNames(classes.contColButton, {
+                    [classes.contColButtonSelected]: isLigandOn
+                  })}
+                  onClick={() => onLigand()}
+                  disabled={disableUserInteraction}
+                >
+                  <Typography variant="subtitle2">L</Typography>
+                </Button>
+              </Grid>
+            </Tooltip>
+            <Tooltip title="sidechains">
+              <Grid item>
+                <Button
+                  variant="outlined"
+                  className={classNames(classes.contColButton, {
+                    [classes.contColButtonSelected]: isProteinOn
+                  })}
+                  onClick={() => onProtein()}
+                  disabled={disableUserInteraction}
+                >
+                  <Typography variant="subtitle2">P</Typography>
+                </Button>
+              </Grid>
+            </Tooltip>
+            <Tooltip title="interactions">
+              <Grid item>
+                {/* C stands for contacts now */}
+                <Button
+                  variant="outlined"
+                  className={classNames(classes.contColButton, {
+                    [classes.contColButtonSelected]: isComplexOn
+                  })}
+                  onClick={() => onComplex()}
+                  disabled={disableUserInteraction}
+                >
+                  <Typography variant="subtitle2">C</Typography>
+                </Button>
+              </Grid>
+            </Tooltip>
+            <Tooltip title="surface">
+              <Grid item>
+                <Button
+                  variant="outlined"
+                  className={classNames(classes.contColButton, {
+                    [classes.contColButtonSelected]: isSurfaceOn
+                  })}
+                  onClick={() => onSurface()}
+                  disabled={disableUserInteraction}
+                >
+                  <Typography variant="subtitle2">S</Typography>
+                </Button>
+              </Grid>
+            </Tooltip>
+            <Tooltip title="electron density">
+              <Grid item>
+                {/* TODO waiting for backend data */}
+                <Button
+                  variant="outlined"
+                  className={classNames(classes.contColButton, {
+                    [classes.contColButtonSelected]: isDensityOn
+                  })}
+                  onClick={() => onDensity()}
+                  disabled={true || disableUserInteraction}
+                >
+                  <Typography variant="subtitle2">D</Typography>
+                </Button>
+              </Grid>
+            </Tooltip>
+            <Tooltip title="vectors">
+              <Grid item>
+                <Button
+                  variant="outlined"
+                  className={classNames(classes.contColButton, {
+                    [classes.contColButtonSelected]: isVectorOn
+                  })}
+                  onClick={() => onVector()}
+                  disabled={disableUserInteraction}
+                >
+                  <Typography variant="subtitle2">V</Typography>
+                </Button>
+              </Grid>
+            </Tooltip>
           </Grid>
         </Grid>
         <Grid item xs={12}>
diff --git a/js/components/preview/molecule/molecules_helpers.js b/js/components/preview/molecule/molecules_helpers.js
index 6d18b3f93..cb9250a93 100644
--- a/js/components/preview/molecule/molecules_helpers.js
+++ b/js/components/preview/molecule/molecules_helpers.js
@@ -2,7 +2,7 @@ import { OBJECT_TYPE } from '../../nglView/constants';
 
 export const generateMolecule = (id, sdf_info) => {
   return {
-    name: OBJECT_TYPE.MOLECULE + '_' + id,
+    name: OBJECT_TYPE.MOLECULE + '_' + id + '_LIGAND',
     OBJECT_TYPE: OBJECT_TYPE.MOLECULE,
     colour: '#FFFFFF',
     sdf_info: sdf_info