Skip to content
Snippets Groups Projects
Commit ef3893ef authored by Nurul Nadzirin's avatar Nurul Nadzirin
Browse files

add demos

parent 257d0b22
No related branches found
No related tags found
1 merge request!1Dev
Pipeline #58853 passed with stages
Stage:
    Stage:
      in 1 minute and 8 seconds
      Hide whitespace changes
      Inline Side-by-side
      README.md
      + 9
      − 0
      View file @ ef3893ef
      ......@@ -2,6 +2,15 @@
      This is a web-component to display ligand structure in 2D along with its interactions. Ligand can be perceived as a set of covalently linked pdb residues (refered to as bound molecule) or a single pdb residue. This depiction can be enriched with a substructure highlight and binding site interactions.
      ## Step after cloning (use local server to see demo pages)
      ```shell
      npm run-script build
      cp demo* build/
      cd build
      python3 -m http.server
      ```
      ## Component modes
      * Mode A: Display bound molecule and its interactions
      ......
      demo_component.html 0 → 100644
      + 45
      − 0
      View file @ ef3893ef
      <!doctype html>
      <html lang="en">
      <head>
      <script src="https://d3js.org/d3.v5.min.js"></script>
      <!-- CSS style to be used for scene drawing (required for saving SVGs.) -->
      <link rel="stylesheet" href="pdbe-interactions-svg.css" />
      <!-- UI icons -->
      <link rel="stylesheet" href="https://ebi.emblstatic.net/web_guidelines/EBI-Icon-fonts/v1.3/fonts.css" />
      <!-- Web component polyfill (only loads what it needs) -->
      <script src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs/webcomponents-lite.js"
      charset="utf-8"></script>
      <script src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"
      charset="utf-8"></script>
      <!--PDBe interactions component-->
      <script type="module" src="pdbe-interactions-component-0.1.0.js"></script>
      </head>
      <body>
      <!--Mode A-->
      <div style="position: relative; float: left;">
      <div style="width: 500px; height: 500px; position: relative">
      <pdb-interactions pdb-id="1cbs" pdb-res-id="200" pdb-chain-id="A"></pdb-interactions>
      </div>
      </div>
      <!--Mode B-->
      <div style="position: relative; float: left;">
      <div style="width: 500px; height: 500px; position: relative">
      <pdb-interactions pdb-id="3d12" bound-molecule-id="bm1"></pdb-interactions>
      </div>
      </div>
      <!--Mode C-->
      <div style="position: relative; float: left;">
      <div style="width: 500px; height: 500px; position: relative">
      <pdb-interactions pdb-res-name="CLR" zoom-on></pdb-interactions>
      </div>
      </div>
      </body>
      </html>
      \ No newline at end of file
      demo_plugin.html 0 → 100644
      + 48
      − 0
      View file @ ef3893ef
      <!doctype html>
      <html lang="en">
      <head>
      <script src="https://d3js.org/d3.v5.min.js"></script>
      <!-- CSS style to be used for scene drawing (required for saving SVGs.) -->
      <link rel="stylesheet" href="pdbe-interactions-svg.css" />
      <!-- UI icons -->
      <link rel="stylesheet" href="https://ebi.emblstatic.net/web_guidelines/EBI-Icon-fonts/v1.3/fonts.css" />
      <!-- Web component polyfill (only loads what it needs) -->
      <script src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs/webcomponents-lite.js"
      charset="utf-8"></script>
      <script src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"
      charset="utf-8"></script>
      <!--PDBe interactions plugin-->
      <script src="pdbe-interactions-plugin.js"></script>
      <!--Initialize Visualization-->
      <script>
      document.addEventListener("DOMContentLoaded", function (event) {
      var eleLigInteraction = document.getElementById('ligand-interaction');
      this.display = new Visualization(eleLigInteraction, undefined);
      this.display.initLigandInteractions('1cbs', 200, 'A');
      var eleLigInteraction = document.getElementById('boundmolecule-interaction');
      this.display = new Visualization(eleLigInteraction, undefined);
      this.display.initBoundMoleculeInteractions('3d12', 'bm1');
      });
      </script>
      </head>
      <body>
      <div style="position: relative; float: left;">
      <div style="width: 800px; height: 800px; position: relative">
      <div id='ligand-interaction'></div>
      </div>
      </div>
      <div style="position: relative; float: left;">
      <div style="width: 800px; height: 800px; position: relative">
      <div id='boundmolecule-interaction'></div>
      </div>
      </div>
      </body>
      </html>
      \ No newline at end of file
      0% or .
      You are about to add 0 people to the discussion. Proceed with caution.
      Finish editing this message first!
      Please register or to comment