Merge pull request #398 from josenavas/decomposition-view

WIP: Decomposition view
biocore · May 9, 2015 · 1ed1b31 · 1ed1b31
2 parents a7393db + 7bf92e4
commit 1ed1b31
Show file tree

Hide file tree

Showing 5 changed files with 455 additions and 82 deletions.
diff --git a/emperor/support_files/js/index.html b/emperor/support_files/js/index.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Emperor test</title>
+    <meta charset="utf-8">
+    <style>
+      body {
+        margin: 0px;
+        background-color: #000000;
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body>
+
+      <!-- Libraries the code depends on -->
+    <script src="../vendor/js/underscore-min.js"></script>
+    <script src="../vendor/js/chroma.min.js"></script>
+    <script src="../vendor/js/three.min.js"></script>>
+
+    <!--Source files to test-->
+    <script src="model.js"></script>
+    <script src="view.js"></script>
+    <script src="sceneplotview3d.js"></script>
+
+    <script>
+
+      var name = "pcoa";
+      var ids = ['PC.636', 'PC.635', 'PC.356', 'PC.481', 'PC.354', 'PC.593',
+                 'PC.355', 'PC.607', 'PC.634'];
+      var coords = [
+        [-0.276542, -0.144964, 0.066647, -0.067711, 0.176070, 0.072969,
+         -0.229889, -0.046599],
+        [-0.237661, 0.046053, -0.138136, 0.159061, -0.247485, -0.115211,
+         -0.112864, 0.064794],
+        [0.228820, -0.130142, -0.287149, 0.086450, 0.044295, 0.206043,
+         0.031000, 0.071992],
+        [0.042263, -0.013968, 0.063531, -0.346121, -0.127814, 0.013935,
+         0.030021, 0.140148],
+        [0.280399, -0.006013, 0.023485, -0.046811, -0.146624, 0.005670,
+         -0.035430, -0.255786],
+        [0.232873, 0.139788, 0.322871, 0.183347, 0.020466, 0.054059,
+         -0.036625, 0.099824],
+        [0.170518, -0.194113, -0.030897, 0.019809, 0.155100, -0.279924,
+         0.057609, 0.024248],
+        [-0.091330, 0.424147, -0.135627, -0.057519, 0.151363, -0.025394,
+         0.051731, -0.038738],
+        [-0.349339, -0.120788, 0.115275, 0.069495, -0.025372, 0.067853,
+         0.244448, -0.059883]];
+      var pct_var = [26.6887048633, 16.2563704022, 13.7754129161,
+                     11.217215823, 10.024774995, 8.22835130237, 7.55971173665,
+                     6.24945796136];
+      var md_headers = ['SampleID', 'LinkerPrimerSequence',
+                        'Treatment', 'DOB'];
+      var metadata = [
+        ['PC.636', 'YATGCTGCCTCCCGTAGGAGT', 'Control', '20070314'],
+        ['PC.635', 'YATGCTGCCTCCCGTAGGAGT', 'Fast', '20071112'],
+        ['PC.356', 'YATGCTGCCTCCCGTAGGAGT', 'Fast', '20080116'],
+        ['PC.481', 'YATGCTGCCTCCCGTAGGAGT', 'Fast', '20080116'],
+        ['PC.354', 'YATGCTGCCTCCCGTAGGAGT', 'Control', '20071210'],
+        ['PC.593', 'YATGCTGCCTCCCGTAGGAGT', 'Fast', '20080116'],
+        ['PC.355', 'YATGCTGCCTCCCGTAGGAGT', 'Control', '20061218'],
+        ['PC.607', 'YATGCTGCCTCCCGTAGGAGT', 'Control', '20061218'],
+        ['PC.634', 'YATGCTGCCTCCCGTAGGAGT', 'Control', '20061126']];
+
+      var dm, dv, spv;
+
+      init();
+      animate();
+
+      function init() {
+        // Initialize the DecompositionModel
+        dm = new DecompositionModel(name, ids, coords, pct_var,
+                                    md_headers, metadata);
+        // Initialize the DecompositionView
+        dv = new DecompositionView(dm);
+        // Initialize the ScenePlotView3D
+        spv = new ScenePlotView3D(window.innerWidth, window.innerHeight, [dv]);
+
+        document.body.appendChild(spv.renderer.domElement);
+
+        window.addEventListener( 'resize', onWindowResize, false );
+
+      }
+
+      function onWindowResize() {
+        spv.resize(window.innerWidth, window.innerHeight);
+      }
+
+      function animate() {
+        requestAnimationFrame(animate);
+        spv.render();
+      }
+
+    </script>
+
+  </body>
+</html>
diff --git a/emperor/support_files/js/sceneplotview3d.js b/emperor/support_files/js/sceneplotview3d.js
@@ -31,45 +31,51 @@
  * @class Represents a sample and the associated metadata in the ordination
  * space.
  *
- * @param {name} a string indicating the name of the scene plot view.
- * @param {start} 
- * @param {width} width of the window object container
- * @param {height} height of the window object container
- * @param {idy} an *optional* integer representing the index where the object
- * @param {countt} an *optional* Array of floats indicating the confidence
- *             intervals in each dimension.
+ * @param {width} a float with the width of the renderer
+ * @param {height} a float with the height of the renderer
+ * @param {decViews} an Array of DecompositionViews shown in this scene
  *
  **/
-ScenePlotView3D = function( start, width, height, idy, countt ){
+ScenePlotView3D = function(width, height, decViews){
+  this.decViews = decViews;
+  // Set up the renderer
+  this.rendererBackgroundColor = new THREE.Color();
+  this.rendererBackgroundColor.setHex("0x000000");
 
-//need to initialize the scene
- this.scene = new THREE.Scene();
-
-  this.start = start === undefined ? 75 : start;
-  this.width = width === undefined ? 0 : width;
-  this.height = height === undefined ? 1 : height;
-  this.idy = idy === undefined ? 0.1 : idy;
-  this.countt = countt === undefined ? 1000 : countt;
-
-  /*
-  if (this.ci.length !== 0){
-    if (this.ci.length !== this.coordinates.length){
-      throw new Error("The number of confidence intervals doesn't match with"+
-                      " the number of dimensions in the coordinates "+
-                      "attribute. coords: " + this.coordinates.length +
-                      " ci: " + this.ci.length);
-    }
-  }*/
-
-  this.camera = new THREE.PerspectiveCamera( start, width / height, idy, countt );
-  this.renderer = new THREE.WebGLRenderer();
-  this.renderer.setSize( window.innerWidth, window.innerHeight );
-  //document.body.appendChild( renderer.domElement );
+  this.renderer = new THREE.WebGLRenderer( {antialias: true, preserveDrawingBuffer: true});
+  this.renderer.setClearColor(this.rendererBackgroundColor);
+  this.renderer.setSize(width, height);
+  this.renderer.sortObjects = true;
+
+  // Set up the camera
+  this.camera = new THREE.PerspectiveCamera(35, width/height,
+                                            0.0000001, 10000);
+  this.camera.position.set(0, 0, 6);
 
-  //camera, scene, ortho or perspective camera
+  //need to initialize the scene
+  this.scene = new THREE.Scene();
+  this.scene.add(this.camera);
+  this.light = new THREE.DirectionalLight(0x999999, 2);
+  this.light.position.set(1,1,1).normalize();
+  this.camera.add(this.light);
+  // Add all the meshes to the scene
+  for (var i = 0; i < this.decViews.length; i++) {
+    for (var j = 0; j < this.decViews[i].markers.length; j++) {
+      this.scene.add(this.decViews[i].markers[j]);
+    };
+  };
+};
 
+ScenePlotView3D.prototype.setCameraAspectRatio = function(winAspect){
+  this.camera.aspect = winAspect;
+  this.camera.updateProjectionMatrix();
 };
 
-ScenePlotView3D.prototype.setCamera = function( ){
+ScenePlotView3D.prototype.resize = function(width, height){
+  this.renderer.setSize(width, height);
+  this.setCameraAspectRatio(width / height);
+};
 
-}
+ScenePlotView3D.prototype.render = function(){
+  this.renderer.render(this.scene, this.camera)
+};