Merge pull request #302 from ontoportal-lirmm/feature/migrate-fair-sc…

…ore-js-code Feature: Migrate fair score JS code to Stimulus controllers
ontoportal-lirmm · Jul 28, 2023 · 280748f · 280748f
2 parents 041e43f + 53ac9bf
commit 280748f
Show file tree

Hide file tree

Showing 10 changed files with 80 additions and 80 deletions.
diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
@@ -26,7 +26,6 @@
 //= require bp_property_tree
 //= require concepts
 //= require home
-//= require fair_score
 //= require_tree ./helpers
 //= require_tree ./components
 //= require ontologies

diff --git a/app/javascript/controllers/fair_score_home_controller.js b/app/javascript/controllers/fair_score_home_controller.js
@@ -0,0 +1,21 @@
+import { Controller } from "@hotwired/stimulus"
+import {FairScorePrincipleBar, FairScoreCriteriaRadar, FairScoreChartContainer} from "../mixins/useFairScore";
+// Connects to data-controller="fair-score-home"
+export default class extends Controller {
+  connect() {
+    let fairScoreBar = new FairScorePrincipleBar( 'ont-fair-scores-canvas')
+    let fairScoreRadar = new FairScoreCriteriaRadar(  'ont-fair-criteria-scores-canvas')
+    let fairContainer = new FairScoreChartContainer('fair-score-charts-container' , [   fairScoreRadar , fairScoreBar])
+    let ontologies = jQuery("#ontology_ontologyId");
+
+    fairContainer.getFairScoreData("all")
+    ontologies.change( (e) => {
+      if(ontologies.val() !== null){
+        fairContainer.getFairScoreData(ontologies.val().join(','))
+      } else if(ontologies.val() === null){
+        fairContainer.getFairScoreData("all")
+      }
+      e.preventDefault()
+    })
+  }
+}
diff --git a/app/javascript/controllers/fair_score_landscape_controller.js b/app/javascript/controllers/fair_score_landscape_controller.js
@@ -0,0 +1,20 @@
+import { Controller } from "@hotwired/stimulus"
+import { FairScoreChartContainer, FairScoreCriteriaBar } from "../mixins/useFairScore";
+// Connects to data-controller="fair-score-landscape"
+export default class extends Controller {
+  connect() {
+    let fairCriteriaBars = new FairScoreCriteriaBar('ont-fair-scores-criteria-bars-canvas')
+    let fairContainer = new FairScoreChartContainer('fair-score-charts-container' , [fairCriteriaBars])
+    let ontologies = jQuery("#ontology_ontologyId");
+
+    fairContainer.getFairScoreData("all")
+    ontologies.change( (e) => {
+      if(ontologies.val() !== null){
+        fairContainer.getFairScoreData(ontologies.val().join(','))
+      } else if(ontologies.val() === null){
+        fairContainer.getFairScoreData("all")
+      }
+      e.preventDefault()
+    })
+  }
+}
diff --git a/app/javascript/controllers/fair_score_summary_controller.js b/app/javascript/controllers/fair_score_summary_controller.js
@@ -0,0 +1,12 @@
+import { Controller } from "@hotwired/stimulus"
+import {FairScorePrincipleBar, FairScoreCriteriaRadar, FairScoreChartContainer} from "../mixins/useFairScore";
+// Connects to data-controller="fair-score-summary"
+export default class extends Controller {
+  connect() {
+    let fairScoreBar = new FairScorePrincipleBar( 'ont-fair-scores-canvas')
+    let fairScoreRadar = new FairScoreCriteriaRadar(  'ont-fair-criteria-scores-canvas')
+    let fairContainer = new FairScoreChartContainer('fair-score-charts-container' , [   fairScoreRadar , fairScoreBar])
+
+    fairContainer.getFairScoreData(window.location.pathname.split('/')[2])
+  }
+}
diff --git a/app/javascript/controllers/index.js b/app/javascript/controllers/index.js
@@ -13,6 +13,15 @@ application.register("class-search-auto-complete", ClassSearchAutoCompleteContro
 import ContainerSplitterController from "./container_splitter_controller"
 application.register("container-splitter", ContainerSplitterController)
 
+import FairScoreHomeController from "./fair_score_home_controller"
+application.register("fair-score-home", FairScoreHomeController)
+
+import FairScoreLandscapeController from "./fair_score_landscape_controller"
+application.register("fair-score-landscape", FairScoreLandscapeController)
+
+import FairScoreSummaryController from "./fair_score_summary_controller"
+application.register("fair-score-summary", FairScoreSummaryController)
+
 import FormAutoCompleteController from "./form_auto_complete_controller"
 application.register("form-auto-complete", FormAutoCompleteController)
 
@@ -55,9 +64,6 @@ application.register("skos-collection-colors", SkosCollectionColorsController)
 import TextTruncateController from "./text_truncate_controller"
 application.register("text-truncate", TextTruncateController)
 
-import Ontology_viewer_tabs_controller from "./ontology_viewer_tabs_controller"
-application.register("ontology-viewer-tabs", Ontology_viewer_tabs_controller)
-
 import TooltipController from "./tooltip_controller"
 application.register("tooltip", TooltipController)
 

diff --git a/app/assets/javascripts/fair_score.js → app/javascript/mixins/useFairScore.js b/app/assets/javascripts/fair_score.js → app/javascript/mixins/useFairScore.js
@@ -1,7 +1,7 @@
-
 function round(val , base = 1){
     return Math.floor( val * 100 * base) / 100
 }
+
 function getObtainedNotObtainedNA(scoresIn, portalMax , max , normalize = true){
     const delimiter = (val) => (normalize ? val : 1)
     const notObtained = portalMax.map((x,i) => {
@@ -391,17 +391,17 @@ class FairScoreCriteriaRadar extends FairScoreChart{
 
     getFairScoreDataSet() {
         const scores = this.fairScoreChartCanvas.data('normalizedScores')
-           return [
-                {
-                    label: 'Fair score',
-                    data: scores,
-                    fill: true,
-                    backgroundColor: 'rgba(151, 187, 205, 0.2)',
-                    borderColor: 'rgba(151, 187, 205, 1)',
-                    pointBorderColor: 'rgba(151, 187, 205, 1)',
-                    pointBackgroundColor: 'rgba(151, 187, 205, 1)'
-                }
-            ]
+        return [
+            {
+                label: 'Fair score',
+                data: scores,
+                fill: true,
+                backgroundColor: 'rgba(151, 187, 205, 0.2)',
+                borderColor: 'rgba(151, 187, 205, 1)',
+                pointBorderColor: 'rgba(151, 187, 205, 1)',
+                pointBackgroundColor: 'rgba(151, 187, 205, 1)'
+            }
+        ]
     }
 
 
@@ -492,7 +492,7 @@ class FairScoreCriteriaBar extends  FairScoreChart{
 
             if (topOffset  <= 0)
                 topOffset = 0
-           else if( (topOffset + tooltipEl.clientHeight) >=  position.height)
+            else if( (topOffset + tooltipEl.clientHeight) >=  position.height)
                 topOffset = position.height - tooltipEl.clientHeight
 
             // Display, position, and set styles for font
@@ -627,63 +627,5 @@ class FairScoreCriteriaBar extends  FairScoreChart{
     }
 }
 
-
-/*
-    For landscape
- */
-jQuery('#fairness_assessment').ready(()=> {
-    let fairCriteriaBars = new FairScoreCriteriaBar('ont-fair-scores-criteria-bars-canvas')
-    let fairContainer = new FairScoreChartContainer('fair-score-charts-container' , [fairCriteriaBars])
-    let ontologies = jQuery("#ontology_ontologyId");
-
-    fairContainer.getFairScoreData("all")
-    ontologies.change( (e) => {
-        if(ontologies.val() !== null){
-            fairContainer.getFairScoreData(ontologies.val().join(','))
-        } else if(ontologies.val() === null){
-            fairContainer.getFairScoreData("all")
-        }
-        e.preventDefault()
-    })
-    return false
-})
-
-
-
-/*
-    For the home
- */
-jQuery('#fair-home').ready( function (e) {
-
-    let fairScoreBar = new FairScorePrincipleBar( 'ont-fair-scores-canvas')
-    let fairScoreRadar = new FairScoreCriteriaRadar(  'ont-fair-criteria-scores-canvas')
-    let fairContainer = new FairScoreChartContainer('fair-score-charts-container' , [   fairScoreRadar , fairScoreBar])
-    let ontologies = jQuery("#ontology_ontologyId");
-
-    fairContainer.getFairScoreData("all")
-    ontologies.change( (e) => {
-            if(ontologies.val() !== null){
-                fairContainer.getFairScoreData(ontologies.val().join(','))
-            } else if(ontologies.val() === null){
-                fairContainer.getFairScoreData("all")
-            }
-        e.preventDefault()
-    })
-    return false
-})
-
-/*
-    For the summary
-*/
-jQuery('#fair-summary').ready( function (e) {
-
-    let fairScoreBar = new FairScorePrincipleBar( 'ont-fair-scores-canvas')
-    let fairScoreRadar = new FairScoreCriteriaRadar(  'ont-fair-criteria-scores-canvas')
-    let fairContainer = new FairScoreChartContainer('fair-score-charts-container' , [   fairScoreRadar , fairScoreBar])
-
-    fairContainer.getFairScoreData(window.location.pathname.split('/')[2])
-
-    return false
-})
-
+export {round, getObtainedNotObtainedNA, FairScoreChartContainer, FairScoreChart, FairScorePrincipleBar, FairScoreCriteriaRadar, FairScoreCriteriaBar}
 
diff --git a/app/views/home/_fair_score_home.html.haml b/app/views/home/_fair_score_home.html.haml
@@ -1,4 +1,4 @@
-%div.col
+%div.col{data:{controller:"fair-score-home"}}
   %div.card.mb-3
     %div.card-header.d-flex.justify-content-between
       %span

diff --git a/app/views/home/index.html.haml b/app/views/home/index.html.haml
@@ -89,7 +89,7 @@
         %hr.home-section-line/
         .home-card.home-fair-scores
           - if fairness_service_enabled?
-            %div#fair-home
+            %div#fair-home{data:{controller:"fair-score-home"}}
               = render partial: "shared/fair_score_bars", locals: {data: nil}
           %a{:href => "#fairDetails"}
             %div.home-fair-details

diff --git a/app/views/landscape/_fair_score_landscape.html.haml b/app/views/landscape/_fair_score_landscape.html.haml
@@ -31,7 +31,7 @@
         This interface shows how an ontology or a group responded successfully to O’FAIRe FAIRness assessment questions
       %div
         See details for each ontologies on the specific ontology summary pages
-  %div.card-body
+  %div.card-body{data:{controller:"fair-score-landscape"}}
     %div#fair-score-charts-container.row
       %div.col
         %span.text-secondary.mt-4

diff --git a/app/views/ontologies/_fairs_score.html.haml b/app/views/ontologies/_fairs_score.html.haml
@@ -12,7 +12,7 @@
                 class: "btn btn-primary w-100",
                 data: { show_modal_title_value: "FAIRness assessment questions", show_modal_size_value: 'modal-xl' },
                 )
-  %div.statistics_container
+  %div.statistics_container{data:{controller:"fair-score-summary"}}
     %div
       = render partial: "shared/fair_score_radar" , locals: {data: @fair_scores_data}
     %div