[Epic - Tree Taxonomy] Create filterable Tree list based off tree-taxonomy and city street tree tree-allow lists

[zoobot]

Quick summary

FUF (Friends of the Urban Forest) has requested a tree taxonomy for the neighborhoods of San Francisco for users to see what trees are acceptable to be planted. Depending on the neighborhood and area, certain trees are restricted due to the climate and amount of sunlight received. The tree taxonomy will serve as a database for all communities plus a source for users to research what tree they may be interested in learning or planting in their neighborhood.

Issues

A few issues include not having enough source data at the moment for people to see an extensive list of trees. Another issue is the mobile aspect of the product not being as responsive with text clipping or being difficult to read. We want cities to eventually be able to upload or update their data source to have a current source at all times.

Goal

The goal is to have a responsive product that is viable for all userbases from city government to a random person running into the webpage. And to meet the standards of FUF for requesting the feature.

Get Started

Get started with our onboarding, https://github.com/waterthetrees/waterthetrees/wiki/Onboarding and read through this epic.

Resources

• Design Figma: https://www.figma.com/file/5C3v1LUNwMPQy9JOgnKEtr/Water-the-Trees?node-id=1355%3A9085
• Casey Trees https://caseytrees.org/trees-list/
• Current Live Webpage https://waterthetrees.com/treelist#pos=2/41.03/-99.08

Current Design

New Design Preview

Bugs

MVP

• Image Downloader
• View Toggle
• Tags for Dormancy
• Quilt View Cards
• Column view and Quilt View

V1

-[ ] 3 views including Card, List, Column Views
-[ ] Filters show on top for mobile - sticky with ability to x them off the filter list
-[ ] Tree matched count
-[ ] Move the filters back to the left.
-[ ] Have blank image for tree placeholder or find images for every single tree in list

• Scale images for performance

Milestone 0 - Design / Preparation

• [Tree Taxonomy - Planning] Information Architecture #617
• [Tree Taxonomy - Planning] User Flow
• [Tree Taxonomy - Planning] Competitive Analysis #616
• [Tree Taxonomy - Design] Tree pages for unique trees #571
• [Tree Taxonomy - Design] Tree's Info page #619
• (Tree Taxonomy - Design) MVP with filterable tree list for existing tree lists in the data component - with dynamic routes with link to tree #570
• [Tree Taxonomy - Design] Grid Cards Hover Effect #690
• [Tree Taxonomy - Design] No Image Card #691
• [Tree Taxonomy - Design] List Cards Hover Effect
• [Tree Taxonomy - Design] Table Row Hover Effect
• [Tree Taxonomy - Design] Component Actions (Mobile / Desktop)
• [Tree Taxonomy - Design] Sticky Filter (Mobile)
• [Tree Taxonomy - Design] Sticky Unique Trees

Milestone 1 - Continuation of Design / Implementation

• [Tree Taxonomy - Design] Filter Design #674
• [Tree Taxonomy - Design] List View #675
• [Tree Taxonomy - Design] Table View #676
• [Tree Taxonomy - Design] Mobile List View #679
• [Tree Taxonomy - Design] Dormancy Badge Design #680
• [Tree Taxonomy - Design] Display Type Dropdown Menu #754
• [Tree Taxonomy - Design] Filter Additions #681

Milestone 2 - Restyling the overall unique tree profile to match mock ups

• [Tree Taxonomy - Design Implementation] Applying new hero section unique tree #748
• [Tree Taxonomy - Design Implementation] Applying new summary section #749
• [Tree Taxonomy - Design Implementation] Applying new sticky header to unique tree profile #764
• [Tree Taxonomy - Design Implementation] Applying new gallery section #765
• [Tree Taxonomy - Design Implementation] Apply new tree facts section #766
• [Tree Taxonomy - Design Implementation] Apply new soil & zones section #767
• [Tree Taxonomy - Design Implementation] Apply new other facts section #768
• [Tree Taxonomy - Design Implementation] Apply new notes section #770
• [Tree Taxonomy - Design Implementation] Apply new references section #771
• [Tree Taxonomy - Design Implementation] Apply new you may also like section #773

Milestone 3 - New sections to add to unique tree profile to match mock ups

• [Tree Taxonomy - Design Implementation] Apply new Related News and Events section #769
• [Tree Taxonomy - Design Implementation] Apply new contributors section #772
• [Tree Taxonomy - Design Implementation] Apply new edit & view history section #763
• [Tree Taxonomy - Design Implementation] Apply no image available for card #752

Milestone 4 - Restyling the overall tree taxonomy search to match mock ups

• [Tree Taxonomy - Design Implementation] Applying updated hero section tree taxonomy search #750
• [Tree Taxonomy - Design Implementation] Apply grid view #751
• [Tree Taxonomy - Design Implementation] Apply new list view #753
• [Tree Taxonomy - Design Implementation] Apply updated table view #755
• [Tree Taxonomy - Design Implementation] Applying new filter tree taxonomy search #756

Milestone 5 - Unique Tree Add Form to match mock ups

• [Tree Taxonomy - Design Implementation] Apply new input field dropdown #757
• [Tree Taxonomy - Design Implementation] Apply new input field type #758
• [Tree Taxonomy - Design Implementation] Apply new input field dropdown search #759
• [Tree Taxonomy - Design Implementation] Apply new sticky submit section #760
• [Tree Taxonomy - Design Implementation] Apply new confirmation message once submitted #761

Milestone 6 - Reuse components to create Unique Tree Edit Info to match mock ups

• [Tree Taxonomy - Design Implementation] Reuse Unique Tree Add Form components to create edit info #762

Milestone ??? - Additions to Tree Taxonomy

• [Tree Taxonomy - Design] Incorporating featured trees per area #707
• [Tree Taxonomy - Design] Add Unique Tree Form #747

Milestone ??? - Future Plans / Ideas

• AI generated, drawings, or vector/line drawing style images for the trees similar to a simplified cartoon version of Architecture of Trees and Ernst Haeckel for the tree list page
• photo gallery of tree species for tree page
• Build a tree-taxonomy table to host all unique world trees and show native trees per area and link to allowed trees per city
• [Tree Taxonomy - Planning] Integrate with Map search to show tree cards
• [Tree Taxonomy - Design] Compare trees with one another by selecting
• [Tree Taxonomy - Design] QR Generator / Physical Card Design

Extras

If you have any additional questions just @zoobot

[zoobot]

MVP snapshots

[ri0nardo]

@zoobot do we want to add a task for a search bar? also a filter to sort by neighborhood if we are targeting san Francisco first?

[zoobot]

@ri0nardo Good ideas!

We have a search bar we can re-use on this component so that probably won't take much work to add in.

We'll need to request the neighborhood list from FUF, to see which trees are allowed in which neighborhoods.

[ri0nardo]

Making a note to make this design be responsive to mobile.

[zoobot]

Mobile view so far, the filter is fixed, the list scrolls.

[zoobot]

Neighborhoods will probably have to be a dropdown.

[ri0nardo]

@zoobot looking at the casey trees. the filter being on the top rather than taking up half the screen on the side probably makes more sense for mobile. Adding screenshots. But there could be other solutions as in having a sticky filter at the bottom of the screen to pull up (may not be a good solution, but something I thought of).

[zoobot]

It's using the Panel Drawer for the sidebar filter so for mobile we'd have to switch to the Scrollable Dialogue component for the filter to be full screen. Should be an easy change for that.

https://github.com/waterthetrees/wtt_front/tree/main/client/src/components/PanelDrawer

https://github.com/waterthetrees/wtt_front/tree/main/client/src/components/ScrollableDialog

[ri0nardo]

@zoobot Wanted to make this suggestion, not for the mvp, but a later integration. I was considering integrating this filter onto the map page rather than its own. You mentioned that FUF want to base this off neighborhoods, and identifying the neighborhood for 2/3 of the screen would be a nice touch if we highlight the boundary.

[zoobot]

Great idea @ri0nardo This would be a very nice filter to have.

I am going to add @tzinckgraf on this as we'd need more data to be in the vector tiles to do this kind of filtering on the map.

Since FUF also wanted to use it to give homeowners a way to choose a good tree, might be nice to have it

1. On it's own treeinfo page with a button to show the map as well
2. On the map with a revamp of the current filter
3. Integrated into in the planting request somehow?

[ri0nardo]

@zoobot a few more questions about the tree taxonomy. Since each tree is a card, do we want to add tags to each tree? I ask since the casey trees have less content when presented.
The mock up you made has quite alot more content, but only show 3 full cards and 3 partial cards. On the https://caseytrees.org/trees-list/ you see about 15 cards on desktop which is quite alot. Not sure which direction we want to go if its more content on the preview or more cards presented.
Also you mention requesting trees, I assume we will have trees that will be allowable per neighborhood or city. Are we going to make it so users need an account to request any tree or maintenance? I went on this cities request form and it doesnt require an account or email when making any type of request https://www.chulavistaca.gov/departments/public-works/service-requests . doesnt allow you to request a tree, but just mentioning that.

[zoobot]

Since that version, I removed the notes and only have that on the tree's page. We can squish the cards down to fit more cards. Tags would be nice, what would go on there?
We should start making a list of ALL the stuff that would be nice to have on there and then we can trim it down to MVP.

We don't actually have the data for which trees are allowed in which neighborhoods/city so that'll have to be city by city. We should brainstorm how we can make that easier.

It is nice to be able to request without having to make an account. I am on the fence on this one.

[zoobot]

List of data on the cards: (feel free to edit/add to this list)

• drought tolerant
• Watering needs
• native
• flowering
• growth speed
• sun/shade/partial shade

https://calscape.org/loc-California/Sambucus-mexicana-(Blue-Elderberry)?srchcr=sc642110e4ac778

[ri0nardo]

A tag I was thinking of was neighborhood, but that now seems too specific since we might run into multiple Financial districts throughout many cities. But maybe a nice tag is whether the tree is endangered? I haven't gave it much thought. I've just notice that tags are good for cards to give quick info that is eye catching.

[zoobot]

Sounds good, we could have leaf badges too

[ri0nardo]

@zoobot since there is unique tree data, is there going to be an upload that is similar to the sources?

[zoobot]

@zoobot since there is unique tree data, is there going to be an upload that is similar to the sources?

Good idea! These files tend to be pretty big. Our current code relies on a build process when the server starts so we need to think through whether we want to host the files or link to a url somewhere. Not sure how common it is to share these types of files via the web... This should be a v1 feature, not mvp.

[ri0nardo]

Good idea! These files tend to be pretty big. Our current code relies on a build process when the server starts so we need to think through whether we want to host the files or link to a url somewhere. Not sure how common it is to share these types of files via the web... This should be a v1 feature, not mvp.

If its not common to share the files then its not worth the time trying to build this out?