tycho-components 0.46.0 → 0.46.2

package/dist/features/PageRender/PageRenderView.d.ts

@@ -1,4 +1,6 @@
 import './style.scss';
-import { CollapsedPageRenderElement, PageRenderViewProps } from './types';
-export default function PageRenderView({ elements, selectedTier, corpus, displayTags, showLineNumbers, highlightSentenceUid, activeTokenKey, selectedTokenKeys, tokenSelectionKey, getDisplayValue, getTokenStyle, getTokenClassName, isTokenEdited, getParticipantName, getParticipantColor, onTokenClick, onTokenHover, onParticipantHover, wrapToken, renderTokenSuffix, }: PageRenderViewProps): import("react").JSX.Element;
+import { CollapsedPageRenderElement, PageRenderElement, PageRenderViewProps } from './types';
+/** Ensure PARTICIPANT elements carry a sentence uid (API or next-token look-ahead). */
+export declare function withParticipantSentenceUids(elements: PageRenderElement[]): PageRenderElement[];
+export default function PageRenderView({ elements, selectedTier, corpus, displayTags, showLineNumbers, highlightSentenceUid, activeTokenKey, selectedTokenKeys, tokenSelectionKey, getDisplayValue, getTokenStyle, getTokenClassName, isTokenEdited, getParticipantName, getParticipantColor, onTokenClick, onTokenHover, onParticipantHover, onParticipantClick, wrapToken, renderTokenSuffix, }: PageRenderViewProps): import("react").JSX.Element;
 export declare function findPunctuationAfterCollapsedJunction(items: CollapsedPageRenderElement[], junctionIndex: number): number | undefined;

package/dist/features/PageRender/PageRenderView.js

@@ -1,12 +1,32 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Fragment } from 'react';
+import { Fragment, useMemo } from 'react';
 import cx from 'classnames';
 import './style.scss';
 import collapseElementsForTier from './collapseElementsForTier';
 import isTokenRefVisible, { tokenRefToToken } from './tokenUtils';
 import { PageRenderElementType, } from './types';
-export default function PageRenderView({ elements, selectedTier, corpus, displayTags = false, showLineNumbers = true, highlightSentenceUid, activeTokenKey, selectedTokenKeys, tokenSelectionKey, getDisplayValue, getTokenStyle, getTokenClassName, isTokenEdited, getParticipantName, getParticipantColor, onTokenClick, onTokenHover, onParticipantHover, wrapToken, renderTokenSuffix, }) {
-    const collapsed = collapseElementsForTier(elements, selectedTier, corpus);
+/** Ensure PARTICIPANT elements carry a sentence uid (API or next-token look-ahead). */
+export function withParticipantSentenceUids(elements) {
+    return elements.map((element, index) => {
+        if (element.type !== PageRenderElementType.PARTICIPANT ||
+            !element.participant ||
+            element.uid) {
+            return element;
+        }
+        for (let i = index + 1; i < elements.length; i++) {
+            const next = elements[i];
+            if (next.type === PageRenderElementType.PARTICIPANT)
+                break;
+            if (next.token?.uid) {
+                return { ...element, uid: next.token.uid };
+            }
+        }
+        return element;
+    });
+}
+export default function PageRenderView({ elements, selectedTier, corpus, displayTags = false, showLineNumbers = true, highlightSentenceUid, activeTokenKey, selectedTokenKeys, tokenSelectionKey, getDisplayValue, getTokenStyle, getTokenClassName, isTokenEdited, getParticipantName, getParticipantColor, onTokenClick, onTokenHover, onParticipantHover, onParticipantClick, wrapToken, renderTokenSuffix, }) {
+    const elementsWithUids = useMemo(() => withParticipantSentenceUids(elements), [elements]);
+    const collapsed = collapseElementsForTier(elementsWithUids, selectedTier, corpus);
     const punctuationBeforeBreak = new Map();
     const punctuationIndexes = new Set();
     collapsed.forEach((item, index) => {
@@ -17,7 +37,7 @@ export default function PageRenderView({ elements, selectedTier, corpus, display
         punctuationIndexes.add(punctuationIndex);
     });
     const renderItem = (item) => (_jsx(PageRenderElementItem, { item: item, highlight: highlightSentenceUid != null &&
-            sentenceUidForItem(item) === highlightSentenceUid, showLineNumbers: showLineNumbers, displayTags: displayTags, activeTokenKey: activeTokenKey, selectedTokenKeys: selectedTokenKeys, tokenSelectionKey: tokenSelectionKey, getDisplayValue: getDisplayValue, getTokenStyle: getTokenStyle, getTokenClassName: getTokenClassName, isTokenEdited: isTokenEdited, getParticipantName: getParticipantName, getParticipantColor: getParticipantColor, onTokenClick: onTokenClick, onTokenHover: onTokenHover, onParticipantHover: onParticipantHover, wrapToken: wrapToken, renderTokenSuffix: renderTokenSuffix }, item.key));
+            sentenceUidForItem(item) === highlightSentenceUid, showLineNumbers: showLineNumbers, displayTags: displayTags, activeTokenKey: activeTokenKey, selectedTokenKeys: selectedTokenKeys, tokenSelectionKey: tokenSelectionKey, getDisplayValue: getDisplayValue, getTokenStyle: getTokenStyle, getTokenClassName: getTokenClassName, isTokenEdited: isTokenEdited, getParticipantName: getParticipantName, getParticipantColor: getParticipantColor, onTokenClick: onTokenClick, onTokenHover: onTokenHover, onParticipantHover: onParticipantHover, onParticipantClick: onParticipantClick, wrapToken: wrapToken, renderTokenSuffix: renderTokenSuffix }, item.key));
     return (_jsx("div", { className: "page-render-elements", children: collapsed.map((item, index) => {
             if (punctuationIndexes.has(index))
                 return null;
@@ -58,9 +78,11 @@ function sentenceUidForItem(item) {
         return item.token.uid;
     if (item.kind === 'single' && item.element.token)
         return item.element.token.uid;
+    if (item.kind === 'single' && item.element.uid)
+        return item.element.uid;
     return undefined;
 }
-function PageRenderElementItem({ item, highlight, showLineNumbers, displayTags, activeTokenKey, selectedTokenKeys, tokenSelectionKey, getDisplayValue, getTokenStyle, getTokenClassName, isTokenEdited, getParticipantName, getParticipantColor, onTokenClick, onTokenHover, onParticipantHover, wrapToken, renderTokenSuffix, }) {
+function PageRenderElementItem({ item, highlight, showLineNumbers, displayTags, activeTokenKey, selectedTokenKeys, tokenSelectionKey, getDisplayValue, getTokenStyle, getTokenClassName, isTokenEdited, getParticipantName, getParticipantColor, onTokenClick, onTokenHover, onParticipantHover, onParticipantClick, wrapToken, renderTokenSuffix, }) {
     if (item.kind === 'collapsedJunction') {
         return (_jsx(TokenNode, { refToken: item.token, splitIdx: item.splitIdx ?? 0, isSplit: true, isCollapsedJunction: true, highlight: highlight, displayTags: displayTags, activeTokenKey: activeTokenKey, selectedTokenKeys: selectedTokenKeys, tokenSelectionKey: tokenSelectionKey, getDisplayValue: getDisplayValue, getTokenStyle: getTokenStyle, getTokenClassName: getTokenClassName, isTokenEdited: isTokenEdited, onTokenClick: onTokenClick, onTokenHover: onTokenHover, wrapToken: wrapToken, renderTokenSuffix: renderTokenSuffix }));
     }
@@ -71,7 +93,14 @@ function PageRenderElementItem({ item, highlight, showLineNumbers, displayTags,
                 return null;
             return (_jsx("span", { className: "participant", style: getParticipantColor
                     ? { backgroundColor: getParticipantColor(element.participant) }
-                    : undefined, onMouseEnter: () => onParticipantHover?.(element.participant), onMouseLeave: () => onParticipantHover?.(undefined), children: getParticipantName
+                    : undefined, onMouseEnter: () => onParticipantHover?.(element.participant), onMouseLeave: () => onParticipantHover?.(undefined), onClick: (event) => {
+                    if (!onParticipantClick)
+                        return;
+                    event.stopPropagation();
+                    if (!element.uid)
+                        return;
+                    onParticipantClick(element.participant, element.uid);
+                }, children: getParticipantName
                     ? getParticipantName(element.participant)
                     : element.participant }));
         case PageRenderElementType.LINE_BREAK:

package/dist/features/PageRender/types.d.ts

@@ -33,6 +33,8 @@ export type PageRenderElement = {
     line?: number;
     mstart?: boolean;
     participant?: string;
+    /** Sentence uid for PARTICIPANT labels. */
+    uid?: string;
     token?: TokenRef;
 };
 export type CollapsedPageRenderElement = {
@@ -79,6 +81,7 @@ export type PageRenderViewProps = {
     onTokenClick?: (ref: TokenRef, splitIdx: number | undefined, source: TokenClickSource, modifiers: TokenClickModifiers) => void;
     onTokenHover?: (sentenceUid: string | undefined) => void;
     onParticipantHover?: (code: string | undefined) => void;
+    onParticipantClick?: (code: string, sentenceUid: string) => void;
     wrapToken?: (ref: TokenRef, token: Token, content: ReactNode, ctx: PageRenderTokenContext) => ReactNode;
     renderTokenSuffix?: (ref: TokenRef, token: Token, ctx: PageRenderTokenContext) => ReactNode;
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tycho-components",
   "private": false,
-  "version": "0.46.0",
+  "version": "0.46.2",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {
@@ -90,7 +90,7 @@
     "react-i18next": "^13.0.2",
     "react-router-dom": "^6.14.2",
     "react-toastify": "^9.1.3",
-    "tycho-storybook": "0.12.7",
+    "tycho-storybook": "0.12.8",
     "wavesurfer-react": "^2.2.2",
     "wavesurfer.js": "^6.6.3"
   },
@@ -120,7 +120,7 @@
     "react-toastify": "^9.1.3",
     "sass-embedded": "^1.97.2",
     "storybook": "^10.1.11",
-    "tycho-storybook": "^0.12.7",
+    "tycho-storybook": "^0.12.8",
     "typescript": "^5.7.3",
     "vite": "^7.0.0",
     "vitest": "^3.2.6",