azavea / iow-boundary-tool Goto Github PK

Overview

Based on the login designs, implement a forgot password flow, which asks the user for their email address. Upon submission, they should be sent a special link, which should expire in a short duration. Clicking the link should take them to the reset password page.

Overview

As the application grows, various components need to talk to each other. This is classically done with Redux, Redux Thunk, Redux Act, and Immer, but may also be done in newer patterns such as Redux Toolkit.

Design a Redux State Machine using the above, and implement it.

Overview

Figma: https://www.figma.com/file/tJPZ0lkT5C3SAyS2g2R1aA/IoW---Boundary-Sync-Tool?node-id=121%3A2338

• Add /login route to the front-end
• Have non-logged in users redirect there
• Wire up login with the back-end
• Make sure that login redirects work, so if you access a page that needs logging in, you are redirected there after logging in

Overview

Currently, the polygon is hard to see against a dark background such as the satellite basemap:

Compare this with how legible it is on a lighter basemap:

Make the polygon boundary easier to see on dark basemaps. This may be done using a dual toned border, as described in this wireframe: https://www.figma.com/file/tJPZ0lkT5C3SAyS2g2R1aA/IoW---Boundary-Sync-Tool?node-id=498%3A14829, but which may not be natively supported by Leaflet (investigate).

Alternatively, we could change the color of the border on basemap change.

Figure out the simplest / easiest way to do this and implement.

Overview

• Should have a PWSID, Name, and Location field
• Add a test Azavea Utility that is centered around Raleigh
• All contributor users must belong to a Utility

Consult other recent projects and add a Django and DRF back-end.

Add a demo endpoint to the DRF API that demonstrates that the back-end is working.

When users reach the last modal and click continue, they should be directed to the draw page.

Overview

Currently, there are two basemap tiles: Default and Satellite, and there is a Land & water layer button. Since we cannot use vector tile layers without a paid subscription, and we're trying to do things easily without third party subscriptions attached in this prototype, let's switch to using the ESRI Topographic Basemap when Land & water layer is enabled.

• When the Satellite tile is selected, the basemap should always be Satellite.
• When the Default tile is selected,
  • If Land & water is enabled, the basemap should be Topographic
  • If Land & water is disabled, the basemap should be Grayscale

Overview

Currently, all layers are directly added to the map:

which makes them all indistinguishable nodes in the DOM, making layer-specific CSS styling impossible.

Use Layer Groups for semantic organization of map shapes. This will make for cleaner DOM, and allow CSS targeting if needed.

Once this is done, use the following order of layers, with the first being foremost:

• User Polygon
• Reference Image Layer
• Parcel Data
• Municipal Boundary
• Basemap

When multiple are visible, the topmost one should receive all mouse events.

Overview

In addition to image files, users may upload PDFs as reference images. Currently, this is not supported by DistortableImage plugin for Leaflet.

We should decide what happens if there are multiple pages in the PDF file? Perhaps we can always add the first page? Answer these questions before starting the implementation.

Describe the solution you'd like

The user is able to select a PDF file and add it to the map.

Additional Context

To do this in the client may require a significant client-side library. A more reasonable option would be to upload to the back-end and have it return an image that can be added more easily.

See more here: #60 (comment)

Overview

Use the TIGER/LINE database: https://www2.census.gov/geo/tiger/GENZ2021/shp/cb_2021_us_state_20m.zip, as done in other projects.

Convert the above Shapefile to GeoJSON and write a migration to populate all States. Since this data is static, it can be done as a migration.

Overview

Currently we only use the built-in image. Allow the user to upload their own reference image, including file formats such as .jpg, .png, and .pdf.

Each uploaded file should be added to the sidebar and should have its visibility toggled individually.

The file does not need to be saved to the cloud just yet. We're only displaying files on disk in the browser.

Overview

Study the Figma designs: https://www.figma.com/file/tJPZ0lkT5C3SAyS2g2R1aA/IoW---Boundary-Sync-Tool

Identify entities that encapsulates the submissions, maps, user interactions, and other pieces of information needed for the front-end.

Create Django Models for these entities. Export a visualization of the Django Models for documentation in the repo.

Overview

• Should be a custom model that extends default Django auth.user
• Should have a field for user role, which should take one of three values: contributor, validator, administrator

A custom user model often needs to be the very first migration in Django by design: https://docs.djangoproject.com/en/dev/topics/auth/customizing/#extending-the-existing-user-model, so we should do this first.

Consider if roles should be enums or a redefinable entity in the database.

Setup staging at iow.staging.azavea.com or similar address based on the most recent best practice.

This will require adding a cipublish script. Consult other recent Github Action based projects for reference.

Ensure the front-end loads and that the demo API endpoint is accessible.

Overview

• Find out which Municipal Boundaries layer we're using
• Decide if it can be queried from a remote source or if it needs to be ingested and tiled
  • If needed, ingest it
  • Tile it
• Add to map, wire up to Municipal Boundaries button under Basemap Layers

Overview

Following the discussion for issue #69 here, we would like to track any reference images and shape files uploaded by a User when creating a Submission. This should be done by uploading a file to an S3 bucket and storing the reference to it in the database. This issue is to add a field to the Reference_Image entity to track a reference image uploaded to S3 as well as a field for tracking a shapefile upload to Submission.

Overview

Figma: https://www.figma.com/file/tJPZ0lkT5C3SAyS2g2R1aA/IoW---Boundary-Sync-Tool?node-id=342%3A25378

Contributors should be able to see their own submissions.

Validators and Administrators should be able to see all submissions.

Just do an outline with placeholders for now, will add data in a follow up card.

Overview

Implement the a geocoder / address search.

Use the ESRI Geocoder service. There is also an ESRI library which may be of use.

Follow existing visual patterns for the search box / suggestions.

Consult similar implementations in other projects for reference.

Overview

The current implementation of the reference layer does not reload from state each time it's updated. This is because the layer would become unselected each time it changed (despite supplying the selected: true prop in the initialization options).

It also cannot load the transparency and outline modes from state. This is because there is no way to set these options while initializing the layer. My attempts to set them after the layer is initialized have been unsuccessful because the function calls which enable these properties can only be called after certain initialization steps are finished. To my knowledge, there are no events that are fired after the initialization has finished.

Describe the solution you'd like

Two things are needed to solve these problems and it's likely their solutions are related:

• Find a way to specify transparency and outline when initializing the layer
• Find a cleaner way to hook into image layer updates

If these two solutions are implemented, then the variables from state can be included in the ReferenceLayer's useEffect hook.

Additional Context

Regarding the image updates, listening for the edit event covers any update of the edit handles. The dragend event which is added by L.DistortableImage.Edit.fix.js does a good job of hooking into drag events of the entire image. I created a PR on the L.DistortableImage repo to implement this: publiclab/Leaflet.DistortableImage#1014

The refresh event, which is used to track mode and transparency/outline changes, however, will not work with these proposed changes. This is because the event is fired when the layer is initialized and will cause an render loop.

Overview

We are currently using Node 16 which is nearing end of life in a year. Node 18 will give us longer to work with.

Overview

Currently, when an unedited reference image layer is hidden and the map moved, it reinitializes to the center of the map. Once it has been edited, it sticks correctly.

Expected Behavior

It stays in the initial position.

Actual Behavior

It reinitializes to the center of the map.

Steps to Reproduce

• Go to https://staging.iow.azavea.com/draw and hide the reference image
• Move the map
• Show the reference image again
• Observe that it reappears at the center of the map, rather than its original position

Demo

Overview

We need a uniform strategy / toolset for API interaction that integrates with Redux. We've used manual axios calls in the past, sometimes combined with SWR for reads.

RTK Query is a similar tool, but one that integrates well with Redux Toolkit, which we're already using in this app.

Import and add scaffolding for RTK Query, and switch any applicable existing interactions (Login / Forgot Password) to it.

Overview

Use the Figma as a guide:

It should allow the user to:

• Drop a square polygon on the map with draw handles to manipulate it
• Allow the addition, deletion, and manipulation of draw handles / vertices
• Add a view / hide button that toggles the visibility of the polygon

Deferring the naming, deletion, and possibility of multiple polygons until later.

as part of #6, the static content hosing provided by whitenoise and staticfiles was not fully configured, and some code remains commented out.

1. uncomment or remove all commented out code
2. configure static content hosting in advance of frontend creation

Use https://github.com/azavea/civic-apps-app-template to bootstrap the repo.

Instructions are available at https://github.com/azavea/civic-apps-app-template/blob/develop/PROJECT_CHECKLIST.md

In the process, update any libraries that may be out-of-date.

Overview

There are 3 kinds of pages in the app, apart from login:

1. Welcome Page, with no Sidebar
   
2. Draw Page, with Sidebar A
   
3. Submissions Page, with Sidebar B
   

Of these, Sidebar A features a hamburger menu ☰ and Sidebar B features a close button ✖️. Sidebar B is the only one that features a Sign out button.

Clarify how Sidebar A and B interact with @gatesgodin. Implement the Sign out functionality, and ensure that there is a way for the user to Sign out from at least the Draw and Submissions Pages, preferably also the Welcome Page.

Below are a few fixes that were made to the app template after it was used to bootstrap this project.

• Add front-end proxy to back-end API so that when developers are browsing the app via the webpack server requests to the API succeed. Source
• Set node cache to volume so it is not removed every time the containers are stopped. Source Source
• Don't try to migrate static files during Docker container build because the folder may not exist. This isn't happening because this line is commented out, but it can be removed.

Overview

Once the prototype contributor dashboard exists as of #70, wire it up to the API to fetch the list of User-accessible Boundaries.

For Contributors, it should be a list of Boundaries that belong to Utilities that the Contributor has access to.

For Validators, it should be a list of Boundaries that belong to all Utilities in their State.

The PWSID / Location should come from Boundary's Utility. Clarify if we should use Utility Name here instead of Location.

For the Last Modified column:

• If the Boundary is in Draft, use updated_at
• If the Boundary is in Submitted, use submitted_at
• If the Boundary is in Needs Revisions, use reviewed_at
• If the Boundary is in Approved, use approved_at

Consider putting the above logic in the serializer.

Do not implement the Archived tab for now.

Overview

Currently there is only one basemap, the gray ESRI layer. We need to add the satellite layer as well.

• Select which ESRI Staellite basemap to use
• Add it to the map
• Wire up the basemap selector so that it switches between the layers correctly

Overview

Currently, the add new polygon button adds the polygon at the center of the map. Once state management has been defined and implemented in #27, make it so that clicking the add new polygon button changes the cursor to crosshairs, and add the initial polygon where the user clicks on the map, as shown in the wireframe:

Overview

These are the current versions. We were having trouble setting them up during initial prototyping, so went with React 17 / Chakra UI 1.

May also need to remove React Hot Reload which doesn't work with React 18, and may now be extraneous thanks to Fast Refresh. For reference see here: #17 (comment)

Overview

We could use a spinner (or a blank <Loading> component?) to avoid flashing the UI components such as the /draw page when logged out and the user is redirected to login.

Additional Context

Cleanup identified in #77 (comment).

Overview

• [email protected], associated with the Azavea Utility
• [email protected]
• [email protected]

The creation of these users should be scripted, and loaded in when setting up the database for development. Consider calling that in ./scripts/setup.

The welcome page consists of a static map background and a modal with a few sections. The sections are as follows

• Welcome text
• How It Works
• File Upload

This project is similar to other projects in that it will have a React front-end and Django back-end. Knowing that, we should reference a recent project that was built on Github Actions and set this project up using that instead of Jenkins.

Overview

New users will be created by administrators, and will be given a username / password combination. Upon first login, they should see a screen to reset their password, and should not be able to proceed until they have done so.

Using the wireframes as reference, build out the initial structure of the app; a landing page with a modal, and a map with a sidebar.

Chakra should be used for the app components. We are leaning towards using Leaflet for the map.

Based on how much progress is made here, create a series of follow-up cards to build out the features of the prototype.

Overview

• Find out which Parcel Data layer we're using
• Decide if it can be queried from a remote source or if it needs to be ingested and tiled
  • If needed, ingest it
  • Tile it
• Add to map, wire up to Parcel data button under Basemap Layers

Overview

Design: https://www.figma.com/file/tJPZ0lkT5C3SAyS2g2R1aA/IoW---Boundary-Sync-Tool?node-id=342%3A25484

Should just have placeholders for information at first.

Consult with design on the following changes:

1. Add name labels. There is a field (name20) that can be used.
   2. Modify the style of the boundaries so that it's easier to see what is contained within a municipality, and what is outside of one. I think a somewhat transparent fill color could help, as well as making the boundary line less dashed. Already done in #48
   3. Change the polygon layer to be more visible when it is displayed over the satellite basemap layer. Deferred to #56

Need a from email for password reset before deployment. Maybe this is in a checklist somewhere, but can't hurt to document.

Add a sample reference layer that appears in the sidebar under the "Reference layers" heading, and name it something like "Neighborhood map".

While we won't support uploading in the prototype phase, this is to demonstrate the type of image layer that could be added by a user for tracing. Consider using this sample image.

They layer should be toggable like the basemap layers, but should be loaded as a distortable image layer.

Prevent creating contributor users through the Django admin without associating them with a utility.

Currently, it's possible to get a new contributor user into this state when first creating the contributor, not when subsequently editing.

Follow-up to #73 (review).

Overview

Every time you change anything in the map (polygon vertex, layer visibility) the base map re-renders, effectively causing a flicker. This is noticeable and annoying.

Expected Behavior

Only the affected layers (polygon, data layer) being interacted with should update. The basemap should remain steady.

Actual Behavior

The basemap flickers on every interaction.

Steps to Reproduce

• Go to http://staging.iow.azavea.com/draw
• Draw a polygon or toggle layer visibility
• Notice that the basemap flickers

Demo

Additional context

Originally reported here: #48 (comment)

Overview

Currently as the user moves between /welcome and /draw routes, the Map component is reloaded. This is apparent through the refetching of tiles, and likely has non-visible impacts as well (on CPU / network usage):

The Map, being one of the heaviest and most complex components of the app, should not be casually re-rendered.

Originally discovered in: #43 (comment)

Describe the solution you'd like

Make it so that the Map is initialized once for the app, and is reused throughout.

Overview

Use the Figma as a guide:

The buttons do not need any functionality at this point, just need to be there and look like the above.

This script is partly broken because the project does not have a Django back-end yet. This will be added in #6.

However, there appears to be a problem with the front-end setup as well. Here's the error I get when I run cibuild locally.

 ./scripts/cibuild
Creating iow-boundary-tool_shellcheck_run ... done
Creating iow-boundary-tool_app_run ... done
Creating iow-boundary-tool_app_run ... done
yarn run v1.22.18
$ craco test --watchAll=false
 FAIL  src/App.test.js
  ● Test suite failed to run

    TypeError: Cannot read properties of undefined (reading '_cracoConfig')

      at Object.process (node_modules/@craco/craco/lib/features/jest/jest-babel-transform.js:12:74)
      at ScriptTransformer.transformSource (node_modules/@jest/transform/build/ScriptTransformer.js:619:31)
      at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:765:40)
      at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:822:19)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        1.352 s
Ran all test suites.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
ERROR: 1

Github Actions reports a different error with the front-end: https://github.com/azavea/iow-boundary-tool/runs/6598656396?check_suite_focus=true

Fix this error so that the cibuild script can successfully execute locally and on CI.