Store and reuse selection in between draws (#1243)

When the gchart redraws (either from resizing the window or the parent
encompassing component redraws it), it drops the selected data points.

This change fixes that.

Author: jcscottiii

frontend/src/static/js/components/test/webstatus-gchart.test.ts

@@ -63,6 +63,8 @@ describe('webstatus-gchart', () => {
       'webstatus-gchart',
     ) as WebstatusGChart;
 
+    component.currentSelection = [{row: 0, column: 1}];
+
     await loaderComponent.updateComplete;
     await loaderComponent.waitForGChartsLibraryLoaded();
     await component.updateComplete;
@@ -77,8 +79,10 @@ describe('webstatus-gchart', () => {
   });
 
   it('redraws the chart on resize', async () => {
-    // Spy on the chartWrapper.draw method (make sure chartWrapper is initialized)
+    // Spy on the chartWrapper.draw and setSelection methods (make sure chartWrapper is initialized)
     const drawSpy = sinon.spy(component.chartWrapper!, 'draw');
+    const mockChart = sinon.createStubInstance(google.visualization.LineChart);
+    sinon.stub(component.chartWrapper!, 'getChart').returns(mockChart);
 
     // Simulate a resize
     const resizeObserverCallback = mockResizeObserver.args[0][0];
@@ -90,6 +94,7 @@ describe('webstatus-gchart', () => {
 
     // Assert that chartWrapper.draw was called
     assert.isTrue(drawSpy.calledOnce);
+    assert.isTrue(mockChart.setSelection.calledOnceWith([{row: 0, column: 1}]));
   });
 
   describe('Selection events', () => {

frontend/src/static/js/components/webstatus-gchart.ts

@@ -91,6 +91,11 @@ export class WebstatusGChart extends LitElement {
   })
   hasMax = true;
 
+  // Selected data points on the chart.
+  // If the chart ever re-draws due to resize or the encompassing component
+  // re-drawing, we need to manually set the current selection.
+  currentSelection: google.visualization.ChartSelection[] | undefined;
+
   @property({state: true, type: Object})
   dataTable:
     | google.visualization.DataTable
@@ -129,13 +134,18 @@ export class WebstatusGChart extends LitElement {
 
   private _resizeObserver: ResizeObserver | undefined;
 
+  draw() {
+    if (this.chartWrapper) {
+      this.chartWrapper.draw();
+      this.chartWrapper?.getChart()?.setSelection(this.currentSelection);
+    }
+  }
+
   firstUpdated() {
     // 1. Create the ResizeObserver
     this._resizeObserver = new ResizeObserver(() => {
       // 2. Redraw the chart when a resize occurs
-      if (this.chartWrapper) {
-        this.chartWrapper.draw();
-      }
+      this.draw();
     });
 
     // 3. Start observing the chart container element
@@ -298,13 +308,17 @@ export class WebstatusGChart extends LitElement {
         );
         this._chartClickListenerAdded = true; // Set the flag after adding the listener
       }
-      this.chartWrapper.draw();
+      this.draw();
     }
   }
   private _handleChartClick() {
     const selection = this.chartWrapper?.getChart()?.getSelection();
-    if (selection === undefined) return;
+    if (selection === undefined) {
+      this.currentSelection = undefined;
+      return;
+    }
     if (selection.length > 0) {
+      this.currentSelection = selection;
       // TODO: For now only look at the first selection since we only configure for one selection at a time.
       const item = selection[0];
       const row = item.row;
@@ -332,6 +346,7 @@ export class WebstatusGChart extends LitElement {
         this.dispatchEvent(chartClickEvent);
       }
     } else if (selection.length === 0) {
+      this.currentSelection = [];
       const chartDeselectEvent: ChartDeselectPointEvent = new CustomEvent(
         'point-deselected',
         {detail: undefined},