Add a badge indicating if the release is latest or stale (#3116)

stanford-crfm · Oct 30, 2024 · 2abee24 · 2abee24
1 parent 7023b47
commit 2abee24
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 15 deletions.
diff --git a/helm-frontend/public/config.js b/helm-frontend/public/config.js
@@ -1,4 +1,4 @@
-window.RELEASE = "v1.0.0";
+window.RELEASE = "v1.9.0";
 window.BENCHMARK_OUTPUT_BASE_URL =
 	"https://storage.googleapis.com/crfm-helm-public/lite/benchmark_output/";
 window.PROJECT_ID = "lite";
diff --git a/helm-frontend/src/components/ReleaseDropdown.tsx b/helm-frontend/src/components/ReleaseDropdown.tsx
@@ -1,3 +1,4 @@
+import { Badge } from "@tremor/react";
 import { useEffect, useState } from "react";
 import getReleaseSummary from "@/services/getReleaseSummary";
 import ReleaseSummary from "@/types/ReleaseSummary";
@@ -40,13 +41,6 @@ function ReleaseDropdown() {
       });
   }, []);
 
-  function getReleases(): string[] {
-    return currProjectMetadata !== undefined &&
-      currProjectMetadata.releases !== undefined
-      ? currProjectMetadata.releases
-      : ["v1.0.0"];
-  }
-
   useEffect(() => {
     const controller = new AbortController();
     async function fetchData() {
@@ -58,20 +52,31 @@ function ReleaseDropdown() {
     return () => controller.abort();
   }, []);
 
-  const releases = getReleases();
+  const releases =
+    currProjectMetadata !== undefined &&
+    currProjectMetadata.releases !== undefined
+      ? currProjectMetadata.releases
+      : ["v1.0.0"];
 
-  if (!summary.release && !summary.suite) {
+  const currentVersion = summary.release || summary.suite || null;
+
+  if (!currentVersion) {
     return null;
   }
 
-  const releaseInfo = `Release ${summary.release || summary.suite} (${
-    summary.date
-  })`;
+  const releaseInfo = `Release ${currentVersion} (${summary.date})`;
 
   if (releases.length <= 1) {
     return <div>{releaseInfo}</div>;
   }
 
+  const badge =
+    releases.length > 0 && currentVersion != releases[0] ? (
+      <Badge color="yellow">stale</Badge>
+    ) : (
+      <Badge color="blue">latest</Badge>
+    );
+
   return (
     <div className="dropdown">
       <div
@@ -81,7 +86,7 @@ function ReleaseDropdown() {
         aria-haspopup="true"
         aria-controls="menu"
       >
-        {releaseInfo}&nbsp;
+        {releaseInfo}&nbsp;{badge}&nbsp;
         <ChevronDownIcon
           fill="black"
           color="black"
@@ -90,7 +95,7 @@ function ReleaseDropdown() {
       </div>
       <ul
         tabIndex={0}
-        className="dropdown-content z-[1] menu p-1 shadow-lg bg-base-100 rounded-box w-max text-base"
+        className="dropdown-content z-[50] menu p-1 shadow-lg bg-base-100 rounded-box w-max text-base"
         role="menu"
       >
         {releases.map((release) => (