hotfix/update disclaimers

package.json

@@ -17,8 +17,10 @@
     "chartjs-plugin-annotation": "^3.0.1",
     "chartjs-plugin-crosshair": "^2.0.0",
     "date-fns": "^3.6.0",
+    "lodash": "^4.17.21",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-helmet": "^6.1.0",
     "react-joyride": "^2.9.2",
     "react-share": "^5.1.0",
     "styled-components": "^6.1.12"

src/App.jsx

@@ -9,6 +9,7 @@ import {
     ErrorContext
 } from './contexts/AppContext';
 import { VideoProvider } from './contexts/VideoContext';
+import { DataFetchingProvider } from './contexts/DataFetchingContext';
 import config from './config.json';
 import RotateOverlay from './components/RotateOverlay';
 import Tour from './components/Tour';
@@ -34,22 +35,24 @@ export default function App() {
                         <ChartDataContext.Provider
                             value={{ chartData, setChartData }}
                         >
-                            {hasWebGLError ? (
-                                <div>
-                                    Your WebGL implementation doesn't seem to
-                                    support hardware accelerated rendering.
-                                    Check your browser settings or if your GPU
-                                    is in a blocklist.
-                                </div>
-                            ) : (
-                                <>
-                                    <Tour />
-                                    <RotateOverlay />
-                                    <EICLogo />
-                                    <Panel />
-                                    <Map />
-                                </>
-                            )}
+                            <DataFetchingProvider>
+                                {hasWebGLError ? (
+                                    <div>
+                                        Your WebGL implementation doesn't seem
+                                        to support hardware accelerated
+                                        rendering. Check your browser settings
+                                        or if your GPU is in a blocklist.
+                                    </div>
+                                ) : (
+                                    <>
+                                        <Tour />
+                                        <RotateOverlay />
+                                        <EICLogo />
+                                        <Panel />
+                                        <Map />
+                                    </>
+                                )}
+                            </DataFetchingProvider>
                         </ChartDataContext.Provider>
                     </VideoProvider>
                 </DataSelectionContext.Provider>

src/components/DataLayerModal.tsx

@@ -1,10 +1,13 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 
 export default function DataLayerModal({
     closeModal,
     isFahrenheit,
     setIsFahrenheit
 }) {
+
+    const [ showPageTwo, setShowPageTwo ] = useState(false);
+
     useEffect(() => {
         const handleKeyDown = (event) => {
             if (event.key === 'Escape') {
@@ -43,42 +46,127 @@ export default function DataLayerModal({
                 </h2>
 
                 <div className="w-full max-w-[760px] bg-transparent">
-                    <p className="text-[16px] text-gray-300 text-left mb-6 leading-[24px]">
-                        How hot could it get on the hottest day in a given year, under different greenhouse gas emission scenarios?                    </p>
-                    <p className="text-[16px] text-gray-300 text-left mb-6 leading-[24px]">
-                        See estimates of annual maxima of daily maximum near-surface air temperature (TASMAX) from NASA Earth Exchange (NEX) Global Daily Downscaled Projections (GDDP) based on simulations of the Coupled Model Intercomparison Project Phase 6 (CMIP6).                    </p>
-                    <p className="text-[16px] text-gray-300 text-left mb-6 leading-[24px]">
-                        The NEX-GDDP-CMIP6 data is calculated on a 0.25°x0.25° latitude and longitude grid and temperature in major cities could be higher than what is displayed within each gridded cell.                        </p>
-                    <div className="flex justify-start mt-8">
-                        <button
-                            className={`px-4 py-2 border rounded-l-lg text-[14px] font-semibold transition-colors ${
-                                isFahrenheit ? 'bg-[#14367D] text-white' : 'bg-gray-800 text-gray-400'
-                            }`}
-                            style={{
-                                borderRadius: '4px 0 0 4px',
-                                padding: '8px 12px',
-                                border: '1px solid #FFFFFF26',
-                            }}
-                            onClick={() => setIsFahrenheit(true)}
-                        >
-                            Fahrenheit (°F)
-                        </button>
-                        <button
-                            className={`px-4 py-2 border rounded-r-lg text-[14px] font-semibold transition-colors ${
-                                !isFahrenheit ? 'bg-[#14367D] text-white' : 'bg-gray-800 text-gray-400'
-                            }`}
-                            style={{
-                                borderRadius: '0 4px 4px 0',
-                                padding: '8px 12px',
-                                border: '1px solid #FFFFFF26',
-                            }}
-                            onClick={() => setIsFahrenheit(false)}
-                        >
-                            Celsius (°C)
-                        </button>
-                    </div>
+                    { showPageTwo ? <PageTwo /> : <PageOne /> }
+                    {/* <SwapButton {...{setShowPageTwo}} />  */}
+                    <Buttons {...{isFahrenheit, setIsFahrenheit}}/>
                 </div>
             </div>
         </div>
     );
 }
+
+function PageTwo({}){
+    // ABG: https://cdn.dribbble.com/users/716122/screenshots/14300379/media/44f698e864671ffe25b844469e40de42.jpg?resize=400x300&vertical=center
+    return(
+        <> 
+            <div className='w-full flex flex-row justify-center'>
+                <img
+                    className='w-4/5'
+                    src="temp-disclaimer.png"
+                    alt="Example of spatial average of temperature for Los Angeles, CA"
+                />
+            </div>
+            <Disclaimer className={'border rounded-lg border-gray-300/50 p-2 overflow-y-scroll'} />
+        </>
+    );
+
+}
+function PageOne({}){
+
+    return (
+        <div className="text-[16px] text-gray-300 text-left mb-6 leading-[24px]">
+            <p>
+                How hot could it get on the hottest day in a given year, under different greenhouse gas emission scenarios?
+            </p>
+            <br/>
+            <p>
+                See estimates of annual maxima of daily maximum near-surface air temperature (TASMAX) from NASA Earth Exchange (NEX) Global Daily Downscaled Projections (GDDP) based on simulations of the Coupled Model Intercomparison Project Phase 6 (CMIP6).                   
+            </p>
+            <br/>
+            <p>
+                The NEX-GDDP-CMIP6 data is calculated on a 0.25°x0.25° latitude and longitude grid, which is a system of lines used to map the sphere of the Earth.
+                In some cases, the temperature in major cities could be higher than what’s displayed in the gridded cell because it includes a larger area than just that city.
+                For example, if you search for a city, such as Los Angeles, CA the average will include the temperature of Los Angeles (which could be higher than average) plus the surrounding geographical area (which could be lower than average).
+            </p>
+            <br/>
+            <p>
+                Learn more about the
+                {' '}
+                <a
+                    href="https://earth.gov/data-catalog/cmip6-climdex-tasmax-yearly-median"
+                    className='underline'
+                >
+                    NEX-GDDP-CMIP6 dataset
+                </a>!
+            </p>
+        </div>
+    );
+}
+
+function Buttons({isFahrenheit, setIsFahrenheit}){
+    return (
+        <div className="flex justify-start mt-8">
+            <button
+                className={`px-4 py-2 border rounded-l-lg text-[14px] font-semibold transition-colors ${
+                    isFahrenheit ? 'bg-[#14367D] text-white' : 'bg-gray-800 text-gray-400'
+                }`}
+                style={{
+                    borderRadius: '4px 0 0 4px',
+                    padding: '8px 12px',
+                    border: '1px solid #FFFFFF26',
+                }}
+                onClick={() => setIsFahrenheit(true)}
+            >
+                Fahrenheit (°F)
+            </button>
+            <button
+                className={`px-4 py-2 border rounded-r-lg text-[14px] font-semibold transition-colors ${
+                    !isFahrenheit ? 'bg-[#14367D] text-white' : 'bg-gray-800 text-gray-400'
+                }`}
+                style={{
+                    borderRadius: '0 4px 4px 0',
+                    padding: '8px 12px',
+                    border: '1px solid #FFFFFF26',
+                }}
+                onClick={() => setIsFahrenheit(false)}
+            >
+                Celsius (°C)
+            </button>
+        </div>
+    );
+}
+
+export function Disclaimer({className}){
+
+    return (
+        <p className={`
+                h-1/4 text-[16px]
+                text-gray-300
+                text-left 
+                mb-6
+                leading-[24px]
+                ${className}
+                `}
+            >
+                The NEX-GDDP-CMIP6 data is calculated on a 0.25°x0.25° latitude and longitude grid, which is a system of lines used to map the sphere of the Earth.
+                In some cases, the temperature in major cities could be higher than what’s displayed in the gridded cell because it includes a larger area than just that city.
+                For example, if you search for a city, such as Los Angeles, CA the average will include the temperature of Los Angeles (which could be higher than average) plus the surrounding geographical area (which could be lower than average).
+            </p>
+
+    );
+
+}
+
+function SwapButton({setShowPageTwo}){
+    return <button
+        className={`px-4 py-2 border rounded-l-lg text-[14px] font-semibold bg-[#14367D] text-white `}
+        style={{
+            borderRadius: '4px 0 0 4px',
+            padding: '8px 12px',
+            border: '1px solid #FFFFFF26',
+        }}
+        onClick={() => setShowPageTwo(prevShowPageTwo => ! prevShowPageTwo)}
+    >
+        Swap pages
+    </button>
+}

src/components/LineChart.jsx

@@ -59,7 +59,7 @@ export default function LineChart({ selectedIndex, isFahrenheit }) {
                                 borderColor:
                                     selectedIndex === 0
                                         ? '#FFFFFFBF'
-                                        : 'rgba(239, 239, 240, 0.2)',
+                                        : 'rgba(239, 239, 240, 0.4)',
                                 borderWidth: selectedIndex === 0 ? 1 : 0.5,
                                 fill: false,
                                 pointRadius: 0
@@ -72,7 +72,7 @@ export default function LineChart({ selectedIndex, isFahrenheit }) {
                                 borderColor:
                                     selectedIndex === 1
                                         ? '#FFFFFFBF'
-                                        : 'rgba(239, 239, 240, 0.2)',
+                                        : 'rgba(239, 239, 240, 0.4)',
                                 borderWidth: selectedIndex === 1 ? 1 : 0.5,
                                 fill: false,
                                 pointRadius: 0
@@ -85,7 +85,7 @@ export default function LineChart({ selectedIndex, isFahrenheit }) {
                                 borderColor:
                                     selectedIndex === 2
                                         ? '#FFFFFFBF'
-                                        : 'rgba(239, 239, 240, 0.2)',
+                                        : 'rgba(239, 239, 240, 0.4)',
                                 borderWidth: selectedIndex === 2 ? 1 : 0.5,
                                 fill: false,
                                 pointRadius: 0
@@ -98,7 +98,7 @@ export default function LineChart({ selectedIndex, isFahrenheit }) {
                                 borderColor:
                                     selectedIndex === 3
                                         ? '#FFFFFFBF'
-                                        : 'rgba(239, 239, 240, 0.2)',
+                                        : 'rgba(239, 239, 240, 0.4)',
                                 borderWidth: selectedIndex === 3 ? 1 : 0.5,
                                 fill: false,
                                 pointRadius: 0