Fix: content and aesthetics globally to add help text and action icons

app/assets/stylesheets/bioportal.scss

@@ -556,11 +556,15 @@ tr.mainresource td {
   margin-bottom: 1em;
 }
 
-.feedback ul li, .enable-lists ul li {
+.enable-lists ul li {
   list-style-position: outside;
   list-style-type: square;
   margin-left: 1.5em;
 }
+.feedback ul li{
+  list-style-position: outside;
+  margin-left: 1.5em;
+}
 
 .enable-lists ul {
   margin-bottom: 15px;

app/assets/stylesheets/browse.scss

@@ -333,6 +333,10 @@
   padding: 14px 20px;
   margin-bottom: 12px;
   box-shadow: rgba(100, 100, 111, 0.08) 0 7px 29px 0;
+  .switch-filter{
+    justify-content: space-between;
+    margin-bottom: 23px;
+  }
 }
 
 

app/assets/stylesheets/components/switch.scss

@@ -2,8 +2,7 @@
 .switch-filter{
   display:flex;
   align-items: center;
-  justify-content: space-between;
-  margin-bottom: 20px;
+
 }
 .switch-filter > p, .switch-filter > div{
   font-size: 16px;

app/assets/stylesheets/components/tabs_container.scss

@@ -55,3 +55,6 @@
   border: 1px solid var(--primary-color);
   opacity: 100%;
 }
+.container{
+  overflow-x: auto;
+}

app/assets/stylesheets/nav_bar.scss

@@ -174,6 +174,7 @@
 
 .top-nav-ul.show-responsive {
     display: block;
+    text-decoration-style: none !important;
 }
 
 .nav-items.show-responsive {

app/assets/stylesheets/summary.scss.erb

@@ -161,7 +161,33 @@
   text-align: right;
 }
 
-
+#networkContainer{
+      transition: transform 0.3s;
+    }
+
+.active-fullscreen {
+  width: 100%;
+  height: 100vh;
+  position: fixed;
+  left: 0;
+  top: 0;
+  background-color: #ffffff;
+  z-index: 9999;
+}
+#fullscreen-button {
+  background-color: var(--primary-color);
+  -webkit-mask-image: url(asset-path('icons/full-screen.svg'));
+  mask-image: url(asset-path('icons/full-screen.svg'));
+  float: right;
+  position: relative;
+  bottom: 79px;
+  width: 32px;
+  height: 31px;
+  background-repeat: no-repeat!important;
+  background-position: 2px 2px;
+  right: 58px;
+  cursor: pointer;
+  }
 
 div.vis-network div.vis-navigation {
   div.vis-button.vis-up{

app/assets/stylesheets/upload_ontology.scss

@@ -90,3 +90,9 @@
 .upload-ontology-input-field-container .switch-filter p{
     font-size: 12px !important;
 }
+.edit-ontology-tab .switch-filter {
+    img{
+        width: 15px;
+        height: 15px;
+    }
+}

app/components/concept_details_component.rb

@@ -164,14 +164,25 @@ def remove_owl_notation(string)
 
     unless string.nil?
       strings = string.split(":")
-      if strings.size<2
-        #return string.titleize
+      if strings.size < 2
+        # return string.titleize
         return string
       else
-        #return strings[1].titleize
+        # return strings[1].titleize
         return strings[1]
       end
     end
   end
 
+  def convert_dates(hash)
+    hash.transform_values do |property|
+      if property[:key].to_s.include?("modified") || property[:key].to_s.include?("created")
+        value = property[:values].first
+        parsed_date = l(Date.parse(value), format: :monthfull_day_year.to_sym) rescue value
+        property[:values] = [parsed_date]
+      end
+      property
+    end
+  end
+
 end

app/components/concept_details_component/concept_details_component.html.haml

@@ -6,6 +6,7 @@
     - 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|
 
           - row_hash_properties(top_set, @acronym).each do |row|

app/components/dropdown_container_component.rb

@@ -2,10 +2,14 @@
 
 class DropdownContainerComponent < ViewComponent::Base
   renders_one :empty_state
-  def initialize(title:, id:, tooltip:nil)
+  def initialize(title:, id:, tooltip:nil, is_open: false)
     super
     @title = title
     @id = id
     @tooltip = tooltip
+    @is_open = is_open
+  end
+  def open_class
+    @is_open ? "show" : ""
   end
 end

app/components/dropdown_container_component/dropdown_container_component.html.haml

@@ -3,7 +3,7 @@
     = render Display::HeaderComponent.new(text: @title, tooltip: @tooltip)
     = image_tag("summary/arrow-down.svg", class: 'ml-2')
 
-  .collapse{id: @id}
+  .collapse{id: @id, class: open_class}
     - if content && !content.empty?
       = content
     - else

app/components/icon_with_tooltip_component.rb

@@ -0,0 +1,28 @@
+class IconWithTooltipComponent < ViewComponent::Base
+    def initialize(icon: "", link: "#", size: "small", target: '', title: '', style: '')
+      @icon = icon
+      @link = link
+      @size = size
+      @target = target
+      @title = title
+      @style = style
+    end
+
+    private
+
+    def size
+      case @size
+      when "small"
+        ["32px", "1", "16px"]
+      when "medium"
+        ["45px", "1", "23px"]
+      when "big"
+        ["100px", "2.5", "50px"]
+      end
+    end
+
+    def icon_with_tooltip_style
+      "font-size: 50px; line-height: 0.5; #{@style}"
+    end
+end
+

app/components/icon_with_tooltip_component/icon_with_tooltip_component.html.haml

@@ -0,0 +1,3 @@
+%a.icon-with-tooltip{href: @link, style: icon_with_tooltip_style, target: @target, title: @title, 'data-controller': 'tooltip'}
+  %span.icon
+    = inline_svg @icon

app/components/input/input_field_component.rb

@@ -22,7 +22,7 @@ def error?
     end
 
     def help?
-        !@helper_text&.empty?
+        !@helper_text.blank?
     end
 
     def label?

app/components/layout/reveal_component.rb

@@ -2,19 +2,19 @@
 
 class Layout::RevealComponent < ViewComponent::Base
   renders_one :button
+  renders_many :containers
 
-  def initialize(init_show: false, show_condition: nil,hidden_class: 'd-none')
+  def initialize(selected: nil, possible_values: [], hidden_class: 'd-none', toggle: false)
     @hidden_class = hidden_class
-    @init_show = init_show
-    @show_condition = show_condition
+    @possible_values = possible_values
+    @selected = selected
+    @toggle = toggle
   end
 
   def container_data
-    out = {
+    {
       controller: 'reveal-component',
       'reveal-component-hidden-class': @hidden_class
     }
-    out['reveal-component-condition-value'] = @show_condition if @show_condition
-    out
   end
 end

app/components/layout/reveal_component/reveal_component.html.haml

@@ -1,5 +1,6 @@
 %div{data: container_data}
-  %div{'data-action': "change->reveal-component#toggle"}
+  %div{'data-action': @toggle ? "change->reveal-component#toggle" : "change->reveal-component#select"}
     = button
-  %div{'data-reveal-component-target': "item", class: @init_show ? '' : @hidden_class}
-    = content
+  - containers.each_with_index do |c, i|
+    %div{'data-reveal-component-target': "item", 'data-value': @possible_values[i] , class: @possible_values[i].eql?(@selected) ? '' : @hidden_class}
+      = c

app/components/layout/reveal_component/reveal_component_controller.js

@@ -1,61 +1,63 @@
-import { Controller } from "@hotwired/stimulus"
-
-export default class extends Controller{
-    static values = {
-        condition: String,
-        hiddenClass : {type: String, default: "d-none"}
-    }
-
-    static targets = ["hideButton", "showButton", 'item' ]
-
-    toggle(event) {
-        if (!this.conditionValue) {
-            this.#toggle(event)
-        } else if (this.#shown() && !this.#conditionChecked(event)) {
-            this.#toggle(event)
-        } else if (!this.#shown() && this.#conditionChecked(event)) {
-            this.#toggle(event)
-        }
-    }
-
-    show(event){
-        this.#getItems(event).classList.remove(this.hiddenClassValue)
-        this.hideButtonTarget.classList.remove(this.hiddenClassValue)
-        this.showButtonTarget.classList.add(this.hiddenClassValue)
-    }
-    hide(event){
-        this.#getItems(event).classList.add(this.hiddenClassValue)
-        this.hideButtonTarget.classList.add(this.hiddenClassValue)
-        this.showButtonTarget.classList.remove(this.hiddenClassValue)
-    }
-
-
-    #conditionChecked(event) {
-        return this.conditionValue === event.target.value
-    }
-
-    #shown() {
-        return !this.itemTargets[0].classList.contains(this.class);
-    }
-
-    #toggle(event) {        
-        this.#getItems(event).forEach((s) => {
-          s.classList.toggle(this.hiddenClassValue);
-        });
-    }
-
-    #ItemById(event){
-        let button = event.target.closest("[data-id]");
-        return document.getElementById(button.dataset.id);
-    }
-    #getItems(event){
-        let items
-        if(this.hasItemTarget){
-            items = this.itemTarget
-        } else {
-            items = [this.#ItemById(event)]
-        }
-        return items
-    }
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static values = {
+    hiddenClass: { type: String, default: 'd-none' }
+  }
+
+  static targets = ['hideButton', 'showButton', 'item']
+
+  /*
+      Toggle all the items
+   */
+  toggle (event) {
+    this.#getItems(event).forEach((s) => {
+      s.classList.toggle(this.hiddenClassValue)
+    })
+  }
+
+  /*
+      Hide all the items except the selected one
+   */
+  select (event) {
+    let selectedValue = event.target.value
+    let items = this.#getItems(event)
+    items.forEach((s) => {
+      s.classList.add(this.hiddenClassValue)
+    })
+
+    items.forEach((s) => {
+      if (selectedValue === s.dataset.value) {
+        s.classList.remove(this.hiddenClassValue)
+      }
+    })
+  }
+
+  show (event) {
+    this.#getItems(event).forEach((s) => s.classList.remove(this.hiddenClassValue))
+    this.hideButtonTarget.classList.remove(this.hiddenClassValue)
+    this.showButtonTarget.classList.add(this.hiddenClassValue)
+  }
+
+  hide (event) {
+    this.#getItems(event).forEach((s) => s.classList.add(this.hiddenClassValue))
+    this.hideButtonTarget.classList.add(this.hiddenClassValue)
+    this.showButtonTarget.classList.remove(this.hiddenClassValue)
+  }
+
+  #ItemById (event) {
+    let button = event.target.closest('[data-id]')
+    return document.getElementById(button.dataset.id)
+  }
+
+  #getItems (event) {
+    let items
+    if (this.hasItemTarget) {
+      items = this.itemTargets
+    } else {
+      items = [this.#ItemById(event)]
+    }
+    return items
+  }
 
 }

app/components/link_field_component/link_field_component.html.haml

@@ -1,6 +1,6 @@
 - if internal_link?
   = render ChipButtonComponent.new(url: @value.to_s.sub("data.", ""), text: @raw ? @value : @value.to_s.split("/").last, type: "clickable")
 - elsif @value.to_s =~ /\A#{URI::regexp(%w[http https])}\z/
-  = render ChipButtonComponent.new(url: @value.to_s, text:  @value.to_s, type: "clickable")
+  = render ChipButtonComponent.new(url: @value.to_s, text:  @value.to_s, type: "clickable", target: "_blank")
 - else
   = render ChipButtonComponent.new( text:  @value.to_s, type: "static")