Example Planfile

side-panel.plan.md

Side Panel Development Plan

Overview

We are building out feature-specific side panels for the map sidebar functionality. These panels will display detailed information when users click on different types of features on the map.

Prerequisites

As always, before you begin working on the plan, read through the docs in /docs and check your .cursorrules file to ensure you are coding in accordance with our project standards

Location

All work will be done in /src/partials/map-sidebar/

Feature Types

The side panels will support the following feature types, each with its own dedicated panel:

1. Investment Plan Feature - Infrastructure investment information
2. Bathing Site Feature - Beach and water quality data (Primary focus)
3. Outfall Feature - Storm overflow outlet information
4. Surface Water Outfall Feature - Surface water discharge points
5. Cluster Feature - Grouped/clustered feature information

Design Requirements

Panel Behaviour

• Mutually Exclusive: Only one panel type can be displayed at a time
• Dynamic Content: Panel content changes based on the selected feature type
• Reusable Components: Similar data shapes should use shared components where possible

Header Design

• Standard Header: All panels have a consistent header layout
• Symbol Space: Reserved space to the left of the header for feature-specific symbols/icons
• Collapsible Symbol Space: If no symbol is provided, the space should collapse automatically
• Responsive: Header should work across different screen sizes

Current State

Existing Components

• /src/partials/map-sidebar/index.tsx - Main sidebar wrapper
• /src/components/layout/sidebar - The actual sidebar component
• /src/components/navigation/tabs - The tab component to use at the top of the sidebar on bathing sites
• /src/components/data-display/icon - The component to use to display the symbols
• /src/components/feedback/rag-status-banner - The component to display the RAG status banner

Current Implementation

• Basic feature data display with generic attribute rendering
• Simple header with layer title and object ID
• Filtered attributes to hide system fields
• Responsive design using existing theme system

Development Phases

Phase 1: Architecture Setup

1. Refactor existing MapSidebar to support multiple panel types
2. Create panel type detection logic based on feature data
3. Set up shared header component with symbol space
4. Create base panel interface for consistent structure

Phase 2: Bathing Site Panel (Primary Focus)

1. Design bathing site-specific layout and components
2. Implement bathing site data display with relevant fields
3. Add appropriate symbols/icons for bathing sites
4. Create comprehensive test scenarios in Storybook
5. Ensure accessibility and responsive design

Phase 3: Panel Placeholders

1. Investment Plan Panel - Basic structure and placeholder content
2. Outfall Panel - Basic structure and placeholder content
3. Surface Water Outfall Panel - Basic structure and placeholder content
4. Cluster Panel - Basic structure and placeholder content

Phase 4: Shared Components

1. Identify common data patterns across panel types
2. Extract reusable components for similar data shapes
3. Create shared styling utilities for consistent appearance
4. Implement component library for panel building blocks

Technical Considerations

Component Structure

/src/partials/map-sidebar/
├── index.tsx                    # Main sidebar component
├── styles.module.scss          # Main styles
├── map-sidebar.stories.tsx     # Storybook stories
└── components/                 # Panel-specific components
    ├── shared/                 # Shared components
    │   ├── panel-header/       # Header with symbol space
    │   ├── data-section/       # Common data display patterns
    │   └── attribute-list/     # Reusable attribute display
    ├── bathing-site-panel/     # Bathing site specific
    ├── investment-plan-panel/  # Investment plan specific
    ├── outfall-panel/          # Outfall specific
    ├── surface-water-panel/    # Surface water specific
    └── cluster-panel/          # Cluster specific

Note: If a component is a strong contender for being used outside of the map-sidebar partial then it should be placed in an appropriate folder in /src/components

Data Flow

• Feature data passed to main MapSidebar component
• Panel type determined by feature properties (layerTitle, layerType, etc.)
• Appropriate panel component rendered based on type
• Shared components used where data patterns match

Styling Approach

• Follow existing SCSS modules pattern
• Use theme variables and utilities found in the /theme folder, do not invent new ones.
• Maintain responsive design principles
• Ensure consistent spacing and typography

Accessibility

• Proper ARIA labels for each panel type
• Keyboard navigation support
• Screen reader friendly content structure
• Focus management when panels change

Success Criteria

1. Bathing Site Panel: Fully functional with comprehensive data display
2. Panel Placeholders: All 4 remaining panel types have basic structure
3. Shared Components: Common patterns extracted into reusable components
4. Header System: Consistent header with collapsible symbol space
5. Test Coverage: Comprehensive Storybook stories for all panels
6. Performance: No unnecessary re-renders, efficient component updates
7. Accessibility: WCAG 2.1 AA compliance
8. Documentation: Clear JSDoc comments and component documentation

Next Steps

1. Begin with Phase 1: Architecture Setup
2. Focus on bathing site panel implementation
3. Create placeholders for other panel types
4. Iterate based on feedback and testing