ui.ts 13.2 KB
Newer Older
Lukas Pravda's avatar
Lukas Pravda committed
1 2
// #region help
let helpLigands = `
3
    <table class='pdb-lig-env-help-table'>
Lukas Pravda's avatar
Lukas Pravda committed
4 5
        <tr>
            <td>
6
                <div class="pdb-lig-env-help-residue" style="background: #80A0F0; "></div>
Lukas Pravda's avatar
Lukas Pravda committed
7
            </td>
8
            <td>hydrophobic</td>
Lukas Pravda's avatar
Lukas Pravda committed
9
            <td>
10
                <div class="pdb-lig-env-help-residue" style="background: #C048C0;"></div>
Lukas Pravda's avatar
Lukas Pravda committed
11
            </td>
Lukas Pravda's avatar
Lukas Pravda committed
12
            <td>negatively charged</td>
Lukas Pravda's avatar
Lukas Pravda committed
13 14 15
        </tr>
        <tr>
            <td>
16
                <div class="pdb-lig-env-help-residue" style="background: #15A4A4;"></div>
Lukas Pravda's avatar
Lukas Pravda committed
17 18 19
            </td>
            <td>aromatic</td>
            <td>
20
                <div class="pdb-lig-env-help-residue" style="background: #15C015;"></div>
Lukas Pravda's avatar
Lukas Pravda committed
21
            </td>
22 23
            <td>polar</td>
            <td>
Lukas Pravda's avatar
Lukas Pravda committed
24 25 26
        </tr>
        <tr>
            <td>
27
                <div class="pdb-lig-env-help-residue" style="background: #F08080;"></div>
Lukas Pravda's avatar
Lukas Pravda committed
28
            </td>
29
            <td>cystein</td>         
Lukas Pravda's avatar
Lukas Pravda committed
30
            <td>
31
                <div class="pdb-lig-env-help-residue" style="background: #00BFFF;"></div>
Lukas Pravda's avatar
Lukas Pravda committed
32
            </td>
33
            <td>water</td>                    
Lukas Pravda's avatar
Lukas Pravda committed
34 35 36
        </tr>
        <tr>
            <td>
37
                <div class="pdb-lig-env-help-residue" style="background: #F01505;"></div>
Lukas Pravda's avatar
Lukas Pravda committed
38
            </td>
Lukas Pravda's avatar
Lukas Pravda committed
39
            <td>positively charged</td>
Lukas Pravda's avatar
Lukas Pravda committed
40
            <td>
41
                <div class="pdb-lig-env-help-residue" style="background: #F2F2F2;"></div>
Lukas Pravda's avatar
Lukas Pravda committed
42
            </td>
43
            <td>other</td>               
Lukas Pravda's avatar
Lukas Pravda committed
44 45 46
        </tr>
        <tr>
            <td>
47
                 <div class="pdb-lig-env-help-residue" style="background: #F09048;"></div>
48 49 50
            </td>
            <td>glycine</td>                            
            <td>
51
                <div class="pdb-lig-env-help-residue" style="background: white; border: 1.2px solid black;"></div>
Lukas Pravda's avatar
Lukas Pravda committed
52 53
            </td>
            <td>bound molecule</td>
54 55 56 57 58 59
        </tr>
        <tr>
        <td></td>
        <td><a href="https://www.ncbi.nlm.nih.gov/glycans/snfg.html" target="blank">glycans (SNFG)</a></td>
        <td></td>
        <td></td>
Lukas Pravda's avatar
Lukas Pravda committed
60 61 62 63
        </tr>
    </table>
    `
let helpBonds = `
64
<table class='pdb-lig-env-help-table' style="border-bottom: 0.5px solid black; padding-bottom: 10px;">
Lukas Pravda's avatar
Lukas Pravda committed
65 66
<tr>
    <td>
Lukas Pravda's avatar
Lukas Pravda committed
67
        <hr style="border: 0 none; border-top: 5px dashed #AD4379; background: none; height: 0;" />
Lukas Pravda's avatar
Lukas Pravda committed
68 69 70
    </td>
    <td>aromatic</td>
    <td>
Lukas Pravda's avatar
Lukas Pravda committed
71
            <hr style="border: 0 none; border-top: 5px dashed #FF5050; background: none; height: 0;" />
Lukas Pravda's avatar
Lukas Pravda committed
72 73 74 75 76 77 78 79 80
    </td>
    <td>clashes</td>
</tr>
<tr>
    <td>
            <hr style="border: 0 none; border-top: 5px solid black; background: none; height: 0;" />
    </td>
    <td>covalent</td>
    <td>
Lukas Pravda's avatar
Lukas Pravda committed
81
            <hr style="border: 0 none; border-top: 5px dashed #3F26BF; background: none; height: 0;" />
Lukas Pravda's avatar
Lukas Pravda committed
82 83 84 85 86 87 88 89 90 91 92 93 94 95 96
    </td>
    <td>electrostatic</td>

</tr>
<tr>
    <td>
        <hr style="border: 0 none; border-top: 5px solid #008080; background: none; height: 0;" />                        
    </td>
    <td>metal</td>
    <td></td>
    <td>hydrophobic</td>
</tr>

<tr>
    <td>
Lukas Pravda's avatar
Lukas Pravda committed
97
        <hr style="border: 0 none; border-top: 5px dashed #9B7653; background: none; height: 0;" />
Lukas Pravda's avatar
Lukas Pravda committed
98 99 100 101
    </td>
    <td>vdw</td>
</tr>
</table>`
Lukas Pravda's avatar
Lukas Pravda committed
102 103 104 105 106 107 108 109 110 111 112 113
// <table class="pdb-lig-env-help-table" style="margin-top: 5px;">
// <tr>
//     <td>
//         <hr style="border: 0 none; border-top: 5px solid black; background: none; height: 0;" />
//     </td>
//     <td>covalent</td>
//     <td>
//         <hr style="border: 0 none; border-top: 5px dashed black; background: none; height: 0;" />
//     </td>
//     <td>non-covalent</td>
// </tr>                
// </table>`
Lukas Pravda's avatar
Lukas Pravda committed
114 115 116 117 118 119

// #endregion help



class UI {
Lukas Pravda's avatar
Lukas Pravda committed
120
    private parent: HTMLElement;
Lukas Pravda's avatar
Lukas Pravda committed
121 122
    private display: Visualization;

Lukas Pravda's avatar
Lukas Pravda committed
123 124 125 126 127
    private residueLabel: d3.Selection<d3.BaseType, {}, HTMLElement, any>; //label used to display ligand ids
    private tooltip: d3.Selection<d3.BaseType, {}, HTMLElement, any>; // mouseover tooltips

    private originalWidth: number;
    private originalHeight: number;
Lukas Pravda's avatar
Lukas Pravda committed
128 129 130


    constructor(element: HTMLElement, vis: Visualization) {
Lukas Pravda's avatar
Lukas Pravda committed
131
        this.parent = element;
Lukas Pravda's avatar
Lukas Pravda committed
132 133
        this.display = vis;

Lukas Pravda's avatar
Lukas Pravda committed
134 135 136 137
        this.originalWidth = this.parent.offsetWidth;
        this.originalHeight = this.parent.offsetHeight;


Lukas Pravda's avatar
Lukas Pravda committed
138 139
    }

Lukas Pravda's avatar
Lukas Pravda committed
140 141 142 143 144 145 146 147 148 149
    /**
     * Registers UI elements on the top of SVG canvas with interactions
     * and ligands
     *
     * @param {Config.UIParameters} params Object with annotation which
     * UI elements should be created.
     * @returns
     * @memberof UI
     */
    public register(params: Config.UIParameters) {
Lukas Pravda's avatar
Lukas Pravda committed
150 151 152 153
        if (!Object.keys(params).some(x => params[x])) {
            return;
        }

Lukas Pravda's avatar
Lukas Pravda committed
154
        let toolbar = d3.select(this.parent)
Lukas Pravda's avatar
Lukas Pravda committed
155
            .append('div')
156
            .classed('pdb-lig-env-toolbar-container', true)
Lukas Pravda's avatar
Lukas Pravda committed
157 158 159 160
            .on('mouseover', () => this.displayToolbarPanel(true))
            .on('mouseout', () => this.displayToolbarPanel(false));

        toolbar.append('div')
161
            .classed('pdb-lig-env-menu-panel', true)
Lukas Pravda's avatar
Lukas Pravda committed
162 163 164 165 166
            .append('i')
            .attr('title', 'Menu')
            .attr('class', 'icon icon-common icon-bars');

        let dynamicPanel = toolbar.append('div')
167 168
            .classed('pdb-lig-env-menu-panel', true)
            .attr('id', 'pdb-lig-env-menu-dynamic-panel')
Lukas Pravda's avatar
Lukas Pravda committed
169 170 171
            .style('display', 'none')
            .style('opacity', 0);

Lukas Pravda's avatar
Lukas Pravda committed
172
        if (params.help) {
Lukas Pravda's avatar
Lukas Pravda committed
173
            dynamicPanel.append('i')
174
                .attr('id', 'pdb-lig-env-help-btn')
Lukas Pravda's avatar
Lukas Pravda committed
175 176 177
                .attr('title', 'Help')
                .attr('class', 'icon icon-common icon-question-circle')
                .on('click', () => this.showHelp());
Lukas Pravda's avatar
Lukas Pravda committed
178

179 180
            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);
Lukas Pravda's avatar
Lukas Pravda committed
181 182 183

            navbar.append('a')
                .classed('active', true)
184
                .attr('id', 'pdb-lig-env-help-residues-btn')
Lukas Pravda's avatar
Lukas Pravda committed
185 186 187 188
                .text('Ligands and residues')
                .on('click', () => this.changeHelp(true));

            navbar.append('a')
189
                .attr('id', 'pdb-lig-env-help-bonds-btn')
Lukas Pravda's avatar
Lukas Pravda committed
190 191 192
                .text('Interactions')
                .on('click', () => this.changeHelp(false));

193 194
            cont.append('div').attr('id', 'pdb-lig-env-help-ligands').html(helpLigands);
            cont.append('div').attr('id', 'pdb-lig-env-help-bonds').html(helpBonds);
Lukas Pravda's avatar
Lukas Pravda committed
195 196 197 198
        }

        if (params.downloadImage) {
            dynamicPanel.append('i')
199
                .attr('id', 'pdb-lig-env-screenshot-btn')
Lukas Pravda's avatar
Lukas Pravda committed
200
                .attr('title', 'Screenshot')
Lukas Pravda's avatar
Lukas Pravda committed
201 202 203 204 205 206
                .attr('class', 'icon icon-common icon-camera')
                .on('click', () => this.saveSVG());
        }

        if (params.downloadData) {
            dynamicPanel.append('i')
207
                .attr('id', 'pdb-lig-env-download-btn')
Lukas Pravda's avatar
Lukas Pravda committed
208 209 210 211 212
                .attr('title', 'Download interactions')
                .attr('class', 'icon icon-common icon-download')
                .on('click', () => this.download());
        }

Lukas Pravda's avatar
Lukas Pravda committed
213 214 215



Lukas Pravda's avatar
Lukas Pravda committed
216 217
        if (params.center) {
            dynamicPanel.append('i')
218
                .attr('id', 'pdb-lig-env-center-btn')
219
                .attr('title', 'Center screen')
Lukas Pravda's avatar
Lukas Pravda committed
220 221 222 223
                .attr('class', 'icon icon-common icon-crosshairs')
                .on('click', () => this.center());
        }

Lukas Pravda's avatar
Lukas Pravda committed
224
        if (params.fullScreen) {
Lukas Pravda's avatar
Lukas Pravda committed
225
            dynamicPanel.append('i')
226
                .attr('id', 'pdb-lig-env-fullscreen-btn')
Lukas Pravda's avatar
Lukas Pravda committed
227 228 229 230
                .attr('title', 'Toggle Expanded')
                .attr('class', 'icon icon-common icon-fullscreen')
                .on('click', () => this.fullScreen());
        }
Lukas Pravda's avatar
Lukas Pravda committed
231

Lukas Pravda's avatar
Lukas Pravda committed
232 233
        if (params.reinitialize) {
            dynamicPanel.append('i')
234
                .attr('id', 'pdb-lig-env-home-btn')
Lukas Pravda's avatar
Lukas Pravda committed
235
                .attr('title', 'Reinitialize')
Lukas Pravda's avatar
Lukas Pravda committed
236 237
                .attr('class', 'icon icon-common icon-sync-alt')
                .on('click', () => this.reinitialize());
Lukas Pravda's avatar
Lukas Pravda committed
238 239 240
        }

        if (params.tooltip) {
Lukas Pravda's avatar
Lukas Pravda committed
241
            this.tooltip = d3.select(this.parent).append('div')
242 243
                .classed('pdb-lig-env-label', true)
                .attr('id', 'pdb-lig-env-tooltip')
Lukas Pravda's avatar
Lukas Pravda committed
244 245 246 247
                .style('opacity', 0)
        }

        if (params.residueLabel) {
Lukas Pravda's avatar
Lukas Pravda committed
248
            this.residueLabel = d3.select(this.parent).append('div')
249 250
                .classed('pdb-lig-env-label', true)
                .attr('id', 'pdb-lig-env-residue-label')
Lukas Pravda's avatar
Lukas Pravda committed
251 252 253
                .style('opacity', 0)
        }

254
        if (this.tooltip !== undefined) {
Lukas Pravda's avatar
Lukas Pravda committed
255 256 257
            this.parent.addEventListener(Config.interactionClickEvent, e => this.nodeMouseEnterEventHandler(e));
            this.parent.addEventListener(Config.interactionMouseoverEvent, e => this.nodeMouseEnterEventHandler(e));
            this.parent.addEventListener(Config.interactionMouseoutEvent, () => this.nodeMouseLeaveEventHandler());
258 259 260
        }

        if (this.residueLabel !== undefined) {
Lukas Pravda's avatar
Lukas Pravda committed
261 262
            this.parent.addEventListener(Config.interactionShowLabelEvent, e => this.showLigandLabel(e));
            this.parent.addEventListener(Config.interactionHideLabelEvent, () => this.hideLigandLabel());
263 264
        }

Lukas Pravda's avatar
Lukas Pravda committed
265 266 267 268
    }

    // #region UI methods
    private saveSVG() {
Lukas Pravda's avatar
Lukas Pravda committed
269
        this.display.saveSvg();
Lukas Pravda's avatar
Lukas Pravda committed
270 271 272
    }

    private reinitialize() {
Lukas Pravda's avatar
Lukas Pravda committed
273
        this.display.reinitialize()
Lukas Pravda's avatar
Lukas Pravda committed
274 275 276
    }

    private download() {
Lukas Pravda's avatar
Lukas Pravda committed
277
        this.display.downloadInteractionsData()
Lukas Pravda's avatar
Lukas Pravda committed
278 279 280
    }

    private center() {
Lukas Pravda's avatar
Lukas Pravda committed
281
        this.display.centerScene()
Lukas Pravda's avatar
Lukas Pravda committed
282 283 284
    }

    private changeHelp(showResidues: boolean) {
285 286 287 288
        let ligHelpBtn = d3.select(this.parent).select('#pdb-lig-env-help-residues-btn');
        let bondHelpBtn = d3.select(this.parent).select('#pdb-lig-env-help-bonds-btn');
        let bondHelpSection = d3.select(this.parent).select('#pdb-lig-env-help-bonds');
        let ligHelpSection = d3.select(this.parent).select('#pdb-lig-env-help-ligands');
Lukas Pravda's avatar
Lukas Pravda committed
289 290 291 292 293 294 295 296 297 298 299 300 301 302 303

        if (showResidues) {
            bondHelpBtn.classed('active', false);
            ligHelpBtn.classed('active', true);
            bondHelpSection.style('display', 'none');
            ligHelpSection.style('display', 'block');

        } else {
            ligHelpBtn.classed('active', false);
            bondHelpBtn.classed('active', true);
            bondHelpSection.style('display', 'block');
            ligHelpSection.style('display', 'none');
        }
    }

Lukas Pravda's avatar
Lukas Pravda committed
304
    private showHelp() {
305 306
        let el = d3.select(this.parent).select('#pdb-lig-env-help-container');
        let btn = d3.select(this.parent).select('#pdb-lig-env-help-btn');
Lukas Pravda's avatar
Lukas Pravda committed
307 308 309 310 311 312 313 314 315 316 317 318

        if (el.style('display') === 'block') {
            el.style('display', 'none');
            el.style('opacity', 0);
            btn.style('color', '');
        } else {
            el.style('display', 'block');
            el.style('opacity', 1);
            btn.style('color', '#637ca0');
        }
    }

Lukas Pravda's avatar
Lukas Pravda committed
319
    private displayToolbarPanel(show: boolean) {
320 321
        let dynPanel = d3.select(this.parent).select('#pdb-lig-env-menu-dynamic-panel');
        let el = d3.select(this.parent).select('#pdb-lig-env-help-container');
Lukas Pravda's avatar
Lukas Pravda committed
322 323 324 325 326 327 328 329 330 331 332 333 334

        if (!dynPanel && !el) return;

        if (show || el.style('display') === 'block') {
            dynPanel.style('display', 'block');
            dynPanel.style('opacity', 0.9);
        } else {

            dynPanel.style('display', 'none');
            dynPanel.style('opacity', 0);
        }
    }

Lukas Pravda's avatar
Lukas Pravda committed
335 336 337 338 339 340
    /**
     * Switch component view and full screen.
     *
     * @private
     * @memberof UI
     */
Lukas Pravda's avatar
Lukas Pravda committed
341
    private fullScreen() {
342
        let btn = d3.select(this.parent).select('#pdb-lig-env-fullscreen-btn');
Lukas Pravda's avatar
Lukas Pravda committed
343 344

        if (btn.attr('class') === 'icon icon-common icon-fullscreen') {
345 346
            this.display.fullScreen = true;

Lukas Pravda's avatar
Lukas Pravda committed
347 348 349
            this.parent.parentElement.style.width = '100%'
            this.parent.parentElement.style.height = '100%'
            this.parent.parentElement.style.position = 'fixed';
Lukas Pravda's avatar
Lukas Pravda committed
350 351
            this.parent.parentElement.style.top = '0';
            this.parent.parentElement.style.left = '0';
Lukas Pravda's avatar
Lukas Pravda committed
352 353
            this.parent.parentElement.style.zIndex = '10000000000000';

Lukas Pravda's avatar
Lukas Pravda committed
354 355
            btn.classed('icon-fullscreen', false);
            btn.classed('icon-fullscreen-collapse', true);
Lukas Pravda's avatar
Lukas Pravda committed
356 357

            this.display.centerScene();
Lukas Pravda's avatar
Lukas Pravda committed
358
        } else {
Lukas Pravda's avatar
Lukas Pravda committed
359
            this.display.fullScreen = true;
Lukas Pravda's avatar
Lukas Pravda committed
360 361 362 363 364 365

            this.parent.parentElement.style.width = `${this.originalWidth}px`;
            this.parent.parentElement.style.height = `${this.originalHeight}px`;
            this.parent.parentElement.style.position = 'relative';
            this.parent.parentElement.style.zIndex = '';

366 367 368
            btn.classed('icon-fullscreen', true);
            btn.classed('icon-fullscreen-collapse', false);

Lukas Pravda's avatar
Lukas Pravda committed
369 370 371
            this.display.centerScene();


Lukas Pravda's avatar
Lukas Pravda committed
372 373
        }
    }
Lukas Pravda's avatar
Lukas Pravda committed
374
    // #endregion UI methods
375 376 377

    // #region event handlers
    private nodeMouseEnterEventHandler(e: any) {
Lukas Pravda's avatar
Lukas Pravda committed
378

379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409
        this.tooltip.transition()
            .duration(200)
            .style('opacity', .9);

        this.tooltip.html(e.detail.tooltip);

    }

    private nodeMouseLeaveEventHandler() {
        this.tooltip.transition()
            .duration(200)
            .style('opacity', 0);

    }

    private showLigandLabel(e: any) {
        this.residueLabel.transition()
            .duration(200)
            .style('opacity', .9);

        this.residueLabel.html(e.detail.label);

    }

    private hideLigandLabel() {
        this.residueLabel.transition()
            .duration(200)
            .style('opacity', 0);
    }
    // #endregion event handlers

Lukas Pravda's avatar
Lukas Pravda committed
410
}