[Enhancement #544] Show info about field in which FTS match was found.

src/component/search/label/FTSMatch.tsx

@@ -42,15 +42,13 @@ const processingInstructions: Instruction[] = [
 export const FTSMatch: React.FC<FTSMatchProps> = (props: FTSMatchProps) => {
   const parser = new HtmlToReactParser();
   return (
-    <div key={props.match}>
-      <React.Fragment>
-        {parser.parseWithInstructions(
-          props.match,
-          isValidNode,
-          processingInstructions
-        )}
-      </React.Fragment>
-    </div>
+    <React.Fragment>
+      {parser.parseWithInstructions(
+        props.match,
+        isValidNode,
+        processingInstructions
+      )}
+    </React.Fragment>
   );
 };
 

src/component/search/label/MatchInfo.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import SearchResult from "../../../model/search/SearchResult";
+import { useI18n } from "../../hook/useI18n";
+import FTSMatch from "./FTSMatch";
+
+/**
+ * If the match is in one of these, it is not rendered by the result row by default
+ */
+const HIDDEN_FIELDS = ["altLabel", "hiddenLabel"];
+
+const FIELD_NAME_MAPPING = {
+  prefLabel: "asset.label",
+  altLabel: "term.metadata.altLabels.label",
+  hiddenLabel: "term.metadata.hiddenLabels.label",
+  scopeNote: "term.metadata.comment",
+  definition: "term.metadata.definition",
+  description: "description",
+};
+
+const MatchInfo: React.FC<{ result: SearchResult }> = ({ result }) => {
+  const { i18n } = useI18n();
+  return (
+    <span className="italics">
+      {i18n("search.results.field")}{" "}
+      <b>{i18n(FIELD_NAME_MAPPING[result.snippetField])}</b>
+      {HIDDEN_FIELDS.includes(result.snippetField) ? (
+        <>
+          &nbsp;(
+          <FTSMatch match={result.snippetText} />)
+        </>
+      ) : null}
+    </span>
+  );
+};
+
+export default MatchInfo;

src/component/search/label/TermResultItem.tsx

@@ -12,6 +12,7 @@ import { getTermPath } from "../../term/TermLink";
 import TermStateBadge from "../../term/state/TermStateBadge";
 import { useI18n } from "../../hook/useI18n";
 import { getResultDescription } from "./VocabularyResultItem";
+import MatchInfo from "./MatchInfo";
 
 interface TermResultItemProps {
   result: SearchResultItem;
@@ -52,10 +53,10 @@ const TermResultItem: React.FC<TermResultItemProps> = ({ result }) => {
         path={getTermPath(asset as Term, user)}
         tooltip={i18n("asset.link.tooltip")}
       />
-      <br />
-      <span className="search-result-snippet">
+      <div className="search-result-snippet">
         <FTSMatch match={description} />
-      </span>
+      </div>
+      <MatchInfo result={result} />
     </>
   );
 };

src/component/search/label/VocabularyResultItem.tsx

@@ -5,6 +5,7 @@ import Vocabulary from "../../../model/Vocabulary";
 import VocabularyLink from "../../vocabulary/VocabularyLink";
 import AssetFactory from "../../../util/AssetFactory";
 import VocabularyBadge from "../../badge/VocabularyBadge";
+import Constants from "../../../util/Constants";
 
 interface VocabularyResultItemProps {
   result: SearchResultItem;
@@ -35,8 +36,8 @@ export function getResultDescription(
     text = result.description;
   }
 
-  if (text && text!.length > 200) {
-    text = text!.substring(0, 200) + " ...";
+  if (text && text!.length > Constants.FTS_SNIPPET_TEXT_SIZE) {
+    text = text!.substring(0, Constants.FTS_SNIPPET_TEXT_SIZE) + " ...";
   }
   return text || "";
 }

src/i18n/cs.ts

@@ -119,7 +119,7 @@ const cs = {
     "main.nav.search": "Vyhledávání",
     "main.nav.searchTerms": "Vyhledávání pojmů",
     "main.nav.searchVocabularies": "Vyhledávání slovníků",
-    "main.nav.facetedSearch": "Facetové vyhledávání",
+    "main.nav.facetedSearch": "Fasetové vyhledávání",
     "main.nav.admin": "Administrace",
     "main.nav.create-vocabulary": "Nový slovník",
     "main.nav.import-vocabulary": "Importovat slovník",
@@ -130,7 +130,7 @@ const cs = {
     "main.search.count-info-and-link":
       "Zobrazeno {displayed} z {count} výsledků. Zobrazit všechny.",
     "main.search.no-results":
-      "Zadanému výrazu neodpovídá žádný výsledek. Kliknutím vyzkoušíte facetové hledání.",
+      "Zadanému výrazu neodpovídá žádný výsledek. Kliknutím vyzkoušíte fasetové hledání.",
     "main.lang-selector.tooltip": "Vyberte jazyk uživatelského rozhraní",
 
     "dashboard.widget.assetList.empty":
@@ -635,7 +635,7 @@ const cs = {
     "search.tab.terms": "Pojmy",
     "search.tab.terms.filter.allVocabularies": "Všechny slovníky",
     "search.tab.vocabularies": "Slovníky",
-    "search.tab.facets": "Facetové vyhledávání pojmů",
+    "search.tab.facets": "Fasetové vyhledávání pojmů",
     "search.reset": "Vymazat vyhledávání",
     "search.results.title": "Výsledky vyhledávání „{searchString}“",
     "search.no-results": "Zadanému výrazu neodpovídá žádný výsledek.",
@@ -645,7 +645,7 @@ const cs = {
     "search.results.table.label.tooltip": "Zobrazit detail objektu",
     "search.results.table.match": "Nalezená shoda",
     "search.results.table.score": "Skóre shody",
-    "search.results.field.badge.tooltip": "Shoda nalezena v tomto atributu",
+    "search.results.field": "Shoda nalezena v atributu:",
     "search.results.field.label": "Název",
     "search.results.field.comment": "Popis",
     "search.results.field.definition": "Definice",

src/i18n/en.ts

@@ -635,7 +635,7 @@ const en = {
     "search.results.table.label.tooltip": "Open asset detail",
     "search.results.table.match": "Match",
     "search.results.table.score": "Match score",
-    "search.results.field.badge.tooltip": "Matched attribute",
+    "search.results.field": "Match found in attribute:",
     "search.results.field.label": "Label",
     "search.results.field.comment": "Comment",
     "search.results.field.definition": "Definition",

src/util/Constants.ts

@@ -118,6 +118,7 @@ const constants = {
   ANNOTATOR_TUTORIAL: {},
   WORKSPACE_EDITABLE_CONTEXT_PARAM: "edit-context",
   TIMESTAMP_PARAM_FORMAT: "yyyyMMdd'T'HHmmss'Z'",
+  FTS_SNIPPET_TEXT_SIZE: 250,
 
   // Size of page fetched from server
   DEFAULT_PAGE_SIZE: 100,