saguaro update

CHANGELOG.md

@@ -2,7 +2,7 @@
 
 [Semantic Versioning](https://semver.org/)
 
-## [4.0.0] - 2023-11-15
+## [4.0.0] - 2023-11-22
 ### Breaking changes
 - Types are not anymore exposed from `build/src`
 - All module classes and types are accessible from `lib/`
@@ -10,7 +10,7 @@
   - `lib/commonjs` exposes all modules in `CommonJS` format
 
 ### Improvement
-- MSA groups inform of Polymer/Ligand before loading the structure
+- MSA group displays Polymer/Ligand before loading the structure
   - Checkboxes are displayed in grey color
 
 ### Code refactoring

package.json

@@ -17,7 +17,7 @@
     "cpStyles": "ncp src/scss lib/scss",
     "copyConfig": "ncp lib/commonjs/config.js build/config.js",
     "copyDef": "ncp lib/app.d.ts build/app.d.ts",
-    "buildDoc": "typedoc --excludeExternals --externalPattern \"**/node_modules/**\"  --plugin typedoc-plugin-missing-exports src/RcsbFv3D/RcsbFv3DAssembly.tsx src/RcsbFv3D/RcsbFv3DUniprot.tsx src/RcsbFv3D/RcsbFv3DSequenceIdentity.tsx src/RcsbFv3D/RcsbFv3DCustom.tsx && sed -i '' '/---/d' docs/index.html",
+    "buildDoc": "typedoc --excludeExternals --externalPattern \"**/node_modules/**\" --plugin typedoc-plugin-missing-exports  --plugin typedoc-theme-hierarchy --theme hierarchy --entryPointStrategy expand ./src && sed -i '' '/---/d' docs/index.html",
     "clean": "del-cli lib && del-cli build",
     "publishApp": "npm publish --tag development",
     "test": "echo \"Error: no test specified\" && exit 1"
@@ -48,6 +48,7 @@
     "@babel/core": "^7.23.3",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
     "@babel/preset-env": "^7.23.3",
+    "@svgr/webpack": "^8.1.0",
     "@types/d3-selection": "^3.0.10",
     "@types/d3-zoom": "^3.0.8",
     "@types/lodash": "^4.14.201",
@@ -55,6 +56,7 @@
     "@types/react-dom": "^18.2.15",
     "@types/uniqid": "^5.3.4",
     "babel-loader": "^9.1.3",
+    "boxicons": "^2.1.4",
     "buffer": "^6.0.3",
     "crypto-browserify": "^3.12.0",
     "css-loader": "^6.8.1",
@@ -74,6 +76,7 @@
     "tslib": "^2.6.2",
     "typedoc": "^0.25.3",
     "typedoc-plugin-missing-exports": "^2.1.0",
+    "typedoc-theme-hierarchy": "^4.1.2",
     "typescript": "^5.2.2",
     "uniqid": "^5.4.0",
     "webpack": "^5.89.0",
@@ -81,14 +84,13 @@
     "webpack-dev-server": "^4.15.1"
   },
   "dependencies": {
-    "resolve-url-loader": "^5.0.0",
     "rxjs": "^7.5.6"
   },
   "peerDependencies": {
     "@rcsb/rcsb-api-tools": "^4.1.13",
     "@rcsb/rcsb-molstar": "^2.8.0",
-    "@rcsb/rcsb-saguaro": "^3.0.0-development.14",
-    "@rcsb/rcsb-saguaro-app": "^6.0.0-development.18",
+    "@rcsb/rcsb-saguaro": "^3.0.3",
+    "@rcsb/rcsb-saguaro-app": "^6.0.0",
     "molstar": "^3.40.1",
     "react": "^18.1.0",
     "react-dom": "^18.1.0"

src/RcsbFvSequence/SequenceViews/CustomView/CustomView.tsx

@@ -158,7 +158,7 @@ export class CustomView<R,L> extends AbstractView<CustomViewInterface<R,L> & {st
                     highlightHoverElement:true,
                     ...this.boardMap.get(boardId)!.boardConfig,
                     trackWidth:this.boardMap.get(boardId)!.boardConfig?.trackWidth ? this.boardMap.get(boardId)!.boardConfig?.trackWidth!-4 : trackWidth,
-                    selectionChangeCallBack:(selection: RcsbFvTrackDataElementInterface[])=>{
+                    selectionChangeCallback:(selection: RcsbFvTrackDataElementInterface[])=>{
                         if(this.innerSelectionFlag)
                             return;
                         this.boardMap.get(boardId)!.sequenceSelectionChangeCallback(this.props.structureViewer, this.props.stateManager, selection);
@@ -166,7 +166,7 @@ export class CustomView<R,L> extends AbstractView<CustomViewInterface<R,L> & {st
                     highlightHoverCallback:(elements:Array<RcsbFvTrackDataElementInterface>)=>{
                         this.boardMap.get(boardId)!.sequenceHoverCallback(this.props.structureViewer, this.props.stateManager, elements);
                     },
-                    elementClickCallBack: (element?: RcsbFvTrackDataElementInterface)=>{
+                    elementClickCallback: (element?: RcsbFvTrackDataElementInterface)=>{
                         this.boardMap.get(boardId)!.sequenceElementClickCallback(this.props.structureViewer, this.props.stateManager, element);
                     }
                 },

src/RcsbFvSequence/SequenceViews/RcsbView/RcsbView.tsx

@@ -71,15 +71,15 @@ export class RcsbView<T,U> extends AbstractView<RcsbViewInterface<T,U>, {}>{
             highlightHoverPosition:true,
             highlightHoverElement:true,
             ...this.props.additionalConfig?.boardConfig,
-            elementClickCallBack:(e?:RcsbFvTrackDataElementInterface)=>{
+            elementClickCallback:(e?:RcsbFvTrackDataElementInterface)=>{
                 this.elementClickCallback(e);
-                if(typeof this.props.additionalConfig?.boardConfig?.elementClickCallBack === "function")
-                    this.props.additionalConfig?.boardConfig.elementClickCallBack(e);
+                if(typeof this.props.additionalConfig?.boardConfig?.elementClickCallback === "function")
+                    this.props.additionalConfig?.boardConfig.elementClickCallback(e);
             },
-            selectionChangeCallBack:(selection: Array<RcsbFvTrackDataElementInterface>)=>{
+            selectionChangeCallback:(selection: Array<RcsbFvTrackDataElementInterface>)=>{
                 this.selectionChangeCallback(selection);
-                if(typeof this.props.additionalConfig?.boardConfig?.selectionChangeCallBack === "function")
-                    this.props.additionalConfig?.boardConfig.selectionChangeCallBack(selection);
+                if(typeof this.props.additionalConfig?.boardConfig?.selectionChangeCallback === "function")
+                    this.props.additionalConfig?.boardConfig.selectionChangeCallback(selection);
             },
             highlightHoverCallback:(selection: RcsbFvTrackDataElementInterface[])=>{
                 this.highlightHoverCallback(selection);

src/custom.d.ts

@@ -5,3 +5,9 @@ declare module "*.json" {
     const value: any;
     export default value;
 }
+
+declare module "boxicons/*.svg" {
+    import {SVGProps} from "react";
+    const content: React.FC<SVGProps<any>>;
+    export default content;
+}

src/examples/assembly-interface/index.ts

@@ -32,7 +32,7 @@ document.addEventListener("DOMContentLoaded", function(event) {
         },
         additionalConfig: {
             boardConfig: {
-                elementClickCallBack: (e?: RcsbFvTrackDataElementInterface & {type?: string;}) => {
+                elementClickCallback: (e?: RcsbFvTrackDataElementInterface & {type?: string;}) => {
                     console.log(`Element clicked ${e?.type}`)
                 }
             }

src/examples/assembly/index.ts

@@ -45,7 +45,7 @@ document.addEventListener("DOMContentLoaded", function(event) {
         },
         additionalConfig: {
             boardConfig: {
-                elementClickCallBack: (e?: RcsbFvTrackDataElementInterface & {type?: string;}) => {
+                elementClickCallback: (e?: RcsbFvTrackDataElementInterface & {type?: string;}) => {
                     console.log(`Element clicked ${e?.type}`)
                 }
             },

webpack.config.js

@@ -1,9 +1,19 @@
 const path = require('path');
 
+
 const commonConfig = {
     module: {
-      rules: [
-          {
+      rules: [{
+              test: /\.svg$/,
+              issuer: /\.[jt]sx?$/,
+              use: [{
+                  loader:'@svgr/webpack',
+                  options: {
+                      expandProps: "end",
+                      svgoConfig: {}
+                  }
+              }]
+          },{
               test: /\.(html|ico)$/,
               use: [{
                   loader: 'file-loader',
@@ -29,9 +39,7 @@ const commonConfig = {
                         localIdentName:'[local]'
                     }
                 }
-            }, {
-                loader: 'resolve-url-loader'
-            }, {
+            },{
                 loader: 'sass-loader',
                 options: {
                     sourceMap: true

webpack.server.dev.config.js

@@ -3,8 +3,17 @@ const fs = require('fs')
 
 const commonConfig = {
     module: {
-      rules: [
-          {
+      rules: [{
+              test: /\.svg$/,
+              issuer: /\.[jt]sx?$/,
+              use: [{
+                  loader:'@svgr/webpack',
+                  options: {
+                      expandProps: "end",
+                      svgoConfig: {}
+                  }
+              }]
+          },{
               test: /\.(html|ico)$/,
               use: [{
                   loader: 'file-loader',