updated README with images

ed3dc5fa · Ibrahim Roshan Kunnakkattu · d84b44a2 · ed3dc5fa · ed3dc5fa · ed3dc5fa
Commit ed3dc5fa authored 11 months ago by Ibrahim Roshan Kunnakkattu
--- a/README.md
+++ b/README.md
@@ -13,15 +13,15 @@ To see demo, copy demo directory to build and open any of the html pages.

 ## Component modes

-* Mode A: Display bound molecule and its interactions
-* Mode B: Display ligand and its interactions
-* Mode C: Display ligand (chemical component) only
-* Mode D: Display ligand and aggregated interactions
+* Mode A: Display ligand and its interactions (Using pdb-id, pdb-res-id and pdb-chain-id)
+* Mode B: Display boundmolecule and its interactions (Using pdb-id and bound-molecule-id)
+* Mode C: Display ligand only (Using pdb-res-name)
+* Mode D: Display ligand and aggregated interactions (Using pdb-res-name and contact-type)

 | Mode A | Mode B | Mode C | Mode D |
 |:------------------: | :-------: | :-------: | :-------: |
-| <img src="dependencies/REA_A_200.svg"/>| <img src="dependencies/3d12_bm1.svg"/> | <img src="https://www.ebi.ac.uk/pdbe-srv/pdbechem/image/showNew?code=VIA&size=500"/> | asd |
-| [1cbs REA 200 A](https://www.ebi.ac.uk/pdbe/entry/pdb/1cbs/bound/REA) | 3D12 bm1 (`2xGLC-2xBGC-LXZ-NGA-GL0`)| [wwPDB CCD - VIA](https://pdbe.org/chem/VIA) | asd |
+| <img src="dependencies/REA_A_200.png">| <img src="dependencies/3d12_bm1.png"/> | <img src="https://ftp.ebi.ac.uk/pub/databases/msd/pdbechem_v2/ccd/V/VIA/VIA_500.svg"/> | <img src="dependencies/STI_aggregated_interactions.png"> |
+| [1cbs REA 200 A](https://www.ebi.ac.uk/pdbe/entry/pdb/1cbs/bound/REA) | [3D12 bm1 (`2xGLC-2xBGC-LXZ-NGA-GL0`)](https://www.ebi.ac.uk/pdbe/entry/pdb/3d12/branched/4)| [wwPDB CCD - VIA](https://pdbe.org/chem/VIA) | STI |

 ## How to use it

@@ -68,12 +68,13 @@ A few files needs to be imported in the page before the component is attempted t
 <pdb-ligand-env pdb-id="3d12" bound-molecule-id="bm1"></pdb-ligand-env>
 ```

-#### C) Ligand/chemical component
+#### C) Ligand

 ```html
 <pdb-ligand-env pdb-res-name="CLR" zoom-on ></pdb-ligand-env>
 ```

+#### D) Ligand and aggregated interactions
 ```html
 <pdb-ligand-env pdb-res-name="STI", contact-type=["hbond","hydrophobic","vdw"]></pdb-ligand-env>
 ```

--- a/demo/demo_component.html
+++ b/demo/demo_component.html
+<!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="http://127.0.0.1:8080/pdb-ligand-env-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="http://127.0.0.1:8080/pdb-ligand-env-component-1.0.0-min.js"></script>
+
+</head>
+
+<body>
+
+  <!--Mode A-->
+  <div style="position: relative; float: left;">
+    <div style="width: 500px; height: 500px; position: relative">
+      <pdb-ligand-env pdb-id="1cbs" pdb-res-id="200" pdb-chain-id="A"></pdb-ligand-env>
+    </div>
+  </div>
+
+  <!--Mode B-->
+  <div style="position: relative; float: left;">
+    <div style="width: 500px; height: 500px; position: relative">
+      <pdb-ligand-env pdb-id="3d12" bound-molecule-id="bm1"></pdb-ligand-env>
+    </div>
+  </div>
+
+  <!--Mode C-->
+  <div style="position: relative; float: left;">
+    <div style="width: 500px; height: 500px; position: relative">
+      <pdb-ligand-env pdb-res-name="CLR" zoom-on names-on></pdb-ligand-env>
+    </div>
+  </div>
+
+</body>
+
+</html>
\ No newline at end of file
--- a/dependencies/3d12_bm1.png
+++ b/dependencies/3d12_bm1.png
--- a/dependencies/IBP_atom_intx.svg
+++ b/dependencies/IBP_atom_intx.svg
--- a/dependencies/REA_A_200.png
+++ b/dependencies/REA_A_200.png
--- a/dependencies/REA_A_200.svg
+++ b/dependencies/REA_A_200.svg
--- a/dependencies/STI_aggregated_interactions.png
+++ b/dependencies/STI_aggregated_interactions.png