Skip to content

Commit 98626e7

Browse files
samwillissamwillis
committed
wip
1 parent 379a91d commit 98626e7

File tree

6 files changed

+103
-54
lines changed

6 files changed

+103
-54
lines changed

‎packages/db-devtools/src/BaseTanStackDbDevtoolsPanel.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { useDevtoolsOnClose } from './contexts'
44
import { useStyles } from './useStyles'
55
import { useLocalStorage } from './useLocalStorage'
66
import { multiSortBy } from './utils'
7+
import { POLLING_INTERVAL_MS } from './constants'
78
import type { Accessor, JSX } from 'solid-js'
89
import type { DbDevtoolsRegistry, CollectionMetadata } from './types'
910

@@ -117,7 +118,7 @@ export const BaseTanStackDbDevtoolsPanel = function BaseTanStackDbDevtoolsPanel(
117118
}
118119

119120
updateCollections()
120-
const intervalId = setInterval(updateCollections, 1000)
121+
const intervalId = setInterval(updateCollections, POLLING_INTERVAL_MS)
121122

122123
return () => clearInterval(intervalId)
123124
})

‎packages/db-devtools/src/DbDevtools.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
import { createEffect, createSignal, onCleanup } from "solid-js"
33
import { DbDevtoolsPanel } from "./DbDevtoolsPanel"
44
import { initializeDevtoolsRegistry } from "./registry"
5+
import { POLLING_INTERVAL_MS } from "./constants"
56
import type { CollectionMetadata, DbDevtoolsConfig } from "./types"
67

78
import type { DbDevtoolsRegistry } from './types'
@@ -33,7 +34,7 @@ function DbDevtools(props: DbDevtoolsProps = {}) {
3334
updateCollections()
3435

3536
// Set up polling
36-
intervalId = window.setInterval(updateCollections, 1000)
37+
intervalId = window.setInterval(updateCollections, POLLING_INTERVAL_MS)
3738

3839
onCleanup(() => {
3940
if (intervalId) {

‎packages/db-devtools/src/DbDevtoolsPanel.tsx‎

Lines changed: 48 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -26,14 +26,31 @@ export function DbDevtoolsPanel(props: DbDevtoolsPanelProps) {
2626
string | null
2727
>(null)
2828

29-
const liveQueries = createMemo(() =>
30-
props.collections.filter((c) => c.type === `live-query`)
29+
// Create stable collection IDs that only change when collections are added/removed
30+
const collectionIds = createMemo(() => {
31+
const currentIds = new Set(props.collections.map(c => c.id))
32+
return Array.from(currentIds)
33+
})
34+
35+
const liveQueryIds = createMemo(() =>
36+
collectionIds().filter(id => {
37+
const collection = props.collections.find(c => c.id === id)
38+
return collection?.type === `live-query`
39+
})
3140
)
3241

33-
const regularCollections = createMemo(() =>
34-
props.collections.filter((c) => c.type === `collection`)
42+
const regularCollectionIds = createMemo(() =>
43+
collectionIds().filter(id => {
44+
const collection = props.collections.find(c => c.id === id)
45+
return collection?.type === `collection`
46+
})
3547
)
3648

49+
// Helper to get latest metadata for a collection ID
50+
const getCollectionMetadata = (id: string) => {
51+
return props.collections.find(c => c.id === id)
52+
}
53+
3754
const allTransactions = createMemo(() => props.registry.getTransactions())
3855

3956
const handleCollectionSelect = (id: string) => {
@@ -187,7 +204,7 @@ export function DbDevtoolsPanel(props: DbDevtoolsPanelProps) {
187204
<div style={{ flex: `1`, overflow: `auto` }}>
188205
<Show when={selectedView() === `collections`}>
189206
{/* Live Queries Section */}
190-
<Show when={liveQueries().length > 0}>
207+
<Show when={liveQueryIds().length > 0}>
191208
<div style={{ padding: `16px 0 8px 16px` }}>
192209
<h3
193210
style={{
@@ -199,22 +216,25 @@ export function DbDevtoolsPanel(props: DbDevtoolsPanelProps) {
199216
"letter-spacing": `0.5px`,
200217
}}
201218
>
202-
Live Queries ({liveQueries().length})
219+
Live Queries ({liveQueryIds().length})
203220
</h3>
204221
</div>
205-
<For each={liveQueries()}>
206-
{(collection) => (
207-
<CollectionItem
208-
collection={collection}
209-
isSelected={selectedCollection() === collection.id}
210-
onClick={() => handleCollectionSelect(collection.id)}
211-
/>
212-
)}
222+
<For each={liveQueryIds()}>
223+
{(collectionId) => {
224+
const collection = getCollectionMetadata(collectionId)
225+
return collection ? (
226+
<CollectionItem
227+
collection={collection}
228+
isSelected={selectedCollection() === collectionId}
229+
onClick={() => handleCollectionSelect(collectionId)}
230+
/>
231+
) : null
232+
}}
213233
</For>
214234
</Show>
215235

216236
{/* Regular Collections Section */}
217-
<Show when={regularCollections().length > 0}>
237+
<Show when={regularCollectionIds().length > 0}>
218238
<div style={{ padding: `16px 0 8px 16px` }}>
219239
<h3
220240
style={{
@@ -226,21 +246,24 @@ export function DbDevtoolsPanel(props: DbDevtoolsPanelProps) {
226246
"letter-spacing": `0.5px`,
227247
}}
228248
>
229-
Collections ({regularCollections().length})
249+
Collections ({regularCollectionIds().length})
230250
</h3>
231251
</div>
232-
<For each={regularCollections()}>
233-
{(collection) => (
234-
<CollectionItem
235-
collection={collection}
236-
isSelected={selectedCollection() === collection.id}
237-
onClick={() => handleCollectionSelect(collection.id)}
238-
/>
239-
)}
252+
<For each={regularCollectionIds()}>
253+
{(collectionId) => {
254+
const collection = getCollectionMetadata(collectionId)
255+
return collection ? (
256+
<CollectionItem
257+
collection={collection}
258+
isSelected={selectedCollection() === collectionId}
259+
onClick={() => handleCollectionSelect(collectionId)}
260+
/>
261+
) : null
262+
}}
240263
</For>
241264
</Show>
242265

243-
<Show when={props.collections.length === 0}>
266+
<Show when={collectionIds().length === 0}>
244267
<div
245268
style={{
246269
padding: `40px 20px`,

‎packages/db-devtools/src/Devtools.tsx‎

Lines changed: 48 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -431,14 +431,31 @@ const ContentView: Component<ContentViewProps> = (props) => {
431431

432432
const [selectedView, setSelectedView] = createSignal<'collections' | 'transactions'>('collections')
433433

434-
const liveQueries = createMemo(() =>
435-
props.collections.filter(c => c.type === 'live-query')
434+
// Create stable collection IDs that only change when collections are added/removed
435+
const collectionIds = createMemo(() => {
436+
const currentIds = new Set(props.collections.map(c => c.id))
437+
return Array.from(currentIds)
438+
})
439+
440+
const liveQueryIds = createMemo(() =>
441+
collectionIds().filter(id => {
442+
const collection = props.collections.find(c => c.id === id)
443+
return collection?.type === 'live-query'
444+
})
436445
)
437446

438-
const regularCollections = createMemo(() =>
439-
props.collections.filter(c => c.type === 'collection')
447+
const regularCollectionIds = createMemo(() =>
448+
collectionIds().filter(id => {
449+
const collection = props.collections.find(c => c.id === id)
450+
return collection?.type === 'collection'
451+
})
440452
)
441453

454+
// Helper to get latest metadata for a collection ID
455+
const getCollectionMetadata = (id: string) => {
456+
return props.collections.find(c => c.id === id)
457+
}
458+
442459
const allTransactions = createMemo(() =>
443460
props.registry.getTransactions()
444461
)
@@ -502,37 +519,43 @@ const ContentView: Component<ContentViewProps> = (props) => {
502519
{/* Content based on selected view */}
503520
<div class={styles().sidebarContent}>
504521
<Show when={selectedView() === 'collections'}>
505-
<Show when={liveQueries().length > 0}>
522+
<Show when={liveQueryIds().length > 0}>
506523
<div class={styles().sectionHeader}>
507-
<h3>Live Queries ({liveQueries().length})</h3>
524+
<h3>Live Queries ({liveQueryIds().length})</h3>
508525
</div>
509-
<For each={liveQueries()}>
510-
{(collection) => (
511-
<CollectionItem
512-
collection={collection}
513-
isSelected={selectedCollectionId() === collection.id}
514-
onClick={() => handleCollectionSelect(collection.id)}
515-
/>
516-
)}
526+
<For each={liveQueryIds()}>
527+
{(collectionId) => {
528+
const collection = getCollectionMetadata(collectionId)
529+
return collection ? (
530+
<CollectionItem
531+
collection={collection}
532+
isSelected={selectedCollectionId() === collectionId}
533+
onClick={() => handleCollectionSelect(collectionId)}
534+
/>
535+
) : null
536+
}}
517537
</For>
518538
</Show>
519539

520-
<Show when={regularCollections().length > 0}>
540+
<Show when={regularCollectionIds().length > 0}>
521541
<div class={styles().sectionHeader}>
522-
<h3>Collections ({regularCollections().length})</h3>
542+
<h3>Collections ({regularCollectionIds().length})</h3>
523543
</div>
524-
<For each={regularCollections()}>
525-
{(collection) => (
526-
<CollectionItem
527-
collection={collection}
528-
isSelected={selectedCollectionId() === collection.id}
529-
onClick={() => handleCollectionSelect(collection.id)}
530-
/>
531-
)}
544+
<For each={regularCollectionIds()}>
545+
{(collectionId) => {
546+
const collection = getCollectionMetadata(collectionId)
547+
return collection ? (
548+
<CollectionItem
549+
collection={collection}
550+
isSelected={selectedCollectionId() === collectionId}
551+
onClick={() => handleCollectionSelect(collectionId)}
552+
/>
553+
) : null
554+
}}
532555
</For>
533556
</Show>
534557

535-
<Show when={props.collections.length === 0}>
558+
<Show when={collectionIds().length === 0}>
536559
<div class={styles().emptyState}>
537560
No collections found. Create a collection to see it here.
538561
</div>

‎packages/db-devtools/src/constants.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ export const INITIAL_IS_OPEN = false
66
export const DEFAULT_SORT_ORDER = 1
77
export const DEFAULT_SORT_FN_NAME = 'Status > Last Updated'
88
export const DEFAULT_MUTATION_SORT_FN_NAME = 'Status > Last Updated'
9+
export const POLLING_INTERVAL_MS = 1000 // Poll every second for metadata updates
910

1011
export const firstBreakpoint = 1024
1112
export const secondBreakpoint = 796

‎packages/db-devtools/src/registry.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,11 @@ import type {
44
DbDevtoolsRegistry,
55
TransactionDetails,
66
} from "./types"
7+
import { POLLING_INTERVAL_MS } from "./constants"
78

89
class DbDevtoolsRegistryImpl implements DbDevtoolsRegistry {
910
public collections = new Map<string, CollectionRegistryEntry>()
1011
private pollingInterval: number | null = null
11-
private readonly POLLING_INTERVAL_MS = 1000 // Poll every second for metadata updates
1212

1313
constructor() {
1414
// Start polling for metadata updates
@@ -259,7 +259,7 @@ class DbDevtoolsRegistryImpl implements DbDevtoolsRegistry {
259259
entry.metadata.lastUpdated = new Date()
260260
}
261261
}
262-
}, this.POLLING_INTERVAL_MS)
262+
}, POLLING_INTERVAL_MS)
263263
}
264264

265265
private detectCollectionType = (

0 commit comments

Comments
 (0)