[New Feature Implementation] Implement new design of "Tree Sources / Data" page plus specific sources

[ri0nardo]

Will need to document city information including, but not limited to "request tree removal", "plant a tree", "Tree trimming".

Have a feature where users can submit links, so we don't have to do all the work.
Have a report feature if links are broken or need update.
Need to design a report broken and add link button as a sidebar.

Will have export xlsx and doc button.

When hovering over a row will change color. When click on column, column will change color which is organized from A-Z to Z-A or numbers.

Figma Link:
To find design, go to Desktop Pages and scroll need the bottom of work to find the community outline.
https://www.figma.com/file/5C3v1LUNwMPQy9JOgnKEtr/Water-the-Trees?node-id=811%3A855

Begin with cities in the Bay Area with data that is already included on the global map.

• Oakland
• Alameda
• Berkeley
• San Francisco
• Monterey
• Oxnard

Same as issue waterthetrees/wtt_db#28

See link for grid https://mui.com/x/react-data-grid/

[ri0nardo]

• Oakland Tree Services https://www.oaklandca.gov/topics/tree-services
• Berkeley Tree Services https://berkeleyca.gov/city-services/streets-sidewalks-sewers-and-utilities/city-trees-and-coast-live-oak-ordinance#:~:text=To%20apply%20for%20a%20permit,or%20removal%20will%20be%20permitted.
• Alameda Tree Services https://www.alamedaca.gov/Departments/Public-Works-Department/Street-Trees
• San Francisco Tree Services https://sfpublicworks.org/remove-street-tree
• Monterey https://monterey.org/city_hall/parks___recreation/beaches,_parks___playgrounds/trees___urban_forestry/local_tree___plant_selections.php
• Oxnard https://www.oxnard.org/environmental-resources/

[ri0nardo]

Update: The bottom footer has been updated to include the license and privacy policy links

Community Page - New Page to add to the website.

See data page table as a template for the table. Will need to incorporate a search filter bar.

Sidebar Add Link and Report Broken Link
Will be the same as the new tree detail sidebar. Will need to be the same sizing. The data needs to be incorporated.
For broken links the search bar will be a filter search bar that will limit the search for current links on the site.

See Figma File for details of the page. To find go to Desktop Page and scroll down. https://www.figma.com/file/5C3v1LUNwMPQy9JOgnKEtr/Water-the-Trees?node-id=1409%3A9510

[ri0nardo]

redesign of community page. components and sizing to come soon.

[ri0nardo]

new image for the background.

attaching background image here

[ri0nardo]

rose mentioned combining the data and community page at 11/30/2022 meeting. need to give it thought since they function identically.

[ri0nardo]

@vernfongchao redesigned the community page. All info is on Figma. Noting that I am looking at a way to combine the data page plus this community page. But the solution will take time, so proceed with the new design.

[ri0nardo]

https://medium.com/nextux/design-better-data-tables-4ecc99d23356 adding a link to data table designs. We are going to go with horizontal scroll for mobile.

I am going to reorder the columns by:

1. Organization
2. Service
3. City
4. State
5. Country

[ri0nardo]

@vernfongchao i updated the broken link flow. I like how this work than the previous design. This eliminates the sidebar, and keeps it all on the table row. I am including a video and images. I want to rework the adding a link, but need to think about the best way to do it.

https://user-images.githubusercontent.com/98299952/209536142-61c1a87b-1e3b-494e-813c-cc74b3b47ea6.mp4

[ri0nardo]

@vernfongchao figured out a way to remove the sidebars for this page. I added a button called "Add link" next to the search bar. Once a person clicks it, the search bar changes to a input link bar. this is all the changes to occur for this page.

[ri0nardo]

I'm renaming this tree sources since this design is more related to that information. But I have to redesign it.

[ri0nardo]

[ri0nardo]

[ri0nardo]

@zoobot question about the tree data selection field. I noticed each time you select a specific tree data that you only see one data source. I was thinking of changing the selection field to a filter which would allow the user to select multiple data sources by a checkbox. Long term having a search within the selection field would be ideal since it could be a mess scrolling to find a data source. I have an example for a timezone without the checkbox, but essentially performs the same activity.

[ri0nardo]

@zoobot suggestion about the tree sources, the column "who" and "contact" are essentially the same? Would it be better to remove either one?

What does the info column mean? I see a link, but not sure about the purpose.

Do you think the "notes" column is needed?

[ri0nardo]

for uploading tree data, I want to move the sidebar info to a button that redirects users to a full screen of actions. For events and links redesign, I didn't incorporate the sidebar, and made a specific screen to put all the information in. See image below of the example.

[ri0nardo]

wtt_front #275

[zoobot]

@zoobot suggestion about the tree sources, the column "who" and "contact" are essentially the same? Would it be better to remove either one?

What does the info column mean? I see a link, but not sure about the purpose.

Do you think the "notes" column is needed?

Yes on notes, for contact we should have email, contact(organization), phone

[zoobot]

@ri0nardo Is this issue for the tree source/data page? or is #275 275?
If you want to play with what I have so far, tomorrow I can send it to somewhere on dev.
There's some design ideas I have, generally I think it might be nice to add the fields in the same way as a spreadsheet row so you can see all the headers. I don't have that functionality currently though so that might need to be a later iteration of it. Currently adding data is in a slideout sidebar.

#401

[ri0nardo]

@zoobot im trying to figure out what groups we could potentially group together so we dont have text be clipped or not legible. I found an example where you stack contact information.

But I understand the need to make it a spreadsheet so it can be editable.

Unrelated question to this, but do we want to have multiple contacts from the same source? As if theres a person who works on the tree data for a city, but maybe also the head of environment at a city?

[ri0nardo]

@ri0nardo Is this issue for the tree source/data page? or is #275 275? If you want to play with what I have so far, tomorrow I can send it to somewhere on dev. There's some design ideas I have, generally I think it might be nice to add the fields in the same way as a spreadsheet row so you can see all the headers. I don't have that functionality currently though so that might need to be a later iteration of it. Currently adding data is in a slideout sidebar.

#401

I was just looking through the list and found that camile opened a ticket on this, so i wanted to tag it here since this is where the conversation was happening

[zoobot]

@zoobot im trying to figure out what groups we could potentially group together so we dont have text be clipped or not legible. I found an example where you stack contact information.

Stacking is nice, we could figure out how to edit that I think.

Unrelated question to this, but do we want to have multiple contacts from the same source? As if theres a person who works on the tree data for a city, but maybe also the head of environment at a city?

Love that idea, we don't have it implemented in the database right now. We'd need to spec this out how it would work and what relationships we need for organizations. Currently we have users but not an organizations table in the database. Let's bring this up as something to start thinking about.

[zoobot]

For now, one source, one email/organization/phone.

Future:
Organizations can have multiple users(with emails and phones)
Organizations can have multiple sources
A source can have a "default" contact email/phone within that organization.

[ri0nardo]

I'm thinking to make it easier to scan through the row of information (currently theres alot going on with one row).

What is visible on a row is Location, state, city, country, info (i believe this is the link to the city), download, and broken button

Then if you click on the row a dropdown menu appears with contact information & notes
So for the future there can be multiple contacts when you open a dropdown menu.

If there are other ways you want to go with it, we can go with that to. I'm just trying to simplify and make it easier to digest for people first seeing it.

[zoobot]

I'm thinking to make it easier to scan through the row of information (currently theres alot going on with one row).

What is visible on a row is Location, state, city, country, info (i believe this is the link to the city), download, and broken button

Sounds good, I guess for now, also an edit button that opens the slideout?
info, download, broken can potentially be icons
state and country can be shortened to 2 letter codes

Then if you click on the row a dropdown menu appears with contact information & notes So for the future there can be multiple contacts when you open a dropdown menu.

Do you mean like an arrow that opens the specific source to show more details about the source and shows all the columns?

[ri0nardo]

I'm thinking to make it easier to scan through the row of information (currently theres alot going on with one row).
What is visible on a row is Location, state, city, country, info (i believe this is the link to the city), download, and broken button

Sounds good, I guess for now, also an edit button that opens the slideout? info, download, broken can potentially be icons state and country can be shortened to 2 letter codes

I think if we have the column titles clear it can be icons, or icons with text (which ever makes sense with this situation)
For countries it might make sense to have it be 3-4 letter codes. I know theres labeling for airports that use 3-4 letters.
https://www.nationsonline.org/oneworld/IATA_Codes/airport_code_list.htm

Then if you click on the row a dropdown menu appears with contact information & notes So for the future there can be multiple contacts when you open a dropdown menu.

Do you mean like an arrow that opens the specific source to show more details about the source and shows all the columns?

Yes thats what i think long term would be ideal. I'm thinking some cities might get really involved and have potentially 5 contacts which could cause a problem with the current layout.

[zoobot]

I think if we have the column titles clear it can be icons, or icons with text (which ever makes sense with this situation) For countries it might make sense to have it be 3-4 letter codes. I know theres labeling for airports that use 3-4 letters. https://www.nationsonline.org/oneworld/IATA_Codes/airport_code_list.htm

We do have Alpha3 codes for the sources now. :)
https://github.com/waterthetrees/tree-sources/blob/main/sources/argentina.js#L13

[ri0nardo]

@zoobot I was just thinking about the tree sources and data, and how there isn't a column to redirect to the tree data right now? I'm trying to figure out how to get redirected to this page from sources https://waterthetrees.com/data Or am I wrong, and its already there?

[zoobot]

@zoobot I was just thinking about the tree sources and data, and how there isn't a column to redirect to the tree data right now? I'm trying to figure out how to get redirected to this page from sources https://waterthetrees.com/data Or am I wrong, and its already there?

Redirect so they can look at a table with the specific tree's data? There is not but it would be easy enough to do that. I think I had it on there at one time.

[zoobot]

@ri0nardo Here's how it's looking currently

[zoobot]

[ri0nardo]

@zoobot I like the dashed upload box, very clear. From that addition, you can remove the add/upload buttons, but use one of the icons for the dashed box.
Is there a confirmation screen once you submit the data?

[zoobot]

@zoobot I like the dashed upload box, very clear. From that addition, you can remove the add/upload buttons, but use one of the icons for the dashed box. Is there a confirmation screen once you submit the data?

Currently there's not a confirmation but the fields are validated. Add confirmation and change the button to "saving" and then a message that it was saved?

Currently the buttons show/hide the dashed box, it's hidden by default. I can use icons only to show/hide but didn't think it was clear enough what they do without the buttons.