@ndmspc/ndmvr 0.20220401.1 → 0.20230212.0

package/dist/index.js

@@ -1,4582 +0,0 @@
-function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
-
-var React = require('react');
-var React__default = _interopDefault(React);
-var rxjs = require('rxjs');
-var AFRAME$1 = _interopDefault(require('aframe'));
-var socket_ioClient = require('socket.io-client');
-var THREE = require('three');
-
-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);
-  }
-}
-
-function _createClass(Constructor, protoProps, staticProps) {
-  if (protoProps) _defineProperties(Constructor.prototype, protoProps);
-  if (staticProps) _defineProperties(Constructor, staticProps);
-  return Constructor;
-}
-
-var id = 0;
-
-function _classPrivateFieldLooseKey(name) {
-  return "__private_" + id++ + "_" + name;
-}
-
-function _classPrivateFieldLooseBase(receiver, privateKey) {
-  if (!Object.prototype.hasOwnProperty.call(receiver, privateKey)) {
-    throw new TypeError("attempted to use private field on non-instance");
-  }
-
-  return receiver;
-}
-
-var _subject = /*#__PURE__*/_classPrivateFieldLooseKey("subject");
-
-var JsrootSubject = /*#__PURE__*/function () {
-  function JsrootSubject() {
-    Object.defineProperty(this, _subject, {
-      writable: true,
-      value: void 0
-    });
-    _classPrivateFieldLooseBase(this, _subject)[_subject] = new rxjs.Subject();
-  }
-
-  var _proto = JsrootSubject.prototype;
-
-  _proto.showBinProjection = function showBinProjection(binData) {
-    _classPrivateFieldLooseBase(this, _subject)[_subject].next(binData);
-  };
-
-  _proto.getServiceEvent = function getServiceEvent() {
-    return _classPrivateFieldLooseBase(this, _subject)[_subject].asObservable();
-  };
-
-  return JsrootSubject;
-}();
-
-var jsrootSubject = new JsrootSubject();
-
-var _jsroot = /*#__PURE__*/_classPrivateFieldLooseKey("jsroot");
-
-var JsrootService = /*#__PURE__*/function () {
-  function JsrootService() {
-    Object.defineProperty(this, _jsroot, {
-      writable: true,
-      value: null
-    });
-  }
-
-  var _proto = JsrootService.prototype;
-
-  _proto.createTH1Projection = function createTH1Projection(projectionAxis, info, idTargetElm, axisArray) {
-    var _info$obj$secondaryAx;
-
-    if (!info || !projectionAxis || _classPrivateFieldLooseBase(this, _jsroot)[_jsroot] === null) {
-      return;
-    }
-
-    var projectionTargetAxis = projectionAxis === axisArray[0];
-    var primary = projectionTargetAxis ? axisArray[0] : axisArray[1];
-    var secondary = projectionTargetAxis ? axisArray[1] : axisArray[0];
-    var primaryAxis = "f" + secondary + "axis";
-    var secondaryAxis = "f" + primary + "axis";
-    var binAxis = primary.toLowerCase() + "Pos";
-
-    var h1 = _classPrivateFieldLooseBase(this, _jsroot)[_jsroot].createHistogram('TH1I', info.obj[primaryAxis].fNbins);
-
-    h1.fXaxis.fXmin = info.obj[primaryAxis].fXmin;
-    h1.fXaxis.fXmax = info.obj[primaryAxis].fXmax;
-    h1.fXaxis.fTitle = info.obj[primaryAxis].fTitle;
-    h1.fXaxis.fLabels = info.obj[primaryAxis].fLabels;
-    var currLabel = ((_info$obj$secondaryAx = info.obj[secondaryAxis].fLabels) === null || _info$obj$secondaryAx === void 0 ? void 0 : _info$obj$secondaryAx.arr.length) > 0 ? info.obj[secondaryAxis].fLabels.arr[info.bin[binAxis] - 1].fString : '';
-
-    for (var n = 0; n < info.obj[primaryAxis].fNbins; n++) {
-      console.log(info.obj);
-      h1.setBinContent(n + 1, projectionAxis === axisArray[0] ? info.obj.getBinContent(info.bin[binAxis], n + 1) : info.obj.getBinContent(n + 1, info.bin[binAxis]));
-    }
-
-    h1.fName = 'px';
-    h1.fTitle = "Projection of bin=" + projectionAxis + (info.bin.binName !== '' ? info.bin.name : info.bin[binAxis] - 1) + "[" + currLabel + "]";
-
-    _classPrivateFieldLooseBase(this, _jsroot)[_jsroot].redraw(idTargetElm, h1);
-  };
-
-  _proto.openTH1Projection = function openTH1Projection(projectionAxis, info, idTargetElm, axisArray, projections, projIndex) {
-    var _this = this;
-
-    var xBin = info.bin.xPos - 1;
-    var yBin = info.bin.yPos - 1;
-
-    try {
-      var projection = projections.fFolders.arr[xBin].fFolders.arr[yBin].fFolders.arr[projIndex || 0];
-
-      _classPrivateFieldLooseBase(this, _jsroot)[_jsroot].redraw(idTargetElm, projection);
-
-      setTimeout(function () {
-        _this.displayImageOfProjection('projectionContainer', 'th-mapping', '500px', '400px');
-      }, 200);
-    } catch (e) {
-      console.log("you don't have this projection");
-    }
-  };
-
-  _proto.displayImageOfProjection = function displayImageOfProjection(idSourceElement, idTargetElement, width, height) {
-    try {
-      var sourceSvgElement = document.getElementById(idSourceElement).firstElementChild;
-      var targetElement = document.getElementById(idTargetElement);
-      var canvas = document.createElement('canvas');
-      sourceSvgElement.setAttribute('height', height);
-      sourceSvgElement.setAttribute('width', width);
-      canvas.setAttribute('height', height);
-      canvas.setAttribute('width', width);
-      var svgString = new XMLSerializer().serializeToString(sourceSvgElement);
-      var ctx = canvas.getContext('2d');
-      ctx.fillStyle = '#ffffff';
-      ctx.fillRect(0, 0, canvas.width, canvas.height);
-      var DOMURL = self.URL || self.webkitURL || self;
-      var img = new Image();
-      var svg = new Blob([svgString], {
-        type: 'image/svg+xml;charset=utf-8'
-      });
-      var url = DOMURL.createObjectURL(svg);
-
-      img.onload = function () {
-        ctx.drawImage(img, 0, 0);
-        var png = canvas.toDataURL('image/png');
-        targetElement.setAttribute('material', "src", png);
-        DOMURL.revokeObjectURL(png);
-      };
-
-      img.src = url;
-    } catch (e) {}
-  };
-
-  _createClass(JsrootService, [{
-    key: "jsrootLibrary",
-    get: function get() {
-      return _classPrivateFieldLooseBase(this, _jsroot)[_jsroot];
-    },
-    set: function set(JSROOT) {
-      _classPrivateFieldLooseBase(this, _jsroot)[_jsroot] = JSROOT;
-    }
-  }]);
-
-  return JsrootService;
-}();
-
-var jsrootService = new JsrootService();
-
-var styles = {
-  box: {
-    display: 'block',
-    margin: 'auto',
-    width: '90%',
-    textAlign: 'center',
-    align: 'center',
-    paddingTop: 4
-  },
-  projection: {
-    display: 'block',
-    margin: 'auto',
-    width: '420px',
-    height: '350px'
-  },
-  form: {
-    display: 'block',
-    width: '60%',
-    margin: 'auto',
-    paddingTop: '2%',
-    paddingBottom: '2%'
-  },
-  label: {
-    display: 'block'
-  },
-  input: {
-    display: 'block',
-    width: '85%',
-    margin: 'auto',
-    height: 40,
-    border: '1px solid grey',
-    borderRadius: 3,
-    textAlign: 'center',
-    fontSize: 20,
-    color: 'black',
-    opacity: 0.8
-  }
-};
-
-var JsrootHistogram = function JsrootHistogram(_ref) {
-  var histogram = _ref.histogram,
-      projectionAxes = _ref.projectionAxes,
-      projections = _ref.projections,
-      projIndex = _ref.projIndex;
-  var subscription;
-
-  var _useState = React.useState('X'),
-      axis = _useState[0],
-      setAxis = _useState[1];
-
-  var _useState2 = React.useState(null),
-      selectedBin = _useState2[0],
-      setSelectedBin = _useState2[1];
-
-  var handleInputChange = function handleInputChange(event) {
-    setAxis(event.target.value);
-  };
-
-  var handleSubscription = function handleSubscription(data) {
-    setSelectedBin(data);
-  };
-
-  var renderForm = function renderForm() {
-    return /*#__PURE__*/React__default.createElement("div", {
-      className: "form-group",
-      style: styles.form
-    }, /*#__PURE__*/React__default.createElement("label", {
-      htmlFor: "formGroupExampleInput",
-      style: styles.label
-    }, "Projection axis"), /*#__PURE__*/React__default.createElement("select", {
-      onChange: handleInputChange,
-      className: "form-control",
-      id: "axisProjection",
-      style: styles.input
-    }, /*#__PURE__*/React__default.createElement("option", {
-      value: projectionAxes[0]
-    }, histogram["f" + projectionAxes[0] + "axis"].fTitle ? histogram["f" + projectionAxes[0] + "axis"].fTitle : projectionAxes[0]), /*#__PURE__*/React__default.createElement("option", {
-      value: projectionAxes[1]
-    }, histogram["f" + projectionAxes[1] + "axis"].fTitle ? histogram["f" + projectionAxes[1] + "axis"].fTitle : projectionAxes[1])));
-  };
-
-  var createAndDisplayProjection = function createAndDisplayProjection() {
-    if (projections !== null) {
-      jsrootService.openTH1Projection(axis, {
-        obj: histogram,
-        bin: selectedBin
-      }, 'projectionContainer', projectionAxes, projections, projIndex);
-    } else {
-      jsrootService.createTH1Projection(axis, {
-        obj: histogram,
-        bin: selectedBin
-      }, 'projectionContainer', projectionAxes);
-      setTimeout(function () {
-        jsrootService.displayImageOfProjection('projectionContainer', 'th-mapping', '500px', '500px');
-      }, 500);
-    }
-  };
-
-  React.useEffect(function () {
-    jsrootService.jsrootLibrary = window.JSROOT;
-    setSelectedBin(null);
-    subscription = jsrootSubject.getServiceEvent().subscribe(handleSubscription);
-    return function () {
-      return subscription.unsubscribe();
-    };
-  }, [histogram]);
-  React.useEffect(function () {
-    if (selectedBin != null) createAndDisplayProjection();
-  }, [axis, selectedBin, projections]);
-  return /*#__PURE__*/React__default.createElement("div", {
-    style: styles.box
-  }, projections === null && selectedBin !== null && renderForm(), /*#__PURE__*/React__default.createElement("div", {
-    id: "projectionContainer",
-    style: styles.projection
-  }));
-};
-
-var _subject$1 = /*#__PURE__*/_classPrivateFieldLooseKey("subject");
-
-var CameraSubject = /*#__PURE__*/function () {
-  function CameraSubject() {
-    Object.defineProperty(this, _subject$1, {
-      writable: true,
-      value: void 0
-    });
-    _classPrivateFieldLooseBase(this, _subject$1)[_subject$1] = new rxjs.Subject();
-  }
-
-  var _proto = CameraSubject.prototype;
-
-  _proto.setVisibilityOfBanners = function setVisibilityOfBanners(inputDevice) {
-    _classPrivateFieldLooseBase(this, _subject$1)[_subject$1].next({
-      device: inputDevice
-    });
-  };
-
-  _proto.shiftBanners = function shiftBanners() {
-    _classPrivateFieldLooseBase(this, _subject$1)[_subject$1].next('shift');
-  };
-
-  _proto.setUserState = function setUserState() {
-    _classPrivateFieldLooseBase(this, _subject$1)[_subject$1].next('show');
-  };
-
-  _proto.getCameraSubject = function getCameraSubject() {
-    return _classPrivateFieldLooseBase(this, _subject$1)[_subject$1].asObservable();
-  };
-
-  return CameraSubject;
-}();
-
-var cameraSubject = new CameraSubject();
-
-var _cameraWrapper = /*#__PURE__*/_classPrivateFieldLooseKey("cameraWrapper");
-
-var _setVerticalOffset = /*#__PURE__*/_classPrivateFieldLooseKey("setVerticalOffset");
-
-var CameraService = function CameraService() {
-  var _this = this;
-
-  Object.defineProperty(this, _cameraWrapper, {
-    writable: true,
-    value: void 0
-  });
-
-  this.verticalMoveCamera = function (moveUp, speed) {
-    if (_classPrivateFieldLooseBase(_this, _cameraWrapper)[_cameraWrapper] === null) _classPrivateFieldLooseBase(_this, _cameraWrapper)[_cameraWrapper] = document.getElementById('cameraWrapper');
-
-    if (_classPrivateFieldLooseBase(_this, _cameraWrapper)[_cameraWrapper] !== null) {
-      if (moveUp) {
-        _classPrivateFieldLooseBase(_this, _cameraWrapper)[_cameraWrapper].object3D.position.y += speed;
-      } else {
-        if (_classPrivateFieldLooseBase(_this, _cameraWrapper)[_cameraWrapper].object3D.position.y > 0) _classPrivateFieldLooseBase(_this, _cameraWrapper)[_cameraWrapper].object3D.position.y -= speed;
-      }
-    }
-  };
-
-  this.horizontalMoveCamera = function (axis, increment, speed) {
-    if (_classPrivateFieldLooseBase(_this, _cameraWrapper)[_cameraWrapper] === null) _classPrivateFieldLooseBase(_this, _cameraWrapper)[_cameraWrapper] = document.getElementById('cameraWrapper');
-
-    if (_classPrivateFieldLooseBase(_this, _cameraWrapper)[_cameraWrapper] !== null) {
-      if (increment) {
-        _classPrivateFieldLooseBase(_this, _cameraWrapper)[_cameraWrapper].object3D.position[axis] += speed;
-      } else {
-        _classPrivateFieldLooseBase(_this, _cameraWrapper)[_cameraWrapper].object3D.position[axis] -= speed;
-      }
-    }
-  };
-
-  Object.defineProperty(this, _setVerticalOffset, {
-    writable: true,
-    value: function value(elm, offset, rotation) {
-      if (_classPrivateFieldLooseBase(_this, _cameraWrapper)[_cameraWrapper] !== null && elm !== null) {
-        var newXPos = elm.object3D.position.x + 1 * elm.object3D.position.x;
-        var newZPos = elm.object3D.position.z + 1 * elm.object3D.position.z;
-        var newYPos = offset;
-
-        _classPrivateFieldLooseBase(_this, _cameraWrapper)[_cameraWrapper].setAttribute('animation', "property: position; to: " + (newXPos + 1) + " " + newYPos + " " + (newZPos + 1) + "; dur: 100;");
-
-        _classPrivateFieldLooseBase(_this, _cameraWrapper)[_cameraWrapper].setAttribute('animation__1', "property: rotation; to: " + _classPrivateFieldLooseBase(_this, _cameraWrapper)[_cameraWrapper].object3D.rotation.x + " " + rotation + " " + _classPrivateFieldLooseBase(_this, _cameraWrapper)[_cameraWrapper].object3D.rotation.z + "; dur: 100;");
-      }
-    }
-  });
-
-  this.setCameraPosition = function (offsets) {
-    if (_classPrivateFieldLooseBase(_this, _cameraWrapper)[_cameraWrapper] !== null) {
-      var newZPos = _classPrivateFieldLooseBase(_this, _cameraWrapper)[_cameraWrapper].object3D.position.y;
-
-      if (offsets.zOffset !== undefined) {
-        newZPos = offsets.zOffset * 2;
-      }
-
-      var newXPos = offsets.xOffset + offsets.xOffset;
-      var newYPos = offsets.yOffset + offsets.yOffset;
-      setTimeout(function () {
-        _classPrivateFieldLooseBase(_this, _cameraWrapper)[_cameraWrapper].setAttribute('animation', "property: position; to: " + (newXPos - 3) + " " + newZPos + " " + (newYPos - 3) + "; dur: 40;");
-      }, 1800);
-    }
-  };
-
-  this.setPredefinedDownPosition = function () {
-    var labelElement = document.getElementById('downLabel');
-
-    if (labelElement !== undefined) {
-      _classPrivateFieldLooseBase(_this, _setVerticalOffset)[_setVerticalOffset](labelElement, 0, 180);
-    }
-  };
-
-  this.setPredefinedUpPosition = function () {
-    var labelElement = document.getElementById('upLabel');
-
-    if (labelElement !== undefined) {
-      _classPrivateFieldLooseBase(_this, _setVerticalOffset)[_setVerticalOffset](labelElement, 0, 0);
-    }
-  };
-
-  this.setPredefinedRightPosition = function () {
-    var labelElement = document.getElementById('rightLabel');
-
-    if (labelElement !== undefined) {
-      _classPrivateFieldLooseBase(_this, _setVerticalOffset)[_setVerticalOffset](labelElement, 0, 90);
-    }
-  };
-
-  this.setPredefinedLeftPosition = function () {
-    var labelElement = document.getElementById('leftLabel');
-
-    if (labelElement !== undefined) {
-      _classPrivateFieldLooseBase(_this, _setVerticalOffset)[_setVerticalOffset](labelElement, 0, 270);
-    }
-  };
-
-  this.setPredefinedDownPositionWithOffset = function () {
-    var labelElement = document.getElementById('downLabel');
-
-    if (labelElement !== undefined) {
-      _classPrivateFieldLooseBase(_this, _setVerticalOffset)[_setVerticalOffset](labelElement, 10, 180);
-    }
-  };
-
-  this.setPredefinedUpPositionWithOffset = function () {
-    var labelElement = document.getElementById('upLabel');
-
-    if (labelElement !== undefined) {
-      _classPrivateFieldLooseBase(_this, _setVerticalOffset)[_setVerticalOffset](labelElement, 10, 0);
-    }
-  };
-
-  this.setPredefinedRightPositionWithOffset = function () {
-    var labelElement = document.getElementById('rightLabel');
-
-    if (labelElement !== undefined) {
-      _classPrivateFieldLooseBase(_this, _setVerticalOffset)[_setVerticalOffset](labelElement, 10, 90);
-    }
-  };
-
-  this.setPredefinedLeftPositionWithOffset = function () {
-    var labelElement = document.getElementById('leftLabel');
-
-    if (labelElement !== undefined) {
-      _classPrivateFieldLooseBase(_this, _setVerticalOffset)[_setVerticalOffset](labelElement, 10, 270);
-    }
-  };
-
-  _classPrivateFieldLooseBase(this, _cameraWrapper)[_cameraWrapper] = document.getElementById('cameraWrapper');
-};
-
-var _subject$2 = /*#__PURE__*/_classPrivateFieldLooseKey("subject");
-
-var HistogramSubject = /*#__PURE__*/function () {
-  function HistogramSubject() {
-    Object.defineProperty(this, _subject$2, {
-      writable: true,
-      value: void 0
-    });
-    _classPrivateFieldLooseBase(this, _subject$2)[_subject$2] = new rxjs.Subject();
-  }
-
-  var _proto = HistogramSubject.prototype;
-
-  _proto.changeHistogramSectionByOffset = function changeHistogramSectionByOffset(axis, histogramType, increment, defaultRange) {
-    _classPrivateFieldLooseBase(this, _subject$2)[_subject$2].next({
-      name: histogramType,
-      axis: axis,
-      increment: increment,
-      defaultRange: defaultRange
-    });
-  };
-
-  _proto.changeHistogramFunction = function changeHistogramFunction(typeFunction, histogramType) {
-    _classPrivateFieldLooseBase(this, _subject$2)[_subject$2].next({
-      fFunction: typeFunction,
-      name: histogramType
-    });
-  };
-
-  _proto.changeTypeOfBinMark = function changeTypeOfBinMark(value, histogramType) {
-    _classPrivateFieldLooseBase(this, _subject$2)[_subject$2].next({
-      binMarkMode: value,
-      name: histogramType
-    });
-  };
-
-  _proto.getChangedSection = function getChangedSection() {
-    return _classPrivateFieldLooseBase(this, _subject$2)[_subject$2].asObservable();
-  };
-
-  return HistogramSubject;
-}();
-
-var histogramTH2Service = new HistogramSubject();
-var histogramTH3Service = new HistogramSubject();
-
-var _subject$3 = /*#__PURE__*/_classPrivateFieldLooseKey("subject");
-
-var BinSubject = /*#__PURE__*/function () {
-  function BinSubject() {
-    Object.defineProperty(this, _subject$3, {
-      writable: true,
-      value: void 0
-    });
-    _classPrivateFieldLooseBase(this, _subject$3)[_subject$3] = new rxjs.Subject();
-  }
-
-  var _proto = BinSubject.prototype;
-
-  _proto.saveSelectedBinToLocalStorage = function saveSelectedBinToLocalStorage() {
-    _classPrivateFieldLooseBase(this, _subject$3)[_subject$3].next(true);
-  };
-
-  _proto.deleteBinFromLocalStorage = function deleteBinFromLocalStorage() {
-    _classPrivateFieldLooseBase(this, _subject$3)[_subject$3].next(false);
-  };
-
-  _proto.getKeyboardEvent = function getKeyboardEvent() {
-    return _classPrivateFieldLooseBase(this, _subject$3)[_subject$3].asObservable();
-  };
-
-  return BinSubject;
-}();
-
-var binSubject = new BinSubject();
-
-var keyPressed = {};
-var cameraService = new CameraService();
-var aframeObj;
-var geoAttributes;
-var toolsSelector = new rxjs.Subject();
-var activeTool;
-
-var handlePositioning = function handlePositioning(property, event) {
-  var difference = 0.2;
-  if (property.name === 'scale') difference = 0.01;else if (property.name === 'rotation') difference = 2;
-
-  if (event.key === 'ArrowDown') {
-    property.xValue = property.xValue + difference;
-  } else if (event.key === 'ArrowUp') {
-    property.xValue = property.xValue - difference;
-  } else if (event.key === '=') {
-    property.yValue = property.yValue + difference;
-  } else if (event.key === '-') {
-    property.yValue = property.yValue - difference;
-  } else if (event.key === 'ArrowRight') {
-    property.zValue = property.zValue + difference;
-  } else if (event.key === 'ArrowLeft') {
-    property.zValue = property.zValue - difference;
-  }
-
-  aframeObj.setAttribute(property.name, property.xValue + " " + property.yValue + " " + property.zValue);
-};
-
-var handleChangeHistogramSectionByDefaultRange = function handleChangeHistogramSectionByDefaultRange(event) {
-  if (event.key === 'k' || event.key === 'K') {
-    histogramTH2Service.changeHistogramSectionByOffset('yOffset', 'TH2', false, true);
-    histogramTH3Service.changeHistogramSectionByOffset('yOffset', 'TH3', false, true);
-  } else if (event.key === 'i' || event.key === 'I') {
-    histogramTH2Service.changeHistogramSectionByOffset('yOffset', 'TH2', true, true);
-    histogramTH3Service.changeHistogramSectionByOffset('yOffset', 'TH3', true, true);
-  } else if (event.key === 'u' || event.key === 'U') {
-    histogramTH3Service.changeHistogramSectionByOffset('zOffset', 'TH3', true, true);
-  } else if (event.key === 'o' || event.key === 'O') {
-    histogramTH3Service.changeHistogramSectionByOffset('zOffset', 'TH3', false, true);
-  } else if (event.key === 'l' || event.key === 'L') {
-    histogramTH2Service.changeHistogramSectionByOffset('xOffset', 'TH2', false, true);
-    histogramTH3Service.changeHistogramSectionByOffset('xOffset', 'TH3', false, true);
-  } else if (event.key === 'j' || event.key === 'J') {
-    histogramTH2Service.changeHistogramSectionByOffset('xOffset', 'TH2', true, true);
-    histogramTH3Service.changeHistogramSectionByOffset('xOffset', 'TH3', true, true);
-  }
-};
-
-var handleChangeHistogramSectionByOwnRange = function handleChangeHistogramSectionByOwnRange(event) {
-  if (event.key === 'k' || event.key === 'K') {
-    histogramTH2Service.changeHistogramSectionByOffset('yOffset', 'TH2', false, false);
-    histogramTH3Service.changeHistogramSectionByOffset('yOffset', 'TH3', false, false);
-  } else if (event.key === 'i' || event.key === 'I') {
-    histogramTH2Service.changeHistogramSectionByOffset('yOffset', 'TH2', true, false);
-    histogramTH3Service.changeHistogramSectionByOffset('yOffset', 'TH3', true, false);
-  } else if (event.key === 'u' || event.key === 'U') {
-    histogramTH3Service.changeHistogramSectionByOffset('zOffset', 'TH3', true, false);
-  } else if (event.key === 'o' || event.key === 'O') {
-    histogramTH3Service.changeHistogramSectionByOffset('zOffset', 'TH3', false, false);
-  } else if (event.key === 'l' || event.key === 'L') {
-    histogramTH2Service.changeHistogramSectionByOffset('xOffset', 'TH2', false, false);
-    histogramTH3Service.changeHistogramSectionByOffset('xOffset', 'TH3', false, false);
-  } else if (event.key === 'j' || event.key === 'J') {
-    histogramTH2Service.changeHistogramSectionByOffset('xOffset', 'TH2', true, false);
-    histogramTH3Service.changeHistogramSectionByOffset('xOffset', 'TH3', true, false);
-  }
-};
-
-var keyPressHandlerFunction = function keyPressHandlerFunction(event) {
-  keyPressed[event.key] = true;
-
-  if (keyPressed.Z || keyPressed.z) {
-    handlePositioning(geoAttributes[0], event);
-  }
-
-  if (keyPressed.X || keyPressed.x) {
-    handlePositioning(geoAttributes[1], event);
-  }
-
-  if (keyPressed.C || keyPressed.c) {
-    handlePositioning(geoAttributes[2], event);
-  }
-
-  if (keyPressed.Shift) {
-    handleChangeHistogramSectionByOwnRange(event);
-  }
-
-  handleChangeHistogramSectionByDefaultRange(event);
-
-  if (event.key === ' ') {
-    cameraService.verticalMoveCamera(true, 0.3);
-  }
-
-  if (event.shiftKey) {
-    cameraService.verticalMoveCamera(false, 0.3);
-  }
-
-  if (event.key === '1') {
-    toolsSelector.next(1);
-    activeTool = 1;
-  }
-
-  if (event.key === '2') {
-    toolsSelector.next(2);
-    activeTool = 2;
-  }
-
-  if (event.key === '3') {
-    toolsSelector.next(3);
-    activeTool = 3;
-  }
-
-  if (event.key === '4') {
-    toolsSelector.next(4);
-    activeTool = 4;
-  }
-
-  if (event.key === '5') {
-    toolsSelector.next(5);
-    activeTool = 5;
-  }
-
-  if (event.key === '6') {
-    toolsSelector.next(6);
-    activeTool = 6;
-  }
-
-  if (event.key === '7') {
-    toolsSelector.next(7);
-    activeTool = 7;
-  }
-
-  if (event.key === '8') {
-    toolsSelector.next(8);
-    activeTool = 8;
-  }
-
-  if (event.key === '9') {
-    toolsSelector.next(9);
-    activeTool = 9;
-  }
-
-  if (event.key === '0') {
-    toolsSelector.next(0);
-    activeTool = 0;
-  }
-
-  if (event.key === 'Enter') {
-    binSubject.saveSelectedBinToLocalStorage();
-    ['th-mapping', 'bannerId_1', 'bannerId_2', 'bannerId_3', 'bannerId_4'].forEach(function (targetId) {
-      if (document.getElementById(targetId) !== null) {
-        jsrootService.displayImageOfProjection('projectionContainer', targetId, '500px', '400px');
-      }
-    });
-  }
-
-  if (event.key === 'r' || event.key === 'R') {
-    binSubject.deleteBinFromLocalStorage();
-  }
-
-  if (event.key === 'm' || event.key === 'M') {
-    histogramTH2Service.changeHistogramFunction('feet', 'TH2');
-  }
-
-  if (event.key === 'n' || event.key === 'N') {
-    histogramTH2Service.changeHistogramFunction('default', 'TH2');
-  }
-
-  if (event.key === 'c' || event.key === 'C') {
-    cameraSubject.setUserState();
-  }
-
-  if (event.key === 'v' || event.key === 'V') {
-    cameraSubject.setVisibilityOfBanners('keyboard');
-  }
-
-  if (event.key === 'x' || event.key === 'X') {
-    cameraSubject.shiftBanners();
-  }
-
-  if (event.key === 'x' || event.key === 'X') {
-    cameraSubject.shiftBanners();
-  }
-};
-
-var switchDisplayModeOnBin = function switchDisplayModeOnBin(event) {
-  event.preventDefault();
-  var binDisplayMode;
-
-  if (event.deltaY > 0) {
-    binDisplayMode = 1;
-  } else {
-    binDisplayMode = -1;
-  }
-
-  histogramTH2Service.changeTypeOfBinMark(binDisplayMode, 'TH2');
-  histogramTH3Service.changeTypeOfBinMark(binDisplayMode, 'TH3');
-};
-
-var getActiveTool = function getActiveTool() {
-  return activeTool;
-};
-
-var keyReleaseHandlerFunction = function keyReleaseHandlerFunction(event) {
-  delete keyPressed[event.key];
-};
-
-var initialKeyboardController = function initialKeyboardController(data, object) {
-  aframeObj = object;
-  geoAttributes = [data.position, data.scale, data.rotation];
-
-  for (var i = 0; i < 3; i++) {
-    aframeObj.setAttribute(geoAttributes[i].name, geoAttributes[i].xValue + " " + geoAttributes[i].yValue + " " + geoAttributes[i].zValue);
-  }
-};
-
-var keyboardUpdateCameraReference = function keyboardUpdateCameraReference() {
-  cameraService = new CameraService();
-};
-
-var _storage = /*#__PURE__*/_classPrivateFieldLooseKey("storage");
-
-var _camera = /*#__PURE__*/_classPrivateFieldLooseKey("camera");
-
-var _selectedBins = /*#__PURE__*/_classPrivateFieldLooseKey("selectedBins");
-
-var _deleteCurrentBin = /*#__PURE__*/_classPrivateFieldLooseKey("deleteCurrentBin");
-
-var NdmVrStorageService = /*#__PURE__*/function () {
-  function NdmVrStorageService() {
-    var _this = this;
-
-    Object.defineProperty(this, _storage, {
-      writable: true,
-      value: void 0
-    });
-    Object.defineProperty(this, _camera, {
-      writable: true,
-      value: void 0
-    });
-    Object.defineProperty(this, _selectedBins, {
-      writable: true,
-      value: []
-    });
-    Object.defineProperty(this, _deleteCurrentBin, {
-      writable: true,
-      value: function value(binData) {
-        return _classPrivateFieldLooseBase(_this, _selectedBins)[_selectedBins].filter(function (item) {
-          return item.id !== binData.id;
-        });
-      }
-    });
-
-    this.containThisBin = function (binData) {
-      var updatedArray = _classPrivateFieldLooseBase(_this, _selectedBins)[_selectedBins].filter(function (item) {
-        return item.id === binData.id;
-      });
-
-      return updatedArray.length !== 0;
-    };
-
-    this.storeBinToLocalStorage = function (binData) {
-      if (!_this.containThisBin(binData)) {
-        _classPrivateFieldLooseBase(_this, _selectedBins)[_selectedBins].push(binData);
-
-        _classPrivateFieldLooseBase(_this, _storage)[_storage].setItem('selectedBins', JSON.stringify(_classPrivateFieldLooseBase(_this, _selectedBins)[_selectedBins]));
-      }
-    };
-
-    this.deleteBinFromLocalStorage = function (binData) {
-      if (_this.containThisBin(binData)) {
-        _classPrivateFieldLooseBase(_this, _selectedBins)[_selectedBins] = _classPrivateFieldLooseBase(_this, _deleteCurrentBin)[_deleteCurrentBin](binData);
-
-        _classPrivateFieldLooseBase(_this, _storage)[_storage].setItem('selectedBins', JSON.stringify(_classPrivateFieldLooseBase(_this, _selectedBins)[_selectedBins]));
-      }
-    };
-
-    this.getBinsFromLocalStorage = function () {
-      var selectedBins = JSON.parse(_classPrivateFieldLooseBase(_this, _storage)[_storage].getItem('selectedBins'));
-
-      if (selectedBins === null) {
-        return [];
-      } else {
-        return selectedBins;
-      }
-    };
-
-    _classPrivateFieldLooseBase(this, _storage)[_storage] = window.localStorage;
-    _classPrivateFieldLooseBase(this, _camera)[_camera] = document.getElementById('cameraWrapper');
-    _classPrivateFieldLooseBase(this, _selectedBins)[_selectedBins] = this.getBinsFromLocalStorage();
-  }
-
-  var _proto = NdmVrStorageService.prototype;
-
-  _proto.storeCurrentBinToLocalStorage = function storeCurrentBinToLocalStorage(binData) {
-    _classPrivateFieldLooseBase(this, _storage)[_storage].setItem('currentBin', JSON.stringify(binData));
-  };
-
-  _proto.getCurrentBinFromLocalStorage = function getCurrentBinFromLocalStorage() {
-    var currentBin = JSON.parse(_classPrivateFieldLooseBase(this, _storage)[_storage].getItem('currentBin'));
-
-    if (currentBin === undefined || currentBin === '') {
-      return null;
-    }
-
-    return currentBin;
-  };
-
-  _proto.loadProperty = function loadProperty(property) {
-    return JSON.parse(_classPrivateFieldLooseBase(this, _storage)[_storage].getItem(property));
-  };
-
-  _proto.storeProperty = function storeProperty(property, object) {
-    _classPrivateFieldLooseBase(this, _storage)[_storage].setItem(property, JSON.stringify(object));
-  };
-
-  _proto.initHistogramData = function initHistogramData(histogram) {
-    if (histogram._typename.includes('TH3')) {
-      this.storeTH3HistogramLimits(histogram);
-    } else if (histogram._typename.includes('TH2')) {
-      this.storeTH2HistogramLimits(histogram);
-    }
-  };
-
-  _proto.storeTH2Offsets = function storeTH2Offsets(xOffset, yOffset, range) {
-    var object = this.loadProperty('TH2');
-    var section;
-
-    if (object === null) {
-      object = {};
-      section = {
-        name: 'TH2',
-        xOffset: 1,
-        yOffset: 1,
-        range: 8
-      };
-    } else {
-      section = {
-        name: 'TH2',
-        xOffset: xOffset,
-        yOffset: yOffset,
-        range: range
-      };
-    }
-
-    object.section = section;
-    this.storeProperty('TH2', object);
-  };
-
-  _proto.storeTH3Offsets = function storeTH3Offsets(xOffset, yOffset, zOffset, range) {
-    var object = this.loadProperty('TH3');
-    var section;
-
-    if (object === null) {
-      object = {};
-      section = {
-        name: 'TH3',
-        xOffset: 1,
-        yOffset: 1,
-        zOffset: 1,
-        range: 4
-      };
-    } else {
-      section = {
-        name: 'TH3',
-        xOffset: xOffset,
-        yOffset: yOffset,
-        zOffset: zOffset,
-        range: range
-      };
-    }
-
-    object.section = section;
-    this.storeProperty('TH3', object);
-  };
-
-  _proto.storeOffsets = function storeOffsets(section) {
-    if (section.name.includes('TH3') || section.name.includes('th3')) {
-      this.storeTH3Offsets(section.xOffset, section.yOffset, section.zOffset, section.range);
-    } else if (section.name.includes('TH2') || section.name.includes('th2')) {
-      this.storeTH2Offsets(section.xOffset, section.yOffset, section.range);
-    }
-  };
-
-  _proto.storeFilePath = function storeFilePath(filePath) {
-    _classPrivateFieldLooseBase(this, _storage)[_storage].setItem('rootFile', filePath);
-  };
-
-  _proto.loadFilePath = function loadFilePath() {
-    var filename = _classPrivateFieldLooseBase(this, _storage)[_storage].getItem('rootFile');
-
-    if (filename === null || filename === undefined) {
-      return 'defaultHistogram';
-    }
-
-    return filename;
-  };
-
-  _proto.loadTH2Offsets = function loadTH2Offsets() {
-    var object = this.loadProperty('TH2');
-
-    if (object !== null) {
-      return object.section;
-    } else {
-      return null;
-    }
-  };
-
-  _proto.loadTH3Offsets = function loadTH3Offsets() {
-    var object = this.loadProperty('TH3');
-
-    if (object !== null) {
-      return object.section;
-    } else {
-      return null;
-    }
-  };
-
-  _proto.loadOffsets = function loadOffsets(type) {
-    if (type.includes('TH3') || type.includes('th3')) {
-      return this.loadTH3Offsets();
-    } else if (type.includes('TH2') || type.includes('th2')) {
-      return this.loadTH2Offsets();
-    }
-  };
-
-  return NdmVrStorageService;
-}();
-var localStorageService = new NdmVrStorageService();
-
-var _subject$4 = /*#__PURE__*/_classPrivateFieldLooseKey("subject");
-
-var BinDataDistributor = /*#__PURE__*/function () {
-  function BinDataDistributor() {
-    Object.defineProperty(this, _subject$4, {
-      writable: true,
-      value: void 0
-    });
-    _classPrivateFieldLooseBase(this, _subject$4)[_subject$4] = new rxjs.Subject();
-  }
-
-  var _proto = BinDataDistributor.prototype;
-
-  _proto.sendDataOfTheSelectedBin = function sendDataOfTheSelectedBin(binData) {
-    _classPrivateFieldLooseBase(this, _subject$4)[_subject$4].next(binData);
-  };
-
-  _proto.getBinDistributor = function getBinDistributor() {
-    return _classPrivateFieldLooseBase(this, _subject$4)[_subject$4].asObservable();
-  };
-
-  return BinDataDistributor;
-}();
-
-var binDataDistributor = new BinDataDistributor();
-
-var binData = new rxjs.Subject();
-AFRAME$1.registerComponent('mouseevent', {
-  init: function init() {
-    var subscription;
-    var el = this.el;
-    var clickCount = 0;
-    var checked = false;
-    el.addEventListener('mouseenter', function setHover(evt) {
-      var _this = this;
-
-      checked = false;
-      var intersection = evt.detail.intersection;
-      subscription = binSubject.getKeyboardEvent().subscribe(function (save) {
-        if (save) {
-          localStorageService.storeBinToLocalStorage(_this.userData);
-          localStorageService.storeCurrentBinToLocalStorage(_this.userData);
-          binDataDistributor.sendDataOfTheSelectedBin(_this.userData);
-          _this.userData.markedColor = _this.userData.selectColor;
-
-          _this.setAttribute('material', 'opacity', '0.70');
-
-          jsrootSubject.showBinProjection(_this.userData);
-        } else {
-          localStorageService.deleteBinFromLocalStorage(_this.userData);
-          _this.userData.markedColor = _this.userData.color;
-
-          _this.setAttribute('material', 'opacity', '0.50');
-        }
-      });
-
-      if (intersection.face.normal.x !== 0) {
-        this.setAttribute('material', 'color', this.userData.axisZ);
-      } else if (intersection.face.normal.y !== 0) {
-        this.setAttribute('material', 'color', this.userData.axisY);
-      } else {
-        this.setAttribute('material', 'color', this.userData.axisX);
-      }
-
-      this.setAttribute('material', 'opacity', '0.70');
-    });
-    el.addEventListener('mouseleave', function setPassive() {
-      subscription.unsubscribe();
-
-      if (checked === false) {
-        this.setAttribute('material', 'color', this.userData.markedColor);
-        this.setAttribute('material', 'opacity', '0.50');
-      }
-
-      clickCount = 0;
-    });
-    el.addEventListener('click', function setActive(evt) {
-      clickCount = clickCount + 1;
-      checked = false;
-      setTimeout(function () {
-        clickCount = 0;
-      }, 600);
-
-      if (clickCount === 2) {
-        clickCount = 0;
-        checked = true;
-        this.setAttribute('material', 'color', '#99ff00');
-        this.setAttribute('material', 'opacity', '1');
-        var camera = document.getElementById('cameraWrapper');
-
-        if (camera !== null) {
-          camera.object3D.position.y = this.object3D.position.y + 0.4;
-
-          if (this.userData.content > 0.5) {
-            camera.setAttribute('animation', "property: position; to: " + (-0.5 + this.object3D.position.x) + " " + this.object3D.position.y + " " + this.object3D.position.z + "\n              ; dur: 600; easing: linear;");
-          } else if (this.userData.content > 0.2) {
-            camera.setAttribute('animation', "property: position; to: " + (-0.5 + this.object3D.position.x) + " " + (this.object3D.position.y + 0.1) + " " + (this.object3D.position.z + 0.5) + "\n              ; dur: 600; easing: linear;");
-          } else {
-            camera.setAttribute('animation', "property: position; to: " + (this.object3D.position.x + 2) + " " + (this.object3D.position.y + 0.1) + " " + (this.object3D.position.z + 8.5) + "\n              ; dur: 600; easing: linear;");
-          }
-        }
-      } else if (clickCount === 1) {
-        this.setAttribute('material', 'color', '#99ff00');
-        this.setAttribute('material', 'opacity', '1');
-        localStorageService.storeCurrentBinToLocalStorage(this.userData);
-        jsrootSubject.showBinProjection(this.userData);
-
-        switch (getActiveTool()) {
-          case 1:
-            binData.next(this.userData);
-            break;
-        }
-      }
-
-      var infoBanner = document.getElementById('th2-banner');
-
-      if (infoBanner === null) {
-        infoBanner = document.getElementById('th3-banner');
-      }
-
-      if (infoBanner !== null) {
-        var planes = infoBanner.childNodes;
-
-        if (this.userData.typeName === 'TH3' && planes.length === 5) {
-          var zCor = "[" + this.userData.zTitle + "] [" + this.userData.zMin + "," + this.userData.zMax + "] " + (this.userData.binName !== '' ? this.userData.binName + '\n' : '\n');
-          var xCor = "[" + this.userData.xTitle + "] [" + this.userData.xMin + "," + this.userData.xMax + "] " + (this.userData.binName !== '' ? this.userData.binName + '\n' : '\n');
-          var yCor = "[" + this.userData.yTitle + "] [" + this.userData.yMin + "," + this.userData.yMax + "] " + (this.userData.binName !== '' ? this.userData.binName + '\n' : '\n');
-          var content = "Content: " + this.userData.absoluteContent + " [" + this.userData.content + "]\n";
-          planes[0].setAttribute('text', "value: " + content + "; color: " + this.userData.color + "; align: center; width: 30; height: auto;");
-          planes[1].setAttribute('text', "value: " + xCor + "; color: " + this.userData.axisX + "; align: center; width: 30; height: auto;");
-          planes[2].setAttribute('text', "value: " + yCor + "; color: " + this.userData.axisY + "; align: center; width: 30; height: auto;");
-          planes[3].setAttribute('text', "value: " + zCor + "; color: " + this.userData.axisZ + "; align: center; width: 30; height: auto;");
-        } else {
-          var _content = "Content: " + this.userData.absoluteContent + " [" + this.userData.content + "]\n";
-
-          var _xCor = "[" + this.userData.xTitle + "] [" + this.userData.xMin + "," + this.userData.xMax + "] " + (this.userData.binName !== '' ? this.userData.binName + '\n' : '\n');
-
-          var _yCor = "[" + this.userData.yTitle + "] [" + this.userData.yMin + "," + this.userData.yMax + "] " + (this.userData.binName !== '' ? this.userData.binName + '\n' : '\n');
-
-          planes[0].setAttribute('text', "value: " + _content + "; color: " + this.userData.color + "; align: center; baseline: center; width: 30; height: auto;");
-          planes[1].setAttribute('text', "value: " + _xCor + "; color: " + this.userData.axisX + "; align: center; width: 30; height: auto;");
-          planes[2].setAttribute('text', "value: " + _yCor + "; color: " + this.userData.axisY + "; align: center; width: 30; height: auto;");
-        }
-      }
-    });
-  },
-  update: function update() {
-    var el = this.el;
-    el.setAttribute('material', 'color', el.userData.markedColor);
-    el.setAttribute('material', 'opacity', '0.75');
-  }
-});
-
-var AFRAME = window.AFRAME;
-
-var NdmVrCamera = function NdmVrCamera() {
-  var subscription;
-  var activeToolHighlight = '0 -0.75 -1';
-  var binDataSubscription;
-
-  var _useState = React.useState('value: Bin data:\nX: null\nY: null\nZ: null;color: black;'),
-      selectedBinData = _useState[0],
-      setSelectedBinData = _useState[1];
-
-  var offset = 30;
-
-  var _useState2 = React.useState(0),
-      rotation = _useState2[0],
-      setRotation = _useState2[1];
-
-  var _useState3 = React.useState(null),
-      prevPosition = _useState3[0],
-      setPrevPosition = _useState3[1];
-
-  var _useState4 = React.useState('keyboard'),
-      inputDevice = _useState4[0],
-      setInputDevice = _useState4[1];
-
-  var _useState5 = React.useState(false),
-      show = _useState5[0],
-      setShow = _useState5[1];
-
-  var _useState6 = React.useState(false),
-      showProjection = _useState6[0],
-      setShowProjection = _useState6[1];
-
-  var _useState7 = React.useState(3),
-      activeTool = _useState7[0],
-      setActiveTool = _useState7[1];
-
-  toolsSelector.subscribe(function (value) {
-    setActiveTool(value);
-
-    if (value === 1) {
-      binDataSubscription = binData.subscribe(function (value) {
-        return setSelectedBinData(String('value: Bin data:\n' + 'X: ' + value.xPos + '\n' + 'Y: ' + value.yPos + '\n' + 'Z: ' + value.zPos + '; color: black;'));
-      });
-    } else {
-      if (binDataSubscription) binDataSubscription.unsubscribe();
-    }
-  });
-
-  var handleSubscription = function handleSubscription(data) {
-    if (data.device) {
-      if (inputDevice !== data.device) {
-        setInputDevice(data.device);
-      }
-
-      setShow(!show);
-    } else if (data === 'shift') {
-      compileRotation();
-    } else if (data === 'show') {
-      setShowProjection(!showProjection);
-    }
-  };
-
-  var compileRotation = function compileRotation() {
-    var currentRotation = rotation + 90;
-    if (currentRotation >= 360) currentRotation = 0;
-    setRotation(currentRotation);
-  };
-
-  var renderProjectionsBanners = function renderProjectionsBanners() {
-    return /*#__PURE__*/React__default.createElement("a-entity", {
-      position: prevPosition === null ? "0 " + offset + " 0" : prevPosition.x + " " + offset + " " + prevPosition.z,
-      animation__rotation: "property: rotation; to: 0 " + rotation + " 0; dur: 1000; easing: linear;",
-      material: "color: white"
-    }, /*#__PURE__*/React__default.createElement("a-entity", {
-      geometry: "primitive: box; width: 50; height: 10; depth: 0.1;",
-      position: "-30 28 0",
-      rotation: "45 90 0",
-      material: "color:white;"
-    }, /*#__PURE__*/React__default.createElement("a-text", {
-      color: "black",
-      width: 50,
-      value: inputDevice === 'keyboard' ? 'Press C to show help panels' : 'Press Button X to show help panels',
-      position: "-20 2.8 1"
-    }), /*#__PURE__*/React__default.createElement("a-text", {
-      color: "black",
-      width: 50,
-      value: inputDevice === 'keyboard' ? 'Press V to switch to histogram view' : 'Press Button Y to switch to histogram view',
-      position: "-20 0 1"
-    }), /*#__PURE__*/React__default.createElement("a-text", {
-      color: "black",
-      width: 50,
-      value: inputDevice === 'keyboard' ? 'Press X to shift panels' : 'Press right Trigger to shift panels',
-      position: "-20 -2.8 1"
-    })), /*#__PURE__*/React__default.createElement("a-box", {
-      id: "bannerId_1",
-      scale: "80 50 2",
-      animation__position: "property: position; from: 0 0 -60; to: 0 -1 -42; delay: 0; dur: 800; easing: linear;",
-      material: "transparent:true"
-    }), /*#__PURE__*/React__default.createElement("a-box", {
-      scale: "80 52 2",
-      animation__position: "property: position; from: 0 0 -60; to: 0 0 -42.5; delay: 0; dur: 800; easing: linear;",
-      material: "color: white;"
-    }), /*#__PURE__*/React__default.createElement("a-box", {
-      id: "bannerId_2",
-      scale: "80 50 2",
-      animation__position: "property: position; from: 60 0 0; to: 42 -1 0; delay: 200; dur: 800; easing: linear;",
-      rotation: "0 90 0",
-      material: "transparent:true"
-    }), /*#__PURE__*/React__default.createElement("a-box", {
-      scale: "80 52 2",
-      animation__position: "property: position; from: 60 0 0; to: 42.5 0 0; delay: 200; dur: 800; easing: linear;",
-      rotation: "0 90 0",
-      material: "color: white;"
-    }), /*#__PURE__*/React__default.createElement("a-box", {
-      id: "bannerId_3",
-      scale: "80 50 2",
-      animation__position: "property: position; from: 0 0 60; to: 0 -1 42; delay: 400; dur: 800; easing: linear;",
-      material: "transparent:true"
-    }), /*#__PURE__*/React__default.createElement("a-box", {
-      scale: "80 52 2",
-      animation__position: "property: position; from: 0 0 60; to: 0 0 42.5; delay: 400; dur: 800; easing: linear;",
-      material: "color: white;"
-    }), /*#__PURE__*/React__default.createElement("a-box", {
-      id: "bannerId_4",
-      scale: "80 50 2",
-      animation__position: "property: position; from: -60 0 0; to: -42 -1 0; delay: 600; dur: 800; easing: linear;",
-      rotation: "0 90 0",
-      material: "transparent:true"
-    }), /*#__PURE__*/React__default.createElement("a-box", {
-      scale: "80 52 2",
-      animation__position: "property: position; from: -60 0 0; to: -42.5 0 0; delay: 600; dur: 800; easing: linear;",
-      rotation: "0 90 0",
-      material: "color: white;"
-    }));
-  };
-
-  var renderBannersWithControls = function renderBannersWithControls() {
-    if (inputDevice === 'keyboard') {
-      return /*#__PURE__*/React__default.createElement("a-entity", {
-        position: prevPosition === null ? "0 " + offset + " 0" : prevPosition.x + " " + offset + " " + prevPosition.z,
-        animation__rotation: "property: rotation; to: 0 " + rotation + " 0; dur: 1000; easing: linear;",
-        material: "color: white"
-      }, /*#__PURE__*/React__default.createElement("a-entity", {
-        geometry: "primitive: box; width: 50; height: 10; depth: 0.1;",
-        position: "-30 28 0",
-        rotation: "45 90 0",
-        material: "color: white"
-      }, /*#__PURE__*/React__default.createElement("a-text", {
-        color: "black",
-        width: "50",
-        value: showProjection ? 'Press C to show help panels' : 'Press C to show projection panels',
-        position: "-20 2.8 1"
-      }), /*#__PURE__*/React__default.createElement("a-text", {
-        color: "black",
-        width: "50",
-        value: "Press V to switch to histogram view",
-        position: "-20 0 1"
-      }), /*#__PURE__*/React__default.createElement("a-text", {
-        color: "black",
-        width: "50",
-        value: "Press X to shift panels",
-        position: "-20 -2.8 1"
-      })), /*#__PURE__*/React__default.createElement("a-box", {
-        scale: "80 50 2",
-        animation__position: "property: position; from: -30 0 60; to: -30 0 30; delay: 0; dur: 800; easing: linear;",
-        rotation: "0 -45 0",
-        src: "./ndmvr/keyboardControls/keyboard.png"
-      }), /*#__PURE__*/React__default.createElement("a-box", {
-        scale: "80 50 2",
-        animation__position: "property: position; from: -30 0 -60; to: -30 0 -30; delay: 200; dur: 800; easing: linear;",
-        rotation: "0 45 0",
-        src: "./ndmvr/keyboardControls/keyboard1.png"
-      }), /*#__PURE__*/React__default.createElement("a-box", {
-        scale: "80 50 2",
-        animation__position: "property: position; from: 30 0 -60; to: 30 0 -30; delay: 400; dur: 800; easing: linear;",
-        rotation: "0 -45 0",
-        src: "./ndmvr/keyboardControls/keyboard2.png"
-      }), /*#__PURE__*/React__default.createElement("a-box", {
-        scale: "80 50 2",
-        animation__position: "property: position; from: 30 0 60; to: 30 0 30; delay: 600; dur: 800; easing: linear;",
-        rotation: " 0 45 0",
-        src: "./ndmvr/keyboardControls/keyboard3.png"
-      }));
-    } else {
-      return /*#__PURE__*/React__default.createElement("a-entity", {
-        position: prevPosition === null ? "0 " + offset + " 0" : prevPosition.x + " " + offset + " " + prevPosition.z,
-        animation__rotation: "property: rotation; to: 0 " + rotation + " 0; dur: 1000; easing: linear;"
-      }, /*#__PURE__*/React__default.createElement("a-entity", {
-        geometry: "primitive: box; width: 50; height: 10; depth: 0.1;",
-        position: "-30 28 0",
-        rotation: "45 90 0",
-        material: "color: white"
-      }, /*#__PURE__*/React__default.createElement("a-text", {
-        color: "black",
-        width: "50",
-        value: showProjection ? 'Press Button X to show help panels' : 'Press Button X to show projection panels',
-        position: "-20 2.8 1"
-      }), /*#__PURE__*/React__default.createElement("a-text", {
-        color: "black",
-        width: "50",
-        value: "Press Button Y to switch to histogram view",
-        position: "-20 0 1"
-      }), /*#__PURE__*/React__default.createElement("a-text", {
-        color: "black",
-        width: "50",
-        value: "Press right Trigger to shift panels",
-        position: "-20 -2.8 1"
-      })), /*#__PURE__*/React__default.createElement("a-box", {
-        scale: "80 50 2",
-        animation__position: "property: position; from: -35 0 60; to: -32 0 32; delay: 0; dur: 800; easing: linear;",
-        rotation: "-10 -45 0",
-        src: "./ndmvr/oculusControls/oculus.png"
-      }), /*#__PURE__*/React__default.createElement("a-box", {
-        scale: "80 50 2",
-        animation__position: "property: position; from: -35 0 -60; to: -32 0 -32; delay: 200; dur: 800; easing: linear;",
-        rotation: "10 45 0",
-        src: "./ndmvr/oculusControls/oculus2.png"
-      }), /*#__PURE__*/React__default.createElement("a-box", {
-        scale: "80 50 2",
-        animation__position: "property: position; from: 35 0 -60; to: 32 0 -32; delay: 400; dur: 800; easing: linear;",
-        rotation: "10 -45 0",
-        src: "./ndmvr/oculusControls/oculus1.png"
-      }), /*#__PURE__*/React__default.createElement("a-box", {
-        scale: "80 50 2",
-        animation__position: "property: position; from: 35 0 60; to: 32 0 32; delay: 600; dur: 800; easing: linear;",
-        rotation: "-10 45 0",
-        src: "./ndmvr/oculusControls/oculus3.png"
-      }));
-    }
-  };
-
-  var hideMappingBanner = function hideMappingBanner() {
-    var banner = document.getElementById('th-mapping');
-
-    if (banner !== undefined) {
-      banner.setAttribute('material', 'opacity', 0);
-    }
-  };
-
-  var showMappingBanner = function showMappingBanner() {
-    var banner = document.getElementById('th-mapping');
-
-    if (banner !== undefined) {
-      banner.setAttribute('material', 'opacity', 1);
-    }
-  };
-
-  React.useEffect(function () {
-    subscription = cameraSubject.getCameraSubject().subscribe(handleSubscription);
-    return function () {
-      return subscription.unsubscribe();
-    };
-  }, [show, showProjection, rotation]);
-  React.useEffect(function () {
-    var camera = document.getElementById('camera');
-
-    if (!show) {
-      camera.object3D.position.y = 1.6;
-
-      if (prevPosition !== null) {
-        camera.object3D.position.x = prevPosition.x;
-        camera.object3D.position.z = prevPosition.z;
-        camera.object3D.position.y = prevPosition.y;
-      }
-
-      showMappingBanner();
-    } else {
-      setPrevPosition({
-        x: camera.object3D.position.x,
-        y: camera.object3D.position.y,
-        z: camera.object3D.position.z
-      });
-      camera.object3D.position.y = camera.object3D.position.y + offset;
-      hideMappingBanner();
-    }
-  }, [show, inputDevice]);
-  React.useEffect(function () {
-    if (showProjection) {
-      jsrootService.displayImageOfProjection('projectionContainer', 'bannerId_1', '500px', '400px');
-    }
-  }, [showProjection]);
-
-  var renderActiveTool = function renderActiveTool() {
-    switch (activeTool) {
-      case 1:
-        activeToolHighlight = '-0.675 -0.825 -1';
-        break;
-
-      case 2:
-        activeToolHighlight = '-0.525 -0.825 -1';
-        break;
-
-      case 3:
-        activeToolHighlight = '-0.375 -0.825 -1';
-        break;
-
-      case 4:
-        activeToolHighlight = '-0.225 -0.825 -1';
-        break;
-
-      case 5:
-        activeToolHighlight = '-0.075 -0.825 -1';
-        break;
-
-      case 6:
-        activeToolHighlight = '0.075 -0.825 -1';
-        break;
-
-      case 7:
-        activeToolHighlight = '0.225 -0.825 -1';
-        break;
-
-      case 8:
-        activeToolHighlight = '0.375 -0.825 -1';
-        break;
-
-      case 9:
-        activeToolHighlight = '0.525 -0.825 -1';
-        break;
-
-      case 0:
-        activeToolHighlight = '0.675 -0.825 -1';
-        break;
-    }
-
-    var tools = ['info', 2, 3, 4, 5, 6, 7, 8, 9, 0];
-    var toolNumXPos = -0.825;
-    return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, tools.map(function (tool) {
-      var txt;
-      toolNumXPos = toolNumXPos + 0.15;
-      var txtPos = String(toolNumXPos + ' -0.78' + ' -1');
-      if (tools.indexOf(tool) + 1 === activeTool) txt = String('value: ' + tool + '; color: #0F52BA;width:1.4;align:center');else txt = String('value: ' + tool + '; color: black;width:1;align:center');
-      return /*#__PURE__*/React__default.createElement("a-entity", {
-        key: tools.indexOf(tool),
-        text: txt,
-        position: txtPos,
-        material: "shader: flat;"
-      });
-    }), /*#__PURE__*/React__default.createElement("a-entity", {
-      geometry: "primitive: plane; height: 0.007; width: 0.17",
-      position: activeToolHighlight,
-      material: "color: #0F52BA;"
-    }));
-  };
-
-  var renderOculusControls = function renderOculusControls() {
-    return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("a-entity", {
-      "laser-controls": "hand: right",
-      raycaster: "objects: .clickable;  lineOpacity: 0.5;  far: 20;"
-    }), /*#__PURE__*/React__default.createElement("a-entity", {
-      "oculus-touch-controls": "hand: left",
-      "left-controller-logging": true
-    }), /*#__PURE__*/React__default.createElement("a-entity", {
-      "oculus-touch-controls": "hand: right",
-      "right-controller-logging": true
-    }));
-  };
-
-  return /*#__PURE__*/React__default.createElement("a-entity", {
-    id: "cameraWrapper",
-    rotation: "0 -135 0",
-    position: "-7 2 -7"
-  }, show && !showProjection && renderBannersWithControls(), show && showProjection && renderProjectionsBanners(), /*#__PURE__*/React__default.createElement("a-camera", {
-    id: "camera",
-    "look-control": true,
-    "wasd-controls-enabled": "acceleration:=50"
-  }, /*#__PURE__*/React__default.createElement("a-entity", {
-    geometry: "primitive: plane; height: 0.2; width: 2",
-    position: "0 -0.825 -1",
-    material: "color: #eee;shader: flat;"
-  }), /*#__PURE__*/React__default.createElement("a-entity", {
-    geometry: "primitive: plane; height: 0.001; width: 1.75",
-    position: "0 -0.825 -1",
-    material: "color: #aaa;shader: flat;"
-  }), activeTool === 1 && /*#__PURE__*/React__default.createElement("a-entity", {
-    text: selectedBinData,
-    position: "-0.8 0.7 -1"
-  }), renderActiveTool(), !AFRAME.utils.device.checkHeadsetConnected() && /*#__PURE__*/React__default.createElement("a-entity", {
-    cursor: "fuse: false; fuseTimeout: 2000;",
-    raycaster: "objects: .clickable; showLine: false; far: 100;",
-    animation__click: "property: scale; startEvents: click; from: 0.1 0.1 0.1; to: 1.4 1.4 1.4; dur: 150",
-    animation__mouseenter: "property: scale; startEvents: mouseenter; from: 1 1 1; to: 1.4 1.4 1.4; dur: 180",
-    animation__mouseleave: "property: scale; startEvents: mouseleave; from: 1.4 1.4 1.4; to: 1 1 1; dur: 180",
-    line: "color: orange; opacity: 0.5",
-    far: "100",
-    position: "0 0 -1",
-    geometry: "primitive: ring; radiusInner: 0.02; radiusOuter: 0.03",
-    material: "color: white; shader: flat"
-  })), AFRAME.utils.device.checkHeadsetConnected() && renderOculusControls());
-};
-
-AFRAME$1.registerComponent('binth', {
-  schema: {
-    id: {
-      type: 'string'
-    },
-    typeName: {
-      type: 'string'
-    },
-    content: {
-      "default": 0
-    },
-    absoluteContent: {
-      "default": 0
-    },
-    binName: {
-      "default": ''
-    },
-    xTitle: {
-      type: 'string'
-    },
-    yTitle: {
-      type: 'string'
-    },
-    zTitle: {
-      type: 'string'
-    },
-    xMin: {
-      type: 'number'
-    },
-    yMin: {
-      type: 'number'
-    },
-    zMin: {
-      type: 'number'
-    },
-    xMax: {
-      type: 'number'
-    },
-    yMax: {
-      type: 'number'
-    },
-    zMax: {
-      type: 'number'
-    },
-    xPos: {
-      type: 'number'
-    },
-    yPos: {
-      type: 'number'
-    },
-    zPos: {
-      type: 'number'
-    },
-    xCenter: {
-      type: 'number'
-    },
-    yCenter: {
-      type: 'number'
-    },
-    zCenter: {
-      type: 'number'
-    },
-    xWidth: {
-      type: 'number'
-    },
-    yWidth: {
-      type: 'number'
-    },
-    zWidth: {
-      type: 'number'
-    },
-    color: {
-      type: 'string'
-    },
-    axisX: {
-      type: 'string'
-    },
-    axisY: {
-      type: 'string'
-    },
-    axisZ: {
-      type: 'string'
-    },
-    selectColor: {
-      type: 'string'
-    },
-    markedColor: {
-      type: 'string'
-    }
-  },
-  init: function init() {
-    var el = this.el;
-    el.userData = {
-      typeName: this.data.typeName,
-      id: this.data.id,
-      content: this.data.content,
-      absoluteContent: this.data.absoluteContent,
-      binName: this.data.binName,
-      xTitle: this.data.xTitle,
-      yTitle: this.data.yTitle,
-      zTitle: this.data.zTitle,
-      xMin: this.data.xMin,
-      yMin: this.data.yMin,
-      zMin: this.data.zMin,
-      xMax: this.data.xMax,
-      yMax: this.data.yMax,
-      zMax: this.data.zMax,
-      xPos: this.data.xPos,
-      yPos: this.data.yPos,
-      zPos: this.data.zPos,
-      xCenter: this.data.xCenter,
-      yCenter: this.data.yCenter,
-      zCenter: this.data.zCenter,
-      xWidth: this.data.xWidth,
-      yWidth: this.data.yWidth,
-      zWidth: this.data.zWidth,
-      color: this.data.color,
-      axisX: this.data.axisX,
-      axisY: this.data.axisY,
-      axisZ: this.data.axisZ,
-      selectColor: this.data.selectColor,
-      markedColor: this.data.markedColor
-    };
-  },
-  update: function update() {
-    var el = this.el;
-    el.userData = {
-      typeName: this.data.typeName,
-      id: this.data.id,
-      content: this.data.content,
-      absoluteContent: this.data.absoluteContent,
-      binName: this.data.binName,
-      xTitle: this.data.xTitle,
-      yTitle: this.data.yTitle,
-      zTitle: this.data.zTitle,
-      xMin: this.data.xMin,
-      yMin: this.data.yMin,
-      zMin: this.data.zMin,
-      xMax: this.data.xMax,
-      yMax: this.data.yMax,
-      zMax: this.data.zMax,
-      xPos: this.data.xPos,
-      yPos: this.data.yPos,
-      zPos: this.data.zPos,
-      xCenter: this.data.xCenter,
-      yCenter: this.data.yCenter,
-      zCenter: this.data.zCenter,
-      xWidth: this.data.xWidth,
-      yWidth: this.data.yWidth,
-      zWidth: this.data.zWidth,
-      color: this.data.color,
-      axisX: this.data.axisX,
-      axisY: this.data.axisY,
-      axisZ: this.data.axisZ,
-      selectColor: this.data.selectColor,
-      markedColor: this.data.markedColor
-    };
-  }
-});
-
-AFRAME$1.registerComponent('histogram-control', {
-  schema: {
-    position: {
-      name: 'position',
-      xValue: 0,
-      yValue: 0,
-      zValue: 0
-    },
-    scale: {
-      name: 'scale',
-      xValue: 2,
-      yValue: 2,
-      zValue: 2
-    },
-    rotation: {
-      name: 'rotation',
-      xValue: 0,
-      yValue: 0,
-      zValue: 0
-    }
-  },
-  init: function init() {
-    var el = this.el;
-    initialKeyboardController(this.schema, el);
-    document.addEventListener('keydown', keyPressHandlerFunction);
-    document.addEventListener('keyup', keyReleaseHandlerFunction);
-    document.addEventListener('wheel', switchDisplayModeOnBin);
-  },
-  update: function update() {
-    keyboardUpdateCameraReference();
-  }
-});
-
-AFRAME$1.registerComponent('label-handler', {
-  schema: {
-    value: {
-      type: 'string'
-    },
-    delay: {
-      type: 'number'
-    }
-  },
-  init: function init() {
-    var el = this.el;
-    this.value = this.data.value;
-    el.setAttribute('text', 'value', this.data.value);
-  },
-  update: function update() {
-    var _this = this;
-
-    var el = this.el;
-
-    if (this.value !== this.data.value) {
-      setTimeout(function () {
-        el.setAttribute('text', 'value', _this.data.value);
-      }, this.data.delay);
-      this.value = this.data.value;
-    }
-  }
-});
-
-var palette = {
-  def: {
-    colorPalette: ['#4b0066', '#8300b3', '#bb00ff', '#cf4dff', '#e499ff', '#ffffcc', '#ffff99', '#ffff66', '#ffff33', '#fcba03'],
-    axis: {
-      x: '#ad0c00',
-      y: '#0206de',
-      z: '#007d1d'
-    },
-    accent: {
-      primary: '#4b0066',
-      secondary: '#FF3700'
-    },
-    font: {
-      primary: 'black',
-      secondary: 'black'
-    }
-  },
-  fire: {
-    colorPalette: ['#5b0000', '#7b2100', '#a23b00', '#c84900', '#df5900', '#f18800', '#f1a000', '#ffae00', '#ffcd19', '#ffe159'],
-    axis: {
-      x: '#ad0c00',
-      y: '#0206de',
-      z: '#007d1d'
-    },
-    accent: {
-      primary: '#5b0000',
-      secondary: '#b000d4'
-    },
-    font: {
-      primary: 'black',
-      secondary: 'black'
-    }
-  },
-  nebula: {
-    colorPalette: ['#13004b', '#320065', '#4e0085', '#6100a5', '#7000b8', '#9800c6', '#ab00c6', '#b900d2', '#d700da', '#ff6efc'],
-    axis: {
-      x: '#ad0c00',
-      y: '#0206de',
-      z: '#007d1d'
-    },
-    accent: {
-      primary: '#13004b',
-      secondary: '#ff3700'
-    },
-    font: {
-      primary: 'black',
-      secondary: 'black'
-    }
-  },
-  rainforest: {
-    colorPalette: ['#005b01', '#007b23', '#00a23d', '#00c84c', '#00df5c', '#00f18b', '#00ffb1', '#19ffd0', '#a6fffe', '#56fffe'],
-    axis: {
-      x: '#ad0c00',
-      y: '#0206de',
-      z: '#007d1d'
-    },
-    accent: {
-      primary: '#005b01',
-      secondary: '#ff3700'
-    },
-    font: {
-      primary: 'black',
-      secondary: 'black'
-    }
-  },
-  nature: {
-    colorPalette: ['#4a691a', '#5e8425', '#79a834', '#91c640', '#9ed64b', '#a8dc59', '#b0e166', '#bfeb7c', '#d7fba2', '#deffad'],
-    axis: {
-      x: '#ad0c00',
-      y: '#0206de',
-      z: '#007d1d'
-    },
-    accent: {
-      primary: '#4a691a',
-      secondary: '#b000d4'
-    },
-    font: {
-      primary: 'black',
-      secondary: 'black'
-    }
-  },
-  water: {
-    colorPalette: ['#00545a', '#00717a', '#0097a2', '#00bac8', '#00cede', '#00dff0', '#00edff', '#45f2ff', '#7ef6ff', '#bdfaff'],
-    axis: {
-      x: '#ad0c00',
-      y: '#0206de',
-      z: '#007d1d'
-    },
-    accent: {
-      primary: '#00545a',
-      secondary: '#ff3700'
-    },
-    font: {
-      primary: 'black',
-      secondary: 'black'
-    }
-  },
-  sunflower: {
-    colorPalette: ['#1e3600', '#2e4d00', '#507001', '#91a004', '#b4bb06', '#d2d309', '#eeed0f', '#ffff28', '#ffff85', '#ffffc2'],
-    axis: {
-      x: '#ad0c00',
-      y: '#0206de',
-      z: '#007d1d'
-    },
-    accent: {
-      primary: '#1e3600',
-      secondary: '#ff3700'
-    },
-    font: {
-      primary: 'black',
-      secondary: 'black'
-    }
-  },
-  blood: {
-    colorPalette: ['#470101', '#6e0101', '#800b0b', '#940c0c', '#a30000', '#bd0909', '#e01f1f', '#d43b3b', '#db5e5e', '#f78888'],
-    axis: {
-      x: '#ad0c00',
-      y: '#0206de',
-      z: '#007d1d'
-    },
-    accent: {
-      primary: '#470101',
-      secondary: '#f6ff00'
-    },
-    font: {
-      primary: 'black',
-      secondary: 'black'
-    }
-  },
-  magma: {
-    colorPalette: ['#dbff1d', '#d5e814', '#d5d007', '#cc9b00', '#b87600', '#9c4a00', '#812f00', '#661900', '#661420', '#2b0000'],
-    axis: {
-      x: '#8a0000',
-      y: '#03017a',
-      z: '#015e03'
-    },
-    accent: {
-      primary: '#2b0000',
-      secondary: '#ae2000'
-    },
-    font: {
-      primary: 'black',
-      secondary: 'black'
-    }
-  },
-  jupiter: {
-    colorPalette: ['#00340f', '#00344f', '#006e3a', '#00976a', '#26efd0', '#9c4a00', '#9c4a00', '#812f00', '#661900', '#2b0000'],
-    axis: {
-      x: '#8a0000',
-      y: '#03017a',
-      z: '#015e03'
-    },
-    accent: {
-      primary: '#00340f',
-      secondary: '#e3ff5b'
-    },
-    font: {
-      primary: 'black',
-      secondary: 'black'
-    }
-  },
-  magic: {
-    colorPalette: ['#342000', '#6e5e00', '#888500', '#919700', '#8dbe00', '#caef26', '#cf6e85', '#b300b8', '#6b0090', '#3b0066'],
-    axis: {
-      x: '#8a0000',
-      y: '#03017a',
-      z: '#015e03'
-    },
-    accent: {
-      primary: '#342000',
-      secondary: '#c85bff'
-    },
-    font: {
-      primary: 'black',
-      secondary: 'black'
-    }
-  }
-};
-
-var ThemeProvider = /*#__PURE__*/function () {
-  function ThemeProvider(theme) {
-    if (palette[theme]) {
-      this.xAxis = palette[theme].axis.x;
-      this.yAxis = palette[theme].axis.y;
-      this.zAxis = palette[theme].axis.z;
-      this.palette = palette[theme].colorPalette;
-      this.primaryAccent = palette[theme].accent.primary;
-      this.secondaryAccent = palette[theme].accent.secondary;
-      this.primaryFont = palette[theme].font.primary;
-      this.secondaryFont = palette[theme].font.secondary;
-    } else {
-      this.xAxis = palette.def.axis.x;
-      this.yAxis = palette.def.axis.y;
-      this.zAxis = palette.def.axis.z;
-      this.palette = palette.def.colorPalette;
-      this.primaryAccent = palette.def.accent.primary;
-      this.secondaryAccent = palette.def.accent.secondary;
-      this.primaryFont = palette.def.font.primary;
-      this.secondaryFont = palette.def.font.secondary;
-    }
-  }
-
-  var _proto = ThemeProvider.prototype;
-
-  _proto.getAxisColor = function getAxisColor(axis) {
-    if (axis === 'x' || axis === 'X') return this.xAxis;
-    if (axis === 'y' || axis === 'Y') return this.yAxis;
-    if (axis === 'z' || axis === 'Z') return this.zAxis;
-    return null;
-  };
-
-  _proto.getPrimaryAccentColor = function getPrimaryAccentColor() {
-    return this.primaryAccent;
-  };
-
-  _proto.getSecondaryAccentColor = function getSecondaryAccentColor() {
-    return this.secondaryAccent;
-  };
-
-  _proto.getPrimaryFontColor = function getPrimaryFontColor() {
-    return this.primaryFont;
-  };
-
-  _proto.getSecondaryFontColor = function getSecondaryFontColor() {
-    return this.secondaryFont;
-  };
-
-  _proto.getBinColor = function getBinColor(content) {
-    var fullContent = 1;
-    var color = this.palette[0];
-
-    if (content >= fullContent) {
-      return this.palette[9];
-    }
-
-    var difference = 0.12;
-    var sum = difference;
-
-    for (var i = 0; i <= 9; i++) {
-      if (content <= sum) {
-        color = this.palette[i];
-        break;
-      }
-
-      sum += difference;
-    }
-
-    return color;
-  };
-
-  return ThemeProvider;
-}();
-
-var _id = /*#__PURE__*/_classPrivateFieldLooseKey("id");
-
-var _selectedBins$1 = /*#__PURE__*/_classPrivateFieldLooseKey("selectedBins");
-
-var _histogram = /*#__PURE__*/_classPrivateFieldLooseKey("histogram");
-
-var _type = /*#__PURE__*/_classPrivateFieldLooseKey("type");
-
-var _projections = /*#__PURE__*/_classPrivateFieldLooseKey("projections");
-
-var _themeProvider = /*#__PURE__*/_classPrivateFieldLooseKey("themeProvider");
-
-var _xOffset = /*#__PURE__*/_classPrivateFieldLooseKey("xOffset");
-
-var _yOffset = /*#__PURE__*/_classPrivateFieldLooseKey("yOffset");
-
-var _zOffset = /*#__PURE__*/_classPrivateFieldLooseKey("zOffset");
-
-var _xLimit = /*#__PURE__*/_classPrivateFieldLooseKey("xLimit");
-
-var _yLimit = /*#__PURE__*/_classPrivateFieldLooseKey("yLimit");
-
-var _zLimit = /*#__PURE__*/_classPrivateFieldLooseKey("zLimit");
-
-var _xWidth = /*#__PURE__*/_classPrivateFieldLooseKey("xWidth");
-
-var _yWidth = /*#__PURE__*/_classPrivateFieldLooseKey("yWidth");
-
-var _zWidth = /*#__PURE__*/_classPrivateFieldLooseKey("zWidth");
-
-var _range = /*#__PURE__*/_classPrivateFieldLooseKey("range");
-
-var _labels = /*#__PURE__*/_classPrivateFieldLooseKey("labels");
-
-var _contentScale = /*#__PURE__*/_classPrivateFieldLooseKey("contentScale");
-
-var _minDisplayedContent = /*#__PURE__*/_classPrivateFieldLooseKey("minDisplayedContent");
-
-var _binScaleCoef = /*#__PURE__*/_classPrivateFieldLooseKey("binScaleCoef");
-
-var _shift = /*#__PURE__*/_classPrivateFieldLooseKey("shift");
-
-var _previousBins = /*#__PURE__*/_classPrivateFieldLooseKey("previousBins");
-
-var _checkOffsetValue = /*#__PURE__*/_classPrivateFieldLooseKey("checkOffsetValue");
-
-var _checkBinState = /*#__PURE__*/_classPrivateFieldLooseKey("checkBinState");
-
-var _createAxisEntity = /*#__PURE__*/_classPrivateFieldLooseKey("createAxisEntity");
-
-var _createTH3Histogram = /*#__PURE__*/_classPrivateFieldLooseKey("createTH3Histogram");
-
-var _createTH2Histogram = /*#__PURE__*/_classPrivateFieldLooseKey("createTH2Histogram");
-
-var _optimizeBinContent = /*#__PURE__*/_classPrivateFieldLooseKey("optimizeBinContent");
-
-var _getValidOffset = /*#__PURE__*/_classPrivateFieldLooseKey("getValidOffset");
-
-var _editTH3OffsetByOffset = /*#__PURE__*/_classPrivateFieldLooseKey("editTH3OffsetByOffset");
-
-var _projectionFunction = /*#__PURE__*/_classPrivateFieldLooseKey("projectionFunction");
-
-var _editTH2OffsetByOffset = /*#__PURE__*/_classPrivateFieldLooseKey("editTH2OffsetByOffset");
-
-var _getPreviousBinScales = /*#__PURE__*/_classPrivateFieldLooseKey("getPreviousBinScales");
-
-var _getPreviousBinColor = /*#__PURE__*/_classPrivateFieldLooseKey("getPreviousBinColor");
-
-var HistogramReactFactory = /*#__PURE__*/function () {
-  function HistogramReactFactory(uniqueName, histogram, section, range, projections, theme) {
-    var _this = this;
-
-    Object.defineProperty(this, _id, {
-      writable: true,
-      value: ''
-    });
-    Object.defineProperty(this, _selectedBins$1, {
-      writable: true,
-      value: []
-    });
-    Object.defineProperty(this, _histogram, {
-      writable: true,
-      value: null
-    });
-    Object.defineProperty(this, _type, {
-      writable: true,
-      value: ''
-    });
-    Object.defineProperty(this, _projections, {
-      writable: true,
-      value: null
-    });
-    Object.defineProperty(this, _themeProvider, {
-      writable: true,
-      value: null
-    });
-    Object.defineProperty(this, _xOffset, {
-      writable: true,
-      value: 1
-    });
-    Object.defineProperty(this, _yOffset, {
-      writable: true,
-      value: 1
-    });
-    Object.defineProperty(this, _zOffset, {
-      writable: true,
-      value: 1
-    });
-    Object.defineProperty(this, _xLimit, {
-      writable: true,
-      value: 0
-    });
-    Object.defineProperty(this, _yLimit, {
-      writable: true,
-      value: 0
-    });
-    Object.defineProperty(this, _zLimit, {
-      writable: true,
-      value: 0
-    });
-    Object.defineProperty(this, _xWidth, {
-      writable: true,
-      value: 1
-    });
-    Object.defineProperty(this, _yWidth, {
-      writable: true,
-      value: 1
-    });
-    Object.defineProperty(this, _zWidth, {
-      writable: true,
-      value: 1
-    });
-    Object.defineProperty(this, _range, {
-      writable: true,
-      value: 8
-    });
-    Object.defineProperty(this, _labels, {
-      writable: true,
-      value: {
-        xInitial: 0,
-        yInitial: 0,
-        zInitial: 0
-      }
-    });
-    Object.defineProperty(this, _contentScale, {
-      writable: true,
-      value: 1
-    });
-    Object.defineProperty(this, _minDisplayedContent, {
-      writable: true,
-      value: 0
-    });
-    Object.defineProperty(this, _binScaleCoef, {
-      writable: true,
-      value: 2
-    });
-    Object.defineProperty(this, _shift, {
-      writable: true,
-      value: {
-        xOffset: 0,
-        yOffset: 0,
-        zOffset: 0
-      }
-    });
-    Object.defineProperty(this, _previousBins, {
-      writable: true,
-      value: []
-    });
-
-    this.getXOffset = function () {
-      return _classPrivateFieldLooseBase(_this, _xOffset)[_xOffset];
-    };
-
-    this.getYOffset = function () {
-      return _classPrivateFieldLooseBase(_this, _yOffset)[_yOffset];
-    };
-
-    this.getZOffset = function () {
-      return _classPrivateFieldLooseBase(_this, _zOffset)[_zOffset];
-    };
-
-    this.getRange = function () {
-      return _classPrivateFieldLooseBase(_this, _range)[_range];
-    };
-
-    Object.defineProperty(this, _checkOffsetValue, {
-      writable: true,
-      value: function value(offsetValue, limit) {
-        var currOffset = offsetValue > limit - _classPrivateFieldLooseBase(_this, _range)[_range] ? limit - _classPrivateFieldLooseBase(_this, _range)[_range] : offsetValue;
-
-        if (currOffset < 1) {
-          currOffset = 1;
-        }
-
-        return currOffset;
-      }
-    });
-    Object.defineProperty(this, _checkBinState, {
-      writable: true,
-      value: function value(binId) {
-        var updatedArray = _classPrivateFieldLooseBase(_this, _selectedBins$1)[_selectedBins$1].filter(function (item) {
-          return item.id === binId;
-        });
-
-        return updatedArray.length !== 0;
-      }
-    });
-    Object.defineProperty(this, _createAxisEntity, {
-      writable: true,
-      value: function value(id, positionX, positionY, positionZ, rotationX, rotationY, rotationZ, width, height, _value, color, fontColor) {
-        return {
-          key: id + _classPrivateFieldLooseBase(_this, _id)[_id],
-          geometry: {
-            primitive: 'plane',
-            width: width,
-            height: height
-          },
-          text: {
-            color: fontColor,
-            width: 4,
-            height: 'auto'
-          },
-          labelHandler: {
-            value: _value,
-            delay: 500
-          },
-          rotation: {
-            x: rotationX,
-            y: rotationY,
-            z: rotationZ
-          },
-          material: {
-            color: color
-          },
-          animation: {
-            fromX: positionX + _classPrivateFieldLooseBase(_this, _shift)[_shift].xOffset,
-            fromY: positionY + _classPrivateFieldLooseBase(_this, _shift)[_shift].zOffset,
-            fromZ: positionZ + _classPrivateFieldLooseBase(_this, _shift)[_shift].yOffset,
-            toX: positionX,
-            toY: positionY,
-            toZ: positionZ
-          }
-        };
-      }
-    });
-    Object.defineProperty(this, _createTH3Histogram, {
-      writable: true,
-      value: function value() {
-        _classPrivateFieldLooseBase(_this, _selectedBins$1)[_selectedBins$1] = localStorageService.getBinsFromLocalStorage();
-        var elements = {
-          type: 'TH3',
-          bins: [],
-          labels: [],
-          banners: [],
-          ground: {},
-          titles: [],
-          axisLabels: []
-        };
-        var xcenter, xmin, xmax, xwidth;
-        var ycenter, ymin, ymax, ywidth;
-        var zcenter, zmin, zmax, zwidth;
-        var binName = '';
-        var absoluteContent;
-        var c;
-        var count = 0;
-        var maxXLength = _classPrivateFieldLooseBase(_this, _xOffset)[_xOffset] + _classPrivateFieldLooseBase(_this, _range)[_range] > _classPrivateFieldLooseBase(_this, _xLimit)[_xLimit] ? _classPrivateFieldLooseBase(_this, _xLimit)[_xLimit] : _classPrivateFieldLooseBase(_this, _xOffset)[_xOffset] + _classPrivateFieldLooseBase(_this, _range)[_range];
-        var maxYLength = _classPrivateFieldLooseBase(_this, _yOffset)[_yOffset] + _classPrivateFieldLooseBase(_this, _range)[_range] > _classPrivateFieldLooseBase(_this, _yLimit)[_yLimit] ? _classPrivateFieldLooseBase(_this, _yLimit)[_yLimit] : _classPrivateFieldLooseBase(_this, _yOffset)[_yOffset] + _classPrivateFieldLooseBase(_this, _range)[_range];
-        var maxZLength = _classPrivateFieldLooseBase(_this, _zOffset)[_zOffset] + _classPrivateFieldLooseBase(_this, _range)[_range] > _classPrivateFieldLooseBase(_this, _zLimit)[_zLimit] ? _classPrivateFieldLooseBase(_this, _zLimit)[_zLimit] : _classPrivateFieldLooseBase(_this, _zOffset)[_zOffset] + _classPrivateFieldLooseBase(_this, _range)[_range];
-
-        var xTitle = _classPrivateFieldLooseBase(_this, _histogram)[_histogram].fXaxis.fTitle;
-
-        var yTitle = _classPrivateFieldLooseBase(_this, _histogram)[_histogram].fYaxis.fTitle;
-
-        var zTitle = _classPrivateFieldLooseBase(_this, _histogram)[_histogram].fZaxis.fTitle;
-
-        var xLabels = _classPrivateFieldLooseBase(_this, _histogram)[_histogram].fXaxis.fLabels ? _classPrivateFieldLooseBase(_this, _histogram)[_histogram].fXaxis.fLabels.arr : [];
-        var yLabels = _classPrivateFieldLooseBase(_this, _histogram)[_histogram].fYaxis.fLabels ? _classPrivateFieldLooseBase(_this, _histogram)[_histogram].fYaxis.fLabels.arr : [];
-        var zLabels = _classPrivateFieldLooseBase(_this, _histogram)[_histogram].fZaxis.fLabels ? _classPrivateFieldLooseBase(_this, _histogram)[_histogram].fZaxis.fLabels.arr : [];
-        var currentBinScales = [];
-
-        for (var iz = _classPrivateFieldLooseBase(_this, _zOffset)[_zOffset]; iz <= maxZLength; iz++) {
-          for (var iy = _classPrivateFieldLooseBase(_this, _yOffset)[_yOffset]; iy <= maxYLength; iy++) {
-            for (var ix = _classPrivateFieldLooseBase(_this, _xOffset)[_xOffset]; ix <= maxXLength; ix++) {
-              xcenter = _classPrivateFieldLooseBase(_this, _histogram)[_histogram].fXaxis.GetBinCenter(ix);
-              xmin = _classPrivateFieldLooseBase(_this, _histogram)[_histogram].fXaxis.GetBinLowEdge(ix);
-              xmax = xcenter + (xcenter - xmin);
-              xwidth = xmax - xmin;
-              ycenter = _classPrivateFieldLooseBase(_this, _histogram)[_histogram].fYaxis.GetBinCenter(iy);
-              ymin = _classPrivateFieldLooseBase(_this, _histogram)[_histogram].fYaxis.GetBinLowEdge(iy);
-              ymax = ycenter + (ycenter - ymin);
-              ywidth = ymax - ymin;
-              zcenter = _classPrivateFieldLooseBase(_this, _histogram)[_histogram].fZaxis.GetBinCenter(iz);
-              zmin = _classPrivateFieldLooseBase(_this, _histogram)[_histogram].fZaxis.GetBinLowEdge(iz);
-              zmax = zcenter + (zcenter - zmin);
-              zwidth = zmax - zmin;
-              absoluteContent = _classPrivateFieldLooseBase(_this, _histogram)[_histogram].getBinContent(ix, iy, iz);
-              c = _classPrivateFieldLooseBase(_this, _optimizeBinContent)[_optimizeBinContent](absoluteContent, _classPrivateFieldLooseBase(_this, _histogram)[_histogram].fMaximum);
-
-              if (c > _classPrivateFieldLooseBase(_this, _minDisplayedContent)[_minDisplayedContent]) {
-                var size = c;
-                if (c < 0.15) size = 0.15;
-
-                var color = _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getBinColor(c);
-
-                var id = _classPrivateFieldLooseBase(_this, _id)[_id] + xmin + 'th3' + xmax + 'th3' + zmin + 'th3' + zmax + 'th3' + ymin + 'th3' + ymax;
-                var markedColor = void 0;
-
-                if (_classPrivateFieldLooseBase(_this, _checkBinState)[_checkBinState](id)) {
-                  markedColor = _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getSecondaryAccentColor();
-                } else {
-                  markedColor = color;
-                }
-
-                var binData = "id: " + id + ";\n              typeName: 'TH2'\n              content: " + c + ";\n              color: " + color + ";\n              yTitle: " + yTitle + ";\n              xTitle: " + xTitle + ";\n              zTitle: " + zTitle + ";\n              absoluteContent: " + absoluteContent + ";\n              binName: " + binName + ";\n              xMin: " + xmin + ";\n              yMin: " + ymin + ";\n              zMin: " + zmin + ";\n              xMax: " + xmax + ";\n              yMax: " + ymax + ";\n              zMax: " + zmax + ";\n              xPos: " + ix + ";\n              yPos: " + iy + ";\n              zPos: " + iz + ";\n              xCenter: " + xcenter + ";\n              yCenter: " + ycenter + ";\n              zCenter: " + zcenter + ";\n              xWidth: " + xwidth + ";\n              yWidth: " + ywidth + ";\n              zWidth: " + zwidth + ";\n              markedColor: " + markedColor + ";\n              selectColor: " + _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getSecondaryAccentColor() + ";\n              axisX: " + _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getAxisColor('x') + ";\n              axisY: " + _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getAxisColor('y') + ";\n              axisZ: " + _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getAxisColor('z');
-
-                var width = size * 0.8;
-                var posX = ix - 1;
-                var posY = iz - 1;
-                var posZ = iy - 1;
-                elements.bins[count] = {
-                  id: id,
-                  color: color,
-                  binData: binData,
-                  content: absoluteContent,
-                  animation: {
-                    fromWidth: _classPrivateFieldLooseBase(_this, _getPreviousBinScales)[_getPreviousBinScales](id),
-                    fromHeight: _classPrivateFieldLooseBase(_this, _getPreviousBinScales)[_getPreviousBinScales](id),
-                    fromDepth: _classPrivateFieldLooseBase(_this, _getPreviousBinScales)[_getPreviousBinScales](id),
-                    toWidth: width,
-                    toHeight: width,
-                    toDepth: width
-                  },
-                  animation2: {
-                    fromX: posX + _classPrivateFieldLooseBase(_this, _shift)[_shift].xOffset,
-                    fromY: posY + _classPrivateFieldLooseBase(_this, _shift)[_shift].zOffset,
-                    fromZ: posZ + _classPrivateFieldLooseBase(_this, _shift)[_shift].yOffset,
-                    toX: posX,
-                    toY: posY,
-                    toZ: posZ
-                  },
-                  animation3: {
-                    fromColor: _classPrivateFieldLooseBase(_this, _getPreviousBinColor)[_getPreviousBinColor](id),
-                    toColor: markedColor
-                  }
-                };
-                currentBinScales[count] = {
-                  key: id,
-                  scale: width,
-                  color: markedColor
-                };
-              }
-
-              count++;
-            }
-          }
-        }
-
-        _classPrivateFieldLooseBase(_this, _previousBins)[_previousBins] = currentBinScales;
-        var normalAxis = [];
-        var reversedAxis = [];
-        count = 0;
-
-        for (var _iz = _classPrivateFieldLooseBase(_this, _yOffset)[_yOffset]; _iz <= maxYLength; _iz++) {
-          normalAxis[count] = _classPrivateFieldLooseBase(_this, _createAxisEntity)[_createAxisEntity](50000 + count, -2.5 + _classPrivateFieldLooseBase(_this, _xOffset)[_xOffset], _classPrivateFieldLooseBase(_this, _zOffset)[_zOffset] - 1, _iz - 1, 270, 180, 0, 2, 1, "" + (yLabels[_iz - 1] ? yLabels[_iz - 1].fString : Math.round((_classPrivateFieldLooseBase(_this, _labels)[_labels].yInitial + _iz - 1 + Number.EPSILON) * 100) / 100), _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getAxisColor('z'), _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getSecondaryFontColor());
-          reversedAxis[count] = _classPrivateFieldLooseBase(_this, _createAxisEntity)[_createAxisEntity](55000 + count, maxXLength + 0.5, _classPrivateFieldLooseBase(_this, _zOffset)[_zOffset] - 1, _iz - 1, 270, 360, 0, 2, 1, "" + (yLabels[_iz - 1] ? yLabels[_iz - 1].fString : Math.round((_classPrivateFieldLooseBase(_this, _labels)[_labels].yInitial + _iz - 1 + Number.EPSILON) * 100) / 100), _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getAxisColor('z'), _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getSecondaryFontColor());
-          count++;
-        }
-
-        elements.axisLabels[0] = {
-          id: 'leftLabel',
-          key: 6000 + _classPrivateFieldLooseBase(_this, _id)[_id],
-          text: {
-            value: yTitle,
-            color: _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getAxisColor('z')
-          },
-          rotation: {
-            x: 270,
-            y: 270,
-            z: 0
-          },
-          animation: {
-            fromX: _classPrivateFieldLooseBase(_this, _xOffset)[_xOffset] - 4 + _classPrivateFieldLooseBase(_this, _shift)[_shift].xOffset,
-            fromY: _classPrivateFieldLooseBase(_this, _zOffset)[_zOffset] - 1 + _classPrivateFieldLooseBase(_this, _shift)[_shift].zOffset,
-            fromZ: _classPrivateFieldLooseBase(_this, _yOffset)[_yOffset] + 0.5 + _classPrivateFieldLooseBase(_this, _shift)[_shift].yOffset,
-            toX: _classPrivateFieldLooseBase(_this, _xOffset)[_xOffset] - 4,
-            toY: _classPrivateFieldLooseBase(_this, _zOffset)[_zOffset] - 1,
-            toZ: _classPrivateFieldLooseBase(_this, _yOffset)[_yOffset] + 0.5
-          }
-        };
-        elements.axisLabels[1] = {
-          id: 'rightLabel',
-          key: 64001 + _classPrivateFieldLooseBase(_this, _id)[_id],
-          text: {
-            value: yTitle,
-            color: _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getAxisColor('z')
-          },
-          rotation: {
-            x: 270,
-            y: 90,
-            z: 0
-          },
-          animation: {
-            fromX: maxXLength + 2 + _classPrivateFieldLooseBase(_this, _shift)[_shift].xOffset,
-            fromY: _classPrivateFieldLooseBase(_this, _zOffset)[_zOffset] - 1 + _classPrivateFieldLooseBase(_this, _shift)[_shift].zOffset,
-            fromZ: maxYLength - 2.5 + _classPrivateFieldLooseBase(_this, _shift)[_shift].yOffset,
-            toX: maxXLength + 2,
-            toY: _classPrivateFieldLooseBase(_this, _zOffset)[_zOffset] - 1,
-            toZ: maxYLength - 2.5
-          }
-        };
-
-        for (var _ix = _classPrivateFieldLooseBase(_this, _xOffset)[_xOffset]; _ix <= maxXLength; _ix++) {
-          normalAxis[count] = _classPrivateFieldLooseBase(_this, _createAxisEntity)[_createAxisEntity](70000 + count, _ix - 1, _classPrivateFieldLooseBase(_this, _zOffset)[_zOffset] - 1, _classPrivateFieldLooseBase(_this, _yOffset)[_yOffset] - 2.5, 270, 270, 0, 2, 1, "" + (xLabels[_ix - 1] ? xLabels[_ix - 1].fString : Math.round((_classPrivateFieldLooseBase(_this, _labels)[_labels].xInitial + _ix - 1 + Number.EPSILON) * 100) / 100), _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getAxisColor('x'), _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getSecondaryFontColor());
-          reversedAxis[count] = _classPrivateFieldLooseBase(_this, _createAxisEntity)[_createAxisEntity](75000 + count, _ix - 1, _classPrivateFieldLooseBase(_this, _zOffset)[_zOffset] - 1, maxYLength + 0.5, 270, 90, 0, 2, 1, "" + (xLabels[_ix - 1] ? xLabels[_ix - 1].fString : Math.round((_classPrivateFieldLooseBase(_this, _labels)[_labels].xInitial + _ix - 1 + Number.EPSILON) * 100) / 100), _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getAxisColor('x'), _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getSecondaryFontColor());
-          count++;
-        }
-
-        elements.axisLabels[2] = {
-          id: 'downLabel',
-          key: 84002 + _classPrivateFieldLooseBase(_this, _id)[_id],
-          text: {
-            value: xTitle,
-            color: _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getAxisColor('x')
-          },
-          rotation: {
-            x: 270,
-            y: 180,
-            z: 0
-          },
-          animation: {
-            fromX: _classPrivateFieldLooseBase(_this, _xOffset)[_xOffset] + _classPrivateFieldLooseBase(_this, _shift)[_shift].xOffset,
-            fromY: _classPrivateFieldLooseBase(_this, _zOffset)[_zOffset] - 1 + _classPrivateFieldLooseBase(_this, _shift)[_shift].zOffset,
-            fromZ: _classPrivateFieldLooseBase(_this, _yOffset)[_yOffset] - 4 + _classPrivateFieldLooseBase(_this, _shift)[_shift].yOffset,
-            toX: _classPrivateFieldLooseBase(_this, _xOffset)[_xOffset],
-            toY: _classPrivateFieldLooseBase(_this, _zOffset)[_zOffset] - 1,
-            toZ: _classPrivateFieldLooseBase(_this, _yOffset)[_yOffset] - 4
-          }
-        };
-        elements.axisLabels[3] = {
-          id: 'upLabel',
-          key: 85003 + _classPrivateFieldLooseBase(_this, _id)[_id],
-          text: {
-            value: xTitle,
-            color: _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getAxisColor('x')
-          },
-          rotation: {
-            x: 270,
-            y: 0,
-            z: 0
-          },
-          animation: {
-            fromX: maxXLength - 2.5 + _classPrivateFieldLooseBase(_this, _shift)[_shift].xOffset,
-            fromY: _classPrivateFieldLooseBase(_this, _zOffset)[_zOffset] - 1 + _classPrivateFieldLooseBase(_this, _shift)[_shift].zOffset,
-            fromZ: maxYLength + 2 + _classPrivateFieldLooseBase(_this, _shift)[_shift].yOffset,
-            toX: maxXLength - 2.5,
-            toY: _classPrivateFieldLooseBase(_this, _zOffset)[_zOffset] - 1,
-            toZ: maxYLength + 2
-          }
-        };
-        normalAxis[count] = _classPrivateFieldLooseBase(_this, _createAxisEntity)[_createAxisEntity](90000 + count, maxXLength + 0.5, _classPrivateFieldLooseBase(_this, _zOffset)[_zOffset] - 1, maxYLength + 0.5, 270, 360, 0, 2, 2, "" + (zLabels[_classPrivateFieldLooseBase(_this, _zOffset)[_zOffset] - 1] ? zLabels[_classPrivateFieldLooseBase(_this, _zOffset)[_zOffset] - 1].fString : Math.round((_classPrivateFieldLooseBase(_this, _labels)[_labels].zInitial + _classPrivateFieldLooseBase(_this, _zOffset)[_zOffset] - 1 + Number.EPSILON) * 100) / 100), _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getAxisColor('y'), _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getSecondaryFontColor());
-        reversedAxis[count] = _classPrivateFieldLooseBase(_this, _createAxisEntity)[_createAxisEntity](91000 + count, maxXLength + 0.5, _classPrivateFieldLooseBase(_this, _zOffset)[_zOffset] - 1, _classPrivateFieldLooseBase(_this, _yOffset)[_yOffset] - 2.5, 270, 90, 0, 2, 2, "" + (zLabels[_classPrivateFieldLooseBase(_this, _zOffset)[_zOffset] - 1] ? zLabels[_classPrivateFieldLooseBase(_this, _zOffset)[_zOffset] - 1].fString : Math.round((_classPrivateFieldLooseBase(_this, _labels)[_labels].zInitial + _classPrivateFieldLooseBase(_this, _zOffset)[_zOffset] - 1 + Number.EPSILON) * 100) / 100), _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getAxisColor('y'), _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getSecondaryFontColor());
-        count++;
-        normalAxis[count] = _classPrivateFieldLooseBase(_this, _createAxisEntity)[_createAxisEntity](92000 + count, _classPrivateFieldLooseBase(_this, _xOffset)[_xOffset] - 2.5, _classPrivateFieldLooseBase(_this, _zOffset)[_zOffset] - 1, maxYLength + 0.5, 270, 270, 0, 2, 2, "" + (zLabels[_classPrivateFieldLooseBase(_this, _zOffset)[_zOffset] - 1] ? zLabels[_classPrivateFieldLooseBase(_this, _zOffset)[_zOffset] - 1].fString : Math.round((_classPrivateFieldLooseBase(_this, _labels)[_labels].zInitial + _classPrivateFieldLooseBase(_this, _zOffset)[_zOffset] - 1 + Number.EPSILON) * 100) / 100), _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getAxisColor('y'), _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getSecondaryFontColor());
-        reversedAxis[count] = _classPrivateFieldLooseBase(_this, _createAxisEntity)[_createAxisEntity](93000 + count, _classPrivateFieldLooseBase(_this, _xOffset)[_xOffset] - 2.5, _classPrivateFieldLooseBase(_this, _zOffset)[_zOffset] - 1, _classPrivateFieldLooseBase(_this, _yOffset)[_yOffset] - 2.5, 270, 180, 0, 2, 2, "" + (zLabels[_classPrivateFieldLooseBase(_this, _zOffset)[_zOffset] - 1] ? zLabels[_classPrivateFieldLooseBase(_this, _zOffset)[_zOffset] - 1].fString : Math.round((_classPrivateFieldLooseBase(_this, _labels)[_labels].zInitial + _classPrivateFieldLooseBase(_this, _zOffset)[_zOffset] - 1 + Number.EPSILON) * 100) / 100), _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getAxisColor('y'), _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getSecondaryFontColor());
-        count++;
-        elements.axisLabels[4] = {
-          id: 'upLabel1',
-          key: 95004 + _classPrivateFieldLooseBase(_this, _id)[_id],
-          text: {
-            value: zTitle,
-            color: _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getAxisColor('y')
-          },
-          rotation: {
-            x: 0,
-            y: 270,
-            z: 90
-          },
-          animation: {
-            fromX: _classPrivateFieldLooseBase(_this, _xOffset)[_xOffset] - 1.5 + _classPrivateFieldLooseBase(_this, _shift)[_shift].xOffset,
-            fromY: maxZLength - 1 + _classPrivateFieldLooseBase(_this, _shift)[_shift].zOffset,
-            fromZ: _classPrivateFieldLooseBase(_this, _yOffset)[_yOffset] - 2 + _classPrivateFieldLooseBase(_this, _shift)[_shift].yOffset,
-            toX: _classPrivateFieldLooseBase(_this, _xOffset)[_xOffset] - 1.5,
-            toY: maxZLength - 1,
-            toZ: _classPrivateFieldLooseBase(_this, _yOffset)[_yOffset] - 2
-          }
-        };
-        elements.axisLabels[5] = {
-          id: 'upLabel2',
-          key: 100005 + _classPrivateFieldLooseBase(_this, _id)[_id],
-          text: {
-            value: zTitle,
-            color: _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getAxisColor('y')
-          },
-          rotation: {
-            x: 0,
-            y: 90,
-            z: 90
-          },
-          animation: {
-            fromX: maxXLength - 0.5 + _classPrivateFieldLooseBase(_this, _shift)[_shift].xOffset,
-            fromY: maxZLength - 1 + _classPrivateFieldLooseBase(_this, _shift)[_shift].zOffset,
-            fromZ: maxYLength + _classPrivateFieldLooseBase(_this, _shift)[_shift].yOffset,
-            toX: maxXLength - 0.5,
-            toY: maxZLength - 1,
-            toZ: maxYLength
-          }
-        };
-        elements.axisLabels[6] = {
-          id: 'upLabel3',
-          key: 105006 + _classPrivateFieldLooseBase(_this, _id)[_id],
-          text: {
-            value: zTitle,
-            color: _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getAxisColor('y')
-          },
-          rotation: {
-            x: 0,
-            y: 360,
-            z: 90
-          },
-          animation: {
-            fromX: _classPrivateFieldLooseBase(_this, _xOffset)[_xOffset] - 2 + _classPrivateFieldLooseBase(_this, _shift)[_shift].xOffset,
-            fromY: maxZLength - 1 + _classPrivateFieldLooseBase(_this, _shift)[_shift].zOffset,
-            fromZ: maxYLength - 0.5 + _classPrivateFieldLooseBase(_this, _shift)[_shift].yOffset,
-            toX: _classPrivateFieldLooseBase(_this, _xOffset)[_xOffset] - 2,
-            toY: maxZLength - 1,
-            toZ: maxYLength - 0.5
-          }
-        };
-        elements.axisLabels[7] = {
-          id: 'upLabel4',
-          key: 105007 + _classPrivateFieldLooseBase(_this, _id)[_id],
-          text: {
-            value: zTitle,
-            color: _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getAxisColor('y')
-          },
-          rotation: {
-            x: 0,
-            y: 180,
-            z: 90
-          },
-          animation: {
-            fromX: maxXLength - 0.5 + _classPrivateFieldLooseBase(_this, _shift)[_shift].xOffset,
-            fromY: maxZLength - 1 + _classPrivateFieldLooseBase(_this, _shift)[_shift].zOffset,
-            fromZ: _classPrivateFieldLooseBase(_this, _yOffset)[_yOffset] - 1.5 + _classPrivateFieldLooseBase(_this, _shift)[_shift].yOffset,
-            toX: maxXLength - 0.5,
-            toY: maxZLength - 1,
-            toZ: _classPrivateFieldLooseBase(_this, _yOffset)[_yOffset] - 1.5
-          }
-        };
-        count++;
-        var bannerWidthX = _classPrivateFieldLooseBase(_this, _range)[_range] > _classPrivateFieldLooseBase(_this, _xLimit)[_xLimit] ? _classPrivateFieldLooseBase(_this, _xLimit)[_xLimit] + 1 : _classPrivateFieldLooseBase(_this, _range)[_range];
-        var bannerWidthY = _classPrivateFieldLooseBase(_this, _range)[_range] > _classPrivateFieldLooseBase(_this, _yLimit)[_yLimit] ? _classPrivateFieldLooseBase(_this, _yLimit)[_yLimit] + 1 : _classPrivateFieldLooseBase(_this, _range)[_range];
-        elements.ground = {
-          key: 125000 + count + _classPrivateFieldLooseBase(_this, _id)[_id],
-          scale: {
-            width: bannerWidthX + 8,
-            height: 0.2,
-            depth: bannerWidthY + 8
-          },
-          animation: {
-            fromX: _classPrivateFieldLooseBase(_this, _xOffset)[_xOffset] + bannerWidthX * 0.5 - 1 + _classPrivateFieldLooseBase(_this, _shift)[_shift].xOffset,
-            fromY: _classPrivateFieldLooseBase(_this, _zOffset)[_zOffset] - 1.5 + _classPrivateFieldLooseBase(_this, _shift)[_shift].zOffset,
-            fromZ: _classPrivateFieldLooseBase(_this, _yOffset)[_yOffset] + bannerWidthY * 0.5 - 0.5 + _classPrivateFieldLooseBase(_this, _shift)[_shift].yOffset,
-            toX: _classPrivateFieldLooseBase(_this, _xOffset)[_xOffset] + bannerWidthX * 0.5 - 1,
-            toY: _classPrivateFieldLooseBase(_this, _zOffset)[_zOffset] - 1.5,
-            toZ: _classPrivateFieldLooseBase(_this, _yOffset)[_yOffset] + bannerWidthY * 0.5 - 0.5
-          }
-        };
-        count++;
-        elements.banners[1] = {
-          key: 130000 + count + _classPrivateFieldLooseBase(_this, _id)[_id],
-          id: 'th-mapping',
-          geometry: {
-            width: 1,
-            height: 15,
-            depth: 22
-          },
-          position: {
-            x: maxXLength + 8,
-            y: _classPrivateFieldLooseBase(_this, _zOffset)[_zOffset] + _classPrivateFieldLooseBase(_this, _range)[_range] / 2 + 0.5,
-            z: _classPrivateFieldLooseBase(_this, _yOffset)[_yOffset] + _classPrivateFieldLooseBase(_this, _range)[_range] / 2 + 2.5
-          },
-          material: {
-            color: '#ffffff',
-            transparent: true
-          }
-        };
-        elements.labels = [].concat(normalAxis, reversedAxis);
-        return elements;
-      }
-    });
-    Object.defineProperty(this, _createTH2Histogram, {
-      writable: true,
-      value: function value(projectionFunction) {
-        _classPrivateFieldLooseBase(_this, _selectedBins$1)[_selectedBins$1] = localStorageService.getBinsFromLocalStorage();
-        var elements = {
-          type: 'TH2',
-          bins: [],
-          labels: [],
-          banners: [],
-          ground: {},
-          titles: [],
-          axisLabels: []
-        };
-        var centeredYPosition;
-        var xcenter, xmin, xmax, xwidth;
-        var ycenter, ymin, ymax, ywidth;
-        var c;
-        var binName = '';
-        var absoluteContent;
-        var count = 0;
-        var maxXLength = _classPrivateFieldLooseBase(_this, _xOffset)[_xOffset] + _classPrivateFieldLooseBase(_this, _range)[_range] > _classPrivateFieldLooseBase(_this, _histogram)[_histogram].fXaxis.fNbins ? _classPrivateFieldLooseBase(_this, _histogram)[_histogram].fXaxis.fNbins : _classPrivateFieldLooseBase(_this, _xOffset)[_xOffset] + _classPrivateFieldLooseBase(_this, _range)[_range];
-        var maxYLength = _classPrivateFieldLooseBase(_this, _yOffset)[_yOffset] + _classPrivateFieldLooseBase(_this, _range)[_range] > _classPrivateFieldLooseBase(_this, _histogram)[_histogram].fYaxis.fNbins ? _classPrivateFieldLooseBase(_this, _histogram)[_histogram].fYaxis.fNbins : _classPrivateFieldLooseBase(_this, _yOffset)[_yOffset] + _classPrivateFieldLooseBase(_this, _range)[_range];
-        var xTitle = _classPrivateFieldLooseBase(_this, _histogram)[_histogram].fXaxis.fTitle !== '' ? _classPrivateFieldLooseBase(_this, _histogram)[_histogram].fXaxis.fTitle : 'x';
-        var yTitle = _classPrivateFieldLooseBase(_this, _histogram)[_histogram].fYaxis.fTitle !== '' ? _classPrivateFieldLooseBase(_this, _histogram)[_histogram].fYaxis.fTitle : 'y';
-        var xLabels = _classPrivateFieldLooseBase(_this, _histogram)[_histogram].fXaxis.fLabels ? _classPrivateFieldLooseBase(_this, _histogram)[_histogram].fXaxis.fLabels.arr : [];
-        var yLabels = _classPrivateFieldLooseBase(_this, _histogram)[_histogram].fYaxis.fLabels ? _classPrivateFieldLooseBase(_this, _histogram)[_histogram].fYaxis.fLabels.arr : [];
-        var currentBinScales = [];
-
-        for (var iy = _classPrivateFieldLooseBase(_this, _yOffset)[_yOffset]; iy <= maxYLength; iy++) {
-          for (var ix = _classPrivateFieldLooseBase(_this, _xOffset)[_xOffset]; ix <= maxXLength; ix++) {
-            xcenter = _classPrivateFieldLooseBase(_this, _histogram)[_histogram].fXaxis.GetBinCenter(ix);
-            xmin = _classPrivateFieldLooseBase(_this, _histogram)[_histogram].fXaxis.GetBinLowEdge(ix);
-            xmax = xcenter + (xcenter - xmin);
-            xwidth = xmax - xmin;
-            ycenter = _classPrivateFieldLooseBase(_this, _histogram)[_histogram].fYaxis.GetBinCenter(iy);
-            ymin = _classPrivateFieldLooseBase(_this, _histogram)[_histogram].fYaxis.GetBinLowEdge(iy);
-            ymax = ycenter + (ycenter - ymin);
-            ywidth = ymax - ymin;
-            absoluteContent = _classPrivateFieldLooseBase(_this, _histogram)[_histogram].getBinContent(ix, iy);
-            c = _classPrivateFieldLooseBase(_this, _optimizeBinContent)[_optimizeBinContent](absoluteContent, _classPrivateFieldLooseBase(_this, _histogram)[_histogram].fMaximum);
-            centeredYPosition = c * _classPrivateFieldLooseBase(_this, _range)[_range] * _classPrivateFieldLooseBase(_this, _contentScale)[_contentScale] / 16;
-
-            if (c > _classPrivateFieldLooseBase(_this, _minDisplayedContent)[_minDisplayedContent]) {
-              var projectionColor = _classPrivateFieldLooseBase(_this, _projectionFunction)[_projectionFunction](projectionFunction, xmin, ymin);
-
-              var color = projectionColor === '' ? _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getBinColor(c) : projectionColor;
-              var id = _classPrivateFieldLooseBase(_this, _id)[_id] + xmin + 'th2' + xmax + 'th2' + ymin + 'th2' + ymax;
-              var markedColor = void 0;
-
-              if (_classPrivateFieldLooseBase(_this, _checkBinState)[_checkBinState](id)) {
-                markedColor = _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getSecondaryAccentColor();
-              } else {
-                markedColor = color;
-              }
-
-              var binData = "id: " + id + ";\n            typeName: 'TH2'\n            content: " + c + ";\n            color: " + color + ";\n            yTitle: " + yTitle + ";\n            xTitle: " + xTitle + ";\n            zTitle: 'none';\n            absoluteContent: " + absoluteContent + ";\n            binName: " + binName + ";\n            xMin: " + xmin + ";\n            yMin: " + ymin + ";\n            zMin: " + 0 + ";\n            xMax: " + xmax + ";\n            yMax: " + ymax + ";\n            zMax: " + 0 + ";\n            xPos: " + ix + ";\n            yPos: " + iy + ";\n            zPos: " + 0 + ";\n            xCenter: " + xcenter + ";\n            yCenter: " + ycenter + ";\n            yCenter: " + 0 + ";\n            xWidth: " + xwidth + ";\n            yWidth: " + ywidth + ";\n            zWidth: " + 0 + ";\n            markedColor: " + markedColor + ";\n            selectColor: " + _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getSecondaryAccentColor() + ";\n            axisX: " + _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getAxisColor('x') + ";\n            axisY: " + _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getAxisColor('y') + ";\n            axisZ: " + _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getAxisColor('z');
-
-              var width = xwidth / _classPrivateFieldLooseBase(_this, _xWidth)[_xWidth] / _classPrivateFieldLooseBase(_this, _binScaleCoef)[_binScaleCoef];
-
-              var depth = ywidth / _classPrivateFieldLooseBase(_this, _yWidth)[_yWidth] / _classPrivateFieldLooseBase(_this, _binScaleCoef)[_binScaleCoef];
-
-              var posX = ix - 1;
-              var posY = iy - 1;
-              elements.bins[count] = {
-                id: id,
-                color: color,
-                binData: binData,
-                content: absoluteContent,
-                animation: {
-                  fromWidth: width,
-                  fromHeight: _classPrivateFieldLooseBase(_this, _getPreviousBinScales)[_getPreviousBinScales](id),
-                  fromDepth: depth,
-                  toWidth: width,
-                  toHeight: c * _classPrivateFieldLooseBase(_this, _range)[_range] * _classPrivateFieldLooseBase(_this, _contentScale)[_contentScale] / 8,
-                  toDepth: depth
-                },
-                animation2: {
-                  fromX: posX + _classPrivateFieldLooseBase(_this, _shift)[_shift].xOffset,
-                  fromY: centeredYPosition,
-                  fromZ: posY + _classPrivateFieldLooseBase(_this, _shift)[_shift].yOffset,
-                  toX: posX,
-                  toY: centeredYPosition,
-                  toZ: posY
-                },
-                animation3: {
-                  fromColor: _classPrivateFieldLooseBase(_this, _getPreviousBinColor)[_getPreviousBinColor](id),
-                  toColor: markedColor
-                }
-              };
-              currentBinScales[count] = {
-                key: id,
-                scale: c,
-                color: markedColor
-              };
-            }
-
-            count++;
-          }
-        }
-
-        _classPrivateFieldLooseBase(_this, _previousBins)[_previousBins] = currentBinScales;
-        var normalAxis = [];
-        var reversedAxis = [];
-        count = 0;
-
-        for (var _iy = _classPrivateFieldLooseBase(_this, _yOffset)[_yOffset]; _iy <= maxYLength; _iy++) {
-          normalAxis[count] = _classPrivateFieldLooseBase(_this, _createAxisEntity)[_createAxisEntity](1500 + count, _classPrivateFieldLooseBase(_this, _xOffset)[_xOffset] - 2.5, 0, _iy - 1, 270, 180, 0, 2, 1, "" + (yLabels[_iy - 1] ? yLabels[_iy - 1].fString : Math.round((_classPrivateFieldLooseBase(_this, _labels)[_labels].yInitial + (_iy - 1) * _classPrivateFieldLooseBase(_this, _yWidth)[_yWidth] + Number.EPSILON) * 100) / 100), _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getAxisColor('z'), _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getSecondaryFontColor());
-          reversedAxis[count] = _classPrivateFieldLooseBase(_this, _createAxisEntity)[_createAxisEntity](3000 + count, maxXLength + 0.5, 0, _iy - 1, 270, 360, 0, 2, 1, "" + (yLabels[_iy - 1] ? yLabels[_iy - 1].fString : Math.round((_classPrivateFieldLooseBase(_this, _labels)[_labels].yInitial + (_iy - 1) * _classPrivateFieldLooseBase(_this, _yWidth)[_yWidth] + Number.EPSILON) * 100) / 100), _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getAxisColor('z'), _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getSecondaryFontColor());
-          count++;
-        }
-
-        elements.axisLabels[0] = {
-          id: 'leftLabel',
-          key: 4500 + _classPrivateFieldLooseBase(_this, _id)[_id],
-          text: {
-            value: yTitle,
-            color: _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getAxisColor('z')
-          },
-          rotation: {
-            x: 270,
-            y: 270,
-            z: 0
-          },
-          animation: {
-            fromX: _classPrivateFieldLooseBase(_this, _xOffset)[_xOffset] - 4 + _classPrivateFieldLooseBase(_this, _shift)[_shift].xOffset,
-            fromY: _classPrivateFieldLooseBase(_this, _shift)[_shift].zOffset,
-            fromZ: _classPrivateFieldLooseBase(_this, _yOffset)[_yOffset] + 0.5 + _classPrivateFieldLooseBase(_this, _shift)[_shift].yOffset,
-            toX: _classPrivateFieldLooseBase(_this, _xOffset)[_xOffset] - 4,
-            toY: 0,
-            toZ: _classPrivateFieldLooseBase(_this, _yOffset)[_yOffset] + 0.5
-          }
-        };
-        elements.axisLabels[1] = {
-          id: 'rightLabel',
-          key: 6001 + _classPrivateFieldLooseBase(_this, _id)[_id],
-          text: {
-            value: yTitle,
-            color: _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getAxisColor('z')
-          },
-          rotation: {
-            x: 270,
-            y: 90,
-            z: 0
-          },
-          animation: {
-            fromX: maxXLength + 2 + _classPrivateFieldLooseBase(_this, _shift)[_shift].xOffset,
-            fromY: _classPrivateFieldLooseBase(_this, _shift)[_shift].zOffset,
-            fromZ: maxYLength - 2.5 + _classPrivateFieldLooseBase(_this, _shift)[_shift].yOffset,
-            toX: maxXLength + 2,
-            toY: 0,
-            toZ: maxYLength - 2.5
-          }
-        };
-
-        for (var _ix2 = _classPrivateFieldLooseBase(_this, _xOffset)[_xOffset]; _ix2 <= maxXLength; _ix2++) {
-          normalAxis[count] = _classPrivateFieldLooseBase(_this, _createAxisEntity)[_createAxisEntity](7500 + count, _ix2 - 1, 0, _classPrivateFieldLooseBase(_this, _yOffset)[_yOffset] - 2.5, 270, 270, 0, 2, 1, "" + (xLabels[_ix2 - 1] ? xLabels[_ix2 - 1].fString : Math.round((_classPrivateFieldLooseBase(_this, _labels)[_labels].xInitial + (_ix2 - 1) * _classPrivateFieldLooseBase(_this, _xWidth)[_xWidth] + Number.EPSILON) * 100) / 100), _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getAxisColor('x'), _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getSecondaryFontColor());
-          reversedAxis[count] = _classPrivateFieldLooseBase(_this, _createAxisEntity)[_createAxisEntity](9000 + count, _ix2 - 1, 0, maxYLength + 0.5, 270, 90, 0, 2, 1, "" + (xLabels[_ix2 - 1] ? xLabels[_ix2 - 1].fString : Math.round((_classPrivateFieldLooseBase(_this, _labels)[_labels].xInitial + (_ix2 - 1) * _classPrivateFieldLooseBase(_this, _xWidth)[_xWidth] + Number.EPSILON) * 100) / 100), _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getAxisColor('x'), _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getSecondaryFontColor());
-          count++;
-        }
-
-        elements.axisLabels[2] = {
-          id: 'downLabel',
-          key: 10502 + _classPrivateFieldLooseBase(_this, _id)[_id],
-          text: {
-            value: xTitle,
-            color: _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getAxisColor('x')
-          },
-          rotation: {
-            x: 270,
-            y: 180,
-            z: 0
-          },
-          animation: {
-            fromX: _classPrivateFieldLooseBase(_this, _xOffset)[_xOffset] + _classPrivateFieldLooseBase(_this, _shift)[_shift].xOffset,
-            fromY: _classPrivateFieldLooseBase(_this, _shift)[_shift].zOffset,
-            fromZ: _classPrivateFieldLooseBase(_this, _yOffset)[_yOffset] - 4 + _classPrivateFieldLooseBase(_this, _shift)[_shift].yOffset,
-            toX: _classPrivateFieldLooseBase(_this, _xOffset)[_xOffset],
-            toY: 0,
-            toZ: _classPrivateFieldLooseBase(_this, _yOffset)[_yOffset] - 4
-          }
-        };
-        elements.axisLabels[3] = {
-          id: 'upLabel',
-          key: 12003 + _classPrivateFieldLooseBase(_this, _id)[_id],
-          text: {
-            value: xTitle,
-            color: _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getAxisColor('x')
-          },
-          rotation: {
-            x: 270,
-            y: 0,
-            z: 0
-          },
-          animation: {
-            fromX: maxXLength - 2.5 + _classPrivateFieldLooseBase(_this, _shift)[_shift].xOffset,
-            fromY: _classPrivateFieldLooseBase(_this, _shift)[_shift].zOffset,
-            fromZ: maxYLength + 2 + _classPrivateFieldLooseBase(_this, _shift)[_shift].yOffset,
-            toX: maxXLength - 2.5,
-            toY: 0,
-            toZ: maxYLength + 2
-          }
-        };
-        normalAxis[count] = _classPrivateFieldLooseBase(_this, _createAxisEntity)[_createAxisEntity](13500 + count, maxXLength + 0.5, 0, maxYLength + 0.5, 270, 360, 0, 2, 2, "0", _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getAxisColor('y'), _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getSecondaryFontColor());
-        reversedAxis[count] = _classPrivateFieldLooseBase(_this, _createAxisEntity)[_createAxisEntity](15000 + count, maxXLength + 0.5, 0, _classPrivateFieldLooseBase(_this, _yOffset)[_yOffset] - 2.5, 270, 180, 0, 2, 2, "0", _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getAxisColor('y'), _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getSecondaryFontColor());
-        count++;
-        normalAxis[count] = _classPrivateFieldLooseBase(_this, _createAxisEntity)[_createAxisEntity](16500 + count, _classPrivateFieldLooseBase(_this, _xOffset)[_xOffset] - 2.5, 0, maxYLength + 0.5, 270, 180, 0, 2, 2, "0", _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getAxisColor('y'), _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getSecondaryFontColor());
-        reversedAxis[count] = _classPrivateFieldLooseBase(_this, _createAxisEntity)[_createAxisEntity](18000 + count, _classPrivateFieldLooseBase(_this, _xOffset)[_xOffset] - 2.5, 0, _classPrivateFieldLooseBase(_this, _yOffset)[_yOffset] - 2.5, 270, 180, 0, 2, 2, "0", _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getAxisColor('y'), _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getSecondaryFontColor());
-        count++;
-        elements.titles[0] = {
-          key: 195000 + _classPrivateFieldLooseBase(_this, _id)[_id],
-          text: {
-            value: _classPrivateFieldLooseBase(_this, _histogram)[_histogram].fTitle,
-            color: _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getPrimaryFontColor()
-          },
-          rotation: {
-            x: 0,
-            y: 123,
-            z: 0
-          },
-          position: {
-            x: _classPrivateFieldLooseBase(_this, _xOffset)[_xOffset] - 90,
-            y: 16.5,
-            z: _classPrivateFieldLooseBase(_this, _yOffset)[_yOffset] + 90
-          },
-          innerText: {
-            value: 'Press V to show projections or controls',
-            color: _classPrivateFieldLooseBase(_this, _themeProvider)[_themeProvider].getPrimaryFontColor()
-          }
-        };
-        count++;
-        var bannerWidthX = _classPrivateFieldLooseBase(_this, _range)[_range] > _classPrivateFieldLooseBase(_this, _xLimit)[_xLimit] ? _classPrivateFieldLooseBase(_this, _xLimit)[_xLimit] + 1 : _classPrivateFieldLooseBase(_this, _range)[_range];
-        var bannerWidthY = _classPrivateFieldLooseBase(_this, _range)[_range] > _classPrivateFieldLooseBase(_this, _yLimit)[_yLimit] ? _classPrivateFieldLooseBase(_this, _yLimit)[_yLimit] + 1 : _classPrivateFieldLooseBase(_this, _range)[_range];
-        elements.ground = {
-          key: 22500 + count + _classPrivateFieldLooseBase(_this, _id)[_id],
-          scale: {
-            width: bannerWidthX + 8,
-            height: 0.2,
-            depth: bannerWidthY + 8
-          },
-          animation: {
-            fromX: _classPrivateFieldLooseBase(_this, _xOffset)[_xOffset] + bannerWidthX * 0.5 - 1 + _classPrivateFieldLooseBase(_this, _shift)[_shift].xOffset,
-            fromY: -0.5,
-            fromZ: _classPrivateFieldLooseBase(_this, _yOffset)[_yOffset] + bannerWidthY * 0.5 - 0.5 + _classPrivateFieldLooseBase(_this, _shift)[_shift].yOffset,
-            toX: _classPrivateFieldLooseBase(_this, _xOffset)[_xOffset] + bannerWidthX * 0.5 - 1,
-            toY: -0.5,
-            toZ: _classPrivateFieldLooseBase(_this, _yOffset)[_yOffset] + bannerWidthY * 0.5 - 0.5
-          }
-        };
-        count++;
-        elements.banners[1] = {
-          key: 240000 + count + _classPrivateFieldLooseBase(_this, _id)[_id],
-          id: 'th-mapping',
-          geometry: {
-            width: 0.1,
-            height: 15,
-            depth: 22
-          },
-          position: {
-            x: maxXLength + 8,
-            y: 7,
-            z: _classPrivateFieldLooseBase(_this, _yOffset)[_yOffset] + _classPrivateFieldLooseBase(_this, _range)[_range] / 2 + 2.5
-          },
-          material: {
-            color: '#ffffff',
-            transparent: true
-          }
-        };
-        elements.labels = [].concat(normalAxis, reversedAxis);
-        return elements;
-      }
-    });
-    Object.defineProperty(this, _optimizeBinContent, {
-      writable: true,
-      value: function value(binContent, maxContent) {
-        if (binContent <= 0) return 0;
-
-        if (maxContent > 1) {
-          binContent = Math.round((binContent / maxContent + Number.EPSILON) * 100) / 100;
-        }
-
-        return binContent;
-      }
-    });
-    Object.defineProperty(this, _getValidOffset, {
-      writable: true,
-      value: function value(limits, offsets, increment, axisOffset, defaultRange) {
-        _classPrivateFieldLooseBase(_this, _shift)[_shift] = {
-          xOffset: 0,
-          yOffset: 0,
-          zOffset: 0
-        };
-
-        if (increment) {
-          if (defaultRange) {
-            offsets[axisOffset] += 1;
-            _classPrivateFieldLooseBase(_this, _shift)[_shift][axisOffset] = -1;
-          } else {
-            offsets[axisOffset] += offsets.range;
-            _classPrivateFieldLooseBase(_this, _shift)[_shift][axisOffset] = -offsets.range;
-          }
-
-          if (limits[axisOffset] <= offsets.range) {
-            offsets[axisOffset] = 1;
-            _classPrivateFieldLooseBase(_this, _shift)[_shift][axisOffset] = 0;
-            return offsets;
-          }
-
-          if (offsets[axisOffset] > limits[axisOffset] - offsets.range) {
-            offsets[axisOffset] = limits[axisOffset] - offsets.range;
-            _classPrivateFieldLooseBase(_this, _shift)[_shift][axisOffset] = 0;
-            return offsets;
-          }
-        } else {
-          if (defaultRange) {
-            offsets[axisOffset] -= 1;
-            _classPrivateFieldLooseBase(_this, _shift)[_shift][axisOffset] = 1;
-          } else {
-            offsets[axisOffset] -= offsets.range;
-            _classPrivateFieldLooseBase(_this, _shift)[_shift][axisOffset] = offsets.range;
-          }
-
-          if (offsets[axisOffset] < 1) {
-            offsets[axisOffset] = 1;
-            _classPrivateFieldLooseBase(_this, _shift)[_shift][axisOffset] = 0;
-            return offsets;
-          }
-        }
-
-        return offsets;
-      }
-    });
-    Object.defineProperty(this, _editTH3OffsetByOffset, {
-      writable: true,
-      value: function value(axisOffset, increment, defaultRange) {
-        var limits = {
-          xOffset: _classPrivateFieldLooseBase(_this, _xLimit)[_xLimit],
-          yOffset: _classPrivateFieldLooseBase(_this, _yLimit)[_yLimit],
-          zOffset: _classPrivateFieldLooseBase(_this, _zLimit)[_zLimit]
-        };
-        var offsets = {
-          name: 'TH3',
-          xOffset: _classPrivateFieldLooseBase(_this, _xOffset)[_xOffset],
-          yOffset: _classPrivateFieldLooseBase(_this, _yOffset)[_yOffset],
-          zOffset: _classPrivateFieldLooseBase(_this, _zOffset)[_zOffset],
-          range: _classPrivateFieldLooseBase(_this, _range)[_range]
-        };
-
-        var result = _classPrivateFieldLooseBase(_this, _getValidOffset)[_getValidOffset](limits, offsets, increment, axisOffset, defaultRange);
-
-        _classPrivateFieldLooseBase(_this, _xOffset)[_xOffset] = result.xOffset;
-        _classPrivateFieldLooseBase(_this, _yOffset)[_yOffset] = result.yOffset;
-        _classPrivateFieldLooseBase(_this, _zOffset)[_zOffset] = result.zOffset;
-        return result;
-      }
-    });
-    Object.defineProperty(this, _projectionFunction, {
-      writable: true,
-      value: function value(projectionFunction, xMin, yMin) {
-        if (projectionFunction === 'feet' && _classPrivateFieldLooseBase(_this, _projections)[_projections] !== null) {
-          var xIndex = xMin / _classPrivateFieldLooseBase(_this, _xWidth)[_xWidth];
-
-          var yIndex = yMin / _classPrivateFieldLooseBase(_this, _yWidth)[_yWidth];
-
-          try {
-            var projectionHistogram = _classPrivateFieldLooseBase(_this, _projections)[_projections].fFolders.arr[xIndex].fFolders.arr[yIndex].fFolders.arr[0];
-
-            var LineColor = projectionHistogram.fFunctions.arr[0].fLineColor;
-
-            if (LineColor === 600) {
-              return 'blue';
-            } else if (LineColor === 632) {
-              return 'red';
-            }
-          } catch (e) {
-            return '';
-          }
-        }
-
-        return '';
-      }
-    });
-    Object.defineProperty(this, _editTH2OffsetByOffset, {
-      writable: true,
-      value: function value(axisOffset, increment, defaultRange) {
-        var limits = {
-          xOffset: _classPrivateFieldLooseBase(_this, _xLimit)[_xLimit],
-          yOffset: _classPrivateFieldLooseBase(_this, _yLimit)[_yLimit]
-        };
-        var offsets = {
-          name: 'TH2',
-          xOffset: _classPrivateFieldLooseBase(_this, _xOffset)[_xOffset],
-          yOffset: _classPrivateFieldLooseBase(_this, _yOffset)[_yOffset],
-          range: _classPrivateFieldLooseBase(_this, _range)[_range]
-        };
-
-        var result = _classPrivateFieldLooseBase(_this, _getValidOffset)[_getValidOffset](limits, offsets, increment, axisOffset, defaultRange);
-
-        _classPrivateFieldLooseBase(_this, _xOffset)[_xOffset] = result.xOffset;
-        _classPrivateFieldLooseBase(_this, _yOffset)[_yOffset] = result.yOffset;
-        return result;
-      }
-    });
-    Object.defineProperty(this, _getPreviousBinScales, {
-      writable: true,
-      value: function value(id) {
-        var previousBin = _classPrivateFieldLooseBase(_this, _previousBins)[_previousBins].filter(function (prevBin) {
-          return prevBin.key === id;
-        });
-
-        if (previousBin[0] && previousBin[0].scale) {
-          return previousBin[0].scale;
-        }
-
-        return 0;
-      }
-    });
-    Object.defineProperty(this, _getPreviousBinColor, {
-      writable: true,
-      value: function value(id) {
-        var previousBin = _classPrivateFieldLooseBase(_this, _previousBins)[_previousBins].filter(function (prevBin) {
-          return prevBin.key === id;
-        });
-
-        if (previousBin[0] && previousBin[0].scale) {
-          return previousBin[0].color;
-        }
-
-        return '#ffffff';
-      }
-    });
-    this.initializeFactory(uniqueName, histogram, section, range, projections, theme);
-  }
-
-  var _proto = HistogramReactFactory.prototype;
-
-  _proto.initializeFactory = function initializeFactory(uniqueName, histogram, section, range, projections, theme) {
-    this.setUniqueName(uniqueName);
-    this.setTheme(theme);
-    this.setHistogram(histogram, projections);
-    this.setSection(section);
-    this.setRange(range);
-  };
-
-  _proto.setUniqueName = function setUniqueName(uniqueName) {
-    _classPrivateFieldLooseBase(this, _id)[_id] = uniqueName;
-  };
-
-  _proto.setSection = function setSection(section) {
-    if (section !== null && section !== undefined) {
-      if (section.xOffset) _classPrivateFieldLooseBase(this, _xOffset)[_xOffset] = _classPrivateFieldLooseBase(this, _checkOffsetValue)[_checkOffsetValue](section.xOffset, _classPrivateFieldLooseBase(this, _xLimit)[_xLimit]);
-      if (section.yOffset) _classPrivateFieldLooseBase(this, _yOffset)[_yOffset] = _classPrivateFieldLooseBase(this, _checkOffsetValue)[_checkOffsetValue](section.yOffset, _classPrivateFieldLooseBase(this, _yLimit)[_yLimit]);
-    }
-
-    if (_classPrivateFieldLooseBase(this, _histogram)[_histogram]._typename.includes('TH3')) {
-      if (section !== null && section !== undefined) {
-        if (section.zOffset) _classPrivateFieldLooseBase(this, _zOffset)[_zOffset] = _classPrivateFieldLooseBase(this, _checkOffsetValue)[_checkOffsetValue](section.zOffset, _classPrivateFieldLooseBase(this, _zLimit)[_zLimit]);
-      }
-    }
-  };
-
-  _proto.setHistogram = function setHistogram(histogram, projections) {
-    _classPrivateFieldLooseBase(this, _projections)[_projections] = projections;
-    _classPrivateFieldLooseBase(this, _histogram)[_histogram] = histogram;
-    _classPrivateFieldLooseBase(this, _type)[_type] = histogram._typename;
-    _classPrivateFieldLooseBase(this, _xLimit)[_xLimit] = histogram.fXaxis.fNbins;
-    _classPrivateFieldLooseBase(this, _yLimit)[_yLimit] = histogram.fYaxis.fNbins;
-    _classPrivateFieldLooseBase(this, _xWidth)[_xWidth] = (histogram.fXaxis.fXmax - histogram.fXaxis.fXmin) / histogram.fXaxis.fNbins;
-    _classPrivateFieldLooseBase(this, _yWidth)[_yWidth] = (histogram.fYaxis.fXmax - histogram.fYaxis.fXmin) / histogram.fYaxis.fNbins;
-    _classPrivateFieldLooseBase(this, _labels)[_labels].xInitial = histogram.fXaxis.fXmin;
-    _classPrivateFieldLooseBase(this, _labels)[_labels].yInitial = histogram.fYaxis.fXmin;
-    _classPrivateFieldLooseBase(this, _xOffset)[_xOffset] = _classPrivateFieldLooseBase(this, _checkOffsetValue)[_checkOffsetValue](_classPrivateFieldLooseBase(this, _xOffset)[_xOffset], _classPrivateFieldLooseBase(this, _xLimit)[_xLimit]);
-    _classPrivateFieldLooseBase(this, _yOffset)[_yOffset] = _classPrivateFieldLooseBase(this, _checkOffsetValue)[_checkOffsetValue](_classPrivateFieldLooseBase(this, _yOffset)[_yOffset], _classPrivateFieldLooseBase(this, _yLimit)[_yLimit]);
-
-    if (histogram._typename.includes('TH3')) {
-      _classPrivateFieldLooseBase(this, _zLimit)[_zLimit] = histogram.fZaxis.fNbins;
-      _classPrivateFieldLooseBase(this, _zWidth)[_zWidth] = histogram.fZaxis.fXmax / histogram.fZaxis.fNbins;
-      _classPrivateFieldLooseBase(this, _labels)[_labels].zInitial = histogram.fZaxis.fXmin;
-      _classPrivateFieldLooseBase(this, _zOffset)[_zOffset] = _classPrivateFieldLooseBase(this, _checkOffsetValue)[_checkOffsetValue](_classPrivateFieldLooseBase(this, _zOffset)[_zOffset], _classPrivateFieldLooseBase(this, _zLimit)[_zLimit]);
-    }
-  };
-
-  _proto.setRange = function setRange(range) {
-    if (range) {
-      if (range < 4) _classPrivateFieldLooseBase(this, _range)[_range] = 4;
-      _classPrivateFieldLooseBase(this, _range)[_range] = range;
-    }
-  };
-
-  _proto.setTheme = function setTheme(theme) {
-    _classPrivateFieldLooseBase(this, _themeProvider)[_themeProvider] = new ThemeProvider(theme);
-  };
-
-  _proto.getElements = function getElements(projectionFunction) {
-    var elements = {};
-
-    if (_classPrivateFieldLooseBase(this, _type)[_type].includes('TH2')) {
-      elements = _classPrivateFieldLooseBase(this, _createTH2Histogram)[_createTH2Histogram](projectionFunction);
-    } else if (_classPrivateFieldLooseBase(this, _type)[_type].includes('TH3')) {
-      elements = _classPrivateFieldLooseBase(this, _createTH3Histogram)[_createTH3Histogram]();
-    }
-
-    return elements;
-  };
-
-  _proto.updateSection = function updateSection(axisOffset, increment, defaultRange) {
-    if (_classPrivateFieldLooseBase(this, _type)[_type].includes('TH3')) return _classPrivateFieldLooseBase(this, _editTH3OffsetByOffset)[_editTH3OffsetByOffset](axisOffset, increment, defaultRange);else if (_classPrivateFieldLooseBase(this, _type)[_type].includes('TH2')) return _classPrivateFieldLooseBase(this, _editTH2OffsetByOffset)[_editTH2OffsetByOffset](axisOffset, increment, defaultRange);
-  };
-
-  return HistogramReactFactory;
-}();
-
-var NdmVrHistogram3D = function NdmVrHistogram3D(_ref) {
-  var name = _ref.name,
-      histogram = _ref.histogram,
-      histoSection = _ref.histoSection,
-      projections = _ref.projections,
-      range = _ref.range,
-      theme = _ref.theme;
-  var subscription;
-
-  var _useState = React.useState(new HistogramReactFactory(name, histogram, histoSection || null, range, projections, theme || 'def')),
-      factory = _useState[0];
-
-  var _useState2 = React.useState('default'),
-      mode = _useState2[0],
-      setMode = _useState2[1];
-
-  var _useState3 = React.useState(factory.getElements(mode)),
-      elements = _useState3[0],
-      setElements = _useState3[1];
-
-  var _useState4 = React.useState(1),
-      binMarkState = _useState4[0],
-      setBinMarkState = _useState4[1];
-
-  var handleSubscription = function handleSubscription(data) {
-    if (histogram._typename.includes(data.name)) {
-      if (data.axis) {
-        factory.updateSection(data.axis, data.increment, data.defaultRange);
-        setElements(factory.getElements(mode));
-      } else if (data.binMarkMode) {
-        setBinMarkState(function (prevState) {
-          if (prevState + data.binMarkMode > 2) return 2;
-          if (prevState + data.binMarkMode < 1) return 1;
-          return prevState + data.binMarkMode;
-        });
-      } else {
-        setMode(function (prevState) {
-          return prevState !== data.fFunction ? data.fFunction : prevState;
-        });
-      }
-    }
-  };
-
-  React.useEffect(function () {
-    factory.setUniqueName(name);
-    setElements(factory.getElements(mode));
-  }, [name]);
-  React.useEffect(function () {
-    factory.setHistogram(histogram, projections);
-    setElements(factory.getElements(mode));
-  }, [histogram, projections]);
-  React.useEffect(function () {
-    factory.setSection(histoSection);
-    setElements(factory.getElements(mode));
-  }, [histoSection]);
-  React.useEffect(function () {
-    factory.setRange(range);
-    setElements(factory.getElements(mode));
-  }, [range]);
-  React.useEffect(function () {
-    factory.setTheme(theme);
-    setElements(factory.getElements(mode));
-  }, [theme]);
-  React.useEffect(function () {
-    setElements(factory.getElements(mode));
-  }, [mode]);
-  React.useEffect(function () {
-    if (histogram._typename.includes('TH2')) {
-      subscription = histogramTH2Service.getChangedSection().subscribe(handleSubscription);
-    } else if (histogram._typename.includes('TH3')) {
-      subscription = histogramTH3Service.getChangedSection().subscribe(handleSubscription);
-    }
-
-    return function () {
-      return subscription.unsubscribe();
-    };
-  }, [elements]);
-
-  if (elements !== null && elements !== void 0 && elements.bins) {
-    return /*#__PURE__*/React__default.createElement("a-entity", {
-      "histogram-control": true
-    }, elements.bins.map(function (bin) {
-      return /*#__PURE__*/React__default.createElement("a-box", {
-        key: bin.id,
-        "class": "clickable",
-        material: "color: " + bin.color + "; transparent: true",
-        binth: bin.binData,
-        mouseevent: true,
-        animation: "property: scale; from: " + bin.animation.fromWidth + " " + bin.animation.fromHeight + " " + bin.animation.fromDepth + "; to: " + bin.animation.toWidth + " " + bin.animation.toHeight + " " + bin.animation.toDepth + "; delay:100; dur: 1500; easing: linear;",
-        animation__1: "property: material.opacity; from: 0; to: 0.50; dur: 2000;",
-        animation__2: "property: position; from: " + bin.animation2.fromX + " " + bin.animation2.fromY + " " + bin.animation2.fromZ + "; to: " + bin.animation2.toX + " " + bin.animation2.toY + " " + bin.animation2.toZ + "; dur: 1000;",
-        animation__3: "property: material.color; from: " + bin.animation3.fromColor + "; to: " + bin.animation3.toColor + "; dur: 1600;"
-      }, /*#__PURE__*/React__default.createElement("a-text", {
-        value: bin.content,
-        align: "center",
-        width: "10",
-        color: "black",
-        geometry: "primitive:plane; width: 1; height: 1",
-        material: "color: " + bin.animation3.toColor + "; opacity: 0.50; transparent: true",
-        rotation: "270 180 0",
-        position: "0 " + (binMarkState === 1 ? -0.5 : 0.501) + " 0"
-      }));
-    }), elements.labels.map(function (label) {
-      return /*#__PURE__*/React__default.createElement("a-entity", {
-        key: label.key,
-        geometry: "primitive: " + label.geometry.primitive + "; width:" + label.geometry.width + "; height:" + label.geometry.height + ";",
-        text: "color: " + label.text.color + "; width: " + label.text.width + "; height: " + label.text.height + "; align:center;",
-        "label-handler": "value: " + label.labelHandler.value + "; delay:" + label.labelHandler.delay,
-        rotation: label.rotation.x + " " + label.rotation.y + " " + label.rotation.z,
-        material: "color: " + label.material.color + "; transparent: true",
-        animation: "property: text.width; from: 0; to: 4; dur: 1000;",
-        animation__1: "property: material.opacity; from: 0; to: 0.8; dur: 1500;",
-        animation__2: "property: position; from: " + label.animation.fromX + " " + label.animation.fromY + " " + label.animation.fromZ + "; to: " + label.animation.toX + " " + label.animation.toY + " " + label.animation.toZ + "; dur: 1005;"
-      });
-    }), elements.titles.map(function (title) {
-      return /*#__PURE__*/React__default.createElement("a-entity", {
-        key: title.key,
-        text: "value: " + title.text.value + "; color: " + title.text.color + "; width: 230; height:auto; align:center;",
-        rotation: title.rotation.x + " " + title.rotation.y + " " + title.rotation.z,
-        position: title.position.x + " " + title.position.y + " " + title.position.z,
-        material: "transparent: true"
-      }, /*#__PURE__*/React__default.createElement("a-text", {
-        value: title.innerText.value,
-        position: "0 10 0",
-        width: "150",
-        height: "auto",
-        align: "center",
-        color: title.innerText.color
-      }), /*#__PURE__*/React__default.createElement("a-entity", {
-        geometry: "primitive: plane; width:170; height:30;",
-        position: "0 0 -1",
-        material: "opacity: 0.9; color: white; transparent: true"
-      }));
-    }), elements.axisLabels.map(function (axisLabel) {
-      return /*#__PURE__*/React__default.createElement("a-entity", {
-        id: axisLabel.id,
-        key: axisLabel.key,
-        text: "value: " + axisLabel.text.value + "; color: " + axisLabel.text.color + "; width: 10; height:auto; align:center;",
-        rotation: axisLabel.rotation.x + " " + axisLabel.rotation.y + " " + axisLabel.rotation.z,
-        animation: "property: position; from: " + axisLabel.animation.fromX + " " + axisLabel.animation.fromY + " " + axisLabel.animation.fromZ + "; to: " + axisLabel.animation.toX + " " + axisLabel.animation.toY + " " + axisLabel.animation.toZ + "; dur: 1000;",
-        material: "opacity: 0; transparent: true"
-      });
-    }), elements.ground && /*#__PURE__*/React__default.createElement("a-box", {
-      key: elements.ground.key,
-      width: elements.ground.scale.width,
-      material: "color: #fafafa",
-      height: elements.ground.scale.height,
-      depth: elements.ground.scale.depth,
-      animation: "property: position; from: " + elements.ground.animation.fromX + " " + elements.ground.animation.fromY + " " + elements.ground.animation.fromZ + ";\n         to:\n         " + elements.ground.animation.toX + " " + elements.ground.animation.toY + " " + elements.ground.animation.toZ + "; dur: 1000;"
-    }), elements.banners.map(function (banner) {
-      return /*#__PURE__*/React__default.createElement("a-box", {
-        key: banner.key,
-        id: banner.id,
-        geometry: "width:" + banner.geometry.width + "; height:" + banner.geometry.height + "; depth:" + banner.geometry.depth + ";",
-        position: banner.position.x + " " + banner.position.y + " " + banner.position.z,
-        material: "color: " + banner.material.color + ", transparent: " + banner.material.transparent
-      });
-    }));
-  } else {
-    return /*#__PURE__*/React__default.createElement("a-box", {
-      animation__1: "property: rotation; to: 0 180 360; dur: 10000; easing: linear; loop: true",
-      animation__2: "property: scale; from: 1 1 1; to: 10 10 10; dur: 15000; timeout: 15000; loop: true; easing: linear; dir: alternate",
-      animation__color: "property: material.color; from: #003682; to: #7d0002; dur: 80000: easing: linear: loop: true; dir: alternate",
-      position: "0 1.5 -2"
-    });
-  }
-};
-
-function NdmVrLaboratory() {
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("a-sky", {
-    color: "#dbf0fe"
-  }), /*#__PURE__*/React__default.createElement("a-plane", {
-    rotation: "-90 0 0",
-    position: "0 -0.5 0",
-    width: "1000",
-    height: "1000",
-    color: "#aaa",
-    material: "shader:flat;"
-  }));
-}
-
-var Controller = function Controller(_ref) {
-  var socket = _ref.socket;
-
-  var _useState = React.useState(0),
-      time = _useState[0],
-      setTime = _useState[1];
-
-  React.useEffect(function () {
-    var camera = document.getElementById('camera');
-    var absolutePosition = new THREE.Vector3();
-    var rotationQuaternion = new THREE.Quaternion();
-    camera.object3D.getWorldPosition(absolutePosition);
-    var id = socket.id;
-    var interval = setInterval(function () {
-      camera.object3D.getWorldPosition(absolutePosition);
-      camera.object3D.getWorldQuaternion(rotationQuaternion);
-      socket.emit('move', {
-        id: id,
-        position: absolutePosition.toArray(),
-        rotation: rotationQuaternion.toArray()
-      });
-      setTime(function (prevTime) {
-        return prevTime + 1;
-      });
-    }, 10);
-    return function () {
-      return clearInterval(interval);
-    };
-  }, [time]);
-  return /*#__PURE__*/React__default.createElement("a-entity", null);
-};
-
-var UserWrapper = function UserWrapper(_ref) {
-  var position = _ref.position,
-      rotation = _ref.rotation,
-      id = _ref.id;
-  React.useEffect(function () {
-    var quaternionToApply = new THREE.Quaternion().fromArray(rotation);
-    var user = document.getElementById(id).object3D;
-    user.setRotationFromQuaternion(quaternionToApply);
-  }, [rotation]);
-  return /*#__PURE__*/React__default.createElement("a-box", {
-    position: position,
-    id: id,
-    color: "#4CC3D9"
-  });
-};
-
-var NetworkingComponent = function NetworkingComponent(_ref) {
-  var socketClient = _ref.socketClient,
-      clients = _ref.clients;
-  return /*#__PURE__*/React__default.createElement("a-entity", null, /*#__PURE__*/React__default.createElement(Controller, {
-    socket: socketClient
-  }), Object.keys(clients).filter(function (clientKey) {
-    return clientKey !== socketClient.id;
-  }).map(function (client) {
-    var _clients$client = clients[client],
-        position = _clients$client.position,
-        rotation = _clients$client.rotation;
-    var positionParse = position.join(' ');
-    return /*#__PURE__*/React__default.createElement(UserWrapper, {
-      key: client,
-      id: client,
-      position: positionParse,
-      rotation: rotation
-    });
-  }));
-};
-
-var NdmVrShared = function NdmVrShared() {
-  var _useState = React.useState(0),
-      socketClient = _useState[0],
-      setSocketClient = _useState[1];
-
-  var _useState2 = React.useState({}),
-      clients = _useState2[0],
-      setClients = _useState2[1];
-
-  React.useEffect(function () {
-    setSocketClient(socket_ioClient.io.connect('http://localhost:3001'));
-    return function () {
-      if (socketClient) socketClient.disconnect();
-    };
-  }, []);
-  React.useEffect(function () {
-    if (socketClient) {
-      socketClient.on('move', function (clients) {
-        setClients(clients);
-      });
-    }
-  }, [socketClient]);
-  return socketClient && /*#__PURE__*/React__default.createElement(NetworkingComponent, {
-    socketClient: socketClient,
-    clients: clients
-  });
-};
-
-var NdmVrScene = function NdmVrScene(_ref) {
-  var data = _ref.data,
-      info = _ref.info;
-  return /*#__PURE__*/React__default.createElement("a-scene", {
-    embedded: true,
-    style: {
-      zIndex: '1',
-      width: '100%',
-      minHeight: 'calc(90vh)'
-    }
-  }, /*#__PURE__*/React__default.createElement("a-assets", null, /*#__PURE__*/React__default.createElement("img", {
-    id: "skyTexture",
-    src: info.background.url,
-    alt: "background"
-  })), /*#__PURE__*/React__default.createElement(NdmVrLaboratory, null), /*#__PURE__*/React__default.createElement(NdmVrCamera, null), /*#__PURE__*/React__default.createElement(NdmVrHistogram3D, {
-    name: info.name,
-    histogram: data.histogram,
-    histoSection: data.section,
-    projections: data.projections,
-    range: data.range,
-    theme: info.theme
-  }), /*#__PURE__*/React__default.createElement(NdmVrShared, null));
-};
-
-var EntityBuilder = /*#__PURE__*/function () {
-  function EntityBuilder(model) {
-    this.model = null;
-    this.model = model;
-  }
-
-  var _proto = EntityBuilder.prototype;
-
-  _proto.updateElement = function updateElement(count, histogramElm, element, entityType) {
-    if (this.model[element].elements[count]) {
-      if (element === 'titles') {
-        this.createTitle(this.model[element].elements[count], this.model[element].attributes[count]);
-      } else {
-        this.createElement(this.model[element].elements[count], this.model[element].attributes[count], entityType);
-      }
-    } else {
-      var newElement;
-
-      if (element === 'titles') {
-        newElement = this.createTitle(undefined, this.model[element].attributes[count]);
-      } else {
-        newElement = this.createElement(undefined, this.model[element].attributes[count], entityType);
-      }
-
-      this.model[element].elements[count] = newElement;
-      histogramElm.appendChild(newElement);
-    }
-  };
-
-  _proto.deleteUnnecessaryElements = function deleteUnnecessaryElements(count, element) {
-    var newLength = count;
-
-    if (element.length === 1) {
-      while (this.model[element[0]].elements[count]) {
-        this.model[element[0]].elements[count].remove();
-        count++;
-      }
-
-      this.model[element[0]].elements.length = newLength;
-      this.model[element[0]].attributes.length = newLength;
-    } else {
-      while (this.model[element[0]].elements[count]) {
-        this.model[element[0]].elements[count].remove();
-        this.model[element[1]].elements[count].remove();
-        count++;
-      }
-
-      this.model[element[0]].elements.length = newLength;
-      this.model[element[0]].attributes.length = newLength;
-      this.model[element[1]].elements.length = newLength;
-      this.model[element[1]].attributes.length = newLength;
-    }
-  };
-
-  _proto.createElement = function createElement(Element, data, type) {
-    var element = Element;
-
-    if (element === undefined || element === null) {
-      var entityType = this.checkEntityType(type);
-      element = document.createElement(entityType);
-    }
-
-    for (var feature in data) {
-      element.setAttribute(feature, data[feature]);
-    }
-
-    return element;
-  };
-
-  _proto.createBannerElement = function createBannerElement(Element, linesCount, data) {
-    var parent = Element;
-
-    if (parent === undefined || parent === null) {
-      parent = document.createElement('a-entity');
-      var array = this.createBannerLines(linesCount, data);
-      array.map(function (element) {
-        return parent.append(element);
-      });
-    }
-
-    parent.setAttribute('position', data.position);
-    parent.setAttribute('id', data.id);
-    return parent;
-  };
-
-  _proto.createBannerLines = function createBannerLines(linesCount, data) {
-    var array = [];
-
-    for (var i = linesCount - 1; i > -1; i--) {
-      data.line.position.y = 2 * i;
-      var line = document.createElement('a-entity');
-      line.setAttribute('rotation', data.line.rotation);
-      line.setAttribute('position', data.line.position);
-      line.setAttribute('text', data.line.text);
-      array.push(line);
-    }
-
-    var background = document.createElement('a-entity');
-    background.setAttribute('geometry', data.background.geometry);
-    background.setAttribute('position', data.background.position);
-    background.setAttribute('material', data.background.material);
-    array.push(background);
-    return array;
-  };
-
-  _proto.createTitle = function createTitle(Element, data) {
-    var parent = Element;
-
-    if (parent === undefined || parent === null) {
-      parent = document.createElement('a-entity');
-      var child = this.createElement(undefined, data.background);
-      parent.appendChild(child);
-    }
-
-    delete data.background;
-    return this.createElement(parent, data);
-  };
-
-  _proto.checkEntityType = function checkEntityType(type) {
-    if (type === 'a-box' || type === 'a-sphere' || type === 'a-text' || type === 'a-circle' || type === 'a-text') {
-      return type;
-    } else {
-      return 'a-entity';
-    }
-  };
-
-  return EntityBuilder;
-}();
-
-var EntityTemplate = /*#__PURE__*/function () {
-  function EntityTemplate() {}
-
-  var _proto = EntityTemplate.prototype;
-
-  _proto.bannerTemplate = function bannerTemplate(data, lineData, backgroundData) {
-    var position = {
-      x: data.positionX,
-      y: data.positionY,
-      z: data.positionZ
-    };
-    var id = data.id;
-    var background = this.bannerBackgroundTemplate(backgroundData);
-    var line = this.lineTemplate(lineData);
-    return {
-      position: position,
-      id: id,
-      background: background,
-      line: line
-    };
-  };
-
-  _proto.binTemplate = function binTemplate(data) {
-    var position = {
-      x: data.positionX,
-      y: data.positionY,
-      z: data.positionZ
-    };
-    var scale = {
-      x: data.scaleX,
-      y: data.scaleY,
-      z: data.scaleZ
-    };
-    var material = {
-      color: data.color,
-      opacity: 0.75
-    };
-    var clas = data["class"];
-    var binTh2 = data.data;
-    var id = data.id;
-    return {
-      position: position,
-      scale: scale,
-      material: material,
-      id: id,
-      "class": clas,
-      binth2: binTh2,
-      mouseevent: ''
-    };
-  };
-
-  _proto.labelTemplate = function labelTemplate(data) {
-    var position = {
-      x: data.positionX,
-      y: data.positionY,
-      z: data.positionZ
-    };
-    var rotation = {
-      x: data.rotationX,
-      y: data.rotationY,
-      z: data.rotationZ
-    };
-    var geometry = {
-      primitive: 'plane',
-      width: 4,
-      height: 1
-    };
-    var text = {
-      value: data.value,
-      color: data.color,
-      width: 10,
-      height: 'auto',
-      align: 'center'
-    };
-    var material = {
-      opacity: 0
-    };
-    var id = data.id;
-    return {
-      position: position,
-      rotation: rotation,
-      geometry: geometry,
-      text: text,
-      material: material,
-      id: id
-    };
-  };
-
-  _proto.axisTemplate = function axisTemplate(data) {
-    var position = {
-      x: data.positionX,
-      y: data.positionY,
-      z: data.positionZ
-    };
-    var rotation = {
-      x: data.rotationX,
-      y: data.rotationY,
-      z: data.rotationZ
-    };
-    var geometry = {
-      primitive: 'plane',
-      width: data.width,
-      height: data.height
-    };
-    var text = {
-      value: data.value,
-      color: 'black',
-      width: 4,
-      height: 'auto',
-      align: 'center'
-    };
-    var material = {
-      color: data.color,
-      opacity: 0.8
-    };
-    return {
-      position: position,
-      rotation: rotation,
-      geometry: geometry,
-      text: text,
-      material: material
-    };
-  };
-
-  _proto.titleTemplate = function titleTemplate(data, textData) {
-    var position = {
-      x: data.positionX,
-      y: data.positionY,
-      z: data.positionZ
-    };
-    var rotation = {
-      x: data.rotationX,
-      y: data.rotationY,
-      z: data.rotationZ
-    };
-    var material = {
-      opacity: 0
-    };
-    var text = {
-      value: data.title,
-      color: data.color,
-      width: 230,
-      height: 'auto',
-      align: 'center'
-    };
-    var back = this.titleTextTemplate(textData);
-    return {
-      position: position,
-      rotation: rotation,
-      material: material,
-      text: text,
-      background: back
-    };
-  };
-
-  _proto.titleTextTemplate = function titleTextTemplate(data) {
-    var geometry = {
-      primitive: 'plane',
-      width: data.width,
-      height: data.height
-    };
-    var position = {
-      x: data.positionX,
-      y: data.positionY,
-      z: data.positionZ
-    };
-    var material = {
-      color: data.color,
-      opacity: 0.6
-    };
-    return {
-      position: position,
-      geometry: geometry,
-      material: material
-    };
-  };
-
-  _proto.lineTemplate = function lineTemplate(data) {
-    var position = {
-      x: data.positionX,
-      y: data.positionY,
-      z: data.positionZ
-    };
-    var rotation = {
-      x: data.rotationX,
-      y: data.rotationY,
-      z: data.rotationZ
-    };
-    var text = {
-      value: '',
-      width: 14,
-      height: 'auto',
-      align: 'center'
-    };
-    return {
-      position: position,
-      rotation: rotation,
-      text: text
-    };
-  };
-
-  _proto.bannerBackgroundTemplate = function bannerBackgroundTemplate(data) {
-    var position = {
-      x: data.positionX,
-      y: data.positionY,
-      z: data.positionZ
-    };
-    var geometry = {
-      primitive: 'box',
-      width: data.width,
-      height: data.height,
-      depth: data.depth
-    };
-    var material = {
-      color: data.color
-    };
-    return {
-      position: position,
-      geometry: geometry,
-      material: material
-    };
-  };
-
-  return EntityTemplate;
-}();
-
-var selectedBins = [];
-
-function checkBinState(binId) {
-  var updatedArray = selectedBins.filter(function (item) {
-    return item.id === binId;
-  });
-  return updatedArray.length !== 0;
-}
-
-function createTH2Histogram(Element, model, histogram, xOffset, yOffset, range, theme) {
-  selectedBins = localStorageService.getBinsFromLocalStorage();
-  var entityTemplate = new EntityTemplate();
-  var entityBuilder = new EntityBuilder(model);
-  var themeProvider = new ThemeProvider(theme);
-  var data = {};
-  var histogramElm = Element;
-  var centeredYPosition;
-  var xcenter, xmin, xmax, xwidth;
-  var ycenter, ymin, ymax, ywidth;
-  var c;
-  var binName = '';
-  var absoluteContent;
-  var count = 0;
-  var maxXLength = xOffset + range > histogram.fXaxis.fXmax ? histogram.fXaxis.fXmax : xOffset + range;
-  var maxYLength = yOffset + range > histogram.fYaxis.fXmax ? histogram.fYaxis.fXmax : yOffset + range;
-  var xTitle = histogram.fXaxis.fTitle;
-  var yTitle = histogram.fYaxis.fTitle;
-  var xLabels = histogram.fXaxis.fLabels ? histogram.fXaxis.fLabels.arr : [];
-  var yLabels = histogram.fYaxis.fLabels ? histogram.fYaxis.fLabels.arr : [];
-
-  for (var iy = yOffset; iy <= maxYLength; iy++) {
-    for (var ix = xOffset; ix <= maxXLength; ix++) {
-      xcenter = histogram.fXaxis.GetBinCenter(ix);
-      xmin = histogram.fXaxis.GetBinLowEdge(ix);
-      xmax = xcenter + (xcenter - xmin);
-      xwidth = xmax - xmin;
-      ycenter = histogram.fYaxis.GetBinCenter(iy);
-      ymin = histogram.fYaxis.GetBinLowEdge(iy);
-      ymax = ycenter + (ycenter - ymin);
-      ywidth = ymax - ymin;
-      absoluteContent = histogram.getBinContent(ix, iy);
-      c = optimizeBinContent(absoluteContent, histogram.fMaximum);
-      centeredYPosition = c / 2;
-
-      if (c > 0) {
-        var color = themeProvider.getBinColor(c);
-        var id = xmin + 'th2' + xmax + 'th2' + ymin + 'th2' + ymax;
-        var markedColor = void 0;
-
-        if (checkBinState(id)) {
-          markedColor = themeProvider.getSecondaryAccentColor();
-        } else {
-          markedColor = color;
-        }
-
-        var binData = "id: " + id + ";\n         content: " + c + ";\n         color: " + color + ";\n         yTitle: " + yTitle + ";\n         xTitle: " + xTitle + ";\n         absoluteContent: " + absoluteContent + ";\n         binName: " + binName + ";\n         xMin: " + xmin + ";\n         yMin: " + ymin + ";\n         xMax: " + xmax + ";\n         yMax: " + ymax + ";\n         xCenter: " + xcenter + ";\n         yCenter: " + ycenter + ";\n         xWidth: " + xwidth + ";\n         yWidth: " + ywidth + ";\n         markedColor: " + markedColor + ";\n         selectColor: " + themeProvider.getSecondaryAccentColor() + ";\n         axisX: " + themeProvider.getAxisColor('x') + ";\n         axisY: " + themeProvider.getAxisColor('y') + ";\n         axisZ: " + themeProvider.getAxisColor('z');
-        data.id = id;
-        data.positionX = xmin;
-        data.positionY = centeredYPosition;
-        data.positionZ = ymin;
-        data.scaleX = xwidth / 2;
-        data.scaleY = c;
-        data.scaleZ = ywidth / 2;
-        data.color = markedColor;
-        data["class"] = 'clickable';
-        data.data = binData;
-        model.bins.attributes[count] = entityTemplate.binTemplate(data);
-        entityBuilder.updateElement(count, histogramElm, 'bins', 'a-box');
-        count++;
-      }
-    }
-  }
-
-  entityBuilder.deleteUnnecessaryElements(count, ['bins']);
-  data.id = 1500 + count;
-  data.positionX = maxXLength + 0.5;
-  data.positionY = 0;
-  data.positionZ = maxYLength + 0.5;
-  data.rotationX = 270;
-  data.rotationY = 360;
-  data.rotationZ = 0;
-  data.width = 2;
-  data.height = 2;
-  data.value = "0";
-  data.color = themeProvider.getAxisColor('y');
-  model.normalXAxis.attributes[0] = entityTemplate.axisTemplate(data);
-  entityBuilder.updateElement(0, histogramElm, 'normalXAxis', 'a-entity');
-  data.positionZ = yOffset - 2.5;
-  data.rotationX = 270;
-  data.rotationY = 180;
-  model.reversedYAxis.attributes[0] = entityTemplate.axisTemplate(data);
-  entityBuilder.updateElement(0, histogramElm, 'reversedYAxis', 'a-entity');
-  data.positionX = xOffset - 2.5;
-  data.positionZ = maxYLength + 0.5;
-  model.normalYAxis.attributes[0] = entityTemplate.axisTemplate(data);
-  entityBuilder.updateElement(0, histogramElm, 'normalYAxis', 'a-entity');
-  data.positionZ = yOffset - 2.5;
-  data.rotationY = 180;
-  model.reversedXAxis.attributes[0] = entityTemplate.axisTemplate(data);
-  entityBuilder.updateElement(0, histogramElm, 'reversedXAxis', 'a-entity');
-  count = 1;
-
-  for (var _iy = yOffset; _iy <= maxYLength; _iy++) {
-    data.id = 1500 + count;
-    data.positionX = xOffset - 2.5;
-    data.positionY = 0;
-    data.positionZ = _iy - 1;
-    data.rotationX = 270;
-    data.rotationY = 180;
-    data.rotationZ = 0;
-    data.width = 2;
-    data.height = 1;
-    data.value = "" + (yLabels[_iy - 1] ? yLabels[_iy - 1].fString : _iy - 1);
-    data.color = themeProvider.getAxisColor('z');
-    model.normalYAxis.attributes[count] = entityTemplate.axisTemplate(data);
-    entityBuilder.updateElement(count, histogramElm, 'normalYAxis', 'a-entity');
-    data.id = 4500 + count;
-    data.positionX = maxXLength + 0.5;
-    data.rotationY = 360;
-    data.value = "" + (yLabels[_iy - 1] ? yLabels[_iy - 1].fString : _iy - 1);
-    model.reversedYAxis.attributes[count] = entityTemplate.axisTemplate(data);
-    entityBuilder.updateElement(count, histogramElm, 'reversedYAxis', 'a-entity');
-    count++;
-  }
-
-  entityBuilder.deleteUnnecessaryElements(count, ['normalYAxis', 'reversedYAxis']);
-  count = 1;
-
-  for (var _ix = xOffset; _ix <= maxXLength; _ix++) {
-    data.id = 1500 + count;
-    data.positionX = _ix - 1;
-    data.positionY = 0;
-    data.positionZ = yOffset - 2.5;
-    data.rotationX = 270;
-    data.rotationY = 270;
-    data.rotationZ = 0;
-    data.width = 2;
-    data.height = 1;
-    data.value = "" + (xLabels[_ix - 1] ? xLabels[_ix - 1].fString : _ix - 1);
-    data.color = themeProvider.getAxisColor('x');
-    model.normalXAxis.attributes[count] = entityTemplate.axisTemplate(data);
-    entityBuilder.updateElement(count, histogramElm, 'normalXAxis', 'a-entity');
-    data.id = 4500 + count;
-    data.positionZ = maxYLength + 0.5;
-    data.rotationX = 270;
-    data.rotationY = 90;
-    data.value = "" + (xLabels[_ix - 1] ? xLabels[_ix - 1].fString : _ix - 1);
-    model.reversedXAxis.attributes[count] = entityTemplate.axisTemplate(data);
-    entityBuilder.updateElement(count, histogramElm, 'reversedXAxis', 'a-entity');
-    count++;
-  }
-
-  entityBuilder.deleteUnnecessaryElements(count, ['normalXAxis', 'reversedXAxis']);
-  data.positionX = xOffset;
-  data.positionY = 0;
-  data.positionZ = yOffset - 4;
-  data.rotationX = 270;
-  data.rotationY = 180;
-  data.rotationZ = 0;
-  data.width = 4;
-  data.height = 1;
-  data.value = xTitle;
-  data.id = 'downLabel';
-  model.labels.attributes[0] = entityTemplate.labelTemplate(data);
-  entityBuilder.updateElement(0, histogramElm, 'labels', 'a-entity');
-  data.positionX = maxXLength - 2.5;
-  data.positionZ = maxYLength + 2;
-  data.rotationY = 0;
-  data.id = 'upLabel';
-  model.labels.attributes[1] = entityTemplate.labelTemplate(data);
-  entityBuilder.updateElement(1, histogramElm, 'labels', 'a-entity');
-  data.positionX = xOffset - 4;
-  data.positionY = 0;
-  data.positionZ = yOffset + 0.5;
-  data.rotationX = 270;
-  data.rotationY = 270;
-  data.rotationZ = 0;
-  data.width = 4;
-  data.height = 1;
-  data.value = yTitle;
-  data.color = themeProvider.getAxisColor('z');
-  data.id = 'leftLabel';
-  model.labels.attributes[2] = entityTemplate.labelTemplate(data);
-  entityBuilder.updateElement(2, histogramElm, 'labels', 'a-entity');
-  data.positionX = maxXLength + 2;
-  data.positionZ = maxYLength - 2.5;
-  data.rotationX = 270;
-  data.rotationY = 90;
-  data.id = 'rightLabel';
-  model.labels.attributes[3] = entityTemplate.labelTemplate(data);
-  entityBuilder.updateElement(3, histogramElm, 'labels', 'a-entity');
-  data.positionX = xOffset - 90;
-  data.positionY = -6.5;
-  data.positionZ = yOffset + 90;
-  data.rotationX = 0;
-  data.rotationY = 123;
-  data.rotationZ = 0;
-  data.title = histogram.fTitle;
-  data.color = themeProvider.getPrimaryFontColor();
-  var back = {};
-  back.positionX = 0;
-  back.positionY = 0;
-  back.positionZ = -1;
-  back.width = 170;
-  back.height = 30;
-  back.color = 'white';
-  model.titles.attributes[0] = entityTemplate.titleTemplate(data, back);
-  entityBuilder.updateElement(0, histogramElm, 'titles', 'a-entity');
-  data.positionX = xOffset + 120;
-  data.positionZ = yOffset - 70;
-  data.rotationY = 330;
-  data.title = histogram.fName;
-  model.titles.attributes[1] = entityTemplate.titleTemplate(data, back);
-  entityBuilder.updateElement(1, histogramElm, 'titles', 'a-entity');
-}
-
-var optimizeBinContent = function optimizeBinContent(binContent, maxContent) {
-  if (binContent <= 0) return 0;
-
-  if (maxContent > 1) {
-    binContent = Math.round((binContent / maxContent + Number.EPSILON) * 100) / 100;
-  }
-
-  return binContent;
-};
-
-AFRAME$1.registerComponent('binth2', {
-  schema: {
-    id: {
-      type: 'string'
-    },
-    content: {
-      "default": 0
-    },
-    absoluteContent: {
-      "default": 0
-    },
-    binName: {
-      "default": ''
-    },
-    xTitle: {
-      type: 'string'
-    },
-    yTitle: {
-      type: 'string'
-    },
-    xMin: {
-      type: 'number'
-    },
-    yMin: {
-      type: 'number'
-    },
-    xMax: {
-      type: 'number'
-    },
-    yMax: {
-      type: 'number'
-    },
-    xCenter: {
-      type: 'number'
-    },
-    yCenter: {
-      type: 'number'
-    },
-    xWidth: {
-      type: 'number'
-    },
-    yWidth: {
-      type: 'number'
-    },
-    color: {
-      type: 'string'
-    },
-    axisX: {
-      type: 'string'
-    },
-    axisY: {
-      type: 'string'
-    },
-    axisZ: {
-      type: 'string'
-    },
-    selectColor: {
-      type: 'string'
-    },
-    markedColor: {
-      type: 'string'
-    }
-  },
-  init: function init() {
-    var el = this.el;
-    el.userData = {
-      typeName: 'TH2',
-      id: this.data.id,
-      content: this.data.content,
-      absoluteContent: this.data.absoluteContent,
-      binName: this.data.binName,
-      xTitle: this.data.xTitle,
-      yTitle: this.data.yTitle,
-      xMin: this.data.xMin,
-      yMin: this.data.yMin,
-      xMax: this.data.xMax,
-      yMax: this.data.yMax,
-      xCenter: this.data.xCenter,
-      yCenter: this.data.yCenter,
-      xWidth: this.data.xWidth,
-      yWidth: this.data.yWidth,
-      color: this.data.color,
-      axisX: this.data.axisX,
-      axisY: this.data.axisY,
-      axisZ: this.data.axisZ,
-      selectColor: this.data.selectColor,
-      markedColor: this.data.markedColor
-    };
-  },
-  update: function update() {
-    var el = this.el;
-    el.userData = {
-      typeName: 'TH2',
-      id: this.data.id,
-      content: this.data.content,
-      absoluteContent: this.data.absoluteContent,
-      binName: this.data.binName,
-      xTitle: this.data.xTitle,
-      yTitle: this.data.yTitle,
-      xMin: this.data.xMin,
-      yMin: this.data.yMin,
-      xMax: this.data.xMax,
-      yMax: this.data.yMax,
-      xCenter: this.data.xCenter,
-      yCenter: this.data.yCenter,
-      xWidth: this.data.xWidth,
-      yWidth: this.data.yWidth,
-      color: this.data.color,
-      axisX: this.data.axisX,
-      axisY: this.data.axisY,
-      axisZ: this.data.axisZ,
-      selectColor: this.data.selectColor,
-      markedColor: this.data.markedColor
-    };
-  }
-});
-
-var _jsroot$1 = /*#__PURE__*/_classPrivateFieldLooseKey("jsroot");
-
-var HistogramDemoFactory = /*#__PURE__*/function () {
-  function HistogramDemoFactory(jsroot) {
-    Object.defineProperty(this, _jsroot$1, {
-      writable: true,
-      value: void 0
-    });
-    _classPrivateFieldLooseBase(this, _jsroot$1)[_jsroot$1] = jsroot;
-  }
-
-  var _proto = HistogramDemoFactory.prototype;
-
-  _proto.createTH2DemoHistogram = function createTH2DemoHistogram(xLength, yLength, initialContent, contentIncrement) {
-    var histo = _classPrivateFieldLooseBase(this, _jsroot$1)[_jsroot$1].createHistogram('TH2I', xLength, yLength);
-
-    var cnt = initialContent;
-
-    for (var iy = 1; iy <= 20; iy++) {
-      for (var ix = 1; ix <= 20; ix++) {
-        var bin = histo.getBin(ix, iy);
-        var val = 0;
-        val = cnt;
-        histo.setBinContent(bin, val);
-        cnt += contentIncrement;
-      }
-    }
-
-    histo.fXaxis.fTitle = 'x Axis';
-    histo.fYaxis.fTitle = 'y Axis';
-    histo.fName = "You don't have a valid file path";
-    histo.fTitle = 'This is a TH2 histogram demo';
-    histo.fMaximum = cnt;
-    return histo;
-  };
-
-  _proto.createTH3DemoHistogram = function createTH3DemoHistogram(xLength, yLength, zLength, initialContent, contentIncrement) {
-    var histo = _classPrivateFieldLooseBase(this, _jsroot$1)[_jsroot$1].createHistogram('TH3I', xLength, yLength, zLength);
-
-    var cnt = initialContent;
-
-    for (var iz = 1; iz <= 20; iz++) {
-      for (var iy = 1; iy <= 20; iy++) {
-        for (var ix = 1; ix <= 20; ix++) {
-          var bin = histo.getBin(ix, iy, iz);
-          var val = 0;
-          val = cnt;
-          histo.setBinContent(bin, val);
-          cnt += contentIncrement;
-        }
-      }
-    }
-
-    histo.fXaxis.fTitle = 'x Axis';
-    histo.fYaxis.fTitle = 'y Axis';
-    histo.fZaxis.fTitle = 'z Axis';
-    histo.fName = "You don't have a valid file path";
-    histo.fTitle = 'This is a TH3 histogram demo';
-    histo.fMaximum = cnt;
-    return histo;
-  };
-
-  return HistogramDemoFactory;
-}();
-
-var index = AFRAME$1.registerComponent('th2-histogram', {
-  schema: {
-    section: {
-      type: 'string'
-    },
-    filename: {
-      type: 'string'
-    },
-    theme: {
-      type: 'string',
-      "default": 'def'
-    },
-    position: {
-      name: 'position',
-      xValue: 0,
-      yValue: 0,
-      zValue: 0
-    },
-    scale: {
-      name: 'scale',
-      xValue: 2,
-      yValue: 2,
-      zValue: 2
-    },
-    rotation: {
-      name: 'rotation',
-      xValue: 0,
-      yValue: 0,
-      zValue: 0
-    }
-  },
-  init: function init() {
-    var _this = this;
-
-    var el = this.el;
-    initialKeyboardController(this.schema, el);
-    document.addEventListener('keydown', keyPressHandlerFunction);
-    document.addEventListener('keyup', keyReleaseHandlerFunction);
-    this.JSROOT = window.JSROOT;
-    this.demoHistogramService = new HistogramDemoFactory(this.JSROOT);
-    this.localStorageService = new NdmVrStorageService();
-    this.cameraService = new CameraService();
-    this.render = false;
-    this.histogram = null;
-    this.model = {
-      bins: {
-        elements: [],
-        attributes: []
-      },
-      labels: {
-        elements: [],
-        attributes: []
-      },
-      titles: {
-        elements: [],
-        attributes: []
-      },
-      banners: {
-        elements: [],
-        attributes: []
-      },
-      normalXAxis: {
-        elements: [],
-        attributes: []
-      },
-      reversedXAxis: {
-        elements: [],
-        attributes: []
-      },
-      normalYAxis: {
-        elements: [],
-        attributes: []
-      },
-      reversedYAxis: {
-        elements: [],
-        attributes: []
-      }
-    };
-    this.section = null;
-
-    var updateHistogramSection = function updateHistogramSection(newSection) {
-      console.log(newSection);
-      _this.section.xOffset = newSection.xOffset;
-      _this.section.yOffset = newSection.yOffset;
-      _this.range = newSection.range;
-
-      _this.cameraService.setCameraPosition(newSection);
-
-      createTH2Histogram(_this.el, _this.model, _this.histogram, _this.section.xOffset, _this.section.yOffset, _this.section.range, _this.data.theme);
-      _this.render = true;
-    };
-
-    var handleSubscription = function handleSubscription(section) {
-      _this.localStorageService.storeTH2Offsets(section.xOffset, section.yOffset, section.range);
-
-      updateHistogramSection(section);
-    };
-
-    this.subscription = histogramTH2Service.getChangedSection().subscribe(handleSubscription);
-  },
-  update: function update() {
-    var _this2 = this;
-
-    keyboardUpdateCameraReference();
-    this.section = JSON.parse(this.data.section);
-    this.JSROOT.openFile(this.data.filename).then(function (file) {
-      return file.readObject('hUsersVsProjects');
-    }).then(function (obj) {
-      _this2.localStorageService.initHistogramData(obj);
-
-      _this2.histogram = obj;
-      createTH2Histogram(_this2.el, _this2.model, _this2.histogram, _this2.section.xOffset, _this2.section.yOffset, _this2.section.range, _this2.data.theme);
-      _this2.render = true;
-    }).then(function () {
-      return console.log('drawing completed');
-    })["catch"](function (error) {
-      _this2.histogram = _this2.demoHistogramService.createTH2DemoHistogram(20, 20, 0, 0.1);
-
-      _this2.localStorageService.initHistogramData(_this2.histogram);
-
-      createTH2Histogram(_this2.el, _this2.model, _this2.histogram, _this2.section.xOffset, _this2.section.yOffset, _this2.section.range, _this2.data.theme);
-      _this2.render = true;
-      console.log(error);
-    });
-  },
-  tick: function tick() {
-    if (this.render) {
-      this.render = false;
-      console.log(this.section);
-      console.log(this.elements);
-    }
-  },
-  remove: function remove() {
-    this.subscription.unsubscribe();
-    document.removeEventListener('keydown', keyPressHandlerFunction);
-    document.removeEventListener('keyup', keyReleaseHandlerFunction);
-  }
-});
-
-var infoBannerAframeComponent = AFRAME$1.registerComponent('banner-control', {
-  schema: {
-    position: {
-      name: 'position',
-      xValue: -1.28,
-      yValue: 0.3,
-      zValue: -1
-    },
-    scale: {
-      name: 'scale',
-      xValue: 0.5,
-      yValue: 0.7,
-      zValue: 0.1
-    },
-    rotation: {
-      name: 'rotation',
-      xValue: 0,
-      yValue: 20,
-      zValue: 0
-    }
-  },
-  init: function init() {}
-});
-
-var cameraService$1 = new CameraService();
-
-var thumbStickByOwnOffset = function thumbStickByOwnOffset(event) {
-  if (event.detail.y > 0.95) {
-    histogramTH2Service.changeHistogramSectionByOffset('yOffset', 'TH2', false, false);
-    histogramTH3Service.changeHistogramSectionByOffset('yOffset', 'TH3', false, false);
-  }
-
-  if (event.detail.y < -0.95) {
-    histogramTH2Service.changeHistogramSectionByOffset('yOffset', 'TH2', true, false);
-    histogramTH3Service.changeHistogramSectionByOffset('yOffset', 'TH3', true, false);
-  }
-
-  if (event.detail.x < -0.95) {
-    histogramTH2Service.changeHistogramSectionByOffset('xOffset', 'TH2', true, false);
-    histogramTH3Service.changeHistogramSectionByOffset('xOffset', 'TH3', true, false);
-  }
-
-  if (event.detail.x > 0.95) {
-    histogramTH2Service.changeHistogramSectionByOffset('xOffset', 'TH2', false, false);
-    histogramTH3Service.changeHistogramSectionByOffset('xOffset', 'TH3', false, false);
-  }
-};
-
-var thumbStickByDefaultOffset = function thumbStickByDefaultOffset(event) {
-  if (event.detail.y > 0.95) {
-    histogramTH2Service.changeHistogramSectionByOffset('yOffset', 'TH2', false, true);
-    histogramTH3Service.changeHistogramSectionByOffset('yOffset', 'TH3', false, true);
-  }
-
-  if (event.detail.y < -0.95) {
-    histogramTH2Service.changeHistogramSectionByOffset('yOffset', 'TH2', true, true);
-    histogramTH3Service.changeHistogramSectionByOffset('yOffset', 'TH3', true, true);
-  }
-
-  if (event.detail.x < -0.95) {
-    histogramTH2Service.changeHistogramSectionByOffset('xOffset', 'TH2', true, true);
-    histogramTH3Service.changeHistogramSectionByOffset('xOffset', 'TH3', true, true);
-  }
-
-  if (event.detail.x > 0.95) {
-    histogramTH2Service.changeHistogramSectionByOffset('xOffset', 'TH2', false, true);
-    histogramTH3Service.changeHistogramSectionByOffset('xOffset', 'TH3', false, true);
-  }
-};
-
-var thumbStickForMoving = function thumbStickForMoving(event, speed) {
-  if (event.detail.y > 0.95) {
-    cameraService$1.horizontalMoveCamera('z', false, speed);
-  }
-
-  if (event.detail.y < -0.95) {
-    cameraService$1.horizontalMoveCamera('z', true, speed);
-  }
-
-  if (event.detail.x < -0.95) {
-    cameraService$1.horizontalMoveCamera('x', true, speed);
-  }
-
-  if (event.detail.x > 0.95) {
-    cameraService$1.horizontalMoveCamera('x', false, speed);
-  }
-};
-
-var thumbStickPredefinedPositionWithOffset = function thumbStickPredefinedPositionWithOffset(event) {
-  if (event.detail.y > 0.95) {
-    cameraService$1.setPredefinedUpPositionWithOffset();
-  }
-
-  if (event.detail.y < -0.95) {
-    cameraService$1.setPredefinedDownPositionWithOffset();
-  }
-
-  if (event.detail.x < -0.95) {
-    cameraService$1.setPredefinedLeftPositionWithOffset();
-  }
-
-  if (event.detail.x > 0.95) {
-    cameraService$1.setPredefinedRightPositionWithOffset();
-  }
-};
-
-var oculusUpSection = function oculusUpSection(defaultRange) {
-  histogramTH3Service.changeHistogramSectionByOffset('zOffset', 'TH3', true, defaultRange);
-};
-
-var oculusDownSection = function oculusDownSection(typeOfRange) {
-  histogramTH3Service.changeHistogramSectionByOffset('zOffset', 'TH3', false, typeOfRange);
-};
-
-var oculusUpdateCameraReference = function oculusUpdateCameraReference() {
-  cameraService$1 = new CameraService();
-};
-
-var oculusThumbStickFunction = function oculusThumbStickFunction(event) {
-  thumbStickByOwnOffset(event);
-};
-
-var oculusThumbStickWithGripFunction = function oculusThumbStickWithGripFunction(event) {
-  thumbStickByDefaultOffset(event);
-};
-
-var oculusThumbStickPredefinedCameraPositionWithOffset = function oculusThumbStickPredefinedCameraPositionWithOffset(event) {
-  thumbStickPredefinedPositionWithOffset(event);
-};
-
-var oculusThumbStickForMoving = function oculusThumbStickForMoving(event, speed) {
-  thumbStickForMoving(event, speed);
-};
-
-var oculusXButtonDownFunction = function oculusXButtonDownFunction(speed) {
-  cameraService$1.verticalMoveCamera(true, speed / 2);
-};
-
-var oculusYButtonDownFunction = function oculusYButtonDownFunction(speed) {
-  cameraService$1.verticalMoveCamera(false, speed / 2);
-};
-
-var oculusThumbStickMarkBin = function oculusThumbStickMarkBin() {
-  binSubject.saveSelectedBinToLocalStorage();
-};
-
-var oculusThumbStickUnmarkBin = function oculusThumbStickUnmarkBin() {
-  binSubject.deleteBinFromLocalStorage();
-};
-
-var oculusShowFunctionView = function oculusShowFunctionView() {
-  histogramTH2Service.changeHistogramFunction('feet', 'TH2');
-};
-
-var oculusShowDefaultView = function oculusShowDefaultView() {
-  histogramTH2Service.changeHistogramFunction('default', 'TH2');
-};
-
-var oculusSwitchViewWithBanners = function oculusSwitchViewWithBanners() {
-  cameraSubject.setVisibilityOfBanners('oculus');
-};
-
-var oculusChangeBannerContent = function oculusChangeBannerContent() {
-  cameraSubject.setUserState();
-};
-
-var oculusShiftBanners = function oculusShiftBanners() {
-  cameraSubject.shiftBanners();
-};
-
-var oculusRedrawHistogramBanners = function oculusRedrawHistogramBanners() {
-  ['th-mapping', 'bannerId_1', 'bannerId_2', 'bannerId_3', 'bannerId_4'].forEach(function (targetId) {
-    if (document.getElementById(targetId) !== null) {
-      jsrootService.displayImageOfProjection('projectionContainer', targetId, '500px', '400px');
-    }
-  });
-};
-
-var leftOculusController = AFRAME$1.registerComponent('left-controller-logging', {
-  init: function init() {
-    var gripActive = false;
-    var speed = 1;
-    var el = this.el;
-    el.addEventListener('gripdown', function () {
-      gripActive = true;
-    });
-    el.addEventListener('gripup', function () {
-      gripActive = false;
-    });
-    el.addEventListener('thumbstickdown', function () {
-      if (gripActive) {
-        speed++;
-        if (speed > 20) speed = 20;
-      } else {
-        speed--;
-        if (speed < 1) speed = 1;
-      }
-    });
-    el.addEventListener('thumbstickmoved', function (event) {
-      if (gripActive) {
-        oculusThumbStickPredefinedCameraPositionWithOffset(event);
-      } else {
-        oculusThumbStickForMoving(event, speed);
-      }
-    });
-    el.addEventListener('ybuttondown', function () {
-      if (gripActive) {
-        oculusXButtonDownFunction(speed);
-      } else {
-        oculusSwitchViewWithBanners();
-      }
-    });
-    el.addEventListener('xbuttondown', function () {
-      if (gripActive) {
-        oculusYButtonDownFunction(speed);
-      } else {
-        oculusChangeBannerContent();
-      }
-    });
-  },
-  update: function update() {
-    oculusUpdateCameraReference();
-  }
-});
-
-var rightOculusController = AFRAME$1.registerComponent('right-controller-logging', {
-  init: function init() {
-    var gripActive = false;
-    var el = this.el;
-    el.addEventListener('gripdown', function () {
-      gripActive = true;
-    });
-    el.addEventListener('gripup', function () {
-      gripActive = false;
-    });
-    el.addEventListener('thumbstickmoved', function (event) {
-      if (gripActive) {
-        oculusThumbStickFunction(event);
-      } else {
-        oculusThumbStickWithGripFunction(event);
-      }
-    });
-    el.addEventListener('bbuttondown', function () {
-      if (gripActive) {
-        oculusUpSection(false);
-      } else {
-        oculusUpSection(true);
-      }
-    });
-    el.addEventListener('abuttondown', function () {
-      if (gripActive) {
-        oculusDownSection(false);
-      } else {
-        oculusDownSection(true);
-      }
-    });
-    el.addEventListener('thumbstickdown', function () {
-      if (gripActive) {
-        oculusShowFunctionView();
-      } else {
-        oculusShowDefaultView();
-      }
-    });
-    el.addEventListener('triggerdown', function () {
-      if (gripActive) {
-        oculusThumbStickMarkBin();
-        oculusRedrawHistogramBanners();
-      } else {
-        oculusThumbStickUnmarkBin();
-        oculusShiftBanners();
-      }
-    });
-  },
-  update: function update() {
-    oculusUpdateCameraReference();
-  }
-});
-
-var ndmVrStorage = new NdmVrStorageService();
-
-exports.Banner = infoBannerAframeComponent;
-exports.HistogramTH2 = index;
-exports.JSrootHistogram = JsrootHistogram;
-exports.LeftController = leftOculusController;
-exports.NdmVrScene = NdmVrScene;
-exports.RightController = rightOculusController;
-exports.binDataDistributor = binDataDistributor;
-exports.ndmVrStorage = ndmVrStorage;
-//# sourceMappingURL=index.js.map