@abi-software/scaffoldvuer 0.1.50 → 0.1.52-beta.2

package/dist/scaffoldvuer.umd.js

@@ -110,6 +110,17 @@ module.exports = require("element-ui/lib/checkbox-group");
 
 /***/ }),
 
+/***/ "0676":
+/***/ (function(module, exports) {
+
+function _nonIterableSpread() {
+  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+
+module.exports = _nonIterableSpread;
+
+/***/ }),
+
 /***/ "0cf4":
 /***/ (function(module, exports) {
 
@@ -131,104 +142,30 @@ module.exports = require("element-ui/lib/theme-chalk/select.css");
 
 /***/ }),
 
-/***/ "10c9":
-/***/ (function(module, exports) {
-
-/**
- * @author alteredq / http://alteredqualia.com/
- * @author mr.doob / http://mrdoob.com/
- */
-
-exports.WEBGL = {
-
-	isWebGLAvailable: function () {
-
-		try {
-
-			var canvas = document.createElement( 'canvas' );
-			return !! ( window.WebGLRenderingContext && ( canvas.getContext( 'webgl' ) || canvas.getContext( 'experimental-webgl' ) ) );
-
-		} catch ( e ) {
-
-			return false;
-
-		}
-
-	},
-
-	isWebGL2Available: function () {
-
-		try {
-
-			var canvas = document.createElement( 'canvas' );
-			return !! ( window.WebGL2RenderingContext && canvas.getContext( 'webgl2' ) );
-
-		} catch ( e ) {
-
-			return false;
-
-		}
-
-	},
-
-	getWebGLErrorMessage: function () {
-
-		return this.getErrorMessage( 1 );
-
-	},
-
-	getWebGL2ErrorMessage: function () {
-
-		return this.getErrorMessage( 2 );
-
-	},
-
-	getErrorMessage: function ( version ) {
-
-		var names = {
-			1: 'WebGL',
-			2: 'WebGL 2'
-		};
-
-		var contexts = {
-			1: window.WebGLRenderingContext,
-			2: window.WebGL2RenderingContext
-		};
-
-		var message = 'This module requires <a href="http://khronos.org/webgl/wiki/Getting_a_WebGL_Implementation" style="color:#008">$1</a> support but your $0 does not seem to support it.';
-
-		var element = document.createElement( 'div' );
-		element.id = 'webglmessage';
-		element.style.fontFamily = 'monospace';
-		element.style.fontSize = '20px';
-		element.style.fontWeight = 'normal';
-		element.style.textAlign = 'center';
-		element.style.background = '#fff';
-		element.style.color = '#000';
-		element.style.padding = '1.5em';
-		element.style.width = '400px';
-		element.style.margin = '5em auto 0';
-
-		if ( contexts[ version ] ) {
+/***/ "11b0":
+/***/ (function(module, exports, __webpack_require__) {
 
-			message = message.replace( '$0', 'graphics card' );
+__webpack_require__("6049");
 
-		} else {
+__webpack_require__("51e9");
 
-			message = message.replace( '$0', 'browser' );
+__webpack_require__("02ac");
 
-		}
+__webpack_require__("e42b");
 
-		message = message.replace( '$1', names[ version ] );
+__webpack_require__("8c84");
 
-		element.innerHTML = message;
+__webpack_require__("850c");
 
-		return element;
+__webpack_require__("907b");
 
-	}
+__webpack_require__("1ce0");
 
-};
+function _iterableToArray(iter) {
+  if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter);
+}
 
+module.exports = _iterableToArray;
 
 /***/ }),
 
@@ -239,13 +176,6 @@ module.exports = require("core-js/modules/es.array.for-each");
 
 /***/ }),
 
-/***/ "1823":
-/***/ (function(module, exports) {
-
-module.exports = "precision highp float;\n\nuniform mat4 modelViewMatrix;\nuniform mat4 projectionMatrix;\n\nattribute vec3 position;\nattribute vec3 normal;\nattribute vec3 color;\nattribute vec2 uv;\nattribute vec3 position_1;\nattribute vec3 position_2;\nattribute vec2 uv_1;\nattribute vec2 uv_2;\n\nuniform float time;\nuniform float slide_pos;\nvarying vec2 vUv;\n\nvoid main() {\n\tvUv = uv;\n\t\n\tvec3 transformed_xi1 = position * vec3(1.0 - time) +  position_1 * vec3(time);\n\t\n\tvec3 xi0_time_1 = vec3(position_1.x, position_1.y, 0.0);\n\tvec3 transformed_xi0 = position_2 * vec3(1.0 - time) +  xi0_time_1 * vec3(time);\n\n\tvec3 transformed = vec3(transformed_xi0) * vec3(1.0 - slide_pos) +  vec3(transformed_xi1) * vec3(slide_pos);\n\t\n\tvec4 mvPosition = modelViewMatrix * vec4( transformed, 1.0 );\n\tgl_Position = projectionMatrix * mvPosition;\n\n}\n"
-
-/***/ }),
-
 /***/ "18d2":
 /***/ (function(module, exports) {
 
@@ -292,10 +222,16 @@ module.exports = require("core-js/modules/es.object.keys");
 
 /***/ }),
 
-/***/ "24f0":
+/***/ "2236":
 /***/ (function(module, exports, __webpack_require__) {
 
-// extracted by mini-css-extract-plugin
+var arrayLikeToArray = __webpack_require__("5a43");
+
+function _arrayWithoutHoles(arr) {
+  if (Array.isArray(arr)) return arrayLikeToArray(arr);
+}
+
+module.exports = _arrayWithoutHoles;
 
 /***/ }),
 
@@ -355,144 +291,54 @@ module.exports = require("element-ui/lib/drawer");
 
 /***/ }),
 
-/***/ "382f":
+/***/ "3a59":
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_8_oneOf_1_0_node_modules_vue_cli_service_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_ScaffoldVuer_vue_vue_type_style_index_0_id_03b672b7_scoped_true_lang_scss___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("5cd8");
-/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_8_oneOf_1_0_node_modules_vue_cli_service_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_ScaffoldVuer_vue_vue_type_style_index_0_id_03b672b7_scoped_true_lang_scss___WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_mini_css_extract_plugin_dist_loader_js_ref_8_oneOf_1_0_node_modules_vue_cli_service_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_ScaffoldVuer_vue_vue_type_style_index_0_id_03b672b7_scoped_true_lang_scss___WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_8_oneOf_1_0_node_modules_vue_cli_service_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_TraditionalControls_vue_vue_type_style_index_0_id_335c5764_scoped_true_lang_scss___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("4646");
+/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_8_oneOf_1_0_node_modules_vue_cli_service_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_TraditionalControls_vue_vue_type_style_index_0_id_335c5764_scoped_true_lang_scss___WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_mini_css_extract_plugin_dist_loader_js_ref_8_oneOf_1_0_node_modules_vue_cli_service_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_TraditionalControls_vue_vue_type_style_index_0_id_335c5764_scoped_true_lang_scss___WEBPACK_IMPORTED_MODULE_0__);
 /* unused harmony reexport * */
 
 
 /***/ }),
 
-/***/ "3966":
-/***/ (function(module, exports, __webpack_require__) {
-
-var MODULE_CHANGE = { ALL: 0, DESTROYED: 1, NAME_CHANGED: 2, SETTINGS_CHANGED: 3 };
-
-var BaseModule = function() {
-  this.typeName = "Base Module";
-  this.instanceName = "default";
-  this.onChangedCallbacks = [];
-  this.messageFunction = undefined;
-  /**  Notifier handle for informing other modules of any changes **/
-  this.eventNotifiers = [];
-  this.broadcastChannels = {};
-}
-
-BaseModule.prototype.setName = function(name) {
-  if (name && this.instanceName !== name) {
-    this.instanceName = name;
-    var callbackArray = this.onChangedCallbacks.slice();
-    for (var i = 0; i < callbackArray.length; i++) {
-      callbackArray[i]( this, MODULE_CHANGE.NAME_CHANGED );
-    }
-  }
-}
-
-BaseModule.prototype.addBroadcastChannels = function(ChannelName) {
-	if (ChannelName in this.broadcastChannels)
-		return false;
-	var newChannel = new (__webpack_require__("c45a")).default(ChannelName);
-	this.broadcastChannels[ChannelName] = newChannel;
-	return true;
-}
-
-BaseModule.prototype.removeBroadcastChannels = function(ChannelName) {
-	if (ChannelName in this.broadcastChannels) {
-		this.broadcastChannels[ChannelName].close();
-		delete broadcastChannels[ChannelName];
-	}
-	
-}
-
-BaseModule.prototype.settingsChanged = function() {
-	var callbackArray = this.onChangedCallbacks.slice();
-    for (var i = 0; i < callbackArray.length; i++) {
-      callbackArray[i]( this, MODULE_CHANGE.SETTINGS_CHANGED );
-    }
-}
-
-BaseModule.prototype.exportSettings = function() {
-	  var settings = {};
-	  settings.dialog = this.typeName;
-	  settings.name = this.instanceName;
-	  return settings;
-}
+/***/ "429c":
+/***/ (function(module, exports) {
 
-BaseModule.prototype.importSettings = function(settings) {
-	if (settings.dialog == this.typeName) {
-		this.setName(settings.name);
-		return true;
-	}
-	return false;
-}
+module.exports = require("@abi-software/svg-sprite");
 
-BaseModule.prototype.publishChanges = function(annotations, eventType) {
-  for (var i = 0; i < this.eventNotifiers.length; i++) {
-    this.eventNotifiers[i].publish(this, eventType, annotations);
-  }
-  if (eventType === __webpack_require__("549c").EVENT_TYPE.SELECTED) {
-	  if (annotations && annotations[0]) {
-		  var annotation = annotations[0];	  
-		  var data = {action: "query-data", resource: annotation.data.id, data: annotation.data, sender: this.instanceName};
-		  for (var key in this.broadcastChannels) {
-			  this.broadcastChannels[key].postMessage(data);
-		  }
-	  }
-  }
-}
+/***/ }),
 
-BaseModule.prototype.setMessageFunction = function(functionIn) {
-   this.messageFunction = functionIn;
-}
+/***/ "448a":
+/***/ (function(module, exports, __webpack_require__) {
 
-BaseModule.prototype.displayMessage = function(message) {
-   if (this.messageFunction)
-	   this.messageFunction(message);
-}
+var arrayWithoutHoles = __webpack_require__("2236");
 
-BaseModule.prototype.getName = function() {
-  return this.instanceName;
-}
+var iterableToArray = __webpack_require__("11b0");
 
-BaseModule.prototype.destroy = function() {
-  //Make a temorary copy as the array may be altered during the loop
-  var callbackArray = this.onChangedCallbacks.slice();
-  for (var i = 0; i < callbackArray.length; i++) {
-    callbackArray[i]( this, MODULE_CHANGE.DESTROYED );
-  }
+var unsupportedIterableToArray = __webpack_require__("6613");
 
-  delete this;
-} 
+var nonIterableSpread = __webpack_require__("0676");
 
-BaseModule.prototype.addChangedCallback = function(callback) {
-  if (this.onChangedCallbacks.includes(callback) == false)
-    this.onChangedCallbacks.push(callback);
+function _toConsumableArray(arr) {
+  return arrayWithoutHoles(arr) || iterableToArray(arr) || unsupportedIterableToArray(arr) || nonIterableSpread();
 }
 
-BaseModule.prototype.removeChangedCallback = function(callback) {
-  var index = this.onChangedCallbacks.indexOf(callback);
-  if (index > -1) {
-    this.onChangedCallbacks.splice(index, 1);
-  }
-} 
+module.exports = _toConsumableArray;
 
-BaseModule.prototype.addNotifier = function(eventNotifier) {
-  this.eventNotifiers.push(eventNotifier);
-}
+/***/ }),
 
-exports.BaseModule = BaseModule;
-exports.MODULE_CHANGE = MODULE_CHANGE;
+/***/ "44bd":
+/***/ (function(module, exports, __webpack_require__) {
 
+// extracted by mini-css-extract-plugin
 
 /***/ }),
 
-/***/ "429c":
-/***/ (function(module, exports) {
+/***/ "4646":
+/***/ (function(module, exports, __webpack_require__) {
 
-module.exports = require("@abi-software/svg-sprite");
+// extracted by mini-css-extract-plugin
 
 /***/ }),
 
@@ -517,13 +363,6 @@ module.exports = require("lodash/uniq");
 
 /***/ }),
 
-/***/ "4e8a":
-/***/ (function(module, exports) {
-
-module.exports = "precision highp float;\nuniform sampler2D myTex;\nvarying vec2 vUv;\n\nvoid main() {\n\tgl_FragColor = texture2D( myTex, vUv );\n\n}\n"
-
-/***/ }),
-
 /***/ "51c7":
 /***/ (function(module, exports) {
 
@@ -545,146 +384,31 @@ module.exports = require("core-js/modules/es.regexp.exec");
 
 /***/ }),
 
-/***/ "549c":
-/***/ (function(module, exports) {
-
-var EVENT_TYPE = { ALL: 0, SELECTED: 1, HIGHLIGHTED: 2 };
-
-var SelectionEvent = function(eventTypeIn, identifiersIn) {
-  this.eventType = eventTypeIn;
-  this.identifiers = identifiersIn;
-}
-
-var returnFullID = function(sourceId) {
-  //return full annotations with all different name
-}
-  
-var Subscription = function(subscriberIn, callbackIn, eventType) {
-  this.targetedID = [];
-  var subscriber = subscriberIn;
-  if (eventType === undefined)
-    this.targetEventType = EVENT_TYPE.ALL;
-  else
-    this.targetEventType = eventType;
-  var callback = callbackIn;
-  
-  var _this = this;
-  
-  this.getEventType = function() {
-    return eventType;
-  }
-  
-  this.notify = function(source, eventType, ids) {
-    if (source !== subscriber && (_this.targetEventType ===  EVENT_TYPE.ALL ||
-        _this.targetEventType === eventType)) {
-      //should support different type of id e.g lyph, name, fmas...
-      //need a function that finds all relavant ids
-      var event = new SelectionEvent(eventType, ids);
-      callback(event);
-    }
-  }
-}
-
-exports.EventNotifier = function() {
-  var events = [];
-  var subscriptions = [];
-  var _this = this;
-  
-  this.publish = function(source, eventType, id) {
-    for (var i = 0; i < subscriptions.length;i++) {
-      subscriptions[i].notify(source, eventType, id);
-    }
-  }
-  
-  this.subscribe = function(subscriber, callbackFunction, eventType) {
-    if (typeof callbackFunction === "function") {
-      var subscription = new Subscription(subscriber, callbackFunction, eventType);
-      subscriptions.push(subscription);
-      return subscription;
-    }
-    return undefined;
-  }
-  
-  this.unsubscribe = function(subscription) {
-    for (var i = 0; i < subscriptions.length;i++) {
-      if (subscription === subscriptions[i]) {
-        subscriptions.splice(i, 1);
-        return;
-      }
-    }
-  }
-}  
-
-exports.EVENT_TYPE = EVENT_TYPE;
-
-
-/***/ }),
-
-/***/ "55ee":
-/***/ (function(module, exports) {
-
-module.exports = require("element-ui/lib/theme-chalk/checkbox.css");
-
-/***/ }),
-
-/***/ "5810":
-/***/ (function(module, exports, __webpack_require__) {
-
-// extracted by mini-css-extract-plugin
-
-/***/ }),
-
-/***/ "5cd8":
+/***/ "53d7":
 /***/ (function(module, exports, __webpack_require__) {
 
-// extracted by mini-css-extract-plugin
-
-/***/ }),
-
-/***/ "5fef":
-/***/ (function(module, exports) {
-
-module.exports = require("core-js/modules/es.regexp.to-string");
-
-/***/ }),
-
-/***/ "6049":
-/***/ (function(module, exports) {
-
-module.exports = require("core-js/modules/es.symbol");
-
-/***/ }),
-
-/***/ "642d":
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_8_oneOf_1_0_node_modules_vue_cli_service_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_ScaffoldVuer_vue_vue_type_style_index_1_lang_scss___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("7d9b");
-/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_8_oneOf_1_0_node_modules_vue_cli_service_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_ScaffoldVuer_vue_vue_type_style_index_1_lang_scss___WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_mini_css_extract_plugin_dist_loader_js_ref_8_oneOf_1_0_node_modules_vue_cli_service_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_ScaffoldVuer_vue_vue_type_style_index_1_lang_scss___WEBPACK_IMPORTED_MODULE_0__);
-/* unused harmony reexport * */
-
+__webpack_require__("ab7e");
 
-/***/ }),
+__webpack_require__("7c81");
 
-/***/ "6579":
-/***/ (function(module, exports) {
+__webpack_require__("bcd8");
 
-module.exports = require("core-js/modules/es.array.slice");
+__webpack_require__("2175");
 
-/***/ }),
+__webpack_require__("fd48");
 
-/***/ "67b6":
-/***/ (function(module, exports, __webpack_require__) {
+var _typeof = __webpack_require__("7037");
 
-var THREE = __webpack_require__("9206").THREE;
-// Current model's associate data, data fields, external link, nerve map
+var THREE = __webpack_require__("9206").THREE; // Current model's associate data, data fields, external link, nerve map
 // informations,
 // these are proived in the organsFileMap array.
-var OrgansSceneData = function() {
+
+
+var OrgansSceneData = function OrgansSceneData() {
   this.currentName = "";
   this.currentSystem = "";
   this.currentPart = "";
-  this.currentSpecies  = "";
+  this.currentSpecies = "";
   this.metaURL = "";
   this.viewURL = "";
   this.geometries = [];
@@ -693,12 +417,7 @@ var OrgansSceneData = function() {
   this.pointsets = [];
   this.currentTime = 0.0;
   this.timeVarying = false;
-  // Current model's associate data, data fields, external link, nerve map
-	// informations,
-  this.nerveMap = undefined;
-  this.nerveMapIsActive = false;
-}
-
+};
 /**
  * Viewer of 3D-organs models. Users can toggle on/off different views. Data is
  * displayed instead if models are not available.
@@ -713,619 +432,964 @@ var OrgansSceneData = function() {
  * @author Alan Wu
  * @returns {PJP.OrgansViewer}
  */
-var OrgansViewer = function(ModelsLoaderIn)  {
-  (__webpack_require__("7a89").RendererModule).call(this);
-	var pickerScene = undefined;
-	var nerveMapScene = undefined;
-	this.sceneData = new OrgansSceneData();
-	var timeChangedCallbacks = new Array();
-	var sceneChangedCallbacks = new Array();
-  var organPartAddedCallbacks = new Array();
-  var finishDownloadCallback = undefined;
-	var layoutUpdateRequiredCallbacks = new Array();
-	var modelsLoader = ModelsLoaderIn;
-	var _this = this;
-	_this.typeName = "Organ Viewer";
-	
-	this.getSceneData = function() {
-	  return _this.sceneData;
-	}
-
-	/**
-	 * Used to update internal timer in scene when time slider has changed.
-	 */
-	this.updateTime = function(value) {
-    let duration = 6000;
-    if (_this.scene)
-      duration = _this.scene.getDuration();
-    var actualTime = value / 100.0 * duration;
-		if (!_this.sceneData.nerveMapIsActive) {
-			if (pickerScene)
-				pickerScene.setMorphsTime(actualTime);
-			if (_this.scene)
-				_this.scene.setMorphsTime(actualTime);
-		} else if (nerveMapScene) {
-				nerveMapScene.setMorphsTime(actualTime);
-				if (_this.sceneData.nerveMap && _this.sceneData.nerveMap.additionalReader)
-					_this.sceneData.nerveMap.additionalReader.setTime(value / 100.0);
-		}
-		_this.sceneData.currentTime = value;
-	}
-	
-	/**
-	 * Update the time slider and other renderers/scenes when time has changed.
-	 */
-	var preRenderTimeUpdate = function() {
-    let duration = 3000;
-    if (_this.scene)
-      duration = _this.scene.getDuration();
-		var currentTime = _this.zincRenderer.getCurrentTime();
-		for (var i = 0; i < timeChangedCallbacks.length;i++) {
-			timeChangedCallbacks[i](currentTime);
-		}
-		if (!_this.sceneData.nerveMapIsActive && pickerScene)
-			pickerScene.setMorphsTime(currentTime);
-		if (_this.sceneData.nerveMap && _this.sceneData.nerveMap.additionalReader)
-      _this.sceneData.nerveMap.additionalReader.setTime(currentTime / 
-        duration);
-		_this.sceneData.currentTime = currentTime / duration * 100.0;
-  }
-  
-  var postRenderSelectedCoordinatesUpdate = function() {
-    if (_this.selectedCenter) {
-      const vector = new THREE.Vector3();
-      vector.copy(_this.selectedCenter);
-      var coord = _this.scene.vectorToScreenXY(vector);
-      _this.selectedScreenCoordinates.x = coord.x;
-      _this.selectedScreenCoordinates.y = coord.y;
-    }
-  }
-	
-	var preRenderUpdateCallback = function() {
-		return function() {
-      preRenderTimeUpdate();
-		}
-  }
-  
-  var postRenderUpdateCallback = function() {
-		return function() {
-      postRenderSelectedCoordinatesUpdate();
-		}
-	}
-	
-	 /**
-		 * Add a callback which will be called when time has changed
-		 */
-	this.addTimeChangedCallback = function(callback) {
-	  if (typeof(callback === "function"))
-	    timeChangedCallbacks.push(callback);
-	}
-	
-	this.setTexturePos = function(value) {
-		if (_this.sceneData.nerveMap && _this.sceneData.nerveMap.additionalReader)
-			_this.sceneData.nerveMap.additionalReader.setSliderPos(value);
-	}
-	
-	 this.addLayoutUpdateRequiredCallback = function(callback) {
-	    if (typeof(callback === "function")) {
-	      layoutUpdateRequiredCallbacks.push(callback);
-	    }
-	  }
-	
-	this.addSceneChangedCallback = function(callback) {
-	  if (typeof(callback === "function")) {
-	    sceneChangedCallbacks.push(callback);
-	  }
-	}
-	
-	this.addOrganPartAddedCallback = function(callback) {
-    if (typeof(callback === "function"))
-      organPartAddedCallbacks.push(callback);
-  }
 
-  this.setFinishDownloadCallback = function(callback) {
-    if (typeof(callback === "function"))
-      finishDownloadCallback = callback;
-  }
 
-  this.unsetFinishDownloadCallback = function() {
-    finishDownloadCallback = undefined;
-  }
+var OrgansViewer = function OrgansViewer(ModelsLoaderIn) {
+  var _this2 = this;
 
-  this.getNamedObjectsToScreenCoordinates = function(name, camera) {
-    var vector = new THREE.Vector3();
-    vector.setFromMatrixPosition( obj.matrixWorld );
-    var widthHalf = (width/2);
-    var heightHalf = (height/2);
-    vector.project(camera);
-    vector.x = ( vector.x * widthHalf ) + widthHalf;
-    vector.y = - ( vector.y * heightHalf ) + heightHalf;
-    return vector;
-  }
+  __webpack_require__("8278").RendererModule.call(this);
 
-  var getIdObjectFromIntersect = function(intersected) {
+  var _this = this;
+
+  var pickerScene = undefined;
+  this.sceneData = new OrgansSceneData();
+  var timeChangedCallbacks = new Array();
+  var sceneChangedCallbacks = new Array();
+  var organPartAddedCallbacks = new Array();
+  var finishDownloadCallback = undefined;
+  var modelsLoader = ModelsLoaderIn;
+  this.NDCCameraControl = undefined;
+  _this.typeName = "Organ Viewer";
+
+  this.getSceneData = function () {
+    return _this.sceneData;
+  };
+  /**
+   * Used to update internal timer in scene when time slider has changed.
+   */
+
+
+  this.updateTime = function (value) {
+    var duration = 6000;
+    if (_this.scene) duration = _this.scene.getDuration();
+    var actualTime = value / 100.0 * duration;
+
+    if (!_this.sceneData.nerveMapIsActive) {
+      if (pickerScene) pickerScene.setMorphsTime(actualTime);
+      if (_this.scene) _this.scene.setMorphsTime(actualTime);
+    }
+
+    _this.sceneData.currentTime = value;
+  };
+  /**
+   * Update the time slider and other renderers/scenes when time has changed.
+   */
+
+
+  var preRenderTimeUpdate = function preRenderTimeUpdate() {
+    var duration = 3000;
+    if (_this.scene) duration = _this.scene.getDuration();
+
+    var currentTime = _this.zincRenderer.getCurrentTime();
+
+    for (var i = 0; i < timeChangedCallbacks.length; i++) {
+      timeChangedCallbacks[i](currentTime);
+    }
+
+    if (!_this.sceneData.nerveMapIsActive && pickerScene) pickerScene.setMorphsTime(currentTime);
+    if (_this.sceneData.nerveMap && _this.sceneData.nerveMap.additionalReader) _this.sceneData.nerveMap.additionalReader.setTime(currentTime / duration);
+    _this.sceneData.currentTime = currentTime / duration * 100.0;
+  };
+
+  this.toggleSyncControl = function (flag) {
+    var cameraControl = _this2.scene.getZincCameraControls();
+
+    if (flag) {
+      cameraControl.resetView();
+      _this2.NDCCameraControl = cameraControl.enableSyncControl();
+    } else {
+      cameraControl.disableSyncControl();
+      _this2.NDCCameraControl = undefined;
+    }
+  };
+
+  this.isSyncControl = function () {
+    return _this2.NDCCameraControl !== undefined;
+  };
+
+  this.setSyncControlZoomToBox = function (box) {
+    if (_this2.NDCCameraControl) {
+      _this2.NDCCameraControl.zoomToBox(box, 2);
+    }
+  };
+
+  this.setSyncControlCallback = function (callback) {
+    if (_this2.NDCCameraControl) {
+      _this2.NDCCameraControl.setEventCallback(callback);
+    }
+  };
+
+  this.setSyncControlCenterZoom = function (center, zoom) {
+    if (_this2.NDCCameraControl) {
+      _this2.NDCCameraControl.setCenterZoom(center, zoom);
+    }
+  };
+
+  var postRenderSelectedCoordinatesUpdate = function postRenderSelectedCoordinatesUpdate() {
+    if (_this.selectedCenter) {
+      var vector = new THREE.Vector3();
+      vector.copy(_this.selectedCenter);
+
+      var coord = _this.scene.vectorToScreenXY(vector);
+
+      _this.selectedScreenCoordinates.x = coord.x;
+      _this.selectedScreenCoordinates.y = coord.y;
+    }
+  };
+
+  var preRenderUpdateCallback = function preRenderUpdateCallback() {
+    return function () {
+      preRenderTimeUpdate();
+    };
+  };
+
+  var postRenderUpdateCallback = function postRenderUpdateCallback() {
+    return function () {
+      postRenderSelectedCoordinatesUpdate();
+    };
+  };
+  /**
+   * Add a callback which will be called when time has changed
+   */
+
+
+  this.addTimeChangedCallback = function (callback) {
+    if (_typeof(callback === "function")) timeChangedCallbacks.push(callback);
+  };
+
+  this.setTexturePos = function (value) {
+    if (_this.sceneData.nerveMap && _this.sceneData.nerveMap.additionalReader) _this.sceneData.nerveMap.additionalReader.setSliderPos(value);
+  };
+
+  this.addSceneChangedCallback = function (callback) {
+    if (_typeof(callback === "function")) {
+      sceneChangedCallbacks.push(callback);
+    }
+  };
+
+  this.addOrganPartAddedCallback = function (callback) {
+    if (_typeof(callback === "function")) organPartAddedCallbacks.push(callback);
+  };
+
+  this.setFinishDownloadCallback = function (callback) {
+    if (_typeof(callback === "function")) finishDownloadCallback = callback;
+  };
+
+  this.unsetFinishDownloadCallback = function () {
+    finishDownloadCallback = undefined;
+  };
+
+  this.getNamedObjectsToScreenCoordinates = function (name, camera) {
+    var vector = new THREE.Vector3();
+    vector.setFromMatrixPosition(obj.matrixWorld);
+    var widthHalf = width / 2;
+    var heightHalf = height / 2;
+    vector.project(camera);
+    vector.x = vector.x * widthHalf + widthHalf;
+    vector.y = -(vector.y * heightHalf) + heightHalf;
+    return vector;
+  };
+
+  var getIdObjectFromIntersect = function getIdObjectFromIntersect(intersected) {
     var id = undefined;
     var intersectedObject = undefined;
+
     if (intersected !== undefined) {
-      if (intersected.object.userData && 
-        intersected.object.userData.isMarker) {
+      if (intersected.object.userData && intersected.object.userData.isMarker) {
         intersectedObject = intersected.object.userData.parent.morph;
       } else {
         intersectedObject = intersected.object;
       }
+
       if (intersectedObject) {
         if (intersectedObject.name) {
           id = intersectedObject.name;
         } else {
-          var annotations = _this.getAnnotationsFromObjects(
-            [intersectedObject]);
+          var annotations = _this.getAnnotationsFromObjects([intersectedObject]);
+
           if (annotations && annotations[0]) {
             id = annotations[0].data.group;
           }
         }
       }
     }
-    return {"id":id, "object":intersectedObject};
+
+    return {
+      "id": id,
+      "object": intersectedObject
+    };
+  };
+  /**
+   * Callback function when a pickable object has been picked. It will then
+   * call functions in tissueViewer and cellPanel to show corresponding
+   * informations.
+   * 
+   * @callback
+   */
+
+
+  var _pickingCallback = function _pickingCallback() {
+    return function (intersects, window_x, window_y) {
+      var intersected = _this.getIntersectedObject(intersects);
+
+      var idObject = getIdObjectFromIntersect(intersected);
+
+      if (idObject.id) {
+        if (idObject.object.userData.isGlyph) {
+          if (idObject.object.name) _this.setSelectedByObjects([idObject.object], true);else _this.setSelectedByZincObject(idObject.object.userData.getGlyphset(), true);
+        } else {
+          _this.setSelectedByObjects([idObject.object], true);
+        }
+
+        return;
+      } else {
+        _this.setSelectedByObjects([], true);
+      }
+    };
+  };
+  /**
+   * Callback function when a pickable object has been hovered over.
+   * 
+   * @callback
+   */
+
+
+  var _hoverCallback = function _hoverCallback() {
+    return function (intersects, window_x, window_y) {
+      var intersected = _this.getIntersectedObject(intersects);
+
+      var idObject = getIdObjectFromIntersect(intersected);
+
+      if (idObject.id) {
+        _this.displayArea.style.cursor = "pointer";
+
+        _this.setHighlightedByObjects([idObject.object], true);
+
+        return;
+      } else {
+        _this.displayArea.style.cursor = "auto";
+
+        _this.setHighlightedByObjects([], true);
+      }
+    };
+  };
+
+  var changeOrganPartsVisibilityForScene = function changeOrganPartsVisibilityForScene(scene, name, value, type) {
+    if (type == "all" || type == "geometries") {
+      var geometries = scene.findGeometriesWithGroupName(name);
+
+      for (var i = 0; i < geometries.length; i++) {
+        geometries[i].setVisibility(value);
+      }
+    }
+
+    if (type == "all" || type == "glyphsets") {
+      var glyphsets = scene.findGlyphsetsWithGroupName(name);
+
+      for (var _i = 0; _i < glyphsets.length; _i++) {
+        glyphsets[_i].setVisibility(value);
+      }
+    }
+
+    if (type == "all" || type == "pointsets") {
+      var pointsets = scene.findPointsetsWithGroupName(name);
+
+      for (var _i2 = 0; _i2 < pointsets.length; _i2++) {
+        pointsets[_i2].setVisibility(value);
+      }
+    }
+
+    if (type == "all" || type == "lines") {
+      var lines = scene.findLinesWithGroupName(name);
+
+      for (var _i3 = 0; _i3 < lines.length; _i3++) {
+        lines[_i3].setVisibility(value);
+      }
+    }
+  };
+  /**
+   * Change visibility for parts of the current scene.
+   */
+
+
+  this.changeGeometriesVisibility = function (name, value) {
+    changeOrganPartsVisibilityForScene(_this.scene, name, value, 'geometries');
+    if (pickerScene) changeOrganPartsVisibilityForScene(pickerScene, name, value, 'geometries');
+  };
+  /**
+   * Change visibility for parts of the current scene.
+   */
+
+
+  this.changeGlyphsetsVisibility = function (name, value) {
+    changeOrganPartsVisibilityForScene(_this.scene, name, value, 'glyphsets');
+    if (pickerScene) changeOrganPartsVisibilityForScene(pickerScene, name, value, 'glyphsets');
+  };
+  /**
+   * Change visibility for parts of the current scene.
+   */
+
+
+  this.changeLinesVisibility = function (name, value) {
+    changeOrganPartsVisibilityForScene(_this.scene, name, value, 'lines');
+    if (pickerScene) changeOrganPartsVisibilityForScene(pickerScene, name, value, 'lines');
+  };
+  /**
+   * Change visibility for parts of the current scene.
+   */
+
+
+  this.changePointsetsVisibility = function (name, value) {
+    changeOrganPartsVisibilityForScene(_this.scene, name, value, 'pointsets');
+    if (pickerScene) changeOrganPartsVisibilityForScene(pickerScene, name, value, 'pointsets');
+  };
+  /**
+   * Change visibility for parts of the current scene.
+   */
+
+
+  this.changeOrganPartsVisibility = function (name, value, typeIn) {
+    var type = "all";
+    if (typeIn !== undefined) type = typeIn;
+    changeOrganPartsVisibilityForScene(_this.scene, name, value, type);
+    if (pickerScene) changeOrganPartsVisibilityForScene(pickerScene, name, value, type);
+  };
+
+  this.changeOrganPartsVisibilityCallback = function (name) {
+    return function (value) {
+      _this.changeOrganPartsVisibility(name, value);
+    };
+  };
+
+  this.changeBackgroundColour = function (backgroundColourString) {
+    var colour = new THREE.Color(backgroundColourString);
+
+    if (_this.zincRenderer) {
+      var internalRenderer = _this.zincRenderer.getThreeJSRenderer();
+
+      internalRenderer.setClearColor(colour, 1);
+    }
+  };
+
+  var addOrganPartToSceneData = function addOrganPartToSceneData(zincObject) {
+    if (zincObject.groupName) {
+      if (zincObject.isGeometry) {
+        if (!_this.sceneData.geometries.includes(zincObject.groupName)) {
+          _this.sceneData.geometries.push(zincObject.groupName);
+        }
+      } else if (zincObject.isGlyphset) {
+        if (!_this.sceneData.glyphsets.includes(zincObject.groupName)) {
+          _this.sceneData.glyphsets.push(zincObject.groupName);
+        }
+      } else if (zincObject.isLines) {
+        if (!_this.sceneData.lines.includes(zincObject.groupName)) {
+          _this.sceneData.lines.push(zincObject.groupName);
+        }
+      } else if (zincObject.isPointset) {
+        if (!_this.sceneData.pointsets.includes(zincObject.groupName)) {
+          _this.sceneData.pointsets.push(zincObject.groupName);
+        }
+      }
+    }
+  };
+
+  var addOrganPart = function addOrganPart(systemName, partName, useDefautColour, zincObject) {
+    for (var i = 0; i < organPartAddedCallbacks.length; i++) {
+      organPartAddedCallbacks[i](zincObject.groupName, _this.scene.isTimeVarying(), zincObject);
+    }
+
+    if (useDefautColour) modelsLoader.setGeometryColour(zincObject, systemName, partName);
+    addOrganPartToSceneData(zincObject);
+    var annotation = new (__webpack_require__("984d").annotation)();
+    annotation.data = {
+      species: _this.sceneData.currentSpecies,
+      system: systemName,
+      part: partName,
+      group: zincObject.groupName
+    };
+    zincObject.userData = [annotation];
+  };
+  /**
+  * New organs geometry has been added to the scene, add UIs and make
+  * sure the viewport is correct.
+  */
+
+
+  var _addOrganPartCallback = function _addOrganPartCallback(systemName, partName, useDefautColour) {
+    return function (zincObject) {
+      addOrganPart(systemName, partName, useDefautColour, zincObject);
+    };
+  };
+
+  var downloadCompletedCallback = function downloadCompletedCallback() {
+    return function () {
+      _this.settingsChanged();
+
+      _this.sceneData.timeVarying = _this.scene.isTimeVarying();
+      if (finishDownloadCallback) finishDownloadCallback();
+    };
+  };
+
+  var singleItemDownloadCompletedCallback = function singleItemDownloadCompletedCallback(systemName, partName, useDefautColour) {
+    return function (geometry) {
+      addOrganPart(systemName, partName, useDefautColour, geometry);
+
+      _this.settingsChanged();
+    };
+  };
+  /**
+  * Toggle data field displays. Data fields displays flow/pressure and      <button @click="play">Play</button>
+  * other activities of the organs.
+  */
+
+
+  this.updateFieldvisibility = function (dataFields, value) {
+    for (var i = 0; i < dataFields.length; i++) {
+      if (value != i) {
+        var geometryName = dataFields[i].PartName;
+
+        _this.changeOrganPartsVisibility(geometryName, false);
+      }
+    }
+
+    if (value > -1) {
+      var partName = dataFields[value].PartName;
+
+      if (_this.scene.findGeometriesWithGroupName(partName).length > 0 || _this.scene.findGlyphsetsWithGroupName(partName).length > 0) {
+        _this.changeOrganPartsVisibility(partName, true);
+      } else {
+        var partDetails = getOrganDetails(dataFields[value].SystemName, partName);
+
+        if (partDetails != undefined) {
+          _this.scene.loadMetadataURL(modelsLoader.getOrgansDirectoryPrefix() + "/" + partDetails.meta);
+        }
+      }
+    }
+  };
+  /**
+  * Return an array containing name(s) of species that also contains the
+  * currently displayed organs.
+  * 
+  * @returns {Array} containing species name
+  */
+
+
+  this.getAvailableSpecies = function (currentSpecies, currentSystem, currentPart) {
+    var availableSpecies = new Array();
+    availableSpecies.push("none");
+    var keysArray = Object.keys(organsFileMap);
+
+    for (index in keysArray) {
+      var species = keysArray[index];
+
+      if (species != currentSpecies) {
+        if (organsFileMap[species].hasOwnProperty(currentSystem) && organsFileMap[species][currentSystem].hasOwnProperty(currentPart)) {
+          availableSpecies.push(species);
+        }
+      }
+    }
+
+    return availableSpecies;
+  };
+
+  var setSceneData = function setSceneData(speciesName, systemName, partName, organsDetails) {
+    _this.sceneData.nerveMapIsActive = false;
+    _this.sceneData.nerveMap = undefined;
+    _this.sceneData.metaURL = "";
+    _this.sceneData.viewURL = "";
+    _this.sceneData.currentSpecies = speciesName;
+    _this.sceneData.currentSystem = systemName;
+    _this.sceneData.currentPart = partName;
+    _this.sceneData.currentTime = 0.0;
+
+    _this.sceneData.geometries.splice(0);
+
+    _this.sceneData.lines.splice(0);
+
+    _this.sceneData.glyphsets.splice(0);
+
+    _this.sceneData.pointsets.splice(0);
+
+    _this.sceneData.timeVarying = false; // This is used as title
+
+    var name = "";
+    if (speciesName) name = speciesName + "/";
+    if (systemName) name = systemName + "/";
+    if (partName) name = partName;
+    _this.sceneData.currentName = name;
+  };
+
+  this.loadOrgansFromURL = function (url, speciesName, systemName, partName, viewURL) {
+    if (_this.zincRenderer) {
+      if (partName && _this.sceneData.metaURL !== url) {
+        setSceneData(speciesName, systemName, partName, undefined);
+        var name = _this.sceneData.currentName;
+
+        var organScene = _this.zincRenderer.getSceneByName(name);
+
+        if (organScene) {
+          organScene.clearAll();
+        } else {
+          organScene = _this.zincRenderer.createScene(name);
+        }
+
+        for (var i = 0; i < sceneChangedCallbacks.length; i++) {
+          sceneChangedCallbacks[i](_this.sceneData);
+        }
+
+        if (viewURL && viewURL != "") {
+          _this.sceneData.viewURL = viewURL;
+          organScene.loadViewURL(_this.sceneData.viewURL);
+        } else {
+          _this.sceneData.viewURL = undefined;
+        }
+
+        _this.sceneData.metaURL = url;
+        organScene.loadMetadataURL(url, _addOrganPartCallback(systemName, partName, false), downloadCompletedCallback());
+        _this.scene = organScene;
+
+        _this.zincRenderer.setCurrentScene(organScene);
+
+        _this.graphicsHighlight.reset();
+
+        var zincCameraControl = organScene.getZincCameraControls();
+        zincCameraControl.enableRaycaster(organScene, _pickingCallback(), _hoverCallback());
+        zincCameraControl.setMouseButtonAction("AUXILIARY", "ZOOM");
+        zincCameraControl.setMouseButtonAction("SECONDARY", "PAN");
+      }
+    }
+  };
+
+  this.alignCameraWithSelectedObject = function (transitionTime) {
+    var objects = _this.graphicsHighlight.getSelected();
+
+    if (objects && objects[0] && objects[0].userData) {
+      _this.scene.alignObjectToCameraView(objects[0].userData, transitionTime);
+    }
+  };
+
+  this.exportSettings = function () {
+    var settings = {};
+    settings.name = _this.instanceName;
+    if (_this.sceneData.currentSystem) settings.system = _this.sceneData.currentSystem;
+    if (_this.sceneData.currentSpecies) settings.species = _this.sceneData.currentSpecies;
+    if (_this.sceneData.currentPart) settings.part = _this.sceneData.currentPart;
+    settings.metaURL = _this.sceneData.metaURL;
+    if (_this.sceneData.viewURL) settings.viewURL = _this.sceneData.viewURL;
+    settings.dialog = "Organ Viewer";
+    return settings;
+  };
+
+  this.importSettings = function (settings) {
+    if (settings && settings.dialog == this.typeName) {
+      _this.setName(settings.name);
+
+      if (settings.metaURL !== undefined && settings.metaURL != "") {
+        _this.loadOrgansFromURL(settings.metaURL, settings.species, settings.system, settings.part, settings.viewURL);
+      } else {
+        _this.loadOrgans(settings.species, settings.system, settings.part);
+      }
+
+      return true;
+    }
+
+    return false;
+  };
+  /**
+   * initialise loading of the html layout for the organs panel, this is
+   * called when the {@link PJP.OrgansViewer} is created.
+   * 
+   * @async
+   */
+
+
+  var initialise = function initialise() {
+    _this.initialiseRenderer(undefined);
+
+    if (_this.zincRenderer) {
+      _this.zincRenderer.addPreRenderCallbackFunction(preRenderUpdateCallback());
+
+      _this.zincRenderer.addPostRenderCallbackFunction(postRenderUpdateCallback());
+    }
+  };
+
+  initialise();
+};
+
+OrgansViewer.prototype = Object.create(__webpack_require__("8278").RendererModule.prototype);
+exports.OrgansViewer = OrgansViewer;
+
+/***/ }),
+
+/***/ "55ee":
+/***/ (function(module, exports) {
+
+module.exports = require("element-ui/lib/theme-chalk/checkbox.css");
+
+/***/ }),
+
+/***/ "5810":
+/***/ (function(module, exports, __webpack_require__) {
+
+// extracted by mini-css-extract-plugin
+
+/***/ }),
+
+/***/ "5a43":
+/***/ (function(module, exports) {
+
+function _arrayLikeToArray(arr, len) {
+  if (len == null || len > arr.length) len = arr.length;
+
+  for (var i = 0, arr2 = new Array(len); i < len; i++) {
+    arr2[i] = arr[i];
+  }
+
+  return arr2;
+}
+
+module.exports = _arrayLikeToArray;
+
+/***/ }),
+
+/***/ "5ec5":
+/***/ (function(module, exports, __webpack_require__) {
+
+var _toConsumableArray = __webpack_require__("448a");
+
+var THREE = __webpack_require__("9206").THREE;
+/**
+ * This module manages highlighted and selected objects in 3D modules. 
+ * 
+ * @class
+ * @returns {exports.GraphicsHighlight}
+ */
+
+
+exports.GraphicsHighlight = function () {
+  var currentHighlightedObjects = [];
+  var currentSelectedObjects = [];
+  this.highlightColour = [1, 0, 0];
+  this.selectColour = [0, 1, 0];
+  this.originalColour = [0, 0, 0];
+
+  var _this = this;
+
+  var isDifferent = function isDifferent(array1, array2) {
+    if (array1.length == 0 && array2.length == 0) return false;
+
+    for (var i = 0; i < array1.length; i++) {
+      var matched = false;
+
+      for (var j = 0; j < array2.length; j++) {
+        if (array1[i] === array2[j]) {
+          matched = true;
+        }
+      }
+
+      if (!matched) return true;
+    }
+
+    for (var _i = 0; _i < array2.length; _i++) {
+      var _matched = false;
+
+      for (var _j = 0; _j < array1.length; _j++) {
+        if (array2[_i] === array1[_j]) {
+          _matched = true;
+        }
+      }
+
+      if (!_matched) return true;
+    }
+
+    return false;
+  };
+
+  var getUnmatchingObjects = function getUnmatchingObjects(objectsArray1, objectsArray2) {
+    var unmatchingObjects = [];
+    if (objectsArray2.length == 0) return objectsArray1;
+
+    for (var i = 0; i < objectsArray1.length; i++) {
+      var matched = false;
+
+      for (var j = 0; j < objectsArray2.length; j++) {
+        if (objectsArray1[i] === objectsArray2[j]) {
+          matched = true;
+        }
+      }
+
+      if (!matched) unmatchingObjects.push(objectsArray1[i]);
+    }
+
+    return unmatchingObjects;
+  };
+
+  this.setHighlighted = function (objects) {
+    var previousHighlightedObjects = currentHighlightedObjects;
+
+    _this.resetHighlighted(); // Selected object cannot be highlighted
+
+
+    var array = getUnmatchingObjects(objects, currentSelectedObjects);
+    var fullList = getFullListOfObjects(array);
+
+    for (var i = 0; i < fullList.length; i++) {
+      var _fullList$i$material$;
+
+      if (fullList[i] && fullList[i].material && fullList[i].material.emissive) (_fullList$i$material$ = fullList[i].material.emissive).setRGB.apply(_fullList$i$material$, _toConsumableArray(_this.highlightColour));
+    }
+
+    currentHighlightedObjects = array;
+    return isDifferent(currentHighlightedObjects, previousHighlightedObjects);
+  };
+
+  this.setSelected = function (objects) {
+    // first find highlighted object that are not selected
+    var previousHSelectedObjects = currentSelectedObjects;
+    var array = getUnmatchingObjects(currentHighlightedObjects, objects);
+    currentHighlightedObjects = array;
+
+    _this.resetSelected();
+
+    var fullList = getFullListOfObjects(objects);
+
+    for (var i = 0; i < fullList.length; i++) {
+      var _fullList$i$material$2;
+
+      if (fullList[i] && fullList[i].material && fullList[i].material.emissive) (_fullList$i$material$2 = fullList[i].material.emissive).setRGB.apply(_fullList$i$material$2, _toConsumableArray(_this.selectColour));
+    }
+
+    currentSelectedObjects = objects;
+    return isDifferent(currentSelectedObjects, previousHSelectedObjects);
+  };
+
+  var getFullListOfObjects = function getFullListOfObjects(objects) {
+    var fullList = [];
+
+    for (var i = 0; i < objects.length; i++) {
+      if (objects[i].material) fullList.push(objects[i]);
+    }
+
+    return fullList;
+  };
+
+  this.resetHighlighted = function () {
+    var fullList = getFullListOfObjects(currentHighlightedObjects);
+
+    for (var i = 0; i < fullList.length; i++) {
+      if (fullList[i] && fullList[i].material) {
+        var _fullList$i$material$3;
+
+        if (fullList[i].material.emissive) (_fullList$i$material$3 = fullList[i].material.emissive).setRGB.apply(_fullList$i$material$3, _toConsumableArray(_this.originalColour));
+        if (fullList[i].material.depthFunc) fullList[i].material.depthFunc = THREE.LessEqualDepth;
+      }
+    }
+
+    currentHighlightedObjects = [];
+  };
+
+  this.resetSelected = function () {
+    var fullList = getFullListOfObjects(currentSelectedObjects);
+
+    for (var i = 0; i < fullList.length; i++) {
+      if (fullList[i] && fullList[i].material) {
+        var _fullList$i$material$4;
+
+        if (fullList[i].material.emissive) (_fullList$i$material$4 = fullList[i].material.emissive).setRGB.apply(_fullList$i$material$4, _toConsumableArray(_this.originalColour));
+        if (fullList[i].material.depthFunc) fullList[i].material.depthFunc = THREE.LessEqualDepth;
+      }
+    }
+
+    currentSelectedObjects = [];
+  };
+
+  this.getSelected = function () {
+    return currentSelectedObjects;
+  };
+
+  this.reset = function () {
+    _this.resetSelected();
+
+    _this.resetHighlighted();
+  };
+};
+
+/***/ }),
+
+/***/ "5fef":
+/***/ (function(module, exports) {
+
+module.exports = require("core-js/modules/es.regexp.to-string");
+
+/***/ }),
+
+/***/ "6049":
+/***/ (function(module, exports) {
+
+module.exports = require("core-js/modules/es.symbol");
+
+/***/ }),
+
+/***/ "642d":
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_8_oneOf_1_0_node_modules_vue_cli_service_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_ScaffoldVuer_vue_vue_type_style_index_1_lang_scss___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("7d9b");
+/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_8_oneOf_1_0_node_modules_vue_cli_service_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_ScaffoldVuer_vue_vue_type_style_index_1_lang_scss___WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_mini_css_extract_plugin_dist_loader_js_ref_8_oneOf_1_0_node_modules_vue_cli_service_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_ScaffoldVuer_vue_vue_type_style_index_1_lang_scss___WEBPACK_IMPORTED_MODULE_0__);
+/* unused harmony reexport * */
+
+
+/***/ }),
+
+/***/ "6579":
+/***/ (function(module, exports) {
+
+module.exports = require("core-js/modules/es.array.slice");
+
+/***/ }),
+
+/***/ "6613":
+/***/ (function(module, exports, __webpack_require__) {
+
+__webpack_require__("e42b");
+
+__webpack_require__("6579");
+
+__webpack_require__("bcd8");
+
+__webpack_require__("850c");
+
+__webpack_require__("5fef");
+
+__webpack_require__("907b");
+
+var arrayLikeToArray = __webpack_require__("5a43");
+
+function _unsupportedIterableToArray(o, minLen) {
+  if (!o) return;
+  if (typeof o === "string") return arrayLikeToArray(o, minLen);
+  var n = Object.prototype.toString.call(o).slice(8, -1);
+  if (n === "Object" && o.constructor) n = o.constructor.name;
+  if (n === "Map" || n === "Set") return Array.from(n);
+  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return arrayLikeToArray(o, minLen);
+}
+
+module.exports = _unsupportedIterableToArray;
+
+/***/ }),
+
+/***/ "6814":
+/***/ (function(module, exports) {
+
+module.exports = require("lodash/orderBy");
+
+/***/ }),
+
+/***/ "6aa6":
+/***/ (function(module, exports, __webpack_require__) {
+
+__webpack_require__("ab7e");
+
+__webpack_require__("6bb1");
+
+__webpack_require__("6579");
+
+__webpack_require__("7c81");
+
+__webpack_require__("bcd8");
+
+__webpack_require__("fd48");
+
+var MODULE_CHANGE = {
+  ALL: 0,
+  DESTROYED: 1,
+  NAME_CHANGED: 2,
+  SETTINGS_CHANGED: 3
+};
+
+var BaseModule = function BaseModule() {
+  this.typeName = "Base Module";
+  this.instanceName = "default";
+  this.onChangedCallbacks = [];
+  /**  Notifier handle for informing other modules of any changes **/
+
+  this.eventNotifiers = [];
+};
+
+BaseModule.prototype.setName = function (name) {
+  if (name && this.instanceName !== name) {
+    this.instanceName = name;
+    var callbackArray = this.onChangedCallbacks.slice();
+
+    for (var i = 0; i < callbackArray.length; i++) {
+      callbackArray[i](this, MODULE_CHANGE.NAME_CHANGED);
+    }
   }
-	 
-	/**
-	 * Callback function when a pickable object has been picked. It will then
-	 * call functions in tissueViewer and cellPanel to show corresponding
-	 * informations.
-	 * 
-	 * @callback
-	 */
-	var _pickingCallback = function() {
-		return function(intersects, window_x, window_y) {
-      var intersected = _this.getIntersectedObject(intersects);
-      var idObject = getIdObjectFromIntersect(intersected);
-      if (idObject.id) {
-        if (_this.toolTip !== undefined) {
-          _this.toolTip.setText(idObject.id);
-          _this.toolTip.show(window_x, window_y);
-        }
-        _this.displayMessage(idObject.object.name + " selected.");
+};
 
-        if (idObject.object.userData.isGlyph) {
-          if (idObject.object.name)
-            _this.setSelectedByObjects([idObject.object], true);
-          else
-            _this.setSelectedByZincObject(idObject.object.userData.getGlyphset(), true);
-        } else {
-          _this.setSelectedByObjects([idObject.object], true);
-        }
-        return;
-      } else {
-				if (_this.toolTip !== undefined) {
-					_this.toolTip.hide();
-				}
-				_this.setSelectedByObjects([], true);
-			}
-		}
-	};
-	
-	/**
-	 * Callback function when a pickable object has been hovered over. It will
-	 * show objecty id/name as _this.toolTip text.
-	 * 
-	 * @callback
-	 */
-	var _hoverCallback = function() {
-		return function(intersects, window_x, window_y) {
-      var intersected = _this.getIntersectedObject(intersects);
-      var idObject = getIdObjectFromIntersect(intersected);
-      if (idObject.id) {
-        _this.displayArea.style.cursor = "pointer";
-        if (_this.toolTip !== undefined) {
-          _this.toolTip.setText(idObject.id);
-          _this.toolTip.show(window_x, window_y);
-        }
-        _this.setHighlightedByObjects([idObject.object], true);
-        return;
-      }
-      else {
-        if (_this.toolTip !== undefined) {
-					_this.toolTip.hide();
-				}
-				_this.displayArea.style.cursor = "auto";
-				_this.setHighlightedByObjects([], true);
-      }
-		}
-	};
-
-	var changeOrganPartsVisibilityForScene = function(scene, name, value, type) {
-		if (type == "all" || type == "geometries") {
-			var geometries = scene.findGeometriesWithGroupName(name);
-			for (var i = 0; i < geometries.length; i ++ ) {
-				geometries[i].setVisibility(value);
-			}
-		}
-		if (type == "all" || type == "glyphsets") {
-			var glyphsets = scene.findGlyphsetsWithGroupName(name);
-			for (var i = 0; i < glyphsets.length; i ++ ) {
-				glyphsets[i].setVisibility(value);
-			}
-		}
-		if (type == "all" || type == "pointsets") {
-			var pointsets = scene.findPointsetsWithGroupName(name);
-			for (var i = 0; i < pointsets.length; i ++ ) {
-				pointsets[i].setVisibility(value);
-			}
-		}
-		if (type == "all" || type == "lines") {
-			var lines = scene.findLinesWithGroupName(name);
-			for (var i = 0; i < lines.length; i ++ ) {
-				lines[i].setVisibility(value);
-			}
-		}
-	}
-
-	/**
-	 * Change visibility for parts of the current scene.
-	 */
-	this.changeGeometriesVisibility = function(name, value) {
-		changeOrganPartsVisibilityForScene(_this.scene, name, value, 'geometries');
-		if (pickerScene)
-			changeOrganPartsVisibilityForScene(pickerScene, name, value, 'geometries');
-	}
-
-	/**
-	 * Change visibility for parts of the current scene.
-	 */
-	this.changeGlyphsetsVisibility = function(name, value) {
-		changeOrganPartsVisibilityForScene(_this.scene, name, value, 'glyphsets');
-		if (pickerScene)
-			changeOrganPartsVisibilityForScene(pickerScene, name, value, 'glyphsets');
-	}
-
-	/**
-	 * Change visibility for parts of the current scene.
-	 */
-	this.changeLinesVisibility = function(name, value) {
-		changeOrganPartsVisibilityForScene(_this.scene, name, value, 'lines');
-		if (pickerScene)
-			changeOrganPartsVisibilityForScene(pickerScene, name, value, 'lines');
-	}
-
-	/**
-	 * Change visibility for parts of the current scene.
-	 */
-	this.changePointsetsVisibility = function(name, value) {
-		changeOrganPartsVisibilityForScene(_this.scene, name, value, 'pointsets');
-		if (pickerScene)
-			changeOrganPartsVisibilityForScene(pickerScene, name, value, 'pointsets');
+BaseModule.prototype.settingsChanged = function () {
+  var callbackArray = this.onChangedCallbacks.slice();
+
+  for (var i = 0; i < callbackArray.length; i++) {
+    callbackArray[i](this, MODULE_CHANGE.SETTINGS_CHANGED);
   }
-  			
-	/**
-	 * Change visibility for parts of the current scene.
-	 */
-	this.changeOrganPartsVisibility = function(name, value, typeIn) {
-		var type = "all";
-		if (typeIn !== undefined)
-			type = typeIn;
-		changeOrganPartsVisibilityForScene(_this.scene, name, value, type);
-		if (pickerScene)
-			changeOrganPartsVisibilityForScene(pickerScene, name, value, type);
-	}
-	
-	this.changeOrganPartsVisibilityCallback = function(name) {
-		return function(value) {
-			_this.changeOrganPartsVisibility(name, value);
-		}
-	}
-	
-	/**
-	 * Change some of the ZincGeometry property for never map geometry
-	 * 
-	 * @callback
-	 */
-	var _addNerveMapGeometryCallback = function(GroupName) {
-		return function(geometry) {
-			geometry.groupName = GroupName;
-			if (imageCombiner && geometry.morph && geometry.morph.material.map) {
-				geometry.morph.material.map = new THREE.Texture(imageCombiner.getCombinedImage());
-				geometry.morph.material.map.needsUpdate = true;
-				geometry.morph.material.needsUpdate = true;
-			}
-		}
-	}
-	
-	/**
-	 * Read in the nerve map models onto the primary renderer when nerve map has
-	 * been toggled on.
-	 */
-	var setupNerveMapPrimaryRenderer = function() {
-		var sceneName = _this.sceneData.currentName + "_nervemap";
-		nerveMapScene = _this.zincRenderer.getSceneByName(sceneName);
-		if (nerveMapScene == undefined) {
-			var downloadPath = modelsLoader.getOrgansDirectoryPrefix() + "/" + _this.sceneData.nerveMap.threed.meta;
-			nerveMapScene = _this.zincRenderer.createScene(sceneName);
-			nerveMapScene.loadMetadataURL(downloadPath, _addNerveMapGeometryCallback("threed"));
-			if (_this.sceneData.nerveMap.threed.view !== undefined)
-				nerveMapScene.loadViewURL(modelsLoader.getOrgansDirectoryPrefix() + "/" + _this.sceneData.nerveMap.threed.view);
-			else {
-				nerveMapScene.loadViewURL(modelsLoader.getBodyDirectoryPrefix() + "/body_view.json");
-			}
-			nerveMapScene.ambient.intensity = 8.0;
-			nerveMapScene.directionalLight.intensity = 0;
-			var zincCameraControl = nerveMapScene.getZincCameraControls();
-			zincCameraControl.setMouseButtonAction("AUXILIARY", "ZOOM");
-			zincCameraControl.setMouseButtonAction("SECONDARY", "PAN");
-			_this.sceneData.nerveMap.additionalReader = new (__webpack_require__("6fd2").VaryingTexCoordsReader)(nerveMapScene);
-			var urlsArray = [ modelsLoader.getOrgansDirectoryPrefix() + "/digestive/stomach/nerve_map/3d/xi1_time_0.json",
-			                  modelsLoader.getOrgansDirectoryPrefix() + "/digestive/stomach/nerve_map/3d/xi1_time_1.json",
-			                  modelsLoader.getOrgansDirectoryPrefix() + "/digestive/stomach/nerve_map/3d/xi0_time_0.json"];
-			_this.sceneData.nerveMap.additionalReader.loadURLsIntoBufferGeometry(urlsArray);
-		}
-		_this.zincRenderer.setCurrentScene(nerveMapScene);
-		_this.graphicsHighlight.reset();
-	}
-	
-	var activateAdditionalNerveMapRenderer = function() {
-	    for (var i = 0; i < layoutUpdateRequiredCallbacks.length;i++) {
-	      layoutUpdateRequiredCallbacks[i](false, true);
-	    }
-	}
-	
-	/**
-	 * Nerve map has been toggled on/off, change organs renderer layput.
-	 */
-	this.changeNerveMapVisibility = function() {
-		_this.sceneData.nerveMapIsActive = !_this.sceneData.nerveMapIsActive;
-		if (_this.sceneData.nerveMapIsActive)
-			setupNerveMapPrimaryRenderer();
-		else {
-			_this.zincRenderer.setCurrentScene(_this.scene);
-			_this.graphicsHighlight.reset();
-		}
-		activateAdditionalNerveMapRenderer();
-	}
-	
-	this.changeBackgroundColour = function(backgroundColourString) {
-		var colour = new THREE.Color(backgroundColourString);
-		if (_this.zincRenderer) {
-			var internalRenderer = _this.zincRenderer.getThreeJSRenderer();
-			internalRenderer.setClearColor( colour, 1 );
-		}
-	}
-
-	var addOrganPartToSceneData = function(zincObject) {
-		if (zincObject.groupName) {
-			if (zincObject.isGeometry) {
-				if (!_this.sceneData.geometries.includes(zincObject.groupName)) {
-					_this.sceneData.geometries.push(zincObject.groupName);
-				}
-			} else if (zincObject.isGlyphset) {
-				if (!_this.sceneData.glyphsets.includes(zincObject.groupName)) {
-					_this.sceneData.glyphsets.push(zincObject.groupName);
-				}
-			} else if (zincObject.isLines) {
-				if (!_this.sceneData.lines.includes(zincObject.groupName)) {
-					_this.sceneData.lines.push(zincObject.groupName);
-				}
-			} else if (zincObject.isPointset) {
-				if (!_this.sceneData.pointsets.includes(zincObject.groupName)) {
-					_this.sceneData.pointsets.push(zincObject.groupName);
-				}
-			}
-		}
-	}
-
-	var addOrganPart = function(systemName, partName, useDefautColour, zincObject) {
-    for (var i = 0; i < organPartAddedCallbacks.length;i++) {
-      organPartAddedCallbacks[i](zincObject.groupName, _this.scene.isTimeVarying(), zincObject);
-    }
-    if (useDefautColour)
-      modelsLoader.setGeometryColour(zincObject, systemName, partName);
-    addOrganPartToSceneData(zincObject);
-		if (zincObject.groupName) {
-			_this.displayMessage(zincObject.groupName + " loaded.");
-		} else {
-			_this.displayMessage("Resource loaded.");
-		}
-		var annotation = new (__webpack_require__("a0d7").annotation)();
-		annotation.data = {species:_this.sceneData.currentSpecies, system:systemName, part:partName, group:zincObject.groupName};
-		zincObject.userData = [annotation];
-	}
-
-	  /**
-		 * New organs geometry has been added to the scene, add UIs and make
-		 * sure the viewport is correct.
-		 */
-	  var _addOrganPartCallback = function(systemName, partName, useDefautColour) {
-	    return function(zincObject) {
-	    	addOrganPart(systemName, partName, useDefautColour, zincObject);
-	    }
-	  }
-	  
-	  var downloadCompletedCallback = function() {
-		  return function() {
-			  _this.settingsChanged();
-			  _this.sceneData.timeVarying = _this.scene.isTimeVarying();
-        _this.displayMessage("All resources loaded.");
-        if (finishDownloadCallback)
-          finishDownloadCallback();
-		  }
-	  }
-	  
-	  var singleItemDownloadCompletedCallback = function(systemName, partName, useDefautColour) {
-		    return function(geometry) {
-		    	addOrganPart(systemName, partName, useDefautColour, geometry);
-		    	_this.settingsChanged();
-		    }
-	  }
-	  
-	  /**
-		 * Toggle data field displays. Data fields displays flow/pressure and      <button @click="play">Play</button>
-		 * other activities of the organs.
-		 */
-	  this.updateFieldvisibility = function(dataFields, value) {
-      for ( var i = 0; i < dataFields.length; i ++ ) {
-        if (value != i) {
-          var geometryName = dataFields[i].PartName;
-          _this.changeOrganPartsVisibility(geometryName, false);
-        }
-      }
-      if (value > -1) {
-        var partName = dataFields[value].PartName;
-        if ((_this.scene.findGeometriesWithGroupName(partName).length > 0) ||
-          (_this.scene.findGlyphsetsWithGroupName(partName).length > 0)) {
-          _this.changeOrganPartsVisibility(partName, true);
-        } else {
-          var partDetails = getOrganDetails(dataFields[value].SystemName, partName);
-          if (partDetails != undefined) {
-            _this.scene.loadMetadataURL(modelsLoader.getOrgansDirectoryPrefix() + "/" + partDetails.meta);
-          }
-        }
-	    }
-	  }
-	  
-	  /**
-		 * Return an array containing name(s) of species that also contains the
-		 * currently displayed organs.
-		 * 
-		 * @returns {Array} containing species name
-		 */
-	  this.getAvailableSpecies = function(currentSpecies, currentSystem, currentPart) {
-	    var availableSpecies = new Array();
-	    availableSpecies.push("none");
-	    var keysArray = Object.keys(organsFileMap);
-	    for (index in keysArray) {
-	      var species = keysArray[index];
-	      if (species != currentSpecies) {
-	        if (organsFileMap[species].hasOwnProperty(currentSystem) &&
-	            organsFileMap[species][currentSystem].hasOwnProperty(currentPart)) {
-	          availableSpecies.push(species);
-	        }
-	      }
-	    }
-	    return availableSpecies;
-	  }
-	  
-	  var setSceneData = function(speciesName, systemName, partName, organsDetails) {
-      _this.sceneData.nerveMapIsActive = false;
-      _this.sceneData.nerveMap = undefined;
-      _this.sceneData.metaURL = "";
-      _this.sceneData.viewURL = "";
-      _this.sceneData.currentSpecies = speciesName;
-      _this.sceneData.currentSystem = systemName;
-			_this.sceneData.currentPart = partName;
-			_this.sceneData.currentTime = 0.0;
-			_this.sceneData.geometries.splice(0);
-			_this.sceneData.lines.splice(0);
-			_this.sceneData.glyphsets.splice(0);
-			_this.sceneData.pointsets.splice(0);
-			_this.sceneData.timeVarying = false;
-      // This is used as title
-      var name = "";
-      if (speciesName)
-        name = speciesName + "/";
-      if (systemName)
-        name = systemName + "/";
-      if (partName)
-        name = partName;
-      _this.sceneData.currentName = name;
-	  }
-
-	  this.loadOrgansFromURL = function(url, speciesName, systemName, partName, viewURL) {
-		  if (_this.zincRenderer) {
-			  if (partName && (_this.sceneData.metaURL !== url)) {
-			      setSceneData(speciesName, systemName, partName, undefined);
-			      var name = _this.sceneData.currentName;
-			      var organScene = _this.zincRenderer.getSceneByName(name);
-			      if (organScene) {
-			    	  organScene.clearAll();
-			      } else {
-			    	  organScene = _this.zincRenderer.createScene(name);
-			      }
-			      for (var i = 0; i < sceneChangedCallbacks.length;i++) {
-			    	  sceneChangedCallbacks[i](_this.sceneData);
-			      }
-			      if (viewURL && viewURL != "") {
-			    	  _this.sceneData.viewURL = viewURL;
-				      organScene.loadViewURL(_this.sceneData.viewURL);
-			      } else
-			    	  _this.sceneData.viewURL = undefined;
-			      _this.sceneData.metaURL = url;
-			      _this.displayMessage("Downloading...");
-			      organScene.loadMetadataURL(url, _addOrganPartCallback(systemName, partName, false),
-			    	  downloadCompletedCallback());	      
-			      _this.scene = organScene;
-			      _this.zincRenderer.setCurrentScene(organScene);
-			      _this.graphicsHighlight.reset();
-			      var zincCameraControl = organScene.getZincCameraControls();
-			      zincCameraControl.enableRaycaster(organScene, _pickingCallback(), _hoverCallback());
-			      zincCameraControl.setMouseButtonAction("AUXILIARY", "ZOOM");
-			      zincCameraControl.setMouseButtonAction("SECONDARY", "PAN");
-			  }
-		  }
-	  }
-	  	  
-	  this.alignCameraWithSelectedObject = function(transitionTime) {
-	    var objects = _this.graphicsHighlight.getSelected();
-	    if (objects && objects[0] && objects[0].userData) {
-	      _this.scene.alignObjectToCameraView(objects[0].userData, transitionTime);
-	    }
-	  }
-	  
-	  this.exportSettings = function() {
-		  var settings = {};
-		  settings.name = _this.instanceName;
-		  if (_this.sceneData.currentSystem)
-			  settings.system = _this.sceneData.currentSystem;
-		  if (_this.sceneData.currentSpecies)
-			  settings.species  = _this.sceneData.currentSpecies;
-		  if (_this.sceneData.currentPart)
-			  settings.part = _this.sceneData.currentPart;
-		  settings.metaURL = _this.sceneData.metaURL;
-		  if (_this.sceneData.viewURL)
-			  settings.viewURL = _this.sceneData.viewURL;
-		  settings.dialog = "Organ Viewer";
-		  return settings;
-	  }
-	  
-	  this.importSettings = function(settings) {
-		  if (settings && (settings.dialog == this.typeName)) {
-			  _this.setName(settings.name);
-			  if (settings.metaURL !== undefined && settings.metaURL != "") {
-				  _this.loadOrgansFromURL(settings.metaURL, settings.species,
-					settings.system, settings.part, settings.viewURL);
-			  } else {
-				  _this.loadOrgans(settings.species, settings.system, settings.part);
-			  }
-			  return true;
-		  }
-		  return false;
-	  }
-		
-	/**
-	 * initialise loading of the html layout for the organs panel, this is
-	 * called when the {@link PJP.OrgansViewer} is created.
-	 * 
-	 * @async
-	 */
-	 var initialise = function() {
-	   _this.initialiseRenderer(undefined);
-	   if (_this.zincRenderer) {
-       _this.zincRenderer.addPreRenderCallbackFunction(preRenderUpdateCallback());
-       _this.zincRenderer.addPostRenderCallbackFunction(postRenderUpdateCallback());
-     }
+};
+
+BaseModule.prototype.exportSettings = function () {
+  var settings = {};
+  settings.dialog = this.typeName;
+  settings.name = this.instanceName;
+  return settings;
+};
+
+BaseModule.prototype.importSettings = function (settings) {
+  if (settings.dialog == this.typeName) {
+    this.setName(settings.name);
+    return true;
   }
-	 
-	initialise();
 
-}
+  return false;
+};
 
-OrgansViewer.prototype = Object.create((__webpack_require__("7a89").RendererModule).prototype);
-exports.OrgansViewer = OrgansViewer;
+BaseModule.prototype.publishChanges = function (annotations, eventType) {
+  for (var i = 0; i < this.eventNotifiers.length; i++) {
+    this.eventNotifiers[i].publish(this, eventType, annotations);
+  }
+};
 
+BaseModule.prototype.getName = function () {
+  return this.instanceName;
+};
 
-/***/ }),
+BaseModule.prototype.destroy = function () {
+  //Make a temorary copy as the array may be altered during the loop
+  var callbackArray = this.onChangedCallbacks.slice();
 
-/***/ "6814":
-/***/ (function(module, exports) {
+  for (var i = 0; i < callbackArray.length; i++) {
+    callbackArray[i](this, MODULE_CHANGE.DESTROYED);
+  }
 
-module.exports = require("lodash/orderBy");
+  delete this;
+};
+
+BaseModule.prototype.addChangedCallback = function (callback) {
+  if (this.onChangedCallbacks.includes(callback) == false) this.onChangedCallbacks.push(callback);
+};
+
+BaseModule.prototype.removeChangedCallback = function (callback) {
+  var index = this.onChangedCallbacks.indexOf(callback);
+
+  if (index > -1) {
+    this.onChangedCallbacks.splice(index, 1);
+  }
+};
+
+BaseModule.prototype.addNotifier = function (eventNotifier) {
+  this.eventNotifiers.push(eventNotifier);
+};
+
+exports.BaseModule = BaseModule;
+exports.MODULE_CHANGE = MODULE_CHANGE;
 
 /***/ }),
 
@@ -1350,160 +1414,40 @@ module.exports = require("element-ui/lib/row");
 
 /***/ }),
 
-/***/ "6fd2":
+/***/ "7037":
 /***/ (function(module, exports, __webpack_require__) {
 
-var THREE = __webpack_require__("9206").THREE;
+__webpack_require__("6049");
 
-exports.VaryingTexCoordsReader = function(sceneIn) {
-	
-	var _this = this;
-	var finishCallbackFunction = undefined;
-	var bufferGeometry = undefined;
-	var zincGeometry = undefined;
-	var numberOfInputs = 0;
-	var completedInputs = 0;
-	var scene = sceneIn;
-	var currentMap = undefined;
-	var textureLoader = new THREE.TextureLoader();
-	var texture = new textureLoader.load( 'models/organsViewerModels/digestive/stomach/nerve_map/texture/ratstomach_innervation_square.png' );
-	texture.wrapS = THREE.RepeatWrapping;
-	texture.wrapT = THREE.RepeatWrapping;
-	texture.format = THREE.RGBFormat;
-	
-	var shadersUniforms = THREE.UniformsUtils.merge( [
-	  {
-		ambient  : { type: "c", value: new THREE.Color( 0x000000 ) },
-		diffuse  : { type: "c", value: new THREE.Color( 0xffffff ) },
-		emissive : { type: "c", value: new THREE.Color( 0xbbbbbb ) },
-		specular : { type: "c", value: new THREE.Color( 0x111111 ) },
-		shininess: { type: "f", value: 100 },
-		opacity: { type: "f", value: 1.0 },
-		ambientLightColor: { type: "c", value: new THREE.Color( 0xF0F0F0 ) },
-		directionalLightColor: { type: "c", value: new THREE.Color( 0x555555) },
-		directionalLightDirection: { type: "v3", value: new THREE.Vector3()  },
-		offsetRepeat: { value: new THREE.Vector4( 0, 0, 1, 1 ) },
-		time: { type: "f", value: 0.0 },
-		slide_pos: { type: "f", value: 1.0 },
-		myTex: {type: 't', value: null}
-	} ] );
-
-	var addGeometryIntoBufferGeometry = function(order, geometry)
-	{
-		var arrayLength = geometry.faces.length * 3 * 3;
-		var positions = new Float32Array( arrayLength );
-		var colors = new Float32Array( arrayLength );
-		var normals = new Float32Array( arrayLength );
-		var texCoords = new Float32Array( geometry.faces.length * 3 * 2 );
-		if (bufferGeometry === undefined)
-			bufferGeometry = new THREE.BufferGeometry();
-		
-		geometry.faces.forEach( function ( face, index ) {
-			positions[ index * 9 + 0 ] = geometry.vertices[ face.a ].x;
-			positions[ index * 9 + 1 ] = geometry.vertices[ face.a ].y;
-			positions[ index * 9 + 2 ] = geometry.vertices[ face.a ].z;
-			positions[ index * 9 + 3 ] = geometry.vertices[ face.b ].x;
-			positions[ index * 9 + 4 ] = geometry.vertices[ face.b ].y;
-			positions[ index * 9 + 5 ] = geometry.vertices[ face.b ].z;
-			positions[ index * 9 + 6 ] = geometry.vertices[ face.c ].x;
-			positions[ index * 9 + 7 ] = geometry.vertices[ face.c ].y;
-			positions[ index * 9 + 8 ] = geometry.vertices[ face.c ].z;
-		
-			normals[ index * 9 + 0 ] = face.vertexNormals[0].x;
-			normals[ index * 9 + 1 ] = face.vertexNormals[0].y;
-			normals[ index * 9 + 2 ] = face.vertexNormals[0].z;
-			normals[ index * 9 + 3 ] = face.vertexNormals[1].x;
-			normals[ index * 9 + 4 ] = face.vertexNormals[1].y;
-			normals[ index * 9 + 5 ] = face.vertexNormals[1].z;
-			normals[ index * 9 + 6 ] = face.vertexNormals[2].x;
-			normals[ index * 9 + 7 ] = face.vertexNormals[2].y;
-			normals[ index * 9 + 8 ] = face.vertexNormals[2].z;
-			
-			texCoords[ index * 6 + 0] = geometry.faceVertexUvs[ 0 ][index][0].x;
-			texCoords[ index * 6 + 1] = geometry.faceVertexUvs[ 0 ][index][0].y;
-			texCoords[ index * 6 + 2] = geometry.faceVertexUvs[ 0 ][index][1].x;
-			texCoords[ index * 6 + 3] = geometry.faceVertexUvs[ 0 ][index][1].y;
-			texCoords[ index * 6 + 4] = geometry.faceVertexUvs[ 0 ][index][2].x;
-			texCoords[ index * 6 + 5] = geometry.faceVertexUvs[ 0 ][index][2].y;
-		} );
-		
-		
-		if (order == 0) {
-			bufferGeometry.addAttribute( "position", new THREE.BufferAttribute( positions, 3) );
-			bufferGeometry.addAttribute( "normal", new THREE.BufferAttribute( normals, 3 ) );
-			bufferGeometry.addAttribute( "uv", new THREE.BufferAttribute( texCoords, 2 ) );
-		} else {
-			var positionStr = "position_" + order;
-			var normalStr = "normal_" + order;
-			var uvsStr = "uv_" + order;
-			bufferGeometry.addAttribute( positionStr, new THREE.BufferAttribute( positions, 3) );
-			bufferGeometry.addAttribute( normalStr, new THREE.BufferAttribute( normals, 3 ) );
-			bufferGeometry.addAttribute( uvsStr, new THREE.BufferAttribute( texCoords, 2 ) );
-		}
-
-	}
-	
-	var meshReady = function(bufferGeometryIn, shaderText, material){
-		var shaderMaterial = new THREE.RawShaderMaterial( {
-			vertexShader: shaderText[0],
-			fragmentShader: shaderText[1],
-			uniforms: shadersUniforms
-		} );
-		shaderMaterial.uniforms.myTex.value = texture;
-		shaderMaterial.side = THREE.DoubleSide;
-		shaderMaterial.depthTest = true;
-		shaderMaterial.needsUpdate = true;
-		shaderMaterial.map = texture;
-		shaderMaterial.uniforms.myTex.value.needsUpdate = true;
-		shaderMaterial.opacity = 1.0;
-		zincGeometry = scene.addZincGeometry(bufferGeometryIn, 30001, undefined, undefined, false, false, true, undefined, shaderMaterial);
-		zincGeometry.groupName = "varyingTexture";
-	}
-	
-	var myLoader = function(order, shaderText) {
-	    return function(geometry, materials){
-	    	var material = 0;
-	    	addGeometryIntoBufferGeometry(order, geometry);
-	    	completedInputs++;
-	    	if (completedInputs == numberOfInputs) {
-	    		meshReady(bufferGeometry, shaderText, material);
-	    		if (finishCallbackFunction != undefined && (typeof finishCallbackFunction == 'function'))
-	    			finishCallbackFunction(bufferGeometry);
-	    	}
-	    }
-	}
-	
-	this.setSliderPos = function(pos) {
-		if (zincGeometry)
-			zincGeometry.morph.material.uniforms.slide_pos.value = pos;
-	}
-	
-	this.setTime = function(time) {
-		if (zincGeometry) {
-			zincGeometry.morph.material.uniforms.time.value = time;
-		}
-	}
-	
-	this.setTexture = function(textureIn) {
-		if (zincGeometry) {
-			zincGeometry.morph.material.uniforms.myTex.value = textureIn;
-			zincGeometry.morph.material.uniforms.myTex.value.needsUpdate = true;
-		}
-	}
-	
-	this.loadURLsIntoBufferGeometry = function(urls, finishCallback, progressCallback, errorCallback) {
-		var loader = new THREE.JSONLoader( true );
-    numberOfInputs = urls.length;
-    finishCallbackFunction = finishCallback;
-    var shaderText = [
-      __webpack_require__("1823"),
-      __webpack_require__("4e8a")
-    ];
-    for (var i = 0; i < numberOfInputs; i++)
-      loader.load( urls[i], myLoader(i, shaderText), progressCallback, errorCallback);
-	}
+__webpack_require__("51e9");
+
+__webpack_require__("02ac");
+
+__webpack_require__("8c84");
+
+__webpack_require__("850c");
+
+__webpack_require__("907b");
+
+__webpack_require__("1ce0");
+
+function _typeof(obj) {
+  "@babel/helpers - typeof";
+
+  if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
+    module.exports = _typeof = function _typeof(obj) {
+      return typeof obj;
+    };
+  } else {
+    module.exports = _typeof = function _typeof(obj) {
+      return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+    };
+  }
+
+  return _typeof(obj);
 }
 
+module.exports = _typeof;
 
 /***/ }),
 
@@ -1514,105 +1458,68 @@ module.exports = require("element-ui/lib/theme-chalk/col.css");
 
 /***/ }),
 
-/***/ "73b5":
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_8_oneOf_1_0_node_modules_vue_cli_service_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_TraditionalControls_vue_vue_type_style_index_0_id_318fd7c8_scoped_true_lang_scss___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("24f0");
-/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_8_oneOf_1_0_node_modules_vue_cli_service_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_TraditionalControls_vue_vue_type_style_index_0_id_318fd7c8_scoped_true_lang_scss___WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_mini_css_extract_plugin_dist_loader_js_ref_8_oneOf_1_0_node_modules_vue_cli_service_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_TraditionalControls_vue_vue_type_style_index_0_id_318fd7c8_scoped_true_lang_scss___WEBPACK_IMPORTED_MODULE_0__);
-/* unused harmony reexport * */
+/***/ "73ef":
+/***/ (function(module, exports) {
 
+module.exports = require("element-ui/lib/theme-chalk/main.css");
 
 /***/ }),
 
-/***/ "73ef":
+/***/ "7c81":
 /***/ (function(module, exports) {
 
-module.exports = require("element-ui/lib/theme-chalk/main.css");
+module.exports = require("core-js/modules/es.array.splice");
 
 /***/ }),
 
-/***/ "76bf":
+/***/ "7d9b":
 /***/ (function(module, exports, __webpack_require__) {
 
-__webpack_require__("b723");
+// extracted by mini-css-extract-plugin
 
-exports.ToolTip = function(container) {
-  var tooltipcontainerElement = undefined;
-  var tipElement = undefined;
-  var tiptextElement = undefined;
-  var template = '<div class="mptooltip" id="tip"><span class="mptooltiptext" id="tiptext"> Tooltip text</span></div>';
-  var _this = this;
-  
-  /**
-   * Show tool tip on the specified windows coordinates.
-   * @param {Number} x - Style sheet with the same title.
-   * @param {Number} y - selector string to match.
-   */
-  this.show = function(x, y) {
-  	tooltipcontainerElement.style.left = x +"px";
-  	tooltipcontainerElement.style.top = (y - 20) + "px";
-  	tipElement.style.visibility = "visible";
-  	tipElement.style.opacity = 1;
-  	tiptextElement.style.visibility = "visible";
-  	tiptextElement.style.opacity = 1;
-  }
-  
-  this.hide = function() {
-  	tipElement.style.visibility = "hidden";
-  	tipElement.style.opacity = 0;
-  	tiptextElement.style.visibility = "hidden";
-  	tiptextElement.style.opacity = 0;
-  }
-  
-  /**
-   * Change the tooltip text.
-   * @param {String} text - Text to update the tooltip to.
-   */
-  this.setText = function(text) {
-  	tiptextElement.innerHTML = text;
-  }
+/***/ }),
 
-  var setupToolTipContainer = function() {
-    tooltipcontainerElement = document.createElement("div");
-    tooltipcontainerElement.id = "tooltipcontainer";
-    tooltipcontainerElement.innerHTML = template;
-    /*
-    for (i = 0; i < childNodes.length; i++) {
-      parent[0].appendChild(childNodes[i]);
-    }
-    */
-    tipElement = tooltipcontainerElement.querySelector("#tip");
-    tiptextElement = tooltipcontainerElement.querySelector("#tiptext");
-    container.appendChild(tooltipcontainerElement);
-    
-  }
-  
-  setupToolTipContainer();
-}
+/***/ "7f9f":
+/***/ (function(module, exports) {
+
+module.exports = require("element-ui/lib/locale");
+
+/***/ }),
 
+/***/ "80c4":
+/***/ (function(module, exports) {
 
+module.exports = require("element-ui/lib/theme-chalk/option.css");
 
 /***/ }),
 
-/***/ "7a89":
+/***/ "8278":
 /***/ (function(module, exports, __webpack_require__) {
 
-var THREE = __webpack_require__("9206").THREE;
+__webpack_require__("bcd8");
+
+var _readOnlyError = __webpack_require__("da60");
 
+var THREE = __webpack_require__("9206").THREE;
 /**
  * Create a {@link Zinc.Renderer} on the dom element with corresponding elementID.
  * @param {String} elementID - id of the target dom element.
  * @returns {Zinc.Renderer}
  */
-var createRenderer = function () {
-  var WEBGL = __webpack_require__("10c9").WEBGL;
-  var localContainer = document.createElement( 'div' );
-  var localRenderer = undefined;;
+
+
+var createRenderer = function createRenderer() {
+  var WEBGL = __webpack_require__("cf41").WEBGL;
+
+  var localContainer = document.createElement('div');
+  var localRenderer = undefined;
+  ;
   localContainer.style.height = "100%";
+
   if (WEBGL.isWebGLAvailable()) {
     var Zinc = __webpack_require__("9206");
-    var localRenderer = new Zinc.Renderer(localContainer, window);
+
+    localRenderer = new Zinc.Renderer(localContainer, window);
     Zinc.defaultMaterialColor = 0xFFFF9C;
     localRenderer.initialiseVisualisation();
     localRenderer.playAnimation = false;
@@ -1620,278 +1527,253 @@ var createRenderer = function () {
     var warning = WEBGL.getWebGLErrorMessage();
     localContainer.appendChild(warning);
   }
-  return {"renderer":localRenderer, "container":localContainer};
-}
 
-var RendererModule = function()  {
-  (__webpack_require__("3966").BaseModule).call(this);
+  return {
+    "renderer": localRenderer,
+    "container": localContainer
+  };
+};
+
+var RendererModule = function RendererModule() {
+  __webpack_require__("6aa6").BaseModule.call(this);
+
   this.scene = undefined;
-  this.toolTip = undefined;
   this.rendererContainer = undefined;
   this.displayArea = undefined;
-  this.graphicsHighlight = new (__webpack_require__("8cec").GraphicsHighlight)();
+  this.graphicsHighlight = new (__webpack_require__("5ec5").GraphicsHighlight)();
   this.zincRenderer = null;
   this.selectedScreenCoordinates = new THREE.Vector3();
   this.selectedCenter = undefined;
-}
-
-RendererModule.prototype = Object.create((__webpack_require__("3966").BaseModule).prototype);
+};
 
+RendererModule.prototype = Object.create(__webpack_require__("6aa6").BaseModule.prototype);
 /**
  * This function will get the the first intersected object with name or
  * the first glyph object with name.
  */
-RendererModule.prototype.getIntersectedObject = function(intersects) {
-	if (intersects) {
-		for (var i = 0; i < intersects.length; i++) {
-			if (intersects[i] !== undefined) {
-				if (intersects[i].object &&
-            intersects[i].object.userData && 
-            intersects[i].object.userData.isZincObject && 
-            (intersects[i].object.name || 
-            intersects[i].object.userData.isMarker))
-					return intersects[i];
-			}
-		}
-	}
-	return undefined;
-}
 
-RendererModule.prototype.getAnnotationsFromObjects = function(objects) {
-    var annotations = [];
-    for (var i = 0; i < objects.length; i++) {
-    	var zincObject = objects[i].userData;
-      var annotation = undefined;
-      if (zincObject) {
-        if (zincObject.isGlyph || zincObject.isGlyphset) {
-          var glyphset = zincObject;
-          if (zincObject.isGlyph)
-            glyphset = zincObject.getGlyphset();
-          annotation = glyphset.userData ? glyphset.userData[0] : undefined;
-          if (annotation && annotation.data) {
-            if (objects[i].name && objects[i].name != "")
-              annotation.data.id = objects[i].name;
-            else
-              annotation.data.id = glyphset.groupName;
-          }
-        } else {
-          annotation = zincObject.userData ? zincObject.userData[0] : undefined;
-          if (annotation && annotation.data){
-            annotation.data.id = objects[i].name;
-          }
+RendererModule.prototype.getIntersectedObject = function (intersects) {
+  if (intersects) {
+    for (var i = 0; i < intersects.length; i++) {
+      if (intersects[i] !== undefined) {
+        if (intersects[i].object && intersects[i].object.userData && intersects[i].object.userData.isZincObject && (intersects[i].object.name || intersects[i].object.userData.isMarker)) return intersects[i];
+      }
+    }
+  }
+
+  return undefined;
+};
+
+RendererModule.prototype.getAnnotationsFromObjects = function (objects) {
+  var annotations = [];
+  var count = 0;
+
+  for (var i = 0; i < objects.length; i++) {
+    var zincObject = objects[i].userData;
+    var annotation = undefined;
+
+    if (zincObject) {
+      if (zincObject.isGlyph || zincObject.isGlyphset) {
+        var glyphset = zincObject;
+        if (zincObject.isGlyph) glyphset = (_readOnlyError("glyphset"), zincObject.getGlyphset());
+        annotation = glyphset.userData ? glyphset.userData[0] : undefined;
+
+        if (annotation && annotation.data) {
+          if (objects[i].name && objects[i].name != "") annotation.data.id = objects[i].name;else annotation.data.id = glyphset.groupName;
+        }
+      } else {
+        annotation = zincObject.userData ? zincObject.userData[0] : undefined;
+
+        if (annotation && annotation.data) {
+          annotation.data.id = objects[i].name;
         }
       }
-      annotations[i] = annotation;
     }
-	return annotations;
-}
 
-RendererModule.prototype.setHighlightedByObjects = function(objects, propagateChanges) {
+    if (annotation) annotations[count++] = annotation;
+  }
+
+  return annotations;
+};
+
+RendererModule.prototype.setHighlightedByObjects = function (objects, propagateChanges) {
   var changed = this.graphicsHighlight.setHighlighted(objects);
+
   if (changed && propagateChanges) {
-    var eventType = __webpack_require__("549c").EVENT_TYPE.HIGHLIGHTED;
+    var eventType = __webpack_require__("9b21").EVENT_TYPE.HIGHLIGHTED;
+
     var annotations = this.getAnnotationsFromObjects(objects);
     this.publishChanges(annotations, eventType);
   }
-  return changed;
-}
 
+  return changed;
+};
 
-RendererModule.prototype.setHighlightedByZincObject = function(
-  zincObject, propagateChanges) {
-    return this.setHighlightedByObjects([zincObject ? zincObject.morph : undefined], propagateChanges);
-}
+RendererModule.prototype.setHighlightedByZincObject = function (zincObject, propagateChanges) {
+  return this.setHighlightedByObjects([zincObject ? zincObject.morph : undefined], propagateChanges);
+};
 
-RendererModule.prototype.setupLiveCoordinates = function(zincObjects) {
-  if (zincObjects && (zincObjects.length > 0)) {
+RendererModule.prototype.setupLiveCoordinates = function (zincObjects) {
+  if (zincObjects && zincObjects.length > 0) {
     var boundingBox = this.scene.getBoundingBoxOfZincObjects(zincObjects);
-    let newSelectedCenter = new THREE.Vector3();
+    var newSelectedCenter = new THREE.Vector3();
     boundingBox.getCenter(newSelectedCenter);
-    if (this.selectedCenter == undefined)
-      this.selectedCenter = newSelectedCenter;
-    else {
+    if (this.selectedCenter == undefined) this.selectedCenter = newSelectedCenter;else {
       this.selectedCenter.x = newSelectedCenter.x;
       this.selectedCenter.y = newSelectedCenter.y;
     }
   } else {
     this.selectedCenter = undefined;
   }
-}
+};
 
-RendererModule.prototype.objectsToZincObjects = function(objects) {
+RendererModule.prototype.objectsToZincObjects = function (objects) {
   var zincObjects = [];
+
   for (var i = 0; i < objects.length; i++) {
     var zincObject = objects[i].userData;
+
     if (zincObject) {
       if (zincObject.isGlyph || zincObject.isGlyphset) {
         var glyphset = zincObject;
-        if (zincObject.isGlyph)
-          glyphset = zincObject.getGlyphset();
-        zincObjects. push(glyphset);
+        if (zincObject.isGlyph) glyphset = zincObject.getGlyphset();
+        zincObjects.push(glyphset);
       } else {
-        zincObjects. push(zincObject);
+        zincObjects.push(zincObject);
       }
     }
   }
-  return zincObjects;
-}
 
+  return zincObjects;
+};
 
-RendererModule.prototype.setSelectedByObjects = function(
-  objects, propagateChanges) {
+RendererModule.prototype.setSelectedByObjects = function (objects, propagateChanges) {
   var changed = this.graphicsHighlight.setSelected(objects);
+
   if (changed) {
     var zincObjects = this.objectsToZincObjects(objects);
     this.setupLiveCoordinates(zincObjects);
+
     if (propagateChanges) {
-      var eventType = __webpack_require__("549c").EVENT_TYPE.SELECTED;
+      var eventType = __webpack_require__("9b21").EVENT_TYPE.SELECTED;
+
       var annotations = this.getAnnotationsFromObjects(objects);
       this.publishChanges(annotations, eventType);
     }
   }
+
   return changed;
-}
+};
 
-RendererModule.prototype.setSelectedByZincObject = function(
-  zincObject, propagateChanges) {
+RendererModule.prototype.setSelectedByZincObject = function (zincObject, propagateChanges) {
   return this.setSelectedByObjects([zincObject ? zincObject.morph : undefined], propagateChanges);
-}
+};
 
-var addGlyphToArray = function(objects) {
-  return function(glyph) {
+var addGlyphToArray = function addGlyphToArray(objects) {
+  return function (glyph) {
     objects.push(glyph.getMesh());
-  }
-}
+  };
+};
 
-RendererModule.prototype.findObjectsByGroupName = function(groupName) {
+RendererModule.prototype.findObjectsByGroupName = function (groupName) {
   var geometries = this.scene.findGeometriesWithGroupName(groupName);
   var objects = [];
-  for (var i = 0; i < geometries.length; i ++ ) {
+
+  for (var i = 0; i < geometries.length; i++) {
     objects.push(geometries[i].morph);
   }
+
   var glyphsets = this.scene.findGlyphsetsWithGroupName(groupName);
-  for (var i = 0; i < glyphsets.length; i ++ ) {
-    glyphsets[i].forEachGlyph(addGlyphToArray(objects));
+
+  for (var _i = 0; _i < glyphsets.length; _i++) {
+    glyphsets[_i].forEachGlyph(addGlyphToArray(objects));
   }
-  
+
   return objects;
-}
+};
 
-RendererModule.prototype.setHighlightedByGroupName = function(groupName, propagateChanges) {
+RendererModule.prototype.setHighlightedByGroupName = function (groupName, propagateChanges) {
   var objects = this.findObjectsByGroupName(groupName);
   return this.setHighlightedByObjects(objects, propagateChanges);
-}
+};
 
-RendererModule.prototype.setSelectedByGroupName = function(groupName, propagateChanges) {
+RendererModule.prototype.setSelectedByGroupName = function (groupName, propagateChanges) {
   var objects = this.findObjectsByGroupName(groupName);
   return this.setSelectedByObjects(objects, propagateChanges);
-}
+};
 
-RendererModule.prototype.changeBackgroundColour = function(backgroundColourString) {
+RendererModule.prototype.changeBackgroundColour = function (backgroundColourString) {
   var colour = new THREE.Color(backgroundColourString);
+
   if (this.zincRenderer) {
     var internalRenderer = this.zincRenderer.getThreeJSRenderer();
-    internalRenderer.setClearColor( colour, 1 );
+    internalRenderer.setClearColor(colour, 1);
   }
-}
+};
 
-RendererModule.prototype.resetView = function() {
-  if (this.zincRenderer)
-    this.zincRenderer.resetView();
-}
-  
-RendererModule.prototype.viewAll = function() {
-  if (this.zincRenderer)
-    this.zincRenderer.viewAll();
-}
+RendererModule.prototype.resetView = function () {
+  if (this.zincRenderer) this.zincRenderer.resetView();
+};
 
+RendererModule.prototype.viewAll = function () {
+  if (this.zincRenderer) this.zincRenderer.viewAll();
+};
 /**
  * Start the animation and let the renderer to processs with
  * time progression
  */
-RendererModule.prototype.playAnimation = function(flag) {
-  if (this.zincRenderer)
-    this.zincRenderer.playAnimation = flag;
-}
 
+
+RendererModule.prototype.playAnimation = function (flag) {
+  if (this.zincRenderer) this.zincRenderer.playAnimation = flag;
+};
 /**
 * Set the speed of playback
 */
-RendererModule.prototype.setPlayRate = function(value) {
-  if (this.zincRenderer)
-    this.zincRenderer.setPlayRate(value);
-}
 
+
+RendererModule.prototype.setPlayRate = function (value) {
+  if (this.zincRenderer) this.zincRenderer.setPlayRate(value);
+};
 /**
 * Get the speed of playback
 */
-RendererModule.prototype.getPlayRate = function(value) {
-  if (this.zincRenderer)
-    return this.zincRenderer.getPlayRate();
-  else
-    return 0.0;
-}
-  
-  /** Initialise everything in the renderer, including the 3D renderer,
- *  and picker for the 3D renderer.
- * 
- */
-RendererModule.prototype.initialiseRenderer = function(displayAreaIn) {
-  if (this.zincRenderer === undefined || this.rendererContainer === undefined) {
-    var returnedValue = createRenderer();
-    this.zincRenderer = returnedValue["renderer"];
-    this.rendererContainer = returnedValue["container"];
-  }
-  if (displayAreaIn) {
-    this.displayArea = displayAreaIn;
-    this.displayArea.appendChild( this.rendererContainer );
-    if (this.zincRenderer) {
-      this.zincRenderer.animate();
-      if (this.toolTip === undefined)
-        this.toolTip = new (__webpack_require__("76bf").ToolTip)(this.displayArea);
-    }
-  } 
-}
-
-RendererModule.prototype.destroy = function() {
-  if (this.zincRenderer) {
-    this.zincRenderer.dispose();
-    this.zincRenderer.getThreeJSRenderer().dispose();
-    this.zincRenderer = undefined;
-  }
-  (__webpack_require__("3966").BaseModule).prototype.destroy.call( this );
-}
- 
-exports.RendererModule = RendererModule;
-
-
-/***/ }),
-
-/***/ "7c81":
-/***/ (function(module, exports) {
-
-module.exports = require("core-js/modules/es.array.splice");
-
-/***/ }),
 
-/***/ "7d9b":
-/***/ (function(module, exports, __webpack_require__) {
 
-// extracted by mini-css-extract-plugin
+RendererModule.prototype.getPlayRate = function (value) {
+  if (this.zincRenderer) return this.zincRenderer.getPlayRate();else return 0.0;
+};
+/** Initialise everything in the renderer, including the 3D renderer,
+*  and picker for the 3D renderer.
+* 
+*/
 
-/***/ }),
 
-/***/ "7f9f":
-/***/ (function(module, exports) {
+RendererModule.prototype.initialiseRenderer = function (displayAreaIn) {
+  if (this.zincRenderer === undefined || this.rendererContainer === undefined) {
+    var returnedValue = createRenderer();
+    this.zincRenderer = returnedValue["renderer"];
+    this.rendererContainer = returnedValue["container"];
+  }
 
-module.exports = require("element-ui/lib/locale");
+  if (displayAreaIn) {
+    this.displayArea = displayAreaIn;
+    this.displayArea.appendChild(this.rendererContainer);
+    if (this.zincRenderer) this.zincRenderer.animate();
+  }
+};
 
-/***/ }),
+RendererModule.prototype.destroy = function () {
+  if (this.zincRenderer) {
+    this.zincRenderer.dispose();
+    this.zincRenderer.getThreeJSRenderer().dispose();
+    this.zincRenderer = undefined;
+  }
 
-/***/ "80c4":
-/***/ (function(module, exports) {
+  __webpack_require__("6aa6").BaseModule.prototype.destroy.call(this);
+};
 
-module.exports = require("element-ui/lib/theme-chalk/option.css");
+exports.RendererModule = RendererModule;
 
 /***/ }),
 
@@ -1921,146 +1803,6 @@ module.exports = require("element-ui/lib/tabs");
 
 module.exports = require("core-js/modules/es.array.iterator");
 
-/***/ }),
-
-/***/ "8cec":
-/***/ (function(module, exports, __webpack_require__) {
-
-var THREE = __webpack_require__("9206").THREE;
-
-/**
- * This module manages highlighted and selected objects in 3D modules. 
- * 
- * @class
- * @returns {exports.GraphicsHighlight}
- */
-exports.GraphicsHighlight = function() {
-  var currentHighlightedObjects = [];
-  var currentSelectedObjects = [];
-  this.highlightColour = 0x0000FF;
-  this.selectColour = 0x00FF00;
-  this.originalColour = 0x000000;
-  var _this = this;
-
-  var isDifferent = function(array1, array2) {
-    if ((array1.length == 0) && (array2.length == 0))
-      return false;
-    
-    for (var i = 0; i < array1.length; i++) {
-      var matched = false;
-      for (var j = 0; j < array2.length; j++) {
-        if (array1[i] === array2[j]) {
-          matched = true;
-        }
-      }
-      if (!matched)
-        return true;
-    }
-    for (var i = 0; i < array2.length; i++) {
-      var matched = false;
-      for (var j = 0; j < array1.length; j++) {
-        if (array2[i] === array1[j]) {
-          matched = true;
-        }
-      }
-      if (!matched)
-        return true;
-    }
-    return false;
-  }
-  
-  var getUnmatchingObjects = function(objectsArray1, objectsArray2) {
-    var unmatchingObjects = [];
-    if (objectsArray2.length == 0)
-      return objectsArray1;
-    for (var i = 0; i < objectsArray1.length; i++) {
-      var matched = false;
-      for (var j = 0; j < objectsArray2.length; j++) {
-        if (objectsArray1[i] === objectsArray2[j]) {
-          matched = true;
-        }
-      }
-      if (!matched)
-        unmatchingObjects.push(objectsArray1[i]);
-    }
-    return unmatchingObjects;
-  }
-  
-  this.setHighlighted = function(objects) {
-    var previousHighlightedObjects = currentHighlightedObjects;
-    _this.resetHighlighted();
-    // Selected object cannot be highlighted
-    var array = getUnmatchingObjects(objects, currentSelectedObjects);
-    var fullList = getFullListOfObjects(array);
-    for (var i = 0; i < fullList.length; i++) {
-      if (fullList[i] && fullList[i].material && fullList[i].material.emissive)
-        fullList[i].material.emissive.setHex(_this.highlightColour);
-    }
-    currentHighlightedObjects = array;
-    return isDifferent(currentHighlightedObjects, previousHighlightedObjects);
-  }
-
-  this.setSelected = function(objects) {
-    // first find highlighted object that are not selected
-    var previousHSelectedObjects = currentSelectedObjects;
-    var array = getUnmatchingObjects(currentHighlightedObjects, objects);
-    currentHighlightedObjects = array;
-    _this.resetSelected();
-    var fullList = getFullListOfObjects(objects);
-    for (var i = 0; i < fullList.length; i++) {
-    	if (fullList[i] && fullList[i].material && fullList[i].material.emissive)
-        fullList[i].material.emissive.setHex(_this.selectColour);
-    }
-    currentSelectedObjects = objects;
-    return isDifferent(currentSelectedObjects, previousHSelectedObjects);
-  }
-
-  var getFullListOfObjects = function(objects) {
-    let fullList = [];
-    for (var i = 0; i < objects.length; i++) {
-      if (objects[i].material)
-        fullList.push(objects[i]);
-    }
-    return fullList;
-  }
-  
-  this.resetHighlighted = function() {
-    let fullList = getFullListOfObjects(currentHighlightedObjects);
-    for (var i = 0; i < fullList.length; i++) {
-      if (fullList[i] && fullList[i].material) {
-        if (fullList[i].material.emissive)
-          fullList[i].material.emissive.setHex(_this.originalColour);
-        if (fullList[i].material.depthFunc)
-          fullList[i].material.depthFunc = THREE.LessEqualDepth;
-      }
-    }
-    currentHighlightedObjects = [];
-  }
-  
-  this.resetSelected = function() {
-    let fullList = getFullListOfObjects(currentSelectedObjects);
-    for (var i = 0; i < fullList.length; i++) {
-    	if (fullList[i] && fullList[i].material) {
-    		if (fullList[i].material.emissive)
-          fullList[i].material.emissive.setHex(_this.originalColour);
-    		if (fullList[i].material.depthFunc)
-          fullList[i].material.depthFunc = THREE.LessEqualDepth;
-    	}
-    }
-    currentSelectedObjects = [];
-  }
-  
-  this.getSelected = function() {
-    return currentSelectedObjects;
-  }
-  
-  this.reset = function() {
-    _this.resetSelected();
-    _this.resetHighlighted();
-  }
-}
-
-
 /***/ }),
 
 /***/ "8f11":
@@ -2098,6 +1840,17 @@ module.exports = require("element-ui/lib/theme-chalk/slider.css");
 
 /***/ }),
 
+/***/ "984d":
+/***/ (function(module, exports) {
+
+exports.annotation = function () {
+  this.type = "anatomical";
+  this.data = undefined;
+  this.isAnnotation = true;
+};
+
+/***/ }),
+
 /***/ "9985":
 /***/ (function(module, exports) {
 
@@ -2112,6 +1865,82 @@ module.exports = require("element-ui/lib/theme-chalk/base.css");
 
 /***/ }),
 
+/***/ "9b21":
+/***/ (function(module, exports, __webpack_require__) {
+
+__webpack_require__("7c81");
+
+var EVENT_TYPE = {
+  ALL: 0,
+  SELECTED: 1,
+  HIGHLIGHTED: 2
+};
+
+var SelectionEvent = function SelectionEvent(eventTypeIn, identifiersIn) {
+  this.eventType = eventTypeIn;
+  this.identifiers = identifiersIn;
+};
+
+var returnFullID = function returnFullID(sourceId) {//return full annotations with all different name
+};
+
+var Subscription = function Subscription(subscriberIn, callbackIn, eventType) {
+  this.targetedID = [];
+  var subscriber = subscriberIn;
+  var callback = callbackIn;
+  this.targetEventType = eventType;
+
+  var _this = this;
+
+  if (eventType === undefined) this.targetEventType = EVENT_TYPE.ALL;
+
+  this.getEventType = function () {
+    return eventType;
+  };
+
+  this.notify = function (source, eventType, ids) {
+    if (source !== subscriber && (_this.targetEventType === EVENT_TYPE.ALL || _this.targetEventType === eventType)) {
+      //should support different type of id e.g lyph, name, fmas...
+      //need a function that finds all relavant ids
+      var event = new SelectionEvent(eventType, ids);
+      callback(event);
+    }
+  };
+};
+
+exports.EventNotifier = function () {
+  var subscriptions = [];
+
+  this.publish = function (source, eventType, id) {
+    for (var i = 0; i < subscriptions.length; i++) {
+      subscriptions[i].notify(source, eventType, id);
+    }
+  };
+
+  this.subscribe = function (subscriber, callbackFunction, eventType) {
+    if (typeof callbackFunction === "function") {
+      var subscription = new Subscription(subscriber, callbackFunction, eventType);
+      subscriptions.push(subscription);
+      return subscription;
+    }
+
+    return undefined;
+  };
+
+  this.unsubscribe = function (subscription) {
+    for (var i = 0; i < subscriptions.length; i++) {
+      if (subscription === subscriptions[i]) {
+        subscriptions.splice(i, 1);
+        return;
+      }
+    }
+  };
+};
+
+exports.EVENT_TYPE = EVENT_TYPE;
+
+/***/ }),
+
 /***/ "9bb0":
 /***/ (function(module, exports) {
 
@@ -2119,14 +1948,13 @@ module.exports = require("@soda/get-current-script");
 
 /***/ }),
 
-/***/ "a0d7":
-/***/ (function(module, exports) {
+/***/ "a1d1":
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
 
-exports.annotation = function() {
-  this.type = "anatomical";
-  this.data = undefined;
-  this.isAnnotation = true;
-}
+"use strict";
+/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_8_oneOf_1_0_node_modules_vue_cli_service_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_ScaffoldVuer_vue_vue_type_style_index_0_id_226a06e2_scoped_true_lang_scss___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("44bd");
+/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_8_oneOf_1_0_node_modules_vue_cli_service_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_ScaffoldVuer_vue_vue_type_style_index_0_id_226a06e2_scoped_true_lang_scss___WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_mini_css_extract_plugin_dist_loader_js_ref_8_oneOf_1_0_node_modules_vue_cli_service_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_ScaffoldVuer_vue_vue_type_style_index_0_id_226a06e2_scoped_true_lang_scss___WEBPACK_IMPORTED_MODULE_0__);
+/* unused harmony reexport * */
 
 
 /***/ }),
@@ -2191,13 +2019,6 @@ module.exports = require("element-ui/lib/icon");
 
 /***/ }),
 
-/***/ "b723":
-/***/ (function(module, exports, __webpack_require__) {
-
-// extracted by mini-css-extract-plugin
-
-/***/ }),
-
 /***/ "b777":
 /***/ (function(module, exports) {
 
@@ -2233,10 +2054,84 @@ module.exports = require("element-ui/lib/option");
 
 /***/ }),
 
-/***/ "c45a":
+/***/ "cf41":
+/***/ (function(module, exports, __webpack_require__) {
+
+__webpack_require__("51f7");
+
+__webpack_require__("bfab");
+
+/**
+ * @author alteredq / http://alteredqualia.com/
+ * @author mr.doob / http://mrdoob.com/
+ */
+exports.WEBGL = {
+  isWebGLAvailable: function isWebGLAvailable() {
+    try {
+      var canvas = document.createElement('canvas');
+      return !!(window.WebGLRenderingContext && (canvas.getContext('webgl') || canvas.getContext('experimental-webgl')));
+    } catch (e) {
+      return false;
+    }
+  },
+  isWebGL2Available: function isWebGL2Available() {
+    try {
+      var canvas = document.createElement('canvas');
+      return !!(window.WebGL2RenderingContext && canvas.getContext('webgl2'));
+    } catch (e) {
+      return false;
+    }
+  },
+  getWebGLErrorMessage: function getWebGLErrorMessage() {
+    return this.getErrorMessage(1);
+  },
+  getWebGL2ErrorMessage: function getWebGL2ErrorMessage() {
+    return this.getErrorMessage(2);
+  },
+  getErrorMessage: function getErrorMessage(version) {
+    var names = {
+      1: 'WebGL',
+      2: 'WebGL 2'
+    };
+    var contexts = {
+      1: window.WebGLRenderingContext,
+      2: window.WebGL2RenderingContext
+    };
+    var message = 'This module requires <a href="http://khronos.org/webgl/wiki/Getting_a_WebGL_Implementation" style="color:#008">$1</a> support but your $0 does not seem to support it.';
+    var element = document.createElement('div');
+    element.id = 'webglmessage';
+    element.style.fontFamily = 'monospace';
+    element.style.fontSize = '20px';
+    element.style.fontWeight = 'normal';
+    element.style.textAlign = 'center';
+    element.style.background = '#fff';
+    element.style.color = '#000';
+    element.style.padding = '1.5em';
+    element.style.width = '400px';
+    element.style.margin = '5em auto 0';
+
+    if (contexts[version]) {
+      message = message.replace('$0', 'graphics card');
+    } else {
+      message = message.replace('$0', 'browser');
+    }
+
+    message = message.replace('$1', names[version]);
+    element.innerHTML = message;
+    return element;
+  }
+};
+
+/***/ }),
+
+/***/ "da60":
 /***/ (function(module, exports) {
 
-module.exports = require("broadcast-channel");
+function _readOnlyError(name) {
+  throw new Error("\"" + name + "\" is read-only");
+}
+
+module.exports = _readOnlyError;
 
 /***/ }),
 
@@ -2288,12 +2183,12 @@ if (typeof window !== 'undefined') {
 // Indicate to webpack that this file can be concatenated
 /* harmony default export */ var setPublicPath = (null);
 
-// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"d40804f2-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/ScaffoldVuer.vue?vue&type=template&id=03b672b7&scoped=true&
-var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{directives:[{name:"loading",rawName:"v-loading",value:(_vm.loading),expression:"loading"}],ref:"scaffoldContainer",staticClass:"scaffold-container",attrs:{"element-loading-text":"Loading...","element-loading-spinner":"el-icon-loading","element-loading-background":"rgba(0, 0, 0, 0.3)"}},[_c('SvgSpriteColor'),_c('div',{ref:"display",staticStyle:{"height":"100%","width":"100%"},attrs:{"id":"organsDisplayArea","tabindex":"-1"},on:{"keydown":function($event){if(!$event.type.indexOf('key')&&$event.keyCode!==66){ return null; }return _vm.backgroundChangeCallback($event)}}}),_c('div',{directives:[{name:"show",rawName:"v-show",value:(_vm.displayUI && !_vm.isTransitioning),expression:"displayUI && !isTransitioning"}]},[(_vm.displayWarning)?_c('el-popover',{ref:"warningPopover",attrs:{"content":_vm.warningMessage,"placement":"right","append-to-body":false,"trigger":"manual","popper-class":"warning-popper right-popper non-selectable"},model:{value:(_vm.hoverVisabilities[6].value),callback:function ($$v) {_vm.$set(_vm.hoverVisabilities[6], "value", $$v)},expression:"hoverVisabilities[6].value"}}):_vm._e(),(_vm.displayWarning)?_c('i',{directives:[{name:"popover",rawName:"v-popover:warningPopover",arg:"warningPopover"}],staticClass:"el-icon-warning warning-icon",on:{"mouseover":function($event){return _vm.showToolitip(6)},"mouseout":function($event){return _vm.hideToolitip(6)}}},[_c('span',{staticClass:"warning-text"},[_vm._v("Beta")])]):_vm._e(),_c('el-popover',{ref:"checkBoxPopover",attrs:{"content":"Change region visibility","placement":"right","append-to-body":false,"trigger":"manual","popper-class":"scaffold-popper right-popper non-selectable"},model:{value:(_vm.hoverVisabilities[5].value),callback:function ($$v) {_vm.$set(_vm.hoverVisabilities[5], "value", $$v)},expression:"hoverVisabilities[5].value"}}),_c('TraditionalControls',{directives:[{name:"popover",rawName:"v-popover:checkBoxPopover",arg:"checkBoxPopover"}],ref:"traditionalControl",attrs:{"help-mode":_vm.helpMode,"module":_vm.$module,"show-colour-picker":_vm.showColourPicker},on:{"object-selected":_vm.objectSelected,"object-hovered":_vm.objectHovered,"drawer-toggled":_vm.drawerToggled}}),_c('div',{staticClass:"opacity-box"},[_c('OpacityControls',{ref:"opacityControl"})],1),(_vm.sceneData.timeVarying)?_c('el-popover',{ref:"sliderPopover",attrs:{"content":"Move the slider to animate the region","placement":"top","append-to-body":false,"trigger":"manual","popper-class":"scaffold-popper top-popper non-selectable"},model:{value:(_vm.hoverVisabilities[4].value),callback:function ($$v) {_vm.$set(_vm.hoverVisabilities[4], "value", $$v)},expression:"hoverVisabilities[4].value"}}):_vm._e(),(_vm.sceneData.timeVarying)?_c('div',{directives:[{name:"popover",rawName:"v-popover:sliderPopover",arg:"sliderPopover"}],staticClass:"time-slider-container",class:[ _vm.minimisedSlider ? 'minimised' : '', _vm.sliderPosition]},[_c('el-tabs',{attrs:{"type":"card"}},[_c('el-tab-pane',{attrs:{"label":"Animate scaffold"}},[_c('el-row',{staticClass:"tab-content"},[(_vm.isPlaying)?_c('SvgIcon',{staticClass:"icon-button video-button",attrs:{"icon":"pause"},nativeOn:{"click":function($event){return _vm.play(false)}}}):_c('SvgIcon',{staticClass:"video-button icon-button",attrs:{"icon":"play"},nativeOn:{"click":function($event){return _vm.play(true)}}}),_c('el-slider',{staticClass:"slider",attrs:{"min":0,"max":_vm.timeMax,"value":_vm.sceneData.currentTime / 100 * _vm.timeMax,"step":0.1,"tooltip-class":"time-slider-tooltip","format-tooltip":_vm.formatTooltip,"marks":_vm.timeStamps},on:{"input":function($event){return _vm.timeChange($event)}}})],1)],1),_c('el-tab-pane',{attrs:{"label":"Animation data"}},[_c('el-row',{staticClass:"tab-content"},[_c('div',{staticClass:"animation-data"},[_vm._v(" Original duration: "),_c('div',{staticClass:"purple"},[_vm._v(" "+_vm._s(_vm.orginalDuration)+" ")])]),_c('div',{staticClass:"animation-data"},[_vm._v(" Animation duration: "),_c('div',{staticClass:"purple"},[_vm._v(" "+_vm._s(_vm.animateDuration)+" ")])]),_c('div',{staticClass:"animation-data"},[_vm._v(" Playback speed "),_c('el-select',{staticClass:"select-box",attrs:{"popper-append-to-body":true,"value":_vm.currentSpeed,"placeholder":"Select","popper-class":"scaffold_viewer_dropdown"},on:{"change":function($event){return _vm.speedChanged($event)}}},_vm._l((_vm.playSpeed),function(item){return _c('el-option',{key:item.value,attrs:{"label":item.label,"value":item.value}})}),1)],1)])],1)],1)],1):_vm._e(),_c('div',{staticClass:"bottom-right-control"},[_c('el-popover',{attrs:{"content":"Zoom in","placement":"left","append-to-body":false,"trigger":"manual","popper-class":"scaffold-popper left-popper non-selectable"},model:{value:(_vm.hoverVisabilities[0].value),callback:function ($$v) {_vm.$set(_vm.hoverVisabilities[0], "value", $$v)},expression:"hoverVisabilities[0].value"}},[_c('SvgIcon',{staticClass:"icon-button zoomIn",attrs:{"slot":"reference","icon":"zoomIn"},nativeOn:{"click":function($event){return _vm.zoomIn()},"mouseover":function($event){return _vm.showToolitip(0)},"mouseout":function($event){return _vm.hideToolitip(0)}},slot:"reference"})],1),_c('el-popover',{attrs:{"content":"Zoom out","placement":"top-end","append-to-body":false,"trigger":"manual","popper-class":"scaffold-popper popper-zoomout non-selectable"},model:{value:(_vm.hoverVisabilities[1].value),callback:function ($$v) {_vm.$set(_vm.hoverVisabilities[1], "value", $$v)},expression:"hoverVisabilities[1].value"}},[_c('SvgIcon',{staticClass:"icon-button zoomOut",attrs:{"slot":"reference","icon":"zoomOut"},nativeOn:{"click":function($event){return _vm.zoomOut()},"mouseover":function($event){return _vm.showToolitip(1)},"mouseout":function($event){return _vm.hideToolitip(1)}},slot:"reference"})],1),_c('el-popover',{attrs:{"placement":"top","append-to-body":false,"trigger":"manual","popper-class":"scaffold-popper non-selectable"},model:{value:(_vm.hoverVisabilities[2].value),callback:function ($$v) {_vm.$set(_vm.hoverVisabilities[2], "value", $$v)},expression:"hoverVisabilities[2].value"}},[_c('div',[_vm._v(" Fit to "),_c('br'),_vm._v(" window ")]),_c('SvgIcon',{staticClass:"icon-button fitWindow",attrs:{"slot":"reference","icon":"fitWindow"},nativeOn:{"click":function($event){return _vm.fitWindow()},"mouseover":function($event){return _vm.showToolitip(2)},"mouseout":function($event){return _vm.hideToolitip(2)}},slot:"reference"})],1)],1),_c('el-popover',{ref:"backgroundPopover",attrs:{"placement":"top-start","width":"128","append-to-body":false,"trigger":"click","popper-class":"background-popper non-selectable"}},[_c('el-row',{staticClass:"backgroundText"},[_vm._v(" Change background ")]),_c('el-row',{staticClass:"backgroundChooser"},_vm._l((_vm.availableBackground),function(item){return _c('div',{key:item,class:['backgroundChoice', item, item == _vm.currentBackground ? 'active' :''],on:{"click":function($event){return _vm.backgroundChangeCallback(item)}}})}),0)],1),_c('el-popover',{attrs:{"content":"Change background color","placement":"right","append-to-body":false,"trigger":"manual","popper-class":"scaffold-popper right-popper non-selectable"},model:{value:(_vm.hoverVisabilities[3].value),callback:function ($$v) {_vm.$set(_vm.hoverVisabilities[3], "value", $$v)},expression:"hoverVisabilities[3].value"}},[_c('SvgIcon',{directives:[{name:"popover",rawName:"v-popover:backgroundPopover",arg:"backgroundPopover"}],staticClass:"icon-button background-colour",class:{ open: _vm.drawerOpen, close: !_vm.drawerOpen },attrs:{"slot":"reference","icon":"changeBckgd"},nativeOn:{"mouseover":function($event){return _vm.showToolitip(3)},"mouseout":function($event){return _vm.hideToolitip(3)}},slot:"reference"})],1)],1)],1)}
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"73d52850-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/ScaffoldVuer.vue?vue&type=template&id=226a06e2&scoped=true&
+var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{directives:[{name:"loading",rawName:"v-loading",value:(_vm.loading),expression:"loading"}],ref:"scaffoldContainer",staticClass:"scaffold-container",attrs:{"element-loading-text":"Loading...","element-loading-spinner":"el-icon-loading","element-loading-background":"rgba(0, 0, 0, 0.3)"}},[_c('map-svg-sprite-color'),_c('div',{ref:"display",staticStyle:{"height":"100%","width":"100%"},attrs:{"id":"organsDisplayArea","tabindex":"-1"},on:{"keydown":function($event){if(!$event.type.indexOf('key')&&$event.keyCode!==66){ return null; }return _vm.backgroundChangeCallback($event)}}}),_c('div',{directives:[{name:"show",rawName:"v-show",value:(_vm.displayUI && !_vm.isTransitioning),expression:"displayUI && !isTransitioning"}]},[(_vm.displayWarning)?_c('el-popover',{ref:"warningPopover",attrs:{"content":_vm.warningMessage,"placement":"right","append-to-body":false,"trigger":"manual","popper-class":"warning-popper right-popper non-selectable"},model:{value:(_vm.hoverVisabilities[6].value),callback:function ($$v) {_vm.$set(_vm.hoverVisabilities[6], "value", $$v)},expression:"hoverVisabilities[6].value"}}):_vm._e(),(_vm.displayWarning)?_c('i',{directives:[{name:"popover",rawName:"v-popover:warningPopover",arg:"warningPopover"}],staticClass:"el-icon-warning warning-icon",on:{"mouseover":function($event){return _vm.showToolitip(6)},"mouseout":function($event){return _vm.hideToolitip(6)}}},[_c('span',{staticClass:"warning-text"},[_vm._v("Beta")])]):_vm._e(),_c('el-popover',{ref:"checkBoxPopover",attrs:{"content":"Change region visibility","placement":"right","append-to-body":false,"trigger":"manual","popper-class":"scaffold-popper right-popper non-selectable"},model:{value:(_vm.hoverVisabilities[5].value),callback:function ($$v) {_vm.$set(_vm.hoverVisabilities[5], "value", $$v)},expression:"hoverVisabilities[5].value"}}),_c('TraditionalControls',{directives:[{name:"popover",rawName:"v-popover:checkBoxPopover",arg:"checkBoxPopover"}],ref:"traditionalControl",attrs:{"help-mode":_vm.helpMode,"module":_vm.$module,"show-colour-picker":_vm.showColourPicker},on:{"object-selected":_vm.objectSelected,"object-hovered":_vm.objectHovered,"drawer-toggled":_vm.drawerToggled}}),_c('div',{staticClass:"opacity-box"},[_c('OpacityControls',{ref:"opacityControl"})],1),(_vm.sceneData.timeVarying)?_c('el-popover',{ref:"sliderPopover",attrs:{"content":"Move the slider to animate the region","placement":"top","append-to-body":false,"trigger":"manual","popper-class":"scaffold-popper top-popper non-selectable"},model:{value:(_vm.hoverVisabilities[4].value),callback:function ($$v) {_vm.$set(_vm.hoverVisabilities[4], "value", $$v)},expression:"hoverVisabilities[4].value"}}):_vm._e(),(_vm.sceneData.timeVarying)?_c('div',{directives:[{name:"popover",rawName:"v-popover:sliderPopover",arg:"sliderPopover"}],staticClass:"time-slider-container",class:[ _vm.minimisedSlider ? 'minimised' : '', _vm.sliderPosition]},[_c('el-tabs',{attrs:{"type":"card"}},[_c('el-tab-pane',{attrs:{"label":"Animate scaffold"}},[_c('el-row',{staticClass:"tab-content"},[(_vm.isPlaying)?_c('map-svg-icon',{staticClass:"icon-button video-button",attrs:{"icon":"pause"},nativeOn:{"click":function($event){return _vm.play(false)}}}):_c('map-svg-icon',{staticClass:"video-button icon-button",attrs:{"icon":"play"},nativeOn:{"click":function($event){return _vm.play(true)}}}),_c('el-slider',{staticClass:"slider",attrs:{"min":0,"max":_vm.timeMax,"value":_vm.sceneData.currentTime / 100 * _vm.timeMax,"step":0.1,"tooltip-class":"time-slider-tooltip","format-tooltip":_vm.formatTooltip,"marks":_vm.timeStamps},on:{"input":function($event){return _vm.timeChange($event)}}})],1)],1),_c('el-tab-pane',{attrs:{"label":"Animation data"}},[_c('el-row',{staticClass:"tab-content"},[_c('div',{staticClass:"animation-data"},[_vm._v(" Original duration: "),_c('div',{staticClass:"purple"},[_vm._v(" "+_vm._s(_vm.orginalDuration)+" ")])]),_c('div',{staticClass:"animation-data"},[_vm._v(" Animation duration: "),_c('div',{staticClass:"purple"},[_vm._v(" "+_vm._s(_vm.animateDuration)+" ")])]),_c('div',{staticClass:"animation-data"},[_vm._v(" Playback speed "),_c('el-select',{staticClass:"select-box",attrs:{"popper-append-to-body":true,"value":_vm.currentSpeed,"placeholder":"Select","popper-class":"scaffold_viewer_dropdown"},on:{"change":function($event){return _vm.speedChanged($event)}}},_vm._l((_vm.playSpeed),function(item){return _c('el-option',{key:item.value,attrs:{"label":item.label,"value":item.value}})}),1)],1)])],1)],1)],1):_vm._e(),_c('div',{staticClass:"bottom-right-control"},[_c('el-popover',{attrs:{"content":"Zoom in","placement":"left","append-to-body":false,"trigger":"manual","popper-class":"scaffold-popper left-popper non-selectable"},model:{value:(_vm.hoverVisabilities[0].value),callback:function ($$v) {_vm.$set(_vm.hoverVisabilities[0], "value", $$v)},expression:"hoverVisabilities[0].value"}},[_c('map-svg-icon',{staticClass:"icon-button zoomIn",attrs:{"slot":"reference","icon":"zoomIn"},nativeOn:{"click":function($event){return _vm.zoomIn()},"mouseover":function($event){return _vm.showToolitip(0)},"mouseout":function($event){return _vm.hideToolitip(0)}},slot:"reference"})],1),_c('el-popover',{attrs:{"content":"Zoom out","placement":"top-end","append-to-body":false,"trigger":"manual","popper-class":"scaffold-popper popper-zoomout non-selectable"},model:{value:(_vm.hoverVisabilities[1].value),callback:function ($$v) {_vm.$set(_vm.hoverVisabilities[1], "value", $$v)},expression:"hoverVisabilities[1].value"}},[_c('map-svg-icon',{staticClass:"icon-button zoomOut",attrs:{"slot":"reference","icon":"zoomOut"},nativeOn:{"click":function($event){return _vm.zoomOut()},"mouseover":function($event){return _vm.showToolitip(1)},"mouseout":function($event){return _vm.hideToolitip(1)}},slot:"reference"})],1),_c('el-popover',{attrs:{"placement":"top","append-to-body":false,"trigger":"manual","popper-class":"scaffold-popper non-selectable"},model:{value:(_vm.hoverVisabilities[2].value),callback:function ($$v) {_vm.$set(_vm.hoverVisabilities[2], "value", $$v)},expression:"hoverVisabilities[2].value"}},[_c('div',[_vm._v(" Fit to "),_c('br'),_vm._v(" window ")]),_c('map-svg-icon',{staticClass:"icon-button fitWindow",attrs:{"slot":"reference","icon":"fitWindow"},nativeOn:{"click":function($event){return _vm.fitWindow()},"mouseover":function($event){return _vm.showToolitip(2)},"mouseout":function($event){return _vm.hideToolitip(2)}},slot:"reference"})],1)],1),_c('el-popover',{ref:"backgroundPopover",attrs:{"placement":"top-start","width":"128","append-to-body":false,"trigger":"click","popper-class":"background-popper non-selectable"}},[_c('el-row',{staticClass:"backgroundText"},[_vm._v(" Change background ")]),_c('el-row',{staticClass:"backgroundChooser"},_vm._l((_vm.availableBackground),function(item){return _c('div',{key:item,class:['backgroundChoice', item, item == _vm.currentBackground ? 'active' :''],on:{"click":function($event){return _vm.backgroundChangeCallback(item)}}})}),0)],1),_c('el-popover',{attrs:{"content":"Change background color","placement":"right","append-to-body":false,"trigger":"manual","popper-class":"scaffold-popper right-popper non-selectable"},model:{value:(_vm.hoverVisabilities[3].value),callback:function ($$v) {_vm.$set(_vm.hoverVisabilities[3], "value", $$v)},expression:"hoverVisabilities[3].value"}},[_c('map-svg-icon',{directives:[{name:"popover",rawName:"v-popover:backgroundPopover",arg:"backgroundPopover"}],staticClass:"icon-button background-colour",class:{ open: _vm.drawerOpen, close: !_vm.drawerOpen },attrs:{"slot":"reference","icon":"changeBckgd"},nativeOn:{"mouseover":function($event){return _vm.showToolitip(3)},"mouseout":function($event){return _vm.hideToolitip(3)}},slot:"reference"})],1)],1)],1)}
 var staticRenderFns = []
 
 
-// CONCATENATED MODULE: ./src/components/ScaffoldVuer.vue?vue&type=template&id=03b672b7&scoped=true&
+// CONCATENATED MODULE: ./src/components/ScaffoldVuer.vue?vue&type=template&id=226a06e2&scoped=true&
 
 // EXTERNAL MODULE: external "core-js/modules/es.array.for-each"
 var es_array_for_each_ = __webpack_require__("139f");
@@ -2392,7 +2287,7 @@ var col_default = /*#__PURE__*/__webpack_require__.n(col_);
 var external_vue_ = __webpack_require__("8bbf");
 var external_vue_default = /*#__PURE__*/__webpack_require__.n(external_vue_);
 
-// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"d40804f2-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/OpacityControls.vue?vue&type=template&id=4c00a30f&scoped=true&
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"73d52850-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/OpacityControls.vue?vue&type=template&id=4c00a30f&scoped=true&
 var OpacityControlsvue_type_template_id_4c00a30f_scoped_true_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (_vm.material!=undefined)?_c('div',{ref:"control",staticClass:"opacity-control"},[_c('el-drawer',{staticClass:"drawer-content",attrs:{"custom-class":"my-drawer","visible":_vm.drawerOpen,"append-to-body":false,"modal-append-to-body":false,"size":"300","with-header":false,"wrapper-closable":false,"modal":false},on:{"update:visible":function($event){_vm.drawerOpen=$event}}},[(_vm.drawerOpen)?_c('div',{staticClass:"tab-button close",on:{"click":_vm.toggleDrawer}},[_c('i',{staticClass:"el-icon-arrow-right"})]):_vm._e(),_c('el-container',{staticClass:"opacity-container"},[_c('el-header',{staticClass:"header",attrs:{"height":"37px"}},[_c('div',[_vm._v("Opacity")])]),_c('el-main',{staticClass:"main"},[_c('div',{staticClass:"block"},[_c('span',{staticClass:"display"},[_vm._v(_vm._s(_vm.displayString))]),_c('el-slider',{staticClass:"my-slider",attrs:{"step":0.01,"min":0,"max":1,"format-tooltip":_vm.formatTooltip,"show-tooltip":false},model:{value:(_vm.material.opacity),callback:function ($$v) {_vm.$set(_vm.material, "opacity", $$v)},expression:"material.opacity"}})],1)])],1)],1),(!_vm.drawerOpen)?_c('div',{staticClass:"tab-button open",on:{"click":_vm.toggleDrawer}},[_c('i',{staticClass:"el-icon-arrow-left"})]):_vm._e()],1):_vm._e()}
 var OpacityControlsvue_type_template_id_4c00a30f_scoped_true_staticRenderFns = []
 
@@ -2693,13 +2588,13 @@ var component = normalizeComponent(
 )
 
 /* harmony default export */ var OpacityControls = (component.exports);
-// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"d40804f2-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/TraditionalControls.vue?vue&type=template&id=318fd7c8&scoped=true&
-var TraditionalControlsvue_type_template_id_318fd7c8_scoped_true_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"traditional-location",class:{ open: _vm.drawerOpen, close: !_vm.drawerOpen }},[_c('div',{staticClass:"traditional-container"},[_c('el-row',[_c('el-col',{attrs:{"span":12}},[_c('div',{staticClass:"regions-display-text"},[_vm._v(" Regions ")])]),_c('el-col',{attrs:{"span":12}},[_c('el-checkbox',{staticClass:"all-checkbox",attrs:{"indeterminate":_vm.isIndeterminate},on:{"change":_vm.handleCheckAllChange},model:{value:(_vm.checkAll),callback:function ($$v) {_vm.checkAll=$$v},expression:"checkAll"}},[_vm._v(" Display all ")])],1)],1),_c('el-checkbox-group',{staticClass:"checkbox-group",attrs:{"size":"small"},on:{"change":_vm.handleCheckedItemsChange},model:{value:(_vm.checkedItems),callback:function ($$v) {_vm.checkedItems=$$v},expression:"checkedItems"}},[_c('div',{staticClass:"checkbox-group-inner"},_vm._l((_vm.sortedPrimitiveGroups),function(item){return _c('el-row',{key:item,attrs:{"label":item}},[_c('div',{staticClass:"checkbox-container"},[_c('el-checkbox',{staticClass:"my-checkbox",class:{ activeItem: _vm.activeRegion === item, 
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"73d52850-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/TraditionalControls.vue?vue&type=template&id=335c5764&scoped=true&
+var TraditionalControlsvue_type_template_id_335c5764_scoped_true_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"traditional-location",class:{ open: _vm.drawerOpen, close: !_vm.drawerOpen }},[_c('div',{staticClass:"traditional-container"},[_c('el-row',[_c('el-col',{attrs:{"span":12}},[_c('div',{staticClass:"regions-display-text"},[_vm._v(" Regions ")])]),_c('el-col',{attrs:{"span":12}},[_c('el-checkbox',{staticClass:"all-checkbox",attrs:{"indeterminate":_vm.isIndeterminate},on:{"change":_vm.handleCheckAllChange},model:{value:(_vm.checkAll),callback:function ($$v) {_vm.checkAll=$$v},expression:"checkAll"}},[_vm._v(" Display all ")])],1)],1),_c('el-checkbox-group',{staticClass:"checkbox-group",attrs:{"size":"small"},on:{"change":_vm.handleCheckedItemsChange},model:{value:(_vm.checkedItems),callback:function ($$v) {_vm.checkedItems=$$v},expression:"checkedItems"}},[_c('div',{staticClass:"checkbox-group-inner"},_vm._l((_vm.sortedPrimitiveGroups),function(item){return _c('el-row',{key:item,attrs:{"label":item}},[_c('div',{staticClass:"checkbox-container"},[_c('el-checkbox',{staticClass:"my-checkbox",class:{ activeItem: _vm.activeRegion === item, 
                         hoverItem: _vm.hoverRegion === item },attrs:{"label":item,"checked":true},on:{"change":function($event){return _vm.visibilityToggle(item, $event)}},nativeOn:{"click":function($event){return _vm.itemClicked(item, $event)},"mouseover":function($event){return _vm.checkboxHover(item)}}},[_c('el-color-picker',{class:{ 'show-picker' : _vm.showColourPicker },attrs:{"value":_vm.getColour(item),"size":"small","popper-class":_vm.myPopperClass},on:{"change":function($event){return _vm.setColour(item, $event)}}}),_vm._v(" "+_vm._s(item)+" ")],1)],1)])}),1)])],1),_c('div',{staticClass:"drawer-button",class:{ open: _vm.drawerOpen, close: !_vm.drawerOpen },on:{"click":_vm.toggleDrawer}},[_c('i',{staticClass:"el-icon-arrow-left"})])])}
-var TraditionalControlsvue_type_template_id_318fd7c8_scoped_true_staticRenderFns = []
+var TraditionalControlsvue_type_template_id_335c5764_scoped_true_staticRenderFns = []
 
 
-// CONCATENATED MODULE: ./src/components/TraditionalControls.vue?vue&type=template&id=318fd7c8&scoped=true&
+// CONCATENATED MODULE: ./src/components/TraditionalControls.vue?vue&type=template&id=335c5764&scoped=true&
 
 // EXTERNAL MODULE: external "core-js/modules/es.array.concat"
 var es_array_concat_ = __webpack_require__("18d2");
@@ -2971,7 +2866,6 @@ external_vue_default.a.use(row_default.a);
     tmpArray = uniq(tmpArray.concat(this.module.sceneData.pointset));
     this.sortedPrimitiveGroups = orderBy(tmpArray);
     this.module.addOrganPartAddedCallback(this.organsAdded);
-    this.module.graphicsHighlight.selectColour = 0x444444;
   },
   destroyed: function destroyed() {
     this.sortedPrimitiveGroups = undefined;
@@ -2997,55 +2891,47 @@ external_vue_default.a.use(row_default.a);
     /**
      * Select a region by its name.
      */
-    changeActiveByName: function changeActiveByName(name) {
+    changeActiveByName: function changeActiveByName(name, propagate) {
       var targetObject = this.getFirstZincObjectWithGroupName(name);
 
       if (targetObject && targetObject.getVisibility()) {
         this.activeRegion = name;
-        /**
-         * Triggers when an item has been selected.
-         *
-         * @property {object} target selected object.
-         */
-
-        this.$emit("object-selected", targetObject);
+        this.$emit("object-selected", targetObject, propagate);
+      } else {
+        this.removeActive(propagate);
       }
 
-      this.removeHover();
+      this.removeHover(propagate);
     },
 
     /**
      * Hover a region by its name.
      */
-    changeHoverByName: function changeHoverByName(name) {
+    changeHoverByName: function changeHoverByName(name, propagate) {
       var targetObject = this.getFirstZincObjectWithGroupName(name);
 
       if (targetObject) {
         this.hoverRegion = name;
-        /**
-         * Triggers when an item has been hovered over.
-         *
-         * @property {object} target hovered object.
-         */
-
-        this.$emit("object-hovered", targetObject);
+        this.$emit("object-hovered", targetObject, propagate);
+      } else {
+        this.removeHover(propagate);
       }
     },
 
     /**
      * Unselect the current selected region.
      */
-    removeActive: function removeActive() {
+    removeActive: function removeActive(propagate) {
       this.activeRegion = "";
-      this.$emit("object-selected", undefined);
+      this.$emit("object-selected", undefined, propagate);
     },
 
     /**
      * Unselect the current hover region.
      */
-    removeHover: function removeHover() {
+    removeHover: function removeHover(propagate) {
       this.hoverRegion = "";
-      this.$emit("object-hovered", undefined);
+      this.$emit("object-hovered", undefined, propagate);
     },
 
     /**
@@ -3093,11 +2979,11 @@ external_vue_default.a.use(row_default.a);
       }
     },
     checkboxHover: function checkboxHover(name) {
-      this.changeHoverByName(name);
+      this.changeHoverByName(name, true);
     },
     itemClicked: function itemClicked(name, event) {
       if (!(event.target.classList.contains("el-checkbox__inner") || event.target.classList.contains("el-checkbox__original"))) {
-        this.changeActiveByName(name);
+        this.changeActiveByName(name, true);
         event.preventDefault();
       }
     },
@@ -3124,11 +3010,11 @@ external_vue_default.a.use(row_default.a);
 
       if (event == false) {
         if (this.activeRegion === item) {
-          this.removeActive();
+          this.removeActive(true);
         }
 
         if (this.hoverRegion === item) {
-          this.removeHover();
+          this.removeHover(true);
         }
       }
     },
@@ -3179,8 +3065,8 @@ external_vue_default.a.use(row_default.a);
 });
 // CONCATENATED MODULE: ./src/components/TraditionalControls.vue?vue&type=script&lang=js&
  /* harmony default export */ var components_TraditionalControlsvue_type_script_lang_js_ = (TraditionalControlsvue_type_script_lang_js_); 
-// EXTERNAL MODULE: ./src/components/TraditionalControls.vue?vue&type=style&index=0&id=318fd7c8&scoped=true&lang=scss&
-var TraditionalControlsvue_type_style_index_0_id_318fd7c8_scoped_true_lang_scss_ = __webpack_require__("73b5");
+// EXTERNAL MODULE: ./src/components/TraditionalControls.vue?vue&type=style&index=0&id=335c5764&scoped=true&lang=scss&
+var TraditionalControlsvue_type_style_index_0_id_335c5764_scoped_true_lang_scss_ = __webpack_require__("3a59");
 
 // EXTERNAL MODULE: ./src/components/TraditionalControls.vue?vue&type=style&index=1&lang=css&
 var TraditionalControlsvue_type_style_index_1_lang_css_ = __webpack_require__("add8");
@@ -3197,11 +3083,11 @@ var TraditionalControlsvue_type_style_index_1_lang_css_ = __webpack_require__("a
 
 var TraditionalControls_component = normalizeComponent(
   components_TraditionalControlsvue_type_script_lang_js_,
-  TraditionalControlsvue_type_template_id_318fd7c8_scoped_true_render,
-  TraditionalControlsvue_type_template_id_318fd7c8_scoped_true_staticRenderFns,
+  TraditionalControlsvue_type_template_id_335c5764_scoped_true_render,
+  TraditionalControlsvue_type_template_id_335c5764_scoped_true_staticRenderFns,
   false,
   null,
-  "318fd7c8",
+  "335c5764",
   null
   
 )
@@ -3504,9 +3390,9 @@ external_vue_default.a.use(slider_default.a);
 external_vue_default.a.use(tab_pane_default.a);
 external_vue_default.a.use(tabs_default.a);
 
-var OrgansViewer = __webpack_require__("67b6").OrgansViewer;
+var OrgansViewer = __webpack_require__("53d7").OrgansViewer;
 
-var EventNotifier = __webpack_require__("549c").EventNotifier;
+var EventNotifier = __webpack_require__("9b21").EventNotifier;
 /**
  * A vue component of the scaffold viewer.
  *
@@ -3519,8 +3405,8 @@ var EventNotifier = __webpack_require__("549c").EventNotifier;
   name: "ScaffoldVuer",
   components: {
     OpacityControls: OpacityControls,
-    SvgIcon: svg_sprite_["SvgIcon"],
-    SvgSpriteColor: svg_sprite_["SvgSpriteColor"],
+    MapSvgIcon: svg_sprite_["MapSvgIcon"],
+    MapSvgSpriteColor: svg_sprite_["MapSvgSpriteColor"],
     TraditionalControls: TraditionalControls
   },
   props: {
@@ -3783,7 +3669,6 @@ var EventNotifier = __webpack_require__("549c").EventNotifier;
     this.$module.addOrganPartAddedCallback(this.organsAdded);
     this.$module.initialiseRenderer(this.$refs.display);
     this.toggleRendering(this.render);
-    this.$module.toolTip = undefined;
     this.ro = new ResizeObserver(this.adjustLayout).observe(this.$refs.scaffoldContainer);
     this.defaultRate = this.$module.getPlayRate();
   },
@@ -3916,7 +3801,11 @@ var EventNotifier = __webpack_require__("549c").EventNotifier;
         var box = this.$module.scene.getBoundingBoxOfZincObjects(objects);
 
         if (box) {
-          this.$module.scene.viewAllWithBoundingBox(box);
+          if (this.$module.isSyncControl()) {
+            this.$module.setSyncControlZoomToBox(box);
+          } else {
+            this.$module.scene.viewAllWithBoundingBox(box);
+          }
         }
       }
     },
@@ -3943,6 +3832,13 @@ var EventNotifier = __webpack_require__("549c").EventNotifier;
         }
       }
     },
+    getRendererInfo: function getRendererInfo() {
+      if (this.$module.zincRenderer) {
+        return this.$module.zincRenderer.getThreeJSRenderer().info;
+      }
+
+      return undefined;
+    },
 
     /**
      * Function used to rotate the scene.
@@ -3969,9 +3865,9 @@ var EventNotifier = __webpack_require__("549c").EventNotifier;
         if (this.$refs.traditionalControl) {
           if (event.identifiers[0]) {
             var id = event.identifiers[0].data.id ? event.identifiers[0].data.id : event.identifiers[0].data.group;
-            this.$refs.traditionalControl.changeActiveByName(id);
+            this.$refs.traditionalControl.changeActiveByName(id, true);
           } else {
-            this.$refs.traditionalControl.removeActive();
+            this.$refs.traditionalControl.removeActive(true);
           }
         }
         /**
@@ -3988,8 +3884,8 @@ var EventNotifier = __webpack_require__("549c").EventNotifier;
           if (event.identifiers[0]) {
             var _id = event.identifiers[0].data.id ? event.identifiers[0].data.id : event.identifiers[0].data.group;
 
-            this.$refs.traditionalControl.changeHoverByName(_id);
-          } else this.$refs.traditionalControl.removeHover();
+            this.$refs.traditionalControl.changeHoverByName(_id, true);
+          } else this.$refs.traditionalControl.removeHover(true);
         }
         /**
          * Triggers when an object has been highlighted
@@ -4036,30 +3932,48 @@ var EventNotifier = __webpack_require__("549c").EventNotifier;
     },
 
     /**
-     * Set the selected zinc object
+     * A callback used by children components. Set the selected zinc object
      *
      * @param {object} object Zinc object
      */
-    objectSelected: function objectSelected(object) {
+    objectSelected: function objectSelected(object, propagate) {
       if (object !== this.selectedObject) {
         this.selectedObject = object;
         this.$refs.opacityControl.setObject(this.selectedObject);
-        if (object) this.$module.setSelectedByZincObject(object, true);else this.$module.setSelectedByObjects([], true);
+        if (object) this.$module.setSelectedByZincObject(object, propagate);else this.$module.setSelectedByObjects([], propagate);
       }
     },
 
     /**
-     * Set the highlighted zinc object
+     * A callback used by children components. Set the highlighted zinc object
      *
      * @param {object} object Zinc object
      */
-    objectHovered: function objectHovered(object) {
+    objectHovered: function objectHovered(object, propagate) {
       if (object !== this.hoveredObject) {
         this.hoveredObject = object;
-        if (object) this.$module.setHighlightedByZincObject(object, true);else this.$module.setHighlightedByObjects([], true);
+        if (object) this.$module.setHighlightedByZincObject(object, propagate);else this.$module.setHighlightedByObjects([], propagate);
       }
     },
 
+    /**
+     * Set the selected by name.
+     *
+     * @param {name} name Name of the region
+     */
+    changeActiveByName: function changeActiveByName(name, propagate) {
+      if (name === undefined) this.$refs.traditionalControl.removeActive(propagate);else this.$refs.traditionalControl.changeActiveByName(name, propagate);
+    },
+
+    /**
+     * Set the highlighted by name.
+     *
+     * @param {name} name Name of the region
+     */
+    changeHighlightedByName: function changeHighlightedByName(name, propagate) {
+      if (name === undefined) this.$refs.traditionalControl.removeHover(propagate);else this.$refs.traditionalControl.changeHoverByName(name, propagate);
+    },
+
     /**
      * Start the animation.
      *
@@ -4222,6 +4136,9 @@ var EventNotifier = __webpack_require__("549c").EventNotifier;
         }
       }
     },
+    exportGLTF: function exportGLTF(binary) {
+      return this.$module.scene.exportGLTF(binary);
+    },
 
     /**
      * Function used for reading in new scaffold metadata and a custom
@@ -4272,7 +4189,6 @@ var EventNotifier = __webpack_require__("549c").EventNotifier;
 
     /**
      * Callback using ResizeObserver.
-    
      */
     adjustLayout: function adjustLayout() {
       var width = this.$refs.scaffoldContainer.clientWidth;
@@ -4297,13 +4213,21 @@ var EventNotifier = __webpack_require__("549c").EventNotifier;
       if (this.$module.zincRenderer) {
         this.$module.zincRenderer.onWindowResize();
       }
+    },
+    syncControlCallback: function syncControlCallback() {
+      var payload = this.$module.NDCCameraControl.getPanZoom();
+      this.$emit("scaffold-navigated", payload);
+    },
+    toggleSyncControl: function toggleSyncControl(flag) {
+      this.$module.toggleSyncControl(flag);
+      this.$module.setSyncControlCallback(this.syncControlCallback);
     }
   }
 });
 // CONCATENATED MODULE: ./src/components/ScaffoldVuer.vue?vue&type=script&lang=js&
  /* harmony default export */ var components_ScaffoldVuervue_type_script_lang_js_ = (ScaffoldVuervue_type_script_lang_js_); 
-// EXTERNAL MODULE: ./src/components/ScaffoldVuer.vue?vue&type=style&index=0&id=03b672b7&scoped=true&lang=scss&
-var ScaffoldVuervue_type_style_index_0_id_03b672b7_scoped_true_lang_scss_ = __webpack_require__("382f");
+// EXTERNAL MODULE: ./src/components/ScaffoldVuer.vue?vue&type=style&index=0&id=226a06e2&scoped=true&lang=scss&
+var ScaffoldVuervue_type_style_index_0_id_226a06e2_scoped_true_lang_scss_ = __webpack_require__("a1d1");
 
 // EXTERNAL MODULE: ./src/components/ScaffoldVuer.vue?vue&type=style&index=1&lang=scss&
 var ScaffoldVuervue_type_style_index_1_lang_scss_ = __webpack_require__("642d");
@@ -4324,7 +4248,7 @@ var ScaffoldVuer_component = normalizeComponent(
   staticRenderFns,
   false,
   null,
-  "03b672b7",
+  "226a06e2",
   null
   
 )