Black screen on sankey and heatmaps

[jasonshah]

Make sure these boxes are checked before submitting your issue - thank you!

• I have checked the superset logs for python stacktraces and included it here as text if there are any.
• I have reproduced the issue with at least the latest released version of superset.
• I have checked the issue tracker for the same issue and I haven't found one similar.

Superset version

0.99dev, commit guid 07c340c

Expected results

The heatmap and sankey charts render correctly.

Actual results

The heatmaps show black in many places, including covering the entire screen in the second screenshot. The sankey's lines connecting the axes are black.
(Apologies about the blurring effect in both screenshots; I am trying to protect sensitive information.)

Steps to reproduce

Open a dashboard that has the sankey or heatmap defined.

[iaperez]

it seems to happen only in production mode. I can't reproduce it on development mode.

[mistercrunch]

That's so weird. It also looks like the heatmap canvas is not rendering in the right spot.

[mistercrunch]

When using npm run dev, on the <rect> behind the heatmap I see:

But when I run npm run build I don't see it.

[mistercrunch]

@kristw @williaster any idea where this could be coming from? Could it be related to missing CSS when packaging the legacy vises?

[kristw]

From screenshot it looks like css

[mistercrunch]

Yes @kristw , but any idea how/why the CSS would be different on npm run dev and npm run build

[mistercrunch]

@kristw @williaster I'd love to get input and any intuition you may have on the webpack intricacies that may be at play here before I dive into this one.

[williaster]

There's a switch statement for css loading in webpack.config.js, I'm not sure why this would be different now that we have plugins though.

[mistercrunch]

Oh good catch, though I tried disabling as shown here and it didn't work :(

I'm not sure how to go about this one.

[kristw]

Let me see if I can reproduce.

[kristw]

I am looking at it. There are some issues with importing css from the package.
Can reproduce this with the production storybook of @superset-ui-plugins
Trying to figure out a clean solution.

[kristw]

One short-term remedy is to point to the lib output instead of using default esm.
For example

import CalendarChartPlugin from '../../../../superset-ui-legacy-plugin-chart-calendar/lib';

instead of

import CalendarChartPlugin from '../../../../superset-ui-legacy-plugin-chart-calendar';

I may drop the module fields in package.json of the legacy packages to make import points to lib by default.