full screen view

README.md

@@ -0,0 +1,7 @@
+# rcsb-saguaro-3D
+
+RCSB Saguaro Web 3D is an open-source library built on the top of the [RCSB Saguaro 1D Feature Viewer](https://rcsb.github.io/rcsb-saguaro)
+and designed to display protein features at the [RCSB Web Site](https://www.rcsb.org). The package collects protein annotations from the 
+[1D Coordinate Server](https://1d-coordinates.rcsb.org) and the main [RCSB Data API](https://data.rcsb.org) and generates preconfigures Protein 
+Feature Summaries. The package allows access to RCSB Saguaro methods to add or change displayed data. 
+

package-lock.json

@@ -1031,9 +1031,9 @@
       }
     },
     "@bioinsilico/rcsb-saguaro-app": {
-      "version": "0.9.13",
-      "resolved": "https://registry.npmjs.org/@bioinsilico/rcsb-saguaro-app/-/rcsb-saguaro-app-0.9.13.tgz",
-      "integrity": "sha512-7pQXrakIev6Lz8uRoHCJMCkxyda1g4M92uKVtiEbVLk5lbN9SYddr27eSuDFDpsC7H0KktVQAViC9efPGNbJ+A==",
+      "version": "0.9.19",
+      "resolved": "https://registry.npmjs.org/@bioinsilico/rcsb-saguaro-app/-/rcsb-saguaro-app-0.9.19.tgz",
+      "integrity": "sha512-vZfmpncKojAnybqVCvB5BBpg16aSU69aMidpl6YywgUWCP/D2iIrF3OI0sxBGWyZt0JTF5SvwJePhTClEnLOBg==",
       "requires": {
         "@bioinsilico/rcsb-saguaro": "^0.9.10",
         "@graphql-codegen/cli": "^1.16.0",
@@ -1349,13 +1349,12 @@
       }
     },
     "@graphql-tools/code-file-loader": {
-      "version": "6.2.5",
-      "resolved": "https://registry.npmjs.org/@graphql-tools/code-file-loader/-/code-file-loader-6.2.5.tgz",
-      "integrity": "sha512-KMy8c/I4NeQZUI9InydR14qP1pqPeJfgVJLri0RgJRWDiLAj/nIb2oDioN9AgBX3XYNijJT+pH0//B5EOO0BiA==",
+      "version": "6.2.6",
+      "resolved": "https://registry.npmjs.org/@graphql-tools/code-file-loader/-/code-file-loader-6.2.6.tgz",
+      "integrity": "sha512-oDuMiXy1Rj1KszY7no+PFNzw2H25PVJKg9K/deK+IHL1631Q+VLK6/czBIw4TMEsbYhlKErgWDI+XBzK73VZSQ==",
       "requires": {
         "@graphql-tools/graphql-tag-pluck": "^6.2.6",
         "@graphql-tools/utils": "^7.0.0",
-        "fs-extra": "9.0.1",
         "tslib": "~2.0.1"
       },
       "dependencies": {
@@ -1369,42 +1368,10 @@
             "tslib": "~2.0.1"
           }
         },
-        "fs-extra": {
-          "version": "9.0.1",
-          "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.0.1.tgz",
-          "integrity": "sha512-h2iAoN838FqAFJY2/qVpzFXy+EBxfVE220PalAqQLDVsFOHLJrZvut5puAbCdNv6WJk+B8ihI+k0c7JK5erwqQ==",
-          "requires": {
-            "at-least-node": "^1.0.0",
-            "graceful-fs": "^4.2.0",
-            "jsonfile": "^6.0.1",
-            "universalify": "^1.0.0"
-          }
-        },
-        "jsonfile": {
-          "version": "6.1.0",
-          "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
-          "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
-          "requires": {
-            "graceful-fs": "^4.1.6",
-            "universalify": "^2.0.0"
-          },
-          "dependencies": {
-            "universalify": {
-              "version": "2.0.0",
-              "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
-              "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ=="
-            }
-          }
-        },
         "tslib": {
           "version": "2.0.3",
           "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.3.tgz",
           "integrity": "sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ=="
-        },
-        "universalify": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/universalify/-/universalify-1.0.0.tgz",
-          "integrity": "sha512-rb6X1W158d7pRQBg5gkR8uPaSfiids68LTJQYOtEUhoJUWBdaQHsuT/EUduxXYxcrt4r5PJ4fuHW1MHT6p0qug=="
         }
       }
     },
@@ -1495,13 +1462,12 @@
       }
     },
     "@graphql-tools/graphql-file-loader": {
-      "version": "6.2.5",
-      "resolved": "https://registry.npmjs.org/@graphql-tools/graphql-file-loader/-/graphql-file-loader-6.2.5.tgz",
-      "integrity": "sha512-vYDn71FHqwCxWgw8swoVOsD5C0xGz/Lw4zUQnPcgZfAzhAAwl6e/rVWl/HF1UNNSf5CSZu+2oidjOWCI5Wl6Gg==",
+      "version": "6.2.6",
+      "resolved": "https://registry.npmjs.org/@graphql-tools/graphql-file-loader/-/graphql-file-loader-6.2.6.tgz",
+      "integrity": "sha512-L+RdYl5C6+X0zdOTUotY0K5zwqvSGpqI/qcZpVvCDenoAcVTyaNLmnd/ViErwedhCaGqAAV0wI1nPtyKFPlMUg==",
       "requires": {
-        "@graphql-tools/import": "^6.2.4",
+        "@graphql-tools/import": "^6.2.5",
         "@graphql-tools/utils": "^7.0.0",
-        "fs-extra": "9.0.1",
         "tslib": "~2.0.1"
       },
       "dependencies": {
@@ -1515,42 +1481,10 @@
             "tslib": "~2.0.1"
           }
         },
-        "fs-extra": {
-          "version": "9.0.1",
-          "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.0.1.tgz",
-          "integrity": "sha512-h2iAoN838FqAFJY2/qVpzFXy+EBxfVE220PalAqQLDVsFOHLJrZvut5puAbCdNv6WJk+B8ihI+k0c7JK5erwqQ==",
-          "requires": {
-            "at-least-node": "^1.0.0",
-            "graceful-fs": "^4.2.0",
-            "jsonfile": "^6.0.1",
-            "universalify": "^1.0.0"
-          }
-        },
-        "jsonfile": {
-          "version": "6.1.0",
-          "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
-          "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
-          "requires": {
-            "graceful-fs": "^4.1.6",
-            "universalify": "^2.0.0"
-          },
-          "dependencies": {
-            "universalify": {
-              "version": "2.0.0",
-              "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
-              "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ=="
-            }
-          }
-        },
         "tslib": {
           "version": "2.0.3",
           "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.3.tgz",
           "integrity": "sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ=="
-        },
-        "universalify": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/universalify/-/universalify-1.0.0.tgz",
-          "integrity": "sha512-rb6X1W158d7pRQBg5gkR8uPaSfiids68LTJQYOtEUhoJUWBdaQHsuT/EUduxXYxcrt4r5PJ4fuHW1MHT6p0qug=="
         }
       }
     },
@@ -1623,61 +1557,27 @@
       }
     },
     "@graphql-tools/import": {
-      "version": "6.2.4",
-      "resolved": "https://registry.npmjs.org/@graphql-tools/import/-/import-6.2.4.tgz",
-      "integrity": "sha512-Q6fk6hbtDevoEVcgwb3WRn7XOqGY4MnX3Mvc+x8/b8k4RZ4wT+0WSLRDXGAKiVKRxGhgouU2lZVnGE/LDrGSCg==",
+      "version": "6.2.5",
+      "resolved": "https://registry.npmjs.org/@graphql-tools/import/-/import-6.2.5.tgz",
+      "integrity": "sha512-ZGXT5tDod7m+LO38fc+o0JzR1LstL0RF35HKEWoUdxRIVaaeYH9VMuan9Gn+9M9RDME3RnzEa9aGzf9ATj8bTA==",
       "requires": {
-        "fs-extra": "9.0.1",
         "resolve-from": "5.0.0",
         "tslib": "~2.0.1"
       },
       "dependencies": {
-        "fs-extra": {
-          "version": "9.0.1",
-          "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.0.1.tgz",
-          "integrity": "sha512-h2iAoN838FqAFJY2/qVpzFXy+EBxfVE220PalAqQLDVsFOHLJrZvut5puAbCdNv6WJk+B8ihI+k0c7JK5erwqQ==",
-          "requires": {
-            "at-least-node": "^1.0.0",
-            "graceful-fs": "^4.2.0",
-            "jsonfile": "^6.0.1",
-            "universalify": "^1.0.0"
-          }
-        },
-        "jsonfile": {
-          "version": "6.1.0",
-          "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
-          "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
-          "requires": {
-            "graceful-fs": "^4.1.6",
-            "universalify": "^2.0.0"
-          },
-          "dependencies": {
-            "universalify": {
-              "version": "2.0.0",
-              "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
-              "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ=="
-            }
-          }
-        },
         "tslib": {
           "version": "2.0.3",
           "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.3.tgz",
           "integrity": "sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ=="
-        },
-        "universalify": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/universalify/-/universalify-1.0.0.tgz",
-          "integrity": "sha512-rb6X1W158d7pRQBg5gkR8uPaSfiids68LTJQYOtEUhoJUWBdaQHsuT/EUduxXYxcrt4r5PJ4fuHW1MHT6p0qug=="
         }
       }
     },
     "@graphql-tools/json-file-loader": {
-      "version": "6.2.5",
-      "resolved": "https://registry.npmjs.org/@graphql-tools/json-file-loader/-/json-file-loader-6.2.5.tgz",
-      "integrity": "sha512-9LS7WuQdSHlRUvXD7ixt5aDpr3hWsueURHOaWe7T0xZ+KWMTw+LIRtWIliCRzbjNmZ+4ZhwHB3Vc1SO2bfYLgg==",
+      "version": "6.2.6",
+      "resolved": "https://registry.npmjs.org/@graphql-tools/json-file-loader/-/json-file-loader-6.2.6.tgz",
+      "integrity": "sha512-CnfwBSY5926zyb6fkDBHnlTblHnHI4hoBALFYXnrg0Ev4yWU8B04DZl/pBRUc459VNgO2x8/mxGIZj2hPJG1EA==",
       "requires": {
         "@graphql-tools/utils": "^7.0.0",
-        "fs-extra": "9.0.1",
         "tslib": "~2.0.1"
       },
       "dependencies": {
@@ -1691,42 +1591,10 @@
             "tslib": "~2.0.1"
           }
         },
-        "fs-extra": {
-          "version": "9.0.1",
-          "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.0.1.tgz",
-          "integrity": "sha512-h2iAoN838FqAFJY2/qVpzFXy+EBxfVE220PalAqQLDVsFOHLJrZvut5puAbCdNv6WJk+B8ihI+k0c7JK5erwqQ==",
-          "requires": {
-            "at-least-node": "^1.0.0",
-            "graceful-fs": "^4.2.0",
-            "jsonfile": "^6.0.1",
-            "universalify": "^1.0.0"
-          }
-        },
-        "jsonfile": {
-          "version": "6.1.0",
-          "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
-          "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
-          "requires": {
-            "graceful-fs": "^4.1.6",
-            "universalify": "^2.0.0"
-          },
-          "dependencies": {
-            "universalify": {
-              "version": "2.0.0",
-              "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
-              "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ=="
-            }
-          }
-        },
         "tslib": {
           "version": "2.0.3",
           "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.3.tgz",
           "integrity": "sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ=="
-        },
-        "universalify": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/universalify/-/universalify-1.0.0.tgz",
-          "integrity": "sha512-rb6X1W158d7pRQBg5gkR8uPaSfiids68LTJQYOtEUhoJUWBdaQHsuT/EUduxXYxcrt4r5PJ4fuHW1MHT6p0qug=="
         }
       }
     },
@@ -1799,9 +1667,9 @@
       }
     },
     "@graphql-tools/prisma-loader": {
-      "version": "6.2.6",
-      "resolved": "https://registry.npmjs.org/@graphql-tools/prisma-loader/-/prisma-loader-6.2.6.tgz",
-      "integrity": "sha512-fjDVAuPAtQIglP7+X9BZ9F69Q0urkbq36ksJjjk+iV+6XpnS/Q46/3YmghGKFUMAuPWQ49UobWYyCN6ctqR89Q==",
+      "version": "6.2.7",
+      "resolved": "https://registry.npmjs.org/@graphql-tools/prisma-loader/-/prisma-loader-6.2.7.tgz",
+      "integrity": "sha512-o0QHl767uaLZVjb9NlupZjCzjfC5Zo79G6QLnK0Rbi0Ldk5Lf05HDZIfMhiyd9tsw73d0GQY7yIPvQJFE2S5Tw==",
       "requires": {
         "@graphql-tools/url-loader": "^6.3.1",
         "@graphql-tools/utils": "^7.0.0",
@@ -1814,7 +1682,6 @@
         "chalk": "^4.1.0",
         "debug": "^4.2.0",
         "dotenv": "^8.2.0",
-        "fs-extra": "9.0.1",
         "graphql-request": "^3.3.0",
         "http-proxy-agent": "^4.0.1",
         "https-proxy-agent": "^5.0.0",
@@ -1869,38 +1736,11 @@
           "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
           "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
         },
-        "fs-extra": {
-          "version": "9.0.1",
-          "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.0.1.tgz",
-          "integrity": "sha512-h2iAoN838FqAFJY2/qVpzFXy+EBxfVE220PalAqQLDVsFOHLJrZvut5puAbCdNv6WJk+B8ihI+k0c7JK5erwqQ==",
-          "requires": {
-            "at-least-node": "^1.0.0",
-            "graceful-fs": "^4.2.0",
-            "jsonfile": "^6.0.1",
-            "universalify": "^1.0.0"
-          }
-        },
         "has-flag": {
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
           "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
         },
-        "jsonfile": {
-          "version": "6.1.0",
-          "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
-          "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
-          "requires": {
-            "graceful-fs": "^4.1.6",
-            "universalify": "^2.0.0"
-          },
-          "dependencies": {
-            "universalify": {
-              "version": "2.0.0",
-              "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
-              "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ=="
-            }
-          }
-        },
         "supports-color": {
           "version": "7.2.0",
           "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -1913,11 +1753,6 @@
           "version": "2.0.3",
           "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.3.tgz",
           "integrity": "sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ=="
-        },
-        "universalify": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/universalify/-/universalify-1.0.0.tgz",
-          "integrity": "sha512-rb6X1W158d7pRQBg5gkR8uPaSfiids68LTJQYOtEUhoJUWBdaQHsuT/EUduxXYxcrt4r5PJ4fuHW1MHT6p0qug=="
         }
       }
     },
@@ -3092,11 +2927,6 @@
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
       "integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k="
     },
-    "at-least-node": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/at-least-node/-/at-least-node-1.0.0.tgz",
-      "integrity": "sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg=="
-    },
     "atob": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
@@ -5786,7 +5616,8 @@
     "graceful-fs": {
       "version": "4.2.4",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.4.tgz",
-      "integrity": "sha512-WjKPNJF79dtJAVniUlGGWHYGz2jWxT6VhN/4m1NdkbZ2nOsEF+cI1Edgql5zCRhs/VsQYRvrXctxktVXZUkixw=="
+      "integrity": "sha512-WjKPNJF79dtJAVniUlGGWHYGz2jWxT6VhN/4m1NdkbZ2nOsEF+cI1Edgql5zCRhs/VsQYRvrXctxktVXZUkixw==",
+      "dev": true
     },
     "graphql-config": {
       "version": "3.2.0",

package.json

@@ -63,7 +63,7 @@
     "webpack-cli": "^3.3.12"
   },
   "dependencies": {
-    "@bioinsilico/rcsb-saguaro-app": "^0.9.13",
+    "@bioinsilico/rcsb-saguaro-app": "^0.9.19",
     "molstar": "^1.1.33"
   },
   "bugs": {

src/RcsbFv3D.tsx

@@ -1,5 +1,5 @@
 
-import {setBoardConfig, buildInstanceSequenceFv} from '@bioinsilico/rcsb-saguaro-app';
+import {setBoardConfig, buildAssemblySequenceFv, getRcsbFv, unmount } from '@bioinsilico/rcsb-saguaro-app';
 import {RcsbFvMolstar} from './RcsbFvMolstar';
 import * as React from "react";
 import * as classes from './styles/RcsbFvStyle.module.scss';
@@ -8,47 +8,96 @@ import {RcsbFvDOMConstants} from "./RcsbFvConstants";
 
 interface RcsbFv3DInterface {
     entryId: string;
+    closeCallback: () => void;
+    title?: string;
+    subtitle?: string;
 }
 
 export class RcsbFv3D extends React.Component <RcsbFv3DInterface, RcsbFv3DInterface > {
 
     private currentAsymId: string;
-    private readonly size: number = 500;
+    private readonly pfvScreenFraction = 0.55;
+    private msPlugin: RcsbFvMolstar;
 
     render(): JSX.Element {
+        document.body.style.overflow = "hidden";
         return (
             <div className={classes.rcsbFvMain} >
-                <div className={classes.rcsbFvInnerDiv} style={{paddingBottom:10}}>
-                    <div className={classes.rcsbFvCell} style={{minHeight:this.size, marginTop:10, marginLeft:10, marginBottom:10}} >
-                        <div id={RcsbFvDOMConstants.SELECT_PFV_ID} />
+                    <div id={RcsbFvDOMConstants.MOLSTAR_ID} style={{width:Math.round((1-this.pfvScreenFraction)*100).toString()+"%"}} className={classes.rcsbFvCell}>
+                        <div id={RcsbFvDOMConstants.MOLSTAR_APP_ID} style={{position: "absolute", width:Math.round((1-this.pfvScreenFraction)*100).toString()+"%", height:"100%"}} />
+                    </div>
+                    <div className={classes.rcsbFvCell} style={{width:Math.round((this.pfvScreenFraction)*100).toString()+"%", paddingLeft: 10, paddingTop:10, borderLeft: "1px solid #ccc"}} >
+                        {this.createTitle()}
+                        {this.createSubtitle()}
+                        <div>
+                            <div id={RcsbFvDOMConstants.SELECT_ASSEMBLY_PFV_ID} style={{display:"inline-block"}}/>
+                            <div id={RcsbFvDOMConstants.SELECT_INSTANCE_PFV_ID} style={{display:"inline-block", marginLeft:5}}/>
+                        </div>
                         <div id={RcsbFvDOMConstants.PFV_ID} >
                             <div id ={RcsbFvDOMConstants.PFV_APP_ID} />
                         </div>
                     </div>
-                    <div id={RcsbFvDOMConstants.MOLSTAR_ID} style={{width:this.size, minHeight: this.size, height: "100%", marginLeft:5}} className={classes.rcsbFvCell}>
-                        <div id={RcsbFvDOMConstants.MOLSTAR_APP_ID} style={{position: "absolute", width:this.size, minHeight:this.size, height:"98%"}} />
-                    </div>
-                </div>
+                <div id={RcsbFvDOMConstants.CLOSE_ID} className={classes.rcsbFvClose} onClick={this.close.bind(this)}>CLOSE</div>
             </div>
         );
     }
 
+    private close(): void {
+        document.body.style.overflow = "visible";
+        unmount(RcsbFvDOMConstants.PFV_APP_ID);
+        this.props.closeCallback();
+    }
+
+    private createTitle(): JSX.Element | null{
+        if(this.props.title)
+            return (<div id={RcsbFvDOMConstants.TITLE_ID} className={classes.rcsbFvTitle}>{this.props.title}</div>)
+        return null;
+    }
+
+    private createSubtitle(): JSX.Element | null{
+        if(this.props.subtitle)
+            return (<div id={RcsbFvDOMConstants.SUBTITLE_ID} className={classes.rcsbFvSubtitle}>{this.props.subtitle}</div>)
+        return null;
+    }
+
     componentDidMount(): void {
-        const msPlugin: RcsbFvMolstar = new RcsbFvMolstar(RcsbFvDOMConstants.MOLSTAR_APP_ID);
-        msPlugin.setBackground(0xffffff);
-        msPlugin.load({url:'//files.rcsb.org/download/'+this.props.entryId+'.cif'});
+        this.msPlugin = new RcsbFvMolstar(RcsbFvDOMConstants.MOLSTAR_APP_ID);
+        this.msPlugin.setBackground(0xffffff);
+        this.msPlugin.load({url:'//files.rcsb.org/download/'+this.props.entryId+'.cif'});
+        const width: number = window.innerWidth*this.pfvScreenFraction;
+        const trackWidth: number = width - 190 - 55;
         setBoardConfig({
-            trackWidth: 600,
+            trackWidth: trackWidth,
             elementClickCallBack:(e:{begin:number, end:number|undefined})=>{
                 if(e == null)
                     return;
                 const x = e.begin;
                 const y = e.end ?? e.begin;
-                msPlugin.interactivity.select(this.currentAsymId, x, y);
+                this.msPlugin.interactivity.select(this.currentAsymId, x, y);
             }
         });
-        buildInstanceSequenceFv(RcsbFvDOMConstants.PFV_APP_ID,RcsbFvDOMConstants.SELECT_PFV_ID,this.props.entryId, undefined, (x)=>{
+        buildAssemblySequenceFv(
+            RcsbFvDOMConstants.PFV_APP_ID,
+            RcsbFvDOMConstants.SELECT_ASSEMBLY_PFV_ID,
+            RcsbFvDOMConstants.SELECT_INSTANCE_PFV_ID,
+            this.props.entryId,
+            (x)=>{
+                this.msPlugin.load({url:'//files.rcsb.org/download/'+this.props.entryId+'.cif', assemblyId: x == "Model" ? "" : x});
+            },
+            (x)=>{
             this.currentAsymId = x.asymId;
-        });
+            }
+        );
+        window.addEventListener('resize', this.updatePfvDimensions.bind(this));
+    }
+
+    componentWillUnmount() {
+        window.removeEventListener('resize', this.updatePfvDimensions.bind(this));
+    }
+
+    private updatePfvDimensions(): void{
+        const width: number = window.innerWidth*this.pfvScreenFraction;
+        const trackWidth: number = width - 190 - 55;
+        getRcsbFv(RcsbFvDOMConstants.PFV_APP_ID).updateBoardConfig({boardConfigData:{trackWidth:trackWidth}});
     }
 }

src/RcsbFv3DBuilder.tsx

@@ -6,20 +6,38 @@ export class RcsbFv3DBuilder {
 
     private elementId: string;
     private entryId: string;
+    private title: string | undefined;
+    private subtitle: string | undefined;
 
-    constructor(domId: string, entryId: string) {
-        this.elementId = domId;
+    constructor(entryId: string, title?: string, subtitle?: string, domId?: string) {
+        this.elementId = domId ?? "RcsbFv3D_"+Math.random().toString(36).substr(2);
         this.entryId = entryId;
+        this.title = title;
+        this.subtitle = subtitle;
     }
 
     render(): void{
         if(this.entryId == null)
             throw "PDB entry Id not found";
-        if(this.elementId == null || document.getElementById(this.elementId) == null)
+        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);
+        }
+
         ReactDom.render(
-            <RcsbFv3D entryId={this.entryId}/>,
-            document.getElementById(this.elementId)
+            <RcsbFv3D entryId={this.entryId} title={this.title} subtitle={this.subtitle} closeCallback={this.close.bind(this)}/>,
+            element
         );
     }
+
+    private close(): void{
+        const element: HTMLElement | null = document.getElementById(this.elementId);
+        if(element != null) {
+            ReactDom.unmountComponentAtNode(element);
+            element.remove();
+        }
+    }
 }

src/RcsbFvConstants.ts

@@ -1,7 +1,11 @@
 export enum RcsbFvDOMConstants {
-    SELECT_PFV_ID = "selectPfv",
+    SELECT_ASSEMBLY_PFV_ID = "selectAssemblyPfv",
+    SELECT_INSTANCE_PFV_ID = "selectInstancePfv",
     PFV_ID = "pfvDiv",
     PFV_APP_ID = "pfvApp",
     MOLSTAR_ID= "molstarDiv",
     MOLSTAR_APP_ID = "molstarApp",
+    TITLE_ID = "titleDivId",
+    SUBTITLE_ID = "subtitleDivId",
+    CLOSE_ID = "closeDivId"
 }

src/styles/RcsbFvStyle.module.scss

@@ -1,17 +1,13 @@
-$div-main-width: 1550px;
 
 .rcsbFvMain {
-  width: 90vw;
-  position: relative;
-  left: calc(-45vw + 50%);
-  display: flex;
-  justify-content: center;
-}
-
-.rcsbFvInnerDiv {
-  border: #eee 1px solid;
-  border-radius: 5px;
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
   display: flex;
+  background-color: #fff;
+  z-index: 1000000;
 }
 
 .rcsbFvMain * {
@@ -22,3 +18,28 @@ $div-main-width: 1550px;
   display: inline-block;
 }
 
+.rcsbFvSubtitle {
+  font-size: 18px;
+  font-family: inherit;
+  font-weight: 500;
+  line-height: 1.1;
+  color: inherit;
+  margin-bottom: 15px;
+}
+
+.rcsbFvTitle{
+  font-size: 36px;
+  font-family: inherit;
+  font-weight: 500;
+  line-height: 1.1;
+  color: inherit;
+  margin-bottom: 15px;
+}
+
+.rcsbFvClose {
+  position: absolute;
+  right: 10px;
+  top:5px;
+  cursor: pointer;
+}
+