Feature: Add ontology concepts exporters to diffrent formats (xml, ntriples, turtle)

app/assets/stylesheets/concepts.scss

@@ -156,4 +156,4 @@ div.synonym-change-request button {
   justify-content: center;
   color: var(--gray-color);
   margin-top: 10px;
-}
+}

app/assets/stylesheets/content_finder.scss

@@ -4,29 +4,17 @@
     margin-bottom: 6px;
 }
 
-.content-finder-logo{
-    display: flex;
-    justify-content: center;
-    margin: 20px 0;
-}
-
 .content-finder-container .inputs > div{
     margin:10px 0;
     text-align: center;
-    width: 400px;
 }
 
 .content-finder-result{
-    margin-top: 20px;
-    margin-bottom: 30px;
     text-align: left;
-    max-width: 95%;
+    width: 95%;
     margin-left: auto;
     margin-right: auto;
-    padding: 20px;
     background-color: #fff;
-    border-radius: 10px;
-    border: 1px solid #a1a1a1;
 }
 
 .content-finder-html-result{
@@ -45,24 +33,10 @@
     color: #770088;
 }
 
-
-.content-finder-logo svg {
-    width: 100px;
-    height: 100px;
-}
-.content-finder-logo svg path{
-    fill: var(--primary-color)
-}
-
 .hljs-subject{
     color: green;
 }
 
 .hljs-predicate{
     color: #770088;
-}
-
-.parse_button{
-    display: flex;
-    justify-content: center;
 }

app/components/clipboard_component/clipboard_component_controller.js

@@ -14,7 +14,7 @@ export default class extends Controller {
       this.#copied()
     })
   }
-
+  
   #copied () {
     if (this.timeout) {
       clearTimeout(this.timeout)

app/components/concept_details_component.rb

@@ -2,20 +2,22 @@
 
 class ConceptDetailsComponent < ViewComponent::Base
   include ApplicationHelper
+  include OntologiesHelper
   include MultiLanguagesHelper
 
   renders_one :header, TableComponent
   renders_many :sections, TableRowComponent
 
   attr_reader :concept_properties
 
-  def initialize(id:, acronym:, properties:, top_keys:, bottom_keys:, exclude_keys:)
+  def initialize(id:, acronym:, concept_id: nil , properties: nil, top_keys: [], bottom_keys: [], exclude_keys: [])
     @acronym = acronym
     @properties = properties
     @top_keys = top_keys
     @bottom_keys = bottom_keys
     @exclude_keys = exclude_keys
     @id = id
+    @concept_id=concept_id
 
     @concept_properties = concept_properties2hash(@properties) if @properties
   end
@@ -77,6 +79,12 @@ def filter_properties(top_keys, bottom_keys, exclude_keys, concept_properties)
 
   private
 
+  def link_to_format_modal(format, icon)
+    link_to_modal(nil, "/ontologies/#{@acronym}/#{escape(@concept_id)}/serialize/#{format}", data: {show_modal_title_value: @concept_id, show_modal_size_value: 'modal-xl'}) do
+      inline_svg("icons/#{icon}.svg", width: '50px', height: '50px')
+    end
+  end
+
   def concept_properties2hash(properties)
     # NOTE: example properties
     #

app/components/concept_details_component/concept_details_component.html.haml

@@ -3,12 +3,11 @@
     = header
   %div.my-3
   %div.raw-table
-    - if @bottom_keys.present?
-      = render DropdownContainerComponent.new(title: 'Raw data', id: "accordion-#{@id}") do
-        - top_set, leftover_set, bottom_set = filter_properties(@top_keys, @bottom_keys, @exclude_keys, prefix_properties(@concept_properties))
-        - leftover_set = convert_dates(leftover_set)
-        = render TableComponent.new(stripped: true) do |t|
-
+    = render DropdownContainerComponent.new(title: 'Raw data', id: "accordion-#{@id}") do
+      = render TableComponent.new(stripped: true) do |t|
+        - if @bottom_keys.present?
+          - top_set, leftover_set, bottom_set = filter_properties(@top_keys, @bottom_keys, @exclude_keys, prefix_properties(@concept_properties))
+          - leftover_set = convert_dates(leftover_set)
           - row_hash_properties(top_set, @acronym).each do |row|
             - t.add_row(*row)
 
@@ -23,3 +22,11 @@
 
           - row_hash_properties(bottom_set, @acronym).each do |row|
             - t.add_row(*row)
+
+        - if @concept_id
+          - t.row do |r|
+            - r.td(colspan: 2) do
+              %div.d-flex.justify-content-center.p-2
+                - [["json","json-ld-file"], ["xml","rdf-xml-file"] , ["ntriples","ntriples-file"], ["turtle","turtle-file"]].each do |format, icon|
+                  %div.mx-4{data: {controller: "tooltip"}, title: "Export in #{format.upcase}"}
+                    = link_to_format_modal(format, icon)

app/components/display/rdf_highlighter_component.rb

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+class Display::RdfHighlighterComponent < ViewComponent::Base
+
+  def initialize(format: , text: )
+    @format = format
+    @content = text
+  end
+end

app/components/display/rdf_highlighter_component/rdf_highlighter_component.html.haml

@@ -0,0 +1,6 @@
+.clipboard-component-resource-content{style: 'position: absolute; right: 2%; top: 5px;'}
+  = render ClipboardComponent.new(message: @content, show_content: false)
+.content-finder-result{data: {controller: 'rdf-highlighter', 'rdf-highlighter-format-value': @format }}
+  %pre.mb-0
+    %code.d-block{style: 'text-wrap: pretty; word-break: break-all', data: {'rdf-highlighter-target': 'content'}}
+      #{@content}