class fullHeight && examples doctype && mode docs

README.md

@@ -1,7 +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 [RCSB Molstar](https://github.com/rcsb/rcsb-molstar) designed to display protein features at the [RCSB Web Site](https://www.rcsb.org). 
+and [RCSB Molstar](https://github.com/rcsb/rcsb-Molstar) 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 Protein Feature Summaries. 
 The package allows access to RCSB Saguaro and Molstar methods to add or change the displayed data. 
@@ -242,7 +242,7 @@ var sequenceConfig = {
     subtitle: undefined,
     config: customConfig
 };
-var molstarConfig = {
+var MolstarConfig = {
     loadConfig: {
         loadMethod: "loadPdbIds",
         loadParams: [{
@@ -258,7 +258,7 @@ var molstarConfig = {
 document.addEventListener("DOMContentLoaded", function (event) {
     var panel3d = new RcsbFv3D.custom({
         elementId: "pfv",
-        structurePanelConfig: molstarConfig,
+        structurePanelConfig: MolstarConfig,
         sequencePanelConfig: sequenceConfig,
         cssConfig: {
             overwriteCss:true,
@@ -297,7 +297,7 @@ document.addEventListener("DOMContentLoaded", function (event) {
     
 From the root of the project:
     
-    http-server -p PORT-NUMBER
+    npx http-server -p PORT-NUMBER
     
 and navigate to `localhost:PORT-NUMBER/build/examples/`
 
@@ -307,8 +307,8 @@ TypeScript full classes documentation can be found [here](https://rcsb.github.io
 ### Main Classes and Interfaces
 
 #### Assembly view
-Class **`RcsbFv3DAssembly`** (`src/RcsbFv3D/RcsbFv3DAssembly.tsx`) builds a predefined 1D/3D view for PDB entries. This method is used in the RCSB PDB web portal 
-to display 1D features on PDB entries (ex: [4hhb](https://www.rcsb.org/3d-sequence/4HHB)). Its configuration requires a single PDB ID. 
+Class **`RcsbFv3DAssembly`** (`src/RcsbFv3D/RcsbFv3DAssembly.tsx`) builds a predefined 1D/3D view for PDB assemblies. This method is used in the RCSB PDB web portal 
+to display 1D positional features of PDB models (ex: [4hhb](https://www.rcsb.org/3d-sequence/4HHB)). Its configuration requires a single PDB Id. 
 In addition, `additionalConfig` allows to configure the feature viewer as describe in rcsb-saguaro-app [API]("https://rcsb.github.io/rcsb-saguaro-app/interfaces/rcsbfvadditionalconfig.html").
 This parameter exposes the board configuration through the attribute `boardConfig` ([ref]("https://rcsb.github.io/rcsb-saguaro/interfaces/rcsbfvboardconfiginterface.html")).  
 ```typescript
@@ -325,7 +325,8 @@ Source code example can be found in `src/examples/assembly/index.ts`.
 #### Custom view
 
 Class **`RcsbFv3DCustom`** file `src/RcsbFv3D/RcsbFv3DCustom.tsx` builds a customized view between one or more feature viewers and a single Molstar plugin.
-The configuration interface encodes the parameters needed for the feature viewers (`sequencePanelConfig`) and the molstar plugin (`structurePanelConfig`).
+The configuration interface encodes the parameters for the feature viewers (`sequencePanelConfig`), the Molstar plugin (`structurePanelConfig`) and 
+their dynamic interaction.
 
 ```typescript
 interface RcsbFv3DCustomInterface extends RcsbFv3DAbstractInterface {
@@ -340,11 +341,50 @@ interface RcsbFv3DCustomInterface extends RcsbFv3DAbstractInterface {
 
 ![Alt text](https://raw.githubusercontent.com/rcsb/rcsb-saguaro-3d/master/.github/img/config_img.png "Custom config schema")
 
-Information in the sequence panels is organized in blocks where each block contains the parameter 
-(`blockConfig`) to display one or more feature viewers. The optional parameter `blockSelectorElement` defines a React component 
+##### Structural Panel
+
+The structural panel configuration `structurePanelConfig: RcsbFvStructureInterface` includes the loading configuration for the 3D structural data
+and the Molstar plugin. A full description of the structural panel configuration can be found [here]("https://rcsb.github.io/rcsb-saguaro-3d/interfaces/rcsbfvstructureinterface.html").  
+
+```typescript
+interface RcsbFvStructureInterface {
+    loadConfig: LoadMolstarInterface;
+    pluginConfig?: Partial<ViewerProps>;
+}
+```
+
+The attribute `loadConfig: LoadMolstarInterface` encodes the configuration for loading the 3D structural data. 
+ 
+```typescript
+interface LoadMolstarInterface {
+    loadMethod: LoadMethod;
+    loadParams: LoadParams | Array<LoadParams>;
+}
+```
+- `loadMethod: LoadMethod`  is an enumerated value  that indicates the source of the structural models
+```typescript
+enum LoadMethod {
+    loadPdbId = "loadPdbId",
+    loadPdbIds = "loadPdbIds",
+    loadStructureFromUrl = "loadStructureFromUrl"
+}
+```
+- `loadParams: LoadParams | Array<LoadParams>` encode the parameters needed to collect and load the data
+```typescript
+interface LoadParams {
+    pdbId?: string;
+    url?: string,
+    isBinary?: boolean
+}
+```
+
+##### Sequence panel
+
+The sequence panel organizes information in different blocks where each block encodes the configuration 
+(`blockConfig`) to display one or more feature viewers. Only a single block can be displayed at a time. The optional parameter `blockSelectorElement` defines a React component 
 that renders the html element used to change the displayed block. The class `BlockSelectorManager` is used to select which block is 
-displayed. For example, `blockSelectorManager.setActiveBlock("myBlock")` will display the feature viewers defined in the block 
-with `blockId` `"myBlock"` (see `FeatureBlockInterface`). Additionally, `blockChangeCallback` defines a function that will be executed 
+displayed are those that are hidden. For example, `blockSelectorManager.setActiveBlock("myBlock")` will display the feature viewers defined in the block 
+with `blockId` `"myBlock"` (see `FeatureBlockInterface`) and hide the others. Additionally, `blockChangeCallback` defines a function that will be executed 
 when the displayed block changes.
 
 ```typescript
@@ -366,13 +406,13 @@ interface FeatureBlockInterface {
 }
 ```
 
-The interface fo each feature viewer defines its dynamic interaction with the molstar plugin through different event callbacks
+The interface for each feature viewer defines its dynamic interaction with the Molstar plugin through different event callbacks functions
 
-- `sequenceSelectionChangeCallback` defines how the molstar plugin reacts when the feature viewer selection changes
-- `sequenceElementClickCallback` defines how the molstar plugin reacts when a feature viewer element (positional annotation) is clicked
-- `sequenceHoverCallback` defines how the molstar plugin reacts when the mouse hovers the feature viewer or any element
-- `structureSelectionCallback` defines how the protein feature viewer reacts when the molstar plugin selection changes
-- `structureHoverCallback` defines how the protein feature viewer reacts when displayed models on the molstar plugin are hovered
+- `sequenceSelectionChangeCallback` defines how the Molstar plugin reacts when the feature viewer selection changes
+- `sequenceElementClickCallback` defines how the Molstar plugin reacts when a feature viewer element (positional annotation) is clicked
+- `sequenceHoverCallback` defines how the Molstar plugin reacts when the mouse hovers the feature viewer or any of its elements
+- `structureSelectionCallback` defines how the protein feature viewer reacts when the Molstar plugin selection changes
+- `structureHoverCallback` defines how the protein feature viewer reacts when displayed models on the Molstar plugin are hovered
 
 ```typescript
 export interface FeatureViewInterface {
@@ -387,7 +427,7 @@ export interface FeatureViewInterface {
 }
 ```
 
-`plugin: SaguaroPluginPublicInterface` exposes the interface to interact with the molstar plugin
+`plugin: SaguaroPluginPublicInterface` exposes the interface to interact with the Molstar plugin
 and change model representations ([ref]("https://rcsb.github.io/rcsb-saguaro-3d/interfaces/saguaropluginpublicinterface.html")). 
 It provides multiple methods such as hide, display or select to modify how structural data is displayed. The parameter `pfv: RcsbFv` 
 allows to access the feature viewer API ([ref]("https://rcsb.github.io/rcsb-saguaro/classes/rcsbfv.html")). It exposes methods to modify 

cdn-examples/multiple-chain/index.html

@@ -5,7 +5,7 @@
     <title>JavaScript example</title>
     <script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
     <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
-    <script crossorigin src="https://cdn.jsdelivr.net/npm/@rcsb/rcsb-saguaro-3d@1.0.1-beta/build/dist/app.js"></script>
+    <script crossorigin src="https://cdn.jsdelivr.net/npm/@rcsb/rcsb-saguaro-3d@1.0.2-beta/build/dist/app.js"></script>
     <script src="./index.js"></script>
 </head>
 <body>

cdn-examples/single-chain/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>JavaScript example</title>
+    <script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
+    <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
+    <script crossorigin src="https://cdn.jsdelivr.net/npm/@rcsb/rcsb-saguaro-3d@1.0.2-beta/build/dist/app.js"></script>
+    <script src="./index.js"></script>
+</head>
+<body>
+<div id="pfv" style="height: 900px;"></div>
+</body>
+</html>

cdn-examples/single-chain/index.js

@@ -0,0 +1,149 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+
+var rowConfig = [
+    {
+        trackId: "sequenceTrack",
+        trackHeight: 20,
+        trackColor: "#F9F9F9",
+        displayType: "sequence" /* SEQUENCE */,
+        nonEmptyDisplay: true,
+        rowTitle: "1ASH SEQUENCE",
+        trackData: [
+            {
+                begin: 1,
+                value: "ANKTRELCMKSLEHAKVDTSNEARQDGIDLYKHMFENYPPLRKYFKSREEYTAEDVQNDPFFAKQGQKILLACHVLCATYDDRETFNAYTRELLDRHARDHVHMPPEVWTDFWKLFEEYLGKKTTLDEPTKQAWHEIGREFAKEINKHGR"
+            }
+        ]
+    }, {
+        trackId: "blockTrack",
+        trackHeight: 20,
+        trackColor: "#F9F9F9",
+        displayType: "block" /* BLOCK */,
+        displayColor: "#FF0000",
+        rowTitle: "1ASH",
+        trackData: [{
+            begin: 30,
+            end: 60
+        }]
+    }
+];
+var fvConfig = {
+    boardId: "1ash_board",
+    boardConfig: {
+        range: {
+            min: 1,
+            max: 150
+        },
+        rowTitleWidth: 190,
+        includeAxis: true
+    },
+    rowConfig: rowConfig,
+    sequenceSelectionChangeCallback: function (plugin, selectorManager, sequenceRegion) {
+        selectorManager.clearSelection("select", { modelId: "1ash_model", labelAsymId: "A" });
+        if (sequenceRegion.length > 0) {
+            var regions = sequenceRegion.map(function (r) {
+                var _a;
+                return ({
+                    modelId: "1ash_model",
+                    labelAsymId: "A",
+                    region: { begin: r.begin, end: (_a = r.end) !== null && _a !== void 0 ? _a : r.begin, source: "sequence" }
+                });
+            });
+            selectorManager.addSelectionFromMultipleRegions(regions, "select");
+            plugin.select(regions.map(function (r) { return (__assign(__assign({}, r), { begin: r.region.begin, end: r.region.end })); }), "select", "set");
+        }
+        else {
+            plugin.clearSelection("select", { modelId: "1ash_model", labelAsymId: "A" });
+            plugin.resetCamera();
+        }
+    },
+    sequenceElementClickCallback: function (plugin, selectorManager, d) {
+        var _a;
+        if (d != null)
+            plugin.cameraFocus("1ash_model", "A", d.begin, (_a = d.end) !== null && _a !== void 0 ? _a : d.begin);
+    },
+    sequenceHoverCallback: function (plugin, selectorManager, elements) {
+        if (elements == null || elements.length == 0)
+            plugin.clearSelection("hover");
+        else
+            plugin.select(elements.map(function (e) {
+                var _a;
+                return ({
+                    modelId: "1ash_model",
+                    labelAsymId: "A",
+                    begin: e.begin,
+                    end: (_a = e.end) !== null && _a !== void 0 ? _a : e.begin
+                });
+            }), "hover", "set");
+    },
+    structureSelectionCallback: function (plugin, pfv, selection) {
+        var sel = selection.getSelectionWithCondition("1ash_model", "A", "select");
+        if (sel == null) {
+            pfv.clearSelection("select");
+            plugin.resetCamera();
+        }
+        else {
+            pfv.setSelection({ elements: sel.regions, mode: "select" });
+        }
+    },
+    structureHoverCallback: function (plugin, pfv, selection) {
+        var sel = selection.getSelectionWithCondition("1ash_model", "A", "hover");
+        if (sel == null)
+            pfv.clearSelection("hover");
+        else
+            pfv.setSelection({ elements: sel.regions, mode: "hover" });
+    }
+};
+var block = {
+    blockId: "MyBlock_1",
+    featureViewConfig: [fvConfig]
+};
+var customConfig = {
+    blockConfig: [block]
+};
+var sequenceConfig = {
+    title: "Single chain example",
+    subtitle: "PDB entry with  single chain",
+    config: customConfig
+};
+var molstarConfig = {
+    loadConfig: {
+        loadMethod: "loadPdbIds",
+        loadParams: [{
+            pdbId: "1ash",
+            id: "1ash_model"
+        }]
+    },
+    pluginConfig: {
+        showImportControls: true,
+        showSessionControls: false
+    }
+};
+document.addEventListener("DOMContentLoaded", function (event) {
+    var panel3d = new RcsbFv3D.custom({
+        elementId: "pfv",
+        structurePanelConfig: molstarConfig,
+        sequencePanelConfig: sequenceConfig,
+        cssConfig: {
+            structurePanel: {
+                minWidth: 800,
+                minHeight: 800
+            },
+            sequencePanel: {
+                minWidth: 800
+            }
+        }
+    });
+    panel3d.render();
+});

docs/index.html

@@ -68,7 +68,7 @@
 					<h1>rcsb-saguaro-3D</h1>
 				</a>
 				<p>RCSB Saguaro Web 3D is an open-source library built on the top of the <a href="https://rcsb.github.io/rcsb-saguaro">RCSB Saguaro 1D Feature Viewer</a>
-					and <a href="https://github.com/rcsb/rcsb-molstar">RCSB Molstar</a> designed to display protein features at the <a href="https://www.rcsb.org">RCSB Web Site</a>.
+					and <a href="https://github.com/rcsb/rcsb-Molstar">RCSB Molstar</a> designed to display protein features at the <a href="https://www.rcsb.org">RCSB Web Site</a>.
 					The package collects protein annotations from the <a href="https://1d-coordinates.rcsb.org">1D Coordinate Server</a>
 					and the main <a href="https://data.rcsb.org">RCSB Data API</a> and generates Protein Feature Summaries.
 				The package allows access to RCSB Saguaro and Molstar methods to add or change the displayed data. </p>
@@ -308,7 +308,7 @@ var sequenceConfig = {
     subtitle: undefined,
     config: customConfig
 };
-var molstarConfig = {
+var MolstarConfig = {
     loadConfig: {
         loadMethod: "loadPdbIds",
         loadParams: [{
@@ -324,7 +324,7 @@ var molstarConfig = {
 document.addEventListener("DOMContentLoaded", function (event) {
     var panel3d = new RcsbFv3D.custom({
         elementId: "pfv",
-        structurePanelConfig: molstarConfig,
+        structurePanelConfig: MolstarConfig,
         sequencePanelConfig: sequenceConfig,
         cssConfig: {
             overwriteCss:true,
@@ -365,7 +365,7 @@ document.addEventListener("DOMContentLoaded", function (event) {
 					<h3>Build examples</h3>
 				</a>
 				<pre><code>npm <span class="hljs-builtin-name">run</span> buildExamples</code></pre><p>From the root of the project:</p>
-				<pre><code>http-server -p PORT-<span class="hljs-built_in">NUMBER</span></code></pre><p>and navigate to <code>localhost:PORT-NUMBER/build/examples/</code></p>
+				<pre><code>npx http-server -p PORT-<span class="hljs-built_in">NUMBER</span></code></pre><p>and navigate to <code>localhost:PORT-NUMBER/build/examples/</code></p>
 				<a href="#library-documentation" id="library-documentation" style="color: inherit; text-decoration: none;">
 					<h3>Library Documentation</h3>
 				</a>
@@ -376,8 +376,8 @@ document.addEventListener("DOMContentLoaded", function (event) {
 				<a href="#assembly-view" id="assembly-view" style="color: inherit; text-decoration: none;">
 					<h4>Assembly view</h4>
 				</a>
-				<p>Class <strong><code>RcsbFv3DAssembly</code></strong> (<code>src/RcsbFv3D/RcsbFv3DAssembly.tsx</code>) builds a predefined 1D/3D view for PDB entries. This method is used in the RCSB PDB web portal
-					to display 1D features on PDB entries (ex: <a href="https://www.rcsb.org/3d-sequence/4HHB">4hhb</a>). Its configuration requires a single PDB ID.
+				<p>Class <strong><code>RcsbFv3DAssembly</code></strong> (<code>src/RcsbFv3D/RcsbFv3DAssembly.tsx</code>) builds a predefined 1D/3D view for PDB assemblies. This method is used in the RCSB PDB web portal
+					to display 1D positional features of PDB models (ex: <a href="https://www.rcsb.org/3d-sequence/4HHB">4hhb</a>). Its configuration requires a single PDB Id.
 					In addition, <code>additionalConfig</code> allows to configure the feature viewer as describe in rcsb-saguaro-app <a href="%22https://rcsb.github.io/rcsb-saguaro-app/interfaces/rcsbfvadditionalconfig.html%22">API</a>.
 				This parameter exposes the board configuration through the attribute <code>boardConfig</code> (<a href="%22https://rcsb.github.io/rcsb-saguaro/interfaces/rcsbfvboardconfiginterface.html%22">ref</a>).  </p>
 				<pre><code class="language-typescript"><span class="hljs-keyword">interface</span> RcsbFv3DAssemblyInterface <span class="hljs-keyword">extends</span> RcsbFv3DAbstractInterface {
@@ -393,7 +393,8 @@ document.addEventListener("DOMContentLoaded", function (event) {
 					<h4>Custom view</h4>
 				</a>
 				<p>Class <strong><code>RcsbFv3DCustom</code></strong> file <code>src/RcsbFv3D/RcsbFv3DCustom.tsx</code> builds a customized view between one or more feature viewers and a single Molstar plugin.
-				The configuration interface encodes the parameters needed for the feature viewers (<code>sequencePanelConfig</code>) and the molstar plugin (<code>structurePanelConfig</code>).</p>
+					The configuration interface encodes the parameters for the feature viewers (<code>sequencePanelConfig</code>), the Molstar plugin (<code>structurePanelConfig</code>) and
+				their dynamic interaction.</p>
 				<pre><code class="language-typescript"><span class="hljs-keyword">interface</span> RcsbFv3DCustomInterface <span class="hljs-keyword">extends</span> RcsbFv3DAbstractInterface {
     <span class="hljs-attr">structurePanelConfig</span>: RcsbFvStructureInterface;
     sequencePanelConfig: {
@@ -403,11 +404,42 @@ document.addEventListener("DOMContentLoaded", function (event) {
     };
 }</code></pre>
 				<p><img src="https://raw.githubusercontent.com/rcsb/rcsb-saguaro-3d/master/.github/img/config_img.png" alt="Alt text" title="Custom config schema"></p>
-				<p>Information in the sequence panels is organized in blocks where each block contains the parameter
-					(<code>blockConfig</code>) to display one or more feature viewers. The optional parameter <code>blockSelectorElement</code> defines a React component
+				<a href="#structural-panel" id="structural-panel" style="color: inherit; text-decoration: none;">
+					<h5>Structural Panel</h5>
+				</a>
+				<p>The structural panel configuration <code>structurePanelConfig: RcsbFvStructureInterface</code> includes the loading configuration for the 3D structural data
+				and the Molstar plugin. A full description of the structural panel configuration can be found <a href="%22https://rcsb.github.io/rcsb-saguaro-3d/interfaces/rcsbfvstructureinterface.html%22">here</a>.  </p>
+				<pre><code class="language-typescript"><span class="hljs-keyword">interface</span> RcsbFvStructureInterface {
+    <span class="hljs-attr">loadConfig</span>: LoadMolstarInterface;
+    pluginConfig?: Partial&lt;ViewerProps&gt;;
+}</code></pre>
+				<p>The attribute <code>loadConfig: LoadMolstarInterface</code> encodes the configuration for loading the 3D structural data. </p>
+				<pre><code class="language-typescript"><span class="hljs-keyword">interface</span> LoadMolstarInterface {
+    <span class="hljs-attr">loadMethod</span>: LoadMethod;
+    loadParams: LoadParams | <span class="hljs-built_in">Array</span>&lt;LoadParams&gt;;
+}</code></pre>
+				<ul>
+					<li><code>loadMethod: LoadMethod</code>  is an enumerated value  that indicates the source of the structural models<pre><code class="language-typescript"><span class="hljs-built_in">enum</span> LoadMethod {
+  loadPdbId = <span class="hljs-string">&quot;loadPdbId&quot;</span>,
+  loadPdbIds = <span class="hljs-string">&quot;loadPdbIds&quot;</span>,
+  loadStructureFromUrl = <span class="hljs-string">&quot;loadStructureFromUrl&quot;</span>
+}</code></pre>
+					</li>
+					<li><code>loadParams: LoadParams | Array&lt;LoadParams&gt;</code> encode the parameters needed to collect and load the data<pre><code class="language-typescript"><span class="hljs-keyword">interface</span> LoadParams {
+  pdbId?: <span class="hljs-built_in">string</span>;
+  url?: <span class="hljs-built_in">string</span>,
+  isBinary?: <span class="hljs-built_in">boolean</span>
+}</code></pre>
+					</li>
+				</ul>
+				<a href="#sequence-panel" id="sequence-panel" style="color: inherit; text-decoration: none;">
+					<h5>Sequence panel</h5>
+				</a>
+				<p>The sequence panel organizes information in different blocks where each block encodes the configuration
+					(<code>blockConfig</code>) to display one or more feature viewers. Only a single block can be displayed at a time. The optional parameter <code>blockSelectorElement</code> defines a React component
 					that renders the html element used to change the displayed block. The class <code>BlockSelectorManager</code> is used to select which block is
-					displayed. For example, <code>blockSelectorManager.setActiveBlock(&quot;myBlock&quot;)</code> will display the feature viewers defined in the block
-					with <code>blockId</code> <code>&quot;myBlock&quot;</code> (see <code>FeatureBlockInterface</code>). Additionally, <code>blockChangeCallback</code> defines a function that will be executed
+					displayed are those that are hidden. For example, <code>blockSelectorManager.setActiveBlock(&quot;myBlock&quot;)</code> will display the feature viewers defined in the block
+					with <code>blockId</code> <code>&quot;myBlock&quot;</code> (see <code>FeatureBlockInterface</code>) and hide the others. Additionally, <code>blockChangeCallback</code> defines a function that will be executed
 				when the displayed block changes.</p>
 				<pre><code class="language-typescript"><span class="hljs-keyword">interface</span> CustomViewInterface {
     <span class="hljs-attr">blockConfig</span>: FeatureBlockInterface | <span class="hljs-built_in">Array</span>&lt;FeatureBlockInterface&gt;;
@@ -421,13 +453,13 @@ document.addEventListener("DOMContentLoaded", function (event) {
     <span class="hljs-attr">blockId</span>:<span class="hljs-built_in">string</span>;
     featureViewConfig: <span class="hljs-built_in">Array</span>&lt;FeatureViewInterface&gt; | FeatureViewInterface;
 }</code></pre>
-				<p>The interface fo each feature viewer defines its dynamic interaction with the molstar plugin through different event callbacks</p>
+				<p>The interface for each feature viewer defines its dynamic interaction with the Molstar plugin through different event callbacks functions</p>
 				<ul>
-					<li><code>sequenceSelectionChangeCallback</code> defines how the molstar plugin reacts when the feature viewer selection changes</li>
-					<li><code>sequenceElementClickCallback</code> defines how the molstar plugin reacts when a feature viewer element (positional annotation) is clicked</li>
-					<li><code>sequenceHoverCallback</code> defines how the molstar plugin reacts when the mouse hovers the feature viewer or any element</li>
-					<li><code>structureSelectionCallback</code> defines how the protein feature viewer reacts when the molstar plugin selection changes</li>
-					<li><code>structureHoverCallback</code> defines how the protein feature viewer reacts when displayed models on the molstar plugin are hovered</li>
+					<li><code>sequenceSelectionChangeCallback</code> defines how the Molstar plugin reacts when the feature viewer selection changes</li>
+					<li><code>sequenceElementClickCallback</code> defines how the Molstar plugin reacts when a feature viewer element (positional annotation) is clicked</li>
+					<li><code>sequenceHoverCallback</code> defines how the Molstar plugin reacts when the mouse hovers the feature viewer or any of its elements</li>
+					<li><code>structureSelectionCallback</code> defines how the protein feature viewer reacts when the Molstar plugin selection changes</li>
+					<li><code>structureHoverCallback</code> defines how the protein feature viewer reacts when displayed models on the Molstar plugin are hovered</li>
 				</ul>
 				<pre><code class="language-typescript"><span class="hljs-keyword">export</span> <span class="hljs-keyword">interface</span> FeatureViewInterface {
     boardId?:<span class="hljs-built_in">string</span>;
@@ -439,7 +471,7 @@ document.addEventListener("DOMContentLoaded", function (event) {
     structureSelectionCallback: <span class="hljs-function">(<span class="hljs-params">plugin: SaguaroPluginPublicInterface, pfv: RcsbFv, selectorManager: RcsbFvSelectorManager</span>) =&gt;</span> <span class="hljs-built_in">void</span>;
     structureHoverCallback: <span class="hljs-function">(<span class="hljs-params">plugin: SaguaroPluginPublicInterface, pfv: RcsbFv, selectorManager: RcsbFvSelectorManager</span>) =&gt;</span> <span class="hljs-built_in">void</span>;
 }</code></pre>
-				<p><code>plugin: SaguaroPluginPublicInterface</code> exposes the interface to interact with the molstar plugin
+				<p><code>plugin: SaguaroPluginPublicInterface</code> exposes the interface to interact with the Molstar plugin
 					and change model representations (<a href="%22https://rcsb.github.io/rcsb-saguaro-3d/interfaces/saguaropluginpublicinterface.html%22">ref</a>).
 					It provides multiple methods such as hide, display or select to modify how structural data is displayed. The parameter <code>pfv: RcsbFv</code>
 					allows to access the feature viewer API (<a href="%22https://rcsb.github.io/rcsb-saguaro/classes/rcsbfv.html%22">ref</a>). It exposes methods to modify

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rcsb/rcsb-saguaro-3d",
-  "version": "1.0.1-beta",
+  "version": "1.0.2-beta",
   "description": "RCSB Molstar/Saguaro Web App",
   "main": "build/dist/RcsbFv3DBuilder.js",
   "files": [

src/RcsbFv3D/RcsbFv3DComponent.tsx

@@ -61,7 +61,7 @@ export class RcsbFv3DComponent extends React.Component <RcsbFv3DComponentInterfa
 
     render(): JSX.Element {
         return (
-            <div  className={ this.props.fullScreen ? classes.fullScreen : ""} >
+            <div className={this.props.fullScreen ? classes.fullScreen : classes.fullHeight} >
                 <div
                     id={this.ROOT_DIV_ID}
                     style={RcsbFv3DComponent.mainDivCssConfig(this.props.cssConfig?.rootPanel)}

src/examples/assembly/index.html

@@ -1,3 +1,4 @@
+<!DOCTYPE html>
 <html lang="en">
 <head>
     <link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon">

src/examples/css-config/index.html

@@ -1,3 +1,4 @@
+<!DOCTYPE html>
 <html lang="en">
 <head>
     <link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon">

src/examples/multiple-chain/index.html

@@ -1,3 +1,4 @@
+<!DOCTYPE html>
 <html lang="en">
 <head>
     <link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon">

src/examples/single-chain/index.html

@@ -1,3 +1,4 @@
+<!DOCTYPE html>
 <html lang="en">
 <head>
     <link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon">

src/examples/structural-alignment/index.html

@@ -1,3 +1,4 @@
+<!DOCTYPE html>
 <html lang="en">
 <head>
     <link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon">

src/styles/RcsbFvStyle.module.scss

@@ -16,6 +16,10 @@
   z-index: 10;
 }
 
+.fullHeight {
+  height: 100%;
+}
+
 .rcsbFvMain * {
   box-sizing: border-box;
 }