Rapid Prototype: Map Exploration redesign#418
Draft
01painadam wants to merge 35 commits intodevelopfrom
Draft
Conversation
Merging in changes from develop
Merging develop and main
- New DesktopLayout: Map fills viewport, LeftPanelContainer floats on top - LeftPanelContainer renders chat (display-toggled), dataset/threads placeholders - Remove gridArea from Map.tsx - Mobile layout untouched
- Minimized chat input at bottom-left with sample prompts above - Pulsing dot animation when AI is loading - Focus transitions to chat panel via openChat() - Submit sends message and opens chat panel
- Remove drag-to-resize handle and fixed width logic from ChatPanel - ChatPanel now fills container width (w=100%) - Remove gridArea='chat' and zIndex from ChatPanel - Replace sidebar toggle with close button (XIcon → closePanel) - Add Chat History button (ClockCounterClockwiseIcon → openThreads) - Both use useExplorePanelStore actions
- Slide-in/out via translateX with cubic-bezier easing - MinimizedInput fades out with translateY when panel opens - Panel wrapper uses pointerEvents toggle for clean click-through
- New MapLayersPanel: 'Map layers' heading + '+ Add layer' CTA - Legend gets inline prop to render without absolute positioning - MapLayersPanel left offset shifts dynamically when left panel opens - Desktop: MapLayersPanel replaces bottom-right Legend - Mobile: original Legend toggle preserved - '+ Add layer' triggers openDataset() on explorePanelStore
- 'Add to map' header with close button - Topic filter chips: Forest change, Land cover, Land use, Climate, Biodiversity - Dataset cards using existing DatasetCard component - Toggle selection wired to contextStore (addContext/removeContext) - Chat input at bottom of panel - Wired into LeftPanelContainer for dataset panel state
- Add aoi field to InsightWidget type (name, src_id, gadm_id, geometry) - captureCurrentAoi() reads contextStore + mapStore to get area + geometry - Each widget in generateInsightsTool now carries the AOI it was generated for - Enables fly-to-AOI when activating insights on the map
- Renders active insight's chart + narrative + CTAs (top-right) - Uses activeInsightId from explorePanelStore to find widget in chat messages - CTAs: Monitor (dummy toast), Add to report (toast), About (provenance drawer) - 'Explain this to me' sends follow-up to chat - Close button clears activeInsightId - Added to Map.tsx as sibling to MapLayersPanel
- Widget messages now render as compact chips with WidgetIcons + title - Clicking a chip sets activeInsightId and flies map to stamped AOI - Dataset cards still render inline (WidgetMessage) - ChatPanelHeader 'Go to insight' dropdown uses setActiveInsight + flyTo - Removed unused scrollToWidget function
- Center-aligned tabs using absolute positioning - 'Map' tab visually active (solid bg), others ghost/inactive - Dummy UI only — no routing or state changes - Uses MapTrifoldIcon, BellIcon, FileTextIcon from Phosphor
- Desktop: justifyContent changed from flex-start to flex-end - Added pb=14 on desktop for spacing above attribution - Mobile layout unchanged (still bottom-left)
- Back button returns to previous panel state via goBack() - Thread list from sidebarStore.threadGroups (Today / Previous 7 days / Older) - Accordion-based display matching sidebar style - Visual only — clicking threads does not navigate or load - Wired into LeftPanelContainer for threads panel state
- Add cta field to ChatMessage type (label + prompt) - MessageBubble renders CTA as a primary button below message - Map onClick: reverse geocodes via Mapbox to get country name - Opens chat with 'You clicked on [Country]' + 'Analyze [Country]' CTA - Skipped during drawing/selection mode and on mobile
- Unified panel chrome (single bg/shadow/border wrapper for all states) - Shadow upgrades to 'xl' when open for depth - Add hideBelow='md' to LeftPanelContainer for safety - Simplified DOM structure — dataset/thread panels no longer duplicate chrome
…ayer - Remove SamplePrompts from MinimizedInput — minimized state is now just the input box (prompts still show inside the chat panel) - Add Tree Cover Loss (dataset_id: 4) as default active layer on landing via addContext after store resets in (chat)/page.tsx
- Move +/- zoom and scale controls from bottom-left to bottom-right - Move BasemapSelector from inside MapAreaControls to bottom-right on desktop (mobile keeps it in the tools popover) - BasemapSelector gains positionProps for flexible positioning - Move Map/Monitor/Report tabs from PageHeader to float on map (top-center) using same card style as area controls (bg, rounded, shadow, border) - Fix basemap default accidentally changed in earlier commit - Remove unused icon imports from PageHeader
- Scale control + attribution: back to bottom-left - Policy links + lat/lon: bottom-left, above attribution - Zoom +/−: bottom-right (NavigationControl) - Basemap selector: bottom-right, above zoom controls - No more overlapping/cramped controls in bottom-right corner
- Attribution: bottom-right (MapLibre native) - Policy links: bottom-right, right-aligned column above attribution - Coords: bottom-right, above policy links - Zoom +/−: bottom-right (MapLibre native, above attribution) - Basemap selector: bottom-right, above zoom controls - Removed ScaleControl (redundant with coords display) - Clean vertical stack, no overlap
- Policy links moved to bottom-center (absolute, left 50%, translateX) - Basemap icon constrained to 20x20px via CSS so it centers in thumbnail - Coords, zoom +/−, basemap neatly stacked bottom-right with proper spacing - Coords aligned to MapLibre 10px margin
- Wrap MapTrifoldIcon in a centering flex Box inside the IconButton
- Use explicit size={18} on the icon for consistent sizing
- Click-on-map: remove previous CTA messages before adding new one
so only the latest 'You clicked on [Country]' appears in chat
- Initial state (no user messages): truncated sample prompts as pill buttons - After click-on-map: 'Analyze [Country]' button (takes priority) - No dataset selected: 'Select a dataset' button (opens dataset panel) - Always: 'Draw area' and 'Upload area' quick action buttons - All styled as primary rounded pill buttons - Nudges disappear when panel opens (minimized state only)
…unctional - 'Add dataset' nudge shows in initial state (no user messages) and when no dataset is selected - ThreadHistoryPanel: clicking a thread now navigates to it and opens chat - Active thread highlighted in the list - Threads panel is no longer dummy — full navigation works
- Removed openChat() from onMapClick handler - CTA message is still added to chat store - MinimizedInput picks up pendingClickCta and shows 'Analyze [Country]' nudge button without opening the panel
- Three primary pill buttons styled like MinimizedInput nudges - Explain: ChatTextIcon, prompts detailed explanation - Simplify: TextAaIcon, prompts plain language version - TL;DR: ArrowsInSimpleIcon, prompts one-sentence summary - All open chat panel and inject prompt on click
…imer - Chat API: wrap all controller.enqueue calls with controllerClosed check to prevent 'Controller is already closed' 500 error when trace_info arrives after stream ends - InsightCard: Explain/Simplify/TL;DR buttons now above VisualizationDisclaimer - Disclaimer moved below the nudge buttons, above Monitor/Report CTAs
- Panel slides in empty (280ms cubic-bezier), then content fades in (150ms) - Creates illusion of minimized input morphing into active chat input - On close: content hides instantly, panel slides out, then minimized input fades in - panelReady state tracks slide completion via setTimeout matching CSS duration - Works for chat, dataset, and threads panel states
- Added panelReady/setPanelReady to explorePanelStore (shared state) - ChatPanel input area has opacity 0 until panelReady is true - Fades in (180ms) after the slide animation finishes (280ms) - Creates seamless effect: minimized input disappears, panel slides in empty, then chat input appears in the same bottom-left position
01painadam
requested review from
LanesGood,
faustoperez,
kamicut and
yellowcap
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
- PageHeader is now a floating card (primary.solid blue, rounded) - Positioned inside MapLayersPanel so header + layers stack together - Help, login, prompt quota moved behind '...' overflow menu - Logo + PREVIEW badge stay visible - Removed PageHeader from layout grid row, map is now full viewport height - Mobile layout unchanged
- NEXT_PUBLIC_FLOATING_HEADER env var: 'true' = floating header on map, 'false' = full-width top bar (original layout) - Layout adjusts grid rows and maxH based on header mode - MapLayersPanel conditionally renders PageHeader - Fix BasemapSelector: bgPosition not valid on IconButton, use css prop - Added env var to .env.example
…TYPE - PageHeader renders FullHeader or FloatingHeader based on env var - FullHeader is the original full-width blue bar with all controls inline - FloatingHeader is the compact card with overflow menu - Both show 'PROTOTYPE' badge instead of 'PREVIEW' - Shared PromptQuota and AuthMenuItems sub-components - Fixed all unused variable lint errors
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
This rapid prototype reworks the chat-map UI to give shape to @faustoperez's Map Explore wireframes, moving from achat pane + map layout to a full-screen map with floating panels.
Changes
browser → thread history
[Country]", "Add dataset", "Draw/Upload area")
without opening the panel
What's NOT in scope