From b99374d9781f5fc93a4c6cfeb3a37130987e84d7 Mon Sep 17 00:00:00 2001
From: ducku <dchung612@gmail.com>
Date: Sat, 25 Nov 2023 18:46:56 -0800
Subject: [PATCH 1/2] display region description as label and tooltip

---
 src/components/RegionInput.js | 62 ++++++++++++++++++++---------------
 src/end-to-end.test.js        |  6 ++--
 2 files changed, 40 insertions(+), 28 deletions(-)

diff --git a/src/components/RegionInput.js b/src/components/RegionInput.js
index c5b0309c..d88694ca 100644
--- 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="bottom-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={descLabel}
+              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
index b0314eb8..a7f08345 100644
--- 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

From 260778e94f04b8ad17bb98393291de86ce662d6d Mon Sep 17 00:00:00 2001
From: ducku <dchung612@gmail.com>
Date: Sat, 2 Dec 2023 13:02:44 -0800
Subject: [PATCH 2/2] revert region label, move tooltip position

---
 src/components/RegionInput.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/RegionInput.js b/src/components/RegionInput.js
index d88694ca..fc040154 100644
--- a/src/components/RegionInput.js
+++ b/src/components/RegionInput.js
@@ -48,7 +48,7 @@ export const RegionInput = ({
 
   return (
     <>
-      <Tooltip title={descLabel} placement="bottom-start">
+      <Tooltip title={descLabel} placement="top-start">
         <Autocomplete
           disablePortal
           freeSolo // Allows custom input outside of the options
@@ -66,7 +66,7 @@ export const RegionInput = ({
           renderInput={(params) => (
             <TextField
               {...params}
-              label={descLabel}
+              label={"Region"}
               name="Region Input"
               inputProps={{
                 ...params.inputProps,