diff --git a/src/components/HeaderForm.js b/src/components/HeaderForm.js
index 6674f440..8c094cab 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
)}
+ {displayDescription ?
+
+ {"Region Description: "}
+ {this.state.desc}
+
+ : null }
diff --git a/src/components/RegionInput.js b/src/components/RegionInput.js
index 265e14e3..692a14a2 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
diff --git a/src/components/RegionInput.test.js b/src/components/RegionInput.test.js
index 93dbf5f3..65f3a602 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 36f24d2f..1c269bff 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