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

zoobot commented 1 year ago

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

home profile

New Design Preview

Tree Taxonomy Search Grid profile

Bugs

MVP

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

[x] #617
[ ] [Tree Taxonomy - Planning] User Flow
[x] #616
[ ] #571
[x] #619
[x] #570
[x] #690
[x] #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

[x] #674
[x] #675
[x] #676
[x] #679
[x] #680
[x] #754
[x] #681

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

[ ] #748
[ ] #749
[ ] #764
[ ] #765
[ ] #766
[ ] #767
[ ] #768
[ ] #770
[ ] #771
[ ] #773

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

[ ] #769
[ ] #772
[ ] #763
[ ] #752

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

[ ] #750
[ ] #751
[ ] #753
[ ] #755
[ ] #756

Milestone 5 - Unique Tree Add Form to match mock ups

[ ] #757
[ ] #758
[ ] #759
[ ] #760
[ ] #761

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

[ ] #762

Milestone ??? - Additions to Tree Taxonomy

[ ] #707
[x] #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 commented 1 year ago

MVP snapshots

ri0nardo commented 1 year ago

@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 commented 1 year ago

@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 commented 1 year ago

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

zoobot commented 1 year ago

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

zoobot commented 1 year ago

Neighborhoods will probably have to be a dropdown.

ri0nardo commented 1 year ago

@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 commented 1 year ago

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 commented 1 year ago

@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. Desktop View

zoobot commented 1 year ago

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

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

ri0nardo commented 1 year ago

@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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

Sounds good, we could have leaf badges too

ri0nardo commented 1 year ago

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

zoobot commented 1 year ago

@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 commented 1 year ago

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?

zoobot commented 1 year ago

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

Every city I've talked to has a "list per neighborhood" and they email it to users when you ask. I meant I'm not sure how often they host it as city open data so we can grab a url or will we have to just save their csv.

waterthetrees / wtt_front