Various fixes

app/resources/page.tsx

@@ -2,7 +2,7 @@ import SectionRenderer from "components/SectionRenderer";
 import { getMdxContent } from "hooks/useMdxContent";
 
 export const metadata = {
-  title: "Resources :: Feeding Fairness"
+  title: "Resources :: Grocery Gap Atlas"
 }
 
 export default async function ResourcesPage() {

components/Map/Map.tsx

@@ -109,6 +109,7 @@ export const Map: React.FC<MapProps> = ({ initialFilter, simpleMap = false, onCl
     }
     handleResize()
     return () => {
+      dispatch(setTooltipInfo(null))
       if (typeof window !== "undefined") {
         window?.removeEventListener("resize", handleResize)
       }

components/MapInfoSection/MapInfoSection.tsx

@@ -70,6 +70,7 @@ export const MapInfoSection: React.FC = () => {
     const getData = async () => {
       if (clicked?.id && data?.id !== clicked.id) {
         const res = await globals.ds.runQuery(`SELECT * FROM ${dataTableName} WHERE ${idColumn} = ${clicked.id}`)
+        console.log(JSON.parse(globals.ds.stringifyJsonWithBigInts(res[0])))
         const tooltipData = globals.ds.formatTooltipData(res[0])
         const parentCompanyData = formatParentCompanyData(res[0])
         const race = cleanRaceData(res[0])
@@ -101,7 +102,7 @@ export const MapInfoSection: React.FC = () => {
         <div className="w-full relative h-full">
           <h3 className="text-2xl max-w-[75%]">{data?.data?.NAME || clicked.id}</h3>
           <div className="m-x-auto my-2 flex w-full flex-row items-center justify-between gap-4 rounded-xl border-2 border-neutral-200 p-2 text-xs">
-            <p>Open Report:</p>
+            <p>Open the report for this area</p>
             <a
               href={`/tract/${clicked.id}`}
               className="border-b-2 border-black transition-colors hover:border-primary-500 hover:text-primary-500"

components/MapTooltip/MapTooltip.tsx

@@ -14,6 +14,7 @@ export const MapTooltipInner: React.FC<
   const { id, data: tooltipData } = tooltip || { id: "", data: [] }
   const data = globals?.ds?.tooltipResults?.[id]
   const _rawData = globals?.ds?._rawData?.[id]
+
   const currentColumn = useAppSelector((state) => {
     const colName = state.map.currentColumn
     const colConfig = columnsDict[colName]
@@ -22,6 +23,7 @@ export const MapTooltipInner: React.FC<
       colConfig,
     }
   })
+
   if (!data) {
     return (
       <svg className="spinner" width="2rem" height="2rem" viewBox="0 0 50 50">

components/MapTooltip/MapTooltipSections.tsx

@@ -37,7 +37,7 @@ export const TooltipSectionsRenderer: React.FC<{ sections: any[], children?:Reac
       {/* flex non lead sections in each row */}
       {children}
       <p className="text-xs pt-4">
-        <i>Click for more info</i>
+        <i>Click for more info in the sidebar</i>
       </p>
     </>
   )

components/Pages/Home/Renderer.tsx

@@ -73,9 +73,10 @@ export const Renderer: React.FC<HomeProps> = ({ pageInfo }) => {
                 <span className="block text-theme-navy-500" style={{ WebkitTextStroke: "2px white" }}>
                   {title.split(" ")[1]}
                 </span>
+                {title.split(" ")[2]}
               </h1>
             </div>
-            <div className="my-12 lg:my-0">
+            <div className="my-12 flex flex-col justify-end lg:my-0">
               <h2 className="text-3xl font-bold">{getFirstTextElement(sections, "Subtitle")}</h2>
             </div>
           </div>

components/Tooltip/Tooltip.tsx

@@ -25,7 +25,7 @@ export function Tooltip({
           <RadixTooltip.Content
             side={side}
             sideOffset={5}
-            className={twMerge(tooltipContent({ intent, size, className })) + "max-w-xs max-h-96 overflow-auto"}
+            className={twMerge(tooltipContent({ intent, size, className })) + "max-w-xs max-h-96 overflow-auto text-xs"}
           >
             {explainer}
             {withArrow ? <RadixTooltip.Arrow className={twMerge(tooltipArrow({ intent, size, className }))} /> : null}

content/page/changelog.mdx

@@ -1,4 +1,9 @@
 
+* 7/3
+  * The map sidebar now displays richer information, and the layout with the variable selector/filters is more intuitive
+  * The map tooltip now shows 4 key scores and the current selected variable 
+  * Added data note to clarify the color scale when the color scale is filtered to a particular state or county
+  * Fixed a few rendering bugs with filtering and monovariate data options
 * 6/12
   * Added a more detail pane when you click on an area. From this details pane you can open neighborhood, county, and state level reports for the corresponding areas and view the available data (WIP to be refined)
   * Added filters/highlights based on market dominance percentage. These appear in the legend when active