Skip to content

Commit

Permalink
fix(playground): reset state on query change (#3321)
Browse files Browse the repository at this point in the history 
* fix(playground): reset state on query change

* fix quarter granularity
  • Loading branch information
@vasilev-alex
vasilev-alex committed Aug 25, 2021
1 parent 888b0f1 commit 9c0d4fe
Show file tree
Hide file tree
Showing 8 changed files with 53 additions and 56 deletions.
2 changes: 1 addition & 1 deletion packages/cubejs-playground/public/chart-renderers/react/index.html
View file
@@ -1 +1 @@
<!doctype html><html lang="en"><head><base href="/"/><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>React App</title><link href="/chart-renderers/react/static/css/2.42df1cf4.chunk.css" rel="stylesheet"><link href="/chart-renderers/react/static/css/main.85b3ce99.chunk.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script>!function(e){function r(r){for(var n,a,i=r[0],c=r[1],l=r[2],s=0,p=[];s<i.length;s++)a=i[s],Object.prototype.hasOwnProperty.call(o,a)&&o[a]&&p.push(o[a][0]),o[a]=0;for(n in c)Object.prototype.hasOwnProperty.call(c,n)&&(e[n]=c[n]);for(f&&f(r);p.length;)p.shift()();return u.push.apply(u,l||[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,i=1;i<t.length;i++){var c=t[i];0!==o[c]&&(n=!1)}n&&(u.splice(r--,1),e=a(a.s=t[0]))}return e}var n={},o={1:0},u=[];function a(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,a),t.l=!0,t.exports}a.e=function(e){var r=[],t=o[e];if(0!==t)if(t)r.push(t[2]);else{var n=new Promise((function(r,n){t=o[e]=[r,n]}));r.push(t[2]=n);var u,i=document.createElement("script");i.charset="utf-8",i.timeout=120,a.nc&&i.setAttribute("nonce",a.nc),i.src=function(e){return a.p+"static/js/"+({}[e]||e)+"."+{3:"a1101c9e"}[e]+".chunk.js"}(e);var c=new Error;u=function(r){i.onerror=i.onload=null,clearTimeout(l);var t=o[e];if(0!==t){if(t){var n=r&&("load"===r.type?"missing":r.type),u=r&&r.target&&r.target.src;c.message="Loading chunk "+e+" failed.\n("+n+": "+u+")",c.name="ChunkLoadError",c.type=n,c.request=u,t[1](c)}o[e]=void 0}};var l=setTimeout((function(){u({type:"timeout",target:i})}),12e4);i.onerror=i.onload=u,document.head.appendChild(i)}return Promise.all(r)},a.m=e,a.c=n,a.d=function(e,r,t){a.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.t=function(e,r){if(1&r&&(e=a(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(a.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)a.d(t,n,function(r){return e[r]}.bind(null,n));return t},a.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(r,"a",r),r},a.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},a.p="/",a.oe=function(e){throw console.error(e),e};var i=this["webpackJsonpreact-charts"]=this["webpackJsonpreact-charts"]||[],c=i.push.bind(i);i.push=r,i=i.slice();for(var l=0;l<i.length;l++)r(i[l]);var f=c;t()}([])</script><script src="/chart-renderers/react/static/js/2.1be3ded9.chunk.js"></script><script src="/chart-renderers/react/static/js/main.7975bbc0.chunk.js"></script></body></html>
<!doctype html><html lang="en"><head><base href="/"/><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>React App</title><link href="/chart-renderers/react/static/css/2.42df1cf4.chunk.css" rel="stylesheet"><link href="/chart-renderers/react/static/css/main.85b3ce99.chunk.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script>!function(e){function r(r){for(var n,a,i=r[0],c=r[1],l=r[2],s=0,p=[];s<i.length;s++)a=i[s],Object.prototype.hasOwnProperty.call(o,a)&&o[a]&&p.push(o[a][0]),o[a]=0;for(n in c)Object.prototype.hasOwnProperty.call(c,n)&&(e[n]=c[n]);for(f&&f(r);p.length;)p.shift()();return u.push.apply(u,l||[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,i=1;i<t.length;i++){var c=t[i];0!==o[c]&&(n=!1)}n&&(u.splice(r--,1),e=a(a.s=t[0]))}return e}var n={},o={1:0},u=[];function a(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,a),t.l=!0,t.exports}a.e=function(e){var r=[],t=o[e];if(0!==t)if(t)r.push(t[2]);else{var n=new Promise((function(r,n){t=o[e]=[r,n]}));r.push(t[2]=n);var u,i=document.createElement("script");i.charset="utf-8",i.timeout=120,a.nc&&i.setAttribute("nonce",a.nc),i.src=function(e){return a.p+"static/js/"+({}[e]||e)+"."+{3:"a1101c9e"}[e]+".chunk.js"}(e);var c=new Error;u=function(r){i.onerror=i.onload=null,clearTimeout(l);var t=o[e];if(0!==t){if(t){var n=r&&("load"===r.type?"missing":r.type),u=r&&r.target&&r.target.src;c.message="Loading chunk "+e+" failed.\n("+n+": "+u+")",c.name="ChunkLoadError",c.type=n,c.request=u,t[1](c)}o[e]=void 0}};var l=setTimeout((function(){u({type:"timeout",target:i})}),12e4);i.onerror=i.onload=u,document.head.appendChild(i)}return Promise.all(r)},a.m=e,a.c=n,a.d=function(e,r,t){a.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.t=function(e,r){if(1&r&&(e=a(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(a.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)a.d(t,n,function(r){return e[r]}.bind(null,n));return t},a.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(r,"a",r),r},a.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},a.p="/",a.oe=function(e){throw console.error(e),e};var i=this["webpackJsonpreact-charts"]=this["webpackJsonpreact-charts"]||[],c=i.push.bind(i);i.push=r,i=i.slice();for(var l=0;l<i.length;l++)r(i[l]);var f=c;t()}([])</script><script src="/chart-renderers/react/static/js/2.ee55d93c.chunk.js"></script><script src="/chart-renderers/react/static/js/main.faf2c4e3.chunk.js"></script></body></html>
2 changes: 0 additions & 2 deletions packages/cubejs-playground/public/chart-renderers/react/static/js/2.1be3ded9.chunk.js
View file

This file was deleted.

2 changes: 2 additions & 0 deletions packages/cubejs-playground/public/chart-renderers/react/static/js/2.ee55d93c.chunk.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion ...rs/react/static/js/main.7975bbc0.chunk.js → ...rs/react/static/js/main.faf2c4e3.chunk.js
View file

Large diffs are not rendered by default.

12 changes: 5 additions & 7 deletions packages/cubejs-playground/src/components/ChartRenderer/ChartRenderer.tsx
View file
Expand Up @@ -10,7 +10,10 @@ import styled from 'styled-components';
import { Button, CubeLoader, FatalError } from '../../atoms';
import { UIFramework } from '../../types';
import { QueryStatus } from '../PlaygroundQueryBuilder/components/PlaygroundQueryBuilder';
import { useChartRendererState, useChartRendererStateMethods } from '../QueryTabs/ChartRendererStateProvider';
import {
useChartRendererState,
useChartRendererStateMethods,
} from '../QueryTabs/ChartRendererStateProvider';

const { Text } = Typography;

Expand Down Expand Up @@ -110,7 +113,6 @@ export default function ChartRenderer({
useChartRendererStateMethods();

const runButtonRef = useRef<HTMLButtonElement>(null);
// const [isTokenRefreshing, setTokenRefreshing] = useState<boolean>(false);

// for you, ovr :)
useHotkeys('cmd+enter', () => {
Expand Down Expand Up @@ -191,11 +193,7 @@ export default function ChartRenderer({
type="primary"
loading={!isChartRendererReady || isFetchingMeta}
icon={<PlaySquareOutlined />}
onClick={async () => {
// setTokenRefreshing(true);
await onRunButtonClick();
// setTokenRefreshing(false);
}}
onClick={onRunButtonClick}
>
Run
</Button>
Expand Down
48 changes: 26 additions & 22 deletions ...js-playground/src/components/PlaygroundQueryBuilder/components/PlaygroundQueryBuilder.tsx
View file
Expand Up @@ -147,12 +147,12 @@ function QueryChangeEmitter({
query2,
onChange,
}: QueryChangeEmitterProps) {
useEffect(() => {
useDeepEffect(() => {
if (!areQueriesEqual(query1, query2)) {
onChange();
}
}, [areQueriesEqual(query1, query2)]);

}, [query1, query2]);
return null;
}

Expand Down Expand Up @@ -207,7 +207,7 @@ export function PlaygroundQueryBuilder({

const { refreshToken } = useSecurityContext();

const ref = useRef<HTMLIFrameElement>(null);
const iframeRef = useRef<HTMLIFrameElement>(null);
const queryRef = useRef<Query | null>(null);

const [tokenRefreshed, setTokenRefreshed] = useState<boolean>(false);
Expand All @@ -225,30 +225,34 @@ export function PlaygroundQueryBuilder({
}, [isMounted]);

useEffect(() => {
if (isChartRendererReady && ref.current) {
dispatchPlaygroundEvent(ref.current.contentDocument, 'credentials', {
token: cubejsToken,
apiUrl,
});
if (isChartRendererReady && iframeRef.current) {
dispatchPlaygroundEvent(
iframeRef.current.contentDocument,
'credentials',
{
token: cubejsToken,
apiUrl,
}
);
}
}, [ref, cubejsToken, apiUrl, isChartRendererReady]);
}, [iframeRef, cubejsToken, apiUrl, isChartRendererReady]);

function handleRunButtonClick({
query,
pivotConfig,
chartType,
}: HandleRunButtonClickProps) {
if (ref.current) {
if (iframeRef.current) {
if (areQueriesEqual(query, queryRef.current)) {
dispatchPlaygroundEvent(ref.current.contentDocument, 'chart', {
dispatchPlaygroundEvent(iframeRef.current.contentDocument, 'chart', {
pivotConfig,
query,
chartType,
chartingLibrary,
});
dispatchPlaygroundEvent(ref.current.contentDocument, 'refetch');
dispatchPlaygroundEvent(iframeRef.current.contentDocument, 'refetch');
} else {
dispatchPlaygroundEvent(ref.current.contentDocument, 'chart', {
dispatchPlaygroundEvent(iframeRef.current.contentDocument, 'chart', {
pivotConfig,
query,
chartType,
Expand Down Expand Up @@ -413,9 +417,9 @@ export function PlaygroundQueryBuilder({
playgroundAction('Change Chart Type');
updateChartType(type);

if (ref.current) {
if (iframeRef.current) {
dispatchPlaygroundEvent(
ref.current.contentDocument,
iframeRef.current.contentDocument,
'chart',
{
chartType: type,
Expand Down Expand Up @@ -473,7 +477,7 @@ export function PlaygroundQueryBuilder({
<ChartContainer
apiUrl={apiUrl}
cubejsToken={cubejsToken}
iframeRef={ref}
iframeRef={iframeRef}
isChartRendererReady={isChartRendererReady}
query={query}
error={error}
Expand All @@ -489,9 +493,9 @@ export function PlaygroundQueryBuilder({
}
}}
setChartLibrary={(value) => {
if (ref.current) {
if (iframeRef.current) {
dispatchPlaygroundEvent(
ref.current.contentDocument,
iframeRef.current.contentDocument,
'chart',
{
chartingLibrary: value,
Expand Down Expand Up @@ -520,12 +524,12 @@ export function PlaygroundQueryBuilder({
chartType={chartType || 'line'}
query={query}
pivotConfig={pivotConfig}
iframeRef={ref}
iframeRef={iframeRef}
queryHasMissingMembers={missingMembers.length > 0}
onRunButtonClick={async () => {
if (
isChartRendererReady &&
ref.current &&
iframeRef.current &&
missingMembers.length === 0
) {
await refreshToken();
Expand All @@ -549,7 +553,7 @@ export function PlaygroundQueryBuilder({
</Row>

<PivotChangeEmitter
iframeRef={ref}
iframeRef={iframeRef}
chartType={chartType || 'line'}
pivotConfig={pivotConfig}
/>
Expand Down
38 changes: 16 additions & 22 deletions packages/cubejs-playground/src/components/QueryTabs/ChartRendererStateProvider.tsx
View file
Expand Up @@ -2,24 +2,26 @@ import { createContext, ReactNode, useContext, useState } from 'react';

import { QueryLoadResult } from '../ChartRenderer/ChartRenderer';

type BooleanMap = Record<string, boolean>;

type QueryStatusContextProps = {
chartRendererState: Record<string, boolean>;
chartRendererState: BooleanMap;
setChartRendererReady: (queryId: string, isReady: boolean) => void;
queryStatus: Record<string, QueryLoadResult | null>;
setQueryStatus: (queryId: string, status: QueryLoadResult | null) => void;
resultSetExists: Record<string, boolean>;
resultSetExists: BooleanMap;
setResultSetExists: (queryId: string, exists: boolean) => void;
isQueryLoading: Record<string, boolean>;
isQueryLoading: BooleanMap;
setQueryLoading: (queryId: string, loading: boolean) => void;
queryError: Record<string, Error | null>;
setQueryError: (queryId: string, error: Error | null) => void;
isBuildInProgress: Record<string, boolean>;
isBuildInProgress: BooleanMap;
setBuildInProgress: (queryId: string, inProgress: boolean) => void;

slowQuery: Record<string, boolean>;
slowQuery: BooleanMap;
setSlowQuery: (queryId: string, isSlow: boolean) => void;

slowQueryFromCache: Record<string, boolean>;
slowQueryFromCache: BooleanMap;
setSlowQueryFromCache: (queryId: string, isSlow: boolean) => void;
};

Expand All @@ -32,28 +34,20 @@ type ChartRendererStateProviderProps = {
export function ChartRendererStateProvider({
children,
}: ChartRendererStateProviderProps) {
const [chartRendererState, setChartRendererStateMap] = useState<
Record<string, boolean>
>({});
const [chartRendererState, setChartRendererStateMap] = useState<BooleanMap>(
{}
);
const [queryStatus, setQueryStatus] = useState<
Record<string, QueryLoadResult | null>
>({});
const [resultSetExists, setResultSetExists] = useState<
Record<string, boolean>
>({});
const [isQueryLoading, setQueryLoading] = useState<Record<string, boolean>>(
{}
);
const [resultSetExists, setResultSetExists] = useState<BooleanMap>({});
const [isQueryLoading, setQueryLoading] = useState<BooleanMap>({});
const [queryError, setQueryError] = useState<Record<string, Error | null>>(
{}
);
const [isBuildInProgress, setBuildInProgress] = useState<
Record<string, boolean>
>({});
const [slowQuery, setSlowQuery] = useState<Record<string, boolean>>({});
const [slowQueryFromCache, setSlowQueryFromCache] = useState<
Record<string, boolean>
>({});
const [isBuildInProgress, setBuildInProgress] = useState<BooleanMap>({});
const [slowQuery, setSlowQuery] = useState<BooleanMap>({});
const [slowQueryFromCache, setSlowQueryFromCache] = useState<BooleanMap>({});

return (
<ChartRendererStateContext.Provider
Expand Down
3 changes: 2 additions & 1 deletion packages/cubejs-schema-compiler/src/adapter/BaseQuery.js
View file
Expand Up @@ -21,8 +21,9 @@ const DEFAULT_PREAGGREGATIONS_SCHEMA = 'stb_pre_aggregations';

const standardGranularitiesParents = {
year: 'month',
week: 'day',
quarter: 'month',
month: 'day',
week: 'day',
day: 'hour',
hour: 'minute',
minute: 'second'
Expand Down

0 comments on commit 9c0d4fe

Please sign in to comment.