@deephaven/js-plugin-ag-grid 0.1.0 → 0.1.2

package/README.md

@@ -0,0 +1,48 @@
+# Deephaven JS Plugin for AG Grid
+
+This package can be used to display Deephaven tables using [AG Grid](https://www.ag-grid.com/). It is currently in a beta state.
+
+## Usage
+
+Import the DeephavenViewportDatasource and use it with your AG Grid view. For example, in React:
+
+```tsx
+import React, { useEffect, useRef } from 'react';
+import { AgGridReact } from 'ag-grid-react';
+import type { dh as DhType } from '@deephaven/jsapi-types';
+import { DeephavenViewportDatasource } from '@deephaven/js-plugin-ag-grid';
+
+function DeephavenAgGridComponent({
+  dh,
+  table,
+}: {
+  dh: typeof DhType;
+  table: DhType.Table;
+}) {
+  const datasource = useMemo(
+    () => new DeephavenViewportDatasource(dh, table),
+    [dh, table]
+  );
+  return (
+    <AgGridReact
+      onGridReady={({ api }) => {
+        // Set the API in the Grid when the grid is ready
+        datasource.setGridApi(api);
+      }}
+      rowModelType="viewport"
+      viewportDatasource={datasource}
+      // other AG Grid properties
+    />
+  );
+}
+```
+
+## Details
+
+The `DeephavenViewportDatasource` class is designed to work with AG Grid's viewport row model. It fetches data from a Deephaven table and provides it to the grid as needed. The datasource handles the logic for fetching rows based on the current viewport, which is defined by the first and last row indices.
+
+The [`DeephavenViewportDatasource` listens to the grid's events](./src/datasources/DeephavenViewportDatasource.ts#115) to determine when to update the filters, sorts, aggregations, and groupings in the Deephaven table. Functions in the [utils](./src/utils/) map the Grid's state to operations that can be applied to the Deephaven Table object, which then applies the operation on the server side.
+
+- [AgGridFilterUtils](./src/utils/AgGridFilterUtils.ts): Utility functions for mapping AG Grid filter models to Deephaven table operations.
+- [AgGridSortUtils](./src/utils/AgGridSortUtils.ts): Utility functions for mapping AG Grid sort models to Deephaven table operations.
+- [AgGridAggUtils](./src/utils/AgGridAggUtils.ts): Utility functions for mapping AG Grid aggregation and grouping models to Deephaven table operations.

package/dist/AgGridDhTheme.d.ts

@@ -0,0 +1,9 @@
+import type { CheckboxStyleParams, InputStyleParams, TabStyleParams } from '@ag-grid-community/theming';
+import type { CoreParams } from '@ag-grid-community/theming/dist/types/src/styles/core/core-css';
+type GridDensity = 'compact' | 'regular' | 'spacious';
+export default class AgGridDhTheme {
+    static getThemeParams(gridDensity?: GridDensity): Partial<CoreParams & CheckboxStyleParams & TabStyleParams & InputStyleParams>;
+    private static getDensityDependentParams;
+}
+export {};
+//# sourceMappingURL=AgGridDhTheme.d.ts.map

package/dist/AgGridDhTheme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AgGridDhTheme.d.ts","sourceRoot":"","sources":["../src/AgGridDhTheme.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,mBAAmB,EACnB,gBAAgB,EAChB,cAAc,EACf,MAAM,4BAA4B,CAAC;AACpC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gEAAgE,CAAC;AAGjG,KAAK,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC;AAEtD,MAAM,CAAC,OAAO,OAAO,aAAa;IAChC,MAAM,CAAC,cAAc,CACnB,WAAW,GAAE,WAAuB,GACnC,OAAO,CACR,UAAU,GAAG,mBAAmB,GAAG,cAAc,GAAG,gBAAgB,CACrE;IAqCD,OAAO,CAAC,MAAM,CAAC,yBAAyB;CA0BzC"}

package/dist/AgGridDhTheme.js

@@ -0,0 +1,41 @@
+import { AgGridThemeColors } from './utils/AgGridColors';
+export default class AgGridDhTheme {
+    static getThemeParams(gridDensity = 'regular') {
+        return Object.assign({ 
+            /* Header */
+            headerBackgroundColor: AgGridThemeColors.headerBackgroundColor, headerTextColor: AgGridThemeColors.headerTextColor, headerColumnResizeHandleColor: AgGridThemeColors.headerColumnResizeHandleColor, headerFontFamily: 'var(--font-family-sans-serif)', headerFontSize: '12px', headerFontWeight: 600, headerHeight: 30, 
+            /* Row */
+            backgroundColor: AgGridThemeColors.backgroundColor, oddRowBackgroundColor: AgGridThemeColors.oddRowBackgroundColor, rowHoverColor: AgGridThemeColors.rowHoverColor, rowBorder: false, 
+            /* Selection */
+            selectedRowBackgroundColor: AgGridThemeColors.selectedRowBackgroundColor, 
+            /* Text */
+            textColor: AgGridThemeColors.textColor, fontFamily: 'var(--font-family-sans-serif)', fontSize: 14, 
+            /* Menu */
+            menuBackgroundColor: AgGridThemeColors.menuBackgroundColor, menuTextColor: AgGridThemeColors.menuTextColor, 
+            /* Misc */
+            accentColor: AgGridThemeColors.accentColor }, this.getDensityDependentParams(gridDensity));
+    }
+    static getDensityDependentParams(gridDensity) {
+        switch (gridDensity) {
+            case 'compact':
+                return {
+                    rowHeight: 16,
+                    spacing: 5,
+                    dataFontSize: 11,
+                };
+            case 'regular':
+                return {
+                    rowHeight: 19,
+                    spacing: 5,
+                    dataFontSize: 12,
+                };
+            case 'spacious':
+                return {
+                    rowHeight: 28,
+                    spacing: 7,
+                    dataFontSize: 12,
+                };
+        }
+    }
+}
+//# sourceMappingURL=AgGridDhTheme.js.map

package/dist/AgGridDhTheme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AgGridDhTheme.js","sourceRoot":"","sources":["../src/AgGridDhTheme.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAIzD,MAAM,CAAC,OAAO,OAAO,aAAa;IAChC,MAAM,CAAC,cAAc,CACnB,cAA2B,SAAS;QAIpC;YACE,YAAY;YACZ,qBAAqB,EAAE,iBAAiB,CAAC,qBAAqB,EAC9D,eAAe,EAAE,iBAAiB,CAAC,eAAe,EAClD,6BAA6B,EAC3B,iBAAiB,CAAC,6BAA6B,EACjD,gBAAgB,EAAE,+BAA+B,EACjD,cAAc,EAAE,MAAM,EACtB,gBAAgB,EAAE,GAAG,EACrB,YAAY,EAAE,EAAE;YAEhB,SAAS;YACT,eAAe,EAAE,iBAAiB,CAAC,eAAe,EAClD,qBAAqB,EAAE,iBAAiB,CAAC,qBAAqB,EAC9D,aAAa,EAAE,iBAAiB,CAAC,aAAa,EAC9C,SAAS,EAAE,KAAK;YAEhB,eAAe;YACf,0BAA0B,EAAE,iBAAiB,CAAC,0BAA0B;YAExE,UAAU;YACV,SAAS,EAAE,iBAAiB,CAAC,SAAS,EACtC,UAAU,EAAE,+BAA+B,EAC3C,QAAQ,EAAE,EAAE;YAEZ,UAAU;YACV,mBAAmB,EAAE,iBAAiB,CAAC,mBAAmB,EAC1D,aAAa,EAAE,iBAAiB,CAAC,aAAa;YAE9C,UAAU;YACV,WAAW,EAAE,iBAAiB,CAAC,WAAW,IAEvC,IAAI,CAAC,yBAAyB,CAAC,WAAW,CAAC,EAC9C;IACJ,CAAC;IAEO,MAAM,CAAC,yBAAyB,CACtC,WAAwB;QAIxB,QAAQ,WAAW,EAAE;YACnB,KAAK,SAAS;gBACZ,OAAO;oBACL,SAAS,EAAE,EAAE;oBACb,OAAO,EAAE,CAAC;oBACV,YAAY,EAAE,EAAE;iBACjB,CAAC;YACJ,KAAK,SAAS;gBACZ,OAAO;oBACL,SAAS,EAAE,EAAE;oBACb,OAAO,EAAE,CAAC;oBACV,YAAY,EAAE,EAAE;iBACjB,CAAC;YACJ,KAAK,UAAU;gBACb,OAAO;oBACL,SAAS,EAAE,EAAE;oBACb,OAAO,EAAE,CAAC;oBACV,YAAY,EAAE,EAAE;iBACjB,CAAC;SACL;IACH,CAAC;CACF"}

package/dist/AgGridPlugin.d.ts

@@ -0,0 +1,5 @@
+import { type WidgetPlugin } from '@deephaven/plugin';
+import type { dh } from '@deephaven/jsapi-types';
+export declare const AgGridPlugin: WidgetPlugin<dh.Widget>;
+export default AgGridPlugin;
+//# sourceMappingURL=AgGridPlugin.d.ts.map

package/dist/AgGridPlugin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AgGridPlugin.d.ts","sourceRoot":"","sources":["../src/AgGridPlugin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,YAAY,EAAc,MAAM,mBAAmB,CAAC;AAElE,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,wBAAwB,CAAC;AAMjD,eAAO,MAAM,YAAY,EAAE,YAAY,CAAC,EAAE,CAAC,MAAM,CAOhD,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/AgGridPlugin.js

@@ -0,0 +1,16 @@
+var _a;
+import { PluginType } from '@deephaven/plugin';
+import { vsTable } from '@deephaven/icons';
+import { LicenseManager } from '@ag-grid-enterprise/core';
+import { AgGridWidget } from './AgGridWidget';
+LicenseManager.setLicenseKey((_a = import.meta.env.VITE_AG_GRID_LICENSE_KEY) !== null && _a !== void 0 ? _a : '');
+export const AgGridPlugin = {
+    name: '@deephaven/js-plugin-ag-grid',
+    type: PluginType.WIDGET_PLUGIN,
+    supportedTypes: 'deephaven.ag_grid.AgGrid',
+    component: AgGridWidget,
+    icon: vsTable,
+    title: 'AG Grid',
+};
+export default AgGridPlugin;
+//# sourceMappingURL=AgGridPlugin.js.map

package/dist/AgGridPlugin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AgGridPlugin.js","sourceRoot":"","sources":["../src/AgGridPlugin.ts"],"names":[],"mappings":";AAAA,OAAO,EAAqB,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAClE,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAE3C,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAC1D,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C,cAAc,CAAC,aAAa,CAAC,MAAA,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,wBAAwB,mCAAI,EAAE,CAAC,CAAC;AAE7E,MAAM,CAAC,MAAM,YAAY,GAA4B;IACnD,IAAI,EAAE,8BAA8B;IACpC,IAAI,EAAE,UAAU,CAAC,aAAa;IAC9B,cAAc,EAAE,0BAA0B;IAC1C,SAAS,EAAE,YAAY;IACvB,IAAI,EAAE,OAAO;IACb,KAAK,EAAE,SAAS;CACjB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/AgGridView.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import type { dh as DhType } from '@deephaven/jsapi-types';
+import { WorkspaceSettings } from '@deephaven/redux';
+import { AgGridReactProps } from '@ag-grid-community/react';
+type AgGridViewProps = {
+    table: DhType.Table | DhType.TreeTable;
+    settings?: WorkspaceSettings;
+    agGridProps?: AgGridReactProps;
+};
+/**
+ * AgGrid view that uses the Server-Side Row Model and a Deephaven table as a data source to display
+ * in AG Grid, with support for value formatting, sorting, and basic filtering operations.
+ */
+export declare function AgGridView({ table, settings, agGridProps, }: AgGridViewProps): JSX.Element | null;
+export default AgGridView;
+//# sourceMappingURL=AgGridView.d.ts.map

package/dist/AgGridView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AgGridView.d.ts","sourceRoot":"","sources":["../src/AgGridView.tsx"],"names":[],"mappings":";AACA,OAAO,KAAK,EAAE,EAAE,IAAI,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAE3D,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AASrD,OAAO,EAEL,gBAAgB,EAEjB,MAAM,0BAA0B,CAAC;AAOlC,KAAK,eAAe,GAAG;IACrB,KAAK,EAAE,MAAM,CAAC,KAAK,GAAG,MAAM,CAAC,SAAS,CAAC;IACvC,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,WAAW,CAAC,EAAE,gBAAgB,CAAC;CAChC,CAAC;AAIF;;;GAGG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,WAAW,GACZ,EAAE,eAAe,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CAqHtC;AAED,eAAe,UAAU,CAAC"}

package/dist/AgGridView.js

@@ -0,0 +1,86 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useApi } from '@deephaven/jsapi-bootstrap';
+import Log from '@deephaven/log';
+import { createFormatterFromSettings } from '@deephaven/jsapi-utils';
+import { AgGridReact, } from '@ag-grid-community/react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { getColumnDefs } from './utils/AgGridTableUtils';
+import AgGridFormatter from './utils/AgGridFormatter';
+import TreeCellRenderer from './renderers/TreeCellRenderer';
+import DeephavenViewportDatasource from './datasources/DeephavenViewportDatasource';
+const log = Log.module('@deephaven/js-plugin-ag-grid/AgGridView');
+/**
+ * AgGrid view that uses the Server-Side Row Model and a Deephaven table as a data source to display
+ * in AG Grid, with support for value formatting, sorting, and basic filtering operations.
+ */
+export function AgGridView({ table, settings, agGridProps, }) {
+    const dh = useApi();
+    const gridApiRef = useRef(null);
+    const [isVisible, setIsVisible] = useState(false);
+    const [isFirstDataRendered, setIsFirstDataRendered] = useState(false);
+    const [isColumnsSized, setIsColumnsSized] = useState(false);
+    log.debug('AgGridView rendering', table, table === null || table === void 0 ? void 0 : table.columns);
+    /** Map from Deephaven Table Columns to AG Grid ColDefs */
+    const colDefs = useMemo(() => getColumnDefs(table), [table]);
+    /** Create the ViewportDatasource to pass in to AG Grid based on the Deephaven Table */
+    const datasource = useMemo(() => new DeephavenViewportDatasource(dh, table), [dh, table]);
+    // Create the formatter used to format cell values, currently just a
+    // wrapper around jsapi-utils Formatter, but more functionality could be added.
+    const formatter = useMemo(() => new AgGridFormatter(createFormatterFromSettings(dh, settings)), [dh, settings]);
+    const treeCellRenderer = useMemo(() => function customTreeCellRenderer(props) {
+        return (_jsx(TreeCellRenderer
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        , Object.assign({}, props, { datasource: datasource })));
+    }, [datasource]);
+    const autoGroupColumnDef = useMemo(() => ({
+        cellRenderer: treeCellRenderer,
+    }), [treeCellRenderer]);
+    const sideBar = useMemo(() => ({
+        toolPanels: [
+            {
+                id: 'columns',
+                labelDefault: 'Columns',
+                labelKey: 'columns',
+                iconKey: 'columns',
+                toolPanel: 'agColumnsToolPanel',
+            },
+        ],
+    }), []);
+    // Workaround to auto-size columns based on their contents, as ag-grid ignores virtual columns
+    // that are not visible in the viewport
+    const autoSizeAllColumns = () => {
+        const gridApi = gridApiRef.current;
+        if (!gridApi)
+            return;
+        gridApi.sizeColumnsToFit();
+        const columns = gridApi.getColumns();
+        if (!columns)
+            return;
+        const allColumnIds = columns.map(col => col.getColId());
+        gridApi.autoSizeColumns(allColumnIds);
+    };
+    const handleGridReady = useCallback((event) => {
+        log.debug('handleGridReady', event);
+        datasource.setGridApi(event.api);
+        gridApiRef.current = event.api;
+    }, [datasource]);
+    const handleFirstDataRendered = (event) => {
+        log.debug('handleFirstDataRendered', event);
+        setIsFirstDataRendered(true);
+    };
+    const handleGridSizeChanged = (event) => {
+        log.debug('handleGridSizeChanged', event);
+        setIsVisible(event.clientHeight > 0 && event.clientWidth > 0);
+    };
+    useEffect(() => {
+        if (isVisible && isFirstDataRendered && !isColumnsSized) {
+            setIsColumnsSized(true);
+            autoSizeAllColumns();
+        }
+    }, [isVisible, isFirstDataRendered, isColumnsSized]);
+    return (_jsx(AgGridReact
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    , Object.assign({}, agGridProps, { onGridReady: handleGridReady, onFirstDataRendered: handleFirstDataRendered, onGridSizeChanged: handleGridSizeChanged, autoGroupColumnDef: autoGroupColumnDef, columnDefs: colDefs, dataTypeDefinitions: formatter.cellDataTypeDefinitions, viewportDatasource: datasource, rowModelType: "viewport", sideBar: sideBar })));
+}
+export default AgGridView;
+//# sourceMappingURL=AgGridView.js.map

package/dist/AgGridView.js.map

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

package/dist/AgGridWidget.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import type { dh as DhType } from '@deephaven/jsapi-types';
+import { type WidgetComponentProps } from '@deephaven/plugin';
+/**
+ * Fetches an AgGrid widget from the server and fetches the underlying table provided by the widget.
+ * Then passes the table to AgGridView to display the table in an AG Grid.
+ */
+export declare function AgGridWidget(props: WidgetComponentProps<DhType.Widget>): JSX.Element;
+export default AgGridWidget;
+//# sourceMappingURL=AgGridWidget.d.ts.map

package/dist/AgGridWidget.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AgGridWidget.d.ts","sourceRoot":"","sources":["../src/AgGridWidget.tsx"],"names":[],"mappings":";AAEA,OAAO,KAAK,EAAE,EAAE,IAAI,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAC3D,OAAO,EAAE,KAAK,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAgB9D;;;GAGG;AACH,wBAAgB,YAAY,CAC1B,KAAK,EAAE,oBAAoB,CAAC,MAAM,CAAC,MAAM,CAAC,GACzC,GAAG,CAAC,OAAO,CAwEb;AAED,eAAe,YAAY,CAAC"}

package/dist/AgGridWidget.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from 'react';
+import { LoadingOverlay } from '@deephaven/components';
+import { useApi } from '@deephaven/jsapi-bootstrap';
+import Log from '@deephaven/log';
+import { getSettings } from '@deephaven/redux';
+import { useSelector } from 'react-redux';
+import { themeQuartz } from '@ag-grid-community/theming';
+import { ViewportRowModelModule } from '@ag-grid-enterprise/viewport-row-model';
+import { ColumnsToolPanelModule } from '@ag-grid-enterprise/column-tool-panel';
+import { RowGroupingModule } from '@ag-grid-enterprise/row-grouping';
+import AgGridView from './AgGridView';
+import AgGridDhTheme from './AgGridDhTheme';
+import customStyles from './AgGridCustomStyles.css?inline';
+const log = Log.module('@deephaven/js-plugin-ag-grid/AgGridView');
+/**
+ * Fetches an AgGrid widget from the server and fetches the underlying table provided by the widget.
+ * Then passes the table to AgGridView to display the table in an AG Grid.
+ */
+export function AgGridWidget(props) {
+    const dh = useApi();
+    const settings = useSelector((getSettings));
+    const { fetch } = props;
+    const [table, setTable] = useState();
+    const gridDensity = settings === null || settings === void 0 ? void 0 : settings.gridDensity;
+    const themeParams = useMemo(() => AgGridDhTheme.getThemeParams(gridDensity), [gridDensity]);
+    const theme = useMemo(() => themeQuartz.withParams(themeParams), [themeParams]);
+    const agGridProps = useMemo(() => ({
+        modules: [
+            RowGroupingModule,
+            ViewportRowModelModule,
+            ColumnsToolPanelModule,
+        ],
+        defaultColDef: {
+            filterParams: {
+                buttons: ['reset', 'apply'],
+            },
+        },
+        rowSelection: {
+            mode: 'multiRow',
+            checkboxes: false,
+            headerCheckbox: false,
+            enableClickSelection: true,
+        },
+        suppressCellFocus: true,
+        theme,
+        rowHeight: themeParams.rowHeight,
+    }), [theme, themeParams]);
+    /** First we load the widget object. This is the object that is sent from the server in AgGridMessageStream. */
+    useEffect(() => {
+        let cancelled = false;
+        async function init() {
+            log.debug('Fetching widget');
+            const widget = await fetch();
+            const newTable = (await widget.exportedObjects[0].fetch());
+            if (!cancelled) {
+                log.info('AgGridView loaded table', newTable);
+                setTable(newTable);
+            }
+        }
+        init();
+        return () => {
+            cancelled = true;
+        };
+    }, [dh, fetch]);
+    return table != null ? (_jsxs("div", Object.assign({ className: "ui-table-container" }, { children: [_jsx("style", { children: customStyles }), _jsx(AgGridView, { table: table, settings: settings, agGridProps: agGridProps })] }))) : (_jsx(LoadingOverlay, {}));
+}
+export default AgGridWidget;
+//# sourceMappingURL=AgGridWidget.js.map

package/dist/AgGridWidget.js.map

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