Merge pull request #369 from ducku/issues/361-visible-region-description

Display Region Description as Label and Tooltip
vgteam · Dec 4, 2023 · e70b93c · e70b93c
2 parents 1082ccd + 260778e
commit e70b93c
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 28 deletions.
diff --git a/src/components/RegionInput.js b/src/components/RegionInput.js
@@ -3,6 +3,7 @@ import PropTypes from "prop-types";
 import TextField from "@mui/material/TextField";
 import Autocomplete from "@mui/material/Autocomplete";
 import FormHelperText from "@mui/material/FormHelperText";
+import Tooltip from "@mui/material/Tooltip";
 import "../config-client.js";
 import "../config-global.mjs";
 import { isEmpty } from "../common.mjs";
@@ -22,12 +23,14 @@ export const RegionInput = ({
   const pathNamesColon = pathNames.map((name) => name + ":");
   const pathsWithRegion = [];
 
+  const regionToDesc = new Map();
+
   if (regionInfo && !isEmpty(regionInfo)) {
     // Stitch path name + region start and end
     for (const [index, path] of regionInfo["chr"].entries()) {
-      pathsWithRegion.push(
-        path + ":" + regionInfo.start[index] + "-" + regionInfo.end[index]
-      );
+      const pathWithRegion = path + ":" + regionInfo.start[index] + "-" + regionInfo.end[index];
+      pathsWithRegion.push(pathWithRegion);
+      regionToDesc.set(pathWithRegion, regionInfo.desc[index]);
     }
 
     // Add descriptions
@@ -38,33 +41,40 @@ export const RegionInput = ({
   // Autocomplete selectable options
   const displayRegions = [...pathsWithRegion, ...pathNamesColon];
 
+  let descLabel = "Region";
+  if (regionToDesc.get(region)) {
+    descLabel = regionToDesc.get(region);
+  }
+
   return (
     <>
-      <Autocomplete
-        disablePortal
-        freeSolo // Allows custom input outside of the options
-        getOptionLabel={(option) => option.title || option.toString()}
-        value={region}
-        inputValue={region}
-        data-testid="autocomplete"
-        id="regionInput"    
+      <Tooltip title={descLabel} placement="top-start">
+        <Autocomplete
+          disablePortal
+          freeSolo // Allows custom input outside of the options
+          getOptionLabel={(option) => option.title || option.toString()}
+          value={region}
+          inputValue={region}
+          data-testid="autocomplete"
+          id="regionInput" 
 
-        onInputChange={(event, newInputValue) => {
-          handleRegionChange(newInputValue);
-        }}
+          onInputChange={(event, newInputValue) => {
+            handleRegionChange(newInputValue);
+          }}
 
-        options={displayRegions}
-        renderInput={(params) => (
-          <TextField
-            {...params}
-            label="Region"
-            name="Region Input"
-            inputProps={{
-              ...params.inputProps,
-            }}
-          />
-        )}
-      />
+          options={displayRegions}
+          renderInput={(params) => (
+            <TextField
+              {...params}
+              label={"Region"}
+              name="Region Input"
+              inputProps={{
+                ...params.inputProps,
+              }}
+            />
+          )}
+        />
+      </Tooltip>
       <FormHelperText id="comboBoxHelperText">
         {`
         Input a data segment to select with format <path>:<regionRange> and hit 'Go'.  See ? for more information.

diff --git a/src/end-to-end.test.js b/src/end-to-end.test.js
@@ -26,7 +26,7 @@ import App from "./App";
 
 const getRegionInput = () => {
   // Helper function to select the Region input box
-  return screen.getByRole("combobox", { name: /Region/i });
+  return screen.getByTestId("autocomplete").querySelector("input");
 };
 // This holds the running server for the duration of each test.
 let serverState = undefined;
@@ -216,8 +216,10 @@ describe("When we wait for it to load", () => {
     await act(async () => {
       userEvent.click(getRegionInput());
     });
+
     // Make sure that option in RegionInput dropdown (17_1_100) is visible
-    expect(screen.getByText("17_1_100")).toBeInTheDocument();
+    const text = screen.getAllByText("17_1_100");
+    expect(text[0]).toBeInTheDocument();
   });
   it("the region options in autocomplete are cleared after selecting new data", async () => {
     // Input data dropdown