Commit d323cd99 authored by Lukas Pravda's avatar Lukas Pravda
Browse files

allow menu to be switched on/off during initialization

parent 8e460b10
// 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;
......
......@@ -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
......@@ -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
......
Markdown is supported
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