fix hook

Author: jnumainville

packages/jsapi-components/src/useSetPaddedViewportCallback.test.ts

@@ -6,6 +6,9 @@ import useSetPaddedViewportCallback from './useSetPaddedViewportCallback';
 
 let table: dh.Table;
 let viewportOptions: dh.ViewportSubscriptionOptions;
+let viewportOptionsMissingRows: Partial<dh.ViewportSubscriptionOptions>;
+let viewportOptionsMissingColumns: Partial<dh.ViewportSubscriptionOptions>;
+let viewportOptionsMissingBoth: Partial<dh.ViewportSubscriptionOptions>;
 const viewportSize = 10;
 const viewportPadding = 4;
 
@@ -19,6 +22,16 @@ beforeEach(() => {
     },
     columns: table.columns,
   };
+  viewportOptionsMissingRows = {
+    columns: table.columns,
+  };
+  viewportOptionsMissingColumns = {
+    rows: {
+      first: 5,
+      last: 15,
+    },
+  };
+  viewportOptionsMissingBoth = {};
 });
 
 it('should create a callback that sets a padded viewport', () => {
@@ -89,6 +102,68 @@ it('should use TableViewportSubscription if viewport options are provided', () =
   expect(table.setViewport).not.toHaveBeenCalled();
 });
 
+it('should fill missing rows and columns when creating a subscription', () => {
+  jest.spyOn(TableUtils, 'isTreeTable').mockReturnValue(false);
+
+  const mockSubscription = {
+    update: jest.fn(),
+    close: jest.fn(),
+  };
+
+  (table.createViewportSubscription as jest.Mock).mockReturnValue(
+    mockSubscription
+  );
+
+  const { result, rerender } = renderHook(
+    options =>
+      useSetPaddedViewportCallback(
+        table,
+        viewportSize,
+        viewportPadding,
+        options
+      ),
+    { initialProps: viewportOptionsMissingRows }
+  );
+
+  const firstRow = 30;
+  result.current(firstRow);
+
+  const expectedRows = {
+    first: firstRow - viewportPadding,
+    last: firstRow + viewportSize + viewportPadding - 1,
+  };
+
+  expect(table.createViewportSubscription).toHaveBeenCalledWith({
+    columns: table.columns,
+    rows: expectedRows,
+  });
+
+  jest.clearAllMocks();
+
+  rerender(viewportOptionsMissingColumns);
+  result.current(firstRow + 5);
+
+  expect(table.createViewportSubscription).toHaveBeenCalledWith({
+    rows: viewportOptionsMissingColumns.rows,
+    columns: table.columns,
+  });
+
+  jest.clearAllMocks();
+
+  rerender(viewportOptionsMissingBoth);
+  result.current(firstRow + 10);
+
+  const expectedRows2 = {
+    first: firstRow + 10 - viewportPadding,
+    last: firstRow + 10 + viewportSize + viewportPadding - 1,
+  };
+
+  expect(table.createViewportSubscription).toHaveBeenCalledWith({
+    rows: expectedRows2,
+    columns: table.columns,
+  });
+});
+
 it('should use setViewport if provided a tree table', () => {
   jest.spyOn(TableUtils, 'isTreeTable').mockReturnValue(true);
 

packages/jsapi-components/src/useSetPaddedViewportCallback.ts

@@ -16,19 +16,19 @@ import {
  * @param viewportPadding The padding to add before and after the viewport.
  * @param viewportSubscriptionOptions The viewport subscription options to use. If provided and
  * the table is not a `TreeTable`, the data will be requested using a `TableViewportSubscription`.
+ * Rows and columns are filled in when the subscription is created if they are missing.
  * @returns A callback function for setting the viewport.
  */
 export function useSetPaddedViewportCallback(
   table: dh.Table | dh.TreeTable | null,
   viewportSize: number,
   viewportPadding: number,
-  viewportSubscriptionOptions: dh.ViewportSubscriptionOptions | null = null
+  viewportSubscriptionOptions: Partial<dh.ViewportSubscriptionOptions> | null = null
 ): (firstRow: number) => void {
   const subscriptionRef = useRef<dh.TableViewportSubscription | null>(null);
   const prevTableRef = useRef<dh.Table | dh.TreeTable | null>(null);
-  const prevViewportOptionsRef = useRef<dh.ViewportSubscriptionOptions | null>(
-    null
-  );
+  const prevViewportOptionsRef =
+    useRef<Partial<dh.ViewportSubscriptionOptions> | null>(null);
 
   const cleanupSubscription = () => {
     if (subscriptionRef.current) {
@@ -66,9 +66,14 @@ export function useSetPaddedViewportCallback(
         viewportSubscriptionOptions != null &&
         !TableUtils.isTreeTable(table)
       ) {
-        subscriptionRef.current = table.createViewportSubscription(
-          viewportSubscriptionOptions
-        );
+        const subscriptionOptions: dh.ViewportSubscriptionOptions = {
+          ...viewportSubscriptionOptions,
+          rows: viewportSubscriptionOptions.rows ?? { first, last },
+          columns: viewportSubscriptionOptions.columns ?? table.columns,
+        };
+
+        subscriptionRef.current =
+          table.createViewportSubscription(subscriptionOptions);
       }
 
       if (subscriptionRef.current == null) {

packages/jsapi-components/src/useViewportData.ts

@@ -33,7 +33,7 @@ export interface UseViewportDataProps<
   viewportPadding?: number;
   viewportSize?: number;
   deserializeRow?: RowDeserializer<TItem>;
-  viewportSubscriptionOptions?: dh.ViewportSubscriptionOptions | null;
+  viewportSubscriptionOptions?: Partial<dh.ViewportSubscriptionOptions> | null;
 }
 
 export interface UseViewportDataResult<
@@ -71,6 +71,7 @@ export interface UseViewportDataResult<
  * @param reuseItemsOnTableResize If true, existing items will be re-used when
  * @param viewportSubscriptionOptions The viewport subscription options to use. If provided and
  * the table is not a `TreeTable`, the data will be requested using a `TableViewportSubscription`.
+ * Rows and columns are filled in when the subscription is created if they are missing.
  * @returns An object for managing Table viewport state.
  */
 export function useViewportData<TItem, TTable extends dh.Table | dh.TreeTable>({