Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Display Region Description as Label and Tooltip #369

Merged
merged 2 commits into from
Dec 4, 2023
Merged

Display Region Description as Label and Tooltip #369

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b99374d
display region description as label and tooltip
ducku Nov 26, 2023
260778e
revert region label, move tooltip position
ducku Dec 2, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
62 changes: 36 additions & 26 deletions src/components/RegionInput.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import PropTypes from "prop-types";
import TextField from "@mui/material/TextField";
import Autocomplete from "@mui/material/Autocomplete";
import FormHelperText from "@mui/material/FormHelperText";
import Tooltip from "@mui/material/Tooltip";
import "../config-client.js";
import "../config-global.mjs";
import { isEmpty } from "../common.mjs";
Expand All @@ -22,12 +23,14 @@ export const RegionInput = ({
const pathNamesColon = pathNames.map((name) => name + ":");
const pathsWithRegion = [];

const regionToDesc = new Map();

if (regionInfo && !isEmpty(regionInfo)) {
// Stitch path name + region start and end
for (const [index, path] of regionInfo["chr"].entries()) {
pathsWithRegion.push(
path + ":" + regionInfo.start[index] + "-" + regionInfo.end[index]
);
const pathWithRegion = path + ":" + regionInfo.start[index] + "-" + regionInfo.end[index];
pathsWithRegion.push(pathWithRegion);
regionToDesc.set(pathWithRegion, regionInfo.desc[index]);
}

// Add descriptions
Expand All @@ -38,33 +41,40 @@ export const RegionInput = ({
// Autocomplete selectable options
const displayRegions = [...pathsWithRegion, ...pathNamesColon];

let descLabel = "Region";
if (regionToDesc.get(region)) {
descLabel = regionToDesc.get(region);
}

return (
<>
<Autocomplete
disablePortal
freeSolo // Allows custom input outside of the options
getOptionLabel={(option) => option.title || option.toString()}
value={region}
inputValue={region}
data-testid="autocomplete"
id="regionInput"
<Tooltip title={descLabel} placement="top-start">
<Autocomplete
disablePortal
freeSolo // Allows custom input outside of the options
getOptionLabel={(option) => option.title || option.toString()}
value={region}
inputValue={region}
data-testid="autocomplete"
id="regionInput"

onInputChange={(event, newInputValue) => {
handleRegionChange(newInputValue);
}}
onInputChange={(event, newInputValue) => {
handleRegionChange(newInputValue);
}}

options={displayRegions}
renderInput={(params) => (
<TextField
{...params}
label="Region"
name="Region Input"
inputProps={{
...params.inputProps,
}}
/>
)}
/>
options={displayRegions}
renderInput={(params) => (
<TextField
{...params}
label={"Region"}
name="Region Input"
inputProps={{
...params.inputProps,
}}
/>
)}
/>
</Tooltip>
<FormHelperText id="comboBoxHelperText">
{`
Input a data segment to select with format <path>:<regionRange> and hit 'Go'. See ? for more information.
Expand Down
6 changes: 4 additions & 2 deletions src/end-to-end.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ import App from "./App";

const getRegionInput = () => {
// Helper function to select the Region input box
return screen.getByRole("combobox", { name: /Region/i });
return screen.getByTestId("autocomplete").querySelector("input");
};
// This holds the running server for the duration of each test.
let serverState = undefined;
Expand Down Expand Up @@ -216,8 +216,10 @@ 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")).toBeInTheDocument();
const text = screen.getAllByText("17_1_100");
expect(text[0]).toBeInTheDocument();
});
it("the region options in autocomplete are cleared after selecting new data", async () => {
// Input data dropdown
Expand Down
Loading