SD-Gym

src/components/sd-gym/PrivacyTradeoffs.js

@@ -0,0 +1,15 @@
+import React from "react";
+
+const PrivacyTradeoffs = () => {
+  return (
+    <div className="flex justify-center bg-white">
+      <div className="container w-full flex flex-col py-12 md:py-16 lg:py-24 px-4 md:px-5 lg:px-0">
+        <h1 className="heading-600-lg text-[36px] md:text-5xl text-center">
+          The <span className="text-blue-600">Privacy-Quality</span> Tradeoffs
+        </h1>
+      </div>
+    </div>
+  );
+};
+
+export default PrivacyTradeoffs;

src/components/sd-gym/SdGymContent.js

@@ -5,11 +5,14 @@ import NewsSliderSection from "../community-stats/NewsSliderSection";
 import BannerSection from "../community-stats/BannerSection";
 import SdGymLeaderboard from "./SdGymLeaderboard";
 import AboutSdGym from "./AboutSdGym";
+// import PrivacyTradeoffs from "./PrivacyTradeoffs";
+import SpeedTradeoffs from "./SpeedTradeoffs";
 
 export default function SdGymContent() {
+  const [rawData, setRawData] = useState([]);
   const [data, setData] = useState([]);
   const [dateTags, setDateTags] = useState([]);
-  // const activeDateTag = dateTags.find((dt) => dt.active);
+  const activeDateTag = dateTags.find((dt) => dt.active);
 
   const fileUrl =
     "https://raw.githubusercontent.com/sdv-dev/sdv-dev.github.io/gatsby-home/assets/sdgym-leaderboard-files/SDGym Monthly Run.xlsx";
@@ -24,6 +27,7 @@ export default function SdGymContent() {
         const firstSheet = workbook.SheetNames[0];
         const worksheet = workbook.Sheets[firstSheet];
         const rawData = XLSX.utils.sheet_to_json(worksheet);
+        setRawData(rawData);
 
         // Date tags for the tables
         const rawDateTags = extractSortedDates(rawData);
@@ -41,6 +45,13 @@ export default function SdGymContent() {
     fetchExcel();
   }, []);
 
+  useEffect(() => {
+    if (activeDateTag && rawData.length) {
+      const tableData = buildTableData(rawData, activeDateTag.date);
+      setData(tableData);
+    }
+  }, [activeDateTag, rawData]);
+
   const extractSortedDates = (data) => {
     const datesSet = new Set();
 
@@ -84,6 +95,8 @@ export default function SdGymContent() {
       <SdGymHero />
       <SdGymLeaderboard data={data} tags={dateTags} setTags={setDateTags} />
       <AboutSdGym />
+      {/* <PrivacyTradeoffs /> */}
+      <SpeedTradeoffs />
       <NewsSliderSection />
       <BannerSection />
     </div>

src/components/sd-gym/SdGymLeaderboard.js

@@ -12,7 +12,7 @@ import TableRowCell from "../common/table/TableRowCell";
 
 const SdGymLeaderboard = ({ data, tags, setTags }) => {
   const metricLabels = ["Models", "Number of wins"];
-  const tableColDimensions = "minmax(172px, 379px) minmax(172px, 379px)";
+  const tableColDimensions = "minmax(160px, 379px) minmax(140px, 379px)";
   const lastRunLabel = tags[0]?.label;
 
   return (

src/components/sd-gym/SpeedTradeoffChart.js

@@ -0,0 +1,77 @@
+import React from "react";
+import {
+  ScatterChart,
+  Scatter,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  Legend,
+} from "recharts";
+
+const trendLineData = [
+  { x: 0.5, y: 0.5 },
+  { x: 1, y: 1 },
+  { x: 1.5, y: 1.5 },
+  { x: 2, y: 2.2 },
+  { x: 2.5, y: 3 },
+  { x: 3, y: 4 },
+  { x: 3.5, y: 5.3 },
+  { x: 4, y: 7 },
+];
+
+export default function SpeedTradeoffChart() {
+  return (
+    <ScatterChart
+      width={700}
+      height={450}
+      margin={{ top: 20, right: 20, bottom: 20, left: 20 }}
+      className="mx-auto mt-20"
+    >
+      <CartesianGrid />
+      <XAxis
+        type="number"
+        dataKey="x"
+        name="Time"
+        label={{ value: "Time", position: "insideBottom", offset: -20 }}
+      />
+      <YAxis
+        type="number"
+        dataKey="y"
+        name="Quality"
+        label={{ value: "Quality", angle: -90, position: "insideLeft" }}
+      />
+      <Tooltip
+        cursor={{ strokeDasharray: "3 3" }}
+        formatter={(value, name) => [
+          `${value}`,
+          name === "x" ? "Time" : "Quality",
+        ]}
+        content={({ payload }) =>
+          payload && payload.length ? (
+            <div
+              style={{
+                background: "#fff",
+                padding: "5px",
+                border: "1px solid #ccc",
+              }}
+            >
+              <strong>{payload[0].payload.model}</strong>
+              <br />
+              Time: {payload[0].payload.x}
+              <br />
+              Quality: {payload[0].payload.y}
+            </div>
+          ) : null
+        }
+      />
+      <Legend />
+      <Scatter
+        data={trendLineData}
+        line={{ stroke: "#0690D1", strokeWidth: 4 }}
+        shape={() => null}
+        legendType="none"
+      />
+    </ScatterChart>
+  );
+}

src/components/sd-gym/SpeedTradeoffs.js

@@ -0,0 +1,17 @@
+import React from "react";
+import SpeedTradeoffChart from "./SpeedTradeoffChart";
+
+const SpeedTradeoffs = () => {
+  return (
+    <div className="flex justify-center bg-white">
+      <div className="container w-full flex flex-col py-12 md:py-16 lg:py-24 px-4 md:px-5 lg:px-0">
+        <h1 className="heading-600-lg text-[36px] md:text-5xl text-center">
+          The <span className="text-blue-600">Quality-Speed</span> Tradeoffs
+        </h1>
+        <SpeedTradeoffChart />
+      </div>
+    </div>
+  );
+};
+
+export default SpeedTradeoffs;

src/pages/sd-gym.js

@@ -1,26 +1,23 @@
 import React from "react";
-// import { Article } from "../components/common";
-// import config from "../utils/siteConfig";
-// import Seo from "../components/Seo";
-// import SdGymContent from "../components/sd-gym/SdGymContent";
-import NotFoundPage from "./404";
+import { Article } from "../components/common";
+import config from "../utils/siteConfig";
+import Seo from "../components/Seo";
+import SdGymContent from "../components/sd-gym/SdGymContent";
 
 export default function SdGymPage() {
-  return <NotFoundPage />;
+  return (
+    <Article isDark={false}>
+      <Seo
+        title={config.siteTitleMeta}
+        description={config.siteDescriptionMeta}
+        type="website"
+        image={`/sdv-home.jpg`}
+        canonical={`https://sdv.dev/`}
+      />
 
-  // return (
-  //   <Article>
-  //     <Seo
-  //       title={config.siteTitleMeta}
-  //       description={config.siteDescriptionMeta}
-  //       type="website"
-  //       image={`/sdv-home.jpg`}
-  //       canonical={`https://sdv.dev/`}
-  //     />
-
-  //     <div className="mx-auto">
-  //       <SdGymContent />
-  //     </div>
-  //   </Article>
-  // );
+      <div className="mx-auto">
+        <SdGymContent />
+      </div>
+    </Article>
+  );
 }