Repository: vgteam/sequenceTubeMap (js)

Issue:
Move region description tooltips to highlightable text on the page
Right now we display region descriptions as tooltips. But the Lancet folks want to put e.g. gene names in there which the user might want to copy-paste. So we should put the region description, when set, as text on the page, maybe between the buttons and the main view. If there isn't a description, we shouldn't show an empty space.

Pull request:
Implement highlightable description
Puts Description, if available, as text below Go button.

Closes #378 

Patch:
diff --git a/src/components/HeaderForm.js b/src/components/HeaderForm.js
index 6674f44..8c094ca 100644
--- a/src/components/HeaderForm.js
+++ b/src/components/HeaderForm.js
@@ -10,6 +10,7 @@ import ExampleSelectButtons from "./ExampleSelectButtons";
 import RegionInput from "./RegionInput";
 import TrackPicker from "./TrackPicker";
 import BedFileDropdown from "./BedFileDropdown";
+import FormHelperText from "@mui/material/FormHelperText";
 import { parseRegion, stringifyRegion, isEmpty, readsExist } from "../common.mjs";
 
 
@@ -38,6 +39,9 @@ const CLEAR_STATE = {
   // File: The file name actually used (or undefined)
   bedSelect: "none",
 
+  // Description for the selected region, is not displayed when empty
+  desc: "",
+
   // This tracks several arrays of BED region data, stored by data type, with
   // one entry in each array per region.
   regionInfo: {},
@@ -519,7 +523,10 @@ class HeaderForm extends Component {
   // Update current track if the new tracks are valid
   // Otherwise check if the current bed file is a url, and if tracks can be fetched from said url
   // Tracks remain unchanged if neither condition is met
-  handleRegionChange = async (value) => {
+  handleRegionChange = async (value, desc) => {
+    // Update region description
+    this.setState({ desc: desc });
+
     // After user selects a region name or coordinates,
     // update path, region, and associated tracks(if applicable)
 
@@ -761,6 +768,7 @@ toggleSimplify = () => {
     const customFilesFlag = this.state.dataType === dataTypes.CUSTOM_FILES;
     const examplesFlag = this.state.dataType === dataTypes.EXAMPLES;
     const viewTargetHasChange = !viewTargetsEqual(this.getNextViewTarget(), this.props.getCurrentViewTarget());
+    const displayDescription = this.state.desc;
 
 
     console.log(
@@ -883,6 +891,12 @@ toggleSimplify = () => {
                   !customFilesFlag && DataPositionFormRowComponent 
                 )}
               </Row>
+              {displayDescription ?
+                <div style={{marginTop: "10px"}}>
+                  <FormHelperText> {"Region Description: "} </FormHelperText>
+                  <FormHelperText style={{fontWeight: "bold"}}>{this.state.desc}</FormHelperText>
+                </div> 
+               : null }
             </Col>
           </Row>
         </Container>
diff --git a/src/components/RegionInput.js b/src/components/RegionInput.js
index 265e14e..692a14a 100644
--- a/src/components/RegionInput.js
+++ b/src/components/RegionInput.js
@@ -62,11 +62,11 @@ export const RegionInput = ({
           onInputChange={(event, newInput) => {
             let regionValue = newInput;
             const regionObject = displayRegions.find((option) => option.label === newInput);
-            // IF input is selected from one of the options
+            // If input is selected from one of the options
             if (regionObject) {
               regionValue = regionObject.value
             }
-            handleRegionChange(regionValue);
+            handleRegionChange(regionValue, regionToDesc.get(regionValue));
           }}
 
           options={displayRegions}
@@ -108,4 +108,4 @@ RegionInput.propTypes = {
   }),
 };
 
-export default RegionInput;
+export default RegionInput;
\ No newline at end of file


Test patch:
diff --git a/src/components/RegionInput.test.js b/src/components/RegionInput.test.js
index 93dbf5f..65f3a60 100644
--- a/src/components/RegionInput.test.js
+++ b/src/components/RegionInput.test.js
@@ -60,5 +60,5 @@ test("it calls handleRegionChange when region is changed with new region", async
   await userEvent.clear(input);
   await userEvent.type(input, NEW_REGION);
 
-  expect(handleRegionChangeMock).toHaveBeenLastCalledWith(NEW_REGION);
-});
+  expect(handleRegionChangeMock).toHaveBeenLastCalledWith(NEW_REGION, undefined);
+});
\ No newline at end of file
diff --git a/src/end-to-end.test.js b/src/end-to-end.test.js
index 36f24d2..1c269bf 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.getByTestId("autocomplete").querySelector("input");
+  return screen.getByRole("combobox", { name: /Region/i });
 };
 // This holds the running server for the duration of each test.
 let serverState = undefined;
@@ -216,7 +216,6 @@ 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 17_1_100")).toBeInTheDocument();
   });
@@ -534,4 +533,4 @@ it("can accept uploaded files", async () => {
 
   console.log("Test over");
 }, 50000); // We need to allow a long time for the slow vg test machines.
-// TODO: Is this slow because of unnecessary re-renders caused by the new color schemes taking effect and being rendered with the old data, before the new data downloads?
+// TODO: Is this slow because of unnecessary re-renders caused by the new color schemes taking effect and being rendered with the old data, before the new data downloads?
\ No newline at end of file