Skip to content

Commit 84aba29

Browse files
joaquimdsjoaquimds
committed
Merge branch 'main' into feat/census-data-maps
2 parents 3d7a0f5 + eab2770 commit 84aba29

File tree

16 files changed

+456
-163
lines changed

16 files changed

+456
-163
lines changed

‎nextjs/src/__generated__/gql.ts

Lines changed: 12 additions & 7 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎nextjs/src/__generated__/graphql.ts

Lines changed: 18 additions & 12 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎nextjs/src/app/reports/[id]/(components)/MapLayers/PoliticalChoropleths.tsx

Lines changed: 14 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { MapBounds } from '@/__generated__/graphql'
22
import {
33
MapLoader,
44
useActiveTileset,
5-
useExplorerState,
5+
useExplorer,
66
useLoadedMap,
77
useMapBounds,
88
} from '@/lib/map'
@@ -72,7 +72,7 @@ const PoliticalChoropleths: React.FC<PoliticalChoroplethsProps> = ({
7272
: 'none'
7373

7474
const map = useLoadedMap()
75-
const [explorer, setExplorer] = useExplorerState()
75+
const explorer = useExplorer()
7676
useHoverOverBoundaryEvents(areasVisible === 'visible' ? activeTileset : null)
7777

7878
// Update map bounds and active tileset on pan/zoom
@@ -130,20 +130,16 @@ const PoliticalChoropleths: React.FC<PoliticalChoroplethsProps> = ({
130130
maxzoom={tileset.maxZoom}
131131
>
132132
{/* Fill of the boundary */}
133-
134-
<>
135-
<Layer
136-
beforeId="road-simple"
137-
id={`${tileset.mapboxSourceId}-fill`}
138-
source={tileset.mapboxSourceId}
139-
source-layer={tileset.sourceLayerId}
140-
type="fill"
141-
paint={fillsByLayer[tileset.mapboxSourceId] || {}}
142-
minzoom={tileset.minZoom}
143-
maxzoom={tileset.maxZoom}
144-
/>
145-
</>
146-
133+
<Layer
134+
beforeId="road-simple"
135+
id={`${tileset.mapboxSourceId}-fill`}
136+
source={tileset.mapboxSourceId}
137+
source-layer={tileset.sourceLayerId}
138+
type="fill"
139+
paint={fillsByLayer[tileset.mapboxSourceId] || {}}
140+
minzoom={tileset.minZoom}
141+
maxzoom={tileset.maxZoom}
142+
/>
147143
{/* Border of the boundary */}
148144
<Layer
149145
beforeId={PLACEHOLDER_LAYER_ID_CHOROPLETH}
@@ -156,8 +152,6 @@ const PoliticalChoropleths: React.FC<PoliticalChoroplethsProps> = ({
156152
'line-join': 'round',
157153
'line-round-limit': 0.1,
158154
}}
159-
minzoom={tileset.minZoom}
160-
maxzoom={tileset.maxZoom}
161155
/>
162156
{/* Border of the selected boundary */}
163157
<Layer
@@ -170,8 +164,8 @@ const PoliticalChoropleths: React.FC<PoliticalChoroplethsProps> = ({
170164
filter={[
171165
'==',
172166
['get', tileset.promoteId],
173-
explorer.entity === 'area'
174-
? explorer.id
167+
explorer.state.entity === 'area'
168+
? explorer.state.id
175169
: 'sOmE iMpOsSiBle iD tHaT wIlL uPdAtE mApBoX',
176170
]}
177171
layout={{
@@ -181,7 +175,6 @@ const PoliticalChoropleths: React.FC<PoliticalChoroplethsProps> = ({
181175
}}
182176
/>
183177
</Source>
184-
185178
<Source
186179
id={`${tileset.mapboxSourceId}-area-count`}
187180
type="geojson"

‎nextjs/src/app/reports/[id]/(components)/ReportComboBox.tsx

Lines changed: 15 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ import {
1717
PopoverContent,
1818
PopoverTrigger,
1919
} from '@/components/ui/popover'
20-
import { useExplorerState } from '@/lib/map'
20+
import { useExplorer } from '@/lib/map'
2121
import { cn } from '@/lib/utils'
2222
import { useEffect } from 'react'
2323
import { POLITICAL_BOUNDARIES } from '../politicalTilesets'
@@ -26,7 +26,7 @@ import { useReport } from './ReportProvider'
2626

2727
export default function ReportDashboardConsSelector() {
2828
const [searchQuery, setSearchQuery] = React.useState('')
29-
const [explorerState, setExplorerState] = useExplorerState()
29+
const explorer = useExplorer()
3030

3131
const [open, setOpen] = React.useState(false)
3232
const [value, setValue] = React.useState('')
@@ -41,28 +41,33 @@ export default function ReportDashboardConsSelector() {
4141

4242
// Get the area ID from URL params
4343
useEffect(() => {
44-
const entity = explorerState.entity
45-
const id = explorerState.id
44+
const entity = explorer.state.entity
45+
const id = explorer.state.id
4646

4747
if (entity === 'area' && id) {
4848
const area = areas.find((area) => area.gss === id)
4949
if (area) {
5050
setValue(area.name)
5151
}
5252
}
53-
}, [explorerState, areas])
53+
}, [explorer.state, areas])
5454

5555
const handleSelect = (value: string) => {
5656
const valueUpper = value.toUpperCase()
5757
const area = areas.find((area) => area.gss === valueUpper)
5858
setValue(area?.name ?? '')
5959
setOpen(false)
6060

61-
setExplorerState({
62-
entity: 'area',
63-
id: valueUpper,
64-
showExplorer: true,
65-
})
61+
explorer.select(
62+
{
63+
entity: 'area',
64+
id: valueUpper,
65+
showExplorer: true,
66+
},
67+
{
68+
bringIntoView: true,
69+
}
70+
)
6671
}
6772

6873
function handleFiltering(searchQuery: string) {

‎nextjs/src/app/reports/[id]/(components)/ReportNavbar.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import ReportActions from '@/app/reports/[id]/(components)/ReportActions'
22
import { useReport } from '@/app/reports/[id]/(components)/ReportProvider'
33

44
import { contentEditableMutation } from '@/lib/html'
5-
import { useExplorerState, useSidebarLeftState } from '@/lib/map'
5+
import { useExplorer, useSidebarLeftState } from '@/lib/map'
66
import { atom, useAtomValue } from 'jotai'
77
import { PanelLeft, PanelRight } from 'lucide-react'
88
import Link from 'next/link'
@@ -18,7 +18,7 @@ export default function ReportNavbar() {
1818
const title = useAtomValue(navbarTitleAtom)
1919
const { updateReport } = useReport()
2020
const leftSidebar = useSidebarLeftState()
21-
const [explorer, setExplorer, rightSidebarToggle] = useExplorerState()
21+
const explorer = useExplorer()
2222

2323
return (
2424
<nav
@@ -51,9 +51,9 @@ export default function ReportNavbar() {
5151
<div className="flex flex-row items-center gap-0 ml-auto">
5252
<ReportComboBox />
5353
<ReportStarredItemsDropdown />
54-
{!!explorer.id && !!explorer.entity && (
54+
{!!explorer.isValidEntity(explorer.state) && (
5555
<PanelRight
56-
onClick={rightSidebarToggle}
56+
onClick={explorer.show}
5757
className="text-meepGray-400 w-4 h-4 cursor-pointer ml-3"
5858
/>
5959
)}

‎nextjs/src/app/reports/[id]/(components)/ReportSidebarRight.tsx

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import { Sidebar, SidebarProvider } from '@/components/ui/sidebar'
2-
import { useExplorerState } from '@/lib/map'
2+
import { useExplorer } from '@/lib/map'
33
import { NAVBAR_HEIGHT } from './ReportNavbar'
44
import { AreaExplorer } from './explorer/AreaExplorer'
55
import { RecordExplorer } from './explorer/RecordExplorer'
66

77
export function ReportSidebarRight() {
8-
const [explorer, setExplorer] = useExplorerState()
8+
const explorer = useExplorer()
99

1010
return (
1111
<SidebarProvider
@@ -14,7 +14,9 @@ export function ReportSidebarRight() {
1414
'--sidebar-width': '360px',
1515
} as React.CSSProperties
1616
}
17-
open={!!explorer.entity && !!explorer.id && !!explorer.showExplorer}
17+
open={
18+
explorer.isValidEntity(explorer.state) && explorer.state.showExplorer
19+
}
1820
>
1921
<Sidebar
2022
style={{
@@ -23,11 +25,11 @@ export function ReportSidebarRight() {
2325
className="border border-r-meepGray-800"
2426
side="right"
2527
>
26-
{!!explorer.id ? (
27-
explorer.entity === 'area' ? (
28-
<AreaExplorer gss={explorer.id} />
28+
{explorer.isValidEntity(explorer.state) ? (
29+
explorer.state.entity === 'area' ? (
30+
<AreaExplorer gss={explorer.state.id} />
2931
) : (
30-
<RecordExplorer id={explorer.id} />
32+
<RecordExplorer id={explorer.state.id} />
3133
)
3234
) : (
3335
<div>

‎nextjs/src/app/reports/[id]/(components)/ReportStarredItems.tsx

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Button } from '@/components/ui/button'
2-
import { ExplorerState, StarredState, useExplorerState } from '@/lib/map'
2+
import { ExplorerState, StarredState, useExplorer } from '@/lib/map'
33
import { MapPinIcon, X } from 'lucide-react'
44

55
import { dataTypeIcons } from '@/lib/data'
@@ -18,19 +18,24 @@ export function StarredItemsList() {
1818
const { report, removeStarredItem } = useReport()
1919
const starredItems = report?.displayOptions?.starred || []
2020

21-
const [explorerState, setExplorerState] = useExplorerState()
21+
const explorer = useExplorer()
2222

2323
function handleStarredItemClick(item: ExplorerState) {
2424
const entity = item.entity
2525
const id = item.id
2626

2727
// this is reloading the page for some reason so i'm using the setExplorerState hook
2828
// exploreArea(id)
29-
setExplorerState({
30-
entity,
31-
id,
32-
showExplorer: true,
33-
})
29+
explorer.select(
30+
{
31+
entity,
32+
id,
33+
showExplorer: true,
34+
},
35+
{
36+
bringIntoView: true,
37+
}
38+
)
3439
}
3540
return (
3641
<div>

‎nextjs/src/app/reports/[id]/(components)/dashboard/TableDisplay.tsx

Lines changed: 17 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ import {
2525
} from '@/components/ui/dialog'
2626

2727
import { Button } from '@/components/ui/button'
28-
import { useExplorerState } from '@/lib/map'
28+
import { useExplorer } from '@/lib/map'
2929
import { allKeysFromAllData } from '@/lib/utils'
3030
import { useMemo } from 'react'
3131

@@ -42,8 +42,6 @@ export function TableDisplay({
4242
title: string
4343
areaName: string
4444
}) {
45-
const [_, setExplorerState] = useExplorerState()
46-
4745
const cols: string[] = useMemo(() => {
4846
console.log('Raw data:', data)
4947
const columns = config?.columns || allKeysFromAllData(data)
@@ -80,14 +78,6 @@ export function TableDisplay({
8078
getCoreRowModel: getCoreRowModel(),
8179
})
8280

83-
const handleRowClick = (row: any) => {
84-
setExplorerState({
85-
entity: 'record',
86-
id: row.id,
87-
showExplorer: true,
88-
})
89-
}
90-
9181
return (
9282
<>
9383
{data.length > 0 && (
@@ -131,6 +121,21 @@ interface DataTableProps<TData> {
131121
}
132122

133123
function TableComponent<TData>({ table }: DataTableProps<TData>) {
124+
const explorer = useExplorer()
125+
126+
const handleRowClick = (id: any) => {
127+
explorer.select(
128+
{
129+
entity: 'record',
130+
id: String(id),
131+
showExplorer: true,
132+
},
133+
{
134+
bringIntoView: true,
135+
}
136+
)
137+
}
138+
134139
return (
135140
<Table>
136141
<TableHeader className="text-meepGray-400 font-mono uppercase">
@@ -155,6 +160,7 @@ function TableComponent<TData>({ table }: DataTableProps<TData>) {
155160
<TableRow
156161
key={row.id}
157162
data-state={row.getIsSelected() && 'selected'}
163+
onClick={(d) => handleRowClick(row.id)}
158164
>
159165
{row.getVisibleCells().map((cell) => (
160166
<TableCell key={cell.id}>

0 commit comments

Comments
 (0)