Optimize client rendering

Kashkovsky · Apr 16, 2022 · 41f9d5e · 41f9d5e
1 parent a03f09c
commit 41f9d5e
Show file tree

Hide file tree

Showing 2 changed files with 88 additions and 45 deletions.
diff --git a/web/client/src/main.tsx b/web/client/src/main.tsx
@@ -1,4 +1,4 @@
-import { lift } from '@grammarly/focal'
+import { F, lift, ReadOnlyAtom } from '@grammarly/focal'
 import {
   Chip,
   Paper,
@@ -10,7 +10,7 @@ import {
   TableRow
 } from '@mui/material'
 import * as React from 'react'
-import { map } from 'rxjs'
+import { map, Observable } from 'rxjs'
 import { Stream } from './stream'
 
 const Body = lift(TableBody)
@@ -19,43 +19,48 @@ const Tcp = ({ item }: { item: Stream.Item }) => (
   <Chip label={item.tcp} color={Stream.Item.getTcpStatus(item)} />
 )
 
-export const Main = () => (
-  <main>
-    <TableContainer component={Paper}>
-      <Table stickyHeader sx={{ minWidth: 650 }} size="small" aria-label="simple table">
-        <TableHead>
-          <TableRow>
-            <TableCell>Address</TableCell>
-            <TableCell align="right">TCP status</TableCell>
-            <TableCell align="right">HTTP status</TableCell>
-            <TableCell align="right">Request duration</TableCell>
-          </TableRow>
-        </TableHead>
-        <Body>
-          {Stream.create().pipe(
-            map(items =>
-              items.map(item => (
-                <TableRow
-                  key={item.id}
-                  sx={{
-                    '&:last-child td, &:last-child th': { border: 0 },
-                    background: Stream.Item.getStatusColor(item)
-                  }}
-                >
-                  <TableCell width={150} component="th" scope="row">
-                    <strong>{item.id}</strong>
-                  </TableCell>
-                  <TableCell align="right">
-                    <Tcp item={item} />
-                  </TableCell>
-                  <TableCell align="right">{item.httpResponse}</TableCell>
-                  <TableCell align="right">{item.duration}</TableCell>
-                </TableRow>
-              ))
-            )
-          )}
-        </Body>
-      </Table>
-    </TableContainer>
-  </main>
+const Row = ({ item }: { item: Observable<Stream.Item> }) => (
+  <F.Fragment>
+    {item.pipe(
+      map(item => (
+        <TableRow
+          key={item.id}
+          sx={{
+            '&:last-child td, &:last-child th': { border: 0 },
+            background: Stream.Item.getStatusColor(item)
+          }}
+        >
+          <TableCell width={150} component="th" scope="row">
+            <strong>{item.id}</strong>
+          </TableCell>
+          <TableCell align="right">
+            <Tcp item={item} />
+          </TableCell>
+          <TableCell align="right">{item.httpResponse}</TableCell>
+          <TableCell align="right">{item.duration}</TableCell>
+        </TableRow>
+      ))
+    )}
+  </F.Fragment>
 )
+
+export const Main = () => {
+  const { ids, getItem } = Stream.create()
+  return (
+    <main>
+      <TableContainer component={Paper}>
+        <Table stickyHeader sx={{ minWidth: 650 }} size="small" aria-label="simple table">
+          <TableHead>
+            <TableRow>
+              <TableCell>Address</TableCell>
+              <TableCell align="right">TCP status</TableCell>
+              <TableCell align="right">HTTP status</TableCell>
+              <TableCell align="right">Request duration</TableCell>
+            </TableRow>
+          </TableHead>
+          <Body>{ids.pipe(map(ids => ids.map(id => <Row key={id} item={getItem(id)} />)))}</Body>
+        </Table>
+      </TableContainer>
+    </main>
+  )
+}
diff --git a/web/client/src/stream.ts b/web/client/src/stream.ts
@@ -1,10 +1,23 @@
 import { pipe } from 'fp-ts/es6/function'
 import { isNumber } from 'fp-ts/es6/number'
 import * as Ord from 'fp-ts/es6/Ord'
-import { fromEvent, map, mergeMap, Observable, retryWhen, scan, take, timer } from 'rxjs'
+import {
+  distinctUntilChanged,
+  fromEvent,
+  map,
+  mergeMap,
+  Observable,
+  retryWhen,
+  scan,
+  share,
+  take,
+  timer
+} from 'rxjs'
 import { WebSocketSubject } from 'rxjs/webSocket'
+import { boolean, string } from 'fp-ts'
+import { Atom } from '@grammarly/focal'
+import * as Eq from 'fp-ts/es6/Eq'
 import * as A from 'fp-ts/es6/Array'
-import { string } from 'fp-ts'
 
 export type Stream = Observable<Stream.Item>
 
@@ -26,6 +39,15 @@ export namespace Stream {
       StatusErrResponse = 'ErrorResponse'
     }
 
+    export const eq: Eq.Eq<Stream.Item> = Eq.struct({
+      id: string.Eq,
+      inProgress: boolean.Eq,
+      tcp: string.Eq,
+      httpResponse: string.Eq,
+      duration: string.Eq,
+      status: string.Eq
+    })
+
     export const ord: Ord.Ord<Stream.Item> = pipe(
       Ord.contramap<string, Stream.Item>(x => x.status)(string.Ord),
       Ord.reverse
@@ -65,7 +87,7 @@ export namespace Stream {
 
   export const create = () => {
     const sock = new WebSocketSubject<Stream.Item>(`ws://${location.host}/ws`)
-    return sock.pipe(
+    const collection = sock.pipe(
       retryWhen(errors =>
         errors.pipe(
           mergeMap(() => {
@@ -82,7 +104,23 @@ export namespace Stream {
         (a, c) => (a.set(c.id, c), a),
         new Map<string, Stream.Item>()
       ),
-      map(items => pipe([...items.values()], A.sort(Stream.Item.ord)))
+      share()
+    )
+
+    const getItem = (id: string) =>
+      collection.pipe(
+        map(c => c.get(id)!),
+        distinctUntilChanged(Stream.Item.eq.equals)
+      )
+
+    const ids = collection.pipe(
+      map(c => [...c.keys()]),
+      distinctUntilChanged((a, b) => JSON.stringify(a) === JSON.stringify(b))
     )
+
+    return {
+      ids,
+      getItem
+    }
   }
 }