feat: label the entity type with a chip + give the Overview its own divider header

Two related polish items on the description tab (which is what
/content/detail renders, and also the PathwayBrowser's right-hand
detail panel).

1. A small "PATHWAY" / "REACTION" / "PROTEIN" / etc. chip beside the
   entity name in the header. Maps the common Reactome schema classes
   to friendlier labels (EntityWithAccessionedSequence -> Protein,
   SimpleEntity -> Small Molecule, ReactionLikeEvent variants ->
   Reaction, etc.); falls back to a CamelCase split for anything not
   in the map. Considered putting it in the breadcrumb but a
   non-clickable crumb is unconventional, so we went with the chip.

2. Drop the `i > 0` skip on the section divider loop so the Overview
   section gets its own "Overview" label like every other section
   (Composition, Cross-References, Authorship, ...). Moves the
   OVERVIEW anchor off the page header and onto the divider so
   sidebar TOC clicks land on the section header rather than the
   page title.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: adamjohnwright

projects/pathway-browser/src/app/details/tabs/description-tab/description-tab.component.html

@@ -14,7 +14,7 @@
 <div id="details" #details>
   <div class="content">
     <!-- Header -->
-    <div class="header" [id]=DataKeys.OVERVIEW>
+    <div class="header">
       <div class="label">
         <mat-icon
           class="custom-icon"
@@ -30,6 +30,9 @@
             </mat-slide-toggle>
           }
           </span>
+        @if (typeLabel()) {
+          <span class="type-chip">{{ typeLabel() }}</span>
+        }
       </div>
       <div class="details-button">
         <a mat-button [routerLink]="`${CONTENT_DETAIL}/${obj().stId}`" target="_blank">
@@ -40,17 +43,14 @@
     </div>
     @for (element of elements; track element.key; let i = $index) {
       @if (element.isPresent ? element.isPresent() : obj()[element.key]) {
-        <!-- Avoid overview label -->
-        @if (i > 0) {
-          <div class="divider-container" [id]="element.key">
-            <div class="divider-name-container">
-              <ng-container *ngTemplateOutlet="dividerTemplate; context: { $implicit: element.label }"></ng-container>
-            </div>
-            <div class="divider-line-container">
-              <mat-divider class="divider"></mat-divider>
-            </div>
+        <div class="divider-container" [id]="element.key">
+          <div class="divider-name-container">
+            <ng-container *ngTemplateOutlet="dividerTemplate; context: { $implicit: element.label }"></ng-container>
           </div>
-        }
+          <div class="divider-line-container">
+            <mat-divider class="divider"></mat-divider>
+          </div>
+        </div>
         @if (!element.manual) {
           <cr-controller-tree [type]="element.key" [data]="obj()[element.key]"
                               [depthControl]="element.hasDepthControl ?? false" [scope]="element.scope || 'entity'"

projects/pathway-browser/src/app/details/tabs/description-tab/description-tab.component.scss

@@ -79,6 +79,18 @@
       padding-right: 2px;
     }
 
+    & .type-chip {
+      flex-shrink: 0;
+      font-size: 12px;
+      font-weight: 600;
+      letter-spacing: 0.3px;
+      text-transform: uppercase;
+      padding: 2px 8px;
+      border-radius: 10px;
+      background: var(--secondary-container, rgba(0, 110, 144, 0.12));
+      color: var(--on-secondary-container, var(--primary));
+      line-height: 1.4;
+    }
   }
 
   .details-button {

projects/pathway-browser/src/app/details/tabs/description-tab/description-tab.component.ts

@@ -194,6 +194,35 @@ export class DescriptionTabComponent implements OnDestroy {
   });
 
   readonly symbol = computed(() => this.getSymbol(this.obj()));
+
+  // Human-friendly schema-class label rendered as a chip beside the
+  // entity name in the description-tab header (e.g. "Pathway",
+  // "Reaction", "Protein"). Maps the few Reactome schema classes whose
+  // raw name is jargon; falls back to splitting CamelCase otherwise.
+  private static readonly TYPE_LABELS: Record<string, string> = {
+    TopLevelPathway: 'Pathway',
+    Pathway: 'Pathway',
+    Reaction: 'Reaction',
+    BlackBoxEvent: 'Reaction',
+    Polymerisation: 'Reaction',
+    Depolymerisation: 'Reaction',
+    FailedReaction: 'Reaction',
+    ReactionLikeEvent: 'Reaction',
+    EntityWithAccessionedSequence: 'Protein',
+    SimpleEntity: 'Small Molecule',
+    ChemicalDrug: 'Drug',
+    ProteinDrug: 'Drug',
+    RNADrug: 'Drug',
+    OtherEntity: 'Other Entity',
+  };
+  readonly typeLabel = computed(() => {
+    const sc = (this.obj() as DatabaseObject & { schemaClass?: string }).schemaClass;
+    if (!sc) return '';
+    if (DescriptionTabComponent.TYPE_LABELS[sc]) {
+      return DescriptionTabComponent.TYPE_LABELS[sc];
+    }
+    return sc.replace(/([a-z])([A-Z])/g, '$1 $2');
+  });
   readonly literatureRefs: Signal<LiteratureReference[]> = computed(() =>
     getProperty(this.obj(), DataKeys.LITERATURE_REFERENCE)
   );