Add UI to swap clauses in the notebook #39205
Conversation
| @@ -65,6 +65,8 @@ export type OrderByDirection = "asc" | "desc"; | |||
| declare const FilterClause: unique symbol; | |||
| export type FilterClause = unknown & { _opaque: typeof FilterClause }; | |||
|
|
|||
| export type Filterable = FilterClause | ExpressionClause | SegmentMetadata; | |||
There was a problem hiding this comment.
Similar to Aggregatable
bshepherdson
force-pushed
the
mblib-swap-clauses
branch
from
58befcb
to
de77af6
Compare
ranquild
changed the title
| const { attributes, listeners, setNodeRef, transform, transition } = | ||
| useSortable({ | ||
| id, | ||
| animateLayoutChanges: () => false, |
There was a problem hiding this comment.
Disable animation after drag-n-drop because we don't have a stable ID
There was a problem hiding this comment.
This comment deserves to live in code
| ); | ||
| } | ||
|
|
||
| function getItemIdFromIndex(index: number) { |
There was a problem hiding this comment.
DnD kit doesn't like 0 as id so we convert indexes to strings
There was a problem hiding this comment.
This comment deserves to live in code
|
| export function swapClauses( | ||
| query: Query, | ||
| stageIndex: number, | ||
| sourceClause: Clause, | ||
| targetClause: Clause, | ||
| ): Query { |
There was a problem hiding this comment.
Seeing that every *Step component has its own handleReorder* implementation, I thought that the benefit is type safety - it should not be possible to swap an aggregation clause with a breakout clause, etc.
We could enforce it here:
| export function swapClauses( | |
| query: Query, | |
| stageIndex: number, | |
| sourceClause: Clause, | |
| targetClause: Clause, | |
| ): Query { | |
| export function swapClauses< | |
| C extends | |
| | AggregationClause | |
| | ExpressionClause | |
| | BreakoutClause | |
| | FilterClause | |
| | OrderByClause, | |
| >(query: Query, stageIndex: number, sourceClause: C, targetClause: C): Query { |
| ["sum", ["field", ORDERS.SUBTOTAL, null]], | ||
| ["sum", ["field", ORDERS.TOTAL, null]], | ||
| ["avg", ["field", ORDERS.TOTAL, null]], | ||
| ], |
There was a problem hiding this comment.
We should also cover order clauses
| const { attributes, listeners, setNodeRef, transform, transition } = | ||
| useSortable({ | ||
| id, | ||
| animateLayoutChanges: () => false, |
There was a problem hiding this comment.
This comment deserves to live in code
| ); | ||
| } | ||
|
|
||
| function getItemIdFromIndex(index: number) { |
There was a problem hiding this comment.
This comment deserves to live in code
Epic #39210
Demo https://www.loom.com/share/46322c56db044c4d8d8de5c890510e62
Allows to drag-n-drop custom columns, filters, aggregations, and breakouts.
How to verify: