golden/modules/dots-sk/dots-sk.js - buildbot - Git at Google

 /**
  * @module modules/dots-sk
  * @description <h2><code>dots-sk</code></h2>
  *
  * A custom element for displaying a dot chart of digests by trace, such as:
  *
  *   ooo-o-o-oo
  *
  * @evt showblamelist - Event generated when a dot is clicked. e.detail contains
  *   the blamelist (an array of commits that could have made up that dot).
  *
  * @evt hover - Event generated when the mouse hovers over a trace. e.detail is
  *   the trace id.
  */

 import { define } from 'elements-sk/define';
 import { html } from 'lit-html';
 import { $$ } from 'common-sk/modules/dom';
 import { ElementSk } from '../../../infra-sk/modules/ElementSk';
 import {
   dotToCanvasX,
   dotToCanvasY,
   DOT_FILL_COLORS,
   DOT_FILL_COLORS_HIGHLIGHTED,
   DOT_OFFSET_X,
   DOT_OFFSET_Y,
   DOT_RADIUS,
   DOT_SCALE_X,
   DOT_SCALE_Y,
   DOT_STROKE_COLORS,
   MISSING_DOT,
   STROKE_WIDTH,
   TRACE_LINE_COLOR,
 } from './constants';

 // Array of dots-sk component instances. A dots-sk instance is present if it has
 // a pending mousemove update.
 const dotsSkInstancesWithPendingMouseMoveUpdates = [];

 // Periodically process all pending mousemoves. We do not want to do any work on
 // a mouse move event as that can very easily degrade browser performance, e.g.
 // as the user drags the mouse pointer over the element. Processing mouse events
 // in batches remedies this.
 setInterval(() => {
   while (dotsSkInstancesWithPendingMouseMoveUpdates.length > 0) {
     const dotsSk = dotsSkInstancesWithPendingMouseMoveUpdates.pop();
     dotsSk._updatePendingMouseMove();
   }
 }, 40);

 const template = () => html`<canvas></canvas>`;

 define('dots-sk', class extends ElementSk {
   constructor() {
     super(template);
     this._commits = [];
     this._value = { tileSize: 0, traces: [] };
     this._id = `id${Math.random()}`;

     // The index of the trace that should be highlighted.
     this._hoverIndex = -1;

     // For capturing the last mousemove event, which is later processed in a
     // timer.
     this._lastMouseMove = null;

     this._hasScrolledOnce = false;

     // Explicitly bind event handler methods to this.
     this._onMouseMove = this._onMouseMove.bind(this);
     this._onMouseLeave = this._onMouseLeave.bind(this);
     this._onClick = this._onClick.bind(this);
   }

   connectedCallback() {
     super.connectedCallback();
     this._render();
     this._canvas = $$('canvas', this);
     this._canvas.addEventListener('mousemove', this._onMouseMove);
     this._canvas.addEventListener('mouseleave', this._onMouseLeave);
     this._canvas.addEventListener('click', this._onClick);
     this._ctx = this._canvas.getContext('2d');
     this._draw();
   }

   disconnectedCallback() {
     this._canvas.removeEventListener('mousemove', this._onMouseMove);
     this._canvas.removeEventListener('mouseleave', this._onMouseLeave);
     this._canvas.removeEventListener('click', this._onClick);
     this._hasScrolledOnce = false;
   }

   /**
    * @prop value {Object} An object of the form:
    *
    *   {
    *     tileSize: 50,
    *     traces: [
    *       {
    *         label: "some:trace:id",
    *         data: [0, 1, 2, 2, 1, -1, -1, 2, ...],
    *       },
    *       ...
    *     ]
    *   }
    *
    * Where the content of the data array are color codes; 0 is the target digest, while 1-6 indicate
    * unique digests that are different from the target digest. A code of -1 means no data for the
    * corresponding commit. A code of 7 means that there are 8 or more unique digests in the trace
    * and all digests after the first 8 unique digests are represented by this code. The highest
    * index of data is the most recent data point.
    */
   get value() { return this._value; }

   set value(value) {
     if (!value || (value.tileSize === 0)) {
       return;
     }
     this._value = value;
     if (this._connected) {
       this._draw();
     }
   }

   /**
    * Scrolls the traces all the way to the right, showing the newest first. It will only do this
    * on the first call, so as to avoid undoing the user manually scrolling left to see older
    * history.
    */
   autoscroll() {
     if (!this._hasScrolledOnce) {
       this._hasScrolledOnce = true;
       this.scroll(this.scrollWidth, 0);
     }
   }

   // Draws the entire canvas.
   _draw() {
     const w = (this._value.tileSize - 1) * DOT_SCALE_X + 2 * DOT_OFFSET_X;
     const h = (this._value.traces.length - 1) * DOT_SCALE_Y + 2 * DOT_OFFSET_Y;
     this._canvas.setAttribute('width', `${w}px`);
     this._canvas.setAttribute('height', `${h}px`);

     // First clear the canvas.
     this._ctx.lineWidth = STROKE_WIDTH;
     this._ctx.fillStyle = '#FFFFFF';
     this._ctx.fillRect(0, 0, w, h);

     // Draw lines and dots.
     this._value.traces.forEach((trace, traceIndex) => {
       this._ctx.strokeStyle = TRACE_LINE_COLOR;
       this._ctx.beginPath();
       const firstNonMissingDot = trace.data.findIndex((dot) => dot !== MISSING_DOT);
       let lastNonMissingDot = -1;
       for (let i = trace.data.length - 1; i >= 0; i--) {
         if (trace.data[i] !== MISSING_DOT) {
           lastNonMissingDot = i;
           break;
         }
       }
       if (firstNonMissingDot < 0 || lastNonMissingDot < 0) {
         // Trace was all missing data, so nothing to draw. This should never happen, such a trace
         // would not be included in search results.
         console.warn(`trace with id ${trace.label} was unexpectedly empty`);
         return;
       }
       this._ctx.moveTo(
         dotToCanvasX(firstNonMissingDot),
         dotToCanvasY(traceIndex),
       );
       this._ctx.lineTo(
         dotToCanvasX(lastNonMissingDot),
         dotToCanvasY(traceIndex),
       );
       this._ctx.stroke();
       this._drawTraceDots(trace.data, traceIndex);
     });
   }

   // Draws the circles for a single trace.
   _drawTraceDots(colors, y) {
     colors.forEach((c, x) => {
       // We don't draw a dot when it is missing.
       if (c === MISSING_DOT) {
         return;
       }
       this._ctx.beginPath();
       this._ctx.strokeStyle = this._getColorSafe(DOT_STROKE_COLORS, c);
       this._ctx.fillStyle = (this._hoverIndex === y)
         ? this._getColorSafe(DOT_FILL_COLORS_HIGHLIGHTED, c)
         : this._getColorSafe(DOT_FILL_COLORS, c);
       this._ctx.arc(
         dotToCanvasX(x), dotToCanvasY(y), DOT_RADIUS, 0, Math.PI * 2,
       );
       this._ctx.fill();
       this._ctx.stroke();
     });
   }

   // Used to index into the dot color arrays (DOT_STROKE_COLORS, etc.). Returns
   // the last color in the array if the given unique digest index exceeds
   // MAX_UNIQUE_DIGESTS.
   //
   // This assumes that the color array is of length MAX_UNIQUE_DIGESTS + 1.
   _getColorSafe(colorArray, uniqueDigestIndex) {
     return colorArray[Math.min(colorArray.length - 1, uniqueDigestIndex)];
   }

   // Redraws just the circles for a single trace.
   _redrawTraceDots(traceIndex) {
     const trace = this._value.traces[traceIndex];
     if (!trace) {
       return;
     }
     this._drawTraceDots(trace.data, traceIndex);
   }

   /**
    * @prop commits {Object} An array of commits, such as:
    *
    *   [
    *     {
    *       author: "committer@example.org"
    *       commit_time: 1428445634
    *       hash: "c654e9016a15985ebeb24f94f819d113ad48a251"
    *     },
    *    ...
    *   ]
    */
   get commits() { return this._commits; }

   set commits(commits) { this._commits = commits; }

   _onMouseLeave() {
     const oldHoverIndex = this._hoverIndex;
     this._hoverIndex = -1;
     this._redrawTraceDots(oldHoverIndex);
     this._lastMouseMove = null;
   }

   _onMouseMove(e) {
     this._lastMouseMove = {
       clientX: e.clientX,
       clientY: e.clientY,
     };
     dotsSkInstancesWithPendingMouseMoveUpdates.push(this);
   }

   // Gets the coordinates of the mouse event in dot coordinates.
   _mouseEventToDotSpace(e) {
     const rect = this._canvas.getBoundingClientRect();
     const x = (e.clientX - rect.left - DOT_OFFSET_X + STROKE_WIDTH + DOT_RADIUS)
             / DOT_SCALE_X;
     const y = (e.clientY - rect.top - DOT_OFFSET_Y + STROKE_WIDTH + DOT_RADIUS)
             / DOT_SCALE_Y;
     return { x: Math.floor(x), y: Math.floor(y) };
   }

   // We look at the mousemove event, if one occurred, to determine which trace
   // to highlight.
   _updatePendingMouseMove() {
     if (!this._lastMouseMove) {
       return;
     }
     const dotCoords = this._mouseEventToDotSpace(this._lastMouseMove);
     this._lastMouseMove = null;
     // If the focus has moved to a different trace then draw the two changing
     // traces.
     if (this._hoverIndex !== dotCoords.y) {
       const oldIndex = this._hoverIndex;
       this._hoverIndex = dotCoords.y;
       if (this._hoverIndex >= 0
           && this._hoverIndex < this._value.traces.length) {
         this.dispatchEvent(new CustomEvent('hover', {
           bubbles: true,
           detail: this._value.traces[this._hoverIndex].label,
         }));
       }
       // Just update the dots of the traces that have changed.
       this._redrawTraceDots(oldIndex);
       this._redrawTraceDots(this._hoverIndex);
     }

     // Set the cursor to a pointer if you are hovering over a dot.
     let found = false;
     const trace = this._value.traces[dotCoords.y];
     if (trace) {
       for (let i = trace.data.length - 1; i >= 0; i--) {
         if (trace.data[i].x === dotCoords.x) {
           found = true;
           break;
         }
       }
     }
     this.style.cursor = (found) ? 'pointer' : 'auto';
   }

   // When a dot is clicked on, produce the showblamelist event with the
   // blamelist; that is, all the commits that are included up to and including
   // that dot.
   _onClick(e) {
     const dotCoords = this._mouseEventToDotSpace(e);
     const trace = this._value.traces[dotCoords.y];
     if (!trace) {
       return; // Misclick, likely.
     }
     const blamelist = this._computeBlamelist(trace, dotCoords.x);
     if (!blamelist) {
       return; // No blamelist if there's no dot at that X coord, i.e. misclick.
     }
     this.dispatchEvent(new CustomEvent('showblamelist', {
       bubbles: true,
       detail: blamelist,
     }));
   }

   // Takes a trace and the X coordinate of a dot in that trace and returns the
   // blamelist for that dot. The blamelist includes the commit corresponding to
   // the dot, and if the dot is preceded by any missing dots, then their
   // corresponding commits will be included as well.
   _computeBlamelist(trace, x) {
     if (trace.data[x] === MISSING_DOT) {
       // Can happen if there's no dot at that X coord, e.g. misclick.
       return null;
     }
     // Look backwards in the trace for the previous commit with data. If none,
     // 0 is a fine index to compute the blamelist from.
     let lastNonMissingIndex = 0;
     for (let i = x - 1; i >= 0; i--) {
       if (trace.data[i] !== MISSING_DOT) {
         // We include the last non-missing data in our slice because the slice of commits that
         // Gold returns is not the complete history - Gold elides commits that have no data.
         // This is potentially a problem in the following scenario:
         //   - commit 1 has correct data
         //   - commit 2 has correct data
         //   - commit 3 has no data, but introduced a bug (and would have produced incorrect data)
         //   - commit 4 has incorrect data
         // In this case, we need to make sure we can create a blamelist that starts on the first
         // real commit after commit 2. Therefore, we include commit 2 in the list, which GitHub
         // and googlesource will automatically elide when we ask for a range of history (in
         // blamelist-panel-sk). If there were no preceding missing digests, this will equal x-1.
         lastNonMissingIndex = i;
         break;
       }
     }
     const blamelist = this._commits.slice(lastNonMissingIndex, x + 1);
     blamelist.reverse();
     return blamelist;
   }
 });
	/**
	* @module modules/dots-sk
	* @description <h2><code>dots-sk</code></h2>
	*
	* A custom element for displaying a dot chart of digests by trace, such as:
	*
	* ooo-o-o-oo
	*
	* @evt showblamelist - Event generated when a dot is clicked. e.detail contains
	* the blamelist (an array of commits that could have made up that dot).
	*
	* @evt hover - Event generated when the mouse hovers over a trace. e.detail is
	* the trace id.
	*/

	import { define } from 'elements-sk/define';
	import { html } from 'lit-html';
	import { $$ } from 'common-sk/modules/dom';
	import { ElementSk } from '../../../infra-sk/modules/ElementSk';
	import {
	dotToCanvasX,
	dotToCanvasY,
	DOT_FILL_COLORS,
	DOT_FILL_COLORS_HIGHLIGHTED,
	DOT_OFFSET_X,
	DOT_OFFSET_Y,
	DOT_RADIUS,
	DOT_SCALE_X,
	DOT_SCALE_Y,
	DOT_STROKE_COLORS,
	MISSING_DOT,
	STROKE_WIDTH,
	TRACE_LINE_COLOR,
	} from './constants';

	// Array of dots-sk component instances. A dots-sk instance is present if it has
	// a pending mousemove update.
	const dotsSkInstancesWithPendingMouseMoveUpdates = [];

	// Periodically process all pending mousemoves. We do not want to do any work on
	// a mouse move event as that can very easily degrade browser performance, e.g.
	// as the user drags the mouse pointer over the element. Processing mouse events
	// in batches remedies this.
	setInterval(() => {
	while (dotsSkInstancesWithPendingMouseMoveUpdates.length > 0) {
	const dotsSk = dotsSkInstancesWithPendingMouseMoveUpdates.pop();
	dotsSk._updatePendingMouseMove();
	}
	}, 40);

	const template = () => html`<canvas></canvas>`;

	define('dots-sk', class extends ElementSk {
	constructor() {
	super(template);
	this._commits = [];
	this._value = { tileSize: 0, traces: [] };
	this._id = `id${Math.random()}`;

	// The index of the trace that should be highlighted.
	this._hoverIndex = -1;

	// For capturing the last mousemove event, which is later processed in a
	// timer.
	this._lastMouseMove = null;

	this._hasScrolledOnce = false;

	// Explicitly bind event handler methods to this.
	this._onMouseMove = this._onMouseMove.bind(this);
	this._onMouseLeave = this._onMouseLeave.bind(this);
	this._onClick = this._onClick.bind(this);
	}

	connectedCallback() {
	super.connectedCallback();
	this._render();
	this._canvas = $$('canvas', this);
	this._canvas.addEventListener('mousemove', this._onMouseMove);
	this._canvas.addEventListener('mouseleave', this._onMouseLeave);
	this._canvas.addEventListener('click', this._onClick);
	this._ctx = this._canvas.getContext('2d');
	this._draw();
	}

	disconnectedCallback() {
	this._canvas.removeEventListener('mousemove', this._onMouseMove);
	this._canvas.removeEventListener('mouseleave', this._onMouseLeave);
	this._canvas.removeEventListener('click', this._onClick);
	this._hasScrolledOnce = false;
	}

	/**
	* @prop value {Object} An object of the form:
	*
	* {
	* tileSize: 50,
	* traces: [
	* {
	* label: "some:trace:id",
	* data: [0, 1, 2, 2, 1, -1, -1, 2, ...],
	* },
	* ...
	* ]
	* }
	*
	* Where the content of the data array are color codes; 0 is the target digest, while 1-6 indicate
	* unique digests that are different from the target digest. A code of -1 means no data for the
	* corresponding commit. A code of 7 means that there are 8 or more unique digests in the trace
	* and all digests after the first 8 unique digests are represented by this code. The highest
	* index of data is the most recent data point.
	*/
	get value() { return this._value; }

	set value(value) {
	if (!value \|\| (value.tileSize === 0)) {
	return;
	}
	this._value = value;
	if (this._connected) {
	this._draw();
	}
	}

	/**
	* Scrolls the traces all the way to the right, showing the newest first. It will only do this
	* on the first call, so as to avoid undoing the user manually scrolling left to see older
	* history.
	*/
	autoscroll() {
	if (!this._hasScrolledOnce) {
	this._hasScrolledOnce = true;
	this.scroll(this.scrollWidth, 0);
	}
	}

	// Draws the entire canvas.
	_draw() {
	const w = (this._value.tileSize - 1) * DOT_SCALE_X + 2 * DOT_OFFSET_X;
	const h = (this._value.traces.length - 1) * DOT_SCALE_Y + 2 * DOT_OFFSET_Y;
	this._canvas.setAttribute('width', `${w}px`);
	this._canvas.setAttribute('height', `${h}px`);

	// First clear the canvas.
	this._ctx.lineWidth = STROKE_WIDTH;
	this._ctx.fillStyle = '#FFFFFF';
	this._ctx.fillRect(0, 0, w, h);

	// Draw lines and dots.
	this._value.traces.forEach((trace, traceIndex) => {
	this._ctx.strokeStyle = TRACE_LINE_COLOR;
	this._ctx.beginPath();
	const firstNonMissingDot = trace.data.findIndex((dot) => dot !== MISSING_DOT);
	let lastNonMissingDot = -1;
	for (let i = trace.data.length - 1; i >= 0; i--) {
	if (trace.data[i] !== MISSING_DOT) {
	lastNonMissingDot = i;
	break;
	}
	}
	if (firstNonMissingDot < 0 \|\| lastNonMissingDot < 0) {
	// Trace was all missing data, so nothing to draw. This should never happen, such a trace
	// would not be included in search results.
	console.warn(`trace with id ${trace.label} was unexpectedly empty`);
	return;
	}
	this._ctx.moveTo(
	dotToCanvasX(firstNonMissingDot),
	dotToCanvasY(traceIndex),
	);
	this._ctx.lineTo(
	dotToCanvasX(lastNonMissingDot),
	dotToCanvasY(traceIndex),
	);
	this._ctx.stroke();
	this._drawTraceDots(trace.data, traceIndex);
	});
	}

	// Draws the circles for a single trace.
	_drawTraceDots(colors, y) {
	colors.forEach((c, x) => {
	// We don't draw a dot when it is missing.
	if (c === MISSING_DOT) {
	return;
	}
	this._ctx.beginPath();
	this._ctx.strokeStyle = this._getColorSafe(DOT_STROKE_COLORS, c);
	this._ctx.fillStyle = (this._hoverIndex === y)
	? this._getColorSafe(DOT_FILL_COLORS_HIGHLIGHTED, c)
	: this._getColorSafe(DOT_FILL_COLORS, c);
	this._ctx.arc(
	dotToCanvasX(x), dotToCanvasY(y), DOT_RADIUS, 0, Math.PI * 2,
	);
	this._ctx.fill();
	this._ctx.stroke();
	});
	}

	// Used to index into the dot color arrays (DOT_STROKE_COLORS, etc.). Returns
	// the last color in the array if the given unique digest index exceeds
	// MAX_UNIQUE_DIGESTS.
	//
	// This assumes that the color array is of length MAX_UNIQUE_DIGESTS + 1.
	_getColorSafe(colorArray, uniqueDigestIndex) {
	return colorArray[Math.min(colorArray.length - 1, uniqueDigestIndex)];
	}

	// Redraws just the circles for a single trace.
	_redrawTraceDots(traceIndex) {
	const trace = this._value.traces[traceIndex];
	if (!trace) {
	return;
	}
	this._drawTraceDots(trace.data, traceIndex);
	}

	/**
	* @prop commits {Object} An array of commits, such as:
	*
	* [
	* {
	* author: "committer@example.org"
	* commit_time: 1428445634
	* hash: "c654e9016a15985ebeb24f94f819d113ad48a251"
	* },
	* ...
	* ]
	*/
	get commits() { return this._commits; }

	set commits(commits) { this._commits = commits; }

	_onMouseLeave() {
	const oldHoverIndex = this._hoverIndex;
	this._hoverIndex = -1;
	this._redrawTraceDots(oldHoverIndex);
	this._lastMouseMove = null;
	}

	_onMouseMove(e) {
	this._lastMouseMove = {
	clientX: e.clientX,
	clientY: e.clientY,
	};
	dotsSkInstancesWithPendingMouseMoveUpdates.push(this);
	}

	// Gets the coordinates of the mouse event in dot coordinates.
	_mouseEventToDotSpace(e) {
	const rect = this._canvas.getBoundingClientRect();
	const x = (e.clientX - rect.left - DOT_OFFSET_X + STROKE_WIDTH + DOT_RADIUS)
	/ DOT_SCALE_X;
	const y = (e.clientY - rect.top - DOT_OFFSET_Y + STROKE_WIDTH + DOT_RADIUS)
	/ DOT_SCALE_Y;
	return { x: Math.floor(x), y: Math.floor(y) };
	}

	// We look at the mousemove event, if one occurred, to determine which trace
	// to highlight.
	_updatePendingMouseMove() {
	if (!this._lastMouseMove) {
	return;
	}
	const dotCoords = this._mouseEventToDotSpace(this._lastMouseMove);
	this._lastMouseMove = null;
	// If the focus has moved to a different trace then draw the two changing
	// traces.
	if (this._hoverIndex !== dotCoords.y) {
	const oldIndex = this._hoverIndex;
	this._hoverIndex = dotCoords.y;
	if (this._hoverIndex >= 0
	&& this._hoverIndex < this._value.traces.length) {
	this.dispatchEvent(new CustomEvent('hover', {
	bubbles: true,
	detail: this._value.traces[this._hoverIndex].label,
	}));
	}
	// Just update the dots of the traces that have changed.
	this._redrawTraceDots(oldIndex);
	this._redrawTraceDots(this._hoverIndex);
	}

	// Set the cursor to a pointer if you are hovering over a dot.
	let found = false;
	const trace = this._value.traces[dotCoords.y];
	if (trace) {
	for (let i = trace.data.length - 1; i >= 0; i--) {
	if (trace.data[i].x === dotCoords.x) {
	found = true;
	break;
	}
	}
	}
	this.style.cursor = (found) ? 'pointer' : 'auto';
	}

	// When a dot is clicked on, produce the showblamelist event with the
	// blamelist; that is, all the commits that are included up to and including
	// that dot.
	_onClick(e) {
	const dotCoords = this._mouseEventToDotSpace(e);
	const trace = this._value.traces[dotCoords.y];
	if (!trace) {
	return; // Misclick, likely.
	}
	const blamelist = this._computeBlamelist(trace, dotCoords.x);
	if (!blamelist) {
	return; // No blamelist if there's no dot at that X coord, i.e. misclick.
	}
	this.dispatchEvent(new CustomEvent('showblamelist', {
	bubbles: true,
	detail: blamelist,
	}));
	}

	// Takes a trace and the X coordinate of a dot in that trace and returns the
	// blamelist for that dot. The blamelist includes the commit corresponding to
	// the dot, and if the dot is preceded by any missing dots, then their
	// corresponding commits will be included as well.
	_computeBlamelist(trace, x) {
	if (trace.data[x] === MISSING_DOT) {
	// Can happen if there's no dot at that X coord, e.g. misclick.
	return null;
	}
	// Look backwards in the trace for the previous commit with data. If none,
	// 0 is a fine index to compute the blamelist from.
	let lastNonMissingIndex = 0;
	for (let i = x - 1; i >= 0; i--) {
	if (trace.data[i] !== MISSING_DOT) {
	// We include the last non-missing data in our slice because the slice of commits that
	// Gold returns is not the complete history - Gold elides commits that have no data.
	// This is potentially a problem in the following scenario:
	// - commit 1 has correct data
	// - commit 2 has correct data
	// - commit 3 has no data, but introduced a bug (and would have produced incorrect data)
	// - commit 4 has incorrect data
	// In this case, we need to make sure we can create a blamelist that starts on the first
	// real commit after commit 2. Therefore, we include commit 2 in the list, which GitHub
	// and googlesource will automatically elide when we ask for a range of history (in
	// blamelist-panel-sk). If there were no preceding missing digests, this will equal x-1.
	lastNonMissingIndex = i;
	break;
	}
	}
	const blamelist = this._commits.slice(lastNonMissingIndex, x + 1);
	blamelist.reverse();
	return blamelist;
	}
	});