Extending 1D-3D display to any rcsb-saguaro-app PFV methods

CHANGELOG.md

@@ -4,7 +4,10 @@
 
 ## [1.4.0] - 2022-04-20
 ### Improvement
-- General 1D panel configuration to extend the 1D-3D visualization to any rcsb-saguaro-app PFV builder
+- Extending 1D-3D display to any rcsb-saguaro-app PFV methods
+  - `PfvFactoryInterface` defines how the PFV is created 
+  - `CallbackManagerInterface` defines the callbacks between the 1D and 3D panels
+  - Current implementations: assembly and uniprot (partial implementation)
 
 ## [1.3.10] - 2022-04-14
 ### Dependency update

package-lock.json

@@ -1,26 +1,27 @@
 {
   "name": "@rcsb/rcsb-saguaro-3d",
-  "version": "1.3.9",
+  "version": "1.4.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@rcsb/rcsb-saguaro-3d",
-      "version": "1.3.9",
+      "version": "1.4.0",
       "license": "MIT",
       "dependencies": {
         "@rcsb/rcsb-api-tools": "^4.0.1",
         "@rcsb/rcsb-molstar": "^2.3.0",
         "@rcsb/rcsb-saguaro": "^2.0.6",
-        "@rcsb/rcsb-saguaro-app": "^4.1.2",
+        "@rcsb/rcsb-saguaro-app": "^4.3.1",
         "molstar": "^3.6.1"
       },
       "devDependencies": {
         "@babel/core": "^7.17.3",
         "@babel/plugin-proposal-class-properties": "^7.16.7",
         "@babel/preset-env": "^7.16.11",
-        "@types/react": "^17.0.37",
+        "@types/react": "^17.0.39",
         "@types/react-dom": "^17.0.11",
+        "@types/uniqid": "^5.3.2",
         "babel-loader": "^8.2.3",
         "buffer": "^6.0.3",
         "concurrently": "^7.0.0",
@@ -44,10 +45,61 @@
         "typedoc": "^0.22.11",
         "typedoc-plugin-missing-exports": "^0.22.6",
         "typescript": "^4.5.5",
+        "uniqid": "^5.4.0",
         "webpack": "^5.69.0",
         "webpack-cli": "^4.9.1"
       }
     },
+    "../rcsb-saguaro-app": {
+      "name": "@rcsb/rcsb-saguaro-app",
+      "version": "4.3.1",
+      "extraneous": true,
+      "license": "MIT",
+      "dependencies": {
+        "@rcsb/rcsb-api-tools": "^4.0.1",
+        "@rcsb/rcsb-saguaro": "^2.0.6",
+        "ideogram": "^1.33.0",
+        "react-select": "^5.2.2",
+        "rxjs": "^6.6.0"
+      },
+      "devDependencies": {
+        "@babel/core": "^7.10.4",
+        "@babel/plugin-proposal-class-properties": "^7.10.4",
+        "@babel/preset-env": "^7.10.4",
+        "@types/lodash": "^4.14.176",
+        "@types/object-hash": "^2.2.1",
+        "@types/react": "^17.0.39",
+        "@types/react-dom": "^17.0.11",
+        "@types/uniqid": "^5.3.2",
+        "babel-loader": "^8.1.0",
+        "bootstrap": "^5.1.3",
+        "bootstrap-icons": "^1.8.1",
+        "css-loader": "^6.5.1",
+        "del-cli": "^4.0.1",
+        "lodash": "^4.17.21",
+        "ncp": "^2.0.0",
+        "object-hash": "^3.0.0",
+        "raw-loader": "^4.0.2",
+        "react": "^17.0.2",
+        "react-bootstrap": "^2.1.2",
+        "react-dom": "^17.0.2",
+        "react-draggable": "^4.4.4",
+        "sass": "^1.49.9",
+        "sass-loader": "^12.6.0",
+        "string-to-color": "^2.2.2",
+        "style-loader": "^3.3.1",
+        "ts-loader": "^9.2.6",
+        "ts-node": "^10.5.0",
+        "typedoc": "^0.22.11",
+        "typedoc-plugin-missing-exports": "^0.22.6",
+        "typescript": "^4.5.5",
+        "uniqid": "^5.4.0",
+        "victory": "^36.3.1",
+        "webpack": "^5.64.4",
+        "webpack-cli": "^4.9.1",
+        "worker-loader": "^3.0.8"
+      }
+    },
     "node_modules/@ampproject/remapping": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.1.2.tgz",
@@ -2339,6 +2391,16 @@
         "tslib": "^2.3.1"
       }
     },
+    "node_modules/@rcsb/rcsb-molstar/node_modules/@types/react": {
+      "version": "17.0.44",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.44.tgz",
+      "integrity": "sha512-Ye0nlw09GeMp2Suh8qoOv0odfgCoowfM/9MG6WeRD60Gq9wS90bdkdRtYbRkNhXOpG4H+YXGvj4wOWhAC0LJ1g==",
+      "dependencies": {
+        "@types/prop-types": "*",
+        "@types/scheduler": "*",
+        "csstype": "^3.0.2"
+      }
+    },
     "node_modules/@rcsb/rcsb-saguaro": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/@rcsb/rcsb-saguaro/-/rcsb-saguaro-2.0.6.tgz",
@@ -2356,9 +2418,9 @@
       }
     },
     "node_modules/@rcsb/rcsb-saguaro-app": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/@rcsb/rcsb-saguaro-app/-/rcsb-saguaro-app-4.1.2.tgz",
-      "integrity": "sha512-Z7a075yfilQP9xkQI95cXcbK8GQJ/7nKH+xMypc7nKuSA6dfMsvq/3cBryGj1X4WRRxEfG6Ay6/Oj7yDzakS6Q==",
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/@rcsb/rcsb-saguaro-app/-/rcsb-saguaro-app-4.3.1.tgz",
+      "integrity": "sha512-t7+FAVM1qcKEfdq2ulI+yqXRKG7zCNASnfEr19ANIYGyJ0o0bcGvBOgdOv+i89yTBHRctkPcxu5l6Ku8hziYGg==",
       "dependencies": {
         "@rcsb/rcsb-api-tools": "^4.0.1",
         "@rcsb/rcsb-saguaro": "^2.0.6",
@@ -2836,9 +2898,9 @@
       "integrity": "sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw=="
     },
     "node_modules/@types/react": {
-      "version": "17.0.44",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.44.tgz",
-      "integrity": "sha512-Ye0nlw09GeMp2Suh8qoOv0odfgCoowfM/9MG6WeRD60Gq9wS90bdkdRtYbRkNhXOpG4H+YXGvj4wOWhAC0LJ1g==",
+      "version": "17.0.39",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.39.tgz",
+      "integrity": "sha512-UVavlfAxDd/AgAacMa60Azl7ygyQNRwC/DsHZmKgNvPmRR5p70AJ5Q9EAmL2NWOJmeV+vVUI4IAP7GZrN8h8Ug==",
       "dependencies": {
         "@types/prop-types": "*",
         "@types/scheduler": "*",
@@ -2880,6 +2942,12 @@
       "resolved": "https://registry.npmjs.org/@types/swagger-ui-dist/-/swagger-ui-dist-3.30.1.tgz",
       "integrity": "sha512-wWojDensMF33dSrhak4iWSPOsWBbvf+rSJ6VWQ7ohQbGdKAiT2IwUexrDZkMvf3+vVAPVnNFDRDtxADFszbh+Q=="
     },
+    "node_modules/@types/uniqid": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/@types/uniqid/-/uniqid-5.3.2.tgz",
+      "integrity": "sha512-/NYoaZpWsnAJDsGYeMNDeG3p3fuUb4AiC7MfKxi5VSu18tXd08w6Ch0fKW94T4FeLXXZwZPoFgHA1O0rDYKyMQ==",
+      "dev": true
+    },
     "node_modules/@types/websocket": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/@types/websocket/-/websocket-1.0.5.tgz",
@@ -10910,6 +10978,12 @@
         "node": ">=4"
       }
     },
+    "node_modules/uniqid": {
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/uniqid/-/uniqid-5.4.0.tgz",
+      "integrity": "sha512-38JRbJ4Fj94VmnC7G/J/5n5SC7Ab46OM5iNtSstB/ko3l1b5g7ALt4qzHFgGciFkyiRNtDXtLNb+VsxtMSE77A==",
+      "dev": true
+    },
     "node_modules/unixify": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/unixify/-/unixify-1.0.0.tgz",
@@ -13090,6 +13164,18 @@
         "react-dom": "^17.0.2",
         "rxjs": "^7.5.5",
         "tslib": "^2.3.1"
+      },
+      "dependencies": {
+        "@types/react": {
+          "version": "17.0.44",
+          "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.44.tgz",
+          "integrity": "sha512-Ye0nlw09GeMp2Suh8qoOv0odfgCoowfM/9MG6WeRD60Gq9wS90bdkdRtYbRkNhXOpG4H+YXGvj4wOWhAC0LJ1g==",
+          "requires": {
+            "@types/prop-types": "*",
+            "@types/scheduler": "*",
+            "csstype": "^3.0.2"
+          }
+        }
       }
     },
     "@rcsb/rcsb-saguaro": {
@@ -13124,9 +13210,9 @@
       }
     },
     "@rcsb/rcsb-saguaro-app": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/@rcsb/rcsb-saguaro-app/-/rcsb-saguaro-app-4.1.2.tgz",
-      "integrity": "sha512-Z7a075yfilQP9xkQI95cXcbK8GQJ/7nKH+xMypc7nKuSA6dfMsvq/3cBryGj1X4WRRxEfG6Ay6/Oj7yDzakS6Q==",
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/@rcsb/rcsb-saguaro-app/-/rcsb-saguaro-app-4.3.1.tgz",
+      "integrity": "sha512-t7+FAVM1qcKEfdq2ulI+yqXRKG7zCNASnfEr19ANIYGyJ0o0bcGvBOgdOv+i89yTBHRctkPcxu5l6Ku8hziYGg==",
       "requires": {
         "@rcsb/rcsb-api-tools": "^4.0.1",
         "@rcsb/rcsb-saguaro": "^2.0.6",
@@ -13567,9 +13653,9 @@
       "integrity": "sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw=="
     },
     "@types/react": {
-      "version": "17.0.44",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.44.tgz",
-      "integrity": "sha512-Ye0nlw09GeMp2Suh8qoOv0odfgCoowfM/9MG6WeRD60Gq9wS90bdkdRtYbRkNhXOpG4H+YXGvj4wOWhAC0LJ1g==",
+      "version": "17.0.39",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.39.tgz",
+      "integrity": "sha512-UVavlfAxDd/AgAacMa60Azl7ygyQNRwC/DsHZmKgNvPmRR5p70AJ5Q9EAmL2NWOJmeV+vVUI4IAP7GZrN8h8Ug==",
       "requires": {
         "@types/prop-types": "*",
         "@types/scheduler": "*",
@@ -13611,6 +13697,12 @@
       "resolved": "https://registry.npmjs.org/@types/swagger-ui-dist/-/swagger-ui-dist-3.30.1.tgz",
       "integrity": "sha512-wWojDensMF33dSrhak4iWSPOsWBbvf+rSJ6VWQ7ohQbGdKAiT2IwUexrDZkMvf3+vVAPVnNFDRDtxADFszbh+Q=="
     },
+    "@types/uniqid": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/@types/uniqid/-/uniqid-5.3.2.tgz",
+      "integrity": "sha512-/NYoaZpWsnAJDsGYeMNDeG3p3fuUb4AiC7MfKxi5VSu18tXd08w6Ch0fKW94T4FeLXXZwZPoFgHA1O0rDYKyMQ==",
+      "dev": true
+    },
     "@types/websocket": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/@types/websocket/-/websocket-1.0.5.tgz",
@@ -19655,6 +19747,12 @@
       "integrity": "sha512-5Zfuy9q/DFr4tfO7ZPeVXb1aPoeQSdeFMLpYuFebehDAhbuevLs5yxSZmIFN1tP5F9Wl4IpJrYojg85/zgyZHQ==",
       "dev": true
     },
+    "uniqid": {
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/uniqid/-/uniqid-5.4.0.tgz",
+      "integrity": "sha512-38JRbJ4Fj94VmnC7G/J/5n5SC7Ab46OM5iNtSstB/ko3l1b5g7ALt4qzHFgGciFkyiRNtDXtLNb+VsxtMSE77A==",
+      "dev": true
+    },
     "unixify": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/unixify/-/unixify-1.0.0.tgz",

package.json

@@ -16,13 +16,14 @@
     "buildExamples": "npm run cleanExamples && npm run tscExamples && npm run cpStyles && npm run copyExample && npm run packExamples && npm run clean",
     "cpStyles": "ncp src/styles build/src/styles",
     "copyConfig": "ncp build/src/config.js build/dist/config.js",
-    "copyExample": "npm run copyExample_1 && npm run copyExample_2 && npm run copyExample_3 && npm run copyExample_4 && npm run copyExample_5 && npm run copyExample_6",
+    "copyExample": "npm run copyExample_1 && npm run copyExample_2 && npm run copyExample_3 && npm run copyExample_4 && npm run copyExample_5 && npm run copyExample_6 && npm run copyExample_7",
     "copyExample_1": "ncp src/examples/single-chain/index.html build/src/examples/single-chain/index.html",
     "copyExample_2": "ncp src/examples/structural-alignment/index.html build/src/examples/structural-alignment/index.html",
     "copyExample_3": "ncp src/examples/assembly/index.html build/src/examples/assembly/index.html",
     "copyExample_4": "ncp src/examples/multiple-chain/index.html build/src/examples/multiple-chain/index.html",
     "copyExample_5": "ncp src/examples/css-config/index.html build/src/examples/css-config/index.html",
     "copyExample_6": "ncp src/examples/external-mapping/index.html build/src/examples/external-mapping/index.html",
+    "copyExample_7": "ncp src/examples/uniprot/index.html build/src/examples/uniprot/index.html",
     "buildDoc": "typedoc src/RcsbFv3D/RcsbFv3DAssembly.tsx src/RcsbFv3D/RcsbFv3DCustom.tsx && sed -i '' '/---/d' docs/index.html",
     "clean": "del-cli build/src",
     "cleanAll": "npm run clean && del-cli build/dist",
@@ -55,8 +56,9 @@
     "@babel/core": "^7.17.3",
     "@babel/plugin-proposal-class-properties": "^7.16.7",
     "@babel/preset-env": "^7.16.11",
-    "@types/react": "^17.0.37",
+    "@types/react": "^17.0.39",
     "@types/react-dom": "^17.0.11",
+    "@types/uniqid": "^5.3.2",
     "babel-loader": "^8.2.3",
     "buffer": "^6.0.3",
     "concurrently": "^7.0.0",
@@ -80,6 +82,7 @@
     "typedoc": "^0.22.11",
     "typedoc-plugin-missing-exports": "^0.22.6",
     "typescript": "^4.5.5",
+    "uniqid": "^5.4.0",
     "webpack": "^5.69.0",
     "webpack-cli": "^4.9.1"
   },
@@ -87,7 +90,7 @@
     "@rcsb/rcsb-api-tools": "^4.0.1",
     "@rcsb/rcsb-molstar": "^2.3.0",
     "@rcsb/rcsb-saguaro": "^2.0.6",
-    "@rcsb/rcsb-saguaro-app": "^4.1.2",
+    "@rcsb/rcsb-saguaro-app": "^4.3.1",
     "molstar": "^3.6.1"
   },
   "bugs": {

src/RcsbFv3D/RcsbFv3DAssembly.tsx

@@ -5,6 +5,8 @@ import {RcsbFvAdditionalConfig} from "@rcsb/rcsb-saguaro-app/build/dist/RcsbFvWe
 import {InstanceSequenceConfig} from "@rcsb/rcsb-saguaro-app/build/dist/RcsbFvWeb/RcsbFvBuilder/RcsbFvInstanceBuilder";
 import {OperatorInfo} from "../RcsbFvStructure/SaguaroPluginInterface";
 import {AssemblyPfvFactory} from "../RcsbFvSequence/SequenceViews/RcsbView/PfvFactoryImplementation/AssemblyPfvFactory";
+import uniqid from "uniqid";
+import {AssemblyCallbackManager} from "../RcsbFvSequence/SequenceViews/RcsbView/CallbackManagerImplementation/AssemblyCallbackManager";
 
 type RcsbFv3DAssemblyAdditionalConfig = RcsbFvAdditionalConfig & {operatorChangeCallback?:(operatorInfo: OperatorInfo)=>void};
 export interface RcsbFv3DAssemblyInterface extends RcsbFv3DAbstractInterface {
@@ -26,7 +28,7 @@ export class RcsbFv3DAssembly extends RcsbFv3DAbstract<{instanceSequenceConfig?:
     }
 
     init(assemblyData: RcsbFv3DAssemblyInterface) {
-        this.elementId = assemblyData.elementId ?? "RcsbFv3D_mainDiv_"+Math.random().toString(36).substring(2);
+        this.elementId = assemblyData.elementId ?? "RcsbFv3D_mainDiv_"+uniqid();
         this.structureConfig = {
             loadConfig: {
                 loadMethod: LoadMethod.loadPdbId,
@@ -49,7 +51,8 @@ export class RcsbFv3DAssembly extends RcsbFv3DAbstract<{instanceSequenceConfig?:
                 additionalConfig: assemblyData.additionalConfig,
                 pfvFactory:AssemblyPfvFactory,
                 pfvParams:{instanceSequenceConfig: assemblyData.instanceSequenceConfig},
-                useOperatorsFlag: assemblyData.useOperatorsFlag
+                useOperatorsFlag: assemblyData.useOperatorsFlag,
+                callbackManager: AssemblyCallbackManager
             },
             title: assemblyData.config.title,
             subtitle: assemblyData.config.subtitle

src/RcsbFv3D/RcsbFv3DCustom.tsx

@@ -2,6 +2,7 @@
 import {RcsbFvStructureInterface} from "../RcsbFvStructure/RcsbFvStructure";
 import {CustomViewInterface} from "../RcsbFvSequence/SequenceViews/CustomView/CustomView";
 import {RcsbFv3DAbstract, RcsbFv3DAbstractInterface} from "./RcsbFv3DAbstract";
+import uniqid from "uniqid";
 
 export interface RcsbFv3DCustomInterface extends RcsbFv3DAbstractInterface {
     structurePanelConfig: RcsbFvStructureInterface;
@@ -19,7 +20,7 @@ export class RcsbFv3DCustom extends RcsbFv3DAbstract<{}> {
     }
 
     init(config: RcsbFv3DCustomInterface) {
-        this.elementId = config.elementId ?? "RcsbFv3D_mainDiv_"+Math.random().toString(36).substr(2);
+        this.elementId = config.elementId ?? "RcsbFv3D_mainDiv_"+uniqid();
         this.structureConfig = config.structurePanelConfig;
         this.sequenceConfig = {
             ...config.sequencePanelConfig,

src/RcsbFv3D/RcsbFv3DUniprot.tsx

@@ -0,0 +1,42 @@
+import {RcsbFv3DAbstract, RcsbFv3DAbstractInterface} from "./RcsbFv3DAbstract";
+import {RcsbFvAdditionalConfig} from "@rcsb/rcsb-saguaro-app/build/dist/RcsbFvWeb/RcsbFvModule/RcsbFvModuleInterface";
+import uniqid from "uniqid";
+import {UniprotPfvFactory} from "../RcsbFvSequence/SequenceViews/RcsbView/PfvFactoryImplementation/UniprotPfvFactory";
+import {AssemblyCallbackManager} from "../RcsbFvSequence/SequenceViews/RcsbView/CallbackManagerImplementation/AssemblyCallbackManager";
+import {
+    UniprotCallbackManager
+} from "../RcsbFvSequence/SequenceViews/RcsbView/CallbackManagerImplementation/UniprotCallbackManager";
+
+export interface RcsbFv3DUniprotInterface extends RcsbFv3DAbstractInterface {
+    config: {
+        upAcc: string;
+        title?: string;
+        subtitle?: string;
+    };
+    additionalConfig?:RcsbFvAdditionalConfig;
+}
+
+export class RcsbFv3DUniprot extends RcsbFv3DAbstract<{upAcc:string}> {
+    constructor(config?:RcsbFv3DUniprotInterface){
+        super(config);
+    }
+
+    protected init(upData: RcsbFv3DUniprotInterface): void {
+        this.elementId = upData.elementId ?? "RcsbFv3D_mainDiv_"+uniqid();
+        this.structureConfig = {};
+        this.sequenceConfig = {
+            type: "rcsb",
+            config:{
+                rcsbId: upData.config.upAcc,
+                additionalConfig: upData.additionalConfig,
+                pfvFactory:UniprotPfvFactory,
+                pfvParams:{
+                    upAcc:upData.config.upAcc
+                },
+                callbackManager: UniprotCallbackManager,
+                buildPfvOnMount: true
+            }
+        }
+    }
+
+}

src/RcsbFvSequence/SequenceViews/RcsbView/CallbackHelper.ts → src/RcsbFvSequence/SequenceViews/RcsbView/CallbackManagerImplementation/AssemblyCallbackManager.ts

@@ -1,74 +1,15 @@
 import {
-    RcsbFvModulePublicInterface
-} from "@rcsb/rcsb-saguaro-app/build/dist/RcsbFvWeb/RcsbFvModule/RcsbFvModuleInterface";
-import {RcsbFvSelectorManager} from "../../../RcsbFvSelection/RcsbFvSelectorManager";
-import {AssemblyModelSate} from "./AssemblyModelSate";
-import {
-    SaguaroPluginInterface,
     SaguaroPluginModelMapType, SaguaroRange,
     SaguaroRegionList
-} from "../../../RcsbFvStructure/SaguaroPluginInterface";
+} from "../../../../RcsbFvStructure/SaguaroPluginInterface";
 import {RcsbFvTrackDataElementInterface} from "@rcsb/rcsb-saguaro";
 import {asyncScheduler} from "rxjs";
-import {DataContainer} from "../../../Utils/DataContainer";
-
-interface CallbackHelperInterface {
-    rcsbFvContainer: DataContainer<RcsbFvModulePublicInterface>;
-    selectorManager: RcsbFvSelectorManager;
-    assemblyModelSate: AssemblyModelSate;
-    plugin: SaguaroPluginInterface;
-    modelChangeCallback(modelMap:SaguaroPluginModelMapType, defaultAuthId?: string, defaultOperatorName?:string): Promise<void>;
-}
+import {AbstractCallbackManager} from "../CallbackManagerInterface";
 
-export class CallbackHelper {
+export class AssemblyCallbackManager extends AbstractCallbackManager {
 
-    private readonly rcsbFvContainer: DataContainer<RcsbFvModulePublicInterface>;
-    private readonly selectorManager: RcsbFvSelectorManager;
-    private readonly assemblyModelSate: AssemblyModelSate;
-    private selectedComponentId: string|undefined;
-    private readonly plugin: SaguaroPluginInterface;
-    private readonly modelChangeCallback: (modelMap:SaguaroPluginModelMapType, defaultAuthId?: string, defaultOperatorName?:string)=> Promise<void>;
     private readonly CREATE_COMPONENT_THR: number = 3;
 
-    constructor(config: CallbackHelperInterface) {
-        this.rcsbFvContainer = config.rcsbFvContainer;
-        this.selectorManager = config.selectorManager;
-        this.assemblyModelSate = config.assemblyModelSate;
-        this.plugin = config.plugin;
-        this.modelChangeCallback = config.modelChangeCallback;
-    }
-
-    public async pluginSelectCallback(mode:'select'|'hover'): Promise<void> {
-        const allSel: Array<SaguaroRegionList> | undefined = this.selectorManager.getSelection(mode);
-        const lastSel: SaguaroRegionList|null = this.selectorManager.getLastSelection('select');
-        const modelId: string = this.assemblyModelSate.getString("modelId");
-        const labelAsymId: string = this.assemblyModelSate.getString("labelAsymId");
-        const operatorName: string|undefined = this.assemblyModelSate.getOperator()?.name;
-
-        if(mode === 'select') this.removeComponent();
-
-        if(allSel == null || allSel.length ===0) {
-            this.rcsbFvContainer.get()?.getFv().clearSelection(mode);
-            if(mode === 'select') this.resetPluginView();
-        }else if( mode === 'select' && lastSel?.labelAsymId && (lastSel?.labelAsymId != labelAsymId || lastSel?.operatorName != operatorName) ){
-            const authId: string | undefined = this.assemblyModelSate.getChainInfo(lastSel?.labelAsymId!)?.auth;
-            await this.modelChangeCallback(this.assemblyModelSate.getMap(), authId, lastSel?.operatorName);
-        }else{
-            const sel: SaguaroRegionList | undefined = this.selectorManager.getSelectionWithCondition(
-                modelId,
-                labelAsymId,
-                mode,
-                operatorName
-            );
-            if (sel == null) {
-                this.rcsbFvContainer.get()?.getFv().clearSelection(mode);
-                if(mode === 'select') this.resetPluginView();
-            } else {
-                this.rcsbFvContainer.get()?.getFv().setSelection({elements: sel.regions, mode: mode});
-            }
-        }
-    }
-
     public elementClickCallback(e:RcsbFvTrackDataElementInterface): void {
         this.plugin.clearFocus();
         this.removeComponent();
@@ -155,7 +96,47 @@ export class CallbackHelper {
         }
     }
 
-    public selectionChangeCallback(selection: Array<RcsbFvTrackDataElementInterface>): void {
+    public async modelChangeCallback(modelMap:SaguaroPluginModelMapType, defaultAuthId?: string, defaultOperatorName?:string): Promise<void> {
+        this.rcsbFvContainer.set(await this.pfvFactory.getPfv({modelMap, defaultAuthId, defaultOperatorName}));
+    }
+
+    public async pfvChangeCallback(): Promise<void>{
+        this.resetPluginView();
+        await this.pluginSelectCallback("select");
+    }
+
+    protected async innerPluginSelect(mode:'select'|'hover'): Promise<void> {
+        const allSel: Array<SaguaroRegionList> | undefined = this.selectorManager.getSelection(mode);
+        const lastSel: SaguaroRegionList|null = this.selectorManager.getLastSelection('select');
+        const modelId: string = this.assemblyModelSate.getString("modelId");
+        const labelAsymId: string = this.assemblyModelSate.getString("labelAsymId");
+        const operatorName: string|undefined = this.assemblyModelSate.getOperator()?.name;
+
+        if(mode === 'select') this.removeComponent();
+
+        if(allSel == null || allSel.length ===0) {
+            this.rcsbFvContainer.get()?.getFv().clearSelection(mode);
+            if(mode === 'select') this.resetPluginView();
+        }else if( mode === 'select' && lastSel?.labelAsymId && (lastSel?.labelAsymId != labelAsymId || lastSel?.operatorName != operatorName) ){
+            const authId: string | undefined = this.assemblyModelSate.getChainInfo(lastSel?.labelAsymId!)?.auth;
+            await this.modelChangeCallback(this.assemblyModelSate.getMap(), authId, lastSel?.operatorName);
+        }else{
+            const sel: SaguaroRegionList | undefined = this.selectorManager.getSelectionWithCondition(
+                modelId,
+                labelAsymId,
+                mode,
+                operatorName
+            );
+            if (sel == null) {
+                this.rcsbFvContainer.get()?.getFv().clearSelection(mode);
+                if(mode === 'select') this.resetPluginView();
+            } else {
+                this.rcsbFvContainer.get()?.getFv().setSelection({elements: sel.regions, mode: mode});
+            }
+        }
+    }
+
+    protected innerSelectionChange(selection: Array<RcsbFvTrackDataElementInterface>): void {
         const modelId: string = this.assemblyModelSate.getString("modelId");
         const labelAsymId: string = this.assemblyModelSate.getString("labelAsymId");
         const operatorName: string|undefined = this.assemblyModelSate.getOperator()?.name;

src/RcsbFvSequence/SequenceViews/RcsbView/CallbackManagerImplementation/UniprotCallbackManager.ts

@@ -0,0 +1,61 @@
+import {AbstractCallbackManager} from "../CallbackManagerInterface";
+import {RcsbFvTrackDataElementInterface} from "@rcsb/rcsb-saguaro";
+import {SaguaroPluginModelMapType} from "../../../../RcsbFvStructure/SaguaroPluginInterface";
+import {LoadMethod} from "../../../../RcsbFvStructure/StructurePlugins/MolstarPlugin";
+import {
+    RcsbFvModulePublicInterface
+} from "@rcsb/rcsb-saguaro-app/build/dist/RcsbFvWeb/RcsbFvModule/RcsbFvModuleInterface";
+import {AlignmentResponse} from "@rcsb/rcsb-api-tools/build/RcsbGraphQL/Types/Borrego/GqlTypes";
+import {
+    UniprotSequenceOnchangeInterface
+} from "@rcsb/rcsb-saguaro-app/build/dist/RcsbFvWeb/RcsbFvBuilder/RcsbFvUniprotBuilder";
+
+export class UniprotCallbackManager  extends AbstractCallbackManager{
+
+    elementClickCallback(e: RcsbFvTrackDataElementInterface): void {
+    }
+
+    highlightHoverCallback(selection: RcsbFvTrackDataElementInterface[]): void {
+    }
+
+    modelChangeCallback(modelMap: SaguaroPluginModelMapType, defaultAuthId?: string, defaultOperatorName?: string): Promise<void> {
+        return Promise.resolve(undefined);
+    }
+
+    pluginSelectCallback(mode: "select" | "hover"): Promise<void> {
+        return Promise.resolve(undefined);
+    }
+
+    selectionChangeCallback(selection: Array<RcsbFvTrackDataElementInterface>): void {
+    }
+
+    async pfvChangeCallback(context: UniprotSequenceOnchangeInterface, module: RcsbFvModulePublicInterface): Promise<void> {
+        if(context.entryId) {
+            this.plugin.load({
+                loadMethod: LoadMethod.loadPdbId,
+                loadParams: {
+                    pdbId: context.entryId
+                }
+            });
+        }else{
+            const alignments: AlignmentResponse = await module.getAlignmentResponse();
+            if(alignments.target_alignment && alignments.target_alignment.length > 0){
+                const entryId: string|undefined = alignments.target_alignment[0]!.target_id?.split("_")[0];
+                this.plugin.load({
+                    loadMethod: LoadMethod.loadPdbId,
+                    loadParams: {
+                        pdbId: entryId
+                    }
+                });
+            }
+        }
+    }
+
+    protected innerPluginSelect(mode: "select" | "hover"): Promise<void> {
+        return Promise.resolve(undefined);
+    }
+
+    protected innerSelectionChange(selection: Array<RcsbFvTrackDataElementInterface>): void {
+    }
+
+}

src/RcsbFvSequence/SequenceViews/RcsbView/CallbackManagerInterface.ts

@@ -0,0 +1,66 @@
+import {RcsbFvTrackDataElementInterface} from "@rcsb/rcsb-saguaro";
+import {SaguaroPluginInterface, SaguaroPluginModelMapType} from "../../../RcsbFvStructure/SaguaroPluginInterface";
+import {DataContainer} from "../../../Utils/DataContainer";
+import {
+    RcsbFvModulePublicInterface
+} from "@rcsb/rcsb-saguaro-app/build/dist/RcsbFvWeb/RcsbFvModule/RcsbFvModuleInterface";
+import {RcsbFvSelectorManager} from "../../../RcsbFvSelection/RcsbFvSelectorManager";
+import {AssemblyModelSate} from "./AssemblyModelSate";
+import {PfvFactoryInterface} from "./PfvFactoryInterface";
+
+export interface CallbackManagerInterface {
+    pluginSelectCallback(mode:'select'|'hover'): Promise<void>;
+    elementClickCallback(e:RcsbFvTrackDataElementInterface): void;
+    highlightHoverCallback(selection: RcsbFvTrackDataElementInterface[]): void;
+    selectionChangeCallback(selection: Array<RcsbFvTrackDataElementInterface>): void;
+    modelChangeCallback(modelMap:SaguaroPluginModelMapType, defaultAuthId?: string, defaultOperatorName?:string): Promise<void>;
+    pfvChangeCallback(...context: unknown[]): Promise<void>;
+}
+
+export interface CallbackConfigInterface {
+    rcsbFvContainer: DataContainer<RcsbFvModulePublicInterface>;
+    selectorManager: RcsbFvSelectorManager;
+    assemblyModelSate: AssemblyModelSate;
+    plugin: SaguaroPluginInterface;
+    pfvFactory: PfvFactoryInterface;
+}
+
+export abstract class AbstractCallbackManager implements CallbackManagerInterface {
+    protected readonly rcsbFvContainer: DataContainer<RcsbFvModulePublicInterface>;
+    protected readonly selectorManager: RcsbFvSelectorManager;
+    protected readonly assemblyModelSate: AssemblyModelSate;
+    protected selectedComponentId: string|undefined;
+    protected readonly plugin: SaguaroPluginInterface;
+    protected pfvFactory: PfvFactoryInterface;
+    protected readonly isInnerSelection: DataContainer<boolean> = new DataContainer<boolean>();
+
+    constructor(config: CallbackConfigInterface) {
+        this.rcsbFvContainer = config.rcsbFvContainer;
+        this.selectorManager = config.selectorManager;
+        this.assemblyModelSate = config.assemblyModelSate;
+        this.plugin = config.plugin;
+        this.pfvFactory = config.pfvFactory;
+    }
+
+    public async pluginSelectCallback(mode:'select'|'hover'): Promise<void> {
+        if(this.rcsbFvContainer.get() == null)
+            return;
+        this.isInnerSelection.set(true);
+        await this.innerPluginSelect(mode);
+        this.isInnerSelection.set(false);
+    }
+
+    public selectionChangeCallback(selection: Array<RcsbFvTrackDataElementInterface>): void {
+        if(this.isInnerSelection.get())
+            return;
+        this.innerSelectionChange(selection);
+    }
+
+    abstract elementClickCallback(e:RcsbFvTrackDataElementInterface): void;
+    abstract highlightHoverCallback(selection: RcsbFvTrackDataElementInterface[]): void;
+    abstract modelChangeCallback(modelMap:SaguaroPluginModelMapType, defaultAuthId?: string, defaultOperatorName?:string): Promise<void>;
+    abstract pfvChangeCallback(...context: unknown[]): Promise<void>;
+    protected abstract innerPluginSelect(mode: "select" | "hover"): Promise<void> ;
+    protected abstract innerSelectionChange(selection: Array<RcsbFvTrackDataElementInterface>): void;
+
+}

src/RcsbFvSequence/SequenceViews/RcsbView/PfvFactoryImplementation/AssemblyPfvFactory.tsx

@@ -1,17 +1,13 @@
 import {
-    RcsbFvAdditionalConfig,
     RcsbFvModulePublicInterface
 } from "@rcsb/rcsb-saguaro-app/build/dist/RcsbFvWeb/RcsbFvModule/RcsbFvModuleInterface";
-import {RcsbFvSelectorManager} from "../../../../RcsbFvSelection/RcsbFvSelectorManager";
-import {AssemblyModelSate} from "../AssemblyModelSate";
 import {
     ChainInfo, OperatorInfo,
     SaguaroPluginInterface,
     SaguaroPluginModelMapType
 } from "../../../../RcsbFvStructure/SaguaroPluginInterface";
 import {
-    InstanceSequenceConfig,
-    InstanceSequenceOnchangeInterface
+    InstanceSequenceConfig
 } from "@rcsb/rcsb-saguaro-app/build/dist/RcsbFvWeb/RcsbFvBuilder/RcsbFvInstanceBuilder";
 import {asyncScheduler} from "rxjs";
 import {buildInstanceSequenceFv, FeatureType, RcsbFvUI, RcsbRequestContextManager} from "@rcsb/rcsb-saguaro-app";
@@ -19,7 +15,6 @@ import {RcsbFvDOMConstants} from "../../../../RcsbFvConstants/RcsbFvConstants";
 import {SelectOptionProps} from "@rcsb/rcsb-saguaro-app/build/dist/RcsbFvWeb/WebTools/SelectButton";
 import {ChainDisplay} from "./ChainDisplay";
 import * as React from "react";
-import {RcsbFvBoardConfigInterface} from "@rcsb/rcsb-saguaro";
 import {AnnotationFeatures, Source, Type} from "@rcsb/rcsb-api-tools/build/RcsbGraphQL/Types/Borrego/GqlTypes";
 import {
     PolymerEntityInstanceInterface
@@ -28,53 +23,29 @@ import {
     InterfaceInstanceTranslate
 } from "@rcsb/rcsb-saguaro-app/build/dist/RcsbUtils/Translators/InterfaceInstanceTranslate";
 import {DataContainer} from "../../../../Utils/DataContainer";
-import {PfvAbstractFactory} from "../PfvFactoryInterface";
+import {BuildPfvInterface, PfvAbstractFactory, PfvFactoryConfigInterface} from "../PfvFactoryInterface";
 
-interface AssemblyPfvFactoryInterface {
-    rcsbFvDivId: string;
-    rcsbFvContainer: DataContainer<RcsbFvModulePublicInterface>;
-    selectorManager: RcsbFvSelectorManager;
-    assemblyModelSate: AssemblyModelSate;
-    plugin: SaguaroPluginInterface;
-    boardConfigContainer: DataContainer<Partial<RcsbFvBoardConfigInterface>>;
-    pfvChangeCallback(): Promise<void>;
-    additionalConfig: RcsbFvAdditionalConfig & {operatorChangeCallback?:(operatorInfo: OperatorInfo)=>void} | undefined;
+interface AssemblyPfvFactoryInterface extends PfvFactoryConfigInterface{
     useOperatorsFlag:boolean | undefined;
     instanceSequenceConfig: InstanceSequenceConfig | undefined;
 }
 
 export class AssemblyPfvFactory extends PfvAbstractFactory<{instanceSequenceConfig: InstanceSequenceConfig|undefined}> {
 
-    private readonly rcsbFvDivId: string;
-    private readonly rcsbFvContainer: DataContainer<RcsbFvModulePublicInterface>;
-    private readonly selectorManager: RcsbFvSelectorManager;
-    private readonly assemblyModelSate: AssemblyModelSate;
-    private readonly plugin: SaguaroPluginInterface;
-    private readonly boardConfigContainer: DataContainer<Partial<RcsbFvBoardConfigInterface>>;
-    private readonly pfvChangeCallback: ()=>Promise<void>;
     private readonly instanceSequenceConfig: InstanceSequenceConfig|undefined;
-    private readonly additionalConfig: RcsbFvAdditionalConfig & {operatorChangeCallback?:(operatorInfo: OperatorInfo)=>void} | undefined;
     private readonly useOperatorsFlag:boolean | undefined;
     private readonly OPERATOR_DROPDOWN_TITLE: string = "Symmetry Partner";
 
     constructor(config: AssemblyPfvFactoryInterface) {
         super(config);
-        this.rcsbFvDivId = config.rcsbFvDivId;
-        this.rcsbFvContainer = config.rcsbFvContainer;
-        this.selectorManager = config.selectorManager;
-        this.assemblyModelSate = config.assemblyModelSate;
-        this.plugin = config.plugin;
         this.instanceSequenceConfig = config.instanceSequenceConfig;
-        this.additionalConfig = config.additionalConfig;
-        this.boardConfigContainer = config.boardConfigContainer;
         this.useOperatorsFlag = config.useOperatorsFlag;
-        this.pfvChangeCallback = config.pfvChangeCallback;
     }
 
-    async buildPfv(modelMap:SaguaroPluginModelMapType, defaultAuthId?: string, defaultOperatorName?:string): Promise<RcsbFvModulePublicInterface | undefined> {
-        this.assemblyModelSate.setMap(modelMap);
+    async getPfv(config: BuildPfvInterface): Promise<RcsbFvModulePublicInterface | undefined> {
+        this.assemblyModelSate.setMap(config.modelMap);
         this.plugin.clearFocus();
-        const onChangeCallback: Map<string, (x: InstanceSequenceOnchangeInterface)=>void> = new Map<string, (x: InstanceSequenceOnchangeInterface) => {}>();
+        const onChangeCallback: Map<string, (x: PolymerEntityInstanceInterface)=>void> = new Map<string, (x: PolymerEntityInstanceInterface) => {}>();
         const assemblyInstances: Map<string, Set<string>> = new Map<string, Set<string>>();
         this.assemblyModelSate.forEach((v,k)=>{
             assemblyInstances.set(v.entryId,new Set<string>(v.chains.map(d=>d.label)));
@@ -86,7 +57,7 @@ export class AssemblyPfvFactory extends PfvAbstractFactory<{instanceSequenceConf
                 },1000);
             });
         });
-        const operatorNameContainer: DataContainer<string> = new DataContainer<string>(defaultOperatorName);
+        const operatorNameContainer: DataContainer<string> = new DataContainer<string>(config.defaultOperatorName);
         let module: RcsbFvModulePublicInterface | undefined = undefined;
         if(this.assemblyModelSate.get("entryId") != null) {
             module = await buildInstanceSequenceFv(
@@ -95,15 +66,15 @@ export class AssemblyPfvFactory extends PfvAbstractFactory<{instanceSequenceConf
                 this.assemblyModelSate.getString("entryId"),
                 {
                     ...this.instanceSequenceConfig,
-                    defaultValue: defaultAuthId,
+                    defaultValue: config.defaultAuthId,
                     onChangeCallback: onChangeCallback.get(this.assemblyModelSate.getString("entryId")),
-                    beforeChangeCallback: (x: InstanceSequenceOnchangeInterface)=>{
-                        this.assemblyModelSate.set({entryId:x.pdbId, labelAsymId: x.asymId});
-                        const entryMap:[string, {entryId: string, assemblyId: string, chains: ChainInfo[]}] | undefined = Array.from(this.assemblyModelSate.entries()).find((e)=>(e[1].entryId === x.pdbId));
+                    beforeChangeCallback: (x: PolymerEntityInstanceInterface)=>{
+                        this.assemblyModelSate.set({entryId:x.entryId, labelAsymId: x.asymId});
+                        const entryMap:[string, {entryId: string, assemblyId: string, chains: ChainInfo[]}] | undefined = Array.from(this.assemblyModelSate.entries()).find((e)=>(e[1].entryId === x.entryId));
                         if(!entryMap){
-                            throw `Error: no modelId was found for ${x.pdbId}`;
+                            throw `Error: no modelId was found for ${x.entryId}`;
                         }
-                        const operator: OperatorInfo|undefined = getOperator(this.assemblyModelSate.getMap().get(entryMap[0])!, defaultAuthId, operatorNameContainer.get());
+                        const operator: OperatorInfo|undefined = getOperator(this.assemblyModelSate.getMap().get(entryMap[0])!, config.defaultAuthId, operatorNameContainer.get());
                         this.addOperatorButton(operator?.name);
                         this.assemblyModelSate.setOperator(x.asymId,operator?.name);
                         operatorNameContainer.set(undefined);
@@ -131,7 +102,7 @@ export class AssemblyPfvFactory extends PfvAbstractFactory<{instanceSequenceConf
                 }
             );
         }
-        if(!defaultAuthId)
+        if(!config.defaultAuthId)
             await createComponents(this.plugin, this.assemblyModelSate.getMap());
         return module;
     }
@@ -148,11 +119,11 @@ export class AssemblyPfvFactory extends PfvAbstractFactory<{instanceSequenceConf
                     optId:op.name,
                     onChange: async ()=>{
                         this.assemblyModelSate.set({operator:op});
-                        await this.buildPfv(
-                            this.assemblyModelSate.getMap(),
-                            this.assemblyModelSate.getChainInfo()?.auth,
-                            op.name
-                        )
+                        await this.getPfv({
+                            modelMap: this.assemblyModelSate.getMap(),
+                            defaultAuthId: this.assemblyModelSate.getChainInfo()?.auth,
+                            defaultOperatorName: op.name
+                        })
                     }
                 })),
                 {

src/RcsbFvSequence/SequenceViews/RcsbView/PfvFactoryImplementation/UniprotPfvFactory.ts

@@ -0,0 +1,42 @@
+import {PfvAbstractFactory, PfvFactoryConfigInterface} from "../PfvFactoryInterface";
+import {
+    RcsbFvModulePublicInterface
+} from "@rcsb/rcsb-saguaro-app/build/dist/RcsbFvWeb/RcsbFvModule/RcsbFvModuleInterface";
+import {buildMultipleAlignmentSequenceFv, FeatureType, RcsbFvUI, RcsbRequestContextManager} from "@rcsb/rcsb-saguaro-app";
+import {RcsbFvDOMConstants} from "../../../../RcsbFvConstants/RcsbFvConstants";
+import {
+    UniprotSequenceOnchangeInterface
+} from "@rcsb/rcsb-saguaro-app/build/dist/RcsbFvWeb/RcsbFvBuilder/RcsbFvUniprotBuilder";
+
+interface UniprotPfvFactoryInterface extends PfvFactoryConfigInterface {
+    upAcc:string;
+}
+
+export class UniprotPfvFactory extends PfvAbstractFactory<{upAcc:string}>{
+
+    private readonly upAcc:string;
+    private module: Promise<RcsbFvModulePublicInterface>;
+
+    constructor(config:UniprotPfvFactoryInterface) {
+        super(config);
+        this.upAcc = config.upAcc;
+    }
+
+    async getPfv(): Promise<RcsbFvModulePublicInterface | undefined> {
+        this.module = buildMultipleAlignmentSequenceFv(
+            this.rcsbFvDivId,
+            RcsbFvDOMConstants.SELECT_BUTTON_PFV_ID,
+            this.upAcc,
+            {
+                onChangeCallback:(context,module)=>{
+                    this.pfvChangeCallback(context, module);
+                }
+            },
+            this.additionalConfig
+        );
+        const module: RcsbFvModulePublicInterface = await this.module;
+        this.rcsbFvContainer.set(module);
+        return module;
+    }
+
+}

src/RcsbFvSequence/SequenceViews/RcsbView/PfvFactoryInterface.ts

@@ -12,19 +12,49 @@ import {
 } from "../../../RcsbFvStructure/SaguaroPluginInterface";
 import {RcsbFvBoardConfigInterface} from "@rcsb/rcsb-saguaro";
 
-export interface PfvFactoryInterface {
+
+export interface PfvFactoryConfigInterface {
     rcsbFvDivId: string;
     rcsbFvContainer: DataContainer<RcsbFvModulePublicInterface>;
     selectorManager: RcsbFvSelectorManager;
     assemblyModelSate: AssemblyModelSate;
     plugin: SaguaroPluginInterface;
     boardConfigContainer: DataContainer<Partial<RcsbFvBoardConfigInterface>>;
-    pfvChangeCallback(): Promise<void>;
+    pfvChangeCallback(...context: unknown[]): Promise<void>;
     additionalConfig: RcsbFvAdditionalConfig & {operatorChangeCallback?:(operatorInfo: OperatorInfo)=>void} | undefined;
-    useOperatorsFlag:boolean | undefined;
 }
 
-export abstract class PfvAbstractFactory<T={}> {
-    protected constructor(config:PfvFactoryInterface & T){}
-    abstract buildPfv(modelMap:SaguaroPluginModelMapType, defaultAuthId?: string, defaultOperatorName?:string): Promise<RcsbFvModulePublicInterface | undefined>;
+export interface BuildPfvInterface {
+    modelMap:SaguaroPluginModelMapType;
+    defaultAuthId?: string;
+    defaultOperatorName?:string;
+}
+
+export interface PfvFactoryInterface {
+    getPfv(config?: BuildPfvInterface): Promise<RcsbFvModulePublicInterface | undefined>;
+}
+
+export abstract class PfvAbstractFactory<T={}> implements PfvFactoryInterface {
+
+    protected readonly rcsbFvDivId: string;
+    protected readonly rcsbFvContainer: DataContainer<RcsbFvModulePublicInterface>;
+    protected readonly selectorManager: RcsbFvSelectorManager;
+    protected readonly assemblyModelSate: AssemblyModelSate;
+    protected readonly plugin: SaguaroPluginInterface;
+    protected readonly boardConfigContainer: DataContainer<Partial<RcsbFvBoardConfigInterface>>;
+    protected readonly pfvChangeCallback: (...context: unknown[])=>Promise<void>;
+    protected readonly additionalConfig: RcsbFvAdditionalConfig & {operatorChangeCallback?:(operatorInfo: OperatorInfo)=>void} | undefined;
+
+    protected constructor(config:PfvFactoryConfigInterface & T){
+        this.rcsbFvDivId = config.rcsbFvDivId;
+        this.rcsbFvContainer = config.rcsbFvContainer;
+        this.selectorManager = config.selectorManager;
+        this.assemblyModelSate = config.assemblyModelSate;
+        this.plugin = config.plugin;
+        this.additionalConfig = config.additionalConfig;
+        this.boardConfigContainer = config.boardConfigContainer;
+        this.pfvChangeCallback = config.pfvChangeCallback;
+    }
+
+    abstract getPfv(config?: BuildPfvInterface): Promise<RcsbFvModulePublicInterface | undefined>;
 }

src/RcsbFvSequence/SequenceViews/RcsbView/RcsbView.tsx

@@ -8,39 +8,33 @@ import {RcsbFvBoardConfigInterface, RcsbFvTrackDataElementInterface} from "@rcsb
 import {OperatorInfo, SaguaroPluginModelMapType} from "../../../RcsbFvStructure/SaguaroPluginInterface";
 import {RcsbFvAdditionalConfig, RcsbFvModulePublicInterface} from "@rcsb/rcsb-saguaro-app/build/dist/RcsbFvWeb/RcsbFvModule/RcsbFvModuleInterface";
 import {AssemblyModelSate} from "./AssemblyModelSate";
-import {CallbackHelper} from "./CallbackHelper";
+import {AssemblyCallbackManager} from "./CallbackManagerImplementation/AssemblyCallbackManager";
 import {AssemblyPfvFactory} from "./PfvFactoryImplementation/AssemblyPfvFactory";
 import {DataContainer} from "../../../Utils/DataContainer";
-import {PfvAbstractFactory, PfvFactoryInterface} from "./PfvFactoryInterface";
+import {PfvAbstractFactory, PfvFactoryConfigInterface, PfvFactoryInterface} from "./PfvFactoryInterface";
+import {AbstractCallbackManager, CallbackConfigInterface, CallbackManagerInterface} from "./CallbackManagerInterface";
 
 export interface RcsbViewInterface<T extends {}> {
     rcsbId: string;
     additionalConfig?: RcsbFvAdditionalConfig & {operatorChangeCallback?:(operatorInfo: OperatorInfo)=>void};
     useOperatorsFlag?:boolean;
     pfvParams:T;
-    pfvFactory: new(config:PfvFactoryInterface & T) => PfvAbstractFactory<T>;
+    pfvFactory: new(config:PfvFactoryConfigInterface & T) => PfvFactoryInterface;
+    callbackManager: new(config: CallbackConfigInterface) => CallbackManagerInterface;
+    buildPfvOnMount?: boolean;
 }
 
 export class RcsbView<T extends {}> extends AbstractView<RcsbViewInterface<T> & AbstractViewInterface, {}>{
 
     private readonly assemblyModelSate: AssemblyModelSate = new AssemblyModelSate();
-    private innerSelectionFlag: boolean = false;
     private boardConfigContainer: DataContainer<Partial<RcsbFvBoardConfigInterface>> = new DataContainer();
     private rcsbFvContainer: DataContainer<RcsbFvModulePublicInterface> = new DataContainer<RcsbFvModulePublicInterface>();
-    private readonly callbackHelper: CallbackHelper;
-    private readonly pfvFactory: PfvAbstractFactory<T>;
+    private readonly callbackManager: CallbackManagerInterface;
+    private readonly pfvFactory: PfvFactoryInterface;
 
     constructor(props:RcsbViewInterface<T> & AbstractViewInterface) {
         super(props);
-        this.callbackHelper = new CallbackHelper({
-            rcsbFvContainer: this.rcsbFvContainer,
-            selectorManager: this.props.selectorManager,
-            plugin: this.props.plugin,
-            modelChangeCallback: this.modelChangeCallback.bind(this),
-            assemblyModelSate: this.assemblyModelSate
-        });
-        const pfvFactory = this.props.pfvFactory;
-        this.pfvFactory = new pfvFactory({
+        this.pfvFactory = new (this.props.pfvFactory)({
             ...this.props.pfvParams,
             rcsbFvContainer: this.rcsbFvContainer,
             selectorManager: this.props.selectorManager,
@@ -48,10 +42,17 @@ export class RcsbView<T extends {}> extends AbstractView<RcsbViewInterface<T> &
             assemblyModelSate: this.assemblyModelSate,
             boardConfigContainer: this.boardConfigContainer,
             rcsbFvDivId: this.rcsbFvDivId,
-            pfvChangeCallback: this.instanceChangeCallback.bind(this),
+            pfvChangeCallback: this.pfvChangeCallback.bind(this),
             additionalConfig: this.props.additionalConfig,
             useOperatorsFlag: this.props.useOperatorsFlag
         });
+        this.callbackManager = new (this.props.callbackManager)({
+            rcsbFvContainer: this.rcsbFvContainer,
+            selectorManager: this.props.selectorManager,
+            plugin: this.props.plugin,
+            assemblyModelSate: this.assemblyModelSate,
+            pfvFactory: this.pfvFactory
+        });
     }
 
     additionalContent(): JSX.Element {
@@ -77,7 +78,7 @@ export class RcsbView<T extends {}> extends AbstractView<RcsbViewInterface<T> &
         );
     }
 
-    componentDidMount (): void {
+    async componentDidMount (): Promise<void> {
         super.componentDidMount();
         const width: number | undefined = document.getElementById(this.componentDivId)?.getBoundingClientRect().width;
         if(width == null)
@@ -104,6 +105,8 @@ export class RcsbView<T extends {}> extends AbstractView<RcsbViewInterface<T> &
                     this.props.additionalConfig?.boardConfig.highlightHoverCallback(selection);
             },
         });
+        if(this.props.buildPfvOnMount)
+            this.rcsbFvContainer.set(await this.pfvFactory.getPfv());
     }
 
     componentWillUnmount() {
@@ -132,40 +135,28 @@ export class RcsbView<T extends {}> extends AbstractView<RcsbViewInterface<T> &
         return void 0;
     }
 
-    private resetPluginView(): void {
-        this.props.plugin.clearFocus();
-        this.props.plugin.resetCamera();
+    async modelChangeCallback(modelMap:SaguaroPluginModelMapType, defaultAuthId?: string, defaultOperatorName?:string): Promise<void> {
+        await this.callbackManager.modelChangeCallback(modelMap, defaultAuthId, defaultOperatorName);
     }
 
     private async pluginSelectCallback(mode:'select'|'hover'): Promise<void> {
-        if(this.rcsbFvContainer.get() == null)
-            return;
-        this.innerSelectionFlag = true;
-        await this.callbackHelper.pluginSelectCallback(mode);
-        this.innerSelectionFlag = false;
-    }
-
-    async modelChangeCallback(modelMap:SaguaroPluginModelMapType, defaultAuthId?: string, defaultOperatorName?:string): Promise<void> {
-        this.rcsbFvContainer.set(await this.pfvFactory.buildPfv(modelMap, defaultAuthId, defaultOperatorName));
+        await this.callbackManager.pluginSelectCallback(mode);
     }
 
-    private async instanceChangeCallback(): Promise<void>{
-        this.resetPluginView();
-        await this.pluginSelectCallback('select');
+    private async pfvChangeCallback(...context: unknown[]): Promise<void>{
+        await this.callbackManager.pfvChangeCallback(...context);
     }
 
     private highlightHoverCallback(selection: RcsbFvTrackDataElementInterface[]): void {
-        this.callbackHelper.highlightHoverCallback(selection);
+        this.callbackManager.highlightHoverCallback(selection);
     }
 
     private selectionChangeCallback(selection: Array<RcsbFvTrackDataElementInterface>): void {
-        if(this.innerSelectionFlag)
-            return;
-        this.callbackHelper.selectionChangeCallback(selection);
+        this.callbackManager.selectionChangeCallback(selection);
     }
 
     private elementClickCallback(e:RcsbFvTrackDataElementInterface): void {
-        this.callbackHelper.elementClickCallback(e);
+        this.callbackManager.elementClickCallback(e);
     }
 
 }

src/RcsbFvStructure/RcsbFvStructure.tsx

@@ -6,7 +6,7 @@ import {LoadMolstarInterface} from "./StructurePlugins/MolstarPlugin";
 import {RcsbFvSelectorManager} from "../RcsbFvSelection/RcsbFvSelectorManager";
 
 export interface RcsbFvStructureInterface {
-    loadConfig: LoadMolstarInterface | Array<LoadMolstarInterface>;
+    loadConfig?: LoadMolstarInterface | Array<LoadMolstarInterface>;
     pluginConfig?: Partial<ViewerProps>;
 }
 
@@ -23,7 +23,7 @@ export class RcsbFvStructure extends React.Component <RcsbFvStructureInterface &
     componentDidMount() {
         this.updateDimensions();
         this.props.plugin.init(this.props.componentId+"_"+RcsbFvDOMConstants.MOLSTAR_APP_ID, this.props.pluginConfig);
-        this.props.plugin.load(this.props.loadConfig);
+        if(this.props.loadConfig) this.props.plugin.load(this.props.loadConfig);
         window.addEventListener('resize', this.updateDimensions.bind(this));
     }
 

src/RcsbSaguaro3D.js

@@ -1,3 +1,5 @@
-import {RcsbFv3DCustom as custom} from "./RcsbFv3D/RcsbFv3DCustom"
-import {RcsbFv3DAssembly as assembly} from "./RcsbFv3D/RcsbFv3DAssembly"
-export {custom, assembly};
+import {RcsbFv3DCustom as custom} from "./RcsbFv3D/RcsbFv3DCustom";
+import {RcsbFv3DAssembly as assembly} from "./RcsbFv3D/RcsbFv3DAssembly";
+import {RcsbFv3DUniprot as uniprot} from "./RcsbFv3D/RcsbFv3DUniprot";
+
+export {custom, assembly, uniprot};

src/examples/uniprot/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon">
+    <script src="./index.js" type="text/javascript"></script>
+    <title>Saguaro 3D</title>
+</head>
+<body>
+
+
+</body>
+</html>

src/examples/uniprot/index.ts

@@ -0,0 +1,16 @@
+import './index.html';
+
+import {RcsbFv3DUniprot} from "../../RcsbFv3D/RcsbFv3DUniprot";
+
+document.addEventListener("DOMContentLoaded", function(event) {
+
+    const panel3d = new RcsbFv3DUniprot({
+        elementId:"pfv",
+        config:{
+            upAcc:"P01112"
+        }
+    });
+    panel3d.render();
+
+});
+

tsconfig.examples.json

@@ -8,7 +8,8 @@
     "lib": [ "es6", "dom", "esnext.asynciterable", "es2016"  ],
     "allowJs": true,
     "sourceMap": true,
-    "strictNullChecks": true
+    "strictNullChecks": true,
+    "esModuleInterop": true
   },
   "include": [
     "src/custom.d.ts",
@@ -18,7 +19,8 @@
     "src/examples/structural-alignment/index.tsx",
     "src/examples/css-config/index.tsx",
     "src/examples/assembly/index.ts",
-    "src/examples/assembly-interface/index.ts"
+    "src/examples/assembly-interface/index.ts",
+    "src/examples/uniprot/index.ts"
   ],
   "exclude": [
     "node_modules"

tsconfig.json

@@ -10,7 +10,8 @@
     "declaration": true,
     "sourceMap": true,
     "strictNullChecks": true,
-    "declarationDir": "./build/dist"
+    "declarationDir": "./build/dist",
+    "esModuleInterop": true
   },
   "include": [ "src/*", "src/**/*", "src/**/**/*", "src/**/**/**/*" ],
   "exclude": [

webpack.examples.config.js

@@ -45,6 +45,17 @@ const commonConfig = {
 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: {