This is an automated email from the ASF dual-hosted git repository.

vogievetsky pushed a commit to branch power-tiles
in repository https://gitbox.apache.org/repos/asf/druid.git

commit 252001378cb4fcf383749474cb9bedf88357d1e8
Author: Vadim Ogievetsky <va...@ogievetsky.com>
AuthorDate: Fri Jun 21 18:33:03 2024 -0700

    edit column wokrs
---
 web-console/src/modules/models/query-source.ts         |  5 ++---
 .../edit-column-dialog/edit-column-dialog.scss         | 18 ++++++++++++++++--
 .../edit-column-dialog/edit-column-dialog.tsx          | 12 ++++++------
 .../views/explore-view/resource-pane/resource-pane.tsx |  7 ++++++-
 4 files changed, 30 insertions(+), 12 deletions(-)

diff --git a/web-console/src/modules/models/query-source.ts 
b/web-console/src/modules/models/query-source.ts
index ef5cc65b7ee..e7aaac392b5 100644
--- a/web-console/src/modules/models/query-source.ts
+++ b/web-console/src/modules/models/query-source.ts
@@ -75,13 +75,12 @@ export class QuerySource {
     );
   }
 
-  public changeExpression(newExpression: SqlExpression): SqlQuery {
+  public changeExpression(oldOutputName: string, newExpression: 
SqlExpression): SqlQuery {
     const noStarQuery = QuerySource.materializeStarIfNeeded(this.query, 
this.columns);
-    const outputName = newExpression.getOutputName();
     return noStarQuery.changeSelectExpressions(
       noStarQuery
         .getSelectExpressionsArray()
-        .map(ex => (ex.getOutputName() === outputName ? newExpression : ex)),
+        .map(ex => (ex.getOutputName() === oldOutputName ? newExpression : 
ex)),
     );
   }
 }
diff --git 
a/web-console/src/views/explore-view/edit-column-dialog/edit-column-dialog.scss 
b/web-console/src/views/explore-view/edit-column-dialog/edit-column-dialog.scss
index 744ccf6bf8e..0fa0616668d 100644
--- 
a/web-console/src/views/explore-view/edit-column-dialog/edit-column-dialog.scss
+++ 
b/web-console/src/views/explore-view/edit-column-dialog/edit-column-dialog.scss
@@ -26,14 +26,28 @@
 
   .#{$bp-ns}-dialog-body {
     display: flex;
-    gap: 8px;
+    gap: 10px;
 
     .controls {
       flex: 1;
+      display: flex;
+      flex-direction: column;
+
+      .sql-expression-form-group {
+        flex: 1;
+
+        .#{$bp-ns}-form-content {
+          flex: 1;
+
+          .flexible-query-input {
+            height: 100%;
+          }
+        }
+      }
     }
 
     .preview {
-      width: 200px;
+      width: 250px;
     }
   }
 
diff --git 
a/web-console/src/views/explore-view/edit-column-dialog/edit-column-dialog.tsx 
b/web-console/src/views/explore-view/edit-column-dialog/edit-column-dialog.tsx
index b56cdbc1b6b..a1b814ae4d8 100644
--- 
a/web-console/src/views/explore-view/edit-column-dialog/edit-column-dialog.tsx
+++ 
b/web-console/src/views/explore-view/edit-column-dialog/edit-column-dialog.tsx
@@ -27,7 +27,7 @@ import { FlexibleQueryInput } from 
'../../workbench-view/flexible-query-input/fl
 import './edit-column-dialog.scss';
 
 export interface EditColumnDialogProps {
-  initExpression?: SqlExpression;
+  initExpression: SqlExpression | undefined;
   onApply(expression: SqlExpression): void;
   onClose(): void;
 }
@@ -35,11 +35,10 @@ export interface EditColumnDialogProps {
 export const EditColumnDialog = React.memo(function EditColumnDialog(props: 
EditColumnDialogProps) {
   const { initExpression, onApply, onClose } = props;
 
-  const [initBreakdown] = useState(
-    initExpression ? expressionToCastBreakdown(initExpression) : undefined,
-  );
   const [currentBreakdown, setCurrentBreakdown] = useState(
-    initBreakdown || { formula: '', forceMultiValue: false, outputName: '' },
+    initExpression
+      ? expressionToCastBreakdown(initExpression)
+      : { formula: '', forceMultiValue: false, outputName: '' },
   );
 
   return (
@@ -54,7 +53,7 @@ export const EditColumnDialog = React.memo(function 
EditColumnDialog(props: Edit
               }}
             />
           </FormGroup>
-          <FormGroup label="SQL expression">
+          <FormGroup label="SQL expression" 
className="sql-expression-form-group">
             <FlexibleQueryInput
               showGutter={false}
               placeholder="expression"
@@ -63,6 +62,7 @@ export const EditColumnDialog = React.memo(function 
EditColumnDialog(props: Edit
                 setCurrentBreakdown({ ...currentBreakdown, formula });
               }}
               columnMetadata={undefined}
+              leaveBackground
             />
           </FormGroup>
         </div>
diff --git a/web-console/src/views/explore-view/resource-pane/resource-pane.tsx 
b/web-console/src/views/explore-view/resource-pane/resource-pane.tsx
index 877b96cb3c5..8ae19029136 100644
--- a/web-console/src/views/explore-view/resource-pane/resource-pane.tsx
+++ b/web-console/src/views/explore-view/resource-pane/resource-pane.tsx
@@ -106,7 +106,12 @@ export const ResourcePane = function ResourcePane(props: 
ResourcePaneProps) {
       </div>
       {editedExpression && (
         <EditColumnDialog
-          onApply={newExpression => 
onQueryChange(querySource.changeExpression(newExpression))}
+          initExpression={editedExpression}
+          onApply={newExpression =>
+            onQueryChange(
+              querySource.changeExpression(editedExpression.getOutputName()!, 
newExpression),
+            )
+          }
           onClose={() => setEditedExpression(undefined)}
         />
       )}


---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscr...@druid.apache.org
For additional commands, e-mail: commits-h...@druid.apache.org

Reply via email to