1. PDB Topology Viewer as JS plugin - PDBeurope/pdb-topology-viewer GitHub Wiki

PDB Topology Viewer as JS plugin

Steps to include PDB Topology Viewer as a JavaScript plugin in a web application

1. Include the dependency and library script file in your web page

<!-- d3.js dependency script -->
<script  src="https://cdn.jsdelivr.net/npm/[email protected]" defer></script>

<!-- PDB Topology Viewer library script -->
<script type="text/javascript" src="https://www.ebi.ac.uk/pdbe/pdb-component-library/js/pdb-topology-viewer-plugin-2.0.0.js" defer></script>

2. Instantiate plugin and provide parameters (options) to render

<script>
   //Instantiate plugin after DOM content is loaded
   document.addEventListener('DOMContentLoaded', () => {

        //Create plugin instance
        var viewerInstance = new PdbTopologyViewerPlugin();

        //Set options (** All the available options are listed below in the documentation)
        var options = {
	    entryId: '1cbs',
	    entityId: '1',
        }
    
        //Get element from HTML/Template to place the viewer 
        var viewerContainer = document.getElementById('myViewer');

        //Call render method to display the 2D view
        viewerInstance.render(viewerContainer, options);
   });
</script>

Check here the example demonstrating all the steps

Plugin parameters (options)

No. Option Value Details
01 entryId string ** PDB ID - Example: '1cbs'
02 entityId string ** Entity ID - Example: '1'
03 chainId string Chain ID - Example: 'A'
Best chain will be displayed if chainId is not specified.
04 displayStyle string CSS style for the display box - Example: 'border:1px solid #ff0000;' will change the border color to red
05 errorStyle string CSS style for the error box - Example: 'color:#ff0000;' will change the error text color to red
06 subscribeEvents boolean
Default true 		Subscribe to other PDB Web-components custom events

** Mandatory. ↩

⚠️ **GitHub.com Fallback** ⚠️