<!DOCTYPE html>
<html>
<head>
<!-- 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/d3@5.9.2" 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>
<style>
#viewerSection{
float:left;
width:450px;
height: 450px;
position:relative;
}
</style>
</head>
<body>
<h4>PDB Topology Viewer web-component demo - Helper methods</h4>
<div id="viewerSection">
<!-- PDB Topology Viewer Web-component -->
<pdb-topology-viewer id="topologyView" entry-id="1cbs" entity-id="1"></pdb-topology-viewer>
</div>
<!-- Actions Menu -->
<div style="float:right; border:1px solid lightgray; width:300px;padding:10px;">
<h3><u>Helper methods</u></h3>
<strong>Update Theme</strong><br>
<button id="updateThemeBtn">Update residues 1 to 5 color</button>
<button id="resetThemeBtn">Reset Theme</button><br><br>
<strong>Highlight</strong><br>
<button id="highLightBtn">Highlight residues 70 to 89 </button>
<button id="resetHighlightBtn">Clear Highlight</button><br><br>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
//Get web-component element
const topologyViewEle = document.getElementById('topologyView');
//Bind button clicks
//Update Theme
document.getElementById('updateThemeBtn').addEventListener('click', () => {
topologyViewEle.pluginInstance.updateTheme([{start: 1, end: 5, color: '#ff0000'}]);
});
//Reset Theme
document.getElementById('resetThemeBtn').addEventListener('click', () => {
topologyViewEle.pluginInstance.resetTheme();
});
//Highlight
document.getElementById('highLightBtn').addEventListener('click', () => {
topologyViewEle.pluginInstance.highlight(70, 89, '#00ff00');
});
//Clear highlight
document.getElementById('resetHighlightBtn').addEventListener('click', () => {
topologyViewEle.pluginInstance.clearHighlight();
});
});
</script>
</body>
</html>