dbn-cli 0.4.0 → 0.5.2

package/src/ui/navigator.ts

@@ -1,5 +1,6 @@
 import type { DatabaseAdapter } from '../adapter/base.ts';
-import type { ViewState, TablesViewState, TableDetailViewState, SchemaViewState, RowDetailViewState, HealthViewState } from '../types.ts';
+import type { ViewState, TablesViewState, TableDetailViewState, SchemaViewState, RowDetailViewState, HealthViewState, ColumnSchema } from '../types.ts';
+import { getVisibleWidth, formatValue } from '../utils/format.ts';
 
 /**
  * Navigation state manager
@@ -45,11 +46,15 @@ export class Navigator {
   moveUp(): void {
     const state = this.currentState;
     if (!state) return;
-    
+
     if (state.type === 'tables') {
       if (state.cursor > 0) {
         state.cursor--;
       }
+    } else if (state.type === 'row-detail') {
+      if (state.scrollOffset > 0) {
+        state.scrollOffset--;
+      }
     } else if (state.type === 'table-detail') {
       if (state.dataCursor > 0) {
         state.dataCursor--;
@@ -71,11 +76,16 @@ export class Navigator {
   moveDown(): void {
     const state = this.currentState;
     if (!state) return;
-    
+
     if (state.type === 'tables') {
       if (state.cursor < state.tables.length - 1) {
         state.cursor++;
       }
+    } else if (state.type === 'row-detail') {
+      const maxScroll = Math.max(0, state.totalLines - state.visibleHeight);
+      if (state.scrollOffset < maxScroll) {
+        state.scrollOffset++;
+      }
     } else if (state.type === 'table-detail') {
       const maxCursor = Math.min(state.data.length - 1, state.visibleRows - 1);
       if (state.dataCursor < maxCursor) {
@@ -98,9 +108,11 @@ export class Navigator {
   jumpToTop(): void {
     const state = this.currentState;
     if (!state) return;
-    
+
     if (state.type === 'tables') {
       state.cursor = 0;
+    } else if (state.type === 'row-detail') {
+      state.scrollOffset = 0;
     } else if (state.type === 'table-detail') {
       state.dataOffset = 0;
       state.dataCursor = 0;
@@ -116,9 +128,11 @@ export class Navigator {
   jumpToBottom(): void {
     const state = this.currentState;
     if (!state) return;
-    
+
     if (state.type === 'tables') {
       state.cursor = state.tables.length - 1;
+    } else if (state.type === 'row-detail') {
+      state.scrollOffset = Math.max(0, state.totalLines - state.visibleHeight);
     } else if (state.type === 'table-detail') {
       const lastPageOffset = Math.max(0, state.totalRows - state.visibleRows);
       state.dataOffset = lastPageOffset;
@@ -154,7 +168,7 @@ export class Navigator {
         cursor: 0,
         scrollOffset: 0
       };
-      
+
       this.states.push(newState);
       this.currentState = newState;
     }
@@ -166,16 +180,17 @@ export class Navigator {
   enter(): void {
     const state = this.currentState;
     if (!state) return;
-    
+
     if (state.type === 'tables') {
       const selectedTable = state.tables[state.cursor];
       if (!selectedTable) return;
-      
+
       // Load table details
       const schema = this.adapter.getTableSchema(selectedTable.name);
       const totalRows = selectedTable.row_count;
-      const data = this.adapter.getTableData(selectedTable.name, { limit: 100, offset: 0 });
-      
+      const data = this.adapter.getTableData(selectedTable.name, { limit: 500, offset: 0 });
+      const columnWeights = this.calculateColumnWeights(selectedTable.name, schema, totalRows);
+
       const newState: TableDetailViewState = {
         type: 'table-detail',
         tableName: selectedTable.name,
@@ -184,32 +199,114 @@ export class Navigator {
         totalRows: totalRows,
         dataOffset: 0,
         dataCursor: 0,
+        bufferOffset: 0,
         visibleRows: 20, // Will be updated by renderer
-        showSchema: false // Schema display toggle
+        showSchema: false, // Schema display toggle
+        columnWeights: columnWeights
       };
-      
+
       this.states.push(newState);
       this.currentState = newState;
     } else if (state.type === 'table-detail') {
       // Enter row detail view
-      if (state.data.length > 0) {
-        const selectedRow = state.data[state.dataCursor];
-        if (!selectedRow) return;
-        
+      const selectedRow = this.getSelectedRow(state);
+      if (selectedRow) {
         const newState: RowDetailViewState = {
           type: 'row-detail',
           tableName: state.tableName,
           row: selectedRow,
           rowIndex: state.dataOffset + state.dataCursor,
-          schema: state.schema
+          totalRows: state.totalRows,
+          schema: state.schema,
+          scrollOffset: 0,
+          totalLines: 0,
+          visibleHeight: 0
         };
-        
+
         this.states.push(newState);
         this.currentState = newState;
       }
     }
   }
 
+  /**
+   * Switch to next record in row-detail view
+   */
+  nextRecord(): void {
+    const state = this.currentState;
+    if (state && state.type === 'row-detail') {
+      if (state.rowIndex < state.totalRows - 1) {
+        state.rowIndex++;
+        // Fetch new row data
+        const data = this.adapter.getTableData(state.tableName, { limit: 1, offset: state.rowIndex });
+        if (data.length > 0) {
+          state.row = data[0];
+          state.scrollOffset = 0;
+          this.syncParentState(state.rowIndex);
+        }
+      }
+    }
+  }
+
+  /**
+   * Switch to previous record in row-detail view
+   */
+  prevRecord(): void {
+    const state = this.currentState;
+    if (state && state.type === 'row-detail') {
+      if (state.rowIndex > 0) {
+        state.rowIndex--;
+        // Fetch new row data
+        const data = this.adapter.getTableData(state.tableName, { limit: 1, offset: state.rowIndex });
+        if (data.length > 0) {
+          state.row = data[0];
+          state.scrollOffset = 0;
+          this.syncParentState(state.rowIndex);
+        }
+      }
+    }
+  }
+
+  /**
+   * Helper to sync parent state with current row index
+   */
+  private syncParentState(rowIndex: number): void {
+    const parent = this.states[this.states.length - 2];
+    if (parent && parent.type === 'table-detail') {
+      const visibleRows = parent.visibleRows || 20;
+
+      // Try to keep the row within the visible window if possible
+      const currentPos = parent.dataOffset + parent.dataCursor;
+      if (rowIndex === currentPos) return;
+
+      let newOffset = parent.dataOffset;
+      let newCursor = rowIndex - newOffset;
+
+      if (newCursor < 0) {
+        newOffset = rowIndex;
+        newCursor = 0;
+      } else if (newCursor >= visibleRows) {
+        newOffset = rowIndex - (visibleRows - 1);
+        newCursor = visibleRows - 1;
+      }
+
+      parent.dataOffset = newOffset;
+      parent.dataCursor = newCursor;
+
+      // Ensure data is reloaded in parent buffer if needed
+      this.reloadState(parent);
+    }
+  }
+
+  /*
+   * Helper to get the currently selected row from table data buffer
+   */
+  private getSelectedRow(state: TableDetailViewState): Record<string, any> | undefined {
+    if (state.data.length === 0) return undefined;
+    const bufferIndex = state.dataOffset - state.bufferOffset + state.dataCursor;
+    return state.data[bufferIndex];
+  }
+
   /**
    * Go back to previous view
    */
@@ -246,12 +343,7 @@ export class Navigator {
 
     if (state.type === 'table-detail') {
       state.deleteConfirm = undefined;
-      if (state.data.length === 0) {
-        state.notice = 'No row selected';
-        return;
-      }
-
-      const selectedRow = state.data[state.dataCursor];
+      const selectedRow = this.getSelectedRow(state);
       if (!selectedRow) {
         state.notice = 'No row selected';
         return;
@@ -316,10 +408,11 @@ export class Navigator {
       state.notice = `Row ${confirm.rowIndex + 1} deleted`;
       state.totalRows = this.adapter.getRowCount(state.tableName);
 
-      const maxOffset = Math.max(0, state.totalRows - state.visibleRows);
+      const visibleRows = state.visibleRows || 20;
+      const maxOffset = Math.max(0, state.totalRows - visibleRows);
       state.dataOffset = Math.min(state.dataOffset, maxOffset);
 
-      this.reload();
+      this.reload(true);
       if (state.dataCursor >= state.data.length) {
         state.dataCursor = Math.max(0, state.data.length - 1);
       }
@@ -345,13 +438,16 @@ export class Navigator {
         parent.notice = `Row ${confirm.rowIndex + 1} deleted`;
         parent.totalRows = this.adapter.getRowCount(parent.tableName);
 
+        // Sync parent cursor to the deleted row's position
+        this.syncParentState(confirm.rowIndex);
+
         const maxOffset = Math.max(0, parent.totalRows - parent.visibleRows);
         parent.dataOffset = Math.min(parent.dataOffset, maxOffset);
 
         parent.deleteConfirm = undefined;
         this.states.pop();
         this.currentState = parent;
-        this.reload();
+        this.reload(true);
 
         if (parent.dataCursor >= parent.data.length) {
           parent.dataCursor = Math.max(0, parent.data.length - 1);
@@ -396,19 +492,86 @@ export class Navigator {
   /**
    * Reload current view data
    */
-  reload(): void {
-    const state = this.currentState;
-    
+  reload(force: boolean = false): void {
+    if (this.currentState) {
+      this.reloadState(this.currentState, force);
+    }
+  }
+
+  /**
+   * Reload specific view state data
+   */
+  private reloadState(state: ViewState, force: boolean = false): void {
     if (state && state.type === 'table-detail') {
-      // Reload table data with current offset
-      const loadOffset = Math.max(0, state.dataOffset);
-      state.data = this.adapter.getTableData(state.tableName, { 
-        limit: 100, 
-        offset: loadOffset 
-      });
+      const bufferSize = 500;
+      const currentPos = state.dataOffset + state.dataCursor;
+
+      // Check if we need to reload data
+      const needsReload = force ||
+        state.data.length === 0 ||
+        currentPos < state.bufferOffset ||
+        currentPos >= state.bufferOffset + state.data.length;
+
+      if (needsReload) {
+        // Calculate new buffer offset to keep current view in middle if possible
+        const halfBuffer = Math.floor(bufferSize / 2);
+        const newBufferOffset = Math.max(0, Math.min(
+          currentPos - halfBuffer,
+          state.totalRows - bufferSize
+        ));
+
+        state.data = this.adapter.getTableData(state.tableName, {
+          limit: bufferSize,
+          offset: newBufferOffset
+        });
+        state.bufferOffset = newBufferOffset;
+      }
     }
   }
 
+  /**
+   * Calculate weights for each column based on type, name and sample data
+   */
+  private calculateColumnWeights(tableName: string, schema: ColumnSchema[], totalRows: number): number[] {
+    // Fetch latest 10 rows for sampling
+    const sampleSize = 10;
+    const sampleData = this.adapter.getTableData(tableName, {
+      limit: sampleSize,
+      offset: Math.max(0, totalRows - sampleSize)
+    });
+
+    return schema.map(col => {
+      // 1. Base weight by type
+      let typeWeight = 15;
+      const type = col.type.toUpperCase();
+      if (type.includes('CHAR') || type.includes('TEXT') || type.includes('CLOB') || type.includes('BLOB')) {
+        typeWeight = 20;
+      } else if (type.includes('INT')) {
+        typeWeight = 10;
+      } else if (type.includes('TIME') || type.includes('DATE')) {
+        typeWeight = 18;
+      }
+
+      // 2. Average width from sample data (with cap per row)
+      let avgDataWidth = 0;
+      if (sampleData.length > 0) {
+        const totalWidth = sampleData.reduce((sum, row) => {
+          // Cap individual row width to 50 to avoid Base64/long text outliers
+          // from skewing the weight calculation for everyone else
+          const valWidth = getVisibleWidth(formatValue(row[col.name]));
+          return sum + Math.min(valWidth, 50);
+        }, 0);
+        avgDataWidth = totalWidth / sampleData.length;
+      }
+
+      // 3. Name width (capped at 20)
+      const nameWidth = Math.min(getVisibleWidth(col.name), 20);
+
+      // Final weight is max of all factors
+      return Math.max(nameWidth, typeWeight, Math.ceil(avgDataWidth));
+    });
+  }
+
   private getPrimaryKeyValues(
     schema: TableDetailViewState['schema'],
     row: Record<string, any>

package/src/ui/navigator_sync.test.ts

@@ -0,0 +1,95 @@
+import { describe, it, before, after } from 'node:test';
+import assert from 'node:assert';
+import { DatabaseSync } from 'node:sqlite';
+import { unlinkSync, existsSync } from 'node:fs';
+import { SQLiteAdapter } from '../adapter/sqlite.ts';
+import { Navigator } from './navigator.ts';
+
+const SYNC_DB = './sync-test.db';
+
+describe('Navigator Synchronization', () => {
+  let adapter: SQLiteAdapter;
+  let navigator: Navigator;
+
+  before(() => {
+    const db = new DatabaseSync(SYNC_DB);
+    db.exec(`
+      CREATE TABLE items (
+        id INTEGER PRIMARY KEY,
+        name TEXT
+      );
+    `);
+
+    const insert = db.prepare('INSERT INTO items (name) VALUES (?)');
+    for (let i = 1; i <= 50; i++) {
+      insert.run(`Item ${i}`);
+    }
+    db.close();
+
+    adapter = new SQLiteAdapter();
+    adapter.connect(SYNC_DB);
+    navigator = new Navigator(adapter);
+  });
+
+  after(() => {
+    adapter.close();
+    if (existsSync(SYNC_DB)) {
+      unlinkSync(SYNC_DB);
+    }
+  });
+
+  it('should sync table-detail cursor when navigating in row-detail', () => {
+    navigator.init();
+    navigator.enter(); // Enter 'items' table
+
+    // Start at row 0
+    let state = navigator.getState() as any;
+    assert.strictEqual(state.type, 'table-detail');
+    assert.strictEqual(state.dataCursor, 0);
+    assert.strictEqual(state.dataOffset, 0);
+
+    navigator.enter(); // Enter row-detail for Row 0
+    let rowState = navigator.getState() as any;
+    assert.strictEqual(rowState.type, 'row-detail');
+    assert.strictEqual(rowState.rowIndex, 0);
+
+    // Move to next record (Row 1)
+    navigator.nextRecord();
+    rowState = navigator.getState() as any;
+    assert.strictEqual(rowState.rowIndex, 1);
+    assert.strictEqual(rowState.row.name, 'Item 2');
+
+    // Go back to table-detail
+    navigator.back();
+    state = navigator.getState() as any;
+    assert.strictEqual(state.type, 'table-detail');
+
+    // VERIFY SYNC: The table detail should now be at row 1
+    // (This is expected to FAIL before the fix)
+    assert.strictEqual(state.dataCursor + state.dataOffset, 1, 'Table detail cursor should be synced to Row 1');
+  });
+
+  it('should sync table-detail cursor when deleting in row-detail', () => {
+    navigator.init();
+    navigator.enter(); // Enter 'items' table
+
+    // Move to row 5
+    for (let i = 0; i < 5; i++) navigator.moveDown();
+
+    navigator.enter(); // Enter row-detail for Row 5 (Item 6)
+    navigator.requestDelete();
+    navigator.confirmDelete(); // 1st confirm
+    navigator.confirmDelete(); // 2nd confirm (actually performs delete and goes back)
+
+    const state = navigator.getState() as any;
+    assert.strictEqual(state.type, 'table-detail');
+
+    // After deleting row 5, the cursor should still be at 5 (pointing to what was Row 6)
+    // or adjusted if it was the last row.
+    assert.strictEqual(state.dataCursor + state.dataOffset, 5, 'Table detail cursor should be at index 5 after deletion');
+
+    // Verify it's now 'Item 7' (since Item 6 was deleted)
+    const selectedRow = (navigator as any).getSelectedRow(state);
+    assert.strictEqual(selectedRow.name, 'Item 7');
+  });
+});