Explore view fix spin when applying defaults (#17252)

This commit is contained in:
Vadim Ogievetsky 2024-10-04 13:02:15 -07:00 committed by GitHub
parent 93b5a8326b
commit 2ffe7b177c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 32 additions and 8 deletions

View File

@ -18,7 +18,7 @@
import { ResizeSensor } from '@blueprintjs/core'; import { ResizeSensor } from '@blueprintjs/core';
import type { QueryResult, SqlExpression, SqlQuery } from '@druid-toolkit/query'; import type { QueryResult, SqlExpression, SqlQuery } from '@druid-toolkit/query';
import React, { useState } from 'react'; import React, { useMemo, useState } from 'react';
import type { ParameterDefinition, QuerySource } from '../../models'; import type { ParameterDefinition, QuerySource } from '../../models';
import { effectiveParameterDefault, Stage } from '../../models'; import { effectiveParameterDefault, Stage } from '../../models';
@ -65,6 +65,11 @@ export const ModulePane = function ModulePane(props: ModulePaneProps) {
const module = ModuleRepository.getModule(moduleId); const module = ModuleRepository.getModule(moduleId);
const parameterValuesWithDefaults = useMemo(() => {
if (!module) return {};
return fillInDefaults(parameterValues, module.parameters, querySource);
}, [parameterValues, module, querySource]);
let content: React.ReactNode; let content: React.ReactNode;
if (module) { if (module) {
const modelIssue = undefined; // AutoForm.issueWithModel(moduleTileConfig.config, module.configFields); const modelIssue = undefined; // AutoForm.issueWithModel(moduleTileConfig.config, module.configFields);
@ -76,7 +81,7 @@ export const ModulePane = function ModulePane(props: ModulePaneProps) {
querySource, querySource,
where, where,
setWhere, setWhere,
parameterValues: fillInDefaults(parameterValues, module.parameters, querySource), parameterValues: parameterValuesWithDefaults,
setParameterValues, setParameterValues,
runSqlQuery, runSqlQuery,
}); });

View File

@ -44,6 +44,19 @@ import { NestedColumnDialog } from './nested-column-dialog/nested-column-dialog'
import './resource-pane.scss'; import './resource-pane.scss';
function makeNiceTitle(name: string): string {
return name
.replace(/^[ _-]+|[ _-]+$/g, '')
.replace(/(^|[_-]+)\w/g, s => {
// 'hello_world-love' -> 'Hello World Love'
return s.replace(/[_-]+/, ' ').toUpperCase();
})
.replace(/[a-z0-9][A-Z]/g, s => {
// 'HelloWorld' -> 'Hello World'
return s[0] + ' ' + s[1];
});
}
interface ColumnEditorOpenOn { interface ColumnEditorOpenOn {
expression?: SqlExpression; expression?: SqlExpression;
columnToDuplicate?: string; columnToDuplicate?: string;
@ -99,11 +112,15 @@ export const ResourcePane = function ResourcePane(props: ResourcePaneProps) {
content={ content={
<Menu> <Menu>
<MenuItem <MenuItem
text="Uppercase columns" text="Make nice columns titles"
onClick={() => applyUtil(makeNiceTitle)}
/>
<MenuItem
text="Uppercase column names"
onClick={() => applyUtil(x => x.toUpperCase())} onClick={() => applyUtil(x => x.toUpperCase())}
/> />
<MenuItem <MenuItem
text="Lowercase columns" text="Lowercase column names"
onClick={() => applyUtil(x => x.toLowerCase())} onClick={() => applyUtil(x => x.toLowerCase())}
/> />
</Menu> </Menu>

View File

@ -28,6 +28,7 @@ import copy from 'copy-to-clipboard';
import React, { useEffect, useMemo, useRef, useState } from 'react'; import React, { useEffect, useMemo, useRef, useState } from 'react';
import { useStore } from 'zustand'; import { useStore } from 'zustand';
import { Loader } from '../../components';
import { ShowValueDialog } from '../../dialogs/show-value-dialog/show-value-dialog'; import { ShowValueDialog } from '../../dialogs/show-value-dialog/show-value-dialog';
import { useHashAndLocalStorageHybridState, useQueryManager } from '../../hooks'; import { useHashAndLocalStorageHybridState, useQueryManager } from '../../hooks';
import { Api, AppToaster } from '../../singletons'; import { Api, AppToaster } from '../../singletons';
@ -422,10 +423,9 @@ export const ExploreView = React.memo(function ExploreView() {
onDropColumn={onShowColumn} onDropColumn={onShowColumn}
onDropMeasure={onShowMeasure} onDropMeasure={onShowMeasure}
> >
{querySourceState.error && ( {querySourceState.error ? (
<div className="error-display">{querySourceState.getErrorMessage()}</div> <div className="error-display">{querySourceState.getErrorMessage()}</div>
)} ) : querySource ? (
{querySource && (
<ModulePane <ModulePane
moduleId={moduleId} moduleId={moduleId}
querySource={querySource} querySource={querySource}
@ -435,7 +435,9 @@ export const ExploreView = React.memo(function ExploreView() {
setParameterValues={updateParameterValues} setParameterValues={updateParameterValues}
runSqlQuery={runSqlPlusQuery} runSqlQuery={runSqlPlusQuery}
/> />
)} ) : querySourceState.loading ? (
<Loader />
) : undefined}
</DroppableContainer> </DroppableContainer>
<div className="control-pane-cnt"> <div className="control-pane-cnt">
{module && ( {module && (