Skip to content

Commit 2ac1fb3

Browse files
authored
Merge pull request #380 from ducku/issues/378-highlightable-region-description
Implement highlightable description
2 parents bc8040f + d63954e commit 2ac1fb3

File tree

4 files changed

+22
-9
lines changed

4 files changed

+22
-9
lines changed

src/components/HeaderForm.js

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import ExampleSelectButtons from "./ExampleSelectButtons";
1010
import RegionInput from "./RegionInput";
1111
import TrackPicker from "./TrackPicker";
1212
import BedFileDropdown from "./BedFileDropdown";
13+
import FormHelperText from "@mui/material/FormHelperText";
1314
import { parseRegion, stringifyRegion, isEmpty, readsExist } from "../common.mjs";
1415

1516

@@ -38,6 +39,9 @@ const CLEAR_STATE = {
3839
// File: The file name actually used (or undefined)
3940
bedSelect: "none",
4041

42+
// Description for the selected region, is not displayed when empty
43+
desc: "",
44+
4145
// This tracks several arrays of BED region data, stored by data type, with
4246
// one entry in each array per region.
4347
regionInfo: {},
@@ -519,7 +523,10 @@ class HeaderForm extends Component {
519523
// Update current track if the new tracks are valid
520524
// Otherwise check if the current bed file is a url, and if tracks can be fetched from said url
521525
// Tracks remain unchanged if neither condition is met
522-
handleRegionChange = async (value) => {
526+
handleRegionChange = async (value, desc) => {
527+
// Update region description
528+
this.setState({ desc: desc });
529+
523530
// After user selects a region name or coordinates,
524531
// update path, region, and associated tracks(if applicable)
525532

@@ -761,6 +768,7 @@ toggleSimplify = () => {
761768
const customFilesFlag = this.state.dataType === dataTypes.CUSTOM_FILES;
762769
const examplesFlag = this.state.dataType === dataTypes.EXAMPLES;
763770
const viewTargetHasChange = !viewTargetsEqual(this.getNextViewTarget(), this.props.getCurrentViewTarget());
771+
const displayDescription = this.state.desc;
764772

765773

766774
console.log(
@@ -883,6 +891,12 @@ toggleSimplify = () => {
883891
!customFilesFlag && DataPositionFormRowComponent
884892
)}
885893
</Row>
894+
{displayDescription ?
895+
<div style={{marginTop: "10px"}}>
896+
<FormHelperText> {"Region Description: "} </FormHelperText>
897+
<FormHelperText style={{fontWeight: "bold"}}>{this.state.desc}</FormHelperText>
898+
</div>
899+
: null }
886900
</Col>
887901
</Row>
888902
</Container>

src/components/RegionInput.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -62,11 +62,11 @@ export const RegionInput = ({
6262
onInputChange={(event, newInput) => {
6363
let regionValue = newInput;
6464
const regionObject = displayRegions.find((option) => option.label === newInput);
65-
// IF input is selected from one of the options
65+
// If input is selected from one of the options
6666
if (regionObject) {
6767
regionValue = regionObject.value
6868
}
69-
handleRegionChange(regionValue);
69+
handleRegionChange(regionValue, regionToDesc.get(regionValue));
7070
}}
7171

7272
options={displayRegions}
@@ -108,4 +108,4 @@ RegionInput.propTypes = {
108108
}),
109109
};
110110

111-
export default RegionInput;
111+
export default RegionInput;

src/components/RegionInput.test.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -60,5 +60,5 @@ test("it calls handleRegionChange when region is changed with new region", async
6060
await userEvent.clear(input);
6161
await userEvent.type(input, NEW_REGION);
6262

63-
expect(handleRegionChangeMock).toHaveBeenLastCalledWith(NEW_REGION);
64-
});
63+
expect(handleRegionChangeMock).toHaveBeenLastCalledWith(NEW_REGION, undefined);
64+
});

src/end-to-end.test.js

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ import App from "./App";
2626

2727
const getRegionInput = () => {
2828
// Helper function to select the Region input box
29-
return screen.getByTestId("autocomplete").querySelector("input");
29+
return screen.getByRole("combobox", { name: /Region/i });
3030
};
3131
// This holds the running server for the duration of each test.
3232
let serverState = undefined;
@@ -216,7 +216,6 @@ describe("When we wait for it to load", () => {
216216
await act(async () => {
217217
userEvent.click(getRegionInput());
218218
});
219-
220219
// Make sure that option in RegionInput dropdown (17_1_100) is visible
221220
expect(screen.getByText("17:1-100 17_1_100")).toBeInTheDocument();
222221
});
@@ -534,4 +533,4 @@ it("can accept uploaded files", async () => {
534533

535534
console.log("Test over");
536535
}, 50000); // We need to allow a long time for the slow vg test machines.
537-
// 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?
536+
// 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?

0 commit comments

Comments
 (0)