Merge pull request #68 from tsdataclinic/info-modals

add welcome and instructional modals
tsdataclinic · Feb 14, 2024 · 93942f7 · 93942f7
2 parents 65d1517 + 1044679
commit 93942f7
Show file tree

Hide file tree

Showing 4 changed files with 96 additions and 13 deletions.
diff --git a/app/src/components/ContextPane.tsx b/app/src/components/ContextPane.tsx
@@ -1,6 +1,6 @@
 import { Layer, PROPERTY_LABELS, SelectedRoute } from './MainPage';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faEye, faEyeSlash } from '@fortawesome/free-solid-svg-icons';
+import { faEye, faEyeSlash, faCircleInfo } from '@fortawesome/free-solid-svg-icons';
 import Dropdown from './ui/Dropdown';
 import { Cities } from '../libs/cities';
 import { RouteRecord } from '../hooks/useAvailableRoutes';
@@ -22,6 +22,7 @@ type Props = {
   routes: RouteRecord[];
   selectedRoutes: SelectedRoute[];
   setSelectedRoutes: React.Dispatch<React.SetStateAction<Array<SelectedRoute>>>;
+  setIsInstructionalModalOpen: React.Dispatch<React.SetStateAction<boolean>>;
 };
 
 function ContextPane({
@@ -36,6 +37,7 @@ function ContextPane({
   routes,
   selectedRoutes,
   setSelectedRoutes,
+  setIsInstructionalModalOpen
 }: Props): JSX.Element {
   return (
     <div
@@ -219,6 +221,15 @@ function ContextPane({
             }
           </ul>
         </div>
+        <div>
+          <FontAwesomeIcon
+              onClick={() => setIsInstructionalModalOpen(true)}
+              size="2x"
+              cursor={'pointer'}
+              icon={faCircleInfo}
+              title={'Help'}
+            />
+        </div>
       </div>
     </div>
   );

diff --git a/app/src/components/Header.tsx b/app/src/components/Header.tsx
@@ -23,6 +23,8 @@ function ModalLink(props: {
           isOpen={isModalOpen}
           onDismiss={() => setIsModalOpen(false)}
           title={children}
+          onDissmissText='Close'
+          isCentered={true}
         >
           {modalContents}
         </Modal>

diff --git a/app/src/components/MainPage.tsx b/app/src/components/MainPage.tsx
@@ -14,6 +14,7 @@ import { useAvailableCities } from '../hooks/useAvailableCities';
 import { useAvailableRoutes } from '../hooks/useAvailableRoutes';
 import usePrevious from '../hooks/usePrevious';
 import { useRemoteRouteSummary } from '../hooks/useRemoteRouteSummary';
+import Modal from './ui/Modal';
 
 const BACKEND_URI = process.env.REACT_APP_PROD_BACKEND_URI ?? process.env.REACT_APP_DEV_BACKEND_URI;
 const BACKEND_TILESERVER_URI = process.env.REACT_APP_PROD_TILESERVER_URI ?? process.env.REACT_APP_DEV_TILESERVER_URI;
@@ -65,7 +66,6 @@ const AVAILABLE_LAYERS: Record<string, Layer> = {
   '2': {
     id: 2,
     layerName: 'Hospitals',
-    layerURL: `${BACKEND_URI}/hospitals.geojson`,
     tileURL: `${BACKEND_TILESERVER_URI}/hospitals`,
     sourceLayer: 'hospitals',
     isVisible: true,
@@ -131,6 +131,8 @@ const AVAILABLE_LAYERS: Record<string, Layer> = {
 export default function MainPage(): JSX.Element {
   const availableRoutes = useAvailableRoutes();
   const availableCities = useAvailableCities();
+  const [isWelcomeModalOpen, setIsWelcomeModalOpen] = useState(true);
+  const [isInstructionalModalOpen, setIsInstructionalModalOpen] = useState(false);
   const [selectedCity, setSelectedCity] = useState<Cities>(Cities.NewYorkCity);
   const previousSelectedCity = usePrevious(selectedCity);
   const [availableProperties, setAvailableProperties] = useState<Set<string>>(
@@ -236,6 +238,7 @@ export default function MainPage(): JSX.Element {
   }, [])
 
   return (
+    <>
     <main className="flex flex-col-reverse overflow-scroll sm:overflow-hidden sm:flex-row sm:h-full">
       <Filter
         filters={filters}
@@ -260,6 +263,8 @@ export default function MainPage(): JSX.Element {
         routes={availableRoutes}
         selectedRoutes={selectedRoutes}
         setSelectedRoutes={setSelectedRoutes}
+        setIsInstructionalModalOpen={setIsInstructionalModalOpen}
+
       />
       {detailedRoutes.city !== '' && (
         <RouteSummaryPane
@@ -279,7 +284,68 @@ export default function MainPage(): JSX.Element {
         selectedCity={selectedCity}
         previousSelectedCity={previousSelectedCity}
       />
-
     </main>
+    { isWelcomeModalOpen && 
+      <Modal
+        isOpen={isWelcomeModalOpen}
+        onDismiss={() => setIsWelcomeModalOpen(false)}
+        title='Transit Resilience for Essential Commuting (TREC)'
+        onDissmissText='Explore!'
+        isCentered={true}
+      >
+        <p className="text-cyan-500 text-l font-extrabold">
+        Where do climate risks likely impact commuters’ abilities to access essential services?
+        </p>
+        <br />
+        <p>
+        TREC seeks to answer this question by intersecting climate risk data with the human experience in transit systems across the US.
+        </p>
+        <br />
+        <p>
+        You can explore whether a bus station is not only at risk of experiencing a climate threat,
+        but also vital for providing access to essential services. Can essential workers make it to job
+        centers amidst extreme rainfall? Can an ill commuter arrive at a hospital amidst a wildfire?
+        </p>
+        <br />
+        <p>
+        See where climate risks impact the experience of commuters to help prioritize
+        infrastructure for improvements or advocate for local community needs.
+        </p>
+      </Modal>
+    }
+    { isInstructionalModalOpen && 
+      <Modal
+        isOpen={isInstructionalModalOpen}
+        onDismiss={() => setIsInstructionalModalOpen(false)}
+        title=''
+        onDissmissText='Dismiss'
+        isCentered={false}
+      >
+        <p className="text-cyan-500 text-l font-extrabold">
+        How to use TREC
+        </p>
+        <br />
+        <p>
+        <b>1. Where</b>
+        </p>
+        <p>
+        Choose a US city to explore
+        </p>
+        <p>
+        <b>2. What</b>
+        </p>
+        <p>
+        Select a climate risk and a transit destination to focus on
+        </p>
+        <p>
+        <b>3. Prioritize</b>
+        </p>
+        <p>
+        Adjust the filter to hone in on stations with low, medium, or high risk and access
+        </p>
+        <br />
+      </Modal>
+    }
+    </>
   );
 }
diff --git a/app/src/components/ui/Modal/index.tsx b/app/src/components/ui/Modal/index.tsx
@@ -9,6 +9,8 @@ type Props = {
   isOpen: boolean;
   onDismiss: () => void;
   title: string;
+  onDissmissText: string;
+  isCentered: boolean;
 };
 
 const overlayShow = keyframes`
@@ -42,16 +44,12 @@ const StyledOverlay = styled(Dialog.Overlay)`
 `;
 
 const StyledModalContent = styled(Dialog.Content)`
-  overflow-y:  scroll;
   background: white;
   box-shadow: hsl(206 22% 7% / 35%) 0px 10px 38px -10px,
     hsl(206 22% 7% / 20%) 0px 10px 20px -15px;
-  left: 50%;
   max-height: 85vh;
-  width: 80vw;
-  max-width: 90vw;
+  border-radius: 25px;
   position: fixed;
-  top: 50%;
   transform: translate(-50%, -50%);
 
   &:focus {
@@ -83,6 +81,8 @@ export default function Modal({
   onDismiss,
   title,
   className,
+  onDissmissText,
+  isCentered
 }: Props): JSX.Element {
   const onOpenChange = React.useCallback(
     (open: boolean) => {
@@ -97,14 +97,18 @@ export default function Modal({
     <Dialog.Root open={isOpen} onOpenChange={onOpenChange}>
       <Dialog.Portal>
         <StyledOverlay />
-        <StyledModalContent className="p-4 space-y-4">
+        <StyledModalContent className={`w-3/4 md:w-1/4 top-1/2 left-1/2 ${isCentered ? `md:top-1/2 md:left-1/2` : `md:top-3/4 md:left-96`}`}>
+          <div className="p-6 space-y-4">
           <StyledModalTitle className="text-xl text-slate-800">
             {title}
           </StyledModalTitle>
-          <div className={className}>{children}</div>
-          <Dialog.Close asChild>
-            <Button>Close</Button>
-          </Dialog.Close>
+          <div className={`${className} overflow-y-scroll`}>{children}</div>
+          </div>
+          <div >
+            <Dialog.Close asChild>
+              <Button className="w-full p-4 bg-cyan-500 text-white rounded-b-3xl">{onDissmissText}</Button>
+            </Dialog.Close>
+          </div>
         </StyledModalContent>
       </Dialog.Portal>
     </Dialog.Root>