mirror of https://github.com/apache/superset.git
[webpack 4] third time's the charm ;) (#5370)
* [perf] add webpack 4 + SplitChunks + lazy load visualizations (#5240) * [webpack] setup lazy loading for all visualizations * [lazy-load] push renderVis function to <Chart /> state * no mapbox token * [lazy loading] use native webpack import func to fix chunk names, add babel-plugin-syntax-dynamic-import, fix rebase bug. * fix geojson import, undefined t, and fix async css bug * [lazy load] actually add babel-plugin-syntax-dynamic-import * [webpack] working dev version of webpack v4 * [webpack 4] fix url issues, use mini-css-extract-plugin and webpack-assets-manifest plugins * [webpack 4] use splitchunks for all files, update templates to multi-file entrypoints * [webpack 4] multiple theme entry files for markup vis css, don't uglify mapbox * [webpack 4] lint python manifest changes, update yarn lock. * [webpack 4] fix tests with babel-plugin-dynamic-import-node * [webpack 4] only use 'dynamic-import-node' plugin in tests, update <Chart /> vis promise when vis type changes * [webpack 4] clean up package.json and yarn.lock after rebase * [webpack 4] lint? * [webpack 4] lint for real * [webpack 4][istanbul] ignore visualizations/index.js * [webpack 4] fix rebase bug, update dashboard/deprecated/chart/Chart.jsx to use vis promises. * [webpack 4] lint and test * [webpack 4] yarn.lock
This commit is contained in:
parent
75cf5e198f
commit
8b7aaec19d
|
@ -47,23 +47,37 @@ def parse_manifest_json():
|
|||
global manifest
|
||||
try:
|
||||
with open(MANIFEST_FILE, 'r') as f:
|
||||
manifest = json.load(f)
|
||||
# the manifest inclues non-entry files
|
||||
# we only need entries in templates
|
||||
full_manifest = json.load(f)
|
||||
manifest = full_manifest.get('entrypoints', {})
|
||||
except Exception:
|
||||
pass
|
||||
|
||||
|
||||
def get_manifest_file(filename):
|
||||
def get_js_manifest_files(filename):
|
||||
if app.debug:
|
||||
parse_manifest_json()
|
||||
return '/static/assets/dist/' + manifest.get(filename, '')
|
||||
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', [])
|
||||
|
||||
|
||||
parse_manifest_json()
|
||||
|
||||
|
||||
@app.context_processor
|
||||
def get_js_manifest():
|
||||
return dict(js_manifest=get_manifest_file)
|
||||
def get_manifest():
|
||||
return dict(
|
||||
js_manifest=get_js_manifest_files,
|
||||
css_manifest=get_css_manifest_files,
|
||||
)
|
||||
|
||||
|
||||
#################################################################
|
||||
|
|
|
@ -1,3 +1,4 @@
|
|||
{
|
||||
"presets" : ["airbnb"],
|
||||
"presets" : ["airbnb", "react", "env"],
|
||||
"plugins": ["syntax-dynamic-import"],
|
||||
}
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
{
|
||||
"extends": "airbnb",
|
||||
"parserOptions":{
|
||||
"parser": "babel-eslint",
|
||||
"parserOptions": {
|
||||
"ecmaFeatures": {
|
||||
"experimentalObjectRestSpread": true
|
||||
}
|
||||
|
|
|
@ -3,7 +3,8 @@ instrumentation:
|
|||
root: './src'
|
||||
extensions: ['.js', '.jsx']
|
||||
excludes: [
|
||||
'dist/**'
|
||||
'dist/**',
|
||||
'visualizations/index.js',
|
||||
]
|
||||
embed-source: false
|
||||
variable: __coverage__
|
||||
|
|
|
@ -10,12 +10,10 @@
|
|||
"scripts": {
|
||||
"test": "mocha --require ignore-styles --compilers js:babel-core/register --require spec/helpers/browser.js 'spec/**/*_spec.*'",
|
||||
"test:one": "mocha --require ignore-styles --compilers js:babel-core/register --require spec/helpers/browser.js",
|
||||
"cover": "babel-node node_modules/.bin/babel-istanbul cover _mocha -- --require ignore-styles spec/helpers/browser.js 'spec/**/*_spec.*'",
|
||||
"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",
|
||||
"cover": "babel-node node_modules/.bin/babel-istanbul cover _mocha -- --compilers babel-core/register --require spec/helpers/browser.js --require ignore-styles '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",
|
||||
"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"
|
||||
|
@ -40,6 +38,9 @@
|
|||
"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": {
|
||||
"@data-ui/event-flow": "^0.0.54",
|
||||
|
@ -131,13 +132,16 @@
|
|||
"devDependencies": {
|
||||
"babel-cli": "^6.14.0",
|
||||
"babel-core": "^6.10.4",
|
||||
"babel-eslint": "^8.2.2",
|
||||
"babel-istanbul": "^0.12.2",
|
||||
"babel-loader": "^7.0.0",
|
||||
"babel-loader": "^7.1.4",
|
||||
"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.16",
|
||||
"clean-webpack-plugin": "^0.1.19",
|
||||
"css-loader": "^0.28.0",
|
||||
"enzyme": "^2.0.0",
|
||||
"eslint": "^4.19.0",
|
||||
|
@ -148,8 +152,7 @@
|
|||
"eslint-plugin-prettier": "^2.6.0",
|
||||
"eslint-plugin-react": "^7.0.1",
|
||||
"exports-loader": "^0.7.0",
|
||||
"extract-text-webpack-plugin": "3.0.2",
|
||||
"file-loader": "^0.11.1",
|
||||
"file-loader": "^1.1.11",
|
||||
"github-changes": "^1.0.4",
|
||||
"ignore-styles": "^5.0.1",
|
||||
"imports-loader": "^0.7.1",
|
||||
|
@ -157,7 +160,8 @@
|
|||
"jsdom": "9.12.0",
|
||||
"json-loader": "^0.5.4",
|
||||
"less": "^2.6.1",
|
||||
"less-loader": "^4.0.3",
|
||||
"less-loader": "^4.1.0",
|
||||
"mini-css-extract-plugin": "^0.4.0",
|
||||
"mocha": "^3.2.0",
|
||||
"npm-check-updates": "^2.14.0",
|
||||
"prettier": "^1.12.1",
|
||||
|
@ -169,10 +173,10 @@
|
|||
"style-loader": "^0.21.0",
|
||||
"transform-loader": "^0.2.3",
|
||||
"uglifyjs-webpack-plugin": "^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"
|
||||
"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"
|
||||
}
|
||||
}
|
||||
|
|
|
@ -3,7 +3,12 @@ import 'babel-polyfill';
|
|||
import chai from 'chai';
|
||||
import jsdom from 'jsdom';
|
||||
|
||||
require('babel-register')();
|
||||
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'],
|
||||
});
|
||||
|
||||
const exposedProperties = ['window', 'navigator', 'document'];
|
||||
|
||||
|
|
|
@ -38,10 +38,10 @@ describe('Chart', () => {
|
|||
<Chart {...mockedProps} />,
|
||||
);
|
||||
});
|
||||
describe('renderViz', () => {
|
||||
describe('renderVis', () => {
|
||||
let stub;
|
||||
beforeEach(() => {
|
||||
stub = sinon.stub(wrapper.instance(), 'renderViz');
|
||||
stub = sinon.stub(wrapper.instance(), 'renderVis');
|
||||
});
|
||||
afterEach(() => {
|
||||
stub.restore();
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
/* eslint camelcase: 0 */
|
||||
/* eslint no-undef: 2 */
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import Mustache from 'mustache';
|
||||
|
@ -10,7 +10,7 @@ import Loading from '../components/Loading';
|
|||
import { Logger, LOG_ACTIONS_RENDER_CHART } from '../logger';
|
||||
import StackTraceMessage from '../components/StackTraceMessage';
|
||||
import RefreshChartOverlay from '../components/RefreshChartOverlay';
|
||||
import visMap from '../visualizations';
|
||||
import visPromiseLookup from '../visualizations';
|
||||
import sandboxedEval from '../modules/sandbox';
|
||||
import './chart.css';
|
||||
|
||||
|
@ -54,7 +54,11 @@ const defaultProps = {
|
|||
class Chart extends React.PureComponent {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {};
|
||||
// visualizations are lazy-loaded with promises that resolve to a renderVis function
|
||||
this.state = {
|
||||
renderVis: null,
|
||||
};
|
||||
|
||||
// these properties are used by visualizations
|
||||
this.annotationData = props.annotationData;
|
||||
this.containerId = props.containerId;
|
||||
|
@ -66,16 +70,23 @@ 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) {
|
||||
const { formData } = this.props;
|
||||
this.props.actions.runQuery(formData, false, this.props.timeout, this.props.chartId);
|
||||
this.props.actions.runQuery(
|
||||
this.props.formData,
|
||||
false,
|
||||
this.props.timeout,
|
||||
this.props.chartId,
|
||||
);
|
||||
} else {
|
||||
// when drag/dropping in a dashboard, a chart may be unmounted/remounted but still have data
|
||||
this.renderViz();
|
||||
this.renderVis();
|
||||
}
|
||||
|
||||
this.loadAsyncVis(this.props.vizType);
|
||||
}
|
||||
|
||||
componentWillReceiveProps(nextProps) {
|
||||
|
@ -84,6 +95,10 @@ 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) {
|
||||
|
@ -97,10 +112,14 @@ class Chart extends React.PureComponent {
|
|||
prevProps.width !== this.props.width ||
|
||||
prevProps.lastRendered !== this.props.lastRendered)
|
||||
) {
|
||||
this.renderViz();
|
||||
this.renderVis();
|
||||
}
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
this.visPromise = null;
|
||||
}
|
||||
|
||||
getFilters() {
|
||||
return this.props.getFilters();
|
||||
}
|
||||
|
@ -109,6 +128,22 @@ 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.warn(error); // eslint-disable-line
|
||||
this.props.actions.chartRenderingFailed(error, this.props.chartId);
|
||||
});
|
||||
}
|
||||
|
||||
addFilter(col, vals, merge = true, refresh = true) {
|
||||
this.props.addFilter(col, vals, merge, refresh);
|
||||
}
|
||||
|
@ -148,6 +183,7 @@ class Chart extends React.PureComponent {
|
|||
return this.props.datasource.verbose_map[metric] || metric;
|
||||
}
|
||||
|
||||
// eslint-disable-next-line camelcase
|
||||
render_template(s) {
|
||||
const context = {
|
||||
width: this.width(),
|
||||
|
@ -176,41 +212,50 @@ class Chart extends React.PureComponent {
|
|||
return null;
|
||||
}
|
||||
|
||||
renderViz() {
|
||||
const { vizType, formData, queryResponse, setControlValue, chartId, chartStatus } = this.props;
|
||||
const visRenderer = visMap[vizType];
|
||||
const renderStart = Logger.getTimestamp();
|
||||
try {
|
||||
// Executing user-defined data mutator function
|
||||
if (formData.js_data) {
|
||||
queryResponse.data = sandboxedEval(formData.js_data)(queryResponse.data);
|
||||
renderVis() {
|
||||
const { chartStatus } = this.props;
|
||||
const hasVisPromise = !!this.state.renderVis;
|
||||
// check that we have the render function and data
|
||||
if (hasVisPromise && ['success', 'rendered'].indexOf(chartStatus) > -1) {
|
||||
const { vizType, formData, queryResponse, setControlValue, chartId } = this.props;
|
||||
const renderStart = Logger.getTimestamp();
|
||||
|
||||
try {
|
||||
// Executing user-defined data mutator function
|
||||
if (formData.js_data) {
|
||||
queryResponse.data = sandboxedEval(formData.js_data)(queryResponse.data);
|
||||
}
|
||||
// [re]rendering the visualization
|
||||
this.state.renderVis(this, queryResponse, setControlValue);
|
||||
|
||||
if (chartStatus !== 'rendered') {
|
||||
this.props.actions.chartRenderingSucceeded(chartId);
|
||||
}
|
||||
|
||||
Logger.append(LOG_ACTIONS_RENDER_CHART, {
|
||||
slice_id: chartId,
|
||||
viz_type: vizType,
|
||||
start_offset: renderStart,
|
||||
duration: Logger.getTimestamp() - renderStart,
|
||||
});
|
||||
} catch (e) {
|
||||
console.warn(e); // eslint-disable-line
|
||||
this.props.actions.chartRenderingFailed(e, chartId);
|
||||
}
|
||||
visRenderer(this, queryResponse, setControlValue);
|
||||
if (chartStatus !== 'rendered') {
|
||||
this.props.actions.chartRenderingSucceeded(chartId);
|
||||
}
|
||||
Logger.append(LOG_ACTIONS_RENDER_CHART, {
|
||||
slice_id: chartId,
|
||||
viz_type: vizType,
|
||||
start_offset: renderStart,
|
||||
duration: Logger.getTimestamp() - renderStart,
|
||||
});
|
||||
this.props.actions.chartRenderingSucceeded(chartId);
|
||||
} catch (e) {
|
||||
console.error(e); // eslint-disable-line no-console
|
||||
this.props.actions.chartRenderingFailed(e, chartId);
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const isLoading = this.props.chartStatus === 'loading';
|
||||
const isLoading = this.props.chartStatus === 'loading' || !this.state.renderVis;
|
||||
|
||||
// this allows <Loading /> to be positioned in the middle of the chart
|
||||
const containerStyles = isLoading ? { height: this.height(), width: this.width() } : null;
|
||||
return (
|
||||
<div className={`chart-container ${isLoading ? 'is-loading' : ''}`} style={containerStyles}>
|
||||
{this.renderTooltip()}
|
||||
{isLoading && <Loading size={75} />}
|
||||
|
||||
{isLoading && <Loading size={50} />}
|
||||
|
||||
{this.props.chartAlert && (
|
||||
<StackTraceMessage
|
||||
message={this.props.chartAlert}
|
||||
|
|
|
@ -8,14 +8,14 @@ const defaultProps = {
|
|||
size: 50,
|
||||
};
|
||||
|
||||
export default function Loading(props) {
|
||||
export default function Loading({ size }) {
|
||||
return (
|
||||
<img
|
||||
className="loading"
|
||||
alt="Loading..."
|
||||
src="/static/assets/images/loading.gif"
|
||||
style={{
|
||||
width: Math.min(props.size, 50),
|
||||
width: Math.min(size, 50),
|
||||
// height is auto
|
||||
padding: 0,
|
||||
margin: 0,
|
||||
|
|
|
@ -46,6 +46,9 @@ const defaultProps = {
|
|||
sliceCanEdit: false,
|
||||
};
|
||||
|
||||
const annoationsLoading = t('Annotation layers are still loading.');
|
||||
const annoationsError = t('One ore more annotation layers failed loading.');
|
||||
|
||||
class SliceHeader extends React.PureComponent {
|
||||
render() {
|
||||
const {
|
||||
|
@ -62,26 +65,27 @@ class SliceHeader extends React.PureComponent {
|
|||
sliceName,
|
||||
supersetCanExplore,
|
||||
sliceCanEdit,
|
||||
editMode,
|
||||
updateSliceName,
|
||||
annotationQuery,
|
||||
annotationError,
|
||||
} = this.props;
|
||||
|
||||
const annoationsLoading = t('Annotation layers are still loading.');
|
||||
const annoationsError = t('One ore more annotation layers failed loading.');
|
||||
|
||||
return (
|
||||
<div className="chart-header" ref={innerRef}>
|
||||
<div className="header">
|
||||
<EditableTitle
|
||||
title={
|
||||
sliceName ||
|
||||
(this.props.editMode
|
||||
(editMode
|
||||
? '---' // this makes an empty title clickable
|
||||
: '')
|
||||
}
|
||||
canEdit={this.props.editMode}
|
||||
onSaveTitle={this.props.updateSliceName}
|
||||
canEdit={editMode}
|
||||
onSaveTitle={updateSliceName}
|
||||
showTooltip={false}
|
||||
/>
|
||||
{!!Object.values(this.props.annotationQuery).length && (
|
||||
{!!Object.values(annotationQuery).length && (
|
||||
<TooltipWrapper
|
||||
label="annotations-loading"
|
||||
placement="top"
|
||||
|
@ -90,7 +94,7 @@ class SliceHeader extends React.PureComponent {
|
|||
<i className="fa fa-refresh warning" />
|
||||
</TooltipWrapper>
|
||||
)}
|
||||
{!!Object.values(this.props.annotationError).length && (
|
||||
{!!Object.values(annotationError).length && (
|
||||
<TooltipWrapper
|
||||
label="annoation-errors"
|
||||
placement="top"
|
||||
|
@ -99,7 +103,7 @@ class SliceHeader extends React.PureComponent {
|
|||
<i className="fa fa-exclamation-circle danger" />
|
||||
</TooltipWrapper>
|
||||
)}
|
||||
{!this.props.editMode && (
|
||||
{!editMode && (
|
||||
<SliceHeaderControls
|
||||
slice={slice}
|
||||
isCached={isCached}
|
||||
|
|
|
@ -10,7 +10,7 @@ import Loading from '../../../components/Loading';
|
|||
import { Logger, LOG_ACTIONS_RENDER_CHART } from '../../../logger';
|
||||
import StackTraceMessage from '../../../components/StackTraceMessage';
|
||||
import RefreshChartOverlay from '../../../components/RefreshChartOverlay';
|
||||
import visMap from '../../../visualizations';
|
||||
import visPromiseLookup from '../../../visualizations';
|
||||
import sandboxedEval from '../../../modules/sandbox';
|
||||
import './chart.css';
|
||||
|
||||
|
@ -58,7 +58,10 @@ const defaultProps = {
|
|||
class Chart extends React.PureComponent {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {};
|
||||
// visualizations are lazy-loaded with promises that resolve to a renderVis function
|
||||
this.state = {
|
||||
renderVis: null,
|
||||
};
|
||||
// these properties are used by visualizations
|
||||
this.annotationData = props.annotationData;
|
||||
this.containerId = props.containerId;
|
||||
|
@ -72,6 +75,7 @@ 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() {
|
||||
|
@ -81,6 +85,7 @@ class Chart extends React.PureComponent {
|
|||
this.props.chartKey,
|
||||
);
|
||||
}
|
||||
this.loadAsyncVis(this.props.vizType);
|
||||
}
|
||||
|
||||
componentWillReceiveProps(nextProps) {
|
||||
|
@ -89,6 +94,10 @@ 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) {
|
||||
|
@ -106,6 +115,10 @@ class Chart extends React.PureComponent {
|
|||
}
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
this.visPromise = null;
|
||||
}
|
||||
|
||||
getFilters() {
|
||||
return this.props.getFilters();
|
||||
}
|
||||
|
@ -114,6 +127,22 @@ 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.renderViz);
|
||||
}
|
||||
})
|
||||
.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);
|
||||
}
|
||||
|
@ -186,31 +215,37 @@ class Chart extends React.PureComponent {
|
|||
}
|
||||
|
||||
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);
|
||||
const hasVisPromise = !!this.state.renderVis;
|
||||
|
||||
if (hasVisPromise && ['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_CHART, {
|
||||
slice_id: this.props.chartKey,
|
||||
viz_type: this.props.vizType,
|
||||
start_offset: renderStart,
|
||||
duration: Logger.getTimestamp() - renderStart,
|
||||
});
|
||||
if (this.props.chartStatus !== 'rendered') {
|
||||
this.props.actions.chartRenderingSucceeded(this.props.chartKey);
|
||||
}
|
||||
} catch (e) {
|
||||
this.props.actions.chartRenderingFailed(e, this.props.chartKey);
|
||||
}
|
||||
// [re]rendering the visualization
|
||||
viz(this, qr, this.props.setControlValue);
|
||||
Logger.append(LOG_ACTIONS_RENDER_CHART, {
|
||||
slice_id: this.props.chartKey,
|
||||
viz_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';
|
||||
const isLoading = this.props.chartStatus === 'loading' || !this.state.renderVis;
|
||||
|
||||
return (
|
||||
<div className={`token col-md-12 ${isLoading ? 'is-loading' : ''}`}>
|
||||
{this.renderTooltip()}
|
||||
|
|
|
@ -1,6 +1,4 @@
|
|||
/* 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 = {
|
||||
|
@ -54,54 +52,91 @@ 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]: 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'),
|
||||
[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')),
|
||||
};
|
||||
|
||||
export default vizMap;
|
||||
|
|
|
@ -17,10 +17,13 @@ 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>
|
||||
<link rel="stylesheet" type="text/css" href="${payload.data.theme_css}" />
|
||||
${stylesheets}
|
||||
</head>
|
||||
<body style="background-color: transparent;">
|
||||
${payload.data.html}
|
||||
|
|
|
@ -1,8 +1,7 @@
|
|||
const webpack = require('webpack');
|
||||
const path = require('path');
|
||||
const ManifestPlugin = require('webpack-manifest-plugin');
|
||||
const CleanWebpackPlugin = require('clean-webpack-plugin');
|
||||
const ExtractTextPlugin = require('extract-text-webpack-plugin');
|
||||
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
|
||||
const WebpackAssetsManifest = require('webpack-assets-manifest');
|
||||
|
||||
// input dir
|
||||
const APP_DIR = path.resolve(__dirname, './');
|
||||
|
@ -10,6 +9,8 @@ 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,20 +28,23 @@ const config = {
|
|||
},
|
||||
output: {
|
||||
path: BUILD_DIR,
|
||||
publicPath: '/static/assets/dist/', // necessary for lazy-loaded chunks
|
||||
filename: '[name].[chunkhash].entry.js',
|
||||
chunkFilename: '[name].[chunkhash].entry.js',
|
||||
chunkFilename: '[name].[chunkhash].chunk.js',
|
||||
},
|
||||
optimization: {
|
||||
splitChunks: {
|
||||
chunks: 'all',
|
||||
automaticNameDelimiter: '-',
|
||||
},
|
||||
},
|
||||
resolve: {
|
||||
extensions: [
|
||||
'.js',
|
||||
'.jsx',
|
||||
],
|
||||
alias: {
|
||||
webworkify: 'webworkify-webpack',
|
||||
},
|
||||
|
||||
extensions: ['.js', '.jsx'],
|
||||
},
|
||||
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.*/,
|
||||
|
@ -50,32 +54,20 @@ const config = {
|
|||
test: /\.jsx?$/,
|
||||
exclude: /node_modules/,
|
||||
loader: 'babel-loader',
|
||||
query: {
|
||||
presets: [
|
||||
'airbnb',
|
||||
'env',
|
||||
'react',
|
||||
],
|
||||
},
|
||||
},
|
||||
// Extract css files
|
||||
{
|
||||
test: /\.css$/,
|
||||
include: APP_DIR,
|
||||
loader: ExtractTextPlugin.extract({
|
||||
use: ['css-loader'],
|
||||
fallback: 'style-loader',
|
||||
}),
|
||||
use: [isDevMode ? MiniCssExtractPlugin.loader : 'style-loader', 'css-loader'],
|
||||
},
|
||||
// Optionally extract less files
|
||||
// or any other compile-to-css language
|
||||
{
|
||||
test: /\.less$/,
|
||||
include: APP_DIR,
|
||||
loader: ExtractTextPlugin.extract({
|
||||
use: ['css-loader', 'less-loader'],
|
||||
fallback: 'style-loader',
|
||||
}),
|
||||
use: [
|
||||
isDevMode ? MiniCssExtractPlugin.loader : 'style-loader',
|
||||
'css-loader',
|
||||
'less-loader',
|
||||
],
|
||||
},
|
||||
/* for css linking images */
|
||||
{
|
||||
|
@ -107,27 +99,21 @@ const config = {
|
|||
'react/lib/ReactContext': true,
|
||||
},
|
||||
plugins: [
|
||||
new ManifestPlugin(),
|
||||
new CleanWebpackPlugin(['dist']),
|
||||
new webpack.DefinePlugin({
|
||||
'process.env': {
|
||||
NODE_ENV: JSON.stringify(process.env.NODE_ENV),
|
||||
},
|
||||
// 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 CleanWebpackPlugin(['dist']),
|
||||
|
||||
// text loading (webpack 4+)
|
||||
new MiniCssExtractPlugin({
|
||||
filename: '[name].[chunkhash].entry.css',
|
||||
chunkFilename: '[name].[chunkhash].chunk.css',
|
||||
}),
|
||||
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,10 +3,14 @@
|
|||
{% block head_css %}
|
||||
{{super()}}
|
||||
<link rel="icon" type="image/png" href="/static/assets/images/favicon.png">
|
||||
<link rel="stylesheet" type="text/css" href="{{ js_manifest('theme.css') }}" />
|
||||
{% for entry in css_manifest('theme') %}
|
||||
<link rel="stylesheet" type="text/css" href="{{ entry }}" />
|
||||
{% endfor %}
|
||||
{% endblock %}
|
||||
|
||||
{% block tail_js %}
|
||||
{{super()}}
|
||||
<script src="{{ js_manifest('common.js') }}"></script>
|
||||
{% for entry in js_manifest('common') %}
|
||||
<script src="{{ entry }}"></script>
|
||||
{% endfor %}
|
||||
{% endblock %}
|
||||
|
|
|
@ -14,15 +14,25 @@
|
|||
{% 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 %}
|
||||
<link rel="stylesheet" type="text/css" href="{{ js_manifest(entry + '.css') }}" />
|
||||
{% set entry_files = css_manifest(entry) %}
|
||||
{% for entry in entry_files %}
|
||||
<link rel="stylesheet" type="text/css" href="{{ entry }}" />
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
|
||||
{% endblock %}
|
||||
{% block head_js %}
|
||||
<script src="{{ js_manifest('common.js') }}"></script>
|
||||
{% endblock %}
|
||||
|
||||
{% for entry in js_manifest('common') %}
|
||||
<script src="{{ entry }}"></script>
|
||||
{% endfor %}
|
||||
|
||||
<input
|
||||
type="hidden"
|
||||
name="csrf_token"
|
||||
|
@ -66,7 +76,10 @@
|
|||
</div>
|
||||
{% block tail_js %}
|
||||
{% if entry %}
|
||||
<script src="{{ js_manifest(entry + '.js') }}"></script>
|
||||
{% set entry_files = js_manifest(entry) %}
|
||||
{% for entry in entry_files %}
|
||||
<script src="{{ entry }}"></script>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
</body>
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
{% block tail_js %}
|
||||
<script
|
||||
src="{{ js_manifest(filename + '.js') }}">
|
||||
</script>
|
||||
{% for entry in js_manifest(filename) %}
|
||||
<script src="{{ entry }}"></script>
|
||||
{% endfor %}
|
||||
{% endblock %}
|
||||
|
|
|
@ -37,7 +37,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_manifest_file, utils
|
||||
from superset import app, cache, get_css_manifest_files, utils
|
||||
from superset.exceptions import NullValueException, SpatialException
|
||||
from superset.utils import DTTM_ALIAS, JS_MAX_INTEGER, merge_extra_filters
|
||||
|
||||
|
@ -690,7 +690,7 @@ class MarkupViz(BaseViz):
|
|||
code = self.form_data.get('code', '')
|
||||
if markup_type == 'markdown':
|
||||
code = markdown(code)
|
||||
return dict(html=code, theme_css=get_manifest_file('theme.css'))
|
||||
return dict(html=code, theme_css=get_css_manifest_files('theme'))
|
||||
|
||||
|
||||
class SeparatorViz(MarkupViz):
|
||||
|
|
Loading…
Reference in New Issue