Add stream stats badge to project listing tiles

Author: tumppi

src/components/Stats.tsx

@@ -1,12 +1,7 @@
-import { useQuery } from '@tanstack/react-query'
 import React, { ReactNode } from 'react'
 import styled from 'styled-components'
-import { getIndexerClient } from '~/getters/getGraphClient'
-import {
-    GetStreamsDocument,
-    GetStreamsQuery,
-    GetStreamsQueryVariables,
-} from '../generated/gql/indexer'
+import { defaultStreamStats } from '~/getters/getStreamStats'
+import { useStreamStatsQuery } from '~/hooks/useStreamStats'
 
 type StatProps = {
     id: string
@@ -88,53 +83,10 @@ const ButtonGrid = styled.div`
     }
 `
 
-function useStreamStatsQuery(streamId: string) {
-    return useQuery({
-        queryKey: ['useStreamStatsQuery', streamId],
-        queryFn: async () => {
-            const client = getIndexerClient(137)
-
-            if (!client) {
-                return defaultStreamStats
-            }
-
-            const {
-                data: { streams },
-            } = await client.query<GetStreamsQuery, GetStreamsQueryVariables>({
-                query: GetStreamsDocument,
-                variables: {
-                    streamIds: [streamId],
-                    first: 1,
-                },
-            })
-
-            const [stream = undefined] = streams.items
-
-            if (!stream) {
-                return null
-            }
-
-            const { messagesPerSecond, peerCount } = stream
-
-            return {
-                latency: undefined as undefined | number,
-                messagesPerSecond,
-                peerCount,
-            }
-        },
-    })
-}
-
 interface StreamStatsProps {
     streamId: string
 }
 
-const defaultStreamStats = {
-    latency: undefined,
-    messagesPerSecond: undefined,
-    peerCount: undefined,
-}
-
 export function StreamStats({ streamId }: StreamStatsProps) {
     const { data: stats } = useStreamStatsQuery(streamId)
 

src/getters/getStreamStats.ts

@@ -0,0 +1,44 @@
+import { getIndexerClient } from '~/getters/getGraphClient'
+import {
+    GetStreamsDocument,
+    GetStreamsQuery,
+    GetStreamsQueryVariables,
+} from '../generated/gql/indexer'
+
+export const defaultStreamStats = {
+    latency: undefined,
+    messagesPerSecond: undefined,
+    peerCount: undefined,
+}
+
+export const getStreamStats = async (streamId: string) => {
+    const client = getIndexerClient(137)
+
+    if (!client) {
+        return defaultStreamStats
+    }
+
+    const {
+        data: { streams },
+    } = await client.query<GetStreamsQuery, GetStreamsQueryVariables>({
+        query: GetStreamsDocument,
+        variables: {
+            streamIds: [streamId],
+            first: 1,
+        },
+    })
+
+    const [stream = undefined] = streams.items
+
+    if (!stream) {
+        return null
+    }
+
+    const { messagesPerSecond, peerCount } = stream
+
+    return {
+        latency: undefined as undefined | number,
+        messagesPerSecond,
+        peerCount,
+    }
+}

src/hooks/useStreamStats.tsx

@@ -0,0 +1,47 @@
+import { useQuery } from '@tanstack/react-query'
+import { getStreamStats } from '~/getters/getStreamStats'
+
+type StreamStats = {
+    latency: number | undefined
+    messagesPerSecond: number
+    peerCount: number
+}
+
+export function useStreamStatsQuery(streamId: string) {
+    return useQuery({
+        queryKey: ['useStreamStatsQuery', streamId],
+        queryFn: async () => {
+            return getStreamStats(streamId)
+        },
+    })
+}
+
+export function useMultipleStreamStatsQuery(streamIds: string[]) {
+    return useQuery({
+        queryKey: ['useMultipleStreamStatsQuery', streamIds],
+        queryFn: async () => {
+            const stats = (await Promise.all(
+                streamIds.map(getStreamStats),
+            )) as StreamStats[]
+            return stats.reduce(
+                (acc: StreamStats, curr: StreamStats) => ({
+                    // For latency, we can take the average of non-undefined values
+                    latency:
+                        acc.latency === undefined && curr.latency === undefined
+                            ? undefined
+                            : ((acc.latency || 0) + (curr.latency || 0)) /
+                              (acc.latency !== undefined && curr.latency !== undefined
+                                  ? 2
+                                  : 1),
+                    messagesPerSecond: acc.messagesPerSecond + curr.messagesPerSecond,
+                    peerCount: acc.peerCount + curr.peerCount,
+                }),
+                {
+                    latency: undefined,
+                    messagesPerSecond: 0,
+                    peerCount: 0,
+                },
+            )
+        },
+    })
+}

src/shared/components/Tile/Badge.tsx

@@ -1,6 +1,7 @@
 import React, { ReactNode } from 'react'
 import styled, { css } from 'styled-components'
 import Link from '~/shared/components/Link'
+import { useMultipleStreamStatsQuery } from '~/hooks/useStreamStats'
 
 const SingleBadge = styled.div`
     display: flex;
@@ -26,6 +27,7 @@ const SingleBadge = styled.div`
         margin-left: 8px;
     }
 `
+
 type BadgeContainerProps = {
     children: ReactNode
     top?: boolean
@@ -134,4 +136,53 @@ const DataUnionBadge = ({
 
 const BadgeLink = ({ ...props }) => <Link {...props} />
 
-export { DataUnionBadge }
+const StatsBadge = styled.div`
+    display: flex;
+    align-items: center;
+    padding: 4px 8px;
+    gap: 10px;
+    background: rgba(245, 245, 247, 0.6);
+    backdrop-filter: blur(13.3871px);
+    border-radius: 8px;
+
+    font-family: 'IBM Plex Sans';
+    font-style: normal;
+    font-weight: 500;
+    font-size: 16px;
+    line-height: 24px;
+    color: #525252;
+
+    a,
+    a:link,
+    a:active,
+    a:focus,
+    a:hover,
+    a:visited {
+        color: white !important;
+    }
+
+    > * + * {
+        margin-left: 8px;
+    }
+`
+
+interface StreamStatsBadgeProps extends Omit<BadgeContainerProps, 'children'> {
+    streamIds: string[]
+}
+
+const StreamStatsBadge = ({ streamIds, ...props }: StreamStatsBadgeProps) => {
+    const stats = useMultipleStreamStatsQuery(streamIds)
+
+    return (
+        <BadgeContainer {...props}>
+            <StatsBadge>
+                <span>
+                    {streamIds.length} {streamIds.length === 1 ? 'stream' : 'streams'}
+                </span>
+                <span>{stats.data?.messagesPerSecond.toFixed(1) ?? 'N/A'} msg/s</span>
+            </StatsBadge>
+        </BadgeContainer>
+    )
+}
+
+export { DataUnionBadge, StreamStatsBadge }

src/shared/components/Tile/index.tsx

@@ -13,7 +13,7 @@ import { useCurrentChainId } from '~/utils/chains'
 import { Route as R, routeOptions } from '~/utils/routes'
 import { useCurrentChainSymbolicName } from '~/utils/chains'
 import Summary from './Summary'
-import { DataUnionBadge } from './Badge'
+import { DataUnionBadge, StreamStatsBadge } from './Badge'
 
 const Image = styled(Img)`
     img& {
@@ -212,10 +212,11 @@ function MarketplaceProductTile({
                         />
                     </TileImageContainer>
                 </Link>
+                <StreamStatsBadge top left streamIds={product.streams} />
                 {!!showDataUnionBadge && (
                     <DataUnionBadge
                         top
-                        left
+                        right
                         linkTo={R.projectOverview(
                             product.id,
                             routeOptions(chainName, undefined, 'stats'),