Refactor Ontoportal UI

[syphax-bouazzouni]

Goals

• Fluent UI
• Simple and beautiful UI
• Have a better UX
• Use modern technologies (remove the technical debt)
• Have composable UI

Requirements

• A state of the art of existent vocabulary repositories ( skosmoos, https://smt.esante.gouv.fr/ , showvoc , ols ,...)
• An overview of all our views (see https://stageportal.notion.site/Agroportal-UI-views-update-b7fce3963b6b45afac91ce105c37ba46)
• A new design (link to the Figma: figma.com/file/n2tOIfgVlVvFAr3F00Ab5m/Ontoportal-alliance?type=design&node-id=9-19&t=opySG6l9gVeKTpwC-0#383784491)
• Update Login & Register views design ontoportal-lirmm/bioportal_web_ui#130 (comment)
• Migrate our old (JS) code to Hotwire
• Have a system of components ( a design system) ontoportal-lirmm/bioportal_web_ui#243
• Feature: Upgrade to Bootstrap 5 ontoportal-lirmm/bioportal_web_ui#275
• Refactor the home page design ontoportal-lirmm/bioportal_web_ui#222
• Refactor portal header design ontoportal-lirmm/bioportal_web_ui#223
• Refactor Summary page ontoportal-lirmm/bioportal_web_ui#75
• Refactor concept Details page ontoportal-lirmm/bioportal_web_ui#86
• Submission metadata edition UI/UX refactor proposals #295
• Refactor the browse page UI #313
• Enhance slices feature to upgrade a portal to be a portal manager platform #35
• How to make the UI easily customizable (have a theme system, with a configuration file, or in real-time with a UI)
• Do the ontoportal products landing page (see https://jekyllthemes.io/theme/hydra-jekyll-theme) (see https://ontoportal.org/)
• Harmonize, correct and generalize the terminology used by the user interface  #321 (comment)
• Create a view with the evolutions of the home page statistics #333
• Ontology viewer migrate from Jquery to Hotwire #303
• update ontology edit/new view ui ontoportal-lirmm/bioportal_web_ui#67
• Refactor portal footer design ontoportal-lirmm/bioportal_web_ui#224
• Add button de "far fa-file-code" pour l'ontologies, soumission et fairness to go to the API ontoportal-lirmm/bioportal_web_ui#24

Documentation

• Build the UI development environment
• Learn Hotwire and how to do progressive Enhancement
• Migrating to bootstrap v5
• Related Refactor: Update rails to version 7.0 ncbo/bioportal_web_ui#201 and Refactor: Update ontology viewer from old JS to Turbo + Stimulus  ncbo/bioportal_web_ui#223
• https://viewcomponent.org/

[Bilelkihal]

Competitive Analysis
Competitive analysis is an assessment of the strengths and weaknesses of current and potential competitors.
This analysis provides both an offensive and defensive strategic context to identify opportunities and threats.
We have selected four ontology repositories for this analysis (Skosmos, ANS, ShowVoc, OLS).
In order to benefit from these ontology repositories, we are looking for features that are missing from our
application (Agroportal), and the details that can improve the user experience. Furthermore, we strive to avoid
their faults in the future.

Notes

• All competitors provide the possibility of browsing the ontologies, but it's not well organized and not easy
  to use.
  They have to think about a more creative way to display ontologies in a simple and organized way.
  This part of the application should be given more importance.
• They used old visual elements (which are the default framework/technology elements).
  They have to use visual elements similar to the ones that users are using on other websites in 2022.
• For the search feature, the auto-complete is neglected, as well as the advanced search in some of these
  applications.
  A performant auto-complete must be provided, as well as thinking more about the filters used in
  the advanced search.
• Multilingualism is recommended because it makes the app target more people around the world.
• Ontologies should be organized into groups and categories to make it easy to browse them.
• There are some features in which we need the user to have an account.
• Providing the possibility of downloading the ontologies in different formats is recommended.
• It is recommended to provide documentation or help to the users.
• Providing the possibility of making SPARQL requests directly on the website is a good plus.
• Showing ontologies in a graph helps a lot in visualizing them.
• Providing the users the possibility to give their feedback on the app helps make it better in the
  future.
• The emails sent from this website (like inscription confirmation mail) should be given the same visual
  identity as the website, not just plain text.

[jonquet]

Hello. You can also have a look at :

http://aber-owl.net/
https://ontobee.org/
https://bartoc.org/
https://lov.linkeddata.es/
https://mmisw.org/
https://www.hetop.eu
https://ontohub.org/
https://vocabs.ardc.edu.au/

[syphax-bouazzouni]

#287 (comment) Source : https://fr.slideshare.net/jonquet/ontology-repository-and-ontologybased-services

[syphax-bouazzouni]

Special note for

• https://ontohub.org/ it is written in Ruby on Rails, so maybe can reuse some of their features (e.g visualization)
• https://www.hetop.eu and their system of multi-languages

[syphax-bouazzouni]

Done for most of the important views, starting from release 2.7.0 to 2.8.0.

The remaining UIs are listed here