MSA groups inform of Polymer/Ligand before loading the structure

CHANGELOG.md

@@ -9,6 +9,10 @@
   - Modules format is `ESNext`
   - `lib/commonjs` exposes all modules in `CommonJS` format
 
+### Improvement
+- MSA groups inform of Polymer/Ligand before loading the structure
+  - Checkboxes are displayed in grey color
+
 ### Code refactoring
 - Sass @import changed to @use
 - Styles sheets `scss` refactoring

package-lock.json

@@ -51,8 +51,8 @@
       "peerDependencies": {
         "@rcsb/rcsb-api-tools": "^4.1.13",
         "@rcsb/rcsb-molstar": "^2.8.0",
-        "@rcsb/rcsb-saguaro": "^3.0.0-development.5",
-        "@rcsb/rcsb-saguaro-app": "^6.0.0-development.7",
+        "@rcsb/rcsb-saguaro": "^3.0.0-development.14",
+        "@rcsb/rcsb-saguaro-app": "^6.0.0-development.18",
         "molstar": "^3.40.1",
         "react": "^18.1.0",
         "react-dom": "^18.1.0"
@@ -3370,9 +3370,9 @@
       }
     },
     "node_modules/@rcsb/rcsb-saguaro": {
-      "version": "3.0.0-development.5",
-      "resolved": "https://registry.npmjs.org/@rcsb/rcsb-saguaro/-/rcsb-saguaro-3.0.0-development.5.tgz",
-      "integrity": "sha512-0oxz5ho3olkyvAZ8ej7ZVkfGTg19SNGpcBjX0lHK8/M69TwBilqI925OBC/13fIDl/Qf5SohOHn96/Ncj7c1BQ==",
+      "version": "3.0.0-development.14",
+      "resolved": "https://registry.npmjs.org/@rcsb/rcsb-saguaro/-/rcsb-saguaro-3.0.0-development.14.tgz",
+      "integrity": "sha512-qcqkM6IpkxMlSucJDD6TrVY3+09wCQ5jL3qiv9n0Re+6uxYMmcjzGcXlFLOL7gVscDpZ/8ZP7dBpAWqzR+m+XA==",
       "peer": true,
       "dependencies": {
         "@d3fc/d3fc-sample": "^5.0.1",
@@ -3390,9 +3390,9 @@
       }
     },
     "node_modules/@rcsb/rcsb-saguaro-app": {
-      "version": "6.0.0-development.7",
-      "resolved": "https://registry.npmjs.org/@rcsb/rcsb-saguaro-app/-/rcsb-saguaro-app-6.0.0-development.7.tgz",
-      "integrity": "sha512-++6dzb8iVOSTh9cqPD/LWDOS9jyGFq+2C8x1IQHfGz2X2ikZNsD7KINaHHJbGVTzybzung0bTY6s+w+X3oS4UA==",
+      "version": "6.0.0-development.18",
+      "resolved": "https://registry.npmjs.org/@rcsb/rcsb-saguaro-app/-/rcsb-saguaro-app-6.0.0-development.18.tgz",
+      "integrity": "sha512-EqnpDjjan5l5u1YjRoLprW1BdbXWjx5/O3yCWAGr6lJ6ViXX2iuFZ+Kf0h6SeXwqY2GUo9+KbVX8suUnJinGIw==",
       "peer": true,
       "dependencies": {
         "@rcsb/rcsb-charts": "^0.2.21",
@@ -3406,7 +3406,7 @@
       },
       "peerDependencies": {
         "@rcsb/rcsb-api-tools": "^4.1.13",
-        "@rcsb/rcsb-saguaro": "^3.0.0-development.5",
+        "@rcsb/rcsb-saguaro": "^3.0.0-development.14",
         "boxicons": "^2.1.0",
         "react": "^18.1.0",
         "react-dom": "^18.1.0"
@@ -18112,9 +18112,9 @@
       }
     },
     "@rcsb/rcsb-saguaro": {
-      "version": "3.0.0-development.5",
-      "resolved": "https://registry.npmjs.org/@rcsb/rcsb-saguaro/-/rcsb-saguaro-3.0.0-development.5.tgz",
-      "integrity": "sha512-0oxz5ho3olkyvAZ8ej7ZVkfGTg19SNGpcBjX0lHK8/M69TwBilqI925OBC/13fIDl/Qf5SohOHn96/Ncj7c1BQ==",
+      "version": "3.0.0-development.14",
+      "resolved": "https://registry.npmjs.org/@rcsb/rcsb-saguaro/-/rcsb-saguaro-3.0.0-development.14.tgz",
+      "integrity": "sha512-qcqkM6IpkxMlSucJDD6TrVY3+09wCQ5jL3qiv9n0Re+6uxYMmcjzGcXlFLOL7gVscDpZ/8ZP7dBpAWqzR+m+XA==",
       "peer": true,
       "requires": {
         "@d3fc/d3fc-sample": "^5.0.1",
@@ -18127,9 +18127,9 @@
       }
     },
     "@rcsb/rcsb-saguaro-app": {
-      "version": "6.0.0-development.7",
-      "resolved": "https://registry.npmjs.org/@rcsb/rcsb-saguaro-app/-/rcsb-saguaro-app-6.0.0-development.7.tgz",
-      "integrity": "sha512-++6dzb8iVOSTh9cqPD/LWDOS9jyGFq+2C8x1IQHfGz2X2ikZNsD7KINaHHJbGVTzybzung0bTY6s+w+X3oS4UA==",
+      "version": "6.0.0-development.18",
+      "resolved": "https://registry.npmjs.org/@rcsb/rcsb-saguaro-app/-/rcsb-saguaro-app-6.0.0-development.18.tgz",
+      "integrity": "sha512-EqnpDjjan5l5u1YjRoLprW1BdbXWjx5/O3yCWAGr6lJ6ViXX2iuFZ+Kf0h6SeXwqY2GUo9+KbVX8suUnJinGIw==",
       "peer": true,
       "requires": {
         "@rcsb/rcsb-charts": "^0.2.21",

package.json

@@ -87,8 +87,8 @@
   "peerDependencies": {
     "@rcsb/rcsb-api-tools": "^4.1.13",
     "@rcsb/rcsb-molstar": "^2.8.0",
-    "@rcsb/rcsb-saguaro": "^3.0.0-development.5",
-    "@rcsb/rcsb-saguaro-app": "^6.0.0-development.7",
+    "@rcsb/rcsb-saguaro": "^3.0.0-development.14",
+    "@rcsb/rcsb-saguaro-app": "^6.0.0-development.18",
     "molstar": "^3.40.1",
     "react": "^18.1.0",
     "react-dom": "^18.1.0"

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

@@ -7,11 +7,12 @@ import * as React from "react";
 import {TagDelimiter} from "@rcsb/rcsb-api-tools/build/RcsbUtils/TagDelimiter";
 import {Subscription} from "rxjs";
 import {RcsbFvStateInterface} from "../../../../../RcsbFvState/RcsbFvStateInterface";
+import {rcsbRequestCtxManager} from "@rcsb/rcsb-saguaro-app/lib/RcsbRequest/RcsbRequestContextManager";
 
 interface MsaRowTitleCheckboxInterface {
     disabled:boolean;
     entryId: string;
-    tag:"aligned"|"polymer"|"non-polymer";
+    tag: "aligned"|"polymer"|"non-polymer";
     stateManager:RcsbFvStateInterface
 }
 
@@ -19,14 +20,14 @@ type MsaRowTitleCheckboxType = MsaRowTitleCheckboxInterface & {entityId:string}
 
 interface MsaRowTitleCheckboxState {
     checked:boolean;
-    disabled:boolean;
+    opacity: 0|1;
 }
 
 export class MsaRowTitleCheckboxComponent extends React.Component <MsaRowTitleCheckboxType,MsaRowTitleCheckboxState> {
 
     readonly state: MsaRowTitleCheckboxState = {
         checked: this.props.tag == "aligned",
-        disabled: false
+        opacity: (this.props.disabled) && this.props.tag != "aligned" ? 0 : 1
     };
 
     private subscription: Subscription;
@@ -44,16 +45,17 @@ export class MsaRowTitleCheckboxComponent extends React.Component <MsaRowTitleCh
             />);
     }
 
-    public componentDidMount() {
+    public async componentDidMount() {
         this.subscribe();
         this.requestInfo();
+        this.setState({opacity: await this.opacity()})
     }
 
     public componentWillUnmount() {
         this.subscription.unsubscribe();
     }
 
-    public componentDidUpdate(prevProps: Readonly<MsaRowTitleCheckboxType>, prevState: Readonly<MsaRowTitleCheckboxState>, snapshot?: any) {
+    public async componentDidUpdate(prevProps: Readonly<MsaRowTitleCheckboxType>, prevState: Readonly<MsaRowTitleCheckboxState>, snapshot?: any) {
         if(!this.props.disabled && prevProps.disabled)
             this.requestInfo();
     }
@@ -88,7 +90,7 @@ export class MsaRowTitleCheckboxComponent extends React.Component <MsaRowTitleCh
     }
 
     private click(): void {
-        if(this.props.disabled || this.state.disabled)
+        if(this.props.disabled)
             return;
         this.setState({checked:!this.state.checked},()=>{
             this.props.stateManager.next<"representation-change",{tag:MsaRowTitleCheckboxInterface["tag"];isHidden:boolean;pdb:{entryId:string;entityId:string;}|{entryId:string;instanceId:string;};}>({
@@ -109,7 +111,7 @@ export class MsaRowTitleCheckboxComponent extends React.Component <MsaRowTitleCh
         });
     }
 
-    private style():React.CSSProperties {
+    private style(): React.CSSProperties {
         const color = {
             "checked":"rgb(51, 122, 183)",
             "unchecked":"rgba(51,122,183,0.44)",
@@ -118,26 +120,19 @@ export class MsaRowTitleCheckboxComponent extends React.Component <MsaRowTitleCh
         return {
             width:7,
             height:7,
-            opacity: (this.props.disabled || this.state.disabled) && this.props.tag != "aligned" ? 0 : 1,
-            backgroundColor: this.props.disabled || this.state.disabled ? color.disabled : color[ this.state.checked ? "checked" : "unchecked"],
+            opacity: this.state.opacity,
+            backgroundColor: this.props.disabled ? color.disabled : color[ this.state.checked ? "checked" : "unchecked"],
             border: 1,
             borderStyle: "solid",
-            borderColor: this.props.disabled || this.state.disabled ? color.disabled :  color.checked,
+            borderColor: this.props.disabled ? color.disabled :  color.checked,
             display:"inline-block",
             marginLeft:4,
-            cursor: this.props.disabled || this.state.disabled ? undefined : "pointer"
+            cursor: this.props.disabled ? undefined : "pointer"
         };
     }
 
-    private compId(): string {
-        if("entityId" in this.props)
-            return `${this.props.entryId}${TagDelimiter.entity}${this.props.entityId}`;
-        else
-            return `${this.props.entryId}${TagDelimiter.instance}${this.props.instanceId}`;
-    };
-
     private title(): string | undefined{
-        if(this.props.disabled || this.state.disabled )
+        if(this.props.disabled)
             return undefined;
         switch (this.props.tag){
             case "aligned":
@@ -149,21 +144,31 @@ export class MsaRowTitleCheckboxComponent extends React.Component <MsaRowTitleCh
         }
     }
 
-    private getRcsbId(pdb:{entryId:string;entityId:string;}|{entryId:string;instanceId:string;}): string {
-        if("instanceId" in pdb)
-            return `${pdb.entryId}${TagDelimiter.instance}${pdb.instanceId}`;
+    private compId(): string {
+        if("entityId" in this.props)
+            return `${this.props.entryId}${TagDelimiter.entity}${this.props.entityId}`;
         else
+            return `${this.props.entryId}${TagDelimiter.instance}${this.props.instanceId}`;
+    }
+
+    private getRcsbId(pdb:{entryId:string;entityId:string;}|{entryId:string;instanceId:string;}): string {
+        if("entityId" in pdb)
             return `${pdb.entryId}${TagDelimiter.entity}${pdb.entityId}`;
+        else
+            return `${pdb.entryId}${TagDelimiter.instance}${pdb.instanceId}`;
     }
 
-    private componentInfo(data: {tag:MsaRowTitleCheckboxInterface["tag"];isComponent:boolean;isVisible:boolean;pdb:{entryId:string;entityId:string;}|{entryId:string;instanceId:string;};}): void {
+    private async componentInfo(data: {
+        tag:MsaRowTitleCheckboxInterface["tag"];
+        isComponent:boolean;
+        isVisible:boolean;
+        pdb: {entryId:string;entityId:string;} | {entryId:string;instanceId:string;};
+    }): Promise<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})
+            if( data.isVisible)
+                this.setState({checked: true, opacity: await this.opacity()})
             else
-                this.setState({checked: false})
+                this.setState({checked: false, opacity: await this.opacity()})
         }
     }
 
@@ -184,4 +189,33 @@ export class MsaRowTitleCheckboxComponent extends React.Component <MsaRowTitleCh
         })
     }
 
+    private async opacity(): Promise<0 | 1> {
+        switch (this.props.tag){
+            case "aligned":
+                return 1;
+            case "polymer":
+                return await this.polymerTest() ? 1 : 0;
+            case "non-polymer":
+                return await this.nonPolymerTest() ? 1 : 0;
+        }
+
+    }
+    private async polymerTest(): Promise<boolean> {
+        const entryId = this.props.entryId;
+        const entryInfo = (await rcsbRequestCtxManager.getEntryProperties(entryId))[0];
+        if(entryInfo && entryInfo.entityToInstance.size > 1)
+            return true;
+        if(entryInfo && entryInfo.entityToInstance && Array.from(entryInfo.entityToInstance.get(this.compId()) ?? []).length > 1)
+            return true;
+        if(entryInfo && (entryInfo.instanceToOperator?.get(`${this.props.entryId}-1`)?.get( (entryInfo.entityToInstance.get(this.compId()) ?? [""])[0] )?.length ?? 0) > 1)
+            return true;
+        return false;
+    }
+
+    private async nonPolymerTest(): Promise<boolean> {
+        const entryId = this.props.entryId;
+        const entryInfo = (await rcsbRequestCtxManager.getEntryProperties(entryId))[0];
+        return entryInfo && entryInfo.nonPolymerEntityToInstance && entryInfo.nonPolymerEntityToInstance.size > 0;
+    }
+
 }

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

@@ -20,7 +20,7 @@ import {RcsbFvRowConfigInterface} from "@rcsb/rcsb-saguaro/lib/RcsbFv/RcsbFvConf
 interface MsaRowTitleInterface extends RcsbFvRowTitleInterface {
     alignmentContext: AlignmentRequestContextType;
     targetAlignment: TargetAlignment;
-    stateManager:RcsbFvStateInterface;
+    stateManager: RcsbFvStateInterface;
     titleClick: ()=>void;
 }
 
@@ -51,29 +51,27 @@ export class MsaRowTitleComponent extends React.Component <MsaRowTitleInterface,
     }
 
     public render(): JSX.Element{
-       return (
-           <div style={{textAlign:"right", display:"flex"}}
+        return (
+           <div style={{textAlign:"right", display:"flex", alignItems:"center"}}
                 onMouseOver={()=>this.hover(true)}
                 onMouseOut={()=>this.hover(false)}
            >
-               <div>
-                   <div style={{
-                           MozUserSelect:"none",
-                           WebkitUserSelect:"none",
-                           msUserSelect:"none",
-                           color: this.state.titleColor,
-                           cursor: this.state.blocked ? "wait" : "pointer",
-                           maxWidth: (this.configData.rowTitleWidth ?? 190) - 60,
-                           overflow: "hidden",
-                           textOverflow: "ellipsis",
-                           whiteSpace: "nowrap",
-                           textAlign: "right"
-                       }}
-                       onClick={(e: MouseEvent)=>this.click(e)}
-                       title={this.props.targetAlignment.target_id ?? undefined}
-                   >
-                       {this.props.targetAlignment.target_id}
-                   </div>
+               <div style={{
+                       MozUserSelect:"none",
+                       WebkitUserSelect:"none",
+                       msUserSelect:"none",
+                       color: this.state.titleColor,
+                       cursor: this.state.blocked ? "wait" : "pointer",
+                       maxWidth: (this.configData.rowTitleWidth ?? 190) - 60,
+                       overflow: "hidden",
+                       textOverflow: "ellipsis",
+                       whiteSpace: "nowrap",
+                       textAlign: "right"
+                   }}
+                   onClick={(e: MouseEvent)=>this.click(e)}
+                   title={this.props.targetAlignment.target_id ?? undefined}
+               >
+                   {this.props.targetAlignment.target_id}
                </div>
                <div  style={{cursor: this.cursor(), width:39}} onClick={(e: MouseEvent)=>this.altClick(e)} >
                    <MsaRowTitleCheckboxComponent disabled={this.state.disabled} {...parseEntityOrInstance(this.props.targetAlignment.target_id!)} tag={"aligned"} stateManager={this.props.stateManager}/>

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 = "116_30";
     const panel3d = new RcsbFv3DSequenceIdentity({
         elementId: "none",
         config:{

webpack.examples.config.js

@@ -1,125 +0,0 @@
-const path = require('path');
-
-const commonConfig = {
-    mode:"production",
-    module: {
-      rules: [
-          {
-              test: /\.(html|ico)$/,
-              use: [{
-                  loader: 'file-loader',
-                  options: { name: '[name].[ext]' }
-              }]
-          },{
-              test: /\.scss$/,
-              use: [
-                  'style-loader',
-                  {
-                      loader: 'css-loader',
-                      options: {
-                          modules: {
-                              localIdentName:'[local]'
-                          }
-                      }
-                  },
-                  'sass-loader'
-              ]
-          }
-      ]
-    },
-    resolve: {
-        modules: [
-            'node_modules',
-            path.resolve(__dirname, 'build/src/')
-        ],
-        fallback: {
-            fs: false,
-            buffer: require.resolve('buffer'),
-            crypto: require.resolve('crypto-browserify'),
-            path: require.resolve('path-browserify'),
-            stream: require.resolve('stream-browserify')
-        }
-    }
-};
-
-const out_path = "build/examples";
-const examples = [];
-
-examples.push({
-    ...commonConfig,
-    entry: {
-        "index": './build/src/examples/uniprot/index.js'
-    },
-    output: {
-        filename: '[name].js',
-        path: path.resolve(__dirname, out_path+'/uniprot/')
-    }
-});
-
-examples.push({
-    ...commonConfig,
-    entry: {
-        "index": './build/src/examples/assembly/index.js'
-    },
-    output: {
-        filename: '[name].js',
-        path: path.resolve(__dirname, out_path+'/assembly/')
-    }
-});
-
-examples.push({
-    ...commonConfig,
-    entry: {
-        "index": './build/src/examples/external-mapping/index.js'
-    },
-    output: {
-        filename: '[name].js',
-        path: path.resolve(__dirname, out_path+'/external-mapping/')
-    }
-});
-
-examples.push({
-    ...commonConfig,
-    entry: {
-        "index": './build/src/examples/single-chain/index.js'
-    },
-    output: {
-        filename: '[name].js',
-        path: path.resolve(__dirname, out_path+'/single-chain/')
-    }
-});
-
-examples.push({
-    ...commonConfig,
-    entry: {
-        "index": './build/src/examples/structural-alignment/index.js'
-    },
-    output: {
-        filename: '[name].js',
-        path: path.resolve(__dirname, out_path+'/structural-alignment/')
-    }
-});
-
-examples.push({
-    ...commonConfig,
-    entry: {
-        "index": './build/src/examples/multiple-chain/index.js'
-    },
-    output: {
-        filename: '[name].js',
-        path: path.resolve(__dirname, out_path+'/multiple-chain/')
-    }
-});
-
-examples.push({
-    ...commonConfig,
-    entry: {
-        "index": './build/src/examples/css-config/index.js'
-    },
-    output: {
-        filename: '[name].js',
-        path: path.resolve(__dirname, out_path+'/css-config/')
-    }
-});
-
-module.exports = examples;