RcsbFv3d split custom & assembly

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "@bioinsilico/rcsb-saguaro-3d",
-  "version": "0.0.8",
+  "name": "@rcsb/rcsb-saguaro-3d",
+  "version": "0.0.9",
   "description": "RCSB Molstar/Saguaro Web App",
   "main": "build/dist/RcsbFv3DBuilder.js",
   "files": [
@@ -74,9 +74,9 @@
     "webpack-cli": "^3.3.12"
   },
   "dependencies": {
-    "@rcsb-bioinsilico/rcsb-molstar": "^1.0.25",
+    "@rcsb/rcsb-molstar": "^1.0.26",
     "@rcsb/rcsb-saguaro": "^1.0.2",
-    "@rcsb/rcsb-saguaro-app": "^1.0.9",
+    "@rcsb/rcsb-saguaro-app": "^1.0.10",
     "molstar": "^1.2.3"
   },
   "bugs": {

src/RcsbFv3D.tsx

@@ -1,103 +0,0 @@
-import * as React from "react";
-import * as classes from './styles/RcsbFvStyle.module.scss';
-
-import {MolstarPlugin} from './RcsbFvStructure/StructurePlugins/MolstarPlugin';
-import {SaguaroPluginInterface} from './RcsbFvStructure/StructurePlugins/SaguaroPluginInterface';
-
-import './styles/RcsbFvMolstarStyle.module.scss';
-import {RcsbFvSequence, SequenceViewInterface} from "./RcsbFvSequence/RcsbFvSequence";
-import {RcsbFvStructure, StructureViewInterface} from "./RcsbFvStructure/RcsbFvStructure";
-import {
-    EventType,
-    RcsbFvContextManager,
-    RcsbFvContextManagerInterface,
-    UpdateConfigInterface
-} from "./RcsbFvContextManager/RcsbFvContextManager";
-import {Subscription} from "rxjs";
-import {PluginContext} from "molstar/lib/mol-plugin/context";
-import {RcsbFvSelection} from "./RcsbFvSelection/RcsbFvSelection";
-
-export interface RcsbFv3DInterface {
-    structurePanelConfig:StructureViewInterface;
-    sequencePanelConfig: SequenceViewInterface;
-    id: string;
-    ctxManager: RcsbFvContextManager;
-}
-
-export class RcsbFv3D extends React.Component <RcsbFv3DInterface, {structurePanelConfig:StructureViewInterface, sequencePanelConfig:SequenceViewInterface}> {
-
-    private readonly pfvScreenFraction = 0.5;
-    private readonly plugin: SaguaroPluginInterface;
-    private readonly selection: RcsbFvSelection = new RcsbFvSelection();
-    private subscription: Subscription;
-
-    readonly state: {structurePanelConfig:StructureViewInterface, sequencePanelConfig:SequenceViewInterface} = {
-        structurePanelConfig: this.props.structurePanelConfig,
-        sequencePanelConfig: this.props.sequencePanelConfig
-    }
-
-    constructor(props: RcsbFv3DInterface) {
-        super(props);
-        this.plugin = new MolstarPlugin(this.selection);
-    }
-
-    render(): JSX.Element {
-        return (
-            <div className={classes.rcsbFvMain} >
-                <div style={{width:Math.round((1-this.pfvScreenFraction)*100).toString()+"%", height:"100%"}} className={classes.rcsbFvCell}>
-                    <RcsbFvStructure
-                        {...this.state.structurePanelConfig}
-                        componentId={this.props.id}
-                        plugin={this.plugin}
-                        selection={this.selection}
-                    />
-                </div>
-                <div style={{width:Math.round((this.pfvScreenFraction)*100).toString()+"%", height:"100%"}} className={classes.rcsbFvCell}>
-                    <RcsbFvSequence
-                        type={this.state.sequencePanelConfig.type}
-                        config={this.state.sequencePanelConfig.config}
-                        componentId={this.props.id}
-                        plugin={this.plugin}
-                        selection={this.selection}
-                    />
-                </div>
-            </div>
-        );
-    }
-
-    componentDidMount() {
-        this.subscription = this.subscribe();
-    }
-
-    componentWillUnmount() {
-        this.unsubscribe();
-    }
-
-    private subscribe(): Subscription{
-        return this.props.ctxManager.subscribe((obj:RcsbFvContextManagerInterface)=>{
-            if(obj.eventType == EventType.UPDATE_CONFIG){
-                this.updateConfig(obj.eventData as UpdateConfigInterface)
-            }else if(obj.eventType == EventType.PLUGIN_CALL){
-                this.plugin.pluginCall(obj.eventData as ((f:PluginContext)=>void));
-            }
-        });
-    }
-
-    /**Unsubscribe className to rxjs events. Useful if many panels are created an destroyed.*/
-    private unsubscribe(): void{
-        this.subscription.unsubscribe();
-    }
-
-    private updateConfig(config:UpdateConfigInterface){
-        const structureConfig: StructureViewInterface | undefined = config.structurePanelConfig;
-        const sequenceConfig: SequenceViewInterface | undefined = config.sequencePanelConfig;
-        if(structureConfig != null && sequenceConfig != null){
-            this.setState({structurePanelConfig:structureConfig, sequencePanelConfig:sequenceConfig});
-        }else if(structureConfig != null){
-            this.setState({structurePanelConfig:structureConfig});
-        }else if(sequenceConfig != null){
-            this.setState({sequencePanelConfig: sequenceConfig});
-        }
-    }
-
-}

src/RcsbFv3D/RcsbFv3DAbstract.tsx

@@ -0,0 +1,85 @@
+import * as React from "react";
+import * as ReactDom from "react-dom";
+import {RcsbFv3DComponent} from './RcsbFv3DComponent';
+import {StructureViewInterface} from "../RcsbFvStructure/RcsbFvStructure";
+import {SequenceViewInterface} from "../RcsbFvSequence/RcsbFvSequence";
+import {EventType, RcsbFvContextManager} from "../RcsbFvContextManager/RcsbFvContextManager";
+import {PluginContext} from "molstar/lib/mol-plugin/context";
+import {CSSProperties} from "react";
+
+
+export interface RcsbFv3DAbstractInterface {
+    elementId: string;
+    cssConfig?:{
+        rootPanel?: CSSProperties,
+        structurePanel?: CSSProperties,
+        sequencePanel?: CSSProperties
+    }
+}
+
+
+export abstract class RcsbFv3DAbstract {
+
+    protected elementId: string;
+    protected structureConfig: StructureViewInterface;
+    protected sequenceConfig: SequenceViewInterface;
+    protected ctxManager: RcsbFvContextManager = new RcsbFvContextManager();
+    private fullScreenFlag: boolean = false;
+    protected cssConfig:{
+        rootPanel?: CSSProperties,
+        structurePanel?: CSSProperties,
+        sequencePanel?: CSSProperties
+    } | undefined;
+
+    constructor(config?: any) {
+        if(config != null)
+            this.init(config);
+    }
+
+    protected init(config: any){}
+
+    public render(): void{
+        if(this.elementId == null )
+            throw "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);
+            document.body.append(element);
+            this.fullScreenFlag = true;
+            document.body.style.overflow = "hidden";
+        }
+
+        ReactDom.render(
+            <RcsbFv3DComponent
+                structurePanelConfig={this.structureConfig}
+                sequencePanelConfig={this.sequenceConfig}
+                id={"RcsbFv3D_innerDiv_"+Math.random().toString(36).substr(2)}
+                ctxManager={this.ctxManager}
+                cssConfig={this.cssConfig}
+                unmount={this.unmount.bind(this)}
+                fullScreen={this.fullScreenFlag}
+            />,
+            element
+        );
+    }
+
+    public unmount(removeHtmlElement?:boolean): void{
+        const element: HTMLElement | null = document.getElementById(this.elementId);
+        if(element != null) {
+            ReactDom.unmountComponentAtNode(element);
+            if(removeHtmlElement) {
+                element.remove();
+                document.body.style.overflow = "visible";
+            }
+        }
+    }
+
+    public updateConfig(config: {structurePanelConfig?: StructureViewInterface; sequencePanelConfig?: SequenceViewInterface;}){
+        this.ctxManager.next({eventType: EventType.UPDATE_CONFIG, eventData:config});
+    }
+
+    public pluginCall(f: (plugin: PluginContext) => void){
+        this.ctxManager.next({eventType: EventType.PLUGIN_CALL, eventData:f});
+    }
+
+}

src/RcsbFv3D/RcsbFv3DAssembly.tsx

@@ -0,0 +1,40 @@
+import {LoadMethod} from "../RcsbFvStructure/StructurePlugins/MolstarPlugin";
+import {RcsbFv3DAbstract, RcsbFv3DAbstractInterface} from "./RcsbFv3DAbstract";
+
+export interface RcsbFv3DAssemblyInterface extends RcsbFv3DAbstractInterface {
+   config: {
+        entryId: string;
+        title?: string;
+        subtitle?: string;
+    };
+}
+
+export class RcsbFv3DAssembly extends RcsbFv3DAbstract{
+
+    constructor(config?: RcsbFv3DAssemblyInterface) {
+            super(config);
+    }
+
+    init(assemblyData: RcsbFv3DAssemblyInterface) {
+        this.elementId = assemblyData.elementId ?? "RcsbFv3D_mainDiv_"+Math.random().toString(36).substr(2);
+        this.structureConfig = {
+            loadConfig:{
+                method: LoadMethod.loadPdbId,
+                params: {
+                    pdbId:assemblyData.config.entryId,
+                    id:assemblyData.config.entryId
+                }
+            }
+        };
+        this.sequenceConfig = {
+            type:"assembly",
+            config:{
+                entryId:assemblyData.config.entryId
+            },
+            title:assemblyData.config.title,
+            subtitle: assemblyData.config.subtitle
+        };
+        this.cssConfig = assemblyData.cssConfig;
+    }
+
+}

src/RcsbFv3D/RcsbFv3DComponent.tsx

@@ -0,0 +1,130 @@
+import * as React from "react";
+import * as classes from '../styles/RcsbFvStyle.module.scss';
+
+import {MolstarPlugin} from '../RcsbFvStructure/StructurePlugins/MolstarPlugin';
+import {SaguaroPluginInterface} from '../RcsbFvStructure/StructurePlugins/SaguaroPluginInterface';
+
+import '../styles/RcsbFvMolstarStyle.module.scss';
+import {RcsbFvSequence, SequenceViewInterface} from "../RcsbFvSequence/RcsbFvSequence";
+import {RcsbFvStructure, StructureViewInterface} from "../RcsbFvStructure/RcsbFvStructure";
+import {
+    EventType,
+    RcsbFvContextManager,
+    RcsbFvContextManagerInterface,
+    UpdateConfigInterface
+} from "../RcsbFvContextManager/RcsbFvContextManager";
+import {Subscription} from "rxjs";
+import {PluginContext} from "molstar/lib/mol-plugin/context";
+import {RcsbFvSelection} from "../RcsbFvSelection/RcsbFvSelection";
+import {CSSProperties} from "react";
+
+export interface RcsbFv3DComponentInterface {
+    structurePanelConfig:StructureViewInterface;
+    sequencePanelConfig: SequenceViewInterface;
+    id: string;
+    ctxManager: RcsbFvContextManager;
+    cssConfig?:{
+        rootPanel?: CSSProperties,
+        structurePanel?: CSSProperties,
+        sequencePanel?: CSSProperties
+    }
+    unmount:(flag:boolean)=>void;
+    fullScreen: boolean;
+}
+
+export class RcsbFv3DComponent extends React.Component <RcsbFv3DComponentInterface, {structurePanelConfig:StructureViewInterface, sequencePanelConfig:SequenceViewInterface}> {
+
+    private readonly pfvScreenFraction = 0.55;
+    private readonly plugin: SaguaroPluginInterface;
+    private readonly selection: RcsbFvSelection = new RcsbFvSelection();
+    private subscription: Subscription;
+
+    readonly state: {structurePanelConfig:StructureViewInterface, sequencePanelConfig:SequenceViewInterface} = {
+        structurePanelConfig: this.props.structurePanelConfig,
+        sequencePanelConfig: this.props.sequencePanelConfig
+    }
+
+    constructor(props: RcsbFv3DComponentInterface) {
+        super(props);
+        this.plugin = new MolstarPlugin(this.selection);
+    }
+
+    render(): JSX.Element {
+        return (
+            <div style={RcsbFv3DComponent.mainDivCssConfig(this.props.cssConfig?.rootPanel)} className={ this.props.fullScreen ? classes.fullScreen+" "+classes.rcsbFvMain : classes.rcsbFvMain} >
+                <div>
+                    <div style={this.structureCssConfig(this.props.cssConfig?.structurePanel)} className={classes.rcsbFvCell}>
+                        <RcsbFvStructure
+                            {...this.state.structurePanelConfig}
+                            componentId={this.props.id}
+                            plugin={this.plugin}
+                            selection={this.selection}
+                        />
+                    </div>
+                    <div style={this.sequenceCssConfig(this.props.cssConfig?.sequencePanel)} className={classes.rcsbFvCell} >
+                        <RcsbFvSequence
+                            type={this.state.sequencePanelConfig.type}
+                            config={this.state.sequencePanelConfig.config}
+                            componentId={this.props.id}
+                            plugin={this.plugin}
+                            selection={this.selection}
+                            title={this.state.sequencePanelConfig.title}
+                            subtitle={this.state.sequencePanelConfig.subtitle}
+                            unmount={this.props.unmount}
+                    />
+                </div>
+                </div>
+            </div>
+        );
+    }
+
+    componentDidMount() {
+        this.subscription = this.subscribe();
+    }
+
+    componentWillUnmount() {
+        this.unsubscribe();
+    }
+
+    private structureCssConfig(css: CSSProperties | undefined): CSSProperties{
+        return {...{width:Math.round((1-this.pfvScreenFraction)*100).toString()+"%", height:"100%"}, ...css };
+    }
+
+    private sequenceCssConfig(css: CSSProperties | undefined): CSSProperties{
+        return {...{width:Math.round((this.pfvScreenFraction)*100).toString()+"%", height:"100%", overflow:"auto", paddingBottom:5}, ...css };
+    }
+
+    private static mainDivCssConfig(css: CSSProperties | undefined): CSSProperties{
+        return {...{
+
+        }, ...css}
+    }
+
+    private subscribe(): Subscription{
+        return this.props.ctxManager.subscribe((obj:RcsbFvContextManagerInterface)=>{
+            if(obj.eventType == EventType.UPDATE_CONFIG){
+                this.updateConfig(obj.eventData as UpdateConfigInterface)
+            }else if(obj.eventType == EventType.PLUGIN_CALL){
+                this.plugin.pluginCall(obj.eventData as ((f:PluginContext)=>void));
+            }
+        });
+    }
+
+    /**Unsubscribe className to rxjs events. Useful if many panels are created an destroyed.*/
+    private unsubscribe(): void{
+        this.subscription.unsubscribe();
+    }
+
+    private updateConfig(config:UpdateConfigInterface){
+        const structureConfig: StructureViewInterface | undefined = config.structurePanelConfig;
+        const sequenceConfig: SequenceViewInterface | undefined = config.sequencePanelConfig;
+        if(structureConfig != null && sequenceConfig != null){
+            this.setState({structurePanelConfig:structureConfig, sequencePanelConfig:sequenceConfig});
+        }else if(structureConfig != null){
+            this.setState({structurePanelConfig:structureConfig});
+        }else if(sequenceConfig != null){
+            this.setState({sequencePanelConfig: sequenceConfig});
+        }
+    }
+
+}

src/RcsbFv3D/RcsbFv3DCustom.tsx

@@ -0,0 +1,31 @@
+
+import {StructureViewInterface} from "../RcsbFvStructure/RcsbFvStructure";
+import {CustomViewInterface} from "../RcsbFvSequence/SequenceViews/CustomView";
+import {RcsbFv3DAbstract, RcsbFv3DAbstractInterface} from "./RcsbFv3DAbstract";
+
+export interface RcsbFv3DCustomInterface extends RcsbFv3DAbstractInterface {
+    structurePanelConfig: StructureViewInterface;
+    sequencePanelConfig: {
+        config: CustomViewInterface;
+        title?: string;
+        subtitle?: string;
+    };
+}
+
+export class RcsbFv3DCustomBuilder extends RcsbFv3DAbstract {
+
+    constructor(config?: RcsbFv3DCustomInterface) {
+        super(config);
+    }
+
+    init(config: RcsbFv3DCustomInterface) {
+        this.elementId = config.elementId ?? "RcsbFv3D_mainDiv_"+Math.random().toString(36).substr(2);
+        this.structureConfig = config.structurePanelConfig;
+        this.sequenceConfig = {
+            ...config.sequencePanelConfig,
+            type:"custom"
+        };
+        this.cssConfig = config.cssConfig;
+    }
+
+}

src/RcsbFv3DBuilder.tsx

@@ -1,69 +0,0 @@
-import * as React from "react";
-import * as ReactDom from "react-dom";
-import {RcsbFv3D} from './RcsbFv3D';
-import {StructureViewInterface} from "./RcsbFvStructure/RcsbFvStructure";
-import {SequenceViewInterface} from "./RcsbFvSequence/RcsbFvSequence";
-import {EventType, RcsbFvContextManager} from "./RcsbFvContextManager/RcsbFvContextManager";
-import {PluginContext} from "molstar/lib/mol-plugin/context";
-
-export interface RcsbFv3DBuilderInterface {
-    elementId: string;
-    structurePanelConfig: StructureViewInterface;
-    sequencePanelConfig: SequenceViewInterface;
-}
-
-export class RcsbFv3DBuilder {
-
-    private elementId: string;
-    private structureConfig: StructureViewInterface;
-    private sequenceConfig: SequenceViewInterface;
-    private ctxManager: RcsbFvContextManager = new RcsbFvContextManager();
-
-    constructor(config?: RcsbFv3DBuilderInterface) {
-        if(config != null)
-            this.init(config);
-    }
-
-    init(config: RcsbFv3DBuilderInterface) {
-        this.elementId = config.elementId ?? "RcsbFv3D_mainDiv_"+Math.random().toString(36).substr(2);
-        this.structureConfig = config.structurePanelConfig;
-        this.sequenceConfig = config.sequencePanelConfig;
-    }
-
-    public render(): void{
-        if(this.elementId == null )
-            throw "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);
-            document.body.append(element);
-        }
-
-        ReactDom.render(
-            <RcsbFv3D
-                structurePanelConfig={this.structureConfig}
-                sequencePanelConfig={this.sequenceConfig}
-                id={"RcsbFv3D_innerDiv_"+Math.random().toString(36).substr(2)}
-                ctxManager={this.ctxManager}
-            />,
-            element
-        );
-    }
-
-    public unmount(): void{
-        const element: HTMLElement | null = document.getElementById(this.elementId);
-        if(element != null) {
-            ReactDom.unmountComponentAtNode(element);
-            element.remove();
-        }
-    }
-
-    public updateConfig(config: {structurePanelConfig?: StructureViewInterface; sequencePanelConfig?: SequenceViewInterface;}){
-        this.ctxManager.next({eventType: EventType.UPDATE_CONFIG, eventData:config});
-    }
-
-    public pluginCall(f: (plugin: PluginContext) => void){
-        this.ctxManager.next({eventType: EventType.PLUGIN_CALL, eventData:f});
-    }
-
-}

src/RcsbFvSelection/RcsbFvSelection.ts

@@ -20,6 +20,16 @@ export class RcsbFvSelection {
         this.selection.push({modelId:modelId, labelAsymId:labelAsymId, regions:[region]});
     }
 
+    public addSelectionFromRegion(modelId: string, labelAsymId: string, region: {begin:number, end:number}): void {
+        this.selection.push({modelId:modelId, labelAsymId:labelAsymId, regions:[region]});
+    }
+
+    public setSelectionFromMultipleRegions(regions: {modelId: string, labelAsymId: string, region: {begin:number, end:number}}[]): void {
+        regions.forEach(r=>{
+            this.addSelectionFromRegion(r.modelId, r.labelAsymId, r.region);
+        });
+    }
+
     public setSelectionFromResidueSelection(res: Array<ResidueSelectionInterface>): void {
         const selMap: Map<string,Map<string,Set<number>>> = new Map<string, Map<string, Set<number>>>();
         res.forEach(r=>{

src/RcsbFvSequence/RcsbFvSequence.tsx

@@ -9,7 +9,8 @@ import {RcsbFvSelection} from "../RcsbFvSelection/RcsbFvSelection";
 export interface SequenceViewInterface{
     type: "custom" | "assembly";
     config: AssemblyViewInterface | CustomViewInterface;
-
+    title?: string;
+    subtitle?: string;
 }
 
 interface CallbackConfig {
@@ -17,7 +18,7 @@ interface CallbackConfig {
     sequenceCallback?: (rcsbFv: RcsbFv)=>void;
 }
 
-export class RcsbFvSequence extends React.Component <SequenceViewInterface & CallbackConfig & {plugin: SaguaroPluginInterface, selection:RcsbFvSelection, componentId:string}, SequenceViewInterface > {
+export class RcsbFvSequence extends React.Component <SequenceViewInterface & CallbackConfig & {unmount:(flag:boolean)=>void, plugin: SaguaroPluginInterface, selection:RcsbFvSelection, componentId:string}, SequenceViewInterface > {
 
     render() {
         if(this.props.type == "custom"){
@@ -27,6 +28,9 @@ export class RcsbFvSequence extends React.Component <SequenceViewInterface & Cal
                 componentId={this.props.componentId}
                 plugin={this.props.plugin}
                 selection={this.props.selection}
+                title={this.props.title}
+                subtitle={this.props.subtitle}
+                unmount={this.props.unmount}
             />)
         }else if(this.props.type == "assembly"){
             const config: AssemblyViewInterface = this.props.config as AssemblyViewInterface;
@@ -35,6 +39,9 @@ export class RcsbFvSequence extends React.Component <SequenceViewInterface & Cal
                 componentId={this.props.componentId}
                 plugin={this.props.plugin}
                 selection={this.props.selection}
+                title={this.props.title}
+                subtitle={this.props.subtitle}
+                unmount={this.props.unmount}
             />)
         }
     }

src/RcsbFvSequence/SequenceViews/AbstractView.tsx

@@ -13,12 +13,14 @@ export interface AbstractViewInterface {
     subtitle?: string;
     plugin: SaguaroPluginInterface;
     selection: RcsbFvSelection;
+    unmount:(flag:boolean)=>void;
 }
 
 export abstract class AbstractView<P,S> extends React.Component <P & AbstractViewInterface, S> {
 
     protected componentDivId: string;
     protected pfvDivId: string;
+    protected updateDimTimeout: number = 0;
 
     constructor(props:P & AbstractViewInterface) {
         super(props);
@@ -28,10 +30,12 @@ export abstract class AbstractView<P,S> extends React.Component <P & AbstractVie
 
     render():JSX.Element {
         return (
-                <div id={this.componentDivId} style={{width: "100%", height:"100%"}} >
+                <div id={this.componentDivId} >
+                    <div style={{paddingLeft:10}}>
                     {this.createTitle()}
                     {this.createSubtitle()}
                     {this.additionalContent()}
+                    </div>
                     <div id ={this.pfvDivId} />
                 </div>
         );
@@ -40,7 +44,12 @@ export abstract class AbstractView<P,S> extends React.Component <P & AbstractVie
     componentDidMount() {
         this.props.plugin.setSelectCallback(this.structureSelectionCallback.bind(this));
         this.props.plugin.setModelChangeCallback(this.modelChangeCallback.bind(this));
-        window.addEventListener('resize', this.updatePfvDimensions.bind(this));
+        window.addEventListener('resize', ()=>{
+            window.clearTimeout(this.updateDimTimeout);
+            this.updateDimTimeout = window.setTimeout(()=> {
+                this.updateDimensions();
+            },100);
+        });
     }
 
     private createTitle(): JSX.Element | null{
@@ -59,10 +68,10 @@ export abstract class AbstractView<P,S> extends React.Component <P & AbstractVie
 
     protected modelChangeCallback(modelMap:SaguaroPluginModelMapType): void{}
 
-    protected updatePfvDimensions(): void{}
+    protected updateDimensions(): void{}
 
     protected additionalContent(): JSX.Element | null {
-        return null;
+        return <div></div>;
     }
 
 }

src/RcsbFvSequence/SequenceViews/AssemblyView.tsx

@@ -1,6 +1,12 @@
 import {RcsbFvDOMConstants} from "../../RcsbFvConstants/RcsbFvConstants";
 import * as React from "react";
-import {buildMultipleInstanceSequenceFv, getRcsbFv, setBoardConfig, unmount} from "@rcsb/rcsb-saguaro-app";
+import {
+    buildInstanceSequenceFv,
+    buildMultipleInstanceSequenceFv,
+    getRcsbFv,
+    setBoardConfig,
+    unmount
+} from "@rcsb/rcsb-saguaro-app";
 import {AbstractView, AbstractViewInterface} from "./AbstractView";
 import {InstanceSequenceOnchangeInterface} from "@rcsb/rcsb-saguaro-app/build/dist/RcsbFvWeb/RcsbFvBuilder/RcsbFvInstanceBuilder";
 import {RcsbFvTrackDataElementInterface} from "@rcsb/rcsb-saguaro";
@@ -25,9 +31,9 @@ export class AssemblyView extends AbstractView<AssemblyViewInterface & AbstractV
 
     protected additionalContent(): JSX.Element {
         return (
-            <div style={{marginTop:10, marginLeft:5}}>
-                <div id={RcsbFvDOMConstants.SELECT_ASSEMBLY_PFV_ID} style={{display:"inline-block"}}/>
-                <div id={RcsbFvDOMConstants.SELECT_INSTANCE_PFV_ID} style={{display:"inline-block", marginLeft:5}}/>
+            <div style={{marginTop:10}}>
+                <div id={RcsbFvDOMConstants.SELECT_INSTANCE_PFV_ID} style={{display:"inline-block"}}/>
+                <div style={{position:"absolute", top:5, right:7, cursor:"pointer", color: "grey"}} onClick={()=>{this.props.unmount(true)}}>&#10006;</div>
             </div>
         );
     }
@@ -79,18 +85,18 @@ export class AssemblyView extends AbstractView<AssemblyViewInterface & AbstractV
             filterInstances.set(v.entryId,new Set<string>(v.chains.map(d=>d.label)));
         });
         unmount(this.pfvDivId);
-        buildMultipleInstanceSequenceFv(
+        const entryId: string = Array.from(modelMap.values()).map(d=>d.entryId)[0];
+        buildInstanceSequenceFv(
             this.pfvDivId,
-            RcsbFvDOMConstants.SELECT_ASSEMBLY_PFV_ID,
             RcsbFvDOMConstants.SELECT_INSTANCE_PFV_ID,
-            Array.from(modelMap.values()).map(d=>d.entryId),
+            entryId,
             undefined,
-            onChangeCallback,
-            filterInstances
+            onChangeCallback.get(entryId),
+            filterInstances.get(entryId)
         );
     }
 
-    protected updatePfvDimensions(): void{
+    protected updateDimensions(): void{
         const width: number = window.document.getElementById(this.componentDivId)?.getBoundingClientRect().width ?? 0;
         const trackWidth: number = width - 190 - 55;
         getRcsbFv(this.pfvDivId).updateBoardConfig({boardConfigData:{trackWidth:trackWidth}});

src/RcsbFvSequence/SequenceViews/CustomView.tsx

@@ -124,11 +124,14 @@ export class CustomView extends AbstractView<CustomViewInterface & AbstractViewI
                 return;
             const div: HTMLDivElement = document.createElement<"div">("div");
             div.setAttribute("id", "boardDiv_"+boardId);
-            div.style.marginBottom = "2px";
+            div.style.marginBottom = "25px";
             document.getElementById(this.componentDivId)?.append(div);
+            const width: number = window.document.getElementById(this.componentDivId)?.getBoundingClientRect().width ?? 0;
+            const trackWidth: number = width - (this.boardMap.get(boardId)!.boardConfig?.rowTitleWidth ?? 190) - 55;
             const rcsbFv: RcsbFv = new RcsbFv({
                 elementId: "boardDiv_"+boardId,
                 boardConfigData:{
+                    trackWidth:trackWidth,
                     ...this.boardMap.get(boardId)!.boardConfig,
                     elementClickCallBack:(d:RcsbFvTrackDataElementInterface)=>{
                         this.boardMap.get(boardId)!.sequenceSelectionCallback(this.props.plugin, this.props.selection, d);
@@ -179,10 +182,13 @@ export class CustomView extends AbstractView<CustomViewInterface & AbstractViewI
         }
     }
 
-    protected updatePfvDimensions(): void {
+    protected updateDimensions(): void {
+        const div: HTMLElement | undefined | null = document.getElementById(this.componentDivId)?.parentElement;
+        const width: number = window.document.getElementById(this.componentDivId)?.getBoundingClientRect().width ?? 0;
+        if(div == null || (div.style.width && !div.style.width.includes("%")) )
+            return;
         this.rcsbFvMap.forEach((rcsbFv, boardId)=>{
-            const width: number = window.document.getElementById(this.componentDivId)?.getBoundingClientRect().width ?? 0;
-            const trackWidth: number = width - 190 - 55;
+            const trackWidth: number = width - (this.boardMap.get(boardId)!.boardConfig?.rowTitleWidth ?? 190) - 55;
             rcsbFv.updateBoardConfig({boardConfigData:{trackWidth:trackWidth}});
         });
     }

src/RcsbFvStructure/RcsbFvStructure.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import {SaguaroPluginInterface} from "./StructurePlugins/SaguaroPluginInterface";
 import {RcsbFvDOMConstants} from "../RcsbFvConstants/RcsbFvConstants";
-import {ViewerProps} from "@rcsb-bioinsilico/rcsb-molstar/build/src/viewer";
+import {ViewerProps} from "@rcsb/rcsb-molstar/build/src/viewer";
 import {LoadMolstarInterface} from "./StructurePlugins/MolstarPlugin";
 import {RcsbFvSelection} from "../RcsbFvSelection/RcsbFvSelection";
 
@@ -21,14 +21,17 @@ export class RcsbFvStructure extends React.Component <StructureViewInterface & {
     }
 
     componentDidMount() {
-        this.updatePfvDimensions();
+        this.updateDimensions();
         this.props.plugin.init(this.props.componentId+"_"+RcsbFvDOMConstants.MOLSTAR_APP_ID, this.props.pluginConfig);
         this.props.plugin.load(this.props.loadConfig);
-        window.addEventListener('resize', this.updatePfvDimensions.bind(this));
+        window.addEventListener('resize', this.updateDimensions.bind(this));
     }
 
-    private updatePfvDimensions(): void {
-        const rect: DOMRect | undefined = document.getElementById(this.props.componentId+"_"+RcsbFvDOMConstants.MOLSTAR_DIV)?.parentElement?.getBoundingClientRect()
+    private updateDimensions(): void {
+        const div: HTMLElement | undefined | null = document.getElementById(this.props.componentId+"_"+RcsbFvDOMConstants.MOLSTAR_DIV)?.parentElement;
+        if(div == null)
+            return;
+        const rect: DOMRect = div.getBoundingClientRect()
         RcsbFvStructure.setSize(document.getElementById(this.props.componentId+"_"+RcsbFvDOMConstants.MOLSTAR_DIV), rect);
         RcsbFvStructure.setSize(document.getElementById(this.props.componentId+"_"+RcsbFvDOMConstants.MOLSTAR_APP_ID), rect);
     }

src/RcsbFvStructure/StructurePlugins/MolstarPlugin.ts

@@ -1,5 +1,5 @@
-import {Viewer, ViewerProps} from '@rcsb-bioinsilico/rcsb-molstar/build/src/viewer';
-import {PresetProps} from '@rcsb-bioinsilico/rcsb-molstar/build/src/viewer/helpers/preset';
+import {Viewer, ViewerProps} from '@rcsb/rcsb-molstar/build/src/viewer';
+import {PresetProps} from '@rcsb/rcsb-molstar/build/src/viewer/helpers/preset';
 import {
     SaguaroPluginInterface,
     SaguaroPluginModelMapType,
@@ -46,7 +46,7 @@ interface LoadParams {
 
 export class MolstarPlugin extends AbstractPlugin implements SaguaroPluginInterface, SaguaroPluginPublicInterface {
     private plugin: Viewer;
-    private localSelectionFlag: boolean = false;
+    private innerSelectionFlag: boolean = false;
     private loadingFlag: boolean = false;
     private modelChangeCallback: (chainMap:SaguaroPluginModelMapType)=>void;
     private modelMap: Map<string,string|undefined> = new Map<string, string>();
@@ -55,8 +55,8 @@ export class MolstarPlugin extends AbstractPlugin implements SaguaroPluginInterf
         super(props);
     }
 
-    public init(target: string | HTMLElement, props: Partial<ViewerProps> = {layoutShowSequence: true}) {
-        this.plugin = new Viewer(target, props);
+    public init(target: string | HTMLElement, props?: Partial<ViewerProps>) {
+        this.plugin = new Viewer(target, {layoutShowControls:false, layoutShowSequence: true, ...props});
     }
 
     public clear(): void{
@@ -120,14 +120,14 @@ export class MolstarPlugin extends AbstractPlugin implements SaguaroPluginInterf
     }
 
     public select(modelId:string, asymId: string, x: number, y: number): void {
-        this.localSelectionFlag = true;
+        this.innerSelectionFlag = true;
         this.plugin.select(this.getModelId(modelId), asymId, x, y)
     }
 
     public setSelectCallback(g:()=>void ){
-        this.plugin.getPlugin().managers.structure.selection.events.changed.subscribe((()=>{
-            if(this.localSelectionFlag) {
-                this.localSelectionFlag = false;
+        this.plugin.getPlugin().managers.structure.selection.events.changed.subscribe(()=>{
+            if(this.innerSelectionFlag) {
+                this.innerSelectionFlag = false;
                 return;
             }
             const sequenceData: Array<ResidueSelectionInterface> = new Array<ResidueSelectionInterface>();
@@ -155,10 +155,11 @@ export class MolstarPlugin extends AbstractPlugin implements SaguaroPluginInterf
             }
             this.selection.setSelectionFromResidueSelection(sequenceData);
             g();
-        }));
+        });
     }
 
     public clearSelect(): void {
+        this.innerSelectionFlag = true;
         this.plugin.getPlugin().managers.interactivity.lociSelects.deselectAll();
         this.selection.clearSelection();
     }

src/RcsbSaguaro3D.js

@@ -1,2 +1,3 @@
-import {RcsbFv3DBuilder as Create} from "./RcsbFv3DBuilder"
-export {Create};
+import {RcsbFv3DCustomBuilder as custom} from "./RcsbFv3D/RcsbFv3DCustom"
+import {RcsbFv3DAssembly as assembly} from "./RcsbFv3D/RcsbFv3DAssembly"
+export {custom, assembly};

src/examples/assembly/example.html

@@ -5,7 +5,6 @@
 </head>
 <body>
 
-<div id="pfv" style="margin-top: 200px;" ></div>
 
 </body>
 </html>

src/examples/assembly/example.ts

@@ -1,10 +1,11 @@
 
-import {RcsbFv3DBuilder} from "../../RcsbFv3DBuilder";
+import {RcsbFv3DCustomBuilder} from "../../RcsbFv3D/RcsbFv3DCustom";
 import {StructureViewInterface} from "../../RcsbFvStructure/RcsbFvStructure";
 import {SequenceViewInterface} from "../../RcsbFvSequence/RcsbFvSequence";
 
 import './example.html';
 import {LoadMethod} from "../../RcsbFvStructure/StructurePlugins/MolstarPlugin";
+import {RcsbFv3DAssembly} from "../../RcsbFv3D/RcsbFv3DAssembly";
 
 document.addEventListener("DOMContentLoaded", function(event) {
 
@@ -21,40 +22,27 @@ document.addEventListener("DOMContentLoaded", function(event) {
 
     const args = getJsonFromUrl();
 
-    const structureConfig:StructureViewInterface = {
-        loadConfig:{
-            method: LoadMethod.loadPdbIds,
-            params: [{
-                pdbId:args.pdbId,
-                id:"1"
-            },{
-                pdbId:"2uzi",
-                id:"2"
-            },{
-                pdbId:"101m",
-                id:"3"
-            },{
-                pdbId:"1ash",
-                id:"4"
-            }]
-        },
-        pluginConfig: {
-            showImportControls: true,
-            showSessionControls: false
-        }
+    const sequenceConfig = {
+        entryId:args.pdbId,
+        title: args.pdbId,
+        subtitle: "Subtitle for "+args.pdbId
     };
 
-    const sequenceConfig: SequenceViewInterface = {
-        type: "assembly",
-        config: {
-           entryId:args.pdbId
-        }
-    };
-
-    const panel3d = new RcsbFv3DBuilder({
+    const panel3d = new RcsbFv3DAssembly({
         elementId: "pfv",
-        structurePanelConfig: structureConfig,
-        sequencePanelConfig: sequenceConfig
+        config: sequenceConfig,
+        /*cssConfig:{
+            rootPanel:{
+                flexDirection:"column"
+            },
+            structurePanel:{
+                height:800,
+                width:800
+            },
+            sequencePanel:{
+                width:800
+            }
+        }*/
     });
     panel3d.render();
 

src/examples/custom-panel/example.html

@@ -4,8 +4,6 @@
     <title>Saguaro 3D</title>
 </head>
 <body>
-
-<div id="pfv" style="margin-top: 200px;" ></div>
-
+    <div id="pfv" style="position:relative"></div>
 </body>
 </html>

src/examples/custom-panel/example.tsx

@@ -1,4 +1,4 @@
-import {RcsbFv3DBuilder} from "../../RcsbFv3DBuilder";
+import {RcsbFv3DCustomBuilder} from "../../RcsbFv3D/RcsbFv3DCustom";
 import {StructureViewInterface} from "../../RcsbFvStructure/RcsbFvStructure";
 import {SequenceViewInterface} from "../../RcsbFvSequence/RcsbFvSequence";
 
@@ -74,7 +74,6 @@ const fv1: FeatureViewInterface = {
             min: 1,
             max: 110
         },
-        trackWidth: 940,
         rowTitleWidth: 60,
         includeAxis: true
     },
@@ -99,7 +98,6 @@ const fv2: FeatureViewInterface = {
             min: 1,
             max: 150
         },
-        trackWidth: 940,
         rowTitleWidth: 60,
         includeAxis: true
     },
@@ -169,8 +167,7 @@ const customConfig: CustomViewInterface = {
     modelChangeCallback:modelChangeCallback
 }
 
-const sequenceConfig: SequenceViewInterface = {
-    type: "custom",
+const sequenceConfig = {
     config: customConfig
 };
 
@@ -192,10 +189,19 @@ const structureConfig:StructureViewInterface = {
 };
 
 document.addEventListener("DOMContentLoaded", function(event) {
-    const panel3d = new RcsbFv3DBuilder({
+    const panel3d = new RcsbFv3DCustomBuilder({
         elementId: "pfv",
         structurePanelConfig: structureConfig,
-        sequencePanelConfig: sequenceConfig
+        sequencePanelConfig: sequenceConfig,
+        cssConfig:{
+            structurePanel:{
+                minWidth:800,
+                minHeight:800
+            },
+            sequencePanel:{
+                minWidth:800
+            }
+        }
     });
     panel3d.render();
 });

src/styles/RcsbFvStyle.module.scss

@@ -1,21 +1,34 @@
-
-.rcsbFvMain {
+.fullScreen {
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
+}
+
+.rcsbFvMain {
   display: flex;
+  flex-wrap: nowrap;
+  width: 100%;
+  height: 100%;
   background-color: #fff;
   z-index: 1000000;
 }
 
+.rcsbFvMain > div {
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: row;
+  flex-flow: row wrap;
+}
+
 .rcsbFvMain * {
   box-sizing: border-box;
 }
 
 .rcsbFvCell {
-  display: inline-block;
+
 }
 
 .rcsbFvSubtitle {

webpack.config.js

@@ -41,7 +41,7 @@ const commonConfig = {
 const appConfig = {
     ...commonConfig,
     entry: {
-        'RcsbFv3D':'./build/src/RcsbFv3DBuilder.js',
+        'RcsbFv3DCustom':'./build/src/RcsbFv3D/RcsbFv3DCustom.js',
         'rcsb-saguaro-3d':'./build/src/RcsbSaguaro3D.js'
     },
     mode: "production",