Allow tapping on links to also show label

PhilippMDoerner · Dec 9, 2024 · a762814 · a762814
1 parent 7b26eb3
commit a762814
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 5 deletions.
diff --git a/src/design/organisms/graph/data.ts b/src/design/organisms/graph/data.ts
@@ -5,8 +5,11 @@ export const SELECTORS = {
   nodeSelector: '.node',
   linkClass: 'link',
   linkSelector: 'line.link',
+  activeLinkClass: 'link--active',
+  activeLinkSelector: 'g.link--active',
   linkLabelClass: 'link-label',
   linkLabelSelector: 'text.link-label',
+  linkGroupSelector: 'g.link',
   activeClass: `node--active`,
   activeSelector: `g.node.node--active`,
   graphId: 'graph',

diff --git a/src/design/organisms/graph/graph.service.ts b/src/design/organisms/graph/graph.service.ts
@@ -134,6 +134,8 @@ export class GraphService {
       if (!isClickOnNode) {
         this.resetNodeSelection();
       }
+
+      this.resetActivatedLinkStyles();
     });
   }
 
@@ -403,32 +405,48 @@ export class GraphService {
       .append('line')
       .attr('class', SELECTORS.linkClass)
       .style('stroke-width', () => `${Math.sqrt(5)}px`)
+      .style('cursor', 'pointer')
       .attr('stroke', '#999')
-      .on('mouseover', function (event: MouseEvent) {
-        select(this.parentNode as any)
+      .on('mouseover click', function (event: MouseEvent) {
+        const lineElement = this as Element;
+        const linkParent = lineElement.closest(SELECTORS.linkGroupSelector);
+        select(linkParent)
           .transition()
           .duration(200)
+          .attr('class', function () {
+            const linkLabelElement = this as Element;
+            const oldClasses = linkLabelElement
+              .getAttribute('class')
+              ?.split(' ');
+            const newClassSet = new Set(oldClasses).add(
+              SELECTORS.activeLinkClass,
+            );
+            return [...newClassSet].join(' ');
+          });
+
+        select(linkParent)
           .select(SELECTORS.linkLabelSelector)
           .style('opacity', '1')
           .attr('transform', () => {
             const [centerX, centerY] = pointer(event);
             return `translate(${centerX}, ${centerY + 6}), scale(0.2)`;
           });
 
-        select(this)
+        select(lineElement)
           .transition()
           .duration(200)
           .style('stroke', 'var(--bs-primary)')
           .style('stroke-width', () => '6px');
       })
       .on('mouseout', function () {
-        select(this.parentNode as any)
+        const lineElement = this as Element;
+        select(lineElement.parentNode as Element)
           .transition()
           .duration(200)
           .select(SELECTORS.linkLabelSelector)
           .style('opacity', '0');
 
-        select(this)
+        select(lineElement)
           .transition()
           .duration(200)
           .style('stroke', '#999')
@@ -546,6 +564,29 @@ export class GraphService {
     return `g[guid="${node.guid}"]`;
   }
 
+  private resetActivatedLinkStyles() {
+    const linkGroupElement = select(SELECTORS.activeLinkSelector);
+    linkGroupElement.attr('class', function () {
+      const element = this as Element;
+      const newClasses = element
+        .getAttribute('class')
+        ?.replaceAll(SELECTORS.activeLinkClass, '');
+      return newClasses ?? SELECTORS.linkClass;
+    });
+
+    const linkLabelElement = linkGroupElement.select(
+      SELECTORS.linkLabelSelector,
+    );
+    linkLabelElement.transition().duration(200).style('opacity', 0);
+
+    const linkLineElement = linkGroupElement.select(SELECTORS.linkSelector);
+    linkLineElement
+      .transition()
+      .duration(200)
+      .style('stroke', '#999')
+      .style('stroke-width', () => `${Math.sqrt(5)}px`);
+  }
+
   private resetNodeSelection() {
     this.nodeSelectionChanged$.next([]);
   }