Custom View decoupled && No `StructureViewer` passed to `RcsbFvSequence`

CHANGELOG.md

@@ -10,6 +10,8 @@
 - Interface `ViewerModelMapManagerInterface<R,L>` needs a new generic that defines the type returned by the loading method in `LoadMolstarInterface`.
   - It defines a new method `getModelIdFromTrajectory(trajectory: L): string|undefined` 
 that is used to map loaded structure ids with user provided ids in `LoadParams`
+- Custom View has been decoupled from RCSB view
+- No `StructureViewer` data is passed to `RcsbFvSequence` all communication between panels is dne through the `StateManager`
 
 ## [2.3.7] - 2022-12-12
 ### Bug fix

cdn-examples/single-chain/index.js

@@ -49,8 +49,8 @@ var fvConfig = {
         includeAxis: true
     },
     rowConfig: rowConfig,
-    sequenceSelectionChangeCallback: function (plugin, selectorManager, sequenceRegion) {
-        selectorManager.clearSelection("select", { modelId: "1ash_model", labelAsymId: "A" });
+    sequenceSelectionChangeCallback: function (plugin, stateManager, sequenceRegion) {
+        stateManager.selectionState.clearSelection("select", { modelId: "1ash_model", labelAsymId: "A" });
         if (sequenceRegion.length > 0) {
             var regions = sequenceRegion.map(function (r) {
                 var _a;
@@ -60,7 +60,7 @@ var fvConfig = {
                     region: { begin: r.begin, end: (_a = r.end) !== null && _a !== void 0 ? _a : r.begin, source: "sequence" }
                 });
             });
-            selectorManager.addSelectionFromMultipleRegions(regions, "select");
+            stateManager.selectionState.addSelectionFromMultipleRegions(regions, "select");
             plugin.select(regions.map(function (r) { return (__assign(__assign({}, r), { begin: r.region.begin, end: r.region.end })); }), "select", "set");
         }
         else {
@@ -68,12 +68,12 @@ var fvConfig = {
             plugin.resetCamera();
         }
     },
-    sequenceElementClickCallback: function (plugin, selectorManager, d) {
+    sequenceElementClickCallback: function (plugin, stateManager, d) {
         var _a;
         if (d != null)
             plugin.cameraFocus("1ash_model", "A", d.begin, (_a = d.end) !== null && _a !== void 0 ? _a : d.begin);
     },
-    sequenceHoverCallback: function (plugin, selectorManager, elements) {
+    sequenceHoverCallback: function (plugin, stateManager, elements) {
         if (elements == null || elements.length == 0)
             plugin.clearSelection("hover");
         else

package-lock.json

@@ -12,7 +12,7 @@
         "@rcsb/rcsb-api-tools": "^4.1.1",
         "@rcsb/rcsb-molstar": "^2.5.11",
         "@rcsb/rcsb-saguaro": "^2.5.5",
-        "@rcsb/rcsb-saguaro-app": "file:../rcsb-saguaro-app/rcsb-rcsb-saguaro-app-4.6.0-data-provider.7.tgz",
+        "@rcsb/rcsb-saguaro-app": "^4.6.0-data-provider.8",
         "http-server": "^14.1.1",
         "molstar": "^3.29.0"
       },
@@ -1744,22 +1744,22 @@
       }
     },
     "node_modules/@emotion/babel-plugin": {
-      "version": "11.10.2",
-      "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.10.2.tgz",
-      "integrity": "sha512-xNQ57njWTFVfPAc3cjfuaPdsgLp5QOSuRsj9MA6ndEhH/AzuZM86qIQzt6rq+aGBwj3n5/TkLmU5lhAfdRmogA==",
+      "version": "11.10.5",
+      "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.10.5.tgz",
+      "integrity": "sha512-xE7/hyLHJac7D2Ve9dKroBBZqBT7WuPQmWcq7HSGb84sUuP4mlOWoB8dvVfD9yk5DHkU1m6RW7xSoDtnQHNQeA==",
       "dependencies": {
         "@babel/helper-module-imports": "^7.16.7",
         "@babel/plugin-syntax-jsx": "^7.17.12",
         "@babel/runtime": "^7.18.3",
         "@emotion/hash": "^0.9.0",
         "@emotion/memoize": "^0.8.0",
-        "@emotion/serialize": "^1.1.0",
+        "@emotion/serialize": "^1.1.1",
         "babel-plugin-macros": "^3.1.0",
         "convert-source-map": "^1.5.0",
         "escape-string-regexp": "^4.0.0",
         "find-root": "^1.1.0",
         "source-map": "^0.5.7",
-        "stylis": "4.0.13"
+        "stylis": "4.1.3"
       },
       "peerDependencies": {
         "@babel/core": "^7.0.0"
@@ -1777,15 +1777,15 @@
       }
     },
     "node_modules/@emotion/cache": {
-      "version": "11.10.3",
-      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.10.3.tgz",
-      "integrity": "sha512-Psmp/7ovAa8appWh3g51goxu/z3iVms7JXOreq136D8Bbn6dYraPnmL6mdM8GThEx9vwSn92Fz+mGSjBzN8UPQ==",
+      "version": "11.10.5",
+      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.10.5.tgz",
+      "integrity": "sha512-dGYHWyzTdmK+f2+EnIGBpkz1lKc4Zbj2KHd4cX3Wi8/OWr5pKslNjc3yABKH4adRGCvSX4VDC0i04mrrq0aiRA==",
       "dependencies": {
         "@emotion/memoize": "^0.8.0",
-        "@emotion/sheet": "^1.2.0",
+        "@emotion/sheet": "^1.2.1",
         "@emotion/utils": "^1.2.0",
         "@emotion/weak-memoize": "^0.3.0",
-        "stylis": "4.0.13"
+        "stylis": "4.1.3"
       }
     },
     "node_modules/@emotion/hash": {
@@ -1799,14 +1799,14 @@
       "integrity": "sha512-G/YwXTkv7Den9mXDO7AhLWkE3q+I92B+VqAE+dYG4NGPaHZGvt3G8Q0p9vmE+sq7rTGphUbAvmQ9YpbfMQGGlA=="
     },
     "node_modules/@emotion/react": {
-      "version": "11.10.4",
-      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.10.4.tgz",
-      "integrity": "sha512-j0AkMpr6BL8gldJZ6XQsQ8DnS9TxEQu1R+OGmDZiWjBAJtCcbt0tS3I/YffoqHXxH6MjgI7KdMbYKw3MEiU9eA==",
+      "version": "11.10.5",
+      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.10.5.tgz",
+      "integrity": "sha512-TZs6235tCJ/7iF6/rvTaOH4oxQg2gMAcdHemjwLKIjKz4rRuYe1HJ2TQJKnAcRAfOUDdU8XoDadCe1rl72iv8A==",
       "dependencies": {
         "@babel/runtime": "^7.18.3",
-        "@emotion/babel-plugin": "^11.10.0",
-        "@emotion/cache": "^11.10.0",
-        "@emotion/serialize": "^1.1.0",
+        "@emotion/babel-plugin": "^11.10.5",
+        "@emotion/cache": "^11.10.5",
+        "@emotion/serialize": "^1.1.1",
         "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0",
         "@emotion/utils": "^1.2.0",
         "@emotion/weak-memoize": "^0.3.0",
@@ -1826,9 +1826,9 @@
       }
     },
     "node_modules/@emotion/serialize": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.1.0.tgz",
-      "integrity": "sha512-F1ZZZW51T/fx+wKbVlwsfchr5q97iW8brAnXmsskz4d0hVB4O3M/SiA3SaeH06x02lSNzkkQv+n3AX3kCXKSFA==",
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.1.1.tgz",
+      "integrity": "sha512-Zl/0LFggN7+L1liljxXdsVSVlg6E/Z/olVWpfxUTxOAmi8NU7YoeWeLfi1RmnB2TATHoaWwIBRoL+FvAJiTUQA==",
       "dependencies": {
         "@emotion/hash": "^0.9.0",
         "@emotion/memoize": "^0.8.0",
@@ -1838,9 +1838,9 @@
       }
     },
     "node_modules/@emotion/sheet": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.2.0.tgz",
-      "integrity": "sha512-OiTkRgpxescko+M51tZsMq7Puu/KP55wMT8BgpcXVG2hqXc0Vo0mfymJ/Uj24Hp0i083ji/o0aLddh08UEjq8w=="
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.2.1.tgz",
+      "integrity": "sha512-zxRBwl93sHMsOj4zs+OslQKg/uhF38MB+OMKoCrVuS0nyTkqnau+BM3WGEoOptg9Oz45T/aIGs1qbVAsEFo3nA=="
     },
     "node_modules/@emotion/unitless": {
       "version": "0.8.0",
@@ -1866,16 +1866,16 @@
       "integrity": "sha512-AHPmaAx+RYfZz0eYu6Gviiagpmiyw98ySSlQvCUhVGDRtDFe4DBS0x1bSjdF3gqUDYOczB+yYvBTtEylYSdRhg=="
     },
     "node_modules/@floating-ui/core": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.0.1.tgz",
-      "integrity": "sha512-bO37brCPfteXQfFY0DyNDGB3+IMe4j150KFQcgJ5aBP295p9nBGeHEs/p0czrRbtlHq4Px/yoPXO/+dOCcF4uA=="
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.2.0.tgz",
+      "integrity": "sha512-GHUXPEhMEmTpnpIfesFA2KAoMJPb1SPQw964tToQwt+BbGXdhqTCWT1rOb0VURGylsxsYxiGMnseJ3IlclVpVA=="
     },
     "node_modules/@floating-ui/dom": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.0.2.tgz",
-      "integrity": "sha512-5X9WSvZ8/fjy3gDu8yx9HAA4KG1lazUN2P4/VnaXLxTO9Dz53HI1oYoh1OlhqFNlHgGDiwFX5WhFCc2ljbW3yA==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.2.0.tgz",
+      "integrity": "sha512-QXzg57o1cjLz3cGETzKXjI3kx1xyS49DW9l7kV2jw2c8Yftd434t2hllX0sVGn2Q8MtcW/4pNm8bfE1/4n6mng==",
       "dependencies": {
-        "@floating-ui/core": "^1.0.1"
+        "@floating-ui/core": "^1.2.0"
       }
     },
     "node_modules/@graphql-codegen/cli": {
@@ -2855,10 +2855,9 @@
       }
     },
     "node_modules/@rcsb/rcsb-saguaro-app": {
-      "version": "4.6.0-data-provider.7",
-      "resolved": "file:../rcsb-saguaro-app/rcsb-rcsb-saguaro-app-4.6.0-data-provider.7.tgz",
-      "integrity": "sha512-WvAXt2j0SsmLGth/rMGEfqvKre+yol0TMBv5xwahM22iqOVfo8TFB6FYfWhTzzIywhWmDH7wN++Ui/kmz9hclg==",
-      "license": "MIT",
+      "version": "4.6.0-data-provider.8",
+      "resolved": "https://registry.npmjs.org/@rcsb/rcsb-saguaro-app/-/rcsb-saguaro-app-4.6.0-data-provider.8.tgz",
+      "integrity": "sha512-aP3nF65Ue8uJJnB346WCT/a0cySRPWxLLNFPb4AXalfCefLAQLsfTqvZwDrHGLneU1LNnmQYxUjCnYKNT3LDMQ==",
       "dependencies": {
         "@rcsb/rcsb-api-tools": "^4.1.1",
         "@rcsb/rcsb-charts": "^0.0.1",
@@ -8474,9 +8473,9 @@
       }
     },
     "node_modules/memoize-one": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz",
-      "integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q=="
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-6.0.0.tgz",
+      "integrity": "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw=="
     },
     "node_modules/meow": {
       "version": "10.1.3",
@@ -9834,16 +9833,16 @@
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
     "node_modules/react-select": {
-      "version": "5.5.0",
-      "resolved": "https://registry.npmjs.org/react-select/-/react-select-5.5.0.tgz",
-      "integrity": "sha512-yzA+eavdxpF5Onf0u9KZ84qxr8r/CwPPn777bRkslbDtEUYx2+m13OrhP3WVa30+aWYxwkO/pkLcZ7q7r/6OhQ==",
+      "version": "5.7.0",
+      "resolved": "https://registry.npmjs.org/react-select/-/react-select-5.7.0.tgz",
+      "integrity": "sha512-lJGiMxCa3cqnUr2Jjtg9YHsaytiZqeNOKeibv6WF5zbK/fPegZ1hg3y/9P1RZVLhqBTs0PfqQLKuAACednYGhQ==",
       "dependencies": {
         "@babel/runtime": "^7.12.0",
         "@emotion/cache": "^11.4.0",
         "@emotion/react": "^11.8.1",
         "@floating-ui/dom": "^1.0.1",
         "@types/react-transition-group": "^4.4.0",
-        "memoize-one": "^5.0.0",
+        "memoize-one": "^6.0.0",
         "prop-types": "^15.6.0",
         "react-transition-group": "^4.3.0",
         "use-isomorphic-layout-effect": "^1.1.2"
@@ -11032,9 +11031,9 @@
       }
     },
     "node_modules/stylis": {
-      "version": "4.0.13",
-      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.0.13.tgz",
-      "integrity": "sha512-xGPXiFVl4YED9Jh7Euv2V220mriG9u4B2TA6Ybjc1catrstKD2PpIdU3U0RKpkVBC2EhmL/F0sPCr9vrFTNRag=="
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.1.3.tgz",
+      "integrity": "sha512-GP6WDNWf+o403jrEp9c5jibKavrtLW+/qYGhFxFrG8maXhwTBI7gLLhiBb0o7uFccWN+EOS9aMO6cGHWAO07OA=="
     },
     "node_modules/supports-color": {
       "version": "5.5.0",
@@ -13532,22 +13531,22 @@
       "dev": true
     },
     "@emotion/babel-plugin": {
-      "version": "11.10.2",
-      "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.10.2.tgz",
-      "integrity": "sha512-xNQ57njWTFVfPAc3cjfuaPdsgLp5QOSuRsj9MA6ndEhH/AzuZM86qIQzt6rq+aGBwj3n5/TkLmU5lhAfdRmogA==",
+      "version": "11.10.5",
+      "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.10.5.tgz",
+      "integrity": "sha512-xE7/hyLHJac7D2Ve9dKroBBZqBT7WuPQmWcq7HSGb84sUuP4mlOWoB8dvVfD9yk5DHkU1m6RW7xSoDtnQHNQeA==",
       "requires": {
         "@babel/helper-module-imports": "^7.16.7",
         "@babel/plugin-syntax-jsx": "^7.17.12",
         "@babel/runtime": "^7.18.3",
         "@emotion/hash": "^0.9.0",
         "@emotion/memoize": "^0.8.0",
-        "@emotion/serialize": "^1.1.0",
+        "@emotion/serialize": "^1.1.1",
         "babel-plugin-macros": "^3.1.0",
         "convert-source-map": "^1.5.0",
         "escape-string-regexp": "^4.0.0",
         "find-root": "^1.1.0",
         "source-map": "^0.5.7",
-        "stylis": "4.0.13"
+        "stylis": "4.1.3"
       },
       "dependencies": {
         "escape-string-regexp": {
@@ -13558,15 +13557,15 @@
       }
     },
     "@emotion/cache": {
-      "version": "11.10.3",
-      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.10.3.tgz",
-      "integrity": "sha512-Psmp/7ovAa8appWh3g51goxu/z3iVms7JXOreq136D8Bbn6dYraPnmL6mdM8GThEx9vwSn92Fz+mGSjBzN8UPQ==",
+      "version": "11.10.5",
+      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.10.5.tgz",
+      "integrity": "sha512-dGYHWyzTdmK+f2+EnIGBpkz1lKc4Zbj2KHd4cX3Wi8/OWr5pKslNjc3yABKH4adRGCvSX4VDC0i04mrrq0aiRA==",
       "requires": {
         "@emotion/memoize": "^0.8.0",
-        "@emotion/sheet": "^1.2.0",
+        "@emotion/sheet": "^1.2.1",
         "@emotion/utils": "^1.2.0",
         "@emotion/weak-memoize": "^0.3.0",
-        "stylis": "4.0.13"
+        "stylis": "4.1.3"
       }
     },
     "@emotion/hash": {
@@ -13580,14 +13579,14 @@
       "integrity": "sha512-G/YwXTkv7Den9mXDO7AhLWkE3q+I92B+VqAE+dYG4NGPaHZGvt3G8Q0p9vmE+sq7rTGphUbAvmQ9YpbfMQGGlA=="
     },
     "@emotion/react": {
-      "version": "11.10.4",
-      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.10.4.tgz",
-      "integrity": "sha512-j0AkMpr6BL8gldJZ6XQsQ8DnS9TxEQu1R+OGmDZiWjBAJtCcbt0tS3I/YffoqHXxH6MjgI7KdMbYKw3MEiU9eA==",
+      "version": "11.10.5",
+      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.10.5.tgz",
+      "integrity": "sha512-TZs6235tCJ/7iF6/rvTaOH4oxQg2gMAcdHemjwLKIjKz4rRuYe1HJ2TQJKnAcRAfOUDdU8XoDadCe1rl72iv8A==",
       "requires": {
         "@babel/runtime": "^7.18.3",
-        "@emotion/babel-plugin": "^11.10.0",
-        "@emotion/cache": "^11.10.0",
-        "@emotion/serialize": "^1.1.0",
+        "@emotion/babel-plugin": "^11.10.5",
+        "@emotion/cache": "^11.10.5",
+        "@emotion/serialize": "^1.1.1",
         "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0",
         "@emotion/utils": "^1.2.0",
         "@emotion/weak-memoize": "^0.3.0",
@@ -13595,9 +13594,9 @@
       }
     },
     "@emotion/serialize": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.1.0.tgz",
-      "integrity": "sha512-F1ZZZW51T/fx+wKbVlwsfchr5q97iW8brAnXmsskz4d0hVB4O3M/SiA3SaeH06x02lSNzkkQv+n3AX3kCXKSFA==",
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.1.1.tgz",
+      "integrity": "sha512-Zl/0LFggN7+L1liljxXdsVSVlg6E/Z/olVWpfxUTxOAmi8NU7YoeWeLfi1RmnB2TATHoaWwIBRoL+FvAJiTUQA==",
       "requires": {
         "@emotion/hash": "^0.9.0",
         "@emotion/memoize": "^0.8.0",
@@ -13607,9 +13606,9 @@
       }
     },
     "@emotion/sheet": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.2.0.tgz",
-      "integrity": "sha512-OiTkRgpxescko+M51tZsMq7Puu/KP55wMT8BgpcXVG2hqXc0Vo0mfymJ/Uj24Hp0i083ji/o0aLddh08UEjq8w=="
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.2.1.tgz",
+      "integrity": "sha512-zxRBwl93sHMsOj4zs+OslQKg/uhF38MB+OMKoCrVuS0nyTkqnau+BM3WGEoOptg9Oz45T/aIGs1qbVAsEFo3nA=="
     },
     "@emotion/unitless": {
       "version": "0.8.0",
@@ -13633,16 +13632,16 @@
       "integrity": "sha512-AHPmaAx+RYfZz0eYu6Gviiagpmiyw98ySSlQvCUhVGDRtDFe4DBS0x1bSjdF3gqUDYOczB+yYvBTtEylYSdRhg=="
     },
     "@floating-ui/core": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.0.1.tgz",
-      "integrity": "sha512-bO37brCPfteXQfFY0DyNDGB3+IMe4j150KFQcgJ5aBP295p9nBGeHEs/p0czrRbtlHq4Px/yoPXO/+dOCcF4uA=="
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.2.0.tgz",
+      "integrity": "sha512-GHUXPEhMEmTpnpIfesFA2KAoMJPb1SPQw964tToQwt+BbGXdhqTCWT1rOb0VURGylsxsYxiGMnseJ3IlclVpVA=="
     },
     "@floating-ui/dom": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.0.2.tgz",
-      "integrity": "sha512-5X9WSvZ8/fjy3gDu8yx9HAA4KG1lazUN2P4/VnaXLxTO9Dz53HI1oYoh1OlhqFNlHgGDiwFX5WhFCc2ljbW3yA==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.2.0.tgz",
+      "integrity": "sha512-QXzg57o1cjLz3cGETzKXjI3kx1xyS49DW9l7kV2jw2c8Yftd434t2hllX0sVGn2Q8MtcW/4pNm8bfE1/4n6mng==",
       "requires": {
-        "@floating-ui/core": "^1.0.1"
+        "@floating-ui/core": "^1.2.0"
       }
     },
     "@graphql-codegen/cli": {
@@ -14429,8 +14428,9 @@
       }
     },
     "@rcsb/rcsb-saguaro-app": {
-      "version": "file:../rcsb-saguaro-app/rcsb-rcsb-saguaro-app-4.6.0-data-provider.7.tgz",
-      "integrity": "sha512-WvAXt2j0SsmLGth/rMGEfqvKre+yol0TMBv5xwahM22iqOVfo8TFB6FYfWhTzzIywhWmDH7wN++Ui/kmz9hclg==",
+      "version": "4.6.0-data-provider.8",
+      "resolved": "https://registry.npmjs.org/@rcsb/rcsb-saguaro-app/-/rcsb-saguaro-app-4.6.0-data-provider.8.tgz",
+      "integrity": "sha512-aP3nF65Ue8uJJnB346WCT/a0cySRPWxLLNFPb4AXalfCefLAQLsfTqvZwDrHGLneU1LNnmQYxUjCnYKNT3LDMQ==",
       "requires": {
         "@rcsb/rcsb-api-tools": "^4.1.1",
         "@rcsb/rcsb-charts": "^0.0.1",
@@ -18690,9 +18690,9 @@
       }
     },
     "memoize-one": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz",
-      "integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q=="
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-6.0.0.tgz",
+      "integrity": "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw=="
     },
     "meow": {
       "version": "10.1.3",
@@ -19660,16 +19660,16 @@
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
     "react-select": {
-      "version": "5.5.0",
-      "resolved": "https://registry.npmjs.org/react-select/-/react-select-5.5.0.tgz",
-      "integrity": "sha512-yzA+eavdxpF5Onf0u9KZ84qxr8r/CwPPn777bRkslbDtEUYx2+m13OrhP3WVa30+aWYxwkO/pkLcZ7q7r/6OhQ==",
+      "version": "5.7.0",
+      "resolved": "https://registry.npmjs.org/react-select/-/react-select-5.7.0.tgz",
+      "integrity": "sha512-lJGiMxCa3cqnUr2Jjtg9YHsaytiZqeNOKeibv6WF5zbK/fPegZ1hg3y/9P1RZVLhqBTs0PfqQLKuAACednYGhQ==",
       "requires": {
         "@babel/runtime": "^7.12.0",
         "@emotion/cache": "^11.4.0",
         "@emotion/react": "^11.8.1",
         "@floating-ui/dom": "^1.0.1",
         "@types/react-transition-group": "^4.4.0",
-        "memoize-one": "^5.0.0",
+        "memoize-one": "^6.0.0",
         "prop-types": "^15.6.0",
         "react-transition-group": "^4.3.0",
         "use-isomorphic-layout-effect": "^1.1.2"
@@ -20575,9 +20575,9 @@
       "requires": {}
     },
     "stylis": {
-      "version": "4.0.13",
-      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.0.13.tgz",
-      "integrity": "sha512-xGPXiFVl4YED9Jh7Euv2V220mriG9u4B2TA6Ybjc1catrstKD2PpIdU3U0RKpkVBC2EhmL/F0sPCr9vrFTNRag=="
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.1.3.tgz",
+      "integrity": "sha512-GP6WDNWf+o403jrEp9c5jibKavrtLW+/qYGhFxFrG8maXhwTBI7gLLhiBb0o7uFccWN+EOS9aMO6cGHWAO07OA=="
     },
     "supports-color": {
       "version": "5.5.0",

package.json

@@ -86,7 +86,7 @@
     "@rcsb/rcsb-api-tools": "^4.1.1",
     "@rcsb/rcsb-molstar": "^2.5.11",
     "@rcsb/rcsb-saguaro": "^2.5.5",
-    "@rcsb/rcsb-saguaro-app": "file:../rcsb-saguaro-app/rcsb-rcsb-saguaro-app-4.6.0-data-provider.7.tgz",
+    "@rcsb/rcsb-saguaro-app": "^4.6.0-data-provider.8",
     "http-server": "^14.1.1",
     "molstar": "^3.29.0"
   },

src/RcsbFv3D/RcsbFv3DAbstract.tsx

@@ -8,13 +8,11 @@ import {PluginContext} from "molstar/lib/mol-plugin/context";
 import {CSSProperties} from "react";
 import {StructureViewerInterface} from "../RcsbFvStructure/StructureViewerInterface";
 import {StructureViewerBehaviourObserverInterface} from "../RcsbFvStructure/StructureViewerBehaviourInterface";
-import {RcsbFvStateManager} from "../RcsbFvState/RcsbFvStateManager";
-import {RcsbFvStateInterface} from "../RcsbFvState/RcsbFvStateInterface";
 
 export interface RcsbFv3DAbstractInterface<T,R,L,S,U> {
     elementId: string;
     cssConfig?: RcsbFv3DCssConfig;
-    sequenceConfig: RcsbFvSequenceInterface<T,R,L,U>;
+    sequenceConfig: RcsbFvSequenceInterface<T,U>;
     structureConfig: RcsbFvStructureConfigInterface<R,S>;
     structureViewer: StructureViewerInterface<R,L,S>;
     structureViewerBehaviourObserver: StructureViewerBehaviourObserverInterface<R,L>;
@@ -27,8 +25,8 @@ export abstract class RcsbFv3DAbstract<T,R,L,S,U> {
     private readonly structureConfig: RcsbFvStructureConfigInterface<R,S>;
     private readonly structureViewer: StructureViewerInterface<R,L,S>;
     private readonly structureViewerBehaviourObserver: StructureViewerBehaviourObserverInterface<R,L>;
-    private readonly sequenceConfig: RcsbFvSequenceInterface<T,R,L,U>;
-    private readonly ctxManager: RcsbFvContextManager<T,R,L,S,U> = new RcsbFvContextManager<T,R,L,S,U>();
+    private readonly sequenceConfig: RcsbFvSequenceInterface<T,U>;
+    private readonly ctxManager: RcsbFvContextManager<T,R,S,U> = new RcsbFvContextManager<T,R,S,U>();
     private fullScreenFlag: boolean = false;
     private overflowStyle: string = "";
     private readonly cssConfig:{
@@ -83,8 +81,8 @@ export abstract class RcsbFv3DAbstract<T,R,L,S,U> {
         }
     }
 
-    public updateConfig(config: {structurePanelConfig?: Partial<RcsbFvStructureConfigInterface<R,S>>; sequencePanelConfig?: Partial<RcsbFvSequenceInterface<T,R,L,U>>;}){
-        this.ctxManager.next({eventType: EventType.UPDATE_CONFIG, eventData:config});
+    public updateConfig(config: {structurePanelConfig?: Partial<RcsbFvStructureConfigInterface<R,S>>; sequencePanelConfig?: Partial<RcsbFvSequenceInterface<T,U>>;}){
+        this.ctxManager.next({eventType: EventType.UPDATE_CONFIG, eventData: config});
     }
 
     public pluginCall(f: (plugin: PluginContext) => void){

src/RcsbFv3D/RcsbFv3DAlignmentProvider.tsx

@@ -75,7 +75,6 @@ export class RcsbFv3DAlignmentProvider extends RcsbFv3DAbstract<
         super({
             elementId,
             sequenceConfig:{
-                type: "rcsb",
                 title: params.config.title,
                 subtitle: params.config.subtitle,
                 config:{
@@ -88,8 +87,8 @@ export class RcsbFv3DAlignmentProvider extends RcsbFv3DAbstract<
                         alignmentResponseContainer
                     },
                     buildPfvOnMount: true,
-                    pfvManagerFactory: new MsaPfvManagerFactory<[RcsbModuleDataProviderInterface],AlignmentLoadMolstarType,LoadMolstarReturnType>(),
-                    callbackManagerFactory: new MsaCallbackManagerFactory<AlignmentLoadMolstarType|undefined, LoadMolstarReturnType, {context:{id:string} & Partial<PolymerEntityInstanceInterface>}>({
+                    pfvManagerFactory: new MsaPfvManagerFactory<[RcsbModuleDataProviderInterface]>(),
+                    callbackManagerFactory: new MsaCallbackManagerFactory<{context:{id:string} & Partial<PolymerEntityInstanceInterface>}>({
                         pluginLoadParamsDefinition,
                         alignmentResponseContainer
                     }),

src/RcsbFv3D/RcsbFv3DAssembly.tsx

@@ -28,6 +28,9 @@ import {AssemblyBehaviourObserver} from "../RcsbFvStructure/StructureViewerBehav
 import {HelpLinkComponent} from "../RcsbFvSequence/SequenceViews/RcsbView/Components/HelpLinkComponent";
 import {MolstarTools} from "../RcsbFvStructure/StructureViewers/MolstarViewer/MolstarUtils/MolstarTools";
 import getModelIdFromTrajectory = MolstarTools.getModelIdFromTrajectory;
+import {
+    MolstarAssemblyLoader
+} from "../RcsbFvStructure/StructureViewers/MolstarViewer/MolstarUtils/MolstarAssemblyLoader";
 
 type RcsbFv3DAssemblyAdditionalConfig = RcsbFvAdditionalConfig & {operatorChangeCallback?:(operatorInfo: OperatorInfo)=>void};
 
@@ -60,7 +63,6 @@ export class RcsbFv3DAssembly extends RcsbFv3DAbstract<
         super({
             elementId: params.elementId ?? elementId,
             sequenceConfig:{
-                type:"rcsb",
                 title: params.config.title,
                 subtitle: params.config.subtitle,
                 config:{
@@ -71,7 +73,7 @@ export class RcsbFv3DAssembly extends RcsbFv3DAbstract<
                         instanceSequenceConfig:params.instanceSequenceConfig
                     },
                     pfvManagerFactory: new AssemblyPfvManagerFactory(),
-                    callbackManagerFactory: new AssemblyCallbackManagerFactory<AssemblyLoadMolstarType,LoadMolstarReturnType>(),
+                    callbackManagerFactory: new AssemblyCallbackManagerFactory(),
                     additionalContent:(props)=>(<HelpLinkComponent {...props} helpHref={"/docs/sequence-viewers/3d-protein-feature-view"}/>)
                 }
             },
@@ -86,18 +88,12 @@ export class RcsbFv3DAssembly extends RcsbFv3DAbstract<
                 LoadMolstarReturnType,
                 {viewerElement:string|HTMLElement,viewerProps:Partial<ViewerProps>}
             >(new MolstarManagerFactory(getModelIdFromTrajectory)),
-            structureViewerBehaviourObserver: new AssemblyBehaviourObserver<AssemblyLoadMolstarType,LoadMolstarReturnType>({
-                loadMethod: LoadMethod.loadPdbId,
-                loadParams: {
+            structureViewerBehaviourObserver: new AssemblyBehaviourObserver<AssemblyLoadMolstarType,LoadMolstarReturnType>(
+                new MolstarAssemblyLoader({
                     entryId: params.config.entryId,
-                    id: params.config.entryId,
-                    reprProvider: AssemblyTrajectoryPresetProvider,
-                    params: {
-                        assemblyId: typeof (params.config.assemblyId) === "string" && params.config.assemblyId?.length > 0 ? params.config.assemblyId : '1',
-                        modelIndex: 0
-                    }
-                }
-            }),
+                    assemblyId: typeof (params.config.assemblyId) === "string" && params.config.assemblyId?.length > 0 ? params.config.assemblyId : '1'
+                })
+            ),
             cssConfig: params.cssConfig
         });
     }

src/RcsbFv3D/RcsbFv3DComponent.tsx

@@ -18,6 +18,7 @@ import {CSSProperties, MouseEvent} from "react";
 import {StructureViewerBehaviourObserverInterface} from "../RcsbFvStructure/StructureViewerBehaviourInterface";
 import {RcsbFvStateInterface} from "../RcsbFvState/RcsbFvStateInterface";
 import {RcsbFvStateManager} from "../RcsbFvState/RcsbFvStateManager";
+import {RcsbFvCustomSequenceInterface} from "../RcsbFvSequence/RcsbFvCustomSequence";
 
 export interface RcsbFv3DCssConfig {
     overwriteCss?: boolean;
@@ -28,9 +29,9 @@ export interface RcsbFv3DCssConfig {
 
 export interface RcsbFv3DComponentInterface<T,R,L,S,U> {
     structurePanelConfig:RcsbFvStructureConfigInterface<R,S>;
-    sequencePanelConfig: RcsbFvSequenceInterface<T,R,L,U>;
+    sequencePanelConfig: RcsbFvSequenceInterface<T,U>;
     id: string;
-    ctxManager: RcsbFvContextManager<T,R,L,S,U>;
+    ctxManager: RcsbFvContextManager<T,R,S,U>;
     cssConfig?:RcsbFv3DCssConfig;
     unmount:(flag:boolean)=>void;
     fullScreen: boolean;
@@ -38,19 +39,19 @@ export interface RcsbFv3DComponentInterface<T,R,L,S,U> {
     structureViewerBehaviourObserver: StructureViewerBehaviourObserverInterface<R,L>;
 }
 
-interface RcsbFv3DComponentState<T,R,L,S,U> {
+interface RcsbFv3DComponentState<T,R,S,U> {
     structurePanelConfig:RcsbFvStructureConfigInterface<R,S>;
-    sequencePanelConfig:RcsbFvSequenceInterface<T,R,L,U>;
+    sequencePanelConfig:RcsbFvSequenceInterface<T,U>;
     pfvScreenFraction: number;
 }
 
-export class RcsbFv3DComponent<T,R,L,S,U> extends React.Component <RcsbFv3DComponentInterface<T,R,L,S,U>, RcsbFv3DComponentState<T,R,L,S,U>> {
+export class RcsbFv3DComponent<T,R,L,S,U> extends React.Component <RcsbFv3DComponentInterface<T,R,L,S,U>, RcsbFv3DComponentState<T,R,S,U>> {
 
     private readonly stateManager: RcsbFvStateInterface = new RcsbFvStateManager();
     private subscription: Subscription;
     private readonly ROOT_DIV_ID: string = "rootPanelDiv";
 
-    readonly state: RcsbFv3DComponentState<T,R,L,S,U> = {
+    readonly state: RcsbFv3DComponentState<T,R,S,U> = {
         structurePanelConfig: this.props.structurePanelConfig,
         sequencePanelConfig: this.props.sequencePanelConfig,
         pfvScreenFraction: 0.55
@@ -76,11 +77,9 @@ export class RcsbFv3DComponent<T,R,L,S,U> extends React.Component <RcsbFv3DCompo
                         />
                     </div>
                     <div style={this.sequenceCssConfig(this.props.cssConfig?.sequencePanel)}  >
-                        <RcsbFvSequence<T,R,L,U>
-                            type={this.state.sequencePanelConfig.type}
+                        <RcsbFvSequence<T,U>
                             config={this.state.sequencePanelConfig.config}
                             componentId={this.props.id}
-                            structureViewer={this.props.structureViewer}
                             stateManager={this.stateManager}
                             title={this.state.sequencePanelConfig.title}
                             subtitle={this.state.sequencePanelConfig.subtitle}
@@ -104,7 +103,7 @@ export class RcsbFv3DComponent<T,R,L,S,U> extends React.Component <RcsbFv3DCompo
     }
 
     private useDefaultCss(): boolean {
-       return this.state.sequencePanelConfig.type === "rcsb"  || !this.props.cssConfig?.overwriteCss;
+       return !this.props.cssConfig?.overwriteCss;
     }
 
     private panelDelimiter(): JSX.Element {
@@ -138,9 +137,9 @@ export class RcsbFv3DComponent<T,R,L,S,U> extends React.Component <RcsbFv3DCompo
     }
 
     private subscribe(): Subscription{
-        return this.props.ctxManager.subscribe((obj:RcsbFvContextManagerInterface<T,R,L,S,U>)=>{
+        return this.props.ctxManager.subscribe((obj:RcsbFvContextManagerInterface<T,R,S,U>)=>{
             if(obj.eventType == EventType.UPDATE_CONFIG){
-                this.updateConfig(obj.eventData as UpdateConfigInterface<T,R,L,S,U>)
+                this.updateConfig(obj.eventData as UpdateConfigInterface<T,R,S,U>)
             }else if(obj.eventType == EventType.PLUGIN_CALL){
                 this.props.structureViewer.pluginCall(obj.eventData as ((f:PluginContext)=>void));
             }
@@ -152,9 +151,9 @@ export class RcsbFv3DComponent<T,R,L,S,U> extends React.Component <RcsbFv3DCompo
         this.subscription.unsubscribe();
     }
 
-    private updateConfig(config:UpdateConfigInterface<T,R,L,S,U>){
+    private updateConfig(config:UpdateConfigInterface<T,R,S,U>){
         const structureConfig: Partial<RcsbFvStructureConfigInterface<R,S>> | undefined = config.structurePanelConfig;
-        const sequenceConfig: Partial<RcsbFvSequenceInterface<T,R,L,U>> | undefined = config.sequencePanelConfig;
+        const sequenceConfig: Partial<RcsbFvSequenceInterface<T,U>> | undefined = config.sequencePanelConfig;
         if(structureConfig != null && sequenceConfig != null){
             this.setState({structurePanelConfig:{...this.state.structurePanelConfig, ...structureConfig}, sequencePanelConfig:{...this.state.sequencePanelConfig, ...sequenceConfig}});
         }else if(structureConfig != null){

src/RcsbFv3D/RcsbFv3DCustom.tsx

@@ -14,12 +14,13 @@ import {RcsbFv3DCssConfig} from "./RcsbFv3DComponent";
 import {NullBehaviourObserver} from "../RcsbFvStructure/StructureViewerBehaviour/NullBehaviour";
 import {MolstarTools} from "../RcsbFvStructure/StructureViewers/MolstarViewer/MolstarUtils/MolstarTools";
 import getModelIdFromTrajectory = MolstarTools.getModelIdFromTrajectory;
+import {RcsbFv3DCustomAbstract} from "./RcsbFv3DCustomAbstract";
 
 export interface RcsbFv3DCustomInterface  {
     elementId?: string;
-    structurePanelConfig: RcsbFvStructureConfigInterface<LoadMolstarInterface<undefined,undefined>,{viewerProps:Partial<ViewerProps>}>;
+    structurePanelConfig: RcsbFvStructureConfigInterface<LoadMolstarInterface<unknown,unknown>,{viewerProps:Partial<ViewerProps>}>;
     sequencePanelConfig: {
-        config: CustomViewInterface<LoadMolstarInterface<undefined,undefined>,LoadMolstarReturnType>;
+        config: CustomViewInterface<LoadMolstarInterface<unknown,unknown>,LoadMolstarReturnType>;
         title?: string;
         subtitle?: string;
     }
@@ -27,7 +28,7 @@ export interface RcsbFv3DCustomInterface  {
 
 }
 
-export class RcsbFv3DCustom extends RcsbFv3DAbstract<{},LoadMolstarInterface<undefined,undefined>,LoadMolstarReturnType,{viewerElement:string|HTMLElement,viewerProps:Partial<ViewerProps>},undefined> {
+export class RcsbFv3DCustom extends RcsbFv3DCustomAbstract<LoadMolstarInterface<unknown,unknown>,LoadMolstarReturnType,{viewerElement:string|HTMLElement,viewerProps:Partial<ViewerProps>}> {
 
     constructor(params: RcsbFv3DCustomInterface) {
         const elementId: string = params.elementId ?? uniqid("RcsbFv3D_");
@@ -42,14 +43,13 @@ export class RcsbFv3DCustom extends RcsbFv3DAbstract<{},LoadMolstarInterface<und
             },
             sequenceConfig:{
                 ...params.sequencePanelConfig,
-                type:"custom",
             },
             structureViewer:new StructureViewer<
-                LoadMolstarInterface<undefined,undefined>,
+                LoadMolstarInterface<unknown,unknown>,
                 LoadMolstarReturnType,
                 {viewerElement:string|HTMLElement,viewerProps:Partial<ViewerProps>}
-            >( new MolstarManagerFactory(()=>undefined) ),
-            structureViewerBehaviourObserver: new NullBehaviourObserver<LoadMolstarInterface<undefined,undefined>,LoadMolstarReturnType>(),
+            >( new MolstarManagerFactory(getModelIdFromTrajectory) ),
+            structureViewerBehaviourObserver: new NullBehaviourObserver<LoadMolstarInterface<unknown,unknown>,LoadMolstarReturnType>(),
             cssConfig: params.cssConfig
         });
     }

src/RcsbFv3D/RcsbFv3DCustomAbstract.tsx

@@ -0,0 +1,110 @@
+import * as React from "react";
+import {createRoot, Root} from "react-dom/client";
+import {RcsbFv3DComponent, RcsbFv3DCssConfig} from './RcsbFv3DComponent';
+import {RcsbFvStructureConfigInterface} from "../RcsbFvStructure/RcsbFvStructure";
+import {RcsbFvSequenceInterface} from "../RcsbFvSequence/RcsbFvSequence";
+import {EventType, RcsbFvContextManager} from "../RcsbFvContextManager/RcsbFvContextManager";
+import {PluginContext} from "molstar/lib/mol-plugin/context";
+import {CSSProperties} from "react";
+import {StructureViewerInterface} from "../RcsbFvStructure/StructureViewerInterface";
+import {StructureViewerBehaviourObserverInterface} from "../RcsbFvStructure/StructureViewerBehaviourInterface";
+import {RcsbFvCustomSequenceInterface} from "../RcsbFvSequence/RcsbFvCustomSequence";
+import {RcsbFvCustomContextManager} from "../RcsbFvContextManager/RcsbFvCustomContextManager";
+import {RcsbFv3DCustomComponent} from "./RcsbFv3DCustomComponent";
+
+export interface RcsbFv3DCustomAbstractInterface<R,L,S> {
+    elementId: string;
+    cssConfig?: RcsbFv3DCssConfig;
+    sequenceConfig: RcsbFvCustomSequenceInterface<R,L>;
+    structureConfig: RcsbFvStructureConfigInterface<R,S>;
+    structureViewer: StructureViewerInterface<R,L,S>;
+    structureViewerBehaviourObserver: StructureViewerBehaviourObserverInterface<R,L>;
+}
+
+export abstract class RcsbFv3DCustomAbstract<R,L,S> {
+
+    private readonly elementId: string;
+    private reactRoot: Root;
+    private readonly structureConfig: RcsbFvStructureConfigInterface<R,S>;
+    private readonly structureViewer: StructureViewerInterface<R,L,S>;
+    private readonly structureViewerBehaviourObserver: StructureViewerBehaviourObserverInterface<R,L>;
+    private readonly sequenceConfig: RcsbFvCustomSequenceInterface<R,L>;
+    private readonly ctxManager: RcsbFvCustomContextManager<R,L,S> = new RcsbFvCustomContextManager<R,L,S>();
+    private fullScreenFlag: boolean = false;
+    private overflowStyle: string = "";
+    private readonly cssConfig:{
+        rootPanel?: CSSProperties,
+        structurePanel?: CSSProperties,
+        sequencePanel?: CSSProperties
+    } | undefined;
+
+    protected constructor(config: RcsbFv3DCustomAbstractInterface<R,L,S>) {
+       this.elementId = config.elementId;
+       if(config.cssConfig) this.cssConfig = config.cssConfig;
+       this.sequenceConfig = config.sequenceConfig;
+       this.structureConfig = config.structureConfig;
+       this.structureViewer = config.structureViewer;
+       this.structureViewerBehaviourObserver = config.structureViewerBehaviourObserver;
+    }
+
+    public render(): void{
+        if(this.elementId == null )
+            throw "HTML element not found";
+        const element: HTMLElement = document.getElementById(this.elementId) ?? document.createElement<"div">("div");
+        if(element.getAttribute("id") == null) {
+            element.setAttribute("id", this.elementId);
+            document.body.append(element);
+            this.fullScreen("on");
+        }
+        this.reactRoot = createRoot(element);
+        this.reactRoot.render(
+            <RcsbFv3DCustomComponent<R,L,S>
+                structurePanelConfig={this.structureConfig}
+                sequencePanelConfig={this.sequenceConfig}
+                id={this.elementId}
+                ctxManager={this.ctxManager}
+                cssConfig={this.cssConfig}
+                unmount={this.unmount.bind(this)}
+                fullScreen={this.fullScreenFlag}
+                structureViewer={this.structureViewer}
+                structureViewerBehaviourObserver={this.structureViewerBehaviourObserver}
+            />);
+    }
+
+    public unmount(removeHtmlElement?:boolean, unmountCallback?:()=>{}): void{
+        const element: HTMLElement | null = document.getElementById(this.elementId);
+        if(element != null) {
+            this.reactRoot.unmount();
+            if(removeHtmlElement) {
+                element.remove();
+            }
+            if(typeof unmountCallback === "function")
+                unmountCallback();
+            this.fullScreen("off")
+        }
+    }
+
+    public updateConfig(config: {structurePanelConfig?: Partial<RcsbFvStructureConfigInterface<R,S>>; sequencePanelConfig?: Partial<RcsbFvCustomSequenceInterface<R,L>>;}){
+        this.ctxManager.next({eventType: EventType.UPDATE_CONFIG, eventData: config});
+    }
+
+    public pluginCall(f: (plugin: PluginContext) => void){
+        this.ctxManager.next({eventType: EventType.PLUGIN_CALL, eventData:f});
+    }
+
+    private fullScreen(mode: "on" | "off"): void {
+        switch (mode){
+            case "on":
+                this.fullScreenFlag = true;
+                this.overflowStyle = document.body.style.overflow;
+                document.body.style.overflow = "hidden";
+                break;
+            case "off":
+                this.fullScreenFlag = false;
+                document.body.style.overflow = this.overflowStyle;
+                break;
+        }
+
+    }
+
+}

src/RcsbFv3D/RcsbFv3DCustomComponent.tsx

@@ -0,0 +1,195 @@
+import * as React from "react";
+import classes from '../styles/RcsbFvStyle.module.scss';
+
+import {StructureViewerInterface} from '../RcsbFvStructure/StructureViewerInterface';
+
+import '../styles/RcsbFvMolstarStyle.module.scss';
+import {RcsbFvStructure, RcsbFvStructureConfigInterface} from "../RcsbFvStructure/RcsbFvStructure";
+import {Subscription} from "rxjs";
+import {PluginContext} from "molstar/lib/mol-plugin/context";
+import {CSSProperties, MouseEvent} from "react";
+import {StructureViewerBehaviourObserverInterface} from "../RcsbFvStructure/StructureViewerBehaviourInterface";
+import {RcsbFvStateInterface} from "../RcsbFvState/RcsbFvStateInterface";
+import {RcsbFvStateManager} from "../RcsbFvState/RcsbFvStateManager";
+import {RcsbFvCustomSequence, RcsbFvCustomSequenceInterface} from "../RcsbFvSequence/RcsbFvCustomSequence";
+import {
+    EventType,
+    RcsbFvCustomContextManager,
+    RcsbFvCustomContextManagerInterface, UpdateConfigInterface
+} from "../RcsbFvContextManager/RcsbFvCustomContextManager";
+
+export interface RcsbFv3DCssConfig {
+    overwriteCss?: boolean;
+    rootPanel?: CSSProperties;
+    structurePanel?: CSSProperties;
+    sequencePanel?: CSSProperties;
+}
+
+export interface RcsbFv3DCustomComponentInterface<R,L,S> {
+    structurePanelConfig:RcsbFvStructureConfigInterface<R,S>;
+    sequencePanelConfig: RcsbFvCustomSequenceInterface<R,L>;
+    id: string;
+    ctxManager: RcsbFvCustomContextManager<R,L,S>;
+    cssConfig?:RcsbFv3DCssConfig;
+    unmount:(flag:boolean)=>void;
+    fullScreen: boolean;
+    structureViewer: StructureViewerInterface<R,L,S>;
+    structureViewerBehaviourObserver: StructureViewerBehaviourObserverInterface<R,L>;
+}
+
+interface RcsbFv3DCustomComponentState<R,L,S> {
+    structurePanelConfig:RcsbFvStructureConfigInterface<R,S>;
+    sequencePanelConfig:RcsbFvCustomSequenceInterface<R,L>;
+    pfvScreenFraction: number;
+}
+
+export class RcsbFv3DCustomComponent<R,L,S> extends React.Component <RcsbFv3DCustomComponentInterface<R,L,S>, RcsbFv3DCustomComponentState<R,L,S>> {
+
+    private readonly stateManager: RcsbFvStateInterface = new RcsbFvStateManager();
+    private subscription: Subscription;
+    private readonly ROOT_DIV_ID: string = "rootPanelDiv";
+
+    readonly state: RcsbFv3DCustomComponentState<R,L,S> = {
+        structurePanelConfig: this.props.structurePanelConfig,
+        sequencePanelConfig: this.props.sequencePanelConfig,
+        pfvScreenFraction: 0.55
+    }
+
+    render(): JSX.Element {
+        return (
+            <div className={this.props.fullScreen ? classes.fullScreen : classes.fullHeight} >
+                <div
+                    id={this.ROOT_DIV_ID}
+                    style={RcsbFv3DCustomComponent.mainDivCssConfig(this.props.cssConfig?.rootPanel)}
+                    className={this.useDefaultCss() ? classes.rcsbFvMain : ""}
+                    onMouseMove={(evt: MouseEvent<HTMLDivElement>)=>{this.mouseMove(evt)}}
+                    onMouseUp={ (e)=>{this.splitPanelMouseUp()} }
+                >
+                    <div style={this.structureCssConfig(this.props.cssConfig?.structurePanel)} >
+                        <RcsbFvStructure<R,L,S>
+                            {...this.state.structurePanelConfig}
+                            componentId={this.props.id}
+                            structureViewer={this.props.structureViewer}
+                            stateManager={this.stateManager}
+                            structureViewerBehaviourObserver={this.props.structureViewerBehaviourObserver}
+                        />
+                    </div>
+                    <div style={this.sequenceCssConfig(this.props.cssConfig?.sequencePanel)}  >
+                        <RcsbFvCustomSequence<R,L>
+                            config={this.state.sequencePanelConfig.config}
+                            structureViewer={this.props.structureViewer}
+                            componentId={this.props.id}
+                            stateManager={this.stateManager}
+                            title={this.state.sequencePanelConfig.title}
+                            subtitle={this.state.sequencePanelConfig.subtitle}
+                            unmount={this.props.unmount}
+                        />
+                    </div>
+                    {
+                        this.panelDelimiter()
+                    }
+                </div>
+            </div>
+        );
+    }
+
+    componentDidMount() {
+        this.subscription = this.subscribe();
+    }
+
+    componentWillUnmount() {
+        this.unsubscribe();
+    }
+
+    private useDefaultCss(): boolean {
+       return !this.props.cssConfig?.overwriteCss;
+    }
+
+    private panelDelimiter(): JSX.Element {
+        return  this.useDefaultCss() ? <div
+            onMouseDown={() => {
+                this.splitPanelMouseDown()
+            }}
+            className={classes.rcsbFvSplitPanel}
+            style={{right: Math.round((1 - this.state.pfvScreenFraction) * 100) + "%"}}
+        /> : <></>;
+    }
+
+    private structureCssConfig(css: CSSProperties | undefined): CSSProperties{
+        const widthFr: number = Math.round((1-this.state.pfvScreenFraction)*100);
+        const cssWidth: string = widthFr.toString()+"%";
+        const cssHeight: string = "100%";
+        return {...(this.useDefaultCss() ? {width:cssWidth, height:cssHeight, zIndex:100} : {}), ...css };
+    }
+
+    private sequenceCssConfig(css: CSSProperties | undefined): CSSProperties{
+        const widthFr: number = Math.round((this.state.pfvScreenFraction)*100);
+        const cssWidth: string = widthFr.toString()+"%";
+        const cssHeight: string = "100%";
+        return {...(this.useDefaultCss() ? {width:cssWidth, height:cssHeight, overflowY:"auto", overflowX:"hidden", paddingBottom:5} : {}), ...css };
+    }
+
+    private static mainDivCssConfig(css: CSSProperties | undefined): CSSProperties{
+        return {...{
+
+        }, ...css}
+    }
+
+    private subscribe(): Subscription{
+        return this.props.ctxManager.subscribe((obj:RcsbFvCustomContextManagerInterface<R,L,S>)=>{
+            if(obj.eventType == EventType.UPDATE_CONFIG){
+                this.updateConfig(obj.eventData as UpdateConfigInterface<R,L,S>)
+            }else if(obj.eventType == EventType.PLUGIN_CALL){
+                this.props.structureViewer.pluginCall(obj.eventData as ((f:PluginContext)=>void));
+            }
+        });
+    }
+
+    /**Unsubscribe className to rxjs events. Useful if many panels are created an destroyed.*/
+    private unsubscribe(): void{
+        this.subscription.unsubscribe();
+    }
+
+    private updateConfig(config:UpdateConfigInterface<R,L,S>){
+        const structureConfig: Partial<RcsbFvStructureConfigInterface<R,S>> | undefined = config.structurePanelConfig;
+        const sequenceConfig = config.sequencePanelConfig;
+        if(structureConfig != null && sequenceConfig != null){
+            this.setState({structurePanelConfig:{...this.state.structurePanelConfig, ...structureConfig}, sequencePanelConfig:{...this.state.sequencePanelConfig, ...sequenceConfig}});
+        }else if(structureConfig != null){
+            this.setState({structurePanelConfig:{...this.state.structurePanelConfig, ...structureConfig}});
+        }else if(sequenceConfig != null){
+            this.setState({sequencePanelConfig:{...this.state.sequencePanelConfig, ...sequenceConfig}});
+        }
+    }
+
+    private splitPanelMouseDown(): void {
+        const element: HTMLElement | null = document.getElementById(this.ROOT_DIV_ID);
+        if(!element)return;
+        element.style.cursor = "ew-resize";
+        document.body.classList.add(classes.disableTextSelection);
+        this.resize = (evt: MouseEvent<HTMLDivElement>)=>{
+            const rect: DOMRect | undefined = element.getBoundingClientRect();
+            const x: number = evt.clientX - rect.left;
+            this.setState({pfvScreenFraction:x/rect.width});
+        };
+    }
+
+    private splitPanelMouseUp(): void {
+        if(typeof this.resize === "function") {
+            const element: HTMLElement | null = document.getElementById(this.ROOT_DIV_ID);
+            if (!element) return;
+            element.style.cursor = "auto";
+            document.body.classList.remove(classes.disableTextSelection);
+            window.dispatchEvent(new Event('resize'));
+            this.resize = null;
+        }
+    }
+
+    private mouseMove(evt: MouseEvent<HTMLDivElement>): void{
+        if(typeof this.resize === "function")
+            this.resize(evt);
+    }
+
+    private resize: null | ((evt: MouseEvent<HTMLDivElement>)=>void) = null;
+
+}

src/RcsbFv3D/RcsbFv3DSequenceIdentity.tsx

@@ -69,7 +69,6 @@ export class RcsbFv3DSequenceIdentity extends RcsbFv3DAbstract<
         super({
             elementId,
             sequenceConfig:{
-                type: "rcsb",
                 title: params.config.title,
                 subtitle: params.config.subtitle,
                 config:{
@@ -82,8 +81,8 @@ export class RcsbFv3DSequenceIdentity extends RcsbFv3DAbstract<
                         alignmentResponseContainer
                     },
                     buildPfvOnMount: true,
-                    pfvManagerFactory: new MsaPfvManagerFactory<[string,SearchQuery?],AlignmentLoadMolstarType,LoadMolstarReturnType>(),
-                    callbackManagerFactory: new MsaCallbackManagerFactory<AlignmentLoadMolstarType,LoadMolstarReturnType, {context:{id:string} & Partial<PolymerEntityInstanceInterface>}>({
+                    pfvManagerFactory: new MsaPfvManagerFactory<[string,SearchQuery?]>(),
+                    callbackManagerFactory: new MsaCallbackManagerFactory<{context:{id:string} & Partial<PolymerEntityInstanceInterface>}>({
                         pluginLoadParamsDefinition,
                         alignmentResponseContainer
                     }),

src/RcsbFv3D/RcsbFv3DUniprot.tsx

@@ -39,6 +39,7 @@ import {
 } from "../RcsbFvStructure/StructureViewers/MolstarViewer/MolstarUtils/MolstarComponentAction";
 import {MolstarTools} from "../RcsbFvStructure/StructureViewers/MolstarViewer/MolstarUtils/MolstarTools";
 import getModelIdFromTrajectory = MolstarTools.getModelIdFromTrajectory;
+import {AbstractViewInterface} from "../RcsbFvSequence/SequenceViews/AbstractView";
 
 export interface RcsbFv3DUniprotInterface  {
     elementId?: string;
@@ -68,7 +69,6 @@ export class RcsbFv3DUniprot extends RcsbFv3DAbstract<
         super({
             elementId,
             sequenceConfig:{
-                type: "rcsb",
                 title: params.config.title,
                 subtitle: params.config.subtitle,
                 config:{
@@ -81,8 +81,8 @@ export class RcsbFv3DUniprot extends RcsbFv3DAbstract<
                         alignmentResponseContainer
                     },
                     buildPfvOnMount: true,
-                    pfvManagerFactory: new MsaPfvManagerFactory<[string,SearchQuery?],AlignmentLoadMolstarType, LoadMolstarReturnType>(),
-                    callbackManagerFactory: new MsaCallbackManagerFactory<AlignmentLoadMolstarType, LoadMolstarReturnType, {context: {id:string};}>({
+                    pfvManagerFactory: new MsaPfvManagerFactory<[string,SearchQuery?]>(),
+                    callbackManagerFactory: new MsaCallbackManagerFactory<{context: {id:string};}>({
                         pluginLoadParamsDefinition,
                         alignmentResponseContainer
                     }),

src/RcsbFvContextManager/RcsbFvContextManager.ts

@@ -4,9 +4,9 @@ import {RcsbFvSequenceInterface} from "../RcsbFvSequence/RcsbFvSequence";
 import {PluginContext} from "molstar/lib/mol-plugin/context";
 
 /**Main Event Data Object Interface*/
-export interface RcsbFvContextManagerInterface<T,R,L,S,U> {
+export interface RcsbFvContextManagerInterface<T,R,S,U> {
     eventType: EventType;
-    eventData: string | UpdateConfigInterface<T,R,L,S,U> | ((plugin: PluginContext) => void);
+    eventData: string | UpdateConfigInterface<T,R,S,U> | ((plugin: PluginContext) => void);
 }
 
 /**Event types*/
@@ -15,24 +15,24 @@ export enum EventType {
     PLUGIN_CALL = "pluginCall"
 }
 
-export interface UpdateConfigInterface<T,R,L,S,U> {
+export interface UpdateConfigInterface<T,R,S,U> {
     structurePanelConfig?:Partial<RcsbFvStructureConfigInterface<R,S>>;
-    sequencePanelConfig?:Partial<RcsbFvSequenceInterface<T,R,L,U>>;
+    sequencePanelConfig?:Partial<RcsbFvSequenceInterface<T,U>>;
 }
 
 /**rxjs Event Handler Object. It allows objects to subscribe methods and then, get(send) events to(from) other objects*/
-export class RcsbFvContextManager<T,R,L,S,U> {
-    private readonly subject: Subject<RcsbFvContextManagerInterface<T,R,L,S,U>> = new Subject<RcsbFvContextManagerInterface<T,R,L,S,U>>();
+export class RcsbFvContextManager<T,R,S,U> {
+    private readonly subject: Subject<RcsbFvContextManagerInterface<T,R,S,U>> = new Subject<RcsbFvContextManagerInterface<T,R,S,U>>();
     /**Call other subscribed methods
      * @param obj Event Data Structure Interface
      * */
-    public next( obj: RcsbFvContextManagerInterface<T,R,L,S,U> ):void {
+    public next( obj: RcsbFvContextManagerInterface<T,R,S,U> ):void {
         this.subject.next(obj);
     }
     /**Subscribe loadMethod
      * @return Subscription
      * */
-    public subscribe(f:(x:RcsbFvContextManagerInterface<T,R,L,S,U>)=>void):Subscription {
+    public subscribe(f:(x:RcsbFvContextManagerInterface<T,R,S,U>)=>void):Subscription {
         return this.subject.asObservable().subscribe(f);
     }
     /**Unsubscribe all methods*/

src/RcsbFvContextManager/RcsbFvCustomContextManager.ts

@@ -0,0 +1,43 @@
+import {Subject, Subscription} from 'rxjs';
+import {RcsbFvStructureConfigInterface} from "../RcsbFvStructure/RcsbFvStructure";
+import {RcsbFvSequenceInterface} from "../RcsbFvSequence/RcsbFvSequence";
+import {PluginContext} from "molstar/lib/mol-plugin/context";
+import {RcsbFvCustomSequenceInterface} from "../RcsbFvSequence/RcsbFvCustomSequence";
+
+/**Main Event Data Object Interface*/
+export interface RcsbFvCustomContextManagerInterface<R,L,S> {
+    eventType: EventType;
+    eventData: string | UpdateConfigInterface<R,L,S> | ((plugin: PluginContext) => void);
+}
+
+/**Event types*/
+export enum EventType {
+    UPDATE_CONFIG = "updateBoardConfig",
+    PLUGIN_CALL = "pluginCall"
+}
+
+export interface UpdateConfigInterface<R,L,S> {
+    structurePanelConfig?:Partial<RcsbFvStructureConfigInterface<R,S>>;
+    sequencePanelConfig?:Partial<RcsbFvCustomSequenceInterface<R,L>>;
+}
+
+/**rxjs Event Handler Object. It allows objects to subscribe methods and then, get(send) events to(from) other objects*/
+export class RcsbFvCustomContextManager<R,L,S> {
+    private readonly subject: Subject<RcsbFvCustomContextManagerInterface<R,L,S>> = new Subject<RcsbFvCustomContextManagerInterface<R,L,S>>();
+    /**Call other subscribed methods
+     * @param obj Event Data Structure Interface
+     * */
+    public next( obj: RcsbFvCustomContextManagerInterface<R,L,S> ):void {
+        this.subject.next(obj);
+    }
+    /**Subscribe loadMethod
+     * @return Subscription
+     * */
+    public subscribe(f:(x:RcsbFvCustomContextManagerInterface<R,L,S>)=>void):Subscription {
+        return this.subject.asObservable().subscribe(f);
+    }
+    /**Unsubscribe all methods*/
+    public unsubscribeAll():void {
+        this.subject.unsubscribe();
+    }
+}

src/RcsbFvSequence/RcsbFvCustomSequence.tsx

@@ -0,0 +1,40 @@
+import * as React from "react";
+import {CustomView, CustomViewInterface} from "./SequenceViews/CustomView/CustomView";
+import {
+    ViewerActionManagerInterface,
+    ViewerCallbackManagerInterface
+} from "../RcsbFvStructure/StructureViewerInterface";
+import {PluginContext} from "molstar/lib/mol-plugin/context";
+import {RcsbFv, RcsbFvTrackDataElementInterface} from "@rcsb/rcsb-saguaro";
+import {RcsbView, RcsbViewInterface} from "./SequenceViews/RcsbView/RcsbView";
+import {RcsbFvStateInterface} from "../RcsbFvState/RcsbFvStateInterface";
+import {RcsbFvSequenceInterface} from "./RcsbFvSequence";
+
+export interface RcsbFvCustomSequenceInterface<R,L>{
+    config: CustomViewInterface<R,L>;
+    title?: string;
+    subtitle?: string;
+}
+
+interface CallbackConfig {
+    structureCallback?: (plugin: PluginContext, ann: RcsbFvTrackDataElementInterface)=>void;
+    sequenceCallback?: (rcsbFv: RcsbFv)=>void;
+}
+
+export class RcsbFvCustomSequence<R,L> extends React.Component <RcsbFvCustomSequenceInterface<R,L> & {structureViewer: ViewerActionManagerInterface<R,L>;} & CallbackConfig & {unmount:(flag:boolean)=>void,  stateManager: RcsbFvStateInterface, componentId:string}, RcsbFvCustomSequenceInterface<R,L> > {
+    render() {
+
+            const config: CustomViewInterface<R,L> = this.props.config;
+            return (<CustomView<R,L>
+                {...config}
+                structureViewer={this.props.structureViewer}
+                componentId={this.props.componentId}
+                stateManager={this.props.stateManager}
+                title={this.props.title}
+                subtitle={this.props.subtitle}
+                unmount={this.props.unmount}
+            />)
+
+
+    }
+}

src/RcsbFvSequence/RcsbFvSequence.tsx

@@ -9,46 +9,24 @@ import {RcsbFv, RcsbFvTrackDataElementInterface} from "@rcsb/rcsb-saguaro";
 import {RcsbView, RcsbViewInterface} from "./SequenceViews/RcsbView/RcsbView";
 import {RcsbFvStateInterface} from "../RcsbFvState/RcsbFvStateInterface";
 
-export interface RcsbFvSequenceInterface<T,R,L,U>{
-    type: "custom" | "rcsb";
-    config: RcsbViewInterface<T,R,L,U> | CustomViewInterface<R,L>;
+export interface RcsbFvSequenceInterface<T,U>{
+    config: RcsbViewInterface<T,U>;
     title?: string;
     subtitle?: string;
 }
 
-interface CallbackConfig {
-    structureCallback?: (plugin: PluginContext, ann: RcsbFvTrackDataElementInterface)=>void;
-    sequenceCallback?: (rcsbFv: RcsbFv)=>void;
-}
-
-type StructureViewerType<R,L> = ViewerCallbackManagerInterface & ViewerActionManagerInterface<R,L>;
-export class RcsbFvSequence<T,R,L,U> extends React.Component <RcsbFvSequenceInterface<T,R,L,U> & CallbackConfig & {unmount:(flag:boolean)=>void, structureViewer: StructureViewerType<R,L>,  stateManager: RcsbFvStateInterface, componentId:string}, RcsbFvSequenceInterface<T,R,L,U> > {
+export class RcsbFvSequence<T,U> extends React.Component <RcsbFvSequenceInterface<T,U> & {unmount:(flag:boolean)=>void,  stateManager: RcsbFvStateInterface, componentId:string}, RcsbFvSequenceInterface<T,U> > {
 
     render() {
-        if(this.props.type == "custom"){
-            const config: CustomViewInterface<R,L> = this.props.config as CustomViewInterface<R,L>;
-            return (<CustomView<R,L>
-                {...config}
-                componentId={this.props.componentId}
-                structureViewer={this.props.structureViewer}
-                stateManager={this.props.stateManager}
-                title={this.props.title}
-                subtitle={this.props.subtitle}
-                unmount={this.props.unmount}
-            />)
-        }else if(this.props.type == "rcsb"){
-            const config: RcsbViewInterface<T,R,L,U> = this.props.config as unknown as RcsbViewInterface<T,R,L,U>;
-            return (<RcsbView<T,R,L,U>
-                {...config}
-                componentId={this.props.componentId}
-                structureViewer={this.props.structureViewer}
-                stateManager={this.props.stateManager}
-                title={this.props.title}
-                subtitle={this.props.subtitle}
-                unmount={this.props.unmount}
-            />)
-        }
-
+        const config: RcsbViewInterface<T,U> = this.props.config as unknown as RcsbViewInterface<T,U>;
+        return (<RcsbView<T,U>
+            {...config}
+            componentId={this.props.componentId}
+            stateManager={this.props.stateManager}
+            title={this.props.title}
+            subtitle={this.props.subtitle}
+            unmount={this.props.unmount}
+        />)
     }
 
 }

src/RcsbFvSequence/SequenceViews/AbstractView.tsx

@@ -9,22 +9,21 @@ import {
 import {SequenceViewInterface} from "./SequenceViewInterface";
 import {RcsbFvStateInterface} from "../../RcsbFvState/RcsbFvStateInterface";
 
-export interface AbstractViewInterface<R,L> {
+export interface AbstractViewInterface {
     componentId: string;
     title?: string;
     subtitle?: string;
-    structureViewer: ViewerCallbackManagerInterface & ViewerActionManagerInterface<R,L>;
     stateManager: RcsbFvStateInterface;
     unmount:(flag:boolean,callback:()=>void)=>void;
 }
 
-export abstract class AbstractView<P,S,R,L> extends React.Component <P & AbstractViewInterface<R,L>, S> implements SequenceViewInterface {
+export abstract class AbstractView<P,S> extends React.Component <P & AbstractViewInterface,S> implements SequenceViewInterface {
 
     protected readonly componentDivId: string;
     protected readonly rcsbFvDivId: string;
     private updateDimTask: Subscription | null = null;
 
-    protected constructor(props:P & AbstractViewInterface<R,L>) {
+    protected constructor(props:P & AbstractViewInterface) {
         super(props);
         this.componentDivId = props.componentId+"_"+RcsbFvDOMConstants.PFV_DIV;
         this.rcsbFvDivId = props.componentId+"_"+RcsbFvDOMConstants.PFV_APP_ID;
@@ -58,7 +57,6 @@ export abstract class AbstractView<P,S,R,L> extends React.Component <P & Abstrac
     }
 
     componentWillUnmount() {
-        this.props.structureViewer.unsubscribe();
         window.removeEventListener('resize', this.resizeCallback);
     }
 

src/RcsbFvSequence/SequenceViews/CustomView/CustomView.tsx

@@ -9,14 +9,15 @@ import {
 } from "@rcsb/rcsb-saguaro";
 import * as React from "react";
 import {
-    StructureViewerPublicInterface
+    StructureViewerPublicInterface, ViewerActionManagerInterface, ViewerCallbackManagerInterface
 } from "../../../RcsbFvStructure/StructureViewerInterface";
 import uniqid from "uniqid";
 import {RcsbFvStateInterface} from "../../../RcsbFvState/RcsbFvStateInterface";
 
-export type CustomViewStateInterface<R,L> = Omit<CustomViewInterface<R,L>, "modelChangeCallback">;
+export type CustomViewStateInterface<R,L> = Omit<Omit<CustomViewInterface<R,L>, "modelChangeCallback">, "structureViewer">;
 
 export interface CustomViewInterface<R,L> {
+
     blockConfig: FeatureBlockInterface<R,L> | Array<FeatureBlockInterface<R,L>>;
     blockSelectorElement?: (blockSelector: BlockSelectorManager) => JSX.Element;
     modelChangeCallback?: () => CustomViewStateInterface<R,L>;
@@ -61,7 +62,7 @@ export class BlockSelectorManager {
     }
 }
 
-export class CustomView<R,L> extends AbstractView<CustomViewInterface<R,L>, CustomViewStateInterface<R,L>,R,L> {
+export class CustomView<R,L> extends AbstractView<CustomViewInterface<R,L> & {structureViewer: ViewerActionManagerInterface<R,L>;}, CustomViewStateInterface<R,L>> {
 
     private blockViewSelector: BlockSelectorManager = new BlockSelectorManager( this.blockChange.bind(this) );
     private boardMap: Map<string, FeatureViewInterface<R,L>> = new Map<string, FeatureViewInterface<R,L>>();
@@ -77,7 +78,7 @@ export class CustomView<R,L> extends AbstractView<CustomViewInterface<R,L>, Cust
         blockChangeCallback: this.props.blockChangeCallback
     };
 
-    constructor(props: CustomViewInterface<R,L> & AbstractViewInterface<R,L>) {
+    constructor(props: CustomViewInterface<R,L> & {structureViewer: ViewerActionManagerInterface<R,L>;} & AbstractViewInterface) {
         super(props);
         this.mapBlocks(props.blockConfig);
     }
@@ -94,7 +95,7 @@ export class CustomView<R,L> extends AbstractView<CustomViewInterface<R,L>, Cust
         });
     }
 
-    componentDidUpdate(prevProps: Readonly<CustomViewInterface<R,L> & AbstractViewInterface<R,L>>, prevState: Readonly<CustomViewStateInterface<R,L>>, snapshot?: any) {
+    componentDidUpdate(prevProps: Readonly<CustomViewInterface<R,L> & AbstractViewInterface>, prevState: Readonly<CustomViewStateInterface<R,L>>, snapshot?: any) {
         if(this.updateContext != "state-change") {
             this.updateContext = "state-change";
             this.mapBlocks(this.props.blockConfig);
@@ -236,7 +237,7 @@ export class CustomView<R,L> extends AbstractView<CustomViewInterface<R,L>, Cust
     setState<K extends keyof CustomViewStateInterface<R,L>>(
         state: ((
             prevState: Readonly<CustomViewStateInterface<R,L>>,
-            props: Readonly<CustomViewInterface<R,L> & AbstractViewInterface<R,L>>
+            props: Readonly<CustomViewInterface<R,L> & AbstractViewInterface>
         ) => (Pick<CustomViewStateInterface<R,L>, K> | CustomViewStateInterface<R,L> | null)) | Pick<CustomViewStateInterface<R,L>, K> | CustomViewStateInterface<R,L> | null, callback?: () => void
     ) {
         super.setState(state, ()=>{

src/RcsbFvSequence/SequenceViews/RcsbView/CallbackManagerFactoryImplementation/AssemblyCallbackManager.ts

@@ -13,13 +13,13 @@ import {
 import {RegionSelectionInterface} from "../../../../RcsbFvState/RcsbFvSelectorManager";
 import {DataContainer} from "../../../../Utils/DataContainer";
 
-export class AssemblyCallbackManagerFactory<R,L> implements CallbackManagerFactoryInterface<R,L,undefined> {
-    getCallbackManager(config: CallbackConfigInterface<R,L>): CallbackManagerInterface<undefined> {
-        return new AssemblyCallbackManager<R,L>(config);
+export class AssemblyCallbackManagerFactory implements CallbackManagerFactoryInterface<undefined> {
+    getCallbackManager(config: CallbackConfigInterface): CallbackManagerInterface<undefined> {
+        return new AssemblyCallbackManager(config);
     }
 }
 
-class AssemblyCallbackManager<R,L> extends AbstractCallbackManager<R,L,undefined> {
+class AssemblyCallbackManager extends AbstractCallbackManager<undefined> {
 
     public featureClickCallback(e:RcsbFvTrackDataElementInterface): void {
         if(e == null){

src/RcsbFvSequence/SequenceViews/RcsbView/CallbackManagerFactoryImplementation/MsaCallbackManager.ts

@@ -14,20 +14,20 @@ import {TagDelimiter} from "@rcsb/rcsb-saguaro-app";
 import {AlignmentMapper as AM} from "../../../../Utils/AlignmentMapper";
 import {DataContainer} from "../../../../Utils/DataContainer";
 
-export class MsaCallbackManagerFactory<R,L,U> implements CallbackManagerFactoryInterface<R,L,U> {
+export class MsaCallbackManagerFactory<U> implements CallbackManagerFactoryInterface<U> {
 
-    private readonly pluginLoadParamsDefinition:(id: string)=>R;
+    private readonly pluginLoadParamsDefinition:(id: string)=>void;
     private readonly alignmentResponseContainer: DataContainer<AlignmentResponse>;
 
     constructor(config: {
-        pluginLoadParamsDefinition:(id: string)=>R;
+        pluginLoadParamsDefinition:(id: string)=>void;
         alignmentResponseContainer: DataContainer<AlignmentResponse>;
     }) {
         this.pluginLoadParamsDefinition = config.pluginLoadParamsDefinition;
         this.alignmentResponseContainer = config.alignmentResponseContainer;
     }
 
-    getCallbackManager(config: CallbackConfigInterface<R,L>): CallbackManagerInterface<U> {
+    getCallbackManager(config: CallbackConfigInterface): CallbackManagerInterface<U> {
         return new MsaCallbackManager( {
             ...config,
             loadParamRequest:this.pluginLoadParamsDefinition,
@@ -38,13 +38,13 @@ export class MsaCallbackManagerFactory<R,L,U> implements CallbackManagerFactoryI
 }
 
 type SelectedRegion = {modelId: string, labelAsymId: string, region: RegionSelectionInterface, operatorName?: string};
-class MsaCallbackManager<R,L,U>  extends AbstractCallbackManager<R,L,U>{
+class MsaCallbackManager<U>  extends AbstractCallbackManager<U>{
 
-    private readonly loadParamRequest:(id: string)=>R;
+    private readonly loadParamRequest:(id: string)=>void;
     private readonly targetIds: {[key:string]:boolean} = {};
     private readonly alignmentResponseContainer: DataContainer<AlignmentResponse>;
 
-    constructor(config: CallbackConfigInterface<R,L> & {loadParamRequest:(id: string)=>R;alignmentResponseContainer: DataContainer<AlignmentResponse>;}) {
+    constructor(config: CallbackConfigInterface & {loadParamRequest:(id: string)=>void;alignmentResponseContainer: DataContainer<AlignmentResponse>;}) {
         super(config);
         this.loadParamRequest = config.loadParamRequest;
         this.alignmentResponseContainer = config.alignmentResponseContainer;

src/RcsbFvSequence/SequenceViews/RcsbView/CallbackManagerFactoryInterface.ts

@@ -18,28 +18,25 @@ export interface CallbackManagerInterface<U> {
     pfvChangeCallback(args:U): Promise<void>;
 }
 
-export interface CallbackManagerFactoryInterface<R,L,U> {
-    getCallbackManager(config: CallbackConfigInterface<R,L>): CallbackManagerInterface<U>;
+export interface CallbackManagerFactoryInterface<U> {
+    getCallbackManager(config: CallbackConfigInterface): CallbackManagerInterface<U>;
 }
 
-export interface CallbackConfigInterface<R,L> {
+export interface CallbackConfigInterface {
     rcsbFvContainer: DataContainer<RcsbFvModulePublicInterface>;
     stateManager: RcsbFvStateInterface;
-    structureViewer: ViewerCallbackManagerInterface & ViewerActionManagerInterface<R,L>;
     pfvFactory: PfvManagerInterface;
 }
 
-export abstract class AbstractCallbackManager<R,L,U> implements CallbackManagerInterface<U> {
+export abstract class AbstractCallbackManager<U> implements CallbackManagerInterface<U> {
     protected readonly rcsbFvContainer: DataContainer<RcsbFvModulePublicInterface>;
     protected readonly stateManager: RcsbFvStateInterface;
-    protected readonly structureViewer: ViewerCallbackManagerInterface & ViewerActionManagerInterface<R,L>;
     protected pfvFactory: PfvManagerInterface;
     private readonly isInnerSelection: DataContainer<boolean> = new DataContainer<boolean>();
 
-    constructor(config: CallbackConfigInterface<R,L>) {
+    constructor(config: CallbackConfigInterface) {
         this.rcsbFvContainer = config.rcsbFvContainer;
         this.stateManager = config.stateManager;
-        this.structureViewer = config.structureViewer;
         this.pfvFactory = config.pfvFactory;
     }
 

src/RcsbFvSequence/SequenceViews/RcsbView/PfvManagerFactoryImplementation/AssemblyPfvComponents/ChainDisplayComponent.tsx

@@ -1,13 +1,10 @@
 import * as React from "react";
-import {
-    StructureViewerInterface
-} from "../../../../../RcsbFvStructure/StructureViewerInterface";
 
-type DisplayComponentMethod = (StructureViewerInterface<undefined,undefined,[]>)["displayComponent"]
+import {RcsbFvStateInterface} from "../../../../../RcsbFvState/RcsbFvStateInterface";
+
 interface ChainDisplayInterface {
-    structureViewer: {
-        displayComponent:DisplayComponentMethod
-    };
+
+    stateManager: RcsbFvStateInterface;
     label: string;
 }
 
@@ -18,17 +15,21 @@ interface ChainDisplayState {
 export class ChainDisplayComponent extends React.Component<ChainDisplayInterface, ChainDisplayState>{
 
     readonly state: ChainDisplayState = {
-        display: this.props.structureViewer.displayComponent(this.props.label) ? 'visible' : 'hidden'
+        display: 'visible'
     };
 
     private changeDisplay(): void{
-        if(this.state.display === 'visible') {
-            this.props.structureViewer.displayComponent(this.props.label, false);
-            this.setState({display: 'hidden'});
-        }else{
-            this.props.structureViewer.displayComponent(this.props.label, true);
-            this.setState({display: 'visible'});
-        }
+        const display = this.state.display === "visible" ? "hidden" : "visible";
+        this.setState({display}, ()=>{
+            this.props.stateManager.next<"visibility-change",ChainDisplayState & {label: string}>({
+                data:{
+                    display,
+                    label: this.props.label
+                },
+                type:"visibility-change",
+                view:"1d-view"
+            });
+        });
     }
 
     render(): JSX.Element{

src/RcsbFvSequence/SequenceViews/RcsbView/PfvManagerFactoryImplementation/AssemblyPfvManagerFactory.tsx

@@ -32,25 +32,25 @@ import {
 import {ColorTheme} from "molstar/lib/mol-theme/color";
 import {PLDDTConfidenceColorThemeProvider} from "molstar/lib/extensions/model-archive/quality-assessment/color/plddt";
 
-interface AssemblyPfvManagerInterface<R,L> extends PfvManagerFactoryConfigInterface<R,L,undefined>{
+interface AssemblyPfvManagerInterface extends PfvManagerFactoryConfigInterface<undefined>{
     useOperatorsFlag?: boolean;
     instanceSequenceConfig?: InstanceSequenceConfig;
 }
 
-export class AssemblyPfvManagerFactory<R,L> implements PfvManagerFactoryInterface<{instanceSequenceConfig: InstanceSequenceConfig|undefined;useOperatorsFlag: boolean | undefined;},R,L,undefined> {
-    public getPfvManager(config:  AssemblyPfvManagerInterface<R,L>): PfvManagerInterface {
-        return new AssemblyPfvManager<R,L>(config);
+export class AssemblyPfvManagerFactory implements PfvManagerFactoryInterface<{instanceSequenceConfig: InstanceSequenceConfig|undefined;useOperatorsFlag: boolean | undefined;},undefined> {
+    public getPfvManager(config:  AssemblyPfvManagerInterface): PfvManagerInterface {
+        return new AssemblyPfvManager(config);
     }
 }
 
-class AssemblyPfvManager<R,L> extends AbstractPfvManager<{instanceSequenceConfig?: InstanceSequenceConfig;useOperatorsFlag?: boolean;},R,L,undefined> {
+class AssemblyPfvManager extends AbstractPfvManager<{instanceSequenceConfig?: InstanceSequenceConfig;useOperatorsFlag?: boolean;},undefined> {
 
     private readonly instanceSequenceConfig: InstanceSequenceConfig|undefined;
     private readonly useOperatorsFlag:boolean | undefined;
     private readonly OPERATOR_DROPDOWN_TITLE: string = "Symmetry Partner";
     private module: RcsbFvModulePublicInterface | undefined = undefined;
 
-    constructor(config: AssemblyPfvManagerInterface<R,L>) {
+    constructor(config: AssemblyPfvManagerInterface) {
         super(config);
         this.instanceSequenceConfig = config.instanceSequenceConfig;
         this.useOperatorsFlag = config.useOperatorsFlag;
@@ -99,9 +99,10 @@ class AssemblyPfvManager<R,L> extends AbstractPfvManager<{instanceSequenceConfig
                     filterInstances: assemblyInstances.get(this.stateManager.assemblyModelSate.getString("entryId")),
                     selectButtonOptionProps: (props: SelectOptionProps) => (
                         <div style={{display: 'flex'}}>
-                            <ChainDisplayComponent structureViewer={this.structureViewer} label={props.data.label}/>
+                            <ChainDisplayComponent stateManager={this.stateManager} label={props.data.label}/>
                             {props.children}
-                        </div>)
+                        </div>
+                    )
                 },
                 {
                     ...this.additionalConfig,
@@ -112,8 +113,6 @@ class AssemblyPfvManager<R,L> extends AbstractPfvManager<{instanceSequenceConfig
                 }
             );
         }
-        if(!config.defaultAuthId)
-            await createComponents<R,L>(this.structureViewer, this.stateManager.assemblyModelSate.getMap());
         return this.module;
     }
 
@@ -176,29 +175,6 @@ class AssemblyPfvManager<R,L> extends AbstractPfvManager<{instanceSequenceConfig
 
 }
 
-async function createComponents<R,L>(plugin: ViewerActionManagerInterface<R,L>, modelMap:SaguaroPluginModelMapType): Promise<void> {
-    plugin.displayComponent("Water", false);
-    await plugin.colorComponent("Polymer", 'chain-id');
-    const chains: Array<{modelId: string; auth: string; label: string;}> = new Array<{modelId: string; auth: string; label: string;}>();
-    modelMap.forEach((entry, modelId)=>{
-        entry.chains.forEach(ch=>{
-            if(ch.type === "polymer") {
-                chains.push({modelId: modelId, auth: ch.auth, label: ch.label});
-            }
-        });
-    });
-    await plugin.removeComponent();
-    plugin.clearFocus();
-    //TODO improve colorTheme condition (PLDDTConfidenceColorThemeProvider.isApplicable)
-    const colorTheme: ColorTheme.BuiltIn = (chains.length === 1 && chains[0].modelId.includes("AF_AF")) ? PLDDTConfidenceColorThemeProvider.name as ColorTheme.BuiltIn : "chain-id";
-    for(const ch of chains) {
-        const label: string = ch.auth === ch.label ? ch.label : `${ch.label} [auth ${ch.auth}]`;
-        await plugin.createComponent(label, ch.modelId, ch.label, 'cartoon');
-        await plugin.colorComponent(label, colorTheme);
-    }
-    await plugin.removeComponent("Polymer");
-}
-
 function getOperator(entryInfo: {entryId: string; assemblyId: string, chains:Array<ChainInfo>;}, defaultAuthId?: string, defaultOperatorName?:string): OperatorInfo | undefined{
     const chainInfo: ChainInfo | undefined = defaultAuthId ? entryInfo.chains.find(ch=>ch.auth === defaultAuthId) : entryInfo.chains[0];
     if(chainInfo){

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

@@ -32,11 +32,11 @@ export interface MsaPfvManagerInterface<T extends any[]> {
     buildMsaAlignmentFv(...args:[string, ...T, RcsbFvAdditionalConfig & ActionMethods.FvChangeConfigInterface]): Promise<RcsbFvModulePublicInterface>;
 }
 
-type MsaPfvManagerInterType<T extends any[], R,L> = MsaPfvManagerInterface<T> & PfvManagerFactoryConfigInterface<R,L,{context: {id:string};}>
+type MsaPfvManagerInterType<T extends any[]> = MsaPfvManagerInterface<T> & PfvManagerFactoryConfigInterface<{context: {id:string};}>
 
-export class MsaPfvManagerFactory<T extends any[], R,L> implements PfvManagerFactoryInterface<{id:string},R,L,{context: {id:string};}> {
+export class MsaPfvManagerFactory<T extends any[]> implements PfvManagerFactoryInterface<{id:string},{context: {id:string};}> {
 
-    getPfvManager(config: MsaPfvManagerInterType<T,R,L>): PfvManagerInterface {
+    getPfvManager(config: MsaPfvManagerInterType<T>): PfvManagerInterface {
         return new MsaPfvManager(config);
     }
 
@@ -47,12 +47,12 @@ type AlignmentDataType = {
     targetAlignment: TargetAlignment;
 };
 
-class MsaPfvManager<T extends any[],R,L> extends AbstractPfvManager<{id:string},R,L,{context: {id:string} &  Partial<PolymerEntityInstanceInterface>;}>{
+class MsaPfvManager<T extends any[]> extends AbstractPfvManager<{id:string},{context: {id:string} &  Partial<PolymerEntityInstanceInterface>;}>{
 
-    private readonly config:MsaPfvManagerInterType<T,R,L>;
+    private readonly config:MsaPfvManagerInterType<T>;
     private module:RcsbFvModulePublicInterface;
 
-    constructor(config:MsaPfvManagerInterType<T,R,L>) {
+    constructor(config:MsaPfvManagerInterType<T>) {
         super(config);
         this.config = config;
     }

src/RcsbFvSequence/SequenceViews/RcsbView/PfvManagerFactoryInterface.ts

@@ -10,18 +10,17 @@ import {
 import {RcsbFvBoardConfigInterface} from "@rcsb/rcsb-saguaro";
 import {RcsbFvStateInterface} from "../../../RcsbFvState/RcsbFvStateInterface";
 
-export interface PfvManagerFactoryConfigInterface<R,L,U> {
+export interface PfvManagerFactoryConfigInterface<U> {
     rcsbFvDivId: string;
     rcsbFvContainer: DataContainer<RcsbFvModulePublicInterface>;
     stateManager: RcsbFvStateInterface;
-    structureViewer: ViewerCallbackManagerInterface & ViewerActionManagerInterface <R,L>;
     boardConfigContainer: DataContainer<Partial<RcsbFvBoardConfigInterface>>;
     pfvChangeCallback(context: U): Promise<void>;
     additionalConfig: RcsbFvAdditionalConfig & {operatorChangeCallback?:(operatorInfo: OperatorInfo)=>void} | undefined;
 }
 
-export interface PfvManagerFactoryInterface<T,R,L,U> {
-    getPfvManager(config:T & PfvManagerFactoryConfigInterface<R,L,U>): PfvManagerInterface;
+export interface PfvManagerFactoryInterface<T,U> {
+    getPfvManager(config:T & PfvManagerFactoryConfigInterface<U>): PfvManagerInterface;
 }
 
 export interface BuildPfvInterface {
@@ -33,21 +32,19 @@ export interface PfvManagerInterface {
     create(config?: BuildPfvInterface): Promise<RcsbFvModulePublicInterface | undefined>;
 }
 
-export abstract class AbstractPfvManager<T,R,L,U> implements PfvManagerInterface {
+export abstract class AbstractPfvManager<T,U> implements PfvManagerInterface {
 
     protected readonly rcsbFvDivId: string;
     protected readonly rcsbFvContainer: DataContainer<RcsbFvModulePublicInterface>;
     protected readonly stateManager: RcsbFvStateInterface;
-    protected readonly structureViewer: ViewerCallbackManagerInterface & ViewerActionManagerInterface <R,L>;
     protected readonly boardConfigContainer: DataContainer<Partial<RcsbFvBoardConfigInterface>>;
     protected readonly pfvChangeCallback: (context: U)=>Promise<void>;
     protected readonly additionalConfig: RcsbFvAdditionalConfig & {operatorChangeCallback?:(operatorInfo: OperatorInfo)=>void} | undefined;
 
-    protected constructor(config:T & PfvManagerFactoryConfigInterface<R,L,U>){
+    protected constructor(config:T & PfvManagerFactoryConfigInterface<U>){
         this.rcsbFvDivId = config.rcsbFvDivId;
         this.rcsbFvContainer = config.rcsbFvContainer;
         this.stateManager = config.stateManager;
-        this.structureViewer = config.structureViewer;
         this.additionalConfig = config.additionalConfig;
         this.boardConfigContainer = config.boardConfigContainer;
         this.pfvChangeCallback = config.pfvChangeCallback;

src/RcsbFvSequence/SequenceViews/RcsbView/RcsbView.tsx

@@ -14,32 +14,32 @@ import {
     CallbackManagerFactoryInterface,
     CallbackManagerInterface
 } from "./CallbackManagerFactoryInterface";
+import {RcsbFvStateInterface} from "../../../RcsbFvState/RcsbFvStateInterface";
 
-export interface RcsbViewInterface<T,R,L,U> {
+export interface RcsbViewInterface<T,U> {
     rcsbId: string;
     additionalConfig?: RcsbFvAdditionalConfig & {operatorChangeCallback?:(operatorInfo: OperatorInfo)=>void};
     useOperatorsFlag?:boolean;
     pfvParams:T;
-    pfvManagerFactory: PfvManagerFactoryInterface<T,R,L,U>;
-    callbackManagerFactory: CallbackManagerFactoryInterface<R,L,U>;
-    additionalContent?(props:RcsbViewInterface<T,R,L,U> & AbstractViewInterface<R,L>): JSX.Element;
+    pfvManagerFactory: PfvManagerFactoryInterface<T,U>;
+    callbackManagerFactory: CallbackManagerFactoryInterface<U>;
+    additionalContent?(props:RcsbViewInterface<T,U> & AbstractViewInterface): JSX.Element;
     buildPfvOnMount?: boolean;
 }
 
-export class RcsbView<T,R,L,U> extends AbstractView<RcsbViewInterface<T,R,L,U>, {}, R,L>{
+export class RcsbView<T,U> extends AbstractView<RcsbViewInterface<T,U>, {}>{
 
     private boardConfigContainer: DataContainer<Partial<RcsbFvBoardConfigInterface>> = new DataContainer();
     private rcsbFvContainer: DataContainer<RcsbFvModulePublicInterface> = new DataContainer<RcsbFvModulePublicInterface>();
     private readonly callbackManager: CallbackManagerInterface<U>;
     private readonly pfvFactory: PfvManagerInterface;
 
-    constructor(props:RcsbViewInterface<T,R,L,U> & AbstractViewInterface<R,L>) {
+    constructor(props:RcsbViewInterface<T,U> & AbstractViewInterface) {
         super(props);
         this.pfvFactory = this.props.pfvManagerFactory.getPfvManager({
             ...this.props.pfvParams,
             rcsbFvContainer: this.rcsbFvContainer,
             stateManager: this.props.stateManager,
-            structureViewer: this.props.structureViewer,
             boardConfigContainer: this.boardConfigContainer,
             rcsbFvDivId: this.rcsbFvDivId,
             pfvChangeCallback: this.pfvChangeCallback.bind(this),
@@ -49,7 +49,6 @@ export class RcsbView<T,R,L,U> extends AbstractView<RcsbViewInterface<T,R,L,U>,
         this.callbackManager = this.props.callbackManagerFactory.getCallbackManager({
             rcsbFvContainer: this.rcsbFvContainer,
             stateManager: this.props.stateManager,
-            structureViewer: this.props.structureViewer,
             pfvFactory: this.pfvFactory
         });
     }

src/RcsbFvStructure/RcsbFvStructure.tsx

@@ -31,7 +31,7 @@ export class RcsbFvStructure<R,L,S> extends React.Component <RcsbFvStructureConf
         this.props.structureViewer.init(this.props.stateManager, this.props.structureViewerConfig);
         this.props.structureViewerBehaviourObserver.observe(this.props.structureViewer, this.props.stateManager);
         if(this.props.loadConfig)
-            await this.props.structureViewer.load(this.props.loadConfig);
+            await this.props.structureViewer.load(this.props.loadConfig as any);
         window.addEventListener('resize', this.updateDimensions.bind(this));
     }
 

src/RcsbFvStructure/StructureViewerBehaviour/AssemblyBehaviour.ts

@@ -15,21 +15,22 @@ import {
 } from "../StructureViewerInterface";
 import {RcsbFvStateInterface} from "../../RcsbFvState/RcsbFvStateInterface";
 import {asyncScheduler, Subscription} from "rxjs";
+import {StructureLoaderInterface} from "../StructureUtils/StructureLoaderInterface";
 
 export class AssemblyBehaviourObserver<R,L> implements StructureViewerBehaviourObserverInterface<R,L> {
 
     private structureBehaviour: StructureViewerBehaviourInterface;
-    private readonly assemblyLoadConfig: R;
+    private readonly structureLoader: StructureLoaderInterface<[ViewerActionManagerInterface<R,L>],L>;
 
-    constructor(assemblyLoadConfig: R) {
-        this.assemblyLoadConfig = assemblyLoadConfig;
+    constructor(structureLoader: StructureLoaderInterface<[ViewerActionManagerInterface<R,L>],L>) {
+        this.structureLoader = structureLoader;
     }
 
     public observe(structureViewer: ViewerCallbackManagerInterface & ViewerActionManagerInterface<R,L>, stateManager: RcsbFvStateInterface): void {
         this.structureBehaviour = new AssemblyBehaviour(structureViewer, stateManager);
-        structureViewer.load(this.assemblyLoadConfig).then(()=>{
+        this.structureLoader.load(structureViewer).then(()=>{
             console.info("Assembly load complete");
-        })
+        });
     }
 
     public unsubscribe(): void {
@@ -57,7 +58,7 @@ class AssemblyBehaviour<R,L> implements StructureViewerBehaviourInterface {
     }
 
     private subscribe(): Subscription {
-        return this.stateManager.subscribe(async o=>{
+        return this.stateManager.subscribe<"visibility-change",{display:'visible' | 'hidden'; label:string;}>(async o=>{
             if(o.type == "selection-change" && o.view == "1d-view")
                 this.selectionChange();
             if(o.type == "hover-change" && o.view == "1d-view")
@@ -68,6 +69,8 @@ class AssemblyBehaviour<R,L> implements StructureViewerBehaviourInterface {
                 await this.isSelectionEmpty();
             if(o.type == "pfv-change" && o.view == "1d-view")
                 this.resetPluginView();
+            if(o.type == "visibility-change" && o.view == "1d-view" && o.data)
+                this.visibilityChange(o.data);
         });
     }
 
@@ -154,10 +157,17 @@ class AssemblyBehaviour<R,L> implements StructureViewerBehaviourInterface {
             await this.structureViewer.removeComponent(this.selectedComponentId);
     }
 
-
     private resetPluginView(): void {
         this.structureViewer.clearFocus();
         this.structureViewer.resetCamera();
     }
 
+    private visibilityChange(data: {display: 'visible' | 'hidden'; label: string;}): void {
+        if(data.display === 'visible') {
+            this.structureViewer.displayComponent(data.label, true);
+        }else{
+            this.structureViewer.displayComponent(data.label, false);
+        }
+    }
+
 }

src/RcsbFvStructure/StructureViewerInterface.ts

@@ -54,7 +54,9 @@ export interface ViewerCallbackManagerInterface {
 }
 
 export interface ViewerActionManagerInterface<R,L> {
-    load<Z extends R|R[]>(loadConfig: Z): Z extends R ? Promise<L|undefined> : Promise<(L|undefined)[]>;
+    //load<Z extends R|R[]>(loadConfig: Z): Z extends R ? Promise<L|undefined> : Promise<(L|undefined)[]>;
+    load(loadConfig: R): Promise<L|undefined>;
+    load(loadConfig: R[]): Promise<(L|undefined)[]>;
     removeStructure(removeConfig: R|Array<R>): Promise<void>;
     select(modelId:string, labelAsymId: string, begin: number, end: number, mode: 'select'|'hover', operation:'add'|'set', operatorName?:string): void;
     select(selection: Array<SaguaroPosition>, mode: 'select'|'hover', operation:'add'|'set'): void;

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

@@ -8,7 +8,7 @@ import {
     StructureLoaderInterface,
     TransformProviderInterface
 } from "../../../StructureUtils/StructureLoaderInterface";
-import {ViewerActionManagerInterface, ViewerCallbackManagerInterface} from "../../../StructureViewerInterface";
+import {ViewerActionManagerInterface} from "../../../StructureViewerInterface";
 import {
     LoadMethod,
     LoadMolstarInterface,
@@ -20,15 +20,13 @@ import {
     AlignmentTrajectoryParamsType
 } from "../TrajectoryPresetProvider/AlignmentTrajectoryPresetProvider";
 import {TargetAlignment} from "@rcsb/rcsb-api-tools/build/RcsbGraphQL/Types/Borrego/GqlTypes";
-import {RcsbFvStateInterface} from "../../../../RcsbFvState/RcsbFvStateInterface";
-import {Mat4} from "molstar/lib/mol-math/linear-algebra";
 import {
     FelxibleAlignmentTrajectoryParamsType,
     FlexibleAlignmentTrajectoryPresetProvider
 } from "../TrajectoryPresetProvider/FlexibleAlignmentTrajectoryPresetProvider";
 
 export class MolstarAlignmentLoader implements StructureLoaderInterface<[
-        ViewerCallbackManagerInterface & ViewerActionManagerInterface<LoadMolstarInterface<AlignmentTrajectoryParamsType|FelxibleAlignmentTrajectoryParamsType,LoadMolstarReturnType>,LoadMolstarReturnType>,
+        ViewerActionManagerInterface<LoadMolstarInterface<AlignmentTrajectoryParamsType|FelxibleAlignmentTrajectoryParamsType,LoadMolstarReturnType>,LoadMolstarReturnType>,
         {entryId:string;entityId:string;}|{entryId:string;instanceId:string;},
         TargetAlignment
     ], LoadMolstarReturnType> {
@@ -42,7 +40,7 @@ export class MolstarAlignmentLoader implements StructureLoaderInterface<[
     private readonly structureMap: Set<string> = new Set<string>();
 
     async load(
-        structureViewer: ViewerCallbackManagerInterface & ViewerActionManagerInterface<LoadMolstarInterface<AlignmentTrajectoryParamsType|FelxibleAlignmentTrajectoryParamsType,LoadMolstarReturnType>,LoadMolstarReturnType>,
+        structureViewer: ViewerActionManagerInterface<LoadMolstarInterface<AlignmentTrajectoryParamsType|FelxibleAlignmentTrajectoryParamsType,LoadMolstarReturnType>,LoadMolstarReturnType>,
         pdb:{entryId:string;entityId:string;}|{entryId:string;instanceId:string;},
         targetAlignment: TargetAlignment
     ): Promise<undefined|LoadMolstarReturnType> {

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

@@ -0,0 +1,41 @@
+/*
+* Copyright (c) 2021 RCSB PDB and contributors, licensed under MIT, See LICENSE file for more info.
+* @author Joan Segura Mora <joan.segura@rcsb.org>
+*/
+
+import {StructureLoaderInterface} from "../../../StructureUtils/StructureLoaderInterface";
+import {ViewerActionManagerInterface} from "../../../StructureViewerInterface";
+import {LoadMethod, LoadMolstarInterface, LoadMolstarReturnType} from "../MolstarActionManager";
+import {
+    AssemblyTrajectoryParamsType,
+    AssemblyTrajectoryPresetProvider
+} from "../TrajectoryPresetProvider/AssemblyTrajectoryPresetProvider";
+
+export class MolstarAssemblyLoader implements StructureLoaderInterface<
+    [ViewerActionManagerInterface<LoadMolstarInterface<AssemblyTrajectoryParamsType,LoadMolstarReturnType>,LoadMolstarReturnType>],
+    LoadMolstarReturnType
+> {
+
+    private readonly entryId: string;
+    private readonly assemblyId: string;
+    constructor(config: {entryId: string; assemblyId: string;}){
+        this.entryId = config.entryId;
+        this.assemblyId = config.assemblyId;
+    }
+
+    async load(structureViewer: ViewerActionManagerInterface<LoadMolstarInterface<AssemblyTrajectoryParamsType, LoadMolstarReturnType>, LoadMolstarReturnType>): Promise<LoadMolstarReturnType|undefined> {
+        return await structureViewer.load({
+            loadMethod: LoadMethod.loadPdbId,
+            loadParams: {
+                reprProvider: AssemblyTrajectoryPresetProvider,
+                entryId: this.entryId,
+                id: this.entryId,
+                params: {
+                    assemblyId: this.assemblyId,
+                    modelIndex: 0
+                }
+            }
+        });
+    }
+
+}

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

@@ -42,6 +42,7 @@ import {CustomProperty} from "molstar/lib/mol-model-props/common/custom-property
 import {StructureBuilder} from "molstar/lib/mol-plugin-state/builder/structure";
 import {StructureRepresentationBuilder} from "molstar/lib/mol-plugin-state/builder/structure/representation";
 import {RigidTransformType, TransformMatrixType} from "../../../StructureUtils/StructureLoaderInterface";
+import {StateTransform} from "molstar/lib/mol-state/transform";
 
 type RepresentationParamsType = {
     pdb?:{entryId:string;entityId:string;}|{entryId:string;instanceId:string;};
@@ -191,6 +192,9 @@ export const AlignmentRepresentationPresetProvider = StructureRepresentationPres
                 isHidden:true
             }
         });
+        if (comp?.cell?.state ) {
+            StateTransform.assignState(comp?.cell?.state, { isHidden: true });
+        }
 
         await update.commit({ revertOnError: false });
 
@@ -220,16 +224,14 @@ export const AlignmentRepresentationPresetProvider = StructureRepresentationPres
                 }
             });
 
+            if (comp?.cell?.state ) {
+                StateTransform.assignState(comp?.cell?.state, { isHidden: true });
+            }
+
             await update.commit({ revertOnError: false });
             if(comp && expression.tag != "water") anyLigComp = comp;
         }
 
-        for (const c of plugin.managers.structure.hierarchy.currentComponentGroups){
-            for (const comp of c) {
-                if(typeof comp.cell.state.isHidden === "undefined" && comp.representations[0].cell.state.isHidden)
-                    plugin.managers.structure.component.toggleVisibility(c);
-            }
-        }
         return {
             components: componentMap,
             representations: representationMap

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

@@ -0,0 +1,113 @@
+import {
+    StructureRepresentationPresetProvider
+} from "molstar/lib/mol-plugin-state/builder/structure/representation-preset";
+import {PluginContext} from "molstar/lib/mol-plugin/context";
+import {StateObjectRef} from "molstar/lib/mol-state";
+import {PluginStateObject} from "molstar/lib/mol-plugin-state/objects";
+import {StructureElement, StructureProperties as SP} from "molstar/lib/mol-model/structure";
+import {MolScriptBuilder as MS} from "molstar/lib/mol-script/language/builder";
+import uniqid from "uniqid";
+import {PLDDTConfidenceColorThemeProvider} from "molstar/lib/extensions/model-archive/quality-assessment/color/plddt";
+import {ColorTheme} from "molstar/lib/mol-theme/color";
+import reprBuilder = StructureRepresentationPresetProvider.reprBuilder;
+import {StructureBuilder} from "molstar/lib/mol-plugin-state/builder/structure";
+import {StructureRepresentationBuilder} from "molstar/lib/mol-plugin-state/builder/structure/representation";
+import {createSelectionExpressions} from "@rcsb/rcsb-molstar/build/src/viewer/helpers/selection";
+import {StateTransform} from "molstar/lib/mol-state/transform";
+
+type ComponentType = Awaited<ReturnType<InstanceType<typeof StructureBuilder>["tryCreateComponentFromExpression"]>>;
+type RepresentationType = ReturnType<InstanceType<typeof StructureRepresentationBuilder>["buildRepresentation"]>;
+type ComponentMapType = Record<string,ComponentType>;
+type RepresentationMapType = Record<string,RepresentationType>;
+
+export const AssemblyRepresentationPresetProvider = StructureRepresentationPresetProvider({
+    id: "rcsb-saguaro-3d",
+    display: {
+        name: 'Feature View 3D'
+    },
+    params(a: PluginStateObject.Molecule.Structure | undefined, plugin: PluginContext) {
+        return {};
+    },
+    async apply(structureRef: StateObjectRef<PluginStateObject.Molecule.Structure>, params: {}, plugin: PluginContext) {
+        const structureCell = StateObjectRef.resolveAndCheck(plugin.state.data, structureRef);
+        if(!structureCell)
+            return {};
+        const structure = structureCell.obj!.data;
+        const l = StructureElement.Location.create(structure);
+
+        const componentMap :  ComponentMapType = {}
+        const representationMap :  RepresentationMapType = {}
+
+        const chains: Set<string> = new Set();
+        for(const unit of structure.units) {
+            StructureElement.Location.set(l, structure, unit, unit.elements[0]);
+            const asymId = SP.chain.label_asym_id(l);
+            if(chains.has(asymId)) continue;
+            if(SP.entity.type(l) === "polymer"){
+                chains.add(asymId);
+                const authId = SP.chain.auth_asym_id(l);
+                const comp = await plugin.builders.structure.tryCreateComponentFromExpression(
+                    structureCell,
+                    MS.struct.generator.atomGroups({
+                        'chain-test': MS.core.logic.and([
+                            MS.core.rel.eq([MS.ammp('label_asym_id'), asymId])
+                        ])
+                    }),
+                    uniqid(`${asymId}`),
+                    {
+                        label: asymId == authId ? asymId : `${asymId} [${authId}]`
+                    }
+                );
+                componentMap[asymId] = comp;
+                //TODO This needs to be called after tryCreateComponentFromExpression
+                const {update, builder} = reprBuilder(plugin, {
+                    ignoreHydrogens: true,
+                    ignoreLight: false,
+                    quality: "auto"
+                });
+                representationMap[asymId] = builder.buildRepresentation(update, comp, {
+                    color: PLDDTConfidenceColorThemeProvider.isApplicable({ structure }) ? PLDDTConfidenceColorThemeProvider.name as ColorTheme.BuiltIn : "chain-id",
+                    type: "cartoon"
+                });
+
+                await update.commit({ revertOnError: false });
+            }
+        }
+
+        for(const expression of createSelectionExpressions("none")){
+            if(expression.tag == "polymer")
+                continue;
+            const comp = await plugin.builders.structure.tryCreateComponentFromExpression(
+                structureCell,
+                expression.expression,
+                uniqid(`${expression.tag}`),
+                {
+                    label: `${expression.tag}`
+                });
+            componentMap[expression.tag] = comp;
+            //TODO This needs to be called after tryCreateComponentFromExpression
+            const { update, builder } = reprBuilder(plugin, {
+                ignoreHydrogens: true,
+                ignoreLight: false,
+                quality: "auto"
+            });
+            representationMap[expression.tag] = builder.buildRepresentation(update, comp, {
+                type: expression.type
+            },{
+                initialState:{
+                    isHidden: expression.tag == "water" ? true : false
+                }
+            });
+            if (comp?.cell?.state && expression.tag == "water") {
+                StateTransform.assignState(comp?.cell?.state, { isHidden: true });
+            }
+
+            await update.commit({ revertOnError: false });
+        }
+
+        return {
+            components: componentMap,
+            representations: representationMap
+        };
+    }
+});

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

@@ -10,6 +10,7 @@ import {StateObject} from "molstar/lib/mol-state/object";
 import {StateTransformer} from "molstar/lib/mol-state/transformer";
 import {PluginContext} from "molstar/lib/mol-plugin/context";
 import {AlignmentTrajectoryParamsType} from "./AlignmentTrajectoryPresetProvider";
+import {AssemblyRepresentationPresetProvider} from "./AssemblyRepresentationPresetProvider";
 
 type StructureObject = StateObjectSelector<PluginStateObject.Molecule.Structure, StateTransformer<StateObject<any, StateObject.Type<any>>, StateObject<any, StateObject.Type<any>>, any>>
 
@@ -40,25 +41,8 @@ export const AssemblyTrajectoryPresetProvider = TrajectoryHierarchyPresetProvide
         );
         const structureProperties: StructureObject = await builder.insertStructureProperties(structure);
         const unitcell: StateObjectSelector | undefined = await builder.tryCreateUnitcell(modelProperties, undefined, { isHidden: true });
-        const representation: StructureRepresentationPresetProvider.Result | undefined = await plugin.builders.structure.representation.applyPreset(structureProperties, PresetStructureRepresentations.auto);
-        water:
-        for (const c of plugin.managers.structure.hierarchy.currentComponentGroups) {
-            for (const comp of c) {
-                if(comp.cell.obj?.label === "Water") {
-                    plugin.managers.structure.component.toggleVisibility(c);
-                    break water;
-                }
-            }
-        }
-        polymer:
-        for (const c of plugin.managers.structure.hierarchy.currentComponentGroups) {
-            for (const comp of c) {
-                if(comp.cell.obj?.label === "Polymer") {
-                    plugin.managers.structure.component.updateRepresentationsTheme([comp], { color: 'chain-id' });
-                    break polymer;
-                }
-            }
-        }
+        const representation: StructureRepresentationPresetProvider.Result | undefined = await plugin.builders.structure.representation.applyPreset(structureProperties, AssemblyRepresentationPresetProvider);
+
         return {
             model,
             modelProperties,
@@ -68,4 +52,5 @@ export const AssemblyTrajectoryPresetProvider = TrajectoryHierarchyPresetProvide
             representation
         };
     }
+
 });