lost-sia 1.0.0 → 1.1.0

package/dist/index.es.js

@@ -1,5 +1,5 @@
 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 { Dropdown, Ref, Popup, Header, Menu, Dimmer, Message, Divider, List, Button, TextArea, Form, Label, Icon, Card, Image, Loader, Checkbox } from 'semantic-ui-react';
 import _ from 'lodash';
 import reactDom from 'react-dom';
 
@@ -102,6 +102,18 @@ function toBackend(data, svg, type) {
     }
 }
 
+function getMinMaxPoints(data) {
+    var xList = data.map(function (e) {
+        return e.x;
+    });
+    var yList = data.map(function (e) {
+        return e.y;
+    });
+    var minPoint = { x: Math.min.apply(Math, _toConsumableArray(xList)), y: Math.min.apply(Math, _toConsumableArray(yList)) };
+    var maxPoint = { x: Math.max.apply(Math, _toConsumableArray(xList)), y: Math.max.apply(Math, _toConsumableArray(yList)) };
+    return [minPoint, maxPoint];
+}
+
 /**
  * Get area relative to the image 
  * 
@@ -146,6 +158,51 @@ function move(data, movementX, movementY) {
     });
 }
 
+function getBox(data, type) {
+
+    switch (type) {
+        case 'bBox':
+            return data;
+        case 'point':
+        case 'line':
+        case 'polygon':
+            var maxX = 0;
+            var maxY = 0;
+            var minX = Infinity;
+            var minY = Infinity;
+            data.forEach(function (el) {
+                if (el.x > maxX) maxX = el.x;
+                if (el.y > maxY) maxY = el.y;
+                if (el.x < minX) minX = el.x;
+                if (el.y < minY) minY = el.y;
+            });
+            return [{ x: minX, y: minY }, { x: maxX, y: minY }, { x: minX, y: maxY }, { x: maxX, y: maxY }];
+        default:
+            break;
+
+    }
+}
+
+function getCenter(data, type) {
+    var box = undefined;
+    switch (type) {
+        case 'point':
+            return data[0];
+        case 'line':
+        case 'polygon':
+        case 'bBox':
+            box = getBox(data, type);
+            var w = box[1].x - box[0].x;
+            var h = box[3].y - box[0].y;
+            return {
+                x: box[0].x + w / 2.0,
+                y: box[0].y + h / 2.0
+            };
+        default:
+
+    }
+}
+
 /**
  * Get point that is closest to the left browser side.
  * 
@@ -218,6 +275,55 @@ function correctAnnotation(data, image, imageOffset) {
     return corrected;
 }
 
+/**
+ * Rotate annotation around center.
+ * @param {*} data list of points {x:int,y:int} 
+ * @param {*} center Center to rotate point 
+ * @param {*} angle Rotation angle
+ */
+function rotateAnnotation(data, center, angle) {
+    angle = angle * (Math.PI / 180); // Convert to radians
+    var rotated = data.map(function (point) {
+        return {
+            x: Math.round(Math.cos(angle) * (point.x - center.x) - Math.sin(angle) * (point.y - center.y) + center.x),
+            y: Math.round(Math.sin(angle) * (point.x - center.x) + Math.cos(angle) * (point.y - center.y) + center.y)
+        };
+    });
+    return rotated;
+}
+
+/**
+ * Resize annotation data in canvas format to new image size
+ * @param {*} data Annotation data in canvas format [{x:int, y:int},...]
+ * @param {*} sizeOld Size of old image {width:int, height:int}
+ * @param {*} sizeNew Size of new image {width:int, height:int}
+ */
+function resizeAnnoData(data, sizeOld, sizeNew) {
+    var xRatio = sizeNew.width / sizeOld.width;
+    var yRatio = sizeNew.height / sizeOld.height;
+    return data.map(function (e) {
+        return {
+            x: parseInt(e.x * xRatio),
+            y: parseInt(e.y * yRatio)
+        };
+    });
+}
+
+var transform = /*#__PURE__*/Object.freeze({
+    toSia: toSia,
+    toBackend: toBackend,
+    getMinMaxPoints: getMinMaxPoints,
+    getArea: getArea,
+    move: move,
+    getBox: getBox,
+    getCenter: getCenter,
+    getMostLeftPoint: getMostLeftPoint,
+    getTopPoint: getTopPoint,
+    correctAnnotation: correctAnnotation,
+    rotateAnnotation: rotateAnnotation,
+    resizeAnnoData: resizeAnnoData
+});
+
 var VIEW = 'view';
 var EDIT = 'edit';
 var CREATE = 'create';
@@ -889,6 +995,31 @@ var CANVAS_IMGBAR_CLOSE = 'canvasImgbarClose';
 //Image actions
 var IMG_LABEL_UPDATE = 'imgLabelUpdate';
 
+var canvasActions = /*#__PURE__*/Object.freeze({
+    ANNO_DELETED: ANNO_DELETED,
+    ANNO_SELECTED: ANNO_SELECTED,
+    ANNO_CREATED: ANNO_CREATED,
+    ANNO_MOVED: ANNO_MOVED,
+    ANNO_ENTER_MOVE_MODE: ANNO_ENTER_MOVE_MODE,
+    ANNO_EDITED: ANNO_EDITED,
+    ANNO_ENTER_EDIT_MODE: ANNO_ENTER_EDIT_MODE,
+    ANNO_ADDED_NODE: ANNO_ADDED_NODE,
+    ANNO_REMOVED_NODE: ANNO_REMOVED_NODE,
+    ANNO_LABEL_UPDATE: ANNO_LABEL_UPDATE,
+    ANNO_CREATED_NODE: ANNO_CREATED_NODE,
+    ANNO_CREATED_FINAL_NODE: ANNO_CREATED_FINAL_NODE,
+    ANNO_START_CREATING: ANNO_START_CREATING,
+    ANNO_COMMENT_UPDATE: ANNO_COMMENT_UPDATE,
+    ANNO_MARK_EXAMPLE: ANNO_MARK_EXAMPLE,
+    CANVAS_SVG_UPDATE: CANVAS_SVG_UPDATE,
+    CANVAS_UI_CONFIG_UPDATE: CANVAS_UI_CONFIG_UPDATE,
+    CANVAS_AUTO_SAVE: CANVAS_AUTO_SAVE,
+    CANVAS_LABEL_INPUT_CLOSE: CANVAS_LABEL_INPUT_CLOSE,
+    CANVAS_IMG_LOADED: CANVAS_IMG_LOADED,
+    CANVAS_IMGBAR_CLOSE: CANVAS_IMGBAR_CLOSE,
+    IMG_LABEL_UPDATE: IMG_LABEL_UPDATE
+});
+
 var _extends$1 = 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$3 = 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; }; }();
@@ -3538,6 +3669,12 @@ function canvasToBackendAnnos(annos, imgSize) {
     return backendFormat;
 }
 
+var annoConversion = /*#__PURE__*/Object.freeze({
+    fixBackendAnnos: fixBackendAnnos,
+    backendAnnosToCanvas: backendAnnosToCanvas,
+    canvasToBackendAnnos: canvasToBackendAnnos
+});
+
 var _createClass$e = 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$e(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -3660,6 +3797,15 @@ var KeyMapper = function () {
 
 var POINT = 'point';
 var BBOX = 'bBox';
+var LINE = 'line';
+var POLYGON = 'polygon';
+
+var tools = /*#__PURE__*/Object.freeze({
+    POINT: POINT,
+    BBOX: BBOX,
+    LINE: LINE,
+    POLYGON: POLYGON
+});
 
 var _createClass$f = 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; }; }();
 
@@ -6854,6 +7000,11 @@ function _inherits$g(subClass, superClass) { if (typeof superClass !== "function
  *      action -> CANVAS_IMG_LOADED
  *      action -> CANVAS_IMGBAR_CLOSE
  * @event onImgBarClose - Fires when close button on ImgBar was hit.
+ * @event onGetFunction - Get special canvas functions for manipulation from outside canvas
+ *              deleteAllAnnos()
+ *              unloadImage()
+ *              resetZoom()
+ *              getAnnos(annos,removeFrontendIds)
  */
 
 var Canvas = function (_Component) {
@@ -8530,5 +8681,1497 @@ var Canvas = function (_Component) {
     return Canvas;
 }(Component);
 
-export default Canvas;
+var TOOL_SELECTED = 'toolSelected';
+var GET_NEXT_IMAGE = 'getNextImage';
+var GET_PREV_IMAGE = 'getPrevImage';
+var TASK_FINISHED = 'taskFinished';
+var SHOW_IMAGE_LABEL_INPUT = 'showImageLabelInput';
+var IMG_IS_JUNK = 'imageIsJunk';
+var DELETE_ALL_ANNOS = 'deleteAllAnnos';
+var SET_FULLSCREEN = 'setFullscreen';
+var SHOW_ANNO_DETAILS = 'showAnnoDetails';
+var SHOW_LABEL_INFO = 'showLabelInfo';
+var SHOW_ANNO_STATS = 'showAnnoStats';
+var EDIT_STROKE_WIDTH = 'editStrokeWidth';
+var EDIT_NODE_RADIUS = 'editNodeRadius';
+var APPLY_FILTER = 'applyFilter';
+var SAVE = 'save';
+
+var toolbarEvents = /*#__PURE__*/Object.freeze({
+    TOOL_SELECTED: TOOL_SELECTED,
+    GET_NEXT_IMAGE: GET_NEXT_IMAGE,
+    GET_PREV_IMAGE: GET_PREV_IMAGE,
+    TASK_FINISHED: TASK_FINISHED,
+    SHOW_IMAGE_LABEL_INPUT: SHOW_IMAGE_LABEL_INPUT,
+    IMG_IS_JUNK: IMG_IS_JUNK,
+    DELETE_ALL_ANNOS: DELETE_ALL_ANNOS,
+    SET_FULLSCREEN: SET_FULLSCREEN,
+    SHOW_ANNO_DETAILS: SHOW_ANNO_DETAILS,
+    SHOW_LABEL_INFO: SHOW_LABEL_INFO,
+    SHOW_ANNO_STATS: SHOW_ANNO_STATS,
+    EDIT_STROKE_WIDTH: EDIT_STROKE_WIDTH,
+    EDIT_NODE_RADIUS: EDIT_NODE_RADIUS,
+    APPLY_FILTER: APPLY_FILTER,
+    SAVE: SAVE
+});
+
+var _createClass$j = 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$j(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn$h(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$h(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 SIASettingButton = function (_Component) {
+    _inherits$h(SIASettingButton, _Component);
+
+    function SIASettingButton(props) {
+        _classCallCheck$j(this, SIASettingButton);
+
+        var _this = _possibleConstructorReturn$h(this, (SIASettingButton.__proto__ || Object.getPrototypeOf(SIASettingButton)).call(this, props));
+
+        _this.state = {};
+        return _this;
+    }
+
+    _createClass$j(SIASettingButton, [{
+        key: 'triggerEvent',
+        value: function triggerEvent(e, data) {
+            if (this.props.onSettingEvent) {
+                this.props.onSettingEvent(e, data);
+            }
+        }
+    }, {
+        key: 'toggleAnnoDetails',
+        value: function toggleAnnoDetails() {
+            this.triggerEvent(SHOW_ANNO_DETAILS);
+        }
+    }, {
+        key: 'toggleLabelInfo',
+        value: function toggleLabelInfo() {
+            this.triggerEvent(SHOW_LABEL_INFO);
+        }
+    }, {
+        key: 'toggleAnnoStats',
+        value: function toggleAnnoStats() {
+            this.triggerEvent(SHOW_ANNO_STATS);
+        }
+    }, {
+        key: 'handleStrokeWidthChange',
+        value: function handleStrokeWidthChange(e) {
+            this.triggerEvent(EDIT_STROKE_WIDTH, parseInt(e.target.value));
+        }
+    }, {
+        key: 'handleNodeRadiusChange',
+        value: function handleNodeRadiusChange(e) {
+            this.triggerEvent(EDIT_NODE_RADIUS, parseInt(e.target.value));
+        }
+    }, {
+        key: 'renderInfoBoxContent',
+        value: function renderInfoBoxContent() {
+            var _this2 = this;
+
+            return React.createElement(
+                'div',
+                null,
+                React.createElement(
+                    Divider,
+                    { horizontal: true },
+                    'Info Boxes'
+                ),
+                React.createElement(Checkbox, {
+                    checked: this.props.uiConfig.annoDetails.visible,
+                    label: 'Annotation Details', toggle: true,
+                    onClick: function onClick() {
+                        return _this2.toggleAnnoDetails();
+                    }
+                }),
+                React.createElement(Checkbox, {
+                    checked: this.props.uiConfig.labelInfo.visible,
+                    label: 'Label Info', toggle: true,
+                    onClick: function onClick() {
+                        return _this2.toggleLabelInfo();
+                    }
+                }),
+                React.createElement(Checkbox, {
+                    checked: this.props.uiConfig.annoStats.visible,
+                    label: 'Anno Stats', toggle: true,
+                    onClick: function onClick() {
+                        return _this2.toggleAnnoStats();
+                    }
+                })
+            );
+        }
+    }, {
+        key: 'renderInfoBoxes',
+        value: function renderInfoBoxes() {
+            if (!this.props.enabled) return null;
+            if (this.props.enabled == true) {
+                return this.renderInfoBoxContent();
+            } else {
+                if (this.props.enabled.infoBoxes) {
+                    return this.renderInfoBoxContent();
+                }
+            }
+        }
+    }, {
+        key: 'renderAnnoStyle',
+        value: function renderAnnoStyle() {
+            if (!this.props.enabled) return null;
+            if (this.props.enabled == true) {
+                return this.renderAnnoStyleContent();
+            } else {
+                if (this.props.enabled.annoStyle) {
+                    return this.renderAnnoStyleContent();
+                }
+            }
+        }
+    }, {
+        key: 'renderAnnoStyleContent',
+        value: function renderAnnoStyleContent() {
+            var _this3 = this;
+
+            return React.createElement(
+                'div',
+                null,
+                React.createElement(
+                    Divider,
+                    { horizontal: true },
+                    'Anno Appearance'
+                ),
+                React.createElement(
+                    'div',
+                    null,
+                    'Stroke width: ',
+                    this.props.uiConfig.strokeWidth
+                ),
+                React.createElement('input', {
+                    type: 'range',
+                    min: 1,
+                    max: 10,
+                    value: this.props.uiConfig.strokeWidth,
+                    onChange: function onChange(e) {
+                        return _this3.handleStrokeWidthChange(e);
+                    }
+                }),
+                React.createElement(
+                    'div',
+                    null,
+                    'Node radius: ',
+                    this.props.uiConfig.nodeRadius
+                ),
+                React.createElement('input', {
+                    type: 'range',
+                    min: 1,
+                    max: 10,
+                    value: this.props.uiConfig.nodeRadius,
+                    onChange: function onChange(e) {
+                        return _this3.handleNodeRadiusChange(e);
+                    }
+                })
+            );
+        }
+    }, {
+        key: 'render',
+        value: function render() {
+
+            if (!this.props.uiConfig) return null;
+            var popupContent = React.createElement(
+                'div',
+                null,
+                this.renderInfoBoxes(),
+                this.renderAnnoStyle()
+            );
+            return React.createElement(Popup, { trigger: React.createElement(
+                    Menu.Item,
+                    { name: 'setting' },
+                    React.createElement(Icon, { name: 'setting' })
+                ),
+                content: popupContent,
+                position: "right center",
+                pinned: true,
+                on: 'click',
+                style: { zIndex: 7000 }
+            });
+        }
+    }]);
+
+    return SIASettingButton;
+}(Component);
+
+function active(filter) {
+    return filter.clahe.active || filter.rotate.active;
+}
+
+var _extends$c = 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$k = 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$k(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn$i(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$i(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 SIAFilterButton = function (_Component) {
+    _inherits$i(SIAFilterButton, _Component);
+
+    function SIAFilterButton(props) {
+        _classCallCheck$k(this, SIAFilterButton);
+
+        var _this = _possibleConstructorReturn$i(this, (SIAFilterButton.__proto__ || Object.getPrototypeOf(SIAFilterButton)).call(this, props));
+
+        _this.state = {
+            clipLimit: 3,
+            active: false,
+            color: undefined
+        };
+        return _this;
+    }
+
+    _createClass$k(SIAFilterButton, [{
+        key: 'componentDidUpdate',
+        value: function componentDidUpdate(prevProps) {
+            if (prevProps.filter.clahe.clipLimit !== this.props.filter.clahe.clipLimit) {
+                this.setState({ clipLimit: this.props.filter.clahe.clipLimit });
+            }
+            if (this.props.filter !== prevProps.filter) {
+                if (active(this.props.filter)) {
+                    this.setState({ color: 'red', active: true });
+                } else {
+                    this.setState({ color: 'white', active: false });
+                }
+            }
+        }
+    }, {
+        key: 'triggerEvent',
+        value: function triggerEvent(e, data) {
+            if (this.props.onFilterEvent) {
+                this.props.onFilterEvent(e, data);
+            }
+        }
+    }, {
+        key: 'handleClipLimitChange',
+        value: function handleClipLimitChange(e) {
+            var cl = parseInt(e.target.value);
+            this.setState({ clipLimit: cl });
+            // this.claheFilter(cl)
+        }
+    }, {
+        key: 'rotateImg',
+        value: function rotateImg(angle) {
+            var active$$1 = !(this.props.filter.rotate.active && this.props.filter.rotate.angle === angle);
+            var myAngle = active$$1 ? angle : 0;
+            this.triggerEvent(APPLY_FILTER, _extends$c({}, this.props.filter, {
+                rotate: { angle: myAngle, active: active$$1 }
+            }));
+
+            // this.props.siaApplyFilter({
+            //     ...this.props.filter,
+            //     rotate: {angle:myAngle, active:active}
+            // })
+        }
+    }, {
+        key: 'claheFilter',
+        value: function claheFilter(clipLimit) {
+            var filter = {
+                'clahe': {
+                    'clipLimit': clipLimit,
+                    active: !this.props.filter.clahe.active
+                }
+            };
+            this.triggerEvent(APPLY_FILTER, _extends$c({}, this.props.filter, {
+                clahe: filter.clahe
+            }));
+            // this.props.siaApplyFilter({
+            //     ...this.props.filter,
+            //     clahe: filter.clahe
+            // })
+        }
+    }, {
+        key: 'releaseCLAHESlider',
+        value: function releaseCLAHESlider(e) {
+            var filter = {
+                'clahe': {
+                    'clipLimit': parseInt(e.target.value),
+                    active: true
+                }
+            };
+            this.triggerEvent(APPLY_FILTER, _extends$c({}, this.props.filter, {
+                clahe: filter.clahe
+            }));
+            // this.props.siaApplyFilter({
+            //     ...this.props.filter,
+            //     clahe: filter.clahe
+            // })
+        }
+    }, {
+        key: 'renderRotateContent',
+        value: function renderRotateContent() {
+            var _this2 = this;
+
+            var filter = this.props.filter;
+            return React.createElement(
+                'div',
+                null,
+                React.createElement(
+                    Divider,
+                    { horizontal: true },
+                    'Rotate'
+                ),
+                React.createElement(Checkbox, {
+                    checked: filter.rotate.active && filter.rotate.angle === 90,
+                    label: 'Rotate 90', toggle: true,
+                    onClick: function onClick() {
+                        return _this2.rotateImg(90);
+                    }
+                }),
+                React.createElement(Checkbox, {
+                    checked: filter.rotate.active && filter.rotate.angle === -90,
+                    label: 'Rotate -90', toggle: true,
+                    onClick: function onClick() {
+                        return _this2.rotateImg(-90);
+                    }
+                }),
+                React.createElement(Checkbox, {
+                    checked: filter.rotate.active && filter.rotate.angle === 180,
+                    label: 'Rotate 180', toggle: true,
+                    onClick: function onClick() {
+                        return _this2.rotateImg(180);
+                    }
+                })
+            );
+        }
+    }, {
+        key: 'renderRotate',
+        value: function renderRotate() {
+            if (!this.props.enabled) return null;
+            if (this.props.enabled === true) {
+                return this.renderRotateContent();
+            } else {
+                if (this.props.enabled.rotate) {
+                    return this.renderRotateContent();
+                }
+            }
+        }
+    }, {
+        key: 'renderClaheContent',
+        value: function renderClaheContent() {
+            var _this3 = this;
+
+            var filter = this.props.filter;
+            return React.createElement(
+                'div',
+                null,
+                React.createElement(
+                    Divider,
+                    { horizontal: true },
+                    'Histogram equalization'
+                ),
+                React.createElement(Checkbox, {
+                    checked: filter.clahe.active,
+                    label: 'Histogram equalization', toggle: true,
+                    onClick: function onClick() {
+                        return _this3.claheFilter(_this3.state.clipLimit);
+                    }
+                }),
+                React.createElement(
+                    'div',
+                    null,
+                    'Cliplimit: ',
+                    this.state.clipLimit
+                ),
+                React.createElement('input', {
+                    type: 'range',
+                    min: 0,
+                    max: 40,
+                    value: this.state.clipLimit,
+                    onChange: function onChange(e) {
+                        return _this3.handleClipLimitChange(e);
+                    },
+                    onMouseUp: function onMouseUp(e) {
+                        return _this3.releaseCLAHESlider(e);
+                    }
+                })
+            );
+        }
+    }, {
+        key: 'renderClahe',
+        value: function renderClahe() {
+            if (!this.props.enabled) return null;
+            if (this.props.enabled === true) {
+                return this.renderClaheContent();
+            } else {
+                if (this.props.enabled.clahe) {
+                    return this.renderClaheContent();
+                }
+            }
+        }
+    }, {
+        key: 'render',
+        value: function render() {
+            if (!this.props.imageMeta) return null;
+            var popupContent = React.createElement(
+                'div',
+                null,
+                this.renderRotate(),
+                this.renderClahe()
+            );
+            return React.createElement(Popup, { trigger: React.createElement(
+                    Menu.Item,
+                    { name: 'filter', active: this.state.active },
+                    React.createElement(Icon, { name: 'filter', color: this.state.color })
+                ),
+                content: popupContent,
+                position: "right center",
+                pinned: true,
+                on: 'click',
+                style: { zIndex: 7000 }
+            });
+        }
+    }]);
+
+    return SIAFilterButton;
+}(Component);
+
+function textIcon() {
+    return React.createElement(
+        "svg",
+        { version: "1.1", xmlns: "http://www.w3.org/2000/svg"
+            // x="0px" y="0px"
+            // width="1190.549px" height="841.891px" 
+            , viewBox: "0 0 1190.549 841.891",
+            width: "17px"
+            // onClick={e => this.handleClick(e)}
+        },
+        React.createElement("path", { id: "T", fillRule: "evenodd", clipRule: "evenodd", fill: "currentColor", d: "M925.876,172.939c-0.172-13.004,0.161-26.013,0.116-39.019 c-0.021-4.017-5.046-9.053-9.037-9.087c-7.948-0.068-15.897-0.051-23.848-0.051c-73.526,0.006-147.051,0.02-220.578,0.032 c-8.095,0.001-11.969,3.776-11.969,11.742c-0.009,154.998-0.009,309.997-0.009,464.998c0,44.257-0.002,88.519,0.009,132.778 c0,7.553,4.173,11.736,11.651,11.747c21.677,0.018,30.288-0.227,65.032,0.018c34.743,0.239,46.295,27.955,46.295,46.43 c-0.005,18.477-13.856,42.722-46.792,43.747c-42.993,0.197-85.989-0.057-128.979-0.05c-47.697,0.014-95.387,0.009-143.078,0.074 c-13.712-0.278-44.888-9.133-44.888-44.159c0-35.025,20.399-44.646,42.975-46.192c16.293,0.115,45.164,0.179,67.743,0.16 c5.553-0.006,10.175-5.03,10.178-11.005c0.008-45.524-0.016-91.049-0.018-136.569c0-99.001,0-197.997,0.008-296.994 c0.001-55.278,0.018-110.559,0.007-165.837c0-6.513-4.521-10.917-11.118-10.917c-81.116-0.005-162.229-0.005-243.34-0.001 c-6.977,0-11.061,3.995-11.069,10.825c-0.016,12.286-0.033,24.569,0.019,36.855c-0.076,20.742-10.042,43.007-40.763,43.007 c-30.724,0-46.917-15.208-48.805-43.296c-0.419-14.084,0.01-28.181,0.01-42.272c0-27.46,0-54.917,0-82.379 c0-1.048,0.747-16.871,13.391-30.357c12.642-13.485,26.225-12.505,27.633-12.505c84.544,0.015,169.091,0.009,253.635,0.009 c153.191,0.001,459.578,0.004,459.578,0.004s20.149-0.287,35.766-0.17c0.983-0.023,18.696,1.188,30.027,13.07 c11.333,11.885,9.972,27.513,9.972,28.256c-0.024,42.091,0.255,84.183-0.007,126.274c-0.247,26.341-22.705,41.944-44.85,42.037 C948.049,214.236,926.687,199.643,925.876,172.939z" })
+    );
+}
+
+function lineIcon() {
+    return React.createElement(
+        "svg",
+        { version: "1.1", id: "Linie", xmlns: "http://www.w3.org/2000/svg"
+            // xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+            // width="1190.549px" height="841.891px" 
+            , viewBox: "0 0 1190.549 841.891",
+            width: "17px"
+            // enable-background="new 0 0 1190.549 841.891"
+            // xml:space="preserve"
+        },
+        React.createElement("path", { fill: "currentColor", d: "M986.331,109.582c7.141-10.669,28.926-51.179-2.968-85.299S891.011,8.972,891.011,8.972L539.125,133.474 L63.239,302.022c-21.503,7.998-53.586,30.072-60.956,61.716s-2.116,58.538,22.414,96.79S211.33,752.213,228.564,777.28 c26.453,36.868,62.16,58.042,105.507,57.154s365.665-7.485,365.665-7.485l331.7-8.325l89.453-2.293c0,0,70.998-7.179,69.861-60.287 c-1.135-53.108-74.618-62.721-74.618-62.721s-733.215,15.553-749.148,15.576c-22.688,0.201-45.355-15.278-54.146-28.928 s-175.79-272.956-175.79-272.956l600.587-212.338c0,0-73.179,67.087-99.315,100.041s-30.56,74.565-5.053,95.237 c31.188,24.081,91.974-3.708,123.127-39.312C782.35,323.912,979.191,120.251,986.331,109.582z" })
+    );
+}
+
+function bBoxIcon() {
+    return React.createElement(
+        "svg",
+        { version: "1.1", id: "Linie", xmlns: "http://www.w3.org/2000/svg"
+            // xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+            // width="1190.549px" height="841.891px" 
+            , viewBox: "0 0 1190.549 841.891",
+            width: "17px"
+            // enable-background="new 0 0 1190.549 841.891"
+            // xml:space="preserve"
+        },
+        React.createElement("path", { fill: "none", stroke: "currentColor", strokeWidth: "120", strokeMiterlimit: "10", d: "M929.775,710.655 c0,23.386-19.134,42.52-42.52,42.52H278.991c-23.386,0-42.52-19.134-42.52-42.52V102.392c0-23.386,19.134-42.52,42.52-42.52 h608.264c23.386,0,42.52,19.134,42.52,42.52V710.655z" })
+    );
+}
+
+function polygonIcon() {
+    return React.createElement(
+        "svg",
+        { version: "1.1", id: "Linie", xmlns: "http://www.w3.org/2000/svg"
+            // xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+            // width="1190.549px" height="841.891px" 
+            , viewBox: "0 0 1190.549 841.891",
+            width: "17px"
+            // enable-background="new 0 0 1190.549 841.891"
+            // xml:space="preserve"
+        },
+        React.createElement("path", { fill: "none", stroke: "currentColor", strokeWidth: "120", strokeMiterlimit: "10", d: "M342.327,769.938 c-23.379,0.548-52.922-15.056-65.65-34.674L65.479,409.738c-12.729-19.619-5.085-41.998,16.984-49.732L917.331,67.421 c22.07-7.734,26.86-0.275,10.645,16.576L691.761,329.475c-16.216,16.852-14.503,42.542,3.807,57.092l425.212,337.901 c18.31,14.549,14.16,26.901-9.219,27.449L342.327,769.938z" })
+    );
+}
+
+function pointIcon() {
+    return React.createElement(
+        "svg",
+        { version: "1.1", xmlns: "http://www.w3.org/2000/svg"
+            // x="0px" y="0px"
+            // width="1190.549px" height="841.891px" 
+            , viewBox: "0 0 1190.549 841.891",
+            width: "17px"
+        },
+        React.createElement("path", { fill: "currentColor", d: "M748.197,408.286c0,151.355-122.699,274.058-274.059,274.058c-151.357,0-274.057-122.703-274.057-274.058 c0-151.356,122.7-274.057,274.057-274.057C625.497,134.229,748.197,256.929,748.197,408.286z" })
+    );
+}
+
+var _extends$d = 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$l = 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$l(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn$j(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$j(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 ToolBar = function (_Component) {
+    _inherits$j(ToolBar, _Component);
+
+    function ToolBar(props) {
+        _classCallCheck$l(this, ToolBar);
+
+        var _this = _possibleConstructorReturn$j(this, (ToolBar.__proto__ || Object.getPrototypeOf(ToolBar)).call(this, props));
+
+        _this.state = {
+            // fullscreenMode: false,
+            position: {
+                left: 0,
+                top: 5,
+                width: 40
+            },
+            showFinishPrompt: false,
+            showHelp: false
+        };
+        _this.toolBarGroup = React.createRef();
+        return _this;
+    }
+
+    _createClass$l(ToolBar, [{
+        key: 'componentDidMount',
+        value: function componentDidMount() {}
+    }, {
+        key: 'componentDidUpdate',
+        value: function componentDidUpdate(prevProps, prevState) {
+            // if (prevState.fullscreenMode !== this.state.fullscreenMode){
+            //     this.props.siaSetFullscreen(this.state.fullscreenMode)
+            // }
+
+            if (this.props.layoutUpdate !== prevProps.layoutUpdate) {
+                this.calcPosition();
+            }
+            if (this.props.svg !== prevProps.svg) {
+                this.calcPosition();
+            }
+        }
+    }, {
+        key: 'onClick',
+        value: function onClick(e, tool) {
+            this.triggerToolBarEvent(TOOL_SELECTED, tool);
+        }
+    }, {
+        key: 'calcPosition',
+        value: function calcPosition() {
+            if (!this.props.enabled) return;
+            var tb = this.toolBarGroup.current.getBoundingClientRect();
+            if (tb) {
+                if (this.props.svg) {
+                    var toolBarTop = undefined;
+                    toolBarTop = this.props.svg.top + this.props.svg.height / 6;
+                    this.setState({
+                        position: _extends$d({}, this.state.position, {
+                            left: this.props.svg.left - 55,
+                            top: toolBarTop
+                        })
+                    });
+                }
+            }
+        }
+    }, {
+        key: 'getNextImg',
+        value: function getNextImg() {
+            // this.props.siaGetNextImage(this.props.imageMeta.id)
+            this.triggerToolBarEvent(GET_NEXT_IMAGE);
+        }
+    }, {
+        key: 'getPrevImg',
+        value: function getPrevImg() {
+            // this.props.siaGetPrevImage(this.props.imageMeta.id)
+            this.triggerToolBarEvent(GET_PREV_IMAGE);
+        }
+    }, {
+        key: 'setFinished',
+        value: function setFinished() {
+            // this.props.siaSetTaskFinished()
+            this.triggerToolBarEvent(TASK_FINISHED);
+        }
+    }, {
+        key: 'toggleFinishPrompt',
+        value: function toggleFinishPrompt() {
+            this.setState({
+                showFinishPrompt: !this.state.showFinishPrompt
+            });
+        }
+    }, {
+        key: 'toggleFullscreen',
+        value: function toggleFullscreen() {
+            // this.setState({
+            //     fullscreenMode: !this.state.fullscreenMode
+            // })
+            this.triggerToolBarEvent(SET_FULLSCREEN);
+        }
+    }, {
+        key: 'toggleImgLabelInput',
+        value: function toggleImgLabelInput() {
+            // this.props.siaShowImgLabelInput(!this.props.imgLabelInput.show)
+            this.triggerToolBarEvent(SHOW_IMAGE_LABEL_INPUT);
+        }
+    }, {
+        key: 'toggleJunk',
+        value: function toggleJunk() {
+            // this.props.siaImgIsJunk(!this.props.isJunk)
+            this.triggerToolBarEvent(IMG_IS_JUNK);
+        }
+    }, {
+        key: 'toggleHelp',
+        value: function toggleHelp() {
+            this.setState({ showHelp: !this.state.showHelp });
+        }
+    }, {
+        key: 'handleOnDeleteAllAnnos',
+        value: function handleOnDeleteAllAnnos() {
+            this.triggerToolBarEvent(DELETE_ALL_ANNOS);
+        }
+    }, {
+        key: 'handleSave',
+        value: function handleSave() {
+            this.triggerToolBarEvent(SAVE);
+        }
+    }, {
+        key: 'triggerToolBarEvent',
+        value: function triggerToolBarEvent(event, data) {
+            if (this.props.onToolBarEvent) {
+                this.props.onToolBarEvent(event, data);
+            }
+        }
+    }, {
+        key: 'renderToolButtons',
+        value: function renderToolButtons() {
+            var _this2 = this;
+
+            if (!this.props.canvasConfig) return null;
+            if (!this.props.enabled.toolSelection) return null;
+            if (!this.props.canvasConfig.annos.actions.draw) return null;
+            var btns = [];
+            if (this.props.canvasConfig.tools.point) {
+                btns.push(React.createElement(
+                    Menu.Item,
+                    { name: 'dot circle', key: POINT,
+                        active: this.props.active.selectedTool === POINT,
+                        onClick: function onClick(e) {
+                            return _this2.onClick(e, POINT);
+                        }
+                    },
+                    pointIcon()
+                ));
+            }
+            if (this.props.canvasConfig.tools.line) {
+                btns.push(React.createElement(
+                    Menu.Item,
+                    { name: 'paint brush', key: LINE,
+                        active: this.props.active.selectedTool === LINE,
+                        onClick: function onClick(e) {
+                            return _this2.onClick(e, LINE);
+                        }
+                    },
+                    lineIcon()
+                ));
+            }
+            if (this.props.canvasConfig.tools.bbox) {
+                btns.push(React.createElement(
+                    Menu.Item,
+                    { name: 'square outline', key: BBOX,
+                        active: this.props.active.selectedTool === BBOX,
+                        onClick: function onClick(e) {
+                            return _this2.onClick(e, BBOX);
+                        }
+                    },
+                    bBoxIcon()
+                ));
+            }
+            if (this.props.canvasConfig.tools.polygon) {
+                btns.push(React.createElement(
+                    Menu.Item,
+                    { name: 'pencil alternate', key: POLYGON,
+                        active: this.props.active.selectedTool === POLYGON,
+                        onClick: function onClick(e) {
+                            return _this2.onClick(e, POLYGON);
+                        }
+                    },
+                    polygonIcon()
+                ));
+            }
+            return btns;
+        }
+    }, {
+        key: 'renderFinishPrompt',
+        value: function renderFinishPrompt() {
+            var _this3 = this;
+
+            return React.createElement(Prompt, { active: this.state.showFinishPrompt,
+                header: React.createElement(
+                    'div',
+                    null,
+                    React.createElement(Icon, { name: 'paper plane outline' }),
+                    'Do you wish to FINISH this SIA Task?'
+                ),
+                content: React.createElement(
+                    'div',
+                    null,
+                    React.createElement(
+                        Button,
+                        { basic: true, color: 'green', inverted: true,
+                            onClick: function onClick() {
+                                return _this3.setFinished();
+                            }
+                        },
+                        React.createElement(Icon, { name: 'check' }),
+                        'Yes'
+                    ),
+                    React.createElement(
+                        Button,
+                        { basic: true, color: 'red', inverted: true,
+                            onClick: function onClick() {
+                                return _this3.toggleFinishPrompt();
+                            }
+                        },
+                        React.createElement(Icon, { name: 'ban' }),
+                        ' No'
+                    )
+                )
+            });
+        }
+        /**
+         * Render next and prev image buttons 
+         *
+         */
+
+    }, {
+        key: 'renderNavigation',
+        value: function renderNavigation() {
+            var _this4 = this;
+
+            var btns = [];
+            if (!this.props.enabled.nextPrev) return null;
+            if (this.props.imageMeta) {
+                if (this.props.imageMeta.isLast) {
+                    btns.push(React.createElement(
+                        Menu.Item,
+                        { name: 'paper plane outline', key: 'finish',
+                            active: false,
+                            onClick: function onClick() {
+                                return _this4.toggleFinishPrompt();
+                            }
+                        },
+                        React.createElement(Icon, { name: 'paper plane outline' }),
+                        this.renderFinishPrompt()
+                    ));
+                } else {
+                    btns.push(React.createElement(
+                        Menu.Item,
+                        { name: 'arrow right', key: 'next',
+                            active: false,
+                            onClick: function onClick() {
+                                return _this4.getNextImg();
+                            }
+                        },
+                        React.createElement(Icon, { name: 'arrow right' })
+                    ));
+                }
+                btns.push(React.createElement(
+                    Menu.Item,
+                    { name: 'arrow left', key: 'prev',
+                        active: false,
+                        onClick: function onClick() {
+                            return _this4.getPrevImg();
+                        },
+                        disabled: this.props.imageMeta.isFirst
+                    },
+                    React.createElement(Icon, { name: 'arrow left' })
+                ));
+            }
+            return btns;
+        }
+    }, {
+        key: 'renderJunkButton',
+        value: function renderJunkButton() {
+            var _this5 = this;
+
+            if (!this.props.enabled.junk) return null;
+            return React.createElement(
+                Menu.Item,
+                { name: 'ban', key: 'junk',
+                    active: this.props.active.isJunk,
+                    onClick: function onClick() {
+                        return _this5.toggleJunk();
+                    }
+                },
+                React.createElement(Icon, { name: 'ban' })
+            );
+        }
+    }, {
+        key: 'renderDeleteAllAnnosButton',
+        value: function renderDeleteAllAnnosButton() {
+            var _this6 = this;
+
+            if (!this.props.enabled.deleteAll) return null;
+            return React.createElement(
+                Menu.Item,
+                { name: 'trash alternate outline', key: 'deleteAllAnnos',
+                    onClick: function onClick() {
+                        return _this6.handleOnDeleteAllAnnos();
+                    }
+                },
+                React.createElement(Icon, { name: 'trash alternate outline' })
+            );
+        }
+    }, {
+        key: 'renderSaveButton',
+        value: function renderSaveButton() {
+            var _this7 = this;
+
+            if (!this.props.enabled.save) return null;
+            return React.createElement(
+                Menu.Item,
+                { name: 'save', key: 'save',
+                    onClick: function onClick() {
+                        return _this7.handleSave();
+                    }
+                },
+                React.createElement(Icon, { name: 'save' })
+            );
+        }
+    }, {
+        key: 'renderHelpButton',
+        value: function renderHelpButton() {
+            var _this8 = this;
+
+            if (!this.props.enabled.help) return null;
+            return React.createElement(
+                Menu.Item,
+                { name: 'help', key: 'help',
+                    active: false,
+                    onClick: function onClick() {
+                        return _this8.toggleHelp();
+                    }
+                },
+                React.createElement(Icon, { name: 'help' }),
+                React.createElement(Prompt, { active: this.state.showHelp,
+                    content: React.createElement(
+                        'div',
+                        null,
+                        React.createElement(
+                            Card.Group,
+                            null,
+                            React.createElement(
+                                Card,
+                                null,
+                                React.createElement(Card.Content, { header: 'How to draw?' }),
+                                React.createElement(Card.Content, { description: '1.) Select a Tool in the toolbar 2.) Draw with RIGHT CLICK on Canvas' })
+                            ),
+                            React.createElement(
+                                Card,
+                                null,
+                                React.createElement(Card.Content, { header: 'How to delete an annotation?' }),
+                                React.createElement(Card.Content, { description: '1.) Select an annotation with LEFT CLICK 2.) Press DELETE or BACKSPACE' })
+                            ),
+                            React.createElement(
+                                Card,
+                                null,
+                                React.createElement(Card.Content, { header: 'How to assign a label?' }),
+                                React.createElement(Card.Content, { description: '1.) Select an annotation with LEFT CLICK 2.) Hit ENTER 3.) Type into the input field 4.) Hit ENTER to confirm 5.) Hit ESCAPE to close the input field' })
+                            ),
+                            React.createElement(
+                                Card,
+                                null,
+                                React.createElement(Card.Content, { header: 'Undo/ Redo' }),
+                                React.createElement(Card.Content, { description: 'Undo: Hit STRG + Z' }),
+                                React.createElement(Card.Content, { description: 'Redo: Hit STRG + R' })
+                            ),
+                            React.createElement(
+                                Card,
+                                null,
+                                React.createElement(Card.Content, { header: 'Add a node to Line/Polygon' }),
+                                React.createElement(Card.Content, { description: 'Hit STRG + Click left on the line' })
+                            ),
+                            React.createElement(
+                                Card,
+                                null,
+                                React.createElement(Card.Content, { header: 'Remove a node from Line/Polygon in create mode' }),
+                                React.createElement(Card.Content, { description: 'Press DELETE or BACKSPACE' })
+                            ),
+                            React.createElement(
+                                Card,
+                                null,
+                                React.createElement(Card.Content, { header: 'Edit Line/Polygon' }),
+                                React.createElement(Card.Content, { description: '1.) Click on the Annotation you want to edit.' }),
+                                React.createElement(Card.Content, { description: '2.) Press "e". New nodes can now be added using right click' })
+                            ),
+                            React.createElement(
+                                Card,
+                                null,
+                                React.createElement(Card.Content, { header: 'Zoom/ Move Canvas' }),
+                                React.createElement(Card.Content, { description: 'Zoom: Use MOUSE WHEEL to zoom in/out' }),
+                                React.createElement(Card.Content, { description: 'Move: Hold MOUSE WHEEL and move mouse. Or Use W/A/S/D keys to move camera up/left/down/right' })
+                            ),
+                            React.createElement(
+                                Card,
+                                null,
+                                React.createElement(Card.Content, { header: 'TAB navigation' }),
+                                React.createElement(Card.Content, { description: 'You can traverse all visible annotation by hitting TAB.' })
+                            ),
+                            React.createElement(
+                                Card,
+                                null,
+                                React.createElement(Card.Content, { header: 'Next/Prev image navigation' }),
+                                React.createElement(Card.Content, { description: 'Get next image by hitting ARROW_RIGHT key. Get previous image by hitting ARROW_LEFT key.' })
+                            ),
+                            React.createElement(
+                                Card,
+                                null,
+                                React.createElement(Card.Content, { header: 'Copy and Paste annotations' }),
+                                React.createElement(Card.Content, { description: 'Copy: 1.) Select annotation 2.) Hit STRG + C' }),
+                                React.createElement(Card.Content, { description: 'Paste: STRG + V' })
+                            ),
+                            React.createElement(
+                                Card,
+                                null,
+                                React.createElement(Card.Content, { header: 'Mark image as junk' }),
+                                React.createElement(Card.Content, { description: '1.) Press J key' })
+                            ),
+                            React.createElement(
+                                Card,
+                                null,
+                                React.createElement(Card.Content, { header: 'Assign a comment to a 2D annoation' }),
+                                React.createElement(Card.Content, { description: '1.) Select annotation 2.) Hit C key' })
+                            )
+                        )
+                    )
+                })
+            );
+        }
+    }, {
+        key: 'renderImgLabelInput',
+        value: function renderImgLabelInput() {
+            var _this9 = this;
+
+            if (!this.props.enabled.imgLabel) return null;
+            if (this.props.canvasConfig.img.actions.label) {
+                return React.createElement(
+                    Menu.Item,
+                    { name: 'img label input'
+                        // active={this.props.imgLabelInput.show} 
+                        , onClick: function onClick() {
+                            return _this9.toggleImgLabelInput();
+                        }
+                    },
+                    textIcon()
+                );
+            }
+        }
+    }, {
+        key: 'renderFullscreenBtn',
+        value: function renderFullscreenBtn() {
+            var _this10 = this;
+
+            if (!this.props.enabled.fullscreen) return null;
+            return React.createElement(
+                Menu.Item,
+                { name: 'expand arrows alternate',
+                    active: this.props.active.fullscreen,
+                    onClick: function onClick() {
+                        return _this10.toggleFullscreen();
+                    }
+                },
+                React.createElement(Icon, { name: 'expand arrows alternate' })
+            );
+        }
+    }, {
+        key: 'renderSettingBtn',
+        value: function renderSettingBtn() {
+            var _this11 = this;
+
+            if (!this.props.enabled.settings) return null;
+            return React.createElement(SIASettingButton, {
+                enabled: this.props.enabled.settings,
+                uiConfig: this.props.uiConfig,
+                onSettingEvent: function onSettingEvent(e, data) {
+                    return _this11.triggerToolBarEvent(e, data);
+                } });
+        }
+    }, {
+        key: 'renderFilterBtn',
+        value: function renderFilterBtn() {
+            var _this12 = this;
+
+            if (!this.props.enabled.filter) return null;
+            return React.createElement(SIAFilterButton, {
+                enabled: this.props.enabled.filter,
+                onFilterEvent: function onFilterEvent(e, data) {
+                    return _this12.triggerToolBarEvent(e, data);
+                },
+                filter: this.props.filter,
+                imageMeta: this.props.imageMeta
+            });
+        }
+    }, {
+        key: 'render',
+        value: function render() {
+            if (!this.props.enabled) return null;
+            return React.createElement(
+                'div',
+                {
+                    ref: this.toolBarGroup,
+                    style: { position: 'fixed', top: this.state.position.top, left: this.state.position.left } },
+                React.createElement(
+                    Menu,
+                    { icon: true, inverted: true, vertical: true },
+                    this.renderSaveButton(),
+                    this.renderImgLabelInput(),
+                    this.renderNavigation(),
+                    this.renderToolButtons(),
+                    this.renderFullscreenBtn(),
+                    this.renderJunkButton(),
+                    this.renderDeleteAllAnnosButton(),
+                    this.renderHelpButton(),
+                    this.renderSettingBtn(),
+                    this.renderFilterBtn()
+                )
+            );
+        }
+    }]);
+
+    return ToolBar;
+}(Component);
+
+var _extends$e = 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 _slicedToArray$3 = 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"); } }; }();
+
+/**
+ * SIA element that handles annotations within an image
+ * 
+ * @param {object} annos -  A json object containing all annotation 
+ *      information for an image
+ *      {
+ *          image : {
+ *              id: int, 
+ *              number: int, 
+ *              amount: int, 
+ *              isFirst: bool, 
+ *              isLast: bool,
+ *              description: string, // -> optional
+ *          },
+ *          annotations: {
+ *              bBoxes: [{
+ *                  id: int, // -> Not required if status === annoStatus.NEW
+ *                  data: {},
+ *                  labelIds: list of int, // -> optional
+ *                  status: see annoStatus, // -> optional
+ *                  annoTime: float, // -> optional
+ *              },...],
+ *              points: []
+ *              lines: []
+ *              polygons: []
+ *          }
+ *      }
+ * @param {object} possibleLabels - Possible labels that can be assigned to 
+ *      an annotation.
+ *      [{   
+ *          id: int, 
+ *          description: str, 
+ *          label: str, (name of the label) 
+ *          color: str (color is optional)
+ *      }, ...]
+ * @param {blob} imageBlob - The actual image blob that will be displayed
+ * @param {object} imageMeta - Meta information for the current image
+ *        {
+ *          "id": int,
+ *          "number": int, // -> number of image in current annotask
+ *          "amount": int, // -> total number of images in current annotask
+ *          "isFirst": bool, // -> True if this image is the first image
+ *          "isLast": bool, // -> True if current image is the last image in annotask
+ *          "labelIds": list of int, // -> List of label for the current image
+ *          "isJunk": bool, // -> Indicates wether current image is a junk image
+ *          "annoTime": float, // -> Total annotation time for the current image
+ *          "description": str or null // -> Description or comment for the current image
+ *      }
+ * @param {object} exampleImg - Example for a selected label
+ *      {
+ *          "anno": {
+ *              "id": int, // -> ID of the example annotation
+ *              "comment": null or str // -> Comment that has been assigned to this example
+ *          },
+ *          "img": image blob
+ *      }
+ * @param {bool} isJunk - Indicates wether the current image is junk or not
+ * @param {object} uiConfig - User interface configs 
+ *      {
+ *          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 
+ *      annotation. Possible choices are: 'bBox', 'point', 'line', 'polygon'
+ * @param {object} canvasConfig - Configuration for this canvas
+ *  {
+ *      annos:{
+ *          tools: {
+ *              point: bool,
+ *              line: bool,
+ *              polygon: bool,
+ *              bbox: bool
+ *          },
+ *          multilabels: bool,
+ *          actions: {
+ *              draw: bool,
+ *              label: bool,
+ *              edit: bool,
+ *          },
+ *          maxAnnos: null or int,
+ *          minArea: int
+ *      },
+ *      img: {
+ *          multilabels: bool,
+ *          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 {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.
+ * @param {object} filter Information for the filter Popup
+ *          {
+ *              "clahe": {
+ *                  "clipLimit": int,
+ *                  "active": bool
+ *              },
+ *              "rotate": {
+ *                  "angle": 90 | -90 | 180,
+ *                  "active": bool
+ *              }
+ *          } 
+ * @param {bool | object} toolbarEnabled Defines which toolbar buttons are 
+ *      displayed or if toolbar is shown at all. 
+ *          false | {
+ *              imgLabel: bool,
+ *              nextPrev: bool,
+ *              toolSelection: bool,
+ *              fullscreen: bool,
+ *              junk: bool,
+ *              deleteAll: bool,
+ *              settings: bool | {infoBoxes: bool, annoStyle: bool},
+ *              filter: bool | {rotate: bool, clahe:bool},
+ *              help: bool
+ *          }
+ * @event onNotification - Callback for Notification messages
+ *      args: {title: str, message: str, type: str}
+ * @event onCanvasKeyDown - Fires for keyDown on canvas 
+ * @event onAnnoEvent - Fires when an anno performed an action
+ *      args: {anno: annoObject, newAnnos: list of annoObjects, pAction: str}
+ * @event onGetAnnoExample - Fires when anno example is requested by canvas
+ *      {
+ *          id: int, // -> ID of the annotation that will be requested as example
+ *          comment: null or 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 onToolBarEvent - Fires on Toolbar event
+ *      args: {e: event, data: data object}
+ * 
+ *      e -> DELETE_ALL_ANNOS 
+ *      e -> TOOL_SELECTED
+ *          data: 'bbox', 'point', 'line', 'polygon'
+ *      e -> GET_NEXT_IMAGE
+ *          data: int // -> Image ID
+ *      e -> GET_PREV_IMAGE
+ *          data: int // -> Image ID
+ *      e -> TASK_FINISHED
+ *          data: null
+ *      e -> SHOW_IMAGE_LABEL_INPUT
+ *          data: null
+ *      e -> IMG_IS_JUNK
+ *          data: null
+ *      e -> APPLY_FILTER
+ *          data: {
+ *              "clahe": {
+ *                  "clipLimit": int,
+ *                  "active": bool
+ *              },
+ *              "rotate": {
+ *                  "angle": 90 | -90 | 180,
+ *                  "active": bool
+ *              }
+ *          } 
+ *      e -> SHOW_ANNO_DETAILS
+ *          data: null
+ *      e -> SHOW_LABEL_INFO
+ *          data: null
+ *      e -> SHOW_ANNO_STATS
+ *          data: null
+ *      e -> EDIT_STROKE_WIDTH
+ *          data: int // -> Stroke width
+ *      e -> EDIT_NODE_RADIUS
+ *          data: int // -> Radius
+ * @event onGetFunction - Get special canvas functions for manipulation from outside canvas
+ *              deleteAllAnnos()
+ *              unloadImage()
+ *              resetZoom()
+ *              getAnnos(annos,removeFrontendIds)
+ */
+var Sia = function Sia(props) {
+    var _useState = useState(''),
+        _useState2 = _slicedToArray$3(_useState, 2),
+        fullscreenCSS = _useState2[0],
+        setFullscreenCSS = _useState2[1];
+
+    var _useState3 = useState(0),
+        _useState4 = _slicedToArray$3(_useState3, 2),
+        layoutUpdate = _useState4[0],
+        setLayoutUpdate = _useState4[1];
+
+    var _useState5 = useState(),
+        _useState6 = _slicedToArray$3(_useState5, 2),
+        svg = _useState6[0],
+        setSvg = _useState6[1];
+
+    var _useState7 = useState(false),
+        _useState8 = _slicedToArray$3(_useState7, 2),
+        externalConfigUpdate = _useState8[0],
+        setExternalConfigUpdate = _useState8[1];
+
+    var _useState9 = useState({
+        "nodeRadius": 4,
+        "strokeWidth": 4,
+        "annoDetails": {
+            "visible": false
+        },
+        "labelInfo": {
+            "visible": false
+        },
+        "annoStats": {
+            "visible": false
+        },
+        "layoutOffset": {
+            "left": 20,
+            "top": 0,
+            "bottom": 5,
+            "right": 5
+        },
+        "imgBarVisible": true,
+        "imgLabelInputVisible": false,
+        "centerCanvasInContainer": true,
+        "maxCanvas": true
+    }),
+        _useState10 = _slicedToArray$3(_useState9, 2),
+        uiConfig = _useState10[0],
+        setUiConfig = _useState10[1];
+
+    var containerRef = useRef();
+
+    useEffect(function () {
+        doLayoutUpdate();
+    }, [props.layoutUpdate]);
+
+    useEffect(function () {
+        setExternalConfigUpdate(true);
+        setUiConfig(_extends$e({}, uiConfig, props.uiConfig));
+    }, [props.uiConfig]);
+
+    useEffect(function () {
+        if (externalConfigUpdate) {
+            setExternalConfigUpdate(false);
+        } else {
+            if (props.onCanvasEvent) {
+                props.onCanvasEvent(CANVAS_UI_CONFIG_UPDATE, uiConfig);
+            }
+        }
+    }, [uiConfig]);
+
+    var doLayoutUpdate = function doLayoutUpdate() {
+        setLayoutUpdate(layoutUpdate + 1);
+    };
+
+    var handleAnnoEvent = function handleAnnoEvent(anno, annos, action) {
+        if (props.onAnnoEvent) {
+            props.onAnnoEvent(anno, annos, action);
+        }
+    };
+
+    var handleNotification = function handleNotification(msg) {
+        if (props.onNotification) {
+            props.onNotification(msg);
+        }
+    };
+
+    var handleCanvasKeyDown = function handleCanvasKeyDown(e) {
+        if (props.onCanvasKeyDown) {
+            props.onCanvasKeyDown(e);
+        }
+    };
+
+    var handleCanvasEvent = function handleCanvasEvent(e, data) {
+        switch (e) {
+            case CANVAS_SVG_UPDATE:
+                setSvg(data);
+                break;
+            case CANVAS_UI_CONFIG_UPDATE:
+                setUiConfig(_extends$e({}, uiConfig, data));
+                break;
+            default:
+                break;
+        }
+        if (props.onCanvasEvent) {
+            props.onCanvasEvent(e, data);
+        }
+    };
+
+    var handleGetFunction = function handleGetFunction(deleteAll) {
+        if (props.onGetFunction) {
+            props.onGetFunction(deleteAll);
+        }
+    };
+
+    var handleToolBarEvent = function handleToolBarEvent(e, data) {
+        switch (e) {
+            case SET_FULLSCREEN:
+                if (fullscreenCSS === '') {
+                    setFullscreenCSS('sia-fullscreen');
+                    setUiConfig(_extends$e({}, uiConfig, {
+                        layoutOffset: _extends$e({}, uiConfig.layoutOffset, {
+                            left: 50,
+                            top: 5
+                        })
+                    }));
+                    doLayoutUpdate();
+                } else {
+                    setFullscreenCSS('');
+                    setUiConfig(_extends$e({}, uiConfig, {
+                        layoutOffset: _extends$e({}, uiConfig.layoutOffset, {
+                            left: 20,
+                            top: 0
+                        })
+                    }));
+                    doLayoutUpdate();
+                }
+                break;
+            case SHOW_ANNO_DETAILS:
+                setUiConfig(_extends$e({}, uiConfig, {
+                    annoDetails: _extends$e({}, uiConfig.annoDetails, {
+                        visible: !uiConfig.annoDetails.visible
+                    })
+                }));
+                break;
+            case SHOW_LABEL_INFO:
+                setUiConfig(_extends$e({}, uiConfig, {
+                    labelInfo: _extends$e({}, uiConfig.labelInfo, {
+                        visible: !uiConfig.labelInfo.visible
+                    })
+                }));
+                break;
+            case SHOW_ANNO_STATS:
+                setUiConfig(_extends$e({}, uiConfig, {
+                    annoStats: _extends$e({}, uiConfig.annoStats, {
+                        visible: !uiConfig.annoStats.visible
+                    })
+                }));
+                break;
+            case EDIT_STROKE_WIDTH:
+                setUiConfig(_extends$e({}, uiConfig, { strokeWidth: data }));
+                break;
+            case EDIT_NODE_RADIUS:
+                setUiConfig(_extends$e({}, uiConfig, { nodeRadius: data }));
+                break;
+            default:
+                break;
+        }
+        if (props.onToolBarEvent) {
+            props.onToolBarEvent(e, data);
+        }
+    };
+
+    return React.createElement(
+        'div',
+        { className: fullscreenCSS, ref: containerRef },
+        React.createElement(Canvas, {
+            container: containerRef,
+
+            onAnnoEvent: function onAnnoEvent(anno, annos, action) {
+                return handleAnnoEvent(anno, annos, action);
+            },
+            onNotification: function onNotification(messageObj) {
+                return handleNotification(messageObj);
+            },
+            onKeyDown: function onKeyDown(e) {
+                return handleCanvasKeyDown(e);
+            },
+            onCanvasEvent: function onCanvasEvent(action, data) {
+                return handleCanvasEvent(action, data);
+            },
+            onGetAnnoExample: function onGetAnnoExample(exampleArgs) {
+                return props.onGetAnnoExample ? props.onGetAnnoExample(exampleArgs) : {};
+            },
+            onGetFunction: function onGetFunction(canvasFunc) {
+                return handleGetFunction(canvasFunc);
+            },
+
+            canvasConfig: props.canvasConfig,
+            uiConfig: uiConfig,
+
+            nextAnnoId: props.nextAnnoId,
+            annos: props.annos,
+            imageMeta: props.imageMeta,
+            imageBlob: props.imageBlob,
+            possibleLabels: props.possibleLabels,
+            exampleImg: props.exampleImg,
+            lockedAnnos: props.lockedAnnos,
+            layoutUpdate: layoutUpdate,
+            selectedTool: props.selectedTool,
+            isJunk: props.isJunk,
+            blocked: props.blockCanvas,
+            defaultLabel: props.defaultLabel
+        }),
+        React.createElement(ToolBar, {
+            onToolBarEvent: function onToolBarEvent(e, data) {
+                return handleToolBarEvent(e, data);
+            },
+            imageMeta: props.imageMeta,
+            layoutUpdate: layoutUpdate,
+            svg: svg,
+            active: {
+                isJunk: props.isJunk,
+                selectedTool: props.selectedTool,
+                fullscreen: props.fullscreenMode
+            },
+            enabled: props.toolbarEnabled,
+            canvasConfig: props.canvasConfig,
+            uiConfig: uiConfig,
+            filter: props.filter
+        })
+    );
+};
+
+export { transform, annoConversion, canvasActions, toolbarEvents, tools, Canvas, Sia, ToolBar as Toolbar };
 //# sourceMappingURL=index.es.js.map