Turn project into modular library, add support for Odin-format annotations and other features

.babelrc

@@ -1 +1,7 @@
-{ "presets": ["es2015"] }
+{
+  "presets": ["@babel/env"],
+  "plugins": [
+    "@babel/plugin-transform-runtime",
+    ["@babel/plugin-proposal-decorators", { "legacy": true }]
+  ]
+}

.eslintrc.json

@@ -0,0 +1,43 @@
+{
+  "env": {
+    "node": true,
+    "es6": true,
+    "browser": true,
+    "jest": true
+  },
+  "extends": "eslint:recommended",
+  "rules": {
+    "no-console": "off",
+    "indent": [
+      "error",
+      2,
+      {
+        "FunctionDeclaration": {
+          "parameters": "first"
+        },
+        "FunctionExpression": {
+          "parameters": "first"
+        },
+        "CallExpression": {
+          "arguments": 1
+        },
+        "SwitchCase": 1
+      }
+    ],
+    "quotes": [
+      "error",
+      "double",
+      {
+        "allowTemplateLiterals": true
+      }
+    ],
+    "semi": [
+      "error",
+      "always"
+    ]
+  },
+  "parser": "babel-eslint",
+  "parserOptions": {
+    "ecmaVersion": 2017
+  }
+}

.gitignore

@@ -22,3 +22,5 @@ Session.vim
 .netrwhist
 *~
 
+# IntelliJ
+.idea

.jsdoc.json

@@ -0,0 +1,19 @@
+{
+  "plugins": [
+    "plugins/markdown"
+  ],
+  "templates": {
+    "referenceTitle": "TextAnnotationGraphs",
+    "disableSort": true,
+    "collapse": false,
+    "resources": {
+      "SVG Path Spec<br>": "https://www.w3.org/TR/SVG/paths.html#PathData",
+      "SVG Cubic Bézier Curve Generator": "https://codepen.io/explosion/pen/YGApwd"
+    }
+  },
+  "opts": {
+    "encoding": "utf8",
+    "recurse": true,
+    "template": "src/jsdoc-template"
+  }
+}

.travis.yml

@@ -0,0 +1,7 @@
+dist: trusty
+language: node_js
+node_js:
+  - "8"
+
+install:
+  - npm install

README.md

@@ -1,23 +1,23 @@
 # TextAnnotationGraphs (TAG)
 A modular annotation system that supports complex, interactive annotation graphs embedded on top of sequences of text. An additional view displays a subgraph of selected connections between words/phrases using an interactive network layout.
 
-![TAG](/figs/OneRow.png)
+![TAG](figs/OneRow.png)
 
 ---
 
-![TAG](/figs/taxonomyColors.png)
+![TAG](figs/taxonomyColors.png)
 
 ---
 
-![TAG](/figs/TwoRows.png)
+![TAG](figs/TwoRows.png)
 
 ---
 
-![TAG](/figs/trees.png)
+![TAG](figs/trees.png)
 
 
 ## Development
-TAG was developed by Angus Forbes (UC Santa Cruz) and Kristine Lee (University of Illinios at Chicago), in collaboration with Gus Hahn-Powell, Marco Antonio Valenzuela Escárcega, and Mihai Surdeanu (University of Arizona). Contact angus@ucsc.edu for more information.
+TAG was developed by Angus Forbes (UC Santa Cruz) and Kristine Lee (University of Illinios at Chicago), in collaboration with Gus Hahn-Powell, Marco Antonio Valenzuela Escárcega, Zechy Wong, and Mihai Surdeanu (University of Arizona). Contact angus@ucsc.edu for more information.
 
 # Citing TAG
 
@@ -51,17 +51,64 @@ TAG can be built and installed using [`npm`](https://docs.npmjs.com/getting-star
 npm install git+https://github.com/CreativeCodingLab/TextAnnotationGraphs.git
 ```
 
+## Usage
+
+To use TAG with your own applications, first include the library in your script:
+
+#### Browserify (CommonJS)
+
+```
+const TAG = require("text-annotation-graphs");
+```
+
+#### ES6
+
+```
+import TAG from "text-annotation-graphs";
+```
+
+Then initialise the visualisation on an element, optionally specifying the initial data set to load and any overrides to the default options.  For more details, consult the full API documentation.
+
+```
+const graph = TAG.tag({
+  container: $container,
+  data: {...},
+  format: "odin",
+  options: {...}
+});
+```
+
 ## Development
 
-Tasks are managed with [`npm` scripts](https://docs.npmjs.com/misc/scripts).
+Tasks are managed via [`npm` scripts](https://docs.npmjs.com/misc/scripts) and the [`runjs` build tool](https://github.com/pawelgalazka/runjs).  The most commonly used tasks are listed in `package.json`, and details for the various sub-tasks can be found in `runfile.js`.
+
+### Demo
+
+After cloning the repository and installing the project dependencies via `npm install`, you can run the interactive demo using `npm run demo` and directing your browser to `localhost:8080`.
+
+To run the demo on a different port, set the `PORT` environmental variable. For example, running `PORT=9000 npm run demo` will start the demo server on `localhost:9000` instead.
+
 
 ### Building the source
-Assuming you've cloned the repository, simply run `npm run all` to install dependencies and transpile the source to ES2015.
+
+TAG is written in ES6, and uses [Sass](https://sass-lang.com/) for its styles.
+
+Assuming you've cloned the repository, simply run `npm install && npm run build` to install dependencies and transpile the source to ES2015.
 
 ### Live monitoring of changes
 
-For convience, you can monitor changes to the library's source (css + js) with the following `npm` task:
+For convenience, you can monitor changes to the library's sources (css + js) with the following `npm` task: 
 
 ```
 npm run watch
 ```
+
+### Generating documentation
+
+TAG uses [JSDoc](http://usejsdoc.org/) to generate its documentation. By default, the documentation is generated using the template in `src/jsdoc-template` (adapted from the [Braintree JSDoc Template](https://github.com/braintree/jsdoc-template)) and stored in the `docs` folder.
+
+To regenerate the documentation, use the following `npm` task:
+
+```
+npm run generate-docs
+``` 

__mocks__/svg.draggable.js.js

@@ -0,0 +1,6 @@
+/**
+ * svg.draggable.js doesn't play nice with Jest, for some reason.  (Probably
+ * because it expects `SVG` to be available as a bare global)
+ * We don't need its functionality in testing, so we're replacing it
+ * completely with this mock that does nothing.
+ */