Issue #852: rendering block selector of custom 3D component

src/RcsbFvSequence/SequenceViews/CustomView/CustomView.tsx

@@ -13,11 +13,13 @@ import {
 } from "../../../RcsbFvStructure/StructureViewerInterface";
 import uniqid from "uniqid";
 import {RcsbFvStateInterface} from "../../../RcsbFvState/RcsbFvStateInterface";
+import { createRoot } from "react-dom/client";
 
 export type CustomViewStateInterface<R,L> = Omit<Omit<CustomViewInterface<R,L>, "modelChangeCallback">, "structureViewer">;
 
 export interface CustomViewInterface<R,L> {
     customViewContainerId?: string;
+    selectorContainerId?: string;
     blockConfig: FeatureBlockInterface<R,L> | Array<FeatureBlockInterface<R,L>>;
     blockSelectorElement?: (blockSelector: BlockSelectorManager) => JSX.Element;
     modelChangeCallback?: () => CustomViewStateInterface<R,L>;
@@ -74,6 +76,9 @@ export class CustomView<R,L> extends AbstractView<CustomViewInterface<R,L> & {st
 
     readonly state: CustomViewStateInterface<R,L> = {
         customViewContainerId: this.props.customViewContainerId,
+        selectorContainerId: this.props.selectorContainerId
+            ? this.props.selectorContainerId
+            : "nav-selector",
         blockConfig: this.props.blockConfig,
         blockSelectorElement: this.props.blockSelectorElement,
         blockChangeCallback: this.props.blockChangeCallback
@@ -87,15 +92,20 @@ export class CustomView<R,L> extends AbstractView<CustomViewInterface<R,L> & {st
     render():JSX.Element {
         return (
             this.props.customViewContainerId
-                ? <div id={this.rcsbFvDivId}>
-                    { this.additionalContent() }
-                  </div>
+                ? <div id={this.rcsbFvDivId}></div>
                 : super.render()
         );
     }
 
     componentDidMount(): void {
         super.componentDidMount();
+        const selectorContainer = document.getElementById(this.state.selectorContainerId!);
+        if (selectorContainer) {
+            const root = createRoot(selectorContainer);
+            const selector = this.additionalContent();
+            root.render(selector);
+        }
+
         this.blockViewSelector.setActiveBlock( (this.state.blockConfig instanceof Array ? this.state.blockConfig : [this.state.blockConfig])[0].blockId! );
     }
 

src/TmFv3DApp/index.tsx

@@ -6,7 +6,7 @@ import { TmFv3DCustom } from "./tmdet-viewer/TmFv3DCustom";
 import { updateSiteColors } from "./tmdet-extension/tmdet-color-theme";
 import { createRcsbFeatureViewer, TmFv1DElement } from "./tmdet-viewer/TmFv1DComponent";
 import { RcsbFvDOMConstants } from "../RcsbFvConstants/RcsbFvConstants";
-import { BlockSelectorManager, CustomViewInterface, FeatureBlockInterface } from "../RcsbFvSequence/SequenceViews/CustomView/CustomView";
+import { BlockSelectorManager, FeatureBlockInterface } from "../RcsbFvSequence/SequenceViews/CustomView/CustomView";
 import * as React from "react";
 import { LoadMolstarInterface, LoadMolstarReturnType } from "../RcsbFvStructure/StructureViewers/MolstarViewer/MolstarActionManager";
 
@@ -95,7 +95,8 @@ async function createConfig(configParams: any): Promise<RcsbFv3DCustomInterface>
         structurePanelConfig: molstarConfig
     };
     panel3dConfig.sequencePanelConfig.config.customViewContainerId = configParams.customViewContainerId;
-    panel3dConfig.sequencePanelConfig.config.blockSelectorElement = createBlockSelectorElement(
+    panel3dConfig.sequencePanelConfig.config.selectorContainerId = configParams.selectorContainerId;
+    panel3dConfig.sequencePanelConfig.config.blockSelectorElement = createBlockSelectorCreator(
         sequenceConfig.config.blockConfig as Array<BlockConfigType>
     );
 
@@ -110,16 +111,16 @@ async function createConfig(configParams: any): Promise<RcsbFv3DCustomInterface>
 type BlockSelectorCreator = (blockSelectorManager: BlockSelectorManager) => JSX.Element;
 type BlockConfigType = FeatureBlockInterface<LoadMolstarInterface<unknown,unknown>,LoadMolstarReturnType>;
 
-function createBlockSelectorElement(blockConfigs: Array<BlockConfigType>): BlockSelectorCreator {
+function createBlockSelectorCreator(blockConfigs: Array<BlockConfigType>): BlockSelectorCreator {
     return (blockSelectorManager: BlockSelectorManager) => {
-        return (<div>
+        return (
             <select onChange={(e)=>{blockSelectorManager.setActiveBlock(e.target.value)}}>
             {
                 blockConfigs.map((el) =>
                     (<option key={el.blockId} value={el.blockId}>{el.blockShortName}</option>))
             }
             </select>
-        </div>);
+        );
     };
 }