New UD Annotatrix logo

.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": ["@babel/preset-env"],
+  "plugins": ["transform-es5-property-mutators"]
+}

.clang-format

@@ -0,0 +1,12 @@
+# vim: syntax=yaml
+Language: JavaScript
+BasedOnStyle: LLVM
+TabWidth: 2
+IndentWidth: 2
+UseTab: Never
+SpacesInContainerLiterals: false
+IndentCaseLabels: false
+JavaScriptQuotes: Double
+JavaScriptWrapImports: true
+AlignAfterOpenBracket: true
+ColumnLimit: 120

.gitignore

@@ -0,0 +1,28 @@
+# environment stuff
+.env
+ud-env
+
+# python compiled files
+__pycache__
+*.pyc
+
+# db files
+corpora
+.users.db
+
+# log stuff
+logs
+
+# vim swap files
+*.swp
+
+# node stuff
+node_modules
+build
+.nyc_output
+
+# ubuntu process files
+.nfs*
+
+# OS files
+.DS_Store

AUTHORS

@@ -1,9 +1,9 @@
 Original UD annotatrix by Jonathan North Washington
   jonorthwash.github.io/visualise.html
-Edits and fixes made by Tai Vongsathorn Warner
-  https://midasdoas.github.io/visualise.html
-Contributions by Mariya Sheyanova
-  maryszmary.github.io/ud-annotatrix/standalone/annotator.html
+Google Summer of Code (2017, 2018, 2019)
+  Mariya Sheyanova (@maryszmary)
+  Kevin Murphy (@keggsmurph21)
+  Alyaxey Yaskevich (@yaskevich)
 GCI 2016 and 2017 students
   Grzegorz Stark (@gstark0)
   Jonathan Pan (@JPJPJPOPOP)
@@ -15,3 +15,5 @@ Other contributors
   Francis Tyers (@ftyers)
   Sushain Cherivirala (@sushain97)
   Kevin Brubeck Unhammer (@unhammer)
+  Tai Vongsathorn Warner (@midasdoas)
+  Daniel Swanson (@mr-martian)

README.md

@@ -1,92 +1,199 @@
-# ud-annotatrix
+# UD Annotatrix
 
-The online interface is currently available from several places:
+UD Annotatrix: a simple, sleek, fast editor for Universal Dependencies treebanks.
 
-* [Masha's GitHub pages](https://maryszmary.github.io/ud-annotatrix/standalone/annotator.html). 
-* [Fran's GitHub pages](https://ftyers.github.io/ud-annotatrix/). 
-* [Server version on web-corpora](http://web-corpora.net/wsgi3/annotatrix/)(beta).
+![UD Annotatrix Screenshot](resources/screenshot.png)
 
-To use it offline, clone this repository to your local machine and open the file `index.html` in your browser.
+## About
+UD Annotatrix is a client-side, browser-only, language-independent tool for editing dependency trees according to the guidelines established by the [Universal Dependencies](https://universaldependencies.org) project.  UD-Annotatrix supports uploading corpora to the browser to add, remove, and edit dependencies in a wide variety of formats (managed with the [`notatrix`](notatrix/) tool), including:
+ - [CoNLL-U](http://universaldependencies.org/format.html)
+ - [VISL CG3](http://beta.visl.sdu.dk/cg3/single/#streamformats)
+ - Brackets
+ - SDParse
+ - plain text
+
+Note: [brat](http://brat.nlplab.org) and [CoNLLUEditor](https://github.com/Orange-OpenSource/conllueditor) are similar corpus annotation tools, but UD Annotatrix aims to be a simple(r), clean(er), fast(er) interface optimized for Universal Dependencies with an optional server-side component.
+
+##### Contents
+[Features](#features)
+
+[Getting started](#getting-started)
+
+[User guide](#user-guide)
+
+[Contributing](#contributing)
 
-Alternatively, you can serve the files using a web server.  An easy way to do this locally is to run `python3 -m http.server` in the cloned directory.
+[Support](#support)
 
-## Support
+[Acknowledgements](#acknowledgements)
 
-Having a problem with Annotatrix ? Want some one-on-one support ? You can try <tt>#_u-dep</tt> on <tt>irc.freenode.net</tt> or
-join our [Telegram chat](https://t.me/joinchat/EWWgMhGXARzxvgO5AzI0ew).
+[Contributors](#contributors)
 
-## About
+## Features
 
-### The idea
+Note: some features (corpus uploading, collaborative editing, etc.) only work when run with a server.
 
-UD Annotatrix is a client-side, browser only, tool for editting dependency trees in [CoNLL-U](http://universaldependencies.org/format.html) and [VISL](http://beta.visl.sdu.dk/cg3/single/#streamformats) formsts.  The point of this is to make manual editing of dependency corpora quicker. The aim of this project is to create an easy-to-use, quick and interactive interface tool for Universal Dependencies annotation, which would work both online and offline and allow the user to edit the annotation in both graphical and text modes.
+### dependency editing
+| feature | how to use |
+| -- | -- |
+| add sentences | click the `+` button on the top row |
+| remove sentences | click the `-` button on the top row |
+| add heads | click on the dependent node, click on its head |
+| edit heads | right-click on the dependency arrow, press `d`, click on its new head |
+| edit dependency relation | click on the dependency arrow |
+| remove heads | right-click on the dependency arrow, press `x`, `Backspace`, or `Delete` |
+| edit part of speech labels | click on the light purple blobs below the blue 'form node' |
+| edit tokens | right-click on the blue 'form node' |
+| split token | click on the blue 'form node', press `s`, insert a `Space` character anywhere in the box, press `Enter` |
+| split multi-word token | click on the lighter blue 'multi-word' node, press `s` |
+| combine tokens into multi-word token | click on the blue 'form node', press `c`, then either click on one of the green nodes or use the `Left`/`Right` arrow keys |
+| merge tokens | click on the blue 'form node', press `m`, then either click on one of the green nodes or use the `Left`/`Right` arrow keys |
+| set sentence root | click on the blue 'form node', press `r` |
+| direct text editing | edit the text in the main textarea (Note: by default, the textarea is reparsed every 100ms; this can be turned off by click the green `on` text in the bottom left of the screen) |
+| table mode (CoNLL-U only) | convert the sentence into `CoNLL-U` format, click `Show > Table` from the dropdown menu |
+| support for enhanced dependencies | click the `Tree` icon below the main textarea to toggle enhanced dependencies on/off; when on, adding heads/roots will not delete the existing heads |
+| support for LTR/RTL/vertical writing systems | click the `Left-Justify`/`Right-Justify` icons below the main textarea |
 
-Note that something similar exists in [brat](http://brat.nlplab.org), but that we're aiming for a simpler, cleaner, faster interface optimised for Universal Dependencies with an optional server-side component.
+### uploading, exporting
+| feature | works without server? | how to use |
+| -- | -- | -- |
+| upload from file | no | |
+| upload form URL | no | |
+| export to LaTeX | yes | |
+| export to PNG | yes | |
+| save editor preferences | yes | |
+| save annotation data | yes<sup>1</sup> | |
 
-### Functionality
+<sup>1</sup> if server unavailable, saves to `localStorage`
 
-At the moment, the interface supports:
-* draw dependencies between tokens
-* edit dependency relations
-* delete dependencies
-* edit POS labels
-* edit tokens
+### labels
+| feature | how to use |
+| -- | -- |
+| add label to sentence | |
+| remove label from sentence | |
+| edit label name | |
+| edit label description | |
+| edit label color | |
+| filter sentences by label | |
 
-Editing POS labels, editing deprels, drawing arcs and deleting arcs are undoable and redoable.
+### real-time collaboration<sup>2</sup>
+| feature | how to use |
+| -- | -- |
+| dependency editing | |
+| locking on selected node/edge | |
+| global undo/redo | |
+| mouse tracking | |
+| chat | |
 
-The interface supports right-to-left readin order and vertiacal alignment for long sentences.
+<sup>2</sup> all collaborative features require a server to be running
 
-## User guide
+## Getting started
 
-The basic user guide is available on the [help page](https://maryszmary.github.io/ud-annotatrix/standalone/help.html).
+UD Annotatrix can be used in several different ways.  Some methods don't require a server backend, although this restricts the available features.
+
+Many of these methods require the `node` and `npm` executables.  To check if you have these, run `node -v`.  If you don't, you can find installation instructions [here](https://www.npmjs.com/get-npm).
+
+| feature | local dynamic server | remote dynamic server | local static file | locally served static files | remotely served static files |
+| ----------------------------- | --- | -- | -- | -- | -- |
+| create and edit trees         | ✔   |  ✔ |  ✔ |  ✔ |  ✔ |
+| edit GitHub-hosted treebanks  |     |    |    |    |    |
+| collaborative editing         | (✔) |  ✔ |  ✖ |  ✖ |  ✖ |
+| chat                          | (✔) |  ✔ |  ✖ |  ✖ |  ✖ |
+| *HOW TO RUN*         | `npm server` |    | open in browser | `python -m SimpleHTTPServer` | github.io |
+
+
+
+### serve dynamic files
 
-## Architecture and components
+Run a copy of UD Annotatrix with server backend on your machine.  Uploaded databases will be saved directly to your hard drive.  This is the recommended method.  To install, run
+```bash
+git clone https://github.com/jonorthwash/ud-annotatrix
+cd ud-annotatrix/
+npm install
+```
+You can configure the environment in several ways by setting `KEY=VALUE` pairs in the `.env` file (see [the server configuration file](src/server/config.ts)).
 
+To run the server, run `npm run dev-server` in the project directory root, then navigate your browser to `localhost:5316`.  If you would like to deploy your own copy of UD Annotatrix, you could alternately run `npm run server`.
 
-### Standalone
+### remote (dynamic) server
 
-The standalone part of the project is written in JavaScript. The standalone version supports full functionality, apart from saving corpora on server.
+Access a copy of UD Annotatrix with server backend running on another machine.  Uploaded databases will be saved on the remote server.  Some currently active remote servers:
+ - [Kevin's website](`http://annotator.murp.us/`)
 
-#### Project architecture
+### as a static file
 
-* main managing script: `annotator.js`
-* support for visualisation: `visualiser.js`, `cy-style.js`
-* support for graphical editing: `gui.js`
-* format handling: `converters.js`, `CG2conllu.js`
+Run a copy of UD Annotatrix without the server backend from a static file.  This version does __not__ have a server backend, so [some features](#features) will be unavailable.  Uploaded databases will be saved into `localStorage`.  Navigate your browser to `file:///path/to/ud-annotatrix/index.html`.
 
-#### Dependencies
+### serving static files
 
-* jQuery
-* Cytoscape
-* head.js
-* undomanager.js
-* a JS library for parsing conllu written by Magdalena Parks
+Serve up a copy of the UD Annotatrix static site.  This version does __not__ have a server backend, so [some features](#features) will be unavailable.  Uploaded databases will be saved into `localStorage`.  To start the server, `cd` to the project directory root and run `python -m http.server`.  The files should be available at `localhost:8000`.
 
-All the dependencies are stored in ./standalone/lib/ext/.
+If you want to host the static files, you can do so by
 
-#### Tests
+### remote (static) files
+
+Access a copy of the UD Annotatrix static site on another machine.  This version does __not__ have a server backend, so [some features](#features) will be unavailable.  Uploaded databases will be saved into `localStorage`.  Some currently active remote static servers (items marked with '\*' are running older versions):
+  - [Jonathan's GitHub Pages](https://jonorthwash.github.io/ud-annotatrix)
+  * [Masha's GitHub pages](https://maryszmary.github.io/ud-annotatrix/standalone/annotator.html)\*
+  * [Fran's GitHub pages](https://ftyers.github.io/ud-annotatrix/)\*
+  * [web-corpora](http://web-corpora.net/wsgi3/annotatrix/)\* (beta).
+  * [Jonathan's alternate GitHub pages](https://jonorthwash.github.io/visualiser.html)\* (just the visualizer code)
 
-Currently, there are only tests for CG3 to CoNLL-U converters.
 
-### Server
+## User guide
+
+The basic user guide is available on the [help page](https://maryszmary.github.io/ud-annotatrix/standalone/help.html).
+
+## Contributing
+
+We welcome your pull requests!  To get started, fork this repository and run (where `$REPO` gives the fork's URL)
+```bash
+git clone $REPO
+cd ud-annotatrix
+npm install
+```
+
+Whenever you make changes, you will need to regenerate some of the source files.  You can do that with
+```bash
+npm run build        # just build everything once
+npm run build-watch  # build now watch the source code for changes
+```
+
+See also: the [API Documentation](documentation/README.md).
+
+## Support
+
+Having a problem with UD Annotatrix? Want some one-on-one support? You can try to reach us on IRC at <tt>#\_u-dep</tt> on <tt>irc.oftc.net</tt>, on [Matrix](https://app.element.io/#/room/#_u-dep:matrix.org) or join our [Telegram chat](https://t.me/joinchat/EWWgMhGXARzxvgO5AzI0ew).
 
-The server package provides additional support for deploying the web-interface on a web-server. The back-end is written Python 3, Flask.
+## Acknowledgements
 
-#### Dependencies
+If you use UD Annotatrix in your work, please cite:
 
-* Flask
+```
+@inproceedings{tyers-etal:2018,
+  author = {Francis M. Tyers and Mariya Sheyanova and Jonathan North Washington},
+  title = {UD Annotatrix: An annotation tool for Universal Dependencies},
+  booktitle ={Proceedings of the 16th International Workshop on Treebanks and Linguistic Theories (TLT16)},
+  pages = {10--17},
+  year = 2018
+}
+```
 
 ## Contributors
 
-* Jonathan North Washington (@jonorthwash)
-* Mariya Sheyanova (@maryszmary; [documentation of the changes](http://wiki.apertium.org/wiki/UD_annotatrix/UD_annotatrix_at_GSoC_2017))
-* Tai Vongsathorn Warner (@MidasDoas; [documentation of the changes](https://wikis.swarthmore.edu/ling073/User:Twarner2/Final_project))
-* Francis Tyers (@ftyers)
-* Grzegorz Stark (@gstark0)
-* Jonathan Pan (@JPJPJPOPOP)
-* Suresh Michael Peiris (@tsuresh)
-* Diogo Fernandes (@diogoscf)
-* Robin Richtsfeld (@Androbin)
-* Sushain Cherivirala (@sushain97)
-* Kevin Brubeck Unhammer (@unhammer)
-* Ethan Yang (@thatprogrammer1)
+* Jonathan North Washington ([@jonorthwash](https://github.com/jonorthwash))
+* Kevin Murphy ([@keggsmurph21](https://github.com/keggsmurph21); [documentation of the changes](https://gist.github.com/keggsmurph21/4cce74eb0542373417b2e0366ab9394d#file-gsoc-md))
+* Mariya Sheyanova ([@maryszmary](https://github.com/maryszmary); [documentation of the changes](http://wiki.apertium.org/wiki/UD_annotatrix/UD_annotatrix_at_GSoC_2017))
+* Tai Vongsathorn Warner ([@MidasDoas](https://github.com/MidasDoas); [documentation of the changes](https://wikis.swarthmore.edu/ling073/User:Twarner2/Final_project))
+* Francis Tyers ([@ftyers](https://github.com/ftyers))
+* Grzegorz Stark ([@gstark0](https://github.com/gstark0))
+* Jonathan Pan ([@JPJPJPOPOP](https://github.com/JPJPJPOPOP))
+* Suresh Michael Peiris ([@tsuresh](https://github.com/tsuresh))
+* Diogo Fernandes ([@diogoscf](https://github.com/diogoscf))
+* Robin Richtsfeld ([@Androbin](https://github.com/Androbin))
+* Sushain Cherivirala ([@sushain97](https://github.com/sushain97))
+* Kevin Brubeck Unhammer ([@unhammer](https://github.com/unhammer))
+* Ethan Yang ([@thatprogrammer1](https://github.com/thatprogrammer1))
+* Daniel Swanson ([@mr-martian](https://github.com/mr-martian))
+
+See also: the [AUTHORS](AUTHORS) file.

gulpfile.js

@@ -0,0 +1,44 @@
+const gulp = require("gulp");
+const browserify = require("browserify");
+const source = require("vinyl-source-stream");
+const buffer = require("vinyl-buffer");
+const babelify = require("babelify");
+const rename = require("gulp-rename");
+const sourcemaps = require("gulp-sourcemaps");
+const compileEJS = require("./scripts/compile-ejs");
+const terser = require("gulp-terser");
+const size = require("gulp-size");
+const tsify = require("tsify");
+require("dotenv").config();
+
+const gulp_mode = process.env.GULP_ENV || "development";
+console.log("Gulp runs in " + gulp_mode + " mode");
+
+gulp.task("js", function() {
+  let stream = browserify({entries: ["src/client/index.ts"], debug: true})
+                   .plugin(tsify)
+                   .transform(babelify, {global: true})
+                   .bundle()
+                   .on("error", function(err) { console.error(err); })
+                   .pipe(source("bundle.js"))
+                   .pipe(buffer())
+                   .pipe(size());
+
+  if (gulp_mode == "production") {
+    stream = stream.pipe(terser({keep_fnames: true, mangle: false, compress: {drop_console: true}})).pipe(size())
+  }
+  return stream.pipe(gulp.dest("src/server/public/js"));
+});
+
+gulp.task("html", function(done) {
+  compileEJS();
+  done();
+});
+
+gulp.task("ico", function() { return gulp.src(["./src/client/favicon.png"]).pipe(gulp.dest("./src/server/public")); });
+
+gulp.task("watch", () => {
+  gulp.watch(["src/**/*.ts", "src/server/views/**/*.ejs"], gulp.parallel("js", "html"));
+});
+
+gulp.task("default", gulp.parallel("js", "html", "ico"));

index.html

@@ -1,6 +1,14 @@
-<html>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+
 <head>
-<title>Hello world</title>
-<meta http-equiv="refresh" content="1; url=standalone/annotator.html" />
+	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
+  <title>UD Annotatrix</title>
 </head>
+
+<body>
+	<script>
+		window.location.href = './src/server/public/html/index.html';
+	</script>
+</body>
 </html>