Optimize slot lag graph

1. past month gets 8640 points, only send back 720
2. transmit numbers; formatting happens on client
3. always show HH:mm in timestamp

ui/app/api/peers/slots/[name]/route.ts

@@ -30,30 +30,22 @@ export async function GET(
       break;
   }
 
-  const lagPoints = await prisma.peer_slot_size.findMany({
-    select: {
-      updated_at: true,
-      slot_size: true,
-    },
-    where: {
-      slot_name: context.params.name,
-      updated_at: {
-        gte: new Date(Date.now() - forThePastThisMuchTime),
-      },
-    },
-  });
+  const lagPoints = await prisma.$queryRaw<
+    { updated_at: Date; slot_size: bigint }[]
+  >`
+    select updated_at, slot_size
+    from peerdb_stats.peer_slot_size
+    where slot_size is not null
+      and slot_name = ${context.params.name}
+      and updated_at > ${new Date(Date.now() - forThePastThisMuchTime)}
+    order by random()
+    limit 720
+  `;
 
-  // convert slot_size to string
-  const stringedLagPoints: SlotLagPoint[] = lagPoints.map((lagPoint) => {
-    return {
-      // human readable
-      updatedAt:
-        lagPoint.updated_at.toDateString() +
-        ' ' +
-        lagPoint.updated_at.toLocaleTimeString(),
-      slotSize: lagPoint.slot_size?.toString(),
-    };
-  });
+  const stringedLagPoints: SlotLagPoint[] = lagPoints.map((lagPoint) => ({
+    updatedAt: +lagPoint.updated_at,
+    slotSize: Number(lagPoint.slot_size) / 1000,
+  }));
 
   return NextResponse.json(stringedLagPoints);
 }

ui/app/dto/PeersDTO.ts

@@ -53,6 +53,6 @@ export type CatalogPeer = {
 export type PeerSetter = React.Dispatch<React.SetStateAction<PeerConfig>>;
 
 export type SlotLagPoint = {
-  updatedAt: string;
-  slotSize?: string;
+  updatedAt: number;
+  slotSize: number;
 };

ui/app/peers/[peerName]/lagGraph.tsx

@@ -25,7 +25,7 @@ function LagGraph({ slotNames }: { slotNames: string[] }) {
       }
     );
     const points: SlotLagPoint[] = await pointsRes.json();
-    setLagPoints(points);
+    setLagPoints(points.sort((x, y) => x.updatedAt - y.updatedAt));
   }, [selectedSlot, timeSince]);
 
   const handleChange = (val: string) => {
@@ -34,15 +34,11 @@ function LagGraph({ slotNames }: { slotNames: string[] }) {
   };
 
   const graphValues = useMemo(() => {
-    let lagDataDot = lagPoints.map((point) => [
-      point.updatedAt,
-      point.slotSize,
-    ]);
-    return lagDataDot.map((data) => ({
-      time: formatGraphLabel(new Date(data[0]!), timeSince),
-      'Lag in GB': parseInt(data[1] || '0', 10) / 1000,
+    return lagPoints.map((data) => ({
+      time: formatGraphLabel(new Date(data.updatedAt!), 'hour'),
+      'Lag in GB': data.slotSize,
     }));
-  }, [lagPoints, timeSince]);
+  }, [lagPoints]);
 
   const [mounted, setMounted] = useState(false);
   useEffect(() => {
@@ -78,7 +74,7 @@ function LagGraph({ slotNames }: { slotNames: string[] }) {
       >
         <ReactSelect
           className='w-1/4'
-          placeholder='Select a replication slot'
+          placeholder='Select a replication slot asdf'
           options={
             slotNames.length === 0
               ? undefined