update mini-example and README.md

Wolfgang Beyer · Wolfgang Beyer · commit 7a4387eb8553 · 2017-06-12T18:29:24.000+02:00
diff --git a/LICENSE.txt b/LICENSE.txt
@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2016 Wolfgang Beyer
+Copyright (c) 2017 Wolfgang Beyer
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
diff --git a/README.md b/README.md
@@ -41,68 +41,77 @@ There already exist various JavaScript tools for the visualization of graphs (se
 
 The demo at [https://wolfib.github.io/sequenceTubeMap/](https://wolfib.github.io/sequenceTubeMap/) contains some example visualizations as well as a way to generate visalizations from custom data.
 
-Another way to use this module is to include it in your own code. The whole visualization logic is contained in [`sequenceTubeMap.js`](https://github.com/wolfib/sequenceTubeMap/blob/master/sequenceTubeMap.js) and a handful of css rules are defined in [`sequenceTubeMapStyle.css`](https://github.com/wolfib/sequenceTubeMap/blob/master/sequenceTubeMapStyle.css). For the actual drawing the module uses [d3.js](https://d3js.org/), so this library has to be included as well. A minimal example would look like this:
+Another way to use this module is to include it in your own code. The whole visualization logic is contained in [`tubemap.js`](https://github.com/wolfib/sequenceTubeMap/blob/master/app/scripts/tubemap.js) and a handful of css rules are defined in [`tubemap.css`](https://github.com/wolfib/sequenceTubeMap/blob/master/app/styles/tubemap.css). tubemap.js is an ES6 module and importing it requires ES6's import command, which is not supported by most browsers natively at this time. The code therefore needs to be transpiled before it can be executed in the browser.
 
+In addition, the module uses [d3.js](https://d3js.org/), [jQuery](https://jquery.com/) and [Bootstrap](https://getbootstrap.com/).
+
+A minimal example would look like this:
+
+miniExample.html
 ```html
 <!DOCTYPE html>
 <html>
 <head>
-  <title>sequenceTubeMap.js Minimal Example</title>
-  <script type="text/javascript" src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
-  <script src="sequenceTubeMap.js"></script>
-  <link rel="stylesheet" type="text/css" href="sequenceTubeMapStyle.css">
+  <title>Sequence Tube Map Minimal Example</title>
+  <link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.css" />
+  <link rel="stylesheet" href="styles/tubemap.css">
 </head>
 <body>
-  <p>A minimal example created with sequenceTubeMap.js:</p>
-  <div id="chart"></div>
-
-  <script type="text/javascript">
+  <p>A minimal example created with the Sequence Tube Maps JavaScript Module:</p>
+  <div id="legendDiv"></div>
+  <div id="chart">
+    <svg id="svg">
+    </svg>
+  </div>
+  <script src="/bower_components/jquery/dist/jquery.js"></script>
+  <script src="/bower_components/d3/d3.js"></script>
+  <script src="scripts/miniExample.bundle.js"></script>
+</body>
+</html>
+```
 
-    var nodes = [
-      {name: "A", width: 1},
-      {name: "B", width: 2},
-      {name: "C", width: 3}
-    ];
+miniExample.js
+```javascript
+import * as tubeMap from './tubemap';
 
-    var paths = [
-      {id: 0, sequence: ["A", "B", "C"]},
-      {id: 1, sequence: ["A", "B", "C"]},
-      {id: 2, sequence: ["A", "C"]}
-    ];
+const nodes = [
+  { name: 'A', seq: 'AAAA' },
+  { name: 'B', seq: 'TTG' },
+  { name: 'C', seq: 'CC' },
+];
 
-    var svg = d3.select("#chart").append("svg");
+const paths = [
+  { id: 0, name: 'Track 1', sequence: ['A', 'B', 'C'] },
+  { id: 1, name: 'Track 2', sequence: ['A', '-B', 'C'] },
+  { id: 2, name: 'Track 3', sequence: ['A', 'C'] },
+];
 
-    sequenceTubeMap.create(svg, nodes, paths);
+tubeMap.create({
+  svgID: '#svg',
+  nodes,
+  tracks: paths,
+});
+tubeMap.useColorScheme(0);
+```html
 
-  </script>
-</body>
-</html>
-```
 (See the result [here](https://wolfib.github.io/sequenceTubeMap/miniExample.html).)
 
-[`sequenceTubeMap.js`](https://github.com/wolfib/sequenceTubeMap/blob/master/sequenceTubeMap.js) uses very simple custom JSON data structures for its input data:
+[`tubemap.js`](https://github.com/wolfib/sequenceTubeMap/blob/master/app/scripts/tubemap.js) uses very simple custom JSON data structures for its input data:
 
-Nodes are defined by a `name` attribute (has to be unique) and either a `width` or a `sequenceLength` attribute. `width` determines the node's width directly whereas `sequenceLength` is used as input into a scaling function whose return value is the actual node `width` attribute to be used in the visualization.
+Nodes are defined by a `name` attribute (has to be unique) and a `seq` attribute which contains the node's sequence of bases.
 ```javascript
-var nodes = [
-  {name: "A", width: 1},
-  {name: "B", width: 2},
-  {name: "C", width: 3}
-];
-
-var nodes = [
-  {name: "A", sequenceLength: 1},
-  {name: "B", sequenceLength: 2},
-  {name: "C", sequenceLength: 3}
+const nodes = [
+  { name: 'A', seq: 'AAAA' },
+  { name: 'B', seq: 'TTG' },
+  { name: 'C', seq: 'CC' },
 ];
 ```
-
-Paths each have a unique and consecutively numbered `id` attribute (starting with 0) and a `sequence` attribute which contains a array of node `name` attributes. If a node is traversed in reversed direction, the node `name` is prefixed by a `-`-symbol.
+Paths each have a unique and consecutively numbered `id` attribute (starting with 0), a `name` attribute and a `sequence` attribute which contains a array of node `name` attributes. If a node is traversed in reversed direction, the node `name` is prefixed by a `-`-symbol.
 ```javascript
-var paths = [
-  {id: 0, sequence: ["A", "B", "C"]},
-  {id: 1, sequence: ["A", "-C", "-B"]},
-  {id: 2, sequence: ["A", "C"]}
+const paths = [
+  { id: 0, name: 'Track 1', sequence: ['A', 'B', 'C'] },
+  { id: 1, name: 'Track 2', sequence: ['A', '-B', 'C'] },
+  { id: 2, name: 'Track 3', sequence: ['A', 'C'] },
 ];
 ```
 
@@ -113,4 +122,4 @@ vg view -j filename.vg >filename.json
 JSON files generated in such a way can be parsed and displayed by the demo at [https://wolfib.github.io/sequenceTubeMap/](https://wolfib.github.io/sequenceTubeMap/).
 
 ## License
-Copyright (c) 2016 Wolfgang Beyer, licensed under the MIT License.
+Copyright (c) 2017 Wolfgang Beyer, licensed under the MIT License.
diff --git a/app/index.html b/app/index.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8">
     <meta name="description" content="">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>sequenceTubeMap.js Demo</title>
+    <title>Sequence Tube Map Demo</title>
 
     <link rel="apple-touch-icon" href="apple-touch-icon.png">
     <!-- Place favicon.ico in the root directory -->
@@ -16,7 +16,7 @@
     <!-- endbuild -->
 
     <!-- build:css styles/main.css -->
-    <link rel="stylesheet" href="styles/tube-maps.css">
+    <link rel="stylesheet" href="styles/tubemap.css">
     <!-- endbuild -->
 
   </head>
@@ -189,7 +189,7 @@ <h4>Display Options</h4>
 
     <!-- build:js scripts/main.js -->
     <!--<script src="scripts/main.js"></script>-->
-    <script src="scripts/bundle.js"></script>
+    <script src="scripts/main.bundle.js"></script>
     <!-- endbuild -->
     <!--<script src="exampleData/cactus-data.js"></script>-->
   </body>
diff --git a/app/miniExample.html b/app/miniExample.html
@@ -1,33 +1,19 @@
 <!DOCTYPE html>
 <html>
 <head>
-  <title>sequenceTubeMap.js Minimal Example</title>
-  <script type="text/javascript" src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
-  <script src="sequenceTubeMap.js"></script>
-  <link rel="stylesheet" type="text/css" href="sequenceTubeMapStyle.css">
+  <title>Sequence Tube Map Minimal Example</title>
+  <link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.css" />
+  <link rel="stylesheet" href="styles/tubemap.css">
 </head>
 <body>
-  <p>A minimal example created with sequenceTubeMap.js:</p>
-  <div id="chart"></div>
-
-  <script type="text/javascript">
-
-    var nodes = [
-      {name: "A", width: 1},
-      {name: "B", width: 2},
-      {name: "C", width: 3}
-    ];
-
-    var paths = [
-      {id: 0, sequence: ["A", "B", "C"]},
-      {id: 1, sequence: ["A", "B", "C"]},
-      {id: 2, sequence: ["A", "C"]}
-    ];
-
-    var svg = d3.select("#chart").append("svg");
-    sequenceTubeMap.setNodeWidthOption(0);
-    sequenceTubeMap.create(svg, nodes, paths);
-
-  </script>
+  <p>A minimal example created with the Sequence Tube Maps JavaScript Module:</p>
+  <div id="legendDiv"></div>
+  <div id="chart">
+    <svg id="svg">
+    </svg>
+  </div>
+  <script src="/bower_components/jquery/dist/jquery.js"></script>
+  <script src="/bower_components/d3/d3.js"></script>
+  <script src="scripts/miniExample.bundle.js"></script>
 </body>
 </html>
diff --git a/app/scripts/miniExample.js b/app/scripts/miniExample.js
@@ -0,0 +1,20 @@
+import * as tubeMap from './tubemap';
+
+const nodes = [
+  { name: 'A', seq: 'AAAA' },
+  { name: 'B', seq: 'TTG' },
+  { name: 'C', seq: 'CC' },
+];
+
+const paths = [
+  { id: 0, name: 'Track 1', sequence: ['A', 'B', 'C'] },
+  { id: 1, name: 'Track 2', sequence: ['A', '-B', 'C'] },
+  { id: 2, name: 'Track 3', sequence: ['A', 'C'] },
+];
+
+tubeMap.create({
+  svgID: '#svg',
+  nodes,
+  tracks: paths,
+});
+tubeMap.useColorScheme(0);
diff --git a/app/scripts/tubemap.js b/app/scripts/tubemap.js
@@ -1517,6 +1517,8 @@ function generateSVGShapesFromPath() {
     } else {
       xStart = getReadXStart(track);
     }
+    maxYCoordinate = Math.max(maxYCoordinate, yStart + track.width);
+    minYCoordinate = Math.min(minYCoordinate, yStart);
 
     // middle of path
     for (let i = 0; i < track.path.length; i += 1) {
@@ -2169,24 +2171,30 @@ export function vgExtractNodes(vg) {
 
 // calculate node widths depending on sequence lengths and chosen calculation method
 function generateNodeWidth() {
+  nodes.forEach((node) => {
+    if (!node.hasOwnProperty('sequenceLength')) {
+      node.sequenceLength = node.seq.length;
+    }
+  });
+
   switch (config.nodeWidthOption) {
     case 1:
       nodes.forEach((node) => {
-        if (node.hasOwnProperty('sequenceLength')) node.width = (1 + (Math.log(node.sequenceLength) / Math.log(2)));
+        node.width = (1 + (Math.log(node.sequenceLength) / Math.log(2)));
         node.pixelWidth = Math.round((node.width - 1) * 8.401);
       });
       break;
     case 2:
       nodes.forEach((node) => {
         // if (node.hasOwnProperty('sequenceLength')) node.width = (1 + Math.log(node.sequenceLength) / Math.log(10));
         // node.pixelWidth = Math.round((node.width - 1) * 8.401);
-        if (node.hasOwnProperty('sequenceLength')) node.width = (node.sequenceLength / 100);
+        node.width = (node.sequenceLength / 100);
         node.pixelWidth = Math.round((node.width - 1) * 8.401);
       });
       break;
     default:
       nodes.forEach((node) => {
-        if (node.hasOwnProperty('sequenceLength')) node.width = node.sequenceLength;
+        node.width = node.sequenceLength;
 
         // get width of node's text label by writing label, measuring it and removing label
         svg.append('text')
diff --git a/app/styles/tubemap.css b/app/styles/tubemap.css
diff --git a/gulpfile.js b/gulpfile.js
@@ -9,6 +9,8 @@ const browserify = require('browserify');
 const babelify = require('babelify');
 const buffer = require('vinyl-buffer');
 const source = require('vinyl-source-stream');
+const rename = require('gulp-rename');
+const es = require('event-stream');
 
 const $ = gulpLoadPlugins();
 const reload = browserSync.reload;
@@ -25,19 +27,22 @@ gulp.task('styles', () => {
 });
 
 gulp.task('scripts', () => {
-  // return gulp.src('app/scripts/**/*.js')
-
-  const b = browserify({
-    entries: 'app/scripts/main.js',
-    transform: babelify,
-    debug: true,
-    //alt// noParse: ['/Users/wolfgang/Dropbox/Websites/webappES6/app/scripts/cactus-data.js'],
-    //exclude: [require.resolve('./app/scripts/cactus-data.js')],
-  });
-  // console.log(require.resolve('./app/scripts/cactus-data.js'));
-
-  return b.bundle()
-    .pipe(source('bundle.js'))
+  const files = [
+    'app/scripts/main.js',
+    'app/scripts/miniExample.js'
+  ];
+
+  const tasks = files.map((entry) => {
+    return browserify({
+      entries: [entry],
+      transform: babelify,
+      debug: true,
+    })
+    .bundle()
+    .pipe(source(entry.substr(entry.lastIndexOf('/') + 1)))
+    .pipe(rename({
+      extname: '.bundle.js',
+    }))
     .pipe($.plumber())
     // .pipe($.sourcemaps.init())
     // .pipe($.babel())
@@ -46,6 +51,8 @@ gulp.task('scripts', () => {
     .pipe($.sourcemaps.write('.'))
     .pipe(gulp.dest('.tmp/scripts'))
     .pipe(reload({ stream: true }));
+  });
+  return es.merge.apply(null, tasks);
 });
 
 function lint(files, options) {
diff --git a/package.json b/package.json
@@ -14,7 +14,9 @@
   "dependencies": {
     "body-parser": "^1.15.2",
     "cors": "^2.8.1",
-    "express": "^4.14.0"
+    "event-stream": "^3.3.4",
+    "express": "^4.14.0",
+    "gulp-rename": "^1.2.2"
   },
   "devDependencies": {
     "babel-core": "^6.4.0",
@@ -59,16 +61,30 @@
     },
     "extends": "airbnb",
     "rules": {
-      "quotes": [2, "single"],
-      "no-use-before-define": ["error", { "functions": false, "variables": true }],
-      "no-mixed-operators": ["error", {"allowSamePrecedence": true}]
+      "quotes": [
+        2,
+        "single"
+      ],
+      "no-use-before-define": [
+        "error",
+        {
+          "functions": false,
+          "variables": true
+        }
+      ],
+      "no-mixed-operators": [
+        "error",
+        {
+          "allowSamePrecedence": true
+        }
+      ]
     },
     "parserOptions": {
       "ecmaVersion": 6,
       "sourceType": "module"
     },
     "globals": {
-        "d3": true
+      "d3": true
     }
   }
 }
