Refactor other sheet stores to improve dependency ordering

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

@@ -48,6 +48,70 @@ export const createStores = () => {
 export const deriveStores = context => {
   const { table, columns, stickyColumn, API, dispatch } = context
 
+  // Updates the tables primary display column
+  const changePrimaryDisplay = async column => {
+    return await saveTable({
+      ...get(table),
+      primaryDisplay: column,
+    })
+  }
+
+  // Persists column changes by saving metadata against table schema
+  const saveChanges = async () => {
+    const $columns = get(columns)
+    const $table = get(table)
+    const $stickyColumn = get(stickyColumn)
+    const newSchema = cloneDeep($table.schema)
+
+    // Build new updated table schema
+    Object.keys(newSchema).forEach(column => {
+      // Respect order specified by columns
+      const index = $columns.findIndex(x => x.name === column)
+      if (index !== -1) {
+        newSchema[column].order = index
+      } else {
+        delete newSchema[column].order
+      }
+
+      // Copy over metadata
+      if (column === $stickyColumn?.name) {
+        newSchema[column].visible = true
+        newSchema[column].width = $stickyColumn.width || DefaultColumnWidth
+      } else {
+        newSchema[column].visible = $columns[index]?.visible ?? true
+        newSchema[column].width = $columns[index]?.width || DefaultColumnWidth
+      }
+    })
+
+    await saveTable({ ...$table, schema: newSchema })
+  }
+
+  const saveTable = async newTable => {
+    // Update local state
+    table.set(newTable)
+
+    // Broadcast event so that we can keep sync with external state
+    // (e.g. data section which maintains a list of table definitions)
+    dispatch("updatetable", newTable)
+
+    // Update server
+    await API.saveTable(newTable)
+  }
+
+  return {
+    columns: {
+      ...columns,
+      actions: {
+        saveChanges,
+        changePrimaryDisplay,
+      },
+    },
+  }
+}
+
+export const initialise = context => {
+  const { table, columns, stickyColumn } = context
+
   // Merge new schema fields with existing schema in order to preserve widths
   table.subscribe($table => {
     const schema = $table?.schema
@@ -125,64 +189,4 @@ export const deriveStores = context => {
       idx: "sticky",
     })
   })
-
-  // Updates the tables primary display column
-  const changePrimaryDisplay = async column => {
-    return await saveTable({
-      ...get(table),
-      primaryDisplay: column,
-    })
-  }
-
-  // Persists column changes by saving metadata against table schema
-  const saveChanges = async () => {
-    const $columns = get(columns)
-    const $table = get(table)
-    const $stickyColumn = get(stickyColumn)
-    const newSchema = cloneDeep($table.schema)
-
-    // Build new updated table schema
-    Object.keys(newSchema).forEach(column => {
-      // Respect order specified by columns
-      const index = $columns.findIndex(x => x.name === column)
-      if (index !== -1) {
-        newSchema[column].order = index
-      } else {
-        delete newSchema[column].order
-      }
-
-      // Copy over metadata
-      if (column === $stickyColumn?.name) {
-        newSchema[column].visible = true
-        newSchema[column].width = $stickyColumn.width || DefaultColumnWidth
-      } else {
-        newSchema[column].visible = $columns[index]?.visible ?? true
-        newSchema[column].width = $columns[index]?.width || DefaultColumnWidth
-      }
-    })
-
-    await saveTable({ ...$table, schema: newSchema })
-  }
-
-  const saveTable = async newTable => {
-    // Update local state
-    table.set(newTable)
-
-    // Broadcast event so that we can keep sync with external state
-    // (e.g. data section which maintains a list of table definitions)
-    dispatch("updatetable", newTable)
-
-    // Update server
-    await API.saveTable(newTable)
-  }
-
-  return {
-    columns: {
-      ...columns,
-      actions: {
-        saveChanges,
-        changePrimaryDisplay,
-      },
-    },
-  }
 }

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

@@ -1,6 +1,6 @@
 import { derived } from "svelte/store"
 
-export const deriveStores = context => {
+export const initialise = context => {
   const { scrolledRowCount, rows, visualRowCapacity } = context
 
   // Derive how many rows we have in total
@@ -21,6 +21,4 @@ export const deriveStores = context => {
       rows.actions.loadNextPage()
     }
   })
-
-  return null
 }

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

@@ -17,13 +17,6 @@ export const createStores = () => {
     null
   )
 
-  // Remember the last focused row ID so that we can store the previous one
-  let lastFocusedRowId = null
-  focusedRowId.subscribe(id => {
-    previousFocusedRowId.set(lastFocusedRowId)
-    lastFocusedRowId = id
-  })
-
   return {
     focusedCellId,
     focusedCellAPI,
@@ -37,7 +30,6 @@ export const createStores = () => {
 
 export const deriveStores = context => {
   const {
-    rows,
     focusedCellId,
     selectedRows,
     hoveredRowId,
@@ -63,6 +55,33 @@ export const deriveStores = context => {
     null
   )
 
+  // Callback when leaving the sheet, deselecting all focussed or selected items
+  const blur = () => {
+    focusedCellId.set(null)
+    selectedRows.set({})
+    hoveredRowId.set(null)
+  }
+
+  return {
+    focusedRow,
+    ui: {
+      actions: {
+        blur,
+      },
+    },
+  }
+}
+
+export const initialise = context => {
+  const {
+    focusedRowId,
+    previousFocusedRowId,
+    rows,
+    focusedCellId,
+    selectedRows,
+    hoveredRowId,
+  } = context
+
   // Ensure we clear invalid rows from state if they disappear
   rows.subscribe(() => {
     const $focusedCellId = get(focusedCellId)
@@ -96,6 +115,13 @@ export const deriveStores = context => {
     }
   })
 
+  // Remember the last focused row ID so that we can store the previous one
+  let lastFocusedRowId = null
+  focusedRowId.subscribe(id => {
+    previousFocusedRowId.set(lastFocusedRowId)
+    lastFocusedRowId = id
+  })
+
   // Reset selected rows when selected cell changes
   focusedCellId.subscribe(id => {
     if (id) {
@@ -110,26 +136,10 @@ export const deriveStores = context => {
     }
   })
 
-  // Callback when leaving the sheet, deselecting all focussed or selected items
-  const blur = () => {
-    focusedCellId.set(null)
-    selectedRows.set({})
-    hoveredRowId.set(null)
-  }
-
   // Remove hovered row when a cell is selected
   focusedCellId.subscribe(cell => {
     if (cell && get(hoveredRowId)) {
       hoveredRowId.set(null)
     }
   })
-
-  return {
-    focusedRow,
-    ui: {
-      actions: {
-        blur,
-      },
-    },
-  }
 }

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

@@ -23,7 +23,7 @@ export const createStores = () => {
   }
 }
 
-export const deriveStores = context => {
+export const initialise = context => {
   const { validation, previousFocusedRowId, columns, stickyColumn } = context
 
   // Remove validation errors from previous focused row