molstar 4.3.0 → 4.4.0

package/lib/apps/mesoscale-explorer/data/petworld/preset.js

@@ -7,7 +7,7 @@ import { StateObjectRef } from '../../../../mol-state';
 import { StructureFromPetworld } from './model';
 import { SpacefillRepresentationProvider } from '../../../../mol-repr/structure/representation/spacefill';
 import { StructureRepresentation3D } from '../../../../mol-plugin-state/transforms/representation';
-import { MesoscaleGroup, MesoscaleState, getDistinctBaseColors, getGraphicsModeProps, getMesoscaleGroupParams } from '../state';
+import { MesoscaleGroup, MesoscaleState, getDistinctBaseColors, getGraphicsModeProps, getMesoscaleGroupParams, updateColors } from '../state';
 import { ColorNames } from '../../../../mol-util/color/names';
 import { MmcifFormat } from '../../../../mol-model-formats/structure/mmcif';
 import { Task } from '../../../../mol-task';
@@ -91,11 +91,11 @@ export async function createPetworldHierarchy(plugin, trajectory) {
     const groupParams = getMesoscaleGroupParams(graphicsMode);
     const group = await state.build()
         .toRoot()
-        .applyOrUpdateTagged('group:ent:', MesoscaleGroup, { ...groupParams, root: true, index: -1, tag: `ent:`, label: 'entity', color: { type: 'generate', value: ColorNames.white, variability: 20, shift: 0, lightness: 0, alpha: 1, emissive: 0 } }, { tags: 'group:ent:', state: { isCollapsed: false, isHidden: groupParams.hidden } })
+        .applyOrUpdateTagged('group:ent:', MesoscaleGroup, { ...groupParams, root: true, index: -1, tag: `ent:`, label: 'entity', color: { type: 'generate', illustrative: false, value: ColorNames.white, variability: 20, shift: 0, lightness: 0, alpha: 1, emissive: 0 } }, { tags: 'group:ent:', state: { isCollapsed: false, isHidden: groupParams.hidden } })
         .commit({ revertOnError: true });
     await state.build()
         .to(group)
-        .applyOrUpdateTagged(`group:ent:mem`, MesoscaleGroup, { ...groupParams, index: undefined, tag: `ent:mem`, label: 'Membrane', color: { type: 'uniform', value: ColorNames.lightgrey, variability: 20, shift: 0, lightness: 0, alpha: 1, emissive: 0 } }, { tags: `ent:`, state: { isCollapsed: true, isHidden: groupParams.hidden } })
+        .applyOrUpdateTagged(`group:ent:mem`, MesoscaleGroup, { ...groupParams, index: undefined, tag: `ent:mem`, label: 'Membrane', color: { type: 'uniform', illustrative: false, value: ColorNames.lightgrey, variability: 20, shift: 0, lightness: 0, alpha: 1, emissive: 0 } }, { tags: `ent:`, state: { isCollapsed: true, isHidden: groupParams.hidden } })
         .commit();
     const colors = getDistinctBaseColors(other.length, 0);
     await state.transaction(async () => {
@@ -115,6 +115,9 @@ export async function createPetworldHierarchy(plugin, trajectory) {
                     .apply(StructureRepresentation3D, getSpacefillParams(colors[i], graphicsMode), { tags: [`ent:`] });
             }
             await build.commit();
+            const values = { type: 'group-generate', value: ColorNames.white, lightness: 0, alpha: 1 };
+            const options = { ignoreLight: true, materialStyle: { metalness: 0, roughness: 1.0, bumpiness: 0 }, celShaded: true, };
+            await updateColors(plugin, values, options);
         }
         catch (e) {
             console.error(e);

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

@@ -1,101 +1,106 @@
-<!DOCTYPE html>
-<html lang="en">
-    <head>
-        <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">
-        <title>Mol* Mesoscale Explorer</title>
-        <style>
-            * {
-                margin: 0;
-                padding: 0;
-                box-sizing: border-box;
-            }
-            html, body {
-                width: 100%;
-                height: 100%;
-                overflow: hidden;
-            }
-            hr {
-                margin: 10px;
-            }
-            h1, h2, h3, h4, h5 {
-                margin-top: 5px;
-                margin-bottom: 3px;
-            }
-            button {
-                padding: 2px;
-            }
-            #app {
-                position: absolute;
-                left: 100px;
-                top: 100px;
-                width: 800px;
-                height: 600px;
-            }
-        </style>
-        <link rel="stylesheet" type="text/css" href="molstar.css" />
-    </head>
-    <body>
-        <div id="app"></div>
-        <script type="text/javascript" src="./molstar.js"></script>
-        <script type="text/javascript">
-            function getParam(name, regex) {
-                var r = new RegExp(name + '=' + '(' + regex + ')[&]?', 'i');
-                return decodeURIComponent(((window.location.search || '').match(r) || [])[1] || '');
-            }
-
-            var debugMode = getParam('debug-mode', '[^&]+').trim() === '1';
-            if (debugMode) molstar.setDebugMode(debugMode);
-
-            var timingMode = getParam('timing-mode', '[^&]+').trim() === '1';
-            if (timingMode) molstar.setTimingMode(timingMode);
-
-            var hideControls = getParam('hide-controls', '[^&]+').trim() === '1';
-            var preferWebgl1 = getParam('prefer-webgl1', '[^&]+').trim() === '1' || void 0;
-            var allowMajorPerformanceCaveat = getParam('allow-major-performance-caveat', '[^&]+').trim() === '1';
-            var powerPreference = getParam('power-preference', '[^&]+').trim().toLowerCase();
-            var graphicsMode = getParam('graphics-mode', '[^&]+').trim().toLowerCase();
-
-            molstar.MesoscaleExplorer.create('app', {
-                layoutShowControls: !hideControls,
-                viewportShowExpand: false,
-                preferWebgl1: preferWebgl1,
-                allowMajorPerformanceCaveat: allowMajorPerformanceCaveat,
-                powerPreference: powerPreference || 'high-performance',
-                graphicsMode: graphicsMode || 'quality',
-            }).then(me => {
-                var example = getParam('example', '[^&]+').trim();
-                if (example) {
-                    me.loadExample(example);
-                    return;
-                }
-
-                var url = getParam('url', '[^&]+').trim();
-                var type = getParam('type', '[^&]+').trim();
-                if (url && type) {
-                    me.loadUrl(url, type);
-                    return;
-                }
-
-                var pdb = getParam('pdb', '[^&]+').trim();
-                if (pdb) {
-                    me.loadPdb(pdb);
-                    return;
-                }
-
-                var pdbdev = getParam('pdbdev', '[^&]+').trim();
-                if (pdbdev) {
-                    me.loadPdbDev(pdbdev);
-                    return;
-                }
-
-                window.addEventListener('unload', () => {
-                    // to aid GC
-                    me.dispose();
-                });
-            });
-        </script>
-        <!-- __MOLSTAR_ANALYTICS__ -->
-    </body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <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>
+            * {
+                margin: 0;
+                padding: 0;
+                box-sizing: border-box;
+            }
+            html, body {
+                width: 100%;
+                height: 100%;
+                overflow: hidden;
+            }
+            hr {
+                margin: 10px;
+            }
+            h1, h2, h3, h4, h5 {
+                margin-top: 5px;
+                margin-bottom: 3px;
+            }
+            button {
+                padding: 2px;
+            }
+            #app {
+                position: absolute;
+                left: 100px;
+                top: 100px;
+                width: 800px;
+                height: 600px;
+            }
+        </style>
+        <link rel="stylesheet" type="text/css" href="molstar.css" />
+    </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] || '');
+            }
+
+            var debugMode = getParam('debug-mode', '[^&]+').trim() === '1';
+            if (debugMode) molstar.setDebugMode(debugMode);
+
+            var timingMode = getParam('timing-mode', '[^&]+').trim() === '1';
+            if (timingMode) molstar.setTimingMode(timingMode);
+
+            var hideControls = getParam('hide-controls', '[^&]+').trim() === '1';
+            var preferWebgl1 = getParam('prefer-webgl1', '[^&]+').trim() === '1' || void 0;
+            var allowMajorPerformanceCaveat = getParam('allow-major-performance-caveat', '[^&]+').trim() === '1';
+            var powerPreference = getParam('power-preference', '[^&]+').trim().toLowerCase();
+            var graphicsMode = getParam('graphics-mode', '[^&]+').trim().toLowerCase();
+
+            molstar.MesoscaleExplorer.create('app', {
+                layoutShowControls: !hideControls,
+                viewportShowExpand: false,
+                preferWebgl1: preferWebgl1,
+                allowMajorPerformanceCaveat: allowMajorPerformanceCaveat,
+                powerPreference: powerPreference || 'high-performance',
+                graphicsMode: graphicsMode || 'quality',
+                driver: driver
+            }).then(me => {
+                var example = getParam('example', '[^&]+').trim();
+                if (example) {
+                    me.loadExample(example);
+                    return;
+                }
+
+                var url = getParam('url', '[^&]+').trim();
+                var type = getParam('type', '[^&]+').trim();
+                if (url && type) {
+                    me.loadUrl(url, type);
+                    return;
+                }
+
+                var pdb = getParam('pdb', '[^&]+').trim();
+                if (pdb) {
+                    me.loadPdb(pdb);
+                    return;
+                }
+
+                var pdbdev = getParam('pdbdev', '[^&]+').trim();
+                if (pdbdev) {
+                    me.loadPdbDev(pdbdev);
+                    return;
+                }
+
+                window.addEventListener('unload', () => {
+                    // to aid GC
+                    me.dispose();
+                });
+            });
+        </script>
+        <!-- __MOLSTAR_ANALYTICS__ -->
+    </body>
+</html>