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.

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

Issues/247 Remove Seperation of Datapath and Filename in Requests #339

Merged
merged 6 commits into from
Sep 27, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import Demo, {props as P} from 'react-demo'
// See https://github.com/rpominov/react-demo for how to make a demo

import SelectionDropdown from "./SelectionDropdown";
import BedFileDropdown from "./BedFileDropdown";

// We want to two-way-bind the demo region prop so we use advanced mode and pass the render function.
export default (<Demo
Expand All @@ -17,7 +17,7 @@ export default (<Demo
(props, update) => {
// We need to render the component under test using the props in props, and
// call update when the component wants to adjust the props.
return <SelectionDropdown {...props} onChange={(fakeEvent) => {
return <BedFileDropdown {...props} onChange={(fakeEvent) => {
// Bind new value back up to value.
// Remember: we get a fake event object with a "target" that has an "id" and a "value"
update({value: fakeEvent.target.value})
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ import CreatableSelect from 'react-select/creatable';
* // Here e is {"target": {"id": "box1", "value": "b"}}
* }}>
*/
export class SelectionDropdown extends Component {
export class BedFileDropdown extends Component {
render() {
// Tweaks to the default react-select styles so that it'll look good with tube maps.
const styles = {
Expand Down Expand Up @@ -49,8 +49,13 @@ export class SelectionDropdown extends Component {
}),
};

function getFilename(fullPath) {
const segments = fullPath.split("/");
return segments[segments.length - 1];
}

const dropdownOptions = this.props.options.map((option) => ({
label: option,
label: getFilename(option),
value: option,
}));

Expand All @@ -73,19 +78,22 @@ export class SelectionDropdown extends Component {
inputId={this.props.inputId}
className={this.props.className}
value={
dropdownOptions.find((option) => option.value === this.props.value) || {label: this.props.value , value: this.props.value}
dropdownOptions.find((option) => option.value === this.props.value) || {label: getFilename(this.props.value) , value: this.props.value}
}
styles={styles}
isSearchable={true}
onChange={onChange}
options={dropdownOptions}
getOptionValue={(o) => {
return o["value"];
}}
openMenuOnClick={dropdownOptions.length < 2000}
/>
);
}
}

SelectionDropdown.propTypes = {
BedFileDropdown.propTypes = {
id: PropTypes.string,
inputId: PropTypes.string,
className: PropTypes.string,
Expand All @@ -94,11 +102,11 @@ SelectionDropdown.propTypes = {
options: PropTypes.array.isRequired,
};

SelectionDropdown.defaultProps = {
BedFileDropdown.defaultProps = {
id: undefined,
inputId: undefined,
className: undefined,
value: undefined,
};

export default SelectionDropdown;
export default BedFileDropdown;
40 changes: 16 additions & 24 deletions src/components/HeaderForm.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,10 @@ import FileUploadFormRow from "./FileUploadFormRow";
import ExampleSelectButtons from "./ExampleSelectButtons";
import RegionInput from "./RegionInput";
import TrackPicker from "./TrackPicker";
import SelectionDropdown from "./SelectionDropdown";
import BedFileDropdown from "./BedFileDropdown";
import { parseRegion, stringifyRegion } from "../common.mjs";


// See src/Types.ts

const DATA_SOURCES = config.DATA_SOURCES;
Expand Down Expand Up @@ -47,7 +48,6 @@ const CLEAR_STATE = {

tracks: {},
bedFile: undefined,
dataPath: undefined,
region: "",
name: undefined,

Expand Down Expand Up @@ -187,29 +187,26 @@ class HeaderForm extends Component {
);
}
}
DATA_NAMES = DATA_SOURCES.map((source) => source.name);

initState = () => {
// Populate state with either viewTarget or the first example
let ds = this.props.defaultViewTarget ?? DATA_SOURCES[0];
const bedSelect = ds.bedFile ? ds.bedFile : "none";
const dataPath = ds.dataPath;
if (bedSelect !== "none") {
this.getBedRegions(bedSelect, dataPath);
this.getBedRegions(bedSelect);
}
for (const key in ds.tracks) {
if (ds.tracks[key].trackType === fileTypes.GRAPH) {
// Load the paths for any graph tracks
console.log("Get path names for track: ", ds.tracks[key]);
this.getPathNames(ds.tracks[key].trackFile, dataPath);
this.getPathNames(ds.tracks[key].trackFile);
}
}
this.setState((state) => {
const stateVals = {
tracks: ds.tracks,
bedFile: ds.bedFile,
bedSelect: bedSelect,
dataPath: dataPath,
region: ds.region,
dataType: ds.dataType,
name: ds.name,
Expand Down Expand Up @@ -310,20 +307,20 @@ class HeaderForm extends Component {
} else {
json.bedFiles.unshift("none");

if (this.state.dataPath === "mounted") {
if (this.state.dataType === dataTypes.MOUNTED_FILES) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we rename MOUNTED_FILES to maybe CUSTOM?

this.setState((state) => {
const bedSelect = json.bedFiles.includes(state.bedSelect)
? state.bedSelect
: "none";
if (bedSelect !== "none") {
this.getBedRegions(bedSelect, "mounted");
this.getBedRegions(bedSelect);
}
for (const key in state.tracks) {
if (state.tracks[key].trackType === fileTypes.GRAPH) {
// Load the paths for any graph tracks.
// TODO: Do we need to do this now?
console.log("Get path names for track: ", state.tracks[key]);
this.getPathNames(state.tracks[key].trackFile, "mounted");
this.getPathNames(state.tracks[key].trackFile);
}
}
return {
Expand All @@ -349,7 +346,7 @@ class HeaderForm extends Component {
}
};

getBedRegions = async (bedFile, dataPath) => {
getBedRegions = async (bedFile) => {
this.setState({ error: null });
try {
const json = await fetchAndParse(`${this.props.apiUrl}/getBedRegions`, {
Expand All @@ -358,7 +355,7 @@ class HeaderForm extends Component {
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ bedFile, dataPath }),
body: JSON.stringify({ bedFile }),
});
// We need to do all our parsing here, if we expect the catch to catch errors.
if (!json.bedRegions || !(json.bedRegions["desc"] instanceof Array)) {
Expand Down Expand Up @@ -386,7 +383,7 @@ class HeaderForm extends Component {
});
};

getPathNames = async (graphFile, dataPath) => {
getPathNames = async (graphFile) => {
this.setState({ error: null });
try {
const json = await fetchAndParse(`${this.props.apiUrl}/getPathNames`, {
Expand All @@ -395,7 +392,7 @@ class HeaderForm extends Component {
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ graphFile, dataPath }),
body: JSON.stringify({ graphFile }),
});
// We need to do all our parsing here, if we expect the catch to catch errors.
let pathNames = json.pathNames;
Expand All @@ -421,7 +418,6 @@ class HeaderForm extends Component {
if (value === dataTypes.FILE_UPLOAD) {
const newState = {
...CLEAR_STATE,
dataPath: "upload",
dataType: dataTypes.FILE_UPLOAD,
error: this.state.error,
};
Expand All @@ -433,7 +429,6 @@ class HeaderForm extends Component {
bedFile: "none",
// not sure why we would like to keep the previous selection when changing data sources. What I know is it creates a bug for the regions, where the tubemap tries to read the previous bedFile (e.g. defaulted to example 1), can't find it and raises an error
// bedFile: state.bedSelect,
dataPath: "mounted",
dataType: dataTypes.MOUNTED_FILES,
};
});
Expand All @@ -445,10 +440,9 @@ class HeaderForm extends Component {
// Find data source whose name matches selection
DATA_SOURCES.forEach((ds) => {
if (ds.name === value) {
let dataPath = ds.dataPath;
let bedSelect = "none";
if (ds.bedFile) {
this.getBedRegions(ds.bedFile, dataPath);
this.getBedRegions(ds.bedFile);
bedSelect = ds.bedFile;
} else {
// Without bedFile, we have no regions
Expand All @@ -458,14 +452,13 @@ class HeaderForm extends Component {
if (ds.tracks[key].trackType === fileTypes.GRAPH) {
// Load the paths for any graph tracks.
console.log("Get path names for track: ", ds.tracks[key]);
this.getPathNames(ds.tracks[key].trackFile, dataPath);
this.getPathNames(ds.tracks[key].trackFile);
}
}
this.setState({
tracks: ds.tracks,
bedFile: ds.bedFile,
bedSelect: bedSelect,
dataPath: dataPath,
region: ds.region,
dataType: dataTypes.BUILT_IN,
name: ds.name,
Expand All @@ -480,7 +473,6 @@ class HeaderForm extends Component {
bedFile: this.state.bedFile,
name: this.state.name,
region: this.state.region,
dataPath: this.state.dataPath,
dataType: this.state.dataType,
});

Expand Down Expand Up @@ -558,7 +550,7 @@ class HeaderForm extends Component {
// update path names
const graphFile = this.getTrackFile(newTracks, fileTypes.GRAPH, 0);
if (graphFile && graphFile !== "none"){
this.getPathNames(graphFile, this.state.dataPath);
this.getPathNames(graphFile);
}

};
Expand All @@ -569,7 +561,7 @@ class HeaderForm extends Component {
this.setState({ [id]: value });

if (value !== "none") {
this.getBedRegions(value, this.state.dataPath);
this.getBedRegions(value);
}
this.setState({ bedFile: value });

Expand Down Expand Up @@ -746,7 +738,7 @@ class HeaderForm extends Component {
BED file:
</Label>
&nbsp;
<SelectionDropdown
<BedFileDropdown
className="customDataMounted dropdown mb-2 mr-sm-4 mb-sm-0"
id="bedSelect"
inputId="bedSelectInput"
Expand Down
34 changes: 0 additions & 34 deletions src/components/PathNamesFormRow.js

This file was deleted.

17 changes: 12 additions & 5 deletions src/components/TrackFilePicker.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
import PropTypes from "prop-types";
import Select from "react-select";
import React from "react";



/*
* A selection dropdown component that select files.
Expand All @@ -23,12 +26,16 @@ export const TrackFilePicker = ({
}) => {


function onChange(option) {
function mountedOnChange(option) {
// update parent state
value = option.value;
handleInputChange(option.value);
}

function getFilename(fullPath) {
const segments = fullPath.split("/");
return segments[segments.length - 1];
}

const fileOptions = []
// find all file options matching the specified file type
Expand All @@ -40,7 +47,7 @@ export const TrackFilePicker = ({

// takes in an array of options and maps them into a format <Select> takes
const dropDownOptions = fileOptions.map((option) => ({
label: option,
label: getFilename(option),
value: option,
}));

Expand All @@ -51,15 +58,15 @@ export const TrackFilePicker = ({
<div data-testid={testID}>
<Select
options={dropDownOptions}
value={{label: value, value: value}}
value={{label: getFilename(value), value: value}}
// Identical-looking object literals will compare unequal, so we
// need to provide a way to turn them into strings so that
// `value` can be matched up with the corresponding item in
// `options`.
getOptionValue={(o) => {
return o["label"];
return o["value"];
}}
onChange={onChange}
onChange={mountedOnChange}
autoComplete="on"
className={className}
/>
Expand Down
Loading
Loading