feat(connections): use Index instead of key

package.json

@@ -18,7 +18,6 @@
     "@solid-primitives/clipboard": "^1.5.7",
     "@solid-primitives/event-listener": "^2.3.0",
     "@solid-primitives/i18n": "^1.4.1",
-    "@solid-primitives/keyed": "^1.2.0",
     "@solid-primitives/media": "^2.2.5",
     "@solid-primitives/resize-observer": "^2.0.22",
     "@solid-primitives/storage": "^2.1.1",

pnpm-lock.yaml

@@ -26,9 +26,6 @@ dependencies:
   '@solid-primitives/i18n':
     specifier: ^1.4.1
     version: 1.4.1(solid-js@1.7.11)
-  '@solid-primitives/keyed':
-    specifier: ^1.2.0
-    version: 1.2.0(solid-js@1.7.11)
   '@solid-primitives/media':
     specifier: ^2.2.5
     version: 2.2.5(solid-js@1.7.11)
@@ -2610,17 +2607,6 @@ packages:
       solid-js: 1.7.11
     dev: false
 
-  /@solid-primitives/keyed@1.2.0(solid-js@1.7.11):
-    resolution:
-      {
-        integrity: sha512-0DuTeJdxWjCTu73XnDZs24JzfXckBnpvCfQ6Mf/kTPKkMZJh7tjkBnZEk48ckrE9xmwat9stIdfrBmZctsepIw==,
-      }
-    peerDependencies:
-      solid-js: ^1.6.12
-    dependencies:
-      solid-js: 1.7.11
-    dev: false
-
   /@solid-primitives/media@2.2.5(solid-js@1.7.11):
     resolution:
       {

src/constants/index.ts

@@ -128,6 +128,8 @@ export enum CONNECTIONS_TABLE_ACCESSOR_KEY {
   Destination = 'destination',
 }
 
+export const CONNECTIONS_TABLE_MAX_CLOSED_ROWS = 1000
+
 export const CONNECTIONS_TABLE_INITIAL_COLUMN_ORDER = Object.values(
   CONNECTIONS_TABLE_ACCESSOR_KEY,
 )

src/pages/Connections.tsx

@@ -1,6 +1,5 @@
 import { writeClipboard } from '@solid-primitives/clipboard'
 import { useI18n } from '@solid-primitives/i18n'
-import { Key } from '@solid-primitives/keyed'
 import { makePersisted } from '@solid-primitives/storage'
 import {
   IconCircleX,
@@ -29,7 +28,7 @@ import {
 } from '@tanstack/solid-table'
 import byteSize from 'byte-size'
 import dayjs from 'dayjs'
-import { For, createMemo, createSignal } from 'solid-js'
+import { For, Index, createMemo, createSignal } from 'solid-js'
 import { twMerge } from 'tailwind-merge'
 import {
   Button,
@@ -316,7 +315,7 @@ export default () => {
     <div class="flex h-full flex-col gap-2">
       <div class="flex w-full flex-wrap items-center gap-2">
         <div class="tabs-boxed tabs gap-2">
-          <Key each={tabs()} by={({ type }) => type}>
+          <Index each={tabs()}>
             {(tab) => (
               <button
                 class={twMerge(
@@ -329,7 +328,7 @@ export default () => {
                 <div class="badge badge-sm">{tab().count}</div>
               </button>
             )}
-          </Key>
+          </Index>
         </div>
 
         <div class="join flex w-full items-center md:flex-1">
@@ -433,16 +432,13 @@ export default () => {
           </thead>
 
           <tbody>
-            <Key each={table.getRowModel().rows} by={({ id }) => id}>
+            <Index each={table.getRowModel().rows}>
               {(keyedRow) => {
                 const row = keyedRow()
 
                 return (
                   <tr class="h-8 hover:!bg-primary hover:text-primary-content">
-                    <Key
+                    <Index each={row.getVisibleCells()}>
-                      each={row.getVisibleCells()}
-                      by={({ row }) => row.original.id}
-                    >
                       {(keyedCell) => {
                         const cell = keyedCell()
 
@@ -497,11 +493,11 @@ export default () => {
                           </td>
                         )
                       }}
-                    </Key>
+                    </Index>
                   </tr>
                 )
               }}
-            </Key>
+            </Index>
           </tbody>
         </table>
       </div>

src/signals/connections.ts

@@ -1,5 +1,6 @@
 import { differenceWith, isNumber, unionWith } from 'lodash'
 import { Accessor, createEffect, createSignal, untrack } from 'solid-js'
+import { CONNECTIONS_TABLE_MAX_CLOSED_ROWS } from '~/constants'
 import { Connection, ConnectionRawMessage } from '~/types'
 
 export type WsMsg = {
@@ -53,11 +54,17 @@ export const useConnections = () => {
       if (!paused()) {
         const closedConns = diffClosedConnections(activeConns, allConns)
 
-        setActiveConnections(activeConns.slice(-200))
+        setActiveConnections(activeConns)
-        setClosedConnections(closedConns.slice(-200))
+        setClosedConnections(
+          closedConns.slice(-CONNECTIONS_TABLE_MAX_CLOSED_ROWS),
+        )
       }
 
-      setAllConnections(allConns.slice(-400))
+      setAllConnections(
+        allConns.slice(
+          -(activeConns.length + CONNECTIONS_TABLE_MAX_CLOSED_ROWS),
+        ),
+      )
     })
   })