MsaPfvManagerFactory && MsaRowTitleCheckboxState disabled if Mol* component is not generated && MsaRowTitleComponent is blocked while structure is loaded

CHANGELOG.md

@@ -2,6 +2,15 @@
 
 [Semantic Versioning](https://semver.org/)
 
+## [2.3.5] - 2022-12-05
+### Improvement
+- `MsaPfvManagerFactory` generalizes and replaces `SequenceIdentityPfvManager` and `UniprotPfvManager`
+- `MsaRowTitleCheckboxState` is disabled if Mol* component is not generated
+- `MsaRowTitleComponent` is blocked while structure is loaded
+
+### Dependency update
+- rcsb-saguaro-app v4.5.7
+
 ## [2.3.4] - 2022-11-28
 ### Dependency update
 - rcsb-saguaro-app v4.5.6

package-lock.json

@@ -12,7 +12,7 @@
         "@rcsb/rcsb-api-tools": "^4.1.1",
         "@rcsb/rcsb-molstar": "^2.5.5",
         "@rcsb/rcsb-saguaro": "^2.5.5",
-        "@rcsb/rcsb-saguaro-app": "^4.5.6",
+        "@rcsb/rcsb-saguaro-app": "^4.5.7",
         "http-server": "^14.1.1",
         "molstar": "^3.13.0"
       },
@@ -2529,9 +2529,9 @@
       }
     },
     "node_modules/@rcsb/rcsb-saguaro-app": {
-      "version": "4.5.6",
-      "resolved": "https://registry.npmjs.org/@rcsb/rcsb-saguaro-app/-/rcsb-saguaro-app-4.5.6.tgz",
-      "integrity": "sha512-zKUDVDvyJGbweEHzOF+VwfqGiGsaYKLoi60OlNNfeEhcg7yxyxCH9Yz2gg1/oF6MO29L3CtvmzMWgt49e1OmWg==",
+      "version": "4.5.7",
+      "resolved": "https://registry.npmjs.org/@rcsb/rcsb-saguaro-app/-/rcsb-saguaro-app-4.5.7.tgz",
+      "integrity": "sha512-TygmolNOZQffHZYJc72eAl9UfHTuk/Oc2iCnzAeW1HVfRN/a5osrfSii1HdUpMRjpcsPQ4oyhwSg/G4yOK2xXw==",
       "dependencies": {
         "@rcsb/rcsb-api-tools": "^4.1.1",
         "@rcsb/rcsb-saguaro": "^2.5.5",
@@ -14344,9 +14344,9 @@
       }
     },
     "@rcsb/rcsb-saguaro-app": {
-      "version": "4.5.6",
-      "resolved": "https://registry.npmjs.org/@rcsb/rcsb-saguaro-app/-/rcsb-saguaro-app-4.5.6.tgz",
-      "integrity": "sha512-zKUDVDvyJGbweEHzOF+VwfqGiGsaYKLoi60OlNNfeEhcg7yxyxCH9Yz2gg1/oF6MO29L3CtvmzMWgt49e1OmWg==",
+      "version": "4.5.7",
+      "resolved": "https://registry.npmjs.org/@rcsb/rcsb-saguaro-app/-/rcsb-saguaro-app-4.5.7.tgz",
+      "integrity": "sha512-TygmolNOZQffHZYJc72eAl9UfHTuk/Oc2iCnzAeW1HVfRN/a5osrfSii1HdUpMRjpcsPQ4oyhwSg/G4yOK2xXw==",
       "requires": {
         "@rcsb/rcsb-api-tools": "^4.1.1",
         "@rcsb/rcsb-saguaro": "^2.5.5",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rcsb/rcsb-saguaro-3d",
-  "version": "2.3.4",
+  "version": "2.3.5",
   "description": "RCSB Molstar/Saguaro Web App",
   "main": "build/dist/app.js",
   "files": [
@@ -84,7 +84,7 @@
     "@rcsb/rcsb-api-tools": "^4.1.1",
     "@rcsb/rcsb-molstar": "^2.5.5",
     "@rcsb/rcsb-saguaro": "^2.5.5",
-    "@rcsb/rcsb-saguaro-app": "^4.5.6",
+    "@rcsb/rcsb-saguaro-app": "^4.5.7",
     "http-server": "^14.1.1",
     "molstar": "^3.13.0"
   },

src/RcsbFv3D/RcsbFv3DSequenceIdentity.tsx

@@ -18,9 +18,6 @@ import {RcsbFvStructure} from "../RcsbFvStructure/RcsbFvStructure";
 import {RcsbFv3DCssConfig} from "./RcsbFv3DComponent";
 import {MolstarAlignmentLoader} from "../RcsbFvStructure/StructureUtils/MolstarAlignmentLoader";
 import {MsaBehaviourObserver} from "../RcsbFvStructure/StructureViewerBehaviour/MsaBehaviour";
-import {
-    SequenceIdentityPfvManagerFactory
-} from "../RcsbFvSequence/SequenceViews/RcsbView/PfvManagerFactoryImplementation/SequenceIdentityPfvManagerFactory";
 import {
     PolymerEntityInstanceInterface
 } from "@rcsb/rcsb-saguaro-app/build/dist/RcsbCollectTools/DataCollectors/PolymerEntityInstancesCollector";
@@ -28,6 +25,10 @@ import {SearchQuery} from "@rcsb/rcsb-api-tools/build/RcsbSearch/Types/SearchQue
 import {HelpLinkComponent} from "../RcsbFvSequence/SequenceViews/RcsbView/Components/HelpLinkComponent";
 import {AlignmentResponse} from "@rcsb/rcsb-api-tools/build/RcsbGraphQL/Types/Borrego/GqlTypes";
 import {DataContainer} from "../Utils/DataContainer";
+import {
+    MsaPfvManagerFactory, MsaPfvManagerInterface
+} from "../RcsbFvSequence/SequenceViews/RcsbView/PfvManagerFactoryImplementation/MsaPfvManagerFactory";
+import {buildSequenceIdentityAlignmentFv} from "@rcsb/rcsb-saguaro-app";
 
 export interface RcsbFv3DSequenceIdentityInterface  {
     elementId?: string;
@@ -42,7 +43,12 @@ export interface RcsbFv3DSequenceIdentityInterface  {
     cssConfig?: RcsbFv3DCssConfig;
 }
 
-export class RcsbFv3DSequenceIdentity extends RcsbFv3DAbstract<{groupId:string; query?: SearchQuery;alignmentResponseContainer: DataContainer<AlignmentResponse>;},LoadMolstarInterface|undefined,{viewerElement:string|HTMLElement,viewerProps:Partial<ViewerProps>},{context:any,module:RcsbFvModulePublicInterface}> {
+export class RcsbFv3DSequenceIdentity extends RcsbFv3DAbstract<
+        MsaPfvManagerInterface,
+        LoadMolstarInterface|undefined,
+        {viewerElement:string|HTMLElement; viewerProps:Partial<ViewerProps>;},
+        {context:{id:string}; module:RcsbFvModulePublicInterface;}
+    > {
     constructor(params:RcsbFv3DSequenceIdentityInterface){
         const elementId: string = params.elementId ?? uniqid("RcsbFv3D_");
         const alignmentResponseContainer:DataContainer<AlignmentResponse> = new DataContainer<AlignmentResponse>();
@@ -56,13 +62,14 @@ export class RcsbFv3DSequenceIdentity extends RcsbFv3DAbstract<{groupId:string;
                     rcsbId: params.config.groupId,
                     additionalConfig: params.additionalConfig,
                     pfvParams:{
-                        groupId:params.config.groupId,
-                        query:params.config.query,
+                        id: params.config.groupId,
+                        query: params.config.query,
+                        buildMsaAlignmentFv: buildSequenceIdentityAlignmentFv,
                         alignmentResponseContainer
                     },
                     buildPfvOnMount: true,
-                    pfvManagerFactory: new SequenceIdentityPfvManagerFactory<LoadMolstarInterface>(),
-                    callbackManagerFactory: new MsaCallbackManagerFactory<LoadMolstarInterface, {context:{groupId:string} & Partial<PolymerEntityInstanceInterface>}>({
+                    pfvManagerFactory: new MsaPfvManagerFactory<LoadMolstarInterface>(),
+                    callbackManagerFactory: new MsaCallbackManagerFactory<LoadMolstarInterface, {context:{id:string} & Partial<PolymerEntityInstanceInterface>}>({
                         pluginLoadParamsDefinition,
                         alignmentResponseContainer
                     }),

src/RcsbFv3D/RcsbFv3DUniprot.tsx

@@ -14,9 +14,6 @@ import {
 } from "@rcsb/rcsb-saguaro-app/build/dist/RcsbFvWeb/RcsbFvBuilder/RcsbFvUniprotBuilder";
 import {StructureViewer} from "../RcsbFvStructure/StructureViewers/StructureViewer";
 import {MolstarManagerFactory} from "../RcsbFvStructure/StructureViewers/MolstarViewer/MolstarManagerFactory";
-import {
-    UniprotPfvManagerFactory
-} from "../RcsbFvSequence/SequenceViews/RcsbView/PfvManagerFactoryImplementation/UniprotPfvManagerFactory";
 import {
     MsaCallbackManagerFactory
 } from "../RcsbFvSequence/SequenceViews/RcsbView/CallbackManagerFactoryImplementation/MsaCallbackManager";
@@ -28,6 +25,11 @@ import {SearchQuery} from "@rcsb/rcsb-api-tools/build/RcsbSearch/Types/SearchQue
 import {HelpLinkComponent} from "../RcsbFvSequence/SequenceViews/RcsbView/Components/HelpLinkComponent";
 import {DataContainer} from "../Utils/DataContainer";
 import {AlignmentResponse} from "@rcsb/rcsb-api-tools/build/RcsbGraphQL/Types/Borrego/GqlTypes";
+import {
+    MsaPfvManagerFactory,
+    MsaPfvManagerInterface
+} from "../RcsbFvSequence/SequenceViews/RcsbView/PfvManagerFactoryImplementation/MsaPfvManagerFactory";
+import {buildUniprotAlignmentFv} from "@rcsb/rcsb-saguaro-app";
 
 export interface RcsbFv3DUniprotInterface  {
     elementId?: string;
@@ -42,9 +44,15 @@ export interface RcsbFv3DUniprotInterface  {
     cssConfig?: RcsbFv3DCssConfig;
 }
 
-export class RcsbFv3DUniprot extends RcsbFv3DAbstract<{upAcc:string; query?: SearchQuery;},LoadMolstarInterface|undefined,{viewerElement:string|HTMLElement,viewerProps:Partial<ViewerProps>},{context:UniprotSequenceOnchangeInterface,module:RcsbFvModulePublicInterface}> {
+export class RcsbFv3DUniprot extends RcsbFv3DAbstract<
+        MsaPfvManagerInterface,
+        LoadMolstarInterface|undefined,
+        {viewerElement:string|HTMLElement,viewerProps:Partial<ViewerProps>},
+        {context:{id:string},module:RcsbFvModulePublicInterface}
+    > {
     constructor(params:RcsbFv3DUniprotInterface){
         const elementId: string = params.elementId ?? uniqid("RcsbFv3D_");
+        const alignmentResponseContainer:DataContainer<AlignmentResponse> = new DataContainer<AlignmentResponse>();
         super({
             elementId,
             sequenceConfig:{
@@ -55,14 +63,16 @@ export class RcsbFv3DUniprot extends RcsbFv3DAbstract<{upAcc:string; query?: Sea
                     rcsbId: params.config.upAcc,
                     additionalConfig: params.additionalConfig,
                     pfvParams:{
-                        upAcc:params.config.upAcc,
-                        query:params.config.query
+                        id:params.config.upAcc,
+                        query:params.config.query,
+                        buildMsaAlignmentFv:buildUniprotAlignmentFv,
+                        alignmentResponseContainer
                     },
                     buildPfvOnMount: true,
-                    pfvManagerFactory: new UniprotPfvManagerFactory<LoadMolstarInterface>(),
-                    callbackManagerFactory: new MsaCallbackManagerFactory<LoadMolstarInterface, {context: UniprotSequenceOnchangeInterface;}>({
+                    pfvManagerFactory: new MsaPfvManagerFactory<LoadMolstarInterface>(),
+                    callbackManagerFactory: new MsaCallbackManagerFactory<LoadMolstarInterface, {context: {id:string};}>({
                         pluginLoadParamsDefinition,
-                        alignmentResponseContainer: new DataContainer<AlignmentResponse>()
+                        alignmentResponseContainer
                     }),
                     additionalContent:(props)=>(<HelpLinkComponent {...props} helpHref={"/docs/grouping-structures/groups-1d-3d-alignment"}/>)
                 }

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

@@ -18,15 +18,17 @@ interface MsaRowTitleCheckboxInterface {
 
 interface MsaRowTitleCheckboxState {
     checked:boolean;
+    disabled:boolean;
 }
 
 //TODO keeps a global state of the (checkboxes <=> mol-star components) This needs further review!!!
-const globalState: {[key:string]: boolean;} = {};
+const globalState: {[key:string]: "active"|"inactive"|"disabled"|undefined;} = {};
 
 export class MsaRowTitleCheckbox extends React.Component <MsaRowTitleCheckboxInterface,MsaRowTitleCheckboxState> {
 
     readonly state: MsaRowTitleCheckboxState = {
-        checked: typeof globalState[ this.entityId()+this.props.tag ] === "boolean" ? globalState[ this.entityId()+this.props.tag ] : this.props.tag == "aligned"
+        checked: globalState[ this.entityId()+this.props.tag ] == "active" ||  this.props.tag == "aligned" ? true : false,
+        disabled: globalState[ this.entityId()+this.props.tag ] == "disabled" ? true : false
     };
 
     private subscription: Subscription;
@@ -50,10 +52,22 @@ export class MsaRowTitleCheckbox extends React.Component <MsaRowTitleCheckboxInt
 
     public componentDidUpdate(prevProps: Readonly<MsaRowTitleCheckboxInterface>, prevState: Readonly<MsaRowTitleCheckboxState>, snapshot?: any) {
         if(prevProps.disabled != this.props.disabled && !this.props.disabled ) {
-           this.setState({checked: typeof globalState[ this.entityId()+this.props.tag ] === "boolean" ? globalState[ this.entityId()+this.props.tag ] : (!this.props.disabled && this.props.tag == "aligned")});
+            switch (globalState[ this.entityId()+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;
+            }
         }else if(prevProps.disabled != this.props.disabled) {
             this.setState({checked: this.props.tag == "aligned"},()=>{
-                globalState[ this.entityId()+this.props.tag ]  = this.state.checked;
+                globalState[ this.entityId()+this.props.tag ]  = this.state.checked ? "active" : "inactive";
             });
         }
     }
@@ -63,12 +77,25 @@ export class MsaRowTitleCheckbox extends React.Component <MsaRowTitleCheckboxInt
     }
 
     private subscribe(): void{
-        this.subscription = this.props.stateManager.subscribe<"representation-change",{label:string;isHidden:boolean;} & {tag:MsaRowTitleCheckboxInterface["tag"];isHidden:boolean;pdb:{entryId:string;entityId:string;};}>((o)=>{
+        this.subscription = this.props.stateManager.subscribe<
+            "representation-change"|"missing-component",
+            {label:string;isHidden:boolean;} & {tag:MsaRowTitleCheckboxInterface["tag"];isHidden:boolean;pdb:{entryId:string;entityId:string;};}
+        >((o)=>{
             if(o.type == "representation-change" && o.view == "3d-view" && o.data)
                 this.structureViewerRepresentationChange(o.data);
+            if(o.type == "missing-component" && o.view == "3d-view" && o.data)
+                this.missingComponent(o.data as any);
         })
     }
 
+    private missingComponent(pdb:{entryId:string;entityId:string;tag:string;}): void{
+       if(this.entityId() == `${pdb.entryId}${TagDelimiter.entity}${pdb.entityId}` && this.props.tag == pdb.tag){
+           globalState[this.entityId()+this.props.tag] = "disabled"
+           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()!;
@@ -87,10 +114,10 @@ export class MsaRowTitleCheckbox extends React.Component <MsaRowTitleCheckboxInt
     }
 
     private click(): void {
-        if(this.props.disabled)
+        if(this.props.disabled || this.state.disabled)
             return;
         this.setState({checked:!this.state.checked},()=>{
-            globalState[this.entityId()+this.props.tag] = this.state.checked;
+            globalState[this.entityId()+this.props.tag] = this.state.checked ? "active" : "inactive";
             this.props.stateManager.next<"representation-change",{tag:MsaRowTitleCheckboxInterface["tag"];isHidden:boolean;pdb:{entryId:string;entityId:string;};}>({
                 view:"1d-view",
                 type: "representation-change",
@@ -115,13 +142,13 @@ export class MsaRowTitleCheckbox extends React.Component <MsaRowTitleCheckboxInt
         return {
             width:7,
             height:7,
-            backgroundColor: this.props.disabled ? color.disabled : color[ this.state.checked ? "checked" : "unchecked"],
+            backgroundColor: this.props.disabled || this.state.disabled ? color.disabled : color[ this.state.checked ? "checked" : "unchecked"],
             border: 1,
             borderStyle: "solid",
-            borderColor: this.props.disabled ? color.disabled :  color.checked,
+            borderColor: this.props.disabled || this.state.disabled ? color.disabled :  color.checked,
             display:"inline-block",
             marginLeft:4,
-            cursor: this.props.disabled ? undefined : "pointer"
+            cursor: this.props.disabled || this.state.disabled ? undefined : "pointer"
         };
     }
 
@@ -130,7 +157,7 @@ export class MsaRowTitleCheckbox extends React.Component <MsaRowTitleCheckboxInt
     };
 
     private title(): string | undefined{
-        if(this.props.disabled)
+        if(this.props.disabled || this.state.disabled )
             return undefined;
         switch (this.props.tag){
             case "aligned":

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

@@ -15,6 +15,7 @@ import {Subscription} from "rxjs";
 import {TagDelimiter} from "@rcsb/rcsb-saguaro-app";
 import {MsaRowTitleCheckbox} from "./MsaRowTitleCheckbox";
 import {MouseEvent} from "react";
+import {Property} from "csstype";
 
 interface MsaRowTitleInterface extends RcsbFvRowTitleInterface {
     alignmentContext: AlignmentRequestContextType;
@@ -27,19 +28,21 @@ interface MsaRowTitleState {
     expandTitle: boolean;
     disabled: boolean;
     titleColor: string;
+    blocked:boolean;
 }
 
 export class MsaRowTitleComponent extends React.Component <MsaRowTitleInterface, MsaRowTitleState> {
 
     private readonly configData : RcsbFvRowConfigInterface;
     private subscription: Subscription;
-    private readonly HOVER_COLOR: string = "#ccc";
+    private readonly INACTIVE_COLOR: string = "#ccc";
     private readonly ACTIVE_COLOR: string ="rgb(51, 122, 183)";
 
     readonly state = {
         expandTitle: false,
         disabled: true,
-        titleColor: this.HOVER_COLOR
+        titleColor: this.INACTIVE_COLOR,
+        blocked:false
     };
 
     constructor(props: MsaRowTitleInterface) {
@@ -59,7 +62,7 @@ export class MsaRowTitleComponent extends React.Component <MsaRowTitleInterface,
                            WebkitUserSelect:"none",
                            msUserSelect:"none",
                            color: this.state.titleColor,
-                           cursor: "pointer",
+                           cursor: this.state.blocked ? "wait" : "pointer",
                            maxWidth:100,
                            overflow: "hidden",
                            textOverflow: "ellipsis",
@@ -71,7 +74,7 @@ export class MsaRowTitleComponent extends React.Component <MsaRowTitleInterface,
                        {this.props.targetAlignment.target_id}
                    </div>
                </div>
-               <div  style={{cursor: this.state.disabled ? "pointer" : undefined}} onClick={(e: MouseEvent)=>this.altClick(e)} >
+               <div  style={{cursor: this.cursor()}} onClick={(e: MouseEvent)=>this.altClick(e)} >
                    <MsaRowTitleCheckbox disabled={this.state.disabled} {...TagDelimiter.parseEntity(this.props.targetAlignment.target_id!)} tag={"aligned"} stateManager={this.props.stateManager}/>
                    <MsaRowTitleCheckbox disabled={this.state.disabled} {...TagDelimiter.parseEntity(this.props.targetAlignment.target_id!)} tag={"polymer"} stateManager={this.props.stateManager}/>
                    <MsaRowTitleCheckbox disabled={this.state.disabled} {...TagDelimiter.parseEntity(this.props.targetAlignment.target_id!)} tag={"non-polymer"} stateManager={this.props.stateManager}/>
@@ -91,17 +94,27 @@ export class MsaRowTitleComponent extends React.Component <MsaRowTitleInterface,
 
     private subscribe(): void{
         this.subscription = this.props.stateManager.subscribe<"representation-change",{label:string;isHidden:boolean;}>((o)=>{
+            if(o.type == "model-change" && o.view == "1d-view")
+                this.block();
             if(o.type == "model-change" && o.view == "3d-view")
                 this.modelChange();
         })
     }
 
+    private block(): void {
+        this.setState({blocked:true});
+    }
+
     private modelChange(): void {
         if(this.props.targetAlignment.target_id && this.props.stateManager.assemblyModelSate.getMap()?.has(this.props.targetAlignment.target_id)){
             if(this.state.disabled)
-                this.setState({disabled:false, titleColor:this.ACTIVE_COLOR});
+                this.setState({disabled:false, titleColor:this.ACTIVE_COLOR, blocked:false});
+            else
+                this.setState({blocked:false});
         }else if(!this.state.disabled){
-            this.setState({disabled:true, titleColor:this.HOVER_COLOR});
+            this.setState({disabled:true, titleColor:this.INACTIVE_COLOR, blocked:false});
+        }else if(this.state.blocked){
+            this.setState({blocked:false});
         }
     }
 
@@ -109,7 +122,7 @@ export class MsaRowTitleComponent extends React.Component <MsaRowTitleInterface,
         if(this.state.disabled && flag)
             this.setState({titleColor:this.ACTIVE_COLOR});
         else if(this.state.disabled && !flag)
-            this.setState({titleColor:this.HOVER_COLOR});
+            this.setState({titleColor:this.INACTIVE_COLOR});
     }
 
     private click(e: MouseEvent): void{
@@ -121,10 +134,19 @@ export class MsaRowTitleComponent extends React.Component <MsaRowTitleInterface,
             if(!newWin || newWin.closed || typeof newWin.closed === 'undefined')
                 document.location.href = `/structure/${TagDelimiter.parseEntity(this.props.targetAlignment.target_id!).entryId}#entity-${TagDelimiter.parseEntity(this.props.targetAlignment.target_id!).entityId}`;
         } else {
+            if(this.state.blocked)
+                return;
+            this.setState({blocked:true});
             this.props.titleClick();
         }
     }
 
+    private cursor():Property.Cursor|undefined {
+        if(this.state.blocked)
+            return "wait"
+        return this.state.disabled ? "pointer" : undefined
+    }
+
     private altClick(e: MouseEvent): void{
         if(this.state.disabled)
             this.props.titleClick();

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

@@ -13,10 +13,9 @@ export interface MsaUiSortInterface {
 }
 export class MsaUiSortComponent extends React.Component<MsaUiSortInterface, {}>{
 
-    private readonly TRACK_HEADER_SHIFT: number = 2;
 
     render() {
-        return <div title={"Move selected entities to top"} onClick={()=>this.click()} style={{cursor: "pointer"}}>SORT</div>;
+        return <div title={"PIN selected entities to top"} onClick={()=>this.click()} style={{cursor: "pointer"}}>PIN ACTIVE</div>;
     }
 
     private async click(): Promise<void> {
@@ -26,6 +25,9 @@ export class MsaUiSortComponent extends React.Component<MsaUiSortInterface, {}>{
         if(!targets)
             return;
 
+        const headerShift: number|undefined = this.props.rcsbFvContainer.get()?.getFv().getBoardData().findIndex((d:RcsbFvRowConfigInterface<{},{},{},{targetId:string}>)=>d.metadata?.targetId);
+        if(!headerShift || headerShift<0)
+            return;
         const threshold: number = targets.findIndex(
             target => !this.props.stateManager.assemblyModelSate.getMap().has(target)
         );
@@ -35,8 +37,8 @@ export class MsaUiSortComponent extends React.Component<MsaUiSortInterface, {}>{
         const toMove: number[] = targets.reduce<number[]>((prev,curr, currIndex)=>{ if(this.props.stateManager.assemblyModelSate.getMap().has(curr) && currIndex > threshold) prev.push(currIndex); return prev;},[])
         for(const [n,i] of toMove.map((n,i)=>[n,threshold+i])){
            await this.props.rcsbFvContainer.get()?.getFv()?.moveTrack(
-                n+this.TRACK_HEADER_SHIFT,
-                i+this.TRACK_HEADER_SHIFT
+                n+headerShift,
+                i+headerShift
             )
         }
     }

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

@@ -5,6 +5,7 @@ import {
     PfvManagerFactoryInterface
 } from "../PfvManagerFactoryInterface";
 import {
+    RcsbFvAdditionalConfig,
     RcsbFvModulePublicInterface
 } from "@rcsb/rcsb-saguaro-app/build/dist/RcsbFvWeb/RcsbFvModule/RcsbFvModuleInterface";
 import {TagDelimiter, buildSequenceIdentityAlignmentFv} from "@rcsb/rcsb-saguaro-app";
@@ -21,17 +22,21 @@ import {
 import {SearchQuery} from "@rcsb/rcsb-api-tools/build/RcsbSearch/Types/SearchQueryInterface";
 import {DataContainer} from "../../../../Utils/DataContainer";
 import {MsaUiSortComponent} from "./MsaPfvComponents/MsaUiSortComponent";
+import {ActionMethods} from "@rcsb/rcsb-saguaro-app/build/dist/RcsbFvUI/Helper/ActionMethods";
 
-interface SequenceIdentityPfvManagerInterface<R> extends PfvManagerFactoryConfigInterface<R,{context: {groupId:string};}> {
-    groupId:string;
+export interface MsaPfvManagerInterface {
+    id:string;
     alignmentResponseContainer: DataContainer<AlignmentResponse>;
+    buildMsaAlignmentFv(elementId: string, upAcc: string, query?: SearchQuery, additionalConfig?: RcsbFvAdditionalConfig & ActionMethods.FvChangeConfigInterface): Promise<RcsbFvModulePublicInterface>;
     query?: SearchQuery;
 }
 
-export class SequenceIdentityPfvManagerFactory<R> implements PfvManagerFactoryInterface<{groupId:string},R,{context: {groupId:string};}> {
+type MsaPfvManagerInterType<R> = MsaPfvManagerInterface & PfvManagerFactoryConfigInterface<R,{context: {id:string};}>
 
-    getPfvManager(config: SequenceIdentityPfvManagerInterface<R>): PfvManagerInterface {
-        return new SequenceIdentityPfvManager(config);
+export class MsaPfvManagerFactory<R> implements PfvManagerFactoryInterface<{id:string},R,{context: {id:string};}> {
+
+    getPfvManager(config: MsaPfvManagerInterType<R>): PfvManagerInterface {
+        return new MsaPfvManager(config);
     }
 
 }
@@ -44,19 +49,20 @@ type AlignmentDataType = {
     targetAlignment: TargetAlignment;
 };
 
-class SequenceIdentityPfvManager<R> extends AbstractPfvManager<{groupId:string},R,{context: {groupId:string} &  Partial<PolymerEntityInstanceInterface>;}>{
+class MsaPfvManager<R> extends AbstractPfvManager<{id:string},R,{context: {id:string} &  Partial<PolymerEntityInstanceInterface>;}>{
 
-    private readonly config:SequenceIdentityPfvManagerInterface<R>;
+    private readonly config:MsaPfvManagerInterType<R>;
+    private module:RcsbFvModulePublicInterface;
 
-    constructor(config:SequenceIdentityPfvManagerInterface<R>) {
+    constructor(config:MsaPfvManagerInterType<R>) {
         super(config);
         this.config = config;
     }
 
     async create(): Promise<RcsbFvModulePublicInterface | undefined> {
-        const module:RcsbFvModulePublicInterface = await buildSequenceIdentityAlignmentFv(
+        const module:RcsbFvModulePublicInterface = await this.config.buildMsaAlignmentFv(
             this.rcsbFvDivId,
-            this.config.groupId,
+            this.config.id,
             this.config.query,
             {
                 ... this.additionalConfig,
@@ -102,7 +108,7 @@ class SequenceIdentityPfvManager<R> extends AbstractPfvManager<{groupId:string},
                     })
                 },
                 beforeChangeCallback: (module) => {
-                    this.config.pfvChangeCallback({context:{groupId:this.config.groupId}});
+                    this.config.pfvChangeCallback({context:{id:this.config.id}});
                 },
                 externalUiComponents:[{
                     component:MsaUiSortComponent,
@@ -121,7 +127,7 @@ class SequenceIdentityPfvManager<R> extends AbstractPfvManager<{groupId:string},
     private async readyStateLoad(): Promise<void> {
         const alignments: AlignmentResponse = await this.rcsbFvContainer.get()!.getAlignmentResponse();
         if(alignments.target_alignment && alignments.target_alignment.length > 0 && typeof alignments.target_alignment[0]?.target_id === "string"){
-            this.loadAlignment({queryId:this.config.groupId}, alignments.target_alignment[0]);
+            this.loadAlignment({queryId:this.config.id}, alignments.target_alignment[0]);
         }
     }
 

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

@@ -1,115 +0,0 @@
-import {
-    AbstractPfvManager,
-    PfvManagerFactoryConfigInterface,
-    PfvManagerInterface,
-    PfvManagerFactoryInterface
-} from "../PfvManagerFactoryInterface";
-import {
-    RcsbFvModulePublicInterface
-} from "@rcsb/rcsb-saguaro-app/build/dist/RcsbFvWeb/RcsbFvModule/RcsbFvModuleInterface";
-import {buildUniprotAlignmentFv, TagDelimiter} from "@rcsb/rcsb-saguaro-app";
-import {
-    UniprotSequenceOnchangeInterface
-} from "@rcsb/rcsb-saguaro-app/build/dist/RcsbFvWeb/RcsbFvBuilder/RcsbFvUniprotBuilder";
-import {
-    AlignmentRequestContextType
-} from "@rcsb/rcsb-saguaro-app/build/dist/RcsbFvWeb/RcsbFvFactories/RcsbFvTrackFactory/TrackFactoryImpl/AlignmentTrackFactory";
-import {AlignmentResponse, TargetAlignment} from "@rcsb/rcsb-api-tools/build/RcsbGraphQL/Types/Borrego/GqlTypes";
-import {MsaRowTitleComponent} from "./MsaPfvComponents/MsaRowTitleComponent";
-import {MsaRowMarkComponent} from "./MsaPfvComponents/MsaRowMarkComponent";
-import {SearchQuery} from "@rcsb/rcsb-api-tools/build/RcsbSearch/Types/SearchQueryInterface";
-
-interface UniprotPfvManagerInterface<R> extends PfvManagerFactoryConfigInterface<R,{context: UniprotSequenceOnchangeInterface;}> {
-    upAcc:string;
-    query?: SearchQuery
-}
-
-export class UniprotPfvManagerFactory<R> implements PfvManagerFactoryInterface<{upAcc:string},R,{context: UniprotSequenceOnchangeInterface;}> {
-
-    getPfvManager(config: UniprotPfvManagerInterface<R>): PfvManagerInterface {
-        return new UniprotPfvManager(config);
-    }
-
-}
-
-type AlignmentDataType = {
-    pdb:{
-        entryId:string;
-        entityId:string;
-    },
-    targetAlignment: TargetAlignment;
-};
-class UniprotPfvManager<R> extends AbstractPfvManager<{upAcc:string},R,{context: UniprotSequenceOnchangeInterface;}>{
-
-    private readonly upAcc:string;
-    private readonly config:UniprotPfvManagerInterface<R>;
-
-    private module:RcsbFvModulePublicInterface;
-
-    constructor(config:UniprotPfvManagerInterface<R>) {
-        super(config);
-        this.config = config;
-        this.upAcc = config.upAcc;
-    }
-
-    async create(): Promise<RcsbFvModulePublicInterface | undefined> {
-        this.module = await buildUniprotAlignmentFv(
-            this.rcsbFvDivId,
-            this.upAcc,
-            this.config.query,
-            {
-                ... this.additionalConfig,
-                boardConfig: this.boardConfigContainer.get(),
-                trackConfigModifier: {
-                    alignment: (alignmentContext: AlignmentRequestContextType, targetAlignment: TargetAlignment) => new Promise((resolve)=>{
-                        resolve({
-                            rowMark:{
-                                externalRowMark: {
-                                    component:MsaRowMarkComponent,
-                                    props:{
-                                        rowRef:TagDelimiter.parseEntity(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)
-                                }
-                            }
-                        });
-                    })
-                }
-            }
-        );
-        this.rcsbFvContainer.set(this.module);
-        await this.readyStateLoad();
-        return this.module;
-    }
-
-    private async readyStateLoad(): Promise<void> {
-        const alignments: AlignmentResponse = await this.module.getAlignmentResponse();
-        if(alignments.target_alignment && alignments.target_alignment.length > 0 && typeof alignments.target_alignment[0]?.target_id === "string"){
-            this.loadAlignment({queryId:this.upAcc}, alignments.target_alignment[0]);
-        }
-    }
-
-    private loadAlignment(alignmentContext: AlignmentRequestContextType, targetAlignment: TargetAlignment):void {
-        if(typeof targetAlignment.target_id === "string") {
-            this.stateManager.next<"model-change",AlignmentDataType>({
-                type:"model-change",
-                view:"1d-view",
-                data:{
-                    pdb:TagDelimiter.parseEntity(targetAlignment.target_id),
-                    targetAlignment
-                }
-            });
-        }
-    }
-
-}

src/RcsbFvStructure/StructureUtils/MolstarAlignmentLoader.ts

@@ -5,30 +5,29 @@
 
 import {StructureLoaderInterface} from "./StructureLoaderInterface";
 import {ViewerActionManagerInterface, ViewerCallbackManagerInterface} from "../StructureViewerInterface";
-import {StructureRef} from "molstar/lib/mol-plugin-state/manager/structure/hierarchy-state";
-import {Loci} from "molstar/lib/mol-model/loci";
-import {alignAndSuperpose} from "molstar/lib/mol-model/structure/structure/util/superposition";
-import {Structure, StructureElement, Unit} from "molstar/lib/mol-model/structure";
-import {PluginContext} from "molstar/lib/mol-plugin/context";
-import {StateObjectRef} from "molstar/lib/mol-state";
-import {Mat4} from "molstar/lib/mol-math/linear-algebra";
-import {SymmetryOperator} from "molstar/lib/mol-math/geometry/symmetry-operator";
-import {PluginStateObject} from "molstar/lib/mol-plugin-state/objects";
-import {StateTransforms} from "molstar/lib/mol-plugin-state/transforms";
-import {PluginCommands} from "molstar/lib/mol-plugin/commands";
 import {LoadMethod, LoadMolstarInterface} from "../StructureViewers/MolstarViewer/MolstarActionManager";
 import {TagDelimiter} from "@rcsb/rcsb-saguaro-app";
-import {TrajectoryHierarchyPresetProvider} from "molstar/lib/mol-plugin-state/builder/structure/hierarchy-preset";
 import {
     AlignmentTrajectoryPresetProvider, TrajectoryParamsType
 } from "../StructureViewers/MolstarViewer/TrajectoryPresetProvider/AlignmentTrajectoryPresetProvider";
 import {TargetAlignment} from "@rcsb/rcsb-api-tools/build/RcsbGraphQL/Types/Borrego/GqlTypes";
+import {RcsbFvStateInterface} from "../../RcsbFvState/RcsbFvStateInterface";
 
-export class MolstarAlignmentLoader implements StructureLoaderInterface<[ViewerCallbackManagerInterface & ViewerActionManagerInterface <LoadMolstarInterface<TrajectoryParamsType>>,{entryId:string;entityId:string;},TargetAlignment]> {
+export class MolstarAlignmentLoader implements StructureLoaderInterface<[
+        ViewerCallbackManagerInterface & ViewerActionManagerInterface <LoadMolstarInterface<TrajectoryParamsType>>,
+        {entryId:string;entityId:string;},
+        TargetAlignment,
+        RcsbFvStateInterface
+    ]> {
 
     private readonly structureMap: Set<string> = new Set<string>();
 
-    async load(structureViewer: ViewerCallbackManagerInterface & ViewerActionManagerInterface <LoadMolstarInterface<TrajectoryParamsType>>, pdb:{entryId:string;entityId:string;}, targetAlignment: TargetAlignment): Promise<void> {
+    async load(
+        structureViewer: ViewerCallbackManagerInterface & ViewerActionManagerInterface <LoadMolstarInterface<TrajectoryParamsType>>,
+        pdb:{entryId:string;entityId:string;},
+        targetAlignment: TargetAlignment,
+        stateManager: RcsbFvStateInterface
+    ): Promise<void> {
         const structureId: string = `${pdb.entryId}${TagDelimiter.entity}${pdb.entityId}`;
         if(!this.structureMap.has(structureId)){
             await structureViewer.load({
@@ -41,7 +40,8 @@ export class MolstarAlignmentLoader implements StructureLoaderInterface<[ViewerC
                         assemblyId: "1",
                         modelIndex: 0,
                         pdb,
-                        targetAlignment
+                        targetAlignment,
+                        stateManager
                     }
                 }
             });

src/RcsbFvStructure/StructureViewerBehaviour/MsaBehaviour.ts

@@ -24,12 +24,19 @@ import {TargetAlignment} from "@rcsb/rcsb-api-tools/build/RcsbGraphQL/Types/Borr
 import {FunctionCall} from "../../Utils/FunctionCall";
 import onetimeCall = FunctionCall.onetimeCall;
 
+type MsaBehaviourType<R> = StructureLoaderInterface<[
+        ViewerCallbackManagerInterface & ViewerActionManagerInterface<R>,
+    {entryId:string;entityId:string;},
+    TargetAlignment,
+    RcsbFvStateInterface
+]>;
+
 export class MsaBehaviourObserver<R> implements StructureViewerBehaviourObserverInterface<R> {
 
     private structureBehaviour: StructureViewerBehaviourInterface;
-    private readonly structureLoader: StructureLoaderInterface<[ViewerCallbackManagerInterface & ViewerActionManagerInterface <R>,{entryId:string;entityId:string;},TargetAlignment]>;
+    private readonly structureLoader: MsaBehaviourType<R>;
 
-    constructor(structureLoader: StructureLoaderInterface<[ViewerCallbackManagerInterface & ViewerActionManagerInterface <R>,{entryId:string;entityId:string;},TargetAlignment]>) {
+    constructor(structureLoader: MsaBehaviourType<R>) {
         this.structureLoader = structureLoader
     }
     public observe(
@@ -58,7 +65,7 @@ class MsaBehaviour<R> implements StructureViewerBehaviourInterface {
     private readonly structureViewer: ViewerCallbackManagerInterface & ViewerActionManagerInterface<R>;
     private readonly stateManager: RcsbFvStateInterface;
     private readonly subscription: Subscription;
-    private readonly structureLoader: StructureLoaderInterface<[ViewerCallbackManagerInterface & ViewerActionManagerInterface <R>,{entryId:string;entityId:string;},TargetAlignment]>;
+    private readonly structureLoader: MsaBehaviourType<R>;
     private readonly componentList: string[] = [];
 
     private readonly CREATE_COMPONENT_THR: number = 5;
@@ -66,7 +73,7 @@ class MsaBehaviour<R> implements StructureViewerBehaviourInterface {
     constructor(
         structureViewer: ViewerCallbackManagerInterface & ViewerActionManagerInterface<R>,
         stateManager: RcsbFvStateInterface,
-        structureLoader: StructureLoaderInterface<[ViewerCallbackManagerInterface & ViewerActionManagerInterface <R>,{entryId:string;entityId:string;},TargetAlignment]>
+        structureLoader: MsaBehaviourType<R>
     ) {
         this.structureViewer = structureViewer;
         this.stateManager = stateManager;
@@ -178,7 +185,7 @@ class MsaBehaviour<R> implements StructureViewerBehaviourInterface {
 
     async modelChange(data?:AlignmentDataType): Promise<void> {
         if(data)
-            await this.structureLoader.load(this.structureViewer, data.pdb, data.targetAlignment);
+            await this.structureLoader.load(this.structureViewer, data.pdb, data.targetAlignment, this.stateManager);
     }
 
     private select(mode:"select"|"hover"): void{

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

@@ -39,10 +39,19 @@ import {
 } from "molstar/lib/extensions/model-archive/quality-assessment/prop";
 import {MmcifFormat} from "molstar/lib/mol-model-formats/structure/mmcif";
 import {CustomProperty} from "molstar/lib/mol-model-props/common/custom-property";
+import {RcsbFvStateInterface} from "../../../../RcsbFvState/RcsbFvStateInterface";
+
+type RepresentationParamsType = {
+    pdb?:{entryId:string;entityId:string;};
+    targetAlignment?:TargetAlignment;
+    stateManagerContainer?:{
+        data:RcsbFvStateInterface;
+    };
+}
 
 let refData: Structure|undefined = undefined;
 let refParams: StructureAlignmentParamsType|undefined = undefined;
-export const AlignmentRepresentationPresetProvider = StructureRepresentationPresetProvider<{pdb?:{entryId:string;entityId:string;};targetAlignment?:TargetAlignment;},any>({
+export const AlignmentRepresentationPresetProvider = StructureRepresentationPresetProvider<RepresentationParamsType,any>({
         id: 'alignment-to-reference',
         display: {
             name: 'Alignemnt to Reference'
@@ -50,9 +59,10 @@ export const AlignmentRepresentationPresetProvider = StructureRepresentationPres
         isApplicable: (structureRef: PluginStateObject.Molecule.Structure, plugin: PluginContext): boolean => true,
         params: (structureRef: PluginStateObject.Molecule.Structure | undefined, plugin: PluginContext) => ({
             pdb: PD.Value<{entryId:string;entityId:string;}|undefined>(undefined),
-            targetAlignment: PD.Value<TargetAlignment|undefined>(undefined)
+            targetAlignment: PD.Value<TargetAlignment|undefined>(undefined),
+            stateManagerContainer: PD.Value<{data:RcsbFvStateInterface}|undefined>(undefined)
         }),
-        apply: async (structureRef: StateObjectRef<PluginStateObject.Molecule.Structure>, params: {pdb?:{entryId:string;entityId:string;};targetAlignment?: TargetAlignment;}, plugin: PluginContext) => {
+        apply: async (structureRef: StateObjectRef<PluginStateObject.Molecule.Structure>, params: RepresentationParamsType, plugin: PluginContext) => {
             const structureCell = StateObjectRef.resolveAndCheck(plugin.state.data, structureRef);
             if(!structureCell) return;
             const structure = structureCell.obj!.data;
@@ -161,6 +171,11 @@ export const AlignmentRepresentationPresetProvider = StructureRepresentationPres
                 }
             });
             await update.commit({ revertOnError: false });
+            if(!comp && params.stateManagerContainer?.data){
+                params.stateManagerContainer.data.next<"missing-component", {tag:"aligned"|"polymer"|"non-polymer";entryId:string;entityId:string;}>({type:"missing-component", view: "3d-view", data:{tag:"polymer", entryId, entityId}})
+            }
+
+            let anyLigComp;
             for(const expression of createSelectionExpressions(entryId)){
                 if(expression.tag == "polymer")
                     continue;
@@ -185,6 +200,10 @@ export const AlignmentRepresentationPresetProvider = StructureRepresentationPres
                     }
                 });
                 await update.commit({ revertOnError: false });
+                if(comp && expression.tag != "water") anyLigComp = comp;
+            }
+            if(!anyLigComp && params.stateManagerContainer?.data){
+                params.stateManagerContainer.data.next<"missing-component", {tag:"polymer"|"non-polymer";entryId:string;entityId:string;}>({type:"missing-component", view: "3d-view", data:{tag:"non-polymer", entryId, entityId}})
             }
             for (const c of plugin.managers.structure.hierarchy.currentComponentGroups){
                 for (const comp of c) {

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

@@ -17,10 +17,12 @@ import {
 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 {RcsbFvStateInterface} from "../../../../RcsbFvState/RcsbFvStateInterface";
 
 export type TrajectoryParamsType = {
     pdb?: {entryId:string;entityId:string;};
     targetAlignment?: TargetAlignment;
+    stateManager?:RcsbFvStateInterface;
     assemblyId?: string;
     modelIndex?: number;
     plddt?: 'off' | 'single-chain' | 'on';
@@ -37,6 +39,7 @@ export const AlignmentTrajectoryPresetProvider = TrajectoryHierarchyPresetProvid
     params: (trajectory: PluginStateObject.Molecule.Trajectory | undefined, plugin: PluginContext):ParamDefinition.For<TrajectoryParamsType> => ({
         pdb:PD.Value<{entryId:string;entityId:string;}|undefined>(undefined),
         targetAlignment: PD.Value<TargetAlignment|undefined>(undefined),
+        stateManager: PD.Value<RcsbFvStateInterface|undefined>(undefined),
         assemblyId:PD.Value<string|undefined>(undefined),
         modelIndex:PD.Value<number|undefined>(undefined),
         plddt:PD.Value<'off' | 'single-chain' | 'on' | undefined>(undefined)
@@ -64,7 +67,8 @@ export const AlignmentTrajectoryPresetProvider = TrajectoryHierarchyPresetProvid
             AlignmentRepresentationPresetProvider,
             {
                 pdb:params.pdb,
-                targetAlignment:params.targetAlignment
+                targetAlignment:params.targetAlignment,
+                stateManagerContainer: params.stateManager ? {data:params.stateManager} : undefined
             }
         );
 

src/RcsbFvStructure/StructureViewers/StructureViewer.ts

@@ -9,9 +9,6 @@ import {
 } from "../StructureViewerInterface";
 
 import {PluginContext} from "molstar/lib/mol-plugin/context";
-import {
-    RcsbFvSelectorManager
-} from "../../RcsbFvState/RcsbFvSelectorManager";
 import {StructureRepresentationRegistry} from "molstar/lib/mol-repr/structure/registry";
 import {ColorTheme} from "molstar/lib/mol-theme/color";
 import {RcsbFvStateManager} from "../../RcsbFvState/RcsbFvStateManager";

src/examples/sequence-identity/index.ts

@@ -3,7 +3,7 @@ import {RcsbFv3DSequenceIdentity} from "../../RcsbFv3D/RcsbFv3DSequenceIdentity"
 
 document.addEventListener("DOMContentLoaded", function(event) {
 
-    const groupId: string = "1_30";
+    const groupId: string = "584_30";
     const panel3d = new RcsbFv3DSequenceIdentity({
         config:{
             groupId,
@@ -12,7 +12,7 @@ document.addEventListener("DOMContentLoaded", function(event) {
         },
         additionalConfig: {
             page: {
-                first: 200,
+                first: 50,
                 after: "0"
             }
         }