feat: Add tooltips to various UI elements (fixes #148). (#160)

junhaoliao · web-flow · commit 07c35584ea2e · 2025-01-11T19:24:39.000-05:00
diff --git a/src/components/CentralContainer/Sidebar/SidebarTabs/PanelTitleButton.tsx b/src/components/CentralContainer/Sidebar/SidebarTabs/PanelTitleButton.tsx
@@ -1,6 +1,7 @@
 import {
     IconButton,
     IconButtonProps,
+    Tooltip,
 } from "@mui/joy";
 
 import "./PanelTitleButton.css";
@@ -10,16 +11,24 @@ import "./PanelTitleButton.css";
  * Renders an IconButton for use in sidebar tab titles.
  *
  * @param props
+ * @param props.className
+ * @param props.title
+ * @param props.rest
  * @return
  */
-const PanelTitleButton = (props: IconButtonProps) => {
-    const {className, ...rest} = props;
-    return (
-        <IconButton
-            className={`tab-panel-title-button ${className ?? ""}`}
-            {...rest}/>
-    );
-};
+const PanelTitleButton = ({
+    className,
+    title,
+    ...rest
+}: IconButtonProps) => (
+    <Tooltip title={title}>
+        <span>
+            <IconButton
+                className={`tab-panel-title-button ${className ?? ""}`}
+                {...rest}/>
+        </span>
+    </Tooltip>
+);
 
 
 export default PanelTitleButton;
diff --git a/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/index.tsx b/src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/index.tsx
@@ -10,6 +10,7 @@ import {
     LinearProgress,
     Textarea,
     ToggleButtonGroup,
+    Tooltip,
 } from "@mui/joy";
 
 import UnfoldLessIcon from "@mui/icons-material/UnfoldLess";
@@ -67,6 +68,10 @@ const SearchTabPanel = () => {
     const [queryOptions, setQueryOptions] = useState<QUERY_OPTION[]>([]);
     const [queryString, setQueryString] = useState<string>("");
 
+    const handleCollapseAllButtonClick = () => {
+        setIsAllExpanded((v) => !v);
+    };
+
     const handleQuerySubmit = (newArgs: Partial<QueryArgs>) => {
         startQuery({
             isCaseSensitive: getIsCaseSensitive(queryOptions),
@@ -92,12 +97,19 @@ const SearchTabPanel = () => {
         });
     };
 
+    const isQueryInputBoxDisabled = isDisabled(uiState, UI_ELEMENT.QUERY_INPUT_BOX);
+
     return (
         <CustomTabPanel
             tabName={TAB_NAME.SEARCH}
             title={TAB_DISPLAY_NAMES[TAB_NAME.SEARCH]}
             titleButtons={
-                <PanelTitleButton onClick={() => { setIsAllExpanded((v) => !v); }}>
+                <PanelTitleButton
+                    title={isAllExpanded ?
+                        "Collapse all" :
+                        "Expand all"}
+                    onClick={handleCollapseAllButtonClick}
+                >
                     {isAllExpanded ?
                         <UnfoldLessIcon/> :
                         <UnfoldMoreIcon/>}
@@ -108,34 +120,46 @@ const SearchTabPanel = () => {
                 <div className={"query-input-box-with-progress"}>
                     <Textarea
                         className={"query-input-box"}
-                        disabled={isDisabled(uiState, UI_ELEMENT.QUERY_INPUT_BOX)}
                         maxRows={7}
                         placeholder={"Search"}
                         size={"sm"}
                         endDecorator={
                             <ToggleButtonGroup
+                                disabled={isQueryInputBoxDisabled}
                                 size={"sm"}
                                 spacing={0.25}
                                 value={queryOptions}
                                 variant={"plain"}
                                 onChange={handleQueryOptionsChange}
                             >
-                                <IconButton
-                                    className={"query-option-button"}
-                                    value={QUERY_OPTION.IS_CASE_SENSITIVE}
-                                >
-                                    Aa
-                                </IconButton>
-                                <IconButton
-                                    className={"query-option-button"}
-                                    value={QUERY_OPTION.IS_REGEX}
-                                >
-                                    .*
-                                </IconButton>
+                                <Tooltip title={"Match case"}>
+                                    <span>
+                                        <IconButton
+                                            className={"query-option-button"}
+                                            value={QUERY_OPTION.IS_CASE_SENSITIVE}
+                                        >
+                                            Aa
+                                        </IconButton>
+                                    </span>
+                                </Tooltip>
+
+                                <Tooltip title={"Use regular expression"}>
+                                    <span>
+                                        <IconButton
+                                            className={"query-option-button"}
+                                            value={QUERY_OPTION.IS_REGEX}
+                                        >
+                                            .*
+                                        </IconButton>
+                                    </span>
+                                </Tooltip>
                             </ToggleButtonGroup>
                         }
                         slotProps={{
-                            textarea: {className: "query-input-box-textarea"},
+                            textarea: {
+                                className: "query-input-box-textarea",
+                                disabled: isQueryInputBoxDisabled,
+                            },
                             endDecorator: {className: "query-input-box-end-decorator"},
                         }}
                         onChange={handleQueryInputChange}/>
diff --git a/src/components/CentralContainer/Sidebar/SidebarTabs/TabButton.tsx b/src/components/CentralContainer/Sidebar/SidebarTabs/TabButton.tsx
@@ -34,11 +34,9 @@ const TabButton = ({tabName, Icon, onTabButtonClick}: TabButtonProps) => {
 
     return (
         <Tooltip
-            arrow={true}
             key={tabName}
             placement={"right"}
             title={TAB_DISPLAY_NAMES[tabName]}
-            variant={"outlined"}
         >
             <Tab
                 className={"sidebar-tab-button"}
diff --git a/src/components/MenuBar/ExportLogsButton.tsx b/src/components/MenuBar/ExportLogsButton.tsx
@@ -17,7 +17,7 @@ import {
     ignorePointerIfFastLoading,
     isDisabled,
 } from "../../utils/states";
-import SmallIconButton from "./SmallIconButton";
+import MenuBarIconButton from "./MenuBarIconButton";
 
 
 /**
@@ -29,8 +29,9 @@ const ExportLogsButton = () => {
     const {exportLogs, exportProgress, uiState} = useContext(StateContext);
 
     return (
-        <SmallIconButton
+        <MenuBarIconButton
             className={ignorePointerIfFastLoading(uiState)}
+            title={"Export logs"}
             disabled={
                 (null !== exportProgress && EXPORT_LOG_PROGRESS_VALUE_MAX !== exportProgress) ||
                 isDisabled(uiState, UI_ELEMENT.EXPORT_LOGS_BUTTON)
@@ -56,7 +57,7 @@ const ExportLogsButton = () => {
                             {Math.ceil(exportProgress * 100)}
                         </Typography>}
                 </CircularProgress>}
-        </SmallIconButton>
+        </MenuBarIconButton>
     );
 };
 
diff --git a/src/components/MenuBar/MenuBarIconButton.tsx b/src/components/MenuBar/MenuBarIconButton.tsx
@@ -0,0 +1,39 @@
+import {
+    IconButton,
+    IconButtonProps,
+    Tooltip,
+    TooltipTypeMap,
+} from "@mui/joy";
+
+
+interface MenuBarIconButtonProps extends IconButtonProps {
+    tooltipPlacement?: TooltipTypeMap["props"]["placement"];
+}
+
+/**
+ * An icon button for use in the menu bar.
+ *
+ * @param props
+ * @param props.title Tooltip title.
+ * @param props.tooltipPlacement
+ * @param props.rest
+ * @return
+ */
+const MenuBarIconButton = ({
+    tooltipPlacement,
+    title,
+    ...rest
+}: MenuBarIconButtonProps) => (
+    <Tooltip
+        placement={tooltipPlacement ?? "bottom"}
+        title={title}
+    >
+        <span>
+            <IconButton
+                size={"sm"}
+                {...rest}/>
+        </span>
+    </Tooltip>
+);
+
+export default MenuBarIconButton;
diff --git a/src/components/MenuBar/NavigationBar.tsx b/src/components/MenuBar/NavigationBar.tsx
@@ -1,9 +1,6 @@
 import React, {useContext} from "react";
 
-import {
-    ButtonGroup,
-    IconButton,
-} from "@mui/joy";
+import {ButtonGroup} from "@mui/joy";
 
 import NavigateBefore from "@mui/icons-material/NavigateBefore";
 import NavigateNext from "@mui/icons-material/NavigateNext";
@@ -17,6 +14,7 @@ import {
     ignorePointerIfFastLoading,
     isDisabled,
 } from "../../utils/states";
+import MenuBarIconButton from "./MenuBarIconButton";
 import PageNumInput from "./PageNumInput";
 
 
@@ -46,37 +44,40 @@ const NavigationBar = () => {
         <ButtonGroup
             className={ignorePointerIfFastLoading(uiState)}
             disabled={isDisabled(uiState, UI_ELEMENT.NAVIGATION_BAR)}
-            size={"sm"}
             spacing={0.01}
             variant={"plain"}
         >
-            <IconButton
+            <MenuBarIconButton
                 data-action-name={ACTION_NAME.FIRST_PAGE}
+                title={"First page"}
                 onClick={handleNavButtonClick}
             >
                 <SkipPrevious/>
-            </IconButton>
-            <IconButton
+            </MenuBarIconButton>
+            <MenuBarIconButton
                 data-action-name={ACTION_NAME.PREV_PAGE}
+                title={"Previous page"}
                 onClick={handleNavButtonClick}
             >
                 <NavigateBefore/>
-            </IconButton>
+            </MenuBarIconButton>
 
             <PageNumInput/>
 
-            <IconButton
+            <MenuBarIconButton
                 data-action-name={ACTION_NAME.NEXT_PAGE}
+                title={"Next page"}
                 onClick={handleNavButtonClick}
             >
                 <NavigateNext/>
-            </IconButton>
-            <IconButton
+            </MenuBarIconButton>
+            <MenuBarIconButton
                 data-action-name={ACTION_NAME.LAST_PAGE}
+                title={"Last page"}
                 onClick={handleNavButtonClick}
             >
                 <SkipNext/>
-            </IconButton>
+            </MenuBarIconButton>
         </ButtonGroup>
     );
 };
diff --git a/src/components/MenuBar/SmallIconButton.tsx b/src/components/MenuBar/SmallIconButton.tsx
diff --git a/src/components/MenuBar/index.tsx b/src/components/MenuBar/index.tsx
@@ -3,10 +3,8 @@ import {useContext} from "react";
 import {
     Box,
     Divider,
-    IconButton,
     LinearProgress,
     Sheet,
-    Tooltip,
     Typography,
 } from "@mui/joy";
 
@@ -18,6 +16,7 @@ import {CURSOR_CODE} from "../../typings/worker";
 import {openFile} from "../../utils/file";
 import {isDisabled} from "../../utils/states";
 import ExportLogsButton from "./ExportLogsButton";
+import MenuBarIconButton from "./MenuBarIconButton";
 import NavigationBar from "./NavigationBar";
 
 import "./index.css";
@@ -48,20 +47,14 @@ const MenuBar = () => {
                 </div>
 
                 <Divider orientation={"vertical"}/>
-                <Tooltip
-                    arrow={true}
-                    placement={"right"}
+                <MenuBarIconButton
+                    disabled={isDisabled(uiState, UI_ELEMENT.OPEN_FILE_BUTTON)}
                     title={"Open file"}
-                    variant={"outlined"}
+                    tooltipPlacement={"bottom-start"}
+                    onClick={handleOpenFile}
                 >
-                    <IconButton
-                        disabled={isDisabled(uiState, UI_ELEMENT.OPEN_FILE_BUTTON)}
-                        size={"sm"}
-                        onClick={handleOpenFile}
-                    >
-                        <FolderOpenIcon className={"menu-bar-open-file-icon"}/>
-                    </IconButton>
-                </Tooltip>
+                    <FolderOpenIcon className={"menu-bar-open-file-icon"}/>
+                </MenuBarIconButton>
                 <Divider orientation={"vertical"}/>
 
                 <Box
diff --git a/src/components/StatusBar/index.tsx b/src/components/StatusBar/index.tsx
@@ -3,6 +3,7 @@ import {useContext} from "react";
 import {
     Button,
     Sheet,
+    Tooltip,
     Typography,
 } from "@mui/joy";
 
@@ -39,18 +40,24 @@ const StatusBar = () => {
             <Typography className={"status-message"}>
                 {/* This is left blank intentionally until status messages are implemented. */}
             </Typography>
-            <Button
-                color={"primary"}
-                disabled={isDisabled(uiState, UI_ELEMENT.LOG_EVENT_NUM_DISPLAY)}
-                size={"sm"}
-                variant={"soft"}
-                onClick={handleCopyLinkButtonClick}
-            >
-                {"Log Event "}
-                {logEventNum}
-                {" / "}
-                {numEvents}
-            </Button>
+
+            <Tooltip title={"Copy link to clipboard"}>
+                <span>
+                    <Button
+                        color={"primary"}
+                        disabled={isDisabled(uiState, UI_ELEMENT.LOG_EVENT_NUM_DISPLAY)}
+                        size={"sm"}
+                        variant={"soft"}
+                        onClick={handleCopyLinkButtonClick}
+                    >
+                        {"Log Event "}
+                        {logEventNum}
+                        {" / "}
+                        {numEvents}
+                    </Button>
+                </span>
+            </Tooltip>
+
             <LogLevelSelect/>
         </Sheet>
     );
diff --git a/src/components/theme.tsx b/src/components/theme.tsx
