exposing additionalComponent

package-lock.json

@@ -1,18 +1,18 @@
 {
   "name": "@rcsb/rcsb-saguaro-3d",
-  "version": "2.4.0-data-provider.1",
+  "version": "2.4.0-data-provider.3",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@rcsb/rcsb-saguaro-3d",
-      "version": "2.4.0-data-provider.1",
+      "version": "2.4.0-data-provider.3",
       "license": "MIT",
       "dependencies": {
         "@rcsb/rcsb-api-tools": "^4.1.1",
         "@rcsb/rcsb-molstar": "^2.5.11",
         "@rcsb/rcsb-saguaro": "^2.5.5",
-        "@rcsb/rcsb-saguaro-app": "^4.6.0-data-provider.8",
+        "@rcsb/rcsb-saguaro-app": "^4.6.0-data-provider.9",
         "http-server": "^14.1.1",
         "molstar": "^3.29.0"
       },
@@ -2855,9 +2855,9 @@
       }
     },
     "node_modules/@rcsb/rcsb-saguaro-app": {
-      "version": "4.6.0-data-provider.8",
-      "resolved": "https://registry.npmjs.org/@rcsb/rcsb-saguaro-app/-/rcsb-saguaro-app-4.6.0-data-provider.8.tgz",
-      "integrity": "sha512-aP3nF65Ue8uJJnB346WCT/a0cySRPWxLLNFPb4AXalfCefLAQLsfTqvZwDrHGLneU1LNnmQYxUjCnYKNT3LDMQ==",
+      "version": "4.6.0-data-provider.9",
+      "resolved": "https://registry.npmjs.org/@rcsb/rcsb-saguaro-app/-/rcsb-saguaro-app-4.6.0-data-provider.9.tgz",
+      "integrity": "sha512-nd5mzuy5hDrtPctXkrzOb+Q3YijBiqKjAfAZihV3/nACTQgmpmIopYHGkjBIynwFqosQ4wGg5vr4Ze8GF9YEPQ==",
       "dependencies": {
         "@rcsb/rcsb-api-tools": "^4.1.1",
         "@rcsb/rcsb-charts": "^0.0.1",
@@ -14428,9 +14428,9 @@
       }
     },
     "@rcsb/rcsb-saguaro-app": {
-      "version": "4.6.0-data-provider.8",
-      "resolved": "https://registry.npmjs.org/@rcsb/rcsb-saguaro-app/-/rcsb-saguaro-app-4.6.0-data-provider.8.tgz",
-      "integrity": "sha512-aP3nF65Ue8uJJnB346WCT/a0cySRPWxLLNFPb4AXalfCefLAQLsfTqvZwDrHGLneU1LNnmQYxUjCnYKNT3LDMQ==",
+      "version": "4.6.0-data-provider.9",
+      "resolved": "https://registry.npmjs.org/@rcsb/rcsb-saguaro-app/-/rcsb-saguaro-app-4.6.0-data-provider.9.tgz",
+      "integrity": "sha512-nd5mzuy5hDrtPctXkrzOb+Q3YijBiqKjAfAZihV3/nACTQgmpmIopYHGkjBIynwFqosQ4wGg5vr4Ze8GF9YEPQ==",
       "requires": {
         "@rcsb/rcsb-api-tools": "^4.1.1",
         "@rcsb/rcsb-charts": "^0.0.1",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rcsb/rcsb-saguaro-3d",
-  "version": "2.4.0-data-provider.3",
+  "version": "2.4.0-data-provider.4",
   "description": "RCSB Molstar/Saguaro Web App",
   "main": "build/dist/app.js",
   "files": [
@@ -86,7 +86,7 @@
     "@rcsb/rcsb-api-tools": "^4.1.1",
     "@rcsb/rcsb-molstar": "^2.5.11",
     "@rcsb/rcsb-saguaro": "^2.5.5",
-    "@rcsb/rcsb-saguaro-app": "^4.6.0-data-provider.8",
+    "@rcsb/rcsb-saguaro-app": "^4.6.0-data-provider.9",
     "http-server": "^14.1.1",
     "molstar": "^3.29.0"
   },

src/RcsbFv3D/RcsbFv3DAbstract.tsx

@@ -8,6 +8,7 @@ import {PluginContext} from "molstar/lib/mol-plugin/context";
 import {CSSProperties} from "react";
 import {StructureViewerInterface} from "../RcsbFvStructure/StructureViewerInterface";
 import {StructureViewerBehaviourObserverInterface} from "../RcsbFvStructure/StructureViewerBehaviourInterface";
+import {AbstractViewInterface} from "../RcsbFvSequence/SequenceViews/AbstractView";
 
 export interface RcsbFv3DAbstractInterface<T,R,L,S,U> {
     elementId: string;
@@ -16,6 +17,7 @@ export interface RcsbFv3DAbstractInterface<T,R,L,S,U> {
     structureConfig: RcsbFvStructureConfigInterface<R,S>;
     structureViewer: StructureViewerInterface<R,L,S>;
     structureViewerBehaviourObserver: StructureViewerBehaviourObserverInterface<R,L>;
+    additionalContent?(props: AbstractViewInterface): JSX.Element;
 }
 
 export abstract class RcsbFv3DAbstract<T,R,L,S,U> {
@@ -46,7 +48,7 @@ export abstract class RcsbFv3DAbstract<T,R,L,S,U> {
 
     public render(): void{
         if(this.elementId == null )
-            throw "HTML element not found";
+            throw new Error("HTML element not found");
         const element: HTMLElement = document.getElementById(this.elementId) ?? document.createElement<"div">("div");
         if(element.getAttribute("id") == null) {
             element.setAttribute("id", this.elementId);

src/RcsbFv3D/RcsbFv3DAlignmentProvider.tsx

@@ -45,6 +45,7 @@ import {
 } from "../RcsbFvStructure/StructureViewers/MolstarViewer/MolstarUtils/MolstarComponentAction";
 import {MolstarTools} from "../RcsbFvStructure/StructureViewers/MolstarViewer/MolstarUtils/MolstarTools";
 import getModelIdFromTrajectory = MolstarTools.getModelIdFromTrajectory;
+import {AbstractViewInterface} from "../RcsbFvSequence/SequenceViews/AbstractView";
 
 export interface RcsbFv3DDataProviderInterface  {
     elementId?: string;
@@ -54,6 +55,7 @@ export interface RcsbFv3DDataProviderInterface  {
         structureLocationProvider?: LocationProviderInterface;
         title?: string;
         subtitle?: string;
+        additionalContent?(props: AbstractViewInterface): JSX.Element;
     };
     additionalConfig?:RcsbFvAdditionalConfig;
     molstarProps?: Partial<ViewerProps>;
@@ -92,7 +94,7 @@ export class RcsbFv3DAlignmentProvider extends RcsbFv3DAbstract<
                         pluginLoadParamsDefinition,
                         alignmentResponseContainer
                     }),
-                    additionalContent:(props)=>(<HelpLinkComponent {...props} helpHref={"/docs/grouping-structures/groups-1d-3d-alignment"}/>)
+                    additionalContent: params.config.additionalContent ?? ((props)=>(<HelpLinkComponent {...props} helpHref={"/docs/grouping-structures/groups-1d-3d-alignment"}/>))
                 }
             },
             structureConfig: {

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

@@ -63,10 +63,11 @@ export class MsaRowTitleComponent extends React.Component <MsaRowTitleInterface,
                            msUserSelect:"none",
                            color: this.state.titleColor,
                            cursor: this.state.blocked ? "wait" : "pointer",
-                           maxWidth:100,
+                           maxWidth: (this.configData.rowTitleWidth ?? 190) - 60,
                            overflow: "hidden",
                            textOverflow: "ellipsis",
-                           whiteSpace: "nowrap"
+                           whiteSpace: "nowrap",
+                           textAlign: "right"
                        }}
                        onClick={(e: MouseEvent)=>this.click(e)}
                        title={this.props.targetAlignment.target_id ?? undefined}
@@ -74,7 +75,7 @@ export class MsaRowTitleComponent extends React.Component <MsaRowTitleInterface,
                        {this.props.targetAlignment.target_id}
                    </div>
                </div>
-               <div  style={{cursor: this.cursor()}} onClick={(e: MouseEvent)=>this.altClick(e)} >
+               <div  style={{cursor: this.cursor(), width:39}} onClick={(e: MouseEvent)=>this.altClick(e)} >
                    <MsaRowTitleCheckboxComponent disabled={this.state.disabled} {...TagDelimiter.parseEntityOrInstance(this.props.targetAlignment.target_id!)} tag={"aligned"} stateManager={this.props.stateManager}/>
                    <MsaRowTitleCheckboxComponent disabled={this.state.disabled} {...TagDelimiter.parseEntityOrInstance(this.props.targetAlignment.target_id!)} tag={"polymer"} stateManager={this.props.stateManager}/>
                    <MsaRowTitleCheckboxComponent disabled={this.state.disabled} {...TagDelimiter.parseEntityOrInstance(this.props.targetAlignment.target_id!)} tag={"non-polymer"} stateManager={this.props.stateManager}/>

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

@@ -75,29 +75,32 @@ class MsaPfvManager<T extends any[]> extends AbstractPfvManager<{id:string},{con
             },
             trackConfigModifier: {
                 alignment: (alignmentContext: AlignmentRequestContextType, targetAlignment: TargetAlignment) => new Promise((resolve)=>{
-                    resolve({
-                        rowMark:{
-                            externalRowMark: {
-                                component:MsaRowMarkComponent,
-                                props:{
-                                    rowRef:TagDelimiter.parseEntityOrInstance(targetAlignment.target_id!),
-                                    stateManager: this.stateManager
+                    this.additionalConfig?.trackConfigModifier?.alignment?.(alignmentContext, targetAlignment).then((rc)=>{
+                        resolve({
+                            ...rc,
+                            rowMark:{
+                                externalRowMark: {
+                                    component:MsaRowMarkComponent,
+                                    props:{
+                                        rowRef:TagDelimiter.parseEntityOrInstance(targetAlignment.target_id!),
+                                        stateManager: this.stateManager
+                                    }
+                                },
+                                clickCallback:() => this.loadAlignment(alignmentContext,targetAlignment)
+                            },
+                            externalRowTitle: {
+                                rowTitleComponent:MsaRowTitleComponent,
+                                rowTitleAdditionalProps:{
+                                    alignmentContext,
+                                    targetAlignment,
+                                    stateManager: this.stateManager,
+                                    titleClick: ()=> this.loadAlignment(alignmentContext,targetAlignment)
                                 }
                             },
-                            clickCallback:() => this.loadAlignment(alignmentContext,targetAlignment)
-                        },
-                        externalRowTitle: {
-                            rowTitleComponent:MsaRowTitleComponent,
-                            rowTitleAdditionalProps:{
-                                alignmentContext,
-                                targetAlignment,
-                                stateManager: this.stateManager,
-                                titleClick: ()=> this.loadAlignment(alignmentContext,targetAlignment)
+                            metadata:{
+                                targetId:targetAlignment.target_id
                             }
-                        },
-                        metadata:{
-                            targetId:targetAlignment.target_id
-                        }
+                        });
                     });
                 })
             },

src/RcsbFvSequence/SequenceViews/RcsbView/RcsbView.tsx

@@ -14,7 +14,6 @@ import {
     CallbackManagerFactoryInterface,
     CallbackManagerInterface
 } from "./CallbackManagerFactoryInterface";
-import {RcsbFvStateInterface} from "../../../RcsbFvState/RcsbFvStateInterface";
 
 export interface RcsbViewInterface<T,U> {
     rcsbId: string;
@@ -59,15 +58,12 @@ export class RcsbView<T,U> extends AbstractView<RcsbViewInterface<T,U>, {}>{
 
     async componentDidMount (): Promise<void> {
         super.componentDidMount();
-        const width: number | undefined = document.getElementById(this.componentDivId)?.getBoundingClientRect().width;
-        if(width == null)
-            return;
-        const trackWidth: number = width - 190 - 55;
+        const trackWidth: number = this.getwidth();
         this.boardConfigContainer.set({
-            ...this.props.additionalConfig?.boardConfig,
             trackWidth: trackWidth,
             highlightHoverPosition:true,
             highlightHoverElement:true,
+            ...this.props.additionalConfig?.boardConfig,
             elementClickCallBack:(e:RcsbFvTrackDataElementInterface)=>{
                 this.elementClickCallback(e);
                 if(typeof this.props.additionalConfig?.boardConfig?.elementClickCallBack === "function")
@@ -106,8 +102,7 @@ export class RcsbView<T,U> extends AbstractView<RcsbViewInterface<T,U>, {}>{
     }
 
     async updateDimensions(): Promise<void> {
-        const width: number = window.document.getElementById(this.componentDivId)?.getBoundingClientRect().width ?? 0;
-        const trackWidth: number = width - 190 - 55;
+        const trackWidth: number = this.getwidth();
         this.boardConfigContainer.set({...this.boardConfigContainer.get(), trackWidth});
         const select = this.rcsbFvContainer.get()?.getFv().getSelection("select");
         const dom = this.rcsbFvContainer.get()?.getFv().getDomain();
@@ -145,4 +140,9 @@ export class RcsbView<T,U> extends AbstractView<RcsbViewInterface<T,U>, {}>{
         this.callbackManager.featureClickCallback(e);
     }
 
+    private getwidth(): number {
+        const width: number = window.document.getElementById(this.componentDivId)?.getBoundingClientRect().width ?? 0;
+        return width - (this.props.additionalConfig?.boardConfig?.rowTitleWidth ?? 190) - (this.props.additionalConfig?.boardConfig?.disableMenu ? 10 : 55);
+    }
+
 }

src/examples/alignment-provider/index.ts

@@ -10,6 +10,11 @@ document.addEventListener("DOMContentLoaded", function(event) {
             structureLocationProvider: structureLocationProvider,
             title: "Title >> Alignment Provider",
             subtitle: "Subtitle >> Alignment Provider"
+        },
+        additionalConfig: {
+            boardConfig: {
+                rowTitleWidth: 100
+            }
         }
     });
     panel3D.render();

src/examples/multiple-chain/index.tsx

@@ -84,7 +84,7 @@ const rowConfigChainB: Array<RcsbFvRowConfigInterface> = [
     }
 ];
 
-const fvConfigChainA: FeatureViewInterface<LoadMolstarInterface<undefined,undefined>,LoadMolstarReturnType> = {
+const fvConfigChainA: FeatureViewInterface<LoadMolstarInterface<unknown,unknown>,LoadMolstarReturnType> = {
     boardId:"1acb.A_board",
     boardConfig: {
         range: {
@@ -95,7 +95,7 @@ const fvConfigChainA: FeatureViewInterface<LoadMolstarInterface<undefined,undefi
         includeAxis: true
     },
     rowConfig: rowConfigChainA,
-    sequenceSelectionChangeCallback: (plugin: StructureViewerPublicInterface<LoadMolstarInterface<undefined,undefined>,LoadMolstarReturnType>, stateManager: RcsbFvStateManager, sequenceRegion: Array<RcsbFvTrackDataElementInterface>) => {
+    sequenceSelectionChangeCallback: (plugin: StructureViewerPublicInterface<LoadMolstarInterface<unknown,unknown>,LoadMolstarReturnType>, stateManager: RcsbFvStateManager, sequenceRegion: Array<RcsbFvTrackDataElementInterface>) => {
         stateManager.selectionState.clearSelection("select", {modelId:"1acb_board", labelAsymId:"A"});
         plugin.clearSelection("select", {modelId: "1acb_board", labelAsymId: "A"})
         if(sequenceRegion.length > 0) {
@@ -114,11 +114,11 @@ const fvConfigChainA: FeatureViewInterface<LoadMolstarInterface<undefined,undefi
             plugin.resetCamera();
         }
     },
-    sequenceElementClickCallback: (plugin: StructureViewerPublicInterface<LoadMolstarInterface<undefined,undefined>,LoadMolstarReturnType>, stateManager: RcsbFvStateManager, d: RcsbFvTrackDataElementInterface) => {
+    sequenceElementClickCallback: (plugin: StructureViewerPublicInterface<LoadMolstarInterface<unknown,unknown>,LoadMolstarReturnType>, stateManager: RcsbFvStateManager, d: RcsbFvTrackDataElementInterface) => {
         if(d!=null)
             plugin.cameraFocus("1acb_board", "A", d.begin, d.end ?? d.begin);
     },
-    sequenceHoverCallback: (plugin: StructureViewerPublicInterface<LoadMolstarInterface<undefined,undefined>,LoadMolstarReturnType>, stateManager: RcsbFvStateManager, elements: Array<RcsbFvTrackDataElementInterface>) => {
+    sequenceHoverCallback: (plugin: StructureViewerPublicInterface<LoadMolstarInterface<unknown,unknown>,LoadMolstarReturnType>, stateManager: RcsbFvStateManager, elements: Array<RcsbFvTrackDataElementInterface>) => {
         if(elements == null || elements.length == 0)
             plugin.clearSelection("hover");
         else
@@ -129,7 +129,7 @@ const fvConfigChainA: FeatureViewInterface<LoadMolstarInterface<undefined,undefi
                 end: e.end ?? e.begin
             })), "hover", "set");
     },
-    structureSelectionCallback: (plugin: StructureViewerPublicInterface<LoadMolstarInterface<undefined,undefined>,LoadMolstarReturnType>, pfv: RcsbFv, stateManager: RcsbFvStateManager) => {
+    structureSelectionCallback: (plugin: StructureViewerPublicInterface<LoadMolstarInterface<unknown,unknown>,LoadMolstarReturnType>, pfv: RcsbFv, stateManager: RcsbFvStateManager) => {
         const sel: SaguaroRegionList | undefined = stateManager.selectionState.getSelectionWithCondition("1acb_board", "A", "select");
         if(sel == null) {
             pfv.clearSelection("select");
@@ -138,7 +138,7 @@ const fvConfigChainA: FeatureViewInterface<LoadMolstarInterface<undefined,undefi
             pfv.setSelection({elements: sel.regions, mode: "select"});
         }
     },
-    structureHoverCallback: (plugin: StructureViewerPublicInterface<LoadMolstarInterface<undefined,undefined>,LoadMolstarReturnType>, pfv: RcsbFv, stateManager: RcsbFvStateManager) => {
+    structureHoverCallback: (plugin: StructureViewerPublicInterface<LoadMolstarInterface<unknown,unknown>,LoadMolstarReturnType>, pfv: RcsbFv, stateManager: RcsbFvStateManager) => {
         const sel: SaguaroRegionList | undefined = stateManager.selectionState.getSelectionWithCondition("1acb_board", "A", "hover");
         if(sel == null)
             pfv.clearSelection("hover");
@@ -147,7 +147,7 @@ const fvConfigChainA: FeatureViewInterface<LoadMolstarInterface<undefined,undefi
     }
 }
 
-const fvConfigChainB: FeatureViewInterface<LoadMolstarInterface<undefined,undefined>,LoadMolstarReturnType> = {
+const fvConfigChainB: FeatureViewInterface<LoadMolstarInterface<unknown,unknown>,LoadMolstarReturnType> = {
     boardId:"1acb.B_board",
     boardConfig: {
         range: {
@@ -158,7 +158,7 @@ const fvConfigChainB: FeatureViewInterface<LoadMolstarInterface<undefined,undefi
         includeAxis: true
     },
     rowConfig: rowConfigChainB,
-    sequenceSelectionChangeCallback: (plugin: StructureViewerPublicInterface<LoadMolstarInterface<undefined,undefined>,LoadMolstarReturnType>, stateManager: RcsbFvStateManager, sequenceRegion: Array<RcsbFvTrackDataElementInterface>) => {
+    sequenceSelectionChangeCallback: (plugin: StructureViewerPublicInterface<LoadMolstarInterface<unknown,unknown>,LoadMolstarReturnType>, stateManager: RcsbFvStateManager, sequenceRegion: Array<RcsbFvTrackDataElementInterface>) => {
         stateManager.selectionState.clearSelection("select", {modelId:"1acb_board", labelAsymId:"B"});
         plugin.clearSelection("select", {modelId: "1acb_board", labelAsymId: "B"})
         if(sequenceRegion.length > 0) {
@@ -177,11 +177,11 @@ const fvConfigChainB: FeatureViewInterface<LoadMolstarInterface<undefined,undefi
             plugin.resetCamera();
         }
     },
-    sequenceElementClickCallback: (plugin: StructureViewerPublicInterface<LoadMolstarInterface<undefined,undefined>,LoadMolstarReturnType>, stateManager: RcsbFvStateManager, d: RcsbFvTrackDataElementInterface) => {
+    sequenceElementClickCallback: (plugin: StructureViewerPublicInterface<LoadMolstarInterface<unknown,unknown>,LoadMolstarReturnType>, stateManager: RcsbFvStateManager, d: RcsbFvTrackDataElementInterface) => {
         if(d!=null)
             plugin.cameraFocus("1acb_board", "B", d.begin, d.end ?? d.begin);
     },
-    sequenceHoverCallback: (plugin: StructureViewerPublicInterface<LoadMolstarInterface<undefined,undefined>,LoadMolstarReturnType>, stateManager: RcsbFvStateManager, elements: Array<RcsbFvTrackDataElementInterface>) => {
+    sequenceHoverCallback: (plugin: StructureViewerPublicInterface<LoadMolstarInterface<unknown,unknown>,LoadMolstarReturnType>, stateManager: RcsbFvStateManager, elements: Array<RcsbFvTrackDataElementInterface>) => {
         if(elements == null || elements.length == 0)
             plugin.clearSelection("hover");
         else
@@ -192,7 +192,7 @@ const fvConfigChainB: FeatureViewInterface<LoadMolstarInterface<undefined,undefi
                 end: e.end ?? e.begin
             })), "hover", "set");
     },
-    structureSelectionCallback: (plugin: StructureViewerPublicInterface<LoadMolstarInterface<undefined,undefined>,LoadMolstarReturnType>, pfv: RcsbFv, stateManager: RcsbFvStateManager) => {
+    structureSelectionCallback: (plugin: StructureViewerPublicInterface<LoadMolstarInterface<unknown,unknown>,LoadMolstarReturnType>, pfv: RcsbFv, stateManager: RcsbFvStateManager) => {
         const sel: SaguaroRegionList | undefined = stateManager.selectionState.getSelectionWithCondition("1acb_board", "B", "select");
         if(sel == null) {
             pfv.clearSelection("select");
@@ -201,7 +201,7 @@ const fvConfigChainB: FeatureViewInterface<LoadMolstarInterface<undefined,undefi
             pfv.setSelection({elements: sel.regions, mode: "select"});
         }
     },
-    structureHoverCallback: (plugin: StructureViewerPublicInterface<LoadMolstarInterface<undefined,undefined>,LoadMolstarReturnType>, pfv: RcsbFv, stateManager: RcsbFvStateManager) => {
+    structureHoverCallback: (plugin: StructureViewerPublicInterface<LoadMolstarInterface<unknown,unknown>,LoadMolstarReturnType>, pfv: RcsbFv, stateManager: RcsbFvStateManager) => {
         const sel: SaguaroRegionList | undefined = stateManager.selectionState.getSelectionWithCondition("1acb_board", "B", "hover");
         if(sel == null)
             pfv.clearSelection("hover");
@@ -210,12 +210,12 @@ const fvConfigChainB: FeatureViewInterface<LoadMolstarInterface<undefined,undefi
     }
 }
 
-const blockChainA: FeatureBlockInterface<LoadMolstarInterface<undefined,undefined>,LoadMolstarReturnType> = {
+const blockChainA: FeatureBlockInterface<LoadMolstarInterface<unknown,unknown>,LoadMolstarReturnType> = {
     blockId:"chainA",
     featureViewConfig: [fvConfigChainA]
 };
 
-const blockChainB: FeatureBlockInterface<LoadMolstarInterface<undefined,undefined>,LoadMolstarReturnType> = {
+const blockChainB: FeatureBlockInterface<LoadMolstarInterface<unknown,unknown>,LoadMolstarReturnType> = {
     blockId:"chainB",
     featureViewConfig: [fvConfigChainB]
 };
@@ -233,7 +233,7 @@ const blockSelectorElement: (blockSelectorManager: BlockSelectorManager) => JSX.
     );
 }
 
-const customConfig: CustomViewInterface<LoadMolstarInterface<undefined,undefined>,LoadMolstarReturnType> = {
+const customConfig: CustomViewInterface<LoadMolstarInterface<unknown,unknown>,LoadMolstarReturnType> = {
     blockConfig:[blockChainA, blockChainB],
     blockSelectorElement: blockSelectorElement
 }
@@ -244,7 +244,7 @@ const sequenceConfig = {
     config: customConfig
 };
 
-const molstarConfig: RcsbFvStructureConfigInterface<LoadMolstarInterface<undefined,undefined>,{viewerProps:Partial<ViewerProps>}> = {
+const molstarConfig: RcsbFvStructureConfigInterface<LoadMolstarInterface<unknown,unknown>,{viewerProps:Partial<ViewerProps>}> = {
     loadConfig: {
         loadMethod: LoadMethod.loadPdbId,
         loadParams: {

src/examples/single-chain/index.ts

@@ -53,7 +53,7 @@ const rowConfig: Array<RcsbFvRowConfigInterface> = [
     }
 ];
 
-const fvConfig: FeatureViewInterface<LoadMolstarInterface<undefined,undefined>,LoadMolstarReturnType> = {
+const fvConfig: FeatureViewInterface<LoadMolstarInterface<unknown,unknown>,LoadMolstarReturnType> = {
     boardId:"1ash_board",
     boardConfig: {
         range: {
@@ -64,7 +64,7 @@ const fvConfig: FeatureViewInterface<LoadMolstarInterface<undefined,undefined>,L
         includeAxis: true
     },
     rowConfig: rowConfig,
-    sequenceSelectionChangeCallback: (plugin: StructureViewerPublicInterface<LoadMolstarInterface<undefined,undefined>,LoadMolstarReturnType>, stateManager: RcsbFvStateManager, sequenceRegion: Array<RcsbFvTrackDataElementInterface>) => {
+    sequenceSelectionChangeCallback: (plugin: StructureViewerPublicInterface<LoadMolstarInterface<unknown,unknown>,LoadMolstarReturnType>, stateManager: RcsbFvStateManager, sequenceRegion: Array<RcsbFvTrackDataElementInterface>) => {
         stateManager.selectionState.clearSelection("select", {modelId:"1ash_model", labelAsymId:"A"});
         if(sequenceRegion.length > 0) {
             const regions = sequenceRegion.map(r => ({
@@ -83,11 +83,11 @@ const fvConfig: FeatureViewInterface<LoadMolstarInterface<undefined,undefined>,L
             plugin.resetCamera();
         }
     },
-    sequenceElementClickCallback: (plugin: StructureViewerPublicInterface<LoadMolstarInterface<undefined,undefined>,LoadMolstarReturnType>, stateManager: RcsbFvStateManager, d: RcsbFvTrackDataElementInterface) => {
+    sequenceElementClickCallback: (plugin: StructureViewerPublicInterface<LoadMolstarInterface<unknown,unknown>,LoadMolstarReturnType>, stateManager: RcsbFvStateManager, d: RcsbFvTrackDataElementInterface) => {
         if(d!=null)
             plugin.cameraFocus("1ash_model", "A", d.begin, d.end ?? d.begin);
     },
-    sequenceHoverCallback: (plugin: StructureViewerPublicInterface<LoadMolstarInterface<undefined,undefined>,LoadMolstarReturnType>, stateManager: RcsbFvStateManager, elements: Array<RcsbFvTrackDataElementInterface>) => {
+    sequenceHoverCallback: (plugin: StructureViewerPublicInterface<LoadMolstarInterface<unknown,unknown>,LoadMolstarReturnType>, stateManager: RcsbFvStateManager, elements: Array<RcsbFvTrackDataElementInterface>) => {
         if(elements == null || elements.length == 0)
             plugin.clearSelection("hover");
         else
@@ -98,7 +98,7 @@ const fvConfig: FeatureViewInterface<LoadMolstarInterface<undefined,undefined>,L
                 end: e.end ?? e.begin
             })), "hover", "set");
     },
-    structureSelectionCallback: (plugin: StructureViewerPublicInterface<LoadMolstarInterface<undefined,undefined>,LoadMolstarReturnType>, pfv: RcsbFv, stateManager: RcsbFvStateManager) => {
+    structureSelectionCallback: (plugin: StructureViewerPublicInterface<LoadMolstarInterface<unknown,unknown>,LoadMolstarReturnType>, pfv: RcsbFv, stateManager: RcsbFvStateManager) => {
         const sel: SaguaroRegionList | undefined = stateManager.selectionState.getSelectionWithCondition("1ash_model", "A", "select");
         if(sel == null) {
             pfv.clearSelection("select");
@@ -107,7 +107,7 @@ const fvConfig: FeatureViewInterface<LoadMolstarInterface<undefined,undefined>,L
             pfv.setSelection({elements: sel.regions, mode: "select"});
         }
     },
-    structureHoverCallback: (plugin: StructureViewerPublicInterface<LoadMolstarInterface<undefined,undefined>,LoadMolstarReturnType>, pfv: RcsbFv, stateManager: RcsbFvStateManager) => {
+    structureHoverCallback: (plugin: StructureViewerPublicInterface<LoadMolstarInterface<unknown,unknown>,LoadMolstarReturnType>, pfv: RcsbFv, stateManager: RcsbFvStateManager) => {
         const sel: SaguaroRegionList | undefined = stateManager.selectionState.getSelectionWithCondition("1ash_model", "A", "hover");
         if(sel == null)
             pfv.clearSelection("hover");
@@ -116,12 +116,12 @@ const fvConfig: FeatureViewInterface<LoadMolstarInterface<undefined,undefined>,L
     }
 }
 
-const block: FeatureBlockInterface<LoadMolstarInterface<undefined,undefined>,LoadMolstarReturnType> = {
+const block: FeatureBlockInterface<LoadMolstarInterface<unknown,unknown>,LoadMolstarReturnType> = {
     blockId:"MyBlock_1",
     featureViewConfig: [fvConfig]
 };
 
-const customConfig: CustomViewInterface<LoadMolstarInterface<undefined,undefined>,LoadMolstarReturnType> = {
+const customConfig: CustomViewInterface<LoadMolstarInterface<unknown,unknown>,LoadMolstarReturnType> = {
     blockConfig:[block]
 }
 
@@ -131,7 +131,7 @@ const sequenceConfig = {
     config: customConfig
 };
 
-const molstarConfig: RcsbFvStructureConfigInterface<LoadMolstarInterface<undefined,undefined>,{viewerProps:Partial<ViewerProps>}> = {
+const molstarConfig: RcsbFvStructureConfigInterface<LoadMolstarInterface<unknown,unknown>,{viewerProps:Partial<ViewerProps>}> = {
     loadConfig: {
         loadMethod: LoadMethod.loadPdbId,
         loadParams: {

src/examples/structural-alignment/index.ts

@@ -97,7 +97,7 @@ const rowConfig: Array<RcsbFvRowConfigInterface> = [
     }
 ];
 
-const fvConfig: FeatureViewInterface<LoadMolstarInterface<undefined,undefined>,LoadMolstarReturnType> = {
+const fvConfig: FeatureViewInterface<LoadMolstarInterface<unknown,unknown>,LoadMolstarReturnType> = {
     boardId:"1ash_board",
     boardConfig: {
         range: {
@@ -110,7 +110,7 @@ const fvConfig: FeatureViewInterface<LoadMolstarInterface<undefined,undefined>,L
         includeAxis: true
     },
     rowConfig: rowConfig,
-    sequenceSelectionChangeCallback: (plugin: StructureViewerPublicInterface<LoadMolstarInterface<undefined,undefined>,LoadMolstarReturnType>, stateManager: RcsbFvStateManager, sequenceRegion: Array<RcsbFvTrackDataElementInterface>) => {
+    sequenceSelectionChangeCallback: (plugin: StructureViewerPublicInterface<LoadMolstarInterface<unknown,unknown>,LoadMolstarReturnType>, stateManager: RcsbFvStateManager, sequenceRegion: Array<RcsbFvTrackDataElementInterface>) => {
         stateManager.selectionState.clearSelection("select", {modelId:"1ash_model", labelAsymId:"A"});
         stateManager.selectionState.clearSelection("select", {modelId:"101m_model", labelAsymId:"A"});
         if(sequenceRegion.length > 0) {
@@ -137,7 +137,7 @@ const fvConfig: FeatureViewInterface<LoadMolstarInterface<undefined,undefined>,L
             plugin.resetCamera();
         }
     },
-    sequenceElementClickCallback: async (plugin: StructureViewerPublicInterface<LoadMolstarInterface<undefined,undefined>,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.begin === d.end || !d.end){
@@ -145,7 +145,7 @@ const fvConfig: FeatureViewInterface<LoadMolstarInterface<undefined,undefined>,L
             await plugin.createComponent("101m_component", "101m_model", "A", alignmentManager.getTargetPosition(d.begin)!, alignmentManager.getTargetPosition(d.begin)!, "ball-and-stick");
         }
     },
-    sequenceHoverCallback: (plugin: StructureViewerPublicInterface<LoadMolstarInterface<undefined,undefined>,LoadMolstarReturnType>, stateManager: RcsbFvStateManager, elements: Array<RcsbFvTrackDataElementInterface>) => {
+    sequenceHoverCallback: (plugin: StructureViewerPublicInterface<LoadMolstarInterface<unknown,unknown>,LoadMolstarReturnType>, stateManager: RcsbFvStateManager, elements: Array<RcsbFvTrackDataElementInterface>) => {
         if (elements == null || elements.length == 0){
             plugin.clearSelection("hover");
         }else {
@@ -165,7 +165,7 @@ const fvConfig: FeatureViewInterface<LoadMolstarInterface<undefined,undefined>,L
                 ), "hover", "set");
         }
     },
-    structureSelectionCallback: (plugin: StructureViewerPublicInterface<LoadMolstarInterface<undefined,undefined>,LoadMolstarReturnType>, pfv: RcsbFv, stateManager: RcsbFvStateManager) => {
+    structureSelectionCallback: (plugin: StructureViewerPublicInterface<LoadMolstarInterface<unknown,unknown>,LoadMolstarReturnType>, pfv: RcsbFv, stateManager: RcsbFvStateManager) => {
         const sel_1ash: SaguaroRegionList | undefined = stateManager.selectionState.getSelectionWithCondition("1ash_model", "A", "select");
         const sel_101m: SaguaroRegionList | undefined = stateManager.selectionState.getSelectionWithCondition("101m_model", "A", "select");
         pfv.clearSelection("select");
@@ -182,7 +182,7 @@ const fvConfig: FeatureViewInterface<LoadMolstarInterface<undefined,undefined>,L
                     })), mode: "select"});
         }
     },
-    structureHoverCallback: (plugin: StructureViewerPublicInterface<LoadMolstarInterface<undefined,undefined>,LoadMolstarReturnType>, pfv: RcsbFv, stateManager: RcsbFvStateManager) => {
+    structureHoverCallback: (plugin: StructureViewerPublicInterface<LoadMolstarInterface<unknown,unknown>,LoadMolstarReturnType>, pfv: RcsbFv, stateManager: RcsbFvStateManager) => {
         const sel_1ash: SaguaroRegionList | undefined = stateManager.selectionState.getSelectionWithCondition("1ash_model", "A", "hover");
         const sel_101m: SaguaroRegionList | undefined = stateManager.selectionState.getSelectionWithCondition("101m_model", "A", "hover");
         if(sel_1ash == null && sel_101m == null)
@@ -198,12 +198,12 @@ const fvConfig: FeatureViewInterface<LoadMolstarInterface<undefined,undefined>,L
     }
 }
 
-const block: FeatureBlockInterface<LoadMolstarInterface<undefined,undefined>,LoadMolstarReturnType> = {
+const block: FeatureBlockInterface<LoadMolstarInterface<unknown,unknown>,LoadMolstarReturnType> = {
     blockId:"MyBlock_1",
     featureViewConfig: [fvConfig]
 };
 
-const customConfig: CustomViewInterface<LoadMolstarInterface<undefined,undefined>,LoadMolstarReturnType> = {
+const customConfig: CustomViewInterface<LoadMolstarInterface<unknown,unknown>,LoadMolstarReturnType> = {
     blockConfig:[block]
 }
 
@@ -213,7 +213,7 @@ const sequenceConfig = {
     config: customConfig
 };
 
-const molstarConfig: RcsbFvStructureConfigInterface<LoadMolstarInterface<undefined,undefined>,{viewerProps:Partial<ViewerProps>}> = {
+const molstarConfig: RcsbFvStructureConfigInterface<LoadMolstarInterface<unknown,unknown>,{viewerProps:Partial<ViewerProps>}> = {
     loadConfig: [{
         loadMethod: LoadMethod.loadPdbId,
         loadParams: {