diff --git a/packages/superset-ui-demo/storybook/shared/components/createQueryStory.tsx b/packages/superset-ui-demo/storybook/shared/components/createQueryStory.tsx
index 3f01df76a4..484c2489e5 100644
--- a/packages/superset-ui-demo/storybook/shared/components/createQueryStory.tsx
+++ b/packages/superset-ui-demo/storybook/shared/components/createQueryStory.tsx
@@ -1,82 +1,74 @@
-// import React from 'react';
-// import { text, select } from '@storybook/addon-knobs';
-// import { SuperChart, ChartDataProvider } from '@superset-ui/chart';
-// import { SupersetClient } from '@superset-ui/connection';
-// import Expandable from './Expandable';
-// import VerifyCORS, { renderError } from './VerifyCORS';
+import React from 'react';
+import { text, select } from '@storybook/addon-knobs';
+import { SuperChart, ChartDataProvider } from '@superset-ui/chart';
+import { SupersetClient } from '@superset-ui/connection';
+import Expandable from './Expandable';
+import VerifyCORS, { renderError } from './VerifyCORS';
-// export default function createQueryStory({
-// choices,
-// storyName = 'Queries',
-// storyPath = '',
-// }: {
-// choices: {
-// [key: string]: {
-// chartType: string;
-// formData: {
-// [key: string]: any;
-// };
-// };
-// };
-// storyName: string;
-// storyPath: string;
-// }) {
-// const keys = Object.keys(choices);
+export default function createQueryStory({
+ choices,
+}: {
+ choices: {
+ [key: string]: {
+ chartType: string;
+ formData: {
+ [key: string]: any;
+ };
+ };
+ };
+}) {
+ const keys = Object.keys(choices);
-// return {
-// renderStory: () => {
-// const host = text('Set Superset App host for CORS request', 'localhost:8088');
-// const mode = select('Choose mode:', keys, keys[0]);
-// const { formData: presetFormData, chartType } = choices[mode];
-// const width = text('Vis width', '400');
-// const height = text('Vis height', '400');
-// const formData = text('Override formData', JSON.stringify(presetFormData, null, 2));
+ return () => {
+ const host = text('Set Superset App host for CORS request', 'localhost:8088');
+ const mode = select('Choose mode:', keys, keys[0]);
+ const { formData: presetFormData, chartType } = choices[mode];
+ const width = text('Vis width', '400');
+ const height = text('Vis height', '400');
+ const formData = text('Override formData', JSON.stringify(presetFormData, null, 2));
-// return (
-//
-//
-// {() => (
-//
-// {({ loading, payload, error }) => {
-// if (loading) return Loading!
;
+ return (
+
+
+ {() => (
+
+ {({ loading, payload, error }) => {
+ if (loading) return Loading!
;
-// if (error) return renderError(error);
+ if (error) return renderError(error);
-// if (payload)
-// return (
-// <>
-//
-//
-//
-// {JSON.stringify(payload, null, 2)}
-//
-// >
-// );
+ if (payload)
+ return (
+ <>
+
+
+
+ {JSON.stringify(payload, null, 2)}
+
+ >
+ );
-// return null;
-// }}
-//
-// )}
-//
-//
-// );
-// },
-// storyName,
-// storyPath,
-// };
-// }
+ return null;
+ }}
+
+ )}
+
+
+ );
+ };
+}
diff --git a/packages/superset-ui-demo/storybook/stories/plugins/preset-chart-xy/Line/Stories.tsx b/packages/superset-ui-demo/storybook/stories/plugins/preset-chart-xy/Line/Stories.tsx
index 48e396e6d6..e27f9e043c 100644
--- a/packages/superset-ui-demo/storybook/stories/plugins/preset-chart-xy/Line/Stories.tsx
+++ b/packages/superset-ui-demo/storybook/stories/plugins/preset-chart-xy/Line/Stories.tsx
@@ -13,3 +13,4 @@ export { default as withLabelFlush } from './stories/flush';
export { default as withMissingData } from './stories/missing';
export { default as legacyShim } from './stories/legacy';
export { default as withTimeShift } from './stories/timeShift';
+export { default as query } from './stories/query';
diff --git a/packages/superset-ui-demo/storybook/stories/plugins/preset-chart-xy/Line/stories/query.tsx b/packages/superset-ui-demo/storybook/stories/plugins/preset-chart-xy/Line/stories/query.tsx
index a6635c154c..9c61c1de97 100644
--- a/packages/superset-ui-demo/storybook/stories/plugins/preset-chart-xy/Line/stories/query.tsx
+++ b/packages/superset-ui-demo/storybook/stories/plugins/preset-chart-xy/Line/stories/query.tsx
@@ -1,67 +1,64 @@
-// /* eslint-disable sort-keys */
-// import { LINE_PLUGIN_TYPE, LINE_PLUGIN_LEGACY_TYPE } from '../constants';
-// import createQueryStory from '../../../../../shared/components/createQueryStory';
+import { LINE_PLUGIN_TYPE, LINE_PLUGIN_LEGACY_TYPE } from '../constants';
+import createQueryStory from '../../../../../shared/components/createQueryStory';
-// export default createQueryStory({
-// choices: {
-// 'Line Chart - Legacy API': {
-// chartType: LINE_PLUGIN_LEGACY_TYPE,
-// formData: {
-// datasource: '3__table',
-// viz_type: 'line',
-// url_params: {},
-// granularity_sqla: 'ds',
-// time_grain_sqla: 'P1D',
-// time_range: '100 years ago : now',
-// metrics: ['sum__num'],
-// adhoc_filters: [],
-// groupby: [],
-// limit: 25,
-// row_limit: 50000,
-// },
-// },
-// 'Line Chart - /api/v1/query': {
-// chartType: LINE_PLUGIN_TYPE,
-// formData: {
-// viz_type: LINE_PLUGIN_TYPE,
-// datasource: '3__table',
-// granularity_sqla: 'ds',
-// time_grain_sqla: 'P1D',
-// time_range: '100 years ago : now',
-// metrics: ['sum__num'],
-// limit: 25,
-// row_limit: 50000,
-// encoding: {
-// x: {
-// field: '__timestamp',
-// type: 'temporal',
-// format: '%Y',
-// scale: {
-// type: 'time',
-// },
-// axis: {
-// title: 'Time',
-// },
-// },
-// y: {
-// field: 'sum__num',
-// type: 'quantitative',
-// scale: {
-// type: 'linear',
-// },
-// axis: {
-// title: 'Number of Babies',
-// },
-// },
-// stroke: {
-// field: 'gender',
-// type: 'nominal',
-// legend: true,
-// },
-// },
-// },
-// },
-// },
-// storyName: 'Queries',
-// storyPath: 'preset-chart-xy|LineChartPlugin',
-// })
+export default createQueryStory({
+ choices: {
+ 'Line Chart - Legacy API': {
+ chartType: LINE_PLUGIN_LEGACY_TYPE,
+ formData: {
+ datasource: '3__table',
+ viz_type: 'line',
+ url_params: {},
+ granularity_sqla: 'ds',
+ time_grain_sqla: 'P1D',
+ time_range: '100 years ago : now',
+ metrics: ['sum__num'],
+ adhoc_filters: [],
+ groupby: [],
+ limit: 25,
+ row_limit: 50000,
+ },
+ },
+ 'Line Chart - /api/v1/query': {
+ chartType: LINE_PLUGIN_TYPE,
+ formData: {
+ viz_type: LINE_PLUGIN_TYPE,
+ datasource: '3__table',
+ granularity_sqla: 'ds',
+ time_grain_sqla: 'P1D',
+ time_range: '100 years ago : now',
+ metrics: ['sum__num'],
+ limit: 25,
+ row_limit: 50000,
+ encoding: {
+ x: {
+ field: '__timestamp',
+ type: 'temporal',
+ format: '%Y',
+ scale: {
+ type: 'time',
+ },
+ axis: {
+ title: 'Time',
+ },
+ },
+ y: {
+ field: 'sum__num',
+ type: 'quantitative',
+ scale: {
+ type: 'linear',
+ },
+ axis: {
+ title: 'Number of Babies',
+ },
+ },
+ stroke: {
+ field: 'gender',
+ type: 'nominal',
+ legend: true,
+ },
+ },
+ },
+ },
+ },
+});