From 31f54ee9ec4e9ed84adf90bab35134bd4430ae8b Mon Sep 17 00:00:00 2001 From: Justin Uberti Date: Thu, 2 May 2024 10:56:28 -0700 Subject: [PATCH] Read results from GCP directly (#13) * Read results from GCP directly This way we don't need to mess with checking latest.json into GitHub and dealing with the headaches that come along with that approach. Also make provider names clickable. Fixes #10 * format * display options --- website/src/components/DataGrid.astro | 44 +++++++++++--------- website/src/utils/DataGridDefinitions.ts | 12 +++--- website/src/utils/FetchData.ts | 51 ++++++++++++++++-------- 3 files changed, 65 insertions(+), 42 deletions(-) diff --git a/website/src/components/DataGrid.astro b/website/src/components/DataGrid.astro index ca1dc36..96b17b2 100644 --- a/website/src/components/DataGrid.astro +++ b/website/src/components/DataGrid.astro @@ -122,14 +122,16 @@ import "ag-grid-community/styles/ag-theme-quartz.css"; TPSDefinition, TotalTimeDefinition, } from "@/utils/DataGridDefinitions.ts"; - import { fetchLocalJsonFile } from "@/utils/FetchData.ts"; + import { fetchLatestJsonFile } from "@/utils/FetchData.ts"; let gridApi; - const localData = "../../data/latest.json"; - const gridData = await fetchLocalJsonFile(localData); const urlParams = new URLSearchParams(window.location.search); let selectedRegion = urlParams.get("r") ?? "sea"; - let selectedRegionData = []; + const initialData = await fetchData(); + + async function fetchData() { + return fetchLatestJsonFile(selectedRegion, "text"); + } function setUrlParam(key: string, value?: string) { const url = new URL(window.location.href); @@ -141,17 +143,14 @@ import "ag-grid-community/styles/ag-theme-quartz.css"; window.history.replaceState({}, "", url); } - function updateRegion(region: string, updateUrl: boolean = true) { + async function updateRegion(region: string) { selectedRegion = region; - gridData.forEach((regionData) => { - if (regionData.region === region) { - selectedRegionData = regionData.results; - gridApi.setGridOption("rowData", selectedRegionData); - } - }); - if (updateUrl) { - setUrlParam("r", region); - } + updateGrid(await fetchData()); + setUrlParam("r", region); + } + + function updateGrid(data) { + gridApi.setRowData(data.results); } // Returns the background color for the cell based on the value @@ -215,6 +214,12 @@ import "ag-grid-community/styles/ag-theme-quartz.css"; return { filterType: "text", type: "contains", filter: text }; } + function makeProviderUrl(provider: string) { + return provider.includes(".") + ? `https://${provider}` + : `https://${provider}.com`; + } + async function onDOMContentLoaded() { const gridDiv = document.querySelector("#myGrid") as HTMLElement; const gridOptions = gridOptionsBase; @@ -222,6 +227,9 @@ import "ag-grid-community/styles/ag-theme-quartz.css"; const providerFilter = urlParams.get("pf"); const modelFilter = urlParams.get("mf"); + gridOptions.columnDefs[0].cellRenderer = function (params) { + return `${params.value}`; + }; // remove TTFT and TPS columns on mobile if (isMobile) { gridOptions.columnDefs.splice(2, 2); @@ -250,20 +258,20 @@ import "ag-grid-community/styles/ag-theme-quartz.css"; `input[name=selectedRegion][value=${selectedRegion}]`, ) as HTMLInputElement; selectedRegionRadio.checked = true; - updateRegion(selectedRegion, false); + updateGrid(initialData); // Add text for our last updated date const ourDiv = document.getElementById("lastUpdated"); - const lastUpdate = new Date(gridData[0].time).toLocaleDateString(); + const lastUpdate = new Date(initialData.time).toLocaleDateString(); ourDiv!.innerText = `Last Update: ${lastUpdate}`; // Add an event listener to the radio buttons to filter the grid data document .getElementById("benchmarks")! - .addEventListener("change", function (event) { + .addEventListener("change", async function (event) { // Filter the grid data based on the selected region if (event.target.name === "selectedRegion") { - updateRegion(event.target.value); + await updateRegion(event.target.value); } }); } diff --git a/website/src/utils/DataGridDefinitions.ts b/website/src/utils/DataGridDefinitions.ts index 75eb05e..dff47e8 100644 --- a/website/src/utils/DataGridDefinitions.ts +++ b/website/src/utils/DataGridDefinitions.ts @@ -86,9 +86,7 @@ const columnTTFT = { minWidth: 0, maxWidth: 120, valueFormatter: (p: ValueFormatterParam) => - p.value < 1.0 - ? p.value.toFixed(3) * 1000 + "ms" - : p.value.toFixed(2) + "s", + p.value < 1.0 ? p.value.toFixed(3) * 1000 + "ms" : p.value.toFixed(2) + "s", }; // TPS column @@ -115,16 +113,16 @@ const columnTotalTime = { wrapHeaderText: true, // valueFormatter: (p: ValueFormatterParam) => p.value.toFixed(2) + "s", valueFormatter: (p: ValueFormatterParam) => - p.value < 1.0 - ? p.value.toFixed(3) * 1000 + "ms" - : p.value.toFixed(2) + "s", + p.value < 1.0 ? p.value.toFixed(3) * 1000 + "ms" : p.value.toFixed(2) + "s", sort: "asc", }; export const gridOptionsBase = { // alwaysShowVerticalScroll: true, autoSizeStrategy: { type: "fitGridWidth" }, - enableCellTextSelection: true, + enableCellTextSelection: true, + suppressCellFocus: true, + suppressRowHoverHighlight: true, defaultColDef: { suppressMovable: true, filter: true, diff --git a/website/src/utils/FetchData.ts b/website/src/utils/FetchData.ts index 64fb759..7946bdc 100644 --- a/website/src/utils/FetchData.ts +++ b/website/src/utils/FetchData.ts @@ -1,22 +1,39 @@ -export async function fetchLocalJsonFile(url: string) { - try { - const response = await fetch(url, { cache: "no-cache" }); - if (!response.ok) { - throw new Error(`HTTP error! status: ${response.status}`); - } +export async function fetchLatestJsonFile(region: string, medium: string) { + // Today's benchmark might not have run yet, so we'll try the previous benchmark as well. + const today = new Date(); + const yesterday = new Date(); + yesterday.setDate(today.getDate() - 1); + const p1 = fetchJsonFile(region, medium, today); + const p2 = fetchJsonFile(region, medium, yesterday); + const [f1, f2] = await Promise.all([p1, p2]); + return f1 ?? f2; +} + +export async function fetchJsonFile( + region: string, + medium: string, + date: Date, +) { + let dateStr = date.toISOString().slice(0, 10); + const url = `https://storage.googleapis.com/thefastest-data/${region}/${medium}/${dateStr}.json`; + return await fetchWithPostproc(url, postproc); +} - const json = await response.json(); - json.forEach(postproc); - return json; - } catch (error) { - console.error("Error fetching JSON file:", error); +function postproc(item: any) { + if (item.model.includes("/")) { + [item.provider, item.model] = item.model.split("/"); } } -function postproc(obj: any) { - obj.results.forEach((item: any) => { - if (item.model.includes("/")) { - [item.provider, item.model] = item.model.split("/"); - } - }); +export async function fetchWithPostproc( + url: string, + postproc: (item: any) => void, +) { + const response = await fetch(url); + if (!response.ok) { + return null; + } + const json = await response.json(); + json.results.forEach(postproc); + return json; }