avi_tag_selector (#1)

- Add scientific tag filtering and weekly/daily heatmap view toggle (e603004f8f97c2ac9134997c3980313fb37ff987)
- Fix weekly heatmap to show proper weekly aggregation (f6efde325fa734590e904cb0eb1a0cc5b3844808)
- Update homepage description to focus on AI for Science (ee44922b7ade97278d8c45a2c12782f770664693)

package.json

@@ -19,7 +19,7 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "lucide-react": "^0.427.0",
-    "next": "14.2.5",
+    "next": "^14.2.33",
     "react": "^18",
     "react-activity-calendar": "^2.2.11",
     "react-dom": "^18",
@@ -27,11 +27,11 @@
     "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
-    "typescript": "^5",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "postcss": "^8",
-    "tailwindcss": "^3.4.1"
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5"
   }
 }

src/components/ClientNavbar.tsx

@@ -0,0 +1,20 @@
+'use client';
+
+import React from "react";
+import UserSearchDialog from "./UserSearchDialog";
+import ThemeToggle from "./ThemeToggle";
+
+const Navbar: React.FC = () => {
+  return (
+    <nav className="w-full mt-4">
+      <div className="max-w-6xl mx-auto px-4 py-3">
+        <div className="flex items-center justify-end gap-3">
+          <ThemeToggle />
+          <UserSearchDialog />
+        </div>
+      </div>
+    </nav>
+  );
+};
+
+export default Navbar;

src/components/Heatmap.tsx

@@ -2,6 +2,10 @@ import React from "react";
 import ActivityCalendar from "react-activity-calendar";
 import { Tooltip, Avatar } from "@mui/material";
 import Link from "next/link";
+import { aggregateToWeeklyData } from "../utils/weeklyCalendar";
+import WeeklyHeatmap from "./WeeklyHeatmap";
+
+type ViewMode = 'daily' | 'weekly';
 
 type HeatmapProps = {
   data: Array<{ date: string; count: number; level: number }>;
@@ -11,9 +15,22 @@ type HeatmapProps = {
   avatarUrl: string;
   authorId: string;
   showHeader?: boolean;
+  viewMode: ViewMode;
 };
 
-const Heatmap: React.FC<HeatmapProps> = ({ data, color, providerName, fullName, avatarUrl, authorId, showHeader = true }) => {
+const Heatmap: React.FC<HeatmapProps> = ({ 
+  data, 
+  color, 
+  providerName, 
+  fullName, 
+  avatarUrl, 
+  authorId, 
+  showHeader = true,
+  viewMode 
+}) => {
+  // Process data based on view mode
+  const processedData = viewMode === 'weekly' ? aggregateToWeeklyData(data) : data;
+  
   return (
     <div className="flex flex-col items-center w-full mx-auto">
       {showHeader && (
@@ -36,23 +53,28 @@ const Heatmap: React.FC<HeatmapProps> = ({ data, color, providerName, fullName,
         </div>
       )}
       <div className="w-full overflow-x-auto flex justify-center">
-        <ActivityCalendar
-          data={data}
-          theme={{
-            dark: ["#161b22", color],
-            light: ["#e0e0e0", color],
-          }}
-          blockSize={11}
-          hideTotalCount
-          renderBlock={(block, activity) => (
-            <Tooltip
-              title={`${activity.count} new repos on ${activity.date}`}
-              arrow
-            >
-              {block}
-            </Tooltip>
-          )}
-        />
+        {viewMode === 'weekly' ? (
+          <WeeklyHeatmap data={processedData} color={color} />
+        ) : (
+          <ActivityCalendar
+            data={processedData}
+            theme={{
+              dark: ["#161b22", color],
+              light: ["#e0e0e0", color],
+            }}
+            blockSize={11}
+            blockMargin={2}
+            hideTotalCount
+            renderBlock={(block, activity) => (
+              <Tooltip
+                title={`${activity.count} new repos on ${activity.date}`}
+                arrow
+              >
+                {block}
+              </Tooltip>
+            )}
+          />
+        )}
       </div>
     </div>
   );

src/components/HeatmapGrid.tsx

@@ -1,7 +1,10 @@
-import React from "react";
+import React, { useState } from "react";
 import { ProviderInfo, CalendarData } from "../types/heatmap";
 import OrganizationCard from "./OrganizationCard";
 import ProviderHeatmapSkeleton from "./ProviderHeatmapSkeleton";
+import ViewToggle from "./ViewToggle";
+
+type ViewMode = 'daily' | 'weekly';
 
 interface HeatmapGridProps {
   sortedProviders: ProviderInfo[];
@@ -10,6 +13,8 @@ interface HeatmapGridProps {
 }
 
 const HeatmapGrid: React.FC<HeatmapGridProps> = ({ sortedProviders, calendarData, isLoading }) => {
+  const [viewMode, setViewMode] = useState<ViewMode>('weekly');
+
   if (isLoading) {
     return (
       <div className="flex flex-col gap-8 max-w-4xl mx-auto mb-16">
@@ -22,12 +27,22 @@ const HeatmapGrid: React.FC<HeatmapGridProps> = ({ sortedProviders, calendarData
 
   return (
     <div className="flex flex-col gap-8 max-w-4xl mx-auto mb-16">
+      {/* View Toggle */}
+      <div className="flex justify-center">
+        <ViewToggle
+          viewMode={viewMode}
+          onToggle={setViewMode}
+        />
+      </div>
+
+      {/* Heatmap Cards */}
       {sortedProviders.map((provider, index) => (
         <OrganizationCard 
           key={provider.fullName || provider.authors[0]}
           provider={provider} 
           calendarData={calendarData}
           rank={index + 1}
+          viewMode={viewMode}
         />
       ))}
     </div>

src/components/Navbar.tsx

@@ -1,11 +1,21 @@
 import React from "react";
 import UserSearchDialog from "./UserSearchDialog";
+import dynamic from "next/dynamic";
+
+// Dynamically import ThemeToggle to avoid SSR issues
+const ThemeToggle = dynamic(() => import("./ThemeToggle"), {
+  ssr: false,
+  loading: () => (
+    <div className="h-10 w-10 rounded-lg border border-border bg-background animate-pulse"></div>
+  ),
+});
 
 const Navbar: React.FC = () => {
   return (
     <nav className="w-full mt-4">
       <div className="max-w-6xl mx-auto px-4 py-3">
-        <div className="flex items-center justify-end">
+        <div className="flex items-center justify-end gap-3">
+          <ThemeToggle />
           <UserSearchDialog />
         </div>
       </div>

src/components/OrganizationCard.tsx

@@ -3,13 +3,16 @@ import { ProviderInfo, CalendarData } from "../types/heatmap";
 import Heatmap from "./Heatmap";
 import OrganizationHeader from "./OrganizationHeader";
 
+type ViewMode = 'daily' | 'weekly';
+
 interface OrganizationCardProps {
   provider: ProviderInfo;
   calendarData: CalendarData;
   rank: number;
+  viewMode: ViewMode;
 }
 
-const OrganizationCard = React.memo(({ provider, calendarData, rank }: OrganizationCardProps) => {
+const OrganizationCard = React.memo(({ provider, calendarData, rank, viewMode }: OrganizationCardProps) => {
   const providerName = provider.fullName || provider.authors[0];
   const calendarKey = provider.authors[0];
   const totalCount = calendarData[calendarKey]?.reduce((sum, day) => sum + day.count, 0) || 0;
@@ -32,6 +35,7 @@ const OrganizationCard = React.memo(({ provider, calendarData, rank }: Organizat
           avatarUrl={provider.avatarUrl ?? ''}
           authorId={calendarKey}
           showHeader={false}
+          viewMode={viewMode}
         />
       </div>
 

src/components/TagSelector.tsx

@@ -0,0 +1,61 @@
+import React from "react";
+import { cn } from "../lib/utils";
+
+export interface Tag {
+  id: string;
+  label: string;
+  color?: string;
+}
+
+interface TagSelectorProps {
+  tags: Tag[];
+  selectedTags: string[];
+  onTagToggle: (tagId: string) => void;
+  className?: string;
+}
+
+const TagSelector: React.FC<TagSelectorProps> = ({
+  tags,
+  selectedTags,
+  onTagToggle,
+  className,
+}) => {
+  return (
+    <div className={cn("flex flex-col items-center gap-4", className)}>
+      <div className="flex items-center gap-3">
+        <h3 className="text-lg font-medium text-foreground">Select Tags</h3>
+        <span className="bg-blue-500 text-white text-sm px-2 py-1 rounded-full min-w-[24px] h-6 flex items-center justify-center">
+          {selectedTags.length}
+        </span>
+      </div>
+      
+      <div className="flex flex-wrap gap-3 justify-center max-w-4xl">
+        {tags.map((tag) => {
+          const isSelected = selectedTags.includes(tag.id);
+          return (
+            <button
+              key={tag.id}
+              onClick={() => onTagToggle(tag.id)}
+              className={cn(
+                "px-4 py-2 rounded-full border-2 transition-all duration-200 font-medium",
+                "hover:scale-105 active:scale-95",
+                isSelected
+                  ? "bg-blue-500 text-white border-blue-500 shadow-lg"
+                  : cn(
+                      "border-border hover:border-accent-foreground/20",
+                      "bg-card text-card-foreground hover:bg-accent hover:text-accent-foreground",
+                      "dark:bg-card dark:text-card-foreground dark:border-border",
+                      "light:bg-white light:text-gray-700 light:border-gray-300 light:hover:border-gray-400"
+                    )
+              )}
+            >
+              {tag.label}
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+export default TagSelector;

src/components/ThemeToggle.tsx

@@ -0,0 +1,82 @@
+'use client';
+
+import React, { useEffect, useState } from 'react';
+import { useTheme } from '../contexts/ThemeContext';
+import { cn } from '../lib/utils';
+
+interface ThemeToggleProps {
+  className?: string;
+}
+
+const ThemeToggle: React.FC<ThemeToggleProps> = ({ className }) => {
+  const [mounted, setMounted] = useState(false);
+  const { theme, toggleTheme } = useTheme();
+
+  // Only render after hydration to prevent SSR issues
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) {
+    // Return a placeholder that matches the final component size
+    return (
+      <div className={cn(
+        "relative inline-flex h-10 w-10 items-center justify-center rounded-lg border border-border bg-background",
+        className
+      )}>
+        <div className="h-5 w-5 animate-pulse bg-muted rounded"></div>
+      </div>
+    );
+  }
+
+  return (
+    <button
+      onClick={toggleTheme}
+      className={cn(
+        "relative inline-flex h-10 w-10 items-center justify-center rounded-lg border border-border bg-background hover:bg-accent hover:text-accent-foreground transition-colors",
+        className
+      )}
+      aria-label={`Switch to ${theme === 'light' ? 'dark' : 'light'} mode`}
+    >
+      <div className="relative h-5 w-5">
+        {/* Sun Icon */}
+        <svg
+          className={cn(
+            "absolute inset-0 h-5 w-5 transition-all",
+            theme === 'dark' ? "rotate-90 scale-0" : "rotate-0 scale-100"
+          )}
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+          strokeWidth={2}
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"
+          />
+        </svg>
+        
+        {/* Moon Icon */}
+        <svg
+          className={cn(
+            "absolute inset-0 h-5 w-5 transition-all",
+            theme === 'dark' ? "rotate-0 scale-100" : "-rotate-90 scale-0"
+          )}
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+          strokeWidth={2}
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"
+          />
+        </svg>
+      </div>
+    </button>
+  );
+};
+
+export default ThemeToggle;

src/components/ViewToggle.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+import { cn } from "../lib/utils";
+
+type ViewMode = 'daily' | 'weekly';
+
+interface ViewToggleProps {
+  viewMode: ViewMode;
+  onToggle: (mode: ViewMode) => void;
+  className?: string;
+}
+
+const ViewToggle: React.FC<ViewToggleProps> = ({ viewMode, onToggle, className }) => {
+  return (
+    <div className={cn("flex items-center gap-1 bg-muted rounded-lg p-1", className)}>
+      <button
+        onClick={() => onToggle('weekly')}
+        className={cn(
+          "px-3 py-1.5 text-sm font-medium rounded-md transition-all duration-200",
+          viewMode === 'weekly'
+            ? "bg-background text-foreground shadow-sm"
+            : "text-muted-foreground hover:text-foreground"
+        )}
+      >
+        Weekly
+      </button>
+      <button
+        onClick={() => onToggle('daily')}
+        className={cn(
+          "px-3 py-1.5 text-sm font-medium rounded-md transition-all duration-200",
+          viewMode === 'daily'
+            ? "bg-background text-foreground shadow-sm"
+            : "text-muted-foreground hover:text-foreground"
+        )}
+      >
+        Daily
+      </button>
+    </div>
+  );
+};
+
+export default ViewToggle;

src/components/WeeklyHeatmap.tsx

@@ -0,0 +1,96 @@
+import React from "react";
+import { Tooltip } from "@mui/material";
+import { getWeekDateRange } from "../utils/weeklyCalendar";
+
+type WeeklyActivity = {
+  date: string;
+  count: number;
+  level: number;
+};
+
+type WeeklyHeatmapProps = {
+  data: WeeklyActivity[];
+  color: string;
+};
+
+const WeeklyHeatmap: React.FC<WeeklyHeatmapProps> = ({ data, color }) => {
+  // Group data by month and year
+  const groupedData = data.reduce((acc, activity) => {
+    const date = new Date(activity.date);
+    const yearMonth = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}`;
+    
+    if (!acc[yearMonth]) {
+      acc[yearMonth] = [];
+    }
+    acc[yearMonth].push(activity);
+    return acc;
+  }, {} as Record<string, WeeklyActivity[]>);
+
+  // Get color intensity based on level
+  const getColorIntensity = (level: number) => {
+    if (level === 0) return '#161b22'; // Dark background for no activity
+    const intensities = ['#0e4429', '#006d32', '#26a641', '#39d353'];
+    return intensities[Math.min(level - 1, 3)] || color;
+  };
+
+  // Get month names
+  const getMonthName = (yearMonth: string) => {
+    const [year, month] = yearMonth.split('-');
+    const date = new Date(parseInt(year), parseInt(month) - 1);
+    return date.toLocaleDateString('en-US', { month: 'short', year: 'numeric' });
+  };
+
+  const sortedMonths = Object.keys(groupedData).sort();
+
+  return (
+    <div className="w-full">
+      <div className="flex flex-wrap gap-4 justify-center">
+        {sortedMonths.map((yearMonth) => {
+          const monthData = groupedData[yearMonth];
+          return (
+            <div key={yearMonth} className="flex flex-col items-center">
+              <div className="text-xs mb-2 text-gray-600 dark:text-gray-400">
+                {getMonthName(yearMonth)}
+              </div>
+              <div className="flex gap-1">
+                {monthData.map((activity, index) => (
+                  <Tooltip
+                    key={`${yearMonth}-${index}`}
+                    title={`${activity.count} new repos in week of ${getWeekDateRange(activity.date)}`}
+                    arrow
+                  >
+                    <div
+                      className="w-3 h-3 rounded-sm cursor-pointer transition-opacity hover:opacity-80"
+                      style={{
+                        backgroundColor: getColorIntensity(activity.level),
+                      }}
+                    />
+                  </Tooltip>
+                ))}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+      
+      {/* Legend */}
+      <div className="flex items-center justify-center mt-4 text-xs text-gray-600 dark:text-gray-400">
+        <span className="mr-2">Less</span>
+        <div className="flex gap-1">
+          {[0, 1, 2, 3, 4].map((level) => (
+            <div
+              key={level}
+              className="w-2.5 h-2.5 rounded-sm"
+              style={{
+                backgroundColor: getColorIntensity(level),
+              }}
+            />
+          ))}
+        </div>
+        <span className="ml-2">More</span>
+      </div>
+    </div>
+  );
+};
+
+export default WeeklyHeatmap;

src/constants/organizations.ts

@@ -1,18 +1,87 @@
 import { ProviderInfo } from "../types/heatmap";
 
+// Scientific area tags
+export const SCIENTIFIC_TAGS = [
+  { id: "antibody", label: "antibody" },
+  { id: "hormones", label: "hormones" },
+  { id: "materials-science", label: "materials-science" },
+  { id: "drug-discovery", label: "drug-discovery" },
+  { id: "biology", label: "biology" },
+  { id: "medicine", label: "medicine" },
+  { id: "physics", label: "physics" },
+  { id: "data", label: "data" },
+  { id: "education", label: "education" },
+];
+
 export const ORGANIZATIONS: ProviderInfo[] = [
-  { color: "#ff7000", authors: ["LeMaterial", "Entalpic"] },
-  { color: "#1877F2", authors: ["arcinstitute"]},
-  { color: "#10A37F", authors: ["SandboxAQ"] },
-  { color: "#cc785c", authors: ["Anthropic"] },
-  { color: "#DB4437", authors: ["polymathic-ai"] },
-  { color: "#F45098", authors: ["NASA-AIML", "nasa-ibm-ai4science", "nasa-impact"] },
-  { color: "#FEB800", authors: ["facebook"] },
-  { color: "#76B900", authors: ["nvidia"] },
-  { color: "#0088cc", authors: ["Merck"] },
-  { color: "#0088cc", authors: ["wanglab"] },
-  { color: "#0088cc", authors: ["jablonkagroup"] },
-  { color: "#4C6EE6", authors: ["Orbital-Materials"] },
-  { color: "#4C6EE6", authors: ["Xaira-Therapeutics"] },
-  { color: "#FEC912", authors: ["hugging-science"] },
+  { 
+    color: "#ff7000", 
+    authors: ["LeMaterial", "Entalpic"],
+    tags: ["materials-science", "drug-discovery"]
+  },
+  { 
+    color: "#1877F2", 
+    authors: ["arcinstitute"],
+    tags: ["biology", "medicine", "drug-discovery"]
+  },
+  { 
+    color: "#10A37F", 
+    authors: ["SandboxAQ"],
+    tags: ["physics", "materials-science", "drug-discovery"]
+  },
+  { 
+    color: "#cc785c", 
+    authors: ["Anthropic"],
+    tags: ["data", "education"]
+  },
+  { 
+    color: "#DB4437", 
+    authors: ["polymathic-ai"],
+    tags: ["physics", "data"]
+  },
+  { 
+    color: "#F45098", 
+    authors: ["NASA-AIML", "nasa-ibm-ai4science", "nasa-impact"],
+    tags: ["physics", "data", "education"]
+  },
+  { 
+    color: "#FEB800", 
+    authors: ["facebook"],
+    tags: ["data", "education"]
+  },
+  { 
+    color: "#76B900", 
+    authors: ["nvidia"],
+    tags: ["data", "physics", "materials-science"]
+  },
+  { 
+    color: "#0088cc", 
+    authors: ["Merck"],
+    tags: ["drug-discovery", "medicine", "biology"]
+  },
+  { 
+    color: "#0088cc", 
+    authors: ["wanglab"],
+    tags: ["biology", "medicine"]
+  },
+  { 
+    color: "#0088cc", 
+    authors: ["jablonkagroup"],
+    tags: ["materials-science", "drug-discovery"]
+  },
+  { 
+    color: "#4C6EE6", 
+    authors: ["Orbital-Materials"],
+    tags: ["materials-science", "physics"]
+  },
+  { 
+    color: "#4C6EE6", 
+    authors: ["Xaira-Therapeutics"],
+    tags: ["drug-discovery", "medicine", "biology", "antibody"]
+  },
+  { 
+    color: "#FEC912", 
+    authors: ["hugging-science"],
+    tags: ["data", "education", "biology", "physics"]
+  },
 ];

src/contexts/ThemeContext.tsx

@@ -0,0 +1,70 @@
+'use client';
+
+import React, { createContext, useContext, useEffect, useState } from 'react';
+
+type Theme = 'light' | 'dark';
+
+interface ThemeContextType {
+  theme: Theme;
+  toggleTheme: () => void;
+}
+
+const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
+
+export const useTheme = () => {
+  const context = useContext(ThemeContext);
+  if (!context) {
+    throw new Error('useTheme must be used within a ThemeProvider');
+  }
+  return context;
+};
+
+interface ThemeProviderProps {
+  children: React.ReactNode;
+}
+
+export const ThemeProvider: React.FC<ThemeProviderProps> = ({ children }) => {
+  const [theme, setTheme] = useState<Theme>('dark');
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+    // Get theme from localStorage or system preference
+    const savedTheme = localStorage.getItem('theme') as Theme | null;
+    const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+    const initialTheme = savedTheme || systemTheme;
+    
+    setTheme(initialTheme);
+  }, []);
+
+  useEffect(() => {
+    if (!mounted) return;
+    
+    // Apply theme to document
+    const root = document.documentElement;
+    
+    if (theme === 'dark') {
+      root.classList.add('dark');
+    } else {
+      root.classList.remove('dark');
+    }
+    
+    // Save to localStorage
+    localStorage.setItem('theme', theme);
+  }, [theme, mounted]);
+
+  const toggleTheme = () => {
+    setTheme(prev => prev === 'light' ? 'dark' : 'light');
+  };
+
+  // Prevent hydration mismatch by not rendering until mounted
+  if (!mounted) {
+    return <>{children}</>;
+  }
+
+  return (
+    <ThemeContext.Provider value={{ theme, toggleTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+};

src/pages/_app.tsx

@@ -1,6 +1,11 @@
 import "@/styles/globals.css";
 import type { AppProps } from "next/app";
+import { ThemeProvider } from "../contexts/ThemeContext";
 
 export default function App({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />;
+  return (
+    <ThemeProvider>
+      <Component {...pageProps} />
+    </ThemeProvider>
+  );
 }

src/pages/index.tsx

@@ -1,10 +1,11 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useMemo } from "react";
 import { ProviderInfo, ModelData, CalendarData } from "../types/heatmap";
 import OrganizationButton from "../components/OrganizationButton";
 import HeatmapGrid from "../components/HeatmapGrid";
 import Navbar from "../components/Navbar";
+import TagSelector from "../components/TagSelector";
 import { getProviders } from "../utils/ranking";
-import { ORGANIZATIONS } from "../constants/organizations";
+import { ORGANIZATIONS, SCIENTIFIC_TAGS } from "../constants/organizations";
 
 interface PageProps {
   calendarData: CalendarData;
@@ -16,6 +17,7 @@ function Page({
   providers,
 }: PageProps) {
   const [isLoading, setIsLoading] = useState(true);
+  const [selectedTags, setSelectedTags] = useState<string[]>([]);
 
   useEffect(() => {
     if (calendarData && Object.keys(calendarData).length > 0) {
@@ -23,6 +25,27 @@ function Page({
     }
   }, [calendarData]);
 
+  // Filter providers based on selected tags
+  const filteredProviders = useMemo(() => {
+    if (selectedTags.length === 0) {
+      return providers;
+    }
+    
+    return providers.filter(provider => {
+      if (!provider.tags) return false;
+      return selectedTags.some(tag => provider.tags!.includes(tag));
+    });
+  }, [providers, selectedTags]);
+
+  const handleTagToggle = (tagId: string) => {
+    setSelectedTags(prev => {
+      if (prev.includes(tagId)) {
+        return prev.filter(t => t !== tagId);
+      } else {
+        return [...prev, tagId];
+      }
+    });
+  };
 
   return (
     <div className="w-full">
@@ -41,14 +64,23 @@ function Page({
             </span>
           </h1>
           <p className="text-base sm:text-lg lg:text-xl text-muted-foreground max-w-2xl mx-auto leading-relaxed px-4">
-            Open models, datasets, and apps from influential labs in the last year.
+            Open models, datasets, and apps from orgs contributing to AI4Science in the last year.
           </p>
         </div>
 
+        {/* Tag Selector */}
+        <div className="mb-16">
+          <TagSelector
+            tags={SCIENTIFIC_TAGS}
+            selectedTags={selectedTags}
+            onTagToggle={handleTagToggle}
+          />
+        </div>
+
         <div className="mb-16 mx-auto">
           <div className="overflow-x-auto scrollbar-hide">
             <div className="flex gap-6 px-4 py-2 min-w-max justify-center">
-              {providers.map((provider, index) => (
+              {filteredProviders.map((provider, index) => (
                 <OrganizationButton
                   key={provider.fullName || provider.authors[0]}
                   provider={provider}
@@ -61,7 +93,7 @@ function Page({
         </div>
              
         <HeatmapGrid 
-          sortedProviders={providers}
+          sortedProviders={filteredProviders}
           calendarData={calendarData}
           isLoading={isLoading}
         />

src/styles/globals.css

@@ -33,35 +33,33 @@
     --background-rgb: 255, 255, 255;
   }
 
-  @media (prefers-color-scheme: dark) {
-    :root {
-      --foreground-rgb: 255, 255, 255;
-      --background-rgb: 0, 0, 0;
-      --background: 222.2 84% 4.9%;
-      --foreground: 210 40% 98%;
-      --card: 222.2 84% 4.9%;
-      --card-foreground: 210 40% 98%;
-      --popover: 222.2 84% 4.9%;
-      --popover-foreground: 210 40% 98%;
-      --primary: 210 40% 98%;
-      --primary-foreground: 222.2 47.4% 11.2%;
-      --secondary: 217.2 32.6% 17.5%;
-      --secondary-foreground: 210 40% 98%;
-      --muted: 217.2 32.6% 17.5%;
-      --muted-foreground: 215 20.2% 65.1%;
-      --accent: 217.2 32.6% 17.5%;
-      --accent-foreground: 210 40% 98%;
-      --destructive: 0 62.8% 30.6%;
-      --destructive-foreground: 210 40% 98%;
-      --border: 217.2 32.6% 17.5%;
-      --input: 217.2 32.6% 17.5%;
-      --ring: 212.7 26.8% 83.9%;
-      --chart-1: 220 70% 50%;
-      --chart-2: 160 60% 45%;
-      --chart-3: 30 80% 55%;
-      --chart-4: 280 65% 60%;
-      --chart-5: 340 75% 55%;
-    }
+  .dark {
+    --foreground-rgb: 255, 255, 255;
+    --background-rgb: 0, 0, 0;
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 212.7 26.8% 83.9%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
   }
 }
 

src/types/heatmap.ts

@@ -1,6 +1,7 @@
 export interface ProviderInfo {
   color: string;
   authors: string[];
+  tags?: string[];
   fullName?: string;
   avatarUrl?: string | null;
   isVerified?: boolean;

src/utils/weeklyCalendar.ts

@@ -0,0 +1,56 @@
+import { Activity } from "../types/heatmap";
+
+export const aggregateToWeeklyData = (dailyData: Activity[]): Activity[] => {
+  if (!dailyData || dailyData.length === 0) return [];
+
+  // Create a map to group activities by week
+  const weeklyMap = new Map<string, { count: number; level: number; dates: string[] }>();
+
+  for (const dayActivity of dailyData) {
+    const date = new Date(dayActivity.date);
+    // Get the Sunday of this week (week start)
+    const weekStart = new Date(date);
+    weekStart.setDate(date.getDate() - date.getDay());
+    const weekKey = weekStart.toISOString().split('T')[0];
+
+    if (!weeklyMap.has(weekKey)) {
+      weeklyMap.set(weekKey, { count: 0, level: 0, dates: [] });
+    }
+
+    const weekData = weeklyMap.get(weekKey)!;
+    weekData.count += dayActivity.count;
+    weekData.level = Math.max(weekData.level, dayActivity.level);
+    weekData.dates.push(dayActivity.date);
+  }
+
+  // Convert to true weekly data - one entry per week, not per day
+  const weeklyData: Activity[] = [];
+  
+  weeklyMap.forEach((weekInfo, weekStartDate) => {
+    weeklyData.push({
+      date: weekStartDate, // Use the week start date
+      count: weekInfo.count,
+      level: weekInfo.level,
+    });
+  });
+
+  // Sort by date to ensure proper order
+  weeklyData.sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime());
+
+  return weeklyData;
+};
+
+export const getWeekDateRange = (weekStartDate: string): string => {
+  const startDate = new Date(weekStartDate);
+  const endDate = new Date(startDate);
+  endDate.setDate(startDate.getDate() + 6);
+
+  const formatDate = (date: Date) => {
+    return date.toLocaleDateString('en-US', { 
+      month: 'short', 
+      day: 'numeric' 
+    });
+  };
+
+  return `${formatDate(startDate)} - ${formatDate(endDate)}`;
+};