gwchq-textjam 0.1.14 → 0.1.15

package/dist/index.js

@@ -59993,7 +59993,7 @@ var OutputViewToggle = () => {
 // EXTERNAL MODULE: ./src/components/RunButton/RunnerControls.jsx + 4 modules
 var RunnerControls = __webpack_require__(15590);
 ;// ./src/assets/editor/pyodide/shims/pygal.js?url
-const pygalurl_namespaceObject = __webpack_require__.p + "assets/pygalc0b4f32d2d2cc5a0c638.js";
+const pygalurl_namespaceObject = __webpack_require__.p + "assets/pygalef3b78a56cb1d66beb61.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
@@ -60008,7 +60008,7 @@ const py_enigma_0_1_py3_none_anyurl_namespaceObject = __webpack_require__.p + "a
 
 
 ;// ./src/PyodideWorker.js?url
-const PyodideWorkerurl_namespaceObject = __webpack_require__.p + "assets/PyodideWorker543e2f3f6cecfe86e905.js";
+const PyodideWorkerurl_namespaceObject = __webpack_require__.p + "assets/PyodideWorker04ce34b6863d1f341e6a.js";
 ;// ./src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideRunner.jsx
 
 /* eslint-disable react-hooks/exhaustive-deps */
@@ -70155,115 +70155,6 @@ 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:
@@ -85092,6 +84983,115 @@ 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:
@@ -101542,6 +101542,324 @@ 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:
@@ -103515,324 +103833,6 @@ 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:
@@ -202065,6 +202065,595 @@ 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:
@@ -203773,595 +204362,6 @@ 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:
@@ -220551,6 +220551,993 @@ 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:
@@ -224481,993 +225468,6 @@ 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:
@@ -320691,49 +320691,49 @@ function HtmlRunner() {
             const body = indexPage.querySelector("body") || indexPage;
             // insert script to disable access to specific localStorage keys
             // localstorage.getItem() is a potential security risk when executing untrusted code
-            const 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 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>
     `;
             body.insertAdjacentHTML("afterbegin", disableLocalStorageScript);
             replaceHrefNodes(indexPage, projectCode);
@@ -320801,18 +320801,15 @@ const plus_circle_svg_1 = __importDefault(__webpack_require__(45494));
 const minus_circle_svg_1 = __importDefault(__webpack_require__(71720));
 const add_folder_svg_1 = __importDefault(__webpack_require__(3503));
 const add_file_svg_1 = __importDefault(__webpack_require__(41625));
-const upload_file_svg_1 = __importDefault(__webpack_require__(98201));
+const ImportButton_1 = __webpack_require__(67532);
 const classnames_1 = __importDefault(__webpack_require__(46942));
 const styles_module_scss_1 = __importDefault(__webpack_require__(79473));
-const SvgIcon_1 = __webpack_require__(82917);
 const react_1 = __webpack_require__(51649);
 const FileTreeContext_1 = __webpack_require__(5323);
 const ProjectTypes_1 = __webpack_require__(27130);
 const FileTreeActions = ({ hasExpandedNodes, }) => {
-    const { expandAll, collapseAll, createComponent } = (0, react_1.useContext)(FileTreeContext_1.TreeContext);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.fileTreeActions, children: [hasExpandedNodes ? ((0, jsx_runtime_1.jsx)("button", { type: "button", "aria-label": "Collapse all folders", onClick: collapseAll, className: styles_module_scss_1.default.iconButton, children: (0, jsx_runtime_1.jsx)(minus_circle_svg_1.default, { "aria-hidden": "true", focusable: "false" }) })) : ((0, jsx_runtime_1.jsx)("button", { type: "button", "aria-label": "Expand all folders", onClick: expandAll, className: styles_module_scss_1.default.iconButton, children: (0, jsx_runtime_1.jsx)(plus_circle_svg_1.default, { "aria-hidden": "true", focusable: "false" }) })), (0, jsx_runtime_1.jsx)("p", { className: styles_module_scss_1.default.label, children: "Project files" }), (0, jsx_runtime_1.jsx)("button", { type: "button", "aria-label": "Add folder", onClick: () => createComponent(ProjectTypes_1.ProjectComponentType.DIR), className: (0, classnames_1.default)([styles_module_scss_1.default.iconButtonFilled, styles_module_scss_1.default.iconButton]), children: (0, jsx_runtime_1.jsx)(add_folder_svg_1.default, { "aria-hidden": "true", focusable: "false" }) }), (0, jsx_runtime_1.jsx)("button", { type: "button", "aria-label": "Add file", onClick: () => createComponent(ProjectTypes_1.ProjectComponentType.FILE), className: (0, classnames_1.default)([styles_module_scss_1.default.iconButtonFilled, styles_module_scss_1.default.iconButton]), children: (0, jsx_runtime_1.jsx)(add_file_svg_1.default, { "aria-hidden": "true", focusable: "false" }) }), (0, jsx_runtime_1.jsx)("button", { type: "button", "aria-label": "Upload file", onClick: () => {
-                    console.log("Upload file clicked");
-                }, className: (0, classnames_1.default)([styles_module_scss_1.default.iconButtonFilled, styles_module_scss_1.default.iconButton]), children: (0, jsx_runtime_1.jsx)(SvgIcon_1.SvgIcon, { SvgElement: upload_file_svg_1.default, size: 16, "aria-hidden": "true", focusable: "false" }) })] }));
+    const { expandAll, collapseAll, createComponent, importFiles } = (0, react_1.useContext)(FileTreeContext_1.TreeContext);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.fileTreeActions, children: [hasExpandedNodes ? ((0, jsx_runtime_1.jsx)("button", { type: "button", "aria-label": "Collapse all folders", onClick: collapseAll, className: styles_module_scss_1.default.iconButton, children: (0, jsx_runtime_1.jsx)(minus_circle_svg_1.default, { "aria-hidden": "true", focusable: "false" }) })) : ((0, jsx_runtime_1.jsx)("button", { type: "button", "aria-label": "Expand all folders", onClick: expandAll, className: styles_module_scss_1.default.iconButton, children: (0, jsx_runtime_1.jsx)(plus_circle_svg_1.default, { "aria-hidden": "true", focusable: "false" }) })), (0, jsx_runtime_1.jsx)("p", { className: styles_module_scss_1.default.label, children: "Project files" }), (0, jsx_runtime_1.jsx)("button", { type: "button", "aria-label": "Add folder", onClick: () => createComponent(ProjectTypes_1.ProjectComponentType.DIR), className: (0, classnames_1.default)([styles_module_scss_1.default.iconButtonFilled, styles_module_scss_1.default.iconButton]), children: (0, jsx_runtime_1.jsx)(add_folder_svg_1.default, { "aria-hidden": "true", focusable: "false" }) }), (0, jsx_runtime_1.jsx)("button", { type: "button", "aria-label": "Add file", onClick: () => createComponent(ProjectTypes_1.ProjectComponentType.FILE), className: (0, classnames_1.default)([styles_module_scss_1.default.iconButtonFilled, styles_module_scss_1.default.iconButton]), children: (0, jsx_runtime_1.jsx)(add_file_svg_1.default, { "aria-hidden": "true", focusable: "false" }) }), (0, jsx_runtime_1.jsx)(ImportButton_1.ImportButton, { importFiles: importFiles })] }));
 };
 exports.FileTreeActions = FileTreeActions;
 
@@ -320912,6 +320909,37 @@ const FileTreeItem = ({ item, guides, activeLevel, }) => {
 exports.FileTreeItem = FileTreeItem;
 
 
+/***/ }),
+
+/***/ 67532:
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.ImportButton = void 0;
+const jsx_runtime_1 = __webpack_require__(74848);
+const react_1 = __webpack_require__(51649);
+const classnames_1 = __importDefault(__webpack_require__(46942));
+const upload_file_svg_1 = __importDefault(__webpack_require__(98201));
+const SvgIcon_1 = __webpack_require__(82917);
+const styles_module_scss_1 = __importDefault(__webpack_require__(79473));
+const ImportButton = ({ importFiles, }) => {
+    const inputRef = (0, react_1.useRef)(null);
+    const onChange = (e) => {
+        const files = e.target.files;
+        if (!files || files.length === 0)
+            return;
+        importFiles(Array.from(files));
+        e.currentTarget.value = "";
+    };
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("input", { ref: inputRef, type: "file", hidden: true, multiple: true, onChange: onChange }), (0, jsx_runtime_1.jsx)("button", { type: "button", "aria-label": "Upload file", onClick: () => inputRef.current?.click(), className: (0, classnames_1.default)([styles_module_scss_1.default.iconButtonFilled, styles_module_scss_1.default.iconButton]), children: (0, jsx_runtime_1.jsx)(SvgIcon_1.SvgIcon, { SvgElement: upload_file_svg_1.default, size: 18, "aria-hidden": "true", focusable: "false" }) })] }));
+};
+exports.ImportButton = ImportButton;
+
+
 /***/ }),
 
 /***/ 5323:
@@ -320931,7 +320959,7 @@ exports.TreeContext = (0, react_1.createContext)({});
 
 
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.parseFileName = void 0;
+exports.getUniqueNameFromItem = exports.parseFileName = void 0;
 const parseFileName = (fileName) => {
     // Find the last dot in the filename, ignoring a leading dot (for hidden files)
     const lastDotIndex = fileName.lastIndexOf(".");
@@ -320947,6 +320975,18 @@ const parseFileName = (fileName) => {
     }
 };
 exports.parseFileName = parseFileName;
+const getUniqueNameFromItem = (folderItem, baseName, extension = "") => {
+    const existingNames = folderItem.getChildren()?.map(child => child.getItemName()) ?? [];
+    const fullName = (name) => `${name}${extension ? "." + extension : ""}`;
+    let name = baseName;
+    let counter = 1;
+    while (existingNames.includes(fullName(name))) {
+        name = `${baseName} (${counter})`;
+        counter++;
+    }
+    return name;
+};
+exports.getUniqueNameFromItem = getUniqueNameFromItem;
 
 
 /***/ }),
@@ -321190,6 +321230,7 @@ const useFileTreeActions = () => {
             ...selectedFolderData,
             children: [...(selectedFolderData.children ?? []), newComponent.id],
         }));
+        tree.rebuildTree();
         // Start renaming the new node after it is added to the tree
         setTimeout(() => {
             tree.getItemInstance(newComponent.id)?.startRenaming();
@@ -321203,11 +321244,46 @@ const useFileTreeActions = () => {
             tree.rebuildTree();
         }
     }, [dispatch, tree]);
+    const importFiles = (0, react_1.useCallback)(async (files) => {
+        let nearestFolder = tree.getFocusedItem();
+        while (!nearestFolder.isFolder()) {
+            const parent = nearestFolder.getParent();
+            if (!parent)
+                return;
+            nearestFolder = parent;
+        }
+        nearestFolder.expand();
+        const folderData = nearestFolder.getItemData();
+        const newIds = [];
+        const filesToCreate = await Promise.all(files.map(async (file) => {
+            const { name, extension } = (0, helpers_1.parseFileName)(file.name);
+            const uniqueName = (0, helpers_1.getUniqueNameFromItem)(nearestFolder, name, extension);
+            const content = await file.text();
+            const id = crypto.randomUUID();
+            newIds.push(id);
+            return {
+                id,
+                name: uniqueName,
+                extension,
+                content,
+                type: ProjectTypes_1.ProjectComponentType.FILE,
+            };
+        }));
+        for (const file of filesToCreate) {
+            dispatch((0, EditorSlice_1.addProjectComponent)(file));
+        }
+        dispatch((0, EditorSlice_1.updateProjectComponent)({
+            ...folderData,
+            children: [...(folderData.children ?? []), ...newIds],
+        }));
+        tree.rebuildTree();
+    }, [dispatch, tree, projectFiles]);
     return {
         createComponent,
         cancelRenaming,
         tree,
         completeRenaming: tree.completeRenaming,
+        importFiles,
         ...restTreeProps,
     };
 };
@@ -321238,7 +321314,7 @@ const FileTree = () => {
     const projectFiles = (0, stores_1.useAppSelector)((state) => state.editor.project.components);
     const focussedFileIndex = (0, stores_1.useAppSelector)((state) => state.editor.focussedFileIndices)[0];
     const openFiles = (0, stores_1.useAppSelector)((state) => state.editor.openFiles)[0];
-    const { createComponent, cancelRenaming, focusedItem, setFocusedItem, tree, completeRenaming, } = (0, useFileTreeActions_1.useFileTreeActions)();
+    const { createComponent, cancelRenaming, focusedItem, setFocusedItem, tree, completeRenaming, importFiles, } = (0, useFileTreeActions_1.useFileTreeActions)();
     const treeItems = tree
         .getItems()
         .filter((item) => projectFiles.some((f) => f.id === item.getId()));
@@ -321266,7 +321342,8 @@ const FileTree = () => {
         completeRenaming,
         collapseAll: tree.collapseAll,
         expandAll: tree.expandAll,
-    }), [createComponent, cancelRenaming, completeRenaming, tree]);
+        importFiles,
+    }), [createComponent, cancelRenaming, completeRenaming, tree, importFiles]);
     return ((0, jsx_runtime_1.jsxs)(FileTreeContext_1.TreeContext.Provider, { value: treeCtx, children: [(0, jsx_runtime_1.jsx)(FileTreeActions_1.FileTreeActions, { hasExpandedNodes: Boolean(tree.getState().expandedItems.length) }), (0, jsx_runtime_1.jsxs)("div", { ...tree.getContainerProps(), className: styles_module_scss_1.default.tree, children: [treeItems.map((item, i) => ((0, jsx_runtime_1.jsx)(FileTreeItem_1.FileTreeItem, { item: item, guides: guidesByIndex[i], activeLevel: activeLevel }, item.getId()))), (0, jsx_runtime_1.jsx)("div", { style: tree.getDragLineStyle(), className: styles_module_scss_1.default.dragline })] })] }));
 };
 exports.FileTree = FileTree;