perf/modules/plot-summary-sk/plot-summary-sk.ts - buildbot - Git at Google

 /**
  * @module modules/plot-summary-sk
  * @description <h2><code>plot-summary-sk</code></h2>
  *
  * @evt summary_selected - Event produced when the user selects a section on the summary.
  *
  * @attr
  *
  * @example
  */
 import '@google-web-components/google-chart';
 import '../dataframe/dataframe_context';

 import { GoogleChart } from '@google-web-components/google-chart';
 import { html, LitElement, PropertyValues } from 'lit';
 import { ref, createRef } from 'lit/directives/ref.js';
 import { define } from '../../../elements-sk/modules/define';
 import { MousePosition, Point } from '../plot-simple-sk/plot-simple-sk';
 import {
   SummaryChartOptions,
   convertFromDataframe,
 } from '../common/plot-builder';
 import { ColumnHeader, DataFrame } from '../json';
 import { property } from 'lit/decorators.js';
 import { style } from './plot-summary-sk.css';

 // Describes the zoom in terms of x-axis source values.
 export type ZoomRange = [number, number] | null;

 export interface PlotSummarySkSelectionEventDetails {
   start: number;
   end: number;
   valueStart: number | Date;
   valueEnd: number | Date;
   domain: 'commit' | 'date';
 }

 export class PlotSummarySk extends LitElement {
   static styles = style;

   @property({ reflect: true })
   domain: 'commit' | 'date' = 'commit';

   @property({ attribute: false })
   dataframe?: DataFrame;

   @property({ attribute: true })
   selectedTrace: string | null = null;

   // The current selected value saved for re-adjusting selection box.
   // The google chart reloads and redraws themselves asynchronously, we need to
   // save the selection range and apply it after we received the `ready` event.
   private _selectedValueRange: {
     begin: ColumnHeader;
     end: ColumnHeader;
   } | null = null;

   constructor() {
     super();
     this.addEventListeners();
   }

   protected willUpdate(changedProperties: PropertyValues): void {
     if (
       changedProperties.has('dataframe') ||
       changedProperties.has('selectedTrace') ||
       changedProperties.has('domain')
     ) {
       this.updateDataframe(this.dataframe!, this.selectedTrace);
     }
   }

   private async updateDataframe(df: DataFrame | null, trace: string | null) {
     const plot = this.plotElement.value;
     if (!plot) {
       if (df) {
         console.warn(
           'The dataframe is not assigned because the element is not ready. Try call `await this.updateComplete` first.'
         );
       }
       return;
     }

     const rows = convertFromDataframe(
       df,
       this.domain,
       trace || Object.keys(df?.traceset || {})[0]
     );
     if (rows) {
       plot.data = rows;
       plot.options = SummaryChartOptions(getComputedStyle(this), this.domain);
     }
   }

   // The div element that will host the plot on the summary.
   private plotElement = createRef<GoogleChart>();

   protected render() {
     return html`
       <div class="container">
         <google-chart
           ${ref(this.plotElement)}
           class="plot"
           type="line"
           @google-chart-ready=${this.onGoogleChartReady}>
         </google-chart>
         </google-chart>
         <canvas
           ${ref(this.overlayCanvas)}
           class="overlay"
           @mousedown=${this.mouseDownListener}
           @mousemove=${this.mouseMoveListener}
           @mouseleave=${this.mouseUpListener}
           @mouseup=${this.mouseUpListener}>
         </canvas>
       </div>
     `;
   }

   connectedCallback() {
     super.connectedCallback();
     const resizeObserver = new ResizeObserver(
       (entries: ResizeObserverEntry[]) => {
         entries.forEach(() => {
           // The google chart needs to redraw when it is resized.
           this.plotElement.value?.redraw();
           this.requestUpdate();
         });
       }
     );
     resizeObserver.observe(this);
   }

   private onGoogleChartReady() {
     // Update the selectionBox because the chart might get updated.
     if (!this._selectedValueRange) {
       this.clearSelection();
       return;
     }
     this.Select(this._selectedValueRange.begin, this._selectedValueRange.end);
   }

   protected firstUpdated(_changedProperties: PropertyValues): void {
     if (!this.overlayCanvas.value) {
       return;
     }

     const resizeObserver = new ResizeObserver(
       (entries: ResizeObserverEntry[]) => {
         entries.forEach((entry) => {
           if (entry.target !== this.overlayCanvas.value) {
             return;
           }

           // We need to resize the canvas after its bounding rect is changed,
           const boundingRect = entry.contentRect;
           this.overlayCanvas.value!.width = boundingRect!.width;
           this.overlayCanvas.value!.height = boundingRect!.height;
           this.overlayCtx!.globalAlpha = 0.5;
         });
       }
     );
     resizeObserver.observe(this.overlayCanvas.value!);

     // globalAlpha denotes the transparency of the fill. Setting this to 50%
     // allows us to show the highlight plus the portion of the plot highlighted.
     this.overlayCtx!.globalAlpha = 0.5;

     this.drawSummaryRect();
     requestAnimationFrame(() => this.raf());
   }

   // Select the provided range on the plot-summary.
   public Select(begin: ColumnHeader, end: ColumnHeader) {
     const isCommitScale = this.domain === 'commit';
     const col = isCommitScale ? 'offset' : 'timestamp';

     const chart = this.chartLayout;
     const startX = chart?.getXLocation(
       isCommitScale ? begin[col] : (new Date(begin[col] * 1000) as any)
     );
     const endX = chart?.getXLocation(
       isCommitScale ? end[col] : (new Date(end[col] * 1000) as any)
     );
     this.selectionRange = [startX || 0, endX || 0];
     this._selectedValueRange = { begin, end };
     this.drawSelection();
   }

   // Get the underlying ChartLayoutInterface.
   // This provides API to inspect the traces and coordinates.
   private get chartLayout(): google.visualization.ChartLayoutInterface | null {
     const gchart = this.plotElement.value;
     if (!gchart) {
       return null;
     }
     const wrapper = gchart['chartWrapper'] as google.visualization.ChartWrapper;
     if (!wrapper) {
       return null;
     }
     const chart = wrapper.getChart();
     return (
       chart &&
       (chart as google.visualization.CoreChartBase).getChartLayoutInterface()
     );
   }

   // Add all the event listeners.
   private addEventListeners(): void {
     // If the user toggles the theme to/from darkmode then redraw.
     document.addEventListener('theme-chooser-toggle', () => {
       // Update the options to trigger the redraw.
       if (this.plotElement.value && this.dataframe) {
         this.plotElement.value!.options = SummaryChartOptions(
           getComputedStyle(this),
           this.domain
         );
       }
       this.requestUpdate();
     });
   }

   // ======== Selection using Canvas =========
   // Below is using the canvas to track and draw user selections.
   // This gives us ability to draw our own stylish UIs and also requires to
   // manage user interaction ourselves. The canvas does require a bit more
   // frequent update and draws than native HTML elements w/o optimizations.
   private get overlayCtx() {
     return this.overlayCanvas.value?.getContext('2d');
   }

   // Array denoting the start and end points of the current selection.
   private selectionRange: ZoomRange = null;

   // Array denoting the diffs between the currently clicked point and
   // the start and end points of the current selection. This is used
   // to maintain the size of the selection when user drags it left/right.
   private lockedSelectionDiffs: [number, number] | null = null;

   // Denotes if the user is currently making a selection.
   private isCurrentlySelecting: boolean = false;

   // Tracks the mouse position.
   private currentMousePosition: MousePosition | null = null;

   // The canvas element that is used for the selection overlay.
   private overlayCanvas = createRef<HTMLCanvasElement>();

   // Clear the current selection.
   private clearSelection(): void {
     this.overlayCtx?.clearRect(
       0,
       0,
       this.overlayCanvas.value?.width || 0,
       this.overlayCanvas.value?.height || 0
     );
   }

   // Listener for the mouse down event.
   private mouseDownListener(e: MouseEvent) {
     e.preventDefault();
     const point = this.eventToCanvasPt(e);

     this.currentMousePosition = point;

     if (this.inSelectedArea({ x: point.clientX, y: point.clientY })) {
       // Implement the drag functionality to drag the selected area around.
       // This means the user is dragging the current selection around.
       // Let's get the left and right diffs between the current mouse position
       // and the ends of the selection range. As the mouse moves, we will update
       // the selection range so that these diffs remain constant.
       const leftDiff =
         this.currentMousePosition.clientX - this.selectionRange![0];
       const rightDiff =
         this.selectionRange![1] - this.currentMousePosition.clientX;
       this.lockedSelectionDiffs = [leftDiff, rightDiff];
     } else {
       // User is starting a new selection.
       this.selectionRange = [point.clientX, point.clientX + 0.1];
       this.isCurrentlySelecting = true;
     }
   }

   // Listener for the mouse up event.
   private mouseUpListener() {
     // Releasing the mouse means selection/dragging is done.
     this.isCurrentlySelecting = false;
     this.lockedSelectionDiffs = null;
     this.summarySelected();
   }

   private summarySelected() {
     if (this.selectionRange !== null) {
       const start =
         this.chartLayout?.getHAxisValue(this.selectionRange[0]) || 0;
       const end = this.chartLayout?.getHAxisValue(this.selectionRange[1]) || 0;
       this.dispatchEvent(
         new CustomEvent<PlotSummarySkSelectionEventDetails>(
           'summary_selected',
           {
             detail: {
               start: this.selectionRange[0],
               end: this.selectionRange[1],
               valueStart:
                 this.domain === 'date'
                   ? (start as any).getTime() / 1000
                   : start,
               valueEnd:
                 this.domain === 'date' ? (end as any).getTime() / 1000 : end,
               domain: this.domain,
             },
             bubbles: true,
           }
         )
       );
     }
   }

   // Listener for the mouse move event.
   private mouseMoveListener(e: MouseEvent) {
     // Keep track of the user's mouse movements.
     const point = this.eventToCanvasPt(e);
     this.currentMousePosition = point;
   }

   // Draw the summary rectangle outline.
   private drawSummaryRect(): void {
     if (!this.overlayCanvas) {
       return;
     }
     const style = getComputedStyle(this);
     this.overlayCtx!.lineWidth = 3.0;
     this.overlayCtx!.strokeStyle = style.color;
     this.overlayCtx!.strokeRect(0, 0, this.width, this.height);
     this.overlayCtx!.save();
   }

   /** Mirrors the width attribute. */
   get width(): number {
     return this.getBoundingClientRect().width;
   }

   /** Mirrors the height attribute. */
   get height(): number {
     return this.getBoundingClientRect().height;
   }

   // Converts an event to a specific point
   private eventToCanvasPt(e: MousePosition) {
     const clientRect = this.plotElement.value!.getBoundingClientRect();
     return {
       clientX: e.clientX - clientRect!.left,
       clientY: e.clientY - clientRect!.top,
     };
   }

   // Draws the selection area.
   private drawSelection(): void {
     this.clearSelection();
     if (this.overlayCanvas.value && this.selectionRange !== null) {
       // Draw left line.
       const startx = this.selectionRange[0];
       this.drawVerticalLineAtPosition(startx);
       // Draw the right line.
       const endx = this.selectionRange[1];
       this.drawVerticalLineAtPosition(endx);

       // Shade the selected section.
       this.overlayCtx!.beginPath();
       this.overlayCtx!.fillStyle = getComputedStyle(this).getPropertyValue(
         '--sk-summary-highlight'
       );
       this.overlayCtx!.rect(startx, 0, endx - startx, this.height);
       this.overlayCtx!.fill();
     }
   }

   // Draw a vertical line at the given position
   private drawVerticalLineAtPosition(x: number) {
     // Start at the bottom of the rectangle
     this.overlayCtx!.moveTo(x, 0);
     this.overlayCtx!.lineTo(x, this.height);
     this.overlayCtx!.stroke();
   }

   // Handles the animation depending on the current state.
   private raf() {
     // Always queue up our next raf first.
     window.requestAnimationFrame(() => this.raf());

     // Exit early if there is no ongoing activity.
     if (this.currentMousePosition === null) {
       return;
     }

     if (this.isCurrentlySelecting) {
       // If the user is currently selecting an area, update the selection range
       // array based on the current mouse position.
       let startx = this.selectionRange![0];
       let endx = this.selectionRange![1];
       const currentx = this.currentMousePosition.clientX;

       // Figure out the closest end of the selection to the current position.
       // This tells us the direction in which the user is highlighting.
       const isMovingOnLeft =
         Math.abs(currentx - startx) < Math.abs(currentx - endx);
       if (isMovingOnLeft) {
         // If the mouse is towards the left side, we update the start values.
         startx = currentx;
       } else {
         // If the mouse is towards the right, we update the end values.
         endx = currentx;
       }
       this.selectionRange![0] = startx;
       this.selectionRange![1] = endx;
     } else if (this.lockedSelectionDiffs !== null) {
       // User is dragging the current selection around.
       // Update the selectionRange with the values that keeps these
       // diffs constant wrt the current mouse position. Also account for the fact
       // that the user may drag the selected area beyond the bounds of the rendered rect.
       this.selectionRange![0] = Math.max(
         0,
         this.currentMousePosition.clientX - this.lockedSelectionDiffs![0]
       );
       this.selectionRange![1] = Math.min(
         this.width,
         this.currentMousePosition.clientX + this.lockedSelectionDiffs![1]
       );
     }

     this.drawSelection();
   }

   // Checks if a point is inside the selected area.
   private inSelectedArea(pt: Point): boolean {
     if (this.selectionRange === null) {
       return false;
     }

     return pt.x >= this.selectionRange[0] && pt.x < this.selectionRange[1];
   }
 }

 define('plot-summary-sk', PlotSummarySk);

 declare global {
   interface HTMLElementTagNameMap {
     'plot-summary-sk': PlotSummarySk;
   }

   interface GlobalEventHandlersEventMap {
     summary_selected: CustomEvent<PlotSummarySkSelectionEventDetails>;
   }
 }
	/**
	* @module modules/plot-summary-sk
	* @description <h2><code>plot-summary-sk</code></h2>
	*
	* @evt summary_selected - Event produced when the user selects a section on the summary.
	*
	* @attr
	*
	* @example
	*/
	import '@google-web-components/google-chart';
	import '../dataframe/dataframe_context';

	import { GoogleChart } from '@google-web-components/google-chart';
	import { html, LitElement, PropertyValues } from 'lit';
	import { ref, createRef } from 'lit/directives/ref.js';
	import { define } from '../../../elements-sk/modules/define';
	import { MousePosition, Point } from '../plot-simple-sk/plot-simple-sk';
	import {
	SummaryChartOptions,
	convertFromDataframe,
	} from '../common/plot-builder';
	import { ColumnHeader, DataFrame } from '../json';
	import { property } from 'lit/decorators.js';
	import { style } from './plot-summary-sk.css';

	// Describes the zoom in terms of x-axis source values.
	export type ZoomRange = [number, number] \| null;

	export interface PlotSummarySkSelectionEventDetails {
	start: number;
	end: number;
	valueStart: number \| Date;
	valueEnd: number \| Date;
	domain: 'commit' \| 'date';
	}

	export class PlotSummarySk extends LitElement {
	static styles = style;

	@property({ reflect: true })
	domain: 'commit' \| 'date' = 'commit';

	@property({ attribute: false })
	dataframe?: DataFrame;

	@property({ attribute: true })
	selectedTrace: string \| null = null;

	// The current selected value saved for re-adjusting selection box.
	// The google chart reloads and redraws themselves asynchronously, we need to
	// save the selection range and apply it after we received the `ready` event.
	private _selectedValueRange: {
	begin: ColumnHeader;
	end: ColumnHeader;
	} \| null = null;

	constructor() {
	super();
	this.addEventListeners();
	}

	protected willUpdate(changedProperties: PropertyValues): void {
	if (
	changedProperties.has('dataframe') \|\|
	changedProperties.has('selectedTrace') \|\|
	changedProperties.has('domain')
	) {
	this.updateDataframe(this.dataframe!, this.selectedTrace);
	}
	}

	private async updateDataframe(df: DataFrame \| null, trace: string \| null) {
	const plot = this.plotElement.value;
	if (!plot) {
	if (df) {
	console.warn(
	'The dataframe is not assigned because the element is not ready. Try call `await this.updateComplete` first.'
	);
	}
	return;
	}

	const rows = convertFromDataframe(
	df,
	this.domain,
	trace \|\| Object.keys(df?.traceset \|\| {})[0]
	);
	if (rows) {
	plot.data = rows;
	plot.options = SummaryChartOptions(getComputedStyle(this), this.domain);
	}
	}

	// The div element that will host the plot on the summary.
	private plotElement = createRef<GoogleChart>();

	protected render() {
	return html`
	<div class="container">
	<google-chart
	${ref(this.plotElement)}
	class="plot"
	type="line"
	@google-chart-ready=${this.onGoogleChartReady}>
	</google-chart>
	</google-chart>
	<canvas
	${ref(this.overlayCanvas)}
	class="overlay"
	@mousedown=${this.mouseDownListener}
	@mousemove=${this.mouseMoveListener}
	@mouseleave=${this.mouseUpListener}
	@mouseup=${this.mouseUpListener}>
	</canvas>
	</div>
	`;
	}

	connectedCallback() {
	super.connectedCallback();
	const resizeObserver = new ResizeObserver(
	(entries: ResizeObserverEntry[]) => {
	entries.forEach(() => {
	// The google chart needs to redraw when it is resized.
	this.plotElement.value?.redraw();
	this.requestUpdate();
	});
	}
	);
	resizeObserver.observe(this);
	}

	private onGoogleChartReady() {
	// Update the selectionBox because the chart might get updated.
	if (!this._selectedValueRange) {
	this.clearSelection();
	return;
	}
	this.Select(this._selectedValueRange.begin, this._selectedValueRange.end);
	}

	protected firstUpdated(_changedProperties: PropertyValues): void {
	if (!this.overlayCanvas.value) {
	return;
	}

	const resizeObserver = new ResizeObserver(
	(entries: ResizeObserverEntry[]) => {
	entries.forEach((entry) => {
	if (entry.target !== this.overlayCanvas.value) {
	return;
	}

	// We need to resize the canvas after its bounding rect is changed,
	const boundingRect = entry.contentRect;
	this.overlayCanvas.value!.width = boundingRect!.width;
	this.overlayCanvas.value!.height = boundingRect!.height;
	this.overlayCtx!.globalAlpha = 0.5;
	});
	}
	);
	resizeObserver.observe(this.overlayCanvas.value!);

	// globalAlpha denotes the transparency of the fill. Setting this to 50%
	// allows us to show the highlight plus the portion of the plot highlighted.
	this.overlayCtx!.globalAlpha = 0.5;

	this.drawSummaryRect();
	requestAnimationFrame(() => this.raf());
	}

	// Select the provided range on the plot-summary.
	public Select(begin: ColumnHeader, end: ColumnHeader) {
	const isCommitScale = this.domain === 'commit';
	const col = isCommitScale ? 'offset' : 'timestamp';

	const chart = this.chartLayout;
	const startX = chart?.getXLocation(
	isCommitScale ? begin[col] : (new Date(begin[col] * 1000) as any)
	);
	const endX = chart?.getXLocation(
	isCommitScale ? end[col] : (new Date(end[col] * 1000) as any)
	);
	this.selectionRange = [startX \|\| 0, endX \|\| 0];
	this._selectedValueRange = { begin, end };
	this.drawSelection();
	}

	// Get the underlying ChartLayoutInterface.
	// This provides API to inspect the traces and coordinates.
	private get chartLayout(): google.visualization.ChartLayoutInterface \| null {
	const gchart = this.plotElement.value;
	if (!gchart) {
	return null;
	}
	const wrapper = gchart['chartWrapper'] as google.visualization.ChartWrapper;
	if (!wrapper) {
	return null;
	}
	const chart = wrapper.getChart();
	return (
	chart &&
	(chart as google.visualization.CoreChartBase).getChartLayoutInterface()
	);
	}

	// Add all the event listeners.
	private addEventListeners(): void {
	// If the user toggles the theme to/from darkmode then redraw.
	document.addEventListener('theme-chooser-toggle', () => {
	// Update the options to trigger the redraw.
	if (this.plotElement.value && this.dataframe) {
	this.plotElement.value!.options = SummaryChartOptions(
	getComputedStyle(this),
	this.domain
	);
	}
	this.requestUpdate();
	});
	}

	// ======== Selection using Canvas =========
	// Below is using the canvas to track and draw user selections.
	// This gives us ability to draw our own stylish UIs and also requires to
	// manage user interaction ourselves. The canvas does require a bit more
	// frequent update and draws than native HTML elements w/o optimizations.
	private get overlayCtx() {
	return this.overlayCanvas.value?.getContext('2d');
	}

	// Array denoting the start and end points of the current selection.
	private selectionRange: ZoomRange = null;

	// Array denoting the diffs between the currently clicked point and
	// the start and end points of the current selection. This is used
	// to maintain the size of the selection when user drags it left/right.
	private lockedSelectionDiffs: [number, number] \| null = null;

	// Denotes if the user is currently making a selection.
	private isCurrentlySelecting: boolean = false;

	// Tracks the mouse position.
	private currentMousePosition: MousePosition \| null = null;

	// The canvas element that is used for the selection overlay.
	private overlayCanvas = createRef<HTMLCanvasElement>();

	// Clear the current selection.
	private clearSelection(): void {
	this.overlayCtx?.clearRect(
	0,
	0,
	this.overlayCanvas.value?.width \|\| 0,
	this.overlayCanvas.value?.height \|\| 0
	);
	}

	// Listener for the mouse down event.
	private mouseDownListener(e: MouseEvent) {
	e.preventDefault();
	const point = this.eventToCanvasPt(e);

	this.currentMousePosition = point;

	if (this.inSelectedArea({ x: point.clientX, y: point.clientY })) {
	// Implement the drag functionality to drag the selected area around.
	// This means the user is dragging the current selection around.
	// Let's get the left and right diffs between the current mouse position
	// and the ends of the selection range. As the mouse moves, we will update
	// the selection range so that these diffs remain constant.
	const leftDiff =
	this.currentMousePosition.clientX - this.selectionRange![0];
	const rightDiff =
	this.selectionRange![1] - this.currentMousePosition.clientX;
	this.lockedSelectionDiffs = [leftDiff, rightDiff];
	} else {
	// User is starting a new selection.
	this.selectionRange = [point.clientX, point.clientX + 0.1];
	this.isCurrentlySelecting = true;
	}
	}

	// Listener for the mouse up event.
	private mouseUpListener() {
	// Releasing the mouse means selection/dragging is done.
	this.isCurrentlySelecting = false;
	this.lockedSelectionDiffs = null;
	this.summarySelected();
	}

	private summarySelected() {
	if (this.selectionRange !== null) {
	const start =
	this.chartLayout?.getHAxisValue(this.selectionRange[0]) \|\| 0;
	const end = this.chartLayout?.getHAxisValue(this.selectionRange[1]) \|\| 0;
	this.dispatchEvent(
	new CustomEvent<PlotSummarySkSelectionEventDetails>(
	'summary_selected',
	{
	detail: {
	start: this.selectionRange[0],
	end: this.selectionRange[1],
	valueStart:
	this.domain === 'date'
	? (start as any).getTime() / 1000
	: start,
	valueEnd:
	this.domain === 'date' ? (end as any).getTime() / 1000 : end,
	domain: this.domain,
	},
	bubbles: true,
	}
	)
	);
	}
	}

	// Listener for the mouse move event.
	private mouseMoveListener(e: MouseEvent) {
	// Keep track of the user's mouse movements.
	const point = this.eventToCanvasPt(e);
	this.currentMousePosition = point;
	}

	// Draw the summary rectangle outline.
	private drawSummaryRect(): void {
	if (!this.overlayCanvas) {
	return;
	}
	const style = getComputedStyle(this);
	this.overlayCtx!.lineWidth = 3.0;
	this.overlayCtx!.strokeStyle = style.color;
	this.overlayCtx!.strokeRect(0, 0, this.width, this.height);
	this.overlayCtx!.save();
	}

	/** Mirrors the width attribute. */
	get width(): number {
	return this.getBoundingClientRect().width;
	}

	/** Mirrors the height attribute. */
	get height(): number {
	return this.getBoundingClientRect().height;
	}

	// Converts an event to a specific point
	private eventToCanvasPt(e: MousePosition) {
	const clientRect = this.plotElement.value!.getBoundingClientRect();
	return {
	clientX: e.clientX - clientRect!.left,
	clientY: e.clientY - clientRect!.top,
	};
	}

	// Draws the selection area.
	private drawSelection(): void {
	this.clearSelection();
	if (this.overlayCanvas.value && this.selectionRange !== null) {
	// Draw left line.
	const startx = this.selectionRange[0];
	this.drawVerticalLineAtPosition(startx);
	// Draw the right line.
	const endx = this.selectionRange[1];
	this.drawVerticalLineAtPosition(endx);

	// Shade the selected section.
	this.overlayCtx!.beginPath();
	this.overlayCtx!.fillStyle = getComputedStyle(this).getPropertyValue(
	'--sk-summary-highlight'
	);
	this.overlayCtx!.rect(startx, 0, endx - startx, this.height);
	this.overlayCtx!.fill();
	}
	}

	// Draw a vertical line at the given position
	private drawVerticalLineAtPosition(x: number) {
	// Start at the bottom of the rectangle
	this.overlayCtx!.moveTo(x, 0);
	this.overlayCtx!.lineTo(x, this.height);
	this.overlayCtx!.stroke();
	}

	// Handles the animation depending on the current state.
	private raf() {
	// Always queue up our next raf first.
	window.requestAnimationFrame(() => this.raf());

	// Exit early if there is no ongoing activity.
	if (this.currentMousePosition === null) {
	return;
	}

	if (this.isCurrentlySelecting) {
	// If the user is currently selecting an area, update the selection range
	// array based on the current mouse position.
	let startx = this.selectionRange![0];
	let endx = this.selectionRange![1];
	const currentx = this.currentMousePosition.clientX;

	// Figure out the closest end of the selection to the current position.
	// This tells us the direction in which the user is highlighting.
	const isMovingOnLeft =
	Math.abs(currentx - startx) < Math.abs(currentx - endx);
	if (isMovingOnLeft) {
	// If the mouse is towards the left side, we update the start values.
	startx = currentx;
	} else {
	// If the mouse is towards the right, we update the end values.
	endx = currentx;
	}
	this.selectionRange![0] = startx;
	this.selectionRange![1] = endx;
	} else if (this.lockedSelectionDiffs !== null) {
	// User is dragging the current selection around.
	// Update the selectionRange with the values that keeps these
	// diffs constant wrt the current mouse position. Also account for the fact
	// that the user may drag the selected area beyond the bounds of the rendered rect.
	this.selectionRange![0] = Math.max(
	0,
	this.currentMousePosition.clientX - this.lockedSelectionDiffs![0]
	);
	this.selectionRange![1] = Math.min(
	this.width,
	this.currentMousePosition.clientX + this.lockedSelectionDiffs![1]
	);
	}

	this.drawSelection();
	}

	// Checks if a point is inside the selected area.
	private inSelectedArea(pt: Point): boolean {
	if (this.selectionRange === null) {
	return false;
	}

	return pt.x >= this.selectionRange[0] && pt.x < this.selectionRange[1];
	}
	}

	define('plot-summary-sk', PlotSummarySk);

	declare global {
	interface HTMLElementTagNameMap {
	'plot-summary-sk': PlotSummarySk;
	}

	interface GlobalEventHandlersEventMap {
	summary_selected: CustomEvent<PlotSummarySkSelectionEventDetails>;
	}
	}