getting rid of vector editor state

.eslintrc

@@ -0,0 +1,35 @@
+{
+    "extends": ["eslint-config-airbnb"],
+    "env": {
+        "browser": true,
+        "node": true
+    },
+    "ecmaFeatures": {
+        "jsx": true
+    },
+    "parser": "babel-eslint",
+    "plugins": [
+        "react",
+        "babel"
+    ],
+    "rules": {
+        "indent": [0,4],
+        "no-else-return": 0,
+        "spaced-comment": 0,
+        "func-names": 0,
+        "space-before-function-paren": 0,
+        "space-infix-ops": 0,
+        "no-use-before-define": 0,
+        "quotes": 0,
+        "react/self-closing-comp": 0,
+        "no-trailing-spaces": 0,
+        "comma-dangle": [2, "never"],
+        "prefer-const": 0,
+        "vars-on-top": 0,
+        "babel/object-shorthand": 2,
+        "react/jsx-boolean-value": [2, "never"],
+        "react/jsx-no-duplicate-props": 2,
+        "react/sort-comp": 0,
+        "eol-last": 0,
+    }
+}

app/AASliver.js

@@ -1,51 +1,40 @@
-var React = require('react');
-var AASliver = React.createClass({
+import React, {PropTypes} from 'react';
+let AASliver = React.createClass({
     propTypes: {
-        width: React.PropTypes.number.isRequired,
-        height: React.PropTypes.number.isRequired,
-        color: React.PropTypes.string.isRequired,
-        forward: React.PropTypes.bool.isRequired,
-        positionInCodon: React.PropTypes.number.isRequired,
-        letter: React.PropTypes.string.isRequired,
-        onClick: React.PropTypes.func.isRequired
+        width: PropTypes.number.isRequired,
+        height: PropTypes.number.isRequired,
+        color: PropTypes.string.isRequired,
+        forward: PropTypes.bool.isRequired,
+        positionInCodon: PropTypes.number.isRequired,
+        letter: PropTypes.string.isRequired,
+        onClick: PropTypes.func.isRequired,
+        onDoubleClick: PropTypes.func.isRequired,
+        relativeAAPositionInRow: PropTypes.number.isRequired
     },
-    render: function() {
-        // return null
-        var fatness = 24;
-        var x1 = 50 - fatness;
-        var x2 = 50 + fatness;
-        // 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; 
-        //   }
-        // }
-        var offset = 0;
-        var offsetStrength = 7;
+    render() {
+        let fatness = 24;
+        let x1 = 50 - fatness;
+        let x2 = 50 + fatness;
+        let offset = 0;
+        let offsetStrength = 7;
         if (this.props.positionInCodon === 0) {
             offset = -1;
         } else if (this.props.positionInCodon === 2) {
             offset = 1;
         }
-        if (!this.props.forward) {
+        if (this.props.forward) {
             offset = -offset;
         }
         offset = offset * offsetStrength;
         return (
             <g
-                onClick={this.props.onClick}
-                transform={"scale(" + this.props.width/100 * 1.25 + ", "+ (this.props.height/100 ) + ") translate(" + (this.props.relativeAAPositionInRow*100 / 1.25 + offset) + ",0)" }
+                onClick={getClickHandler(this.props.onClick, this.props.onDoubleClick, 250)}
+                onDoubleClick={this.props.onDoubleClick}
+                transform={"scale(" + this.props.width / 100 * 1.25 + ", " + (this.props.height / 100 ) + ") translate(" + (this.props.relativeAAPositionInRow * 100 / 1.25 + offset) + ",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"}
+                    points={"0,0 " + x2 + ",0 100,50 " + x2 + ",100 0,100 " + x1 + ",50 0,0"}
                     strokeWidth="5"
                     // stroke="black"
                     opacity={0.5}
@@ -63,6 +52,25 @@ var AASliver = React.createClass({
                 }
             </g>
         );
+        function getClickHandler(onClick, onDblClick, pDelay) {
+            let timeoutID = null;
+            const delay = pDelay || 250;
+            return function(event) {
+                let singleClicking = true;
+                if (!timeoutID) {
+                    timeoutID = setTimeout(function() {
+                        if (singleClicking) {
+                            onClick(event);
+                        }
+                        timeoutID = null;
+                    }, delay);
+                } else {
+                    singleClicking = false;
+                    timeoutID = clearTimeout(timeoutID);
+                    onDblClick(event);
+                }
+            };
+        }
     }
 });
 module.exports = AASliver;

app/FeatureContainer.js

@@ -1,15 +1,15 @@
-var React = require('react');
-var classnames = require('classnames');
-var setSelectionLayer = require('./actions/setSelectionLayer');
-var getXStartAndWidthOfRowAnnotation = require('./getXStartAndWidthOfRowAnnotation');
-var getAnnotationRangeType = require('./getAnnotationRangeType');
-var Feature = require('./Feature');
-var PureRenderMixin = require('react/addons').addons.PureRenderMixin;
+let React = require('react');
+let classnames = require('classnames');
+let setSelectionLayer = require('./actions/setSelectionLayer');
+let getXStartAndWidthOfRowAnnotation = require('./getXStartAndWidthOfRowAnnotation');
+let getAnnotationRangeType = require('./getAnnotationRangeType');
+let Feature = require('./Feature');
+let PureRenderMixin = require('react/addons').addons.PureRenderMixin;
 
-var AnnotationContainerHolder = require('./AnnotationContainerHolder');
-var AnnotationPositioner = require('./AnnotationPositioner');
+let AnnotationContainerHolder = require('./AnnotationContainerHolder');
+let AnnotationPositioner = require('./AnnotationPositioner');
 
-var FeatureContainer = React.createClass({
+let FeatureContainer = React.createClass({
     mixins: [PureRenderMixin],
     propTypes: {
         annotationRanges: React.PropTypes.array.isRequired,
@@ -19,23 +19,23 @@ var FeatureContainer = React.createClass({
         spaceBetweenAnnotations: React.PropTypes.number.isRequired,
     },
     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;
+        let annotationRanges = this.props.annotationRanges;
+        let bpsPerRow = this.props.bpsPerRow;
+        let charWidth = this.props.charWidth;
+        let annotationHeight = this.props.annotationHeight;
+        let spaceBetweenAnnotations = this.props.spaceBetweenAnnotations;
 
         if (annotationRanges.length === 0) {
             return null;
         }
-        var maxAnnotationYOffset = 0;
-        var annotationsSVG = [];
+        let maxAnnotationYOffset = 0;
+        let annotationsSVG = [];
         annotationRanges.forEach(function(annotationRange) {
             if (annotationRange.yOffset > maxAnnotationYOffset) {
                 maxAnnotationYOffset = annotationRange.yOffset;
             }
-            var annotation = annotationRange.annotation;
-            var result = getXStartAndWidthOfRowAnnotation(annotationRange, bpsPerRow, charWidth);
+            let annotation = annotationRange.annotation;
+            let result = getXStartAndWidthOfRowAnnotation(annotationRange, bpsPerRow, charWidth);
             annotationsSVG.push(
                 <AnnotationPositioner 
                     height={annotationHeight} 
@@ -60,7 +60,7 @@ var FeatureContainer = React.createClass({
                 </AnnotationPositioner>
             );
         });
-        var containerHeight = (maxAnnotationYOffset + 1) * (annotationHeight + spaceBetweenAnnotations);
+        let containerHeight = (maxAnnotationYOffset + 1) * (annotationHeight + spaceBetweenAnnotations);
         return (
             <AnnotationContainerHolder 
                 containerHeight={containerHeight}>

app/MapView.js

@@ -7,11 +7,11 @@ var baobabBranch = require('baobab-react/mixins').branch;
 var RowView = React.createClass({
   mixins: [baobabBranch],
   cursors: {
-    preloadRowStart: ['vectorEditorState', 'preloadRowStart'],
-    averageRowHeight: ['vectorEditorState', 'averageRowHeight'],
-    rowViewDimensions: ['vectorEditorState', 'rowViewDimensions'],
+    preloadRowStart: ['preloadRowStart'],
+    averageRowHeight: ['averageRowHeight'],
+    rowViewDimensions: ['rowViewDimensions'],
     sequenceData: ['$combinedSequenceData'],
-    selectionLayer: ['vectorEditorState', 'selectionLayer'],
+    selectionLayer: ['selectionLayer'],
   },