biojs / biojs3

Draft of BioJS 3: Web components
BSD 3-Clause "New" or "Revised" License
18 stars 2 forks source link

I/O parsers #6

Open wilzbach opened 9 years ago

wilzbach commented 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)

Basic custom elements

Using the url attribute

<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 :)

Using textContent

<biojs-vis-msa>
    <biojs-io-fasta>
       some inner text
    </biojs-io-fasta>
</biojs-vis-msa>

Data binding between components (with Polymer)

Putting the parser as child of one visualization

<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>

Having the parser on the same level

<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>

What is missing?