From 85842e3d6a4b54771c4b53c372d5375549b666f8 Mon Sep 17 00:00:00 2001
From: ducku <dchung612@gmail.com>
Date: Sat, 2 Dec 2023 15:36:31 -0800
Subject: [PATCH 1/2] implement label system for region dropdown

---
 src/components/RegionInput.js | 81 +++++++++++++++++++++--------------
 src/end-to-end.test.js        |  4 +-
 2 files changed, 51 insertions(+), 34 deletions(-)

diff --git a/src/components/RegionInput.js b/src/components/RegionInput.js
index c5b0309c..ebe396df 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";
@@ -19,52 +20,68 @@ export const RegionInput = ({
   // Generate autocomplete options for regions from regionInfo
   // Add : to pathNames
   console.log("rendering with pathnames: ", pathNames);
-  const pathNamesColon = pathNames.map((name) => name + ":");
+  const pathNamesColon = pathNames.map((name) => {
+    return {label: name + ":", value: 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({
+        label: pathWithRegion + " " + regionInfo.desc[index],
+        value: pathWithRegion
+      });
+      regionToDesc.set(pathWithRegion, regionInfo.desc[index]);
     }
-
-    // Add descriptions
-    pathsWithRegion.push(...regionInfo["desc"]);
-
   }
 
   // Autocomplete selectable options
-  const displayRegions = [...pathsWithRegion, ...pathNamesColon];
+  const displayRegions = [...pathsWithRegion, ...pathNamesColon].filter(option => option.label !== "none:");
+
+  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.label || option.toString()}
+          value={region}
+          inputValue={region}
+          data-testid="autocomplete"
+          id="regionInput" 
 
-        onInputChange={(event, newInputValue) => {
-          handleRegionChange(newInputValue);
-        }}
+          onInputChange={(event, newInput) => {
+            let regionValue = newInput;
+            const regionObject = displayRegions.find((option) => option.label === newInput);
+            // IF input is selected from one of the options
+            if (regionObject) {
+              regionValue = regionObject.value
+            }
+            handleRegionChange(regionValue);
+          }}
 
-        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
index b0314eb8..ef0f61a3 100644
--- a/src/end-to-end.test.js
+++ b/src/end-to-end.test.js
@@ -217,7 +217,7 @@ describe("When we wait for it to load", () => {
       userEvent.click(getRegionInput());
     });
     // Make sure that option in RegionInput dropdown (17_1_100) is visible
-    expect(screen.getByText("17_1_100")).toBeInTheDocument();
+    expect(screen.getByText("17:1-100 17_1_100")).toBeInTheDocument();
   });
   it("the region options in autocomplete are cleared after selecting new data", async () => {
     // Input data dropdown
@@ -230,7 +230,7 @@ describe("When we wait for it to load", () => {
       userEvent.click(getRegionInput());
     });
     // Make sure that old option in RegionInput dropdown (17_...) is not visible
-    expect(screen.queryByText("17_1_100")).not.toBeInTheDocument();
+    expect(screen.queryByText("1-100 17_1_100")).not.toBeInTheDocument();
     await act(async () => {
       userEvent.click(regionInput);
     });

From f56260526a84f7040169d1ec9891357c7ec885cf Mon Sep 17 00:00:00 2001
From: ducku <dchung612@gmail.com>
Date: Sat, 9 Dec 2023 16:13:12 -0800
Subject: [PATCH 2/2] remove none as default pathnames

---
 src/components/HeaderForm.js  | 2 +-
 src/components/RegionInput.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/HeaderForm.js b/src/components/HeaderForm.js
index 3f4d6f09..41401789 100644
--- a/src/components/HeaderForm.js
+++ b/src/components/HeaderForm.js
@@ -42,7 +42,7 @@ const CLEAR_STATE = {
   // one entry in each array per region.
   regionInfo: {},
 
-  pathNames: ["none"],
+  pathNames: [],
 
   tracks: {},
   bedFile: undefined,
diff --git a/src/components/RegionInput.js b/src/components/RegionInput.js
index ebe396df..cddd48a9 100644
--- a/src/components/RegionInput.js
+++ b/src/components/RegionInput.js
@@ -40,7 +40,7 @@ export const RegionInput = ({
   }
 
   // Autocomplete selectable options
-  const displayRegions = [...pathsWithRegion, ...pathNamesColon].filter(option => option.label !== "none:");
+  const displayRegions = [...pathsWithRegion, ...pathNamesColon];
 
   let descLabel = "Region";
   if (regionToDesc.get(region)) {