Function addInteraction

tensorboard/plugins/graph/tf_graph_common/node.ts:279–323

* Fire node-* events when the selection is interacted. * * @param disableInteraction When true, have the provided selection * ignore all pointer events. Used for text labels inside of metanodes, which * don't need interaction as their surrounding shape has interaction, and if * given interactio

(
  selection,
  d: render.RenderNodeInfo,
  sceneElement: TfGraphScene,
  disableInteraction?: boolean
)

 * given interaction would cause conflicts with the expand/collapse button.
 */
function addInteraction(
  selection,
  d: render.RenderNodeInfo,
  sceneElement: TfGraphScene,
  disableInteraction?: boolean
) {
  if (disableInteraction) {
    selection.attr('pointer-events', 'none');
    return;
  }
  let contextMenuFunction = contextmenu.getMenu(
    sceneElement,
    getContextMenu(d.node, sceneElement)
  );
  selection
    .on('dblclick', (d) => {
      sceneElement.fire('node-toggle-expand', {name: d.node.name});
    })
    .on('mouseover', (d) => {
      // don't send mouseover over expanded group,
      // otherwise it is causing too much glitches
      if (sceneElement.isNodeExpanded(d)) {
        return;
      }
      sceneElement.fire('node-highlight', {name: d.node.name});
    })
    .on('mouseout', (d) => {
      // don't send mouseover over expanded group,
      // otherwise it is causing too much glitches
      if (sceneElement.isNodeExpanded(d)) {
        return;
      }
      sceneElement.fire('node-unhighlight', {name: d.node.name});
    })
    .on('click', (d) => {
      // Stop this event's propagation so that it isn't also considered
      // a graph-select.
      (<Event>d3.event).stopPropagation();
      sceneElement.fire('node-select', {name: d.node.name});
    })
    .on('contextmenu', (d, i) => {
      sceneElement.fire('node-select', {name: d.node.name});
      contextMenuFunction.call(d, i);
    });
}
/**
 * Returns the d3 context menu specification for the provided node.
 */