Sketch of an atom monitor for NGL

atom-monitor.js

/**
 * Watches a structure component and maintains a list of atoms
 * currently displayed in atomistic form.
 *
 * Provides a signal AtomMonitor.signals.updated
 */

const COMPONENT_SIGNALS = [
  'representationAdded',
  'representationRemoved',
  'visibilityChanged'
]
const REPRESENTATION_SIGNALS = [
  'visibilityChanged',
  'parametersChanged'
]

const INCLUDED_REPR_TYPES = [
  'line', 'ball+stick', 'licorice', 'spacefill'
]

class AtomMonitor {
  constructor (sc) {
    this.sc = sc
    this.visibleAtoms = this.sc.structure.getAtomSet(false)
    this._previous = this.sc.structure.getAtomSet(false)

    this._boundUpdate = this.update.bind(this)

    // Subscriptions
    COMPONENT_SIGNALS.forEach(name => {
      this.sc.signals[name].add(this._boundUpdate)
    })

    this.signals = {
      updated: new NGL.Signal()
    }

    this.update()
  }

  update () {
    this.visibleAtoms.clearAll()
    if (!this.sc.visible) return
    this.sc.eachRepresentation(r => {
      if (!INCLUDED_REPR_TYPES.includes(r.repr.type)) return

      REPRESENTATION_SIGNALS.forEach(name => {
        // This method checks for duplicate handlers so might as well
        // always add
        r.signals[name].add(this._boundUpdate)
      })
      r.repr.selection.signals.stringChanged.add(this._boundUpdate)
      if (!r.visible) return
      this.visibleAtoms.union(r.repr.structureView.getAtomSet())
    })
    if (this.visibleAtoms.isEqualTo(this._previous)) {
      return
    }
    this.signals.updated.dispatch(this.visibleAtoms)
    this._previous = this.visibleAtoms.clone()
  }
}

export default AtomMonitor

Nice! You can also add hyperball to the list of atomistic representations.