all examples are fixed && webpack server multiple entry points

package-lock.json

@@ -1,18 +1,18 @@
 {
   "name": "@rcsb/rcsb-saguaro-3d",
-  "version": "1.5.0-models.5",
+  "version": "1.5.0-models.6",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@rcsb/rcsb-saguaro-3d",
-      "version": "1.5.0-models.5",
+      "version": "1.5.0-models.6",
       "license": "MIT",
       "dependencies": {
         "@rcsb/rcsb-api-tools": "^4.1.0-models.1",
         "@rcsb/rcsb-molstar": "^2.5.5",
         "@rcsb/rcsb-saguaro": "^2.1.7",
-        "@rcsb/rcsb-saguaro-app": "^4.4.0-models.34",
+        "@rcsb/rcsb-saguaro-app": "^4.4.0-models.35",
         "molstar": "^3.13.0"
       },
       "devDependencies": {
@@ -2463,15 +2463,6 @@
         "node": ">=10.12.0"
       }
     },
-    "node_modules/@popperjs/core": {
-      "version": "2.11.5",
-      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.5.tgz",
-      "integrity": "sha512-9X2obfABZuDVLCgPK9aX0a/x4jaOEweTTWE2+9sr0Qqqevj2Uv5XorvusThmc9XGYpS9yI+fhh8RTafBtGposw==",
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/popperjs"
-      }
-    },
     "node_modules/@rcsb/rcsb-api-tools": {
       "version": "4.1.0-models.1",
       "resolved": "https://registry.npmjs.org/@rcsb/rcsb-api-tools/-/rcsb-api-tools-4.1.0-models.1.tgz",
@@ -2499,13 +2490,11 @@
       }
     },
     "node_modules/@rcsb/rcsb-saguaro": {
-      "version": "2.1.7",
-      "resolved": "https://registry.npmjs.org/@rcsb/rcsb-saguaro/-/rcsb-saguaro-2.1.7.tgz",
-      "integrity": "sha512-O6hKDJ7xsWYCJeZURazeF/XOYIyqPohVvN7QTz5IjJgPcXfL162Cx1y05bNhcyLThOmDSSAZgWFfKhpfBYfNTA==",
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/@rcsb/rcsb-saguaro/-/rcsb-saguaro-2.2.0.tgz",
+      "integrity": "sha512-0WQWZaLZU9OO5lFKATmwI3F64iTocbhsuqapKUz9sGwfhiIJn+UQ1Wyg78d9QVrFD9tsAmwB3QFdqkdZ2DpmGw==",
       "dependencies": {
         "@d3fc/d3fc-sample": "^5.0.1",
-        "@popperjs/core": "^2.11.5",
-        "@types/d3": "^7.4.0",
         "d3": "^7.6.1",
         "d3-shape": "^3.1.0",
         "react": "^18.2.0",
@@ -2515,12 +2504,12 @@
       }
     },
     "node_modules/@rcsb/rcsb-saguaro-app": {
-      "version": "4.4.0-models.34",
-      "resolved": "https://registry.npmjs.org/@rcsb/rcsb-saguaro-app/-/rcsb-saguaro-app-4.4.0-models.34.tgz",
-      "integrity": "sha512-VtHVMtlZnKLoRJP2Elsyf63Ri1N9Rh4ynMpjUhqqjRmKwCf+BNG8kfzLBz762MmB3mZLe5EVraojM1H5SHqqIA==",
+      "version": "4.4.0-models.35",
+      "resolved": "https://registry.npmjs.org/@rcsb/rcsb-saguaro-app/-/rcsb-saguaro-app-4.4.0-models.35.tgz",
+      "integrity": "sha512-VSNX/lnBTh9WBVSS+p1i8VkKTpfYoZn3AsILD2/zaKBaKLx4PYn1MUSPNaJrwHIt/js0urS7mVajfmKAXk9lcw==",
       "dependencies": {
         "@rcsb/rcsb-api-tools": "^4.1.0-models.1",
-        "@rcsb/rcsb-saguaro": "^2.1.7",
+        "@rcsb/rcsb-saguaro": "^2.2.0",
         "react-select": "^5.4.0",
         "rxjs": "^7.5.5",
         "victory": "^36.5.0"
@@ -2608,142 +2597,21 @@
         "@types/node": "*"
       }
     },
-    "node_modules/@types/d3": {
-      "version": "7.4.0",
-      "resolved": "https://registry.npmjs.org/@types/d3/-/d3-7.4.0.tgz",
-      "integrity": "sha512-jIfNVK0ZlxcuRDKtRS/SypEyOQ6UHaFQBKv032X45VvxSJ6Yi5G9behy9h6tNTHTDGh5Vq+KbmBjUWLgY4meCA==",
-      "dependencies": {
-        "@types/d3-array": "*",
-        "@types/d3-axis": "*",
-        "@types/d3-brush": "*",
-        "@types/d3-chord": "*",
-        "@types/d3-color": "*",
-        "@types/d3-contour": "*",
-        "@types/d3-delaunay": "*",
-        "@types/d3-dispatch": "*",
-        "@types/d3-drag": "*",
-        "@types/d3-dsv": "*",
-        "@types/d3-ease": "*",
-        "@types/d3-fetch": "*",
-        "@types/d3-force": "*",
-        "@types/d3-format": "*",
-        "@types/d3-geo": "*",
-        "@types/d3-hierarchy": "*",
-        "@types/d3-interpolate": "*",
-        "@types/d3-path": "*",
-        "@types/d3-polygon": "*",
-        "@types/d3-quadtree": "*",
-        "@types/d3-random": "*",
-        "@types/d3-scale": "*",
-        "@types/d3-scale-chromatic": "*",
-        "@types/d3-selection": "*",
-        "@types/d3-shape": "*",
-        "@types/d3-time": "*",
-        "@types/d3-time-format": "*",
-        "@types/d3-timer": "*",
-        "@types/d3-transition": "*",
-        "@types/d3-zoom": "*"
-      }
-    },
     "node_modules/@types/d3-array": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.0.3.tgz",
       "integrity": "sha512-Reoy+pKnvsksN0lQUlcH6dOGjRZ/3WRwXR//m+/8lt1BXeI4xyaUZoqULNjyXXRuh0Mj4LNpkCvhUpQlY3X5xQ=="
     },
-    "node_modules/@types/d3-axis": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/@types/d3-axis/-/d3-axis-3.0.1.tgz",
-      "integrity": "sha512-zji/iIbdd49g9WN0aIsGcwcTBUkgLsCSwB+uH+LPVDAiKWENMtI3cJEWt+7/YYwelMoZmbBfzA3qCdrZ2XFNnw==",
-      "dependencies": {
-        "@types/d3-selection": "*"
-      }
-    },
-    "node_modules/@types/d3-brush": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/@types/d3-brush/-/d3-brush-3.0.1.tgz",
-      "integrity": "sha512-B532DozsiTuQMHu2YChdZU0qsFJSio3Q6jmBYGYNp3gMDzBmuFFgPt9qKA4VYuLZMp4qc6eX7IUFUEsvHiXZAw==",
-      "dependencies": {
-        "@types/d3-selection": "*"
-      }
-    },
-    "node_modules/@types/d3-chord": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/@types/d3-chord/-/d3-chord-3.0.1.tgz",
-      "integrity": "sha512-eQfcxIHrg7V++W8Qxn6QkqBNBokyhdWSAS73AbkbMzvLQmVVBviknoz2SRS/ZJdIOmhcmmdCRE/NFOm28Z1AMw=="
-    },
     "node_modules/@types/d3-color": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.0.tgz",
       "integrity": "sha512-HKuicPHJuvPgCD+np6Se9MQvS6OCbJmOjGvylzMJRlDwUXjKTTXs6Pwgk79O09Vj/ho3u1ofXnhFOaEWWPrlwA=="
     },
-    "node_modules/@types/d3-contour": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/@types/d3-contour/-/d3-contour-3.0.1.tgz",
-      "integrity": "sha512-C3zfBrhHZvrpAAK3YXqLWVAGo87A4SvJ83Q/zVJ8rFWJdKejUnDYaWZPkA8K84kb2vDA/g90LTQAz7etXcgoQQ==",
-      "dependencies": {
-        "@types/d3-array": "*",
-        "@types/geojson": "*"
-      }
-    },
-    "node_modules/@types/d3-delaunay": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/@types/d3-delaunay/-/d3-delaunay-6.0.1.tgz",
-      "integrity": "sha512-tLxQ2sfT0p6sxdG75c6f/ekqxjyYR0+LwPrsO1mbC9YDBzPJhs2HbJJRrn8Ez1DBoHRo2yx7YEATI+8V1nGMnQ=="
-    },
-    "node_modules/@types/d3-dispatch": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/@types/d3-dispatch/-/d3-dispatch-3.0.1.tgz",
-      "integrity": "sha512-NhxMn3bAkqhjoxabVJWKryhnZXXYYVQxaBnbANu0O94+O/nX9qSjrA1P1jbAQJxJf+VC72TxDX/YJcKue5bRqw=="
-    },
-    "node_modules/@types/d3-drag": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/@types/d3-drag/-/d3-drag-3.0.1.tgz",
-      "integrity": "sha512-o1Va7bLwwk6h03+nSM8dpaGEYnoIG19P0lKqlic8Un36ymh9NSkNFX1yiXMKNMx8rJ0Kfnn2eovuFaL6Jvj0zA==",
-      "dependencies": {
-        "@types/d3-selection": "*"
-      }
-    },
-    "node_modules/@types/d3-dsv": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/@types/d3-dsv/-/d3-dsv-3.0.0.tgz",
-      "integrity": "sha512-o0/7RlMl9p5n6FQDptuJVMxDf/7EDEv2SYEO/CwdG2tr1hTfUVi0Iavkk2ax+VpaQ/1jVhpnj5rq1nj8vwhn2A=="
-    },
     "node_modules/@types/d3-ease": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/@types/d3-ease/-/d3-ease-3.0.0.tgz",
       "integrity": "sha512-aMo4eaAOijJjA6uU+GIeW018dvy9+oH5Y2VPPzjjfxevvGQ/oRDs+tfYC9b50Q4BygRR8yE2QCLsrT0WtAVseA=="
     },
-    "node_modules/@types/d3-fetch": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/@types/d3-fetch/-/d3-fetch-3.0.1.tgz",
-      "integrity": "sha512-toZJNOwrOIqz7Oh6Q7l2zkaNfXkfR7mFSJvGvlD/Ciq/+SQ39d5gynHJZ/0fjt83ec3WL7+u3ssqIijQtBISsw==",
-      "dependencies": {
-        "@types/d3-dsv": "*"
-      }
-    },
-    "node_modules/@types/d3-force": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/@types/d3-force/-/d3-force-3.0.3.tgz",
-      "integrity": "sha512-z8GteGVfkWJMKsx6hwC3SiTSLspL98VNpmvLpEFJQpZPq6xpA1I8HNBDNSpukfK0Vb0l64zGFhzunLgEAcBWSA=="
-    },
-    "node_modules/@types/d3-format": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/@types/d3-format/-/d3-format-3.0.1.tgz",
-      "integrity": "sha512-5KY70ifCCzorkLuIkDe0Z9YTf9RR2CjBX1iaJG+rgM/cPP+sO+q9YdQ9WdhQcgPj1EQiJ2/0+yUkkziTG6Lubg=="
-    },
-    "node_modules/@types/d3-geo": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/@types/d3-geo/-/d3-geo-3.0.2.tgz",
-      "integrity": "sha512-DbqK7MLYA8LpyHQfv6Klz0426bQEf7bRTvhMy44sNGVyZoWn//B0c+Qbeg8Osi2Obdc9BLLXYAKpyWege2/7LQ==",
-      "dependencies": {
-        "@types/geojson": "*"
-      }
-    },
-    "node_modules/@types/d3-hierarchy": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/@types/d3-hierarchy/-/d3-hierarchy-3.1.0.tgz",
-      "integrity": "sha512-g+sey7qrCa3UbsQlMZZBOHROkFqx7KZKvUpRzI/tAp/8erZWpYq7FgNKvYwebi2LaEiVs1klhUfd3WCThxmmWQ=="
-    },
     "node_modules/@types/d3-interpolate": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
@@ -2757,21 +2625,6 @@
       "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-3.0.0.tgz",
       "integrity": "sha512-0g/A+mZXgFkQxN3HniRDbXMN79K3CdTpLsevj+PXiTcb2hVyvkZUBg37StmgCQkaD84cUJ4uaDAWq7UJOQy2Tg=="
     },
-    "node_modules/@types/d3-polygon": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/@types/d3-polygon/-/d3-polygon-3.0.0.tgz",
-      "integrity": "sha512-D49z4DyzTKXM0sGKVqiTDTYr+DHg/uxsiWDAkNrwXYuiZVd9o9wXZIo+YsHkifOiyBkmSWlEngHCQme54/hnHw=="
-    },
-    "node_modules/@types/d3-quadtree": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/@types/d3-quadtree/-/d3-quadtree-3.0.2.tgz",
-      "integrity": "sha512-QNcK8Jguvc8lU+4OfeNx+qnVy7c0VrDJ+CCVFS9srBo2GL9Y18CnIxBdTF3v38flrGy5s1YggcoAiu6s4fLQIw=="
-    },
-    "node_modules/@types/d3-random": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/@types/d3-random/-/d3-random-3.0.1.tgz",
-      "integrity": "sha512-IIE6YTekGczpLYo/HehAy3JGF1ty7+usI97LqraNa8IiDur+L44d0VOjAvFQWJVdZOJHukUJw+ZdZBlgeUsHOQ=="
-    },
     "node_modules/@types/d3-scale": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.2.tgz",
@@ -2780,16 +2633,6 @@
         "@types/d3-time": "*"
       }
     },
-    "node_modules/@types/d3-scale-chromatic": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/@types/d3-scale-chromatic/-/d3-scale-chromatic-3.0.0.tgz",
-      "integrity": "sha512-dsoJGEIShosKVRBZB0Vo3C8nqSDqVGujJU6tPznsBJxNJNwMF8utmS83nvCBKQYPpjCzaaHcrf66iTRpZosLPw=="
-    },
-    "node_modules/@types/d3-selection": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/@types/d3-selection/-/d3-selection-3.0.3.tgz",
-      "integrity": "sha512-Mw5cf6nlW1MlefpD9zrshZ+DAWL4IQ5LnWfRheW6xwsdaWOb6IRRu2H7XPAQcyXEx1D7XQWgdoKR83ui1/HlEA=="
-    },
     "node_modules/@types/d3-shape": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.1.0.tgz",
@@ -2803,33 +2646,11 @@
       "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.0.tgz",
       "integrity": "sha512-sZLCdHvBUcNby1cB6Fd3ZBrABbjz3v1Vm90nysCQ6Vt7vd6e/h9Lt7SiJUoEX0l4Dzc7P5llKyhqSi1ycSf1Hg=="
     },
-    "node_modules/@types/d3-time-format": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/@types/d3-time-format/-/d3-time-format-4.0.0.tgz",
-      "integrity": "sha512-yjfBUe6DJBsDin2BMIulhSHmr5qNR5Pxs17+oW4DoVPyVIXZ+m6bs7j1UVKP08Emv6jRmYrYqxYzO63mQxy1rw=="
-    },
     "node_modules/@types/d3-timer": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-3.0.0.tgz",
       "integrity": "sha512-HNB/9GHqu7Fo8AQiugyJbv6ZxYz58wef0esl4Mv828w1ZKpAshw/uFWVDUcIB9KKFeFKoxS3cHY07FFgtTRZ1g=="
     },
-    "node_modules/@types/d3-transition": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/@types/d3-transition/-/d3-transition-3.0.1.tgz",
-      "integrity": "sha512-Sv4qEI9uq3bnZwlOANvYK853zvpdKEm1yz9rcc8ZTsxvRklcs9Fx4YFuGA3gXoQN/c/1T6QkVNjhaRO/cWj94g==",
-      "dependencies": {
-        "@types/d3-selection": "*"
-      }
-    },
-    "node_modules/@types/d3-zoom": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/@types/d3-zoom/-/d3-zoom-3.0.1.tgz",
-      "integrity": "sha512-7s5L9TjfqIYQmQQEUcpMAcBOahem7TRoSO/+Gkz02GbMVuULiZzjF2BOdw291dbO2aNon4m2OdFsRGaCq2caLQ==",
-      "dependencies": {
-        "@types/d3-interpolate": "*",
-        "@types/d3-selection": "*"
-      }
-    },
     "node_modules/@types/eslint": {
       "version": "8.4.1",
       "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.4.1.tgz",
@@ -2877,11 +2698,6 @@
         "@types/range-parser": "*"
       }
     },
-    "node_modules/@types/geojson": {
-      "version": "7946.0.10",
-      "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.10.tgz",
-      "integrity": "sha512-Nmh0K3iWQJzniTuPRcJn5hxXkfB1T1pgB89SBig5PlJQU5yocazeu4jATJlaA0GYFKWMqDdvYemoSnF2pXgLVA=="
-    },
     "node_modules/@types/html-minifier-terser": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz",
@@ -11208,9 +11024,9 @@
       }
     },
     "node_modules/undici": {
-      "version": "5.8.0",
-      "resolved": "https://registry.npmjs.org/undici/-/undici-5.8.0.tgz",
-      "integrity": "sha512-1F7Vtcez5w/LwH2G2tGnFIihuWUlc58YidwLiCv+jR2Z50x0tNXpRRw7eOIJ+GvqCqIkg9SB7NWAJ/T9TLfv8Q==",
+      "version": "5.9.1",
+      "resolved": "https://registry.npmjs.org/undici/-/undici-5.9.1.tgz",
+      "integrity": "sha512-6fB3a+SNnWEm4CJbgo0/CWR8RGcOCQP68SF4X0mxtYTq2VNN8T88NYrWVBAeSX+zb7bny2dx2iYhP3XHi00omg==",
       "engines": {
         "node": ">=12.18"
       }
@@ -14194,11 +14010,6 @@
         "webcrypto-core": "^1.7.4"
       }
     },
-    "@popperjs/core": {
-      "version": "2.11.5",
-      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.5.tgz",
-      "integrity": "sha512-9X2obfABZuDVLCgPK9aX0a/x4jaOEweTTWE2+9sr0Qqqevj2Uv5XorvusThmc9XGYpS9yI+fhh8RTafBtGposw=="
-    },
     "@rcsb/rcsb-api-tools": {
       "version": "4.1.0-models.1",
       "resolved": "https://registry.npmjs.org/@rcsb/rcsb-api-tools/-/rcsb-api-tools-4.1.0-models.1.tgz",
@@ -14226,13 +14037,11 @@
       }
     },
     "@rcsb/rcsb-saguaro": {
-      "version": "2.1.7",
-      "resolved": "https://registry.npmjs.org/@rcsb/rcsb-saguaro/-/rcsb-saguaro-2.1.7.tgz",
-      "integrity": "sha512-O6hKDJ7xsWYCJeZURazeF/XOYIyqPohVvN7QTz5IjJgPcXfL162Cx1y05bNhcyLThOmDSSAZgWFfKhpfBYfNTA==",
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/@rcsb/rcsb-saguaro/-/rcsb-saguaro-2.2.0.tgz",
+      "integrity": "sha512-0WQWZaLZU9OO5lFKATmwI3F64iTocbhsuqapKUz9sGwfhiIJn+UQ1Wyg78d9QVrFD9tsAmwB3QFdqkdZ2DpmGw==",
       "requires": {
         "@d3fc/d3fc-sample": "^5.0.1",
-        "@popperjs/core": "^2.11.5",
-        "@types/d3": "^7.4.0",
         "d3": "^7.6.1",
         "d3-shape": "^3.1.0",
         "react": "^18.2.0",
@@ -14242,12 +14051,12 @@
       }
     },
     "@rcsb/rcsb-saguaro-app": {
-      "version": "4.4.0-models.34",
-      "resolved": "https://registry.npmjs.org/@rcsb/rcsb-saguaro-app/-/rcsb-saguaro-app-4.4.0-models.34.tgz",
-      "integrity": "sha512-VtHVMtlZnKLoRJP2Elsyf63Ri1N9Rh4ynMpjUhqqjRmKwCf+BNG8kfzLBz762MmB3mZLe5EVraojM1H5SHqqIA==",
+      "version": "4.4.0-models.35",
+      "resolved": "https://registry.npmjs.org/@rcsb/rcsb-saguaro-app/-/rcsb-saguaro-app-4.4.0-models.35.tgz",
+      "integrity": "sha512-VSNX/lnBTh9WBVSS+p1i8VkKTpfYoZn3AsILD2/zaKBaKLx4PYn1MUSPNaJrwHIt/js0urS7mVajfmKAXk9lcw==",
       "requires": {
         "@rcsb/rcsb-api-tools": "^4.1.0-models.1",
-        "@rcsb/rcsb-saguaro": "^2.1.7",
+        "@rcsb/rcsb-saguaro": "^2.2.0",
         "react-select": "^5.4.0",
         "rxjs": "^7.5.5",
         "victory": "^36.5.0"
@@ -14332,142 +14141,21 @@
         "@types/node": "*"
       }
     },
-    "@types/d3": {
-      "version": "7.4.0",
-      "resolved": "https://registry.npmjs.org/@types/d3/-/d3-7.4.0.tgz",
-      "integrity": "sha512-jIfNVK0ZlxcuRDKtRS/SypEyOQ6UHaFQBKv032X45VvxSJ6Yi5G9behy9h6tNTHTDGh5Vq+KbmBjUWLgY4meCA==",
-      "requires": {
-        "@types/d3-array": "*",
-        "@types/d3-axis": "*",
-        "@types/d3-brush": "*",
-        "@types/d3-chord": "*",
-        "@types/d3-color": "*",
-        "@types/d3-contour": "*",
-        "@types/d3-delaunay": "*",
-        "@types/d3-dispatch": "*",
-        "@types/d3-drag": "*",
-        "@types/d3-dsv": "*",
-        "@types/d3-ease": "*",
-        "@types/d3-fetch": "*",
-        "@types/d3-force": "*",
-        "@types/d3-format": "*",
-        "@types/d3-geo": "*",
-        "@types/d3-hierarchy": "*",
-        "@types/d3-interpolate": "*",
-        "@types/d3-path": "*",
-        "@types/d3-polygon": "*",
-        "@types/d3-quadtree": "*",
-        "@types/d3-random": "*",
-        "@types/d3-scale": "*",
-        "@types/d3-scale-chromatic": "*",
-        "@types/d3-selection": "*",
-        "@types/d3-shape": "*",
-        "@types/d3-time": "*",
-        "@types/d3-time-format": "*",
-        "@types/d3-timer": "*",
-        "@types/d3-transition": "*",
-        "@types/d3-zoom": "*"
-      }
-    },
     "@types/d3-array": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.0.3.tgz",
       "integrity": "sha512-Reoy+pKnvsksN0lQUlcH6dOGjRZ/3WRwXR//m+/8lt1BXeI4xyaUZoqULNjyXXRuh0Mj4LNpkCvhUpQlY3X5xQ=="
     },
-    "@types/d3-axis": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/@types/d3-axis/-/d3-axis-3.0.1.tgz",
-      "integrity": "sha512-zji/iIbdd49g9WN0aIsGcwcTBUkgLsCSwB+uH+LPVDAiKWENMtI3cJEWt+7/YYwelMoZmbBfzA3qCdrZ2XFNnw==",
-      "requires": {
-        "@types/d3-selection": "*"
-      }
-    },
-    "@types/d3-brush": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/@types/d3-brush/-/d3-brush-3.0.1.tgz",
-      "integrity": "sha512-B532DozsiTuQMHu2YChdZU0qsFJSio3Q6jmBYGYNp3gMDzBmuFFgPt9qKA4VYuLZMp4qc6eX7IUFUEsvHiXZAw==",
-      "requires": {
-        "@types/d3-selection": "*"
-      }
-    },
-    "@types/d3-chord": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/@types/d3-chord/-/d3-chord-3.0.1.tgz",
-      "integrity": "sha512-eQfcxIHrg7V++W8Qxn6QkqBNBokyhdWSAS73AbkbMzvLQmVVBviknoz2SRS/ZJdIOmhcmmdCRE/NFOm28Z1AMw=="
-    },
     "@types/d3-color": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.0.tgz",
       "integrity": "sha512-HKuicPHJuvPgCD+np6Se9MQvS6OCbJmOjGvylzMJRlDwUXjKTTXs6Pwgk79O09Vj/ho3u1ofXnhFOaEWWPrlwA=="
     },
-    "@types/d3-contour": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/@types/d3-contour/-/d3-contour-3.0.1.tgz",
-      "integrity": "sha512-C3zfBrhHZvrpAAK3YXqLWVAGo87A4SvJ83Q/zVJ8rFWJdKejUnDYaWZPkA8K84kb2vDA/g90LTQAz7etXcgoQQ==",
-      "requires": {
-        "@types/d3-array": "*",
-        "@types/geojson": "*"
-      }
-    },
-    "@types/d3-delaunay": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/@types/d3-delaunay/-/d3-delaunay-6.0.1.tgz",
-      "integrity": "sha512-tLxQ2sfT0p6sxdG75c6f/ekqxjyYR0+LwPrsO1mbC9YDBzPJhs2HbJJRrn8Ez1DBoHRo2yx7YEATI+8V1nGMnQ=="
-    },
-    "@types/d3-dispatch": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/@types/d3-dispatch/-/d3-dispatch-3.0.1.tgz",
-      "integrity": "sha512-NhxMn3bAkqhjoxabVJWKryhnZXXYYVQxaBnbANu0O94+O/nX9qSjrA1P1jbAQJxJf+VC72TxDX/YJcKue5bRqw=="
-    },
-    "@types/d3-drag": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/@types/d3-drag/-/d3-drag-3.0.1.tgz",
-      "integrity": "sha512-o1Va7bLwwk6h03+nSM8dpaGEYnoIG19P0lKqlic8Un36ymh9NSkNFX1yiXMKNMx8rJ0Kfnn2eovuFaL6Jvj0zA==",
-      "requires": {
-        "@types/d3-selection": "*"
-      }
-    },
-    "@types/d3-dsv": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/@types/d3-dsv/-/d3-dsv-3.0.0.tgz",
-      "integrity": "sha512-o0/7RlMl9p5n6FQDptuJVMxDf/7EDEv2SYEO/CwdG2tr1hTfUVi0Iavkk2ax+VpaQ/1jVhpnj5rq1nj8vwhn2A=="
-    },
     "@types/d3-ease": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/@types/d3-ease/-/d3-ease-3.0.0.tgz",
       "integrity": "sha512-aMo4eaAOijJjA6uU+GIeW018dvy9+oH5Y2VPPzjjfxevvGQ/oRDs+tfYC9b50Q4BygRR8yE2QCLsrT0WtAVseA=="
     },
-    "@types/d3-fetch": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/@types/d3-fetch/-/d3-fetch-3.0.1.tgz",
-      "integrity": "sha512-toZJNOwrOIqz7Oh6Q7l2zkaNfXkfR7mFSJvGvlD/Ciq/+SQ39d5gynHJZ/0fjt83ec3WL7+u3ssqIijQtBISsw==",
-      "requires": {
-        "@types/d3-dsv": "*"
-      }
-    },
-    "@types/d3-force": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/@types/d3-force/-/d3-force-3.0.3.tgz",
-      "integrity": "sha512-z8GteGVfkWJMKsx6hwC3SiTSLspL98VNpmvLpEFJQpZPq6xpA1I8HNBDNSpukfK0Vb0l64zGFhzunLgEAcBWSA=="
-    },
-    "@types/d3-format": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/@types/d3-format/-/d3-format-3.0.1.tgz",
-      "integrity": "sha512-5KY70ifCCzorkLuIkDe0Z9YTf9RR2CjBX1iaJG+rgM/cPP+sO+q9YdQ9WdhQcgPj1EQiJ2/0+yUkkziTG6Lubg=="
-    },
-    "@types/d3-geo": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/@types/d3-geo/-/d3-geo-3.0.2.tgz",
-      "integrity": "sha512-DbqK7MLYA8LpyHQfv6Klz0426bQEf7bRTvhMy44sNGVyZoWn//B0c+Qbeg8Osi2Obdc9BLLXYAKpyWege2/7LQ==",
-      "requires": {
-        "@types/geojson": "*"
-      }
-    },
-    "@types/d3-hierarchy": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/@types/d3-hierarchy/-/d3-hierarchy-3.1.0.tgz",
-      "integrity": "sha512-g+sey7qrCa3UbsQlMZZBOHROkFqx7KZKvUpRzI/tAp/8erZWpYq7FgNKvYwebi2LaEiVs1klhUfd3WCThxmmWQ=="
-    },
     "@types/d3-interpolate": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
@@ -14481,21 +14169,6 @@
       "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-3.0.0.tgz",
       "integrity": "sha512-0g/A+mZXgFkQxN3HniRDbXMN79K3CdTpLsevj+PXiTcb2hVyvkZUBg37StmgCQkaD84cUJ4uaDAWq7UJOQy2Tg=="
     },
-    "@types/d3-polygon": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/@types/d3-polygon/-/d3-polygon-3.0.0.tgz",
-      "integrity": "sha512-D49z4DyzTKXM0sGKVqiTDTYr+DHg/uxsiWDAkNrwXYuiZVd9o9wXZIo+YsHkifOiyBkmSWlEngHCQme54/hnHw=="
-    },
-    "@types/d3-quadtree": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/@types/d3-quadtree/-/d3-quadtree-3.0.2.tgz",
-      "integrity": "sha512-QNcK8Jguvc8lU+4OfeNx+qnVy7c0VrDJ+CCVFS9srBo2GL9Y18CnIxBdTF3v38flrGy5s1YggcoAiu6s4fLQIw=="
-    },
-    "@types/d3-random": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/@types/d3-random/-/d3-random-3.0.1.tgz",
-      "integrity": "sha512-IIE6YTekGczpLYo/HehAy3JGF1ty7+usI97LqraNa8IiDur+L44d0VOjAvFQWJVdZOJHukUJw+ZdZBlgeUsHOQ=="
-    },
     "@types/d3-scale": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.2.tgz",
@@ -14504,16 +14177,6 @@
         "@types/d3-time": "*"
       }
     },
-    "@types/d3-scale-chromatic": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/@types/d3-scale-chromatic/-/d3-scale-chromatic-3.0.0.tgz",
-      "integrity": "sha512-dsoJGEIShosKVRBZB0Vo3C8nqSDqVGujJU6tPznsBJxNJNwMF8utmS83nvCBKQYPpjCzaaHcrf66iTRpZosLPw=="
-    },
-    "@types/d3-selection": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/@types/d3-selection/-/d3-selection-3.0.3.tgz",
-      "integrity": "sha512-Mw5cf6nlW1MlefpD9zrshZ+DAWL4IQ5LnWfRheW6xwsdaWOb6IRRu2H7XPAQcyXEx1D7XQWgdoKR83ui1/HlEA=="
-    },
     "@types/d3-shape": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.1.0.tgz",
@@ -14527,33 +14190,11 @@
       "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.0.tgz",
       "integrity": "sha512-sZLCdHvBUcNby1cB6Fd3ZBrABbjz3v1Vm90nysCQ6Vt7vd6e/h9Lt7SiJUoEX0l4Dzc7P5llKyhqSi1ycSf1Hg=="
     },
-    "@types/d3-time-format": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/@types/d3-time-format/-/d3-time-format-4.0.0.tgz",
-      "integrity": "sha512-yjfBUe6DJBsDin2BMIulhSHmr5qNR5Pxs17+oW4DoVPyVIXZ+m6bs7j1UVKP08Emv6jRmYrYqxYzO63mQxy1rw=="
-    },
     "@types/d3-timer": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-3.0.0.tgz",
       "integrity": "sha512-HNB/9GHqu7Fo8AQiugyJbv6ZxYz58wef0esl4Mv828w1ZKpAshw/uFWVDUcIB9KKFeFKoxS3cHY07FFgtTRZ1g=="
     },
-    "@types/d3-transition": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/@types/d3-transition/-/d3-transition-3.0.1.tgz",
-      "integrity": "sha512-Sv4qEI9uq3bnZwlOANvYK853zvpdKEm1yz9rcc8ZTsxvRklcs9Fx4YFuGA3gXoQN/c/1T6QkVNjhaRO/cWj94g==",
-      "requires": {
-        "@types/d3-selection": "*"
-      }
-    },
-    "@types/d3-zoom": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/@types/d3-zoom/-/d3-zoom-3.0.1.tgz",
-      "integrity": "sha512-7s5L9TjfqIYQmQQEUcpMAcBOahem7TRoSO/+Gkz02GbMVuULiZzjF2BOdw291dbO2aNon4m2OdFsRGaCq2caLQ==",
-      "requires": {
-        "@types/d3-interpolate": "*",
-        "@types/d3-selection": "*"
-      }
-    },
     "@types/eslint": {
       "version": "8.4.1",
       "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.4.1.tgz",
@@ -14601,11 +14242,6 @@
         "@types/range-parser": "*"
       }
     },
-    "@types/geojson": {
-      "version": "7946.0.10",
-      "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.10.tgz",
-      "integrity": "sha512-Nmh0K3iWQJzniTuPRcJn5hxXkfB1T1pgB89SBig5PlJQU5yocazeu4jATJlaA0GYFKWMqDdvYemoSnF2pXgLVA=="
-    },
     "@types/html-minifier-terser": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz",
@@ -20816,9 +20452,9 @@
       }
     },
     "undici": {
-      "version": "5.8.0",
-      "resolved": "https://registry.npmjs.org/undici/-/undici-5.8.0.tgz",
-      "integrity": "sha512-1F7Vtcez5w/LwH2G2tGnFIihuWUlc58YidwLiCv+jR2Z50x0tNXpRRw7eOIJ+GvqCqIkg9SB7NWAJ/T9TLfv8Q=="
+      "version": "5.9.1",
+      "resolved": "https://registry.npmjs.org/undici/-/undici-5.9.1.tgz",
+      "integrity": "sha512-6fB3a+SNnWEm4CJbgo0/CWR8RGcOCQP68SF4X0mxtYTq2VNN8T88NYrWVBAeSX+zb7bny2dx2iYhP3XHi00omg=="
     },
     "unicode-canonical-property-names-ecmascript": {
       "version": "2.0.0",

package.json

@@ -1,12 +1,13 @@
 {
   "name": "@rcsb/rcsb-saguaro-3d",
-  "version": "1.5.0-models.6",
+  "version": "1.5.0-models.7",
   "description": "RCSB Molstar/Saguaro Web App",
   "main": "build/dist/app.js",
   "files": [
     "build/dist"
   ],
   "scripts": {
+    "devServer": "webpack-dev-server --config webpack.server.dev.config.js",
     "tsc": "tsc --incremental",
     "build": "webpack --config ./webpack.config.js",
     "buildAll": "npm run cleanAll && npm run tsc && npm run cpStyles && npm run copyConfig && npm run build && npm run buildDoc",
@@ -80,7 +81,7 @@
     "@rcsb/rcsb-api-tools": "^4.1.0-models.1",
     "@rcsb/rcsb-molstar": "^2.5.5",
     "@rcsb/rcsb-saguaro": "^2.1.7",
-    "@rcsb/rcsb-saguaro-app": "^4.4.0-models.34",
+    "@rcsb/rcsb-saguaro-app": "^4.4.0-models.35",
     "molstar": "^3.13.0"
   },
   "bugs": {

src/RcsbFv3D/RcsbFv3DAssembly.tsx

@@ -55,7 +55,6 @@ export class RcsbFv3DAssembly extends RcsbFv3DAbstract<{instanceSequenceConfig?:
                     callbackManagerFactory: new AssemblyCallbackManagerFactory<LoadMolstarInterface>()
                 }
             },
-            structureViewer: new StructureViewer<LoadMolstarInterface,{viewerElement:string|HTMLElement,viewerProps:Partial<ViewerProps>}>(new MolstarManagerFactory()),
             structureConfig: {
                 loadConfig: {
                     loadMethod: LoadMethod.loadPdbId,
@@ -75,6 +74,7 @@ export class RcsbFv3DAssembly extends RcsbFv3DAbstract<{instanceSequenceConfig?:
                     viewerProps:params.molstarProps ?? {}
                 }
             },
+            structureViewer: new StructureViewer<LoadMolstarInterface,{viewerElement:string|HTMLElement,viewerProps:Partial<ViewerProps>}>(new MolstarManagerFactory()),
             cssConfig: params.cssConfig
         });
     }

src/RcsbFv3D/RcsbFv3DCustom.tsx

@@ -1,5 +1,5 @@
 
-import {RcsbFvStructureConfigInterface} from "../RcsbFvStructure/RcsbFvStructure";
+import {RcsbFvStructure, RcsbFvStructureConfigInterface} from "../RcsbFvStructure/RcsbFvStructure";
 import {CustomViewInterface} from "../RcsbFvSequence/SequenceViews/CustomView/CustomView";
 import {RcsbFv3DAbstract, RcsbFv3DAbstractInterface} from "./RcsbFv3DAbstract";
 import uniqid from "uniqid";
@@ -8,28 +8,39 @@ import {LoadMolstarInterface} from "../RcsbFvStructure/StructureViewers/MolstarV
 import {ViewerProps} from "@rcsb/rcsb-molstar/build/src/viewer";
 import {StructureViewer} from "../RcsbFvStructure/StructureViewers/StructureViewer";
 import {MolstarManagerFactory} from "../RcsbFvStructure/StructureViewers/MolstarViewer/MolstarManagerFactory";
+import {RcsbFv3DCssConfig} from "./RcsbFv3DComponent";
 
-export interface RcsbFv3DCustomInterface extends RcsbFv3DAbstractInterface<{},LoadMolstarInterface,{viewerElement:string|HTMLElement,viewerProps:Partial<ViewerProps>},undefined> {
-    structurePanelConfig: RcsbFvStructureConfigInterface<LoadMolstarInterface,{viewerElement:string|HTMLElement,viewerProps:Partial<ViewerProps>}>;
+export interface RcsbFv3DCustomInterface  {
+    elementId?: string;
+    structurePanelConfig: RcsbFvStructureConfigInterface<LoadMolstarInterface,{viewerProps:Partial<ViewerProps>}>;
     sequencePanelConfig: {
         config: CustomViewInterface<LoadMolstarInterface>;
         title?: string;
         subtitle?: string;
-    };
+    }
+    cssConfig?: RcsbFv3DCssConfig;
+
 }
 
 export class RcsbFv3DCustom extends RcsbFv3DAbstract<{},LoadMolstarInterface,{viewerElement:string|HTMLElement,viewerProps:Partial<ViewerProps>},undefined> {
 
-    constructor(config: RcsbFv3DCustomInterface) {
+    constructor(params: RcsbFv3DCustomInterface) {
+        const elementId: string = params.elementId ?? uniqid("RcsbFv3D_");
         super({
-            elementId: config.elementId ?? "RcsbFv3D_mainDiv_" + uniqid(),
-            structureConfig: config.structurePanelConfig,
+            elementId: elementId,
+            structureConfig: {
+                loadConfig: params.structurePanelConfig.loadConfig,
+                pluginConfig:{
+                    ...params.structurePanelConfig.pluginConfig,
+                    viewerElement:RcsbFvStructure.componentId(elementId),
+                }
+            },
             sequenceConfig:{
-                ...config.sequencePanelConfig,
-                type:"custom"
+                ...params.sequencePanelConfig,
+                type:"custom",
             },
             structureViewer:new StructureViewer<LoadMolstarInterface,{viewerElement:string|HTMLElement,viewerProps:Partial<ViewerProps>}>( new MolstarManagerFactory() ),
-            cssConfig: config.cssConfig
+            cssConfig: params.cssConfig
         });
     }
 

src/RcsbFv3D/RcsbFv3DUniprot.tsx

@@ -1,4 +1,4 @@
-import {RcsbFv3DAbstract, RcsbFv3DAbstractInterface} from "./RcsbFv3DAbstract";
+import {RcsbFv3DAbstract} from "./RcsbFv3DAbstract";
 import {
     RcsbFvAdditionalConfig,
     RcsbFvModulePublicInterface
@@ -19,8 +19,11 @@ import {
 import {
     UniprotCallbackManagerFactory
 } from "../RcsbFvSequence/SequenceViews/RcsbView/CallbackManagerFactoryImplementation/UniprotCallbackManager";
+import {RcsbFvStructure} from "../RcsbFvStructure/RcsbFvStructure";
+import {RcsbFv3DCssConfig} from "./RcsbFv3DComponent";
 
-export interface RcsbFv3DUniprotInterface extends RcsbFv3DAbstractInterface<{upAcc:string},LoadMolstarInterface,{viewerElement:string|HTMLElement,viewerProps:Partial<ViewerProps>},{context:UniprotSequenceOnchangeInterface,module:RcsbFvModulePublicInterface}> {
+export interface RcsbFv3DUniprotInterface  {
+    elementId?: string;
     config: {
         upAcc: string;
         title?: string;
@@ -28,22 +31,14 @@ export interface RcsbFv3DUniprotInterface extends RcsbFv3DAbstractInterface<{upA
     };
     additionalConfig?:RcsbFvAdditionalConfig;
     molstarProps?: Partial<ViewerProps>;
+    cssConfig?: RcsbFv3DCssConfig;
 }
 
 export class RcsbFv3DUniprot extends RcsbFv3DAbstract<{upAcc:string},LoadMolstarInterface,{viewerElement:string|HTMLElement,viewerProps:Partial<ViewerProps>},{context:UniprotSequenceOnchangeInterface,module:RcsbFvModulePublicInterface}> {
     constructor(params:RcsbFv3DUniprotInterface){
+        const elementId: string = params.elementId ?? uniqid("RcsbFv3D_");
         super({
-            elementId:params.elementId ?? "RcsbFv3D_mainDiv_"+uniqid(),
-            structureConfig: {
-                loadConfig: {
-                    loadMethod: LoadMethod.loadPdbId,
-                    loadParams: []
-                },
-                pluginConfig: {
-                    viewerElement: params.elementId,
-                    viewerProps: params.molstarProps ?? {}
-                }
-            },
+            elementId,
             sequenceConfig:{
                 type: "rcsb",
                 config:{
@@ -64,6 +59,16 @@ export class RcsbFv3DUniprot extends RcsbFv3DAbstract<{upAcc:string},LoadMolstar
                     })
                 }
             },
+            structureConfig: {
+                loadConfig: {
+                    loadMethod: LoadMethod.loadPdbId,
+                    loadParams: []
+                },
+                pluginConfig: {
+                    viewerElement:RcsbFvStructure.componentId(elementId),
+                    viewerProps: params.molstarProps ?? {}
+                }
+            },
             structureViewer: new StructureViewer<LoadMolstarInterface,{viewerElement:string|HTMLElement,viewerProps:Partial<ViewerProps>}>( new MolstarManagerFactory() ),
         });
     }

src/RcsbFvStructure/StructureViewerInterface.ts

@@ -35,7 +35,7 @@ export interface StructureViewerInterface<R,S> extends StructureViewerPublicInte
     init: (selection: RcsbFvSelectorManager, args:S) => void;
 }
 
-export interface StructureViewerPublicInterface<T> extends ViewerActionManagerInterface<T>{}
+export interface StructureViewerPublicInterface<R> extends ViewerActionManagerInterface<R>{}
 
 export interface ViewerManagerFactoryInterface<R,S extends {}> {
     getViewerManagerFactory(selection: RcsbFvSelectorManager, args: S): {callbackManager:ViewerCallbackManagerInterface;actionManager:ViewerActionManagerInterface<R>};

src/examples/structural-alignment/index.tsx → src/examples/css-config/index.ts

@@ -1,6 +1,5 @@
 import {RcsbFv3DCustom, RcsbFv3DCustomInterface} from "../../RcsbFv3D/RcsbFv3DCustom";
 import {RcsbFvStructureConfigInterface} from "../../RcsbFvStructure/RcsbFvStructure";
-import {LoadMethod} from "../../RcsbFvStructure/StructureViewers/StructureViewer";
 import {
     CustomViewInterface,
     FeatureBlockInterface,
@@ -20,6 +19,11 @@ import {
 import {StructureViewerPublicInterface, SaguaroRegionList} from "../../RcsbFvStructure/StructureViewerInterface";
 import {AlignmentManager} from "./AlignmentManager";
 import {Mat4} from "molstar/lib/mol-math/linear-algebra";
+import {
+    LoadMethod,
+    LoadMolstarInterface
+} from "../../RcsbFvStructure/StructureViewers/MolstarViewer/MolstarActionManager";
+import {ViewerProps} from "@rcsb/rcsb-molstar/build/src/viewer";
 
 const sequence_101m: string = "MVLSEGEWQLVLHVWAKVEADVAGHGQDILIRLFKSHPETLEKFDRVKHLKTEAEMKASEDLKKHGVTVLTALGAILKKKGHHEAELKPLAQSHATKHKIPIKYLEFISEAIIHVLHSRHPGNFGADAQGAMNKALELFRKDIAAKYKELGYQG";
 const alignment = [{
@@ -96,18 +100,20 @@ const rowConfig: Array<RcsbFvRowConfigInterface> = [
     }
 ];
 
-const fvConfig: FeatureViewInterface = {
+const fvConfig: FeatureViewInterface<LoadMolstarInterface> = {
     boardId:"1ash_board",
     boardConfig: {
         range: {
             min: 1,
             max: 150
         },
-        rowTitleWidth: 190,
+        disableMenu:true,
+        rowTitleWidth: 70,
+        trackWidth: 530,
         includeAxis: true
     },
     rowConfig: rowConfig,
-    sequenceSelectionChangeCallback: (plugin: StructureViewerPublicInterface, selectorManager: RcsbFvSelectorManager, sequenceRegion: Array<RcsbFvTrackDataElementInterface>) => {
+    sequenceSelectionChangeCallback: (plugin: StructureViewerPublicInterface<LoadMolstarInterface>, selectorManager: RcsbFvSelectorManager, sequenceRegion: Array<RcsbFvTrackDataElementInterface>) => {
         selectorManager.clearSelection("select", {modelId:"1ash_model", labelAsymId:"A"});
         selectorManager.clearSelection("select", {modelId:"101m_model", labelAsymId:"A"});
         if(sequenceRegion.length > 0) {
@@ -134,7 +140,7 @@ const fvConfig: FeatureViewInterface = {
             plugin.resetCamera();
         }
     },
-    sequenceElementClickCallback: async (plugin: StructureViewerPublicInterface, selectorManager: RcsbFvSelectorManager, d: RcsbFvTrackDataElementInterface) => {
+    sequenceElementClickCallback: async (plugin: StructureViewerPublicInterface<LoadMolstarInterface>, selectorManager: RcsbFvSelectorManager, d: RcsbFvTrackDataElementInterface) => {
         plugin.removeComponent("1ash_component");
         plugin.removeComponent("101m_component");
         if(d.begin === d.end || !d.end){
@@ -142,7 +148,7 @@ const fvConfig: FeatureViewInterface = {
             await plugin.createComponent("101m_component", "101m_model", "A", alignmentManager.getTargetPosition(d.begin)!, alignmentManager.getTargetPosition(d.begin)!, "ball-and-stick");
         }
     },
-    sequenceHoverCallback: (plugin: StructureViewerPublicInterface, selectorManager: RcsbFvSelectorManager, elements: Array<RcsbFvTrackDataElementInterface>) => {
+    sequenceHoverCallback: (plugin: StructureViewerPublicInterface<LoadMolstarInterface>, selectorManager: RcsbFvSelectorManager, elements: Array<RcsbFvTrackDataElementInterface>) => {
         if (elements == null || elements.length == 0){
             plugin.clearSelection("hover");
         }else {
@@ -162,7 +168,7 @@ const fvConfig: FeatureViewInterface = {
                 ), "hover", "set");
         }
     },
-    structureSelectionCallback: (plugin: StructureViewerPublicInterface, pfv: RcsbFv, selection: RcsbFvSelectorManager) => {
+    structureSelectionCallback: (plugin: StructureViewerPublicInterface<LoadMolstarInterface>, pfv: RcsbFv, selection: RcsbFvSelectorManager) => {
         const sel_1ash: SaguaroRegionList | undefined = selection.getSelectionWithCondition("1ash_model", "A", "select");
         const sel_101m: SaguaroRegionList | undefined = selection.getSelectionWithCondition("101m_model", "A", "select");
         pfv.clearSelection("select");
@@ -179,7 +185,7 @@ const fvConfig: FeatureViewInterface = {
                     })), mode: "select"});
         }
     },
-    structureHoverCallback: (plugin: StructureViewerPublicInterface, pfv: RcsbFv, selection: RcsbFvSelectorManager) => {
+    structureHoverCallback: (plugin: StructureViewerPublicInterface<LoadMolstarInterface>, pfv: RcsbFv, selection: RcsbFvSelectorManager) => {
         const sel_1ash: SaguaroRegionList | undefined = selection.getSelectionWithCondition("1ash_model", "A", "hover");
         const sel_101m: SaguaroRegionList | undefined = selection.getSelectionWithCondition("101m_model", "A", "hover");
         if(sel_1ash == null && sel_101m == null)
@@ -195,22 +201,22 @@ const fvConfig: FeatureViewInterface = {
     }
 }
 
-const block: FeatureBlockInterface = {
+const block: FeatureBlockInterface<LoadMolstarInterface> = {
     blockId:"MyBlock_1",
     featureViewConfig: [fvConfig]
 };
 
-const customConfig: CustomViewInterface = {
+const customConfig: CustomViewInterface<LoadMolstarInterface> = {
     blockConfig:[block]
 }
 
 const sequenceConfig = {
-    title: "Structural alignment example",
-    subtitle: "2 PDB entries and 1 Feature Viewer",
+    title: undefined,
+    subtitle: undefined,
     config: customConfig
 };
 
-const molstarConfig: RcsbFvStructureConfigInterface = {
+const molstarConfig: RcsbFvStructureConfigInterface<LoadMolstarInterface,{viewerElement:string|HTMLElement,viewerProps:Partial<ViewerProps>}> = {
     loadConfig: {
         loadMethod: LoadMethod.loadPdbIds,
         loadParams: [{
@@ -228,8 +234,11 @@ const molstarConfig: RcsbFvStructureConfigInterface = {
         }]
     },
     pluginConfig: {
-        showImportControls: true,
-        showSessionControls: false
+        viewerElement:"pfv",
+        viewerProps:{
+            showImportControls: true,
+            showSessionControls: false
+        }
     }
 };
 
@@ -238,12 +247,21 @@ const custom3DConfig: RcsbFv3DCustomInterface = {
     structurePanelConfig: molstarConfig,
     sequencePanelConfig: sequenceConfig,
     cssConfig:{
+        overwriteCss:true,
+        rootPanel:{
+            display:"flex",
+            flexDirection:"column-reverse"
+        },
         structurePanel:{
-            minWidth:800,
-            minHeight:800
+            width: 600,
+            height: 600,
+            minWidth: 400,
+            minHeight: 400
         },
         sequencePanel:{
-            minWidth:800
+            minWidth:400,
+            width:600,
+            marginBottom:5
         }
     }
 }

src/examples/external-mapping/index.tsx → src/examples/external-mapping/index.ts

@@ -1,21 +1,24 @@
 import {RcsbFv3DCustom} from "../../RcsbFv3D/RcsbFv3DCustom";
 import {RcsbFvStructureConfigInterface} from "../../RcsbFvStructure/RcsbFvStructure";
-import {LoadMethod} from "../../RcsbFvStructure/StructureViewers/StructureViewer";
 import {
     CustomViewInterface,
     FeatureBlockInterface
 } from "../../RcsbFvSequence/SequenceViews/CustomView/CustomView";
-import * as React from "react";
 import {RcsbRepresentationPreset} from "./TrajectoryPreset";
 import {PluginStateObject} from "molstar/lib/mol-plugin-state/objects";
 import {fvConfig1, fvConfig2} from "./FeatureViewerConfig";
+import {
+    LoadMethod,
+    LoadMolstarInterface
+} from "../../RcsbFvStructure/StructureViewers/MolstarViewer/MolstarActionManager";
+import {ViewerProps} from "@rcsb/rcsb-molstar/build/src/viewer";
 
-const block: FeatureBlockInterface = {
+const block: FeatureBlockInterface<LoadMolstarInterface> = {
     blockId:"MyBlock_1",
     featureViewConfig: [fvConfig1, fvConfig2]
 };
 
-const customConfig: CustomViewInterface = {
+const customConfig: CustomViewInterface<LoadMolstarInterface> = {
     blockConfig:[block]
 }
 
@@ -25,7 +28,7 @@ const sequenceConfig = {
     config: customConfig
 };
 
-const molstarConfig: RcsbFvStructureConfigInterface = {
+const molstarConfig: RcsbFvStructureConfigInterface<LoadMolstarInterface,{viewerProps:Partial<ViewerProps>}> = {
     loadConfig: [{
         loadMethod: LoadMethod.loadPdbId,
         loadParams: {
@@ -60,8 +63,10 @@ const molstarConfig: RcsbFvStructureConfigInterface = {
         }
     }],
     pluginConfig: {
-        showImportControls: true,
-        showSessionControls: false
+        viewerProps:{
+            showImportControls: true,
+            showSessionControls: false
+        }
     }
 };
 

src/examples/multiple-chain/index.tsx

@@ -1,6 +1,5 @@
 import {RcsbFv3DCustom} from "../../RcsbFv3D/RcsbFv3DCustom";
 import {RcsbFvStructureConfigInterface} from "../../RcsbFvStructure/RcsbFvStructure";
-import {LoadMethod} from "../../RcsbFvStructure/StructureViewers/StructureViewer";
 import {
     BlockSelectorManager,
     CustomViewInterface,
@@ -20,6 +19,11 @@ import {
 import {
     StructureViewerPublicInterface, SaguaroRegionList
 } from "../../RcsbFvStructure/StructureViewerInterface";
+import {
+    LoadMethod,
+    LoadMolstarInterface
+} from "../../RcsbFvStructure/StructureViewers/MolstarViewer/MolstarActionManager";
+import {ViewerProps} from "@rcsb/rcsb-molstar/build/src/viewer";
 
 const rowConfigChainA: Array<RcsbFvRowConfigInterface> = [
     {
@@ -80,7 +84,7 @@ const rowConfigChainB: Array<RcsbFvRowConfigInterface> = [
     }
 ];
 
-const fvConfigChainA: FeatureViewInterface = {
+const fvConfigChainA: FeatureViewInterface<LoadMolstarInterface> = {
     boardId:"1acb.A_board",
     boardConfig: {
         range: {
@@ -91,7 +95,7 @@ const fvConfigChainA: FeatureViewInterface = {
         includeAxis: true
     },
     rowConfig: rowConfigChainA,
-    sequenceSelectionChangeCallback: (plugin: StructureViewerPublicInterface, selectorManager: RcsbFvSelectorManager, sequenceRegion: Array<RcsbFvTrackDataElementInterface>) => {
+    sequenceSelectionChangeCallback: (plugin: StructureViewerPublicInterface<LoadMolstarInterface>, selectorManager: RcsbFvSelectorManager, sequenceRegion: Array<RcsbFvTrackDataElementInterface>) => {
         selectorManager.clearSelection("select", {modelId:"1acb_board", labelAsymId:"A"});
         plugin.clearSelection("select", {modelId: "1acb_board", labelAsymId: "A"})
         if(sequenceRegion.length > 0) {
@@ -110,11 +114,11 @@ const fvConfigChainA: FeatureViewInterface = {
             plugin.resetCamera();
         }
     },
-    sequenceElementClickCallback: (plugin: StructureViewerPublicInterface, selectorManager: RcsbFvSelectorManager, d: RcsbFvTrackDataElementInterface) => {
+    sequenceElementClickCallback: (plugin: StructureViewerPublicInterface<LoadMolstarInterface>, selectorManager: RcsbFvSelectorManager, d: RcsbFvTrackDataElementInterface) => {
         if(d!=null)
             plugin.cameraFocus("1acb_board", "A", d.begin, d.end ?? d.begin);
     },
-    sequenceHoverCallback: (plugin: StructureViewerPublicInterface, selectorManager: RcsbFvSelectorManager, elements: Array<RcsbFvTrackDataElementInterface>) => {
+    sequenceHoverCallback: (plugin: StructureViewerPublicInterface<LoadMolstarInterface>, selectorManager: RcsbFvSelectorManager, elements: Array<RcsbFvTrackDataElementInterface>) => {
         if(elements == null || elements.length == 0)
             plugin.clearSelection("hover");
         else
@@ -125,7 +129,7 @@ const fvConfigChainA: FeatureViewInterface = {
                 end: e.end ?? e.begin
             })), "hover", "set");
     },
-    structureSelectionCallback: (plugin: StructureViewerPublicInterface, pfv: RcsbFv, selection: RcsbFvSelectorManager) => {
+    structureSelectionCallback: (plugin: StructureViewerPublicInterface<LoadMolstarInterface>, pfv: RcsbFv, selection: RcsbFvSelectorManager) => {
         const sel: SaguaroRegionList | undefined = selection.getSelectionWithCondition("1acb_board", "A", "select");
         if(sel == null) {
             pfv.clearSelection("select");
@@ -134,7 +138,7 @@ const fvConfigChainA: FeatureViewInterface = {
             pfv.setSelection({elements: sel.regions, mode: "select"});
         }
     },
-    structureHoverCallback: (plugin: StructureViewerPublicInterface, pfv: RcsbFv, selection: RcsbFvSelectorManager) => {
+    structureHoverCallback: (plugin: StructureViewerPublicInterface<LoadMolstarInterface>, pfv: RcsbFv, selection: RcsbFvSelectorManager) => {
         const sel: SaguaroRegionList | undefined = selection.getSelectionWithCondition("1acb_board", "A", "hover");
         if(sel == null)
             pfv.clearSelection("hover");
@@ -143,7 +147,7 @@ const fvConfigChainA: FeatureViewInterface = {
     }
 }
 
-const fvConfigChainB: FeatureViewInterface = {
+const fvConfigChainB: FeatureViewInterface<LoadMolstarInterface> = {
     boardId:"1acb.B_board",
     boardConfig: {
         range: {
@@ -154,7 +158,7 @@ const fvConfigChainB: FeatureViewInterface = {
         includeAxis: true
     },
     rowConfig: rowConfigChainB,
-    sequenceSelectionChangeCallback: (plugin: StructureViewerPublicInterface, selectorManager: RcsbFvSelectorManager, sequenceRegion: Array<RcsbFvTrackDataElementInterface>) => {
+    sequenceSelectionChangeCallback: (plugin: StructureViewerPublicInterface<LoadMolstarInterface>, selectorManager: RcsbFvSelectorManager, sequenceRegion: Array<RcsbFvTrackDataElementInterface>) => {
         selectorManager.clearSelection("select", {modelId:"1acb_board", labelAsymId:"B"});
         plugin.clearSelection("select", {modelId: "1acb_board", labelAsymId: "B"})
         if(sequenceRegion.length > 0) {
@@ -173,11 +177,11 @@ const fvConfigChainB: FeatureViewInterface = {
             plugin.resetCamera();
         }
     },
-    sequenceElementClickCallback: (plugin: StructureViewerPublicInterface, selectorManager: RcsbFvSelectorManager, d: RcsbFvTrackDataElementInterface) => {
+    sequenceElementClickCallback: (plugin: StructureViewerPublicInterface<LoadMolstarInterface>, selectorManager: RcsbFvSelectorManager, d: RcsbFvTrackDataElementInterface) => {
         if(d!=null)
             plugin.cameraFocus("1acb_board", "B", d.begin, d.end ?? d.begin);
     },
-    sequenceHoverCallback: (plugin: StructureViewerPublicInterface, selectorManager: RcsbFvSelectorManager, elements: Array<RcsbFvTrackDataElementInterface>) => {
+    sequenceHoverCallback: (plugin: StructureViewerPublicInterface<LoadMolstarInterface>, selectorManager: RcsbFvSelectorManager, elements: Array<RcsbFvTrackDataElementInterface>) => {
         if(elements == null || elements.length == 0)
             plugin.clearSelection("hover");
         else
@@ -188,7 +192,7 @@ const fvConfigChainB: FeatureViewInterface = {
                 end: e.end ?? e.begin
             })), "hover", "set");
     },
-    structureSelectionCallback: (plugin: StructureViewerPublicInterface, pfv: RcsbFv, selection: RcsbFvSelectorManager) => {
+    structureSelectionCallback: (plugin: StructureViewerPublicInterface<LoadMolstarInterface>, pfv: RcsbFv, selection: RcsbFvSelectorManager) => {
         const sel: SaguaroRegionList | undefined = selection.getSelectionWithCondition("1acb_board", "B", "select");
         if(sel == null) {
             pfv.clearSelection("select");
@@ -197,7 +201,7 @@ const fvConfigChainB: FeatureViewInterface = {
             pfv.setSelection({elements: sel.regions, mode: "select"});
         }
     },
-    structureHoverCallback: (plugin: StructureViewerPublicInterface, pfv: RcsbFv, selection: RcsbFvSelectorManager) => {
+    structureHoverCallback: (plugin: StructureViewerPublicInterface<LoadMolstarInterface>, pfv: RcsbFv, selection: RcsbFvSelectorManager) => {
         const sel: SaguaroRegionList | undefined = selection.getSelectionWithCondition("1acb_board", "B", "hover");
         if(sel == null)
             pfv.clearSelection("hover");
@@ -206,12 +210,12 @@ const fvConfigChainB: FeatureViewInterface = {
     }
 }
 
-const blockChainA: FeatureBlockInterface = {
+const blockChainA: FeatureBlockInterface<LoadMolstarInterface> = {
     blockId:"chainA",
     featureViewConfig: [fvConfigChainA]
 };
 
-const blockChainB: FeatureBlockInterface = {
+const blockChainB: FeatureBlockInterface<LoadMolstarInterface> = {
     blockId:"chainB",
     featureViewConfig: [fvConfigChainB]
 };
@@ -229,7 +233,7 @@ const blockSelectorElement: (blockSelectorManager: BlockSelectorManager) => JSX.
     );
 }
 
-const customConfig: CustomViewInterface = {
+const customConfig: CustomViewInterface<LoadMolstarInterface> = {
     blockConfig:[blockChainA, blockChainB],
     blockSelectorElement: blockSelectorElement
 }
@@ -240,7 +244,7 @@ const sequenceConfig = {
     config: customConfig
 };
 
-const molstarConfig: RcsbFvStructureConfigInterface = {
+const molstarConfig: RcsbFvStructureConfigInterface<LoadMolstarInterface,{viewerProps:Partial<ViewerProps>}> = {
     loadConfig: {
         loadMethod: LoadMethod.loadPdbIds,
         loadParams: [{
@@ -249,8 +253,10 @@ const molstarConfig: RcsbFvStructureConfigInterface = {
         }]
     },
     pluginConfig: {
-        showImportControls: true,
-        showSessionControls: false
+        viewerProps:{
+            showImportControls: true,
+            showSessionControls: false
+        }
     },
 };
 

src/examples/single-chain/index.tsx → src/examples/single-chain/index.ts

@@ -1,6 +1,5 @@
 import {RcsbFv3DCustom} from "../../RcsbFv3D/RcsbFv3DCustom";
 import {RcsbFvStructureConfigInterface} from "../../RcsbFvStructure/RcsbFvStructure";
-import {LoadMethod} from "../../RcsbFvStructure/StructureViewers/StructureViewer";
 import {
     CustomViewInterface,
     FeatureBlockInterface, FeatureViewInterface
@@ -19,6 +18,11 @@ import {
 import {
     StructureViewerPublicInterface, SaguaroRegionList
 } from "../../RcsbFvStructure/StructureViewerInterface";
+import {
+    LoadMethod,
+    LoadMolstarInterface
+} from "../../RcsbFvStructure/StructureViewers/MolstarViewer/MolstarActionManager";
+import {ViewerProps} from "@rcsb/rcsb-molstar/build/src/viewer";
 
 const rowConfig: Array<RcsbFvRowConfigInterface> = [
     {
@@ -48,7 +52,7 @@ const rowConfig: Array<RcsbFvRowConfigInterface> = [
     }
 ];
 
-const fvConfig: FeatureViewInterface = {
+const fvConfig: FeatureViewInterface<LoadMolstarInterface> = {
     boardId:"1ash_board",
     boardConfig: {
         range: {
@@ -59,7 +63,7 @@ const fvConfig: FeatureViewInterface = {
         includeAxis: true
     },
     rowConfig: rowConfig,
-    sequenceSelectionChangeCallback: (plugin: StructureViewerPublicInterface, selectorManager: RcsbFvSelectorManager, sequenceRegion: Array<RcsbFvTrackDataElementInterface>) => {
+    sequenceSelectionChangeCallback: (plugin: StructureViewerPublicInterface<LoadMolstarInterface>, selectorManager: RcsbFvSelectorManager, sequenceRegion: Array<RcsbFvTrackDataElementInterface>) => {
         selectorManager.clearSelection("select", {modelId:"1ash_model", labelAsymId:"A"});
         if(sequenceRegion.length > 0) {
             const regions = sequenceRegion.map(r => ({
@@ -78,11 +82,11 @@ const fvConfig: FeatureViewInterface = {
             plugin.resetCamera();
         }
     },
-    sequenceElementClickCallback: (plugin: StructureViewerPublicInterface, selectorManager: RcsbFvSelectorManager, d: RcsbFvTrackDataElementInterface) => {
+    sequenceElementClickCallback: (plugin: StructureViewerPublicInterface<LoadMolstarInterface>, selectorManager: RcsbFvSelectorManager, d: RcsbFvTrackDataElementInterface) => {
         if(d!=null)
             plugin.cameraFocus("1ash_model", "A", d.begin, d.end ?? d.begin);
     },
-    sequenceHoverCallback: (plugin: StructureViewerPublicInterface, selectorManager: RcsbFvSelectorManager, elements: Array<RcsbFvTrackDataElementInterface>) => {
+    sequenceHoverCallback: (plugin: StructureViewerPublicInterface<LoadMolstarInterface>, selectorManager: RcsbFvSelectorManager, elements: Array<RcsbFvTrackDataElementInterface>) => {
         if(elements == null || elements.length == 0)
             plugin.clearSelection("hover");
         else
@@ -93,7 +97,7 @@ const fvConfig: FeatureViewInterface = {
                 end: e.end ?? e.begin
             })), "hover", "set");
     },
-    structureSelectionCallback: (plugin: StructureViewerPublicInterface, pfv: RcsbFv, selection: RcsbFvSelectorManager) => {
+    structureSelectionCallback: (plugin: StructureViewerPublicInterface<LoadMolstarInterface>, pfv: RcsbFv, selection: RcsbFvSelectorManager) => {
         const sel: SaguaroRegionList | undefined = selection.getSelectionWithCondition("1ash_model", "A", "select");
         if(sel == null) {
             pfv.clearSelection("select");
@@ -102,7 +106,7 @@ const fvConfig: FeatureViewInterface = {
             pfv.setSelection({elements: sel.regions, mode: "select"});
         }
     },
-    structureHoverCallback: (plugin: StructureViewerPublicInterface, pfv: RcsbFv, selection: RcsbFvSelectorManager) => {
+    structureHoverCallback: (plugin: StructureViewerPublicInterface<LoadMolstarInterface>, pfv: RcsbFv, selection: RcsbFvSelectorManager) => {
         const sel: SaguaroRegionList | undefined = selection.getSelectionWithCondition("1ash_model", "A", "hover");
         if(sel == null)
             pfv.clearSelection("hover");
@@ -111,12 +115,12 @@ const fvConfig: FeatureViewInterface = {
     }
 }
 
-const block: FeatureBlockInterface = {
+const block: FeatureBlockInterface<LoadMolstarInterface> = {
     blockId:"MyBlock_1",
     featureViewConfig: [fvConfig]
 };
 
-const customConfig: CustomViewInterface = {
+const customConfig: CustomViewInterface<LoadMolstarInterface> = {
     blockConfig:[block]
 }
 
@@ -126,7 +130,7 @@ const sequenceConfig = {
     config: customConfig
 };
 
-const molstarConfig: RcsbFvStructureConfigInterface = {
+const molstarConfig: RcsbFvStructureConfigInterface<LoadMolstarInterface,{viewerProps:Partial<ViewerProps>}> = {
     loadConfig: {
         loadMethod: LoadMethod.loadPdbIds,
         loadParams: [{
@@ -135,8 +139,10 @@ const molstarConfig: RcsbFvStructureConfigInterface = {
         }]
     },
     pluginConfig: {
-        showImportControls: true,
-        showSessionControls: false
+        viewerProps:{
+            showImportControls: true,
+            showSessionControls: false
+        }
     }
 };
 

src/examples/css-config/index.tsx → src/examples/structural-alignment/index.ts

@@ -1,12 +1,10 @@
 import {RcsbFv3DCustom, RcsbFv3DCustomInterface} from "../../RcsbFv3D/RcsbFv3DCustom";
 import {RcsbFvStructureConfigInterface} from "../../RcsbFvStructure/RcsbFvStructure";
-import {LoadMethod} from "../../RcsbFvStructure/StructureViewers/StructureViewer";
 import {
     CustomViewInterface,
     FeatureBlockInterface,
     FeatureViewInterface
 } from "../../RcsbFvSequence/SequenceViews/CustomView/CustomView";
-import * as React from "react";
 import {
     RcsbFv,
     RcsbFvDisplayTypes,
@@ -20,6 +18,11 @@ import {
 import {StructureViewerPublicInterface, SaguaroRegionList} from "../../RcsbFvStructure/StructureViewerInterface";
 import {AlignmentManager} from "./AlignmentManager";
 import {Mat4} from "molstar/lib/mol-math/linear-algebra";
+import {
+    LoadMethod,
+    LoadMolstarInterface
+} from "../../RcsbFvStructure/StructureViewers/MolstarViewer/MolstarActionManager";
+import {ViewerProps} from "@rcsb/rcsb-molstar/build/src/viewer";
 
 const sequence_101m: string = "MVLSEGEWQLVLHVWAKVEADVAGHGQDILIRLFKSHPETLEKFDRVKHLKTEAEMKASEDLKKHGVTVLTALGAILKKKGHHEAELKPLAQSHATKHKIPIKYLEFISEAIIHVLHSRHPGNFGADAQGAMNKALELFRKDIAAKYKELGYQG";
 const alignment = [{
@@ -96,7 +99,7 @@ const rowConfig: Array<RcsbFvRowConfigInterface> = [
     }
 ];
 
-const fvConfig: FeatureViewInterface = {
+const fvConfig: FeatureViewInterface<LoadMolstarInterface> = {
     boardId:"1ash_board",
     boardConfig: {
         range: {
@@ -109,7 +112,7 @@ const fvConfig: FeatureViewInterface = {
         includeAxis: true
     },
     rowConfig: rowConfig,
-    sequenceSelectionChangeCallback: (plugin: StructureViewerPublicInterface, selectorManager: RcsbFvSelectorManager, sequenceRegion: Array<RcsbFvTrackDataElementInterface>) => {
+    sequenceSelectionChangeCallback: (plugin: StructureViewerPublicInterface<LoadMolstarInterface>, selectorManager: RcsbFvSelectorManager, sequenceRegion: Array<RcsbFvTrackDataElementInterface>) => {
         selectorManager.clearSelection("select", {modelId:"1ash_model", labelAsymId:"A"});
         selectorManager.clearSelection("select", {modelId:"101m_model", labelAsymId:"A"});
         if(sequenceRegion.length > 0) {
@@ -136,7 +139,7 @@ const fvConfig: FeatureViewInterface = {
             plugin.resetCamera();
         }
     },
-    sequenceElementClickCallback: async (plugin: StructureViewerPublicInterface, selectorManager: RcsbFvSelectorManager, d: RcsbFvTrackDataElementInterface) => {
+    sequenceElementClickCallback: async (plugin: StructureViewerPublicInterface<LoadMolstarInterface>, selectorManager: RcsbFvSelectorManager, d: RcsbFvTrackDataElementInterface) => {
         plugin.removeComponent("1ash_component");
         plugin.removeComponent("101m_component");
         if(d.begin === d.end || !d.end){
@@ -144,7 +147,7 @@ const fvConfig: FeatureViewInterface = {
             await plugin.createComponent("101m_component", "101m_model", "A", alignmentManager.getTargetPosition(d.begin)!, alignmentManager.getTargetPosition(d.begin)!, "ball-and-stick");
         }
     },
-    sequenceHoverCallback: (plugin: StructureViewerPublicInterface, selectorManager: RcsbFvSelectorManager, elements: Array<RcsbFvTrackDataElementInterface>) => {
+    sequenceHoverCallback: (plugin: StructureViewerPublicInterface<LoadMolstarInterface>, selectorManager: RcsbFvSelectorManager, elements: Array<RcsbFvTrackDataElementInterface>) => {
         if (elements == null || elements.length == 0){
             plugin.clearSelection("hover");
         }else {
@@ -164,7 +167,7 @@ const fvConfig: FeatureViewInterface = {
                 ), "hover", "set");
         }
     },
-    structureSelectionCallback: (plugin: StructureViewerPublicInterface, pfv: RcsbFv, selection: RcsbFvSelectorManager) => {
+    structureSelectionCallback: (plugin: StructureViewerPublicInterface<LoadMolstarInterface>, pfv: RcsbFv, selection: RcsbFvSelectorManager) => {
         const sel_1ash: SaguaroRegionList | undefined = selection.getSelectionWithCondition("1ash_model", "A", "select");
         const sel_101m: SaguaroRegionList | undefined = selection.getSelectionWithCondition("101m_model", "A", "select");
         pfv.clearSelection("select");
@@ -181,7 +184,7 @@ const fvConfig: FeatureViewInterface = {
                     })), mode: "select"});
         }
     },
-    structureHoverCallback: (plugin: StructureViewerPublicInterface, pfv: RcsbFv, selection: RcsbFvSelectorManager) => {
+    structureHoverCallback: (plugin: StructureViewerPublicInterface<LoadMolstarInterface>, pfv: RcsbFv, selection: RcsbFvSelectorManager) => {
         const sel_1ash: SaguaroRegionList | undefined = selection.getSelectionWithCondition("1ash_model", "A", "hover");
         const sel_101m: SaguaroRegionList | undefined = selection.getSelectionWithCondition("101m_model", "A", "hover");
         if(sel_1ash == null && sel_101m == null)
@@ -197,12 +200,12 @@ const fvConfig: FeatureViewInterface = {
     }
 }
 
-const block: FeatureBlockInterface = {
+const block: FeatureBlockInterface<LoadMolstarInterface> = {
     blockId:"MyBlock_1",
     featureViewConfig: [fvConfig]
 };
 
-const customConfig: CustomViewInterface = {
+const customConfig: CustomViewInterface<LoadMolstarInterface> = {
     blockConfig:[block]
 }
 
@@ -212,7 +215,7 @@ const sequenceConfig = {
     config: customConfig
 };
 
-const molstarConfig: RcsbFvStructureConfigInterface = {
+const molstarConfig: RcsbFvStructureConfigInterface<LoadMolstarInterface,{viewerProps:Partial<ViewerProps>}> = {
     loadConfig: {
         loadMethod: LoadMethod.loadPdbIds,
         loadParams: [{
@@ -230,8 +233,10 @@ const molstarConfig: RcsbFvStructureConfigInterface = {
         }]
     },
     pluginConfig: {
-        showImportControls: true,
-        showSessionControls: false
+        viewerProps:{
+            showImportControls: true,
+            showSessionControls: false
+        }
     }
 };
 

src/examples/uniprot/index.ts

@@ -4,7 +4,6 @@ import {RcsbFv3DUniprot} from "../../RcsbFv3D/RcsbFv3DUniprot";
 document.addEventListener("DOMContentLoaded", function(event) {
 
     const panel3d = new RcsbFv3DUniprot({
-        elementId:"null",
         config:{
             upAcc:"P01112"
         }

tsconfig.examples.json

@@ -1,28 +0,0 @@
-{
-  "compilerOptions": {
-    "outDir": "./build/src/",
-    "noImplicitAny": true,
-    "target": "es5",
-    "module": "commonjs",
-    "jsx": "react",
-    "lib": [ "es6", "dom", "esnext.asynciterable", "es2016"  ],
-    "allowJs": true,
-    "sourceMap": true,
-    "strictNullChecks": true,
-    "esModuleInterop": true
-  },
-  "include": [
-    "src/custom.d.ts",
-    "src/examples/single-chain/index.tsx",
-    "src/examples/external-mapping/index.tsx",
-    "src/examples/multiple-chain/index.tsx",
-    "src/examples/structural-alignment/index.tsx",
-    "src/examples/css-config/index.tsx",
-    "src/examples/assembly/index.ts",
-    "src/examples/assembly-interface/index.ts",
-    "src/examples/uniprot/index.ts"
-  ],
-  "exclude": [
-    "node_modules"
-  ]
-}

webpack.server.dev.config.js

@@ -1,4 +1,5 @@
 const HtmlWebpackPlugin = require('html-webpack-plugin');
+const path = require('path');
 
 const commonConfig = {
     mode: "development",
@@ -38,110 +39,22 @@ const commonConfig = {
     devtool: 'source-map'
 };
 
-const examples = [];
-
-examples.push({
-    ...commonConfig,
-    entry: {
-        'assembly': './src/examples/assembly/index.ts'
-    },
-    plugins: [new HtmlWebpackPlugin({
-        filename:'[name].html',
-        template:'./src/examples/html-template/index.html'
-    })]
-});
-
-examples.push({
-    ...commonConfig,
-    entry: {
-        "assembly-interface": './src/examples/assembly-interface/index.ts'
-    },
-    plugins: [new HtmlWebpackPlugin({
-        filename:'[name].html',
-        template:'./src/examples/html-template/index.html'
-    })]
-});
-
-examples.push({
-    ...commonConfig,
-    entry: {
-        "external-mapping": './src/examples/external-mapping/index.tsx'
-    },
-    plugins: [new HtmlWebpackPlugin({
-        filename:'[name].html',
-        template:'./src/examples/html-template/index.html'
-    })]
-});
-
-examples.push({
-    ...commonConfig,
-    entry: {
-        "single-chain": './src/examples/single-chain/index.tsx'
-    },
-    plugins: [new HtmlWebpackPlugin({
-        filename:'[name].html',
-        template:'./src/examples/html-template/index.html'
-    })]
-});
-
-examples.push({
-    ...commonConfig,
-    entry: {
-        "structural-alignment": './src/examples/structural-alignment/index.tsx'
-    },
-    plugins: [new HtmlWebpackPlugin({
-        filename:'[name].html',
-        template:'./src/examples/html-template/index.html'
-    })]
-});
-
-examples.push({
-    ...commonConfig,
-    entry: {
-        "multiple-chain": './src/examples/structural-alignment/index.tsx'
-    },
-    plugins: [new HtmlWebpackPlugin({
-        filename:'[name].html',
-        template:'./src/examples/html-template/index.html'
-    })]
-});
-
-examples.push({
-    ...commonConfig,
-    entry: {
-        "css-config": './src/examples/css-config/index.tsx'
-    },
-    plugins: [new HtmlWebpackPlugin({
-        filename:'[name].html',
-        template:'./src/examples/html-template/index.html'
-    })]
-});
-
-examples.push({
-    ...commonConfig,
-    entry: {
-        "uniprot": './src/examples/structural-alignment/index.tsx'
-    },
-    plugins: [new HtmlWebpackPlugin({
-        filename:'[name].html',
-        template:'./src/examples/html-template/index.html'
-    })]
-});
+const examples = ['assembly','uniprot','structural-alignment'];
+const entries = examples.reduce((prev,current)=>{prev[current]=`./src/examples/${current}/index.ts`;return prev;},{});
 
 const server = {
     ...commonConfig,
-    entry: {
-        //...examples.map(e=>Object.entries(e.entry)[0]).reduce((prev,curr)=>{prev[curr[0]]=curr[1];return prev;},{})
-        'assembly': './src/examples/assembly/index.ts'
-    },
+    entry: entries,
     devServer: {
         compress: true,
         port: 9000,
     },
-    plugins: [new HtmlWebpackPlugin({
-        filename:'[name].html',
-        template:'./src/examples/html-template/index.html'
-    })]
+    plugins: Object.keys(entries).map(key=>new HtmlWebpackPlugin({
+        filename:`${key}.html`,
+        template:'./src/examples/html-template/index.html',
+        inject: true,
+        chunks:[key]
+    }))
 }
 
 module.exports = [server];