1d-view interface behaviour

CHANGELOG.md

@@ -12,6 +12,7 @@
 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
 
 ## [2.3.7] - 2022-12-12
 ### Bug fix

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@rcsb/rcsb-saguaro-3d",
-  "version": "2.4.0-data-provider.3",
+  "version": "2.4.0-data-provider.4",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@rcsb/rcsb-saguaro-3d",
-      "version": "2.4.0-data-provider.3",
+      "version": "2.4.0-data-provider.4",
       "license": "MIT",
       "dependencies": {
         "@rcsb/rcsb-api-tools": "^4.1.1",
@@ -1866,16 +1866,16 @@
       "integrity": "sha512-AHPmaAx+RYfZz0eYu6Gviiagpmiyw98ySSlQvCUhVGDRtDFe4DBS0x1bSjdF3gqUDYOczB+yYvBTtEylYSdRhg=="
     },
     "node_modules/@floating-ui/core": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.2.0.tgz",
-      "integrity": "sha512-GHUXPEhMEmTpnpIfesFA2KAoMJPb1SPQw964tToQwt+BbGXdhqTCWT1rOb0VURGylsxsYxiGMnseJ3IlclVpVA=="
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.2.1.tgz",
+      "integrity": "sha512-LSqwPZkK3rYfD7GKoIeExXOyYx6Q1O4iqZWwIehDNuv3Dv425FIAE8PRwtAx1imEolFTHgBEcoFHm9MDnYgPCg=="
     },
     "node_modules/@floating-ui/dom": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.2.0.tgz",
-      "integrity": "sha512-QXzg57o1cjLz3cGETzKXjI3kx1xyS49DW9l7kV2jw2c8Yftd434t2hllX0sVGn2Q8MtcW/4pNm8bfE1/4n6mng==",
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.2.1.tgz",
+      "integrity": "sha512-Rt45SmRiV8eU+xXSB9t0uMYiQ/ZWGE/jumse2o3i5RGlyvcbqOF4q+1qBnzLE2kZ5JGhq0iMkcGXUKbFe7MpTA==",
       "dependencies": {
-        "@floating-ui/core": "^1.2.0"
+        "@floating-ui/core": "^1.2.1"
       }
     },
     "node_modules/@graphql-codegen/cli": {
@@ -13632,16 +13632,16 @@
       "integrity": "sha512-AHPmaAx+RYfZz0eYu6Gviiagpmiyw98ySSlQvCUhVGDRtDFe4DBS0x1bSjdF3gqUDYOczB+yYvBTtEylYSdRhg=="
     },
     "@floating-ui/core": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.2.0.tgz",
-      "integrity": "sha512-GHUXPEhMEmTpnpIfesFA2KAoMJPb1SPQw964tToQwt+BbGXdhqTCWT1rOb0VURGylsxsYxiGMnseJ3IlclVpVA=="
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.2.1.tgz",
+      "integrity": "sha512-LSqwPZkK3rYfD7GKoIeExXOyYx6Q1O4iqZWwIehDNuv3Dv425FIAE8PRwtAx1imEolFTHgBEcoFHm9MDnYgPCg=="
     },
     "@floating-ui/dom": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.2.0.tgz",
-      "integrity": "sha512-QXzg57o1cjLz3cGETzKXjI3kx1xyS49DW9l7kV2jw2c8Yftd434t2hllX0sVGn2Q8MtcW/4pNm8bfE1/4n6mng==",
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.2.1.tgz",
+      "integrity": "sha512-Rt45SmRiV8eU+xXSB9t0uMYiQ/ZWGE/jumse2o3i5RGlyvcbqOF4q+1qBnzLE2kZ5JGhq0iMkcGXUKbFe7MpTA==",
       "requires": {
-        "@floating-ui/core": "^1.2.0"
+        "@floating-ui/core": "^1.2.1"
       }
     },
     "@graphql-codegen/cli": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rcsb/rcsb-saguaro-3d",
-  "version": "2.4.0-data-provider.4",
+  "version": "2.4.0-data-provider.6",
   "description": "RCSB Molstar/Saguaro Web App",
   "main": "build/dist/app.js",
   "files": [

src/RcsbFv3D/RcsbFv3DAlignmentProvider.tsx

@@ -46,6 +46,9 @@ import {
 import {MolstarTools} from "../RcsbFvStructure/StructureViewers/MolstarViewer/MolstarUtils/MolstarTools";
 import getModelIdFromTrajectory = MolstarTools.getModelIdFromTrajectory;
 import {AbstractViewInterface} from "../RcsbFvSequence/SequenceViews/AbstractView";
+import {
+    AlignmentProviderBehaviour
+} from "../RcsbFvSequence/SequenceViews/RcsbView/RcsbViewBehaviour/AlignmentProviderBehaviour";
 
 export interface RcsbFv3DDataProviderInterface  {
     elementId?: string;
@@ -95,7 +98,8 @@ export class RcsbFv3DAlignmentProvider extends RcsbFv3DAbstract<
                         alignmentResponseContainer
                     }),
                     additionalContent: params.config.additionalContent ?? ((props)=>(<HelpLinkComponent {...props} helpHref={"/docs/grouping-structures/groups-1d-3d-alignment"}/>))
-                }
+                },
+                rcsbViewBehaviour: new AlignmentProviderBehaviour()
             },
             structureConfig: {
                 loadConfig: undefined,

src/RcsbFv3D/RcsbFv3DComponent.tsx

@@ -18,7 +18,6 @@ import {CSSProperties, MouseEvent} from "react";
 import {StructureViewerBehaviourObserverInterface} from "../RcsbFvStructure/StructureViewerBehaviourInterface";
 import {RcsbFvStateInterface} from "../RcsbFvState/RcsbFvStateInterface";
 import {RcsbFvStateManager} from "../RcsbFvState/RcsbFvStateManager";
-import {RcsbFvCustomSequenceInterface} from "../RcsbFvSequence/RcsbFvCustomSequence";
 
 export interface RcsbFv3DCssConfig {
     overwriteCss?: boolean;
@@ -84,6 +83,7 @@ export class RcsbFv3DComponent<T,R,L,S,U> extends React.Component <RcsbFv3DCompo
                             title={this.state.sequencePanelConfig.title}
                             subtitle={this.state.sequencePanelConfig.subtitle}
                             unmount={this.props.unmount}
+                            rcsbViewBehaviour={this.props.sequencePanelConfig.rcsbViewBehaviour}
                         />
                     </div>
                     {

src/RcsbFvSequence/RcsbFvSequence.tsx

@@ -8,11 +8,13 @@ import {PluginContext} from "molstar/lib/mol-plugin/context";
 import {RcsbFv, RcsbFvTrackDataElementInterface} from "@rcsb/rcsb-saguaro";
 import {RcsbView, RcsbViewInterface} from "./SequenceViews/RcsbView/RcsbView";
 import {RcsbFvStateInterface} from "../RcsbFvState/RcsbFvStateInterface";
+import {RcsbViewBehaviourInterface} from "./SequenceViews/RcsbView/RcsbViewBehaviourInterface";
 
 export interface RcsbFvSequenceInterface<T,U>{
     config: RcsbViewInterface<T,U>;
     title?: string;
     subtitle?: string;
+    rcsbViewBehaviour?: RcsbViewBehaviourInterface;
 }
 
 export class RcsbFvSequence<T,U> extends React.Component <RcsbFvSequenceInterface<T,U> & {unmount:(flag:boolean)=>void,  stateManager: RcsbFvStateInterface, componentId:string}, RcsbFvSequenceInterface<T,U> > {
@@ -26,6 +28,7 @@ export class RcsbFvSequence<T,U> extends React.Component <RcsbFvSequenceInterfac
             title={this.props.title}
             subtitle={this.props.subtitle}
             unmount={this.props.unmount}
+            rcsbViewBehaviour={this.props.rcsbViewBehaviour}
         />)
     }
 

src/RcsbFvSequence/SequenceViews/RcsbView/PfvManagerFactoryImplementation/MsaPfvComponents/MsaRowMarkComponent.tsx

@@ -28,7 +28,6 @@ export class MsaRowMarkComponent extends React.Component <MsaRowMarkInterface,Ms
 
     private readonly HOVER_COLOR: string = "rgb(51, 122, 183)";
     private readonly ACTIVE_COLOR: string ="rgb(51, 122, 183)";
-    private subscription: Subscription;
 
     constructor(props:MsaRowMarkInterface) {
         super(props);
@@ -50,31 +49,6 @@ export class MsaRowMarkComponent extends React.Component <MsaRowMarkInterface,Ms
         );
     }
 
-    componentDidMount() {
-        /*this.subscribe();
-        this.modelChange();*/
-    }
-
-    componentWillUnmount() {
-        this.subscription?.unsubscribe();
-    }
-
-    private subscribe(): void{
-        this.subscription = this.props.stateManager.subscribe( async o=>{
-            if(o.type == "model-change" && o.view == "3d-view")
-                this.modelChange();
-        });
-    }
-
-    private modelChange(): void {
-       if(Array.from(this.props.stateManager.assemblyModelSate.getMap()?.keys() ?? []).includes(
-           "entityId" in this.props.rowRef ? `${this.props.rowRef.entryId}${TagDelimiter.entity}${this.props.rowRef.entityId}` : `${this.props.rowRef.entryId}${TagDelimiter.instance}${this.props.rowRef.instanceId}`
-       ))
-           this.setState({visibility: "visible", borderLeftColor: this.ACTIVE_COLOR});
-       else if(this.state.visibility == "visible")
-           this.setState({visibility: undefined, borderLeftColor: undefined});
-    }
-
     private click(): void {
         asyncScheduler.schedule(()=>this.props.clickCallback?.());
     }

src/RcsbFvSequence/SequenceViews/RcsbView/PfvManagerFactoryImplementation/MsaPfvManagerFactory.ts

@@ -75,40 +75,46 @@ class MsaPfvManager<T extends any[]> extends AbstractPfvManager<{id:string},{con
             },
             trackConfigModifier: {
                 alignment: (alignmentContext: AlignmentRequestContextType, targetAlignment: TargetAlignment) => new Promise((resolve)=>{
-                    this.additionalConfig?.trackConfigModifier?.alignment?.(alignmentContext, targetAlignment).then((rc)=>{
-                        resolve({
-                            ...rc,
-                            rowMark:{
-                                externalRowMark: {
-                                    component:MsaRowMarkComponent,
-                                    props:{
-                                        rowRef:TagDelimiter.parseEntityOrInstance(targetAlignment.target_id!),
-                                        stateManager: this.stateManager
-                                    }
-                                },
-                                clickCallback:() => this.loadAlignment(alignmentContext,targetAlignment)
-                            },
-                            externalRowTitle: {
-                                rowTitleComponent:MsaRowTitleComponent,
-                                rowTitleAdditionalProps:{
-                                    alignmentContext,
-                                    targetAlignment,
-                                    stateManager: this.stateManager,
-                                    titleClick: ()=> this.loadAlignment(alignmentContext,targetAlignment)
+                    const alignmentMod = {
+                        rowMark:{
+                            externalRowMark: {
+                                component:MsaRowMarkComponent,
+                                props:{
+                                    rowRef:TagDelimiter.parseEntityOrInstance(targetAlignment.target_id!),
+                                    stateManager: this.stateManager
                                 }
                             },
-                            metadata:{
-                                targetId:targetAlignment.target_id
+                            clickCallback:() => this.loadAlignment(alignmentContext,targetAlignment)
+                        },
+                        externalRowTitle: {
+                            rowTitleComponent:MsaRowTitleComponent,
+                            rowTitleAdditionalProps:{
+                                alignmentContext,
+                                targetAlignment,
+                                stateManager: this.stateManager,
+                                titleClick: ()=> this.loadAlignment(alignmentContext,targetAlignment)
                             }
+                        },
+                        metadata:{
+                            targetId:targetAlignment.target_id
+                        }
+                    };
+                    if(this.additionalConfig?.trackConfigModifier?.alignment)
+                        this.additionalConfig.trackConfigModifier.alignment(alignmentContext, targetAlignment).then((rc)=>{
+                            resolve({
+                                ...rc,
+                                ...alignmentMod
+                            });
                         });
-                    });
+                    else
+                        resolve(alignmentMod);
                 })
             },
             beforeChangeCallback: () => {
                 this.config.pfvChangeCallback({context:{id:this.config.id}});
             },
             externalUiComponents:[{
-                component:MsaUiSortComponent,
+                component: MsaUiSortComponent,
                 props: {
                     rcsbFvContainer: this.rcsbFvContainer,
                     stateManager: this.stateManager

src/RcsbFvSequence/SequenceViews/RcsbView/RcsbView.tsx

@@ -14,6 +14,7 @@ import {
     CallbackManagerFactoryInterface,
     CallbackManagerInterface
 } from "./CallbackManagerFactoryInterface";
+import {RcsbViewBehaviourInterface} from "./RcsbViewBehaviourInterface";
 
 export interface RcsbViewInterface<T,U> {
     rcsbId: string;
@@ -24,6 +25,7 @@ export interface RcsbViewInterface<T,U> {
     callbackManagerFactory: CallbackManagerFactoryInterface<U>;
     additionalContent?(props:RcsbViewInterface<T,U> & AbstractViewInterface): JSX.Element;
     buildPfvOnMount?: boolean;
+    rcsbViewBehaviour?: RcsbViewBehaviourInterface;
 }
 
 export class RcsbView<T,U> extends AbstractView<RcsbViewInterface<T,U>, {}>{
@@ -50,6 +52,7 @@ export class RcsbView<T,U> extends AbstractView<RcsbViewInterface<T,U>, {}>{
             stateManager: this.props.stateManager,
             pfvFactory: this.pfvFactory
         });
+        this.props.rcsbViewBehaviour?.observe(this.rcsbFvContainer, this.props.stateManager);
     }
 
     additionalContent(): JSX.Element {
@@ -87,6 +90,7 @@ export class RcsbView<T,U> extends AbstractView<RcsbViewInterface<T,U>, {}>{
     componentWillUnmount() {
         super.componentWillUnmount();
         unmount(this.rcsbFvDivId);
+        this.props.rcsbViewBehaviour?.unsubscribe();
     }
 
     async structureSelectionCallback(): Promise<void> {

src/RcsbFvSequence/SequenceViews/RcsbView/RcsbViewBehaviour/AlignmentProviderBehaviour.ts

@@ -0,0 +1,52 @@
+import {RcsbViewBehaviourInterface} from "../RcsbViewBehaviourInterface";
+import {DataContainer} from "../../../../Utils/DataContainer";
+import {
+    RcsbFvModulePublicInterface
+} from "@rcsb/rcsb-saguaro-app/build/dist/RcsbFvWeb/RcsbFvModule/RcsbFvModuleInterface";
+import {RcsbFvStateInterface} from "../../../../RcsbFvState/RcsbFvStateInterface";
+import {Subscription} from "rxjs";
+import {TagDelimiter} from "@rcsb/rcsb-saguaro-app";
+import {TargetAlignment} from "@rcsb/rcsb-api-tools/build/RcsbGraphQL/Types/Borrego/GqlTypes";
+
+type AlignmentDataType = {
+    pdb:{entryId:string;instanceId:string;},
+    targetAlignment: TargetAlignment;
+};
+
+export class AlignmentProviderBehaviour implements RcsbViewBehaviourInterface {
+
+    private subscription: Subscription | undefined = undefined;
+    observe(rcsbFvContainer: DataContainer<RcsbFvModulePublicInterface>, stateManager: RcsbFvStateInterface): void {
+        this.subscription = stateManager.subscribe<"model-ready",AlignmentDataType>(async o=>{
+            if(o.type == "model-ready" && o.data)
+                loadNextModel(o.data, rcsbFvContainer, stateManager);
+        })
+    }
+
+    unsubscribe(): void {
+        this.subscription?.unsubscribe();
+    }
+
+}
+
+async function loadNextModel(data:AlignmentDataType, rcsbFvContainer: DataContainer<RcsbFvModulePublicInterface>, stateManager: RcsbFvStateInterface): Promise<void> {
+    const alignments = await rcsbFvContainer.get()?.getAlignmentResponse();
+    if(!alignments || !alignments.target_alignment)
+        return;
+    const pdb = data.pdb;
+    const targetAlignment = data.targetAlignment;
+    const index = alignments.target_alignment.findIndex( ta=>ta?.target_id == `${pdb.entryId}${TagDelimiter.instance}${pdb.instanceId}`);
+    if(typeof index ==="undefined" || index < 0 || index == (alignments.target_alignment.length-1))
+        return;
+    const targetId = alignments.target_alignment[index+1]?.target_id;
+    if(!targetId)
+        return ;
+    stateManager.next<"model-change",AlignmentDataType>({
+        type:"model-change",
+        view:"1d-view",
+        data:{
+            pdb: TagDelimiter.parseInstance(targetId),
+            targetAlignment
+        }
+    });
+}

src/RcsbFvSequence/SequenceViews/RcsbView/RcsbViewBehaviourInterface.ts

@@ -0,0 +1,12 @@
+import {DataContainer} from "../../../Utils/DataContainer";
+import {
+    RcsbFvModulePublicInterface
+} from "@rcsb/rcsb-saguaro-app/build/dist/RcsbFvWeb/RcsbFvModule/RcsbFvModuleInterface";
+import {RcsbFvStateInterface} from "../../../RcsbFvState/RcsbFvStateInterface";
+
+export interface RcsbViewBehaviourInterface {
+
+    observe(rcsbFvContainer: DataContainer<RcsbFvModulePublicInterface>, stateManager: RcsbFvStateInterface): void;
+    unsubscribe(): void;
+
+}

src/RcsbFvStructure/StructureViewerBehaviour/MsaBehaviour.ts

@@ -195,6 +195,11 @@ class MsaBehaviour<R,L> implements StructureViewerBehaviourInterface {
             if(trajectory){
                 this.componentAction.accept(trajectory, data.pdb);
             }
+            this.stateManager.next({
+                type: "model-ready",
+                view: "3d-view",
+                data
+            });
         }
     }