3578 order tags by frequency of use

[bella-buchanan]

Resolves #3578

Problem: Tags are presented to users in an unordered manner. It could help taggers to see tags in the order they are most frequently used. Additionally, it is important that mutually exclusive tags are presented next to each other for ease of understanding the tag.

Solution: TagTable.getTagsForCurrentCity is an already implemented method that gets the tag frequencies for the city. In this PR, we use these counts to sort tags in LabelController.getLabelTags.

Before/After screenshots

before (unsorted):

after (sorted and mutually exclusive pairing):

Testing instructions

Things to check before submitting the PR

• I've written a descriptive PR title.
• I've added/updated comments for large or confusing blocks of code.
• I've included before/after screenshots above.
• I've asked for and included translations for any user facing text that was added or modified.
• I've updated any logging. Clicks, keyboard presses, and other user interactions should be logged. If you're not sure how (or if you need to update the logging), ask Mikey. Then make sure the documentation on this wiki page is up to date for the logs you added/updated.
• I've tested on mobile (only needed for validation page).

[misaugstad]

@bella-buchanan it looks like the mutually exclusive pairing isn't happening in all cases. One example below ("one button" and "two buttons" are mutually exclusive but not adjacent):

And just because they're sorted in that API doesn't mean that they're sorted in the actual UIs! I think that the ordering is being used by default on the Explore page, but not on the New Validate Beta page. Pasting something I wrote in the original ticket on that front:

For the new Validate page, there is built-in functionality in the drop down search for adding tags that will sort based on a named field. I gave it a default name of "popularity" right now, and we would just need to add that property to the tag objects.

Here's an image from that UI:

[bella-buchanan]

@bella-buchanan it looks like the mutually exclusive pairing isn't happening in all cases. One example below ("one button" and "two buttons" are mutually exclusive but not adjacent):

And just because they're sorted in that API doesn't mean that they're sorted in the actual UIs! I think that the ordering is being used by default on the Explore page, but not on the New Validate Beta page. Pasting something I wrote in the original ticket on that front:

For the new Validate page, there is built-in functionality in the drop down search for adding tags that will sort based on a named field. I gave it a default name of "popularity" right now, and we would just need to add that property to the tag objects.

Here's an image from that UI:

@misaugstad thanks for the comments! I have addressed the sorting on the Explore page by making sure mutually exclusive tags are scored in a way that they are always next to one another:

I also changed the field from count to popularity so that new validate beta can have the correct sorting

[misaugstad]

Things are looking good on the Explore page, but on the NewValidateBeta, it still doesn't look sorted! Below are what I'm seeing, and then the output from the /label/tags API:

[bella-buchanan]

Things are looking good on the Explore page, but on the NewValidateBeta, it still doesn't look sorted! Below are what I'm seeing, and then the output from the /label/tags API:

Thanks @misaugstad, I've been struggling to login as an admin so let me figure that out to close out the new validate issue you're seeing!

[misaugstad]

@bella-buchanan check these docs for help with that!
https://github.com/ProjectSidewalk/SidewalkWebpage/wiki/Process-for-contributing-new-code#do-you-need-to-login-as-an-admin-user

[misaugstad]

A few things from testing:

1. You somehow removed the following lines from the end of the escapeHTML function in Utilities.js, which made it so that neither the Explore nor Validate page would load... Had to figure out what happened to be able to test in the first place.

           }
       });
   }
   

2. On Validate, it seems like maybe the tags start out sorted, but once you add or remove a tag, it removes the sorting..? Here's a before/after when adding a tag. It starts out sorted correctly, but sorting is totally different after adding a tag.