diff --git a/demo/src/AlignmentDemo.js b/demo/src/AlignmentDemo.js index 3c30fa4ed..7c1d4ac93 100644 --- a/demo/src/AlignmentDemo.js +++ b/demo/src/AlignmentDemo.js @@ -12,14 +12,28 @@ import { } from "../../src/withEditorProps/index"; import { caretPositionUpdate } from "../../src/redux/caretPosition"; import renderToggle from "./utils/renderToggle"; +import jbeiPairwiseAlignmnent232018 from "./exampleData/jbeiPairwiseAlignmnent_23_2018.json"; +import { BPSelect } from "teselagen-react-components"; // import { upsertPart } from "../../src/redux/sequenceData"; // import { MenuItem } from "@blueprintjs/core"; // Use the line below because using the full 30 sequences murders Redux dev tools. -alignmentRunData.alignmentTracks = alignmentRunData.alignmentTracks.slice(0, 5); +alignmentRunData.alignmentTracks = alignmentRunData.alignmentTracks.slice(0, 20); +let alignmentDataToUse = alignmentRunData +// let alignmentDataToUse = jbeiPairwiseAlignmnent232018 const defaultState = { - showOptions: true + showOptions: true, + alignmentDataToUse: alignmentRunData, + forceHeightMode: false, + isFullyZoomedOut: false, + setMinimapLaneHeight: false, + setMinimapLaneSpacing: false, + setAlignmentName: false, + noClickDragHandlers: false, + hasTemplate: false, + noVisibilityOptions: false, + setTickSpacing: false }; const basicActions = { selectionLayerUpdate, caretPositionUpdate }; @@ -36,7 +50,7 @@ export default connect( return { ...getCombinedActions( times( - alignmentRunData.alignmentTracks.length, + alignmentDataToUse.alignmentTracks ? alignmentDataToUse.alignmentTracks.length : alignmentDataToUse.pairwiseAlignments.length, i => "alignmentView" + i ), basicActions, @@ -55,36 +69,34 @@ export default connect( }); } - componentDidUpdate() { + componentDidUpdate(prevProps, prevState) { setParamsIfNecessary({ that: this, defaultState }); + if (this.state.alignmentDataToUse !== prevState.alignmentDataToUse) { + addAlignment(store, { ...this.state.alignmentDataToUse }); + } } componentDidMount() { - addAlignment(store, { ...alignmentRunData }); + addAlignment(store, { ...this.state.alignmentDataToUse }); - alignmentRunData.alignmentTracks.forEach((at, i) => { - // We need to do this or else the sequence data will be - // updated with some default sequence data when we select - // stuff. - updateEditor(store, "alignmentView" + i, { - readOnly: true, - sequenceData: at.alignmentData, - annotationVisibility: { - features: false, - translations: false, - parts: true, - orfs: false, - orfTranslations: false, - cdsFeatureTranslations: true, - axis: false, - cutsites: false, - primers: false, - reverseSequence: false, - lineageLines: false, - axisNumbers: false - } + if (this.state.alignmentDataToUse.alignmentTracks) { + this.state.alignmentDataToUse.alignmentTracks.forEach((at, i) => { + // We need to do this or else the sequence data will be + // updated with some default sequence data when we select + // stuff. + updateEditor(store, "alignmentView" + i, { + readOnly: true, + sequenceData: at.alignmentData, + }); }); - }); + } else { + this.state.alignmentDataToUse.pairwiseAlignments.forEach((at, i) => { + updateEditor(store, "alignmentView" + i, { + readOnly: true, + sequenceData: at.alignmentData, + }); + }); + } } render() { return ( @@ -111,7 +123,7 @@ export default connect( left: 0, paddingTop: 10, width: 250, - height: "100%", + // height: "100%", minWidth: 250, maxWidth: 250, display: "flex", @@ -120,46 +132,100 @@ export default connect( borderRight: "1px solid lightgrey" }} > + { + val === "msa" ? this.setState({alignmentDataToUse: alignmentRunData}) : this.setState({alignmentDataToUse: jbeiPairwiseAlignmnent232018}) + }} + options={[ + { label: "Multiple Sequence Alignment", value: "msa" }, + { label: "Pairwise Alignment", value: "pairwise" } + ]} + /> +
{renderToggle({ that: this, type: "forceHeightMode", label: "Force Height 500px", description: - "You can force a height for the editor by passing height:500 (same for width) " + "You can force a height for the editor by passing height:500 (same for width)" + })} + {renderToggle({ + that: this, + type: "setAlignmentName", + label: "Set Alignment Name", + description: + "You can give the alignment a name by setting alignmentName:'Ref Seq Name'" + })} + {renderToggle({ + that: this, + type: "isFullyZoomedOut", + label: "View Zoomed-Out Alignment", + description: + "You can view the alignment zoomed-out by setting isFullyZoomedOut:true" + })} + {renderToggle({ + that: this, + type: "setMinimapLaneHeight", + label: "Set Minimap Lane Height 13px", + description: + "You can set a height for the minimap lanes by passing minimapLaneHeight:13" + })} + {renderToggle({ + that: this, + type: "setMinimapLaneSpacing", + label: "Set Minimap Lane Spacing 3px", + description: + "You can set a height for the space between minimap lanes by passing minimapLaneSpacing:3" + })} + {renderToggle({ + that: this, + type: "noClickDragHandlers", + label: "Disable Click-Drag Highlighting", + description: + "You can disable click-drag highlighting by setting noClickDragHandlers:true" + })} + {renderToggle({ + that: this, + type: "hasTemplate", + label: "Specify Alignment with Template", + description: + "You can specify that the first sequence in an alignment is a template sequence by setting hasTemplate:true" + })} + {renderToggle({ + that: this, + type: "setTickSpacing", + label: "Set Tick Spacing 10 bps", + description: + "You can set spacing of tick marks on the axis by setting linearViewOptions:{tickSpacing:10}" + })} + {renderToggle({ + that: this, + type: "noVisibilityOptions", + label: "Disable Visibility Options", + description: + "You can disable the visibility options menu by setting noVisibilityOptions:true" })} )} { - const toReturn = { - // tickSpacing: 10, - ignoreYWhenSelecting: true, - linearViewAnnotationVisibilityOverrides: { - ...alignmentVisibilityToolOptions.alignmentAnnotationVisibility, - parts: true - } - }; - if (index === alignmentRunData.alignmentTracks.length - 1) { - toReturn.linearViewAnnotationVisibilityOverrides.axis = true; - } - - return toReturn; + isFullyZoomedOut: this.state.isFullyZoomedOut, + minimapLaneHeight: this.state.setMinimapLaneHeight ? 13 : undefined, + minimapLaneSpacing: this.state.setMinimapLaneSpacing ? 3 : undefined, + alignmentName: this.state.setAlignmentName ? 'Ref Seq Name' : undefined, + noClickDragHandlers: this.state.noClickDragHandlers, + hasTemplate: this.state.hasTemplate, + noVisibilityOptions: this.state.noVisibilityOptions, + linearViewOptions: { + tickSpacing: this.state.setTickSpacing ? 10 : undefined } }} /> diff --git a/demo/src/StandaloneAlignmentDemo.js b/demo/src/StandaloneAlignmentDemo.js index 42637e240..0c122975b 100644 --- a/demo/src/StandaloneAlignmentDemo.js +++ b/demo/src/StandaloneAlignmentDemo.js @@ -12,13 +12,13 @@ import {generateSequenceData} from "ve-sequence-utils"; // import exampleSequenceData from './exampleData/simpleSequenceData'; -const exampleAlignmentData = {alignmentTracks: times(100).map(() => { +const exampleAlignmentData = {alignmentTracks: times(10).map(() => { return { sequenceData: { - ...generateSequenceData(100) + ...generateSequenceData(10) }, alignmentData: { - ...generateSequenceData(100) + ...generateSequenceData(10) } } })} diff --git a/demo/src/exampleData/alignmentRunData.json b/demo/src/exampleData/alignmentRunData.json index e6997a668..9533299be 100644 --- a/demo/src/exampleData/alignmentRunData.json +++ b/demo/src/exampleData/alignmentRunData.json @@ -1,5 +1,6 @@ { "id": "d598e5bd-81fb-42f6-bffe-637bce154680", + "alignmentType": "Multiple Sequence Alignment", "alignmentTracks": [ { "sequenceData": { @@ -7,7 +8,7 @@ "features": [{ "start": 5, "end": 10, - "name": "7491", + "name": "misc_feature", "type": "misc_feature", "id": "5ac3f0a199aae6653c0e7d41", "forward": true, @@ -18,7 +19,7 @@ { "start": 20, "end": 35, - "name": "33665", + "name": "misc_feature", "type": "misc_feature", "id": "5ac3f0a199aae6653c0e7d42", "forward": false, @@ -48,6 +49,17 @@ "sequenceData": { "id": "21e4b5e2-af95-4073-9d98-7318e56623c9", "name": "F05207", + "features": [{ + "start": 8, + "end": 25, + "name": "misc_feature", + "type": "misc_feature", + "id": "5ac3f0a199aae6653c0e7d41", + "forward": true, + "notes": {}, + "strand": 1, + "color": "#006FEF" + }], "sequence": "ATGCATCACCATCATCACCACGGAAGCGGCAGTATGGCAGTTGACTCGCCAGATGAACGCCTCCAGCGTCGTATCGCCCAACTGTTCGCCGAAGATGAACAGGTGAAAGCCGCCCGTCCGTTAGAAGCGGTGAGTGCGGCAGTGAGTGCACCAGGTATGCGTCTGGCACAGATTGCGGCGACTGTGATGGCTGGCTATGCTGATCGTCCCGCAGCGGGTCAGCGGGCGTTTGAACTGAATACCGACGATGCGACGGGTCGTACCAGCCTGCGTTTACTGCCACGCTTTGAAACGATTACCTATCGTGAACTGTGGCAGCGTGTTGGCGAAGTGGCAGCGGCGTGGCATCACGACCCAGAAAACCCGCTGCGTGCTGGCGATTTCGTTGCCCTGCTGGGCTTTACCAGCATTGATTATGCCACCCTGGATTTGGCAGACATTCATCTGGGTGCGGTGACGGTGCCGTTACAGGCGAGTGCGGCAGTGAGCCAGTTGATTGCCATTCTGACCGAAACCAGCCCACGCCTGCTGGCGTCTACCCCAGAACATCTGGATGCGGCAGTGGAATGCCTGCTGGCGGGCACCACGCCAGAACGCCTGGTTGTGTTTGATTACCATCCAGAAGACGATGACCAGCGTGCGGCGTTTGAAAGTGCCCGCCGTCGCTTAGCGGATGCGGGTTCGCTGGTGATTGTGGAAACCCTGGATGCTGTTCGTGCCCGTGGTCGTGACCTGCCCGCTGCTCCGCTGTTTGTGCCAGATACCGATGACGACCCGCTGGCACTTCTGATTTACACCAGCGGCAGCACGGGCACCCCGAAAGGTGCGATGTATACCAACCGCCTGGCGGCAACGATGTGGCAGGGCAACAGTATGCTCCAGGGCAATAGCCAGCGTGTTGGCATCAACCTGAACTACATGCCGATGAGCCACAACGCGGGTCGTGTGAGCCTGTTTGGCGTGTTAGCCCGTGGCGGCACCGCCTATTTTGCCGCTAAATCCGATATGAGCACCCTGTTTGAAGACATCGGTCTGGTGCGTCCGACGGAGATTTTCTTTGTTCCTCGTGTTTGCGATATGGTGTTTCAGCGTTATCAGAGCGAACTGGACCGTCGTAGCGTGGCGGGTGCGGACCTGGATACCCTGGACCGTGAGGTGAAAGCGGATTTACGCCAGAACTACCTGGGCGGTCGTTTTCTGGTAGCGGTTGTGGGCAGTGCCCCGCTGGCGGCAGAAATGAAAACCTTTATGGAAAGCGTGCTGGACCTGCCGCTCCACGATGGCTATGGCAGCACCGAAGCGGGAGCCAGCGTTCTGCTGGATAACCAGATTCAGCGTCCGCCAGTGCTGGATTACAAACTGGTGGATGTGCCTGAACTGGGCTATTTTCGCACGGACCGTCCGCATCCTCGTGGCGAACTGTTGCTGAAAGCGGAAACCACGATTCCTGGCTATTACAAACGCCCAGAAGTGACGGCGGAAATCTTTGATGAAGATGGCTTCTACAAAACGGGCGACATTGTGGCGGAACTGGAACACGACCGCCTGGTGTATGTGGACCGTCGTAACAATGTCCTGAAACTGAGCCAGGGCGAGTTTGTCACCGTTGCCCATCTGGAAGCCGTGTTTGCCAGTAGCCCGCTGATTCGCCAGATTTTCATTTATGGTTCCAGCGAACGCAGTTATCTGCTGGCGGTGATTGTGCCGACTGACGATGCCCTGCGTGGTCGTGATACGGCGACCCTGAAAAGTGCCCTGGCGGAAAGCATTCAGCGTATTGCCAAAGATGCCAACCTCCAGCCGTATGAGATTCCTCGTGATTTCCTGATTGAAACGGAACCGTTTACCATTGCCAACGGTCTGCTGAGCGGCATTGCCAAACTGCTTCGCCCGAACCTGAAAGAACGCTATGGTGCCCAGTTGGAACAGATGTATACCGATTTAGCGACGGGTCAGGCGGATGAACTGCTGGCGTTACGCCGTGAAGCAGCCGACCTGCCAGTGCTGGAAACCGTGAGCCGTGCGGCGAAAGCGATGCTTGGTGTTGCGTCGGCGGATATGCGTCCAGATGCCCATTTCACCGACCTGGGTGGCGATAGCCTGTCTGCCCTGTCGTTTTCCAACCTGTTACACGAAATCTTTGGTGTGGAAGTGCCAGTGGGTGTTGTGGTGAGCCCAGCAAACGAACTGCGTGATTTAGCCAACTACATTGAAGCGGAACGCAACAGCGGTGCGAAACGCCCGACCTTTACCAGCGTTCACGGCGGTGGCAGCGAAATCCGTGCGGCAGACCTGACCCTGGATAAGTTTATTGATGCCCGCACCCTGGCAGCGGCAGACAGCATTCCGCACGCCCCAGTGCCAGCCCAGACCGTTCTGCTGACGGGTGCGAACGGTTATCTGGGTCGTTTTCTGTGCCTGGAATGGCTGGAACGCCTGGATAAAACGGGCGGCACCCTGATTTGTGTTGTCCGTGGCAGCGATGCTGCCGCAGCCCGTAAACGCCTGGATTCGGCGTTTGATAGCGGCGACCCAGGTCTGCTGGAACATTACCAGCAACTGGCGGCTCGCACCCTGGAAGTGCTGGCGGGTGATATCGGTGACCCGAACCTGGGTCTGGATGACGCCACCTGGCAGCGTCTGGCTGAAACCGTTGACCTGATTGTTCACCCCGCAGCACTGGTGAATCATGTGCTGCCTTACACCCAACTGTTTGGTCCGAATGTGGTTGGCACCGCCGAAATCGTGCGTCTGGCGATTACCGCTCGCCGCAAACCTGTCACCTATCTGAGCACCGTTGGCGTAGCGGACCAGGTGGACCCTGCCGAATACCAGGAAGATAGCGATGTGCGTGAAATGTCGGCGGTGCGTGTGGTGCGTGAAAGTTATGCGAACGGCTATGGCAATAGCAAATGGGCGGGTGAAGTGTTGCTGCGTGAAGCCCACGACCTGTGCGGTCTGCCAGTGGCGGTGTTTCGCAGCGATATGATTCTGGCACATAGCCGCTATGCGGGTCAACTGAATGTTCAGGATGTGTTTACCCGCCTGATTCTGAGCCTGGTGGCGACTGGCATTGCCCCGTATTCGTTTTATCGCACCGATGCGGATGGCAACCGTCAGCGTGCCCATTATGACGGTCTGCCAGCGGATTTTACCGCAGCGGCGATTACCGCCCTGGGCATTCAGGCGACGGAAGGCTTTCGCACCTATGATGTGCTGAATCCGTATGACGATGGTATTAGCCTGGATGAGTTTGTGGATTGGCTGGTGGAAAGCGGTCACCCGATTCAGCGTATTACCGATTACAGCGATTGGTTTCATCGCTTTGAAACGGCGATTCGTGCCCTGCCAGAGAAACAGCGTCAGGCGTCGGTGCTGCCGTTGCTGGATGCGTATCGCAACCCGTGCCCAGCGGTTCGTGGTGCGATTCTGCCAGCGAAAGAGTTTCAGGCAGCGGTTCAGACCGCCAAAATCGGTCCAGAACAGGACATTCCGCATCTGTCGGCACCGCTGATTGACAAATATGTGAGCGACCTGGAACTGTTACAACTGCTGTAA" }, @@ -69,6 +81,17 @@ "sequenceData": { "id": "75b4dbaf-1435-4862-9d76-b67bbf6e3cf3", "name": "F05208", + "features": [{ + "start": 2, + "end": 12, + "name": "misc_feature", + "type": "misc_feature", + "id": "5ac3f0a199aae6653c0e7d41", + "forward": true, + "notes": {}, + "strand": 1, + "color": "#006FEF" + }], "sequence": "ATGCATCACCATCATCACCACGGAAGCGGCAGTATGGCAGTTGACTCGCCAGATGAACGCCTCCAGCGTCGTATCGCCCAACTGTTCGCCGAAGATGAACAGGTGAAAGCCGCCCGTCCGTTAGAAGCGGTGAGTGCGGCAGTGAGTGCACCAGGTATGCGTCTGGCACAGATTGCGGCGACTGTGATGGCTGGCTATGCTGATCGTCCCGCAGCGGGTCAGCGGGCGTTTGAACTGAATACCGACGATGCGACGGGTCGTACCAGCCTGCGTTTACTGCCACGCTTTGAAACGATTACCTATCGTGAACTGTGGCAGCGTGTTGGCGAAGTGGCAGCGGCGTGGCATCACGACCCAGAAAACCCGCTGCGTGCTGGCGATTTCGTTGCCCTGCTGGGCTTTACCAGCATTGATTATGCCACCCTGGATTTGGCAGACATTCATCTGGGTGCGGTGACGGTGCCGTTACAGGCGAGTGCGGCAGTGAGCCAGTTGATTGCCATTCTGACCGAAACCAGCCCACGCCTGCTGGCGTCTACCCCAGAACATCTGGATGCGGCAGTGGAATGCCTGCTGGCGGGCACCACGCCAGAACGCCTGGTTGTGTTTGATTACCATCCAGAAGACGATGACCAGCGTGCGGCGTTTGAAAGTGCCCGCCGTCGCTTAGCGGATGCGGGTTCGCTGGTGATTGTGGAAACCCTGGATGCTGTTCGTGCCCGTGGTCGTGACCTGCCCGCTGCTCCGCTGTTTGTGCCAGATACCGATGACGACCCGCTGGCACTTCTGATTTACACCAGCGGCAGCACGGGCACCCCGAAAGGTGCGATGTATACCAACCGCCTGGCGGCAACGATGTGGCAGGGCAACAGTATGCTCCAGGGCAATAGCCAGCGTGTTGGCATCAACCTGAACTACATGCCGATGAGCCACAATGCGGGTCGTGTGAGCCTGTTTGGCGTGTTAGCCCGTGGCGGCACCGCCTATTTTGCCGCTAAATCCGATATGAGCACCCTGTTTGAAGACATCGGTCTGGTGCGTCCGACGGAGATTTTCTTTGTTCCTCGTGTTTGCGATATGGTGTTTCAGCGTTATCAGAGCGAACTGGACCGTCGTAGCGTGGCGGGTGCGGACCTGGATACCCTGGACCGTGAGGTGAAAGCGGATTTACGCCAGAACTACCTGGGCGGTCGTTTTCTGGTAGCGGTTGTGGGCAGTGCCCCGCTGGCGGCAGAAATGAAAACCTTTATGGAAAGCGTGCTGGACCTGCCGCTCCACGATGGCTATGGCAGCACCGAAGCGGGAAGCAGCGTTCTGCTGGATAACCAGATTCAGCGTCCGCCAGTGCTGGATTACAAACTGGTGGATGTGCCTGAACTGGGCTATTTTCGCACGGACCGTCCGCATCCTCGTGGCGAACTGTTGCTGAAAGCGGAAACCACGATTCCTGGCTATTACAAACGCCCAGAAGTGACGGCGGAAATCTTTGATGAAGATGGCTTCTACAAAACGGGCGACATTGTGGCGGAACTGGAACACGACCGCCTGGTGTATGTGGACCGTCGTAACAATGTCCTGAAACTGAGCCAGGGCGAGTTTGTCACCGTTGCCCATCTGGAAGCCGTGTTTGCCAGTAGCCCGCTGATTCGCCAGATTTTCATTTATGGTTCCAGCGAACGCAGTTATCTGCTGGCGGTGATTGTGCCGACTGACGATGCCCTGCGTGGTCGTGATACGGCGACCCTGAAAAGTGCCCTGGCGGAAAGCATTCAGCGTATTGCCAAAGATGCCAACCTCCAGCCGTATGAGATTCCTCGTGATTTCCTGATTGAAACGGAACCGTTTACCATTGCCAACGGTCTGCTGAGCGGCATTGCCAAACTGCTTCGCCCGAACCTGAAAGAACGCTATGGTGCCCAGTTGGAACAGATGTATACCGATTTAGCGACGGGTCAGGCGGATGAACTGCTGGCGTTACGCCGTGAAGCAGCCGACCTGCCAGTGCTGGAAACCGTGAGCCGTGCGGCGAAAGCGATGCTTGGTGTTGCGTCGGCGGATATGCGTCCAGATGCCCATTTCACCGACCTGGGTGGCGATAGCCTGTCTGCCCTGTCGTTTTCCAACCTGTTACACGAAATCTTTGGTGTGGAAGTGCCAGTGGGTGTTGTGGTGAGCCCAGCAAACGAACTGCGTGATTTAGCCAACTACATTGAAGCGGAACGCAACAGCGGTGCGAAACGCCCGACCTTTACCAGCGTTCACGGCGGTGGCAGCGAAATCCGTGCGGCAGACCTGACCCTGGATAAGTTTATTGATGCCCGCACCCTGGCAGCGGCAGACAGCATTCCGCACGCCCCAGTGCCAGCCCAGACCGTTCTGCTGACGGGTGCGAACGGTTATCTGGGTCGTTTTCTGTGCCTGGAATGGCTGGAACGCCTGGATAAAACGGGCGGCACCCTGATTTGTGTTGTCCGTGGCAGCGATGCTGCCGCAGCCCGTAAACGCCTGGATTCGGCGTTTGATAGCGGCGACCCAGGTCTGCTGGAACATTACCAGCAACTGGCGGCTCGCACCCTGGAAGTGCTGGCGGGTGATATCGGTGACCCGAACCTGGGTCTGGATGACGCCACCTGGCAGCGTCTGGCTGAAACCGTTGACCTGATTGTTCACCCCGCAGCACTGGTGAATCATGTGCTGCCTTACACCCAACTGTTTGGTCCGAATGTGGTTGGCACCGCCGAAATCGTGCGTCTGGCGATTACCGCTCGCCGCAAACCTGTCACCTATCTGAGCACCGTTGGCGTAGCGGACCAGGTGGACCCTGCCGAATACCAGGAAGATAGCGATGTGCGTGAAATGTCGGCGGTGCGTGTGGTGCGTGAAAGTTATGCGAACGGCTATGGCAATAGCAAATGGGCGGGTGAAGTGTTGCTGCGTGAAGCCCACGACCTGTGCGGTCTGCCAGTGGCGGTGTTTCGCAGCGATATGATTCTGGCACATAGCCGCTATGCGGGTCAACTGAATGTTCAGGATGTGTTTACCCGCCTGATTCTGAGCCTGGTGGCGACTGGCATTGCCCCGTATTCGTTTTATCGCACCGATGCGGATGGCAACCGTCAGCGTGCCCATTATGACGGTCTGCCAGCGGATTTTACCGCAGCGGCGATTACCGCCCTGGGCATTCAGGCGACGGAAGGCTTTCGCACCTATGATGTGCTGAATCCGTATGACGATGGTATTAGCCTGGATGAGTTTGTGGATTGGCTGGTGGAAAGCGGTCACCCGATTCAGCGTATTACCGATTACAGCGATTGGTTTCATCGCTTTGAAACGGCGATTCGTGCCCTGCCAGAGAAACAGCGTCAGGCGTCGGTGCTGCCGTTGCTGGATGCGTATCGCAACCCGTGCCCAGCGGTTCGTGGTGCGATTCTGCCAGCGAAAGAGTTTCAGGCAGCGGTTCAGACCGCCAAAATCGGTCCAGAACAGGACATTCCGCATCTGTCGGCACCGCTGATTGACAAATATGTGAGCGACCTGGAACTGTTACAACTGCTGTAA" }, diff --git a/demo/src/exampleData/jbeiPairwiseAlignmnent_23_2018.json b/demo/src/exampleData/jbeiPairwiseAlignmnent_23_2018.json index 1342570f4..2b7f6b038 100644 --- a/demo/src/exampleData/jbeiPairwiseAlignmnent_23_2018.json +++ b/demo/src/exampleData/jbeiPairwiseAlignmnent_23_2018.json @@ -1,11 +1,34 @@ { - "id": "iceAlignment", + "id": "d598e5bd-81fb-42f6-bffe-637bce154680", + "alignmentType": "Pairwise Alignment", "pairwiseAlignments": [ [ { "sequenceData": { "id": 1, "name": "pnjh00010", + "features": [{ + "start": 3, + "end": 8, + "name": "misc_feature", + "type": "misc_feature", + "id": "5ac3f0a199aae6653c0e7d41", + "forward": true, + "notes": {}, + "strand": 1, + "color": "#006FEF" + }, + { + "start": 15, + "end": 35, + "name": "misc_feature", + "type": "misc_feature", + "id": "5ac3f0a199aae6653c0e7d42", + "forward": false, + "notes": {}, + "strand": -1, + "color": "#006FEF" + }], "sequence": "gacgtcttatgacaacttgacggctacatcattcactttttcttcacaaccggcacggaactcgctcgggctggccccggtgcattttttaaatacccgcgagaaatagagttgatcgtcaaaaccaacattgcgaccgacggtggcgataggcatccgggtggtgctcaaaagcagcttcgcctggctgatacgttggtcctcgcgccagcttaagacgctaatccctaactgctggcggaaaagatgtgacagacgcgacggcgacaagcaaacatgctgtgcgacgctggcgatatcaaaattgctgtctgccaggtgatcgctgatgtactgacaagcctcgcgtacccgattatccatcggtggatggagcgactcgttaatcgcttccatgcgccgcagtaacaattgctcaagcagatttatcgccagcagctccgaatagcgcccttccccttgcccggcgttaatgatttgcccaaacaggtcgctgaaatgcggctggtgcgcttcatccgggcgaaagaaccccgtattggcaaatattgacggccagttaagccattcatgccagtaggcgcgcggacgaaagtaaacccactggtgataccattcgcgagcctccggatgacgaccgtagtgatgaatctctcctggcgggaacagcaaaatatcacccggtcggcaaacaaattctcgtccctgatttttcaccaccccctgaccgcgaatggtgagattgagaatataacctttcattcccagcggtcggtcgataaaaaaatcgagataaccgttggcctcaatcggcgttaaacccgccaccagatgggcattaaacgagtatcccggcagcaggggatcattttgcgcttcagccatacttttcatactcccgccattcagagaagaaaccaattgtccatattgcatcagacattgccgtcactgcgtcttttactggctcttctcgctaaccaaaccggtaaccccgcttattaaaagcattctgtaacaaagcgggaccaaagccatgacaaaaacgcgtaacaaaagtgtctataatcacggcagaaaagtccacattgattatttgcacggcgtcacactttgctatgccatagcatttttatccataagattagcggattctacctgacgctttttatcgcaactctctactgtttctccatacccgtttttttgggaatttttaagaaggagatatacatatgagtaaaggagaagaacttttcactggagttgtcccaattcttgttgaattagatggtgatgttaatgggcacaaattttctgtcagtggagagggtgaaggtgatgcaacatacggaaaacttacccttaaatttatttgcactactggaaaactacctgttccatggccaacacttgtcactactttctcttatggtgttcaatgcttttcccgttatccggatcatatgaaacggcatgactttttcaagagtgccatgcccgaaggttatgtacaggaacgcactatatctttcaaagatgacgggaactacaagacgcgtgctgaagtcaagtttgaaggtgatacccttgttaatcgtatcgagttaaaaggtattgattttaaagaagatggaaacattctcggacacaaactcgaatacaactataactcacacaatgtatacatcacggcagacaaacaaaagaatggaatcaaagctaacttcaaaattcgccacaacattgaagatggatctgttcaactagcagaccattatcaacaaaatactccaattggcgatggccctgtccttttaccagacaaccattacctgtcgacacaatctgccctttcgaaagatcccaacgaaaagcgtgaccacatggtccttcttgagtttgtaactgctgctgggattacacatggcatggatgagctcggcggcggcggcagcaaggtctacggcaaggaacagtttttgcggatgcgccagagcatgttccccgatcgctaaatcgagtaaggatctccaggcatcaaataaaacgaaaggctcagtcgaaagactgggcctttcgttttatctgttgtttgtcggtgaacgctctctactagagtcacactggctcaccttcgggtgggcctttctgcgtttatacctagggtacgggttttgctgcccgcaaacgggctgttctggtgttgctagtttgttatcagaatcgcagatccggcttcagccggtttgccggctgaaagcgctatttcttccagaattgccatgattttttccccacgggaggcgtcactggctcccgtgttgtcggcagctttgattcgataagcagcatcgcctgtttcaggctgtctatgtgtgactgttgagctgtaacaagttgtctcaggtgttcaatttcatgttctagttgctttgttttactggtttcacctgttctattaggtgttacatgctgttcatctgttacattgtcgatctgttcatggtgaacagctttgaatgcaccaaaaactcgtaaaagctctgatgtatctatcttttttacaccgttttcatctgtgcatatggacagttttccctttgatatgtaacggtgaacagttgttctacttttgtttgttagtcttgatgcttcactgatagatacaagagccataagaacctcagatccttccgtatttagccagtatgttctctagtgtggttcgttgtttttgcgtgagccatgagaacgaaccattgagatcatacttactttgcatgtcactcaaaaattttgcctcaaaactggtgagctgaatttttgcagttaaagcatcgtgtagtgtttttcttagtccgttatgtaggtaggaatctgatgtaatggttgttggtattttgtcaccattcatttttatctggttgttctcaagttcggttacgagatccatttgtctatctagttcaacttggaaaatcaacgtatcagtcgggcggcctcgcttatcaaccaccaatttcatattgctgtaagtgtttaaatctttacttattggtttcaaaacccattggttaagccttttaaactcatggtagttattttcaagcattaacatgaacttaaattcatcaaggctaatctctatatttgccttgtgagttttcttttgtgttagttcttttaataaccactcataaatcctcatagagtatttgttttcaaaagacttaacatgttccagattatattttatgaatttttttaactggaaaagataaggcaatatctcttcactaaaaactaattctaatttttcgcttgagaacttggcatagtttgtccactggaaaatctcaaagcctttaaccaaaggattcctgatttccacagttctcgtcatcagctctctggttgctttagctaatacaccataagcattttccctactgatgttcatcatctgagcgtattggttataagtgaacgataccgtccgttctttccttgtagggttttcaatcgtggggttgagtagtgccacacagcataaaattagcttggtttcatgctccgttaagtcatagcgactaatcgctagttcatttgctttgaaaacaactaattcagacatacatctcaattggtctaggtgattttaatcactataccaattgagatgggctagtcaatgataattactagtccttttcccgggtgatctgggtatctgtaaattctgctagacctttgctggaaaacttgtaaattctgctagaccctctgtaaattccgctagacctttgtgtgttttttttgtttatattcaagtggttataatttatagaataaagaaagaataaaaaaagataaaaagaatagatcccagccctgtgtataactcactactttagtcagttccgcagtattacaaaaggatgtcgcaaacgctgtttgctcctctacaaaacagaccttaaaaccctaaaggcttaagtagcaccctcgcaagctcgggcaaatcgctgaatattccttttgtctccgaccatcaggcacctgagtcgctgtctttttcgtgacattcagttcgctgcgctcacggctctggcagtgaatgggggtaaatggcactacaggcgccttttatggattcatgcaaggaaactacccataatacaagaaaagcccgtcacgggcttctcagggcgttttatggcgggtctgctatgtggtgctatctgactttttgctgttcagcagttcctgccctctgattttccagtctgaccacttcggattatcccgtgacaggtcattcagactggctaatgcacccagtaaggcagcggtatcatcaacaggcttacccgtcttactgtccctagtgcttggattctcaccaataaaaaacgcccggcggcaaccgagcgttctgaacaaatccagatggagttctgaggtcattactggatctatcaacaggagtccaagcgagctcgatatcaaattacgccccgccctgccactcatcgcagtactgttgtaattcattaagcattctgccgacatggaagccatcacaaacggcatgatgaacctgaatcgccagcggcatcagcaccttgtcgccttgcgtataatatttgcccatggtgaaaacgggggcgaagaagttgtccatattggccacgtttaaatcaaaactggtgaaactcacccagggattggctgagacgaaaaacatattctcaataaaccctttagggaaataggccaggttttcaccgtaacacgccacatcttgcgaatatatgtgtagaaactgccggaaatcgtcgtggtattcactccagagcgatgaaaacgtttcagtttgctcatggaaaacggtgtaacaagggtgaacactatcccatatcaccagctcaccgtctttcattgccatacgaaattccggatgagcattcatcaggcgggcaagaatgtgaataaaggccggataaaacttgtgcttatttttctttacggtctttaaaaaggccgtaatatccagctgaacggtctggttataggtacattgagcaactgactgaaatgcctcaaaatgttctttacgatgccattgggatatatcaacggtggtatatccagtgatttttttctccattttagcttccttagctcctgaaaatctcgataactcaaaaaatacgcccggtagtgatcttatttcattatggtgaaagttggaacctcttacgtgccgatcaacgtctcattttcgccagatatc" }, @@ -21,6 +44,17 @@ "sequenceData": { "id": 1, "name": "GFPvv_60_2010-04-29_G01_003 (1).ab1", + "features": [{ + "start": 5, + "end": 17, + "name": "misc_feature", + "type": "misc_feature", + "id": "5ac3f0a199aae6653c0e7d41", + "forward": true, + "notes": {}, + "strand": 1, + "color": "#006FEF" + }], "sequence": "ctgtctgctacgacgcactgttcttgccgtagaccttgctgccgccgccgccgagctcatccatgccatgtgtaatcccagcagcagttacaaactcaagaaggaccatgtggtcacgcttttcgttgggatctttcgaaagggcagattgtgtcgacaggtaatggttgtctggtaaaaggacagggccatcgccaattggagtattttgttgataatggtctgctagttgaacagatccatcttcaatgttgtggcgaattttgaagttagctttgattccattcttttgtttgtctgccgtgatgtatacattgtgtgagttatagttgtattcgagtttgtgtccgagaatgtttccatcttctttaaaatcaataccttttaactcgatacgattaacaagggtatcaccttcaaacttgacttcagcacgcgtcttgtagttcccgtcatctttgaaagatatagtgcgttcctgtacataaccttcgggcatggcactcttgaaaaagtcatgccgtttcatatgatccggataacgggaaaagcattgaacaccataagagaaagtagtgacaagtgttggccatggaacaggtagttttccagtagtgcaaataaatttaagggtaagttttccgtatgttgcatcaccttcaccctctccactgacagaaaatttgtgcccattaacatcaccatctaattcaacaagaattgggacaactccagtgaaaagttcttctcctttactcatatgtatatctccttcttaaaaattcccaaaaaaacgggtatggagaaacagtagagagttgcgataaaaagcgtcaggtagaatccgctaatcttatggataaaaatgctatggcatagcaaagtgtgacgccgtgcaaataatcaatgtggactttttctgccgtgattatagacacttttgttacgcgtttttgtcatgggcttgggtcccgctttgttacagaatgcttttaataag" }, @@ -38,6 +72,28 @@ "sequenceData": { "id": 2, "name": "pnjh00010", + "features": [{ + "start": 3, + "end": 8, + "name": "misc_feature", + "type": "misc_feature", + "id": "5ac3f0a199aae6653c0e7d41", + "forward": true, + "notes": {}, + "strand": 1, + "color": "#006FEF" + }, + { + "start": 15, + "end": 35, + "name": "misc_feature", + "type": "misc_feature", + "id": "5ac3f0a199aae6653c0e7d42", + "forward": false, + "notes": {}, + "strand": -1, + "color": "#006FEF" + }], "sequence": "gacgtcttatgacaacttgacggctacatcattcactttttcttcacaaccggcacggaactcgctcgggctggccccggtgcattttttaaatacccgcgagaaatagagttgatcgtcaaaaccaacattgcgaccgacggtggcgataggcatccgggtggtgctcaaaagcagcttcgcctggctgatacgttggtcctcgcgccagcttaagacgctaatccctaactgctggcggaaaagatgtgacagacgcgacggcgacaagcaaacatgctgtgcgacgctggcgatatcaaaattgctgtctgccaggtgatcgctgatgtactgacaagcctcgcgtacccgattatccatcggtggatggagcgactcgttaatcgcttccatgcgccgcagtaacaattgctcaagcagatttatcgccagcagctccgaatagcgcccttccccttgcccggcgttaatgatttgcccaaacaggtcgctgaaatgcggctggtgcgcttcatccgggcgaaagaaccccgtattggcaaatattgacggccagttaagccattcatgccagtaggcgcgcggacgaaagtaaacccactggtgataccattcgcgagcctccggatgacgaccgtagtgatgaatctctcctggcgggaacagcaaaatatcacccggtcggcaaacaaattctcgtccctgatttttcaccaccccctgaccgcgaatggtgagattgagaatataacctttcattcccagcggtcggtcgataaaaaaatcgagataaccgttggcctcaatcggcgttaaacccgccaccagatgggcattaaacgagtatcccggcagcaggggatcattttgcgcttcagccatacttttcatactcccgccattcagagaagaaaccaattgtccatattgcatcagacattgccgtcactgcgtcttttactggctcttctcgctaaccaaaccggtaaccccgcttattaaaagcattctgtaacaaagcgggaccaaagccatgacaaaaacgcgtaacaaaagtgtctataatcacggcagaaaagtccacattgattatttgcacggcgtcacactttgctatgccatagcatttttatccataagattagcggattctacctgacgctttttatcgcaactctctactgtttctccatacccgtttttttgggaatttttaagaaggagatatacatatgagtaaaggagaagaacttttcactggagttgtcccaattcttgttgaattagatggtgatgttaatgggcacaaattttctgtcagtggagagggtgaaggtgatgcaacatacggaaaacttacccttaaatttatttgcactactggaaaactacctgttccatggccaacacttgtcactactttctcttatggtgttcaatgcttttcccgttatccggatcatatgaaacggcatgactttttcaagagtgccatgcccgaaggttatgtacaggaacgcactatatctttcaaagatgacgggaactacaagacgcgtgctgaagtcaagtttgaaggtgatacccttgttaatcgtatcgagttaaaaggtattgattttaaagaagatggaaacattctcggacacaaactcgaatacaactataactcacacaatgtatacatcacggcagacaaacaaaagaatggaatcaaagctaacttcaaaattcgccacaacattgaagatggatctgttcaactagcagaccattatcaacaaaatactccaattggcgatggccctgtccttttaccagacaaccattacctgtcgacacaatctgccctttcgaaagatcccaacgaaaagcgtgaccacatggtccttcttgagtttgtaactgctgctgggattacacatggcatggatgagctcggcggcggcggcagcaaggtctacggcaaggaacagtttttgcggatgcgccagagcatgttccccgatcgctaaatcgagtaaggatctccaggcatcaaataaaacgaaaggctcagtcgaaagactgggcctttcgttttatctgttgtttgtcggtgaacgctctctactagagtcacactggctcaccttcgggtgggcctttctgcgtttatacctagggtacgggttttgctgcccgcaaacgggctgttctggtgttgctagtttgttatcagaatcgcagatccggcttcagccggtttgccggctgaaagcgctatttcttccagaattgccatgattttttccccacgggaggcgtcactggctcccgtgttgtcggcagctttgattcgataagcagcatcgcctgtttcaggctgtctatgtgtgactgttgagctgtaacaagttgtctcaggtgttcaatttcatgttctagttgctttgttttactggtttcacctgttctattaggtgttacatgctgttcatctgttacattgtcgatctgttcatggtgaacagctttgaatgcaccaaaaactcgtaaaagctctgatgtatctatcttttttacaccgttttcatctgtgcatatggacagttttccctttgatatgtaacggtgaacagttgttctacttttgtttgttagtcttgatgcttcactgatagatacaagagccataagaacctcagatccttccgtatttagccagtatgttctctagtgtggttcgttgtttttgcgtgagccatgagaacgaaccattgagatcatacttactttgcatgtcactcaaaaattttgcctcaaaactggtgagctgaatttttgcagttaaagcatcgtgtagtgtttttcttagtccgttatgtaggtaggaatctgatgtaatggttgttggtattttgtcaccattcatttttatctggttgttctcaagttcggttacgagatccatttgtctatctagttcaacttggaaaatcaacgtatcagtcgggcggcctcgcttatcaaccaccaatttcatattgctgtaagtgtttaaatctttacttattggtttcaaaacccattggttaagccttttaaactcatggtagttattttcaagcattaacatgaacttaaattcatcaaggctaatctctatatttgccttgtgagttttcttttgtgttagttcttttaataaccactcataaatcctcatagagtatttgttttcaaaagacttaacatgttccagattatattttatgaatttttttaactggaaaagataaggcaatatctcttcactaaaaactaattctaatttttcgcttgagaacttggcatagtttgtccactggaaaatctcaaagcctttaaccaaaggattcctgatttccacagttctcgtcatcagctctctggttgctttagctaatacaccataagcattttccctactgatgttcatcatctgagcgtattggttataagtgaacgataccgtccgttctttccttgtagggttttcaatcgtggggttgagtagtgccacacagcataaaattagcttggtttcatgctccgttaagtcatagcgactaatcgctagttcatttgctttgaaaacaactaattcagacatacatctcaattggtctaggtgattttaatcactataccaattgagatgggctagtcaatgataattactagtccttttcccgggtgatctgggtatctgtaaattctgctagacctttgctggaaaacttgtaaattctgctagaccctctgtaaattccgctagacctttgtgtgttttttttgtttatattcaagtggttataatttatagaataaagaaagaataaaaaaagataaaaagaatagatcccagccctgtgtataactcactactttagtcagttccgcagtattacaaaaggatgtcgcaaacgctgtttgctcctctacaaaacagaccttaaaaccctaaaggcttaagtagcaccctcgcaagctcgggcaaatcgctgaatattccttttgtctccgaccatcaggcacctgagtcgctgtctttttcgtgacattcagttcgctgcgctcacggctctggcagtgaatgggggtaaatggcactacaggcgccttttatggattcatgcaaggaaactacccataatacaagaaaagcccgtcacgggcttctcagggcgttttatggcgggtctgctatgtggtgctatctgactttttgctgttcagcagttcctgccctctgattttccagtctgaccacttcggattatcccgtgacaggtcattcagactggctaatgcacccagtaaggcagcggtatcatcaacaggcttacccgtcttactgtccctagtgcttggattctcaccaataaaaaacgcccggcggcaaccgagcgttctgaacaaatccagatggagttctgaggtcattactggatctatcaacaggagtccaagcgagctcgatatcaaattacgccccgccctgccactcatcgcagtactgttgtaattcattaagcattctgccgacatggaagccatcacaaacggcatgatgaacctgaatcgccagcggcatcagcaccttgtcgccttgcgtataatatttgcccatggtgaaaacgggggcgaagaagttgtccatattggccacgtttaaatcaaaactggtgaaactcacccagggattggctgagacgaaaaacatattctcaataaaccctttagggaaataggccaggttttcaccgtaacacgccacatcttgcgaatatatgtgtagaaactgccggaaatcgtcgtggtattcactccagagcgatgaaaacgtttcagtttgctcatggaaaacggtgtaacaagggtgaacactatcccatatcaccagctcaccgtctttcattgccatacgaaattccggatgagcattcatcaggcgggcaagaatgtgaataaaggccggataaaacttgtgcttatttttctttacggtctttaaaaaggccgtaatatccagctgaacggtctggttataggtacattgagcaactgactgaaatgcctcaaaatgttctttacgatgccattgggatatatcaacggtggtatatccagtgatttttttctccattttagcttccttagctcctgaaaatctcgataactcaaaaaatacgcccggtagtgatcttatttcattatggtgaaagttggaacctcttacgtgccgatcaacgtctcattttcgccagatatc" }, diff --git a/package.json b/package.json index 58d52be53..385e1b483 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,7 @@ "scripts": { "build": "nwb build-react-component --copy-files --no-demo", "buildWithDemo": "nwb build-react-component --copy-files", - "//build-watch": "nodemon --watch src --exec \"rm .babelrc; yarn build\" ", + "build-watch": "nodemon --watch src --exec \"rm .babelrc; yarn build\" ", "clean": "nwb clean-module && npm clean-demo", "start": "nwb serve-react-demo --port 3344", "localj5": "AMQP=localhost:5672 REMOTE_J5=http://localhost:10000 nwb serve-react-demo --port 3344", diff --git a/src/AlignmentView/AlignmentVisibilityTool.js b/src/AlignmentView/AlignmentVisibilityTool.js index 094850b27..b598b137a 100644 --- a/src/AlignmentView/AlignmentVisibilityTool.js +++ b/src/AlignmentView/AlignmentVisibilityTool.js @@ -37,8 +37,15 @@ function VisibilityOptions({ alignmentAnnotationVisibilityToggle, // alignmentAnnotationLabelVisibility = {}, // alignmentAnnotationLabelVisibilityToggle - annotationsWithCounts + annotationsWithCounts, + currentPairwiseAlignmentIndex }) { + let annotationCountToUse = {}; + if (currentPairwiseAlignmentIndex) { + annotationCountToUse = annotationsWithCounts[currentPairwiseAlignmentIndex]; + } else { + annotationCountToUse = annotationsWithCounts[0]; + } return (
- {annotationName in annotationsWithCounts ? ( + {annotationName in annotationCountToUse ? ( - {annotationsWithCounts[annotationName]} + {annotationCountToUse[annotationName]} ) : ( "" diff --git a/src/AlignmentView/Minimap.js b/src/AlignmentView/Minimap.js index ac49b4080..9e738334f 100644 --- a/src/AlignmentView/Minimap.js +++ b/src/AlignmentView/Minimap.js @@ -10,9 +10,12 @@ export default class Minimap extends React.Component { shouldComponentUpdate(newProps) { const { props } = this; if ( - ["numBpsShownInLinearView", "scrollAlignmentView"].some( - key => props[key] !== newProps[key] - ) + [ + "numBpsShownInLinearView", + "scrollAlignmentView", + "laneHeight", + "laneSpacing" + ].some(key => props[key] !== newProps[key]) ) return true; return false; @@ -133,10 +136,10 @@ export default class Minimap extends React.Component { - - + +
); @@ -161,7 +164,7 @@ export default class Minimap extends React.Component { return (
(this.minimap = ref)} - className={"alignmentMinimap"} + className="alignmentMinimap" style={{ position: "relative", width, @@ -181,7 +184,7 @@ export default class Minimap extends React.Component { overflowY: "auto", position: "relative" }} - className={"alignmentMinimapTracks"} + className="alignmentMinimapTracks" > )} - type={"uniform"} + type="uniform" itemSizeGetter={this.itemSizeGetter} itemRenderer={this.renderItem} length={alignmentTracks.length} @@ -243,11 +246,11 @@ const YellowScrollHandle = view( return ( { this.x = x; }} @@ -300,12 +303,12 @@ const YellowScrollHandle = view( width: 2, background: "black" }} - className={"minimapCaret"} + className="minimapCaret" /> {/* the actual handle component */}
{/* this is the blue vertical scroll position display element */}
{ this.x = x; }} @@ -370,7 +373,7 @@ const YellowScrollHandle = view( width: 2, background: "black" }} - className={"minimapCaret"} + className="minimapCaret" />
diff --git a/src/AlignmentView/index.js b/src/AlignmentView/index.js index 17651dab6..6e4972b9f 100644 --- a/src/AlignmentView/index.js +++ b/src/AlignmentView/index.js @@ -13,7 +13,7 @@ import { } from "@blueprintjs/core"; import { Loading } from "teselagen-react-components"; import { store } from "react-easy-state"; -import { throttle, map, cloneDeep } from "lodash"; +import { throttle, map } from "lodash"; import { LinearView } from "../LinearView"; import Minimap from "./Minimap"; import { compose, branch, renderComponent } from "recompose"; @@ -205,6 +205,12 @@ class AlignmentView extends React.Component { this.alignmentHolder.scrollLeft / (this.alignmentHolder.scrollWidth - this.alignmentHolder.clientWidth); this.easyStore.percentScrolled = scrollPercentage || 0; + if (this.alignmentHolderTop) { + this.alignmentHolderTop.scrollLeft = this.alignmentHolder.scrollLeft; + } + }; + handleTopScroll = () => { + this.alignmentHolder.scrollLeft = this.alignmentHolderTop.scrollLeft; }; onMinimapSizeAdjust = (newSliderSize, newPercent) => { const percentageOfSpace = newSliderSize / (this.state.width - nameDivWidth); @@ -231,6 +237,12 @@ class AlignmentView extends React.Component { this.alignmentHolder.scrollLeft = Math.min(Math.max(scrollPercentage, 0), 1) * (this.alignmentHolder.scrollWidth - this.alignmentHolder.clientWidth); + if (this.alignmentHolderTop) { + this.alignmentHolderTop.scrollLeft = + Math.min(Math.max(scrollPercentage, 0), 1) * + (this.alignmentHolderTop.scrollWidth - + this.alignmentHolderTop.clientWidth); + } }; scrollYToTrack = trackIndex => { this.InfiniteScroller.scrollTo(trackIndex); @@ -252,7 +264,7 @@ class AlignmentView extends React.Component { }); }; - renderItem = _i => { + renderItem = (_i, key, isTemplate) => { if (this.timeoutId) clearInterval(this.timeoutId); this.timeoutId = setTimeout(() => { this.timeoutId = undefined; @@ -271,28 +283,22 @@ class AlignmentView extends React.Component { ...rest } = this.props; - let pairwiseAlignmentTracks; - if (hasTemplate) { - pairwiseAlignmentTracks = cloneDeep(alignmentTracks); - pairwiseAlignmentTracks[0].isTemplate = true; - pairwiseAlignmentTracks[0].additionalSelectionLayers = []; - } - let i; - if (hasTemplate) { + if (isTemplate) { i = _i; + } else if (hasTemplate) { + i = _i + 1; } else { i = _i; } - const track = hasTemplate ? pairwiseAlignmentTracks[i] : alignmentTracks[i]; + const track = alignmentTracks[i]; const { // sequenceData, // alignmentData, additionalSelectionLayers, - chromatogramData, - isTemplate + chromatogramData // mismatches } = track; const rawSequenceData = track.sequenceData; @@ -448,7 +454,7 @@ class AlignmentView extends React.Component { ); }; handleResize = throttle(([e]) => { - this.setState({ width: e.contentRect.width, height: e.contentRect.height }); + this.setState({ width: e.contentRect.width }); }, 200); render() { @@ -460,6 +466,7 @@ class AlignmentView extends React.Component { minimapLaneSpacing, isInPairwiseOverviewView, isPairwise, + currentPairwiseAlignmentIndex, hasTemplate, noVisibilityOptions, updateAlignmentSortOrder, @@ -479,8 +486,7 @@ class AlignmentView extends React.Component { // const trackWidth = width - nameDivWidth || 400; - const getTrackVis = alignmentTracks => { - const { isTemplate } = alignmentTracks; + const getTrackVis = (alignmentTracks, isTemplate) => { return (
{isTemplate ? ( this.renderItem(0, 0, isTemplate) @@ -518,23 +524,23 @@ class AlignmentView extends React.Component {
); }; - let pairwiseAlignmentTracks; - if (hasTemplate) { - pairwiseAlignmentTracks = cloneDeep(alignmentTracks); - pairwiseAlignmentTracks[0].isTemplate = true; - pairwiseAlignmentTracks[0].additionalSelectionLayers = []; - } + + const [firstTrack, ...otherTracks] = alignmentTracks; const totalWidthOfMinimap = this.state.width - nameDivWidth; const totalWidthInAlignmentView = 14 * this.getSequenceLength(); const minSliderSize = Math.min( totalWidthOfMinimap * (totalWidthOfMinimap / totalWidthInAlignmentView), totalWidthOfMinimap ); + const viewportHeight = Math.max( + document.documentElement.clientHeight, + window.innerHeight || 0 + ); return (
) : ( - - {this.props.alignmentName || "Untitled Alignment"} - +
+ + {this.props.alignmentName || "Untitled Alignment"} + +     + + {this.props.alignmentType || "Unknown Alignment Type"} + +
)} {this.props.handleAlignmentRename && ( @@ -638,7 +661,10 @@ class AlignmentView extends React.Component { /> )} {!noVisibilityOptions && !isInPairwiseOverviewView && ( - + )} {updateAlignmentSortOrder && !isInPairwiseOverviewView && ( )}
- {hasTemplate - ? getTrackVis(pairwiseAlignmentTracks) - : getTrackVis(alignmentTracks)} + {hasTemplate ? ( + +
+ {getTrackVis([firstTrack], true)} +
+ {getTrackVis(otherTracks)} + + ) : ( + getTrackVis(alignmentTracks) + )}
{!isInPairwiseOverviewView && (
20 ? 10 : 17, - laneSpacing: minimapLaneSpacing, + minimapLaneHeight || (alignmentTracks.length > 5 ? 10 : 17), + laneSpacing: + minimapLaneSpacing || (alignmentTracks.length > 5 ? 2 : 1), easyStore: this.easyStore, numBpsShownInLinearView: this.getNumBpsShownInLinearView(), scrollAlignmentView: this.state.scrollAlignmentView @@ -772,16 +806,40 @@ export default compose( } }); - let totalNumOfFeatures = 0; - let totalNumOfParts = 0; - alignmentTracks.forEach(seq => { - if (seq.sequenceData.features) { - totalNumOfFeatures += seq.sequenceData.features.length; - } - if (seq.sequenceData.parts) { - totalNumOfParts += seq.sequenceData.parts.length; - } - }); + let annotationsWithCounts = []; + if (alignmentTracks) { + let totalNumOfFeatures = 0; + let totalNumOfParts = 0; + alignmentTracks.forEach(seq => { + if (seq.sequenceData.features) { + totalNumOfFeatures += seq.sequenceData.features.length; + } + if (seq.sequenceData.parts) { + totalNumOfParts += seq.sequenceData.parts.length; + } + }); + annotationsWithCounts.push({ + features: totalNumOfFeatures, + parts: totalNumOfParts + }); + } else if (pairwiseAlignments) { + pairwiseAlignments.forEach(pairwise => { + let totalNumOfFeatures = 0; + let totalNumOfParts = 0; + pairwise.forEach(seq => { + if (seq.sequenceData.features) { + totalNumOfFeatures += seq.sequenceData.features.length; + } + if (seq.sequenceData.parts) { + totalNumOfParts += seq.sequenceData.parts.length; + } + }); + annotationsWithCounts.push({ + features: totalNumOfFeatures, + parts: totalNumOfParts + }); + }); + } return { isAlignment: true, @@ -821,10 +879,7 @@ export default compose( }); }, togglableAlignmentAnnotationSettings, - annotationsWithCounts: { - features: totalNumOfFeatures, - parts: totalNumOfParts - } + annotationsWithCounts } }; }, @@ -940,9 +995,10 @@ class PairwiseAlignmentView extends React.Component { .map(() => "a") .join("") }, - hasTemplate: true, alignmentTracks, + hasTemplate: true, isPairwise: true, + currentPairwiseAlignmentIndex, handleBackButtonClicked: () => { this.setState({ currentPairwiseAlignmentIndex: undefined @@ -959,12 +1015,13 @@ class PairwiseAlignmentView extends React.Component { { //set currentPairwiseAlignmentIndex this.setState({ currentPairwiseAlignmentIndex: trackIndex - 1 }); @@ -1016,5 +1073,3 @@ function getPairwiseOverviewLinearViewOptions({ isTemplate }) { }; } } - -function noop() {}