coin2html: make the account heading clickable

cmd/coin2html/README.md

@@ -3,7 +3,7 @@ Check out the [examples/yearly](https://mkobetic.github.io/coin/).
 
 Account hierarchy nav on the left, segregated by account type (`Assets`, `Income`, `Expenses`, `Liabilities`, `Equity`).
 Clicking a specific account restricts the detail view on the right to that account's hierarchy.
-Currently selected account is shown as a heading above the details view.
+Currently selected account is shown as a heading above the details view. The individual names in the heading can be clicked to select the account represented by the name (this allows climbing up the account parent chain conveniently).
 
 Details of the selected account are shown on the right with different presentation options (`Register`, `Chart`, ...).
 The details show account transactions restricted to selected time range, controlled by the `From/To` inputs.

cmd/coin2html/js/src/models.ts

@@ -216,6 +216,9 @@ export class Account {
       ),
     }));
   }
+  withAllParents(): Account[] {
+    return this.parent ? this.parent.withAllParents().concat(this) : [this];
+  }
   getRootAccount(): Account {
     return this.parent ? this.parent.getRootAccount() : this;
   }

cmd/coin2html/js/src/views.ts

@@ -565,7 +565,20 @@ function updateView() {
 
 function updateAccount() {
   const account = State.SelectedAccount;
-  d3.select(AccountOutput).text(account.fullName);
+  // d3.select(AccountOutput).text(account.fullName);
+  const spans = d3
+    .select(AccountOutput)
+    .selectAll("span")
+    .data(account.withAllParents())
+    .join("span")
+    .text((d) => (d.parent ? ":" : ""));
+  spans
+    .append("a")
+    .text((acc: Account) => acc.name)
+    .on("click", (e: Event, acc: Account) => {
+      State.SelectedAccount = acc;
+      updateAccount();
+    });
   updateView();
 }