Page History

...

The hooks property defines a number of callback functions that get invoked as various user interaction events occur. Note that every hook function is optional – if your overlay does not require it, simply omit it from the hooks structure. (If you don't use any callbacks, you can omit the hooks structure altogether).

hooks: {
    // hook for handling escape key
    // Must return true to consume ESC, false otherwise.
    escape: function () {
        // Must return true to consume ESC, false otherwise.
        return stds.stopDisplay();
    },

    // hooks for when the selection changes...
    empty: function () {
        selectionCallback('empty');
    },
    single: function (data) {
        selectionCallback('single', data);
    },
    multi: function (selectOrder) {
        selectionCallback('multi', selectOrder);
        tov.addDetailButton('foo');
        tov.addDetailButton('bar');
    }
 
    // mouse hooks
    mouseover: function (m) {
        // m has id, class, and type properties
        $log.debug('mouseover:', m);
        stds.updateDisplay(m);
    },
    mouseout: function () {
        $log.debug('mouseout');
        stds.updateDisplay();
    },
 
    // intent visualization hook
    showintent: function (info) {
        stds.selectIntent(info);
    }
}

...

• escape: 
  • invoked when the Esc key is pressed
  • the function should return true if the event was "consumed", false otherwise
  • typically the function in the business logic will maintain state as to whether there is anything to "clear" / "reset", and use that to decide whether Esc should be consumed or not
  • Some example code:

    • Code Block
      language js collapse true
      // Sample code in the Business Logic   // "constants" var startDisplay = 'sampleDemoStartDisplay', stopDisplay = 'sampleDemoStopDisplay';   // internal state var active = false;   ...   function startDisplay() { if (!active) { active = true; wss.sendEvent(startDisplay); } }   // returns true if display was stopped; false if already stopped function stopDisplay() { if (!active) { return false; } active = false; wss.sendEvent('stopDisplay'); return true; }

• empty: invoked when the topology node selection changes to "nothing selected"
• single: invoked when the topology node selection changes to "a single node selected" (either a device or a host)
  • the data parameter is the data model for the selected device
• multi: invoked when the topology node selection changes to "more than one node selected" (may be a combination of devices and hosts)
  • the selectOrder parameter is an array of node IDs in the order that they were selected by the user

...

• mouseover: invoked when the mouse hovers over a node (device or host)
  • the m parameter is a small object with the node ID, class and type
• mouseout: invoked when the mouse moves away from a node

• showintent: a special callback invoked if the user selects an intent from the table on the Intent View, and selects this overlay to visualize it
  • the info parameter is a small object containing the identity of the selected intent, (appId, appName, key)
  • the function should pass this parameter to the business logic, which typically sends an event to the server
  • the server-side code locates the appropriate intent, and generates an appropriate "showHighlights" response to send back to the topology view
  • Refer to the traffic overlay for sample code:
    • message handling
    • monitoring of the intent
    • sending data back to the client
    • compiling the highlights object
      
      

...