From 532f55d132206dd64308da3fa4290cde8c25fac7 Mon Sep 17 00:00:00 2001
From: Andrew Kenneth MacLeay <andrew.macleay@coherehealth.com>
Date: Tue, 16 Jul 2024 13:48:00 -0400
Subject: [PATCH 1/3] feat: Activity links

I found it quite a bit distracting that I could not open activity detail
in a new window - especially as filters on the matrix page do not
persist on navigation.

This changes the detail navigation from an onclick to a regular ol' HTML
link, allowing "open in new window" etc.
---
 package-lock.json                             |  1 +
 package.json                                  |  1 +
 src/app/component/matrix/matrix.component.css |  7 -----
 .../component/matrix/matrix.component.html    | 30 ++++++++++---------
 src/app/component/matrix/matrix.component.ts  |  3 +-
 5 files changed, 20 insertions(+), 22 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index cdf3497f..c993f86c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -61,6 +61,7 @@
         "karma-jasmine-html-reporter": "~1.7.0",
         "prettier": "^2.7.1",
         "prettier-eslint": "^15.0.1",
+        "qs": "^6.11.0",
         "typescript": "^4.6.4"
       }
     },
diff --git a/package.json b/package.json
index a845f892..233c8b4b 100644
--- a/package.json
+++ b/package.json
@@ -65,6 +65,7 @@
     "karma-jasmine-html-reporter": "~1.7.0",
     "prettier": "^2.7.1",
     "prettier-eslint": "^15.0.1",
+    "qs": "^6.11.0",
     "typescript": "^4.6.4"
   },
   "browser": {
diff --git a/src/app/component/matrix/matrix.component.css b/src/app/component/matrix/matrix.component.css
index fec9027e..6a9cb676 100644
--- a/src/app/component/matrix/matrix.component.css
+++ b/src/app/component/matrix/matrix.component.css
@@ -34,13 +34,6 @@
   max-width: 9%;
 }
 
-button {
-  background-color: white;
-  border: none;
-  text-align: left;
-  cursor: pointer;
-}
-
 .tags-activity {
   font-weight: 800;
   font-style: italic;
diff --git a/src/app/component/matrix/matrix.component.html b/src/app/component/matrix/matrix.component.html
index 6d0cb47e..12d3ed30 100644
--- a/src/app/component/matrix/matrix.component.html
+++ b/src/app/component/matrix/matrix.component.html
@@ -63,21 +63,23 @@
         <td mat-cell *matCellDef="let element">
           <ul>
             <li *ngFor="let activity of element[lvl]; index as j">
-              <button
-                style="margin-bottom: 1em"
-                (click)="
-                  navigate(
-                    YamlObject[element.Dimension][element.SubDimension][activity].uuid,
-                    element.Dimension,
-                    element.SubDimension,
-                    i + 1,
-                    activity
-                  )
-                ">
+              <div>
                 <div>
                   <p style="margin: 0">{{ activity }}</p>
                 </div>
-                <span class="tags-activity">
+                <a
+                  href=" {{
+                    navigate(
+                      YamlObject[element.Dimension][element.SubDimension][
+                        activity
+                      ].uuid,
+                      element.Dimension,
+                      element.SubDimension,
+                      i + 1,
+                      activity
+                    )
+                  }}"
+                  class="tags-activity">
                   [
                   <span
                     *ngFor="
@@ -98,8 +100,8 @@
                     </span>
                   </span>
                   ]
-                </span>
-              </button>
+                </a>
+              </div>
             </li>
           </ul>
         </td>
diff --git a/src/app/component/matrix/matrix.component.ts b/src/app/component/matrix/matrix.component.ts
index 4b5513a6..b1fddc2c 100644
--- a/src/app/component/matrix/matrix.component.ts
+++ b/src/app/component/matrix/matrix.component.ts
@@ -6,6 +6,7 @@ import { map, startWith } from 'rxjs/operators';
 import { MatTableDataSource } from '@angular/material/table';
 import { ymlService } from '../../service/yaml-parser/yaml-parser.service';
 import { Router, NavigationExtras } from '@angular/router';
+import { stringify } from "qs";
 
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 
@@ -325,6 +326,6 @@ export class MatrixComponent implements OnInit {
         activityName: activityName,
       },
     };
-    this.router.navigate([this.Routing], navigationExtras);
+    return `${this.Routing}?${stringify(navigationExtras.queryParams)}`;
   }
 }

From a674d8ab192b6fab51fa131c7e5e63913f2cf912 Mon Sep 17 00:00:00 2001
From: Andrew Kenneth MacLeay <andrew.macleay@coherehealth.com>
Date: Wed, 31 Jul 2024 16:05:28 -0400
Subject: [PATCH 2/3] Fix: put links on topic title rather than tags

---
 .../component/matrix/matrix.component.html    | 31 ++++++++++---------
 1 file changed, 16 insertions(+), 15 deletions(-)

diff --git a/src/app/component/matrix/matrix.component.html b/src/app/component/matrix/matrix.component.html
index 12d3ed30..fd9c4cad 100644
--- a/src/app/component/matrix/matrix.component.html
+++ b/src/app/component/matrix/matrix.component.html
@@ -65,21 +65,22 @@
             <li *ngFor="let activity of element[lvl]; index as j">
               <div>
                 <div>
-                  <p style="margin: 0">{{ activity }}</p>
-                </div>
-                <a
-                  href=" {{
-                    navigate(
-                      YamlObject[element.Dimension][element.SubDimension][
+                  <a
+                    href=" {{
+                      navigate(
+                        YamlObject[element.Dimension][element.SubDimension][
+                          activity
+                        ].uuid,
+                        element.Dimension,
+                        element.SubDimension,
+                        i + 1,
                         activity
-                      ].uuid,
-                      element.Dimension,
-                      element.SubDimension,
-                      i + 1,
-                      activity
-                    )
-                  }}"
-                  class="tags-activity">
+                      )
+                    }}"
+                    >{{ activity }}</a
+                  >
+                </div>
+                <span class="tags-activity">
                   [
                   <span
                     *ngFor="
@@ -100,7 +101,7 @@
                     </span>
                   </span>
                   ]
-                </a>
+                </span>
               </div>
             </li>
           </ul>

From 49b20d9bc5ee424adf5dfec521b7b6838acf0a22 Mon Sep 17 00:00:00 2001
From: Andrew Kenneth MacLeay <andrew.macleay@coherehealth.com>
Date: Wed, 31 Jul 2024 16:34:32 -0400
Subject: [PATCH 3/3] minor: improve styling

* Make links cover the entire activity
* Use a different list style for some visual interest
* Remove the default link treatment on text because it is a little
  overwhelming

These are some fairly arbitrary aesthetic choices, happy to change!
---
 src/app/component/matrix/matrix.component.css | 24 +++++++++++++++++++
 .../component/matrix/matrix.component.html    |  5 ++--
 2 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/src/app/component/matrix/matrix.component.css b/src/app/component/matrix/matrix.component.css
index 6a9cb676..34c39e3d 100644
--- a/src/app/component/matrix/matrix.component.css
+++ b/src/app/component/matrix/matrix.component.css
@@ -29,6 +29,30 @@
   font-weight: bold;
 }
 
+.mat-cell ul.activity-list {
+  list-style-type: disclosure-closed;
+}
+
+.mat-cell-activity {
+  margin-bottom: 1em;
+  position: relative;
+}
+.mat-cell-activity a.activity-title {
+  text-decoration: unset;
+  margin: 0;
+}
+.mat-cell-activity a::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+.mat-cell-activity a.activity-title:link {
+  color: inherit;
+}
+
 .table-small-width {
   width: 5%;
   max-width: 9%;
diff --git a/src/app/component/matrix/matrix.component.html b/src/app/component/matrix/matrix.component.html
index fd9c4cad..9a6e5ae6 100644
--- a/src/app/component/matrix/matrix.component.html
+++ b/src/app/component/matrix/matrix.component.html
@@ -61,11 +61,12 @@
       <ng-container matColumnDef="{{ lvl }}">
         <th mat-header-cell *matHeaderCellDef>{{ levels[i] }}</th>
         <td mat-cell *matCellDef="let element">
-          <ul>
-            <li *ngFor="let activity of element[lvl]; index as j">
+          <ul class="activity-list">
+            <li class="mat-cell-activity" *ngFor="let activity of element[lvl]; index as j">
               <div>
                 <div>
                   <a
+                    class="activity-title"
                     href=" {{
                       navigate(
                         YamlObject[element.Dimension][element.SubDimension][