feat(schema): clicking the [count] bracket in the tree opens the Entries tab

The on-page instructions already promised that "the number of instances of
each class is shown in square brackets and links to a listing of all
instances of that class," but the implementation routed both the class
name and the count to the same handler -- always landing on Properties.

Split the tree-node row into two adjacent buttons. The class name still
calls onTreeNodeClick (navigates and defaults to Properties). The count
now calls a new onTreeNodeCountClick which navigates with ?tab=entries
and stops propagation so the parent name-button doesn't also fire.
selectClass reads ?tab=entries from the route's queryParamMap so a
direct URL like /content/schema/Reactome?tab=entries also lands straight
on Entries.

Author: adamjohnwright

projects/website-angular/src/app/content/schema/schema.component.html

@@ -55,8 +55,12 @@ <h3>Data Model</h3>
                 }
                 <button class="node-label" (click)="onTreeNodeClick(node.className)">
                   <span class="node-name">{{ node.className }}</span>
-                  <span class="node-count">[{{ node.count }}]</span>
                 </button>
+                <button
+                  class="node-count"
+                  (click)="onTreeNodeCountClick(node.className, $event)"
+                  title="Show entries"
+                >[{{ node.count }}]</button>
               </div>
             }
           </div>

projects/website-angular/src/app/content/schema/schema.component.scss

@@ -192,6 +192,16 @@ $sidebar-width: 320px;
   color: #999;
   font-size: 0.75rem;
   flex-shrink: 0;
+  background: none;
+  border: none;
+  padding: 2px 4px;
+  cursor: pointer;
+  font-family: inherit;
+
+  &:hover {
+    color: var(--primary);
+    text-decoration: underline;
+  }
 }
 
 // --- Main content ---

projects/website-angular/src/app/content/schema/schema.component.ts

@@ -163,6 +163,15 @@ export class SchemaComponent implements OnInit, OnDestroy {
     this.sidebarOpen = false;
   }
 
+  onTreeNodeCountClick(className: string, event: Event) {
+    // Stop the parent .node-label button from also firing onTreeNodeClick.
+    event.stopPropagation();
+    this.router.navigate(['/content/schema', className], {
+      queryParams: { tab: 'entries' },
+    });
+    this.sidebarOpen = false;
+  }
+
   onTreeSearch(event: Event) {
     const value = (event.target as HTMLInputElement).value;
     this.treeSearchQuery = value.toLowerCase().trim();
@@ -202,12 +211,20 @@ export class SchemaComponent implements OnInit, OnDestroy {
 
   selectClass(className: string) {
     this.selectedClass = className;
-    this.activeTab = 'properties';
     this.entries = [];
     this.entriesPage = 1;
     this.selectedInstanceId = null;
     this.loadAttributes(className);
 
+    // Respect ?tab=entries in the URL (set by the count-bracket click in
+    // the tree sidebar, or pasted directly) so the page lands straight
+    // on the Entries tab. Otherwise default to Properties.
+    if (this.route.snapshot.queryParamMap.get('tab') === 'entries') {
+      this.switchToEntries();
+    } else {
+      this.activeTab = 'properties';
+    }
+
     // Expand tree path to this node
     this.expandPathTo(className);
   }