Feature: Update mappings page (#538)

* install D3 js and display a sample of ontology mappings bubbles * add zoom feature for mappings bubble view * fix bubble view style in mappings page * fix a scss selector in the annotator css that affects all a tags * mappings page layout * add ontologies select in mappings page * add upload new mappings in mappings page * add mappings table turbo frame * display the table view for ontology mappings * fix turbo frame issue in mappings page * Make the modal work in mappings table * improve mappings table view style * make mappings bubbles grow in a log way instead of a linear way * Highlighting mappings for the selected bubble * enable bubble deselection in mappings page * disable non highlighted bubbles in mappings page * show mappings page bubbles mappings in modal * make mappings page bubbles modal show correct values * customize mappings page bubbles tooltip * Link the table and the bubble view in mappings page * show highlighted bubbles with a gradient color related to the number of mappings * upload mappings in a separate tab * add concepts mappings to search page results * fix upload mappings tab style * display ontologies in ontologies selector * finalize ontologies selector design * put ontologies selector in the modal component * fix ontologies result display in ontologies selector * Make ontologies selector search bar work * show ontologies results count in ontologies selector * make groups filter work in ontologies selector * make filter by categories work in ontologies selector * add ontologies selector loading animation * make submission related filters work for ontologies selector * make select all work in ontologies selector * make retired ontologies and views filters work in ontologies selector * show tab selected checks count in ontologies selector * Add loading animation to ontologies selector * make ontology selection work in ontologies selector * make ontologies selector component * remove duplicated cross icon in ontologies selector * replace use cases of the old ontologies selector * convert ontologies selector ui component into a helper * replace 'selector' by 'ontologies_selector' in ontologies controller * enhance mapping page ontologies filtring style * add search page mappings count * add mappings bubble view to the ontology details page * make upload mappings work in mapping page * change seach results more ontologies button icon * fix concepts table mappings count * add a loading animation to the mappings bubble view * extract mappings page tab sections into partials * add internationalization to mappings page * clean mappings bubble view code * give more significant name for mappings ontologies table route * Clean mappings controller code * remove mappings search page part from main mappings PR * update new mapping form style * fix mappings section style and add search to its table in summary page * fix create new mapping for concept issue * fix upload mappings example style issue * update mappings ontologies table style * update the style the search filter of mappings table in mappings tab section * fix mappings bubble view modal link value * replace var by let in mappings visu stimulus controller * make hard coded mappings-bubble-view id by a dynamic * remove undesired #getLastPartOfUrl function from mappings vizu stimulus controller * extract #init_mappings_section_bubble_view() to a separate function in mappings visu stimulus controller * Add a default value for zoomRatio stimulus value in mappings visu controller * Add a default value for type stimulus value in mappings visu controller * refactor submit function in mappings visu stimulus controller * refactor select bubble method in mappings visu stimulus controller * put center_scroll method inside draw bubble method to not repeat code in mappings visu stimulus controller * refactor normalization ration function in mappings visu stimulus controller * use a better comprehensive helper for the empty modal in mappings page * add a legend for mappings bubble view * add back external mappings to mappings table view, and clean visu stimulus controller * move rest_url function to application_helper to be used by views * set table container box-sizing to not overflow if padding set * remove the new created to mappings actions and use the count action * remove the no more used loader action * move some mappings helpers and remove unused ones * use component helpers instead calling render & use reveal component * remove no more used partials in mappings * refactor and clean the mappings stimulus controller * extract from mappings stimulus the drawBubble logic in a file * fix mappings bubble view legend (bubble size)
ontoportal-lirmm · Apr 22, 2024 · 6707357 · 6707357
1 parent cbbbdd5
commit 6707357
Show file tree

Hide file tree

Showing 28 changed files with 1,181 additions and 219 deletions.
diff --git a/app/assets/stylesheets/components/table.scss b/app/assets/stylesheets/components/table.scss
@@ -2,7 +2,7 @@
   border-collapse: collapse;
   width: 100%;
   border-spacing: 0;
-
+  box-sizing: border-box !important;
 }
 .table-auto-layout{
   table-layout: auto !important;

diff --git a/app/assets/stylesheets/mappings.scss b/app/assets/stylesheets/mappings.scss
@@ -1,4 +1,265 @@
+.mappigs-page-container{
+  display: flex;
+  justify-content: center;
+  .file_uploader{
+    width: 700px;
+  }
+}
+.mappings-page-subcontainer{
+  width: 1248px;
+  padding: 20px 50px;
+}
+
+.mappings-page-title{
+  font-size: 25px;
+  font-weight: 700;
+}
+.mappings-page-title .line{
+  height: 2px;
+  width: 57px;
+  background-color: var(--primary-color);
+  border-radius: 10px;
+}
+.mappings-page-decription{
+  color: #888888;
+  margin: 20px 0;
+}
+
+.mappings-bubble{
+  cursor: pointer;
+}
+.mappings-bubble-view-frame{
+  width: 600px;
+  height: 600px;
+  overflow: auto;
+}
+
+.mappings-zoom-buttons{
+  display: flex;
+  margin-top: 20px;
+  justify-content: center;
+}
+.mappings-zoom-buttons svg{
+  width: 40px;
+  cursor: pointer;
+  path{
+    fill: var(--primary-color)
+  }
+  &:hover path{
+    fill: var(--hover-color)
+  }
+}
+.mappings-zoom-buttons div + div{
+  margin-left: 40px;
+}
+.mappings-bubble-view-container{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.mappings-table-view-container{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin: 20px 0;
+}
+.mappings-ontologies-select{
+  width: 700px;
+}
+
+.mappings-table-container{
+  width: 678px;
+  margin: 20px 0;
+}
+.mappings-table-ontology-name{
+  font-weight: 600;
+}
+
+.bubble-tooltip {
+  position: absolute;
+  text-align: center;
+  padding: 6px;
+  font-size: 12px;
+  background: rgba(0, 0, 0, 0.7);
+  color: white;
+  border-radius: 4px;
+  pointer-events: none;
+  z-index: 9999; 
+}
+
+.upload-mappings{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 20px;
+}
+
+.upload-mappings-example{
+  width: 700px;
+  margin-bottom: 20px;
+}
+.upload-mappings-example.ontologies{
+  width: 600px;
+}
+
+.mappings-page-ontologies-selector{
+  width: 100%;
+  padding: 0 30px 30px 30px;
+}
+
+.mappings-page-ontologies-selector .selector-button{
+  margin-top: 20px;
+}
+
+.upload-mappings-example .title-bar{
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  cursor: pointer;
+  padding: 15px;
+  color: var(--primary-color);
+  align-items: center;
+}
+.upload-mappings-example .title-bar svg{
+  margin-right: 10px;
+}
+
+.summary-mappigs-page-container{
+  margin-left: 90px;
+}
+.mapping-bubbles-loader{
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.summary-mappings-tab {
+  margin-top: 10px;
+}
+
+#ontology_viewermappings_content {
+  .summary-mappings-tab {
+    display: flex;
+  }
+
+  .summary-mappings-tab-table {
+    width: 400px;
+  }
+}
+
+.mappings-table-pagination a, .mappings-table-pagination em{
+  margin-left: 10px;
+}
+
+.mappings-bubble-view-legend{
+  width: 600px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  font-weight: 500;
+  padding: 20px;
+}
+.mappings-bubble-view-legend > .title {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.mappings-bubble-view-legend > .title .text{
+  font-size: 18px;
+  color: var(--primary-color);
+}
+.mappings-bubble-view-legend > .title .line{
+  background-color: var(--primary-color);
+  border-radius: 100%;
+  width: 40px;
+  height: 2px;
+}
+
+.content-container{
+  width: 100%;
+  margin-top: -35px;
+}
+.bubble-view-legend-item{
+  margin-top: 50px;
+}
+.bubble-view-legend-item .title{
+  font-weight: 500;
+}
+.bubble-view-legend-item .title span{
+  font-weight: 400;
+} 
+
+.mappings-bubble-size-legend, .mappings-bubble-color-legend{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 20px 0;
+}
+.mappings-bubble-size-legend .bubble{
+  border-radius: 100%;
+  border: 2px solid var(--primary-color);
+}
+.mappings-bubble-size-legend .bubble.bubble1{
+  width: 10px;
+  height: 10px;
+}
+.mappings-bubble-size-legend .bubble.bubble2{
+  width: 20px;
+  height: 20px;
+}
+.mappings-bubble-size-legend .bubble.bubble3{
+  width: 30px;
+  height: 30px;
+}
+.mappings-bubble-size-legend .bubble.bubble4{
+  width: 40px;
+  height: 40px;
+}
+.mappings-bubble-size-legend .bubble.bubble5{
+  width: 50px;
+  height: 50px;
+}
+.mappings-bubble-size-legend .bubble.bubble6{
+  width: 60px;
+  height: 60px;
+}
 
+.mappings-bubble-color-legend .bubble{
+  border-radius: 100%;
+  background-color: var(--primary-color);
+  width: 35px;
+  height: 35px;
+}
+.mappings-bubble-color-legend .bubble.bubble1{
+  opacity: 30%;
+}
+.mappings-bubble-color-legend .bubble.bubble2{
+  opacity: 50%;
+}
+.mappings-bubble-color-legend .bubble.bubble3{
+  opacity: 70%;
+}
+.mappings-bubble-color-legend .bubble.bubble4{
+  opacity: 80%;
+}
+.mappings-bubble-color-legend .bubble.bubble5{
+  opacity: 90%;
+}
+.mappings-bubble-color-legend .bubble.bubble6{
+  opacity: 100%;
+}
+.mappings-bubble-size-legend .bubble.yellow{
+  width: 35px;
+  height: 35px;
+  background-color: var(--secondary-color);
+}
+.mappings-legend-text{
+  color: var(--primary-color);
+  font-size: 15px;
+  font-weight: 500;
+}
 
 @media (min-width: 1000px)  {
   #mappings_container{
@@ -76,3 +337,23 @@ div#map_from_concept_details_table, div#map_to_concept_details_table {
   width: 100%;
 }
 
+.summary-mappings-tab-table {
+  .dataTables_wrapper .dataTables_filter {
+    float: none;
+    text-align: unset;
+  }
+}
+
+.summary-mappings-tab-table label {
+  display: block;
+  font-size: 0;
+}
+
+.summary-mappings-tab-table label input[type="search"] {
+  font-size: 16px;
+  width: 100%;
+  border-radius: 8px;
+  padding: 10px;
+  outline: none;
+  margin-left: 0 !important;
+}
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/controllers/application_controller.rb b/app/controllers/application_controller.rb
@@ -193,19 +193,9 @@ def bp_config_json
 
 
   def rest_url
-    # Split the URL into protocol and path parts
-    protocol, path = REST_URI.split("://", 2)
-
-    # Remove duplicate "//"
-    cleaned_url = REST_URI.gsub(/\/\//, '/')
-
-    # Remove the last '/' in the path part
-    cleaned_path = path.chomp('/')
-    # Reconstruct the cleaned URL
-    "#{protocol}://#{cleaned_path}"
+    helpers.rest_url
   end
-
-
+
   def check_http_file(url)
     session = Net::HTTP.new(url.host, url.port)
     session.use_ssl = true if url.port == 443