fix(explore): Fix downloading as image charts which use Mapbox (#13181)

* Fix downloading as image charts which use Mapbox

* Remove unused prop

* Bump deckgl version

superset-frontend/src/explore/components/DisplayQueryButton.jsx

@@ -47,7 +47,6 @@ const propTypes = {
   onOpenPropertiesModal: PropTypes.func,
   onOpenInEditor: PropTypes.func,
   chartStatus: PropTypes.string,
-  chartHeight: PropTypes.string.isRequired,
   latestQueryFormData: PropTypes.object.isRequired,
   slice: PropTypes.object,
 };
@@ -100,7 +99,7 @@ export const DisplayQueryButton = props => {
   };
 
   const handleMenuClick = ({ key, domEvent }) => {
-    const { chartHeight, slice, onOpenInEditor, latestQueryFormData } = props;
+    const { slice, onOpenInEditor, latestQueryFormData } = props;
     switch (key) {
       case MENU_KEYS.EDIT_PROPERTIES:
         props.onOpenPropertiesModal();
@@ -110,12 +109,11 @@ export const DisplayQueryButton = props => {
         break;
       case MENU_KEYS.DOWNLOAD_AS_IMAGE:
         downloadAsImage(
-          '.chart-container',
+          '.panel-body > .chart-container',
           // eslint-disable-next-line camelcase
           slice?.slice_name ?? t('New chart'),
-          {
-            height: parseInt(chartHeight, 10),
-          },
+          {},
+          true,
         )(domEvent);
         break;
       default:

superset-frontend/src/explore/components/ExploreActionButtons.tsx

@@ -41,7 +41,6 @@ type ActionButtonProps = {
 type ExploreActionButtonsProps = {
   actions: { redirectSQLLab: Function; openPropertiesModal: Function };
   canDownload: boolean;
-  chartHeight: number;
   chartStatus: string;
   latestQueryFormData: {};
   queriesResponse: {};
@@ -85,7 +84,6 @@ const ExploreActionButtons = (props: ExploreActionButtonsProps) => {
   const {
     actions,
     canDownload,
-    chartHeight,
     chartStatus,
     latestQueryFormData,
     queriesResponse,
@@ -189,7 +187,6 @@ const ExploreActionButtons = (props: ExploreActionButtonsProps) => {
         </>
       )}
       <ConnectedDisplayQueryButton
-        chartHeight={chartHeight}
         queryResponse={queriesResponse?.[0]}
         latestQueryFormData={latestQueryFormData}
         chartStatus={chartStatus}

superset-frontend/src/explore/components/ExploreChartHeader.jsx

@@ -44,7 +44,6 @@ const propTypes = {
   addHistory: PropTypes.func,
   can_overwrite: PropTypes.bool.isRequired,
   can_download: PropTypes.bool.isRequired,
-  chartHeight: PropTypes.string.isRequired,
   isStarred: PropTypes.bool.isRequired,
   slice: PropTypes.object,
   sliceName: PropTypes.string,
@@ -210,7 +209,6 @@ export class ExploreChartHeader extends React.PureComponent {
             slice={this.props.slice}
             canDownload={this.props.can_download}
             chartStatus={chartStatus}
-            chartHeight={this.props.chartHeight}
             latestQueryFormData={latestQueryFormData}
             queryResponse={queryResponse}
           />

superset-frontend/src/explore/components/ExploreChartPanel.jsx

@@ -241,7 +241,6 @@ const ExploreChartPanel = props => {
       addHistory={props.addHistory}
       can_overwrite={props.can_overwrite}
       can_download={props.can_download}
-      chartHeight={props.height}
       isStarred={props.isStarred}
       slice={props.slice}
       sliceName={props.sliceName}