2. PDB Topology Viewer as Web component - PDBeurope/pdb-topology-viewer GitHub Wiki
PDB Topology Viewer is also available as a web-component (custom HTML Element)
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>
<!-- 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-component-2.0.0.js" defer></script>*Until web components are natively supported by all browsers, it is necessary to use polyfills
2. Include PDB Topology Viewer as HTML Element
<pdb-topology-viewer pdb-id="1cbs" entity-id="1"></pdb-topology-viewer>Check here the example demonstrating all the steps
| No. | Attribute | Details |
|---|---|---|
| 01 | entry-id (Mandatory) |
PDB ID Example: entry-id="1cbs"
|
| 02 | entity-id (Mandatory) |
Entity ID Example: entity-id="1"
|
| 03 | chain-id | Chain ID Example: chain-id="A". Best chain will be displayed if chainId is not specified. |
| 04 | display-style | CSS style for the display box - Example: display-style="border:1px solid #ff0000" will set the border color to red |
| 05 | error-style | CSS style for the error box - Example: display-style="color: #ff0000" will set the error text color to red |
| 06 | subscribe-events | Allow event binding with other PDB Web-components Example: subscribe-events="true"**default - true |