Using BioJS in your own webpage

Go to github:

https://github.com/biojs/biojs

This has the library of components.

Download these by pressing the "Download ZIP" button.
Then unzip the library.

No this is NOT the right place!

To actually down load the libraries, you need to go here:
https://github.com/biojs/biojs/releases
N.B. This is a large file that contains all the dependencies for BioJS.
These in themselves are very large files!!!!

59.6 MB
so it contains a lot.


Another option:
Point to somewhere that the library is.

myFavouriteProtein

So, I am trying to link BioJS with bootstrap and write a tutorial that allows this.

I can successfully, put in the sequence module.

The ProteinPortafolio module gives structure but not the proper information.

Let's spend some time trouble shooting that.


Ok, so I tried to simplify.
Get rid of all the bootstrap stuff in case there was some kind of CSS conflicts.

Sadly, still no text.
Also, I think there is an error in the documentation which I have circumvented by including the

Biojs.Tooltip.js script. 

I am not sure why this work but without this script there is no structure. 

Let's try just the 3D structure file. 

Simplify!

Arghhh!

The only BioJS that I can really get to work is the Sequence module. 

Why is this?

Need to try again from a different direction. 

Problems with Github...

With all the local dependencies, the box of files is very large.

I shouldn't really have to send all of these to Git but I don't know how to keep it separate. In retrospect I probably shouldn't have committed them since I don't change them!

Can I uncommit?

I tried and ended up deleting everything.


ARGGHHH!!!

myFavouriteProtein...

So it's been an interesting day.
I have made contact with the BioJS people and I think that's a good start.

I think I can probably write a BioJS tutorial about how to interface BioJS and bootstrap.

I can certainly contribute that.

Some key points:
    I probably need to simplify it a bit and work out how to make the components plug together a bit better.
    The index2.html page has some issues.
         ProteinPortafolio is not displaying the text information that it should. Don't know why!

    I also can't get the Biojs.Protein3DUniprot component to work.

myFavourite Protein - two module displayed.

So good news is that I can display two BioJS modules on the same page.

It works if you code in the same script.

Some problems:
The Biojs.ProteinPortafolio script seems to return 3D structures for reasons I don't understand and I don't think should be my fault.

This needs checking!

Limitations:
Sequence module is hard coded!
The two bits are showing different proteins - NOT GOOD!


OK so I have improved it now.
Two modules displayed.
Both displaying NF-kappaB and both searching the Uniprot ID.

Good!

myFavouriteProtein page - back to the tutorial!

I have to look back at my previous notes with this...

Tracking my work on myFavouriteProtein page - try sequence component....

I couldn't get the ProteinPortfolio to work first time so I am going to try the Sequence component.

It requires some different scripts:
<script language="JavaScript" type="text/javascript" src="src/Biojs.Tooltip.js"></script>

and different external scripts.

So I have made this work:

Let's try DasProteinFeatureViewer

Obviously it requires different scripts and style sheets:

https://www.ebi.ac.uk/Tools/biojs/registry/Biojs.DasProteinFeatureViewer.html#

Mmm, I think it also requires me to make Biojs.FeatureViewer work too. 

Mmm, more error messages and some frustration. 

Also the second script seems to force out the stuff from the first script for reasons I don't understand.