Display images mapped to selected term in ontology tab

Author: PabloG02

src/app/components/ontology-editor/ontology-editor.component.css

@@ -165,7 +165,6 @@
   border: 1px solid var(--color-border);
   border-radius: var(--radius-md);
   background: color-mix(in srgb, var(--color-bg-elevated) 88%, transparent);
-  box-shadow: var(--shadow-sm);
 }
 
 .selected-term-header {
@@ -222,6 +221,64 @@
   color: var(--color-text-secondary);
 }
 
+.term-images-card {
+  padding: var(--space-4);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  background: color-mix(in srgb, var(--color-bg-elevated) 88%, transparent);
+}
+
+.term-images-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-2);
+  margin-bottom: var(--space-3);
+}
+
+.term-images-header h4 {
+  margin: 0;
+  font-size: var(--font-size-md);
+}
+
+.term-images-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+
+.term-image-item {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--space-3);
+  padding: var(--space-2) var(--space-3);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  background: var(--color-bg-elevated);
+}
+
+.term-image-content {
+  min-width: 0;
+}
+
+.term-image-name {
+  margin: 0;
+  font-weight: var(--font-weight-medium);
+}
+
+.term-image-description {
+  margin: var(--space-1) 0 0;
+  font-size: var(--font-size-sm);
+  color: var(--color-text-secondary);
+}
+
+.term-images-empty {
+  margin: 0;
+  font-size: var(--font-size-sm);
+  color: var(--color-text-secondary);
+}
+
 .term-edit {
   display: flex;
   flex-direction: column;

src/app/components/ontology-editor/ontology-editor.component.html

@@ -190,6 +190,43 @@ <h3>
               </div>
             </div>
           </div>
+
+          @if (!isCreating() && selectedTerm()) {
+            <section
+              class="term-images-card"
+              role="region"
+              aria-label="Images mapped to selected term"
+            >
+              <div class="term-images-header">
+                <h4>Mapped images</h4>
+                <span class="badge badge-accent">
+                  {{ selectedTermImages().length }}
+                </span>
+              </div>
+
+              @if (selectedTermImages().length > 0) {
+                <div class="term-images-list" role="list">
+                  @for (image of selectedTermImages(); track image.name) {
+                    <article class="term-image-item" role="listitem">
+                      <div class="term-image-content">
+                        <p class="term-image-name">{{ image.name }}</p>
+                        @if (image.description) {
+                          <p class="term-image-description">{{ image.description }}</p>
+                        }
+                      </div>
+                      @if (image.status) {
+                        <span class="badge">{{ image.status }}</span>
+                      }
+                    </article>
+                  }
+                </div>
+              } @else {
+                <p class="term-images-empty">
+                  No images mapped to this term yet.
+                </p>
+              }
+            </section>
+          }
         } @else {
           <div class="empty-editor">
             <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">

src/app/components/ontology-editor/ontology-editor.component.ts

@@ -10,6 +10,7 @@ import { FormsModule } from '@angular/forms';
 import { DataStateService } from '../../services/data-state.service';
 import { OntologyTreeComponent } from './ontology-tree.component';
 import { TermStanza } from '../../models/ontology';
+import { MetadataItem } from '../../models/metadata.model';
 
 @Component({
   selector: 'app-ontology-editor',
@@ -56,6 +57,24 @@ export class OntologyEditorComponent {
   protected readonly selectedTerm = this.dataState.selectedTerm;
   protected readonly selectedTermId = this.dataState.selectedTermId;
 
+  protected readonly selectedTermImages = computed<MetadataItem[]>(() => {
+    const selectedId = this.selectedTermId();
+    if (!selectedId) return [];
+
+    const metadataByName = new Map(
+      this.dataState.metadata().map((item) => [item.name, item])
+    );
+
+    const uniqueNames = new Set(
+      this.dataState.getMappingsForTerm(selectedId).map((mapping) => mapping.name)
+    );
+
+    return Array.from(uniqueNames)
+      .map((name) => metadataByName.get(name))
+      .filter((item): item is MetadataItem => !!item)
+      .sort((a, b) => a.name.localeCompare(b.name));
+  });
+
   protected readonly createParentHierarchy = computed(() => {
     const ontology = this.dataState.ontology();
     const parentId = this.createParentId();