Turn wireframes into high-fidelity design, incorporating changes in provided data.

Context

This ticket is to set up the production-area page, including the map and a barebones scrollable sidebar with the empty panels. We'll fill in the content for the panels in separate tickets.

Acceptance criteria

• The sidebar contains five panels:
  • Overview
  • Crops produced
  • Shipping nodes
  • Shipping routes
  • Impact on people
• The sidebar is scrollable, the panel closest to the top is considered the "active" panel.
• Upon panel activation the map view is updated as follows:
  • Overview: View is on the production area
  • Crops produced: View is on the production area
  • Shipping nodes: View shows all shipping nodes connected to the production area, and the routes connecting the production area with the shipping nodes.
  • Shipping routes: View shows all shipping routes directly connected to the production area, or indirectly connected through shipping nodes.
  • Impact on people: View is on the areas where people would be impacted from a disruption.

Acceptance criteria

• Pushing to develop will deploy the application to an AWS Amplify instance

Acceptance criteria

• The globe shows production areas, ports and shipping routes
• Hovering over a production area, port or shipping route shows a popover with its name
• Clicking on a production area, port or shipping route opens the corresponding detail page

Screen captures from MVT sandbox test:

Globe view

Flat view

cc @oliverroick

For the production deployment we need to:

• Setup database on RDS
• Migrate database schema
• Ingest data
• Setup frontend on Amplify
• #14

Background

The data used by the web application is read-only, but the underlying model is under active development and will change over time. To ensure the platform remains stable during data updates, we need to implement a robust data management strategy.

Versioning Approach

A simplified versioning approach can help managing changes in the seed data packages and maintain stability.

If a breaking change occurs, such as a change in column type or name, a new version of the data files will be placed in a new folder with a versioned name. Adding new columns is also considered a breaking change because it might cause the ingest process to fail.

New versions will start with the suffix -dev to indicate they are under active development. Once a version has been sufficiently tested, the -dev suffix will be removed, indicating it is a final version with no further breaking changes.

Example:

• Current version: v0
  • Folder name: v0
  • Files: admin_centroids.gpkg, admin_limits.gpkg
• During development: v1-dev
  • Folder name: v1-dev
  • Files: admin_centroids.gpkg, admin_limits.gpkg, airports.gpkg
• After testing: v1
  • Folder name: v1
  • Files: admin_centroids.gpkg, admin_limits.gpkg, airports.gpkg

Data Management

Data files will be stored in the cloud service like Google Drive or S3. The web app will implement a basic check in the seed process to ensure the data version matches the required version. This will help us avoid any potential issues caused by incompatible data updates.

To Discuss

• The data package can become quite large. How would this impact the versioning approach? We might need to discard older versions.
• It looks like using Goggle Drive would be easier for managing the data as most of the team should familiar with it. It there any reason we should not use it?
• Are there any other questions or concerns not addressed by this proposed approach?

cc @oliverroick @wrynearson @cameronkruse

• Setup docker image
• Add basic database schema
• Add DB migrations using Prisma
• Add database to staging website
• Configure Prisma client setup on Amplify
• Ingest data to staging website

How do we want to introduce the application?

We should set up basic project analytics, ideally using Plausible.io

The admin boundaries on the staging website have small gaps.

The file admin_polygon.gpkg in the v2 folder is a simplified version of the GADM world database. The simplification process hasn't maintained topology, which is required to keep the borders in place.

We need to check if GADM provides simplified versions for subnational boundaries or if we can simplify it ourselves while maintaining topology.

For now, I suggest we use the original non-scaled version in the seed process until an enhanced solution is found.

cc @oliverroick @wrynearson

Acceptance criteria

• Click on the burger icon opens menu
• Click on the close button closes the menu overlay
• The menu has four items: Flows, Disruptions, Insights, About
• Clicking on Flows, Disruptions, Insights will list all available items in this category with a link to each individual item (TBC: whether the link is the item name or a image)

Figma

The deployment environments should cache indefinitely since this is a read-only website. Older cached routes should be dropped when the cache reaches its limit. Cache invalidation should occur automatically with each new deployment.

cc @oliverroick