From 5004bd00aef5080d4905e9a5cb2ef73be0f991a0 Mon Sep 17 00:00:00 2001
From: William Guss <carlostnb@gmail.com>
Date: Tue, 6 Aug 2024 13:59:31 -0700
Subject: [PATCH] charts

---
 .../src/components/LMPDetailsSidePanel.js     | 152 +++-------
 ell-studio/src/components/MetricChart.js      | 259 ++++++++++++++++++
 2 files changed, 292 insertions(+), 119 deletions(-)
 create mode 100644 ell-studio/src/components/MetricChart.js

diff --git a/ell-studio/src/components/LMPDetailsSidePanel.js b/ell-studio/src/components/LMPDetailsSidePanel.js
index 77141730..bc8ace73 100644
--- a/ell-studio/src/components/LMPDetailsSidePanel.js
+++ b/ell-studio/src/components/LMPDetailsSidePanel.js
@@ -3,10 +3,10 @@ import { Link } from 'react-router-dom';
 import { FiClock, FiTag, FiGitCommit, FiZap, FiHash, FiCalendar } from 'react-icons/fi';
 import { getTimeAgo } from '../utils/lmpUtils';
 import VersionBadge from './VersionBadge';
-import { AreaChart, Area, XAxis, YAxis, Tooltip, ResponsiveContainer, CartesianGrid } from 'recharts';
-import { format } from 'date-fns';
+import MetricChart from './MetricChart';
 import { useInvocationsFromLMP } from '../hooks/useBackend';
 import { LMPCardTitle } from './depgraph/LMPCardTitle';
+import { subDays, format, addDays, endOfMonth } from 'date-fns';
 
 function StatItem({ icon: Icon, label, value }) {
   return (
@@ -18,68 +18,26 @@ function StatItem({ icon: Icon, label, value }) {
 }
 
 function LMPDetailsSidePanel({ lmp, uses, versionHistory }) {
-  const [timeScale, setTimeScale] = useState('1h');
-  const [movingAverage, setMovingAverage] = useState(1);
-  const { data: invocations } = useInvocationsFromLMP(lmp.name, lmp.lmp_id);
+  const { data: invocations } = useInvocationsFromLMP(lmp.name, lmp.lmp_id, 0, 100);
 
   const chartData = useMemo(() => {
-    if (!invocations) return [];
-
-    const now = new Date();
-    const timeScaleDays = {
-      '15m': 15 / (24 * 60), '1h': 1 / 24, '6h': 6 / 24, '1d': 1, '1w': 7, '1m': 30, '3m': 90, '1y': 365
-    }[timeScale];
-    const startDate = new Date(now.getTime() - timeScaleDays * 24 * 60 * 60 * 1000);
-
-    const filteredInvocations = invocations.filter(inv => new Date(inv.created_at) >= startDate);
-
-    // Group invocations by time intervals
-    const intervalMs = timeScaleDays * 24 * 60 * 60 * 1000 / 20; // Divide the time range into 20 intervals
-    const groupedData = filteredInvocations.reduce((acc, inv) => {
-      const date = new Date(inv.created_at);
-      const intervalIndex = Math.floor((date - startDate) / intervalMs);
-      const intervalDate = new Date(startDate.getTime() + intervalIndex * intervalMs);
-      const key = intervalDate.toISOString();
-      acc[key] = (acc[key] || 0) + 1;
-      return acc;
-    }, {});
-
-    const sortedData = Object.entries(groupedData)
-      .map(([date, count]) => ({ date, count }))
+    if (!invocations || invocations.length === 0) return [];
+
+    return invocations
+      .map(inv => ({
+        date: new Date(inv.created_at),
+        count: 1,
+        latency: inv.latency_ms
+      }))
       .sort((a, b) => new Date(a.date) - new Date(b.date));
+  }, [invocations]);
 
-    // Calculate moving average
-    return sortedData.map((item, index, array) => {
-      const start = Math.max(0, index - movingAverage + 1);
-      const windowSlice = array.slice(start, index + 1);
-      const avg = windowSlice.reduce((sum, i) => sum + i.count, 0) / windowSlice.length;
-      return { ...item, movingAvg: avg };
-    });
-  }, [invocations, timeScale, movingAverage]);
-
-  const formatXAxis = (tickItem) => {
-    const date = new Date(tickItem);
-    switch(timeScale) {
-      case '15m':
-      case '1h':
-      case '6h':
-        return format(date, 'HH:mm');
-      case '1d':
-        return format(date, 'HH:mm');
-      case '1w':
-        return format(date, 'EEE');
-      case '1m':
-      case '3m':
-        return format(date, 'MMM d');
-      case '1y':
-        return format(date, 'MMM');
-      default:
-        return format(date, 'MMM d');
-    }
-  };
-
-  const totalInvocations = invocations?.length || 0;
-  const avgLatency = invocations?.reduce((sum, inv) => sum + inv.latency_ms, 0) / totalInvocations || 0;
+  const totalInvocations = useMemo(() => invocations?.length || 0, [invocations]);
+  const avgLatency = useMemo(() => {
+    if (!invocations || invocations.length === 0) return 0;
+    const sum = invocations.reduce((acc, inv) => acc + inv.latency_ms, 0);
+    return sum / invocations.length;
+  }, [invocations]);
 
   return (
     <aside className="w-[500px] bg-[#0d1117] p-4 overflow-y-auto">
@@ -122,65 +80,21 @@ function LMPDetailsSidePanel({ lmp, uses, versionHistory }) {
           )}
         </div>
 
-        <div className="bg-[#161b22] p-3 rounded">
-          <h3 className="text-sm font-semibold mb-2 text-white">Invocations Over Time</h3>
-          <div className="flex space-x-2 mb-2">
-            <select
-              className="bg-[#0d1117] text-white text-xs p-1 rounded"
-              value={timeScale}
-              onChange={(e) => setTimeScale(e.target.value)}
-            >
-              <option value="15m">15 Minutes</option>
-              <option value="1h">1 Hour</option>
-              <option value="6h">6 Hours</option>
-              <option value="1d">1 Day</option>
-              <option value="1w">1 Week</option>
-              <option value="1m">1 Month</option>
-              <option value="3m">3 Months</option>
-              <option value="1y">1 Year</option>
-            </select>
-            <select
-              className="bg-[#0d1117] text-white text-xs p-1 rounded"
-              value={movingAverage}
-              onChange={(e) => setMovingAverage(Number(e.target.value))}
-            >
-              <option value="1">No Average</option>
-              <option value="3">3-Day Avg</option>
-              <option value="7">7-Day Avg</option>
-              <option value="30">30-Day Avg</option>
-            </select>
-          </div>
-          <div className="h-60">
-            <ResponsiveContainer width="100%" height="100%">
-              <AreaChart data={chartData} margin={{ top: 10, right: 30, left: 0, bottom: 0 }}>
-                <defs>
-                  <linearGradient id="colorCount" x1="0" y1="0" x2="0" y2="1">
-                    <stop offset="5%" stopColor="#8884d8" stopOpacity={0.8}/>
-                    <stop offset="95%" stopColor="#8884d8" stopOpacity={0}/>
-                  </linearGradient>
-                  <linearGradient id="colorAvg" x1="0" y1="0" x2="0" y2="1">
-                    <stop offset="5%" stopColor="#82ca9d" stopOpacity={0.8}/>
-                    <stop offset="95%" stopColor="#82ca9d" stopOpacity={0}/>
-                  </linearGradient>
-                </defs>
-                <XAxis 
-                  dataKey="date" 
-                  stroke="#4a5568" 
-                  tick={{ fill: '#4a5568' }} 
-                  tickFormatter={formatXAxis}
-                />
-                <YAxis stroke="#4a5568" tick={{ fill: '#4a5568' }} />
-                <CartesianGrid strokeDasharray="3 3" stroke="#2d3748" />
-                <Tooltip
-                  contentStyle={{ backgroundColor: '#1f2937', border: 'none', color: '#fff' }}
-                  labelFormatter={(label) => format(new Date(label), 'PPpp')}
-                />
-                <Area type="monotone" dataKey="count" stroke="#8884d8" fillOpacity={1} fill="url(#colorCount)" name="Count" />
-                <Area type="monotone" dataKey="movingAvg" stroke="#82ca9d" fillOpacity={1} fill="url(#colorAvg)" name="Moving Avg" />
-              </AreaChart>
-            </ResponsiveContainer>
-          </div>
-        </div>
+        <MetricChart 
+          rawData={chartData}
+          dataKey="count"
+          color="#8884d8"
+          title="Invocations"
+          yAxisLabel="Count"
+        />
+
+        <MetricChart 
+          rawData={chartData}
+          dataKey="latency"
+          color="#82ca9d"
+          title="Latency"
+          yAxisLabel="ms"
+        />
 
         <div className="bg-[#161b22] p-3 rounded">
           <h3 className="text-sm font-semibold mb-2 text-white">Version History</h3>
diff --git a/ell-studio/src/components/MetricChart.js b/ell-studio/src/components/MetricChart.js
new file mode 100644
index 00000000..49848d4b
--- /dev/null
+++ b/ell-studio/src/components/MetricChart.js
@@ -0,0 +1,259 @@
+import React, { useMemo, useCallback, useState, useEffect } from "react";
+import {
+  AreaChart,
+  Area,
+  XAxis,
+  YAxis,
+  Tooltip,
+  ResponsiveContainer,
+  CartesianGrid,
+  Brush,
+  Legend,
+} from "recharts";
+import {
+  format,
+  differenceInDays,
+  differenceInHours,
+  differenceInMinutes,
+  startOfMinute,
+  endOfMinute,
+  eachMinuteOfInterval,
+  eachHourOfInterval,
+  eachDayOfInterval,
+  startOfHour,
+  endOfHour,
+  startOfDay,
+  endOfDay,
+  addMinutes,
+  getMinutes,
+  subMonths,
+  subDays,
+  subHours,
+} from "date-fns";
+
+function MetricChart({ rawData, dataKey, color, title, yAxisLabel }) {
+  const [dateRange, setDateRange] = useState(null);
+  const [selectedTimeRange, setSelectedTimeRange] = useState("all");
+
+  const timeRangeOptions = useMemo(() => [
+    { value: "all", label: "All Time" },
+    { value: "1m", label: "Last Month" },
+    { value: "7d", label: "Last 7 Days" },
+    { value: "24h", label: "Last 24 Hours" },
+    { value: "12h", label: "Last 12 Hours" },
+    { value: "1h", label: "Last Hour" },
+  ].filter((range) => {
+     if(!rawData)
+        return true;
+    else {
+        // if the range extends beyond the available data, don't show it
+        const earliestDate = new Date(rawData[0]?.date);
+        if(range.value === "all")
+            return true;
+        else {
+            const start = range.value === "1m" ? subMonths(new Date(), 1) :
+                          range.value === "7d" ? subDays(new Date(), 7) :
+                          range.value === "24h" ? subHours(new Date(), 24) :
+                          range.value === "12h" ? subHours(new Date(), 12) :
+                          range.value === "1h" ? subHours(new Date(), 1) :
+                          new Date(); // Default case, shouldn't occur
+            return start >= earliestDate;
+        }
+    }
+  }), [rawData]);
+
+  useEffect(() => {
+    const latestNow = new Date();
+    if (rawData?.length > 0) {
+      let start = rawData[0]?.date;
+      
+      switch (selectedTimeRange) {
+        case "1m":
+          start = subMonths(latestNow, 1);
+          break;
+        case "7d":
+          start = subDays(latestNow, 7);
+          break;
+        case "24h":
+          start = subHours(latestNow, 24);
+          break;
+        case "12h":
+          start = subHours(latestNow, 12);
+          break;
+        case "1h":
+          start = subHours(latestNow, 1);
+          break;
+        default:
+          // "all" - use the earliest date in rawData
+          break;
+      }
+
+      setDateRange({
+        start: new Date(Math.max(new Date(start), new Date(rawData[0]?.date))),
+        end: latestNow,
+      });
+    }
+  }, [rawData, selectedTimeRange]);
+
+  // Determine aggregation based on zoom
+  const aggregatedData = useMemo(() => {
+    if (!rawData?.length || !dateRange) return [];
+
+    const zoomStart =  dateRange.start;
+    const zoomEnd = dateRange.end;
+
+    const daysDiff = differenceInDays(zoomEnd, zoomStart);
+    const hoursDiff = differenceInHours(zoomEnd, zoomStart);
+    const minutesDiff = differenceInMinutes(zoomEnd, zoomStart);
+
+    let aggregationInterval;
+    let aggregationFunction;
+
+    if (daysDiff > 30) {
+      aggregationInterval = eachDayOfInterval;
+      aggregationFunction = startOfDay;
+    } else if (hoursDiff > 24) {
+      aggregationInterval = eachHourOfInterval;
+      aggregationFunction = startOfHour;
+    } else if (hoursDiff > 1) {
+      aggregationInterval = (interval) => {
+        const start = startOfHour(interval.start);
+        const end = interval.end;
+        const result = [];
+        for (let current = start; current <= end; current = addMinutes(current, 15)) {
+          result.push(current);
+        }
+        return result;
+      };
+      aggregationFunction = (date) => {
+        const minutes = getMinutes(date);
+        const roundedMinutes = Math.floor(minutes / 15) * 15;
+        return startOfMinute(addMinutes(startOfHour(date), roundedMinutes));
+      };
+    } else {
+      aggregationInterval = eachMinuteOfInterval;
+      aggregationFunction = startOfMinute;
+    }
+
+    const aggregatedMap = new Map();
+    rawData.forEach((item) => {
+      const date = new Date(item.date);
+      if (date >= zoomStart && date <= zoomEnd) {
+        const key = format(aggregationFunction(date), "yyyy-MM-dd'T'HH:mm");
+        aggregatedMap.set(key, (aggregatedMap.get(key) || 0) + item[dataKey]);
+      }
+    });
+
+    return aggregationInterval({ start: zoomStart, end: zoomEnd }).map(
+      (date) => {
+        const key = format(date, "yyyy-MM-dd'T'HH:mm");
+        return {
+          date: key,
+          [dataKey]: aggregatedMap.get(key) || 0,
+        };
+      }
+    );
+  }, [rawData, dateRange, dataKey]);
+
+  // Memoize formatting functions
+  const formatXAxis = useCallback(
+    (tickItem) => {
+      const date = new Date(tickItem);
+      const daysDiff = differenceInDays(dateRange.end, dateRange.start);
+      if (daysDiff > 30) return format(date, "MMM d");
+      if (daysDiff > 1) return format(date, "MMM d HH:mm");
+      return format(date, "HH:mm");
+    },
+    [dateRange]
+  );
+
+  const formatTooltip = useCallback(
+    (value, name, props) => {
+      return [`${value} ${yAxisLabel || title.toLowerCase()}`, title];
+    },
+    [yAxisLabel, title]
+  );
+
+  const handleZoom = (domain) => {
+  };
+
+  return (
+    <div className="bg-[#161b22] p-4 rounded-lg shadow-lg">
+      <div className="flex justify-between items-center mb-4">
+        <h3 className="text-lg font-semibold text-white">{title}</h3>
+        <select
+          className="bg-[#0d1117] text-white border border-gray-700 rounded px-2 py-1"
+          value={selectedTimeRange}
+          onChange={(e) => setSelectedTimeRange(e.target.value)}
+        >
+          {timeRangeOptions.map((option) => (
+            <option key={option.value} value={option.value}>
+              {option.label}
+            </option>
+          ))}
+        </select>
+      </div>
+      <div className="h-80">
+        <ResponsiveContainer width="100%" height="100%">
+          <AreaChart
+            data={aggregatedData}
+            margin={{ top: 10, right: 30, left: 0, bottom: 0 }}
+          >
+            <defs>
+              <linearGradient id={`color${title}`} x1="0" y1="0" x2="0" y2="1">
+                <stop offset="5%" stopColor={color} stopOpacity={0.8} />
+                <stop offset="95%" stopColor={color} stopOpacity={0} />
+              </linearGradient>
+            </defs>
+            <XAxis
+              dataKey="date"
+              stroke="#4a5568"
+              tick={{ fill: "#4a5568" }}
+              tickFormatter={formatXAxis}
+            />
+            <YAxis
+              stroke="#4a5568"
+              tick={{ fill: "#4a5568" }}
+              label={{
+                value: yAxisLabel,
+                angle: -90,
+                position: "insideLeft",
+                fill: "#4a5568",
+              }}
+            />
+            <CartesianGrid strokeDasharray="3 3" stroke="#2d3748" />
+            <Tooltip
+              contentStyle={{
+                backgroundColor: "#1f2937",
+                border: "none",
+                color: "#fff",
+              }}
+              labelFormatter={(label) => format(new Date(label), "PPpp")}
+              formatter={formatTooltip}
+            />
+            <Legend />
+            <Area
+              type="monotone"
+              dataKey={dataKey}
+              stroke={color}
+              fillOpacity={1}
+              fill={`url(#color${title})`}
+              name={title}
+            />
+            <Brush
+              dataKey="date"
+              height={30}
+              stroke={color}
+              fill="#161b22"
+              onChange={handleZoom}
+              startIndex={0}
+              endIndex={aggregatedData.length - 1}
+            />
+          </AreaChart>
+        </ResponsiveContainer>
+      </div>
+    </div>
+  );
+}
+
+export default React.memo(MetricChart);
\ No newline at end of file