Skip to content
Snippets Groups Projects
Commit 8dbb3078 authored by Lukas Pravda's avatar Lukas Pravda
Browse files

Merge branch 'dev'

parents 736176f0 d323cd99
No related branches found
No related tags found
No related merge requests found
Pipeline #130582 passed with stages
Stage:
    Stage:
      in 1 minute and 29 seconds
      Expand all Hide whitespace changes
      Inline Side-by-side
      README.md
      + 5
      − 4
      View file @ 8dbb3078
      ......@@ -5,10 +5,11 @@ This is a web-component to display ligand structure in 2D along with its interac
      ## Step after cloning (use local server to see demo pages)
      ```shell
      npm run-script build
      cp demo/demo* build/ (this copies demo_component.html and demo_plugin.html to build folder)
      cd build
      python3 -m http.server
      npm run install
      npm run build
      npm run start
      open any of the *.html pages in the demo directory
      ```
      ## Component modes
      ......
      demo/demo_component.html
      + 38
      − 37
      View file @ 8dbb3078
      <!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="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="pdb-ligand-env-component-0.3.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>
      <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-0.3.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 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>
      <!--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></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></pdb-ligand-env>
      </div>
      </div>
      </body>
      </body>
      </html>
      \ No newline at end of file
      demo/demo_plugin.html
      + 45
      − 45
      View file @ 8dbb3078
      <!doctype html>
      <html lang="en">
      <head>
      <link rel="stylesheet" href="pdb-ligand-env.css" />
      <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="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 plugin-->
      <script src="pdb-ligand-env-plugin-min.js"></script>
      <!--Initialize Visualization-->
      <script>
      document.addEventListener("DOMContentLoaded", function (event) {
      //<!--Mode A-->
      var eleLigInteraction = document.getElementById('ligand-interaction');
      this.lidisplay = new Visualization(eleLigInteraction, undefined);
      this.lidisplay.initLigandInteractions('1cbs', 200, 'A');
      <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" />
      <link rel="stylesheet" href="http://127.0.0.1:8080/pdb-ligand-env.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>
      //<!--Mode B-->
      var eleBoundInteraction = document.getElementById('boundmolecule-interaction');
      this.bmdisplay = new Visualization(eleBoundInteraction, undefined);
      this.bmdisplay.initBoundMoleculeInteractions('3d12', 'bm1');
      <!--PDBe interactions plugin-->
      <script src="http://127.0.0.1:8080/pdb-ligand-env-plugin.js"></script>
      //<!--Mode C-->
      var eleChemComp = document.getElementById('chem-comp');
      this.ccdisplay = new Visualization(eleChemComp, undefined);
      this.ccdisplay.initLigandDisplay('HEM');
      });
      </script>
      <!--Initialize Visualization-->
      <script>
      document.addEventListener("DOMContentLoaded", function (event) {
      //<!--Mode A-->
      var eleLigInteraction = document.getElementById('ligand-interaction');
      this.lidisplay = new Visualization(eleLigInteraction, undefined);
      this.lidisplay.initLigandInteractions('1cbs', 200, 'A');
      </head>
      <body>
      <!--Mode A-->
      <div style="position: relative; float: left;">
      <div style="width: 600px; height: 600px; position: relative">
      //<!--Mode B-->
      var eleBoundInteraction = document.getElementById('boundmolecule-interaction');
      this.bmdisplay = new Visualization(eleBoundInteraction, undefined);
      this.bmdisplay.initBoundMoleculeInteractions('3d12', 'bm1');
      //<!--Mode C-->
      var eleChemComp = document.getElementById('chem-comp');
      this.ccdisplay = new Visualization(eleChemComp, undefined);
      this.ccdisplay.initLigandDisplay('HEM');
      });
      </script>
      </head>
      <body>
      <!--Mode A-->
      <div style="position: relative; float: left;">
      <div style="width: 600px; height: 600px; position: relative">
      <div id='ligand-interaction'></div>
      </div>
      </div>
      </div>
      <!--Mode B-->
      <div style="position: relative; float: left;">
      <div style="width: 600px; height: 600px; position: relative">
      <!--Mode B-->
      <div style="position: relative; float: left;">
      <div style="width: 600px; height: 600px; position: relative">
      <div id='boundmolecule-interaction'></div>
      </div>
      ......@@ -60,6 +60,6 @@
      </div>
      </div>
      </body>
      </body>
      </html>
      \ No newline at end of file
      gulpfile.js
      + 7
      − 1
      View file @ 8dbb3078
      ......@@ -54,6 +54,12 @@ gulp.task('copyIndex', () => {
      .pipe(gulp.dest('build/'));
      });
      gulp.task('copyAppCSS', () => {
      return gulp.src(['src/styles/pdb-ligand-env.css'])
      .pipe(concat(`pdb-ligand-env.css`))
      .pipe(gulp.dest('build/'));
      });
      gulp.task('copyMapping', () => {
      return gulp.src(['dependencies/het_mapping.json'])
      .pipe(concat(`het_mapping.json`))
      ......@@ -88,5 +94,5 @@ gulp.task('minifyPlugin', () => {
      .pipe(gulp.dest('build/'));
      });
      gulp.task('default', gulp.series('clean', 'concat', 'concatCSS',
      gulp.task('default', gulp.series('clean', 'copyAppCSS', 'concat', 'concatCSS',
      'copyXML', 'copyIndex', 'copyMapping', 'minifyPlugin'));
      \ No newline at end of file
      package-lock.json
      + 13101
      − 19
      View file @ 8dbb3078
      This diff is collapsed.
      src/component/component.js
      + 8
      − 6
      View file @ 8dbb3078
      // Import the LitElement base class and html helper function
      import { LitElement, html } from 'lit-element';
      import { LitElement } from 'lit-element';
      import "../styles/pdb-ligand-env.css";
      // Extend the LitElement base class
      ......@@ -26,11 +26,13 @@ class pdbLigandEnv extends LitElement {
      }
      async connectedCallback() {
      this.highlightSubstructure = [];
      let uiParams = new Config.UIParameters();
      uiParams.zoom = this.zoomOn;
      uiParams.menu = this.pdbId !== undefined;
      let env = this.env === undefined ? "production" : this.env;
      this.display = new Visualization(this, uiParams, env);
      if (this.pdbId) {
      ......@@ -58,7 +60,7 @@ class pdbLigandEnv extends LitElement {
      this.display.centerScene();
      }
      set ligandHighlight(data) {
      set highlightSubstructure(data) {
      if (!data || !this.display) {
      console.log(`Argument needs to be a non empty array of strings.`);
      return;
      ......@@ -75,8 +77,8 @@ class pdbLigandEnv extends LitElement {
      this.display.addLigandHighlight(this.substructureHighlight, this.highlightColor);
      }
      set contourData(data) {
      if (!data || !this.display || !this.display.depiction !== undefined ) return;
      set contourData(data) {
      if (!data || !this.display || !this.display.depiction !== undefined) return;
      this.display.addContours(data);
      }
      ......@@ -89,7 +91,7 @@ class pdbLigandEnv extends LitElement {
      createRenderRoot() {
      /**
      * Render template in light DOM. Note that shadow DOM features like
      * Render template in light DOM. Note that shadow DOM features like
      * encapsulated CSS are unavailable.
      */
      return this;
      ......
      src/plugin/config.ts
      + 3
      − 2
      View file @ 8dbb3078
      ......@@ -21,7 +21,7 @@ namespace Config {
      ['proline', Array<string>('P')],
      ['aromatic', Array<string>('H', 'Y')]
      ]);
      export const aaAbreviations = new Map<string, string>([
      ['ALA', 'A'],
      ['ARG', 'R'],
      ......@@ -69,6 +69,7 @@ namespace Config {
      help: boolean;
      residueLabel: boolean;
      tooltip: boolean;
      menu: boolean;
      constructor() {
      this.reinitialize = true;
      ......@@ -80,7 +81,7 @@ namespace Config {
      this.help = true;
      this.residueLabel = true;
      this.tooltip = true;
      this.menu = true;
      }
      }
      }
      \ No newline at end of file
      src/plugin/ui.ts
      + 97
      − 99
      View file @ 8dbb3078
      ......@@ -26,11 +26,11 @@ let helpLigands = `
      <td>
      <div class="pdb-lig-env-help-residue" style="background: #F08080;"></div>
      </td>
      <td>cystein</td>
      <td>cystein</td>
      <td>
      <div class="pdb-lig-env-help-residue" style="background: #00BFFF;"></div>
      </td>
      <td>water</td>
      <td>water</td>
      </tr>
      <tr>
      <td>
      ......@@ -40,13 +40,13 @@ let helpLigands = `
      <td>
      <div class="pdb-lig-env-help-residue" style="background: #F2F2F2;"></div>
      </td>
      <td>other</td>
      <td>other</td>
      </tr>
      <tr>
      <td>
      <div class="pdb-lig-env-help-residue" style="background: #F09048;"></div>
      </td>
      <td>glycine</td>
      <td>glycine</td>
      <td>
      <div class="pdb-lig-env-help-residue" style="background: white; border: 1.2px solid black;"></div>
      </td>
      ......@@ -85,7 +85,7 @@ let helpBonds = `
      </tr>
      <tr>
      <td>
      <hr style="border: 0 none; border-top: 5px solid #008080; background: none; height: 0;" />
      <hr style="border: 0 none; border-top: 5px solid #008080; background: none; height: 0;" />
      </td>
      <td>metal</td>
      <td></td>
      ......@@ -109,7 +109,7 @@ let helpBonds = `
      // <hr style="border: 0 none; border-top: 5px dashed black; background: none; height: 0;" />
      // </td>
      // <td>non-covalent</td>
      // </tr>
      // </tr>
      // </table>`
      // #endregion help
      ......@@ -141,110 +141,109 @@ class UI {
      * Registers UI elements on the top of SVG canvas with interactions
      * and ligands
      *
      * @param {Config.UIParameters} params Object with annotation which
      * @param {Config.UIParameters} p Object with annotation which
      * UI elements should be created.
      * @returns
      * @memberof UI
      */
      public register(params: Config.UIParameters) {
      if (!Object.keys(params).some(x => params[x])) {
      return;
      public register(p: Config.UIParameters) {
      let toolbar = undefined;
      let dynamicPanel = undefined;
      if (p.menu) {
      toolbar = d3.select(this.parent)
      .append('div')
      .classed('pdb-lig-env-toolbar-container', true)
      .on('mouseover', () => this.displayToolbarPanel(true))
      .on('mouseout', () => this.displayToolbarPanel(false));
      toolbar.append('div')
      .classed('pdb-lig-env-menu-panel', true)
      .append('i')
      .attr('title', 'Menu')
      .attr('class', 'icon icon-common icon-bars');
      dynamicPanel = toolbar.append('div')
      .classed('pdb-lig-env-menu-panel', true)
      .attr('id', 'pdb-lig-env-menu-dynamic-panel')
      .style('display', 'none')
      .style('opacity', 0);
      if (p.help) {
      dynamicPanel.append('i')
      .attr('id', 'pdb-lig-env-help-btn')
      .attr('title', 'Help')
      .attr('class', 'icon icon-common icon-question-circle')
      .on('click', () => this.showHelp());
      let cont = d3.select(this.parent).append('div').attr('id', 'pdb-lig-env-help-container')
      let navbar = cont.append('div').classed('pdb-lig-env-help-navbar', true);
      navbar.append('a')
      .classed('active', true)
      .attr('id', 'pdb-lig-env-help-residues-btn')
      .text('Ligands and residues')
      .on('click', () => this.changeHelp(true));
      navbar.append('a')
      .attr('id', 'pdb-lig-env-help-bonds-btn')
      .text('Interactions')
      .on('click', () => this.changeHelp(false));
      cont.append('div').attr('id', 'pdb-lig-env-help-ligands').html(helpLigands);
      cont.append('div').attr('id', 'pdb-lig-env-help-bonds').html(helpBonds);
      }
      if (p.downloadImage) {
      dynamicPanel.append('i')
      .attr('id', 'pdb-lig-env-screenshot-btn')
      .attr('title', 'Screenshot')
      .attr('class', 'icon icon-common icon-camera')
      .on('click', () => this.saveSVG());
      }
      if (p.downloadData) {
      dynamicPanel.append('i')
      .attr('id', 'pdb-lig-env-download-btn')
      .attr('title', 'Download interactions')
      .attr('class', 'icon icon-common icon-download')
      .on('click', () => this.download());
      }
      if (p.center) {
      dynamicPanel.append('i')
      .attr('id', 'pdb-lig-env-center-btn')
      .attr('title', 'Center screen')
      .attr('class', 'icon icon-common icon-crosshairs')
      .on('click', () => this.center());
      }
      if (p.fullScreen) {
      dynamicPanel.append('i')
      .attr('id', 'pdb-lig-env-fullscreen-btn')
      .attr('title', 'Toggle Expanded')
      .attr('class', 'icon icon-common icon-fullscreen')
      .on('click', () => this.fullScreen());
      }
      if (p.reinitialize) {
      dynamicPanel.append('i')
      .attr('id', 'pdb-lig-env-home-btn')
      .attr('title', 'Reinitialize')
      .attr('class', 'icon icon-common icon-sync-alt')
      .on('click', () => this.reinitialize());
      }
      }
      let toolbar = d3.select(this.parent)
      .append('div')
      .classed('pdb-lig-env-toolbar-container', true)
      .on('mouseover', () => this.displayToolbarPanel(true))
      .on('mouseout', () => this.displayToolbarPanel(false));
      toolbar.append('div')
      .classed('pdb-lig-env-menu-panel', true)
      .append('i')
      .attr('title', 'Menu')
      .attr('class', 'icon icon-common icon-bars');
      let dynamicPanel = toolbar.append('div')
      .classed('pdb-lig-env-menu-panel', true)
      .attr('id', 'pdb-lig-env-menu-dynamic-panel')
      .style('display', 'none')
      .style('opacity', 0);
      if (params.help) {
      dynamicPanel.append('i')
      .attr('id', 'pdb-lig-env-help-btn')
      .attr('title', 'Help')
      .attr('class', 'icon icon-common icon-question-circle')
      .on('click', () => this.showHelp());
      let cont = d3.select(this.parent).append('div').attr('id', 'pdb-lig-env-help-container')
      let navbar = cont.append('div').classed('pdb-lig-env-help-navbar', true);
      navbar.append('a')
      .classed('active', true)
      .attr('id', 'pdb-lig-env-help-residues-btn')
      .text('Ligands and residues')
      .on('click', () => this.changeHelp(true));
      navbar.append('a')
      .attr('id', 'pdb-lig-env-help-bonds-btn')
      .text('Interactions')
      .on('click', () => this.changeHelp(false));
      cont.append('div').attr('id', 'pdb-lig-env-help-ligands').html(helpLigands);
      cont.append('div').attr('id', 'pdb-lig-env-help-bonds').html(helpBonds);
      }
      if (params.downloadImage) {
      dynamicPanel.append('i')
      .attr('id', 'pdb-lig-env-screenshot-btn')
      .attr('title', 'Screenshot')
      .attr('class', 'icon icon-common icon-camera')
      .on('click', () => this.saveSVG());
      }
      if (params.downloadData) {
      dynamicPanel.append('i')
      .attr('id', 'pdb-lig-env-download-btn')
      .attr('title', 'Download interactions')
      .attr('class', 'icon icon-common icon-download')
      .on('click', () => this.download());
      }
      if (params.center) {
      dynamicPanel.append('i')
      .attr('id', 'pdb-lig-env-center-btn')
      .attr('title', 'Center screen')
      .attr('class', 'icon icon-common icon-crosshairs')
      .on('click', () => this.center());
      }
      if (params.fullScreen) {
      dynamicPanel.append('i')
      .attr('id', 'pdb-lig-env-fullscreen-btn')
      .attr('title', 'Toggle Expanded')
      .attr('class', 'icon icon-common icon-fullscreen')
      .on('click', () => this.fullScreen());
      }
      if (params.reinitialize) {
      dynamicPanel.append('i')
      .attr('id', 'pdb-lig-env-home-btn')
      .attr('title', 'Reinitialize')
      .attr('class', 'icon icon-common icon-sync-alt')
      .on('click', () => this.reinitialize());
      }
      if (params.tooltip) {
      if (p.tooltip) {
      this.tooltip = d3.select(this.parent).append('div')
      .classed('pdb-lig-env-label', true)
      .attr('id', 'pdb-lig-env-tooltip')
      .style('opacity', 0)
      }
      if (params.residueLabel) {
      if (p.residueLabel) {
      this.residueLabel = d3.select(this.parent).append('div')
      .classed('pdb-lig-env-label', true)
      .attr('id', 'pdb-lig-env-residue-label')
      ......@@ -261,7 +260,6 @@ class UI {
      this.parent.addEventListener(Config.interactionShowLabelEvent, e => this.showLigandLabel(e));
      this.parent.addEventListener(Config.interactionHideLabelEvent, () => this.hideLigandLabel());
      }
      }
      // #region UI methods
      ......
      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