adding filtering by recency

src/components/SortToggle.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+
+export type SortMethod = "activity" | "recent";
+
+interface SortToggleProps {
+  sortMethod: SortMethod;
+  onToggle: (method: SortMethod) => void;
+}
+
+export default function SortToggle({ sortMethod, onToggle }: SortToggleProps) {
+  return (
+    <div className="flex items-center justify-center gap-2 mb-8">
+      <span className="text-sm text-muted-foreground">Sort by:</span>
+      <div className="inline-flex rounded-lg border border-border bg-muted p-1">
+        <button
+          onClick={() => onToggle("activity")}
+          className={`px-4 py-2 text-sm font-medium rounded-md transition-all duration-200 ${
+            sortMethod === "activity"
+              ? "bg-background text-foreground shadow-sm"
+              : "text-muted-foreground hover:text-foreground"
+          }`}
+        >
+          Most Active
+        </button>
+        <button
+          onClick={() => onToggle("recent")}
+          className={`px-4 py-2 text-sm font-medium rounded-md transition-all duration-200 ${
+            sortMethod === "recent"
+              ? "bg-background text-foreground shadow-sm"
+              : "text-muted-foreground hover:text-foreground"
+          }`}
+        >
+          Most Recent
+        </button>
+      </div>
+    </div>
+  );
+}

src/pages/index.tsx

@@ -4,7 +4,8 @@ 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 SortToggle, { SortMethod } from "../components/SortToggle";
+import { getProviders, sortProvidersByActivity, sortProvidersByRecentRelease } from "../utils/ranking";
 import { ORGANIZATIONS, SCIENTIFIC_TAGS } from "../constants/organizations";
 
 interface PageProps {
@@ -19,6 +20,7 @@ function Page({
   const [isLoading, setIsLoading] = useState(true);
   const [selectedTags, setSelectedTags] = useState<string[]>([]);
   const [showAllOrgs, setShowAllOrgs] = useState(false);
+  const [sortMethod, setSortMethod] = useState<SortMethod>("activity");
 
   useEffect(() => {
     if (calendarData && Object.keys(calendarData).length > 0) {
@@ -31,13 +33,23 @@ function Page({
     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]);
 
+  // Sort providers based on selected sort method
+  const sortedProviders = useMemo(() => {
+    const providersCopy = [...filteredProviders];
+    if (sortMethod === "activity") {
+      return sortProvidersByActivity(providersCopy, calendarData);
+    } else {
+      return sortProvidersByRecentRelease(providersCopy, calendarData);
+    }
+  }, [filteredProviders, sortMethod, calendarData]);
+
   const handleTagToggle = (tagId: string) => {
     setSelectedTags(prev => {
       if (prev.includes(tagId)) {
@@ -78,6 +90,12 @@ function Page({
           />
         </div>
 
+        {/* Sort Toggle */}
+        <SortToggle
+          sortMethod={sortMethod}
+          onToggle={setSortMethod}
+        />
+
         <div className="mb-16 mx-auto max-w-full">
           {/* Organization Buttons with Horizontal Scroll */}
           <div className="relative px-4">
@@ -90,7 +108,7 @@ function Page({
               }}
             >
               <div className="flex gap-6 py-2 w-max mx-auto">
-                {(showAllOrgs ? filteredProviders : filteredProviders.slice(0, 10)).map((provider, index) => (
+                {(showAllOrgs ? sortedProviders : sortedProviders.slice(0, 10)).map((provider, index) => (
                   <OrganizationButton
                     key={provider.fullName || provider.authors[0]}
                     provider={provider}
@@ -105,22 +123,22 @@ function Page({
             <div className="absolute left-0 top-0 bottom-4 w-8 bg-gradient-to-r from-background via-background/80 to-transparent pointer-events-none" />
             <div className="absolute right-0 top-0 bottom-4 w-8 bg-gradient-to-l from-background via-background/80 to-transparent pointer-events-none" />
           </div>
-          
+
           {/* Show More/Less Button */}
-          {filteredProviders.length > 10 && (
+          {sortedProviders.length > 10 && (
             <div className="flex justify-center mt-4">
               <button
                 onClick={() => setShowAllOrgs(!showAllOrgs)}
                 className="px-6 py-2 text-sm font-medium text-foreground bg-muted hover:bg-muted/80 rounded-full transition-colors duration-200 border border-border"
               >
-                {showAllOrgs ? `Show Less (Top 10)` : `Show All ${filteredProviders.length} Organizations`}
+                {showAllOrgs ? `Show Less (Top 10)` : `Show All ${sortedProviders.length} Organizations`}
               </button>
             </div>
           )}
         </div>
-             
-        <HeatmapGrid 
-          sortedProviders={showAllOrgs ? filteredProviders : filteredProviders.slice(0, 10)}
+
+        <HeatmapGrid
+          sortedProviders={showAllOrgs ? sortedProviders : sortedProviders.slice(0, 10)}
           calendarData={calendarData}
           isLoading={isLoading}
         />

src/types/heatmap.ts

@@ -11,6 +11,7 @@ export interface ProviderInfo {
   numDatasets?: number;
   numFollowers?: number;
   numUsers?: number;
+  mostRecentRelease?: string | null;
   authorsData?: {
     author: string;
     fullName: string;

src/utils/ranking.ts

@@ -37,34 +37,78 @@ export const extractUniqueAuthors = (providers: ProviderInfo[]): string[] => {
 };
 
 export const sortProvidersByActivity = (
-  providers: ProviderInfo[], 
+  providers: ProviderInfo[],
   calendarData: CalendarData
 ): ProviderInfo[] => {
   return providers.sort((providerA, providerB) => {
     const providerAData = calendarData[providerA.authors[0]] || [];
     const providerBData = calendarData[providerB.authors[0]] || [];
-    
+
     const providerAActivityCount = providerAData.reduce(
-      (totalCount, day) => totalCount + day.count, 
+      (totalCount, day) => totalCount + day.count,
       0
     );
     const providerBActivityCount = providerBData.reduce(
-      (totalCount, day) => totalCount + day.count, 
+      (totalCount, day) => totalCount + day.count,
       0
     );
-    
+
     return providerBActivityCount - providerAActivityCount;
   });
 };
 
+export const sortProvidersByRecentRelease = (
+  providers: ProviderInfo[],
+  calendarData: CalendarData
+): ProviderInfo[] => {
+  return providers.sort((providerA, providerB) => {
+    const providerAData = calendarData[providerA.authors[0]] || [];
+    const providerBData = calendarData[providerB.authors[0]] || [];
+
+    const getLatestDate = (data: typeof providerAData) => {
+      if (data.length === 0) return null;
+      const datesWithActivity = data.filter(day => day.count > 0);
+      if (datesWithActivity.length === 0) return null;
+      return datesWithActivity.reduce((latest, day) => {
+        return new Date(day.date) > new Date(latest.date) ? day : latest;
+      }).date;
+    };
+
+    const latestA = getLatestDate(providerAData);
+    const latestB = getLatestDate(providerBData);
+
+    if (!latestA && !latestB) return 0;
+    if (!latestA) return 1;
+    if (!latestB) return -1;
+
+    return new Date(latestB).getTime() - new Date(latestA).getTime();
+  });
+};
+
 export const getProviders = async (providers: ProviderInfo[]) => {
   const uniqueAuthors = extractUniqueAuthors(providers);
-  
+
   const authorModelsData: ModelData[] = await fetchAllAuthorsData(uniqueAuthors);
   const providersWithMetadata = await fetchAllProvidersData(providers);
 
   const calendarData = generateCalendarData(authorModelsData, providersWithMetadata);
-  const sortedProvidersByActivity = sortProvidersByActivity(providersWithMetadata, calendarData);
+
+  // Calculate and store most recent release date for each provider
+  const providersWithReleaseDate = providersWithMetadata.map(provider => {
+    const providerData = calendarData[provider.authors[0]] || [];
+    const datesWithActivity = providerData.filter(day => day.count > 0);
+
+    if (datesWithActivity.length > 0) {
+      const latestActivity = datesWithActivity.reduce((latest, day) => {
+        return new Date(day.date) > new Date(latest.date) ? day : latest;
+      });
+      return { ...provider, mostRecentRelease: latestActivity.date };
+    }
+
+    return { ...provider, mostRecentRelease: null };
+  });
+
+  const sortedProvidersByActivity = sortProvidersByActivity(providersWithReleaseDate, calendarData);
 
   return {
     calendarData,