@deephaven/jsapi-components 1.8.1-beta.3 → 1.8.1-beta.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/useSetPaddedViewportCallback.d.ts +5 -3
- package/dist/useSetPaddedViewportCallback.d.ts.map +1 -1
- package/dist/useSetPaddedViewportCallback.js +40 -6
- package/dist/useSetPaddedViewportCallback.js.map +1 -1
- package/dist/useViewportData.d.ts +4 -2
- package/dist/useViewportData.d.ts.map +1 -1
- package/dist/useViewportData.js +5 -3
- package/dist/useViewportData.js.map +1 -1
- package/package.json +11 -11
|
@@ -4,11 +4,13 @@ import type { dh } from '@deephaven/jsapi-types';
|
|
|
4
4
|
* a closure over the Table, a desired viewport size, and additional padding.
|
|
5
5
|
* These will be combined with a first row index passed to the callback to
|
|
6
6
|
* calculate the final viewport.
|
|
7
|
-
* @param table Table
|
|
7
|
+
* @param table The `Table` or `TreeTable` to retrieve data from.
|
|
8
8
|
* @param viewportSize The desired viewport size.
|
|
9
|
-
* @param viewportPadding
|
|
9
|
+
* @param viewportPadding The padding to add before and after the viewport.
|
|
10
|
+
* @param viewportSubscriptionOptions The viewport subscription options to use. If provided and
|
|
11
|
+
* the table is not a `TreeTable`, the data will be requested using a `TableViewportSubscription`.
|
|
10
12
|
* @returns A callback function for setting the viewport.
|
|
11
13
|
*/
|
|
12
|
-
export declare function useSetPaddedViewportCallback(table: dh.Table | dh.TreeTable | null, viewportSize: number, viewportPadding: number): (firstRow: number) => void;
|
|
14
|
+
export declare function useSetPaddedViewportCallback(table: dh.Table | dh.TreeTable | null, viewportSize: number, viewportPadding: number, viewportSubscriptionOptions?: dh.ViewportSubscriptionOptions | null): (firstRow: number) => void;
|
|
13
15
|
export default useSetPaddedViewportCallback;
|
|
14
16
|
//# sourceMappingURL=useSetPaddedViewportCallback.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useSetPaddedViewportCallback.d.ts","sourceRoot":"","sources":["../src/useSetPaddedViewportCallback.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,wBAAwB,CAAC;
|
|
1
|
+
{"version":3,"file":"useSetPaddedViewportCallback.d.ts","sourceRoot":"","sources":["../src/useSetPaddedViewportCallback.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,wBAAwB,CAAC;AAOjD;;;;;;;;;;;GAWG;AACH,wBAAgB,4BAA4B,CAC1C,KAAK,EAAE,EAAE,CAAC,KAAK,GAAG,EAAE,CAAC,SAAS,GAAG,IAAI,EACrC,YAAY,EAAE,MAAM,EACpB,eAAe,EAAE,MAAM,EACvB,2BAA2B,GAAE,EAAE,CAAC,2BAA2B,GAAG,IAAW,GACxE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CA+D5B;AAED,eAAe,4BAA4B,CAAC"}
|
|
@@ -1,21 +1,55 @@
|
|
|
1
|
-
import { useCallback } from 'react';
|
|
2
|
-
import { getSize, padFirstAndLastRow } from '@deephaven/jsapi-utils';
|
|
1
|
+
import { useCallback, useEffect, useRef } from 'react';
|
|
2
|
+
import { getSize, padFirstAndLastRow, TableUtils } from '@deephaven/jsapi-utils';
|
|
3
3
|
|
|
4
4
|
/**
|
|
5
5
|
* Creates a callback function that will set a Table viewport. The callback has
|
|
6
6
|
* a closure over the Table, a desired viewport size, and additional padding.
|
|
7
7
|
* These will be combined with a first row index passed to the callback to
|
|
8
8
|
* calculate the final viewport.
|
|
9
|
-
* @param table Table
|
|
9
|
+
* @param table The `Table` or `TreeTable` to retrieve data from.
|
|
10
10
|
* @param viewportSize The desired viewport size.
|
|
11
|
-
* @param viewportPadding
|
|
11
|
+
* @param viewportPadding The padding to add before and after the viewport.
|
|
12
|
+
* @param viewportSubscriptionOptions The viewport subscription options to use. If provided and
|
|
13
|
+
* the table is not a `TreeTable`, the data will be requested using a `TableViewportSubscription`.
|
|
12
14
|
* @returns A callback function for setting the viewport.
|
|
13
15
|
*/
|
|
14
16
|
export function useSetPaddedViewportCallback(table, viewportSize, viewportPadding) {
|
|
17
|
+
var viewportSubscriptionOptions = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
|
|
18
|
+
var subscriptionRef = useRef(null);
|
|
19
|
+
var prevTableRef = useRef(null);
|
|
20
|
+
var prevViewportOptionsRef = useRef(null);
|
|
21
|
+
var cleanupSubscription = () => {
|
|
22
|
+
if (subscriptionRef.current) {
|
|
23
|
+
subscriptionRef.current.close();
|
|
24
|
+
subscriptionRef.current = null;
|
|
25
|
+
}
|
|
26
|
+
};
|
|
27
|
+
if (prevTableRef.current !== table || prevViewportOptionsRef.current !== viewportSubscriptionOptions) {
|
|
28
|
+
prevTableRef.current = table;
|
|
29
|
+
prevViewportOptionsRef.current = viewportSubscriptionOptions;
|
|
30
|
+
cleanupSubscription();
|
|
31
|
+
}
|
|
32
|
+
useEffect(() => cleanupSubscription, []);
|
|
15
33
|
return useCallback(function setPaddedViewport(firstRow) {
|
|
34
|
+
if (table == null) {
|
|
35
|
+
return;
|
|
36
|
+
}
|
|
16
37
|
var [first, last] = padFirstAndLastRow(firstRow, viewportSize, viewportPadding, getSize(table));
|
|
17
|
-
|
|
18
|
-
|
|
38
|
+
if (subscriptionRef.current == null && viewportSubscriptionOptions != null && !TableUtils.isTreeTable(table)) {
|
|
39
|
+
subscriptionRef.current = table.createViewportSubscription(viewportSubscriptionOptions);
|
|
40
|
+
}
|
|
41
|
+
if (subscriptionRef.current == null) {
|
|
42
|
+
table.setViewport(first, last);
|
|
43
|
+
return;
|
|
44
|
+
}
|
|
45
|
+
subscriptionRef.current.update({
|
|
46
|
+
rows: {
|
|
47
|
+
first,
|
|
48
|
+
last
|
|
49
|
+
},
|
|
50
|
+
columns: table.columns
|
|
51
|
+
});
|
|
52
|
+
}, [table, viewportPadding, viewportSize, viewportSubscriptionOptions]);
|
|
19
53
|
}
|
|
20
54
|
export default useSetPaddedViewportCallback;
|
|
21
55
|
//# sourceMappingURL=useSetPaddedViewportCallback.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useSetPaddedViewportCallback.js","names":["useCallback","getSize","padFirstAndLastRow","useSetPaddedViewportCallback","table","viewportSize","viewportPadding","setPaddedViewport","firstRow","first","last","setViewport"],"sources":["../src/useSetPaddedViewportCallback.ts"],"sourcesContent":["import { useCallback } from 'react';\nimport type { dh } from '@deephaven/jsapi-types';\nimport {
|
|
1
|
+
{"version":3,"file":"useSetPaddedViewportCallback.js","names":["useCallback","useEffect","useRef","getSize","padFirstAndLastRow","TableUtils","useSetPaddedViewportCallback","table","viewportSize","viewportPadding","viewportSubscriptionOptions","arguments","length","undefined","subscriptionRef","prevTableRef","prevViewportOptionsRef","cleanupSubscription","current","close","setPaddedViewport","firstRow","first","last","isTreeTable","createViewportSubscription","setViewport","update","rows","columns"],"sources":["../src/useSetPaddedViewportCallback.ts"],"sourcesContent":["import { useCallback, useEffect, useRef } from 'react';\nimport type { dh } from '@deephaven/jsapi-types';\nimport {\n getSize,\n padFirstAndLastRow,\n TableUtils,\n} from '@deephaven/jsapi-utils';\n\n/**\n * Creates a callback function that will set a Table viewport. The callback has\n * a closure over the Table, a desired viewport size, and additional padding.\n * These will be combined with a first row index passed to the callback to\n * calculate the final viewport.\n * @param table The `Table` or `TreeTable` to retrieve data from.\n * @param viewportSize The desired viewport size.\n * @param viewportPadding The padding to add before and after the viewport.\n * @param viewportSubscriptionOptions The viewport subscription options to use. If provided and\n * the table is not a `TreeTable`, the data will be requested using a `TableViewportSubscription`.\n * @returns A callback function for setting the viewport.\n */\nexport function useSetPaddedViewportCallback(\n table: dh.Table | dh.TreeTable | null,\n viewportSize: number,\n viewportPadding: number,\n viewportSubscriptionOptions: dh.ViewportSubscriptionOptions | null = null\n): (firstRow: number) => void {\n const subscriptionRef = useRef<dh.TableViewportSubscription | null>(null);\n const prevTableRef = useRef<dh.Table | dh.TreeTable | null>(null);\n const prevViewportOptionsRef = useRef<dh.ViewportSubscriptionOptions | null>(\n null\n );\n\n const cleanupSubscription = () => {\n if (subscriptionRef.current) {\n subscriptionRef.current.close();\n subscriptionRef.current = null;\n }\n };\n\n if (\n prevTableRef.current !== table ||\n prevViewportOptionsRef.current !== viewportSubscriptionOptions\n ) {\n prevTableRef.current = table;\n prevViewportOptionsRef.current = viewportSubscriptionOptions;\n cleanupSubscription();\n }\n\n useEffect(() => cleanupSubscription, []);\n\n return useCallback(\n function setPaddedViewport(firstRow: number) {\n if (table == null) {\n return;\n }\n\n const [first, last] = padFirstAndLastRow(\n firstRow,\n viewportSize,\n viewportPadding,\n getSize(table)\n );\n\n if (\n subscriptionRef.current == null &&\n viewportSubscriptionOptions != null &&\n !TableUtils.isTreeTable(table)\n ) {\n subscriptionRef.current = table.createViewportSubscription(\n viewportSubscriptionOptions\n );\n }\n\n if (subscriptionRef.current == null) {\n table.setViewport(first, last);\n return;\n }\n\n subscriptionRef.current.update({\n rows: {\n first,\n last,\n },\n columns: table.columns,\n });\n },\n [table, viewportPadding, viewportSize, viewportSubscriptionOptions]\n );\n}\n\nexport default useSetPaddedViewportCallback;\n"],"mappings":"AAAA,SAASA,WAAW,EAAEC,SAAS,EAAEC,MAAM,QAAQ,OAAO;AAEtD,SACEC,OAAO,EACPC,kBAAkB,EAClBC,UAAU,QACL,wBAAwB;;AAE/B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,4BAA4BA,CAC1CC,KAAqC,EACrCC,YAAoB,EACpBC,eAAuB,EAEK;EAAA,IAD5BC,2BAAkE,GAAAC,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAE,SAAA,GAAAF,SAAA,MAAG,IAAI;EAEzE,IAAMG,eAAe,GAAGZ,MAAM,CAAsC,IAAI,CAAC;EACzE,IAAMa,YAAY,GAAGb,MAAM,CAAiC,IAAI,CAAC;EACjE,IAAMc,sBAAsB,GAAGd,MAAM,CACnC,IACF,CAAC;EAED,IAAMe,mBAAmB,GAAGA,CAAA,KAAM;IAChC,IAAIH,eAAe,CAACI,OAAO,EAAE;MAC3BJ,eAAe,CAACI,OAAO,CAACC,KAAK,CAAC,CAAC;MAC/BL,eAAe,CAACI,OAAO,GAAG,IAAI;IAChC;EACF,CAAC;EAED,IACEH,YAAY,CAACG,OAAO,KAAKX,KAAK,IAC9BS,sBAAsB,CAACE,OAAO,KAAKR,2BAA2B,EAC9D;IACAK,YAAY,CAACG,OAAO,GAAGX,KAAK;IAC5BS,sBAAsB,CAACE,OAAO,GAAGR,2BAA2B;IAC5DO,mBAAmB,CAAC,CAAC;EACvB;EAEAhB,SAAS,CAAC,MAAMgB,mBAAmB,EAAE,EAAE,CAAC;EAExC,OAAOjB,WAAW,CAChB,SAASoB,iBAAiBA,CAACC,QAAgB,EAAE;IAC3C,IAAId,KAAK,IAAI,IAAI,EAAE;MACjB;IACF;IAEA,IAAM,CAACe,KAAK,EAAEC,IAAI,CAAC,GAAGnB,kBAAkB,CACtCiB,QAAQ,EACRb,YAAY,EACZC,eAAe,EACfN,OAAO,CAACI,KAAK,CACf,CAAC;IAED,IACEO,eAAe,CAACI,OAAO,IAAI,IAAI,IAC/BR,2BAA2B,IAAI,IAAI,IACnC,CAACL,UAAU,CAACmB,WAAW,CAACjB,KAAK,CAAC,EAC9B;MACAO,eAAe,CAACI,OAAO,GAAGX,KAAK,CAACkB,0BAA0B,CACxDf,2BACF,CAAC;IACH;IAEA,IAAII,eAAe,CAACI,OAAO,IAAI,IAAI,EAAE;MACnCX,KAAK,CAACmB,WAAW,CAACJ,KAAK,EAAEC,IAAI,CAAC;MAC9B;IACF;IAEAT,eAAe,CAACI,OAAO,CAACS,MAAM,CAAC;MAC7BC,IAAI,EAAE;QACJN,KAAK;QACLC;MACF,CAAC;MACDM,OAAO,EAAEtB,KAAK,CAACsB;IACjB,CAAC,CAAC;EACJ,CAAC,EACD,CAACtB,KAAK,EAAEE,eAAe,EAAED,YAAY,EAAEE,2BAA2B,CACpE,CAAC;AACH;AAEA,eAAeJ,4BAA4B","ignoreList":[]}
|
|
@@ -10,6 +10,7 @@ export interface UseViewportDataProps<TItem, TTable extends dh.Table | dh.TreeTa
|
|
|
10
10
|
viewportPadding?: number;
|
|
11
11
|
viewportSize?: number;
|
|
12
12
|
deserializeRow?: RowDeserializer<TItem>;
|
|
13
|
+
viewportSubscriptionOptions?: dh.ViewportSubscriptionOptions | null;
|
|
13
14
|
}
|
|
14
15
|
export interface UseViewportDataResult<TItem, TTable extends dh.Table | dh.TreeTable> {
|
|
15
16
|
/** Manages deserialized row items associated with a DH Table */
|
|
@@ -39,9 +40,10 @@ export interface UseViewportDataResult<TItem, TTable extends dh.Table | dh.TreeT
|
|
|
39
40
|
* @param viewportPadding The number of items to fetch at start and end of the viewport.
|
|
40
41
|
* @param deserializeRow A function to deserialize a row from the Table.
|
|
41
42
|
* @param reuseItemsOnTableResize If true, existing items will be re-used when
|
|
42
|
-
*
|
|
43
|
+
* @param viewportSubscriptionOptions The viewport subscription options to use. If provided and
|
|
44
|
+
* the table is not a `TreeTable`, the data will be requested using a `TableViewportSubscription`.
|
|
43
45
|
* @returns An object for managing Table viewport state.
|
|
44
46
|
*/
|
|
45
|
-
export declare function useViewportData<TItem, TTable extends dh.Table | dh.TreeTable>({ table, itemHeight, scrollDebounce, viewportSize, viewportPadding, deserializeRow, reuseItemsOnTableResize, }: UseViewportDataProps<TItem, TTable>): UseViewportDataResult<TItem, TTable>;
|
|
47
|
+
export declare function useViewportData<TItem, TTable extends dh.Table | dh.TreeTable>({ table, itemHeight, scrollDebounce, viewportSize, viewportPadding, deserializeRow, reuseItemsOnTableResize, viewportSubscriptionOptions, }: UseViewportDataProps<TItem, TTable>): UseViewportDataResult<TItem, TTable>;
|
|
46
48
|
export default useViewportData;
|
|
47
49
|
//# sourceMappingURL=useViewportData.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useViewportData.d.ts","sourceRoot":"","sources":["../src/useViewportData.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,wBAAwB,CAAC;AACjD,OAAO,EACL,KAAK,eAAe,EAKrB,MAAM,wBAAwB,CAAC;AAGhC,OAAO,EAEL,KAAK,gBAAgB,EACtB,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,kBAAkB,CAAC;AASlD,MAAM,WAAW,oBAAoB,CACnC,KAAK,EACL,MAAM,SAAS,EAAE,CAAC,KAAK,GAAG,EAAE,CAAC,SAAS;IAEtC,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,eAAe,CAAC,KAAK,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"useViewportData.d.ts","sourceRoot":"","sources":["../src/useViewportData.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,wBAAwB,CAAC;AACjD,OAAO,EACL,KAAK,eAAe,EAKrB,MAAM,wBAAwB,CAAC;AAGhC,OAAO,EAEL,KAAK,gBAAgB,EACtB,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,kBAAkB,CAAC;AASlD,MAAM,WAAW,oBAAoB,CACnC,KAAK,EACL,MAAM,SAAS,EAAE,CAAC,KAAK,GAAG,EAAE,CAAC,SAAS;IAEtC,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,eAAe,CAAC,KAAK,CAAC,CAAC;IACxC,2BAA2B,CAAC,EAAE,EAAE,CAAC,2BAA2B,GAAG,IAAI,CAAC;CACrE;AAED,MAAM,WAAW,qBAAqB,CACpC,KAAK,EACL,MAAM,SAAS,EAAE,CAAC,KAAK,GAAG,EAAE,CAAC,SAAS;IAEtC,gEAAgE;IAChE,YAAY,EAAE,gBAAgB,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC;IACjD,mCAAmC;IACnC,IAAI,EAAE,MAAM,CAAC;IAEb,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,0CAA0C;IAC1C,sBAAsB,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,eAAe,EAAE,KAAK,IAAI,CAAC;IAChE,oCAAoC;IACpC,WAAW,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,mDAAmD;IACnD,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CAClC;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,MAAM,SAAS,EAAE,CAAC,KAAK,GAAG,EAAE,CAAC,SAAS,EAAE,EAC7E,KAAK,EACL,UAAc,EACd,cAAmC,EACnC,YAAiB,EACjB,eAAoB,EACpB,cAAuC,EACvC,uBAA+B,EAC/B,2BAAkC,GACnC,EAAE,oBAAoB,CAAC,KAAK,EAAE,MAAM,CAAC,GAAG,qBAAqB,CAAC,KAAK,EAAE,MAAM,CAAC,CAyF5E;AAED,eAAe,eAAe,CAAC"}
|
package/dist/useViewportData.js
CHANGED
|
@@ -24,7 +24,8 @@ var log = Log.module('useViewportData');
|
|
|
24
24
|
* @param viewportPadding The number of items to fetch at start and end of the viewport.
|
|
25
25
|
* @param deserializeRow A function to deserialize a row from the Table.
|
|
26
26
|
* @param reuseItemsOnTableResize If true, existing items will be re-used when
|
|
27
|
-
*
|
|
27
|
+
* @param viewportSubscriptionOptions The viewport subscription options to use. If provided and
|
|
28
|
+
* the table is not a `TreeTable`, the data will be requested using a `TableViewportSubscription`.
|
|
28
29
|
* @returns An object for managing Table viewport state.
|
|
29
30
|
*/
|
|
30
31
|
export function useViewportData(_ref) {
|
|
@@ -35,11 +36,12 @@ export function useViewportData(_ref) {
|
|
|
35
36
|
viewportSize = 10,
|
|
36
37
|
viewportPadding = 50,
|
|
37
38
|
deserializeRow = defaultRowDeserializer,
|
|
38
|
-
reuseItemsOnTableResize = false
|
|
39
|
+
reuseItemsOnTableResize = false,
|
|
40
|
+
viewportSubscriptionOptions = null
|
|
39
41
|
} = _ref;
|
|
40
42
|
var currentViewportFirstRowRef = useRef(0);
|
|
41
43
|
var viewportData = useInitializeViewportData(table, reuseItemsOnTableResize);
|
|
42
|
-
var setPaddedViewport = useSetPaddedViewportCallback(table, viewportSize, viewportPadding);
|
|
44
|
+
var setPaddedViewport = useSetPaddedViewportCallback(table, viewportSize, viewportPadding, viewportSubscriptionOptions);
|
|
43
45
|
var setViewport = useCallback(firstRow => {
|
|
44
46
|
currentViewportFirstRowRef.current = firstRow;
|
|
45
47
|
if (table && !isClosed(table)) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useViewportData.js","names":["useCallback","useEffect","useMemo","useRef","defaultRowDeserializer","isClosed","createOnTableUpdatedHandler","Log","useApi","useOnScrollOffsetChangeCallback","useInitializeViewportData","useSetPaddedViewportCallback","useTableSize","useTableListener","SCROLL_DEBOUNCE_MS","log","module","useViewportData","_ref","table","itemHeight","scrollDebounce","viewportSize","viewportPadding","deserializeRow","reuseItemsOnTableResize","currentViewportFirstRowRef","viewportData","setPaddedViewport","setViewport","firstRow","current","debug","applyFiltersAndRefresh","filters","applyFilter","dh","onTableUpdatedRef","onTableUpdated","event","_onTableUpdatedRef$cu","call","Table","EVENT_UPDATED","size","onScroll"],"sources":["../src/useViewportData.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef } from 'react';\nimport type { dh } from '@deephaven/jsapi-types';\nimport {\n type RowDeserializer,\n defaultRowDeserializer,\n isClosed,\n createOnTableUpdatedHandler,\n type OnTableUpdatedEvent,\n} from '@deephaven/jsapi-utils';\nimport Log from '@deephaven/log';\nimport { useApi } from '@deephaven/jsapi-bootstrap';\nimport {\n useOnScrollOffsetChangeCallback,\n type WindowedListData,\n} from '@deephaven/react-hooks';\nimport { type KeyedItem } from '@deephaven/utils';\nimport useInitializeViewportData from './useInitializeViewportData';\nimport useSetPaddedViewportCallback from './useSetPaddedViewportCallback';\nimport useTableSize from './useTableSize';\nimport useTableListener from './useTableListener';\nimport { SCROLL_DEBOUNCE_MS } from './Constants';\n\nconst log = Log.module('useViewportData');\n\nexport interface UseViewportDataProps<\n TItem,\n TTable extends dh.Table | dh.TreeTable,\n> {\n reuseItemsOnTableResize?: boolean;\n table: TTable | null;\n itemHeight?: number;\n scrollDebounce?: number;\n viewportPadding?: number;\n viewportSize?: number;\n deserializeRow?: RowDeserializer<TItem>;\n}\n\nexport interface UseViewportDataResult<\n TItem,\n TTable extends dh.Table | dh.TreeTable,\n> {\n /** Manages deserialized row items associated with a DH Table */\n viewportData: WindowedListData<KeyedItem<TItem>>;\n /** Size of the underlying Table */\n size: number;\n\n table: TTable | null;\n /** Apply filters and refresh viewport. */\n applyFiltersAndRefresh: (filters: dh.FilterCondition[]) => void;\n /** Set the viewport of the Table */\n setViewport: (firstRow: number) => void;\n /** Handler for scroll events to update viewport */\n onScroll: (event: Event) => void;\n}\n\n/**\n * Sets up state management for windowed Table viewports. Returns a ListData\n * instance for managing items associated with the Table + a `setViewport`\n * callback for changing the current viewport.\n *\n * IMPORTANT: this will create an empty KeyedItem object for every row in the\n * source table. This is intended for \"human\" sized tables such as those used in\n * admin panels. This is not suitable for \"machine\" scale with millions+ rows.\n * @param table The Table to viewport.\n * @param itemHeight The height of each item in the viewport.\n * @param scrollDebounce The number of milliseconds to debounce scroll events.\n * @param viewportSize The number of items to display in the viewport.\n * @param viewportPadding The number of items to fetch at start and end of the viewport.\n * @param deserializeRow A function to deserialize a row from the Table.\n * @param reuseItemsOnTableResize If true, existing items will be re-used when\n * the table
|
|
1
|
+
{"version":3,"file":"useViewportData.js","names":["useCallback","useEffect","useMemo","useRef","defaultRowDeserializer","isClosed","createOnTableUpdatedHandler","Log","useApi","useOnScrollOffsetChangeCallback","useInitializeViewportData","useSetPaddedViewportCallback","useTableSize","useTableListener","SCROLL_DEBOUNCE_MS","log","module","useViewportData","_ref","table","itemHeight","scrollDebounce","viewportSize","viewportPadding","deserializeRow","reuseItemsOnTableResize","viewportSubscriptionOptions","currentViewportFirstRowRef","viewportData","setPaddedViewport","setViewport","firstRow","current","debug","applyFiltersAndRefresh","filters","applyFilter","dh","onTableUpdatedRef","onTableUpdated","event","_onTableUpdatedRef$cu","call","Table","EVENT_UPDATED","size","onScroll"],"sources":["../src/useViewportData.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef } from 'react';\nimport type { dh } from '@deephaven/jsapi-types';\nimport {\n type RowDeserializer,\n defaultRowDeserializer,\n isClosed,\n createOnTableUpdatedHandler,\n type OnTableUpdatedEvent,\n} from '@deephaven/jsapi-utils';\nimport Log from '@deephaven/log';\nimport { useApi } from '@deephaven/jsapi-bootstrap';\nimport {\n useOnScrollOffsetChangeCallback,\n type WindowedListData,\n} from '@deephaven/react-hooks';\nimport { type KeyedItem } from '@deephaven/utils';\nimport useInitializeViewportData from './useInitializeViewportData';\nimport useSetPaddedViewportCallback from './useSetPaddedViewportCallback';\nimport useTableSize from './useTableSize';\nimport useTableListener from './useTableListener';\nimport { SCROLL_DEBOUNCE_MS } from './Constants';\n\nconst log = Log.module('useViewportData');\n\nexport interface UseViewportDataProps<\n TItem,\n TTable extends dh.Table | dh.TreeTable,\n> {\n reuseItemsOnTableResize?: boolean;\n table: TTable | null;\n itemHeight?: number;\n scrollDebounce?: number;\n viewportPadding?: number;\n viewportSize?: number;\n deserializeRow?: RowDeserializer<TItem>;\n viewportSubscriptionOptions?: dh.ViewportSubscriptionOptions | null;\n}\n\nexport interface UseViewportDataResult<\n TItem,\n TTable extends dh.Table | dh.TreeTable,\n> {\n /** Manages deserialized row items associated with a DH Table */\n viewportData: WindowedListData<KeyedItem<TItem>>;\n /** Size of the underlying Table */\n size: number;\n\n table: TTable | null;\n /** Apply filters and refresh viewport. */\n applyFiltersAndRefresh: (filters: dh.FilterCondition[]) => void;\n /** Set the viewport of the Table */\n setViewport: (firstRow: number) => void;\n /** Handler for scroll events to update viewport */\n onScroll: (event: Event) => void;\n}\n\n/**\n * Sets up state management for windowed Table viewports. Returns a ListData\n * instance for managing items associated with the Table + a `setViewport`\n * callback for changing the current viewport.\n *\n * IMPORTANT: this will create an empty KeyedItem object for every row in the\n * source table. This is intended for \"human\" sized tables such as those used in\n * admin panels. This is not suitable for \"machine\" scale with millions+ rows.\n * @param table The Table to viewport.\n * @param itemHeight The height of each item in the viewport.\n * @param scrollDebounce The number of milliseconds to debounce scroll events.\n * @param viewportSize The number of items to display in the viewport.\n * @param viewportPadding The number of items to fetch at start and end of the viewport.\n * @param deserializeRow A function to deserialize a row from the Table.\n * @param reuseItemsOnTableResize If true, existing items will be re-used when\n * @param viewportSubscriptionOptions The viewport subscription options to use. If provided and\n * the table is not a `TreeTable`, the data will be requested using a `TableViewportSubscription`.\n * @returns An object for managing Table viewport state.\n */\nexport function useViewportData<TItem, TTable extends dh.Table | dh.TreeTable>({\n table,\n itemHeight = 1,\n scrollDebounce = SCROLL_DEBOUNCE_MS,\n viewportSize = 10,\n viewportPadding = 50,\n deserializeRow = defaultRowDeserializer,\n reuseItemsOnTableResize = false,\n viewportSubscriptionOptions = null,\n}: UseViewportDataProps<TItem, TTable>): UseViewportDataResult<TItem, TTable> {\n const currentViewportFirstRowRef = useRef<number>(0);\n\n const viewportData = useInitializeViewportData<TItem>(\n table,\n reuseItemsOnTableResize\n );\n\n const setPaddedViewport = useSetPaddedViewportCallback(\n table,\n viewportSize,\n viewportPadding,\n viewportSubscriptionOptions\n );\n\n const setViewport = useCallback(\n (firstRow: number) => {\n currentViewportFirstRowRef.current = firstRow;\n\n if (table && !isClosed(table)) {\n setPaddedViewport(firstRow);\n } else {\n log.debug('setViewport called on closed table.', table);\n }\n },\n [table, setPaddedViewport]\n );\n\n const applyFiltersAndRefresh = useCallback(\n (filters: dh.FilterCondition[]) => {\n if (table && !isClosed(table)) {\n table.applyFilter(filters);\n setViewport(0);\n } else {\n log.debug('applyFiltersAndRefresh called on closed table.', table);\n }\n },\n [setViewport, table]\n );\n\n const dh = useApi();\n\n // Store the memoized callback in a ref so that changes to `viewportData`\n // don't invalidate the memoization of `onTableUpdated`. This prevents\n // `useTableListener` from unnecessarily re-subscribing to the same event over\n // and over.\n const onTableUpdatedRef = useRef<(event: OnTableUpdatedEvent) => void>();\n onTableUpdatedRef.current = useMemo(\n () => createOnTableUpdatedHandler(viewportData, deserializeRow),\n [deserializeRow, viewportData]\n );\n\n const onTableUpdated = useCallback((event: OnTableUpdatedEvent) => {\n onTableUpdatedRef.current?.(event);\n }, []);\n\n useTableListener(table, dh.Table.EVENT_UPDATED, onTableUpdated);\n\n const size = useTableSize(table);\n\n useEffect(() => {\n log.debug('Initializing viewport');\n\n // Hydrate the viewport with real data. This will fetch data from index\n // 0 to the end of the viewport + padding.\n setViewport(0);\n }, [table, setViewport]);\n\n useEffect(() => {\n setViewport(currentViewportFirstRowRef.current);\n }, [setViewport, size]);\n\n const onScroll = useOnScrollOffsetChangeCallback(\n itemHeight,\n setViewport,\n scrollDebounce\n );\n\n return useMemo(\n () => ({\n viewportData,\n size,\n table,\n applyFiltersAndRefresh,\n setViewport,\n onScroll,\n }),\n [applyFiltersAndRefresh, onScroll, setViewport, size, table, viewportData]\n );\n}\n\nexport default useViewportData;\n"],"mappings":"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","ignoreList":[]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@deephaven/jsapi-components",
|
|
3
|
-
"version": "1.8.1-beta.
|
|
3
|
+
"version": "1.8.1-beta.5+e076af5b",
|
|
4
4
|
"description": "Deephaven JSAPI Components",
|
|
5
5
|
"author": "Deephaven Data Labs LLC",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -22,21 +22,21 @@
|
|
|
22
22
|
"build:sass": "sass --embed-sources --load-path=../../node_modules ./src:./dist"
|
|
23
23
|
},
|
|
24
24
|
"dependencies": {
|
|
25
|
-
"@deephaven/components": "^1.8.1-beta.
|
|
26
|
-
"@deephaven/jsapi-bootstrap": "^1.8.1-beta.
|
|
27
|
-
"@deephaven/jsapi-types": "^1.0.0-dev0.
|
|
28
|
-
"@deephaven/jsapi-utils": "^1.8.1-beta.
|
|
29
|
-
"@deephaven/log": "^1.8.1-beta.
|
|
30
|
-
"@deephaven/react-hooks": "^1.8.1-beta.
|
|
31
|
-
"@deephaven/utils": "^1.8.1-beta.
|
|
25
|
+
"@deephaven/components": "^1.8.1-beta.5+e076af5b",
|
|
26
|
+
"@deephaven/jsapi-bootstrap": "^1.8.1-beta.5+e076af5b",
|
|
27
|
+
"@deephaven/jsapi-types": "^1.0.0-dev0.40.4",
|
|
28
|
+
"@deephaven/jsapi-utils": "^1.8.1-beta.5+e076af5b",
|
|
29
|
+
"@deephaven/log": "^1.8.1-beta.5+e076af5b",
|
|
30
|
+
"@deephaven/react-hooks": "^1.8.1-beta.5+e076af5b",
|
|
31
|
+
"@deephaven/utils": "^1.8.1-beta.5+e076af5b",
|
|
32
32
|
"@types/js-cookie": "^3.0.3",
|
|
33
33
|
"classnames": "^2.3.2",
|
|
34
34
|
"js-cookie": "^3.0.5",
|
|
35
35
|
"lodash.debounce": "^4.0.8"
|
|
36
36
|
},
|
|
37
37
|
"devDependencies": {
|
|
38
|
-
"@deephaven/jsapi-shim": "^1.8.1-beta.
|
|
39
|
-
"@deephaven/test-utils": "^1.8.1-beta.
|
|
38
|
+
"@deephaven/jsapi-shim": "^1.8.1-beta.5+e076af5b",
|
|
39
|
+
"@deephaven/test-utils": "^1.8.1-beta.5+e076af5b"
|
|
40
40
|
},
|
|
41
41
|
"peerDependencies": {
|
|
42
42
|
"react": ">=16.8.0"
|
|
@@ -50,5 +50,5 @@
|
|
|
50
50
|
"publishConfig": {
|
|
51
51
|
"access": "public"
|
|
52
52
|
},
|
|
53
|
-
"gitHead": "
|
|
53
|
+
"gitHead": "e076af5beddd8c89e545be425c134fc78a7e9c72"
|
|
54
54
|
}
|