Manual validation UI for final (conflated) data submission

[spwoodcock]

Is your feature request related to a problem? Please describe.

• Following on from Create endpoint for conflation of FMTM data with existing OSM data #1548
• If we have a conflated GeoJSON, we should display it on a map, with certain conflation displayed as green, and uncertain conflation displayed in red.
• The user should be able to select which geometry they want to accept for the uncertain conflation (i.e. two buildings that overlap).

Describe the solution you'd like

• A frontend page that is mostly a map, with a toolbar.
• Geometries are coloured by certainty.
• Clicking the geometry shows it's tags and metadata.
• Uncertain conflation is displayed as red coloured geometry pairs - there should be an easy way to distinguish a pair of geometries from another pair of geometries.
• When clicking a geometry, a button should be available to 'accept this as the correct geometry'.
  • Accepting will remove the incorrect geometry in the pair from the GeoJSON in the frontend.
• Submission should be blocked until all conflicts are resolved.
• Once validation is done, the user can click a button to upload to OSM.

Additional context

• By returning conflated tags for both geometries in a pair, we avoid the need for another endpoint call for tag conflation after a geometry is selected.
• Is it possible to load in ID Editor for the geometry manipulation? Is this desirable?

Design notes for the design team

Map display:

• The page should be mostly a map, with a sidebar.
• Buildings will be displayed as polygons on the map.
• Buildings with no conflicts displayed in green.
• Buildings with tag conflicts displayed in yellow.
• Buildings with possible geometry conflicts (i.e. intersecting boundaries) displayed in red (i.e. this will always be a pair).

Sidebar:

• The sidebar should be similar to the project detail page in FMTM.
• We need some simple stats displayed:
  • Total features
  • Number of geometry conflicts
  • Number of tag conflicts
• Two buttons:
  • Validate Submission
  • Request Additional Mapping (i.e. there is an issue that cannot be resolved).

Geometry conflict resolution popup:

• To resolve a pair of geometries that conflict (i.e. select which geometry is valid), the user should click on the buildings.
• Clicking on a building shows a small popup with a button 'accept geometry'.
• If the user clicks the 'accept geometry' button, then the building is selected.
• The other building in the pair gets deleted.

Tag conflict resolution modal:

• Clicking a building should show a popup modal.
• The modal should include a list of tags for the feature.
• If there is a conflict, there should be buttons to either:
  • Accept new changes
  • Reject new changes (use old one)
  • Edit manually (i.e. combine them manually)

[manjitapandey]

The design has been prepared and finalised.

https://www.figma.com/design/GUKooEhrNwHFTaAaEHxUcS/FMTM?node-id=1003-767&t=rbzbjbTBdcwWT0UG-0

Now @NSUWAL123 may go ahead with the design.