Feature: Align Bioportal and AgroPortal - part 3 - Update ontology viewer to Turbo

[syphax-bouazzouni]

An updated version of ncbo#223

Require to be merged first

• Feature: Align Bioportal and AgroPortal - part 1 - Configuration code and Docker  #21
• Feature: Align Bioportal and AgroPortal - part 2.1 - Add UI tests #24
• Feature: Align Bioportal and AgroPortal - part 2.2 - Add some view components  #25

What and why

This PR simplifies and updates our current JS code, by removing 814 lines of JS code but still keeping the same behaviors and features.

It's possible using the two following tools:

• Tubro frame: will use Ajax to send and replace the HTML in a specified part of the current page (without reloading and JS code), this will replace most parts of our current JS code that are exactly doing that.
• Stimulus JS: will centralize/isolate js code, so that we can reuse it more easily and avoid duplication and unused/forgotten code (a problem that we have a lot currently).

Changes

• Replace bp_ontology_viewer.js with turbo frame in the ontology viewer ( same behavior with 417 (JS) lines less)(ncbo@9371bc4)

  • remove file bp_ontology_viewer.js (403 lines of js code less)
  • replace bp_ontology_viewer.js with lazy load frame (details see https://turbo.hotwired.dev/reference/frames#lazy-loaded-frame)
  • simplify layouts/_ontology_viewer.html.haml file by extracting common code in a loop (32 lines of HTML less)

• Fix visits chart not showing( (see The visits chart is not displayed in the summary page ncbo/bioportal_web_ui#179)

  • replacing app/assets/javascripts/ontologies.js with a stimulus controller "load-chart"

• Fix more... submission button that was not working (ncbo@4e06e29)

  • clicking in the 'more...' will show the full table of submissions and replace the "more..." text with "less..." (and vis-versa)

• Remove empty functions in app/assets/javascripts/bp_notes.js (10 lines less)

• Replace concepts tree view node click js code with turbo_frames (same behavior with 259 (JS) lines less)

  • Add a partial and route to show concept information (details, visualization, mappings, request_term), extracted from app/views/ontologies/visualize.html.haml
  • Fix concept mappings count not showing (see issue 3 of mapping bug after code merging with upstream ontoportal-lirmm/bioportal_web_ui#80)
  • Remove 250 JS lines in app/assets/javascripts/bp_class_tree.js.erb replaced with trubo_frame

• Update and centralize Split dependency (17 JS code less)

  • install split with yarn (js package manager) and remove lines that upload it <script src="//unpkg.com/split.js/dist/split.min.js">
  • centralize the split usage inside a stimulus controller called "container-splitter"

• Centralize Simple tree dependency and replace JS code that displays the treeview with a turbo frame (41 JS code less)

  • remove/move the file app/assets/javascripts/bp_class_tree.js.erb (82 lines of js code)
  • centralize the simple tree view usage inside a stimulus controller called "simple-tree"
  • use a turbo_frame in app/views/ontologies/visualize.html.haml to display the tree view
  • remove unused function in app/assets/javascripts/bioportal.js.erb (16 lines less)

• Extract/centralize autocomplete behavior in a stimulus controller

  • remove/move the code that does the jump to a concept feature from app/assets/javascripts/bp_visualize.js.erb to a stimulus controller (87 lines of JS code)

• Use TabsContainerComponent for the ontology viewer tabs and replace the js code responsible for showing concepts tabs with bootstrap tabs ( 70 lines js code less )

  • remove file app/assets/javascripts/bp_visualize.js.erb

Demo

Screencast.from.2024-10-10.16-27-25.webm