Repository: vgteam/sequenceTubeMap (js)

Issue:
Improve region dropdown display for BED regions
- [ ] Right now, BED regions with no descriptions appear twice in the dropdown, once as coordinates and once as "Region {coordinates}". This is confusing. We should not display dropdown options for these auto-generated descriptions.

- [ ] For regions with manually set descriptions, the coordinates and the description also appear as multiple entries in the dropdown, although they are semantically one region. We should display them as a single item if possible, maybe by using some sort of structured item support in the control, or maybe by concatenating them together and using the ability of the dropdown to display a label while holding a distinct value.

- [ ] There are `none:` entries in the region dropdown; they should be eliminated.

Pull request:
Improve Region Dropdown Selections
Use label system to display both path with region and description while ignoring description upon onChange
![Region_Dropdown](https://github.com/vgteam/sequenceTubeMap/assets/23585956/14e7d596-6e91-4b27-86f4-42cd8116096b)

Closes #362 

Patch:
diff --git a/src/components/HeaderForm.js b/src/components/HeaderForm.js
index 2f40872..6674f44 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 fc04015..265e14e 100644
--- 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}


Test patch:
diff --git a/src/end-to-end.test.js b/src/end-to-end.test.js
index bee3457..36f24d2 100644
--- 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);
     });