Skip to content

feat(ui): sync filter state to URL query params for deep-linking #81

@comnam90

Description

@comnam90

Summary

The provider filter and service multi-select filters in layouts/index.html are purely in-memory state. Applying filters then sharing the URL or using the browser back button loses all filter context. URL state sync would enable deep-linking, bookmarking, and sharing a filtered view.

Desired behaviour

  • Selecting provider filter → ?provider=Azure appended to URL
  • Selecting one or more services → ?services=vdc_vault,vdc_m365 appended
  • On page load, read query params and pre-apply filters before first renderMap() call
  • Clearing all filters removes params from URL (clean URL)
  • Browser back/forward navigates filter history

Implementation notes

  • Use history.replaceState() (not pushState) on filter change to avoid polluting history on every keystroke
  • Parse params on load with new URLSearchParams(location.search)
  • No router library needed — the page is a single-file SPA
  • Search input state should not be synced (transient UI, no value in persisting)

Acceptance criteria

  • Provider filter reflected as ?provider=<value> in URL (omitted when all)
  • Service filters reflected as ?services=<comma-separated-ids> in URL (omitted when none)
  • Refreshing the page restores the filter state
  • Sharing the URL to another browser produces the same filtered map view
  • npm run test:ui passes (add a test that verifies URL updates on filter change)

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions