Skip to content

Commit

Permalink
Read results from GCP directly (#13)
Browse files Browse the repository at this point in the history
* 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
  • Loading branch information
juberti authored May 2, 2024
1 parent e4f917e commit 31f54ee
Show file tree
Hide file tree
Showing 3 changed files with 65 additions and 42 deletions.
44 changes: 26 additions & 18 deletions website/src/components/DataGrid.astro
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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
Expand Down Expand Up @@ -215,13 +214,22 @@ 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;
const isMobile = window.matchMedia("(max-width: 640px)").matches;
const providerFilter = urlParams.get("pf");
const modelFilter = urlParams.get("mf");

gridOptions.columnDefs[0].cellRenderer = function (params) {
return `<a href="${makeProviderUrl(params.value)}" class="hover:text-orange-600" target="_blank">${params.value}</a>`;
};
// remove TTFT and TPS columns on mobile
if (isMobile) {
gridOptions.columnDefs.splice(2, 2);
Expand Down Expand Up @@ -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);
}
});
}
Expand Down
12 changes: 5 additions & 7 deletions website/src/utils/DataGridDefinitions.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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,
Expand Down
51 changes: 34 additions & 17 deletions website/src/utils/FetchData.ts
Original file line number Diff line number Diff line change
@@ -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;
}

0 comments on commit 31f54ee

Please sign in to comment.