Add event lines to plots

app/components/LineChart.tsx

@@ -7,22 +7,26 @@ import {
   Tooltip,
   Legend,
   ResponsiveContainer,
+  ReferenceLine,
 } from "recharts";
 import { vialColors } from "~/utils/chart/colors";
 import groupBy from "lodash/groupBy";
+import { HistoricDatum } from "client";
 
-const processData = (data, vials, property) => {
+const processData = (
+  data: HistoricDatum[],
+  vials: string[],
+  property: string,
+) => {
   const filtered = data.filter((entry) => vials.includes(`${entry.vial}`));
   const timed = filtered.map((entry) => ({
-    timestamp: new Date(
-      Math.round(entry.timestamp) * 1000,
-    ).toLocaleTimeString(),
+    timestamp: Math.round(entry.timestamp),
     vial: `vial_${entry.vial}`,
     data: entry.data[property],
   }));
   // group for plotting by shared x-axis on timestamp. Without this the plotting
   // utility will consider each entry as a separate line (inefficient)
-  const grouped = groupBy(timed, "timestamp");
+  const grouped: (typeof timed)[] = groupBy(timed, "timestamp");
   // grouped creates an object keyed by group with arrays of objects, but
   // plotting wants array of objects keyed by line discriminator (vial)
   return Object.values(grouped).map((group) => ({
@@ -31,8 +35,30 @@ const processData = (data, vials, property) => {
   }));
 };
 
-export const HardwareLineChart = ({ vials, rawData, property = "raw" }) => {
+const processEvents = (data: HistoricDatum[], vials: string[]) => {
+  const filtered = data.filter((entry) =>
+    entry.vial ? vials.includes(`${entry.vial}`) : true,
+  );
+  return filtered.map((entry) => ({
+    timestamp: Math.round(entry.timestamp),
+    vial: `vial_${entry.vial}`,
+    data: entry.data,
+  }));
+};
+
+export const HardwareLineChart = ({
+  vials,
+  rawData,
+  events,
+  property = "raw",
+}: {
+  vials: string[];
+  rawData: HistoricDatum[];
+  events: HistoricDatum[];
+  property: string;
+}) => {
   const formattedData = processData(rawData, vials, property);
+  const eventData = processEvents(events, vials);
 
   return (
     <div>
@@ -41,11 +67,19 @@ export const HardwareLineChart = ({ vials, rawData, property = "raw" }) => {
       <ResponsiveContainer width="100%" height={400}>
         <LineChart data={formattedData}>
           <CartesianGrid strokeDasharray="3 3" />
-          <XAxis dataKey="timestamp" />
+          <XAxis
+            dataKey="timestamp"
+            type="number"
+            domain={["dataMin", "dataMax"]}
+            scale="time"
+            tickFormatter={(unixTime) =>
+              new Date(unixTime * 1000).toLocaleTimeString()
+            }
+          />
           <YAxis />
           <Tooltip />
           <Legend />
-          {vials.map((vial: number, index: number) => (
+          {vials.map((vial: string, index: number) => (
             <Line
               key={vial}
               type="monotone"
@@ -55,6 +89,14 @@ export const HardwareLineChart = ({ vials, rawData, property = "raw" }) => {
               connectNulls={true}
             />
           ))}
+          {eventData.map((event) => (
+            <ReferenceLine
+              key={`${event.timestamp}${event.data.message}`}
+              x={event.timestamp}
+              label={event.data.message}
+              stroke="red"
+            />
+          ))}
         </LineChart>
       </ResponsiveContainer>
       <div className="divider"></div>

app/routes/devices.$id.hardware.$hardware_name.history.tsx

@@ -12,6 +12,7 @@ import { db } from "~/utils/db.server";
 import { HardwareLineChart } from "~/components/LineChart";
 import { loader as rootLoader } from "~/root";
 import { WrenchScrewdriverIcon, XCircleIcon } from "@heroicons/react/24/solid";
+import flatMap from "lodash/flatMap";
 
 export const handle = {
   breadcrumb: (
@@ -67,20 +68,35 @@ export async function loader({ params, request }: LoaderFunctionArgs) {
 
   const properties = searchParams.get("properties")?.split(",");
 
-  const { data } = await Evolver.history({
-    query: {
-      name: hardware_name,
-      vials,
-      properties,
-    },
-    client: evolverClient,
+  const results = Promise.allSettled([
+    Evolver.history({
+      query: {
+        name: hardware_name,
+      },
+      body: {
+        vials,
+        properties,
+        kinds: ["sensor"],
+      },
+      client: evolverClient,
+    }),
+    Evolver.history({
+      body: {
+        kinds: ["event"],
+      },
+      client: evolverClient,
+    }),
+  ]).then((results) => {
+    return results.map((result) => result.value.data);
   });
 
-  return json({ data: data?.data });
+  const [hist, events] = await results;
+
+  return json({ data: hist?.data, events: events?.data });
 }
 
 export default function Hardware() {
-  const { data } = useLoaderData<typeof loader>();
+  const { data, events } = useLoaderData<typeof loader>();
   const {
     ENV: { EXCLUDED_PROPERTIES },
   } = useRouteLoaderData<typeof rootLoader>("root");
@@ -101,6 +117,11 @@ export default function Hardware() {
     hardwareHistory[0].data,
   ).filter((property) => excludedProperties.includes(property) === false);
 
+  // shape of data is not ideal here, we have a struct mapping event name to
+  // array of events. Here we drop name, probably change to backend could keep
+  // the name in the struct
+  const allEvents = flatMap(events);
+
   let selectedProperties: string[] = allHardwareVialsProperties;
   let selectedVials: string[] = [];
   if (searchParams.has("vials")) {
@@ -127,6 +148,7 @@ export default function Hardware() {
         rawData={hardwareHistory}
         vials={selectedVials}
         property={property}
+        events={allEvents}
       />
     );
     charts.push(chart);