@svgrid/grid 3.0.4 → 3.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +4 -4
- package/dist/SvGrid.controller.svelte.d.ts +12 -2
- package/dist/SvGrid.controller.svelte.js +192 -8
- package/dist/SvGrid.css +73 -0
- package/dist/SvGrid.svelte +128 -3
- package/dist/SvGrid.types.d.ts +356 -3
- package/dist/build-api.js +11 -6
- package/dist/cdn/{GridMenus-BL7ZgQvU.js → GridMenus-CID62rlI.js} +11 -11
- package/dist/cdn/{GridMenus-7kbpnnBW.js → GridMenus-DLL-qZeu.js} +11 -11
- package/dist/cdn/server-block-cache-CGoWz-87.js +237 -0
- package/dist/cdn/{src-BKhZ6eXd.js → src-Bklofsad.js} +8818 -8798
- package/dist/cdn/{src-V1uu8iE9.js → src-jcFMkBnN.js} +4282 -4262
- package/dist/cdn/svgrid.js +27 -26
- package/dist/cdn/svgrid.svelte-external.js +27 -26
- package/dist/cdn/validate-C7Rn_Bns.js +76 -0
- package/dist/core.js +36 -13
- package/dist/editing.js +10 -0
- package/dist/gantt-view.svelte.d.ts +24 -0
- package/dist/gantt-view.svelte.js +13 -0
- package/dist/grid-icons.d.ts +2 -2
- package/dist/grid-icons.js +2 -2
- package/dist/grid-messages.d.ts +6 -0
- package/dist/grid-messages.js +5 -0
- package/dist/index.d.ts +5 -4
- package/dist/index.js +3 -3
- package/dist/row-model.d.ts +133 -0
- package/dist/row-model.js +16 -0
- package/dist/selection.d.ts +2 -1
- package/dist/selection.js +30 -2
- package/dist/server-block-cache.d.ts +214 -0
- package/dist/server-block-cache.js +531 -0
- package/dist/server-data-source.d.ts +240 -6
- package/dist/server-data-source.js +220 -20
- package/dist/server.d.ts +13 -0
- package/dist/server.js +13 -0
- package/dist/validate.d.ts +4 -0
- package/dist/validate.js +21 -3
- package/package.json +6 -1
- package/src/SvGrid.controller.svelte.ts +191 -8
- package/src/SvGrid.css +73 -0
- package/src/SvGrid.svelte +128 -3
- package/src/SvGrid.types.ts +376 -3
- package/src/build-api.ts +11 -4
- package/src/core.rowmodel-cache.test.ts +51 -0
- package/src/core.ts +33 -12
- package/src/editing.ts +8 -0
- package/src/gantt-stub.test.svelte +38 -0
- package/src/gantt-view.svelte.ts +35 -0
- package/src/grid-icons.ts +2 -2
- package/src/grid-messages.ts +12 -0
- package/src/icon-seam.test.ts +2 -4
- package/src/index.ts +36 -10
- package/src/row-model.ts +146 -0
- package/src/selection.test.ts +3 -0
- package/src/selection.ts +32 -2
- package/src/server-block-cache.test.ts +645 -0
- package/src/server-block-cache.ts +677 -0
- package/src/server-data-source.infinite.test.ts +343 -0
- package/src/server-data-source.ts +450 -27
- package/src/server.ts +47 -0
- package/src/svgrid.gantt-seam.test.ts +199 -0
- package/src/svgrid.row-model-prop.svelte.test.ts +352 -0
- package/src/svgrid.row-model-seam.svelte.test.ts +289 -0
- package/src/svgrid.upsell-license.test.ts +7 -4
- package/src/validate.test.ts +29 -0
- package/src/validate.ts +28 -3
- package/dist/SvGroupCell.svelte +0 -141
- package/dist/SvGroupCell.svelte.d.ts +0 -49
- package/dist/SvRowGroupPanel.svelte +0 -186
- package/dist/SvRowGroupPanel.svelte.d.ts +0 -25
- package/dist/cdn/validate-_CDJzgIo.js +0 -75
- package/dist/server-group-model.d.ts +0 -98
- package/dist/server-group-model.js +0 -263
- package/src/SvGroupCell.svelte +0 -141
- package/src/SvRowGroupPanel.svelte +0 -186
- package/src/server-group-model.test.ts +0 -294
- package/src/server-group-model.ts +0 -370
|
@@ -0,0 +1,677 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Block cache for server-backed rows - the engine behind infinite scrolling.
|
|
3
|
+
*
|
|
4
|
+
* Paging asks for "page 3". Infinite scrolling asks a different question: the
|
|
5
|
+
* user is looking at rows 4,000 to 4,020 of a table with a million rows, so
|
|
6
|
+
* fetch the block that covers them, keep a bounded number of recently-seen
|
|
7
|
+
* blocks, and render something sensible for every row nobody has fetched yet.
|
|
8
|
+
* That is all this module does, in plain TypeScript with no Svelte and no DOM.
|
|
9
|
+
*
|
|
10
|
+
* The shape of the problem (and most of the vocabulary) is the same one every
|
|
11
|
+
* grid with a server row model solves, so the options here are deliberately
|
|
12
|
+
* recognisable: `blockSize`, `maxBlocksInCache`, `maxConcurrentRequests`,
|
|
13
|
+
* `blockLoadDebounceMs`, `initialRowCount`, `overflowRows`.
|
|
14
|
+
*
|
|
15
|
+
* Three things it takes seriously:
|
|
16
|
+
*
|
|
17
|
+
* - **Unloaded rows still have to render.** `rows()` always returns a dense
|
|
18
|
+
* array, with a shared sentinel object in every slot that has no data. The
|
|
19
|
+
* grid recognises those (see {@link rowPlaceholderState}) and draws a
|
|
20
|
+
* skeleton or a retry affordance instead of an empty row, so the scrollbar
|
|
21
|
+
* never lies and scrolling never leaves a hole.
|
|
22
|
+
* - **The row count may be unknown.** A backend that cannot cheaply count
|
|
23
|
+
* says so (omit `rowCount`, or send `-1`) and the list grows by a block at
|
|
24
|
+
* a time until a short block proves where the end is.
|
|
25
|
+
* - **Requests are not free.** In-flight blocks are deduplicated, at most
|
|
26
|
+
* `maxConcurrentRequests` are open at once, a fast scroll debounces rather
|
|
27
|
+
* than firing a request per frame, and blocks abandoned by eviction or
|
|
28
|
+
* purge are aborted.
|
|
29
|
+
*
|
|
30
|
+
* Enterprise's server row model runs one of these per group level; the free
|
|
31
|
+
* flat controller runs exactly one.
|
|
32
|
+
*/
|
|
33
|
+
|
|
34
|
+
/**
|
|
35
|
+
* The mark that says "this row is not data yet".
|
|
36
|
+
*
|
|
37
|
+
* A symbol, for two reasons. It cannot collide with a field in anyone's row
|
|
38
|
+
* data, which a string key like `__svPlaceholder` eventually would. And
|
|
39
|
+
* `Symbol.for` puts it in the global registry, so a placeholder still reads as
|
|
40
|
+
* one after it has crossed a module boundary - two copies of this file loaded
|
|
41
|
+
* through different specifiers would otherwise mint different symbols.
|
|
42
|
+
*/
|
|
43
|
+
const PLACEHOLDER = Symbol.for('svgrid.rowPlaceholder')
|
|
44
|
+
|
|
45
|
+
/** Rows the cache has not loaded. One shared object per state, not per row. */
|
|
46
|
+
const LOADING_ROW = Object.freeze({ [PLACEHOLDER]: 'loading' as const })
|
|
47
|
+
const FAILED_ROW = Object.freeze({ [PLACEHOLDER]: 'failed' as const })
|
|
48
|
+
|
|
49
|
+
/**
|
|
50
|
+
* Why a row is not real data, or `null` when it is.
|
|
51
|
+
*
|
|
52
|
+
* Deliberately NOT an identity check. The sentinels are shared objects, so
|
|
53
|
+
* `row === LOADING_ROW` looks like the obvious test - but rows routinely
|
|
54
|
+
* arrive here through something that wrapped them. Svelte is the everyday
|
|
55
|
+
* case: assigning the controller state into `$state` makes the row array
|
|
56
|
+
* deeply reactive, and every row read back out is a proxy of the original.
|
|
57
|
+
* Identity fails, every placeholder reads as real data, and the grid renders
|
|
58
|
+
* a screen of blank rows instead of skeletons. Reading the mark works through
|
|
59
|
+
* any wrapper that forwards property access, which is all of them.
|
|
60
|
+
*/
|
|
61
|
+
export function rowPlaceholderState(row: unknown): 'loading' | 'failed' | null {
|
|
62
|
+
if (row == null || typeof row !== 'object') return null
|
|
63
|
+
const mark = (row as Record<symbol, unknown>)[PLACEHOLDER]
|
|
64
|
+
return mark === 'loading' || mark === 'failed' ? mark : null
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
/**
|
|
68
|
+
* Mint a frozen placeholder the grid will recognise, carrying whatever
|
|
69
|
+
* other fields the caller wants on it. The row model uses this to give its
|
|
70
|
+
* placeholders a `kind`, so code reading display rows and code reading grid
|
|
71
|
+
* rows agree on what they are looking at.
|
|
72
|
+
*/
|
|
73
|
+
export function createRowPlaceholder<T extends object>(
|
|
74
|
+
state: 'loading' | 'failed',
|
|
75
|
+
fields: T,
|
|
76
|
+
): Readonly<T & { readonly [PLACEHOLDER]: 'loading' | 'failed' }> {
|
|
77
|
+
return Object.freeze({ ...fields, [PLACEHOLDER]: state })
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
/** What a block fetch has to answer with. `rowCount` is optional: see {@link BlockCacheOptions}. */
|
|
81
|
+
export type BlockFetchResult<TData> = {
|
|
82
|
+
rows: ReadonlyArray<TData>
|
|
83
|
+
/**
|
|
84
|
+
* Total rows after filtering. Omit it (or send `-1`) when the backend cannot
|
|
85
|
+
* count cheaply - the cache then discovers the end from the first short
|
|
86
|
+
* block, and `lastRowKnown()` stays false until it does.
|
|
87
|
+
*/
|
|
88
|
+
rowCount?: number
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
/** What a block cache is built from: block size, caps, debounce and the fetch. */
|
|
92
|
+
export type BlockCacheOptions<TData> = {
|
|
93
|
+
/**
|
|
94
|
+
* Rows per request. Bigger blocks mean fewer round trips and more wasted
|
|
95
|
+
* rows when the user scrolls past; 100 is the usual compromise.
|
|
96
|
+
*/
|
|
97
|
+
blockSize?: number
|
|
98
|
+
/**
|
|
99
|
+
* Keep at most this many loaded blocks. Blocks outside the viewport are
|
|
100
|
+
* evicted least-recently-seen first, and scrolling back re-fetches them.
|
|
101
|
+
* Unlimited by default, which is right until the dataset is big enough that
|
|
102
|
+
* holding every visited block matters.
|
|
103
|
+
*/
|
|
104
|
+
maxBlocksInCache?: number
|
|
105
|
+
/** Requests open at once. Default 2. */
|
|
106
|
+
maxConcurrentRequests?: number
|
|
107
|
+
/**
|
|
108
|
+
* Wait this long after the viewport settles before fetching. Non-zero values
|
|
109
|
+
* stop a drag of the scrollbar from requesting every block it flies past.
|
|
110
|
+
*/
|
|
111
|
+
blockLoadDebounceMs?: number
|
|
112
|
+
/**
|
|
113
|
+
* Rows to claim before anything is loaded, so the grid has a scrollbar (and
|
|
114
|
+
* `scrollToRow` has somewhere to land) on the first paint. Default 1.
|
|
115
|
+
*/
|
|
116
|
+
initialRowCount?: number
|
|
117
|
+
/**
|
|
118
|
+
* While the total is unknown, how many unloaded rows to keep past the last
|
|
119
|
+
* loaded one. Scrolling into them is what asks for the next block. Default 1.
|
|
120
|
+
*/
|
|
121
|
+
overflowRows?: number
|
|
122
|
+
/** Fetch one block. Reject, or throw, to mark it failed. */
|
|
123
|
+
fetch: (
|
|
124
|
+
startRow: number,
|
|
125
|
+
endRow: number,
|
|
126
|
+
signal: AbortSignal,
|
|
127
|
+
) => Promise<BlockFetchResult<TData>>
|
|
128
|
+
/** Called after any change to the rows, the count, or a block's state. */
|
|
129
|
+
onChange: (cache: BlockCacheState) => void
|
|
130
|
+
/**
|
|
131
|
+
* How to coalesce `onChange`. Defaults to a microtask, so a burst of block
|
|
132
|
+
* arrivals rebuilds the row array once. Pass `(fn) => fn()` in tests to make
|
|
133
|
+
* every change synchronous.
|
|
134
|
+
*/
|
|
135
|
+
schedule?: (flush: () => void) => void
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
/** One block's place in the world, for diagnostics and for tests. */
|
|
139
|
+
export type BlockState = {
|
|
140
|
+
blockIndex: number
|
|
141
|
+
startRow: number
|
|
142
|
+
endRow: number
|
|
143
|
+
status: 'loading' | 'loaded' | 'failed'
|
|
144
|
+
/** Monotonic counter of when the viewport last covered this block. */
|
|
145
|
+
lastTouched: number
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
/** One block as `getCacheState()` reports it. */
|
|
149
|
+
export type BlockCacheState = {
|
|
150
|
+
/** Rows after filtering, or `null` while the backend has not said. */
|
|
151
|
+
rowCount: number | null
|
|
152
|
+
/** False while the end of the data is still being discovered. */
|
|
153
|
+
lastRowKnown: boolean
|
|
154
|
+
/** True while at least one block is in flight. */
|
|
155
|
+
loading: boolean
|
|
156
|
+
/** Blocks whose fetch rejected. Empty unless something went wrong. */
|
|
157
|
+
failedBlocks: number[]
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
/**
|
|
161
|
+
* A block cache: rows arrive in blocks as the viewport reaches them,
|
|
162
|
+
* placeholders stand in until then, and blocks far from the viewport are
|
|
163
|
+
* evicted past the cap.
|
|
164
|
+
*/
|
|
165
|
+
export type BlockCache<TData> = {
|
|
166
|
+
/**
|
|
167
|
+
* Tell the cache which rows are on screen. Fetches what is missing (after
|
|
168
|
+
* `blockLoadDebounceMs`) and marks those blocks as recently seen so eviction
|
|
169
|
+
* spares them. Safe to call on every scroll frame.
|
|
170
|
+
*/
|
|
171
|
+
setViewport(startIndex: number, endIndex: number): void
|
|
172
|
+
/** The dense row array to hand the grid. Placeholders fill unloaded slots. */
|
|
173
|
+
rows(): ReadonlyArray<TData>
|
|
174
|
+
/** One row, without building the array. Returns a placeholder when unloaded. */
|
|
175
|
+
getRow(index: number): TData | typeof LOADING_ROW | typeof FAILED_ROW
|
|
176
|
+
rowCount(): number | null
|
|
177
|
+
lastRowKnown(): boolean
|
|
178
|
+
/** Re-fetch the blocks that failed. */
|
|
179
|
+
retryFailed(): void
|
|
180
|
+
/**
|
|
181
|
+
* Re-fetch the loaded blocks in place, keeping the row count and scroll
|
|
182
|
+
* position. What you want after a mutation lands on the server.
|
|
183
|
+
*/
|
|
184
|
+
refresh(): void
|
|
185
|
+
/** Drop everything and start over from the current viewport. */
|
|
186
|
+
purge(): void
|
|
187
|
+
/** Override the total, e.g. from a count endpoint that answered separately. */
|
|
188
|
+
setRowCount(count: number | null, known?: boolean): void
|
|
189
|
+
/**
|
|
190
|
+
* Write rows straight into the cache from `startRow`, as if a fetch had
|
|
191
|
+
* returned them, bypassing the datasource, the debounce and the
|
|
192
|
+
* concurrency cap. `startRow` must sit on a block boundary. An explicit
|
|
193
|
+
* `rowCount` settles the total; without one a short final slice does.
|
|
194
|
+
*/
|
|
195
|
+
applyRows(startRow: number, rows: ReadonlyArray<TData>, rowCount?: number): void
|
|
196
|
+
/** Replace one loaded row. No-op when its block is not loaded. */
|
|
197
|
+
patch(index: number, row: TData): boolean
|
|
198
|
+
/**
|
|
199
|
+
* The index of the first LOADED row matching `predicate`, or -1. Rows
|
|
200
|
+
* that are not loaded are not visited - a transaction addressed by id
|
|
201
|
+
* can only touch what is in the cache.
|
|
202
|
+
*/
|
|
203
|
+
findIndex(predicate: (row: TData, index: number) => boolean): number
|
|
204
|
+
/**
|
|
205
|
+
* Insert rows at an index and grow the count. Works within whichever
|
|
206
|
+
* run of loaded blocks contains `index`; loaded blocks AFTER that run
|
|
207
|
+
* are dropped, because their rows have shifted and will be re-fetched at
|
|
208
|
+
* their new offsets. An index in an unloaded region grows the count
|
|
209
|
+
* only (the rows exist; they arrive when scrolled to). Returns whether
|
|
210
|
+
* the rows were placed in the cache.
|
|
211
|
+
*/
|
|
212
|
+
insert(index: number, rows: ReadonlyArray<TData>): boolean
|
|
213
|
+
/**
|
|
214
|
+
* Remove `count` rows at an index and shrink the count, with the same
|
|
215
|
+
* run semantics as `insert`. Returns how many rows were actually
|
|
216
|
+
* removed from the cache.
|
|
217
|
+
*/
|
|
218
|
+
remove(index: number, count?: number): number
|
|
219
|
+
/** Every block the cache is holding, for `debug` output and tests. */
|
|
220
|
+
getCacheState(): BlockState[]
|
|
221
|
+
/** Abort what is in flight and stop emitting. Call on unmount. */
|
|
222
|
+
dispose(): void
|
|
223
|
+
}
|
|
224
|
+
|
|
225
|
+
type Block<TData> = {
|
|
226
|
+
status: 'loading' | 'loaded' | 'failed'
|
|
227
|
+
rows: TData[]
|
|
228
|
+
lastTouched: number
|
|
229
|
+
controller: AbortController | null
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
const defaultSchedule = (flush: () => void): void => {
|
|
233
|
+
void Promise.resolve().then(flush)
|
|
234
|
+
}
|
|
235
|
+
|
|
236
|
+
/**
|
|
237
|
+
* Build a block cache over a `fetch(startRow, endRow, signal)`. The free
|
|
238
|
+
* infinite row model and the Enterprise server-side row model both run on
|
|
239
|
+
* it, one per level.
|
|
240
|
+
*/
|
|
241
|
+
export function createBlockCache<TData>(options: BlockCacheOptions<TData>): BlockCache<TData> {
|
|
242
|
+
const blockSize = Math.max(1, options.blockSize ?? 100)
|
|
243
|
+
const maxBlocks = options.maxBlocksInCache ?? Infinity
|
|
244
|
+
const maxConcurrent = Math.max(1, options.maxConcurrentRequests ?? 2)
|
|
245
|
+
const debounceMs = Math.max(0, options.blockLoadDebounceMs ?? 0)
|
|
246
|
+
const initialRowCount = Math.max(0, options.initialRowCount ?? 1)
|
|
247
|
+
const overflowRows = Math.max(0, options.overflowRows ?? 1)
|
|
248
|
+
const schedule = options.schedule ?? defaultSchedule
|
|
249
|
+
|
|
250
|
+
const blocks = new Map<number, Block<TData>>()
|
|
251
|
+
/** Block indices waiting for a slot, in the order the viewport asked for them. */
|
|
252
|
+
const queue: number[] = []
|
|
253
|
+
let inFlight = 0
|
|
254
|
+
let touchClock = 0
|
|
255
|
+
let count: number | null = null
|
|
256
|
+
let countKnown = false
|
|
257
|
+
let disposed = false
|
|
258
|
+
|
|
259
|
+
let viewStart = 0
|
|
260
|
+
let viewEnd = 0
|
|
261
|
+
let debounceTimer: ReturnType<typeof setTimeout> | null = null
|
|
262
|
+
|
|
263
|
+
let emitScheduled = false
|
|
264
|
+
let rowsCache: TData[] | null = null
|
|
265
|
+
|
|
266
|
+
const blockOf = (rowIndex: number): number => Math.floor(rowIndex / blockSize)
|
|
267
|
+
const startOf = (blockIndex: number): number => blockIndex * blockSize
|
|
268
|
+
|
|
269
|
+
/**
|
|
270
|
+
* How many rows to claim we have.
|
|
271
|
+
*
|
|
272
|
+
* With a known count that is simply the count. Without one it is the last row
|
|
273
|
+
* we have touched plus `overflowRows`, so there is always somewhere to scroll
|
|
274
|
+
* that will ask for the next block - this is what makes the list grow as you
|
|
275
|
+
* go rather than ending at the first unloaded row.
|
|
276
|
+
*/
|
|
277
|
+
function currentLength(): number {
|
|
278
|
+
if (countKnown && count != null) return count
|
|
279
|
+
let highestEnd = 0
|
|
280
|
+
let anySettled = false
|
|
281
|
+
for (const b of blocks.values()) if (b.status !== 'loading') anySettled = true
|
|
282
|
+
for (const [index, block] of blocks) {
|
|
283
|
+
// A block in flight extends the list only once some block has settled.
|
|
284
|
+
// Before that the list is `initialRowCount` long: the few skeleton
|
|
285
|
+
// rows a level shows while it waits, not a hundred of them. The first
|
|
286
|
+
// block failing says nothing about how long the list is either, so it
|
|
287
|
+
// keeps those few rows (its Retry sits on them); a failed block further
|
|
288
|
+
// in was scrolled to, so its slots stay and the scrollbar holds still.
|
|
289
|
+
const end = block.status === 'loaded'
|
|
290
|
+
? startOf(index) + block.rows.length
|
|
291
|
+
: block.status === 'failed'
|
|
292
|
+
? index === 0 ? 0 : startOf(index) + blockSize
|
|
293
|
+
: anySettled
|
|
294
|
+
? startOf(index) + blockSize
|
|
295
|
+
: 0
|
|
296
|
+
if (end > highestEnd) highestEnd = end
|
|
297
|
+
}
|
|
298
|
+
if (!anySettled) return initialRowCount
|
|
299
|
+
return Math.max(initialRowCount, highestEnd + overflowRows)
|
|
300
|
+
}
|
|
301
|
+
|
|
302
|
+
function state(): BlockCacheState {
|
|
303
|
+
const failed: number[] = []
|
|
304
|
+
for (const [index, block] of blocks) if (block.status === 'failed') failed.push(index)
|
|
305
|
+
return {
|
|
306
|
+
rowCount: countKnown ? count : null,
|
|
307
|
+
lastRowKnown: countKnown,
|
|
308
|
+
loading: inFlight > 0,
|
|
309
|
+
failedBlocks: failed.sort((a, b) => a - b),
|
|
310
|
+
}
|
|
311
|
+
}
|
|
312
|
+
|
|
313
|
+
/**
|
|
314
|
+
* Something changed: forget the row array NOW, so a synchronous read after
|
|
315
|
+
* a mutation sees the new state, and notify on the next tick, so a burst of
|
|
316
|
+
* mutations notifies once. Every mutating path ends here.
|
|
317
|
+
*/
|
|
318
|
+
function emit(): void {
|
|
319
|
+
rowsCache = null // rebuilt lazily, on the next read
|
|
320
|
+
if (disposed || emitScheduled) return
|
|
321
|
+
emitScheduled = true
|
|
322
|
+
schedule(() => {
|
|
323
|
+
emitScheduled = false
|
|
324
|
+
if (disposed) return
|
|
325
|
+
options.onChange(state())
|
|
326
|
+
})
|
|
327
|
+
}
|
|
328
|
+
|
|
329
|
+
function ensureBlock(blockIndex: number): void {
|
|
330
|
+
if (disposed) return
|
|
331
|
+
const existing = blocks.get(blockIndex)
|
|
332
|
+
// Loading or loaded blocks are left alone; a failed one only retries when
|
|
333
|
+
// asked, so a broken backend is not hammered once per scroll frame.
|
|
334
|
+
if (existing) return
|
|
335
|
+
if (queue.includes(blockIndex)) return
|
|
336
|
+
queue.push(blockIndex)
|
|
337
|
+
pump()
|
|
338
|
+
}
|
|
339
|
+
|
|
340
|
+
function pump(): void {
|
|
341
|
+
while (!disposed && inFlight < maxConcurrent && queue.length > 0) {
|
|
342
|
+
const blockIndex = queue.shift()!
|
|
343
|
+
if (blocks.has(blockIndex)) continue
|
|
344
|
+
void load(blockIndex)
|
|
345
|
+
}
|
|
346
|
+
}
|
|
347
|
+
|
|
348
|
+
async function load(blockIndex: number): Promise<void> {
|
|
349
|
+
const controller = new AbortController()
|
|
350
|
+
const block: Block<TData> = {
|
|
351
|
+
status: 'loading',
|
|
352
|
+
rows: [],
|
|
353
|
+
lastTouched: (touchClock += 1),
|
|
354
|
+
controller,
|
|
355
|
+
}
|
|
356
|
+
blocks.set(blockIndex, block)
|
|
357
|
+
inFlight += 1
|
|
358
|
+
emit()
|
|
359
|
+
|
|
360
|
+
const startRow = startOf(blockIndex)
|
|
361
|
+
const endRow = startRow + blockSize
|
|
362
|
+
try {
|
|
363
|
+
const result = await options.fetch(startRow, endRow, controller.signal)
|
|
364
|
+
if (disposed || controller.signal.aborted || blocks.get(blockIndex) !== block) return
|
|
365
|
+
block.rows = [...result.rows]
|
|
366
|
+
block.status = 'loaded'
|
|
367
|
+
block.controller = null
|
|
368
|
+
applyCountFrom(blockIndex, block.rows.length, result.rowCount)
|
|
369
|
+
evictIfNeeded()
|
|
370
|
+
} catch {
|
|
371
|
+
if (disposed || controller.signal.aborted || blocks.get(blockIndex) !== block) return
|
|
372
|
+
block.status = 'failed'
|
|
373
|
+
block.rows = []
|
|
374
|
+
block.controller = null
|
|
375
|
+
} finally {
|
|
376
|
+
if (!disposed && !controller.signal.aborted) {
|
|
377
|
+
inFlight -= 1
|
|
378
|
+
emit()
|
|
379
|
+
pump()
|
|
380
|
+
}
|
|
381
|
+
}
|
|
382
|
+
}
|
|
383
|
+
|
|
384
|
+
/**
|
|
385
|
+
* Learn the total from a block that just landed.
|
|
386
|
+
*
|
|
387
|
+
* An explicit non-negative `rowCount` settles it. Otherwise a SHORT block is
|
|
388
|
+
* the proof that we hit the end: fewer rows came back than were asked for, so
|
|
389
|
+
* the data stops where they stop.
|
|
390
|
+
*/
|
|
391
|
+
function applyCountFrom(blockIndex: number, received: number, reported: number | undefined): void {
|
|
392
|
+
if (typeof reported === 'number' && reported >= 0) {
|
|
393
|
+
count = reported
|
|
394
|
+
countKnown = true
|
|
395
|
+
return
|
|
396
|
+
}
|
|
397
|
+
if (received < blockSize) {
|
|
398
|
+
count = startOf(blockIndex) + received
|
|
399
|
+
countKnown = true
|
|
400
|
+
}
|
|
401
|
+
}
|
|
402
|
+
|
|
403
|
+
/**
|
|
404
|
+
* Evict loaded blocks over the limit, least-recently-seen first, never one
|
|
405
|
+
* the viewport is currently on - dropping a visible block would swap real
|
|
406
|
+
* rows for skeletons under the user's eyes and immediately re-fetch them.
|
|
407
|
+
*/
|
|
408
|
+
function evictIfNeeded(): void {
|
|
409
|
+
if (!Number.isFinite(maxBlocks)) return
|
|
410
|
+
const firstVisible = blockOf(viewStart)
|
|
411
|
+
const lastVisible = blockOf(Math.max(viewStart, viewEnd))
|
|
412
|
+
const evictable = [...blocks.entries()]
|
|
413
|
+
.filter(([index, b]) => b.status === 'loaded' && (index < firstVisible || index > lastVisible))
|
|
414
|
+
.sort((a, b) => a[1].lastTouched - b[1].lastTouched)
|
|
415
|
+
|
|
416
|
+
let loaded = 0
|
|
417
|
+
for (const b of blocks.values()) if (b.status === 'loaded') loaded += 1
|
|
418
|
+
|
|
419
|
+
for (const [index] of evictable) {
|
|
420
|
+
if (loaded <= maxBlocks) break
|
|
421
|
+
blocks.delete(index)
|
|
422
|
+
loaded -= 1
|
|
423
|
+
}
|
|
424
|
+
}
|
|
425
|
+
|
|
426
|
+
function fetchViewport(): void {
|
|
427
|
+
if (disposed) return
|
|
428
|
+
const first = blockOf(viewStart)
|
|
429
|
+
const last = blockOf(Math.max(viewStart, viewEnd))
|
|
430
|
+
for (let i = first; i <= last; i += 1) {
|
|
431
|
+
const block = blocks.get(i)
|
|
432
|
+
if (block) block.lastTouched = touchClock += 1
|
|
433
|
+
else ensureBlock(i)
|
|
434
|
+
}
|
|
435
|
+
}
|
|
436
|
+
|
|
437
|
+
function abortAll(): void {
|
|
438
|
+
for (const block of blocks.values()) block.controller?.abort()
|
|
439
|
+
inFlight = 0
|
|
440
|
+
queue.length = 0
|
|
441
|
+
}
|
|
442
|
+
|
|
443
|
+
return {
|
|
444
|
+
setViewport(startIndex, endIndex) {
|
|
445
|
+
if (disposed) return
|
|
446
|
+
viewStart = Math.max(0, startIndex)
|
|
447
|
+
viewEnd = Math.max(viewStart, endIndex)
|
|
448
|
+
if (debounceMs === 0) {
|
|
449
|
+
fetchViewport()
|
|
450
|
+
return
|
|
451
|
+
}
|
|
452
|
+
if (debounceTimer) clearTimeout(debounceTimer)
|
|
453
|
+
debounceTimer = setTimeout(() => {
|
|
454
|
+
debounceTimer = null
|
|
455
|
+
fetchViewport()
|
|
456
|
+
}, debounceMs)
|
|
457
|
+
},
|
|
458
|
+
|
|
459
|
+
rows() {
|
|
460
|
+
if (rowsCache) return rowsCache
|
|
461
|
+
const length = currentLength()
|
|
462
|
+
const out = new Array<TData>(length)
|
|
463
|
+
// Fill from the blocks we have, then pad the rest with placeholders. One
|
|
464
|
+
// pass per block beats one lookup per row: at a million rows the
|
|
465
|
+
// difference is the frame budget.
|
|
466
|
+
out.fill(LOADING_ROW as unknown as TData)
|
|
467
|
+
for (const [index, block] of blocks) {
|
|
468
|
+
const start = startOf(index)
|
|
469
|
+
if (start >= length) continue
|
|
470
|
+
if (block.status === 'failed') {
|
|
471
|
+
const end = Math.min(start + blockSize, length)
|
|
472
|
+
for (let i = start; i < end; i += 1) out[i] = FAILED_ROW as unknown as TData
|
|
473
|
+
continue
|
|
474
|
+
}
|
|
475
|
+
for (let i = 0; i < block.rows.length && start + i < length; i += 1) {
|
|
476
|
+
out[start + i] = block.rows[i]!
|
|
477
|
+
}
|
|
478
|
+
}
|
|
479
|
+
rowsCache = out
|
|
480
|
+
return out
|
|
481
|
+
},
|
|
482
|
+
|
|
483
|
+
getRow(index) {
|
|
484
|
+
const block = blocks.get(blockOf(index))
|
|
485
|
+
if (!block) return LOADING_ROW
|
|
486
|
+
if (block.status === 'failed') return FAILED_ROW
|
|
487
|
+
const row = block.rows[index - startOf(blockOf(index))]
|
|
488
|
+
return row ?? LOADING_ROW
|
|
489
|
+
},
|
|
490
|
+
|
|
491
|
+
rowCount: () => (countKnown ? count : null),
|
|
492
|
+
lastRowKnown: () => countKnown,
|
|
493
|
+
|
|
494
|
+
retryFailed() {
|
|
495
|
+
let any = false
|
|
496
|
+
for (const [index, block] of [...blocks]) {
|
|
497
|
+
if (block.status !== 'failed') continue
|
|
498
|
+
blocks.delete(index)
|
|
499
|
+
ensureBlock(index)
|
|
500
|
+
any = true
|
|
501
|
+
}
|
|
502
|
+
if (any) emit()
|
|
503
|
+
},
|
|
504
|
+
|
|
505
|
+
refresh() {
|
|
506
|
+
// Keep the count and the scroll position: drop the DATA, re-request the
|
|
507
|
+
// same blocks. The user sees skeletons where they were, not a jump home.
|
|
508
|
+
for (const [index, block] of [...blocks]) {
|
|
509
|
+
block.controller?.abort()
|
|
510
|
+
blocks.delete(index)
|
|
511
|
+
ensureBlock(index)
|
|
512
|
+
}
|
|
513
|
+
emit()
|
|
514
|
+
},
|
|
515
|
+
|
|
516
|
+
purge() {
|
|
517
|
+
abortAll()
|
|
518
|
+
blocks.clear()
|
|
519
|
+
count = null
|
|
520
|
+
countKnown = false
|
|
521
|
+
rowsCache = null
|
|
522
|
+
fetchViewport()
|
|
523
|
+
emit()
|
|
524
|
+
},
|
|
525
|
+
|
|
526
|
+
setRowCount(next, known = next != null) {
|
|
527
|
+
count = next
|
|
528
|
+
countKnown = known && next != null
|
|
529
|
+
emit()
|
|
530
|
+
},
|
|
531
|
+
|
|
532
|
+
applyRows(startRow, rows, rowCount) {
|
|
533
|
+
if (startRow % blockSize !== 0) {
|
|
534
|
+
throw new Error(
|
|
535
|
+
`createBlockCache.applyRows: startRow ${startRow} is not a multiple of blockSize ${blockSize}`,
|
|
536
|
+
)
|
|
537
|
+
}
|
|
538
|
+
const firstBlock = blockOf(startRow)
|
|
539
|
+
const blockCount = Math.ceil(rows.length / blockSize)
|
|
540
|
+
for (let i = 0; i < blockCount; i += 1) {
|
|
541
|
+
const index = firstBlock + i
|
|
542
|
+
blocks.get(index)?.controller?.abort() // ours now, whatever was in flight
|
|
543
|
+
blocks.set(index, {
|
|
544
|
+
status: 'loaded',
|
|
545
|
+
rows: rows.slice(i * blockSize, (i + 1) * blockSize),
|
|
546
|
+
lastTouched: (touchClock += 1),
|
|
547
|
+
controller: null,
|
|
548
|
+
})
|
|
549
|
+
}
|
|
550
|
+
const lastBlock = blocks.get(firstBlock + blockCount - 1)
|
|
551
|
+
if (lastBlock) applyCountFrom(firstBlock + blockCount - 1, lastBlock.rows.length, rowCount)
|
|
552
|
+
else if (typeof rowCount === 'number' && rowCount >= 0) {
|
|
553
|
+
count = rowCount
|
|
554
|
+
countKnown = true
|
|
555
|
+
}
|
|
556
|
+
emit()
|
|
557
|
+
},
|
|
558
|
+
|
|
559
|
+
patch(index, row) {
|
|
560
|
+
const block = blocks.get(blockOf(index))
|
|
561
|
+
if (!block || block.status !== 'loaded') return false
|
|
562
|
+
const offset = index - startOf(blockOf(index))
|
|
563
|
+
if (offset < 0 || offset >= block.rows.length) return false
|
|
564
|
+
block.rows[offset] = row
|
|
565
|
+
emit()
|
|
566
|
+
return true
|
|
567
|
+
},
|
|
568
|
+
|
|
569
|
+
findIndex(predicate) {
|
|
570
|
+
for (const [blockIndex, block] of blocks) {
|
|
571
|
+
if (block.status !== 'loaded') continue
|
|
572
|
+
const start = startOf(blockIndex)
|
|
573
|
+
for (let i = 0; i < block.rows.length; i += 1) {
|
|
574
|
+
if (predicate(block.rows[i]!, start + i)) return start + i
|
|
575
|
+
}
|
|
576
|
+
}
|
|
577
|
+
return -1
|
|
578
|
+
},
|
|
579
|
+
|
|
580
|
+
insert(index, rows) {
|
|
581
|
+
if (rows.length === 0) return false
|
|
582
|
+
const clamped = Math.max(0, Math.min(index, currentLength()))
|
|
583
|
+
const run = loadedRunAt(clamped)
|
|
584
|
+
if (run) {
|
|
585
|
+
// Rows shift across block boundaries, so re-slice the run from its
|
|
586
|
+
// first block; everything loaded past it is dropped (offsets moved).
|
|
587
|
+
run.flat.splice(clamped - startOf(run.startBlock), 0, ...rows)
|
|
588
|
+
reseat(run.startBlock, run.flat)
|
|
589
|
+
} else {
|
|
590
|
+
dropLoadedFrom(blockOf(clamped))
|
|
591
|
+
}
|
|
592
|
+
if (countKnown && count != null) count += rows.length
|
|
593
|
+
emit()
|
|
594
|
+
return run != null
|
|
595
|
+
},
|
|
596
|
+
|
|
597
|
+
remove(index, removeCount = 1) {
|
|
598
|
+
if (removeCount <= 0) return 0
|
|
599
|
+
const run = loadedRunAt(index)
|
|
600
|
+
if (!run) return 0
|
|
601
|
+
const removed = run.flat.splice(index - startOf(run.startBlock), removeCount).length
|
|
602
|
+
reseat(run.startBlock, run.flat)
|
|
603
|
+
if (countKnown && count != null) count = Math.max(0, count - removed)
|
|
604
|
+
emit()
|
|
605
|
+
return removed
|
|
606
|
+
},
|
|
607
|
+
|
|
608
|
+
getCacheState() {
|
|
609
|
+
return [...blocks.entries()]
|
|
610
|
+
.map(([blockIndex, block]) => ({
|
|
611
|
+
blockIndex,
|
|
612
|
+
startRow: startOf(blockIndex),
|
|
613
|
+
endRow: startOf(blockIndex) + blockSize,
|
|
614
|
+
status: block.status,
|
|
615
|
+
lastTouched: block.lastTouched,
|
|
616
|
+
}))
|
|
617
|
+
.sort((a, b) => a.blockIndex - b.blockIndex)
|
|
618
|
+
},
|
|
619
|
+
|
|
620
|
+
dispose() {
|
|
621
|
+
disposed = true
|
|
622
|
+
if (debounceTimer) clearTimeout(debounceTimer)
|
|
623
|
+
debounceTimer = null
|
|
624
|
+
abortAll()
|
|
625
|
+
blocks.clear()
|
|
626
|
+
},
|
|
627
|
+
}
|
|
628
|
+
|
|
629
|
+
/**
|
|
630
|
+
* The run of consecutive loaded blocks containing `index`, flattened, with
|
|
631
|
+
* the block it starts at. Null when the block at `index` is not loaded -
|
|
632
|
+
* an index-shifting edit there would have nothing to shift.
|
|
633
|
+
*/
|
|
634
|
+
function loadedRunAt(index: number): { startBlock: number; flat: TData[] } | null {
|
|
635
|
+
const at = blockOf(index)
|
|
636
|
+
if (blocks.get(at)?.status !== 'loaded') return null
|
|
637
|
+
let startBlock = at
|
|
638
|
+
while (blocks.get(startBlock - 1)?.status === 'loaded') startBlock -= 1
|
|
639
|
+
const flat: TData[] = []
|
|
640
|
+
for (let i = startBlock; ; i += 1) {
|
|
641
|
+
const block = blocks.get(i)
|
|
642
|
+
if (!block || block.status !== 'loaded') break
|
|
643
|
+
flat.push(...block.rows)
|
|
644
|
+
if (block.rows.length < blockSize) break // the last block, by definition
|
|
645
|
+
}
|
|
646
|
+
return { startBlock, flat }
|
|
647
|
+
}
|
|
648
|
+
|
|
649
|
+
/**
|
|
650
|
+
* Lay a flat run back out into blocks from `startBlock`, and drop every
|
|
651
|
+
* block after the run: their rows have shifted, and re-fetching them at
|
|
652
|
+
* the new offsets is the honest outcome. Blocks before it are untouched.
|
|
653
|
+
*/
|
|
654
|
+
function reseat(startBlock: number, flat: TData[]): void {
|
|
655
|
+
const blockCount = Math.ceil(flat.length / blockSize)
|
|
656
|
+
dropLoadedFrom(startBlock)
|
|
657
|
+
for (let i = 0; i < blockCount; i += 1) {
|
|
658
|
+
blocks.set(startBlock + i, {
|
|
659
|
+
status: 'loaded',
|
|
660
|
+
rows: flat.slice(i * blockSize, (i + 1) * blockSize),
|
|
661
|
+
lastTouched: (touchClock += 1),
|
|
662
|
+
controller: null,
|
|
663
|
+
})
|
|
664
|
+
}
|
|
665
|
+
rowsCache = null
|
|
666
|
+
}
|
|
667
|
+
|
|
668
|
+
/** Forget every block from `fromBlock` on, aborting any in flight. */
|
|
669
|
+
function dropLoadedFrom(fromBlock: number): void {
|
|
670
|
+
for (const [index, block] of [...blocks]) {
|
|
671
|
+
if (index < fromBlock) continue
|
|
672
|
+
block.controller?.abort()
|
|
673
|
+
blocks.delete(index)
|
|
674
|
+
}
|
|
675
|
+
rowsCache = null
|
|
676
|
+
}
|
|
677
|
+
}
|