Update AUDIT UI/UX

[joshuajames-smith]

Problem

AUDIT requires an update to the UI and UX.

Solution

AUDIT has a project level view which is accessed via MANAGE or CURATE.
The updated AUDIT UI is spilt into two sections: controls [left-side] and data [right-side].

The date/time picker allows users to select a time frame which controls what data is shown within the table.
This component is comprised of 2 separate boxes [due to materialUI plan limitations] inside a single container. They define the start and end of the search time frame.

The search component allows users to apply a specific search filter which controls what data is also shown within the table.
This component is comprised of 2 separated text fields inside a single container. They allow a user to select a filter via a search category [1st text field] and related input [2nd text field]. The project-level options are: User [Select User], Action [Select Action] and Image [Select Image].

The export button allows users to export the audit trail with a variety of options.
This component is comprised of the download icon inside a single container. Clicking this button presents users with a list of export options.

The table allows users to view and interact with the audit trail.
This component is comprised of our data table component. This allows users to sort data by individual columns. The project-level data should display: Date & Time, User, Action, Image and Details. The information icon contains extended details of the action, i.e. attached JSON. Within project-level view, an open icon in grey appears next to both an annotation session action and image allowing for navigation to the image-level view.

When a user opens an image they move from the project-level to image-level view. This action auto-applies a filter which is shown via the search component. A user can navigate back via the back icon which appear in the topbar of the data table component. This should also be reflected within the tooltip.

The search component should update. The image-level options are: User [Select User], Annotation Type [Select Annotation Type] and Action [Select Action]. The data table should also update. The image-level data should display: Date & Time, User, Annotation Type, Action and Details.

When a user opens an annotation session action they move from the project-level to image-level view. This action auto-applies 3 filters which is shown via the date/time picker and the search component.

The date/time picker is primarily based of the materialUI component but some tweaks where UX could be improved.

The boxes allow for user input via typing but also present two menus: date and time.

The date menu is restyled to have consistency with our design system. The arrows allow a user to move between months but clicking the date opens a secondary menu to view a list of months and years. There should also be a checkbox to allow a user to select all day which removes the need for selecting a time - this should auto fill the secondary date/time picker and use the time 00:00 and 23:59 next to dates to achieve this.

The time menu is not based on materialUI as it has arguably a bad UX for this feature. Instead we should use a list of times in 15 minute intervals which combined with the type input ability allows a user a more general and specific time selection method.

When a user clicks the information icon it opens a dialogue which lists a variety of metadata attached that specific audit log including long string JSON details.

When a user clicks the export button they are shown a menu with several options to export the audit trail, this includes: Export Full Audit Trail, Export Filtered Audit Trail, Export Selected Audit Trail [display when one or more rows has been selected] and Export Custom Audit Trail.

If a user selects to export a custom audit trail they are shown a new dialogue which allows them to set custom filters/parameters via date/time picker and search component. This ensure a user doesn't need to apply the filters directly to AUDIT before being able to export.

Considered Alternatives

Following a discussion with Lucille around AUDIT and regulation, there is a few elements which may require further thought input - @philipjackson @ChasNelson1990.

1. How pre-gliff.ai activity may be tracked or added?
2. Is it worthwhile tracking the platform version within AUDIT? How could we achieve this or is this even possible?
3. How AUDIT is currently recording the transformation of the dataset but what about the attributes, i.e. metadata of patients or images etc?
4. Why show JSON? What purpose does this serve to our users when regulation is not likely to understand or require this level of data?
5. Current naming of each section is Project Level Audit Trial and Image Level Audit Trial but while this makes sense in the context of viewing on the platform this likely won't make sense externally when exported. Consider renaming and adding gliff.ai ... before each title in the exported document?

Additional Context

Project Level Actions

Create Project > Add Project Name > Edit Project Name > Add Project Description > Edit Project Description > Assign Project User(s) [Show User Level?] > Auto-Assign Project User(s) > Remove Project User(s) > Assign Image Label(s) > Remove Image Label(s) > Set Default Project-Level Labels > Allow Multi-Labels > Cancel Multi-Labels > Allow Restricted Labels > Cancel Restricted Labels > Upload Image(s) > Download Image(s) > Annotate Image Session > Add Plugin to Project > Activate Plugin [ZOO] > Remove Plugins > Run Plugin

Image Level Actions

Add New [annotation type/action] Annotation > Clear [annotation type/action] Annotation > Undo [annotation type/action] > Redo [annotation type/action] > Mark Annotation as Complete > Mark Annotation as Incomplete > Add Annotation Label > Remove Annotation Label > Add Paintbrush Stroke > Add 3D Paintbrush Stroke > Erase [annotation type/action] > Fill Paintbrush Stroke > Add Super Marker > Adjust Active Annotation Transparency > Adjust Non-Active Annotation Transparency > Convert Stroke to Pixels > Convert Pixels to Stroke > Add Spline Point > Edit Spline Point > Add Bezier Spline Point > Edit Bezier Spline Point > Close Active Spline > Convert Spline to Paintbrush > Add Rectangle Boundary Box > Edit Rectangle Boundary Box > Adjust Channels > Adjust Brightness > Adjust Contrast > Run Plugin > Edit Contrast > Edit Brightness > Edit Channels > Save Annotation

[ChasNelson1990]

1. How pre-gliff.ai activity may be tracked or added?

We spoke at one point about having an "add custom audit entry" comment box thing? Would this work?

2. Is it worthwhile tracking the platform version within AUDIT? How could we achieve this or is this even possible?

Great idea - @philipjackson ?

3. How AUDIT is currently recording the transformation of the dataset but what about the attributes, i.e. metadata of patients or images etc?

We currently can't change metadata so we don't track that. We should enable both really - @philipjackson ?

4. Why show JSON? What purpose does this serve to our users when regulation is not likely to understand or require this level of data?

I think the audit trail should be complete... but we can keep this sort of data fairly hidden so that you only get there if you want to?