Merge pull request #2 from tnrich/baobabV2InfiniteScrollerModular

BaobabV2InfiniteScrollerModular

.deprc

@@ -0,0 +1,3 @@
+{
+	"root": "./"
+}

.gitignore

@@ -1 +1,5 @@
-node_modules/
+node_modules/
+app/App.js
+stats.json
+bundle.js
+npm-debug.log

.jshintrc

@@ -0,0 +1,81 @@
+{
+
+    "maxerr"        : 50,    
+
+    "bitwise"       : true,  
+    "camelcase"     : true,  
+    "curly"         : true,  
+    "eqeqeq"        : true,  
+    "forin"         : true,  
+    "freeze"        : true,  
+    "immed"         : false, 
+    "indent"        : 4,     
+    "latedef"       : false, 
+    "newcap"        : false, 
+    "noarg"         : true,  
+    "noempty"       : true,  
+    "nonbsp"        : true,  
+    "nonew"         : false, 
+    "plusplus"      : false, 
+    "quotmark"      : false,
+
+
+
+
+    "undef"         : true,  
+    "unused"        : true,  
+    "strict"        : false,  
+    "maxparams"     : false, 
+    "maxdepth"      : false, 
+    "maxstatements" : false, 
+    "maxcomplexity" : false, 
+    "maxlen"        : false, 
+
+    "asi"           : false, 
+    "boss"          : false, 
+    "debug"         : false, 
+    "eqnull"        : false, 
+    "es5"           : false,   
+    "esnext"        : true,    
+    "moz"           : false,   
+
+    "evil"          : false,   
+    "expr"          : false,   
+    "funcscope"     : false,   
+    "globalstrict"  : false,   
+    "iterator"      : false,   
+    "lastsemic"     : false,   
+    "laxbreak"      : false,   
+    "laxcomma"      : false,   
+    "loopfunc"      : false,   
+    "multistr"      : false,   
+    "noyield"       : false,   
+    "notypeof"      : false,   
+    "proto"         : false,   
+    "scripturl"     : false,   
+    "shadow"        : false,   
+    "sub"           : false,   
+    "supernew"      : false,   
+    "validthis"     : false,   
+
+    "browser"       : true,    
+    "browserify"    : false,   
+    "couch"         : false,   
+    "devel"         : true,    
+    "dojo"          : false,   
+    "jasmine"       : false,   
+    "jquery"        : false,   
+    "mocha"         : true,    
+    "mootools"      : false,   
+    "node"          : true,   
+    "nonstandard"   : false,   
+    "prototypejs"   : false,   
+    "qunit"         : false,   
+    "rhino"         : false,   
+    "shelljs"       : false,   
+    "worker"        : false,   
+    "wsh"           : false,   
+    "yui"           : false,   
+
+    "globals"       : {}       
+}

README.md

@@ -25,18 +25,19 @@ after that, you can run
 
 to start the development server with live-reload
 
-#####Concepts employed:
+#### To run tests:
+
+	npm run test
 
-View --(triggers)--> Actions --(update)--> State
+Tests are written with mocha using node's built in assertion library.
 
-or in this case: 
+To debug tests in node inspector: npm run testDebug
 
-React components --(trigger)--> AppActions.js --(update)--> Baobab tree
 
+####Concepts employed:
 
-#### To run tests:
-npm run test
+View --(triggers)--> Actions --(update)--> State
 
-Tests are written with mocha using nodes built in assertion library.
-To debug tests (in node inspector that is): npm run testDebug
+or in this case: 
 
+React components --(trigger)--> AppActions.js --(update)--> Baobab tree

app/AAHydrophobicityMap.js

@@ -0,0 +1,22 @@
+module.exports = {
+	'Ile':4.5,
+	'Val':4.2,
+	'Leu':3.8,
+	'Phe':2.8,
+	'Cys':2.5,
+	'Met':1.9,
+	'Ala':1.8,
+	'Gly':-0.4,
+	'Thr':-0.7,
+	'Ser':-0.8,
+	'Trp':-0.9,
+	'Tyr':-1.3,
+	'Pro':-1.6,
+	'His':-3.2,
+	'Glu':-3.5,
+	'Gln':-3.5,
+	'Asp':-3.5,
+	'Asn':-3.5,
+	'Lys':-3.9,
+	'Arg':-4.5
+}

app/AASliver.js

@@ -0,0 +1,49 @@
+var React = require('react');
+var AASliver = React.createClass({
+    render: function() {
+        // return null
+        var fatness = 24;
+        var x1 = 50 - fatness;
+        var x2 = 50 + fatness;
+        var shift = this.props.shift;
+        // var shift = 0;
+        // if (this.props.positionInCodon === 1) {
+        //     shift = x2;
+        // }
+        // if (this.props.forward) {
+        //   if (this.props.positionInCodon === 2) {
+        //     shift = x2 * 2; 
+        //   }
+        // } else {
+        //   if (this.props.positionInCodon === 0) {
+        //     shift = x2 * 2; 
+        //   }
+        // }
+        return (
+          <g
+            onClick={this.props.onClick}
+            transform={"translate(" + shift + ",0)"}
+            >
+            <polyline
+              transform={this.props.forward ? null : "translate(100,0) scale(-1,1) "}
+              points={"0,0 " + x2 + ",0 100,50 " + x2 + ",100 0,100 "+x1+",50 0,0"}
+              strokeWidth="5"
+              // stroke="black"
+              opacity={.5}
+              fill={this.props.color || 'orange'}>
+            </polyline>
+            {this.props.positionInCodon === 1 &&
+            <text 
+              transform="scale(3,3) translate(17,21)"
+              x="0"  
+              y="0"
+              style={{textAnchor: "middle"}}
+              >
+              {this.props.letter}
+            </text>
+            }
+          </g>
+        );
+    }
+});
+module.exports = AASliver;

app/AnnotationContainer.js

@@ -0,0 +1,104 @@
+
+var React = require('react');
+var classnames = require('classnames');
+var setSelectionLayer = require('./actions/setSelectionLayer');
+var getXStartAndWidthOfRowAnnotation = require('./getXStartAndWidthOfRowAnnotation');
+var getXCenterOfRowAnnotation = require('./getXCenterOfRowAnnotation');
+
+
+var AnnotationContainer = React.createClass({
+  render: function () {
+    var annotationRanges = this.props.annotationRanges;
+    var bpsPerRow = this.props.bpsPerRow;
+    var charWidth = this.props.charWidth;
+    var annotationHeight = this.props.annotationHeight;
+    var spaceBetweenAnnotations = this.props.spaceBetweenAnnotations;
+
+    if (annotationRanges.length === 0) {
+      return null;
+    }
+    var maxAnnotationYOffset = 0;
+    var annotationsSVG = [];
+    annotationRanges.forEach(function(annotationRange) {
+      if (annotationRange.yOffset > maxAnnotationYOffset) {
+        maxAnnotationYOffset = annotationRange.yOffset;
+      }
+      var annotation = annotationRange.annotation;
+
+      annotationsSVG.push(<path
+        onClick={function (event) {
+          // appActions.setCaretPosition(-1);
+          setSelectionLayer(this);
+          event.stopPropagation();
+        }.bind(annotation)}
+        key={annotation.id + 'start:' + annotationRange.start}
+        className={classnames(annotation.id, annotation.type)}
+        d={createAnnotationRawPath(annotationRange, bpsPerRow, charWidth, annotationHeight)}
+        stroke={annotation.color}
+        fillOpacity={0.4}
+        fill={annotation.color}/>); //tnrtodo: change fill opacity to a passed variable
+
+      annotationsSVG.push(<path
+        key={'directionArrow' + annotation.id + 'start:' + annotationRange.start}
+        d={createAnnotationArrowRawPath(annotationRange, bpsPerRow, charWidth, annotationHeight)}
+        stroke={'black'} />);
+    });
+    var height = (maxAnnotationYOffset + 1) * (annotationHeight + spaceBetweenAnnotations);
+    return (
+      <svg className="annotationContainer" width="100%" height={height} >
+        {annotationsSVG}
+      </svg>
+    );
+    function createAnnotationArrowRawPath(annotationRange, bpsPerRow, charWidth, annotationHeight) {
+      var annotation = annotationRange.annotation;
+      var xCenter = getXCenterOfRowAnnotation(annotationRange, bpsPerRow, charWidth);
+      var yStart = annotationRange.yOffset * (annotationHeight + spaceBetweenAnnotations);
+      var rangeType = annotationRange.rangeType;
+      var forward = annotation.forward;
+      var xStart = xCenter - charWidth/2;
+      var xEnd = xCenter + charWidth/2;
+      var yEnd = yStart + annotationHeight;
+      var yMiddle = yStart + annotationHeight/2;
+      var path;
+      if (forward) {
+        path = "M" + xStart + "," + yStart + " L" + xEnd + "," + yMiddle + " L" + xStart + "," + yEnd;
+      } else {
+
+      }
+      //either "beginning", "end" or "beginningAndEnd"
+      if (rangeType === 'beginningAndEnd') {
+
+      } else {
+
+      }
+      return path;
+    }
+
+    function createAnnotationRawPath(annotationRange, bpsPerRow, charWidth, annotationHeight) {
+      var annotation = annotationRange.annotation;
+      var result = getXStartAndWidthOfRowAnnotation(annotationRange, bpsPerRow, charWidth);
+      var yStart = annotationRange.yOffset * (annotationHeight + spaceBetweenAnnotations);
+      var height = annotationHeight;
+      var rangeType = annotationRange.rangeType;
+      var forward = annotation.forward;
+      var xEnd = result.xStart + result.width;
+      var yEnd = yStart + height;
+
+      if (forward) {
+
+      } else {
+
+      }
+      //either "beginning", "end" or "beginningAndEnd"
+      if (rangeType === 'beginningAndEnd') {
+
+      } else {
+
+      }
+      var path = "M" + result.xStart + "," + yStart + " L" + xEnd + "," + yStart + " L" + xEnd + "," + yEnd + " L" + result.xStart + "," + yEnd + " Z";
+      return path;
+    }
+
+  }
+});
+module.exports = AnnotationContainer;