mirror of https://github.com/apache/druid.git
Explore view fix spin when applying defaults (#17252)
This commit is contained in:
parent
93b5a8326b
commit
2ffe7b177c
|
@ -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,
|
||||||
});
|
});
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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 && (
|
||||||
|
|
Loading…
Reference in New Issue