pdbe-molstar 3.7.1 → 3.8.0

package/lib/sequence-color/color.js

@@ -5,40 +5,87 @@ const selector_1 = require("molstar/lib/extensions/mvs/components/selector");
 const structure_1 = require("molstar/lib/mol-model/structure");
 const color_1 = require("molstar/lib/mol-util/color");
 const param_definition_1 = require("molstar/lib/mol-util/param-definition");
-const prop_1 = require("./prop");
+const sequence_color_annotations_prop_1 = require("./sequence-color-annotations-prop");
+const sequence_color_theme_prop_1 = require("./sequence-color-theme-prop");
 /** Special color value meaning "no color assigned" */
 const NoColor = (0, color_1.Color)(-1);
 var CustomSequenceColorTheme;
 (function (CustomSequenceColorTheme) {
+    /** Provider name (key) for this color theme */
+    CustomSequenceColorTheme.Name = 'custom-sequence-color';
+    /** Parameter definition for this color theme */
     CustomSequenceColorTheme.Params = {};
-    function Theme(ctx, props) {
-        let color = () => NoColor;
-        if (ctx.structure && !ctx.structure.isEmpty) {
-            const colorData = prop_1.SequenceColorProperty.Provider.get(ctx.structure).value;
-            if (colorData && colorData.items.length > 0) {
-                color = location => structure_1.StructureElement.Location.is(location) ? sequenceColorForLocation(colorData, location) : NoColor;
-            }
-        }
+    function Theme(ctx, props, colorThemeRegistry) {
         return {
-            factory: Theme,
+            factory: (ctx_, props_) => Theme(ctx_, props_, colorThemeRegistry),
             granularity: 'groupInstance',
-            color: color,
+            color: colorFn(ctx, colorThemeRegistry),
             props: props,
-            description: 'Assigns colors based on custom structure property `SequenceColorProperty`.',
+            description: 'Assigns colors based on custom structure property `SequenceColorProperty` and `SequenceColorBackgroundProperty`.',
         };
     }
     CustomSequenceColorTheme.Theme = Theme;
-    /** A thingy that is needed to register color theme "MVS Annotation" */
-    CustomSequenceColorTheme.Provider = {
-        name: 'custom-sequence-color',
-        label: 'Custom Sequence Color',
-        category: 'Miscellaneous',
-        factory: Theme,
-        getParams: ctx => CustomSequenceColorTheme.Params,
-        defaultValues: param_definition_1.ParamDefinition.getDefaultValues(CustomSequenceColorTheme.Params),
-        isApplicable: (ctx) => !!ctx.structure,
-    };
+    /** Create a provider for this color theme */
+    function makeProvider(colorThemeRegistry) {
+        return {
+            name: CustomSequenceColorTheme.Name,
+            label: 'Custom Sequence Color',
+            category: 'Miscellaneous',
+            factory: (ctx, props) => Theme(ctx, props, colorThemeRegistry),
+            getParams: ctx => CustomSequenceColorTheme.Params,
+            defaultValues: param_definition_1.ParamDefinition.getDefaultValues(CustomSequenceColorTheme.Params),
+            isApplicable: (ctx) => !!ctx.structure,
+        };
+    }
+    CustomSequenceColorTheme.makeProvider = makeProvider;
 })(CustomSequenceColorTheme || (exports.CustomSequenceColorTheme = CustomSequenceColorTheme = {}));
+/** Create color function based on `SequenceColorAnnotationsProperty` and `SequenceColorThemeProperty` */
+function colorFn(ctx, colorThemeRegistry) {
+    const background = themeColorFn(ctx, colorThemeRegistry);
+    const foreground = annotColorFn(ctx);
+    if (foreground && background) {
+        return (location, isSecondary) => {
+            const fgColor = foreground(location, isSecondary);
+            if (fgColor >= 0)
+                return fgColor;
+            else
+                return background(location, isSecondary);
+        };
+    }
+    if (foreground)
+        return foreground;
+    if (background)
+        return background;
+    return () => NoColor;
+}
+/** Create color function based on `SequenceColorThemeProperty` */
+function themeColorFn(ctx, colorThemeRegistry) {
+    var _a;
+    if (!colorThemeRegistry)
+        return undefined;
+    if (!ctx.structure || ctx.structure.isEmpty)
+        return undefined;
+    const data = sequence_color_theme_prop_1.SequenceColorThemeProperty.Provider.get(ctx.structure).value;
+    if (!(data === null || data === void 0 ? void 0 : data.useTheme))
+        return undefined;
+    const theme = (_a = colorThemeRegistry.get(data.theme.name)) === null || _a === void 0 ? void 0 : _a.factory(ctx, data.theme.params);
+    if (!theme || !('color' in theme))
+        return undefined;
+    if (data.themeStrength === 1)
+        return theme.color;
+    if (data.themeStrength === 0)
+        return () => data.dilutionColor;
+    return (location, isSecondary) => color_1.Color.interpolate(data.dilutionColor, theme.color(location, isSecondary), data.themeStrength);
+}
+/** Create color function based on `SequenceColorAnnotationsProperty` */
+function annotColorFn(ctx) {
+    if (!ctx.structure || ctx.structure.isEmpty)
+        return undefined;
+    const colorData = sequence_color_annotations_prop_1.SequenceColorAnnotationsProperty.Provider.get(ctx.structure).value;
+    if (!colorData || colorData.items.length === 0)
+        return undefined;
+    return location => structure_1.StructureElement.Location.is(location) ? sequenceColorForLocation(colorData, location) : NoColor;
+}
 function sequenceColorForLocation(colorData, location) {
     var _a, _b;
     var _c, _d, _e;

package/lib/sequence-color/{prop.d.ts → sequence-color-annotations-prop.d.ts}

@@ -3,13 +3,17 @@ import { CustomStructureProperty } from 'molstar/lib/mol-model-props/common/cust
 import { ElementIndex } from 'molstar/lib/mol-model/structure';
 import { Color } from 'molstar/lib/mol-util/color';
 import { ParamDefinition as PD } from 'molstar/lib/mol-util/param-definition';
-export declare namespace SequenceColorProperty {
-    /** Parameter definition for custom structure property `SequenceColorProperty` */
+export declare namespace SequenceColorAnnotationsProperty {
+    /** Provider name (key) for this custom property */
+    const Name = "sequence-color-annotations";
+    /** Parameter definition for this custom property */
     type Params = typeof Params;
     const Params: {
         colors: PD.ObjectList<PD.Normalize<{
             color: Color;
             selector: PD.NamedParams<"all" | "polymer" | "water" | "branched" | "ligand" | "ion" | "lipid" | "protein" | "nucleic" | "non-standard" | "coarse", "static"> | PD.NamedParams<import("molstar/lib/mol-script/script").Script, "script"> | PD.NamedParams<import("molstar/lib/mol-script/language/expression").Expression, "expression"> | PD.NamedParams<import("molstar/lib/mol-model/structure/structure/element/bundle").Bundle, "bundle"> | PD.NamedParams<PD.Normalize<{
+                label: string;
+                nullIfEmpty: boolean | undefined;
                 annotationId: string;
                 fieldName: string;
                 fieldValues: PD.NamedParams<PD.Normalize<unknown>, "all"> | PD.NamedParams<PD.Normalize<{
@@ -18,9 +22,9 @@ export declare namespace SequenceColorProperty {
             }>, "annotation">;
         }>>;
     };
-    /** Parameter values of custom structure property `SequenceColorProperty` */
+    /** Type of parameter values for this custom property */
     type Props = PD.Values<Params>;
-    /** Values of custom structure property `SequenceColorProperty` */
+    /** Type of values of this custom property */
     interface Data {
         items: {
             selector: Selector;
@@ -33,6 +37,6 @@ export declare namespace SequenceColorProperty {
             };
         };
     }
-    /** Provider for custom structure property `SequenceColorProperty` */
+    /** Provider for this custom property */
     const Provider: CustomStructureProperty.Provider<Params, Data>;
 }

package/lib/sequence-color/{prop.js → sequence-color-annotations-prop.js}

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SequenceColorProperty = void 0;
+exports.SequenceColorAnnotationsProperty = void 0;
 const tslib_1 = require("tslib");
 const selector_1 = require("molstar/lib/extensions/mvs/components/selector");
 const custom_structure_property_1 = require("molstar/lib/mol-model-props/common/custom-structure-property");
@@ -8,31 +8,34 @@ const custom_property_1 = require("molstar/lib/mol-model/custom-property");
 const color_1 = require("molstar/lib/mol-util/color");
 const names_1 = require("molstar/lib/mol-util/color/names");
 const param_definition_1 = require("molstar/lib/mol-util/param-definition");
-var SequenceColorProperty;
-(function (SequenceColorProperty) {
-    SequenceColorProperty.Params = {
+var SequenceColorAnnotationsProperty;
+(function (SequenceColorAnnotationsProperty) {
+    /** Provider name (key) for this custom property */
+    SequenceColorAnnotationsProperty.Name = 'sequence-color-annotations';
+    SequenceColorAnnotationsProperty.Params = {
         colors: param_definition_1.ParamDefinition.ObjectList({
             color: param_definition_1.ParamDefinition.Color(names_1.ColorNames.grey, { description: 'Color to apply to a substructure' }),
             selector: selector_1.SelectorParams,
         }, obj => color_1.Color.toHexStyle(obj.color), { description: 'List of substructure-color assignments' }),
     };
-    /** Provider for custom structure property `SequenceColorProperty` */
-    SequenceColorProperty.Provider = custom_structure_property_1.CustomStructureProperty.createProvider({
-        label: 'Sequence Color',
+    /** Provider for this custom property */
+    SequenceColorAnnotationsProperty.Provider = custom_structure_property_1.CustomStructureProperty.createProvider({
+        label: 'Sequence Color Annotations',
         descriptor: (0, custom_property_1.CustomPropertyDescriptor)({
-            name: 'sequence-color',
+            name: SequenceColorAnnotationsProperty.Name,
         }),
         type: 'root',
-        defaultParams: SequenceColorProperty.Params,
-        getParams: (data) => SequenceColorProperty.Params,
+        defaultParams: SequenceColorAnnotationsProperty.Params,
+        getParams: (data) => SequenceColorAnnotationsProperty.Params,
         isApplicable: (data) => data.root === data,
         obtain: (ctx, data, props) => tslib_1.__awaiter(this, void 0, void 0, function* () {
-            const fullProps = Object.assign(Object.assign({}, param_definition_1.ParamDefinition.getDefaultValues(SequenceColorProperty.Params)), props);
+            const fullProps = Object.assign(Object.assign({}, param_definition_1.ParamDefinition.getDefaultValues(SequenceColorAnnotationsProperty.Params)), props);
             const items = fullProps.colors.map(t => ({
+                // creating a copy, so we don't polute props later
                 selector: t.selector,
                 color: t.color,
             }));
             return { value: { items, colorCache: {} } };
         }),
     });
-})(SequenceColorProperty || (exports.SequenceColorProperty = SequenceColorProperty = {}));
+})(SequenceColorAnnotationsProperty || (exports.SequenceColorAnnotationsProperty = SequenceColorAnnotationsProperty = {}));

package/lib/sequence-color/sequence-color-theme-prop.d.ts

@@ -0,0 +1,46 @@
+import { CustomStructureProperty } from 'molstar/lib/mol-model-props/common/custom-structure-property';
+import { ColorTheme } from 'molstar/lib/mol-theme/color';
+import { ParamDefinition as PD } from 'molstar/lib/mol-util/param-definition';
+export declare namespace SequenceColorThemeProperty {
+    /** Provider name (key) for this custom property */
+    const Name = "sequence-color-theme";
+    /** Parameter definition for this custom property */
+    type Params = ReturnType<typeof makeParams>;
+    /** Create parameter definition for this custom property, using information from a color theme registry.
+     * If `colorThemeRegistry` is undefined, the `theme` parameter will be typed as `any` (i.e. no UI support). */
+    function makeParams(colorThemeRegistry: ColorTheme.Registry | undefined): {
+        useTheme: PD.BooleanParam;
+        theme: PD.Mapped<PD.NamedParams<unknown, string>> | PD.Group<PD.Normalize<{
+            name: string;
+            params: any;
+        }>>;
+        themeStrength: PD.Numeric;
+        dilutionColor: PD.Color;
+    };
+    /** Type of parameter values for this custom property */
+    type Props = PD.Values<Params>;
+    /** Type of values of this custom property */
+    type Data = Props;
+    /** Create a provider for this custom property, using information from a color theme registry.
+     * If `colorThemeRegistry` is undefined, the provider will work, but parameter definitions will not be inferred (i.e. limited UI support). */
+    function makeProvider(colorThemeRegistry: ColorTheme.Registry | undefined): CustomStructureProperty.Provider<Params, Data>;
+    /** Default provider for this custom property, without type information from a color theme registry (i.e. limited UI support).
+     * Use `makeProvider` to get a provider with full UI support. */
+    const Provider: CustomStructureProperty.Provider<{
+        useTheme: PD.BooleanParam;
+        theme: PD.Mapped<PD.NamedParams<unknown, string>> | PD.Group<PD.Normalize<{
+            name: string;
+            params: any;
+        }>>;
+        themeStrength: PD.Numeric;
+        dilutionColor: PD.Color;
+    }, PD.Values<{
+        useTheme: PD.BooleanParam;
+        theme: PD.Mapped<PD.NamedParams<unknown, string>> | PD.Group<PD.Normalize<{
+            name: string;
+            params: any;
+        }>>;
+        themeStrength: PD.Numeric;
+        dilutionColor: PD.Color;
+    }>>;
+}

package/lib/sequence-color/sequence-color-theme-prop.js

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SequenceColorThemeProperty = void 0;
+const tslib_1 = require("tslib");
+const custom_structure_property_1 = require("molstar/lib/mol-model-props/common/custom-structure-property");
+const custom_property_1 = require("molstar/lib/mol-model/custom-property");
+const structure_1 = require("molstar/lib/mol-model/structure");
+const names_1 = require("molstar/lib/mol-util/color/names");
+const object_1 = require("molstar/lib/mol-util/object");
+const param_definition_1 = require("molstar/lib/mol-util/param-definition");
+const AnyParams = param_definition_1.ParamDefinition.Value({}, { description: 'Parameter description not available' });
+var SequenceColorThemeProperty;
+(function (SequenceColorThemeProperty) {
+    /** Provider name (key) for this custom property */
+    SequenceColorThemeProperty.Name = 'sequence-color-theme';
+    /** Create parameter definition for this custom property, using information from a color theme registry.
+     * If `colorThemeRegistry` is undefined, the `theme` parameter will be typed as `any` (i.e. no UI support). */
+    function makeParams(colorThemeRegistry) {
+        return {
+            useTheme: param_definition_1.ParamDefinition.Boolean(false, { description: 'Turn on/off background sequence color theme' }),
+            theme: colorThemeRegistry ?
+                param_definition_1.ParamDefinition.Mapped('uniform', colorThemeRegistry.types, name => {
+                    try {
+                        return param_definition_1.ParamDefinition.Group(colorThemeRegistry.get(name).getParams({ structure: structure_1.Structure.Empty }));
+                    }
+                    catch (err) {
+                        console.warn(`Failed to obtain parameter definition for theme "${name}"`);
+                        return AnyParams;
+                    }
+                }, { hideIf: p => !p.useTheme })
+                : param_definition_1.ParamDefinition.Group({ name: param_definition_1.ParamDefinition.Text(), params: AnyParams }, { hideIf: p => !p.useTheme }),
+            themeStrength: param_definition_1.ParamDefinition.Numeric(1, { min: 0, max: 1, step: 0.01 }, { hideIf: p => !p.useTheme, description: 'Allows to "dilute" color coming from background sequence color theme' }),
+            dilutionColor: param_definition_1.ParamDefinition.Color(names_1.ColorNames.white, { hideIf: p => !p.useTheme || p.themeStrength === 1, description: 'Color used for "diluting" background sequence color theme' }),
+        };
+    }
+    SequenceColorThemeProperty.makeParams = makeParams;
+    /** Create a provider for this custom property, using information from a color theme registry.
+     * If `colorThemeRegistry` is undefined, the provider will work, but parameter definitions will not be inferred (i.e. limited UI support). */
+    function makeProvider(colorThemeRegistry) {
+        const params = makeParams(colorThemeRegistry);
+        return custom_structure_property_1.CustomStructureProperty.createProvider({
+            label: 'Sequence Color Theme',
+            descriptor: (0, custom_property_1.CustomPropertyDescriptor)({
+                name: SequenceColorThemeProperty.Name,
+            }),
+            type: 'root',
+            defaultParams: params,
+            getParams: (data) => params,
+            isApplicable: (data) => data.root === data,
+            obtain: (ctx, data, props) => tslib_1.__awaiter(this, void 0, void 0, function* () {
+                const fullProps = Object.assign(Object.assign({}, param_definition_1.ParamDefinition.getDefaultValues(params)), props);
+                return { value: (0, object_1.deepClone)(fullProps) };
+            }),
+        });
+    }
+    SequenceColorThemeProperty.makeProvider = makeProvider;
+    /** Default provider for this custom property, without type information from a color theme registry (i.e. limited UI support).
+     * Use `makeProvider` to get a provider with full UI support. */
+    SequenceColorThemeProperty.Provider = makeProvider(undefined);
+})(SequenceColorThemeProperty || (exports.SequenceColorThemeProperty = SequenceColorThemeProperty = {}));

package/lib/spec.d.ts

@@ -72,7 +72,13 @@ export interface InitParams {
     };
     /** Specify parts of the structure to highlight with different colors */
     selection?: {
-        data: QueryParam[];
+        data: (QueryParam & {
+            color?: AnyColor;
+            sideChain?: boolean;
+            representation?: string;
+            representationColor?: any;
+            focus?: boolean;
+        })[];
         nonSelectedColor?: AnyColor;
     };
     /** Display 3D State Gallery */

package/lib/styles/pdbe-molstar/_index.scss

@@ -197,9 +197,14 @@ $viewport-button-spacing: 4px;
         }
 
         .pdbemolstar-pdbe-logo {
-            height: 14px;
-            width: 14px;
-            margin-right: 3px;
+            height: 16px;
+            width: 16px;
+            position: relative;
+
+            svg {
+                position: absolute;
+                inset: 0;
+            }
         }
     }
 

package/lib/superposition.js

@@ -375,7 +375,6 @@ function renderSuperposition(plugin, segmentIndex, entryList) {
                             const data = plugin.state.data.select(strInstance.ref)[0].obj.data;
                             const carbChainSel = script_1.Script.getStructureSelection(carbEntityChainInVicinity, data);
                             if (carbChainSel && carbChainSel.kind === 'sequence') {
-                                // console.log(carbEntityChainId + ' chain present in 5 A radius');
                                 const carbLigands = [];
                                 const carbLigNamesAndCount = {};
                                 const carbLigList = [];

package/lib/ui/layout-no-controls-unless-expanded.d.ts

@@ -1,4 +1,4 @@
-import { Layout } from './_layout';
+import { Layout } from 'molstar/lib/mol-plugin-ui/plugin';
 export declare class FullLayoutNoControlsUnlessExpanded extends Layout {
     componentDidMount(): void;
     get layoutVisibilityClassName(): string;

package/lib/ui/layout-no-controls-unless-expanded.js

@@ -1,10 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FullLayoutNoControlsUnlessExpanded = void 0;
+const plugin_1 = require("molstar/lib/mol-plugin-ui/plugin");
 const config_1 = require("molstar/lib/mol-plugin/config");
 const plugin_custom_state_1 = require("../plugin-custom-state");
-const _layout_1 = require("./_layout");
-class FullLayoutNoControlsUnlessExpanded extends _layout_1.Layout {
+class FullLayoutNoControlsUnlessExpanded extends plugin_1.Layout {
     componentDidMount() {
         super.componentDidMount();
         // Hide Toggle Controls button unless expanded:

package/lib/ui/overlay.js

@@ -29,5 +29,5 @@ function WithLoadingOverlay(MainContent, OverlayContent = PDBeLoadingOverlayBox)
 }
 /** Overlay component with animated PDBe logo */
 function PDBeLoadingOverlayBox() {
-    return (0, jsx_runtime_1.jsx)("div", { className: 'pdbemolstar-overlay-box', children: (0, jsx_runtime_1.jsxs)("svg", { className: 'pdbe-animated-logo', viewBox: '0 0 300 300', children: [(0, jsx_runtime_1.jsx)("path", { className: 'path-bg', fill: 'transparent', stroke: '#E13D3D', strokeWidth: '30', d: 'M 150 200 L 150 100 A 50 50 0 1 0 100 150 L 200 150 A 50 50 0 1 0 150 100 L 150 200 A 50 50 0 1 0 200 150 L 100 150 A 50 50 0 1 0 150 200 ' }), (0, jsx_runtime_1.jsx)("path", { className: 'path-cross', fill: 'transparent', stroke: '#72B260', strokeWidth: '30', d: 'M 150 100 L 150 200 M 100 150 L 200 150' }), (0, jsx_runtime_1.jsx)("path", { className: 'path-fg', fill: 'transparent', stroke: '#72B260', strokeWidth: '30', d: 'M 100 150 A 50 50 0 1 1 150 100 L 150 170 L 150 100 L 150 170 L 150 100 L 150 100 A 50 50 0 1 1 200 150 L 130 150 L 200 150 L 130 150 L 200 150 L 200 150 A 50 50 0 1 1 150 200 L 150 130 L 150 200 L 150 130 L 150 200 L 150 200 A 50 50 0 1 1 100 150 L 170 150 L 100 150 L 170 150 L 100 150' })] }) });
+    return (0, jsx_runtime_1.jsxs)("div", { className: 'pdbemolstar-overlay-box', children: [(0, jsx_runtime_1.jsxs)("svg", { className: 'pdbe-animated-logo', viewBox: '0 0 300 300', children: [(0, jsx_runtime_1.jsx)("path", { className: 'path-bg', fill: 'transparent', stroke: '#E13D3D', strokeWidth: '30', d: 'M 150 200 L 150 100 A 50 50 0 1 0 100 150 L 200 150 A 50 50 0 1 0 150 100 L 150 200 A 50 50 0 1 0 200 150 L 100 150 A 50 50 0 1 0 150 200 ' }), (0, jsx_runtime_1.jsx)("path", { className: 'path-cross', fill: 'transparent', stroke: '#72B260', strokeWidth: '30', d: 'M 150 100 L 150 200 M 100 150 L 200 150' }), (0, jsx_runtime_1.jsx)("path", { className: 'path-fg', fill: 'transparent', stroke: '#72B260', strokeWidth: '30', d: 'M 100 150 A 50 50 0 1 1 150 100 L 150 170 L 150 100 L 150 170 L 150 100 L 150 100 A 50 50 0 1 1 200 150 L 130 150 L 200 150 L 130 150 L 200 150 L 200 150 A 50 50 0 1 1 150 200 L 150 130 L 150 200 L 150 130 L 150 200 L 150 200 A 50 50 0 1 1 100 150 L 170 150 L 100 150 L 170 150 L 100 150' })] }), ";"] });
 }

package/lib/ui/pdbe-viewport-controls.js

@@ -10,7 +10,10 @@ class PDBeViewportControls extends viewport_1.ViewportControls {
         const initParams = (0, plugin_custom_state_1.PluginCustomState)(this.plugin).initParams;
         const showPDBeLink = (initParams === null || initParams === void 0 ? void 0 : initParams.moleculeId) && (initParams === null || initParams === void 0 ? void 0 : initParams.pdbeLink) && !(initParams === null || initParams === void 0 ? void 0 : initParams.superposition);
         return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [showPDBeLink &&
-                    (0, jsx_runtime_1.jsx)("div", { className: 'msp-viewport-controls', children: (0, jsx_runtime_1.jsx)("div", { className: 'msp-viewport-controls-buttons', children: (0, jsx_runtime_1.jsxs)("div", { className: 'pdbemolstar-pdbe-link-box', children: [(0, jsx_runtime_1.jsx)("div", { className: 'msp-semi-transparent-background' }), (0, jsx_runtime_1.jsx)("a", { target: '_blank', href: `https://pdbe.org/${initParams.moleculeId}`, style: { textDecoration: 'none', color: 'initial' }, children: (0, jsx_runtime_1.jsxs)(common_1.Button, { className: 'msp-btn-link-toggle-on pdbemolstar-pdbe-link', title: 'Go to PDBe Pages', children: [(0, jsx_runtime_1.jsx)("img", { className: 'pdbemolstar-pdbe-logo', alt: 'PDBe logo', src: 'https://www.ebi.ac.uk/pdbe/entry/static/images/logos/PDBe/logo_T_64.png' }), initParams.moleculeId] }) })] }) }) }), (0, jsx_runtime_1.jsx)("div", { className: showPDBeLink ? 'pdbemolstar-viewport-controls-shifted' : 'pdbemolstar-viewport-controls-normal', children: super.render() })] });
+                    (0, jsx_runtime_1.jsx)("div", { className: 'msp-viewport-controls', children: (0, jsx_runtime_1.jsx)("div", { className: 'msp-viewport-controls-buttons', children: (0, jsx_runtime_1.jsxs)("div", { className: 'pdbemolstar-pdbe-link-box', children: [(0, jsx_runtime_1.jsx)("div", { className: 'msp-semi-transparent-background' }), (0, jsx_runtime_1.jsx)("a", { target: '_blank', href: `https://pdbe.org/${initParams.moleculeId}`, style: { textDecoration: 'none', color: 'initial' }, children: (0, jsx_runtime_1.jsxs)(common_1.Button, { className: 'msp-btn-link-toggle-on pdbemolstar-pdbe-link', title: 'Go to PDBe Pages', children: [(0, jsx_runtime_1.jsx)("div", { className: 'pdbemolstar-pdbe-logo', children: (0, jsx_runtime_1.jsx)(PDBeLogo, {}) }), initParams.moleculeId] }) })] }) }) }), (0, jsx_runtime_1.jsx)("div", { className: showPDBeLink ? 'pdbemolstar-viewport-controls-shifted' : 'pdbemolstar-viewport-controls-normal', children: super.render() })] });
     }
 }
 exports.PDBeViewportControls = PDBeViewportControls;
+function PDBeLogo({ className }) {
+    return (0, jsx_runtime_1.jsxs)("svg", { className: className, viewBox: '0 0 300 300', children: [(0, jsx_runtime_1.jsx)("path", { className: 'path-bg', fill: 'transparent', stroke: '#E13D3D', strokeWidth: '35', d: 'M 150 200 L 150 100 A 50 50 0 1 0 100 150 L 200 150 A 50 50 0 1 0 150 100 L 150 200 A 50 50 0 1 0 200 150 L 100 150 A 50 50 0 1 0 150 200 ' }), (0, jsx_runtime_1.jsx)("path", { className: 'path-fg', fill: 'transparent', stroke: '#72B260', strokeWidth: '35', d: 'M 200 150 A 50 50 0 1 0 150 100 L 150 200 A 50 50 0 1 0 200 150 L 100 150 A 50 50 0 1 0 150 200 ' })] });
+}

package/lib/viewer.d.ts

@@ -140,7 +140,13 @@ export declare class PDBeMolstarPlugin {
          * If `structureNumber` is provided, apply to the specified structure (numbered from 1!); otherwise apply to all loaded structures.
          * Remove any previously added coloring and extra representations, unless `keepColors` and/or `keepRepresentations` is set. */
         select: (params: {
-            data: QueryParam[];
+            data: (QueryParam & {
+                color?: AnyColor;
+                sideChain?: boolean;
+                representation?: string;
+                representationColor?: any;
+                focus?: boolean;
+            })[];
             nonSelectedColor?: AnyColor;
             structureId?: string;
             structureNumber?: number;
@@ -155,12 +161,36 @@ export declare class PDBeMolstarPlugin {
             keepColors?: boolean;
             keepRepresentations?: boolean;
         }) => Promise<void>;
+        /** Color the parts of sequence in the sequence panel defined by `data`. Color the rest of the sequence in `nonSelectedColor` if provided.
+         * If `structureId` or `structureNumber` is provided, apply to the specified structure (`structureNumber` numbered from 1!); otherwise apply to all loaded structures.
+         * Remove any previously added coloring, unless `keepColors` is set. */
+        sequenceColor: (params: {
+            data: (QueryParam & {
+                color?: AnyColor;
+            })[];
+            nonSelectedColor?: AnyColor;
+            theme?: {
+                name: string;
+                params?: any;
+                themeStrength?: number;
+                dilutionColor?: AnyColor;
+            };
+            structureId?: string;
+            structureNumber?: number;
+            keepColors?: boolean;
+        }) => Promise<void>;
+        /** Remove any sequence coloring previously added by the `sequenceColor` method.
+         * `structureNumberOrId` is either index (numbered from 1!) or the ID that was provided when loading the structure;
+         * if not provided, will apply to all loaded structures. */
+        clearSequenceColor: (structureNumberOrId?: number | string) => Promise<void>;
         /** Add interactive tooltips to parts of the structure. The added tooltips will be shown on a separate line in the tooltip box.
          * Repeated call to this function removes any previously added tooltips.
          * `structureNumber` counts from 1; if not provided, tooltips will be applied to all loaded structures.
          * Example: `await this.visual.tooltips({ data: [{ struct_asym_id: 'A', tooltip: 'Chain A' }, { struct_asym_id: 'B', tooltip: 'Chain B' }] });`. */
         tooltips: (params: {
-            data: QueryParam[];
+            data: (QueryParam & {
+                tooltip?: string;
+            })[];
             structureId?: string;
             structureNumber?: number;
         }) => Promise<void>;

package/lib/viewer.js

@@ -40,6 +40,7 @@ const mol_state_1 = require("molstar/lib/mol-state");
 const element_symbol_1 = require("molstar/lib/mol-theme/color/element-symbol");
 const assets_1 = require("molstar/lib/mol-util/assets");
 const color_1 = require("molstar/lib/mol-util/color/color");
+const names_1 = require("molstar/lib/mol-util/color/names");
 const rx_event_helper_1 = require("molstar/lib/mol-util/rx-event-helper");
 const custom_events_1 = require("./custom-events");
 const behavior_4 = require("./domain-annotations/behavior");
@@ -51,6 +52,9 @@ const manager_1 = require("./extensions/state-gallery/manager");
 const ui_1 = require("./extensions/state-gallery/ui");
 const helpers_1 = require("./helpers");
 const plugin_custom_state_1 = require("./plugin-custom-state");
+const behavior_6 = require("./sequence-color/behavior");
+const sequence_color_annotations_prop_1 = require("./sequence-color/sequence-color-annotations-prop");
+const sequence_color_theme_prop_1 = require("./sequence-color/sequence-color-theme-prop");
 const spec_2 = require("./spec");
 const spec_from_html_1 = require("./spec-from-html");
 const subscribe_events_1 = require("./subscribe-events");
@@ -308,6 +312,74 @@ class PDBeMolstarPlugin {
                     }
                 }
             }),
+            /** Color the parts of sequence in the sequence panel defined by `data`. Color the rest of the sequence in `nonSelectedColor` if provided.
+             * If `structureId` or `structureNumber` is provided, apply to the specified structure (`structureNumber` numbered from 1!); otherwise apply to all loaded structures.
+             * Remove any previously added coloring, unless `keepColors` is set. */
+            sequenceColor: (params) => tslib_1.__awaiter(this, void 0, void 0, function* () {
+                var _a, _b;
+                const structureNumberOrId = (_a = params.structureId) !== null && _a !== void 0 ? _a : params.structureNumber;
+                const update = this.plugin.build();
+                for (const struct of this.getStructures(structureNumberOrId)) {
+                    const propsCell = (_b = struct.structureRef.properties) === null || _b === void 0 ? void 0 : _b.cell;
+                    if (!propsCell) {
+                        console.warn(`Custom structure properties not found (structure node ref "${struct.structureRef.cell.transform.ref}")`);
+                        continue;
+                    }
+                    if (propsCell.transform.transformer.id !== model_1.CustomStructureProperties.id) {
+                        console.warn(`Custom structure properties node is of wrong type "${propsCell.transform.transformer.id}"`);
+                        continue;
+                    }
+                    const newColors = [];
+                    if (params.nonSelectedColor) {
+                        newColors.push({
+                            selector: { name: 'static', params: 'all' },
+                            color: (0, helpers_1.normalizeColor)(params.nonSelectedColor),
+                        });
+                    }
+                    for (const selection of this.getSelections(params.data, struct.number)) {
+                        if (!selection.param.color)
+                            continue;
+                        newColors.push({
+                            selector: { name: 'bundle', params: selection.bundle },
+                            color: (0, helpers_1.normalizeColor)(selection.param.color),
+                        });
+                    }
+                    update.to(propsCell).update(model_1.CustomStructureProperties, old => {
+                        var _a, _b, _c, _d, _e, _f;
+                        const annotProps = { colors: newColors };
+                        const oldColors = (_b = (_a = old.properties) === null || _a === void 0 ? void 0 : _a[sequence_color_annotations_prop_1.SequenceColorAnnotationsProperty.Name]) === null || _b === void 0 ? void 0 : _b.colors;
+                        if (params.keepColors && !params.nonSelectedColor && oldColors) {
+                            annotProps.colors = oldColors.concat(newColors);
+                        }
+                        let themeProps;
+                        if (params.theme) {
+                            themeProps = {
+                                useTheme: true,
+                                theme: { name: params.theme.name, params: (_c = params.theme.params) !== null && _c !== void 0 ? _c : {} },
+                                themeStrength: (_d = params.theme.themeStrength) !== null && _d !== void 0 ? _d : 1,
+                                dilutionColor: (0, helpers_1.normalizeColor)(params.theme.dilutionColor, names_1.ColorNames.white),
+                            };
+                        }
+                        else if (params.keepColors) {
+                            themeProps = (_f = (_e = old.properties) === null || _e === void 0 ? void 0 : _e[sequence_color_theme_prop_1.SequenceColorThemeProperty.Name]) !== null && _f !== void 0 ? _f : { useTheme: false };
+                        }
+                        else {
+                            themeProps = { useTheme: false };
+                        }
+                        return Object.assign(Object.assign({}, old), { properties: Object.assign(Object.assign({}, old.properties), { [sequence_color_annotations_prop_1.SequenceColorAnnotationsProperty.Name]: annotProps, [sequence_color_theme_prop_1.SequenceColorThemeProperty.Name]: themeProps }) });
+                    });
+                }
+                yield update.commit();
+            }),
+            /** Remove any sequence coloring previously added by the `sequenceColor` method.
+             * `structureNumberOrId` is either index (numbered from 1!) or the ID that was provided when loading the structure;
+             * if not provided, will apply to all loaded structures. */
+            clearSequenceColor: (structureNumberOrId) => tslib_1.__awaiter(this, void 0, void 0, function* () {
+                if (typeof structureNumberOrId === 'number')
+                    yield this.visual.sequenceColor({ data: [], structureNumber: structureNumberOrId });
+                else
+                    yield this.visual.sequenceColor({ data: [], structureId: structureNumberOrId });
+            }),
             /** Add interactive tooltips to parts of the structure. The added tooltips will be shown on a separate line in the tooltip box.
              * Repeated call to this function removes any previously added tooltips.
              * `structureNumber` counts from 1; if not provided, tooltips will be applied to all loaded structures.
@@ -480,6 +552,7 @@ class PDBeMolstarPlugin {
             pdbePluginSpec.behaviors.push(spec_1.PluginSpec.Behavior(pdbe_1.PDBeStructureQualityReport, { autoAttach: false, showTooltip: false }));
             pdbePluginSpec.behaviors.push(spec_1.PluginSpec.Behavior(behavior_4.PDBeDomainAnnotations, { autoAttach: false, showTooltip: false }));
             pdbePluginSpec.behaviors.push(spec_1.PluginSpec.Behavior(behavior_1.AssemblySymmetry));
+            pdbePluginSpec.behaviors.push(spec_1.PluginSpec.Behavior(behavior_6.SequenceColor));
             pdbePluginSpec.config.push([behavior_1.AssemblySymmetryConfig.DefaultServerType, 'pdbe'], [behavior_1.AssemblySymmetryConfig.DefaultServerUrl, 'https://www.ebi.ac.uk/pdbe/aggregated-api/pdb/symmetry'], [behavior_1.AssemblySymmetryConfig.ApplyColors, false]);
             if (this.initParams.galleryView) {
                 pdbePluginSpec.behaviors.push(spec_1.PluginSpec.Behavior(behavior_5.StateGallery));
@@ -541,6 +614,7 @@ class PDBeMolstarPlugin {
                 pdbePluginSpec.config.push([config_1.PluginConfig.Viewport.ShowAnimation, false]);
             if (this.initParams.hideCanvasControls.includes('trajectory'))
                 pdbePluginSpec.config.push([config_1.PluginConfig.Viewport.ShowTrajectoryControls, false]);
+            pdbePluginSpec.config.push([config_1.PluginConfig.Viewport.ShowXR, 'never']);
             // override default event bindings
             if (this.initParams.selectBindings) {
                 pdbePluginSpec.behaviors.push(spec_1.PluginSpec.Behavior(representation_2.SelectLoci, { bindings: this.initParams.selectBindings }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pdbe-molstar",
-  "version": "3.7.1",
+  "version": "3.8.0",
   "description": "Molstar implementation for PDBe",
   "main": "index.js",
   "scripts": {
@@ -52,6 +52,7 @@
     "@types/d3": "^7.4.0",
     "@types/react": "^18.0.17",
     "@types/react-dom": "^18.0.6",
+    "@types/webxr": "^0.5.23",
     "babel-loader": "^8.2.5",
     "concurrently": "^7.3.0",
     "cpx2": "^7.0.1",
@@ -78,7 +79,7 @@
     "d3-scale": "^4.0.2",
     "d3-selection": "^3.0.0",
     "lit": "^3.1.1",
-    "molstar": "4.18.0",
+    "molstar": "5.0.0",
     "path-browserify": "^1.0.1",
     "stream-browserify": "^3.0.0",
     "vm-browserify": "^1.1.2"

package/lib/ui/_layout.d.ts

@@ -1,15 +0,0 @@
-import { PluginUIComponent } from 'molstar/lib/mol-plugin-ui/base';
-type RegionKind = 'top' | 'left' | 'right' | 'bottom' | 'main';
-/** Copy of `Layout` in molstar/src/mol-plugin-ui/plugin.tsx, TODO export from core Molstar and remove here */
-export declare class Layout extends PluginUIComponent {
-    componentDidMount(): void;
-    region(kind: RegionKind, Element?: React.ComponentClass | React.FC): import("react/jsx-runtime").JSX.Element;
-    get layoutVisibilityClassName(): string;
-    get layoutClassName(): string;
-    onDrop: (ev: React.DragEvent<HTMLDivElement>) => void;
-    onDragOver: (ev: React.DragEvent<HTMLDivElement>) => void;
-    private showDragOverlay;
-    onDragEnter: (ev: React.DragEvent<HTMLDivElement>) => void;
-    render(): import("react/jsx-runtime").JSX.Element;
-}
-export {};