<!--
The chart-container element represents one chart and all related functionality,
including a legend listing different traces that can be plotted on the same
chart, a revision range selecting mini-chart at the bottom, and all of the alert
triaging functionality in the chart.
-->
<link rel="import" href="../../third_party/polymer/components/core-collapse/core-collapse.html">
<link rel="import" href="../../third_party/polymer/components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="chart-legend.html">
<link rel="import" href="chart-slider.html">
<link rel="import" href="chart-tooltip.html">

<polymer-element name="chart-container"
                 attributes="showCloseGraphButton chartTitle graphParams graphUncheckedParams
                             revisionInfo coreTraces selectedTraces indicesToGraph xsrfToken
                             warning alertKey showCompact collapseLegend">
  <template>
    <style>
    #container {
      width: 100%;
      display: flex;
      display: -webkit-flex;
      flex-direction: column;
      -webkit-flex-direction: column;
      align-items: center;
      -webkit-align-items: center;
      position: relative;
      min-width: 845px;  /* Minimum width of plot plus width of chart-legend. */
    }

    #container[compact] {
      min-width: 670px;  /* Minimum width of plot plus width of compacted chart-legend. */
    }

    #horizontal {
      display: flex;
      display: -webkit-flex;
      width: 100%;
      position: relative;
    }

    #chart-yaxis-label {
      transform: rotate(-90deg) translate(-50%);
      -webkit-transform: rotate(-90deg) translate(-50%);
      transform-origin: 0 0;
      -webkit-transform-origin: 0 0;
      top: 50%;
      position: absolute;
      padding-top: 5px;
      background-color: white;
      z-index: 1000;
    }

    #plots-container {
      -webkit-flex-grow: 1;
      flex-grow: 1;
      display: -webkit-flex;
      flex-direction: column;
      -webkit-flex-direction: column;
    }

    #plot {
      -webkit-flex-grow: 1;
      flex-grow: 1;
      min-height: 240px;
      min-width: 500px;
    }

    #slider {
      width: 100%;
      height: 60px;
    }

    #warning {
      position: absolute;
      left: 80px;
      top: 15px;
      z-index: 2000;
      font-size: 16px;
      font-weight: bold;
      color: #dd4b39;
    }

    #original {
      position: absolute;
      top: 10px;
      margin-left: -15px;
    }

    #rhs {
      margin-bottom: 20px;
      margin-top: 8px;
      margin-left: 5px;
      margin-right: 10px;
      padding: 16px;
      box-shadow: 0 4px 16px rgba(0,0,0,0.2);
      outline: 1px solid rgba(0,0,0,0.2);
      font-size: 11px;
      height: 246px;
      width: 312px;
      overflow: auto;
    }

    #rhs[compact] {
      width: 125px;
    }

    #rhs[collapse-legend] {
      margin-top: 8px;
      height: 25px;
      width: 25px;
      padding: 0;
    }

    #expand-legend-btn {
      position: absolute;
      right: 2px;
      top: 1px;
      opacity: .75;
    }

    #delta-off, #delta-drag {
      margin-bottom: 10px;
    }

    #traces {
      margin-bottom: 10px;
    }

    .trace-link {
      text-decoration: none;
    }

    .trace-selected {
      text-decoration: underline;
    }

    #loading-div {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: white;
      display: flex;
      display: -webkit-flex;
      align-items: center;
      -webkit-align-items: center;
      justify-content: center;
      -webkit-justify-content: center;
    }

    #anomaly-container {
      width: 0px;
      height: 0px;
      left: 0px;
      top: 0px;
      position: relative;
    }

    .anomaly {
      position: absolute;
      margin-top: -5px;
      margin-left: -1px;
      z-index: 1000;
    }

    .anomaly.highlighted {
      border: 3px solid #FFBA02;
      border-radius: 12px;
    }

    #tooltip {
      position: absolute;
      z-index: 2000;
    }

    #close-graph {
      position: absolute;
      right: 10px;
      top: 10px;
      opacity: 0;
    }

    #container:hover #close-graph {
      opacity: .75;
    }

    #container #close-graph:hover {
      opacity: 1;
      cursor: pointer;
    }
    </style>
    <div id="container" on-mouseleave="{{onMouseLeave}}" compact?="{{showCompact}}">
      <h3 id="chart-title">{{chartTitle}}</h3>
      <img src="/closebox_large.png"
           hidden?="{{!showCloseGraphButton}}"
           id="close-graph"
           on-click="{{closeGraphClicked}}">
      <div id="horizontal">
        <div id="chart-yaxis-container">
          <div id="chart-yaxis-label">{{chartYAxisLabel}}</div>
        </div>
        <div id="anomaly-container"></div>
        <chart-tooltip id="tooltip"
                       xsrfToken="{{xsrfToken}}"
                       hidden></chart-tooltip>
        <div id="plots-container">
          <div id="plot"></div>
          <chart-slider id="slider" on-revisionrange="{{onRevisionRange}}"></chart-slider>
        </div>
        <span hidden?="{{!warning}}" id="warning">{{warning}}</span>
        <a hidden id="original"
           on-click="{{onViewOriginal}}"
           href="javascript:void(0);">View original graph</a>

        <div id="rhs" compact?="{{showCompact}}" collapse-legend?="{{collapseLegend}}">
          <paper-icon-button id="expand-legend-btn" icon="arrow-drop-down" title="legend" role="button"
                             aria-label="menu" on-click="{{toggleLegend}}"></paper-icon-button>
          <core-collapse id="collapsible-legend" opened?="{{!collapseLegend}}">
            <div id="delta-off">Click and drag graph to measure or zoom.</div>
            <div id="delta-drag" hidden>
              Delta: {{deltaAbsolute}} or {{deltaPercent}}%.<br>
              Click selected range to zoom.
            </div>
            <div id="traces">Traces:
              <a href="javascript:void(0);"
                 class="trace-link"
                 on-click="{{onSelectAll}}">select all</a>
              &#124;
              <a href="javascript:void(0);"
                 class="trace-link"
                 on-click="{{onDeselectAll}}">deselect all</a>
              &#124;
              <a href="javascript:void(0);"
                 class="trace-link"
                 on-click="{{onSelectCore}}">core only</a>
            </div>
            <chart-legend tests={{legendTests}}
                          indicesToGraph={{indicesToGraph}}
                          coreEndIndex={{coreEndIndex}}
                          disableUnselected={{loadingUnselected}}>
          </core-collapse>
        </div>
      </div>
      <div id="loading-div">
        <img src="//www.google.com/images/loading.gif">
      </div>
    </div>
  </template>
  <script>
    (function() {

      // Minimum multiple standard deviation for a value to be considered
      // an outlier.
      var MULTIPLE_OF_STD_DEV = 5;

      /**
       * Gets the mean for list of numbers.
       *
       * @return {number} A number.
       */
      function calculateMean(values) {
        var len = values.length;
        var sum = values.reduce(function(v1, v2) { return v1 + v2;}, 0);
        return sum / len;
        var squaredDevianceSum = values.reduce(
            function(v1, v2) {return v1 + Math.pow(v2 - mean, 2);}, 0);
        var variance = squaredDevianceSum / len;
        var std = Math.sqrt(variance);
        return {mean: mean, std: std};
      }

      /**
       * Gets standard deviation for list of numbers and a mean.
       *
       * @return {number} A number.
       */
      function calculateStdDev(values, mean) {
        var squaredDevianceSum = values.reduce(
            function(v1, v2) {return v1 + Math.pow(v2 - mean, 2);}, 0);
        var variance = squaredDevianceSum / values.length;
        return Math.sqrt(variance);
      }

      /**
       * Finds outliers in a series, along with their directions.
       *
       * An outlier is defined as a value that deviates from the mean by over
       * MULTIPLE_OF_STD_DEV times the standard deviation. An outlier direction
       * is either 1 for positive, -1 for negative and 0 for non-outlier.
       *
       * Example:
       * Input values: [50, 50, 50, 100, 50, 10, 50, 50, 50]
       * Output directions: [0, 0, 0, 1, 0, -1, 0, 0, 0]
       *
       * @param {Array.<number>} values List of numbers.
       * @return {Array.<number>} List of outlier directions.
       */
      function getOutlierDirections(values) {
        var mean = calculateMean(values);
        var stddev = calculateStdDev(values, mean);
        var outlierDirections = [];
        for (var i = 0; i < values.length; i++) {
          var direction = 0;
          var value = values[i];
          var multDevFromMean = Math.abs(value - mean) / stddev;
          if (multDevFromMean > MULTIPLE_OF_STD_DEV) {
            if (value >= mean) {
              direction = 1;
            }
            direction = -1;
          }
          outlierDirections.push(direction);
        }
        return outlierDirections;
      }

      /**
       * Returns a date corresponding to the given timestamp, or null.
       * @param {string} rev A string that may contain a timestamp.
       * @return {(Date|null)} A date object if a timestamp was given, or
       *     null.
       */
      function getDateDisplay(rev) {
        var timestampSecondsRegex = /^[\d]{10}$/;
        var timestampMillisecondsRegex = /^[\d]{13}$/;
        var d = null;
        if (timestampSecondsRegex.test(rev)) {
          d = new Date(rev * 1000);
        } else if (timestampMillisecondsRegex.test(rev)) {
          d = new Date(rev);
        }
        if (d) {
          return d.toISOString();
        }
        return null;
      };

      /**
       * Returns a string to display, given a string that contains a
       * revision. This will be different depending on whether the given
       * revision is a git hash, a timestamp, or other.
       * Note: this is similar to the getDisplayRevision function for the
       * embed page (defined in static/embed.js)
       * @param {string|boolean} rev A string containing a "revision".
       *     False may also be passed, in which case it doesn't matter what
       * @return {string} A string to display for the given revision.
       */
      function getDisplayRevision(rev) {
        // Truncate git sha1 to 7 chars.
        var gitRegex = /^[a-f0-9]{40}$/;
        if (gitRegex.test(rev)) {
          return rev.substring(0, 7);
        }
        var d = getDateDisplay(rev);
        if (d) {
          return d;
        }
        return rev;
      };

      /**
       * Formats numbers in a human-readable way.
       * @param {(number|string)} val
       * @return {string}
       */
      function formatNumber(val) {
        // Truncate to at most 3 decimal points. Don't use toFixed() because
        // we don't want to add precision if it's not there.
        val = Math.round(val * 1000) / 1000;
        return val.toLocaleString()
      };

      Polymer('chart-container', {
        // The data fetched from the graph_json handler for this chart.
        /** @type {(Object|null)} */
        json: null,

        // The data from graph_json for unselected series.
        unselectedJson: null,

        // The colors of the series lines, used in the chart options.
        // Colors should be updated both here and in the chart-legend CSS.
        lineColors: [
          '#4d90fe', '#ffe83b', '#8e4efe', '#ffb83b', '#194fa5',
          '#a69413', '#4c19a5', '#a67113', '#9dc3ff', '#fff293',
          '#c19dff', '#ffd893', '#5b81bf', '#bfb251', '#805bbf',
          '#bf9751', '#79adff', '#ffee6c', '#aa7aff', '#ffca6c',
          '#3415b0', '#04819e', '#b40097', '#ffcf00', '#1c0772',
          '#38b2ce', '#750062', '#a68700', '#846fd7', '#60b9ce',
          '#d962c7', '#ffe573', '#3e2d84', '#206676', '#872277',
          '#bfa430', '#6549d7', '#015367', '#d936c0', '#ffdb40'
        ],

        /**
         * Initializes the chart-container element and all of its properties.
         *
         * This is a custom element lifecycle callback that's called when an
         * instance of the element is ready.
         * http://www.polymer-project.org/polymer.html#lifecyclemethods
         *
         * We use 'ready' instead of 'created' to know when the element has its
         * bindings, Shadow DOM has been created, and its on-* handlers and
         * property observers have been set up.
         * See https://github.com/Polymer/polymer/releases/tag/v0.0.20131025
         */
        ready: function() {
          // Data series index of the point that was most recently clicked.
          this.currentItem = null;

          // The data fetched from the graph_json handler for this chart,
          // for selected and non-selected series.
          this.json = null;
          this.unselectedJson = null;

          // Whether or not the non-selected traces are currently being loaded.
          this.loadingUnselected = false;

          // Meta-data about tests, which will be displayed in the legend.
          this.legendTests = [];

          // List of indices of series which are selected and will be plotted.
          this.indicesToGraph = [];

          // See updateIndiciesToGraph and indicesToGraphChanged.
          this.sendCheckedEvent = true;

          // Text to display above this chart and next to the y-axis.
          this.chartTitle = '';
          this.chartYAxisLabel = '';

          // Y-axis delta of current zoom selection, as an absolute number
          // and as a percentage of the original selection.
          this.deltaAbsolute = 0;
          this.deltaPercent = 0;

          // Information about the last selection range.
          this.lastSelectedDelta = null;

          // Whether or not the user is currently selecting a range.
          this.selecting = false;

          // Y-axis start value in the last selection range.
          this.firstSelectedValue = 0;

          // Whether or not the tooltip is "sticky". Sticky means that it will
          // stay visible when the user is no longer hovering over the point.
          this.stickyTooltip = false;

          // Map of series indexes to arrays with revision information.
          this.revisionMap = null;

          // Warning text to be shown over the chart, if any.
          this.warning = null;

          // Whether or not the chart can currently be drawn.
          this.drawable = true;

          // The Flot Plot object, returned by $.plot.
          this.chart = null;

          // Handler for the 'resize' event.
          this.resizeHandler = this.onResize.bind(this);

          // Timeout ID of the timer used by this.resizeHandler.
          this.resizeTimer = null;

          // Chart options to be given when initializing the Flot chart.
          // See: https://github.com/flot/flot/blob/master/API.md#plot-options
          this.chartOptions = {
            grid: {
              hoverable: true,
              clickable: true,
              borderWidth: 1,
              borderColor: 'rgba(0, 0, 0, 0.5)'
            },
            crosshair: {
              mode: 'xy',
              color: 'rgba(34, 34, 34, 0.3)',
              lineWidth: 0.3
            },
            xaxis: {
              tickFormatter: this.formatXAxis.bind(this)
            },
            yaxis: {
              labelWidth: 60,
              tickFormatter: this.formatYAxis.bind(this)
            },
            selection: {
              mode: 'y'
            },
            colors: this.lineColors
          };

          this.$.tooltip.addEventListener(
              'triaged', this.onBugTriaged.bind(this), true);
          this.$.tooltip.addEventListener(
              'alertChangedRevisions', this.onAlertChangedRevisions.bind(this),
              true);

          window.addEventListener('resize', this.resizeHandler);
          if (this.graphParams && Object.keys(this.graphParams).length) {
            this.graphParamsChanged();
          }
          if (this.graphUncheckedParams && Object.keys(this.graphUncheckedParams).length) {
            this.graphUncheckedParamsChanged();
          }

          this.initializePlotEventListeners();
        },

        /**
         * Binds event handlers for events that are fired by flot.
         */
        initializePlotEventListeners: function() {
          var plot = $(this.$.plot);
          plot.bind('plotselected', this.onPlotSelected.bind(this));
          plot.bind('plotselecting', this.onPlotSelecting.bind(this));
          plot.bind('plotunselected', this.onPlotUnselected.bind(this));
          plot.bind('plotclick', this.onPlotClick.bind(this));
          plot.bind('plothover', this.onPlotHover.bind(this));
        },

        /**
         * A custom element lifecycle callback, called when an instance of the
         * element is removed from the DOM.
         * See: http://www.polymer-project.org/polymer.html#lifecyclemethods
         */
        leftView: function() {
          this.drawable = false;
          window.removeEventListener('resize', this.resizeHandler);
        },

        /**
         * Handler for the click event of X button on the top-right corner.
         */
        closeGraphClicked: function() {
           this.parentNode.removeChild(this);
           this.fire('closeGraph')
        },

        /**
         * Handler for 'revisionrange' event, fired when revision range
         * changes.
         *
         * This event is fired by the chart-slider element. When this
         * event is fired, it indicates that a new start and end revision have
         * been selected.
         * Note: The properties 'graphParams' and 'graphUncheckedParams' are
         * both set in graph.js.
         *
         * @param {Event} event The revisionrange event.
         * @param {Object} detail The detail object given when firing the
         *     event. This is set in graph.js and it contains 'startrev' and
         *     'endrev'.
         * @param {Object} sender
         */
        onRevisionRange: function(event, detail, sender) {
          newGraphParams = deepCopy(this.graphParams);
          newUncheckedParams = deepCopy(this.graphUncheckedParams);
          delete newGraphParams['rev'];
          delete newUncheckedParams['rev'];
          delete newGraphParams['num_points'];
          delete newUncheckedParams['num_points'];
          newGraphParams['start_rev'] = detail.startrev;
          newUncheckedParams['start_rev'] = detail.startrev;
          newGraphParams['end_rev'] = detail.endrev;
          newUncheckedParams['end_rev'] = detail.endrev;
          this.graphParams = newGraphParams;
          this.graphUncheckedParams = newUncheckedParams;
        },

        /**
         * Updates the chart based on the graphParams property.
         *
         * This method is called when the graphParams property changes;
         * It's also called directly when the chart is first initialized.
         * The graphParams property should be set by the page that created
         * this chart-container element.
         */
        graphParamsChanged: function() {
          console.debug('graphParamsChanged', this);
          if (!this.graphParams || !Object.keys(this.graphParams).length) {
            return;
          }
          this.hideTooltipEvenIfSticky();
          this.$['anomaly-container'].innerHTML = '';
          this.$['loading-div'].style.display = '';
          this.json = null;
          this.indicesToGraph = [];
          var firstTestTestPath = this.graphParams.masters[0] + '/' +
                                  this.graphParams.bots[0] + '/' +
                                  this.graphParams.tests[0];
          this.$.slider.testpath = firstTestTestPath;

          // Make a request to /graph_json for the new set of checked graphs.
          var postdata =
              'graphs=' + encodeURIComponent(JSON.stringify(this.graphParams));
          var req = new XMLHttpRequest();
          var self = this;
          req.onload = function() {
            self.json = JSON.parse(req.responseText);
            if (self.unselectedJson) {
              self.mergeJson();
            }
            self.updateForNewJson();
          };
          req.open('post', '/graph_json', true);
          req.setRequestHeader('Content-type',
                               'application/x-www-form-urlencoded');
          req.send(postdata);
        },

        /**
         * This is called when the property 'graphUncheckedParams' changes.
         * Note: The property 'graphUncheckedParams' is set in graph.js.
         */
        graphUncheckedParamsChanged: function() {
          if (!this.graphUncheckedParams ||
              !Object.keys(this.graphUncheckedParams).length) {
            return;
          }
          this.unselectedJson = null;
          this.loadingUnselected = true;

          // Make a request to /graph_json for the new set of unchecked graphs.
          var postdata = 'graphs=' +
              encodeURIComponent(JSON.stringify(this.graphUncheckedParams));
          var req = new XMLHttpRequest();
          var self = this;
          req.onload = function() {
            self.unselectedJson = JSON.parse(req.responseText);
            self.loadingUnselected = false;
            if (self.json) {
              self.mergeJson();
            }
          };
          req.open('post', '/graph_json', true);
          req.setRequestHeader('Content-type',
                               'application/x-www-form-urlencoded');
          req.send(postdata);
        },

        /**
         * Updates the contents of this.json with the contents of
         * this.unselectedJson.
         */
        mergeJson: function() {
          if (this.json.warning && !this.unselectedJson.warning) {
            // Some data is stale/non-existent in the checked traces, but not
            // in unchecked.
            this.json.warning = null;
            this.warning = null;
          }
          for (var series = 0; series < this.json.data.length; series++) {
            if (this.json.data[series].data.length == 0) {
              // The main json was empty for this index;
              // copy it from unselected.
              this.json.data[series].data =
                  this.unselectedJson.data[series].data;
              this.json.annotations[series] =
                  this.unselectedJson.annotations[series];
              this.json['error_bars'][series] =
                  this.unselectedJson['error_bars'][series];
            }
          }
          this.updateSmartAutoscaleMap();
        },

        /**
         * Updates the chart when new data has been received from /graph_json.
         * Note: Properties 'coreTraces' and 'selectedTraces' are set in
         * graph.js.
         */
        updateForNewJson: function() {
          console.debug('updateForNewJson', this);
          if (!this.drawable) {
            return;
          }

          this.warning = this.json.warning;
          var tests = [];
          var series = this.json.annotations.series;

          if (series.length == 0) {
            this.$['loading-div'].style.display = 'none';
            return;
          }

          this.coreEndIndex = -1;
          for (var i = 0; i < series.length; i++) {
            if (this.coreTraces[series[i].name]) {
              this.coreEndIndex = i;
            }
            tests.push({
              name: series[i].name,
              path: series[i].path,
              direction: series[i].better,
              units: series[i].units,
              description: series[i].description,
              testColorClass: 'line-color-' + i,
              index: i,
              selected: true
            });
            if (this.selectedTraces[series[i].name]) {
              this.indicesToGraph.push(i);
            }
            // Flot's getData() method can return the data series out of order,
            // so maintain an index so that we can get back to the original
            // data series on click and hover events.
            this.json.data[i].index = i;
          }
          this.legendTests = tests;
          this.updateYAxisLabel();
          this.updateSmartAutoscaleMap();
          this.updateChart();
          this.$['loading-div'].style.display = 'none';
        },

        /**
         * Sets the Y-axis label based on the units of the data.
         */
        updateYAxisLabel: function() {
          // If the series annotations are properly populated, then there will
          // be at least one entry and it will have the properties 'units' and
          // 'better'. All traces in one chart should have the same units.
          var series = this.json.annotations.series;

          if (series[0].units) {
            this.chartYAxisLabel = series[0].units;
            // Some unit names have improvement direction information in them.
            if (series[0].units.indexOf('is better') == -1 &&
                series[0].better) {
              this.chartYAxisLabel += ' (' + series[0].better.toLowerCase();
              this.chartYAxisLabel += ' is better)';
            }
          }
        },

        /**
         *  Updates the map of series index to the adjusted scale.
         *
         *  This map is used to update y-axis scale base on selected traces.
         */
        updateSmartAutoscaleMap: function() {
          this.yAxisScaleMap = {};
          var numSeries = this.json.data.length;
          for (var seriesIndex = 0; seriesIndex < numSeries; seriesIndex++) {
            var data = this.json.data[seriesIndex].data;
            var values = [];
            for (var dataIndex = 0; dataIndex < data.length; dataIndex++) {
              values.push(data[dataIndex][1]);
            }
            if (values.length > 0) {
              var scale = this.determineMinMax(seriesIndex, values);
              this.yAxisScaleMap[seriesIndex] = scale;
            }
          }
        },

        /**
         * Determines a min and a max from a list of numbers without outliers.
         *
         * @param {number} seriesIndex Index into the data series list
         *     (this.json.data).
         * @param {Array.<number>} values List of series data values.
         * @return {Object} An object containing min and max number.
         */
        determineMinMax: function(seriesIndex, values) {
          values = values.filter(function(v) {
            return v != null;
          });
          var outlierDirections = getOutlierDirections(values);

          // Exclude value that is a stand-alone spike which has either
          // outlier direction 1 or -1 in between zeroes. Also include
          // points that has an Anomaly.
          var resultValues = [];
          for (var i = 0; i < outlierDirections.length; i++) {
            var direction = outlierDirections[i];
            if (direction == 0 || this.hasAnomaly(seriesIndex, i)) {
              resultValues.push(values[i]);
            } else if (i > 0 && i < outlierDirections.length - 1) {
              if (direction == outlierDirections[i-1] ||
                  direction == outlierDirections[i+1]) {
                resultValues.push(values[i]);
              }
            }
          }
          return {'min': Math.min.apply(Math, resultValues),
                  'max': Math.max.apply(Math, resultValues)};
        },

        /**
         * Checks whether a series at a point has an anomaly.
         */
        hasAnomaly: function(seriesIndex, dataIndex) {
          var annotations = this.json.annotations;
          if (!annotations[seriesIndex] ||
              !annotations[seriesIndex][dataIndex] ||
              !annotations[seriesIndex][dataIndex]['g_anomaly']) {
            return false;
          }
          return true;
        },

        /**
         * Sets scale for chart's y-axis for graphs in indicesToGraph.
         * This function sets values in this.chartOptions based on the
         * contents of this.yAxisScaleMap.
         */
        setSmartAutoscale: function() {
          if (!this.indicesToGraph.length || this.indicesToGraph.length <= 0 ||
              !this.yAxisScaleMap) {
            return;
          }

          // Get the min/max of the min/max of all graphs in indicesToGraph.
          var firstIndex = this.indicesToGraph[0];
          if (!(firstIndex in this.yAxisScaleMap)) {
            return;
          }
          var min = this.yAxisScaleMap[firstIndex].min;
          var max = this.yAxisScaleMap[firstIndex].max;
          for (var i = 0; i < this.indicesToGraph.length; i++) {
            var scale = this.yAxisScaleMap[this.indicesToGraph[i]];
            if (scale && scale.min < min) {
              min = scale.min;
            }
            if (scale && scale.max > max) {
              max = scale.max;
            }
          }
          this.chartOptions.yaxis.min = min;
          this.chartOptions.yaxis.max = max;
          this.addAxisMargin(this.chartOptions.yaxis);
        },

        /**
         * Adds margins to axis so lines don't touch the chart's borders.
         * Same as how flot does it.
         *
         * @param {Object} axis An object containing min and max number.
         */
        addAxisMargin: function(axis) {
          var margin = 0.2; // Flot's default for autoscaleMargin.
          var min = axis.min, max = axis.max;
          var delta = max - min;
          if (delta == 0.0) {
            min -= axis.min == 0 ? 1 : margin;
            max += axis.max == 0 ? 1 : margin;
          } else {
            min -= delta * margin;
            if (min < 0 && axis.min >= 0)
              min = 0;
            max += delta * margin;
            if (max > 0 && axis.max <= 0)
              max = 0;
          }
          axis.min = min;
          axis.max = max;
        },

        /**
         * Updates the list of indices of traces to plot without firing an
         * event. Note: This method is called in graph.js.
         * @param {Array.<number>} indices List of indices of traces.
         */
        updateIndicesToGraph: function(indices) {
          // Update this.indicesToGraph without causing a
          // 'checkedTracesChanged' event to be fired.
          this.sendCheckedEvent = false;
          this.indicesToGraph = indices;
          this.updateChart();
        },

        /**
         * This method is called when the property 'indicesToGraph' changes.
         * @param {(Array.<number>|null)} oldValue Old value of indicesToGraph.
         */
        indicesToGraphChanged: function(oldValue) {
          if (!oldValue || !this.json) {
            // Just initializing.
            return;
          }
          this.updateChart();
          this.updateChartTitle();
          var tests = [];
          var series = this.json.annotations.series;
          for (var i = 0; i < this.indicesToGraph.length; i++) {
            if (series[this.indicesToGraph[i]]) {
              tests.push(series[this.indicesToGraph[i]].name);
            }
          }

          // If indicesToGraph was changed in some way other than through the
          // updateIndicesToGraph method, fire a checkedTracesChanged event.
          // Note: The 'checkedTracesChanged' event is listened for and handled
          // in graph.js.
          if (this.sendCheckedEvent) {
            this.fire('checkedTracesChanged', {
              'indices': this.indicesToGraph,
              'tests': tests
            });
          }
          this.sendCheckedEvent = true;
        },

        /**
         * Sets the title of the chart based on the current state of the chart.
         */
        updateChartTitle: function() {
          this.chartTitle = makeChartTitle(
              this.getTestPaths(),
              this.getSelectedTestPaths());
        },

        getTestPaths: function() {
          var testPaths = [];
          var series = this.json.annotations.series;
          for (var i = 0; i < series.length; i++) {
            testPaths.push(series[i].path);
          }
          return testPaths;
        },

        getSelectedTestPaths: function() {
          var testPaths = [];
          var series = this.json.annotations.series;
          for (var i = 0; i < this.indicesToGraph.length; i++) {
            var selectedIndex = this.indicesToGraph[i];
            if (series[selectedIndex]) {
              testPaths.push(series[selectedIndex].path);
            }
          }
          return testPaths;
        },

        /**
         * This method is called when the property 'warning' changes.
         * If there's a warning, we want to update the background color of the
         * chart.
         */
        warningChanged: function() {
          if (this.warning) {
            this.chartOptions.grid.backgroundColor = '#e6e6e6';
          } else {
            this.chartOptions.grid.backgroundColor = null;
          }
          if (this.chart) {
            this.chart.getOptions().grid.backgroundColor =
                this.chartOptions.grid.backgroundColor;
            this.chart.setupGrid();
            this.chart.draw();
          }
        },

        /**
         * Updates the currently displayed chart.
         */
        updateChart: function() {
          if (!this.drawable) {
            return;
          }

          var data = this.getDataForFlot();
          if (data.length == 0) {
            this.chart = $.plot(this.$.plot, data, this.chartOptions);
            return;
          }

          var startRev = uri.getParameter('start_rev')
          var endRev = uri.getParameter('end_rev');
          var firstSeriesIsEmpty = data[0].data.length == 0;
          if (startRev && endRev && firstSeriesIsEmpty) {
            this.warning = 'Data not available for revision range ' +
                           startRev + ':' + endRev + '.';
          }

          var isNotZoomedIn = this.$.original.hidden;
          if (isNotZoomedIn) {
            this.setSmartAutoscale();
          }

          this.createFixedXAxis(data);
          this.chart = $.plot(this.$.plot, data, this.chartOptions);
          this.showAlerts();
        },

        /**
         * Puts together the array of series to pass to Flot's $.plot function.
         * The data to plot is based on this.json and this.indicesToGraph.
         * @return {Array.<Object>} Data to plot. This could be an empty array.
         */
        getDataForFlot: function() {
          if (!this.json) {
            console.debug('getDataForFlot: this.json not set.');
            return [];
          }
          if (!this.json['data'] || !this.json['error_bars']) {
            console.debug('getDataForFlot: data or error bars not set.');
            return [];
          }

          var data = [];
          for (var i = 0; i < this.indicesToGraph.length; i++) {
            var index = this.indicesToGraph[i];
            if (index >= 0 && this.json.data[index]) {
              data.push(deepCopy(this.json.data[index]));
            } else {
              console.debug('getDataForFlot: indicesToGraph: ',
                            this.indicesToGraph);
              return [];
            }
          }

          // Add in error bars after data.
          for (var i = 0; i < this.indicesToGraph.length; i++) {
            var index = this.indicesToGraph[i];
            if (index >= 0 && this.json['error_bars'][index]) {
              data.push(deepCopy(this.json['error_bars'][index][0]));
              data.push(deepCopy(this.json['error_bars'][index][1]));
            } else {
              console.debug('getDataForFlot: indicesToGraph: ',
                            this.indicesToGraph);
              return [];
            }
          }
          return data;
        },

        /**
         * Modifies the given series data so that the X-values are indexes
         * instead of revision numbers. This is called before plotting.
         *
         * We want a fixed x-axis, with points evenly spaced. Flot has
         * functions to scale the x-axis, but they break vertical zooming.
         * So we plot a copy of the JSON we get from the server, with the
         * revisions reordered starting from 0 and incrementing once for each
         * rev.
         *
         * We start by getting a list of all the revisions, and ordering them
         * from 0-N. Because there can be gaps in the graphs, we want to look
         * at all the charts, even ones that are not plotted, so that the gaps
         * are accounted for accurately.
         *
         * TODO(qyearsley): This function has at least two separate
         * responsibilities: constructing this.revisionMap and actually
         * changing the X-values. These could be separated out.
         *
         * @param {Array.<Object>} data
         */
        createFixedXAxis: function(data) {
          // Make a map of all revisions for all data series to a series index
          // and data index.
          var allRevisions = {};
          if (!this.json || !this.json.data) {
            console.debug('createFixedXAxis: !this.json or !this.json.data.');
            return;
          }
          for (var jsonSeriesIndex = 0;
               jsonSeriesIndex < this.json.data.length;
               jsonSeriesIndex++) {
            var series = this.json.data[jsonSeriesIndex];
            var numPoints = series.data.length;
            for (var dataIndex = 0; dataIndex < numPoints; dataIndex++) {
              var revision = series.data[dataIndex][0];
              allRevisions[revision] = [series.index, dataIndex];
            }
          }

          // Make an ordered list of all revision numbers for any series.
          var orderedRevisions = Object.keys(allRevisions).sort(function(a, b) {
            return a - b;
          });
          if (orderedRevisions.length == 0) {
            // If there's no data to plot, then this array will be empty.
            return;
          }
          this.$.slider.startrev = orderedRevisions[0];
          this.$.slider.endrev = orderedRevisions[orderedRevisions.length - 1];

          // We keep a map of the ordered revision index to the [revision,
          // series index, data index] so that it's easy to show the right
          // label on the X-axis. This is updated here but used in formatXAxis.
          this.revisionMap = {};

          // We also want to make a reverse-lookup object which maps values in
          // in |orderedRevisions| to their indexes. This will be used below.
          var revisionToIndexMap = {};

          for (var i = 0; i < orderedRevisions.length; i++) {
            var rev = orderedRevisions[i];
            this.revisionMap[i] =
                [rev, allRevisions[rev][0], allRevisions[rev][1]];
            revisionToIndexMap[rev] = i;
          }

          // Now that we have all the data we need cached, update the revisions
          // for each of the data points that will be shown on the graph.
          for (var seriesIndex = 0; seriesIndex < data.length; seriesIndex++) {
            var series = data[seriesIndex];
            var numPoints = series.data.length;
            for (var dataIndex = 0; dataIndex < numPoints; dataIndex++) {
              var revision = series.data[dataIndex][0];
              series.data[dataIndex][0] = revisionToIndexMap[revision];
            }
          }
          this.chartOptions.xaxis.minTickSize = orderedRevisions.length / 10;
        },

        /**
         * Formats numbers that are displayed at ticks on the X-axis.
         *
         * If there are annotations for the first data series and for this point
         * there is a revision type specified by "a_default_rev", then we can
         * display that on the x-axis. Otherwise, we can just use the revision
         * (point ID) as-is.
         *
         * Note: This is similar to xAxisTickFormatter in embed.js.
         *
         * @param {number} val An X-value.
         * @param {Object} axis Not used.
         * @return {string} A string that should be shown on the X-axis.
         */
        formatXAxis: function(val, axis) {
          var lookupIndex = Math.round(Math.max(val, 0));
          if (!this.revisionMap) {
            // this.revisionMap may not yet be set by this.createFixedXAxis.
            return '';
          }
          var lookup = this.revisionMap[lookupIndex];
          if (!lookup) {
            return '';
          }
          var rev = lookup[0];
          var seriesIndex = lookup[1];
          var dataIndex = lookup[2];

          var annotations = this.json.annotations;
          if (annotations[seriesIndex] && annotations[seriesIndex][dataIndex]) {
            var annotation = annotations[seriesIndex][dataIndex];
            var defaultRev = annotation['a_default_rev'];
            if (defaultRev && annotation[defaultRev]) {
              return getDisplayRevision(annotation[defaultRev]);
            }
          }
          return getDisplayRevision(rev);
        },

        /**
         * Formats numbers that are displayed at ticks on the Y-axis.
         * @param {(number|string)} val A Y value.
         * @param {Object} axis Not used.
         * @return {string}
         */
        formatYAxis: function(val, axis) {
          return formatNumber(val);
        },

        /**
         * Displays alerts on the chart.
         */
        showAlerts: function() {
          // Clear out old anomalies.
          var container = this.$['anomaly-container'];
          container.innerHTML = '';

          var minHeight = this.chart.getAxes().yaxis.min;
          var maxHeight = this.chart.getAxes().yaxis.max;
          var xOffset = this.chartOptions.yaxis.labelWidth;

          var flotData = this.chart.getData();
          var annotations = this.json.annotations;
          for (var flotSeriesIndex = 0;
               flotSeriesIndex < flotData.length;
               flotSeriesIndex++) {
            var jsonSeriesIndex = flotData[flotSeriesIndex].index;
            if (jsonSeriesIndex == null || !annotations[jsonSeriesIndex]) {
              continue;
            }
            for (var dataIndex = 0;
                 dataIndex < flotData[flotSeriesIndex].data.length;
                 dataIndex++) {
              // TODO(qyearsley): Extract the inside of this loop.
              if (!annotations[jsonSeriesIndex][dataIndex] ||
                  !annotations[jsonSeriesIndex][dataIndex]['g_anomaly'] ||
                  flotData[flotSeriesIndex].data[dataIndex][1] < minHeight ||
                  flotData[flotSeriesIndex].data[dataIndex][1] > maxHeight) {
                continue;
              }
              var annotation = annotations[jsonSeriesIndex]
                  [dataIndex]['g_anomaly'];
              var bugId = annotation['bug_id'];
              var improvement = annotation['improvement'];
              var recovered = annotation['recovered'];
              var key = annotation.key;
              var src = '/black_alert.png';
              if (!bugId && !improvement) {
                src = '/red_alert.png';
              } else if (!bugId && improvement) {
                src = '/green_alert.png';
              }

              var left = xOffset + Math.round(
                  flotData[flotSeriesIndex].xaxis.p2c(
                      flotData[flotSeriesIndex].data[dataIndex][0]));
              var top = Math.round(
                  flotData[flotSeriesIndex].yaxis.p2c(
                      flotData[flotSeriesIndex].data[dataIndex][1]));

              var img = document.createElement('img');
              img.src = src;
              img.style.left = left + 'px';
              img.style.top = top + 'px';
              if (bugId && bugId < 0 || recovered) {
                // Triaged as invalid, ignored, or recovered; lower opacity.
                img.style.opacity = 0.4;
              }
              img.classList.add('anomaly');
              // alertKey is an optional attribute to specify that this chart
              // is associated with an alert.
              if (this.alertKey == key) {
                 img.classList.add('highlighted');
              }
              img.onmouseover = this.showTooltip.bind(
                  this, flotSeriesIndex, dataIndex);
              img.onclick = this.onAlertClick.bind(
                  this, flotSeriesIndex, dataIndex);
              this.$['anomaly-container'].appendChild(img);
            }
          }
        },

        /**
         * Handler for 'mouseleave' event, hides the tooltip.
         */
        onMouseLeave: function(event) {
          this.hideTooltip();
        },

        /**
         * Handler for 'plotselected' event, fired when a plot selection is
         * made.
         * For more information about selection in flot, see:
         * http://www.flotcharts.org/flot/jquery.flot.selection.js
         * @param {Event} event
         * @param {Object} ranges
         */
        onPlotSelected: function(event, ranges) {
          this.selecting = false;
          this.lastSelectedDelta = ranges;
        },

        /**
         * Handler for 'plotselecting' event, fired repeatedly when selecting.
         * @param {Event} event
         * @param {Object} ranges
         */
        onPlotSelecting: function(event, ranges) {
          if (!ranges) {
            return;
          }
          if (!this.selecting) {
            this.firstSelectedValue = ranges.yaxis.from;
            this.selecting = true;
          }
          this.$['delta-off'].hidden = true;
          this.$['delta-drag'].hidden = false;
          var delta = Math.abs(ranges.yaxis.to - ranges.yaxis.from);
          this.deltaAbsolute = delta.toFixed(2);
          this.deltaPercent =
              (delta * 100 / this.firstSelectedValue).toFixed(2);
        },

        /**
         * Handler for 'plotunselected' event, fired when selection is
         * cancelled.
         */
        onPlotUnselected: function() {
          this.selecting = false;
          this.$['delta-off'].hidden = false;
          this.$['delta-drag'].hidden = true;
        },

        /**
         * Handler for the 'plotclick' event, fired when the chart is clicked.
         * @param {Event} event
         * @param {Object} pos An object which contains the keys "x" and "y".
         * @param {Object} item
         */
        onPlotClick: function(event, pos, item) {
          if (this.lastSelectedDelta) {
            var from = this.lastSelectedDelta.yaxis.from;
            var to = this.lastSelectedDelta.yaxis.to;
            if (pos.y == from || pos.y == to) {
              // Flot sends a spurious click event at the end of the selection.
              return;
            }
            var min = Math.min(from, to), max = Math.max(from, to);
            if (pos.y > min && pos.y < max) {
              this.chartOptions.yaxis.min = min;
              this.chartOptions.yaxis.max = max;
              this.$.original.hidden = false;
              this.updateChart();
              this.$.original.style.left =
                  (this.$.plot.offsetWidth - 120) + 'px';
            }
            this.lastSelectedDelta = null;
          } else if (item) {
            // Click on a data point; show revision history and sticky tooltip.
            if (this.stickyTooltip && item.dataIndex == this.currentItem) {
              // hide the tooltip if the user clicks the same point again
              this.stickyTooltip = false;
              this.hideTooltip();
            } else {
              // show the tooltip if the user clicked on a new one
              this.stickyTooltip = true;
              this.currentItem = item.dataIndex;
              this.showTooltip(item.seriesIndex, item.dataIndex);
            }
          } else {
            // clicked an empty place on the graph
            this.hideTooltipEvenIfSticky();
          }
        },

        /**
         * Brings up the triage dialog when an alert circle is clicked.
         * @param {number} flotSeriesIndex Index into the flot data series
         *     array `this.chart.getData()`.
         * @param {number} dataIndex Index into an array of points.
         * @param {Event} The click event.
         */
        onAlertClick: function(flotSeriesIndex, dataIndex, event) {
          // Note: this.chart.getData() returns a list of series objects
          // (including series objects for error regions).
          var jsonSeriesIndex = this.chart.getData()[flotSeriesIndex].index;
          if (jsonSeriesIndex == null) {
            return;
          }
          var data = this.json.data[jsonSeriesIndex].data;

          // Populate the nudgeList array with information about nearby
          // revisions. Each entry in the nudgeList is an object with basic
          // information about a point.
          var nudgeList = [];
          for (var i = Math.max(1, dataIndex - 5);
               i < Math.min(dataIndex + 5, data.length -1);
               i++) {
            // Get annotation information about this nearby point.
            // This might be null if there are gaps in the data series.
            // In that case, we can just not add the point to the nudge list.
            var annotation = this.json.annotations[jsonSeriesIndex][i];
            if (!annotation) {
              continue;
            }
            var displayRevision = data[i][0];
            if (annotation['a_default_rev']) {
              displayRevision = annotation[annotation.a_default_rev];
            }
            displayRevision = getDisplayRevision(displayRevision);
            var amount = ' 0: ';
            if (i < dataIndex) {
              amount = '-' + (dataIndex - i) + ': ';
            } else if (i > dataIndex) {
              amount = '+' + (i - dataIndex) + ': ';
            }
            nudgeList.push({
              startRevision: data[i - 1][0] + 1,
              endRevision: data[i][0],
              displayEndRevision: displayRevision,
              value: Math.round(data[i][1] * 100) / 100,
              selected: i == dataIndex,
              dataIndex: i,
              amount: amount
            })
          }

          // Get the anomaly info object, and add a few fields.
          var annotation = this.json.annotations[jsonSeriesIndex][dataIndex];
          var anomalyInfo = annotation.g_anomaly;
          anomalyInfo['nudgeList'] = nudgeList;
          anomalyInfo['seriesIndex'] = jsonSeriesIndex;
          anomalyInfo['dataIndex'] = dataIndex;

          // The alerts and triaged lists are attributes of chart-tooltip
          // which are used for showing information about anomalies. The alerts
          // list is also used for showing the triage dialog.
          var alerts = null, triaged = null;
          if (anomalyInfo.bug_id) {
            triaged = [anomalyInfo];
          } else {
            alerts = [anomalyInfo];
          }

          this.stickyTooltip = true;
          this.showTooltip(flotSeriesIndex, dataIndex, alerts, triaged);
        },

        /**
         * Updates the interface when a bug is triaged.
         * This is the event handler for a 'triaged' event on the
         * chart-tooltip.
         */
        onBugTriaged: function(event) {
          var jsonSeriesIndex = event.detail.alerts[0].seriesIndex;
          var dataIndex = event.detail.alerts[0].dataIndex;
          var bugId = event.detail.bugid;
          // Update the bug id locally.
          this.json.annotations[jsonSeriesIndex][dataIndex]
              ['g_anomaly']['bug_id'] = bugId;
          this.$.tooltip.bugId = bugId;
          if (!bugId) {
            this.$.tooltip.alerts = this.$.tooltip.triagedAlerts;
            this.$.tooltip.triagedAlerts = null;
          } else {
            this.$.tooltip.alertInvalidOrIgnored = bugId < 0;
            this.$.tooltip.triagedAlerts = this.$.tooltip.alerts;
            this.$.tooltip.alerts = null;
            var data = this.json.annotations[jsonSeriesIndex][dataIndex];
            this.$.tooltip.alertKey = data['g_anomaly'].key;
          }
          // Refresh the anomalies to make the one with the new bug id black.
          this.showAlerts();
        },

        /**
         * Handler for the alertChangedRevisions event.
         *
         * The alertChangedRevisions event is fired from the triage dialog when
         * an alert is nudged.
         */
        onAlertChangedRevisions: function(event) {
          var jsonSeriesIndex = event.detail.alerts[0].seriesIndex;
          var dataIndex = event.detail.alerts[0].dataIndex;
          var newDataIndex = event.detail.newDataIndex;
          var seriesAnnotations = this.json.annotations[jsonSeriesIndex];
          var alertInfo = seriesAnnotations[dataIndex]['g_anomaly'];
          alertInfo['start_revision'] = event.detail.startRev;
          alertInfo['end_revision'] = event.detail.endRev;
          seriesAnnotations[dataIndex]['g_anomaly'] = null;
          seriesAnnotations[newDataIndex]['g_anomaly'] = alertInfo;
          this.showAlerts();
        },

        /**
         * Handler for the 'plothover' event, fired when the mouse is hovering
         * over the plot area. If the user is hovering over a point, we want to
         * show the tooltip for that point.
         * @param {Event} event
         * @param {Object} pos
         * @param {Object} item
         */
        onPlotHover: function(event, pos, item) {
          // If the current tooltip is sticky, just leave it.
          if (this.stickyTooltip) {
            return;
          }
          // If the current tooltip isn't sticky but we're hovering over
          // nothing, hide the tooltip.
          if (!item) {
            this.hideTooltip();
            return;
          }
          // If the current tooltip isn't sticky and we're over a datapoint,
          // show the tooltip.
          this.showTooltip(item.seriesIndex, item.dataIndex);
        },

        /**
         * Displays a tooltip for the given point on the graph.
         * TODO(qyearsley): Refactor, extract sub-functions.
         * NOTE: Instead of taking lists of alerts and triaged alerts, it
         * would be possible for this function to just take one alert, since
         * there should never generally be more than one alert at one point.
         * @param {number} flotSeriesIndex The index of the series in
         *     `this.chart.getData()`.
         * @param {number} dataIndex The index of the data in the series.
         * @param {Array} opt_alerts Array of alerts.
         * @param {Array} opt_triaged
         */
        showTooltip: function(
            flotSeriesIndex, dataIndex, opt_alerts, opt_triaged) {
          // Reset the properties of the tooltip so that nothing is left over
          // from the last time that showTooltip was called on another point.
          this.resetTooltip();

          // Don't show the tooltip if we're selecting a range on the y axis.
          if (this.selecting) {
            return;
          }

          var flotData = this.chart.getData();
          var jsonSeriesIndex = this.chart.getData()[flotSeriesIndex].index;
          if (jsonSeriesIndex == null) {
            console.warn('showTooltip returned after ' + jsonSeriesIndex +
                         ' was null for flotSeriesIndex ' + flotSeriesIndex);
            return;
          }

          // Set the main properties of the tooltip.
          var series = this.json.annotations.series[jsonSeriesIndex];
          var annotation = this.json.annotations[jsonSeriesIndex][dataIndex];

          // In the data from this.chart.getData(), the series indexes are
          // different, and the point x-values are all converted to indexes.
          var pointFromChart = flotData[flotSeriesIndex].data[dataIndex];

          // The data from /graph_json is the data as it originally came,
          // and the x-values are the original Row IDs.
          var seriesFromJson = this.json.data[jsonSeriesIndex];
          var pointFromJson = seriesFromJson.data[dataIndex];

          var xValue = pointFromChart[0];
          var pointId = pointFromJson[0];
          var yValue = pointFromJson[1];

          this.$.tooltip.testPath = series.path;
          this.$.tooltip.value = formatNumber(yValue);
          if (annotation.error > 0) {
            this.$.tooltip.stddev = formatNumber(annotation.error);
          }
          this.$.tooltip.pointId = pointId;
          this.$.tooltip.revisions = this.getRevisions(
              jsonSeriesIndex, dataIndex);
          this.$.tooltip.links = this.getTooltipLinks(annotation, pointId);
          if (annotation.timestamp) {
            var d = new Date(annotation.timestamp);
            this.$.tooltip.timestamp = d.toISOString();
          }

          // Set the alert-related properties of the tooltip.
          this.$.tooltip.alerts = opt_alerts;
          this.$.tooltip.triagedAlerts = opt_triaged;
          if (annotation['g_anomaly']) {
            if (annotation.g_anomaly['bug_id']) {
              this.$.tooltip.bugId = annotation['g_anomaly']['bug_id'];
              this.$.tooltip.alertInvalidOrIgnored =
                  annotation['g_anomaly']['bug_id'] < 0;
              this.$.tooltip.alertKey = annotation['g_anomaly']['key'];
            }
            this.$.tooltip.recovered = annotation['g_anomaly']['recovered'];
          }

          // Show information in the tooltip for use by the bisect button.
          if (series.path.lastIndexOf('ref') + 3 == series.path.length) {
            hideBisect = true;
          }
          bisectRevisions = this.getRevisionForBisect(
              jsonSeriesIndex, dataIndex, series.path);

          var traceRerunInfo = [];
          if (annotation['a_trace_rerun_options']) {
            for (var i in annotation['a_trace_rerun_options']) {
              var currentOption = annotation['a_trace_rerun_options'][i];
              traceRerunInfo.push({
                  'name': i,
                  'option': currentOption
              });
            }
          } else {
              traceRerunInfo.push({
                  'name': 'Default Trace Profiler',
                  'option': '--profiler=trace'
              });
          }
          this.$.tooltip.bisectInfo = {
            badRev: bisectRevisions['bad_revision'],
            goodRev: bisectRevisions['good_revision'],
            testPath: series.path,
            traceRerunInfo: traceRerunInfo
          };

          // Un-hide and position the tooltip box.
          this.$.tooltip.hidden = false;
          this.$.tooltip.style.left =
              flotData[flotSeriesIndex].xaxis.p2c(xValue) +
              this.chartOptions.yaxis.labelWidth + 20 + 'px';
          this.$.tooltip.style.top =
              flotData[flotSeriesIndex].yaxis.p2c(yValue) + 20 + 'px';
        },

        /**
         * Reset the chart-tooltip's properties.
         */
        resetTooltip: function() {
          this.$.tooltip.testPath = null;
          this.$.tooltip.value = null;
          this.$.tooltip.stddev = null;
          this.$.tooltip.pointId = null;
          this.$.tooltip.revisions = null;
          this.$.tooltip.links = null;
          this.$.tooltip.alerts = null;
          this.$.tooltip.triagedAlerts = null;
          this.$.tooltip.bugId = null;
          this.$.tooltip.alertKey = null;
          this.$.tooltip.recovered = null;
          this.$.tooltip.timestamp = null;
          this.$.tooltip.bisectInfo = null;
        },

        /**
         * Returns good and bad revisions for bisect.
         */
        getRevisionForBisect: function(index, dataIndex, testPath) {
          bisectRange = this.getDefaultRevRangeFromAnnotations(
              index, dataIndex);
          if (bisectRange) {
            return bisectRange;
          }
          var dataPoint = this.json.data[index];
          var badRev = dataPoint.data[dataIndex][0];
          if (getDateDisplay(badRev)) {
            for (var i in this.$.tooltip.revisions) {
              var revObj = this.$.tooltip.revisions[i];
              if (revObj.hasOwnProperty('name') &&
                  revObj['name'].indexOf('Chromium Git Hash') != -1) {
                return {
                  'bad_revision': revObj['end'],
                  'good_revision': revObj['start'] ? revObj['start'] : null,
                }
              }
            }
          }
          return {
            'bad_revision': badRev,
            'good_revision': dataIndex ? dataPoint.data[dataIndex - 1][0] : null,
          }
        },

        /**
         * Returns good and bad revisions for bisect by checking a_default_rev.
         * @param {number} seriesIndex Index into the this.json.annotations.
         * @param {number} dataIndex The index of the point within the series.
         * @return {Object} A map object with the keys "bad_revision" and
         *     "good_revision".
         */
        getDefaultRevRangeFromAnnotations: function(seriesIndex, dataIndex) {
          var annotations = this.json.annotations;
          if (annotations[seriesIndex] && annotations[seriesIndex][dataIndex]) {
            var badAnnotation = annotations[seriesIndex][dataIndex];
            var badDefaultRevType = badAnnotation['a_default_rev'];
            if (badDefaultRevType && badAnnotation[badDefaultRevType]) {
              if (!dataIndex) {
                return {
                    'bad_revision': badAnnotation[badDefaultRevType],
                    'good_revision': null,
                  }
              }
              var goodAnnotation = annotations[seriesIndex][dataIndex - 1];
              if (goodAnnotation) {
                var goodDefaultRevType = goodAnnotation['a_default_rev'];
                if (goodDefaultRevType == badDefaultRevType) {
                  return {
                    'bad_revision': badAnnotation[badDefaultRevType],
                    'good_revision': goodAnnotation[goodDefaultRevType],
                  }
                }
              }
            }
          }
          return null;
        },

        /**
         * Hides the tooltip only if it's not sticky.
         */
        hideTooltip: function() {
          if (this.stickyTooltip) {
            return;
          }
          this.$.tooltip.hidden = true;
        },

        /**
         * Force-hides the tooltip.
         */
        hideTooltipEvenIfSticky: function() {
          this.stickyTooltip = false;
          this.hideTooltip();
        },

        /**
         * Gets a list of obj about links to put in the tooltip.
         * @param {Object} annotation Annotation object for this point.
         * @param {number} pointId Main revision at the given point.
         * @return {Array.<Object>} List of objects with properties text and
         *     url.
         */
        getTooltipLinks: function(annotation, pointId) {
          var links = [];
          if (annotation.a_stdio_uri) {
            links.push({
                'text': 'Buildbot stdio',
                'url': annotation['a_stdio_uri']
            });
          }
          if (annotation['g_anomaly']) {
            var testPath = this.graphParams.masters[0] + '/' +
                           this.graphParams.bots[0] + '/' +
                           this.graphParams.tests[0];
            var debugUrl = '/debug_alert?test_path=' + testPath +
                           '&rev=' + pointId;
            links.push({
              'text': 'Debug alert',
              'url': debugUrl
            });
          }
          if (annotation['a_tracing_uri']) {
            links.push({
                'text': 'Trace',
                'url': annotation['a_tracing_uri']
            })
          }
          return links;
        },

        /**
         * Returns an array of revision range info objects for the given point.
         *
         * This array is used to show revision ranges and change log links in
         * the tooltip.
         * Example format for the returned array:
         *   [
         *     {
         *       name: "Chrome Revision",
         *       start: 216441,
         *       end: 216538,
         *       displayStart: 216441,
         *       displayEnd: 216538,
         *       url: "http://x.chromium.org/changelog.html?range=216441:216538",
         *     },
         *     ...
         *   ]
         *
         * @param {number} seriesIndex An index in this.json.data.
         * @param {number} dataIndex The index of the point within the series.
         * @return {Array.<Object>} An array of information needed for showing
         *     change log links for different types of revisions.
         */
        getRevisions: function(seriesIndex, dataIndex) {
          var annotationSeries = this.json.annotations[seriesIndex];
          var annotation = annotationSeries[dataIndex];
          var previousAnnotation = annotationSeries[dataIndex - 1];
          var defaultRevisionRangeInfo = null;
          var revisionRangeInfoObjects = [];
          for (var revisionTypeKey in annotation) {
            if (revisionTypeKey.indexOf('r_') != 0) {
              continue;  // Not a revision.
            }
            if (!this.revisionInfo[revisionTypeKey]) {
              console.warn('No entry', revisionTypeKey, 'in', this.revisionInfo);
              continue;
            }
            var end = annotation[revisionTypeKey];
            var start = -1;
            if (dataIndex > 0 && previousAnnotation &&
                previousAnnotation[revisionTypeKey]) {
              start = previousAnnotation[revisionTypeKey];
            }
            var revisionRangeInfo = this.getRevisionRangeInfo(
                revisionTypeKey, start, end);
            if (revisionTypeKey == annotation['a_default_rev']) {
              // The default revision type will be inserted afterwards.
              defaultRevisionRangeInfo = revisionRangeInfo;
            } else {
              revisionRangeInfoObjects.push(revisionRangeInfo);
            }
          }
          // Revisions are sorted by name, with the default first.
          revisionRangeInfoObjects.sort(function(a, b) {
            var aName = a['name'].toLowerCase();
            var bName = b['name'].toLowerCase();
            return aName.localeCompare(bName);
          });
          if (defaultRevisionRangeInfo) {
            revisionRangeInfoObjects.unshift(defaultRevisionRangeInfo);
          }
          return revisionRangeInfoObjects;
        },

        /**
         * Returns an object with revision-related information for one type
         * of revision, for two revision numbers.
         *
         * The property this.revisionInfo is set in graph.js from the global
         * variable REVISION_INFO, which is embedded based on the content of
         * chart_handler.py.
         *
         * @param {string} revisionTypeKey A key in this.revisionInfo.
         *     This will be a string starting with "r_".
         * @param {(number|string|boolean)} start Optional start revision.
         *     False may be given if the start and end revision are the same.
         * @param {(number|string)} end End revision or only revision.
         * @return {Object} The information necessary for showing a link for
         *     a change log for a particular revision range.
         */
        getRevisionRangeInfo: function(revisionTypeKey, start, end) {
          var revisionInfo = this.revisionInfo[revisionTypeKey];
          if (!revisionInfo) {
            console.warn('No entry', revisionTypeKey, 'in', this.revisionInfo);
          }
          var revisionTypeKey = revisionInfo['name'];
          var urlTemplate = revisionInfo['url'];

          if (!isNaN(start) && !isNaN(end) && Number(start) > Number(end)) {
            console.warn('Start and end revisions flipped:', start, end);
            var temp = start;
            start = end;
            end = temp;
          }

          // For a regression range, start is the "last known good" revision.
          // We want the "first possible bad" revision.
          if (!isNaN(start) && (start != end)) {
            start = Number(start) + 1;
          }

          // If the substring R1_trim is found in the URL template, we assume
          // that it's the URL template for Crome OS versions.
          var url = '';
          if (urlTemplate.indexOf('{{R1_trim}}') != -1) {
            url = this.fillInChromeOSChangeLogURL(urlTemplate, start, end);
          } else {
            url = urlTemplate.replace('{{R1}}', start).replace('{{R2}}', end);
          }

          if (start == end || !start) {
            start = false;
          }

          return {
            'name': revisionTypeKey,
            'url': url,
            'start': start,
            'end': end,
            'displayStart': getDisplayRevision(start),
            'displayEnd': getDisplayRevision(end)
          };
        },

        /**
         * Fills in a Chrome OS or Chrome version change log URL.
         * The chromeOS diff tool expects version numbers to be composed of
         * only the right-most 3 components of the number (i.e., we need to
         * drop the  left-most component when constructing the URL below).
         * The format of the specified version number should be "X.Y.Z",
         * not "W.X.Y.Z".
         * @param {string} urlTemplate A string with the template fields
         *     R1_trim and R2_trim.
         * @param {string} start Start version string.
         * @param {string} end End version string.
         */
        fillInChromeOSChangeLogURL: function(urlTemplate, start, end) {
          var urlEndVersion = end.substring(end.indexOf('.') + 1);
          var urlStartVersion = '';
          if (start) {
            urlStartVersion = start.substring(start.indexOf('.') + 1);
          } else {
            urlStartVersion = urlEndVersion;
          }
          var url = urlTemplate.replace('{{R1_trim}}', urlStartVersion);
          url = url.replace('{{R2_trim}}', urlEndVersion);
          return url;
        },

        /**
         * Handler for the click event for the 'View original graph' link.
         *
         * This link only appears after zooming in on a smaller Y-axis range
         * (by clicking and dragging and then clicking). When the 'view
         * original graph' link has been clicked, the original Y-axis range
         * should be restored.
         */
        onViewOriginal: function() {
          this.chartOptions.yaxis.min = null;
          this.chartOptions.yaxis.max = null;
          this.$.original.hidden = true;
          this.updateChart();
        },

        /**
         * Handler for the click event of the select all traces button.
         * Updates this.indicesToGraph to contain all traces.
         * @param {Event} opt_noEvent The click event, not used.
         */
        onSelectAll: function(opt_noEvent) {
          if (this.loadingUnselected) {
            // Still loading.
            return;
          }
          var series = this.json.annotations.series, indices = [];
          for (var i = 0; i < series.length; i++) {
            indices.push(i);
          }
          this.indicesToGraph = indices;
        },

        /**
         * Handler for the click event of the deselect all traces button.
         * @param {Event} opt_noEvent The click event, not used.
         */
        onDeselectAll: function(opt_noEvent) {
          this.indicesToGraph = [];
        },

        /**
         * Handler for the click event of the select core traces button.
         * Selects only the core traces (i.e. important and ref traces).
         * Note: The property 'coreTraces' is set in graph.js.
         * @param {Event} opt_event The click event, not used.
         */
        onSelectCore: function(opt_noEvent) {
          if (this.loadingUnselected) {
            // Still loading.
            return;
          }
          var series = this.json.annotations.series, indices = [];
          for (var i = 0; i < series.length; i++) {
            if (this.coreTraces[series[i].name]) {
              indices.push(i);
            }
          }
          this.indicesToGraph = indices;
        },

        /**
         * Handler for resize event.
         * @param {Event} event
         */
        onResize: function(event) {
          // Try not to resize graphs until the user has stopped resizing
          clearTimeout(this.resizeTimer);
          this.resizeTimer = setTimeout(this.resizeGraph.bind(this), 100);
        },

        /**
         * Resizes the chart if it's present.
         */
        resizeGraph: function() {
          if (!this.chart) {
            return;
          }
          // The chart is resized when it's updated.
          this.updateChart();
         },

        /**
         * On collapseLegend change, updates graph and chart-revision sizes.
         */
        collapseLegendChanged: function() {
          this.onResize();
          this.$.slider.onResize();
        },

        /**
         * Toggles legend window to collapse or expand.
         */
        toggleLegend: function() {
          this.$['collapsible-legend'].toggle();
          this.collapseLegend = !this.collapseLegend;
        }
      });
    })();
  </script>
</polymer-element>