fix a few minor issues

package.json

@@ -13,6 +13,7 @@
     "@emotion/styled": "^11.13.0",
     "@mui/material": "^5.16.6",
     "next": "14.2.5",
+    "next-themes": "^0.4.3",
     "react": "^18",
     "react-activity-calendar": "^2.2.11",
     "react-dom": "^18",

src/pages/heatmap/index.tsx

@@ -1,35 +1,35 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import ActivityCalendar from 'react-activity-calendar';
 import { Tooltip } from '@mui/material';
-import { PROVIDERS_MAP } from '../../utils/providers';
-import { CalendarData, fetchAllModelData, generateCalendarData, aggregateCalendarData } from '../../utils/modelData';
 import Link from 'next/link';
+import { fetchAllModelData, generateCalendarData, aggregateCalendarData, CalendarData, Activity } from '@/utils/modelData';
+import { PROVIDERS_MAP } from '@/utils/providers';
 
 interface OpenSourceHeatmapProps {
-  calendarData: CalendarData;
+  calendarData: CalendarData & { total: Activity[] };
 }
 
 export const getStaticProps = async () => {
   try {
     const modelData = await fetchAllModelData();
     const calendarData = generateCalendarData(modelData);
-    const aggregatedData = aggregateCalendarData(calendarData);
-
+    
     return {
       props: {
-        calendarData: aggregatedData,
+        calendarData: {
+          total: aggregateCalendarData(calendarData),
+          ...calendarData
+        }
       },
-      // Revalidate every 12 hours
-      revalidate: 43200,
+      revalidate: process.env.VERCEL_ENV === 'production' ? 43200 : 3600, // 12 hours in production, 1 hour in development
     };
   } catch (error) {
-    console.error('Error in getStaticProps:', error);
+    console.error('Error fetching model data:', error);
     return {
       props: {
-        calendarData: {},
+        calendarData: { total: [] }
       },
-      // Retry more frequently if there was an error
-      revalidate: 3600,
+      revalidate: 3600, // 1 hour on error
     };
   }
 };
@@ -38,7 +38,7 @@ const OpenSourceHeatmap: React.FC<OpenSourceHeatmapProps> = ({ calendarData }) =
   const [isLoading, setIsLoading] = useState(true);
 
   useEffect(() => {
-    if (calendarData && Object.keys(calendarData).length > 0) {
+    if (calendarData && calendarData.total && calendarData.total.length > 0) {
       setIsLoading(false);
     }
   }, [calendarData]);
@@ -69,11 +69,12 @@ const OpenSourceHeatmap: React.FC<OpenSourceHeatmapProps> = ({ calendarData }) =
             <div className="w-full overflow-x-auto">
               <div className="inline-block mx-auto">
                 <ActivityCalendar
-                  data={calendarData}
+                  data={calendarData.total}
                   theme={{
                     dark: ['#161b22', '#4CAF50'],
-                    light: ['#e0e0e0', '#4CAF50'],
+                    light: ['#161b22', '#4CAF50'],
                   }}
+                  colorScheme="dark"
                   hideTotalCount
                   renderBlock={(block, activity) => (
                     <Tooltip
@@ -93,8 +94,8 @@ const OpenSourceHeatmap: React.FC<OpenSourceHeatmapProps> = ({ calendarData }) =
           {/* Individual Provider Heatmaps */}
           {Object.entries(PROVIDERS_MAP)
             .sort(([keyA], [keyB]) =>
-              calendarData[keyB].reduce((sum, day) => sum + day.count, 0) -
-              calendarData[keyA].reduce((sum, day) => sum + day.count, 0)
+              (calendarData[keyB] || []).reduce((sum, day) => sum + day.count, 0) -
+              (calendarData[keyA] || []).reduce((sum, day) => sum + day.count, 0)
             )
             .map(([providerName, { color }]) => (
               <div key={providerName} className="flex flex-col">
@@ -102,11 +103,12 @@ const OpenSourceHeatmap: React.FC<OpenSourceHeatmapProps> = ({ calendarData }) =
                 <div className="w-full overflow-x-auto">
                   <div className="inline-block mx-auto">
                     <ActivityCalendar
-                      data={calendarData[providerName]}
+                      data={calendarData[providerName] || []}
                       theme={{
                         dark: ['#161b22', color],
-                        light: ['#e0e0e0', color],
+                        light: ['#161b22', color],
                       }}
+                      colorScheme="dark"
                       hideTotalCount
                       renderBlock={(block, activity) => (
                         <Tooltip

src/utils/modelData.ts

@@ -1,10 +1,13 @@
 import { PROVIDERS_MAP } from './providers';
 
 export interface ModelData {
-  createdAt: string;
   id: string;
-  likes?: number;
+  name: string;
+  createdAt: string;
+  likes: number;
+  downloads?: number;
   isDataset?: boolean;
+  provider: string;
 }
 
 export interface Activity {
@@ -25,8 +28,10 @@ export interface MonthlyActivity {
   name?: string;
 }
 
-export interface DetailedModelData extends ModelData {
+export interface DetailedModelData {
+  id: string;
   name: string;
+  createdAt: string;
   likes: number;
   downloads: number;
   monthKey: string; // YYYY-MM
@@ -136,7 +141,7 @@ export const generateMonthlyData = (modelData: ModelData[]): MonthlyActivity[] =
         date: monthKey,
         count: 0,
         provider,
-        isDataset: model.isDataset,
+        isDataset: model.isDataset ?? false,  // Use nullish coalescing to provide a default
         name: model.name
       };
     }
@@ -243,38 +248,23 @@ export const fetchAllModelData = async (): Promise<ModelData[]> => {
 };
 
 export function processDetailedModelData(models: ModelData[]): DetailedModelData[] {
-  if (!models || models.length === 0) {
-    return [];
-  }
-
   return models.map(model => {
     const date = new Date(model.createdAt);
-    const monthKey = date.toLocaleDateString('en-US', {
-      year: 'numeric',
-      month: 'long'
-    });
-    const sortKey = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}`;
-    const [org] = model.id.split('/');
-    const provider = Object.entries(PROVIDERS_MAP).find(([_, info]) =>
-      info.authors.includes(org)
-    )?.[0] || 'unknown';
+    const monthKey = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}`;
+    const provider = model.provider || 'unknown';
+    const sortKey = `${monthKey}-${model.name}`;
 
     return {
-      ...model,
+      id: model.id,
       name: model.name || model.id,
+      createdAt: model.createdAt,
       likes: model.likes || 0,
-      downloads: model.downloads || 0,
+      downloads: model.downloads || 0, // Set downloads to 0 if it's undefined
       monthKey,
       provider,
       sortKey,
-      isDataset: model.isDataset || false
+      isDataset: model.isDataset ?? false
     };
-  }).sort((a, b) => {
-    // First sort by sortKey (year-month) in descending order
-    const dateCompare = b.sortKey.localeCompare(a.sortKey);
-    if (dateCompare !== 0) return dateCompare;
-    // Then by likes for items in the same month
-    return (b.likes || 0) - (a.likes || 0);
   });
 }