diff --git a/packages/query-composer/src/components/ExploreQueryEditor/ExploreQueryEditor.tsx b/packages/query-composer/src/components/ExploreQueryEditor/ExploreQueryEditor.tsx index 0efacc65..3aa50997 100644 --- a/packages/query-composer/src/components/ExploreQueryEditor/ExploreQueryEditor.tsx +++ b/packages/query-composer/src/components/ExploreQueryEditor/ExploreQueryEditor.tsx @@ -52,20 +52,20 @@ export const ExploreQueryEditor: React.FC = ({ }) => { const [result, setResult] = useState(); const [error, setError] = useState(); - const [_lastRunQuery, setLastRunQuery] = useState(); - const query = queryWriter.getQueryStringForNotebook(); const {isRunnable} = querySummary ?? {isRunnable: false}; - const runQueryCallback = React.useCallback(() => { - if (!isRunnable || !query) { - return; - } - setResult(undefined); - setError(undefined); - setLastRunQuery(query); - runQuery(query); - }, [isRunnable, query, runQuery]); + const runQueryCallback = React.useCallback( + (query: string) => { + if (!isRunnable) { + return; + } + setResult(undefined); + setError(undefined); + runQuery(query); + }, + [isRunnable, runQuery] + ); useEffect(() => { if (currentResult instanceof Error) { @@ -86,6 +86,7 @@ export const ExploreQueryEditor: React.FC = ({ modelPath={modelPath} queryModifiers={queryModifiers} querySummary={querySummary} + queryWriter={queryWriter} source={source} refreshModel={refreshModel} runQuery={runQueryCallback} diff --git a/packages/query-composer/src/components/QueryEditor/QueryEditor.tsx b/packages/query-composer/src/components/QueryEditor/QueryEditor.tsx index 926537da..61413047 100644 --- a/packages/query-composer/src/components/QueryEditor/QueryEditor.tsx +++ b/packages/query-composer/src/components/QueryEditor/QueryEditor.tsx @@ -17,6 +17,7 @@ import {QueryModifiers} from '../../hooks'; import {QuerySummary} from '../../types'; import styled from 'styled-components'; import {SearchContext} from '../../contexts/search_context'; +import {QueryWriter} from '../../core/query'; const useLoad = true; @@ -27,7 +28,8 @@ export interface QueryEditorProps { refreshModel?: () => void; queryModifiers: QueryModifiers; querySummary: QuerySummary | undefined; - runQuery: () => void; + queryWriter: QueryWriter; + runQuery: (query: string) => void; source: SourceDef; topValues: SearchValueMapResult[] | undefined; } @@ -38,6 +40,7 @@ export const QueryEditor = ({ modelPath, queryModifiers, querySummary, + queryWriter, refreshModel, runQuery, source, @@ -45,10 +48,13 @@ export const QueryEditor = ({ }: QueryEditorProps) => { const [insertOpen, setInsertOpen] = useState(false); const [loadOpen, setLoadOpen] = useState(false); + const [lastRunQuery, setLastRunQuery] = useState(''); const isQueryEmpty = !querySummary || querySummary.stages.length === 0; const {isRunnable} = querySummary ?? {isRunnable: false}; + const query = queryWriter.getQueryStringForNotebook(); + const clearQuery = () => { queryModifiers.clearQuery(); }; @@ -61,7 +67,12 @@ export const QueryEditor = ({ queryModifiers.loadQuery(name); }; - const dirty = false; // query !== lastRunQuery; + const dirty = query !== lastRunQuery; + + const onRun = () => { + setLastRunQuery(query); + runQuery(query); + }; return ( @@ -125,7 +136,7 @@ export const QueryEditor = ({ /> { isRunning, } = useRunQuery(modelDef, modelPath, runQueryExt); - useEffect(() => { - reset(); - }, [querySummary, reset]); - useEffect(() => { if (builderError) { setError(builderError); @@ -322,16 +318,6 @@ export const Explore: React.FC = () => { }; const topValues = useTopValues(modelDef, modelPath, sourceDef); - if (loading || (appId && !appInfo)) { - section = 'loading'; - } - - // eslint-disable-next-line no-console - console.log({ - model, - modelPath, - source, - }); return (
@@ -427,10 +413,10 @@ export const Explore: React.FC = () => { )} - {section === 'loading' && ( - + {loading && ( + - + )} @@ -519,6 +505,7 @@ const HeaderLeft = styled.div` const Page = styled(Content)` margin-top: 10px; height: unset; + position: relative; `; const RightChannel = styled.div` @@ -539,6 +526,17 @@ const BottomChannel = styled.div` background-color: ${COLORS.mainBackground}; `; +const LoadingOverlay = styled(EmptyMessage)` + background-color: ${COLORS.mainBackground}; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + z-index: 9999; + margin: 0; +`; + function generateReadme(appInfo: AppInfo) { let readme = ''; const title = appInfo.title || 'Malloy';