From a202c61435aca577129dcc89bd0c2e8d7b31423f Mon Sep 17 00:00:00 2001
From: kempersc <sckemper@mailfence.com>
Date: Wed, 18 Feb 2026 12:43:14 +0100
Subject: [PATCH] Fix LinkML class mapping display and linking

---
 .../schemas/20251121/linkml/manifest.json     |  2 +-
 .../components/linkml/SchemaElementPopup.css  | 10 +++
 .../components/linkml/SchemaElementPopup.tsx  | 14 +++++
 frontend/src/lib/linkml/schema-loader.ts      |  4 ++
 frontend/src/pages/LinkMLViewerPage.tsx       | 61 ++++++++++++++++++-
 5 files changed, 88 insertions(+), 3 deletions(-)

diff --git a/frontend/public/schemas/20251121/linkml/manifest.json b/frontend/public/schemas/20251121/linkml/manifest.json
index 2a2e2594a7..349880b9c1 100644
--- a/frontend/public/schemas/20251121/linkml/manifest.json
+++ b/frontend/public/schemas/20251121/linkml/manifest.json
@@ -1,5 +1,5 @@
 {
-  "generated": "2026-02-18T10:29:31.898Z",
+  "generated": "2026-02-18T11:39:46.457Z",
   "schemaRoot": "/schemas/20251121/linkml",
   "totalFiles": 2183,
   "categoryCounts": {
diff --git a/frontend/src/components/linkml/SchemaElementPopup.css b/frontend/src/components/linkml/SchemaElementPopup.css
index 6e409cc8ba..005c460ef4 100644
--- a/frontend/src/components/linkml/SchemaElementPopup.css
+++ b/frontend/src/components/linkml/SchemaElementPopup.css
@@ -247,6 +247,16 @@
   color: #92400e;
 }
 
+.schema-popup__mapping-badge--narrow {
+  background: #cffafe;
+  color: #155e75;
+}
+
+.schema-popup__mapping-badge--broad {
+  background: #f1f5f9;
+  color: #0f172a;
+}
+
 /* Actions */
 .schema-popup__actions {
   margin-top: 16px;
diff --git a/frontend/src/components/linkml/SchemaElementPopup.tsx b/frontend/src/components/linkml/SchemaElementPopup.tsx
index 58fc7c7d76..c16e4c7410 100644
--- a/frontend/src/components/linkml/SchemaElementPopup.tsx
+++ b/frontend/src/components/linkml/SchemaElementPopup.tsx
@@ -71,6 +71,8 @@ interface ElementInfo {
   mappings?: {
     exact?: string[];
     close?: string[];
+    narrow?: string[];
+    broad?: string[];
     related?: string[];
   };
 }
@@ -691,6 +693,8 @@ export const SchemaElementPopup: React.FC<SchemaElementPopupProps> = ({
               {elementInfo.mappings && (
                 (elementInfo.mappings.exact?.length || 
                  elementInfo.mappings.close?.length || 
+                 elementInfo.mappings.narrow?.length ||
+                 elementInfo.mappings.broad?.length ||
                  elementInfo.mappings.related?.length) ? (
                   <div className="schema-popup__section">
                     <span className="schema-popup__section-label">Mappings</span>
@@ -705,6 +709,16 @@ export const SchemaElementPopup: React.FC<SchemaElementPopupProps> = ({
                           {elementInfo.mappings.close.length} close
                         </span>
                       ) : null}
+                      {elementInfo.mappings.narrow?.length ? (
+                        <span className="schema-popup__mapping-badge schema-popup__mapping-badge--narrow">
+                          {elementInfo.mappings.narrow.length} narrow
+                        </span>
+                      ) : null}
+                      {elementInfo.mappings.broad?.length ? (
+                        <span className="schema-popup__mapping-badge schema-popup__mapping-badge--broad">
+                          {elementInfo.mappings.broad.length} broad
+                        </span>
+                      ) : null}
                       {elementInfo.mappings.related?.length ? (
                         <span className="schema-popup__mapping-badge schema-popup__mapping-badge--related">
                           {elementInfo.mappings.related.length} related
diff --git a/frontend/src/lib/linkml/schema-loader.ts b/frontend/src/lib/linkml/schema-loader.ts
index b171efaee5..6e21da8e8d 100644
--- a/frontend/src/lib/linkml/schema-loader.ts
+++ b/frontend/src/lib/linkml/schema-loader.ts
@@ -51,8 +51,12 @@ export interface LinkMLClass {
   abstract?: boolean;
   slots?: string[];
   slot_usage?: Record<string, Partial<LinkMLSlot>>;
+  // SKOS semantic mappings for ontology alignment
   exact_mappings?: string[];
   close_mappings?: string[];
+  narrow_mappings?: string[];
+  broad_mappings?: string[];
+  related_mappings?: string[];
   comments?: string[];
   // Aliases and multilingual metadata
   aliases?: string[];
diff --git a/frontend/src/pages/LinkMLViewerPage.tsx b/frontend/src/pages/LinkMLViewerPage.tsx
index ce5b37b3c3..5bfd2c0766 100644
--- a/frontend/src/pages/LinkMLViewerPage.tsx
+++ b/frontend/src/pages/LinkMLViewerPage.tsx
@@ -2671,7 +2671,7 @@ const LinkMLViewerPage: React.FC = () => {
             {cls.exact_mappings.map(mapping => (
               <button 
                 key={mapping} 
-                className="linkml-viewer__tag linkml-viewer__tag--mapping linkml-viewer__tag--clickable"
+                className="linkml-viewer__tag linkml-viewer__tag--mapping linkml-viewer__tag--exact linkml-viewer__tag--clickable"
                 onClick={() => setOntologyPopupCurie(mapping)}
                 title={`View ontology term: ${mapping}`}
               >
@@ -2688,7 +2688,58 @@ const LinkMLViewerPage: React.FC = () => {
               {cls.close_mappings.map(mapping => (
                 <button 
                   key={mapping} 
-                  className="linkml-viewer__tag linkml-viewer__tag--close linkml-viewer__tag--clickable"
+                  className="linkml-viewer__tag linkml-viewer__tag--mapping linkml-viewer__tag--close linkml-viewer__tag--clickable"
+                  onClick={() => setOntologyPopupCurie(mapping)}
+                  title={`View ontology term: ${mapping}`}
+                >
+                  {mapping}
+                </button>
+              ))}
+            </div>
+          </div>
+        )}
+        {cls.narrow_mappings && cls.narrow_mappings.length > 0 && (
+          <div className="linkml-viewer__mappings">
+            <span className="linkml-viewer__label">{t('narrowMappings')}</span>
+            <div className="linkml-viewer__tag-list">
+              {cls.narrow_mappings.map(mapping => (
+                <button
+                  key={mapping}
+                  className="linkml-viewer__tag linkml-viewer__tag--mapping linkml-viewer__tag--narrow linkml-viewer__tag--clickable"
+                  onClick={() => setOntologyPopupCurie(mapping)}
+                  title={`View ontology term: ${mapping}`}
+                >
+                  {mapping}
+                </button>
+              ))}
+            </div>
+          </div>
+        )}
+        {cls.broad_mappings && cls.broad_mappings.length > 0 && (
+          <div className="linkml-viewer__mappings">
+            <span className="linkml-viewer__label">{t('broadMappings')}</span>
+            <div className="linkml-viewer__tag-list">
+              {cls.broad_mappings.map(mapping => (
+                <button
+                  key={mapping}
+                  className="linkml-viewer__tag linkml-viewer__tag--mapping linkml-viewer__tag--broad linkml-viewer__tag--clickable"
+                  onClick={() => setOntologyPopupCurie(mapping)}
+                  title={`View ontology term: ${mapping}`}
+                >
+                  {mapping}
+                </button>
+              ))}
+            </div>
+          </div>
+        )}
+        {cls.related_mappings && cls.related_mappings.length > 0 && (
+          <div className="linkml-viewer__mappings">
+            <span className="linkml-viewer__label">{t('relatedMappings')}</span>
+            <div className="linkml-viewer__tag-list">
+              {cls.related_mappings.map(mapping => (
+                <button
+                  key={mapping}
+                  className="linkml-viewer__tag linkml-viewer__tag--mapping linkml-viewer__tag--related linkml-viewer__tag--clickable"
                   onClick={() => setOntologyPopupCurie(mapping)}
                   title={`View ontology term: ${mapping}`}
                 >
@@ -4005,6 +4056,9 @@ const LinkMLViewerPage: React.FC = () => {
       if (cls.class_uri?.toLowerCase().includes(searchLower)) return true;
       if (cls.exact_mappings?.some(m => m.toLowerCase().includes(searchLower))) return true;
       if (cls.close_mappings?.some(m => m.toLowerCase().includes(searchLower))) return true;
+      if (cls.narrow_mappings?.some(m => m.toLowerCase().includes(searchLower))) return true;
+      if (cls.broad_mappings?.some(m => m.toLowerCase().includes(searchLower))) return true;
+      if (cls.related_mappings?.some(m => m.toLowerCase().includes(searchLower))) return true;
       if (cls.slots?.some(s => s.toLowerCase().includes(searchLower))) return true;
       return false;
     };
@@ -4042,6 +4096,9 @@ const LinkMLViewerPage: React.FC = () => {
       if (slot.slot_uri?.toLowerCase().includes(searchLower)) return true;
       if (slot.exact_mappings?.some(m => m.toLowerCase().includes(searchLower))) return true;
       if (slot.close_mappings?.some(m => m.toLowerCase().includes(searchLower))) return true;
+      if (slot.narrow_mappings?.some(m => m.toLowerCase().includes(searchLower))) return true;
+      if (slot.broad_mappings?.some(m => m.toLowerCase().includes(searchLower))) return true;
+      if (slot.related_mappings?.some(m => m.toLowerCase().includes(searchLower))) return true;
       return false;
     };