docs && cdn-example

LICENSE.md

@@ -0,0 +1,21 @@
+The MIT License
+
+    Copyright (c) 2021 - now, RCSB PDB and contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

README.md

@@ -4,6 +4,273 @@ RCSB Saguaro Web 3D is an open-source library built on the top of the [RCSB Sagu
 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 displayed data. 
+<!---
+<div id="pfv"></div>
+<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 type="text/javascript">
+var rowConfigChainA = [
+    {
+        trackId: "sequenceTrack",
+        trackHeight: 20,
+        trackColor: "#F9F9F9",
+        displayType: "sequence" /* SEQUENCE */,
+        nonEmptyDisplay: true,
+        rowTitle: "CHAIN A",
+        trackData: [
+            {
+                begin: 1,
+                value: "CGVPAIQPVLSGLSRIVNGEEAVPGSWPWQVSLQDKTGFHFCGGSLINENWVVTAAHCGVTTSDVVVAGEFDQGSSSEKIQKLKIAKVFKNSKYNSLTINNDITLLKLSTAASFSQTVSAVCLPSASDDFAAGTTCVTTGWGLTRYTNANTPDRLQQASLPLLSNTNCKKYWGTKIKDAMICAGASGVSSCMGDSGGPLVCKKNGAWTLVGIVSWGSSTCSTSTPGVYARVTALVNWVQQTLAAN"
+            }
+        ]
+    }, {
+        trackId: "blockTrack",
+        trackHeight: 20,
+        trackColor: "#F9F9F9",
+        displayType: "block" /* BLOCK */,
+        displayColor: "#76ae91",
+        rowTitle: "FEATURE",
+        trackData: [{
+            begin: 20,
+            end: 25
+        }, {
+            begin: 150,
+            end: 160
+        }]
+    }
+];
+var rowConfigChainB = [
+    {
+        trackId: "sequenceTrack",
+        trackHeight: 20,
+        trackColor: "#F9F9F9",
+        displayType: "sequence" /* SEQUENCE */,
+        nonEmptyDisplay: true,
+        rowTitle: "CHAIN B",
+        trackData: [
+            {
+                begin: 1,
+                value: "TEFGSELKSFPEVVGKTVDQAREYFTLHYPQYDVYFLPEGSPVTLDLRYNRVRVFYNPGTNVVNHVPHVG"
+            }
+        ]
+    }, {
+        trackId: "blockTrack",
+        trackHeight: 20,
+        trackColor: "#F9F9F9",
+        displayType: "block" /* BLOCK */,
+        displayColor: "#f17070",
+        rowTitle: "FEATURE",
+        trackData: [{
+            begin: 20,
+            end: 50
+        }]
+    }
+];
+var fvConfigChainA = {
+    boardId: "1acb.A_board",
+    boardConfig: {
+        range: {
+            min: 1,
+            max: 245
+        },
+        disableMenu:true,
+        rowTitleWidth: 80,
+        trackWidth: 620,
+        includeAxis: true
+    },
+    rowConfig: rowConfigChainA,
+    sequenceSelectionChangeCallback: function (plugin, selectorManager, sequenceRegion) {
+        selectorManager.clearSelection("select", { modelId: "1acb_board", labelAsymId: "A" });
+        plugin.clearSelection("select", { modelId: "1acb_board", labelAsymId: "A" });
+        if (sequenceRegion.length > 0) {
+            var regions = sequenceRegion.map(function (r) {
+                var _a;
+                return ({
+                    modelId: "1acb_board",
+                    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", "add");
+        }
+        else {
+            plugin.resetCamera();
+        }
+    },
+    sequenceElementClickCallback: function (plugin, selectorManager, d) {
+        var _a;
+        if (d != null)
+            plugin.cameraFocus("1acb_board", "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: "1acb_board",
+                    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("1acb_board", "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("1acb_board", "A", "hover");
+        if (sel == null)
+            pfv.clearSelection("hover");
+        else
+            pfv.setSelection({ elements: sel.regions, mode: "hover" });
+    }
+};
+var fvConfigChainB = {
+    boardId: "1acb.B_board",
+    boardConfig: {
+        range: {
+            min: 1,
+            max: 70
+        },
+        disableMenu:true,
+        rowTitleWidth: 80,
+        trackWidth: 620,
+        includeAxis: true
+    },
+    rowConfig: rowConfigChainB,
+    sequenceSelectionChangeCallback: function (plugin, selectorManager, sequenceRegion) {
+        selectorManager.clearSelection("select", { modelId: "1acb_board", labelAsymId: "B" });
+        plugin.clearSelection("select", { modelId: "1acb_board", labelAsymId: "B" });
+        if (sequenceRegion.length > 0) {
+            var regions = sequenceRegion.map(function (r) {
+                var _a;
+                return ({
+                    modelId: "1acb_board",
+                    labelAsymId: "B",
+                    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", "add");
+        }
+        else {
+            plugin.resetCamera();
+        }
+    },
+    sequenceElementClickCallback: function (plugin, selectorManager, d) {
+        var _a;
+        if (d != null)
+            plugin.cameraFocus("1acb_board", "B", 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: "1acb_board",
+                    labelAsymId: "B",
+                    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("1acb_board", "B", "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("1acb_board", "B", "hover");
+        if (sel == null)
+            pfv.clearSelection("hover");
+        else
+            pfv.setSelection({ elements: sel.regions, mode: "hover" });
+    }
+};
+var blockChainA = {
+    blockId: "chainA",
+    featureViewConfig: [fvConfigChainA]
+};
+var blockChainB = {
+    blockId: "chainB",
+    featureViewConfig: [fvConfigChainB]
+};
+var blockSelectorElement = function (blockSelectorManager) {
+    return (React.createElement("div", null,
+        React.createElement("select", { onChange: function (e) {
+                    blockSelectorManager.setActiveBlock(e.target.value);
+                } },
+            React.createElement("option", { value: "chainA" }, "Chain A"),
+            React.createElement("option", { value: "chainB" }, "Chain B"))));
+};
+var customConfig = {
+    blockConfig: [blockChainA, blockChainB],
+    blockSelectorElement: blockSelectorElement
+};
+var sequenceConfig = {
+    title: undefined,
+    subtitle: undefined,
+    config: customConfig
+};
+var molstarConfig = {
+    loadConfig: {
+        loadMethod: "loadPdbIds",
+        loadParams: [{
+            pdbId: "1acb",
+            id: "1acb_board"
+        }]
+    },
+    pluginConfig: {
+        showImportControls: true,
+        showSessionControls: false
+    },
+};
+
+document.addEventListener("DOMContentLoaded", function (event) {
+    var panel3d = new RcsbFv3D.custom({
+        elementId: "pfv",
+        structurePanelConfig: molstarConfig,
+        sequencePanelConfig: sequenceConfig,
+        cssConfig: {
+            overwriteCss:true,
+            rootPanel:{
+                display:"flex",
+                flexDirection:"column-reverse"
+            },
+            structurePanel:{
+                width: 700,
+                height: 700
+            },
+            sequencePanel:{
+                width:700,
+                marginBottom:5
+            }
+        },
+    });
+    panel3d.render();
+});
+</script>
+--->
+### CDN JavaScript
+`<script src="https://cdn.jsdelivr.net/npm/@rcsb/rcsb-saguaro-3d@1.0.0/build/dist/app.js" type="text/javascript"></script>`
 
 ### Node Module Instalation
 `npm install @rcsb/rcsb-saguaro-3d`
@@ -12,27 +279,24 @@ Feature Summaries. The package allows access to RCSB Saguaro and Molstar methods
 
 ### Build app
     npm install
-    npm run buildOnlyApp
+    npm run buildApp
     
 ### Build examples 
-    npm run buildOnlyExamples
+    npm run buildExamples
     
 From the root of the project:
     
     http-server -p PORT-NUMBER
     
-and navigate to `localhost:PORT-NUMBER/build/dist/examples/`
+and navigate to `localhost:PORT-NUMBER/build/examples/`
 
 ### Main Classes and Methods
 
 Class **`RcsbFv3DAssembly`** file `src/RcsbFv3D/RcsbFv3DAssembly.tsx` builds a predefined view for PDB entries. This is the methods used in the RCSB PDB web portal 
-(ex: [4hhb](https://www.rcsb.org/3d-sequence/4HHB)). Soruce code example can be found in `src/examples/assembly/index.ts`.
+(ex: [4hhb](https://www.rcsb.org/3d-sequence/4HHB)). Source code example can be found in `src/examples/assembly/index.ts`.
 
 Class **`RcsbFv3DCustom`** file `src/RcsbFv3D/RcsbFv3DCustom.tsx` builds a customized view between one or more feature viewers and a single Molstar plugin.
 
-### CDN JavaScript
-`<script src="https://cdn.jsdelivr.net/npm/@rcsb/rcsb-saguaro-app@3.0.0/build/dist/app.js" type="text/javascript"></script>`
-
 Contributing
 ---
 All contributions are welcome. Please, make a pull request or open an issue.

cdn-examples/multiple-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.1-beta/build/dist/app.js"></script>
+    <script src="./index.js"></script>
+</head>
+<body>
+<div id="pfv"></div>
+</body>
+</html>

cdn-examples/multiple-chain/index.js

@@ -0,0 +1,257 @@
+var rowConfigChainA = [
+    {
+        trackId: "sequenceTrack",
+        trackHeight: 20,
+        trackColor: "#F9F9F9",
+        displayType: "sequence" /* SEQUENCE */,
+        nonEmptyDisplay: true,
+        rowTitle: "CHAIN A",
+        trackData: [
+            {
+                begin: 1,
+                value: "CGVPAIQPVLSGLSRIVNGEEAVPGSWPWQVSLQDKTGFHFCGGSLINENWVVTAAHCGVTTSDVVVAGEFDQGSSSEKIQKLKIAKVFKNSKYNSLTINNDITLLKLSTAASFSQTVSAVCLPSASDDFAAGTTCVTTGWGLTRYTNANTPDRLQQASLPLLSNTNCKKYWGTKIKDAMICAGASGVSSCMGDSGGPLVCKKNGAWTLVGIVSWGSSTCSTSTPGVYARVTALVNWVQQTLAAN"
+            }
+        ]
+    }, {
+        trackId: "blockTrack",
+        trackHeight: 20,
+        trackColor: "#F9F9F9",
+        displayType: "block" /* BLOCK */,
+        displayColor: "#76ae91",
+        rowTitle: "FEATURE",
+        trackData: [{
+            begin: 20,
+            end: 25
+        }, {
+            begin: 150,
+            end: 160
+        }]
+    }
+];
+var rowConfigChainB = [
+    {
+        trackId: "sequenceTrack",
+        trackHeight: 20,
+        trackColor: "#F9F9F9",
+        displayType: "sequence" /* SEQUENCE */,
+        nonEmptyDisplay: true,
+        rowTitle: "CHAIN B",
+        trackData: [
+            {
+                begin: 1,
+                value: "TEFGSELKSFPEVVGKTVDQAREYFTLHYPQYDVYFLPEGSPVTLDLRYNRVRVFYNPGTNVVNHVPHVG"
+            }
+        ]
+    }, {
+        trackId: "blockTrack",
+        trackHeight: 20,
+        trackColor: "#F9F9F9",
+        displayType: "block" /* BLOCK */,
+        displayColor: "#f17070",
+        rowTitle: "FEATURE",
+        trackData: [{
+            begin: 20,
+            end: 50
+        }]
+    }
+];
+var fvConfigChainA = {
+    boardId: "1acb.A_board",
+    boardConfig: {
+        range: {
+            min: 1,
+            max: 245
+        },
+        disableMenu:true,
+        rowTitleWidth: 80,
+        trackWidth: 620,
+        includeAxis: true
+    },
+    rowConfig: rowConfigChainA,
+    sequenceSelectionChangeCallback: function (plugin, selectorManager, sequenceRegion) {
+        selectorManager.clearSelection("select", { modelId: "1acb_board", labelAsymId: "A" });
+        plugin.clearSelection("select", { modelId: "1acb_board", labelAsymId: "A" });
+        if (sequenceRegion.length > 0) {
+            var regions = sequenceRegion.map(function (r) {
+                var _a;
+                return ({
+                    modelId: "1acb_board",
+                    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", "add");
+        }
+        else {
+            plugin.resetCamera();
+        }
+    },
+    sequenceElementClickCallback: function (plugin, selectorManager, d) {
+        var _a;
+        if (d != null)
+            plugin.cameraFocus("1acb_board", "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: "1acb_board",
+                    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("1acb_board", "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("1acb_board", "A", "hover");
+        if (sel == null)
+            pfv.clearSelection("hover");
+        else
+            pfv.setSelection({ elements: sel.regions, mode: "hover" });
+    }
+};
+var fvConfigChainB = {
+    boardId: "1acb.B_board",
+    boardConfig: {
+        range: {
+            min: 1,
+            max: 70
+        },
+        disableMenu:true,
+        rowTitleWidth: 80,
+        trackWidth: 620,
+        includeAxis: true
+    },
+    rowConfig: rowConfigChainB,
+    sequenceSelectionChangeCallback: function (plugin, selectorManager, sequenceRegion) {
+        selectorManager.clearSelection("select", { modelId: "1acb_board", labelAsymId: "B" });
+        plugin.clearSelection("select", { modelId: "1acb_board", labelAsymId: "B" });
+        if (sequenceRegion.length > 0) {
+            var regions = sequenceRegion.map(function (r) {
+                var _a;
+                return ({
+                    modelId: "1acb_board",
+                    labelAsymId: "B",
+                    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", "add");
+        }
+        else {
+            plugin.resetCamera();
+        }
+    },
+    sequenceElementClickCallback: function (plugin, selectorManager, d) {
+        var _a;
+        if (d != null)
+            plugin.cameraFocus("1acb_board", "B", 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: "1acb_board",
+                    labelAsymId: "B",
+                    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("1acb_board", "B", "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("1acb_board", "B", "hover");
+        if (sel == null)
+            pfv.clearSelection("hover");
+        else
+            pfv.setSelection({ elements: sel.regions, mode: "hover" });
+    }
+};
+var blockChainA = {
+    blockId: "chainA",
+    featureViewConfig: [fvConfigChainA]
+};
+var blockChainB = {
+    blockId: "chainB",
+    featureViewConfig: [fvConfigChainB]
+};
+var blockSelectorElement = function (blockSelectorManager) {
+    return (React.createElement("div", null,
+        React.createElement("select", { onChange: function (e) {
+                    blockSelectorManager.setActiveBlock(e.target.value);
+                } },
+            React.createElement("option", { value: "chainA" }, "Chain A"),
+            React.createElement("option", { value: "chainB" }, "Chain B"))));
+};
+var customConfig = {
+    blockConfig: [blockChainA, blockChainB],
+    blockSelectorElement: blockSelectorElement
+};
+var sequenceConfig = {
+    title: undefined,
+    subtitle: undefined,
+    config: customConfig
+};
+var molstarConfig = {
+    loadConfig: {
+        loadMethod: "loadPdbIds",
+        loadParams: [{
+            pdbId: "1acb",
+            id: "1acb_board"
+        }]
+    },
+    pluginConfig: {
+        showImportControls: true,
+        showSessionControls: false
+    },
+};
+
+document.addEventListener("DOMContentLoaded", function (event) {
+    var panel3d = new RcsbFv3D.custom({
+        elementId: "pfv",
+        structurePanelConfig: molstarConfig,
+        sequencePanelConfig: sequenceConfig,
+        cssConfig: {
+            overwriteCss:true,
+            rootPanel:{
+                display:"flex",
+                flexDirection:"column-reverse"
+            },
+            structurePanel:{
+                width: 700,
+                height: 700
+            },
+            sequencePanel:{
+                width:700,
+                marginBottom:5
+            }
+        },
+    });
+    panel3d.render();
+});

docs/classes/rcsbfv3dabstract.html

@@ -240,7 +240,7 @@
 						<li class="tsd-description">
 							<aside class="tsd-sources">
 								<ul>
-									<li>Defined in src/RcsbFv3D/RcsbFv3DAbstract.tsx:76</li>
+									<li>Defined in src/RcsbFv3D/RcsbFv3DAbstract.tsx:75</li>
 								</ul>
 							</aside>
 							<h4 class="tsd-parameters-title">Parameters</h4>
@@ -298,7 +298,7 @@
 						<li class="tsd-description">
 							<aside class="tsd-sources">
 								<ul>
-									<li>Defined in src/RcsbFv3D/RcsbFv3DAbstract.tsx:60</li>
+									<li>Defined in src/RcsbFv3D/RcsbFv3DAbstract.tsx:59</li>
 								</ul>
 							</aside>
 							<h4 class="tsd-parameters-title">Parameters</h4>
@@ -321,7 +321,7 @@
 						<li class="tsd-description">
 							<aside class="tsd-sources">
 								<ul>
-									<li>Defined in src/RcsbFv3D/RcsbFv3DAbstract.tsx:72</li>
+									<li>Defined in src/RcsbFv3D/RcsbFv3DAbstract.tsx:71</li>
 								</ul>
 							</aside>
 							<h4 class="tsd-parameters-title">Parameters</h4>

docs/classes/rcsbfv3dassembly.html

@@ -234,7 +234,7 @@
 							<aside class="tsd-sources">
 								<p>Inherited from <a href="rcsbfv3dabstract.html">RcsbFv3DAbstract</a>.<a href="rcsbfv3dabstract.html#plugincall">pluginCall</a></p>
 								<ul>
-									<li>Defined in src/RcsbFv3D/RcsbFv3DAbstract.tsx:76</li>
+									<li>Defined in src/RcsbFv3D/RcsbFv3DAbstract.tsx:75</li>
 								</ul>
 							</aside>
 							<h4 class="tsd-parameters-title">Parameters</h4>
@@ -294,7 +294,7 @@
 							<aside class="tsd-sources">
 								<p>Inherited from <a href="rcsbfv3dabstract.html">RcsbFv3DAbstract</a>.<a href="rcsbfv3dabstract.html#unmount">unmount</a></p>
 								<ul>
-									<li>Defined in src/RcsbFv3D/RcsbFv3DAbstract.tsx:60</li>
+									<li>Defined in src/RcsbFv3D/RcsbFv3DAbstract.tsx:59</li>
 								</ul>
 							</aside>
 							<h4 class="tsd-parameters-title">Parameters</h4>
@@ -318,7 +318,7 @@
 							<aside class="tsd-sources">
 								<p>Inherited from <a href="rcsbfv3dabstract.html">RcsbFv3DAbstract</a>.<a href="rcsbfv3dabstract.html#updateconfig">updateConfig</a></p>
 								<ul>
-									<li>Defined in src/RcsbFv3D/RcsbFv3DAbstract.tsx:72</li>
+									<li>Defined in src/RcsbFv3D/RcsbFv3DAbstract.tsx:71</li>
 								</ul>
 							</aside>
 							<h4 class="tsd-parameters-title">Parameters</h4>

docs/classes/rcsbfv3dcustom.html

@@ -234,7 +234,7 @@
 							<aside class="tsd-sources">
 								<p>Inherited from <a href="rcsbfv3dabstract.html">RcsbFv3DAbstract</a>.<a href="rcsbfv3dabstract.html#plugincall">pluginCall</a></p>
 								<ul>
-									<li>Defined in src/RcsbFv3D/RcsbFv3DAbstract.tsx:76</li>
+									<li>Defined in src/RcsbFv3D/RcsbFv3DAbstract.tsx:75</li>
 								</ul>
 							</aside>
 							<h4 class="tsd-parameters-title">Parameters</h4>
@@ -294,7 +294,7 @@
 							<aside class="tsd-sources">
 								<p>Inherited from <a href="rcsbfv3dabstract.html">RcsbFv3DAbstract</a>.<a href="rcsbfv3dabstract.html#unmount">unmount</a></p>
 								<ul>
-									<li>Defined in src/RcsbFv3D/RcsbFv3DAbstract.tsx:60</li>
+									<li>Defined in src/RcsbFv3D/RcsbFv3DAbstract.tsx:59</li>
 								</ul>
 							</aside>
 							<h4 class="tsd-parameters-title">Parameters</h4>
@@ -318,7 +318,7 @@
 							<aside class="tsd-sources">
 								<p>Inherited from <a href="rcsbfv3dabstract.html">RcsbFv3DAbstract</a>.<a href="rcsbfv3dabstract.html#updateconfig">updateConfig</a></p>
 								<ul>
-									<li>Defined in src/RcsbFv3D/RcsbFv3DAbstract.tsx:72</li>
+									<li>Defined in src/RcsbFv3D/RcsbFv3DAbstract.tsx:71</li>
 								</ul>
 							</aside>
 							<h4 class="tsd-parameters-title">Parameters</h4>

docs/index.html

@@ -71,6 +71,273 @@
 					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 displayed data. </p>
+<div id="pfv"></div>
+<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 type="text/javascript">
+var rowConfigChainA = [
+    {
+        trackId: "sequenceTrack",
+        trackHeight: 20,
+        trackColor: "#F9F9F9",
+        displayType: "sequence" /* SEQUENCE */,
+        nonEmptyDisplay: true,
+        rowTitle: "CHAIN A",
+        trackData: [
+            {
+                begin: 1,
+                value: "CGVPAIQPVLSGLSRIVNGEEAVPGSWPWQVSLQDKTGFHFCGGSLINENWVVTAAHCGVTTSDVVVAGEFDQGSSSEKIQKLKIAKVFKNSKYNSLTINNDITLLKLSTAASFSQTVSAVCLPSASDDFAAGTTCVTTGWGLTRYTNANTPDRLQQASLPLLSNTNCKKYWGTKIKDAMICAGASGVSSCMGDSGGPLVCKKNGAWTLVGIVSWGSSTCSTSTPGVYARVTALVNWVQQTLAAN"
+            }
+        ]
+    }, {
+        trackId: "blockTrack",
+        trackHeight: 20,
+        trackColor: "#F9F9F9",
+        displayType: "block" /* BLOCK */,
+        displayColor: "#76ae91",
+        rowTitle: "FEATURE",
+        trackData: [{
+            begin: 20,
+            end: 25
+        }, {
+            begin: 150,
+            end: 160
+        }]
+    }
+];
+var rowConfigChainB = [
+    {
+        trackId: "sequenceTrack",
+        trackHeight: 20,
+        trackColor: "#F9F9F9",
+        displayType: "sequence" /* SEQUENCE */,
+        nonEmptyDisplay: true,
+        rowTitle: "CHAIN B",
+        trackData: [
+            {
+                begin: 1,
+                value: "TEFGSELKSFPEVVGKTVDQAREYFTLHYPQYDVYFLPEGSPVTLDLRYNRVRVFYNPGTNVVNHVPHVG"
+            }
+        ]
+    }, {
+        trackId: "blockTrack",
+        trackHeight: 20,
+        trackColor: "#F9F9F9",
+        displayType: "block" /* BLOCK */,
+        displayColor: "#f17070",
+        rowTitle: "FEATURE",
+        trackData: [{
+            begin: 20,
+            end: 50
+        }]
+    }
+];
+var fvConfigChainA = {
+    boardId: "1acb.A_board",
+    boardConfig: {
+        range: {
+            min: 1,
+            max: 245
+        },
+        disableMenu:true,
+        rowTitleWidth: 80,
+        trackWidth: 620,
+        includeAxis: true
+    },
+    rowConfig: rowConfigChainA,
+    sequenceSelectionChangeCallback: function (plugin, selectorManager, sequenceRegion) {
+        selectorManager.clearSelection("select", { modelId: "1acb_board", labelAsymId: "A" });
+        plugin.clearSelection("select", { modelId: "1acb_board", labelAsymId: "A" });
+        if (sequenceRegion.length > 0) {
+            var regions = sequenceRegion.map(function (r) {
+                var _a;
+                return ({
+                    modelId: "1acb_board",
+                    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", "add");
+        }
+        else {
+            plugin.resetCamera();
+        }
+    },
+    sequenceElementClickCallback: function (plugin, selectorManager, d) {
+        var _a;
+        if (d != null)
+            plugin.cameraFocus("1acb_board", "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: "1acb_board",
+                    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("1acb_board", "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("1acb_board", "A", "hover");
+        if (sel == null)
+            pfv.clearSelection("hover");
+        else
+            pfv.setSelection({ elements: sel.regions, mode: "hover" });
+    }
+};
+var fvConfigChainB = {
+    boardId: "1acb.B_board",
+    boardConfig: {
+        range: {
+            min: 1,
+            max: 70
+        },
+        disableMenu:true,
+        rowTitleWidth: 80,
+        trackWidth: 620,
+        includeAxis: true
+    },
+    rowConfig: rowConfigChainB,
+    sequenceSelectionChangeCallback: function (plugin, selectorManager, sequenceRegion) {
+        selectorManager.clearSelection("select", { modelId: "1acb_board", labelAsymId: "B" });
+        plugin.clearSelection("select", { modelId: "1acb_board", labelAsymId: "B" });
+        if (sequenceRegion.length > 0) {
+            var regions = sequenceRegion.map(function (r) {
+                var _a;
+                return ({
+                    modelId: "1acb_board",
+                    labelAsymId: "B",
+                    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", "add");
+        }
+        else {
+            plugin.resetCamera();
+        }
+    },
+    sequenceElementClickCallback: function (plugin, selectorManager, d) {
+        var _a;
+        if (d != null)
+            plugin.cameraFocus("1acb_board", "B", 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: "1acb_board",
+                    labelAsymId: "B",
+                    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("1acb_board", "B", "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("1acb_board", "B", "hover");
+        if (sel == null)
+            pfv.clearSelection("hover");
+        else
+            pfv.setSelection({ elements: sel.regions, mode: "hover" });
+    }
+};
+var blockChainA = {
+    blockId: "chainA",
+    featureViewConfig: [fvConfigChainA]
+};
+var blockChainB = {
+    blockId: "chainB",
+    featureViewConfig: [fvConfigChainB]
+};
+var blockSelectorElement = function (blockSelectorManager) {
+    return (React.createElement("div", null,
+        React.createElement("select", { onChange: function (e) {
+                    blockSelectorManager.setActiveBlock(e.target.value);
+                } },
+            React.createElement("option", { value: "chainA" }, "Chain A"),
+            React.createElement("option", { value: "chainB" }, "Chain B"))));
+};
+var customConfig = {
+    blockConfig: [blockChainA, blockChainB],
+    blockSelectorElement: blockSelectorElement
+};
+var sequenceConfig = {
+    title: undefined,
+    subtitle: undefined,
+    config: customConfig
+};
+var molstarConfig = {
+    loadConfig: {
+        loadMethod: "loadPdbIds",
+        loadParams: [{
+            pdbId: "1acb",
+            id: "1acb_board"
+        }]
+    },
+    pluginConfig: {
+        showImportControls: true,
+        showSessionControls: false
+    },
+};
+
+document.addEventListener("DOMContentLoaded", function (event) {
+    var panel3d = new RcsbFv3D.custom({
+        elementId: "pfv",
+        structurePanelConfig: molstarConfig,
+        sequencePanelConfig: sequenceConfig,
+        cssConfig: {
+            overwriteCss:true,
+            rootPanel:{
+                display:"flex",
+                flexDirection:"column-reverse"
+            },
+            structurePanel:{
+                width: 700,
+                height: 700
+            },
+            sequencePanel:{
+                width:700,
+                marginBottom:5
+            }
+        },
+    });
+    panel3d.render();
+});
+</script>
+				<a href="#cdn-javascript" id="cdn-javascript" style="color: inherit; text-decoration: none;">
+					<h3>CDN JavaScript</h3>
+				</a>
+				<p><code>&lt;script src=&quot;https://cdn.jsdelivr.net/npm/@rcsb/rcsb-saguaro-3d@1.0.0/build/dist/app.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;</code></p>
 				<a href="#node-module-instalation" id="node-module-instalation" style="color: inherit; text-decoration: none;">
 					<h3>Node Module Instalation</h3>
 				</a>
@@ -82,22 +349,18 @@
 					<h3>Build app</h3>
 				</a>
 				<pre><code><span class="hljs-built_in">npm</span> install
-<span class="hljs-built_in">npm</span> run buildOnlyApp</code></pre>
+<span class="hljs-built_in">npm</span> run buildApp</code></pre>
 				<a href="#build-examples" id="build-examples" style="color: inherit; text-decoration: none;">
 					<h3>Build examples</h3>
 				</a>
-				<pre><code>npm <span class="hljs-builtin-name">run</span> buildOnlyExamples</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/dist/examples/</code></p>
+				<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>
 				<a href="#main-classes-and-methods" id="main-classes-and-methods" style="color: inherit; text-decoration: none;">
 					<h3>Main Classes and Methods</h3>
 				</a>
 				<p>Class <strong><code>RcsbFv3DAssembly</code></strong> file <code>src/RcsbFv3D/RcsbFv3DAssembly.tsx</code> builds a predefined view for PDB entries. This is the methods used in the RCSB PDB web portal
-				(ex: <a href="https://www.rcsb.org/3d-sequence/4HHB">4hhb</a>). Soruce code example can be found in <code>src/examples/assembly/index.ts</code>.</p>
+				(ex: <a href="https://www.rcsb.org/3d-sequence/4HHB">4hhb</a>). Source code example can be found in <code>src/examples/assembly/index.ts</code>.</p>
 				<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.</p>
-				<a href="#cdn-javascript" id="cdn-javascript" style="color: inherit; text-decoration: none;">
-					<h3>CDN JavaScript</h3>
-				</a>
-				<p><code>&lt;script src=&quot;https://cdn.jsdelivr.net/npm/@rcsb/rcsb-saguaro-app@3.0.0/build/dist/app.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;</code></p>
 				<a href="#contributing" id="contributing" style="color: inherit; text-decoration: none;">
 					<h2>Contributing</h2>
 				</a>
@@ -358,4 +621,4 @@
 <div class="overlay"></div>
 <script src="assets/js/main.js"></script>
 </body>
-</html>
+</html>

package.json

@@ -1,21 +1,19 @@
 {
   "name": "@rcsb/rcsb-saguaro-3d",
-  "version": "1.0.0",
+  "version": "1.0.1-beta",
   "description": "RCSB Molstar/Saguaro Web App",
   "main": "build/dist/RcsbFv3DBuilder.js",
   "files": [
-    "build/dist/rcsb-saguaro-3d.js",
-    "build/dist/config.js",
-    "build/dist/*ts"
+    "build/dist"
   ],
   "scripts": {
     "tsc": "tsc --incremental",
     "tscExamples": "tsc --project ./tsconfig.examples.json",
     "build": "webpack --config ./webpack.config.js",
-    "buildApp": "npm run cleanAll && npm run tsc && npm run cpStyles && npm run copyConfig && npm run build && npm run tscExamples && npm run copyExample && npm run buildExamples && npm run clean",
-    "buildOnlyApp": "npm run cleanAll && npm run tsc && npm run cpStyles && npm run copyConfig && npm run build && npm run clean",
-    "buildExamples": "webpack --config ./webpack.examples.config.js",
-    "buildOnlyExamples": "npm run cleanAll && npm run tscExamples && npm run cpStyles && npm run copyExample && npm run buildExamples && npm run clean",
+    "buildAll": "npm run cleanAll && npm run tsc && npm run cpStyles && npm run copyConfig && npm run build && npm run buildExamples",
+    "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",
     "cpStyles": "ncp src/styles build/src/styles",
     "copyConfig": "ncp build/src/config.js build/dist/config.js",
     "copyExample": "npm run copyExample_1 && npm run copyExample_2 && npm run copyExample_3 && npm run copyExample_4 && npm run copyExample_5",
@@ -27,6 +25,7 @@
     "buildDoc": "npx typedoc --mode file --out docs --exclude src/examples src",
     "clean": "del-cli build/src",
     "cleanAll": "npm run clean && del-cli build/dist",
+    "cleanExamples": "del-cli build/examples",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "repository": {
@@ -94,6 +93,6 @@
   "homepage": "https://rcsb.github.io/rcsb-saguaro-3d",
   "directories": {
     "doc": "docs",
-    "example": "examples"
+    "example": "cdn-examples"
   }
 }

src/examples/assembly/index.ts

@@ -18,12 +18,12 @@ document.addEventListener("DOMContentLoaded", function(event) {
         return result;
     }
 
-    const args: {pdbId:string} = getJsonFromUrl() ?? {pdbId:"4hhb"};
+    const args: {pdbId:string} = getJsonFromUrl().pdbId ? getJsonFromUrl() : {pdbId:"4hhb"};
 
     const sequenceConfig = {
-        entryId:args.pdbId,
-        title: args.pdbId,
-        subtitle: "Subtitle for "+args.pdbId
+        entryId: args.pdbId,
+        title: "Title " + args.pdbId,
+        subtitle: "Subtitle for " + args.pdbId
     };
 
     const panel3d = new RcsbFv3DAssembly({

src/examples/multiple-chain/index.tsx

@@ -95,6 +95,7 @@ const fvConfigChainA: FeatureViewInterface = {
     rowConfig: rowConfigChainA,
     sequenceSelectionChangeCallback: (plugin: SaguaroPluginPublicInterface, 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) {
             const regions = sequenceRegion.map(r => ({
                 modelId: "1acb_board",
@@ -108,7 +109,6 @@ const fvConfigChainA: FeatureViewInterface = {
                 end: r.region.end
             })), "select", "add");
         }else{
-            plugin.clearSelection("select", {modelId: "1acb_board", labelAsymId: "A"})
             plugin.resetCamera();
         }
     },
@@ -158,6 +158,7 @@ const fvConfigChainB: FeatureViewInterface = {
     rowConfig: rowConfigChainB,
     sequenceSelectionChangeCallback: (plugin: SaguaroPluginPublicInterface, 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) {
             const regions = sequenceRegion.map(r => ({
                 modelId: "1acb_board",
@@ -171,7 +172,6 @@ const fvConfigChainB: FeatureViewInterface = {
                 end: r.region.end
             })), "select", "add");
         }else{
-            plugin.clearSelection("select", {modelId: "1acb_board", labelAsymId: "B"})
             plugin.resetCamera();
         }
     },

tsconfig.json

@@ -14,6 +14,7 @@
   },
   "include": [ "src/*", "src/**/*", "src/**/**/*", "src/**/**/**/*" ],
   "exclude": [
-    "node_modules"
+    "node_modules",
+    "src/examples"
   ]
 }

webpack.config.js

@@ -41,18 +41,17 @@ const commonConfig = {
 const appConfig = {
     ...commonConfig,
     entry: {
-        'RcsbFv3DCustom':'./build/src/RcsbFv3D/RcsbFv3DCustom.js',
-        'rcsb-saguaro-3d':'./build/src/RcsbSaguaro3D.js'
+        'app':'./build/src/RcsbSaguaro3D.js'
     },
-    mode: "development",
+    mode: "production",
     output: {
         filename: '[name].js',
         library: 'RcsbFv3D',
         libraryTarget: 'umd',
         umdNamedDefine: true,
         path: path.resolve(__dirname, 'build/dist')
-    },
-    devtool: 'source-map'
+    }
+    //, devtool: 'source-map'
 }
 
 module.exports = [appConfig];

webpack.examples.config.js

@@ -1,6 +1,7 @@
 const path = require('path');
 
 const commonConfig = {
+    mode:"production",
     module: {
       rules: [
           {
@@ -37,6 +38,7 @@ const commonConfig = {
     }
 };
 
+const out_path = "build/examples";
 const example_1 = {
     ...commonConfig,
     entry: {
@@ -44,9 +46,8 @@ const example_1 = {
     },
     output: {
         filename: '[name].js',
-        path: path.resolve(__dirname, 'build/dist/examples/single-chain/')
-    },
-    devtool: 'source-map'
+        path: path.resolve(__dirname, out_path+'/single-chain/')
+    }
 }
 
 const example_2 = {
@@ -56,9 +57,8 @@ const example_2 = {
     },
     output: {
         filename: '[name].js',
-        path: path.resolve(__dirname, 'build/dist/examples/structural-alignment/')
-    },
-    devtool: 'source-map'
+        path: path.resolve(__dirname, out_path+'/structural-alignment/')
+    }
 }
 
 const example_3 = {
@@ -68,9 +68,8 @@ const example_3 = {
     },
     output: {
         filename: '[name].js',
-        path: path.resolve(__dirname, 'build/dist/examples/assembly/')
-    },
-    devtool: 'source-map'
+        path: path.resolve(__dirname, out_path+'/assembly/')
+    }
 }
 
 const example_4 = {
@@ -80,9 +79,8 @@ const example_4 = {
     },
     output: {
         filename: '[name].js',
-        path: path.resolve(__dirname, 'build/dist/examples/multiple-chain/')
-    },
-    devtool: 'source-map'
+        path: path.resolve(__dirname, out_path+'/multiple-chain/')
+    }
 }
 
 const example_5 = {
@@ -92,9 +90,8 @@ const example_5 = {
     },
     output: {
         filename: '[name].js',
-        path: path.resolve(__dirname, 'build/dist/examples/css-config/')
-    },
-    devtool: 'source-map'
+        path: path.resolve(__dirname, out_path+'/css-config/')
+    }
 }
 
 module.exports = [example_1, example_2, example_3, example_4, example_5];