From 20e3e9eae4a7fb7969ceba418c95b38d6857fbdf Mon Sep 17 00:00:00 2001 From: Xiaoyu Date: Fri, 23 Aug 2024 10:59:03 -0700 Subject: [PATCH 1/4] [plugin] add support for usePaginatedElementData --- src/client/initialize.ts | 3 +++ src/react/hooks.ts | 26 +++++++++++++++++++++++++- src/types.ts | 6 ++++++ 3 files changed, 34 insertions(+), 1 deletion(-) diff --git a/src/client/initialize.ts b/src/client/initialize.ts index a651f19..c178173 100644 --- a/src/client/initialize.ts +++ b/src/client/initialize.ts @@ -190,6 +190,9 @@ export function initialize(): PluginInstance { void execPromise('wb:plugin:element:unsubscribe:data', id); }; }, + fetchMoreElementData(id) { + void execPromise('wb:plugin:element:fetch-more', id); + } }, destroy() { Object.keys(listeners).forEach(event => delete listeners[event]); diff --git a/src/react/hooks.ts b/src/react/hooks.ts index 330ff65..a858a4e 100644 --- a/src/react/hooks.ts +++ b/src/react/hooks.ts @@ -1,4 +1,4 @@ -import { useContext, useEffect, useCallback, useRef, useState } from 'react'; +import { useContext, useEffect, useCallback, useRef, useMemo, useState } from 'react'; import { PluginContext } from './Context'; import { @@ -98,6 +98,30 @@ export function useElementData(id: string): WorkbookElementData { return data; } +/** + * Provides the latest data values from corresponding sheet with a callback to fetch more + * @param {string} id Sheet ID to get element data from + * @returns {WorkbookElementData} Element Data for corresponding sheet, if any + */ +export function usePaginatedElementData(id: string): WorkbookElementData { + const client = usePlugin(); + const [data, setData] = useState({}); + + const loadMore = useCallback(() => { + if (id) { + client.elements.fetchMoreElementData(id); + } + }, [id]); + + useEffect(() => { + if (id) { + return client.elements.subscribeToElementData(id, setData); + } + }, [client, id]); + + return useMemo(() => [data, loadMore], [data]); +} + /** * Provides the latest value for entire config or certain key within the config * @param {string} key Key within Plugin Config, optional diff --git a/src/types.ts b/src/types.ts index 734ddb6..637ec92 100644 --- a/src/types.ts +++ b/src/types.ts @@ -313,6 +313,12 @@ export interface PluginInstance { id: string, callback: (data: WorkbookElementData) => void, ): Unsubscriber; + + /** + * Ask sigma to load more data + * @param {string} id Sheet ID to load more data + */ + fetchMoreElementData(id: string): void; }; /** From 9eb5b739173d98432db31c1ff07659083847a5ab Mon Sep 17 00:00:00 2001 From: peternandersson Date: Mon, 9 Sep 2024 10:39:40 -0700 Subject: [PATCH 2/4] Address comments --- src/react/hooks.ts | 20 +++++++++++++++----- 1 file changed, 15 insertions(+), 5 deletions(-) diff --git a/src/react/hooks.ts b/src/react/hooks.ts index a858a4e..d37df29 100644 --- a/src/react/hooks.ts +++ b/src/react/hooks.ts @@ -1,4 +1,11 @@ -import { useContext, useEffect, useCallback, useRef, useMemo, useState } from 'react'; +import { + useContext, + useEffect, + useCallback, + useRef, + useMemo, + useState, +} from 'react'; import { PluginContext } from './Context'; import { @@ -81,7 +88,7 @@ export function useElementColumns(id: string): WorkbookElementColumns { } /** - * Provides the latest data values from corresponding sheet + * Provides the latest data values from corresponding sheet (max 25_000) * @param {string} id Sheet ID to get element data from * @returns {WorkbookElementData} Element Data for corresponding sheet, if any */ @@ -99,11 +106,14 @@ export function useElementData(id: string): WorkbookElementData { } /** - * Provides the latest data values from corresponding sheet with a callback to fetch more + * Provides the latest data values from corresponding sheet with a callback to + * fetch more in chunks of 25_000 data points * @param {string} id Sheet ID to get element data from * @returns {WorkbookElementData} Element Data for corresponding sheet, if any */ -export function usePaginatedElementData(id: string): WorkbookElementData { +export function usePaginatedElementData( + id: string, +): [WorkbookElementData, () => void] { const client = usePlugin(); const [data, setData] = useState({}); @@ -119,7 +129,7 @@ export function usePaginatedElementData(id: string): WorkbookElementData { } }, [client, id]); - return useMemo(() => [data, loadMore], [data]); + return [data, loadMore]; } /** From 0b0528b709d16f0870b24fcb9eed930d45ef105b Mon Sep 17 00:00:00 2001 From: peternandersson Date: Wed, 11 Sep 2024 14:13:54 -0700 Subject: [PATCH 3/4] Update README --- README.md | 26 ++++++++++++++++++++++++-- 1 file changed, 24 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index c31d20b..94b92f7 100644 --- a/README.md +++ b/README.md @@ -615,7 +615,7 @@ interface WorkbookElementColumns { #### useElementData() -Provides the latest data values from corresponding sheet +Provides the latest data values from corresponding sheet, up to 25000 values. ```ts function useElementData(elementId: string): WorkbookElementData; @@ -633,6 +633,28 @@ interface WorkbookElementData { } ``` +#### usePaginatedElementData() + +Provides the latest data values from the corresponding sheet (initially 25000), and provides a +callback for fetching more data in chunks of 25000 values. + +```ts +function useElementData(elementId: string): [WorkbookElementData, () => void]; +``` + +Arguments + +- `elementId : string` - A workbook element’s unique identifier. + +Returns the row data from the specified element, and a callback for fetching +more data. + +````ts +interface WorkbookElementData { + [colId: string]: any[]; +} +``` + #### useVariable() Returns a given variable's value and a setter to update that variable @@ -641,7 +663,7 @@ Returns a given variable's value and a setter to update that variable function useVariable( variableId: string, ): [WorkbookVariable | undefined, (...values: unknown[]) => void]; -``` +```` Arguments From 0d3424970a8d0b86a6be11f559c554f12d541a9e Mon Sep 17 00:00:00 2001 From: peternandersson Date: Mon, 16 Sep 2024 12:38:39 -0700 Subject: [PATCH 4/4] address more comments --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 94b92f7..246aefa 100644 --- a/README.md +++ b/README.md @@ -649,7 +649,7 @@ Arguments Returns the row data from the specified element, and a callback for fetching more data. -````ts +```ts interface WorkbookElementData { [colId: string]: any[]; } @@ -663,7 +663,7 @@ Returns a given variable's value and a setter to update that variable function useVariable( variableId: string, ): [WorkbookVariable | undefined, (...values: unknown[]) => void]; -```` +``` Arguments