From 08bbab0d1cf2e523d9ad6a8c24b9ae4fca286741 Mon Sep 17 00:00:00 2001
From: Syphax <gs_bouazzouni@esi.dz>
Date: Sat, 12 Oct 2024 15:49:15 +0200
Subject: [PATCH 01/14] remove ontology bridge code

---
 .env.sample                                |   2 +-
 app/assets/javascripts/bp_ontolobridge.js  | 359 ---------------------
 app/assets/stylesheets/ontolobridge.scss   |  35 --
 app/controllers/ontolobridge_controller.rb |  64 ----
 app/helpers/application_helper.rb          |   5 -
 app/views/concepts/_load.html.haml         |  21 --
 app/views/concepts/_request_term.html.haml |  45 ---
 config/application.rb                      |   1 -
 config/bioportal_config_env.rb.sample      |   6 +-
 config/initializers/graphql_client.rb      |   1 -
 config/locales/en.yml                      |  19 --
 config/routes.rb                           |   6 +-
 12 files changed, 3 insertions(+), 561 deletions(-)
 delete mode 100644 app/assets/javascripts/bp_ontolobridge.js
 delete mode 100644 app/assets/stylesheets/ontolobridge.scss
 delete mode 100644 app/controllers/ontolobridge_controller.rb
 delete mode 100644 app/views/concepts/_load.html.haml
 delete mode 100644 app/views/concepts/_request_term.html.haml

diff --git a/.env.sample b/.env.sample
index 94f4a336b..e8c76bf36 100644
--- a/.env.sample
+++ b/.env.sample
@@ -8,7 +8,7 @@ UI_URL=http://localhost:3000
 API_URL=http://localhost:9393
 API_KEY=
 
-UI_THEME=ontoportal
+UI_THEME=bioportal
 
 BIOMIXER_URL=
 BIOMIXER_APIKEY=
diff --git a/app/assets/javascripts/bp_ontolobridge.js b/app/assets/javascripts/bp_ontolobridge.js
deleted file mode 100644
index d4acc3e97..000000000
--- a/app/assets/javascripts/bp_ontolobridge.js
+++ /dev/null
@@ -1,359 +0,0 @@
-function bindAddRequestTermClick() {
-  jQuery("a.add_request_term").live('click', function(){
-    var id = jQuery(this).attr("data-parent-id");
-    addRequestTermBox(id);
-  });
-}
-
-function bindCancelRequestTermClick() {
-  jQuery(".request_term_form_div .cancel").live('click', function() {
-    removeRequestTermBox();
-  });
-}
-
-function bindNewTermInstructionsClick() {
-  jQuery("#new_term_instructions").live("click", function() {
-    jQuery(this).trumbowyg({
-      btns: [
-        ['viewHTML'],
-        ['undo', 'redo'], // Only supported in Blink browsers
-        ['formatting'],
-        ['strong', 'em', 'del'],
-        ['superscript', 'subscript'],
-        ['link'],
-        ['insertImage'],
-        ['justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull'],
-        ['unorderedList', 'orderedList'],
-        ['horizontalRule'],
-        ['removeformat'],
-        ['fullscreen']
-      ]
-    });
-    jQuery("#new_term_instructions_submit").show();
-    jQuery("#new_term_instructions_cancel").show();
-  });
-}
-
-function bindNewTermInstructionsSubmit() {
-  jQuery("#new_term_instructions_submit").live("click", function() {
-    saveNewTermInstructions();
-  });
-}
-
-function bindNewTermInstructionsCancel() {
-  jQuery("#new_term_instructions_cancel").live("click", function() {
-    var oldVal = jQuery("#new_term_instructions_old").val().trim();
-    var curVal = jQuery('#new_term_instructions').html().trim();
-
-    if (oldVal != curVal) {
-      if (confirm('Are you sure you want to discard your changes?')) {
-        jQuery('#new_term_instructions').trumbowyg('destroy');
-        jQuery('#new_term_instructions').html(oldVal);
-        hideButtons();
-      }
-    } else {
-      jQuery('#new_term_instructions').trumbowyg('destroy');
-      hideButtons();
-    }
-  });
-}
-
-function preventNewTermInstructionsFormSubmit() {
-  jQuery("#new_term_instructions_form").submit(function(e) {
-    e.preventDefault(e);
-  });
-}
-
-function clearProgressMessage(parentContainerID) {
-  var progMsgElem = jQuery("#" + parentContainerID + " #progress_message");
-  progMsgElem.hide();
-  progMsgElem.html("");
-}
-
-function showProgressMessage(parentContainerID) {
-  clearProgressMessage(parentContainerID);
-  var msg = "Saving...";
-  var progMsgElem = jQuery("#" + parentContainerID + " #progress_message");
-  progMsgElem.text(msg).html();
-  progMsgElem.show();
-}
-
-function saveNewTermInstructions() {
-  var params = jQuery('#new_term_instructions_form').serialize();
-  var newInstructions = jQuery('#new_term_instructions').html().trim();
-  params += '&new_term_instructions=' + newInstructions;
-  var parentContainerID = 'new_term_instructions_container';
-  showProgressMessage(parentContainerID);
-
-  jQuery.ajax({
-    type: "POST",
-    url: "/ontolobridge/save_new_term_instructions",
-    dataType: "json",
-    data: params,
-    success: function(data) {
-      var status = data[1];
-
-      if (status && status >= 400 || data[0]['error'].length) {
-        showStatusMessages('', data[0]['error']);
-      } else {
-        jQuery('#new_term_instructions').trumbowyg('destroy');
-        jQuery("#new_term_instructions_old").val(newInstructions);
-        showStatusMessages(data[0]["success"], '');
-        setTimeout(function() { clearStatusMessages(); }, 5000);
-      }
-    },
-    error: function(request, textStatus, errorThrown) {
-      showStatusMessages('', errorThrown);
-    },
-    complete: function(request, textStatus) {
-      clearProgressMessage(parentContainerID);
-      hideButtons();
-    }
-  });
-}
-
-function hideButtons() {
-  jQuery("#new_term_instructions_submit").hide();
-  jQuery("#new_term_instructions_cancel").hide();
-}
-
-function bindRequestTermSaveClick() {
-  var success = "";
-  var error = "";
-  var user = jQuery(document).data().bp.user;
-  var ontology_id = jQuery(document).data().bp.ont_viewer.ontology_id;
-  var params = jQuery("#request_term_form").serialize();
-  params += "&ontology=" + ontology_id + "&email=" + user["email"]
-
-  if (user["firstName"] && user["lastName"]) {
-    params += "&submitter=" + user["firstName"] + " " + user["lastName"];
-  }
-
-  var parentContainerID = 'proposal_buttons';
-  showProgressMessage(parentContainerID);
-
-  jQuery.ajax({
-    type: "POST",
-    url: "/ontolobridge",
-    data: params,
-    dataType: "json",
-    success: function(data) {
-      var status = data[1];
-
-      if (status && status >= 400) {
-        showStatusMessages('', data[0]["error"]);
-      } else {
-        var msg = "<strong>A new term request has been submitted successfully:</strong><br/><br/>";
-        removeRequestTermBox();
-
-        for (var i in data[0]) {
-          msg += i + ": " + data[0][i] + "<br/>";
-        }
-        showStatusMessages(msg, error);
-      }
-    },
-    error: function(request, textStatus, errorThrown) {
-      error = "The following error has occurred: " + errorThrown + ". Please try again.";
-      showStatusMessages(success, error);
-    },
-    complete: function(request, textStatus) {
-      clearProgressMessage(parentContainerID);
-    }
-  });
-}
-
-function removeRequestTermBox() {
-  jQuery(".request_term_form_div").html("");
-}
-
-function addRequestTermBox(id) {
-  clearStatusMessages();
-  var formContainer = jQuery(".request_term_form_div");
-  var requestTermForm = requestTermFields(id, formContainer);
-  var formID = requestTermForm.attr('id');
-  var isPopulated = window.localStorage.getItem(formID + '_populated');
-
-  if (isPopulated) {
-    for (var key in window.localStorage) {
-      if (key.startsWith(formID)) {
-        var elemID = key.replace(formID + '_', '');
-        var elem = jQuery('#' + formID + ' #' + elemID);
-
-        if (elem.attr('type') === "checkbox") {
-          elem.prop("checked", true);
-        } else if (elem.length > 0) {
-          var val = window.localStorage.getItem(key);
-          elem.val(val);
-        }
-        window.localStorage.removeItem(key);
-      }
-    }
-  }
-  formContainer.show();
-  jQuery("#label").focus();
-}
-
-function clearStatusMessages() {
-  jQuery("#ob_success_message").hide();
-  jQuery("#ob_error_message").hide();
-  jQuery("#ob_success_message").html("");
-  jQuery("#ob_error_message").html("");
-}
-
-function showStatusMessages(success, error) {
-  if (success.length > 0) {
-      let ob = jQuery("#ob_success_message")
-      console.log('show ob message')
-      console.log(ob)
-      ob.html(success);
-      ob.show();
-  }
-
-  if (error.length > 0) {
-    jQuery("#ob_error_message").text(error).html();
-    jQuery("#ob_error_message").show();
-  }
-}
-
-function requestTermButtons() {
-  var buttonSubmit = jQuery("<button>")
-    .attr("class", "btn")
-    .attr("type", "submit")
-    .attr("onclick", "")
-    .addClass("save")
-    .css("margin-right", "5px")
-    .html("Submit");
-  var buttonCancel = jQuery("<button>")
-    .attr("class", "btn")
-    .attr("type", "button")
-    .attr("onclick", "")
-    .addClass("cancel")
-    .html("Cancel");
-  var progressMessage = jQuery("<span>")
-    .attr("id", "progress_message")
-    .css("display", "none")
-    .css("margin-left", "20px");
-  return buttonSubmit.add(buttonCancel).add(progressMessage);
-}
-
-function appendTextArea(id, placeholder, div, isRequired, invalidMessage) {
-  if (jQuery.browser.msie && parseInt(jQuery.browser.version) < 10) {
-    div.append(jQuery("<span>").css("font-weight", "bold").html(text));
-    div.append("<br/>");
-  }
-
-  var txtArea = jQuery("<textarea>", {
-    rows: 1,
-    cols: 1,
-    id: id,
-    name: id,
-    placeholder: placeholder,
-    css: {"width": "500px", "height": "100px", "margin": "5px 0 5px 0"}
-  });
-
-  jQuery(txtArea).on("invalid", function(e) {
-    this.setCustomValidity(invalidMessage);
-  });
-
-  jQuery(txtArea).on("input", function(e) {
-    this.setCustomValidity('');
-  });
-
-  if (isRequired) {
-    txtArea.prop('required', true);
-    txtArea.attr("class", "req");
-  }
-  div.append(txtArea);
-  div.append("<br/>");
-}
-
-function appendField(id, text, div, isRequired, invalidMessage) {
-  if (jQuery.browser.msie && parseInt(jQuery.browser.version) < 10) {
-    div.append(jQuery("<span>").css("font-weight", "bold").html(text));
-    div.append("<br/>");
-  }
-
-  var ipt = jQuery("<input>", {
-    type: 'text',
-    id: id,
-    name: id,
-    placeholder: text,
-    css: {"width": "500px", "margin": "5px 0 5px 0"}
-  });
-
-  jQuery(ipt).on("invalid", function(e) {
-    this.setCustomValidity(invalidMessage);
-  });
-
-  jQuery(ipt).on("input", function(e) {
-    this.setCustomValidity('');
-  });
-
-  if (isRequired) {
-    ipt.prop('required', true);
-    ipt.attr("class", "req");
-  }
-  div.append(ipt);
-  div.append("<br/>");
-}
-
-function requestTermFields(id, container) {
-  container.html("");
-  var requestTermForm = jQuery("<form/>", {id: 'request_term_form', name: 'request_term_form'});
-
-  appendField("label", "Enter term label (required)", requestTermForm, true, 'Please enter a label for a new term');
-  appendTextArea("description", "Enter term description (required)", requestTermForm, true, 'Please enter a description for a new term');
-
-  requestTermForm.append(jQuery("<span>").css("font-weight", "bold").css("margin", "5px 0 5px 0").html("Superclass: "));
-  requestTermForm.append(g_prefLabel + "<br/>");
-
-  appendField("references", "Enter references - links that provide more info on the term", requestTermForm, false, 'Please enter references for a new term. References are any links (either URIs or URLs) that provide more information about the term.');
-  appendTextArea("justification", "Enter justification for the term - the reason it should be added", requestTermForm, false, 'Please enter a justification. Justifications are notes provided by the submitter to justify the term; often this will not be necessary, since for most routine cases the label/description/position will be sufficient, but sometimes it may be necessary to justify why a new term is necessary.');
-
-  requestTermForm.append(jQuery("<input>").attr("type", "checkbox").attr("name", "notification_request").attr("id", "notification_request").css("height", "15px")).append("&nbsp;&nbsp;");
-  requestTermForm.append(jQuery("<input>").attr("type", "hidden").attr("name", "superclass").attr("id", "superclass").attr("value", id));
-  requestTermForm.append(jQuery("<label>").attr("for", "notification_request").attr("id", "notification_request").css("margin", "0 0 10px 0").append("Email submitter when there is a status change"));
-  requestTermForm.append(jQuery("<div>").attr("id", "proposal_buttons").append(requestTermButtons()));
-  container.append(requestTermForm);
-
-  requestTermForm.submit(function(e) {
-    e.preventDefault(e);
-    bindRequestTermSaveClick();
-    return false;
-  });
-
-  return requestTermForm;
-}
-
-function obTriggerNewTermRequestFormSave() {
-  var ont = jQuery(document).data().bp.ontology;
-  var ob_onts = jQuery(document).data().bp.ontolobridge_ontologies;
-
-  // Execute only if ontology is Ontolobridge-enabled
-  if (Object.entries(ont).length > 0 && ob_onts && ob_onts.length > 0 && ob_onts.includes(ont["acronym"])) {
-    var formName = 'request_term_form';
-
-    jQuery("#" + formName + " input, #" + formName + " textarea").each(function() {
-      var input = jQuery(this);
-      var val = input.val().trim();
-
-      if (input.attr('type') === "checkbox" && input.prop('checked') === true) {
-        window.localStorage.setItem(formName + '_' + input.attr('name'), 'checkbox_checked');
-        window.localStorage.setItem(formName + '_populated', true);
-      } else if (input.attr('type') !== "hidden" && input.attr('type') !== "checkbox" && val) {
-        window.localStorage.setItem(formName + '_' + input.attr('name'), val);
-        window.localStorage.setItem(formName + '_populated', true);
-      }
-    });
-  }
-}
-
-jQuery(document).ready(function() {
-  clearStatusMessages();
-  bindAddRequestTermClick();
-  bindCancelRequestTermClick();
-  preventNewTermInstructionsFormSubmit();
-  bindNewTermInstructionsSubmit();
-  bindNewTermInstructionsCancel();
-  bindNewTermInstructionsClick();
-});
diff --git a/app/assets/stylesheets/ontolobridge.scss b/app/assets/stylesheets/ontolobridge.scss
deleted file mode 100644
index ebcc8e942..000000000
--- a/app/assets/stylesheets/ontolobridge.scss
+++ /dev/null
@@ -1,35 +0,0 @@
-/* message boxes */
-.message-box {
-  color: #555;
-  border-radius: 3px;
-  font-family: Tahoma, Geneva, Arial, sans-serif;
-  font-size: 11px;
-  padding: 10px;
-  margin: 10px 0 0 0;
-}
-
-.message-box span {
-  font-weight: bold;
-  text-transform: uppercase;
-}
-
-.error-msg {
-  //background-color: #eee;
-  border: 1px solid #f5aca6;
-}
-
-.success-msg {
-  //background-color: #eee;
-  border: 1px solid #a6ca8a;
-}
-
-input.req,
-textarea.req {
-  border-color: darksalmon !important;
-}
-
-blockquote {
-  padding: 0 1em;
-  color: #6a737d;
-  border-left: .25em solid #dfe2e5;
-}
diff --git a/app/controllers/ontolobridge_controller.rb b/app/controllers/ontolobridge_controller.rb
deleted file mode 100644
index 476f3efa5..000000000
--- a/app/controllers/ontolobridge_controller.rb
+++ /dev/null
@@ -1,64 +0,0 @@
-require 'rest-client'
-require 'multi_json'
-
-class OntolobridgeController < ApplicationController
-
-  # POST /ontolobridge
-  # POST /ontolobridge.xml
-  def create
-    request_term
-  end
-
-  def request_term
-    response = {}
-    endpoint = "/RequestTerm"
-    h_params = {}
-    response_raw = nil
-    code = 200
-
-    begin
-      params.delete("controller")
-      params.delete("action")
-      params.each { |k, v|
-        if v === "on"
-          h_params[k] = true
-        else
-          h_params[k] = v
-        end
-      }
-
-      headers = {'Authorization' => $ONTOLOBRIDGE_AUTHENTICATION_TOKEN}
-      response_raw = RestClient.post("#{$ONTOLOBRIDGE_BASE_URL}#{endpoint}", h_params, headers)
-      code = response_raw.code
-      response.merge!(MultiJson.load(response_raw))
-    rescue RestClient::BadRequest => e
-      code = 400
-      response["error"] = e.message
-    rescue Exception => e
-      code = 500
-      response["error"] = "Problem creating a new term #{endpoint}: #{e.class} - #{e.message}"
-    end
-
-    render json: [response, code], status: code
-  end
-
-  def save_new_term_instructions
-    code = 200
-    response = {error: '', success: ''}
-    response[:success] = "New term request instructions for #{params['acronym']} saved"
-    ont_data = Ontology.find_by(acronym: params['acronym'])
-    ont_data ||= Ontology.new
-    ont_data.acronym = params['acronym']
-    ont_data.new_term_instructions = params['new_term_instructions']
-
-    begin
-      ont_data.save
-    rescue Exception => e
-      code = 500
-      response[:error] = "Unable to save new term instructions for #{params['acronym']} due to a server error"
-    end
-    sleep(1)
-    render json: [response, code], status: code
-  end
-
-end
diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
index 9d1d87a7d..a1949a1cf 100644
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@@ -224,11 +224,6 @@ def subscribed_to_ontology?(ontology_acronym, user)
     sub.length.positive? ? 'true' : 'false'
   end
 
-  def ontolobridge_instructions_template(ontology)
-    ont_data = Ontology.find_by(acronym: ontology.acronym)
-    ont_data.nil? || ont_data.new_term_instructions.empty? ? t('concepts.request_term.new_term_instructions') : ont_data.new_term_instructions
-  end
-
   # http://stackoverflow.com/questions/1293573/rails-smart-text-truncation
   def smart_truncate(s, opts = {})
     opts = { words: 20 }.merge(opts)
diff --git a/app/views/concepts/_load.html.haml b/app/views/concepts/_load.html.haml
deleted file mode 100644
index 7585e796c..000000000
--- a/app/views/concepts/_load.html.haml
+++ /dev/null
@@ -1,21 +0,0 @@
-- require 'cgi'
-- #Created a different way to parse because of the limitations of JSon to do large HTML segments ||| divides the areas , final 2 are mappings and notes to be updated
-
-#{render :partial =>'/concepts/biomixer'}
-|||
-#{render :partial =>'details'}
-|||
-#{render partial: '/notes/list'}
-|||
-#{render :partial =>'/mappings/concept_mappings'}
-|||
-#{render :partial =>'/concepts/request_term'}
-|||
-/ # This used to hold demo-specific info, now it's a placeholder
-&nbsp;
-|||
-/ # default notes count = 0
-=0
-|||
--# TODO_REV support mappings
--# #{@concept.mapping_count}
diff --git a/app/views/concepts/_request_term.html.haml b/app/views/concepts/_request_term.html.haml
deleted file mode 100644
index 7c3bed4a9..000000000
--- a/app/views/concepts/_request_term.html.haml
+++ /dev/null
@@ -1,45 +0,0 @@
-:plain
-  <div id="trumbowyg-icons">
-    <svg xmlns="http://www.w3.org/2000/svg"><symbol id="trumbowyg-blockquote" viewBox="0 0 72 72"><path d="M21.3 31.9h-.6c.8-1.2 1.9-2.2 3.4-3.2 2.1-1.4 5-2.7 9.2-3.3l-1.4-8.9c-4.7.7-8.5 2.1-11.7 4-2.4 1.4-4.3 3.1-5.8 4.9-2.3 2.7-3.7 5.7-4.5 8.5-.8 2.8-1 5.4-1 7.5 0 2.3.3 4 .4 4.8 0 .1.1.3.1.4 1.2 5.4 6.1 9.5 11.9 9.5 6.7 0 12.2-5.4 12.2-12.2s-5.5-12-12.2-12zM49.5 31.9h-.6c.8-1.2 1.9-2.2 3.4-3.2 2.1-1.4 5-2.7 9.2-3.3l-1.4-8.9c-4.7.7-8.5 2.1-11.7 4-2.4 1.4-4.3 3.1-5.8 4.9-2.3 2.7-3.7 5.7-4.5 8.5-.8 2.8-1 5.4-1 7.5 0 2.3.3 4 .4 4.8 0 .1.1.3.1.4 1.2 5.4 6.1 9.5 11.9 9.5 6.7 0 12.2-5.4 12.2-12.2s-5.5-12-12.2-12z"/></symbol><symbol id="trumbowyg-bold" viewBox="0 0 72 72"><path d="M51.1 37.8c-1.1-1.4-2.5-2.5-4.2-3.3 1.2-.8 2.1-1.8 2.8-3 1-1.6 1.5-3.5 1.5-5.3 0-2-.6-4-1.7-5.8-1.1-1.8-2.8-3.2-4.8-4.1-2-.9-4.6-1.3-7.8-1.3h-16v42h16.3c2.6 0 4.8-.2 6.7-.7 1.9-.5 3.4-1.2 4.7-2.1 1.3-1 2.4-2.4 3.2-4.1.9-1.7 1.3-3.6 1.3-5.7.2-2.5-.5-4.7-2-6.6zM40.8 50.2c-.6.1-1.8.2-3.4.2h-9V38.5h8.3c2.5 0 4.4.2 5.6.6 1.2.4 2 1 2.7 2 .6.9 1 2 1 3.3 0 1.1-.2 2.1-.7 2.9-.5.9-1 1.5-1.7 1.9-.8.4-1.7.8-2.8 1zm2.6-20.4c-.5.7-1.3 1.3-2.5 1.6-.8.3-2.5.4-4.8.4h-7.7V21.6h7.1c1.4 0 2.6 0 3.6.1s1.7.2 2.2.4c1 .3 1.7.8 2.2 1.7.5.9.8 1.8.8 3-.1 1.3-.4 2.2-.9 3z"/></symbol><symbol id="trumbowyg-close" viewBox="0 0 72 72"><path d="M57 20.5l-5.4-5.4-15.5 15.5-15.6-15.5-5.4 5.4L30.7 36 15.1 51.5l5.4 5.4 15.6-15.5 15.5 15.5 5.4-5.4L41.5 36z"/></symbol><symbol id="trumbowyg-create-link" viewBox="0 0 72 72"><path d="M31.1 48.9l-6.7 6.7c-.8.8-1.6.9-2.1.9s-1.4-.1-2.1-.9L15 50.4c-1.1-1.1-1.1-3.1 0-4.2l6.1-6.1.2-.2 6.5-6.5c-1.2-.6-2.5-.9-3.8-.9-2.3 0-4.6.9-6.3 2.6L11 41.8c-3.5 3.5-3.5 9.2 0 12.7l5.2 5.2c1.7 1.7 4 2.6 6.3 2.6s4.6-.9 6.3-2.6l6.7-6.7c2.5-2.6 3.1-6.7 1.5-10l-5.9 5.9zM38.7 22.5l6.7-6.7c.8-.8 1.6-.9 2.1-.9s1.4.1 2.1.9l5.2 5.2c1.1 1.1 1.1 3.1 0 4.2l-6.1 6.1-.2.2L42 38c1.2.6 2.5.9 3.8.9 2.3 0 4.6-.9 6.3-2.6l6.7-6.7c3.5-3.5 3.5-9.2 0-12.7l-5.2-5.2c-1.7-1.7-4-2.6-6.3-2.6s-4.6.9-6.3 2.6l-6.7 6.7c-2.7 2.7-3.3 6.9-1.7 10.2l6.1-6.1c0 .1 0 .1 0 0z"/><path d="M44.2 30.5c.2-.2.4-.6.4-.9 0-.3-.1-.6-.4-.9l-2.3-2.3c-.3-.2-.6-.4-.9-.4-.3 0-.6.1-.9.4L25.9 40.6c-.2.2-.4.6-.4.9 0 .3.1.6.4.9l2.3 2.3c.2.2.6.4.9.4.3 0 .6-.1.9-.4l14.2-14.2zM49.9 55.4h-8.5v-5h8.5v-8.9h5.2v8.9h8.5v5h-8.5v8.9h-5.2v-8.9z"/></symbol><symbol id="trumbowyg-del" viewBox="0 0 72 72"><path d="M45.8 45c0 1-.3 1.9-.9 2.8-.6.9-1.6 1.6-3 2.1s-3.1.8-5 .8c-2.1 0-4-.4-5.7-1.1-1.7-.7-2.9-1.7-3.6-2.7-.8-1.1-1.3-2.6-1.5-4.5l-.1-.8-6.7.6v.9c.1 2.8.9 5.4 2.3 7.6 1.5 2.3 3.5 4 6.1 5.1 2.6 1.1 5.7 1.6 9.4 1.6 2.9 0 5.6-.5 8-1.6 2.4-1.1 4.3-2.7 5.6-4.7 1.3-2 2-4.2 2-6.5 0-1.6-.3-3.1-.9-4.5l-.2-.6H44c0 .1 1.8 2.3 1.8 5.5zM29 28.9c-.8-.8-1.2-1.7-1.2-2.9 0-.7.1-1.3.4-1.9.3-.6.7-1.1 1.4-1.6.6-.5 1.4-.9 2.5-1.1 1.1-.3 2.4-.4 3.9-.4 2.9 0 5 .6 6.3 1.7 1.3 1.1 2.1 2.7 2.4 5.1l.1.9 6.8-.5v-.9c-.1-2.5-.8-4.7-2.1-6.7s-3.2-3.5-5.6-4.5c-2.4-1-5.1-1.5-8.1-1.5-2.8 0-5.3.5-7.6 1.4-2.3 1-4.2 2.4-5.4 4.3-1.2 1.9-1.9 3.9-1.9 6.1 0 1.7.4 3.4 1.2 4.9l.3.5h11.8c-2.3-.9-3.9-1.7-5.2-2.9zm13.3-6.2zM22.7 20.3zM13 34.1h46.1v3.4H13z"/></symbol><symbol id="trumbowyg-em" viewBox="0 0 72 72"><path d="M26 57l10.1-42h7.2L33.2 57H26z"/></symbol><symbol id="trumbowyg-fullscreen" viewBox="0 0 72 72"><path d="M25.2 7.1H7.1v17.7l6.7-6.5 10.5 10.5 4.5-4.5-10.4-10.5zm22 0l6.5 6.7-10.5 10.5 4.5 4.5 10.5-10.4 6.7 6.8V7.1zm.5 36.1l-4.5 4.5 10.4 10.5-6.8 6.7h18.1V47.2l-6.7 6.5zm-23.4 0L13.8 53.6l-6.7-6.8v18.1h17.7l-6.5-6.7 10.5-10.5z"/><path fill="currentColor" d="M10.7 28.8h18.1V11.2l-6.6 6.4L11.6 7.1l-4.5 4.5 10.5 10.5zm50.1 0l-6.4-6.6 10.5-10.6-4.5-4.5-10.5 10.5-6.7-6.9v18.1zm-.4 36.1l4.5-4.5-10.5-10.5 6.9-6.7H43.2v17.6l6.6-6.4zm-48.8 0l10.5-10.5 6.7 6.9V43.2H11.1l6.5 6.6L7.1 60.4z"/></symbol><symbol id="trumbowyg-h1" viewBox="0 0 72 72"><path d="M6.4 14.9h7.4v16.7h19.1V14.9h7.4V57h-7.4V38H13.8v19H6.4V14.9zM47.8 22.5c1.4 0 2.8-.1 4.1-.4 1.3-.2 2.5-.6 3.6-1.2 1.1-.5 2-1.3 2.8-2.1.8-.9 1.3-1.9 1.5-3.2h5.5v41.2h-7.4v-29H47.8v-5.3z"/></symbol><symbol id="trumbowyg-h2" viewBox="0 0 72 72"><path d="M1.5 14.9h7.4v16.7H28V14.9h7.4V57H28V38H8.8v19H1.5V14.9zM70.2 56.9H42c0-3.4.9-6.4 2.5-9s3.8-4.8 6.6-6.7c1.3-1 2.7-1.9 4.2-2.9 1.5-.9 2.8-1.9 4-3 1.2-1.1 2.2-2.2 3-3.4.8-1.2 1.2-2.7 1.2-4.3 0-.7-.1-1.5-.3-2.4s-.5-1.6-1-2.4c-.5-.7-1.2-1.3-2.1-1.8-.9-.5-2.1-.7-3.5-.7-1.3 0-2.4.3-3.3.8s-1.6 1.3-2.1 2.2-.9 2-1.2 3.3c-.3 1.3-.4 2.6-.4 4.1h-6.7c0-2.3.3-4.4.9-6.3.6-1.9 1.5-3.6 2.7-5 1.2-1.4 2.7-2.5 4.4-3.3 1.7-.8 3.8-1.2 6.1-1.2 2.5 0 4.6.4 6.3 1.2 1.7.8 3.1 1.9 4.1 3.1 1 1.3 1.8 2.6 2.2 4.1.4 1.5.6 2.9.6 4.2 0 1.6-.3 3.1-.8 4.5-.5 1.3-1.2 2.6-2.1 3.7-.9 1.1-1.8 2.2-2.9 3.1-1.1.9-2.2 1.8-3.4 2.7-1.2.8-2.4 1.6-3.5 2.4-1.2.7-2.3 1.5-3.3 2.2-1 .7-1.9 1.5-2.6 2.3-.7.8-1.3 1.7-1.5 2.6h20.1v5.9z"/></symbol><symbol id="trumbowyg-h3" viewBox="0 0 72 72"><path d="M1.4 14.5h7.4v16.7h19.1V14.5h7.4v42.1h-7.4v-19H8.8v19H1.4V14.5zM53.1 32.4c1.1 0 2.2 0 3.3-.2 1.1-.2 2.1-.5 2.9-1 .9-.5 1.6-1.2 2.1-2 .5-.9.8-1.9.8-3.2 0-1.8-.6-3.2-1.8-4.2-1.2-1.1-2.7-1.6-4.6-1.6-1.2 0-2.2.2-3.1.7-.9.5-1.6 1.1-2.2 1.9-.6.8-1 1.7-1.3 2.7-.3 1-.4 2-.4 3.1h-6.7c.1-2 .5-3.9 1.1-5.6.7-1.7 1.6-3.2 2.7-4.4s2.6-2.2 4.2-2.9c1.6-.7 3.5-1.1 5.6-1.1 1.6 0 3.2.2 4.7.7 1.6.5 2.9 1.2 4.2 2.1 1.2.9 2.2 2.1 3 3.4.7 1.4 1.1 3 1.1 4.8 0 2.1-.5 3.9-1.4 5.4-.9 1.6-2.4 2.7-4.4 3.4v.1c2.4.5 4.2 1.6 5.5 3.5 1.3 1.9 2 4.1 2 6.8 0 2-.4 3.7-1.2 5.3-.8 1.6-1.8 2.9-3.2 3.9-1.3 1.1-2.9 1.9-4.7 2.5-1.8.6-3.6.9-5.6.9-2.4 0-4.5-.3-6.3-1s-3.3-1.7-4.5-2.9c-1.2-1.3-2.1-2.8-2.7-4.5-.6-1.8-1-3.7-1-5.9h6.7c-.1 2.5.5 4.6 1.9 6.3 1.3 1.7 3.3 2.5 5.9 2.5 2.2 0 4.1-.6 5.6-1.9 1.5-1.3 2.3-3.1 2.3-5.4 0-1.6-.3-2.9-.9-3.8-.6-.9-1.5-1.7-2.5-2.2-1-.5-2.2-.8-3.4-.9-1.3-.1-2.6-.2-3.9-.1v-5.2z"/></symbol><symbol id="trumbowyg-h4" viewBox="0 0 72 72"><path d="M1.5 14.9h7.4v16.7H28V14.9h7.4V57H28V38H8.9v19H1.5V14.9zM70.5 47.2h-5.3V57h-6.4v-9.8H41.2v-6.7l17.7-24.8h6.4v26.2h5.3v5.3zm-24.2-5.3h12.5V23.7h-.1L46.3 41.9z"/></symbol><symbol id="trumbowyg-h5" viewBox="0 0 72 72"><path d="M1.5 14.9h7.4v16.7H28V14.9h7.4V57H28V38H8.9v19H1.5V14.9zM69.043 42.368q0 5.655-3.92 10.154-3.856 4.434-9.383 4.434-6.105 0-9.768-2.892-3.599-2.891-3.728-8.033h6.62q0 2.892 1.735 4.37 1.735 1.478 4.691 1.478 3.085 0 5.142-2.57 2.056-2.57 2.056-6.748 0-8.869-6.426-8.869-4.692 0-7.327 5.463h-5.848l.9-24.292h22.75v5.398H50.02l-.643 12.21q3.02-3.599 8.355-3.599 5.205 0 8.226 3.985 3.084 3.92 3.084 9.511z"/></symbol><symbol id="trumbowyg-h6" viewBox="0 0 72 72"><path d="M1.5 14.9h7.4v16.7H28V14.9h7.4V57H28V38H8.9v19H1.5zM69.188 43.56q0 2.269-.63 4.475-.63 2.206-2.017 4.286t-4.097 3.403q-2.71 1.261-6.366 1.261-4.349 0-7.185-1.324-2.773-1.386-4.16-4.16-1.386-2.836-1.89-6.113t-.505-8.194q0-22.312 14.181-22.312 10.4 0 11.66 10.526h-6.177q-.378-5.61-5.483-5.61-2.521 0-4.223 1.766-1.702 1.701-2.458 4.538-.693 2.836-1.008 5.168-.252 2.269-.252 4.664 1.575-2.458 3.53-3.719 2.016-1.323 5.42-1.323 3.34 0 5.735 1.26 2.458 1.198 3.656 3.215 1.197 2.017 1.701 4.033.568 2.017.568 4.16zm-6.492.252q0-8.193-6.555-8.193-6.68 0-6.68 8.193 0 8.257 6.68 8.257 6.555 0 6.555-8.257z"/></symbol><symbol id="trumbowyg-horizontal-rule" viewBox="0 0 72 72"><path d="M9.1 32h54v8h-54z"/></symbol><symbol id="trumbowyg-insert-image" viewBox="0 0 72 72"><path d="M64 17v38H8V17h56m8-8H0v54h72V9z"/><path d="M17.5 22C15 22 13 24 13 26.5s2 4.5 4.5 4.5 4.5-2 4.5-4.5-2-4.5-4.5-4.5zM16 50h27L29.5 32zM36 36.2l8.9-8.5L60.2 50H45.9S35.6 35.9 36 36.2z"/></symbol><symbol id="trumbowyg-italic" viewBox="0 0 72 72"><path d="M26 57l10.1-42h7.2L33.2 57H26z"/></symbol><symbol id="trumbowyg-justify-center" viewBox="0 0 72 72"><path d="M9 14h54v8H9zM9 50h54v8H9zM18 32h36v8H18z"/></symbol><symbol id="trumbowyg-justify-full" viewBox="0 0 72 72"><path d="M9 14h54v8H9zM9 50h54v8H9zM9 32h54v8H9z"/></symbol><symbol id="trumbowyg-justify-left" viewBox="0 0 72 72"><path d="M9 14h54v8H9zM9 50h54v8H9zM9 32h36v8H9z"/></symbol><symbol id="trumbowyg-justify-right" viewBox="0 0 72 72"><path d="M9 14h54v8H9zM9 50h54v8H9zM27 32h36v8H27z"/></symbol><symbol id="trumbowyg-link" viewBox="0 0 72 72"><path d="M30.9 49.1l-6.7 6.7c-.8.8-1.6.9-2.1.9s-1.4-.1-2.1-.9l-5.2-5.2c-1.1-1.1-1.1-3.1 0-4.2l6.1-6.1.2-.2 6.5-6.5c-1.2-.6-2.5-.9-3.8-.9-2.3 0-4.6.9-6.3 2.6L10.8 42c-3.5 3.5-3.5 9.2 0 12.7l5.2 5.2c1.7 1.7 4 2.6 6.3 2.6s4.6-.9 6.3-2.6l6.7-6.7C38 50.5 38.6 46.3 37 43l-6.1 6.1zM38.5 22.7l6.7-6.7c.8-.8 1.6-.9 2.1-.9s1.4.1 2.1.9l5.2 5.2c1.1 1.1 1.1 3.1 0 4.2l-6.1 6.1-.2.2-6.5 6.5c1.2.6 2.5.9 3.8.9 2.3 0 4.6-.9 6.3-2.6l6.7-6.7c3.5-3.5 3.5-9.2 0-12.7l-5.2-5.2c-1.7-1.7-4-2.6-6.3-2.6s-4.6.9-6.3 2.6l-6.7 6.7c-2.7 2.7-3.3 6.9-1.7 10.2l6.1-6.1z"/><path d="M44.1 30.7c.2-.2.4-.6.4-.9 0-.3-.1-.6-.4-.9l-2.3-2.3c-.2-.2-.6-.4-.9-.4-.3 0-.6.1-.9.4L25.8 40.8c-.2.2-.4.6-.4.9 0 .3.1.6.4.9l2.3 2.3c.2.2.6.4.9.4.3 0 .6-.1.9-.4l14.2-14.2z"/></symbol><symbol id="trumbowyg-ordered-list" viewBox="0 0 72 72"><path d="M27 14h36v8H27zM27 50h36v8H27zM27 32h36v8H27zM11.8 15.8V22h1.8v-7.8h-1.5l-2.1 1 .3 1.3zM12.1 38.5l.7-.6c1.1-1 2.1-2.1 2.1-3.4 0-1.4-1-2.4-2.7-2.4-1.1 0-2 .4-2.6.8l.5 1.3c.4-.3 1-.6 1.7-.6.9 0 1.3.5 1.3 1.1 0 .9-.9 1.8-2.6 3.3l-1 .9V40H15v-1.5h-2.9zM13.3 53.9c1-.4 1.4-1 1.4-1.8 0-1.1-.9-1.9-2.6-1.9-1 0-1.9.3-2.4.6l.4 1.3c.3-.2 1-.5 1.6-.5.8 0 1.2.3 1.2.8 0 .7-.8.9-1.4.9h-.7v1.3h.7c.8 0 1.6.3 1.6 1.1 0 .6-.5 1-1.4 1-.7 0-1.5-.3-1.8-.5l-.4 1.4c.5.3 1.3.6 2.3.6 2 0 3.2-1 3.2-2.4 0-1.1-.8-1.8-1.7-1.9z"/></symbol><symbol id="trumbowyg-p" viewBox="0 0 72 72"><path d="M47.8 15.1H30.1c-4.7 0-8.5 3.7-8.5 8.4s3.7 8.4 8.4 8.4v25h7V19.8h3v37.1h4.1V19.8h3.7v-4.7z"/></symbol><symbol id="trumbowyg-redo" viewBox="0 0 72 72"><path d="M10.8 51.2c0-5.1 2.1-9.7 5.4-13.1 3.3-3.3 8-5.4 13.1-5.4H46v-12L61.3 36 45.9 51.3V39.1H29.3c-3.3 0-6.4 1.3-8.5 3.5-2.2 2.2-3.5 5.2-3.5 8.5h-6.5z"/></symbol><symbol id="trumbowyg-removeformat" viewBox="0 0 72 72"><path d="M58.2 54.6L52 48.5l3.6-3.6 6.1 6.1 6.4-6.4 3.8 3.8-6.4 6.4 6.1 6.1-3.6 3.6-6.1-6.1-6.4 6.4-3.7-3.8 6.4-6.4zM21.7 52.1H50V57H21.7zM18.8 15.2h34.1v6.4H39.5v24.2h-7.4V21.5H18.8v-6.3z"/></symbol><symbol id="trumbowyg-strikethrough" viewBox="0 0 72 72"><path d="M45.8 45c0 1-.3 1.9-.9 2.8-.6.9-1.6 1.6-3 2.1s-3.1.8-5 .8c-2.1 0-4-.4-5.7-1.1-1.7-.7-2.9-1.7-3.6-2.7-.8-1.1-1.3-2.6-1.5-4.5l-.1-.8-6.7.6v.9c.1 2.8.9 5.4 2.3 7.6 1.5 2.3 3.5 4 6.1 5.1 2.6 1.1 5.7 1.6 9.4 1.6 2.9 0 5.6-.5 8-1.6 2.4-1.1 4.3-2.7 5.6-4.7 1.3-2 2-4.2 2-6.5 0-1.6-.3-3.1-.9-4.5l-.2-.6H44c0 .1 1.8 2.3 1.8 5.5zM29 28.9c-.8-.8-1.2-1.7-1.2-2.9 0-.7.1-1.3.4-1.9.3-.6.7-1.1 1.4-1.6.6-.5 1.4-.9 2.5-1.1 1.1-.3 2.4-.4 3.9-.4 2.9 0 5 .6 6.3 1.7 1.3 1.1 2.1 2.7 2.4 5.1l.1.9 6.8-.5v-.9c-.1-2.5-.8-4.7-2.1-6.7s-3.2-3.5-5.6-4.5c-2.4-1-5.1-1.5-8.1-1.5-2.8 0-5.3.5-7.6 1.4-2.3 1-4.2 2.4-5.4 4.3-1.2 1.9-1.9 3.9-1.9 6.1 0 1.7.4 3.4 1.2 4.9l.3.5h11.8c-2.3-.9-3.9-1.7-5.2-2.9zm13.3-6.2zM22.7 20.3zM13 34.1h46.1v3.4H13z"/></symbol><symbol id="trumbowyg-strong" viewBox="0 0 72 72"><path d="M51.1 37.8c-1.1-1.4-2.5-2.5-4.2-3.3 1.2-.8 2.1-1.8 2.8-3 1-1.6 1.5-3.5 1.5-5.3 0-2-.6-4-1.7-5.8-1.1-1.8-2.8-3.2-4.8-4.1-2-.9-4.6-1.3-7.8-1.3h-16v42h16.3c2.6 0 4.8-.2 6.7-.7 1.9-.5 3.4-1.2 4.7-2.1 1.3-1 2.4-2.4 3.2-4.1.9-1.7 1.3-3.6 1.3-5.7.2-2.5-.5-4.7-2-6.6zM40.8 50.2c-.6.1-1.8.2-3.4.2h-9V38.5h8.3c2.5 0 4.4.2 5.6.6 1.2.4 2 1 2.7 2 .6.9 1 2 1 3.3 0 1.1-.2 2.1-.7 2.9-.5.9-1 1.5-1.7 1.9-.8.4-1.7.8-2.8 1zm2.6-20.4c-.5.7-1.3 1.3-2.5 1.6-.8.3-2.5.4-4.8.4h-7.7V21.6h7.1c1.4 0 2.6 0 3.6.1s1.7.2 2.2.4c1 .3 1.7.8 2.2 1.7.5.9.8 1.8.8 3-.1 1.3-.4 2.2-.9 3z"/></symbol><symbol id="trumbowyg-subscript" viewBox="0 0 72 72"><path d="M32 15h7.8L56 57.1h-7.9L44.3 46H27.4l-4 11.1h-7.6L32 15zm-2.5 25.4h12.9L36 22.3h-.2l-6.3 18.1zM58.7 59.9c.6-1.4 2-2.8 4.1-4.4 1.9-1.3 3.1-2.3 3.7-2.9.8-.9 1.3-1.9 1.3-3 0-.9-.2-1.6-.7-2.2-.5-.6-1.2-.9-2.1-.9-1.2 0-2.1.5-2.5 1.4-.3.5-.4 1.4-.5 2.5h-4c.1-1.8.4-3.2 1-4.3 1.1-2.1 3-3.1 5.8-3.1 2.2 0 3.9.6 5.2 1.8 1.3 1.2 1.9 2.8 1.9 4.8 0 1.5-.5 2.9-1.4 4.1-.6.8-1.6 1.7-3 2.6L66 57.7c-1 .7-1.7 1.2-2.1 1.6-.4.3-.7.7-1 1.1H72V64H57.8c0-1.5.3-2.8.9-4.1z"/></symbol><symbol id="trumbowyg-superscript" viewBox="0 0 72 72"><path d="M32 15h7.8L56 57.1h-7.9l-4-11.1H27.4l-4 11.1h-7.6L32 15zm-2.5 25.4h12.9L36 22.3h-.2l-6.3 18.1zM49.6 28.8c.5-1.1 1.6-2.3 3.4-3.6 1.5-1.1 2.5-1.9 3-2.4.7-.7 1-1.6 1-2.4 0-.7-.2-1.3-.6-1.8-.4-.5-1-.7-1.7-.7-1 0-1.7.4-2.1 1.1-.2.4-.3 1.1-.4 2.1H49c.1-1.5.3-2.6.8-3.5.9-1.7 2.5-2.6 4.8-2.6 1.8 0 3.2.5 4.3 1.5 1.1 1 1.6 2.3 1.6 4 0 1.3-.4 2.4-1.1 3.4-.5.7-1.3 1.4-2.4 2.2l-1.3 1c-.8.6-1.4 1-1.7 1.3-.3.3-.6.6-.8.9h7.4v3H48.8c0-1.3.3-2.4.8-3.5z"/></symbol><symbol id="trumbowyg-underline" viewBox="0 0 72 72"><path d="M36 35zM15.2 55.9h41.6V59H15.2zM21.1 13.9h6.4v21.2c0 1.2.1 2.5.2 3.7.1 1.3.5 2.4 1 3.4.6 1 1.4 1.8 2.6 2.5 1.1.6 2.7 1 4.8 1 2.1 0 3.7-.3 4.8-1 1.1-.6 2-1.5 2.6-2.5.6-1 .9-2.1 1-3.4.1-1.3.2-2.5.2-3.7V13.9H51v23.3c0 2.3-.4 4.4-1.1 6.1-.7 1.7-1.7 3.2-3 4.4-1.3 1.2-2.9 2-4.7 2.6-1.8.6-3.9.9-6.1.9-2.2 0-4.3-.3-6.1-.9-1.8-.6-3.4-1.5-4.7-2.6-1.3-1.2-2.3-2.6-3-4.4-.7-1.7-1.1-3.8-1.1-6.1V13.9z"/></symbol><symbol id="trumbowyg-undo" viewBox="0 0 72 72"><path d="M61.2 51.2c0-5.1-2.1-9.7-5.4-13.1-3.3-3.3-8-5.4-13.1-5.4H26.1v-12L10.8 36l15.3 15.3V39.1h16.7c3.3 0 6.4 1.3 8.5 3.5 2.2 2.2 3.5 5.2 3.5 8.5h6.4z"/></symbol><symbol id="trumbowyg-unlink" viewBox="0 0 72 72"><path d="M30.9 49.1l-6.7 6.7c-.8.8-1.6.9-2.1.9s-1.4-.1-2.1-.9l-5.2-5.2c-1.1-1.1-1.1-3.1 0-4.2l6.1-6.1.2-.2 6.5-6.5c-1.2-.6-2.5-.9-3.8-.9-2.3 0-4.6.9-6.3 2.6L10.8 42c-3.5 3.5-3.5 9.2 0 12.7l5.2 5.2c1.7 1.7 4 2.6 6.3 2.6s4.6-.9 6.3-2.6l6.7-6.7C38 50.5 38.6 46.3 37 43l-6.1 6.1zM38.5 22.7l6.7-6.7c.8-.8 1.6-.9 2.1-.9s1.4.1 2.1.9l5.2 5.2c1.1 1.1 1.1 3.1 0 4.2l-6.1 6.1-.2.2-6.5 6.5c1.2.6 2.5.9 3.8.9 2.3 0 4.6-.9 6.3-2.6l6.7-6.7c3.5-3.5 3.5-9.2 0-12.7l-5.2-5.2c-1.7-1.7-4-2.6-6.3-2.6s-4.6.9-6.3 2.6l-6.7 6.7c-2.7 2.7-3.3 6.9-1.7 10.2l6.1-6.1z"/><path d="M44.1 30.7c.2-.2.4-.6.4-.9 0-.3-.1-.6-.4-.9l-2.3-2.3c-.2-.2-.6-.4-.9-.4-.3 0-.6.1-.9.4L25.8 40.8c-.2.2-.4.6-.4.9 0 .3.1.6.4.9l2.3 2.3c.2.2.6.4.9.4.3 0 .6-.1.9-.4l14.2-14.2zM41.3 55.8v-5h22.2v5H41.3z"/></symbol><symbol id="trumbowyg-unordered-list" viewBox="0 0 72 72"><path d="M27 14h36v8H27zM27 50h36v8H27zM9 50h9v8H9zM9 32h9v8H9zM9 14h9v8H9zM27 32h36v8H27z"/></symbol><symbol id="trumbowyg-view-html" viewBox="0 0 72 72"><path fill="none" stroke="currentColor" stroke-width="8" stroke-miterlimit="10" d="M26.9 17.9L9 36.2 26.9 54M45 54l17.9-18.3L45 17.9"/></symbol><symbol id="trumbowyg-back-color" viewBox="0 0 72 72"><path d="M36.5 22.3l-6.3 18.1H43l-6.3-18.1z"/><path d="M9 8.9v54.2h54.1V8.9H9zm39.9 48.2L45 46H28.2l-3.9 11.1h-7.6L32.8 15h7.8l16.2 42.1h-7.9z"/></symbol><symbol id="trumbowyg-fore-color" viewBox="0 0 72 72"><path d="M32 15h7.8L56 57.1h-7.9l-4-11.1H27.4l-4 11.1h-7.6L32 15zm-2.5 25.4h12.9L36 22.3h-.2l-6.3 18.1z"/></symbol><symbol id="trumbowyg-base64" viewBox="0 0 72 72"><path d="M64 17v38H8V17h56m8-8H0v54h72V9z"/><path d="M29.9 28.9c-.5-.5-1.1-.8-1.8-.8s-1.4.2-1.9.7c-.5.4-.9 1-1.2 1.6-.3.6-.5 1.3-.6 2.1-.1.7-.2 1.4-.2 1.9l.1.1c.6-.8 1.2-1.4 2-1.8.8-.4 1.7-.5 2.7-.5.9 0 1.8.2 2.6.6.8.4 1.6.9 2.2 1.5.6.6 1 1.3 1.2 2.2.3.8.4 1.6.4 2.5 0 1.1-.2 2.1-.5 3-.3.9-.8 1.7-1.5 2.4-.6.7-1.4 1.2-2.3 1.6-.9.4-1.9.6-3 .6-1.6 0-2.8-.3-3.9-.9-1-.6-1.8-1.4-2.5-2.4-.6-1-1-2.1-1.3-3.4-.2-1.3-.4-2.6-.4-3.9 0-1.3.1-2.6.4-3.8.3-1.3.8-2.4 1.4-3.5.7-1 1.5-1.9 2.5-2.5 1-.6 2.3-1 3.8-1 .9 0 1.7.1 2.5.4.8.3 1.4.6 2 1.1.6.5 1.1 1.1 1.4 1.8.4.7.6 1.5.7 2.5h-4c0-1-.3-1.6-.8-2.1zm-3.5 6.8c-.4.2-.8.5-1 .8-.3.4-.5.8-.6 1.2-.1.5-.2 1-.2 1.5s.1.9.2 1.4c.1.5.4.9.6 1.2.3.4.6.7 1 .9.4.2.9.3 1.4.3.5 0 1-.1 1.3-.3.4-.2.7-.5 1-.9.3-.4.5-.8.6-1.2.1-.5.2-.9.2-1.4 0-.5-.1-1-.2-1.4-.1-.5-.3-.9-.6-1.2-.3-.4-.6-.7-1-.9-.4-.2-.9-.3-1.4-.3-.4 0-.9.1-1.3.3zM36.3 41.3v-3.8l9-12.1H49v12.4h2.7v3.5H49v4.8h-4v-4.8h-8.7zM45 30.7l-5.3 7.2h5.4l-.1-7.2z"/></symbol><symbol id="trumbowyg-emoji" viewBox="0 0 72 72"><path d="M36.05 9C21.09 9 8.949 21.141 8.949 36.101c0 14.96 12.141 27.101 27.101 27.101 14.96 0 27.101-12.141 27.101-27.101S51.01 9 36.05 9zm9.757 15.095c2.651 0 4.418 1.767 4.418 4.418s-1.767 4.418-4.418 4.418-4.418-1.767-4.418-4.418 1.767-4.418 4.418-4.418zm-19.479 0c2.651 0 4.418 1.767 4.418 4.418s-1.767 4.418-4.418 4.418-4.418-1.767-4.418-4.418 1.767-4.418 4.418-4.418zm9.722 30.436c-14.093 0-16.261-13.009-16.261-13.009h32.522S50.143 54.531 36.05 54.531z"/></symbol><symbol id="trumbowyg-fontsize" viewBox="0 0 24 24"><path d="M9 4v3h5v12h3V7h5V4H9zm-6 8h3v7h3v-7h3V9H3v3z"/></symbol><symbol id="trumbowyg-giphy" viewBox="0 0 72 72"><g fill-rule="nonzero"><path d="M15.676 40.149v-5.282h13.645v12.489c-1.326 1.283-3.248 2.413-5.764 3.39-2.516.977-5.065 1.465-7.646 1.465-3.279 0-6.137-.688-8.575-2.064-2.439-1.376-4.271-3.343-5.497-5.903C.613 41.685 0 38.901 0 35.893c0-3.265.684-6.166 2.053-8.704 1.369-2.538 3.372-4.484 6.01-5.839 2.01-1.04 4.512-1.561 7.506-1.561 3.893 0 6.933.816 9.122 2.449 2.188 1.632 3.596 3.889 4.223 6.769l-6.287 1.176c-.442-1.54-1.273-2.755-2.492-3.646-1.219-.892-2.741-1.337-4.566-1.337-2.766 0-4.965.877-6.597 2.63-1.633 1.754-2.449 4.356-2.449 7.806 0 3.722.827 6.513 2.481 8.373 1.654 1.861 3.821 2.791 6.501 2.791 1.326 0 2.656-.26 3.989-.781 1.333-.52 2.477-1.151 3.432-1.892v-3.978h-7.25zM36.568 20.324h6.33v31.352h-6.33zM50.507 51.676V20.324H72v5.304H56.837v7.421h13.089v5.303H56.837v13.324h-6.33z"/></g></symbol><symbol id="trumbowyg-highlight" viewBox="0 0 60 60"><path d="M11 7c0-2.206-1.794-4-4-4S3 4.794 3 7s1.794 4 4 4 4-1.794 4-4zM7 9c-1.103 0-2-.897-2-2s.897-2 2-2 2 .897 2 2-.897 2-2 2zM16 11c2.206 0 4-1.794 4-4s-1.794-4-4-4-4 1.794-4 4 1.794 4 4 4zm0-6c1.103 0 2 .897 2 2s-.897 2-2 2-2-.897-2-2 .897-2 2-2zM25 11c2.206 0 4-1.794 4-4s-1.794-4-4-4-4 1.794-4 4 1.794 4 4 4zm0-6c1.103 0 2 .897 2 2s-.897 2-2 2-2-.897-2-2 .897-2 2-2z"/><path d="M0 0v60h60V0H0zm2 2h56v10H2V2zm0 56V14h5v44H2zm56 0H9V14h49v44z"/><path d="M5 17H4a1 1 0 1 0 0 2h1a1 1 0 1 0 0-2zM5 21H4a1 1 0 1 0 0 2h1a1 1 0 1 0 0-2zM5 25H4a1 1 0 1 0 0 2h1a1 1 0 1 0 0-2zM5 29H4a1 1 0 1 0 0 2h1a1 1 0 1 0 0-2zM5 33H4a1 1 0 1 0 0 2h1a1 1 0 1 0 0-2zM5 37H4a1 1 0 1 0 0 2h1a1 1 0 1 0 0-2zM5 41H4a1 1 0 1 0 0 2h1a1 1 0 1 0 0-2zM5 45H4a1 1 0 1 0 0 2h1a1 1 0 1 0 0-2zM5 49H4a1 1 0 1 0 0 2h1a1 1 0 1 0 0-2zM5 53H4a1 1 0 1 0 0 2h1a1 1 0 1 0 0-2zM13 19h13a1 1 0 1 0 0-2H13a1 1 0 1 0 0 2zM30 19h10a1 1 0 1 0 0-2H30a1 1 0 1 0 0 2zM44 19h2a1 1 0 1 0 0-2h-2a1 1 0 1 0 0 2zM35 22a1 1 0 0 0 1 1h15a1 1 0 1 0 0-2H36a1 1 0 0 0-1 1zM32 21H18a1 1 0 1 0 0 2h14a1 1 0 1 0 0-2zM13 23h1a1 1 0 1 0 0-2h-1a1 1 0 1 0 0 2zM13 27h9a1 1 0 1 0 0-2h-9a1 1 0 1 0 0 2zM26 27h2a1 1 0 1 0 0-2h-2a1 1 0 1 0 0 2zM46 25H32a1 1 0 1 0 0 2h14a1 1 0 1 0 0-2zM13 31h13a1 1 0 1 0 0-2H13a1 1 0 1 0 0 2zM41 30a1 1 0 0 0-1-1H30a1 1 0 1 0 0 2h10a1 1 0 0 0 1-1zM36 35h8a1 1 0 1 0 0-2h-8a1 1 0 1 0 0 2zM17 34a1 1 0 0 0 1 1h14a1 1 0 1 0 0-2H18a1 1 0 0 0-1 1zM13 35h1a1 1 0 1 0 0-2h-1a1 1 0 1 0 0 2zM13 39h9a1 1 0 1 0 0-2h-9a1 1 0 1 0 0 2zM26 39h2a1 1 0 1 0 0-2h-2a1 1 0 1 0 0 2zM31 38a1 1 0 0 0 1 1h15a1 1 0 1 0 0-2H32a1 1 0 0 0-1 1zM13 43h13a1 1 0 1 0 0-2H13a1 1 0 1 0 0 2zM40 41H30a1 1 0 1 0 0 2h10a1 1 0 1 0 0-2zM51 41h-7a1 1 0 1 0 0 2h7a1 1 0 1 0 0-2zM40 45h-4a1 1 0 1 0 0 2h4a1 1 0 1 0 0-2zM17 46a1 1 0 0 0 1 1h14a1 1 0 1 0 0-2H18a1 1 0 0 0-1 1zM13 47h1a1 1 0 1 0 0-2h-1a1 1 0 1 0 0 2zM22 49h-9a1 1 0 1 0 0 2h9a1 1 0 1 0 0-2zM28 49h-2a1 1 0 1 0 0 2h2a1 1 0 1 0 0-2zM39 49h-7a1 1 0 1 0 0 2h7a1 1 0 1 0 0-2zM44 49h-1a1 1 0 1 0 0 2h1a1 1 0 1 0 0-2z"/></symbol><symbol id="trumbowyg-insert-audio" viewBox="-2 -2 12 12"><path d="M3.344 0L2 2H0v4h2l1.344 2H4V0h-.656zM5 1v1c.152 0 .313.026.469.063H5.5c.86.215 1.5.995 1.5 1.938a1.99 1.99 0 0 1-2 2.001v1a2.988 2.988 0 0 0 3-3 2.988 2.988 0 0 0-3-3zm0 2v2l.25-.031C5.683 4.851 6 4.462 6 4c0-.446-.325-.819-.75-.938v-.031h-.031L5 3z"/></symbol><symbol id="trumbowyg-lineheight" viewBox="0 0 72 72"><path fill="currentColor" d="M31 14h36v8H31zm0 36h36v8H31zm0-18h30v8H31z"/><path fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="3.643" d="M7.82 47.207l8.332 8.15 8.106-8.15m.018-22.572l-8.333-8.15-8.105 8.15"/><path fill="currentColor" d="M14.348 53.761v-36h3.384v36z"/></symbol><symbol id="trumbowyg-mention" viewBox="0 0 128 128"><path fill-rule="evenodd" d="M73.309 62.5c-1.53 9.86-8.16 17.85-14.45 17.85-5.61 0-8.5-4.08-8.5-10.54 0-13.089 8.84-24.139 20.06-24.139 2.21 0 3.91.34 5.27.68L73.309 62.5zm14.45 44.2c-6.8 3.57-15.98 5.44-24.65 5.44-25.329 0-43.519-16.15-43.519-44.54 0-32.469 22.78-52.869 48.789-52.869 26.35 0 40.63 17.17 40.63 39.27 0 19.549-9.18 28.899-16.49 28.729-4.76-.17-5.95-4.76-4.25-14.79l5.1-31.449c-4.25-2.38-12.75-4.25-20.23-4.25-24.48 0-39.779 18.87-39.779 39.609 0 13.94 7.99 22.1 19.039 22.1 9.01 0 16.66-4.42 21.93-13.09h.34c.85 9.01 6.63 13.09 14.62 13.09 18.36 0 32.3-15.64 32.3-40.459 0-28.56-21.42-49.13-51.34-49.13C31.83 4.361 6.67 34.451 6.67 69.13c0 33.32 24.82 53.55 53.039 53.55 12.07 0 20.91-1.53 31.11-6.12l-3.06-9.86z"/></symbol><symbol id="trumbowyg-mathml" viewBox="0 0 445.878 445.878"><path d="M426.024 86.447H209.705l-84.911 298.911c-2.568 7.967-9.854 13.482-18.22 13.771-.236 0-.464.006-.688.006a19.868 19.868 0 0 1-18.436-12.478l-34.714-86.782H19.851C8.884 299.876 0 290.986 0 280.022c0-10.965 8.893-19.854 19.851-19.854H66.18a19.862 19.862 0 0 1 18.436 12.483l19.237 48.09 72.472-260.218a19.855 19.855 0 0 1 18.903-13.781h230.798c10.97 0 19.854 8.89 19.854 19.851s-8.892 19.854-19.856 19.854zm10.699 266.78l-78.259-87.904 74.576-82.783c1.318-1.454 1.638-3.547.857-5.341a4.977 4.977 0 0 0-4.54-2.946h-47.18a4.995 4.995 0 0 0-3.759 1.72l-50.059 58.047-49.674-58.029a4.95 4.95 0 0 0-3.771-1.738H225.58a4.947 4.947 0 0 0-4.521 2.929 4.939 4.939 0 0 0 .824 5.332l73.743 82.81-77.641 87.923a4.977 4.977 0 0 0-.813 5.325 4.978 4.978 0 0 0 4.528 2.92h48.9c1.472 0 2.867-.65 3.807-1.785l51.819-62.181 53.05 62.229a4.972 4.972 0 0 0 3.782 1.743h49.97a4.938 4.938 0 0 0 4.527-2.926 4.966 4.966 0 0 0-.832-5.345z"/></symbol><symbol id="trumbowyg-noembed" viewBox="0 0 72 72"><path d="M31.5 33.6V25l11 11-11 11v-8.8z"/><path d="M64 17v38H8V17h56m8-8H0v54h72V9z"/></symbol><symbol id="trumbowyg-preformatted" viewBox="0 0 72 72"><path d="M10.3 33.5c.4 0 .9-.1 1.5-.2s1.2-.3 1.8-.7c.6-.3 1.1-.8 1.5-1.3.4-.5.6-1.3.6-2.1V17.1c0-1.4.3-2.6.8-3.6s1.2-1.9 2-2.5c.8-.7 1.6-1.2 2.5-1.5.9-.3 1.6-.5 2.2-.5h5.3v5.3h-3.2c-.7 0-1.3.1-1.8.4-.4.3-.8.6-1 1-.2.4-.4.9-.4 1.3-.1.5-.1.9-.1 1.4v11.4c0 1.2-.2 2.1-.7 2.9-.5.8-1 1.4-1.7 1.8-.6.4-1.3.8-2 1-.7.2-1.3.3-1.7.4v.1c.5 0 1 .1 1.7.3.7.2 1.3.5 2 .9.6.5 1.2 1.1 1.7 1.9.5.8.7 2 .7 3.4v11.1c0 .4 0 .9.1 1.4.1.5.2.9.4 1.3s.6.7 1 1c.4.3 1 .4 1.8.4h3.2V63h-5.3c-.6 0-1.4-.2-2.2-.5-.9-.3-1.7-.8-2.5-1.5s-1.4-1.5-2-2.5c-.5-1-.8-2.2-.8-3.6V43.5c0-.9-.2-1.7-.6-2.3-.4-.6-.9-1.1-1.5-1.5-.6-.4-1.2-.6-1.8-.7-.6-.1-1.1-.2-1.5-.2v-5.3zM61.8 38.7c-.4 0-1 .1-1.6.2-.6.1-1.2.4-1.8.7-.6.3-1.1.7-1.5 1.3-.4.5-.6 1.3-.6 2.1v12.1c0 1.4-.3 2.6-.8 3.6s-1.2 1.9-2 2.5c-.8.7-1.6 1.2-2.5 1.5-.9.3-1.6.5-2.2.5h-5.3v-5.3h3.2c.7 0 1.3-.1 1.8-.4.4-.3.8-.6 1-1 .2-.4.4-.9.4-1.3.1-.5.1-.9.1-1.4V42.3c0-1.2.2-2.1.7-2.9.5-.8 1-1.4 1.7-1.8.6-.4 1.3-.8 2-1 .7-.2 1.3-.3 1.7-.4v-.1c-.5 0-1-.1-1.7-.3-.7-.2-1.3-.5-2-.9-.6-.4-1.2-1.1-1.7-1.9-.5-.8-.7-2-.7-3.4V18.5c0-.4 0-.9-.1-1.4-.1-.5-.2-.9-.4-1.3s-.6-.7-1-1c-.4-.3-1-.4-1.8-.4h-3.2V9.1h5.3c.6 0 1.4.2 2.2.5.9.3 1.7.8 2.5 1.5s1.4 1.5 2 2.5c.5 1 .8 2.2.8 3.6v11.6c0 .9.2 1.7.6 2.3.4.6.9 1.1 1.5 1.5.6.4 1.2.6 1.8.7.6.1 1.2.2 1.6.2v5.2z"/></symbol><symbol id="trumbowyg-ruby" viewBox="0 0 72 72"><path d="M16.499 24.477h8.018L41.08 67.5H33l-4.04-11.361H11.804L7.764 67.5H0l16.499-43.023zm-2.65 25.907h13.127l-6.438-18.497h-.177l-6.512 18.497zM65.053 16.685c-6.316 1.178-12.025 1.98-17.126 2.408a362.385 362.385 0 0 0-.965 5.833c-.25 1.57-.679 3.907-1.286 7.013 3.033-1.963 5.852-3.266 8.458-3.907 2.639-.642 4.905-.891 6.797-.75 1.891.108 3.746.661 5.566 1.661 1.82.964 3.264 2.408 4.334 4.334 1.104 1.893 1.427 4.088.965 6.584-.466 2.461-1.554 4.494-3.265 6.101-1.679 1.605-3.658 2.783-5.941 3.532-2.283.785-4.853 1.251-7.707 1.391-2.819.144-5.906.161-9.259.056 0-1.642-.287-3.212-.857-4.71l.108-.59c2.711.5 5.246.768 7.601.802 2.39 0 4.529-.195 6.421-.589 1.927-.393 3.605-1.069 5.031-2.031 1.427-.965 2.319-2.319 2.676-4.067.394-1.75.269-3.229-.373-4.443-.644-1.249-1.446-2.213-2.408-2.891-.929-.68-2.161-1.034-3.693-1.071-1.536-.072-3.265.089-5.192.482-1.927.391-3.82 1.14-5.672 2.248a24.308 24.308 0 0 0-4.978 3.907l-4.872-1.981c1.463-5.031 2.355-8.597 2.677-10.703.321-2.105.642-4.067.963-5.887-3.961.25-7.154.411-9.58.481-.215-1.927-.52-3.534-.91-4.817l.32-.32c3.604.32 7.225.446 10.865.375.214-1.355.481-3.103.804-5.245.354-2.175.407-3.621.16-4.336.034-.784.374-1.017 1.017-.695l5.085.749c.428.251.444.573.055.964l-.857.91c-.537 2.89-.981 5.352-1.338 7.385 4.279-.427 9.312-1.393 15.092-2.89l1.284 4.707"/></symbol><symbol id="trumbowyg-col-delete" viewBox="0 0 24 24"><g transform="translate(-326 -532.36)"><rect width="6" height="15" x="335" y="537.36" fill="#ed5565" stroke="#000" stroke-linejoin="round" stroke-linecap="round" stroke-width=".837" rx=".646"/><path d="M347.58 536.498c-.051-.618-.55-1.138-1.178-1.138H329.6c-.628 0-1.127.52-1.18 1.138h-.02v15.663a1.2 1.2 0 0 0 1.2 1.2h16.801a1.2 1.2 0 0 0 1.2-1.2v-15.663h-.021M334.4 552.16h-4.8v-3.6h4.8v3.6m0-4.7h-4.8v-3.7h4.8v3.7m0-4.9h-4.8v-3.601h4.8v3.6m6 9.601h-4.8v-3.6h4.8v3.6m0-4.7h-4.8v-3.7h4.8v3.7m0-4.9h-4.8v-3.601h4.8v3.6m6.001 9.601h-4.8v-3.6h4.8v3.6m0-4.7h-4.8v-3.7h4.8v3.7m0-4.9h-4.8v-3.601h4.8v3.6"/></g></symbol><symbol id="trumbowyg-col-left" viewBox="0 0 24 24"><g transform="translate(-326 -532.36)"><rect width="6" height="15" x="329" y="537.36" fill="#1ab394" stroke="#000" stroke-linejoin="round" stroke-linecap="round" stroke-width=".837" rx=".646"/><path d="M347.58 536.498c-.051-.618-.55-1.138-1.178-1.138H329.6c-.628 0-1.127.52-1.18 1.138h-.02v15.663a1.2 1.2 0 0 0 1.2 1.2h16.801a1.2 1.2 0 0 0 1.2-1.2v-15.663h-.021M334.4 552.16h-4.8v-3.6h4.8v3.6m0-4.7h-4.8v-3.7h4.8v3.7m0-4.9h-4.8v-3.601h4.8v3.6m6 9.601h-4.8v-3.6h4.8v3.6m0-4.7h-4.8v-3.7h4.8v3.7m0-4.9h-4.8v-3.601h4.8v3.6m6.001 9.601h-4.8v-3.6h4.8v3.6m0-4.7h-4.8v-3.7h4.8v3.7m0-4.9h-4.8v-3.601h4.8v3.6"/></g></symbol><symbol id="trumbowyg-col-right" viewBox="0 0 24 24"><g transform="matrix(-1 0 0 1 350 -532.36)"><rect y="537.36" x="329" height="15" width="6" fill="#1ab394" stroke="#000" stroke-linejoin="round" stroke-linecap="round" stroke-width=".837" rx=".646"/><path d="M347.58 536.498c-.051-.618-.55-1.138-1.178-1.138H329.6c-.628 0-1.127.52-1.18 1.138h-.02v15.663a1.2 1.2 0 0 0 1.2 1.2h16.801a1.2 1.2 0 0 0 1.2-1.2v-15.663h-.021M334.4 552.16h-4.8v-3.6h4.8v3.6m0-4.7h-4.8v-3.7h4.8v3.7m0-4.9h-4.8v-3.601h4.8v3.6m6 9.601h-4.8v-3.6h4.8v3.6m0-4.7h-4.8v-3.7h4.8v3.7m0-4.9h-4.8v-3.601h4.8v3.6m6.001 9.601h-4.8v-3.6h4.8v3.6m0-4.7h-4.8v-3.7h4.8v3.7m0-4.9h-4.8v-3.601h4.8v3.6"/></g></symbol><symbol id="trumbowyg-row-above" viewBox="0 0 24 24"><rect y="-347" x="537.06" height="18" width="6" transform="matrix(0 1 1 0 350 -532.36)" fill="#1ab394" stroke="#000" stroke-linejoin="round" stroke-linecap="round" stroke-width=".917" rx=".776"/><path d="M2.42 4.138C2.47 3.52 2.97 3 3.598 3H20.4c.628 0 1.127.52 1.18 1.138h.02V19.8a1.2 1.2 0 0 1-1.2 1.2H3.599a1.2 1.2 0 0 1-1.2-1.2V4.138h.021M15.6 19.8h4.8v-3.6h-4.8v3.6m0-4.7h4.8v-3.7h-4.8v3.7m0-4.9h4.8V6.6h-4.8v3.6m-6 9.601h4.8v-3.6H9.6v3.6m0-4.7h4.8v-3.7H9.6v3.7m0-4.9h4.8V6.6H9.6v3.6m-6.001 9.601h4.8v-3.6H3.6v3.6m0-4.7h4.8v-3.7H3.6v3.7m0-4.9h4.8V6.6H3.6v3.6"/></symbol><symbol id="trumbowyg-row-below" viewBox="0 0 24 24"><rect y="-347.06" x="548.4" height="18.13" width="4.427" transform="matrix(0 1 1 0 350 -532.36)" fill="#1ab394" stroke="#000" stroke-linejoin="round" stroke-linecap="round" stroke-width=".79" rx=".781"/><path d="M2.42 4.138C2.47 3.52 2.97 3 3.598 3H20.4c.628 0 1.127.52 1.18 1.138h.02V19.8a1.2 1.2 0 0 1-1.2 1.2H3.599a1.2 1.2 0 0 1-1.2-1.2V4.138h.021M15.6 19.8h4.8v-3.6h-4.8v3.6m0-4.7h4.8v-3.7h-4.8v3.7m0-4.9h4.8V6.6h-4.8v3.6m-6 9.601h4.8v-3.6H9.6v3.6m0-4.7h4.8v-3.7H9.6v3.7m0-4.9h4.8V6.6H9.6v3.6m-6.001 9.601h4.8v-3.6H3.6v3.6m0-4.7h4.8v-3.7H3.6v3.7m0-4.9h4.8V6.6H3.6v3.6"/></symbol><symbol id="trumbowyg-row-delete" viewBox="0 0 24 24"><rect width="5" height="18" x="543.36" y="-347" transform="rotate(90 103.18 -429.18)" fill="#ed5565" rx=".776"/><path d="M21.58 4.136c-.051-.618-.55-1.138-1.178-1.138H3.6c-.628 0-1.127.52-1.18 1.138H2.4v15.663A1.2 1.2 0 0 0 3.6 21h16.801a1.2 1.2 0 0 0 1.2-1.2V4.136h-.021M8.4 19.799H3.6v-3.6h4.8v3.6m0-4.7H3.6v-3.7h4.8v3.7m0-4.9H3.6V6.597h4.8v3.6m6 9.601H9.6v-3.6h4.8v3.6m0-4.7H9.6v-3.7h4.8v3.7m0-4.9H9.6V6.597h4.8v3.6m6.001 9.601h-4.8v-3.6h4.8v3.6m0-4.7h-4.8v-3.7h4.8v3.7m0-4.9h-4.8V6.597h4.8v3.6"/></symbol><symbol id="trumbowyg-table-delete" viewBox="0 0 24 24"><rect y="-347" x="537.06" height="18" width="6" transform="matrix(0 1 1 0 350 -532.36)" fill="#ed5565" stroke="#000" stroke-linejoin="round" stroke-linecap="round" stroke-width=".917" rx=".776"/><rect width="5" height="18" x="543.36" y="-347" transform="rotate(90 103.18 -429.18)" fill="#ed5565" rx=".776"/><rect y="-347.06" x="548.4" height="18.13" width="4.427" transform="matrix(0 1 1 0 350 -532.36)" fill="#ed5565" stroke="#000" stroke-linejoin="round" stroke-linecap="round" stroke-width=".79" rx=".781"/><path d="M21.58 4.136c-.051-.618-.55-1.138-1.178-1.138H3.6c-.628 0-1.127.52-1.18 1.138H2.4v15.663A1.2 1.2 0 0 0 3.6 21h16.801a1.2 1.2 0 0 0 1.2-1.2V4.136h-.021M8.4 19.799H3.6v-3.6h4.8v3.6m0-4.7H3.6v-3.7h4.8v3.7m0-4.9H3.6V6.597h4.8v3.6m6 9.601H9.6v-3.6h4.8v3.6m0-4.7H9.6v-3.7h4.8v3.7m0-4.9H9.6V6.597h4.8v3.6m6.001 9.601h-4.8v-3.6h4.8v3.6m0-4.7h-4.8v-3.7h4.8v3.7m0-4.9h-4.8V6.597h4.8v3.6"/></symbol><symbol id="trumbowyg-table" viewBox="0 0 72 72"><path d="M25.686 51.38v-6.347q0-.462-.297-.76-.298-.297-.761-.297H14.04q-.463 0-.761.297-.298.298-.298.76v6.346q0 .463.298.76.298.298.76.298h10.589q.463 0 .76-.298.298-.297.298-.76zm0-12.692v-6.346q0-.463-.297-.76-.298-.298-.761-.298H14.04q-.463 0-.761.298-.298.297-.298.76v6.346q0 .462.298.76.298.297.76.297h10.589q.463 0 .76-.297.298-.298.298-.76zm16.94 12.691v-6.346q0-.462-.297-.76-.298-.297-.761-.297H30.98q-.463 0-.76.297-.299.298-.299.76v6.346q0 .463.298.76.298.298.761.298h10.588q.463 0 .76-.298.299-.297.299-.76zm-16.94-25.383v-6.345q0-.463-.297-.76-.298-.298-.761-.298H14.04q-.463 0-.761.297-.298.298-.298.76v6.346q0 .463.298.76.298.298.76.298h10.589q.463 0 .76-.298.298-.297.298-.76zm16.94 12.692v-6.346q0-.463-.297-.76-.298-.298-.761-.298H30.98q-.463 0-.76.298-.299.297-.299.76v6.346q0 .462.298.76.298.297.761.297h10.588q.463 0 .76-.297.299-.298.299-.76zm16.94 12.691v-6.346q0-.462-.297-.76-.298-.297-.76-.297H47.92q-.463 0-.76.297-.298.298-.298.76v6.346q0 .463.297.76.298.298.761.298h10.588q.463 0 .761-.298.298-.297.298-.76zm-16.94-25.383v-6.345q0-.463-.297-.76-.298-.298-.761-.298H30.98q-.463 0-.76.297-.299.298-.299.76v6.346q0 .463.298.76.298.298.761.298h10.588q.463 0 .76-.298.299-.297.299-.76zm16.94 12.692v-6.346q0-.463-.297-.76-.298-.298-.76-.298H47.92q-.463 0-.76.298-.298.297-.298.76v6.346q0 .462.297.76.298.297.761.297h10.588q.463 0 .761-.297.298-.298.298-.76zm0-12.692v-6.345q0-.463-.297-.76-.298-.298-.76-.298H47.92q-.463 0-.76.297-.298.298-.298.76v6.346q0 .463.297.76.298.298.761.298h10.588q.463 0 .761-.298.298-.297.298-.76zm4.236-10.576v35.96q0 2.18-1.555 3.734-1.555 1.553-3.739 1.553H14.04q-2.184 0-3.739-1.553-1.555-1.553-1.555-3.735V15.42q0-2.181 1.555-3.735 1.555-1.553 3.739-1.553h44.468q2.184 0 3.739 1.553 1.555 1.554 1.555 3.735z"/></symbol><symbol id="trumbowyg-special-chars" viewBox="0 0 72 72"><text style="text-align:start;line-height:125%" x="6.03" y="48.528" transform="scale(1.0117 .98844)" font-size="60.056" font-weight="400" font-family="Times New Roman"><tspan x="6.03" y="48.528">&#x2122;</tspan></text></symbol><symbol id="trumbowyg-upload" viewBox="0 0 72 72"><path d="M64 27v28H8V27H0v36h72V27h-8z"/><path d="M32.1 6.7h8v33.6h-8z"/><path d="M48 35.9L36 49.6 24 36h24z"/></symbol></svg>
-  </div>
-.notes_list_container
-  .add_request_term{style: "float: left; margin-right: 1em;"}
-    %div#ob_success_message{class: "message-box success-msg", style: "display: none; margin: 10px 0;"}
-    %div#ob_error_message{class: "message-box error-msg", style: "display: none; margin: 10px 0;"}
-    - if !session[:user].nil? && @ontology.admin?(session[:user])
-      %p
-        %em
-          The text below is displayed to the user as the instructions on how to request new terms for your ontology.
-          You can change this text for #{@ontology.acronym} ontology by clicking anywhere on the existing text to bring up the editing dialog.
-          Click 'Submit Changes' to save or 'Cancel' to discard your changes.
-      %div#new_term_instructions_container{style: 'clear: both;'}
-        %form#new_term_instructions_form
-          = hidden_field nil, :acronym, value: @ontology.acronym
-          = hidden_field nil, :new_term_instructions_old, value: @ob_instructions.html_safe
-          %div#new_term_instructions
-            = @ob_instructions.html_safe
-          %button#new_term_instructions_submit{class: "btn", type: "button", title: "Submit Changes", alt: "Submit Changes", style: 'display: none;'}
-            Submit Changes
-          %button#new_term_instructions_cancel{class: "btn", type: "button", title: "Cancel", alt: "Cancel", style: 'display: none;'}
-            Cancel
-          %span#progress_message{style: 'display: none; margin-left: 20px;'}
-    - else
-      %div
-        = @ob_instructions.html_safe
-    - if session[:user].nil?
-      = link_to "Request New Term", login_index_path, style: "font-size: .9em;"
-    - else
-      = link_to "Request New Term", "javascript:void(0);", class: "add_request_term", style: "font-size: .9em;", data: { parent_id: "#{@concept.id}" }
-  %div.request_term_form_div{style: "display: none; clear: both; padding-top: 1em;"}
-
-:javascript
-  var g_prefLabel;
-
-  jQuery(document).ready(function() {
-    g_prefLabel = '#{@concept.prefLabel({:use_html => false}).to_s.empty? ? @concept.id : @concept.prefLabel({:use_html => false}).html_safe}';
-    var isPopulated = window.localStorage.getItem('request_term_form_populated');
-
-    if (isPopulated) {
-      addRequestTermBox("#{@concept.id}");
-    }
-  });
diff --git a/config/application.rb b/config/application.rb
index 77aa0796f..8a1fe795a 100644
--- a/config/application.rb
+++ b/config/application.rb
@@ -26,7 +26,6 @@ class Application < Rails::Application
 
     config.exceptions_app = self.routes
 
-    config.autoload_paths += %W[#{config.root}/app/lib/kgcl]
 
 
     config.settings = config_for :settings
diff --git a/config/bioportal_config_env.rb.sample b/config/bioportal_config_env.rb.sample
index 277b97201..4b94b85fb 100644
--- a/config/bioportal_config_env.rb.sample
+++ b/config/bioportal_config_env.rb.sample
@@ -93,10 +93,6 @@ $MULTIPLE_RECOGNIZERS = false
 # ["CPT","ICD10","ICNP","ICPC2P","MDDB","MEDDRA","MSHFRE","MSHSPA_1","NDDF","NDFRT","NIC","RCD","SCTSPA","SNOMEDCT","WHO-ART"]
 $RESTRICTED_DOWNLOADS = []
 
-# Ontolobridge endpoint url
-$ONTOLOBRIDGE_BASE_URL = 'https://ontolobridge.ccs.miami.edu/api-test/requests'
-# Ontolobridge authentication token
-$ONTOLOBRIDGE_AUTHENTICATION_TOKEN = 'Token Uq2pae73ktMtmgjUgtnhEOuHxr9sZeuK'
 
 # Ontologies for which to enable the new term request (Ontolobridge) tab
 $NEW_TERM_REQUEST_ONTOLOGIES = []
@@ -301,7 +297,7 @@ $FOOTER_LINKS = {
 
 
 
-$UI_THEME = ENV['UI_THEME'] || 'ontoportal'
+$UI_THEME = ENV['UI_THEME'] || 'bioportal'
 $HOSTNAME = ENV['API_URL']
 
 if $HOSTNAME
diff --git a/config/initializers/graphql_client.rb b/config/initializers/graphql_client.rb
index 1f89525b6..7ca1f5bcc 100644
--- a/config/initializers/graphql_client.rb
+++ b/config/initializers/graphql_client.rb
@@ -1,5 +1,4 @@
 #frozen_string_literal: true
-#Disable as no used in ontoportal-lirmm branch and causing problems with docker image build
 require 'graphql/client'
 require 'graphql/client/http'
 
diff --git a/config/locales/en.yml b/config/locales/en.yml
index e3187b171..8eff227b5 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -86,25 +86,6 @@ en:
   ontologies:
     intro: Browse the library of ontologies
 
-  concepts:
-    request_term:
-      new_term_instructions: >
-        <p>This ontology integrates with OntoloBridge, allowing community users to suggest additions to the public ontology. Complete the template below to submit a term request directly to the ontology maintainer.</p>
-        <blockquote>
-          <p>Term Label (required)<br>Suggested term name. If a term can be described with multiple synonyms, only list the preferred name here.</p>
-        </blockquote>
-        <blockquote>
-          <p>Term description (required)<br>A brief definition, description, or usage of your suggested term.   Additional term synonyms may be listed in this section.</p>
-        </blockquote>
-        <blockquote>
-          <p>Superclass (required)<br>The parent term of the suggested term. The parent term should be an existing entry of the current ontology. The superclass can be selected directly from Bioportal's Classes tree viewer.</p>
-        </blockquote>
-        <blockquote>
-          <p>References (optional)<br>Provide evidence for the existence of the requested term such as Pubmed IDs of papers or links to other resources that describe the term.</p>
-        </blockquote>
-        <blockquote>
-          <p>Justification (optional)<br>Provide any additional information about the requested term here.</p>
-        </blockquote>
   mappings:
     intro: Browse mappings between classes in different ontologies
 
diff --git a/config/routes.rb b/config/routes.rb
index 4e126f8bf..8de14dbbc 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -5,9 +5,7 @@
 
   resources :notes, constraints: { id: /.+/ }
 
-  resources :ontolobridge do
-    post :save_new_term_instructions, on: :collection
-  end
+
 
   resources :projects, constraints: { id: /[^\/]+/ }
 
@@ -130,6 +128,4 @@
   get '/admin/update_info', to: 'admin#update_info'
   get '/admin/update_check_enabled', to: 'admin#update_check_enabled'
 
-  # Ontolobridge
-  # post '/ontolobridge/:save_new_term_instructions' => 'ontolobridge#save_new_term_instructions'
 end

From a977d44537e8c4464179ead2f2719559889a3a05 Mon Sep 17 00:00:00 2001
From: Syphax <gs_bouazzouni@esi.dz>
Date: Sat, 12 Oct 2024 15:52:55 +0200
Subject: [PATCH 02/14] Add selected UI view components code for turbo frame,
 tabs, loaders and alerts

---
 app/assets/config/manifest.js                 |   2 +
 app/assets/javascripts/application.js         |   3 +
 ...tion.css.scss => application.css.scss.erb} |   6 +-
 app/assets/stylesheets/components/alert.scss  | 102 +++++++++
 app/assets/stylesheets/components/index.scss  |   4 +
 app/assets/stylesheets/components/loader.scss |  12 +
 .../components/regular_button.scss            | 213 ++++++++++++++++++
 .../components/tabs_container.scss            |  62 +++++
 app/assets/stylesheets/ontology_viewer.scss   |  22 ++
 .../stylesheets/theme-variables.scss.erb      |  56 +++++
 .../primary_button_component.html.haml        |  23 ++
 .../buttons/regular_button_component.rb       |  50 ++++
 .../regular_button_component.html.haml        |  17 ++
 app/components/display/alert_component.rb     |  52 +++++
 .../alert_component/alert_component.html.haml |  17 ++
 .../alert_component_controller.js             |  19 ++
 app/components/loader_component.rb            |  34 +++
 app/components/tab_item_component.rb          |  56 +++++
 app/components/tabs_container_component.rb    |  47 ++++
 .../tabs_container_component.html.haml        |  17 ++
 .../tabs_container_component_controller.js    |  43 ++++
 app/components/turbo_frame_component.rb       |  39 ++++
 .../turbo_frame_component.html.haml           |  12 +
 app/javascript/application-esbuild.js         |   5 -
 app/javascript/application_esbuild.js         |  17 ++
 app/javascript/component_controllers/index.js |  11 +
 .../class_search_auto_complete_controller.js  |  35 +++
 .../container_splitter_controller.js          |  26 +++
 .../controllers/history_controller.js         |  17 ++
 app/javascript/controllers/index.js           |  28 ++-
 .../controllers/language_change_controller.js |  45 +---
 .../controllers/load_chart_controller.js      |  83 +++++++
 .../ontology_viewer_tabs_controller.js        |  47 ++++
 .../ontoportal_autocomplete_controller.js     |  70 ++++++
 .../controllers/simple_tree_controller.js     |  57 +++++
 .../controllers/turbo_frame_controller.js     |  31 +++
 .../turbo_frame_error_controller.js           |  47 ++++
 app/javascript/mixins/useAjax.js              |   3 +
 .../mixins/useBioportalAutoComplete.js        |   3 +
 app/javascript/mixins/useHistory.js           |  71 ++++++
 app/javascript/mixins/useSimpleTree.js        |  11 +
 41 files changed, 1470 insertions(+), 45 deletions(-)
 rename app/assets/stylesheets/{application.css.scss => application.css.scss.erb} (93%)
 mode change 100644 => 100755
 create mode 100644 app/assets/stylesheets/components/alert.scss
 create mode 100644 app/assets/stylesheets/components/index.scss
 create mode 100644 app/assets/stylesheets/components/loader.scss
 create mode 100644 app/assets/stylesheets/components/regular_button.scss
 create mode 100644 app/assets/stylesheets/components/tabs_container.scss
 create mode 100644 app/assets/stylesheets/ontology_viewer.scss
 create mode 100644 app/assets/stylesheets/theme-variables.scss.erb
 create mode 100644 app/components/buttons/primary_button_component/primary_button_component.html.haml
 create mode 100644 app/components/buttons/regular_button_component.rb
 create mode 100644 app/components/buttons/regular_button_component/regular_button_component.html.haml
 create mode 100644 app/components/display/alert_component.rb
 create mode 100644 app/components/display/alert_component/alert_component.html.haml
 create mode 100644 app/components/display/alert_component/alert_component_controller.js
 create mode 100644 app/components/loader_component.rb
 create mode 100644 app/components/tab_item_component.rb
 create mode 100644 app/components/tabs_container_component.rb
 create mode 100644 app/components/tabs_container_component/tabs_container_component.html.haml
 create mode 100644 app/components/tabs_container_component/tabs_container_component_controller.js
 create mode 100644 app/components/turbo_frame_component.rb
 create mode 100644 app/components/turbo_frame_component/turbo_frame_component.html.haml
 delete mode 100644 app/javascript/application-esbuild.js
 create mode 100644 app/javascript/application_esbuild.js
 create mode 100644 app/javascript/component_controllers/index.js
 create mode 100644 app/javascript/controllers/class_search_auto_complete_controller.js
 create mode 100644 app/javascript/controllers/container_splitter_controller.js
 create mode 100644 app/javascript/controllers/history_controller.js
 create mode 100644 app/javascript/controllers/load_chart_controller.js
 create mode 100644 app/javascript/controllers/ontology_viewer_tabs_controller.js
 create mode 100644 app/javascript/controllers/ontoportal_autocomplete_controller.js
 create mode 100644 app/javascript/controllers/simple_tree_controller.js
 create mode 100644 app/javascript/controllers/turbo_frame_controller.js
 create mode 100644 app/javascript/controllers/turbo_frame_error_controller.js
 create mode 100644 app/javascript/mixins/useAjax.js
 create mode 100644 app/javascript/mixins/useBioportalAutoComplete.js
 create mode 100644 app/javascript/mixins/useHistory.js
 create mode 100644 app/javascript/mixins/useSimpleTree.js

diff --git a/app/assets/config/manifest.js b/app/assets/config/manifest.js
index 2c35fb2c3..6240ea468 100644
--- a/app/assets/config/manifest.js
+++ b/app/assets/config/manifest.js
@@ -4,4 +4,6 @@
 //= link bp_annotator.js
 //= link bp_annotatorplus.js
 //= link vendor.js
+//= link_tree ../images
+//= link_directory ../javascripts .js
 //= link_directory ../stylesheets .css
diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
index 393efe2e8..318e08ca9 100644
--- a/app/assets/javascripts/application.js
+++ b/app/assets/javascripts/application.js
@@ -32,3 +32,6 @@
 //= require projects
 //= require submissions
 
+//= require application_esbuild
+
+
diff --git a/app/assets/stylesheets/application.css.scss b/app/assets/stylesheets/application.css.scss.erb
old mode 100644
new mode 100755
similarity index 93%
rename from app/assets/stylesheets/application.css.scss
rename to app/assets/stylesheets/application.css.scss.erb
index 3647b07fa..22e10b56f
--- a/app/assets/stylesheets/application.css.scss
+++ b/app/assets/stylesheets/application.css.scss.erb
@@ -20,6 +20,7 @@
  *= require select2
  *= require trumbowyg
  *= require flag-icon
+ *= require theme-variables
  *
  */
 
@@ -40,8 +41,11 @@
 @import "search";
 @import "submissions";
 @import "tree";
-@import "ontolobridge";
+@import "ontology_viewer";
+@import "components/index";
 
 /* Bootstrap and Font Awesome */
 @import "bootstrap";
 @import "bootstrap_overrides";
+
+
diff --git a/app/assets/stylesheets/components/alert.scss b/app/assets/stylesheets/components/alert.scss
new file mode 100644
index 000000000..21403b307
--- /dev/null
+++ b/app/assets/stylesheets/components/alert.scss
@@ -0,0 +1,102 @@
+.alert-container {
+  display: flex;
+  align-items: center;
+  padding: 20px;
+  border-radius: 5px;
+
+
+}
+
+.alert-container.alert-info-type {
+  background-color: var(--bg-info-light-color);
+}
+
+.alert-container.alert-warning-type {
+  background-color: var(--bg-warning-light-color);
+}
+
+.alert-container.alert-danger-type {
+  background-color: var(--bg-danger-light-color);
+}
+
+.alert-container.alert-success-type {
+  background-color: var(--bg-success-light-color);
+}
+
+
+.alert-message {
+  font-size: 16px;
+  margin: 0 10px;
+  width: 100%;
+}
+
+
+.alert-message.alert-info-type {
+  color: rgb(59, 130, 246);
+}
+
+.alert-message.alert-warning-type {
+  color: rgb(234, 179, 8);
+}
+
+.alert-message.alert-danger-type {
+  color: rgb(239, 68, 68);
+}
+
+.alert-message.alert-success-type {
+  color: rgb(34, 197, 94);
+}
+
+.alert-icon {
+  align-self: flex-start;
+}
+
+.alert-icon svg {
+  width: 25px;
+  margin: 0 !important;
+}
+
+.alert-icon.alert-info-type svg path {
+  fill: rgb(59, 130, 246);
+}
+
+.alert-icon.alert-warning-type svg path {
+  fill: rgb(234, 179, 8);
+}
+
+.alert-icon.alert-danger-type svg path {
+  fill: rgb(239, 68, 68);
+}
+
+.alert-icon.alert-success-type svg path {
+  fill: rgb(34, 197, 94);
+}
+
+
+.alert-close svg {
+  width: 25px;
+  cursor: pointer;
+}
+
+.alert-close.alert-info-type svg path {
+  fill: rgb(59, 130, 246);
+}
+
+.alert-close.alert-warning-type svg path {
+  fill: rgb(234, 179, 8);
+}
+
+.alert-close.alert-danger-type svg path {
+  fill: rgb(239, 68, 68);
+}
+
+.alert-close.alert-success-type svg path {
+  fill: rgb(34, 197, 94);
+}
+
+
+.alert-button {
+  white-space: nowrap;
+  margin-right: 20px;
+}
+
diff --git a/app/assets/stylesheets/components/index.scss b/app/assets/stylesheets/components/index.scss
new file mode 100644
index 000000000..4fc890935
--- /dev/null
+++ b/app/assets/stylesheets/components/index.scss
@@ -0,0 +1,4 @@
+@import 'regular_button';
+@import 'tabs_container';
+@import "loader";
+@import "alert";
diff --git a/app/assets/stylesheets/components/loader.scss b/app/assets/stylesheets/components/loader.scss
new file mode 100644
index 000000000..2392bba20
--- /dev/null
+++ b/app/assets/stylesheets/components/loader.scss
@@ -0,0 +1,12 @@
+.loader-component{
+    display: flex;
+    justify-content: center;
+}
+
+.lds-ellipsis.loader-component{
+    transform: scale(1);
+}
+
+.lds-ellipsis.loader-component div{
+    background: var(--primary-color);
+}
\ No newline at end of file
diff --git a/app/assets/stylesheets/components/regular_button.scss b/app/assets/stylesheets/components/regular_button.scss
new file mode 100644
index 000000000..d92453991
--- /dev/null
+++ b/app/assets/stylesheets/components/regular_button.scss
@@ -0,0 +1,213 @@
+.regular-button {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 16px;
+    height: 60px;
+    border-radius: 9px;
+    padding: 0 30px;
+}
+.regular-button.slim{
+    border-radius: 5px;
+    height: 42px;
+    padding: 0 15px;
+}
+
+.primary-button {
+    color: white !important;
+    background-color: var(--primary-color);
+    border: none;
+    transition: background-color ease 0.3s;
+}
+.primary-button:focus {
+    outline: none;
+}
+
+.primary-button:hover {
+    background-color: var(--hover-color);
+    cursor: pointer;
+}
+
+.primary-button.disabled-button{
+    background-color: #a3a3a3;
+}
+.primary-button.disabled-button:hover {
+    background-color: #a3a3a3;
+    cursor:default;
+}
+
+.danger-button.primary-button {
+    background-color: #F24C3D !important;
+}
+
+.danger-button.primary-button:hover {
+    background-color: #d74639 !important;
+}
+
+.warning-button.primary-button {
+    background-color: #F2BE22 !important;
+}
+
+.warning-button.primary-button:hover {
+    background-color: #dcac1d !important;
+}
+
+.secondary-button {
+    color: var(--primary-color) !important;
+    border: 1px solid var(--primary-color);
+    transition: background-color ease 0.3s;
+    background-color: rgba(0, 0, 0, 0) !important;
+}
+
+.secondary-button:focus {
+    outline: none;
+}
+
+.secondary-button:hover {
+    background-color: var(--primary-color) !important;
+    cursor: pointer;
+    color: white !important;
+
+    .secondary-button-icon path {
+        fill: white;
+    }
+}
+
+.secondary-button.disabled-button {
+    border: 1px solid #a3a3a3;
+    color: #a3a3a3 !important;
+}
+
+.secondary-button.disabled-button:hover {
+    background-color: rgba(0, 0, 0, 0) !important;
+    cursor: default;
+    color: #a3a3a3 !important;
+}
+
+.secondary-button.danger-button {
+    color: #F24C3D !important;
+    border: 1px solid #F24C3D;
+}
+.secondary-button.danger-button:hover {
+    background-color: #F24C3D !important;
+    color: white !important;
+}
+.secondary-button.warning-button {
+    color: #F2BE22 !important;
+    border: 1px solid #F2BE22;
+}
+
+.secondary-button.warning-button:hover {
+    background-color: #dcac1d !important;
+    color: white !important;
+}
+
+.left-button-icon{
+    margin-right: 10px;
+    margin-bottom: 3px;
+}
+
+.right-button-icon {
+    margin-left: 10px;
+    margin-bottom: 3px;
+}
+
+.secondary-button-icon path {
+    fill: var(--primary-color);
+}
+
+.primary-button-icon path {
+    fill: white !important;
+}
+
+
+.animation-container {
+    width: 100%;
+    height: 60px;
+    font-size: 16px;
+    background-color: var(--hover-color);
+    border: none;
+    border-radius: 9px;
+    justify-content: center;
+    align-items: center;
+    display: none;
+}
+.animation-container.slim {
+    border-radius: 5px;
+    height: 42px;
+}
+.animation-container.danger-button{
+    background-color: #d74639 !important;
+}
+.animation-container.warning-button{
+    background-color: #dcac1d !important;
+}
+
+.lds-ellipsis {
+    display: inline-block;
+    position: relative;
+    margin-top: 50px;
+    width: 80px;
+    height: 80px;
+    transform: scale(0.7);
+}
+
+.lds-ellipsis div {
+    position: absolute;
+    width: 13px;
+    height: 13px;
+    border-radius: 50%;
+    background: white;
+    animation-timing-function: cubic-bezier(0, 1, 1, 0);
+}
+
+.lds-ellipsis div:nth-child(1) {
+    left: 8px;
+    animation: lds-ellipsis1 0.6s infinite;
+}
+
+.lds-ellipsis div:nth-child(2) {
+    left: 8px;
+    animation: lds-ellipsis2 0.6s infinite;
+}
+
+.lds-ellipsis div:nth-child(3) {
+    left: 32px;
+    animation: lds-ellipsis2 0.6s infinite;
+}
+
+.lds-ellipsis div:nth-child(4) {
+    left: 56px;
+    animation: lds-ellipsis3 0.6s infinite;
+}
+
+@keyframes lds-ellipsis1 {
+    0% {
+        transform: scale(0);
+    }
+
+    100% {
+        transform: scale(1);
+    }
+}
+
+@keyframes lds-ellipsis3 {
+    0% {
+        transform: scale(1);
+    }
+
+    100% {
+        transform: scale(0);
+    }
+}
+
+@keyframes lds-ellipsis2 {
+    0% {
+        transform: translate(0, 0);
+    }
+
+    100% {
+        transform: translate(24px, 0);
+    }
+}
\ No newline at end of file
diff --git a/app/assets/stylesheets/components/tabs_container.scss b/app/assets/stylesheets/components/tabs_container.scss
new file mode 100644
index 000000000..c215cfe70
--- /dev/null
+++ b/app/assets/stylesheets/components/tabs_container.scss
@@ -0,0 +1,62 @@
+.tabs-container {
+  border-bottom: 1px solid #DFDFDF;
+  display: flex;
+  justify-content: space-between;
+  & > div {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+  }
+}
+
+.tabs-container hr {
+  border: 1px solid #f3f3f3;
+  width: 100%;
+  margin: 0;
+}
+
+.tabs-container .tab-items {
+  display: flex;
+  margin: 0;
+  position: relative;
+}
+
+.tabs-container .tab-items > div {
+  font-size: 16px;
+  font-weight: 400;
+  color: #5e5e5e;
+  margin-right: 30px;
+  cursor: pointer;
+  opacity: 60%;
+  transition: opacity 0.3s ease;
+
+  a, button {
+    color: #5e5e5e !important;
+    border: none;
+    background: none;
+  }
+}
+
+.tabs-container .tab-items div:hover {
+
+  opacity: 100%;
+}
+
+.tabs-container .tab-items div hr {
+  display: none;
+  margin-top: 10px;
+}
+
+.tabs-container .tab-items .active {
+  font-weight: 500;
+  opacity: 100%;
+}
+
+.tabs-container .tab-items .active hr {
+  display: block;
+  border: 1px solid var(--primary-color);
+  opacity: 100%;
+}
+.container{
+  overflow-x: auto;
+}
diff --git a/app/assets/stylesheets/ontology_viewer.scss b/app/assets/stylesheets/ontology_viewer.scss
new file mode 100644
index 000000000..4485bac40
--- /dev/null
+++ b/app/assets/stylesheets/ontology_viewer.scss
@@ -0,0 +1,22 @@
+
+.ontologies-tabs-container {
+  & > .tabs-container {
+    justify-content: center;
+  }
+
+  & > .tabs-container > div {
+    //width: 1248px;
+    padding: 0 10px;
+  }
+
+  & > .tab-content {
+    display: flex;
+    justify-content: center;
+
+    & > .tab-pane {
+      //width: 1248px;
+      padding: 0 10px;
+      width: 100%;
+    }
+  }
+}
\ No newline at end of file
diff --git a/app/assets/stylesheets/theme-variables.scss.erb b/app/assets/stylesheets/theme-variables.scss.erb
new file mode 100644
index 000000000..2b900be72
--- /dev/null
+++ b/app/assets/stylesheets/theme-variables.scss.erb
@@ -0,0 +1,56 @@
+<%# This file contains all the color themes of ontoportal alliance%>
+<% if (ui_theme = $UI_THEME.to_s.parameterize)
+    case ui_theme
+    when "agroportal" %>
+        :root{
+            --primary-color: #3CB371;
+            --hover-color: #41C67C;
+            --secondary-color: #ffc107;
+            --light-color: #F1F6FA;
+        }
+    <% when "stageportal" %>
+        :root{
+            --primary-color: #37AEA0;
+            --hover-color: #3BBDAE;
+            --secondary-color: #ffc107;
+            --light-color: #ECF7F6;
+        }
+    <% when "bioportal" %>
+        :root{
+            --primary-color: #234979;
+            --hover-color: #6B96B7;
+            --secondary-color: #ffc107;
+            --light-color: #F0F5F6;
+        }
+    
+    <% when "ontoportal" , "testportal" %>
+        :root{
+            --primary-color: #5499a4;
+            --hover-color: #6B96B7;
+            --secondary-color: #ffc107;
+            --light-color: #F1F6FA;
+        }
+    <%# Here to add a new theme ... %>
+    <% end %>
+<% end %>
+
+
+
+// common variables
+:root{
+    --error-color: #EB4335;
+    --warning-color: #F2BE22;
+    --gray-color: #888888;
+    --success-color: #2DC54E;
+    --admin-color: #145FF4;
+    --container-max-width: 1248px;
+    --bg-info-light-color: rgba(59, 130, 246, 0.1);
+    --bg-danger-light-color: rgba(239, 68, 68, 0.1);
+    --bg-warning-light-color: rgba(234, 179, 8, 0.1);
+    --bg-success-light-color: rgba(34, 197, 94, 0.1);
+}
+
+
+
+
+
diff --git a/app/components/buttons/primary_button_component/primary_button_component.html.haml b/app/components/buttons/primary_button_component/primary_button_component.html.haml
new file mode 100644
index 000000000..154eb2abe
--- /dev/null
+++ b/app/components/buttons/primary_button_component/primary_button_component.html.haml
@@ -0,0 +1,23 @@
+- if @type == "submit"
+    .button-container{onclick: "displayAnimation()", id: "primary-button"}
+        %input.primary-button{:name => @name, :type => "submit", :value => @value, oncklick: @onclick}/
+- else
+    .button-container
+        .primary-button{:name => @name, onclick: "displayAnimation()", id: "primary-button", oncklick: @onclick}
+            = @value
+
+.animation-container#loading-animation
+    .lds-ellipsis
+        %div
+        %div
+        %div
+        %div
+
+:javascript
+    const button = document.getElementById("primary-button")
+    const loading = document.getElementById("loading-animation")
+    function displayAnimation(){
+        console.log("working")
+        button.style.display = 'none';
+        loading.style.display = 'flex';
+    }
\ No newline at end of file
diff --git a/app/components/buttons/regular_button_component.rb b/app/components/buttons/regular_button_component.rb
new file mode 100644
index 000000000..55299a66b
--- /dev/null
+++ b/app/components/buttons/regular_button_component.rb
@@ -0,0 +1,50 @@
+class Buttons::RegularButtonComponent < ViewComponent::Base
+  renders_one :icon_left
+  renders_one :icon_right
+
+  def initialize(id: , value:, variant: "primary", color: "normal", href: "", size: "normal", state: "animate", type: 'button', target: nil)
+    @id = id
+    @value = value
+    @variant = variant
+    @color = color
+    @href = href
+    @size = size
+    @state = state
+    @type = type
+    @target = target
+  end
+
+  def button_label
+    hide_icon_left = icon_left == nil ? "hide" : " "
+    hide_icon_right = icon_right == nil ? "hide" : " "
+    content_tag(:span, icon_left, class: "#{@variant}-button-icon left-button-icon #{hide_icon_left}") + content_tag(:div, @value)  + content_tag(:span, icon_right, class: "#{@variant}-button-icon right-button-icon #{hide_icon_right}")
+  end
+
+  def button_elem
+    slim_class = @size == "slim" ? "slim " : " "
+    danger_class = @color == "danger" ? "danger-button " : " "
+    warning_class = @color == "warning" ? "warning-button " : " "
+    disabled_class = @state == "disabled" ? "disabled-button " : " "
+    class_style = "#{@variant}-button regular-button " + danger_class + warning_class + disabled_class + slim_class
+    on_click_event =  load_animation? ?  "displayAnimation(this, '#{@id}-loading-animation')" : ''
+
+    if link?
+      link_to(@href, class: class_style, onclick: on_click_event, id: @id, target: @target) do
+        button_label
+      end
+    else
+      button_tag(type: @type, class: class_style, onclick: on_click_event, id: @id) do
+        button_label
+      end
+    end
+  end
+
+  def link?
+    @href && !@href.empty?
+  end
+
+  def load_animation?
+    @state == "animate"
+  end
+
+end
diff --git a/app/components/buttons/regular_button_component/regular_button_component.html.haml b/app/components/buttons/regular_button_component/regular_button_component.html.haml
new file mode 100644
index 000000000..f2ce56cbd
--- /dev/null
+++ b/app/components/buttons/regular_button_component/regular_button_component.html.haml
@@ -0,0 +1,17 @@
+.button-container
+    = button_elem
+
+- if load_animation?
+    = render Display::ButtonLoaderComponent.new(id: @id + '-loading-animation', slim: @size.eql?('slim'), color: @color)
+    :javascript
+        function displayAnimation(element, loadingId){
+            const loading = document.getElementById(loadingId)
+            element.style.display = 'none';
+            loading.style.display = 'flex';
+        }
+        document.addEventListener('turbo:submit-end', function(event) {
+             const loading = document.getElementById('#{"#{@id}-loading-animation"}')
+             const button = document.getElementById('#{"#{@id}"}')
+             button.style.display = 'flex';
+             loading.style.display = 'none';
+        });
\ No newline at end of file
diff --git a/app/components/display/alert_component.rb b/app/components/display/alert_component.rb
new file mode 100644
index 000000000..a04ea94d4
--- /dev/null
+++ b/app/components/display/alert_component.rb
@@ -0,0 +1,52 @@
+class Display::AlertComponent < ViewComponent::Base
+    def initialize(id: nil, message: nil, closable: true, type: "info", auto_close_delay: nil, button: nil)
+        @message = message
+        @closable = closable
+        @type = type
+        @auto_close_delay =  auto_close_delay
+        @button = button
+        @id = id
+    end
+
+    def closable?
+        @closable
+    end
+
+    def message
+        @message
+    end
+
+    def alert_type_class
+        case @type
+        when "info"
+            "alert-info-type"
+        when "warning"
+            "alert-warning-type"
+        when "danger"
+            "alert-danger-type"
+        when "success"
+            "alert-success-type"
+        end
+    end
+
+    def alert_icon
+        case @type
+        when "info"
+            "info.svg"
+        when "warning"
+            "warning.svg"
+        when "danger"
+            "danger.svg"
+        when "success"
+            "success.svg"
+        end
+    end
+
+    def auto_close?
+        !@auto_close_delay.nil?
+    end
+
+    def button
+        @button
+    end
+end
\ No newline at end of file
diff --git a/app/components/display/alert_component/alert_component.html.haml b/app/components/display/alert_component/alert_component.html.haml
new file mode 100644
index 000000000..7dcce0164
--- /dev/null
+++ b/app/components/display/alert_component/alert_component.html.haml
@@ -0,0 +1,17 @@
+.alert-container{id: @id, data: {controller: "alert-component",
+                        'alert-component-auto-close-value': auto_close?,
+                        'alert-component-auto-close-after-value': @auto_close_delay,
+                        },
+                 class: alert_type_class, style: 'white-space: normal;'}
+    .alert-icon{class: alert_type_class}
+        = inline_svg_tag alert_icon
+    .alert-message{class: alert_type_class}
+        = message || content
+    - if button
+        .alert-button
+            = render button
+    - if closable?
+        .alert-close{"data-action":"click->alert-component#close", class: alert_type_class}
+            = inline_svg_tag "x.svg"
+
+    
\ No newline at end of file
diff --git a/app/components/display/alert_component/alert_component_controller.js b/app/components/display/alert_component/alert_component_controller.js
new file mode 100644
index 000000000..0abf19dda
--- /dev/null
+++ b/app/components/display/alert_component/alert_component_controller.js
@@ -0,0 +1,19 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+
+  static  values = {
+    autoCloseAfter: { type: Number, default: 5000 },
+    autoClose: { type: Boolean, default: false },
+  }
+  connect(){
+    if (this.autoCloseValue){
+      setTimeout(() => {
+       this.close()
+      }, this.autoCloseAfterValue);
+    }
+  }
+  close(){
+    this.element.style.display = "none"
+  }
+}
diff --git a/app/components/loader_component.rb b/app/components/loader_component.rb
new file mode 100644
index 000000000..484edfab2
--- /dev/null
+++ b/app/components/loader_component.rb
@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+
+class LoaderComponent < ViewComponent::Base
+  include ApplicationHelper
+  include ActionView::Helpers::TagHelper
+
+  def initialize(small: false, type: nil)
+    super
+    @small = small
+    @type = type
+  end
+
+  def small_class
+    @small ? 'spinner-border-sm' : ''
+  end
+
+  def type
+    !@type.eql?('pulsing')
+  end
+
+  def call
+    if type
+      content_tag(:div, class: 'd-flex align-items-center flex-column') do
+        content_tag(:div, '', class: "spinner-border #{small_class}")
+      end
+    else
+      content_tag(:div, class: 'loader-component') do
+        content_tag(:div, class: "lds-ellipsis loader-component") do
+          4.times.map{content_tag(:div)}.join.html_safe
+        end
+      end
+    end
+  end
+end
diff --git a/app/components/tab_item_component.rb b/app/components/tab_item_component.rb
new file mode 100644
index 000000000..36782c5a1
--- /dev/null
+++ b/app/components/tab_item_component.rb
@@ -0,0 +1,56 @@
+# frozen_string_literal: true
+
+class TabItemComponent < ViewComponent::Base
+
+  include ActionView::Helpers::UrlHelper
+
+  def initialize(id: nil, title: nil, path: nil, page_name: '', selected: false, json_link: nil)
+    super
+    @id = id
+    @title = title
+    @path = path
+    @page_name = page_name
+    @selected = selected
+    @json_link = json_link
+  end
+
+  def selected_item?
+    @selected
+  end
+
+  def item_id
+    id.parameterize.underscore
+  end
+
+  def target_id
+    "#{item_id}_content"
+  end
+
+
+  def id
+    @id || @title
+  end
+
+  def title
+    @title
+  end
+
+  def active_class
+    selected_item? ? 'active show' : ''
+  end
+
+  def page_name
+    @page_name
+  end
+
+  def call
+    if title && !title.empty?
+      content_tag(:button, title, id: "#{item_id}_tab", class: "#{active_class} tab-link", 'data-json-link': @json_link)
+    else
+      content_tag(:button, id: "#{item_id}_tab", class: "#{active_class} tab-link", 'data-json-link': @json_link) do
+        content
+      end
+    end
+  end
+
+end
diff --git a/app/components/tabs_container_component.rb b/app/components/tabs_container_component.rb
new file mode 100644
index 000000000..2dbfc4753
--- /dev/null
+++ b/app/components/tabs_container_component.rb
@@ -0,0 +1,47 @@
+# frozen_string_literal: true
+
+class TabsContainerComponent < ViewComponent::Base
+
+  renders_many :items, TabItemComponent
+  renders_many :item_contents
+  renders_one :pinned_right
+
+  def initialize(id: '', url_parameter: nil, type: 'primary')
+    super
+    @url_parameter = url_parameter
+    @type = type
+    @id = id
+  end
+
+  def container_class
+    case @type
+    when 'primary'
+      'tabs-container'
+    when 'outline'
+      'tabs-container outline-tabs'
+    when 'pill'
+      'pill-tabs-container'
+    else
+      'tabs-container'
+    end
+  end
+
+  def item_target(item)
+    "##{@id}#{item.target_id}"
+  end
+
+  def item_content_id(item)
+    @id + item.target_id
+  end
+
+  def tabs_container_data(item)
+    {
+      'bs-toggle': 'tab',
+      'bs-target': item_target(item),
+      'tab-id': item.id,
+      'tab-title': item.page_name,
+      'url-parameter': @url_parameter,
+      action: 'click->tabs-container#selectTab'
+    }
+  end
+end
diff --git a/app/components/tabs_container_component/tabs_container_component.html.haml b/app/components/tabs_container_component/tabs_container_component.html.haml
new file mode 100644
index 000000000..a8c955a3c
--- /dev/null
+++ b/app/components/tabs_container_component/tabs_container_component.html.haml
@@ -0,0 +1,17 @@
+%div{data: {controller:'tabs-container'}, class: container_class, id: @id}
+  %div{class: !pinned_right? && 'justify-content-center'}
+    .tab-items.nav
+      - items.each do |item|
+        %div{data:  tabs_container_data(item), class: item.active_class + ' nav-item'}
+          = item
+          - unless @type.eql?('pill')
+            %hr
+    - if pinned_right?
+      %div.d-flex.mx-1
+        = pinned_right
+
+.tab-content
+  - item_contents.each_with_index do |item_content, index|
+    %div.tab-pane{id: item_content_id(items[index]), class: items[index].active_class}
+      = item_content
+
diff --git a/app/components/tabs_container_component/tabs_container_component_controller.js b/app/components/tabs_container_component/tabs_container_component_controller.js
new file mode 100644
index 000000000..9991b699f
--- /dev/null
+++ b/app/components/tabs_container_component/tabs_container_component_controller.js
@@ -0,0 +1,43 @@
+import {Controller} from "@hotwired/stimulus";
+import {HistoryService} from "../../javascript/mixins/useHistory";
+
+export default class extends Controller {
+
+    connect() {
+        this.event = null
+    }
+
+
+    selectTab(event) {
+        this.event = event
+        if (this.#parameter()) {
+            this.#updateURL()
+        }
+        this.element.dispatchEvent(new CustomEvent("tab-selected", {
+            bubbles: true,
+            detail: {data: {selectedTab: this.#pageId()}}
+        }))
+    }
+
+    #pageId() {
+        return this.event.currentTarget.getAttribute("data-tab-id")
+    }
+
+    #title() {
+        return this.event.currentTarget.getAttribute("data-tab-title")
+    }
+
+    #parameter() {
+        return this.event.currentTarget.getAttribute("data-url-parameter")
+    }
+
+
+    #url() {
+        return `?${this.#parameter()}=${this.#pageId()}`
+    }
+
+    #updateURL() {
+        (new HistoryService()).pushState({[this.#parameter()]: this.#pageId()}, this.#title(), this.#url());
+    }
+
+}
diff --git a/app/components/turbo_frame_component.rb b/app/components/turbo_frame_component.rb
new file mode 100644
index 000000000..d25322e15
--- /dev/null
+++ b/app/components/turbo_frame_component.rb
@@ -0,0 +1,39 @@
+# frozen_string_literal: true
+
+class TurboFrameComponent < ViewComponent::Base
+  include Turbo::FramesHelper
+
+  renders_one :loader
+
+  def initialize(id:, src: '', **html_options)
+    @id = id
+    @src = src
+    @html_options = html_options
+  end
+
+  def turbo_frame_html_options
+    out = {
+      data: {
+        'turbo-frame-error-target': 'frame',
+        action: 'turbo:before-fetch-response->turbo-frame-error#showError turbo:before-fetch-request->turbo-frame-error#hideError'
+      },
+      class: 'w-100'
+    }
+    if @html_options.nil?
+      @html_options = out
+    else
+      @html_options[:data] ||= {}
+      @html_options[:data].merge!(out[:data]) do |_, old, new|
+        "#{old} #{new}"
+      end
+      @html_options[:class] ||= ''
+      @html_options[:class] += " #{out[:class]}"
+    end
+
+    if @src && !@src.empty?
+      @html_options[:src] = @src
+    end
+
+    @html_options
+  end
+end
diff --git a/app/components/turbo_frame_component/turbo_frame_component.html.haml b/app/components/turbo_frame_component/turbo_frame_component.html.haml
new file mode 100644
index 000000000..1c5d0d9f5
--- /dev/null
+++ b/app/components/turbo_frame_component/turbo_frame_component.html.haml
@@ -0,0 +1,12 @@
+%div.d-flex.flex-column{data: {controller: 'turbo-frame-error'}}
+  = turbo_frame_tag @id, **turbo_frame_html_options do
+    %div.hide-if-loading
+      = content
+  %div.show-if-loading.my-auto.mx-auto
+    - if loader?
+      = loader
+    - else
+      %div.p-3
+        = render LoaderComponent.new(type: 'pulsing')
+  %div{'data-turbo-frame-error-target': 'errorMessage', style:'display: none; width: 100%'}
+    = render Display::AlertComponent.new(type:'danger')
\ No newline at end of file
diff --git a/app/javascript/application-esbuild.js b/app/javascript/application-esbuild.js
deleted file mode 100644
index b8b490239..000000000
--- a/app/javascript/application-esbuild.js
+++ /dev/null
@@ -1,5 +0,0 @@
-// Entry point for the build script in your package.json
-import '@hotwired/turbo-rails'
-import './controllers'
-
-Turbo.session.drive = false
\ No newline at end of file
diff --git a/app/javascript/application_esbuild.js b/app/javascript/application_esbuild.js
new file mode 100644
index 000000000..2ded13b5a
--- /dev/null
+++ b/app/javascript/application_esbuild.js
@@ -0,0 +1,17 @@
+// Entry point for the build script in your package.json
+
+
+import { Turbo } from "@hotwired/turbo-rails";
+import "./controllers";
+import "./component_controllers";
+
+Turbo.session.drive = false;
+Turbo.setConfirmMethod((message) => {
+    return new Promise((resolve, reject) => {
+        alertify.confirm(message, (e) => {
+            resolve(e)
+        })
+    })
+})
+
+
diff --git a/app/javascript/component_controllers/index.js b/app/javascript/component_controllers/index.js
new file mode 100644
index 000000000..27e9a6108
--- /dev/null
+++ b/app/javascript/component_controllers/index.js
@@ -0,0 +1,11 @@
+import { application } from '../controllers/application'
+
+import Tabs_container_component_controller
+  from '../../components/tabs_container_component/tabs_container_component_controller'
+
+import alert_component_controller from '../../components/display/alert_component/alert_component_controller'
+
+
+application.register('tabs-container', Tabs_container_component_controller)
+application.register('alert-component', alert_component_controller)
+
diff --git a/app/javascript/controllers/class_search_auto_complete_controller.js b/app/javascript/controllers/class_search_auto_complete_controller.js
new file mode 100644
index 000000000..831cfee41
--- /dev/null
+++ b/app/javascript/controllers/class_search_auto_complete_controller.js
@@ -0,0 +1,35 @@
+import OntoportalAutocompleteController from "./ontoportal_autocomplete_controller";
+
+// Connects to data-controller="class-search"
+export default class extends OntoportalAutocompleteController {
+    static values = {
+        spinnerSrc: String
+    }
+    connect() {
+        super.connect()
+    }
+
+    onFindValue(li) {
+        if (li == null) {
+            // User performs a search
+            let search = confirm("Class could not be found.\n\nPress OK to go to the Search page or Cancel to continue browsing");
+
+            if (search) {
+                jQuery("#search_keyword").val(jQuery("#search_box").val());
+                jQuery("#search_form").submit();
+                return
+            }
+        }
+
+        // Appropriate value selected
+        if (li.extra) {
+            let sValue = jQuery("#jump_to_concept_id").val()
+            Turbo.visit("/ontologies/" + jQuery(document).data().bp.ontology.acronym + "/?p=classes&conceptid=" + encodeURIComponent(sValue) + "&jump_to_nav=true")
+        }
+    }
+
+    onItemSelect(li) {
+        jQuery("#jump_to_concept_id").val(li.extra[0]);
+        this.onFindValue(li);
+    }
+}
diff --git a/app/javascript/controllers/container_splitter_controller.js b/app/javascript/controllers/container_splitter_controller.js
new file mode 100644
index 000000000..a05ff8810
--- /dev/null
+++ b/app/javascript/controllers/container_splitter_controller.js
@@ -0,0 +1,26 @@
+import { Controller } from "@hotwired/stimulus"
+import Split from "split.js";
+// Connects to data-controller="container-splitter"
+export default class extends Controller {
+  static targets = ['container']
+
+  connect() {
+    this.element.style.display= 'flex'
+    Split(this.containerTargets, {
+      elementStyle: function (dimension, size, gutterSize) {
+        return {
+          'flex-basis': 'calc(' + size + '% - ' + gutterSize + 'px)'
+        }
+      },
+      gutterStyle: function (dimension, gutterSize) {
+        return {
+          'flex-basis': gutterSize + 'px'
+        }
+      },
+      gutterSize: 10,
+      direction: "horizontal",
+      sizes: [30, 70],
+      cursor: "col-resize"
+    })
+  }
+}
diff --git a/app/javascript/controllers/history_controller.js b/app/javascript/controllers/history_controller.js
new file mode 100644
index 000000000..48518c64a
--- /dev/null
+++ b/app/javascript/controllers/history_controller.js
@@ -0,0 +1,17 @@
+import { Controller } from "@hotwired/stimulus"
+import { HistoryService } from "../mixins/useHistory";
+
+// Connects to data-controller="history"
+export default class extends Controller {
+    connect() {
+        this.history = new HistoryService()
+    }
+    updateURL(event) {
+        const { data } = event.detail
+        if (data !== undefined && Object.keys(data).length > 0) {
+            this.history.updateHistory(document.location.pathname + document.location.search, data)
+        }
+    }
+
+
+}
diff --git a/app/javascript/controllers/index.js b/app/javascript/controllers/index.js
index 273754277..5598ea18d 100644
--- a/app/javascript/controllers/index.js
+++ b/app/javascript/controllers/index.js
@@ -4,9 +4,33 @@
 
 import { application } from "./application"
 
+
+import ClassSearchAutoCompleteController from "./class_search_auto_complete_controller"
+application.register("class-search-auto-complete", ClassSearchAutoCompleteController)
+
+import ContainerSplitterController from "./container_splitter_controller"
+application.register("container-splitter", ContainerSplitterController)
+
+import HistoryController from "./history_controller"
+application.register("history", HistoryController)
+
 import LanguageChangeController from "./language_change_controller"
 application.register("language-change", LanguageChangeController)
 
-import ClipboardController from "./clipboard_controller"
-application.register("clipboard", ClipboardController)
+import LoadChartController from "./load_chart_controller"
+application.register("load-chart", LoadChartController)
+
+import OntologyViewerTabsController from "./ontology_viewer_tabs_controller"
+application.register("ontology-viewer-tabs", OntologyViewerTabsController)
+
+import OntoportalAutocompleteController from "./ontoportal_autocomplete_controller"
+application.register("ontoportal-autocomplete", OntoportalAutocompleteController)
+
+import SimpleTreeController from "./simple_tree_controller"
+application.register("simple-tree", SimpleTreeController)
+
+import TurboFrameController from "./turbo_frame_controller"
+application.register("turbo-frame", TurboFrameController)
 
+import TurboFrameErrorController from "./turbo_frame_error_controller"
+application.register("turbo-frame-error", TurboFrameErrorController)
diff --git a/app/javascript/controllers/language_change_controller.js b/app/javascript/controllers/language_change_controller.js
index b1fc34aa5..3a78bfcb2 100644
--- a/app/javascript/controllers/language_change_controller.js
+++ b/app/javascript/controllers/language_change_controller.js
@@ -3,45 +3,16 @@ import { Controller } from "@hotwired/stimulus"
 // Connects to data-controller="language-change"
 export default class extends Controller {
 
-
-  connect() {
-    // can be used for debugging
-    // console.log(this.element.value);
-    jQuery(document).data().bp.ont_viewer.lang = this.element.value;
-  }
-
   dispatchLangChangeEvent() {
-    jQuery(document).data().bp.ont_viewer.lang = this.element.value;
-
-    var url = window.location.href;
-    url = this.removeURLParameter(url, 'lang');
-    if (url.indexOf('?') > -1) {
-      url += '&lang=' + this.element.value;
-    } else {
-      url += '?lang=' + this.element.value;
-    }
-    jQuery.blockUI({ message: '<h1>Switching language...</h1>', showOverlay: true });
-    window.location.href = url;
-  }
-
-  removeURLParameter(url, parameter) {
-    //prefer to use l.search if you have a location/link object
-    var urlparts = url.split('?');
-
-    if (urlparts.length >= 2) {
-      var prefix = encodeURIComponent(parameter) + '=';
-      var pars = urlparts[1].split(/[&;]/g);
-
-      //reverse iteration as may be destructive
-      for (var i = pars.length; i-- > 0;) {
-        //idiom for string.startsWith
-        if (pars[i].lastIndexOf(prefix, 0) !== -1) {
-          pars.splice(i, 1);
+    this.element.dispatchEvent(new CustomEvent('lang_changed', {
+      bubbles: true,
+      cancelable: true,
+      detail: {
+        data: {
+          language: [this.element.value]
         }
       }
-      return urlparts[0] + (pars.length > 0 ? '?' + pars.join('&') : '');
-    }
-    return url;
-  }
+    }));
 
+  }
 }
diff --git a/app/javascript/controllers/load_chart_controller.js b/app/javascript/controllers/load_chart_controller.js
new file mode 100644
index 000000000..c55b5adbb
--- /dev/null
+++ b/app/javascript/controllers/load_chart_controller.js
@@ -0,0 +1,83 @@
+import { Controller } from '@hotwired/stimulus'
+import Chart from 'chart.js/auto'
+
+// Connects to data-controller="load-chart"
+export default class extends Controller {
+
+  static values = {
+    labels: Array,
+    datasets: Array,
+    type: { type: String, default: 'line' },
+    title: String,
+    indexAxis: { type: String, default: 'x' },
+    legend: { type: Boolean, default: false }
+  }
+
+  connect () {
+
+    const labels = this.labelsValue
+    const datasets = this.datasetsValue
+
+    const context = this.element.getContext('2d')
+
+    this.chart = new Chart(context, {
+      type: this.typeValue,
+      data: {
+        labels: labels,
+        datasets: datasets
+      },
+      options: {
+        indexAxis: this.indexAxisValue,
+        plugins: {
+          colors: {enabled: true},
+          title: {
+            display: this.hasTitleValue,
+            text: this.titleValue
+          },
+          legend: {
+            display: this.legendValue
+          }
+        },
+        responsive: true,
+        scales: {
+          x: this.#scales('x'),
+          y: this.#scales('y')
+        },
+      }
+    })
+
+  }
+
+  disconnect () {
+    this.chart.destroy()
+    this.chart = null
+  }
+
+  #scales (axe) {
+    if (this.indexAxisValue === axe) {
+      return {
+        border: {
+          display: false
+        },
+        grid: {
+          display: false
+        },
+        ticks: {
+          beginAtZero: false
+        }
+      }
+    } else {
+      return {
+        border: {
+          display: false
+        },
+        grid: {
+          display: false
+        },
+        ticks: {
+          display: false
+        }
+      }
+    }
+  }
+}
diff --git a/app/javascript/controllers/ontology_viewer_tabs_controller.js b/app/javascript/controllers/ontology_viewer_tabs_controller.js
new file mode 100644
index 000000000..0805678fb
--- /dev/null
+++ b/app/javascript/controllers/ontology_viewer_tabs_controller.js
@@ -0,0 +1,47 @@
+import { Controller } from "@hotwired/stimulus"
+import {HistoryService} from "../mixins/useHistory";
+
+
+export default class extends Controller {
+  
+  
+  static targets = ["languageSelector"]
+  static values = {
+    languageSections: Array
+  }
+
+  connect() {
+    this.changeEvent = this.languageSelectorTarget.addEventListener("change",  (e) => {
+      this.languageSectionsValue.forEach(p => {
+        let elem = document.getElementById("language_selector_hidden_"+p)
+        if(elem){
+          elem.value = e.target.value
+          elem.dispatchEvent(new Event('change'))
+        }
+      })
+    })
+  }
+
+  destroy(){
+    this.changeEvent.removeEventListener()
+  }
+
+  updateLanguageSelector(event) {
+    if(event.target.id === "ontology_viewer"){
+      let page = event.detail.data.selectedTab
+      this.#disableLanguageSelector(page)
+    }
+  }
+
+  #disableLanguageSelector(selectedSection){
+    if (this.languageSectionsValue.includes(selectedSection)){
+      this.languageSelectorTarget.removeAttribute("disabled")
+      this.languageSelectorTarget.style.display = 'block'
+    } else{
+      this.languageSelectorTarget.setAttribute("disabled", true)
+      this.languageSelectorTarget.style.display = 'none'
+    }
+  }
+
+
+}
diff --git a/app/javascript/controllers/ontoportal_autocomplete_controller.js b/app/javascript/controllers/ontoportal_autocomplete_controller.js
new file mode 100644
index 000000000..0bfbe0f8f
--- /dev/null
+++ b/app/javascript/controllers/ontoportal_autocomplete_controller.js
@@ -0,0 +1,70 @@
+import {Controller} from "@hotwired/stimulus"
+import {useBioportalAutoComplete} from "../mixins/useBioportalAutoComplete";
+// Connects to data-controller="ontoportal-autocomplete"
+export default class extends Controller {
+    static  values = {
+        objectTypes: String, default: 'class',
+        ontologyAcronym: String
+    }
+
+    connect() {
+        jQuery(document).ready(() => {
+            useBioportalAutoComplete(this.element, "/search/json_search/" + this.ontologyAcronymValue,{
+                extraParams: {objecttypes: this.objectTypesValue},
+                selectFirst: true,
+                lineSeparator: "~!~",
+                matchSubset: 0,
+                minChars: 1,
+                maxItemsToShow: 25,
+                onFindValue:  this.onFindValue.bind(this),
+                onItemSelect:  this.onItemSelect.bind(this),
+                formatItem: this.#formatItem.bind(this)
+            })
+        })
+    }
+
+    onFindValue(li){
+        throw new Error('You have to implement the method');
+    }
+
+    onItemSelect(li){
+        throw new Error('You have to implement the method');
+    }
+
+    #formatItem(row) {
+        let specials = /[.*+?|()\[\]{}\\]/g;
+        let keywords = this.element.value.trim().replace(specials, "\\$&").split(' ').join('|');
+        let regex = new RegExp('(' + keywords + ')', 'gi');
+        let matchType = "";
+        if (typeof row[2] !== "undefined" && row[2] !== "") {
+            matchType = " <span style='font-size:9px;color:blue;'>(" + row[2] + ")</span>";
+        }
+
+        if (row[0].match(regex) == null) {
+            let contents = row[6].split("\t");
+            let synonym = contents[0] || "";
+            synonym = synonym.split(";");
+            if (synonym.length !== 0) {
+                let matchSynonym = jQuery.grep(synonym, function (e) {
+                    return e.match(regex) != null;
+                });
+                row[0] = row[0] + " (synonym: " + matchSynonym.join(" ") + ")";
+            }
+        }
+        // Cleanup obsolete class tag before markup for search keywords.
+        let obsolete_prefix = "";
+        let obsolete_suffix = "";
+
+        if (row[0].indexOf("[obsolete]") !== -1) {
+            row[0] = row[0].replace("[obsolete]", "");
+            obsolete_prefix = "<span class='obsolete_class' title='obsolete class'>";
+            obsolete_suffix = "</span>";
+        }
+
+        // Markup the search keywords.
+        let row0_markup = row[0].replace(regex, "<b><span style='color:#006600;'>$1</span></b>");
+        return obsolete_prefix + row0_markup + matchType + obsolete_suffix;
+    }
+
+
+}
diff --git a/app/javascript/controllers/simple_tree_controller.js b/app/javascript/controllers/simple_tree_controller.js
new file mode 100644
index 000000000..d178b3bb3
--- /dev/null
+++ b/app/javascript/controllers/simple_tree_controller.js
@@ -0,0 +1,57 @@
+import {Controller} from "@hotwired/stimulus"
+import {useSimpleTree} from "../mixins/useSimpleTree";
+
+export default class extends Controller {
+  connect() {
+    this.simpleTreeCollection = useSimpleTree(this.element,
+        this.#afterClick.bind(this),
+        this.#afterAjaxError.bind(this),
+        this.#beforeAjax.bind(this)
+    )
+
+    this.#onClickTooManyChildrenInit()
+  }
+
+  #onClickTooManyChildrenInit(){
+    jQuery(".too_many_children_override").live('click', (event) =>  {
+      event.preventDefault();
+      let result = jQuery(event.target).closest("ul");
+      result.html("<img src='/images/tree/spinner.gif'>");
+      jQuery.ajax({
+        url: jQuery(event.target).attr('href'),
+        context: result,
+        success: function (data) {
+          this.html(data);
+          this.simpleTreeCollection.get(0).setTreeNodes(this);
+        },
+        error: function () {
+          this.html("<div style='background: #eeeeee; padding: 5px; width: 80%;'>Problem getting children. <a href='" + jQuery(this).attr('href') + "' class='too_many_children_override'>Try again</a></div>");
+        }
+      });
+    });
+  }
+
+  #afterClick(node) {
+    const page_name = $(node.context).attr("data-bp-ont-page-name")
+    const conf = jQuery(document).data().bp.ont_viewer
+    const concept_id = jQuery(node).children("a").attr("id")
+    History.pushState({
+          p: "classes",
+          conceptid: concept_id
+        }, page_name + " | " + conf.org_site,
+        '?p=classes&conceptid=' + concept_id)
+  }
+
+  #afterAjaxError(node) {
+    this.simpleTreeCollection[0].option.animate = false;
+    this.simpleTreeCollection.get(0).nodeToggle(node.parent()[0]);
+    if (node.parent().children(".expansion_error").length === 0) {
+      node.parent().append("<span class='expansion_error'>Error, please try again");
+    }
+    this.simpleTreeCollection[0].option.animate = true;
+  }
+
+  #beforeAjax(node) {
+    node.parent().children(".expansion_error").remove();
+  }
+}
\ No newline at end of file
diff --git a/app/javascript/controllers/turbo_frame_controller.js b/app/javascript/controllers/turbo_frame_controller.js
new file mode 100644
index 000000000..41c67dd5d
--- /dev/null
+++ b/app/javascript/controllers/turbo_frame_controller.js
@@ -0,0 +1,31 @@
+import { Controller } from "@hotwired/stimulus"
+import { HistoryService } from "../mixins/useHistory";
+
+// Connects to data-controller="turbo-frame"
+export default class extends Controller {
+    static values = {
+        url: String,
+        placeHolder: { type: String, default: 'Nothing loaded' },
+    }
+    static targets = ['frame']
+
+    connect() {
+        this.frame = this.frameTarget
+    }
+
+    updateFrame(event) {
+        const { data } = event.detail
+        const values = Object.values(data)
+
+        // remove null and empty values
+        values.filter((value) => value !== "" || value !== undefined)
+
+        if (values.length === 0) {
+            this.frame.innerHTML = this.placeHolderValue
+        } else {
+            this.frame.innerHTML = ""
+            this.urlValue = new HistoryService().getUpdatedURL(this.urlValue, data)
+            this.frame.src = this.urlValue
+        }
+    }
+}
diff --git a/app/javascript/controllers/turbo_frame_error_controller.js b/app/javascript/controllers/turbo_frame_error_controller.js
new file mode 100644
index 000000000..782166bc5
--- /dev/null
+++ b/app/javascript/controllers/turbo_frame_error_controller.js
@@ -0,0 +1,47 @@
+import Turbo_frame_controller from "./turbo_frame_controller";
+
+// Connects to data-controller="turbo-frame-error"
+export default class extends Turbo_frame_controller {
+
+  static targets = ['frame', 'errorMessage']
+
+  hideError(){
+    this.#hideError()
+  }
+
+  showError(event) {
+    let response = event.detail.fetchResponse
+    if (!response.succeeded) {
+      event.preventDefault()
+      response = response.response.clone()
+      response.text().then(text => {
+          this.#hideContent()
+          this.#displayError(text)
+      })
+
+    }
+  }
+
+  #hideContent(){
+    $(this.frameTarget.firstElementChild).hide()
+  }
+
+  #displayError(error){
+    let el = document.createElement('div')
+    el.innerHTML = error
+
+    let styles = el.getElementsByTagName('style')
+    Array.from(styles).forEach(e => el.removeChild(e))
+
+    let body = el.querySelector('h1')
+    this.errorMessageTarget.firstElementChild.querySelector('.alert-message').innerHTML =  (body ? body.innerText : el.innerHTML)
+    $(this.errorMessageTarget).show()
+  }
+
+  #hideError(){
+    let count = this.errorMessageTarget.firstElementChild.childElementCount
+    if(count !== 0) {
+      $(this.errorMessageTarget).hide()
+    }
+  }
+}
diff --git a/app/javascript/mixins/useAjax.js b/app/javascript/mixins/useAjax.js
new file mode 100644
index 000000000..ec60ec784
--- /dev/null
+++ b/app/javascript/mixins/useAjax.js
@@ -0,0 +1,3 @@
+export default function useAjax(options){
+    return jQuery.ajax(options)
+}
\ No newline at end of file
diff --git a/app/javascript/mixins/useBioportalAutoComplete.js b/app/javascript/mixins/useBioportalAutoComplete.js
new file mode 100644
index 000000000..b54728137
--- /dev/null
+++ b/app/javascript/mixins/useBioportalAutoComplete.js
@@ -0,0 +1,3 @@
+export function useBioportalAutoComplete(element, endpointUrl, options) {
+    jQuery(element).bioportal_autocomplete(endpointUrl, options)
+}
\ No newline at end of file
diff --git a/app/javascript/mixins/useHistory.js b/app/javascript/mixins/useHistory.js
new file mode 100644
index 000000000..ce895f1a6
--- /dev/null
+++ b/app/javascript/mixins/useHistory.js
@@ -0,0 +1,71 @@
+export class HistoryService {
+
+    unWantedData = ['turbo', 'controller', 'target', 'value', 'action']
+
+
+    constructor() {
+        this.history = window.history
+        this.state  = {data: {}}
+    }
+
+    pushState(data, title, url) {
+        this.history.pushState(data, title, url)
+        this.state = {data: data}
+    }
+
+    getState() {
+        return this.state
+    }
+
+    updateHistory(currentUrl, newData) {
+        const newUrl = this.getUpdatedURL(currentUrl, newData)
+        const newState = this.#initStateFromUrl(newUrl)
+        this.pushState(newState, newState.title, newUrl)
+    }
+
+    getUpdatedURL(currentUrl, newData) {
+        const base = document.location.origin
+        const url = new URL(currentUrl, base)
+
+        this.#updateURLFromState(url.searchParams, this.getState().data)
+        this.#addNewDataToUrl(url, newData)
+        return url.pathname + url.search
+    }
+
+    #addNewDataToUrl(url, newData) {
+        const wantedData = this.#filterUnwantedData(newData, this.unWantedData);
+
+        wantedData.forEach(([updatedParam, newValue]) => {
+            if (newValue === null) {
+                url.searchParams.delete(updatedParam)
+            } else {
+                newValue = Array.isArray(newValue) ? newValue : [newValue]
+                url.searchParams.set(updatedParam, newValue.join(','))
+            }
+        });
+    }
+
+    #filterUnwantedData(data, unWantedData) {
+        return Object.entries(data).filter(([key]) => !unWantedData.some(uw => key.toLowerCase().includes(uw.toLowerCase())))
+    }
+
+    #initStateFromUrl(currentUrl) {
+        const url = new URL(currentUrl, document.location.origin)
+        const urlParams = url.searchParams
+        let newState = this.getState().data
+        urlParams.forEach((newVal, key) => {
+            newState[key] = newVal
+        })
+        return newState
+    }
+
+    #updateURLFromState(urlParams, state) {
+        Object.entries(state).forEach(([key, val]) => {
+            if (key !== 'p'){
+                urlParams.set(key, val)
+            }
+        })
+    }
+
+
+}
\ No newline at end of file
diff --git a/app/javascript/mixins/useSimpleTree.js b/app/javascript/mixins/useSimpleTree.js
new file mode 100644
index 000000000..ef61bea2d
--- /dev/null
+++ b/app/javascript/mixins/useSimpleTree.js
@@ -0,0 +1,11 @@
+export function useSimpleTree(element, afterClick, afterAjaxError, beforeAjax ) {
+    return jQuery(element).simpleTree({
+        autoclose: false,
+        drag: false,
+        animate: true,
+        timeout: 20000,
+        afterClick: afterClick,
+        afterAjaxError: afterAjaxError,
+        beforeAjax: beforeAjax
+    });
+}
\ No newline at end of file

From b440e5aec77cf0603a5816f66e50f8780e6743a6 Mon Sep 17 00:00:00 2001
From: Syphax <gs_bouazzouni@esi.dz>
Date: Sat, 12 Oct 2024 16:00:02 +0200
Subject: [PATCH 03/14] add concept show action

---
 app/controllers/concepts_controller.rb | 18 +++++++++-
 app/views/concepts/_show.html.haml     | 48 ++++++++++++++++++++++++++
 config/routes.rb                       |  2 ++
 3 files changed, 67 insertions(+), 1 deletion(-)
 create mode 100644 app/views/concepts/_show.html.haml

diff --git a/app/controllers/concepts_controller.rb b/app/controllers/concepts_controller.rb
index b945f04e6..0c6c08bb5 100644
--- a/app/controllers/concepts_controller.rb
+++ b/app/controllers/concepts_controller.rb
@@ -6,6 +6,23 @@ class ConceptsController < ApplicationController
 
   layout 'ontology'
 
+  def show_concept
+    params[:id] = params[:id] ? params[:id] : params[:conceptid]
+
+    if params[:id].nil? || params[:id].empty?
+      render :text => "Error: You must provide a valid concept id"
+      return
+    end
+
+    # Note that find_by_acronym includes views by default
+    @ontology = LinkedData::Client::Models::Ontology.find_by_acronym(params[:ontology_id]).first
+    @concept = @ontology.explore.single_class({full: true}, params[:id])
+
+    not_found if @concept.nil?
+    gather_details
+    render :partial => 'show'
+  end
+
   def show
     params[:id] = params[:id] || params[:conceptid]
 
@@ -17,7 +34,6 @@ def show
     # find_by_acronym includes views by default
     @ontology = LinkedData::Client::Models::Ontology.find_by_acronym(params[:ontology]).first
     @submission = get_ontology_submission_ready(@ontology)
-    @ob_instructions = helpers.ontolobridge_instructions_template(@ontology)
 
     if request.xhr?
       display = params[:callback].eql?('load') ? { full: true } : { display: 'prefLabel' }
diff --git a/app/views/concepts/_show.html.haml b/app/views/concepts/_show.html.haml
new file mode 100644
index 000000000..f6b67d557
--- /dev/null
+++ b/app/views/concepts/_show.html.haml
@@ -0,0 +1,48 @@
+= render TurboFrameComponent.new(id: 'concept_show', data: { turbo: false }) do
+  - if @concept.id.eql?("bp_fake_root")
+    %div{:style => "padding: 100px 0; font-size: larger; font-weight: bold; text-align: center;"}
+      Use the "Jump To" to find a class and display details, visualization, notes, and mappings
+  - else
+    .cls-info-container
+      %ul.nav.nav-tabs.tabs
+        %li#details_top.nav-item
+          %button.nav-link.active.py-1{:href => "#details" , data:{'bs-toggle': 'tab', 'bs-target': '#details_content'}} Details
+        %li#visualization_top.nav-item
+          %button.nav-link.py-1{:href => "#visualization", data:{'bs-toggle': 'tab', 'bs-target': '#visualization_content'}} Visualization
+        %li#notes_top.nav-item
+          %button.nav-link.py-1{:href => "#notes", data:{'bs-toggle': 'tab', 'bs-target': '#notes_content'}}
+            Notes
+            %span#note_count_wrapper
+              (
+              %span#note_count= @notes.length
+              )
+        %li#mappings_top.nav-item
+          %button.nav-link.py-1{:href => "#mappings", data:{'bs-toggle': 'tab', 'bs-target': '#mappings_content'}}
+            Class Mappings (
+            %span#mapping_count= @mappings.size
+            )
+        - if $PURL_ENABLED
+          = link_to("#classPermalinkModal", class: "class-permalink nav-link", title: "Get a permanent link to this class", aria: {label: "Get a permanent link to this class"}, data: {toggle: "modal", current_purl: "#{@current_purl}"}) do
+            %i{class: "fas fa-link", aria: {hidden: "true"}}
+      #contents.tab-content
+        #details_content.tab-pane.active.show
+          = render :partial =>'/concepts/details'
+        #visualization_content.tab-pane
+          = render :partial =>'/concepts/biomixer'
+        #notes_content.tab-pane
+          = render :partial =>'/notes/list'
+        #mappings_content.tab-pane
+          = render :partial => '/mappings/concept_mappings'
+
+:javascript
+  jQuery(document).ready(function(){
+
+    jQuery("#classPermalinkModal").on("shown.bs.modal", function (e) {
+      var currentPurl = jQuery("a.class-permalink").data("current-purl");
+      jQuery("#purl_input").val(currentPurl);
+    })
+
+    jQuery("#purl_input").on("click", function () {
+      jQuery(this).select();
+    });
+  });
diff --git a/config/routes.rb b/config/routes.rb
index 8de14dbbc..61047091a 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -19,6 +19,8 @@
 
   resources :concepts
 
+  get 'ontologies/:ontology_id/concepts', to: 'concepts#show_concept'
+
   resources :ontologies do
     resources :submissions
   end

From d353339385621e82b9fa0a8febf22bdb3b7c2f17 Mon Sep 17 00:00:00 2001
From: Syphax <gs_bouazzouni@esi.dz>
Date: Sat, 12 Oct 2024 16:01:39 +0200
Subject: [PATCH 04/14] remove not used js code

---
 app/assets/javascripts/bioportal.js.erb | 16 ----------------
 app/assets/javascripts/bp_notes.js      | 13 +------------
 2 files changed, 1 insertion(+), 28 deletions(-)

diff --git a/app/assets/javascripts/bioportal.js.erb b/app/assets/javascripts/bioportal.js.erb
index 1decff1d5..8033fab9c 100644
--- a/app/assets/javascripts/bioportal.js.erb
+++ b/app/assets/javascripts/bioportal.js.erb
@@ -15,22 +15,6 @@ var cache = new Object();
 var que= new Array();
 var queIndex = 0;
 var thread=0;
-var currentOntology;
-var currentConcept;
-
-    function setOntology(ontology){
-        currentOntology = ontology;
-    }
-    function setConcept(concept){
-        currentConcept = concept;
-    }
-
-    function getOntology(){
-        return currentOntology;
-    }
-    function getConcept(){
-        return currentConcept;
-    }
 
 // Invalidate and Refetch
   function refreshCache(nodeID){
diff --git a/app/assets/javascripts/bp_notes.js b/app/assets/javascripts/bp_notes.js
index 29c0a1248..b3e8d2888 100644
--- a/app/assets/javascripts/bp_notes.js
+++ b/app/assets/javascripts/bp_notes.js
@@ -38,7 +38,7 @@ function setupNotesFacebox() {
       jQuery(this).facebox();
       jQuery(this).data().faceboxInit = true;
     }
-  });;
+  })
 }
 
 function setupNotesFaceboxSizing() {
@@ -118,17 +118,6 @@ function bindReplySaveClick() {
   });
 }
 
-function validateReply(button) {
-
-}
-
-function validateNote(button) {
-
-}
-
-function validateProposal(button) {
-
-}
 
 var displayError = function(button) {
   jQuery(button).parent().children(".reply_status").html("Error, please try again");

From 317c380b5de22166336f3538c51efbbce9fb1a1f Mon Sep 17 00:00:00 2001
From: Syphax <gs_bouazzouni@esi.dz>
Date: Sat, 12 Oct 2024 16:02:57 +0200
Subject: [PATCH 05/14] use load-chart stimulus controller to show the Visits
 chart

---
 app/assets/javascripts/ontologies.js   | 50 --------------------------
 app/helpers/ontologies_helper.rb       | 19 ++++++++++
 app/views/ontologies/_visits.html.haml |  3 +-
 3 files changed, 21 insertions(+), 51 deletions(-)

diff --git a/app/assets/javascripts/ontologies.js b/app/assets/javascripts/ontologies.js
index 6d83802b9..2daa151b4 100644
--- a/app/assets/javascripts/ontologies.js
+++ b/app/assets/javascripts/ontologies.js
@@ -1,55 +1,5 @@
 /* Ontology viewing */
 
-jQuery('.ontologies.show').ready(function() {
-
-  var ontologyVisitsChartCanvas = document.getElementById('visits_chart');
-
-  if (ontologyVisitsChartCanvas) {
-    var labels = JSON.parse(ontologyVisitsChartCanvas.dataset.labels);
-    var visits = JSON.parse(ontologyVisitsChartCanvas.dataset.visits);
-    var context = ontologyVisitsChartCanvas.getContext('2d');
-
-    var ontologyVisitsChart = new Chart(context, {
-      type: 'line',
-      data: {
-        labels: labels,
-        datasets: [{
-          label: 'Visits',
-          data: visits,
-          backgroundColor: 'rgba(151, 187, 205, 0.2)',
-          borderColor: 'rgba(151, 187, 205, 1)',
-          pointBorderColor: 'rgba(151, 187, 205, 1)',
-          pointBackgroundColor: 'rgba(151, 187, 205, 1)',
-        }]
-      },      
-      options: { 
-        responsive: true,
-        legend: {
-          display: false
-        },
-        scales: {
-          yAxes: [{
-            ticks: {
-              beginAtZero: false,
-              callback: function(value, index, values) {
-                return numberWithCommas(value);
-              }
-            }
-          }]
-        },
-        tooltips: {
-          displayColors: false,
-          callbacks: {
-            label: function(tooltipItem, data) {
-              return numberWithCommas(tooltipItem.yLabel);
-            }
-          }
-        }
-      }
-    });
-  }
-});
-
 /* Ontology creation & editing */
 
 function hideAllRestrictions() {
diff --git a/app/helpers/ontologies_helper.rb b/app/helpers/ontologies_helper.rb
index e255fdedd..42b52dfc7 100644
--- a/app/helpers/ontologies_helper.rb
+++ b/app/helpers/ontologies_helper.rb
@@ -156,6 +156,25 @@ def visits_data(ontology = nil)
   def acronyms(ontologies)
     ontologies.present? ? ontologies.map { |ont| ont.acronym } : []
   end
+  def visits_chart_dataset(visits_data)
+    visits_chart_dataset_array({'Visits': visits_data})
+  end
+
+  def visits_chart_dataset_array(visits_data, fill: true)
+    visits_data = visits_data.map do |label , x|
+      {
+        label: label,
+        data: x,
+        borderWidth: 2,
+        borderRadius: 5,
+        borderSkipped: false,
+        cubicInterpolationMode: 'monotone',
+        tension: 0.4,
+        fill: fill
+      }
+    end
+    visits_data.to_json
+  end
 
   def change_requests_enabled?(ontology_acronym)
     return false unless Rails.configuration.change_request[:ontologies].present?
diff --git a/app/views/ontologies/_visits.html.haml b/app/views/ontologies/_visits.html.haml
index 33935596b..56a9594ce 100644
--- a/app/views/ontologies/_visits.html.haml
+++ b/app/views/ontologies/_visits.html.haml
@@ -1,4 +1,5 @@
 - if visits_data(@ontology)
-  %canvas#visits_chart{data: {labels: @visits_data[:labels].last(13), visits: @visits_data[:visits].last(13)}}
+  %canvas#visits_chart{data: {controller:'load-chart' , 'load-chart-labels-value': @visits_data[:labels].last(13),
+                              'load-chart-datasets-value': visits_chart_dataset(@visits_data[:visits].last(13))}}
 - else
   %p.font-italic= "We are still collecting data for #{@ontology.acronym}"
\ No newline at end of file

From ec94ae78499028c534f886fa0c72b015e58a0af1 Mon Sep 17 00:00:00 2001
From: Syphax <gs_bouazzouni@esi.dz>
Date: Sat, 12 Oct 2024 16:09:41 +0200
Subject: [PATCH 06/14] replace application-esbuild call with default
 application call, and split with npm

---
 app/controllers/ontologies_controller.rb | 2 --
 app/views/layouts/_header.html.erb       | 3 ---
 app/views/layouts/angular.html.erb       | 2 --
 app/views/layouts/appliance.html.haml    | 2 --
 app/views/layouts/application.html.erb   | 3 +--
 app/views/layouts/popup.html.erb         | 1 -
 6 files changed, 1 insertion(+), 12 deletions(-)

diff --git a/app/controllers/ontologies_controller.rb b/app/controllers/ontologies_controller.rb
index aa8fadeed..6fc48fa41 100644
--- a/app/controllers/ontologies_controller.rb
+++ b/app/controllers/ontologies_controller.rb
@@ -266,8 +266,6 @@ def show
       end
     end
 
-    @ob_instructions = helpers.ontolobridge_instructions_template(@ontology)
-
     # Retrieve submissions in descending submissionId order (should be reverse chronological order)
     @submissions = @ontology.explore.submissions.sort {|a,b| b.submissionId.to_i <=> a.submissionId.to_i } || []
     LOG.add :error, "No submissions for ontology: #{@ontology.id}" if @submissions.empty?
diff --git a/app/views/layouts/_header.html.erb b/app/views/layouts/_header.html.erb
index a800a46e7..52a3d5a15 100644
--- a/app/views/layouts/_header.html.erb
+++ b/app/views/layouts/_header.html.erb
@@ -26,17 +26,14 @@
   <%= stylesheet_link_tag "application" %>
 
   <!-- JavaScript -->
-  <%= javascript_include_tag "application-esbuild", "data-turbo-track": "reload", type: "module" %>
   <%= javascript_include_tag "vendor" %>
   <%= javascript_include_tag "//cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.min.js" %>
   <%= javascript_include_tag "//ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js" %>
-  <%= javascript_include_tag "//unpkg.com/split.js/dist/split.min.js" %>
 
   <script>
     jQuery(document).data({bp: {config: <%=bp_config_json.html_safe%>, user: <%=(session[:user] || {}).to_hash.to_json.html_safe%>}});
     jQuery(document).data().bp.ontology = <%=@ontology.to_json.html_safe%> || {};
     jQuery(document).data().bp.submission_latest = <%=@submission_latest.to_json.html_safe%> || {};
-    jQuery(document).data().bp.ontolobridge_ontologies = <%=$NEW_TERM_REQUEST_ONTOLOGIES.to_json.html_safe%> || [];
     jQuery(document).data().bp.ont_viewer = {};
     jQuery(document).data().bp.ont_chart = {};
   </script>
diff --git a/app/views/layouts/angular.html.erb b/app/views/layouts/angular.html.erb
index 2b1704a71..8b4da096e 100644
--- a/app/views/layouts/angular.html.erb
+++ b/app/views/layouts/angular.html.erb
@@ -33,12 +33,10 @@
   <%= stylesheet_link_tag "application" %>
 </head>
 <body class="<%= controller_name %> <%= action_name %> d-flex flex-column h-100">
-  <%=javascript_include_tag "application-esbuild", "data-turbo-track": "reload", type: "module" %>
   <%=javascript_include_tag "vendor"%>
   <%=javascript_include_tag "//cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.min.js"%>
   <%=javascript_include_tag "//cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.1/Chart.min.js"%>
   <%=javascript_include_tag "//ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"%>
-  <%=javascript_include_tag "//unpkg.com/split.js/dist/split.min.js"%>
   <script>
     jQuery(document).data({bp: {config: <%=bp_config_json.html_safe%>, user: <%=(session[:user] || {}).to_hash.to_json.html_safe%>}});
     jQuery(document).data().bp.ontology = <%=@ontology.to_json.html_safe%> || {};
diff --git a/app/views/layouts/appliance.html.haml b/app/views/layouts/appliance.html.haml
index fc6511aaa..ee0de53a7 100644
--- a/app/views/layouts/appliance.html.haml
+++ b/app/views/layouts/appliance.html.haml
@@ -14,11 +14,9 @@
     = stylesheet_link_tag "https://use.fontawesome.com/releases/v5.2.0/css/all.css", integrity: "sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ", crossorigin: "anonymous"
     = stylesheet_link_tag "application", media: "all"
 
-    = javascript_include_tag "application-esbuild", "data-turbo-track": "reload", type: "module"
     = javascript_include_tag "vendor"
     = javascript_include_tag "//cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.min.js"
     = javascript_include_tag "//ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"
-    = javascript_include_tag "//unpkg.com/split.js/dist/split.min.js"
 
     %script
       jQuery(document).data({bp: {config: #{bp_config_json.html_safe}, user: #{(session[:user] || {}).to_hash.to_json.html_safe}}});
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 64ae08bb0..0ce8a5805 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -3,8 +3,7 @@
 <head>
   <title>BioportalWebUi</title>
   <%= stylesheet_link_tag    "application", :media => "all" %>
-  <%= javascript_include_tag "application-esbuild", "data-turbo-track": "reload", type: "module" %>
-  <%= javascript_include_tag "application"%>
+  <%= javascript_include_tag "application", "data-turbo-track": "reload"%>
   <%= csrf_meta_tags %>
 </head>
 <body class="<%= controller_name %> <%= action_name %>">
diff --git a/app/views/layouts/popup.html.erb b/app/views/layouts/popup.html.erb
index 3d56aa92a..eba7ebc41 100644
--- a/app/views/layouts/popup.html.erb
+++ b/app/views/layouts/popup.html.erb
@@ -14,7 +14,6 @@
   <%= javascript_include_tag "//cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.min.js" %>
   <%= javascript_include_tag "//cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.1/Chart.min.js" %>
   <%= javascript_include_tag "//ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js" %>
-  <%= javascript_include_tag "//unpkg.com/split.js/dist/split.min.js" %>
   <script>
     jQuery(document).data({bp: {config: <%=bp_config_json.html_safe%>, user: <%=(session[:user] || {}).to_hash.to_json.html_safe%>}});
     jQuery(document).data().bp.ontology = <%=@ontology.to_json.html_safe%> || {};

From 6a5218a3cde69d4b5cb54f6e19f19ea1fb19cbfd Mon Sep 17 00:00:00 2001
From: Syphax <gs_bouazzouni@esi.dz>
Date: Sat, 12 Oct 2024 16:10:59 +0200
Subject: [PATCH 07/14] move ontology viewer sections (properties, mappings,
 widget, ..) under a turbo frame

---
 app/views/mappings/_count.html.haml       |   5 +
 app/views/ontologies/_mappings.html.haml  |   5 +-
 app/views/ontologies/_metadata.html.haml  | 265 +++++++-------
 app/views/ontologies/_widgets.html.haml   | 416 +++++++++++-----------
 app/views/ontologies/properties.html.haml | 155 ++++----
 5 files changed, 421 insertions(+), 425 deletions(-)

diff --git a/app/views/mappings/_count.html.haml b/app/views/mappings/_count.html.haml
index 370f88d4e..4bfc4eefa 100644
--- a/app/views/mappings/_count.html.haml
+++ b/app/views/mappings/_count.html.haml
@@ -17,3 +17,8 @@
                       class: 'facebox')
           %td
             = number_with_delimiter(mapping_count[:count], delimiter: ',')
+
+:javascript
+  $(document).ready(() => {
+    $("#mapping_count_table a.facebox").facebox()
+  })
diff --git a/app/views/ontologies/_mappings.html.haml b/app/views/ontologies/_mappings.html.haml
index f3a5a6a71..71f656cf1 100644
--- a/app/views/ontologies/_mappings.html.haml
+++ b/app/views/ontologies/_mappings.html.haml
@@ -1,2 +1,3 @@
-#mappings_content
-  = render :partial => 'mappings/count'
+= turbo_frame_tag 'mappings', data: {turbo: false} do
+  #mappings_content
+    = render :partial => 'mappings/count'
diff --git a/app/views/ontologies/_metadata.html.haml b/app/views/ontologies/_metadata.html.haml
index b166fda19..98c106b5a 100644
--- a/app/views/ontologies/_metadata.html.haml
+++ b/app/views/ontologies/_metadata.html.haml
@@ -1,146 +1,145 @@
-%div.ont-metadata
-
-  -# Details pane
-  %section.ont-metadata-card.ont-details-card
-    %header.pb-2.fw-bold Details
-    %table.table.table-sm
-      %tr.border-top
-        %td Acronym
-        %td= @ontology.acronym
-      %tr
-        %td Visibility
-        %td= strip_links(visibility_link(@ontology))
-      - if @ontology.viewing_restricted?
-        %tr
-          %td Viewing restriction
-          %td= @ontology.viewingRestriction.capitalize
-      - unless @ontology.viewOf.nil?
-        %tr
-          %td View of ontology
-          %td
-            - ont_parent_acronym = @ontology.viewOf.split('/').last
-            - if Rails.configuration.settings.purl[:enabled]
-              - ont_url = @ontology.purl.sub(@ontology.acronym, ont_parent_acronym)
-            - else
-              - ont_url = @ontology.links['ui'].sub(@ontology.acronym, ont_parent_acronym)
-            = link_to(ont_parent_acronym, ont_url)
-      - unless @submission_latest.nil?
-        %tr
-          %td Description
-          %td= sanitize(@submission_latest.description)
-        %tr
-          %td Status
-          %td= @submission_latest.status.capitalize unless @submission_latest.status.nil?
-        %tr
-          %td Format
-          %td= @submission_latest.hasOntologyLanguage
-        %tr
-          %td Contact
-          %td= raw @submission_latest.contact.map {|c| [c.name, c.email].join(", ") if c.member?(:name) && c.member?(:email)}.join("<br/>")
-      - categories_hash = LinkedData::Client::Models::Category.all_to_hash
-      - categories = @ontology.hasDomain
-      - unless categories.empty?
-        %tr
-          %td Categories
-          %td= categories.map {|c| categories_hash[c].name}.sort.join(", ")
-      - groups_hash = LinkedData::Client::Models::Group.all_to_hash
-      - groups = @ontology.group
-      - unless groups.empty?
-        %tr
-          %td Groups
-          %td= groups.map {|g| groups_hash[g].name}.sort.join(", ")
-      - unless @submission_latest.naturalLanguage.empty?
+= turbo_frame_tag 'summary', data: {turbo: false} do
+  %div.ont-metadata.py-3
+    -# Details pane
+    %section.ont-metadata-card.ont-details-card
+      %header.pb-2.fw-bold Details
+      %table.table.table-sm
+        %tr.border-top
+          %td Acronym
+          %td= @ontology.acronym
         %tr
-          %td Language
-          %td= abbreviations_to_languages(@submission_latest.naturalLanguage).join(", ")
-      = raw additional_details
-
-  -# Submissions pane
-  %section.ont-metadata-card.ont-subs-card
-    %div.ont-section-toolbar
-      %header.pb-2.fw-bold Submissions
-      - if @ontology.admin?(session[:user])
-        = link_to(new_ontology_submission_path(@ontology.acronym), "aria-label": "Add submission", title: "Add submission") do
-          %i.fas.fa-lg.fa-plus-circle{"aria-hidden": "true", style: "margin-left: 0.75rem;"}
-        - unless (@submission_latest.nil? || (@submission_latest.respond_to?(:status) && @submission_latest.status == 404))
-          = link_to(edit_ontology_submission_path(@ontology.acronym, @submission_latest.submissionId), "aria-label": "Edit latest submission", title: "Edit latest submission") do
-            %i.fas.fa-user-edit{"aria-hidden": "true", style: "margin-left: 0.5rem;"}
-    = render partial: "submissions"
-
-  -# Views pane (don't show if the ontology is a view - we don't allow views of views).
-  - unless @ontology.view?
-    %section.ont-metadata-card.ont-views-card
-      %div.ont-section-toolbar
-        %header.pb-2.fw-bold= "Views of #{@ontology.acronym}"
-        = new_view_link
-      - if @views.empty?
-        %p.font-italic= "No views of #{@ontology.acronym} available"
-      - else
-        %div.border-top
-          %dl
-            - @view_decorators.each do |view_decorator|
-              %dt= view_decorator.linked_name
-              %dd= view_decorator.description
-      
-  %div.right-hand-content
-    
-    -# Metrics pane
-    %section.ont-metadata-card.ont-metrics-card
-      %div.ont-section-toolbar
-        %header.pb-2.fw-bold Metrics
-        = link_to(Rails.configuration.settings.links[:metrics], target: "_blank", "aria-label": "View individual metrics definitions", title: "View individual metrics definitions") do
-          %i.fas.fa-lg.fa-question-circle{"aria-hidden": "true", style: "margin-left: 0.5rem"}
-      - if @metrics.nil? || (@metrics.is_a?(Array) && @metrics.empty?) || (@metrics.respond_to?(:status) && @metrics.status == 404)
-        %p.font-italic= "We have not yet calculated metrics for #{@ontology.acronym}"
-      - else
-        %table.table.table-sm
-          %tr.border-top
-            %td Classes
-            %td{style: "text-align: right"}= number_with_delimiter(@metrics.classes)
+          %td Visibility
+          %td= strip_links(visibility_link(@ontology))
+        - if @ontology.viewing_restricted?
+          %tr
+            %td Viewing restriction
+            %td= @ontology.viewingRestriction.capitalize
+        - unless @ontology.viewOf.nil?
           %tr
-            %td Individuals
-            %td= number_with_delimiter(@metrics.individuals)
+            %td View of ontology
+            %td
+              - ont_parent_acronym = @ontology.viewOf.split('/').last
+              - if Rails.configuration.settings.purl[:enabled]
+                - ont_url = @ontology.purl.sub(@ontology.acronym, ont_parent_acronym)
+              - else
+                - ont_url = @ontology.links['ui'].sub(@ontology.acronym, ont_parent_acronym)
+              = link_to(ont_parent_acronym, ont_url)
+        - unless @submission_latest.nil?
           %tr
-            %td Properties
-            %td= number_with_delimiter(@metrics.properties)
+            %td Description
+            %td= sanitize(@submission_latest.description)
           %tr
-            %td Maximum depth
-            %td= number_with_delimiter(@metrics.maxDepth)
+            %td Status
+            %td= @submission_latest.status.capitalize unless @submission_latest.status.nil?
           %tr
-            %td Maximum number of children
-            %td= number_with_delimiter(@metrics.maxChildCount)
+            %td Format
+            %td= @submission_latest.hasOntologyLanguage
           %tr
-            %td Average number of children
-            %td= number_with_delimiter(@metrics.averageChildCount)
+            %td Contact
+            %td= raw @submission_latest.contact.map {|c| [c.name, c.email].join(", ") if c.member?(:name) && c.member?(:email)}.join("<br/>")
+        - categories_hash = LinkedData::Client::Models::Category.all_to_hash
+        - categories = @ontology.hasDomain
+        - unless categories.empty?
           %tr
-            %td Classes with a single child
-            %td= number_with_delimiter(@metrics.classesWithOneChild)
+            %td Categories
+            %td= categories.map {|c| categories_hash[c].name}.sort.join(", ")
+        - groups_hash = LinkedData::Client::Models::Group.all_to_hash
+        - groups = @ontology.group
+        - unless groups.empty?
           %tr
-            %td Classes with more than 25 children
-            %td= number_with_delimiter(@metrics.classesWithMoreThan25Children)
+            %td Groups
+            %td= groups.map {|g| groups_hash[g].name}.sort.join(", ")
+        - unless @submission_latest.naturalLanguage.empty?
           %tr
-            %td Classes with no definition
-            %td= number_with_delimiter(@metrics.classesWithNoDefinition)
+            %td Language
+            %td= abbreviations_to_languages(@submission_latest.naturalLanguage).join(", ")
+        = raw additional_details
 
-    -# Visits pane
-    %section.ont-metadata-card.ont-analytics-card
+    -# Submissions pane
+    %section.ont-metadata-card.ont-subs-card
       %div.ont-section-toolbar
-        %header.pb-2.fw-bold Visits
-        - if visits_data(@ontology)
-          = link_to(@ontology.links["analytics"] + "?apikey=#{get_apikey}&format=csv", "aria-label": "Download as CSV", title: "Download as CSV") do
-            %i.fas.fa-lg.fa-download{"aria-hidden": "true", style: "margin-left: 0.5rem"}
-      = render partial: "visits"
+        %header.pb-2.fw-bold Submissions
+        - if @ontology.admin?(session[:user])
+          = link_to(new_ontology_submission_path(@ontology.acronym), "aria-label": "Add submission", title: "Add submission") do
+            %i.fas.fa-lg.fa-plus-circle{"aria-hidden": "true", style: "margin-left: 0.75rem;"}
+          - unless (@submission_latest.nil? || (@submission_latest.respond_to?(:status) && @submission_latest.status == 404))
+            = link_to(edit_ontology_submission_path(@ontology.acronym, @submission_latest.submissionId), "aria-label": "Edit latest submission", title: "Edit latest submission") do
+              %i.fas.fa-user-edit{"aria-hidden": "true", style: "margin-left: 0.5rem;"}
+      = render partial: "submissions"
 
-    -# Projects pane
-    %section.ont-metadata-card.ont-projects-card
-      %div.ont-section-toolbar
-        %header.pb-2.fw-bold= "Projects using #{@ontology.acronym}"
-        = link_to(new_project_path(), "aria-label": "Create new project", title: "Create new project") do
-          %i.fas.fa-lg.fa-plus-circle{"aria-hidden": "true", style: "margin-left: 0.5rem"}
-      - if @projects.empty?
-        %p.font-italic= "No projects using #{@ontology.acronym}"
-      - else
-        %div.border-top
-          - for project in @projects
-            %p= link_to(project.name, project_path(project.acronym))
+    -# Views pane (don't show if the ontology is a view - we don't allow views of views).
+    - unless @ontology.view?
+      %section.ont-metadata-card.ont-views-card
+        %div.ont-section-toolbar
+          %header.pb-2.fw-bold= "Views of #{@ontology.acronym}"
+          = new_view_link
+        - if @views.empty?
+          %p.font-italic= "No views of #{@ontology.acronym} available"
+        - else
+          %div.border-top
+            %dl
+              - @view_decorators.each do |view_decorator|
+                %dt= view_decorator.linked_name
+                %dd= view_decorator.description
+
+    %div.right-hand-content
+
+      -# Metrics pane
+      %section.ont-metadata-card.ont-metrics-card
+        %div.ont-section-toolbar
+          %header.pb-2.fw-bold Metrics
+          = link_to(Rails.configuration.settings.links[:metrics], target: "_blank", "aria-label": "View individual metrics definitions", title: "View individual metrics definitions") do
+            %i.fas.fa-lg.fa-question-circle{"aria-hidden": "true", style: "margin-left: 0.5rem"}
+        - if @metrics.nil? || (@metrics.is_a?(Array) && @metrics.empty?) || (@metrics.respond_to?(:status) && @metrics.status == 404)
+          %p.font-italic= "We have not yet calculated metrics for #{@ontology.acronym}"
+        - else
+          %table.table.table-sm
+            %tr.border-top
+              %td Classes
+              %td{style: "text-align: right"}= number_with_delimiter(@metrics.classes)
+            %tr
+              %td Individuals
+              %td= number_with_delimiter(@metrics.individuals)
+            %tr
+              %td Properties
+              %td= number_with_delimiter(@metrics.properties)
+            %tr
+              %td Maximum depth
+              %td= number_with_delimiter(@metrics.maxDepth)
+            %tr
+              %td Maximum number of children
+              %td= number_with_delimiter(@metrics.maxChildCount)
+            %tr
+              %td Average number of children
+              %td= number_with_delimiter(@metrics.averageChildCount)
+            %tr
+              %td Classes with a single child
+              %td= number_with_delimiter(@metrics.classesWithOneChild)
+            %tr
+              %td Classes with more than 25 children
+              %td= number_with_delimiter(@metrics.classesWithMoreThan25Children)
+            %tr
+              %td Classes with no definition
+              %td= number_with_delimiter(@metrics.classesWithNoDefinition)
+
+      -# Visits pane
+      %section.ont-metadata-card.ont-analytics-card
+        %div.ont-section-toolbar
+          %header.pb-2.fw-bold Visits
+          - if visits_data(@ontology)
+            = link_to(@ontology.links["analytics"] + "?apikey=#{get_apikey}&format=csv", "aria-label": "Download as CSV", title: "Download as CSV") do
+              %i.fas.fa-lg.fa-download{"aria-hidden": "true", style: "margin-left: 0.5rem"}
+        = render partial: "visits"
 
+      -# Projects pane
+      %section.ont-metadata-card.ont-projects-card
+        %div.ont-section-toolbar
+          %header.pb-2.fw-bold= "Projects using #{@ontology.acronym}"
+          = link_to(new_project_path(), "aria-label": "Create new project", title: "Create new project") do
+            %i.fas.fa-lg.fa-plus-circle{"aria-hidden": "true", style: "margin-left: 0.5rem"}
+        - if @projects.empty?
+          %p.font-italic= "No projects using #{@ontology.acronym}"
+        - else
+          %div.border-top
+            - for project in @projects
+              %p= link_to(project.name, project_path(project.acronym))
diff --git a/app/views/ontologies/_widgets.html.haml b/app/views/ontologies/_widgets.html.haml
index 6e47b3e67..794723bfa 100644
--- a/app/views/ontologies/_widgets.html.haml
+++ b/app/views/ontologies/_widgets.html.haml
@@ -1,212 +1,178 @@
+= turbo_frame_tag 'widgets', data: {turbo: false} do
+  - ont_uri = "/ontologies/#{@ontology.acronym}"
+  - get_code_prefix = ont_uri + '?p=widgets#TB_inline&height=400&width=600'
 
-- ont_uri = "/ontologies/#{@ontology.acronym}"
-- get_code_prefix = ont_uri + '?p=widgets#TB_inline&height=400&width=600'
-
-- if @ontology.metadata_only?
-  #widgets_content{:style => "padding: 1em;"}
-    %p
-      Widgets are only available for ontologies stored in #{$SITE}.
-- else
-  #widgets_content
-    %h5.pb-3 Add #{$ORG} Web Widgets to your site for #{@ontology.acronym}
-    %table#widget_table{width: "100%"}
-      %tr
-        %th
-          Widget type
-        %th
-          Widget demonstration
-      %tr
-        %td
-          %div.card
-            %div.card-body
-              %h5.card-title Jump To
-              %p.card-text Type a class name from #{@ontology.acronym} and jump to it in #{$SITE}
-              %a.btn.btn-info.thickbox{href: "#{get_code_prefix}&inlineId=jump".html_safe} Get code
-        %td
-          #bp_quick_jump
-          :javascript
-            var BP_SEARCH_SERVER = "#{$UI_URL}";
-            var BP_SITE = "#{$SITE}";
-            var BP_ORG = "#{$ORG}";
-            var BP_ontology_id = "#{@ontology.acronym}";
-          = javascript_include_tag "/javascripts/widgets/quick_jump.js"
-          #jump{:style => "display:none;"}
-            %h2 Step 2: Follow the Instructions
-            %hr/
-            .enable-lists
-              %ul
-                %li
-                  Download the
-                  %a.external.free{:href => "/javascripts/widgets/quick_jump.js", :rel => "nofollow", :title => "/javascripts/widgets/quick_jump.js"}
-                    %b quick_jump.js file
-                  and put it on your server
-                %li
-                  Copy the code below and paste it to your HTML page
-                %li
-                  %b Note:
-                  If you would like to use Quick Jump across multiple ontologies:
-                  %ul
-                    %li
-                      You can enter a comma-separated list of ontology ids:
-                      %br/
-                      var BP_ontology_id = "NCIt,SNOMEDCT";
-                    %li
-                      You can set the variable to 'all' to search all ontologies in #{$SITE}:
-                      %br/
-                      var BP_ontology_id = "all";
-                %li
-                  To include definitions in the Jump To drop-down, add the following variable in Javascript:
-                  %br/
-                  %pre var BP_include_definitions = true;
-                %li
-                  In the code that you just pasted, make sure to change the path to the quick_jump.js file to point to the location where you put the file (relative to your HTML file)
-                  %ul
-                    %li
-                      For example, if you put the quick_jump.js file in the same directory as your HTML file, this is the code you would use:
-                      %pre
-                        = preserve do
-                          :escaped
-                            <div id="bp_quick_jump"></div>
-                            <script type="text/javascript">
-                                var BP_ontology_id = "#{@ontology.acronym}";</script>
-                            <script src="quick_jump.js" type="text/javascript" charset="utf-8"></script>
-            %p
-              For more help visit
-              %a{:href => "http://bioontology.org/wiki/index.php/NCBO_Widgets#How_to_use_NCBO_Widgets", :target => "_blank"} NCBO Widget Wiki
-      %tr
-        %td
-          %div.card
-            %div.card-body
-              %h5.card-title Form Autocomplete
-              %p.card-text Fill your form fields with classes from #{@ontology.acronym}
-              %a.btn.btn-info.thickbox{href: "#{get_code_prefix}&inlineId=form".html_safe} Get code
-        %td
-          = javascript_include_tag "/javascripts/widgets/form_complete.js"
-          Example 1 (start typing the class name to get its full URI)
-          %br/
-          %input{:class => "bp_form_complete-#{CGI.escape(@ontology.acronym).sub('-', '%2d')}-uri", :name => "a", :size => "100", :type => "text"}/
-          %br/
-          Example 2 (get the ID for a class)
-          %br/
-          %input{:class => "bp_form_complete-#{CGI.escape(@ontology.acronym).sub('-', '%2d')}-shortid", :name => "b", :size => "100", :type => "text"}/
-          %br/
-          Example 3 (get the preferred name for a class)
-          %br/
-          %input{:class => "bp_form_complete-#{CGI.escape(@ontology.acronym).sub('-', '%2d')}-name", :name => "c", :size => "100", :type => "text"}/
-          #form{:style => "display:none;"}
-            .enable-lists
+  - if @ontology.metadata_only?
+    #widgets_content{:style => "padding: 1em;"}
+      %p
+        Widgets are only available for ontologies stored in #{$SITE}.
+  - else
+    #widgets_content
+      %h5.pb-3 Add #{$ORG} Web Widgets to your site for #{@ontology.acronym}
+      %table#widget_table{width: "100%"}
+        %tr
+          %th
+            Widget type
+          %th
+            Widget demonstration
+        %tr
+          %td
+            %div.card
+              %div.card-body
+                %h5.card-title Jump To
+                %p.card-text Type a class name from #{@ontology.acronym} and jump to it in #{$SITE}
+                %a.btn.btn-info.thickbox{href: "#{get_code_prefix}&inlineId=jump".html_safe} Get code
+          %td
+            #bp_quick_jump
+            :javascript
+              var BP_SEARCH_SERVER = "#{$UI_URL}";
+              var BP_SITE = "#{$SITE}";
+              var BP_ORG = "#{$ORG}";
+              var BP_ontology_id = "#{@ontology.acronym}";
+            = javascript_include_tag "/javascripts/widgets/quick_jump.js"
+            #jump{:style => "display:none;"}
               %h2 Step 2: Follow the Instructions
               %hr/
-              %ul
-                %li
-                  Download the
-                  %a.external.free{:href => "/javascripts/widgets/form_complete.js", :rel => "nofollow", :title => "/javascripts/widgets/form_complete.js"}
-                    %b form_complete.js file
-                  and put it on your server.
-                %li
-                  In the header for the page where you want the form field, include the
-                  %b form_complete.js
-                  file.
-                %li
-                  On your form, for the fields where you want to use the class-selection widget, specify the field's class in the following format:
-                  %code bp_form_complete-{ontology_id_list}-{value}
-                  %ul
-                    %li
-                      For example,
-                      %code bp_form_complete-NCIT-uri
-                      will use NCI Thesaurus (ontology id is NCIT) and will put the class URI in the field after the user selects the class from the pull-down list.
-                      %ul
-                        %li
-                          %b Note:
-                          In addition to single ontology ids, you can use a list:
-                          %br/
-                          %code bp_form_complete-NCIT,NCBITAXON-uri
-                        %li
-                          %b OR
-                          use 'all' to search across all #{$SITE} ontologies:
-                          %br/
-                          %code bp_form_complete-all-uri
-                        %li The autocomplete widget accesses ontology content from the latest version of the ontology.
-                    %li
-                      You can use the following parameters to select which value will be placed into the user-visible input field:
-                      %ul
-                        %li
-                          %code uri
-                          put the complete URI of the class (e.g.,
-                          = succeed ")" do
-                            %a.external.free{:href => @ontology.explore.classes["collection"].first.id, :rel => "nofollow", :title => "/visualize/39478/Common_Neoplasm"}
-                              = @ontology.explore.classes["collection"].first.id
-                        %li
-                          %code shortid
-                          put the short id of the class, as used in #{$SITE} (e.g., "Common_Neoplasm");
-                        %li
-                          %code name
-                          put the preferred name of the class (e.g., "Common Neoplasm");
-                %li
-                  In addition to the input element you defined, there are four hidden form elements that are created and then set when a user selects a class from the list. For example, if you create a field with this code:
-                  %ul
-                  %pre= h '<input type="text" name="a" class="bp_form_complete-all-uri" size="100"/>'
-              The 'name' attribute is used to create the four following fields (note how the 'a' from the name attribute is appended to the id attribute):
-              %ul
-                %li
-                  %pre= h '<input type="hidden" id="a_bioportal_preferred_name">'
-                %li
-                  %pre= h '<input type="hidden" id="a_bioportal_concept_id">'
-                %li
-                  %pre= h '<input type="hidden" id="a_bioportal_ontology_id">'
-                %li
-                  %pre= h '<input type="hidden" id="a_bioportal_full_id">'
-                %li
-                  Additional parameters are documented on the
-                  %a{:href => "http://bioontology.org/wiki/index.php/NCBO_Widgets#How_to_use_NCBO_Widgets", :target => "_blank"} NCBO Widget Wiki
+              .enable-lists
+                %ul
+                  %li
+                    Download the
+                    %a.external.free{:href => "/javascripts/widgets/quick_jump.js", :rel => "nofollow", :title => "/javascripts/widgets/quick_jump.js"}
+                      %b quick_jump.js file
+                    and put it on your server
+                  %li
+                    Copy the code below and paste it to your HTML page
+                  %li
+                    %b Note:
+                    If you would like to use Quick Jump across multiple ontologies:
+                    %ul
+                      %li
+                        You can enter a comma-separated list of ontology ids:
+                        %br/
+                        var BP_ontology_id = "NCIt,SNOMEDCT";
+                      %li
+                        You can set the variable to 'all' to search all ontologies in #{$SITE}:
+                        %br/
+                        var BP_ontology_id = "all";
+                  %li
+                    To include definitions in the Jump To drop-down, add the following variable in Javascript:
+                    %br/
+                    %pre var BP_include_definitions = true;
+                  %li
+                    In the code that you just pasted, make sure to change the path to the quick_jump.js file to point to the location where you put the file (relative to your HTML file)
+                    %ul
+                      %li
+                        For example, if you put the quick_jump.js file in the same directory as your HTML file, this is the code you would use:
+                        %pre
+                          = preserve do
+                            :escaped
+                              <div id="bp_quick_jump"></div>
+                              <script type="text/javascript">
+                                  var BP_ontology_id = "#{@ontology.acronym}";</script>
+                              <script src="quick_jump.js" type="text/javascript" charset="utf-8"></script>
               %p
                 For more help visit
                 %a{:href => "http://bioontology.org/wiki/index.php/NCBO_Widgets#How_to_use_NCBO_Widgets", :target => "_blank"} NCBO Widget Wiki
-      %tr
-        %td
-          %div.card
-            %div.card-body
-              %h5.card-title Visualization
-              %p.card-text Display a visualization for a given class in #{@ontology.acronym}
-              %a.btn.btn-info.thickbox{href: "#{get_code_prefix}&inlineId=vis".html_safe} Get code
-        %td
-          #bp_vis_container
-            <iframe frameborder="0" src="/widgets/visualization?ontology=#{@ontology.acronym}&class=#{CGI.escape(@ontology.explore.classes["collection"].first.id)}&apikey=#{$APIKEY}" width="100%" height="350"></iframe>
-          #vis{:style => "display:none;"}
-            %h2 Step 2: Follow the Instructions
-            %hr/
-            %b Copy the code below and paste it to your HTML page
+        %tr
+          %td
+            %div.card
+              %div.card-body
+                %h5.card-title Form Autocomplete
+                %p.card-text Fill your form fields with classes from #{@ontology.acronym}
+                %a.btn.btn-info.thickbox{href: "#{get_code_prefix}&inlineId=form".html_safe} Get code
+          %td
+            = javascript_include_tag "/javascripts/widgets/form_complete.js"
+            Example 1 (start typing the class name to get its full URI)
             %br/
+            %input{:class => "bp_form_complete-#{CGI.escape(@ontology.acronym).sub('-', '%2d')}-uri", :name => "a", :size => "100", :type => "text"}/
             %br/
-            %pre
-              = preserve do
-                :escaped
-                  <iframe frameborder="0" src="/widgets/visualization?ontology=#{@ontology.acronym}&class=#{CGI.escape(@ontology.explore.classes["collection"].first.id)}&apikey=YOUR_API_KEY"></iframe>
-            %p
-              For more help visit
-              %a{:href => "http://bioontology.org/wiki/index.php/NCBO_Widgets#How_to_use_NCBO_Widgets", :target => "_blank"} NCBO Widget Wiki
-
-      - unless @ontology.flat?
+            Example 2 (get the ID for a class)
+            %br/
+            %input{:class => "bp_form_complete-#{CGI.escape(@ontology.acronym).sub('-', '%2d')}-shortid", :name => "b", :size => "100", :type => "text"}/
+            %br/
+            Example 3 (get the preferred name for a class)
+            %br/
+            %input{:class => "bp_form_complete-#{CGI.escape(@ontology.acronym).sub('-', '%2d')}-name", :name => "c", :size => "100", :type => "text"}/
+            #form{:style => "display:none;"}
+              .enable-lists
+                %h2 Step 2: Follow the Instructions
+                %hr/
+                %ul
+                  %li
+                    Download the
+                    %a.external.free{:href => "/javascripts/widgets/form_complete.js", :rel => "nofollow", :title => "/javascripts/widgets/form_complete.js"}
+                      %b form_complete.js file
+                    and put it on your server.
+                  %li
+                    In the header for the page where you want the form field, include the
+                    %b form_complete.js
+                    file.
+                  %li
+                    On your form, for the fields where you want to use the class-selection widget, specify the field's class in the following format:
+                    %code bp_form_complete-{ontology_id_list}-{value}
+                    %ul
+                      %li
+                        For example,
+                        %code bp_form_complete-NCIT-uri
+                        will use NCI Thesaurus (ontology id is NCIT) and will put the class URI in the field after the user selects the class from the pull-down list.
+                        %ul
+                          %li
+                            %b Note:
+                            In addition to single ontology ids, you can use a list:
+                            %br/
+                            %code bp_form_complete-NCIT,NCBITAXON-uri
+                          %li
+                            %b OR
+                            use 'all' to search across all #{$SITE} ontologies:
+                            %br/
+                            %code bp_form_complete-all-uri
+                          %li The autocomplete widget accesses ontology content from the latest version of the ontology.
+                      %li
+                        You can use the following parameters to select which value will be placed into the user-visible input field:
+                        %ul
+                          %li
+                            %code uri
+                            put the complete URI of the class (e.g.,
+                            = succeed ")" do
+                              %a.external.free{:href => @ontology.explore.classes["collection"].first.id, :rel => "nofollow", :title => "/visualize/39478/Common_Neoplasm"}
+                                = @ontology.explore.classes["collection"].first.id
+                          %li
+                            %code shortid
+                            put the short id of the class, as used in #{$SITE} (e.g., "Common_Neoplasm");
+                          %li
+                            %code name
+                            put the preferred name of the class (e.g., "Common Neoplasm");
+                  %li
+                    In addition to the input element you defined, there are four hidden form elements that are created and then set when a user selects a class from the list. For example, if you create a field with this code:
+                    %ul
+                    %pre= h '<input type="text" name="a" class="bp_form_complete-all-uri" size="100"/>'
+                The 'name' attribute is used to create the four following fields (note how the 'a' from the name attribute is appended to the id attribute):
+                %ul
+                  %li
+                    %pre= h '<input type="hidden" id="a_bioportal_preferred_name">'
+                  %li
+                    %pre= h '<input type="hidden" id="a_bioportal_concept_id">'
+                  %li
+                    %pre= h '<input type="hidden" id="a_bioportal_ontology_id">'
+                  %li
+                    %pre= h '<input type="hidden" id="a_bioportal_full_id">'
+                  %li
+                    Additional parameters are documented on the
+                    %a{:href => "http://bioontology.org/wiki/index.php/NCBO_Widgets#How_to_use_NCBO_Widgets", :target => "_blank"} NCBO Widget Wiki
+                %p
+                  For more help visit
+                  %a{:href => "http://bioontology.org/wiki/index.php/NCBO_Widgets#How_to_use_NCBO_Widgets", :target => "_blank"} NCBO Widget Wiki
         %tr
           %td
             %div.card
               %div.card-body
-                %h5.card-title Tree Widget
-                %p.card-text Display a class tree with a search field for #{@ontology.acronym}
-                %a.btn.btn-info.thickbox{href: "#{get_code_prefix}&inlineId=widget_tree_popup".html_safe} Get code
+                %h5.card-title Visualization
+                %p.card-text Display a visualization for a given class in #{@ontology.acronym}
+                %a.btn.btn-info.thickbox{href: "#{get_code_prefix}&inlineId=vis".html_safe} Get code
           %td
-            #bp_widget_tree_container
-              <link rel="stylesheet" type="text/css" href="/widgets/jquery.ncbo.tree.css">
-              <script src="/widgets/jquery.ncbo.tree-2.0.2.js"></script>
-              <div id="widget_tree"></div>
-              :javascript
-                var widget_tree = $("#widget_tree").NCBOTree({
-                  apikey: "#{$API_KEY}",
-                  ontology: "#{@ontology.acronym}",
-                  ncboUIURL: "#{$UI_URL}",
-                  ncboAPIURL: "#{$REST_URL}"
-                });
-            #widget_tree_popup{:style => "display:none;"}
+            #bp_vis_container
+              <iframe frameborder="0" src="/widgets/visualization?ontology=#{@ontology.acronym}&class=#{CGI.escape(@ontology.explore.classes["collection"].first.id)}&apikey=#{$APIKEY}" width="100%" height="350"></iframe>
+            #vis{:style => "display:none;"}
               %h2 Step 2: Follow the Instructions
               %hr/
               %b Copy the code below and paste it to your HTML page
@@ -215,17 +181,53 @@
               %pre
                 = preserve do
                   :escaped
-                    <link rel="stylesheet" type="text/css" href="/widgets/jquery.ncbo.tree.css">
-                    <script src="/widgets/jquery.ncbo.tree-2.0.2.js"></script>
-                    <div id="widget_tree"></div>
-                    var widget_tree = $("#widget_tree").NCBOTree({
-                      apikey: "YOUR_API_KEY",
-                      ontology: "#{@ontology.acronym}"
-                    });
-
-              %p
-                You can also view a
-                %a{href: "/widgets/ncbo_tree.html"} detailed demonstration
+                    <iframe frameborder="0" src="/widgets/visualization?ontology=#{@ontology.acronym}&class=#{CGI.escape(@ontology.explore.classes["collection"].first.id)}&apikey=YOUR_API_KEY"></iframe>
               %p
                 For more help visit
                 %a{:href => "http://bioontology.org/wiki/index.php/NCBO_Widgets#How_to_use_NCBO_Widgets", :target => "_blank"} NCBO Widget Wiki
+
+        - unless @ontology.flat?
+          %tr
+            %td
+              %div.card
+                %div.card-body
+                  %h5.card-title Tree Widget
+                  %p.card-text Display a class tree with a search field for #{@ontology.acronym}
+                  %a.btn.btn-info.thickbox{href: "#{get_code_prefix}&inlineId=widget_tree_popup".html_safe} Get code
+            %td
+              #bp_widget_tree_container
+              <link rel="stylesheet" type="text/css" href="/widgets/jquery.ncbo.tree.css">
+              <div id="widget_tree"></div>
+              :javascript
+                 $.getScript( "/widgets/jquery.ncbo.tree-2.0.2.js", () => {
+                     var widget_tree = $("#widget_tree").NCBOTree({
+                                                                    apikey: "#{$API_KEY}",
+                                                                    ontology: "#{@ontology.acronym}",
+                                                                    ncboUIURL: "#{$UI_URL}",
+                                                                    ncboAPIURL: "#{$REST_URL}"
+                                                                  });
+                })
+
+              #widget_tree_popup{:style => "display:none;"}
+                %h2 Step 2: Follow the Instructions
+                %hr/
+                %b Copy the code below and paste it to your HTML page
+                %br/
+                %br/
+                %pre
+                  = preserve do
+                    :escaped
+                      <link rel="stylesheet" type="text/css" href="/widgets/jquery.ncbo.tree.css">
+                      <script src="/widgets/jquery.ncbo.tree-2.0.2.js"></script>
+                      <div id="widget_tree"></div>
+                      var widget_tree = $("#widget_tree").NCBOTree({
+                        apikey: "YOUR_API_KEY",
+                        ontology: "#{@ontology.acronym}"
+                      });
+
+                %p
+                  You can also view a
+                  %a{href: "/widgets/ncbo_tree.html"} detailed demonstration
+                %p
+                  For more help visit
+                  %a{:href => "http://bioontology.org/wiki/index.php/NCBO_Widgets#How_to_use_NCBO_Widgets", :target => "_blank"} NCBO Widget Wiki
diff --git a/app/views/ontologies/properties.html.haml b/app/views/ontologies/properties.html.haml
index cc66c218e..ce3500759 100644
--- a/app/views/ontologies/properties.html.haml
+++ b/app/views/ontologies/properties.html.haml
@@ -1,95 +1,84 @@
-%div.ont-properties
-  %div#propTree
-  %div#prop_contents.pl-3
+= render TurboFrameComponent.new(id: 'properties',data: {"turbo-frame-target": "frame"}) do
+  %div.ont-properties.py-3{data:{controller: 'container-splitter'}}
+    %div#propTree{data:{'container-splitter-target': 'container'}}
+    %div#prop_contents.pl-3{data:{'container-splitter-target': 'container'}}
 
-:plain
-  <script id="property-details" type="text/x-handlebars-template">
-    <table cellpadding="0" cellspacing="0" class="minimal concept_details" width="100%">
-      {{#if label}}
+  :plain
+    <script id="property-details" type="text/x-handlebars-template">
+      <table cellpadding="0" cellspacing="0" class="minimal concept_details" width="100%">
+        {{#if label}}
+          <tr>
+            <td class="label">
+              Labels
+            </td>
+            <td>
+              <p>
+                {{label}}&nbsp;
+              </p>
+            </td>
+          </tr>
+        {{/if}}
+        {{#if definition}}
+          <tr>
+            <td class="label">
+              Definitions
+            </td>
+            <td>
+              <p>
+                {{definition}}&nbsp;
+              </p>
+            </td>
+          </tr>
+        {{/if}}
         <tr>
-          <td class="label">
-            Labels
-          </td>
-          <td>
-            <p>
-              {{label}}&nbsp;
-            </p>
-          </td>
-        </tr>
-      {{/if}}
-      {{#if definition}}
-        <tr>
-          <td class="label">
-            Definitions
-          </td>
-          <td>
-            <p>
-              {{definition}}&nbsp;
-            </p>
-          </td>
-        </tr>
-      {{/if}}
-      <tr>
-        <td class="label">ID</td>
-        <td>
-          <p>
-            {{id}}&nbsp;
-          </p>
-        </td>
-      </tr>
-      {{#if parents}}
-        <tr>
-          <td class="label">Parent</td>
+          <td class="label">ID</td>
           <td>
             <p>
-              {{parents}}&nbsp;
+              {{id}}&nbsp;
             </p>
           </td>
         </tr>
-      {{/if}}
-    </table>
-  </script>
+        {{#if parents}}
+          <tr>
+            <td class="label">Parent</td>
+            <td>
+              <p>
+                {{parents}}&nbsp;
+              </p>
+            </td>
+          </tr>
+        {{/if}}
+      </table>
+    </script>
 
-:javascript
-  jQuery(document).data().bp.ontPropertiesTab = {};
+  :javascript
+    $(document).ready(function(){
+        jQuery(document).data().bp.ontPropertiesTab = {};
 
-  jQuery(document).data().bp.ontPropertiesTab.init = function() {
-    var source = jQuery("#property-details").html();
-    var propDetailsTemp = Handlebars.compile(source);
+        jQuery(document).data().bp.ontPropertiesTab.init = function() {
+          var source = jQuery("#property-details").html();
+          var propDetailsTemp = Handlebars.compile(source);
 
-    $("#propTree").NCBOPropertyTree({
-      ontology: "#{@ontology.acronym}",
-      ncboUIURL: jQuery(document).data().bp.config.ui_url,
-      width: "100%",
-      onInit: function() {
-        var ontPropTree = $("#propTree").data().NCBOPropertyTree;
-        var data = $("#propTree").find("a:first").data();
-        if (data) {
-          ontPropTree.selectClass(data.id);
-          data.id = decodeURIComponent(data.id);
-          jQuery("#prop_contents").html(propDetailsTemp(data));
-
-          Split(['#propTree', '#prop_contents'], {
-            elementStyle: function (dimension, size, gutterSize) {
-              return {
-                'flex-basis': 'calc(' + size + '% - ' + gutterSize + 'px)'
-              }
-            },
-            gutterStyle: function (dimension, gutterSize) {
-              return {
-                'flex-basis':  gutterSize + 'px'
+          $("#propTree").NCBOPropertyTree({
+            ontology: "#{@ontology.acronym}",
+            ncboUIURL: jQuery(document).data().bp.config.ui_url,
+            width: "100%",
+            onInit: function() {
+              var ontPropTree = $("#propTree").data().NCBOPropertyTree;
+              var data = $("#propTree").find("a:first").data();
+              if (data) {
+                ontPropTree.selectClass(data.id);
+                data.id = decodeURIComponent(data.id);
+                jQuery("#prop_contents").html(propDetailsTemp(data));
               }
-            },
-            gutterSize: 10,
-            direction: "horizontal",
-            sizes: [25, 75],
-            cursor: "col-resize"
-          })  
+            }
+          }).on("afterSelect", function (e, classId, label, node) {
+            var data = node.data();
+            data.id = decodeURIComponent(data.id);
+            jQuery("#prop_contents").html(propDetailsTemp(data));
+          });
         }
-      }
-    }).on("afterSelect", function (e, classId, label, node) {
-      var data = node.data();
-      data.id = decodeURIComponent(data.id);
-      jQuery("#prop_contents").html(propDetailsTemp(data));
-    });
-  }
+
+        jQuery(document).data().bp.ontPropertiesTab.init();
+
+    })

From de89a07c391e64db933e6189962cab5f63fbc1a1 Mon Sep 17 00:00:00 2001
From: Syphax <gs_bouazzouni@esi.dz>
Date: Sat, 12 Oct 2024 16:12:59 +0200
Subject: [PATCH 08/14] extract tree view partial from the classes visualize
 view

---
 app/views/ontologies/_treeview.html.haml |  17 ++-
 app/views/ontologies/visualize.html.haml | 133 +++++------------------
 2 files changed, 38 insertions(+), 112 deletions(-)

diff --git a/app/views/ontologies/_treeview.html.haml b/app/views/ontologies/_treeview.html.haml
index 20db396a8..cc7b4cac7 100644
--- a/app/views/ontologies/_treeview.html.haml
+++ b/app/views/ontologies/_treeview.html.haml
@@ -1,5 +1,12 @@
-#tree_wrapper
-  %ul.simpleTree
-    %li.root
-      %ul
-        = draw_tree(@root, @concept.id, @submission)  # application_helper::draw_tree
+= turbo_frame_tag 'concepts_tree_view' do
+  - unless @ontology.flat?
+    #tree_wrapper.card.p-1
+      %ul.simpleTree{data:{controller: 'simple-tree'}}
+        %li.root
+          %ul
+            = draw_tree(@root, @concept.id)
+
+  :javascript
+    jQuery(document).ready(function () {
+      jQuery("#sd_content").scrollTo(jQuery('a.active'));
+    })
diff --git a/app/views/ontologies/visualize.html.haml b/app/views/ontologies/visualize.html.haml
index d4a08f1f9..f55661777 100644
--- a/app/views/ontologies/visualize.html.haml
+++ b/app/views/ontologies/visualize.html.haml
@@ -1,108 +1,27 @@
-- unless @error
-  - @title = "#{@ontology.name} - #{@concept.prefLabel}"
-  - @new_term_request_ontologies
-  - @enable_ontolobridge = !$NEW_TERM_REQUEST_ONTOLOGIES.nil? && $NEW_TERM_REQUEST_ONTOLOGIES.include?(@ontology.acronym)
-  %div.tooltip
-  %div#bd_content.bd_content.explore
-    %div.sidebar.d-flex.flex-column.pr-2
-      -# Search box for class tree
-      %div#qsearch{class: "input-group pb-2 pe-2"}
-        %span.input-group-text Jump to:
-        = text_field_tag("search_box", nil, class: "form-control rounded-end", "aria-label": "Jump to:")
-        = hidden_field_tag("jump_to_concept_id")
-      -# Class tree
-      %div#sd_content
-        = loading_spinner(true)
-    - if @concept.id.eql?("bp_fake_root")
-      / When we have an ontology with a flat hierarchy, we initially disable the tabs because we don't have a class to display
-      .cls-info-container
-        #fake_tabs.tabs
-          %ul
-            %li#details_top.selected.first{:onclick => "return false;"}
-              %a{:href => "#details", :onclick => "return false;", :style => "color: gray;"} Details
-            %li#visualization_top{:onclick => "return false;"}
-              %a{:href => "#visualization", :onclick => "return false;", :style => "color: gray;"} Visualization
-            %li#notes_top{:onclick => "return false;"}
-              %a{:href => "#notes", :onclick => "return false;", :style => "color: gray;"}
-                Notes
-                %span#note_count_wrapper
-                  (
-                  %span#note_count
-                  )
-            %li#mappings_top{:onclick => "return false;"}
-              %a{:href => "#mappings", :onclick => "return false;", :style => "color: gray;"}
-                Class Mappings (
-                %span#mapping_count= #TODO_REV: Support mapping counts for concepts @concept.mapping_count
-                )
-          - if @enable_ontolobridge
-            %li#request_term_top{:onclick => "return false;"}
-              %a{:href => "#request_term", :onclick => "return false;", :style => "color: gray;"}
-                New Term Requests
-        #non_fake_tabs.tabs{:style => "display: none;"}
-          %ul
-            %li#details_top.selected.tab.first
-              %a{:href => "#details"} Details
-            %li#visualization_top.tab
-              %a{:href => "#visualization"} Visualization
+= render TurboFrameComponent.new(id: 'classes', data: {"turbo-frame-target": "frame"}) do
+  - unless @error
+    - @title = "#{@ontology.name} - #{@concept.prefLabel}"
+    %div.tooltip
+    %div#bd_content.bd_content.explore.py-3{data:{controller: 'container-splitter'}}
+      %div.sidebar.d-flex.flex-column.pr-2{data:{'container-splitter-target': 'container'}}
+        %div#qsearch.input-group.pb-2.pe-1
+          %span.input-group-text Jump to:
+          = text_field_tag("search_box", nil, class: "form-control rounded-end", aria: {label: "Jump to:"},
+          data: {controller: 'class-search-auto-complete', 'class-search-auto-complete-ontology-acronym-value': @ontology.acronym,
+                 'class-search-auto-complete-spinner-src-value': asset_path("jquery.simple.tree/spinner.gif")})
+          = hidden_field_tag("jump_to_concept_id")
+        %div#sd_content.p-1
+          = render TurboFrameComponent.new(id: 'concepts_tree_view' , src: "/ajax/classes/treeview?ontology=#{@ontology.acronym}&conceptid=#{escape(@concept.id)}")
+      %div#concept_content.d-flex.flex-column.card.p-1.ml-2{data:{'container-splitter-target': 'container'}}
+        = render partial: 'concepts/show'
+
+    - form_for(:search, :url => '', :html=>{:id=>'search_form'}) do
+      %input{:name => "search[ontologies][]", :type => "hidden", :value => @ontology.acronym}/
+      = hidden_field :search, :search_type, :value=>"contains"
+      = hidden_field :search, :keyword, :value=>"",:id=>"search_keyword"
+  - else # found an error
+    = "<div id=\"error\"><h2>#{@error}</h2></div>"
+
+
+
 
-            %li#notes_top.tab
-              %a{:href => "#notes"}
-                Notes
-                %span#note_count_wrapper
-                  (
-                  %span#note_count>
-                  )
-            %li#mappings_top.tab
-              %a{:href => "#mappings"}
-                Class Mappings (
-                %span#mapping_count>= @concept.mapping_count
-                )
-          - if @enable_ontolobridge
-            %li#request_term_top.tab
-              %a{:href => "#request_term"}
-                New Term Requests
-        #contents
-          #details_content.tab_container
-            %div{:style => "padding: 100px 0; font-size: larger; font-weight: bold; text-align: center;"} Use the "Jump To" to find a class and display details, visualization, notes, and mappings
-          #visualization_content.tab_container.not_visible
-          #notes_content.tab_container.not_visible
-          #mappings_content.tab_container.not_visible
-          #request_term_content.tab_container.not_visible
-    - else
-      .cls-info-container
-        .tabs
-          %ul
-            %li#details_top.selected.tab.first
-              %a{:href => "#details"} Details
-            %li#visualization_top.tab
-              %a{:href => "#visualization"} Visualization
-            %li#notes_top.tab
-              %a{:href => "#notes"}
-                Notes
-                %span#note_count_wrapper
-                  (
-                  %span#note_count= @notes.length
-                  )
-            %li#mappings_top.tab
-              %a{:href => "#mappings"}
-                Class Mappings (
-                %span#mapping_count=  #TODO_REV: Support mapping counts for concepts @concept.mapping_count
-                )
-          - if @enable_ontolobridge
-            %li#request_term_top.tab
-              %a{:href => "#request_term"}
-                New Term Requests
-          - if Rails.configuration.settings.purl[:enabled]
-            = link_to("#classPermalinkModal", class: "class-permalink", title: "Get a link to this page",
-                      aria: {label: "Get a link to this page"},
-                      data: {"bs-toggle": "modal", current_purl: "#{@current_purl}"}) do
-              %i{class: "fas fa-link", aria: {hidden: "true"}}
-        #contents
-          #details_content.tab_container= render :partial =>'/concepts/details'
-          #visualization_content.tab_container.not_visible= render :partial =>'/concepts/biomixer'
-          #notes_content.tab_container.not_visible= render :partial =>'/notes/list'
-          #mappings_content.tab_container.not_visible= render :partial => '/mappings/concept_mappings'
-          - if @enable_ontolobridge
-            #request_term_content.tab_container.not_visible= render :partial =>'/concepts/request_term'
-- else # found an error
-  = "<div id=\"error\"><h2>#{@error}</h2></div>"
\ No newline at end of file

From 1c20fdd63882b45b470e68a4deb1d192b66faca5 Mon Sep 17 00:00:00 2001
From: Syphax <gs_bouazzouni@esi.dz>
Date: Sat, 12 Oct 2024 16:11:43 +0200
Subject: [PATCH 09/14] update ontology viewer to use the TabsComponent

---
 app/helpers/application_helper.rb            | 21 +++++
 app/helpers/ontologies_helper.rb             | 51 ++++++++++++
 app/views/layouts/_ontology_viewer.html.haml | 84 ++++++--------------
 3 files changed, 95 insertions(+), 61 deletions(-)

diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
index a1949a1cf..0d3c68f48 100644
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@@ -11,6 +11,21 @@ def get_apikey
     end
   end
 
+  def escape(url)
+    CGI.escape(url) if url
+  end
+
+
+  def section_name(section)
+    section = concept_label_to_show(submission: @submission_latest || @submission) if section.eql?('classes')
+    t("ontology_details.sections.#{section}")
+  end
+
+  def skos?
+    submission = @submission || @submission_latest
+    submission&.hasOntologyLanguage === 'SKOS'
+  end
+
   def clean(string)
     string = string.gsub("\"", '\'')
     string.gsub("\n", '')
@@ -290,4 +305,10 @@ def get_link_for_ont_ajax(ont_acronym)
     data_ont = " data-ont='#{ont_acronym}' "
     "<a class='ont4ajax' #{data_ont} #{href_ont}>#{ont_acronym}</a>"
   end
+
+  ###END ruby equivalent of JS code in bp_ajax_controller.
+  def ontology_viewer_page_name(ontology_name, concept_name_title, page)
+    ontology_name + concept_name_title + " - #{page.capitalize}"
+  end
+
 end
diff --git a/app/helpers/ontologies_helper.rb b/app/helpers/ontologies_helper.rb
index 42b52dfc7..6346d2e73 100644
--- a/app/helpers/ontologies_helper.rb
+++ b/app/helpers/ontologies_helper.rb
@@ -156,6 +156,57 @@ def visits_data(ontology = nil)
   def acronyms(ontologies)
     ontologies.present? ? ontologies.map { |ont| ont.acronym } : []
   end
+
+  def selected_section?(section_title)
+    current_section.eql?(section_title)
+  end
+
+  def submission_ready?(submission)
+    Array(submission&.submissionStatus).include?('RDF')
+  end
+
+  def concept_label_to_show(submission: @submission_latest)
+    submission&.hasOntologyLanguage == 'SKOS' ? 'concepts' : 'classes'
+  end
+
+  def sections_to_show
+    sections = ['summary']
+    if !@ontology.summaryOnly && (submission_ready?(@submission_latest) || @old_submission_ready)
+      sections += ['classes']
+      sections += %w[properties]
+      #sections += %w[schemes collections] if skos?
+      #sections += %w[instances] unless skos?
+      #sections += %w[notes mappings widgets sparql]
+      sections += %w[notes mappings widgets]
+    end
+    sections
+  end
+
+  def lazy_load_section(section_title, &block)
+    if current_section.eql?(section_title)
+      block.call
+    else
+      render TurboFrameComponent.new(id: section_title, src: "/ontologies/#{@ontology.acronym}?p=#{section_title}",
+                                     loading: Rails.env.development? ? "lazy" : "eager",
+                                     target: '_top', data: { "turbo-frame-target": "frame" })
+    end
+  end
+  def language_selector_hidden_tag(section)
+    hidden_field_tag "language_selector_hidden_#{section}", '',
+                     data: { controller: "language-change", 'language-change-section-value': section, action: "change->language-change#dispatchLangChangeEvent" }
+  end
+
+  def section_data(section_title)
+    if ontology_data_section?(section_title)
+      url_value = selected_section?(section_title) ? request.fullpath : "/ontologies/#{@ontology.acronym}?p=#{section_title}"
+      { controller: "history turbo-frame", 'turbo-frame-url-value': url_value, action: "lang_changed->history#updateURL lang_changed->turbo-frame#updateFrame" }
+    else
+      {}
+    end
+  end
+
+
+
   def visits_chart_dataset(visits_data)
     visits_chart_dataset_array({'Visits': visits_data})
   end
diff --git a/app/views/layouts/_ontology_viewer.html.haml b/app/views/layouts/_ontology_viewer.html.haml
index 124ecf014..be601848f 100644
--- a/app/views/layouts/_ontology_viewer.html.haml
+++ b/app/views/layouts/_ontology_viewer.html.haml
@@ -1,4 +1,4 @@
-- content_section = (params[:p]) ? params[:p] : "summary"
+- content_section = current_section
 - concept_title = @concept.nil? ? "" : " - #{@concept.prefLabel} - Classes"
 - @title = "#{@ontology.name}#{concept_title}"
 
@@ -106,69 +106,31 @@
 
   %div.row.pb-4
     %div.col
-      %div.card
-        %div.card-header
-          -# Tabbed navigation bar for ontology content sections
-          %ul.nav.nav-tabs.card-header-tabs{id: "navbar-ontology", role: "tablist"}
-            %li{class: 'nav-item', role: 'presentation'}
-              = link_to("Summary", ontology_path(@ontology.acronym, p: "summary"), id: "ont-summary-tab",
-                        class: "nav-link", type: 'button', role: 'tab',
-                        data: {bp_ont_page: "summary", "bs-toggle": "tab", "bs-target": "#ont_summary_content"},
-                        aria: {controls: "ont_summary_content", selected: "false"})
-            - unless @ontology.summaryOnly
-              %li{class: 'nav-item', role: 'presentation'}
-                = link_to("Classes", ontology_path(@ontology.acronym, p: "classes"), id: "ont-classes-tab",
-                          class: "nav-link", type: 'button', role: "tab",
-                          data: {bp_ont_page: "classes", "bs-toggle": "tab", "bs-target": "#ont_classes_content"},
-                          aria: {controls: "ont_classes_content", selected: "false"})
-              %li{class: 'nav-item', role: 'presentation'}
-                = link_to("Properties", ontology_path(@ontology.acronym, p: "properties"), id: "ont-properties-tab",
-                          class: "nav-link", type: 'button', role: "tab",
-                          data: {bp_ont_page: "properties", "bs-toggle": "tab", "bs-target": "#ont_properties_content"},
-                          aria: {controls: "ont_properties_content", selected: "false"})
-            %li{class: 'nav-item', role: 'presentation'}
-              = link_to("Notes", ontology_path(@ontology.acronym, p: "notes"), id: "ont-notes-tab",
-                        class: "nav-link", type: 'button', role: "tab",
-                        data: {bp_ont_page: "notes", "bs-toggle": "tab", "bs-target": "#ont_notes_content"},
-                        aria: {controls: "ont_notes_content", selected: "false"})
-            - unless @ontology.summaryOnly
-              %li{class: 'nav-item', role: 'presentation'}
-                = link_to("Mappings", ontology_path(@ontology.acronym, p: "mappings"), id: "ont-mappings-tab",
-                          class: "nav-link", type: 'button', role: "tab",
-                          data: {bp_ont_page: "mappings", "bs-toggle": "tab", "bs-target": "#ont_mappings_content"},
-                          aria: {controls: "ont_mappings_content", selected: "false"})
-              %li{class: 'nav-item', role: 'presentation'}
-                = link_to("Widgets", ontology_path(@ontology.acronym, p: "widgets"), id: "ont-widgets-tab",
-                          class: "nav-link", type: 'button', role: "tab",
-                          data: {bp_ont_page: "widgets", "bs-toggle": "tab", "bs-target": "#ont_widgets_content"},
-                          aria: {controls: "ont_widgets_content", selected: "false"})
-              %li{style: "display: #{ontology_data_section? ? 'block' : 'none'}", class: 'nav-item lang-dropdown', role: 'presentation'}
-                = language_selector_tag(:content_language)
-        %div.card-body
-          -# Tab panes for displaying ontology content sections
-          %div.tab-content{id: "ontology_content"}
-            %div.tab-pane{id: "ont_summary_content", role: "tabpanel", aria: {labelledby: "ont-summary-tab"}}
-              - if content_section.eql?("summary")
-                = yield
-            %div.tab-pane{id: "ont_classes_content", role: "tabpanel", aria: {labelledby: "ont-classes-tab"}}
-              - if content_section.eql?("classes")
-                = yield
-            %div.tab-pane{id: "ont_properties_content", role: "tabpanel", aria: {labelledby: "ont-properties-tab"}}
-              - if content_section.eql?("properties")
-                = yield
-            %div.tab-pane{id: "ont_notes_content", role: "tabpanel", aria: {labelledby: "ont-notes-tab"}}
-              - if content_section.eql?("notes")
-                = yield
-            %div.tab-pane{id: "ont_mappings_content", role: "tabpanel", aria: {labelledby: "ont-mappings-tab"}}
-              - if content_section.eql?("mappings")
-                = yield
-            %div.tab-pane{id: "ont_widgets_content", role: "tabpanel", aria: {labelledby: "ont-widgets-tab"}}
-              - if content_section.eql?("widgets")
-                = yield
+      %div.card.py-3
+        %div{data: {controller: 'ontology-viewer-tabs', 'ontology-viewer-tabs-language-sections-value': ontology_data_sections }}
+          - sections = sections_to_show
+          %div.ontologies-tabs-container{data:{action: 'tab-selected->ontology-viewer-tabs#updateLanguageSelector'}}
+            = render TabsContainerComponent.new(id: 'ontology_viewer', url_parameter: 'p') do |t|
+              - sections.each do |section_title|
+                - t.item(id: section_title,
+                         title: section_name(section_title),
+                         path: ontology_path(@ontology.acronym, p: section_title),
+                         selected: selected_section?(section_title),
+                         page_name: ontology_viewer_page_name(@ontology.acronym, @concept&.prefLabel || '', section_title))
+                - t.pinned_right do
+                  %div{style: "display: #{ontology_data_section? ? 'block' : 'none'}; border: none; outline: none; padding: 1px",
+                    data: {'ontology-viewer-tabs-target': 'languageSelector' }}
+                    = language_selector_tag(:content_language)
+                - t.item_content do
+                  %div.p-1{data: section_data(section_title)}
+                    = language_selector_hidden_tag(section_title) if ontology_data_section?(section_title)
+                    = lazy_load_section(section_title) { yield }
+
 - if Rails.env.appliance?
   </main>
   = render partial: "footer_appliance"
-  = javascript_include_tag "application"
+  = javascript_include_tag "application", "data-turbo-track": "reload"
+  = render partial: "ga_tracking"
 - else
   = render partial: "layouts/footer"
 

From f4f72bdcdf98622203e6de2129c8809dc421b874 Mon Sep 17 00:00:00 2001
From: Syphax <gs_bouazzouni@esi.dz>
Date: Sat, 12 Oct 2024 16:16:13 +0200
Subject: [PATCH 10/14] extract sub helpers from the build_tree helper

---
 app/helpers/application_helper.rb             | 42 ++++++++++++-------
 app/views/concepts/_child_nodes.html.haml     |  6 +--
 .../javascripts/jquery.simple.tree.js.erb     |  2 +-
 3 files changed, 31 insertions(+), 19 deletions(-)

diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
index 0d3c68f48..cd72077a7 100644
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@@ -48,38 +48,41 @@ def remove_owl_notation(string)
     string
   end
 
-  def draw_tree(root, id = nil, type = 'Menu', submission)
+  def draw_tree(root, id = nil, type = "Menu")
     if id.nil?
       id = root.children.first.id
     end
     # TODO: handle tree view for obsolete classes, e.g. 'http://purl.obolibrary.org/obo/GO_0030400'
-    raw build_tree(root, '', id, submission) # returns a string, representing nested list items
+    raw build_tree(root, "", id)  # returns a string, representing nested list items
   end
 
-  def build_tree(node, string, id, submission)
-    if node.children.nil? || node.children.empty?
-      return string
+  def build_tree(node, string, id)
+    if node.children.nil? || node.children.length < 1
+      return string # unchanged
     end
-
     node.children.sort! { |a, b| (a.prefLabel || a.id).downcase <=> (b.prefLabel || b.id).downcase }
-    node.children.each do |child|
-      active_style = child.id.eql?(id) ? "class='active'" : ''
-      open = child.expanded? ? "class='open'" : ''
+    for child in node.children
+      if child.id.eql?(id)
+        active_style = "class='active'"
+      else
+        active_style = ""
+      end
 
       # This fake root will be present at the root of "flat" ontologies, we need to keep the id intact
       li_id = child.id.eql?('bp_fake_root') ? 'bp_fake_root' : short_uuid
 
       if child.id.eql?('bp_fake_root')
-        string << "<li class='active' id='#{li_id}'><a id='#{CGI.escape(child.id)}' href='#' #{active_style}>#{child.prefLabel}</a></li>"
+        string << tree_link_to_concept(li_id: li_id, child: child, ontology_acronym: '',
+                                       active_style: active_style)
       else
-        icons = child.relation_icon(node)
-        string << "<li #{open} id='#{li_id}'><a id='#{CGI.escape(child.id)}' href='/ontologies/#{child.explore.ontology.acronym}/?p=classes&conceptid=#{CGI.escape(child.id)}&lang=#{request_lang(submission)}' #{active_style}> #{child.prefLabel({use_html: true})}</a> #{icons}"
+        string << tree_link_to_concept(li_id: li_id, child: child, ontology_acronym: child.explore.ontology.acronym,
+                                       active_style: active_style)
 
         if child.hasChildren && !child.expanded?
-          string << "<ul class='ajax'><li id='#{li_id}'><a id='#{CGI.escape(child.id)}' href='/ajax_concepts/#{child.explore.ontology.acronym}/?conceptid=#{CGI.escape(child.id)}&callback=children&lang=#{request_lang(submission)}'>ajax_class</a></li></ul>"
+          string << tree_link_to_children(li_id: li_id, child: child)
         elsif child.expanded?
           string << '<ul>'
-          build_tree(child, string, id, submission)
+          build_tree(child, string, id)
           string << '</ul>'
         end
         string << '</li>'
@@ -89,6 +92,17 @@ def build_tree(node, string, id, submission)
     string
   end
 
+  def tree_link_to_concept(li_id:, child:, ontology_acronym:, active_style:)
+    page_name = ontology_viewer_page_name(ontology_acronym, child.prefLabel, 'Classes')
+    open = child.expanded? ? "class='open'" : ''
+    href = ontology_acronym.blank? ? '#' :  "/ontologies/#{child.explore.ontology.acronym}/concepts/?id=#{CGI.escape(child.id)}"
+    "<li #{open} id='#{li_id}'><a id='#{CGI.escape(child.id)}' data-bp-ont-page-name='#{page_name}' data-turbo=true data-turbo-frame='concept_show' href='#{href}' #{active_style}> #{child.prefLabel({ use_html: true })}</a>"
+  end
+
+  def tree_link_to_children(li_id:, child:)
+    "<ul class='ajax'><li id='#{li_id}'><a id='#{CGI.escape(child.id)}' href='/ajax_concepts/#{child.explore.ontology.acronym}/?conceptid=#{CGI.escape(child.id)}&callback=children'>ajax_class</a></li></ul>"
+  end
+
   def loading_spinner(padding = false, include_text = true)
     loading_text = include_text ? ' loading...' : ''
     if padding
diff --git a/app/views/concepts/_child_nodes.html.haml b/app/views/concepts/_child_nodes.html.haml
index b734cc594..7a2e76c50 100644
--- a/app/views/concepts/_child_nodes.html.haml
+++ b/app/views/concepts/_child_nodes.html.haml
@@ -1,9 +1,7 @@
 - output =""
 - for child in @children
-  - icons = child.relation_icon(@concept)
-  - output << "<li id='#{short_uuid}'><a id='#{CGI.escape(child.id)}' href='/ontologies/#{child.explore.ontology.acronym}/?p=classes&conceptid=#{CGI.escape(child.id)}&lang=#{request_lang(@submission)}'> #{child.prefLabel}</a> #{icons}"
-
+  - output << tree_link_to_concept(li_id: short_uuid, child: child, ontology_acronym: child.explore.ontology.acronym, active_style: '')
   - if child.hasChildren
-    - output << "<ul class='ajax'><li id='#{short_uuid}'><a id='#{CGI.escape(child.id)}' href='/ajax_concepts/#{child.explore.ontology.acronym}/?conceptid=#{CGI.escape(child.id)}&callback=children&lang=#{request_lang(@submission)}'>#{child.prefLabel}</a></li></ul>"
+    - output << tree_link_to_children(li_id: short_uuid, child: child)
   - output << "</li>"
 = raw output
diff --git a/vendor/assets/javascripts/jquery.simple.tree.js.erb b/vendor/assets/javascripts/jquery.simple.tree.js.erb
index 3a86f4464..3b134b334 100755
--- a/vendor/assets/javascripts/jquery.simple.tree.js.erb
+++ b/vendor/assets/javascripts/jquery.simple.tree.js.erb
@@ -165,7 +165,7 @@ $.fn.simpleTree = function(opt){
 				{
 					TREE.option.afterClick($(this).parent());
 				}
-				return false;
+				return true;
 			}).dblclick(function(){
 				mousePressed = false;
 				TREE.nodeToggle($(this).parent().get(0));

From 4f7058b4e33e228bf8eec063d87c8f75e2717846 Mon Sep 17 00:00:00 2001
From: Syphax <gs_bouazzouni@esi.dz>
Date: Sat, 12 Oct 2024 16:03:43 +0200
Subject: [PATCH 11/14] move js code from old js file  to the views directly

---
 app/assets/javascripts/bp_notes.js          | 19 ----------------
 app/views/notes/_list.html.haml             | 25 +++++++++++++++++++--
 app/views/notes/_ontology_list.html.haml    | 25 +++++++++++++++++++--
 app/views/ontologies/_notes.html.erb        |  4 ----
 app/views/ontologies/_notes.html.haml       |  4 ++++
 app/views/ontologies/_submissions.html.haml | 17 ++++++++++++++
 6 files changed, 67 insertions(+), 27 deletions(-)
 delete mode 100644 app/views/ontologies/_notes.html.erb
 create mode 100644 app/views/ontologies/_notes.html.haml

diff --git a/app/assets/javascripts/bp_notes.js b/app/assets/javascripts/bp_notes.js
index b3e8d2888..2123f9576 100644
--- a/app/assets/javascripts/bp_notes.js
+++ b/app/assets/javascripts/bp_notes.js
@@ -1,25 +1,6 @@
 var ontNotesTable;
 var ont_columns = { archived: 3, date: 7, subjectSort: 2 };
 
-jQuery(".ontologies.show").ready(function(){
-  setupNotesFaceboxSizing();
-  bindAddCommentClick();
-  bindAddProposalClick();
-  bindProposalChange();
-  bindReplyClick();
-  bindReplyCancelClick();
-  bindReplySaveClick();
-
-  jQuery("a.subscribe_to_notes").live("click", function(){
-    subscribeToNotes(this);
-  });
-
-  jQuery("#hide_archived_ont").click(function(){
-    hideOrUnhideArchivedOntNotes();
-  });
-
-  wireOntTable(jQuery("#ontology_notes_list"));
-});
 
 NOTES_PROPOSAL_TYPES = {
   "ProposalNewClass": "New Class Proposal",
diff --git a/app/views/notes/_list.html.haml b/app/views/notes/_list.html.haml
index b5feefa51..79ec18583 100644
--- a/app/views/notes/_list.html.haml
+++ b/app/views/notes/_list.html.haml
@@ -4,12 +4,12 @@
 .notes_list_container
   .add_comment{style: "float: left; margin-right: 1em;"}
     - if session[:user].nil?
-      = link_to "Add comment", login_index_path, class: "link_button", style: "font-size: .9em;"
+      = link_to "Add comment",  login_index_path(redirect: request.url), class: "link_button", style: "font-size: .9em;"
     - else
       = link_to "Add comment", "javascript:void(0);", class: "add_comment link_button", style: "font-size: .9em;", data: { parent_id: "#{@concept.id}", parent_type: "class" }
   .add_proposal{style: "float: left; margin-right: 1em;"}
     - if session[:user].nil?
-      = link_to "Add proposal", login_index_path, class: "link_button", style: "font-size: .9em"
+      = link_to "Add proposal",  login_index_path(redirect: request.url), class: "link_button", style: "font-size: .9em"
     - else
       = link_to "Add proposal", "javascript:void(0);", class: "add_proposal link_button", style: "font-size: .9em;", data: { parent_id: "#{@concept.id}", parent_type: "class" }
   .subscribe_to_notes.link_button{:style => "float: left;"}
@@ -59,3 +59,24 @@
                 = note.proposal ? get_note_type_text(note.proposal.type) : "Comment"
               %td
                 = DateTime.parse(note.created).strftime("%Y-%m-%d")
+:javascript
+  jQuery(".ontologies.show").ready(function(){
+    setupNotesFacebox()
+    setupNotesFaceboxSizing();
+    bindAddCommentClick();
+    bindAddProposalClick();
+    bindProposalChange();
+    bindReplyClick();
+    bindReplyCancelClick();
+    bindReplySaveClick();
+
+    jQuery("a.subscribe_to_notes").live("click", function(){
+      subscribeToNotes(this);
+    });
+
+    jQuery("#hide_archived_ont").click(function(){
+      hideOrUnhideArchivedOntNotes();
+    });
+
+    wireOntTable(jQuery("#notes_concept_list_table"));
+  });
\ No newline at end of file
diff --git a/app/views/notes/_ontology_list.html.haml b/app/views/notes/_ontology_list.html.haml
index 862020cc3..36cf4ea8f 100644
--- a/app/views/notes/_ontology_list.html.haml
+++ b/app/views/notes/_ontology_list.html.haml
@@ -6,12 +6,12 @@
 .notes_list_container
   .add_comment{style: "float: left; margin-right: 1em;"}
     - if session[:user].nil?
-      = link_to "Add comment", login_index_path, class: "link_button", style: "font-size: .9em", data: { parent_id: "#{@ontology.id}", parent_type: "ontology" }
+      = link_to "Add comment", login_index_path(redirect: request.url), class: "link_button", style: "font-size: .9em", data: { parent_id: "#{@ontology.id}", parent_type: "ontology" }
     - else
       = link_to "Add comment", "javascript:void(0);", class: "add_comment link_button", style: "font-size: .9em", data: { parent_id: "#{@ontology.id}", parent_type: "ontology" }
   .add_proposal{style: "float: left; margin-right: 1em;"}
     - if session[:user].nil?
-      = link_to "Add proposal", login_index_path, class: "link_button", style: "font-size: .9em", data: { parent_id: "#{@ontology.id}", parent_type: "ontology" }
+      = link_to "Add proposal", login_index_path(redirect: request.url), class: "link_button", style: "font-size: .9em", data: { parent_id: "#{@ontology.id}", parent_type: "ontology" }
     - else
       = link_to "Add proposal", "javascript:void(0);", class: "add_proposal link_button", style: "font-size: .9em", data: { parent_id: "#{@ontology.id}", parent_type: "ontology" }
   .subscribe_to_notes{:style => "float: left;"}
@@ -82,3 +82,24 @@
                   %a{href: "/ontologies/#{@ontology.acronym}?p=classes&conceptid=#{CGI.escape(note.relatedClass.first)}"}= note.relatedClass.first
               %td
                 = DateTime.parse(note.created).strftime("%Y-%m-%d")
+:javascript
+  jQuery(".ontologies.show").ready(function(){
+    setupNotesFacebox()
+    setupNotesFaceboxSizing();
+    bindAddCommentClick();
+    bindAddProposalClick();
+    bindProposalChange();
+    bindReplyClick();
+    bindReplyCancelClick();
+    bindReplySaveClick();
+
+    jQuery("a.subscribe_to_notes").live("click", function(){
+      subscribeToNotes(this);
+    });
+
+    jQuery("#hide_archived_ont").click(function(){
+      hideOrUnhideArchivedOntNotes();
+    });
+
+    wireOntTable(jQuery("#ontology_notes_list"));
+  });
\ No newline at end of file
diff --git a/app/views/ontologies/_notes.html.erb b/app/views/ontologies/_notes.html.erb
deleted file mode 100644
index 1eb596bc6..000000000
--- a/app/views/ontologies/_notes.html.erb
+++ /dev/null
@@ -1,4 +0,0 @@
-<div id="notes_content" style="margin: 1em 0;">
-  <h2 style="margin-bottom: -0.5em; font-size: x-large; padding: .5em .5em 0; float: left;">Notes</h2>
-	<%= render :partial => 'notes/ontology_list' %>
-</div>
\ No newline at end of file
diff --git a/app/views/ontologies/_notes.html.haml b/app/views/ontologies/_notes.html.haml
new file mode 100644
index 000000000..4db993a52
--- /dev/null
+++ b/app/views/ontologies/_notes.html.haml
@@ -0,0 +1,4 @@
+= turbo_frame_tag 'notes', data: {turbo: false} do
+  %div#notes_content{style:"margin: 1em 0"}
+    %h2{style:"margin-bottom: -0.5em; font-size: x-large; padding: .5em .5em 0; float: left;"} Notes
+    = render :partial => 'notes/ontology_list'
diff --git a/app/views/ontologies/_submissions.html.haml b/app/views/ontologies/_submissions.html.haml
index 4e6e5a9aa..a2acabb4c 100644
--- a/app/views/ontologies/_submissions.html.haml
+++ b/app/views/ontologies/_submissions.html.haml
@@ -33,3 +33,20 @@
       %tr
         %td{colspan: more_colspan, class: "show_more_subs"}
           %a#version_toggle{:href => ""} more...
+
+:javascript
+  jQuery(document).ready(() => {
+    jQuery("#version_toggle").click( (event) => {
+        event.preventDefault();
+        jQuery("#ontology_versions tr.hidden_select").toggleClass("hidden_ont")
+        const oldText = event.target.innerHTML
+        switch (oldText) {
+          case 'more...':
+            event.target.innerHTML = 'less...'
+            break
+          case 'less...':
+            event.target.innerHTML = 'more...'
+            break
+        }
+    })
+  })
\ No newline at end of file

From d19a83e22ebd51bd2503a0d13e1fe9629926b127 Mon Sep 17 00:00:00 2001
From: Syphax <gs_bouazzouni@esi.dz>
Date: Sat, 12 Oct 2024 16:18:56 +0200
Subject: [PATCH 12/14] remove some old js code replaced with useSimpleTree,
 TabsContainer, ...

---
 app/assets/javascripts/application.js         |   4 -
 app/assets/javascripts/bp_class_tree.js.erb   | 209 ---------
 .../javascripts/bp_ontology_viewer.js.erb     | 418 ------------------
 app/assets/javascripts/bp_visualize.js.erb    | 141 ------
 app/assets/stylesheets/bioportal.scss         |  56 ++-
 .../stylesheets/bootstrap_overrides.scss      |  28 +-
 app/assets/stylesheets/submissions.scss       |   7 +
 7 files changed, 82 insertions(+), 781 deletions(-)
 delete mode 100644 app/assets/javascripts/bp_class_tree.js.erb
 delete mode 100644 app/assets/javascripts/bp_ontology_viewer.js.erb
 delete mode 100644 app/assets/javascripts/bp_visualize.js.erb

diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
index 318e08ca9..92c27c6e3 100644
--- a/app/assets/javascripts/application.js
+++ b/app/assets/javascripts/application.js
@@ -12,17 +12,13 @@
 //
 //= require bioportal
 //= require admin/licenses
-//= require bp_class_tree
 //= require bp_ajax_controller
-//= require bp_ontology_viewer
 //= require bp_notes
-//= require bp_ontolobridge
 //= require bp_form_complete
 //= require bp_create_mappings
 //= require bp_analytics
 //= require bp_search
 //= require bp_mappings
-//= require bp_visualize
 //= require bp_admin
 //= require bp_recommender
 //= require bp_property_tree
diff --git a/app/assets/javascripts/bp_class_tree.js.erb b/app/assets/javascripts/bp_class_tree.js.erb
deleted file mode 100644
index 74c7e9f62..000000000
--- a/app/assets/javascripts/bp_class_tree.js.erb
+++ /dev/null
@@ -1,209 +0,0 @@
-function wrapupTabChange(selectedTab) {
-  jQuery.unblockUI();
-  tb_init('a.thickbox, area.thickbox, input.thickbox');
-  jQuery(document).trigger("visualize_tab_change", [{tabType: selectedTab}]);
-  jQuery(document).trigger("tree_changed");
-}
-
-function setCacheCurrent() {
-  var currentData = [];
-
-  // Store notes table data
-  if (typeof notesTable !== 'undefined' && notesTable !== null && notesTable.length !== 0) {
-    currentData["notes_table_data"] = notesTable.fnGetData();
-  }
-
-  // Reset the table
-  resetNotesTable();
-
-  currentData[0] = jQuery('#visualization_content').html();
-  currentData[1] = jQuery('#details_content').html();
-  currentData[2] = jQuery('#notes_content').html();
-  currentData[3] = jQuery('#mappings_content').html();
-  currentData[4] = jQuery('#request_term_content').html();
-  currentData[6] = jQuery('#note_count').html();
-  currentData[7] = jQuery('#mapping_count').html();
-  setCache(getConcept(), currentData);
-}
-
-function resetNotesTable() {
-  jQuery(".notes_table_container div[class^=dataTables_]").remove();
-}
-
-function insertNotesTable(aData) {
-  jQuery(".notes_table_container").append(jQuery("#notes_list_table_clone").clone());
-  jQuery(".notes_table_container #notes_list_table_clone").attr("id", "notes_list_table");
-//  wireTableWithData(jQuery("#notes_list_table"), aData);
-}
-
-var simpleTreeCollection;
-function initClassTree() {
-  simpleTreeCollection = jQuery('.simpleTree').simpleTree({
-    autoclose: false,
-    drag: false,
-    animate: true,
-    timeout: 20000,
-    afterClick:function(node){
-      History.pushState({p:"classes", conceptid:jQuery(node).children("a").attr("id")}, jQuery.bioportal.ont_pages["classes"].page_name + " | " + jQuery(document).data().bp.ont_viewer.org_site, jQuery(node).children("a").attr("href"));
-    },
-    afterAjaxError: function(node){
-      simpleTreeCollection[0].option.animate = false;
-      simpleTreeCollection.get(0).nodeToggle(node.parent()[0]);
-      if (node.parent().children(".expansion_error").length == 0) {
-        node.parent().append("<span class='expansion_error'>Error, please try again");
-      }
-      simpleTreeCollection[0].option.animate = true;
-    },
-    beforeAjax: function(node){
-      node.parent().children(".expansion_error").remove();
-    }
-  });
-
-  setConcept(jQuery(document).data().bp.ont_viewer.concept_id);
-  setOntology(jQuery(document).data().bp.ont_viewer.ontology_id);
-  jQuery("#sd_content").scrollTo(jQuery('a.active'));
-
-  // Set the cache for the first concept we retrieved
-  setCacheCurrent();
-
-  // Setup the "Get all classes" link for times when the children is greater than our max
-  jQuery(".too_many_children_override").live('click', function(event) {
-    event.preventDefault();
-    var result = jQuery(this).closest("ul");
-    result.html("<img src='/images/tree/spinner.gif'>");
-    jQuery.ajax({
-      url: jQuery(this).attr('href'),
-      context: result,
-      success: function(data){
-        this.html(data);
-        // This sets up the returned content with SimpleTree functionality
-        simpleTreeCollection.get(0).setTreeNodes(this);
-      },
-      error: function(){
-        this.html("<div style='background: #eeeeee; padding: 5px; width: 80%;'>Problem getting children. <a href='" + jQuery(this).attr('href') + "' class='too_many_children_override'>Try again</a></div>");
-      }
-    });
-  });
-};
-
-function nodeClicked(node_id, lang = "en") {
-  // Get current html and store data in cache (to account for changes since the cache was retrieved)
-  setCacheCurrent();
-
-  // Reset notesTable for next node
-  notesTable = null;
-
-  if (node_id == 0) {
-    alert("Sorry, we cannot display all the classes at this level in the hierarchy because there are too many of them. Please select another class or use the Search to find a specific concept in this ontology");
-    return;
-  }
-
-  setConcept(node_id);
-
-  // Deal with permalink
-  var concept_uri = (node_id.indexOf("http://") == 0 || node_id.indexOf(encodeURIComponent("http://")) == 0);
-  var purl_anchor = concept_uri ? "?conceptid="+node_id : "/"+node_id;
-  var selectedTab = jQuery("#bd_content div.tabs li.selected a").attr("href").slice(1);
-  jQuery("a.class-permalink").data("current-purl", jQuery(document).data().bp.ont_viewer.purl_prefix + purl_anchor);
-
-  // Ontolobridge Request New Term save of form values when jumping between terms
-  if (typeof obTriggerNewTermRequestFormSave === "function") {
-    obTriggerNewTermRequestFormSave();
-  }
-
-  if (getCache(node_id) != null) {
-    var tabData = getCache(node_id);
-
-    // Make the clicked node active
-    jQuery("a.active").removeClass("active");
-    jQuery(document.getElementById(node_id)).addClass("active");
-
-    jQuery('#visualization_content').html(tabData[0]);
-    jQuery('#details_content').html(tabData[1]);
-    jQuery('#notes_content').html(tabData[2]);
-    jQuery('#mappings_content').html(tabData[3]);
-    jQuery('#request_term_content').html(tabData[4]);
-    jQuery('#note_count').html(tabData[6]);
-    jQuery('#mapping_count').html(tabData[7]);
-
-    // Insert notes table
-    insertNotesTable(tabData["notes_table_data"]);
-    wrapupTabChange(selectedTab);
-  } else {
-    jQuery.blockUI({ message: '<h1>' + '<%= image_tag src="jquery.simple.tree/spinner.gif" %>' + ' Loading Class...</h1>', showOverlay: false });
-    var ajaxUrl = '/ajax_concepts/'+jQuery(document).data().bp.ont_viewer.ontology_id+'/?conceptid='+node_id+'&lang=' + lang + '&callback=load'
-    jQuery.get(ajaxUrl,
-      function(data) {
-        var tabData = data.split("|||");
-
-        // the tabs
-        jQuery('#visualization_content').html(tabData[0]);
-        jQuery('#details_content').html(tabData[1]);
-        jQuery('#notes_content').html(tabData[2]);
-        jQuery('#mappings_content').html(tabData[3]);
-        jQuery('#request_term_content').html(tabData[4]);
-        jQuery('#note_count').html(tabData[6]);
-        jQuery('#mapping_count').html(tabData[7]);
-
-        setCache(node_id,tabData);
-        wrapupTabChange(selectedTab);
-      }
-    );
-  }
-}
-
-// Keep trying to put the tree view content in place (looks for #sd_content)
-var classesPaneSplitter;
-function placeTreeView(treeHTML) {
-  if (jQuery("#sd_content").length == 0) {
-    setTimeout(function(){placeTreeView(treeHTML)}, 500);
-  } else {
-    document.getElementById("sd_content").innerHTML = treeHTML;
-    initClassTree();
-
-    classesPaneSplitter = Split(['div#bd_content .sidebar', 'div#bd_content .cls-info-container'], {
-      elementStyle: function (dimension, size, gutterSize) {
-        return {
-          'flex-basis': 'calc(' + size + '% - ' + gutterSize + 'px)'
-        }
-      },
-      gutterStyle: function (dimension, gutterSize) {
-        return {
-          'flex-basis':  gutterSize + 'px'
-        }
-      },
-      gutterSize: 10,
-      direction: "horizontal",
-      sizes: [30, 70],
-      cursor: "col-resize"
-    })
-  }
-}
-
-// Retrieve the tree view using ajax
-function getTreeView(lang = "en") {
-  var url = "/ajax/classes/treeview?ontology="+jQuery(document).data().bp.ont_viewer.ontology_id+"&lang=" + lang + "&conceptid="+encodeURIComponent(jQuery(document).data().bp.ont_viewer.concept_id);
-  jQuery.ajax({
-    url: url,
-    success: function(data) {
-      placeTreeView(data);
-    },
-    error: function(data) {
-        var url = "/ajax/classes/treeview?ontology="+jQuery(document).data().bp.ont_viewer.ontology_id+"&lang=" + lang + "&conceptid=root";
-        jQuery.get(url, function(data) {
-        var rootTree = "<div class='tree_error'>Displaying the path to this class has taken too long. You can browse classes below.</div>" + data;
-        placeTreeView(rootTree);
-      });
-    },
-    timeout: 15000
-  });
-}
-
-// Get the treeview using ajax
-// We do this right after writing #sd_content to the dom to make sure it loads before other async portions of the page
-jQuery(document).ready(function(){
-  if (pageUsesTreeView()) {
-    var lang = jQuery(document).data().bp.ont_viewer.lang;
-    getTreeView(lang);
-  }
-});
diff --git a/app/assets/javascripts/bp_ontology_viewer.js.erb b/app/assets/javascripts/bp_ontology_viewer.js.erb
deleted file mode 100644
index 276cfa27d..000000000
--- a/app/assets/javascripts/bp_ontology_viewer.js.erb
+++ /dev/null
@@ -1,418 +0,0 @@
-// History and navigation management
-(function(window,undefined) {
-  // Establish Variables
-  try {
-    var History = window.History;
-  } catch (e) {
-    console.log("History.js failed to load");
-  }
-  // History.debug.enable = true;
-
-  // Abort it not right page
-  if (!pageUsesTreeView()) {
-    return;
-  }
-
-  // Bind to State Change
-  History.Adapter.bind(window, 'statechange', function() {
-    var hashParams = null;
-    var queryStringParams = null;
-    var params = {};
-    var state = History.getState();
-
-    jQuery(document).trigger("ont_view_change");
-
-    if (typeof state.data.p !== 'undefined') {
-      if (state.data.p == "classes") {
-        displayTree(state.data);
-      }
-
-      showOntologyContent(state.data.p);
-    } else if (typeof state.url !== 'undefined') {
-      if (window.location.hash != "") {
-        hashParams = window.location.hash.split('?').pop().split('&');
-
-        jQuery(hashParams).each(function(index, value){
-          var paramName = value.split("=")[0];
-          var paramValue = value.split("=")[1];
-          params[paramName] = paramValue;
-        });
-      } else {
-        queryStringParams = window.location.search.substring(1).split("&");
-
-        jQuery(queryStringParams).each(function(index, value){
-          var paramName = value.split("=")[0];
-          var paramValue = value.split("=")[1];
-          params[paramName] = paramValue;
-        });
-      }
-
-      if (typeof params["p"] !== 'undefined' && content_section != params["p"]) {
-        showOntologyContent(params["p"]);
-        document.title = jQuery.bioportal.ont_pages[params["p"]].page_name + " | " + jQuery(document).data().bp.ont_viewer.org_site;
-
-        // We need to get everything using AJAX
-        content_section = null;
-      } else {
-        var pane = jQuery(document).data().bp.ont_viewer.content_section;
-        showOntologyContent(pane);
-        document.title = jQuery.bioportal.ont_pages[pane].page_name + " | " + jQuery(document).data().bp.ont_viewer.org_site;
-      }
-    }
-  });
-})(window);
-
-// Handles display of the tree depending on parameters
-function displayTree(data) {
-  jQuery(document).trigger("classes_tab_visible");
-
-  var new_concept_id = data.conceptid;
-  var new_concept_link = getConceptLinkEl(new_concept_id);
-  var concept_label;
-  var old_html;
-
-  var ontology_id = jQuery(document).data().bp.ont_viewer.ontology_id;
-  var ontology_version_id = jQuery(document).data().bp.ont_viewer.ontology_version_id;
-  var ontology_name = jQuery(document).data().bp.ont_viewer.ontology_name;
-  var org_site = jQuery(document).data().bp.ont_viewer.org_site;
-  var concept_id = jQuery(document).data().bp.ont_viewer.concept_id;
-  var content_section = jQuery(document).data().bp.ont_viewer.content_section;
-  var concept_param = jQuery(document).data().bp.ont_viewer.concept_param;
-  var concept_name = jQuery(document).data().bp.ont_viewer.concept_name;
-  var metadata_only = jQuery(document).data().bp.ont_viewer.metadata_only;
-  var purl_prefix = jQuery(document).data().bp.ont_viewer.purl_prefix;
-  var concept_name_title = jQuery(document).data().bp.ont_viewer.concept_name_title;
-  var lang = jQuery(document).data().bp.ont_viewer.lang;
-
-  // Check to see if we're actually loading a new concept or just displaying the one we already loaded previously
-  if (typeof new_concept_id === 'undefined' || new_concept_id == concept_id) {
-    if (concept_id !== "") {
-      History.replaceState({p:"classes", conceptid:concept_id}, jQuery.bioportal.ont_pages["classes"].page_name + " | " + org_site, "?p=classes" + "&conceptid=" + concept_id);
-    }
-    jQuery.unblockUI();
-    return;
-  } else {
-    var new_concept_param = (typeof new_concept_id === 'undefined') ? "" : "&conceptid=" + new_concept_id;
-
-    if (typeof new_concept_id !== 'undefined') {
-      // Get label for new title
-      concept_label = (new_concept_link.html() == null) ? "" : " - " + new_concept_link.html().trim().replace(/<(?:.|\n)*?>/gm, '');
-
-      // Retrieve new concept and display tree
-      old_html = jQuery.bioportal.ont_pages["classes"].html;
-      jQuery.bioportal.ont_pages["classes"] = new jQuery.bioportal.OntologyPage("classes",
-        "/ontologies/" + ontology_id + "?p=classes" + new_concept_param,
-        "Problem retrieving classes",
-        ontology_name + concept_label + " - Classes",
-        "Classes");
-
-      if (typeof data.suid !== 'undefined' && data.suid === "jump_to") {
-        jQuery.blockUI({ message: '<h1><img src="<%= asset_path("jquery.simple.tree/spinner.gif") %>" /> Loading Class...</h1>', showOverlay: false });
-
-        if (data.flat === true) {
-          // We have a flat ontology, so we'll replace existing information in the UI and add the new class to the list
-
-          // Remove fake root node if it exists
-          if (jQuery("li#bp_fake_root").length) {
-            jQuery("li#bp_fake_root").remove();
-            jQuery("#non_fake_tabs").show();
-            jQuery("#fake_tabs").hide();
-          }
-
-          // If the concept is already visible and in cache, then just switch to it
-          if (getCache(data.conceptid) == null) {
-            var list = jQuery("div#sd_content ul.simpleTree li.root ul");
-
-            // Remove existing classes
-            list.children().remove();
-
-            // Add new class
-            jQuery(list).append('<li id="'+data.conceptid+'"><a href="/ontologies/'+ontology_id+'/?p=classes&conceptid='+data.conceptid+'">'+data.label+'</a></li>');
-
-            // Configure tree
-            jQuery(list).children(".line").remove();
-            jQuery(list).children(".line-last").remove();
-            simpleTreeCollection.get(0).setTreeNodes(list);
-
-            // Simulate node click
-            nodeClicked(data.conceptid, lang);
-
-            // Make "clicked" node active
-            jQuery("a.active").removeClass("active");
-            getConceptLinkEl(new_concept_id).children("a").addClass("active");
-
-            // Clear the search box
-            jQuery("#search_box").val("");
-          } else {
-            nodeClicked(data.conceptid, lang);
-
-            // Clear the search box
-            jQuery("#search_box").val("");
-          }
-        } else {
-          // Are we jumping into the ontology? If so, get the whole tree
-          jQuery.bioportal.ont_pages["classes"].retrieve_and_publish();
-          getConceptLinkEl(new_concept_id)
-        }
-      } else {
-        jQuery.blockUI({ message: '<h1><img src="<%= asset_path("jquery.simple.tree/spinner.gif") %>" /> Loading Class...</h1>', showOverlay: false });
-        if (document.getElementById(new_concept_id) !== null) {
-          // We have a visible node that's been clicked, get the details for that node
-          jQuery.bioportal.ont_pages["classes"].published = true;
-          nodeClicked(new_concept_id, lang);
-        } else {
-          // Get a new copy of the tree because our concept isn't visible
-          // This could be due to using the forward/back button
-          jQuery.bioportal.ont_pages["classes"].retrieve_and_publish();
-        }
-      }
-
-      concept_label = (getConceptLinkEl(new_concept_id).html() == null) ? "" : " - " + getConceptLinkEl(new_concept_id).html().trim().replace(/<(?:.|\n)*?>/gm, '');
-      jQuery.bioportal.ont_pages["classes"].page_name =  ontology_name + concept_label + " - Classes"
-      document.title = jQuery.bioportal.ont_pages["classes"].page_name + " | " + org_site;
-    } else {
-      // Retrieve new concept and display tree
-      concept_label = (getConceptLinkEl(new_concept_id).html() == null) ? "" : " - " + getConceptLinkEl(new_concept_id).html().trim().replace(/<(?:.|\n)*?>/gm, '');
-      jQuery.bioportal.ont_pages["classes"] = new jQuery.bioportal.OntologyPage("classes", "/ontologies/" + ontology_id + "?p=classes", "Problem retrieving classes", ontology_name + concept_label + " - Classes", "Classes");
-      jQuery.bioportal.ont_pages["classes"].retrieve_and_publish();
-    }
-
-    if (typeof new_concept_id !== 'undefined') {
-      concept_id = new_concept_id;
-    }
-  }
-}
-
-function getConceptLinkEl(concept_id) {
-  // Escape special chars so jQuery selector doesn't break, see:
-  // http://docs.jquery.com/Frequently_Asked_Questions#How_do_I_select_an_element_by_an_ID_that_has_characters_used_in_CSS_notation.3F
-  var el_new_concept_link = document.getElementById(concept_id);
-  return jQuery(el_new_concept_link);
-}
-
-function showOntologyContent(content_section) {
-  jQuery.bioportal.ont_pages[content_section].publish();
-  jQuery("#ont-" + content_section + "-tab").tab("show");
-}
-
-// Prevent the default behavior of clicking the ontology page links
-// Instead, fire some history events
-var nav_ont = function(link) {
-  var page = jQuery(link).attr("data-bp-ont-page");
-
-  if (jQuery(document).data().bp.ont_viewer.lang_sections.includes(page)) {
-      jQuery("#navbar-ontology li.lang-dropdown").show();
-  } else {
-      jQuery("#navbar-ontology li.lang-dropdown").hide();
-  }
-  History.pushState({p:page}, jQuery.bioportal.ont_pages[page].page_name + " | " + jQuery(document).data().bp.ont_viewer.org_site, "?p=" + page);
-}
-
-jQuery(document).ready(function() {
-  var metadata_only = jQuery(document).data().bp.ont_viewer.metadata_only;
-  if (!pageUsesTreeView()) {
-    if (metadata_only === undefined || metadata_only === 'false') {
-      return;
-    }
-  }
-
-  // Set appropriate title
-  var content_section = jQuery(document).data().bp.ont_viewer.content_section || "";
-  var ontology_name = jQuery(document).data().bp.ont_viewer.ontology_name;
-  var org_site = jQuery(document).data().bp.ont_viewer.org_site;
-  var content_section_obj = jQuery.bioportal.ont_pages[content_section] || {};
-  var title = (content_section == null) ? ontology_name + " | " + org_site
-    : content_section_obj.page_name + " | " + org_site;
-  document.title = title;
-
-  // Navigation buttons
-  jQuery("#navbar-ontology a").on("click", function(e){
-    e.preventDefault();
-    nav_ont(this);
-  });
-
-  jQuery(".click_versions_collapse").click(function(){
-    var collapse = "#" + jQuery(this).parent().attr("id") + "_collapsible";
-    var icon = "#" + jQuery(this).parent().attr("id") + "_icon";
-    jQuery(icon).toggleClass("ui-icon-triangle-1-e");
-    jQuery(icon).toggleClass("ui-icon-triangle-1-s");
-    jQuery(collapse).toggle();
-  });
-
-  jQuery("#version_toggle").click(function(event){
-    event.preventDefault();
-    jQuery("#ontology_versions tr.hidden_select").toggleClass("hidden_ont");
-  });
-
-  jQuery("#version_toggle").toggle(
-    function() {
-      jQuery(this).text("less...");
-    },
-    function() {
-      jQuery(this).text("more...");
-  });
-
-  // Set up the JS version of the active content section
-  jQuery.bioportal.ont_pages[content_section].manuelRetrieve(jQuery("#ont_" + content_section + "_content").html());
-  jQuery.bioportal.ont_pages[content_section].published = true;
-  if (typeof jQuery.bioportal.ont_pages[content_section].init === 'function') {
-    jQuery.bioportal.ont_pages[content_section].init(jQuery.bioportal.ont_pages[content_section]);
-  }
-  const triggerEl = document.querySelector(`#navbar-ontology a[data-bs-target="#ont_${content_section}_content"]`);
-  const tabTrigger = new bootstrap.Tab(triggerEl);
-  bootstrap.Tab.getInstance(triggerEl).show();
-
-  // Retrieve AJAX content if not already displayed
-  if ($.QueryString["skip_ajax_tabs"] != 'true') {
-    var metadataOnly = metadata_only.toLowerCase().trim();
-
-    if (content_section !== "classes" && metadataOnly !== "true") {
-      jQuery.bioportal.ont_pages["classes"].retrieve();
-    }
-
-    if (content_section !== "properties" && metadataOnly !== "true") {
-      jQuery.bioportal.ont_pages["properties"].retrieve();
-    }
-
-    if (content_section !== "summary") {
-      jQuery.bioportal.ont_pages["summary"].retrieve();
-    }
-
-    if (content_section !== "mappings" && metadataOnly !== "true") {
-      jQuery.bioportal.ont_pages["mappings"].retrieve();
-    }
-
-    if (content_section !== "notes") {
-      jQuery.bioportal.ont_pages["notes"].retrieve();
-    }
-
-    if (content_section !== "widgets" && metadataOnly !== "true") {
-      jQuery.bioportal.ont_pages["widgets"].retrieve();
-    }
-  }
-});
-
-// Parent class to ontology pages
-// We're using a monkeypatched function to setup prototyping, see bioportal.js
-jQuery.bioportal.OntologyPage = function(id, location_path, error_string, page_name, nav_text, init) {
-  this.id = id;
-  this.location_path = location_path;
-  this.error_string = error_string;
-  this.page_name = page_name;
-  this.error_string = error_string;
-  this.nav_text = nav_text;
-  this.errored = false;
-  this.html;
-  this.published = false;
-  this.retrieved = false;
-  this.init = init || null;
-
-  this.retrieve = function(){
-    jQuery.ajax({
-      dataType: "html",
-      url: this.location_path,
-      context: this,
-      success: function(data){
-        this.html = data;
-        this.retrieved = true;
-      },
-      error: function(){
-        this.errored = true;
-        this.retrieved = true;
-      }
-    });
-  };
-
-  this.manuelRetrieve = function(html) {
-    this.html = html;
-    this.retrieved = true;
-  }
-
-  this.retrieve_and_publish = function(){
-    jQuery.ajax({
-      dataType: "html",
-      url: this.location_path,
-      context: this,
-      success: function(data){
-        this.manuelRetrieve(data);
-        this.publish();
-      },
-      error: function(){
-        this.errored = true;
-        this.manuelRetrieve(null);
-        this.publish();
-      }
-    });
-  };
-
-  this.publishAction = function() {
-    jQuery("#ont_" + this.id + "_content").html("");
-    jQuery("#ont_" + this.id + "_content").html(this.html);
-    document.title = jQuery.bioportal.ont_pages["classes"].page_name + " | " + jQuery(document).data().bp.ont_viewer.org_site;
-    if (typeof this.init === 'function') {
-      this.init(this);
-    }
-    jQuery.unblockUI();
-    this.published = true;
-  }
-
-  this.publish = function(){
-    if (this.errored === false) {
-      if (this.published) { return; }
-      if (this.retrieved) {
-        this.publishAction();
-      } else {
-        var _this = this;
-        var publishRetry = setInterval(function() {
-          // console.log("retrying!!! " + _this.retrieved)
-          if (_this.retrieved) {
-            // console.log("publishing!!!")
-            _this.publishAction();
-            clearInterval(publishRetry);
-          }
-        }, 100);
-      }
-    } else {
-      jQuery("#ont_" + this.id + "_content").html("");
-      jQuery("#ont_" + this.id + "_content").html("<div style='padding: 1em;'>" + this.error_string + "</div>");
-      jQuery.unblockUI();
-    }
-  };
-};
-
-(function(window,undefined) {
-  // Setup AJAX page objects
-  jQuery.bioportal.ont_pages = [];
-
-  jQuery.bioportal.ont_pages["classes"] = new jQuery.bioportal.OntologyPage("classes", "/ontologies/" + jQuery(document).data().bp.ont_viewer.ontology_id + "?p=classes&ajax=true" + jQuery(document).data().bp.ont_viewer.concept_param, "Problem retrieving classes", jQuery(document).data().bp.ont_viewer.ontology_name + jQuery(document).data().bp.ont_viewer.concept_name_title + " - Classes", "Classes", function() {
-    jQuery(document).data().bp.classesTab.search_box_init();
-    setupNotesFacebox();
-  });
-
-  jQuery.bioportal.ont_pages["properties"] = new jQuery.bioportal.OntologyPage("properties", "/ontologies/" + jQuery(document).data().bp.ont_viewer.ontology_id + "?p=properties&ajax=true", "Problem retrieving properties", jQuery(document).data().bp.ont_viewer.ontology_name + " - Properties", "Properties", function() {
-    jQuery(document).data().bp.ontPropertiesTab.init();
-  });
-
-  jQuery.bioportal.ont_pages["summary"] = new jQuery.bioportal.OntologyPage("summary", "/ontologies/" + jQuery(document).data().bp.ont_viewer.ontology_id + "?p=summary&ajax=true", "Problem retrieving summary", jQuery(document).data().bp.ont_viewer.ontology_name + " - Summary", "Summary");
-
-  jQuery.bioportal.ont_pages["mappings"] = new jQuery.bioportal.OntologyPage("mappings",
-    "/ontologies/" + jQuery(document).data().bp.ont_viewer.ontology_id + "?p=mappings&ajax=true",
-    "Problem retrieving mappings", jQuery(document).data().bp.ont_viewer.ontology_name + " - Mappings",
-    "Mappings", function() {
-    if (! $.fn.DataTable.isDataTable('#ontology_content #mapping_count_table')) {
-      jQuery('#ontology_content #mapping_count_table').DataTable({
-        'order': [[1, 'desc'], [0, 'asc']],
-        'paging': false,
-        'searching': false
-      });
-    }
-    jQuery(".facebox").facebox();
-  });
-
-  jQuery.bioportal.ont_pages["notes"] = new jQuery.bioportal.OntologyPage("notes", "/ontologies/" + jQuery(document).data().bp.ont_viewer.ontology_id + "?p=notes&ajax=true", "Problem retrieving notes", jQuery(document).data().bp.ont_viewer.ontology_name + " - Notes", "Notes", function() {
-    setupNotesFacebox();
-    jQuery("#ont_notes_content .link_button").button();
-  });
-
-  jQuery.bioportal.ont_pages["widgets"] = new jQuery.bioportal.OntologyPage("widgets", "/ontologies/" + jQuery(document).data().bp.ont_viewer.ontology_id + "?p=widgets&ajax=true", "Problem retrieving widgets", jQuery(document).data().bp.ont_viewer.ontology_name + " - Widgets", "Widgets");
-})(window);
\ No newline at end of file
diff --git a/app/assets/javascripts/bp_visualize.js.erb b/app/assets/javascripts/bp_visualize.js.erb
deleted file mode 100644
index 9fdcebe5b..000000000
--- a/app/assets/javascripts/bp_visualize.js.erb
+++ /dev/null
@@ -1,141 +0,0 @@
-(function(window,undefined) {
-  // Abort it not right page
-  var path = currentPathArray();
-  if (path[0] !== "ontologies" || (path[0] === "ontologies" && path.length !== 2)) {
-    return;
-  }
-
-  jQuery(document).data().bp.classesTab = {};
-
-  function jumpToValue(li){
-    jQuery.blockUI({ message: '<h1><img src="<%= asset_path("jquery.simple.tree/spinner.gif") %>" /> Loading Class...</h1>', showOverlay: false });
-
-    if( !!li.extra ){
-      var sValue = jQuery("#jump_to_concept_id").val();
-
-      // TODO_REV: Handle flat ontologies (replace `if (false)` with `if @ontology.flat?`)
-      if (false) {
-        History.pushState({p:"classes", conceptid:sValue, suid:"jump_to", flat:true, label:li.extra[4]}, jQuery.bioportal.ont_pages["classes"].page_name + " | " + org_site, "?p=classes&conceptid=" + sValue);
-      } else {
-        document.location="/ontologies/"+jQuery(document).data().bp.ontology.acronym+"/?p=classes&conceptid="+encodeURIComponent(sValue)+"&jump_to_nav=true";
-        jQuery.blockUI({ message: '<h1><img src="<%= asset_path("jquery.simple.tree/spinner.gif") %>" /> Loading Class...</h1>', showOverlay: false });
-        return;
-      }
-    }
-  }
-
-  // Sets a hidden form value that records the concept id when a concept is chosen in the jump to
-  // This is a workaround because the default autocomplete search method cannot distinguish between two
-  // concepts that have the same preferred name but different ids.
-  function jumpToSelect(li){
-    jQuery("#jump_to_concept_id").val(li.extra[0]);
-    jumpToValue(li);
-  }
-
-  // Formats the Jump To search results
-  function formatItem(row) {
-    var specials = new RegExp("[.*+?|()\\[\\]{}\\\\]", "g"); // .*+?|()[]{}\
-    var keywords = jQuery("#search_box").val().trim().replace(specials, "\\$&").split(' ').join('|');
-    var regex = new RegExp( '(' + keywords + ')', 'gi' );
-    var matchType = "";
-    if (typeof row[2] !== "undefined" && row[2] !== "") {
-      matchType = " <span style='font-size:9px;color:blue;'>(" + row[2] + ")</span>";
-    }
-
-    if (row[0].match(regex) == null) {
-      var contents = row[6].split("\t");
-      var synonym = contents[0] || "";
-      synonym = synonym.split(";");
-      if (synonym !== "") {
-        var matchSynonym = jQuery.grep(synonym, function(e){
-          return e.match(regex) != null;
-        });
-        row[0] = row[0] + " (synonym: " + matchSynonym.join(" ") + ")";
-      }
-    }
-    // Cleanup obsolete class tag before markup for search keywords.
-    if(row[0].indexOf("[obsolete]") != -1) {
-      row[0] = row[0].replace("[obsolete]", "");
-      obsolete_prefix = "<span class='obsolete_class' title='obsolete class'>";
-      obsolete_suffix = "</span>";
-    } else {
-      obsolete_prefix = "";
-      obsolete_suffix = "";
-    }
-    // Markup the search keywords.
-    var row0_markup = row[0].replace(regex, "<b><span style='color:#006600;'>$1</span></b>");
-    return obsolete_prefix + row0_markup + matchType + obsolete_suffix;
-  }
-
-  // The tab system
-  jQuery(".tab").live("click", function(){
-    var tabId = jQuery(this).children("a:first").attr("href").replace("#", "");
-    showClassesTab(tabId);
-  });
-
-  function showClassesTab(tabId) {
-    // Get the target content area
-    var target = document.getElementById(tabId + "_content");
-
-    if (target != null) {
-      jQuery(".tab_container").addClass("not_visible");
-      jQuery(target).removeClass("not_visible");
-      jQuery(".tab").removeClass("selected");
-      jQuery("#" + tabId + "_top").addClass("selected");
-      jQuery(document).trigger("classes_tab_visible");
-    }
-
-    jQuery(document).trigger("visualize_tab_change", [{tabType: tabId}]);
-  }
-
-  function isNotEmpty(arr) {
-    return Array.isArray(arr) && arr.length > 0;
-  }
-
-  // Only show BioMixer when tab is clicked
-  jQuery(document).live("visualize_tab_change", function(event, data){
-    if (data.tabType == "visualization") {
-      jQuery("#biomixer_iframe").attr("src", jQuery("#biomixer_iframe").data("src"));
-    }
-  });
-
-  jQuery(document).data().bp.classesTab.search_box_init = function(){
-    if (jQuery("#search_box").bioportal_autocomplete) {
-      let extraParams = {
-        objecttypes: 'class'
-      };
-
-      if (isNotEmpty(jQuery(document).data().bp.ont_viewer.submission_lang)) {
-        extraParams["lang"] = jQuery(document).data().bp.ont_viewer.lang;
-      }
-
-      jQuery("#search_box").bioportal_autocomplete("/search/json_search/"+jQuery(document).data().bp.ontology.acronym, {
-        extraParams: extraParams,
-        selectFirst: true,
-        lineSeparator: "~!~",
-        matchSubset: 0,
-        minChars: 1,
-        maxItemsToShow: 25,
-        onFindValue: jumpToValue,
-        onItemSelect: jumpToSelect,
-        formatItem: formatItem
-      });
-    }
-  }
-
-  jQuery(document).ready(function(){
-    let searchParams = new URLSearchParams(window.location.search);
-    if (searchParams.has('t')) {
-      showClassesTab(searchParams.get('t'));
-    }
-
-    jQuery("#classPermalinkModal").on("shown.bs.modal", function (e) {
-      var currentPurl = jQuery("a.class-permalink").data("current-purl");
-      jQuery("#purl_input").val(currentPurl);
-    })
-
-    jQuery("#purl_input").on("click", function () {
-      jQuery(this).select();
-    });
-  });
-})(window);
diff --git a/app/assets/stylesheets/bioportal.scss b/app/assets/stylesheets/bioportal.scss
index 9b6a6cabc..969632355 100644
--- a/app/assets/stylesheets/bioportal.scss
+++ b/app/assets/stylesheets/bioportal.scss
@@ -1,3 +1,19 @@
+.turbo-progress-bar {
+  height: 5px;
+  background-color: var(--admin-color);
+}
+
+a{
+  text-decoration: none !important;
+}
+p {
+  margin-bottom: 0;
+}
+
+body{
+  position: relative;
+}
+
 .alignright {
   float:right;
 }
@@ -518,7 +534,7 @@ tr.mainresource td {
 }
 
 .obsolete_class {
-  color: rgb(100,100,100);
+  color: rgb(100,100,100)!important;
   cursor: help;
   font-style: oblique;
 }
@@ -912,13 +928,16 @@ button.fg-button-menu, button.fg-button {
 /************************************
  * Top navigation bar
  ************************************/
-div#topNavigationToggler a.btn.btn-login {
-  color: #C58612;
-  border-color: #C58612;
-
-  &:hover {
-    color: #234979;
-    background-color: #C58612;
+div#topNavigationToggler {
+  justify-content: space-between;
+  a.btn.btn-login {
+    color: #C58612;
+    border-color: #C58612;
+
+    &:hover {
+      color: #234979;
+      background-color: #C58612;
+    }
   }
 }
 
@@ -961,6 +980,8 @@ div#topNavigationToggler a.btn.btn-login {
   display: none;
 }
 
+
+
 .no_right_border {
   border-right: none !important;
 }
@@ -1116,4 +1137,23 @@ a.truncated_less, a.truncated_more {
 .highlighted .search_ontology_acronym {
   color: white;
 }
+.hide {
+  display: none !important;
+}
+
+.empty-state {
+  display: none;
+
+  &:only-child {
+    display: revert;
+  }
+
+}
+
+turbo-frame[busy] > .hide-if-loading, .show-if-loading {
+  display: none;
+}
+turbo-frame[busy] ~ .show-if-loading {
+  display: inline-block;
+}
 
diff --git a/app/assets/stylesheets/bootstrap_overrides.scss b/app/assets/stylesheets/bootstrap_overrides.scss
index 403c35cbf..b1cb947fd 100644
--- a/app/assets/stylesheets/bootstrap_overrides.scss
+++ b/app/assets/stylesheets/bootstrap_overrides.scss
@@ -1,15 +1,30 @@
 /* Style for Bootstrap sticky footer
    https://getbootstrap.com/docs/5.2/examples/sticky-footer-navbar/
 -------------------------------------------------- */
+.nav-tabs {
+  --bs-nav-tabs-link-active-color: white;
+  --bs-nav-tabs-link-active-bg: #234979;
+}
+
 main > .container-fluid {
   padding: 80px 15px 0;
 }
 
 .footer {
+  width: 100%;
+  height: 300px; /* Set the fixed height of the footer here */
+  color: #757575;
   background-color: #ccc;
   color: #757575;
 }
 
+body{
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+}
+/* Footer
+-------------------------------------------------- */
 footer.footer h6 {
   font-weight: bold;
 }
@@ -18,7 +33,18 @@ footer.footer .list-inline-item:not(:last-child) {
   margin-right: 1rem;
 }
 
-/* TODO: remove styles below this comment when we eliminate Angular */
+.not-disabled {
+  background-color: white !important;
+}
+
+@media only screen and (max-width: 992px) {
+  body {
+    margin-bottom: 350px;
+  }
+  .footer {
+    height: 350px;
+  }
+}
 
 .ontologies.index main.grid-container {
   padding: 80px 15px 0;
diff --git a/app/assets/stylesheets/submissions.scss b/app/assets/stylesheets/submissions.scss
index 41e12ec32..47dc99d2c 100644
--- a/app/assets/stylesheets/submissions.scss
+++ b/app/assets/stylesheets/submissions.scss
@@ -8,4 +8,11 @@ div#contacts  div.contact.col-sm-10.offset-sm-2 {
 
 #submissionLocation small.form-text {
   margin-bottom: 0.5em;
+}
+.tab-content{
+	position: relative;
+}
+.spacer {
+	margin-left: 10px; 
+	margin-top: -13px;
 }
\ No newline at end of file

From bed58429d9f846f7f77ba2fc7c2e4383ea312cbe Mon Sep 17 00:00:00 2001
From: Syphax <gs_bouazzouni@esi.dz>
Date: Sat, 19 Oct 2024 17:36:04 +0200
Subject: [PATCH 13/14] remove some custom bioportal styles

---
 app/assets/stylesheets/bioportal.scss         | 57 +------------------
 .../components/tabs_container.scss            |  2 +-
 app/assets/stylesheets/ontologies.scss        | 36 ------------
 app/views/concepts/_show.html.haml            |  2 +-
 4 files changed, 4 insertions(+), 93 deletions(-)

diff --git a/app/assets/stylesheets/bioportal.scss b/app/assets/stylesheets/bioportal.scss
index 969632355..41e2b39d8 100644
--- a/app/assets/stylesheets/bioportal.scss
+++ b/app/assets/stylesheets/bioportal.scss
@@ -51,63 +51,11 @@ body{
 #hd ul li a {
   color:#fff;
 }
-.tabs {
-  float:left;
-  width:100%;
-  background: image-url('layout/subnav_bg.png') repeat-x;
-  height:24px;
-  display:block;
-  border-bottom:1px solid #bcc6d0;
-  font-size:90%;
-  overflow: hidden;
-}
-.tabs ul {
-  margin:0;
-}
-.tabs li {
-  float:left;
-  display:inline;
-  border-left:1px solid #bcc6d0;
-  height:24px;
-}
-.tabs li:hover {
-  background:#efefef;
-}
-.tabs li.first {
-  border-left:none;
-  padding-left:20px;
-}
-.tabs a {
-  float:left;
-  display:block;
-  padding:5px 20px 5px 5px;
-  color:#000;
-  text-decoration:none;
-}
-.tabs a.close {
-  padding:6px 0 0 5px;
-}
-.tabs li.selected {
-  background:#234979;
-  border-top:1px solid #8ca0b9;
-  height:23px;
-}
-.tabs li.selected a {
-  color:#fff;
-  padding-top:4px;
-}
-.tab_container {
-}
+
+
 #bd {
   background: #fff;
 }
-#bd hr {
-  border:0;
-  height:1px;
-  color:#e9eaeb;
-  background:#e9eaeb;
-  margin:10px 0;
-}
 
 #grab-point {
   background: image-url('layout/bar-ext.gif') repeat-y;
@@ -1156,4 +1104,3 @@ turbo-frame[busy] > .hide-if-loading, .show-if-loading {
 turbo-frame[busy] ~ .show-if-loading {
   display: inline-block;
 }
-
diff --git a/app/assets/stylesheets/components/tabs_container.scss b/app/assets/stylesheets/components/tabs_container.scss
index c215cfe70..3fb795470 100644
--- a/app/assets/stylesheets/components/tabs_container.scss
+++ b/app/assets/stylesheets/components/tabs_container.scss
@@ -54,7 +54,7 @@
 
 .tabs-container .tab-items .active hr {
   display: block;
-  border: 1px solid var(--primary-color);
+  border: 1px solid var(--primary-color) !important;
   opacity: 100%;
 }
 .container{
diff --git a/app/assets/stylesheets/ontologies.scss b/app/assets/stylesheets/ontologies.scss
index 3e187c6f2..e1b23a8db 100644
--- a/app/assets/stylesheets/ontologies.scss
+++ b/app/assets/stylesheets/ontologies.scss
@@ -195,42 +195,6 @@ $ont-show-bg-color: #e9ecef;
   -webkit-box-shadow: none;
 }
 
-#bd .bd_content .cls-info-container .tabs {
-  height: 24px;
-  float: left;
-}
-
-#bd .bd_content .cls-info-container .tabs ul {
-  margin: 0;
-  float: left;
-}
-
-#bd .bd_content .cls-info-container .tabs li {
-  margin: 0;
-}
-
-#bd .bd_content .cls-info-container .tabs li.first {
-  padding-left: 0;
-}
-
-#bd .bd_content .cls-info-container .tabs a {
-  padding: 0 15px 0 15px;
-}
-
-#bd .bd_content .cls-info-container #contents {
-  float: left;
-  width: 100%;
-  overflow: auto;
-
-  #details_content, #mappings_content {
-    a {
-      text-decoration: none;
-    }
-    a:hover {
-      text-decoration: underline;
-    }
-  }
-}
 
 #mappings_top.tab {
   border-right: 1px solid #bcc6d0;
diff --git a/app/views/concepts/_show.html.haml b/app/views/concepts/_show.html.haml
index f6b67d557..d28aefd6c 100644
--- a/app/views/concepts/_show.html.haml
+++ b/app/views/concepts/_show.html.haml
@@ -3,7 +3,7 @@
     %div{:style => "padding: 100px 0; font-size: larger; font-weight: bold; text-align: center;"}
       Use the "Jump To" to find a class and display details, visualization, notes, and mappings
   - else
-    .cls-info-container
+    %div
       %ul.nav.nav-tabs.tabs
         %li#details_top.nav-item
           %button.nav-link.active.py-1{:href => "#details" , data:{'bs-toggle': 'tab', 'bs-target': '#details_content'}} Details

From 0e429846f17fb5e5bf2cc96a2b4a265cb9102d4d Mon Sep 17 00:00:00 2001
From: Syphax <gs_bouazzouni@esi.dz>
Date: Sat, 19 Oct 2024 19:20:47 +0200
Subject: [PATCH 14/14] add again the multilingual feature to the classes tab

---
 app/controllers/concepts_controller.rb        |  3 +-
 app/helpers/application_helper.rb             | 27 +++++++-------
 app/helpers/ontologies_helper.rb              |  2 +-
 .../class_search_auto_complete_controller.js  |  6 ++--
 .../ontoportal_autocomplete_controller.js     | 19 ++++++++--
 .../controllers/turbo_frame_controller.js     | 36 +++++++++++++++++--
 app/javascript/mixins/useHistory.js           |  2 +-
 app/views/concepts/_child_nodes.html.haml     |  4 +--
 app/views/ontologies/visualize.html.haml      | 11 +++---
 9 files changed, 80 insertions(+), 30 deletions(-)

diff --git a/app/controllers/concepts_controller.rb b/app/controllers/concepts_controller.rb
index 0c6c08bb5..44a4eef34 100644
--- a/app/controllers/concepts_controller.rb
+++ b/app/controllers/concepts_controller.rb
@@ -16,7 +16,8 @@ def show_concept
 
     # Note that find_by_acronym includes views by default
     @ontology = LinkedData::Client::Models::Ontology.find_by_acronym(params[:ontology_id]).first
-    @concept = @ontology.explore.single_class({full: true}, params[:id])
+    @submission = get_ontology_submission_ready(@ontology)
+    @concept = @ontology.explore.single_class({full: true, lang: helpers.request_lang(@submission)}, params[:id])
 
     not_found if @concept.nil?
     gather_details
diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
index cd72077a7..cc96ad046 100644
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@@ -48,15 +48,15 @@ def remove_owl_notation(string)
     string
   end
 
-  def draw_tree(root, id = nil, type = "Menu")
+  def draw_tree(root, id = nil, submission = @submission || @submission_latest)
     if id.nil?
       id = root.children.first.id
     end
     # TODO: handle tree view for obsolete classes, e.g. 'http://purl.obolibrary.org/obo/GO_0030400'
-    raw build_tree(root, "", id)  # returns a string, representing nested list items
+    raw build_tree(root, "", id, submission)  # returns a string, representing nested list items
   end
 
-  def build_tree(node, string, id)
+  def build_tree(node, string, id, submission)
     if node.children.nil? || node.children.length < 1
       return string # unchanged
     end
@@ -70,19 +70,20 @@ def build_tree(node, string, id)
 
       # This fake root will be present at the root of "flat" ontologies, we need to keep the id intact
       li_id = child.id.eql?('bp_fake_root') ? 'bp_fake_root' : short_uuid
-
+      lang = request_lang(submission)
+      ontology_acronym = submission.ontology.acronym
       if child.id.eql?('bp_fake_root')
         string << tree_link_to_concept(li_id: li_id, child: child, ontology_acronym: '',
-                                       active_style: active_style)
+                                       active_style: active_style, lang: lang)
       else
-        string << tree_link_to_concept(li_id: li_id, child: child, ontology_acronym: child.explore.ontology.acronym,
-                                       active_style: active_style)
+        string << tree_link_to_concept(li_id: li_id, child: child, ontology_acronym: ontology_acronym,
+                                       active_style: active_style, lang: lang)
 
         if child.hasChildren && !child.expanded?
-          string << tree_link_to_children(li_id: li_id, child: child)
+          string << tree_link_to_children(li_id: li_id, child: child, ontology_acronym: ontology_acronym, lang: lang)
         elsif child.expanded?
           string << '<ul>'
-          build_tree(child, string, id)
+          build_tree(child, string, id, submission)
           string << '</ul>'
         end
         string << '</li>'
@@ -92,15 +93,15 @@ def build_tree(node, string, id)
     string
   end
 
-  def tree_link_to_concept(li_id:, child:, ontology_acronym:, active_style:)
+  def tree_link_to_concept(li_id:, child:, ontology_acronym:, active_style:, lang: )
     page_name = ontology_viewer_page_name(ontology_acronym, child.prefLabel, 'Classes')
     open = child.expanded? ? "class='open'" : ''
-    href = ontology_acronym.blank? ? '#' :  "/ontologies/#{child.explore.ontology.acronym}/concepts/?id=#{CGI.escape(child.id)}"
+    href = ontology_acronym.blank? ? '#' :  "/ontologies/#{child.explore.ontology.acronym}/concepts/?id=#{CGI.escape(child.id)}&lang=#{lang}"
     "<li #{open} id='#{li_id}'><a id='#{CGI.escape(child.id)}' data-bp-ont-page-name='#{page_name}' data-turbo=true data-turbo-frame='concept_show' href='#{href}' #{active_style}> #{child.prefLabel({ use_html: true })}</a>"
   end
 
-  def tree_link_to_children(li_id:, child:)
-    "<ul class='ajax'><li id='#{li_id}'><a id='#{CGI.escape(child.id)}' href='/ajax_concepts/#{child.explore.ontology.acronym}/?conceptid=#{CGI.escape(child.id)}&callback=children'>ajax_class</a></li></ul>"
+  def tree_link_to_children(li_id:, child:, ontology_acronym:, lang: )
+    "<ul class='ajax'><li id='#{li_id}'><a id='#{CGI.escape(child.id)}' href='/ajax_concepts/#{ontology_acronym}/?conceptid=#{CGI.escape(child.id)}&callback=children&lang=#{lang}'>ajax_class</a></li></ul>"
   end
 
   def loading_spinner(padding = false, include_text = true)
diff --git a/app/helpers/ontologies_helper.rb b/app/helpers/ontologies_helper.rb
index 6346d2e73..314efca25 100644
--- a/app/helpers/ontologies_helper.rb
+++ b/app/helpers/ontologies_helper.rb
@@ -3,7 +3,7 @@
 
 module OntologiesHelper
 
-  LANGUAGE_FILTERABLE_SECTIONS = %w[classes properties].freeze
+  LANGUAGE_FILTERABLE_SECTIONS = %w[classes].freeze
 
   def additional_details
     return '' if $ADDITIONAL_ONTOLOGY_DETAILS.nil? || $ADDITIONAL_ONTOLOGY_DETAILS[@ontology.acronym].nil?
diff --git a/app/javascript/controllers/class_search_auto_complete_controller.js b/app/javascript/controllers/class_search_auto_complete_controller.js
index 831cfee41..9e70100bb 100644
--- a/app/javascript/controllers/class_search_auto_complete_controller.js
+++ b/app/javascript/controllers/class_search_auto_complete_controller.js
@@ -3,7 +3,9 @@ import OntoportalAutocompleteController from "./ontoportal_autocomplete_controll
 // Connects to data-controller="class-search"
 export default class extends OntoportalAutocompleteController {
     static values = {
-        spinnerSrc: String
+        spinnerSrc: String,
+        ontologyAcronym: String,
+        lang: String,
     }
     connect() {
         super.connect()
@@ -24,7 +26,7 @@ export default class extends OntoportalAutocompleteController {
         // Appropriate value selected
         if (li.extra) {
             let sValue = jQuery("#jump_to_concept_id").val()
-            Turbo.visit("/ontologies/" + jQuery(document).data().bp.ontology.acronym + "/?p=classes&conceptid=" + encodeURIComponent(sValue) + "&jump_to_nav=true")
+            Turbo.visit("/ontologies/" + this.ontologyAcronymValue + "/?p=classes&lang=" + this.langValue + "&conceptid=" + encodeURIComponent(sValue) + "&jump_to_nav=true")
         }
     }
 
diff --git a/app/javascript/controllers/ontoportal_autocomplete_controller.js b/app/javascript/controllers/ontoportal_autocomplete_controller.js
index 0bfbe0f8f..d0bfb07ee 100644
--- a/app/javascript/controllers/ontoportal_autocomplete_controller.js
+++ b/app/javascript/controllers/ontoportal_autocomplete_controller.js
@@ -4,13 +4,15 @@ import {useBioportalAutoComplete} from "../mixins/useBioportalAutoComplete";
 export default class extends Controller {
     static  values = {
         objectTypes: String, default: 'class',
-        ontologyAcronym: String
+        ontologyAcronym: String,
+        lang: String,
+        submissionLang: Array
     }
 
     connect() {
         jQuery(document).ready(() => {
             useBioportalAutoComplete(this.element, "/search/json_search/" + this.ontologyAcronymValue,{
-                extraParams: {objecttypes: this.objectTypesValue},
+                extraParams: this.extraParams(),
                 selectFirst: true,
                 lineSeparator: "~!~",
                 matchSubset: 0,
@@ -66,5 +68,18 @@ export default class extends Controller {
         return obsolete_prefix + row0_markup + matchType + obsolete_suffix;
     }
 
+    extraParams() {
+        let extraParams = {
+            objecttypes: this.objectTypesValue
+        };
+        if (this.#isNotEmpty(this.submissionLangValue)) {
+            extraParams["lang"] = this.langValue
+        }
+        return extraParams
+    }
+
+    #isNotEmpty(arr) {
+        return Array.isArray(arr) && arr.length > 0;
+    }
 
 }
diff --git a/app/javascript/controllers/turbo_frame_controller.js b/app/javascript/controllers/turbo_frame_controller.js
index 41c67dd5d..aacc99eca 100644
--- a/app/javascript/controllers/turbo_frame_controller.js
+++ b/app/javascript/controllers/turbo_frame_controller.js
@@ -24,8 +24,40 @@ export default class extends Controller {
             this.frame.innerHTML = this.placeHolderValue
         } else {
             this.frame.innerHTML = ""
-            this.urlValue = new HistoryService().getUpdatedURL(this.urlValue, data)
-            this.frame.src = this.urlValue
+
+            if(this.#isCurrentPage()){
+                this.urlValue = this.#currentPageUrl()
+            }
+
+            this.urlValue = this.#updatedPageUrl(data)
+
+            this.frame.src  = this.urlValue
         }
     }
+
+    #isCurrentPage(){
+
+        let currentDisplayedUrl = new URL(this.#currentPageUrl(), document.location.origin)
+
+        let initUrl = new URL(this.urlValue, document.location.origin)
+
+        if (currentDisplayedUrl.toString().includes(this.urlValue)){
+            return true
+        } else if (currentDisplayedUrl.searchParams.has('p') && currentDisplayedUrl.searchParams.get('p') === initUrl.searchParams.get('p')){
+            // this is a custom fix for only the ontology viewer page,
+            // that use the parameter ?p=section to tell which section is displayed
+            return true
+        }
+
+        return false
+    }
+
+
+    #currentPageUrl(){
+        return document.location.pathname + document.location.search
+    }
+
+    #updatedPageUrl(newUrlParams){
+        return new HistoryService().getUpdatedURL(this.urlValue, newUrlParams)
+    }
 }
diff --git a/app/javascript/mixins/useHistory.js b/app/javascript/mixins/useHistory.js
index ce895f1a6..64e65d167 100644
--- a/app/javascript/mixins/useHistory.js
+++ b/app/javascript/mixins/useHistory.js
@@ -61,7 +61,7 @@ export class HistoryService {
 
     #updateURLFromState(urlParams, state) {
         Object.entries(state).forEach(([key, val]) => {
-            if (key !== 'p'){
+            if (key !== 'p'  && !urlParams.has(key)){
                 urlParams.set(key, val)
             }
         })
diff --git a/app/views/concepts/_child_nodes.html.haml b/app/views/concepts/_child_nodes.html.haml
index 7a2e76c50..bb4cd6873 100644
--- a/app/views/concepts/_child_nodes.html.haml
+++ b/app/views/concepts/_child_nodes.html.haml
@@ -1,7 +1,7 @@
 - output =""
 - for child in @children
-  - output << tree_link_to_concept(li_id: short_uuid, child: child, ontology_acronym: child.explore.ontology.acronym, active_style: '')
+  - output << tree_link_to_concept(li_id: short_uuid, child: child, ontology_acronym: @submission.ontology.acronym, active_style: '', lang: request_lang(@submission))
   - if child.hasChildren
-    - output << tree_link_to_children(li_id: short_uuid, child: child)
+    - output << tree_link_to_children(li_id: short_uuid, child: child, ontology_acronym: @submission.ontology.acronym,lang: request_lang(@submission))
   - output << "</li>"
 = raw output
diff --git a/app/views/ontologies/visualize.html.haml b/app/views/ontologies/visualize.html.haml
index f55661777..8250fe38a 100644
--- a/app/views/ontologies/visualize.html.haml
+++ b/app/views/ontologies/visualize.html.haml
@@ -7,11 +7,14 @@
         %div#qsearch.input-group.pb-2.pe-1
           %span.input-group-text Jump to:
           = text_field_tag("search_box", nil, class: "form-control rounded-end", aria: {label: "Jump to:"},
-          data: {controller: 'class-search-auto-complete', 'class-search-auto-complete-ontology-acronym-value': @ontology.acronym,
+          data: {controller: 'class-search-auto-complete',
+                 'class-search-auto-complete-ontology-acronym-value': @ontology.acronym,
+                 'class-search-auto-complete-lang-value': request_lang(@submission),
+                 'class-search-auto-complete-submission-lang-value': submission_languages(@submission),
                  'class-search-auto-complete-spinner-src-value': asset_path("jquery.simple.tree/spinner.gif")})
           = hidden_field_tag("jump_to_concept_id")
         %div#sd_content.p-1
-          = render TurboFrameComponent.new(id: 'concepts_tree_view' , src: "/ajax/classes/treeview?ontology=#{@ontology.acronym}&conceptid=#{escape(@concept.id)}")
+          = render TurboFrameComponent.new(id: 'concepts_tree_view' , src: "/ajax/classes/treeview?ontology=#{@ontology.acronym}&conceptid=#{escape(@concept.id)}&lang=#{request_lang(@submission)}")
       %div#concept_content.d-flex.flex-column.card.p-1.ml-2{data:{'container-splitter-target': 'container'}}
         = render partial: 'concepts/show'
 
@@ -21,7 +24,3 @@
       = hidden_field :search, :keyword, :value=>"",:id=>"search_keyword"
   - else # found an error
     = "<div id=\"error\"><h2>#{@error}</h2></div>"
-
-
-
-