gwchq-textjam 0.2.3 → 0.2.5

package/dist/index.js

@@ -64600,8 +64600,7 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 
 function SvgGwcLogo(props) {
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("svg", _extends({
-    width: 44,
-    height: 44,
+    viewBox: "0 0 44 44",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
   }, props), _rect || (_rect = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("rect", {
@@ -65891,14 +65890,13 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 
 function SvgShare(props) {
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("svg", _extends({
-    width: 19,
-    height: 20,
+    viewBox: "0 0 19 20",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
   }, props), _path || (_path = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
     d: "M6.031 11.359l6.147 3.582m-.009-9.882L6.031 8.641M17.2 3.7a2.7 2.7 0 11-5.4 0 2.7 2.7 0 015.4 0zM6.4 10A2.7 2.7 0 111 10a2.7 2.7 0 015.4 0zm10.8 6.3a2.7 2.7 0 11-5.4 0 2.7 2.7 0 015.4 0z",
     stroke: "#003046",
-    strokeWidth: 2,
+    strokeWidth: 1.5,
     strokeLinecap: "round",
     strokeLinejoin: "round"
   })));
@@ -66150,8 +66148,7 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 
 function SvgTextJamLogo(props) {
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("svg", _extends({
-    width: 155,
-    height: 36,
+    viewBox: "0 0 155 36",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
   }, props), _path || (_path = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
@@ -68209,7 +68206,7 @@ __webpack_require__.d(__webpack_exports__, {
 });
 
 ;// ./src/assets/editor/pyodide/shims/pygal.js?url
-const pygalurl_namespaceObject = __webpack_require__.p + "assets/pygalef3b78a56cb1d66beb61.js";
+const pygalurl_namespaceObject = __webpack_require__.p + "assets/pygalc0b4f32d2d2cc5a0c638.js";
 ;// ./src/assets/editor/pyodide/packages/turtle-0.0.1-py3-none-any.whl?url
 const turtle_0_0_1_py3_none_anyurl_namespaceObject = __webpack_require__.p + "assets/turtle-0.0.1-py3-none-any0c3147a3e0c3188b2544.whl";
 ;// ./src/assets/editor/pyodide/packages/p5-0.0.1-py3-none-any.whl?url
@@ -68347,8 +68344,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
 /* harmony export */ });
-/* harmony import */ var D_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(89379);
-/* harmony import */ var D_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(53986);
+/* harmony import */ var _Users_hanna_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(89379);
+/* harmony import */ var _Users_hanna_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(53986);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(51649);
 /* harmony import */ var _hello_pangea_dnd__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(98850);
 /* harmony import */ var react_redux__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(14062);
@@ -68372,7 +68369,7 @@ var DraggableTab = _ref => {
       panelIndex,
       fileIndex
     } = _ref,
-    otherProps = (0,D_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .A)(_ref, _excluded);
+    otherProps = (0,_Users_hanna_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .A)(_ref, _excluded);
   var openFiles = (0,react_redux__WEBPACK_IMPORTED_MODULE_1__.useSelector)(state => state.editor.openedFiles);
   var openFilesCount = openFiles[panelIndex].length;
   var dispatch = (0,react_redux__WEBPACK_IMPORTED_MODULE_1__.useDispatch)();
@@ -68389,7 +68386,7 @@ var DraggableTab = _ref => {
       switchToFileTab(panelIndex, (fileIndex + openFilesCount - 1) % openFilesCount);
     }
   };
-  var InnerTab = () => /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(react_tabs__WEBPACK_IMPORTED_MODULE_2__.Tab, (0,D_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A)((0,D_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A)({
+  var InnerTab = () => /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)(react_tabs__WEBPACK_IMPORTED_MODULE_2__.Tab, (0,_Users_hanna_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A)((0,_Users_hanna_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A)({
     onClick: e => {
       e.stopPropagation();
       switchToFileTab(panelIndex, fileIndex);
@@ -68407,7 +68404,7 @@ var DraggableTab = _ref => {
         draggableProps,
         dragHandleProps
       } = _ref2;
-      return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)("div", (0,D_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A)((0,D_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A)((0,D_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A)({
+      return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)("div", (0,_Users_hanna_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A)((0,_Users_hanna_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A)((0,_Users_hanna_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A)({
         className: "draggable-tab",
         ref: innerRef
       }, draggableProps), dragHandleProps), {}, {
@@ -68429,8 +68426,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
 /* harmony export */ });
-/* harmony import */ var D_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(89379);
-/* harmony import */ var D_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(53986);
+/* harmony import */ var _Users_hanna_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(89379);
+/* harmony import */ var _Users_hanna_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(53986);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(51649);
 /* harmony import */ var _hello_pangea_dnd__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(98850);
 /* harmony import */ var react_tabs__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(39243);
@@ -68449,8 +68446,8 @@ var DroppableTabList = _ref => {
       children: _children,
       index
     } = _ref,
-    otherProps = (0,D_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_4__/* ["default"] */ .A)(_ref, _excluded);
-  return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(react_tabs__WEBPACK_IMPORTED_MODULE_1__.TabList, (0,D_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .A)((0,D_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .A)({}, otherProps), {}, {
+    otherProps = (0,_Users_hanna_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectWithoutProperties_js__WEBPACK_IMPORTED_MODULE_4__/* ["default"] */ .A)(_ref, _excluded);
+  return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(react_tabs__WEBPACK_IMPORTED_MODULE_1__.TabList, (0,_Users_hanna_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .A)((0,_Users_hanna_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .A)({}, otherProps), {}, {
     children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_hello_pangea_dnd__WEBPACK_IMPORTED_MODULE_6__.Droppable, {
       direction: "horizontal",
       droppableId: index.toString(),
@@ -68460,7 +68457,7 @@ var DroppableTabList = _ref => {
           droppableProps,
           placeholder
         } = _ref2;
-        return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)("div", (0,D_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .A)((0,D_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .A)({
+        return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)("div", (0,_Users_hanna_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .A)((0,_Users_hanna_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .A)({
           className: "droppable-tab-list"
         }, droppableProps), {}, {
           ref: innerRef,
@@ -102221,8 +102218,8 @@ __webpack_require__.r(__webpack_exports__);
 
 
 // TODO: refactor existing modals
-/** !deprecated!
- * use BaseModal from `index.tsx` instead
+/** !deprecated!
+ * use BaseModal from `index.tsx` instead
  */
 
 var BaseModal = _ref => {
@@ -102918,7 +102915,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
 /* harmony export */ });
-/* harmony import */ var D_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(89379);
+/* harmony import */ var _Users_hanna_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(89379);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(51649);
 /* harmony import */ var react_redux__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(14062);
 /* harmony import */ var _redux_EditorSlice__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(68512);
@@ -102998,7 +102995,7 @@ var ProjectName = _ref => {
       id: "project_name_label",
       className: _styles_module_scss__WEBPACK_IMPORTED_MODULE_3__["default"].projectLabel,
       children: "Project Name"
-    }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)("div", (0,D_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A)((0,D_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A)({
+    }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsxs)("div", (0,_Users_hanna_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A)((0,_Users_hanna_gwc_gwchq_textjam_node_modules_babel_runtime_helpers_esm_objectSpread2_js__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A)({
       className: classnames__WEBPACK_IMPORTED_MODULE_2___default()(_styles_module_scss__WEBPACK_IMPORTED_MODULE_3__["default"].projectName, className)
     }, hoverProps), {}, {
       children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_4__.jsx)((components_Tooltip_Tooltip__WEBPACK_IMPORTED_MODULE_8___default()), {
@@ -116561,6 +116558,115 @@ function escapeName(str, charsToEscape) {
 
 
 
+/***/ }),
+
+/***/ 16450:
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+
+
+var isValue             = __webpack_require__(48175)
+  , ensureValue         = __webpack_require__(34809)
+  , ensurePlainFunction = __webpack_require__(90251)
+  , copy                = __webpack_require__(30203)
+  , normalizeOptions    = __webpack_require__(90148)
+  , map                 = __webpack_require__(30498);
+
+var bind = Function.prototype.bind
+  , defineProperty = Object.defineProperty
+  , hasOwnProperty = Object.prototype.hasOwnProperty
+  , define;
+
+define = function (name, desc, options) {
+	var value = ensureValue(desc) && ensurePlainFunction(desc.value), dgs;
+	dgs = copy(desc);
+	delete dgs.writable;
+	delete dgs.value;
+	dgs.get = function () {
+		if (!options.overwriteDefinition && hasOwnProperty.call(this, name)) return value;
+		desc.value = bind.call(value, options.resolveContext ? options.resolveContext(this) : this);
+		defineProperty(this, name, desc);
+		return this[name];
+	};
+	return dgs;
+};
+
+module.exports = function (props/*, options*/) {
+	var options = normalizeOptions(arguments[1]);
+	if (isValue(options.resolveContext)) ensurePlainFunction(options.resolveContext);
+	return map(props, function (desc, name) { return define(name, desc, options); });
+};
+
+
+/***/ }),
+
+/***/ 58263:
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+
+
+var isValue         = __webpack_require__(48175)
+  , isPlainFunction = __webpack_require__(6873)
+  , assign          = __webpack_require__(16596)
+  , normalizeOpts   = __webpack_require__(90148)
+  , contains        = __webpack_require__(70214);
+
+var d = (module.exports = function (dscr, value/*, options*/) {
+	var c, e, w, options, desc;
+	if (arguments.length < 2 || typeof dscr !== "string") {
+		options = value;
+		value = dscr;
+		dscr = null;
+	} else {
+		options = arguments[2];
+	}
+	if (isValue(dscr)) {
+		c = contains.call(dscr, "c");
+		e = contains.call(dscr, "e");
+		w = contains.call(dscr, "w");
+	} else {
+		c = w = true;
+		e = false;
+	}
+
+	desc = { value: value, configurable: c, enumerable: e, writable: w };
+	return !options ? desc : assign(normalizeOpts(options), desc);
+});
+
+d.gs = function (dscr, get, set/*, options*/) {
+	var c, e, options, desc;
+	if (typeof dscr !== "string") {
+		options = set;
+		set = get;
+		get = dscr;
+		dscr = null;
+	} else {
+		options = arguments[3];
+	}
+	if (!isValue(get)) {
+		get = undefined;
+	} else if (!isPlainFunction(get)) {
+		options = get;
+		get = set = undefined;
+	} else if (!isValue(set)) {
+		set = undefined;
+	} else if (!isPlainFunction(set)) {
+		options = set;
+		set = undefined;
+	}
+	if (isValue(dscr)) {
+		c = contains.call(dscr, "c");
+		e = contains.call(dscr, "e");
+	} else {
+		c = true;
+		e = false;
+	}
+
+	desc = { get: get, set: set, configurable: c, enumerable: e };
+	return !options ? desc : assign(normalizeOpts(options), desc);
+};
+
+
 /***/ }),
 
 /***/ 83999:
@@ -131389,115 +131495,6 @@ year.every = function(k) {
 var years = year.range;
 
 
-/***/ }),
-
-/***/ 16450:
-/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
-
-
-
-var isValue             = __webpack_require__(48175)
-  , ensureValue         = __webpack_require__(34809)
-  , ensurePlainFunction = __webpack_require__(90251)
-  , copy                = __webpack_require__(30203)
-  , normalizeOptions    = __webpack_require__(90148)
-  , map                 = __webpack_require__(30498);
-
-var bind = Function.prototype.bind
-  , defineProperty = Object.defineProperty
-  , hasOwnProperty = Object.prototype.hasOwnProperty
-  , define;
-
-define = function (name, desc, options) {
-	var value = ensureValue(desc) && ensurePlainFunction(desc.value), dgs;
-	dgs = copy(desc);
-	delete dgs.writable;
-	delete dgs.value;
-	dgs.get = function () {
-		if (!options.overwriteDefinition && hasOwnProperty.call(this, name)) return value;
-		desc.value = bind.call(value, options.resolveContext ? options.resolveContext(this) : this);
-		defineProperty(this, name, desc);
-		return this[name];
-	};
-	return dgs;
-};
-
-module.exports = function (props/*, options*/) {
-	var options = normalizeOptions(arguments[1]);
-	if (isValue(options.resolveContext)) ensurePlainFunction(options.resolveContext);
-	return map(props, function (desc, name) { return define(name, desc, options); });
-};
-
-
-/***/ }),
-
-/***/ 58263:
-/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
-
-
-
-var isValue         = __webpack_require__(48175)
-  , isPlainFunction = __webpack_require__(6873)
-  , assign          = __webpack_require__(16596)
-  , normalizeOpts   = __webpack_require__(90148)
-  , contains        = __webpack_require__(70214);
-
-var d = (module.exports = function (dscr, value/*, options*/) {
-	var c, e, w, options, desc;
-	if (arguments.length < 2 || typeof dscr !== "string") {
-		options = value;
-		value = dscr;
-		dscr = null;
-	} else {
-		options = arguments[2];
-	}
-	if (isValue(dscr)) {
-		c = contains.call(dscr, "c");
-		e = contains.call(dscr, "e");
-		w = contains.call(dscr, "w");
-	} else {
-		c = w = true;
-		e = false;
-	}
-
-	desc = { value: value, configurable: c, enumerable: e, writable: w };
-	return !options ? desc : assign(normalizeOpts(options), desc);
-});
-
-d.gs = function (dscr, get, set/*, options*/) {
-	var c, e, options, desc;
-	if (typeof dscr !== "string") {
-		options = set;
-		set = get;
-		get = dscr;
-		dscr = null;
-	} else {
-		options = arguments[3];
-	}
-	if (!isValue(get)) {
-		get = undefined;
-	} else if (!isPlainFunction(get)) {
-		options = get;
-		get = set = undefined;
-	} else if (!isValue(set)) {
-		set = undefined;
-	} else if (!isPlainFunction(set)) {
-		options = set;
-		set = undefined;
-	}
-	if (isValue(dscr)) {
-		c = contains.call(dscr, "c");
-		e = contains.call(dscr, "e");
-	} else {
-		c = true;
-		e = false;
-	}
-
-	desc = { get: get, set: set, configurable: c, enumerable: e };
-	return !options ? desc : assign(normalizeOpts(options), desc);
-};
-
-
 /***/ }),
 
 /***/ 30041:
@@ -142795,7 +142792,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
 /* harmony export */ });
 // extracted by mini-css-extract-plugin
-/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({"grey-rpi-grey-15":"#d5d7dc","grey-rpi-grey-40":"#9497a4","grey-rpi-grey-5":"#f1f2f3","grey-rpi-grey-70":"#4a4d59","grey-rpf-white":"#fff","sidebar":"styles-module__sidebar--Fu5Qi","gwcLogo":"styles-module__gwcLogo--o2p4A","bar":"styles-module__bar--fOlLf","optionsTop":"styles-module__optionsTop--2jNbs","optionsBottom":"styles-module__optionsBottom--PtwF4","option":"styles-module__option--MOGCu","userOption":"styles-module__userOption--qGt5j","selected":"styles-module__selected--avjSK","panel":"styles-module__panel--bHhSv","panelWithFooter":"styles-module__panelWithFooter--5ItsY","panelHeading":"styles-module__panelHeading--GRNt0","panelHeader":"styles-module__panelHeader--bAHfN","panelContent":"styles-module__panelContent--X7kot","panelButtons":"styles-module__panelButtons---y4S-","panelFooter":"styles-module__panelFooter--T1y-s"});
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({"grey-rpi-grey-15":"#d5d7dc","grey-rpi-grey-40":"#9497a4","grey-rpi-grey-5":"#f1f2f3","grey-rpi-grey-70":"#4a4d59","grey-rpf-white":"#fff","sidebar":"styles-module__sidebar--Fu5Qi","bar":"styles-module__bar--fOlLf","optionsTop":"styles-module__optionsTop--2jNbs","optionsBottom":"styles-module__optionsBottom--PtwF4","option":"styles-module__option--MOGCu","userOption":"styles-module__userOption--qGt5j","selected":"styles-module__selected--avjSK","panel":"styles-module__panel--bHhSv","panelWithFooter":"styles-module__panelWithFooter--5ItsY","panelHeading":"styles-module__panelHeading--GRNt0","panelHeader":"styles-module__panelHeader--bAHfN","panelContent":"styles-module__panelContent--X7kot","panelButtons":"styles-module__panelButtons---y4S-","panelFooter":"styles-module__panelFooter--T1y-s"});
 
 /***/ }),
 
@@ -148089,324 +148086,6 @@ function hsl2rgb(hsl) {
 }
 
 
-/***/ }),
-
-/***/ 9793:
-/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
-
-
-
-var annAttrs = __webpack_require__(84676);
-var overrideAll = (__webpack_require__(70756).overrideAll);
-var templatedArray = (__webpack_require__(79338).templatedArray);
-
-module.exports = overrideAll(templatedArray('annotation', {
-    visible: annAttrs.visible,
-    x: {
-        valType: 'any',
-        description: [
-            'Sets the annotation\'s x position.'
-        ].join(' ')
-    },
-    y: {
-        valType: 'any',
-        description: [
-            'Sets the annotation\'s y position.'
-        ].join(' ')
-    },
-    z: {
-        valType: 'any',
-        description: [
-            'Sets the annotation\'s z position.'
-        ].join(' ')
-    },
-    ax: {
-        valType: 'number',
-        description: [
-            'Sets the x component of the arrow tail about the arrow head (in pixels).'
-        ].join(' ')
-    },
-    ay: {
-        valType: 'number',
-        description: [
-            'Sets the y component of the arrow tail about the arrow head (in pixels).'
-        ].join(' ')
-    },
-
-    xanchor: annAttrs.xanchor,
-    xshift: annAttrs.xshift,
-    yanchor: annAttrs.yanchor,
-    yshift: annAttrs.yshift,
-
-    text: annAttrs.text,
-    textangle: annAttrs.textangle,
-    font: annAttrs.font,
-    width: annAttrs.width,
-    height: annAttrs.height,
-    opacity: annAttrs.opacity,
-    align: annAttrs.align,
-    valign: annAttrs.valign,
-    bgcolor: annAttrs.bgcolor,
-    bordercolor: annAttrs.bordercolor,
-    borderpad: annAttrs.borderpad,
-    borderwidth: annAttrs.borderwidth,
-    showarrow: annAttrs.showarrow,
-    arrowcolor: annAttrs.arrowcolor,
-    arrowhead: annAttrs.arrowhead,
-    startarrowhead: annAttrs.startarrowhead,
-    arrowside: annAttrs.arrowside,
-    arrowsize: annAttrs.arrowsize,
-    startarrowsize: annAttrs.startarrowsize,
-    arrowwidth: annAttrs.arrowwidth,
-    standoff: annAttrs.standoff,
-    startstandoff: annAttrs.startstandoff,
-    hovertext: annAttrs.hovertext,
-    hoverlabel: annAttrs.hoverlabel,
-    captureevents: annAttrs.captureevents,
-
-    // maybes later?
-    // clicktoshow: annAttrs.clicktoshow,
-    // xclick: annAttrs.xclick,
-    // yclick: annAttrs.yclick,
-
-    // not needed!
-    // axref: 'pixel'
-    // ayref: 'pixel'
-    // xref: 'x'
-    // yref: 'y
-    // zref: 'z'
-}), 'calc', 'from-root');
-
-
-/***/ }),
-
-/***/ 58121:
-/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
-
-
-
-var Lib = __webpack_require__(30991);
-var Axes = __webpack_require__(15076);
-
-module.exports = function convert(scene) {
-    var fullSceneLayout = scene.fullSceneLayout;
-    var anns = fullSceneLayout.annotations;
-
-    for(var i = 0; i < anns.length; i++) {
-        mockAnnAxes(anns[i], scene);
-    }
-
-    scene.fullLayout._infolayer
-        .selectAll('.annotation-' + scene.id)
-        .remove();
-};
-
-function mockAnnAxes(ann, scene) {
-    var fullSceneLayout = scene.fullSceneLayout;
-    var domain = fullSceneLayout.domain;
-    var size = scene.fullLayout._size;
-
-    var base = {
-        // this gets fill in on render
-        pdata: null,
-
-        // to get setConvert to not execute cleanly
-        type: 'linear',
-
-        // don't try to update them on `editable: true`
-        autorange: false,
-
-        // set infinite range so that annotation draw routine
-        // does not try to remove 'outside-range' annotations,
-        // this case is handled in the render loop
-        range: [-Infinity, Infinity]
-    };
-
-    ann._xa = {};
-    Lib.extendFlat(ann._xa, base);
-    Axes.setConvert(ann._xa);
-    ann._xa._offset = size.l + domain.x[0] * size.w;
-    ann._xa.l2p = function() {
-        return 0.5 * (1 + ann._pdata[0] / ann._pdata[3]) * size.w * (domain.x[1] - domain.x[0]);
-    };
-
-    ann._ya = {};
-    Lib.extendFlat(ann._ya, base);
-    Axes.setConvert(ann._ya);
-    ann._ya._offset = size.t + (1 - domain.y[1]) * size.h;
-    ann._ya.l2p = function() {
-        return 0.5 * (1 - ann._pdata[1] / ann._pdata[3]) * size.h * (domain.y[1] - domain.y[0]);
-    };
-}
-
-
-/***/ }),
-
-/***/ 41926:
-/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
-
-
-
-var Lib = __webpack_require__(30991);
-var Axes = __webpack_require__(15076);
-var handleArrayContainerDefaults = __webpack_require__(21238);
-var handleAnnotationCommonDefaults = __webpack_require__(84081);
-var attributes = __webpack_require__(9793);
-
-module.exports = function handleDefaults(sceneLayoutIn, sceneLayoutOut, opts) {
-    handleArrayContainerDefaults(sceneLayoutIn, sceneLayoutOut, {
-        name: 'annotations',
-        handleItemDefaults: handleAnnotationDefaults,
-        fullLayout: opts.fullLayout
-    });
-};
-
-function handleAnnotationDefaults(annIn, annOut, sceneLayout, opts) {
-    function coerce(attr, dflt) {
-        return Lib.coerce(annIn, annOut, attributes, attr, dflt);
-    }
-
-    function coercePosition(axLetter) {
-        var axName = axLetter + 'axis';
-
-        // mock in such way that getFromId grabs correct 3D axis
-        var gdMock = { _fullLayout: {} };
-        gdMock._fullLayout[axName] = sceneLayout[axName];
-
-        return Axes.coercePosition(annOut, gdMock, coerce, axLetter, axLetter, 0.5);
-    }
-
-
-    var visible = coerce('visible');
-    if(!visible) return;
-
-    handleAnnotationCommonDefaults(annIn, annOut, opts.fullLayout, coerce);
-
-    coercePosition('x');
-    coercePosition('y');
-    coercePosition('z');
-
-    // if you have one coordinate you should all three
-    Lib.noneOrAll(annIn, annOut, ['x', 'y', 'z']);
-
-    // hard-set here for completeness
-    annOut.xref = 'x';
-    annOut.yref = 'y';
-    annOut.zref = 'z';
-
-    coerce('xanchor');
-    coerce('yanchor');
-    coerce('xshift');
-    coerce('yshift');
-
-    if(annOut.showarrow) {
-        annOut.axref = 'pixel';
-        annOut.ayref = 'pixel';
-
-        // TODO maybe default values should be bigger than the 2D case?
-        coerce('ax', -10);
-        coerce('ay', -30);
-
-        // if you have one part of arrow length you should have both
-        Lib.noneOrAll(annIn, annOut, ['ax', 'ay']);
-    }
-}
-
-
-/***/ }),
-
-/***/ 13802:
-/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
-
-
-
-var drawRaw = (__webpack_require__(47995).drawRaw);
-var project = __webpack_require__(51344);
-var axLetters = ['x', 'y', 'z'];
-
-module.exports = function draw(scene) {
-    var fullSceneLayout = scene.fullSceneLayout;
-    var dataScale = scene.dataScale;
-    var anns = fullSceneLayout.annotations;
-
-    for(var i = 0; i < anns.length; i++) {
-        var ann = anns[i];
-        var annotationIsOffscreen = false;
-
-        for(var j = 0; j < 3; j++) {
-            var axLetter = axLetters[j];
-            var pos = ann[axLetter];
-            var ax = fullSceneLayout[axLetter + 'axis'];
-            var posFraction = ax.r2fraction(pos);
-
-            if(posFraction < 0 || posFraction > 1) {
-                annotationIsOffscreen = true;
-                break;
-            }
-        }
-
-        if(annotationIsOffscreen) {
-            scene.fullLayout._infolayer
-                .select('.annotation-' + scene.id + '[data-index="' + i + '"]')
-                .remove();
-        } else {
-            ann._pdata = project(scene.glplot.cameraParams, [
-                fullSceneLayout.xaxis.r2l(ann.x) * dataScale[0],
-                fullSceneLayout.yaxis.r2l(ann.y) * dataScale[1],
-                fullSceneLayout.zaxis.r2l(ann.z) * dataScale[2]
-            ]);
-
-            drawRaw(scene.graphDiv, ann, i, scene.id, ann._xa, ann._ya);
-        }
-    }
-};
-
-
-/***/ }),
-
-/***/ 86578:
-/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
-
-
-
-var Registry = __webpack_require__(13936);
-var Lib = __webpack_require__(30991);
-
-module.exports = {
-    moduleType: 'component',
-    name: 'annotations3d',
-
-    schema: {
-        subplots: {
-            scene: {annotations: __webpack_require__(9793)}
-        }
-    },
-
-    layoutAttributes: __webpack_require__(9793),
-    handleDefaults: __webpack_require__(41926),
-    includeBasePlot: includeGL3D,
-
-    convert: __webpack_require__(58121),
-    draw: __webpack_require__(13802)
-};
-
-function includeGL3D(layoutIn, layoutOut) {
-    var GL3D = Registry.subplotsRegistry.gl3d;
-    if(!GL3D) return;
-
-    var attrRegex = GL3D.attrRegex;
-
-    var keys = Object.keys(layoutIn);
-    for(var i = 0; i < keys.length; i++) {
-        var k = keys[i];
-        if(attrRegex.test(k) && (layoutIn[k].annotations || []).length) {
-            Lib.pushUnique(layoutOut._basePlotModules, GL3D);
-            Lib.pushUnique(layoutOut._subplots.gl3d, k);
-        }
-    }
-}
-
-
 /***/ }),
 
 /***/ 2595:
@@ -150380,6 +150059,324 @@ module.exports = {
 };
 
 
+/***/ }),
+
+/***/ 9793:
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+
+
+var annAttrs = __webpack_require__(84676);
+var overrideAll = (__webpack_require__(70756).overrideAll);
+var templatedArray = (__webpack_require__(79338).templatedArray);
+
+module.exports = overrideAll(templatedArray('annotation', {
+    visible: annAttrs.visible,
+    x: {
+        valType: 'any',
+        description: [
+            'Sets the annotation\'s x position.'
+        ].join(' ')
+    },
+    y: {
+        valType: 'any',
+        description: [
+            'Sets the annotation\'s y position.'
+        ].join(' ')
+    },
+    z: {
+        valType: 'any',
+        description: [
+            'Sets the annotation\'s z position.'
+        ].join(' ')
+    },
+    ax: {
+        valType: 'number',
+        description: [
+            'Sets the x component of the arrow tail about the arrow head (in pixels).'
+        ].join(' ')
+    },
+    ay: {
+        valType: 'number',
+        description: [
+            'Sets the y component of the arrow tail about the arrow head (in pixels).'
+        ].join(' ')
+    },
+
+    xanchor: annAttrs.xanchor,
+    xshift: annAttrs.xshift,
+    yanchor: annAttrs.yanchor,
+    yshift: annAttrs.yshift,
+
+    text: annAttrs.text,
+    textangle: annAttrs.textangle,
+    font: annAttrs.font,
+    width: annAttrs.width,
+    height: annAttrs.height,
+    opacity: annAttrs.opacity,
+    align: annAttrs.align,
+    valign: annAttrs.valign,
+    bgcolor: annAttrs.bgcolor,
+    bordercolor: annAttrs.bordercolor,
+    borderpad: annAttrs.borderpad,
+    borderwidth: annAttrs.borderwidth,
+    showarrow: annAttrs.showarrow,
+    arrowcolor: annAttrs.arrowcolor,
+    arrowhead: annAttrs.arrowhead,
+    startarrowhead: annAttrs.startarrowhead,
+    arrowside: annAttrs.arrowside,
+    arrowsize: annAttrs.arrowsize,
+    startarrowsize: annAttrs.startarrowsize,
+    arrowwidth: annAttrs.arrowwidth,
+    standoff: annAttrs.standoff,
+    startstandoff: annAttrs.startstandoff,
+    hovertext: annAttrs.hovertext,
+    hoverlabel: annAttrs.hoverlabel,
+    captureevents: annAttrs.captureevents,
+
+    // maybes later?
+    // clicktoshow: annAttrs.clicktoshow,
+    // xclick: annAttrs.xclick,
+    // yclick: annAttrs.yclick,
+
+    // not needed!
+    // axref: 'pixel'
+    // ayref: 'pixel'
+    // xref: 'x'
+    // yref: 'y
+    // zref: 'z'
+}), 'calc', 'from-root');
+
+
+/***/ }),
+
+/***/ 58121:
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+
+
+var Lib = __webpack_require__(30991);
+var Axes = __webpack_require__(15076);
+
+module.exports = function convert(scene) {
+    var fullSceneLayout = scene.fullSceneLayout;
+    var anns = fullSceneLayout.annotations;
+
+    for(var i = 0; i < anns.length; i++) {
+        mockAnnAxes(anns[i], scene);
+    }
+
+    scene.fullLayout._infolayer
+        .selectAll('.annotation-' + scene.id)
+        .remove();
+};
+
+function mockAnnAxes(ann, scene) {
+    var fullSceneLayout = scene.fullSceneLayout;
+    var domain = fullSceneLayout.domain;
+    var size = scene.fullLayout._size;
+
+    var base = {
+        // this gets fill in on render
+        pdata: null,
+
+        // to get setConvert to not execute cleanly
+        type: 'linear',
+
+        // don't try to update them on `editable: true`
+        autorange: false,
+
+        // set infinite range so that annotation draw routine
+        // does not try to remove 'outside-range' annotations,
+        // this case is handled in the render loop
+        range: [-Infinity, Infinity]
+    };
+
+    ann._xa = {};
+    Lib.extendFlat(ann._xa, base);
+    Axes.setConvert(ann._xa);
+    ann._xa._offset = size.l + domain.x[0] * size.w;
+    ann._xa.l2p = function() {
+        return 0.5 * (1 + ann._pdata[0] / ann._pdata[3]) * size.w * (domain.x[1] - domain.x[0]);
+    };
+
+    ann._ya = {};
+    Lib.extendFlat(ann._ya, base);
+    Axes.setConvert(ann._ya);
+    ann._ya._offset = size.t + (1 - domain.y[1]) * size.h;
+    ann._ya.l2p = function() {
+        return 0.5 * (1 - ann._pdata[1] / ann._pdata[3]) * size.h * (domain.y[1] - domain.y[0]);
+    };
+}
+
+
+/***/ }),
+
+/***/ 41926:
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+
+
+var Lib = __webpack_require__(30991);
+var Axes = __webpack_require__(15076);
+var handleArrayContainerDefaults = __webpack_require__(21238);
+var handleAnnotationCommonDefaults = __webpack_require__(84081);
+var attributes = __webpack_require__(9793);
+
+module.exports = function handleDefaults(sceneLayoutIn, sceneLayoutOut, opts) {
+    handleArrayContainerDefaults(sceneLayoutIn, sceneLayoutOut, {
+        name: 'annotations',
+        handleItemDefaults: handleAnnotationDefaults,
+        fullLayout: opts.fullLayout
+    });
+};
+
+function handleAnnotationDefaults(annIn, annOut, sceneLayout, opts) {
+    function coerce(attr, dflt) {
+        return Lib.coerce(annIn, annOut, attributes, attr, dflt);
+    }
+
+    function coercePosition(axLetter) {
+        var axName = axLetter + 'axis';
+
+        // mock in such way that getFromId grabs correct 3D axis
+        var gdMock = { _fullLayout: {} };
+        gdMock._fullLayout[axName] = sceneLayout[axName];
+
+        return Axes.coercePosition(annOut, gdMock, coerce, axLetter, axLetter, 0.5);
+    }
+
+
+    var visible = coerce('visible');
+    if(!visible) return;
+
+    handleAnnotationCommonDefaults(annIn, annOut, opts.fullLayout, coerce);
+
+    coercePosition('x');
+    coercePosition('y');
+    coercePosition('z');
+
+    // if you have one coordinate you should all three
+    Lib.noneOrAll(annIn, annOut, ['x', 'y', 'z']);
+
+    // hard-set here for completeness
+    annOut.xref = 'x';
+    annOut.yref = 'y';
+    annOut.zref = 'z';
+
+    coerce('xanchor');
+    coerce('yanchor');
+    coerce('xshift');
+    coerce('yshift');
+
+    if(annOut.showarrow) {
+        annOut.axref = 'pixel';
+        annOut.ayref = 'pixel';
+
+        // TODO maybe default values should be bigger than the 2D case?
+        coerce('ax', -10);
+        coerce('ay', -30);
+
+        // if you have one part of arrow length you should have both
+        Lib.noneOrAll(annIn, annOut, ['ax', 'ay']);
+    }
+}
+
+
+/***/ }),
+
+/***/ 13802:
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+
+
+var drawRaw = (__webpack_require__(47995).drawRaw);
+var project = __webpack_require__(51344);
+var axLetters = ['x', 'y', 'z'];
+
+module.exports = function draw(scene) {
+    var fullSceneLayout = scene.fullSceneLayout;
+    var dataScale = scene.dataScale;
+    var anns = fullSceneLayout.annotations;
+
+    for(var i = 0; i < anns.length; i++) {
+        var ann = anns[i];
+        var annotationIsOffscreen = false;
+
+        for(var j = 0; j < 3; j++) {
+            var axLetter = axLetters[j];
+            var pos = ann[axLetter];
+            var ax = fullSceneLayout[axLetter + 'axis'];
+            var posFraction = ax.r2fraction(pos);
+
+            if(posFraction < 0 || posFraction > 1) {
+                annotationIsOffscreen = true;
+                break;
+            }
+        }
+
+        if(annotationIsOffscreen) {
+            scene.fullLayout._infolayer
+                .select('.annotation-' + scene.id + '[data-index="' + i + '"]')
+                .remove();
+        } else {
+            ann._pdata = project(scene.glplot.cameraParams, [
+                fullSceneLayout.xaxis.r2l(ann.x) * dataScale[0],
+                fullSceneLayout.yaxis.r2l(ann.y) * dataScale[1],
+                fullSceneLayout.zaxis.r2l(ann.z) * dataScale[2]
+            ]);
+
+            drawRaw(scene.graphDiv, ann, i, scene.id, ann._xa, ann._ya);
+        }
+    }
+};
+
+
+/***/ }),
+
+/***/ 86578:
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+
+
+var Registry = __webpack_require__(13936);
+var Lib = __webpack_require__(30991);
+
+module.exports = {
+    moduleType: 'component',
+    name: 'annotations3d',
+
+    schema: {
+        subplots: {
+            scene: {annotations: __webpack_require__(9793)}
+        }
+    },
+
+    layoutAttributes: __webpack_require__(9793),
+    handleDefaults: __webpack_require__(41926),
+    includeBasePlot: includeGL3D,
+
+    convert: __webpack_require__(58121),
+    draw: __webpack_require__(13802)
+};
+
+function includeGL3D(layoutIn, layoutOut) {
+    var GL3D = Registry.subplotsRegistry.gl3d;
+    if(!GL3D) return;
+
+    var attrRegex = GL3D.attrRegex;
+
+    var keys = Object.keys(layoutIn);
+    for(var i = 0; i < keys.length; i++) {
+        var k = keys[i];
+        if(attrRegex.test(k) && (layoutIn[k].annotations || []).length) {
+            Lib.pushUnique(layoutOut._basePlotModules, GL3D);
+            Lib.pushUnique(layoutOut._subplots.gl3d, k);
+        }
+    }
+}
+
+
 /***/ }),
 
 /***/ 27639:
@@ -248612,595 +248609,6 @@ function isValidZ(z) {
 }
 
 
-/***/ }),
-
-/***/ 42124:
-/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
-
-
-
-var histogramAttrs = __webpack_require__(71250);
-var makeBinAttrs = __webpack_require__(9284);
-var heatmapAttrs = __webpack_require__(68300);
-var baseAttrs = __webpack_require__(35667);
-var axisHoverFormat = (__webpack_require__(71018).axisHoverFormat);
-var hovertemplateAttrs = (__webpack_require__(92710)/* .hovertemplateAttrs */ .rb);
-var texttemplateAttrs = (__webpack_require__(92710)/* .texttemplateAttrs */ .ay);
-var colorScaleAttrs = __webpack_require__(17957);
-
-var extendFlat = (__webpack_require__(91307).extendFlat);
-
-module.exports = extendFlat(
-    {
-        x: histogramAttrs.x,
-        y: histogramAttrs.y,
-
-        z: {
-            valType: 'data_array',
-            editType: 'calc',
-            description: 'Sets the aggregation data.'
-        },
-        marker: {
-            color: {
-                valType: 'data_array',
-                editType: 'calc',
-                description: 'Sets the aggregation data.'
-            },
-            editType: 'calc'
-        },
-
-        histnorm: histogramAttrs.histnorm,
-        histfunc: histogramAttrs.histfunc,
-        nbinsx: histogramAttrs.nbinsx,
-        xbins: makeBinAttrs('x'),
-        nbinsy: histogramAttrs.nbinsy,
-        ybins: makeBinAttrs('y'),
-        autobinx: histogramAttrs.autobinx,
-        autobiny: histogramAttrs.autobiny,
-
-        bingroup: extendFlat({}, histogramAttrs.bingroup, {
-            description: [
-                'Set the `xbingroup` and `ybingroup` default prefix',
-                'For example, setting a `bingroup` of *1* on two histogram2d traces',
-                'will make them their x-bins and y-bins match separately.'
-            ].join(' ')
-        }),
-        xbingroup: extendFlat({}, histogramAttrs.bingroup, {
-            description: [
-                'Set a group of histogram traces which will have compatible x-bin settings.',
-                'Using `xbingroup`, histogram2d and histogram2dcontour traces ',
-                '(on axes of the same axis type) can have compatible x-bin settings.',
-                'Note that the same `xbingroup` value can be used to set (1D) histogram `bingroup`'
-            ].join(' ')
-        }),
-        ybingroup: extendFlat({}, histogramAttrs.bingroup, {
-            description: [
-                'Set a group of histogram traces which will have compatible y-bin settings.',
-                'Using `ybingroup`, histogram2d and histogram2dcontour traces ',
-                '(on axes of the same axis type) can have compatible y-bin settings.',
-                'Note that the same `ybingroup` value can be used to set (1D) histogram `bingroup`'
-            ].join(' ')
-        }),
-
-        xgap: heatmapAttrs.xgap,
-        ygap: heatmapAttrs.ygap,
-        zsmooth: heatmapAttrs.zsmooth,
-        xhoverformat: axisHoverFormat('x'),
-        yhoverformat: axisHoverFormat('y'),
-        zhoverformat: axisHoverFormat('z', 1),
-        hovertemplate: hovertemplateAttrs({}, {keys: 'z'}),
-        texttemplate: texttemplateAttrs({
-            arrayOk: false,
-            editType: 'plot'
-        }, {
-            keys: 'z'
-        }),
-        textfont: heatmapAttrs.textfont,
-        showlegend: extendFlat({}, baseAttrs.showlegend, {dflt: false})
-    },
-    colorScaleAttrs('', {cLetter: 'z', autoColorDflt: false})
-);
-
-
-/***/ }),
-
-/***/ 32492:
-/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
-
-
-
-var Lib = __webpack_require__(30991);
-var Axes = __webpack_require__(15076);
-
-var binFunctions = __webpack_require__(47260);
-var normFunctions = __webpack_require__(855);
-var doAvg = __webpack_require__(26756);
-var getBinSpanLabelRound = __webpack_require__(41574);
-var calcAllAutoBins = (__webpack_require__(50414).calcAllAutoBins);
-
-module.exports = function calc(gd, trace) {
-    var xa = Axes.getFromId(gd, trace.xaxis);
-    var ya = Axes.getFromId(gd, trace.yaxis);
-
-    var xcalendar = trace.xcalendar;
-    var ycalendar = trace.ycalendar;
-    var xr2c = function(v) { return xa.r2c(v, 0, xcalendar); };
-    var yr2c = function(v) { return ya.r2c(v, 0, ycalendar); };
-    var xc2r = function(v) { return xa.c2r(v, 0, xcalendar); };
-    var yc2r = function(v) { return ya.c2r(v, 0, ycalendar); };
-
-    var i, j, n, m;
-
-    // calculate the bins
-    var xBinsAndPos = calcAllAutoBins(gd, trace, xa, 'x');
-    var xBinSpec = xBinsAndPos[0];
-    var xPos0 = xBinsAndPos[1];
-    var yBinsAndPos = calcAllAutoBins(gd, trace, ya, 'y');
-    var yBinSpec = yBinsAndPos[0];
-    var yPos0 = yBinsAndPos[1];
-
-    var serieslen = trace._length;
-    if(xPos0.length > serieslen) xPos0.splice(serieslen, xPos0.length - serieslen);
-    if(yPos0.length > serieslen) yPos0.splice(serieslen, yPos0.length - serieslen);
-
-    // make the empty bin array & scale the map
-    var z = [];
-    var onecol = [];
-    var zerocol = [];
-    var nonuniformBinsX = typeof xBinSpec.size === 'string';
-    var nonuniformBinsY = typeof yBinSpec.size === 'string';
-    var xEdges = [];
-    var yEdges = [];
-    var xbins = nonuniformBinsX ? xEdges : xBinSpec;
-    var ybins = nonuniformBinsY ? yEdges : yBinSpec;
-    var total = 0;
-    var counts = [];
-    var inputPoints = [];
-    var norm = trace.histnorm;
-    var func = trace.histfunc;
-    var densitynorm = norm.indexOf('density') !== -1;
-    var extremefunc = func === 'max' || func === 'min';
-    var sizeinit = extremefunc ? null : 0;
-    var binfunc = binFunctions.count;
-    var normfunc = normFunctions[norm];
-    var doavg = false;
-    var xinc = [];
-    var yinc = [];
-
-    // set a binning function other than count?
-    // for binning functions: check first for 'z',
-    // then 'mc' in case we had a colored scatter plot
-    // and want to transfer these colors to the 2D histo
-    // TODO: axe this, make it the responsibility of the app changing type? or an impliedEdit?
-    var rawCounterData = ('z' in trace) ?
-        trace.z :
-        (('marker' in trace && Array.isArray(trace.marker.color)) ?
-            trace.marker.color : '');
-    if(rawCounterData && func !== 'count') {
-        doavg = func === 'avg';
-        binfunc = binFunctions[func];
-    }
-
-    // decrease end a little in case of rounding errors
-    var xBinSize = xBinSpec.size;
-    var xBinStart = xr2c(xBinSpec.start);
-    var xBinEnd = xr2c(xBinSpec.end) +
-        (xBinStart - Axes.tickIncrement(xBinStart, xBinSize, false, xcalendar)) / 1e6;
-
-    for(i = xBinStart; i < xBinEnd; i = Axes.tickIncrement(i, xBinSize, false, xcalendar)) {
-        onecol.push(sizeinit);
-        xEdges.push(i);
-        if(doavg) zerocol.push(0);
-    }
-    xEdges.push(i);
-
-    var nx = onecol.length;
-    var dx = (i - xBinStart) / nx;
-    var x0 = xc2r(xBinStart + dx / 2);
-
-    var yBinSize = yBinSpec.size;
-    var yBinStart = yr2c(yBinSpec.start);
-    var yBinEnd = yr2c(yBinSpec.end) +
-        (yBinStart - Axes.tickIncrement(yBinStart, yBinSize, false, ycalendar)) / 1e6;
-
-    for(i = yBinStart; i < yBinEnd; i = Axes.tickIncrement(i, yBinSize, false, ycalendar)) {
-        z.push(onecol.slice());
-        yEdges.push(i);
-        var ipCol = new Array(nx);
-        for(j = 0; j < nx; j++) ipCol[j] = [];
-        inputPoints.push(ipCol);
-        if(doavg) counts.push(zerocol.slice());
-    }
-    yEdges.push(i);
-
-    var ny = z.length;
-    var dy = (i - yBinStart) / ny;
-    var y0 = yc2r(yBinStart + dy / 2);
-
-    if(densitynorm) {
-        xinc = makeIncrements(onecol.length, xbins, dx, nonuniformBinsX);
-        yinc = makeIncrements(z.length, ybins, dy, nonuniformBinsY);
-    }
-
-    // for date axes we need bin bounds to be calcdata. For nonuniform bins
-    // we already have this, but uniform with start/end/size they're still strings.
-    if(!nonuniformBinsX && xa.type === 'date') xbins = binsToCalc(xr2c, xbins);
-    if(!nonuniformBinsY && ya.type === 'date') ybins = binsToCalc(yr2c, ybins);
-
-    // put data into bins
-    var uniqueValsPerX = true;
-    var uniqueValsPerY = true;
-    var xVals = new Array(nx);
-    var yVals = new Array(ny);
-    var xGapLow = Infinity;
-    var xGapHigh = Infinity;
-    var yGapLow = Infinity;
-    var yGapHigh = Infinity;
-    for(i = 0; i < serieslen; i++) {
-        var xi = xPos0[i];
-        var yi = yPos0[i];
-        n = Lib.findBin(xi, xbins);
-        m = Lib.findBin(yi, ybins);
-        if(n >= 0 && n < nx && m >= 0 && m < ny) {
-            total += binfunc(n, i, z[m], rawCounterData, counts[m]);
-            inputPoints[m][n].push(i);
-
-            if(uniqueValsPerX) {
-                if(xVals[n] === undefined) xVals[n] = xi;
-                else if(xVals[n] !== xi) uniqueValsPerX = false;
-            }
-            if(uniqueValsPerY) {
-                if(yVals[m] === undefined) yVals[m] = yi;
-                else if(yVals[m] !== yi) uniqueValsPerY = false;
-            }
-
-            xGapLow = Math.min(xGapLow, xi - xEdges[n]);
-            xGapHigh = Math.min(xGapHigh, xEdges[n + 1] - xi);
-            yGapLow = Math.min(yGapLow, yi - yEdges[m]);
-            yGapHigh = Math.min(yGapHigh, yEdges[m + 1] - yi);
-        }
-    }
-    // normalize, if needed
-    if(doavg) {
-        for(m = 0; m < ny; m++) total += doAvg(z[m], counts[m]);
-    }
-    if(normfunc) {
-        for(m = 0; m < ny; m++) normfunc(z[m], total, xinc, yinc[m]);
-    }
-
-    return {
-        x: xPos0,
-        xRanges: getRanges(xEdges, uniqueValsPerX && xVals, xGapLow, xGapHigh, xa, xcalendar),
-        x0: x0,
-        dx: dx,
-        y: yPos0,
-        yRanges: getRanges(yEdges, uniqueValsPerY && yVals, yGapLow, yGapHigh, ya, ycalendar),
-        y0: y0,
-        dy: dy,
-        z: z,
-        pts: inputPoints
-    };
-};
-
-function makeIncrements(len, bins, dv, nonuniform) {
-    var out = new Array(len);
-    var i;
-    if(nonuniform) {
-        for(i = 0; i < len; i++) out[i] = 1 / (bins[i + 1] - bins[i]);
-    } else {
-        var inc = 1 / dv;
-        for(i = 0; i < len; i++) out[i] = inc;
-    }
-    return out;
-}
-
-function binsToCalc(r2c, bins) {
-    return {
-        start: r2c(bins.start),
-        end: r2c(bins.end),
-        size: bins.size
-    };
-}
-
-function getRanges(edges, uniqueVals, gapLow, gapHigh, ax, calendar) {
-    var i;
-    var len = edges.length - 1;
-    var out = new Array(len);
-    var roundFn = getBinSpanLabelRound(gapLow, gapHigh, edges, ax, calendar);
-
-    for(i = 0; i < len; i++) {
-        var v = (uniqueVals || [])[i];
-        out[i] = v === undefined ?
-            [roundFn(edges[i]), roundFn(edges[i + 1], true)] :
-            [v, v];
-    }
-    return out;
-}
-
-
-/***/ }),
-
-/***/ 15611:
-/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
-
-
-
-var Lib = __webpack_require__(30991);
-
-var handleSampleDefaults = __webpack_require__(6236);
-var handleStyleDefaults = __webpack_require__(25157);
-var colorscaleDefaults = __webpack_require__(13682);
-var handleHeatmapLabelDefaults = __webpack_require__(52340);
-var attributes = __webpack_require__(42124);
-
-
-module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout) {
-    function coerce(attr, dflt) {
-        return Lib.coerce(traceIn, traceOut, attributes, attr, dflt);
-    }
-
-    handleSampleDefaults(traceIn, traceOut, coerce, layout);
-    if(traceOut.visible === false) return;
-
-    handleStyleDefaults(traceIn, traceOut, coerce, layout);
-    colorscaleDefaults(traceIn, traceOut, layout, coerce, {prefix: '', cLetter: 'z'});
-    coerce('hovertemplate');
-
-    handleHeatmapLabelDefaults(coerce, layout);
-
-    coerce('xhoverformat');
-    coerce('yhoverformat');
-};
-
-
-/***/ }),
-
-/***/ 94587:
-/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
-
-
-
-var heatmapHover = __webpack_require__(85243);
-var hoverLabelText = (__webpack_require__(15076).hoverLabelText);
-
-module.exports = function hoverPoints(pointData, xval, yval, hovermode, opts) {
-    var pts = heatmapHover(pointData, xval, yval, hovermode, opts);
-
-    if(!pts) return;
-
-    pointData = pts[0];
-    var indices = pointData.index;
-    var ny = indices[0];
-    var nx = indices[1];
-    var cd0 = pointData.cd[0];
-    var trace = cd0.trace;
-    var xRange = cd0.xRanges[nx];
-    var yRange = cd0.yRanges[ny];
-
-    pointData.xLabel = hoverLabelText(pointData.xa, [xRange[0], xRange[1]], trace.xhoverformat);
-    pointData.yLabel = hoverLabelText(pointData.ya, [yRange[0], yRange[1]], trace.yhoverformat);
-
-    return pts;
-};
-
-
-/***/ }),
-
-/***/ 3617:
-/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
-
-
-
-module.exports = {
-    attributes: __webpack_require__(42124),
-    supplyDefaults: __webpack_require__(15611),
-    crossTraceDefaults: __webpack_require__(34294),
-    calc: __webpack_require__(91980),
-    plot: __webpack_require__(29406),
-    layerName: 'heatmaplayer',
-    colorbar: __webpack_require__(90165),
-    style: __webpack_require__(58756),
-    hoverPoints: __webpack_require__(94587),
-    eventData: __webpack_require__(63870),
-
-    moduleType: 'trace',
-    name: 'histogram2d',
-    basePlotModule: __webpack_require__(47885),
-    categories: ['cartesian', 'svg', '2dMap', 'histogram', 'showLegend'],
-    meta: {
-        hrName: 'histogram_2d',
-        description: [
-            'The sample data from which statistics are computed is set in `x`',
-            'and `y` (where `x` and `y` represent marginal distributions,',
-            'binning is set in `xbins` and `ybins` in this case)',
-            'or `z` (where `z` represent the 2D distribution and binning set,',
-            'binning is set by `x` and `y` in this case).',
-            'The resulting distribution is visualized as a heatmap.'
-        ].join(' ')
-    }
-};
-
-
-/***/ }),
-
-/***/ 6236:
-/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
-
-
-
-var Registry = __webpack_require__(13936);
-var Lib = __webpack_require__(30991);
-
-module.exports = function handleSampleDefaults(traceIn, traceOut, coerce, layout) {
-    var x = coerce('x');
-    var y = coerce('y');
-    var xlen = Lib.minRowLength(x);
-    var ylen = Lib.minRowLength(y);
-
-    // we could try to accept x0 and dx, etc...
-    // but that's a pretty weird use case.
-    // for now require both x and y explicitly specified.
-    if(!xlen || !ylen) {
-        traceOut.visible = false;
-        return;
-    }
-
-    traceOut._length = Math.min(xlen, ylen);
-
-    var handleCalendarDefaults = Registry.getComponentMethod('calendars', 'handleTraceDefaults');
-    handleCalendarDefaults(traceIn, traceOut, ['x', 'y'], layout);
-
-    // if marker.color is an array, we can use it in aggregation instead of z
-    var hasAggregationData = coerce('z') || coerce('marker.color');
-
-    if(hasAggregationData) coerce('histfunc');
-    coerce('histnorm');
-
-    // Note: bin defaults are now handled in Histogram2D.crossTraceDefaults
-    // autobin(x|y) are only included here to appease Plotly.validate
-    coerce('autobinx');
-    coerce('autobiny');
-};
-
-
-/***/ }),
-
-/***/ 34872:
-/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
-
-
-
-var histogram2dAttrs = __webpack_require__(42124);
-var contourAttrs = __webpack_require__(70318);
-var colorScaleAttrs = __webpack_require__(17957);
-var axisHoverFormat = (__webpack_require__(71018).axisHoverFormat);
-
-var extendFlat = (__webpack_require__(91307).extendFlat);
-
-module.exports = extendFlat({
-    x: histogram2dAttrs.x,
-    y: histogram2dAttrs.y,
-    z: histogram2dAttrs.z,
-    marker: histogram2dAttrs.marker,
-
-    histnorm: histogram2dAttrs.histnorm,
-    histfunc: histogram2dAttrs.histfunc,
-    nbinsx: histogram2dAttrs.nbinsx,
-    xbins: histogram2dAttrs.xbins,
-    nbinsy: histogram2dAttrs.nbinsy,
-    ybins: histogram2dAttrs.ybins,
-    autobinx: histogram2dAttrs.autobinx,
-    autobiny: histogram2dAttrs.autobiny,
-
-    bingroup: histogram2dAttrs.bingroup,
-    xbingroup: histogram2dAttrs.xbingroup,
-    ybingroup: histogram2dAttrs.ybingroup,
-
-    autocontour: contourAttrs.autocontour,
-    ncontours: contourAttrs.ncontours,
-    contours: contourAttrs.contours,
-    line: {
-        color: contourAttrs.line.color,
-        width: extendFlat({}, contourAttrs.line.width, {
-            dflt: 0.5,
-            description: 'Sets the contour line width in (in px)'
-        }),
-        dash: contourAttrs.line.dash,
-        smoothing: contourAttrs.line.smoothing,
-        editType: 'plot'
-    },
-    xhoverformat: axisHoverFormat('x'),
-    yhoverformat: axisHoverFormat('y'),
-    zhoverformat: axisHoverFormat('z', 1),
-    hovertemplate: histogram2dAttrs.hovertemplate,
-    texttemplate: contourAttrs.texttemplate,
-    textfont: contourAttrs.textfont
-},
-    colorScaleAttrs('', {
-        cLetter: 'z',
-        editTypeOverride: 'calc'
-    })
-);
-
-
-/***/ }),
-
-/***/ 14319:
-/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
-
-
-
-var Lib = __webpack_require__(30991);
-
-var handleSampleDefaults = __webpack_require__(6236);
-var handleContoursDefaults = __webpack_require__(657);
-var handleStyleDefaults = __webpack_require__(74619);
-var handleHeatmapLabelDefaults = __webpack_require__(52340);
-var attributes = __webpack_require__(34872);
-
-
-module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout) {
-    function coerce(attr, dflt) {
-        return Lib.coerce(traceIn, traceOut, attributes, attr, dflt);
-    }
-
-    function coerce2(attr) {
-        return Lib.coerce2(traceIn, traceOut, attributes, attr);
-    }
-
-    handleSampleDefaults(traceIn, traceOut, coerce, layout);
-    if(traceOut.visible === false) return;
-
-    handleContoursDefaults(traceIn, traceOut, coerce, coerce2);
-    handleStyleDefaults(traceIn, traceOut, coerce, layout);
-    coerce('xhoverformat');
-    coerce('yhoverformat');
-    coerce('hovertemplate');
-    if(
-        traceOut.contours &&
-        traceOut.contours.coloring === 'heatmap'
-    ) {
-        handleHeatmapLabelDefaults(coerce, layout);
-    }
-};
-
-
-/***/ }),
-
-/***/ 60613:
-/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
-
-
-
-module.exports = {
-    attributes: __webpack_require__(34872),
-    supplyDefaults: __webpack_require__(14319),
-    crossTraceDefaults: __webpack_require__(34294),
-    calc: __webpack_require__(3274),
-    plot: (__webpack_require__(32664).plot),
-    layerName: 'contourlayer',
-    style: __webpack_require__(72690),
-    colorbar: __webpack_require__(70307),
-    hoverPoints: __webpack_require__(52353),
-
-    moduleType: 'trace',
-    name: 'histogram2dcontour',
-    basePlotModule: __webpack_require__(47885),
-    categories: ['cartesian', 'svg', '2dMap', 'contour', 'histogram', 'showLegend'],
-    meta: {
-        hrName: 'histogram_2d_contour',
-        description: [
-            'The sample data from which statistics are computed is set in `x`',
-            'and `y` (where `x` and `y` represent marginal distributions,',
-            'binning is set in `xbins` and `ybins` in this case)',
-            'or `z` (where `z` represent the 2D distribution and binning set,',
-            'binning is set by `x` and `y` in this case).',
-            'The resulting distribution is visualized as a contour plot.'
-        ].join(' ')
-    }
-};
-
-
 /***/ }),
 
 /***/ 71250:
@@ -250909,6 +250317,595 @@ module.exports = {
 };
 
 
+/***/ }),
+
+/***/ 42124:
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+
+
+var histogramAttrs = __webpack_require__(71250);
+var makeBinAttrs = __webpack_require__(9284);
+var heatmapAttrs = __webpack_require__(68300);
+var baseAttrs = __webpack_require__(35667);
+var axisHoverFormat = (__webpack_require__(71018).axisHoverFormat);
+var hovertemplateAttrs = (__webpack_require__(92710)/* .hovertemplateAttrs */ .rb);
+var texttemplateAttrs = (__webpack_require__(92710)/* .texttemplateAttrs */ .ay);
+var colorScaleAttrs = __webpack_require__(17957);
+
+var extendFlat = (__webpack_require__(91307).extendFlat);
+
+module.exports = extendFlat(
+    {
+        x: histogramAttrs.x,
+        y: histogramAttrs.y,
+
+        z: {
+            valType: 'data_array',
+            editType: 'calc',
+            description: 'Sets the aggregation data.'
+        },
+        marker: {
+            color: {
+                valType: 'data_array',
+                editType: 'calc',
+                description: 'Sets the aggregation data.'
+            },
+            editType: 'calc'
+        },
+
+        histnorm: histogramAttrs.histnorm,
+        histfunc: histogramAttrs.histfunc,
+        nbinsx: histogramAttrs.nbinsx,
+        xbins: makeBinAttrs('x'),
+        nbinsy: histogramAttrs.nbinsy,
+        ybins: makeBinAttrs('y'),
+        autobinx: histogramAttrs.autobinx,
+        autobiny: histogramAttrs.autobiny,
+
+        bingroup: extendFlat({}, histogramAttrs.bingroup, {
+            description: [
+                'Set the `xbingroup` and `ybingroup` default prefix',
+                'For example, setting a `bingroup` of *1* on two histogram2d traces',
+                'will make them their x-bins and y-bins match separately.'
+            ].join(' ')
+        }),
+        xbingroup: extendFlat({}, histogramAttrs.bingroup, {
+            description: [
+                'Set a group of histogram traces which will have compatible x-bin settings.',
+                'Using `xbingroup`, histogram2d and histogram2dcontour traces ',
+                '(on axes of the same axis type) can have compatible x-bin settings.',
+                'Note that the same `xbingroup` value can be used to set (1D) histogram `bingroup`'
+            ].join(' ')
+        }),
+        ybingroup: extendFlat({}, histogramAttrs.bingroup, {
+            description: [
+                'Set a group of histogram traces which will have compatible y-bin settings.',
+                'Using `ybingroup`, histogram2d and histogram2dcontour traces ',
+                '(on axes of the same axis type) can have compatible y-bin settings.',
+                'Note that the same `ybingroup` value can be used to set (1D) histogram `bingroup`'
+            ].join(' ')
+        }),
+
+        xgap: heatmapAttrs.xgap,
+        ygap: heatmapAttrs.ygap,
+        zsmooth: heatmapAttrs.zsmooth,
+        xhoverformat: axisHoverFormat('x'),
+        yhoverformat: axisHoverFormat('y'),
+        zhoverformat: axisHoverFormat('z', 1),
+        hovertemplate: hovertemplateAttrs({}, {keys: 'z'}),
+        texttemplate: texttemplateAttrs({
+            arrayOk: false,
+            editType: 'plot'
+        }, {
+            keys: 'z'
+        }),
+        textfont: heatmapAttrs.textfont,
+        showlegend: extendFlat({}, baseAttrs.showlegend, {dflt: false})
+    },
+    colorScaleAttrs('', {cLetter: 'z', autoColorDflt: false})
+);
+
+
+/***/ }),
+
+/***/ 32492:
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+
+
+var Lib = __webpack_require__(30991);
+var Axes = __webpack_require__(15076);
+
+var binFunctions = __webpack_require__(47260);
+var normFunctions = __webpack_require__(855);
+var doAvg = __webpack_require__(26756);
+var getBinSpanLabelRound = __webpack_require__(41574);
+var calcAllAutoBins = (__webpack_require__(50414).calcAllAutoBins);
+
+module.exports = function calc(gd, trace) {
+    var xa = Axes.getFromId(gd, trace.xaxis);
+    var ya = Axes.getFromId(gd, trace.yaxis);
+
+    var xcalendar = trace.xcalendar;
+    var ycalendar = trace.ycalendar;
+    var xr2c = function(v) { return xa.r2c(v, 0, xcalendar); };
+    var yr2c = function(v) { return ya.r2c(v, 0, ycalendar); };
+    var xc2r = function(v) { return xa.c2r(v, 0, xcalendar); };
+    var yc2r = function(v) { return ya.c2r(v, 0, ycalendar); };
+
+    var i, j, n, m;
+
+    // calculate the bins
+    var xBinsAndPos = calcAllAutoBins(gd, trace, xa, 'x');
+    var xBinSpec = xBinsAndPos[0];
+    var xPos0 = xBinsAndPos[1];
+    var yBinsAndPos = calcAllAutoBins(gd, trace, ya, 'y');
+    var yBinSpec = yBinsAndPos[0];
+    var yPos0 = yBinsAndPos[1];
+
+    var serieslen = trace._length;
+    if(xPos0.length > serieslen) xPos0.splice(serieslen, xPos0.length - serieslen);
+    if(yPos0.length > serieslen) yPos0.splice(serieslen, yPos0.length - serieslen);
+
+    // make the empty bin array & scale the map
+    var z = [];
+    var onecol = [];
+    var zerocol = [];
+    var nonuniformBinsX = typeof xBinSpec.size === 'string';
+    var nonuniformBinsY = typeof yBinSpec.size === 'string';
+    var xEdges = [];
+    var yEdges = [];
+    var xbins = nonuniformBinsX ? xEdges : xBinSpec;
+    var ybins = nonuniformBinsY ? yEdges : yBinSpec;
+    var total = 0;
+    var counts = [];
+    var inputPoints = [];
+    var norm = trace.histnorm;
+    var func = trace.histfunc;
+    var densitynorm = norm.indexOf('density') !== -1;
+    var extremefunc = func === 'max' || func === 'min';
+    var sizeinit = extremefunc ? null : 0;
+    var binfunc = binFunctions.count;
+    var normfunc = normFunctions[norm];
+    var doavg = false;
+    var xinc = [];
+    var yinc = [];
+
+    // set a binning function other than count?
+    // for binning functions: check first for 'z',
+    // then 'mc' in case we had a colored scatter plot
+    // and want to transfer these colors to the 2D histo
+    // TODO: axe this, make it the responsibility of the app changing type? or an impliedEdit?
+    var rawCounterData = ('z' in trace) ?
+        trace.z :
+        (('marker' in trace && Array.isArray(trace.marker.color)) ?
+            trace.marker.color : '');
+    if(rawCounterData && func !== 'count') {
+        doavg = func === 'avg';
+        binfunc = binFunctions[func];
+    }
+
+    // decrease end a little in case of rounding errors
+    var xBinSize = xBinSpec.size;
+    var xBinStart = xr2c(xBinSpec.start);
+    var xBinEnd = xr2c(xBinSpec.end) +
+        (xBinStart - Axes.tickIncrement(xBinStart, xBinSize, false, xcalendar)) / 1e6;
+
+    for(i = xBinStart; i < xBinEnd; i = Axes.tickIncrement(i, xBinSize, false, xcalendar)) {
+        onecol.push(sizeinit);
+        xEdges.push(i);
+        if(doavg) zerocol.push(0);
+    }
+    xEdges.push(i);
+
+    var nx = onecol.length;
+    var dx = (i - xBinStart) / nx;
+    var x0 = xc2r(xBinStart + dx / 2);
+
+    var yBinSize = yBinSpec.size;
+    var yBinStart = yr2c(yBinSpec.start);
+    var yBinEnd = yr2c(yBinSpec.end) +
+        (yBinStart - Axes.tickIncrement(yBinStart, yBinSize, false, ycalendar)) / 1e6;
+
+    for(i = yBinStart; i < yBinEnd; i = Axes.tickIncrement(i, yBinSize, false, ycalendar)) {
+        z.push(onecol.slice());
+        yEdges.push(i);
+        var ipCol = new Array(nx);
+        for(j = 0; j < nx; j++) ipCol[j] = [];
+        inputPoints.push(ipCol);
+        if(doavg) counts.push(zerocol.slice());
+    }
+    yEdges.push(i);
+
+    var ny = z.length;
+    var dy = (i - yBinStart) / ny;
+    var y0 = yc2r(yBinStart + dy / 2);
+
+    if(densitynorm) {
+        xinc = makeIncrements(onecol.length, xbins, dx, nonuniformBinsX);
+        yinc = makeIncrements(z.length, ybins, dy, nonuniformBinsY);
+    }
+
+    // for date axes we need bin bounds to be calcdata. For nonuniform bins
+    // we already have this, but uniform with start/end/size they're still strings.
+    if(!nonuniformBinsX && xa.type === 'date') xbins = binsToCalc(xr2c, xbins);
+    if(!nonuniformBinsY && ya.type === 'date') ybins = binsToCalc(yr2c, ybins);
+
+    // put data into bins
+    var uniqueValsPerX = true;
+    var uniqueValsPerY = true;
+    var xVals = new Array(nx);
+    var yVals = new Array(ny);
+    var xGapLow = Infinity;
+    var xGapHigh = Infinity;
+    var yGapLow = Infinity;
+    var yGapHigh = Infinity;
+    for(i = 0; i < serieslen; i++) {
+        var xi = xPos0[i];
+        var yi = yPos0[i];
+        n = Lib.findBin(xi, xbins);
+        m = Lib.findBin(yi, ybins);
+        if(n >= 0 && n < nx && m >= 0 && m < ny) {
+            total += binfunc(n, i, z[m], rawCounterData, counts[m]);
+            inputPoints[m][n].push(i);
+
+            if(uniqueValsPerX) {
+                if(xVals[n] === undefined) xVals[n] = xi;
+                else if(xVals[n] !== xi) uniqueValsPerX = false;
+            }
+            if(uniqueValsPerY) {
+                if(yVals[m] === undefined) yVals[m] = yi;
+                else if(yVals[m] !== yi) uniqueValsPerY = false;
+            }
+
+            xGapLow = Math.min(xGapLow, xi - xEdges[n]);
+            xGapHigh = Math.min(xGapHigh, xEdges[n + 1] - xi);
+            yGapLow = Math.min(yGapLow, yi - yEdges[m]);
+            yGapHigh = Math.min(yGapHigh, yEdges[m + 1] - yi);
+        }
+    }
+    // normalize, if needed
+    if(doavg) {
+        for(m = 0; m < ny; m++) total += doAvg(z[m], counts[m]);
+    }
+    if(normfunc) {
+        for(m = 0; m < ny; m++) normfunc(z[m], total, xinc, yinc[m]);
+    }
+
+    return {
+        x: xPos0,
+        xRanges: getRanges(xEdges, uniqueValsPerX && xVals, xGapLow, xGapHigh, xa, xcalendar),
+        x0: x0,
+        dx: dx,
+        y: yPos0,
+        yRanges: getRanges(yEdges, uniqueValsPerY && yVals, yGapLow, yGapHigh, ya, ycalendar),
+        y0: y0,
+        dy: dy,
+        z: z,
+        pts: inputPoints
+    };
+};
+
+function makeIncrements(len, bins, dv, nonuniform) {
+    var out = new Array(len);
+    var i;
+    if(nonuniform) {
+        for(i = 0; i < len; i++) out[i] = 1 / (bins[i + 1] - bins[i]);
+    } else {
+        var inc = 1 / dv;
+        for(i = 0; i < len; i++) out[i] = inc;
+    }
+    return out;
+}
+
+function binsToCalc(r2c, bins) {
+    return {
+        start: r2c(bins.start),
+        end: r2c(bins.end),
+        size: bins.size
+    };
+}
+
+function getRanges(edges, uniqueVals, gapLow, gapHigh, ax, calendar) {
+    var i;
+    var len = edges.length - 1;
+    var out = new Array(len);
+    var roundFn = getBinSpanLabelRound(gapLow, gapHigh, edges, ax, calendar);
+
+    for(i = 0; i < len; i++) {
+        var v = (uniqueVals || [])[i];
+        out[i] = v === undefined ?
+            [roundFn(edges[i]), roundFn(edges[i + 1], true)] :
+            [v, v];
+    }
+    return out;
+}
+
+
+/***/ }),
+
+/***/ 15611:
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+
+
+var Lib = __webpack_require__(30991);
+
+var handleSampleDefaults = __webpack_require__(6236);
+var handleStyleDefaults = __webpack_require__(25157);
+var colorscaleDefaults = __webpack_require__(13682);
+var handleHeatmapLabelDefaults = __webpack_require__(52340);
+var attributes = __webpack_require__(42124);
+
+
+module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout) {
+    function coerce(attr, dflt) {
+        return Lib.coerce(traceIn, traceOut, attributes, attr, dflt);
+    }
+
+    handleSampleDefaults(traceIn, traceOut, coerce, layout);
+    if(traceOut.visible === false) return;
+
+    handleStyleDefaults(traceIn, traceOut, coerce, layout);
+    colorscaleDefaults(traceIn, traceOut, layout, coerce, {prefix: '', cLetter: 'z'});
+    coerce('hovertemplate');
+
+    handleHeatmapLabelDefaults(coerce, layout);
+
+    coerce('xhoverformat');
+    coerce('yhoverformat');
+};
+
+
+/***/ }),
+
+/***/ 94587:
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+
+
+var heatmapHover = __webpack_require__(85243);
+var hoverLabelText = (__webpack_require__(15076).hoverLabelText);
+
+module.exports = function hoverPoints(pointData, xval, yval, hovermode, opts) {
+    var pts = heatmapHover(pointData, xval, yval, hovermode, opts);
+
+    if(!pts) return;
+
+    pointData = pts[0];
+    var indices = pointData.index;
+    var ny = indices[0];
+    var nx = indices[1];
+    var cd0 = pointData.cd[0];
+    var trace = cd0.trace;
+    var xRange = cd0.xRanges[nx];
+    var yRange = cd0.yRanges[ny];
+
+    pointData.xLabel = hoverLabelText(pointData.xa, [xRange[0], xRange[1]], trace.xhoverformat);
+    pointData.yLabel = hoverLabelText(pointData.ya, [yRange[0], yRange[1]], trace.yhoverformat);
+
+    return pts;
+};
+
+
+/***/ }),
+
+/***/ 3617:
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+
+
+module.exports = {
+    attributes: __webpack_require__(42124),
+    supplyDefaults: __webpack_require__(15611),
+    crossTraceDefaults: __webpack_require__(34294),
+    calc: __webpack_require__(91980),
+    plot: __webpack_require__(29406),
+    layerName: 'heatmaplayer',
+    colorbar: __webpack_require__(90165),
+    style: __webpack_require__(58756),
+    hoverPoints: __webpack_require__(94587),
+    eventData: __webpack_require__(63870),
+
+    moduleType: 'trace',
+    name: 'histogram2d',
+    basePlotModule: __webpack_require__(47885),
+    categories: ['cartesian', 'svg', '2dMap', 'histogram', 'showLegend'],
+    meta: {
+        hrName: 'histogram_2d',
+        description: [
+            'The sample data from which statistics are computed is set in `x`',
+            'and `y` (where `x` and `y` represent marginal distributions,',
+            'binning is set in `xbins` and `ybins` in this case)',
+            'or `z` (where `z` represent the 2D distribution and binning set,',
+            'binning is set by `x` and `y` in this case).',
+            'The resulting distribution is visualized as a heatmap.'
+        ].join(' ')
+    }
+};
+
+
+/***/ }),
+
+/***/ 6236:
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+
+
+var Registry = __webpack_require__(13936);
+var Lib = __webpack_require__(30991);
+
+module.exports = function handleSampleDefaults(traceIn, traceOut, coerce, layout) {
+    var x = coerce('x');
+    var y = coerce('y');
+    var xlen = Lib.minRowLength(x);
+    var ylen = Lib.minRowLength(y);
+
+    // we could try to accept x0 and dx, etc...
+    // but that's a pretty weird use case.
+    // for now require both x and y explicitly specified.
+    if(!xlen || !ylen) {
+        traceOut.visible = false;
+        return;
+    }
+
+    traceOut._length = Math.min(xlen, ylen);
+
+    var handleCalendarDefaults = Registry.getComponentMethod('calendars', 'handleTraceDefaults');
+    handleCalendarDefaults(traceIn, traceOut, ['x', 'y'], layout);
+
+    // if marker.color is an array, we can use it in aggregation instead of z
+    var hasAggregationData = coerce('z') || coerce('marker.color');
+
+    if(hasAggregationData) coerce('histfunc');
+    coerce('histnorm');
+
+    // Note: bin defaults are now handled in Histogram2D.crossTraceDefaults
+    // autobin(x|y) are only included here to appease Plotly.validate
+    coerce('autobinx');
+    coerce('autobiny');
+};
+
+
+/***/ }),
+
+/***/ 34872:
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+
+
+var histogram2dAttrs = __webpack_require__(42124);
+var contourAttrs = __webpack_require__(70318);
+var colorScaleAttrs = __webpack_require__(17957);
+var axisHoverFormat = (__webpack_require__(71018).axisHoverFormat);
+
+var extendFlat = (__webpack_require__(91307).extendFlat);
+
+module.exports = extendFlat({
+    x: histogram2dAttrs.x,
+    y: histogram2dAttrs.y,
+    z: histogram2dAttrs.z,
+    marker: histogram2dAttrs.marker,
+
+    histnorm: histogram2dAttrs.histnorm,
+    histfunc: histogram2dAttrs.histfunc,
+    nbinsx: histogram2dAttrs.nbinsx,
+    xbins: histogram2dAttrs.xbins,
+    nbinsy: histogram2dAttrs.nbinsy,
+    ybins: histogram2dAttrs.ybins,
+    autobinx: histogram2dAttrs.autobinx,
+    autobiny: histogram2dAttrs.autobiny,
+
+    bingroup: histogram2dAttrs.bingroup,
+    xbingroup: histogram2dAttrs.xbingroup,
+    ybingroup: histogram2dAttrs.ybingroup,
+
+    autocontour: contourAttrs.autocontour,
+    ncontours: contourAttrs.ncontours,
+    contours: contourAttrs.contours,
+    line: {
+        color: contourAttrs.line.color,
+        width: extendFlat({}, contourAttrs.line.width, {
+            dflt: 0.5,
+            description: 'Sets the contour line width in (in px)'
+        }),
+        dash: contourAttrs.line.dash,
+        smoothing: contourAttrs.line.smoothing,
+        editType: 'plot'
+    },
+    xhoverformat: axisHoverFormat('x'),
+    yhoverformat: axisHoverFormat('y'),
+    zhoverformat: axisHoverFormat('z', 1),
+    hovertemplate: histogram2dAttrs.hovertemplate,
+    texttemplate: contourAttrs.texttemplate,
+    textfont: contourAttrs.textfont
+},
+    colorScaleAttrs('', {
+        cLetter: 'z',
+        editTypeOverride: 'calc'
+    })
+);
+
+
+/***/ }),
+
+/***/ 14319:
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+
+
+var Lib = __webpack_require__(30991);
+
+var handleSampleDefaults = __webpack_require__(6236);
+var handleContoursDefaults = __webpack_require__(657);
+var handleStyleDefaults = __webpack_require__(74619);
+var handleHeatmapLabelDefaults = __webpack_require__(52340);
+var attributes = __webpack_require__(34872);
+
+
+module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout) {
+    function coerce(attr, dflt) {
+        return Lib.coerce(traceIn, traceOut, attributes, attr, dflt);
+    }
+
+    function coerce2(attr) {
+        return Lib.coerce2(traceIn, traceOut, attributes, attr);
+    }
+
+    handleSampleDefaults(traceIn, traceOut, coerce, layout);
+    if(traceOut.visible === false) return;
+
+    handleContoursDefaults(traceIn, traceOut, coerce, coerce2);
+    handleStyleDefaults(traceIn, traceOut, coerce, layout);
+    coerce('xhoverformat');
+    coerce('yhoverformat');
+    coerce('hovertemplate');
+    if(
+        traceOut.contours &&
+        traceOut.contours.coloring === 'heatmap'
+    ) {
+        handleHeatmapLabelDefaults(coerce, layout);
+    }
+};
+
+
+/***/ }),
+
+/***/ 60613:
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+
+
+module.exports = {
+    attributes: __webpack_require__(34872),
+    supplyDefaults: __webpack_require__(14319),
+    crossTraceDefaults: __webpack_require__(34294),
+    calc: __webpack_require__(3274),
+    plot: (__webpack_require__(32664).plot),
+    layerName: 'contourlayer',
+    style: __webpack_require__(72690),
+    colorbar: __webpack_require__(70307),
+    hoverPoints: __webpack_require__(52353),
+
+    moduleType: 'trace',
+    name: 'histogram2dcontour',
+    basePlotModule: __webpack_require__(47885),
+    categories: ['cartesian', 'svg', '2dMap', 'contour', 'histogram', 'showLegend'],
+    meta: {
+        hrName: 'histogram_2d_contour',
+        description: [
+            'The sample data from which statistics are computed is set in `x`',
+            'and `y` (where `x` and `y` represent marginal distributions,',
+            'binning is set in `xbins` and `ybins` in this case)',
+            'or `z` (where `z` represent the 2D distribution and binning set,',
+            'binning is set by `x` and `y` in this case).',
+            'The resulting distribution is visualized as a contour plot.'
+        ].join(' ')
+    }
+};
+
+
 /***/ }),
 
 /***/ 48223:
@@ -267098,993 +267095,6 @@ module.exports = function selectPoints(searchInfo, selectionTester) {
 };
 
 
-/***/ }),
-
-/***/ 1015:
-/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
-
-
-
-var scatterAttrs = __webpack_require__(86854);
-var fontAttrs = __webpack_require__(70827);
-var colorAttributes = __webpack_require__(17957);
-var axisHoverFormat = (__webpack_require__(71018).axisHoverFormat);
-var hovertemplateAttrs = (__webpack_require__(92710)/* .hovertemplateAttrs */ .rb);
-var texttemplateAttrs = (__webpack_require__(92710)/* .texttemplateAttrs */ .ay);
-var baseAttrs = __webpack_require__(35667);
-var DASHES = __webpack_require__(68828);
-
-var MARKER_SYMBOLS = __webpack_require__(98993);
-var extendFlat = (__webpack_require__(91307).extendFlat);
-var overrideAll = (__webpack_require__(70756).overrideAll);
-var sortObjectKeys = __webpack_require__(99124);
-
-var scatterLineAttrs = scatterAttrs.line;
-var scatterMarkerAttrs = scatterAttrs.marker;
-var scatterMarkerLineAttrs = scatterMarkerAttrs.line;
-
-var lineAttrs = extendFlat({
-    width: scatterLineAttrs.width,
-    dash: {
-        valType: 'enumerated',
-        values: sortObjectKeys(DASHES),
-        dflt: 'solid',
-        description: 'Sets the dash style of the lines.'
-    }
-}, colorAttributes('line'));
-
-function makeProjectionAttr(axLetter) {
-    return {
-        show: {
-            valType: 'boolean',
-            dflt: false,
-            description: [
-                'Sets whether or not projections are shown along the',
-                axLetter, 'axis.'
-            ].join(' ')
-        },
-        opacity: {
-            valType: 'number',
-            min: 0,
-            max: 1,
-            dflt: 1,
-            description: 'Sets the projection color.'
-        },
-        scale: {
-            valType: 'number',
-            min: 0,
-            max: 10,
-            dflt: 2 / 3,
-            description: [
-                'Sets the scale factor determining the size of the',
-                'projection marker points.'
-            ].join(' ')
-        }
-    };
-}
-
-var attrs = module.exports = overrideAll({
-    x: scatterAttrs.x,
-    y: scatterAttrs.y,
-    z: {
-        valType: 'data_array',
-        description: 'Sets the z coordinates.'
-    },
-
-    text: extendFlat({}, scatterAttrs.text, {
-        description: [
-            'Sets text elements associated with each (x,y,z) triplet.',
-            'If a single string, the same string appears over',
-            'all the data points.',
-            'If an array of string, the items are mapped in order to the',
-            'this trace\'s (x,y,z) coordinates.',
-            'If trace `hoverinfo` contains a *text* flag and *hovertext* is not set,',
-            'these elements will be seen in the hover labels.'
-        ].join(' ')
-    }),
-    texttemplate: texttemplateAttrs({}, {
-
-    }),
-    hovertext: extendFlat({}, scatterAttrs.hovertext, {
-        description: [
-            'Sets text elements associated with each (x,y,z) triplet.',
-            'If a single string, the same string appears over',
-            'all the data points.',
-            'If an array of string, the items are mapped in order to the',
-            'this trace\'s (x,y,z) coordinates.',
-            'To be seen, trace `hoverinfo` must contain a *text* flag.'
-        ].join(' ')
-    }),
-    hovertemplate: hovertemplateAttrs(),
-
-    xhoverformat: axisHoverFormat('x'),
-    yhoverformat: axisHoverFormat('y'),
-    zhoverformat: axisHoverFormat('z'),
-
-    mode: extendFlat({}, scatterAttrs.mode,  // shouldn't this be on-par with 2D?
-        {dflt: 'lines+markers'}),
-    surfaceaxis: {
-        valType: 'enumerated',
-        values: [-1, 0, 1, 2],
-        dflt: -1,
-        description: [
-            'If *-1*, the scatter points are not fill with a surface',
-            'If *0*, *1*, *2*, the scatter points are filled with',
-            'a Delaunay surface about the x, y, z respectively.'
-        ].join(' ')
-    },
-    surfacecolor: {
-        valType: 'color',
-        description: 'Sets the surface fill color.'
-    },
-    projection: {
-        x: makeProjectionAttr('x'),
-        y: makeProjectionAttr('y'),
-        z: makeProjectionAttr('z')
-    },
-
-    connectgaps: scatterAttrs.connectgaps,
-    line: lineAttrs,
-
-    marker: extendFlat({  // Parity with scatter.js?
-        symbol: {
-            valType: 'enumerated',
-            values: sortObjectKeys(MARKER_SYMBOLS),
-            dflt: 'circle',
-            arrayOk: true,
-            description: 'Sets the marker symbol type.'
-        },
-        size: extendFlat({}, scatterMarkerAttrs.size, {dflt: 8}),
-        sizeref: scatterMarkerAttrs.sizeref,
-        sizemin: scatterMarkerAttrs.sizemin,
-        sizemode: scatterMarkerAttrs.sizemode,
-        opacity: extendFlat({}, scatterMarkerAttrs.opacity, {
-            arrayOk: false,
-            description: [
-                'Sets the marker opacity.',
-                'Note that the marker opacity for scatter3d traces',
-                'must be a scalar value for performance reasons.',
-                'To set a blending opacity value',
-                '(i.e. which is not transparent), set *marker.color*',
-                'to an rgba color and use its alpha channel.'
-            ].join(' ')
-        }),
-        colorbar: scatterMarkerAttrs.colorbar,
-
-        line: extendFlat({
-            width: extendFlat({}, scatterMarkerLineAttrs.width, {arrayOk: false})
-        },
-            colorAttributes('marker.line')
-        )
-    },
-        colorAttributes('marker')
-    ),
-
-    textposition: extendFlat({}, scatterAttrs.textposition, {dflt: 'top center'}),
-    textfont: fontAttrs({
-        noFontShadow: true,
-        noFontLineposition: true,
-        noFontTextcase: true,
-        editType: 'calc',
-        colorEditType: 'style',
-        arrayOk: true,
-        variantValues: ['normal', 'small-caps'],
-        description: 'Sets the text font.'
-    }),
-
-    opacity: baseAttrs.opacity,
-
-    hoverinfo: extendFlat({}, baseAttrs.hoverinfo)
-}, 'calc', 'nested');
-
-attrs.x.editType = attrs.y.editType = attrs.z.editType = 'calc+clearAxisTypes';
-
-
-/***/ }),
-
-/***/ 30935:
-/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
-
-
-
-var arraysToCalcdata = __webpack_require__(47213);
-var calcColorscale = __webpack_require__(59498);
-
-/**
- * This is a kludge to put the array attributes into
- * calcdata the way Scatter.plot does, so that legends and
- * popovers know what to do with them.
- */
-module.exports = function calc(gd, trace) {
-    var cd = [{x: false, y: false, trace: trace, t: {}}];
-
-    arraysToCalcdata(cd, trace);
-    calcColorscale(gd, trace);
-
-    return cd;
-};
-
-
-/***/ }),
-
-/***/ 77681:
-/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
-
-
-
-var Registry = __webpack_require__(13936);
-
-function calculateAxisErrors(data, params, scaleFactor, axis) {
-    if(!params || !params.visible) return null;
-
-    var computeError = Registry.getComponentMethod('errorbars', 'makeComputeError')(params);
-    var result = new Array(data.length);
-
-    for(var i = 0; i < data.length; i++) {
-        var errors = computeError(+data[i], i);
-
-        if(axis.type === 'log') {
-            var point = axis.c2l(data[i]);
-            var min = data[i] - errors[0];
-            var max = data[i] + errors[1];
-
-            result[i] = [
-                (axis.c2l(min, true) - point) * scaleFactor,
-                (axis.c2l(max, true) - point) * scaleFactor
-            ];
-
-            // Keep track of the lower error bound which isn't negative!
-            if(min > 0) {
-                var lower = axis.c2l(min);
-                if(!axis._lowerLogErrorBound) axis._lowerLogErrorBound = lower;
-                axis._lowerErrorBound = Math.min(axis._lowerLogErrorBound, lower);
-            }
-        } else {
-            result[i] = [
-                -errors[0] * scaleFactor,
-                errors[1] * scaleFactor
-            ];
-        }
-    }
-
-    return result;
-}
-
-function dataLength(array) {
-    for(var i = 0; i < array.length; i++) {
-        if(array[i]) return array[i].length;
-    }
-    return 0;
-}
-
-function calculateErrors(data, scaleFactor, sceneLayout) {
-    var errors = [
-        calculateAxisErrors(data.x, data.error_x, scaleFactor[0], sceneLayout.xaxis),
-        calculateAxisErrors(data.y, data.error_y, scaleFactor[1], sceneLayout.yaxis),
-        calculateAxisErrors(data.z, data.error_z, scaleFactor[2], sceneLayout.zaxis)
-    ];
-
-    var n = dataLength(errors);
-    if(n === 0) return null;
-
-    var errorBounds = new Array(n);
-
-    for(var i = 0; i < n; i++) {
-        var bound = [[0, 0, 0], [0, 0, 0]];
-
-        for(var j = 0; j < 3; j++) {
-            if(errors[j]) {
-                for(var k = 0; k < 2; k++) {
-                    bound[k][j] = errors[j][i][k];
-                }
-            }
-        }
-
-        errorBounds[i] = bound;
-    }
-
-    return errorBounds;
-}
-
-module.exports = calculateErrors;
-
-
-/***/ }),
-
-/***/ 93219:
-/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
-
-
-
-var createLinePlot = (__webpack_require__(46000).gl_line3d);
-var createScatterPlot = (__webpack_require__(46000).gl_scatter3d);
-var createErrorBars = (__webpack_require__(46000).gl_error3d);
-var createMesh = (__webpack_require__(46000).gl_mesh3d);
-var triangulate = (__webpack_require__(46000).delaunay_triangulate);
-
-var Lib = __webpack_require__(30991);
-var str2RgbaArray = __webpack_require__(44960);
-var formatColor = (__webpack_require__(592).formatColor);
-var makeBubbleSizeFn = __webpack_require__(42581);
-var DASH_PATTERNS = __webpack_require__(68828);
-var MARKER_SYMBOLS = __webpack_require__(98993);
-
-var Axes = __webpack_require__(15076);
-var appendArrayPointValue = (__webpack_require__(2918).appendArrayPointValue);
-
-var calculateError = __webpack_require__(77681);
-
-function LineWithMarkers(scene, uid) {
-    this.scene = scene;
-    this.uid = uid;
-    this.linePlot = null;
-    this.scatterPlot = null;
-    this.errorBars = null;
-    this.textMarkers = null;
-    this.delaunayMesh = null;
-    this.color = null;
-    this.mode = '';
-    this.dataPoints = [];
-    this.axesBounds = [
-        [-Infinity, -Infinity, -Infinity],
-        [Infinity, Infinity, Infinity]
-    ];
-    this.textLabels = null;
-    this.data = null;
-}
-
-var proto = LineWithMarkers.prototype;
-
-proto.handlePick = function(selection) {
-    if(selection.object &&
-        (selection.object === this.linePlot ||
-         selection.object === this.delaunayMesh ||
-         selection.object === this.textMarkers ||
-         selection.object === this.scatterPlot)
-    ) {
-        var ind = selection.index = selection.data.index;
-
-        if(selection.object.highlight) {
-            selection.object.highlight(null);
-        }
-        if(this.scatterPlot) {
-            selection.object = this.scatterPlot;
-            this.scatterPlot.highlight(selection.data);
-        }
-
-        selection.textLabel = '';
-        if(this.textLabels) {
-            if(Lib.isArrayOrTypedArray(this.textLabels)) {
-                if(this.textLabels[ind] || this.textLabels[ind] === 0) {
-                    selection.textLabel = this.textLabels[ind];
-                }
-            } else {
-                selection.textLabel = this.textLabels;
-            }
-        }
-
-        selection.traceCoordinate = [
-            this.data.x[ind],
-            this.data.y[ind],
-            this.data.z[ind]
-        ];
-
-        return true;
-    }
-};
-
-function constructDelaunay(points, color, axis) {
-    var u = (axis + 1) % 3;
-    var v = (axis + 2) % 3;
-    var filteredPoints = [];
-    var filteredIds = [];
-    var i;
-
-    for(i = 0; i < points.length; ++i) {
-        var p = points[i];
-        if(isNaN(p[u]) || !isFinite(p[u]) ||
-           isNaN(p[v]) || !isFinite(p[v])) {
-            continue;
-        }
-        filteredPoints.push([p[u], p[v]]);
-        filteredIds.push(i);
-    }
-    var cells = triangulate(filteredPoints);
-    for(i = 0; i < cells.length; ++i) {
-        var c = cells[i];
-        for(var j = 0; j < c.length; ++j) {
-            c[j] = filteredIds[c[j]];
-        }
-    }
-    return {
-        positions: points,
-        cells: cells,
-        meshColor: color
-    };
-}
-
-function calculateErrorParams(errors) {
-    var capSize = [0.0, 0.0, 0.0];
-    var color = [[0, 0, 0], [0, 0, 0], [0, 0, 0]];
-    var lineWidth = [1.0, 1.0, 1.0];
-
-    for(var i = 0; i < 3; i++) {
-        var e = errors[i];
-
-        if(e && e.copy_zstyle !== false && errors[2].visible !== false) e = errors[2];
-        if(!e || !e.visible) continue;
-
-        capSize[i] = e.width / 2;  // ballpark rescaling
-        color[i] = str2RgbaArray(e.color);
-        lineWidth[i] = e.thickness;
-    }
-
-    return {capSize: capSize, color: color, lineWidth: lineWidth};
-}
-
-function parseAlignmentX(a) {
-    if(a === null || a === undefined) return 0;
-
-    return (a.indexOf('left') > -1) ? -1 :
-           (a.indexOf('right') > -1) ? 1 : 0;
-}
-
-function parseAlignmentY(a) {
-    if(a === null || a === undefined) return 0;
-
-    return (a.indexOf('top') > -1) ? -1 :
-           (a.indexOf('bottom') > -1) ? 1 : 0;
-}
-
-function calculateTextOffset(tp) {
-    // Read out text properties
-
-    var defaultAlignmentX = 0;
-    var defaultAlignmentY = 0;
-
-    var textOffset = [
-        defaultAlignmentX,
-        defaultAlignmentY
-    ];
-
-    if(Array.isArray(tp)) {
-        for(var i = 0; i < tp.length; i++) {
-            textOffset[i] = [
-                defaultAlignmentX,
-                defaultAlignmentY
-            ];
-            if(tp[i]) {
-                textOffset[i][0] = parseAlignmentX(tp[i]);
-                textOffset[i][1] = parseAlignmentY(tp[i]);
-            }
-        }
-    } else {
-        textOffset[0] = parseAlignmentX(tp);
-        textOffset[1] = parseAlignmentY(tp);
-    }
-
-    return textOffset;
-}
-
-
-function calculateSize(sizeIn, sizeFn) {
-    // rough parity with Plotly 2D markers
-    return sizeFn(sizeIn * 4);
-}
-
-function calculateSymbol(symbolIn) {
-    return MARKER_SYMBOLS[symbolIn];
-}
-
-function formatParam(paramIn, len, calculate, dflt, extraFn) {
-    var paramOut = null;
-
-    if(Lib.isArrayOrTypedArray(paramIn)) {
-        paramOut = [];
-
-        for(var i = 0; i < len; i++) {
-            if(paramIn[i] === undefined) paramOut[i] = dflt;
-            else paramOut[i] = calculate(paramIn[i], extraFn);
-        }
-    } else paramOut = calculate(paramIn, Lib.identity);
-
-    return paramOut;
-}
-
-
-function convertPlotlyOptions(scene, data) {
-    var points = [];
-    var sceneLayout = scene.fullSceneLayout;
-    var scaleFactor = scene.dataScale;
-    var xaxis = sceneLayout.xaxis;
-    var yaxis = sceneLayout.yaxis;
-    var zaxis = sceneLayout.zaxis;
-    var marker = data.marker;
-    var line = data.line;
-    var x = data.x || [];
-    var y = data.y || [];
-    var z = data.z || [];
-    var len = x.length;
-    var xcalendar = data.xcalendar;
-    var ycalendar = data.ycalendar;
-    var zcalendar = data.zcalendar;
-    var xc, yc, zc;
-    var params, i;
-    var text;
-
-    // Convert points
-    for(i = 0; i < len; i++) {
-        // sanitize numbers and apply transforms based on axes.type
-        xc = xaxis.d2l(x[i], 0, xcalendar) * scaleFactor[0];
-        yc = yaxis.d2l(y[i], 0, ycalendar) * scaleFactor[1];
-        zc = zaxis.d2l(z[i], 0, zcalendar) * scaleFactor[2];
-
-        points[i] = [xc, yc, zc];
-    }
-
-    // convert text
-    if(Array.isArray(data.text)) {
-        text = data.text;
-    } else if(Lib.isTypedArray(data.text)) {
-        text = Array.from(data.text);
-    } else if(data.text !== undefined) {
-        text = new Array(len);
-        for(i = 0; i < len; i++) text[i] = data.text;
-    }
-
-    function formatter(axName, val) {
-        var ax = sceneLayout[axName];
-        return Axes.tickText(ax, ax.d2l(val), true).text;
-    }
-
-    // check texttemplate
-    var texttemplate = data.texttemplate;
-    if(texttemplate) {
-        var fullLayout = scene.fullLayout;
-        var d3locale = fullLayout._d3locale;
-        var isArray = Array.isArray(texttemplate);
-        var N = isArray ? Math.min(texttemplate.length, len) : len;
-        var txt = isArray ?
-            function(i) { return texttemplate[i]; } :
-            function() { return texttemplate; };
-
-        text = new Array(N);
-
-        for(i = 0; i < N; i++) {
-            var d = {x: x[i], y: y[i], z: z[i]};
-            var labels = {
-                xLabel: formatter('xaxis', x[i]),
-                yLabel: formatter('yaxis', y[i]),
-                zLabel: formatter('zaxis', z[i])
-            };
-            var pointValues = {};
-            appendArrayPointValue(pointValues, data, i);
-            var meta = data._meta || {};
-            text[i] = Lib.texttemplateString(txt(i), labels, d3locale, pointValues, d, meta);
-        }
-    }
-
-    // Build object parameters
-    params = {
-        position: points,
-        mode: data.mode,
-        text: text
-    };
-
-    if('line' in data) {
-        params.lineColor = formatColor(line, 1, len);
-        params.lineWidth = line.width;
-        params.lineDashes = line.dash;
-    }
-
-    if('marker' in data) {
-        var sizeFn = makeBubbleSizeFn(data);
-
-        params.scatterColor = formatColor(marker, 1, len);
-        params.scatterSize = formatParam(marker.size, len, calculateSize, 20, sizeFn);
-        params.scatterMarker = formatParam(marker.symbol, len, calculateSymbol, '●');
-        params.scatterLineWidth = marker.line.width;  // arrayOk === false
-        params.scatterLineColor = formatColor(marker.line, 1, len);
-        params.scatterAngle = 0;
-    }
-
-    if('textposition' in data) {
-        params.textOffset = calculateTextOffset(data.textposition);
-        params.textColor = formatColor(data.textfont, 1, len);
-        params.textSize = formatParam(data.textfont.size, len, Lib.identity, 12);
-        params.textFontFamily = data.textfont.family;
-        params.textFontWeight = data.textfont.weight;
-        params.textFontStyle = data.textfont.style;
-        params.textFontVariant = data.textfont.variant;
-        params.textAngle = 0;
-    }
-
-    var dims = ['x', 'y', 'z'];
-    params.project = [false, false, false];
-    params.projectScale = [1, 1, 1];
-    params.projectOpacity = [1, 1, 1];
-    for(i = 0; i < 3; ++i) {
-        var projection = data.projection[dims[i]];
-        if((params.project[i] = projection.show)) {
-            params.projectOpacity[i] = projection.opacity;
-            params.projectScale[i] = projection.scale;
-        }
-    }
-
-    params.errorBounds = calculateError(data, scaleFactor, sceneLayout);
-
-    var errorParams = calculateErrorParams([data.error_x, data.error_y, data.error_z]);
-    params.errorColor = errorParams.color;
-    params.errorLineWidth = errorParams.lineWidth;
-    params.errorCapSize = errorParams.capSize;
-
-    params.delaunayAxis = data.surfaceaxis;
-    params.delaunayColor = str2RgbaArray(data.surfacecolor);
-
-    return params;
-}
-
-function _arrayToColor(color) {
-    if(Lib.isArrayOrTypedArray(color)) {
-        var c = color[0];
-
-        if(Lib.isArrayOrTypedArray(c)) color = c;
-
-        return 'rgb(' + color.slice(0, 3).map(function(x) {
-            return Math.round(x * 255);
-        }) + ')';
-    }
-
-    return null;
-}
-
-function arrayToColor(colors) {
-    if(!Lib.isArrayOrTypedArray(colors)) {
-        return null;
-    }
-
-    if((colors.length === 4) && (typeof colors[0] === 'number')) {
-        return _arrayToColor(colors);
-    }
-
-    return colors.map(_arrayToColor);
-}
-
-proto.update = function(data) {
-    var gl = this.scene.glplot.gl;
-    var lineOptions;
-    var scatterOptions;
-    var errorOptions;
-    var textOptions;
-    var dashPattern = DASH_PATTERNS.solid;
-
-    // Save data
-    this.data = data;
-
-    // Run data conversion
-    var options = convertPlotlyOptions(this.scene, data);
-
-    if('mode' in options) {
-        this.mode = options.mode;
-    }
-    if('lineDashes' in options) {
-        if(options.lineDashes in DASH_PATTERNS) {
-            dashPattern = DASH_PATTERNS[options.lineDashes];
-        }
-    }
-
-    this.color = arrayToColor(options.scatterColor) ||
-                 arrayToColor(options.lineColor);
-
-    // Save data points
-    this.dataPoints = options.position;
-
-    lineOptions = {
-        gl: this.scene.glplot.gl,
-        position: options.position,
-        color: options.lineColor,
-        lineWidth: options.lineWidth || 1,
-        dashes: dashPattern[0],
-        dashScale: dashPattern[1],
-        opacity: data.opacity,
-        connectGaps: data.connectgaps
-    };
-
-    if(this.mode.indexOf('lines') !== -1) {
-        if(this.linePlot) this.linePlot.update(lineOptions);
-        else {
-            this.linePlot = createLinePlot(lineOptions);
-            this.linePlot._trace = this;
-            this.scene.glplot.add(this.linePlot);
-        }
-    } else if(this.linePlot) {
-        this.scene.glplot.remove(this.linePlot);
-        this.linePlot.dispose();
-        this.linePlot = null;
-    }
-
-    // N.B. marker.opacity must be a scalar for performance
-    var scatterOpacity = data.opacity;
-    if(data.marker && data.marker.opacity !== undefined) scatterOpacity *= data.marker.opacity;
-
-    scatterOptions = {
-        gl: this.scene.glplot.gl,
-        position: options.position,
-        color: options.scatterColor,
-        size: options.scatterSize,
-        glyph: options.scatterMarker,
-        opacity: scatterOpacity,
-        orthographic: true,
-        lineWidth: options.scatterLineWidth,
-        lineColor: options.scatterLineColor,
-        project: options.project,
-        projectScale: options.projectScale,
-        projectOpacity: options.projectOpacity
-    };
-
-    if(this.mode.indexOf('markers') !== -1) {
-        if(this.scatterPlot) this.scatterPlot.update(scatterOptions);
-        else {
-            this.scatterPlot = createScatterPlot(scatterOptions);
-            this.scatterPlot._trace = this;
-            this.scatterPlot.highlightScale = 1;
-            this.scene.glplot.add(this.scatterPlot);
-        }
-    } else if(this.scatterPlot) {
-        this.scene.glplot.remove(this.scatterPlot);
-        this.scatterPlot.dispose();
-        this.scatterPlot = null;
-    }
-
-    textOptions = {
-        gl: this.scene.glplot.gl,
-        position: options.position,
-        glyph: options.text,
-        color: options.textColor,
-        size: options.textSize,
-        angle: options.textAngle,
-        alignment: options.textOffset,
-        font: options.textFontFamily,
-        fontWeight: options.textFontWeight,
-        fontStyle: options.textFontStyle,
-        fontVariant: options.textFontVariant,
-        orthographic: true,
-        lineWidth: 0,
-        project: false,
-        opacity: data.opacity
-    };
-
-    this.textLabels = data.hovertext || data.text;
-
-    if(this.mode.indexOf('text') !== -1) {
-        if(this.textMarkers) this.textMarkers.update(textOptions);
-        else {
-            this.textMarkers = createScatterPlot(textOptions);
-            this.textMarkers._trace = this;
-            this.textMarkers.highlightScale = 1;
-            this.scene.glplot.add(this.textMarkers);
-        }
-    } else if(this.textMarkers) {
-        this.scene.glplot.remove(this.textMarkers);
-        this.textMarkers.dispose();
-        this.textMarkers = null;
-    }
-
-    errorOptions = {
-        gl: this.scene.glplot.gl,
-        position: options.position,
-        color: options.errorColor,
-        error: options.errorBounds,
-        lineWidth: options.errorLineWidth,
-        capSize: options.errorCapSize,
-        opacity: data.opacity
-    };
-    if(this.errorBars) {
-        if(options.errorBounds) {
-            this.errorBars.update(errorOptions);
-        } else {
-            this.scene.glplot.remove(this.errorBars);
-            this.errorBars.dispose();
-            this.errorBars = null;
-        }
-    } else if(options.errorBounds) {
-        this.errorBars = createErrorBars(errorOptions);
-        this.errorBars._trace = this;
-        this.scene.glplot.add(this.errorBars);
-    }
-
-    if(options.delaunayAxis >= 0) {
-        var delaunayOptions = constructDelaunay(
-            options.position,
-            options.delaunayColor,
-            options.delaunayAxis
-        );
-        delaunayOptions.opacity = data.opacity;
-
-        if(this.delaunayMesh) {
-            this.delaunayMesh.update(delaunayOptions);
-        } else {
-            delaunayOptions.gl = gl;
-            this.delaunayMesh = createMesh(delaunayOptions);
-            this.delaunayMesh._trace = this;
-            this.scene.glplot.add(this.delaunayMesh);
-        }
-    } else if(this.delaunayMesh) {
-        this.scene.glplot.remove(this.delaunayMesh);
-        this.delaunayMesh.dispose();
-        this.delaunayMesh = null;
-    }
-};
-
-proto.dispose = function() {
-    if(this.linePlot) {
-        this.scene.glplot.remove(this.linePlot);
-        this.linePlot.dispose();
-    }
-    if(this.scatterPlot) {
-        this.scene.glplot.remove(this.scatterPlot);
-        this.scatterPlot.dispose();
-    }
-    if(this.errorBars) {
-        this.scene.glplot.remove(this.errorBars);
-        this.errorBars.dispose();
-    }
-    if(this.textMarkers) {
-        this.scene.glplot.remove(this.textMarkers);
-        this.textMarkers.dispose();
-    }
-    if(this.delaunayMesh) {
-        this.scene.glplot.remove(this.delaunayMesh);
-        this.delaunayMesh.dispose();
-    }
-};
-
-function createLineWithMarkers(scene, data) {
-    var plot = new LineWithMarkers(scene, data.uid);
-    plot.update(data);
-    return plot;
-}
-
-module.exports = createLineWithMarkers;
-
-
-/***/ }),
-
-/***/ 13744:
-/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
-
-
-
-var Registry = __webpack_require__(13936);
-var Lib = __webpack_require__(30991);
-
-var subTypes = __webpack_require__(33068);
-var handleMarkerDefaults = __webpack_require__(15294);
-var handleLineDefaults = __webpack_require__(82094);
-var handleTextDefaults = __webpack_require__(94729);
-
-var attributes = __webpack_require__(1015);
-
-module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout) {
-    function coerce(attr, dflt) {
-        return Lib.coerce(traceIn, traceOut, attributes, attr, dflt);
-    }
-
-    var len = handleXYZDefaults(traceIn, traceOut, coerce, layout);
-    if(!len) {
-        traceOut.visible = false;
-        return;
-    }
-
-    coerce('text');
-    coerce('hovertext');
-    coerce('hovertemplate');
-    coerce('xhoverformat');
-    coerce('yhoverformat');
-    coerce('zhoverformat');
-
-    coerce('mode');
-
-    if(subTypes.hasMarkers(traceOut)) {
-        handleMarkerDefaults(traceIn, traceOut, defaultColor, layout, coerce, {noSelect: true, noAngle: true});
-    }
-
-    if(subTypes.hasLines(traceOut)) {
-        coerce('connectgaps');
-        handleLineDefaults(traceIn, traceOut, defaultColor, layout, coerce);
-    }
-
-    if(subTypes.hasText(traceOut)) {
-        coerce('texttemplate');
-        handleTextDefaults(traceIn, traceOut, layout, coerce, {
-            noSelect: true,
-            noFontShadow: true,
-            noFontLineposition: true,
-            noFontTextcase: true,
-        });
-    }
-
-    var lineColor = (traceOut.line || {}).color;
-    var markerColor = (traceOut.marker || {}).color;
-    if(coerce('surfaceaxis') >= 0) coerce('surfacecolor', lineColor || markerColor);
-
-    var dims = ['x', 'y', 'z'];
-    for(var i = 0; i < 3; ++i) {
-        var projection = 'projection.' + dims[i];
-        if(coerce(projection + '.show')) {
-            coerce(projection + '.opacity');
-            coerce(projection + '.scale');
-        }
-    }
-
-    var errorBarsSupplyDefaults = Registry.getComponentMethod('errorbars', 'supplyDefaults');
-    errorBarsSupplyDefaults(traceIn, traceOut, lineColor || markerColor || defaultColor, {axis: 'z'});
-    errorBarsSupplyDefaults(traceIn, traceOut, lineColor || markerColor || defaultColor, {axis: 'y', inherit: 'z'});
-    errorBarsSupplyDefaults(traceIn, traceOut, lineColor || markerColor || defaultColor, {axis: 'x', inherit: 'z'});
-};
-
-function handleXYZDefaults(traceIn, traceOut, coerce, layout) {
-    var len = 0;
-    var x = coerce('x');
-    var y = coerce('y');
-    var z = coerce('z');
-
-    var handleCalendarDefaults = Registry.getComponentMethod('calendars', 'handleTraceDefaults');
-    handleCalendarDefaults(traceIn, traceOut, ['x', 'y', 'z'], layout);
-
-    if(x && y && z) {
-        // TODO: what happens if one is missing?
-        len = Math.min(x.length, y.length, z.length);
-        traceOut._length = traceOut._xlength = traceOut._ylength = traceOut._zlength = len;
-    }
-
-    return len;
-}
-
-
-/***/ }),
-
-/***/ 68860:
-/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
-
-
-
-module.exports = {
-    plot: __webpack_require__(93219),
-    attributes: __webpack_require__(1015),
-    markerSymbols: __webpack_require__(98993),
-    supplyDefaults: __webpack_require__(13744),
-    colorbar: [
-        {
-            container: 'marker',
-            min: 'cmin',
-            max: 'cmax'
-        }, {
-            container: 'line',
-            min: 'cmin',
-            max: 'cmax'
-        }
-    ],
-    calc: __webpack_require__(30935),
-
-    moduleType: 'trace',
-    name: 'scatter3d',
-    basePlotModule: __webpack_require__(68137),
-    categories: ['gl3d', 'symbols', 'showLegend', 'scatter-like'],
-    meta: {
-        hrName: 'scatter_3d',
-        description: [
-            'The data visualized as scatter point or lines in 3D dimension',
-            'is set in `x`, `y`, `z`.',
-            'Text (appearing either on the chart or on hover only) is via `text`.',
-            'Bubble charts are achieved by setting `marker.size` and/or `marker.color`',
-            'Projections are achieved via `projection`.',
-            'Surface fills are achieved via `surfaceaxis`.'
-        ].join(' ')
-    }
-};
-
-
 /***/ }),
 
 /***/ 47213:
@@ -272015,6 +271025,993 @@ module.exports = function handleXYDefaults(traceIn, traceOut, layout, coerce) {
 };
 
 
+/***/ }),
+
+/***/ 1015:
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+
+
+var scatterAttrs = __webpack_require__(86854);
+var fontAttrs = __webpack_require__(70827);
+var colorAttributes = __webpack_require__(17957);
+var axisHoverFormat = (__webpack_require__(71018).axisHoverFormat);
+var hovertemplateAttrs = (__webpack_require__(92710)/* .hovertemplateAttrs */ .rb);
+var texttemplateAttrs = (__webpack_require__(92710)/* .texttemplateAttrs */ .ay);
+var baseAttrs = __webpack_require__(35667);
+var DASHES = __webpack_require__(68828);
+
+var MARKER_SYMBOLS = __webpack_require__(98993);
+var extendFlat = (__webpack_require__(91307).extendFlat);
+var overrideAll = (__webpack_require__(70756).overrideAll);
+var sortObjectKeys = __webpack_require__(99124);
+
+var scatterLineAttrs = scatterAttrs.line;
+var scatterMarkerAttrs = scatterAttrs.marker;
+var scatterMarkerLineAttrs = scatterMarkerAttrs.line;
+
+var lineAttrs = extendFlat({
+    width: scatterLineAttrs.width,
+    dash: {
+        valType: 'enumerated',
+        values: sortObjectKeys(DASHES),
+        dflt: 'solid',
+        description: 'Sets the dash style of the lines.'
+    }
+}, colorAttributes('line'));
+
+function makeProjectionAttr(axLetter) {
+    return {
+        show: {
+            valType: 'boolean',
+            dflt: false,
+            description: [
+                'Sets whether or not projections are shown along the',
+                axLetter, 'axis.'
+            ].join(' ')
+        },
+        opacity: {
+            valType: 'number',
+            min: 0,
+            max: 1,
+            dflt: 1,
+            description: 'Sets the projection color.'
+        },
+        scale: {
+            valType: 'number',
+            min: 0,
+            max: 10,
+            dflt: 2 / 3,
+            description: [
+                'Sets the scale factor determining the size of the',
+                'projection marker points.'
+            ].join(' ')
+        }
+    };
+}
+
+var attrs = module.exports = overrideAll({
+    x: scatterAttrs.x,
+    y: scatterAttrs.y,
+    z: {
+        valType: 'data_array',
+        description: 'Sets the z coordinates.'
+    },
+
+    text: extendFlat({}, scatterAttrs.text, {
+        description: [
+            'Sets text elements associated with each (x,y,z) triplet.',
+            'If a single string, the same string appears over',
+            'all the data points.',
+            'If an array of string, the items are mapped in order to the',
+            'this trace\'s (x,y,z) coordinates.',
+            'If trace `hoverinfo` contains a *text* flag and *hovertext* is not set,',
+            'these elements will be seen in the hover labels.'
+        ].join(' ')
+    }),
+    texttemplate: texttemplateAttrs({}, {
+
+    }),
+    hovertext: extendFlat({}, scatterAttrs.hovertext, {
+        description: [
+            'Sets text elements associated with each (x,y,z) triplet.',
+            'If a single string, the same string appears over',
+            'all the data points.',
+            'If an array of string, the items are mapped in order to the',
+            'this trace\'s (x,y,z) coordinates.',
+            'To be seen, trace `hoverinfo` must contain a *text* flag.'
+        ].join(' ')
+    }),
+    hovertemplate: hovertemplateAttrs(),
+
+    xhoverformat: axisHoverFormat('x'),
+    yhoverformat: axisHoverFormat('y'),
+    zhoverformat: axisHoverFormat('z'),
+
+    mode: extendFlat({}, scatterAttrs.mode,  // shouldn't this be on-par with 2D?
+        {dflt: 'lines+markers'}),
+    surfaceaxis: {
+        valType: 'enumerated',
+        values: [-1, 0, 1, 2],
+        dflt: -1,
+        description: [
+            'If *-1*, the scatter points are not fill with a surface',
+            'If *0*, *1*, *2*, the scatter points are filled with',
+            'a Delaunay surface about the x, y, z respectively.'
+        ].join(' ')
+    },
+    surfacecolor: {
+        valType: 'color',
+        description: 'Sets the surface fill color.'
+    },
+    projection: {
+        x: makeProjectionAttr('x'),
+        y: makeProjectionAttr('y'),
+        z: makeProjectionAttr('z')
+    },
+
+    connectgaps: scatterAttrs.connectgaps,
+    line: lineAttrs,
+
+    marker: extendFlat({  // Parity with scatter.js?
+        symbol: {
+            valType: 'enumerated',
+            values: sortObjectKeys(MARKER_SYMBOLS),
+            dflt: 'circle',
+            arrayOk: true,
+            description: 'Sets the marker symbol type.'
+        },
+        size: extendFlat({}, scatterMarkerAttrs.size, {dflt: 8}),
+        sizeref: scatterMarkerAttrs.sizeref,
+        sizemin: scatterMarkerAttrs.sizemin,
+        sizemode: scatterMarkerAttrs.sizemode,
+        opacity: extendFlat({}, scatterMarkerAttrs.opacity, {
+            arrayOk: false,
+            description: [
+                'Sets the marker opacity.',
+                'Note that the marker opacity for scatter3d traces',
+                'must be a scalar value for performance reasons.',
+                'To set a blending opacity value',
+                '(i.e. which is not transparent), set *marker.color*',
+                'to an rgba color and use its alpha channel.'
+            ].join(' ')
+        }),
+        colorbar: scatterMarkerAttrs.colorbar,
+
+        line: extendFlat({
+            width: extendFlat({}, scatterMarkerLineAttrs.width, {arrayOk: false})
+        },
+            colorAttributes('marker.line')
+        )
+    },
+        colorAttributes('marker')
+    ),
+
+    textposition: extendFlat({}, scatterAttrs.textposition, {dflt: 'top center'}),
+    textfont: fontAttrs({
+        noFontShadow: true,
+        noFontLineposition: true,
+        noFontTextcase: true,
+        editType: 'calc',
+        colorEditType: 'style',
+        arrayOk: true,
+        variantValues: ['normal', 'small-caps'],
+        description: 'Sets the text font.'
+    }),
+
+    opacity: baseAttrs.opacity,
+
+    hoverinfo: extendFlat({}, baseAttrs.hoverinfo)
+}, 'calc', 'nested');
+
+attrs.x.editType = attrs.y.editType = attrs.z.editType = 'calc+clearAxisTypes';
+
+
+/***/ }),
+
+/***/ 30935:
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+
+
+var arraysToCalcdata = __webpack_require__(47213);
+var calcColorscale = __webpack_require__(59498);
+
+/**
+ * This is a kludge to put the array attributes into
+ * calcdata the way Scatter.plot does, so that legends and
+ * popovers know what to do with them.
+ */
+module.exports = function calc(gd, trace) {
+    var cd = [{x: false, y: false, trace: trace, t: {}}];
+
+    arraysToCalcdata(cd, trace);
+    calcColorscale(gd, trace);
+
+    return cd;
+};
+
+
+/***/ }),
+
+/***/ 77681:
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+
+
+var Registry = __webpack_require__(13936);
+
+function calculateAxisErrors(data, params, scaleFactor, axis) {
+    if(!params || !params.visible) return null;
+
+    var computeError = Registry.getComponentMethod('errorbars', 'makeComputeError')(params);
+    var result = new Array(data.length);
+
+    for(var i = 0; i < data.length; i++) {
+        var errors = computeError(+data[i], i);
+
+        if(axis.type === 'log') {
+            var point = axis.c2l(data[i]);
+            var min = data[i] - errors[0];
+            var max = data[i] + errors[1];
+
+            result[i] = [
+                (axis.c2l(min, true) - point) * scaleFactor,
+                (axis.c2l(max, true) - point) * scaleFactor
+            ];
+
+            // Keep track of the lower error bound which isn't negative!
+            if(min > 0) {
+                var lower = axis.c2l(min);
+                if(!axis._lowerLogErrorBound) axis._lowerLogErrorBound = lower;
+                axis._lowerErrorBound = Math.min(axis._lowerLogErrorBound, lower);
+            }
+        } else {
+            result[i] = [
+                -errors[0] * scaleFactor,
+                errors[1] * scaleFactor
+            ];
+        }
+    }
+
+    return result;
+}
+
+function dataLength(array) {
+    for(var i = 0; i < array.length; i++) {
+        if(array[i]) return array[i].length;
+    }
+    return 0;
+}
+
+function calculateErrors(data, scaleFactor, sceneLayout) {
+    var errors = [
+        calculateAxisErrors(data.x, data.error_x, scaleFactor[0], sceneLayout.xaxis),
+        calculateAxisErrors(data.y, data.error_y, scaleFactor[1], sceneLayout.yaxis),
+        calculateAxisErrors(data.z, data.error_z, scaleFactor[2], sceneLayout.zaxis)
+    ];
+
+    var n = dataLength(errors);
+    if(n === 0) return null;
+
+    var errorBounds = new Array(n);
+
+    for(var i = 0; i < n; i++) {
+        var bound = [[0, 0, 0], [0, 0, 0]];
+
+        for(var j = 0; j < 3; j++) {
+            if(errors[j]) {
+                for(var k = 0; k < 2; k++) {
+                    bound[k][j] = errors[j][i][k];
+                }
+            }
+        }
+
+        errorBounds[i] = bound;
+    }
+
+    return errorBounds;
+}
+
+module.exports = calculateErrors;
+
+
+/***/ }),
+
+/***/ 93219:
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+
+
+var createLinePlot = (__webpack_require__(46000).gl_line3d);
+var createScatterPlot = (__webpack_require__(46000).gl_scatter3d);
+var createErrorBars = (__webpack_require__(46000).gl_error3d);
+var createMesh = (__webpack_require__(46000).gl_mesh3d);
+var triangulate = (__webpack_require__(46000).delaunay_triangulate);
+
+var Lib = __webpack_require__(30991);
+var str2RgbaArray = __webpack_require__(44960);
+var formatColor = (__webpack_require__(592).formatColor);
+var makeBubbleSizeFn = __webpack_require__(42581);
+var DASH_PATTERNS = __webpack_require__(68828);
+var MARKER_SYMBOLS = __webpack_require__(98993);
+
+var Axes = __webpack_require__(15076);
+var appendArrayPointValue = (__webpack_require__(2918).appendArrayPointValue);
+
+var calculateError = __webpack_require__(77681);
+
+function LineWithMarkers(scene, uid) {
+    this.scene = scene;
+    this.uid = uid;
+    this.linePlot = null;
+    this.scatterPlot = null;
+    this.errorBars = null;
+    this.textMarkers = null;
+    this.delaunayMesh = null;
+    this.color = null;
+    this.mode = '';
+    this.dataPoints = [];
+    this.axesBounds = [
+        [-Infinity, -Infinity, -Infinity],
+        [Infinity, Infinity, Infinity]
+    ];
+    this.textLabels = null;
+    this.data = null;
+}
+
+var proto = LineWithMarkers.prototype;
+
+proto.handlePick = function(selection) {
+    if(selection.object &&
+        (selection.object === this.linePlot ||
+         selection.object === this.delaunayMesh ||
+         selection.object === this.textMarkers ||
+         selection.object === this.scatterPlot)
+    ) {
+        var ind = selection.index = selection.data.index;
+
+        if(selection.object.highlight) {
+            selection.object.highlight(null);
+        }
+        if(this.scatterPlot) {
+            selection.object = this.scatterPlot;
+            this.scatterPlot.highlight(selection.data);
+        }
+
+        selection.textLabel = '';
+        if(this.textLabels) {
+            if(Lib.isArrayOrTypedArray(this.textLabels)) {
+                if(this.textLabels[ind] || this.textLabels[ind] === 0) {
+                    selection.textLabel = this.textLabels[ind];
+                }
+            } else {
+                selection.textLabel = this.textLabels;
+            }
+        }
+
+        selection.traceCoordinate = [
+            this.data.x[ind],
+            this.data.y[ind],
+            this.data.z[ind]
+        ];
+
+        return true;
+    }
+};
+
+function constructDelaunay(points, color, axis) {
+    var u = (axis + 1) % 3;
+    var v = (axis + 2) % 3;
+    var filteredPoints = [];
+    var filteredIds = [];
+    var i;
+
+    for(i = 0; i < points.length; ++i) {
+        var p = points[i];
+        if(isNaN(p[u]) || !isFinite(p[u]) ||
+           isNaN(p[v]) || !isFinite(p[v])) {
+            continue;
+        }
+        filteredPoints.push([p[u], p[v]]);
+        filteredIds.push(i);
+    }
+    var cells = triangulate(filteredPoints);
+    for(i = 0; i < cells.length; ++i) {
+        var c = cells[i];
+        for(var j = 0; j < c.length; ++j) {
+            c[j] = filteredIds[c[j]];
+        }
+    }
+    return {
+        positions: points,
+        cells: cells,
+        meshColor: color
+    };
+}
+
+function calculateErrorParams(errors) {
+    var capSize = [0.0, 0.0, 0.0];
+    var color = [[0, 0, 0], [0, 0, 0], [0, 0, 0]];
+    var lineWidth = [1.0, 1.0, 1.0];
+
+    for(var i = 0; i < 3; i++) {
+        var e = errors[i];
+
+        if(e && e.copy_zstyle !== false && errors[2].visible !== false) e = errors[2];
+        if(!e || !e.visible) continue;
+
+        capSize[i] = e.width / 2;  // ballpark rescaling
+        color[i] = str2RgbaArray(e.color);
+        lineWidth[i] = e.thickness;
+    }
+
+    return {capSize: capSize, color: color, lineWidth: lineWidth};
+}
+
+function parseAlignmentX(a) {
+    if(a === null || a === undefined) return 0;
+
+    return (a.indexOf('left') > -1) ? -1 :
+           (a.indexOf('right') > -1) ? 1 : 0;
+}
+
+function parseAlignmentY(a) {
+    if(a === null || a === undefined) return 0;
+
+    return (a.indexOf('top') > -1) ? -1 :
+           (a.indexOf('bottom') > -1) ? 1 : 0;
+}
+
+function calculateTextOffset(tp) {
+    // Read out text properties
+
+    var defaultAlignmentX = 0;
+    var defaultAlignmentY = 0;
+
+    var textOffset = [
+        defaultAlignmentX,
+        defaultAlignmentY
+    ];
+
+    if(Array.isArray(tp)) {
+        for(var i = 0; i < tp.length; i++) {
+            textOffset[i] = [
+                defaultAlignmentX,
+                defaultAlignmentY
+            ];
+            if(tp[i]) {
+                textOffset[i][0] = parseAlignmentX(tp[i]);
+                textOffset[i][1] = parseAlignmentY(tp[i]);
+            }
+        }
+    } else {
+        textOffset[0] = parseAlignmentX(tp);
+        textOffset[1] = parseAlignmentY(tp);
+    }
+
+    return textOffset;
+}
+
+
+function calculateSize(sizeIn, sizeFn) {
+    // rough parity with Plotly 2D markers
+    return sizeFn(sizeIn * 4);
+}
+
+function calculateSymbol(symbolIn) {
+    return MARKER_SYMBOLS[symbolIn];
+}
+
+function formatParam(paramIn, len, calculate, dflt, extraFn) {
+    var paramOut = null;
+
+    if(Lib.isArrayOrTypedArray(paramIn)) {
+        paramOut = [];
+
+        for(var i = 0; i < len; i++) {
+            if(paramIn[i] === undefined) paramOut[i] = dflt;
+            else paramOut[i] = calculate(paramIn[i], extraFn);
+        }
+    } else paramOut = calculate(paramIn, Lib.identity);
+
+    return paramOut;
+}
+
+
+function convertPlotlyOptions(scene, data) {
+    var points = [];
+    var sceneLayout = scene.fullSceneLayout;
+    var scaleFactor = scene.dataScale;
+    var xaxis = sceneLayout.xaxis;
+    var yaxis = sceneLayout.yaxis;
+    var zaxis = sceneLayout.zaxis;
+    var marker = data.marker;
+    var line = data.line;
+    var x = data.x || [];
+    var y = data.y || [];
+    var z = data.z || [];
+    var len = x.length;
+    var xcalendar = data.xcalendar;
+    var ycalendar = data.ycalendar;
+    var zcalendar = data.zcalendar;
+    var xc, yc, zc;
+    var params, i;
+    var text;
+
+    // Convert points
+    for(i = 0; i < len; i++) {
+        // sanitize numbers and apply transforms based on axes.type
+        xc = xaxis.d2l(x[i], 0, xcalendar) * scaleFactor[0];
+        yc = yaxis.d2l(y[i], 0, ycalendar) * scaleFactor[1];
+        zc = zaxis.d2l(z[i], 0, zcalendar) * scaleFactor[2];
+
+        points[i] = [xc, yc, zc];
+    }
+
+    // convert text
+    if(Array.isArray(data.text)) {
+        text = data.text;
+    } else if(Lib.isTypedArray(data.text)) {
+        text = Array.from(data.text);
+    } else if(data.text !== undefined) {
+        text = new Array(len);
+        for(i = 0; i < len; i++) text[i] = data.text;
+    }
+
+    function formatter(axName, val) {
+        var ax = sceneLayout[axName];
+        return Axes.tickText(ax, ax.d2l(val), true).text;
+    }
+
+    // check texttemplate
+    var texttemplate = data.texttemplate;
+    if(texttemplate) {
+        var fullLayout = scene.fullLayout;
+        var d3locale = fullLayout._d3locale;
+        var isArray = Array.isArray(texttemplate);
+        var N = isArray ? Math.min(texttemplate.length, len) : len;
+        var txt = isArray ?
+            function(i) { return texttemplate[i]; } :
+            function() { return texttemplate; };
+
+        text = new Array(N);
+
+        for(i = 0; i < N; i++) {
+            var d = {x: x[i], y: y[i], z: z[i]};
+            var labels = {
+                xLabel: formatter('xaxis', x[i]),
+                yLabel: formatter('yaxis', y[i]),
+                zLabel: formatter('zaxis', z[i])
+            };
+            var pointValues = {};
+            appendArrayPointValue(pointValues, data, i);
+            var meta = data._meta || {};
+            text[i] = Lib.texttemplateString(txt(i), labels, d3locale, pointValues, d, meta);
+        }
+    }
+
+    // Build object parameters
+    params = {
+        position: points,
+        mode: data.mode,
+        text: text
+    };
+
+    if('line' in data) {
+        params.lineColor = formatColor(line, 1, len);
+        params.lineWidth = line.width;
+        params.lineDashes = line.dash;
+    }
+
+    if('marker' in data) {
+        var sizeFn = makeBubbleSizeFn(data);
+
+        params.scatterColor = formatColor(marker, 1, len);
+        params.scatterSize = formatParam(marker.size, len, calculateSize, 20, sizeFn);
+        params.scatterMarker = formatParam(marker.symbol, len, calculateSymbol, '●');
+        params.scatterLineWidth = marker.line.width;  // arrayOk === false
+        params.scatterLineColor = formatColor(marker.line, 1, len);
+        params.scatterAngle = 0;
+    }
+
+    if('textposition' in data) {
+        params.textOffset = calculateTextOffset(data.textposition);
+        params.textColor = formatColor(data.textfont, 1, len);
+        params.textSize = formatParam(data.textfont.size, len, Lib.identity, 12);
+        params.textFontFamily = data.textfont.family;
+        params.textFontWeight = data.textfont.weight;
+        params.textFontStyle = data.textfont.style;
+        params.textFontVariant = data.textfont.variant;
+        params.textAngle = 0;
+    }
+
+    var dims = ['x', 'y', 'z'];
+    params.project = [false, false, false];
+    params.projectScale = [1, 1, 1];
+    params.projectOpacity = [1, 1, 1];
+    for(i = 0; i < 3; ++i) {
+        var projection = data.projection[dims[i]];
+        if((params.project[i] = projection.show)) {
+            params.projectOpacity[i] = projection.opacity;
+            params.projectScale[i] = projection.scale;
+        }
+    }
+
+    params.errorBounds = calculateError(data, scaleFactor, sceneLayout);
+
+    var errorParams = calculateErrorParams([data.error_x, data.error_y, data.error_z]);
+    params.errorColor = errorParams.color;
+    params.errorLineWidth = errorParams.lineWidth;
+    params.errorCapSize = errorParams.capSize;
+
+    params.delaunayAxis = data.surfaceaxis;
+    params.delaunayColor = str2RgbaArray(data.surfacecolor);
+
+    return params;
+}
+
+function _arrayToColor(color) {
+    if(Lib.isArrayOrTypedArray(color)) {
+        var c = color[0];
+
+        if(Lib.isArrayOrTypedArray(c)) color = c;
+
+        return 'rgb(' + color.slice(0, 3).map(function(x) {
+            return Math.round(x * 255);
+        }) + ')';
+    }
+
+    return null;
+}
+
+function arrayToColor(colors) {
+    if(!Lib.isArrayOrTypedArray(colors)) {
+        return null;
+    }
+
+    if((colors.length === 4) && (typeof colors[0] === 'number')) {
+        return _arrayToColor(colors);
+    }
+
+    return colors.map(_arrayToColor);
+}
+
+proto.update = function(data) {
+    var gl = this.scene.glplot.gl;
+    var lineOptions;
+    var scatterOptions;
+    var errorOptions;
+    var textOptions;
+    var dashPattern = DASH_PATTERNS.solid;
+
+    // Save data
+    this.data = data;
+
+    // Run data conversion
+    var options = convertPlotlyOptions(this.scene, data);
+
+    if('mode' in options) {
+        this.mode = options.mode;
+    }
+    if('lineDashes' in options) {
+        if(options.lineDashes in DASH_PATTERNS) {
+            dashPattern = DASH_PATTERNS[options.lineDashes];
+        }
+    }
+
+    this.color = arrayToColor(options.scatterColor) ||
+                 arrayToColor(options.lineColor);
+
+    // Save data points
+    this.dataPoints = options.position;
+
+    lineOptions = {
+        gl: this.scene.glplot.gl,
+        position: options.position,
+        color: options.lineColor,
+        lineWidth: options.lineWidth || 1,
+        dashes: dashPattern[0],
+        dashScale: dashPattern[1],
+        opacity: data.opacity,
+        connectGaps: data.connectgaps
+    };
+
+    if(this.mode.indexOf('lines') !== -1) {
+        if(this.linePlot) this.linePlot.update(lineOptions);
+        else {
+            this.linePlot = createLinePlot(lineOptions);
+            this.linePlot._trace = this;
+            this.scene.glplot.add(this.linePlot);
+        }
+    } else if(this.linePlot) {
+        this.scene.glplot.remove(this.linePlot);
+        this.linePlot.dispose();
+        this.linePlot = null;
+    }
+
+    // N.B. marker.opacity must be a scalar for performance
+    var scatterOpacity = data.opacity;
+    if(data.marker && data.marker.opacity !== undefined) scatterOpacity *= data.marker.opacity;
+
+    scatterOptions = {
+        gl: this.scene.glplot.gl,
+        position: options.position,
+        color: options.scatterColor,
+        size: options.scatterSize,
+        glyph: options.scatterMarker,
+        opacity: scatterOpacity,
+        orthographic: true,
+        lineWidth: options.scatterLineWidth,
+        lineColor: options.scatterLineColor,
+        project: options.project,
+        projectScale: options.projectScale,
+        projectOpacity: options.projectOpacity
+    };
+
+    if(this.mode.indexOf('markers') !== -1) {
+        if(this.scatterPlot) this.scatterPlot.update(scatterOptions);
+        else {
+            this.scatterPlot = createScatterPlot(scatterOptions);
+            this.scatterPlot._trace = this;
+            this.scatterPlot.highlightScale = 1;
+            this.scene.glplot.add(this.scatterPlot);
+        }
+    } else if(this.scatterPlot) {
+        this.scene.glplot.remove(this.scatterPlot);
+        this.scatterPlot.dispose();
+        this.scatterPlot = null;
+    }
+
+    textOptions = {
+        gl: this.scene.glplot.gl,
+        position: options.position,
+        glyph: options.text,
+        color: options.textColor,
+        size: options.textSize,
+        angle: options.textAngle,
+        alignment: options.textOffset,
+        font: options.textFontFamily,
+        fontWeight: options.textFontWeight,
+        fontStyle: options.textFontStyle,
+        fontVariant: options.textFontVariant,
+        orthographic: true,
+        lineWidth: 0,
+        project: false,
+        opacity: data.opacity
+    };
+
+    this.textLabels = data.hovertext || data.text;
+
+    if(this.mode.indexOf('text') !== -1) {
+        if(this.textMarkers) this.textMarkers.update(textOptions);
+        else {
+            this.textMarkers = createScatterPlot(textOptions);
+            this.textMarkers._trace = this;
+            this.textMarkers.highlightScale = 1;
+            this.scene.glplot.add(this.textMarkers);
+        }
+    } else if(this.textMarkers) {
+        this.scene.glplot.remove(this.textMarkers);
+        this.textMarkers.dispose();
+        this.textMarkers = null;
+    }
+
+    errorOptions = {
+        gl: this.scene.glplot.gl,
+        position: options.position,
+        color: options.errorColor,
+        error: options.errorBounds,
+        lineWidth: options.errorLineWidth,
+        capSize: options.errorCapSize,
+        opacity: data.opacity
+    };
+    if(this.errorBars) {
+        if(options.errorBounds) {
+            this.errorBars.update(errorOptions);
+        } else {
+            this.scene.glplot.remove(this.errorBars);
+            this.errorBars.dispose();
+            this.errorBars = null;
+        }
+    } else if(options.errorBounds) {
+        this.errorBars = createErrorBars(errorOptions);
+        this.errorBars._trace = this;
+        this.scene.glplot.add(this.errorBars);
+    }
+
+    if(options.delaunayAxis >= 0) {
+        var delaunayOptions = constructDelaunay(
+            options.position,
+            options.delaunayColor,
+            options.delaunayAxis
+        );
+        delaunayOptions.opacity = data.opacity;
+
+        if(this.delaunayMesh) {
+            this.delaunayMesh.update(delaunayOptions);
+        } else {
+            delaunayOptions.gl = gl;
+            this.delaunayMesh = createMesh(delaunayOptions);
+            this.delaunayMesh._trace = this;
+            this.scene.glplot.add(this.delaunayMesh);
+        }
+    } else if(this.delaunayMesh) {
+        this.scene.glplot.remove(this.delaunayMesh);
+        this.delaunayMesh.dispose();
+        this.delaunayMesh = null;
+    }
+};
+
+proto.dispose = function() {
+    if(this.linePlot) {
+        this.scene.glplot.remove(this.linePlot);
+        this.linePlot.dispose();
+    }
+    if(this.scatterPlot) {
+        this.scene.glplot.remove(this.scatterPlot);
+        this.scatterPlot.dispose();
+    }
+    if(this.errorBars) {
+        this.scene.glplot.remove(this.errorBars);
+        this.errorBars.dispose();
+    }
+    if(this.textMarkers) {
+        this.scene.glplot.remove(this.textMarkers);
+        this.textMarkers.dispose();
+    }
+    if(this.delaunayMesh) {
+        this.scene.glplot.remove(this.delaunayMesh);
+        this.delaunayMesh.dispose();
+    }
+};
+
+function createLineWithMarkers(scene, data) {
+    var plot = new LineWithMarkers(scene, data.uid);
+    plot.update(data);
+    return plot;
+}
+
+module.exports = createLineWithMarkers;
+
+
+/***/ }),
+
+/***/ 13744:
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+
+
+var Registry = __webpack_require__(13936);
+var Lib = __webpack_require__(30991);
+
+var subTypes = __webpack_require__(33068);
+var handleMarkerDefaults = __webpack_require__(15294);
+var handleLineDefaults = __webpack_require__(82094);
+var handleTextDefaults = __webpack_require__(94729);
+
+var attributes = __webpack_require__(1015);
+
+module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout) {
+    function coerce(attr, dflt) {
+        return Lib.coerce(traceIn, traceOut, attributes, attr, dflt);
+    }
+
+    var len = handleXYZDefaults(traceIn, traceOut, coerce, layout);
+    if(!len) {
+        traceOut.visible = false;
+        return;
+    }
+
+    coerce('text');
+    coerce('hovertext');
+    coerce('hovertemplate');
+    coerce('xhoverformat');
+    coerce('yhoverformat');
+    coerce('zhoverformat');
+
+    coerce('mode');
+
+    if(subTypes.hasMarkers(traceOut)) {
+        handleMarkerDefaults(traceIn, traceOut, defaultColor, layout, coerce, {noSelect: true, noAngle: true});
+    }
+
+    if(subTypes.hasLines(traceOut)) {
+        coerce('connectgaps');
+        handleLineDefaults(traceIn, traceOut, defaultColor, layout, coerce);
+    }
+
+    if(subTypes.hasText(traceOut)) {
+        coerce('texttemplate');
+        handleTextDefaults(traceIn, traceOut, layout, coerce, {
+            noSelect: true,
+            noFontShadow: true,
+            noFontLineposition: true,
+            noFontTextcase: true,
+        });
+    }
+
+    var lineColor = (traceOut.line || {}).color;
+    var markerColor = (traceOut.marker || {}).color;
+    if(coerce('surfaceaxis') >= 0) coerce('surfacecolor', lineColor || markerColor);
+
+    var dims = ['x', 'y', 'z'];
+    for(var i = 0; i < 3; ++i) {
+        var projection = 'projection.' + dims[i];
+        if(coerce(projection + '.show')) {
+            coerce(projection + '.opacity');
+            coerce(projection + '.scale');
+        }
+    }
+
+    var errorBarsSupplyDefaults = Registry.getComponentMethod('errorbars', 'supplyDefaults');
+    errorBarsSupplyDefaults(traceIn, traceOut, lineColor || markerColor || defaultColor, {axis: 'z'});
+    errorBarsSupplyDefaults(traceIn, traceOut, lineColor || markerColor || defaultColor, {axis: 'y', inherit: 'z'});
+    errorBarsSupplyDefaults(traceIn, traceOut, lineColor || markerColor || defaultColor, {axis: 'x', inherit: 'z'});
+};
+
+function handleXYZDefaults(traceIn, traceOut, coerce, layout) {
+    var len = 0;
+    var x = coerce('x');
+    var y = coerce('y');
+    var z = coerce('z');
+
+    var handleCalendarDefaults = Registry.getComponentMethod('calendars', 'handleTraceDefaults');
+    handleCalendarDefaults(traceIn, traceOut, ['x', 'y', 'z'], layout);
+
+    if(x && y && z) {
+        // TODO: what happens if one is missing?
+        len = Math.min(x.length, y.length, z.length);
+        traceOut._length = traceOut._xlength = traceOut._ylength = traceOut._zlength = len;
+    }
+
+    return len;
+}
+
+
+/***/ }),
+
+/***/ 68860:
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+
+
+module.exports = {
+    plot: __webpack_require__(93219),
+    attributes: __webpack_require__(1015),
+    markerSymbols: __webpack_require__(98993),
+    supplyDefaults: __webpack_require__(13744),
+    colorbar: [
+        {
+            container: 'marker',
+            min: 'cmin',
+            max: 'cmax'
+        }, {
+            container: 'line',
+            min: 'cmin',
+            max: 'cmax'
+        }
+    ],
+    calc: __webpack_require__(30935),
+
+    moduleType: 'trace',
+    name: 'scatter3d',
+    basePlotModule: __webpack_require__(68137),
+    categories: ['gl3d', 'symbols', 'showLegend', 'scatter-like'],
+    meta: {
+        hrName: 'scatter_3d',
+        description: [
+            'The data visualized as scatter point or lines in 3D dimension',
+            'is set in `x`, `y`, `z`.',
+            'Text (appearing either on the chart or on hover only) is via `text`.',
+            'Bubble charts are achieved by setting `marker.size` and/or `marker.color`',
+            'Projections are achieved via `projection`.',
+            'Surface fills are achieved via `surfaceaxis`.'
+        ].join(' ')
+    }
+};
+
+
 /***/ }),
 
 /***/ 44771:
@@ -369334,7 +369331,7 @@ function HtmlRunner() {
     const iframeClasses = (0, classnames_1.default)(styles_module_scss_1.default.iframe, {
         [styles_module_scss_1.default.codeHasBeenRun]: codeHasBeenRun,
     });
-    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.htmlrunnerContainer, children: [(0, jsx_runtime_1.jsx)(OutputTabPanel_1.OutputTabPanel, { title: "Preview", icon: preview_svg_1.default, readOnly: readOnly, extraTabContent: codeHasBeenRun && openInNewTabLink, tabPanelClassName: styles_module_scss_1.default.previewHtml, children: error ? ((0, jsx_runtime_1.jsx)("div", { className: iframeClasses, children: (0, jsx_runtime_1.jsx)(NotFoundPage_1.NotFoundPage, {}) })) : ((0, jsx_runtime_1.jsx)("iframe", { className: iframeClasses, sandbox: "allow-scripts allow-same-origin allow-modals allow-popups", referrerPolicy: "strict-origin-when-cross-origin", allow: "\r\n            accelerometer 'none';\r\n            camera 'none';\r\n            encrypted-media;\r\n            fullscreen;\r\n            picture-in-picture;\r\n            geolocation 'none';\r\n            gyroscope 'none';\r\n            magnetometer 'none';\r\n            microphone 'none';\r\n            midi 'none';\r\n            payment 'none';\r\n            usb 'none';\r\n          ", id: "output-frame", title: "HTML Output Preview", ref: output, onLoad: iframeReload })) }), !isPreviewMode && ((0, jsx_runtime_1.jsx)(ResizableWithHandle_1.default, { "data-testid": "proj-console-container", handleDirection: "top", defaultHeight: "50%", className: styles_module_scss_1.default.resizeContainer, handleClassName: styles_module_scss_1.default.resizeHandleContainer, children: (0, jsx_runtime_1.jsx)(OutputTabPanel_1.OutputTabPanel, { title: "Console", icon: console_svg_1.default, readOnly: readOnly, children: (0, jsx_runtime_1.jsx)(HtmlConsole_1.default, { consoleLogs: consoleLogs }) }) }))] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.htmlrunnerContainer, children: [(0, jsx_runtime_1.jsx)(OutputTabPanel_1.OutputTabPanel, { title: "Preview", icon: preview_svg_1.default, readOnly: readOnly, extraTabContent: codeHasBeenRun && openInNewTabLink, tabPanelClassName: styles_module_scss_1.default.previewHtml, children: error ? ((0, jsx_runtime_1.jsx)("div", { className: iframeClasses, children: (0, jsx_runtime_1.jsx)(NotFoundPage_1.NotFoundPage, {}) })) : ((0, jsx_runtime_1.jsx)("iframe", { className: iframeClasses, sandbox: "allow-scripts allow-same-origin allow-modals allow-popups", referrerPolicy: "strict-origin-when-cross-origin", allow: "\n            accelerometer 'none';\n            camera 'none';\n            encrypted-media;\n            fullscreen;\n            picture-in-picture;\n            geolocation 'none';\n            gyroscope 'none';\n            magnetometer 'none';\n            microphone 'none';\n            midi 'none';\n            payment 'none';\n            usb 'none';\n          ", id: "output-frame", title: "HTML Output Preview", ref: output, onLoad: iframeReload })) }), !isPreviewMode && ((0, jsx_runtime_1.jsx)(ResizableWithHandle_1.default, { "data-testid": "proj-console-container", handleDirection: "top", defaultHeight: "50%", className: styles_module_scss_1.default.resizeContainer, handleClassName: styles_module_scss_1.default.resizeHandleContainer, children: (0, jsx_runtime_1.jsx)(OutputTabPanel_1.OutputTabPanel, { title: "Console", icon: console_svg_1.default, readOnly: readOnly, children: (0, jsx_runtime_1.jsx)(HtmlConsole_1.default, { consoleLogs: consoleLogs }) }) }))] }));
 }
 exports["default"] = HtmlRunner;
 
@@ -369716,234 +369713,234 @@ Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.consoleOverrideScript = exports.disableLocalStorageScript = void 0;
 // insert script to disable access to specific localStorage keys
 // localstorage.getItem() is a potential security risk when executing untrusted code
-exports.disableLocalStorageScript = `
-<script>
-  (function() {
-      const originalGetItem = window.localStorage.getItem.bind(window.localStorage);
-      const originalSetItem = window.localStorage.setItem.bind(window.localStorage);
-      const originalRemoveItem = window.localStorage.removeItem.bind(window.localStorage);
-      const originalClear = window.localStorage.clear.bind(window.localStorage);
-
-      const isDisallowedKey = (key) => key === 'authKey' || key.startsWith('oidc.');
-
-      Object.defineProperty(window, 'localStorage', {
-      value: {
-          getItem: function(key) {
-          if (isDisallowedKey(key)) {
-              console.log(\`localStorage.getItem for "\${key}" is disabled\`);
-              return null;
-          }
-          return originalGetItem(key);
-          },
-          setItem: function(key, value) {
-          if (isDisallowedKey(key)) {
-              console.log(\`localStorage.setItem for "\${key}" is disabled\`);
-              return;
-          }
-          return originalSetItem(key, value);
-          },
-          removeItem: function(key) {
-          if (isDisallowedKey(key)) {
-              console.log(\`localStorage.removeItem for "\${key}" is disabled\`);
-              return;
-          }
-          return originalRemoveItem(key);
-          },
-          clear: function() {
-          console.log('localStorage.clear is disabled');
-          return;
-          }
-      },
-      writable: false,
-      configurable: false
-      });
-  })();
-</script>
+exports.disableLocalStorageScript = `
+<script>
+  (function() {
+      const originalGetItem = window.localStorage.getItem.bind(window.localStorage);
+      const originalSetItem = window.localStorage.setItem.bind(window.localStorage);
+      const originalRemoveItem = window.localStorage.removeItem.bind(window.localStorage);
+      const originalClear = window.localStorage.clear.bind(window.localStorage);
+
+      const isDisallowedKey = (key) => key === 'authKey' || key.startsWith('oidc.');
+
+      Object.defineProperty(window, 'localStorage', {
+      value: {
+          getItem: function(key) {
+          if (isDisallowedKey(key)) {
+              console.log(\`localStorage.getItem for "\${key}" is disabled\`);
+              return null;
+          }
+          return originalGetItem(key);
+          },
+          setItem: function(key, value) {
+          if (isDisallowedKey(key)) {
+              console.log(\`localStorage.setItem for "\${key}" is disabled\`);
+              return;
+          }
+          return originalSetItem(key, value);
+          },
+          removeItem: function(key) {
+          if (isDisallowedKey(key)) {
+              console.log(\`localStorage.removeItem for "\${key}" is disabled\`);
+              return;
+          }
+          return originalRemoveItem(key);
+          },
+          clear: function() {
+          console.log('localStorage.clear is disabled');
+          return;
+          }
+      },
+      writable: false,
+      configurable: false
+      });
+  })();
+</script>
 `;
 const MAX_DEPTH = 5; // Maximum depth for object serialization to prevent infinite recursion
 // Override console methods to send logs to parent window and serialize complex objects
-exports.consoleOverrideScript = `
-<script>
-  (function() {
-    const SerializedType = {
-      Null: "null",
-      Undefined: "undefined",
-      Boolean: "boolean",
-      Number: "number",
-      String: "string",
-      Array: "array",
-      Object: "object",
-    };
-
-    const original = {};
-    const methods = ["log", "error", "warn", "info", "debug", "assert"];
-
-    function getTimestamp() {
-      const now = new Date();
-      const pad = (n) => String(n).padStart(2, '0');
-
-      return (
-        now.getFullYear()               + '-' +
-        pad(now.getMonth() + 1)         + '-' +
-        pad(now.getDate())              + ' '  +
-        pad(now.getHours())             + ':'  +
-        pad(now.getMinutes())           + ':'  +
-        pad(now.getSeconds())           + '.'  +
-        pad(Math.floor(now.getMilliseconds() / 10))
-      );
-    }
-
-    function serialize(arg, depth = 0, maxDepth = ${MAX_DEPTH}, visited = new WeakSet()) {
-      if (depth > maxDepth) return { "type": SerializedType.String, "value": "[Max depth reached]" };
-
-      if (arg && typeof arg === "object") {
-        if (visited.has(arg)) {
-          return { "type": SerializedType.String, "value": "[Circular reference]" };
-        }
-        visited.add(arg);
-      }
-
-      const type = typeof arg;
-      if (arg === null) return { "type": SerializedType.Null, "value": "null" };
-      if (arg === undefined) return { "type": SerializedType.Undefined, "value": "undefined" };
-      if (type === "boolean") return { "type": SerializedType.Boolean, "value": String(arg) };
-      if (type === "number") return { "type": SerializedType.Number, "value": String(arg) };
-      if (type === "string") return { "type": SerializedType.String, "value": arg };
-
-      if (Array.isArray(arg)) {
-        return {
-          "type": SerializedType.Array,
-          "value": arg.map(item => serialize(item, depth + 1, maxDepth))
-        };
-      }
-
-      if (type === "object" && arg !== null) {
-        const props = {};
-        try {
-          for (let key in arg) {
-            if (arg.hasOwnProperty(key)) {
-              props[key] = serialize(arg[key], depth + 1, maxDepth, visited);
-            }
-          }
-        } catch (error) {
-          console.error("Error serializing object property:", error);
-        }
-        return { "type": SerializedType.Object, "value": props };
-      }
-
-      return { "type": SerializedType.String, "value": String(arg) };
-    }
-
-    methods.forEach(m => {
-      original[m] = console[m] || function(){};
-
-      console[m] = function(...args) {
-        const timestamp = getTimestamp();
-
-        let level = m;
-        let serializedArgs = args.map(arg => serialize(arg));
-
-        if (m === "assert") {
-          const condition = Boolean(args[0]);
-          const messageArgs = args.slice(1);
-
-          serializedArgs =
-            messageArgs.length > 0
-              ? messageArgs.map(arg => serialize(arg))
-              : [
-                  {
-                    "type": "string",
-                    "value": condition ? "Assertion passed" : "Assertion failed",
-                  },
-                ];
-
-          level = condition ? "log" : "error";
-        }
-
-        window.parent.postMessage({
-          "type": "console",
-          "method": level,
-          "data": serializedArgs,
-          "timestamp": timestamp
-        }, "*");
-
-        original[m](...args);
-      };
-    });
-    
-    window.addEventListener("error", function(event) {
-      const timestamp = getTimestamp();
-      const error = event.error;
-
-      let message;
-      if (error && error.name && error.message) {
-        message = error.name + ": " + error.message;
-      } else if (event.message) {
-        message = event.message;
-      } else {
-        message = "Unknown JavaScript error";
-      }
-
-      let displayFilename = event.filename;
-
-      if (
-        typeof displayFilename === "string" &&
-        displayFilename.startsWith("blob:")
-      ) {
-        const sourceMap = window.__blobSourceMap__ || {};
-        const mappedFilename = sourceMap[displayFilename];
-
-        if (mappedFilename) {
-          displayFilename = mappedFilename;
-        } else {
-          const meta = document.querySelector("meta[filename]");
-          displayFilename =
-            (meta && meta.getAttribute("filename")) || "preview";
-        }
-      }
-
-      const location =
-        displayFilename || event.lineno || event.colno
-          ? " at " +
-            [displayFilename, event.lineno, event.colno]
-              .filter(Boolean)
-              .join(":")
-          : "";
-
-      window.parent.postMessage({
-        "type": "console",
-        "method": "error",
-        "data": [
-          { "type": "string", "value": message + location }
-        ],
-        "timestamp": timestamp
-      }, "*");
-    });
-
-    window.addEventListener("unhandledrejection", function(event) {
-      const timestamp = getTimestamp();
-      const reason = event.reason;
-
-      let message;
-      if (reason && reason.name && reason.message) {
-        message = reason.name + ": " + reason.message;
-      } else if (typeof reason === "string") {
-        message = "UnhandledPromiseRejection: " + reason;
-      } else {
-        message = "UnhandledPromiseRejection: " + String(reason);
-      }
-
-      window.parent.postMessage({
-        "type": "console",
-        "method": "error",
-        "data": [
-          { "type": "string", "value": message }
-        ],
-        "timestamp": timestamp
-      }, "*");
-    });
-  })();
-</script>
+exports.consoleOverrideScript = `
+<script>
+  (function() {
+    const SerializedType = {
+      Null: "null",
+      Undefined: "undefined",
+      Boolean: "boolean",
+      Number: "number",
+      String: "string",
+      Array: "array",
+      Object: "object",
+    };
+
+    const original = {};
+    const methods = ["log", "error", "warn", "info", "debug", "assert"];
+
+    function getTimestamp() {
+      const now = new Date();
+      const pad = (n) => String(n).padStart(2, '0');
+
+      return (
+        now.getFullYear()               + '-' +
+        pad(now.getMonth() + 1)         + '-' +
+        pad(now.getDate())              + ' '  +
+        pad(now.getHours())             + ':'  +
+        pad(now.getMinutes())           + ':'  +
+        pad(now.getSeconds())           + '.'  +
+        pad(Math.floor(now.getMilliseconds() / 10))
+      );
+    }
+
+    function serialize(arg, depth = 0, maxDepth = ${MAX_DEPTH}, visited = new WeakSet()) {
+      if (depth > maxDepth) return { "type": SerializedType.String, "value": "[Max depth reached]" };
+
+      if (arg && typeof arg === "object") {
+        if (visited.has(arg)) {
+          return { "type": SerializedType.String, "value": "[Circular reference]" };
+        }
+        visited.add(arg);
+      }
+
+      const type = typeof arg;
+      if (arg === null) return { "type": SerializedType.Null, "value": "null" };
+      if (arg === undefined) return { "type": SerializedType.Undefined, "value": "undefined" };
+      if (type === "boolean") return { "type": SerializedType.Boolean, "value": String(arg) };
+      if (type === "number") return { "type": SerializedType.Number, "value": String(arg) };
+      if (type === "string") return { "type": SerializedType.String, "value": arg };
+
+      if (Array.isArray(arg)) {
+        return {
+          "type": SerializedType.Array,
+          "value": arg.map(item => serialize(item, depth + 1, maxDepth))
+        };
+      }
+
+      if (type === "object" && arg !== null) {
+        const props = {};
+        try {
+          for (let key in arg) {
+            if (arg.hasOwnProperty(key)) {
+              props[key] = serialize(arg[key], depth + 1, maxDepth, visited);
+            }
+          }
+        } catch (error) {
+          console.error("Error serializing object property:", error);
+        }
+        return { "type": SerializedType.Object, "value": props };
+      }
+
+      return { "type": SerializedType.String, "value": String(arg) };
+    }
+
+    methods.forEach(m => {
+      original[m] = console[m] || function(){};
+
+      console[m] = function(...args) {
+        const timestamp = getTimestamp();
+
+        let level = m;
+        let serializedArgs = args.map(arg => serialize(arg));
+
+        if (m === "assert") {
+          const condition = Boolean(args[0]);
+          const messageArgs = args.slice(1);
+
+          serializedArgs =
+            messageArgs.length > 0
+              ? messageArgs.map(arg => serialize(arg))
+              : [
+                  {
+                    "type": "string",
+                    "value": condition ? "Assertion passed" : "Assertion failed",
+                  },
+                ];
+
+          level = condition ? "log" : "error";
+        }
+
+        window.parent.postMessage({
+          "type": "console",
+          "method": level,
+          "data": serializedArgs,
+          "timestamp": timestamp
+        }, "*");
+
+        original[m](...args);
+      };
+    });
+    
+    window.addEventListener("error", function(event) {
+      const timestamp = getTimestamp();
+      const error = event.error;
+
+      let message;
+      if (error && error.name && error.message) {
+        message = error.name + ": " + error.message;
+      } else if (event.message) {
+        message = event.message;
+      } else {
+        message = "Unknown JavaScript error";
+      }
+
+      let displayFilename = event.filename;
+
+      if (
+        typeof displayFilename === "string" &&
+        displayFilename.startsWith("blob:")
+      ) {
+        const sourceMap = window.__blobSourceMap__ || {};
+        const mappedFilename = sourceMap[displayFilename];
+
+        if (mappedFilename) {
+          displayFilename = mappedFilename;
+        } else {
+          const meta = document.querySelector("meta[filename]");
+          displayFilename =
+            (meta && meta.getAttribute("filename")) || "preview";
+        }
+      }
+
+      const location =
+        displayFilename || event.lineno || event.colno
+          ? " at " +
+            [displayFilename, event.lineno, event.colno]
+              .filter(Boolean)
+              .join(":")
+          : "";
+
+      window.parent.postMessage({
+        "type": "console",
+        "method": "error",
+        "data": [
+          { "type": "string", "value": message + location }
+        ],
+        "timestamp": timestamp
+      }, "*");
+    });
+
+    window.addEventListener("unhandledrejection", function(event) {
+      const timestamp = getTimestamp();
+      const reason = event.reason;
+
+      let message;
+      if (reason && reason.name && reason.message) {
+        message = reason.name + ": " + reason.message;
+      } else if (typeof reason === "string") {
+        message = "UnhandledPromiseRejection: " + reason;
+      } else {
+        message = "UnhandledPromiseRejection: " + String(reason);
+      }
+
+      window.parent.postMessage({
+        "type": "console",
+        "method": "error",
+        "data": [
+          { "type": "string", "value": message }
+        ],
+        "timestamp": timestamp
+      }, "*");
+    });
+  })();
+</script>
 `;
 
 
@@ -371765,17 +371762,9 @@ Object.defineProperty(exports, "__esModule", ({ value: true }));
 const jsx_runtime_1 = __webpack_require__(74848);
 const ContextMenu_1 = __importDefault(__webpack_require__(39179));
 const AuthContext_1 = __webpack_require__(55471);
-const BeforeUnloadContext_1 = __webpack_require__(2373);
 const UserMenu = (props) => {
     const { anchorRef, opened, onClose } = props;
     const { onLogout, onViewProfile } = (0, AuthContext_1.useAuthActions)();
-    const beforeUnloadRef = (0, BeforeUnloadContext_1.useBeforeUnload)();
-    const handleLogout = () => {
-        if (beforeUnloadRef?.current) {
-            window.removeEventListener("beforeunload", beforeUnloadRef.current);
-        }
-        onLogout();
-    };
     return ((0, jsx_runtime_1.jsx)(ContextMenu_1.default, { align: "start", direction: "top", menuWidth: 142, menuOptions: [
             {
                 text: "View Profile",
@@ -371783,7 +371772,7 @@ const UserMenu = (props) => {
             },
             {
                 text: "Logout",
-                action: handleLogout,
+                action: onLogout,
             },
         ], opened: opened, anchorRef: anchorRef, onClose: onClose, gap: 4 }));
 };
@@ -372150,6 +372139,7 @@ const types_1 = __webpack_require__(92932);
 const stores_1 = __webpack_require__(32132);
 const useHover_1 = __webpack_require__(78556);
 const styles_module_scss_1 = __importDefault(__webpack_require__(99855));
+const SvgIcon_1 = __webpack_require__(82917);
 const ShareButton = (props) => {
     const dispatch = (0, react_redux_1.useDispatch)();
     const shareLinks = (0, stores_1.useAppSelector)((state) => state.editor.shareLinks);
@@ -372166,7 +372156,7 @@ const ShareButton = (props) => {
     }, [dispatch, shareLinks]);
     const canShare = Boolean(shareLinks);
     const { hovered, hoverProps } = (0, useHover_1.useHover)();
-    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.shareButtonWrapper, ...hoverProps, children: [(0, jsx_runtime_1.jsx)(Tooltip_1.default, { message: "To share your project, please save it first.", visible: hovered && !canShare, position: "bottom" }), (0, jsx_runtime_1.jsx)(Button_1.default, { disabled: !canShare, variant: "tertiary", ButtonIcon: share_svg_1.default, onClickHandler: onClickShare, ...props })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.shareButtonWrapper, ...hoverProps, children: [(0, jsx_runtime_1.jsx)(Tooltip_1.default, { message: "To share your project, please save it first.", visible: hovered && !canShare, position: "bottom" }), (0, jsx_runtime_1.jsx)(Button_1.default, { disabled: !canShare, variant: "tertiary", ButtonIcon: () => (0, jsx_runtime_1.jsx)(SvgIcon_1.SvgIcon, { SvgElement: share_svg_1.default, size: 24 }), onClickHandler: onClickShare, ...props })] }));
 };
 exports["default"] = ShareButton;
 
@@ -372478,7 +372468,6 @@ const ToastMessages_1 = __webpack_require__(6459);
 const Modals_1 = __webpack_require__(18284);
 const Loading_1 = __importDefault(__webpack_require__(34466));
 const stores_1 = __webpack_require__(32132);
-const BeforeUnloadContext_1 = __webpack_require__(2373);
 const SaveBeforeLeave_1 = __webpack_require__(47318);
 const selectors_1 = __webpack_require__(43551);
 const WebComponentLoader = (props) => {
@@ -372579,10 +372568,10 @@ const WebComponentLoader = (props) => {
     (0, react_1.useEffect)(() => {
         // Create a script element to save the existing Prism object if there is one
         const script = document.createElement("script");
-        script.textContent = `
-      if (window.Prism) {
-        window.syntaxHighlight = window.Prism;
-      }
+        script.textContent = `
+      if (window.Prism) {
+        window.syntaxHighlight = window.Prism;
+      }
     `;
         // Append the script to the document body
         document.body.appendChild(script);
@@ -372593,7 +372582,6 @@ const WebComponentLoader = (props) => {
     }, []);
     const modal = (modalWindowShowing && Modals_1.ModalTypeToComponentMap[modalWindowShowing]) ?? null;
     const isReadOnly = (0, stores_1.useAppSelector)((state) => state.editor.readOnly);
-    const beforeUnloadRef = (0, react_1.useRef)(null);
     const shouldBlockNavigation = (0, stores_1.useAppSelector)(selectors_1.selectProjectDirtyState);
     // effect for browser actions (refresh, tab close etc)
     (0, react_1.useEffect)(() => {
@@ -372605,17 +372593,15 @@ const WebComponentLoader = (props) => {
             // for browsers to show the confirmation dialog
             e.returnValue = "";
         };
-        beforeUnloadRef.current = handleBeforeUnload;
         window.addEventListener("beforeunload", handleBeforeUnload);
         return () => {
             window.removeEventListener("beforeunload", handleBeforeUnload);
-            beforeUnloadRef.current = null;
         };
-    }, [isPreviewMode, isReadOnly, shouldBlockNavigation]);
-    const renderSuccessState = () => ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(BeforeUnloadContext_1.BeforeUnloadContext.Provider, { value: beforeUnloadRef, children: (0, jsx_runtime_1.jsxs)(settings_1.SettingsContext.Provider, { value: {
-                    theme: themeDefault,
-                    fontSize: "small",
-                }, children: [(0, jsx_runtime_1.jsx)(ToastMessages_1.ToastMessagesProvider, {}), (0, jsx_runtime_1.jsxs)("div", { id: "textjam-root", className: `editor-shell --${themeDefault}`, children: [(0, jsx_runtime_1.jsx)(WebComponentProject_1.default, { nameEditable: projectNameEditable, sidebarOptions: sidebarOptions, packageApiUrl: packageApiUrl }), errorModalShowing && (0, jsx_runtime_1.jsx)(ErrorModal_1.default, {}), modal, (0, jsx_runtime_1.jsx)(SaveBeforeLeave_1.SaveBeforeLeaveModal, {})] })] }) }) }));
+    }, [shouldBlockNavigation, isPreviewMode, isReadOnly]);
+    const renderSuccessState = () => ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(settings_1.SettingsContext.Provider, { value: {
+                theme: themeDefault,
+                fontSize: "small",
+            }, children: [(0, jsx_runtime_1.jsx)(ToastMessages_1.ToastMessagesProvider, {}), (0, jsx_runtime_1.jsxs)("div", { id: "textjam-root", className: `editor-shell --${themeDefault}`, children: [(0, jsx_runtime_1.jsx)(WebComponentProject_1.default, { nameEditable: projectNameEditable, sidebarOptions: sidebarOptions, packageApiUrl: packageApiUrl }), errorModalShowing && (0, jsx_runtime_1.jsx)(ErrorModal_1.default, {}), modal, shouldBlockNavigation && (0, jsx_runtime_1.jsx)(SaveBeforeLeave_1.SaveBeforeLeaveModal, {})] })] }) }));
     const renderFailedState = () => ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)("p", { children: t("webComponent.failed") }) }));
     const renderLoadingState = () => (0, jsx_runtime_1.jsx)(Loading_1.default, {});
     if (loading === types_1.LoadingState.SUCCESS) {
@@ -372656,20 +372642,6 @@ const useAuthActions = () => {
 exports.useAuthActions = useAuthActions;
 
 
-/***/ }),
-
-/***/ 2373:
-/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
-
-
-Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.useBeforeUnload = exports.BeforeUnloadContext = void 0;
-const react_1 = __webpack_require__(51649);
-exports.BeforeUnloadContext = (0, react_1.createContext)(null);
-const useBeforeUnload = () => (0, react_1.useContext)(exports.BeforeUnloadContext);
-exports.useBeforeUnload = useBeforeUnload;
-
-
 /***/ }),
 
 /***/ 59578:
@@ -373735,15 +373707,21 @@ const useProjectPersistence = ({ user, projectData, hasShownSavePrompt, saveProj
             components: cleanedComponents,
             identifier: projectData.identifier,
         };
+        const newLastSavedSnapshot = (0, buildProjectSnapshot_1.buildProjectSnapshot)(cleanedProject);
         const updatedProjectSnapshot = {
             components: cleanedComponents,
             hasStructureChanges: false,
-            lastSavedSnapshot: (0, buildProjectSnapshot_1.buildProjectSnapshot)(cleanedProject),
+            lastSavedSnapshot: newLastSavedSnapshot,
             identifier: projectData.identifier,
         };
         dispatch((0, EditorSlice_1.updateProjectSnapshot)(updatedProjectSnapshot));
+        upsertCacheValue(cleanedProject.identifier, {
+            ...cleanedProject,
+            lastSavedSnapshot: newLastSavedSnapshot,
+        });
     }, [
         deleteValueFromCache,
+        upsertCacheValue,
         dispatch,
         project,
         projectData?.identifier,
@@ -374919,6 +374897,7 @@ exports.IndexedDb = {
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.LeaveGuardController = void 0;
 const LeaveFlowSlice_1 = __webpack_require__(52990);
+const selectors_1 = __webpack_require__(43551);
 class LeaveGuardController {
     store;
     pendingPromise = null;
@@ -374928,12 +374907,11 @@ class LeaveGuardController {
         this.store = store;
     }
     canLeave = () => {
-        // TODO: activate when the check is implemented
-        // const state = this.store.getState();
-        // const isDirty = selectIsDirty(state);
-        // if (!isDirty) {
-        //   return Promise.resolve(true);
-        // }
+        const state = this.store.getState();
+        const isDirty = (0, selectors_1.selectProjectDirtyState)(state);
+        if (!isDirty) {
+            return Promise.resolve(true);
+        }
         if (this.pendingPromise) {
             return this.pendingPromise;
         }