www.fgks.org   »   [go: up one dir, main page]
Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Bulk Tagger updates #8575

Merged
merged 31 commits into from Dec 13, 2023
Merged

Bulk Tagger updates #8575

merged 31 commits into from Dec 13, 2023

Conversation

jimchamp
Copy link
Collaborator
@jimchamp jimchamp commented Nov 30, 2023 •
edited

Closes #8479
Closes #8435
Closes #8584

Updates the bulk tagger to display the selected works' subjects. The bulk tagger can also remove subjects from works.

UI

The bulk tagger has four important parts.
bt_labeled

  1. Search bar: Filters menu options and performs subject tag searches.
  2. Menu Options: Represent subject tags and number of selected works which have the tag.
  3. Create Tag Buttons: Creates new subject tags and stages them for submission.
  4. Submit Button: Prepares form with staged tag data, then POSTs the form.

The Menu Options

Each option represents a subject tag, and can have one of three possible states:

  1. All selected works share this tag (denoted by check mark).
    mo_all_selected

  2. At least one selected work, but not all, share this tag (denoted by dash).
    mo_some_selected

  3. None of the selected works have this tag (no indicator for this state).
    mo_unselected

Menu options are represented by the MenuOption class, which is responsible for the following:

  • Rendering a menu option affordance
  • Controlling the affordance's visibility
  • Removing the affordance from the DOM
  • Holding state:
    • rootElement : Reference to the affordance's root element.
    • tag : Object representing a subject tag, with a name and type. Intended for read only.
    • optionState : Integer value representing one of the three aforementioned states.
    • worksTagged : The total number of selected works that share this tag.
  • Updating the UI state indicator on optionState change.

The actions taken when a menu option is clicked are dependent on the option's state:

Option State On Click
All works tagged 1.If tag staged for addition, unstage
2. Stage tag for removal
3. Change state to "No works tagged"
Some works tagged 1. Stage tag for addition
2. Change state to "All works tagged"
No works tagged 1. If tag staged for removal, unstage
2. Stage tag for addition
3. Change state to "All works tagged"

The Menu Option Containers

Menu options are placed in one of two containers:

  1. The "Existing Tags" container holds options for tags that are already attached to one or more selected work, and tags that are staged for addition or removal.
  2. The "Search Results" container holds options for tags that have been fetched using the search API.

Each container is represented by a SortedMenuOptionContainer object, which does the following:

  • Maintains an alphabetically ordered array of menu options that are in the container.
  • Provides methods for adding or removing menu options.
    • Menu options are attached to the DOM in the correct order when added.
  • Provides methods for searching for menu options

Create Tag Options

Provides means for librarian to create a new subject tag using the contents of the search field. This affordance is hidden whenever the search field's trimmed value is an empty string.

Submit Button

This button is always present, but only enabled if there are tags staged for submission.

Technical

Testing

Stakeholders

@mekarpeles
Copy link
Member
mekarpeles commented Nov 30, 2023 •
edited by jimchamp

This is incredible progress. Here are a few things that may make the experience a bit more consistent + intuitive + useful

image

Edit:

  • Hotfix: Should be able to select just 1 book
  • On Select, Keep Position: If you activate a neutral (deselected) item, show ✅ but don't move location
  • Click Out Confirm:~ In any of the cases where we reach the code that would close the Tagger, if there are pending changes (i.e. submit has not been performed) then show a message: You have unsaved tag changes pending. You must *cancel* or *submit* the current tag changes before selecting additional works. [Cancel] [Submit]~
    • Tags staged for submission are not removed until the form is submitted. No work will be lost by closing the tagger and selecting different works.
  • Check Performance: More aggressive debouncing to avoid lots of requests
    • Debouncing is fixed.
  • Standardize Results: Make the search results all the same design [-/+] Title [label]
  • Alphabetical Ordering: active tags alphabetized first, then inactive tags alphabetized after
  • Use Github Symbols: Use ➖ if only partial, + --> ✅ if added and, nothing if not present (like github)
    • Don't hide de-selected items. If we deactivate a ➖ or ✅, show it in the default list unless there's a search/filter
  • Loading Indicator: Spin / tomb stones / skeleton until subjects fetched
  • Standardize CTA Btns: Full width, submit should be blue + standard CTA (maybe with --size override)
  • 🤷 Z-index? (Search bar)
  • 🤷 Deprioritize & Standardize "Create New": Create new Subject should just be the last card in search results as opposed to sticky (for force patron to look through all options)
    • If a menu option for a tag already exists, new tag creation will fail.
  • Track submissions, tags added, and tags removed

@jimchamp
Copy link
Collaborator Author
jimchamp commented Dec 1, 2023

One more TODO:

  • Track submissions, tags added, and tags removed

@codecov-commenter
Copy link
codecov-commenter commented Dec 1, 2023 •
edited

Codecov Report

Attention: 369 lines in your changes are missing coverage. Please review.

Comparison is base (baad3d8) 16.65% compared to head (b372873) 16.68%.
Report is 99 commits behind head on master.

Files Patch % Lines
...y/plugins/openlibrary/js/bulk-tagger/BulkTagger.js 0.00% 198 Missing and 25 partials ⚠️
...penlibrary/js/bulk-tagger/BulkTagger/MenuOption.js 0.00% 51 Missing and 3 partials ⚠️
...ulk-tagger/BulkTagger/SortedMenuOptionContainer.js 0.00% 36 Missing and 4 partials ⚠️
...y/plugins/openlibrary/js/bulk-tagger/models/Tag.js 0.00% 27 Missing and 10 partials ⚠️
openlibrary/plugins/openlibrary/js/ile/index.js 0.00% 11 Missing and 1 partial ⚠️
...ibrary/plugins/openlibrary/js/bulk-tagger/index.js 0.00% 2 Missing ⚠️
.../js/ile/utils/SelectionManager/SelectionManager.js 0.00% 1 Missing ⚠️
Additional details and impacted files 
@@            Coverage Diff             @@
##           master    #8575      +/-   ##
==========================================
+ Coverage   16.65%   16.68%   +0.02%     
==========================================
  Files          85       88       +3     
  Lines        4406     4680     +274     
  Branches      765      835      +70     
==========================================
+ Hits          734      781      +47     
- Misses       3191     3383     +192     
- Partials      481      516      +35

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@jimchamp jimchamp added the Needs: Submitter Input Waiting on input from the creator of the issue/pr [managed] label Dec 1, 2023
@jimchamp
Add tags to a single work
d1fe864
@jimchamp
Fix bugs related to staged tags
d6b8cf3 
- Updates selected tags using `updateAllWorksTagged` method, which also
updates the UI.
- Stops adding tags to the `tagsToAdd` queue when all works initially
have the same tag.
- Allows tags that initially belong to all selected works to be removed.
@jimchamp
Update selected tag design
2088035
@mekarpeles mekarpeles self-assigned this Dec 4, 2023
@jimchamp jimchamp force-pushed the fetch-work-subjects branch 2 times, most recently from 006259d to 19a5332 Compare December 7, 2023 22:41
@jimchamp jimchamp marked this pull request as draft December 7, 2023 22:55
@jimchamp jimchamp added Needs: Submitter Input Waiting on input from the creator of the issue/pr [managed] On testing.openlibrary.org This PR has been deployed to testing.openlibrary.org for testing and removed Needs: Submitter Input Waiting on input from the creator of the issue/pr [managed] labels Dec 7, 2023
@jimchamp jimchamp marked this pull request as ready for review December 8, 2023 15:56
@jimchamp jimchamp removed the Needs: Submitter Input Waiting on input from the creator of the issue/pr [managed] label Dec 8, 2023
@jimchamp jimchamp marked this pull request as draft December 9, 2023 03:55
@jimchamp jimchamp marked this pull request as ready for review December 9, 2023 04:05
@jimchamp
Ensure correct option order on container change
9edfa06
@jimchamp
Update submit button
b5b4054 
Adds new `cta-btn--primary` class, which has the same styling as our
`available` buttons.  Adds styling for `disabled` states of these
buttons.

Submission button now begins in a disabled state.  On menu option click,
or menu option creation, the disabled state is removed if any tag is
staged for submission.
@jimchamp
Add loading indicator to tagging menu
033117b
@jimchamp
Use same styling for each menu option container
41c4964
mekarpeles
mekarpeles approved these changes Dec 13, 2023
View reviewed changes
Copy link
Member
@mekarpeles mekarpeles left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@mekarpeles
Copy link
Member
mekarpeles commented Dec 13, 2023 •
edited

Would be great to add statsd for:

  • # of tags added
  • # of tags removed
  • # of bulk tag submissions (how often has tool be used)

@mekarpeles mekarpeles merged commit da31adb into internetarchive:master Dec 13, 2023
4 checks passed
This was referenced Dec 19, 2023
Merged
Closed
@jimchamp jimchamp deleted the fetch-work-subjects branch January 31, 2024 00:03
@jimchamp jimchamp removed the On testing.openlibrary.org This PR has been deployed to testing.openlibrary.org for testing label Apr 2, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@mekarpeles mekarpeles mekarpeles approved these changes

Assignees

@mekarpeles mekarpeles

Labels
None yet
Projects
None yet
Milestone
No milestone
3 participants
@jimchamp @mekarpeles @codecov-commenter