Enhancement#544 fts results visualization

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/SearchResults.tsx

@@ -51,7 +51,7 @@ export function mergeDuplicates(
       // If the match field is the same there is no need to update other attributes, as the match is already
       // marked in the snippet of the existing item
       if (existing.snippetField !== r.snippetField) {
-        if (r.snippetField === "label") {
+        if (r.snippetField === "prefLabel") {
           // Render label match first
           existing.snippets.unshift(r.snippetText);
           existing.snippetFields.unshift(r.snippetField);

src/component/search/label/TermResultItem.tsx

@@ -1,150 +1,64 @@
 import * as React from "react";
-import { injectIntl } from "react-intl";
-import withI18n, { HasI18n } from "../../hoc/withI18n";
-import VocabularyUtils, { IRI } from "../../../util/VocabularyUtils";
 import AssetLink from "../../misc/AssetLink";
 import Term from "../../../model/Term";
-import { connect } from "react-redux";
-import { ThunkDispatch } from "../../../util/Types";
-import { loadTermByIri } from "../../../action/AsyncActions";
+import { useSelector } from "react-redux";
 import { SearchResultItem } from "./SearchResults";
 import AssetLabel from "../../misc/AssetLabel";
 import AssetFactory from "../../../util/AssetFactory";
 import TermItState from "../../../model/TermItState";
 import FTSMatch from "./FTSMatch";
 import TermBadge from "../../badge/TermBadge";
 import { getTermPath } from "../../term/TermLink";
-import User from "../../../model/User";
-import { getLocalized } from "../../../model/MultilingualString";
-import { getShortLocale } from "../../../util/IntlUtil";
 import TermStateBadge from "../../term/state/TermStateBadge";
+import { useI18n } from "../../hook/useI18n";
+import { getResultDescription } from "./VocabularyResultItem";
+import MatchInfo from "./MatchInfo";
 
-interface TermResultItemOwnProps {
+interface TermResultItemProps {
   result: SearchResultItem;
 }
 
-interface TermResultItemDispatchProps {
-  loadTerm: (termIri: IRI) => Promise<Term | null>;
-}
-
-interface TermResultItemStateProps {
-  user: User;
-}
-
-interface TermResultItemProps
-  extends TermResultItemOwnProps,
-    TermResultItemDispatchProps,
-    TermResultItemStateProps,
-    HasI18n {}
-
-interface TermResultItemState {
-  text: string | undefined;
-}
-
-export class TermResultItem extends React.Component<
-  TermResultItemProps,
-  TermResultItemState
-> {
-  constructor(props: TermResultItemProps) {
-    super(props);
-    this.state = {
-      text: undefined,
-    };
-  }
-
-  public componentDidMount(): void {
-    const indexOfDefinition = this.getIndexOf("definition");
-    if (indexOfDefinition < 0) {
-      const iri = VocabularyUtils.create(this.props.result.iri);
-      this.props.loadTerm(iri).then((term) => {
-        if (term) {
-          this.setState({
-            text: term!.definition
-              ? getLocalized(
-                  term!.definition,
-                  getShortLocale(this.props.locale)
-                )
-              : getLocalized(
-                  term!.scopeNote,
-                  getShortLocale(this.props.locale)
-                ),
-          });
-        }
-      });
-    }
-  }
+const TermResultItem: React.FC<TermResultItemProps> = ({ result }) => {
+  const { i18n } = useI18n();
+  const user = useSelector((state: TermItState) => state.user);
 
-  private getIndexOf(field: string) {
-    return this.props.result.snippetFields.indexOf(field);
-  }
-
-  public render() {
-    const i18n = this.props.i18n;
-    const result = this.props.result;
-    const t = {
-      iri: result.iri,
-      label: (
-        <>
-          <span className="search-result-title">{result.label}</span>
-          &nbsp;
-          {this.props.result.vocabulary ? (
-            <>
-              {i18n("search.results.vocabulary.from")}&nbsp;
-              <AssetLabel iri={result.vocabulary!.iri} />
-            </>
-          ) : (
-            <></>
-          )}
-        </>
-      ),
-    };
-
-    let text;
-    if (this.getIndexOf("definition") > -1) {
-      text = result.snippets[this.getIndexOf("definition")];
-    } else {
-      text = this.state.text;
-    }
-
-    if (text && text!.length > 200) {
-      text = text!.substring(0, 200) + " ...";
-    }
-
-    const asset = AssetFactory.createAsset(result);
-    return (
+  const t = {
+    iri: result.iri,
+    label: (
       <>
-        <TermBadge className="search-result-badge" />
-        <TermStateBadge state={result.state} />
-        <AssetLink
-          asset={t}
-          path={getTermPath(asset as Term, this.props.user)}
-          tooltip={i18n("asset.link.tooltip")}
-        />
-        <br />
-        <span className="search-result-snippet">
-          {this.getIndexOf("definition") > -1 ? (
-            <FTSMatch match={text || ""} />
-          ) : (
-            text
-          )}
-        </span>
+        <span className="search-result-title">{result.label}</span>
+        &nbsp;
+        {result.vocabulary ? (
+          <>
+            {i18n("search.results.vocabulary.from")}&nbsp;
+            <AssetLabel iri={result.vocabulary!.iri} />
+          </>
+        ) : (
+          <></>
+        )}
       </>
-    );
-  }
-}
+    ),
+  };
+  const fields = ["definition", "scopeNote"];
+
+  const description = getResultDescription(result, fields);
+
+  const asset = AssetFactory.createAsset(result);
+  return (
+    <>
+      <TermBadge className="search-result-badge" />
+      <TermStateBadge state={result.state} />
+      <AssetLink
+        asset={t}
+        path={getTermPath(asset as Term, user)}
+        tooltip={i18n("asset.link.tooltip")}
+      />
+      <div className="search-result-snippet">
+        <FTSMatch match={description} />
+      </div>
+      <MatchInfo result={result} />
+    </>
+  );
+};
 
-export default connect<
-  TermResultItemStateProps,
-  TermResultItemDispatchProps,
-  TermResultItemOwnProps,
-  TermItState
->(
-  (state: TermItState) => {
-    return { user: state.user };
-  },
-  (dispatch: ThunkDispatch) => {
-    return {
-      loadTerm: (termIri: IRI) => dispatch(loadTermByIri(termIri)),
-    };
-  }
-)(injectIntl(withI18n(TermResultItem)));
+export default TermResultItem;