Frontend tools UI and QOL improvements

[surchs]

Context

#35 gave us the essential annotation tool functionality we need. But our UI is still a bit rough around the edges, and there are some minor UX bugs we'd like to tackle now, because that will make the tool a lot better for little effort. Similarly the query tool is feature complete for a while, but could be improved a lot with some minor UI additions.

Why

• Part of Grow userbase #49
• to make the Annotation tool an appealing first encounter with Neurobagel (despite being under active development)
• so we can go and ask people to use and give us feedback on the annotation tool
• to make the "federation" and "sample-level" aspects of our query more self evident
• to transparently show our current limitations as beta tools

Outcomes

• The annotation tool has no obvious "debug mode" UI elements
• The visual annotation workflows have minimal context
• There is a little badge showing that the tools are in beta and will change
• The query tool UI visually highlights federation and sample information
• All frontend tools have logos (including the dash)

What

Annotation tool related

• The assessment tool workflow is horizontally aligned below the column workflow annotation_tool#612
• Clean up the landing page annotation_tool#610

Features

• Improve column highlighting in assessment tool workflow annotation_tool#614
• Cleaner visual interface for assessment tool missing value annotation annotation_tool#620
• Add warning not to use browser back button annotation_tool#619

Help text

• Brief context / helptext on the landing page annotation_tool#611
• The assessment tool workflow has a short explanation text annotation_tool#613
• Add minimal explanation to the download page annotation_tool#615
• Categorization and annotation pages should include proper help text annotation_tool#617
• Warn user about incomplete annotation before downloading annotation_tool#637
• Descriptions for discrete values are not shown in the annotation workflow annotation_tool#616

Query related

• Query response should include total number of subjects in a dataset api#216
• Bump vite from 5.3.3 to 5.4.2 query-tool#265
• Bump tailwindcss from 3.4.4 to 3.4.6 query-tool#219
• Bump eslint-plugin-cypress from 2.15.1 to 3.2.0 query-tool#163
• https://github.com/neurobagel/query-tool/issues/238
• Bump eslint-plugin-react-refresh from 0.4.11 to 0.4.12 query-tool#284

Universal

• Add "in-progress" tag to all frontend tools #62
• Add logo to all tools #61

Discuss: Annotation tool

Discuss: Query tool

Next:

• filler
• More intuitive workflow step names annotation_tool#618
• The "Next" button on the annotation page should send me to the next category, not the download page annotation_tool#236
• Preview of the data dictionary annotation_tool#415

Not planned for now:

• filler
• Bump autoprefixer from 10.4.16 to 10.4.19 query-tool#108

[surchs]

@neurobagel/dev take a look, I think these are the main low hanging UI/UX fruits we can tackle for the most payoff. Let me know what you think, if any should be added, or if some of them have additional dependencies I missed

[alyssadai]

Hey @surchs, thanks for putting this together.

I created + added several issues to the annotation tool and query tool sections, and created new ones to discuss if we want to implement.

[surchs]

Closing as completed 🎉