PDB Topology Viewer plugin demo - Helper functions

<!DOCTYPE html>
<html>

  <head>

    <!-- 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-plugin-2.0.0.js" defer></script>
    
    <style>
      #topologyView{
        float:left;
        width:400px;
        height: 400px;
        position:relative;
      }
    </style>
  </head>

  <body>
    <h4>PDB Topology Viewer Plugin demo - Helper functions</h4>
    
    <!-- PDB Topology Viewer container -->
    <div id="topologyView"></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>&nbsp;
      <button id="resetThemeBtn">Reset Theme</button><br><br>

      <strong>Highlight</strong><br>
      <button id="highLightBtn">Highlight residues 70 to 89 </button>&nbsp;
      <button id="resetHighlightBtn">Clear Highlight</button><br><br>
           
      
    </div>
    
    <script>

      document.addEventListener('DOMContentLoaded', () => {

        //Create plugin instance
        const pluginInstance = new PdbTopologyViewerPlugin();

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

        const options = {
          entryId: '1cbs',
          entityId: '1'
        } 
    
        //Call render method to display the 2D view
        pluginInstance.render(viewContainer, options);

        //Bind button clicks

        //Update Theme
        document.getElementById('updateThemeBtn').addEventListener('click', () => {
          pluginInstance.updateTheme([{start: 1, end: 5, color: '#ff0000'}]);
        });

        //Reset Theme
        document.getElementById('resetThemeBtn').addEventListener('click', () => {
          pluginInstance.resetTheme();
        });

        //Highlight
        document.getElementById('highLightBtn').addEventListener('click', () => {
          pluginInstance.highlight(70, 89, '#00ff00');
        });

        //Clear highlight
        document.getElementById('resetHighlightBtn').addEventListener('click', () => {
          pluginInstance.clearHighlight();
        });


      });
      
    </script>
  </body>

</html>