Show macro key assignments on the macro page.

List where each macro is used with links back to the assigned key, and avoid treating Jump to macro navigation as a config change.

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: mondalaci

packages/uhk-common/src/util/find-macro-key-assignments.test.ts

@@ -0,0 +1,69 @@
+import { describe, it } from 'node:test';
+
+import { Keymap, Layer, LayerName, Module, PlayMacroAction } from '../config-serializer/index.js';
+import { findMacroKeyAssignments } from './find-macro-key-assignments.js';
+
+function createKeymapWithMacroAssignment(
+    abbreviation: string,
+    name: string,
+    layerId: LayerName,
+    moduleId: number,
+    keyId: number,
+    macroId: number
+): Keymap {
+    const keyActions = [];
+    keyActions[keyId] = Object.assign(new PlayMacroAction(), { macroId });
+
+    const keymap = new Keymap();
+    keymap.abbreviation = abbreviation;
+    keymap.name = name;
+    keymap.layers = [
+        Object.assign(new Layer(), {
+            id: layerId,
+            modules: [
+                Object.assign(new Module(), {
+                    id: moduleId,
+                    keyActions,
+                }),
+            ],
+        }),
+    ];
+
+    return keymap;
+}
+
+describe('findMacroKeyAssignments', () => {
+    it('returns assignments for the requested macro', ({ assert }) => {
+        const keymaps = [
+            createKeymapWithMacroAssignment('QWR', 'QWERTY for PC', LayerName.fn, 0, 2, 5),
+            createKeymapWithMacroAssignment('DVO', 'Dvorak', LayerName.base, 1, 0, 5),
+            createKeymapWithMacroAssignment('QWR', 'QWERTY for PC', LayerName.mod, 0, 1, 9),
+        ];
+
+        const assignments = findMacroKeyAssignments(keymaps, 5);
+
+        assert.equal(assignments.length, 2);
+        assert.deepEqual(assignments[0], {
+            keymapAbbreviation: 'QWR',
+            keymapName: 'QWERTY for PC',
+            layerId: LayerName.fn,
+            moduleId: 0,
+            keyId: 2,
+        });
+        assert.deepEqual(assignments[1], {
+            keymapAbbreviation: 'DVO',
+            keymapName: 'Dvorak',
+            layerId: LayerName.base,
+            moduleId: 1,
+            keyId: 0,
+        });
+    });
+
+    it('returns an empty list when the macro is not assigned', ({ assert }) => {
+        const keymaps = [
+            createKeymapWithMacroAssignment('QWR', 'QWERTY for PC', LayerName.fn, 0, 2, 5),
+        ];
+
+        assert.deepEqual(findMacroKeyAssignments(keymaps, 99), []);
+    });
+});

packages/uhk-common/src/util/find-macro-key-assignments.ts

@@ -0,0 +1,37 @@
+import { Keymap, LayerName, PlayMacroAction } from '../config-serializer/index.js';
+
+export interface MacroKeyAssignment {
+    keymapAbbreviation: string;
+    keymapName: string;
+    layerId: LayerName;
+    moduleId: number;
+    keyId: number;
+}
+
+export function findMacroKeyAssignments(keymaps: Keymap[], macroId: number): MacroKeyAssignment[] {
+    const assignments: MacroKeyAssignment[] = [];
+
+    for (const keymap of keymaps) {
+        for (const layer of keymap.layers) {
+            for (const module of layer.modules) {
+                for (let keyId = 0; keyId < module.keyActions.length; keyId++) {
+                    const keyAction = module.keyActions[keyId];
+
+                    if (!(keyAction instanceof PlayMacroAction) || keyAction.macroId !== macroId) {
+                        continue;
+                    }
+
+                    assignments.push({
+                        keymapAbbreviation: keymap.abbreviation,
+                        keymapName: keymap.name,
+                        layerId: layer.id,
+                        moduleId: module.id,
+                        keyId,
+                    });
+                }
+            }
+        }
+    }
+
+    return assignments;
+}

packages/uhk-common/src/util/index.ts

@@ -6,6 +6,7 @@ export * from './convert-array-to-hex-string.js';
 export * from './create-md5-hash.js';
 export * from './date-formatter.js';
 export * from './disable-agent-upgrade-protection.js';
+export * from './find-macro-key-assignments.js';
 export * from './find-uhk-module-by-id.js';
 export * from './get-formatted-timestamp.js';
 export * from './get-md5-hash-from-file-name.js';

packages/uhk-web/src/app/components/back-to/back-to.component.ts

@@ -7,13 +7,14 @@ import { Subscription } from 'rxjs';
     standalone: false,
     template: `
         <div *ngIf="backUrl" class="my-2">
-            Back to <a [routerLink]="[backUrl]" [queryParams]="queryParams">{{backText}}</a>
+            Back to <a [routerLink]="[backUrl]" [queryParams]="queryParams">{{ backText }}</a>{{ backSuffix }}
         </div>
     `,
 })
 export class BackToComponent implements OnDestroy {
     backUrl: string | undefined;
     backText: string;
+    backSuffix = '';
     queryParams = {};
 
     private routeSubscription: Subscription;
@@ -25,6 +26,7 @@ export class BackToComponent implements OnDestroy {
                 const backUrl = new URL(params.backUrl, window.location.origin);
                 this.backUrl = backUrl.pathname;
                 this.backText = params.backText;
+                this.backSuffix = params.backSuffix ?? '';
                 this.queryParams = {};
                 for (const key of backUrl.searchParams.keys()) {
                     this.queryParams[key] = backUrl.searchParams.get(key);

packages/uhk-web/src/app/components/keymap/add/keymap-add.component.ts

@@ -68,7 +68,8 @@ export class KeymapAddComponent implements OnDestroy, OnInit {
     navigateToModuleSettings(moduleId: number): void {
         this.store.dispatch(new NavigateToModuleSettings({
             backUrl: `/add-keymap/${encodeURIComponent(this.keymap.abbreviation)}`,
-            backText: `new "${this.keymap.name}" keymap`,
+            backText: `new ${this.keymap.name}`,
+            backSuffix: ' keymap',
             moduleId
         }));
     }

packages/uhk-web/src/app/components/keymap/edit/keymap-edit.component.ts

@@ -161,7 +161,8 @@ export class KeymapEditComponent implements OnDestroy {
     navigateToModuleSettings(moduleId: number): void {
         this.store.dispatch(new NavigateToModuleSettings({
             backUrl: `/keymap/${encodeURIComponent(this.keymap.abbreviation)}?layer=${this.selectedLayer}`,
-            backText: `"${this.keymap.name}" keymap`,
+            backText: this.keymap.name,
+            backSuffix: ' keymap',
             moduleId,
         }));
     }

packages/uhk-web/src/app/components/macro/edit/macro-edit.component.ts

@@ -59,9 +59,6 @@ export class MacroEditComponent implements OnDestroy {
         left: 100,
         right: 0
     };
-
-    private backUrl: string;
-    private backUrlText: string;
     private subscriptions = new Subscription();
 
     constructor(private store: Store<AppState>,
@@ -90,9 +87,6 @@ export class MacroEditComponent implements OnDestroy {
         this.smartMacroDocUrl$ = store.select(selectSmartMacroDocUrl);
         this.smartMacroPanelVisibility$ = store.select(getSmartMacroPanelVisibility);
         this.subscriptions.add(this.route.queryParams.subscribe(params => {
-            this.backUrl = params.backUrl;
-            this.backUrlText = params.backText;
-
             if (params.actionIndex) {
                 if (params.actionIndex === 'new') {
                     this.selectedMacroActionIdModel = {
@@ -150,8 +144,6 @@ export class MacroEditComponent implements OnDestroy {
         this.router.navigate([], {
             queryParams: {
                 actionIndex: model?.id,
-                backText: this.backUrlText,
-                backUrl: this.backUrl,
                 inlineEdit: model?.inlineEdit
             }
         });
@@ -173,10 +165,7 @@ export class MacroEditComponent implements OnDestroy {
     private hideActiveEditor(): void {
         if (!this.selectedMacroActionIdModel?.inlineEdit) {
             this.router.navigate([], {
-                queryParams: {
-                    backText: this.backUrlText,
-                    backUrl: this.backUrl,
-                },
+                queryParams: {},
             });
         }
     }

packages/uhk-web/src/app/components/macro/header/macro-header.component.html

@@ -18,4 +18,11 @@
              placement="bottom-right"
              (click)="duplicateMacro()"></fa-icon>
 </uhk-header>
-<back-to/>
+<div *ngIf="assignments.length" class="macro__assignments">
+    <span class="macro__assignments-label">Used on:</span>
+    <ng-container *ngFor="let assignment of assignments; let last = last">
+        <a class="macro__assignment-link"
+           [routerLink]="['/keymap', assignment.keymapAbbreviation]"
+           [queryParams]="getKeymapQueryParams(assignment)">{{ assignment.label }}</a><span *ngIf="!last" class="macro__assignment-separator">, </span>
+    </ng-container>
+</div>

packages/uhk-web/src/app/components/macro/header/macro-header.component.scss

@@ -1,5 +1,28 @@
+:host {
+    display: block;
+}
 
 .macro {
+    &__assignments {
+        font-size: 0.875rem;
+        line-height: 1.5;
+        padding-top: 1.25em;
+    }
+
+    &__assignments-label {
+        margin-right: 0.35em;
+        white-space: nowrap;
+    }
+
+    &__assignment-link {
+        text-decoration: underline;
+        white-space: nowrap;
+    }
+
+    &__assignment-separator {
+        white-space: pre;
+    }
+
     &__remove {
         font-size: 0.75em;
         top: 7px;