From 16ceed4d7a1b04441f1f0fd228a38055e3267882 Mon Sep 17 00:00:00 2001 From: James Stevenson Date: Tue, 29 Aug 2023 15:58:06 -0400 Subject: [PATCH] feat: optionally enable tooltips (#248) For now, tooltips are still enabled by default. Could revisit in the future if it seems unnecessary. --- .../Pages/CausativeEvent/CausativeEvent.tsx | 41 +++++------ .../Input/StructuralElementInputAccordion.tsx | 5 +- client/src/components/main/App/App.scss | 2 +- client/src/components/main/App/App.tsx | 29 ++++++-- client/src/components/main/App/AppMenu.tsx | 69 +++++++++++++++---- .../GeneAutocomplete/GeneAutocomplete.tsx | 3 +- .../main/shared/HelpTooltip/HelpTooltip.tsx | 8 ++- .../src/global/contexts/SettingsContext.tsx | 16 +++++ client/src/global/styles/theme.ts | 2 +- 9 files changed, 124 insertions(+), 51 deletions(-) create mode 100644 client/src/global/contexts/SettingsContext.tsx diff --git a/client/src/components/Pages/CausativeEvent/CausativeEvent.tsx b/client/src/components/Pages/CausativeEvent/CausativeEvent.tsx index 1c9eaac4..1e5c3aa1 100644 --- 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 = () => { - - The type of event that generated the fusion. - - } + - - {["rearrangement", "trans-splicing", "read-through"].map( - (value, index) => ( - } - label={eventDisplayMap[value]} - key={index} - /> - ) - )} - - + {["rearrangement", "trans-splicing", "read-through"].map( + (value, index) => ( + } + label={eventDisplayMap[value]} + key={index} + /> + ) + )} + diff --git a/client/src/components/Pages/Structure/Input/StructuralElementInputAccordion.tsx b/client/src/components/Pages/Structure/Input/StructuralElementInputAccordion.tsx index 0753b150..f47cc2ca 100644 --- 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 ? ( - + ) : ( diff --git a/client/src/components/main/App/App.scss b/client/src/components/main/App/App.scss index 2068049e..910af101 100644 --- 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 index c64152ad..483ec9e4 100644 --- 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 ( - <> - + +
{ - + {displayTool ? fusionsComponent : } @@ -392,8 +409,8 @@ const App = (): JSX.Element => { - - + + ); }; diff --git a/client/src/components/main/App/AppMenu.tsx b/client/src/components/main/App/AppMenu.tsx index ab729fb5..b1a5a74a 100644 --- 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 ( @@ -127,9 +156,21 @@ export default function AppMenu(props: AppMenuProps): React.ReactElement { - - v{serviceInfo.curfu_version} - + + + Enable tooltips + + + + + + v{serviceInfo.curfu_version} + + diff --git a/client/src/components/main/shared/GeneAutocomplete/GeneAutocomplete.tsx b/client/src/components/main/shared/GeneAutocomplete/GeneAutocomplete.tsx index 710dc80a..05269330 100644 --- 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 = ({ 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 index 5397e006..32440638 100644 --- 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} diff --git a/client/src/global/contexts/SettingsContext.tsx b/client/src/global/contexts/SettingsContext.tsx new file mode 100644 index 00000000..00395312 --- /dev/null +++ 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(defaultSettings); diff --git a/client/src/global/styles/theme.ts b/client/src/global/styles/theme.ts index 944c8bbc..4561b371 100644 --- 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"], - } + }, }, });