add page navigation

Author: Artmann

src/webviews/extension-side/dataframe/dataframeController.ts

@@ -24,8 +24,9 @@ type SelectPageSizeCommand = {
 };
 
 type GoToPageCommand = {
+    cellId?: string;
+    cellIndex?: number;
     command: 'goToPage';
-    cellIndex: number;
     page: number;
 };
 
@@ -145,14 +146,57 @@ export class DataframeController implements IExtensionSyncActivationService {
         });
     }
 
-    private handleGoToPage(editor: NotebookEditor, message: GoToPageCommand) {
-        const cell = editor.notebook.cellAt(message.cellIndex);
-        logger.info(
-            `[DataframeRenderer] goToPage called for cell ${
-                message.cellIndex
-            } (${cell?.document.uri.toString()}), page=${message.page}`
-        );
-        // Could store current page in cell metadata if needed
+    private async handleGoToPage(editor: NotebookEditor, message: GoToPageCommand) {
+        let cell;
+        let cellIndex: number;
+
+        // Try to find cell by cellId first (more reliable)
+        if (message.cellId) {
+            const cells = editor.notebook.getCells();
+            const foundCell = cells.find((c) => c.metadata.id === message.cellId);
+
+            if (foundCell) {
+                cell = foundCell;
+                cellIndex = foundCell.index;
+                logger.info(`[DataframeController] Found cell by cellId ${message.cellId} at index ${cellIndex}`);
+            } else {
+                const errorMessage = `Unable to navigate to page: Could not find the cell with ID ${message.cellId}. The cell may have been deleted.`;
+                logger.error(`[DataframeController] ${errorMessage}`);
+                await window.showErrorMessage(errorMessage);
+                throw new Error(errorMessage);
+            }
+        } else {
+            const errorMessage =
+                'Unable to navigate to page: No cell identifier provided. ' +
+                'Please re-run the cell to update the output metadata.';
+            logger.error(`[DataframeController] ${errorMessage}`);
+            await window.showErrorMessage(errorMessage);
+            throw new Error(errorMessage);
+        }
+
+        // Update page index in table state within cell metadata
+        const existingTableState = cell.metadata.deepnote_table_state || {};
+        const updatedTableState = {
+            ...existingTableState,
+            pageIndex: message.page
+        };
+
+        const edit = new WorkspaceEdit();
+        const notebookEdit = NotebookEdit.updateCellMetadata(cellIndex, {
+            ...cell.metadata,
+            deepnote_table_state: updatedTableState
+        });
+
+        edit.set(editor.notebook.uri, [notebookEdit]);
+
+        await workspace.applyEdit(edit);
+
+        // Re-execute the cell to apply the new page
+        logger.info(`[DataframeController] Re-executing cell ${cellIndex} with new page index ${message.page}`);
+        await commands.executeCommand('notebook.cell.execute', {
+            ranges: [{ start: cellIndex, end: cellIndex + 1 }],
+            document: editor.notebook.uri
+        });
     }
 
     private async handleCopyTableData(message: CopyTableDataCommand) {

src/webviews/webview-side/dataframe-renderer/DataframeRenderer.tsx

@@ -1,6 +1,8 @@
 import React, { memo, useMemo, useState } from 'react';
 import { RendererContext } from 'vscode-notebook-renderer';
 
+import '../react-common/codicon/codicon.css';
+
 export interface DataframeMetadata {
     table_state_spec?: string;
 }
@@ -45,13 +47,16 @@ export const DataframeRenderer = memo(function DataframeRenderer({
 
     const tableState = useMemo((): TableState => JSON.parse(metadata?.table_state_spec || '{}'), [metadata]);
     const [pageSize, setPageSize] = useState(tableState.pageSize || 10);
+    const [pageIndex, setPageIndex] = useState(tableState.pageIndex || 0);
 
     console.log({ state: context.getState(), tableState });
 
     const filteredColumns = data.columns.filter((column) => !column.name.startsWith('_deepnote_'));
     const numberOfRows = Math.min(data.row_count, data.preview_row_count);
     const numberOfColumns = filteredColumns.length;
 
+    const totalPages = Math.ceil(data.row_count / pageSize);
+
     const handlePageSizeChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
         const newPageSize = Number(event.target.value);
 
@@ -71,6 +76,23 @@ export const DataframeRenderer = memo(function DataframeRenderer({
         context.postMessage?.(message);
     };
 
+    const handlePageChange = (newPageIndex: number) => {
+        setPageIndex(newPageIndex);
+
+        console.log('[DataframeRenderer] handlePageChange called with cellId:', cellId, 'page:', newPageIndex);
+
+        const message = {
+            command: 'goToPage',
+            cellId,
+            cellIndex,
+            page: newPageIndex
+        };
+
+        console.log('[DataframeRenderer] Posting message:', message);
+
+        context.postMessage?.(message);
+    };
+
     return (
         <div className="w-full">
             <div className="w-full overflow-x-auto">
@@ -103,7 +125,7 @@ export const DataframeRenderer = memo(function DataframeRenderer({
                     })}
                 </div>
             </div>
-            <div className="px-[8px] py-[4px] flex justify-between items-center border-l border-r border-b border-[var(--vscode-panel-border)] font-mono">
+            <div className="px-[8px] py-[12px] flex justify-between items-center border-l border-r border-b border-[var(--vscode-panel-border)] font-mono">
                 <div className="flex gap-[4px] items-center">
                     <div>
                         {numberOfRows} rows, {numberOfColumns} columns
@@ -127,7 +149,43 @@ export const DataframeRenderer = memo(function DataframeRenderer({
                     </div>
                 </div>
 
-                <div></div>
+                <div className="flex gap-[12px] items-center">
+                    <button
+                        className={`
+                            border border-[var(--vscode-panel-border)] bg-[var(--vscode-button-secondaryBackground)] hover:bg-[var(--vscode-button-secondaryHoverBackground)]
+                            text-[var(--vscode-button-secondaryForeground)]
+                            disabled:opacity-50 disabled:cursor-not-allowed
+                            flex items-center justify-center
+                            h-[20px] w-[20px]
+                        `}
+                        disabled={pageIndex === 0}
+                        title="Previous page"
+                        onClick={() => handlePageChange(pageIndex - 1)}
+                    >
+                        <div className="codicon codicon-chevron-left" style={{ fontSize: 12 }} />
+                    </button>
+                    <span className="">
+                        Page {pageIndex + 1} of {totalPages}
+                    </span>
+                    <button
+                        className={`
+                            border border-[var(--vscode-panel-border)] bg-[var(--vscode-button-secondaryBackground)] hover:bg-[var(--vscode-button-secondaryHoverBackground)]
+                            text-[var(--vscode-button-secondaryForeground)]
+                            disabled:opacity-50 disabled:cursor-not-allowed
+                            flex items-center justify-center
+                            h-[20px] w-[20px]
+                        `}
+                        disabled={pageIndex >= totalPages - 1}
+                        title="Next page"
+                        onClick={() => handlePageChange(pageIndex + 1)}
+                    >
+                        <div className="codicon codicon-chevron-right" style={{ fontSize: 12 }} />
+                    </button>
+                </div>
+
+                <div>
+                    {/* Actions */}
+                </div>
             </div>
         </div>
     );