chore(revert): "add listener to repaint on visibility change for canv…

…as" (#28654)

superset-frontend/package.json

@@ -316,7 +316,6 @@
     "ignore-styles": "^5.0.1",
     "imports-loader": "^3.1.1",
     "jest": "^26.6.3",
-    "jest-canvas-mock": "^2.5.2",
     "jest-environment-enzyme": "^7.1.2",
     "jest-enzyme": "^7.1.2",
     "jest-websocket-mock": "^2.2.0",

superset-frontend/src/dashboard/components/Dashboard.jsx

@@ -90,8 +90,6 @@ class Dashboard extends React.PureComponent {
     this.appliedFilters = props.activeFilters ?? {};
     this.appliedOwnDataCharts = props.ownDataCharts ?? {};
     this.onVisibilityChange = this.onVisibilityChange.bind(this);
-    this.handleVisibilityChange = this.handleVisibilityChange.bind(this);
-    this.repaintCanvas = this.repaintCanvas.bind(this);
   }
 
   componentDidMount() {
@@ -194,41 +192,20 @@ class Dashboard extends React.PureComponent {
     this.props.actions.clearDataMaskState();
   }
 
-  repaintCanvas(canvas, ctx, imageBitmap) {
-    // Clear the canvas
-    ctx.clearRect(0, 0, canvas.width, canvas.height);
-
-    // Draw the copied content
-    ctx.drawImage(imageBitmap, 0, 0);
-  }
-
-  handleVisibilityChange() {
-    this.canvases.forEach(canvas => {
-      const ctx = canvas.getContext('2d');
-      createImageBitmap(canvas).then(imageBitmap => {
-        // Call the repaintCanvas function with canvas, ctx, and imageBitmap
-        this.repaintCanvas(canvas, ctx, imageBitmap);
-      });
-    });
-  }
-
   onVisibilityChange() {
     if (document.visibilityState === 'hidden') {
       // from visible to hidden
       this.visibilityEventData = {
         start_offset: Logger.getTimestamp(),
         ts: new Date().getTime(),
       };
-      this.canvases = document.querySelectorAll('canvas');
     } else if (document.visibilityState === 'visible') {
       // from hidden to visible
       const logStart = this.visibilityEventData.start_offset;
       this.props.actions.logEvent(LOG_ACTIONS_HIDE_BROWSER_TAB, {
         ...this.visibilityEventData,
         duration: Logger.getTimestamp() - logStart,
       });
-      // for chrome to ensure that the canvas doesn't disappear
-      this.handleVisibilityChange();
     }
   }
 

superset-frontend/src/dashboard/components/Dashboard.test.jsx

@@ -19,7 +19,6 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import sinon from 'sinon';
-import 'jest-canvas-mock';
 
 import Dashboard from 'src/dashboard/components/Dashboard';
 import { CHART_TYPE } from 'src/dashboard/util/componentTypes';
@@ -39,7 +38,6 @@ import { dashboardLayout } from 'spec/fixtures/mockDashboardLayout';
 import dashboardState from 'spec/fixtures/mockDashboardState';
 import { sliceEntitiesForChart as sliceEntities } from 'spec/fixtures/mockSliceEntities';
 import { getAllActiveFilters } from 'src/dashboard/util/activeAllDashboardFilters';
-import { Logger, LOG_ACTIONS_HIDE_BROWSER_TAB } from '../../logger/LogUtils';
 
 describe('Dashboard', () => {
   const props = {
@@ -247,136 +245,5 @@ describe('Dashboard', () => {
       expect(refreshSpy.callCount).toBe(1);
       expect(refreshSpy.getCall(0).args[0]).toEqual([]);
     });
-
-    // The canvas is cleared using the clearRect method.
-    it('should clear the canvas using clearRect method', () => {
-      // Arrange
-      const canvas = document.createElement('canvas');
-      const ctx = canvas.getContext('2d');
-      const imageBitmap = new ImageBitmap(100, 100);
-
-      // Act
-      wrapper.instance().repaintCanvas(canvas, ctx, imageBitmap);
-
-      // Assert
-      expect(ctx.clearRect).toHaveBeenCalledWith(
-        0,
-        0,
-        canvas.width,
-        canvas.height,
-      );
-    });
-
-    // The canvas width and height are 0.
-    it('should recreate the canvas with the same dimensions', () => {
-      // Arrange
-      const canvas = document.createElement('canvas');
-      const ctx = canvas.getContext('2d');
-      const imageBitmap = new ImageBitmap(100, 100);
-
-      // Act
-      wrapper.instance().repaintCanvas(canvas, ctx, imageBitmap);
-
-      // Assert
-      const { width, height } = ctx.canvas;
-      expect(canvas.width).toBe(width);
-      expect(canvas.height).toBe(height);
-    });
-
-    // When the document visibility state changes to 'hidden', the method sets the 'visibilityEventData' object with a 'start_offset' and 'ts' properties, and queries all canvas elements on the page and stores them in the 'canvases' property.
-    it('should set visibilityEventData and canvases when document visibility state changes to "hidden"', () => {
-      // Initialize the class object with props
-      const props = {
-        activeFilters: {},
-        ownDataCharts: {},
-        actions: {
-          logEvent: jest.fn(),
-        },
-        layout: {},
-        dashboardInfo: {},
-        dashboardState: {
-          editMode: false,
-          isPublished: false,
-          hasUnsavedChanges: false,
-        },
-        chartConfiguration: {},
-      };
-
-      const DATE_TO_USE = new Date('2020');
-      const OrigDate = Date;
-      global.Date = jest.fn(() => DATE_TO_USE);
-      global.Date.UTC = OrigDate.UTC;
-      global.Date.parse = OrigDate.parse;
-      global.Date.now = OrigDate.now;
-
-      // Your test code here
-
-      const dashboard = new Dashboard(props);
-
-      // Mock the return value of document.visibilityState
-      jest.spyOn(document, 'visibilityState', 'get').mockReturnValue('hidden');
-      // mock Logger.getTimestamp() to return a fixed value
-      jest.spyOn(Logger, 'getTimestamp').mockReturnValue(1234567890);
-
-      // Invoke the method
-      dashboard.onVisibilityChange();
-
-      // Assert that visibilityEventData is set correctly
-      expect(dashboard.visibilityEventData).toEqual({
-        start_offset: 1234567890,
-        ts: DATE_TO_USE.getTime(),
-      });
-
-      // Assert that canvases are queried correctly
-      expect(dashboard.canvases).toEqual(expect.any(NodeList));
-
-      // Restore the original implementation of document.visibilityState
-      jest.restoreAllMocks();
-      // After your test
-      global.Date = OrigDate;
-    });
-
-    // When the document visibility state changes to 'visible', the method logs an event and calls the 'handleVisibilityChange' method.
-    it('should log an event and call handleVisibilityChange when document visibility state changes to "visible"', () => {
-      // Initialize the class object
-      const dashboard = new Dashboard({ activeFilters: {} });
-
-      // Mock the props and actions
-      dashboard.props = {
-        actions: {
-          logEvent: jest.fn(),
-        },
-      };
-
-      // Mock the visibilityEventData
-      dashboard.visibilityEventData = {
-        start_offset: 123,
-        ts: 456,
-      };
-
-      // Mock the handleVisibilityChange method
-      dashboard.handleVisibilityChange = jest.fn();
-
-      // Mock the document.visibilityState property
-      jest.spyOn(document, 'visibilityState', 'get').mockReturnValue('visible');
-
-      // Invoke the method
-      dashboard.onVisibilityChange();
-
-      // Assert that logEvent is called with the correct arguments
-      expect(dashboard.props.actions.logEvent).toHaveBeenCalledWith(
-        LOG_ACTIONS_HIDE_BROWSER_TAB,
-        {
-          ...dashboard.visibilityEventData,
-          duration: expect.any(Number),
-        },
-      );
-
-      // Assert that handleVisibilityChange is called
-      expect(dashboard.handleVisibilityChange).toHaveBeenCalled();
-
-      // Restore the original implementation of document.visibilityState
-      jest.restoreAllMocks();
-    });
   });
 });