From 6290112d06fd035adb81d09465c6cadd99204721 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Tue, 11 Apr 2023 22:21:07 +0100 Subject: [PATCH] Improve data fetch reset logic, fix issues with stale cache in spreadsheets --- .../modals/sheet/SheetEditColumnModal.svelte | 2 +- .../components/sheet/cells/SheetCell.svelte | 42 +++++++++---------- .../src/components/sheet/stores/rows.js | 23 +++++----- packages/frontend-core/src/fetch/DataFetch.js | 2 + 4 files changed, 37 insertions(+), 32 deletions(-) diff --git a/packages/builder/src/components/backend/DataTable/modals/sheet/SheetEditColumnModal.svelte b/packages/builder/src/components/backend/DataTable/modals/sheet/SheetEditColumnModal.svelte index 18e3538ad0..3b0c4e17ec 100644 --- a/packages/builder/src/components/backend/DataTable/modals/sheet/SheetEditColumnModal.svelte +++ b/packages/builder/src/components/backend/DataTable/modals/sheet/SheetEditColumnModal.svelte @@ -9,7 +9,7 @@ let editColumnModal const updateColumns = () => { - rows.actions.refreshTableDefinition() + rows.actions.refreshData() } const editColumn = column => { diff --git a/packages/frontend-core/src/components/sheet/cells/SheetCell.svelte b/packages/frontend-core/src/components/sheet/cells/SheetCell.svelte index a799a70859..5f0e4655fc 100644 --- a/packages/frontend-core/src/components/sheet/cells/SheetCell.svelte +++ b/packages/frontend-core/src/components/sheet/cells/SheetCell.svelte @@ -47,7 +47,6 @@ {/if} - {#if selectedUser && !focused}
{selectedUser.label} @@ -72,6 +71,8 @@ position: relative; width: 0; } + + /* Cell border */ .cell.focused:after, .cell.error:after, .cell.selected-other:not(.focused):after { @@ -86,7 +87,20 @@ border-radius: 2px; box-sizing: border-box; } - .cell:hover { + + /* Cell border for cells with labels */ + .cell.error:after, + .cell.selected-other:not(.focused):after { + border-radius: 0 2px 2px 2px; + } + .cell[data-row="0"].error:after, + .cell[data-row="0"].selected-other:not(.focused):after { + border-radius: 2px 2px 2px 0; + } + + /* Cell z-index */ + .cell.error, + .cell.selected-other:not(.focused) { z-index: 1; } .cell.focused { @@ -96,13 +110,7 @@ border-color: var(--spectrum-global-color-blue-400); } .cell.error:after { - border-color: var(--spectrum-global-color-red-400); - } - .cell.selected-other:not(.focused) { - z-index: 1; - } - .cell.selected-other:not(.focused):after { - border-color: var(--spectrum-global-color-red-400); + border-color: var(--spectrum-global-color-red-500); } .cell:not(.focused) { user-select: none; @@ -134,16 +142,15 @@ height: calc(var(--row-height) + 2px); } - /* Other user email */ + /* Label for additional text */ .label { position: absolute; bottom: 100%; left: 0; - margin: 0 0 -2px 0; padding: 1px 4px 3px 4px; background: var(--user-color); - border-radius: 2px; - display: none; + border-radius: 2px 2px 0 0; + display: block; color: white; font-size: 12px; font-weight: 600; @@ -158,15 +165,8 @@ top: 100%; border-radius: 0 2px 2px 2px; padding: 2px 4px 2px 4px; - margin: -2px 0 0 0; - } - .cell:hover .label { - display: block; } .error .label { - background: var(--spectrum-global-color-red-400); - } - .error.focused .label { - display: block; + background: var(--spectrum-global-color-red-500); } diff --git a/packages/frontend-core/src/components/sheet/stores/rows.js b/packages/frontend-core/src/components/sheet/stores/rows.js index 7d10a98910..f99a3e7611 100644 --- a/packages/frontend-core/src/components/sheet/stores/rows.js +++ b/packages/frontend-core/src/components/sheet/stores/rows.js @@ -80,6 +80,7 @@ export const deriveStores = context => { // Reset everything when table ID changes let unsubscribe = null + let lastResetKey = null tableId.subscribe($tableId => { // Unsub from previous fetch if one exists unsubscribe?.() @@ -109,7 +110,8 @@ export const deriveStores = context => { // Subscribe to changes of this fetch model unsubscribe = newFetch.subscribe($fetch => { if ($fetch.loaded && !$fetch.loading) { - const resetRows = $fetch.pageNumber === 0 + const resetRows = $fetch.resetKey !== lastResetKey + lastResetKey = $fetch.resetKey // Reset scroll state when data changes if (!get(instanceLoaded)) { @@ -211,6 +213,7 @@ export const deriveStores = context => { } } + // Duplicates a row, inserting the duplicate row after the existing one const duplicateRow = async row => { let clone = { ...row } delete clone._id @@ -313,10 +316,10 @@ export const deriveStores = context => { } return state.slice() }) - rowChangeCache.update(state => ({ - ...state, - [rowId]: null, - })) + rowChangeCache.update(state => { + delete state[rowId] + return state + }) } catch (error) { handleValidationError(rowId, error) } @@ -391,11 +394,11 @@ export const deriveStores = context => { // Wipe the row change cache when changing row previousFocusedRowId.subscribe(id => { - if (!get(inProgressChanges)[id]) { - rowChangeCache.update(state => ({ - ...state, - [id]: null, - })) + if (id && !get(inProgressChanges)[id]) { + rowChangeCache.update(state => { + delete state[id] + return state + }) } }) diff --git a/packages/frontend-core/src/fetch/DataFetch.js b/packages/frontend-core/src/fetch/DataFetch.js index 6bf453a6dd..657dae096f 100644 --- a/packages/frontend-core/src/fetch/DataFetch.js +++ b/packages/frontend-core/src/fetch/DataFetch.js @@ -56,6 +56,7 @@ export default class DataFetch { pageNumber: 0, cursor: null, cursors: [], + resetKey: Math.random(), }) // Merge options with their default values @@ -185,6 +186,7 @@ export default class DataFetch { info: page.info, cursors: paginate && page.hasNextPage ? [null, page.cursor] : [null], error: page.error, + resetKey: Math.random(), })) }