UI Components (JavaScript)

Lipstick uses a set of JavaScript libraries and UI frameworks including:

• jQuery
• Lo-Dash
• Transit
• D3.js
• CodeMirror
• Bootstrap
• Fuel UX
• RequireJS
• Moment.js
• Backbone.js

The major JavaScript components written for Lipstick are:

• Main
• GraphModel
• GraphView
• Drawer
• Script
• History

Custom Events

• clickEdge.tossboss-graph-view
  • Triggered when an edge on the graph is clicked
  • extraParameters:
    • startNodeId (edge’s start node’s id)
    • endNodeId (edge’s end node’s id)
    • startScopeId (edge’s start node’s scopeId)
    • endScopeId (edge’s end node’s scopeId)

• clickLogicalOperator.tossboss-graph-view
  • Triggered when a node (logical operator) on the graph is clicked
  • extraParameters:
    • nodeId (node’s id)

• clickMRJob.tossboss-graph-view
  • Triggered when a cluster (map-reduce job) on the graph is clicked
  • extraParameters:
    • scopeId (map-reduce job’s scopeId)

• clickOutsideGraph.tossboss-graph-view
  • Triggered when a mouse click is registered outside the graph

• closeDrawer.tossboss-drawer
  • Triggered when a drawer is closed
  • extraParameters:
    • drawer (drawer that was closed (‘top-drawer’, ‘right-drawer’, ‘left-drawer’, or ‘bottom-drawer’))

• drawGraph.tossboss-graph-view
  • Triggered when a graph is drawn
  • extraParameters:
    • type (graph type drawn (‘optimized’ or ‘unoptimized’))

• highlightCodeLine.tossboss-graph-script
  • Triggered when a line in the script is highlighted
  • extraParameters:
    • lineNumber (line number highlighted)

• loadBreakpointCode.tossboss-graph-script
  • Triggered when breakpoint code has been created
  • extraParameters:
    • nodeId (nodeId that breakpoint code will execute to)

• loadGraphModel.tossboss-graph-model
  • Triggered when graph data has been retrieved from the server

• loadRunStatsData.tossboss-graph-model
  • Triggered when run stats data has been retrieved from the server

• loadSampleOutputData.tossboss-graph-model
  • Triggered when sample output data has been retrieved from the server

• mouseEnterMRJob.tossboss-graph-view
  • Triggered when mouse enters a cluster (map-reduce job)
  • extraParameters:
    • scopeId (map-reduce job’s scopeId)

• mouseLeaveMRJob.tossboss-graph-view
  • Triggered when mouse leaves a cluster (map-reduce job)

• openDrawer.tossboss-drawer
  • Triggered when a drawer is opened
  • extraParameters:
    • drawer (drawer that was opened (‘top-drawer’, ‘right-drawer’, ‘left-drawer’, or ‘bottom-drawer’))