Improve tooltips for facet filter items (#8122)

* Improve tooltips for facet filter items * Improve tooltips for facet filter items in home page. GEMET facet is multilingual. --------- Co-authored-by: Francois Prunayre <[email protected]>
geonetwork · Jun 6, 2024 · e3c8665 · e3c8665
1 parent b159cda
commit e3c8665
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 18 deletions.
diff --git a/services/src/main/java/org/fao/geonet/api/registries/vocabularies/KeywordsApi.java b/services/src/main/java/org/fao/geonet/api/registries/vocabularies/KeywordsApi.java
@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2001-2023 Food and Agriculture Organization of the
+ * Copyright (C) 2001-2024 Food and Agriculture Organization of the
  * United Nations (FAO-UN), United Nations World Food Programme (WFP)
  * and United Nations Environment Programme (UNEP)
  *
@@ -509,7 +509,7 @@ private Object getKeyword(
         }
 
         Element descKeys;
-        Map<String, String> jsonResponse = new HashMap<>();
+        Map<String, Map<String, String>> jsonResponse = new HashMap<>();
 
         uri = URLDecoder.decode(uri, "UTF-8");
 
@@ -545,10 +545,15 @@ private Object getKeyword(
             descKeys = new Element("descKeys");
             for (KeywordBean keywordBean : kbList) {
                 if (isJson) {
+
+                    Map<String, String> keywordInfo = new HashMap<>();
+                    keywordInfo.put("label", keywordBean.getDefaultValue());
+                    keywordInfo.put("definition", StringUtils.isNotEmpty(keywordBean.getDefaultDefinition()) ?
+                        keywordBean.getDefaultDefinition() : keywordBean.getDefaultValue());
                     jsonResponse.put(
                         keywordBean.getUriCode(),
                         // Requested lang or the first non empty value
-                        keywordBean.getDefaultValue()
+                        keywordInfo
                     );
                 } else {
                     KeywordsSearcher.toRawElement(descKeys, keywordBean);
@@ -654,10 +659,12 @@ public void getThesaurus(
         response.setContentType("text/xml");
         response.setHeader("Content-Disposition", "attachment;filename=" + directoryFile.getFileName());
         ServletOutputStream out = response.getOutputStream();
-        BufferedReader reader1 = new BufferedReader(new InputStreamReader(new FileInputStream(directoryFile.toFile()), StandardCharsets.UTF_8));
-        IOUtils.copy(reader1, out);
-        out.flush();
-        out.close();
+        try (BufferedReader reader1 = new BufferedReader(new InputStreamReader(new FileInputStream(directoryFile.toFile()), StandardCharsets.UTF_8))) {
+            IOUtils.copy(reader1, out, StandardCharsets.UTF_8);
+        } finally {
+            out.flush();
+            out.close();
+        }
     }
 
 
@@ -1094,9 +1101,7 @@ private void extractRelated(String key, String thesaurusNamespaceUrl, CSVParser
                 key,
                 Arrays.stream(csvRecord.get(column).split(conceptLinkSeparator))
                     .filter(StringUtils::isNotEmpty)
-                    .map(c -> {
-                        return thesaurusNamespaceUrl + c;
-                    })
+                    .map(c -> thesaurusNamespaceUrl + c)
                     .collect(Collectors.toList())
             );
         }

diff --git a/web-ui/src/main/resources/catalog/components/elasticsearch/directives/FacetDirective.js b/web-ui/src/main/resources/catalog/components/elasticsearch/directives/FacetDirective.js
@@ -187,6 +187,23 @@
     }
   ]);
 
+  module.filter("facetTooltip", [
+    "$translate",
+    "$filter",
+    function ($translate, $filter) {
+      return function (item) {
+        if (item.definition) {
+          var key = item.definition + "-tooltip",
+            tooltip = $translate.instant(key);
+          if (tooltip !== key) {
+            return tooltip;
+          }
+        }
+        return $filter("facetTranslator")(item.value);
+      };
+    }
+  ]);
+
   module.filter("facetTranslator", [
     "$translate",
     "$filter",
@@ -284,8 +301,10 @@
    * @param $scope
    * @constructor
    */
-  var FacetController = function ($scope) {
+  var FacetController = function ($scope, $translate, $filter) {
     this.$scope = $scope;
+    this.$translate = $translate;
+    this.$filter = $filter;
   };
 
   FacetController.prototype.$onInit = function () {
@@ -331,7 +350,7 @@
     this.filter(this.facet, item);
   };
 
-  FacetController.$inject = ["$scope"];
+  FacetController.$inject = ["$scope", "$translate", "$filter"];
 
   module.directive("esFacet", [
     "gnLangs",

diff --git a/.../src/main/resources/catalog/components/elasticsearch/directives/partials/facet-cards.html b/.../src/main/resources/catalog/components/elasticsearch/directives/partials/facet-cards.html
@@ -12,7 +12,7 @@
     <div class="panel-body">
       <a
         class="clearfix"
-        title="{{::facetValue}}"
+        title="{{::(facet | facetTooltip)}}"
         role="link"
         data-ng-init="response = aggregations[key];
                       decorator = (response.meta && response.meta.decorator) || undefined"

diff --git a/web-ui/src/main/resources/catalog/components/elasticsearch/directives/partials/facet.html b/web-ui/src/main/resources/catalog/components/elasticsearch/directives/partials/facet.html
@@ -13,11 +13,12 @@
       >
       </span>
     </a>
+
     <a
       href
       class="flex-row flex-align-center flex-shrink width-100"
       ng-class="ctrl.isInSearch(ctrl.facet, ctrl.item) ? 'gn-facet-checked' + (ctrl.item.inverted ? '-inverted' : '') : ''"
-      title="{{::ctrl.item.value}}"
+      title="{{::(ctrl.item | facetTooltip)}}"
       ng-click="ctrl.filter(ctrl.facet, ctrl.item)"
     >
       <span

diff --git a/web-ui/src/main/resources/catalog/components/utility/UtilityService.js b/web-ui/src/main/resources/catalog/components/utility/UtilityService.js
@@ -677,7 +677,8 @@
           if (!newNode) {
             newNode = {
               name: group,
-              value: group
+              value: group,
+              definition: group
               //selected: themesInSearch.indexOf(t['@name']) >= 0 ? true : false
             };
             if (!node.nodes) node.nodes = [];
@@ -795,12 +796,19 @@
         if (Object.keys(translationsToLoad[fieldId]).length > 0) {
           loadTranslation(fieldId, meta && meta.thesaurus).then(function (translations) {
             if (angular.isObject(translations)) {
+              var translationToAdd = {};
+              var keys = Object.keys(translations);
+              for (var i = 0; i < keys.length; i++) {
+                translationToAdd[keys[i]] = translations[keys[i]].label;
+                translationToAdd[keys[i] + "-tooltip"] = translations[keys[i]].definition;
+              }
+
               var t = {};
               t[gnLangs.current] = {};
               t[gnLangs.current] = angular.extend(
                 {},
                 gnLangs.provider.translations()[gnLangs.current],
-                translations
+                translationToAdd
               );
               gnLangs.provider.useLoader("inlineLoaderFactory", t);
               $translate.refresh();

diff --git a/web-ui/src/main/resources/catalog/js/CatController.js b/web-ui/src/main/resources/catalog/js/CatController.js
@@ -453,9 +453,9 @@
                 }
               },
               // GEMET configuration for non multilingual catalog
-              "th_gemet_tree.default": {
+              "th_gemet_tree.key": {
                 terms: {
-                  field: "th_gemet_tree.default",
+                  field: "th_gemet_tree.key",
                   size: 100,
                   order: { _key: "asc" },
                   include: "[^^]+^?[^^]+"