Port LatticeGraph to run on NGL

[sbliven]

We should add an NGL version of LatticeGUI.

• Look at the HTML generated by LatticeGUI3Dmol and determine the equivalent commands in NGL
• Create a mustache template for NGL
• Create eppic.assembly.gui.LatticeGUINGO.java in eppic-cli to generate test html pages from the template

After that we can start taking advantage of some of NGL's unique features, such as generating the unit cell contents from operators rather than reading a large CIF file.

[sbliven]

I'm tentatively assigning this to @altheaparker if she has time, otherwise I can do it myself.

[josemduarte]

Some docs for embedding NGL:

http://arose.github.io/ngl/doc/#User_manual/Usage/Embedding

[josemduarte]

I've started some work to have NGL as the viewer for assemblies and interfaces. I have a minimally working version that can display the molecules. I haven't done anything about the lattice graph though.

I'm working in branch NGL. If anyone feels like working on it please use that branch to continue development of this feature. That way we can keep it separated and if we decide that we can't make it for the release then we simply don't merge it in.

[josemduarte]

I've now got the functionality that we had for viewing interfaces and assemblies fully implemented (matching colors, core/rim highlighted residues, etc ). The whole lattice graph thing needs to be ported still. But most of it should be quite easy (except perhaps for creating the geometrical objects needed to show the graphs). My js code (see eppic_ngl.js) can serve as an example on how to use the API to NGL.

The good news is that with the full API we can now do fancy things like having a minimal UI to toggle selections etc. Also showing potato surfaces should be possible. I'll have a go at the potato surfaces when I get some time.

[josemduarte]

Potato surfaces are now implemented! NGL could match exactly the pymol rendering.

You can try it out in the dev server. The potatoes won't show on first launch of the viewer but if you press "p" once on the viewer you will get the potato for first chain, pressing "n" will get it for other chains. Binding to keys was the quickest solution I could find, but eventually we need a minimal User Interface with some buttons to show/hide surfaces, show/hide chains, etc

[josemduarte]

After talking to @arose, he has provided some tips on how to represent the spheres and cylinders needed for the graph view. This is the snippet of code from him, drawing 2 nodes and an edge connecting them:

            var sphereBuffer = new NGL.SphereBuffer(
                new Float32Array( [ 0, 0, 0, 6, 0, 0 ] ),  // position (xyz)
                new Float32Array( [ 1, 0, 0, 1, 1, 0 ] ),  // color (rgb)
                new Float32Array( [ 1, 1 ] )  // radius
            );
            var sp = o.addBufferRepresentation( sphereBuffer );
            sp.setParameters( { opacity: 0.5 } );

            var cylinderBuffer = new NGL.CylinderBuffer(
                new Float32Array( [ 0, 0, 0 ] ),  // from position (xyz)
                new Float32Array( [ 6, 0, 0 ] ),  // to position (xyz)
                new Float32Array( [ 1, 0, 0 ] ),  // from color (rgb)
                new Float32Array( [ 1, 1, 0 ] ),  // to color (rgb)
                new Float32Array( [ 0.5 ] )  // radius
            );
            o.addBufferRepresentation( cylinderBuffer );

More than 1 position or color can be specified in the arrays (for instance there's 2 spheres specified in NGL.sphereBuffer above).

Other more complicated objects could be created with MeshBuffer.

This is using the very same API used for representing atoms and bonds. The functions are defined in this file. Thanks so much @arose for all the tips!

[gcapitani]

Thanks @josemduarte and @arose!

[sbliven]

@arose has given some more suggestions

1. [x] Node and edge labels

   var textBuffer = new NGL.TextBuffer(
   [], // position
   [], // size
   [], // color
   [ ["A"], ["B"] ], // text
   {}, // params
   );

   This should also add the zOffset parameter, see https://github.com/arose/ngl/issues/116

2. [x] Transparent Cartoon We're currently using a transparent ribbon representation, because the transparent cartoon had visible segments. Here is how to do transparent cartoon (may still want to stick with ribbon for simplicity)

   comp.addRepresentation( "cartoon", {
   opacity: 0.5, side: THREE.FrontSide  // THREE.BackSide, THREE.DoubleSide
   } );

   The constants will likely be replaced by "front", "back", "double" in the next release.

3. [x] Replace cell.cif with custom assembly

   var matrix1 = new THREE.Matrix4().set(
   1, 0, 0, 20,
   0, 1, 0, 20,
   0, 0, 1, 20,
   0, 0, 0, 1
   );
   var assembly = new NGL.Assembly( "MY-ASSEMBLY" );
   assembly.addPart(
   [ matrix1 ],
   []  // leave empty for all chains, otherwise author chainnames [ "A", "B" ]
   );
   comp.structure.biomolDict[ "MY-ASSEMBLY" ] = assembly;
   comp.addRepresentation( "cartoon", { assembly: "MY-ASSEMBLY" } );

[sbliven]

I think we can close this after merging #127. The custom assemblies would be a nice optimization, but is low priority.