Ensure all derived stores have default values

packages/frontend-core/src/components/sheet/stores/columns.js

@@ -9,7 +9,9 @@ export const createColumnsStores = context => {
 
   // Derive an enriched version of columns with left offsets and indexes
   // automatically calculated
-  const enrichedColumns = derived(columns, $columns => {
+  const enrichedColumns = derived(
+    columns,
+    $columns => {
       let offset = 0
       return $columns.map(column => {
         const enriched = {
@@ -21,12 +23,18 @@ export const createColumnsStores = context => {
         }
         return enriched
       })
-  })
+    },
+    []
+  )
 
   // Derived list of columns which have not been explicitly hidden
-  const visibleColumns = derived(enrichedColumns, $columns => {
+  const visibleColumns = derived(
+    enrichedColumns,
+    $columns => {
       return $columns.filter(col => col.visible)
-  })
+    },
+    []
+  )
 
   // Merge new schema fields with existing schema in order to preserve widths
   schema.subscribe($schema => {

packages/frontend-core/src/components/sheet/stores/reorder.js

@@ -11,7 +11,11 @@ export const createReorderStores = context => {
     sheetLeft: 0,
   }
   const reorder = writable(reorderInitialState)
-  const isReordering = derived(reorder, $reorder => !!$reorder.sourceColumn)
+  const isReordering = derived(
+    reorder,
+    $reorder => !!$reorder.sourceColumn,
+    false
+  )
 
   // Callback when dragging on a colum header and starting reordering
   const startReordering = (column, e) => {

packages/frontend-core/src/components/sheet/stores/resize.js

@@ -14,7 +14,7 @@ export const createResizeStores = context => {
     left: 0,
   }
   const resize = writable(initialState)
-  const isResizing = derived(resize, $resize => $resize.column != null)
+  const isResizing = derived(resize, $resize => $resize.column != null, false)
 
   // Starts resizing a certain column
   const startResizing = (column, e) => {

packages/frontend-core/src/components/sheet/stores/rows.js

@@ -18,21 +18,29 @@ export const createRowsStore = context => {
   const sort = writable(initialSortState)
 
   // Enrich rows with an index property
-  const enrichedRows = derived(rows, $rows => {
+  const enrichedRows = derived(
+    rows,
+    $rows => {
       return $rows.map((row, idx) => ({
         ...row,
         __idx: idx,
       }))
-  })
+    },
+    []
+  )
 
   // Generate a lookup map to quick find a row by ID
-  const rowLookupMap = derived(enrichedRows, $rows => {
+  const rowLookupMap = derived(
+    enrichedRows,
+    $rows => {
       let map = {}
       for (let row of $rows) {
         map[row._id] = row.__idx
       }
       return map
-  })
+    },
+    {}
+  )
 
   // Local cache of row IDs to speed up checking if a row exists
   let rowCacheMap = {}

packages/frontend-core/src/components/sheet/stores/scroll.js

@@ -9,8 +9,8 @@ export const createScrollStores = context => {
   })
 
   // Memoize store primitives
-  const scrollTop = derived(scroll, $scroll => $scroll.top)
+  const scrollTop = derived(scroll, $scroll => $scroll.top, 0)
-  const scrollLeft = derived(scroll, $scroll => $scroll.left)
+  const scrollLeft = derived(scroll, $scroll => $scroll.left, 0)
 
   // Derive vertical limits
   const height = derived(bounds, $bounds => $bounds.height, 0)
@@ -80,6 +80,23 @@ export const createScrollStores = context => {
     }
   })
 
+  // Fetch next page when fewer than 50 scrollable rows remaining
+  const scrollableRows = derived(
+    [scrollTop, maxScrollTop],
+    ([$scrollTop, $maxScrollTop]) => {
+      if (!$maxScrollTop) {
+        return 100
+      }
+      return ($maxScrollTop - $scrollTop) / cellHeight
+    },
+    100
+  )
+  scrollableRows.subscribe(count => {
+    if (count < 25) {
+      rows.actions.loadNextPage()
+    }
+  })
+
   return {
     scroll,
     contentHeight,

packages/frontend-core/src/components/sheet/stores/ui.js

@@ -14,7 +14,8 @@ export const createUIStores = context => {
       const rowId = $selectedCellId?.split("-")[0]
       const index = $rowLookupMap[rowId]
       return $rows[index]
-    }
+    },
+    null
   )
 
   // Ensure we clear invalid rows from state if they disappear

packages/frontend-core/src/components/sheet/stores/users.js

@@ -5,7 +5,9 @@ export const createUserStores = () => {
   const userId = writable(null)
 
   // Enrich users with unique colours
-  const enrichedUsers = derived([users, userId], ([$users, $userId]) => {
+  const enrichedUsers = derived(
+    [users, userId],
+    ([$users, $userId]) => {
       return (
         $users
           .slice()
@@ -48,7 +50,25 @@ export const createUserStores = () => {
             }
           })
       )
+    },
+    []
+  )
+
+  // Generate a lookup map of cell ID to the user that has it selected, to make
+  // lookups inside sheet cells extremely fast
+  const selectedCellMap = derived(
+    [enrichedUsers, userId],
+    ([$enrichedUsers, $userId]) => {
+      let map = {}
+      $enrichedUsers.forEach(user => {
+        if (user.selectedCellId && user.id !== $userId) {
+          map[user.selectedCellId] = user
+        }
       })
+      return map
+    },
+    {}
+  )
 
   const updateUser = user => {
     const $users = get(users)
@@ -69,21 +89,6 @@ export const createUserStores = () => {
     })
   }
 
-  // Generate a lookup map of cell ID to the user that has it selected, to make
-  // lookups inside sheet cells extremely fast
-  const selectedCellMap = derived(
-    [enrichedUsers, userId],
-    ([$enrichedUsers, $userId]) => {
-      let map = {}
-      $enrichedUsers.forEach(user => {
-        if (user.selectedCellId && user.id !== $userId) {
-          map[user.selectedCellId] = user
-        }
-      })
-      return map
-    }
-  )
-
   return {
     users: {
       ...enrichedUsers,

packages/frontend-core/src/components/sheet/stores/viewport.js

@@ -6,23 +6,32 @@ export const createViewportStores = context => {
   const scrollLeft = derived(scroll, $scroll => $scroll.left, 0)
 
   // Derive height and width as primitives to avoid wasted computation
-  const width = derived(bounds, $bounds => $bounds.width)
+  const width = derived(bounds, $bounds => $bounds.width, 0)
-  const height = derived(bounds, $bounds => $bounds.height)
+  const height = derived(bounds, $bounds => $bounds.height, 0)
 
   // Derive visible rows
   // Split into multiple stores containing primitives to optimise invalidation
   // as mich as possible
-  const firstRowIdx = derived(scrollTop, $scrollTop => {
+  const firstRowIdx = derived(
+    scrollTop,
+    $scrollTop => {
       return Math.floor($scrollTop / cellHeight)
-  })
+    },
-  const renderedRowCount = derived(height, $height => {
+    0
+  )
+  const renderedRowCount = derived(
+    height,
+    $height => {
       return Math.ceil($height / cellHeight)
-  })
+    },
+    0
+  )
   const renderedRows = derived(
     [rows, firstRowIdx, renderedRowCount],
     ([$rows, $firstRowIdx, $visibleRowCount]) => {
       return $rows.slice($firstRowIdx, $firstRowIdx + $visibleRowCount)
-    }
+    },
+    []
   )
 
   // Derive visible columns
@@ -65,15 +74,5 @@ export const createViewportStores = context => {
     []
   )
 
-  // Fetch next page when approaching end of data
-  renderedRows.subscribe($renderedRows => {
-    const lastVisible = $renderedRows[$renderedRows.length - 1]
-    const $rows = get(rows)
-    const lastRow = $rows[$rows.length - 1]
-    if (lastVisible && lastRow && lastVisible._id === lastRow._id) {
-      rows.actions.loadNextPage()
-    }
-  })
-
   return { renderedRows, renderedColumns }
 }

packages/frontend-core/src/fetch/DataFetch.js

@@ -419,6 +419,7 @@ export default class DataFetch {
     if (state.loading || !this.options.paginate || !state.hasNextPage) {
       return
     }
+    console.log("NEXT PAGE")
 
     // Fetch next page
     const nextCursor = state.cursors[state.pageNumber + 1]