GraphView

This component is responsible for drawing the Graph, applying data to the Graph, and creates an object called GraphView.

---

Properties

All GraphView properties are stored in an object called GraphView.options

• GraphView.options.zoomLevel
  • Type: Number
  • The zoom level for the graph (1 = 100%, 0.1 = 10%)

• GraphView.options.highlightedIds
  • Type: Array
  • An array containing the highlighted node Ids

• GraphView.options.highlightedEdges
  • Type: Array
  • An array containing the highlighted edge Ids

• GraphView.options.pulseInterval
  • Type: Number
  • The interval variable for pulsing running map and reduce jobs

• GraphView.options.graphSel
  • Type: String
  • Selector for the div containing the graph SVG

• GraphView.options.nodeSel
  • Type: String
  • Selector for all nodes

• GraphView.options.edgeSel
  • Type: String
  • Selector for all edges

• GraphView.options.pageSel
  • Type: String
  • Selector for the page div

• GraphView.options.runningMapSel
  • Type: String
  • Selector for running map jobs

• GraphView.options.runningRedSel
  • Type: String
  • Selector for running reduce jobs

---

Methods

• GraphView.addCommas(nStr)
  • Add commas to numbers.
  • @param {String} nStr The number to add commas to
  • @return {String} Returns the number with commas added

• GraphView.addDataToGraph()
  • Add any additional data to graph SVG.

• GraphView.changeHighlight(ids, mode)
  • Change the highlight of a nodes and/or edges.
  • @param {Array} ids An array of node and/or edge ids to change
  • @param {String} mode Highlight mode (‘on’ or ‘off’)

• GraphView.displayObject(displayObj, targetSel, position)
  • Display the object at the target selection with the specified position at target.
  • @param {Object} displayObj The object to display
  • @param {String} targetSel The target selector for the object to be displayed at
  • @param {String} position The position at target to display (‘top’, ‘bottom’, ‘left’, or ‘right’)

• GraphView.displayRecordCount()
  • Display a record count on edges.
  • @param {String} cls The element class for the edge
  • @param {String} recordCount The record count to display
  • @param {String} counterName If record count is part of a multi-counter, the counter name (optional)

• GraphView.drawGraph(type)
  • Draws the graph.
  • @param {String} type The graph type to draw (‘optimized’ or ‘unoptimized’)

• GraphView.drawRunStats()
  • Draw run stats data on graph.

• GraphView.getPredecessors(ids)
  • Get the node and edge predecssors for a given node and climb up the tree.
  • @param {Array} ids An array of node ids to get the predecssors for

• GraphView.highlightAll()
  • Highlight all nodes and edges in the graph.

• GraphView.highlightPath(id)
  • Highlight the graph path to a node.
  • @param {Number} id The node id to highlight path to

• GraphView.initialize()
  • Initialize the GraphView object.

• GraphView.pulseJobs()
  • Changes background color of cluster for running map and reduce jobs.

• GraphView.startListeners()
  • Start listening to custom events.

• GraphView.unhighlightAll()
  • Unhighlight all nodes and edges in the graph.

• GraphView.zoom(mode)
  • Zooms the view of the graph in 10% (0.1) increments (1.0 = 100% zoom, 0.5 = 50% zoom). Zoom mode ‘reset’, will try to show as much of the graph as possible.
  • @param {String} mode The zoom mode (‘in’, ‘out’, ‘reset’, or number), if mode is a number zoom to that level (1.0 = 100%)

---

Custom Events

Triggers

• clickEdge.tossboss-graph-view
• clickLogicalOperator.tossboss-graph-view
• clickMRJob.tossboss-graph-view
• clickOutsideGraph.tossboss-graph-view
• drawGraph.tossboss-graph-view
• mouseEnterMRJob.tossboss-graph-view
• mouseLeaveMRJob.tossboss-graph-view

Listens

• clickOutsideGraph.tossboss-graph-view
• loadBreakpointCode.tossboss-graph-script
• loadGraphModel.tossboss-graph-model
• loadRunStatsData.tossboss-graph-model
• mouseEnterLogicalOperator.tossboss-graph-view
• mouseEnterMRJob.tossboss-graph-view
• mouseLeaveLogicalOperator.tossboss-graph-view
• mouseLeaveMRJob.tossboss-graph-view