msa checkbox state bug fixed

package.json

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

src/RcsbFv3D/RcsbFv3DAlignmentProvider.tsx

@@ -39,9 +39,6 @@ import {
 import {
     AlignmentTrajectoryParamsType
 } from "../RcsbFvStructure/StructureViewers/MolstarViewer/TrajectoryPresetProvider/AlignmentTrajectoryPresetProvider";
-import {
-    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";
@@ -114,8 +111,7 @@ export class RcsbFv3DAlignmentProvider extends RcsbFv3DAbstract<
                 {viewerElement:string|HTMLElement,viewerProps:Partial<ViewerProps>}
             >( new MolstarManagerFactory(getModelIdFromTrajectory) ),
             structureViewerBehaviourObserver: new MsaBehaviourObserver<AlignmentLoadMolstarType,LoadMolstarReturnType>(
-                new MolstarAlignmentLoader(params.config.loadParamsProvider),
-                new MolstarAlignmentComponentActionFactory()
+                new MolstarAlignmentLoader(params.config.loadParamsProvider)
             )
         });
     }

src/RcsbFv3D/RcsbFv3DAssembly.tsx

@@ -1,14 +1,12 @@
 import * as React from "react";
 import {RcsbFv3DAbstract} from "./RcsbFv3DAbstract";
 import {
-    AssemblyTrajectoryParamsType,
-    AssemblyTrajectoryPresetProvider
+    AssemblyTrajectoryParamsType
 } from "../RcsbFvStructure/StructureViewers/MolstarViewer/TrajectoryPresetProvider/AssemblyTrajectoryPresetProvider";
 import {RcsbFvAdditionalConfig} from "@rcsb/rcsb-saguaro-app/build/dist/RcsbFvWeb/RcsbFvModule/RcsbFvModuleInterface";
 import {InstanceSequenceConfig} from "@rcsb/rcsb-saguaro-app/build/dist/RcsbFvWeb/RcsbFvBuilder/RcsbFvInstanceBuilder";
 import {OperatorInfo} from "../RcsbFvStructure/StructureViewerInterface";
 import {
-    LoadMethod,
     LoadMolstarInterface,
     LoadMolstarReturnType
 } from "../RcsbFvStructure/StructureViewers/MolstarViewer/MolstarActionManager";

src/RcsbFv3D/RcsbFv3DSequenceIdentity.tsx

@@ -36,9 +36,6 @@ import {buildSequenceIdentityAlignmentFv} from "@rcsb/rcsb-saguaro-app";
 import {
     AlignmentTrajectoryParamsType
 } from "../RcsbFvStructure/StructureViewers/MolstarViewer/TrajectoryPresetProvider/AlignmentTrajectoryPresetProvider";
-import {
-    MolstarAlignmentComponentActionFactory
-} from "../RcsbFvStructure/StructureViewers/MolstarViewer/MolstarUtils/MolstarAlignmentComponentAction";
 import {MolstarTools} from "../RcsbFvStructure/StructureViewers/MolstarViewer/MolstarUtils/MolstarTools";
 import getModelIdFromTrajectory = MolstarTools.getModelIdFromTrajectory;
 
@@ -101,8 +98,7 @@ export class RcsbFv3DSequenceIdentity extends RcsbFv3DAbstract<
                 {viewerElement:string|HTMLElement,viewerProps:Partial<ViewerProps>}
             >( new MolstarManagerFactory(getModelIdFromTrajectory) ),
             structureViewerBehaviourObserver: new MsaBehaviourObserver<AlignmentLoadMolstarType,LoadMolstarReturnType>(
-                new MolstarAlignmentLoader(),
-                new MolstarAlignmentComponentActionFactory()
+                new MolstarAlignmentLoader()
             )
         });
     }

src/RcsbFv3D/RcsbFv3DUniprot.tsx

@@ -34,9 +34,6 @@ import {buildUniprotAlignmentFv} from "@rcsb/rcsb-saguaro-app";
 import {
     AlignmentTrajectoryParamsType
 } from "../RcsbFvStructure/StructureViewers/MolstarViewer/TrajectoryPresetProvider/AlignmentTrajectoryPresetProvider";
-import {
-    MolstarAlignmentComponentActionFactory
-} from "../RcsbFvStructure/StructureViewers/MolstarViewer/MolstarUtils/MolstarAlignmentComponentAction";
 import {MolstarTools} from "../RcsbFvStructure/StructureViewers/MolstarViewer/MolstarUtils/MolstarTools";
 import getModelIdFromTrajectory = MolstarTools.getModelIdFromTrajectory;
 
@@ -100,8 +97,7 @@ export class RcsbFv3DUniprot extends RcsbFv3DAbstract<
                 {viewerElement:string|HTMLElement,viewerProps:Partial<ViewerProps>}
             >( new MolstarManagerFactory(getModelIdFromTrajectory) ),
             structureViewerBehaviourObserver: new MsaBehaviourObserver<AlignmentLoadMolstarType,LoadMolstarReturnType>(
-                new MolstarAlignmentLoader(),
-                new MolstarAlignmentComponentActionFactory()
+                new MolstarAlignmentLoader()
             )
         });
     }

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

@@ -46,47 +46,30 @@ export class MsaRowTitleCheckboxComponent extends React.Component <MsaRowTitleCh
 
     public componentDidMount() {
         this.subscribe();
-        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
-            }
-        })
+        this.requestInfo();
     }
 
     public componentWillUnmount() {
         this.subscription.unsubscribe();
     }
 
+    public componentDidUpdate(prevProps: Readonly<MsaRowTitleCheckboxType>, prevState: Readonly<MsaRowTitleCheckboxState>, snapshot?: any) {
+        if(!this.props.disabled && prevProps.disabled)
+            this.requestInfo();
+    }
+
     private subscribe(): void{
         this.subscription = this.props.stateManager.subscribe<
             "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;}
+            {label:string;isHidden:boolean;} & {tag:MsaRowTitleCheckboxInterface["tag"];isHidden:boolean;pdb:{entryId:string;entityId:string;}|{entryId:string;instanceId:string;};} & {isComponent: boolean; isVisible: boolean;}
         >((o)=>{
             if(o.type == "representation-change" && o.view == "3d-view" && o.data)
                 this.structureViewerRepresentationChange(o.data as any);
-            if(o.type == "missing-component" && o.view == "3d-view" && o.data)
-                this.missingComponent(o.data);
             if(o.type == "component-info" && o.view == "3d-view" && o.data)
                 this.componentInfo(o.data);
         })
     }
 
-    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});
-        }
-
-    }
-
     private structureViewerRepresentationChange(d:{label:string;isHidden:boolean;}): void {
         const row: string[] = d.label.split(TagDelimiter.entity);
         const suffix: string = row.pop()!;
@@ -173,11 +156,32 @@ 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 {
+    private componentInfo(data: {tag:MsaRowTitleCheckboxInterface["tag"];isComponent:boolean;isVisible: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})
+            else if( data.isVisible)
+                this.setState({checked: true})
+            else
+                this.setState({checked: false})
         }
     }
 
+    private requestInfo(): void {
+        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
+            }
+        })
+    }
+
 }

src/RcsbFvStructure/StructureViewerBehaviour/MsaBehaviour.ts

@@ -23,7 +23,6 @@ import {RegionSelectionInterface} from "../../RcsbFvState/RcsbFvSelectorManager"
 import {TargetAlignment} from "@rcsb/rcsb-api-tools/build/RcsbGraphQL/Types/Borrego/GqlTypes";
 import {FunctionCall} from "../../Utils/FunctionCall";
 import onetimeCall = FunctionCall.onetimeCall;
-import {ComponentActionFactoryInterface, ComponentActionInterface} from "../StructureUtils/ComponentActionInterface";
 
 type MsaBehaviourType<R,L> = StructureLoaderInterface<[
     ViewerCallbackManagerInterface & ViewerActionManagerInterface<R,L>,
@@ -35,17 +34,15 @@ export class MsaBehaviourObserver<R,L> implements StructureViewerBehaviourObserv
 
     private structureBehaviour: StructureViewerBehaviourInterface;
     private readonly structureLoader: MsaBehaviourType<R,L>;
-    private readonly componentActionFactory: ComponentActionFactoryInterface<L>;
 
-    constructor(structureLoader: MsaBehaviourType<R,L>, componentActionFactory: ComponentActionFactoryInterface<L>) {
+    constructor(structureLoader: MsaBehaviourType<R,L>) {
         this.structureLoader = structureLoader;
-        this.componentActionFactory = componentActionFactory;
     }
     public observe(
         structureViewer: ViewerCallbackManagerInterface & ViewerActionManagerInterface<R,L>,
         stateManager: RcsbFvStateInterface
     ): void {
-        this.structureBehaviour = new MsaBehaviour(structureViewer, stateManager, this.structureLoader, this.componentActionFactory.getComponentAction({stateManager}));
+        this.structureBehaviour = new MsaBehaviour(structureViewer, stateManager, this.structureLoader);
     }
 
     public unsubscribe(): void {
@@ -65,7 +62,6 @@ class MsaBehaviour<R,L> implements StructureViewerBehaviourInterface {
     private readonly stateManager: RcsbFvStateInterface;
     private readonly subscription: Subscription;
     private readonly structureLoader: MsaBehaviourType<R,L>;
-    private readonly componentAction: ComponentActionInterface<L>;
     private readonly componentList: string[] = [];
 
     private readonly CREATE_COMPONENT_THR: number = 5;
@@ -74,12 +70,10 @@ class MsaBehaviour<R,L> implements StructureViewerBehaviourInterface {
         structureViewer: ViewerCallbackManagerInterface & ViewerActionManagerInterface<R,L>,
         stateManager: RcsbFvStateInterface,
         structureLoader: MsaBehaviourType<R,L>,
-        componentAction: ComponentActionInterface<L>
     ) {
         this.structureViewer = structureViewer;
         this.stateManager = stateManager;
         this.structureLoader = structureLoader;
-        this.componentAction = componentAction;
         this.subscription = this.subscribe();
     }
 
@@ -196,10 +190,7 @@ class MsaBehaviour<R,L> implements StructureViewerBehaviourInterface {
 
     async modelChange(data?:AlignmentDataType): Promise<void> {
         if(data) {
-            const trajectory = await this.structureLoader.load(this.structureViewer, data.pdb, data.targetAlignment);
-            if(trajectory){
-                this.componentAction.accept(trajectory, data.pdb);
-            }
+            await this.structureLoader.load(this.structureViewer, data.pdb, data.targetAlignment);
             this.stateManager.next({
                 type: "model-ready",
                 view: "3d-view",
@@ -264,34 +255,39 @@ class MsaBehaviour<R,L> implements StructureViewerBehaviourInterface {
         if(!chainInfo)
             return;
         let isComponent: boolean = false;
+        let isVisible: 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);
+                isVisible = this.structureViewer.displayComponent(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);
+                isVisible = this.structureViewer.displayComponent(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);
+                    isVisible = this.structureViewer.displayComponent(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;}>({
+        this.stateManager.next<"component-info",{pdb:{entryId:string;entityId:string;}|{entryId:string;instanceId:string;}} & {tag:"aligned"|"polymer"|"non-polymer";} & {isComponent: boolean; isVisible: boolean;}>({
             type: "component-info",
             view: "3d-view",
             data: {
                 ...data,
-                isComponent
+                isComponent,
+                isVisible
             }
         });
     }

src/RcsbFvStructure/StructureViewers/MolstarViewer/MolstarActionManager.ts

@@ -13,7 +13,7 @@ import {MolScriptBuilder as MS} from "molstar/lib/mol-script/language/builder";
 import {Script} from "molstar/lib/mol-script/script";
 import {SetUtils} from "molstar/lib/mol-util/set";
 import {Loci} from "molstar/lib/mol-model/loci";
-import {StructureComponentRef, StructureRef} from "molstar/lib/mol-plugin-state/manager/structure/hierarchy-state";
+import {StructureRef} from "molstar/lib/mol-plugin-state/manager/structure/hierarchy-state";
 import {ColorTheme} from "molstar/lib/mol-theme/color";
 import {StructureRepresentationRegistry} from "molstar/lib/mol-repr/structure/registry";
 import {PresetProps} from "@rcsb/rcsb-molstar/build/src/viewer/helpers/preset";
@@ -69,7 +69,6 @@ export class MolstarActionManager<P,L> implements ViewerActionManagerInterface<L
     private readonly innerSelectionFlag: DataContainer<boolean>;
     private readonly innerReprChangeFlag: DataContainer<boolean>;
     private readonly modelMapManager: ViewerModelMapManagerInterface<LoadMolstarInterface<P,L>,L>;
-    private readonly componentMap: Map<string, StructureComponentRef> = new Map<string, StructureComponentRef>();
     private readonly loadingFlag: DataContainer<boolean>;
 
     constructor(config:{viewer: Viewer;modelMapManager: ViewerModelMapManagerInterface<LoadMolstarInterface<P,L>,L>;innerSelectionFlag: DataContainer<boolean>;  innerReprChangeFlag: DataContainer<boolean>; loadingFlag: DataContainer<boolean>;}) {
@@ -236,7 +235,6 @@ export class MolstarActionManager<P,L> implements ViewerActionManagerInterface<L
         }else{
             await this.viewer.createComponent(args[0], {modelId: this.modelMapManager.getModelId(args[1]), labelAsymId:args[2], operatorName: args[4]}, args[3]);
         }
-        this.componentMap.set(args[0], this.viewer.plugin.managers.structure.hierarchy.currentComponentGroups[this.viewer.plugin.managers.structure.hierarchy.currentComponentGroups.length-1][0]);
         this.innerReprChangeFlag.set(false);
     }
 
@@ -278,13 +276,9 @@ export class MolstarActionManager<P,L> implements ViewerActionManagerInterface<L
 
     public async removeComponent(componentLabel?: string): Promise<void>{
         if(componentLabel == null){
-            await Promise.all(Array.from(this.componentMap.entries()).map(async ([id,comp], n)=>{
-                await this.viewer.removeComponent(id);
-                this.componentMap.delete(id);
-            }))
+            this.viewer.plugin.managers.structure.hierarchy.currentComponentGroups.forEach(c=>this.viewer.plugin.managers.structure.hierarchy.remove(c))
         }else{
             await this.viewer.removeComponent(componentLabel);
-            this.componentMap.delete(componentLabel);
         }
     }
 
@@ -298,16 +292,12 @@ export class MolstarActionManager<P,L> implements ViewerActionManagerInterface<L
     }
     private changeComponentDisplay(componentLabel: string, visibilityFlag: boolean): void{
         this.innerReprChangeFlag.set(true);
-        if(this.componentMap.has(componentLabel) && this.getComponentDisplay(componentLabel) != visibilityFlag) {
-            this.viewer.plugin.managers.structure.component.toggleVisibility([this.componentMap.get(componentLabel)!]);
-        }else if(!this.componentMap.has(componentLabel)){
-            for (const c of this.viewer.plugin.managers.structure.hierarchy.currentComponentGroups) {
-                for (const comp of c) {
-                    if(comp.cell.obj?.label === componentLabel) {
-                        if(!comp.cell.state.isHidden != visibilityFlag) {
-                            this.viewer.plugin.managers.structure.component.toggleVisibility(c);
-                            return void 0;
-                        }
+        for (const c of this.viewer.plugin.managers.structure.hierarchy.currentComponentGroups) {
+            for (const comp of c) {
+                if(comp.cell.obj?.label === componentLabel) {
+                    if(!comp.cell.state.isHidden != visibilityFlag) {
+                        this.viewer.plugin.managers.structure.component.toggleVisibility(c);
+                        return void 0;
                     }
                 }
             }
@@ -315,9 +305,14 @@ export class MolstarActionManager<P,L> implements ViewerActionManagerInterface<L
         this.innerReprChangeFlag.set(false);
     }
     private getComponentDisplay(componentLabel: string): boolean | undefined{
-        if(this.componentMap.has(componentLabel)) {
-            return !this.componentMap.get(componentLabel)!.cell.state.isHidden!;
+        for (const c of this.viewer.plugin.managers.structure.hierarchy.currentComponentGroups) {
+            for (const comp of c) {
+                if(comp.cell.obj?.label === componentLabel) {
+                    return !comp.cell.state.isHidden;
+                }
+            }
         }
+        return false;
     }
 
     public resetCamera(): void {

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

@@ -4,7 +4,6 @@ import {
 } from "../../../StructureUtils/ComponentActionInterface";
 import {LoadMolstarReturnType} from "../MolstarActionManager";
 import {RcsbFvStateInterface} from "../../../../RcsbFvState/RcsbFvStateInterface";
-import {createSelectionExpressions} from "@rcsb/rcsb-molstar/build/src/viewer/helpers/selection";
 
 export class MolstarAlignmentComponentActionFactory implements ComponentActionFactoryInterface<LoadMolstarReturnType> {
     getComponentAction(config: { stateManager: RcsbFvStateInterface }): ComponentActionInterface<LoadMolstarReturnType> {
@@ -19,37 +18,7 @@ class MolstarAlignmentComponentAction implements ComponentActionInterface<LoadMo
     }
 
     accept(trajectory: LoadMolstarReturnType, context: { entryId:string; entityId:string; } | { entryId:string; instanceId:string; }): void {
-        const components = trajectory.representation?.components;
-        if(!components)
-            return;
-        if(!components["polymer"]) {
-            this.stateManager.next<
-                "missing-component",
-                { tag: "aligned" | "polymer" | "non-polymer"; pdb: {entryId:string;entityId:string;}|{entryId:string;instanceId:string;}; }
-            >({
-                type: "missing-component",
-                view: "3d-view",
-                data: {
-                    tag: "polymer",
-                    pdb: context
-                }
-            });
-        }
-        for(const expression of createSelectionExpressions(context.entryId)) {
-            if(components[expression.tag] && expression.tag != "polymer" && expression.tag != "water")
-                return;
-        }
-        this.stateManager.next<
-            "missing-component",
-            { tag: "aligned" | "polymer" | "non-polymer"; pdb: {entryId:string;entityId:string;}|{entryId:string;instanceId:string;}; }
-        >({
-            type:"missing-component",
-            view: "3d-view",
-            data: {
-                tag:"non-polymer",
-                pdb: context
-            }
-        });
+
     }
 
 }