checkboxes are hide unless Mol* component exists

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 [Semantic Versioning](https://semver.org/)
 
+## [2.3.6] - 2022-12-05
+### Display change
+- `MsaRowTitleCheckboxState` are hide unless Mol* component exists
+
 ## [2.3.5] - 2022-12-05
 ### Improvement
 - `MsaPfvManagerFactory` generalizes and replaces `SequenceIdentityPfvManager` and `UniprotPfvManager`

package-lock.json

@@ -1,18 +1,18 @@
 {
   "name": "@rcsb/rcsb-saguaro-3d",
-  "version": "2.3.4",
+  "version": "2.3.5",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@rcsb/rcsb-saguaro-3d",
-      "version": "2.3.4",
+      "version": "2.3.5",
       "license": "MIT",
       "dependencies": {
         "@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.7",
+        "@rcsb/rcsb-saguaro-app": "^4.5.8",
         "http-server": "^14.1.1",
         "molstar": "^3.13.0"
       },
@@ -2529,9 +2529,9 @@
       }
     },
     "node_modules/@rcsb/rcsb-saguaro-app": {
-      "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==",
+      "version": "4.5.8",
+      "resolved": "https://registry.npmjs.org/@rcsb/rcsb-saguaro-app/-/rcsb-saguaro-app-4.5.8.tgz",
+      "integrity": "sha512-8g712V265nG7mG4Qnyl6VjAr+bTHm3kXiA6P2dPVkGmO250Iz0Cu09ZeXfaE+yiwylWtd29aNByy8s9Hr2mqvQ==",
       "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.7",
-      "resolved": "https://registry.npmjs.org/@rcsb/rcsb-saguaro-app/-/rcsb-saguaro-app-4.5.7.tgz",
-      "integrity": "sha512-TygmolNOZQffHZYJc72eAl9UfHTuk/Oc2iCnzAeW1HVfRN/a5osrfSii1HdUpMRjpcsPQ4oyhwSg/G4yOK2xXw==",
+      "version": "4.5.8",
+      "resolved": "https://registry.npmjs.org/@rcsb/rcsb-saguaro-app/-/rcsb-saguaro-app-4.5.8.tgz",
+      "integrity": "sha512-8g712V265nG7mG4Qnyl6VjAr+bTHm3kXiA6P2dPVkGmO250Iz0Cu09ZeXfaE+yiwylWtd29aNByy8s9Hr2mqvQ==",
       "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.5",
+  "version": "2.3.6",
   "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.7",
+    "@rcsb/rcsb-saguaro-app": "^4.5.8",
     "http-server": "^14.1.1",
     "molstar": "^3.13.0"
   },

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

@@ -24,11 +24,11 @@ interface MsaRowTitleCheckboxState {
 //TODO keeps a global state of the (checkboxes <=> mol-star components) This needs further review!!!
 const globalState: {[key:string]: "active"|"inactive"|"disabled"|undefined;} = {};
 
-export class MsaRowTitleCheckbox extends React.Component <MsaRowTitleCheckboxInterface,MsaRowTitleCheckboxState> {
+export class MsaRowTitleCheckboxComponent extends React.Component <MsaRowTitleCheckboxInterface,MsaRowTitleCheckboxState> {
 
     readonly state: MsaRowTitleCheckboxState = {
-        checked: globalState[ this.entityId()+this.props.tag ] == "active" ||  this.props.tag == "aligned" ? true : false,
-        disabled: globalState[ this.entityId()+this.props.tag ] == "disabled" ? true : false
+        checked: globalState[this.entityId() + this.props.tag] == "active" || this.props.tag == "aligned",
+        disabled: globalState[this.entityId() + this.props.tag] == "disabled"
     };
 
     private subscription: Subscription;
@@ -142,6 +142,7 @@ export class MsaRowTitleCheckbox extends React.Component <MsaRowTitleCheckboxInt
         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"],
             border: 1,
             borderStyle: "solid",

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

@@ -13,7 +13,7 @@ import {TargetAlignment} from "@rcsb/rcsb-api-tools/build/RcsbGraphQL/Types/Borr
 import {RcsbFvStateManager} from "../../../../../RcsbFvState/RcsbFvStateManager";
 import {Subscription} from "rxjs";
 import {TagDelimiter} from "@rcsb/rcsb-saguaro-app";
-import {MsaRowTitleCheckbox} from "./MsaRowTitleCheckbox";
+import {MsaRowTitleCheckboxComponent} from "./MsaRowTitleCheckboxComponent";
 import {MouseEvent} from "react";
 import {Property} from "csstype";
 
@@ -75,9 +75,9 @@ export class MsaRowTitleComponent extends React.Component <MsaRowTitleInterface,
                    </div>
                </div>
                <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}/>
+                   <MsaRowTitleCheckboxComponent disabled={this.state.disabled} {...TagDelimiter.parseEntity(this.props.targetAlignment.target_id!)} tag={"aligned"} stateManager={this.props.stateManager}/>
+                   <MsaRowTitleCheckboxComponent disabled={this.state.disabled} {...TagDelimiter.parseEntity(this.props.targetAlignment.target_id!)} tag={"polymer"} stateManager={this.props.stateManager}/>
+                   <MsaRowTitleCheckboxComponent disabled={this.state.disabled} {...TagDelimiter.parseEntity(this.props.targetAlignment.target_id!)} tag={"non-polymer"} stateManager={this.props.stateManager}/>
                </div>
            </div>
        );