Merge pull request #380 from ducku/issues/378-highlightable-region-de…

…scription

Implement highlightable description

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>

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;

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);
+});

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?