From 2fae7cfe6bac2dcd7f3ac338d10982e671caffe2 Mon Sep 17 00:00:00 2001 From: pcarapic15 Date: Tue, 15 Jul 2025 10:50:11 +0200 Subject: [PATCH 1/7] Add sd-gym page --- src/pages/sd-gym.js | 39 ++++++++++++++++++--------------------- 1 file changed, 18 insertions(+), 21 deletions(-) diff --git a/src/pages/sd-gym.js b/src/pages/sd-gym.js index 91bb48ea..cce3bbcd 100644 --- a/src/pages/sd-gym.js +++ b/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 ; + return ( +
+ - // return ( - //
- // - - //
- // - //
- //
- // ); +
+ +
+
+ ); } From d83f5b68a9024c76ba3d812730a18db805ea7841 Mon Sep 17 00:00:00 2001 From: pcarapic15 Date: Tue, 15 Jul 2025 13:13:49 +0200 Subject: [PATCH 2/7] Add filtering for leaderboard tables --- src/components/sd-gym/SdGymContent.js | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/components/sd-gym/SdGymContent.js b/src/components/sd-gym/SdGymContent.js index 5ba15a7b..17dfd442 100644 --- a/src/components/sd-gym/SdGymContent.js +++ b/src/components/sd-gym/SdGymContent.js @@ -7,6 +7,7 @@ import SdGymLeaderboard from "./SdGymLeaderboard"; import AboutSdGym from "./AboutSdGym"; export default function SdGymContent() { + const [rawData, setRawData] = useState([]); const [data, setData] = useState([]); const [dateTags, setDateTags] = useState([]); // const activeDateTag = dateTags.find((dt) => dt.active); @@ -24,6 +25,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 +43,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(); From d35bf00e1d9f6d293bf0c57e7973a9530bc930a2 Mon Sep 17 00:00:00 2001 From: pcarapic15 Date: Tue, 15 Jul 2025 14:23:15 +0200 Subject: [PATCH 3/7] Fix tables mobile dimensions --- src/components/sd-gym/SdGymLeaderboard.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/sd-gym/SdGymLeaderboard.js b/src/components/sd-gym/SdGymLeaderboard.js index 2e656fc8..325e36c1 100644 --- a/src/components/sd-gym/SdGymLeaderboard.js +++ b/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 ( From 6f8ce535d694b93568c53fc774976dc467a6cd95 Mon Sep 17 00:00:00 2001 From: pcarapic15 Date: Wed, 16 Jul 2025 10:47:02 +0200 Subject: [PATCH 4/7] Ini Tradeoffs component --- src/components/sd-gym/SdGymContent.js | 2 ++ src/components/sd-gym/Tradeoffs.js | 15 +++++++++++++++ 2 files changed, 17 insertions(+) create mode 100644 src/components/sd-gym/Tradeoffs.js diff --git a/src/components/sd-gym/SdGymContent.js b/src/components/sd-gym/SdGymContent.js index 17dfd442..16197586 100644 --- a/src/components/sd-gym/SdGymContent.js +++ b/src/components/sd-gym/SdGymContent.js @@ -5,6 +5,7 @@ import NewsSliderSection from "../community-stats/NewsSliderSection"; import BannerSection from "../community-stats/BannerSection"; import SdGymLeaderboard from "./SdGymLeaderboard"; import AboutSdGym from "./AboutSdGym"; +import Tradeoffs from "./Tradeoffs"; export default function SdGymContent() { const [rawData, setRawData] = useState([]); @@ -93,6 +94,7 @@ export default function SdGymContent() { + diff --git a/src/components/sd-gym/Tradeoffs.js b/src/components/sd-gym/Tradeoffs.js new file mode 100644 index 00000000..7c6b01b3 --- /dev/null +++ b/src/components/sd-gym/Tradeoffs.js @@ -0,0 +1,15 @@ +import React from "react"; + +const Tradeoffs = () => { + return ( +
+
+

+ The Privacy-Quality Tradeoffs +

+
+
+ ); +}; + +export default Tradeoffs; From 78c132ccfaa92247f606617ad71faf4b05c0c6ba Mon Sep 17 00:00:00 2001 From: pcarapic15 Date: Wed, 16 Jul 2025 10:51:18 +0200 Subject: [PATCH 5/7] Add speed tradeoffs component --- .../sd-gym/{Tradeoffs.js => PrivacyTradeoffs.js} | 4 ++-- src/components/sd-gym/SdGymContent.js | 6 ++++-- src/components/sd-gym/SpeedTradeoffs.js | 15 +++++++++++++++ 3 files changed, 21 insertions(+), 4 deletions(-) rename src/components/sd-gym/{Tradeoffs.js => PrivacyTradeoffs.js} (85%) create mode 100644 src/components/sd-gym/SpeedTradeoffs.js diff --git a/src/components/sd-gym/Tradeoffs.js b/src/components/sd-gym/PrivacyTradeoffs.js similarity index 85% rename from src/components/sd-gym/Tradeoffs.js rename to src/components/sd-gym/PrivacyTradeoffs.js index 7c6b01b3..67d5ed53 100644 --- a/src/components/sd-gym/Tradeoffs.js +++ b/src/components/sd-gym/PrivacyTradeoffs.js @@ -1,6 +1,6 @@ import React from "react"; -const Tradeoffs = () => { +const PrivacyTradeoffs = () => { return (
@@ -12,4 +12,4 @@ const Tradeoffs = () => { ); }; -export default Tradeoffs; +export default PrivacyTradeoffs; diff --git a/src/components/sd-gym/SdGymContent.js b/src/components/sd-gym/SdGymContent.js index 16197586..e917adc0 100644 --- a/src/components/sd-gym/SdGymContent.js +++ b/src/components/sd-gym/SdGymContent.js @@ -5,7 +5,8 @@ import NewsSliderSection from "../community-stats/NewsSliderSection"; import BannerSection from "../community-stats/BannerSection"; import SdGymLeaderboard from "./SdGymLeaderboard"; import AboutSdGym from "./AboutSdGym"; -import Tradeoffs from "./Tradeoffs"; +// import PrivacyTradeoffs from "./PrivacyTradeoffs"; +import SpeedTradeoffs from "./SpeedTradeoffs"; export default function SdGymContent() { const [rawData, setRawData] = useState([]); @@ -94,7 +95,8 @@ export default function SdGymContent() { - + {/* */} +
diff --git a/src/components/sd-gym/SpeedTradeoffs.js b/src/components/sd-gym/SpeedTradeoffs.js new file mode 100644 index 00000000..5a3306d1 --- /dev/null +++ b/src/components/sd-gym/SpeedTradeoffs.js @@ -0,0 +1,15 @@ +import React from "react"; + +const SpeedTradeoffs = () => { + return ( +
+
+

+ The Quality-Speed Tradeoffs +

+
+
+ ); +}; + +export default SpeedTradeoffs; From 71f1f49dbc5341663c9369995e478e349597d36e Mon Sep 17 00:00:00 2001 From: pcarapic15 Date: Wed, 16 Jul 2025 14:13:22 +0200 Subject: [PATCH 6/7] Construct basic speed tradeoff line chart --- src/components/sd-gym/SpeedTradeoffChart.js | 77 +++++++++++++++++++++ src/components/sd-gym/SpeedTradeoffs.js | 2 + 2 files changed, 79 insertions(+) create mode 100644 src/components/sd-gym/SpeedTradeoffChart.js diff --git a/src/components/sd-gym/SpeedTradeoffChart.js b/src/components/sd-gym/SpeedTradeoffChart.js new file mode 100644 index 00000000..28535c2b --- /dev/null +++ b/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 ( + + + + + [ + `${value}`, + name === "x" ? "Time" : "Quality", + ]} + content={({ payload }) => + payload && payload.length ? ( +
+ {payload[0].payload.model} +
+ Time: {payload[0].payload.x} +
+ Quality: {payload[0].payload.y} +
+ ) : null + } + /> + + null} + legendType="none" + /> + + ); +} diff --git a/src/components/sd-gym/SpeedTradeoffs.js b/src/components/sd-gym/SpeedTradeoffs.js index 5a3306d1..dcac08e0 100644 --- a/src/components/sd-gym/SpeedTradeoffs.js +++ b/src/components/sd-gym/SpeedTradeoffs.js @@ -1,4 +1,5 @@ import React from "react"; +import SpeedTradeoffChart from "./SpeedTradeoffChart"; const SpeedTradeoffs = () => { return ( @@ -7,6 +8,7 @@ const SpeedTradeoffs = () => {

The Quality-Speed Tradeoffs

+
); From b7bbd9dcb4365595709c568f0f29ea9071d5308b Mon Sep 17 00:00:00 2001 From: pcarapic15 Date: Fri, 15 Aug 2025 10:15:08 +0200 Subject: [PATCH 7/7] Uncomment activeDateTag --- src/components/sd-gym/SdGymContent.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/sd-gym/SdGymContent.js b/src/components/sd-gym/SdGymContent.js index e917adc0..42403885 100644 --- a/src/components/sd-gym/SdGymContent.js +++ b/src/components/sd-gym/SdGymContent.js @@ -12,7 +12,7 @@ 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%20Monthly%20Run.xlsx";