feat: optionally enable tooltips (#248)

For now, tooltips are still enabled by default. Could revisit in the future if it seems unnecessary.
cancervariants · Aug 29, 2023 · 16ceed4 · 16ceed4
1 parent 998dd81
commit 16ceed4
Show file tree

Hide file tree

Showing 9 changed files with 124 additions and 51 deletions.
diff --git a/client/src/components/Pages/CausativeEvent/CausativeEvent.tsx b/client/src/components/Pages/CausativeEvent/CausativeEvent.tsx
@@ -102,32 +102,23 @@ export const CausativeEvent: React.FC<Props> = () => {
               </Box>
             </HelpPopover>
           </Typography>
-          <HelpTooltip
-            placement="bottom"
-            title={
-              <Typography>
-                The type of event that generated the fusion.
-              </Typography>
-            }
+          <RadioGroup
+            aria-label="Causative event?"
+            name="controlled-radio-buttons-group"
+            value={eventType}
+            onChange={handleEventTypeChange}
           >
-            <RadioGroup
-              aria-label="Causative event?"
-              name="controlled-radio-buttons-group"
-              value={eventType}
-              onChange={handleEventTypeChange}
-            >
-              {["rearrangement", "trans-splicing", "read-through"].map(
-                (value, index) => (
-                  <FormControlLabel
-                    value={value}
-                    control={<Radio />}
-                    label={eventDisplayMap[value]}
-                    key={index}
-                  />
-                )
-              )}
-            </RadioGroup>
-          </HelpTooltip>
+            {["rearrangement", "trans-splicing", "read-through"].map(
+              (value, index) => (
+                <FormControlLabel
+                  value={value}
+                  control={<Radio />}
+                  label={eventDisplayMap[value]}
+                  key={index}
+                />
+              )
+            )}
+          </RadioGroup>
         </Box>
       </FormControl>
       <Box className="right column">

diff --git a/client/src/components/Pages/Structure/Input/StructuralElementInputAccordion.tsx b/client/src/components/Pages/Structure/Input/StructuralElementInputAccordion.tsx
@@ -115,7 +115,10 @@ const StructuralElementInputAccordion: React.FC<
       >
         {validated ? (
           <Tooltip title="Validation successful">
-            <CheckCircleIcon className="input-correct" style={{ color: green[500] }} />
+            <CheckCircleIcon
+              className="input-correct"
+              style={{ color: green[500] }}
+            />
           </Tooltip>
         ) : (
           <Tooltip title="Invalid component">

diff --git a/client/src/components/main/App/App.scss b/client/src/components/main/App/App.scss
@@ -37,7 +37,7 @@ h3 {
   .MuiDrawer-paper {
     width: 160px;
     overflow-x: hidden !important;
-    background-color: #18252B;
+    background-color: #18252b;
     color: white !important;
   }
 }

diff --git a/client/src/components/main/App/App.tsx b/client/src/components/main/App/App.tsx
@@ -43,6 +43,11 @@ import LandingPage from "../Landing/LandingPage";
 import AppMenu from "./AppMenu";
 import DemoDropdown from "./DemoDropdown";
 import { HelpPopover } from "../shared/HelpPopover/HelpPopover";
+import {
+  initialSettings,
+  SettingsContext,
+  SettingsType,
+} from "../../../global/contexts/SettingsContext";
 
 type ClientFusion = ClientCategoricalFusion | ClientAssayedFusion;
 
@@ -69,6 +74,15 @@ const App = (): JSX.Element => {
     null
   );
   const [selectedDemo, setSelectedDemo] = React.useState("");
+  const [settings, setSettings] = useState(initialSettings);
+
+  const handleSetSettings = (newSettings: SettingsType) => {
+    sessionStorage.setItem(
+      "fusion-builder-settings",
+      JSON.stringify(newSettings)
+    );
+    setSettings(newSettings);
+  };
 
   // TODO: implement open/closing of AppMenu. This variable will become a state variable
   const open = true;
@@ -161,7 +175,10 @@ const App = (): JSX.Element => {
    * readability.
    */
   const fusionIsEmpty = () => {
-    if (fusion?.structural_elements.length === 0 && fusion?.regulatory_element === undefined) {
+    if (
+      fusion?.structural_elements.length === 0 &&
+      fusion?.regulatory_element === undefined
+    ) {
       return true;
     } else if (fusion.structural_elements.length > 0) {
       return false;
@@ -307,8 +324,8 @@ const App = (): JSX.Element => {
   );
 
   return (
-    <>
-      <ThemeProvider theme={theme}>
+    <ThemeProvider theme={theme}>
+      <SettingsContext.Provider value={settings}>
         <div
           className="app-main"
           style={
@@ -359,7 +376,7 @@ const App = (): JSX.Element => {
               </Box>
             </Box>
           </AppBar>
-          <AppMenu />
+          <AppMenu settings={settings} setSettings={handleSetSettings} />
           <Box ml={leftMarginOffset} mr="15px" width="100%">
             {displayTool ? fusionsComponent : <LandingPage />}
           </Box>
@@ -392,8 +409,8 @@ const App = (): JSX.Element => {
             </Button>
           </DialogActions>
         </Dialog>
-      </ThemeProvider>
-    </>
+      </SettingsContext.Provider>
+    </ThemeProvider>
   );
 };
 

diff --git a/client/src/components/main/App/AppMenu.tsx b/client/src/components/main/App/AppMenu.tsx
@@ -1,6 +1,13 @@
 import React, { useEffect, useState } from "react";
 import "./App.scss";
-import { Box, Typography, makeStyles, Link, Drawer } from "@material-ui/core";
+import {
+  Box,
+  Typography,
+  makeStyles,
+  Link,
+  Drawer,
+  Switch,
+} from "@material-ui/core";
 import { ServiceInfoResponse } from "../../../services/ResponseModels";
 import { getInfo } from "../../../services/main";
 
@@ -16,28 +23,44 @@ const useStyles = makeStyles(() => ({
   upperSection: {
     marginLeft: "10px",
   },
+  drawerContainer: {
+    height: "100%",
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "space-between",
+  },
   lowerSection: {
     marginBottom: "10px",
     display: "flex",
-    justifyContent: "center",
+    flexDirection: "column",
   },
-  drawerContainer: {
-    height: "100%",
+  optionsContainer: {
     display: "flex",
-    flexDirection: "column",
+    flexDirection: "row",
     justifyContent: "space-between",
+    alignItems: "center",
+    margin: "0px 10px 0px 10px",
+  },
+  optionsText: { fontSize: "0.8rem" },
+  versionContainer: {
+    display: "flex",
+    justifyContent: "center",
+    paddingTop: "10px",
   },
   versionText: {
     fontSize: "0.7rem",
   },
 }));
 
-interface AppMenuProps {
-  open?: boolean;
-}
-
-export default function AppMenu(props: AppMenuProps): React.ReactElement {
+export default function AppMenu({
+  open,
+  settings,
+  setSettings,
+}): React.ReactElement {
   const [serviceInfo, setServiceInfo] = useState({} as ServiceInfoResponse);
+  const [tooltipsEnabled, setTooltipsEnabled] = useState(
+    settings.enableToolTips
+  );
 
   useEffect(() => {
     getInfo().then((infoResponse) => {
@@ -46,10 +69,16 @@ export default function AppMenu(props: AppMenuProps): React.ReactElement {
   }, []);
 
   const classes = useStyles();
+
+  const handleTooltipsChange = (event) => {
+    setTooltipsEnabled(event.target.checked);
+    setSettings({ ...settings, enableToolTips: event.target.checked });
+  };
+
   return (
     <Drawer
       variant="permanent"
-      open={props.open}
+      open={open}
       anchor="left"
       className="menu-drawer"
     >
@@ -127,9 +156,21 @@ export default function AppMenu(props: AppMenuProps): React.ReactElement {
         </Box>
 
         <Box className={classes.lowerSection}>
-          <Typography className={classes.versionText}>
-            v{serviceInfo.curfu_version}
-          </Typography>
+          <Box className={classes.optionsContainer}>
+            <Typography className={classes.optionsText}>
+              Enable tooltips
+            </Typography>
+            <Switch
+              size="small"
+              checked={tooltipsEnabled}
+              onChange={handleTooltipsChange}
+            />
+          </Box>
+          <Box className={classes.versionContainer}>
+            <Typography className={classes.versionText}>
+              v{serviceInfo.curfu_version}
+            </Typography>
+          </Box>
         </Box>
       </Box>
     </Drawer>

diff --git a/client/src/components/main/shared/GeneAutocomplete/GeneAutocomplete.tsx b/client/src/components/main/shared/GeneAutocomplete/GeneAutocomplete.tsx
@@ -2,7 +2,6 @@ import React, { useState, useEffect } from "react";
 import { TextField, Typography } from "@material-ui/core";
 import Autocomplete from "@material-ui/lab/Autocomplete";
 import { getGeneId, getGeneSuggestions } from "../../../../services/main";
-import { CSSProperties } from "@material-ui/core/styles/withStyles";
 import {
   NormalizeGeneResponse,
   SuggestGeneResponse,
@@ -207,7 +206,7 @@ export const GeneAutocomplete: React.FC<Props> = ({
             variant="standard"
             label={promptText ? promptText : "Gene Symbol"}
             margin="dense"
-            style={{minWidth: "250px !important"}}
+            style={{ minWidth: "250px !important" }}
             error={geneText !== ""}
             helperText={geneText ? geneText : null}
           />

diff --git a/client/src/components/main/shared/HelpTooltip/HelpTooltip.tsx b/client/src/components/main/shared/HelpTooltip/HelpTooltip.tsx
@@ -1,5 +1,6 @@
 import { makeStyles, Tooltip } from "@material-ui/core";
-import React from "react";
+import React, { useContext } from "react";
+import { SettingsContext } from "../../../../global/contexts/SettingsContext";
 
 const useStylesBootstrap = makeStyles(() => ({
   tooltip: {
@@ -14,6 +15,8 @@ const useStylesBootstrap = makeStyles(() => ({
 }));
 
 const BootstrapTooltip = ({ title, placement, children }) => {
+  const settings = useContext(SettingsContext);
+
   const classes = useStylesBootstrap();
 
   return (
@@ -22,6 +25,9 @@ const BootstrapTooltip = ({ title, placement, children }) => {
       placement={placement ? placement : "right"}
       title={title}
       classes={classes}
+      disableFocusListener={!settings.enableToolTips}
+      disableHoverListener={!settings.enableToolTips}
+      disableTouchListener={!settings.enableToolTips}
     >
       {children}
     </Tooltip>

diff --git a/client/src/global/contexts/SettingsContext.tsx b/client/src/global/contexts/SettingsContext.tsx
@@ -0,0 +1,16 @@
+import { createContext } from "react";
+
+export type SettingsType = {
+  enableToolTips: boolean;
+};
+
+export const defaultSettings = {
+  enableToolTips: true,
+};
+
+export const initialSettings =
+  sessionStorage.getItem("fusion-builder-settings") !== null
+    ? JSON.parse(sessionStorage.getItem("fusion-builder-settings") as string)
+    : defaultSettings;
+
+export const SettingsContext = createContext<SettingsType>(defaultSettings);
diff --git a/client/src/global/styles/theme.ts b/client/src/global/styles/theme.ts
@@ -40,7 +40,7 @@ const theme = createTheme({
     secondary: {
       main: COLORTHEMES.light["--secondary"],
       contrastText: COLORTHEMES.light["--white"],
-    }
+    },
   },
 });
-Original file line number
+Diff line change
@@ Expand Up / @@ -40,7 +40,7 @@ const theme = createTheme({ @@
         secondary: {
           main: COLORTHEMES.light["--secondary"],
           contrastText: COLORTHEMES.light["--white"],
-        }
+        },
       },
     });
@@ Expand Down @@