fix(web): additional UX improvements for data display and history

- Hide empty fields in nested objects (e.g., empty ORCID values)
- Add 'longest_name' to hidden internal fields
- Decode HTML entities in displayed text (e.g., & -> &)
- Hide empty relationship sections (0 of 0 entries)
- Deduplicate concepts by ID in relationship display
- Preserve decimal precision for score/share/percentile fields
- Prevent history URL/title mismatches with entity ID validation
- Prioritize fetched display names over stored titles in history

Author: Mearman

apps/web/src/components/EntityDataDisplay.tsx

@@ -40,6 +40,23 @@ import { humanizeFieldName } from "@/utils/field-labels";
 import { formatNumber } from "@/utils/format-number";
 import { convertOpenAlexToInternalLink, isOpenAlexId } from "@/utils/openalex-link-conversion";
 
+/**
+ * Decode HTML entities in text
+ * Handles common entities like &, <, >, ", etc.
+ */
+const decodeHtmlEntities = (text: string): string => {
+  const entities: Record<string, string> = {
+    "&amp;": "&",
+    "&lt;": "<",
+    "&gt;": ">",
+    "&quot;": '"',
+    "&#39;": "'",
+    "&apos;": "'",
+    "&nbsp;": " ",
+  };
+  return text.replaceAll(/&(?:amp|lt|gt|quot|apos|nbsp|#39);/g, (match) => entities[match] ?? match);
+};
+
 /** Section priority for consistent ordering */
 const SECTION_PRIORITY: Record<string, number> = {
   Identifiers: 1,
@@ -148,7 +165,7 @@ const renderPrimitiveValue = (value: unknown, fieldName?: string): import("react
       );
     }
 
-    return <Text size="sm">{value}</Text>;
+    return <Text size="sm">{decodeHtmlEntities(value)}</Text>;
   }
 
   return <Text c="dimmed" fs="italic" size="sm">{String(value)}</Text>;
@@ -200,6 +217,7 @@ const HIDDEN_FIELDS = new Set([
   // Other internal fields
   "relevance_score",
   "filter_key",
+  "longest_name",
 ]);
 
 const groupFields = (data: Record<string, unknown>): SectionData[] => {
@@ -306,9 +324,10 @@ const renderValueContent = (value: unknown, fieldName?: string): import("react")
 
   // Objects - key-value pairs
   if (typeof value === "object") {
-    const entries = Object.entries(value as Record<string, unknown>);
+    const entries = Object.entries(value as Record<string, unknown>)
+      .filter(([, val]) => isDisplayableValue(val));
     if (entries.length === 0) {
-      return <Text c="dimmed" fs="italic" size="sm">{"{ }"}</Text>;
+      return null;
     }
 
     return (

apps/web/src/components/layout/HistoryCard.tsx

@@ -36,11 +36,12 @@ export const HistoryCard = ({ entry, onClose, formatDate }: HistoryCardProps) =>
   // Try to extract title from notes first
   const titleFromNotes = entry.notes?.match(/Title: ([^\n]+)/)?.[1];
 
-  // Fetch display name from API if not a special ID and no title in notes
+  // Always try to fetch display name from API for non-special IDs
+  // This ensures fresh titles even if stale ones were stored in notes
   const { displayName, isLoading } = useEntityDisplayName({
     entityId: entry.entityId,
     entityType: entry.entityType as EntityType,
-    enabled: !isSpecialId && !titleFromNotes,
+    enabled: !isSpecialId,
   });
 
   // Format entity type for display (e.g., "works" -> "Work", "authors" -> "Author")
@@ -63,13 +64,17 @@ export const HistoryCard = ({ entry, onClose, formatDate }: HistoryCardProps) =>
   };
 
   // Determine the title to display
+  // Priority: fetched displayName > stored titleFromNotes > fallback
+  // This ensures fresh titles even if stale ones were stored
   let title: string;
-  if (titleFromNotes) {
-    title = titleFromNotes;
-  } else if (isSpecialId) {
+  if (isSpecialId) {
     title = entry.entityId.startsWith("search-") ? `Search: ${entry.entityId.replace("search-", "").split("-")[0]}` : `List: ${entry.entityId.replace("list-", "")}`;
   } else if (displayName) {
+    // Prefer freshly fetched display name
     title = displayName;
+  } else if (titleFromNotes) {
+    // Fall back to stored title from notes
+    title = titleFromNotes;
   } else if (isLoading) {
     title = "Loading...";
   } else {

apps/web/src/components/relationship/IncomingRelationships.tsx

@@ -160,15 +160,17 @@ export const IncomingRelationships: React.FC<IncomingRelationshipsProps> = ({
         title="Filter Incoming Relationships"
       />
 
-      {incoming.map((section) => (
-        <RelationshipSection
-          key={section.id}
-          section={section}
-          onPageChange={hasApiData ? (page) => goToPage(section.id, page) : undefined}
-          onPageSizeChange={hasApiData ? (size) => setPageSize(section.id, size) : undefined}
-          isLoading={hasApiData ? isLoadingMore(section.id) : false}
-        />
-      ))}
+      {incoming
+        .filter((section) => section.totalCount > 0)
+        .map((section) => (
+          <RelationshipSection
+            key={section.id}
+            section={section}
+            onPageChange={hasApiData ? (page) => goToPage(section.id, page) : undefined}
+            onPageSizeChange={hasApiData ? (size) => setPageSize(section.id, size) : undefined}
+            isLoading={hasApiData ? isLoadingMore(section.id) : false}
+          />
+        ))}
     </Stack>
   );
 };

apps/web/src/components/relationship/OutgoingRelationships.tsx

@@ -160,15 +160,17 @@ export const OutgoingRelationships: React.FC<OutgoingRelationshipsProps> = ({
         title="Filter Outgoing Relationships"
       />
 
-      {outgoing.map((section) => (
-        <RelationshipSection
-          key={section.id}
-          section={section}
-          onPageChange={hasApiData ? (page) => goToPage(section.id, page) : undefined}
-          onPageSizeChange={hasApiData ? (size) => setPageSize(section.id, size) : undefined}
-          isLoading={hasApiData ? isLoadingMore(section.id) : false}
-        />
-      ))}
+      {outgoing
+        .filter((section) => section.totalCount > 0)
+        .map((section) => (
+          <RelationshipSection
+            key={section.id}
+            section={section}
+            onPageChange={hasApiData ? (page) => goToPage(section.id, page) : undefined}
+            onPageSizeChange={hasApiData ? (size) => setPageSize(section.id, size) : undefined}
+            isLoading={hasApiData ? isLoadingMore(section.id) : false}
+          />
+        ))}
     </Stack>
   );
 };

apps/web/src/hooks/use-entity-relationships-from-data.ts

@@ -468,8 +468,15 @@ const extractWorkRelationships = (data: Record<string, unknown>, workId: string,
   }> | undefined;
 
   if (concepts && concepts.length > 0) {
+    // Deduplicate concepts by ID (OpenAlex API may return duplicates)
+    const seenConceptIds = new Set<string>();
     const conceptItems: RelationshipItem[] = concepts
-      .filter(concept => concept.id && concept.display_name)
+      .filter(concept => {
+        if (!concept.id || !concept.display_name) return false;
+        if (seenConceptIds.has(concept.id)) return false;
+        seenConceptIds.add(concept.id);
+        return true;
+      })
       .map(concept => {
         const conceptId = safeStringId(concept.id);
         const conceptName = safeStringId(concept.display_name);

apps/web/src/hooks/use-user-interactions.ts

@@ -243,6 +243,16 @@ export const useUserInteractions = (options: UseUserInteractionsOptions = {}): U
     }
   }, [entityId, entityType, searchQuery, url]);
 
+  // Track which entityId a displayName was loaded for to prevent mismatches
+  const displayNameEntityRef = useRef<string | undefined>(undefined);
+
+  // Update displayName entity reference when displayName changes
+  useEffect(() => {
+    if (displayName && entityId) {
+      displayNameEntityRef.current = entityId;
+    }
+  }, [displayName, entityId]);
+
   // Auto-track page visits when enabled
   useEffect(() => {
     if (autoTrackVisits && entityId && entityType) {
@@ -259,12 +269,16 @@ export const useUserInteractions = (options: UseUserInteractionsOptions = {}): U
 
           const currentUrl = location.pathname + serializeSearch(location.search);
 
+          // Only pass displayName if it matches the current entityId
+          // This prevents race conditions where a stale displayName is stored
+          const safeDisplayName = displayNameEntityRef.current === entityId ? displayName : undefined;
+
           await catalogueService.addToHistory({
             entityType: entityType as EntityType,
             entityId: entityId,
             url: currentUrl,
-            // Pass display name for proper history titles
-            title: displayName,
+            // Pass display name only if it's verified to match this entity
+            title: safeDisplayName,
           });
 
           // Record for debounce

apps/web/src/utils/format-number.ts

@@ -16,6 +16,16 @@ const MAX_REASONABLE_YEAR = 2100;
  */
 const YEAR_FIELD_PATTERNS = ["year", "publication_year"] as const;
 
+/**
+ * Field names that contain decimal scores/shares requiring precision
+ */
+const DECIMAL_PRECISION_FIELD_PATTERNS = ["score", "share", "percentile", "fwci"] as const;
+
+/**
+ * Maximum decimal places to show for score/share fields
+ */
+const DECIMAL_PRECISION_DIGITS = 4;
+
 /**
  * Check if a field name indicates a year value
  * @param fieldName - The field name to check
@@ -25,6 +35,15 @@ const isYearField = (fieldName: string): boolean => {
 	return YEAR_FIELD_PATTERNS.some((pattern) => lowerName.includes(pattern));
 };
 
+/**
+ * Check if a field name indicates a score/share value requiring decimal precision
+ * @param fieldName - The field name to check
+ */
+const isDecimalPrecisionField = (fieldName: string): boolean => {
+	const lowerName = fieldName.toLowerCase();
+	return DECIMAL_PRECISION_FIELD_PATTERNS.some((pattern) => lowerName.includes(pattern));
+};
+
 /**
  * Check if a number is in a reasonable year range
  * @param value - The numeric value to check
@@ -62,6 +81,14 @@ export const formatNumber = (value: number, fieldName?: string): string => {
 		return value.toString();
 	}
 
+	// For score/share/percentile fields, preserve decimal precision
+	if (fieldName && isDecimalPrecisionField(fieldName) && !Number.isInteger(value)) {
+		return value.toLocaleString(undefined, {
+			minimumFractionDigits: 0,
+			maximumFractionDigits: DECIMAL_PRECISION_DIGITS,
+		});
+	}
+
 	// Default: use locale formatting with thousands separator
 	return value.toLocaleString();
 };