This is an automated email from the ASF dual-hosted git repository.
kfaraz pushed a commit to branch 31.0.0
in repository https://gitbox.apache.org/repos/asf/druid.git
The following commit(s) were added to refs/heads/31.0.0 by this push:
new 351330b9901 Explore view fix spin when applying defaults (#17252)
(#17253)
351330b9901 is described below
commit 351330b9901d646d44449cf464b1af0750ecd8ea
Author: Vadim Ogievetsky <[email protected]>
AuthorDate: Fri Oct 4 19:34:41 2024 -0700
Explore view fix spin when applying defaults (#17252) (#17253)
---
.../components/module-pane/module-pane.tsx | 9 +++++++--
.../components/resource-pane/resource-pane.tsx | 21 +++++++++++++++++++--
web-console/src/views/explore-view/explore-view.tsx | 10 ++++++----
3 files changed, 32 insertions(+), 8 deletions(-)
diff --git
a/web-console/src/views/explore-view/components/module-pane/module-pane.tsx
b/web-console/src/views/explore-view/components/module-pane/module-pane.tsx
index 4e216e3ac38..b57a078ed73 100644
--- a/web-console/src/views/explore-view/components/module-pane/module-pane.tsx
+++ b/web-console/src/views/explore-view/components/module-pane/module-pane.tsx
@@ -18,7 +18,7 @@
import { ResizeSensor } from '@blueprintjs/core';
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 { effectiveParameterDefault, Stage } from '../../models';
@@ -65,6 +65,11 @@ export const ModulePane = function ModulePane(props:
ModulePaneProps) {
const module = ModuleRepository.getModule(moduleId);
+ const parameterValuesWithDefaults = useMemo(() => {
+ if (!module) return {};
+ return fillInDefaults(parameterValues, module.parameters, querySource);
+ }, [parameterValues, module, querySource]);
+
let content: React.ReactNode;
if (module) {
const modelIssue = undefined; //
AutoForm.issueWithModel(moduleTileConfig.config, module.configFields);
@@ -76,7 +81,7 @@ export const ModulePane = function ModulePane(props:
ModulePaneProps) {
querySource,
where,
setWhere,
- parameterValues: fillInDefaults(parameterValues, module.parameters,
querySource),
+ parameterValues: parameterValuesWithDefaults,
setParameterValues,
runSqlQuery,
});
diff --git
a/web-console/src/views/explore-view/components/resource-pane/resource-pane.tsx
b/web-console/src/views/explore-view/components/resource-pane/resource-pane.tsx
index 2de75e32d86..ba21199ce62 100644
---
a/web-console/src/views/explore-view/components/resource-pane/resource-pane.tsx
+++
b/web-console/src/views/explore-view/components/resource-pane/resource-pane.tsx
@@ -44,6 +44,19 @@ import { NestedColumnDialog } from
'./nested-column-dialog/nested-column-dialog'
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 {
expression?: SqlExpression;
columnToDuplicate?: string;
@@ -99,11 +112,15 @@ export const ResourcePane = function ResourcePane(props:
ResourcePaneProps) {
content={
<Menu>
<MenuItem
- text="Uppercase columns"
+ text="Make nice columns titles"
+ onClick={() => applyUtil(makeNiceTitle)}
+ />
+ <MenuItem
+ text="Uppercase column names"
onClick={() => applyUtil(x => x.toUpperCase())}
/>
<MenuItem
- text="Lowercase columns"
+ text="Lowercase column names"
onClick={() => applyUtil(x => x.toLowerCase())}
/>
</Menu>
diff --git a/web-console/src/views/explore-view/explore-view.tsx
b/web-console/src/views/explore-view/explore-view.tsx
index 05f6ee69325..fead1b5c7b2 100644
--- a/web-console/src/views/explore-view/explore-view.tsx
+++ b/web-console/src/views/explore-view/explore-view.tsx
@@ -28,6 +28,7 @@ import copy from 'copy-to-clipboard';
import React, { useEffect, useMemo, useRef, useState } from 'react';
import { useStore } from 'zustand';
+import { Loader } from '../../components';
import { ShowValueDialog } from
'../../dialogs/show-value-dialog/show-value-dialog';
import { useHashAndLocalStorageHybridState, useQueryManager } from
'../../hooks';
import { Api, AppToaster } from '../../singletons';
@@ -422,10 +423,9 @@ export const ExploreView = React.memo(function
ExploreView() {
onDropColumn={onShowColumn}
onDropMeasure={onShowMeasure}
>
- {querySourceState.error && (
+ {querySourceState.error ? (
<div
className="error-display">{querySourceState.getErrorMessage()}</div>
- )}
- {querySource && (
+ ) : querySource ? (
<ModulePane
moduleId={moduleId}
querySource={querySource}
@@ -435,7 +435,9 @@ export const ExploreView = React.memo(function
ExploreView() {
setParameterValues={updateParameterValues}
runSqlQuery={runSqlPlusQuery}
/>
- )}
+ ) : querySourceState.loading ? (
+ <Loader />
+ ) : undefined}
</DroppableContainer>
<div className="control-pane-cnt">
{module && (
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
