added a new menu panel for /explore page

.vscode/launch.json

@@ -0,0 +1,15 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "pwa-chrome",
+            "request": "launch",
+            "name": "Launch Chrome against localhost",
+            "url": "http://localhost:3000",
+            "webRoot": "${workspaceFolder}"
+        }
+    ]
+}

src/@types/explorePage.d.ts

@@ -1,5 +1,5 @@
 interface ExplorePageSidePanelType extends TogglePanel {
-  narrative: string;
+  narrativeStr: string;
   setNarrative: React.Dispatch<React.SetStateAction<any>>;
 }
 
@@ -11,7 +11,7 @@ interface NarrativeType {
   visible: string[];
 }
 
-interface ExplorePageSidePanelType extends TogglePanel {
+interface NarrativeTopPanelType extends TogglePanel{
   narrative: string;
   setNarrative: React.Dispatch<React.SetStateAction<any>>;
 }

src/App.tsx

@@ -21,7 +21,9 @@ const MattapanMappingRoutes = () => (
     <Route path='/' element={<LandingPage />} />
     <Route path='/about' element={<AboutPage />} />
     <Route path='/explore' element={<MapPage />} />
-    <Route path='/story' element={<StorytellingMap />} />
+    <Route path='/story/*' element={<StorytellingMap />}>
+      <Route path=":narrativeStr" element={<StorytellingMap/>}/>
+    </Route>
     <Route path='/meet' element={<MeetPage />} />
     <Route path='/share' element={<SharePage />} />
     <Route path='/act' element={<ActPage />} />

src/molecules/MapStory.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
 import { Scrollama, Step } from 'react-scrollama';
 import { MapContext } from 'react-map-gl';
-import { Chapter, Header, Footer } from '@/atoms/MapStoryAtoms';
-
+import { Chapter, Footer} from '@/atoms/MapStoryAtoms';
+import { NarrativeMenu } from '@/organisms/NarrativeMenu';
+import styled from '@emotion/styled';
 
 const layerTypes = {
   'fill': ['fill-opacity'],
@@ -26,7 +27,14 @@ export function Story({ onMarkerCoordsChange, chapterData, headerTitle, headerSu
 
   const { map } = React.useContext(MapContext);
   const [mapRef, setMapRef]: [any, React.Dispatch<React.SetStateAction<any>>] = React.useState(map.current);
-
+
+  const StyledHeader = styled.header`
+  margin: auto;
+  width: 100%;
+  position: relative;
+  z-index: 5;
+  `
+
   React.useEffect(() => {
     setMapRef(map?.current?.getMap());
   }, [map])
@@ -120,7 +128,12 @@ export function Story({ onMarkerCoordsChange, chapterData, headerTitle, headerSu
 
   return (
     <div id="story">
-      <Header title={headerTitle} subtitle={headerSubtitle} byline={headerByline} />
+      {/* <Header title={headerTitle} subtitle={headerSubtitle} byline={headerByline} /> */}
+      <div id="menu">
+        <StyledHeader>
+          <NarrativeMenu></NarrativeMenu>
+        </StyledHeader>
+      </div>
       <div id='features' style={{ paddingTop: '10vh', paddingBottom: '10vh' }}>
       <Scrollama
         onStepEnter={onStepEnter}

src/organisms/Narrative.tsx

@@ -4,6 +4,8 @@ import { Headline, BodySmall, SubHeadline, Title } from '@/atoms/Tokens';
 import { Theme } from '@/theme/Theme';
 import { NARRATIVES } from '@/data/ExplorePageData';
 import { TogglePanel } from '@/molecules/TogglePanel';
+import { useEffect } from 'react';
+import { useParams } from 'react-router-dom';
 
 const NarrativeButton = styled.button`
   background: ${ props => props.theme.colors.white };
@@ -24,10 +26,10 @@ const NarrativeSelection = styled.div`
   flex-direction: column;
 `;
 
-const NarrativeContainer = styled.div<{ color: string }>`
+const NarrativeContainer = styled.div<{ color: string, width: string }>`
   background: ${ props => props.color };
   height: 100vh;
-  width: 550px;
+  width: ${props => props.width};
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -53,6 +55,15 @@ const SelectedNarrativeTitle = styled(Title)`
 `
 
 const Narratives = ({ onNarrativeChange }: { onNarrativeChange: (color: string, name: string) => void }) => {
+  let { narrativeStr } = useParams();
+  useEffect(() =>{
+    const found = NARRATIVES.find(({name, color, visible},i,ar) =>{
+      return {color, name};
+    })
+
+    // onNarrativeChange(found?.color??'', found?.name??'');
+    console.log('found color', found?.color??'')
+  },[narrativeStr] );
   return (
     <>
       <NarrativeSubHeadline>Choose a narrative</NarrativeSubHeadline>
@@ -67,11 +78,11 @@ const Narratives = ({ onNarrativeChange }: { onNarrativeChange: (color: string,
   );
 }
 
-const NarrativePanel = ({ narrative, data, toggleState, toggleHandler, onNarrativeChange }: NarrativePanelType) => {
-  if (narrative) {
+const NarrativePanel = ({ narrativeStr, data, toggleState, toggleHandler, onNarrativeChange }: NarrativePanelType) => {
+  if (narrativeStr) {
     return (
       <>
-        <SelectedNarrativeTitle>{ narrative }</SelectedNarrativeTitle>
+        <SelectedNarrativeTitle>{ narrativeStr }</SelectedNarrativeTitle>
         <NarrativeButton onClick={ () => onNarrativeChange(Theme.colors.peach, '') }>Choose another Narrative</NarrativeButton>
         <TogglePanel data={ data } toggleState={ toggleState } toggleHandler={ toggleHandler } />
       </>
@@ -83,18 +94,49 @@ const NarrativePanel = ({ narrative, data, toggleState, toggleHandler, onNarrati
   );
 }
 
-export const ExplorePageNarratives = ({ narrative, data, toggleState, toggleHandler, setNarrative }: ExplorePageSidePanelType) => {
+const NarrativeTopMenuPanel = ({ narrativeStr, data, toggleState, toggleHandler, onNarrativeChange }: NarrativePanelType) => {
+  if (narrativeStr) {
+    return (
+      <>
+        <SelectedNarrativeTitle>{ narrativeStr }</SelectedNarrativeTitle>
+        <NarrativeButton onClick={ () => onNarrativeChange(Theme.colors.peach, '') }>Choose another Narrative</NarrativeButton>
+      </>
+    );
+  }
+
+  return (
+    <Narratives onNarrativeChange={ onNarrativeChange }/>
+  );
+}
+
+export const ExplorePageNarratives = ({ narrativeStr, data, toggleState, toggleHandler, setNarrative }: ExplorePageSidePanelType) => {
   const [narrativeColor, setNarrativeColor] = React.useState(Theme.colors.peach);
+
+  const onNarrativeChange = (selectedNarrativeColor: string, selectedNarrative: string) => {
+    setNarrativeColor(selectedNarrativeColor);debugger
+    setNarrative(selectedNarrative)
+  };
+
+  return (
+    <NarrativeContainer color={ narrativeColor } width={ '550px' }>
+      <NarrativeHeadline color={ Theme.colors.white }>EXPLORE</NarrativeHeadline>
+      <NarrativePanel narrativeStr={ narrativeStr } data={ data } toggleState={ toggleState } toggleHandler={ toggleHandler } onNarrativeChange={ onNarrativeChange }/>
+    </NarrativeContainer>
+  )
+};
 
+export const NarrativeTopPanel = ({ narrativeStr, data, toggleState, toggleHandler, setNarrative }: ExplorePageSidePanelType) => {
+  const [narrativeColor, setNarrativeColor] = React.useState(Theme.colors.peach);
+
   const onNarrativeChange = (selectedNarrativeColor: string, selectedNarrative: string) => {
     setNarrativeColor(selectedNarrativeColor);
     setNarrative(selectedNarrative)
   };
 
   return (
-    <NarrativeContainer color={ narrativeColor }>
+    <NarrativeContainer color={ narrativeColor } width={ '100%' }>
       <NarrativeHeadline color={ Theme.colors.white }>EXPLORE</NarrativeHeadline>
-      <NarrativePanel narrative={ narrative } data={ data } toggleState={ toggleState } toggleHandler={ toggleHandler } onNarrativeChange={ onNarrativeChange }/>
+      <NarrativeTopMenuPanel narrativeStr={ narrativeStr } data={ data } toggleState={ toggleState } toggleHandler={ toggleHandler } onNarrativeChange={ onNarrativeChange }/>
     </NarrativeContainer>
   )
 };

src/organisms/NarrativeMenu.tsx

@@ -0,0 +1,58 @@
+import { ExplorePageToggleStates } from "@/data/ExplorePageData";
+import { useMapPageQuery } from "@/graphql/generated";
+import React from "react";
+import { NarrativeTopPanel } from "./Narrative";
+import { useNavigate, useParams  } from 'react-router-dom';
+//import { useSearchParams } from 'react-router-dom';
+
+export const NarrativeMenu = (props: any) => {
+    const { data: mapData } = useMapPageQuery();
+    const [data] = React.useState<Array<MapGeoJsonData>>([]);
+    const [narrativeData, setNarrativeData] = React.useState<Array<MapGeoJsonData>>([]);
+    const [featureToggle, setFeatureToggle]= React.useState<FeatureToggleState>({});
+    //const [narrative, setNarrative] = React.useState('');
+    const { Narratives: gqlNarrative, Boundaries: gqlBoundaries } = mapData || {};
+    const onToggleChange = (id: string) => {
+        setFeatureToggle({ ...featureToggle, [id]: !featureToggle[id] });
+      };
+    // let [searchParams, setSearchParams] = useSearchParams();
+    let navigate = useNavigate();
+    let { narrativeStr } = useParams();
+
+    React.useEffect(() => {
+    if (gqlNarrative !== undefined && gqlBoundaries !== undefined) {
+        const filteredNarratives = gqlNarrative.filter(({ name }) => name === narrativeStr);
+        if (filteredNarratives.length === 0) {
+        return;
+        }
+        const selectedNarrative = filteredNarratives[0];
+        const dataWithNarrative: MapGeoJsonData[] = JSON.parse(JSON.stringify(data));
+
+        selectedNarrative.boundaries.forEach(({ id }) => {
+        if (id === undefined || id === null) {
+            return;
+        }
+        const boundaryIndex = gqlBoundaries.findIndex(({ id: bid }) => bid === id);
+        const boundaryName = gqlBoundaries[boundaryIndex].name;
+        const idx = dataWithNarrative.findIndex(landmark => landmark.id === boundaryName);
+        dataWithNarrative[idx].visible = true;
+        });
+
+        setNarrativeData(dataWithNarrative);
+        setFeatureToggle(ExplorePageToggleStates(dataWithNarrative));
+    } else {
+        setNarrativeData(data);
+        setFeatureToggle({});
+    }
+    }, [narrativeStr, data, gqlNarrative, gqlBoundaries]);
+
+    return(
+        <>
+        <NarrativeTopPanel
+            narrativeStr={narrativeStr??''}
+            data={narrativeData}
+            toggleState={featureToggle}
+            toggleHandler={onToggleChange}
+            setNarrative={navigate}/></>
+    )
+}

src/pages/MapPage.tsx

@@ -7,6 +7,9 @@ import { Map } from '@/atoms/MapAtoms';
 import { MapLayers } from '@/molecules/MapLayers';
 import { Layout, StyledHeader, StyledFooter } from '@/templates/StandardLayout'
 import { useMapPageQuery } from '@/graphql/generated';
+// import { useNavigate } from 'react-router-dom';
+// import { useSearchParams } from 'react-router-dom';
+
 
 const MapContainer = styled.div`
   display: flex;
@@ -31,6 +34,8 @@ export default function MapPage() {
   const [narrativeData, setNarrativeData] = React.useState<Array<MapGeoJsonData>>([]);
   const [featureToggle, setFeatureToggle]= React.useState<FeatureToggleState>({});
   const [narrative, setNarrative] = React.useState('');
+  // let [searchParams, setSearchParams] = useSearchParams();
+  // let navigate = useNavigate();
 
   const { Narratives: gqlNarrative, Boundaries: gqlBoundaries } = mapData || {};
 
@@ -40,6 +45,15 @@ export default function MapPage() {
     setFeatureToggle({ ...featureToggle, [id]: !featureToggle[id] });
   };
 
+  // function handleSubmit(event: { preventDefault: () => void; target: any; }) {
+  //   event.preventDefault();
+  //   // The serialize function here would be responsible for
+  //   // creating an object of { key: value } pairs from the
+  //   // fields in the form that make up the query.
+  //   let params = serializeFormQuery(event.target);
+  //   setSearchParams(params);
+  // }
+
   React.useEffect(() => {
     const fetchAll = async () => {
       try {
@@ -98,7 +112,7 @@ export default function MapPage() {
       <StyledHeader />
       <ExplorePageContainer>
         <ExplorePageNarratives
-          narrative={ narrative }
+          narrativeStr={ narrative }
           data={ narrativeData }
           toggleState={ featureToggle }
           toggleHandler={ onToggleChange }
@@ -117,3 +131,5 @@ export default function MapPage() {
     </Layout>
   )
 }
+
+