Open wilzbach opened 9 years ago
I found a bit of time to play with different ways to integrate BioJS I/O parser as web components: https://github.com/greenify/biojs3-parser-test
This is not (yet) a nice library that can be reused, but the following already works:
(for simplicity I have used just a whitespace splitter and not a real FASTA parser)
url
<biojs-vis-msa> <biojs-io-fasta url="./foo.fasta" /> </biojs-vis-msa>
Note: custom elements always need to be closed. However once the parent gets closed, they will be closed too :)
textContent
<biojs-vis-msa> <biojs-io-fasta> some inner text </biojs-io-fasta> </biojs-vis-msa>
<template is="dom-bind"> <biojs-vis-msa id="msa1" seqs="{{seqs}}"> <biojs-io-fasta url="./foo.fasta" /> </biojs-vis-msa> <biojs-vis-msa id="msa2" seqs="{{seqs}}"></biojs-vis-msa> </template>
<template is="dom-bind"> <biojs-vis-msa id="msa1" seqs="{{seqs}}"></biojs-vis-msa> <biojs-vis-msa id="msa2" seqs="{{seqs}}"></biojs-vis-msa> <biojs-io-fasta url="./foo.fasta" data="{{seqs}}"/> </template>
iron-async
xhr
io
msa
I found a bit of time to play with different ways to integrate BioJS I/O parser as web components: https://github.com/greenify/biojs3-parser-test
This is not (yet) a nice library that can be reused, but the following already works:
(for simplicity I have used just a whitespace splitter and not a real FASTA parser)
Basic custom elements
Using the
url
attributeNote: custom elements always need to be closed. However once the parent gets closed, they will be closed too :)
Using
textContent
Data binding between components (with Polymer)
Putting the parser as child of one visualization
Having the parser on the same level
What is missing?
iron-async
instead ofxhr
io
parser lib without Polymerurl
directly in the component (e.g.msa
)