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

Draft: Implementing Alignment Visualizer #264

Draft
wants to merge 1 commit into
base: develop
Choose a base branch
from
Draft

Draft: Implementing Alignment Visualizer #264

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
14 changes: 10 additions & 4 deletions demo/lib/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,12 +21,14 @@ import { chooseRandomColor } from "../../src/colors";
import { AnnotationProp, Primer, TranslationProp } from "../../src/elements";
import Header from "./Header";
import file from "./file";
import fileAlignment from "./fileAlignment";

const viewerTypeOptions = [
{ key: "both", text: "Both", value: "both" },
{ key: "circular", text: "Circular", value: "circular" },
{ key: "linear", text: "Linear", value: "linear" },
{ key: "both_flip", text: "Both Flip", value: "both_flip" },
{ key: "alignment", text: "Alignment", value: "alignment" },
];

interface AppState {
Expand All @@ -39,6 +41,7 @@ interface AppState {
searchResults: any;
selection: any;
seq: string;
sequenceToCompare: string;
showComplement: boolean;
showIndex: boolean;
showSelectionMeta: boolean;
Expand Down Expand Up @@ -92,6 +95,7 @@ export default class App extends React.Component<any, AppState> {
searchResults: {},
selection: {},
seq: "",
sequenceToCompare: "",
showComplement: true,
showIndex: true,
showSelectionMeta: false,
Expand All @@ -101,16 +105,17 @@ export default class App extends React.Component<any, AppState> {
{ end: 1147, name: "", start: 736 },
{ end: 1885, name: "ORF 2", start: 1165 },
],
viewer: "both",
viewer: "alignment",
zoom: 50,
};
linearRef: React.RefObject<HTMLDivElement> = React.createRef();
circularRef: React.RefObject<HTMLDivElement> = React.createRef();

componentDidMount = async () => {
const seq = await seqparse(file);
const sequenceToCompare = await seqparse(fileAlignment);

this.setState({ annotations: seq.annotations, name: seq.name, seq: seq.seq });
this.setState({ annotations: seq.annotations, name: seq.name, seq: seq.seq, sequenceToCompare: sequenceToCompare.seq });
};

toggleSidebar = () => {
Expand Down Expand Up @@ -261,13 +266,14 @@ export default class App extends React.Component<any, AppState> {
search={this.state.search}
selection={this.state.selection}
seq={this.state.seq}
sequenceToCompare={this.state.sequenceToCompare}
showComplement={this.state.showComplement}
showIndex={this.state.showIndex}
translations={this.state.translations}
viewer={this.state.viewer as "linear" | "circular"}
zoom={{ linear: this.state.zoom }}
>
{customChildren}
{/* {customChildren} */}
</SeqViz>
)}
</div>
Expand All @@ -283,7 +289,7 @@ const ViewerTypeInput = ({ setType }: { setType: (viewType: string) => void }) =
<div className="option" id="topology">
<span>Topology</span>
<Dropdown
defaultValue="both"
defaultValue="alignment"
fluid
options={viewerTypeOptions}
selection
Expand Down
133 changes: 133 additions & 0 deletions demo/lib/fileAlignment.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,133 @@
export default `LOCUS MN623123 3744 bp DNA circular SYN 16-MAY-2020
DEFINITION Cloning vector p15A-HNS-GFP, complete sequence.
ACCESSION MN623123
VERSION MN623123.1
KEYWORDS .
SOURCE Cloning vector p15A-HNS-GFP
ORGANISM Cloning vector p15A-HNS-GFP
other sequences; artificial sequences; vectors.
REFERENCE 1 (bases 1 to 3744)
AUTHORS Guo,L.
TITLE Direct Submission
JOURNAL Submitted (28-OCT-2019) Jiangnan University, State Key Laboratory
of Food Science and Technology, 1800 Lihu Avenue, Wuxi, Jiangsu
214122, China
FEATURES Location/Qualifiers
source 1..3744
/organism="Cloning vector p15A-HNS-GFP"
/mol_type="other DNA"
/db_xref="taxon:2735146"
CDS complement(7..630)
/gene="tetR"
/codon_start=1
/transl_table=11
/product="tetracycline repressor"
/protein_id="QJR97839.1"
/translation="MSRLDKSKVINSALELLNEVGIEGLTTRKLAQKLGVEQPTLYWH
VKNKRALLDALAIEMLDRHHTHFCPLEGESWQDFLRNNAKSFRCALLSHRDGAKVHLG
TRPTEKQYETLENQLAFLCQQGFSLENALYALSAVGHFTLGCVLEDQEHQVAKEERET
PTTDSMPPLLRQAIELFDHQGAEPAFLFGLELIICGLEKQLKCESGS"
regulatory 634..706
/regulatory_class="promoter"
/note="pLtetO-1 promoter"
CDS 737..>1147
/gene="hns"
/note="HNS"
/codon_start=1
/transl_table=11
/product="histone-like nucleoid structuring protein"
/protein_id="QJR97840.1"
/translation="MSEALKILNNIRTLRAQARECTLETLEEMLEKLEVVVNERREEE
SAAAAEVEERTRKLQQYREMLIADGIDPNELLNSLAAVKSGTKAKRAQRPAKYSYVDE
NGETKTWTGQGRTPAVIKKAMDEQGKSLDDFLIKQ"
CDS 1166..1885
/gene="GFP"
/note="GFP"
/codon_start=1
/transl_table=11
/product="Green fluorescent protein"
/protein_id="QJR97841.1"
/translation="MVSKGEELFTGVVPILVELDGDVNGHKFSVSGEGEGDATYGKLT
LKFICTTGKLPVPWPTLVTTLTYGVQCFSRYPDHMKQHDFFKSAMPEGYVQERTIFFK
DDGNYKTRAEVKFEGDTLVNRIELKGIDFKEDGNILGHKLEYNYNSHNVYIMADKQKN
GIKVNFKIRHNIEDGSVQLADHYQQNTPIGDGPVLLPDNHYLSTQSALSKDPNEKRDH
MVLLEFVTAAGITLGMDELYK"
regulatory 1909..1954
/regulatory_class="terminator"
/note="rrnB T1 terminator"
CDS complement(2959..3618)
/gene="cat"
/codon_start=1
/transl_table=11
/product="chloramphenicol acetyltransferase"
/protein_id="QJR97842.1"
/translation="MEKKITGYTTVDISQWHRKEHFEAFQSVAQCTYNQTVQLDITAF
LKTVKKNKHKFYPAFIHILARLMNAHPEFRMAMKDGELVIWDSVHPCYTVFHEQTETF
SSLWSEYHDDFRQFLHIYSQDVACYGENLAYFPKGFIENMFFVSANPWVSFTSFDLNV
ANMDNFFAPVFTMGKYYTQGDKVLMPLAIQVHHAVCDGFHVGRMLNELQQYCDEWQGG
A"
ORIGIN
1 aaattcttaa gacccacttt cacatttaag ttgtttttct aatccgcata tgatcaattc
61 aaggccgaat aagaaggctg gctctgcacc ttggtgatca aataattcga tagcttgtcg
121 taataatggc ggcatactat cagtagtagg tgtttccctt tcttctttag cgacttgatg
181 ctcttgatct tccaatacgc aacctaaagt aaaatgcccc acagcgctga gtgcatataa
241 tgcattctct agtgaaaaac cttgttggca taaaaaggct aattgatttt cgagagtttc
301 atactgtttt tctgtaggcc gtgtacctaa atgtactttt gctccatcgc gatgacttag
361 taaagcacat ctaaaacttt tagcgttatt acgtaaaaaa tcttgccagc tttccccttc
421 taaagggcaa aagtgagtat ggtgcctatc taacatctca atggctaagg cgtcgagcaa
481 agcccgctta ttttttacat gccaatacaa tgtaggctgc tctacaccta gcttctgggc
541 gagtttacgg gttgttaaac cttcgattcc gacctcatta agcagctcta atgcgctgtt
601 aatcacttta cttttatcta atctagacat cattaattcc taatttttgt tgacactcta
661 tcgttgatag agttatttta ccactcccta tcagtgatag agaaaagaat tcgtcgacaa
721 agaggagaaa gatatcatga gcgaagcact taaaattctg aacaacatcc gtactcttcg
781 tgcgcaggca agagaatgta cacttgaaac gctggaagaa atgctggaaa aattagaagt
841 tgttgttaac gaacgtcgcg aagaagaaag cgcggctgct gctgaagttg aagagcgcac
901 tcgtaaactg cagcaatatc gcgaaatgct gatcgctgac ggtattgacc cgaacgaact
961 gctgaatagc cttgctgccg ttaaatctgg caccaaagct aaacgtgctc agcgtccggc
1021 aaaatatagc tacgttgacg aaaacggcga aactaaaacc tggactggcc aaggccgtac
1081 tccagctgta atcaaaaaag caatggatga gcaaggtaaa tccctcgacg atttcctgat
1141 caagcaaact agtagatctg gtaccatggt gagcaagggc gaggagctgt tcaccggggt
1201 ggtgcccatc ctggtcgagc tggacggcga cgtaaacggc cacaagttca gcgtgtccgg
1261 cgagggcgag ggcgatgcca cctacggcaa gctgaccctg aagttcatct gcaccaccgg
1321 caagctgccc gtgccctggc ccaccctcgt gaccaccctg acctacggcg tgcagtgctt
1381 cagccgctac cccgaccaca tgaagcagca cgacttcttc aagtccgcca tgcccgaagg
1441 ctacgtccag gagcgcacca tcttcttcaa ggacgacggc aactacaaga cccgcgccga
1501 ggtgaagttc gagggcgaca ccctggtgaa ccgcatcgag ctgaagggca tcgacttcaa
1561 ggaggacggc aacatcctgg ggcacaagct ggagtacaac tacaacagcc acaacgtcta
1621 tatcatggcc gacaagcaga agaacggcat caaggtgaac ttcaagatcc gccacaacat
1681 cgaggacggc agcgtgcagc tcgccgacca ctaccagcag aacaccccca tcggcgacgg
1741 ccccgtgctg ctgcccgaca accactacct gagcacccag tccgccctga gcaaagaccc
1801 caacgagaag cgcgatcaca tggtcctgct ggagttcgtg accgccgccg ggatcactct
1861 cggcatggac gagctgtaca agtaactcga gtaaggatct ccaggcatca aataaaacga
1921 aaggctcagt cgaaagactg ggcctttcgt tttatctgtt gtttgtcggt gaacgctctc
1981 tactagagtc acactggctc accttcgggt gggcctttct gcgtttatac ctagggatat
2041 attccgcttc ctcgctcact gactcgctac gctcggtcgt tcgactgcgg cgagcggaaa
2101 tggcttacga acggggcgga gatttcctgg aagatgccag gaagatactt aacagggaag
2161 tgagagggcc gcggcaaagc cgtttttcca taggctccgc ccccctgaca agcatcacga
2221 aatctgacgc tcaaatcagt ggtggcgaaa cccgacagga ctataaagat accaggcgtt
2281 tccccctggc ggctccctcg tgcgctctcc tgttcctgcc tttcggttta ccggtgtcat
2341 tccgctgtta tggccgcgtt tgtctcattc cacgcctgac actcagttcc gggtaggcag
2401 ttcgctccaa gctggactgt atgcacgaac cccccgttca gtccgaccgc tgcgccttat
2461 ccggtaacta tcgtcttgag tccaacccgg aaagacatgc aaaagcacca ctggcagcag
2521 ccactggtaa ttgatttaga ggagttagtc ttgaagtcat gcgccggtta aggctaaact
2581 gaaaggacaa gttttggtga ctgcgctcct ccaagccagt tacctcggtt caaagagttg
2641 gtagctcaga gaaccttcga aaaaccgccc tgcaaggcgg ttttttcgtt ttcagagcaa
2701 gagattacgc gcagaccaaa acgatctcaa gaagatcatc ttattaatca gataaaatat
2761 ttctagattt cagtgcaatt tatctcttca aatgtagcac ctgaagtcag ccccatacga
2821 tataagttgt tactagtgct tggattctca ccaataaaaa acgcccggcg gcaaccgagc
2881 gttctgaaca aatccagatg gagttctgag gtcattactg gatctatcaa caggagtcca
2941 agcgagctcg atatcaaatt acgccccgcc ctgccactca tcgcagtact gttgtaattc
3001 attaagcatt ctgccgacat ggaagccatc acaaacggca tgatgaacct gaatcgccag
3061 cggcatcagc accttgtcgc cttgcgtata atatttgccc atggtgaaaa cgggggcgaa
3121 gaagttgtcc atattggcca cgtttaaatc aaaactggtg aaactcaccc agggattggc
3181 tgagacgaaa aacatattct caataaaccc tttagggaaa taggccaggt tttcaccgta
3241 acacgccaca tcttgcgaat atatgtgtag aaactgccgg aaatcgtcgt ggtattcact
3301 ccagagcgat gaaaacgttt cagtttgctc atggaaaacg gtgtaacaag ggtgaacact
3361 atcccatatc accagctcac cgtctttcat tgccatacga aattccggat gagcattcat
3421 caggcgggca agaatgtgaa taaaggccgg ataaaacttg tgcttatttt tctttacggt
3481 ctttaaaaag gccgtaatat ccagctgaac ggtctggtta taggtacatt gagcaactga
3541 ctgaaatgcc tcaaaatgtt ctttacgatg ccattgggat atatcaacgg tggtatatcc
3601 agtgattttt ttctccattt tagcttcctt agctcctgaa aatctcgata actcaaaaaa
3661 tacgcccggt agtgatctta tttcattatg gtgaaagttg gaacctctta cgtgccgatc
3721 aacgtctcat tttcgccaga tatc
//`;
Loading