Skip to content

Add pattern intensity map with gradient visualization #287

Description

@Ksheetiz-24

In the Landscape Explorer web app on the /kyl_dashboard route, the left sidebar contains two tabs: Filters and Patterns.

Under the Patterns tab, a new button should be introduced that allows users to visualize pattern intensity across MWS polygons. When clicked, the button should open a popup/modal containing a map view.

The map should display all MWS polygons with a color gradient based on the number of patterns matched:

  • Green → Safe / no stress patterns
  • Yellow/Orange → Moderate number of stress patterns
  • Red → High number of stress patterns

This visualization will help users quickly identify high-stress and low-stress areas.


Steps to Reproduce

  1. Navigate to /kyl_dashboard
  2. Select State, District, and Tehsil
  3. Open the Patterns tab in the left sidebar
  4. Observe that no pattern intensity map is currently available

Expected Behavior

  • A new Map View (or similar) button is available under the Patterns tab
  • Clicking the button opens a popup/modal with a map
  • Each MWS polygon is rendered using a green → red gradient
  • Gradient intensity is based on the number of patterns matched for each MWS

Actual Behavior

  • No visualization exists to show pattern intensity across MWS polygons

Suggested Improvement

  • Add a popup-based map view under the Patterns tab
  • Apply gradient styling to MWS polygons based on pattern count
  • Include a legend explaining green → red intensity levels

Acceptance Criteria

  • A new button is available under the Patterns tab in the left sidebar
  • Clicking the button opens a popup/modal containing a map view
  • The map displays MWS polygons
  • Each polygon is styled using a green → red gradient
  • Gradient intensity is based on the number of patterns matched for that MWS
  • Green represents safe / no stress patterns
  • Red represents a high number of stress patterns
  • A legend is visible explaining the color gradient
  • Map is readable at default zoom levels
  • Popup can be closed easily without affecting the main map state

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or requestfrontendInvolves working with reactkyl-dashboardscoped to /kyl_dashboardui/uxinvolves thinking and designing the interaction and Flow changes/improvement

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions