Merge pull request #376 from ducku/issues/362-improve-region-dropdown…

…-display Improve Region Dropdown Selections
vgteam · Dec 11, 2023 · bc8040f · bc8040f
2 parents 050b962 + c6d76e0
commit bc8040f
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 13 deletions.
diff --git 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
@@ -20,7 +20,9 @@ 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();
@@ -29,13 +31,12 @@ export const RegionInput = ({
     // Stitch path name + region start and end
     for (const [index, path] of regionInfo["chr"].entries()) {
       const pathWithRegion = path + ":" + regionInfo.start[index] + "-" + regionInfo.end[index];
-      pathsWithRegion.push(pathWithRegion);
+      pathsWithRegion.push({
+        label: pathWithRegion + " " + regionInfo.desc[index],
+        value: pathWithRegion
+      });
       regionToDesc.set(pathWithRegion, regionInfo.desc[index]);
     }
-
-    // Add descriptions
-    pathsWithRegion.push(...regionInfo["desc"]);
-
   }
 
   // Autocomplete selectable options
@@ -52,14 +53,20 @@ export const RegionInput = ({
         <Autocomplete
           disablePortal
           freeSolo // Allows custom input outside of the options
-          getOptionLabel={(option) => option.title || option.toString()}
+          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}

diff --git a/src/end-to-end.test.js b/src/end-to-end.test.js
@@ -218,8 +218,7 @@ describe("When we wait for it to load", () => {
     });
 
     // Make sure that option in RegionInput dropdown (17_1_100) is visible
-    const text = screen.getAllByText("17_1_100");
-    expect(text[0]).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
@@ -232,7 +231,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);
     });