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