modelChangeCallback fixes

src/RcsbFvSequence/SequenceViews/AbstractView.tsx

@@ -15,7 +15,7 @@ export interface AbstractViewInterface {
     selection: RcsbFvSelection;
 }
 
-export abstract class AbstractView<P,S> extends React.Component <P & AbstractViewInterface, S & AbstractViewInterface> {
+export abstract class AbstractView<P,S> extends React.Component <P & AbstractViewInterface, S> {
 
     protected componentDivId: string;
     protected pfvDivId: string;

src/RcsbFvSequence/SequenceViews/AssemblyView.tsx

@@ -64,7 +64,7 @@ export class AssemblyView extends AbstractView<AssemblyViewInterface & AbstractV
             getRcsbFv(this.pfvDivId).setSelection(sel.regions);
     }
 
-    protected modelChangeCallback(modelMap:SaguaroPluginModelMapType) {
+    protected modelChangeCallback(modelMap:SaguaroPluginModelMapType): void {
         const onChangeCallback: Map<string, (x: InstanceSequenceOnchangeInterface)=>void> = new Map<string, (x: InstanceSequenceOnchangeInterface) => {}>();
         const filterInstances: Map<string, Set<string>> = new Map<string, Set<string>>();
         modelMap.forEach((v,k)=>{

src/RcsbFvSequence/SequenceViews/CustomView.tsx

@@ -12,10 +12,12 @@ import {
     SaguaroPluginPublicInterface
 } from "../../RcsbFvStructure/StructurePlugins/SaguaroPluginInterface";
 
+export type CustomViewStateInterface = Omit<CustomViewInterface, "modelChangeCallback">;
+
 export interface CustomViewInterface {
     config: FeatureBlockInterface | Array<FeatureBlockInterface>;
     additionalContent?: (select: BlockViewSelector) => JSX.Element;
-    modelChangeCallback?: (modelMap: SaguaroPluginModelMapType) => void;
+    modelChangeCallback?: (modelMap: SaguaroPluginModelMapType) => (void | CustomViewStateInterface);
 }
 
 export interface FeatureBlockInterface {
@@ -53,31 +55,29 @@ export class BlockViewSelector {
     }
 }
 
-export class CustomView extends AbstractView<CustomViewInterface & AbstractViewInterface, CustomViewInterface & AbstractViewInterface> {
+export class CustomView extends AbstractView<CustomViewInterface & AbstractViewInterface, CustomViewStateInterface> {
 
     private blockViewSelector: BlockViewSelector = new BlockViewSelector( this.blockChange.bind(this) );
     private boardMap: Map<string, FeatureViewInterface> = new Map<string, FeatureViewInterface>();
     private blockMap: Map<string, Array<string>> = new Map<string, Array<string>>();
     private rcsbFvMap: Map<string, RcsbFv> = new Map<string, RcsbFv>();
+    private firstModelLoad: boolean = true;
+
+    readonly state: CustomViewStateInterface = {
+        config: this.props.config,
+        additionalContent: this.props.additionalContent
+    };
 
     constructor(props: CustomViewInterface & AbstractViewInterface) {
         super({
             ...props
         });
-        ( props.config instanceof Array ? props.config : [props.config]).forEach(block=>{
-            if(block.blockId == null)block.blockId = "block_"+Math.random().toString(36).substr(2);
-            if(!this.blockMap.has(block.blockId))this.blockMap.set(block.blockId, new Array<string>());
-            (block.blockConfig instanceof Array ? block.blockConfig : [block.blockConfig]).forEach(board=>{
-                if(board.boardId == null)board.boardId = "board_"+Math.random().toString(36).substr(2);
-                this.blockMap.get(block.blockId!)?.push(board.boardId);
-                this.boardMap.set(board.boardId, board);
-            });
-        });
+       this.mapBlocks(props.config);
     }
 
     componentDidMount(): void {
         super.componentDidMount();
-        this.blockViewSelector.setActiveBlock( (this.props.config instanceof Array ? this.props.config : [this.props.config])[0].blockId! );
+        this.blockViewSelector.setActiveBlock( (this.state.config instanceof Array ? this.state.config : [this.state.config])[0].blockId! );
     }
 
     componentWillUnmount() {
@@ -86,6 +86,20 @@ export class CustomView extends AbstractView<CustomViewInterface & AbstractViewI
         });
     }
 
+    private mapBlocks(config: FeatureBlockInterface | Array<FeatureBlockInterface>){
+        this.blockMap.clear();
+        this.boardMap.clear();
+        ( config instanceof Array ? config : [config]).forEach(block=>{
+            if(block.blockId == null)block.blockId = "block_"+Math.random().toString(36).substr(2);
+            if(!this.blockMap.has(block.blockId))this.blockMap.set(block.blockId, new Array<string>());
+            (block.blockConfig instanceof Array ? block.blockConfig : [block.blockConfig]).forEach(board=>{
+                if(board.boardId == null)board.boardId = "board_"+Math.random().toString(36).substr(2);
+                this.blockMap.get(block.blockId!)?.push(board.boardId);
+                this.boardMap.set(board.boardId, board);
+            });
+        });
+    }
+
     private blockChange(): void{
         this.unmountBlockFv();
         this.buildBlockFv();
@@ -139,14 +153,30 @@ export class CustomView extends AbstractView<CustomViewInterface & AbstractViewI
     }
 
     protected additionalContent(): JSX.Element {
-        if(this.props.additionalContent == null)
+        if(this.state.additionalContent == null)
             return <></>;
-        return this.props.additionalContent(this.blockViewSelector);
+        return this.state.additionalContent(this.blockViewSelector);
     }
 
     protected modelChangeCallback(modelMap:SaguaroPluginModelMapType): void {
-        if(typeof this.props.modelChangeCallback === "function")
-            this.props.modelChangeCallback(modelMap);
+        if(this.firstModelLoad){
+            this.firstModelLoad = false;
+            return;
+        }
+        if(typeof this.props.modelChangeCallback === "function") {
+            const newConfig: CustomViewStateInterface | void = this.props.modelChangeCallback(modelMap);
+            if(newConfig != null){
+                if(newConfig.config != null && newConfig.additionalContent != null){
+                    this.mapBlocks(newConfig.config);
+                    this.setState({config: newConfig.config, additionalContent: newConfig.additionalContent})
+                }else if(newConfig.config == null && newConfig.additionalContent != null){
+                    this.setState({additionalContent: newConfig.additionalContent})
+                }else if(newConfig.config != null && newConfig.additionalContent == null){
+                    this.mapBlocks(newConfig.config);
+                    this.setState({config: newConfig.config})
+                }
+            }
+        }
     }
 
     protected updatePfvDimensions(): void {

src/examples/custom-panel/example.tsx

@@ -22,12 +22,6 @@ import {
     SaguaroPluginPublicInterface
 } from "../../RcsbFvStructure/StructurePlugins/SaguaroPluginInterface";
 
-
-
-const modelChangeCallback = (modelMap: SaguaroPluginModelMapType) => {
-    console.log(modelMap);
-};
-
 const additionalContent: (select: BlockViewSelector) => JSX.Element = (select: BlockViewSelector) => {
     function changeBlock(select: BlockViewSelector){
         select.setActiveBlock("MyBlock_2");
@@ -66,7 +60,7 @@ const rowConfig2: Array<RcsbFvRowConfigInterface> = [{
     trackColor: "#F9F9F9",
     displayType: RcsbFvDisplayTypes.BLOCK,
     displayColor: "#00FF00",
-    rowTitle: "1XXX.A",
+    rowTitle: "1XXX.B",
     trackData: [{
         begin: 30,
         end: 60
@@ -99,7 +93,7 @@ const fv1: FeatureViewInterface = {
 }
 
 const fv2: FeatureViewInterface = {
-    boardId:"1ash_board",
+    boardId:"1xxx_board",
     boardConfig: {
         range: {
             min: 1,
@@ -115,7 +109,7 @@ const fv2: FeatureViewInterface = {
         plugin.select("model_2", "B", d.begin, d.end??d.begin);
     },
     structureSelectionCallback: (pfv: RcsbFv, selection: RcsbFvSelection) => {
-        const sel: ChainSelectionInterface | undefined = selection.getSelectionWithCondition("model_2", "A");
+        const sel: ChainSelectionInterface | undefined = selection.getSelectionWithCondition("model_2", "B");
         if(sel == null)
             pfv.clearSelection();
         else
@@ -133,6 +127,42 @@ const block2: FeatureBlockInterface = {
     blockConfig: [fv2, fv1]
 };
 
+const block3: FeatureBlockInterface = {
+    blockId:"MyBlock_3",
+    blockConfig: [fv1, fv2]
+};
+
+const modelChangeCallback = (modelMap: SaguaroPluginModelMapType) => {
+    console.log(modelMap);
+    return {
+      config:[block, block2, block3],
+      additionalContent:(select: BlockViewSelector) => {
+          function changeBlock(select: BlockViewSelector){
+              select.setActiveBlock("MyBlock_2");
+          }
+          function changeBlock2(select: BlockViewSelector){
+              select.setActiveBlock("MyBlock_1");
+          }
+          function changeBlock3(select: BlockViewSelector){
+              select.setActiveBlock("MyBlock_3");
+          }
+          return (
+              <div>
+                  <div onClick={()=>{changeBlock(select)}}>
+                      Option 1
+                  </div>
+                  <div onClick={()=>{changeBlock2(select)}}>
+                      Option 2
+                  </div>
+                  <div onClick={()=>{changeBlock3(select)}}>
+                      Option 3
+                  </div>
+              </div>
+          );
+      }
+    };
+};
+
 const customConfig: CustomViewInterface = {
     config:[block, block2],
     additionalContent:additionalContent,