Exposed molstar trajectory preset configuration

CHANGELOG.md

@@ -13,6 +13,8 @@ that is used to map loaded structure ids with user provided ids in `LoadParams`
 - Custom View has been decoupled from RCSB view
 - No `StructureViewer` data is passed to `RcsbFvSequence` all communication between panels is dne through the `StateManager`
 - New `RcsbViewBehaviourInterface` interface to extend "1d" behaviour to events
+- `RcsbFv3DAbstract.render` converted to async method
+- Exposed molstar trajectory preset configuration
 
 ## [2.3.7] - 2022-12-12
 ### Bug fix

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rcsb/rcsb-saguaro-3d",
-  "version": "2.4.0-data-provider.8",
+  "version": "2.4.0-data-provider.11",
   "description": "RCSB Molstar/Saguaro Web App",
   "main": "build/dist/app.js",
   "files": [
@@ -87,8 +87,7 @@
     "@rcsb/rcsb-molstar": "^2.5.11",
     "@rcsb/rcsb-saguaro": "^2.5.5",
     "@rcsb/rcsb-saguaro-app": "^4.6.0-data-provider.10",
-    "http-server": "^14.1.1",
-    "molstar": "^3.29.0"
+    "molstar": "^3.31.4"
   },
   "bugs": {
     "url": "https://github.com/rcsb/rcsb-saguaro-3d/issues"

src/RcsbFv3D/RcsbFv3DAbstract.tsx

@@ -46,7 +46,7 @@ export abstract class RcsbFv3DAbstract<T,R,L,S,U> {
        this.structureViewerBehaviourObserver = config.structureViewerBehaviourObserver;
     }
 
-    public render(): void{
+    public async render(): Promise<void>{
         if(this.elementId == null )
             throw new Error("HTML element not found");
         const element: HTMLElement = document.getElementById(this.elementId) ?? document.createElement<"div">("div");
@@ -56,18 +56,21 @@ export abstract class RcsbFv3DAbstract<T,R,L,S,U> {
             this.fullScreen("on");
         }
         this.reactRoot = createRoot(element);
-        this.reactRoot.render(
-            <RcsbFv3DComponent<T,R,L,S,U>
-                structurePanelConfig={this.structureConfig}
-                sequencePanelConfig={this.sequenceConfig}
-                id={this.elementId}
-                ctxManager={this.ctxManager}
-                cssConfig={this.cssConfig}
-                unmount={this.unmount.bind(this)}
-                fullScreen={this.fullScreenFlag}
-                structureViewer={this.structureViewer}
-                structureViewerBehaviourObserver={this.structureViewerBehaviourObserver}
-            />);
+        return new Promise((resolve)=>{
+            this.reactRoot.render(
+                <RcsbFv3DComponent<T,R,L,S,U>
+                    structurePanelConfig={this.structureConfig}
+                    sequencePanelConfig={this.sequenceConfig}
+                    id={this.elementId}
+                    ctxManager={this.ctxManager}
+                    cssConfig={this.cssConfig}
+                    unmount={this.unmount.bind(this)}
+                    fullScreen={this.fullScreenFlag}
+                    structureViewer={this.structureViewer}
+                    structureViewerBehaviourObserver={this.structureViewerBehaviourObserver}
+                    resolve={resolve}
+                />);
+        });
     }
 
     public unmount(removeHtmlElement?:boolean, unmountCallback?:()=>{}): void{
@@ -88,7 +91,7 @@ export abstract class RcsbFv3DAbstract<T,R,L,S,U> {
     }
 
     public pluginCall(f: (plugin: PluginContext) => void){
-        this.ctxManager.next({eventType: EventType.PLUGIN_CALL, eventData:f});
+        this.structureViewer.pluginCall(f);
     }
 
     private fullScreen(mode: "on" | "off"): void {

src/RcsbFv3D/RcsbFv3DAlignmentProvider.tsx

@@ -49,6 +49,10 @@ import {AbstractViewInterface} from "../RcsbFvSequence/SequenceViews/AbstractVie
 import {
     AlignmentProviderBehaviour
 } from "../RcsbFvSequence/SequenceViews/RcsbView/RcsbViewBehaviour/AlignmentProviderBehaviour";
+import {
+    FelxibleAlignmentTrajectoryParamsType
+} from "../RcsbFvStructure/StructureViewers/MolstarViewer/TrajectoryPresetProvider/FlexibleAlignmentTrajectoryPresetProvider";
+import {TrajectoryHierarchyPresetProvider} from "molstar/lib/mol-plugin-state/builder/structure/hierarchy-preset";
 
 export interface RcsbFv3DDataProviderInterface  {
     elementId?: string;
@@ -60,12 +64,13 @@ export interface RcsbFv3DDataProviderInterface  {
         subtitle?: string;
         additionalContent?(props: AbstractViewInterface): JSX.Element;
     };
-    additionalConfig?:RcsbFvAdditionalConfig;
+    additionalConfig?: RcsbFvAdditionalConfig;
     molstarProps?: Partial<ViewerProps>;
     cssConfig?: RcsbFv3DCssConfig;
+    trajectoryProvider?: TrajectoryHierarchyPresetProvider<AlignmentTrajectoryParamsType|FelxibleAlignmentTrajectoryParamsType,LoadMolstarReturnType>;
 }
 
-type AlignmentLoadMolstarType = LoadMolstarInterface<AlignmentTrajectoryParamsType,LoadMolstarReturnType>;
+type AlignmentLoadMolstarType = LoadMolstarInterface<AlignmentTrajectoryParamsType|FelxibleAlignmentTrajectoryParamsType,LoadMolstarReturnType>;
 export class RcsbFv3DAlignmentProvider extends RcsbFv3DAbstract<
         MsaPfvManagerInterface<[RcsbModuleDataProviderInterface]>,
         AlignmentLoadMolstarType|undefined,
@@ -116,7 +121,8 @@ export class RcsbFv3DAlignmentProvider extends RcsbFv3DAbstract<
             structureViewerBehaviourObserver: new MsaBehaviourObserver<AlignmentLoadMolstarType,LoadMolstarReturnType>(
                 new MolstarAlignmentLoader({
                     transformProvider: params.config.transformProvider,
-                    structureLocationProvider: params.config.structureLocationProvider
+                    structureLocationProvider: params.config.structureLocationProvider,
+                    trajectoryProvider: params.trajectoryProvider
                 }),
                 new MolstarComponentActionFactory()
             )

src/RcsbFv3D/RcsbFv3DComponent.tsx

@@ -44,7 +44,7 @@ interface RcsbFv3DComponentState<T,R,S,U> {
     pfvScreenFraction: number;
 }
 
-export class RcsbFv3DComponent<T,R,L,S,U> extends React.Component <RcsbFv3DComponentInterface<T,R,L,S,U>, RcsbFv3DComponentState<T,R,S,U>> {
+export class RcsbFv3DComponent<T,R,L,S,U> extends React.Component <RcsbFv3DComponentInterface<T,R,L,S,U> & {resolve:()=>void;}, RcsbFv3DComponentState<T,R,S,U>> {
 
     private readonly stateManager: RcsbFvStateInterface = new RcsbFvStateManager();
     private subscription: Subscription;
@@ -96,6 +96,7 @@ export class RcsbFv3DComponent<T,R,L,S,U> extends React.Component <RcsbFv3DCompo
 
     componentDidMount() {
         this.subscription = this.subscribe();
+        this.props.resolve();
     }
 
     componentWillUnmount() {

src/RcsbFvStructure/StructureViewerInterface.ts

@@ -54,7 +54,6 @@ export interface ViewerCallbackManagerInterface {
 }
 
 export interface ViewerActionManagerInterface<R,L> {
-    //load<Z extends R|R[]>(loadConfig: Z): Z extends R ? Promise<L|undefined> : Promise<(L|undefined)[]>;
     load(loadConfig: R): Promise<L|undefined>;
     load(loadConfig: R[]): Promise<(L|undefined)[]>;
     removeStructure(removeConfig: R|Array<R>): Promise<void>;

src/RcsbFvStructure/StructureViewers/MolstarViewer/MolstarUtils/MolstarAlignmentLoader.ts

@@ -24,6 +24,7 @@ import {
     FelxibleAlignmentTrajectoryParamsType,
     FlexibleAlignmentTrajectoryPresetProvider
 } from "../TrajectoryPresetProvider/FlexibleAlignmentTrajectoryPresetProvider";
+import {TrajectoryHierarchyPresetProvider} from "molstar/lib/mol-plugin-state/builder/structure/hierarchy-preset";
 
 export class MolstarAlignmentLoader implements StructureLoaderInterface<[
         ViewerActionManagerInterface<LoadMolstarInterface<AlignmentTrajectoryParamsType|FelxibleAlignmentTrajectoryParamsType,LoadMolstarReturnType>,LoadMolstarReturnType>,
@@ -33,9 +34,15 @@ export class MolstarAlignmentLoader implements StructureLoaderInterface<[
 
     private readonly transformProvider?: TransformProviderInterface;
     private readonly structureLocationProvider?: LocationProviderInterface;
-    constructor(loadConfig?:{transformProvider?: TransformProviderInterface; structureLocationProvider?: LocationProviderInterface}) {
+    private readonly trajectoryProvider?: TrajectoryHierarchyPresetProvider<AlignmentTrajectoryParamsType|FelxibleAlignmentTrajectoryParamsType,LoadMolstarReturnType>;
+    constructor(loadConfig?:{
+        transformProvider?: TransformProviderInterface;
+        structureLocationProvider?: LocationProviderInterface,
+        trajectoryProvider?: TrajectoryHierarchyPresetProvider<AlignmentTrajectoryParamsType|FelxibleAlignmentTrajectoryParamsType,LoadMolstarReturnType>
+    }) {
         this.transformProvider = loadConfig?.transformProvider;
         this.structureLocationProvider = loadConfig?.structureLocationProvider;
+        this.trajectoryProvider = loadConfig?.trajectoryProvider;
     }
     private readonly structureMap: Set<string> = new Set<string>();
 
@@ -49,7 +56,7 @@ export class MolstarAlignmentLoader implements StructureLoaderInterface<[
             const url: string|undefined = this.structureLocationProvider?.get(pdb.entryId);
             const transform = ("instanceId" in pdb ? this.transformProvider?.get(pdb.entryId, pdb.instanceId) : undefined) ?? undefined;
             const provider = !transform?.length || transform.length == 1 ? {
-                reprProvider: AlignmentTrajectoryPresetProvider,
+                reprProvider: this.trajectoryProvider ?? AlignmentTrajectoryPresetProvider,
                 params:{
                     modelIndex: 0,
                     pdb,
@@ -57,7 +64,7 @@ export class MolstarAlignmentLoader implements StructureLoaderInterface<[
                     matrix: transform?.[0].transform
                 }
             } : {
-                reprProvider: FlexibleAlignmentTrajectoryPresetProvider,
+                reprProvider: this.trajectoryProvider ?? FlexibleAlignmentTrajectoryPresetProvider,
                 params:{
                     modelIndex: 0,
                     pdb,

src/RcsbFvStructure/StructureViewers/MolstarViewer/TrajectoryPresetProvider/AlignmentRepresentationPresetProvider.ts

@@ -28,7 +28,6 @@ import {Loci} from "molstar/lib/mol-model/loci";
 import {superpose} from "molstar/lib/mol-model/structure/structure/util/superposition";
 import {Mat4} from "molstar/lib/mol-math/linear-algebra";
 import {SymmetryOperator} from "molstar/lib/mol-math/geometry/symmetry-operator";
-import {StateTransforms} from "molstar/lib/mol-plugin-state/transforms";
 import {TagDelimiter} from "@rcsb/rcsb-saguaro-app";
 import {AlignedRegion, TargetAlignment} from "@rcsb/rcsb-api-tools/build/RcsbGraphQL/Types/Borrego/GqlTypes";
 import {AlignmentMapper as AM} from "../../../../Utils/AlignmentMapper";
@@ -41,8 +40,9 @@ import {MmcifFormat} from "molstar/lib/mol-model-formats/structure/mmcif";
 import {CustomProperty} from "molstar/lib/mol-model-props/common/custom-property";
 import {StructureBuilder} from "molstar/lib/mol-plugin-state/builder/structure";
 import {StructureRepresentationBuilder} from "molstar/lib/mol-plugin-state/builder/structure/representation";
-import {RigidTransformType, TransformMatrixType} from "../../../StructureUtils/StructureLoaderInterface";
+import {TransformMatrixType} from "../../../StructureUtils/StructureLoaderInterface";
 import {StateTransform} from "molstar/lib/mol-state/transform";
+import {TransformStructureConformation} from "molstar/lib/mol-plugin-state/transforms/model";
 
 type RepresentationParamsType = {
     pdb?:{entryId:string;entityId:string;}|{entryId:string;instanceId:string;};
@@ -254,7 +254,7 @@ async function matrixAlign(plugin: PluginContext,  structureRef: StateObjectRef<
         }
     };
     const b = plugin.state.data.build().to(structureRef)
-        .insert(StateTransforms.Model.TransformStructureConformation,trans);
+        .insert(TransformStructureConformation,trans);
     await plugin.runTask(plugin.state.data.updateTree(b));
 }
 
@@ -367,7 +367,7 @@ const SuperpositionTag = 'SuperpositionTransform';
 async function transform(plugin:PluginContext, s: StateObjectRef<PluginStateObject.Molecule.Structure>, matrix: Mat4, coordinateSystem?: SymmetryOperator): Promise<void>{
     const r = StateObjectRef.resolveAndCheck(plugin.state.data, s);
     if (!r) return;
-    const o = plugin.state.data.selectQ(q => q.byRef(r.transform.ref).subtree().withTransformer(StateTransforms.Model.TransformStructureConformation))[0];
+    const o = plugin.state.data.selectQ(q => q.byRef(r.transform.ref).subtree().withTransformer(TransformStructureConformation))[0];
 
     const transform = coordinateSystem && !Mat4.isIdentity(coordinateSystem.matrix)
         ? Mat4.mul(Mat4(), coordinateSystem.matrix, matrix)
@@ -382,7 +382,7 @@ async function transform(plugin:PluginContext, s: StateObjectRef<PluginStateObje
     const b = o
         ? plugin.state.data.build().to(o).update(params)
         : plugin.state.data.build().to(s)
-            .insert(StateTransforms.Model.TransformStructureConformation, params, { tags: SuperpositionTag });
+            .insert(TransformStructureConformation, params, { tags: SuperpositionTag });
     await plugin.runTask(plugin.state.data.updateTree(b));
 }
 

src/RcsbFvStructure/StructureViewers/MolstarViewer/TrajectoryPresetProvider/AlignmentTrajectoryPresetProvider.ts

@@ -11,14 +11,12 @@ import {StateObjectRef, StateObjectSelector} from "molstar/lib/mol-state";
 import {RootStructureDefinition} from "molstar/lib/mol-plugin-state/helpers/root-structure";
 import {StateTransformer} from "molstar/lib/mol-state/transformer";
 import {StateObject} from "molstar/lib/mol-state/object";
-import {
-    StructureRepresentationPresetProvider
-} from "molstar/lib/mol-plugin-state/builder/structure/representation-preset";
+
 import {PLDDTConfidenceColorThemeProvider} from "molstar/lib/extensions/model-archive/quality-assessment/color/plddt";
 import {AlignmentRepresentationPresetProvider} from "./AlignmentRepresentationPresetProvider";
 import {TargetAlignment} from "@rcsb/rcsb-api-tools/build/RcsbGraphQL/Types/Borrego/GqlTypes";
 import {Structure, StructureElement, StructureProperties as SP} from "molstar/lib/mol-model/structure";
-import {RigidTransformType, TransformMatrixType} from "../../../StructureUtils/StructureLoaderInterface";
+import {TransformMatrixType} from "../../../StructureUtils/StructureLoaderInterface";
 
 
 export type AlignmentTrajectoryParamsType = {

src/app.ts

@@ -14,4 +14,10 @@ export {RcsbFv3DAlignmentProvider} from "./RcsbFv3D/RcsbFv3DAlignmentProvider";
 
 export {
     RcsbRequestContextManager
-} from "@rcsb/rcsb-saguaro-app";
+} from "@rcsb/rcsb-saguaro-app";
+
+export {
+    AlignmentMapper
+} from "./Utils/AlignmentMapper";
+
+export {TransformStructureConformation} from "molstar/lib/mol-plugin-state/transforms/model";

src/examples/alignment-provider/providers/ExternalAlignmentProvider.ts

@@ -1807,7 +1807,7 @@ async function getSequences(results: Alignment[]): Promise<InstanceSequenceInter
     return  out.concat(await RcsbRequestContextManager.getInstanceSequences(missingIds));
 }
 
-const structuralAlignment: StructureAlignmentResponse = flexAlignment as StructureAlignmentResponse;
+const structuralAlignment: StructureAlignmentResponse = alignmentExample as StructureAlignmentResponse;
 
 export const dataProvider: RcsbModuleDataProviderInterface = {
     alignments: {

src/examples/css-config/index.ts

@@ -11,11 +11,8 @@ import {
     RcsbFvRowConfigInterface,
     RcsbFvTrackDataElementInterface
 } from "@rcsb/rcsb-saguaro";
-import {
-    RcsbFvSelectorManager,
-    RegionSelectionInterface
-} from "../../RcsbFvState/RcsbFvSelectorManager";
-import {StructureViewerPublicInterface, SaguaroRegionList} from "../../RcsbFvStructure/StructureViewerInterface";
+import {RegionSelectionInterface} from "../../RcsbFvState/RcsbFvSelectorManager";
+import {SaguaroRegionList, StructureViewerPublicInterface} from "../../RcsbFvStructure/StructureViewerInterface";
 import {AlignmentManager} from "./AlignmentManager";
 import {Mat4} from "molstar/lib/mol-math/linear-algebra";
 import {
@@ -100,7 +97,7 @@ const rowConfig: Array<RcsbFvRowConfigInterface> = [
     }
 ];
 
-const fvConfig: FeatureViewInterface<LoadMolstarInterface> = {
+const fvConfig: FeatureViewInterface<LoadMolstarInterface<unknown,unknown>,unknown> = {
     boardId:"1ash_board",
     boardConfig: {
         range: {
@@ -113,7 +110,7 @@ const fvConfig: FeatureViewInterface<LoadMolstarInterface> = {
         includeAxis: true
     },
     rowConfig: rowConfig,
-    sequenceSelectionChangeCallback: (plugin: StructureViewerPublicInterface<LoadMolstarInterface>, stateManager: RcsbFvStateManager, sequenceRegion: Array<RcsbFvTrackDataElementInterface>) => {
+    sequenceSelectionChangeCallback: (plugin: StructureViewerPublicInterface<LoadMolstarInterface<unknown,unknown>,unknown>, stateManager: RcsbFvStateManager, sequenceRegion: Array<RcsbFvTrackDataElementInterface>) => {
         stateManager.selectionState.clearSelection("select", {modelId:"1ash_model", labelAsymId:"A"});
         stateManager.selectionState.clearSelection("select", {modelId:"101m_model", labelAsymId:"A"});
         if(sequenceRegion.length > 0) {
@@ -140,7 +137,7 @@ const fvConfig: FeatureViewInterface<LoadMolstarInterface> = {
             plugin.resetCamera();
         }
     },
-    sequenceElementClickCallback: async (plugin: StructureViewerPublicInterface<LoadMolstarInterface>, stateManager: RcsbFvStateManager, d: RcsbFvTrackDataElementInterface) => {
+    sequenceElementClickCallback: async (plugin:  StructureViewerPublicInterface<LoadMolstarInterface<unknown,unknown>,unknown>, stateManager: RcsbFvStateManager, d: RcsbFvTrackDataElementInterface) => {
         plugin.removeComponent("1ash_component");
         plugin.removeComponent("101m_component");
         if(d.begin === d.end || !d.end){
@@ -148,7 +145,7 @@ const fvConfig: FeatureViewInterface<LoadMolstarInterface> = {
             await plugin.createComponent("101m_component", "101m_model", "A", alignmentManager.getTargetPosition(d.begin)!, alignmentManager.getTargetPosition(d.begin)!, "ball-and-stick");
         }
     },
-    sequenceHoverCallback: (plugin: StructureViewerPublicInterface<LoadMolstarInterface>, stateManager: RcsbFvStateManager, elements: Array<RcsbFvTrackDataElementInterface>) => {
+    sequenceHoverCallback: (plugin:  StructureViewerPublicInterface<LoadMolstarInterface<unknown,unknown>,unknown>, stateManager: RcsbFvStateManager, elements: Array<RcsbFvTrackDataElementInterface>) => {
         if (elements == null || elements.length == 0){
             plugin.clearSelection("hover");
         }else {
@@ -168,7 +165,7 @@ const fvConfig: FeatureViewInterface<LoadMolstarInterface> = {
                 ), "hover", "set");
         }
     },
-    structureSelectionCallback: (plugin: StructureViewerPublicInterface<LoadMolstarInterface>, pfv: RcsbFv, stateManager: RcsbFvStateManager) => {
+    structureSelectionCallback: (plugin:  StructureViewerPublicInterface<LoadMolstarInterface<unknown,unknown>,unknown>, pfv: RcsbFv, stateManager: RcsbFvStateManager) => {
         const sel_1ash: SaguaroRegionList | undefined = stateManager.selectionState.getSelectionWithCondition("1ash_model", "A", "select");
         const sel_101m: SaguaroRegionList | undefined = stateManager.selectionState.getSelectionWithCondition("101m_model", "A", "select");
         pfv.clearSelection("select");
@@ -185,7 +182,7 @@ const fvConfig: FeatureViewInterface<LoadMolstarInterface> = {
                     })), mode: "select"});
         }
     },
-    structureHoverCallback: (plugin: StructureViewerPublicInterface<LoadMolstarInterface>, pfv: RcsbFv, stateManager: RcsbFvStateManager) => {
+    structureHoverCallback: (plugin:  StructureViewerPublicInterface<LoadMolstarInterface<unknown,unknown>,unknown>, pfv: RcsbFv, stateManager: RcsbFvStateManager) => {
         const sel_1ash: SaguaroRegionList | undefined = stateManager.selectionState.getSelectionWithCondition("1ash_model", "A", "hover");
         const sel_101m: SaguaroRegionList | undefined = stateManager.selectionState.getSelectionWithCondition("101m_model", "A", "hover");
         if(sel_1ash == null && sel_101m == null)
@@ -201,12 +198,12 @@ const fvConfig: FeatureViewInterface<LoadMolstarInterface> = {
     }
 }
 
-const block: FeatureBlockInterface<LoadMolstarInterface> = {
+const block: FeatureBlockInterface<LoadMolstarInterface<unknown,unknown>,unknown> = {
     blockId:"MyBlock_1",
     featureViewConfig: [fvConfig]
 };
 
-const customConfig: CustomViewInterface<LoadMolstarInterface> = {
+const customConfig: CustomViewInterface<LoadMolstarInterface<unknown,unknown>,unknown> = {
     blockConfig:[block]
 }
 
@@ -216,13 +213,15 @@ const sequenceConfig = {
     config: customConfig
 };
 
-const molstarConfig: RcsbFvStructureConfigInterface<LoadMolstarInterface,{viewerElement:string|HTMLElement,viewerProps:Partial<ViewerProps>}> = {
-    loadConfig: {
-        loadMethod: LoadMethod.loadPdbIds,
-        loadParams: [{
+const molstarConfig: RcsbFvStructureConfigInterface<LoadMolstarInterface<unknown,unknown>,{viewerElement:string|HTMLElement,viewerProps:Partial<ViewerProps>}> = {
+    loadConfig: [{
+        loadMethod: LoadMethod.loadPdbId,
+        loadParams: {
             entryId: "1ash",
             id:"1ash_model"
-        },{
+        }},{
+        loadMethod: LoadMethod.loadPdbId,
+        loadParams: {
             entryId: "101m",
             id:"101m_model",
             matrix:Mat4.ofRows([
@@ -231,8 +230,7 @@ const molstarConfig: RcsbFvStructureConfigInterface<LoadMolstarInterface,{viewer
                 [0.2236805864799372, -0.6852351043918645, -0.6931232552303105, 5.851782696060043],
                 [0, 0, 0, 1]
             ])
-        }]
-    },
+        }}],
     structureViewerConfig: {
         viewerElement:"pfv",
         viewerProps:{

webpack.server.dev.config.js

@@ -50,7 +50,7 @@ const server = {
     entry: entries,
     devServer: {
         compress: true,
-        port: 9000,
+        port: 9090,
     },
     plugins: Object.keys(entries).map(key=>new HtmlWebpackPlugin({
         filename:`${key}.html`,