Issue #852: prototype of applied block selector

src/RcsbFvSequence/SequenceViews/CustomView/CustomView.tsx

@@ -86,7 +86,11 @@ export class CustomView<R,L> extends AbstractView<CustomViewInterface<R,L> & {st
 
     render():JSX.Element {
         return (
-            this.props.customViewContainerId ? <div id={this.rcsbFvDivId}></div> : super.render()
+            this.props.customViewContainerId
+                ? <div id={this.rcsbFvDivId}>
+                    { this.additionalContent() }
+                  </div>
+                : super.render()
         );
     }
 

src/TmFv3DApp/index.ts → src/TmFv3DApp/index.tsx

@@ -6,6 +6,9 @@ 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 * as React from "react";
+import { LoadMolstarInterface, LoadMolstarReturnType } from "../RcsbFvStructure/StructureViewers/MolstarViewer/MolstarActionManager";
 
 customElements.define("tm-saguaro-1d", TmFv1DElement);
 
@@ -92,6 +95,9 @@ async function createConfig(configParams: any): Promise<RcsbFv3DCustomInterface>
         structurePanelConfig: molstarConfig
     };
     panel3dConfig.sequencePanelConfig.config.customViewContainerId = configParams.customViewContainerId;
+    panel3dConfig.sequencePanelConfig.config.blockSelectorElement = createBlockSelectorElement(
+        sequenceConfig.config.blockConfig as Array<BlockConfigType>
+    );
 
     molstarConfig.structureViewerConfig.viewerProps.layoutShowSequence = true;
     (molstarConfig as any).loadConfig.loadParams.params = {
@@ -101,6 +107,22 @@ async function createConfig(configParams: any): Promise<RcsbFv3DCustomInterface>
     return panel3dConfig;
 }
 
+type BlockSelectorCreator = (blockSelectorManager: BlockSelectorManager) => JSX.Element;
+type BlockConfigType = FeatureBlockInterface<LoadMolstarInterface<unknown,unknown>,LoadMolstarReturnType>;
+
+function createBlockSelectorElement(blockConfigs: Array<BlockConfigType>): BlockSelectorCreator {
+    return (blockSelectorManager: BlockSelectorManager) => {
+        return (<div>
+            <select onChange={(e)=>{blockSelectorManager.setActiveBlock(e.target.value)}}>
+            {
+                blockConfigs.map((el) =>
+                    (<option key={el.blockId} value={el.blockId}>{el.blockShortName}</option>))
+            }
+            </select>
+        </div>);
+    };
+}
+
 export {
     DebugUtil,
     createRcsb3DViewer,