Explore view fix spin when applying defaults (#17252)

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,
       });

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>

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 && (