1 files changed, 129 insertions, 0 deletions
diff --git a/benchmark/frontend/src/components/index/RunData.tsx b/benchmark/frontend/src/components/index/RunData.tsx
new file mode 100644
index 000000000..e0e97cce2
--- /dev/null
+++ b/benchmark/frontend/src/components/index/RunData.tsx
@@ -0,0 +1,129 @@
+import React, { useState } from "react";
+import { LatestRun } from "../../lib/types";
+import tw from "tailwind-styled-components";
+
+const RecursiveDropdown: React.FC<{ data: any; skipKeys: string[] }> = ({
+  data,
+  skipKeys,
+}) => {
+  if (typeof data !== "object" || data === null) {
+    return null;
+  }
+
+  return (
+    <>
+      {Object.entries(data).map(([key, value]) => {
+        if (skipKeys.includes(key)) {
+          return null;
+        }
+
+        // Special case for 'category' key
+        if (key === "category" && Array.isArray(value)) {
+          return (
+            <Section key={key}>
+              <Label>{key}:</Label>
+              <Data>{value.join(", ")}</Data>
+            </Section>
+          );
+        }
+
+        if (typeof value === "object" && value !== null) {
+          return (
+            <Dropdown key={key}>
+              <DropdownSummary>{key}</DropdownSummary>
+              <DropdownContent>
+                <RecursiveDropdown data={value} skipKeys={skipKeys} />
+              </DropdownContent>
+            </Dropdown>
+          );
+        } else {
+          return (
+            <Section key={key}>
+              <Label>{key}:</Label>
+              <Data>
+                {typeof value === "string" ? value : JSON.stringify(value)}
+              </Data>
+            </Section>
+          );
+        }
+      })}
+    </>
+  );
+};
+
+const RunData: React.FC<{ latestRun: LatestRun }> = ({ latestRun }) => {
+  const date = new Date(latestRun.benchmark_start_time);
+  return (
+    <Card>
+      <Section>
+        <Label>Command:</Label>
+        <Data>{latestRun.command}</Data>
+      </Section>
+      <Section>
+        <Label>Start time:</Label>
+        <Data>{date.toLocaleString()}</Data>
+      </Section>
+      <Section>
+        <Label>Run time:</Label>
+        <Data>{latestRun.metrics.run_time}</Data>
+      </Section>
+      <Section>
+        <Label>Highest difficulty:</Label>
+        <Data>
+          {latestRun.metrics.highest_difficulty.split(":")[1]?.slice(-1)}
+        </Data>
+      </Section>
+
+      {Object.keys(latestRun.tests).map((testKey) => (
+        <Dropdown key={testKey}>
+          <DropdownSummary>{testKey}</DropdownSummary>
+          <DropdownContent>
+            {latestRun.tests[testKey] && (
+              <RecursiveDropdown
+                data={latestRun.tests[testKey]}
+                skipKeys={["cost", "data_path"]}
+              />
+            )}
+          </DropdownContent>
+        </Dropdown>
+      ))}
+    </Card>
+  );
+};
+
+export default RunData;
+
+const Card = tw.div`
+  bg-white
+  p-4
+  rounded
+  shadow-lg
+  w-full
+  mt-4
+`;
+
+const Section = tw.div`
+  mt-2
+`;
+
+const Label = tw.span`
+  font-medium
+`;
+
+const Data = tw.span`
+  ml-1
+`;
+
+const Dropdown = tw.details`
+  mt-4
+`;
+
+const DropdownSummary = tw.summary`
+  cursor-pointer
+  text-blue-500
+`;
+
+const DropdownContent = tw.div`
+  pl-4
+  mt-2
+`;