more docs

README.md

@@ -310,9 +310,13 @@ TypeScript full classes documentation can be found [here](https://rcsb.github.io
 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")).  
+This parameter exposes the board configuration through the attribute `boardConfig` ([ref]("https://rcsb.github.io/rcsb-saguaro/interfaces/rcsbfvboardconfiginterface.html")).
+The component will be mounted in the html element with id `elementId`. If there is no html element in the current document,
+a new div element will be added, and the component will be displayed in full screen mode. 
+
 ```typescript
 interface RcsbFv3DAssemblyInterface extends RcsbFv3DAbstractInterface {
+   elementId: "htmlElement",
    config: {
         entryId: string;
         title?: string;
@@ -330,6 +334,7 @@ their dynamic interaction.
 
 ```typescript
 interface RcsbFv3DCustomInterface extends RcsbFv3DAbstractInterface {
+   elementId: "htmlElement",
     structurePanelConfig: RcsbFvStructureInterface;
     sequencePanelConfig: {
         config: CustomViewInterface;

docs/index.html

@@ -379,8 +379,11 @@ document.addEventListener("DOMContentLoaded", function (event) {
 				<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>
+					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>).
+					The component will be mounted in the html element with id <code>elementId</code>. If there is no html element in the current document,
+				a new div element will be added, and the component will be displayed in full screen mode. </p>
 				<pre><code class="language-typescript"><span class="hljs-keyword">interface</span> RcsbFv3DAssemblyInterface <span class="hljs-keyword">extends</span> RcsbFv3DAbstractInterface {
+   <span class="hljs-attr">elementId</span>: <span class="hljs-string">&quot;htmlElement&quot;</span>,
    <span class="hljs-attr">config</span>: {
         <span class="hljs-attr">entryId</span>: <span class="hljs-built_in">string</span>;
         title?: <span class="hljs-built_in">string</span>;
@@ -396,6 +399,7 @@ document.addEventListener("DOMContentLoaded", function (event) {
 					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">elementId</span>: <span class="hljs-string">&quot;htmlElement&quot;</span>,
     <span class="hljs-attr">structurePanelConfig</span>: RcsbFvStructureInterface;
     sequencePanelConfig: {
         <span class="hljs-attr">config</span>: CustomViewInterface;

package.json

@@ -10,7 +10,7 @@
     "tsc": "tsc --incremental",
     "tscExamples": "tsc --project ./tsconfig.examples.json",
     "build": "webpack --config ./webpack.config.js",
-    "buildAll": "npm run cleanAll && npm run tsc && npm run cpStyles && npm run copyConfig && npm run build && npm run buildExamples",
+    "buildAll": "npm run cleanAll && npm run tsc && npm run cpStyles && npm run copyConfig && npm run build && npm run buildExamples && npm run buildDoc",
     "buildApp": "npm run cleanAll && npm run tsc && npm run cpStyles && npm run copyConfig && npm run build && npm run clean",
     "packExamples": "webpack --config ./webpack.examples.config.js",
     "buildExamples": "npm run cleanExamples && npm run tscExamples && npm run cpStyles && npm run copyExample && npm run packExamples && npm run clean",