Feature: Update concepts design

Gemfile

@@ -123,3 +123,4 @@ end
 
 gem "net-ftp", "~> 0.2.0", require: false
 gem "net-http"
+gem 'inline_svg'

app/assets/stylesheets/concepts.scss

@@ -18,7 +18,7 @@
   }
 }
 
-.concept_details td:nth-child(1) {
+.concept_details td:nth-child(2) {
   white-space: nowrap;
 }
 
@@ -31,3 +31,119 @@ div.synonym-change-request {
 div.synonym-change-request button {
   padding: 0px;
 }
+.nav-link.active{
+  border-radius: 5px;
+}
+.concepts-general-details{
+  width: 870px;
+  border-radius: 5px;
+  border: 1px solid #DFDFDF;
+}
+.concepts-nav-item{
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.concepts-nav-item a{
+  margin: 12px 24px;
+  color: #888888 !important;
+  cursor: pointer;
+}
+.concepts-tabs-container{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.concepts-tabs{ 
+  display: flex;
+  justify-content: space-between;
+  width: 589px;
+}
+.concepts-active-tab a{
+  font-weight: 600;
+  color: var(--primary-color) !important;
+}
+.concepts-active-tab hr{
+  margin: 0;
+  border: 1px solid var(--primary-color);
+  border-radius: 5px;
+  display: block !important;
+  width: 100%;
+}
+.concepts-nav-item hr{
+  margin: 0;
+  display: none;
+}
+#concepts-header-line{
+  margin: 0;
+}
+.concepts-json{
+    width: 32px;
+    height: 32px;
+    border: 1px solid var(--primary-color);
+    border-radius: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    right: 40px;
+    transition: background-color ease 0.3s;
+}
+.concepts-json:hover{
+  background-color: var(--primary-color);
+
+}
+.concepts-json:hover svg path{
+  fill: white;
+}
+.concepts-content{
+  border-collapse: collapse;
+  width: 100%;
+  border-spacing: 0;
+
+}
+.concepts-content td{
+  padding: 12px 24px;
+  vertical-align: top;
+}
+.concepts-content tr:nth-child(odd) {
+  background-color: #FAFAFA;
+}
+
+.concepts-content td:first-child {
+  color: #888888;
+  width: 220px;
+}
+.concepts-content td:first-child {
+  color: #888888;
+  width: 220px;
+}
+.concepts-content a{
+  text-decoration: underline;
+  color: #888888;
+}
+.concepts-content div{
+  margin-bottom: 5px;
+}
+.concepts-raw-data{
+  margin-top: 20px;
+  border-radius: 5px;
+  border: 1px solid #DFDFDF;
+
+}
+.concepts-raw-title{
+  display: flex;
+  justify-content: space-between;
+  padding: 12px 24px;
+  color: #888888;
+  cursor: pointer;
+  font-size: 16px;
+  font-weight: 400;
+}
+.concepts-raw-title div{
+  padding: 10px 0px;
+}
+#details_content{
+  margin-top: 15px;
+}

app/components/concept_details_component.rb

@@ -40,7 +40,7 @@ def render_properties(properties_set, ontology_acronym, &block)
                 <td nowrap= "" style="width:30%" >
                     <span title=#{url} data-controller="tooltip">#{remove_owl_notation(key)}</span>
                 </td>
-                <td>#{"<p>#{ ajax_links.join('</p><p>') }</p>".html_safe}</td>
+                <td class="d-flex flex-wrap">#{"<p class='mx-1'>#{ajax_links.join('</p><p class="mx-1">')}".html_safe}</td>
               </tr>
       EOS
       out += line

app/components/concept_details_component/concept_details_component.html.haml

@@ -1,23 +1,20 @@
 - require 'cgi'
-%div.py-3.pl-3.hide-if-loading
+%div.hide-if-loading
   %div.card
-    %table.minimal.concept_details{cellpadding: "0", cellspacing: "0", width: "100%"}
-      %tr{style:"visibility:hidden"}
-        %td{style:"width:30%"}
-        %td
+    %table.concepts-content
       = header
   %div.my-3
-  .accordion.card{id: "accordion-#{@id}"}
-    .card
-      %div{id: "heading-#{@id}"}
-        %h2.mb-0.text-right
-          %button.btn.btn-link{"data-target" => "#collapse-#{@id}", "data-toggle" => "collapse"}
-            %i.fas.fa-sort
-      .collapse.show{id: "collapse-#{@id}", "data-parent" => "#accordion-#{@id}"}
-        %table.minimal.concept_details{cellpadding: "0", cellspacing: "0", width: "100%"}
-          - top_set, leftover_set, bottom_set = filter_properties(@top_keys, @bottom_keys, @exclude_keys, @concept_properties)
-          = render_properties(top_set, @acronym)
-          = render_properties(leftover_set, @acronym)
-          - sections&.each do |section|
-            = section
-          = render_properties(bottom_set, @acronym)
+  .accordion.concepts-raw-data{id: "accordion-#{@id}"}
+    %div{id: "heading-#{@id}"}
+      %h2.mb-0.text-right
+        .concepts-raw-title{"data-target" => "#collapse-#{@id}", "data-toggle" => "collapse"}
+          %div Raw data
+          %img{src: asset_path("arrow-down.svg")}
+    .collapse{id: "collapse-#{@id}", "data-parent" => "#accordion-#{@id}"}
+      %table#concepts-content.concepts-content
+        - top_set, leftover_set, bottom_set = filter_properties(@top_keys, @bottom_keys, @exclude_keys, @concept_properties)
+        = render_properties(top_set, @acronym)
+        = render_properties(leftover_set, @acronym)
+        - sections&.each do |section|
+          = section
+        = render_properties(bottom_set, @acronym)

app/views/concepts/_details.html.haml

@@ -11,23 +11,22 @@
               top_keys: %w[description comment],
               bottom_keys: %w[disjoint subclass is_a has_part],
               exclude_keys: schemes_keys + label_xl_set + ['inScheme']) do |c|
-
+             
     - c.header do
       %tr
         %td{nowrap: ""}= t('ontology_details.concept.id')
         %td
-          %p= @concept.id
+          = @concept.id
       %tr
         %td{nowrap: ""}= t('ontology_details.concept.preferred_name')
         %td
-          %p= @concept.prefLabel({:use_html => true}).html_safe
-
+          = @concept.prefLabel({:use_html => true}).html_safe
       - unless @concept.synonym.nil? || @concept.synonym.empty?
         %tr
           %td{nowrap: ""}= t('ontology_details.concept.synonyms')
           %td
             - for synonym in @concept.synonym
-              %p= synonym
+              = synonym
           %td
             %div.synonym-change-request
               = add_synonym_button
@@ -38,14 +37,12 @@
         %tr
           %td{nowrap: ""}= t('ontology_details.concept.definitions')
           %td
-            %p= @concept.definition.join(" ")
-
-
+            = @concept.definition.join(" ")
       - if @concept.obsolete?
         %tr
           %td{nowrap: ""}= t('ontology_details.concept.obsolete')
           %td
-            %p true
+            true
       - if skos?
         - unless @concept.memberOf.nil?  || @concept.memberOf.empty?
           %tr
@@ -64,7 +61,7 @@
       %tr
         %td{nowrap: ""}= t('ontology_details.concept.type')
         %td
-          %p= @concept.type
+          = @concept.type
 
     - scheme_set = c.properties_set_by_keys(schemes_keys, c.concept_properties)
     - label_xl_set = c.properties_set_by_keys(label_xl_set, c.concept_properties)

app/views/concepts/_show.html.haml

@@ -3,66 +3,67 @@
     %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
-          %a.nav-link.active.py-1{:href => "#details" , data:{toggle: 'tab', target: '#details_content'}} Details
-        - unless skos?
-          %li#instances_top.nav-item
-            %a.nav-link.py-1{:href => "#instances" , data:{toggle: 'tab', target: '#instances_content'}}
-              Instances
-              (
-              %span#instances_count
-              )
-        %li#visualization_top.nav-item
-          %a.nav-link.py-1{:href => "#visualization", data:{toggle: 'tab', target: '#visualization_content'}} Visualization
-        %li#notes_top.nav-item
-          %a.nav-link.py-1{:href => "#notes", data:{toggle: 'tab', target: '#notes_content'}}
-            Notes
-            %span#note_count_wrapper
-              (
-              %span#note_count= @notes.length
-              )
-        %li#mappings_top.nav-item
-          %a.nav-link.py-1{:href => "#mappings", data:{toggle: 'tab', target: '#mappings_content'}}
-            #{concept_label_to_show(submission: @submission)} Mappings (
-            %span#mapping_count= 'loading'
+
+    %ul.nav.tabs
+      %li#details_top.nav-item
+        %a.nav-link.active.py-1{:href => "#details" , data:{toggle: 'tab', target: '#details_content'}} Details
+      - unless skos?
+        %li#instances_top.nav-item
+          %a.nav-link.py-1{:href => "#instances" , data:{toggle: 'tab', target: '#instances_content'}}
+            Instances
+            (
+            %span#instances_count
+            )
+      %li#visualization_top.nav-item
+        %a.nav-link.py-1{:href => "#visualization", data:{toggle: 'tab', target: '#visualization_content'}} Visualization
+      %li#notes_top.nav-item
+        %a.nav-link.py-1{:href => "#notes", data:{toggle: 'tab', target: '#notes_content'}}
+          Notes
+          %span#note_count_wrapper
+            (
+            %span#note_count= @notes.length
             )
+      %li#mappings_top.nav-item
+        %a.nav-link.py-1{:href => "#mappings", data:{toggle: 'tab', target: '#mappings_content'}}
+          #{concept_label_to_show(submission: @submission)} Mappings (
+          %span#mapping_count= 'loading'
+          )
+
+      %a.concepts-json{:href => "#{@ontology.id}/classes/#{escape(@concept.id)}?display=all&apikey=#{get_apikey}", target: '_blank'}
+        = inline_svg_tag "json.svg"
 
-        %li#restlink_top.nav-item
-          %a.nav-link.py-1{:href => "#{@ontology.id}/classes/#{escape(@concept.id)}?display=all", :style => "margin-bottom: 1em; margin-left: 1em;", :target => "_blank"} Access #{concept_label_to_show(submission: @submission)} JSON
-        - if @enable_ontolobridge
-          %li#request_term_top.nav-item
-            %a.nav-link.py-1{:href => "#request_term", data:{toggle: 'tab', target: '#request_term'}}
-              New Term Requests
-        - 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'
-        - unless skos?
-          #instances_content.tab-pane
-            = render :partial =>'instances/instances' , locals: {id: "class-instances-data-table"}
-        #visualization_content.tab-pane
-          = render :partial =>'/concepts/biomixer'
-        #notes_content.tab-pane
-          = render :partial =>'/notes/list'
-        #mappings_content.tab-pane
-          = render TurboFrameComponent.new(id:'concept_mappings',
-           src:"/ajax/mappings/get_concept_table?ontologyid=#{@ontology.acronym}&conceptid=#{CGI.escape(@concept.id)}")
-        - if @enable_ontolobridge
-          #request_term_content.tab-pane
-            = render :partial =>'/concepts/request_term'
+      - if @enable_ontolobridge
+        %li#request_term_top.nav-item
+          %a.nav-link.py-1{:href => "#request_term", data:{toggle: 'tab', target: '#request_term'}}
+            New Term Requests
+      - 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'
+      - unless skos?
+        #instances_content.tab-pane
+          = render :partial =>'instances/instances' , locals: {id: "class-instances-data-table"}
+      #visualization_content.tab-pane
+        = render :partial =>'/concepts/biomixer'
+      #notes_content.tab-pane
+        = render :partial =>'/notes/list'
+      #mappings_content.tab-pane
+        = render TurboFrameComponent.new(id:'concept_mappings',
+        src:"/ajax/mappings/get_concept_table?ontologyid=#{@ontology.acronym}&conceptid=#{CGI.escape(@concept.id)}")
+      - if @enable_ontolobridge
+        #request_term_content.tab-pane
+          = render :partial =>'/concepts/request_term'
   :javascript
-      jQuery(document).ready(function(){
+    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("#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();
+    });
+    });