[Enhancement kbss-cvut#520] Optimizing term labels in vocabulary cont…

…ent history.

When DeleteRecord is loaded by FE, the label of deleted term is cached allowing to display it instead of IRI. When the label is not available, the IRI will be shrunk.

src/action/AsyncVocabularyActions.ts

@@ -32,6 +32,7 @@ import ChangeRecord, {
 } from "../model/changetracking/ChangeRecord";
 import AssetFactory from "../util/AssetFactory";
 import { VocabularyContentChangeFilterData } from "../model/filter/VocabularyContentChangeFilterData";
+import { getLocalized } from "../model/MultilingualString";
 
 export function loadTermCount(vocabularyIri: IRI) {
   const action = { type: ActionType.LOAD_TERM_COUNT, vocabularyIri };
@@ -174,6 +175,19 @@ export function loadVocabularyContentDetailedChanges(
           CHANGE_RECORD_CONTEXT
         )
       )
+      .then((data: ChangeRecord[]) => {
+        // adding labels to the label cache as they cannot be fetched from server
+        const labels: { [key: string]: string } = {};
+        data.forEach((r) => {
+          if (r["label"]) {
+            labels[r.changedEntity.iri] = getLocalized(r["label"]);
+          }
+        });
+        dispatch(
+          asyncActionSuccessWithPayload({ type: ActionType.GET_LABEL }, labels)
+        );
+        return data;
+      })
       .then((data: ChangeRecord[]) => {
         dispatch(asyncActionSuccess(action));
         return data.map((r) => AssetFactory.createChangeRecord(r));

src/component/changetracking/VocabularyContentDeleteRow.tsx

@@ -24,7 +24,7 @@ export const VocabularyContentDeleteRow: React.FC<DeleteRowProps> = (props) => {
         </div>
       </td>
       <td>
-        <TermIriLink iri={record.changedEntity.iri} />
+        <TermIriLink iri={record.changedEntity.iri} shrinkFullIri={true} />
       </td>
       <td>
         <Badge color="danger">{i18n(record.typeLabel)}</Badge>

src/component/changetracking/VocabularyContentPersistRow.tsx

@@ -22,7 +22,7 @@ export const VocabularyContentPersistRow: React.FC<PersistRowProps> = (
         </div>
       </td>
       <td>
-        <TermIriLink iri={record.changedEntity.iri} />
+        <TermIriLink iri={record.changedEntity.iri} shrinkFullIri={true} />
       </td>
       <td>
         <Badge color="dark">{i18n(record.typeLabel)}</Badge>

src/component/changetracking/VocabularyContentUpdateRow.tsx

@@ -21,7 +21,7 @@ export const VocabularyContentUpdateRow: React.FC<UpdateRowProps> = (props) => {
         </div>
       </td>
       <td>
-        <TermIriLink iri={record.changedEntity.iri} />
+        <TermIriLink iri={record.changedEntity.iri} shrinkFullIri={true} />
       </td>
       <td>
         <Badge color="secondary">{i18n(record.typeLabel)}</Badge>

src/component/term/TermIriLink.tsx

@@ -4,31 +4,46 @@ import VocabularyUtils from "../../util/VocabularyUtils";
 import Term from "../../model/Term";
 import { useDispatch } from "react-redux";
 import { ThunkDispatch } from "../../util/Types";
-import { loadTermByIri } from "../../action/AsyncActions";
+import { getLabel, loadTermByIri } from "../../action/AsyncActions";
 import TermLink from "./TermLink";
 import OutgoingLink from "../misc/OutgoingLink";
+import Utils from "../../util/Utils";
 
 interface TermIriLinkProps {
   iri: string;
   id?: string;
   activeTab?: string;
+  shrinkFullIri?: boolean;
 }
 
 const TermIriLink: React.FC<TermIriLinkProps> = (props) => {
   const { iri, id, activeTab } = props;
   const [term, setTerm] = useState<Term | null>(null);
   const dispatch: ThunkDispatch = useDispatch();
+  const [label, setLabel] = useState<string>();
   useEffect(() => {
     const tIri = VocabularyUtils.create(iri);
     dispatch(loadTermByIri(tIri)).then((term) => setTerm(term));
   }, [iri, dispatch, setTerm]);
 
+  // if term is null, try to acquire the label from cache
+  useEffect(() => {
+    if (term === null) {
+      dispatch(getLabel(iri)).then((label) => setLabel(label));
+    }
+  }, [term, iri, dispatch]);
+
   return (
     <>
       {term !== null ? (
         <TermLink id={id} term={term} activeTab={activeTab} />
       ) : (
-        <OutgoingLink label={iri} iri={iri} />
+        <OutgoingLink
+          label={
+            label ?? (props.shrinkFullIri ? Utils.shrinkFullIri(iri) : iri)
+          }
+          iri={iri}
+        />
       )}
     </>
   );

src/model/changetracking/ChangeRecord.ts

@@ -1,6 +1,7 @@
 import VocabularyUtils from "../../util/VocabularyUtils";
 import User, { CONTEXT as USER_CONTEXT, UserData } from "../User";
 import Utils from "../../util/Utils";
+import { context } from "../MultilingualString";
 
 const ctx = {
   timestamp: {
@@ -12,6 +13,7 @@ const ctx = {
   changedAttribute: `${VocabularyUtils.PREFIX}m\u00e1-zm\u011bn\u011bn\u00fd-atribut`,
   originalValue: `${VocabularyUtils.PREFIX}m\u00e1-p\u016fvodn\u00ed-hodnotu`,
   newValue: `${VocabularyUtils.PREFIX}m\u00e1-novou-hodnotu`,
+  label: context(VocabularyUtils.RDFS_LABEL),
 };
 
 export const CONTEXT = Object.assign({}, ctx, USER_CONTEXT);

src/model/changetracking/DeleteRecord.ts

@@ -10,7 +10,6 @@ export interface DeleteRecordData extends ChangeRecordData {
  */
 export default class DeleteRecord extends ChangeRecord {
   public readonly label: MultilingualString;
-  public readonly vocabulary?: string;
   public constructor(data: DeleteRecordData) {
     super(data);
     this.label = data.label;