Merge pull request #16 from stephenshank/master

v0.1.0

.gitignore

@@ -11,3 +11,4 @@ dist/alignment.js
 *.ttf
 *.eot
 tags*
+.tern-port

package.json

@@ -1,22 +1,21 @@
 {
   "name": "alignment.js",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "main": "lib/alignment.js",
   "license": "MIT",
   "dependencies": {
-    "@babel/plugin-proposal-class-properties": "^7.4.4",
     "@gmod/bam": "^1.0.18",
     "bootstrap": "^4.1.1",
     "d3": "5",
     "d3-save-svg": "^0.0.2",
     "express": "^4.16.4",
     "file-saver": "^2.0.0",
     "jquery": "^3.3.1",
-    "phylotree": "1.0.0-alpha.14",
+    "phylotree": "1.0.0-alpha.17",
     "popper.js": "^1.14.3",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
-    "react-phylotree": "^0.0.1",
+    "react-phylotree": "0.1.0",
     "react-router-dom": "^4.3.1",
     "save-svg-as-png": "^1.4.14",
     "text-width": "^1.2.0",
@@ -25,6 +24,7 @@
   "devDependencies": {
     "@babel/cli": "^7.4.4",
     "@babel/core": "^7.4.5",
+    "@babel/plugin-proposal-class-properties": "^7.4.4",
     "@babel/preset-env": "^7.4.5",
     "@babel/preset-react": "^7.0.0",
     "autoprefixer": "^8.4.1",

src/Alignment.jsx

@@ -43,7 +43,7 @@ class Alignment extends Component {
   }
   initialize(props) {
     if (props.fasta) {
-      const { fasta, site_size, width, height, axis_height } = props;
+      const { fasta, site_size, width, height } = props;
       this.sequence_data = fastaParser(fasta);
       const { sequence_data } = this;
       const { label_padding } = this.props;
@@ -84,6 +84,7 @@ class Alignment extends Component {
           sequence_data={this.sequence_data}
           x_pixel={this.x_pixel}
           scroll_broadcaster={this.scroll_broadcaster}
+          start_site={this.props.start_site}
         />
         <SequenceAxis
           width={this.label_width}
@@ -92,6 +93,7 @@ class Alignment extends Component {
           site_size={this.props.site_size}
           y_pixel={this.y_pixel}
           scroll_broadcaster={this.scroll_broadcaster}
+          onClick={this.props.onSequenceClick}
         />
         <BaseAlignment
           width={width - this.label_width}
@@ -119,7 +121,9 @@ Alignment.defaultProps = {
   width: 960,
   height: 500,
   sender: "main",
-  molecule: mol => mol
+  molecule: mol => mol,
+  start_site: 0,
+  onSequenceClick: (label, i) => () => null
 };
 
 export default Alignment;

src/TreeAlignment.jsx

@@ -0,0 +1,77 @@
+import React, { Component } from "react";
+
+import Placeholder from "./components/Placeholder.jsx";
+import SiteAxis from "./components/SiteAxis.jsx";
+import BaseAlignment from "./components/BaseAlignment.jsx";
+import Tree from "./components/Tree.jsx";
+import ScrollBroadcaster from "./helpers/ScrollBroadcaster";
+import { nucleotide_color, nucleotide_text_color } from "./helpers/colors";
+
+function TreeAlignment(props) {
+  const { sequence_data } = props;
+  if (!sequence_data) return <div />;
+  const { width, tree_width, height, axis_height, site_size } = props,
+    full_pixel_width = sequence_data
+      ? sequence_data[0].seq.length * site_size
+      : null,
+    full_pixel_height = sequence_data ? sequence_data.length * site_size : null,
+    alignment_width = full_pixel_width
+      ? Math.min(full_pixel_width, width - tree_width)
+      : width,
+    alignment_height = full_pixel_height
+      ? Math.min(full_pixel_height, height - axis_height)
+      : height,
+    scroll_broadcaster = new ScrollBroadcaster({
+      width: full_pixel_width,
+      height: full_pixel_height,
+      x_pad: width - tree_width,
+      y_pad: height - axis_height,
+      bidirectional: [
+        "alignmentjs-alignment",
+        "alignmentjs-axis-div",
+        "alignmentjs-tree-div"
+      ]
+    });
+  return (
+    <div id="alignmentjs-main-div">
+      <Placeholder width={tree_width} height={axis_height} />
+      <SiteAxis
+        width={alignment_width}
+        height={axis_height}
+        sequence_data={props.sequence_data}
+        scroll_broadcaster={scroll_broadcaster}
+      />
+      <Tree
+        tree={props.tree}
+        width={tree_width}
+        height={alignment_height}
+        site_size={props.site_size}
+        scroll_broadcaster={scroll_broadcaster}
+      />
+      <BaseAlignment
+        sequence_data={props.sequence_data}
+        width={alignment_width}
+        height={alignment_height}
+        site_size={props.site_size}
+        site_color={props.site_color}
+        scroll_broadcaster={scroll_broadcaster}
+        molecule={props.molecule}
+      />
+    </div>
+  );
+}
+
+TreeAlignment.defaultProps = {
+  site_color: nucleotide_color,
+  text_color: nucleotide_text_color,
+  label_padding: 10,
+  site_size: 20,
+  axis_height: 25,
+  width: 960,
+  tree_width: 500,
+  height: 500,
+  sender: "main",
+  molecule: mol => mol
+};
+
+export default TreeAlignment;

src/app.jsx

@@ -10,6 +10,7 @@ import * as FASTA from "./app/FASTA.jsx";
 import * as FNA from "./app/FNA.jsx";
 import * as BAM from "./app/BAM.jsx";
 import Components from "./app/Components.jsx";
+import PreventDefaultPatch from "./prevent_default_patch";
 import "./app/styles.scss";
 
 function Divider(props) {
@@ -86,6 +87,7 @@ function BAMLinks(props) {
       <Link to="/sam-viewer" header="Viewer" />
       <Divider header="Examples" />
       <Link to="/sam-variantcaller" header="Variant caller" />
+      <Link to="/sam-scaffold" header="Scaffold viewer" />
     </Dropdown>
   );
 }
@@ -136,6 +138,7 @@ class App extends Component {
           <Route path="/fna-basesvgtree" component={FNA.BaseSVGTreeInstance} />
 
           <Route path="/sam-viewer" component={BAM.BAMViewer} />
+          <Route path="/sam-scaffold" component={BAM.ScaffoldExample} />
           <Route path="/sam-variantcaller" component={BAM.VariantCaller} />
         </div>
       </div>
@@ -151,57 +154,7 @@ function Main(props) {
   );
 }
 
-/* Temporary fix for a breaking change in Chrome to React
- * See https://github.com/facebook/react/issues/14856
- */
-const EVENTS_TO_MODIFY = [
-  "touchstart",
-  "touchmove",
-  "touchend",
-  "touchcancel",
-  "wheel"
-];
-
-const originalAddEventListener = document.addEventListener.bind();
-document.addEventListener = (type, listener, options, wantsUntrusted) => {
-  let modOptions = options;
-  if (EVENTS_TO_MODIFY.includes(type)) {
-    if (typeof options === "boolean") {
-      modOptions = {
-        capture: options,
-        passive: false
-      };
-    } else if (typeof options === "object") {
-      modOptions = {
-        ...options,
-        passive: false
-      };
-    }
-  }
-
-  return originalAddEventListener(type, listener, modOptions, wantsUntrusted);
-};
-
-const originalRemoveEventListener = document.removeEventListener.bind();
-document.removeEventListener = (type, listener, options) => {
-  let modOptions = options;
-  if (EVENTS_TO_MODIFY.includes(type)) {
-    if (typeof options === "boolean") {
-      modOptions = {
-        capture: options,
-        passive: false
-      };
-    } else if (typeof options === "object") {
-      modOptions = {
-        ...options,
-        passive: false
-      };
-    }
-  }
-  return originalRemoveEventListener(type, listener, modOptions);
-};
-// End of temporary fix
-
+PreventDefaultPatch(document);
 ReactDOM.render(
   <Main />,
   document.body.appendChild(document.createElement("div"))