Removed global state for MSA checkboxes

CHANGELOG.md

@@ -15,6 +15,7 @@ that is used to map loaded structure ids with user provided ids in `LoadParams`
 - New `RcsbViewBehaviourInterface` interface to extend "1d" behaviour to events
 - `RcsbFv3DAbstract.render` converted to async method
 - Exposed molstar trajectory preset configuration
+- Removed global state for MSA checkboxes
 ### Configuration
 - All packages are transpiled and included in the final module
 ### Breaking Changes

package.json

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

src/RcsbFv3D/RcsbFv3DAlignmentProvider.tsx

@@ -40,8 +40,8 @@ import {
     AlignmentTrajectoryParamsType
 } from "../RcsbFvStructure/StructureViewers/MolstarViewer/TrajectoryPresetProvider/AlignmentTrajectoryPresetProvider";
 import {
-    MolstarComponentActionFactory
-} from "../RcsbFvStructure/StructureViewers/MolstarViewer/MolstarUtils/MolstarComponentAction";
+    MolstarAlignmentComponentActionFactory
+} from "../RcsbFvStructure/StructureViewers/MolstarViewer/MolstarUtils/MolstarAlignmentComponentAction";
 import {MolstarTools} from "../RcsbFvStructure/StructureViewers/MolstarViewer/MolstarUtils/MolstarTools";
 import getModelIdFromTrajectory = MolstarTools.getModelIdFromTrajectory;
 import {AbstractViewInterface} from "../RcsbFvSequence/SequenceViews/AbstractView";
@@ -115,7 +115,7 @@ export class RcsbFv3DAlignmentProvider extends RcsbFv3DAbstract<
             >( new MolstarManagerFactory(getModelIdFromTrajectory) ),
             structureViewerBehaviourObserver: new MsaBehaviourObserver<AlignmentLoadMolstarType,LoadMolstarReturnType>(
                 new MolstarAlignmentLoader(params.config.loadParamsProvider),
-                new MolstarComponentActionFactory()
+                new MolstarAlignmentComponentActionFactory()
             )
         });
     }

src/RcsbFv3D/RcsbFv3DSequenceIdentity.tsx

@@ -37,8 +37,8 @@ import {
     AlignmentTrajectoryParamsType
 } from "../RcsbFvStructure/StructureViewers/MolstarViewer/TrajectoryPresetProvider/AlignmentTrajectoryPresetProvider";
 import {
-    MolstarComponentActionFactory
-} from "../RcsbFvStructure/StructureViewers/MolstarViewer/MolstarUtils/MolstarComponentAction";
+    MolstarAlignmentComponentActionFactory
+} from "../RcsbFvStructure/StructureViewers/MolstarViewer/MolstarUtils/MolstarAlignmentComponentAction";
 import {MolstarTools} from "../RcsbFvStructure/StructureViewers/MolstarViewer/MolstarUtils/MolstarTools";
 import getModelIdFromTrajectory = MolstarTools.getModelIdFromTrajectory;
 
@@ -102,7 +102,7 @@ export class RcsbFv3DSequenceIdentity extends RcsbFv3DAbstract<
             >( new MolstarManagerFactory(getModelIdFromTrajectory) ),
             structureViewerBehaviourObserver: new MsaBehaviourObserver<AlignmentLoadMolstarType,LoadMolstarReturnType>(
                 new MolstarAlignmentLoader(),
-                new MolstarComponentActionFactory()
+                new MolstarAlignmentComponentActionFactory()
             )
         });
     }

src/RcsbFv3D/RcsbFv3DUniprot.tsx

@@ -35,11 +35,10 @@ import {
     AlignmentTrajectoryParamsType
 } from "../RcsbFvStructure/StructureViewers/MolstarViewer/TrajectoryPresetProvider/AlignmentTrajectoryPresetProvider";
 import {
-    MolstarComponentActionFactory
-} from "../RcsbFvStructure/StructureViewers/MolstarViewer/MolstarUtils/MolstarComponentAction";
+    MolstarAlignmentComponentActionFactory
+} from "../RcsbFvStructure/StructureViewers/MolstarViewer/MolstarUtils/MolstarAlignmentComponentAction";
 import {MolstarTools} from "../RcsbFvStructure/StructureViewers/MolstarViewer/MolstarUtils/MolstarTools";
 import getModelIdFromTrajectory = MolstarTools.getModelIdFromTrajectory;
-import {AbstractViewInterface} from "../RcsbFvSequence/SequenceViews/AbstractView";
 
 export interface RcsbFv3DUniprotInterface  {
     elementId?: string;
@@ -102,7 +101,7 @@ export class RcsbFv3DUniprot extends RcsbFv3DAbstract<
             >( new MolstarManagerFactory(getModelIdFromTrajectory) ),
             structureViewerBehaviourObserver: new MsaBehaviourObserver<AlignmentLoadMolstarType,LoadMolstarReturnType>(
                 new MolstarAlignmentLoader(),
-                new MolstarComponentActionFactory()
+                new MolstarAlignmentComponentActionFactory()
             )
         });
     }

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

@@ -22,14 +22,11 @@ interface MsaRowTitleCheckboxState {
     disabled:boolean;
 }
 
-//TODO keeps a global state of the (checkboxes <=> mol-star components) This needs further review!!!
-let globalState: {[key:string]: "active"|"inactive"|"disabled"|undefined;} = {};
-
 export class MsaRowTitleCheckboxComponent extends React.Component <MsaRowTitleCheckboxType,MsaRowTitleCheckboxState> {
 
     readonly state: MsaRowTitleCheckboxState = {
-        checked: globalState[this.compId() + this.props.tag] == "active" || this.props.tag == "aligned",
-        disabled: globalState[this.compId() + this.props.tag] == "disabled"
+        checked: this.props.tag == "aligned",
+        disabled: false
     };
 
     private subscription: Subscription;
@@ -49,28 +46,20 @@ export class MsaRowTitleCheckboxComponent extends React.Component <MsaRowTitleCh
 
     public componentDidMount() {
         this.subscribe();
-    }
-
-    public componentDidUpdate(prevProps: Readonly<MsaRowTitleCheckboxInterface>, prevState: Readonly<MsaRowTitleCheckboxState>, snapshot?: any) {
-        if(prevProps.disabled != this.props.disabled && !this.props.disabled ) {
-            switch (globalState[ this.compId()+this.props.tag ]){
-                case "active":
-                    this.setState({checked: true, disabled:false});
-                    break;
-                case "inactive":
-                    this.setState({checked: false, disabled:false});
-                    break;
-                case "disabled":
-                    this.setState({disabled:true})
-                    break;
-                case undefined:
-                    break;
+        this.props.stateManager.next<"component-info", {pdb:{entryId:string;entityId:string;}|{entryId:string;instanceId:string;};tag:MsaRowTitleCheckboxInterface["tag"];}>({
+            type: "component-info",
+            view: "1d-view",
+            data: {
+                pdb: "entityId" in this.props ? {
+                    entryId: this.props.entryId,
+                    entityId: this.props.entityId,
+                } :  {
+                    entryId: this.props.entryId,
+                    instanceId: this.props.instanceId
+                },
+                tag: this.props.tag
             }
-        }else if(prevProps.disabled != this.props.disabled) {
-            this.setState({checked: this.props.tag == "aligned"},()=>{
-                globalState[ this.compId()+this.props.tag ]  = this.state.checked ? "active" : "inactive";
-            });
-        }
+        })
     }
 
     public componentWillUnmount() {
@@ -79,19 +68,20 @@ export class MsaRowTitleCheckboxComponent extends React.Component <MsaRowTitleCh
 
     private subscribe(): void{
         this.subscription = this.props.stateManager.subscribe<
-            "representation-change"|"missing-component",
-            {label:string;isHidden:boolean;} & {tag:MsaRowTitleCheckboxInterface["tag"];isHidden:boolean;pdb:{entryId:string;entityId:string;}|{entryId:string;instanceId:string;};}
+            "representation-change"|"missing-component"|"component-info",
+            {label:string;isHidden:boolean;} & {tag:MsaRowTitleCheckboxInterface["tag"];isHidden:boolean;pdb:{entryId:string;entityId:string;}|{entryId:string;instanceId:string;};} & {isComponent: boolean;}
         >((o)=>{
             if(o.type == "representation-change" && o.view == "3d-view" && o.data)
-                this.structureViewerRepresentationChange(o.data);
+                this.structureViewerRepresentationChange(o.data as any);
             if(o.type == "missing-component" && o.view == "3d-view" && o.data)
-                this.missingComponent(o.data as any);
+                this.missingComponent(o.data);
+            if(o.type == "component-info" && o.view == "3d-view" && o.data)
+                this.componentInfo(o.data);
         })
     }
 
-    private missingComponent(pdb:{entryId:string;entityId:string;tag:string;}): void{
-        if(this.compId() == this.getRcsbId(pdb) && this.props.tag == pdb.tag){
-            globalState[this.compId()+this.props.tag] = "disabled"
+    private missingComponent(data: {tag:MsaRowTitleCheckboxInterface["tag"];isHidden:boolean;pdb:{entryId:string;entityId:string;}|{entryId:string;instanceId:string;};}): void{
+        if(this.compId() == this.getRcsbId(data.pdb) && this.props.tag == data.tag){
             this.setState({disabled:true});
         }
 
@@ -118,7 +108,6 @@ export class MsaRowTitleCheckboxComponent extends React.Component <MsaRowTitleCh
         if(this.props.disabled || this.state.disabled)
             return;
         this.setState({checked:!this.state.checked},()=>{
-            globalState[this.compId()+this.props.tag] = this.state.checked ? "active" : "inactive";
             this.props.stateManager.next<"representation-change",{tag:MsaRowTitleCheckboxInterface["tag"];isHidden:boolean;pdb:{entryId:string;entityId:string;}|{entryId:string;instanceId:string;};}>({
                 view:"1d-view",
                 type: "representation-change",
@@ -184,4 +173,11 @@ export class MsaRowTitleCheckboxComponent extends React.Component <MsaRowTitleCh
             return `${pdb.entryId}${TagDelimiter.entity}${pdb.entityId}`;
     }
 
+    private componentInfo(data: {tag:MsaRowTitleCheckboxInterface["tag"];isComponent:boolean;pdb:{entryId:string;entityId:string;}|{entryId:string;instanceId:string;};}): void {
+        if(this.compId() == this.getRcsbId(data.pdb) && this.props.tag == data.tag){
+            if( !data.isComponent )
+                this.setState({disabled: true})
+        }
+    }
+
 }

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

@@ -20,7 +20,7 @@ export class AlignmentProviderBehaviour implements RcsbViewBehaviourInterface {
     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);
+                await loadNextModel(o.data, rcsbFvContainer, stateManager);
         })
     }
 

src/RcsbFvState/AssemblyModelSate.ts

@@ -59,7 +59,7 @@ export class AssemblyModelSate {
     }
 
     public getModelChainInfo(modelId: string): {entryId: string; assemblyId: string, chains:Array<ChainInfo>;} | undefined {
-        return this.modelMap.get(modelId);
+        return this.modelMap?.get(modelId);
     }
 
     public getChainInfo(asymId?:string): ChainInfo | undefined{

src/RcsbFvStructure/StructureViewerBehaviour/MsaBehaviour.ts

@@ -84,7 +84,10 @@ class MsaBehaviour<R,L> implements StructureViewerBehaviourInterface {
     }
 
     private subscribe(): Subscription {
-        return this.stateManager.subscribe<"model-change"|"representation-change"|"feature-click"|"structure-download",AlignmentDataType & {tag:"polymer"|"non-polymer";isHidden:boolean;} & SelectedRegion[]>(async o=>{
+        return this.stateManager.subscribe<
+            "model-change"|"representation-change"|"feature-click"|"structure-download"|"component-info",
+            AlignmentDataType & {tag:"polymer"|"non-polymer";isHidden:boolean;} & SelectedRegion[]
+        >(async o=>{
             if(o.type == "model-change" && o.view == "1d-view" && o.data)
                 await this.modelChange(o.data);
             if(o.type == "representation-change" && o.view == "1d-view" && o.data)
@@ -99,6 +102,8 @@ class MsaBehaviour<R,L> implements StructureViewerBehaviourInterface {
                 await this.isSelectionEmpty();
             if(o.type == "structure-download" && o.view == "ui-view")
                 this.downloadStructures();
+            if(o.type == "component-info" && o.view == "1d-view" && o.data)
+                this.componentInfo(o.data);
         });
     }
 
@@ -252,4 +257,43 @@ class MsaBehaviour<R,L> implements StructureViewerBehaviourInterface {
         });
     }
 
+    private componentInfo(data:{pdb:{entryId:string;entityId:string;}|{entryId:string;instanceId:string;}} & {tag:"aligned"|"polymer"|"non-polymer";}): void {
+        const chainInfo: ChainInfo|undefined = this.stateManager.assemblyModelSate.getModelChainInfo(this.getRcsbId(data.pdb))?.chains.find(
+            ch=>(("entityId" in data.pdb && ch.entityId==data.pdb.entityId) || ("instanceId" in data.pdb && ch.label==data.pdb.instanceId))
+        );
+        if(!chainInfo)
+            return;
+        let isComponent: boolean = false;
+        switch (data.tag){
+            case "aligned":
+                const asymId: string|undefined = chainInfo.label;
+                const operatorInfo: OperatorInfo[] = chainInfo.operators ?? [];
+                const alignedCompId: string = `${data.pdb.entryId}${TagDelimiter.entity}${chainInfo.entityId}${TagDelimiter.instance}${asymId}${TagDelimiter.assembly}${operatorInfo[0].ids.join(",")}${TagDelimiter.assembly}${"polymer"}`;
+                isComponent = this.structureViewer.isComponent(alignedCompId);
+                break;
+            case "polymer":
+                const polymerCompId: string = `${data.pdb.entryId}${TagDelimiter.entity}${chainInfo.entityId}${TagDelimiter.assembly}${data.tag}`;
+                this.structureViewer.displayComponent(polymerCompId,);
+                isComponent = this.structureViewer.isComponent(polymerCompId);
+                break;
+            case "non-polymer":
+                for (const tag of createSelectionExpressions(data.pdb.entryId).map(expression=>expression.tag).filter(tag=>(tag!="water" && tag != "polymer")) ) {
+                    const nonPolymerCompId: string = `${data.pdb.entryId}${TagDelimiter.entity}${chainInfo.entityId}${TagDelimiter.assembly}${tag}`;
+                    this.structureViewer.displayComponent(nonPolymerCompId);
+                    isComponent = this.structureViewer.isComponent(nonPolymerCompId);
+                    if(isComponent)
+                        break;
+                }
+                break;
+        }
+        this.stateManager.next<"component-info",{pdb:{entryId:string;entityId:string;}|{entryId:string;instanceId:string;}} & {tag:"aligned"|"polymer"|"non-polymer";} & {isComponent: boolean;}>({
+            type: "component-info",
+            view: "3d-view",
+            data: {
+                ...data,
+                isComponent
+            }
+        });
+    }
+
 }

src/RcsbFvStructure/StructureViewers/MolstarViewer/MolstarUtils/MolstarComponentAction.ts → src/RcsbFvStructure/StructureViewers/MolstarViewer/MolstarUtils/MolstarAlignmentComponentAction.ts

@@ -6,12 +6,12 @@ import {LoadMolstarReturnType} from "../MolstarActionManager";
 import {RcsbFvStateInterface} from "../../../../RcsbFvState/RcsbFvStateInterface";
 import {createSelectionExpressions} from "@rcsb/rcsb-molstar/build/src/viewer/helpers/selection";
 
-export class MolstarComponentActionFactory implements ComponentActionFactoryInterface<LoadMolstarReturnType> {
+export class MolstarAlignmentComponentActionFactory implements ComponentActionFactoryInterface<LoadMolstarReturnType> {
     getComponentAction(config: { stateManager: RcsbFvStateInterface }): ComponentActionInterface<LoadMolstarReturnType> {
-        return new MolstarComponentAction(config.stateManager);
+        return new MolstarAlignmentComponentAction(config.stateManager);
     }
 }
-class MolstarComponentAction implements ComponentActionInterface<LoadMolstarReturnType> {
+class MolstarAlignmentComponentAction implements ComponentActionInterface<LoadMolstarReturnType> {
 
     private readonly stateManager: RcsbFvStateInterface;
     constructor(stateManager: RcsbFvStateInterface) {
@@ -25,13 +25,13 @@ class MolstarComponentAction implements ComponentActionInterface<LoadMolstarRetu
         if(!components["polymer"]) {
             this.stateManager.next<
                 "missing-component",
-                { tag: "aligned" | "polymer" | "non-polymer"; entryId: string; entityId: string; } | { tag: "aligned" | "polymer" | "non-polymer"; entryId: string; instanceId: string; }
+                { tag: "aligned" | "polymer" | "non-polymer"; pdb: {entryId:string;entityId:string;}|{entryId:string;instanceId:string;}; }
             >({
                 type: "missing-component",
                 view: "3d-view",
                 data: {
                     tag: "polymer",
-                    ...context
+                    pdb: context
                 }
             });
         }
@@ -41,13 +41,13 @@ class MolstarComponentAction implements ComponentActionInterface<LoadMolstarRetu
         }
         this.stateManager.next<
             "missing-component",
-            {tag:"aligned"|"polymer"|"non-polymer";entryId:string;entityId:string;}|{tag:"aligned"|"polymer"|"non-polymer";entryId:string;instanceId:string;}
+            { tag: "aligned" | "polymer" | "non-polymer"; pdb: {entryId:string;entityId:string;}|{entryId:string;instanceId:string;}; }
         >({
             type:"missing-component",
             view: "3d-view",
             data: {
                 tag:"non-polymer",
-               ...context
+                pdb: context
             }
         });
     }