Deploying to gh-pages from @ a762814 🚀

.cache/storybook/default/dev-server/storybook-0c9aba2732f8798ca2ae104c09855acc

@@ -1 +1 @@
-{"key":"lastEvents","content":{"boot":{"body":{"eventType":"boot","eventId":"0RgaiC5ouM-clK0F9d10T","sessionId":"0vUyMEysZxERgYO5CdMDn","payload":{"eventType":"build"},"context":{"inCI":true,"platform":"Linux","nodeVersion":"20.18.1","cliVersion":"8.4.4"}},"timestamp":1733737035538}}}
+{"key":"lastEvents","content":{"boot":{"body":{"eventType":"boot","eventId":"tp7HoZosikSCZ9NEXsUQ0","sessionId":"eGn9SODs-yeyvaVapfYD-","payload":{"eventType":"build"},"context":{"inCI":true,"platform":"Linux","nodeVersion":"20.18.1","cliVersion":"8.4.4"}},"timestamp":1733764064988}}}

.cache/storybook/default/dev-server/storybook-21d6f40cfb511982e4424e0e250a9557

@@ -1 +1 @@
-{"key":"session","content":{"id":"0vUyMEysZxERgYO5CdMDn","lastUsed":1733737035524}}
+{"key":"session","content":{"id":"eGn9SODs-yeyvaVapfYD-","lastUsed":1733764064974}}

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',

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([]);
   }

design/organisms/mobile-header/mobile-header.component.ts

@@ -7,7 +7,7 @@ import {
 } from '@angular/core';
 import { RouterLink } from '@angular/router';
 import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
-import { fromEvent, map, merge, startWith, tap } from 'rxjs';
+import { fromEvent, map, merge, startWith } from 'rxjs';
 import { environment } from 'src/environments/environment';
 import { IconComponent } from '../../atoms/icon/icon.component';
 
@@ -31,8 +31,5 @@ export class MobileHeaderComponent {
   online$ = merge(
     fromEvent(window, 'online').pipe(map(() => true)),
     fromEvent(window, 'offline').pipe(map(() => false)),
-  ).pipe(
-    startWith(window.navigator.onLine),
-    tap((val) => console.log('online:', val)),
-  );
+  ).pipe(startWith(window.navigator.onLine));
 }

iframe.html

@@ -504,7 +504,7 @@
             window['TAGS_OPTIONS'] = {"dev-only":{"excludeFromDocsStories":true},"docs-only":{"excludeFromSidebar":true},"test-only":{"excludeFromSidebar":true,"excludeFromDocsStories":true}};</script><script type="module">import './sb-preview/runtime.js';
 
 
-      import './runtime~main.b9697cbe.iframe.bundle.js';
+      import './runtime~main.c37cde65.iframe.bundle.js';
 
       import './main.83ad97ca.iframe.bundle.js';
 

project.json

@@ -1 +1 @@
-{"generatedAt":1733737035983,"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":true,"hasStorybookEslint":false,"refCount":0,"testPackages":{"@types/jasmine":"4.3.6","jasmine-core":"4.5.0","karma":"6.4.4","karma-chrome-launcher":"3.1.1","karma-coverage":"2.2.1","karma-jasmine":"5.1.0","karma-jasmine-html-reporter":"2.0.0"},"packageManager":{"type":"npm","version":"10.8.2"},"preview":{"usesGlobals":false},"framework":{"name":"@storybook/angular","options":{}},"builder":"@storybook/builder-webpack5","renderer":"@storybook/angular","portableStoriesFileCount":0,"storybookVersion":"8.4.4","storybookVersionSpecifier":"^8.3.5","language":"typescript","storybookPackages":{"@storybook/addon-links":{"version":"8.4.4"},"@storybook/angular":{"version":"8.4.4"},"@storybook/blocks":{"version":"8.4.4"},"@storybook/test":{"version":"8.4.4"},"storybook":{"version":"8.4.4"}},"addons":{"@storybook/addon-essentials":{"version":"8.4.4"},"@storybook/addon-interactions":{"version":"8.4.4"},"@storybook/addon-a11y":{"version":"8.4.4"},"storybook-preset-inline-svg":{"version":"1.0.1"},"@chromatic-com/storybook":{"version":"1.9.0"}}}
+{"generatedAt":1733764065398,"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":true,"hasStorybookEslint":false,"refCount":0,"testPackages":{"@types/jasmine":"4.3.6","jasmine-core":"4.5.0","karma":"6.4.4","karma-chrome-launcher":"3.1.1","karma-coverage":"2.2.1","karma-jasmine":"5.1.0","karma-jasmine-html-reporter":"2.0.0"},"packageManager":{"type":"npm","version":"10.8.2"},"preview":{"usesGlobals":false},"framework":{"name":"@storybook/angular","options":{}},"builder":"@storybook/builder-webpack5","renderer":"@storybook/angular","portableStoriesFileCount":0,"storybookVersion":"8.4.4","storybookVersionSpecifier":"^8.3.5","language":"typescript","storybookPackages":{"@storybook/addon-links":{"version":"8.4.4"},"@storybook/angular":{"version":"8.4.4"},"@storybook/blocks":{"version":"8.4.4"},"@storybook/test":{"version":"8.4.4"},"storybook":{"version":"8.4.4"}},"addons":{"@storybook/addon-essentials":{"version":"8.4.4"},"@storybook/addon-interactions":{"version":"8.4.4"},"@storybook/addon-a11y":{"version":"8.4.4"},"storybook-preset-inline-svg":{"version":"1.0.1"},"@chromatic-com/storybook":{"version":"1.9.0"}}}