Bucket map pins without flicker
Assign visible map pins to deterministic screen-space buckets with stable IDs independent of input order.Description
Requirements
Export bucketMapPins from src/App.js.
Ignore pins whose projected x or y falls outside the viewport dimensions.
Compute integer columns and rows with Math.floor(coordinate divided by bucketSize).
Name a bucket as column:row and sort its pin IDs lexically.
Return buckets by row then column so reordered pins do not flicker.
Return an observably equivalent result for equivalent inputs without reading time, randomness, network, storage, or DOM globals.
Do not mutate input objects, arrays, nested records, or values retained in the returned result.
Shared bucket
Pins at 12,14 and 18,19 with size 20
Both belong to bucket 0:0
Ignore pins whose projected x or y falls outside the viewport dimensions.
Input reorder
The same pins arrive reversed
Bucket and pin ordering remain unchanged
Compute integer columns and rows with Math.floor(coordinate divided by bucketSize).
Constraints
Implement a pure synchronous function with no external side effectsTreat every input collection and nested record as read-onlyReturn JSON-compatible data except where the declared TypeScript API explicitly uses bigint
Hints
Hint 1
Start with the filters-visible-pins behavior and make its observable result deterministic.
Hint 2
Model uses-floor-buckets independently before combining it with the remaining states.
Hint 3
Verify the boundary described by orders-buckets without changing caller-owned input.