message: Extend highlighting for selected graph element
  When hovering highlight the element's neighborhood but when selected
  highlight the end-to-end paths involving the element.
diff: @@ -89,25 +89,22 @@ export class GraphHighlighter {
  .addClass(DIM_CLASS);
  };
  - // Returns the nodes to highlight depending the selected or hovered summaryType
  - // If current selected is 'graph' (e.g. no selection):
  - // Check if we are hovering on a node or edge and hover those relations
  - // If current selected is something else, highlight that node (group, node or edge)
  + // Returns the nodes to highlight. Highlighting for a hovered element
  + // is limited to its neighborhood. Highlighting for a selected element
  + // is extended to full incoming and outgoing paths.
  getHighlighted() {
  - if (this.selected.summaryType === 'graph') {
  - return this.getHighlightedByEvent(this.hovered);
  - }
  - return this.getHighlightedByEvent(this.selected);
  - }
  -
  - getHighlightedByEvent(event: CytoscapeClickEvent | CytoscapeMouseInEvent | undefined) {
  + const isHover = this.selected.summaryType === 'graph';
  + const event = isHover ? this.hovered : this.selected;
  if (event) {
  - if (event.summaryType === 'node') {
  - return this.getNodeHighlight(event.summaryTarget);
  - } else if (event.summaryType === 'edge') {
  - return this.getEdgeHighlight(event.summaryTarget);
  - } else if (event.summaryType === 'group') {
  - return this.getGroupHighlight(event.summaryTarget);
  + switch (event.summaryType) {
  + case 'node':
  + return this.getNodeHighlight(event.summaryTarget, isHover);
  + case 'edge':
  + return this.getEdgeHighlight(event.summaryTarget, isHover);
  + case 'group':
  + return this.getAppBoxHighlight(event.summaryTarget, isHover);
  + default:
  + // fall through
  }
  }
  return undefined;
  @@ -123,20 +120,36 @@ export class GraphHighlighter {
  }, this.cy.collection());
  }
  - // return the children and children relations, including edges
  - getGroupHighlight(groupBox: any) {
  - return this.includeParentNodes(
  - groupBox.children().reduce((prev, child) => {
  - return prev.add(child.closedNeighborhood());
  - }, this.cy.collection())
  - );
  + getNodeHighlight(node: any, isHover: boolean) {
  + const elems = isHover ? node.closedNeighborhood() : node.predecessors().add(node.successors());
  + return this.includeParentNodes(elems.add(node));
  }
  - getNodeHighlight(node: any) {
  - return this.includeParentNodes(node.closedNeighborhood());
  + getEdgeHighlight(edge: any, isHover: boolean) {
  + let elems;
  + if (isHover) {
  + elems = edge.connectedNodes();
  + } else {
  + const source = edge.source();
  + const target = edge.target();
  + elems = source
  + .add(target)
  + .add(source.predecessors())
  + .add(target.successors());
  + }
  + return this.includeParentNodes(elems.add(edge));
  }
  - getEdgeHighlight(edge: any) {
  - return this.includeParentNodes(edge.connectedNodes().add(edge));
  + getAppBoxHighlight(appBox: any, isHover: boolean) {
  + let elems;
  + if (isHover) {
  + elems = appBox.children().reduce((prev, child) => {
  + return prev.add(child.closedNeighborhood());
  + }, this.cy.collection());
  + } else {
  + const children = appBox.children();
  + elems = children.add(children.predecessors()).add(children.successors());
  + }
  + return this.includeParentNodes(elems);
  }
  }
  