@finos/legend-query-builder 2.0.1 → 2.1.0

package/src/components/fetch-structure/QueryBuilderTDSWindowPanel.tsx

@@ -29,7 +29,6 @@ import {
   clsx,
   PanelEntryDropZonePlaceholder,
   ContextMenu,
-  VerticalDragHandleIcon,
   TimesIcon,
   useDragPreviewLayer,
   SortIcon,
@@ -43,6 +42,8 @@ import {
   ModalFooter,
   PanelFormSection,
   ModalFooterButton,
+  PanelDnDEntryDragHandle,
+  PanelDnDEntry,
 } from '@finos/legend-art';
 import { assertErrorThrown, guaranteeNonNullable } from '@finos/legend-shared';
 import { observer } from 'mobx-react-lite';
@@ -669,6 +670,8 @@ const QueryBuilderWindowColumnEditor = observer(
     const operators = windowState.operators;
     // state
     const ref = useRef<HTMLDivElement>(null);
+    const handleRef = useRef<HTMLDivElement>(null);
+
     const [windowAnchor, setWindowAnchor] = useState<HTMLButtonElement | null>(
       null,
     );
@@ -796,7 +799,8 @@ const QueryBuilderWindowColumnEditor = observer(
         [windowColumnState],
       );
     const isBeingDragged = windowColumnState === olapColumnBeingDragged;
-    dragConnector(dropConnector(ref));
+    dragConnector(handleRef);
+    dropConnector(ref);
     useDragPreviewLayer(dragPreviewConnector);
 
     const handleOpDrop = (val: QueryBuilderTDSColumnState): void => {
@@ -846,273 +850,272 @@ const QueryBuilderWindowColumnEditor = observer(
     );
 
     return (
-      <div ref={ref} className="query-builder__olap__column">
-        <PanelEntryDropZonePlaceholder
-          showPlaceholder={isBeingDragged}
-          className="query-builder__dnd__placeholder"
+      <PanelDnDEntry
+        ref={ref}
+        className="query-builder__olap__column"
+        showPlaceholder={isBeingDragged}
+      >
+        <ContextMenu
+          content={
+            <QueryBuilderWindowColumnContextMenu
+              columnState={windowColumnState}
+            />
+          }
+          className={clsx('query-builder__olap__column__context-menu', {
+            'query-builder__olap__column--selected-from-context-menu':
+              isSelectedFromContextMenu,
+          })}
+          menuProps={{ elevation: 7 }}
+          onOpen={onContextMenuOpen}
+          onClose={onContextMenuClose}
         >
-          <ContextMenu
-            content={
-              <QueryBuilderWindowColumnContextMenu
-                columnState={windowColumnState}
-              />
-            }
-            className={clsx('query-builder__olap__column__context-menu', {
-              'query-builder__olap__column--selected-from-context-menu':
-                isSelectedFromContextMenu,
-            })}
-            menuProps={{ elevation: 7 }}
-            onOpen={onContextMenuOpen}
-            onClose={onContextMenuClose}
-          >
-            <div className="query-builder__olap__column__drag-handle__container">
-              <div className="query-builder__olap__column__drag-handle">
-                <VerticalDragHandleIcon />
+          <PanelDnDEntryDragHandle
+            isBeingDragged={isBeingDragged}
+            className="query-builder__olap__column__drag-handle__container"
+            dropTargetConnector={handleRef}
+          />
+          <div className="query-builder__olap__column__operation">
+            <div className="query-builder__olap__column__operation__operator">
+              <div
+                className={clsx(
+                  'query-builder__olap__column__operation__operator__label',
+                  {
+                    'query-builder__olap__column__operation__operator__label__agg':
+                      !aggregateColumn,
+                  },
+                )}
+              >
+                {operationState.operator.getLabel()}
               </div>
+              {aggregateColumn && (
+                <TDSColumnReferenceEditor
+                  tdsColumn={aggregateColumn}
+                  handleChange={handleOpDrop}
+                  selectionEditor={{
+                    options: windowColumnState.possibleReferencedColumns,
+                  }}
+                />
+              )}
+              <DropdownMenu
+                className="query-builder__olap__column__operation__operator__dropdown"
+                disabled={!operators.length}
+                content={
+                  <MenuContent>
+                    {operators.map((op) => (
+                      <MenuContentItem
+                        key={op.uuid}
+                        className="query-builder__olap__column__operation__operator__dropdown__option"
+                        onClick={changeOperator(op)}
+                      >
+                        {op.getLabel()}
+                      </MenuContentItem>
+                    ))}
+                  </MenuContent>
+                }
+                menuProps={{
+                  anchorOrigin: { vertical: 'bottom', horizontal: 'left' },
+                  transformOrigin: { vertical: 'top', horizontal: 'left' },
+                  elevation: 7,
+                }}
+              >
+                <button
+                  className="query-builder__olap__column__operation__operator__badge"
+                  tabIndex={-1}
+                  title="Choose Window Function Operator..."
+                >
+                  <SigmaIcon />
+                </button>
+                <button
+                  className="query-builder__olap__column__operation__operator__dropdown__trigger"
+                  tabIndex={-1}
+                  title="Choose Window Function Operator..."
+                >
+                  <CaretDownIcon />
+                </button>
+              </DropdownMenu>
             </div>
-            <div className="query-builder__olap__column__operation">
-              <div className="query-builder__olap__column__operation__operator">
+          </div>
+          <div className="query-builder__olap__column__window">
+            <button
+              ref={dropOpConnector}
+              title="Click to edit or drag and drop columns"
+              onClick={openWindowPopover}
+              className="query-builder__olap__column__window__content"
+            >
+              <PanelEntryDropZonePlaceholder
+                showPlaceholder={isDragOver}
+                label="Add"
+                className="query-builder__dnd__placeholder"
+              >
+                <div
+                  title={`${windowColumnState.windowColumns.length} columns partitioned`}
+                  className="query-builder__olap__column__window__content__label"
+                >
+                  ({windowColumnState.windowColumns.length})
+                </div>
                 <div
                   className={clsx(
-                    'query-builder__olap__column__operation__operator__label',
-                    {
-                      'query-builder__olap__column__operation__operator__label__agg':
-                        !aggregateColumn,
-                    },
+                    'query-builder__olap__column__window__operator__badge',
                   )}
+                  tabIndex={-1}
+                  title="Edit window columns..."
                 >
-                  {operationState.operator.getLabel()}
+                  <WindowIcon />
                 </div>
-                {aggregateColumn && (
-                  <TDSColumnReferenceEditor
-                    tdsColumn={aggregateColumn}
-                    handleChange={handleOpDrop}
-                    selectionEditor={{
-                      options: windowColumnState.possibleReferencedColumns,
-                    }}
-                  />
-                )}
-                <DropdownMenu
-                  className="query-builder__olap__column__operation__operator__dropdown"
-                  disabled={!operators.length}
-                  content={
-                    <MenuContent>
-                      {operators.map((op) => (
-                        <MenuContentItem
-                          key={op.uuid}
-                          className="query-builder__olap__column__operation__operator__dropdown__option"
-                          onClick={changeOperator(op)}
-                        >
-                          {op.getLabel()}
-                        </MenuContentItem>
-                      ))}
-                    </MenuContent>
-                  }
-                  menuProps={{
-                    anchorOrigin: { vertical: 'bottom', horizontal: 'left' },
-                    transformOrigin: { vertical: 'top', horizontal: 'left' },
-                    elevation: 7,
-                  }}
-                >
-                  <button
-                    className="query-builder__olap__column__operation__operator__badge"
-                    tabIndex={-1}
-                    title="Choose Window Function Operator..."
-                  >
-                    <SigmaIcon />
-                  </button>
-                  <button
-                    className="query-builder__olap__column__operation__operator__dropdown__trigger"
-                    tabIndex={-1}
-                    title="Choose Window Function Operator..."
-                  >
-                    <CaretDownIcon />
-                  </button>
-                </DropdownMenu>
-              </div>
-            </div>
-            <div className="query-builder__olap__column__window">
-              <button
-                ref={dropOpConnector}
-                title="Click to edit or drag and drop columns"
-                onClick={openWindowPopover}
-                className="query-builder__olap__column__window__content"
-              >
-                <PanelEntryDropZonePlaceholder
-                  showPlaceholder={isDragOver}
-                  label="Add"
-                  className="query-builder__dnd__placeholder"
-                >
-                  <div
-                    title={`${windowColumnState.windowColumns.length} columns partitioned`}
-                    className="query-builder__olap__column__window__content__label"
-                  >
-                    ({windowColumnState.windowColumns.length})
-                  </div>
-                  <div
-                    className={clsx(
-                      'query-builder__olap__column__window__operator__badge',
-                    )}
-                    tabIndex={-1}
-                    title="Edit window columns..."
-                  >
-                    <WindowIcon />
+              </PanelEntryDropZonePlaceholder>
+            </button>
+            <BasePopover
+              open={Boolean(windowAnchor)}
+              anchorEl={windowAnchor}
+              onClose={closeWindowPopover}
+              anchorOrigin={{
+                vertical: 'bottom',
+                horizontal: 'center',
+              }}
+              transformOrigin={{
+                vertical: 'top',
+                horizontal: 'center',
+              }}
+            >
+              <div className="query-builder__olap__column__window__popover">
+                <div className="panel__content__form__section__list">
+                  <div className="panel__content__form__section__list__items">
+                    {windowColumnState.windowColumns.map((value, idx) => (
+                      <TDSColumnSelectorEditor
+                        key={value.uuid}
+                        colValue={value}
+                        setColumn={(v: QueryBuilderTDSColumnState) =>
+                          windowColumnState.changeWindow(v, idx)
+                        }
+                        deleteColumn={(v: QueryBuilderTDSColumnState): void =>
+                          windowColumnState.deleteWindow(v)
+                        }
+                        tdsColOptions={windowOptions}
+                      />
+                    ))}
                   </div>
-                </PanelEntryDropZonePlaceholder>
-              </button>
-              <BasePopover
-                open={Boolean(windowAnchor)}
-                anchorEl={windowAnchor}
-                onClose={closeWindowPopover}
-                anchorOrigin={{
-                  vertical: 'bottom',
-                  horizontal: 'center',
-                }}
-                transformOrigin={{
-                  vertical: 'top',
-                  horizontal: 'center',
-                }}
-              >
-                <div className="query-builder__olap__column__window__popover">
-                  <div className="panel__content__form__section__list">
-                    <div className="panel__content__form__section__list__items">
-                      {windowColumnState.windowColumns.map((value, idx) => (
-                        <TDSColumnSelectorEditor
-                          key={value.uuid}
-                          colValue={value}
-                          setColumn={(v: QueryBuilderTDSColumnState) =>
-                            windowColumnState.changeWindow(v, idx)
-                          }
-                          deleteColumn={(v: QueryBuilderTDSColumnState): void =>
-                            windowColumnState.deleteWindow(v)
-                          }
-                          tdsColOptions={windowOptions}
-                        />
-                      ))}
-                    </div>
-                    <div className="panel__content__form__section__list__new-item__add">
-                      <button
-                        className="panel__content__form__section__list__new-item__add-btn btn btn--dark"
-                        disabled={!addWindowOptions.length}
-                        onClick={addWindowValue}
-                        tabIndex={-1}
-                      >
-                        Add Value
-                      </button>
-                    </div>
+                  <div className="panel__content__form__section__list__new-item__add">
+                    <button
+                      className="panel__content__form__section__list__new-item__add-btn btn btn--dark"
+                      disabled={!addWindowOptions.length}
+                      onClick={addWindowValue}
+                      tabIndex={-1}
+                    >
+                      Add Value
+                    </button>
                   </div>
                 </div>
-              </BasePopover>
-            </div>
-            <div className="query-builder__olap__column__sortby">
-              <div className="query-builder__olap__column__sortby__operator">
-                {sortByState && (
-                  <div className="query-builder__olap__column__sortby__operator__label">
-                    {sortByState.sortType.toLowerCase()}
-                  </div>
-                )}
-                {sortByState && (
-                  <TDSColumnReferenceEditor
-                    tdsColumn={sortByState.columnState}
-                    handleChange={handleSortDrop}
-                    selectionEditor={{
-                      options: windowColumnState.possibleReferencedColumns,
-                    }}
-                  />
-                )}
-                {!sortByState && (
-                  <div className="query-builder__olap__column__sortby__none">
-                    (none)
-                  </div>
-                )}
-                <DropdownMenu
-                  className="query-builder__olap__column__sortby__operator__dropdown"
-                  content={
-                    <MenuContent>
+              </div>
+            </BasePopover>
+          </div>
+          <div className="query-builder__olap__column__sortby">
+            <div className="query-builder__olap__column__sortby__operator">
+              {sortByState && (
+                <div className="query-builder__olap__column__sortby__operator__label">
+                  {sortByState.sortType.toLowerCase()}
+                </div>
+              )}
+              {sortByState && (
+                <TDSColumnReferenceEditor
+                  tdsColumn={sortByState.columnState}
+                  handleChange={handleSortDrop}
+                  selectionEditor={{
+                    options: windowColumnState.possibleReferencedColumns,
+                  }}
+                />
+              )}
+              {!sortByState && (
+                <div className="query-builder__olap__column__sortby__none">
+                  (none)
+                </div>
+              )}
+              <DropdownMenu
+                className="query-builder__olap__column__sortby__operator__dropdown"
+                content={
+                  <MenuContent>
+                    <MenuContentItem
+                      key="none"
+                      className="query-builder__olap__column__sortby__operator__dropdown__option"
+                      onClick={changeSortBy(undefined)}
+                    >
+                      (none)
+                    </MenuContentItem>
+
+                    {Object.values(COLUMN_SORT_TYPE).map((op) => (
                       <MenuContentItem
-                        key="none"
+                        key={op}
                         className="query-builder__olap__column__sortby__operator__dropdown__option"
-                        onClick={changeSortBy(undefined)}
+                        onClick={changeSortBy(op)}
                       >
-                        (none)
+                        {op.toLowerCase()}
                       </MenuContentItem>
-
-                      {Object.values(COLUMN_SORT_TYPE).map((op) => (
-                        <MenuContentItem
-                          key={op}
-                          className="query-builder__olap__column__sortby__operator__dropdown__option"
-                          onClick={changeSortBy(op)}
-                        >
-                          {op.toLowerCase()}
-                        </MenuContentItem>
-                      ))}
-                    </MenuContent>
-                  }
-                  menuProps={{
-                    anchorOrigin: { vertical: 'bottom', horizontal: 'left' },
-                    transformOrigin: { vertical: 'top', horizontal: 'left' },
-                    elevation: 7,
-                  }}
-                >
-                  <button
-                    className={clsx(
-                      'query-builder__olap__column__sortby__operator__badge',
-                      {
-                        'query-builder__olap__column__sortby__operator__badge--activated':
-                          Boolean(sortByState),
-                      },
-                    )}
-                    tabIndex={-1}
-                    title="Choose Window Function SortBy Operator..."
-                  >
-                    <SortIcon />
-                  </button>
-                  <button
-                    className="query-builder__olap__column__sortby__operator__dropdown__trigger"
-                    tabIndex={-1}
-                    title="Choose Window Function SortBy Operator..."
-                  >
-                    <CaretDownIcon />
-                  </button>
-                </DropdownMenu>
-              </div>
-            </div>
-            <div className="query-builder__olap__column__name">
-              <InputWithInlineValidation
-                className="query-builder__olap__column__name__input input-group__input"
-                spellCheck={false}
-                value={windowColumnState.columnName}
-                onChange={changeColumnName}
-                validationErrorMessage={
-                  isDuplicatedColumnName ? 'Duplicated column' : undefined
-                }
-              />
-            </div>
-            <div className="query-builder__olap__column__actions">
-              <button
-                className="query-builder__olap__column__action"
-                tabIndex={-1}
-                onClick={editoColumn}
-              >
-                <EditIcon />
-              </button>
-              <button
-                className="query-builder__olap__column__action"
-                tabIndex={-1}
-                onClick={removeColumn}
-                disabled={isRemovalDisabled}
-                title={
-                  isRemovalDisabled
-                    ? "This column is used in the post filter and can't be removed"
-                    : 'Remove'
+                    ))}
+                  </MenuContent>
                 }
+                menuProps={{
+                  anchorOrigin: { vertical: 'bottom', horizontal: 'left' },
+                  transformOrigin: { vertical: 'top', horizontal: 'left' },
+                  elevation: 7,
+                }}
               >
-                <TimesIcon />
-              </button>
+                <button
+                  className={clsx(
+                    'query-builder__olap__column__sortby__operator__badge',
+                    {
+                      'query-builder__olap__column__sortby__operator__badge--activated':
+                        Boolean(sortByState),
+                    },
+                  )}
+                  tabIndex={-1}
+                  title="Choose Window Function SortBy Operator..."
+                >
+                  <SortIcon />
+                </button>
+                <button
+                  className="query-builder__olap__column__sortby__operator__dropdown__trigger"
+                  tabIndex={-1}
+                  title="Choose Window Function SortBy Operator..."
+                >
+                  <CaretDownIcon />
+                </button>
+              </DropdownMenu>
             </div>
-          </ContextMenu>
-        </PanelEntryDropZonePlaceholder>
-      </div>
+          </div>
+          <div className="query-builder__olap__column__name">
+            <InputWithInlineValidation
+              className="query-builder__olap__column__name__input input-group__input"
+              spellCheck={false}
+              value={windowColumnState.columnName}
+              onChange={changeColumnName}
+              validationErrorMessage={
+                isDuplicatedColumnName ? 'Duplicated column' : undefined
+              }
+            />
+          </div>
+          <div className="query-builder__olap__column__actions">
+            <button
+              className="query-builder__olap__column__action"
+              tabIndex={-1}
+              onClick={editoColumn}
+            >
+              <EditIcon />
+            </button>
+            <button
+              className="query-builder__olap__column__action"
+              tabIndex={-1}
+              onClick={removeColumn}
+              disabled={isRemovalDisabled}
+              title={
+                isRemovalDisabled
+                  ? "This column is used in the post filter and can't be removed"
+                  : 'Remove'
+              }
+            >
+              <TimesIcon />
+            </button>
+          </div>
+        </ContextMenu>
+      </PanelDnDEntry>
     );
   },
 );

package/src/stores/QueryBuilderResultState.ts

@@ -20,26 +20,26 @@ import {
   assertErrorThrown,
   LogEvent,
   guaranteeNonNullable,
-  ContentType,
-  guaranteeType,
+  type ContentType,
   downloadFileUsingDataURI,
-  UnsupportedOperationError,
   ActionState,
   StopWatch,
+  getContentTypeFileExtension,
 } from '@finos/legend-shared';
 import type { QueryBuilderState } from './QueryBuilderState.js';
 import {
   type RawExecutionPlan,
   type ExecutionResult,
   type RawLambda,
+  type EXECUTION_SERIALIZATION_FORMAT,
   GRAPH_MANAGER_EVENT,
-  EXECUTION_SERIALIZATION_FORMAT,
   RawExecutionResult,
   buildRawLambdaFromLambdaFunction,
   reportGraphAnalytics,
+  extractExecutionResultValues,
 } from '@finos/legend-graph';
 import { buildLambdaFunction } from './QueryBuilderValueSpecificationBuilder.js';
-import { ExecutionPlanState } from '@finos/legend-application';
+import { ExecutionPlanState, TAB_SIZE } from '@finos/legend-application';
 import {
   buildExecutionParameterValues,
   getExecutionQueryFromRawLambda,
@@ -50,6 +50,11 @@ import { QUERY_BUILDER_EVENT } from '../application/QueryBuilderEvent.js';
 
 const DEFAULT_LIMIT = 1000;
 
+export interface ExportDataInfo {
+  contentType: ContentType;
+  serializationFormat?: EXECUTION_SERIALIZATION_FORMAT | undefined;
+}
+
 export class QueryBuilderResultState {
   readonly queryBuilderState: QueryBuilderState;
   readonly exportDataState = ActionState.create();
@@ -148,25 +153,21 @@ export class QueryBuilderResultState {
     return query;
   }
 
-  *exportData(
-    serializationFormat: EXECUTION_SERIALIZATION_FORMAT,
-  ): GeneratorFn<void> {
+  *exportData(format: string): GeneratorFn<void> {
     try {
+      const exportData =
+        this.queryBuilderState.fetchStructureState.implementation.getExportDataInfo(
+          format,
+        );
+      const contentType = exportData.contentType;
+      const serializationFormat = exportData.serializationFormat;
       this.exportDataState.inProgress();
-      const mapping = guaranteeNonNullable(
-        this.queryBuilderState.mapping,
-        'Mapping is required to execute query',
-      );
-      const runtime = guaranteeNonNullable(
-        this.queryBuilderState.runtimeValue,
-        `Runtime is required to execute query`,
-      );
       const query = this.buildExecutionRawLambda();
       const result =
         (yield this.queryBuilderState.graphManagerState.graphManager.runQuery(
           query,
-          mapping,
-          runtime,
+          this.queryBuilderState.mapping,
+          this.queryBuilderState.runtimeValue,
           this.queryBuilderState.graphManagerState.graph,
           {
             serializationFormat,
@@ -176,23 +177,17 @@ export class QueryBuilderResultState {
             ),
           },
         )) as ExecutionResult;
-      let contentType: ContentType;
-      let fileName = 'result';
       let content: string;
-      switch (serializationFormat) {
-        case EXECUTION_SERIALIZATION_FORMAT.CSV:
-          {
-            const rawResult = guaranteeType(result, RawExecutionResult);
-            contentType = ContentType.TEXT_CSV;
-            fileName = `${fileName}.csv`;
-            content = rawResult.value;
-          }
-          break;
-        default:
-          throw new UnsupportedOperationError(
-            `Can't download file for serialization type: '${serializationFormat}'`,
-          );
+      if (result instanceof RawExecutionResult) {
+        content = result.value;
+      } else {
+        content = JSON.stringify(
+          extractExecutionResultValues(result),
+          null,
+          TAB_SIZE,
+        );
       }
+      const fileName = `result.${getContentTypeFileExtension(contentType)}`;
       downloadFileUsingDataURI(fileName, content, contentType);
       this.exportDataState.pass();
     } catch (error) {