Ngl: How to label with custom text?

[harryjubb]

Hi,

I'm having big issues labelling residues with custom text.

As I won't always know which atom I want to label (e.g. for non-amino acid residues), my plan has been to select the residue then apply custom text to only the atom I want to, e.g. the first, last, or a particular serial number.

So far I've got:

var selection = '593-593 and :B' // OR ANY OTHER VALID SELECTION

var structureComponent = this.stage.getComponentsByName(structureName).list[0];
var structure = structureComponent.structure;

var selectionObject = new NGL.Selection();
selectionObject.setString(selection);

var selectionAtomIndices = structure.getAtomIndices(selectionObject);

var indexText = selectionAtomIndices[0].toString();

structureComponent.addRepresentation(
  'label',
  {
    sele: selection,
    color: '#111111',
    name: 'myLabel',
    labelType: 'text',
    labelText: {
      indexText: 'Custom label'
    }
  }
);

I'm sure I am doing something wrong with labelText, but so far I've been guessing based on what I can see in the code. Using indexText was based on what I could see in labelFactory:

this.text = text || {};

// ...

case "text":
  l = this.text[ a.index ];
  break;

Any advice is much appreciated! :)

[arose]

There was a bug, fixed in 7b82149e030ec4328782f3a1d29d17838d943e93

I guess it would be nice to have a concise way to put labels at the center of residues (or chains, models, structures).

Try this for now:

var selectionObject = new NGL.Selection(selection);

var labelText = {};
structure.eachAtom(function(atomProxy) {
  // if you don't want a label and can't be more specific with the selection
  // set `labelText[atomProxy.index] = ""`
  labelText[atomProxy.index] = "Hello " + atomProxy.qualifiedName();
}, selectionObject);

structureComponent.addRepresentation(
  'label',
  {
    sele: selection,
    color: '#111111',
    name: 'myLabel',
    labelType: 'text',
    labelText: labelText
  }
);

Something like var foo = {indexText: 'Custom label'} is the same as var foo = {'indexText': 'Custom label'} in JavaScript (note the quotes). In the future you can write var foo = {[indexText]: 'Custom label'} but for now you have to write var foo = {}; foo[indexText] = 'Custom label', until browser support is good enough.

[harryjubb]

I guess it would be nice to have a concise way to put labels at the center of residues (or chains, models, structures).

That would be really great.

Thanks for your reply, I'll update NGL and give that a go 👍

[harryjubb]

I should mention that I'm using TypeScript and ES6 shims, so in theory I can use any new JS features 8-)

[arose]

I guess it would be nice to have a concise way to put labels at the center of residues (or chains, models, structures).

see #141