Superset 3.1.3: Long Dashboards render blank thumbnails unless Dashboard length is reduced

[rajivpatki]

Bug description

We have several dashboards that render their thumbnails properly. For some, Playwright would only render the background of the dashboard and not the charts (we have color backgrounds using CSS for some)

When I reduce the height of charts to fit them in less than 3 page down scrolls, the thumbnail works fine, but if the length exceeds a certain amount, a blank thumbnail is rendered.

How to reproduce the bug

FEATURE_FLAGS = {
    "ENABLE_TEMPLATE_PROCESSING": True,
    "DRILL_BY": True,
    "GLOBAL_ASYNC_QUERIES": True,
    "HORIZONTAL_FILTER_BAR": True,
    "THUMBNAILS": True,
    "THUMBNAILS_SQLA_LISTENERS": True,
    "LISTVIEWS_DEFAULT_CARD_VIEW": True,
    "ALERT_REPORTS": True,
    "PLAYWRIGHT_REPORTS_AND_THUMBNAILS": True,
    "USE_ANALAGOUS_COLORS": True,
    "TAGGING_SYSTEM": False,
}
WEBDRIVER_BASEURL = f"https://subdomain.domain.com"
WEBDRIVER_BASEURL_USER_FRIENDLY = "https://subdomain.domain.com"
SCREENSHOT_LOCATE_WAIT = 1000
SCREENSHOT_LOAD_WAIT = 5000
SCREENSHOT_SELENIUM_RETRIES = 1

SCREENSHOT_PLAYWRIGHT_WAIT_EVENT = "load"
SCREENSHOT_PLAYWRIGHT_DEFAULT_TIMEOUT = int(
    timedelta(seconds = 60).total_seconds() * 1000
)

Dockerfile:

FROM apache/superset:3.1.3
RUN pip install --no-cache-dir \
    playwright \
    && playwright install-deps \
    && playwright install

1. Create a dashboard with several charts and tables that are at least 4-5 pages (on desktop) long and has 5-6 filters: one with a default value, and others that depend on a couple of the filters
2. Set filters to be horizontal

The dashboard should render a blank thumbnail:

Now remove rows from the dashboard to reduce its height or resize elements to fit them in a shorter height, the thumbnail is rendered fine:

Screenshots/recordings

No response

Superset version

3.1.3

Python version

Not applicable

Node version

Not applicable

Browser

Not applicable

Additional context

No response

Checklist

• I have searched Superset docs and Slack and didn't find a solution to my problem.
• I have searched the GitHub issue tracker and didn't find a similar bug report.
• I have checked Superset's logs for errors and if I found a relevant Python stacktrace, I included it here as text in the "additional context" section.

[dosubot]

To resolve the issue in Apache Superset version 3.1.3 where long dashboards render blank thumbnails, you can modify the DashboardCard component to handle the thumbnail fetching more effectively. Specifically, ensure that the thumbnail URL is set correctly and that the fetching process is managed properly.

Here is the relevant part of the DashboardCard component that deals with fetching and setting the thumbnail URL:

useEffect(() => {
  // fetch thumbnail only if it's not already fetched
  if (
    !fetchingThumbnail &&
    dashboard.id &&
    (thumbnailUrl === undefined || thumbnailUrl === null) &&
    isFeatureEnabled(FeatureFlag.Thumbnails)
  ) {
    // fetch thumbnail
    if (dashboard.thumbnail_url) {
      // set to empty string if null so that we don't
      // keep fetching the thumbnail
      setThumbnailUrl(dashboard.thumbnail_url || '');
      return;
    }
    setFetchingThumbnail(true);
    SupersetClient.get({
      endpoint: `/api/v1/dashboard/${dashboard.id}`,
    }).then(({ json = {} }) => {
      setThumbnailUrl(json.thumbnail_url || '');
      setFetchingThumbnail(false);
    });
  }
}, [dashboard, thumbnailUrl]);

Ensure that the thumbnailUrl is set to an empty string if the dashboard.thumbnail_url is null. This prevents repeated fetching attempts which might be causing the issue with long dashboards ^[1].

Additionally, make sure that the cover property in the ListViewCard component is correctly set to handle the absence of thumbnails:

cover={
  !isFeatureEnabled(FeatureFlag.Thumbnails) || !showThumbnails ? (
    <></>
  ) : null
}

This ensures that the component does not attempt to render a thumbnail if the feature is disabled or if thumbnails are not to be shown ^[1].

By making these adjustments, you should be able to resolve the issue with blank thumbnails for long dashboards.

To continue talking to Dosu, mention @dosu.

[rajivpatki]

@dosu
It's not that dashboard.thumbnail_url is null, it's that the thumbnail does not have any charts when it is created unless the height of the dashboard is lower than a certain value

[dosubot]

To address the issue where long dashboards render blank thumbnails in Apache Superset version 3.1.3, you can try the following steps:

1. Ensure Playwright is Properly Installed and Configured:
   Make sure the playwright package and its dependencies are correctly installed and configured in your Dockerfile:

   FROM apache/superset:3.1.3
   RUN pip install --no-cache-dir \
       playwright \
       && playwright install-deps \
       && playwright install

2. Adjust Playwright Settings:
   Increase the SCREENSHOT_PLAYWRIGHT_DEFAULT_TIMEOUT to allow more time for rendering:

   SCREENSHOT_PLAYWRIGHT_DEFAULT_TIMEOUT = int(timedelta(seconds=120).total_seconds() * 1000)

3. Simplify the Dashboard:
   Consider simplifying the dashboard by reducing the number of elements or using tabs to avoid rendering issues with long dashboards. This can help Playwright handle the rendering more effectively.

4. Modify the DashboardCard Component:
   Ensure the DashboardCard component correctly handles the fetching and setting of the thumbnail URL:

   useEffect(() => {
     if (
       !fetchingThumbnail &&
       dashboard.id &&
       (thumbnailUrl === undefined || thumbnailUrl === null) &&
       isFeatureEnabled(FeatureFlag.Thumbnails)
     ) {
       if (dashboard.thumbnail_url) {
         setThumbnailUrl(dashboard.thumbnail_url || '');
         return;
       }
       setFetchingThumbnail(true);
       SupersetClient.get({
         endpoint: `/api/v1/dashboard/${dashboard.id}`,
       }).then(({ json = {} }) => {
         setThumbnailUrl(json.thumbnail_url || '');
         setFetchingThumbnail(false);
       });
     }
   }, [dashboard, thumbnailUrl]);

5. Ensure Feature Flags are Enabled:
   Verify that the THUMBNAILS and PLAYWRIGHT_REPORTS_AND_THUMBNAILS feature flags are enabled in your superset/config.py file:

   DEFAULT_FEATURE_FLAGS: dict[str, bool] = {
       ...
       "THUMBNAILS": True,
       "PLAYWRIGHT_REPORTS_AND_THUMBNAILS": True,
       ...
   }

By following these steps, you should be able to resolve the issue with blank thumbnails for long dashboards ^[1][2].

To continue talking to Dosu, mention @dosu.

[rajivpatki]

I seem to have narrowed down the element causing this. This issue occurs if there is a table with more than 100 rows of data on the dashboard. Limiting the output to 100 renders the thumbnail properly:

Enabling Pagination does not fix this. But Server-side pagination with 100 page length does.