Superset 3.1.3: Long Dashboards render blank thumbnails unless Dashboard length is reduced about superset HOT 4 OPEN

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.

from superset.

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.

from superset.

@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

from superset.