Issue #852: layout re-arrangement

src/RcsbFvSequence/SequenceViews/CustomView/CustomView.tsx

@@ -17,7 +17,7 @@ import {RcsbFvStateInterface} from "../../../RcsbFvState/RcsbFvStateInterface";
 export type CustomViewStateInterface<R,L> = Omit<Omit<CustomViewInterface<R,L>, "modelChangeCallback">, "structureViewer">;
 
 export interface CustomViewInterface<R,L> {
-
+    customViewContainerId?: string;
     blockConfig: FeatureBlockInterface<R,L> | Array<FeatureBlockInterface<R,L>>;
     blockSelectorElement?: (blockSelector: BlockSelectorManager) => JSX.Element;
     modelChangeCallback?: () => CustomViewStateInterface<R,L>;
@@ -73,6 +73,7 @@ export class CustomView<R,L> extends AbstractView<CustomViewInterface<R,L> & {st
     private updateContext:"state-change"|null = null;
 
     readonly state: CustomViewStateInterface<R,L> = {
+        customViewContainerId: this.props.customViewContainerId,
         blockConfig: this.props.blockConfig,
         blockSelectorElement: this.props.blockSelectorElement,
         blockChangeCallback: this.props.blockChangeCallback
@@ -83,6 +84,12 @@ export class CustomView<R,L> extends AbstractView<CustomViewInterface<R,L> & {st
         this.mapBlocks(props.blockConfig);
     }
 
+    render():JSX.Element {
+        return (
+            this.props.customViewContainerId ? <div id={this.rcsbFvDivId}></div> : super.render()
+        );
+    }
+
     componentDidMount(): void {
         super.componentDidMount();
         this.blockViewSelector.setActiveBlock( (this.state.blockConfig instanceof Array ? this.state.blockConfig : [this.state.blockConfig])[0].blockId! );

src/TmFv3DApp/TmTrajectoryHierarchyPreset.ts

@@ -21,7 +21,6 @@ import {
 } from 'molstar/lib/mol-state';
 import { MembraneOrientationPreset } from './tmdet-extension/behavior';
 import { StateTransforms } from 'molstar/lib/mol-plugin-state/transforms';
-import { applyTransformations } from './tmdet-extension/transformation';
 import { TmDetDescriptorCache } from './tmdet-extension/prop';
 import { registerTmDetSymmetry } from './tmdet-extension/symmetry';
 import { PresetProps } from '@rcsb/rcsb-molstar/build/src/viewer/helpers/preset';
@@ -56,8 +55,6 @@ export const TmDetRcsbPreset = TrajectoryHierarchyPresetProvider({
             .apply(StateTransforms.Model.StructureFromModel, props, { ref: 'assembly' })
             .commit();
 
-        //applyTransformations(plugin, descriptor!);
-
         const builder = plugin.builders.structure;
         const model = new StateObjectSelector(plugin.state.data.build().to('model').ref, plugin.state.data);
         const modelProperties = await builder.insertModelProperties(model.ref);

src/TmFv3DApp/index.ts

@@ -5,6 +5,7 @@ import { fetchDescriptor, registerRegionDescriptorData } from "./UniTmpHelper";
 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";
 
 customElements.define("tm-saguaro-1d", TmFv1DElement);
 
@@ -22,10 +23,45 @@ function createRcsb3DViewer(configParams: any) {
             const panel3d = new TmFv3DCustom(panel3dConfig);
             panel3d.render();
 
+            const sequenceViewerContainerId = panel3dConfig.sequencePanelConfig.config.customViewContainerId;
+            if (sequenceViewerContainerId) {
+                const destinationContainer = `${configParams.elementId}_${RcsbFvDOMConstants.PFV_APP_ID}`;
+                console.log(sequenceViewerContainerId, destinationContainer);
+                watchNodeChanges(destinationContainer, () => arrange(sequenceViewerContainerId, destinationContainer));
+            }
+
         })();
     });
 }
 
+export function arrange(childId: string, parentId: string) {
+    const child = document.getElementById(childId);
+    if (!child) {
+        console.warn(`DOM node '${childId}' not found`);
+        return;
+    }
+    document.getElementById(parentId)?.appendChild(child);
+    child.style.visibility = "visible";
+}
+
+async function watchNodeChanges(elementId: string, action: () => void, retryCount: number = 5) {
+
+    const targetNode = document.getElementById(elementId);
+    if (!targetNode) {
+        console.warn(`DOM node not found with id '${elementId}'`);
+        if (retryCount > 0) {
+            console.warn("Retrying later");
+            setTimeout(() => {
+                console.log(`Running watchNodeChanges again with '${elementId}'`);
+                watchNodeChanges(elementId, action, retryCount - 1);
+            }, 500);
+        }
+        return;
+    }
+
+    action();
+}
+
 async function createConfig(configParams: any): Promise<RcsbFv3DCustomInterface> {
     const pdbEntry = configParams.pdbEntry;
     const labelAsymId = configParams.labelAsymId;
@@ -55,6 +91,8 @@ async function createConfig(configParams: any): Promise<RcsbFv3DCustomInterface>
         sequencePanelConfig: sequenceConfig,
         structurePanelConfig: molstarConfig
     };
+    panel3dConfig.sequencePanelConfig.config.customViewContainerId = configParams.customViewContainerId;
+
     molstarConfig.structureViewerConfig.viewerProps.layoutShowSequence = true;
     (molstarConfig as any).loadConfig.loadParams.params = {
         preset: { modelIndex: 0 }

src/TmFv3DApp/tmdet-extension/tmdet-color-theme.ts

@@ -211,7 +211,7 @@ function loadRegionColorsFromStyleSheets(prefix: string = 'ult_'): void {
     });
 }
 
-export function updateSiteColors(side1: "Inside"|"Outside"|null): void {
+export function updateSiteColors(side1: "Inside"|"Outside"|"Unknown"|null): void {
 
     console.log(`updateSiteColors: side1: ${side1}`);