From 97d4b34219ff3ec1a073f19147b5f647e9c5c316 Mon Sep 17 00:00:00 2001
From: nofurtherinformation <dhalpern@uchicago.edu>
Date: Tue, 6 Aug 2024 09:52:19 -0500
Subject: [PATCH] Fix report maps access to md content

---
 components/Pages/Map/Renderer.tsx             |  8 +++++--
 .../ReportLayout/ClientReportRenderer.tsx     |  1 +
 components/ReportLayout/ReportLayout.tsx      | 21 ++++++++++++++++---
 components/ReportLayout/ReportRenderer.tsx    |  5 ++++-
 components/ReportLayout/Sections.tsx          |  9 +++++---
 5 files changed, 35 insertions(+), 9 deletions(-)

diff --git a/components/Pages/Map/Renderer.tsx b/components/Pages/Map/Renderer.tsx
index e7a601d..e4c14bd 100644
--- a/components/Pages/Map/Renderer.tsx
+++ b/components/Pages/Map/Renderer.tsx
@@ -5,7 +5,11 @@ import { useMarkdownContextProvider } from "hooks/useMarkdownContext"
 // lazy load the map
 const Map = dynamic(() => import("components/Map/Map"), { ssr: false })
 
-export const Renderer: React.FC<{ pageInfo: any; stats: any }> = ({ pageInfo, stats }) => {
+export const Renderer: React.FC<{ pageInfo: any; stats: any; initialFilter?: any }> = ({
+  pageInfo,
+  stats,
+  initialFilter,
+}) => {
   const MarkdownProvider = useMarkdownContextProvider({
     pageInfo,
     stats,
@@ -13,7 +17,7 @@ export const Renderer: React.FC<{ pageInfo: any; stats: any }> = ({ pageInfo, st
 
   return (
     <MarkdownProvider>
-      <Map />
+      <Map initialFilter={initialFilter} />
     </MarkdownProvider>
   )
 }
diff --git a/components/ReportLayout/ClientReportRenderer.tsx b/components/ReportLayout/ClientReportRenderer.tsx
index 72803b7..eda4bc6 100644
--- a/components/ReportLayout/ClientReportRenderer.tsx
+++ b/components/ReportLayout/ClientReportRenderer.tsx
@@ -10,6 +10,7 @@ export const ClientReportRenderer: React.FC<{
   unit: string
   children: React.ReactNode
   showHeader?: boolean
+  mapPageInfo?: any
 }> = (props) => {
   const {
     comparability,
diff --git a/components/ReportLayout/ReportLayout.tsx b/components/ReportLayout/ReportLayout.tsx
index 1a0c8fc..4c114bc 100644
--- a/components/ReportLayout/ReportLayout.tsx
+++ b/components/ReportLayout/ReportLayout.tsx
@@ -24,9 +24,10 @@ const comparability = {
 export const ReportLayout: React.FC<ReportLayoutProps> = async ({ id, showHeader = true }) => {
   const unit = units[id.length as keyof typeof units]
   const comparabilityOptions = comparability[id.length as keyof typeof comparability]
-  const [_data, statText] = await Promise.all([
+  const [_data, statText, mapPageInfo] = await Promise.all([
     getSummaryStats<any>(unit, id),
     getMdxContent("statistics", "primary.mdx"),
+    getMdxContent("page", "map.mdx"),
   ])
 
   if (!_data.ok) {
@@ -35,8 +36,22 @@ export const ReportLayout: React.FC<ReportLayoutProps> = async ({ id, showHeader
   const Wrapper = comparabilityOptions.length > 1 ? ComparabilityProvider : React.Fragment
   return (
     <Wrapper comparabilityOptions={comparabilityOptions}>
-      <ClientReportRenderer id={id} _data={_data} statText={statText} unit={unit} showHeader={showHeader}>
-        <ReportRenderer id={id} _data={_data} statText={statText} unit={unit} showHeader={showHeader} />
+      <ClientReportRenderer
+        id={id}
+        _data={_data}
+        statText={statText}
+        unit={unit}
+        showHeader={showHeader}
+        mapPageInfo={mapPageInfo}
+      >
+        <ReportRenderer
+          id={id}
+          _data={_data}
+          statText={statText}
+          unit={unit}
+          showHeader={showHeader}
+          mapPageInfo={mapPageInfo}
+        />
       </ClientReportRenderer>
     </Wrapper>
   )
diff --git a/components/ReportLayout/ReportRenderer.tsx b/components/ReportLayout/ReportRenderer.tsx
index 19ff5d5..c0e89d8 100644
--- a/components/ReportLayout/ReportRenderer.tsx
+++ b/components/ReportLayout/ReportRenderer.tsx
@@ -14,7 +14,8 @@ export const ReportRenderer: React.FC<{
   comparability?: string
   children?: React.ReactNode
   showHeader?: boolean
-}> = ({ _data, statText, id, unit, comparability, children, showHeader }) => {
+  mapPageInfo?: any
+}> = ({ _data, statText, id, unit, comparability, children, showHeader, mapPageInfo }) => {
   const { stats, name, data, foodAccess, marketPower, segregation, economicAdvantage, descriptionText, raceData } =
     renderReportText(_data.result!, statText, id, comparability)
 
@@ -91,8 +92,10 @@ export const ReportRenderer: React.FC<{
               id={id}
               data={data}
               stats={stats}
+              statText={statText}
               raceData={raceData}
               unit={unit}
+              mapPageInfo={mapPageInfo}
             />
           ))}
         </div>
diff --git a/components/ReportLayout/Sections.tsx b/components/ReportLayout/Sections.tsx
index abbb7cd..0b3d812 100644
--- a/components/ReportLayout/Sections.tsx
+++ b/components/ReportLayout/Sections.tsx
@@ -1,11 +1,12 @@
 import dynamic from "next/dynamic"
 import React from "react"
+import { Renderer as MapInner } from "components/Pages/Map/Renderer"
 import StatList from "components/StatList"
 import TimeseriesChart from "components/TimeseriesChart"
 import Tooltip from "components/Tooltip"
 import { columnsDict, type DataColumns, raceEthnicityLabels } from "utils/data/config"
 
-const Map = dynamic(() => import("components/Map/Map"), { ssr: false })
+// const Map = dynamic(() => import("components/Map/MapInner"), { ssr: false })
 const StoreList = dynamic(() => import("components/StoreList"), { ssr: false })
 // const ComparisonOverTimeChart = dynamic(() => import("components/ComparisonOverTime"), { ssr: false })
 const PieChart = dynamic(() => import("components/PieChart/PieChart"), { ssr: false })
@@ -55,7 +56,9 @@ export const ReportSections: React.FC<{
   raceData: any
   unit: string
   showTitle?: boolean
-}> = ({ component, id, data, stats, raceData, unit, divId, showTitle = true }) => {
+  mapPageInfo?: any
+  statText?: any
+}> = ({ component, id, data, stats, statText, raceData, unit, divId, showTitle = true, mapPageInfo }) => {
   switch (component) {
     case "Key Statistics":
       return (
@@ -84,7 +87,7 @@ export const ReportSections: React.FC<{
         <div id={divId}>
           {!!showTitle && <h3 className="pb-2 text-2xl">Area Map</h3>}
           <div className="relative h-[50vh] overflow-hidden">
-            <Map initialFilter={id} />
+            <MapInner initialFilter={id} pageInfo={mapPageInfo} stats={statText} />
           </div>
         </div>
       )