@aceshooting/lyra-ui 6.2.0 → 7.1.0

package/dist/components/retrieval/graph/graph.class.js

@@ -18,6 +18,7 @@ import { convexHull, hullPathD, hullCentroidX, hullTopY } from './graph-hull.js'
 import { drawGraphScene, drawPickingScene, pickColorToIndex } from './graph-canvas.js';
 import { layeredLayout } from '../../../internal/layered-layout.js';
 import { finiteNumber, finiteRange, finiteInteger } from '../../../internal/numbers.js';
+import { getNumberFormat } from '../../../internal/intl-cache.js';
 import '../../overlays/skeleton/skeleton.class.js';
 const STUB_OFFSET_PX = 14; // matches the length of a typical broken-link stub in comparable UIs
 const EDGE_LABEL_OFFSET_PX = 4; // perpendicular offset from the segment midpoint, in world px
@@ -570,6 +571,7 @@ export class LyraGraph extends LyraElement {
             this.hoverRafId = undefined;
         }
         this.pendingHover = undefined;
+        this.pendingGraphItemFocus = undefined;
         if (this.viewportChangeRafId != null) {
             cancelAnimationFrame(this.viewportChangeRafId);
             this.viewportChangeRafId = undefined;
@@ -1195,9 +1197,26 @@ export class LyraGraph extends LyraElement {
         // `clientX - rect.left`/`clientY - rect.top` are physical viewport offsets, so they must be
         // written to the physical `left`/`top` -- a logical `inset-inline-start` maps to `right` under
         // RTL and would mirror the tooltip across the canvas instead of tracking the cursor.
-        this.canvasTooltipEl.style.left = `${clientX - rect.left}px`;
-        this.canvasTooltipEl.style.top = `${clientY - rect.top}px`;
+        let left = clientX - rect.left;
+        let top = clientY - rect.top;
+        this.canvasTooltipEl.style.left = `${left}px`;
+        this.canvasTooltipEl.style.top = `${top}px`;
         this.canvasTooltipEl.removeAttribute('hidden');
+        const tooltipRect = this.canvasTooltipEl.getBoundingClientRect();
+        const minLeft = Math.max(0, rect.left);
+        const maxRight = Math.min(window.innerWidth, rect.right);
+        const minTop = Math.max(0, rect.top);
+        const maxBottom = Math.min(window.innerHeight, rect.bottom);
+        if (tooltipRect.right > maxRight)
+            left -= tooltipRect.right - maxRight;
+        if (tooltipRect.left < minLeft)
+            left += minLeft - tooltipRect.left;
+        if (tooltipRect.bottom > maxBottom)
+            top -= tooltipRect.bottom - maxBottom;
+        if (tooltipRect.top < minTop)
+            top += minTop - tooltipRect.top;
+        this.canvasTooltipEl.style.left = `${left}px`;
+        this.canvasTooltipEl.style.top = `${top}px`;
     }
     isSelected(kind, id) {
         return kind === 'node' ? this.selectedNodeIds.includes(id) : this.selectedLinkIds.includes(id);
@@ -1258,25 +1277,39 @@ export class LyraGraph extends LyraElement {
         // instead would set a reactive property *after* the update completed,
         // which Lit schedules as a whole extra update pass (a dev-mode warning,
         // and pointless work).
-        if (this.d3 &&
+        const structureChanged = this.d3 &&
             (changed.has('nodes') ||
                 changed.has('links') ||
                 changed.has('hiddenTypes') ||
                 changed.has('layout') ||
-                (this.layout === 'layered' && changed.has('linkDistance')))) {
+                (this.layout === 'layered' && changed.has('linkDistance')));
+        const graphItemsChanged = Boolean(structureChanged || changed.has('simNodes') || changed.has('communities'));
+        const activePart = this.shadowRoot?.activeElement?.getAttribute('part') ?? '';
+        const hadGraphItemFocus = graphItemsChanged && ['node', 'link', 'hull', 'cursor-item'].includes(activePart);
+        const previousIndex = this.normalizedGraphItem();
+        const previousIdentity = graphItemsChanged ? this.graphItemIdentity(previousIndex) : undefined;
+        if (structureChanged) {
             this.rebuildSimulation();
         }
         // rebuildSimulation() above always reassigns simNodes, so checking it here (after that call)
         // also catches a nodes/links/hiddenTypes-driven rebuild, not just a direct communities set.
-        if (changed.has('simNodes') || changed.has('communities')) {
+        if (graphItemsChanged) {
             this.visibleCommunitiesCache = undefined;
+            const retainedIndex = previousIdentity ? this.graphItemIndex(previousIdentity) : -1;
+            const nextIndex = retainedIndex >= 0 ? retainedIndex : this.normalizedGraphItem(previousIndex);
+            this.activeGraphItem = nextIndex >= 0 ? nextIndex : 0;
+            if (hadGraphItemFocus) {
+                this.pendingGraphItemFocus = nextIndex >= 0 ? nextIndex : 'base';
+                if (nextIndex >= 0)
+                    this.graphLiveText = this.graphItemAnnouncement(nextIndex);
+            }
         }
         // Same reasoning as rebuildSimulation() above -- assigning graphLiveText from updated() would
         // schedule a whole extra update pass instead of landing in the render this update is already
         // about to perform.
         if ((changed.has('selectedNodeIds') || changed.has('selectedLinkIds')) && !wasMounting) {
             this.graphLiveText = this.localize('graphSelectionCount', undefined, {
-                count: this.selectedNodeIds.length + this.selectedLinkIds.length,
+                count: getNumberFormat(this.effectiveLocale).format(this.selectedNodeIds.length + this.selectedLinkIds.length),
             });
         }
     }
@@ -1323,6 +1356,16 @@ export class LyraGraph extends LyraElement {
             void this.focusNode(this.focusId);
         }
         this.updateFocusHalo();
+        const pendingFocus = this.pendingGraphItemFocus;
+        if (pendingFocus !== undefined) {
+            this.pendingGraphItemFocus = undefined;
+            if (pendingFocus === 'base') {
+                this.renderRoot.querySelector('[part="canvas"], [part="svg"]')?.focus();
+            }
+            else {
+                this.focusGraphItemElement(pendingFocus);
+            }
+        }
     }
     /**
      * Imperatively wires up d3-zoom (pan/zoom on the `<svg>`) and d3-drag
@@ -1744,8 +1787,8 @@ export class LyraGraph extends LyraElement {
         const hiddenNodeCount = totalNodeCount - visibleNodeCount;
         if (totalNodeCount > 0 && (hiddenNodeCount > 0 || this.lastHiddenNodeCount > 0)) {
             this.graphLiveText = this.localize('graphNodesHidden', undefined, {
-                hidden: hiddenNodeCount,
-                total: totalNodeCount,
+                hidden: getNumberFormat(this.effectiveLocale).format(hiddenNodeCount),
+                total: getNumberFormat(this.effectiveLocale).format(totalNodeCount),
             });
         }
         this.lastHiddenNodeCount = hiddenNodeCount;
@@ -1964,6 +2007,31 @@ export class LyraGraph extends LyraElement {
         const count = this.graphItemCount();
         return count ? Math.min(Math.max(index, 0), count - 1) : -1;
     }
+    graphItemIdentity(index) {
+        if (index < 0)
+            return undefined;
+        if (index < this.simNodes.length) {
+            const node = this.simNodes[index];
+            return node ? { kind: 'node', id: node.id } : undefined;
+        }
+        const linkIndex = index - this.simNodes.length;
+        if (linkIndex < this.simLinks.length) {
+            const link = this.simLinks[linkIndex];
+            return link ? { kind: 'link', id: this.linkKey(link) } : undefined;
+        }
+        const community = this.visibleCommunities()[linkIndex - this.simLinks.length]?.community;
+        return community ? { kind: 'community', id: community.id } : undefined;
+    }
+    graphItemIndex(identity) {
+        if (identity.kind === 'node')
+            return this.simNodes.findIndex((node) => node.id === identity.id);
+        if (identity.kind === 'link') {
+            const index = this.simLinks.findIndex((link) => this.linkKey(link) === identity.id);
+            return index < 0 ? -1 : this.simNodes.length + index;
+        }
+        const index = this.visibleCommunities().findIndex((entry) => entry.community.id === identity.id);
+        return index < 0 ? -1 : this.simNodes.length + this.simLinks.length + index;
+    }
     graphItemText(index) {
         if (index < this.simNodes.length) {
             const node = this.simNodes[index];
@@ -1979,15 +2047,15 @@ export class LyraGraph extends LyraElement {
         return entry
             ? this.localize('graphCommunity', undefined, {
                 label: entry.community.label ?? entry.community.id,
-                count: entry.members.length,
+                count: getNumberFormat(this.effectiveLocale).format(entry.members.length),
             })
             : '';
     }
     graphItemAnnouncement(index) {
         return this.localize('graphItemAnnouncement', undefined, {
             item: this.graphItemText(index),
-            index: index + 1,
-            total: this.graphItemCount(),
+            index: getNumberFormat(this.effectiveLocale).format(index + 1),
+            total: getNumberFormat(this.effectiveLocale).format(this.graphItemCount()),
         });
     }
     onGraphItemFocus(index) {
@@ -2002,19 +2070,20 @@ export class LyraGraph extends LyraElement {
             return;
         this.activeGraphItem = normalized;
         this.graphLiveText = this.graphItemAnnouncement(normalized);
-        void this.updateComplete.then(() => {
-            // renderer="canvas" has no [part="node"]/[part="link"]/[part="hull"] elements at all -- the
-            // roving tab stop lives on the offscreen [part="cursor-item"] buttons instead (see render()),
-            // in the same flat nodes-then-links-then-hulls order.
-            const items = (this.renderer === 'canvas'
-                ? Array.from(this.renderRoot.querySelectorAll('[part="cursor-item"]'))
-                : [
-                    ...Array.from(this.renderRoot.querySelectorAll('[part="node"]')),
-                    ...Array.from(this.renderRoot.querySelectorAll('[part="link"]')),
-                    ...Array.from(this.renderRoot.querySelectorAll('[part="hull"]')),
-                ]);
-            items[normalized]?.focus();
-        });
+        void this.updateComplete.then(() => this.focusGraphItemElement(normalized));
+    }
+    focusGraphItemElement(index) {
+        // renderer="canvas" has no [part="node"]/[part="link"]/[part="hull"] elements at all -- the
+        // roving tab stop lives on the offscreen [part="cursor-item"] buttons instead (see render()),
+        // in the same flat nodes-then-links-then-hulls order.
+        const items = (this.renderer === 'canvas'
+            ? Array.from(this.renderRoot.querySelectorAll('[part="cursor-item"]'))
+            : [
+                ...Array.from(this.renderRoot.querySelectorAll('[part="node"]')),
+                ...Array.from(this.renderRoot.querySelectorAll('[part="link"]')),
+                ...Array.from(this.renderRoot.querySelectorAll('[part="hull"]')),
+            ]);
+        items[index]?.focus();
     }
     /**
      * The forward physical arrow key (`ArrowRight` in LTR, `ArrowLeft` under
@@ -2092,8 +2161,8 @@ export class LyraGraph extends LyraElement {
             role="group"
             aria-label=${this.accessibleLabel ||
                 this.localize('graphDiagram', undefined, {
-                    nodeCount: this.simNodes.length,
-                    linkCount: this.simLinks.length,
+                    nodeCount: getNumberFormat(this.effectiveLocale).format(this.simNodes.length),
+                    linkCount: getNumberFormat(this.effectiveLocale).format(this.simLinks.length),
                 })}
             tabindex=${this.graphItemCount() ? '-1' : '0'}
           ></canvas>
@@ -2107,7 +2176,7 @@ export class LyraGraph extends LyraElement {
             ${this.simLinks.map((link) => html `<li>${this.linkAccessibleText(link)}</li>`)}
             ${this.visibleCommunities().map((entry) => html `<li>${this.localize('graphCommunity', undefined, {
                 label: entry.community.label ?? entry.community.id,
-                count: entry.members.length,
+                count: getNumberFormat(this.effectiveLocale).format(entry.members.length),
             })}</li>`)}
           </ul>
           <div
@@ -2134,6 +2203,7 @@ export class LyraGraph extends LyraElement {
                   part="cursor-item"
                   tabindex=${this.normalizedGraphItem() === i ? '0' : '-1'}
                   aria-label=${this.nodeAccessibleText(n)}
+                  aria-pressed=${this.selectionMode !== 'none' ? String(this.isSelected('node', n.id)) : nothing}
                   @focus=${() => this.onGraphItemFocus(i)}
                   @keydown=${(e) => this.onGraphKeyDown(e, i, (ev) => this.onNodeClick(n, ev))}
                   @click=${(e) => this.onNodeClick(n, e)}
@@ -2148,6 +2218,7 @@ export class LyraGraph extends LyraElement {
                   part="cursor-item"
                   tabindex=${this.normalizedGraphItem() === i ? '0' : '-1'}
                   aria-label=${this.linkAccessibleText(l)}
+                  aria-pressed=${this.selectionMode !== 'none' ? String(this.isSelected('link', this.linkKey(l))) : nothing}
                   @focus=${() => this.onGraphItemFocus(i)}
                   @keydown=${(e) => this.onGraphKeyDown(e, i, (ev) => this.onLinkClick(l, ev))}
                   @click=${(e) => this.onLinkClick(l, e)}
@@ -2158,7 +2229,7 @@ export class LyraGraph extends LyraElement {
                 const i = this.simNodes.length + this.simLinks.length + hi;
                 const label = this.localize('graphCommunity', undefined, {
                     label: entry.community.label ?? entry.community.id,
-                    count: entry.members.length,
+                    count: getNumberFormat(this.effectiveLocale).format(entry.members.length),
                 });
                 return html `
                 <!-- hit-area-exempt: see the node cursor-item above -- same offscreen
@@ -2184,8 +2255,8 @@ export class LyraGraph extends LyraElement {
           role="group"
           aria-label=${this.accessibleLabel ||
             this.localize('graphDiagram', undefined, {
-                nodeCount: this.simNodes.length,
-                linkCount: this.simLinks.length,
+                nodeCount: getNumberFormat(this.effectiveLocale).format(this.simNodes.length),
+                linkCount: getNumberFormat(this.effectiveLocale).format(this.simLinks.length),
             })}
           viewBox="0 0 ${this.safeWidth} ${this.safeHeight}"
           tabindex=${this.graphItemCount() ? '-1' : '0'}
@@ -2219,7 +2290,7 @@ export class LyraGraph extends LyraElement {
             const fill = sanitizeNodeColor(entry.community.color);
             const label = this.localize('graphCommunity', undefined, {
                 label: entry.community.label ?? entry.community.id,
-                count: entry.members.length,
+                count: getNumberFormat(this.effectiveLocale).format(entry.members.length),
             });
             return svg `<g>
                 <path
@@ -2360,7 +2431,7 @@ export class LyraGraph extends LyraElement {
           ${this.simLinks.map((link) => html `<li>${this.linkAccessibleText(link)}</li>`)}
           ${this.visibleCommunities().map((entry) => html `<li>${this.localize('graphCommunity', undefined, {
             label: entry.community.label ?? entry.community.id,
-            count: entry.members.length,
+            count: getNumberFormat(this.effectiveLocale).format(entry.members.length),
         })}</li>`)}
         </ul>
       </div>