Fix: the contexual json icon for to the concept adapt to the select t…

…ab (#539) * refactor concepts json code and put it in a stimulus controller * adjust the position of the concepts json link * remove non related code to concepts json PR * remove non related code to contextual json pull request * pass base class URL directly to concepts json stimulus controller * clean concepts json stimulus code * remove undesired code from concepts json button PR * fix typo in agent_search_input_component.html.haml * rename concepts json button stimulus controller * clean concepts json button controller code * clean concepts json button related code --------- Co-authored-by: Syphax bouazzouni <[email protected]> Co-authored-by: Bilel KIHAL <[email protected]> Co-authored-by: @SirineMhedhbi
ontoportal-lirmm · Jun 14, 2024 · 93cedc7 · 93cedc7
1 parent 3961528
commit 93cedc7
Show file tree

Hide file tree

Showing 8 changed files with 91 additions and 61 deletions.
diff --git a/app/assets/stylesheets/concepts.scss b/app/assets/stylesheets/concepts.scss
@@ -160,4 +160,9 @@ div.synonym-change-request button {
 
 .concepts-mapping-count .d-flex{
   display: inline !important;
+}
+
+#concepts_json_link{
+  margin-top: -4px;
+  margin-right: 5px;
 }
diff --git a/app/components/agent_search_input_component/agent_search_input_component.html.haml b/app/components/agent_search_input_component/agent_search_input_component.html.haml
@@ -8,4 +8,4 @@
       %p.search-element.home-searched-ontology
         NAME (IDENTIFIERS)
       %p.home-result-type
-        TYPE
+        TYPE
diff --git a/app/components/tab_item_component.rb b/app/components/tab_item_component.rb
@@ -4,13 +4,14 @@ class TabItemComponent < ViewComponent::Base
 
   include ActionView::Helpers::UrlHelper
 
-  def initialize(id: nil, title: nil, path: nil, page_name: '', selected: false)
+  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?
@@ -44,9 +45,9 @@ def page_name
 
   def call
     if title && !title.empty?
-      link_to(title, @path, id: "#{item_id}_tab", class: "#{active_class} tab-link")
+      link_to(title, @path, id: "#{item_id}_tab", class: "#{active_class} tab-link", 'data-json-link': @json_link)
     else
-      link_to(@path, id: "#{item_id}_tab", class: "#{active_class} tab-link") do
+      link_to(@path, id: "#{item_id}_tab", class: "#{active_class} tab-link", 'data-json-link': @json_link) do
         content
       end
     end

diff --git a/app/controllers/annotator_controller.rb b/app/controllers/annotator_controller.rb
@@ -201,6 +201,7 @@ def empty_advanced_options
       params[:fast_context].nil? &&
       params[:lemmatize].nil?
   end
+
 
   def remove_special_chars(input)
     regex = /^[a-zA-Z0-9\s]*$/

diff --git a/app/javascript/controllers/concepts_json_button_controller.js b/app/javascript/controllers/concepts_json_button_controller.js
@@ -0,0 +1,19 @@
+import {Controller} from "@hotwired/stimulus"
+
+export default class extends Controller {
+    static targets = ['button']
+
+    update(){
+        setTimeout(() => {
+            const tabsList = this.element.querySelectorAll('.nav-item');
+            const jsonLink = Array.from(tabsList).find(tab => tab.classList.contains('active'))?.querySelector('a').getAttribute('data-json-link');
+            const conceptsJsonLink = this.buttonTarget.querySelector('a');
+            if (jsonLink) {
+                conceptsJsonLink.href = jsonLink;
+                conceptsJsonLink.style.display = 'flex'
+            } else {
+                conceptsJsonLink.style.display = 'none'
+            }
+        }, 1);
+    }
+}
diff --git a/app/javascript/controllers/index.js b/app/javascript/controllers/index.js
@@ -102,4 +102,7 @@ application.register("ontologies-selector", OntologiesSelector)
 
 
 import MappingsController from "./mappings_visualization_controller"
-application.register('mappings', MappingsController)
+application.register('mappings', MappingsController)
+
+import ConceptsJsonButtonController from "./concepts_json_button_controller.js"
+application.register('concepts-json', ConceptsJsonButtonController)
diff --git a/app/views/concepts/_show.html.haml b/app/views/concepts/_show.html.haml
@@ -3,72 +3,72 @@
     = render Display::AlertComponent.new do
       = t('concepts.use_jump_to')
   - else
-    = render TabsContainerComponent.new(type:'outline') do |c|
+    %div{'data-controller': 'concepts-json', 'data-action': 'click->concepts-json#update'}
+      = render TabsContainerComponent.new(type:'outline') do |c|
+        - c.pinned_right do
+          - if $PURL_ENABLED
+            %div.mx-1
+              = link_to("#classPermalinkModal", class: "class-permalink nav-link", title: t('concepts.permanent_link_class'), aria: {label: t('concepts.permanent_link_class')}, data: {toggle: "modal", current_purl: "#{@current_purl}"}) do
+                %i{class: "fas fa-link", aria: {hidden: "true"}}
+          %div{'data-concepts-json-target': 'button'}
+            = render RoundedButtonComponent.new(link: "#{@ontology.id}/classes/#{escape(@concept.id)}?display=all&apikey=#{get_apikey}", target:'_blank')
+        - apikey = "apikey=#{get_apikey}"
+        - baseClassUrl = "#{@ontology.id}/classes/#{escape(@concept.id)}"
+        - c.item(title: t('concepts.details'), path: '#details', selected: true, json_link: "#{baseClassUrl}?#{apikey}&display=all")
 
-      - c.pinned_right do
-        - if $PURL_ENABLED
-          %div.mx-1
-            = link_to("#classPermalinkModal", class: "class-permalink nav-link", title: t('concepts.permanent_link_class'), aria: {label: t('concepts.permanent_link_class')}, data: {toggle: "modal", current_purl: "#{@current_purl}"}) do
-              %i{class: "fas fa-link", aria: {hidden: "true"}}
-        %div
-          = render RoundedButtonComponent.new(link: "#{@ontology.id}/classes/#{escape(@concept.id)}?display=all&apikey=#{get_apikey}", target:'_blank')
+        - unless skos?
+          - c.item(id: 'instances', path: '#instances', json_link: "#{baseClassUrl}/instances?#{apikey}") do
+            = t('concepts.instances')
+            (
+            %span#concept_instances_sorted_list_count
+            )
 
-      - c.item(title: t('concepts.details'), path: '#details', selected: true)
+        - c.item(title: t('concepts.visualization'), path: '#visualization')
 
-      - unless skos?
-        - c.item(id: 'instances', path: '#instances') do
-          = t('concepts.instances')
-          (
-          %span#concept_instances_sorted_list_count
-          )
+        - c.item(id: 'notes', path: '#notes', json_link: "#{baseClassUrl}/notes?#{apikey}") do
+          = t('concepts.notes')
+          %span#note_count_wrapper
+            (
+            %span#note_count= @notes.length
+            )
+        - c.item(id: 'mappings', path: '#mappings', json_link: "#{baseClassUrl}/mappings?#{apikey}") do
+          .d-flex
+            #{t('concepts.mappings')}
+            (
+            = concept_mappings_loader(ontology_acronym: @ontology.acronym, concept_id: @concept.id)
+            )
 
-      - c.item(title: t('concepts.visualization'), path: '#visualization')
+        - if @enable_ontolobridge
+          - c.item(title: t('concepts.new_term_requests'), path: '#request_term')
 
-      - c.item(id: 'notes', path: '#notes') do
-        = t('concepts.notes')
-        %span#note_count_wrapper
-          (
-          %span#note_count= @notes.length
-          )
-      - c.item(id: 'mappings', path: '#mappings') do
-        .d-flex
-          #{t('concepts.mappings')}
-          (
-          = concept_mappings_loader(ontology_acronym: @ontology.acronym, concept_id: @concept.id)
-          )
-
-      - if @enable_ontolobridge
-        - c.item(title: t('concepts.new_term_requests'), path: '#request_term')
-
-      - c.item_content do
-        = render :partial =>'/concepts/details'
-
-      - unless skos?
         - c.item_content do
-          = render :partial =>'instances/instances' , locals: {id: "class-instances-data-table"}
-      - c.item_content do
-        = render :partial =>'/concepts/biomixer'
+          = render :partial =>'/concepts/details'
 
-      - c.item_content do
-        = render :partial =>'/notes/list'
+        - unless skos?
+          - c.item_content do
+            = render :partial =>'instances/instances' , locals: {id: "class-instances-data-table"}
+        - c.item_content do
+          = render :partial =>'/concepts/biomixer'
 
-      - c.item_content do
-        = render TurboFrameComponent.new(id:'concept_mappings',
-        src:"/ajax/mappings/get_concept_table?ontologyid=#{@ontology.acronym}&conceptid=#{CGI.escape(@concept.id)}")
+        - c.item_content do
+          = render :partial =>'/notes/list'
 
-      - if @enable_ontolobridge
         - c.item_content do
-          = render :partial =>'/concepts/request_term'
+          = render TurboFrameComponent.new(id:'concept_mappings',
+          src:"/ajax/mappings/get_concept_table?ontologyid=#{@ontology.acronym}&conceptid=#{CGI.escape(@concept.id)}")
 
-  :javascript
-    jQuery(document).ready(function(){
+        - if @enable_ontolobridge
+          - c.item_content do
+            = render :partial =>'/concepts/request_term'
 
-    jQuery("#classPermalinkModal").on("shown.bs.modal", function (e) {
-    var currentPurl = jQuery("a.class-permalink").data("current-purl");
-    jQuery("#purl_input").val(currentPurl);
-    })
+    :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();
-    });
-    });
+        jQuery("#purl_input").on("click", function () {
+        jQuery(this).select();
+        });
+      });
diff --git a/config/bioportal_config_env.rb.sample b/config/bioportal_config_env.rb.sample
@@ -307,3 +307,4 @@ if $HOSTNAME
     require_relative "bioportal_config_development_#{$HOSTNAME}"
   end
 end
+
Original file line number	Diff line number	Diff line change
Expand Up		@@ -307,3 +307,4 @@ if $HOSTNAME
		require_relative "bioportal_config_development_#{$HOSTNAME}"
		end
		end