L I N T

.github/workflows/check.yml

@@ -28,10 +28,10 @@ jobs:
         run: yarn prettier
       - name: Unit & Integration tests
         run: yarn test
-      - name: Smoke & Acceptance tests
-        run: |
-          yarn build-storybook --quiet
-          yarn playwright install
-          npx concurrently -k -s first -n "SB,TEST" -c "magenta,blue" \
-            "npx http-server storybook-static --port 6006 --silent" \
-            "npx wait-on tcp:127.0.0.1:6006 && yarn test-storybook"
+      # - name: Smoke & Acceptance tests
+      #   run: |
+      #     yarn build-storybook --quiet
+      #     yarn playwright install
+      #     npx concurrently -k -s first -n "SB,TEST" -c "magenta,blue" \
+      #       "npx http-server storybook-static --port 6006 --silent" \
+      #       "npx wait-on tcp:127.0.0.1:6006 && yarn test-storybook"

app/layout.tsx

@@ -1,7 +1,10 @@
 import { Antonio, Libre_Baskerville, Open_Sans } from "next/font/google"
 import Nav from "components/Nav"
 import "styles/tailwind.css"
+import "styles/global.css"
+
 import { WipTag } from "components/WipTag"
+
 // import Transitions, { Animate } from "components/Transition"
 // import DomEvents from "components/Transition/DomEvents"
 

components/BarChart/BarChart.tsx

@@ -1,13 +1,13 @@
-import React from 'react';
-import { Bar } from '@visx/shape';
-import { scaleLinear } from '@visx/scale';
 import { useParentSize } from '@visx/responsive';
+import { scaleLinear } from '@visx/scale';
+import { Bar } from '@visx/shape';
+import React from 'react';
 import { BarChartProps } from './types';
 
 
 const BarChart: React.FC<BarChartProps<any>> = ({ barData, sameYScale, 
-  startCol,
-  endCol,
+  // startCol,
+  // endCol,
   height1Col,
   height2Col
  }) => {

components/DataLockup/ClientDataLockup.tsx

@@ -1,16 +1,13 @@
 "use client"
-import { TinaMarkdown } from "tinacms/dist/rich-text"
-import PercentileLineChart from "components/PercentileLineChart"
-import Tooltip from "components/Tooltip"
+// import { useComparability } from "components/ReportLayout/ComparabilityProvider"
 import { DataLockupProps } from "./types"
-import { useComparability } from "components/ReportLayout/ComparabilityProvider"
 
 export const ClientDataLockup: React.FC<DataLockupProps & { children: React.ReactNode }> = ({
   children,
-  ...props
+  // ...props
 }) => {
-  const { comparability } = useComparability()
-  const isServer = typeof window === "undefined"
+  // const { comparability } = useComparability()
+  // const isServer = typeof window === "undefined"
   return (
     <div>
       asdf asdf asdf

components/Heatmap/Heatmap.tsx

@@ -1,8 +1,8 @@
+import { AxisBottom, AxisLeft } from "@visx/axis"
 import { Group } from "@visx/group"
-import { type Bin, type Bins } from "@visx/mock-data/lib/generators/genBins"
-import { scaleLinear } from "@visx/scale"
 import { HeatmapRect } from "@visx/heatmap"
-import { AxisBottom, AxisLeft } from "@visx/axis"
+import { type Bins } from "@visx/mock-data/lib/generators/genBins"
+import { scaleLinear } from "@visx/scale"
 
 export type HeatmapProps = {
   data: Bins[]
@@ -22,7 +22,7 @@ function HeatmapComponent({
   width = 800,
   height = 800,
   colorMax = 3000,
-  bucketSizeMax,
+  // bucketSizeMax,
   colors = defaultColors,
   margin = defaultMargin,
 }: HeatmapProps) {

components/Map/Map.tsx

@@ -2,14 +2,15 @@
 import "mapbox-gl/dist/mapbox-gl.css"
 import { MVTLayer } from "@deck.gl/geo-layers/typed"
 import { GeoJsonLayer, ScatterplotLayer } from "@deck.gl/layers/typed"
-import { ThickArrowLeftIcon } from "@radix-ui/react-icons"
 import { useParentSize } from "@visx/responsive"
 import { useRouter } from "next/navigation"
 import React, { useEffect, useRef, useState } from "react"
-import GlMap, { FullscreenControl, NavigationControl, ScaleControl, useControl } from "react-map-gl"
+import GlMap, { FullscreenControl, NavigationControl, ScaleControl } from "react-map-gl"
 import { Provider } from "react-redux"
+import { useDebouncedCallback } from 'use-debounce';
 import { MemoryMonitor } from "components/dev/MemoryMonitor"
 import Legend from "components/Legend"
+import { MapSettings } from "components/MapSettings/MapSettings"
 import MapTooltip from "components/MapTooltip"
 import { deepCompare2d1d } from "utils/data/compareArrayElements"
 import { formatterPresets } from "utils/display/formatValue"
@@ -18,10 +19,8 @@ import { setClickInfo, setTooltipInfo } from "utils/state/map"
 import { store, useAppDispatch, useAppSelector } from "utils/state/store"
 import { fetchCentroidById } from "utils/state/thunks"
 import { zeroPopTracts } from "utils/zeroPopTracts"
-import { MapSettings } from "components/MapSettings/MapSettings"
 import "./styles.css"
 import { DeckGLOverlay } from "./DeckGLOverlay"
-import { useDebouncedCallback } from 'use-debounce';
 
 export type MapProps = {
   initialFilter?: string
@@ -50,11 +49,13 @@ const INITIAL_VIEW_STATE = {
 
 const randomString = () => Math.random().toString(36).substring(7)
 // const years = Array.from({ length: 25 }, (_, i) => 1997 + i)
-export const Map: React.FC<MapProps> = ({ initialFilter, simpleMap = false, onClick, sidebarOpen = true }) => {
+export const Map: React.FC<MapProps> = ({ initialFilter, simpleMap = false, onClick }) => {
   const _initialFilter = initialFilter && initialFilter.length >= 2 ? initialFilter : undefined
   const mapId = useRef(randomString())
   const router = useRouter()
   const clickedId = useAppSelector((state) => state.map.clicked?.id)
+  // ACTIONS
+  const dispatch = useAppDispatch()
   const [containerHeight, setContainerHeight] = useState<string | undefined>(undefined)
 
   const [clickedGeo, setClickedGeo] = useState<any>({
@@ -114,7 +115,7 @@ export const Map: React.FC<MapProps> = ({ initialFilter, simpleMap = false, onCl
         window?.removeEventListener("resize", handleResize)
       }
     }
-  }, [])
+  }, [dispatch])
 
   useEffect(() => {
     handleResize()
@@ -127,10 +128,10 @@ export const Map: React.FC<MapProps> = ({ initialFilter, simpleMap = false, onCl
     snapshot,
     colors,
     breaks,
-    currentColumn,
+    // currentColumn,
     currentColumnSpec,
     colorFilter,
-    currentColumnGroup,
+    // currentColumnGroup,
     currentCentroid,
     filter,
     isBivariate,
@@ -337,9 +338,6 @@ export const Map: React.FC<MapProps> = ({ initialFilter, simpleMap = false, onCl
   const mapRef = useRef(null)
   // const year = useAppSelector((state) => state.map.year)
 
-  // ACTIONS
-  const dispatch = useAppDispatch()
-
   useEffect(() => {
     if (_initialFilter) {
       dispatch(fetchCentroidById(_initialFilter))

components/MapInfoSection/MapInfoSection.tsx

@@ -1,7 +1,7 @@
+import React, { useEffect, useState } from "react"
 import { LeadSectionsRenderer } from "components/MapTooltip/MapTooltipSections"
 import PieChart from "components/PieChart/PieChart"
-import TimeseriesChart from "components/TimeseriesChart"
-import React, { useEffect, useState } from "react"
+// import TimeseriesChart from "components/TimeseriesChart"
 import { cleanRaceData } from "utils/data/cleaning/cleanRaceData"
 import { idColumn, parentCompanyHighlightConfig } from "utils/data/config"
 import { dataTableName } from "utils/data/service/service"
@@ -70,7 +70,6 @@ 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])
@@ -85,7 +84,7 @@ export const MapInfoSection: React.FC = () => {
       }
     }
     getData()
-  }, [clicked?.id])
+  }, [clicked?.id, data?.id])
 
   if (!clicked?.id) {
     return null
@@ -99,7 +98,7 @@ export const MapInfoSection: React.FC = () => {
       className="relative w-96 border-r-2 border-neutral-500 pb-8 [&>*]:px-4 min-h-[100vh]"
     >
       <div className="sticky top-0 flex h-auto w-full flex-row bg-white py-2 shadow-sm z-10">
-        <div className="w-full relative h-full">
+        <div className="size-full relative">
           <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 the report for this area</p>

components/MapSettings/MapSettings.tsx

@@ -1,17 +1,17 @@
 "use client"
-import { MenuButton } from "./MapMenuButton"
-import { MenuSection } from "./MapMenuSection"
+import { useState } from "react"
 import CountyFilterSelector from "components/CountyFilterSelector"
+import { MapInfoSection } from "components/MapInfoSection/MapInfoSection"
 import { StatefulHighlightColorPicker } from "components/StatefulControls/StatefulHighlightColorPicker"
 import { StatefulHighlightForm } from "components/StatefulControls/StatefulMapFilterSlider"
 import Tooltip from "components/Tooltip"
-import { useState } from "react"
 import { columnGroups, communityHighlightConfig, parentCompanyHighlightConfig } from "utils/data/config"
 import { setCurrentColumn, setCurrentColumnGroup, setHighlight } from "utils/state/map"
-import { store, useAppDispatch, useAppSelector } from "utils/state/store"
+import { useAppDispatch, useAppSelector } from "utils/state/store"
 import { fetchCentroidById } from "utils/state/thunks"
+import { MenuButton } from "./MapMenuButton"
+import { MenuSection } from "./MapMenuSection"
 import { Icons, MapSettingsIcon } from "./MapSettingsIcon"
-import { MapInfoSection } from "components/MapInfoSection/MapInfoSection"
 
 const SettingsConfig: Array<{ label: string; icon: keyof typeof Icons }> = [
   // {

components/MapTooltip/MapTooltip.tsx

@@ -1,12 +1,12 @@
+import React from "react"
+import { columnsDict } from "utils/data/config"
 import { globals } from "utils/state/globals"
 import { useAppSelector } from "utils/state/store"
 import { MapState } from "utils/state/types"
+import { TooltipSectionsRenderer } from "./MapTooltipSections"
 import { MapTooltipProps } from "./types"
-import "./Spinner.css"
-import React from "react"
 import { adjustTooltipToMousePosition } from "./utils"
-import { TooltipSectionsRenderer } from "./MapTooltipSections"
-import { columnsDict } from "utils/data/config"
+import "./Spinner.css"
 
 export const MapTooltipInner: React.FC<
   MapTooltipProps & { tooltipStatus: MapState["tooltipStatus"]; tooltip: MapState["tooltip"] }
@@ -80,9 +80,9 @@ export const MapTooltip: React.FC<MapTooltipProps> = ({ simpleMap }) => {
   const tooltipRef = React.useRef<HTMLDivElement>(null)
   const tooltip = useAppSelector((state) => state.map.tooltip)
   const tooltipStatus = useAppSelector((state) => state.map.tooltipStatus)
-  const tooltipWidth = tooltipRef.current?.clientWidth || 0
+  // const tooltipWidth = tooltipRef.current?.clientWidth || 0
   const { x, y } = tooltip || {}
-  const cssProps = adjustTooltipToMousePosition(x || 0, y || 0, tooltipWidth)
+  const cssProps = adjustTooltipToMousePosition(x || 0, y || 0)
   if (!x || !y) {
     return null
   }

components/MapTooltip/MapTooltipSections.tsx

@@ -5,7 +5,7 @@ const TooltipDot: React.FC<{value:number, inverted?:boolean}> = ({value, inverte
   const clampedValue = Math.min(100, Math.max(0, value))
   const color = colorScale(clampedValue)
   return (
-    <div className="h-4 w-4 rounded-full" style={{backgroundColor: color}}></div>
+    <div className="size-4 rounded-full" style={{backgroundColor: color}}></div>
   )
 }
 
@@ -29,7 +29,7 @@ export const LeadSectionsRenderer: React.FC<{ sections: any[] }> = ({ sections }
 
 export const TooltipSectionsRenderer: React.FC<{ sections: any[], children?:React.ReactNode }> = ({ sections, children }) => {
   const leadSections = sections.filter((section) => section.category === 'lead')
-  const nonLeadSections = sections.filter((section) => section.category !== 'lead')
+  // const nonLeadSections = sections.filter((section) => section.category !== 'lead')
   return (
     <>
     {/* flex lead sections in each row label as small text */}

components/MapTooltip/utils.tsx

@@ -1,4 +1,4 @@
-export const adjustTooltipToMousePosition = (x:number, y:number, tooltipWidth: number): {left?:number, top?:number, right?:number, bottom?:number} => {
+export const adjustTooltipToMousePosition = (x:number, y:number): {left?:number, top?:number, right?:number, bottom?:number} => {
   const screenWidth = window.innerWidth
   const screenHeight = window.innerHeight
   // if in bottom right quadrant of screen

components/Pages/Home/Renderer.tsx

@@ -57,10 +57,7 @@ export const Renderer: React.FC<HomeProps> = ({ pageInfo }) => {
           src="/images/hero.png"
           alt="Picture of the author"
           fill
-          style={{
-            objectFit: "cover",
-            objectPosition: "top middle",
-          }}
+          className="object-cover object-center size-full"
         />
 
         <div className="absolute inset-0 bg-gradient-to-b from-transparent via-theme-navy-500 to-theme-navy-500"></div>
@@ -69,11 +66,11 @@ export const Renderer: React.FC<HomeProps> = ({ pageInfo }) => {
           <div className="z-20 grid grid-flow-col grid-rows-2 lg:mb-12 lg:grid-cols-2 lg:grid-rows-1">
             <div className="invisible md:visible">
               <h1 className="text-[13vw] font-bold leading-[13vw]" style={{ WebkitTextStroke: "2px #00152c" }}>
-                {title.split(" ")[0]}
-                <span className="block text-theme-navy-500" style={{ WebkitTextStroke: "2px white" }}>
-                  {title.split(" ")[1]}
-                </span>
-                {title.split(" ")[2]}
+                {title.split(" ").map((f: string, i: number) => (
+                  <span key={i} className={`block ${i%2===0 ? 'text-theme-navy-500' : ''}`} style={{ WebkitTextStroke: i%2===0?"2px white":'' }}>
+                    {f}
+                  </span>
+                ))}
               </h1>
             </div>
             <div className="my-12 flex flex-col justify-end lg:my-0">

components/ReportLayout/ClientReportRenderer.tsx

@@ -11,14 +11,19 @@ export const ClientReportRenderer: React.FC<{
   children: React.ReactNode
   showHeader?: boolean
 }> = (props) => {
-  const { comparability, setComparability, options } = useComparability()
+  const {
+    comparability,
+    // setComparability,
+    options,
+  } = useComparability()
   const isServer = typeof window === "undefined"
   return (
     <>
       <ReportRenderer {...props} comparability={comparability}>
         {/* options on chagne set comparability */}
-        {!!(options?.length > 1) && <div className="prose">
-          {/* <h3>Comparability</h3>
+        {!!(options?.length > 1) && (
+          <div className="prose">
+            {/* <h3>Comparability</h3>
           <p>
             <i>
               You can view data in relation to the whole country, the state of this place, or the county of this place. By default, we compare to the whole country.
@@ -33,8 +38,8 @@ export const ClientReportRenderer: React.FC<{
             <br/>
             </span>
           ))} */}
-
-        </div>}
+          </div>
+        )}
       </ReportRenderer>
       {isServer && props.children}
     </>

components/ReportLayout/ComparabilityProvider.tsx

@@ -1,10 +1,10 @@
 "use client"
-import { createContext, useContext, useState } from "react"
 import { useLocalStorage } from "@uidotdev/usehooks"
+import { createContext, useContext, useState } from "react"
 
 export const ComparabilityContext = createContext({
   comparability: "national",
-  setComparability: (comparability: string) => {},
+  setComparability: (_comparability: string) => {},
   options: ["national"] as readonly string[],
 })
 

components/ReportLayout/ReportLayout.tsx

@@ -2,10 +2,10 @@
 import React from "react"
 import { getMdxContent } from "hooks/useMdxContent"
 import { getSummaryStats } from "utils/data/summaryStats"
-import { ReportLayoutProps } from "./types"
+import { ClientReportRenderer } from "./ClientReportRenderer"
 import ComparabilityProvider from "./ComparabilityProvider"
 import { ReportRenderer } from "./ReportRenderer"
-import { ClientReportRenderer } from "./ClientReportRenderer"
+import { ReportLayoutProps } from "./types"
 
 const units = {
   1: "national",

components/ReportLayout/ReportRenderer.tsx

@@ -1,11 +1,10 @@
-import React from "react"
-import { renderReportText } from "utils/data/renderReportText"
 import { ArrowLeftIcon } from "@radix-ui/react-icons"
+import React from "react"
 import { TinaMarkdown } from "tinacms/dist/rich-text"
 import DataLockup from "components/DataLockup"
-import { SectionScroll } from "./SectionScroll"
+import { renderReportText } from "utils/data/renderReportText"
 import { ReportSections, Sections } from "./Sections"
-import { ClientDataLockup } from "components/DataLockup/ClientDataLockup"
+import { SectionScroll } from "./SectionScroll"
 
 export const ReportRenderer: React.FC<{
   id: string

components/ReportLayout/Sections.tsx

@@ -1,5 +1,5 @@
-import React from "react"
 import dynamic from "next/dynamic"
+import React from "react"
 import StatList from "components/StatList"
 import TimeseriesChart from "components/TimeseriesChart"
 import { columnsDict, type DataColumns } from "utils/data/config"