greenstand / treetracker-admin-client Goto Github PK

There appears to be a race condition with the first API calls following user login, whereby some calls have an undefined Authorization token in the header.

The result is some missing numbers on the dashboard.

Refreshing the page or navigating to another page in the Admin Panel forces a reload of the data, and subsequent sessions while the user is already logged in are fine.

When switching accounts between a non-org and an org user, or between orgs, the data in the Admin Panel should be refreshed to match the new user.

Instead, stale data (dashboard stats, trees in the Verify tool) persists until the page is refreshed.

We should reset all Rematch models when logging out.

The 'trees to verify' label only makes sense when unverified trees are selected in the filter.
It should be changed to simply 'trees', or better still, 'captures' (see #3).

We should also use locale formatting (as seen in the dash stats) to ensure the number is easily readable when large.

Currently, planter details (and tree details on the Trees page) are shown on a side drawer, while tree details on the Verify page are shown as a modal popover dialog.

The two UIs could be more consistent.

No verification seems to work.
See video attached... https://youtu.be/0w98AnS_-j8

We should create a Rematch model React context to maintain the state of the Capture Matching tool and share that state amongst the various components of the tool without the need to pass props down through the hierarchy.

When verifying captures, the species stays in the species box after Submit is clicked, suggesting that it is retained for subsequent approvals.
In fact it is being cleared in the model (and not reflected in the UI) so that the species only applies to the first approval.

See this video of the bug in action.

See attached proposed design. Next to the location link (which does not work since the individual tree link Greenstand/treetracker-web-map-api#178 ) we need a link to the userid such as https://treetracker.org/?userid=1868

The OptimizedImage class compresses images to thumbnails of a more appropriate size.
The ImageScroller class (used by EditPlanter to display planter images) does not currently use OptimizedImage, so full-size planter images are loaded unnecessarily.

No trees in the list view.

The Captures page has fallen out of sync with the Verify page.
The following steps should be taken to make these more consistent.

Capture detail

Use the same Capture Detail popup for the two pages (the Verify one is best)

Filters

Provide the same set of filters and filtering experience.
Ideally, this should be the same component with responsive sizing to adapt to top vs side layouts.
Again, the Verify filter is more appropriate (with a Reset/Clear button as proposed by @gwynndp in #38)

Captures page columns

Change the columns on Captures to match the details listed in Capture Detail.

Currently, for disabled account, that means we set this user's active field to false, we can do it in the admin panel. So for users in this case, when they try to log in, we should give clearer information like: this account has been locked.

The Organization filter in the Verify page currently lists all orgs.
Orgs with a parent (those that appear as a child in the entity_relationship table) should be omitted to prevent the list from growing too long.

Entering additional tags fails with the errors:

Warning: Failed prop type: Invalid prop `value` of type `string` supplied to `ChipInput`, expected `array`.

and

ChipInput.js:673 Uncaught TypeError: chips.map is not a function

We're currently using the same icon for the Planters and User Manager menu items.

A better fit for Planters might be the Material UI NaturePeople icon:

The fields currently displayed for a capture are basically mirrors of the database.
Instead they should display information in a format that is meaningful and logical for the user.

For example, we use two Boolean fields (active and approved) to denote the verification state of a capture:

• active===true && approved===false => Awaiting verification
• active===true && approved===true => Approved
• active===false && approved===false => Rejected

These should be combined into one Verification State field for display and filter.

Data in the Tree Detail could be grouped by:

• Capture data (Planter ID, Planter Identifier, Device Identifier, Date Created, Note)
• Verification state
• Capture tags (Tags, Species)
• Tokenized

This will require some UI/UX design effort and input from @sebastiangaertner and other users.

Note that there are several other issues related to the Filters and Tree Detail: #10, #26, #29, #35, #37, #50, #51, #53

Current Tree Detail UI:

We are seeing issues in production where previously cached versions of the Admin Panel are being loaded by the browser.
This is problematic because we have recently changed the API url and the cached version of the Admin Panel points at the old url.

Refreshing the Admin Panel should cause the latest version to replace the cached version but we've had reports of people having to manually clear their browser cache/storage to get the new version.

This may be related to a 404 error seen on first load when trying to retrieve service-worker.js (this file has not yet been created for the Admin Panel).

We query trees planted by the selected planter to get a set of selfies.
If a user with a Planter Manager role does not also have the Tree Manager or Admin role, the trees query will fail with 401 Unauthorized.

The Greenstand logo is displayed at the top of each page.
It's the norm in webpage navigation for the logo to be a shortcut to the home page.

This issue from Seb was found in the web map repo. It belongs here

See below the two images. Second icon should open the users map to quickly see the overview. (such as https://treetracker.org/?userid=3336)
Changing the order of icons first the pin icon with link to individual_tree, then the user_info_icon and then the user_map_icon

The Untagged Trees and Planters dashboard cards should display the totals available to the user (i.e. restricted to organization trees and planters for organization users).

There is a bug whereby those numbers change to reflect filters applied in the Verify and Planters tools respectively.
This is because they share a model. The dashboard should probably have its own model to avoid interference by other components.

If a capture has a non-null token_id in the database, it is considered Tokenized.

We need to display whether or not a capture is Tokenized (in Tree Detail) and allow the user to filter on this value in the Verify and Trees pages (see #51 which aims to consolidate the filters on the two pages).

Running npm run lint throws up several warnings that cause the CI build to fail.
The best solution is to fix the cause of each of these warnings, and only suppress the ones that cannot be reasonably fixed.

See this build for an example of the failure.

The set at the time of writing is:

Run npm run build:dev

> [email protected] build:dev /home/runner/work/treetracker-admin-client/treetracker-admin-client
> env-cmd -f .env.development npm run build && mv build build-dev


> [email protected] build
> react-scripts build

Creating an optimized production build...

Treating warnings as errors because process.env.CI = true.
Most CI servers set it automatically.

Failed to compile.

src/App.js
  Line 36:22:  'dispatch' is defined but never used  no-unused-vars

src/components/DashStat.container.js
  Line 26:12:  Component definition is missing display name  react/display-name
  Line 43:12:  Component definition is missing display name  react/display-name
  Line 60:12:  Component definition is missing display name  react/display-name
  Line 76:12:  Component definition is missing display name  react/display-name

src/components/GenericMessagePage.js
  Line 8:16:  'theme' is defined but never used  no-unused-vars

src/components/Navbar.js
  Line 15:30:  'theme' is defined but never used  no-unused-vars

src/components/Page404.js
  Line 5:16:  Component definition is missing display name  react/display-name

src/components/Species.js
  Line 7:16:   'theme' is defined but never used  no-unused-vars
  Line 29:20:  'c' is defined but never used      no-unused-vars
  Line 32:25:  'c' is defined but never used      no-unused-vars

src/components/TreeImageScrubber.js
  Line 253:50:  'reject' is defined but never used  no-unused-vars
  Line 323:40:  'value' is defined but never used   no-unused-vars

src/components/TreeTable.js
  Line 198:54:  'index' is defined but never used  no-unused-vars
  Line 219:39:  'label' is defined but never used  no-unused-vars
  Line 219:58:  'index' is defined but never used  no-unused-vars

src/components/TreeTags.js
  Line 44:42:   'query' is defined but never used           no-unused-vars
  Line 87:13:   'value' is assigned a value but never used  no-unused-vars
  Line 131:30:  'chip' is defined but never used            no-unused-vars

src/components/Trees.js
  Line 16:16:  'props' is defined but never used     no-unused-vars
  Line 33:21:  'dispatch' is defined but never used  no-unused-vars

src/components/Unauthorized.js
  Line 5:16:  Component definition is missing display name  react/display-name

src/components/common/withData.js
  Line 11:10:  Component definition is missing display name  react/display-name

src/models/planters.js
  Line 87:35:  '_state' is defined but never used  no-unused-vars

src/models/species.js
  Line 92:32:   'state' is defined but never used  no-unused-vars
  Line 100:34:  'state' is defined but never used  no-unused-vars

src/models/trees.js
  Line 64:23:   'state' is defined but never used  no-unused-vars
  Line 67:24:   'state' is defined but never used  no-unused-vars
  Line 209:20:  'id' is defined but never used     no-unused-vars

Much like the contacts.google.com "Merge and fix" function it would be great to have a list of planters displayed in groups that share the same information such as device_id, telephone number and at least one name (exact parameters to be discussed). The grouped planter info would then be merged by an admin into one only when 100% sure about the duplicate account. The trees would also have to be reallocated to the new merged planter id. A great task for new developers.

The new-style UUIDs are very cumbersome as card titles.
They could be made less prominent (e.g. smaller font) or removed from the UI altogether.

EDIT: Filtering by Device Identifier now captured in #116.

It would be helpful to be able to filter Planters by their device identifier (part of the planter_registration record linked to the planter). Note that there may be multiple planter_registration records, and therefore device identifiers associated with a planter.

We should also add this field to the Planter Detail dialog.

The corresponding API issue is Greenstand/treetracker-admin-api#532

All references to 'trees' in any current admin panel feature should instead read 'captures'. And 'tree' becomes 'capture'.

We should include the planter's country of registration in the Planter Details dialog.

The vertical scrolling behaviour of the Capture Matching tool could be improved.
Currently, there are three nested vertical scroll areas:

1. Candidate tree images (CandidateImage.js)
2. Candidate tree frame (right half of CaptureMatchingFrame.js)
3. Whole page

We should avoid nested scroll areas.

Instead:

• The candidate tree images should not scroll (the whole image can be displayed in the thumbnail)
• The left and right sides of the tool should scroll independently, or better still, the capture image on the left should be resized to fit the height of the viewport (the CaptureHeader can be reduced in height to allow more room for the capture image)
• The scroll areas should be visually distinct to give the user a cue for what to expect

In the following filters, the user should be able to trigger an Apply by pressing enter while focussed in one of the filter fields:

• Verify filter
• Trees filter
• Planters filter

We should be able to do this easily using a form submit control.

This goes for any new filters that are created.

The Verify page uses optimized images for its thumbnails, but they are too small on larger screens.
In a 1600px wide window, the thumbnails are 388px wide but the images are optimized to 320px.
This causes blurry images.

With the current breakpoint configuration, the thumbnails go up to 495px wide.

The 'device_id' field of the trees table is no longer populated. Instead, the device_identifier field is used.
The Admin Panel should be updated to filter by the deviceIdentifier property from the trees API.

We should also display Device Identifier in the tree detail dialog instead on Device ID.

The corresponding issue on the API is Greenstand/treetracker-admin-api#531

Since the introduction of enforced Prettier use, it's difficult to see the meaningful changes in individual PRs due to the number of whitespace, semicolon and comma changes.

It would be useful to run Prettier on the whole workspace in one go so that all subsequent PRs are clean.

Overview

The Stakeholder Manager tool (name may change) allows Admin Panel users to list and edit Stakeholders on the Treetracker platform.
A Stakeholder (currently called an Entity) is any Person or Organization who can create or own impact.

This issue captures the first use case: Viewing Stakeholder details and relationships.

This is a new page in the Admin Panel that lists Stakeholders, displays the basic information associated with them and groups together Stakeholders to show parent-child relationships.

Stakeholder Information

The basic information currently available (as displayed in the mockup above) is:

• Type (organization or person)
• Name (first and last name for a person)
• ID
• Logo (for organizations)
• Map name (subset of trees displayed on https://treetracker.org)
• Email
• Phone number
• Website

Stakeholders are linked by relationships. Each relationship has a parent and child Stakeholder, and annotations for the Type and Role of the relationship.

In the Stakeholder list, child stakeholders are displayed immediately below their parents.

Layout

The tool follows the same convention as other Admin Panel tools, using pagination to display a number of entries at a time.

Stakeholders can be sorted and filtered on any of the displayed fields, and a search box allows quick-look filtering on arbitrary fields.

API

A new API microservice will be created to support the Stakeholder Manager tool (outside the scope of this issue). This will be a stub API only during development. Details to follow.

Permissions

New role policies list_stakeholders and manage_stakeholders and at least one new role Stakeholder Manager will be created to restrict who can view the Stakeholder Manager tool.

Incomplete Design Elements

The mockup shown here does not cover everything. There is some work required to determine how the following look/work:

• Filter selection
• Sort selection
• Relationship types and roles

Next Steps

Additional functionality not covered under this issue, but worth keeping in mind when implementing the feature:

• Clicking a Stakeholder will open a modal dialog with additional details and controls for the Stakeholder
• Clicking the Add Stakeholder will open a similar modal that allows the user to create a new Stakeholder

See screenshot. We should show the version or Build number and or deplyment date

of the admin panel (in case we have a functioning versioning) See mockup

Users can add species through the Species page or by tagging a capture with a species name they type in (rather than selecting from the dropdown).

Species names should be unique; if the name already exists, the capture should be tagged with that species.

Everywhere we display a capture ID (currently referred to as tree ID), we should make the text a link to the web map displaying that tree:

`${process.env.REACT_APP_WEBMAP_DOMAIN}/treeid=${id}`

Similarly, where we display the planter ID, we should link to the webmap displaying all of the planter's trees:

`${process.env.REACT_APP_WEBMAP_DOMAIN}/userid=${id}`

These IDs are displayed in the following places:

• Tree detail (Verify page)
• Planters page
• Planter detail (Planters page and Verify page)
• Trees page

The user should see some indication that clicking the link will open the webmap, and the link should always open in a new tab.

Currently an image is displayed at around 480420 px in a three column view before it jumps to the 4 column view. The actual image is delivered and loaded at around 7681024px. The image could easily resized via CDN to about 1/3rd of its size in kB. Since most admin panel operators are in countries with slow internet this is a critical improvement and a low hanging fruit. Currently Freetown has to verify 50.000 trees and their internet is slow creating a bottle neck.

Possible services if not part of AWS or DO are https://statically.io/

Below two images ... one is whats loaded by the browser the other one is the size displayed.

The Add User dialog in the User Management page should inform the user if the username they've typed already exists.
It should:

• check for duplication as the user types
• invalidate the username field and display an informative warning
• disable the Save button

The current title, Greenstand - Tree Tracker, is not very helpful and breaks the Greenstand communications guidance by splitting Treetracker into two words.

For consistency with the webmap, it should read Treetracker Admin by Greenstand

The title should also change dynamically with page changes, e.g. Verify - Treetracker Admin by Greenstand

This is a first stab at the UI for the Capture Matching tool.

This includes:

• New Capture Matching menu item (maybe camera or compare icon) leading to...
• New Capture Matching page
• Capture component showing an image and basic capture details (to be refined)
• Ability to skip to the next capture
• A list of candidate tree matches with
  • capture images displayed
  • Same tree button to confirm match

For development, we can mock the capture and candidate match data.

Changes should be pushed to the capture-matching branch.

Below is an initial UI design, although this is expected to evolve with the implementation.

For reference, the capture matching user workflow is:

https://youtu.be/zHFkmFmJAwk explains the issue.
To replicate go to verify, filter by a planter id and go back to home screen. untagged captures number will be specific to the filter but no longer showing the total. This is not a big problem or real bug.

The Tags sidebar on the Verify page has a set of tag options, some of which fall under Approve and Reject headings.

What's not clear is that when you reject a tree, only the rejection_reason is recorded.
All other tags (morphology, age and species_id) are discarded, even though the inputs are still enabled and visible.

Perhaps all tag inputs should sit under either Approve or Reject.

After leaving the browser open for some time and/or putting computer to sleep the login expires. When refreshing the browser it shows a 404 error. Could we rather go back to the login screen with a "login expired" message?

The Trees page needs an Export button that exports all trees included in the current filter to a csv file.
Pressing Export should generate a popup dialog that allows the user to select/deselect the columns they'd like to include (all selected by default).
When the user clicks Export in the popup dialog, the browser initiates a download of the generated csv file (including column headers).

Note that all filter matches should be included, not just those visible on the current page.

Need to add features into the species section, add function & UI to let administrator combine duplicated trees, and also need to update the trees to link to the new species.

Organization users do not currently have permissions to list organizations, but the client is attempting to query organizations anyway.
In the short term, this query should be disabled for Organization users (to be implemented under this issue).

Steps to reproduce

1. Log in to the Admin Panel as an organization user (a user with one or more organization-specific roles, e.g. Freetown Manager)
2. Open the Verify page
3. Observe the 401 error in the console

In the long term, we will want to allow organization users to list and manage child organizations. This will be managed under a separate issue.

We need to be able to filter by organization ID including the org. hierarchy.

See image attached

The Greenstand logo on the Admin Panel is not being displayed.

Inspection shows:

<img src="[object Module]" alt="Greenstand logo" style="max-width: 149px; max-height: 32px; margin-bottom: -6px;">