@finos/legend-lego 2.0.151 → 2.0.152

package/lib/sql-playground/store/AbstractSQLPlaygroundState.d.ts

@@ -0,0 +1,47 @@
+/**
+ * Copyright (c) 2020-present, Goldman Sachs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { ActionState, type GeneratorFn } from '@finos/legend-shared';
+import * as monaco from 'monaco-editor';
+import type { CommandRegistrar } from '@finos/legend-application';
+export type SQLPlaygroundTheme = 'light' | 'dark';
+export interface SQL_ExecutionResult {
+    value: string;
+    sqlDuration: number;
+}
+export declare abstract class AbstractSQLPlaygroundState implements CommandRegistrar {
+    theme: SQLPlaygroundTheme;
+    sqlText: string;
+    executeRawSQLState: ActionState;
+    sqlExecutionResult?: SQL_ExecutionResult | undefined;
+    sqlEditorViewState: monaco.editor.ICodeEditorViewState | undefined;
+    sqlEditorTextModel: monaco.editor.ITextModel;
+    sqlEditor?: monaco.editor.IStandaloneCodeEditor | undefined;
+    isLocalModeEnabled: boolean;
+    constructor();
+    abstract executeRawSQL(): GeneratorFn<void>;
+    abstract registerCommands(): void;
+    abstract deregisterCommands(): void;
+    getCodeCompletionSuggestions(): string[];
+    stopExecuteSQL(): void;
+    setSQLText(val: string): void;
+    setTheme(val: SQLPlaygroundTheme): void;
+    setSQLEditorViewState(state: monaco.editor.ICodeEditorViewState | undefined): void;
+    setSQLEditor(val: monaco.editor.IStandaloneCodeEditor | undefined): void;
+    toggleIsLocalModeEnabled(): void;
+    get isExecuting(): boolean;
+    get hasResult(): boolean;
+}
+//# sourceMappingURL=AbstractSQLPlaygroundState.d.ts.map

package/lib/sql-playground/store/AbstractSQLPlaygroundState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AbstractSQLPlaygroundState.d.ts","sourceRoot":"","sources":["../../../src/sql-playground/store/AbstractSQLPlaygroundState.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAAE,WAAW,EAAE,KAAK,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACrE,OAAO,KAAK,MAAM,MAAM,eAAe,CAAC;AACxC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAOlE,MAAM,MAAM,kBAAkB,GAAG,OAAO,GAAG,MAAM,CAAC;AAClD,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;CACrB;AAuCD,8BAAsB,0BAA2B,YAAW,gBAAgB;IAC1E,KAAK,EAAE,kBAAkB,CAAC;IAC1B,OAAO,SAAM;IACb,kBAAkB,EAAE,WAAW,CAAC;IAChC,kBAAkB,CAAC,EAAE,mBAAmB,GAAG,SAAS,CAAC;IACrD,kBAAkB,EAAE,MAAM,CAAC,MAAM,CAAC,oBAAoB,GAAG,SAAS,CAAC;IACnE,kBAAkB,EAAE,MAAM,CAAC,MAAM,CAAC,UAAU,CAAC;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,CAAC,qBAAqB,GAAG,SAAS,CAAC;IAC5D,kBAAkB,EAAE,OAAO,CAAC;;IA0B5B,QAAQ,CAAC,aAAa,IAAI,WAAW,CAAC,IAAI,CAAC;IAC3C,QAAQ,CAAC,gBAAgB,IAAI,IAAI;IACjC,QAAQ,CAAC,kBAAkB,IAAI,IAAI;IAEnC,4BAA4B,IAAI,MAAM,EAAE;IAIxC,cAAc,IAAI,IAAI;IAItB,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAI7B,QAAQ,CAAC,GAAG,EAAE,kBAAkB,GAAG,IAAI;IAIvC,qBAAqB,CACnB,KAAK,EAAE,MAAM,CAAC,MAAM,CAAC,oBAAoB,GAAG,SAAS,GACpD,IAAI;IAIP,YAAY,CAAC,GAAG,EAAE,MAAM,CAAC,MAAM,CAAC,qBAAqB,GAAG,SAAS,GAAG,IAAI;IAWxE,wBAAwB,IAAI,IAAI;IAKhC,IAAI,WAAW,IAAI,OAAO,CAEzB;IAED,IAAI,SAAS,IAAI,OAAO,CAEvB;CACF"}

package/lib/sql-playground/store/AbstractSQLPlaygroundState.js

@@ -0,0 +1,122 @@
+/**
+ * Copyright (c) 2020-present, Goldman Sachs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { ActionState } from '@finos/legend-shared';
+import * as monaco from 'monaco-editor';
+import { CODE_EDITOR_LANGUAGE, moveCursorToPosition, } from '@finos/legend-code-editor';
+import { action, makeObservable, observable } from 'mobx';
+const SQL_KEYWORDS = [
+    'AND',
+    'AS',
+    'ASC',
+    'BETWEEN',
+    'DESC',
+    'DISTINCT',
+    'EXEC',
+    'EXISTS',
+    'FROM',
+    'FULL OUTER JOIN',
+    'GROUP BY',
+    'HAVING',
+    'IN',
+    'INNER JOIN',
+    'IS NULL',
+    'IS NOT NULL',
+    'JOIN',
+    'LEFT JOIN',
+    'LIKE',
+    'LIMIT',
+    'NOT',
+    'NOT NULL',
+    'OR',
+    'ORDER BY',
+    'OUTER JOIN',
+    'RIGHT JOIN',
+    'SELECT',
+    'SELECT DISTINCT',
+    'SELECT INTO',
+    'SELECT TOP',
+    'TOP',
+    'UNION',
+    'UNION ALL',
+    'UNIQUE',
+    'WHERE',
+];
+export class AbstractSQLPlaygroundState {
+    theme;
+    sqlText = '';
+    executeRawSQLState;
+    sqlExecutionResult;
+    sqlEditorViewState;
+    sqlEditorTextModel;
+    sqlEditor;
+    isLocalModeEnabled;
+    constructor() {
+        this.sqlEditorTextModel = monaco.editor.createModel(this.sqlText, CODE_EDITOR_LANGUAGE.SQL);
+        this.isLocalModeEnabled = false;
+        this.executeRawSQLState = ActionState.create();
+        this.theme = 'light';
+        makeObservable(this, {
+            sqlExecutionResult: observable,
+            isLocalModeEnabled: observable,
+            sqlText: observable,
+            executeRawSQLState: observable,
+            stopExecuteSQL: action,
+            setSQLEditor: action,
+            setSQLEditorViewState: action,
+            setSQLText: action,
+            setTheme: action,
+            toggleIsLocalModeEnabled: action,
+            sqlEditorViewState: observable.ref,
+            sqlEditor: observable.ref,
+        });
+    }
+    getCodeCompletionSuggestions() {
+        return SQL_KEYWORDS;
+    }
+    stopExecuteSQL() {
+        this.sqlExecutionResult = undefined;
+    }
+    setSQLText(val) {
+        this.sqlText = val;
+    }
+    setTheme(val) {
+        this.theme = val;
+    }
+    setSQLEditorViewState(state) {
+        this.sqlEditorViewState = state;
+    }
+    setSQLEditor(val) {
+        this.sqlEditor = val;
+        if (val) {
+            const lines = this.sqlText.split('\n');
+            moveCursorToPosition(val, {
+                lineNumber: lines.length,
+                column: lines.at(-1)?.length ?? 0,
+            });
+        }
+    }
+    toggleIsLocalModeEnabled() {
+        this.isLocalModeEnabled = !this.isLocalModeEnabled;
+        this.sqlExecutionResult = undefined;
+    }
+    get isExecuting() {
+        return this.executeRawSQLState.isInProgress;
+    }
+    get hasResult() {
+        return this.sqlExecutionResult !== undefined;
+    }
+}
+//# sourceMappingURL=AbstractSQLPlaygroundState.js.map

package/lib/sql-playground/store/AbstractSQLPlaygroundState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AbstractSQLPlaygroundState.js","sourceRoot":"","sources":["../../../src/sql-playground/store/AbstractSQLPlaygroundState.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@finos/legend-lego",
-  "version": "2.0.151",
+  "version": "2.0.152",
   "description": "Legend code editor support",
   "keywords": [
     "legend",
@@ -21,6 +21,7 @@
   "exports": {
     "./application": "./lib/application/index.js",
     "./code-editor": "./lib/code-editor/index.js",
+    "./sql-playground": "./lib/sql-playground/index.js",
     "./code-editor/test": "./lib/code-editor/__test__.js",
     "./code-editor/test/MockedMonacoEditor.js": "./lib/code-editor/__test-utils__/MockedMonacoEditor.js",
     "./data-grid": "./lib/data-grid/index.js",
@@ -47,10 +48,10 @@
     "test:watch": "jest --watch"
   },
   "dependencies": {
-    "@finos/legend-application": "16.0.83",
-    "@finos/legend-art": "7.1.133",
-    "@finos/legend-code-editor": "2.0.138",
-    "@finos/legend-graph": "32.3.18",
+    "@finos/legend-application": "16.0.84",
+    "@finos/legend-art": "7.1.134",
+    "@finos/legend-code-editor": "2.0.139",
+    "@finos/legend-graph": "32.3.19",
     "@finos/legend-shared": "11.0.21",
     "@types/css-font-loading-module": "0.0.14",
     "@types/react": "19.0.10",

package/src/sql-playground/SQLPlaygroundEditor.tsx

@@ -0,0 +1,197 @@
+/**
+ * Copyright (c) 2020-present, Goldman Sachs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { observer } from 'mobx-react-lite';
+import { PanelDropZone } from '@finos/legend-art';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCommands } from '@finos/legend-application';
+import {
+  CODE_EDITOR_LANGUAGE,
+  CODE_EDITOR_THEME,
+  getBaseCodeEditorOptions,
+} from '@finos/legend-code-editor';
+import {
+  editor as monacoEditorAPI,
+  languages as monacoLanguagesAPI,
+  type IDisposable,
+} from 'monaco-editor';
+import { useDrop } from 'react-dnd';
+import { isString } from '@finos/legend-shared';
+import type { AbstractSQLPlaygroundState } from './store/AbstractSQLPlaygroundState.js';
+
+export interface SQLPlaygroundPanelProps {
+  playgroundState: AbstractSQLPlaygroundState;
+  advancedMode: boolean;
+  disableDragDrop?: boolean;
+  enableDarkMode?: boolean;
+}
+
+const toCompletionItems = (
+  labels: string[],
+): monacoLanguagesAPI.CompletionItem[] =>
+  labels.map(
+    (label) =>
+      ({
+        label,
+        kind: monacoLanguagesAPI.CompletionItemKind.Keyword,
+        insertTextRules:
+          monacoLanguagesAPI.CompletionItemInsertTextRule.InsertAsSnippet,
+        insertText: `${label} `,
+      }) as monacoLanguagesAPI.CompletionItem,
+  );
+
+export const PlaygroundSQLCodeEditor = observer(
+  (props: SQLPlaygroundPanelProps) => {
+    const {
+      playgroundState,
+      disableDragDrop = false,
+      enableDarkMode = false,
+    } = props;
+    const codeEditorRef = useRef<HTMLDivElement>(null);
+    const sqlIdentifierSuggestionProviderDisposer = useRef<
+      IDisposable | undefined
+    >(undefined);
+    const [editor, setEditor] = useState<
+      monacoEditorAPI.IStandaloneCodeEditor | undefined
+    >();
+    useEffect(() => {
+      if (!editor && codeEditorRef.current) {
+        const element = codeEditorRef.current;
+        playgroundState.setTheme(enableDarkMode ? 'dark' : 'light');
+        const newEditor = monacoEditorAPI.create(element, {
+          ...getBaseCodeEditorOptions(),
+          theme:
+            playgroundState.theme === 'light'
+              ? CODE_EDITOR_THEME.GITHUB_LIGHT
+              : CODE_EDITOR_THEME.DEFAULT_DARK,
+          language: CODE_EDITOR_LANGUAGE.SQL,
+          padding: {
+            top: 10,
+          },
+        });
+
+        newEditor.onDidChangeModelContent(() => {
+          const currentVal = newEditor.getValue();
+          playgroundState.setSQLText(currentVal);
+        });
+        newEditor.setModel(playgroundState.sqlEditorTextModel);
+        if (playgroundState.sqlEditorViewState) {
+          newEditor.restoreViewState(playgroundState.sqlEditorViewState);
+        }
+        newEditor.focus();
+        playgroundState.setSQLEditor(newEditor);
+        setEditor(newEditor);
+      }
+    }, [playgroundState, editor, enableDarkMode]);
+    useCommands(playgroundState);
+    if (editor) {
+      sqlIdentifierSuggestionProviderDisposer.current?.dispose();
+      sqlIdentifierSuggestionProviderDisposer.current =
+        monacoLanguagesAPI.registerCompletionItemProvider(
+          CODE_EDITOR_LANGUAGE.SQL,
+          {
+            triggerCharacters: [],
+            provideCompletionItems: async (model, position, context) => {
+              let suggestions: monacoLanguagesAPI.CompletionItem[] = [];
+              if (
+                context.triggerKind ===
+                monacoLanguagesAPI.CompletionTriggerKind.Invoke
+              ) {
+                const labels = playgroundState.getCodeCompletionSuggestions();
+                suggestions = suggestions.concat(toCompletionItems(labels));
+              }
+              return { suggestions };
+            },
+          },
+        );
+    }
+    useEffect(
+      () => (): void => {
+        if (editor) {
+          playgroundState.setSQLEditorViewState(
+            editor.saveViewState() ?? undefined,
+          );
+          editor.dispose();
+
+          sqlIdentifierSuggestionProviderDisposer.current?.dispose();
+        }
+      },
+      [playgroundState, editor],
+    );
+
+    type DatabaseNodeDragType = { text: string };
+    const DATABASE_NODE_DND_TYPE = 'DATABASE_NODE_DND_TYPE';
+    const handleDatabaseNodeDrop = useCallback(
+      (item: DatabaseNodeDragType): void => {
+        if (isString(item.text)) {
+          if (playgroundState.sqlEditor) {
+            const currentValue = playgroundState.sqlEditorTextModel.getValue();
+            const lines = currentValue.split('\n');
+            const position = playgroundState.sqlEditor.getPosition() ?? {
+              lineNumber: lines.length,
+              column: lines.at(-1)?.length ?? 0,
+            };
+            playgroundState.sqlEditor.executeEdits('', [
+              {
+                range: {
+                  startLineNumber: position.lineNumber,
+                  startColumn: position.column,
+                  endLineNumber: position.lineNumber,
+                  endColumn: position.column,
+                },
+                text: item.text,
+                forceMoveMarkers: true,
+              },
+            ]);
+            playgroundState.setSQLText(
+              playgroundState.sqlEditorTextModel.getValue(),
+            );
+          }
+        }
+      },
+      [playgroundState],
+    );
+    const [{ isDatabaseNodeDragOver }, dropConnector] = useDrop<
+      DatabaseNodeDragType,
+      void,
+      { isDatabaseNodeDragOver: boolean }
+    >(
+      () => ({
+        accept: DATABASE_NODE_DND_TYPE,
+        drop: (item): void => handleDatabaseNodeDrop(item),
+        collect: (monitor) => ({
+          isDatabaseNodeDragOver: monitor.isOver({ shallow: true }),
+        }),
+      }),
+      [handleDatabaseNodeDrop],
+    );
+
+    return (
+      <div className="sql-playground__code-editor">
+        <PanelDropZone
+          className="sql-playground__code-editor__content"
+          isDragOver={isDatabaseNodeDragOver}
+          dropTargetConnector={dropConnector}
+          disabled={disableDragDrop}
+        >
+          <div className="code-editor__container">
+            <div className="code-editor__body" ref={codeEditorRef} />
+          </div>
+        </PanelDropZone>
+      </div>
+    );
+  },
+);

package/src/sql-playground/SQLPlaygroundGrid.tsx

@@ -0,0 +1,245 @@
+/**
+ * Copyright (c) 2020-present, Goldman Sachs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { observer } from 'mobx-react-lite';
+import { BlankPanelContent, clsx } from '@finos/legend-art';
+import { useCallback } from 'react';
+import {
+  at,
+  isString,
+  parseCSVString,
+  isNonNullable,
+  isNumber,
+  isValidURL,
+} from '@finos/legend-shared';
+
+import {
+  DataGrid,
+  type DataGridCellRendererParams,
+  type DataGridColumnDefinition,
+  type DataGridDefaultMenuItem,
+  type DataGridGetContextMenuItemsParams,
+  type DataGridMenuItemDef,
+} from '../data-grid/DataGrid.js';
+
+const parseExecutionResultData = (
+  data: string,
+): { rowData: Record<string, string>[]; columns: string[] } | undefined => {
+  const lines = data.split('\n').filter((line) => line.trim().length);
+  if (lines.length) {
+    const columns = parseCSVString(at(lines, 0)) ?? [];
+    const rowData = lines
+      .slice(1)
+      .map((item) => {
+        const rowItems = parseCSVString(item);
+        if (!rowItems) {
+          return undefined;
+        }
+        const row: Record<string, string> = {};
+        columns.forEach((column, idx) => {
+          row[column] = rowItems[idx] ?? '';
+        });
+        return row;
+      })
+      .filter(isNonNullable);
+    return { rowData, columns };
+  }
+  return undefined;
+};
+
+const TDSResultCellRenderer = observer((params: DataGridCellRendererParams) => {
+  const cellValue = params.value as string;
+  const formattedCellValue = (): string => {
+    if (isNumber(cellValue)) {
+      return Intl.NumberFormat('en-US', {
+        maximumFractionDigits: 4,
+      }).format(Number(cellValue));
+    }
+    return cellValue;
+  };
+  const cellValueUrlLink =
+    isString(cellValue) && isValidURL(cellValue) ? cellValue : undefined;
+
+  return (
+    <div className={clsx('query-builder__result__values__table__cell')}>
+      {cellValueUrlLink ? (
+        <a href={cellValueUrlLink} target="_blank" rel="noreferrer">
+          {cellValueUrlLink}
+        </a>
+      ) : (
+        <span>{formattedCellValue()}</span>
+      )}
+    </div>
+  );
+});
+
+export const PlayGroundSQLExecutionResultGrid = observer(
+  (props: {
+    result: string;
+    useAdvancedGrid?: boolean;
+    useLocalMode?: boolean;
+    enableDarkMode?: boolean;
+  }) => {
+    const {
+      result,
+      useAdvancedGrid,
+      useLocalMode,
+      enableDarkMode = false,
+    } = props;
+    const data = parseExecutionResultData(result);
+    const darkMode = enableDarkMode;
+
+    if (!data) {
+      return (
+        <BlankPanelContent>{`Can't parse result, displaying raw form:\n${result}`}</BlankPanelContent>
+      );
+    }
+    if (useAdvancedGrid) {
+      if (useLocalMode) {
+        const localcolDefs = data.columns.map(
+          (colName) =>
+            ({
+              minWidth: 50,
+              sortable: true,
+              resizable: true,
+              field: colName,
+              flex: 1,
+              enablePivot: true,
+              enableRowGroup: true,
+              enableValue: true,
+              allowedAggFuncs: ['count'],
+            }) as DataGridColumnDefinition,
+        );
+
+        return (
+          <div
+            className={clsx('sql-playground__result__grid', {
+              'ag-theme-balham': !darkMode,
+              'ag-theme-balham-dark': darkMode,
+            })}
+          >
+            <DataGrid
+              rowData={data.rowData}
+              gridOptions={{
+                suppressScrollOnNewData: true,
+                rowSelection: {
+                  mode: 'multiRow',
+                  checkboxes: false,
+                  headerCheckbox: false,
+                },
+                pivotPanelShow: 'always',
+                rowGroupPanelShow: 'always',
+                cellSelection: true,
+              }}
+              // NOTE: when column definition changed, we need to force refresh the cell to make sure the cell renderer is updated
+              // See https://stackoverflow.com/questions/56341073/how-to-refresh-an-ag-grid-when-a-change-occurs-inside-a-custom-cell-renderer-com
+              onRowDataUpdated={(params) => {
+                params.api.refreshCells({ force: true });
+              }}
+              suppressFieldDotNotation={true}
+              suppressContextMenu={false}
+              columnDefs={localcolDefs}
+              sideBar={['columns', 'filters']}
+            />
+          </div>
+        );
+      }
+      const colDefs = data.columns.map(
+        (colName) =>
+          ({
+            minWidth: 50,
+            sortable: true,
+            resizable: true,
+            field: colName,
+            flex: 1,
+            cellRenderer: TDSResultCellRenderer,
+            filter: true,
+          }) as DataGridColumnDefinition,
+      );
+      const getContextMenuItems = useCallback(
+        (
+          params: DataGridGetContextMenuItemsParams<{
+            [key: string]: string;
+          }>,
+        ): (DataGridDefaultMenuItem | DataGridMenuItemDef)[] => [
+          'copy',
+          'copyWithHeaders',
+          {
+            name: 'Copy Row Value',
+            action: () => {
+              params.api.copySelectedRowsToClipboard();
+            },
+          },
+        ],
+        [],
+      );
+      return (
+        <div
+          className={clsx('sql-playground__result__grid', {
+            'ag-theme-balham': !darkMode,
+            'ag-theme-balham-dark': darkMode,
+          })}
+        >
+          <DataGrid
+            rowData={data.rowData}
+            overlayNoRowsTemplate={`<div class="sql-playground__result__grid--empty">No results</div>`}
+            gridOptions={{
+              suppressScrollOnNewData: true,
+              rowSelection: {
+                mode: 'multiRow',
+                checkboxes: false,
+                headerCheckbox: false,
+              },
+              cellSelection: true,
+            }}
+            onRowDataUpdated={(params) => {
+              params.api.refreshCells({ force: true });
+            }}
+            suppressFieldDotNotation={true}
+            suppressClipboardPaste={false}
+            suppressContextMenu={false}
+            columnDefs={colDefs}
+            getContextMenuItems={(params) => getContextMenuItems(params)}
+          />
+        </div>
+      );
+    }
+
+    return (
+      <div
+        className={clsx('sql-playground__result__grid', {
+          'ag-theme-balham': !darkMode,
+          'ag-theme-balham-dark': darkMode,
+        })}
+      >
+        <DataGrid
+          rowData={data.rowData}
+          overlayNoRowsTemplate={`<div class="sql-playground__result__grid--empty">No results</div>`}
+          alwaysShowVerticalScroll={true}
+          suppressFieldDotNotation={true}
+          columnDefs={data.columns.map((column) => ({
+            minWidth: 50,
+            sortable: true,
+            resizable: true,
+            headerName: column,
+            field: column,
+            flex: 1,
+          }))}
+        />
+      </div>
+    );
+  },
+);