Refactor Ontoportal UI/UX

[syphax-bouazzouni]

Context

In this current first semester of 2023, we plan for our Agroportal team, to update our UI/UX. For now, it will be mostly an intern @Bilelkihal and me (@syphax-bouazzouni) that will work on it, for the next 6 months. But we are open if people want to collaborate or work with us on it in parallel.

Anyway will be happy to catch up and implement (if possible) your requirements,

Goals

Our goals are:

• Have a Fluent UI (with the limit of what is possible with our current backend)
• Simple and beautiful UI
• Have a better UX(User experience)
• Use modern technologies (remove the technical debt)
• Have composable UI

Our workflow/plan

1. List all our views ( done in this Google sheet)
2. Order the views by order of importance or easiness to update
3. For each view, we will decide on an action: Nothing, Update, or remove
4. If the action is to remove or update, we will create a GitHub issue for the details
5. If the action is to update, we create a Figma link to design and review future templates (Figma is a collaborative web application for interface design) (see our current Figma templates)
6. Implement and test the new template
7. Deploy or stage it for a specific release.

Requirements

Below are the issues opened about this subject in our local repositories (work in progress)

• Migrate our old (JS) code to Hotwire
• Have a system of components ( a design system) (see https://github.com/allmarkedup/lookbook)
• Update to Bootstrap 5
• Update Login & Register views design ontoportal-lirmm/bioportal_web_ui#130 (comment)
• Update feedback page design ontoportal-lirmm/bioportal_web_ui#151
• Refactor the browse page UI agroportal/project-management#313
• Harmonize, correct and generalize the terminology used by the user interface  agroportal/project-management#321 (comment)
• Refactor Summary page ontoportal-lirmm/bioportal_web_ui#75
• Refactor concept Details page ontoportal-lirmm/bioportal_web_ui#86
• Make the UI easily customizable (have a theme system, with a configuration file, or in real-time with a UI like this https://codepen.io/smashingmag/pen/LYNEXdw)

To be continued: need to see the ncbo issues and start a discussion related to this topic/issue

Links

• Google sheet of our list views
• FIgma Templates
• Agroportal local roadmap Refactor Ontoportal UI agroportal/project-management#287

[syphax-bouazzouni]

FYI: @ontoportal/bioportal , @ontoportal/ecoportal , @ontoportal/agroportal , @ontoportal/cognizone , @ontoportal/earthportal, @ontoportal/industryportal, @ontoportal/medportal

I will open a discussion for general discussions, here we will put only the action items (or technical discussions)

Link to the discussion #15

[syphax-bouazzouni]

2 years after, most of the work is done, all the UIs were updated, old JS code removed, and sometimes when needed the UX is enhanced.
The new UIs were deployed to AgroPortal, EcoPortal, BiodivPortal, EarthPortal, .... And we are working with the BioPortal team to get it by chunks when wanted.

The following UIs are remaining to be done

• Ontology Administration still using heavily JQuery
• Mappings forms
• Notes and reviews
• Landscape

As @Bilelkihal is leaving the AgroPortal team, and since we believe we are already in a good state and achieved most our goals listed above, we will stop the focus in UI/UX work until the next iteration in which I will open a new project issue.