[plugin] add support for usePaginatedElementData (#16)

Co-authored-by: Xiaoyu <[email protected]>
Co-authored-by: peternandersson <[email protected]>

Author: 3 people

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

src/client/initialize.ts

@@ -190,6 +190,9 @@ export function initialize<T = {}>(): PluginInstance<T> {
           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]);

src/react/hooks.ts

@@ -1,4 +1,11 @@
-import { useContext, useEffect, useCallback, useRef, 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
  */
@@ -98,6 +105,33 @@ export function useElementData(id: string): WorkbookElementData {
   return data;
 }
 
+/**
+ * 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, () => void] {
+  const client = usePlugin();
+  const [data, setData] = useState<WorkbookElementData>({});
+
+  const loadMore = useCallback(() => {
+    if (id) {
+      client.elements.fetchMoreElementData(id);
+    }
+  }, [id]);
+
+  useEffect(() => {
+    if (id) {
+      return client.elements.subscribeToElementData(id, setData);
+    }
+  }, [client, id]);
+
+  return [data, loadMore];
+}
+
 /**
  * Provides the latest value for entire config or certain key within the config
  * @param {string} key Key within Plugin Config, optional

src/types.ts

@@ -313,6 +313,12 @@ export interface PluginInstance<T = any> {
       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;
   };
 
   /**