HistogramSet UI Architecture

Documentation for users of this UI is in metrics-results-ui.

This document outlines the MVC architecture of the implementation of the UI.

  • Model: HistogramSetViewState
    • searchQuery: regex filters Histogram names
    • referenceDisplayLabel selects the reference column in the table
    • showAll: when false, only sourceHistograms are shown in the table
    • groupings: array of HistogramGroupings configures how the hierarchy is constructed
    • sortColumnIndex
    • sortDescending
    • constrainNameColumn: whether the Name column in the table is constrained to 300px
    • tableRowStates: Map from row name to HistogramSetTableRowState
      • subRows: Map from row name to HistogramSetTableRowState
      • isExpanded: whether the row is expanded to show its subRows
      • isOverviewed: whether the overview charts are displayed
      • cells: map from column names to HistogramSetTableCellState:
        • isOpen: whether the cell's histogram-span is open and displaying the BarChart and Diagnostics
        • brushedBinRange: which bins are brushed in the BarChart
        • mergeSampleDiagnostics: whether sample diagnostics are merged
    • Setters delegate to the main entry point, update(delta), which dispatches an update event to listeners
  • View-Controllers:
    • histogram-set-view:
      • Main entry point: build(HistogramSet, progressIndicator):Promise
      • Displays “zero Histograms”
      • Listens for download-csv event from histogram-set-controls
      • Collects possible configurations of the HistogramSet and passes them to the child elements directly (not through the HistogramSetViewState!):
        • Possible groupings
        • displayLabels
        • baseStatisticNames
      • Contains child elements:
    • The HistogramSetLocation synchronizes the HistogramSetViewState with the URL using the HTML5 history API.