From 46dd15ea758e000b74a5a1f8d7d128f65cd5df58 Mon Sep 17 00:00:00 2001
From: PRADO SEBASTIEN <sebastien.prado@inrae.fr>
Date: Mon, 24 Jun 2024 15:21:34 +0200
Subject: [PATCH] fix(interface): dashboard metrics improvment and interface
 fixes

OpenSILEX/opensilex-dev!1233
---
 opensilex-front/front/opensilex.front.yml     |   3 -
 .../common/forms/CustomTreeselect.vue         |   6 +-
 .../components/common/forms/FormSelector.vue  |  10 +-
 .../home/dashboard/DataMonitoring.vue         | 355 +++++++++---------
 .../components/variables/VariablesView.vue    |   6 +
 5 files changed, 196 insertions(+), 184 deletions(-)

diff --git a/opensilex-front/front/opensilex.front.yml b/opensilex-front/front/opensilex.front.yml
index a94d6fb2c..ad81e4916 100644
--- a/opensilex-front/front/opensilex.front.yml
+++ b/opensilex-front/front/opensilex.front.yml
@@ -87,9 +87,6 @@ menu:
           component: opensilex-VariablesView
           credentials:
             - variable-access
-          icon: fa#vials
-          title: VariableView.title
-          description: VariableView.description
       - id: germplasm
         label: component.menu.experimentalDesign.germplasm
         icon: ik-cloud-rain
diff --git a/opensilex-front/front/src/components/common/forms/CustomTreeselect.vue b/opensilex-front/front/src/components/common/forms/CustomTreeselect.vue
index b3a04dfcf..313f22663 100644
--- a/opensilex-front/front/src/components/common/forms/CustomTreeselect.vue
+++ b/opensilex-front/front/src/components/common/forms/CustomTreeselect.vue
@@ -240,8 +240,10 @@ conversionMethod: (dto: NamedResourceDTO) => SelectableItem;
     if(this.countCache.has(searchQuery)){
       this.resultCount = this.countCache.get(searchQuery).result;
       this.totalCount = this.countCache.get(searchQuery).total;
-      this.$emit('counts', { totalCount: this.totalCount, resultCount: this.resultCount });
-    }
+    } 
+    
+    this.$emit('totalCount', this.totalCount);
+    this.$emit('resultCount', this.resultCount);
     this.lastSearchQuery = searchQuery;
   }
   //#endregion
diff --git a/opensilex-front/front/src/components/common/forms/FormSelector.vue b/opensilex-front/front/src/components/common/forms/FormSelector.vue
index 5b0407ec1..11c526dd7 100644
--- a/opensilex-front/front/src/components/common/forms/FormSelector.vue
+++ b/opensilex-front/front/src/components/common/forms/FormSelector.vue
@@ -227,12 +227,18 @@ export default class FormSelector extends Vue {
     this.$emit("deselect", value)
   }
 
+  /**
+  *  Use Vue.set to ensure reactivity (target, key, value ) 
+  *  target is the object of array to update
+  *  key is the key or the index to modify
+  *  value is the new value to give to this key or index
+  */
   updateTotalCount(totalCountUpdate){
-    this.totalCount = totalCountUpdate;
+    this.$set(this, 'totalCount', totalCountUpdate);
   }
 
   updateResultCount(resultCountUpdate){
-    this.resultCount = resultCountUpdate;
+    this.$set(this, 'resultCount', resultCountUpdate);
   }
   //#endregion
 }
diff --git a/opensilex-front/front/src/components/home/dashboard/DataMonitoring.vue b/opensilex-front/front/src/components/home/dashboard/DataMonitoring.vue
index 5155df418..74c74866e 100644
--- a/opensilex-front/front/src/components/home/dashboard/DataMonitoring.vue
+++ b/opensilex-front/front/src/components/home/dashboard/DataMonitoring.vue
@@ -1,154 +1,156 @@
 <template>
-  <opensilex-Card
-      class="stats-card"
-      :no-footer="true"
-      :no-header="true"
-      icon="fa#sort-numeric-down"
-      label="DataMonitoring.title"
-  >
-
-    <template v-slot:body>
-      <div class="globalStatsContainer">
-
-        <!-- button group to select time period for which entity counts should be shown -->
-        <span class="button-group">
-             <div class="btn-group btn-group-toggle btnsGroup" data-toggle="buttons" :options="periods">
-              <!-- day -->
-              <label class="btn periodBtn btn-toggle greenThemeColor"
-                     :class="{
-                  active: period === 'day'
-                }"
-              >
-                <input
-                    type="radio"
-                    name="options"
-                    id="option1"
-                    value="day"
-                    checked
-                    v-model=period
-                >
-                {{ $t('DataMonitoring.day') }}
-              </label>
-
-               <!-- week -->
-              <label class="btn periodBtn btn-toggle greenThemeColor"
-                     :class="{
-                  active: period === 'week'
-                }"
-              >
-                <input
-                    type="radio"
-                    name="options"
-                    id="option2"
-                    value="week"
-                    v-model=period
-                >
-                {{ $t('DataMonitoring.week') }}
-              </label>
-
-               <!-- month -->
-              <label class="btn periodBtn btn-toggle greenThemeColor"
-                     :class="{
-                  active: period === 'month'
-                }"
-              >
-                <input
-                    type="radio"
-                    name="options"
-                    id="option3"
-                    value="month"
-                    v-model=period
-                >
-                {{ $t('DataMonitoring.month') }}
-              </label>
-
-               <!-- year -->
-              <label class="btn periodBtn btn-toggle greenThemeColor"
-                     :class="{
-                  active: period === 'year'
-                }"
-              >
-                <input
-                    type="radio"
-                    name="options"
-                    id="option4"
-                    value="year"
-                    v-model=period
+  <opensilex-Overlay :show="isSearching">
+    <opensilex-Card
+        class="stats-card"
+        :no-footer="true"
+        :no-header="true"
+        icon="fa#sort-numeric-down"
+        label="DataMonitoring.title"
+    >
+
+      <template v-slot:body>
+        <div class="globalStatsContainer">
+          
+          <!-- show entity counts for a specific time period (added since last day or week) -->
+          <span class="stats-values">
+
+            <!-- show experiment count -->
+            <span id="popover-experiments" class="expe">
+              <opensilex-Icon icon="ik#ik-layers"/>
+              <span>{{ nbExperiments }} ({{ deltaExperiments }}) 
+                <a 
+                  href="/app/experiments" 
+                  class="metricsElementTitle" 
+                  :title="$t('DataMonitoring.redirectionToExpe')"
                 >
-                {{ $t('DataMonitoring.year') }}
-              </label>
-          </div>
-        </span>
-        
-        <!-- show entity counts for a specific time period (added since last day or week) -->
-        <span class="stats-values">
-
-          <!-- show experiment count -->
-          <span id="popover-experiments" class="expe">
-            <opensilex-Icon icon="ik#ik-layers"/>
-            <span>{{ nbExperiments }} ({{ deltaExperiments }}) 
-              <a 
-                href="/app/experiments" 
-                class="metricsElementTitle" 
-                :title="$t('DataMonitoring.redirectionToExpe')"
-              >
-                {{$t('component.menu.experiments')}}
-              </a>
+                  {{$t('component.menu.experiments')}}
+                </a>
+              </span>
             </span>
-          </span>
 
-          <!-- show scientific object count -->
-          <span v-if="deltaScientificObjects.includes('+')" id="popover-so" class="so">
-            <opensilex-Icon icon="ik#ik-target"/>
-            <span class="stats-underline">{{ nbScientificObjects }} ({{ deltaScientificObjects }})
-              <a 
-                href="/scientific-objects" 
-                :title="$t('DataMonitoring.redirectionToOS')"
-                class="metricsElementTitle"
-              >
-                {{ $t("component.menu.scientificObjects") }}
-              </a>
+            <!-- show scientific object count -->
+            <span v-if="deltaScientificObjects.includes('+')" id="popover-so" class="so">
+              <opensilex-Icon icon="ik#ik-target"/>
+              <span class="stats-underline">{{ nbScientificObjects }} ({{ deltaScientificObjects }})
+                <a 
+                  href="/app/scientific-objects" 
+                  :title="$t('DataMonitoring.redirectionToOS')"
+                  class="metricsElementTitle"
+                >
+                  {{ $t("component.menu.scientificObjects") }}
+                </a>
+              </span>
+              <b-popover target="popover-so" triggers="hover" placement="bottom">
+                <template #title>{{ $t("DataMonitoring.scientificObjetcTypes") }}</template>
+                <ul style="padding-left: 10px">
+                  <li v-for="item in scientificObjetcTypes" :key="item.index">
+                    {{ item }}
+                  </li>
+                </ul>
+              </b-popover>
             </span>
-            <b-popover target="popover-so" triggers="hover" placement="bottom">
-              <template #title>{{ $t("DataMonitoring.scientificObjetcTypes") }}</template>
-              <ul style="padding-left: 10px">
-                <li v-for="item in scientificObjetcTypes" :key="item.index">
-                  {{ item }}
-                </li>
-              </ul>
-            </b-popover>
-          </span>
-          
-          <span v-else>
-            <opensilex-Icon icon="ik#ik-target"/>
-            <span>{{ nbScientificObjects }} ({{ deltaScientificObjects }}) 
-              <a 
-                href="/app/scientific-objects" 
-                :title="$t('DataMonitoring.redirectionToOS')" 
-                class="metricsElementTitle"
-              >
-                {{ $t("component.menu.scientificObjects") }}
-              </a>
+            
+            <span v-else>
+              <opensilex-Icon icon="ik#ik-target"/>
+              <span>{{ nbScientificObjects }} ({{ deltaScientificObjects }}) 
+                <a 
+                  href="/app/scientific-objects" 
+                  :title="$t('DataMonitoring.redirectionToOS')" 
+                  class="metricsElementTitle"
+                >
+                  {{ $t("component.menu.scientificObjects") }}
+                </a>
+              </span>
             </span>
-          </span>
 
-          <!-- show data count -->
-          <span class="data">
-            <opensilex-Icon icon="ik#ik-bar-chart"/>
-            <span>{{ nbData }} ({{ deltaData }})
-              <a 
-                href="/app/data" 
-                class="metricsElementTitle" 
-                :title="$t('DataMonitoring.redirectionToData')"
-              > 
-                {{ $t("component.menu.data.label") }}
-              </a>
+            <!-- show data count -->
+            <span class="data">
+              <opensilex-Icon icon="ik#ik-bar-chart"/>
+              <span>{{ nbData }} ({{ deltaData }})
+                <a 
+                  href="/app/data" 
+                  class="metricsElementTitle" 
+                  :title="$t('DataMonitoring.redirectionToData')"
+                > 
+                  {{ $t("component.menu.data.label") }}
+                </a>
+              </span>
             </span>
-           </span>
-        </span>
-      </div>
-    </template>
-  </opensilex-Card>
+
+          <!-- button group to select time period for which entity counts should be shown -->
+          <span class="button-group">
+              <div class="btn-group btn-group-toggle btnsGroup" data-toggle="buttons" :options="periods">
+                <!-- day -->
+                <label class="btn periodBtn btn-toggle greenThemeColor"
+                      :class="{
+                    active: period === 'day'
+                  }"
+                >
+                  <input
+                      type="radio"
+                      name="options"
+                      id="option1"
+                      value="day"
+                      checked
+                      v-model=period
+                  >
+                  {{ $t('DataMonitoring.day') }}
+                </label>
+
+                <!-- week -->
+                <label class="btn periodBtn btn-toggle greenThemeColor"
+                      :class="{
+                    active: period === 'week'
+                  }"
+                >
+                  <input
+                      type="radio"
+                      name="options"
+                      id="option2"
+                      value="week"
+                      v-model=period
+                  >
+                  {{ $t('DataMonitoring.week') }}
+                </label>
+
+                <!-- month -->
+                <label class="btn periodBtn btn-toggle greenThemeColor"
+                      :class="{
+                    active: period === 'month'
+                  }"
+                >
+                  <input
+                      type="radio"
+                      name="options"
+                      id="option3"
+                      value="month"
+                      v-model=period
+                  >
+                  {{ $t('DataMonitoring.month') }}
+                </label>
+
+                <!-- year -->
+                <label class="btn periodBtn btn-toggle greenThemeColor"
+                      :class="{
+                    active: period === 'year'
+                  }"
+                >
+                  <input
+                      type="radio"
+                      name="options"
+                      id="option4"
+                      value="year"
+                      v-model=period
+                  >
+                  {{ $t('DataMonitoring.year') }}
+                </label>
+            </div>
+          </span>
+                    </span>
+        </div>
+      </template>
+    </opensilex-Card>
+  </opensilex-Overlay>
 </template>
 
 <script lang="ts">
@@ -180,6 +182,7 @@ export default class DataMonitoring extends Vue {
   week: string = "week";
   month: string = "month";
   year: string = "year";
+  isSearching = false;
 
   /*
    * initialize time period indicator for data counts (i.e. day, week, month or year)
@@ -225,38 +228,40 @@ export default class DataMonitoring extends Vue {
   }
 
   loadMetrics() {
-    this.$opensilex.enableLoader();
+    this.$opensilex.disableLoader();
+    this.isSearching = true;
     let service: MetricsService = this.$opensilex.getService("opensilex.MetricsService");
     service
-            .getSystemMetricsSummary(
-              this.period,
-              this.page,
-              this.pageSize
-              )
-            .then((http: HttpResponse<OpenSilexResponse<MetricPeriodDTO>>) => {
-              let result: MetricPeriodDTO = http.response.result;
-              this.nbScientificObjects = this.splitIntegerByThousands(result.scientific_object_list.total_items_count);
-              this.deltaScientificObjects = this.getCountDeltaWthAlgebraicSign(result.scientific_object_list.total_difference_item_count);
-              if(result.scientific_object_list.total_difference_item_count > 0) {
-                this.scientificObjetcTypes = this.getAddedTypes(result.scientific_object_list.difference_items);
-              }
-              this.nbExperiments = this.splitIntegerByThousands(result.experiment_list.total_items_count);
-              this.deltaExperiments = this.getCountDeltaWthAlgebraicSign(result.experiment_list.total_difference_item_count);
-              this.nbData = this.splitIntegerByThousands(result.data_list.total_items_count);
-              this.deltaData = this.getCountDeltaWthAlgebraicSign(result.data_list.total_difference_item_count);
-            })
-            .catch((http: HttpResponse<OpenSilexResponse<MetricPeriodDTO>>) => {
-              if (http.status === 404) {
-                this.nbScientificObjects = "N/A";
-                this.deltaScientificObjects = "N/A";
-                this.nbExperiments = "N/A";
-                this.deltaExperiments = "N/A";
-                this.nbData = "N/A";
-                this.deltaData = "N/A";
-              } else {
-                this.$opensilex.errorHandler(http);
-              }
-            });
+      .getSystemMetricsSummary(
+        this.period,
+        this.page,
+        this.pageSize
+        )
+      .then((http: HttpResponse<OpenSilexResponse<MetricPeriodDTO>>) => {
+        let result: MetricPeriodDTO = http.response.result;
+        this.nbScientificObjects = this.splitIntegerByThousands(result.scientific_object_list.total_items_count);
+        this.deltaScientificObjects = this.getCountDeltaWthAlgebraicSign(result.scientific_object_list.total_difference_item_count);
+        if(result.scientific_object_list.total_difference_item_count > 0) {
+          this.scientificObjetcTypes = this.getAddedTypes(result.scientific_object_list.difference_items);
+        }
+        this.nbExperiments = this.splitIntegerByThousands(result.experiment_list.total_items_count);
+        this.deltaExperiments = this.getCountDeltaWthAlgebraicSign(result.experiment_list.total_difference_item_count);
+        this.nbData = this.splitIntegerByThousands(result.data_list.total_items_count);
+        this.deltaData = this.getCountDeltaWthAlgebraicSign(result.data_list.total_difference_item_count);
+        this.isSearching = false;
+      })
+      .catch((http: HttpResponse<OpenSilexResponse<MetricPeriodDTO>>) => {
+        if (http.status === 404) {
+          this.nbScientificObjects = "N/A";
+          this.deltaScientificObjects = "N/A";
+          this.nbExperiments = "N/A";
+          this.deltaExperiments = "N/A";
+          this.nbData = "N/A";
+          this.deltaData = "N/A";
+        } else {
+          this.$opensilex.errorHandler(http);
+        }
+      });
   }
 
   /**
@@ -330,7 +335,6 @@ export default class DataMonitoring extends Vue {
 .stats-values {
   font-size: 1.6em;
   margin-left: 5%;
-  margin-right: 10%;
   display:flex;
   justify-content: space-evenly;
   list-style-type: none;
@@ -380,9 +384,6 @@ export default class DataMonitoring extends Vue {
     margin-right: 0%;
   }
 
-  .globalStatsContainer {
-    display: inline-flex;
-  }
 }
 </style>
 
diff --git a/opensilex-front/front/src/components/variables/VariablesView.vue b/opensilex-front/front/src/components/variables/VariablesView.vue
index e939dcaad..994b50dc5 100644
--- a/opensilex-front/front/src/components/variables/VariablesView.vue
+++ b/opensilex-front/front/src/components/variables/VariablesView.vue
@@ -1,5 +1,11 @@
 <template>
     <div class="container-fluid">
+        <opensilex-PageHeader
+            icon="fa#vials"
+            title="VariableView.title"
+            description="VariableView.description"
+            class="detail-element-header"
+        ></opensilex-PageHeader>
         <div>
             <opensilex-PageActions>
                 <div>