molstar select/object change callbacks

examples/local.html

@@ -18,7 +18,53 @@
         return result;
     }
     const args = getJsonFromUrl();
-    const fv = new RcsbFv3D.Create("pfv", args.entryId);
+    const structurePanelConfig = {
+        loadConfig:{
+            method:"loadPdbId",
+            pdbId: args.entryId
+        }
+    };
+    /*const sequencePanelConfig = {
+        type: "assembly",
+        blockConfig: {
+            entryId:args.entryId
+        }
+    };*/
+    const sequencePanelConfig = {
+        type: "custom",
+        config: {
+            boardConfig: {
+                range: {
+                    min: 1,
+                    max: 110
+                },
+                trackWidth: 940,
+                rowTitleWidth: 60,
+                includeAxis: true
+            },
+            rowConfig: [{
+                trackId: "blockTrack",
+                trackHeight: 20,
+                trackColor: "#F9F9F9",
+                displayType: "block",
+                displayColor: "#FF0000",
+                rowTitle: "BLOCK",
+                trackData: [{
+                    begin: 30,
+                    end: 60,
+                    gaps:[{
+                        begin:40,
+                        end:50
+                    }]
+                },{
+                    begin: 80,
+                    end: 90,
+                    openEnd: true
+                }]
+            }]
+        }
+    };
+    const fv = new RcsbFv3D.Create(structureConfig, sequenceConfig);
     fv.render();
 </script>
 

package.json

@@ -2,20 +2,26 @@
   "name": "@bioinsilico/rcsb-saguaro-3d",
   "version": "0.0.8",
   "description": "RCSB Molstar/Saguaro Web App",
-  "main": "dist/build/RcsbFv3DBuilder.js",
+  "main": "build/dist/RcsbFv3DBuilder.js",
   "files": [
-    "dist/build/rcsb-saguaro-3d.js",
-    "dist/build/config.js",
-    "dist/build/*ts"
+    "build/dist/rcsb-saguaro-3d.js",
+    "build/dist/config.js",
+    "build/dist/*ts"
   ],
   "scripts": {
     "tsc": "tsc",
+    "tscExamples": "tsc --project ./tsconfig.examples.json",
     "build": "webpack --config ./webpack.config.js",
-    "buildApp": "npm run cleanAll && npm run tsc && npm run cpStyles && npm run copyConfig && npm run build && npm run clean",
-    "cpStyles": "ncp src/styles dist/src/styles",
-    "copyConfig": "ncp dist/src/config.js dist/build/config.js",
-    "clean": "del-cli dist/src",
-    "cleanAll": "npm run clean && del-cli dist/build",
+    "buildApp": "npm run cleanAll && npm run tsc && npm run cpStyles && npm run copyConfig && npm run build && npm run tscExamples && npm run copyHtml && npm run buildExamples && npm run clean",
+    "buildExamples": "webpack --config ./webpack.examples.config.js",
+    "buildOnlyExamples": "npm run cleanAll && npm run tscExamples && npm run cpStyles && npm run copyHtml && npm run buildExamples && npm run clean",
+    "cpStyles": "ncp src/styles build/src/styles",
+    "copyConfig": "ncp build/src/config.js build/dist/config.js",
+    "copyHtml": "npm run copyHtml_1 && npm run copyHtml_3",
+    "copyHtml_1": "ncp src/examples/custom-panel/example.html build/src/examples/custom-panel/example.html",
+    "copyHtml_3": "ncp src/examples/assembly/example.html build/src/examples/assembly/example.html",
+    "clean": "del-cli build/src",
+    "cleanAll": "npm run clean && del-cli build/dist",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "repository": {
@@ -44,28 +50,34 @@
     "@babel/core": "^7.10.4",
     "@babel/plugin-proposal-class-properties": "^7.10.4",
     "@babel/preset-env": "^7.10.4",
-    "@types/react": "^16.9.41",
+    "@types/react": "^16.9.49",
     "@types/react-dom": "^16.9.8",
     "babel-loader": "^8.1.0",
+    "concurrently": "^5.3.0",
     "css-loader": "^3.6.0",
     "del-cli": "^3.0.1",
+    "file-loader": "^6.2.0",
     "mini-css-extract-plugin": "^0.9.0",
     "ncp": "^2.0.0",
     "node-sass": "^4.14.1",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-icons": "^3.11.0",
+    "rxjs": "^6.6.3",
     "sass-loader": "^7.3.1",
     "style-loader": "^1.2.1",
     "ts-loader": "^6.2.2",
+    "tslib": "^2.0.1",
     "typedoc": "^0.17.8",
-    "typescript": "^3.9.6",
-    "webpack": "^4.43.0",
+    "typescript": "4.0.2",
+    "webpack": "^4.44.1",
     "webpack-cli": "^3.3.12"
   },
   "dependencies": {
-    "@bioinsilico/rcsb-saguaro-app": "^0.9.24",
-    "molstar": "^1.1.33"
+    "@rcsb-bioinsilico/rcsb-molstar": "^1.0.24",
+    "@rcsb/rcsb-saguaro": "^1.0.2",
+    "@rcsb/rcsb-saguaro-app": "^1.0.9",
+    "molstar": "^1.2.3"
   },
   "bugs": {
     "url": "https://github.com/rcsb/rcsb-saguaro-3d/issues"

src/RcsbFv3D.tsx

@@ -1,103 +1,103 @@
-
-import {setBoardConfig, buildAssemblySequenceFv, getRcsbFv, unmount } from '@bioinsilico/rcsb-saguaro-app';
-import {RcsbFvMolstar} from './RcsbFvMolstar';
 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 {RcsbFvDOMConstants} from "./RcsbFvConstants";
+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";
 
-interface RcsbFv3DInterface {
-    entryId: string;
-    closeCallback: () => void;
-    title?: string;
-    subtitle?: string;
+export interface RcsbFv3DInterface {
+    structurePanelConfig:StructureViewInterface;
+    sequencePanelConfig: SequenceViewInterface;
+    id: string;
+    ctxManager: RcsbFvContextManager;
 }
 
-export class RcsbFv3D extends React.Component <RcsbFv3DInterface, RcsbFv3DInterface > {
+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;
 
-    private currentAsymId: string;
-    private readonly pfvScreenFraction = 0.55;
-    private msPlugin: RcsbFvMolstar;
+    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 {
-        document.body.style.overflow = "hidden";
         return (
             <div className={classes.rcsbFvMain} >
-                    <div id={RcsbFvDOMConstants.MOLSTAR_ID} style={{width:Math.round((1-this.pfvScreenFraction)*100).toString()+"%"}} className={classes.rcsbFvCell}>
-                        <div id={RcsbFvDOMConstants.MOLSTAR_APP_ID} style={{position: "absolute", width:Math.round((1-this.pfvScreenFraction)*100).toString()+"%", height:"100%"}} />
-                    </div>
-                    <div className={classes.rcsbFvCell} style={{width:Math.round((this.pfvScreenFraction)*100).toString()+"%", paddingLeft: 10, paddingTop:10, borderLeft: "1px solid #ccc"}} >
-                        {this.createTitle()}
-                        {this.createSubtitle()}
-                        <div>
-                            <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>
-                        <div id={RcsbFvDOMConstants.PFV_ID} >
-                            <div id ={RcsbFvDOMConstants.PFV_APP_ID} />
-                        </div>
-                    </div>
-                <div id={RcsbFvDOMConstants.CLOSE_ID} className={classes.rcsbFvClose} onClick={this.close.bind(this)}>CLOSE</div>
+                <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>
         );
     }
 
-    private close(): void {
-        document.body.style.overflow = "visible";
-        unmount(RcsbFvDOMConstants.PFV_APP_ID);
-        this.props.closeCallback();
+    componentDidMount() {
+        this.subscription = this.subscribe();
     }
 
-    private createTitle(): JSX.Element | null{
-        if(this.props.title)
-            return (<div id={RcsbFvDOMConstants.TITLE_ID} className={classes.rcsbFvTitle}>{this.props.title}</div>)
-        return null;
-    }
-
-    private createSubtitle(): JSX.Element | null{
-        if(this.props.subtitle)
-            return (<div id={RcsbFvDOMConstants.SUBTITLE_ID} className={classes.rcsbFvSubtitle}>{this.props.subtitle}</div>)
-        return null;
+    componentWillUnmount() {
+        this.unsubscribe();
     }
 
-    componentDidMount(): void {
-        this.msPlugin = new RcsbFvMolstar(RcsbFvDOMConstants.MOLSTAR_APP_ID);
-        this.msPlugin.setBackground(0xffffff);
-        this.msPlugin.load({url:'//files.rcsb.org/download/'+this.props.entryId+'.cif'});
-        const width: number = window.innerWidth*this.pfvScreenFraction;
-        const trackWidth: number = width - 190 - 55;
-        setBoardConfig({
-            trackWidth: trackWidth,
-            elementClickCallBack:(e:{begin:number, end:number|undefined})=>{
-                if(e == null)
-                    return;
-                const x = e.begin;
-                const y = e.end ?? e.begin;
-                this.msPlugin.interactivity.select(this.currentAsymId, x, y);
+    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));
             }
         });
-        buildAssemblySequenceFv(
-            RcsbFvDOMConstants.PFV_APP_ID,
-            RcsbFvDOMConstants.SELECT_ASSEMBLY_PFV_ID,
-            RcsbFvDOMConstants.SELECT_INSTANCE_PFV_ID,
-            this.props.entryId,
-            (x)=>{
-                this.msPlugin.load({url:'//files.rcsb.org/download/'+this.props.entryId+'.cif', assemblyId: x == "Model" ? "" : x});
-            },
-            (x)=>{
-            this.currentAsymId = x.asymId;
-            }
-        );
-        window.addEventListener('resize', this.updatePfvDimensions.bind(this));
     }
 
-    componentWillUnmount() {
-        window.removeEventListener('resize', this.updatePfvDimensions.bind(this));
+    /**Unsubscribe className to rxjs events. Useful if many panels are created an destroyed.*/
+    private unsubscribe(): void{
+        this.subscription.unsubscribe();
     }
 
-    private updatePfvDimensions(): void{
-        const width: number = window.innerWidth*this.pfvScreenFraction;
-        const trackWidth: number = width - 190 - 55;
-        getRcsbFv(RcsbFvDOMConstants.PFV_APP_ID).updateBoardConfig({boardConfigData:{trackWidth:trackWidth}});
+    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/RcsbFv3DBuilder.tsx

@@ -1,43 +1,70 @@
 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";
+import {RcsbFv, RcsbFvTrackDataElementInterface} from "@rcsb/rcsb-saguaro";
+
+export interface RcsbFv3DBuilderInterface {
+    elementId: string;
+    structurePanelConfig: StructureViewInterface;
+    sequencePanelConfig: SequenceViewInterface;
+}
 
 export class RcsbFv3DBuilder {
 
     private elementId: string;
-    private entryId: string;
-    private title: string | undefined;
-    private subtitle: string | undefined;
-
-    constructor(entryId: string, title?: string, subtitle?: string, domId?: string) {
-        this.elementId = domId ?? "RcsbFv3D_"+Math.random().toString(36).substr(2);
-        this.entryId = entryId;
-        this.title = title;
-        this.subtitle = subtitle;
+    private structureConfig: StructureViewInterface;
+    private sequenceConfig: SequenceViewInterface;
+    private ctxManager: RcsbFvContextManager = new RcsbFvContextManager();
+
+    constructor(config?: RcsbFv3DBuilderInterface) {
+        if(config != null)
+            this.init(config);
     }
 
-    render(): void{
-        if(this.entryId == null)
-            throw "PDB entry Id not found";
+    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)
+            element.setAttribute("id", this.elementId);
             document.body.append(element);
         }
 
         ReactDom.render(
-            <RcsbFv3D entryId={this.entryId} title={this.title} subtitle={this.subtitle} closeCallback={this.close.bind(this)}/>,
+            <RcsbFv3D
+                structurePanelConfig={this.structureConfig}
+                sequencePanelConfig={this.sequenceConfig}
+                id={"RcsbFv3D_innerDiv_"+Math.random().toString(36).substr(2)}
+                ctxManager={this.ctxManager}
+            />,
             element
         );
     }
 
-    private close(): void{
+    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/RcsbFvConstants.ts → src/RcsbFvConstants/RcsbFvConstants.ts

@@ -1,11 +1,11 @@
 export enum RcsbFvDOMConstants {
     SELECT_ASSEMBLY_PFV_ID = "selectAssemblyPfv",
     SELECT_INSTANCE_PFV_ID = "selectInstancePfv",
-    PFV_ID = "pfvDiv",
     PFV_APP_ID = "pfvApp",
-    MOLSTAR_ID= "molstarDiv",
+    PFV_DIV = "pfvDiv",
+    MOLSTAR_DIV= "molstarDiv",
     MOLSTAR_APP_ID = "molstarApp",
     TITLE_ID = "titleDivId",
-    SUBTITLE_ID = "subtitleDivId",
-    CLOSE_ID = "closeDivId"
+    SUBTITLE_ID = "subtitleDiv",
+    CLOSE_ID = "closeDiv"
 }

src/RcsbFvContextManager/RcsbFvContextManager.ts

@@ -0,0 +1,42 @@
+import {Subject, Subscription} from 'rxjs';
+import {StructureViewInterface} from "../RcsbFvStructure/RcsbFvStructure";
+import {SequenceViewInterface} from "../RcsbFvSequence/RcsbFvSequence";
+import {PluginContext} from "molstar/lib/mol-plugin/context";
+
+/**Main Event Data Object Interface*/
+export interface RcsbFvContextManagerInterface {
+    eventType: EventType;
+    eventData: string | UpdateConfigInterface | ((plugin: PluginContext) => void);
+}
+
+/**Event types*/
+export enum EventType {
+    UPDATE_CONFIG = "updateBoardConfig",
+    PLUGIN_CALL = "pluginCall"
+}
+
+export interface UpdateConfigInterface {
+    structurePanelConfig?:StructureViewInterface;
+    sequencePanelConfig?:SequenceViewInterface;
+}
+
+/**rxjs Event Handler Object. It allows objects to subscribe methods and then, get(send) events to(from) other objects*/
+export class RcsbFvContextManager {
+    private readonly subject: Subject<RcsbFvContextManagerInterface> = new Subject<RcsbFvContextManagerInterface>();
+    /**Call other subscribed methods
+     * @param obj Event Data Structure Interface
+     * */
+    public next( obj: RcsbFvContextManagerInterface ):void {
+        this.subject.next(obj);
+    }
+    /**Subscribe method
+     * @return Subscription
+     * */
+    public subscribe(f:(x:RcsbFvContextManagerInterface)=>void):Subscription {
+        return this.subject.asObservable().subscribe(f);
+    }
+    /**Unsubscribe all methods*/
+    public unsubscribeAll():void {
+        this.subject.unsubscribe();
+    }
+}

src/RcsbFvMolstar.ts

@@ -1,84 +0,0 @@
-import {EmptyLoci} from 'molstar/lib/mol-model/loci';
-import { StructureSelection } from 'molstar/lib/mol-model/structure';
-import { createPlugin, DefaultPluginSpec } from 'molstar/lib/mol-plugin';
-import { BuiltInTrajectoryFormat } from 'molstar/lib/mol-plugin-state/formats/trajectory';
-import { PluginCommands } from 'molstar/lib/mol-plugin/commands';
-import { PluginContext } from 'molstar/lib/mol-plugin/context';
-import { Script } from 'molstar/lib/mol-script/script';
-import { Color } from 'molstar/lib/mol-util/color';
-import { Asset } from 'molstar/lib/mol-util/assets';
-import {MolScriptBuilder} from 'molstar/lib/mol-script/language/builder';
-import {SetUtils} from 'molstar/lib/mol-util/set';
-
-type LoadParams = { url: string, format?: BuiltInTrajectoryFormat, isBinary?: boolean, assemblyId?: string }
-
-export class RcsbFvMolstar {
-    plugin: PluginContext;
-
-    constructor(target: string | HTMLElement) {
-        this.plugin = createPlugin(typeof target === 'string' ? document.getElementById(target)! : target, {
-            ...DefaultPluginSpec,
-            layout: {
-                initial: {
-                    isExpanded: false,
-                    showControls: false
-                },
-                controls: {
-                    top: 'none'
-                }
-            },
-            components: {
-                remoteState: 'none'
-            }
-        });
-    }
-
-    async load({ url, format = 'mmcif', isBinary = false, assemblyId = '' }: LoadParams) {
-        await this.plugin.clear();
-
-        const data = await this.plugin.builders.data.download({ url: Asset.Url(url), isBinary }, { state: { isGhost: true } });
-        const trajectory = await this.plugin.builders.structure.parseTrajectory(data, format);
-
-        await this.plugin.builders.structure.hierarchy.applyPreset(trajectory, 'default', {
-            structure: assemblyId ? {
-                name: 'assembly',
-                params: { id: assemblyId }
-            } : {
-                name: 'model',
-                params: { }
-            },
-            showUnitcell: false,
-            representationPreset: 'auto'
-        });
-    }
-
-    setBackground(color: number) {
-        PluginCommands.Canvas3D.SetSettings(this.plugin, {
-            settings: props => {
-                props.renderer.backgroundColor = Color(color);
-            }
-        });
-    }
-
-    interactivity = {
-        select: (asymId: string, x: number, y: number) => {
-            const data = this.plugin.managers.structure.hierarchy.current.structures[0]?.cell.obj?.data;
-            if (!data) return;
-            const MS = MolScriptBuilder;
-            const seq_id: Array<number> = new Array<number>();
-            for(let n = x; n <= y; n++){
-                seq_id.push(n);
-            }
-            const sel = Script.getStructureSelection(Q => Q.struct.generator.atomGroups({
-                'chain-test': Q.core.rel.eq([asymId, MS.ammp('label_asym_id')]),
-                'residue-test': Q.core.set.has([MS.set(...SetUtils.toArray(new Set(seq_id))), MS.ammp('label_seq_id')])
-            }), data);
-            const loci = StructureSelection.toLociWithSourceUnits(sel);
-            this.plugin.managers.structure.selection.fromLoci('set', loci);
-        },
-        clearSelect: () => {
-            this.plugin.managers.interactivity.lociHighlights.highlightOnly({ loci: EmptyLoci });
-        }
-    }
-
-}

src/RcsbFvSelection/RcsbFvSelection.ts

@@ -0,0 +1,74 @@
+
+export interface ResidueSelectionInterface {
+    modelId: string;
+    labelAsymId: string;
+    seqIds: Set<number>;
+}
+
+export interface ChainSelectionInterface {
+    modelId: string;
+    labelAsymId: string;
+    regions: Array<{begin:number;end:number}>;
+}
+
+export class RcsbFvSelection {
+
+    private selection: Array<ChainSelectionInterface> = new Array<ChainSelectionInterface>();
+
+    public setSelectionFromRegion(modelId: string, labelAsymId: string, region: {begin:number, end:number}): void {
+        this.selection = new Array<ChainSelectionInterface>();
+        this.selection.push({modelId:modelId, labelAsymId:labelAsymId, regions:[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=>{
+            if(!selMap.has(r.modelId))
+                selMap.set(r.modelId,new Map<string, Set<number>>());
+            if(!selMap.get(r.modelId)!.has(r.labelAsymId))
+                selMap.get(r.modelId)!.set(r.labelAsymId, new Set<number>());
+            r.seqIds.forEach(s=>{
+                selMap.get(r.modelId)!.get(r.labelAsymId)!.add(s);
+            })
+        });
+        this.selection = new Array<ChainSelectionInterface>();
+        selMap.forEach((labelMap, modelId)=>{
+            labelMap.forEach((seqSet,labelId)=>{
+                this.selection.push({modelId:modelId, labelAsymId: labelId, regions:RcsbFvSelection.buildIntervals(seqSet)});
+            });
+        });
+    }
+
+    public getSelection(): Array<ChainSelectionInterface> {
+        return this.selection;
+    }
+
+    public getSelectionWithCondition(modelId: string, labelAsymId: string): ChainSelectionInterface | undefined{
+        const sel: Array<ChainSelectionInterface> = this.selection.filter(d=>(d.modelId===modelId && d.labelAsymId === labelAsymId));
+        if(sel.length > 0)
+            return sel[0]
+    }
+
+    public clearSelection(): void {
+        this.selection = new Array<ChainSelectionInterface>();
+    }
+
+    private static buildIntervals(ids: Set<number>): Array<{begin:number,end:number}>{
+        const out: Array<{begin:number,end:number}> = new Array<{begin: number; end: number}>();
+        const sorted: Array<number> = Array.from(ids).sort((a,b)=>(a-b));
+        let begin: number = sorted.shift()!;
+        let end: number = begin;
+        for(const n of sorted){
+            if(n==(end+1)){
+                end = n;
+            }else{
+                out.push({begin:begin,end:end});
+                begin = n;
+                end = n;
+            }
+        }
+        out.push({begin:begin,end:end});
+        return out;
+    }
+
+}

src/RcsbFvSequence/RcsbFvSequence.tsx

@@ -0,0 +1,42 @@
+import * as React from "react";
+import {AssemblyView, AssemblyViewInterface} from "./SequenceViews/AssemblyView";
+import {CustomView, CustomViewInterface} from "./SequenceViews/CustomView";
+import {SaguaroPluginInterface} from "../RcsbFvStructure/StructurePlugins/SaguaroPluginInterface";
+import {PluginContext} from "molstar/lib/mol-plugin/context";
+import {RcsbFv, RcsbFvTrackDataElementInterface} from "@rcsb/rcsb-saguaro";
+import {RcsbFvSelection} from "../RcsbFvSelection/RcsbFvSelection";
+
+export interface SequenceViewInterface{
+    type: "custom" | "assembly";
+    config: AssemblyViewInterface | CustomViewInterface;
+
+}
+
+interface CallbackConfig {
+    structureCallback?: (plugin: PluginContext, ann: RcsbFvTrackDataElementInterface)=>void;
+    sequenceCallback?: (rcsbFv: RcsbFv)=>void;
+}
+
+export class RcsbFvSequence extends React.Component <SequenceViewInterface & CallbackConfig & {plugin: SaguaroPluginInterface, selection:RcsbFvSelection, componentId:string}, SequenceViewInterface > {
+
+    render() {
+        if(this.props.type == "custom"){
+            const config: CustomViewInterface = this.props.config as CustomViewInterface;
+            return (<CustomView
+                {...config}
+                componentId={this.props.componentId}
+                plugin={this.props.plugin}
+                selection={this.props.selection}
+            />)
+        }else if(this.props.type == "assembly"){
+            const config: AssemblyViewInterface = this.props.config as AssemblyViewInterface;
+            return (<AssemblyView
+                {...config}
+                componentId={this.props.componentId}
+                plugin={this.props.plugin}
+                selection={this.props.selection}
+            />)
+        }
+    }
+
+}

src/RcsbFvSequence/SequenceViews/AbstractView.tsx

@@ -0,0 +1,67 @@
+import * as React from "react";
+import * as classes from '../../styles/RcsbFvStyle.module.scss';
+import {RcsbFvDOMConstants} from "../../RcsbFvConstants/RcsbFvConstants";
+import {SaguaroPluginInterface} from "../../RcsbFvStructure/StructurePlugins/SaguaroPluginInterface";
+import {PluginContext} from "molstar/lib/mol-plugin/context";
+import {RcsbFv, RcsbFvTrackDataElementInterface} from "@rcsb/rcsb-saguaro";
+import { RcsbFvSelection} from "../../RcsbFvSelection/RcsbFvSelection";
+
+export interface AbstractViewInterface {
+    componentId: string;
+    title?: string;
+    subtitle?: string;
+    plugin: SaguaroPluginInterface;
+    selection: RcsbFvSelection;
+}
+
+export abstract class AbstractView<P,S> extends React.Component <P & AbstractViewInterface, S & AbstractViewInterface> {
+
+    protected componentDivId: string;
+    protected pfvDivId: string;
+
+    constructor(props:P & AbstractViewInterface) {
+        super(props);
+        this.componentDivId = props.componentId+"_"+RcsbFvDOMConstants.PFV_DIV;
+        this.pfvDivId = props.componentId+"_"+RcsbFvDOMConstants.PFV_APP_ID;
+    }
+
+    render():JSX.Element {
+        return (
+                <div id={this.componentDivId} style={{width: "100%", height:"100%"}} >
+                    {this.createTitle()}
+                    {this.createSubtitle()}
+                    {this.additionalContent()}
+                    <div id ={this.pfvDivId} />
+                </div>
+        );
+    }
+
+    componentDidMount() {
+        this.props.plugin.selectCallback(this.structureSelectionCallback.bind(this));
+        this.props.plugin.objectChangeCallback(this.objectChangeCallback.bind(this));
+        window.addEventListener('resize', this.updatePfvDimensions.bind(this));
+    }
+
+    private createTitle(): JSX.Element | null{
+        if(this.props.title)
+            return (<div id={RcsbFvDOMConstants.TITLE_ID} className={classes.rcsbFvTitle}>{this.props.title}</div>)
+        return null;
+    }
+
+    private createSubtitle(): JSX.Element | null{
+        if(this.props.subtitle)
+            return (<div id={RcsbFvDOMConstants.SUBTITLE_ID} className={classes.rcsbFvSubtitle}>{this.props.subtitle}</div>)
+        return null;
+    }
+
+    protected structureSelectionCallback(): void{}
+
+    protected objectChangeCallback(): void{}
+
+    protected updatePfvDimensions(): void{}
+
+    protected additionalContent(): JSX.Element | null {
+        return null;
+    }
+
+}

src/RcsbFvSequence/SequenceViews/AssemblyView.tsx

@@ -0,0 +1,99 @@
+import {RcsbFvDOMConstants} from "../../RcsbFvConstants/RcsbFvConstants";
+import * as React from "react";
+import {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";
+import {ChainSelectionInterface} from "../../RcsbFvSelection/RcsbFvSelection";
+
+export interface AssemblyViewInterface {
+    entryId: string;
+}
+
+export class AssemblyView extends AbstractView<AssemblyViewInterface & AbstractViewInterface, AssemblyViewInterface & AbstractViewInterface>{
+
+    private currentLabelId: string;
+    private currentEntryId: string;
+    private currentModelId: string;
+
+    constructor(props: AssemblyViewInterface & AbstractViewInterface) {
+        super({
+            ...props
+        });
+    }
+
+    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>
+        );
+    }
+
+    componentDidMount (): void {
+        super.componentDidMount();
+        const width: number | undefined = document.getElementById(this.componentDivId)?.getBoundingClientRect().width;
+        if(width == null)
+            return;
+        const trackWidth: number = width - 190 - 55;
+        setBoardConfig({
+            trackWidth: trackWidth,
+            elementClickCallBack:(e: RcsbFvTrackDataElementInterface)=>{
+                if(e == null)
+                    return;
+                const x = e.begin;
+                const y = e.end ?? e.begin;
+                this.props.plugin.clearSelect();
+                this.props.plugin.select(this.currentModelId, this.currentLabelId,x,y);
+                this.props.selection.setSelectionFromRegion(this.currentModelId, this.currentLabelId, {begin:x, end:y});
+            }
+        });
+    }
+
+    componentWillUnmount() {
+        unmount(this.pfvDivId);
+    }
+
+    protected structureSelectionCallback(): void{
+        const sel: ChainSelectionInterface | undefined = this.props.selection.getSelectionWithCondition(this.currentModelId, this.currentLabelId)
+        if(sel == null)
+            getRcsbFv(this.pfvDivId).clearSelection();
+        else
+            getRcsbFv(this.pfvDivId).setSelection(sel.regions);
+    }
+
+    protected objectChangeCallback() {
+        const chainMap:Map<string,{entryId: string; chains:Array<{label:string, auth:string}>;}> = this.props.plugin.getChains();
+        const onChangeCallback: Map<string, (x: InstanceSequenceOnchangeInterface)=>void> = new Map<string, (x: InstanceSequenceOnchangeInterface) => {}>();
+        const filterInstances: Map<string, Set<string>> = new Map<string, Set<string>>();
+        chainMap.forEach((v,k)=>{
+            onChangeCallback.set(v.entryId,(x)=>{
+                this.currentEntryId = v.entryId;
+                this.currentLabelId = x.asymId;
+                this.currentModelId = k;
+                setTimeout(()=>{
+                    this.structureSelectionCallback();
+                },1000);
+            });
+            filterInstances.set(v.entryId,new Set<string>(v.chains.map(d=>d.label)));
+        });
+        unmount(this.pfvDivId);
+        buildMultipleInstanceSequenceFv(
+            this.pfvDivId,
+            RcsbFvDOMConstants.SELECT_ASSEMBLY_PFV_ID,
+            RcsbFvDOMConstants.SELECT_INSTANCE_PFV_ID,
+            Array.from(chainMap.values()).map(d=>d.entryId),
+            undefined,
+            onChangeCallback,
+            filterInstances
+        );
+    }
+
+    protected updatePfvDimensions(): 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

@@ -0,0 +1,152 @@
+import {AbstractView, AbstractViewInterface} from "./AbstractView";
+import {
+    RcsbFvBoardConfigInterface,
+    RcsbFvRowConfigInterface,
+    RcsbFv,
+    RcsbFvTrackDataElementInterface
+} from "@rcsb/rcsb-saguaro";
+import * as React from "react";
+import {RcsbFvSelection} from "../../RcsbFvSelection/RcsbFvSelection";
+import {PluginContext} from "molstar/lib/mol-plugin/context";
+
+export interface CustomViewInterface {
+    config: FeatureBlockInterface | Array<FeatureBlockInterface>;
+    additionalContent?: (select: BlockViewSelector) => JSX.Element;
+}
+
+export interface FeatureBlockInterface {
+    blockId:string;
+    blockTitle?: string;
+    blockShortName?: string;
+    blockConfig: Array<FeatureViewInterface> | FeatureViewInterface;
+}
+
+export interface FeatureViewInterface {
+    boardId?:string;
+    boardConfig: RcsbFvBoardConfigInterface;
+    rowConfig: Array<RcsbFvRowConfigInterface>;
+    sequenceSelectionCallback: (plugin: PluginContext, selection: RcsbFvSelection, d: RcsbFvTrackDataElementInterface) => void;
+    structureSelectionCallback: (pfv: RcsbFv, selection: RcsbFvSelection) => void;
+}
+
+export class BlockViewSelector {
+    private blockId: string;
+    private previousBlockId: string;
+    private blockChangeCallback: ()=>void = ()=>{};
+    constructor(f:()=>void){
+        this.blockChangeCallback = f;
+    }
+    setActiveBlock(blockId:string): void{
+        this.previousBlockId = this.blockId;
+        this.blockId = blockId;
+        this.blockChangeCallback();
+    }
+    getActiveBlock(): string{
+        return this.blockId;
+    }
+    getPreviousBlock(): string{
+        return this.previousBlockId;
+    }
+}
+
+export class CustomView extends AbstractView<CustomViewInterface & AbstractViewInterface, CustomViewInterface & AbstractViewInterface> {
+
+    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>();
+
+    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.blockViewSelector.setActiveBlock( (props.config instanceof Array ? props.config : [props.config])[0].blockId! );
+    }
+
+    componentDidMount(): void {
+        super.componentDidMount();
+        this.buildBlockFv();
+    }
+
+    componentWillUnmount() {
+        this.rcsbFvMap.forEach((pfv,id)=>{
+            pfv.unmount();
+        });
+    }
+
+    private blockChange(): void{
+        this.unmountBlockFv();
+    }
+
+    private unmountBlockFv(){
+        this.blockMap.get(this.blockViewSelector.getPreviousBlock())?.forEach(boardId=>{
+            if(this.rcsbFvMap.get(boardId) == null)
+                return;
+            this.rcsbFvMap.get(boardId)!.unmount();
+            document.getElementById("boardDiv_"+boardId)?.remove()
+        });
+        this.rcsbFvMap.clear();
+    }
+
+    private buildBlockFv(){
+        this.blockMap.get(this.blockViewSelector.getActiveBlock())?.forEach(boardId=>{
+            if(this.boardMap.get(boardId) == null)
+                return;
+            const div: HTMLDivElement = document.createElement<"div">("div");
+            div.setAttribute("id", "boardDiv_"+boardId)
+            document.getElementById(this.componentDivId)?.append(div);
+            const rcsbFv: RcsbFv = new RcsbFv({
+                elementId: "boardDiv_"+boardId,
+                boardConfigData:{
+                    ...this.boardMap.get(boardId)!.boardConfig,
+                    elementClickCallBack:(d:RcsbFvTrackDataElementInterface)=>{
+                        this.props.plugin.pluginCall((plugin: PluginContext)=>{
+                            this.boardMap.get(boardId)!.sequenceSelectionCallback(plugin, this.props.selection, d);
+                        });
+                    }
+                },
+                rowConfigData: this.boardMap.get(boardId)!.rowConfig
+            });
+            this.rcsbFvMap.set(boardId, rcsbFv);
+        });
+        this.props.plugin.selectCallback(()=>{
+            this.blockMap.get(this.blockViewSelector.getActiveBlock())?.forEach(boardId=> {
+                if (this.boardMap.get(boardId) == null)
+                    return;
+                this.boardMap.get(boardId)!.structureSelectionCallback(
+                    this.rcsbFvMap.get(boardId)!,
+                    this.props.selection
+                )
+            });
+        });
+    }
+
+    protected structureSelectionCallback(): void {
+        this.blockMap.get(this.blockViewSelector.getActiveBlock())?.forEach(boardId=>{
+            const pfv: RcsbFv | undefined = this.rcsbFvMap.get(boardId);
+            if(pfv == null)
+                return;
+            this.boardMap.get(boardId)?.structureSelectionCallback(pfv, this.props.selection);
+        });
+    }
+
+    protected additionalContent(): JSX.Element {
+        if(this.props.additionalContent == null)
+            return <></>;
+        return this.props.additionalContent(this.blockViewSelector);
+    }
+
+    protected objectChangeCallback(): void {}
+
+    protected updatePfvDimensions(): void {}
+
+}

src/RcsbFvStructure/RcsbFvStructure.tsx

@@ -0,0 +1,45 @@
+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 {LoadMolstarInterface} from "./StructurePlugins/MolstarPlugin";
+import {RcsbFvSelection} from "../RcsbFvSelection/RcsbFvSelection";
+
+export interface StructureViewInterface {
+    loadConfig: LoadMolstarInterface;
+    pluginConfig?: Partial<ViewerProps>;
+}
+
+export class RcsbFvStructure extends React.Component <StructureViewInterface & {plugin: SaguaroPluginInterface, componentId: string, selection: RcsbFvSelection}, StructureViewInterface > {
+
+    render():JSX.Element {
+        return (
+            <div id={this.props.componentId+"_"+RcsbFvDOMConstants.MOLSTAR_DIV} >
+                <div id={this.props.componentId+"_"+RcsbFvDOMConstants.MOLSTAR_APP_ID} style={{position:"absolute"}}/>
+            </div>
+        );
+    }
+
+    componentDidMount() {
+        this.updatePfvDimensions();
+        this.props.plugin.init(this.props.componentId+"_"+RcsbFvDOMConstants.MOLSTAR_APP_ID);
+        this.props.plugin.load(this.props.loadConfig);
+        window.addEventListener('resize', this.updatePfvDimensions.bind(this));
+    }
+
+    private updatePfvDimensions(): void {
+        const rect: DOMRect | undefined = document.getElementById(this.props.componentId+"_"+RcsbFvDOMConstants.MOLSTAR_DIV)?.parentElement?.getBoundingClientRect()
+        RcsbFvStructure.setSize(document.getElementById(this.props.componentId+"_"+RcsbFvDOMConstants.MOLSTAR_DIV), rect);
+        RcsbFvStructure.setSize(document.getElementById(this.props.componentId+"_"+RcsbFvDOMConstants.MOLSTAR_APP_ID), rect);
+    }
+
+    private static setSize(element: HTMLElement | null, rect: DOMRect | undefined): void{
+        if(element == null)
+            return;
+        if(rect == null)
+            return;
+        element.style.width = rect.width+"px";
+        element.style.height = rect.height+"px";
+    }
+
+}

src/RcsbFvStructure/StructurePlugins/AbstractPlugin.ts

@@ -0,0 +1,9 @@
+import {RcsbFvSelection} from "../../RcsbFvSelection/RcsbFvSelection";
+
+export class AbstractPlugin {
+    protected readonly selection: RcsbFvSelection;
+
+    constructor(selection: RcsbFvSelection) {
+        this.selection = selection;
+    }
+}

src/RcsbFvStructure/StructurePlugins/MolstarPlugin.ts

@@ -0,0 +1,311 @@
+import {Viewer, ViewerProps} from '@rcsb-bioinsilico/rcsb-molstar/build/src/viewer';
+import {PresetProps} from '@rcsb-bioinsilico/rcsb-molstar/build/src/viewer/helpers/preset';
+import {SaguaroPluginInterface} from "./SaguaroPluginInterface";
+
+import {PluginContext} from "molstar/lib/mol-plugin/context";
+import {MolScriptBuilder} from "molstar/lib/mol-script/language/builder";
+import {Script} from "molstar/lib/mol-script/script";
+import {SetUtils} from "molstar/lib/mol-util/set";
+import {StructureSelection} from "molstar/lib/mol-model/structure/query";
+import {Loci} from "molstar/lib/mol-model/loci";
+import {Mat4} from "molstar/lib/mol-math/linear-algebra";
+import {BuiltInTrajectoryFormat} from "molstar/lib/mol-plugin-state/formats/trajectory";
+import {PluginState} from "molstar/lib/mol-plugin/state";
+import {Structure, StructureElement, StructureProperties as SP } from "molstar/lib/mol-model/structure";
+import {OrderedSet} from "molstar/lib/mol-data/int";
+import { PluginStateObject as PSO } from 'molstar/lib/mol-plugin-state/objects';
+import {State, StateSelection} from "molstar/lib/mol-state";
+import {StructureRef} from "molstar/lib/mol-plugin-state/manager/structure/hierarchy-state";
+import {RcsbFvSelection, ResidueSelectionInterface} from "../../RcsbFvSelection/RcsbFvSelection";
+import {AbstractPlugin} from "./AbstractPlugin";
+
+export enum LoadMethod {
+    loadPdbId = "loadPdbId",
+    loadPdbIds = "loadPdbIds",
+    loadStructureFromUrl = "loadStructureFromUrl",
+    loadSnapshotFromUrl = "loadSnapshotFromUrl",
+    loadStructureFromData = "loadStructureFromData"
+}
+
+export interface LoadMolstarInterface {
+    method: LoadMethod;
+    params: LoadParams | Array<LoadParams>;
+}
+
+interface LoadParams {
+    pdbId?: string;
+    props?: PresetProps;
+    matrix?: Mat4;
+    url?: string,
+    format?: BuiltInTrajectoryFormat,
+    isBinary?: boolean,
+    type?: PluginState.SnapshotType,
+    data?: string | number[]
+    id?:string;
+}
+
+
+
+export class MolstarPlugin extends AbstractPlugin implements SaguaroPluginInterface {
+    private plugin: Viewer;
+    private localSelectionFlag: boolean = false;
+    private loadingFlag: boolean = false;
+    private _objectChangeCallback: ()=>void;
+    private modelMap: Map<string,string|undefined> = new Map<string, string>();
+
+    constructor(props: RcsbFvSelection) {
+        super(props);
+    }
+
+    public init(target: string | HTMLElement, props: Partial<ViewerProps> = {layoutShowSequence: true}) {
+        this.plugin = new Viewer(target, props);
+    }
+
+    public clear(): void{
+        this.plugin.clear();
+    }
+
+    async load(loadConfig: LoadMolstarInterface): Promise<void>{
+        this.loadingFlag = true;
+        if(MolstarPlugin.checkLoadData(loadConfig)) {
+            if (loadConfig.method == LoadMethod.loadPdbId) {
+                const config: LoadParams = loadConfig.params as LoadParams;
+                await this.plugin.loadPdbId(config.pdbId!, config.props, config.matrix);
+            } else if (loadConfig.method == LoadMethod.loadPdbIds) {
+                const config: Array<LoadParams> = loadConfig.params as Array<LoadParams>;
+                await this.plugin.loadPdbIds(config.map((d) => {
+                    return {pdbId: d.pdbId!, props: d.props, matrix: d.matrix}
+                }));
+            } else if (loadConfig.method == LoadMethod.loadStructureFromUrl) {
+                const config: LoadParams = loadConfig.params as LoadParams;
+                await this.plugin.loadStructureFromUrl(config.url!, config.format!, config.isBinary!);
+            } else if (loadConfig.method == LoadMethod.loadSnapshotFromUrl) {
+                const config: LoadParams = loadConfig.params as LoadParams;
+                await this.plugin.loadSnapshotFromUrl(config.url!, config.type!);
+            } else if (loadConfig.method == LoadMethod.loadStructureFromData) {
+                const config: LoadParams = loadConfig.params as LoadParams;
+                await this.plugin.loadStructureFromData(config.data!, config.format!, config.isBinary!);
+            }
+        }
+        this.loadingFlag = false;
+        this.mapModels(loadConfig.params);
+        this._objectChangeCallback();
+    }
+
+    private static checkLoadData(loadConfig: LoadMolstarInterface): boolean{
+        const method: LoadMethod = loadConfig.method;
+        const params: LoadParams | Array<LoadParams> = loadConfig.params;
+        if( method == LoadMethod.loadPdbId ){
+            if(params instanceof Array || params.pdbId == null)
+                throw loadConfig.method+": missing pdbId";
+        }else if( method == LoadMethod.loadPdbIds ){
+            if(!(params instanceof Array))
+                throw loadConfig.method+": Array object spected";
+            for(const d of params){
+                if(d.pdbId == null)
+                    throw loadConfig.method+": missing pdbId"
+            }
+        }else if( method == LoadMethod.loadStructureFromUrl ){
+            if(params instanceof Array || params.url == null || params.isBinary == null || params.format == null)
+                throw loadConfig.method+": arguments needed url, format, isBinary"
+        }else if( method == LoadMethod.loadSnapshotFromUrl ){
+            if(params instanceof Array || params.url == null || params.type == null)
+                throw loadConfig.method+": arguments needed url, type"
+        }else if( method == LoadMethod.loadStructureFromData ){
+            if(params instanceof Array || params.data == null || params.format == null || params.isBinary == null)
+                throw loadConfig.method+": arguments needed data, format, isBinary"
+        }
+        return true;
+    }
+
+    public setBackground(color: number) {
+    }
+
+    public select(modelId:string, asymId: string, x: number, y: number): void {
+        const f:(plugin: PluginContext)=>void = (plugin: PluginContext) => {
+            this.localSelectionFlag = true;
+            const data: Structure | undefined = getStructureWithModelId(plugin.managers.structure.hierarchy.current.structures, this.getModelId(modelId));
+            if (data == null) return;
+            const seq_id: Array<number> = new Array<number>();
+            for(let n = x; n <= y; n++){
+                seq_id.push(n);
+            }
+            const sel = Script.getStructureSelection(Q => Q.struct.generator.atomGroups({
+                'chain-test': Q.core.rel.eq([asymId, MolScriptBuilder.ammp('label_asym_id')]),
+                'residue-test': Q.core.set.has([MolScriptBuilder.set(...SetUtils.toArray(new Set(seq_id))), MolScriptBuilder.ammp('label_seq_id')])
+            }), data);
+            const loci:Loci = StructureSelection.toLociWithSourceUnits(sel);
+            plugin.managers.structure.selection.fromLoci('set', loci);
+        }
+        this.plugin.pluginCall(f.bind(this));
+    }
+
+    public selectCallback( g:()=>void ){
+        const f: (plugin: PluginContext) => void = (plugin: PluginContext)=>{
+            plugin.managers.structure.selection.events.changed.subscribe((()=>{
+                if(this.localSelectionFlag) {
+                    this.localSelectionFlag = false;
+                    return;
+                }
+                const sequenceData: Array<ResidueSelectionInterface> = new Array<ResidueSelectionInterface>();
+                for(const structure of plugin.managers.structure.hierarchy.current.structures){
+                    const data: Structure | undefined = structure.cell.obj?.data;
+                    if(data == null) return;
+                    const loci: Loci = plugin.managers.structure.selection.getLoci(data);
+                    if(StructureElement.Loci.is(loci)){
+                        const loc = StructureElement.Location.create(loci.structure);
+                        for (const e of loci.elements) {
+                            const seqIds = new Set<number>();
+                            loc.unit = e.unit;
+                            for (let i = 0, il = OrderedSet.size(e.indices); i < il; ++i) {
+                                loc.element = e.unit.elements[OrderedSet.getAt(e.indices, i)];
+                                seqIds.add(SP.residue.label_seq_id(loc));
+                            }
+                            sequenceData.push({
+                                modelId: this.getModelId(data.model.id),
+                                labelAsymId: SP.chain.label_asym_id(loc),
+                                seqIds
+                            });
+                        }
+
+                    }
+                }
+                this.selection.setSelectionFromResidueSelection(sequenceData);
+                g();
+            }));
+        };
+        this.pluginCall(f.bind(this));
+    }
+
+    public clearSelect(): void {
+        const f:(plugin: PluginContext)=>void = (plugin: PluginContext) => {
+            this.localSelectionFlag = true;
+            plugin.managers.interactivity.lociSelects.deselectAll();
+            this.selection.clearSelection();
+        }
+        this.plugin.pluginCall(f);
+    }
+
+    public pluginCall(f: (plugin: PluginContext) => void){
+        this.plugin.pluginCall(f);
+    }
+
+    public objectChangeCallback(f:()=>void){
+        this._objectChangeCallback = f;
+        this.plugin.getPlugin().state.events.object.updated.subscribe((o)=>{
+            if(this.loadingFlag)
+                return;
+            if(o.action === "in-place" && o.ref === "ms-plugin.create-structure-focus-representation") {
+                f();
+            }
+        });
+    }
+
+    public getChains(): Map<string,{entryId: string; chains:Array<{label:string, auth:string}>;}>{
+        const structureRefList = getStructureOptions(this.plugin.getPlugin().state.data);
+        const out: Map<string,{entryId: string; chains:Array<{label:string, auth:string}>;}> = new Map<string, {entryId: string; chains:Array<{label:string, auth:string}>;}>();
+        structureRefList.forEach((structureRef,i)=>{
+            const structure = getStructure(structureRef[0], this.plugin.getPlugin().state.data);
+            let modelEntityId = getModelEntityOptions(structure)[0][0];
+            const chains: [{modelId:string, entryId:string},{auth:string,label:string}[]] = getChainValues(structure, modelEntityId);
+            out.set(this.getModelId(chains[0].modelId),{entryId:chains[0].entryId, chains: chains[1]});
+        });
+        return out;
+    }
+
+    private mapModels(loadParams: LoadParams | Array<LoadParams>): void{
+        const loadParamList: Array<LoadParams> = loadParams instanceof Array ? loadParams : [loadParams];
+        const structureRefList = getStructureOptions(this.plugin.getPlugin().state.data);
+        structureRefList.forEach((structureRef,i)=>{
+            const structure = getStructure(structureRef[0], this.plugin.getPlugin().state.data);
+            let modelEntityId = getModelEntityOptions(structure)[0][0];
+            const chains: [{modelId:string, entryId:string},{auth:string,label:string}[]] = getChainValues(structure, modelEntityId);
+            this.modelMap.set(chains[0].modelId,loadParamList[i].id);
+            if(loadParamList[i].id!=null)
+                this.modelMap.set(loadParamList[i].id!,chains[0].modelId);
+        });
+    }
+
+    private getModelId(id: string): string{
+        return this.modelMap.get(id) ?? id;
+    }
+
+}
+
+function getChainValues(structure: Structure, modelEntityId: string): [{modelId:string, entryId:string},{auth:string;label:string}[]] {
+    const options: {auth:string;label:string}[] = [];
+    const l = StructureElement.Location.create(structure);
+    const seen = new Set<number>();
+    const [ modelIdx, entityId ] = splitModelEntityId(modelEntityId);
+
+    for (const unit of structure.units) {
+        StructureElement.Location.set(l, structure, unit, unit.elements[0]);
+        if (structure.getModelIndex(unit.model) !== modelIdx) continue;
+
+        const id = unit.chainGroupId;
+        if (seen.has(id)) continue;
+
+        options.push({label:SP.chain.label_asym_id(l), auth:SP.chain.auth_asym_id(l)});
+        seen.add(id);
+    }
+    const id: {modelId:string, entryId:string} = {modelId:l.unit?.model?.id, entryId: l.unit?.model?.entryId};
+    return [id,options];
+}
+
+function getStructureWithModelId(structures: StructureRef[], modelId: string): Structure|undefined{
+    for(const structure of structures){
+        if(!structure.cell?.obj?.data?.units)
+            continue;
+        const unit =  structure.cell.obj.data.units[0];
+        const id:string = unit.model.id;
+        if(id === modelId)
+            return structure.cell.obj.data
+    }
+}
+
+function getStructureOptions(state: State) {
+    const options: [string, string][] = [];
+    const structures = state.select(StateSelection.Generators.rootsOfType(PSO.Molecule.Structure));
+    for (const s of structures) {
+        options.push([s.transform.ref, s.obj!.data.label]);
+    }
+    if (options.length === 0) options.push(['', 'No structure']);
+    return options;
+}
+
+function getStructure(ref: string, state: State) {
+    const cell = state.select(ref)[0];
+    if (!ref || !cell || !cell.obj) return Structure.Empty;
+    return (cell.obj as PSO.Molecule.Structure).data;
+}
+
+function getModelEntityOptions(structure: Structure) {
+    const options: [string, string][] = [];
+    const l = StructureElement.Location.create(structure);
+    const seen = new Set<string>();
+    for (const unit of structure.units) {
+        StructureElement.Location.set(l, structure, unit, unit.elements[0]);
+        const id = SP.entity.id(l);
+        const modelIdx = structure.getModelIndex(unit.model);
+        const key = `${modelIdx}|${id}`;
+        if (seen.has(key)) continue;
+        let description = SP.entity.pdbx_description(l).join(', ');
+        if (structure.models.length) {
+            if (structure.representativeModel) { // indicates model trajectory
+                description += ` (Model ${structure.models[modelIdx].modelNum})`;
+            } else  if (description.startsWith('Polymer ')) { // indicates generic entity name
+                description += ` (${structure.models[modelIdx].entry})`;
+            }
+        }
+        const label = `${id}: ${description}`;
+        options.push([ key, label ]);
+        seen.add(key);
+    }
+    if (options.length === 0) options.push(['', 'No entities']);
+    return options;
+}
+
+function splitModelEntityId(modelEntityId: string) {
+    const [ modelIdx, entityId ] = modelEntityId.split('|');
+    return [ parseInt(modelIdx), entityId ];
+}

src/RcsbFvStructure/StructurePlugins/SaguaroPluginInterface.ts

@@ -0,0 +1,14 @@
+import {LoadMolstarInterface} from "./MolstarPlugin";
+import {PluginContext} from "molstar/lib/mol-plugin/context";
+
+export interface SaguaroPluginInterface {
+    init: (elementId: string, props?: any) => void;
+    load: (args: LoadMolstarInterface) => void;
+    select: (modelId: string, asymId: string, x: number, y: number) => void;
+    clearSelect: () => void;
+    pluginCall: (f:(plugin: PluginContext)=>void) => void;
+    selectCallback: ( g:()=>void)=>void;
+    clear: () => void;
+    getChains: () => Map<string,{entryId: string; chains:Array<{label:string, auth:string}>;}>;
+    objectChangeCallback: (f:()=>void)=>void;
+}

src/config.ts

@@ -1,3 +1,3 @@
 import * as path from "path";
 
-export const rcsbFvWebAppPath:string = path.resolve(path.join(__dirname, '..', 'build'));
+export const rcsbFvWebAppPath:string = path.resolve(path.join(__dirname, '..', 'dist'));

src/examples/assembly/example.html

@@ -0,0 +1,11 @@
+<html lang="en">
+<head>
+    <script src="./example.js" type="text/javascript"></script>
+    <title>Saguaro 3D</title>
+</head>
+<body>
+
+<div id="pfv" style="margin-top: 200px;" ></div>
+
+</body>
+</html>

src/examples/assembly/example.ts

@@ -0,0 +1,57 @@
+
+import {RcsbFv3DBuilder} from "../../RcsbFv3DBuilder";
+import {StructureViewInterface} from "../../RcsbFvStructure/RcsbFvStructure";
+import {SequenceViewInterface} from "../../RcsbFvSequence/RcsbFvSequence";
+
+import './example.html';
+import {LoadMethod} from "../../RcsbFvStructure/StructurePlugins/MolstarPlugin";
+
+document.addEventListener("DOMContentLoaded", function(event) {
+
+    function getJsonFromUrl() {
+        const url = location.search;
+        var query = url.substr(1);
+        var result: any = {};
+        query.split("&").forEach(function(part) {
+            var item = part.split("=");
+            result[item[0]] = decodeURIComponent(item[1]);
+        });
+        return result;
+    }
+
+    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"
+            }]
+        }
+    };
+
+    const sequenceConfig: SequenceViewInterface = {
+        type: "assembly",
+        config: {
+           entryId:args.pdbId
+        }
+    };
+
+    const panel3d = new RcsbFv3DBuilder({
+        elementId: "pfv",
+        structurePanelConfig: structureConfig,
+        sequencePanelConfig: sequenceConfig
+    });
+    panel3d.render();
+
+});

src/examples/custom-panel/example.html

@@ -0,0 +1,11 @@
+<html lang="en">
+<head>
+    <script src="./example.js" type="text/javascript"></script>
+    <title>Saguaro 3D</title>
+</head>
+<body>
+
+<div id="pfv" style="margin-top: 200px;" ></div>
+
+</body>
+</html>

src/examples/custom-panel/example.tsx

@@ -0,0 +1,120 @@
+import {PluginContext} from "molstar/lib/mol-plugin/context";
+import {MolScriptBuilder} from "molstar/lib/mol-script/language/builder";
+import {Script} from "molstar/lib/mol-script/script";
+import {SetUtils} from "molstar/lib/mol-util/set";
+import {StructureSelection} from "molstar/lib/mol-model/structure/query";
+
+
+import {RcsbFv3DBuilder} from "../../RcsbFv3DBuilder";
+import {StructureViewInterface} from "../../RcsbFvStructure/RcsbFvStructure";
+import {SequenceViewInterface} from "../../RcsbFvSequence/RcsbFvSequence";
+
+import './example.html';
+import {LoadMethod} from "../../RcsbFvStructure/StructurePlugins/MolstarPlugin";
+import {
+    BlockViewSelector,
+    CustomViewInterface,
+    FeatureBlockInterface, FeatureViewInterface
+} from "../../RcsbFvSequence/SequenceViews/CustomView";
+import * as React from "react";
+import {
+    RcsbFv,
+    RcsbFvDisplayTypes,
+    RcsbFvRowConfigInterface,
+    RcsbFvTrackDataElementInterface
+} from "@rcsb/rcsb-saguaro";
+import {RcsbFvSelection} from "../../RcsbFvSelection/RcsbFvSelection";
+
+
+const structureConfig:StructureViewInterface = {
+    loadConfig: {
+        method: LoadMethod.loadPdbId,
+        params: {
+            pdbId: "101m",
+            id:"101m_1"
+        }
+    }
+};
+
+const sequenceSelectionCallback = (plugin: PluginContext, ann: RcsbFvTrackDataElementInterface) => {
+    const data = plugin.managers.structure.hierarchy.current.structures[0]?.cell.obj?.data;
+    if (!data) return;
+    const MS = MolScriptBuilder;
+    const seq_id: Array<number> = new Array<number>();
+    const x: number = ann.begin;
+    const y: number = ann.end ?? ann.begin
+    for(let n = x; n <= y; n++){
+        seq_id.push(n);
+    }
+    const sel = Script.getStructureSelection(Q => Q.struct.generator.atomGroups({
+        'chain-test': Q.core.rel.eq(["A", MS.ammp('label_asym_id')]),
+        'residue-test': Q.core.set.has([MS.set(...SetUtils.toArray(new Set(seq_id))), MS.ammp('label_seq_id')])
+    }), data);
+    const loci = StructureSelection.toLociWithSourceUnits(sel);
+    plugin.managers.structure.selection.fromLoci('set', loci);
+};
+
+const additionalContent: (select: BlockViewSelector) => JSX.Element = (select: BlockViewSelector) => {
+    function changeBlock(select: BlockViewSelector){
+        console.log(select.getActiveBlock());
+    }
+    return (
+        <div onClick={()=>{changeBlock(select)}}>
+            ClickMe
+        </div>);
+}
+
+const rowConfig: Array<RcsbFvRowConfigInterface> = [{
+    trackId: "blockTrack",
+    trackHeight: 20,
+    trackColor: "#F9F9F9",
+    displayType: RcsbFvDisplayTypes.BLOCK,
+    displayColor: "#FF0000",
+    rowTitle: "BLOCK",
+    trackData: [{
+        begin: 30,
+        end: 60
+    }]
+}]
+const fv: FeatureViewInterface = {
+    boardId:"101m_board",
+    boardConfig: {
+        range: {
+            min: 1,
+            max: 110
+        },
+        trackWidth: 940,
+        rowTitleWidth: 60,
+        includeAxis: true
+    },
+    rowConfig: rowConfig,
+    sequenceSelectionCallback: (plugin: PluginContext, selection: RcsbFvSelection, d: RcsbFvTrackDataElementInterface) => {
+        sequenceSelectionCallback(plugin,d);
+    },
+    structureSelectionCallback: (pfv: RcsbFv, selection: RcsbFvSelection) => {}
+}
+
+const block: FeatureBlockInterface = {
+    blockId:"MyBlock_1",
+    blockConfig: [fv]
+};
+
+const customConfig: CustomViewInterface = {
+    config:[block],
+    additionalContent:additionalContent
+}
+
+const sequenceConfig: SequenceViewInterface = {
+    type: "custom",
+    config: customConfig
+};
+
+document.addEventListener("DOMContentLoaded", function(event) {
+    const panel3d = new RcsbFv3DBuilder({
+        elementId: "pfv",
+        structurePanelConfig: structureConfig,
+        sequencePanelConfig: sequenceConfig
+    });
+    panel3d.render();
+});
+

src/styles/RcsbFvMolstarStyle.module.scss

@@ -27,12 +27,12 @@ $logo-background: lighten(#325880, 60%);
     opacity: 0.8 !important;
 }
 
-.msp-plugin {
+/*.msp-plugin {
     border: 1px solid rgb(255,255,255) !important;
 }
 
 .msp-layout-standard {
     border: 1px solid rgb(255,255,255) !important;
-}
+}*/
 
 @import 'molstar/lib/mol-plugin-ui/skin/base/base';

tsconfig.examples.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "outDir": "./build/src/",
+    "noImplicitAny": true,
+    "target": "es5",
+    "module": "commonjs",
+    "jsx": "react",
+    "lib": [ "es6", "dom", "esnext.asynciterable", "es2016"  ],
+    "allowJs": true,
+    "sourceMap": true,
+    "strictNullChecks": true
+  },
+  "include": [
+    "src/custom.d.ts",
+    "src/examples/custom-panel/example.tsx",
+    "src/examples/assembly/example.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}

tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "outDir": "./dist/src/",
+    "outDir": "./build/src/",
     "noImplicitAny": true,
     "target": "es5",
     "module": "commonjs",
@@ -10,7 +10,7 @@
     "declaration": true,
     "sourceMap": true,
     "strictNullChecks": true,
-    "declarationDir": "./dist/build"
+    "declarationDir": "./build/dist"
   },
   "include": [ "src/*" ],
   "exclude": [

webpack.config.js

@@ -1,19 +1,16 @@
 const path = require('path');
 
-module.exports = [{
-    //mode: "development",
-    mode: "production",
-    entry: {
-        'RcsbFv3D':'./dist/src/RcsbFv3DBuilder.js',
-        'rcsb-saguaro-3d':'./dist/src/RcsbSaguaro3D.js'
-    },
+const commonConfig = {
     module: {
       rules: [
+          {
+              test: /\.(html|ico)$/,
+              use: [{
+                  loader: 'file-loader',
+                  options: { name: '[name].[ext]' }
+              }]
+          },
         {
-          test: /\.jsx?$/,
-          loader: 'babel-loader',
-          exclude: [/node_modules/]
-        },{
           test: /\.scss$/,
           use: [
               'style-loader',
@@ -31,17 +28,31 @@ module.exports = [{
       ]
     },
     resolve: {
-      extensions: [ '.tsx', '.ts', '.js', 'jsx' ]
+        modules: [
+            'node_modules',
+            path.resolve(__dirname, 'build/src/')
+        ],
     },
     node: {
         fs: "empty"
+    }
+};
+
+const appConfig = {
+    ...commonConfig,
+    entry: {
+        'RcsbFv3D':'./build/src/RcsbFv3DBuilder.js',
+        'rcsb-saguaro-3d':'./build/src/RcsbSaguaro3D.js'
     },
+    mode: "production",
     output: {
         filename: '[name].js',
         library: 'RcsbFv3D',
         libraryTarget: 'umd',
         umdNamedDefine: true,
-        path: path.resolve(__dirname, 'dist/build/')
+        path: path.resolve(__dirname, 'build/dist')
     },
-    devtool: 'source-map',
-}];
+    devtool: 'source-map'
+}
+
+module.exports = [appConfig];

webpack.examples.config.js

@@ -0,0 +1,65 @@
+const path = require('path');
+
+const commonConfig = {
+    module: {
+      rules: [
+          {
+              test: /\.(html|ico)$/,
+              use: [{
+                  loader: 'file-loader',
+                  options: { name: '[name].[ext]' }
+              }]
+          },{
+              test: /\.scss$/,
+              use: [
+                  'style-loader',
+                  {
+                      loader: 'css-loader',
+                      options: {
+                          modules: {
+                              localIdentName:'[local]'
+                          }
+                      }
+                  },
+                  'sass-loader'
+              ]
+          }
+      ]
+    },
+    resolve: {
+        modules: [
+            'node_modules',
+            path.resolve(__dirname, 'build/src/')
+        ],
+    },
+    node: {
+        fs: "empty"
+    }
+};
+
+const example_1 = {
+    ...commonConfig,
+    entry: {
+        "example": './build/src/examples/custom-panel/example.js'
+    },
+    output: {
+        filename: '[name].js',
+        path: path.resolve(__dirname, 'build/dist/examples/custom-panel/')
+    },
+    devtool: 'source-map'
+}
+
+
+const example_3 = {
+    ...commonConfig,
+    entry: {
+        "example": './build/src/examples/assembly/example.js'
+    },
+    output: {
+        filename: '[name].js',
+        path: path.resolve(__dirname, 'build/dist/examples/assembly/')
+    },
+    devtool: 'source-map'
+}
+
+module.exports = [example_1, example_3];