saguaro update && react update && webpack-dev-server

CHANGELOG.md

@@ -2,6 +2,16 @@
 
 [Semantic Versioning](https://semver.org/)
 
+## [1.5.0-models] - 2022-06-15
+### Dependency update
+- rcsb-saguaro-app v4.4.0-models
+- rcsb-saguaro v2.1.2
+- rcsb-api-tools v4.1.0-models
+- rcsb-molstar v2.4.1
+- molstar v3.8.1
+- React v18
+- Updated multiple dependencies
+
 ## [1.4.4] - 2022-05-26
 ### Dependency update
 - rcsb-saguaro-app v4.3.6

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rcsb/rcsb-saguaro-3d",
-  "version": "1.5.0-models.0",
+  "version": "1.5.0-models.1",
   "description": "RCSB Molstar/Saguaro Web App",
   "main": "build/dist/app.js",
   "files": [
@@ -8,26 +8,14 @@
   ],
   "scripts": {
     "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 && npm run buildDoc",
+    "buildAll": "npm run cleanAll && npm run tsc && npm run cpStyles && npm run copyConfig && npm run build && 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",
     "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 && npm run copyExample_6 && npm run copyExample_7",
-    "copyExample_1": "ncp src/examples/single-chain/index.html build/src/examples/single-chain/index.html",
-    "copyExample_2": "ncp src/examples/structural-alignment/index.html build/src/examples/structural-alignment/index.html",
-    "copyExample_3": "ncp src/examples/assembly/index.html build/src/examples/assembly/index.html",
-    "copyExample_4": "ncp src/examples/multiple-chain/index.html build/src/examples/multiple-chain/index.html",
-    "copyExample_5": "ncp src/examples/css-config/index.html build/src/examples/css-config/index.html",
-    "copyExample_6": "ncp src/examples/external-mapping/index.html build/src/examples/external-mapping/index.html",
-    "copyExample_7": "ncp src/examples/uniprot/index.html build/src/examples/uniprot/index.html",
     "buildDoc": "typedoc src/RcsbFv3D/RcsbFv3DAssembly.tsx src/RcsbFv3D/RcsbFv3DCustom.tsx && sed -i '' '/---/d' docs/index.html",
     "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": {
@@ -53,44 +41,46 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@babel/core": "^7.17.3",
-    "@babel/plugin-proposal-class-properties": "^7.16.7",
-    "@babel/preset-env": "^7.16.11",
-    "@types/react": "^17.0.39",
-    "@types/react-dom": "^17.0.11",
+    "@babel/core": "^7.18.5",
+    "@babel/plugin-proposal-class-properties": "^7.17.12",
+    "@babel/preset-env": "^7.18.2",
+    "@types/react": "^18.0.12",
+    "@types/react-dom": "^18.0.5",
     "@types/uniqid": "^5.3.2",
-    "babel-loader": "^8.2.3",
+    "babel-loader": "^8.2.5",
     "buffer": "^6.0.3",
-    "concurrently": "^7.0.0",
+    "concurrently": "^7.2.1",
     "crypto-browserify": "^3.12.0",
     "css-loader": "^6.6.0",
     "del-cli": "^4.0.1",
     "file-loader": "^6.2.0",
+    "html-webpack-plugin": "^5.5.0",
     "mini-css-extract-plugin": "^2.5.3",
     "ncp": "^2.0.0",
     "path-browserify": "^1.0.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-icons": "^4.3.1",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
+    "react-icons": "^4.4.0",
     "rxjs": "^7.4.0",
-    "sass": "^1.49.7",
-    "sass-loader": "^12.6.0",
+    "sass": "^1.52.3",
+    "sass-loader": "^13.0.0",
     "stream-browserify": "^3.0.0",
     "style-loader": "^3.3.1",
-    "ts-loader": "^9.2.6",
-    "tslib": "^2.3.1",
-    "typedoc": "^0.22.11",
+    "ts-loader": "^9.3.0",
+    "tslib": "^2.4.0",
+    "typedoc": "^0.22.17",
     "typedoc-plugin-missing-exports": "^0.22.6",
-    "typescript": "^4.5.5",
+    "typescript": "^4.7.3",
     "uniqid": "^5.4.0",
-    "webpack": "^5.69.0",
-    "webpack-cli": "^4.9.1"
+    "webpack": "^5.73.0",
+    "webpack-cli": "^4.10.0",
+    "webpack-dev-server": "^4.9.2"
   },
   "dependencies": {
     "@rcsb/rcsb-api-tools": "^4.1.0-models",
     "@rcsb/rcsb-molstar": "^2.4.1",
-    "@rcsb/rcsb-saguaro": "^2.1.0",
-    "@rcsb/rcsb-saguaro-app": "^4.4.0-models.5",
+    "@rcsb/rcsb-saguaro": "^2.1.2",
+    "@rcsb/rcsb-saguaro-app": "^4.4.0-models.11",
     "molstar": "^3.8.1"
   },
   "bugs": {

src/RcsbFv3D/RcsbFv3DAbstract.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import * as ReactDom from "react-dom";
+import {createRoot, Root} from "react-dom/client";
 import {RcsbFv3DComponent, RcsbFv3DCssConfig} from './RcsbFv3DComponent';
 import {RcsbFvStructureInterface} from "../RcsbFvStructure/RcsbFvStructure";
 import {RcsbFvSequenceInterface} from "../RcsbFvSequence/RcsbFvSequence";
@@ -15,6 +15,7 @@ export interface RcsbFv3DAbstractInterface {
 export abstract class RcsbFv3DAbstract<T extends {}> {
 
     protected elementId: string;
+    private reactRoot: Root;
     protected structureConfig: RcsbFvStructureInterface;
     protected sequenceConfig: RcsbFvSequenceInterface<T>;
     protected ctxManager: RcsbFvContextManager<T> = new RcsbFvContextManager<T>();
@@ -26,7 +27,7 @@ export abstract class RcsbFv3DAbstract<T extends {}> {
         sequencePanel?: CSSProperties
     } | undefined;
 
-    constructor(config?: any) {
+    protected constructor(config?: any) {
         if(config != null)
             this.init(config);
     }
@@ -42,7 +43,8 @@ export abstract class RcsbFv3DAbstract<T extends {}> {
             document.body.append(element);
             this.fullScreen("on");
         }
-        ReactDom.render(
+        this.reactRoot = createRoot(element);
+        this.reactRoot.render(
             <RcsbFv3DComponent
                 structurePanelConfig={this.structureConfig}
                 sequencePanelConfig={this.sequenceConfig}
@@ -51,15 +53,13 @@ export abstract class RcsbFv3DAbstract<T extends {}> {
                 cssConfig={this.cssConfig}
                 unmount={this.unmount.bind(this)}
                 fullScreen={this.fullScreenFlag}
-            />,
-            element
-        );
+            />);
     }
 
     public unmount(removeHtmlElement?:boolean, unmountCallback?:()=>{}): void{
         const element: HTMLElement | null = document.getElementById(this.elementId);
         if(element != null) {
-            ReactDom.unmountComponentAtNode(element);
+            this.reactRoot.unmount();
             if(removeHtmlElement) {
                 element.remove();
             }

src/RcsbFv3D/RcsbFv3DUniprot.tsx

@@ -2,7 +2,6 @@ import {RcsbFv3DAbstract, RcsbFv3DAbstractInterface} from "./RcsbFv3DAbstract";
 import {RcsbFvAdditionalConfig} from "@rcsb/rcsb-saguaro-app/build/dist/RcsbFvWeb/RcsbFvModule/RcsbFvModuleInterface";
 import uniqid from "uniqid";
 import {UniprotPfvFactory} from "../RcsbFvSequence/SequenceViews/RcsbView/PfvFactoryImplementation/UniprotPfvFactory";
-import {AssemblyCallbackManager} from "../RcsbFvSequence/SequenceViews/RcsbView/CallbackManagerImplementation/AssemblyCallbackManager";
 import {
     UniprotCallbackManager
 } from "../RcsbFvSequence/SequenceViews/RcsbView/CallbackManagerImplementation/UniprotCallbackManager";

src/RcsbFvSequence/SequenceViews/RcsbView/PfvFactoryImplementation/AssemblyPfvFactory.tsx

@@ -12,7 +12,7 @@ import {
 import {asyncScheduler} from "rxjs";
 import {buildInstanceSequenceFv, FeatureType, RcsbFvUI, RcsbRequestContextManager} from "@rcsb/rcsb-saguaro-app";
 import {RcsbFvDOMConstants} from "../../../../RcsbFvConstants/RcsbFvConstants";
-import {SelectOptionProps} from "@rcsb/rcsb-saguaro-app/build/dist/RcsbFvWeb/WebTools/SelectButton";
+import {SelectOptionProps} from "@rcsb/rcsb-saguaro-app/build/dist/RcsbFvWeb/RcsbFvComponents/SelectButton";
 import {ChainDisplay} from "./ChainDisplay";
 import * as React from "react";
 import {AnnotationFeatures, Source, Type} from "@rcsb/rcsb-api-tools/build/RcsbGraphQL/Types/Borrego/GqlTypes";

src/examples/assembly-interface/index.html

@@ -1,12 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon">
-    <script src="./index.js" type="text/javascript"></script>
-    <title>Saguaro 3D</title>
-</head>
-<body>
-
-
-</body>
-</html>

src/examples/assembly-interface/index.ts

@@ -1,12 +1,11 @@
 
-import './index.html';
 import {RcsbFv3DAssembly} from "../../RcsbFv3D/RcsbFv3DAssembly";
 
 document.addEventListener("DOMContentLoaded", function(event) {
 
     function getJsonFromUrl() {
         const url = location.search;
-        var query = url.substr(1);
+        var query = url.substring(1);
         var result: any = {};
         query.split("&").forEach(function(part) {
             var item = part.split("=");

src/examples/assembly/index.html

@@ -1,12 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon">
-    <script src="./index.js" type="text/javascript"></script>
-    <title>Saguaro 3D</title>
-</head>
-<body>
-
-
-</body>
-</html>

src/examples/assembly/index.ts

@@ -1,12 +1,10 @@
 
-import './index.html';
 import {RcsbFv3DAssembly} from "../../RcsbFv3D/RcsbFv3DAssembly";
 import {
     AlignmentResponse,
     AnnotationFeatures,
     Type
 } from "@rcsb/rcsb-api-tools/build/RcsbGraphQL/Types/Borrego/GqlTypes";
-import {SequenceCollectorDataInterface} from "@rcsb/rcsb-saguaro-app/build/dist/RcsbCollectTools/SequenceCollector/SequenceCollector";
 import {RcsbFvDisplayTypes, RcsbFvRowConfigInterface} from "@rcsb/rcsb-saguaro";
 import {PolymerEntityInstanceInterface} from "@rcsb/rcsb-saguaro-app/build/dist/RcsbCollectTools/DataCollectors/PolymerEntityInstancesCollector";
 
@@ -14,7 +12,7 @@ document.addEventListener("DOMContentLoaded", function(event) {
 
     function getJsonFromUrl() {
         const url = location.search;
-        var query = url.substr(1);
+        var query = url.substring(1);
         var result: any = {};
         query.split("&").forEach(function(part) {
             var item = part.split("=");
@@ -32,7 +30,7 @@ document.addEventListener("DOMContentLoaded", function(event) {
     };
 
     const panel3d = new RcsbFv3DAssembly({
-        elementId: "pfv",
+        elementId: "null",
         config: sequenceConfig,
         instanceSequenceConfig:{
             dropdownTitle: "Chain",
@@ -82,7 +80,7 @@ function externalTrackBuilder(){
             })
 
         },
-        addTo(tracks: { alignmentTracks?: SequenceCollectorDataInterface; annotationTracks?: Array<RcsbFvRowConfigInterface>; rcsbContext?: Partial<PolymerEntityInstanceInterface>; }): Promise<void> {
+        addTo(tracks: { alignmentTracks?: Array<RcsbFvRowConfigInterface>; annotationTracks?: Array<RcsbFvRowConfigInterface>; rcsbContext?: Partial<PolymerEntityInstanceInterface>; }): Promise<void> {
             return new Promise<void>(resolve => {
                 if (tracks.rcsbContext?.asymId === "A" && myComputedTrack?.trackData && myComputedTrack.trackData.length > 0) {
                     tracks.annotationTracks?.push(myComputedTrack);

src/examples/css-config/index.html

@@ -1,11 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon">
-    <script src="./index.js" type="text/javascript"></script>
-    <title>Saguaro 3D</title>
-</head>
-<body>
-    <div id="pfv" style="position:relative"></div>
-</body>
-</html>

src/examples/css-config/index.tsx

@@ -1,4 +1,3 @@
-import './index.html';
 import {RcsbFv3DCustom, RcsbFv3DCustomInterface} from "../../RcsbFv3D/RcsbFv3DCustom";
 import {RcsbFvStructureInterface} from "../../RcsbFvStructure/RcsbFvStructure";
 import {LoadMethod} from "../../RcsbFvStructure/StructurePlugins/MolstarPlugin";

src/examples/external-mapping/index.html

@@ -1,11 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon">
-    <script src="./index.js" type="text/javascript"></script>
-    <title>Saguaro 3D</title>
-</head>
-<body>
-    <div id="pfv" style="position:relative"></div>
-</body>
-</html>

src/examples/external-mapping/index.tsx

@@ -1,4 +1,3 @@
-import './index.html';
 import {RcsbFv3DCustom} from "../../RcsbFv3D/RcsbFv3DCustom";
 import {RcsbFvStructureInterface} from "../../RcsbFvStructure/RcsbFvStructure";
 import {LoadMethod} from "../../RcsbFvStructure/StructurePlugins/MolstarPlugin";

src/examples/html-template/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>RCSB PDB PFV UniProt Group</title>
+</head>
+<body>
+
+<div id="select" ></div>
+<div id="selectBis" ></div>
+<div id="pfv" style="position: absolute" ></div>
+
+</body>
+</html>

src/examples/multiple-chain/index.html

@@ -1,11 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon">
-    <script src="./index.js" type="text/javascript"></script>
-    <title>Saguaro 3D</title>
-</head>
-<body>
-    <div id="pfv" style="position:relative"></div>
-</body>
-</html>

src/examples/multiple-chain/index.tsx

@@ -1,4 +1,3 @@
-import './index.html';
 import {RcsbFv3DCustom} from "../../RcsbFv3D/RcsbFv3DCustom";
 import {RcsbFvStructureInterface} from "../../RcsbFvStructure/RcsbFvStructure";
 import {LoadMethod} from "../../RcsbFvStructure/StructurePlugins/MolstarPlugin";

src/examples/single-chain/index.html

@@ -1,11 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon">
-    <script src="./index.js" type="text/javascript"></script>
-    <title>Saguaro 3D</title>
-</head>
-<body>
-    <div id="pfv" style="position:relative"></div>
-</body>
-</html>

src/examples/single-chain/index.tsx

@@ -1,4 +1,3 @@
-import './index.html';
 import {RcsbFv3DCustom} from "../../RcsbFv3D/RcsbFv3DCustom";
 import {RcsbFvStructureInterface} from "../../RcsbFvStructure/RcsbFvStructure";
 import {LoadMethod} from "../../RcsbFvStructure/StructurePlugins/MolstarPlugin";

src/examples/structural-alignment/index.html

@@ -1,11 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon">
-    <script src="./index.js" type="text/javascript"></script>
-    <title>Saguaro 3D</title>
-</head>
-<body>
-<div id="pfv" style="position:relative"></div>
-</body>
-</html>

src/examples/structural-alignment/index.tsx

@@ -1,4 +1,3 @@
-import './index.html';
 import {RcsbFv3DCustom, RcsbFv3DCustomInterface} from "../../RcsbFv3D/RcsbFv3DCustom";
 import {RcsbFvStructureInterface} from "../../RcsbFvStructure/RcsbFvStructure";
 import {LoadMethod} from "../../RcsbFvStructure/StructurePlugins/MolstarPlugin";

src/examples/uniprot/index.html

@@ -1,12 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon">
-    <script src="./index.js" type="text/javascript"></script>
-    <title>Saguaro 3D</title>
-</head>
-<body>
-
-
-</body>
-</html>

src/examples/uniprot/index.ts

@@ -1,11 +1,10 @@
-import './index.html';
 
 import {RcsbFv3DUniprot} from "../../RcsbFv3D/RcsbFv3DUniprot";
 
 document.addEventListener("DOMContentLoaded", function(event) {
 
     const panel3d = new RcsbFv3DUniprot({
-        elementId:"pfv",
+        elementId:"null",
         config:{
             upAcc:"P01112"
         }

tsconfig.server.dev.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "noImplicitAny": true,
+    "target": "es5",
+    "module": "commonjs",
+    "jsx": "react",
+    "lib": [ "es6", "dom", "esnext.asynciterable", "es2016"  ],
+    "allowJs": true,
+    "sourceMap": true,
+    "strictNullChecks": true,
+    "esModuleInterop": true,
+  },
+  "exclude": [
+    "node_modules"
+  ]
+}

webpack.server.dev.config.js

@@ -0,0 +1,147 @@
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+const commonConfig = {
+    mode: "development",
+    module: {
+        rules: [{
+            test: /\.tsx?$/,
+            loader: 'ts-loader',
+            exclude: /node_modules/
+        },{
+            test: /\.jsx?$/,
+            loader: 'babel-loader',
+            exclude: [/node_modules/]
+        },{
+                test: /\.s?css$/,
+                use: ['style-loader', {
+                    loader: 'css-loader',
+                    options: {
+                        modules: {
+                            localIdentName:'[local]'
+                        }
+                    }
+                }, 'sass-loader'],
+                exclude: /node_modules/
+            }
+        ]
+    },
+    resolve: {
+        extensions: [ '.tsx', '.ts', '.js', 'jsx' ],
+        fallback: {
+            fs: false,
+            buffer: require.resolve('buffer'),
+            crypto: require.resolve('crypto-browserify'),
+            path: require.resolve('path-browserify'),
+            stream: require.resolve('stream-browserify')
+        }
+    },
+    devtool: 'source-map'
+};
+
+const examples = [];
+
+examples.push({
+    ...commonConfig,
+    entry: {
+        'assembly': './src/examples/assembly/index.ts'
+    },
+    plugins: [new HtmlWebpackPlugin({
+        filename:'[name].html',
+        template:'./src/examples/html-template/index.html'
+    })]
+});
+
+examples.push({
+    ...commonConfig,
+    entry: {
+        "assembly-interface": './src/examples/assembly-interface/index.ts'
+    },
+    plugins: [new HtmlWebpackPlugin({
+        filename:'[name].html',
+        template:'./src/examples/html-template/index.html'
+    })]
+});
+
+examples.push({
+    ...commonConfig,
+    entry: {
+        "external-mapping": './src/examples/external-mapping/index.tsx'
+    },
+    plugins: [new HtmlWebpackPlugin({
+        filename:'[name].html',
+        template:'./src/examples/html-template/index.html'
+    })]
+});
+
+examples.push({
+    ...commonConfig,
+    entry: {
+        "single-chain": './src/examples/single-chain/index.tsx'
+    },
+    plugins: [new HtmlWebpackPlugin({
+        filename:'[name].html',
+        template:'./src/examples/html-template/index.html'
+    })]
+});
+
+examples.push({
+    ...commonConfig,
+    entry: {
+        "structural-alignment": './src/examples/structural-alignment/index.tsx'
+    },
+    plugins: [new HtmlWebpackPlugin({
+        filename:'[name].html',
+        template:'./src/examples/html-template/index.html'
+    })]
+});
+
+examples.push({
+    ...commonConfig,
+    entry: {
+        "multiple-chain": './src/examples/structural-alignment/index.tsx'
+    },
+    plugins: [new HtmlWebpackPlugin({
+        filename:'[name].html',
+        template:'./src/examples/html-template/index.html'
+    })]
+});
+
+examples.push({
+    ...commonConfig,
+    entry: {
+        "css-config": './src/examples/css-config/index.tsx'
+    },
+    plugins: [new HtmlWebpackPlugin({
+        filename:'[name].html',
+        template:'./src/examples/html-template/index.html'
+    })]
+});
+
+examples.push({
+    ...commonConfig,
+    entry: {
+        "uniprot": './src/examples/structural-alignment/index.tsx'
+    },
+    plugins: [new HtmlWebpackPlugin({
+        filename:'[name].html',
+        template:'./src/examples/html-template/index.html'
+    })]
+});
+
+const server = {
+    ...commonConfig,
+    entry: {
+        //...examples.map(e=>Object.entries(e.entry)[0]).reduce((prev,curr)=>{prev[curr[0]]=curr[1];return prev;},{})
+        'assembly': './src/examples/assembly/index.ts'
+    },
+    devServer: {
+        compress: true,
+        port: 9000,
+    },
+    plugins: [new HtmlWebpackPlugin({
+        filename:'[name].html',
+        template:'./src/examples/html-template/index.html'
+    })]
+}
+
+module.exports = [server];