Skip to content
Mandar Deshpande edited this page Sep 29, 2020 · 1 revision

PDB 3D Complex

PDB 3D Complex is available as a JS plugin and as a Web-component (custom HTML Element)

Setup

PDB 3D Complex as JS plugin

Steps to include PDB 3D Complex as a JavaScript plugin in a web application

1. Include the library script file in your web page

 <!-- PDB 3D Complex JS and CSS file -->
 <link rel="stylesheet" type="text/css" href="https://www.ebi.ac.uk/pdbe/pdb-component-library/css/pdb-3d-complex-2.0.0.css">
 <script src="https://www.ebi.ac.uk/pdbe/pdb-component-library/js/pdb-3d-complex-plugin-2.0.0.js"></script>

2. Instantiate plugin and provide parameters to render

<script>
  //Create plugin instance
  const pluginInstance = new Pdb3dComplexPlugin();
  
  //Get element from HTML/Template to place the view
  const viewContainer = document.getElementById('pdb-3d-complex');
  
  //Call render method
  //Parameters - container HTML element, PDB ID, Assembly ID, Summary view(Boolean, optional)
  pluginInstance.render(viewContainer, '1lec', '1', false);
      
</script>

Check here the example demonstrating all the steps

PDB 3D Complex as Web-component

Steps to include PDB 3D Complex as a web-component in a web application

1. Include the library style and script files in your web page

<!-- Required for IE11 -->
<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js" defer></script>
<!-- Web component polyfill (only loads what it needs) -->
<script src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs/webcomponents-lite.js" charset="utf-8" defer></script>
<!-- Required to polyfill modern browsers as code is ES5 for IE... -->
<script src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js" charset="utf-8" defer></script>

<!-- PDB-REDO web-component CSS and JS file -->
<link rel="stylesheet" type="text/css" href="https://www.ebi.ac.uk/pdbe/pdb-component-library/css/pdb-3d-complex-2.0.0.css">
<script src="https://www.ebi.ac.uk/pdbe/pdb-component-library/js/pdb-3d-complex-component-2.0.0.js"></script>

*Until web components are natively supported by all browsers, it is necessary to use polyfills

2. Include PDB 3D complex as HTML Element and set 'pdb-id', 'assembly-id' and 'summary-view' attributes

<pdb-3d-complex pdb-id="1lec" assembly-id="1"></pdb-3d-complex>

Check here the example demonstrating all the steps

Working Example