stick_click.html

<div id="viewport" style="width:100%; height:100%;"></div>
<script src="https://cdn.rawgit.com/arose/ngl/v2.0.0-dev.31/dist/ngl.js"></script>
<script>
// Create NGL Stage object
var stage = new NGL.Stage( "viewport" );
var stickRepr
var stickSel = ""

// Handle window resizing
window.addEventListener( "resize", function( event ){
    stage.handleResize();
}, false );


// Load PDB entry 1CRN
stage.loadFile( "rcsb://1ycr", { defaultRepresentation: true } ).then(function(e){
    stickRepr = e.addRepresentation('ball+stick', {sele: 'none'})
})

// see the residueproxy object (http://nglviewer.org/ngl/api/class/src/proxy/residue-proxy.js~ResidueProxy.html)
stage.signals.clicked.add(function (pickingProxy) {
    if (pickingProxy && (pickingProxy.atom || pickingProxy.bond)){
        var atom = pickingProxy.atom || pickingProxy.closestBondAtom;
        var residue = atom.residue
        curSel = String(residue.resno)+':'+residue.chainname+' or '
        isSel = stickSel.search(curSel)
        if (isSel != -1) {
            // Toggle display
            stickSel = stickSel.replace(curSel, "")
        } else {
            // Append to selection
            stickSel += curSel
        }
        if (console.log) console.log(stickSel);
        if (stickSel.length > 0) {
            stickRepr.setSelection(stickSel)
        }
    }
});

</script>