FutureEval Branding & Page Updates

front_end/src/app/(futureeval)/futureeval/components/benchmark/futureeval-benchmark-headers.tsx

@@ -0,0 +1,88 @@
+"use client";
+
+import Link from "next/link";
+import { PropsWithChildren } from "react";
+
+import cn from "@/utils/core/cn";
+
+import { FE_COLORS, FE_TYPOGRAPHY } from "../../theme";
+
+type Props = PropsWithChildren<{
+  title?: React.ReactNode;
+  subtitle?: React.ReactNode;
+}>;
+
+/**
+ * FutureEval-specific subsection header with left alignment
+ */
+const FutureEvalSubsectionHeader: React.FC<Props> = ({
+  title,
+  subtitle,
+  children,
+}) => {
+  return (
+    <>
+      {title != null && (
+        <h3
+          className={cn(
+            "m-0 text-left",
+            FE_TYPOGRAPHY.h2,
+            FE_COLORS.textHeading
+          )}
+        >
+          {title}
+        </h3>
+      )}
+
+      {subtitle != null && (
+        <p
+          className={cn(
+            "m-0 mt-3 text-left",
+            FE_TYPOGRAPHY.body,
+            FE_COLORS.textSubheading
+          )}
+        >
+          {subtitle}
+        </p>
+      )}
+      {children}
+    </>
+  );
+};
+
+/**
+ * Forecasting Performance Over Time header (left-aligned)
+ */
+export const FutureEvalForecastingPerformanceHeader: React.FC = () => {
+  return (
+    <FutureEvalSubsectionHeader
+      title="Forecasting Performance Over Time"
+      subtitle="Model scores from the model leaderboard by release date."
+    />
+  );
+};
+
+/**
+ * Pros vs Bots header with left alignment
+ */
+export const FutureEvalProsVsBotsSectionHeader: React.FC = () => {
+  return (
+    <FutureEvalSubsectionHeader
+      title="How much Pros beat Bots"
+      subtitle={
+        <>
+          Metaculus Pro Forecasters have beaten Bots every quarter of our{" "}
+          <Link
+            className={cn(FE_TYPOGRAPHY.link, FE_COLORS.textAccent)}
+            href="/notebooks/38928/futureeval-resources-page/#what-is-the-pro-vs-bots-graph"
+          >
+            AI Benchmarking Tournaments
+          </Link>{" "}
+          so far.
+        </>
+      }
+    />
+  );
+};
+
+export default FutureEvalSubsectionHeader;

front_end/src/app/(futureeval)/futureeval/components/benchmark/futureeval-benchmark-tab.tsx

@@ -0,0 +1,32 @@
+import AIBBenchmarkForecastingPerformance from "@/app/(main)/aib/components/aib/tabs/benchmark/performance-over-time/aib-benchmark-forecasting-performance";
+import { AIBProsVsBotsDiffExample } from "@/app/(main)/aib/components/aib/tabs/benchmark/pros-vs-bots/aib-pros-vs-bots-comparison";
+
+import {
+  FutureEvalForecastingPerformanceHeader,
+  FutureEvalProsVsBotsSectionHeader,
+} from "./futureeval-benchmark-headers";
+import FutureEvalModelBenchmark from "./futureeval-model-benchmark";
+
+const FutureEvalBenchmarkTab: React.FC = () => {
+  return (
+    <>
+      <div>
+        <FutureEvalModelBenchmark />
+      </div>
+
+      {/* Forecasting Performance Over Time */}
+      <div>
+        <FutureEvalForecastingPerformanceHeader />
+        <AIBBenchmarkForecastingPerformance />
+      </div>
+
+      {/* Pros vs Bots */}
+      <div>
+        <FutureEvalProsVsBotsSectionHeader />
+        <AIBProsVsBotsDiffExample />
+      </div>
+    </>
+  );
+};
+
+export default FutureEvalBenchmarkTab;

front_end/src/app/(futureeval)/futureeval/components/benchmark/futureeval-model-bar.tsx

@@ -0,0 +1,161 @@
+"use client";
+
+import { FloatingPortal } from "@floating-ui/react";
+import { faUsers } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { StaticImageData } from "next/image";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+
+import { LightDarkIcon } from "@/app/(main)/aib/components/aib/light-dark-icon";
+import cn from "@/utils/core/cn";
+
+import { FE_COLORS } from "../../theme";
+
+type Props = {
+  heightPct: number;
+  model: {
+    id: string;
+    name: string;
+    score: number;
+    contributionCount: number;
+    iconLight?: StaticImageData | string;
+    iconDark?: StaticImageData | string;
+    isAggregate?: boolean;
+  };
+};
+
+const FutureEvalModelBar: React.FC<Props> = ({ heightPct, model }) => {
+  const router = useRouter();
+  const score = Math.round(model.score * 100) / 100;
+  const [isHovered, setIsHovered] = useState(false);
+  const [mousePos, setMousePos] = useState({ x: 0, y: 0 });
+
+  const handleClick = () => {
+    router.push(
+      `/futureeval/leaderboard?highlight=${encodeURIComponent(model.id)}`
+    );
+  };
+
+  const handleMouseMove = (e: React.MouseEvent) => {
+    setMousePos({ x: e.clientX, y: e.clientY });
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "Enter" || e.key === " " || e.key === "Spacebar") {
+      e.preventDefault();
+      handleClick();
+    }
+  };
+
+  return (
+    <>
+      <div
+        className="flex h-full cursor-pointer flex-col items-center pb-28 pt-5 focus:outline-none focus-visible:ring-2 focus-visible:ring-futureeval-primary-light dark:focus-visible:ring-futureeval-primary-dark sm:pt-6"
+        onClick={handleClick}
+        onKeyDown={handleKeyDown}
+        tabIndex={0}
+        role="button"
+        aria-label={`View ${model.name} details, score: ${score}`}
+      >
+        {/* Bar area - flex-1 takes remaining height, aligns bar at bottom */}
+        <div className="relative flex w-full flex-1 flex-col items-center justify-end">
+          {/* Score label - sits above the bar */}
+          <span className="mb-1 shrink-0 text-[10px] font-medium tabular-nums text-gray-800 dark:text-gray-800-dark sm:text-xs">
+            {score}
+          </span>
+
+          {/* The actual bar with 1px border - hover states and tooltip trigger */}
+          <div
+            className={cn(
+              "relative flex w-full flex-col items-center rounded-t-md border pt-2 transition-all duration-200",
+              model.isAggregate
+                ? cn(
+                    FE_COLORS.barAggregateBorder,
+                    FE_COLORS.barAggregateBg,
+                    FE_COLORS.barAggregateHover
+                  )
+                : "border-gray-800 bg-gray-0 hover:bg-gray-300 dark:border-gray-800-dark dark:bg-gray-0-dark dark:hover:bg-gray-300-dark"
+            )}
+            style={{ height: `${heightPct}%`, minHeight: "48px" }}
+            onMouseEnter={() => setIsHovered(true)}
+            onMouseLeave={() => setIsHovered(false)}
+            onMouseMove={handleMouseMove}
+          >
+            {/* Model icon at the TOP of the bar */}
+            {model.isAggregate ? (
+              <FontAwesomeIcon
+                icon={faUsers}
+                className={cn(
+                  "h-5 w-5 shrink-0 sm:h-5 sm:w-5",
+                  FE_COLORS.barAggregateIcon
+                )}
+              />
+            ) : (
+              (model.iconLight || model.iconDark) && (
+                <LightDarkIcon
+                  alt={model.name}
+                  light={model.iconLight}
+                  dark={model.iconDark}
+                  sizePx={20}
+                  className="shrink-0 sm:!h-6 sm:!w-6"
+                />
+              )
+            )}
+          </div>
+
+          {/* Small baseline at the bottom */}
+          <div className="absolute bottom-0 left-0 right-0 h-px bg-gray-800 dark:bg-gray-800-dark" />
+        </div>
+
+        {/* Model name below bar - rotated 45 degrees with connecting line */}
+        <div className="relative h-0 w-full">
+          {/* Connecting line - centered */}
+          <div className="absolute left-1/2 h-2 w-px -translate-x-1/2 bg-gray-800 dark:bg-gray-800-dark" />
+          {/* Rotated label - starts at end of line */}
+          <span
+            className="absolute left-1/2 top-2 ml-[3px] line-clamp-1 w-[140px] origin-top-left rotate-45 text-xs font-medium text-gray-800 dark:text-gray-800-dark sm:top-3 sm:line-clamp-2 sm:w-[140px] sm:text-sm sm:leading-4"
+            title={model.name}
+          >
+            {model.name}
+          </span>
+        </div>
+      </div>
+
+      {/* Cursor-following tooltip */}
+      {isHovered && (
+        <FloatingPortal>
+          <div
+            className="pointer-events-none z-100 rounded border border-gray-800 bg-gray-0 p-3 dark:border-gray-800-dark dark:bg-gray-0-dark"
+            style={{
+              position: "fixed",
+              left: mousePos.x + 12,
+              top: mousePos.y + 12,
+            }}
+          >
+            <div className="flex flex-col gap-2 text-sm">
+              <div className="flex justify-between gap-4">
+                <span className="text-[10px] text-gray-800 dark:text-gray-800-dark sm:text-xs">
+                  Score:
+                </span>
+                <span className="text-[10px] font-medium tabular-nums text-gray-800 dark:text-gray-800-dark sm:text-xs">
+                  {score}
+                </span>
+              </div>
+              <div className="flex justify-between gap-4">
+                <span className="text-[10px] text-gray-800 dark:text-gray-800-dark sm:text-xs">
+                  Forecasts:
+                </span>
+                <span className="text-[10px] font-medium tabular-nums text-gray-800 dark:text-gray-800-dark sm:text-xs">
+                  {model.contributionCount}
+                </span>
+              </div>
+            </div>
+          </div>
+        </FloatingPortal>
+      )}
+    </>
+  );
+};
+
+export default FutureEvalModelBar;