molstar 3.26.0 → 3.28.0

package/lib/extensions/volumes-and-segmentations/transformers.js

@@ -0,0 +1,82 @@
+/**
+ * Copyright (c) 2018-2022 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Adam Midlik <midlik@gmail.com>
+ */
+import { __awaiter, __generator } from "tslib";
+import { PluginStateObject, PluginStateTransform } from '../../mol-plugin-state/objects';
+import { StateTransformer } from '../../mol-state';
+import { Task } from '../../mol-task';
+import { VolsegEntry, VolsegEntryData, createVolsegEntryParams } from './entry-root';
+import { VolsegState, VolsegStateParams, VOLSEG_STATE_FROM_ENTRY_TRANSFORMER_NAME } from './entry-state';
+import { VolsegGlobalState, VolsegGlobalStateData, VolsegGlobalStateParams } from './global-state';
+export var VolsegEntryFromRoot = PluginStateTransform.BuiltIn({
+    name: 'volseg-entry-from-root',
+    display: { name: 'Vol & Seg Entry', description: 'Vol & Seg Entry' },
+    from: PluginStateObject.Root,
+    to: VolsegEntry,
+    params: function (a, plugin) { return createVolsegEntryParams(plugin); },
+})({
+    apply: function (_a, plugin) {
+        var _this = this;
+        var a = _a.a, params = _a.params;
+        return Task.create('Load Vol & Seg Entry', function () { return __awaiter(_this, void 0, void 0, function () {
+            var data;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, VolsegEntryData.create(plugin, params)];
+                    case 1:
+                        data = _a.sent();
+                        return [2 /*return*/, new VolsegEntry(data, { label: data.entryId, description: 'Vol & Seg Entry' })];
+                }
+            });
+        }); });
+    },
+    update: function (_a) {
+        var b = _a.b, oldParams = _a.oldParams, newParams = _a.newParams;
+        Object.assign(newParams, oldParams);
+        console.error('Changing params of existing VolsegEntry node is not allowed');
+        return StateTransformer.UpdateResult.Unchanged;
+    }
+});
+export var VolsegStateFromEntry = PluginStateTransform.BuiltIn({
+    name: VOLSEG_STATE_FROM_ENTRY_TRANSFORMER_NAME,
+    display: { name: 'Vol & Seg Entry State', description: 'Vol & Seg Entry State' },
+    from: VolsegEntry,
+    to: VolsegState,
+    params: VolsegStateParams,
+})({
+    apply: function (_a, plugin) {
+        var _this = this;
+        var a = _a.a, params = _a.params;
+        return Task.create('Create Vol & Seg Entry State', function () { return __awaiter(_this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                return [2 /*return*/, new VolsegState(params, { label: 'State' })];
+            });
+        }); });
+    }
+});
+export var VolsegGlobalStateFromRoot = PluginStateTransform.BuiltIn({
+    name: 'volseg-global-state-from-root',
+    display: { name: 'Vol & Seg Global State', description: 'Vol & Seg Global State' },
+    from: PluginStateObject.Root,
+    to: VolsegGlobalState,
+    params: VolsegGlobalStateParams,
+})({
+    apply: function (_a, plugin) {
+        var _this = this;
+        var a = _a.a, params = _a.params;
+        return Task.create('Create Vol & Seg Global State', function () { return __awaiter(_this, void 0, void 0, function () {
+            var data;
+            return __generator(this, function (_a) {
+                data = new VolsegGlobalStateData(plugin, params);
+                return [2 /*return*/, new VolsegGlobalState(data, { label: 'Global State', description: 'Vol & Seg Global State' })];
+            });
+        }); });
+    },
+    update: function (_a) {
+        var b = _a.b, oldParams = _a.oldParams, newParams = _a.newParams;
+        b.data.currentState.next(newParams);
+        return StateTransformer.UpdateResult.Updated;
+    }
+});

package/lib/extensions/volumes-and-segmentations/ui.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) 2018-2022 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Adam Midlik <midlik@gmail.com>
+ */
+/// <reference types="react" />
+import { CollapsableControls, CollapsableState } from '../../mol-plugin-ui/base';
+import { VolsegEntry } from './entry-root';
+import { VolsegGlobalStateData } from './global-state';
+interface VolsegUIData {
+    globalState?: VolsegGlobalStateData;
+    availableNodes: VolsegEntry[];
+    activeNode?: VolsegEntry;
+}
+declare namespace VolsegUIData {
+    function changeAvailableNodes(data: VolsegUIData, newNodes: VolsegEntry[]): VolsegUIData;
+    function changeActiveNode(data: VolsegUIData, newActiveRef: string): VolsegUIData;
+    function equals(data1: VolsegUIData, data2: VolsegUIData): boolean;
+}
+export declare class VolsegUI extends CollapsableControls<{}, {
+    data: VolsegUIData;
+}> {
+    protected defaultState(): CollapsableState & {
+        data: VolsegUIData;
+    };
+    protected renderControls(): JSX.Element | null;
+    componentDidMount(): void;
+}
+export {};

package/lib/extensions/volumes-and-segmentations/ui.js

@@ -0,0 +1,229 @@
+import { __assign, __awaiter, __extends, __generator, __rest } from "tslib";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Copyright (c) 2018-2022 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Adam Midlik <midlik@gmail.com>
+ */
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { CollapsableControls } from '../../mol-plugin-ui/base';
+import { Button, ControlRow, ExpandGroup, IconButton } from '../../mol-plugin-ui/controls/common';
+import * as Icons from '../../mol-plugin-ui/controls/icons';
+import { ParameterControls } from '../../mol-plugin-ui/controls/parameters';
+import { Slider } from '../../mol-plugin-ui/controls/slider';
+import { useBehavior } from '../../mol-plugin-ui/hooks/use-behavior';
+import { UpdateTransformControl } from '../../mol-plugin-ui/state/update-transform';
+import { shallowEqualArrays } from '../../mol-util';
+import { ParamDefinition as PD } from '../../mol-util/param-definition';
+import { sleep } from '../../mol-util/sleep';
+import { VolsegEntry } from './entry-root';
+import { SimpleVolumeParams } from './entry-volume';
+import { VolsegGlobalState, VolsegGlobalStateParams } from './global-state';
+import { isDefined } from './helpers';
+var VolsegUIData;
+(function (VolsegUIData) {
+    function changeAvailableNodes(data, newNodes) {
+        var _a;
+        var newActiveNode = newNodes.length > data.availableNodes.length ?
+            newNodes[newNodes.length - 1]
+            : (_a = newNodes.find(function (node) { var _a; return node.data.ref === ((_a = data.activeNode) === null || _a === void 0 ? void 0 : _a.data.ref); })) !== null && _a !== void 0 ? _a : newNodes[0];
+        return __assign(__assign({}, data), { availableNodes: newNodes, activeNode: newActiveNode });
+    }
+    VolsegUIData.changeAvailableNodes = changeAvailableNodes;
+    function changeActiveNode(data, newActiveRef) {
+        var _a;
+        var newActiveNode = (_a = data.availableNodes.find(function (node) { return node.data.ref === newActiveRef; })) !== null && _a !== void 0 ? _a : data.availableNodes[0];
+        return __assign(__assign({}, data), { availableNodes: data.availableNodes, activeNode: newActiveNode });
+    }
+    VolsegUIData.changeActiveNode = changeActiveNode;
+    function equals(data1, data2) {
+        return shallowEqualArrays(data1.availableNodes, data2.availableNodes) && data1.activeNode === data2.activeNode && data1.globalState === data2.globalState;
+    }
+    VolsegUIData.equals = equals;
+})(VolsegUIData || (VolsegUIData = {}));
+var VolsegUI = /** @class */ (function (_super) {
+    __extends(VolsegUI, _super);
+    function VolsegUI() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    VolsegUI.prototype.defaultState = function () {
+        return {
+            header: 'Volume & Segmentation',
+            isCollapsed: true,
+            brand: { accent: 'orange', svg: Icons.ExtensionSvg },
+            data: {
+                globalState: undefined,
+                availableNodes: [],
+                activeNode: undefined,
+            }
+        };
+    };
+    VolsegUI.prototype.renderControls = function () {
+        var _this = this;
+        return _jsx(VolsegControls, { plugin: this.plugin, data: this.state.data, setData: function (d) { return _this.setState({ data: d }); } });
+    };
+    VolsegUI.prototype.componentDidMount = function () {
+        var _this = this;
+        this.setState({ isHidden: true, isCollapsed: false });
+        this.subscribe(this.plugin.state.data.events.changed, function (e) {
+            var _a, _b, _c;
+            var nodes = e.state.selectQ(function (q) { return q.ofType(VolsegEntry); }).map(function (cell) { return cell === null || cell === void 0 ? void 0 : cell.obj; }).filter(isDefined);
+            var isHidden = nodes.length === 0;
+            var newData = VolsegUIData.changeAvailableNodes(_this.state.data, nodes);
+            if (!((_a = _this.state.data.globalState) === null || _a === void 0 ? void 0 : _a.isRegistered())) {
+                var globalState = (_c = (_b = e.state.selectQ(function (q) { return q.ofType(VolsegGlobalState); })[0]) === null || _b === void 0 ? void 0 : _b.obj) === null || _c === void 0 ? void 0 : _c.data;
+                if (globalState)
+                    newData.globalState = globalState;
+            }
+            if (!VolsegUIData.equals(_this.state.data, newData) || _this.state.isHidden !== isHidden) {
+                _this.setState({ data: newData, isHidden: isHidden });
+            }
+        });
+    };
+    return VolsegUI;
+}(CollapsableControls));
+export { VolsegUI };
+function VolsegControls(_a) {
+    var _this = this;
+    var _b;
+    var plugin = _a.plugin, data = _a.data, setData = _a.setData;
+    var entryData = (_b = data.activeNode) === null || _b === void 0 ? void 0 : _b.data;
+    if (!entryData) {
+        return _jsx("p", { children: "No data!" });
+    }
+    if (!data.globalState) {
+        return _jsx("p", { children: "No global state!" });
+    }
+    var params = {
+        /** Reference to the active VolsegEntry node */
+        entry: PD.Select(data.activeNode.data.ref, data.availableNodes.map(function (entry) { return [entry.data.ref, entry.data.entryId]; }))
+    };
+    var values = {
+        entry: data.activeNode.data.ref,
+    };
+    var globalState = useBehavior(data.globalState.currentState);
+    return _jsxs(_Fragment, { children: [_jsx(ParameterControls, { params: params, values: values, onChangeValues: function (next) { return setData(VolsegUIData.changeActiveNode(data, next.entry)); } }), _jsx(ExpandGroup, __assign({ header: 'Global options' }, { children: _jsx(WaitingParameterControls, { params: VolsegGlobalStateParams, values: globalState, onChangeValues: function (next) { return __awaiter(_this, void 0, void 0, function () { var _a; return __generator(this, function (_b) {
+                        switch (_b.label) {
+                            case 0: return [4 /*yield*/, ((_a = data.globalState) === null || _a === void 0 ? void 0 : _a.updateState(plugin, next))];
+                            case 1: return [2 /*return*/, _b.sent()];
+                        }
+                    }); }); } }) })), _jsx(VolsegEntryControls, { entryData: entryData }, entryData.ref)] });
+}
+function VolsegEntryControls(_a) {
+    var _this = this;
+    var _b, _c, _d;
+    var entryData = _a.entryData;
+    var state = useBehavior(entryData.currentState);
+    var allSegments = entryData.metadata.allSegments;
+    var selectedSegment = entryData.metadata.getSegment(state.selectedSegment);
+    var visibleSegments = state.visibleSegments.map(function (seg) { return seg.segmentId; });
+    var visibleModels = state.visibleModels.map(function (model) { return model.pdbId; });
+    var allPdbs = entryData.pdbs;
+    return _jsxs(_Fragment, { children: [_jsx("div", __assign({ style: { fontWeight: 'bold', padding: 8, paddingTop: 6, paddingBottom: 4, overflow: 'hidden' } }, { children: (_c = (_b = entryData.metadata.raw.annotation) === null || _b === void 0 ? void 0 : _b.name) !== null && _c !== void 0 ? _c : 'Unnamed Annotation' })), allPdbs.length > 0 && _jsx(ExpandGroup, __assign({ header: 'Fitted models in PDB', initiallyExpanded: true }, { children: allPdbs.map(function (pdb) {
+                    return _jsx(WaitingButton, __assign({ onClick: function () { return entryData.actionShowFittedModel(visibleModels.includes(pdb) ? [] : [pdb]); }, style: { fontWeight: visibleModels.includes(pdb) ? 'bold' : undefined, textAlign: 'left', marginTop: 1 } }, { children: pdb }), pdb);
+                }) })), _jsx(VolumeControls, { entryData: entryData }), _jsxs(ExpandGroup, __assign({ header: 'Segmentation data', initiallyExpanded: true }, { children: [_jsx(ControlRow, { label: 'Opacity', control: _jsx(WaitingSlider, { min: 0, max: 1, value: state.segmentOpacity, step: 0.05, onChange: function (v) { return __awaiter(_this, void 0, void 0, function () { return __generator(this, function (_a) {
+                                switch (_a.label) {
+                                    case 0: return [4 /*yield*/, entryData.actionSetOpacity(v)];
+                                    case 1: return [2 /*return*/, _a.sent()];
+                                }
+                            }); }); } }) }), allSegments.length > 0 && _jsxs(_Fragment, { children: [_jsx(WaitingButton, __assign({ onClick: function () { return __awaiter(_this, void 0, void 0, function () { return __generator(this, function (_a) {
+                                    switch (_a.label) {
+                                        case 0: return [4 /*yield*/, sleep(20)];
+                                        case 1:
+                                            _a.sent();
+                                            return [4 /*yield*/, entryData.actionToggleAllSegments()];
+                                        case 2:
+                                            _a.sent();
+                                            return [2 /*return*/];
+                                    }
+                                }); }); }, style: { marginTop: 1 } }, { children: "Toggle All segments" })), _jsx("div", __assign({ style: { maxHeight: 200, overflow: 'hidden', overflowY: 'auto', marginBlock: 1 } }, { children: allSegments.map(function (segment) {
+                                    var _a, _b;
+                                    return _jsxs("div", __assign({ style: { display: 'flex', marginBottom: 1 }, onMouseEnter: function () { return entryData.actionHighlightSegment(segment); }, onMouseLeave: function () { return entryData.actionHighlightSegment(); } }, { children: [_jsx(Button, __assign({ onClick: function () { return entryData.actionSelectSegment(segment !== selectedSegment ? segment.id : undefined); }, style: { fontWeight: segment.id === (selectedSegment === null || selectedSegment === void 0 ? void 0 : selectedSegment.id) ? 'bold' : undefined, marginRight: 1, flexGrow: 1, textAlign: 'left' } }, { children: _jsxs("div", __assign({ title: (_a = segment.biological_annotation.name) !== null && _a !== void 0 ? _a : 'Unnamed segment', style: { maxWidth: 240, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' } }, { children: [(_b = segment.biological_annotation.name) !== null && _b !== void 0 ? _b : 'Unnamed segment', " (", segment.id, ")"] })) })), _jsx(IconButton, { svg: visibleSegments.includes(segment.id) ? Icons.VisibilityOutlinedSvg : Icons.VisibilityOffOutlinedSvg, onClick: function () { return entryData.actionToggleSegment(segment.id); } })] }), segment.id);
+                                }) }))] })] })), _jsx(ExpandGroup, __assign({ header: 'Selected segment annotation', initiallyExpanded: true }, { children: _jsxs("div", __assign({ style: { paddingTop: 4, paddingRight: 8, maxHeight: 300, overflow: 'hidden', overflowY: 'auto' } }, { children: [!selectedSegment && 'No segment selected', selectedSegment && _jsxs("b", { children: ["Segment ", selectedSegment.id, ":", _jsx("br", {}), (_d = selectedSegment.biological_annotation.name) !== null && _d !== void 0 ? _d : 'Unnamed segment'] }), selectedSegment === null || selectedSegment === void 0 ? void 0 : selectedSegment.biological_annotation.external_references.map(function (ref) {
+                            return _jsxs("p", __assign({ style: { marginTop: 4 } }, { children: [_jsxs("small", { children: [ref.resource, ":", ref.accession] }), _jsx("br", {}), _jsx("b", { children: capitalize(ref.label) }), _jsx("br", {}), ref.description] }), ref.id);
+                        })] })) }))] });
+}
+function VolumeControls(_a) {
+    var _this = this;
+    var _b, _c;
+    var entryData = _a.entryData;
+    var vol = useBehavior(entryData.currentVolume);
+    if (!vol)
+        return null;
+    var volumeValues = {
+        volumeType: vol.state.isHidden ? 'off' : (_b = vol.params) === null || _b === void 0 ? void 0 : _b.type.name,
+        opacity: (_c = vol.params) === null || _c === void 0 ? void 0 : _c.type.params.alpha,
+    };
+    return _jsxs(ExpandGroup, __assign({ header: 'Volume data', initiallyExpanded: true }, { children: [_jsx(WaitingParameterControls, { params: SimpleVolumeParams, values: volumeValues, onChangeValues: function (next) { return __awaiter(_this, void 0, void 0, function () { return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, sleep(20)];
+                        case 1:
+                            _a.sent();
+                            return [4 /*yield*/, entryData.actionUpdateVolumeVisual(next)];
+                        case 2:
+                            _a.sent();
+                            return [2 /*return*/];
+                    }
+                }); }); } }), _jsx(ExpandGroup, __assign({ header: 'Detailed Volume Params', headerStyle: { marginTop: 1 } }, { children: _jsx(UpdateTransformControl, { state: entryData.plugin.state.data, transform: vol, customHeader: 'none' }) }))] }));
+}
+function WaitingSlider(_a) {
+    var value = _a.value, onChange = _a.onChange, etc = __rest(_a, ["value", "onChange"]);
+    var _b = useAsyncChange(value), changing = _b[0], sliderValue = _b[1], execute = _b[2];
+    return _jsx(Slider, __assign({ value: sliderValue, disabled: changing, onChange: function (newValue) { return execute(onChange, newValue); } }, etc));
+}
+function WaitingButton(_a) {
+    var onClick = _a.onClick, etc = __rest(_a, ["onClick"]);
+    var _b = useAsyncChange(undefined), changing = _b[0], _ = _b[1], execute = _b[2];
+    return _jsx(Button, __assign({ disabled: changing, onClick: function () { return execute(onClick, undefined); } }, etc, { children: etc.children }));
+}
+function WaitingParameterControls(_a) {
+    var values = _a.values, onChangeValues = _a.onChangeValues, etc = __rest(_a, ["values", "onChangeValues"]);
+    var _b = useAsyncChange(values), changing = _b[0], currentValues = _b[1], execute = _b[2];
+    return _jsx(ParameterControls, __assign({ isDisabled: changing, values: currentValues, onChangeValues: function (newValue) { return execute(onChangeValues, newValue); } }, etc));
+}
+function capitalize(text) {
+    var first = text.charAt(0);
+    var rest = text.slice(1);
+    return first.toUpperCase() + rest;
+}
+function useAsyncChange(initialValue) {
+    var _this = this;
+    var _a = useState(false), isExecuting = _a[0], setIsExecuting = _a[1];
+    var _b = useState(initialValue), value = _b[0], setValue = _b[1];
+    var isMounted = useRef(false);
+    useEffect(function () { return setValue(initialValue); }, [initialValue]);
+    useEffect(function () {
+        isMounted.current = true;
+        return function () { isMounted.current = false; };
+    }, []);
+    var execute = useCallback(function (func, val) { return __awaiter(_this, void 0, void 0, function () {
+        var err_1;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    setIsExecuting(true);
+                    setValue(val);
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, 3, 4, 5]);
+                    return [4 /*yield*/, func(val)];
+                case 2:
+                    _a.sent();
+                    return [3 /*break*/, 5];
+                case 3:
+                    err_1 = _a.sent();
+                    if (isMounted.current) {
+                        setValue(initialValue);
+                    }
+                    throw err_1;
+                case 4:
+                    if (isMounted.current) {
+                        setIsExecuting(false);
+                    }
+                    return [7 /*endfinally*/];
+                case 5: return [2 /*return*/];
+            }
+        });
+    }); }, []);
+    return [isExecuting, value, execute];
+}

package/lib/extensions/volumes-and-segmentations/volseg-api/api.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) 2018-2022 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Adam Midlik <midlik@gmail.com>
+ */
+import { type Metadata } from './data';
+export declare const DEFAULT_VOLSEG_SERVER = "https://molstarvolseg.ncbr.muni.cz/v2";
+export declare class VolumeApiV2 {
+    volumeServerUrl: string;
+    constructor(volumeServerUrl?: string);
+    entryListUrl(maxEntries: number, keyword?: string): string;
+    metadataUrl(source: string, entryId: string): string;
+    volumeUrl(source: string, entryId: string, box: [[number, number, number], [number, number, number]] | null, maxPoints: number): string;
+    latticeUrl(source: string, entryId: string, segmentation: number, box: [[number, number, number], [number, number, number]] | null, maxPoints: number): string;
+    meshUrl_Json(source: string, entryId: string, segment: number, detailLevel: number): string;
+    meshUrl_Bcif(source: string, entryId: string, segment: number, detailLevel: number): string;
+    volumeInfoUrl(source: string, entryId: string): string;
+    getEntryList(maxEntries: number, keyword?: string): Promise<{
+        [source: string]: string[];
+    }>;
+    getMetadata(source: string, entryId: string): Promise<Metadata>;
+}

package/lib/extensions/volumes-and-segmentations/volseg-api/api.js

@@ -0,0 +1,80 @@
+/**
+ * Copyright (c) 2018-2022 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Adam Midlik <midlik@gmail.com>
+ */
+import { __awaiter, __generator } from "tslib";
+export var DEFAULT_VOLSEG_SERVER = 'https://molstarvolseg.ncbr.muni.cz/v2';
+var VolumeApiV2 = /** @class */ (function () {
+    function VolumeApiV2(volumeServerUrl) {
+        if (volumeServerUrl === void 0) { volumeServerUrl = DEFAULT_VOLSEG_SERVER; }
+        this.volumeServerUrl = volumeServerUrl.replace(/\/$/, ''); // trim trailing slash
+    }
+    VolumeApiV2.prototype.entryListUrl = function (maxEntries, keyword) {
+        return "".concat(this.volumeServerUrl, "/list_entries/").concat(maxEntries, "/").concat(keyword !== null && keyword !== void 0 ? keyword : '');
+    };
+    VolumeApiV2.prototype.metadataUrl = function (source, entryId) {
+        return "".concat(this.volumeServerUrl, "/").concat(source, "/").concat(entryId, "/metadata");
+    };
+    VolumeApiV2.prototype.volumeUrl = function (source, entryId, box, maxPoints) {
+        if (box) {
+            var _a = box[0], a1 = _a[0], a2 = _a[1], a3 = _a[2], _b = box[1], b1 = _b[0], b2 = _b[1], b3 = _b[2];
+            return "".concat(this.volumeServerUrl, "/").concat(source, "/").concat(entryId, "/volume/box/").concat(a1, "/").concat(a2, "/").concat(a3, "/").concat(b1, "/").concat(b2, "/").concat(b3, "?max_points=").concat(maxPoints);
+        }
+        else {
+            return "".concat(this.volumeServerUrl, "/").concat(source, "/").concat(entryId, "/volume/cell?max_points=").concat(maxPoints);
+        }
+    };
+    VolumeApiV2.prototype.latticeUrl = function (source, entryId, segmentation, box, maxPoints) {
+        if (box) {
+            var _a = box[0], a1 = _a[0], a2 = _a[1], a3 = _a[2], _b = box[1], b1 = _b[0], b2 = _b[1], b3 = _b[2];
+            return "".concat(this.volumeServerUrl, "/").concat(source, "/").concat(entryId, "/segmentation/box/").concat(segmentation, "/").concat(a1, "/").concat(a2, "/").concat(a3, "/").concat(b1, "/").concat(b2, "/").concat(b3, "?max_points=").concat(maxPoints);
+        }
+        else {
+            return "".concat(this.volumeServerUrl, "/").concat(source, "/").concat(entryId, "/segmentation/cell/").concat(segmentation, "?max_points=").concat(maxPoints);
+        }
+    };
+    VolumeApiV2.prototype.meshUrl_Json = function (source, entryId, segment, detailLevel) {
+        return "".concat(this.volumeServerUrl, "/").concat(source, "/").concat(entryId, "/mesh/").concat(segment, "/").concat(detailLevel);
+    };
+    VolumeApiV2.prototype.meshUrl_Bcif = function (source, entryId, segment, detailLevel) {
+        return "".concat(this.volumeServerUrl, "/").concat(source, "/").concat(entryId, "/mesh_bcif/").concat(segment, "/").concat(detailLevel);
+    };
+    VolumeApiV2.prototype.volumeInfoUrl = function (source, entryId) {
+        return "".concat(this.volumeServerUrl, "/").concat(source, "/").concat(entryId, "/volume_info");
+    };
+    VolumeApiV2.prototype.getEntryList = function (maxEntries, keyword) {
+        return __awaiter(this, void 0, void 0, function () {
+            var response;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, fetch(this.entryListUrl(maxEntries, keyword))];
+                    case 1:
+                        response = _a.sent();
+                        return [4 /*yield*/, response.json()];
+                    case 2: return [2 /*return*/, _a.sent()];
+                }
+            });
+        });
+    };
+    VolumeApiV2.prototype.getMetadata = function (source, entryId) {
+        return __awaiter(this, void 0, void 0, function () {
+            var url, response;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        url = this.metadataUrl(source, entryId);
+                        return [4 /*yield*/, fetch(url)];
+                    case 1:
+                        response = _a.sent();
+                        if (!response.ok)
+                            throw new Error("Failed to fetch metadata from ".concat(url));
+                        return [4 /*yield*/, response.json()];
+                    case 2: return [2 /*return*/, _a.sent()];
+                }
+            });
+        });
+    };
+    return VolumeApiV2;
+}());
+export { VolumeApiV2 };

package/lib/extensions/volumes-and-segmentations/volseg-api/data.d.ts

@@ -0,0 +1,92 @@
+/**
+ * Copyright (c) 2018-2022 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Adam Midlik <midlik@gmail.com>
+ */
+export interface Metadata {
+    grid: {
+        general: {
+            details: string;
+            source_db_name: string;
+            source_db_id: string;
+        };
+        volumes: Volumes;
+        segmentation_lattices: SegmentationLattices;
+        segmentation_meshes: SegmentationMeshes;
+    };
+    annotation: Annotation | null;
+}
+export interface Volumes {
+    volume_downsamplings: number[];
+    voxel_size: {
+        [downsampling: number]: Vector3;
+    };
+    origin: Vector3;
+    grid_dimensions: Vector3;
+    sampled_grid_dimensions: {
+        [downsampling: number]: Vector3;
+    };
+    mean: {
+        [downsampling: number]: number;
+    };
+    std: {
+        [downsampling: number]: number;
+    };
+    min: {
+        [downsampling: number]: number;
+    };
+    max: {
+        [downsampling: number]: number;
+    };
+    volume_force_dtype: string;
+}
+export interface SegmentationLattices {
+    segmentation_lattice_ids: number[];
+    segmentation_downsamplings: {
+        [lattice: number]: number[];
+    };
+}
+export interface SegmentationMeshes {
+    mesh_component_numbers: {
+        segment_ids?: {
+            [segId: number]: {
+                detail_lvls: {
+                    [detail: number]: {
+                        mesh_ids: {
+                            [meshId: number]: {
+                                num_triangles: number;
+                                num_vertices: number;
+                            };
+                        };
+                    };
+                };
+            };
+        };
+    };
+    detail_lvl_to_fraction: {
+        [lvl: number]: number;
+    };
+}
+export interface Annotation {
+    name: string;
+    details: string;
+    segment_list: Segment[];
+}
+export interface Segment {
+    id: number;
+    colour: number[];
+    biological_annotation: BiologicalAnnotation;
+}
+export interface BiologicalAnnotation {
+    name: string;
+    external_references: ExternalReference[];
+}
+export interface ExternalReference {
+    id: number;
+    resource: string;
+    accession: string;
+    label: string;
+    description: string;
+}
+type Vector3 = [number, number, number];
+export {};

package/lib/extensions/volumes-and-segmentations/volseg-api/data.js

@@ -0,0 +1,6 @@
+/**
+ * Copyright (c) 2018-2022 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Adam Midlik <midlik@gmail.com>
+ */
+export {};

package/lib/extensions/volumes-and-segmentations/volseg-api/utils.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) 2018-2022 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Adam Midlik <midlik@gmail.com>
+ */
+import { Metadata, Segment } from './data';
+export declare class MetadataWrapper {
+    raw: Metadata;
+    private segmentMap?;
+    constructor(rawMetadata: Metadata);
+    get allSegments(): Segment[];
+    get allSegmentIds(): number[];
+    getSegment(segmentId: number): Segment | undefined;
+    /** Get the list of detail levels available for the given mesh segment. */
+    getMeshDetailLevels(segmentId: number): number[];
+    /** Get the worst available detail level that is not worse than preferredDetail.
+     * If preferredDetail is null, get the worst detail level overall.
+     * (worse = greater number) */
+    getSufficientMeshDetail(segmentId: number, preferredDetail: number | null): number;
+    /** IDs of all segments available as meshes */
+    get meshSegmentIds(): number[];
+    get gridTotalVolume(): number;
+}

package/lib/extensions/volumes-and-segmentations/volseg-api/utils.js

@@ -0,0 +1,75 @@
+/**
+ * Copyright (c) 2018-2022 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Adam Midlik <midlik@gmail.com>
+ */
+var MetadataWrapper = /** @class */ (function () {
+    function MetadataWrapper(rawMetadata) {
+        this.raw = rawMetadata;
+    }
+    Object.defineProperty(MetadataWrapper.prototype, "allSegments", {
+        get: function () {
+            var _a, _b;
+            return (_b = (_a = this.raw.annotation) === null || _a === void 0 ? void 0 : _a.segment_list) !== null && _b !== void 0 ? _b : [];
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(MetadataWrapper.prototype, "allSegmentIds", {
+        get: function () {
+            return this.allSegments.map(function (segment) { return segment.id; });
+        },
+        enumerable: false,
+        configurable: true
+    });
+    MetadataWrapper.prototype.getSegment = function (segmentId) {
+        if (!this.segmentMap) {
+            this.segmentMap = {};
+            for (var _i = 0, _a = this.allSegments; _i < _a.length; _i++) {
+                var segment = _a[_i];
+                this.segmentMap[segment.id] = segment;
+            }
+        }
+        return this.segmentMap[segmentId];
+    };
+    /** Get the list of detail levels available for the given mesh segment. */
+    MetadataWrapper.prototype.getMeshDetailLevels = function (segmentId) {
+        var segmentIds = this.raw.grid.segmentation_meshes.mesh_component_numbers.segment_ids;
+        if (!segmentIds)
+            return [];
+        var details = segmentIds[segmentId].detail_lvls;
+        return Object.keys(details).map(function (s) { return parseInt(s); });
+    };
+    /** Get the worst available detail level that is not worse than preferredDetail.
+     * If preferredDetail is null, get the worst detail level overall.
+     * (worse = greater number) */
+    MetadataWrapper.prototype.getSufficientMeshDetail = function (segmentId, preferredDetail) {
+        var availDetails = this.getMeshDetailLevels(segmentId);
+        if (preferredDetail !== null) {
+            availDetails = availDetails.filter(function (det) { return det <= preferredDetail; });
+        }
+        return Math.max.apply(Math, availDetails);
+    };
+    Object.defineProperty(MetadataWrapper.prototype, "meshSegmentIds", {
+        /** IDs of all segments available as meshes */
+        get: function () {
+            var segmentIds = this.raw.grid.segmentation_meshes.mesh_component_numbers.segment_ids;
+            if (!segmentIds)
+                return [];
+            return Object.keys(segmentIds).map(function (s) { return parseInt(s); });
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(MetadataWrapper.prototype, "gridTotalVolume", {
+        get: function () {
+            var _a = this.raw.grid.volumes.voxel_size[1], vx = _a[0], vy = _a[1], vz = _a[2];
+            var _b = this.raw.grid.volumes.grid_dimensions, gx = _b[0], gy = _b[1], gz = _b[2];
+            return vx * vy * vz * gx * gy * gz;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    return MetadataWrapper;
+}());
+export { MetadataWrapper };

package/lib/mol-canvas3d/canvas3d.d.ts

@@ -81,6 +81,7 @@ export declare const Canvas3DParams: {
             scale: any;
             threshold: any;
             color: any;
+            includeTransparent: any;
         }>, "on">;
         antialiasing: PD.NamedParams<PD.Normalize<unknown>, "off"> | PD.NamedParams<PD.Normalize<{
             edgeThreshold: any;
@@ -250,6 +251,7 @@ export declare const DefaultCanvas3DParams: PD.Values<{
             scale: any;
             threshold: any;
             color: any;
+            includeTransparent: any;
         }>, "on">;
         antialiasing: PD.NamedParams<PD.Normalize<unknown>, "off"> | PD.NamedParams<PD.Normalize<{
             edgeThreshold: any;