UI Rewrite Demonstration and Discussion

[micowan]

I wanted to take some time to show everyone the progress that has been made to date so you can see I haven't been slacking off and to give everyone a chance to comment on what I have done so far.

Please feel free to comment on what you see in this discussion. My plan right now is to have the rest of the work done by early to mid-December, based on whether there are any major changes due to feedback. Then I am going to stand this version, the associated API, and Cosmos DB database up side-by-side with the existing one to give folks a chance to play with it. Once everyone is happy, we will re-deploy as the production system after we have coordinated the changes that will need to come out of the AI data feeds.

Enjoy!
Mike

What Is In this Version (So Far)

1. Hopefully session expiration is better handled. This is For aged authentication, UI confirms moderation, but queue is unchanged #126 on the Open items list.
2. Longer periods for the Dashboard filter. This is item Add longer time periods to Dashboard filter #125 on the Open items list.
3. Significantly improved performance and functionality of dashboard. This is item Improve metrics loading time #100 on the Open items list.
4. Bulk annotation has been added. This is item Bulk annotation or "repeat" button #99 on the Open items list.
5. 2nd load overlays fixed. This is item Upon 2nd load, Detail view does not overlay predictions #93 on the Open items list.
6. Consolidation of different views (unreviewed, positive, negative, unknown) into a single page that can be selected and filtered.
7. A grid view of detections to support bulk annotations and inline editing of rows.
8. A page that shows all the hydrophones in the network, pulling the information from the provided API.

What I Have Not Started Yet (But Plan to Complete)

1. Unit tests for the UI. This is Unit testing for Moderator Frontend #66 on the Open items list.
2. Summary page. This is OrcaHello summary page #129 on the Open items list.
3. Capability to curate labels. This feature will/could be used to allow moderators to identify detections of interest for inclusion on the summary page. This is also Add additional label types (type of animal, type of signal) #113 on the Open items list.
4. Search by tags. This is item Add "tag" as a parameter in OrcaHello API  #127 on the Open items list.

Screenshots for Review

Figure 1: Full Page Editing (The Old Way)

Figure 2: Selecting Detections for Bulk Review

Figure 3: Bulk Reviewing

Figure 4: Inline Editing

Figure 5: Updated and Improved Dashboard/Metrics

Figure 6: Hydrophones in the Network Description

[scottveirs]

Amazing, @micowan ! Thank you SO much for forging on after the Microsoft hackathon last September. You've made amazing progress!!

I'll go over this in our weekly stand-up so we can get more eyes on your efforts and feedback via this discussion topic. But in the interim, I'll tag @skanderm (Skander) -- who I bet will appreciate the use of the API! -- along with @veirs (Val), @dbainj1 (Dave), and @valentina-s for early feedback.

[micowan]

Yes. I was just looking for a list of the hydrophones I did not have to maintain. But the API provided so much more information, it seemed a waste not to take advantage of it.

[scottveirs]

@micowan I think it's going to be really interesting to see if inline or bulk editing is faster! One use case I'm imagining is bulk annotating a suite of candidates with common tags, then going back to them in an inline view to add a different unique tags to each individual candidate in that suite.

Regarding the modal in Figure 3, I think it might be good (at least for new moderators) to alter the text to make it more clear to the editor that they are tagging/commenting on multiple candidates... For example, consider these changes:

1. Change title from Review Candidates to Bulk Review of Candidates
2. Change text from Was there a SRKW call in this clip? to Was there at least one SRKW call in each of the clips?

[micowan]

@scottveirs, has Claire or anyone else talked with you about the Summary page you asked for? I have the stubs in place in the code for it, but am waiting for the figma or other documents for it.

[scottveirs]

I don't think that we made much progress during back in Sept on Akash's good ideas. I'll double-check with Claire via email and cc you...

For now, maybe we just use Akash's proposed intro text, then link back to the OrcaHello overview page where I can easily (via Wordpress) add sections for his items 3 and 4:

3. Latest Notifications/Greatest Hits: section to engage and listen to latest detected alerts, additionally a curated collection of other interesting sounds (e.g. humpbacks, otters, boats/ships)
4. Follow up text content

The we can make his issue #129 a focus for design and development in 2024 hackathon?

[micowan]

Figure 3: Updated Bulk Reviewing

@scottveirs, here is the update per discussion above.

[scottveirs]

Looks great to me, @micowan ! Looking forward to beta testing the new UI!!