Optimize slot lag graph (#1473)

1. past month gets 8640 points, only send back at most 720 (randomly selected)
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 slotLagPoints: SlotLagPoint[] = lagPoints.map((lagPoint) => ({
+    updatedAt: +lagPoint.updated_at,
+    slotSize: Number(lagPoint.slot_size) / 1000,
+  }));
 
-  return NextResponse.json(stringedLagPoints);
+  return NextResponse.json(slotLagPoints);
 }

ui/app/dto/PeersDTO.ts

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

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

@@ -5,51 +5,50 @@ import { formatGraphLabel, timeOptions } from '@/app/utils/graph';
 import { Label } from '@/lib/Label';
 import { ProgressCircle } from '@/lib/ProgressCircle/ProgressCircle';
 import { LineChart } from '@tremor/react';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import ReactSelect from 'react-select';
 import { useLocalStorage } from 'usehooks-ts';
 
 function LagGraph({ slotNames }: { slotNames: string[] }) {
-  const [lagPoints, setLagPoints] = useState<SlotLagPoint[]>([]);
+  const [mounted, setMounted] = useState(false);
+  const [lagPoints, setLagPoints] = useState<
+    { time: string; 'Lag in GB': number }[]
+  >([]);
   const [defaultSlot, setDefaultSlot] = useLocalStorage('defaultSlot', '');
   const [selectedSlot, setSelectedSlot] = useState<string>(defaultSlot);
+  const [loading, setLoading] = useState(false);
   let [timeSince, setTimeSince] = useState('hour');
   const fetchLagPoints = useCallback(async () => {
     if (selectedSlot == '') {
       return;
     }
+
+    setLoading(true);
     const pointsRes = await fetch(
       `/api/peers/slots/${selectedSlot}?timeSince=${timeSince}`,
       {
         cache: 'no-store',
       }
     );
     const points: SlotLagPoint[] = await pointsRes.json();
-    setLagPoints(points);
+    setLagPoints(
+      points
+        .sort((x, y) => x.updatedAt - y.updatedAt)
+        .map((data) => ({
+          time: formatGraphLabel(new Date(data.updatedAt!), 'hour'),
+          'Lag in GB': data.slotSize,
+        }))
+    );
+    setLoading(false);
   }, [selectedSlot, timeSince]);
 
   const handleChange = (val: string) => {
     setDefaultSlot(val);
     setSelectedSlot(val);
   };
 
-  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,
-    }));
-  }, [lagPoints, timeSince]);
-
-  const [mounted, setMounted] = useState(false);
   useEffect(() => {
     setMounted(true);
-  }, []);
-
-  useEffect(() => {
     fetchLagPoints();
   }, [fetchLagPoints]);
 
@@ -105,13 +104,20 @@ function LagGraph({ slotNames }: { slotNames: string[] }) {
           theme={SelectTheme}
         />
       </div>
-      <LineChart
-        index='time'
-        data={graphValues}
-        categories={['Lag in GB']}
-        colors={['rose']}
-        showXAxis={false}
-      />
+      {loading ? (
+        <center>
+          <Label>Updating slot graph</Label>
+          <ProgressCircle variant='determinate_progress_circle' />
+        </center>
+      ) : (
+        <LineChart
+          index='time'
+          data={lagPoints}
+          categories={['Lag in GB']}
+          colors={['rose']}
+          showXAxis={false}
+        />
+      )}
     </div>
   );
 }