Make contracts more compatible with useViewportData (deephaven#2074)

bmingles · Jun 18, 2024 · b693ddd · b693ddd
1 parent d8ecd8e
commit b693ddd
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 27 deletions.
diff --git a/packages/jsapi-components/src/useSearchableViewportData.test.ts b/packages/jsapi-components/src/useSearchableViewportData.test.ts
@@ -1,6 +1,6 @@
 import { act, renderHook } from '@testing-library/react-hooks';
 import type { DebouncedFunc } from 'lodash';
-import type { FilterCondition, Table } from '@deephaven/jsapi-types';
+import type { dh as DhType } from '@deephaven/jsapi-types';
 import {
   createSearchTextFilter,
   FilterConditionFactory,
@@ -43,8 +43,8 @@ beforeEach(() => {
 describe('useSearchableViewportData: %s', () => {
   type SearchTextChangeHandler = DebouncedFunc<(value: string) => void>;
 
-  const table = createMockProxy<Table>();
-  const columnNames = ['Aaa', 'Bbb', 'Ccc'];
+  const table = createMockProxy<DhType.Table>();
+  const searchColumnNames = ['Aaa', 'Bbb', 'Ccc'];
   const additionalFilterConditionFactories = [
     jest.fn(),
     jest.fn(),
@@ -53,9 +53,11 @@ describe('useSearchableViewportData: %s', () => {
   const mockResult = {
     createSearchTextFilter: jest.fn() as FilterConditionFactory,
     useDebouncedCallback: jest.fn() as unknown as SearchTextChangeHandler,
-    useFilterConditionFactories: [] as FilterCondition[],
+    useFilterConditionFactories: [] as DhType.FilterCondition[],
     useTableUtils: createMockProxy<TableUtils>(),
-    useViewportData: createMockProxy<UseViewportDataResult<unknown, Table>>({
+    useViewportData: createMockProxy<
+      UseViewportDataResult<unknown, DhType.Table>
+    >({
       table,
     }),
   };
@@ -82,7 +84,10 @@ describe('useSearchableViewportData: %s', () => {
     asMock(useViewportData)
       .mockName('useViewportData')
       .mockReturnValue(
-        mockResult.useViewportData as UseViewportDataResult<unknown, Table>
+        mockResult.useViewportData as UseViewportDataResult<
+          unknown,
+          DhType.Table
+        >
       );
 
     asMock(createSearchTextFilter)
@@ -96,11 +101,11 @@ describe('useSearchableViewportData: %s', () => {
 
   it('should create windowed viewport for list data', () => {
     const { result } = renderHook(() =>
-      useSearchableViewportData(
+      useSearchableViewportData({
         table,
-        columnNames,
-        ...additionalFilterConditionFactories
-      )
+        searchColumnNames,
+        additionalFilterConditionFactories,
+      })
     );
 
     expect(useViewportData).toHaveBeenCalledWith({
@@ -116,24 +121,24 @@ describe('useSearchableViewportData: %s', () => {
     );
 
     expect(result.current).toEqual({
-      list: mockResult.useViewportData,
+      ...mockResult.useViewportData,
       onSearchTextChange: mockResult.useDebouncedCallback,
     });
   });
 
   it('should filter data based on search text', () => {
     const { result } = renderHook(() =>
-      useSearchableViewportData(
+      useSearchableViewportData({
         table,
-        columnNames,
-        ...additionalFilterConditionFactories
-      )
+        searchColumnNames,
+        additionalFilterConditionFactories,
+      })
     );
 
     const testCommon = (expectedSearchText: string) => {
       expect(createSearchTextFilter).toHaveBeenCalledWith(
         mockResult.useTableUtils,
-        columnNames,
+        searchColumnNames,
         expectedSearchText
       );
 

diff --git a/packages/jsapi-components/src/useSearchableViewportData.ts b/packages/jsapi-components/src/useSearchableViewportData.ts
@@ -12,26 +12,40 @@ import {
 } from '@deephaven/utils';
 import { useDebouncedCallback } from '@deephaven/react-hooks';
 import { useTableUtils } from './useTableUtils';
-import useViewportData, { UseViewportDataResult } from './useViewportData';
+import useViewportData, {
+  UseViewportDataProps,
+  UseViewportDataResult,
+} from './useViewportData';
 import useFilterConditionFactories from './useFilterConditionFactories';
 import useViewportFilter from './useViewportFilter';
 
-export interface SearchableViewportData<TData> {
-  list: UseViewportDataResult<TData, dh.Table>;
+export interface UseSearchableViewportDataProps<TData>
+  extends UseViewportDataProps<TData, dh.Table> {
+  searchColumnNames: string | string[];
+  additionalFilterConditionFactories?: FilterConditionFactory[];
+}
+
+export interface SearchableViewportData<TData>
+  extends UseViewportDataResult<TData, dh.Table> {
   onSearchTextChange: (searchText: string) => void;
 }
 
 /**
  * Use a viewport data list with a search text filter. Supports additional filters.
- * @param maybeTable The table to use
+ * @param table The table to use
+ * @param itemHeight The height of each item
+ * @param scrollDebounce The debounce time for scroll events
+ * @param viewportSize The size of the viewport
+ * @param viewportPadding The padding around the viewport
+ * @param deserializeRow The row deserializer
  * @param searchColumnNames The column names to search
  * @param additionalFilterConditionFactories Additional filter condition factories
  */
-export function useSearchableViewportData<TData>(
-  maybeTable: dh.Table | null,
-  searchColumnNames: string | string[],
-  ...additionalFilterConditionFactories: FilterConditionFactory[]
-): SearchableViewportData<TData> {
+export function useSearchableViewportData<TData>({
+  searchColumnNames,
+  additionalFilterConditionFactories = [],
+  ...props
+}: UseSearchableViewportDataProps<TData>): SearchableViewportData<TData> {
   const tableUtils = useTableUtils();
 
   const [searchText, setSearchText] = useState<string>('');
@@ -47,10 +61,10 @@ export function useSearchableViewportData<TData>(
   );
 
   const list = useViewportData<TData, dh.Table>({
-    table: maybeTable,
     itemHeight: TABLE_ROW_HEIGHT,
     viewportSize: VIEWPORT_SIZE,
     viewportPadding: VIEWPORT_PADDING,
+    ...props,
   });
 
   const filter = useFilterConditionFactories(
@@ -62,7 +76,7 @@ export function useSearchableViewportData<TData>(
   useViewportFilter(list, filter);
 
   return {
-    list,
+    ...list,
     onSearchTextChange,
   };
 }