Update src/pages/index.tsx

src/pages/index.tsx

@@ -12,19 +12,19 @@ import UserSearchDialog from "../components/UserSearchDialog";
 
 const PROVIDERS: ProviderInfo[] = [
   { color: "#ff7000", authors: ["mistralai"] },
-  { color: "#1877F2", authors: ["meta-llama", "facebook"] },
+  { color: "#1877F2", authors: ["meta-llama", "facebook", ] },
   { color: "#10A37F", authors: ["openai"] },
   { color: "#cc785c", authors: ["Anthropic"] },
   { color: "#DB4437", authors: ["google"] },
   { color: "#5E35B1", authors: ["allenai"] },
-  { color: "#0066CC", authors: ["apple"] },
+  { color: "#0088cc", authors: ["apple"] },
   { color: "#FEB800", authors: ["microsoft"] },
   { color: "#76B900", authors: ["nvidia"] },
-  { color: "#00A8E0", authors: ["deepseek-ai"] },
-  { color: "#6366F1", authors: ["Qwen"] },
-  { color: "#FF6B6B", authors: ["CohereLabs"] },
-  { color: "#4ECDC4", authors: ["ibm-granite"] },
-  { color: "#A855F7", authors: ["stabilityai"] },
+  { color: "#0088cc", authors: ["deepseek-ai"] },
+  { color: "#0088cc", authors: ["Qwen"] },
+  { color: "#4C6EE6", authors: ["CohereLabs"] },
+  { color: "#4C6EE6", authors: ["ibm-granite"] },
+  { color: "#A020F0", authors: ["stabilityai"] },
 ];
 
 export async function getStaticProps() {
@@ -42,7 +42,7 @@ export async function getStaticProps() {
         calendarData,
         providers: updatedProviders,
       },
-      revalidate: 3600,
+      revalidate: 3600, // regenerate every hour
     };
   } catch (error) {
     console.error("Error fetching data:", error);
@@ -51,74 +51,22 @@ export async function getStaticProps() {
         calendarData: {},
         providers: PROVIDERS,
       },
-      revalidate: 60,
+      revalidate: 60, // retry after 1 minute if there was an error
     };
   }
 }
 
-const ProviderCard = React.memo(({ 
-  provider, 
-  calendarData, 
-  isExpanded, 
-  onToggle 
-}: { 
-  provider: ProviderInfo, 
-  calendarData: CalendarData,
-  isExpanded: boolean,
-  onToggle: () => void
-}) => {
+const ProviderHeatmap = React.memo(({ provider, calendarData }: { provider: ProviderInfo, calendarData: CalendarData }) => {
   const providerName = provider.fullName || provider.authors[0];
-  const totalActivity = calendarData[providerName]?.reduce((sum, day) => sum + day.count, 0) || 0;
-  const recentActivity = calendarData[providerName]?.slice(-30).reduce((sum, day) => sum + day.count, 0) || 0;
-
   return (
-    <div className="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden transition-all duration-200 hover:shadow-md">
-      <button
-        onClick={onToggle}
-        className="w-full px-6 py-4 flex items-center justify-between hover:bg-gray-50 transition-colors"
-      >
-        <div className="flex items-center gap-4">
-          {provider.avatarUrl && (
-            <img 
-              src={provider.avatarUrl} 
-              alt={providerName}
-              className="w-12 h-12 rounded-lg object-cover"
-            />
-          )}
-          <div className="text-left">
-            <h3 className="font-semibold text-lg text-gray-900">{providerName}</h3>
-            <div className="flex gap-4 text-sm text-gray-600">
-              <span>Total: <span className="font-medium text-gray-900">{totalActivity.toLocaleString()}</span></span>
-              <span>Last 30 days: <span className="font-medium text-gray-900">{recentActivity.toLocaleString()}</span></span>
-            </div>
-          </div>
-        </div>
-        <div className="flex items-center gap-3">
-          <div className="w-3 h-3 rounded-full" style={{ backgroundColor: provider.color }}></div>
-          <svg 
-            className={`w-5 h-5 text-gray-400 transition-transform ${isExpanded ? 'rotate-180' : ''}`}
-            fill="none" 
-            stroke="currentColor" 
-            viewBox="0 0 24 24"
-          >
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
-          </svg>
-        </div>
-      </button>
-      
-      {isExpanded && (
-        <div className="px-6 pb-6 border-t border-gray-100">
-          <div className="pt-4">
-            <Heatmap
-              data={calendarData[providerName]}
-              color={provider.color}
-              providerName={providerName}
-              fullName={provider.fullName ?? providerName}
-              avatarUrl={provider.avatarUrl ?? ''}
-            />
-          </div>
-        </div>
-      )}
+    <div key={providerName} className="flex flex-col items-center">
+      <Heatmap
+        data={calendarData[providerName]}
+        color={provider.color}
+        providerName={providerName}
+        fullName={provider.fullName ?? providerName}
+        avatarUrl={provider.avatarUrl ?? ''}
+      />
     </div>
   );
 });
@@ -128,9 +76,6 @@ const OpenSourceHeatmap: React.FC<OpenSourceHeatmapProps> = ({
   providers,
 }) => {
   const [isLoading, setIsLoading] = useState(true);
-  const [expandedProviders, setExpandedProviders] = useState<Set<string>>(new Set());
-  const [filterQuery, setFilterQuery] = useState("");
-  const [sortBy, setSortBy] = useState<"total" | "recent">("total");
 
   useEffect(() => {
     if (calendarData && Object.keys(calendarData).length > 0) {
@@ -138,154 +83,49 @@ const OpenSourceHeatmap: React.FC<OpenSourceHeatmapProps> = ({
     }
   }, [calendarData]);
 
-  const sortedAndFilteredProviders = useMemo(() => {
-    let filtered = providers;
-    
-    if (filterQuery) {
-      filtered = providers.filter(p => 
-        (p.fullName || p.authors[0]).toLowerCase().includes(filterQuery.toLowerCase())
-      );
-    }
-
-    return filtered.sort((a, b) => {
-      const aName = a.fullName || a.authors[0];
-      const bName = b.fullName || b.authors[0];
-      
-      if (sortBy === "total") {
-        return calendarData[bName]?.reduce((sum, day) => sum + day.count, 0) || 0 -
-               calendarData[aName]?.reduce((sum, day) => sum + day.count, 0) || 0;
-      } else {
-        return calendarData[bName]?.slice(-30).reduce((sum, day) => sum + day.count, 0) || 0 -
-               calendarData[aName]?.slice(-30).reduce((sum, day) => sum + day.count, 0) || 0;
-      }
-    });
-  }, [providers, calendarData, filterQuery, sortBy]);
-
-  const toggleProvider = (providerName: string) => {
-    setExpandedProviders(prev => {
-      const newSet = new Set(prev);
-      if (newSet.has(providerName)) {
-        newSet.delete(providerName);
-      } else {
-        newSet.add(providerName);
-      }
-      return newSet;
-    });
-  };
-
-  const toggleAll = () => {
-    if (expandedProviders.size === sortedAndFilteredProviders.length) {
-      setExpandedProviders(new Set());
-    } else {
-      setExpandedProviders(new Set(sortedAndFilteredProviders.map(p => p.fullName || p.authors[0])));
-    }
-  };
+  const sortedProviders = useMemo(() => 
+    providers.sort((a, b) =>
+      calendarData[b.fullName || b.authors[0]].reduce(
+        (sum, day) => sum + day.count,
+        0
+      ) -
+      calendarData[a.fullName || a.authors[0]].reduce(
+        (sum, day) => sum + day.count,
+        0
+      )
+    ),
+    [providers, calendarData]
+  );
 
   return (
-    <div className="min-h-screen bg-gray-50">
-      <div className="w-full max-w-7xl mx-auto px-4 py-12">
-        {/* Header */}
-        <div className="text-center mb-12">
-          <h1 className="text-5xl font-bold text-gray-900 mb-4">
-            AI Labs Activity Dashboard
-          </h1>
-          <p className="text-lg text-gray-600 mb-8">
-            Track models, datasets, and spaces from leading AI organizations on Hugging Face
-          </p>
-          
-          {/* Controls */}
-          <div className="flex flex-col sm:flex-row gap-4 justify-center items-center max-w-2xl mx-auto">
-            <div className="relative flex-1 w-full">
-              <input
-                type="text"
-                placeholder="Search organizations..."
-                value={filterQuery}
-                onChange={(e) => setFilterQuery(e.target.value)}
-                className="w-full px-4 py-2 pl-10 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-              />
-              <svg className="absolute left-3 top-2.5 w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
-              </svg>
-            </div>
-            
-            <div className="flex gap-2">
-              <select
-                value={sortBy}
-                onChange={(e) => setSortBy(e.target.value as "total" | "recent")}
-                className="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-              >
-                <option value="total">Sort by Total</option>
-                <option value="recent">Sort by Recent</option>
-              </select>
-              
-              <button
-                onClick={toggleAll}
-                className="px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors"
-              >
-                {expandedProviders.size === sortedAndFilteredProviders.length ? 'Collapse All' : 'Expand All'}
-              </button>
-              
-              <UserSearchDialog />
-            </div>
-          </div>
+    <div className="w-full max-w-screen-lg mx-auto p-4 py-16">
+      <h1 className="text-3xl lg:text-5xl mt-16 font-bold text-center mb-2">
+        Hugging Face Heatmap 🤗
+      </h1>
+      <div className="text-center text-sm my-8 space-y-4">
+        <p>
+          Models, Datasets, and Spaces from the top AI labs.
+        </p>
+        <div className="flex justify-center space-x-4">
+          <UserSearchDialog />
         </div>
-
-        {/* Stats Summary */}
-        {!isLoading && (
-          <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-8">
-            <div className="bg-white rounded-lg p-6 text-center shadow-sm border border-gray-200">
-              <div className="text-3xl font-bold text-gray-900">
-                {providers.length}
-              </div>
-              <div className="text-sm text-gray-600">Organizations</div>
-            </div>
-            <div className="bg-white rounded-lg p-6 text-center shadow-sm border border-gray-200">
-              <div className="text-3xl font-bold text-gray-900">
-                {Object.values(calendarData).reduce((total, days) => 
-                  total + days.reduce((sum, day) => sum + day.count, 0), 0
-                ).toLocaleString()}
-              </div>
-              <div className="text-sm text-gray-600">Total Activities</div>
-            </div>
-            <div className="bg-white rounded-lg p-6 text-center shadow-sm border border-gray-200">
-              <div className="text-3xl font-bold text-gray-900">
-                {Object.values(calendarData).reduce((total, days) => 
-                  total + days.slice(-30).reduce((sum, day) => sum + day.count, 0), 0
-                ).toLocaleString()}
-              </div>
-              <div className="text-sm text-gray-600">Last 30 Days</div>
-            </div>
-          </div>
-        )}
-
-        {/* Provider List */}
-        {isLoading ? (
-          <div className="flex justify-center items-center h-64">
-            <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-gray-900"></div>
-          </div>
-        ) : (
-          <div className="space-y-4">
-            {sortedAndFilteredProviders.length === 0 ? (
-              <div className="text-center py-12 text-gray-500">
-                No organizations found matching "{filterQuery}"
-              </div>
-            ) : (
-              sortedAndFilteredProviders.map((provider) => {
-                const providerName = provider.fullName || provider.authors[0];
-                return (
-                  <ProviderCard
-                    key={providerName}
-                    provider={provider}
-                    calendarData={calendarData}
-                    isExpanded={expandedProviders.has(providerName)}
-                    onToggle={() => toggleProvider(providerName)}
-                  />
-                );
-              })
-            )}
-          </div>
-        )}
       </div>
+      
+      <div className="h-px max-w-lg mx-auto bg-gray-200 my-16" />
+     
+      {isLoading ? (
+        <p className="text-center">Loading...</p>
+      ) : (
+        <div className="space-y-16">
+          {sortedProviders.map((provider) => (
+            <ProviderHeatmap 
+              key={provider.fullName || provider.authors[0]} 
+              provider={provider} 
+              calendarData={calendarData} 
+            />
+          ))}
+        </div>
+      )}
     </div>
   );
 };