Skip to main content

Changelog

Tracking updates, improvements, and new features for the CCVA Platform.

Actions Library Overhaul & Variable-Action Integration

  • Established variable-to-action relationships in database: Populated the variable_id column in the actions table to create logical connections between adaptation actions and vulnerability indicators. Created SQL scripts (populate_action_variables.sql and manual_action_variable_mapping.sql) with keyword-based matching logic and manual mapping helpers for accurate relationship assignments.
  • Implemented database-driven action filtering: Refactored Actions page to filter actions by variable_id instead of text-based search. Added filteredActions computed value that performs precise lookups using variable IDs, ensuring actions displayed are directly related to selected variables through database relationships.
  • Added 'View related actions' functionality: Made the button on variable cards functional, creating a direct link from the Variables page to the Actions page with pre-filtered results. URL parameter system (e.g., /actions?variable=Bleaching Potential) enables shareable links and maintains filter state.
  • Enhanced Actions page filtering system: Added a dedicated 'Related to Variable' dropdown filter that synchronizes with URL parameters and the 'View related actions' button. Implemented visual filter badge showing currently selected variable with clear button to reset filters. Filter state persists across navigation and page reloads.
  • Redesigned Action Plan widget: Transformed from basic card to engaging, compact component with gradient background when actions are selected, circular icon indicator that changes color based on state, single-row layout with perfect vertical alignment, and consistently styled outline buttons (Export PDF, View Plan).
  • Improved action card interactions: Added separate Add (+) and Remove (-) buttons with intuitive hover states. Add button shows ocean-light hover color, Remove button has no hover color. Both use pointer cursor and maintain the same position for seamless toggling. Cards display ring border when selected.
  • Fixed router integration: Added useRouter import and instantiation to enable programmatic navigation for the 'View Plan' button, replacing manual window.history manipulation with proper Next.js routing.
  • Optimized Action Plan widget layout: Fine-tuned padding (px-3 py-1), reduced width to 470px, adjusted icon and text sizes for compact presentation while maintaining readability. Ensured equal top/bottom spacing and perfect vertical centering of all elements.

User Documentation & Methodology Page Overhaul

  • Created comprehensive User Guide page: Built an extensive, accessible guide for non-technical users covering platform overview, step-by-step instructions for exploring data (map navigation, area profiles, filtering), understanding variables, building action plans, and comparing areas. Included proper score range (0-1), official component list, and methodology explanation with vulnerability formula breakdown.
  • Added homepage variable showcase section: Featured 8 sample vulnerability indicators with their associated icons (Sea Level Rise, Economic Dependence, Fish Biomass, Social Trust, Coral Cover, Access to Credit, Gear Diversity, Fish Catch Change) in an engaging 2-row grid layout. Section includes clear labeling as sample set with link to full variables page.
  • Refactored Methodology page to use database: Converted MethodologyAccordion component from hard-coded data to dynamic fetching via useComponents and useVariables hooks. Added why_it_matters column to components table with appropriate content for each component. Updated backend schema (ComponentResponse) and endpoint to include new field.
  • Enhanced methodology component cards: Integrated variable icons directly from the database (up to 3 per component), improved visual hierarchy with cleaner design removing unnecessary borders and backgrounds, added subtle left-border accent on 'Why it matters' section using ocean-medium color, and increased title font size for better readability.
  • Fixed component weight display: Updated database weights to 20% (0.2) for each of the 5 components, ensuring accurate representation of the CCVA framework where each component contributes equally to the overall vulnerability score.
  • Improved user guide PDF functionality: Transitioned from html2canvas approach to native browser Print to PDF to avoid modern CSS color function parsing errors (lab, lch, oklch). Added print-specific styles to isolate guide content and hide navigation elements during PDF generation.
  • Updated TypeScript interfaces: Added why_it_matters field to ComponentDto interface in useComponents hook to match backend schema and prevent type errors.

Refinement & Documentation

  • Fixed component filtering logic on the Variables page: Created a new backend endpoint (/components) to fetch component data from the database, updated VariableDto to include component_id, and modified filtering logic to correctly map selected component IDs to their names for accurate variable filtering.
  • Added comprehensive project documentation: Created a detailed README.md with tech stack overview, setup instructions, and design system documentation. Built a visual timeline-based Changelog page with detailed update tracking.
  • Enhanced map popup styling: Removed double-border effect by overriding Leaflet's default popup wrapper styles, added semi-transparent white background, and condensed spacing for a cleaner presentation. Popups now include vulnerability category badges, location hierarchy, and helpful interaction hints.
  • Corrected Summary Statistics logic: Fixed the 'Most Vulnerable' and 'Least Vulnerable' area lists to display distinct entries by filtering out already-selected areas. Made these items clickable to zoom the map to specific locations, with pointer cursor styling for better UX.
  • Integrated variable icons: Implemented a folder-based convention to display custom PNG icons for all 30+ variables, with fallback handling for missing images.
  • Improved deployment robustness: Resolved frontend build issues by removing an unused react-leaflet-cluster dependency, adding lucide-react explicitly, and tightening TypeScript typings for custom Recharts tooltips and click handlers.
  • Hardened shared UI components: Simplified ComparisonTable to use native table markup instead of a missing Table UI wrapper, aligned ErrorBoundary button variants with the design system, and fixed several edge-case TypeScript errors surfaced during production builds.
  • Made variable icons environment-safe: Introduced a getVariableIconSrc helper that maps variable names to icon filenames case-insensitively, ensuring icons load correctly on Linux-based hosting without renaming existing assets.

Reporting & Homepage Enhancements

  • Developed comprehensive PDF export functionality using jsPDF: Created professional multi-page reports for Area Profiles with cover pages, 'About CCVA' introduction, executive summaries with visual score displays, component breakdowns with weighted calculations, AI-generated insights, and detailed variable score tables. Reports include consistent headers, footers, and page numbering.
  • Implemented real-time materialized view refresh: Added a backend endpoint to refresh the mv_geo_scores materialized view on-demand. Created a frontend mutation hook that updates homepage statistics without page reload and invalidates related cache entries. Added animated refresh icon with loading states.
  • Redesigned homepage hero section: Integrated high-resolution coastal imagery with carefully tuned opacity (75%), added dual gradient overlays (slate-to-ocean and radial glows) for depth, ensured text prominence with proper z-index layering, and maintained full readability of CTAs and statistics card.
  • Standardized layout system: Applied consistent max-w-7xl container and px-4 sm:px-6 lg:px-8 padding across all pages to align content edges with the navigation menu. This creates a cohesive visual flow throughout the application.
  • Enhanced Area Detail page loading: Fixed jarring black background flash by maintaining white background color during data loading states.

Navigation & Visual Polish

  • Improved navigation accessibility: Changed active link styling from subtle bg-ocean-light/40 with low contrast text to bold bg-slate-400 with white text and shadow-md for high visibility. Removed the small dot indicator that was adding visual clutter.
  • Integrated official branding: Replaced the 'CC' text placeholder with the actual logo.png image in the header, sized at h-10 w-10 with hover scale animation. Logo appears in both desktop and mobile navigation views for consistent brand presence.
  • Streamlined 'What is CCVA' page: Removed unnecessary social share buttons, 'Next: Methodology' navigation button, and redundant horizontal divider from the bottom of the page to reduce distraction and maintain focus on core content.
  • Redesigned variable cards on the Variables page: Reorganized filter bar with proper alignment, added COMPONENT_STYLES mapping for dynamic card accent colors, integrated category-specific icons loaded from /variables/ folder, removed hover lift effects, and changed grid to 2-column layout (md:grid-cols-2) for better card proportions.
  • Improved search UI: Fixed vertical alignment of search icon within input field and ensured filter controls have consistent heights.

Interactive Map Improvements

  • Switched map interaction model: Removed onClick navigation behavior and implemented onMouseOver popup display with onMouseOut auto-close. This allows users to explore multiple areas rapidly without page redirects. Popups now show with closeButton: false and autoPan: false for smoother UX.
  • Simplified basemap for clarity: Replaced default OpenStreetMap tiles with CARTO's 'light_all' variant (basemaps.cartocdn.com) to provide a minimal, neutral background that emphasizes the vulnerability data overlays without competing visual noise.
  • Fixed Search Areas functionality: Connected the search input field to the map filtering system so typing in the search box dynamically filters visible areas, auto-selects matching locations, and adjusts map zoom to show search results.
  • Modified map data loading: Changed useMapAreas to fetch all areas regardless of filter state (passing empty filter object), while still allowing FilterPanel selections to control focused area and zoom behavior. This ensures the full dataset remains visible on the map.
  • Balanced Explore page panels: Changed right panel (Area Details) width from w-96 to w-80 to match left panel, and adjusted both panels to bg-white/50 opacity for subtle transparency that doesn't obscure the map.
  • Added placeholder for insufficient trend data: When the Vulnerability Trend chart has fewer than 2 data points, displays a friendly message: 'Insufficient data to display trends. Multiple years of assessment data are required.'
  • Fixed runtime appendChild error: Implemented client-side rendering check for MapContainer component to prevent SSR-related errors.

Data Structure & Methodology

  • Implemented official CCVA scoring formula: Updated the ScoringCalculator component to reflect the actual vulnerability calculation: (Exposure + Ecological Sensitivity + Social Sensitivity) - (Ecological Adaptive Capacity + Social Adaptive Capacity). Each component is weighted at 0.20 (20%).
  • Created Components API infrastructure: Added new schemas (ComponentBase, ComponentResponse) in backend/app/schemas/component.py, created /components endpoint in backend/app/routers/components.py to fetch data from ccva_source.components table, and registered the router in main.py.
  • Enhanced Variable data model: Added component_id to VariableResponse schema and updated /variables endpoint SQL queries to SELECT v.component_id. Created useComponents hook in frontend to fetch component data.
  • Updated database relationships: Modified frontend filtering logic to use numeric component_id values instead of string-based component names, ensuring referential integrity with the database schema.
  • Integrated visual variable indicators: Added 30+ custom black icons (e.g., 'Access to Credit_black icon.png', 'Bleaching Potential_black icon.png') to the public/variables/ folder. Updated VariableList component to dynamically load icons with fallback error handling.
  • Modified heatmap labels: Changed 'Highlight Top Movers' toggle to 'Highlight highest-risk variables' for terminology consistency with CCVA framework.

Initial Release

  • Launched CCVA Platform MVP: Deployed a full-stack web application for exploring climate change vulnerability assessments across coastal fishing communities worldwide.
  • Established frontend architecture: Built with Next.js 14 App Router, TypeScript for type safety, Tailwind CSS with custom 'Modern Scientific' design system (Ocean and Earth color palettes), and TanStack Query for server state management.
  • Configured backend services: Implemented FastAPI RESTful API with SQLAlchemy ORM, Alembic migrations, structured routers for stats/areas/variables/actions, and CORS middleware for cross-origin requests.
  • Database foundation: Set up PostgreSQL with PostGIS extensions, created ccva_source schema with tables for geographic hierarchy, scores, variables, actions, and AI insights. Implemented materialized views (mv_geo_scores) for optimized aggregations.
  • Interactive mapping system: Integrated Leaflet.js with react-leaflet for client-side map rendering, GeoJSON shapefile display, dynamic choropleth coloring based on vulnerability scores, and zoom/pan controls.
  • Component library: Built reusable UI components including Card system, Button variants, Select/Input fields, and custom data visualization components (RadarChart, Heatmap, TrendsLineChart).