Structure object preset mapping

package.json

@@ -16,12 +16,13 @@
     "buildExamples": "npm run cleanExamples && npm run tscExamples && npm run cpStyles && npm run copyExample && npm run packExamples && npm run clean",
     "cpStyles": "ncp src/styles build/src/styles",
     "copyConfig": "ncp build/src/config.js build/dist/config.js",
-    "copyExample": "npm run copyExample_1 && npm run copyExample_2 && npm run copyExample_3 && npm run copyExample_4 && npm run copyExample_5",
+    "copyExample": "npm run copyExample_1 && npm run copyExample_2 && npm run copyExample_3 && npm run copyExample_4 && npm run copyExample_5 && npm run copyExample_6",
     "copyExample_1": "ncp src/examples/single-chain/index.html build/src/examples/single-chain/index.html",
     "copyExample_2": "ncp src/examples/structural-alignment/index.html build/src/examples/structural-alignment/index.html",
     "copyExample_3": "ncp src/examples/assembly/index.html build/src/examples/assembly/index.html",
     "copyExample_4": "ncp src/examples/multiple-chain/index.html build/src/examples/multiple-chain/index.html",
     "copyExample_5": "ncp src/examples/css-config/index.html build/src/examples/css-config/index.html",
+    "copyExample_6": "ncp src/examples/external-mapping/index.html build/src/examples/external-mapping/index.html",
     "buildDoc": "npx typedoc --mode file --out docs --exclude src/examples src && sed -i '' '/---/d' docs/index.html",
     "clean": "del-cli build/src",
     "cleanAll": "npm run clean && del-cli build/dist",

src/RcsbFvSequence/SequenceViews/AssemblyView/AssemblyView.tsx

@@ -142,6 +142,8 @@ export class AssemblyView extends AbstractView<AssemblyViewInterface & AbstractV
         const allSel: Array<SaguaroRegionList> | undefined = this.props.selectorManager.getSelection(mode);
         if(allSel == null || allSel.length ===0) {
             this.rcsbFvModule?.getFv().clearSelection(mode);
+            if(mode === 'select')
+                this.resetPluginView();
         }else if(mode === 'select' && this.props.selectorManager.getLastSelection('select')?.labelAsymId != null && this.props.selectorManager.getLastSelection('select')?.labelAsymId != this.currentLabelAsymId){
             const authId: string | undefined = this.currentModelMap
                 .get(this.currentModelId)?.chains
@@ -153,6 +155,8 @@ export class AssemblyView extends AbstractView<AssemblyViewInterface & AbstractV
             const sel: SaguaroRegionList | undefined = this.props.selectorManager.getSelectionWithCondition(this.currentModelId, this.currentLabelAsymId, mode, this.currentOpName);
             if (sel == null) {
                 this.rcsbFvModule?.getFv().clearSelection(mode);
+                if(mode === 'select')
+                    this.resetPluginView();
             } else {
                 this.rcsbFvModule?.getFv().setSelection({elements: sel.regions, mode: mode});
             }

src/RcsbFvStructure/RcsbFvStructure.tsx

@@ -6,7 +6,7 @@ import {LoadMolstarInterface} from "./StructurePlugins/MolstarPlugin";
 import {RcsbFvSelectorManager} from "../RcsbFvSelection/RcsbFvSelectorManager";
 
 export interface RcsbFvStructureInterface {
-    loadConfig: LoadMolstarInterface;
+    loadConfig: LoadMolstarInterface | Array<LoadMolstarInterface>;
     pluginConfig?: Partial<ViewerProps>;
 }
 

src/RcsbFvStructure/SaguaroPluginInterface.ts

@@ -34,7 +34,7 @@ export interface SaguaroRegionList extends SaguaroChain{
 
 export interface SaguaroPluginInterface extends SaguaroPluginPublicInterface{
     init: (elementId: string, props?: any) => void;
-    load: (args: LoadMolstarInterface) => void;
+    load: (args: LoadMolstarInterface|Array<LoadMolstarInterface>) => void;
     pluginCall: (f:(plugin: PluginContext)=>void) => void;
     clear: () => void;
     setSelectCallback: (g:(flag?:boolean)=>void)=>void;

src/RcsbFvStructure/StructurePlugins/MolstarPlugin.ts

@@ -85,31 +85,45 @@ export class MolstarPlugin extends AbstractPlugin implements SaguaroPluginInterf
         this.viewer.clear();
     }
 
-    async load(loadConfig: LoadMolstarInterface): Promise<void>{
+    async load(loadConfig: LoadMolstarInterface|Array<LoadMolstarInterface>): Promise<void>{
         this.loadingFlag = true;
-        if(MolstarPlugin.checkLoadData(loadConfig)) {
-            if (loadConfig.loadMethod == LoadMethod.loadPdbId) {
-                const config: LoadParams = loadConfig.loadParams as LoadParams;
-                await this.viewer.loadPdbId(config.pdbId!, {props: config.props, matrix: config.matrix, reprProvider: config.reprProvider, params: config.params});
-            } else if (loadConfig.loadMethod == LoadMethod.loadPdbIds) {
-                const config: Array<LoadParams> = loadConfig.loadParams as Array<LoadParams>;
-                await this.viewer.loadPdbIds(config.map((d) => {
-                    return {pdbId: d.pdbId!, config:{props: d.props, matrix: d.matrix, reprProvider: d.reprProvider, params: d.params}}
-                }));
-            } else if (loadConfig.loadMethod == LoadMethod.loadStructureFromUrl) {
-                const config: LoadParams = loadConfig.loadParams as LoadParams;
-                await this.viewer.loadStructureFromUrl(config.url!, config.format!, config.isBinary!,{props: config.props, matrix: config.matrix, reprProvider: config.reprProvider, params: config.params});
-            } else if (loadConfig.loadMethod == LoadMethod.loadSnapshotFromUrl) {
-                const config: LoadParams = loadConfig.loadParams as LoadParams;
-                await this.viewer.loadSnapshotFromUrl(config.url!, config.type!);
-            } else if (loadConfig.loadMethod == LoadMethod.loadStructureFromData) {
-                const config: LoadParams = loadConfig.loadParams as LoadParams;
-                await this.viewer.loadStructureFromData(config.data!, config.format!, config.isBinary!, {props: config.props, matrix: config.matrix, reprProvider: config.reprProvider, params: config.params});
+        for (const lC of (Array.isArray(loadConfig) ? loadConfig : [loadConfig])) {
+            if(MolstarPlugin.checkLoadData(lC)) {
+                if (lC.loadMethod == LoadMethod.loadPdbId) {
+                    const config: LoadParams = lC.loadParams as LoadParams;
+                    await this.viewer.loadPdbId(config.pdbId!, {props: config.props, matrix: config.matrix, reprProvider: config.reprProvider, params: config.params});
+                } else if (lC.loadMethod == LoadMethod.loadPdbIds) {
+                    const config: Array<LoadParams> = lC.loadParams as Array<LoadParams>;
+                    await this.viewer.loadPdbIds(config.map((d) => {
+                        return {pdbId: d.pdbId!, config:{props: d.props, matrix: d.matrix, reprProvider: d.reprProvider, params: d.params}}
+                    }));
+                } else if (lC.loadMethod == LoadMethod.loadStructureFromUrl) {
+                    const config: LoadParams = lC.loadParams as LoadParams;
+                    await this.viewer.loadStructureFromUrl(config.url!, config.format!, config.isBinary!,{props: config.props, matrix: config.matrix, reprProvider: config.reprProvider, params: config.params});
+                } else if (lC.loadMethod == LoadMethod.loadSnapshotFromUrl) {
+                    const config: LoadParams = lC.loadParams as LoadParams;
+                    await this.viewer.loadSnapshotFromUrl(config.url!, config.type!);
+                } else if (lC.loadMethod == LoadMethod.loadStructureFromData) {
+                    const config: LoadParams = lC.loadParams as LoadParams;
+                    await this.viewer.loadStructureFromData(config.data!, config.format!, config.isBinary!, {props: config.props, matrix: config.matrix, reprProvider: config.reprProvider, params: config.params});
+                }
             }
+            this.viewer.plugin.selectionMode = true;
+            (Array.isArray(lC.loadParams) ? lC.loadParams : [lC.loadParams]).forEach(lP=>{
+                if(typeof lP.params?.getMap === "function") {
+                    const map: Map<string,string> = lP.params.getMap();
+                    if(typeof map?.forEach === "function")
+                        map.forEach((modelId: string, key: string) => {
+                            if (typeof modelId === "string" && typeof key === "string") {
+                                this.modelMap.set(key, modelId);
+                                this.modelMap.set(modelId, key);
+                            }
+                        })
+                }
+            });
+            this.mapModels(lC.loadParams);
         }
-        this.viewer.plugin.selectionMode = true;
         this.loadingFlag = false;
-        this.mapModels(loadConfig.loadParams);
         this.modelChangeCallback(this.getChains());
     }
 
@@ -476,14 +490,17 @@ export class MolstarPlugin extends AbstractPlugin implements SaguaroPluginInterf
     private mapModels(loadParams: LoadParams | Array<LoadParams>): void{
         const loadParamList: Array<LoadParams> = loadParams instanceof Array ? loadParams : [loadParams];
         const structureRefList = getStructureOptions(this.viewer.plugin);
-        structureRefList.forEach((structureRef,i)=>{
-            const structure = getStructure(structureRef[0], this.viewer.plugin.state.data);
-            let modelEntityId = getModelEntityOptions(structure)[0][0];
-            const chains: [{modelId:string, entryId:string},ChainInfo[]] = 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);
-        });
+        if(loadParamList.length == structureRefList.length )
+            structureRefList.forEach((structureRef,i)=>{
+                const structure = getStructure(structureRef[0], this.viewer.plugin.state.data);
+                let modelEntityId = getModelEntityOptions(structure)[0][0];
+                const chains: [{modelId:string, entryId:string},ChainInfo[]] = getChainValues(structure, modelEntityId);
+                if(!this.modelMap.has(chains[0].modelId)) {
+                    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{
@@ -501,7 +518,7 @@ export class MolstarPlugin extends AbstractPlugin implements SaguaroPluginInterf
 
 }
 
-export function getStructureOptions(plugin: PluginContext): [string,string][] {
+function getStructureOptions(plugin: PluginContext): [string,string][] {
     const options: [string, string][] = [];
     plugin.managers.structure.hierarchy.current.structures.forEach(s=>{
         options.push([s.cell.transform.ref, s.cell.obj!.data.label]);

src/examples/external-mapping/FeatureViewerConfig.ts

@@ -0,0 +1,159 @@
+import {FeatureViewInterface} from "../../RcsbFvSequence/SequenceViews/CustomView";
+import {SaguaroPluginPublicInterface, SaguaroRegionList} from "../../RcsbFvStructure/SaguaroPluginInterface";
+import {RcsbFvSelectorManager, RegionSelectionInterface} from "../../RcsbFvSelection/RcsbFvSelectorManager";
+import {
+    RcsbFv,
+    RcsbFvDisplayTypes,
+    RcsbFvRowConfigInterface,
+    RcsbFvTrackDataElementInterface
+} from "@rcsb/rcsb-saguaro";
+
+const rowConfig: Array<RcsbFvRowConfigInterface> = [{
+        trackId: "sequenceTrack",
+        trackHeight: 20,
+        trackColor: "#F9F9F9",
+        displayType: RcsbFvDisplayTypes.SEQUENCE,
+        nonEmptyDisplay: true,
+        rowTitle: "1ASH SEQUENCE",
+        trackData: [{
+            begin: 1,
+            value: "ANKTRELCMKSLEHAKVDTSNEARQDGIDLYKHMFENYPPLRKYFKSREEYTAEDVQNDPFFAKQGQKILLACHVLCATYDDRETFNAYTRELLDRHARDHVHMPPEVWTDFWKLFEEYLGKKTTLDEPTKQAWHEIGREFAKEINKHGR"
+        }]
+    },{
+        trackId: "blockTrack",
+        trackHeight: 20,
+        trackColor: "#F9F9F9",
+        displayType: RcsbFvDisplayTypes.BLOCK,
+        displayColor: "#FF0000",
+        rowTitle: "1ASH",
+        trackData: [{
+            begin: 30,
+            end: 60
+        }]
+    }];
+
+export const fvConfig1: FeatureViewInterface = {
+    boardId:"1ash_board",
+    boardConfig: {
+        range: {
+            min: 1,
+            max: 150
+        },
+        rowTitleWidth: 190,
+        includeAxis: true
+    },
+    rowConfig: rowConfig,
+    sequenceSelectionChangeCallback: (plugin: SaguaroPluginPublicInterface, selectorManager: RcsbFvSelectorManager, sequenceRegion: Array<RcsbFvTrackDataElementInterface>) => {
+        selectorManager.clearSelection("select", {modelId:"structure_1", labelAsymId:"A"});
+        if(sequenceRegion.length > 0) {
+            const regions = sequenceRegion.map(r => ({
+                modelId: "structure_1",
+                labelAsymId: "A",
+                region: {begin: r.begin, end: r.end ?? r.begin, source: "sequence"} as RegionSelectionInterface
+            }));
+            selectorManager.addSelectionFromMultipleRegions(regions, "select");
+            plugin.select(regions.map(r => ({
+                ...r,
+                begin: r.region.begin,
+                end: r.region.end
+            })), "select", "set");
+        }else{
+            plugin.clearSelection("select", {modelId: "structure_1", labelAsymId: "A"})
+            plugin.resetCamera();
+        }
+    },
+    sequenceElementClickCallback: (plugin: SaguaroPluginPublicInterface, selectorManager: RcsbFvSelectorManager, d: RcsbFvTrackDataElementInterface) => {
+        if(d!=null)
+            plugin.cameraFocus("structure_1", "A", d.begin, d.end ?? d.begin);
+    },
+    sequenceHoverCallback: (plugin: SaguaroPluginPublicInterface, selectorManager: RcsbFvSelectorManager, elements: Array<RcsbFvTrackDataElementInterface>) => {
+        if(elements == null || elements.length == 0)
+            plugin.clearSelection("hover");
+        else
+            plugin.select(elements.map(e=>({
+                modelId: "structure_1",
+                labelAsymId: "A",
+                begin: e.begin,
+                end: e.end ?? e.begin
+            })), "hover", "set");
+    },
+    structureSelectionCallback: (plugin: SaguaroPluginPublicInterface, pfv: RcsbFv, selection: RcsbFvSelectorManager) => {
+        const sel: SaguaroRegionList | undefined = selection.getSelectionWithCondition("structure_1", "A", "select");
+        if(sel == null) {
+            pfv.clearSelection("select");
+            plugin.resetCamera();
+        }else {
+            pfv.setSelection({elements: sel.regions, mode: "select"});
+        }
+    },
+    structureHoverCallback: (plugin: SaguaroPluginPublicInterface, pfv: RcsbFv, selection: RcsbFvSelectorManager) => {
+        const sel: SaguaroRegionList | undefined = selection.getSelectionWithCondition("structure_1", "A", "hover");
+        if(sel == null)
+            pfv.clearSelection("hover");
+        else
+            pfv.setSelection({elements:sel.regions, mode:"hover"});
+    }
+}
+
+export const fvConfig2: FeatureViewInterface = {
+    boardId:"1ash_board_bis",
+    boardConfig: {
+        range: {
+            min: 1,
+            max: 150
+        },
+        rowTitleWidth: 190,
+        includeAxis: true
+    },
+    rowConfig: rowConfig,
+    sequenceSelectionChangeCallback: (plugin: SaguaroPluginPublicInterface, selectorManager: RcsbFvSelectorManager, sequenceRegion: Array<RcsbFvTrackDataElementInterface>) => {
+        selectorManager.clearSelection("select", {modelId:"structure_2", labelAsymId:"A"});
+        if(sequenceRegion.length > 0) {
+            const regions = sequenceRegion.map(r => ({
+                modelId: "structure_2",
+                labelAsymId: "A",
+                region: {begin: r.begin, end: r.end ?? r.begin, source: "sequence"} as RegionSelectionInterface
+            }));
+            selectorManager.addSelectionFromMultipleRegions(regions, "select");
+            plugin.select(regions.map(r => ({
+                ...r,
+                begin: r.region.begin,
+                end: r.region.end
+            })), "select", "set");
+        }else{
+            plugin.clearSelection("select", {modelId: "structure_2", labelAsymId: "A"})
+            plugin.resetCamera();
+        }
+    },
+    sequenceElementClickCallback: (plugin: SaguaroPluginPublicInterface, selectorManager: RcsbFvSelectorManager, d: RcsbFvTrackDataElementInterface) => {
+        if(d!=null)
+            plugin.cameraFocus("structure_2", "A", d.begin, d.end ?? d.begin);
+    },
+    sequenceHoverCallback: (plugin: SaguaroPluginPublicInterface, selectorManager: RcsbFvSelectorManager, elements: Array<RcsbFvTrackDataElementInterface>) => {
+        if(elements == null || elements.length == 0)
+            plugin.clearSelection("hover");
+        else
+            plugin.select(elements.map(e=>({
+                modelId: "structure_2",
+                labelAsymId: "A",
+                begin: e.begin,
+                end: e.end ?? e.begin
+            })), "hover", "set");
+    },
+    structureSelectionCallback: (plugin: SaguaroPluginPublicInterface, pfv: RcsbFv, selection: RcsbFvSelectorManager) => {
+        const sel: SaguaroRegionList | undefined = selection.getSelectionWithCondition("structure_2", "A", "select");
+        if(sel == null) {
+            pfv.clearSelection("select");
+            plugin.resetCamera();
+        }else {
+            pfv.setSelection({elements: sel.regions, mode: "select"});
+        }
+    },
+    structureHoverCallback: (plugin: SaguaroPluginPublicInterface, pfv: RcsbFv, selection: RcsbFvSelectorManager) => {
+        const sel: SaguaroRegionList | undefined = selection.getSelectionWithCondition("structure_2", "A", "hover");
+        if(sel == null)
+            pfv.clearSelection("hover");
+        else
+            pfv.setSelection({elements:sel.regions, mode:"hover"});
+    }
+}

src/examples/external-mapping/StructurePreset

@@ -0,0 +1,16 @@
+import {StructureRepresentationPresetProvider} from "molstar/lib/mol-plugin-state/builder/structure/representation-preset";
+
+export const RcsbSuperpositionRepresentationPreset = StructureRepresentationPresetProvider({
+    id: 'preset-superposition-representation-rcsb',
+    display: {
+        group: 'Superposition',
+        name: 'Alignment',
+        description: 'Show representations based on the structural alignment data.'
+    },
+    params: () => ({
+
+    }),
+    async apply(ref, params, plugin) {
+        return {};
+    }
+})

src/examples/external-mapping/TrajectoryPreset.ts

@@ -0,0 +1,61 @@
+import {
+    PresetStructureRepresentations,
+    StructureRepresentationPresetProvider
+} from "molstar/lib/mol-plugin-state/builder/structure/representation-preset";
+import {TrajectoryHierarchyPresetProvider} from "molstar/lib/mol-plugin-state/builder/structure/hierarchy-preset";
+import {StateObjectSelector} from "molstar/lib/mol-state";
+import {PluginStateObject} from "molstar/lib/mol-plugin-state/objects";
+import {StateObject} from "molstar/lib/mol-state/object";
+import {StateTransformer} from "molstar/lib/mol-state/transformer";
+import {ParamDefinition} from "molstar/lib/mol-util/param-definition";
+import {PluginContext} from "molstar/lib/mol-plugin/context";
+
+type StructureObject = StateObjectSelector<PluginStateObject.Molecule.Structure, StateTransformer<StateObject<any, StateObject.Type<any>>, StateObject<any, StateObject.Type<any>>, any>>
+
+export const RcsbRepresentationPreset: TrajectoryHierarchyPresetProvider<{id:string, mapStructure: (key: string, structure: PluginStateObject.Molecule.Structure)=>void}> = TrajectoryHierarchyPresetProvider({
+    id: "rcsb-saguaro-3d",
+    display: {
+        name: 'Feature View 3D'
+    },
+    params(a: PluginStateObject.Molecule.Trajectory | undefined, plugin: PluginContext): ParamDefinition.For<{id:string, mapStructure: (key: string, structure: PluginStateObject.Molecule.Structure)=>void}> {
+        return void 0;
+    },
+    async apply(trajectory, params, plugin) {
+        const builder = plugin.builders.structure;
+        const model = await builder.createModel(trajectory, {modelIndex: 0});
+        const modelProperties = await builder.insertModelProperties(model);
+        const structure: StructureObject = await builder.createStructure(modelProperties);
+        if(structure.cell?.obj)
+            params.mapStructure(params.id, structure.cell?.obj);
+        const structureProperties: StructureObject = await builder.insertStructureProperties(structure);
+        const unitcell: StateObjectSelector | undefined = await builder.tryCreateUnitcell(modelProperties, undefined, { isHidden: true });
+        const representation: StructureRepresentationPresetProvider.Result | undefined = await plugin.builders.structure.representation.applyPreset<{}>(structureProperties, PresetStructureRepresentations.auto,{});
+
+        components:
+        for (const c of plugin.managers.structure.hierarchy.currentComponentGroups) {
+            for (const comp of c) {
+                if(comp.cell.obj?.label === "Water") {
+                    plugin.managers.structure.component.toggleVisibility(c);
+                    break components;
+                }
+            }
+        }
+        components:
+        for (const c of plugin.managers.structure.hierarchy.currentComponentGroups) {
+            for (const comp of c) {
+                if(comp.cell.obj?.label === "Polymer") {
+                    plugin.managers.structure.component.updateRepresentationsTheme([comp], { color: 'chain-id' });
+                    break components;
+                }
+            }
+        }
+        return {
+            model,
+            modelProperties,
+            unitcell,
+            structure,
+            structureProperties,
+            representation
+        };
+    }
+});

src/examples/external-mapping/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon">
+    <script src="./index.js" type="text/javascript"></script>
+    <title>Saguaro 3D</title>
+</head>
+<body>
+    <div id="pfv" style="position:relative"></div>
+</body>
+</html>

src/examples/external-mapping/index.tsx

@@ -0,0 +1,86 @@
+import './index.html';
+import {RcsbFv3DCustom} from "../../RcsbFv3D/RcsbFv3DCustom";
+import {RcsbFvStructureInterface} from "../../RcsbFvStructure/RcsbFvStructure";
+import {LoadMethod} from "../../RcsbFvStructure/StructurePlugins/MolstarPlugin";
+import {
+    CustomViewInterface,
+    FeatureBlockInterface
+} from "../../RcsbFvSequence/SequenceViews/CustomView";
+import * as React from "react";
+import {RcsbRepresentationPreset} from "./TrajectoryPreset";
+import {PluginStateObject} from "molstar/lib/mol-plugin-state/objects";
+import {fvConfig1, fvConfig2} from "./FeatureViewerConfig";
+
+const block: FeatureBlockInterface = {
+    blockId:"MyBlock_1",
+    featureViewConfig: [fvConfig1, fvConfig2]
+};
+
+const customConfig: CustomViewInterface = {
+    blockConfig:[block]
+}
+
+const sequenceConfig = {
+    title: "Single chain example",
+    subtitle: "PDB entry with  single chain",
+    config: customConfig
+};
+
+const molstarConfig: RcsbFvStructureInterface = {
+    loadConfig: [{
+        loadMethod: LoadMethod.loadPdbId,
+        loadParams: {
+            pdbId: "1ash",
+            reprProvider: RcsbRepresentationPreset,
+            params: {
+                id: "structure_1",
+                modelMap: new Map<string,string>(),
+                mapStructure: function (key: string, structure: PluginStateObject.Molecule.Structure): void{
+                    this.modelMap.set(key,structure.data.units[0].model.id);
+                },
+                getMap: function(): Map<string,string>{
+                    return this.modelMap;
+                }
+            }
+        }
+    },{
+        loadMethod: LoadMethod.loadPdbId,
+        loadParams: {
+            pdbId: "101m",
+            reprProvider: RcsbRepresentationPreset,
+            params: {
+                id: "structure_2",
+                modelMap: new Map<string,string>(),
+                mapStructure: function (key: string, structure: PluginStateObject.Molecule.Structure): void{
+                    this.modelMap.set(key,structure.data.units[0].model.id);
+                },
+                getMap: function(): Map<string,string>{
+                    return this.modelMap;
+                }
+            }
+        }
+    }],
+    pluginConfig: {
+        showImportControls: true,
+        showSessionControls: false
+    }
+};
+
+document.addEventListener("DOMContentLoaded", function(event) {
+    const panel3d = new RcsbFv3DCustom({
+        elementId: "pfv",
+        structurePanelConfig: molstarConfig,
+        sequencePanelConfig: sequenceConfig,
+        cssConfig:{
+            structurePanel:{
+                minWidth:800,
+                minHeight:800
+            },
+            sequencePanel:{
+                minWidth:800
+            }
+        }
+    });
+    panel3d.render();
+});
+

tsconfig.examples.json

@@ -13,6 +13,7 @@
   "include": [
     "src/custom.d.ts",
     "src/examples/single-chain/index.tsx",
+    "src/examples/external-mapping/index.tsx",
     "src/examples/multiple-chain/index.tsx",
     "src/examples/structural-alignment/index.tsx",
     "src/examples/css-config/index.tsx",

webpack.examples.config.js

@@ -56,6 +56,17 @@ examples.push({
     }
 });
 
+examples.push({
+    ...commonConfig,
+    entry: {
+        "index": './build/src/examples/external-mapping/index.js'
+    },
+    output: {
+        filename: '[name].js',
+        path: path.resolve(__dirname, out_path+'/external-mapping/')
+    }
+});
+
 examples.push({
     ...commonConfig,
     entry: {