molstar 3.26.0 → 3.28.0

package/lib/commonjs/extensions/meshes/mesh-streaming/transformers.js

@@ -0,0 +1,273 @@
+"use strict";
+/**
+ * Copyright (c) 2018-2022 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Adam Midlik <midlik@gmail.com>
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InitMeshStreaming = exports.MeshVisualTransformer = exports.MeshVisualGroupTransformer = exports.MeshStreamingTransformer = exports.MeshServerTransformer = exports.FOREROUND_OPACITY = exports.BACKGROUND_OPACITY = void 0;
+var tslib_1 = require("tslib");
+var mesh_1 = require("../../../mol-geo/geometry/mesh/mesh");
+var objects_1 = require("../../../mol-plugin-state/objects");
+var representation_1 = require("../../../mol-repr/shape/representation");
+var mol_state_1 = require("../../../mol-state");
+var mol_task_1 = require("../../../mol-task");
+var mol_util_1 = require("../../../mol-util");
+var param_definition_1 = require("../../../mol-util/param-definition");
+var mesh_extension_1 = require("../mesh-extension");
+var behavior_1 = require("./behavior");
+var server_info_1 = require("./server-info");
+exports.BACKGROUND_OPACITY = 0.2;
+exports.FOREROUND_OPACITY = 1;
+// // // // // // // // // // // // // // // // // // // // // // // //
+exports.MeshServerTransformer = (0, mesh_extension_1.VolsegTransform)({
+    name: 'mesh-server-info',
+    from: objects_1.PluginStateObject.Root,
+    to: server_info_1.MeshServerInfo,
+    params: server_info_1.MeshServerInfo.Params,
+})({
+    apply: function (_a, plugin) {
+        var a = _a.a, params = _a.params;
+        params.serverUrl = params.serverUrl.replace(/\/*$/, ''); // trim trailing slash
+        var description = params.entryId;
+        return new server_info_1.MeshServerInfo(tslib_1.__assign({}, params), { label: 'Mesh Server', description: description });
+    }
+});
+// // // // // // // // // // // // // // // // // // // // // // // //
+exports.MeshStreamingTransformer = (0, mesh_extension_1.VolsegTransform)({
+    name: 'mesh-streaming-from-server-info',
+    display: { name: 'Mesh Streaming' },
+    from: server_info_1.MeshServerInfo,
+    to: behavior_1.MeshStreaming,
+    params: function (a) { return behavior_1.MeshStreaming.Params.create(a.data); },
+})({
+    canAutoUpdate: function () { return true; },
+    apply: function (_a, plugin) {
+        var _this = this;
+        var a = _a.a, params = _a.params;
+        return mol_task_1.Task.create('Mesh Streaming', function (ctx) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
+            var behavior;
+            return tslib_1.__generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        behavior = new behavior_1.MeshStreaming.Behavior(plugin, a.data, params);
+                        return [4 /*yield*/, behavior.update(params)];
+                    case 1:
+                        _a.sent();
+                        return [2 /*return*/, new behavior_1.MeshStreaming(behavior, { label: 'Mesh Streaming', description: behavior.getDescription() })];
+                }
+            });
+        }); });
+    },
+    update: function (_a) {
+        var _this = this;
+        var a = _a.a, b = _a.b, oldParams = _a.oldParams, newParams = _a.newParams;
+        return mol_task_1.Task.create('Update Mesh Streaming', function (ctx) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
+            return tslib_1.__generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        if (a.data.source !== b.data.parentData.source || a.data.entryId !== b.data.parentData.entryId) {
+                            return [2 /*return*/, mol_state_1.StateTransformer.UpdateResult.Recreate];
+                        }
+                        b.data.parentData = a.data;
+                        return [4 /*yield*/, b.data.update(newParams)];
+                    case 1:
+                        _a.sent();
+                        b.description = b.data.getDescription();
+                        return [2 /*return*/, mol_state_1.StateTransformer.UpdateResult.Updated];
+                }
+            });
+        }); });
+    }
+});
+// export type MeshVisualGroupTransformer = typeof MeshVisualGroupTransformer;
+exports.MeshVisualGroupTransformer = (0, mesh_extension_1.VolsegTransform)({
+    name: 'mesh-visual-group-from-streaming',
+    display: { name: 'Mesh Visuals for a Segment' },
+    from: behavior_1.MeshStreaming,
+    to: objects_1.PluginStateObject.Group,
+    params: {
+        /** Shown on the node in GUI */
+        label: param_definition_1.ParamDefinition.Text('', { isHidden: true }),
+        /** Shown on the node in GUI (gray letters) */
+        description: param_definition_1.ParamDefinition.Text(''),
+        segmentId: param_definition_1.ParamDefinition.Numeric(behavior_1.NO_SEGMENT, {}, { isHidden: true }),
+        opacity: param_definition_1.ParamDefinition.Numeric(-1, { min: 0, max: 1, step: 0.01 }),
+    }
+})({
+    apply: function (_a, plugin) {
+        var a = _a.a, params = _a.params;
+        trySetAutoOpacity(params, a);
+        return new objects_1.PluginStateObject.Group({ opacity: params.opacity }, params);
+    },
+    update: function (_a, plugin) {
+        var a = _a.a, b = _a.b, oldParams = _a.oldParams, newParams = _a.newParams;
+        if ((0, mol_util_1.shallowEqualObjects)(oldParams, newParams)) {
+            return mol_state_1.StateTransformer.UpdateResult.Unchanged;
+        }
+        newParams.label || (newParams.label = oldParams.label); // Protect against resetting params to invalid defaults
+        if (newParams.segmentId === behavior_1.NO_SEGMENT)
+            newParams.segmentId = oldParams.segmentId; // Protect against resetting params to invalid defaults
+        trySetAutoOpacity(newParams, a);
+        b.label = newParams.label;
+        b.description = newParams.description;
+        b.data.opacity = newParams.opacity;
+        return mol_state_1.StateTransformer.UpdateResult.Updated;
+    },
+    canAutoUpdate: function (_a, plugin) {
+        var oldParams = _a.oldParams, newParams = _a.newParams;
+        return newParams.description === oldParams.description;
+    },
+});
+function trySetAutoOpacity(params, parent) {
+    if (params.opacity === -1) {
+        var isBgSegment = parent.data.backgroundSegments[params.segmentId];
+        if (isBgSegment !== undefined) {
+            params.opacity = isBgSegment ? exports.BACKGROUND_OPACITY : exports.FOREROUND_OPACITY;
+        }
+    }
+}
+// // // // // // // // // // // // // // // // // // // // // // // //
+exports.MeshVisualTransformer = (0, mesh_extension_1.VolsegTransform)({
+    name: 'mesh-visual-from-streaming',
+    display: { name: 'Mesh Visual from Streaming' },
+    from: behavior_1.MeshStreaming,
+    to: objects_1.PluginStateObject.Shape.Representation3D,
+    params: {
+        /** Must be set to PluginStateObject reference to self */
+        ref: param_definition_1.ParamDefinition.Text('', { isHidden: true, isEssential: true }),
+        /** Identification of the mesh visual, e.g. 'low-2' */
+        tag: param_definition_1.ParamDefinition.Text('', { isHidden: true, isEssential: true }),
+        /** Opacity of the visual (not to be set directly, but controlled by the opacity of the parent Group, and by VisualInfo.visible) */
+        opacity: param_definition_1.ParamDefinition.Numeric(-1, { min: 0, max: 1, step: 0.01 }, { isHidden: true }),
+    }
+})({
+    apply: function (_a, plugin) {
+        var _this = this;
+        var a = _a.a, params = _a.params, spine = _a.spine;
+        return mol_task_1.Task.create('Mesh Visual', function (ctx) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
+            var visualInfo, groupData, props, repr;
+            var _a, _b, _c;
+            return tslib_1.__generator(this, function (_d) {
+                switch (_d.label) {
+                    case 0:
+                        visualInfo = a.data.visuals[params.tag];
+                        if (!visualInfo)
+                            throw new Error("VisualInfo with tag '".concat(params.tag, "' is missing."));
+                        groupData = (_a = spine.getAncestorOfType(objects_1.PluginStateObject.Group)) === null || _a === void 0 ? void 0 : _a.data;
+                        params.opacity = visualInfo.visible ? ((_b = groupData === null || groupData === void 0 ? void 0 : groupData.opacity) !== null && _b !== void 0 ? _b : exports.FOREROUND_OPACITY) : 0.0;
+                        props = param_definition_1.ParamDefinition.getDefaultValues(mesh_1.Mesh.Params);
+                        props.flatShaded = true; // `flatShaded: true` is to see the real mesh vertices and triangles (default: false)
+                        props.alpha = params.opacity;
+                        repr = (0, representation_1.ShapeRepresentation)(function (ctx, meshlist) { return mesh_extension_1.MeshlistData.getShape(meshlist, visualInfo.color); }, mesh_1.Mesh.Utils);
+                        return [4 /*yield*/, repr.createOrUpdate(props, (_c = visualInfo.data) !== null && _c !== void 0 ? _c : mesh_extension_1.MeshlistData.empty()).runInContext(ctx)];
+                    case 1:
+                        _d.sent();
+                        return [2 /*return*/, new objects_1.PluginStateObject.Shape.Representation3D({ repr: repr, sourceData: visualInfo.data }, { label: 'Mesh Visual', description: params.tag })];
+                }
+            });
+        }); });
+    },
+    update: function (_a, plugin) {
+        var _this = this;
+        var a = _a.a, b = _a.b, oldParams = _a.oldParams, newParams = _a.newParams, spine = _a.spine;
+        return mol_task_1.Task.create('Update Mesh Visual', function (ctx) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
+            var visualInfo, oldData, groupData, newOpacity;
+            var _a, _b, _c;
+            return tslib_1.__generator(this, function (_d) {
+                switch (_d.label) {
+                    case 0:
+                        newParams.ref || (newParams.ref = oldParams.ref); // Protect against resetting params to invalid defaults
+                        newParams.tag || (newParams.tag = oldParams.tag); // Protect against resetting params to invalid defaults
+                        visualInfo = a.data.visuals[newParams.tag];
+                        if (!visualInfo)
+                            throw new Error("VisualInfo with tag '".concat(newParams.tag, "' is missing."));
+                        oldData = b.data.sourceData;
+                        if (((_a = visualInfo.data) === null || _a === void 0 ? void 0 : _a.detail) !== (oldData === null || oldData === void 0 ? void 0 : oldData.detail)) {
+                            return [2 /*return*/, mol_state_1.StateTransformer.UpdateResult.Recreate];
+                        }
+                        groupData = (_b = spine.getAncestorOfType(objects_1.PluginStateObject.Group)) === null || _b === void 0 ? void 0 : _b.data;
+                        newOpacity = visualInfo.visible ? ((_c = groupData === null || groupData === void 0 ? void 0 : groupData.opacity) !== null && _c !== void 0 ? _c : exports.FOREROUND_OPACITY) : 0.0;
+                        if (!(newOpacity !== oldParams.opacity)) return [3 /*break*/, 2];
+                        newParams.opacity = newOpacity;
+                        return [4 /*yield*/, b.data.repr.createOrUpdate({ alpha: newParams.opacity }).runInContext(ctx)];
+                    case 1:
+                        _d.sent();
+                        return [2 /*return*/, mol_state_1.StateTransformer.UpdateResult.Updated];
+                    case 2: return [2 /*return*/, mol_state_1.StateTransformer.UpdateResult.Unchanged];
+                }
+            });
+        }); });
+    },
+    canAutoUpdate: function (params, globalCtx) {
+        return true;
+    },
+    dispose: function (_a, plugin) {
+        var b = _a.b, params = _a.params;
+        b === null || b === void 0 ? void 0 : b.data.repr.destroy(); // QUESTION is this correct?
+    },
+});
+// // // // // // // // // // // // // // // // // // // // // // // //
+exports.InitMeshStreaming = mol_state_1.StateAction.build({
+    display: { name: 'Mesh Streaming' },
+    from: objects_1.PluginStateObject.Root,
+    params: server_info_1.MeshServerInfo.Params,
+    isApplicable: function (a, _, plugin) { return true; }
+})(function (p, plugin) {
+    var _this = this;
+    return mol_task_1.Task.create('Mesh Streaming', function (ctx) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
+        var params, serverNode, streamingNode, visuals, bgSegments, segmentGroups, _a, _b, _c, _i, tag, segid, description, group, visualsUpdate, tag, ref, segid;
+        var _d, _e, _f, _g;
+        return tslib_1.__generator(this, function (_h) {
+            switch (_h.label) {
+                case 0:
+                    params = p.params;
+                    return [4 /*yield*/, plugin.build().to(p.ref).apply(exports.MeshServerTransformer, params).commit()];
+                case 1:
+                    serverNode = _h.sent();
+                    return [4 /*yield*/, plugin.build().to(serverNode).apply(exports.MeshStreamingTransformer, {}).commit()];
+                case 2:
+                    streamingNode = _h.sent();
+                    visuals = (_e = (_d = streamingNode.data) === null || _d === void 0 ? void 0 : _d.visuals) !== null && _e !== void 0 ? _e : {};
+                    bgSegments = (_g = (_f = streamingNode.data) === null || _f === void 0 ? void 0 : _f.backgroundSegments) !== null && _g !== void 0 ? _g : {};
+                    segmentGroups = {};
+                    _a = visuals;
+                    _b = [];
+                    for (_c in _a)
+                        _b.push(_c);
+                    _i = 0;
+                    _h.label = 3;
+                case 3:
+                    if (!(_i < _b.length)) return [3 /*break*/, 6];
+                    _c = _b[_i];
+                    if (!(_c in _a)) return [3 /*break*/, 5];
+                    tag = _c;
+                    segid = visuals[tag].segmentId;
+                    if (!!segmentGroups[segid]) return [3 /*break*/, 5];
+                    description = visuals[tag].segmentName;
+                    if (bgSegments[segid])
+                        description += ' (background)';
+                    return [4 /*yield*/, plugin.build().to(streamingNode).apply(exports.MeshVisualGroupTransformer, { label: "Segment ".concat(segid), description: description, segmentId: segid }, { state: { isCollapsed: true } }).commit()];
+                case 4:
+                    group = _h.sent();
+                    segmentGroups[segid] = group.ref;
+                    _h.label = 5;
+                case 5:
+                    _i++;
+                    return [3 /*break*/, 3];
+                case 6:
+                    visualsUpdate = plugin.build();
+                    for (tag in visuals) {
+                        ref = "".concat(streamingNode.ref, "-").concat(tag);
+                        segid = visuals[tag].segmentId;
+                        visualsUpdate.to(segmentGroups[segid]).apply(exports.MeshVisualTransformer, { ref: ref, tag: tag }, { ref: ref }); // ref - hack to allow the node make itself invisible
+                    }
+                    return [4 /*yield*/, plugin.state.data.updateTree(visualsUpdate).runInContext(ctx)];
+                case 7:
+                    _h.sent(); // QUESTION what is really the difference between this and `visualsUpdate.commit()`?
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+});
+// TODO make available in GUI, in left panel or in right panel like Volume Streaming in src/mol-plugin-ui/structure/volume.tsx?

package/lib/commonjs/extensions/meshes/mesh-utils.d.ts

@@ -0,0 +1,41 @@
+/**
+ * Copyright (c) 2018-2022 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Adam Midlik <midlik@gmail.com>
+ */
+/** Helper functions for manipulation with mesh data. */
+import { Mesh } from '../../mol-geo/geometry/mesh/mesh';
+import { CifFile } from '../../mol-io/reader/cif';
+import { Box3D } from '../../mol-math/geometry';
+import { Mat4 } from '../../mol-math/linear-algebra';
+type MeshModificationParams = {
+    scale?: [number, number, number];
+    shift?: [number, number, number];
+    matrix?: Mat4;
+    group?: number;
+    invertSides?: boolean;
+};
+/** Modify mesh in-place */
+export declare function modify(m: Mesh, params: MeshModificationParams): void;
+/** Create a copy a mesh, possibly modified */
+export declare function copy(m: Mesh, modification?: MeshModificationParams): Mesh;
+/** Join more meshes into one */
+export declare function concat(...meshes: Mesh[]): Mesh;
+/** Return Mesh from CIF data and mesh IDs (group IDs).
+ * Assume the CIF contains coords in grid space,
+ * transform the output mesh to `space` */
+export declare function meshFromCif(data: CifFile, invertSides?: boolean | undefined, outSpace?: 'grid' | 'fractional' | 'cartesian'): Promise<{
+    mesh: Mesh;
+    meshIds: number[];
+}>;
+/** Return bounding box */
+export declare function bbox(mesh: Mesh): Box3D | null;
+/** Example mesh - 1 triangle */
+export declare function fakeFakeMesh1(): Mesh;
+/** Example mesh - irregular tetrahedron */
+export declare function fakeMesh4(): Mesh;
+/** Return a box-shaped mesh */
+export declare function meshFromBox(box: [[number, number, number], [number, number, number]], group?: number): Mesh;
+/** Generate random colors (in a cycle) */
+export declare const ColorGenerator: Generator<import("../../mol-util/color").Color, never, unknown>;
+export {};

package/lib/commonjs/extensions/meshes/mesh-utils.js

@@ -0,0 +1,357 @@
+"use strict";
+/**
+ * Copyright (c) 2018-2022 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Adam Midlik <midlik@gmail.com>
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ColorGenerator = exports.meshFromBox = exports.fakeMesh4 = exports.fakeFakeMesh1 = exports.bbox = exports.meshFromCif = exports.concat = exports.copy = exports.modify = void 0;
+var tslib_1 = require("tslib");
+/** Helper functions for manipulation with mesh data. */
+var mesh_1 = require("../../mol-geo/geometry/mesh/mesh");
+var cif_1 = require("../../mol-io/reader/cif");
+var geometry_1 = require("../../mol-math/geometry");
+var linear_algebra_1 = require("../../mol-math/linear-algebra");
+var density_server_1 = require("../../mol-model-formats/volume/density-server");
+var volume_1 = require("../../mol-model/volume");
+var names_1 = require("../../mol-util/color/names");
+var mesh_cif_schema_1 = require("./mesh-cif-schema");
+/** Modify mesh in-place */
+function modify(m, params) {
+    if (params.scale !== undefined) {
+        var _a = params.scale, qx = _a[0], qy = _a[1], qz = _a[2];
+        var vertices = m.vertexBuffer.ref.value;
+        for (var i = 0; i < vertices.length; i += 3) {
+            vertices[i] *= qx;
+            vertices[i + 1] *= qy;
+            vertices[i + 2] *= qz;
+        }
+    }
+    if (params.shift !== undefined) {
+        var _b = params.shift, dx = _b[0], dy = _b[1], dz = _b[2];
+        var vertices = m.vertexBuffer.ref.value;
+        for (var i = 0; i < vertices.length; i += 3) {
+            vertices[i] += dx;
+            vertices[i + 1] += dy;
+            vertices[i + 2] += dz;
+        }
+    }
+    if (params.matrix !== undefined) {
+        var r = m.vertexBuffer.ref.value;
+        var matrix = params.matrix;
+        var size = 3 * m.vertexCount;
+        for (var i = 0; i < size; i += 3) {
+            linear_algebra_1.Vec3.transformMat4Offset(r, r, matrix, i, i, 0);
+        }
+    }
+    if (params.group !== undefined) {
+        var groups = m.groupBuffer.ref.value;
+        for (var i = 0; i < groups.length; i++) {
+            groups[i] = params.group;
+        }
+    }
+    if (params.invertSides) {
+        var indices = m.indexBuffer.ref.value;
+        var tmp = void 0;
+        for (var i = 0; i < indices.length; i += 3) {
+            tmp = indices[i];
+            indices[i] = indices[i + 1];
+            indices[i + 1] = tmp;
+        }
+        var normals = m.normalBuffer.ref.value;
+        for (var i = 0; i < normals.length; i++) {
+            normals[i] *= -1;
+        }
+    }
+}
+exports.modify = modify;
+/** Create a copy a mesh, possibly modified */
+function copy(m, modification) {
+    var nVertices = m.vertexCount;
+    var nTriangles = m.triangleCount;
+    var vertices = new Float32Array(m.vertexBuffer.ref.value);
+    var indices = new Uint32Array(m.indexBuffer.ref.value);
+    var normals = new Float32Array(m.normalBuffer.ref.value);
+    var groups = new Float32Array(m.groupBuffer.ref.value);
+    var result = mesh_1.Mesh.create(vertices, indices, normals, groups, nVertices, nTriangles);
+    if (modification) {
+        modify(result, modification);
+    }
+    return result;
+}
+exports.copy = copy;
+/** Join more meshes into one */
+function concat() {
+    var meshes = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        meshes[_i] = arguments[_i];
+    }
+    var nVertices = sum(meshes.map(function (m) { return m.vertexCount; }));
+    var nTriangles = sum(meshes.map(function (m) { return m.triangleCount; }));
+    var vertices = concatArrays(Float32Array, meshes.map(function (m) { return m.vertexBuffer.ref.value; }));
+    var normals = concatArrays(Float32Array, meshes.map(function (m) { return m.normalBuffer.ref.value; }));
+    var groups = concatArrays(Float32Array, meshes.map(function (m) { return m.groupBuffer.ref.value; }));
+    var newIndices = [];
+    var offset = 0;
+    for (var _a = 0, meshes_1 = meshes; _a < meshes_1.length; _a++) {
+        var m = meshes_1[_a];
+        newIndices.push(m.indexBuffer.ref.value.map(function (i) { return i + offset; }));
+        offset += m.vertexCount;
+    }
+    var indices = concatArrays(Uint32Array, newIndices);
+    return mesh_1.Mesh.create(vertices, indices, normals, groups, nVertices, nTriangles);
+}
+exports.concat = concat;
+/** Return Mesh from CIF data and mesh IDs (group IDs).
+ * Assume the CIF contains coords in grid space,
+ * transform the output mesh to `space` */
+function meshFromCif(data, invertSides, outSpace) {
+    if (invertSides === void 0) { invertSides = undefined; }
+    if (outSpace === void 0) { outSpace = 'cartesian'; }
+    return tslib_1.__awaiter(this, void 0, void 0, function () {
+        var volumeInfoBlock, meshesBlock, volumeInfoCif, meshCif, nVertices, nTriangles, mesh_id, vertex_meshId, x, y, z, triangle_meshId, triangle_vertexId, indices, offsets, i, offset, vertices, normals, groups, mesh, volume, gridToCartesian, gridSize, originFract, dimensionFract, scale;
+        return tslib_1.__generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    volumeInfoBlock = data.blocks.find(function (b) { return b.header === 'VOLUME_INFO'; });
+                    meshesBlock = data.blocks.find(function (b) { return b.header === 'MESHES'; });
+                    if (!volumeInfoBlock || !meshesBlock)
+                        throw new Error('Missing VOLUME_INFO or MESHES block in mesh CIF file');
+                    volumeInfoCif = cif_1.CIF.schema.densityServer(volumeInfoBlock);
+                    meshCif = (0, mesh_cif_schema_1.CIF_schema_mesh)(meshesBlock);
+                    nVertices = meshCif.mesh_vertex._rowCount;
+                    nTriangles = Math.floor(meshCif.mesh_triangle._rowCount / 3);
+                    mesh_id = meshCif.mesh.id.toArray();
+                    vertex_meshId = meshCif.mesh_vertex.mesh_id.toArray();
+                    x = meshCif.mesh_vertex.x.toArray();
+                    y = meshCif.mesh_vertex.y.toArray();
+                    z = meshCif.mesh_vertex.z.toArray();
+                    triangle_meshId = meshCif.mesh_triangle.mesh_id.toArray();
+                    triangle_vertexId = meshCif.mesh_triangle.vertex_id.toArray();
+                    indices = new Uint32Array(3 * nTriangles);
+                    offsets = offsetMap(vertex_meshId);
+                    for (i = 0; i < 3 * nTriangles; i++) {
+                        offset = offsets.get(triangle_meshId[i]);
+                        indices[i] = offset + triangle_vertexId[i];
+                    }
+                    vertices = flattenCoords(x, y, z);
+                    normals = new Float32Array(3 * nVertices);
+                    groups = new Float32Array(vertex_meshId);
+                    mesh = mesh_1.Mesh.create(vertices, indices, normals, groups, nVertices, nTriangles);
+                    invertSides !== null && invertSides !== void 0 ? invertSides : (invertSides = isInverted(mesh));
+                    if (invertSides) {
+                        modify(mesh, { invertSides: true }); // Vertex orientation convention is opposite in Volseg API and in MolStar
+                    }
+                    if (!(outSpace === 'cartesian')) return [3 /*break*/, 2];
+                    return [4 /*yield*/, (0, density_server_1.volumeFromDensityServerData)(volumeInfoCif).run()];
+                case 1:
+                    volume = _a.sent();
+                    gridToCartesian = volume_1.Grid.getGridToCartesianTransform(volume.grid);
+                    modify(mesh, { matrix: gridToCartesian });
+                    return [3 /*break*/, 3];
+                case 2:
+                    if (outSpace === 'fractional') {
+                        gridSize = volumeInfoCif.volume_data_3d_info.sample_count.value(0);
+                        originFract = volumeInfoCif.volume_data_3d_info.origin.value(0);
+                        dimensionFract = volumeInfoCif.volume_data_3d_info.dimensions.value(0);
+                        if (dimensionFract[0] !== 1 || dimensionFract[1] !== 1 || dimensionFract[2] !== 1)
+                            throw new Error("Asserted the fractional dimensions are [1,1,1], but are actually [".concat(dimensionFract, "]"));
+                        scale = [1 / gridSize[0], 1 / gridSize[1], 1 / gridSize[2]];
+                        modify(mesh, { scale: scale, shift: Array.from(originFract) });
+                    }
+                    _a.label = 3;
+                case 3:
+                    mesh_1.Mesh.computeNormals(mesh); // normals only necessary if flatShaded==false
+                    // const boxMesh = makeMeshFromBox([[0,0,0], [1,1,1]], 1);
+                    // const gridSize = volumeInfoCif.volume_data_3d_info.sample_count.value(0); const boxMesh = makeMeshFromBox([[0,0,0], Array.from(gridSize)] as any, 1);
+                    // const cellSize = volumeInfoCif.volume_data_3d_info.spacegroup_cell_size.value(0); const boxMesh = makeMeshFromBox([[0, 0, 0], Array.from(cellSize)] as any, 1);
+                    // mesh = concat(mesh, boxMesh);  // debug
+                    return [2 /*return*/, { mesh: mesh, meshIds: Array.from(mesh_id) }];
+            }
+        });
+    });
+}
+exports.meshFromCif = meshFromCif;
+function isInverted(mesh) {
+    var vertices = mesh.vertexBuffer.ref.value;
+    var indices = mesh.indexBuffer.ref.value;
+    var center = meshCenter(mesh);
+    var center3 = linear_algebra_1.Vec3.create(3 * center[0], 3 * center[1], 3 * center[2]);
+    var dirMetric = 0.0;
+    var _a = [(0, linear_algebra_1.Vec3)(), (0, linear_algebra_1.Vec3)(), (0, linear_algebra_1.Vec3)(), (0, linear_algebra_1.Vec3)(), (0, linear_algebra_1.Vec3)(), (0, linear_algebra_1.Vec3)(), (0, linear_algebra_1.Vec3)()], a = _a[0], b = _a[1], c = _a[2], u = _a[3], v = _a[4], normal = _a[5], radius = _a[6];
+    for (var i = 0; i < indices.length; i += 3) {
+        linear_algebra_1.Vec3.fromArray(a, vertices, 3 * indices[i]);
+        linear_algebra_1.Vec3.fromArray(b, vertices, 3 * indices[i + 1]);
+        linear_algebra_1.Vec3.fromArray(c, vertices, 3 * indices[i + 2]);
+        linear_algebra_1.Vec3.sub(u, b, a);
+        linear_algebra_1.Vec3.sub(v, c, b);
+        linear_algebra_1.Vec3.cross(normal, u, v); // direction of the surface
+        linear_algebra_1.Vec3.add(radius, a, b);
+        linear_algebra_1.Vec3.add(radius, radius, c);
+        linear_algebra_1.Vec3.sub(radius, radius, center3); // direction center -> this triangle
+        dirMetric += linear_algebra_1.Vec3.dot(radius, normal);
+    }
+    return dirMetric < 0;
+}
+function meshCenter(mesh) {
+    var vertices = mesh.vertexBuffer.ref.value;
+    var n = vertices.length;
+    var x = 0.0;
+    var y = 0.0;
+    var z = 0.0;
+    for (var i = 0; i < vertices.length; i += 3) {
+        x += vertices[i];
+        y += vertices[i + 1];
+        z += vertices[i + 2];
+    }
+    return linear_algebra_1.Vec3.create(x / n, y / n, z / n);
+}
+function flattenCoords(x, y, z) {
+    var n = x.length;
+    var out = new Float32Array(3 * n);
+    for (var i = 0; i < n; i++) {
+        out[3 * i] = x[i];
+        out[3 * i + 1] = y[i];
+        out[3 * i + 2] = z[i];
+    }
+    return out;
+}
+/** Get mapping of unique values to the position of their first occurrence */
+function offsetMap(values) {
+    var result = new Map();
+    for (var i = 0; i < values.length; i++) {
+        if (!result.has(values[i])) {
+            result.set(values[i], i);
+        }
+    }
+    return result;
+}
+/** Return bounding box */
+function bbox(mesh) {
+    var nVertices = mesh.vertexCount;
+    var coords = mesh.vertexBuffer.ref.value;
+    if (nVertices === 0) {
+        return null;
+    }
+    var minX = coords[0], minY = coords[1], minZ = coords[2];
+    var maxX = minX, maxY = minY, maxZ = minZ;
+    for (var i = 0; i < 3 * nVertices; i += 3) {
+        var x = coords[i], y = coords[i + 1], z = coords[i + 2];
+        if (x < minX)
+            minX = x;
+        if (y < minY)
+            minY = y;
+        if (z < minZ)
+            minZ = z;
+        if (x > maxX)
+            maxX = x;
+        if (y > maxY)
+            maxY = y;
+        if (z > maxZ)
+            maxZ = z;
+    }
+    return geometry_1.Box3D.create(linear_algebra_1.Vec3.create(minX, minY, minZ), linear_algebra_1.Vec3.create(maxX, maxY, maxZ));
+}
+exports.bbox = bbox;
+/** Example mesh - 1 triangle */
+function fakeFakeMesh1() {
+    var nVertices = 3;
+    var nTriangles = 1;
+    var vertices = new Float32Array([0, 0, 0, 1, 0, 0, 0, 1, 0]);
+    var indices = new Uint32Array([0, 1, 2]);
+    var normals = new Float32Array([0, 0, 1]);
+    var groups = new Float32Array([0]);
+    return mesh_1.Mesh.create(vertices, indices, normals, groups, nVertices, nTriangles);
+}
+exports.fakeFakeMesh1 = fakeFakeMesh1;
+/** Example mesh - irregular tetrahedron */
+function fakeMesh4() {
+    var nVertices = 4;
+    var nTriangles = 4;
+    var vertices = new Float32Array([0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1]);
+    var indices = new Uint32Array([0, 2, 1, 0, 1, 3, 1, 2, 3, 2, 0, 3]);
+    var normals = new Float32Array([-1, -1, -1, 1, 0, 0, 0, 1, 0, 0, 0, 1]);
+    var groups = new Float32Array([0, 1, 2, 3]);
+    return mesh_1.Mesh.create(vertices, indices, normals, groups, nVertices, nTriangles);
+}
+exports.fakeMesh4 = fakeMesh4;
+/** Return a box-shaped mesh */
+function meshFromBox(box, group) {
+    if (group === void 0) { group = 0; }
+    var _a = box[0], x0 = _a[0], y0 = _a[1], z0 = _a[2], _b = box[1], x1 = _b[0], y1 = _b[1], z1 = _b[2];
+    var vertices = new Float32Array([
+        x0, y0, z0,
+        x1, y0, z0,
+        x0, y1, z0,
+        x1, y1, z0,
+        x0, y0, z1,
+        x1, y0, z1,
+        x0, y1, z1,
+        x1, y1, z1,
+    ]);
+    var indices = new Uint32Array([
+        2, 1, 0, 1, 2, 3,
+        1, 4, 0, 4, 1, 5,
+        3, 5, 1, 5, 3, 7,
+        2, 7, 3, 7, 2, 6,
+        0, 6, 2, 6, 0, 4,
+        4, 7, 6, 7, 4, 5,
+    ]);
+    var groups = new Float32Array([group, group, group, group, group, group, group, group]);
+    var normals = new Float32Array(8);
+    var mesh = mesh_1.Mesh.create(vertices, indices, normals, groups, 8, 12);
+    mesh_1.Mesh.computeNormals(mesh); // normals only necessary if flatShaded==false
+    return mesh;
+}
+exports.meshFromBox = meshFromBox;
+function sum(array) {
+    return array.reduce(function (a, b) { return a + b; }, 0);
+}
+function concatArrays(t, arrays) {
+    var totalLength = arrays.map(function (a) { return a.length; }).reduce(function (a, b) { return a + b; }, 0);
+    var result = new t(totalLength);
+    var offset = 0;
+    for (var _i = 0, arrays_1 = arrays; _i < arrays_1.length; _i++) {
+        var array = arrays_1[_i];
+        result.set(array, offset);
+        offset += array.length;
+    }
+    return result;
+}
+/** Generate random colors (in a cycle) */
+exports.ColorGenerator = function () {
+    var colors, i;
+    return tslib_1.__generator(this, function (_a) {
+        switch (_a.label) {
+            case 0:
+                colors = shuffleArray(Object.values(names_1.ColorNames));
+                i = 0;
+                _a.label = 1;
+            case 1:
+                if (!true) return [3 /*break*/, 3];
+                return [4 /*yield*/, colors[i]];
+            case 2:
+                _a.sent();
+                i++;
+                if (i >= colors.length)
+                    i = 0;
+                return [3 /*break*/, 1];
+            case 3: return [2 /*return*/];
+        }
+    });
+}();
+function shuffleArray(array) {
+    // Stealed from https://www.w3docs.com/snippets/javascript/how-to-randomize-shuffle-a-javascript-array.html
+    var curId = array.length;
+    // There remain elements to shuffle
+    while (0 !== curId) {
+        // Pick a remaining element
+        var randId = Math.floor(Math.random() * curId);
+        curId -= 1;
+        // Swap it with the current element.
+        var tmp = array[curId];
+        array[curId] = array[randId];
+        array[randId] = tmp;
+    }
+    return array;
+}