Upload from GitHub Actions: trying to fix figure pointing

frontend/src/App.js

@@ -23,6 +23,8 @@ function App () {
   const [dialogVisible, setDialogVisible] = useState(false)
   const [aboutVisible, setAboutVisible] = useState(false)
   const [contributeVisible, setContributeVisible] = useState(false)
+  const [carouselActiveIndex, setCarouselActiveIndex] = useState(0)
+  const [dialogCarouselActiveIndex, setDialogCarouselActiveIndex] = useState(0)
 
   useEffect(() => {
     fetch('/api/data', {
@@ -57,6 +59,20 @@ function App () {
     return () => window.removeEventListener('resize', handleResize)
   }, [])
 
+  // Reset carousel indices when dialog opens/closes
+  useEffect(() => {
+    if (!dialogVisible) {
+      setDialogCarouselActiveIndex(0)
+    }
+  }, [dialogVisible])
+
+  // Reset main carousel index when data changes
+  useEffect(() => {
+    if (data) {
+      setCarouselActiveIndex(0)
+    }
+  }, [data])
+
   return (
     <PrimeReactProvider>
       <div
@@ -267,6 +283,7 @@ function App () {
                   }}
                 />
                 <Carousel
+                  key={`main-carousel-${carouselActiveIndex}`}
                   value={[
                     <WorldMap data={data.countries} allLanguages={data.language_table} />,
                     <LanguagePlot data={data} />,
@@ -278,7 +295,8 @@ function App () {
                   numVisible={1}
                   itemTemplate={item => item}
                   circular
-                  activeIndex={0}
+                  activeIndex={carouselActiveIndex}
+                  onPageChange={(e) => setCarouselActiveIndex(e.page)}
                   style={{ width: '100%', minHeight: '650px' }}
                 />
               </div>
@@ -431,6 +449,7 @@ function App () {
           {data && (
             <div style={{ width: '100%', height: '100%' }}>
               <Carousel
+                key={`dialog-carousel-${dialogCarouselActiveIndex}`}
                 value={[
                   <WorldMap
                     data={data.countries}
@@ -459,7 +478,8 @@ function App () {
                 numVisible={1}
                 itemTemplate={item => item}
                 circular
-                activeIndex={0}
+                activeIndex={dialogCarouselActiveIndex}
+                onPageChange={(e) => setDialogCarouselActiveIndex(e.page)}
                 style={{ width: '100%', height: 'calc(90vh - 120px)' }}
               />
             </div>