tsconfig && saguaro update

CHANGELOG.md

@@ -2,6 +2,22 @@
 
 [Semantic Versioning](https://semver.org/)
 
+## [4.0.0] - 2023-11-15
+### Breaking changes
+- Types are not anymore exposed from `build/src`
+- All module classes and types are accessible from `lib/`
+  - Modules format is `ESNext`
+  - `lib/commonjs` exposes all modules in `CommonJS` format
+
+### Code refactoring
+- Sass @import changed to @use
+- Styles sheets `scss` refactoring
+
+### Dependency update
+- Multiple dependencies have been updated
+- rcsb-saguaro-app v6.0.0
+- rcsb-saguaro v3.0.0
+
 ## [3.0.18] - 2023-10-03
 ### Dependency update
 - rcsb-saguaro-app v5.1.5

package.json

@@ -1,26 +1,25 @@
 {
   "name": "@rcsb/rcsb-saguaro-3d",
-  "version": "3.0.18",
+  "version": "4.0.0-development.1",
   "description": "RCSB Molstar/Saguaro Web App",
   "main": "build/dist/app.js",
   "files": [
-    "build/dist",
+    "build",
     "lib"
   ],
   "scripts": {
     "devServer": "webpack-dev-server --config webpack.server.dev.config.js",
-    "tsc": "tsc --incremental",
+    "build-tsc": "tsc",
+    "build-commonjs": "tsc --build tsconfig.commonjs.json",
     "build": "webpack --config ./webpack.config.js",
-    "buildAll": "npm run cleanAll && npm run tsc && npm run cpStyles && npm run mkDist && npm run copyConfig && npm run copyDef && npm run build && npm run buildDoc",
-    "buildApp": "npm run cleanAll && npm run tsc && npm run cpStyles && npm run mkDist && npm run copyConfig && npm run copyDef && npm run build",
-    "cpStyles": "ncp src/styles lib/styles",
-    "mkDist": "mkdirp build/dist",
-    "copyConfig": "ncp lib/config.js build/dist/config.js",
-    "copyDef": "ncp lib/app.d.ts build/dist/app.d.ts",
+    "buildAll": "npm run buildApp && npm run buildDoc",
+    "buildApp": "npm run clean && npm run build-tsc && npm run build-commonjs && npm run cpStyles && npm run build && npm run copyConfig && npm run copyDef",
+    "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",
-    "clean": "del-cli lib",
-    "cleanAll": "npm run clean && del-cli build/dist",
-    "publishApp": "npm publish",
+    "clean": "del-cli lib && del-cli build",
+    "publishApp": "npm publish --tag development",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "repository": {
@@ -46,18 +45,17 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@babel/core": "^7.22.17",
+    "@babel/core": "^7.23.3",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
-    "@babel/preset-env": "^7.22.15",
-    "@types/d3-selection": "^3.0.6",
-    "@types/d3-zoom": "^3.0.4",
-    "@types/lodash": "^4.14.198",
-    "@types/react": "^18.2.21",
-    "@types/react-dom": "^18.2.6",
-    "@types/uniqid": "^5.3.2",
+    "@babel/preset-env": "^7.23.3",
+    "@types/d3-selection": "^3.0.10",
+    "@types/d3-zoom": "^3.0.8",
+    "@types/lodash": "^4.14.201",
+    "@types/react": "^18.2.37",
+    "@types/react-dom": "^18.2.15",
+    "@types/uniqid": "^5.3.4",
     "babel-loader": "^9.1.3",
     "buffer": "^6.0.3",
-    "concurrently": "^8.2.1",
     "crypto-browserify": "^3.12.0",
     "css-loader": "^6.8.1",
     "del-cli": "^5.1.0",
@@ -65,35 +63,35 @@
     "html-webpack-plugin": "^5.5.3",
     "lodash": "^4.17.21",
     "mini-css-extract-plugin": "^2.7.6",
-    "mkdirp": "^3.0.1",
     "ncp": "^2.0.0",
     "path-browserify": "^1.0.1",
-    "react": "^18.1.0",
-    "react-dom": "^18.1.0",
-    "react-icons": "^4.11.0",
-    "rxjs": "^7.5.6",
-    "sass": "^1.66.1",
+    "raw-loader": "^4.0.2",
+    "sass": "^1.69.5",
     "sass-loader": "^13.3.2",
     "stream-browserify": "^3.0.0",
     "style-loader": "^3.3.3",
-    "ts-loader": "^9.4.4",
+    "ts-loader": "^9.5.0",
     "tslib": "^2.6.2",
-    "typedoc": "^0.25.1",
+    "typedoc": "^0.25.3",
     "typedoc-plugin-missing-exports": "^2.1.0",
     "typescript": "^5.2.2",
     "uniqid": "^5.4.0",
-    "webpack": "^5.88.2",
+    "webpack": "^5.89.0",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^4.15.1"
   },
   "dependencies": {
-    "@rcsb/rcsb-api-tools": "^4.1.13",
-    "@rcsb/rcsb-saguaro": "^2.5.13",
-    "@rcsb/rcsb-saguaro-app": "^5.1.5"
+    "resolve-url-loader": "^5.0.0",
+    "rxjs": "^7.5.6"
   },
   "peerDependencies": {
+    "@rcsb/rcsb-api-tools": "^4.1.13",
     "@rcsb/rcsb-molstar": "^2.8.0",
-    "molstar": "^3.40.1"
+    "@rcsb/rcsb-saguaro": "^3.0.0-development.5",
+    "@rcsb/rcsb-saguaro-app": "^6.0.0-development.7",
+    "molstar": "^3.40.1",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0"
   },
   "bugs": {
     "url": "https://github.com/rcsb/rcsb-saguaro-3d/issues"

src/RcsbFv3D/RcsbFv3DAbstract.tsx

@@ -1,4 +1,3 @@
-import * as React from "react";
 import {createRoot, Root} from "react-dom/client";
 import {RcsbFv3DComponent, RcsbFv3DCssConfig} from './RcsbFv3DComponent';
 import {RcsbFvStructureConfigInterface} from "../RcsbFvStructure/RcsbFvStructure";

src/RcsbFv3D/RcsbFv3DAlignmentProvider.tsx

@@ -1,9 +1,8 @@
-import * as React from "react";
 import {RcsbFv3DAbstract} from "./RcsbFv3DAbstract";
 import {
     RcsbFvAdditionalConfig,
     RcsbFvModulePublicInterface, RcsbModuleDataProviderInterface
-} from "@rcsb/rcsb-saguaro-app/build/dist/RcsbFvWeb/RcsbFvModule/RcsbFvModuleInterface";
+} from "@rcsb/rcsb-saguaro-app/lib/RcsbFvWeb/RcsbFvModule/RcsbFvModuleInterface";
 import uniqid from "uniqid";
 
 import {
@@ -24,14 +23,13 @@ import {MolstarAlignmentLoader} from "../RcsbFvStructure/StructureViewers/Molsta
 import {MsaBehaviourObserver} from "../RcsbFvStructure/StructureViewerBehaviour/MsaBehaviour";
 import {
     PolymerEntityInstanceInterface
-} from "@rcsb/rcsb-saguaro-app/build/dist/RcsbCollectTools/DataCollectors/PolymerEntityInstancesCollector";
+} from "@rcsb/rcsb-saguaro-app/lib/RcsbCollectTools/DataCollectors/PolymerEntityInstancesCollector";
 import {HelpLinkComponent} from "../RcsbFvSequence/SequenceViews/RcsbView/Components/HelpLinkComponent";
 import {AlignmentResponse} from "@rcsb/rcsb-api-tools/build/RcsbGraphQL/Types/Borrego/GqlTypes";
 import {DataContainer} from "../Utils/DataContainer";
 import {
     MsaPfvManagerFactory, MsaPfvManagerInterface
 } from "../RcsbFvSequence/SequenceViews/RcsbView/PfvManagerFactoryImplementation/MsaPfvManagerFactory";
-import {buildDataProviderFv} from "@rcsb/rcsb-saguaro-app";
 import {
     LoadParamsProviderInterface
 } from "../RcsbFvStructure/StructureUtils/StructureLoaderInterface";
@@ -46,6 +44,7 @@ import {
     AlignmentProviderBehaviour
 } from "../RcsbFvSequence/SequenceViews/RcsbView/RcsbViewBehaviour/AlignmentProviderBehaviour";
 import {TrajectoryHierarchyPresetProvider} from "molstar/lib/mol-plugin-state/builder/structure/hierarchy-preset";
+import {buildDataProviderFv} from "@rcsb/rcsb-saguaro-app/lib/RcsbFvWeb/RcsbFvBuilder";
 
 export interface RcsbFv3DDataProviderInterface  {
     elementId?: string;

src/RcsbFv3D/RcsbFv3DAssembly.tsx

@@ -1,10 +1,9 @@
-import * as React from "react";
 import {RcsbFv3DAbstract} from "./RcsbFv3DAbstract";
 import {
     AssemblyTrajectoryParamsType
 } from "../RcsbFvStructure/StructureViewers/MolstarViewer/TrajectoryPresetProvider/AssemblyTrajectoryPresetProvider";
-import {RcsbFvAdditionalConfig} from "@rcsb/rcsb-saguaro-app/build/dist/RcsbFvWeb/RcsbFvModule/RcsbFvModuleInterface";
-import {InstanceSequenceConfig} from "@rcsb/rcsb-saguaro-app/build/dist/RcsbFvWeb/RcsbFvBuilder/RcsbFvInstanceBuilder";
+import {RcsbFvAdditionalConfig} from "@rcsb/rcsb-saguaro-app/lib/RcsbFvWeb/RcsbFvModule/RcsbFvModuleInterface";
+import {InstanceSequenceConfig} from "@rcsb/rcsb-saguaro-app/lib/RcsbFvWeb/RcsbFvBuilder/RcsbFvInstanceBuilder";
 import {OperatorInfo} from "../RcsbFvStructure/StructureViewerInterface";
 import {
     LoadMolstarInterface,

src/RcsbFv3D/RcsbFv3DComponent.tsx

@@ -1,9 +1,9 @@
 import * as React from "react";
-import classes from '../styles/RcsbFvStyle.module.scss';
+import classes from '../scss/RcsbFvStyle.module.scss';
 
 import {StructureViewerInterface} from '../RcsbFvStructure/StructureViewerInterface';
 
-import '../styles/RcsbFvMolstarStyle.module.scss';
+import '../scss/RcsbFvMolstarStyle.module.scss';
 import {RcsbFvSequence, RcsbFvSequenceInterface} from "../RcsbFvSequence/RcsbFvSequence";
 import {RcsbFvStructure, RcsbFvStructureConfigInterface} from "../RcsbFvStructure/RcsbFvStructure";
 import {

src/RcsbFv3D/RcsbFv3DCustom.tsx

@@ -1,7 +1,6 @@
 
 import {RcsbFvStructure, RcsbFvStructureConfigInterface} from "../RcsbFvStructure/RcsbFvStructure";
 import {CustomViewInterface} from "../RcsbFvSequence/SequenceViews/CustomView/CustomView";
-import {RcsbFv3DAbstract} from "./RcsbFv3DAbstract";
 import uniqid from "uniqid";
 import {
     LoadMolstarInterface,

src/RcsbFv3D/RcsbFv3DCustomAbstract.tsx

@@ -1,9 +1,7 @@
-import * as React from "react";
 import {createRoot, Root} from "react-dom/client";
-import {RcsbFv3DComponent, RcsbFv3DCssConfig} from './RcsbFv3DComponent';
+import {RcsbFv3DCssConfig} from './RcsbFv3DComponent';
 import {RcsbFvStructureConfigInterface} from "../RcsbFvStructure/RcsbFvStructure";
-import {RcsbFvSequenceInterface} from "../RcsbFvSequence/RcsbFvSequence";
-import {EventType, RcsbFvContextManager} from "../RcsbFvContextManager/RcsbFvContextManager";
+import {EventType} from "../RcsbFvContextManager/RcsbFvContextManager";
 import {PluginContext} from "molstar/lib/mol-plugin/context";
 import {CSSProperties} from "react";
 import {StructureViewerInterface} from "../RcsbFvStructure/StructureViewerInterface";

src/RcsbFv3D/RcsbFv3DCustomComponent.tsx

@@ -1,9 +1,9 @@
 import * as React from "react";
-import classes from '../styles/RcsbFvStyle.module.scss';
+import classes from '../scss/RcsbFvStyle.module.scss';
 
 import {StructureViewerInterface} from '../RcsbFvStructure/StructureViewerInterface';
 
-import '../styles/RcsbFvMolstarStyle.module.scss';
+import '../scss/RcsbFvMolstarStyle.module.scss';
 import {RcsbFvStructure, RcsbFvStructureConfigInterface} from "../RcsbFvStructure/RcsbFvStructure";
 import {Subscription} from "rxjs";
 import {PluginContext} from "molstar/lib/mol-plugin/context";

src/RcsbFv3D/RcsbFv3DSequenceIdentity.tsx

@@ -1,9 +1,8 @@
-import * as React from "react";
 import {RcsbFv3DAbstract} from "./RcsbFv3DAbstract";
 import {
     RcsbFvAdditionalConfig,
     RcsbFvModulePublicInterface
-} from "@rcsb/rcsb-saguaro-app/build/dist/RcsbFvWeb/RcsbFvModule/RcsbFvModuleInterface";
+} from "@rcsb/rcsb-saguaro-app/lib/RcsbFvWeb/RcsbFvModule/RcsbFvModuleInterface";
 import uniqid from "uniqid";
 
 import {
@@ -24,7 +23,7 @@ import {MolstarAlignmentLoader} from "../RcsbFvStructure/StructureViewers/Molsta
 import {MsaBehaviourObserver} from "../RcsbFvStructure/StructureViewerBehaviour/MsaBehaviour";
 import {
     PolymerEntityInstanceInterface
-} from "@rcsb/rcsb-saguaro-app/build/dist/RcsbCollectTools/DataCollectors/PolymerEntityInstancesCollector";
+} from "@rcsb/rcsb-saguaro-app/lib/RcsbCollectTools/DataCollectors/PolymerEntityInstancesCollector";
 import {SearchQuery} from "@rcsb/rcsb-api-tools/build/RcsbSearch/Types/SearchQueryInterface";
 import {HelpLinkComponent} from "../RcsbFvSequence/SequenceViews/RcsbView/Components/HelpLinkComponent";
 import {AlignmentResponse} from "@rcsb/rcsb-api-tools/build/RcsbGraphQL/Types/Borrego/GqlTypes";
@@ -32,12 +31,12 @@ import {DataContainer} from "../Utils/DataContainer";
 import {
     MsaPfvManagerFactory, MsaPfvManagerInterface
 } from "../RcsbFvSequence/SequenceViews/RcsbView/PfvManagerFactoryImplementation/MsaPfvManagerFactory";
-import {buildSequenceIdentityAlignmentFv} from "@rcsb/rcsb-saguaro-app";
 import {
     AlignmentTrajectoryParamsType
 } from "../RcsbFvStructure/StructureViewers/MolstarViewer/TrajectoryPresetProvider/AlignmentTrajectoryPresetProvider";
 import {MolstarTools} from "../RcsbFvStructure/StructureViewers/MolstarViewer/MolstarUtils/MolstarTools";
 import getModelIdFromTrajectory = MolstarTools.getModelIdFromTrajectory;
+import {buildSequenceIdentityAlignmentFv} from "@rcsb/rcsb-saguaro-app/lib/RcsbFvWeb/RcsbFvBuilder";
 
 export interface RcsbFv3DSequenceIdentityInterface  {
     elementId?: string;

src/RcsbFv3D/RcsbFv3DUniprot.tsx

@@ -1,9 +1,8 @@
-import * as React from "react";
 import {RcsbFv3DAbstract} from "./RcsbFv3DAbstract";
 import {
     RcsbFvAdditionalConfig,
     RcsbFvModulePublicInterface
-} from "@rcsb/rcsb-saguaro-app/build/dist/RcsbFvWeb/RcsbFvModule/RcsbFvModuleInterface";
+} from "@rcsb/rcsb-saguaro-app/lib/RcsbFvWeb/RcsbFvModule/RcsbFvModuleInterface";
 import uniqid from "uniqid";
 
 import {
@@ -30,12 +29,12 @@ import {
     MsaPfvManagerFactory,
     MsaPfvManagerInterface
 } from "../RcsbFvSequence/SequenceViews/RcsbView/PfvManagerFactoryImplementation/MsaPfvManagerFactory";
-import {buildUniprotAlignmentFv} from "@rcsb/rcsb-saguaro-app";
 import {
     AlignmentTrajectoryParamsType
 } from "../RcsbFvStructure/StructureViewers/MolstarViewer/TrajectoryPresetProvider/AlignmentTrajectoryPresetProvider";
 import {MolstarTools} from "../RcsbFvStructure/StructureViewers/MolstarViewer/MolstarUtils/MolstarTools";
 import getModelIdFromTrajectory = MolstarTools.getModelIdFromTrajectory;
+import {buildUniprotAlignmentFv} from "@rcsb/rcsb-saguaro-app/lib/RcsbFvWeb/RcsbFvBuilder";
 
 export interface RcsbFv3DUniprotInterface  {
     elementId?: string;

src/RcsbFvContextManager/RcsbFvCustomContextManager.ts

@@ -1,6 +1,5 @@
 import {Subject, Subscription} from 'rxjs';
 import {RcsbFvStructureConfigInterface} from "../RcsbFvStructure/RcsbFvStructure";
-import {RcsbFvSequenceInterface} from "../RcsbFvSequence/RcsbFvSequence";
 import {PluginContext} from "molstar/lib/mol-plugin/context";
 import {RcsbFvCustomSequenceInterface} from "../RcsbFvSequence/RcsbFvCustomSequence";
 

src/RcsbFvSequence/RcsbFvCustomSequence.tsx

@@ -4,8 +4,9 @@ import {
     ViewerActionManagerInterface
 } from "../RcsbFvStructure/StructureViewerInterface";
 import {PluginContext} from "molstar/lib/mol-plugin/context";
-import {RcsbFv, RcsbFvTrackDataElementInterface} from "@rcsb/rcsb-saguaro";
 import {RcsbFvStateInterface} from "../RcsbFvState/RcsbFvStateInterface";
+import {RcsbFv} from "@rcsb/rcsb-saguaro/lib/RcsbFv/RcsbFv";
+import {RcsbFvTrackDataElementInterface} from "@rcsb/rcsb-saguaro/lib/RcsbDataManager/RcsbDataManager";
 
 export interface RcsbFvCustomSequenceInterface<R,L>{
     config: CustomViewInterface<R,L>;

src/RcsbFvSequence/RcsbFvSequence.tsx

@@ -1,11 +1,4 @@
-import * as React from "react";
-import {CustomView, CustomViewInterface} from "./SequenceViews/CustomView/CustomView";
-import {
-    ViewerActionManagerInterface,
-    ViewerCallbackManagerInterface
-} from "../RcsbFvStructure/StructureViewerInterface";
-import {PluginContext} from "molstar/lib/mol-plugin/context";
-import {RcsbFv, RcsbFvTrackDataElementInterface} from "@rcsb/rcsb-saguaro";
+import React from "react";
 import {RcsbView, RcsbViewInterface} from "./SequenceViews/RcsbView/RcsbView";
 import {RcsbFvStateInterface} from "../RcsbFvState/RcsbFvStateInterface";
 import {RcsbViewBehaviourInterface} from "./SequenceViews/RcsbView/RcsbViewBehaviourInterface";

src/RcsbFvSequence/SequenceViews/AbstractView.tsx

@@ -1,11 +1,8 @@
 import * as React from "react";
-import classes from '../../styles/RcsbFvStyle.module.scss';
+import classes from '../../scss/RcsbFvStyle.module.scss';
 import {asyncScheduler, Subscription} from "rxjs";
 
 import {RcsbFvDOMConstants} from "../../RcsbFvConstants/RcsbFvConstants";
-import {
-    ViewerCallbackManagerInterface, ViewerActionManagerInterface
-} from "../../RcsbFvStructure/StructureViewerInterface";
 import {SequenceViewInterface} from "./SequenceViewInterface";
 import {RcsbFvStateInterface} from "../../RcsbFvState/RcsbFvStateInterface";
 

src/RcsbFvSequence/SequenceViews/CustomView/CustomView.tsx

@@ -1,18 +1,15 @@
 import {asyncScheduler} from "rxjs";
 
 import {AbstractView, AbstractViewInterface} from "../AbstractView";
+
 import {
-    RcsbFvBoardConfigInterface,
-    RcsbFvRowConfigInterface,
-    RcsbFv,
-    RcsbFvTrackDataElementInterface
-} from "@rcsb/rcsb-saguaro";
-import * as React from "react";
-import {
-    StructureViewerPublicInterface, ViewerActionManagerInterface, ViewerCallbackManagerInterface
+    StructureViewerPublicInterface, ViewerActionManagerInterface
 } from "../../../RcsbFvStructure/StructureViewerInterface";
 import uniqid from "uniqid";
 import {RcsbFvStateInterface} from "../../../RcsbFvState/RcsbFvStateInterface";
+import { RcsbFv } from "@rcsb/rcsb-saguaro/lib/RcsbFv/RcsbFv";
+import {RcsbFvBoardConfigInterface, RcsbFvRowConfigInterface} from "@rcsb/rcsb-saguaro/lib/RcsbFv/RcsbFvConfig/RcsbFvConfigInterface";
+import { RcsbFvTrackDataElementInterface } from "@rcsb/rcsb-saguaro/lib/RcsbDataManager/RcsbDataManager";
 
 export type CustomViewStateInterface<R,L> = Omit<Omit<CustomViewInterface<R,L>, "modelChangeCallback">, "structureViewer">;
 
@@ -36,7 +33,7 @@ export interface FeatureViewInterface<R,L> {
     boardConfig: RcsbFvBoardConfigInterface;
     rowConfig: Array<RcsbFvRowConfigInterface>;
     sequenceSelectionChangeCallback: (plugin: StructureViewerPublicInterface<R,L>, stateManager: RcsbFvStateInterface, sequenceRegion: Array<RcsbFvTrackDataElementInterface>) => void;
-    sequenceElementClickCallback: (plugin: StructureViewerPublicInterface<R,L>, stateManager: RcsbFvStateInterface, d: RcsbFvTrackDataElementInterface) => void;
+    sequenceElementClickCallback: (plugin: StructureViewerPublicInterface<R,L>, stateManager: RcsbFvStateInterface, d?: RcsbFvTrackDataElementInterface) => void;
     sequenceHoverCallback: (plugin: StructureViewerPublicInterface<R,L>, stateManager: RcsbFvStateInterface, hoverRegion: Array<RcsbFvTrackDataElementInterface>) => void;
     structureSelectionCallback: (plugin: StructureViewerPublicInterface<R,L>, pfv: RcsbFv, stateManager: RcsbFvStateInterface) => void;
     structureHoverCallback: (plugin: StructureViewerPublicInterface<R,L>, pfv: RcsbFv, stateManager: RcsbFvStateInterface) => void;
@@ -169,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/CallbackManagerFactoryImplementation/AssemblyCallbackManager.ts

@@ -2,13 +2,13 @@ import {
     SaguaroRange,
     SaguaroRegionList
 } from "../../../../RcsbFvStructure/StructureViewerInterface";
-import {RcsbFvTrackDataElementInterface} from "@rcsb/rcsb-saguaro";
 import {
     AbstractCallbackManager, CallbackConfigInterface,
     CallbackManagerFactoryInterface,
     CallbackManagerInterface
 } from "../CallbackManagerFactoryInterface";
 import {RegionSelectionInterface} from "../../../../RcsbFvState/RcsbFvSelectorManager";
+import {RcsbFvTrackDataElementInterface} from "@rcsb/rcsb-saguaro/lib/RcsbDataManager/RcsbDataManager";
 
 export class AssemblyCallbackManagerFactory implements CallbackManagerFactoryInterface<undefined> {
     getCallbackManager(config: CallbackConfigInterface): CallbackManagerInterface<undefined> {

src/RcsbFvSequence/SequenceViews/RcsbView/CallbackManagerFactoryImplementation/MsaCallbackManager.ts

@@ -3,7 +3,6 @@ import {
     CallbackConfigInterface,
     CallbackManagerFactoryInterface, CallbackManagerInterface
 } from "../CallbackManagerFactoryInterface";
-import {RcsbFvTrackDataElementInterface} from "@rcsb/rcsb-saguaro";
 import {
     AlignedRegion,
     AlignmentResponse
@@ -13,6 +12,7 @@ import {ChainInfo, SaguaroRegionList} from "../../../../RcsbFvStructure/Structur
 import {AlignmentMapper as AM} from "../../../../Utils/AlignmentMapper";
 import {DataContainer} from "../../../../Utils/DataContainer";
 import {TagDelimiter} from "@rcsb/rcsb-api-tools/build/RcsbUtils/TagDelimiter";
+import {RcsbFvTrackDataElementInterface} from "@rcsb/rcsb-saguaro/lib/RcsbDataManager/RcsbDataManager";
 
 
 export class MsaCallbackManagerFactory<U> implements CallbackManagerFactoryInterface<U> {
@@ -41,13 +41,11 @@ export class MsaCallbackManagerFactory<U> implements CallbackManagerFactoryInter
 type SelectedRegion = {modelId: string, labelAsymId: string, region: RegionSelectionInterface, operatorName?: string};
 class MsaCallbackManager<U>  extends AbstractCallbackManager<U>{
 
-    private readonly loadParamRequest:(id: string)=>void;
-    private readonly targetIds: {[key:string]:boolean} = {};
+    private readonly targetIds: { [key: string]: boolean } = {};
     private readonly alignmentResponseContainer: DataContainer<AlignmentResponse>;
 
-    constructor(config: CallbackConfigInterface & {loadParamRequest:(id: string)=>void;alignmentResponseContainer: DataContainer<AlignmentResponse>;}) {
+    constructor(config: CallbackConfigInterface & { loadParamRequest: (id: string) => void; alignmentResponseContainer: DataContainer<AlignmentResponse>; }) {
         super(config);
-        this.loadParamRequest = config.loadParamRequest;
         this.alignmentResponseContainer = config.alignmentResponseContainer;
     }
 

src/RcsbFvSequence/SequenceViews/RcsbView/CallbackManagerFactoryInterface.ts

@@ -1,17 +1,15 @@
-import {RcsbFvTrackDataElementInterface} from "@rcsb/rcsb-saguaro";
-import {
-    ViewerCallbackManagerInterface, ViewerActionManagerInterface
-} from "../../../RcsbFvStructure/StructureViewerInterface";
+
 import {DataContainer} from "../../../Utils/DataContainer";
 import {
     RcsbFvModulePublicInterface
-} from "@rcsb/rcsb-saguaro-app/build/dist/RcsbFvWeb/RcsbFvModule/RcsbFvModuleInterface";
+} from "@rcsb/rcsb-saguaro-app/lib/RcsbFvWeb/RcsbFvModule/RcsbFvModuleInterface";
 import {PfvManagerInterface} from "./PfvManagerFactoryInterface";
 import {RcsbFvStateInterface} from "../../../RcsbFvState/RcsbFvStateInterface";
+import {RcsbFvTrackDataElementInterface} from "@rcsb/rcsb-saguaro/lib/RcsbDataManager/RcsbDataManager";
 
 export interface CallbackManagerInterface<U> {
     structureViewerSelectionCallback(mode:'select'|'hover'): Promise<void>;
-    featureClickCallback(e:RcsbFvTrackDataElementInterface): void;
+    featureClickCallback(e?:RcsbFvTrackDataElementInterface): void;
     highlightHoverCallback(selection: RcsbFvTrackDataElementInterface[]): void;
     pfvSelectionChangeCallback(selection: Array<RcsbFvTrackDataElementInterface>): void;
     modelChangeCallback(defaultAuthId?: string, defaultOperatorName?:string): Promise<void>;

src/RcsbFvSequence/SequenceViews/RcsbView/PfvManagerFactoryImplementation/AssemblyPfvManagerFactory.tsx

@@ -1,25 +1,23 @@
 import {
     RcsbFvModulePublicInterface
-} from "@rcsb/rcsb-saguaro-app/build/dist/RcsbFvWeb/RcsbFvModule/RcsbFvModuleInterface";
+} from "@rcsb/rcsb-saguaro-app/lib/RcsbFvWeb/RcsbFvModule/RcsbFvModuleInterface";
 import {
     ChainInfo, OperatorInfo,
 } from "../../../../RcsbFvStructure/StructureViewerInterface";
 import {
     InstanceSequenceConfig
-} from "@rcsb/rcsb-saguaro-app/build/dist/RcsbFvWeb/RcsbFvBuilder/RcsbFvInstanceBuilder";
+} from "@rcsb/rcsb-saguaro-app/lib/RcsbFvWeb/RcsbFvBuilder/RcsbFvInstanceBuilder";
 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/RcsbFvComponents/SelectButton";
+import {SelectOptionProps} from "@rcsb/rcsb-saguaro-app/lib/RcsbFvWeb/RcsbFvComponents/SelectButton";
 import {ChainDisplayComponent} from "./AssemblyPfvComponents/ChainDisplayComponent";
-import * as React from "react";
 import {AnnotationFeatures, Source, Type} from "@rcsb/rcsb-api-tools/build/RcsbGraphQL/Types/Borrego/GqlTypes";
 import {
     PolymerEntityInstanceInterface
-} from "@rcsb/rcsb-saguaro-app/build/dist/RcsbCollectTools/DataCollectors/PolymerEntityInstancesCollector";
+} from "@rcsb/rcsb-saguaro-app/lib/RcsbCollectTools/DataCollectors/PolymerEntityInstancesCollector";
 import {
     InterfaceInstanceTranslate
-} from "@rcsb/rcsb-saguaro-app/build/dist/RcsbUtils/Translators/InterfaceInstanceTranslate";
+} from "@rcsb/rcsb-saguaro-app/lib/RcsbUtils/Translators/InterfaceInstanceTranslate";
 import {DataContainer} from "../../../../Utils/DataContainer";
 import {
     BuildPfvInterface,
@@ -28,6 +26,9 @@ import {
     PfvManagerInterface,
     PfvManagerFactoryInterface
 } from "../PfvManagerFactoryInterface";
+import {buildInstanceSequenceFv} from "@rcsb/rcsb-saguaro-app/lib/RcsbFvWeb/RcsbFvBuilder";
+import {RcsbFvUI} from "@rcsb/rcsb-saguaro-app/lib/RcsbExport/RcsbFvUI";
+import {FeatureType, RcsbRequestContextManager} from "@rcsb/rcsb-saguaro-app/lib/app";
 
 interface AssemblyPfvManagerInterface extends PfvManagerFactoryConfigInterface<undefined>{
     useOperatorsFlag?: boolean;

src/RcsbFvSequence/SequenceViews/RcsbView/PfvManagerFactoryImplementation/MsaPfvComponents/MsaRowMarkComponent.tsx

@@ -4,9 +4,9 @@
 */
 
 import React from "react";
-import classes from '../../../../../styles/MsaPfvStyle.module.scss';
+import classes from '../../../../../scss/MsaPfvStyle.module.scss';
 import {Property} from "csstype";
-import {asyncScheduler, Subscription} from "rxjs";
+import {asyncScheduler} from "rxjs";
 import {RcsbFvStateInterface} from "../../../../../RcsbFvState/RcsbFvStateInterface";
 
 interface MsaRowMarkInterface  {

src/RcsbFvSequence/SequenceViews/RcsbView/PfvManagerFactoryImplementation/MsaPfvComponents/MsaRowTitleComponent.tsx

@@ -4,11 +4,10 @@
 */
 
 import * as React from "react";
-import {RcsbFvRowTitleInterface} from "@rcsb/rcsb-saguaro/build/RcsbFv/RcsbFvRow/RcsbFvRowTitle";
-import {RcsbFvRowConfigInterface} from "@rcsb/rcsb-saguaro";
+import {RcsbFvRowTitleInterface} from "@rcsb/rcsb-saguaro/lib/RcsbFv/RcsbFvRow/RcsbFvRowTitle";
 import {
     AlignmentRequestContextType
-} from "@rcsb/rcsb-saguaro-app/build/dist/RcsbFvWeb/RcsbFvFactories/RcsbFvTrackFactory/TrackFactoryImpl/AlignmentTrackFactory";
+} from "@rcsb/rcsb-saguaro-app/lib/RcsbFvWeb/RcsbFvFactories/RcsbFvTrackFactory/TrackFactoryImpl/AlignmentTrackFactory";
 import {TargetAlignment} from "@rcsb/rcsb-api-tools/build/RcsbGraphQL/Types/Borrego/GqlTypes";
 import {Subscription} from "rxjs";
 import {MsaRowTitleCheckboxComponent} from "./MsaRowTitleCheckboxComponent";
@@ -16,6 +15,7 @@ import {MouseEvent} from "react";
 import {Property} from "csstype";
 import {RcsbFvStateInterface} from "../../../../../RcsbFvState/RcsbFvStateInterface";
 import {parseEntityOrInstance} from "../../../../../Utils/RcsbIdParser";
+import {RcsbFvRowConfigInterface} from "@rcsb/rcsb-saguaro/lib/RcsbFv/RcsbFvConfig/RcsbFvConfigInterface";
 
 interface MsaRowTitleInterface extends RcsbFvRowTitleInterface {
     alignmentContext: AlignmentRequestContextType;

src/RcsbFvSequence/SequenceViews/RcsbView/PfvManagerFactoryImplementation/MsaPfvComponents/MsaUiSequenceAlignmentDownload.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import {DataContainer} from "../../../../../Utils/DataContainer";
 import {
     RcsbFvModulePublicInterface
-} from "@rcsb/rcsb-saguaro-app/build/dist/RcsbFvWeb/RcsbFvModule/RcsbFvModuleInterface";
+} from "@rcsb/rcsb-saguaro-app/lib/RcsbFvWeb/RcsbFvModule/RcsbFvModuleInterface";
 import {RcsbFvStateInterface} from "../../../../../RcsbFvState/RcsbFvStateInterface";
 import {download, getFullDate, textToFile} from "../../../../../Utils/Download";
 

src/RcsbFvSequence/SequenceViews/RcsbView/PfvManagerFactoryImplementation/MsaPfvComponents/MsaUiSortComponent.tsx

@@ -3,12 +3,12 @@ import * as React from "react";
 import {DataContainer} from "../../../../../Utils/DataContainer";
 import {
     RcsbFvModulePublicInterface
-} from "@rcsb/rcsb-saguaro-app/build/dist/RcsbFvWeb/RcsbFvModule/RcsbFvModuleInterface";
-import {RcsbFvRowConfigInterface} from "@rcsb/rcsb-saguaro";
+} from "@rcsb/rcsb-saguaro-app/lib/RcsbFvWeb/RcsbFvModule/RcsbFvModuleInterface";
 import {RcsbFvStateInterface} from "../../../../../RcsbFvState/RcsbFvStateInterface";
+import { RcsbFvRowConfigInterface } from "@rcsb/rcsb-saguaro/lib/RcsbFv/RcsbFvConfig/RcsbFvConfigInterface";
 
 export interface MsaUiSortInterface {
-    rcsbFvContainer: DataContainer<RcsbFvModulePublicInterface>;
+    rcsbFvContainer: DataContainer<RcsbFvModulePublicInterface<{},{},{},{targetId:string}>>;
     stateManager: RcsbFvStateInterface;
 }
 export class MsaUiSortComponent extends React.Component<MsaUiSortInterface>{

src/RcsbFvSequence/SequenceViews/RcsbView/PfvManagerFactoryImplementation/MsaPfvManagerFactory.ts

@@ -7,21 +7,20 @@ import {
 import {
     RcsbFvAdditionalConfig,
     RcsbFvModulePublicInterface
-} from "@rcsb/rcsb-saguaro-app/build/dist/RcsbFvWeb/RcsbFvModule/RcsbFvModuleInterface";
-import {TagDelimiter} from "@rcsb/rcsb-api-tools/build/RcsbUtils/TagDelimiter";
+} from "@rcsb/rcsb-saguaro-app/lib/RcsbFvWeb/RcsbFvModule/RcsbFvModuleInterface";
 
 import {
     AlignmentRequestContextType
-} from "@rcsb/rcsb-saguaro-app/build/dist/RcsbFvWeb/RcsbFvFactories/RcsbFvTrackFactory/TrackFactoryImpl/AlignmentTrackFactory";
+} from "@rcsb/rcsb-saguaro-app/lib/RcsbFvWeb/RcsbFvFactories/RcsbFvTrackFactory/TrackFactoryImpl/AlignmentTrackFactory";
 import {AlignmentResponse, TargetAlignment} from "@rcsb/rcsb-api-tools/build/RcsbGraphQL/Types/Borrego/GqlTypes";
 import {MsaRowTitleComponent} from "./MsaPfvComponents/MsaRowTitleComponent";
 import {MsaRowMarkComponent} from "./MsaPfvComponents/MsaRowMarkComponent";
 import {
     PolymerEntityInstanceInterface
-} from "@rcsb/rcsb-saguaro-app/build/dist/RcsbCollectTools/DataCollectors/PolymerEntityInstancesCollector";
+} from "@rcsb/rcsb-saguaro-app/lib/RcsbCollectTools/DataCollectors/PolymerEntityInstancesCollector";
 import {DataContainer} from "../../../../Utils/DataContainer";
 import {MsaUiSortComponent} from "./MsaPfvComponents/MsaUiSortComponent";
-import {ActionMethods} from "@rcsb/rcsb-saguaro-app/build/dist/RcsbFvUI/Helper/ActionMethods";
+import {ActionMethods} from "@rcsb/rcsb-saguaro-app/lib/RcsbFvUI/Helper/ActionMethods";
 import {MsaUiSequenceAlignmentDownload} from "./MsaPfvComponents/MsaUiSequenceAlignmentDownload";
 import {MsaUiStructureDownload} from "./MsaPfvComponents/MsaUiStructureDownload";
 import {parseEntityOrInstance} from "../../../../Utils/RcsbIdParser"

src/RcsbFvSequence/SequenceViews/RcsbView/PfvManagerFactoryInterface.ts

@@ -2,13 +2,12 @@ import {DataContainer} from "../../../Utils/DataContainer";
 import {
     RcsbFvAdditionalConfig,
     RcsbFvModulePublicInterface
-} from "@rcsb/rcsb-saguaro-app/build/dist/RcsbFvWeb/RcsbFvModule/RcsbFvModuleInterface";
+} from "@rcsb/rcsb-saguaro-app/lib/RcsbFvWeb/RcsbFvModule/RcsbFvModuleInterface";
 import {
     OperatorInfo,
-    ViewerCallbackManagerInterface, ViewerActionManagerInterface
 } from "../../../RcsbFvStructure/StructureViewerInterface";
-import {RcsbFvBoardConfigInterface} from "@rcsb/rcsb-saguaro";
 import {RcsbFvStateInterface} from "../../../RcsbFvState/RcsbFvStateInterface";
+import {RcsbFvBoardConfigInterface} from "@rcsb/rcsb-saguaro/lib/RcsbFv/RcsbFvConfig/RcsbFvConfigInterface";
 
 export interface PfvManagerFactoryConfigInterface<U> {
     rcsbFvDivId: string;

src/RcsbFvSequence/SequenceViews/RcsbView/RcsbView.tsx

@@ -1,10 +1,14 @@
-import * as React from "react";
 
-import {unmount} from "@rcsb/rcsb-saguaro-app";
+import {RcsbFvTrackDataElementInterface} from "@rcsb/rcsb-saguaro/lib/RcsbDataManager/RcsbDataManager";
+import {RcsbFvBoardConfigInterface} from "@rcsb/rcsb-saguaro/lib/RcsbFv/RcsbFvConfig/RcsbFvConfigInterface";
+import {
+    RcsbFvAdditionalConfig,
+    RcsbFvModulePublicInterface
+} from "@rcsb/rcsb-saguaro-app/lib/RcsbFvWeb/RcsbFvModule/RcsbFvModuleInterface"
+import {unmount} from "@rcsb/rcsb-saguaro-app/lib/RcsbFvWeb/RcsbFvBuilder";
+
 import {AbstractView, AbstractViewInterface} from "../AbstractView";
-import {RcsbFvBoardConfigInterface, RcsbFvTrackDataElementInterface} from "@rcsb/rcsb-saguaro";
 import {OperatorInfo} from "../../../RcsbFvStructure/StructureViewerInterface";
-import {RcsbFvAdditionalConfig, RcsbFvModulePublicInterface} from "@rcsb/rcsb-saguaro-app/build/dist/RcsbFvWeb/RcsbFvModule/RcsbFvModuleInterface";
 import {DataContainer} from "../../../Utils/DataContainer";
 import {
     PfvManagerInterface,
@@ -67,7 +71,7 @@ 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);
@@ -140,7 +144,7 @@ export class RcsbView<T,U> extends AbstractView<RcsbViewInterface<T,U>, {}>{
         this.callbackManager.pfvSelectionChangeCallback(selection);
     }
 
-    private elementClickCallback(e:RcsbFvTrackDataElementInterface): void {
+    private elementClickCallback(e?:RcsbFvTrackDataElementInterface): void {
         this.callbackManager.featureClickCallback(e);
     }
 

src/RcsbFvSequence/SequenceViews/RcsbView/RcsbViewBehaviour/AlignmentProviderBehaviour.ts

@@ -2,7 +2,7 @@ import {RcsbViewBehaviourInterface} from "../RcsbViewBehaviourInterface";
 import {DataContainer} from "../../../../Utils/DataContainer";
 import {
     RcsbFvModulePublicInterface
-} from "@rcsb/rcsb-saguaro-app/build/dist/RcsbFvWeb/RcsbFvModule/RcsbFvModuleInterface";
+} from "@rcsb/rcsb-saguaro-app/lib/RcsbFvWeb/RcsbFvModule/RcsbFvModuleInterface";
 import {RcsbFvStateInterface} from "../../../../RcsbFvState/RcsbFvStateInterface";
 import {Subscription} from "rxjs";
 import {TargetAlignment} from "@rcsb/rcsb-api-tools/build/RcsbGraphQL/Types/Borrego/GqlTypes";

src/RcsbFvSequence/SequenceViews/RcsbView/RcsbViewBehaviourInterface.ts

@@ -1,7 +1,7 @@
 import {DataContainer} from "../../../Utils/DataContainer";
 import {
     RcsbFvModulePublicInterface
-} from "@rcsb/rcsb-saguaro-app/build/dist/RcsbFvWeb/RcsbFvModule/RcsbFvModuleInterface";
+} from "@rcsb/rcsb-saguaro-app/lib/RcsbFvWeb/RcsbFvModule/RcsbFvModuleInterface";
 import {RcsbFvStateInterface} from "../../../RcsbFvState/RcsbFvStateInterface";
 
 export interface RcsbViewBehaviourInterface {

src/RcsbFvSequence/SequenceViews/SequenceViewInterface.ts

@@ -1,4 +1,3 @@
-import {SaguaroPluginModelMapType} from "../../RcsbFvStructure/StructureViewerInterface";
 
 export interface SequenceViewInterface {
     structureSelectionCallback(): void;

src/RcsbFvStructure/StructureViewerBehaviour/MsaBehaviour.ts

@@ -133,7 +133,7 @@ class MsaBehaviour<R,L> implements StructureViewerBehaviourInterface {
                 }));
                 if(
                     data?.map( d => (d.region.end-d.region.begin+1) < this.CREATE_COMPONENT_THR ? 1 : 0)
-                    .reduce((prev,curr)=>prev+curr,0) == data?.length
+                    .reduce((prev: number, curr:number)=>prev+curr,0) == data?.length
                 )
                     asyncScheduler.schedule(async ()=>{
                         const x = residues[0];
@@ -158,6 +158,7 @@ class MsaBehaviour<R,L> implements StructureViewerBehaviourInterface {
     }
 
     unsubscribe(): void {
+        this.subscription.unsubscribe();
     }
 
     reprChange(data?:{pdb:{entryId:string;entityId:string;}|{entryId:string;instanceId:string;}} & {tag:"aligned"|"polymer"|"non-polymer";isHidden:boolean;}): void {

src/RcsbFvStructure/StructureViewers/MolstarViewer/MolstarModelMapManager.ts

@@ -81,7 +81,7 @@ function getChainValues(structure: Structure, modelEntityId: string): [{modelId:
     const chains: Map<number, ChainInfo> = new Map<number, ChainInfo>();
     const l = StructureElement.Location.create(structure);
     let assemblyId:string = "-";
-    const [modelIdx, entityId] = splitModelEntityId(modelEntityId);
+    const modelIdx = splitModelEntityId(modelEntityId);
     for (const unit of structure.units) {
         StructureElement.Location.set(l, structure, unit, unit.elements[0]);
         assemblyId = SP.unit.pdbx_struct_assembly_id(l);
@@ -129,9 +129,8 @@ function getModelEntityOptions(structure: Structure):[string, string][] {
     return options;
 }
 
-function splitModelEntityId(modelEntityId: string) {
-    const [ modelIdx, entityId ] = modelEntityId.split('|');
-    return [ parseInt(modelIdx), entityId ];
+function splitModelEntityId(modelEntityId: string): number {
+    return parseInt(modelEntityId.split('|')[0]);
 }
 
 function opKey(l: StructureElement.Location): OperatorInfo {

src/RcsbFvStructure/StructureViewers/MolstarViewer/MolstarUtils/MolstarAlignmentComponentAction.ts

@@ -1,24 +0,0 @@
-import {
-    ComponentActionFactoryInterface,
-    ComponentActionInterface
-} from "../../../StructureUtils/ComponentActionInterface";
-import {LoadMolstarReturnType} from "../MolstarActionManager";
-import {RcsbFvStateInterface} from "../../../../RcsbFvState/RcsbFvStateInterface";
-
-export class MolstarAlignmentComponentActionFactory implements ComponentActionFactoryInterface<LoadMolstarReturnType> {
-    getComponentAction(config: { stateManager: RcsbFvStateInterface }): ComponentActionInterface<LoadMolstarReturnType> {
-        return new MolstarAlignmentComponentAction(config.stateManager);
-    }
-}
-class MolstarAlignmentComponentAction implements ComponentActionInterface<LoadMolstarReturnType> {
-
-    private readonly stateManager: RcsbFvStateInterface;
-    constructor(stateManager: RcsbFvStateInterface) {
-        this.stateManager =stateManager;
-    }
-
-    accept(trajectory: LoadMolstarReturnType, context: { entryId:string; entityId:string; } | { entryId:string; instanceId:string; }): void {
-
-    }
-
-}

src/RcsbFvStructure/StructureViewers/MolstarViewer/TrajectoryPresetProvider/AlignmentRepresentationPresetProvider.ts

@@ -333,8 +333,7 @@ function checkLocalScore(scoreMap: Map<number, number>, index: number): boolean{
 async function obtainQualityAssessment(model: Model): Promise<Map<number,number>> {
     if (!model || !MmcifFormat.is(model.sourceData)) return new Map();
     const { ma_qa_metric, ma_qa_metric_local } = model.sourceData.data.db;
-    const { model_id, label_asym_id, label_seq_id, metric_id, metric_value } = ma_qa_metric_local;
-    const { index } = model.atomicHierarchy;
+    const { model_id, label_seq_id, metric_id, metric_value } = ma_qa_metric_local;
 
     // for simplicity we assume names in ma_qa_metric for mode 'local' are unique
     const localMetrics = new Map<string, Map<number, number>>();
@@ -357,7 +356,6 @@ async function obtainQualityAssessment(model: Model): Promise<Map<number,number>
         if (model_id.value(i) !== model.modelNum)
             continue;
 
-        const labelAsymId = label_asym_id.value(i);
         const rI = label_seq_id.value(i);
         const name = localNames.get(metric_id.value(i))!;
         localMetrics.get(name)!.set(rI, metric_value.value(i));

src/RcsbFvStructure/StructureViewers/MolstarViewer/TrajectoryPresetProvider/FlexibleAlignmentBuiltIn.ts

@@ -31,7 +31,6 @@ export const FlexibleAlignmentBuiltIn = PluginStateTransform.BuiltIn({
             const entityId = params.pdb && "entityId" in params.pdb ? params.pdb?.entityId : undefined;
             const instanceId = params.pdb && "instanceId" in params.pdb ?  params.pdb?.instanceId : undefined;
             const l = StructureElement.Location.create(structure);
-            let alignedEntityId;
             let alignedAsymId;
             let alignedOperatorName;
             let alignedType;
@@ -39,7 +38,6 @@ export const FlexibleAlignmentBuiltIn = PluginStateTransform.BuiltIn({
             for(const unit of structure.units) {
                 StructureElement.Location.set(l, structure, unit, unit.elements[0]);
                 if(SP.chain.label_entity_id(l) == entityId || SP.chain.label_asym_id(l) == instanceId){
-                    alignedEntityId = SP.chain.label_entity_id(l);
                     alignedAsymId = SP.chain.label_asym_id(l);
                     alignedOperatorName = SP.unit.operator_name(l);
                     alignedType = SP.entity.type(l);

src/RcsbFvStructure/StructureViewers/MolstarViewer/TrajectoryPresetProvider/FlexibleAlignmentRepresentationPresetProvider.ts

@@ -87,11 +87,4 @@ export const FlexibleAlignmentRepresentationPresetProvider = StructureRepresenta
             representations: representationMap
         };
     }
-});
-
-function toRange(start: number, end?: number): number[] {
-    if (!end) return [start];
-    const b = start < end ? start : end;
-    const e = start < end ? end : start;
-    return [...Array(e - b + 1)].map((_, i) => b + i);
-};
+});

src/RcsbFvStructure/StructureViewers/MolstarViewer/TrajectoryPresetProvider/FlexibleAlignmentTrajectoryPresetProvider.ts

@@ -7,11 +7,11 @@ import {TrajectoryHierarchyPresetProvider} from "molstar/lib/mol-plugin-state/bu
 import {PluginContext} from "molstar/lib/mol-plugin/context";
 import {PluginStateObject} from "molstar/lib/mol-plugin-state/objects";
 import {ParamDefinition, ParamDefinition as PD} from "molstar/lib/mol-util/param-definition";
-import {StateObjectRef, StateObjectSelector} from "molstar/lib/mol-state";
+import {StateObjectRef} from "molstar/lib/mol-state";
 import {RootStructureDefinition} from "molstar/lib/mol-plugin-state/helpers/root-structure";
 import {StateObject} from "molstar/lib/mol-state/object";
 import {Structure, StructureElement, StructureProperties as SP} from "molstar/lib/mol-model/structure";
-import {RigidTransformType, TransformMatrixType} from "../../../StructureUtils/StructureLoaderInterface";
+import {RigidTransformType} from "../../../StructureUtils/StructureLoaderInterface";
 import {FlexibleAlignmentRepresentationPresetProvider} from "./FlexibleAlignmentRepresentationPresetProvider";
 import {FlexibleAlignmentBuiltIn} from "./FlexibleAlignmentBuiltIn";
 import {AlignmentTrajectoryParamsType} from "./AlignmentTrajectoryPresetProvider";

src/RcsbFvStructure/StructureViewers/MolstarViewer/TrajectoryPresetProvider/FocusTheme/FocusColoring.ts

@@ -4,9 +4,9 @@ import {
     StructureProperties, Unit
 } from 'molstar/lib/mol-model/structure';
 import { Color } from 'molstar/lib/mol-util/color';
-import { ThemeDataContext } from 'molstar/lib/mol-theme/theme';
+import {ThemeDataContext, ThemeProvider} from 'molstar/lib/mol-theme/theme';
 import { ParamDefinition } from 'molstar/lib/mol-util/param-definition';
-import { ColorTheme } from 'molstar/lib/mol-theme/color';
+import {ColorTheme, LocationColor} from 'molstar/lib/mol-theme/color';
 import { Location } from 'molstar/lib/mol-model/location';
 import {Overpaint} from "molstar/lib/commonjs/mol-theme/overpaint";
 import Layer = Overpaint.Layer;
@@ -18,7 +18,7 @@ import {
 } from "molstar/lib/mol-theme/color/element-symbol";
 
 export const FOCUS_RESIDUE_COLOR = 'focus-residue-color' as ColorTheme.BuiltIn;
-export function FocusResidueColorTheme(ctx: ThemeDataContext, props: ParamDefinition.Values<ElementSymbolColorThemeParams>): ColorTheme<{}> {
+export function FocusResidueColorTheme(ctx: ThemeDataContext, props: ParamDefinition.Values<ElementSymbolColorThemeParams>): ColorTheme<ElementSymbolColorThemeParams> {
 
     const L = StructureElement.Location.create();
 
@@ -42,7 +42,7 @@ export function FocusResidueColorTheme(ctx: ThemeDataContext, props: ParamDefini
         return nonCarbonAtomsColor(location);
     };
 
-    const color = (location: Location) => {
+    const color: LocationColor = (location: Location) => {
         if (StructureElement.Location.is(location) && Unit.isAtomic(location.unit)) {
             return atomColor(location);
         } else if (Bond.isLocation(location)) {
@@ -62,7 +62,7 @@ export function FocusResidueColorTheme(ctx: ThemeDataContext, props: ParamDefini
     };
 
 }
-export const FocusResidueColorThemeProvider = {
+export const FocusResidueColorThemeProvider: ThemeProvider<any, any> = {
     name: FOCUS_RESIDUE_COLOR,
     label: 'Focus Residue',
     category: ColorTheme.Category.Misc,

src/app.ts

@@ -8,4 +8,4 @@ export {custom, assembly, uniprot, sequenceIdentity, alignmentProvider};
 
 export {
     RcsbRequestContextManager
-} from "@rcsb/rcsb-saguaro-app";
+} from "@rcsb/rcsb-saguaro-app/lib/app";

src/config.ts

@@ -1,3 +1,3 @@
-import * as path from "path";
+import path from "path";
 
-export const rcsbFvWebAppPath:string = path.resolve(path.join(__dirname, '..', 'dist'));
+export const rcsbFvWebAppPath:string = path.resolve(__dirname);

src/examples/alignment-provider/providers/AlignmentReference.ts

@@ -4,11 +4,11 @@ import {
     AlignmentResponse,
 } from "@rcsb/rcsb-api-tools/build/RcsbGraphQL/Types/Borrego/GqlTypes";
 import {Alignment} from "./alignment-response";
-import {RcsbRequestContextManager} from "@rcsb/rcsb-saguaro-app";
 import {TagDelimiter} from "@rcsb/rcsb-api-tools/build/RcsbUtils/TagDelimiter";
 import {
     InstanceSequenceInterface
-} from "@rcsb/rcsb-saguaro-app/build/dist/RcsbCollectTools/DataCollectors/MultipleInstanceSequencesCollector";
+} from "@rcsb/rcsb-saguaro-app/lib/RcsbCollectTools/DataCollectors/MultipleInstanceSequencesCollector";
+import {RcsbRequestContextManager} from "@rcsb/rcsb-saguaro-app/lib/app";
 
 type AlignmentRefType = (number|undefined)[];
 type AlignmentMemberType = {

src/examples/alignment-provider/providers/ExternalAlignmentProvider.ts

@@ -6,11 +6,11 @@ import {
 import {
     AlignmentCollectConfig,
     AlignmentCollectorInterface
-} from "@rcsb/rcsb-saguaro-app/build/dist/RcsbCollectTools/AlignmentCollector/AlignmentCollectorInterface";
+} from "@rcsb/rcsb-saguaro-app/lib/RcsbCollectTools/AlignmentCollector/AlignmentCollectorInterface";
 
 import {
     RcsbModuleDataProviderInterface
-} from "@rcsb/rcsb-saguaro-app/build/dist/RcsbFvWeb/RcsbFvModule/RcsbFvModuleInterface";
+} from "@rcsb/rcsb-saguaro-app/lib/RcsbFvWeb/RcsbFvModule/RcsbFvModuleInterface";
 import {AlignmentReference} from "./AlignmentReference";
 import {
     LoadParamsProviderInterface,
@@ -1649,6 +1649,7 @@ const alignmentExample = {
 };
 const duplicatedAlignment = {"info":{"uuid":"dcc58c64-e606-441f-8c04-372381fb7c0e","status":"COMPLETE"},"meta":{"alignment_mode":"pairwise","alignment_method":"fatcat-rigid"},"results":[{"structures":[{"entry_id":"101M","selection":{"asym_id":"A"}},{"entry_id":"101M","selection":{"asym_id":"A"}}],"structure_alignment":[{"regions":[[{"asym_id":"A","beg_seq_id":1,"beg_index":0,"length":154}],[{"asym_id":"A","beg_seq_id":1,"beg_index":0,"length":154}]],"transformations":[[1.0,0.0,0.0,0.0,0.0,1.0,0.0,0.0,0.0,0.0,1.0,0.0,0.0,0.0,0.0,1.0],[1.0,0.0,0.0,0.0,0.0,1.0,0.0,0.0,0.0,0.0,1.0,0.0,0.0,0.0,0.0,1.0]],"summary":{"scores":[{"value":456.0,"type":"similarity-score"},{"value":0.0,"type":"RMSD"}],"n_aln_residue_pairs":154}}],"sequence_alignment":[{"regions":[{"asym_id":"A","beg_seq_id":1,"beg_index":0,"length":154}]},{"regions":[{"asym_id":"A","beg_seq_id":1,"beg_index":0,"length":154}]}],"summary":{"scores":[{"value":1.0,"type":"sequence-identity"},{"value":1.0,"type":"TM-score"},{"value":1.0,"type":"sequence-similarity"},{"value":456.0,"type":"similarity-score"},{"value":0.0,"type":"RMSD"}],"n_aln_residue_pairs":154,"n_modeled_residues":[154,154],"seq_aln_len":154,"aln_coverage":[100,100]}}]};
 
+console.log("Alignment objects", alignment, flexAlignment, alignmentExample, duplicatedAlignment);
 class RcsbStructuralAlignmentProvider implements AlignmentCollectorInterface {
 
     private alignmentResponse: AlignmentResponse | undefined = undefined;

src/examples/assembly-interface/index.ts

@@ -1,5 +1,6 @@
 
 import {RcsbFv3DAssembly} from "../../RcsbFv3D/RcsbFv3DAssembly";
+import {RcsbFvTrackDataElementInterface} from "@rcsb/rcsb-saguaro/lib/RcsbDataManager/RcsbDataManager";
 
 document.addEventListener("DOMContentLoaded", function(event) {
 
@@ -31,7 +32,7 @@ document.addEventListener("DOMContentLoaded", function(event) {
         },
         additionalConfig: {
             boardConfig: {
-                elementClickCallBack: (e) => {
+                elementClickCallBack: (e?: RcsbFvTrackDataElementInterface & {type?: string;}) => {
                     console.log(`Element clicked ${e?.type}`)
                 }
             }

src/examples/assembly/index.ts

@@ -5,8 +5,10 @@ import {
     AnnotationFeatures,
     Type
 } from "@rcsb/rcsb-api-tools/build/RcsbGraphQL/Types/Borrego/GqlTypes";
-import {RcsbFvDisplayTypes, RcsbFvRowConfigInterface} from "@rcsb/rcsb-saguaro";
-import {PolymerEntityInstanceInterface} from "@rcsb/rcsb-saguaro-app/build/dist/RcsbCollectTools/DataCollectors/PolymerEntityInstancesCollector";
+import {PolymerEntityInstanceInterface} from "@rcsb/rcsb-saguaro-app/lib/RcsbCollectTools/DataCollectors/PolymerEntityInstancesCollector";
+import {RcsbFvRowConfigInterface} from "@rcsb/rcsb-saguaro/lib/RcsbFv/RcsbFvConfig/RcsbFvConfigInterface";
+import {RcsbFvDisplayTypes} from "@rcsb/rcsb-saguaro/lib/RcsbFv/RcsbFvConfig/RcsbFvDefaultConfigValues";
+import {RcsbFvTrackDataElementInterface} from "@rcsb/rcsb-saguaro/lib/RcsbDataManager/RcsbDataManager";
 
 document.addEventListener("DOMContentLoaded", function(event) {
 
@@ -43,7 +45,7 @@ document.addEventListener("DOMContentLoaded", function(event) {
         },
         additionalConfig: {
             boardConfig: {
-                elementClickCallBack: (e) => {
+                elementClickCallBack: (e?: RcsbFvTrackDataElementInterface & {type?: string;}) => {
                     console.log(`Element clicked ${e?.type}`)
                 }
             },

src/examples/css-config/index.ts

@@ -5,12 +5,7 @@ import {
     FeatureBlockInterface,
     FeatureViewInterface
 } from "../../RcsbFvSequence/SequenceViews/CustomView/CustomView";
-import {
-    RcsbFv,
-    RcsbFvDisplayTypes,
-    RcsbFvRowConfigInterface,
-    RcsbFvTrackDataElementInterface
-} from "@rcsb/rcsb-saguaro";
+
 import {RegionSelectionInterface} from "../../RcsbFvState/RcsbFvSelectorManager";
 import {SaguaroRegionList, StructureViewerPublicInterface} from "../../RcsbFvStructure/StructureViewerInterface";
 import {AlignmentManager} from "./AlignmentManager";
@@ -21,6 +16,10 @@ import {
 } from "../../RcsbFvStructure/StructureViewers/MolstarViewer/MolstarActionManager";
 import {ViewerProps} from "@rcsb/rcsb-molstar/build/src/viewer";
 import {RcsbFvStateManager} from "../../RcsbFvState/RcsbFvStateManager";
+import {RcsbFvRowConfigInterface} from "@rcsb/rcsb-saguaro/lib/RcsbFv/RcsbFvConfig/RcsbFvConfigInterface";
+import {RcsbFvDisplayTypes} from "@rcsb/rcsb-saguaro/lib/RcsbFv/RcsbFvConfig/RcsbFvDefaultConfigValues";
+import {RcsbFvTrackDataElementInterface} from "@rcsb/rcsb-saguaro/lib/RcsbDataManager/RcsbDataManager";
+import {RcsbFv} from "@rcsb/rcsb-saguaro/lib/RcsbFv/RcsbFv";
 
 const sequence_101m: string = "MVLSEGEWQLVLHVWAKVEADVAGHGQDILIRLFKSHPETLEKFDRVKHLKTEAEMKASEDLKKHGVTVLTALGAILKKKGHHEAELKPLAQSHATKHKIPIKYLEFISEAIIHVLHSRHPGNFGADAQGAMNKALELFRKDIAAKYKELGYQG";
 const alignment = [{
@@ -67,7 +66,7 @@ const rowConfig: Array<RcsbFvRowConfigInterface> = [
         rowTitle: "1ASH SEQUENCE",
         trackData: [{
             begin: 1,
-            value: "ANKTRELCMKSLEHAKVDTSNEARQDGIDLYKHMFENYPPLRKYFKSREEYTAEDVQNDPFFAKQGQKILLACHVLCATYDDRETFNAYTRELLDRHARDHVHMPPEVWTDFWKLFEEYLGKKTTLDEPTKQAWHEIGREFAKEINKHGR"
+            label: "ANKTRELCMKSLEHAKVDTSNEARQDGIDLYKHMFENYPPLRKYFKSREEYTAEDVQNDPFFAKQGQKILLACHVLCATYDDRETFNAYTRELLDRHARDHVHMPPEVWTDFWKLFEEYLGKKTTLDEPTKQAWHEIGREFAKEINKHGR"
         }]
     },{
         trackId: "blockTrack",
@@ -91,7 +90,7 @@ const rowConfig: Array<RcsbFvRowConfigInterface> = [
             displayId: "alignmentSequence",
             displayData: alignment.map(a=>({
                 begin:a.query_begin,
-                value: sequence_101m.substring(a.target_begin-1,a.target_end)
+                label: sequence_101m.substring(a.target_begin-1,a.target_end)
             }))
         }]
     }
@@ -137,9 +136,10 @@ const fvConfig: FeatureViewInterface<LoadMolstarInterface<unknown,unknown>,unkno
             plugin.resetCamera();
         }
     },
-    sequenceElementClickCallback: async (plugin:  StructureViewerPublicInterface<LoadMolstarInterface<unknown,unknown>,unknown>, stateManager: RcsbFvStateManager, d: RcsbFvTrackDataElementInterface) => {
+    sequenceElementClickCallback: async (plugin:  StructureViewerPublicInterface<LoadMolstarInterface<unknown,unknown>,unknown>, stateManager: RcsbFvStateManager, d?: RcsbFvTrackDataElementInterface) => {
         plugin.removeComponent("1ash_component");
         plugin.removeComponent("101m_component");
+        if(!d) return;
         if(d.begin === d.end || !d.end){
             await plugin.createComponent("1ash_component", "1ash_model", "A", d.begin, d.begin, "ball-and-stick");
             await plugin.createComponent("101m_component", "101m_model", "A", alignmentManager.getTargetPosition(d.begin)!, alignmentManager.getTargetPosition(d.begin)!, "ball-and-stick");

src/examples/external-mapping/FeatureViewerConfig.ts

@@ -1,12 +1,11 @@
 import {FeatureViewInterface} from "../../RcsbFvSequence/SequenceViews/CustomView/CustomView";
 import {StructureViewerPublicInterface, SaguaroRegionList} from "../../RcsbFvStructure/StructureViewerInterface";
-import {RcsbFvSelectorManager, RegionSelectionInterface} from "../../RcsbFvState/RcsbFvSelectorManager";
-import {
-    RcsbFv,
-    RcsbFvDisplayTypes,
-    RcsbFvRowConfigInterface,
-    RcsbFvTrackDataElementInterface
-} from "@rcsb/rcsb-saguaro";
+import {RegionSelectionInterface} from "../../RcsbFvState/RcsbFvSelectorManager";
+import {RcsbFvRowConfigInterface} from "@rcsb/rcsb-saguaro/lib/RcsbFv/RcsbFvConfig/RcsbFvConfigInterface";
+import {RcsbFvDisplayTypes} from "@rcsb/rcsb-saguaro/lib/RcsbFv/RcsbFvConfig/RcsbFvDefaultConfigValues";
+import {RcsbFvTrackDataElementInterface} from "@rcsb/rcsb-saguaro/lib/RcsbDataManager/RcsbDataManager";
+import {RcsbFv} from "@rcsb/rcsb-saguaro/lib/RcsbFv/RcsbFv";
+import {RcsbFvStateInterface} from "../../RcsbFvState/RcsbFvStateInterface";
 
 const rowConfig: Array<RcsbFvRowConfigInterface> = [{
         trackId: "sequenceTrack",
@@ -17,7 +16,7 @@ const rowConfig: Array<RcsbFvRowConfigInterface> = [{
         rowTitle: "1ASH SEQUENCE",
         trackData: [{
             begin: 1,
-            value: "ANKTRELCMKSLEHAKVDTSNEARQDGIDLYKHMFENYPPLRKYFKSREEYTAEDVQNDPFFAKQGQKILLACHVLCATYDDRETFNAYTRELLDRHARDHVHMPPEVWTDFWKLFEEYLGKKTTLDEPTKQAWHEIGREFAKEINKHGR"
+            label: "ANKTRELCMKSLEHAKVDTSNEARQDGIDLYKHMFENYPPLRKYFKSREEYTAEDVQNDPFFAKQGQKILLACHVLCATYDDRETFNAYTRELLDRHARDHVHMPPEVWTDFWKLFEEYLGKKTTLDEPTKQAWHEIGREFAKEINKHGR"
         }]
     },{
         trackId: "blockTrack",
@@ -32,7 +31,7 @@ const rowConfig: Array<RcsbFvRowConfigInterface> = [{
         }]
     }];
 
-export const fvConfig1: FeatureViewInterface = {
+export const fvConfig1: FeatureViewInterface<any, any> = {
     boardId:"1ash_board",
     boardConfig: {
         range: {
@@ -43,15 +42,15 @@ export const fvConfig1: FeatureViewInterface = {
         includeAxis: true
     },
     rowConfig: rowConfig,
-    sequenceSelectionChangeCallback: (plugin: StructureViewerPublicInterface, selectorManager: RcsbFvSelectorManager, sequenceRegion: Array<RcsbFvTrackDataElementInterface>) => {
-        selectorManager.clearSelection("select", {modelId:"structure_1", labelAsymId:"A"});
+    sequenceSelectionChangeCallback: (plugin: StructureViewerPublicInterface<any, any>, stateManager: RcsbFvStateInterface, sequenceRegion: Array<RcsbFvTrackDataElementInterface>) => {
+        stateManager.selectionState.clearSelection("select", {modelId:"structure_1", labelAsymId:"A"});
         if(sequenceRegion.length > 0) {
             const regions = sequenceRegion.map(r => ({
                 modelId: "structure_1",
                 labelAsymId: "A",
                 region: {begin: r.begin, end: r.end ?? r.begin, source: "sequence"} as RegionSelectionInterface
             }));
-            selectorManager.addSelectionFromMultipleRegions(regions, "select");
+            stateManager.selectionState.addSelectionFromMultipleRegions(regions, "select");
             plugin.select(regions.map(r => ({
                 ...r,
                 begin: r.region.begin,
@@ -62,11 +61,11 @@ export const fvConfig1: FeatureViewInterface = {
             plugin.resetCamera();
         }
     },
-    sequenceElementClickCallback: (plugin: StructureViewerPublicInterface, selectorManager: RcsbFvSelectorManager, d: RcsbFvTrackDataElementInterface) => {
+    sequenceElementClickCallback: (plugin: StructureViewerPublicInterface<any, any>, stateManager: RcsbFvStateInterface, d?: RcsbFvTrackDataElementInterface) => {
         if(d!=null)
             plugin.cameraFocus("structure_1", "A", d.begin, d.end ?? d.begin);
     },
-    sequenceHoverCallback: (plugin: StructureViewerPublicInterface, selectorManager: RcsbFvSelectorManager, elements: Array<RcsbFvTrackDataElementInterface>) => {
+    sequenceHoverCallback: (plugin: StructureViewerPublicInterface<any, any>, stateManager: RcsbFvStateInterface, elements: Array<RcsbFvTrackDataElementInterface>) => {
         if(elements == null || elements.length == 0)
             plugin.clearSelection("hover");
         else
@@ -77,8 +76,8 @@ export const fvConfig1: FeatureViewInterface = {
                 end: e.end ?? e.begin
             })), "hover", "set");
     },
-    structureSelectionCallback: (plugin: StructureViewerPublicInterface, pfv: RcsbFv, selection: RcsbFvSelectorManager) => {
-        const sel: SaguaroRegionList | undefined = selection.getSelectionWithCondition("structure_1", "A", "select");
+    structureSelectionCallback: (plugin: StructureViewerPublicInterface<any, any>, pfv: RcsbFv, stateManager: RcsbFvStateInterface) => {
+        const sel: SaguaroRegionList | undefined = stateManager.selectionState.getSelectionWithCondition("structure_1", "A", "select");
         if(sel == null) {
             pfv.clearSelection("select");
             plugin.resetCamera();
@@ -86,8 +85,8 @@ export const fvConfig1: FeatureViewInterface = {
             pfv.setSelection({elements: sel.regions, mode: "select"});
         }
     },
-    structureHoverCallback: (plugin: StructureViewerPublicInterface, pfv: RcsbFv, selection: RcsbFvSelectorManager) => {
-        const sel: SaguaroRegionList | undefined = selection.getSelectionWithCondition("structure_1", "A", "hover");
+    structureHoverCallback: (plugin: StructureViewerPublicInterface<any, any>, pfv: RcsbFv, stateManager: RcsbFvStateInterface) => {
+        const sel: SaguaroRegionList | undefined = stateManager.selectionState.getSelectionWithCondition("structure_1", "A", "hover");
         if(sel == null)
             pfv.clearSelection("hover");
         else
@@ -95,7 +94,7 @@ export const fvConfig1: FeatureViewInterface = {
     }
 }
 
-export const fvConfig2: FeatureViewInterface = {
+export const fvConfig2: FeatureViewInterface<any, any> = {
     boardId:"1ash_board_bis",
     boardConfig: {
         range: {
@@ -106,15 +105,15 @@ export const fvConfig2: FeatureViewInterface = {
         includeAxis: true
     },
     rowConfig: rowConfig,
-    sequenceSelectionChangeCallback: (plugin: StructureViewerPublicInterface, selectorManager: RcsbFvSelectorManager, sequenceRegion: Array<RcsbFvTrackDataElementInterface>) => {
-        selectorManager.clearSelection("select", {modelId:"structure_2", labelAsymId:"A"});
+    sequenceSelectionChangeCallback: (plugin: StructureViewerPublicInterface<any, any>, stateManager: RcsbFvStateInterface, sequenceRegion: Array<RcsbFvTrackDataElementInterface>) => {
+        stateManager.selectionState.clearSelection("select", {modelId:"structure_2", labelAsymId:"A"});
         if(sequenceRegion.length > 0) {
             const regions = sequenceRegion.map(r => ({
                 modelId: "structure_2",
                 labelAsymId: "A",
                 region: {begin: r.begin, end: r.end ?? r.begin, source: "sequence"} as RegionSelectionInterface
             }));
-            selectorManager.addSelectionFromMultipleRegions(regions, "select");
+            stateManager.selectionState.addSelectionFromMultipleRegions(regions, "select");
             plugin.select(regions.map(r => ({
                 ...r,
                 begin: r.region.begin,
@@ -125,11 +124,11 @@ export const fvConfig2: FeatureViewInterface = {
             plugin.resetCamera();
         }
     },
-    sequenceElementClickCallback: (plugin: StructureViewerPublicInterface, selectorManager: RcsbFvSelectorManager, d: RcsbFvTrackDataElementInterface) => {
+    sequenceElementClickCallback: (plugin: StructureViewerPublicInterface<any, any>, stateManager: RcsbFvStateInterface, d?: RcsbFvTrackDataElementInterface) => {
         if(d!=null)
             plugin.cameraFocus("structure_2", "A", d.begin, d.end ?? d.begin);
     },
-    sequenceHoverCallback: (plugin: StructureViewerPublicInterface, selectorManager: RcsbFvSelectorManager, elements: Array<RcsbFvTrackDataElementInterface>) => {
+    sequenceHoverCallback: (plugin: StructureViewerPublicInterface<any, any>, stateManager: RcsbFvStateInterface, elements: Array<RcsbFvTrackDataElementInterface>) => {
         if(elements == null || elements.length == 0)
             plugin.clearSelection("hover");
         else
@@ -140,8 +139,8 @@ export const fvConfig2: FeatureViewInterface = {
                 end: e.end ?? e.begin
             })), "hover", "set");
     },
-    structureSelectionCallback: (plugin: StructureViewerPublicInterface, pfv: RcsbFv, selection: RcsbFvSelectorManager) => {
-        const sel: SaguaroRegionList | undefined = selection.getSelectionWithCondition("structure_2", "A", "select");
+    structureSelectionCallback: (plugin: StructureViewerPublicInterface<any, any>, pfv: RcsbFv, stateManager: RcsbFvStateInterface) => {
+        const sel: SaguaroRegionList | undefined = stateManager.selectionState.getSelectionWithCondition("structure_2", "A", "select");
         if(sel == null) {
             pfv.clearSelection("select");
             plugin.resetCamera();
@@ -149,8 +148,8 @@ export const fvConfig2: FeatureViewInterface = {
             pfv.setSelection({elements: sel.regions, mode: "select"});
         }
     },
-    structureHoverCallback: (plugin: StructureViewerPublicInterface, pfv: RcsbFv, selection: RcsbFvSelectorManager) => {
-        const sel: SaguaroRegionList | undefined = selection.getSelectionWithCondition("structure_2", "A", "hover");
+    structureHoverCallback: (plugin: StructureViewerPublicInterface<any, any>, pfv: RcsbFv, stateManager: RcsbFvStateInterface) => {
+        const sel: SaguaroRegionList | undefined = stateManager.selectionState.getSelectionWithCondition("structure_2", "A", "hover");
         if(sel == null)
             pfv.clearSelection("hover");
         else

src/examples/external-mapping/TrajectoryPreset.ts

@@ -7,8 +7,6 @@ import {StateObjectSelector} from "molstar/lib/mol-state";
 import {PluginStateObject} from "molstar/lib/mol-plugin-state/objects";
 import {StateObject} from "molstar/lib/mol-state/object";
 import {StateTransformer} from "molstar/lib/mol-state/transformer";
-import {ParamDefinition} from "molstar/lib/mol-util/param-definition";
-import {PluginContext} from "molstar/lib/mol-plugin/context";
 
 type StructureObject = StateObjectSelector<PluginStateObject.Molecule.Structure, StateTransformer<StateObject<any, StateObject.Type<any>>, StateObject<any, StateObject.Type<any>>, any>>
 

src/examples/external-mapping/index.ts

@@ -13,12 +13,12 @@ import {
 } from "../../RcsbFvStructure/StructureViewers/MolstarViewer/MolstarActionManager";
 import {ViewerProps} from "@rcsb/rcsb-molstar/build/src/viewer";
 
-const block: FeatureBlockInterface<LoadMolstarInterface> = {
+const block: FeatureBlockInterface<LoadMolstarInterface<any,any>, any> = {
     blockId:"MyBlock_1",
     featureViewConfig: [fvConfig1, fvConfig2]
 };
 
-const customConfig: CustomViewInterface<LoadMolstarInterface> = {
+const customConfig: CustomViewInterface<LoadMolstarInterface<any,any>,any> = {
     blockConfig:[block]
 }
 
@@ -28,7 +28,7 @@ const sequenceConfig = {
     config: customConfig
 };
 
-const molstarConfig: RcsbFvStructureConfigInterface<LoadMolstarInterface,{viewerProps:Partial<ViewerProps>}> = {
+const molstarConfig: RcsbFvStructureConfigInterface<LoadMolstarInterface<any,any>,{viewerProps:Partial<ViewerProps>}> = {
     loadConfig: [{
         loadMethod: LoadMethod.loadPdbId,
         loadParams: {

src/examples/multiple-chain/index.tsx

@@ -5,13 +5,7 @@ import {
     CustomViewInterface,
     FeatureBlockInterface, FeatureViewInterface
 } from "../../RcsbFvSequence/SequenceViews/CustomView/CustomView";
-import * as React from "react";
-import {
-    RcsbFv,
-    RcsbFvDisplayTypes,
-    RcsbFvRowConfigInterface,
-    RcsbFvTrackDataElementInterface
-} from "@rcsb/rcsb-saguaro";
+
 import {
     RegionSelectionInterface
 } from "../../RcsbFvState/RcsbFvSelectorManager";
@@ -24,6 +18,10 @@ import {
 } from "../../RcsbFvStructure/StructureViewers/MolstarViewer/MolstarActionManager";
 import {ViewerProps} from "@rcsb/rcsb-molstar/build/src/viewer";
 import {RcsbFvStateManager} from "../../RcsbFvState/RcsbFvStateManager";
+import { RcsbFvRowConfigInterface } from "@rcsb/rcsb-saguaro/lib/RcsbFv/RcsbFvConfig/RcsbFvConfigInterface";
+import {RcsbFvDisplayTypes} from "@rcsb/rcsb-saguaro/lib/RcsbFv/RcsbFvConfig/RcsbFvDefaultConfigValues";
+import {RcsbFvTrackDataElementInterface} from "@rcsb/rcsb-saguaro/lib/RcsbDataManager/RcsbDataManager";
+import {RcsbFv} from "@rcsb/rcsb-saguaro/lib/RcsbFv/RcsbFv";
 
 const rowConfigChainA: Array<RcsbFvRowConfigInterface> = [
     {
@@ -36,7 +34,7 @@ const rowConfigChainA: Array<RcsbFvRowConfigInterface> = [
         trackData: [
             {
                 begin: 1,
-                value: "CGVPAIQPVLSGLSRIVNGEEAVPGSWPWQVSLQDKTGFHFCGGSLINENWVVTAAHCGVTTSDVVVAGEFDQGSSSEKIQKLKIAKVFKNSKYNSLTINNDITLLKLSTAASFSQTVSAVCLPSASDDFAAGTTCVTTGWGLTRYTNANTPDRLQQASLPLLSNTNCKKYWGTKIKDAMICAGASGVSSCMGDSGGPLVCKKNGAWTLVGIVSWGSSTCSTSTPGVYARVTALVNWVQQTLAAN"
+                label: "CGVPAIQPVLSGLSRIVNGEEAVPGSWPWQVSLQDKTGFHFCGGSLINENWVVTAAHCGVTTSDVVVAGEFDQGSSSEKIQKLKIAKVFKNSKYNSLTINNDITLLKLSTAASFSQTVSAVCLPSASDDFAAGTTCVTTGWGLTRYTNANTPDRLQQASLPLLSNTNCKKYWGTKIKDAMICAGASGVSSCMGDSGGPLVCKKNGAWTLVGIVSWGSSTCSTSTPGVYARVTALVNWVQQTLAAN"
             }
         ]
     },{
@@ -67,7 +65,7 @@ const rowConfigChainB: Array<RcsbFvRowConfigInterface> = [
         trackData: [
             {
                 begin: 1,
-                value: "TEFGSELKSFPEVVGKTVDQAREYFTLHYPQYDVYFLPEGSPVTLDLRYNRVRVFYNPGTNVVNHVPHVG"
+                label: "TEFGSELKSFPEVVGKTVDQAREYFTLHYPQYDVYFLPEGSPVTLDLRYNRVRVFYNPGTNVVNHVPHVG"
             }
         ]
     },{
@@ -114,8 +112,8 @@ const fvConfigChainA: FeatureViewInterface<LoadMolstarInterface<unknown,unknown>
             plugin.resetCamera();
         }
     },
-    sequenceElementClickCallback: (plugin: StructureViewerPublicInterface<LoadMolstarInterface<unknown,unknown>,LoadMolstarReturnType>, stateManager: RcsbFvStateManager, d: RcsbFvTrackDataElementInterface) => {
-        if(d!=null)
+    sequenceElementClickCallback: (plugin: StructureViewerPublicInterface<LoadMolstarInterface<unknown,unknown>,LoadMolstarReturnType>, stateManager: RcsbFvStateManager, d?: RcsbFvTrackDataElementInterface) => {
+        if(d)
             plugin.cameraFocus("1acb_board", "A", d.begin, d.end ?? d.begin);
     },
     sequenceHoverCallback: (plugin: StructureViewerPublicInterface<LoadMolstarInterface<unknown,unknown>,LoadMolstarReturnType>, stateManager: RcsbFvStateManager, elements: Array<RcsbFvTrackDataElementInterface>) => {
@@ -177,8 +175,8 @@ const fvConfigChainB: FeatureViewInterface<LoadMolstarInterface<unknown,unknown>
             plugin.resetCamera();
         }
     },
-    sequenceElementClickCallback: (plugin: StructureViewerPublicInterface<LoadMolstarInterface<unknown,unknown>,LoadMolstarReturnType>, stateManager: RcsbFvStateManager, d: RcsbFvTrackDataElementInterface) => {
-        if(d!=null)
+    sequenceElementClickCallback: (plugin: StructureViewerPublicInterface<LoadMolstarInterface<unknown,unknown>,LoadMolstarReturnType>, stateManager: RcsbFvStateManager, d?: RcsbFvTrackDataElementInterface) => {
+        if(d)
             plugin.cameraFocus("1acb_board", "B", d.begin, d.end ?? d.begin);
     },
     sequenceHoverCallback: (plugin: StructureViewerPublicInterface<LoadMolstarInterface<unknown,unknown>,LoadMolstarReturnType>, stateManager: RcsbFvStateManager, elements: Array<RcsbFvTrackDataElementInterface>) => {

src/examples/single-chain/index.ts

@@ -4,15 +4,8 @@ import {
     CustomViewInterface,
     FeatureBlockInterface, FeatureViewInterface
 } from "../../RcsbFvSequence/SequenceViews/CustomView/CustomView";
-import * as React from "react";
+;
 import {
-    RcsbFv,
-    RcsbFvDisplayTypes,
-    RcsbFvRowConfigInterface,
-    RcsbFvTrackDataElementInterface
-} from "@rcsb/rcsb-saguaro";
-import {
-    RcsbFvSelectorManager,
     RegionSelectionInterface
 } from "../../RcsbFvState/RcsbFvSelectorManager";
 import {
@@ -24,6 +17,10 @@ import {
 } from "../../RcsbFvStructure/StructureViewers/MolstarViewer/MolstarActionManager";
 import {ViewerProps} from "@rcsb/rcsb-molstar/build/src/viewer";
 import {RcsbFvStateManager} from "../../RcsbFvState/RcsbFvStateManager";
+import {RcsbFvRowConfigInterface} from "@rcsb/rcsb-saguaro/lib/RcsbFv/RcsbFvConfig/RcsbFvConfigInterface";
+import {RcsbFvDisplayTypes} from "@rcsb/rcsb-saguaro/lib/RcsbFv/RcsbFvConfig/RcsbFvDefaultConfigValues";
+import {RcsbFvTrackDataElementInterface} from "@rcsb/rcsb-saguaro/lib/RcsbDataManager/RcsbDataManager";
+import {RcsbFv} from "@rcsb/rcsb-saguaro/lib/RcsbFv/RcsbFv";
 
 const rowConfig: Array<RcsbFvRowConfigInterface> = [
     {
@@ -36,7 +33,7 @@ const rowConfig: Array<RcsbFvRowConfigInterface> = [
         trackData: [
             {
                 begin: 1,
-                value: "ANKTRELCMKSLEHAKVDTSNEARQDGIDLYKHMFENYPPLRKYFKSREEYTAEDVQNDPFFAKQGQKILLACHVLCATYDDRETFNAYTRELLDRHARDHVHMPPEVWTDFWKLFEEYLGKKTTLDEPTKQAWHEIGREFAKEINKHGR"
+                label: "ANKTRELCMKSLEHAKVDTSNEARQDGIDLYKHMFENYPPLRKYFKSREEYTAEDVQNDPFFAKQGQKILLACHVLCATYDDRETFNAYTRELLDRHARDHVHMPPEVWTDFWKLFEEYLGKKTTLDEPTKQAWHEIGREFAKEINKHGR"
             }
         ]
     },{
@@ -83,8 +80,8 @@ const fvConfig: FeatureViewInterface<LoadMolstarInterface<unknown,unknown>,LoadM
             plugin.resetCamera();
         }
     },
-    sequenceElementClickCallback: (plugin: StructureViewerPublicInterface<LoadMolstarInterface<unknown,unknown>,LoadMolstarReturnType>, stateManager: RcsbFvStateManager, d: RcsbFvTrackDataElementInterface) => {
-        if(d!=null)
+    sequenceElementClickCallback: (plugin: StructureViewerPublicInterface<LoadMolstarInterface<unknown,unknown>,LoadMolstarReturnType>, stateManager: RcsbFvStateManager, d?: RcsbFvTrackDataElementInterface) => {
+        if(d)
             plugin.cameraFocus("1ash_model", "A", d.begin, d.end ?? d.begin);
     },
     sequenceHoverCallback: (plugin: StructureViewerPublicInterface<LoadMolstarInterface<unknown,unknown>,LoadMolstarReturnType>, stateManager: RcsbFvStateManager, elements: Array<RcsbFvTrackDataElementInterface>) => {

src/examples/structural-alignment/index.ts

@@ -5,12 +5,7 @@ import {
     FeatureBlockInterface,
     FeatureViewInterface
 } from "../../RcsbFvSequence/SequenceViews/CustomView/CustomView";
-import {
-    RcsbFv,
-    RcsbFvDisplayTypes,
-    RcsbFvRowConfigInterface,
-    RcsbFvTrackDataElementInterface
-} from "@rcsb/rcsb-saguaro";
+
 import {RegionSelectionInterface} from "../../RcsbFvState/RcsbFvSelectorManager";
 import {SaguaroRegionList, StructureViewerPublicInterface} from "../../RcsbFvStructure/StructureViewerInterface";
 import {AlignmentManager} from "./AlignmentManager";
@@ -21,6 +16,10 @@ import {
 } from "../../RcsbFvStructure/StructureViewers/MolstarViewer/MolstarActionManager";
 import {ViewerProps} from "@rcsb/rcsb-molstar/build/src/viewer";
 import {RcsbFvStateManager} from "../../RcsbFvState/RcsbFvStateManager";
+import {RcsbFvRowConfigInterface} from "@rcsb/rcsb-saguaro/lib/RcsbFv/RcsbFvConfig/RcsbFvConfigInterface";
+import {RcsbFvDisplayTypes} from "@rcsb/rcsb-saguaro/lib/RcsbFv/RcsbFvConfig/RcsbFvDefaultConfigValues";
+import {RcsbFvTrackDataElementInterface} from "@rcsb/rcsb-saguaro/lib/RcsbDataManager/RcsbDataManager";
+import {RcsbFv} from "@rcsb/rcsb-saguaro/lib/RcsbFv/RcsbFv";
 
 const sequence_101m: string = "MVLSEGEWQLVLHVWAKVEADVAGHGQDILIRLFKSHPETLEKFDRVKHLKTEAEMKASEDLKKHGVTVLTALGAILKKKGHHEAELKPLAQSHATKHKIPIKYLEFISEAIIHVLHSRHPGNFGADAQGAMNKALELFRKDIAAKYKELGYQG";
 const alignment = [{
@@ -67,7 +66,7 @@ const rowConfig: Array<RcsbFvRowConfigInterface> = [
         rowTitle: "1ASH SEQUENCE",
         trackData: [{
             begin: 1,
-            value: "ANKTRELCMKSLEHAKVDTSNEARQDGIDLYKHMFENYPPLRKYFKSREEYTAEDVQNDPFFAKQGQKILLACHVLCATYDDRETFNAYTRELLDRHARDHVHMPPEVWTDFWKLFEEYLGKKTTLDEPTKQAWHEIGREFAKEINKHGR"
+            label: "ANKTRELCMKSLEHAKVDTSNEARQDGIDLYKHMFENYPPLRKYFKSREEYTAEDVQNDPFFAKQGQKILLACHVLCATYDDRETFNAYTRELLDRHARDHVHMPPEVWTDFWKLFEEYLGKKTTLDEPTKQAWHEIGREFAKEINKHGR"
         }]
     },{
         trackId: "blockTrack",
@@ -91,7 +90,7 @@ const rowConfig: Array<RcsbFvRowConfigInterface> = [
             displayId: "alignmentSequence",
             displayData: alignment.map(a=>({
                 begin:a.query_begin,
-                value: sequence_101m.substring(a.target_begin-1,a.target_end)
+                label: sequence_101m.substring(a.target_begin-1,a.target_end)
             }))
         }]
     }
@@ -137,9 +136,10 @@ const fvConfig: FeatureViewInterface<LoadMolstarInterface<unknown,unknown>,LoadM
             plugin.resetCamera();
         }
     },
-    sequenceElementClickCallback: async (plugin: StructureViewerPublicInterface<LoadMolstarInterface<unknown,unknown>,LoadMolstarReturnType>, stateManager: RcsbFvStateManager, d: RcsbFvTrackDataElementInterface) => {
+    sequenceElementClickCallback: async (plugin: StructureViewerPublicInterface<LoadMolstarInterface<unknown,unknown>,LoadMolstarReturnType>, stateManager: RcsbFvStateManager, d?: RcsbFvTrackDataElementInterface) => {
         plugin.removeComponent("1ash_component");
         plugin.removeComponent("101m_component");
+        if(!d) return;
         if(d.begin === d.end || !d.end){
             await plugin.createComponent("1ash_component", "1ash_model", "A", d.begin, d.begin, "ball-and-stick");
             await plugin.createComponent("101m_component", "101m_model", "A", alignmentManager.getTargetPosition(d.begin)!, alignmentManager.getTargetPosition(d.begin)!, "ball-and-stick");

src/scss/RcsbFvMolstarStyle.module.scss

@@ -0,0 +1,11 @@
+@use '@rcsb/rcsb-molstar/build/dist/viewer/rcsb-molstar';
+
+.msp-semi-transparent-background {
+    opacity: 0.8 !important;
+}
+
+.msp-layout-expanded {
+    z-index: 3000;
+}
+
+

src/styles/RcsbFvMolstarStyle.module.scss

@@ -1,42 +0,0 @@
-$default-background:         lighten(#325880, 60%);
-$font-color:                 #333333;
-$hover-font-color:           #325880;
-$entity-current-font-color:  #ccd4e0;
-$msp-btn-remove-background:      #BF3A31;
-$msp-btn-remove-hover-font-color:#BF3A31;
-$msp-btn-commit-on-font-color:   #325880;
-$entity-badge-font-color:    #ccd4e0;
-
-// used in LOG
-$log-message:          #0CCA5D;
-$log-info:             #5E3673;
-$log-warning:          #FCC937;
-$log-error:            #FD354B;
-
-$logo-background: lighten(#325880, 60%);
-
-@function color-lower-contrast($color, $amount) {
-@return lighten($color, $amount);
-}
-
-@function color-increase-contrast($color, $amount) {
-@return darken($color, $amount);
-}
-
-.msp-semi-transparent-background {
-    opacity: 0.8 !important;
-}
-
-.msp-layout-expanded {
-    z-index: 3000;
-}
-
-/*.msp-plugin {
-    border: 1px solid rgb(255,255,255) !important;
-}
-
-.msp-layout-standard {
-    border: 1px solid rgb(255,255,255) !important;
-}*/
-
-@import 'molstar/lib/mol-plugin-ui/skin/base/base';

tsconfig.commonjs.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "declaration": true,
+    "target": "es6",
+    "alwaysStrict": true,
+    "noImplicitAny": true,
+    "noImplicitThis": true,
+    "sourceMap": false,
+    "noUnusedLocals": true,
+    "strictNullChecks": true,
+    "strictFunctionTypes": true,
+    "module": "CommonJS",
+    "esModuleInterop": true,
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "noEmitHelpers": true,
+    "allowSyntheticDefaultImports": true,
+    "jsx": "react-jsx",
+    "lib": [ "dom", "es2020"  ],
+    "rootDir": "src",
+    "outDir": "lib/commonjs"
+  },
+  "include": [ "src" ]
+}

tsconfig.json

@@ -1,23 +1,24 @@
 {
   "compilerOptions": {
-    "outDir": "./lib",
-    "noImplicitAny": true,
-    "target": "es2015",
-    "module": "commonjs",
-    "jsx": "react",
-    "lib": [ "es6", "dom", "esnext.asynciterable", "es2016"  ],
-    "allowJs": true,
     "declaration": true,
+    "target": "es6",
+    "alwaysStrict": true,
+    "noImplicitAny": true,
+    "noImplicitThis": true,
     "sourceMap": false,
-    // "noUnusedLocals": true,
+    "noUnusedLocals": true,
     "strictNullChecks": true,
-    "declarationDir": "./lib",
+    "strictFunctionTypes": true,
+    "module": "esnext",
     "esModuleInterop": true,
-    "skipLibCheck": true
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "noEmitHelpers": true,
+    "allowSyntheticDefaultImports": true,
+    "jsx": "react-jsx",
+    "lib": [ "dom", "es2020"  ],
+    "rootDir": "src",
+    "outDir": "lib"
   },
-  "include": [ "src/*", "src/**/*", "src/**/**/*", "src/**/**/**/*" ],
-  "exclude": [
-    "node_modules",
-    "src/examples"
-  ]
+  "include": [ "src" ]
 }

webpack.config.js

@@ -9,29 +9,39 @@ const commonConfig = {
                   loader: 'file-loader',
                   options: { name: '[name].[ext]' }
               }]
-          },
-        {
-          test: /\.scss$/,
-          use: [
-              'style-loader',
-              {
-                  loader: 'css-loader',
-                  options: {
-                      modules: {
-                          localIdentName:'[local]'
-                      }
-                  }
-              },
-              'sass-loader'
-          ]
-        }
+          },{
+              test: /\.(graphql|gql)$/,
+              loader: 'raw-loader'
+          },{
+              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]'
+                    }
+                }
+            }, {
+                loader: 'resolve-url-loader'
+            }, {
+                loader: 'sass-loader',
+                options: {
+                    sourceMap: true
+                }
+            }]
+          }
       ]
     },
     resolve: {
-        modules: [
-            'node_modules',
-            path.resolve(__dirname, 'lib/')
-        ],
+        extensions: [ '.tsx', '.ts', '.js', '.jsx' ],
         fallback: {
             fs: false,
             buffer: require.resolve('buffer'),
@@ -53,9 +63,9 @@ const appConfig = {
         library: 'RcsbFv3D',
         libraryTarget: 'umd',
         umdNamedDefine: true,
-        path: path.resolve(__dirname, 'build/dist')
-    }
-    //, devtool: 'source-map'
+        path: path.resolve(__dirname, 'build')
+    },
+    devtool: 'source-map'
 }
 
 module.exports = [appConfig];

webpack.server.dev.config.js

@@ -2,32 +2,47 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
 const fs = require('fs')
 
 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]'
-                        }
+      rules: [
+          {
+              test: /\.(html|ico)$/,
+              use: [{
+                  loader: 'file-loader',
+                  options: { name: '[name].[ext]' }
+              }]
+          },{
+              test: /\.(graphql|gql)$/,
+              loader: 'raw-loader'
+          },{
+              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/
-            }
-        ]
+                }
+            }, {
+                loader: 'resolve-url-loader'
+            }, {
+                loader: 'sass-loader',
+                options: {
+                    sourceMap: true
+                }
+            }]
+          }
+      ]
     },
     resolve: {
-        extensions: [ '.tsx', '.ts', '.js', 'jsx' ],
+        extensions: [ '.tsx', '.ts', '.js', '.jsx' ],
         fallback: {
             fs: false,
             buffer: require.resolve('buffer'),
@@ -35,8 +50,7 @@ const commonConfig = {
             path: require.resolve('path-browserify'),
             stream: require.resolve('stream-browserify')
         }
-    },
-    devtool: 'source-map'
+    }
 };
 
 const examples = ['assembly','uniprot','structural-alignment','sequence-identity','single-chain','multiple-chain','alignment-provider'];
@@ -57,7 +71,9 @@ const server = {
         template:'./src/examples/html-template/index.html',
         inject: true,
         chunks:[key]
-    }))
+    })),
+    mode: "development",
+    devtool: 'source-map'
 }
 
 module.exports = [server];