lost-sia 0.9.0 → 1.0.0

package/dist/index.es.js

@@ -1,6 +1,7 @@
-import React, { Component } from 'react';
-import { Dropdown, Ref, Popup, Header, Menu, Dimmer, Loader, Icon, Button } from 'semantic-ui-react';
+import React, { Component, useEffect, useState, useRef } from 'react';
+import { Dropdown, Ref, Popup, Header, Menu, Dimmer, Message, Divider, List, Button, TextArea, Form, Label, Icon, Card, Image, Loader } from 'semantic-ui-react';
 import _ from 'lodash';
+import reactDom from 'react-dom';
 
 function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
 
@@ -194,20 +195,23 @@ function getTopPoint(data) {
  * correct the annotation
  * @param {object} data 
  * @param {object} image 
+ * @param {object} imageOffset 
  */
-function correctAnnotation(data, image) {
+function correctAnnotation(data, image, imageOffset) {
+    var imgWidth = image.width - 2 * imageOffset.x;
+    var imgHeight = image.height - 2 * imageOffset.y;
     var corrected = data.map(function (el) {
         var x = el.x;
         var y = el.y;
-        if (el.x <= 0) {
-            x = 0;
-        } else if (el.x > image.width) {
-            x = image.width;
+        if (el.x <= imageOffset.x) {
+            x = imageOffset.x;
+        } else if (el.x > imgWidth + imageOffset.x) {
+            x = imgWidth + imageOffset.x;
         }
-        if (el.y < 0) {
-            y = 0;
-        } else if (el.y > image.height) {
-            y = image.height;
+        if (el.y < imageOffset.y) {
+            y = imageOffset.y;
+        } else if (el.y > imgHeight + imageOffset.y) {
+            y = imgHeight + imageOffset.y;
         }
         return { x: x, y: y };
     });
@@ -519,7 +523,7 @@ function styleInject(css, ref) {
   }
 }
 
-var css = ".Annotation_sel-area-off__3caGM {\n  fill: none; }\n\n.Annotation_sel-area-on__fPaTl {\n  fill: blue;\n  fill-opacity: 0.001; }\n\n.Annotation_selected__36wA1 {\n  fill-opacity: 0.01;\n  cursor: grab; }\n\ncircle.Annotation_selected__36wA1 {\n  fill-opacity: 1.0; }\n\n.Annotation_not-selected__1QCgV {\n  fill-opacity: 0.3; }\n\ncircle.Annotation_not-selected__1QCgV {\n  fill-opacity: 1.0; }\n\n.Annotation_node-halo-on__1ala6 {\n  fill: orange;\n  stroke: orange;\n  fill-opacity: 0.5;\n  stroke-opacity: 0.5;\n  cursor: grab; }\n\n.Annotation_node-halo-off__1tASR {\n  fill: none;\n  stroke: none; }\n";
+var css = ".Annotation_sel-area-off__3caGM {\n  fill: none; }\n\n.Annotation_sel-area-on__fPaTl {\n  fill: blue;\n  fill-opacity: 0.001; }\n\n.Annotation_selected__36wA1 {\n  fill-opacity: 0.01;\n  cursor: grab; }\n\ncircle.Annotation_selected__36wA1 {\n  fill-opacity: 1.0; }\n\n.Annotation_not-selected__1QCgV {\n  fill-opacity: 0.3; }\n\ncircle.Annotation_not-selected__1QCgV {\n  fill-opacity: 1.0; }\n\n.Annotation_node-halo-on__1ala6 {\n  fill: orange;\n  stroke: orange;\n  fill-opacity: 0.1;\n  stroke-opacity: 0.2;\n  cursor: grab; }\n\n.Annotation_node-halo-off__1tASR {\n  fill: none;\n  stroke: none; }\n";
 styleInject(css);
 
 var CREATE_NODE = "crosshair";
@@ -872,6 +876,15 @@ var ANNO_LABEL_UPDATE = 'annoLabelUpdate';
 var ANNO_CREATED_NODE = 'annoCreatedNode';
 var ANNO_CREATED_FINAL_NODE = 'annoCreatedFinalNode';
 var ANNO_START_CREATING = 'annoStartCreating';
+var ANNO_COMMENT_UPDATE = 'annoCommentUpdate';
+var ANNO_MARK_EXAMPLE = 'annoMarkExample';
+
+var CANVAS_SVG_UPDATE = 'canvasSvgUpdate';
+var CANVAS_UI_CONFIG_UPDATE = 'canvasUiConfigUpdate';
+var CANVAS_AUTO_SAVE = 'canvasAutoSave';
+var CANVAS_LABEL_INPUT_CLOSE = 'canvasLabelInputClose';
+var CANVAS_IMG_LOADED = 'canvasImgLoaded';
+var CANVAS_IMGBAR_CLOSE = 'canvasImgbarClose';
 
 //Image actions
 var IMG_LABEL_UPDATE = 'imgLabelUpdate';
@@ -2263,6 +2276,15 @@ var Annotation$1 = function (_Component) {
                     }
                 }
             }
+            if (this.props.showSingleAnno === undefined) {
+                if (this.state.anno.visible !== undefined) {
+                    if (this.state.anno.visible) {
+                        this.setVisible(true);
+                    } else {
+                        this.setVisible(false);
+                    }
+                }
+            }
         }
 
         /*************
@@ -2340,7 +2362,7 @@ var Annotation$1 = function (_Component) {
                 case ANNO_MOVED:
                 case ANNO_CREATED:
                     // Check if annoation is within image bounds
-                    var corrected = correctAnnotation(anno.data, this.props.svg);
+                    var corrected = correctAnnotation(anno.data, this.props.svg, this.props.imageOffset);
                     var newAnno = _extends$5({}, anno, { data: corrected });
                     var area = getArea(corrected, this.props.svg, anno.type, this.props.image);
                     if (area !== undefined) {
@@ -3160,11 +3182,11 @@ var ImgBar = function (_Component) {
     }, {
         key: 'renderImgDescription',
         value: function renderImgDescription() {
-            if (this.props.annos.image.description) {
+            if (this.props.imageMeta.description) {
                 return React.createElement(
                     Menu.Item,
                     null,
-                    this.props.annos.image.description
+                    this.props.imageMeta.description
                 );
             } else {
                 return null;
@@ -3176,7 +3198,7 @@ var ImgBar = function (_Component) {
             var _this3 = this;
 
             if (!this.props.visible) return null;
-            if (!this.props.annos.image) return null;
+            if (!this.props.imageMeta) return null;
             // if (!this.props.annos.image.url) return null
             return React.createElement(
                 'div',
@@ -3198,12 +3220,12 @@ var ImgBar = function (_Component) {
                     React.createElement(
                         Menu.Item,
                         null,
-                        "ID: " + this.props.annos.image.id
+                        "ID: " + this.props.imageMeta.id
                     ),
                     React.createElement(
                         Menu.Item,
                         null,
-                        this.props.annos.image.number + " / " + this.props.annos.image.amount
+                        this.props.imageMeta.number + " / " + this.props.imageMeta.amount
                     ),
                     this.renderImgLabels()
                 )
@@ -3264,7 +3286,7 @@ var Prompt = function (_Component) {
                 Dimmer,
                 { page: true,
                     active: this.state.active,
-                    style: { zIndex: 2000 },
+                    style: { zIndex: 7000 },
                     onClick: function onClick(e) {
                         return _this2.handleClick(e);
                     }
@@ -3536,6 +3558,7 @@ var COPY_ANNOTATION = 'copyAnnotation';
 var PASTE_ANNOTATION = 'pasteAnnotation';
 var RECREATE_ANNO = 'recreateAnnotation';
 var DELETE_ANNO_IN_CREATION = 'deleteAnnoInCreation';
+var TOGGLE_ANNO_COMMENT_INPUT = 'toggleAnnoCommentInput';
 
 var KeyMapper = function () {
     function KeyMapper() {
@@ -3595,6 +3618,8 @@ var KeyMapper = function () {
                 case 'c':
                     if (this.controlDown) {
                         this.triggerKeyAction(COPY_ANNOTATION);
+                    } else {
+                        this.triggerKeyAction(TOGGLE_ANNO_COMMENT_INPUT);
                     }
                     break;
                 case 'v':
@@ -3758,21 +3783,2975 @@ function getZoomTranslation(w0, svg, s1) {
     return translation;
 }
 
-var css$1 = ".SIA_sia-fullscreen__1P3FS {\n  position: fixed;\n  top: 0;\n  left: 0;\n  z-index: 9999;\n  width: 100%;\n  height: 100%;\n  background-color: #FFFF; }\n";
+var css$1 = ".SIA_sia-fullscreen__1P3FS {\n  position: fixed;\n  top: 0;\n  left: 0;\n  z-index: 6000;\n  width: 100%;\n  height: 100%;\n  background-color: #FFFF; }\n";
 styleInject(css$1);
 
+var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+
+function createCommonjsModule(fn, module) {
+	return module = { exports: {} }, fn(module, module.exports), module.exports;
+}
+
+var reactDraggable = createCommonjsModule(function (module, exports) {
+(function (global, factory) {
+	module.exports = factory(reactDom, React);
+})(commonjsGlobal, function (ReactDOM, React$$1) {
+
+	ReactDOM = ReactDOM && ReactDOM.hasOwnProperty('default') ? ReactDOM['default'] : ReactDOM;
+	React$$1 = React$$1 && React$$1.hasOwnProperty('default') ? React$$1['default'] : React$$1;
+
+	function createCommonjsModule$$1(fn, module) {
+		return module = { exports: {} }, fn(module, module.exports), module.exports;
+	}
+
+	/**
+  * Copyright (c) 2013-present, Facebook, Inc.
+  *
+  * This source code is licensed under the MIT license found in the
+  * LICENSE file in the root directory of this source tree.
+  *
+  * 
+  */
+
+	function makeEmptyFunction(arg) {
+		return function () {
+			return arg;
+		};
+	}
+
+	/**
+  * This function accepts and discards inputs; it has no side effects. This is
+  * primarily useful idiomatically for overridable function endpoints which
+  * always need to be callable, since JS lacks a null-call idiom ala Cocoa.
+  */
+	var emptyFunction = function emptyFunction() {};
+
+	emptyFunction.thatReturns = makeEmptyFunction;
+	emptyFunction.thatReturnsFalse = makeEmptyFunction(false);
+	emptyFunction.thatReturnsTrue = makeEmptyFunction(true);
+	emptyFunction.thatReturnsNull = makeEmptyFunction(null);
+	emptyFunction.thatReturnsThis = function () {
+		return this;
+	};
+	emptyFunction.thatReturnsArgument = function (arg) {
+		return arg;
+	};
+
+	var emptyFunction_1 = emptyFunction;
+
+	/**
+  * Copyright (c) 2013-present, Facebook, Inc.
+  *
+  * This source code is licensed under the MIT license found in the
+  * LICENSE file in the root directory of this source tree.
+  *
+  */
+
+	/**
+  * Use invariant() to assert state which your program assumes to be true.
+  *
+  * Provide sprintf-style format (only %s is supported) and arguments
+  * to provide information about what broke and what you were
+  * expecting.
+  *
+  * The invariant message will be stripped in production, but the invariant
+  * will remain to ensure logic does not differ in production.
+  */
+
+	var validateFormat = function validateFormat(format) {};
+
+	{
+		validateFormat = function validateFormat(format) {
+			if (format === undefined) {
+				throw new Error('invariant requires an error message argument');
+			}
+		};
+	}
+
+	function invariant(condition, format, a, b, c, d, e, f) {
+		validateFormat(format);
+
+		if (!condition) {
+			var error;
+			if (format === undefined) {
+				error = new Error('Minified exception occurred; use the non-minified dev environment ' + 'for the full error message and additional helpful warnings.');
+			} else {
+				var args = [a, b, c, d, e, f];
+				var argIndex = 0;
+				error = new Error(format.replace(/%s/g, function () {
+					return args[argIndex++];
+				}));
+				error.name = 'Invariant Violation';
+			}
+
+			error.framesToPop = 1; // we don't care about invariant's own frame
+			throw error;
+		}
+	}
+
+	var invariant_1 = invariant;
+
+	/**
+  * Similar to invariant but only logs a warning if the condition is not met.
+  * This can be used to log issues in development environments in critical
+  * paths. Removing the logging code for production environments will keep the
+  * same logic and follow the same code paths.
+  */
+
+	var warning = emptyFunction_1;
+
+	{
+		var printWarning = function printWarning(format) {
+			for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+				args[_key - 1] = arguments[_key];
+			}
+
+			var argIndex = 0;
+			var message = 'Warning: ' + format.replace(/%s/g, function () {
+				return args[argIndex++];
+			});
+			if (typeof console !== 'undefined') {
+				console.error(message);
+			}
+			try {
+				// --- Welcome to debugging React ---
+				// This error was thrown as a convenience so that you can use this stack
+				// to find the callsite that caused this warning to fire.
+				throw new Error(message);
+			} catch (x) {}
+		};
+
+		warning = function warning(condition, format) {
+			if (format === undefined) {
+				throw new Error('`warning(condition, format, ...args)` requires a warning ' + 'message argument');
+			}
+
+			if (format.indexOf('Failed Composite propType: ') === 0) {
+				return; // Ignore CompositeComponent proptype check.
+			}
+
+			if (!condition) {
+				for (var _len2 = arguments.length, args = Array(_len2 > 2 ? _len2 - 2 : 0), _key2 = 2; _key2 < _len2; _key2++) {
+					args[_key2 - 2] = arguments[_key2];
+				}
+
+				printWarning.apply(undefined, [format].concat(args));
+			}
+		};
+	}
+
+	var warning_1 = warning;
+
+	/*
+ object-assign
+ (c) Sindre Sorhus
+ @license MIT
+ */
+	/* eslint-disable no-unused-vars */
+	var getOwnPropertySymbols = Object.getOwnPropertySymbols;
+	var hasOwnProperty = Object.prototype.hasOwnProperty;
+	var propIsEnumerable = Object.prototype.propertyIsEnumerable;
+
+	function toObject(val) {
+		if (val === null || val === undefined) {
+			throw new TypeError('Object.assign cannot be called with null or undefined');
+		}
+
+		return Object(val);
+	}
+
+	function shouldUseNative() {
+		try {
+			if (!Object.assign) {
+				return false;
+			}
+
+			// Detect buggy property enumeration order in older V8 versions.
+
+			// https://bugs.chromium.org/p/v8/issues/detail?id=4118
+			var test1 = new String('abc'); // eslint-disable-line no-new-wrappers
+			test1[5] = 'de';
+			if (Object.getOwnPropertyNames(test1)[0] === '5') {
+				return false;
+			}
+
+			// https://bugs.chromium.org/p/v8/issues/detail?id=3056
+			var test2 = {};
+			for (var i = 0; i < 10; i++) {
+				test2['_' + String.fromCharCode(i)] = i;
+			}
+			var order2 = Object.getOwnPropertyNames(test2).map(function (n) {
+				return test2[n];
+			});
+			if (order2.join('') !== '0123456789') {
+				return false;
+			}
+
+			// https://bugs.chromium.org/p/v8/issues/detail?id=3056
+			var test3 = {};
+			'abcdefghijklmnopqrst'.split('').forEach(function (letter) {
+				test3[letter] = letter;
+			});
+			if (Object.keys(Object.assign({}, test3)).join('') !== 'abcdefghijklmnopqrst') {
+				return false;
+			}
+
+			return true;
+		} catch (err) {
+			// We don't expect any of the above to throw, but better to be safe.
+			return false;
+		}
+	}
+
+	var objectAssign = shouldUseNative() ? Object.assign : function (target, source) {
+		var from;
+		var to = toObject(target);
+		var symbols;
+
+		for (var s = 1; s < arguments.length; s++) {
+			from = Object(arguments[s]);
+
+			for (var key in from) {
+				if (hasOwnProperty.call(from, key)) {
+					to[key] = from[key];
+				}
+			}
+
+			if (getOwnPropertySymbols) {
+				symbols = getOwnPropertySymbols(from);
+				for (var i = 0; i < symbols.length; i++) {
+					if (propIsEnumerable.call(from, symbols[i])) {
+						to[symbols[i]] = from[symbols[i]];
+					}
+				}
+			}
+		}
+
+		return to;
+	};
+
+	/**
+  * Copyright (c) 2013-present, Facebook, Inc.
+  *
+  * This source code is licensed under the MIT license found in the
+  * LICENSE file in the root directory of this source tree.
+  */
+
+	var ReactPropTypesSecret = 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED';
+
+	var ReactPropTypesSecret_1 = ReactPropTypesSecret;
+
+	{
+		var invariant$1 = invariant_1;
+		var warning$1 = warning_1;
+		var ReactPropTypesSecret$1 = ReactPropTypesSecret_1;
+		var loggedTypeFailures = {};
+	}
+
+	/**
+  * Assert that the values match with the type specs.
+  * Error messages are memorized and will only be shown once.
+  *
+  * @param {object} typeSpecs Map of name to a ReactPropType
+  * @param {object} values Runtime values that need to be type-checked
+  * @param {string} location e.g. "prop", "context", "child context"
+  * @param {string} componentName Name of the component for error messages.
+  * @param {?Function} getStack Returns the component stack.
+  * @private
+  */
+	function checkPropTypes(typeSpecs, values, location, componentName, getStack) {
+		{
+			for (var typeSpecName in typeSpecs) {
+				if (typeSpecs.hasOwnProperty(typeSpecName)) {
+					var error;
+					// Prop type validation may throw. In case they do, we don't want to
+					// fail the render phase where it didn't fail before. So we log it.
+					// After these have been cleaned up, we'll let them throw.
+					try {
+						// This is intentionally an invariant that gets caught. It's the same
+						// behavior as without this statement except with a better message.
+						invariant$1(typeof typeSpecs[typeSpecName] === 'function', '%s: %s type `%s` is invalid; it must be a function, usually from ' + 'the `prop-types` package, but received `%s`.', componentName || 'React class', location, typeSpecName, typeof typeSpecs[typeSpecName]);
+						error = typeSpecs[typeSpecName](values, typeSpecName, componentName, location, null, ReactPropTypesSecret$1);
+					} catch (ex) {
+						error = ex;
+					}
+					warning$1(!error || error instanceof Error, '%s: type specification of %s `%s` is invalid; the type checker ' + 'function must return `null` or an `Error` but returned a %s. ' + 'You may have forgotten to pass an argument to the type checker ' + 'creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and ' + 'shape all require an argument).', componentName || 'React class', location, typeSpecName, typeof error);
+					if (error instanceof Error && !(error.message in loggedTypeFailures)) {
+						// Only monitor this failure once because there tends to be a lot of the
+						// same error.
+						loggedTypeFailures[error.message] = true;
+
+						var stack = getStack ? getStack() : '';
+
+						warning$1(false, 'Failed %s type: %s%s', location, error.message, stack != null ? stack : '');
+					}
+				}
+			}
+		}
+	}
+
+	var checkPropTypes_1 = checkPropTypes;
+
+	var factoryWithTypeCheckers = function (isValidElement, throwOnDirectAccess) {
+		/* global Symbol */
+		var ITERATOR_SYMBOL = typeof Symbol === 'function' && Symbol.iterator;
+		var FAUX_ITERATOR_SYMBOL = '@@iterator'; // Before Symbol spec.
+
+		/**
+   * Returns the iterator method function contained on the iterable object.
+   *
+   * Be sure to invoke the function with the iterable as context:
+   *
+   *     var iteratorFn = getIteratorFn(myIterable);
+   *     if (iteratorFn) {
+   *       var iterator = iteratorFn.call(myIterable);
+   *       ...
+   *     }
+   *
+   * @param {?object} maybeIterable
+   * @return {?function}
+   */
+		function getIteratorFn(maybeIterable) {
+			var iteratorFn = maybeIterable && (ITERATOR_SYMBOL && maybeIterable[ITERATOR_SYMBOL] || maybeIterable[FAUX_ITERATOR_SYMBOL]);
+			if (typeof iteratorFn === 'function') {
+				return iteratorFn;
+			}
+		}
+
+		/**
+   * Collection of methods that allow declaration and validation of props that are
+   * supplied to React components. Example usage:
+   *
+   *   var Props = require('ReactPropTypes');
+   *   var MyArticle = React.createClass({
+   *     propTypes: {
+   *       // An optional string prop named "description".
+   *       description: Props.string,
+   *
+   *       // A required enum prop named "category".
+   *       category: Props.oneOf(['News','Photos']).isRequired,
+   *
+   *       // A prop named "dialog" that requires an instance of Dialog.
+   *       dialog: Props.instanceOf(Dialog).isRequired
+   *     },
+   *     render: function() { ... }
+   *   });
+   *
+   * A more formal specification of how these methods are used:
+   *
+   *   type := array|bool|func|object|number|string|oneOf([...])|instanceOf(...)
+   *   decl := ReactPropTypes.{type}(.isRequired)?
+   *
+   * Each and every declaration produces a function with the same signature. This
+   * allows the creation of custom validation functions. For example:
+   *
+   *  var MyLink = React.createClass({
+   *    propTypes: {
+   *      // An optional string or URI prop named "href".
+   *      href: function(props, propName, componentName) {
+   *        var propValue = props[propName];
+   *        if (propValue != null && typeof propValue !== 'string' &&
+   *            !(propValue instanceof URI)) {
+   *          return new Error(
+   *            'Expected a string or an URI for ' + propName + ' in ' +
+   *            componentName
+   *          );
+   *        }
+   *      }
+   *    },
+   *    render: function() {...}
+   *  });
+   *
+   * @internal
+   */
+
+		var ANONYMOUS = '<<anonymous>>';
+
+		// Important!
+		// Keep this list in sync with production version in `./factoryWithThrowingShims.js`.
+		var ReactPropTypes = {
+			array: createPrimitiveTypeChecker('array'),
+			bool: createPrimitiveTypeChecker('boolean'),
+			func: createPrimitiveTypeChecker('function'),
+			number: createPrimitiveTypeChecker('number'),
+			object: createPrimitiveTypeChecker('object'),
+			string: createPrimitiveTypeChecker('string'),
+			symbol: createPrimitiveTypeChecker('symbol'),
+
+			any: createAnyTypeChecker(),
+			arrayOf: createArrayOfTypeChecker,
+			element: createElementTypeChecker(),
+			instanceOf: createInstanceTypeChecker,
+			node: createNodeChecker(),
+			objectOf: createObjectOfTypeChecker,
+			oneOf: createEnumTypeChecker,
+			oneOfType: createUnionTypeChecker,
+			shape: createShapeTypeChecker,
+			exact: createStrictShapeTypeChecker
+		};
+
+		/**
+   * inlined Object.is polyfill to avoid requiring consumers ship their own
+   * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is
+   */
+		/*eslint-disable no-self-compare*/
+		function is(x, y) {
+			// SameValue algorithm
+			if (x === y) {
+				// Steps 1-5, 7-10
+				// Steps 6.b-6.e: +0 != -0
+				return x !== 0 || 1 / x === 1 / y;
+			} else {
+				// Step 6.a: NaN == NaN
+				return x !== x && y !== y;
+			}
+		}
+		/*eslint-enable no-self-compare*/
+
+		/**
+   * We use an Error-like object for backward compatibility as people may call
+   * PropTypes directly and inspect their output. However, we don't use real
+   * Errors anymore. We don't inspect their stack anyway, and creating them
+   * is prohibitively expensive if they are created too often, such as what
+   * happens in oneOfType() for any type before the one that matched.
+   */
+		function PropTypeError(message) {
+			this.message = message;
+			this.stack = '';
+		}
+		// Make `instanceof Error` still work for returned errors.
+		PropTypeError.prototype = Error.prototype;
+
+		function createChainableTypeChecker(validate) {
+			{
+				var manualPropTypeCallCache = {};
+				var manualPropTypeWarningCount = 0;
+			}
+			function checkType(isRequired, props, propName, componentName, location, propFullName, secret) {
+				componentName = componentName || ANONYMOUS;
+				propFullName = propFullName || propName;
+
+				if (secret !== ReactPropTypesSecret_1) {
+					if (throwOnDirectAccess) {
+						// New behavior only for users of `prop-types` package
+						invariant_1(false, 'Calling PropTypes validators directly is not supported by the `prop-types` package. ' + 'Use `PropTypes.checkPropTypes()` to call them. ' + 'Read more at http://fb.me/use-check-prop-types');
+					} else if (typeof console !== 'undefined') {
+						// Old behavior for people using React.PropTypes
+						var cacheKey = componentName + ':' + propName;
+						if (!manualPropTypeCallCache[cacheKey] &&
+						// Avoid spamming the console because they are often not actionable except for lib authors
+						manualPropTypeWarningCount < 3) {
+							warning_1(false, 'You are manually calling a React.PropTypes validation ' + 'function for the `%s` prop on `%s`. This is deprecated ' + 'and will throw in the standalone `prop-types` package. ' + 'You may be seeing this warning due to a third-party PropTypes ' + 'library. See https://fb.me/react-warning-dont-call-proptypes ' + 'for details.', propFullName, componentName);
+							manualPropTypeCallCache[cacheKey] = true;
+							manualPropTypeWarningCount++;
+						}
+					}
+				}
+				if (props[propName] == null) {
+					if (isRequired) {
+						if (props[propName] === null) {
+							return new PropTypeError('The ' + location + ' `' + propFullName + '` is marked as required ' + ('in `' + componentName + '`, but its value is `null`.'));
+						}
+						return new PropTypeError('The ' + location + ' `' + propFullName + '` is marked as required in ' + ('`' + componentName + '`, but its value is `undefined`.'));
+					}
+					return null;
+				} else {
+					return validate(props, propName, componentName, location, propFullName);
+				}
+			}
+
+			var chainedCheckType = checkType.bind(null, false);
+			chainedCheckType.isRequired = checkType.bind(null, true);
+
+			return chainedCheckType;
+		}
+
+		function createPrimitiveTypeChecker(expectedType) {
+			function validate(props, propName, componentName, location, propFullName, secret) {
+				var propValue = props[propName];
+				var propType = getPropType(propValue);
+				if (propType !== expectedType) {
+					// `propValue` being instance of, say, date/regexp, pass the 'object'
+					// check, but we can offer a more precise error message here rather than
+					// 'of type `object`'.
+					var preciseType = getPreciseType(propValue);
+
+					return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + preciseType + '` supplied to `' + componentName + '`, expected ') + ('`' + expectedType + '`.'));
+				}
+				return null;
+			}
+			return createChainableTypeChecker(validate);
+		}
+
+		function createAnyTypeChecker() {
+			return createChainableTypeChecker(emptyFunction_1.thatReturnsNull);
+		}
+
+		function createArrayOfTypeChecker(typeChecker) {
+			function validate(props, propName, componentName, location, propFullName) {
+				if (typeof typeChecker !== 'function') {
+					return new PropTypeError('Property `' + propFullName + '` of component `' + componentName + '` has invalid PropType notation inside arrayOf.');
+				}
+				var propValue = props[propName];
+				if (!Array.isArray(propValue)) {
+					var propType = getPropType(propValue);
+					return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + propType + '` supplied to `' + componentName + '`, expected an array.'));
+				}
+				for (var i = 0; i < propValue.length; i++) {
+					var error = typeChecker(propValue, i, componentName, location, propFullName + '[' + i + ']', ReactPropTypesSecret_1);
+					if (error instanceof Error) {
+						return error;
+					}
+				}
+				return null;
+			}
+			return createChainableTypeChecker(validate);
+		}
+
+		function createElementTypeChecker() {
+			function validate(props, propName, componentName, location, propFullName) {
+				var propValue = props[propName];
+				if (!isValidElement(propValue)) {
+					var propType = getPropType(propValue);
+					return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + propType + '` supplied to `' + componentName + '`, expected a single ReactElement.'));
+				}
+				return null;
+			}
+			return createChainableTypeChecker(validate);
+		}
+
+		function createInstanceTypeChecker(expectedClass) {
+			function validate(props, propName, componentName, location, propFullName) {
+				if (!(props[propName] instanceof expectedClass)) {
+					var expectedClassName = expectedClass.name || ANONYMOUS;
+					var actualClassName = getClassName(props[propName]);
+					return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + actualClassName + '` supplied to `' + componentName + '`, expected ') + ('instance of `' + expectedClassName + '`.'));
+				}
+				return null;
+			}
+			return createChainableTypeChecker(validate);
+		}
+
+		function createEnumTypeChecker(expectedValues) {
+			if (!Array.isArray(expectedValues)) {
+				warning_1(false, 'Invalid argument supplied to oneOf, expected an instance of array.');
+				return emptyFunction_1.thatReturnsNull;
+			}
+
+			function validate(props, propName, componentName, location, propFullName) {
+				var propValue = props[propName];
+				for (var i = 0; i < expectedValues.length; i++) {
+					if (is(propValue, expectedValues[i])) {
+						return null;
+					}
+				}
+
+				var valuesString = JSON.stringify(expectedValues);
+				return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of value `' + propValue + '` ' + ('supplied to `' + componentName + '`, expected one of ' + valuesString + '.'));
+			}
+			return createChainableTypeChecker(validate);
+		}
+
+		function createObjectOfTypeChecker(typeChecker) {
+			function validate(props, propName, componentName, location, propFullName) {
+				if (typeof typeChecker !== 'function') {
+					return new PropTypeError('Property `' + propFullName + '` of component `' + componentName + '` has invalid PropType notation inside objectOf.');
+				}
+				var propValue = props[propName];
+				var propType = getPropType(propValue);
+				if (propType !== 'object') {
+					return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type ' + ('`' + propType + '` supplied to `' + componentName + '`, expected an object.'));
+				}
+				for (var key in propValue) {
+					if (propValue.hasOwnProperty(key)) {
+						var error = typeChecker(propValue, key, componentName, location, propFullName + '.' + key, ReactPropTypesSecret_1);
+						if (error instanceof Error) {
+							return error;
+						}
+					}
+				}
+				return null;
+			}
+			return createChainableTypeChecker(validate);
+		}
+
+		function createUnionTypeChecker(arrayOfTypeCheckers) {
+			if (!Array.isArray(arrayOfTypeCheckers)) {
+				warning_1(false, 'Invalid argument supplied to oneOfType, expected an instance of array.');
+				return emptyFunction_1.thatReturnsNull;
+			}
+
+			for (var i = 0; i < arrayOfTypeCheckers.length; i++) {
+				var checker = arrayOfTypeCheckers[i];
+				if (typeof checker !== 'function') {
+					warning_1(false, 'Invalid argument supplied to oneOfType. Expected an array of check functions, but ' + 'received %s at index %s.', getPostfixForTypeWarning(checker), i);
+					return emptyFunction_1.thatReturnsNull;
+				}
+			}
+
+			function validate(props, propName, componentName, location, propFullName) {
+				for (var i = 0; i < arrayOfTypeCheckers.length; i++) {
+					var checker = arrayOfTypeCheckers[i];
+					if (checker(props, propName, componentName, location, propFullName, ReactPropTypesSecret_1) == null) {
+						return null;
+					}
+				}
+
+				return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` supplied to ' + ('`' + componentName + '`.'));
+			}
+			return createChainableTypeChecker(validate);
+		}
+
+		function createNodeChecker() {
+			function validate(props, propName, componentName, location, propFullName) {
+				if (!isNode(props[propName])) {
+					return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` supplied to ' + ('`' + componentName + '`, expected a ReactNode.'));
+				}
+				return null;
+			}
+			return createChainableTypeChecker(validate);
+		}
+
+		function createShapeTypeChecker(shapeTypes) {
+			function validate(props, propName, componentName, location, propFullName) {
+				var propValue = props[propName];
+				var propType = getPropType(propValue);
+				if (propType !== 'object') {
+					return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type `' + propType + '` ' + ('supplied to `' + componentName + '`, expected `object`.'));
+				}
+				for (var key in shapeTypes) {
+					var checker = shapeTypes[key];
+					if (!checker) {
+						continue;
+					}
+					var error = checker(propValue, key, componentName, location, propFullName + '.' + key, ReactPropTypesSecret_1);
+					if (error) {
+						return error;
+					}
+				}
+				return null;
+			}
+			return createChainableTypeChecker(validate);
+		}
+
+		function createStrictShapeTypeChecker(shapeTypes) {
+			function validate(props, propName, componentName, location, propFullName) {
+				var propValue = props[propName];
+				var propType = getPropType(propValue);
+				if (propType !== 'object') {
+					return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` of type `' + propType + '` ' + ('supplied to `' + componentName + '`, expected `object`.'));
+				}
+				// We need to check all keys in case some are required but missing from
+				// props.
+				var allKeys = objectAssign({}, props[propName], shapeTypes);
+				for (var key in allKeys) {
+					var checker = shapeTypes[key];
+					if (!checker) {
+						return new PropTypeError('Invalid ' + location + ' `' + propFullName + '` key `' + key + '` supplied to `' + componentName + '`.' + '\nBad object: ' + JSON.stringify(props[propName], null, '  ') + '\nValid keys: ' + JSON.stringify(Object.keys(shapeTypes), null, '  '));
+					}
+					var error = checker(propValue, key, componentName, location, propFullName + '.' + key, ReactPropTypesSecret_1);
+					if (error) {
+						return error;
+					}
+				}
+				return null;
+			}
+
+			return createChainableTypeChecker(validate);
+		}
+
+		function isNode(propValue) {
+			switch (typeof propValue) {
+				case 'number':
+				case 'string':
+				case 'undefined':
+					return true;
+				case 'boolean':
+					return !propValue;
+				case 'object':
+					if (Array.isArray(propValue)) {
+						return propValue.every(isNode);
+					}
+					if (propValue === null || isValidElement(propValue)) {
+						return true;
+					}
+
+					var iteratorFn = getIteratorFn(propValue);
+					if (iteratorFn) {
+						var iterator = iteratorFn.call(propValue);
+						var step;
+						if (iteratorFn !== propValue.entries) {
+							while (!(step = iterator.next()).done) {
+								if (!isNode(step.value)) {
+									return false;
+								}
+							}
+						} else {
+							// Iterator will provide entry [k,v] tuples rather than values.
+							while (!(step = iterator.next()).done) {
+								var entry = step.value;
+								if (entry) {
+									if (!isNode(entry[1])) {
+										return false;
+									}
+								}
+							}
+						}
+					} else {
+						return false;
+					}
+
+					return true;
+				default:
+					return false;
+			}
+		}
+
+		function isSymbol(propType, propValue) {
+			// Native Symbol.
+			if (propType === 'symbol') {
+				return true;
+			}
+
+			// 19.4.3.5 Symbol.prototype[@@toStringTag] === 'Symbol'
+			if (propValue['@@toStringTag'] === 'Symbol') {
+				return true;
+			}
+
+			// Fallback for non-spec compliant Symbols which are polyfilled.
+			if (typeof Symbol === 'function' && propValue instanceof Symbol) {
+				return true;
+			}
+
+			return false;
+		}
+
+		// Equivalent of `typeof` but with special handling for array and regexp.
+		function getPropType(propValue) {
+			var propType = typeof propValue;
+			if (Array.isArray(propValue)) {
+				return 'array';
+			}
+			if (propValue instanceof RegExp) {
+				// Old webkits (at least until Android 4.0) return 'function' rather than
+				// 'object' for typeof a RegExp. We'll normalize this here so that /bla/
+				// passes PropTypes.object.
+				return 'object';
+			}
+			if (isSymbol(propType, propValue)) {
+				return 'symbol';
+			}
+			return propType;
+		}
+
+		// This handles more types than `getPropType`. Only used for error messages.
+		// See `createPrimitiveTypeChecker`.
+		function getPreciseType(propValue) {
+			if (typeof propValue === 'undefined' || propValue === null) {
+				return '' + propValue;
+			}
+			var propType = getPropType(propValue);
+			if (propType === 'object') {
+				if (propValue instanceof Date) {
+					return 'date';
+				} else if (propValue instanceof RegExp) {
+					return 'regexp';
+				}
+			}
+			return propType;
+		}
+
+		// Returns a string that is postfixed to a warning about an invalid type.
+		// For example, "undefined" or "of type array"
+		function getPostfixForTypeWarning(value) {
+			var type = getPreciseType(value);
+			switch (type) {
+				case 'array':
+				case 'object':
+					return 'an ' + type;
+				case 'boolean':
+				case 'date':
+				case 'regexp':
+					return 'a ' + type;
+				default:
+					return type;
+			}
+		}
+
+		// Returns class name of the object, if any.
+		function getClassName(propValue) {
+			if (!propValue.constructor || !propValue.constructor.name) {
+				return ANONYMOUS;
+			}
+			return propValue.constructor.name;
+		}
+
+		ReactPropTypes.checkPropTypes = checkPropTypes_1;
+		ReactPropTypes.PropTypes = ReactPropTypes;
+
+		return ReactPropTypes;
+	};
+
+	var propTypes = createCommonjsModule$$1(function (module) {
+		/**
+   * Copyright (c) 2013-present, Facebook, Inc.
+   *
+   * This source code is licensed under the MIT license found in the
+   * LICENSE file in the root directory of this source tree.
+   */
+
+		{
+			var REACT_ELEMENT_TYPE = typeof Symbol === 'function' && Symbol.for && Symbol.for('react.element') || 0xeac7;
+
+			var isValidElement = function (object) {
+				return typeof object === 'object' && object !== null && object.$$typeof === REACT_ELEMENT_TYPE;
+			};
+
+			// By explicitly using `prop-types` you are opting into new development behavior.
+			// http://fb.me/prop-types-in-prod
+			var throwOnDirectAccess = true;
+			module.exports = factoryWithTypeCheckers(isValidElement, throwOnDirectAccess);
+		}
+	});
+
+	var classnames = createCommonjsModule$$1(function (module) {
+		/*!
+    Copyright (c) 2016 Jed Watson.
+    Licensed under the MIT License (MIT), see
+    http://jedwatson.github.io/classnames
+  */
+		/* global define */
+
+		(function () {
+
+			var hasOwn = {}.hasOwnProperty;
+
+			function classNames() {
+				var classes = [];
+
+				for (var i = 0; i < arguments.length; i++) {
+					var arg = arguments[i];
+					if (!arg) continue;
+
+					var argType = typeof arg;
+
+					if (argType === 'string' || argType === 'number') {
+						classes.push(arg);
+					} else if (Array.isArray(arg)) {
+						classes.push(classNames.apply(null, arg));
+					} else if (argType === 'object') {
+						for (var key in arg) {
+							if (hasOwn.call(arg, key) && arg[key]) {
+								classes.push(key);
+							}
+						}
+					}
+				}
+
+				return classes.join(' ');
+			}
+
+			if (module.exports) {
+				module.exports = classNames;
+			} else {
+				window.classNames = classNames;
+			}
+		})();
+	});
+
+	// @credits https://gist.github.com/rogozhnikoff/a43cfed27c41e4e68cdc
+	function findInArray(array /*: Array<any> | TouchList*/, callback /*: Function*/) /*: any*/{
+		for (var i = 0, length = array.length; i < length; i++) {
+			if (callback.apply(callback, [array[i], i, array])) return array[i];
+		}
+	}
+
+	function isFunction(func /*: any*/) /*: boolean*/{
+		return typeof func === 'function' || Object.prototype.toString.call(func) === '[object Function]';
+	}
+
+	function isNum(num /*: any*/) /*: boolean*/{
+		return typeof num === 'number' && !isNaN(num);
+	}
+
+	function int(a /*: string*/) /*: number*/{
+		return parseInt(a, 10);
+	}
+
+	function dontSetMe(props /*: Object*/, propName /*: string*/, componentName /*: string*/) {
+		if (props[propName]) {
+			return new Error('Invalid prop ' + propName + ' passed to ' + componentName + ' - do not set this, set it on the child.');
+		}
+	}
+
+	var prefixes = ['Moz', 'Webkit', 'O', 'ms'];
+	function getPrefix() /*: string*/{
+		var prop /*: string*/ = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'transform';
+
+		// Checking specifically for 'window.document' is for pseudo-browser server-side
+		// environments that define 'window' as the global context.
+		// E.g. React-rails (see https://github.com/reactjs/react-rails/pull/84)
+		if (typeof window === 'undefined' || typeof window.document === 'undefined') return '';
+
+		var style = window.document.documentElement.style;
+
+		if (prop in style) return '';
+
+		for (var i = 0; i < prefixes.length; i++) {
+			if (browserPrefixToKey(prop, prefixes[i]) in style) return prefixes[i];
+		}
+
+		return '';
+	}
+
+	function browserPrefixToKey(prop /*: string*/, prefix /*: string*/) /*: string*/{
+		return prefix ? '' + prefix + kebabToTitleCase(prop) : prop;
+	}
+
+	function kebabToTitleCase(str /*: string*/) /*: string*/{
+		var out = '';
+		var shouldCapitalize = true;
+		for (var i = 0; i < str.length; i++) {
+			if (shouldCapitalize) {
+				out += str[i].toUpperCase();
+				shouldCapitalize = false;
+			} else if (str[i] === '-') {
+				shouldCapitalize = true;
+			} else {
+				out += str[i];
+			}
+		}
+		return out;
+	}
+
+	// Default export is the prefix itself, like 'Moz', 'Webkit', etc
+	// Note that you may have to re-test for certain things; for instance, Chrome 50
+	// can handle unprefixed `transform`, but not unprefixed `user-select`
+	var browserPrefix = getPrefix();
+
+	var classCallCheck = function (instance, Constructor) {
+		if (!(instance instanceof Constructor)) {
+			throw new TypeError("Cannot call a class as a function");
+		}
+	};
+
+	var createClass = function () {
+		function defineProperties(target, props) {
+			for (var i = 0; i < props.length; i++) {
+				var descriptor = props[i];
+				descriptor.enumerable = descriptor.enumerable || false;
+				descriptor.configurable = true;
+				if ("value" in descriptor) descriptor.writable = true;
+				Object.defineProperty(target, descriptor.key, descriptor);
+			}
+		}
+
+		return function (Constructor, protoProps, staticProps) {
+			if (protoProps) defineProperties(Constructor.prototype, protoProps);
+			if (staticProps) defineProperties(Constructor, staticProps);
+			return Constructor;
+		};
+	}();
+
+	var defineProperty = function (obj, key, value) {
+		if (key in obj) {
+			Object.defineProperty(obj, key, {
+				value: value,
+				enumerable: true,
+				configurable: true,
+				writable: true
+			});
+		} else {
+			obj[key] = value;
+		}
+
+		return obj;
+	};
+
+	var _extends = Object.assign || function (target) {
+		for (var i = 1; i < arguments.length; i++) {
+			var source = arguments[i];
+
+			for (var key in source) {
+				if (Object.prototype.hasOwnProperty.call(source, key)) {
+					target[key] = source[key];
+				}
+			}
+		}
+
+		return target;
+	};
+
+	var inherits = function (subClass, superClass) {
+		if (typeof superClass !== "function" && superClass !== null) {
+			throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
+		}
+
+		subClass.prototype = Object.create(superClass && superClass.prototype, {
+			constructor: {
+				value: subClass,
+				enumerable: false,
+				writable: true,
+				configurable: true
+			}
+		});
+		if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
+	};
+
+	var possibleConstructorReturn = function (self, call) {
+		if (!self) {
+			throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+		}
+
+		return call && (typeof call === "object" || typeof call === "function") ? call : self;
+	};
+
+	var slicedToArray = function () {
+		function sliceIterator(arr, i) {
+			var _arr = [];
+			var _n = true;
+			var _d = false;
+			var _e = undefined;
+
+			try {
+				for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
+					_arr.push(_s.value);
+
+					if (i && _arr.length === i) break;
+				}
+			} catch (err) {
+				_d = true;
+				_e = err;
+			} finally {
+				try {
+					if (!_n && _i["return"]) _i["return"]();
+				} finally {
+					if (_d) throw _e;
+				}
+			}
+
+			return _arr;
+		}
+
+		return function (arr, i) {
+			if (Array.isArray(arr)) {
+				return arr;
+			} else if (Symbol.iterator in Object(arr)) {
+				return sliceIterator(arr, i);
+			} else {
+				throw new TypeError("Invalid attempt to destructure non-iterable instance");
+			}
+		};
+	}();
+
+	/*:: import type {ControlPosition, PositionOffsetControlPosition, MouseTouchEvent} from './types';*/
+
+	var matchesSelectorFunc = '';
+	function matchesSelector(el /*: Node*/, selector /*: string*/) /*: boolean*/{
+		if (!matchesSelectorFunc) {
+			matchesSelectorFunc = findInArray(['matches', 'webkitMatchesSelector', 'mozMatchesSelector', 'msMatchesSelector', 'oMatchesSelector'], function (method) {
+				// $FlowIgnore: Doesn't think elements are indexable
+				return isFunction(el[method]);
+			});
+		}
+
+		// Might not be found entirely (not an Element?) - in that case, bail
+		// $FlowIgnore: Doesn't think elements are indexable
+		if (!isFunction(el[matchesSelectorFunc])) return false;
+
+		// $FlowIgnore: Doesn't think elements are indexable
+		return el[matchesSelectorFunc](selector);
+	}
+
+	// Works up the tree to the draggable itself attempting to match selector.
+	function matchesSelectorAndParentsTo(el /*: Node*/, selector /*: string*/, baseNode /*: Node*/) /*: boolean*/{
+		var node = el;
+		do {
+			if (matchesSelector(node, selector)) return true;
+			if (node === baseNode) return false;
+			node = node.parentNode;
+		} while (node);
+
+		return false;
+	}
+
+	function addEvent(el /*: ?Node*/, event /*: string*/, handler /*: Function*/) /*: void*/{
+		if (!el) {
+			return;
+		}
+		if (el.attachEvent) {
+			el.attachEvent('on' + event, handler);
+		} else if (el.addEventListener) {
+			el.addEventListener(event, handler, true);
+		} else {
+			// $FlowIgnore: Doesn't think elements are indexable
+			el['on' + event] = handler;
+		}
+	}
+
+	function removeEvent(el /*: ?Node*/, event /*: string*/, handler /*: Function*/) /*: void*/{
+		if (!el) {
+			return;
+		}
+		if (el.detachEvent) {
+			el.detachEvent('on' + event, handler);
+		} else if (el.removeEventListener) {
+			el.removeEventListener(event, handler, true);
+		} else {
+			// $FlowIgnore: Doesn't think elements are indexable
+			el['on' + event] = null;
+		}
+	}
+
+	function outerHeight(node /*: HTMLElement*/) /*: number*/{
+		// This is deliberately excluding margin for our calculations, since we are using
+		// offsetTop which is including margin. See getBoundPosition
+		var height = node.clientHeight;
+		var computedStyle = node.ownerDocument.defaultView.getComputedStyle(node);
+		height += int(computedStyle.borderTopWidth);
+		height += int(computedStyle.borderBottomWidth);
+		return height;
+	}
+
+	function outerWidth(node /*: HTMLElement*/) /*: number*/{
+		// This is deliberately excluding margin for our calculations, since we are using
+		// offsetLeft which is including margin. See getBoundPosition
+		var width = node.clientWidth;
+		var computedStyle = node.ownerDocument.defaultView.getComputedStyle(node);
+		width += int(computedStyle.borderLeftWidth);
+		width += int(computedStyle.borderRightWidth);
+		return width;
+	}
+	function innerHeight(node /*: HTMLElement*/) /*: number*/{
+		var height = node.clientHeight;
+		var computedStyle = node.ownerDocument.defaultView.getComputedStyle(node);
+		height -= int(computedStyle.paddingTop);
+		height -= int(computedStyle.paddingBottom);
+		return height;
+	}
+
+	function innerWidth(node /*: HTMLElement*/) /*: number*/{
+		var width = node.clientWidth;
+		var computedStyle = node.ownerDocument.defaultView.getComputedStyle(node);
+		width -= int(computedStyle.paddingLeft);
+		width -= int(computedStyle.paddingRight);
+		return width;
+	}
+
+	// Get from offsetParent
+	function offsetXYFromParent(evt /*: {clientX: number, clientY: number}*/, offsetParent /*: HTMLElement*/) /*: ControlPosition*/{
+		var isBody = offsetParent === offsetParent.ownerDocument.body;
+		var offsetParentRect = isBody ? { left: 0, top: 0 } : offsetParent.getBoundingClientRect();
+
+		var x = evt.clientX + offsetParent.scrollLeft - offsetParentRect.left;
+		var y = evt.clientY + offsetParent.scrollTop - offsetParentRect.top;
+
+		return { x: x, y: y };
+	}
+
+	function createCSSTransform(controlPos /*: ControlPosition*/, positionOffset /*: PositionOffsetControlPosition*/) /*: Object*/{
+		var translation = getTranslation(controlPos, positionOffset, 'px');
+		return defineProperty({}, browserPrefixToKey('transform', browserPrefix), translation);
+	}
+
+	function createSVGTransform(controlPos /*: ControlPosition*/, positionOffset /*: PositionOffsetControlPosition*/) /*: string*/{
+		var translation = getTranslation(controlPos, positionOffset, '');
+		return translation;
+	}
+	function getTranslation(_ref2, positionOffset /*: PositionOffsetControlPosition*/, unitSuffix /*: string*/) /*: string*/{
+		var x = _ref2.x,
+		    y = _ref2.y;
+
+		var translation = 'translate(' + x + unitSuffix + ',' + y + unitSuffix + ')';
+		if (positionOffset) {
+			var defaultX = '' + (typeof positionOffset.x === 'string' ? positionOffset.x : positionOffset.x + unitSuffix);
+			var defaultY = '' + (typeof positionOffset.y === 'string' ? positionOffset.y : positionOffset.y + unitSuffix);
+			translation = 'translate(' + defaultX + ', ' + defaultY + ')' + translation;
+		}
+		return translation;
+	}
+
+	function getTouch(e /*: MouseTouchEvent*/, identifier /*: number*/) /*: ?{clientX: number, clientY: number}*/{
+		return e.targetTouches && findInArray(e.targetTouches, function (t) {
+			return identifier === t.identifier;
+		}) || e.changedTouches && findInArray(e.changedTouches, function (t) {
+			return identifier === t.identifier;
+		});
+	}
+
+	function getTouchIdentifier(e /*: MouseTouchEvent*/) /*: ?number*/{
+		if (e.targetTouches && e.targetTouches[0]) return e.targetTouches[0].identifier;
+		if (e.changedTouches && e.changedTouches[0]) return e.changedTouches[0].identifier;
+	}
+
+	// User-select Hacks:
+	//
+	// Useful for preventing blue highlights all over everything when dragging.
+
+	// Note we're passing `document` b/c we could be iframed
+	function addUserSelectStyles(doc /*: ?Document*/) {
+		if (!doc) return;
+		var styleEl = doc.getElementById('react-draggable-style-el');
+		if (!styleEl) {
+			styleEl = doc.createElement('style');
+			styleEl.type = 'text/css';
+			styleEl.id = 'react-draggable-style-el';
+			styleEl.innerHTML = '.react-draggable-transparent-selection *::-moz-selection {all: inherit;}\n';
+			styleEl.innerHTML += '.react-draggable-transparent-selection *::selection {all: inherit;}\n';
+			doc.getElementsByTagName('head')[0].appendChild(styleEl);
+		}
+		if (doc.body) addClassName(doc.body, 'react-draggable-transparent-selection');
+	}
+
+	function removeUserSelectStyles(doc /*: ?Document*/) {
+		try {
+			if (doc && doc.body) removeClassName(doc.body, 'react-draggable-transparent-selection');
+			// $FlowIgnore: IE
+			if (doc.selection) {
+				// $FlowIgnore: IE
+				doc.selection.empty();
+			} else {
+				window.getSelection().removeAllRanges(); // remove selection caused by scroll
+			}
+		} catch (e) {
+			// probably IE
+		}
+	}
+
+	function styleHacks() /*: Object*/{
+		var childStyle /*: Object*/ = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+
+		// Workaround IE pointer events; see #51
+		// https://github.com/mzabriskie/react-draggable/issues/51#issuecomment-103488278
+		return _extends({
+			touchAction: 'none'
+		}, childStyle);
+	}
+
+	function addClassName(el /*: HTMLElement*/, className /*: string*/) {
+		if (el.classList) {
+			el.classList.add(className);
+		} else {
+			if (!el.className.match(new RegExp('(?:^|\\s)' + className + '(?!\\S)'))) {
+				el.className += ' ' + className;
+			}
+		}
+	}
+
+	function removeClassName(el /*: HTMLElement*/, className /*: string*/) {
+		if (el.classList) {
+			el.classList.remove(className);
+		} else {
+			el.className = el.className.replace(new RegExp('(?:^|\\s)' + className + '(?!\\S)', 'g'), '');
+		}
+	}
+
+	/*:: import type Draggable from '../Draggable';*/
+	/*:: import type {Bounds, ControlPosition, DraggableData, MouseTouchEvent} from './types';*/
+	/*:: import type DraggableCore from '../DraggableCore';*/
+
+	function getBoundPosition(draggable /*: Draggable*/, x /*: number*/, y /*: number*/) /*: [number, number]*/{
+		// If no bounds, short-circuit and move on
+		if (!draggable.props.bounds) return [x, y];
+
+		// Clone new bounds
+		var bounds = draggable.props.bounds;
+
+		bounds = typeof bounds === 'string' ? bounds : cloneBounds(bounds);
+		var node = findDOMNode(draggable);
+
+		if (typeof bounds === 'string') {
+			var ownerDocument = node.ownerDocument;
+
+			var ownerWindow = ownerDocument.defaultView;
+			var boundNode = void 0;
+			if (bounds === 'parent') {
+				boundNode = node.parentNode;
+			} else {
+				boundNode = ownerDocument.querySelector(bounds);
+			}
+			if (!(boundNode instanceof ownerWindow.HTMLElement)) {
+				throw new Error('Bounds selector "' + bounds + '" could not find an element.');
+			}
+			var nodeStyle = ownerWindow.getComputedStyle(node);
+			var boundNodeStyle = ownerWindow.getComputedStyle(boundNode);
+			// Compute bounds. This is a pain with padding and offsets but this gets it exactly right.
+			bounds = {
+				left: -node.offsetLeft + int(boundNodeStyle.paddingLeft) + int(nodeStyle.marginLeft),
+				top: -node.offsetTop + int(boundNodeStyle.paddingTop) + int(nodeStyle.marginTop),
+				right: innerWidth(boundNode) - outerWidth(node) - node.offsetLeft + int(boundNodeStyle.paddingRight) - int(nodeStyle.marginRight),
+				bottom: innerHeight(boundNode) - outerHeight(node) - node.offsetTop + int(boundNodeStyle.paddingBottom) - int(nodeStyle.marginBottom)
+			};
+		}
+
+		// Keep x and y below right and bottom limits...
+		if (isNum(bounds.right)) x = Math.min(x, bounds.right);
+		if (isNum(bounds.bottom)) y = Math.min(y, bounds.bottom);
+
+		// But above left and top limits.
+		if (isNum(bounds.left)) x = Math.max(x, bounds.left);
+		if (isNum(bounds.top)) y = Math.max(y, bounds.top);
+
+		return [x, y];
+	}
+
+	function snapToGrid(grid /*: [number, number]*/, pendingX /*: number*/, pendingY /*: number*/) /*: [number, number]*/{
+		var x = Math.round(pendingX / grid[0]) * grid[0];
+		var y = Math.round(pendingY / grid[1]) * grid[1];
+		return [x, y];
+	}
+
+	function canDragX(draggable /*: Draggable*/) /*: boolean*/{
+		return draggable.props.axis === 'both' || draggable.props.axis === 'x';
+	}
+
+	function canDragY(draggable /*: Draggable*/) /*: boolean*/{
+		return draggable.props.axis === 'both' || draggable.props.axis === 'y';
+	}
+
+	// Get {x, y} positions from event.
+	function getControlPosition(e /*: MouseTouchEvent*/, touchIdentifier /*: ?number*/, draggableCore /*: DraggableCore*/) /*: ?ControlPosition*/{
+		var touchObj = typeof touchIdentifier === 'number' ? getTouch(e, touchIdentifier) : null;
+		if (typeof touchIdentifier === 'number' && !touchObj) return null; // not the right touch
+		var node = findDOMNode(draggableCore);
+		// User can provide an offsetParent if desired.
+		var offsetParent = draggableCore.props.offsetParent || node.offsetParent || node.ownerDocument.body;
+		return offsetXYFromParent(touchObj || e, offsetParent);
+	}
+
+	// Create an data object exposed by <DraggableCore>'s events
+	function createCoreData(draggable /*: DraggableCore*/, x /*: number*/, y /*: number*/) /*: DraggableData*/{
+		var state = draggable.state;
+		var isStart = !isNum(state.lastX);
+		var node = findDOMNode(draggable);
+
+		if (isStart) {
+			// If this is our first move, use the x and y as last coords.
+			return {
+				node: node,
+				deltaX: 0, deltaY: 0,
+				lastX: x, lastY: y,
+				x: x, y: y
+			};
+		} else {
+			// Otherwise calculate proper values.
+			return {
+				node: node,
+				deltaX: x - state.lastX, deltaY: y - state.lastY,
+				lastX: state.lastX, lastY: state.lastY,
+				x: x, y: y
+			};
+		}
+	}
+
+	// Create an data exposed by <Draggable>'s events
+	function createDraggableData(draggable /*: Draggable*/, coreData /*: DraggableData*/) /*: DraggableData*/{
+		var scale = draggable.props.scale;
+		return {
+			node: coreData.node,
+			x: draggable.state.x + coreData.deltaX / scale,
+			y: draggable.state.y + coreData.deltaY / scale,
+			deltaX: coreData.deltaX / scale,
+			deltaY: coreData.deltaY / scale,
+			lastX: draggable.state.x,
+			lastY: draggable.state.y
+		};
+	}
+
+	// A lot faster than stringify/parse
+	function cloneBounds(bounds /*: Bounds*/) /*: Bounds*/{
+		return {
+			left: bounds.left,
+			top: bounds.top,
+			right: bounds.right,
+			bottom: bounds.bottom
+		};
+	}
+
+	function findDOMNode(draggable /*: Draggable | DraggableCore*/) /*: HTMLElement*/{
+		var node = ReactDOM.findDOMNode(draggable);
+		if (!node) {
+			throw new Error('<DraggableCore>: Unmounted during event!');
+		}
+		// $FlowIgnore we can't assert on HTMLElement due to tests... FIXME
+		return node;
+	}
+
+	/*eslint no-console:0*/
+	function log() {}
+
+	/*:: import type {EventHandler, MouseTouchEvent} from './utils/types';*/
+
+	// Simple abstraction for dragging events names.
+	/*:: import type {Element as ReactElement} from 'react';*/
+	var eventsFor = {
+		touch: {
+			start: 'touchstart',
+			move: 'touchmove',
+			stop: 'touchend'
+		},
+		mouse: {
+			start: 'mousedown',
+			move: 'mousemove',
+			stop: 'mouseup'
+		}
+	};
+
+	// Default to mouse events.
+	var dragEventFor = eventsFor.mouse;
+
+	/*:: type DraggableCoreState = {
+   dragging: boolean,
+   lastX: number,
+   lastY: number,
+   touchIdentifier: ?number
+ };*/
+	/*:: export type DraggableBounds = {
+   left: number,
+   right: number,
+   top: number,
+   bottom: number,
+ };*/
+	/*:: export type DraggableData = {
+   node: HTMLElement,
+   x: number, y: number,
+   deltaX: number, deltaY: number,
+   lastX: number, lastY: number,
+ };*/
+	/*:: export type DraggableEventHandler = (e: MouseEvent, data: DraggableData) => void;*/
+	/*:: export type ControlPosition = {x: number, y: number};*/
+	/*:: export type PositionOffsetControlPosition = {x: number|string, y: number|string};*/
+
+	//
+	// Define <DraggableCore>.
+	//
+	// <DraggableCore> is for advanced usage of <Draggable>. It maintains minimal internal state so it can
+	// work well with libraries that require more control over the element.
+	//
+
+	/*:: export type DraggableCoreProps = {
+   allowAnyClick: boolean,
+   cancel: string,
+   children: ReactElement<any>,
+   disabled: boolean,
+   enableUserSelectHack: boolean,
+   offsetParent: HTMLElement,
+   grid: [number, number],
+   handle: string,
+   onStart: DraggableEventHandler,
+   onDrag: DraggableEventHandler,
+   onStop: DraggableEventHandler,
+   onMouseDown: (e: MouseEvent) => void,
+ };*/
+
+	var DraggableCore = function (_React$Component) {
+		inherits(DraggableCore, _React$Component);
+
+		function DraggableCore() {
+			var _ref;
+
+			var _temp, _this, _ret;
+
+			classCallCheck(this, DraggableCore);
+
+			for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+				args[_key] = arguments[_key];
+			}
+
+			return _ret = (_temp = (_this = possibleConstructorReturn(this, (_ref = DraggableCore.__proto__ || Object.getPrototypeOf(DraggableCore)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
+				dragging: false,
+				// Used while dragging to determine deltas.
+				lastX: NaN, lastY: NaN,
+				touchIdentifier: null
+			}, _this.handleDragStart = function (e) {
+				// Make it possible to attach event handlers on top of this one.
+				_this.props.onMouseDown(e);
+
+				// Only accept left-clicks.
+				if (!_this.props.allowAnyClick && typeof e.button === 'number' && e.button !== 0) return false;
+
+				// Get nodes. Be sure to grab relative document (could be iframed)
+				var thisNode = ReactDOM.findDOMNode(_this);
+				if (!thisNode || !thisNode.ownerDocument || !thisNode.ownerDocument.body) {
+					throw new Error('<DraggableCore> not mounted on DragStart!');
+				}
+				var ownerDocument = thisNode.ownerDocument;
+
+				// Short circuit if handle or cancel prop was provided and selector doesn't match.
+
+				if (_this.props.disabled || !(e.target instanceof ownerDocument.defaultView.Node) || _this.props.handle && !matchesSelectorAndParentsTo(e.target, _this.props.handle, thisNode) || _this.props.cancel && matchesSelectorAndParentsTo(e.target, _this.props.cancel, thisNode)) {
+					return;
+				}
+
+				// Set touch identifier in component state if this is a touch event. This allows us to
+				// distinguish between individual touches on multitouch screens by identifying which
+				// touchpoint was set to this element.
+				var touchIdentifier = getTouchIdentifier(e);
+				_this.setState({ touchIdentifier: touchIdentifier });
+
+				// Get the current drag point from the event. This is used as the offset.
+				var position = getControlPosition(e, touchIdentifier, _this);
+				if (position == null) return; // not possible but satisfies flow
+				var x = position.x,
+				    y = position.y;
+
+				// Create an event object with all the data parents need to make a decision here.
+
+				var coreEvent = createCoreData(_this, x, y);
+
+				// Call event handler. If it returns explicit false, cancel.
+				log('calling', _this.props.onStart);
+				var shouldUpdate = _this.props.onStart(e, coreEvent);
+				if (shouldUpdate === false) return;
+
+				// Add a style to the body to disable user-select. This prevents text from
+				// being selected all over the page.
+				if (_this.props.enableUserSelectHack) addUserSelectStyles(ownerDocument);
+
+				// Initiate dragging. Set the current x and y as offsets
+				// so we know how much we've moved during the drag. This allows us
+				// to drag elements around even if they have been moved, without issue.
+				_this.setState({
+					dragging: true,
+
+					lastX: x,
+					lastY: y
+				});
+
+				// Add events to the document directly so we catch when the user's mouse/touch moves outside of
+				// this element. We use different events depending on whether or not we have detected that this
+				// is a touch-capable device.
+				addEvent(ownerDocument, dragEventFor.move, _this.handleDrag);
+				addEvent(ownerDocument, dragEventFor.stop, _this.handleDragStop);
+			}, _this.handleDrag = function (e) {
+
+				// Prevent scrolling on mobile devices, like ipad/iphone.
+				if (e.type === 'touchmove') e.preventDefault();
+
+				// Get the current drag point from the event. This is used as the offset.
+				var position = getControlPosition(e, _this.state.touchIdentifier, _this);
+				if (position == null) return;
+				var x = position.x,
+				    y = position.y;
+
+				// Snap to grid if prop has been provided
+
+				if (Array.isArray(_this.props.grid)) {
+					var _deltaX = x - _this.state.lastX,
+					    _deltaY = y - _this.state.lastY;
+
+					var _snapToGrid = snapToGrid(_this.props.grid, _deltaX, _deltaY);
+
+					var _snapToGrid2 = slicedToArray(_snapToGrid, 2);
+
+					_deltaX = _snapToGrid2[0];
+					_deltaY = _snapToGrid2[1];
+
+					if (!_deltaX && !_deltaY) return; // skip useless drag
+					x = _this.state.lastX + _deltaX, y = _this.state.lastY + _deltaY;
+				}
+
+				var coreEvent = createCoreData(_this, x, y);
+
+				// Call event handler. If it returns explicit false, trigger end.
+				var shouldUpdate = _this.props.onDrag(e, coreEvent);
+				if (shouldUpdate === false) {
+					try {
+						// $FlowIgnore
+						_this.handleDragStop(new MouseEvent('mouseup'));
+					} catch (err) {
+						// Old browsers
+						var event = document.createEvent('MouseEvents') /*: any*/;
+						// I see why this insanity was deprecated
+						// $FlowIgnore
+						event.initMouseEvent('mouseup', true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
+						_this.handleDragStop(event);
+					}
+					return;
+				}
+
+				_this.setState({
+					lastX: x,
+					lastY: y
+				});
+			}, _this.handleDragStop = function (e) {
+				if (!_this.state.dragging) return;
+
+				var position = getControlPosition(e, _this.state.touchIdentifier, _this);
+				if (position == null) return;
+				var x = position.x,
+				    y = position.y;
+
+				var coreEvent = createCoreData(_this, x, y);
+
+				var thisNode = ReactDOM.findDOMNode(_this);
+				if (thisNode) {
+					// Remove user-select hack
+					if (_this.props.enableUserSelectHack) removeUserSelectStyles(thisNode.ownerDocument);
+				}
+
+				// Reset the el.
+				_this.setState({
+					dragging: false,
+					lastX: NaN,
+					lastY: NaN
+				});
+
+				// Call event handler
+				_this.props.onStop(e, coreEvent);
+
+				if (thisNode) {
+					removeEvent(thisNode.ownerDocument, dragEventFor.move, _this.handleDrag);
+					removeEvent(thisNode.ownerDocument, dragEventFor.stop, _this.handleDragStop);
+				}
+			}, _this.onMouseDown = function (e) {
+				dragEventFor = eventsFor.mouse; // on touchscreen laptops we could switch back to mouse
+
+				return _this.handleDragStart(e);
+			}, _this.onMouseUp = function (e) {
+				dragEventFor = eventsFor.mouse;
+
+				return _this.handleDragStop(e);
+			}, _this.onTouchStart = function (e) {
+				// We're on a touch device now, so change the event handlers
+				dragEventFor = eventsFor.touch;
+
+				return _this.handleDragStart(e);
+			}, _this.onTouchEnd = function (e) {
+				// We're on a touch device now, so change the event handlers
+				dragEventFor = eventsFor.touch;
+
+				return _this.handleDragStop(e);
+			}, _temp), possibleConstructorReturn(_this, _ret);
+		}
+
+		createClass(DraggableCore, [{
+			key: 'componentWillUnmount',
+			value: function componentWillUnmount() {
+				// Remove any leftover event handlers. Remove both touch and mouse handlers in case
+				// some browser quirk caused a touch event to fire during a mouse move, or vice versa.
+				var thisNode = ReactDOM.findDOMNode(this);
+				if (thisNode) {
+					var ownerDocument = thisNode.ownerDocument;
+
+					removeEvent(ownerDocument, eventsFor.mouse.move, this.handleDrag);
+					removeEvent(ownerDocument, eventsFor.touch.move, this.handleDrag);
+					removeEvent(ownerDocument, eventsFor.mouse.stop, this.handleDragStop);
+					removeEvent(ownerDocument, eventsFor.touch.stop, this.handleDragStop);
+					if (this.props.enableUserSelectHack) removeUserSelectStyles(ownerDocument);
+				}
+			}
+
+			// Same as onMouseDown (start drag), but now consider this a touch device.
+
+		}, {
+			key: 'render',
+			value: function render() {
+				// Reuse the child provided
+				// This makes it flexible to use whatever element is wanted (div, ul, etc)
+				return React$$1.cloneElement(React$$1.Children.only(this.props.children), {
+					style: styleHacks(this.props.children.props.style),
+
+					// Note: mouseMove handler is attached to document so it will still function
+					// when the user drags quickly and leaves the bounds of the element.
+					onMouseDown: this.onMouseDown,
+					onTouchStart: this.onTouchStart,
+					onMouseUp: this.onMouseUp,
+					onTouchEnd: this.onTouchEnd
+				});
+			}
+		}]);
+		return DraggableCore;
+	}(React$$1.Component);
+
+	DraggableCore.displayName = 'DraggableCore';
+	DraggableCore.propTypes = {
+		/**
+   * `allowAnyClick` allows dragging using any mouse button.
+   * By default, we only accept the left button.
+   *
+   * Defaults to `false`.
+   */
+		allowAnyClick: propTypes.bool,
+
+		/**
+   * `disabled`, if true, stops the <Draggable> from dragging. All handlers,
+   * with the exception of `onMouseDown`, will not fire.
+   */
+		disabled: propTypes.bool,
+
+		/**
+   * By default, we add 'user-select:none' attributes to the document body
+   * to prevent ugly text selection during drag. If this is causing problems
+   * for your app, set this to `false`.
+   */
+		enableUserSelectHack: propTypes.bool,
+
+		/**
+   * `offsetParent`, if set, uses the passed DOM node to compute drag offsets
+   * instead of using the parent node.
+   */
+		offsetParent: function offsetParent(props /*: DraggableCoreProps*/, propName /*: $Keys<DraggableCoreProps>*/) {
+			if (props[propName] && props[propName].nodeType !== 1) {
+				throw new Error('Draggable\'s offsetParent must be a DOM Node.');
+			}
+		},
+
+		/**
+   * `grid` specifies the x and y that dragging should snap to.
+   */
+		grid: propTypes.arrayOf(propTypes.number),
+
+		/**
+   * `scale` specifies the scale of the area you are dragging inside of. It allows
+   * the drag deltas to scale correctly with how far zoomed in/out you are.
+   */
+		scale: propTypes.number,
+
+		/**
+   * `handle` specifies a selector to be used as the handle that initiates drag.
+   *
+   * Example:
+   *
+   * ```jsx
+   *   let App = React.createClass({
+   *       render: function () {
+   *         return (
+   *            <Draggable handle=".handle">
+   *              <div>
+   *                  <div className="handle">Click me to drag</div>
+   *                  <div>This is some other content</div>
+   *              </div>
+   *           </Draggable>
+   *         );
+   *       }
+   *   });
+   * ```
+   */
+		handle: propTypes.string,
+
+		/**
+   * `cancel` specifies a selector to be used to prevent drag initialization.
+   *
+   * Example:
+   *
+   * ```jsx
+   *   let App = React.createClass({
+   *       render: function () {
+   *           return(
+   *               <Draggable cancel=".cancel">
+   *                   <div>
+   *                     <div className="cancel">You can't drag from here</div>
+   *                     <div>Dragging here works fine</div>
+   *                   </div>
+   *               </Draggable>
+   *           );
+   *       }
+   *   });
+   * ```
+   */
+		cancel: propTypes.string,
+
+		/**
+   * Called when dragging starts.
+   * If this function returns the boolean false, dragging will be canceled.
+   */
+		onStart: propTypes.func,
+
+		/**
+   * Called while dragging.
+   * If this function returns the boolean false, dragging will be canceled.
+   */
+		onDrag: propTypes.func,
+
+		/**
+   * Called when dragging stops.
+   * If this function returns the boolean false, the drag will remain active.
+   */
+		onStop: propTypes.func,
+
+		/**
+   * A workaround option which can be passed if onMouseDown needs to be accessed,
+   * since it'll always be blocked (as there is internal use of onMouseDown)
+   */
+		onMouseDown: propTypes.func,
+
+		/**
+   * These properties should be defined on the child, not here.
+   */
+		className: dontSetMe,
+		style: dontSetMe,
+		transform: dontSetMe
+	};
+	DraggableCore.defaultProps = {
+		allowAnyClick: false, // by default only accept left click
+		cancel: null,
+		disabled: false,
+		enableUserSelectHack: true,
+		offsetParent: null,
+		handle: null,
+		grid: null,
+		transform: null,
+		onStart: function onStart() {},
+		onDrag: function onDrag() {},
+		onStop: function onStop() {},
+		onMouseDown: function onMouseDown() {}
+	};
+
+	/*:: import type {DraggableEventHandler} from './utils/types';*/
+	/*:: import type {Element as ReactElement} from 'react';*/
+	/*:: type DraggableState = {
+   dragging: boolean,
+   dragged: boolean,
+   x: number, y: number,
+   slackX: number, slackY: number,
+   isElementSVG: boolean
+ };*/
+
+	//
+	// Define <Draggable>
+	//
+
+	/*:: export type DraggableProps = {
+   ...$Exact<DraggableCoreProps>,
+   axis: 'both' | 'x' | 'y' | 'none',
+   bounds: DraggableBounds | string | false,
+   defaultClassName: string,
+   defaultClassNameDragging: string,
+   defaultClassNameDragged: string,
+   defaultPosition: ControlPosition,
+   positionOffset: PositionOffsetControlPosition,
+   position: ControlPosition,
+   scale: number
+ };*/
+
+	var Draggable = function (_React$Component) {
+		inherits(Draggable, _React$Component);
+
+		function Draggable(props /*: DraggableProps*/) {
+			classCallCheck(this, Draggable);
+
+			var _this = possibleConstructorReturn(this, (Draggable.__proto__ || Object.getPrototypeOf(Draggable)).call(this, props));
+
+			_this.onDragStart = function (e, coreData) {
+
+				// Short-circuit if user's callback killed it.
+				var shouldStart = _this.props.onStart(e, createDraggableData(_this, coreData));
+				// Kills start event on core as well, so move handlers are never bound.
+				if (shouldStart === false) return false;
+
+				_this.setState({ dragging: true, dragged: true });
+			};
+
+			_this.onDrag = function (e, coreData) {
+				if (!_this.state.dragging) return false;
+
+				var uiData = createDraggableData(_this, coreData);
+
+				var newState /*: $Shape<DraggableState>*/ = {
+					x: uiData.x,
+					y: uiData.y
+				};
+
+				// Keep within bounds.
+				if (_this.props.bounds) {
+					// Save original x and y.
+					var _x = newState.x,
+					    _y = newState.y;
+
+					// Add slack to the values used to calculate bound position. This will ensure that if
+					// we start removing slack, the element won't react to it right away until it's been
+					// completely removed.
+
+					newState.x += _this.state.slackX;
+					newState.y += _this.state.slackY;
+
+					// Get bound position. This will ceil/floor the x and y within the boundaries.
+
+					var _getBoundPosition = getBoundPosition(_this, newState.x, newState.y),
+					    _getBoundPosition2 = slicedToArray(_getBoundPosition, 2),
+					    newStateX = _getBoundPosition2[0],
+					    newStateY = _getBoundPosition2[1];
+
+					newState.x = newStateX;
+					newState.y = newStateY;
+
+					// Recalculate slack by noting how much was shaved by the boundPosition handler.
+					newState.slackX = _this.state.slackX + (_x - newState.x);
+					newState.slackY = _this.state.slackY + (_y - newState.y);
+
+					// Update the event we fire to reflect what really happened after bounds took effect.
+					uiData.x = newState.x;
+					uiData.y = newState.y;
+					uiData.deltaX = newState.x - _this.state.x;
+					uiData.deltaY = newState.y - _this.state.y;
+				}
+
+				// Short-circuit if user's callback killed it.
+				var shouldUpdate = _this.props.onDrag(e, uiData);
+				if (shouldUpdate === false) return false;
+
+				_this.setState(newState);
+			};
+
+			_this.onDragStop = function (e, coreData) {
+				if (!_this.state.dragging) return false;
+
+				// Short-circuit if user's callback killed it.
+				var shouldStop = _this.props.onStop(e, createDraggableData(_this, coreData));
+				if (shouldStop === false) return false;
+
+				var newState /*: $Shape<DraggableState>*/ = {
+					dragging: false,
+					slackX: 0,
+					slackY: 0
+				};
+
+				// If this is a controlled component, the result of this operation will be to
+				// revert back to the old position. We expect a handler on `onDragStop`, at the least.
+				var controlled = Boolean(_this.props.position);
+				if (controlled) {
+					var _this$props$position = _this.props.position,
+					    _x2 = _this$props$position.x,
+					    _y2 = _this$props$position.y;
+
+					newState.x = _x2;
+					newState.y = _y2;
+				}
+
+				_this.setState(newState);
+			};
+
+			_this.state = {
+				// Whether or not we are currently dragging.
+				dragging: false,
+
+				// Whether or not we have been dragged before.
+				dragged: false,
+
+				// Current transform x and y.
+				x: props.position ? props.position.x : props.defaultPosition.x,
+				y: props.position ? props.position.y : props.defaultPosition.y,
+
+				// Used for compensating for out-of-bounds drags
+				slackX: 0, slackY: 0,
+
+				// Can only determine if SVG after mounting
+				isElementSVG: false
+			};
+
+			if (props.position && !(props.onDrag || props.onStop)) {
+				// eslint-disable-next-line no-console
+				console.warn('A `position` was applied to this <Draggable>, without drag handlers. This will make this ' + 'component effectively undraggable. Please attach `onDrag` or `onStop` handlers so you can adjust the ' + '`position` of this element.');
+			}
+			return _this;
+		}
+
+		createClass(Draggable, [{
+			key: 'componentDidMount',
+			value: function componentDidMount() {
+				// Check to see if the element passed is an instanceof SVGElement
+				if (typeof window.SVGElement !== 'undefined' && ReactDOM.findDOMNode(this) instanceof window.SVGElement) {
+					this.setState({ isElementSVG: true });
+				}
+			}
+		}, {
+			key: 'componentWillReceiveProps',
+			value: function componentWillReceiveProps(nextProps /*: Object*/) {
+				// Set x/y if position has changed
+				if (nextProps.position && (!this.props.position || nextProps.position.x !== this.props.position.x || nextProps.position.y !== this.props.position.y)) {
+					this.setState({ x: nextProps.position.x, y: nextProps.position.y });
+				}
+			}
+		}, {
+			key: 'componentWillUnmount',
+			value: function componentWillUnmount() {
+				this.setState({ dragging: false }); // prevents invariant if unmounted while dragging
+			}
+		}, {
+			key: 'render',
+			value: function render() /*: ReactElement<any>*/{
+				var _classNames;
+
+				var style = {},
+				    svgTransform = null;
+
+				// If this is controlled, we don't want to move it - unless it's dragging.
+				var controlled = Boolean(this.props.position);
+				var draggable = !controlled || this.state.dragging;
+
+				var position = this.props.position || this.props.defaultPosition;
+				var transformOpts = {
+					// Set left if horizontal drag is enabled
+					x: canDragX(this) && draggable ? this.state.x : position.x,
+
+					// Set top if vertical drag is enabled
+					y: canDragY(this) && draggable ? this.state.y : position.y
+				};
+
+				// If this element was SVG, we use the `transform` attribute.
+				if (this.state.isElementSVG) {
+					svgTransform = createSVGTransform(transformOpts, this.props.positionOffset);
+				} else {
+					// Add a CSS transform to move the element around. This allows us to move the element around
+					// without worrying about whether or not it is relatively or absolutely positioned.
+					// If the item you are dragging already has a transform set, wrap it in a <span> so <Draggable>
+					// has a clean slate.
+					style = createCSSTransform(transformOpts, this.props.positionOffset);
+				}
+
+				var _props = this.props,
+				    defaultClassName = _props.defaultClassName,
+				    defaultClassNameDragging = _props.defaultClassNameDragging,
+				    defaultClassNameDragged = _props.defaultClassNameDragged;
+
+				var children = React$$1.Children.only(this.props.children);
+
+				// Mark with class while dragging
+				var className = classnames(children.props.className || '', defaultClassName, (_classNames = {}, defineProperty(_classNames, defaultClassNameDragging, this.state.dragging), defineProperty(_classNames, defaultClassNameDragged, this.state.dragged), _classNames));
+
+				// Reuse the child provided
+				// This makes it flexible to use whatever element is wanted (div, ul, etc)
+				return React$$1.createElement(DraggableCore, _extends({}, this.props, { onStart: this.onDragStart, onDrag: this.onDrag, onStop: this.onDragStop }), React$$1.cloneElement(children, {
+					className: className,
+					style: _extends({}, children.props.style, style),
+					transform: svgTransform
+				}));
+			}
+		}]);
+		return Draggable;
+	}(React$$1.Component);
+
+	Draggable.displayName = 'Draggable';
+	Draggable.propTypes = _extends({}, DraggableCore.propTypes, {
+
+		/**
+   * `axis` determines which axis the draggable can move.
+   *
+   *  Note that all callbacks will still return data as normal. This only
+   *  controls flushing to the DOM.
+   *
+   * 'both' allows movement horizontally and vertically.
+   * 'x' limits movement to horizontal axis.
+   * 'y' limits movement to vertical axis.
+   * 'none' limits all movement.
+   *
+   * Defaults to 'both'.
+   */
+		axis: propTypes.oneOf(['both', 'x', 'y', 'none']),
+
+		/**
+   * `bounds` determines the range of movement available to the element.
+   * Available values are:
+   *
+   * 'parent' restricts movement within the Draggable's parent node.
+   *
+   * Alternatively, pass an object with the following properties, all of which are optional:
+   *
+   * {left: LEFT_BOUND, right: RIGHT_BOUND, bottom: BOTTOM_BOUND, top: TOP_BOUND}
+   *
+   * All values are in px.
+   *
+   * Example:
+   *
+   * ```jsx
+   *   let App = React.createClass({
+   *       render: function () {
+   *         return (
+   *            <Draggable bounds={{right: 300, bottom: 300}}>
+   *              <div>Content</div>
+   *           </Draggable>
+   *         );
+   *       }
+   *   });
+   * ```
+   */
+		bounds: propTypes.oneOfType([propTypes.shape({
+			left: propTypes.number,
+			right: propTypes.number,
+			top: propTypes.number,
+			bottom: propTypes.number
+		}), propTypes.string, propTypes.oneOf([false])]),
+
+		defaultClassName: propTypes.string,
+		defaultClassNameDragging: propTypes.string,
+		defaultClassNameDragged: propTypes.string,
+
+		/**
+   * `defaultPosition` specifies the x and y that the dragged item should start at
+   *
+   * Example:
+   *
+   * ```jsx
+   *      let App = React.createClass({
+   *          render: function () {
+   *              return (
+   *                  <Draggable defaultPosition={{x: 25, y: 25}}>
+   *                      <div>I start with transformX: 25px and transformY: 25px;</div>
+   *                  </Draggable>
+   *              );
+   *          }
+   *      });
+   * ```
+   */
+		defaultPosition: propTypes.shape({
+			x: propTypes.number,
+			y: propTypes.number
+		}),
+		positionOffset: propTypes.shape({
+			x: propTypes.oneOfType([propTypes.number, propTypes.string]),
+			y: propTypes.oneOfType([propTypes.number, propTypes.string])
+		}),
+
+		/**
+   * `position`, if present, defines the current position of the element.
+   *
+   *  This is similar to how form elements in React work - if no `position` is supplied, the component
+   *  is uncontrolled.
+   *
+   * Example:
+   *
+   * ```jsx
+   *      let App = React.createClass({
+   *          render: function () {
+   *              return (
+   *                  <Draggable position={{x: 25, y: 25}}>
+   *                      <div>I start with transformX: 25px and transformY: 25px;</div>
+   *                  </Draggable>
+   *              );
+   *          }
+   *      });
+   * ```
+   */
+		position: propTypes.shape({
+			x: propTypes.number,
+			y: propTypes.number
+		}),
+
+		/**
+   * These properties should be defined on the child, not here.
+   */
+		className: dontSetMe,
+		style: dontSetMe,
+		transform: dontSetMe
+	});
+	Draggable.defaultProps = _extends({}, DraggableCore.defaultProps, {
+		axis: 'both',
+		bounds: false,
+		defaultClassName: 'react-draggable',
+		defaultClassNameDragging: 'react-draggable-dragging',
+		defaultClassNameDragged: 'react-draggable-dragged',
+		defaultPosition: { x: 0, y: 0 },
+		position: null,
+		scale: 1
+	});
+
+	// Previous versions of this lib exported <Draggable> as the root export. As to not break
+	// them, or TypeScript, we export *both* as the root and as 'default'.
+	// See https://github.com/mzabriskie/react-draggable/pull/254
+	// and https://github.com/mzabriskie/react-draggable/issues/266
+	Draggable.default = Draggable;
+	Draggable.DraggableCore = DraggableCore;
+
+	return Draggable;
+});
+
+});
+
 var _extends$9 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
 var _createClass$g = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
-function _toConsumableArray$4(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
-
 function _classCallCheck$g(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _possibleConstructorReturn$e(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
 
 function _inherits$e(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
 
+var InfoBox = function (_Component) {
+    _inherits$e(InfoBox, _Component);
+
+    function InfoBox(props) {
+        _classCallCheck$g(this, InfoBox);
+
+        var _this = _possibleConstructorReturn$e(this, (InfoBox.__proto__ || Object.getPrototypeOf(InfoBox)).call(this, props));
+
+        _this.state = {
+            style: {
+                position: 'fixed',
+                top: 200,
+                left: 200,
+                width: 250
+            }
+        };
+        return _this;
+    }
+
+    _createClass$g(InfoBox, [{
+        key: 'componentDidMount',
+        value: function componentDidMount() {
+            this.updateStyle();
+        }
+    }, {
+        key: 'componentDidUpdate',
+        value: function componentDidUpdate(prevProps) {
+            if (this.props.defaultPos !== prevProps.defaultPos) {
+                this.updateStyle();
+            }
+        }
+    }, {
+        key: 'handleOnStop',
+        value: function handleOnStop(e) {
+            if (this.props.onStop) {
+                this.props.onStop(e);
+            }
+        }
+    }, {
+        key: 'updateStyle',
+        value: function updateStyle() {
+            this.setState({
+                style: _extends$9({}, this.state.style, this.props.defaultPos)
+            });
+        }
+    }, {
+        key: 'onDismiss',
+        value: function onDismiss(e) {
+            if (this.props.onDismiss) {
+                this.props.onDismiss(e);
+            }
+        }
+    }, {
+        key: 'render',
+        value: function render() {
+            var _this2 = this;
+
+            if (!this.props.visible) return null;
+            return React.createElement(
+                reactDraggable,
+                { handle: '.handle', onStop: function onStop(e) {
+                        return _this2.handleOnStop(e);
+                    }
+                },
+                React.createElement(
+                    'div',
+                    {
+                        style: this.state.style },
+                    React.createElement(
+                        Message,
+                        {
+                            style: { opacity: 0.98 },
+                            onDismiss: function onDismiss(e) {
+                                _this2.onDismiss(e);
+                            },
+                            size: 'small'
+                        },
+                        React.createElement(
+                            Header,
+                            { textAlign: 'center', as: 'h5', className: 'handle', style: { cursor: 'grab' } },
+                            this.props.header
+                        ),
+                        React.createElement(Divider, null),
+                        React.createElement(
+                            Message.Content,
+                            null,
+                            this.props.content
+                        )
+                    )
+                )
+            );
+        }
+    }]);
+
+    return InfoBox;
+}(Component);
+
+var SiaPopup = function SiaPopup(_ref) {
+    var content = _ref.content,
+        trigger = _ref.trigger;
+
+
+    return React.createElement(Popup, { inverted: true, style: { opacity: 0.9 }, content: content, trigger: trigger });
+};
+
+var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
+
+var AnnoDetails = function AnnoDetails(props) {
+    var _useState = useState(''),
+        _useState2 = _slicedToArray(_useState, 2),
+        comment = _useState2[0],
+        setComment = _useState2[1];
+
+    var _useState3 = useState(false),
+        _useState4 = _slicedToArray(_useState3, 2),
+        example = _useState4[0],
+        setExample = _useState4[1];
+
+    var _useState5 = useState(false),
+        _useState6 = _slicedToArray(_useState5, 2),
+        showSaveBtn = _useState6[0],
+        setShowSaveBtn = _useState6[1];
+
+    var tARef = useRef();
+    useEffect(function () {
+        if (props.anno) {
+            if (props.anno.comment) {
+                setComment(props.anno.comment);
+            } else {
+                setComment('');
+            }
+        }
+    }, [props.anno]);
+
+    useEffect(function () {
+        if (tARef.current) {
+            tARef.current.focus();
+        }
+    }, [props.commentInputTrigger]);
+
+    var _onDismiss = function _onDismiss() {
+        if (props.onDismiss) {
+            props.onDismiss();
+        }
+    };
+
+    var onCommentUpdate = function onCommentUpdate() {
+        if (props.onCommentUpdate) {
+            props.onCommentUpdate(comment);
+        }
+        setShowSaveBtn(false);
+    };
+
+    var onMarkExampleClick = function onMarkExampleClick() {
+        // setExample(!example)
+        if (props.onMarkExample) {
+            props.onMarkExample(props.anno);
+        }
+    };
+
+    var renderSaveBtn = function renderSaveBtn() {
+        if (showSaveBtn) {
+            return React.createElement(Label, { as: 'a', corner: 'right', icon: 'save', color: 'red' });
+        }
+    };
+
+    var renderComment = function renderComment() {
+        return React.createElement(
+            'div',
+            null,
+            React.createElement(
+                Form,
+                { onClick: function onClick() {} },
+                renderSaveBtn(),
+                React.createElement(TextArea, {
+                    placeholder: 'Write a comment',
+                    ref: tARef,
+                    value: comment,
+                    rows: 2,
+                    onBlur: function onBlur() {
+                        return onCommentUpdate();
+                    },
+                    onFocus: function onFocus() {
+                        return setShowSaveBtn(true);
+                    },
+                    onChange: function onChange(e) {
+                        return setComment(e.target.value);
+                    }
+                })
+            )
+        );
+    };
+    var renderLabels = function renderLabels() {
+        if (props.anno) {
+            var selectedLabelIds = props.anno.labelIds;
+            if (!selectedLabelIds) return 'No Label';
+
+            var lbls = '';
+            props.anno.labelIds.forEach(function (lbl, idx) {
+                var labelObject = props.possibleLabels.find(function (el) {
+                    return el.id === lbl;
+                });
+                if (idx > 0) lbls += ', ';
+                lbls += labelObject.label;
+            });
+            if (!lbls) return 'No Label';
+            return lbls;
+        } else {
+            return 'No Label';
+        }
+    };
+
+    var renderExampleMark = function renderExampleMark() {
+        if (!props.allowedToMarkExample) return null;
+        var color = 'grey';
+        var iconName = 'bookmark outline';
+        if (props.anno) {
+            if (props.anno.isExample) {
+                color = 'yellow';
+                iconName = 'bookmark';
+            }
+        }
+        var mark = React.createElement(
+            Label,
+            {
+                as: 'a',
+                color: color,
+                style: { opacity: 0.8 },
+                size: 'medium',
+                corner: 'left',
+                onClick: function onClick() {
+                    onMarkExampleClick();
+                }
+            },
+            React.createElement(Icon, { name: iconName })
+        );
+        return React.createElement(SiaPopup, {
+            content: 'Mark this annotation as example for other annotators',
+            trigger: mark
+        });
+    };
+
+    var renderDescription = function renderDescription() {
+        if (props.anno) {
+            return React.createElement(
+                'div',
+                null,
+                renderExampleMark(),
+                React.createElement(
+                    List,
+                    null,
+                    React.createElement(List.Item, { icon: 'at', content: props.anno.id }),
+                    React.createElement(List.Item, { icon: 'tag', content: renderLabels() }),
+                    React.createElement(List.Item, {
+                        icon: 'time',
+                        content: props.anno.annoTime.toLocaleString('us', {
+                            minimumFractionDigits: 2,
+                            maximumFractionDigits: 2
+                        }) + ' seconds'
+                    })
+                ),
+                renderComment()
+            );
+        } else {
+            return 'No annotation selected!';
+        }
+    };
+
+    return React.createElement(InfoBox, {
+        header: 'Annotation Details',
+        content: renderDescription(),
+        visible: props.visible,
+        defaultPos: props.defaultPos,
+        onDismiss: function onDismiss(e) {
+            return _onDismiss();
+        }
+    });
+};
+
+var _slicedToArray$1 = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
+
+function _toConsumableArray$4(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
+// import actions from '../../../../actions'
+// import * as transform from '../utils/transform'
+// const { siaShowImgBar } = actions
+
+var AnnoStats = function AnnoStats(props) {
+    var _useState = useState([]),
+        _useState2 = _slicedToArray$1(_useState, 2),
+        hideList = _useState2[0],
+        setHideList = _useState2[1];
+
+    useEffect(function () {
+        setHideList([]);
+    }, [props.imgLoadCount]);
+
+    var _onDismiss = function _onDismiss() {
+        if (props.onDismiss) {
+            props.onDismiss();
+        }
+    };
+
+    var onLblClick = function onLblClick(lbl) {
+        var hideLbl = false;
+        if (hideList.includes(lbl.id)) {
+            setHideList(hideList.filter(function (e) {
+                return e !== lbl.id;
+            }));
+            hideLbl = false;
+        } else {
+            // hideList.push(lbl.id)
+            setHideList([].concat(_toConsumableArray$4(hideList), [lbl.id]));
+            hideLbl = true;
+        }
+        if (props.onHideLbl) {
+            props.onHideLbl(lbl, hideLbl);
+        }
+    };
+
+    var renderRow = function renderRow(s) {
+
+        var opacity = hideList.includes(s.id) ? 0.5 : 1.0;
+        return React.createElement(
+            List.Item,
+            { key: s.id },
+            React.createElement(
+                List.Content,
+                null,
+                React.createElement(
+                    Label,
+                    { as: 'a', tag: true, style: { background: s.color, opacity: opacity },
+                        onClick: function onClick() {
+                            return onLblClick(s);
+                        }
+                    },
+                    s.label,
+                    React.createElement(
+                        Label.Detail,
+                        null,
+                        s.amount
+                    )
+                )
+            )
+        );
+    };
+
+    var renderRows = function renderRows() {
+        var stats = {};
+        props.annos.forEach(function (a) {
+            // console.log('render rows', a)
+            if (a.status !== 'deleted') {
+                a.labelIds.forEach(function (lblId) {
+                    if (lblId in stats) {
+                        stats[lblId] += 1;
+                    } else {
+                        stats[lblId] = 1;
+                    }
+                });
+                if (a.labelIds.length === 0) {
+                    if (-1 in stats) {
+                        stats[-1] += 1;
+                    } else {
+                        stats[-1] = 1;
+                    }
+                }
+            }
+        });
+        var res = Object.entries(stats).map(function (_ref) {
+            var _ref2 = _slicedToArray$1(_ref, 2),
+                key = _ref2[0],
+                value = _ref2[1];
+
+            var lbl = props.possibleLabels.find(function (e) {
+                return e.id === parseInt(key);
+            });
+            if (!lbl) {
+                lbl = { 'id': -1, 'label': 'No Label', 'color': getDefaultColor() };
+            }
+
+            lbl.amount = value;
+            // return renderRow({class:idToLbl[key], amount:value, color:idToColor[key]})
+            return renderRow(lbl);
+        });
+        return res;
+    };
+    var renderDescription = function renderDescription() {
+        return React.createElement(
+            List,
+            null,
+            renderRows()
+        );
+    };
+
+    return React.createElement(InfoBox, {
+        header: 'Annotations per Label',
+        content: renderDescription(),
+        visible: props.visible,
+        defaultPos: props.defaultPos,
+        onDismiss: function onDismiss(e) {
+            return _onDismiss();
+        }
+    });
+};
+
+var LabelExampleViewer = function LabelExampleViewer(props) {
+
+    var requestExample = function requestExample(e) {
+        e.stopPropagation();
+        if (props.onRequestExample) {
+            props.onRequestExample();
+        }
+    };
+    var renderContent = function renderContent() {
+        if (!props.lbl) return null;
+        if (!props.exampleImg) return null;
+        var description = React.createElement(
+            'div',
+            null,
+            props.lbl.description,
+            React.createElement(
+                Divider,
+                { horizontal: true },
+                ' comment '
+            ),
+            props.exampleImg.anno ? props.exampleImg.anno.comment : "no comment"
+        );
+        return React.createElement(
+            'div',
+            null,
+            React.createElement(
+                Card
+
+                // image={props.exampleImg.img}
+                // description={props.lbl.description}
+                // header={props.lbl.label}
+                // // description={props.exampleImg.anno.comment}
+                // extra={props.exampleImg.anno.comment}
+                ,
+                null,
+                React.createElement(Image, { onClick: function onClick(e) {
+                        return requestExample(e);
+                    }, src: props.exampleImg.img, wrapped: true, ui: false }),
+                React.createElement(
+                    Card.Content,
+                    null,
+                    React.createElement(
+                        Card.Header,
+                        null,
+                        props.lbl.label
+                    ),
+                    React.createElement(
+                        Card.Description,
+                        null,
+                        description
+                    )
+                )
+            )
+        );
+    };
+
+    var handlePromptClick = function handlePromptClick() {
+        if (props.onClose) {
+            props.onClose();
+        }
+    };
+
+    return React.createElement(Prompt, { onClick: function onClick() {
+            handlePromptClick();
+        },
+        active: props.active, content: renderContent()
+    });
+};
+
+var _slicedToArray$2 = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
+var LabelInfo = function LabelInfo(props) {
+    var _useState = useState(false),
+        _useState2 = _slicedToArray$2(_useState, 2),
+        showExampleViewer = _useState2[0],
+        setShowExampleViewer = _useState2[1];
+
+    var _useState3 = useState(undefined),
+        _useState4 = _slicedToArray$2(_useState3, 2),
+        myLbl = _useState4[0],
+        setMyLbl = _useState4[1];
+    // const { data: exampleImg, mutate: getAnnoExample } = exampleApi.useGetAnnoExampleImg({})
+
+
+    useEffect(function () {
+        if (props.selectedAnno) {
+            var selectedLabelIds = props.selectedAnno.labelIds;
+            if (selectedLabelIds) {
+                var lbl = props.possibleLabels.find(function (e) {
+                    return selectedLabelIds[0] === e.id;
+                });
+                if (lbl) {
+                    if (lbl !== myLbl) {
+                        setMyLbl(lbl);
+                        if (props.visible)
+                            // getAnnoExample({llId:lbl.id, type:'annoBased', drawAnno: true, addContext:0.05})
+                            requestImg(lbl, props.selectedAnno);
+                    }
+                }
+            }
+        }
+    }, [props.selectedAnno]);
+    var _onDismiss = function _onDismiss() {
+        if (props.onDismiss) {
+            props.onDismiss();
+        }
+    };
+
+    var requestImg = function requestImg(lbl, anno) {
+        if (props.onGetAnnoExample) {
+            props.onGetAnnoExample({ lbl: lbl, anno: anno });
+        }
+    };
+
+    var handleImgClick = function handleImgClick() {
+        console.log('clicked img');
+        // setShowExampleViewer(true)
+        // requestImg(myLbl, props.selectedAnno)
+
+        setShowExampleViewer(true);
+        // getAnnoExample({llId:myLbl.id, type:'annoBased', drawAnno: true, addContext:0.05})
+    };
+
+    var renderExampleImg = function renderExampleImg() {
+        if (!props.exampleImg) return null;
+        return React.createElement(
+            'div',
+            null,
+            React.createElement(
+                Divider,
+                { onClick: function onClick() {
+                        return handleImgClick();
+                    }, horizontal: true },
+                ' Example '
+            ),
+            React.createElement(SiaPopup, { trigger: React.createElement(Image, { src: props.exampleImg.img, rounded: true, centered: true, size: 'medium',
+                    onClick: function onClick() {
+                        return handleImgClick();
+                    }
+                }),
+                content: 'Click on image to view more examples' })
+        );
+    };
+
+    var renderDescription = function renderDescription() {
+        // if (props.selectedAnno){
+        // if (myLbl){
+        // const selectedLabelIds = props.selectedAnno.labelIds
+        // if (!selectedLabelIds) return 'No Label'
+        // const lbl = props.possibleLabels.find( e => {
+        //     return selectedLabelIds[0] === e.id
+        // })
+        if (!myLbl) return "No Label";
+        return React.createElement(
+            'div',
+            null,
+            React.createElement(
+                Header,
+                null,
+                myLbl.label
+            ),
+            React.createElement('div', { dangerouslySetInnerHTML: { __html: myLbl.description } }),
+            renderExampleImg(),
+            React.createElement(LabelExampleViewer, { onRequestExample: function onRequestExample() {
+                    return requestImg(myLbl, props.selectedAnno);
+                }, onClose: function onClose() {
+                    setShowExampleViewer(false);
+                }, active: showExampleViewer, lbl: myLbl, exampleImg: props.exampleImg })
+        );
+        // } else {
+        //     return 'No Label'
+        // }
+    };
+
+    return React.createElement(InfoBox, {
+        header: 'Label Info',
+        content: renderDescription(),
+        visible: props.visible,
+        defaultPos: props.defaultPos,
+        onDismiss: function onDismiss() {
+            return _onDismiss();
+        }
+    });
+};
+
+var _extends$a = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _createClass$h = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+function _classCallCheck$h(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn$f(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits$f(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+// import actions from '../../../../actions'
+// const { siaShowImgBar, siaSetUIConfig } = actions
+
+var InfoBoxes = function (_Component) {
+    _inherits$f(InfoBoxes, _Component);
+
+    function InfoBoxes(props) {
+        _classCallCheck$h(this, InfoBoxes);
+
+        var _this = _possibleConstructorReturn$f(this, (InfoBoxes.__proto__ || Object.getPrototypeOf(InfoBoxes)).call(this, props));
+
+        _this.state = {
+            position: {
+                top: 0,
+                left: 0
+            }
+        };
+        return _this;
+    }
+
+    _createClass$h(InfoBoxes, [{
+        key: 'componentDidMount',
+        value: function componentDidMount() {
+            this.updateLayout();
+        }
+    }, {
+        key: 'componentDidUpdate',
+        value: function componentDidUpdate(prevProps) {
+
+            if (this.props.layoutUpdate !== prevProps.layoutUpdate) {
+                this.updateLayout();
+            }
+            if (this.props.commentInputTrigger !== prevProps.commentInputTrigger) {
+                if (!this.props.uiConfig.annoDetails.visible) {
+                    this.showAnnoDetails(true);
+                }
+            }
+        }
+    }, {
+        key: 'updateLayout',
+        value: function updateLayout() {
+            if (this.props.container.current) {
+                var container = this.props.container.current.getBoundingClientRect();
+                this.setState({
+                    position: _extends$a({}, this.state.position, {
+                        left: container.right - 250,
+                        top: container.top
+                    })
+                });
+            }
+        }
+    }, {
+        key: 'showAnnoDetails',
+        value: function showAnnoDetails() {
+            var show = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+
+            this.props.onUiConfigUpdate(_extends$a({}, this.props.uiConfig, {
+                annoDetails: _extends$a({}, this.props.uiConfig.annoDetails, {
+                    visible: show
+                })
+            }));
+        }
+    }, {
+        key: 'onDismiss',
+        value: function onDismiss(type) {
+            if (this.props.onUiConfigUpdate) {
+                switch (type) {
+                    case 'AnnoDetails':
+                        this.showAnnoDetails(false);
+                        break;
+                    case 'LabelInfo':
+                        this.props.onUiConfigUpdate(_extends$a({}, this.props.uiConfig, {
+                            labelInfo: _extends$a({}, this.props.uiConfig.labelInfo, {
+                                visible: false
+                            })
+                        }));
+                        break;
+                    case 'AnnoStats':
+                        this.props.onUiConfigUpdate(_extends$a({}, this.props.uiConfig, {
+                            annoStats: _extends$a({}, this.props.uiConfig.annoStats, {
+                                visible: false
+                            })
+                        }));
+                        break;
+                    default:
+                        break;
+                }
+            }
+        }
+    }, {
+        key: 'onCommentUpdate',
+        value: function onCommentUpdate(comment) {
+            if (this.props.onCommentUpdate) {
+                this.props.onCommentUpdate(comment);
+            }
+        }
+    }, {
+        key: 'onMarkExample',
+        value: function onMarkExample(anno) {
+            if (this.props.onMarkExample) {
+                this.props.onMarkExample(anno);
+            }
+        }
+    }, {
+        key: 'onHideLbl',
+        value: function onHideLbl(lbl, hide) {
+            if (this.props.onHideLbl) {
+                this.props.onHideLbl(lbl, hide);
+            }
+        }
+    }, {
+        key: 'render',
+        value: function render() {
+            var _this2 = this;
+
+            if (!this.props.annos) return null;
+            // if (!this.props.selectedAnno) return null
+            return React.createElement(
+                'div',
+                null,
+                React.createElement(LabelInfo, { selectedAnno: this.props.selectedAnno,
+                    possibleLabels: this.props.possibleLabels,
+                    defaultPos: this.state.position,
+                    onDismiss: function onDismiss() {
+                        return _this2.onDismiss('LabelInfo');
+                    },
+                    visible: this.props.uiConfig.labelInfo.visible,
+                    onGetAnnoExample: function onGetAnnoExample(exampleArgs) {
+                        return _this2.props.onGetAnnoExample ? _this2.props.onGetAnnoExample(exampleArgs) : {};
+                    },
+                    exampleImg: this.props.exampleImg
+                }),
+                React.createElement(AnnoDetails, { anno: this.props.selectedAnno,
+                    possibleLabels: this.props.possibleLabels,
+                    defaultPos: {
+                        left: this.state.position.left - 300,
+                        top: this.state.position.top
+                    },
+                    onDismiss: function onDismiss() {
+                        return _this2.onDismiss('AnnoDetails');
+                    },
+                    onCommentUpdate: function onCommentUpdate(comment) {
+                        return _this2.onCommentUpdate(comment);
+                    },
+                    onMarkExample: function onMarkExample(anno) {
+                        return _this2.onMarkExample(anno);
+                    },
+                    allowedToMarkExample: this.props.allowedToMarkExample,
+                    commentInputTrigger: this.props.commentInputTrigger,
+                    visible: this.props.uiConfig.annoDetails.visible
+                }),
+                React.createElement(AnnoStats, { selectedAnno: this.props.selectedAnno,
+                    annos: this.props.annos,
+                    possibleLabels: this.props.possibleLabels,
+                    defaultPos: {
+                        left: this.state.position.left,
+                        top: this.state.position.top + 400
+                    }
+                    // defaultPos={this.state.position}
+                    , onDismiss: function onDismiss() {
+                        return _this2.onDismiss('AnnoStats');
+                    },
+                    onHideLbl: function onHideLbl(lbl, hide) {
+                        return _this2.onHideLbl(lbl, hide);
+                    },
+                    visible: this.props.uiConfig.annoStats.visible,
+                    imgLoadCount: this.props.imgLoadCount
+                })
+            );
+        }
+    }]);
+
+    return InfoBoxes;
+}(Component);
+
+var _extends$b = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _createClass$i = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+function _toConsumableArray$5(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
+
+function _classCallCheck$i(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn$g(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits$g(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
 /**
  * SIA Canvas element that handles annotations within an image
  * 
@@ -3810,10 +6789,16 @@ function _inherits$e(subClass, superClass) { if (typeof superClass !== "function
  *          label: str, (name of the label) 
  *          color: str (color is optional)
  *      }
- * @param {object} image - The actual image blob that will be displayed
- *      {id: int, data: blob}
+ * @param {blob} imageBlob - The actual image blob that will be displayed
  * @param {object} uiConfig - User interface configs 
- *      {nodesRadius: int, strokeWidth: int}
+ *      {
+ *          nodesRadius: int, strokeWidth: int,
+ *          layoutOffset: {left:int, top:int, right:int, bottom:int}, -> Offset of the canvas inside the container
+ *          imgBarVisible: bool,
+ *          imgLabelInputVisible: bool,
+ *          centerCanvasInContainer: bool, -> Center the canvas in the middle of the container.
+ *          maxCanvas: bool -> Maximize Canvas Size. Do not fit canvas to image size.
+ *      }
  * @param {int} layoutUpdate - A counter that triggers a layout update
  *      everytime it is incremented.
  * @param {string} selectedTool - The tool that is selected to draw an 
@@ -3841,44 +6826,43 @@ function _inherits$e(subClass, superClass) { if (typeof superClass !== "function
  *          actions: {
  *              label: bool,
  *          }
- *      }
+ *      },
+ *      allowedToMarkExample: bool, -> Indicates wether the current user is allowed to mark an annotation as example.
+ *      autoSaveInterval: int -> Interval in seconds when an autosave will be requested by canvas
  *   }
- * @param {bool} imgBarVisible - Controls visibility of the ImgBar
- * @param {bool} imgLabelInputVisible - Controls visibility of the ImgLabelInputPrompt
- * @param {object} layoutOffset - Offset of the canvas inside the container:
- *      {left:int, top:int, right:int, bottom:int} values in pixels.
- * @param {bool} centerCanvasInContainer - Center the canvas in the 
- *      middle of the container.
- * @param {bool} maxCanvas - Maximize Canvas Size. Do not fit canvas to image size
  * @param {str or int} defaultLabel (optional) - Name or ID of the default label that is used
  *      when no label was selected by the annotator. If not set "no label" will be used.
  *      If ID is used, it needs to be one of the possible label ids.
  * @param {bool} blocked Block canvas view with loading dimmer.
+ * @param {int} nextAnnoId Id that will be used for the next annotation that 
+ *        will be created. If undefined, the canvas will create its own ids.
  * @param {bool} lockedAnnos A list of AnnoIds of annos that should only be displayed.
  *      Such annos can not be edited in any way.
- * @event onSVGUpdate - Fires when the svg in canvas changed.
- *      args: {width: int, height: int, scale: float, translateX: float,
- *      translateY:float}
- * @event onImageLoaded - Fires when an image was loaded into the canvas
- * @event onAnnoSelect - Fires when an annotation was selected or if the
- *      selected annotation was updated.
- * @event onImgBarClose - Fires when close button on ImgBar was hit.
- * @event onImgLabelInputClose - ImgLabelInput requests to be closed.
  * @event onNotification - Callback for Notification messages
  *      args: {title: str, message: str, type: str}
  * @event onKeyDown - Fires for keyDown on canvas 
  * @event onKeyUp - Fires for keyUp on canvas 
- * @event onAnnoPerformedAction - Fires when an anno performed an action
- *      args: {annoId: int, newAnnos: list of annoObjects, pAction: str}
+ * @event onAnnoEvent - Fires when an anno performed an action
+ *      args: {anno: annoObject, newAnnos: list of annoObjects, pAction: str}
+ * @event onCanvasEvent - Fires on canvas event
+ *      args: {action: action, data: dataObject}
+ *      action -> CANVAS_SVG_UPDATE 
+ *          data: {width: int, height: int, scale: float, translateX: float,
+ *          translateY:float}
+ *      action -> CANVAS_UI_CONFIG_UPDATE
+ *      action -> CANVAS_LABEL_INPUT_CLOSE 
+ *      action -> CANVAS_IMG_LOADED
+ *      action -> CANVAS_IMGBAR_CLOSE
+ * @event onImgBarClose - Fires when close button on ImgBar was hit.
  */
 
 var Canvas = function (_Component) {
-    _inherits$e(Canvas, _Component);
+    _inherits$g(Canvas, _Component);
 
     function Canvas(props) {
-        _classCallCheck$g(this, Canvas);
+        _classCallCheck$i(this, Canvas);
 
-        var _this = _possibleConstructorReturn$e(this, (Canvas.__proto__ || Object.getPrototypeOf(Canvas)).call(this, props));
+        var _this = _possibleConstructorReturn$g(this, (Canvas.__proto__ || Object.getPrototypeOf(Canvas)).call(this, props));
 
         _this.state = {
 
@@ -3911,11 +6895,13 @@ var Canvas = function (_Component) {
             imgLoadTimestamp: 0,
             performedImageInit: false,
             prevLabel: [],
-            imageData: undefined,
+            imageBlob: undefined,
             isJunk: false,
             imgBarVisible: false,
             annoToolBarVisible: false,
-            possibleLabels: undefined
+            possibleLabels: undefined,
+            annoCommentInputTrigger: 0
+            // showAnnoCommentInput: false
         };
         _this.img = React.createRef();
         _this.svg = React.createRef();
@@ -3926,17 +6912,52 @@ var Canvas = function (_Component) {
         });
         _this.mousePosAbs = undefined;
         _this.clipboard = undefined;
+        _this.autoSaveI = undefined;
         return _this;
     }
 
-    _createClass$g(Canvas, [{
+    _createClass$i(Canvas, [{
         key: 'componentDidMount',
         value: function componentDidMount() {
+            var _this2 = this;
+
             this.updatePossibleLabels();
             if (Number.isInteger(this.props.defaultLabel)) {
 
                 this.setState({ prevLabel: [this.props.defaultLabel] });
             }
+            if (this.props.canvasConfig.autoSaveInterval) {
+                this.autoSaveI = setInterval(function () {
+                    // console.log('AutoSave')
+                    // this.props.onAutoSave()
+                    _this2.triggerCanvasEvent(CANVAS_AUTO_SAVE);
+                }, this.props.canvasConfig.autoSaveInterval * 1000);
+            }
+            if (this.props.onGetFunction) {
+                this.props.onGetFunction({
+                    'deleteAllAnnos': function deleteAllAnnos() {
+                        return _this2.deleteAllAnnos();
+                    },
+                    'unloadImage': function unloadImage() {
+                        return _this2.unloadImage();
+                    },
+                    'resetZoom': function resetZoom() {
+                        return _this2.resetZoom();
+                    },
+                    'getAnnos': function getAnnos(annos, removeFrontendIds) {
+                        return _this2.getAnnos(annos, removeFrontendIds);
+                    }
+                });
+                // this.props.onGetFunction(
+                //     () => this.deleteAllAnnos()
+                // )
+            }
+        }
+    }, {
+        key: 'componentWillUnmount',
+        value: function componentWillUnmount() {
+            clearInterval(this.autoSaveI);
+            console.log('Cleard auto save interval!');
         }
     }, {
         key: 'componentDidUpdate',
@@ -3944,19 +6965,21 @@ var Canvas = function (_Component) {
             // if (this.props.image.id !== prevProps.image.id){
 
             // }
-            if (prevProps.annos !== this.props.annos) {
+            if (prevProps.imageMeta !== this.props.imageMeta) {
                 this.setState({
-                    imgLabelIds: this.props.annos.image.labelIds,
-                    imgAnnoTime: this.props.annos.image.annoTime,
+                    imgLabelIds: this.props.imageMeta.labelIds,
+                    imgAnnoTime: this.props.imageMeta.annoTime,
                     imgLoadTimestamp: performance.now()
                     // isJunk: this.props.annos.image.isJunk
                 });
-                if (this.state.imageData) {
-                    this.updateCanvasView(fixBackendAnnos(this.props.annos.annotations));
+            }
+            if (prevProps.annos !== this.props.annos) {
+                if (this.state.imageBlob) {
+                    this.updateCanvasView(fixBackendAnnos(this.props.annos));
                 }
                 // this.setState({
                 //     imageLoaded: false,
-                //     // imageData: undefined
+                //     // imageBlob: undefined
                 // })
             }
             if (prevProps.isJunk !== this.props.isJunk) {
@@ -3966,8 +6989,8 @@ var Canvas = function (_Component) {
                     });
                 }
             }
-            if (this.state.imageData !== this.props.image.data) {
-                this.setState({ imageData: this.props.image.data });
+            if (this.state.imageBlob !== this.props.imageBlob) {
+                this.setState({ imageBlob: this.props.imageBlob });
             }
             // if (!this.state.imageLoaded){
             //     if(this.props.annos.image.id === this.props.image.id){
@@ -3988,11 +7011,11 @@ var Canvas = function (_Component) {
                     performedImageInit: false,
                     annoToolBarVisible: false
                 });
-                if (this.props.imgBarVisible) {
+                if (this.props.uiConfig.imgBarVisible) {
                     this.setState({ imgBarVisible: true });
                 }
                 this.hist.clearHist();
-                this.hist.push(_extends$9({}, this.getAnnos(), {
+                this.hist.push(_extends$b({}, this.getAnnos(), {
                     selectedAnnoId: undefined
                 }), 'init');
             }
@@ -4000,11 +7023,13 @@ var Canvas = function (_Component) {
                 // Selected annotation should be on top
                 this.putSelectedOnTop(prevState);
                 if (prevState.imgLoadCount !== this.state.imgLoadCount) {
-                    this.updateCanvasView(fixBackendAnnos(this.props.annos.annotations));
-                    this.setImageLabels(this.props.annos.image.labelIds);
-                    this.setState({
-                        performedImageInit: true
-                    });
+                    this.updateCanvasView(fixBackendAnnos(this.props.annos));
+                    if (this.props.imageMeta) {
+                        this.setImageLabels(this.props.imageMeta.labelIds);
+                        this.setState({
+                            performedImageInit: true
+                        });
+                    }
                 }
                 if (prevProps.layoutUpdate !== this.props.layoutUpdate) {
                     this.selectAnnotation(undefined);
@@ -4024,9 +7049,10 @@ var Canvas = function (_Component) {
                 showSingleAnno: undefined,
                 selectedAnnoId: undefined
             });
-            if (this.props.onImageLoaded) {
-                this.props.onImageLoaded();
-            }
+            this.triggerCanvasEvent(CANVAS_IMG_LOADED);
+            // if (this.props.onImageLoaded){
+            //     this.props.onImageLoaded()
+            // }
         }
     }, {
         key: 'onMouseOver',
@@ -4059,7 +7085,7 @@ var Canvas = function (_Component) {
             } else {
                 newTranslation = getZoomTranslation(mousePos, this.state.svg, nextScale);
             }
-            this.setState({ svg: _extends$9({}, this.state.svg, {
+            this.setState({ svg: _extends$b({}, this.state.svg, {
                     scale: nextScale,
                     // translateX: -1*(mousePos.x * nextScale - mousePos.x)/nextScale,
                     // translateY: -1*(mousePos.y * nextScale - mousePos.y)/nextScale
@@ -4114,6 +7140,24 @@ var Canvas = function (_Component) {
                     break;
             }
         }
+
+        // handleAnnoCommentInputClose(comment){
+        //     const anno = this.findAnno(this.state.selectedAnnoId)
+        //     anno.comment = comment
+        //     this.stopAnnotimeMeasure(anno)
+        //     this.updateSelectedAnno(anno, modes.VIEW)
+        //     console.log('handleAnnoCommentInputClose', comment)
+        // }
+
+    }, {
+        key: 'updateAnnoComment',
+        value: function updateAnnoComment(comment) {
+            var anno = this.findAnno(this.state.selectedAnnoId);
+            anno.comment = comment;
+            this.handleAnnoEvent(anno, ANNO_COMMENT_UPDATE);
+            // this.stopAnnotimeMeasure(anno)
+            // console.log('updateAnnoComment', comment)
+        }
     }, {
         key: 'handleKeyAction',
         value: function handleKeyAction(action) {
@@ -4136,6 +7180,13 @@ var Canvas = function (_Component) {
                 case DELETE_ANNO:
                     this.deleteAnnotation(anno);
                     break;
+                case TOGGLE_ANNO_COMMENT_INPUT:
+                    if (this.state.selectedAnnoId) {
+                        this.setState({ annoCommentInputTrigger: this.state.annoCommentInputTrigger + 1 });
+                        // this.startAnnotimeMeasure(anno)
+                        // this.showSingleAnno(this.state.selectedAnnoId)
+                    }
+                    break;
                 case DELETE_ANNO_IN_CREATION:
                     this.deleteAnnoInCreationMode(anno);
                     break;
@@ -4222,6 +7273,20 @@ var Canvas = function (_Component) {
             this.removeSelectedAnno();
         }
 
+        /**
+         * Trigger canvas event
+         * @param {String} action Action that was performed
+         * @param {Object} data Data object of the action
+         */
+
+    }, {
+        key: 'triggerCanvasEvent',
+        value: function triggerCanvasEvent(action, data) {
+            if (this.props.onCanvasEvent) {
+                this.props.onCanvasEvent(action, data);
+            }
+        }
+
         /**
          * Handle actions that have been performed by an annotation 
          * @param {Number} anno Id of the annotation
@@ -4229,12 +7294,20 @@ var Canvas = function (_Component) {
          */
 
     }, {
-        key: 'onAnnoPerformedAction',
-        value: function onAnnoPerformedAction(anno, pAction) {
+        key: 'handleAnnoEvent',
+        value: function handleAnnoEvent(anno, pAction) {
             var newAnnos = undefined;
             switch (pAction) {
+                case ANNO_MARK_EXAMPLE:
+                    newAnnos = this.updateSelectedAnno(anno, VIEW);
+                    this.pushHist(newAnnos, anno.id, pAction, this.state.showSingleAnno);
+                    break;
                 case ANNO_SELECTED:
                     this.selectAnnotation(anno.id);
+                    // this.pushHist(
+                    //     this.state.annos, anno.id,
+                    //     pAction, this.state.showSingleAnno
+                    // )
                     break;
                 case ANNO_START_CREATING:
                     newAnnos = this.updateSelectedAnno(anno);
@@ -4291,6 +7364,18 @@ var Canvas = function (_Component) {
                     this.showSingleAnno(undefined);
                     this.pushHist(newAnnos, undefined, pAction, this.state.showSingleAnno);
                     break;
+                case ANNO_COMMENT_UPDATE:
+                    newAnnos = this.updateSelectedAnno(anno, VIEW);
+                    // newAnnos = this.updateSelectedAnno(anno, modes.DELETED) 
+                    // this.selectAnnotation(undefined)
+                    // this.showSingleAnno(undefined)
+                    this.pushHist(newAnnos, anno.id, pAction, this.state.showSingleAnno);
+                    this.handleNotification({
+                        title: "Saved comment",
+                        message: 'Saved comment: ' + anno.comment,
+                        type: SUCCESS
+                    });
+                    break;
                 case ANNO_LABEL_UPDATE:
                     anno = this.stopAnnotimeMeasure(anno);
                     if (!this.checkAnnoLength(anno)) {
@@ -4317,8 +7402,8 @@ var Canvas = function (_Component) {
                     console.warn('Action not handeled', pAction);
                     break;
             }
-            if (this.props.onAnnoPerformedAction) {
-                this.props.onAnnoPerformedAction(anno.id, newAnnos, pAction);
+            if (this.props.onAnnoEvent) {
+                this.props.onAnnoEvent(anno, newAnnos, pAction);
             }
         }
     }, {
@@ -4333,14 +7418,15 @@ var Canvas = function (_Component) {
             this.showLabelInput(false);
             this.showSingleAnno(undefined);
             var anno = this.findAnno(this.state.selectedAnnoId);
-            this.onAnnoPerformedAction(anno, ANNO_LABEL_UPDATE);
+            this.handleAnnoEvent(anno, ANNO_LABEL_UPDATE);
         }
     }, {
         key: 'handleImgBarClose',
         value: function handleImgBarClose() {
-            if (this.props.onImgBarClose) {
-                this.props.onImgBarClose();
-            }
+            this.triggerCanvasEvent(CANVAS_IMGBAR_CLOSE);
+            // if (this.props.onImgBarClose){
+            //     this.props.onImgBarClose()
+            // }
         }
     }, {
         key: 'handleImgLabelUpdate',
@@ -4354,7 +7440,7 @@ var Canvas = function (_Component) {
     }, {
         key: 'handleCanvasClick',
         value: function handleCanvasClick(e) {
-            if (this.props.imgBarVisible) {
+            if (this.props.uiConfig.imgBarVisible) {
                 this.setState({ imgBarVisible: true });
             }
         }
@@ -4366,10 +7452,16 @@ var Canvas = function (_Component) {
     }, {
         key: 'handleImgLabelInputClose',
         value: function handleImgLabelInputClose() {
-            if (this.props.onImgLabelInputClose) {
-                this.props.onImgLabelInputClose();
-            }
+            this.triggerCanvasEvent(CANVAS_LABEL_INPUT_CLOSE);
+            // if (this.props.onImgLabelInputClose){
+            //     this.props.onImgLabelInputClose()
+            // }
         }
+
+        // handleAnnoCommentInputClose(e){
+        //     this.showAnnoCommentInputField(false)
+        // }
+
     }, {
         key: 'handleSvgMouseMove',
         value: function handleSvgMouseMove(e) {
@@ -4382,6 +7474,48 @@ var Canvas = function (_Component) {
                 this.props.onNotification(messageObj);
             }
         }
+    }, {
+        key: 'handleHideLbl',
+        value: function handleHideLbl(lbl, hide) {
+            var _this3 = this;
+
+            // console.log('hide lbl', lbl, hide)
+            var hiddenSelected = false;
+            var newAnnos = this.state.annos.map(function (anno) {
+                // console.log('map annos', anno)
+                var newAnno = _extends$b({}, anno);
+                if (anno.labelIds.includes(lbl.id)) {
+                    newAnno.visible = !hide;
+                    if (anno.id === _this3.state.selectedAnnoId) hiddenSelected = true;
+                } else if (anno.labelIds.length === 0) {
+                    // no label case
+                    if (lbl.id === -1) {
+                        // -1 indicates no label
+                        newAnno.visible = !hide;
+                        if (anno.id === _this3.state.selectedAnnoId) hiddenSelected = true;
+                    }
+                }
+                return newAnno;
+            });
+            // console.log('newAnnos', newAnnos)
+            this.setState({ annos: newAnnos });
+            if (hiddenSelected) {
+                this.selectAnnotation(undefined);
+            }
+        }
+    }, {
+        key: 'handleMarkExample',
+        value: function handleMarkExample(anno) {
+            var newAnno = _extends$b({}, anno);
+            if (newAnno.isExample == undefined) {
+                newAnno.isExample = true;
+            } else if (newAnno.isExample) {
+                newAnno.isExample = false;
+            } else {
+                newAnno.isExample = true;
+            }
+            this.handleAnnoEvent(newAnno, ANNO_MARK_EXAMPLE);
+        }
 
         /*************
          * LOGIC     *
@@ -4403,9 +7537,9 @@ var Canvas = function (_Component) {
             var offset = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
 
             if (this.clipboard) {
-                var annos = [].concat(_toConsumableArray$4(this.state.annos));
+                var annos = [].concat(_toConsumableArray$5(this.state.annos));
                 var uid = _.uniqueId('new');
-                annos.push(_extends$9({}, this.clipboard, {
+                annos.push(_extends$b({}, this.clipboard, {
                     id: uid,
                     annoTime: 0,
                     status: NEW,
@@ -4469,13 +7603,13 @@ var Canvas = function (_Component) {
             var lbls = this.props.possibleLabels;
             lbls = lbls.map(function (e) {
                 if (!('color' in e)) {
-                    return _extends$9({}, e, { color: getColor(e.id) });
+                    return _extends$b({}, e, { color: getColor(e.id) });
                 } else {
-                    return _extends$9({}, e);
+                    return _extends$b({}, e);
                 }
             });
             this.setState({
-                possibleLabels: [].concat(_toConsumableArray$4(lbls))
+                possibleLabels: [].concat(_toConsumableArray$5(lbls))
             });
         }
     }, {
@@ -4486,7 +7620,7 @@ var Canvas = function (_Component) {
                 if (anno === undefined) {
                     myAnno = this.findAnno(this.state.selectedAnnoId);
                 } else {
-                    myAnno = _extends$9({}, anno);
+                    myAnno = _extends$b({}, anno);
                 }
                 myAnno = this.startAnnotimeMeasure(myAnno);
                 this.showLabelInput();
@@ -4530,7 +7664,7 @@ var Canvas = function (_Component) {
         value: function pushHist(annos, selectedAnnoId, pAction, showSingleAnno) {
             var imgLabelIds = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : this.state.imgLabelIds;
 
-            this.hist.push(_extends$9({}, this.getAnnos(annos, false), {
+            this.hist.push(_extends$b({}, this.getAnnos(annos, false), {
                 selectedAnnoId: selectedAnnoId,
                 showSingleAnno: showSingleAnno,
                 imgLabelIds: imgLabelIds
@@ -4560,7 +7694,7 @@ var Canvas = function (_Component) {
                     var ar = this.findAnnoRef(this.state.selectedAnnoId);
                     if (ar !== undefined) ar.current.myAnno.current.removeLastNode();
                 } else {
-                    this.onAnnoPerformedAction(anno, ANNO_DELETED);
+                    this.handleAnnoEvent(anno, ANNO_DELETED);
                 }
             }
         }
@@ -4571,7 +7705,7 @@ var Canvas = function (_Component) {
                 if (anno.mode === CREATE) {
                     // const ar = this.findAnnoRef(this.state.selectedAnnoId)
                     // if (ar !== undefined) ar.current.myAnno.current.removeLastNode()
-                    this.onAnnoPerformedAction(anno, ANNO_DELETED);
+                    this.handleAnnoEvent(anno, ANNO_DELETED);
                 }
             }
         }
@@ -4581,7 +7715,7 @@ var Canvas = function (_Component) {
             var newAnnos = [];
             this.state.annos.forEach(function (e) {
                 if (typeof e.id !== "string") {
-                    newAnnos.push(_extends$9({}, e, { status: DELETED$1 }));
+                    newAnnos.push(_extends$b({}, e, { status: DELETED$1 }));
                 }
             });
             this.pushHist(newAnnos, undefined, 'deletedAllAnnos', this.state.showSingleAnno, this.state.imgLabelIds);
@@ -4603,8 +7737,8 @@ var Canvas = function (_Component) {
     }, {
         key: 'setCanvasState',
         value: function setCanvasState(annotations, imgLabelIds, selectedAnnoId, showSingleAnno) {
-            this.updateCanvasView(_extends$9({}, annotations));
-            this.setImageLabels([].concat(_toConsumableArray$4(imgLabelIds)));
+            this.updateCanvasView(_extends$b({}, annotations));
+            this.setImageLabels([].concat(_toConsumableArray$5(imgLabelIds)));
             this.selectAnnotation(selectedAnnoId);
             this.setState({ showSingleAnno: showSingleAnno });
         }
@@ -4650,10 +7784,10 @@ var Canvas = function (_Component) {
                     this.onAnnoLabelInputClose();
                 }
             }
-            if (this.props.onAnnoSelect) {
-                var _anno = this.findAnno(annoId);
-                this.props.onAnnoSelect(_anno);
-            }
+            // if(this.props.onAnnoSelect){
+            //     const anno = this.findAnno(annoId)
+            //     this.props.onAnnoSelect(anno)
+            // }
         }
 
         /**
@@ -4663,18 +7797,18 @@ var Canvas = function (_Component) {
     }, {
         key: 'traverseAnnos',
         value: function traverseAnnos() {
-            var _this2 = this;
+            var _this4 = this;
 
             if (this.state.annos.length > 0) {
                 var myAnnos = this.state.annos.filter(function (e) {
-                    return e.status !== DELETED$1 && !_this2.isLocked(e.id);
+                    return e.status !== DELETED$1 && !_this4.isLocked(e.id) && !(e.visible === false);
                 });
                 if (myAnnos.length > 0) {
                     if (!this.state.selectedAnnoId) {
                         this.selectAnnotation(myAnnos[0].id);
                     } else {
                         var currentIdx = myAnnos.findIndex(function (e) {
-                            return e.id === _this2.state.selectedAnnoId;
+                            return e.id === _this4.state.selectedAnnoId;
                         });
                         if (currentIdx + 1 < myAnnos.length) {
                             this.selectAnnotation(myAnnos[currentIdx + 1].id);
@@ -4695,12 +7829,12 @@ var Canvas = function (_Component) {
             // const backendFormat = this.getAnnoBackendFormat(removeFrontedIds, myAnnos)
             var backendFormat = canvasToBackendAnnos(myAnnos, this.state.svg, removeFrontedIds, this.state.imageOffset);
             var finalData = {
-                imgId: this.props.annos.image.id,
+                imgId: this.props.imageMeta.id,
                 imgLabelIds: this.state.imgLabelIds,
                 imgLabelChanged: this.state.imgLabelChanged,
                 annotations: backendFormat,
                 isJunk: this.state.isJunk,
-                annoTime: this.props.annos.image.annoTime + (performance.now() - this.state.imgLoadTimestamp) / 1000
+                annoTime: this.props.imageMeta.annoTime + (performance.now() - this.state.imgLoadTimestamp) / 1000
             };
             return finalData;
         }
@@ -4712,7 +7846,7 @@ var Canvas = function (_Component) {
     }, {
         key: 'resetZoom',
         value: function resetZoom() {
-            this.setState({ svg: _extends$9({}, this.state.svg, {
+            this.setState({ svg: _extends$b({}, this.state.svg, {
                     translateX: 0,
                     translateY: 0,
                     scale: 1.0
@@ -4739,7 +7873,7 @@ var Canvas = function (_Component) {
             } else if (vRight.vY <= yXMax) {
                 trans_y = this.state.svg.translateY + 5;
             }
-            this.setState({ svg: _extends$9({}, this.state.svg, {
+            this.setState({ svg: _extends$b({}, this.state.svg, {
                     translateX: trans_x,
                     translateY: trans_y
                 }) });
@@ -4814,7 +7948,7 @@ var Canvas = function (_Component) {
                 var mousePos = this.getMousePosition(e);
                 // const selAnno = this.findAnno(this.state.selectedAnnoId)
                 var newAnno = {
-                    id: _.uniqueId('new'),
+                    id: this.props.nextAnnoId ? this.props.nextAnnoId : _.uniqueId('new'),
                     type: this.props.selectedTool,
                     data: [{
                         x: mousePos.x,
@@ -4831,7 +7965,7 @@ var Canvas = function (_Component) {
                 };
                 newAnno = this.startAnnotimeMeasure(newAnno);
                 this.setState({
-                    annos: [].concat(_toConsumableArray$4(this.state.annos), [newAnno]),
+                    annos: [].concat(_toConsumableArray$5(this.state.annos), [newAnno]),
                     selectedAnnoId: newAnno.id,
                     showSingleAnno: newAnno.id,
                     annoToolBarVisible: false
@@ -4884,7 +8018,7 @@ var Canvas = function (_Component) {
 
             newAnno = this.startAnnotimeMeasure(newAnno);
             this.setState({
-                annos: [].concat(_toConsumableArray$4(this.state.annos), [newAnno]),
+                annos: [].concat(_toConsumableArray$5(this.state.annos), [newAnno]),
                 selectedAnnoId: newAnno.id,
                 showSingleAnno: newAnno.id,
                 annoToolBarVisible: false
@@ -4895,20 +8029,20 @@ var Canvas = function (_Component) {
     }, {
         key: 'putSelectedOnTop',
         value: function putSelectedOnTop(prevState) {
-            var _this3 = this;
+            var _this5 = this;
 
             // The selected annotation need to be rendered as last one in 
             // oder to be above all other annotations.
             if (this.state.selectedAnnoId) {
                 if (prevState.selectedAnnoId !== this.state.selectedAnnoId) {
                     var annos = this.state.annos.filter(function (el) {
-                        return el.id !== _this3.state.selectedAnnoId;
+                        return el.id !== _this5.state.selectedAnnoId;
                     });
                     var lastAnno = this.state.annos.find(function (el) {
-                        return el.id === _this3.state.selectedAnnoId;
+                        return el.id === _this5.state.selectedAnnoId;
                     });
                     annos.push(lastAnno);
-                    this.setState({ annos: [].concat(_toConsumableArray$4(annos)) });
+                    this.setState({ annos: [].concat(_toConsumableArray$5(annos)) });
                 }
             }
         }
@@ -4958,11 +8092,11 @@ var Canvas = function (_Component) {
                 selectedAnnoId: anno.id,
                 prevLabel: anno.labelIds
             });
-            if (this.props.onAnnoSelect) {
-                if (newAnno !== null) {
-                    this.props.onAnnoSelect(newAnno);
-                }
-            }
+            // if(this.props.onAnnoSelect){
+            //     if (newAnno !== null){
+            //         this.props.onAnnoSelect(newAnno)
+            //     }
+            // }
             return newAnnos;
         }
     }, {
@@ -4975,27 +8109,27 @@ var Canvas = function (_Component) {
             });
             var newAnno = void 0;
             if (mode) {
-                newAnno = _extends$9({}, anno, { mode: mode });
+                newAnno = _extends$b({}, anno, { mode: mode });
                 if (mode === DELETED) {
                     if (anno.status !== NEW) {
-                        newAnno = _extends$9({}, newAnno, {
+                        newAnno = _extends$b({}, newAnno, {
                             status: DELETED$1
                         });
                     } else {
                         newAnno = null;
                     }
                 } else {
-                    newAnno = _extends$9({}, newAnno, {
+                    newAnno = _extends$b({}, newAnno, {
                         status: anno.status !== NEW ? CHANGED : NEW
                     });
                 }
             } else {
-                newAnno = _extends$9({}, anno);
+                newAnno = _extends$b({}, anno);
             }
             if (newAnno !== null) {
                 filtered.push(newAnno);
             }
-            var newAnnos = [].concat(_toConsumableArray$4(filtered));
+            var newAnnos = [].concat(_toConsumableArray$5(filtered));
             return { newAnnos: newAnnos, newAnno: newAnno };
         }
     }, {
@@ -5022,11 +8156,12 @@ var Canvas = function (_Component) {
             var canvasLeft;
             var maxImgHeight;
             var maxImgWidth;
-            if (this.props.layoutOffset) {
-                canvasTop = container.top + this.props.layoutOffset.top;
-                canvasLeft = container.left + this.props.layoutOffset.left;
-                maxImgHeight = clientHeight - container.top - this.props.layoutOffset.bottom - this.props.layoutOffset.top;
-                maxImgWidth = container.right - canvasLeft - this.props.layoutOffset.right;
+            var layoutOffset = this.props.uiConfig.layoutOffset;
+            if (layoutOffset) {
+                canvasTop = container.top + layoutOffset.top;
+                canvasLeft = container.left + layoutOffset.left;
+                maxImgHeight = clientHeight - container.top - layoutOffset.bottom - layoutOffset.top;
+                maxImgWidth = container.right - canvasLeft - layoutOffset.right;
             } else {
                 canvasTop = container.top;
                 canvasLeft = container.left;
@@ -5046,15 +8181,15 @@ var Canvas = function (_Component) {
             }
             var svg;
             var imgOffset = { x: 0, y: 0 };
-            if (this.props.maxCanvas) {
+            if (this.props.uiConfig.maxCanvas) {
                 imgOffset.x = (maxImgWidth - imgWidth) / 2;
                 imgOffset.y = (maxImgHeight - imgHeight) / 2;
                 console.log('imgOffset: ', imgOffset);
-                svg = _extends$9({}, this.state.svg, { width: maxImgWidth, height: maxImgHeight,
+                svg = _extends$b({}, this.state.svg, { width: maxImgWidth, height: maxImgHeight,
                     left: canvasLeft, top: canvasTop
                 });
             } else {
-                if (this.props.centerCanvasInContainer) {
+                if (this.props.uiConfig.centerCanvasInContainer) {
                     var resSpaceX = maxImgWidth - imgWidth;
                     if (resSpaceX > 2) {
                         canvasLeft = canvasLeft + resSpaceX / 2;
@@ -5064,7 +8199,7 @@ var Canvas = function (_Component) {
                         canvasTop = canvasTop + resSpaceY / 2;
                     }
                 }
-                svg = _extends$9({}, this.state.svg, { width: imgWidth, height: imgHeight,
+                svg = _extends$b({}, this.state.svg, { width: imgWidth, height: imgHeight,
                     left: canvasLeft, top: canvasTop
                 });
             }
@@ -5082,9 +8217,10 @@ var Canvas = function (_Component) {
     }, {
         key: 'svgUpdate',
         value: function svgUpdate(svg) {
-            if (this.props.onSVGUpdate) {
-                this.props.onSVGUpdate(svg);
-            }
+            this.triggerCanvasEvent(CANVAS_SVG_UPDATE, svg);
+            // if(this.props.onSVGUpdate){
+            //     this.props.onSVGUpdate(svg)
+            // }
         }
     }, {
         key: 'setImageLabels',
@@ -5102,40 +8238,41 @@ var Canvas = function (_Component) {
             //for svg should be calculated
             if (annotations) {
                 var imgSize = this.updateImageSize();
-                this.setState({ annos: [].concat(_toConsumableArray$4(backendAnnosToCanvas(annotations, { width: imgSize.imgWidth, height: imgSize.imgHeight }, imgSize.imgOffset))) });
+                this.setState({ annos: [].concat(_toConsumableArray$5(backendAnnosToCanvas(annotations, { width: imgSize.imgWidth, height: imgSize.imgHeight }, imgSize.imgOffset))) });
             }
         }
     }, {
         key: 'renderAnnotations',
         value: function renderAnnotations() {
-            var _this4 = this;
+            var _this6 = this;
 
             // Do not render annotations while moving the camera!
             if (this.state.mode !== CAMERA_MOVE) {
                 this.annoRefs = [];
                 var annos = this.state.annos.map(function (el) {
-                    _this4.annoRefs.push(React.createRef());
+                    _this6.annoRefs.push(React.createRef());
                     return React.createElement(Annotation$1, { type: el.type,
-                        data: el, key: el.id, svg: _extends$9({}, _this4.state.svg),
-                        ref: _this4.annoRefs[_this4.annoRefs.length - 1],
+                        data: el, key: el.id, svg: _extends$b({}, _this6.state.svg),
+                        imageOffset: _this6.state.imageOffset,
+                        ref: _this6.annoRefs[_this6.annoRefs.length - 1],
                         onMouseDown: function onMouseDown(e) {
-                            return _this4.onAnnoMouseDown(e);
+                            return _this6.onAnnoMouseDown(e);
                         },
                         onAction: function onAction(anno, pAction) {
-                            return _this4.onAnnoPerformedAction(anno, pAction);
+                            return _this6.handleAnnoEvent(anno, pAction);
                         },
-                        selectedAnno: _this4.state.selectedAnnoId
+                        selectedAnno: _this6.state.selectedAnnoId
                         // onModeChange={(anno) => this.onAnnoModeChange(anno)}
-                        , showSingleAnno: _this4.state.showSingleAnno,
-                        uiConfig: _this4.props.uiConfig,
-                        allowedActions: _this4.props.canvasConfig.annos.actions,
-                        possibleLabels: _this4.state.possibleLabels,
-                        image: _this4.state.image,
-                        canvasConfig: _this4.props.canvasConfig,
+                        , showSingleAnno: _this6.state.showSingleAnno,
+                        uiConfig: _this6.props.uiConfig,
+                        allowedActions: _this6.props.canvasConfig.annos.actions,
+                        possibleLabels: _this6.state.possibleLabels,
+                        image: _this6.state.image,
+                        canvasConfig: _this6.props.canvasConfig,
                         onNotification: function onNotification(messageObj) {
-                            return _this4.handleNotification(messageObj);
+                            return _this6.handleNotification(messageObj);
                         },
-                        defaultLabel: _this4.props.defaultLabel
+                        defaultLabel: _this6.props.defaultLabel
                     });
                 });
                 return React.createElement(
@@ -5150,14 +8287,14 @@ var Canvas = function (_Component) {
     }, {
         key: 'renderImgLabelInput',
         value: function renderImgLabelInput() {
-            var _this5 = this;
+            var _this7 = this;
 
-            if (!this.props.annos.image) return null;
+            if (!this.props.imageMeta) return null;
             return React.createElement(Prompt, {
                 onClick: function onClick() {
-                    return _this5.handleImgLabelInputClose();
+                    return _this7.handleImgLabelInputClose();
                 },
-                active: this.props.imgLabelInputVisible,
+                active: this.props.uiConfig.imgLabelInputVisible,
                 header: React.createElement(
                     'div',
                     null,
@@ -5172,11 +8309,11 @@ var Canvas = function (_Component) {
                         // relatedId={this.props.annos.image.id}
                         , visible: true,
                         onLabelUpdate: function onLabelUpdate(label) {
-                            return _this5.handleImgLabelUpdate(label);
+                            return _this7.handleImgLabelUpdate(label);
                         },
                         possibleLabels: this.state.possibleLabels,
                         initLabelIds: this.state.imgLabelIds,
-                        relatedId: this.props.annos.image.id,
+                        relatedId: this.props.imageMeta.id,
                         defaultLabel: this.props.defaultLabel
                         // disabled={!this.props.allowedActions.label}
                         // renderPopup
@@ -5185,7 +8322,7 @@ var Canvas = function (_Component) {
                         Button,
                         { basic: true, color: 'green', inverted: true,
                             onClick: function onClick() {
-                                return _this5.handleImgLabelInputClose();
+                                return _this7.handleImgLabelInputClose();
                             }
                         },
                         React.createElement(Icon, { name: 'check' }),
@@ -5197,7 +8334,7 @@ var Canvas = function (_Component) {
     }, {
         key: 'renderAnnoToolBar',
         value: function renderAnnoToolBar(selectedAnno) {
-            var _this6 = this;
+            var _this8 = this;
 
             var visible = this.state.annoToolBarVisible;
             if (this.state.mode === CAMERA_MOVE) visible = false;
@@ -5205,7 +8342,7 @@ var Canvas = function (_Component) {
                 selectedAnno: selectedAnno,
                 svg: this.state.svg,
                 onClick: function onClick() {
-                    return _this6.editAnnoLabel();
+                    return _this8.editAnnoLabel();
                 },
                 color: this.getAnnoColor()
             });
@@ -5213,22 +8350,22 @@ var Canvas = function (_Component) {
     }, {
         key: 'renderAnnoLabelInpput',
         value: function renderAnnoLabelInpput(selectedAnno) {
-            var _this7 = this;
+            var _this9 = this;
 
             var visible = this.state.showLabelInput;
             if (this.state.mode === CAMERA_MOVE) visible = false;
             return React.createElement(AnnoLabelInput, { svg: this.state.svg
                 // svgRef={this.svg}
                 , onClose: function onClose() {
-                    return _this7.onAnnoLabelInputClose();
+                    return _this9.onAnnoLabelInputClose();
                 },
                 onDeleteClick: function onDeleteClick(annoId) {
-                    return _this7.onLabelInputDeleteClick(annoId);
+                    return _this9.onLabelInputDeleteClick(annoId);
                 },
                 selectedAnno: selectedAnno,
                 visible: visible,
                 onLabelUpdate: function onLabelUpdate(anno) {
-                    return _this7.onAnnoLabelInputUpdate(anno);
+                    return _this9.onAnnoLabelInputUpdate(anno);
                 },
                 possibleLabels: this.state.possibleLabels,
                 allowedActions: this.props.canvasConfig.annos.actions,
@@ -5238,10 +8375,19 @@ var Canvas = function (_Component) {
                 // multilabels={true}
             });
         }
+
+        // renderAnnoCommentInput(selectedAnno){
+        //     return <AnnoCommentInput 
+        //         triggerInput={this.state.annoCommentInputTrigger}
+        //         onClose={comment => this.handleAnnoCommentInputClose(comment)}
+        //         iniComment={selectedAnno ? selectedAnno.comment : ''}
+        //     />
+        // }
+
     }, {
         key: 'render',
         value: function render() {
-            var _this8 = this;
+            var _this10 = this;
 
             var selectedAnno = this.findAnno(this.state.selectedAnnoId);
             return React.createElement(
@@ -5258,8 +8404,9 @@ var Canvas = function (_Component) {
                         possibleLabels: this.state.possibleLabels,
                         annos: this.props.annos,
                         svg: this.state.svg,
+                        imageMeta: this.props.imageMeta,
                         onClose: function onClose() {
-                            return _this8.handleImgBarClose();
+                            return _this10.handleImgBarClose();
                         },
                         imgLabelIds: this.state.imgLabelIds
                         // onLabelUpdate={label => this.handleImgLabelUpdate(label)}
@@ -5267,7 +8414,7 @@ var Canvas = function (_Component) {
                         // multilabels={this.props.canvasConfig.img.multilabels}
                         // allowedActions={this.props.canvasConfig.img.actions}
                         , onMouseEnter: function onMouseEnter(e) {
-                            return _this8.handleImgBarMouseEnter(e);
+                            return _this10.handleImgBarMouseEnter(e);
                         }
                     }),
                     React.createElement(
@@ -5291,21 +8438,47 @@ var Canvas = function (_Component) {
                     ),
                     this.renderAnnoToolBar(selectedAnno),
                     this.renderAnnoLabelInpput(selectedAnno),
+                    React.createElement(InfoBoxes, { container: this.props.container,
+                        layoutUpdate: this.props.layoutUpdate,
+                        annos: this.state.annos,
+                        selectedAnno: selectedAnno,
+                        possibleLabels: this.state.possibleLabels,
+                        allowedToMarkExample: this.props.canvasConfig.allowedToMarkExample,
+                        uiConfig: this.props.uiConfig,
+                        imgLoadCount: this.state.imgLoadCount,
+                        onCommentUpdate: function onCommentUpdate(comment) {
+                            return _this10.updateAnnoComment(comment);
+                        },
+                        onUiConfigUpdate: function onUiConfigUpdate(e) {
+                            return _this10.triggerCanvasEvent(CANVAS_UI_CONFIG_UPDATE, e);
+                        },
+                        onHideLbl: function onHideLbl(lbl, hide) {
+                            return _this10.handleHideLbl(lbl, hide);
+                        },
+                        onMarkExample: function onMarkExample(anno) {
+                            return _this10.handleMarkExample(anno);
+                        },
+                        commentInputTrigger: this.state.annoCommentInputTrigger,
+                        onGetAnnoExample: function onGetAnnoExample(exampleArgs) {
+                            return _this10.props.onGetAnnoExample ? _this10.props.onGetAnnoExample(exampleArgs) : {};
+                        },
+                        exampleImg: this.props.exampleImg
+                    }),
                     React.createElement(
                         'svg',
                         { ref: this.svg, width: this.state.svg.width,
                             height: this.state.svg.height,
                             onKeyDown: function onKeyDown(e) {
-                                return _this8.onKeyDown(e);
+                                return _this10.onKeyDown(e);
                             },
                             onKeyUp: function onKeyUp(e) {
-                                return _this8.onKeyUp(e);
+                                return _this10.onKeyUp(e);
                             },
                             onClick: function onClick(e) {
-                                return _this8.handleCanvasClick(e);
+                                return _this10.handleCanvasClick(e);
                             },
                             onMouseMove: function onMouseMove(e) {
-                                return _this8.handleSvgMouseMove(e);
+                                return _this10.handleSvgMouseMove(e);
                             },
                             tabIndex: '0'
                         },
@@ -5314,26 +8487,27 @@ var Canvas = function (_Component) {
                             {
                                 transform: 'scale(' + this.state.svg.scale + ') translate(' + this.state.svg.translateX + ', ' + this.state.svg.translateY + ')',
                                 onMouseOver: function onMouseOver() {
-                                    _this8.onMouseOver();
-                                },
-                                onMouseUp: function onMouseUp(e) {
-                                    _this8.onMouseUp(e);
+                                    _this10.onMouseOver();
+                                }
+                                // onMouseEnter={() => this.svg.current.focus()}
+                                , onMouseUp: function onMouseUp(e) {
+                                    _this10.onMouseUp(e);
                                 },
                                 onWheel: function onWheel(e) {
-                                    return _this8.onWheel(e);
+                                    return _this10.onWheel(e);
                                 },
                                 onMouseMove: function onMouseMove(e) {
-                                    _this8.onMouseMove(e);
+                                    _this10.onMouseMove(e);
                                 }
                             },
                             React.createElement('image', {
                                 onContextMenu: function onContextMenu(e) {
-                                    return _this8.onRightClick(e);
+                                    return _this10.onRightClick(e);
                                 },
                                 onMouseDown: function onMouseDown(e) {
-                                    return _this8.onMouseDown(e);
+                                    return _this10.onMouseDown(e);
                                 },
-                                href: this.props.image.data,
+                                href: this.props.imageBlob,
                                 width: this.state.svg.width,
                                 height: this.state.svg.height
                             }),
@@ -5343,8 +8517,8 @@ var Canvas = function (_Component) {
                     React.createElement('img', {
                         alt: 'sia', style: { display: 'none' }, ref: this.img,
                         onLoad: function onLoad() {
-                            _this8.onImageLoad();
-                        }, src: this.state.imageData,
+                            _this10.onImageLoad();
+                        }, src: this.state.imageBlob,
                         width: '100%', height: '100%'
                     })
                 ),