molstar 4.2.0 → 4.4.0

package/lib/apps/mesoscale-explorer/data/state.d.ts

@@ -19,6 +19,7 @@ export declare function getDistinctGroupColors(count: number, color: Color, vari
 export declare function getDistinctBaseColors(count: number, shift: number, props?: Partial<DistinctColorsProps>): Color[];
 export declare const ColorParams: {
     type: PD.Select<string>;
+    illustrative: PD.BooleanParam;
     value: PD.Color;
     variability: PD.Numeric;
     shift: PD.Numeric;
@@ -30,6 +31,7 @@ export type ColorProps = PD.Values<typeof ColorParams>;
 export declare const ColorValueParam: PD.Color;
 export declare const RootParams: {
     type: PD.Select<string>;
+    illustrative: PD.BooleanParam;
     value: PD.Color;
     variability: PD.Numeric;
     shift: PD.Numeric;
@@ -41,16 +43,32 @@ export declare const LightnessParams: {
     lightness: PD.Numeric;
 };
 export declare const DimLightness = 6;
+export declare const IllustrativeParams: {
+    illustrative: PD.BooleanParam;
+};
 export declare const OpacityParams: {
     alpha: PD.Numeric;
 };
 export declare const EmissiveParams: {
     emissive: PD.Numeric;
 };
+export declare const celShaded: {
+    celShaded: PD.BooleanParam;
+};
+export type celShadedProps = PD.Values<typeof celShaded>;
 export declare const PatternParams: {
     frequency: PD.Numeric;
     amplitude: PD.Numeric;
 };
+export declare const StyleParams: {
+    ignoreLight: PD.BooleanParam;
+    materialStyle: PD.Group<PD.Normalize<{
+        metalness: number;
+        roughness: number;
+        bumpiness: number;
+    }>>;
+    celShaded: PD.BooleanParam;
+};
 export declare const LodParams: {
     lodLevels: PD.ObjectList<PD.Normalize<{
         minDistance: number;
@@ -119,9 +137,11 @@ export declare const MesoscaleGroupParams: {
     index: PD.Value<number>;
     tag: PD.Value<string>;
     label: PD.Value<string>;
+    description: PD.Value<string>;
     hidden: PD.BooleanParam;
     color: PD.Group<PD.Normalize<{
         type: string;
+        illustrative: boolean;
         value: Color;
         variability: number;
         shift: number;
@@ -167,16 +187,16 @@ export type MesoscaleGroupProps = PD.Values<typeof MesoscaleGroupParams>;
 declare const MesoscaleGroupObject_base: {
     new (data: {}, props?: {
         label: string;
-        description?: string | undefined;
+        description?: string;
     } | undefined): {
         id: import("../../../mol-util").UUID;
         type: PSO.TypeInfo;
         label: string;
-        description?: string | undefined;
+        description?: string;
         data: {};
     };
     type: PSO.TypeInfo;
-    is(obj?: import("../../../mol-state").StateObject<any, import("../../../mol-state").StateObject.Type<any>> | undefined): obj is import("../../../mol-state").StateObject<{}, PSO.TypeInfo>;
+    is(obj?: import("../../../mol-state").StateObject): obj is import("../../../mol-state").StateObject<{}, PSO.TypeInfo>;
 };
 export declare class MesoscaleGroupObject extends MesoscaleGroupObject_base {
 }
@@ -185,9 +205,11 @@ export declare const MesoscaleGroup: import("../../../mol-state").StateTransform
     index: number;
     tag: string;
     label: string;
+    description: string;
     hidden: boolean;
     color: PD.Normalize<{
         type: any;
+        illustrative: any;
         value: any;
         variability: any;
         shift: any;
@@ -232,35 +254,47 @@ export declare const MesoscaleStateParams: {
     filter: PD.Value<string>;
     graphics: PD.Select<GraphicsMode>;
     description: PD.Value<string>;
+    focusInfo: PD.Value<string>;
     link: PD.Value<string>;
+    textSizeDescription: PD.Numeric;
+    index: PD.Value<number>;
 };
 declare const MesoscaleStateObject_base: {
     new (data: PD.Values<{
         filter: PD.Value<string>;
         graphics: PD.Select<GraphicsMode>;
         description: PD.Value<string>;
+        focusInfo: PD.Value<string>;
         link: PD.Value<string>;
+        textSizeDescription: PD.Numeric;
+        index: PD.Value<number>;
     }>, props?: {
         label: string;
-        description?: string | undefined;
+        description?: string;
     } | undefined): {
         id: import("../../../mol-util").UUID;
         type: PSO.TypeInfo;
         label: string;
-        description?: string | undefined;
+        description?: string;
         data: PD.Values<{
             filter: PD.Value<string>;
             graphics: PD.Select<GraphicsMode>;
             description: PD.Value<string>;
+            focusInfo: PD.Value<string>;
             link: PD.Value<string>;
+            textSizeDescription: PD.Numeric;
+            index: PD.Value<number>;
         }>;
     };
     type: PSO.TypeInfo;
-    is(obj?: import("../../../mol-state").StateObject<any, import("../../../mol-state").StateObject.Type<any>> | undefined): obj is import("../../../mol-state").StateObject<PD.Values<{
+    is(obj?: import("../../../mol-state").StateObject): obj is import("../../../mol-state").StateObject<PD.Values<{
         filter: PD.Value<string>;
         graphics: PD.Select<GraphicsMode>;
         description: PD.Value<string>;
+        focusInfo: PD.Value<string>;
         link: PD.Value<string>;
+        textSizeDescription: PD.Numeric;
+        index: PD.Value<number>;
     }>, PSO.TypeInfo>;
 };
 export declare class MesoscaleStateObject extends MesoscaleStateObject_base {
@@ -277,12 +311,16 @@ declare const MesoscaleState: {
 export declare function getRoots(plugin: PluginContext): StateSelection.CellSeq<StateObjectCell<MesoscaleGroupObject>>;
 export declare function getGroups(plugin: PluginContext, tag?: string): StateSelection.CellSeq<StateObjectCell<MesoscaleGroupObject>>;
 export declare function getAllGroups(plugin: PluginContext, tag?: string): StateObjectCell<import("../../../mol-state").StateObject<any, import("../../../mol-state").StateObject.Type<any>>, import("../../../mol-state").StateTransform<import("../../../mol-state").StateTransformer<import("../../../mol-state").StateObject<any, import("../../../mol-state").StateObject.Type<any>>, import("../../../mol-state").StateObject<any, import("../../../mol-state").StateObject.Type<any>>, any>>>[];
-export declare function getAllLeafGroups(plugin: PluginContext, tag: string): StateObjectCell<import("../../../mol-state").StateObject<any, import("../../../mol-state").StateObject.Type<any>>, import("../../../mol-state").StateTransform<import("../../../mol-state").StateTransformer<import("../../../mol-state").StateObject<any, import("../../../mol-state").StateObject.Type<any>>, import("../../../mol-state").StateObject<any, import("../../../mol-state").StateObject.Type<any>>, any>>>[];
+export declare function getAllLeafGroups(plugin: PluginContext, tag: string | undefined): StateObjectCell<import("../../../mol-state").StateObject<any, import("../../../mol-state").StateObject.Type<any>>, import("../../../mol-state").StateTransform<import("../../../mol-state").StateTransformer<import("../../../mol-state").StateObject<any, import("../../../mol-state").StateObject.Type<any>>, import("../../../mol-state").StateObject<any, import("../../../mol-state").StateObject.Type<any>>, any>>>[];
 type EntityCells = StateSelection.CellSeq<StateObjectCell<PSO.Molecule.Structure.Representation3D | PSO.Shape.Representation3D>>;
 export declare function getEntities(plugin: PluginContext, tag?: string): EntityCells;
-export declare function getFilteredEntities(plugin: PluginContext, tag: string, filter: string): StateObjectCell<PSO.Molecule.Structure.Representation3D | PSO.Shape.Representation3D, import("../../../mol-state").StateTransform<import("../../../mol-state").StateTransformer<import("../../../mol-state").StateObject<any, import("../../../mol-state").StateObject.Type<any>>, import("../../../mol-state").StateObject<any, import("../../../mol-state").StateObject.Type<any>>, any>>>[];
+export declare function getFilteredEntities(plugin: PluginContext, tag: string | undefined, filter: string | undefined): EntityCells;
 export declare function getAllEntities(plugin: PluginContext, tag?: string): EntityCells;
-export declare function getAllFilteredEntities(plugin: PluginContext, tag: string, filter: string): StateObjectCell<PSO.Molecule.Structure.Representation3D | PSO.Shape.Representation3D, import("../../../mol-state").StateTransform<import("../../../mol-state").StateTransformer<import("../../../mol-state").StateObject<any, import("../../../mol-state").StateObject.Type<any>>, import("../../../mol-state").StateObject<any, import("../../../mol-state").StateObject.Type<any>>, any>>>[];
+export declare function getAllFilteredEntities(plugin: PluginContext, tag: string | undefined, filter: string | undefined): EntityCells;
+export declare function getEveryEntity(plugin: PluginContext, filter?: string, tag?: string): EntityCells;
 export declare function getEntityLabel(plugin: PluginContext, cell: StateObjectCell): string;
-export declare function updateColors(plugin: PluginContext, values: PD.Values, tag: string, filter: string): Promise<void>;
+export declare function getCellDescription(cell: StateObjectCell): string;
+export declare function getEntityDescription(plugin: PluginContext, cell: StateObjectCell): string;
+export declare function updateColors(plugin: PluginContext, values: PD.Values, options?: PD.Values, tag?: string, filter?: string): Promise<void>;
 export declare function expandAllGroups(plugin: PluginContext): void;
+export declare function updateReprParams(plugin: PluginContext, options: PD.Values): Promise<void>;

package/lib/apps/mesoscale-explorer/data/state.js

@@ -18,6 +18,7 @@ import { StateObjectRef, StateSelection } from '../../../mol-state';
 import { ShapeRepresentation3D, StructureRepresentation3D } from '../../../mol-plugin-state/transforms/representation';
 import { assertUnreachable } from '../../../mol-util/type-helpers';
 import { saturate } from '../../../mol-math/interpolate';
+import { Material } from '../../../mol-util/material';
 function getHueRange(hue, variability) {
     let min = hue - variability;
     const minOverflow = (min < 0 ? -min : 0);
@@ -94,6 +95,7 @@ export function getDistinctBaseColors(count, shift, props) {
 }
 export const ColorParams = {
     type: PD.Select('generate', PD.arrayToOptions(['generate', 'uniform', 'custom'])),
+    illustrative: PD.Boolean(false, { description: 'Illustrative style', hideIf: p => p.type === 'custom' }),
     value: PD.Color(Color(0xFFFFFF), { hideIf: p => p.type === 'custom' }),
     variability: PD.Numeric(20, { min: 1, max: 180, step: 1 }, { hideIf: p => p.type !== 'generate' }),
     shift: PD.Numeric(0, { min: 0, max: 100, step: 1 }, { hideIf: p => !p.type.includes('generate') }),
@@ -104,6 +106,7 @@ export const ColorParams = {
 export const ColorValueParam = PD.Color(Color(0xFFFFFF));
 export const RootParams = {
     type: PD.Select('custom', PD.arrayToOptions(['group-generate', 'group-uniform', 'generate', 'uniform', 'custom'])),
+    illustrative: PD.Boolean(false, { description: 'Illustrative style', hideIf: p => p.type === 'custom' }),
     value: PD.Color(Color(0xFFFFFF), { hideIf: p => p.type !== 'uniform' }),
     variability: PD.Numeric(20, { min: 1, max: 180, step: 1 }, { hideIf: p => p.type !== 'group-generate' }),
     shift: PD.Numeric(0, { min: 0, max: 100, step: 1 }, { hideIf: p => !p.type.includes('generate') }),
@@ -115,16 +118,27 @@ export const LightnessParams = {
     lightness: PD.Numeric(0, { min: -6, max: 6, step: 0.1 }),
 };
 export const DimLightness = 6;
+export const IllustrativeParams = {
+    illustrative: PD.Boolean(false, { description: 'Illustrative style' }),
+};
 export const OpacityParams = {
     alpha: PD.Numeric(1, { min: 0, max: 1, step: 0.01 }),
 };
 export const EmissiveParams = {
     emissive: PD.Numeric(0, { min: 0, max: 1, step: 0.01 }),
 };
+export const celShaded = {
+    celShaded: PD.Boolean(false, { description: 'Cel Shading light for stylized rendering of representations' })
+};
 export const PatternParams = {
     frequency: PD.Numeric(1, { min: 0, max: 1, step: 0.01 }),
     amplitude: PD.Numeric(1, { min: 0, max: 1, step: 0.01 }),
 };
+export const StyleParams = {
+    ignoreLight: PD.Boolean(false, { description: 'Ignore light for stylized rendering of representations' }),
+    materialStyle: Material.getParam(),
+    celShaded: PD.Boolean(false, { description: 'Cel Shading light for stylized rendering of representations' }),
+};
 export const LodParams = {
     lodLevels: Spheres.Params.lodLevels,
     cellSize: Spheres.Params.cellSize,
@@ -214,6 +228,7 @@ export const MesoscaleGroupParams = {
     index: PD.Value(-1, { isHidden: true }),
     tag: PD.Value('', { isHidden: true }),
     label: PD.Value('', { isHidden: true }),
+    description: PD.Value('', { isHidden: true }),
     hidden: PD.Boolean(false),
     color: PD.Group(RootParams),
     lightness: PD.Numeric(0, { min: -6, max: 6, step: 0.1 }),
@@ -233,7 +248,7 @@ export const MesoscaleGroup = PluginStateTransform.BuiltIn({
 })({
     apply({ a, params }, plugin) {
         return Task.create('Apply Mesoscale Group', async () => {
-            return new MesoscaleGroupObject({}, { label: params.label });
+            return new MesoscaleGroupObject({}, { label: params.label, description: params.description });
         });
     },
 });
@@ -309,7 +324,10 @@ export const MesoscaleStateParams = {
     filter: PD.Value('', { isHidden: true }),
     graphics: PD.Select('quality', PD.arrayToOptions(['ultra', 'quality', 'balanced', 'performance', 'custom'])),
     description: PD.Value('', { isHidden: true }),
+    focusInfo: PD.Value('', { isHidden: true }),
     link: PD.Value('', { isHidden: true }),
+    textSizeDescription: PD.Numeric(14, { min: 1, max: 100, step: 1 }, { isHidden: true }),
+    index: PD.Value(-1, { isHidden: true })
 };
 export class MesoscaleStateObject extends PSO.Create({ name: 'Mesoscale State', typeClass: 'Object' }) {
 }
@@ -420,6 +438,8 @@ function getFilterMatcher(filter) {
         : new RegExp(escapeRegExp(filter), 'gi');
 }
 export function getFilteredEntities(plugin, tag, filter) {
+    if (!filter)
+        return getEntities(plugin, tag);
     const matcher = getFilterMatcher(filter);
     return getEntities(plugin, tag).filter(c => getEntityLabel(plugin, c).match(matcher) !== null);
 }
@@ -435,18 +455,40 @@ export function getAllEntities(plugin, tag) {
     return _getAllEntities(plugin, tag, []);
 }
 export function getAllFilteredEntities(plugin, tag, filter) {
+    if (!filter)
+        return getAllEntities(plugin, tag);
     const matcher = getFilterMatcher(filter);
     return getAllEntities(plugin, tag).filter(c => getEntityLabel(plugin, c).match(matcher) !== null);
 }
+export function getEveryEntity(plugin, filter, tag) {
+    if (filter) {
+        const matcher = getFilterMatcher(filter);
+        return getAllEntities(plugin, tag).filter(c => getEntityLabel(plugin, c).match(matcher) !== null);
+    }
+    else {
+        return getAllEntities(plugin, tag);
+    }
+}
 export function getEntityLabel(plugin, cell) {
     var _a, _b;
     return ((_b = (_a = StateObjectRef.resolve(plugin.state.data, cell.transform.parent)) === null || _a === void 0 ? void 0 : _a.obj) === null || _b === void 0 ? void 0 : _b.label) || 'Entity';
 }
-//
-export async function updateColors(plugin, values, tag, filter) {
+export function getCellDescription(cell) {
+    var _a, _b;
+    // markdown style for description
+    return '**' + ((_a = cell === null || cell === void 0 ? void 0 : cell.obj) === null || _a === void 0 ? void 0 : _a.label) + '**\n\n' + ((_b = cell === null || cell === void 0 ? void 0 : cell.obj) === null || _b === void 0 ? void 0 : _b.description);
+}
+export function getEntityDescription(plugin, cell) {
+    const s = StateObjectRef.resolve(plugin.state.data, cell.transform.parent);
+    const d = getCellDescription(s);
+    return d;
+}
+export async function updateColors(plugin, values, options, tag, filter) {
     var _a, _b;
     const update = plugin.state.data.build();
-    const { type, value, shift, lightness, alpha, emissive } = values;
+    const { type, illustrative, value, shift, lightness, alpha, emissive } = values;
+    const doLighting = (options !== undefined);
+    const { ignoreLight, materialStyle: material, celShaded } = options ? options : { ignoreLight: true, materialStyle: { metalness: 0, roughness: 0.2, bumpiness: 0 }, celShaded: false };
     if (type === 'group-generate' || type === 'group-uniform') {
         const groups = getAllLeafGroups(plugin, tag);
         const baseColors = getDistinctBaseColors(groups.length, shift);
@@ -462,11 +504,20 @@ export async function updateColors(plugin, values, tag, filter) {
                 const c = type === 'group-generate' ? groupColors[j] : baseColors[i];
                 update.to(entities[j]).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: lightness } } } };
+                        }
+                        else {
+                            old.colorTheme = { name: 'uniform', params: { value: c, lightness: lightness } };
+                        }
                         old.type.params.alpha = alpha;
                         old.type.params.xrayShaded = alpha < 1 ? 'inverted' : false;
                         old.type.params.emissive = emissive;
+                        if (doLighting) {
+                            old.type.params.ignoreLight = ignoreLight;
+                            old.type.params.material = material;
+                            old.type.params.celShaded = celShaded;
+                        }
                     }
                     else if (old.coloring) {
                         old.coloring.params.color = c;
@@ -479,6 +530,7 @@ export async function updateColors(plugin, values, tag, filter) {
             }
             update.to(g.transform.ref).update(old => {
                 old.color.type = type === 'group-generate' ? 'generate' : 'uniform';
+                old.color.illustrative = illustrative;
                 old.color.value = baseColors[i];
                 old.color.lightness = lightness;
                 old.color.alpha = alpha;
@@ -496,11 +548,20 @@ export async function updateColors(plugin, values, tag, filter) {
             const c = type === 'generate' ? groupColors[j] : value;
             update.to(entities[j]).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: lightness } } } };
+                    }
+                    else {
+                        old.colorTheme = { name: 'uniform', params: { value: c, lightness: lightness } };
+                    }
                     old.type.params.alpha = alpha;
                     old.type.params.xrayShaded = alpha < 1 ? 'inverted' : false;
                     old.type.params.emissive = emissive;
+                    if (doLighting) {
+                        old.type.params.ignoreLight = ignoreLight;
+                        old.type.params.material = material;
+                        old.type.params.celShaded = celShaded;
+                    }
                 }
                 else if (old.coloring) {
                     old.coloring.params.color = c;
@@ -515,6 +576,7 @@ export async function updateColors(plugin, values, tag, filter) {
         for (const o of others) {
             update.to(o).update(old => {
                 old.color.type = type === 'generate' ? 'custom' : 'uniform';
+                old.color.illustrative = illustrative;
                 old.color.value = value;
                 old.color.lightness = lightness;
                 old.color.alpha = alpha;
@@ -533,3 +595,16 @@ export function expandAllGroups(plugin) {
     }
 }
 ;
+export async function updateReprParams(plugin, options) {
+    const update = plugin.state.data.build();
+    const { ignoreLight, materialStyle: material, celShaded } = options;
+    const entities = getAllEntities(plugin);
+    for (let j = 0; j < entities.length; ++j) {
+        update.to(entities[j]).update(old => {
+            old.type.params.ignoreLight = ignoreLight;
+            old.type.params.material = material;
+            old.type.params.celShaded = celShaded;
+        });
+    }
+    await update.commit();
+}

package/lib/apps/mesoscale-explorer/index.html

@@ -4,6 +4,7 @@
         <meta charset="utf-8" />
         <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
         <link rel="icon" href="./favicon.ico" type="image/x-icon">
+        <link rel="stylesheet" href="./extras/driver.css"/>
         <title>Mol* Mesoscale Explorer</title>
         <style>
             * {
@@ -38,8 +39,11 @@
     </head>
     <body>
         <div id="app"></div>
+        <script src="./extras/driver.js.iife.js"></script>
         <script type="text/javascript" src="./molstar.js"></script>
         <script type="text/javascript">
+            const driver = window.driver ? window.driver.js.driver() : undefined;
+
             function getParam(name, regex) {
                 var r = new RegExp(name + '=' + '(' + regex + ')[&]?', 'i');
                 return decodeURIComponent(((window.location.search || '').match(r) || [])[1] || '');
@@ -64,6 +68,7 @@
                 allowMajorPerformanceCaveat: allowMajorPerformanceCaveat,
                 powerPreference: powerPreference || 'high-performance',
                 graphicsMode: graphicsMode || 'quality',
+                driver: driver
             }).then(me => {
                 var example = getParam('example', '[^&]+').trim();
                 if (example) {
@@ -98,4 +103,4 @@
         </script>
         <!-- __MOLSTAR_ANALYTICS__ -->
     </body>
-</html>
+</html>

package/lib/apps/mesoscale-explorer/style.scss

@@ -24,6 +24,7 @@ $logo-background: rgba(0,0,0,0.75);
 }
 
 @import 'mol-plugin-ui/skin/base/base';
+@import 'mol-plugin-ui/skin/base/variables';
 
 a {
     color: $font-color;
@@ -31,3 +32,35 @@ a {
         color: $hover-font-color;
     }
 }
+
+
+.msp-snapshot-description-me {
+    background: rgba(red($default-background), green($default-background), blue($default-background), 0.5);
+
+    position: absolute;
+    height: 50vh; // 50% of the viewport height
+    left: 0;
+    top: $control-spacing + $row-height;
+    padding: (0.66 * $control-spacing) $control-spacing;
+
+    resize: both; /* Allows resizing in both directions */
+    overflow: auto; /* Adjust as needed */
+
+    a {
+        text-decoration: underline;
+        cursor: pointer;
+        color: $font-color;
+    }
+
+    ul, ol {
+        padding-left: $control-spacing + 4px;
+    }
+
+    &.hidden {
+        display: none;
+    }
+
+    &.shown {
+        display: block; // or 'flex', 'grid', etc. depending on your layout
+    }
+}

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

@@ -21,6 +21,7 @@ export declare class ModelInfo extends PluginUIComponent<{}, {
     };
     componentDidMount(): void;
     get info(): {
+        selectionDescription: string;
         description: string;
         link: string;
     } | undefined;
@@ -38,6 +39,7 @@ export declare class SelectionInfo extends PluginUIComponent<{}, {
     get info(): {
         label: string;
         key: string;
+        description?: string;
     }[];
     find(label: string): void;
     remove(key: string): void;
@@ -48,6 +50,19 @@ export declare class SelectionInfo extends PluginUIComponent<{}, {
     renderStyle(): import("react/jsx-runtime").JSX.Element;
     render(): import("react/jsx-runtime").JSX.Element;
 }
+export declare function MesoMarkdownAnchor({ href, children, element }: {
+    href?: string;
+    children?: any;
+    element?: any;
+}): any;
+export declare function MesoViewportSnapshotDescription(): import("react/jsx-runtime").JSX.Element | null;
+export declare class FocusInfo extends PluginUIComponent<{}, {
+    isDisabled: boolean;
+}> {
+    componentDidMount(): void;
+    get info(): string;
+    render(): import("react/jsx-runtime").JSX.Element;
+}
 export declare class EntityControls extends PluginUIComponent<{}, {
     isDisabled: boolean;
 }> {
@@ -78,7 +93,7 @@ declare class Node<P extends {}, S extends {
     is(e: State.ObjectEvent): boolean;
     get ref(): string;
     get cell(): (P & {
-        cell: StateObjectCell<import("../../../mol-state").StateObject<any, import("../../../mol-state").StateObject.Type<any>>, import("../../../mol-state").StateTransform<StateTransformer<import("../../../mol-state").StateObject<any, import("../../../mol-state").StateObject.Type<any>>, import("../../../mol-state").StateObject<any, import("../../../mol-state").StateObject.Type<any>>, any>>>;
+        cell: StateObjectCell;
         depth: number;
     } & {
         children?: any;
@@ -102,6 +117,7 @@ export declare class GroupNode extends Node<{
     toggleColor: (e?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
     toggleClip: () => void;
     toggleRoot: () => void;
+    showInfo: (e: React.MouseEvent<HTMLElement>) => void;
     highlight: (e: React.MouseEvent<HTMLElement>) => void;
     clearHighlight: (e: React.MouseEvent<HTMLElement>) => void;
     get groups(): StateSelection.CellSeq<StateObjectCell<import("../data/state").MesoscaleGroupObject, import("../../../mol-state").StateTransform<StateTransformer<import("../../../mol-state").StateObject<any, import("../../../mol-state").StateObject.Type<any>>, import("../../../mol-state").StateObject<any, import("../../../mol-state").StateObject.Type<any>>, any>>>>;
@@ -162,9 +178,11 @@ export declare class EntityNode extends Node<{}, {
         index: number;
         tag: string;
         label: string;
+        description: string;
         hidden: boolean;
         color: PD.Normalize<{
             type: any;
+            illustrative: any;
             value: any;
             variability: any;
             shift: any;
@@ -198,6 +216,9 @@ export declare class EntityNode extends Node<{}, {
     center: (e: React.MouseEvent<HTMLElement>) => void;
     handleClick: (e: React.MouseEvent<HTMLElement>) => void;
     get colorValue(): Color | undefined;
+    get illustrativeValue(): {
+        illustrative: boolean;
+    } | undefined;
     get lightnessValue(): {
         lightness: number;
     } | undefined;
@@ -214,6 +235,7 @@ export declare class EntityNode extends Node<{}, {
         frequency: number;
     } | undefined;
     updateColor: ParamOnChange;
+    updateIllustrative: (values: PD.Values) => Promise<void>;
     updateLightness: (values: PD.Values) => Promise<void>;
     updateOpacity: (values: PD.Values) => Promise<void>;
     updateEmissive: (values: PD.Values) => Promise<void>;