Week indexing starts w/ zero and is adjusted for getting correct files.

src/components/Timeline.tsx

@@ -1,12 +1,12 @@
 import { useEffect, useState } from 'react';
 import { Slider } from '@mantine/core';
-import { isMobile } from '../utils/utils';
+import { isMobile, MIN_WEEK, MAX_WEEK } from '../utils/utils';
 import ab_dates from '../assets/abundance_dates.json';
 import mv_dates from '../assets/movement_dates.json';
 
 
 const months: Array<string> = [
-  'Jan','Feb','Mar','Apr', 'May' ,'Jun','Jul','Aug', 'Sep','Oct','Nov','Dec'
+  'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
 ];
 
 // Keeps track of the props and prop type going into the component (look up interfaces in TypeScript)
@@ -60,7 +60,7 @@ function Timeline(props: TimelineProps) {
   useEffect(() => {
     // update the label WHEN the check for overlay is complete
     if (labelInit) {
-      setWeekLabel(myLabels[dataset][week-1]);
+      setWeekLabel(myLabels[dataset][week]);
     }
   }, [week, props.dataset]);
 
@@ -70,9 +70,8 @@ function Timeline(props: TimelineProps) {
       <Slider
         defaultValue={week}
         value={week}
-        label={weekLabel}
-        min={1}
-        max={52}
+        min={MIN_WEEK}
+        max={MAX_WEEK}
         labelAlwaysOn
         size='sm' // sm screen
         step={1}
@@ -85,8 +84,8 @@ function Timeline(props: TimelineProps) {
         value={week}
         label={weekLabel}
         marks={marks[dataset]} // lg screen
-        min={1}
-        max={52}
+        min={MIN_WEEK}
+        max={MAX_WEEK}
         labelAlwaysOn
         step={1}
         thumbSize={20} // lg screen

src/hooks/dataUrl.tsx

@@ -38,8 +38,9 @@ export function imageURL(
   week: number,
 ): string {
   const name = dataInfo[data_index].datatype;
+  // week in code is zero based, for the filenames it starts with one.
   const finalUrl = `${
     baseUrl + name
-  }/${taxa[taxa_index].value}/${name}_${taxa[taxa_index].value}_${week}.png`;
+  }/${taxa[taxa_index].value}/${name}_${taxa[taxa_index].value}_${week+1}.png`;
   return finalUrl;
 }

src/utils/utils.tsx

@@ -2,6 +2,8 @@ import { useMediaQuery } from '@mantine/hooks';
 import { em } from '@mantine/core';
 
 const MSEC_TO_WEEK = 7*24*60*60*1000;
+export const MIN_WEEK = 0;   // week index
+export const MAX_WEEK = 51;  
 
 export function isMobile():boolean|undefined {
     return useMediaQuery(`(max-width: ${em(750)})`);
@@ -15,8 +17,5 @@ export function dateToWeek(thisDate:Date):number {
 
 export function monthDayToWeek(month:number, day:number):number {
     // the year doesn't matter, only looking for the week within the year
-    const thisDate: Date = new Date(2000, month-1, day);
-    const startOfYear = new Date(2000,0,1);
-    const diff_dates = thisDate.valueOf()-startOfYear.valueOf()
-    return Math.floor(diff_dates/MSEC_TO_WEEK);
+    return dateToWeek(new Date(2025, month-1, day));
 }

src/views/Home.tsx

@@ -9,12 +9,11 @@ import taxa from '../assets/taxa.json';
 import Timeline from '../components/Timeline';
 import Legend from '../components/Legend';
 import {OutbreakMarkers, loadOutbreaks} from '../components/OutbreakPoints'
-import {dateToWeek} from '../utils/utils'
+import {dateToWeek, MIN_WEEK, MAX_WEEK} from '../utils/utils'
 import '../styles/Home.css';
 import 'leaflet/dist/leaflet.css';
 
-const MIN_WEEK = 1;   // week indexing in files
-const MAX_WEEK = 52;  // number of weeks in a year
+
 const MIN_REG_WINDOW_WIDTH = 600;
 // the lat/long bounds of the data image provided by the backend
 const imageBounds = [
@@ -34,7 +33,7 @@ const HomePage = () => {
   const [dataIndex, setDataIndex] = useState(0);
   // Sets state for the species type 
   const [speciesIndex, setSpeciesIndex] = useState(0);
-  const [week, setWeek] = useState(0);
+  const [week, setWeek] = useState(MIN_WEEK);
   const [adjustWeek, setAdjustWeek] = useState(0);
   // default state of the map overlay url for the current data displayed.
   const [overlayUrl, setOverlayUrl] = useState("");
@@ -81,14 +80,14 @@ const HomePage = () => {
       return;
     }
     if (adjustWeek > 0) {
-      // increments active index (wraps around when at top)
-      let temp = week + MIN_WEEK;
+      // increments active index (wraps around when at end of year)
+      let temp = week + 1;
       if (temp > MAX_WEEK) temp = MIN_WEEK;
       checkImageAndUpdate(temp);
     } else {
-      // decrements active index (wraps around when at bottom)
+      // decrements active index (wraps around when at beginning of year)
       let temp = week - 1;
-      if (temp < 1) temp = MAX_WEEK;
+      if (temp < MIN_WEEK) temp = MAX_WEEK;
       checkImageAndUpdate(temp);
     }
     setAdjustWeek(0);
@@ -97,10 +96,9 @@ const HomePage = () => {
   // Called once on startup. Adds a listener for user keyboard events. 
   // Note: it appears this is not called when using Firefox on the iPhone PM 11/9/2024
   useEffect(() => {
-    // determine current week - find msec between today and beginning fo the year
-    const this_week = dateToWeek(new Date())
     loadOutbreaks();
-    checkImageAndUpdate(this_week);
+    // determine current week 
+    checkImageAndUpdate(dateToWeek(new Date()));
     handleWindowSizeChange();
     document.addEventListener('keydown', handleSelection);
     window.addEventListener('resize', handleWindowSizeChange);
@@ -111,10 +109,6 @@ const HomePage = () => {
   }, []);
 
   async function checkImageAndUpdate(this_week: number) {
-    if (this_week <= 0) {
-      // the week is not initialized yet
-      return;
-    }
     var image_url = imageURL(dataIndex, speciesIndex, this_week);
     var response = await fetch(image_url);
     if (!response.ok) {