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

demo changes

parent ced42081
No related branches found
No related tags found
1 merge request!1Dev
Pipeline #58885 passed with stages
Stage:
    Stage:
      in 1 minute and 8 seconds
      Hide whitespace changes
      Inline Side-by-side
      README.md
      + 17
      − 8
      View file @ e8d3c705
      ......@@ -6,7 +6,7 @@ This is a web-component to display ligand structure in 2D along with its interac
      ```shell
      npm run-script build
      cp demo* build/
      cp demo* build/ (this copies demo_component.html and demo_plugin.html to build folder)
      cd build
      python3 -m http.server
      ```
      ......@@ -32,6 +32,9 @@ A few files needs to be imported in the page before the component is attempted t
      ```html
      <!-- D3 -->
      <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" />
      ......@@ -47,22 +50,22 @@ A few files needs to be imported in the page before the component is attempted t
      <script type="module" src="pdbe-interactions-component-0.1.0.js"></script>
      ```
      **A) Bound molecule interactions**
      **A) Ligand interactions**
      ```html
      <pdb-interactions pdb-id="3d12" bound-molecule-id="bm1"></pdb-interactions>
      <pdb-interactions pdb-id="1cbs" pdb-res-id="200" pdb-chain-id="A"></pdb-interactions>
      ```
      **B) Ligand interactions**
      **B) Bound molecule interactions**
      ```html
      <ligand-display pdb-id="1cbs" pdb-res-id="200" pdb-chain-id="A"></ligand-display>
      <pdb-interactions pdb-id="3d12" bound-molecule-id="bm1"></pdb-interactions>
      ```
      **C) Ligand/chemical component**
      ```html
      <ligand-display pdb-res-name="CLR" zoom-on ></ligand-display>
      <pdb-interactions pdb-res-name="CLR" zoom-on ></pdb-interactions>
      ```
      The component contains a number of properties that can be set, in order to change data that are being displayed. First you need to define a component on the page:
      ......@@ -92,14 +95,20 @@ component.interactions = interactionsData;
      The component can be also added to DOM directly from JavaScript. There are some requirements
      ```html
      <!-- D3 -->
      <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" />
      <!--PDBe interactions component-->
      <script type="module" src="pdbe-interactions-component-0.1.0.js"></script>
      <!--PDBe interactions plugin-->
      <script src="pdbe-interactions-plugin.js"></script>
      <link rel="stylesheet" href="pdbe-interactions.css" />
      ```
      and then the component can be instantiated as simply as:
      ......
      demo_plugin.html
      + 3
      − 3
      View file @ e8d3c705
      ......@@ -42,20 +42,20 @@
      <body>
      <!--Mode A-->
      <div style="position: relative; float: left;">
      <div style="width: 800px; height: 800px; position: relative">
      <div style="width: 600px; height: 600px; position: relative">
      <div id='ligand-interaction'></div>
      </div>
      </div>
      <!--Mode B-->
      <div style="position: relative; float: left;">
      <div style="width: 800px; height: 800px; position: relative">
      <div style="width: 600px; height: 600px; position: relative">
      <div id='boundmolecule-interaction'></div>
      </div>
      <!--Mode C-->
      <div style="position: relative; float: left;">
      <div style="width: 800px; height: 800px; position: relative">
      <div style="width: 600px; height: 600px; position: relative">
      <div id='chem-comp'></div>
      </div>
      </div>
      ......
      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