You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@druid.apache.org by vo...@apache.org on 2024/06/22 01:33:20 UTC
(druid) 04/04: edit column wokrs
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-unsubscribe@druid.apache.org
For additional commands, e-mail: commits-help@druid.apache.org