allow menu to be switched on/off during initialization

src/component/component.js

 // 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

@@ -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

@@ -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