[WIP] Plugin system for chart

superset/assets/src/chart/Chart.jsx

@@ -3,12 +3,13 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Tooltip } from 'react-bootstrap';
 
+import SuperChart from '../superset-ui-core/chart/components/SuperChart';
 import ChartBody from './ChartBody';
 import Loading from '../components/Loading';
 import { Logger, LOG_ACTIONS_RENDER_CHART } from '../logger';
 import StackTraceMessage from '../components/StackTraceMessage';
 import RefreshChartOverlay from '../components/RefreshChartOverlay';
-import visPromiseLookup from '../visualizations';
+// import visPromiseLookup from '../visualizations';
 import sandboxedEval from '../modules/sandbox';
 import './chart.css';
 
@@ -127,19 +128,19 @@ class Chart extends React.PureComponent {
   }
 
   loadAsyncVis(visType) {
-    this.visPromise = visPromiseLookup[visType];
-
-    this.visPromise()
-      .then((renderVis) => {
-        // ensure Component is still mounted
-        if (this.visPromise) {
-          this.setState({ renderVis }, this.renderVis);
-        }
-      })
-      .catch((error) => {
-        console.warn(error); // eslint-disable-line
-        this.props.actions.chartRenderingFailed(error, this.props.chartId);
-      });
+    // this.visPromise = visPromiseLookup[visType];
+
+    // this.visPromise()
+    //   .then((renderVis) => {
+    //     // ensure Component is still mounted
+    //     if (this.visPromise) {
+    //       this.setState({ renderVis }, this.renderVis);
+    //     }
+    //   })
+    //   .catch((error) => {
+    //     console.warn(error); // eslint-disable-line
+    //     this.props.actions.chartRenderingFailed(error, this.props.chartId);
+    //   });
   }
 
   addFilter(col, vals, merge = true, refresh = true) {
@@ -228,6 +229,19 @@ class Chart extends React.PureComponent {
 
     // this allows <Loading /> to be positioned in the middle of the chart
     const containerStyles = isLoading ? { height: this.height(), width: this.width() } : null;
+    const {
+      className,
+      vizType,
+      faded,
+      queryResponse,
+      setControlValue,
+    } = this.props;
+    const classNames = [
+      className,
+      vizType,
+      faded ? 'faded' : '',
+    ].join(' ');
+
     return (
       <div className={`chart-container ${isLoading ? 'is-loading' : ''}`} style={containerStyles}>
         {this.renderTooltip()}
@@ -254,7 +268,19 @@ class Chart extends React.PureComponent {
             />
           )}
 
-        {!isLoading &&
+        {!this.props.chartAlert && (
+          <SuperChart
+            id={this.containerId}
+            className={classNames}
+            type={vizType}
+            width={this.width()}
+            height={this.height()}
+            slice={this}
+            payload={queryResponse}
+            setControlValue={setControlValue}
+          />
+        )}
+        {/* {!isLoading &&
           !this.props.chartAlert && (
             <ChartBody
               containerId={this.containerId}
@@ -268,7 +294,7 @@ class Chart extends React.PureComponent {
                 this.container = inner;
               }}
             />
-          )}
+          )} */}
       </div>
     );
   }

superset/assets/src/superset-ui-core/chart/components/ErrorMessageFactory.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const propTypes = {
+  id: PropTypes.string,
+  className: PropTypes.string,
+};
+const defaultProps = {
+  id: '',
+  className: '',
+};
+
+export function createErrorMessage(type, error) {
+  function ErrorMessage(props) {
+    const { id, className } = props;
+    return (
+      <div id={id} className={className}>
+        <div className="alert alert-warning" role="alert">
+          <strong>ERROR</strong>
+          Chart type: <code>{type}</code> &mdash;
+          {error}
+        </div>
+      </div>
+    );
+  }
+  ErrorMessage.propTypes = propTypes;
+  ErrorMessage.defaultProps = defaultProps;
+
+  return ErrorMessage;
+}

superset/assets/src/superset-ui-core/chart/components/SuperChart.jsx

@@ -0,0 +1,125 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { createErrorMessage } from './ErrorMessageFactory';
+import { loadChart } from '../registries/ChartLoaderRegistry';
+import { loadTransformProps } from '../registries/TransformPropsLoaderRegistry';
+
+const IDENTITY = x => x;
+
+const propTypes = {
+  id: PropTypes.string,
+  className: PropTypes.string,
+  type: PropTypes.string.isRequired,
+  preTransformProps: PropTypes.func,
+  overrideTransformProps: PropTypes.func,
+  postTransformProps: PropTypes.func,
+};
+const defaultProps = {
+  id: '',
+  className: '',
+  preTransformProps: IDENTITY,
+  overrideTransformProps: undefined,
+  postTransformProps: IDENTITY,
+};
+
+class SuperChart extends React.PureComponent {
+  constructor(props) {
+    super(props);
+    this.state = {
+      Renderer: null,
+      transformProps: null,
+    };
+    this.loading = false;
+  }
+
+  componentDidMount() {
+    const { type, overrideTransformProps } = this.props;
+    this.loadChartType(type, overrideTransformProps);
+  }
+
+  componentWillReceiveProps(nextProps) {
+    const { type, overrideTransformProps } = this.props;
+    if (nextProps.type !== type
+      || nextProps.overrideTransformProps !== overrideTransformProps
+    ) {
+      this.loadChartType(nextProps.type, nextProps.overrideTransformProps);
+    }
+  }
+
+  loadChartType(type, overrideTransformProps) {
+    // Clear state
+    this.setState({
+      Renderer: null,
+      transformProps: null,
+    });
+    this.loading = false;
+
+    if (type) {
+      console.log('loadChart', loadChart);
+      const componentPromise = loadChart(type);
+      const transformPropsPromise = overrideTransformProps
+        ? Promise.resolve(overrideTransformProps)
+        : loadTransformProps(type);
+
+      this.loading = Promise.all([componentPromise, transformPropsPromise])
+        .then(
+          // on success
+          ([Renderer, transformProps]) => {
+            this.setState({ Renderer, transformProps });
+          },
+          // on failure
+          (error) => {
+            this.setState({
+              Renderer: createErrorMessage(type, error),
+              transformProps: IDENTITY,
+            });
+          },
+        );
+    }
+  }
+
+  render() {
+    const {
+      id,
+      className,
+      preTransformProps,
+      overrideTransformProps,
+      postTransformProps,
+      ...otherProps
+    } = this.props;
+    const type = this.props.type;
+
+    const { Renderer } = this.state;
+
+    // Loaded (both success and failure)
+    if (Renderer && this.transformProps) {
+      return (
+        <Renderer
+          id={id}
+          className={className}
+          type={type}
+          {...postTransformProps(this.transformProps(preTransformProps(otherProps)))}
+        />
+      );
+    }
+
+    // Loading state
+    if (this.loading) {
+      return (
+        <div id={id} className={className} type={type}>
+          Loading...
+        </div>
+      );
+    }
+
+    // Initial state
+    return (
+      <div id={id} className={className} type={type} />
+    );
+  }
+}
+
+SuperChart.propTypes = propTypes;
+SuperChart.defaultProps = defaultProps;
+
+export default SuperChart;

superset/assets/src/superset-ui-core/chart/models/ChartMetadata.js

@@ -0,0 +1,20 @@
+export default class ChartMetadata {
+  constructor({
+    name,
+    description,
+    thumbnail,
+    show = true,
+  }) {
+    this.name = name;
+    this.description = description;
+    this.thumbnail = thumbnail;
+    this.show = show;
+    this.variations = [];
+  }
+
+  addVariation(variation) {
+    variation.setParent(this);
+    this.variations.push(variation);
+    return this;
+  }
+}

superset/assets/src/superset-ui-core/chart/models/ChartVariationMetadata.js

@@ -0,0 +1,22 @@
+export default class ChartVariationMetadata {
+  constructor({
+    variationKey,
+    name,
+    description,
+    thumbnail,
+    show = true,
+    defaultParams,
+  } = {}) {
+    this.parent = null;
+    this.variationKey = variationKey;
+    this.name = name;
+    this.description = description;
+    this.thumbnail = thumbnail;
+    this.show = show;
+    this.defaultParams = defaultParams;
+  }
+
+  setParent(parent) {
+    this.parent = parent;
+  }
+}

superset/assets/src/superset-ui-core/chart/plugins/ChartPlugin.js

@@ -0,0 +1,50 @@
+import Plugin from '../../platform/Plugin';
+import * as BuildQueryLoaderRegistry from '../registries/BuildQueryLoaderRegistry';
+import * as ChartMetadataRegistry from '../registries/ChartMetadataRegistry';
+import * as ChartLoaderRegistry from '../registries/ChartLoaderRegistry';
+import * as TransformPropsLoaderRegistry from '../registries/TransformPropsLoaderRegistry';
+
+const IDENTITY = x => x;
+
+export default class ChartPlugin extends Plugin {
+  constructor({
+    key,
+    metadata,
+
+    // use buildQuery for immediate value
+    buildQuery = IDENTITY,
+    // use loadBuildQuery for dynamic import (lazy-loading)
+    loadBuildQuery,
+
+    // use transformProps for immediate value
+    transformProps = IDENTITY,
+    // use loadTransformProps for dynamic import (lazy-loading)
+    loadTransformProps,
+
+    // use Chart for immediate value
+    Chart,
+    // use loadChart for dynamic import (lazy-loading)
+    loadChart,
+  } = {}) {
+    super(key);
+    this.metadata = metadata;
+    this.loadBuildQuery = loadBuildQuery || (() => buildQuery);
+    this.loadTransformProps = loadTransformProps || (() => transformProps);
+
+    if (loadChart) {
+      this.loadChart = loadChart;
+    } else if (Chart) {
+      this.loadChart = () => Chart;
+    } else {
+      throw new Error('Chart or loadChart is required');
+    }
+  }
+
+  install(key = this.key) {
+    super.setInstalledKey(key);
+    BuildQueryLoaderRegistry.registerLoader(key, this.loadBuildQuery);
+    ChartMetadataRegistry.register(key, this.metadata);
+    ChartLoaderRegistry.registerLoader(key, this.loadChart);
+    TransformPropsLoaderRegistry.registerLoader(key, this.loadTransformProps);
+  }
+}

superset/assets/src/superset-ui-core/chart/registries/BuildQueryLoaderRegistry.js

@@ -0,0 +1,28 @@
+import LoaderRegistry from '../../platform/LoaderRegistry';
+import makeSingleton from '../../utils/makeSingleton';
+
+class BuildQueryLoaderRegistry extends LoaderRegistry {
+  constructor() {
+    super('BuildQuery');
+  }
+}
+
+const {
+  getInstance,
+  has,
+  register,
+  registerLoader,
+  load,
+} = makeSingleton(BuildQueryLoaderRegistry);
+
+// alias
+const loadBuildQuery = load;
+
+export {
+  getInstance,
+  has,
+  register,
+  registerLoader,
+  load,
+  loadBuildQuery,
+};