1. PDB RNA Viewer as JS plugin

PDB RNA Viewer as JS plugin

• Steps to include PDB RNA Viewer in a web-application
• Plugin parameters

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

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

<!-- PDB RNA Viewer library css -->
<link rel="stylesheet" type="text/css" href="https://wwwdev.ebi.ac.uk/pdbe/pdb-component-library/css/pdb-rna-viewer-0.1.0.css">

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

<!-- PDB RNA Viewer library script -->
<script type="text/javascript" src="https://wwwdev.ebi.ac.uk/pdbe/pdb-component-library/js/pdb-rna-viewer-0.1.0.js" defer></script>

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

<script>
	//Create plugin instance
    const pluginInstance = new PdbRnaViewerPlugin();

    //Get element from HTML/Template to place the view
    const viewContainer = document.getElementById('pdb-rna-viewer');

    const options = {
       pdbId: '3l3c',
       entityId: '3',
       chainId: 'R',
       subscribeEvents: true
    } 
    
    //Call render method to display the 2D view
    pluginInstance.render(viewContainer, options);
</script>

Check here the example demonstrating all the steps

Plugin parameters (options)

No.	Option	Value	Details
01	pdbId	string **	PDB ID - Example: '3l3c'
02	entityId	string **	Entity ID - Example: '3'
03	chainId	string **	Chain ID - Example: 'R'
04	theme	json {color?: string, highlightColor?: string, unobservedColor?: string, strokeWidth?: number}	Set colours and Path stroke width
05	subscribeEvents	boolean Default false	Subscribe to other PDB Web-components custom events

** Mandatory. ↩