Upload from GitHub Actions: Merge pull request #14 from datenlabor-bmz/jn-dev

frontend/src/App.js

@@ -53,13 +53,18 @@ function App () {
   // Create carousel items when data is loaded
   useEffect(() => {
     if (data) {
-      setCarouselItems([
-        <WorldMap key="0" data={data.countries} allLanguages={data.language_table} width={750} height={500} />,
-        <LanguagePlot key="1" data={data} width={750} height={500} />,
-        <SpeakerPlot key="2" data={data} width={750} height={500} />,
-        <HistoryPlot key="3" data={data} width={750} height={500} />,
-        <CostPlot key="4" data={data} width={750} height={500} />
-      ]);
+      // Add a small delay to ensure components are ready
+      const timer = setTimeout(() => {
+        setCarouselItems([
+          <WorldMap key="worldmap-0" data={data.countries} allLanguages={data.language_table} width={750} height={500} />,
+          <LanguagePlot key="langplot-1" data={data} width={750} height={500} />,
+          <SpeakerPlot key="speakerplot-2" data={data} width={750} height={500} />,
+          <HistoryPlot key="histplot-3" data={data} width={750} height={500} />,
+          <CostPlot key="costplot-4" data={data} width={750} height={500} />
+        ]);
+      }, 100);
+      
+      return () => clearTimeout(timer);
     }
   }, [data])
 
@@ -78,34 +83,38 @@ function App () {
   // Create full-screen carousel items when data or window size changes
   useEffect(() => {
     if (data) {
-      setFullScreenCarouselItems([
-        <WorldMap
-          key="fs-0"
-          data={data.countries}
-          allLanguages={data.language_table}
-          width={windowWidth * 0.7}
-          height={windowHeight * 0.6}
-        />,
-        <LanguagePlot
-          key="fs-1"
-          data={data}
-          width={windowWidth * 0.7}
-          height={windowHeight * 0.6}
-        />,
-        <SpeakerPlot
-          key="fs-2"
-          data={data}
-          width={windowWidth * 0.7}
-          height={windowHeight * 0.6}
-        />,
-        <HistoryPlot
-          key="fs-3"
-          data={data}
-          width={windowWidth * 0.7}
-          height={windowHeight * 0.6}
-        />,
-        <CostPlot key="fs-4" data={data} width={windowWidth * 0.7} height={windowHeight * 0.6} />
-      ]);
+      const timer = setTimeout(() => {
+        setFullScreenCarouselItems([
+          <WorldMap
+            key="fs-worldmap-0"
+            data={data.countries}
+            allLanguages={data.language_table}
+            width={windowWidth * 0.7}
+            height={windowHeight * 0.6}
+          />,
+          <LanguagePlot
+            key="fs-langplot-1"
+            data={data}
+            width={windowWidth * 0.7}
+            height={windowHeight * 0.6}
+          />,
+          <SpeakerPlot
+            key="fs-speakerplot-2"
+            data={data}
+            width={windowWidth * 0.7}
+            height={windowHeight * 0.6}
+          />,
+          <HistoryPlot
+            key="fs-histplot-3"
+            data={data}
+            width={windowWidth * 0.7}
+            height={windowHeight * 0.6}
+          />,
+          <CostPlot key="fs-costplot-4" data={data} width={windowWidth * 0.7} height={windowHeight * 0.6} />
+        ]);
+      }, 100);
+      
+      return () => clearTimeout(timer);
     }
   }, [data, windowWidth, windowHeight])
 
@@ -218,39 +227,88 @@ function App () {
           <div
             style={{
               display: 'flex',
-              gap: '1rem',
-              marginBottom: '1.5rem',
+              gap: '0.75rem',
+              marginBottom: '2rem',
               flexWrap: 'wrap',
               justifyContent: 'center'
             }}
           >
-            <Button
-              label='📚 About this tool'
-              className='p-button-text'
+            <button
               onClick={() => setAboutVisible(true)}
               style={{
-                color: '#666',
-                border: '1px solid #ddd',
-                padding: '0.5rem 1rem',
-                borderRadius: '4px',
-                fontSize: '0.9rem'
+                background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+                color: 'white',
+                border: 'none',
+                padding: '0.75rem 1.5rem',
+                borderRadius: '12px',
+                fontSize: '0.95rem',
+                fontWeight: '500',
+                cursor: 'pointer',
+                display: 'flex',
+                alignItems: 'center',
+                gap: '0.5rem',
+                boxShadow: '0 4px 15px rgba(102, 126, 234, 0.25)',
+                transition: 'all 0.3s ease',
+                ':hover': {
+                  transform: 'translateY(-2px)',
+                  boxShadow: '0 8px 25px rgba(102, 126, 234, 0.35)'
+                }
               }}
-            />
+              onMouseEnter={(e) => {
+                e.target.style.transform = 'translateY(-2px)';
+                e.target.style.boxShadow = '0 8px 25px rgba(102, 126, 234, 0.35)';
+              }}
+              onMouseLeave={(e) => {
+                e.target.style.transform = 'translateY(0)';
+                e.target.style.boxShadow = '0 4px 15px rgba(102, 126, 234, 0.25)';
+              }}
+            >
+              <span style={{ fontSize: '1.1rem' }}>📚</span>
+              About this tool
+            </button>
 
-            <Button
-              label='🚀 Add your model (soon)'
-              className='p-button-text'
+            <button
               onClick={() => setContributeVisible(true)}
-              tooltip='This feature is on our roadmap and will be available soon.'
-              tooltipOptions={{ position: 'bottom' }}
+              title='This feature is on our roadmap and will be available soon.'
               style={{
-                color: '#666',
-                border: '1px solid #ddd',
-                padding: '0.5rem 1rem',
-                borderRadius: '4px',
-                fontSize: '0.9rem'
+                background: 'linear-gradient(135deg, #ff9a9e 0%, #fecfef 50%, #fecfef 100%)',
+                color: '#6b46c1',
+                border: 'none',
+                padding: '0.75rem 1.5rem',
+                borderRadius: '12px',
+                fontSize: '0.95rem',
+                fontWeight: '500',
+                cursor: 'pointer',
+                display: 'flex',
+                alignItems: 'center',
+                gap: '0.5rem',
+                boxShadow: '0 4px 15px rgba(255, 154, 158, 0.25)',
+                transition: 'all 0.3s ease',
+                position: 'relative',
+                overflow: 'hidden'
               }}
-            />
+              onMouseEnter={(e) => {
+                e.target.style.transform = 'translateY(-2px)';
+                e.target.style.boxShadow = '0 8px 25px rgba(255, 154, 158, 0.35)';
+              }}
+              onMouseLeave={(e) => {
+                e.target.style.transform = 'translateY(0)';
+                e.target.style.boxShadow = '0 4px 15px rgba(255, 154, 158, 0.25)';
+              }}
+            >
+              <span style={{ fontSize: '1.1rem' }}>🚀</span>
+              Add your model
+              <span style={{
+                fontSize: '0.75rem',
+                backgroundColor: 'rgba(107, 70, 193, 0.15)',
+                padding: '0.2rem 0.5rem',
+                borderRadius: '6px',
+                marginLeft: '0.5rem',
+                fontWeight: '600'
+              }}>
+                soon
+              </span>
+            </button>
           </div>
 
           {data && (
@@ -320,7 +378,7 @@ function App () {
                 />
                 {carouselItems.length > 0 && (
                   <Carousel
-                    key={`carousel-${data ? 'loaded' : 'loading'}`}
+                    key={`main-carousel-${carouselItems.length}-${Date.now()}`}
                     value={carouselItems}
                     numScroll={1}
                     numVisible={1}
@@ -480,7 +538,7 @@ function App () {
           {fullScreenCarouselItems.length > 0 && (
             <div style={{ width: '100%', height: '100%' }}>
               <Carousel
-                key={`fs-carousel-${data ? 'loaded' : 'loading'}`}
+                key={`fs-carousel-${fullScreenCarouselItems.length}-${Date.now()}`}
                 value={fullScreenCarouselItems}
                 numScroll={1}
                 numVisible={1}