lidaof · lidaof · May 21, 2021 · Feb 2, 2021 · Feb 11, 2021 · Feb 16, 2021
diff --git a/backend/genomeData/canFam2/canFam2.refgene.bed b/backend/genomeData/canFam2/canFam2.refgene.bed
diff --git a/backend/genomeData/canFam3/canFam3.refgene.bed b/backend/genomeData/canFam3/canFam3.refgene.bed
diff --git a/backend/genomeData/monDom5/monDom5.refgene.bed b/backend/genomeData/monDom5/monDom5.refgene.bed
diff --git a/backend/genomeData/oryCun2/oryCun2.refgene.bed b/backend/genomeData/oryCun2/oryCun2.refgene.bed
diff --git a/backend/genomeData/rheMac2/rheMac2.refgene.bed b/backend/genomeData/rheMac2/rheMac2.refgene.bed
diff --git a/backend/genomeData/rn4/rn4.refgene.bed b/backend/genomeData/rn4/rn4.refgene.bed
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -17,7 +17,6 @@
         "deploy": "aws s3 sync ~/eg-react/frontend/build/ s3://epigenomegateway.org/browser/ --delete",
         "build-pkg": "rm -rf dist && cross-env NODE_ENV=production babel src/ --out-dir dist --extensions \".ts,.tsx,.js,.jsx\" --copy-files --ignore __tests__,spec.js,test.js,__snapshots__,umd,build,public,node_modules"
     },
-    "dependencies": {},
     "peerDependencies": {
         "prop-types": "^15.6.0",
         "react": "^16.3.0",

diff --git a/frontend/src/App.js b/frontend/src/App.js
@@ -16,7 +16,8 @@ import { RegionExpander } from "./model/RegionExpander";
 import { Footer } from "./components/Footer";
 import { SessionUI } from "./components/SessionUI";
 import { Offline } from "react-detect-offline";
-import { HELP_LINKS } from "./util";
+import { HELP_LINKS, getSecondaryGenomes } from "./util";
+import { getGenomeConfig } from './model/genomes/allGenomes';
 
 import "./App.css";
 
@@ -80,19 +81,19 @@ class App extends React.PureComponent {
     }
 
     componentDidMount() {
-        if (this.props.genomeConfig && this.props.genomeConfig.publicHubList) {
-            this.setState({
-                publicHubs: this.props.genomeConfig.publicHubList.slice(),
-            });
+        if (this.props.genomeConfig) {
+            this.updateOtherPublicHubs(this.props.tracks);
         }
         this.initializeMetaSets(this.props.tracks);
     }
 
     UNSAFE_componentWillReceiveProps(nextProps) {
         if (nextProps.genomeConfig && nextProps.genomeConfig !== this.props.genomeConfig) {
             if (nextProps.genomeConfig.publicHubList) {
+                const publicHubs = nextProps.genomeConfig.publicHubList.slice();
+                publicHubs.map(x => x.genome = nextProps.genomeConfig.genome.getName());
                 this.setState({
-                    publicHubs: nextProps.genomeConfig.publicHubList.slice(),
+                    publicHubs: publicHubs,
                 });
             } else {
                 // when switch genome, need reset hub as well
@@ -175,11 +176,13 @@ class App extends React.PureComponent {
     addTracks(tracks) {
         const newTracks = this.props.tracks.concat(tracks);
         this.props.onTracksChanged(newTracks);
+        this.updateOtherPublicHubs(newTracks);
     }
 
     removeTrack(indexToRemove) {
         let newTracks = this.props.tracks.filter((track, index) => index !== indexToRemove);
         this.props.onTracksChanged(newTracks);
+        this.updateOtherPublicHubs(newTracks);
     }
 
     // toggleNavigator = () => {
@@ -224,6 +227,22 @@ class App extends React.PureComponent {
         return grouped;
     };
 
+    updateOtherPublicHubs = (tracks) => {
+        const { genomeConfig } = this.props;
+        const secondaryGenomes = getSecondaryGenomes(genomeConfig.genome.getName(), tracks);
+        const secondConfigs = secondaryGenomes.map(g => getGenomeConfig(g));
+        secondConfigs.filter(x => x.publicHubList).map(x => x.publicHubList.map(y => y.genome = x.genome.getName()));
+        let secondHubList = secondConfigs.filter(x => x.publicHubList).reduce((secondHubList, x) => secondHubList.concat(x.publicHubList),[]);
+        if (genomeConfig.publicHubList) {
+            const publicHubs = genomeConfig.publicHubList.slice();
+            publicHubs.map(x => x.genome = genomeConfig.genome.getName());
+            secondHubList = publicHubs.concat(secondHubList);
+        }
+        this.setState({
+            publicHubs: secondHubList,
+        });
+    }
+
     render() {
         const {
             genomeConfig,

diff --git a/frontend/src/AppState.ts b/frontend/src/AppState.ts
@@ -422,7 +422,7 @@ function getNextState(prevState: AppState, action: AppAction): AppState {
 async function getTracksFromHubURL(url: string): Promise<any> {
     const json = await new Json5Fetcher().get(url);
     const hubParser = new DataHubParser();
-    return await hubParser.getTracksInHub(json, "URL hub", false, 0);
+    return await hubParser.getTracksInHub(json, "URL hub", "", false, 0);
 }
 
 /**

diff --git a/frontend/src/components/Nav.js b/frontend/src/components/Nav.js
@@ -310,6 +310,7 @@ class Nav extends React.Component {
                                     customTrackSets={customTrackSets}
                                     addedTrackSets={addedTrackSets}
                                     addTermToMetaSets={addTermToMetaSets}
+                                    genomeConfig={genomeConfig}
                                 />
                             </ModalMenuItem>
                             <ModalMenuItem itemLabel="Local Tracks">

diff --git a/frontend/src/components/trackManagers/CustomHubAdder.js b/frontend/src/components/trackManagers/CustomHubAdder.js
@@ -55,7 +55,7 @@ class RemoteHubAdder extends React.Component {
         const lastSlashIndex = this.state.inputUrl.lastIndexOf("/");
         const hubBase = this.state.inputUrl.substring(0, lastSlashIndex).trimRight("/");
         const parser = new DataHubParser(0);
-        const tracks = await parser.getTracksInHub(json, "Custom hub", false, 0, hubBase);
+        const tracks = await parser.getTracksInHub(json, "Custom hub", "", false, 0, hubBase);
         if (tracks) {
             this.props.onAddTracksToPool(tracks, false);
             const tracksToShow = tracks.filter((track) => track.showOnHubLoad);

diff --git a/frontend/src/components/trackManagers/CustomTrackAdder.js b/frontend/src/components/trackManagers/CustomTrackAdder.js
@@ -4,6 +4,7 @@ import { Tabs, Tab } from "react-bootstrap-tabs";
 import JSON5 from "json5";
 // import { notify } from 'react-notify-toast';
 import TrackModel from "../../model/TrackModel";
+import { getSecondaryGenomes } from '../../util';
 import CustomHubAdder from "./CustomHubAdder";
 import FacetTable from "./FacetTable";
 import { HELP_LINKS } from "../../util";
@@ -65,6 +66,7 @@ class CustomTrackAdder extends React.Component {
         onTracksAdded: PropTypes.func,
         onAddTracksToPool: PropTypes.func,
         addTermToMetaSets: PropTypes.func,
+        genomeConfig: PropTypes.object.isRequired,
         addedTrackSets: PropTypes.instanceOf(Set),
     };
 
@@ -76,6 +78,7 @@ class CustomTrackAdder extends React.Component {
             url: "",
             name: "",
             urlError: "",
+            metadata: {"genome":this.props.genomeConfig.genome.getName()},
             trackAdded: false,
             selectedTabIndex: 0,
             options: null, // custom track options
@@ -112,6 +115,14 @@ class CustomTrackAdder extends React.Component {
         ));
     }
 
+    renderGenomeOptions(allGenomes) {
+        return allGenomes.map(genome => 
+            <option key={genome} value={genome}>
+                {genome}
+            </option>
+        );
+    }
+
     renderButtons() {
         if (this.state.trackAdded) {
             return (
@@ -144,7 +155,10 @@ class CustomTrackAdder extends React.Component {
     };
 
     renderCustomTrackAdder() {
-        const { type, url, name, urlError } = this.state;
+        const { type, url, name, metadata, urlError } = this.state;
+        const primaryGenome = this.props.genomeConfig.genome.getName();
+        var allGenomes = getSecondaryGenomes(primaryGenome, this.props.addedTracks);
+        allGenomes.unshift(primaryGenome);
         return (
             <form>
                 <h1>Add remote track</h1>
@@ -182,6 +196,16 @@ class CustomTrackAdder extends React.Component {
                         onChange={(event) => this.setState({ name: event.target.value })}
                     />
                 </div>
+                <div className="form-group">
+                    <label>genome</label>
+                    <select
+                        className="form-control"
+                        value={metadata.genome}
+                        onChange={(event) => this.setState({ metadata: {genome:event.target.value} })}
+                    >
+                        {this.renderGenomeOptions(allGenomes)}
+                    </select>
+                </div>
                 <TrackOptionsUI onGetOptions={(value) => this.getOptions(value)} />
                 {this.renderButtons()}
             </form>

diff --git a/frontend/src/components/trackManagers/FacetTable.js b/frontend/src/components/trackManagers/FacetTable.js
@@ -24,7 +24,7 @@ class FacetTable extends Component {
         onTracksAdded: PropTypes.func,
         addTermToMetaSets: PropTypes.func,
         addedTrackSets: PropTypes.instanceOf(Set),
-        publicTrackSets: PropTypes.instanceOf(Set),
+        publicTrackSets: PropTypes.instanceOf(Set)
     };
 
     static defaultProps = {
@@ -43,7 +43,7 @@ class FacetTable extends Component {
             rowHeader: "",
             columnHeader: "",
             showModalId: null,
-            metaKeys: [],
+            metaKeys: []
         };
 
         this.toggleHeader = this.toggleHeader.bind(this);

diff --git a/frontend/src/components/trackManagers/HubPane.js b/frontend/src/components/trackManagers/HubPane.js
@@ -57,7 +57,7 @@ class HubPane extends React.PureComponent {
              <HubTable 
                 onHubLoaded={this.props.onAddTracksToPool}
                 onTracksAdded={this.props.onTracksAdded}
-                publicHubs={this.props.publicHubs} 
+                publicHubs={this.props.publicHubs}
                 onHubUpdated={this.props.onHubUpdated}
              />
             {

diff --git a/frontend/src/components/trackManagers/HubTable.js b/frontend/src/components/trackManagers/HubTable.js
@@ -27,6 +27,11 @@ class HubTable extends React.PureComponent {
         this.getAddHubCell = this.getAddHubCell.bind(this);
 
         this.columns = [
+            {
+                Header: "Genome",
+                accessor: "genome",
+                width: 100,
+            },
             {
                 Header: "Collection",
                 accessor: "collection",
@@ -84,6 +89,7 @@ class HubTable extends React.PureComponent {
                 const tracks = await this.hubParser.getTracksInHub(
                     json,
                     hub.name,
+                    hub.genome,
                     hub.oldHubFormat,
                     tracksStartIndex,
                     hubBase
@@ -140,6 +146,7 @@ class HubTable extends React.PureComponent {
                     columns={this.columns}
                     minRows={Math.min(this.props.publicHubs.length, 10)}
                     SubComponent={(row) => {
+                        let genome = row.original.genome;
                         let collectionDetails = publicHubData[row.original.collection] || <i>No details available.</i>;
                         let hubDetails = row.original.description ? (
                             <ObjectAsTable content={row.original.description} />
@@ -148,6 +155,8 @@ class HubTable extends React.PureComponent {
                         );
                         return (
                             <div style={{ padding: "20px" }}>
+                                <h3>Genome</h3>
+                                {genome}
                                 <h3>Collection details</h3>
                                 {collectionDetails}
                                 <h3>Hub details</h3>

diff --git a/frontend/src/components/trackManagers/HubTrackTable.js b/frontend/src/components/trackManagers/HubTrackTable.js
@@ -151,6 +151,12 @@ class HubTrackTable extends React.PureComponent {
 
     const { rowHeader, columnHeader } = this.props;
     let columns = [];
+    columns.push({
+      Header: "Genome",
+      id: "genome",
+      accessor: data => data.getMetadata("genome"),
+      width: 100
+    });
     columns.push({
       Header: "Name",
       accessor: "name"
@@ -159,7 +165,7 @@ class HubTrackTable extends React.PureComponent {
       Header: "Data hub",
       accessor: "datahub"
     });
-    if (rowHeader !== UNUSED_META_KEY) {
+    if (rowHeader !== UNUSED_META_KEY && rowHeader !== "genome") {
       columns.push({
         Header: rowHeader,
         id: rowHeader.toLowerCase(),
@@ -174,7 +180,7 @@ class HubTrackTable extends React.PureComponent {
         headerStyle: { flex: "100 0 auto", overflow: "visible" }
       });
     }
-    if (columnHeader !== UNUSED_META_KEY) {
+    if (columnHeader !== UNUSED_META_KEY && rowHeader !== "genome") {
       columns.push({
         Header: columnHeader,
         id: columnHeader.toLowerCase(),

diff --git a/frontend/src/model/DataHubParser.js b/frontend/src/model/DataHubParser.js
@@ -3,7 +3,7 @@ import sampleDict from './genomes/hg19/samples.json';
 import assayDict from './genomes/hg19/assays.json';
 
 class HubParser {
-    getTracksInHub(parsedJson, hubName, oldHubFormat, tracksStartIndex=0, hubBase="") {
+    getTracksInHub(parsedJson, hubName, hubGenome, oldHubFormat, tracksStartIndex=0, hubBase="") {
         let tracks = [], url, newTrack;
         for (let plainObject of parsedJson.slice(tracksStartIndex)) {
             if (plainObject.url) {
@@ -23,6 +23,9 @@ class HubParser {
                 newTrack = new TrackModel(plainObject);
             }
             newTrack.datahub = hubName;
+            if (!newTrack.metadata.genome && hubGenome !== "") {  // Don't overwrite existing metadata.genome in hubs
+                newTrack.metadata.genome = hubGenome;
+            }
             if (oldHubFormat) {
                 let assay = assayDict[newTrack.metadata.Assay] || ["unknown"];
                 let sample = sampleDict[newTrack.metadata.Sample] || ["unknown"];

diff --git a/frontend/src/model/alignment/MultiAlignmentViewCalculator.ts b/frontend/src/model/alignment/MultiAlignmentViewCalculator.ts
@@ -129,7 +129,7 @@ export class MultiAlignmentViewCalculator {
             return recordsArray.reduce(
                 (multiAlign, records) => ({
                     ...multiAlign,
-                    [records.query]: this.alignFine(records.query, records.records, visData, primaryVisData),
+                    [records.query]: this.alignFine(records.query, records.records, visData, primaryVisData, allGaps),
                 }),
                 {}
             );
@@ -283,7 +283,7 @@ export class MultiAlignmentViewCalculator {
             return index;
         }
     }
-    alignFine(query: string, records: AlignmentRecord[], oldVisData: ViewExpansion, visData: ViewExpansion): Alignment {
+    alignFine(query: string, records: AlignmentRecord[], oldVisData: ViewExpansion, visData: ViewExpansion, allGaps: Gap[]): Alignment {
         // There's a lot of steps, so bear with me...
         const { visRegion, visWidth } = visData;
         // drawModel is derived from visData:
@@ -295,9 +295,9 @@ export class MultiAlignmentViewCalculator {
         // calculate navContext and placements using oldVisData so small gaps won't seperate different features:
         const navContext = oldVisData.visRegion.getNavigationContext();
         const placements = this._computeContextLocations(records, oldVisData);
-        const primaryGaps = this._getPrimaryGenomeGaps(placements, minGapLength);
+        // const primaryGaps = this._getPrimaryGenomeGaps(placements, minGapLength);
         const navContextBuilder = new NavContextBuilder(navContext);
-        navContextBuilder.setGaps(primaryGaps);
+        navContextBuilder.setGaps(allGaps);  // Use allGaps instead of primaryGaps here so gaps between placements were also included here.
         // With the draw model, we can set x spans for each placed alignment
         // Adjust contextSpan and xSpan in placements using visData:
         for (const placement of placements) {

diff --git a/frontend/src/model/alignment/NavContextBuilder.ts b/frontend/src/model/alignment/NavContextBuilder.ts
@@ -56,6 +56,7 @@ export class NavContextBuilder {
                 resultFeatures.pop();
             }
 
+            prevSplitBase = prevSplitBase > splitBase ? 0: prevSplitBase;
             const leftLocus = new FeatureSegment(featureToSplit, prevSplitBase, splitBase).getLocus();
             const rightLocus = new FeatureSegment(featureToSplit, splitBase).getLocus();
             if (leftLocus.getLength() > 0) {