mirror of https://github.com/apache/superset.git
Revert "[webpack] setup lazy loading for all visualizations" (#5219)
* Revert "[explore] fix autocomplete on verbose names (#5204)" This reverts commitd5ebc430c2
. * Revert "[webpack] setup lazy loading for all visualizations (#4727)" This reverts commitde0aaf42ed
.
This commit is contained in:
parent
d5ebc430c2
commit
7b49b6c2de
|
@ -47,37 +47,23 @@ def parse_manifest_json():
|
|||
global manifest
|
||||
try:
|
||||
with open(MANIFEST_FILE, 'r') as f:
|
||||
# the manifest inclues non-entry files
|
||||
# we only need entries in templates
|
||||
full_manifest = json.load(f)
|
||||
manifest = full_manifest.get('entrypoints', {})
|
||||
manifest = json.load(f)
|
||||
except Exception:
|
||||
pass
|
||||
|
||||
|
||||
def get_js_manifest_files(filename):
|
||||
def get_manifest_file(filename):
|
||||
if app.debug:
|
||||
parse_manifest_json()
|
||||
entry_files = manifest.get(filename, {})
|
||||
return entry_files.get('js', [])
|
||||
|
||||
|
||||
def get_css_manifest_files(filename):
|
||||
if app.debug:
|
||||
parse_manifest_json()
|
||||
entry_files = manifest.get(filename, {})
|
||||
return entry_files.get('css', [])
|
||||
return '/static/assets/dist/' + manifest.get(filename, '')
|
||||
|
||||
|
||||
parse_manifest_json()
|
||||
|
||||
|
||||
@app.context_processor
|
||||
def get_manifest():
|
||||
return dict(
|
||||
js_manifest=get_js_manifest_files,
|
||||
css_manifest=get_css_manifest_files,
|
||||
)
|
||||
def get_js_manifest():
|
||||
return dict(js_manifest=get_manifest_file)
|
||||
|
||||
|
||||
#################################################################
|
||||
|
|
|
@ -1,4 +1,3 @@
|
|||
{
|
||||
"presets" : ["airbnb", "react", "env"],
|
||||
"plugins": ["syntax-dynamic-import"],
|
||||
"presets" : ["airbnb"],
|
||||
}
|
||||
|
|
|
@ -1,7 +1,6 @@
|
|||
{
|
||||
"extends": "airbnb",
|
||||
"parser": "babel-eslint",
|
||||
"parserOptions": {
|
||||
"parserOptions":{
|
||||
"ecmaFeatures": {
|
||||
"experimentalObjectRestSpread": true
|
||||
}
|
||||
|
|
|
@ -10,9 +10,11 @@
|
|||
"scripts": {
|
||||
"test": "mocha --require ignore-styles --compilers js:babel-core/register --require spec/helpers/browser.js --recursive spec/**/*_spec.*",
|
||||
"cover": "babel-node node_modules/.bin/babel-istanbul cover _mocha -- --require ignore-styles spec/helpers/browser.js --recursive spec/**/*_spec.*",
|
||||
"dev": "webpack --mode=development --colors --progress --debug --watch",
|
||||
"prod": "node --max_old_space_size=4096 webpack --mode=production --colors --progress",
|
||||
"build": "webpack --mode=production --colors --progress",
|
||||
"dev": "NODE_ENV=dev webpack --watch --colors --progress --debug --output-pathinfo --devtool eval-cheap-source-map",
|
||||
"dev-slow": "NODE_ENV=dev webpack --watch --colors --progress --debug --output-pathinfo --devtool inline-source-map",
|
||||
"dev-fast": "echo 'dev-fast in now replaced by dev'",
|
||||
"prod": "NODE_ENV=production node --max_old_space_size=4096 ./node_modules/webpack/bin/webpack.js -p --colors --progress",
|
||||
"build": "NODE_ENV=production webpack --colors --progress",
|
||||
"lint": "eslint --ignore-path=.eslintignore --ext .js,.jsx .",
|
||||
"lint-fix": "eslint --fix --ignore-path=.eslintignore --ext .js,.jsx .",
|
||||
"sync-backend": "babel-node --presets env src/syncBackend.js"
|
||||
|
@ -37,9 +39,6 @@
|
|||
"bugs": {
|
||||
"url": "https://github.com/apache/incubator-superset/issues"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 6.11.5 <7.0.0 || >= 8.9.0"
|
||||
},
|
||||
"homepage": "http://superset.apache.org/",
|
||||
"dependencies": {
|
||||
"//": "known issues with react-bootstrap>=0.32",
|
||||
|
@ -117,21 +116,19 @@
|
|||
"supercluster": "https://github.com/georgeke/supercluster/tarball/ac3492737e7ce98e07af679623aad452373bbc40",
|
||||
"underscore": "^1.8.3",
|
||||
"urijs": "^1.18.10",
|
||||
"viewport-mercator-project": "^5.0.0"
|
||||
"viewport-mercator-project": "^5.0.0",
|
||||
"webpack-cli": "^2.1.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"babel-cli": "^6.14.0",
|
||||
"babel-core": "^6.10.4",
|
||||
"babel-eslint": "^8.2.2",
|
||||
"babel-istanbul": "^0.12.2",
|
||||
"babel-loader": "^7.1.4",
|
||||
"babel-loader": "^7.0.0",
|
||||
"babel-plugin-css-modules-transform": "^1.1.0",
|
||||
"babel-plugin-dynamic-import-node": "^1.2.0",
|
||||
"babel-plugin-syntax-dynamic-import": "^6.18.0",
|
||||
"babel-polyfill": "^6.23.0",
|
||||
"babel-preset-airbnb": "^2.1.1",
|
||||
"chai": "^4.0.2",
|
||||
"clean-webpack-plugin": "^0.1.19",
|
||||
"clean-webpack-plugin": "^0.1.16",
|
||||
"css-loader": "^0.28.0",
|
||||
"enzyme": "^2.0.0",
|
||||
"eslint": "^4.19.0",
|
||||
|
@ -140,7 +137,8 @@
|
|||
"eslint-plugin-jsx-a11y": "^5.1.1",
|
||||
"eslint-plugin-react": "^7.0.1",
|
||||
"exports-loader": "^0.7.0",
|
||||
"file-loader": "^1.1.11",
|
||||
"extract-text-webpack-plugin": "3.0.2",
|
||||
"file-loader": "^0.11.1",
|
||||
"github-changes": "^1.0.4",
|
||||
"ignore-styles": "^5.0.1",
|
||||
"imports-loader": "^0.7.1",
|
||||
|
@ -148,8 +146,7 @@
|
|||
"jsdom": "9.12.0",
|
||||
"json-loader": "^0.5.4",
|
||||
"less": "^2.6.1",
|
||||
"less-loader": "^4.1.0",
|
||||
"mini-css-extract-plugin": "^0.4.0",
|
||||
"less-loader": "^4.0.3",
|
||||
"mocha": "^3.2.0",
|
||||
"npm-check-updates": "^2.14.0",
|
||||
"react-addons-test-utils": "^15.6.2",
|
||||
|
@ -160,10 +157,10 @@
|
|||
"style-loader": "^0.21.0",
|
||||
"transform-loader": "^0.2.3",
|
||||
"uglifyjs-webpack-plugin": "^1.1.0",
|
||||
"url-loader": "^1.0.1",
|
||||
"webpack": "^4.6.0",
|
||||
"webpack-assets-manifest": "^3.0.1",
|
||||
"webpack-cli": "^2.0.10",
|
||||
"webpack-sources": "^1.1.0"
|
||||
"url-loader": "^0.6.2",
|
||||
"//": "Known issues with >=4",
|
||||
"webpack": "^3.10.0",
|
||||
"webpack-manifest-plugin": "2.0.3",
|
||||
"webworkify-webpack": "2.1.2"
|
||||
}
|
||||
}
|
||||
|
|
|
@ -3,12 +3,7 @@ import 'babel-polyfill';
|
|||
import chai from 'chai';
|
||||
import jsdom from 'jsdom';
|
||||
|
||||
require('babel-register')({
|
||||
// NOTE: If `dynamic-import-node` is in .babelrc alongside
|
||||
// `syntax-dynamic-import` it breaks webpack's bundle splitting capability.
|
||||
// So only load during runtime on the node-side (in tests)
|
||||
plugins: ['dynamic-import-node'],
|
||||
});
|
||||
require('babel-register')();
|
||||
|
||||
const exposedProperties = ['window', 'navigator', 'document'];
|
||||
|
||||
|
|
|
@ -38,10 +38,10 @@ describe('Chart', () => {
|
|||
<Chart {...mockedProps} />,
|
||||
);
|
||||
});
|
||||
describe('renderVis', () => {
|
||||
describe('renderViz', () => {
|
||||
let stub;
|
||||
beforeEach(() => {
|
||||
stub = sinon.stub(wrapper.instance(), 'renderVis');
|
||||
stub = sinon.stub(wrapper.instance(), 'renderViz');
|
||||
});
|
||||
afterEach(() => {
|
||||
stub.restore();
|
||||
|
|
|
@ -10,7 +10,7 @@ import Loading from '../components/Loading';
|
|||
import { Logger, LOG_ACTIONS_RENDER_EVENT } from '../logger';
|
||||
import StackTraceMessage from '../components/StackTraceMessage';
|
||||
import RefreshChartOverlay from '../components/RefreshChartOverlay';
|
||||
import visPromiseLookup from '../visualizations';
|
||||
import visMap from '../visualizations';
|
||||
import sandboxedEval from '../modules/sandbox';
|
||||
import './chart.css';
|
||||
|
||||
|
@ -58,11 +58,7 @@ const defaultProps = {
|
|||
class Chart extends React.PureComponent {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
// visualizations are lazy-loaded with promises that resolve to a renderVis function
|
||||
this.state = {
|
||||
renderVis: null,
|
||||
};
|
||||
|
||||
this.state = {};
|
||||
// these properties are used by visualizations
|
||||
this.annotationData = props.annotationData;
|
||||
this.containerId = props.containerId;
|
||||
|
@ -76,20 +72,15 @@ class Chart extends React.PureComponent {
|
|||
this.headerHeight = this.headerHeight.bind(this);
|
||||
this.height = this.height.bind(this);
|
||||
this.width = this.width.bind(this);
|
||||
this.visPromise = null;
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
if (this.props.triggerQuery) {
|
||||
this.props.actions.runQuery(
|
||||
this.props.formData,
|
||||
false,
|
||||
this.props.actions.runQuery(this.props.formData, false,
|
||||
this.props.timeout,
|
||||
this.props.chartKey,
|
||||
);
|
||||
}
|
||||
|
||||
this.loadAsyncVis(this.props.vizType);
|
||||
}
|
||||
|
||||
componentWillReceiveProps(nextProps) {
|
||||
|
@ -98,31 +89,23 @@ class Chart extends React.PureComponent {
|
|||
this.selector = `#${this.containerId}`;
|
||||
this.formData = nextProps.formData;
|
||||
this.datasource = nextProps.datasource;
|
||||
if (nextProps.vizType !== this.props.vizType) {
|
||||
this.setState(() => ({ renderVis: null }));
|
||||
this.loadAsyncVis(nextProps.vizType);
|
||||
}
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps) {
|
||||
if (
|
||||
this.props.queryResponse &&
|
||||
['success', 'rendered'].indexOf(this.props.chartStatus) > -1 &&
|
||||
!this.props.queryResponse.error &&
|
||||
(prevProps.annotationData !== this.props.annotationData ||
|
||||
this.props.queryResponse &&
|
||||
['success', 'rendered'].indexOf(this.props.chartStatus) > -1 &&
|
||||
!this.props.queryResponse.error && (
|
||||
prevProps.annotationData !== this.props.annotationData ||
|
||||
prevProps.queryResponse !== this.props.queryResponse ||
|
||||
prevProps.height !== this.props.height ||
|
||||
prevProps.width !== this.props.width ||
|
||||
prevProps.lastRendered !== this.props.lastRendered)
|
||||
) {
|
||||
this.renderVis();
|
||||
this.renderViz();
|
||||
}
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
this.visPromise = null;
|
||||
}
|
||||
|
||||
getFilters() {
|
||||
return this.props.getFilters();
|
||||
}
|
||||
|
@ -131,22 +114,6 @@ class Chart extends React.PureComponent {
|
|||
this.setState({ tooltip });
|
||||
}
|
||||
|
||||
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.error(error); // eslint-disable-line
|
||||
this.props.actions.chartRenderingFailed(error, this.props.chartKey);
|
||||
});
|
||||
}
|
||||
|
||||
addFilter(col, vals, merge = true, refresh = true) {
|
||||
this.props.addFilter(col, vals, merge, refresh);
|
||||
}
|
||||
|
@ -218,77 +185,69 @@ class Chart extends React.PureComponent {
|
|||
return null;
|
||||
}
|
||||
|
||||
renderVis() {
|
||||
// check that we have the render function and data
|
||||
if (this.state.renderVis && ['success', 'rendered'].indexOf(this.props.chartStatus) > -1) {
|
||||
const fd = this.props.formData;
|
||||
const qr = this.props.queryResponse;
|
||||
const renderStart = Logger.getTimestamp();
|
||||
|
||||
try {
|
||||
// Executing user-defined data mutator function
|
||||
if (fd.js_data) {
|
||||
qr.data = sandboxedEval(fd.js_data)(qr.data);
|
||||
}
|
||||
// [re]rendering the visualization
|
||||
this.state.renderVis(this, qr, this.props.setControlValue);
|
||||
|
||||
Logger.append(LOG_ACTIONS_RENDER_EVENT, {
|
||||
label: this.props.chartKey,
|
||||
vis_type: this.props.vizType,
|
||||
start_offset: renderStart,
|
||||
duration: Logger.getTimestamp() - renderStart,
|
||||
});
|
||||
|
||||
this.props.actions.chartRenderingSucceeded(this.props.chartKey);
|
||||
} catch (e) {
|
||||
console.error(e); // eslint-disable-line
|
||||
this.props.actions.chartRenderingFailed(e, this.props.chartKey);
|
||||
renderViz() {
|
||||
const viz = visMap[this.props.vizType];
|
||||
const fd = this.props.formData;
|
||||
const qr = this.props.queryResponse;
|
||||
const renderStart = Logger.getTimestamp();
|
||||
try {
|
||||
// Executing user-defined data mutator function
|
||||
if (fd.js_data) {
|
||||
qr.data = sandboxedEval(fd.js_data)(qr.data);
|
||||
}
|
||||
// [re]rendering the visualization
|
||||
viz(this, qr, this.props.setControlValue);
|
||||
Logger.append(LOG_ACTIONS_RENDER_EVENT, {
|
||||
label: this.props.chartKey,
|
||||
vis_type: this.props.vizType,
|
||||
start_offset: renderStart,
|
||||
duration: Logger.getTimestamp() - renderStart,
|
||||
});
|
||||
this.props.actions.chartRenderingSucceeded(this.props.chartKey);
|
||||
} catch (e) {
|
||||
this.props.actions.chartRenderingFailed(e, this.props.chartKey);
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const isLoading = this.props.chartStatus === 'loading' || !this.state.renderVis;
|
||||
const isLoading = this.props.chartStatus === 'loading';
|
||||
return (
|
||||
<div className={`token col-md-12 ${isLoading ? 'is-loading' : ''}`}>
|
||||
{this.renderTooltip()}
|
||||
|
||||
{isLoading && <Loading size={25} />}
|
||||
|
||||
{this.props.chartAlert && (
|
||||
<StackTraceMessage
|
||||
message={this.props.chartAlert}
|
||||
queryResponse={this.props.queryResponse}
|
||||
/>
|
||||
)}
|
||||
{isLoading &&
|
||||
<Loading size={25} />
|
||||
}
|
||||
{this.props.chartAlert &&
|
||||
<StackTraceMessage
|
||||
message={this.props.chartAlert}
|
||||
queryResponse={this.props.queryResponse}
|
||||
/>
|
||||
}
|
||||
|
||||
{!isLoading &&
|
||||
!this.props.chartAlert &&
|
||||
this.props.refreshOverlayVisible &&
|
||||
!this.props.errorMessage &&
|
||||
this.container && (
|
||||
<RefreshChartOverlay
|
||||
height={this.height()}
|
||||
width={this.width()}
|
||||
onQuery={this.props.onQuery}
|
||||
onDismiss={this.props.onDismissRefreshOverlay}
|
||||
/>
|
||||
)}
|
||||
|
||||
{!isLoading &&
|
||||
!this.props.chartAlert && (
|
||||
<ChartBody
|
||||
containerId={this.containerId}
|
||||
vizType={this.props.vizType}
|
||||
height={this.height}
|
||||
width={this.width}
|
||||
faded={this.props.refreshOverlayVisible && !this.props.errorMessage}
|
||||
ref={(inner) => {
|
||||
this.container = inner;
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
this.container &&
|
||||
<RefreshChartOverlay
|
||||
height={this.height()}
|
||||
width={this.width()}
|
||||
onQuery={this.props.onQuery}
|
||||
onDismiss={this.props.onDismissRefreshOverlay}
|
||||
/>
|
||||
}
|
||||
{!isLoading && !this.props.chartAlert &&
|
||||
<ChartBody
|
||||
containerId={this.containerId}
|
||||
vizType={this.props.vizType}
|
||||
height={this.height}
|
||||
width={this.width}
|
||||
faded={this.props.refreshOverlayVisible && !this.props.errorMessage}
|
||||
ref={(inner) => {
|
||||
this.container = inner;
|
||||
}}
|
||||
/>
|
||||
}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -8,15 +8,15 @@ const defaultProps = {
|
|||
size: 25,
|
||||
};
|
||||
|
||||
export default function Loading({ size }) {
|
||||
export default function Loading(props) {
|
||||
return (
|
||||
<img
|
||||
className="loading"
|
||||
alt="Loading..."
|
||||
src="/static/assets/images/loading.gif"
|
||||
style={{
|
||||
width: size,
|
||||
height: size,
|
||||
width: props.size,
|
||||
height: props.size,
|
||||
padding: 0,
|
||||
margin: 0,
|
||||
position: 'absolute',
|
||||
|
|
|
@ -131,7 +131,7 @@ class SliceHeader extends React.PureComponent {
|
|||
</a>
|
||||
}
|
||||
{this.props.sliceCanEdit &&
|
||||
<a href={slice.edit_url} target="_blank" rel="noopener noreferrer">
|
||||
<a href={slice.edit_url} target="_blank">
|
||||
<TooltipWrapper
|
||||
placement="top"
|
||||
label="edit"
|
||||
|
|
|
@ -94,8 +94,8 @@ const propTypes = {
|
|||
};
|
||||
|
||||
class DeckGLScatter extends React.PureComponent {
|
||||
/* eslint-disable-next-line react/sort-comp */
|
||||
static getDerivedStateFromProps(nextProps) {
|
||||
/* eslint-disable no-unused-vars */
|
||||
static getDerivedStateFromProps(nextProps, prevState) {
|
||||
const fd = nextProps.slice.formData;
|
||||
|
||||
const timeGrain = fd.time_grain_sqla || fd.granularity || 'PT1M';
|
||||
|
|
|
@ -59,8 +59,8 @@ const propTypes = {
|
|||
};
|
||||
|
||||
class DeckGLScreenGrid extends React.PureComponent {
|
||||
/* eslint-disable-next-line react/sort-comp */
|
||||
static getDerivedStateFromProps(nextProps) {
|
||||
/* eslint-disable no-unused-vars */
|
||||
static getDerivedStateFromProps(nextProps, prevState) {
|
||||
const fd = nextProps.slice.formData;
|
||||
|
||||
const timeGrain = fd.time_grain_sqla || fd.granularity || 'PT1M';
|
||||
|
|
|
@ -1,4 +1,6 @@
|
|||
/* eslint-disable global-require */
|
||||
import nvd3Vis from './nvd3_vis';
|
||||
import lineMulti from './line_multi';
|
||||
|
||||
// You ***should*** use these to reference viz_types in code
|
||||
export const VIZ_TYPES = {
|
||||
|
@ -52,91 +54,54 @@ export const VIZ_TYPES = {
|
|||
rose: 'rose',
|
||||
};
|
||||
|
||||
const loadVis = promise =>
|
||||
promise.then((module) => {
|
||||
const defaultExport = module.default || module;
|
||||
|
||||
// deckgl visualizations don't use esModules, fix it?
|
||||
return defaultExport.default || defaultExport;
|
||||
});
|
||||
const loadNvd3 = () => loadVis(import(/* webpackChunkName: "nvd3_vis" */ './nvd3_vis.js'));
|
||||
|
||||
const vizMap = {
|
||||
[VIZ_TYPES.area]: loadNvd3,
|
||||
[VIZ_TYPES.bar]: loadNvd3,
|
||||
[VIZ_TYPES.big_number]: () =>
|
||||
loadVis(import(/* webpackChunkName: 'big_number' */ './big_number.js')),
|
||||
[VIZ_TYPES.big_number_total]: () =>
|
||||
loadVis(import(/* webpackChunkName: "big_number" */ './big_number.js')),
|
||||
[VIZ_TYPES.box_plot]: loadNvd3,
|
||||
[VIZ_TYPES.bubble]: loadNvd3,
|
||||
[VIZ_TYPES.bullet]: loadNvd3,
|
||||
[VIZ_TYPES.cal_heatmap]: () =>
|
||||
loadVis(import(/* webpackChunkName: "cal_heatmap" */ './cal_heatmap.js')),
|
||||
[VIZ_TYPES.compare]: loadNvd3,
|
||||
[VIZ_TYPES.directed_force]: () =>
|
||||
loadVis(import(/* webpackChunkName: "directed_force" */ './directed_force.js')),
|
||||
[VIZ_TYPES.chord]: () => loadVis(import(/* webpackChunkName: "chord" */ './chord.jsx')),
|
||||
[VIZ_TYPES.dist_bar]: loadNvd3,
|
||||
[VIZ_TYPES.filter_box]: () =>
|
||||
loadVis(import(/* webpackChunkName: "filter_box" */ './filter_box.jsx')),
|
||||
[VIZ_TYPES.heatmap]: () => loadVis(import(/* webpackChunkName: "heatmap" */ './heatmap.js')),
|
||||
[VIZ_TYPES.histogram]: () =>
|
||||
loadVis(import(/* webpackChunkName: "histogram" */ './histogram.js')),
|
||||
[VIZ_TYPES.horizon]: () => loadVis(import(/* webpackChunkName: "horizon" */ './horizon.js')),
|
||||
[VIZ_TYPES.iframe]: () => loadVis(import(/* webpackChunkName: "iframe" */ './iframe.js')),
|
||||
[VIZ_TYPES.line]: loadNvd3,
|
||||
[VIZ_TYPES.line_multi]: () =>
|
||||
loadVis(import(/* webpackChunkName: "line_multi" */ './line_multi.js')),
|
||||
[VIZ_TYPES.time_pivot]: loadNvd3,
|
||||
[VIZ_TYPES.mapbox]: () => loadVis(import(/* webpackChunkName: "mapbox" */ './mapbox.jsx')),
|
||||
[VIZ_TYPES.markup]: () => loadVis(import(/* webpackChunkName: "markup" */ './markup.js')),
|
||||
[VIZ_TYPES.para]: () =>
|
||||
loadVis(import(/* webpackChunkName: "parallel_coordinates" */ './parallel_coordinates.js')),
|
||||
[VIZ_TYPES.pie]: loadNvd3,
|
||||
[VIZ_TYPES.pivot_table]: () =>
|
||||
loadVis(import(/* webpackChunkName: "pivot_table" */ './pivot_table.js')),
|
||||
[VIZ_TYPES.sankey]: () => loadVis(import(/* webpackChunkName: "sankey" */ './sankey.js')),
|
||||
[VIZ_TYPES.separator]: () => loadVis(import(/* webpackChunkName: "markup" */ './markup.js')),
|
||||
[VIZ_TYPES.sunburst]: () => loadVis(import(/* webpackChunkName: "sunburst" */ './sunburst.js')),
|
||||
[VIZ_TYPES.table]: () => loadVis(import(/* webpackChunkName: "table" */ './table.js')),
|
||||
[VIZ_TYPES.time_table]: () =>
|
||||
loadVis(import(/* webpackChunkName: "time_table" */ './time_table.jsx')),
|
||||
[VIZ_TYPES.treemap]: () => loadVis(import(/* webpackChunkName: "treemap" */ './treemap.js')),
|
||||
[VIZ_TYPES.country_map]: () =>
|
||||
loadVis(import(/* webpackChunkName: "country_map" */ './country_map.js')),
|
||||
[VIZ_TYPES.word_cloud]: () =>
|
||||
loadVis(import(/* webpackChunkName: "word_cloud" */ './word_cloud.js')),
|
||||
[VIZ_TYPES.world_map]: () =>
|
||||
loadVis(import(/* webpackChunkName: "world_map" */ './world_map.js')),
|
||||
[VIZ_TYPES.dual_line]: loadNvd3,
|
||||
[VIZ_TYPES.event_flow]: () =>
|
||||
loadVis(import(/* webpackChunkName: "EventFlow" */ './EventFlow.jsx')),
|
||||
[VIZ_TYPES.paired_ttest]: () =>
|
||||
loadVis(import(/* webpackChunkName: "paired_ttest" */ './paired_ttest.jsx')),
|
||||
[VIZ_TYPES.partition]: () =>
|
||||
loadVis(import(/* webpackChunkName: "partition" */ './partition.js')),
|
||||
[VIZ_TYPES.deck_scatter]: () =>
|
||||
loadVis(import(/* webpackChunkName: "deckgl/layers/scatter" */ './deckgl/layers/scatter.jsx')),
|
||||
[VIZ_TYPES.deck_screengrid]: () =>
|
||||
loadVis(
|
||||
import(/* webpackChunkName: "deckgl/layers/screengrid" */ './deckgl/layers/screengrid.jsx'),
|
||||
),
|
||||
[VIZ_TYPES.deck_grid]: () =>
|
||||
loadVis(import(/* webpackChunkName: "deckgl/layers/grid" */ './deckgl/layers/grid.jsx')),
|
||||
[VIZ_TYPES.deck_hex]: () =>
|
||||
loadVis(import(/* webpackChunkName: "deckgl/layers/hex" */ './deckgl/layers/hex.jsx')),
|
||||
[VIZ_TYPES.deck_path]: () =>
|
||||
loadVis(import(/* webpackChunkName: "deckgl/layers/path" */ './deckgl/layers/path.jsx')),
|
||||
[VIZ_TYPES.deck_geojson]: () =>
|
||||
loadVis(import(/* webpackChunkName: "deckgl/layers/geojson" */ './deckgl/layers/geojson.jsx')),
|
||||
[VIZ_TYPES.deck_arc]: () =>
|
||||
loadVis(import(/* webpackChunkName: "deckgl/layers/arc" */ './deckgl/layers/arc.jsx')),
|
||||
[VIZ_TYPES.deck_polygon]: () =>
|
||||
loadVis(import(/* webpackChunkName: "deckgl/layers/polygon" */ './deckgl/layers/polygon.jsx')),
|
||||
[VIZ_TYPES.deck_multi]: () =>
|
||||
loadVis(import(/* webpackChunkName: "deckgl/multi" */ './deckgl/multi.jsx')),
|
||||
[VIZ_TYPES.rose]: () => loadVis(import(/* webpackChunkName: "rose" */ './rose.js')),
|
||||
[VIZ_TYPES.area]: nvd3Vis,
|
||||
[VIZ_TYPES.bar]: nvd3Vis,
|
||||
[VIZ_TYPES.big_number]: require('./big_number.js'),
|
||||
[VIZ_TYPES.big_number_total]: require('./big_number.js'),
|
||||
[VIZ_TYPES.box_plot]: nvd3Vis,
|
||||
[VIZ_TYPES.bubble]: nvd3Vis,
|
||||
[VIZ_TYPES.bullet]: nvd3Vis,
|
||||
[VIZ_TYPES.cal_heatmap]: require('./cal_heatmap.js'),
|
||||
[VIZ_TYPES.compare]: nvd3Vis,
|
||||
[VIZ_TYPES.directed_force]: require('./directed_force.js'),
|
||||
[VIZ_TYPES.chord]: require('./chord.jsx'),
|
||||
[VIZ_TYPES.dist_bar]: nvd3Vis,
|
||||
[VIZ_TYPES.filter_box]: require('./filter_box.jsx'),
|
||||
[VIZ_TYPES.heatmap]: require('./heatmap.js'),
|
||||
[VIZ_TYPES.histogram]: require('./histogram.js'),
|
||||
[VIZ_TYPES.horizon]: require('./horizon.js'),
|
||||
[VIZ_TYPES.iframe]: require('./iframe.js'),
|
||||
[VIZ_TYPES.line]: nvd3Vis,
|
||||
[VIZ_TYPES.line_multi]: lineMulti,
|
||||
[VIZ_TYPES.time_pivot]: nvd3Vis,
|
||||
[VIZ_TYPES.mapbox]: require('./mapbox.jsx'),
|
||||
[VIZ_TYPES.markup]: require('./markup.js'),
|
||||
[VIZ_TYPES.para]: require('./parallel_coordinates.js'),
|
||||
[VIZ_TYPES.pie]: nvd3Vis,
|
||||
[VIZ_TYPES.pivot_table]: require('./pivot_table.js'),
|
||||
[VIZ_TYPES.sankey]: require('./sankey.js'),
|
||||
[VIZ_TYPES.separator]: require('./markup.js'),
|
||||
[VIZ_TYPES.sunburst]: require('./sunburst.js'),
|
||||
[VIZ_TYPES.table]: require('./table.js'),
|
||||
[VIZ_TYPES.time_table]: require('./time_table.jsx'),
|
||||
[VIZ_TYPES.treemap]: require('./treemap.js'),
|
||||
[VIZ_TYPES.country_map]: require('./country_map.js'),
|
||||
[VIZ_TYPES.word_cloud]: require('./word_cloud.js'),
|
||||
[VIZ_TYPES.world_map]: require('./world_map.js'),
|
||||
[VIZ_TYPES.dual_line]: nvd3Vis,
|
||||
[VIZ_TYPES.event_flow]: require('./EventFlow.jsx'),
|
||||
[VIZ_TYPES.paired_ttest]: require('./paired_ttest.jsx'),
|
||||
[VIZ_TYPES.partition]: require('./partition.js'),
|
||||
[VIZ_TYPES.deck_scatter]: require('./deckgl/layers/scatter.jsx').default,
|
||||
[VIZ_TYPES.deck_screengrid]: require('./deckgl/layers/screengrid.jsx').default,
|
||||
[VIZ_TYPES.deck_grid]: require('./deckgl/layers/grid.jsx').default,
|
||||
[VIZ_TYPES.deck_hex]: require('./deckgl/layers/hex.jsx').default,
|
||||
[VIZ_TYPES.deck_path]: require('./deckgl/layers/path.jsx').default,
|
||||
[VIZ_TYPES.deck_geojson]: require('./deckgl/layers/geojson.jsx').default,
|
||||
[VIZ_TYPES.deck_arc]: require('./deckgl/layers/arc.jsx').default,
|
||||
[VIZ_TYPES.deck_polygon]: require('./deckgl/layers/polygon.jsx').default,
|
||||
[VIZ_TYPES.deck_multi]: require('./deckgl/multi.jsx'),
|
||||
[VIZ_TYPES.rose]: require('./rose.js'),
|
||||
};
|
||||
|
||||
export default vizMap;
|
||||
|
|
|
@ -17,13 +17,10 @@ function markupWidget(slice, payload) {
|
|||
}
|
||||
|
||||
const iframeId = `if__${slice.containerId}`;
|
||||
const stylesheets = payload.data.theme_css.map(
|
||||
href => `<link rel="stylesheet" type="text/css" href="${href}" />`,
|
||||
);
|
||||
const html = `
|
||||
<html>
|
||||
<head>
|
||||
${stylesheets}
|
||||
<link rel="stylesheet" type="text/css" href="${payload.data.theme_css}" />
|
||||
</head>
|
||||
<body style="background-color: transparent;">
|
||||
${payload.data.html}
|
||||
|
|
|
@ -71,9 +71,7 @@ function viz(slice, payload) {
|
|||
<MetricOption metric={metricData} url={url} showFormula={false} openInNewWindow />
|
||||
);
|
||||
} else {
|
||||
leftCell = url ?
|
||||
<a href={url} target="_blank" rel="noopener noreferrer">{metricLabel}</a>
|
||||
: metric;
|
||||
leftCell = url ? <a href={url} target="_blank">{metricLabel}</a> : metric;
|
||||
}
|
||||
const row = { metric: leftCell };
|
||||
fd.column_collection.forEach((column) => {
|
||||
|
|
|
@ -1,7 +1,8 @@
|
|||
const webpack = require('webpack');
|
||||
const path = require('path');
|
||||
const ManifestPlugin = require('webpack-manifest-plugin');
|
||||
const CleanWebpackPlugin = require('clean-webpack-plugin');
|
||||
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
|
||||
const WebpackAssetsManifest = require('webpack-assets-manifest');
|
||||
const ExtractTextPlugin = require('extract-text-webpack-plugin');
|
||||
|
||||
// input dir
|
||||
const APP_DIR = path.resolve(__dirname, './');
|
||||
|
@ -9,8 +10,6 @@ const APP_DIR = path.resolve(__dirname, './');
|
|||
// output dir
|
||||
const BUILD_DIR = path.resolve(__dirname, './dist');
|
||||
|
||||
const isDevMode = process.env.NODE_ENV !== 'production';
|
||||
|
||||
const config = {
|
||||
node: {
|
||||
fs: 'empty',
|
||||
|
@ -27,23 +26,20 @@ const config = {
|
|||
},
|
||||
output: {
|
||||
path: BUILD_DIR,
|
||||
publicPath: '/static/assets/dist/', // necessary for lazy-loaded chunks
|
||||
filename: '[name].[chunkhash].entry.js',
|
||||
chunkFilename: '[name].[chunkhash].chunk.js',
|
||||
},
|
||||
optimization: {
|
||||
splitChunks: {
|
||||
chunks: 'all',
|
||||
automaticNameDelimiter: '-',
|
||||
},
|
||||
chunkFilename: '[name].[chunkhash].entry.js',
|
||||
},
|
||||
resolve: {
|
||||
extensions: ['.js', '.jsx'],
|
||||
extensions: [
|
||||
'.js',
|
||||
'.jsx',
|
||||
],
|
||||
alias: {
|
||||
webworkify: 'webworkify-webpack',
|
||||
},
|
||||
|
||||
},
|
||||
module: {
|
||||
// uglyfying mapbox-gl results in undefined errors, see
|
||||
// https://github.com/mapbox/mapbox-gl-js/issues/4359#issuecomment-288001933
|
||||
noParse: /(mapbox-gl)\.js$/,
|
||||
rules: [
|
||||
{
|
||||
test: /datatables\.net.*/,
|
||||
|
@ -53,20 +49,32 @@ const config = {
|
|||
test: /\.jsx?$/,
|
||||
exclude: /node_modules/,
|
||||
loader: 'babel-loader',
|
||||
query: {
|
||||
presets: [
|
||||
'airbnb',
|
||||
'env',
|
||||
'react',
|
||||
],
|
||||
},
|
||||
},
|
||||
// Extract css files
|
||||
{
|
||||
test: /\.css$/,
|
||||
include: APP_DIR,
|
||||
use: [isDevMode ? MiniCssExtractPlugin.loader : 'style-loader', 'css-loader'],
|
||||
loader: ExtractTextPlugin.extract({
|
||||
use: ['css-loader'],
|
||||
fallback: 'style-loader',
|
||||
}),
|
||||
},
|
||||
// Optionally extract less files
|
||||
// or any other compile-to-css language
|
||||
{
|
||||
test: /\.less$/,
|
||||
include: APP_DIR,
|
||||
use: [
|
||||
isDevMode ? MiniCssExtractPlugin.loader : 'style-loader',
|
||||
'css-loader',
|
||||
'less-loader',
|
||||
],
|
||||
loader: ExtractTextPlugin.extract({
|
||||
use: ['css-loader', 'less-loader'],
|
||||
fallback: 'style-loader',
|
||||
}),
|
||||
},
|
||||
/* for css linking images */
|
||||
{
|
||||
|
@ -98,21 +106,27 @@ const config = {
|
|||
'react/lib/ReactContext': true,
|
||||
},
|
||||
plugins: [
|
||||
// creates a manifest.json mapping of name to hashed output used in template files
|
||||
new WebpackAssetsManifest({
|
||||
publicPath: true,
|
||||
entrypoints: true, // this enables us to include all relevant files for an entry
|
||||
}),
|
||||
|
||||
// create fresh dist/ upon build
|
||||
new ManifestPlugin(),
|
||||
new CleanWebpackPlugin(['dist']),
|
||||
|
||||
// text loading (webpack 4+)
|
||||
new MiniCssExtractPlugin({
|
||||
filename: '[name].[chunkhash].entry.css',
|
||||
chunkFilename: '[name].[chunkhash].chunk.css',
|
||||
new webpack.DefinePlugin({
|
||||
'process.env': {
|
||||
NODE_ENV: JSON.stringify(process.env.NODE_ENV),
|
||||
},
|
||||
}),
|
||||
new ExtractTextPlugin('[name].[chunkhash].css'),
|
||||
],
|
||||
};
|
||||
|
||||
if (process.env.NODE_ENV === 'production') {
|
||||
// Using settings suggested in https://github.com/webpack/webpack/issues/537
|
||||
const UJSplugin = new webpack.optimize.UglifyJsPlugin({
|
||||
sourceMap: false,
|
||||
minimize: true,
|
||||
parallel: {
|
||||
cache: true,
|
||||
workers: 4,
|
||||
},
|
||||
compress: false,
|
||||
});
|
||||
config.plugins.push(UJSplugin);
|
||||
}
|
||||
module.exports = config;
|
||||
|
|
File diff suppressed because it is too large
Load Diff
|
@ -3,14 +3,10 @@
|
|||
{% block head_css %}
|
||||
{{super()}}
|
||||
<link rel="icon" type="image/png" href="/static/assets/images/favicon.png">
|
||||
{% for entry in css_manifest('theme') %}
|
||||
<link rel="stylesheet" type="text/css" href="{{ entry }}" />
|
||||
{% endfor %}
|
||||
<link rel="stylesheet" type="text/css" href="{{ js_manifest('theme.css') }}" />
|
||||
{% endblock %}
|
||||
|
||||
{% block tail_js %}
|
||||
{{super()}}
|
||||
{% for entry in js_manifest('common') %}
|
||||
<script src="{{ entry }}"></script>
|
||||
{% endfor %}
|
||||
<script src="{{ js_manifest('common.js') }}"></script>
|
||||
{% endblock %}
|
||||
|
|
|
@ -14,25 +14,15 @@
|
|||
{% block head_css %}
|
||||
<link rel="icon" type="image/png" href="/static/assets/images/favicon.png">
|
||||
<link rel="stylesheet" type="text/css" href="/static/appbuilder/css/flags/flags16.css" />
|
||||
<link rel="stylesheet" type="text/css" href="{{ js_manifest('theme.css') }}" />
|
||||
<link rel="stylesheet" type="text/css" href="/static/appbuilder/css/font-awesome.min.css">
|
||||
|
||||
{% for entry in css_manifest('theme') %}
|
||||
<link rel="stylesheet" type="text/css" href="{{ entry }}" />
|
||||
{% endfor %}
|
||||
|
||||
{% if entry %}
|
||||
{% set entry_files = css_manifest(entry) %}
|
||||
{% for entry in entry_files %}
|
||||
<link rel="stylesheet" type="text/css" href="{{ entry }}" />
|
||||
{% endfor %}
|
||||
<link rel="stylesheet" type="text/css" href="{{ js_manifest(entry + '.css') }}" />
|
||||
{% endif %}
|
||||
|
||||
{% endblock %}
|
||||
|
||||
{% for entry in js_manifest('common') %}
|
||||
<script src="{{ entry }}"></script>
|
||||
{% endfor %}
|
||||
|
||||
{% block head_js %}
|
||||
<script src="{{ js_manifest('common.js') }}"></script>
|
||||
{% endblock %}
|
||||
<input
|
||||
type="hidden"
|
||||
name="csrf_token"
|
||||
|
@ -76,10 +66,7 @@
|
|||
</div>
|
||||
{% block tail_js %}
|
||||
{% if entry %}
|
||||
{% set entry_files = js_manifest(entry) %}
|
||||
{% for entry in entry_files %}
|
||||
<script src="{{ entry }}"></script>
|
||||
{% endfor %}
|
||||
<script src="{{ js_manifest(entry + '.js') }}"></script>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
</body>
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
{% block tail_js %}
|
||||
{% for entry in js_manifest(filename) %}
|
||||
<script src="{{ entry }}"></script>
|
||||
{% endfor %}
|
||||
<script
|
||||
src="{{ js_manifest(filename + '.js') }}">
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
|
|
@ -36,7 +36,7 @@ import simplejson as json
|
|||
from six import string_types, text_type
|
||||
from six.moves import cPickle as pkl, reduce
|
||||
|
||||
from superset import app, cache, get_css_manifest_files, utils
|
||||
from superset import app, cache, get_manifest_file, utils
|
||||
from superset.utils import DTTM_ALIAS, JS_MAX_INTEGER, merge_extra_filters
|
||||
|
||||
|
||||
|
@ -696,7 +696,7 @@ class MarkupViz(BaseViz):
|
|||
code = self.form_data.get('code', '')
|
||||
if markup_type == 'markdown':
|
||||
code = markdown(code)
|
||||
return dict(html=code, theme_css=get_css_manifest_files('theme'))
|
||||
return dict(html=code, theme_css=get_manifest_file('theme.css'))
|
||||
|
||||
|
||||
class SeparatorViz(MarkupViz):
|
||||
|
|
Loading…
Reference in New Issue