feat(elements): animate dot/triangle opening/closing (#3507)

* feat(elements): animate dot/triangle opening/closing

* Code review suggestion

Author: hugo-vrijswijk

packages/elements/src/components/drawer/drawer.component.ts

@@ -38,10 +38,13 @@ export class MutationTestReportDrawer extends LitElement {
 
   #contentHeightController: ResizeController<number>;
 
+  #abortController: AbortController;
+
   constructor() {
     super();
     this.mode = 'closed';
     this.hasDetail = false;
+    this.#abortController = new AbortController();
 
     this.#headerRef = createRef();
     this.#contentHeightController = new ResizeController(this, {
@@ -65,11 +68,11 @@ export class MutationTestReportDrawer extends LitElement {
 
   connectedCallback(): void {
     super.connectedCallback();
-    window.addEventListener('keydown', this.#handleKeyDown);
+    window.addEventListener('keydown', this.#handleKeyDown, { signal: this.#abortController.signal });
   }
 
   disconnectedCallback(): void {
-    window.removeEventListener('keydown', this.#handleKeyDown);
+    this.#abortController.abort();
     super.disconnectedCallback();
   }
 

packages/elements/src/components/file/file.component.ts

@@ -13,7 +13,7 @@ import { prismjs, tailwind } from '../../style/index.js';
 import { RealTimeElement } from '../real-time-element.js';
 import type { StateFilter } from '../state-filter/state-filter.component.js';
 import style from './file.scss?inline';
-import { renderDots, renderLine } from './util.js';
+import { beginElementAnimation, circle, renderDots, renderLine, triangle } from './util.js';
 
 const diffOldClass = 'diff-old';
 const diffNewClass = 'diff-new';
@@ -39,6 +39,8 @@ export class FileComponent extends RealTimeElement {
   @state()
   public declare mutants: MutantModel[];
 
+  #abortController: AbortController;
+
   private codeRef = createRef<HTMLElement>();
 
   public constructor() {
@@ -47,8 +49,25 @@ export class FileComponent extends RealTimeElement {
     this.selectedMutantStates = [];
     this.lines = [];
     this.mutants = [];
+    this.#abortController = new AbortController();
+  }
+
+  connectedCallback(): void {
+    super.connectedCallback();
+    window.addEventListener('keydown', this.#handleKeyDown, { signal: this.#abortController.signal });
   }
 
+  disconnectedCallback(): void {
+    this.#abortController.abort();
+    super.disconnectedCallback();
+  }
+
+  #handleKeyDown = (event: KeyboardEvent) => {
+    if (event.key === 'Escape' && this.selectedMutant) {
+      this.toggleMutant(this.selectedMutant);
+    }
+  };
+
   private readonly filtersChanged = (event: MteCustomEvent<'filters-changed'>) => {
     // Pending is not filterable, but they should still be shown to the user.
     this.selectedMutantStates = (event.detail as MutantStatus[]).concat(['Pending']);
@@ -139,25 +158,25 @@ export class FileComponent extends RealTimeElement {
           (mutant) =>
             svg`<svg mutant-id="${mutant.id}" class="mutant-dot ${this.selectedMutant?.id === mutant.id ? 'selected' : ''} ${mutant.status}" height="10" width="12">
               <title>${title(mutant)}</title>
-              ${
-                this.selectedMutant?.id === mutant.id
-                  ? // Triangle pointing down
-                    svg`<path class="stroke-gray-800" d="M5,10 L0,0 L10,0 Z" />`
-                  : // Circle
-                    svg`<circle cx="5" cy="5" r="5" />`
-              }
-            </svg>`,
+              ${this.selectedMutant?.id === mutant.id ? triangle : circle}
+          </svg>`,
         )
       : nothing;
   }
 
   private toggleMutant(mutant: MutantModel) {
     this.removeCurrentDiff();
 
+    // Animate (de)selection
+    this.#animateMutantToggle(mutant);
+
     if (this.selectedMutant === mutant) {
       this.selectedMutant = undefined;
       this.dispatchEvent(createCustomEvent('mutant-selected', { selected: false, mutant }));
       return;
+    } else if (this.selectedMutant) {
+      // Animate old selected mutant
+      this.#animateMutantToggle(this.selectedMutant);
     }
 
     this.selectedMutant = mutant;
@@ -274,6 +293,10 @@ export class FileComponent extends RealTimeElement {
     const lineEnd = '</td></tr>';
     return lines.map((line) => `${lineStart}${line}${lineEnd}`).join('');
   }
+
+  #animateMutantToggle(mutant: MutantModel) {
+    beginElementAnimation(this.codeRef.value, 'mutant-id', mutant.id);
+  }
 }
 
 function title(mutant: MutantModel): string {

packages/elements/src/components/file/file.scss

@@ -57,7 +57,7 @@ $mutant-squiggly: 'Survived', 'NoCoverage';
 }
 
 .mutant-dot {
-  @apply m-0.5 cursor-pointer;
+  @apply mx-0.5 cursor-pointer;
 }
 
 .diff-old {

packages/elements/src/components/file/util.ts

@@ -1,5 +1,5 @@
 import type { TemplateResult } from 'lit';
-import { html, nothing } from 'lit';
+import { html, nothing, svg } from 'lit';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 
 export function renderDots(dots: typeof nothing | TemplateResult[], finalDots: typeof nothing | TemplateResult[]) {
@@ -15,3 +15,26 @@ export function renderLine(line: string, dots: TemplateResult | typeof nothing)
     ><td class="line-number"></td><td class="line-marker"></td><td class="code flex"><span>${unsafeHTML(line)}</span>${dots}</td></tr
   >`;
 }
+
+// To edit, I recommend opening the SVG in a tool like Inkscape
+const circleSvgPath = 'M 0,5 C 0,-1.66 10,-1.66 10,5 10,7.76 7.76,10 5,10 2.24,10 0,7.76 0,5 Z';
+// Triangle with curve paths of 0, so it has the same number of path elements as the circle, which is needed for animation
+const triangleSvgPath = 'M 0,0 C 0,0 10,0 10,0 10,0 5,10 5,10 5,10 0,0 0,0 Z';
+// Fancy cubic bezier curve for the animation. Same as `transition-*` in tailwind
+const animationCurve = '0.4 0 0.2 1';
+
+const pathF = (from: string, to: string, strokeOpacity: number) =>
+  svg`<path stroke-opacity="${strokeOpacity}" class="transition-stroke-opacity stroke-gray-800" d="${to}">
+    <animate values="${from};${to}" attributeName="d" dur="0.2s" begin="indefinite" calcMode="spline" keySplines="${animationCurve}" />
+  </path>`;
+
+export const triangle = pathF(circleSvgPath, triangleSvgPath, 1);
+export const circle = pathF(triangleSvgPath, circleSvgPath, 0);
+
+/**
+ * Animate a svg element that has a path.animate child
+ */
+export function beginElementAnimation(root: ParentNode | undefined, prop: string, value: string) {
+  const el = root?.querySelector<SVGAnimateElement>(`[${prop}="${encodeURIComponent(value)}"] path animate`);
+  el?.beginElement();
+}

packages/elements/src/components/test-file/test-file.component.ts

@@ -14,7 +14,7 @@ import { createCustomEvent } from '../../lib/custom-events.js';
 import { getContextClassForTestStatus, getEmojiForTestStatus, scrollToCodeFragmentIfNeeded } from '../../lib/html-helpers.js';
 import { prismjs, tailwind } from '../../style/index.js';
 import '../../style/prism-plugins';
-import { renderDots, renderLine } from '../file/util.js';
+import { beginElementAnimation, circle, renderDots, renderLine, triangle } from '../file/util.js';
 import { RealTimeElement } from '../real-time-element.js';
 import type { StateFilter } from '../state-filter/state-filter.component.js';
 
@@ -40,14 +40,33 @@ export class TestFileComponent extends RealTimeElement {
   @state()
   private declare tests: TestModel[];
 
+  #abortController: AbortController;
+
   constructor() {
     super();
     this.filters = [];
     this.lines = [];
     this.enabledStates = [];
     this.tests = [];
+    this.#abortController = new AbortController();
+  }
+
+  connectedCallback(): void {
+    super.connectedCallback();
+    window.addEventListener('keydown', this.#handleKeyDown, { signal: this.#abortController.signal });
+  }
+
+  disconnectedCallback(): void {
+    this.#abortController.abort();
+    super.disconnectedCallback();
   }
 
+  #handleKeyDown = (event: KeyboardEvent) => {
+    if (event.key === 'Escape') {
+      this.#deselectTest();
+    }
+  };
+
   private readonly filtersChanged = (event: MteCustomEvent<'filters-changed'>) => {
     this.enabledStates = event.detail as TestStatus[];
     if (this.selectedTest && !this.enabledStates.includes(this.selectedTest.status)) {
@@ -56,10 +75,14 @@ export class TestFileComponent extends RealTimeElement {
   };
 
   private toggleTest(test: TestModel) {
+    this.#animateTestToggle(test);
     if (this.selectedTest === test) {
       this.selectedTest = undefined;
       this.dispatchEvent(createCustomEvent('test-selected', { selected: false, test }));
     } else {
+      if (this.selectedTest) {
+        this.#animateTestToggle(this.selectedTest);
+      }
       this.selectedTest = test;
       this.dispatchEvent(createCustomEvent('test-selected', { selected: true, test }));
       scrollToCodeFragmentIfNeeded(this.shadowRoot!.querySelector(`[test-id="${test.id}"]`));
@@ -140,9 +163,11 @@ export class TestFileComponent extends RealTimeElement {
         return this.renderTestDots([...testsByLine.entries()].filter(([line]) => line > lastLine).flatMap(([, tests]) => tests));
       };
 
-      return html`<pre id="report-code-block" class="line-numbers flex rounded-md p-1"><code class="flex language-${determineLanguage(
-        this.model.name,
-      )}">
+      return html`<pre
+        id="report-code-block"
+        @click="${this.#deselectTest}"
+        class="line-numbers flex rounded-md p-1"
+      ><code class="flex language-${determineLanguage(this.model.name)}">
       <table>
         ${map(this.lines, (line, lineIndex) => {
         const lineNr = lineIndex + 1;
@@ -155,6 +180,12 @@ export class TestFileComponent extends RealTimeElement {
     return nothing;
   }
 
+  #deselectTest = () => {
+    if (this.selectedTest) {
+      this.toggleTest(this.selectedTest);
+    }
+  };
+
   private renderTestDots(tests: TestModel[] | undefined) {
     return tests?.length
       ? tests.map(
@@ -170,13 +201,7 @@ export class TestFileComponent extends RealTimeElement {
               width="12"
             >
               <title>${title(test)}</title>
-              ${
-                this.selectedTest === test
-                  ? // Triangle pointing down
-                    svg`<path class="stroke-gray-800" d="M5,10 L0,0 L10,0 Z" />`
-                  : // Circle
-                    svg`<circle cx="5" cy="5" r="5" />`
-              }
+              ${this.selectedTest === test ? triangle : circle}
             </svg>`,
         )
       : nothing;
@@ -226,6 +251,10 @@ export class TestFileComponent extends RealTimeElement {
       this.lines = transformHighlightedLines(highlightCode(this.model.source, this.model.name));
     }
   }
+
+  #animateTestToggle(test: TestModel) {
+    beginElementAnimation(this.shadowRoot!, 'test-id', test.id);
+  }
 }
 function title(test: TestModel): string {
   return `${test.name} (${test.status})`;

packages/elements/src/components/test-file/test-file.scss

@@ -13,5 +13,5 @@ $test-themes: (
 }
 
 .test-dot {
-  @apply m-0.5 cursor-pointer;
+  @apply mx-0.5 cursor-pointer;
 }

packages/elements/tailwind.config.ts

@@ -65,6 +65,7 @@ const config: Config = {
         'max-width': 'max-width',
         height: 'height',
         width: 'width',
+        'stroke-opacity': 'stroke-opacity',
       },
     },
   },