chore: revert bignumber.js patch for charts and reapply the original bignumber.js change to SQL editor in an opt-in fashion

superset/assets/package.json

@@ -50,7 +50,7 @@
     "@data-ui/sparkline": "^0.0.54",
     "@superset-ui/chart": "^0.10.2",
     "@superset-ui/color": "^0.10.9",
-    "@superset-ui/connection": "^0.10.2",
+    "@superset-ui/connection": "^0.11.0",
     "@superset-ui/core": "^0.10.0",
     "@superset-ui/dimension": "^0.10.0",
     "@superset-ui/legacy-plugin-chart-calendar": "^0.10.0",
@@ -82,7 +82,6 @@
     "@superset-ui/translation": "^0.10.0",
     "@vx/responsive": "0.0.172",
     "abortcontroller-polyfill": "^1.1.9",
-    "bignumber.js": "^8.1.1",
     "bootstrap": "^3.3.6",
     "bootstrap-slider": "^10.0.0",
     "brace": "^0.11.1",

superset/assets/spec/javascripts/visualizations/deckgl/utils_spec.js

@@ -30,7 +30,7 @@ describe('getBreakPoints', () => {
   });
 
   it('returns sorted break points', () => {
-    const fd = { breakPoints: ['0', '10', '100', '50', '1000'] };
+    const fd = { break_points: ['0', '10', '100', '50', '1000'] };
     const result = getBreakPoints(fd, [], metricAccessor);
     const expected = ['0', '10', '50', '100', '1000'];
     expect(result).toEqual(expected);
@@ -45,15 +45,15 @@ describe('getBreakPoints', () => {
   });
 
   it('formats number with proper precision', () => {
-    const fd = { metric: 'count', numBuckets: 2 };
+    const fd = { metric: 'count', num_buckets: 2 };
     const features = [0, 1 / 3, 2 / 3, 1].map(count => ({ count }));
     const result = getBreakPoints(fd, features, metricAccessor);
     const expected = ['0.0', '0.5', '1.0'];
     expect(result).toEqual(expected);
   });
 
   it('works with a zero range', () => {
-    const fd = { metric: 'count', numBuckets: 1 };
+    const fd = { metric: 'count', num_buckets: 1 };
     const features = [1, 1, 1].map(count => ({ count }));
     const result = getBreakPoints(fd, features, metricAccessor);
     const expected = ['1', '1'];
@@ -69,7 +69,7 @@ describe('getBreakPointColorScaler', () => {
   it('returns linear color scaler if there are no break points', () => {
     const fd = {
       metric: 'count',
-      linearColorScheme: ['#000000', '#ffffff'],
+      linear_color_scheme: ['#000000', '#ffffff'],
       opacity: 100,
     };
     const features = [10, 20, 30].map(count => ({ count }));
@@ -82,8 +82,8 @@ describe('getBreakPointColorScaler', () => {
   it('returns bucketing scaler if there are break points', () => {
     const fd = {
       metric: 'count',
-      linearColorScheme: ['#000000', '#ffffff'],
-      breakPoints: ['0', '1', '10'],
+      linear_color_scheme: ['#000000', '#ffffff'],
+      break_points: ['0', '1', '10'],
       opacity: 100,
     };
     const features = [];
@@ -97,8 +97,8 @@ describe('getBreakPointColorScaler', () => {
   it('mask values outside the break points', () => {
     const fd = {
       metric: 'count',
-      linearColorScheme: ['#000000', '#ffffff'],
-      breakPoints: ['0', '1', '10'],
+      linear_color_scheme: ['#000000', '#ffffff'],
+      break_points: ['0', '1', '10'],
       opacity: 100,
     };
     const features = [];
@@ -116,8 +116,8 @@ describe('getBuckets', () => {
   it('computes buckets for break points', () => {
     const fd = {
       metric: 'count',
-      linearColorScheme: ['#000000', '#ffffff'],
-      breakPoints: ['0', '1', '10'],
+      linear_color_scheme: ['#000000', '#ffffff'],
+      break_points: ['0', '1', '10'],
       opacity: 100,
     };
     const features = [];

superset/assets/src/SqlLab/actions/sqlLab.js

@@ -17,6 +17,7 @@
  * under the License.
  */
 import shortid from 'shortid';
+import JSONbig from 'json-bigint';
 import { t } from '@superset-ui/translation';
 import { SupersetClient } from '@superset-ui/connection';
 
@@ -128,9 +129,11 @@ export function fetchQueryResults(query) {
 
     return SupersetClient.get({
       endpoint: `/superset/results/${query.resultsKey}/`,
+      parseMethod: 'text',
     })
-      .then(({ json = {} }) => {
-        dispatch(querySuccess(query, json));
+      .then(({ text = '{}' }) => {
+        const bigIntJson = JSONbig.parse(text);
+        dispatch(querySuccess(query, bigIntJson));
       })
       .catch(response =>
         getClientErrorObject(response).then((error) => {
@@ -164,10 +167,12 @@ export function runQuery(query) {
       endpoint: `/superset/sql_json/${window.location.search}`,
       postPayload,
       stringify: false,
+      parseMethod: 'text',
     })
-      .then(({ json }) => {
+      .then(({ text = '{}' }) => {
         if (!query.runAsync) {
-          dispatch(querySuccess(query, json));
+          const bigIntJson = JSONbig.parse(text);
+          dispatch(querySuccess(query, bigIntJson));
         }
       })
       .catch(response =>

superset/assets/src/chart/ChartRenderer.jsx

@@ -23,7 +23,6 @@ import React from 'react';
 import { ChartProps, SuperChart } from '@superset-ui/chart';
 import { Tooltip } from 'react-bootstrap';
 import { Logger, LOG_ACTIONS_RENDER_CHART } from '../logger/LogUtils';
-import transformBigNumber from './transformBigNumber';
 
 const propTypes = {
   annotationData: PropTypes.object,
@@ -68,7 +67,6 @@ class ChartRenderer extends React.Component {
     this.handleAddFilter = this.handleAddFilter.bind(this);
     this.handleRenderSuccess = this.handleRenderSuccess.bind(this);
     this.handleRenderFailure = this.handleRenderFailure.bind(this);
-    this.preTransformProps = this.preTransformProps.bind(this);
   }
 
   shouldComponentUpdate(nextProps, nextState) {
@@ -167,18 +165,6 @@ class ChartRenderer extends React.Component {
     }
   }
 
-  preTransformProps(chartProps) {
-    const payload = chartProps.payload;
-    const data = transformBigNumber(payload.data);
-    return new ChartProps({
-      ...chartProps,
-      payload: {
-        ...payload,
-        data,
-      },
-    });
-  }
-
   renderTooltip() {
     const { tooltip } = this.state;
     if (tooltip && tooltip.content) {
@@ -224,7 +210,6 @@ class ChartRenderer extends React.Component {
           className={`${snakeCase(vizType)}`}
           chartType={vizType}
           chartProps={skipChartRendering ? null : this.prepareChartProps()}
-          preTransformProps={this.preTransformProps}
           onRenderSuccess={this.handleRenderSuccess}
           onRenderFailure={this.handleRenderFailure}
         />

superset/assets/src/visualizations/deckgl/CategoricalDeckGLContainer.jsx

@@ -31,9 +31,9 @@ import { fitViewport } from './layers/common';
 const { getScale } = CategoricalColorNamespace;
 
 function getCategories(fd, data) {
-  const c = fd.colorPicker || { r: 0, g: 0, b: 0, a: 1 };
+  const c = fd.color_picker || { r: 0, g: 0, b: 0, a: 1 };
   const fixedColor = [c.r, c.g, c.b, 255 * c.a];
-  const colorFn = getScale(fd.colorScheme);
+  const colorFn = getScale(fd.color_scheme);
   const categories = {};
   data.forEach((d) => {
     if (d.cat_color != null && !categories.hasOwnProperty(d.cat_color)) {
@@ -108,7 +108,7 @@ export default class CategoricalDeckGLContainer extends React.PureComponent {
     // the granularity has to be read from the payload form_data, not the
     // props formData which comes from the instantaneous controls state
     const granularity = (
-      props.payload.form_data.timeGrainSqla ||
+      props.payload.form_data.time_grain_sqla ||
       props.payload.form_data.granularity ||
       'P1D'
     );
@@ -154,8 +154,8 @@ export default class CategoricalDeckGLContainer extends React.PureComponent {
     features = this.addColor(features, fd);
 
     // Apply user defined data mutator if defined
-    if (fd.jsDataMutator) {
-      const jsFnMutator = sandboxedEval(fd.jsDataMutator);
+    if (fd.js_data_mutator) {
+      const jsFnMutator = sandboxedEval(fd.js_data_mutator);
       features = jsFnMutator(features);
     }
 
@@ -180,8 +180,8 @@ export default class CategoricalDeckGLContainer extends React.PureComponent {
     return [getLayer(fd, filteredPayload, onAddFilter, setTooltip)];
   }
   addColor(data, fd) {
-    const c = fd.colorPicker || { r: 0, g: 0, b: 0, a: 1 };
-    const colorFn = getScale(fd.colorScheme);
+    const c = fd.color_picker || { r: 0, g: 0, b: 0, a: 1 };
+    const colorFn = getScale(fd.color_scheme);
     return data.map((d) => {
       let color;
       if (fd.dimension) {
@@ -229,14 +229,14 @@ export default class CategoricalDeckGLContainer extends React.PureComponent {
           viewport={this.state.viewport}
           onViewportChange={this.onViewportChange}
           mapboxApiAccessToken={this.props.mapboxApiKey}
-          mapStyle={this.props.formData.mapboxStyle}
+          mapStyle={this.props.formData.mapbox_style}
           setControlValue={this.props.setControlValue}
         >
           <Legend
             categories={this.state.categories}
             toggleCategory={this.toggleCategory}
             showSingleCategory={this.showSingleCategory}
-            position={this.props.formData.legendPosition}
+            position={this.props.formData.legend_position}
           />
         </AnimatableDeckGLContainer>
       </div>

superset/assets/src/visualizations/deckgl/Multi/Multi.jsx

@@ -56,7 +56,7 @@ class DeckMulti extends React.PureComponent {
       const filters = [
         ...(subslice.form_data.filters || []),
         ...(formData.filters || []),
-        ...(formData.extraFilters || []),
+        ...(formData.extra_filters || []),
       ];
       const subsliceCopy = {
         ...subslice,
@@ -70,7 +70,7 @@ class DeckMulti extends React.PureComponent {
           endpoint: getExploreLongUrl(subsliceCopy.form_data, 'json'),
         })
         .then(({ json }) => {
-          const layer = layerGenerators[subsliceCopy.form_data.vizType](
+          const layer = layerGenerators[subsliceCopy.form_data.viz_type](
             subsliceCopy.form_data,
             json,
           );
@@ -96,7 +96,7 @@ class DeckMulti extends React.PureComponent {
         mapboxApiAccessToken={payload.data.mapboxApiKey}
         viewport={viewport}
         layers={layers}
-        mapStyle={formData.mapboxStyle}
+        mapStyle={formData.mapbox_style}
         setControlValue={setControlValue}
       />
     );

superset/assets/src/visualizations/deckgl/factory.jsx

@@ -90,7 +90,7 @@ export function createDeckGLComponent(getLayer, getPoints) {
           mapboxApiAccessToken={payload.data.mapboxApiKey}
           viewport={viewport}
           layers={[layer]}
-          mapStyle={formData.mapboxStyle}
+          mapStyle={formData.mapbox_style}
           setControlValue={setControlValue}
           onViewportChange={this.onViewportChange}
         />);

superset/assets/src/visualizations/deckgl/layers/Arc/Arc.jsx

@@ -31,14 +31,14 @@ function getPoints(data) {
 
 export function getLayer(fd, payload, onAddFilter, setTooltip) {
   const data = payload.data.features;
-  const sc = fd.colorPicker;
-  const tc = fd.targetColorPicker;
+  const sc = fd.color_picker;
+  const tc = fd.target_color_picker;
   return new ArcLayer({
-    id: `path-layer-${fd.sliceId}`,
+    id: `path-layer-${fd.slice_id}`,
     data,
     getSourceColor: d => d.sourceColor || d.color || [sc.r, sc.g, sc.b, 255 * sc.a],
     getTargetColor: d => d.targetColor || d.color || [tc.r, tc.g, tc.b, 255 * tc.a],
-    strokeWidth: (fd.strokeWidth) ? fd.strokeWidth : 3,
+    strokeWidth: (fd.stroke_width) ? fd.stroke_width : 3,
     ...commonLayerProps(fd, setTooltip),
   });
 }