molstar 4.3.0 → 4.4.1

package/lib/apps/mesoscale-explorer/ui/entities.js

@@ -4,9 +4,9 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  *
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
-import { PluginUIComponent } from '../../../mol-plugin-ui/base';
+import { PluginReactContext, PluginUIComponent } from '../../../mol-plugin-ui/base';
 import { Button, ControlGroup, IconButton } from '../../../mol-plugin-ui/controls/common';
-import { ArrowDropDownSvg, ArrowRightSvg, CloseSvg, VisibilityOffOutlinedSvg, VisibilityOutlinedSvg, ContentCutSvg, BrushSvg, SearchSvg } from '../../../mol-plugin-ui/controls/icons';
+import { ArrowDropDownSvg, ArrowRightSvg, CloseSvg, VisibilityOffOutlinedSvg, VisibilityOutlinedSvg, ContentCutSvg, BrushSvg, SearchSvg, TooltipTextSvg, TooltipTextOutlineSvg, PlusBoxSvg, MinusBoxSvg } from '../../../mol-plugin-ui/controls/icons';
 import { PluginCommands } from '../../../mol-plugin/commands';
 import { StateSelection } from '../../../mol-state';
 import { ParameterControls, ParameterMappingControl, SelectControl } from '../../../mol-plugin-ui/controls/parameters';
@@ -17,11 +17,14 @@ import { CombinedColorControl } from '../../../mol-plugin-ui/controls/color';
 import { MarkerAction } from '../../../mol-util/marker-action';
 import { EveryLoci, Loci } from '../../../mol-model/loci';
 import { deepEqual } from '../../../mol-util';
-import { ColorValueParam, ColorParams, DimLightness, LightnessParams, LodParams, MesoscaleGroup, OpacityParams, SimpleClipParams, createClipMapping, getClipObjects, getDistinctGroupColors, RootParams, MesoscaleState, getRoots, getAllGroups, getAllLeafGroups, getFilteredEntities, getAllFilteredEntities, getGroups, getEntities, getAllEntities, getEntityLabel, updateColors, getGraphicsModeProps, MesoscaleStateParams, setGraphicsCanvas3DProps, PatternParams, expandAllGroups, EmissiveParams } from '../data/state';
-import React from 'react';
+import { ColorValueParam, ColorParams, DimLightness, LightnessParams, LodParams, MesoscaleGroup, OpacityParams, SimpleClipParams, createClipMapping, getClipObjects, getDistinctGroupColors, RootParams, MesoscaleState, getRoots, getAllGroups, getAllLeafGroups, getFilteredEntities, getAllFilteredEntities, getGroups, getEntities, getAllEntities, getEntityLabel, updateColors, getGraphicsModeProps, MesoscaleStateParams, setGraphicsCanvas3DProps, PatternParams, expandAllGroups, EmissiveParams, IllustrativeParams, getCellDescription, getEntityDescription, getEveryEntity } from '../data/state';
+import React, { useState } from 'react';
 import { StructureElement } from '../../../mol-model/structure/structure/element';
 import { Structure } from '../../../mol-model/structure';
 import { Sphere3D } from '../../../mol-math/geometry';
+import { MesoFocusLoci } from '../behavior/camera';
+import Markdown from 'react-markdown';
+import { combineLatest } from 'rxjs';
 function centerLoci(plugin, loci, durationMs = 250) {
     const { canvas3d } = plugin;
     if (!canvas3d)
@@ -54,13 +57,14 @@ export class ModelInfo extends PluginUIComponent {
         if (!state.description && !state.link)
             return;
         return {
+            selectionDescription: state.focusInfo,
             description: state.description,
             link: state.link,
         };
     }
     render() {
         const info = this.info;
-        return info && _jsx(_Fragment, { children: _jsxs("div", { className: 'msp-help-text', children: [_jsx("div", { children: info.description }), _jsx("div", { children: _jsx("a", { href: info.link, target: '_blank', children: "Source" }) })] }) });
+        return info && _jsx(_Fragment, { children: _jsxs("div", { id: 'modelinfo', className: 'msp-help-text', children: [_jsx("div", { children: info.description }), _jsx("div", { children: _jsx("a", { href: info.link, target: '_blank', children: "Source" }) })] }) });
     }
 }
 const SelectionStyleParam = PD.Select('color+outline', PD.objectToOptions({
@@ -86,18 +90,21 @@ export class SelectionInfo extends PluginUIComponent {
         });
     }
     get info() {
-        const info = [];
+        const infos = [];
         this.plugin.managers.structure.selection.entries.forEach((e, k) => {
             var _a;
             if (StructureElement.Loci.is(e.selection) && !StructureElement.Loci.isEmpty(e.selection)) {
                 const cell = this.plugin.helpers.substructureParent.get(e.selection.structure);
-                info.push({
+                const { entities } = e.selection.structure.model;
+                const description = entities.data.pdbx_description.value(0)[0] || 'model';
+                infos.push({
+                    description: description,
                     label: ((_a = cell === null || cell === void 0 ? void 0 : cell.obj) === null || _a === void 0 ? void 0 : _a.label) || 'Unknown',
                     key: k,
                 });
             }
         });
-        return info;
+        return infos;
     }
     find(label) {
         MesoscaleState.set(this.plugin, { filter: `"${label}"` });
@@ -118,17 +125,21 @@ export class SelectionInfo extends PluginUIComponent {
             return;
         const loci = Structure.toStructureElementLoci(e.selection.structure);
         centerLoci(this.plugin, loci);
+        const cell = this.plugin.helpers.substructureParent.get(loci.structure);
+        const d = getCellDescription(cell); // '### ' + cell?.obj?.label + '\n\n' + cell?.obj?.description;
+        MesoscaleState.set(this.plugin, { focusInfo: `${d}` });
     }
     get selection() {
         const info = this.info;
+        const help_selection = _jsxs(_Fragment, { children: [_jsxs("div", { children: ["Use ", _jsx("i", { children: "ctrl+left" }), " to select entities, either on the 3D canvas or in the tree below"] }), _jsxs("div", { children: ["Use ", _jsx("i", { children: "shift+left" }), " to select individual chain on the 3D canvas"] })] });
         if (!info.length)
-            return _jsx(_Fragment, { children: _jsx("div", { className: 'msp-help-text', children: _jsxs("div", { children: ["Use ", _jsx("i", { children: "ctrl+left click" }), " to select entities, either on the 3D canvas or in the tree below"] }) }) });
-        return _jsx(_Fragment, { children: info.map((entry, index) => {
-                const label = _jsx(Button, { className: `msp-btn-tree-label`, noOverflow: true, disabled: this.state.isDisabled, onClick: () => this.center(entry.key), children: _jsx("span", { title: entry.label, children: entry.label }) });
-                const find = _jsx(IconButton, { svg: SearchSvg, toggleState: false, disabled: this.state.isDisabled, small: true, onClick: () => this.find(entry.label) });
-                const remove = _jsx(IconButton, { svg: CloseSvg, toggleState: false, disabled: this.state.isDisabled, onClick: () => this.remove(entry.key) });
-                return _jsxs("div", { className: `msp-flex-row`, style: { margin: `1px 5px 1px ${1 * 10 + 5}px` }, children: [label, find, remove] }, index);
-            }) });
+            return _jsx(_Fragment, { children: _jsx("div", { id: 'seleinfo', className: 'msp-help-text', children: help_selection }) });
+        return _jsx(_Fragment, { children: _jsxs("div", { id: 'seleinfo', children: [info.map((entry, index) => {
+                        const label = _jsx(Button, { className: `msp-btn-tree-label`, noOverflow: true, disabled: this.state.isDisabled, onClick: () => this.center(entry.key), children: _jsx("span", { title: entry.label, children: entry.label }) });
+                        const find = _jsx(IconButton, { svg: SearchSvg, toggleState: false, disabled: this.state.isDisabled, small: true, onClick: () => this.find(entry.label) });
+                        const remove = _jsx(IconButton, { svg: CloseSvg, toggleState: false, disabled: this.state.isDisabled, onClick: () => this.remove(entry.key) });
+                        return _jsx(_Fragment, { children: _jsxs("div", { className: `msp-flex-row`, style: { margin: `1px 5px 1px ${1 * 10 + 5}px` }, children: [label, find, remove] }, index) });
+                    }), ";"] }) });
     }
     get style() {
         var _a;
@@ -190,12 +201,186 @@ export class SelectionInfo extends PluginUIComponent {
     }
     renderStyle() {
         const style = this.style || '';
-        return _jsx("div", { style: { margin: '5px', marginBottom: '10px' }, children: _jsx(SelectControl, { name: 'Style', param: SelectionStyleParam, value: style, onChange: (e) => { this.setStyle(e.value); } }) });
+        return _jsx("div", { id: 'selestyle', style: { margin: '5px', marginBottom: '10px' }, children: _jsx(SelectControl, { name: 'Style', param: SelectionStyleParam, value: style, onChange: (e) => { this.setStyle(e.value); } }) });
     }
     render() {
         return _jsxs(_Fragment, { children: [this.renderStyle(), this.selection] });
     }
 }
+export function MesoMarkdownAnchor({ href, children, element }) {
+    const plugin = React.useContext(PluginReactContext);
+    if (!href)
+        return element;
+    // Decode the href to handle encoded spaces and other characters
+    const decodedHref = href ? decodeURIComponent(href) : '';
+    const handleHover = (e) => {
+        var _a, _b, _c, _d, _e, _f;
+        e.preventDefault();
+        if (decodedHref.startsWith('i')) {
+            (_a = plugin.canvas3d) === null || _a === void 0 ? void 0 : _a.mark({ loci: EveryLoci }, MarkerAction.RemoveHighlight);
+            const query_names = decodedHref.substring(1).split(',');
+            for (const query_name of query_names) {
+                const entities = getEveryEntity(plugin, query_name);
+                for (const r of entities) {
+                    const repr = (_b = r.obj) === null || _b === void 0 ? void 0 : _b.data.repr;
+                    if (repr) {
+                        (_c = plugin.canvas3d) === null || _c === void 0 ? void 0 : _c.mark({ repr, loci: EveryLoci }, MarkerAction.Highlight);
+                    }
+                }
+            }
+        }
+        else if (decodedHref.startsWith('g')) {
+            (_d = plugin.canvas3d) === null || _d === void 0 ? void 0 : _d.mark({ loci: EveryLoci }, MarkerAction.RemoveHighlight);
+            const qindex = decodedHref.indexOf('.');
+            const query = decodedHref.substring(1, qindex) + ':';
+            const query_names = decodedHref.substring(qindex + 1).split(',');
+            for (const query_name of query_names) {
+                const e = getAllEntities(plugin, query + query_name);
+                for (const r of e) {
+                    const repr = (_e = r.obj) === null || _e === void 0 ? void 0 : _e.data.repr;
+                    if (repr) {
+                        (_f = plugin.canvas3d) === null || _f === void 0 ? void 0 : _f.mark({ repr, loci: EveryLoci }, MarkerAction.Highlight);
+                    }
+                }
+            }
+        }
+    };
+    const handleLeave = (e) => {
+        var _a;
+        // Implement your hover off logic here
+        // Example: Perform an action if the href starts with 'h'
+        if (decodedHref.startsWith('i') || decodedHref.startsWith('g')) {
+            // Example hover off action
+            e.preventDefault();
+            (_a = plugin.canvas3d) === null || _a === void 0 ? void 0 : _a.mark({ loci: EveryLoci }, MarkerAction.RemoveHighlight);
+        }
+    };
+    const handleClick = (e) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        e.preventDefault();
+        if (href.startsWith('#')) {
+            plugin.managers.snapshot.applyKey(decodedHref.substring(1));
+        }
+        else if (decodedHref.startsWith('i')) {
+            plugin.managers.interactivity.lociSelects.deselectAll();
+            (_a = plugin.canvas3d) === null || _a === void 0 ? void 0 : _a.mark({ loci: EveryLoci }, MarkerAction.RemoveHighlight);
+            const query_names = decodedHref.substring(1).split(',');
+            for (const query_name of query_names) {
+                const entities = getFilteredEntities(plugin, '', query_name);
+                for (const r of entities) {
+                    const repr = (_b = r.obj) === null || _b === void 0 ? void 0 : _b.data.repr;
+                    if (repr) {
+                        (_c = plugin.canvas3d) === null || _c === void 0 ? void 0 : _c.mark({ repr, loci: EveryLoci }, MarkerAction.Highlight);
+                    }
+                    const cell = r;
+                    if (!(((_d = cell === null || cell === void 0 ? void 0 : cell.obj) === null || _d === void 0 ? void 0 : _d.data.sourceData) instanceof Structure)) {
+                        return;
+                    }
+                    const loci = Structure.toStructureElementLoci(cell.obj.data.sourceData);
+                    plugin.managers.interactivity.lociSelects.toggle({ loci }, false);
+                }
+            }
+        }
+        else if (decodedHref.startsWith('g')) {
+            plugin.managers.interactivity.lociSelects.deselectAll();
+            (_e = plugin.canvas3d) === null || _e === void 0 ? void 0 : _e.mark({ loci: EveryLoci }, MarkerAction.RemoveHighlight);
+            const qindex = decodedHref.indexOf('.');
+            const query = decodedHref.substring(1, qindex) + ':';
+            const query_names = decodedHref.substring(qindex + 1).split(',');
+            for (const query_name of query_names) {
+                const entities = getAllEntities(plugin, query + query_name);
+                for (const r of entities) {
+                    const repr = (_f = r.obj) === null || _f === void 0 ? void 0 : _f.data.repr;
+                    if (repr) {
+                        (_g = plugin.canvas3d) === null || _g === void 0 ? void 0 : _g.mark({ repr, loci: EveryLoci }, MarkerAction.Highlight);
+                    }
+                    const cell = r;
+                    if (!(((_h = cell === null || cell === void 0 ? void 0 : cell.obj) === null || _h === void 0 ? void 0 : _h.data.sourceData) instanceof Structure))
+                        return;
+                    const loci = Structure.toStructureElementLoci(cell.obj.data.sourceData);
+                    plugin.managers.interactivity.lociSelects.toggle({ loci }, false);
+                }
+            }
+        }
+        else {
+            // open the link in a new tab
+            window.open(decodedHref, '_blank');
+        }
+    };
+    if (decodedHref[0] === '#') {
+        return _jsx("a", { href: decodedHref[0], onMouseOver: handleHover, onClick: handleClick, children: children });
+    }
+    if (decodedHref[0] === 'i' || decodedHref[0] === 'g') {
+        return _jsx("a", { href: decodedHref[0], onMouseLeave: handleLeave, onMouseOver: handleHover, onClick: handleClick, children: children });
+    }
+    if (decodedHref[0] === 'h') {
+        return _jsx("a", { href: decodedHref[0], onClick: handleClick, rel: 'noopener noreferrer', children: children });
+    }
+    return element;
+}
+export function MesoViewportSnapshotDescription() {
+    var _a;
+    let tSize = 14;
+    const plugin = React.useContext(PluginReactContext);
+    if (MesoscaleState.has(plugin)) {
+        const state = MesoscaleState.get(plugin);
+        tSize = state.textSizeDescription;
+    }
+    const [_, setV] = React.useState(0);
+    const [isShown, setIsShown] = useState(true);
+    const [textSize, setTextSize] = useState(tSize);
+    const toggleVisibility = () => {
+        setIsShown(!isShown);
+    };
+    const increaseTextSize = () => {
+        setTextSize(prevSize => Math.min(prevSize + 2, 50)); // Increase the text size by 2px, but not above 50px
+    };
+    const decreaseTextSize = () => {
+        setTextSize(prevSize => Math.max(prevSize - 2, 2)); // Decrease the text size by 2px, but not below 2px
+    };
+    React.useEffect(() => {
+        const sub = plugin.managers.snapshot.events.changed.subscribe(() => setV(v => v + 1));
+        return () => sub.unsubscribe();
+    }, [plugin]);
+    const current = plugin.managers.snapshot.state.current;
+    if (!current)
+        return null;
+    const e = plugin.managers.snapshot.getEntry(current);
+    if (!((_a = e === null || e === void 0 ? void 0 : e.description) === null || _a === void 0 ? void 0 : _a.trim()))
+        return null;
+    if (MesoscaleState.has(plugin)) {
+        MesoscaleState.set(plugin, { textSizeDescription: textSize });
+    }
+    const showInfo = _jsx(IconButton, { svg: isShown ? TooltipTextSvg : TooltipTextOutlineSvg, flex: '20px', onClick: toggleVisibility, title: isShown ? 'Hide Description' : 'Show Description' });
+    const increasePoliceSize = _jsx(IconButton, { svg: PlusBoxSvg, flex: '20px', onClick: increaseTextSize, title: 'Bigger Text' });
+    const decreasePoliceSize = _jsx(IconButton, { svg: MinusBoxSvg, flex: '20px', onClick: decreaseTextSize, title: 'Smaller Text' });
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { id: 'snapinfoctrl', className: "msp-state-snapshot-viewport-controls", style: { marginRight: '30px' }, children: [showInfo, increasePoliceSize, decreasePoliceSize] }), _jsx("div", { id: 'snapinfo', className: `msp-snapshot-description-me ${isShown ? 'shown' : 'hidden'}`, style: { fontSize: `${textSize}px` }, children: _jsx(Markdown, { skipHtml: false, components: { a: MesoMarkdownAnchor }, children: e.description }) })] }));
+}
+export class FocusInfo extends PluginUIComponent {
+    componentDidMount() {
+        this.subscribe(combineLatest([
+            this.plugin.state.data.behaviors.isUpdating,
+            this.plugin.managers.structure.selection.events.changed
+        ]), ([isUpdating]) => {
+            if (!isUpdating)
+                this.forceUpdate();
+        });
+    }
+    get info() {
+        let focusInfo = '';
+        if (MesoscaleState.has(this.plugin)) {
+            const state = MesoscaleState.get(this.plugin);
+            if (state.focusInfo)
+                focusInfo = state.focusInfo;
+        }
+        return focusInfo;
+    }
+    render() {
+        const focusInfo = this.info;
+        const description = (focusInfo !== '') ? _jsx(Markdown, { skipHtml: true, components: { a: MesoMarkdownAnchor }, children: focusInfo }) : '';
+        return _jsx(_Fragment, { children: _jsx("div", { id: 'focusinfo', className: 'msp-help-text', children: description }) });
+    }
+}
 export class EntityControls extends PluginUIComponent {
     constructor() {
         super(...arguments);
@@ -289,7 +474,7 @@ export class EntityControls extends PluginUIComponent {
     }
     renderGraphics() {
         const graphics = this.graphics;
-        return _jsx("div", { style: { margin: '5px', marginBottom: '10px' }, children: _jsx(SelectControl, { name: 'Graphics', param: MesoscaleStateParams.graphics, value: `${graphics}`, onChange: (e) => { this.setGraphics(e.value); } }) });
+        return _jsx("div", { id: 'graphicsquality', style: { margin: '5px', marginBottom: '10px' }, children: _jsx(SelectControl, { name: 'Graphics', param: MesoscaleStateParams.graphics, value: `${graphics}`, onChange: (e) => { this.setGraphics(e.value); } }) });
     }
     render() {
         const roots = this.roots;
@@ -305,7 +490,7 @@ export class EntityControls extends PluginUIComponent {
         const groupParam = PD.Select(options[0][0], options);
         const root = roots.length === 1 ? roots[0] : roots[groupBy];
         const filter = this.filter;
-        return _jsxs(_Fragment, { children: [this.renderGraphics(), _jsxs("div", { className: `msp-flex-row msp-control-row`, style: { margin: '5px', marginBottom: '10px' }, children: [_jsx("input", { type: 'text', ref: this.filterRef, value: filter, placeholder: 'Search', onChange: e => this.setFilter(e.target.value), disabled: disabled, onBlur: () => this.filterFocus = false }), _jsx(IconButton, { svg: CloseSvg, toggleState: false, disabled: disabled, onClick: () => this.setFilter('') })] }), options.length > 1 && _jsx("div", { style: { margin: '5px', marginBottom: '10px' }, children: _jsx(SelectControl, { name: 'Group By', param: groupParam, value: `${groupBy}`, onChange: (e) => { this.setGroupBy(parseInt(e.value)); } }) }), _jsx(GroupNode, { filter: filter, cell: root, depth: 0 })] });
+        return _jsxs(_Fragment, { children: [this.renderGraphics(), _jsxs("div", { id: 'searchtree', className: `msp-flex-row msp-control-row`, style: { margin: '5px', marginBottom: '10px' }, children: [_jsx("input", { type: 'text', ref: this.filterRef, value: filter, placeholder: 'Search', onChange: e => this.setFilter(e.target.value), disabled: disabled, onBlur: () => this.filterFocus = false }), _jsx(IconButton, { svg: CloseSvg, toggleState: false, disabled: disabled, onClick: () => this.setFilter('') })] }), options.length > 1 && _jsx("div", { id: 'grouptree', style: { margin: '5px', marginBottom: '10px' }, children: _jsx(SelectControl, { name: 'Group By', param: groupParam, value: `${groupBy}`, onChange: (e) => { this.setGroupBy(parseInt(e.value)); } }) }), _jsx("div", { id: 'tree', style: { position: 'relative', overflowY: 'auto', borderBottom: '1px  solid #000', maxHeight: '600px' }, children: _jsx(GroupNode, { filter: filter, cell: root, depth: 0 }) })] });
     }
 }
 class Node extends PluginUIComponent {
@@ -352,6 +537,11 @@ export class GroupNode extends Node {
         this.toggleRoot = () => {
             this.setState({ action: this.state.action === 'root' ? undefined : 'root' });
         };
+        this.showInfo = (e) => {
+            e.preventDefault();
+            const d = getCellDescription(this.cell); // '### ' + this.cell?.obj?.label + '\n\n' + this.cell?.obj?.description;
+            MesoscaleState.set(this.plugin, { focusInfo: `${d}` });
+        };
         this.highlight = (e) => {
             var _a, _b, _c;
             e.preventDefault();
@@ -381,7 +571,7 @@ export class GroupNode extends Node {
         };
         this.updateColor = (values) => {
             const update = this.plugin.state.data.build();
-            const { value, type, lightness, alpha, emissive } = values;
+            const { value, illustrative, type, lightness, alpha, emissive } = values;
             const entities = this.filteredEntities;
             let groupColors = [];
             if (type === 'generate') {
@@ -391,8 +581,12 @@ export class GroupNode extends Node {
                 const c = type === 'generate' ? groupColors[i] : value;
                 update.to(entities[i]).update(old => {
                     if (old.type) {
-                        old.colorTheme.params.value = c;
-                        old.colorTheme.params.lightness = lightness;
+                        if (illustrative) {
+                            old.colorTheme = { name: 'illustrative', params: { style: { name: 'uniform', params: { value: c, lightness } } } };
+                        }
+                        else {
+                            old.colorTheme = { name: 'uniform', params: { value: c, lightness } };
+                        }
                         old.type.params.alpha = alpha;
                         old.type.params.xrayShaded = alpha < 1 ? 'inverted' : false;
                         old.type.params.emissive = emissive;
@@ -418,7 +612,7 @@ export class GroupNode extends Node {
         };
         this.updateRoot = async (values) => {
             var _a, _b;
-            await updateColors(this.plugin, values, (_a = this.cell.params) === null || _a === void 0 ? void 0 : _a.values.tag, this.props.filter);
+            await updateColors(this.plugin, values, undefined, (_a = this.cell.params) === null || _a === void 0 ? void 0 : _a.values.tag, this.props.filter);
             const update = this.plugin.state.data.build();
             for (const r of this.roots) {
                 if (r !== this.cell) {
@@ -548,7 +742,7 @@ export class GroupNode extends Node {
         const isRoot = (_e = this.cell.params) === null || _e === void 0 ? void 0 : _e.values.root;
         const groups = this.groups;
         const entities = this.entities;
-        const label = _jsx(Button, { className: `msp-btn-tree-label`, noOverflow: true, disabled: disabled, onMouseEnter: this.highlight, onMouseLeave: this.clearHighlight, children: _jsx("span", { title: groupLabel, children: groupLabel }) });
+        const label = _jsx(Button, { className: `msp-btn-tree-label`, noOverflow: true, disabled: disabled, onMouseEnter: this.highlight, onMouseLeave: this.clearHighlight, onClick: this.showInfo, children: _jsx("span", { title: groupLabel, children: groupLabel }) });
         const expand = _jsx(IconButton, { svg: state.isCollapsed ? ArrowRightSvg : ArrowDropDownSvg, flex: '20px', disabled: disabled, onClick: this.toggleExpanded, transparent: true, className: 'msp-no-hover-outline', style: { visibility: groups.length > 0 || entities.length > 0 ? 'visible' : 'hidden' } });
         const color = (entities.length > 0 && !isRoot) && this.renderColor();
         const root = (isRoot && this.allGroups.length > 1) && _jsx(IconButton, { svg: BrushSvg, toggleState: false, disabled: disabled, small: true, onClick: this.toggleRoot });
@@ -622,11 +816,42 @@ export class EntityNode extends Node {
             centerLoci(this.plugin, loci);
         };
         this.handleClick = (e) => {
+            var _a, _b, _c, _d, _e, _f, _g;
             if (e.ctrlKey) {
                 this.toggleSelect(e);
             }
             else {
-                this.center(e);
+                const d = getEntityDescription(this.plugin, this.cell);
+                if (((_b = (_a = this.cell) === null || _a === void 0 ? void 0 : _a.obj) === null || _b === void 0 ? void 0 : _b.data.sourceData.state.models.length) !== 0) {
+                    const repr = (_d = (_c = this.cell) === null || _c === void 0 ? void 0 : _c.obj) === null || _d === void 0 ? void 0 : _d.data.repr;
+                    if (repr) {
+                        // for fiber need to think how to handle.
+                        const aloci = repr.getAllLoci()[0];
+                        const locis = Loci.normalize(aloci, 'chainInstances');
+                        const nChain = aloci.structure.state.unitSymmetryGroups.length;
+                        let index = MesoscaleState.get(this.plugin).index + 1;
+                        if (index * nChain >= locis.elements.length)
+                            index = 0;
+                        const elems = locis.elements.slice(index * nChain, ((index + 1) * nChain)); // end index is not included
+                        const loci = StructureElement.Loci(aloci.structure, elems);
+                        const sphere = Loci.getBoundingSphere(loci) || Sphere3D();
+                        const state = this.plugin.state.behaviors;
+                        const selections = state.select(StateSelection.Generators.ofTransformer(MesoFocusLoci));
+                        const params = selections.length === 1 ? (_e = selections[0].obj) === null || _e === void 0 ? void 0 : _e.data.params : undefined;
+                        if (!params.centerOnly) {
+                            this.plugin.managers.camera.focusSphere(sphere, params);
+                        }
+                        else {
+                            const snapshot = (_f = this.plugin.canvas3d) === null || _f === void 0 ? void 0 : _f.camera.getCenter(sphere.center);
+                            (_g = this.plugin.canvas3d) === null || _g === void 0 ? void 0 : _g.requestCameraReset({ durationMs: params.durationMs, snapshot });
+                        }
+                        MesoscaleState.set(this.plugin, { index: index, focusInfo: `${d}` });
+                    }
+                }
+                else {
+                    this.center(e);
+                    MesoscaleState.set(this.plugin, { focusInfo: `${d}` });
+                }
             }
         };
         this.updateColor = ({ value }) => {
@@ -643,7 +868,12 @@ export class EntityNode extends Node {
             }
             update.to(this.ref).update(old => {
                 if (old.colorTheme) {
-                    old.colorTheme.params.value = value;
+                    if (old.colorTheme.name === 'illustrative') {
+                        old.colorTheme.params.style.params.value = value;
+                    }
+                    else {
+                        old.colorTheme.params.value = value;
+                    }
                 }
                 else if (old.coloring) {
                     old.coloring.params.color = value;
@@ -651,10 +881,27 @@ export class EntityNode extends Node {
             });
             update.commit();
         };
+        this.updateIllustrative = (values) => {
+            return this.plugin.build().to(this.ref).update(old => {
+                if (old.colorTheme) {
+                    if (old.colorTheme.name !== 'illustrative' && values.illustrative) {
+                        old.colorTheme = { name: 'illustrative', params: { style: { name: 'uniform', params: { value: old.colorTheme.params.value, lightness: old.colorTheme.params.lightness } } } };
+                    }
+                    else if (old.colorTheme.name === 'illustrative' && !values.illustrative) {
+                        old.colorTheme = { name: 'uniform', params: { value: old.colorTheme.params.style.params.value, lightness: old.colorTheme.params.style.params.lightness } };
+                    }
+                }
+            }).commit();
+        };
         this.updateLightness = (values) => {
             return this.plugin.build().to(this.ref).update(old => {
                 if (old.colorTheme) {
-                    old.colorTheme.params.lightness = values.lightness;
+                    if (old.colorTheme.name === 'illustrative') {
+                        old.colorTheme.params.style.params.lightness = values.lightness;
+                    }
+                    else {
+                        old.colorTheme.params.lightness = values.lightness;
+                    }
                 }
                 else if (old.coloring) {
                     old.coloring.params.lightness = values.lightness;
@@ -726,15 +973,36 @@ export class EntityNode extends Node {
             .filter(c => { var _a, _b; return !!((_a = this.cell.transform.tags) === null || _a === void 0 ? void 0 : _a.includes((_b = c.params) === null || _b === void 0 ? void 0 : _b.values.tag)); }));
     }
     get colorValue() {
-        var _a, _b, _c, _d, _e;
-        return (_c = (_b = (_a = this.cell.transform.params) === null || _a === void 0 ? void 0 : _a.colorTheme) === null || _b === void 0 ? void 0 : _b.params.value) !== null && _c !== void 0 ? _c : (_e = (_d = this.cell.transform.params) === null || _d === void 0 ? void 0 : _d.coloring) === null || _e === void 0 ? void 0 : _e.params.color;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+        if ((_b = (_a = this.cell.transform.params) === null || _a === void 0 ? void 0 : _a.colorTheme) === null || _b === void 0 ? void 0 : _b.params.value) {
+            return (_d = (_c = this.cell.transform.params) === null || _c === void 0 ? void 0 : _c.colorTheme) === null || _d === void 0 ? void 0 : _d.params.value;
+        }
+        else if (((_f = (_e = this.cell.transform.params) === null || _e === void 0 ? void 0 : _e.colorTheme) === null || _f === void 0 ? void 0 : _f.name) === 'illustrative') {
+            return (_h = (_g = this.cell.transform.params) === null || _g === void 0 ? void 0 : _g.colorTheme) === null || _h === void 0 ? void 0 : _h.params.style.params.value;
+        }
+        else {
+            return (_l = (_k = (_j = this.cell.transform.params) === null || _j === void 0 ? void 0 : _j.colorTheme) === null || _k === void 0 ? void 0 : _k.params.value) !== null && _l !== void 0 ? _l : (_o = (_m = this.cell.transform.params) === null || _m === void 0 ? void 0 : _m.coloring) === null || _o === void 0 ? void 0 : _o.params.color;
+        }
     }
-    get lightnessValue() {
-        var _a, _b, _c, _d, _e, _f;
+    get illustrativeValue() {
+        var _a, _b;
         return {
-            lightness: (_f = (_c = (_b = (_a = this.cell.transform.params) === null || _a === void 0 ? void 0 : _a.colorTheme) === null || _b === void 0 ? void 0 : _b.params.lightness) !== null && _c !== void 0 ? _c : (_e = (_d = this.cell.transform.params) === null || _d === void 0 ? void 0 : _d.coloring) === null || _e === void 0 ? void 0 : _e.params.lightness) !== null && _f !== void 0 ? _f : 0
+            illustrative: (((_b = (_a = this.cell.transform.params) === null || _a === void 0 ? void 0 : _a.colorTheme) === null || _b === void 0 ? void 0 : _b.name) === 'illustrative')
         };
     }
+    get lightnessValue() {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+        if (((_b = (_a = this.cell.transform.params) === null || _a === void 0 ? void 0 : _a.colorTheme) === null || _b === void 0 ? void 0 : _b.name) === 'illustrative') {
+            return {
+                lightness: (_e = (_d = (_c = this.cell.transform.params) === null || _c === void 0 ? void 0 : _c.colorTheme) === null || _d === void 0 ? void 0 : _d.params.style.params.lightness) !== null && _e !== void 0 ? _e : 0
+            };
+        }
+        else {
+            return {
+                lightness: (_l = (_h = (_g = (_f = this.cell.transform.params) === null || _f === void 0 ? void 0 : _f.colorTheme) === null || _g === void 0 ? void 0 : _g.params.lightness) !== null && _h !== void 0 ? _h : (_k = (_j = this.cell.transform.params) === null || _j === void 0 ? void 0 : _j.coloring) === null || _k === void 0 ? void 0 : _k.params.lightness) !== null && _l !== void 0 ? _l : 0
+            };
+        }
+    }
     get opacityValue() {
         var _a, _b, _c, _d, _e;
         return {
@@ -778,6 +1046,7 @@ export class EntityNode extends Node {
         const depth = this.props.depth;
         const colorValue = this.colorValue;
         const lightnessValue = this.lightnessValue;
+        const illustrativeValue = this.illustrativeValue;
         const opacityValue = this.opacityValue;
         const emissiveValue = this.emissiveValue;
         const lodValue = this.lodValue;
@@ -787,6 +1056,6 @@ export class EntityNode extends Node {
         const color = colorValue !== undefined && _jsx(Button, { style: { backgroundColor: Color.toStyle(colorValue), minWidth: 32, width: 32, borderRight: `6px solid ${Color.toStyle(Color.lighten(colorValue, (lightnessValue === null || lightnessValue === void 0 ? void 0 : lightnessValue.lightness) || 0))}` }, onClick: this.toggleColor });
         const clip = _jsx(IconButton, { svg: ContentCutSvg, toggleState: false, disabled: disabled, small: true, onClick: this.toggleClip });
         const visibility = _jsx(IconButton, { svg: cellState.isHidden ? VisibilityOffOutlinedSvg : VisibilityOutlinedSvg, toggleState: false, disabled: disabled, small: true, onClick: this.toggleVisible });
-        return _jsxs(_Fragment, { children: [_jsxs("div", { className: `msp-flex-row`, style: { margin: `1px 5px 1px ${depth * 10 + 5}px` }, children: [label, color, clip, visibility] }), this.state.action === 'color' && colorValue !== void 0 && _jsx("div", { style: { marginRight: 5 }, className: 'msp-accent-offset', children: _jsxs(ControlGroup, { header: 'Color', initialExpanded: true, hideExpander: true, hideOffset: true, onHeaderClick: this.toggleColor, topRightIcon: CloseSvg, noTopMargin: true, childrenClassName: 'msp-viewport-controls-panel-controls', children: [_jsx(CombinedColorControl, { param: ColorValueParam, value: colorValue !== null && colorValue !== void 0 ? colorValue : Color(0xFFFFFF), onChange: this.updateColor, name: 'color', hideNameRow: true }), _jsx(ParameterControls, { params: LightnessParams, values: lightnessValue, onChangeValues: this.updateLightness }), _jsx(ParameterControls, { params: OpacityParams, values: opacityValue, onChangeValues: this.updateOpacity }), _jsx(ParameterControls, { params: EmissiveParams, values: emissiveValue, onChangeValues: this.updateEmissive }), patternValue && _jsx(ParameterControls, { params: PatternParams, values: patternValue, onChangeValues: this.updatePattern })] }) }), this.state.action === 'clip' && _jsx("div", { style: { marginRight: 5 }, className: 'msp-accent-offset', children: _jsxs(ControlGroup, { header: 'Clip', initialExpanded: true, hideExpander: true, hideOffset: true, onHeaderClick: this.toggleClip, topRightIcon: CloseSvg, noTopMargin: true, childrenClassName: 'msp-viewport-controls-panel-controls', children: [_jsx(ParameterMappingControl, { mapping: this.clipMapping }), lodValue && _jsx(ParameterControls, { params: LodParams, values: lodValue, onChangeValues: this.updateLod })] }) })] });
+        return _jsxs(_Fragment, { children: [_jsxs("div", { className: `msp-flex-row`, style: { margin: `1px 5px 1px ${depth * 10 + 5}px` }, children: [label, color, clip, visibility] }), this.state.action === 'color' && colorValue !== void 0 && _jsx("div", { style: { marginRight: 5 }, className: 'msp-accent-offset', children: _jsxs(ControlGroup, { header: 'Color', initialExpanded: true, hideExpander: true, hideOffset: true, onHeaderClick: this.toggleColor, topRightIcon: CloseSvg, noTopMargin: true, childrenClassName: 'msp-viewport-controls-panel-controls', children: [_jsx(CombinedColorControl, { param: ColorValueParam, value: colorValue !== null && colorValue !== void 0 ? colorValue : Color(0xFFFFFF), onChange: this.updateColor, name: 'color', hideNameRow: true }), _jsx(ParameterControls, { params: IllustrativeParams, values: illustrativeValue, onChangeValues: this.updateIllustrative }), _jsx(ParameterControls, { params: LightnessParams, values: lightnessValue, onChangeValues: this.updateLightness }), _jsx(ParameterControls, { params: OpacityParams, values: opacityValue, onChangeValues: this.updateOpacity }), _jsx(ParameterControls, { params: EmissiveParams, values: emissiveValue, onChangeValues: this.updateEmissive }), patternValue && _jsx(ParameterControls, { params: PatternParams, values: patternValue, onChangeValues: this.updatePattern })] }) }), this.state.action === 'clip' && _jsx("div", { style: { marginRight: 5 }, className: 'msp-accent-offset', children: _jsxs(ControlGroup, { header: 'Clip', initialExpanded: true, hideExpander: true, hideOffset: true, onHeaderClick: this.toggleClip, topRightIcon: CloseSvg, noTopMargin: true, childrenClassName: 'msp-viewport-controls-panel-controls', children: [_jsx(ParameterMappingControl, { mapping: this.clipMapping }), lodValue && _jsx(ParameterControls, { params: LodParams, values: lodValue, onChangeValues: this.updateLod })] }) })] });
     }
 }

package/lib/apps/mesoscale-explorer/ui/panels.d.ts

@@ -14,6 +14,7 @@ export declare class RightPanel extends PluginUIComponent<{}, {
         isDisabled: boolean;
     };
     get hasModelInfo(): boolean;
+    get hasFocusInfo(): boolean;
     componentDidMount(): void;
     render(): import("react/jsx-runtime").JSX.Element;
 }

package/lib/apps/mesoscale-explorer/ui/panels.js

@@ -5,17 +5,50 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
 import { Mp4EncoderUI } from '../../../extensions/mp4-export/ui';
-import { PluginUIComponent } from '../../../mol-plugin-ui/base';
+import { CollapsableControls, PluginUIComponent } from '../../../mol-plugin-ui/base';
 import { SectionHeader } from '../../../mol-plugin-ui/controls/common';
+import { ParameterControls } from '../../../mol-plugin-ui/controls/parameters';
+import { PluginCommands } from '../../../mol-plugin/commands';
+import { StructureMeasurementsControls } from '../../../mol-plugin-ui/structure/measurements';
 import { MesoscaleState } from '../data/state';
-import { EntityControls, ModelInfo, SelectionInfo } from './entities';
-import { LoaderControls, ExampleControls, SessionControls, SnapshotControls, DatabaseControls } from './states';
+import { EntityControls, FocusInfo, ModelInfo, SelectionInfo } from './entities';
+import { LoaderControls, ExampleControls, SessionControls, SnapshotControls, DatabaseControls, MesoQuickStylesControls, ExplorerInfo } from './states';
+import { ParamDefinition as PD } from '../../../mol-util/param-definition';
+import { TuneSvg } from '../../../mol-plugin-ui/controls/icons';
+import { RendererParams } from '../../../mol-gl/renderer';
+import { TrackballControlsParams } from '../../../mol-canvas3d/controls/trackball';
 const Spacer = () => _jsx("div", { style: { height: '2em' } });
+const ViewportParams = {
+    renderer: PD.Group(RendererParams),
+    trackball: PD.Group(TrackballControlsParams),
+};
+class ViewportSettingsUI extends CollapsableControls {
+    constructor() {
+        super(...arguments);
+        this.setSettings = (p) => {
+            PluginCommands.Canvas3D.SetSettings(this.plugin, { settings: { [p.name]: p.value } });
+        };
+    }
+    defaultState() {
+        return {
+            header: 'Viewport Settings',
+            isCollapsed: true,
+            brand: { accent: 'cyan', svg: TuneSvg }
+        };
+    }
+    renderControls() {
+        return _jsx(_Fragment, { children: this.plugin.canvas3d && this.plugin.canvas3dContext && _jsx(_Fragment, { children: _jsx(ParameterControls, { params: ViewportParams, values: this.plugin.canvas3d.props, onChange: this.setSettings }) }) });
+    }
+    componentDidMount() {
+        this.subscribe(this.plugin.events.canvas3d.settingsUpdated, () => this.forceUpdate());
+        this.subscribe(this.plugin.layout.events.updated, () => this.forceUpdate());
+    }
+}
 export class LeftPanel extends PluginUIComponent {
     render() {
         var _a;
         const customState = this.plugin.customState;
-        return _jsxs("div", { className: 'msp-scrollable-container', children: [_jsx(SectionHeader, { title: 'Database' }), _jsx(DatabaseControls, {}), _jsx(Spacer, {}), _jsx(SectionHeader, { title: 'Open' }), _jsx(LoaderControls, {}), _jsx(Spacer, {}), ((_a = customState.examples) === null || _a === void 0 ? void 0 : _a.length) && _jsxs(_Fragment, { children: [_jsx(SectionHeader, { title: 'Example' }), _jsx(ExampleControls, {}), _jsx(Spacer, {})] }), _jsx(SectionHeader, { title: 'Session' }), _jsx(SessionControls, {}), _jsx(Spacer, {}), _jsx(SectionHeader, { title: 'Snapshots' }), _jsx(SnapshotControls, {}), _jsx(Spacer, {}), _jsx(Mp4EncoderUI, {})] });
+        return _jsxs("div", { className: 'msp-scrollable-container', children: [customState.driver && _jsxs(_Fragment, { children: [_jsx(ExplorerInfo, {}), _jsx(Spacer, {})] }), _jsx(SectionHeader, { title: 'Database' }), _jsx(DatabaseControls, {}), _jsx(Spacer, {}), _jsx(SectionHeader, { title: 'Open' }), _jsx(LoaderControls, {}), _jsx(Spacer, {}), ((_a = customState.examples) === null || _a === void 0 ? void 0 : _a.length) && _jsxs(_Fragment, { children: [_jsx(SectionHeader, { title: 'Example' }), _jsx(ExampleControls, {}), _jsx(Spacer, {})] }), _jsx(SectionHeader, { title: 'Session' }), _jsx(SessionControls, {}), _jsx(Spacer, {}), _jsx(SectionHeader, { title: 'Snapshots' }), _jsx(SnapshotControls, {}), _jsx(Spacer, {}), _jsx(Mp4EncoderUI, {}), _jsx(ViewportSettingsUI, {})] });
     }
 }
 export class RightPanel extends PluginUIComponent {
@@ -30,6 +63,10 @@ export class RightPanel extends PluginUIComponent {
             !!(MesoscaleState.get(this.plugin).description ||
                 MesoscaleState.get(this.plugin).link));
     }
+    get hasFocusInfo() {
+        return (MesoscaleState.has(this.plugin) &&
+            !!(MesoscaleState.get(this.plugin).focusInfo !== ''));
+    }
     componentDidMount() {
         this.subscribe(this.plugin.state.data.behaviors.isUpdating, v => {
             this.setState({ isDisabled: v });
@@ -46,6 +83,6 @@ export class RightPanel extends PluginUIComponent {
         });
     }
     render() {
-        return _jsxs("div", { className: 'msp-scrollable-container', children: [this.hasModelInfo && _jsxs(_Fragment, { children: [_jsx(SectionHeader, { title: 'Model' }), _jsx(ModelInfo, {}), _jsx(Spacer, {})] }), _jsxs(_Fragment, { children: [_jsx(SectionHeader, { title: 'Selection' }), _jsx(SelectionInfo, {}), _jsx(Spacer, {})] }), _jsx(SectionHeader, { title: 'Entities' }), _jsx(EntityControls, {})] });
+        return _jsxs("div", { className: 'msp-scrollable-container', children: [this.hasModelInfo && _jsxs(_Fragment, { children: [_jsx(SectionHeader, { title: 'Model' }), _jsx(ModelInfo, {}), _jsx(Spacer, {})] }), _jsxs(_Fragment, { children: [_jsx(SectionHeader, { title: 'Selection' }), _jsx(SelectionInfo, {}), _jsx(Spacer, {}), _jsx(StructureMeasurementsControls, { initiallyCollapsed: true })] }), _jsx(MesoQuickStylesControls, {}), _jsx(Spacer, {}), _jsx(SectionHeader, { title: 'Entities' }), _jsx(EntityControls, {}), _jsx(Spacer, {}), this.hasFocusInfo && _jsxs(_Fragment, { children: [_jsx(SectionHeader, { title: 'Focus Info' }), _jsx(FocusInfo, {}), _jsx(Spacer, {})] })] });
     }
 }