tycho-components 0.37.0 → 0.37.2

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

@@ -1,2 +1,3 @@
+import './style.scss';
 import { PageRenderViewProps } from './types';
-export default function PageRenderView({ elements, selectedTier, corpus, document, displayTags, showLineNumbers, highlightSentenceUid, getDisplayValue, getTokenStyle, isTokenEdited, getParticipantName, getParticipantColor, onTokenClick, }: PageRenderViewProps): import("react/jsx-runtime").JSX.Element;
+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-runtime").JSX.Element;

package/dist/features/PageRender/PageRenderView.js

@@ -1,12 +1,13 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 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, document, displayTags = false, showLineNumbers = true, highlightSentenceUid, getDisplayValue, getTokenStyle, isTokenEdited, getParticipantName, getParticipantColor, onTokenClick, }) {
+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);
     return (_jsx("div", { className: "page-render-elements", children: collapsed.map((item) => (_jsx(PageRenderElementItem, { item: item, highlight: highlightSentenceUid != null &&
-                sentenceUidForItem(item) === highlightSentenceUid, showLineNumbers: showLineNumbers, displayTags: displayTags, getDisplayValue: getDisplayValue, getTokenStyle: getTokenStyle, isTokenEdited: isTokenEdited, getParticipantName: getParticipantName, getParticipantColor: getParticipantColor, onTokenClick: onTokenClick, document: document }, 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, wrapToken: wrapToken, renderTokenSuffix: renderTokenSuffix }, item.key))) }));
 }
 function sentenceUidForItem(item) {
     if (item.kind === 'collapsedJunction')
@@ -15,9 +16,9 @@ function sentenceUidForItem(item) {
         return item.element.token.uid;
     return undefined;
 }
-function PageRenderElementItem({ item, highlight, showLineNumbers, displayTags, document, getDisplayValue, getTokenStyle, isTokenEdited, getParticipantName, getParticipantColor, onTokenClick, }) {
+function PageRenderElementItem({ item, highlight, showLineNumbers, displayTags, activeTokenKey, selectedTokenKeys, tokenSelectionKey, getDisplayValue, getTokenStyle, getTokenClassName, isTokenEdited, getParticipantName, getParticipantColor, onTokenClick, onTokenHover, onParticipantHover, wrapToken, renderTokenSuffix, }) {
     if (item.kind === 'collapsedJunction') {
-        return renderToken(item.token, item.splitIdx ?? 0, true, highlight, displayTags, getDisplayValue, getTokenStyle, isTokenEdited, onTokenClick);
+        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 }));
     }
     const { element } = item;
     switch (element.type) {
@@ -26,7 +27,7 @@ function PageRenderElementItem({ item, highlight, showLineNumbers, displayTags,
                 return null;
             return (_jsx("span", { className: "participant", style: getParticipantColor
                     ? { backgroundColor: getParticipantColor(element.participant) }
-                    : undefined, children: getParticipantName
+                    : undefined, onMouseEnter: () => onParticipantHover?.(element.participant), onMouseLeave: () => onParticipantHover?.(undefined), children: getParticipantName
                     ? getParticipantName(element.participant)
                     : element.participant }));
         case PageRenderElementType.LINE_BREAK:
@@ -38,30 +39,54 @@ function PageRenderElementItem({ item, highlight, showLineNumbers, displayTags,
         case PageRenderElementType.MARK:
             if (!element.token)
                 return null;
-            return renderToken(element.token, 0, false, highlight, displayTags, getDisplayValue, getTokenStyle, isTokenEdited, onTokenClick, true);
+            return (_jsx(TokenNode, { refToken: element.token, splitIdx: 0, isMark: 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 }));
         case PageRenderElementType.JUNCTION_SPLIT:
             if (!element.token)
                 return null;
-            return renderToken(element.token, element.idx ?? 0, true, highlight, displayTags, getDisplayValue, getTokenStyle, isTokenEdited, onTokenClick);
+            return (_jsx(TokenNode, { refToken: element.token, splitIdx: element.idx ?? 0, isSplit: 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 }));
         case PageRenderElementType.TOKEN:
             if (!element.token)
                 return null;
-            return renderToken(element.token, 0, false, highlight, displayTags, getDisplayValue, getTokenStyle, isTokenEdited, onTokenClick);
+            return (_jsx(TokenNode, { refToken: element.token, splitIdx: 0, 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 }));
         default:
             return null;
     }
 }
-function renderToken(ref, splitIdx, isSplit, highlight, displayTags, getDisplayValue, getTokenStyle, isTokenEdited, onTokenClick, isMark = false) {
-    const token = tokenRefToToken(ref);
-    const displaySplits = token.ec && token.split && !displayTags;
-    const visible = isMark || isTokenRefVisible(ref);
-    const tokenClass = cx('token', {
+function TokenNode({ refToken, splitIdx, isSplit = false, isMark = false, isCollapsedJunction = false, highlight, displayTags, activeTokenKey, selectedTokenKeys, tokenSelectionKey, getDisplayValue, getTokenStyle, getTokenClassName, isTokenEdited, onTokenClick, onTokenHover, wrapToken, renderTokenSuffix, }) {
+    const token = tokenRefToToken(refToken);
+    const displaySplits = Boolean(token.ec && token.split && !displayTags);
+    const visible = isMark || isTokenRefVisible(refToken);
+    const key = tokenSelectionKey?.(refToken);
+    const selected = (key != null && activeTokenKey === key) ||
+        (key != null && selectedTokenKeys?.has(key));
+    const ctx = {
+        isSplit,
+        isMark,
+        isCollapsedJunction,
+        splitIdx,
+        highlight,
+        selected: Boolean(selected),
+    };
+    const tokenClass = cx(isMark ? 'mark' : 'token', {
         split: isSplit,
-        'd-none': !visible || !!displaySplits,
-        edited: isTokenEdited ? isTokenEdited(token) : !!ref.edited,
+        'd-none': !visible || displaySplits,
+        edited: isTokenEdited ? isTokenEdited(token) : !!refToken.edited,
         highlight,
-        mark: isMark,
+        selected: ctx.selected,
+    }, getTokenClassName?.(refToken, token, ctx));
+    const source = isMark ? 'mark' : 'word';
+    const clickModifiers = (event) => ({
+        ctrlKey: event.ctrlKey,
+        altKey: event.altKey,
+        metaKey: event.metaKey,
     });
-    const anchorId = highlight && ref.p === 1 ? 'selected' : undefined;
-    return (_jsxs("div", { id: anchorId, className: tokenClass, style: getTokenStyle?.(token), onClick: onTokenClick ? () => onTokenClick(ref, splitIdx) : undefined, children: [getDisplayValue(token, splitIdx), displayTags && (_jsxs("b", { className: "tag", children: ["/", token.split ? token.split.t : token.t] }))] }));
+    const content = (_jsxs("div", { id: highlight && refToken.p === 1 ? 'selected' : undefined, className: tokenClass, style: getTokenStyle?.(refToken, token, ctx), onClick: onTokenClick
+            ? (event) => onTokenClick(refToken, splitIdx, source, clickModifiers(event))
+            : undefined, onContextMenu: onTokenClick
+            ? (event) => {
+                event.preventDefault();
+                onTokenClick(refToken, splitIdx, 'sentence', clickModifiers(event));
+            }
+            : undefined, onMouseEnter: () => onTokenHover?.(refToken.uid), onMouseLeave: () => onTokenHover?.(undefined), children: [getDisplayValue(token, splitIdx), displayTags && (_jsxs("b", { className: "tag", children: ["/", token.split ? token.split.t : token.t] })), renderTokenSuffix?.(refToken, token, ctx)] }));
+    return (_jsx(_Fragment, { children: wrapToken ? wrapToken(refToken, token, content, ctx) : content }));
 }

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

@@ -1,4 +1,4 @@
 export { default as PageRenderView } from './PageRenderView';
-export { default as collapseElementsForTier } from './collapseElementsForTier';
+export { default as collapseElementsForTier, shouldSkipJunctionContinuationElement, shouldSkipSegmentationElement, shouldSkipSegmentationToken, findSegmentationGroupBounds, isTokenBearingCollapsed, } from './collapseElementsForTier';
 export { tokenRefToToken, default as isTokenRefVisible } from './tokenUtils';
 export * from './types';

package/dist/features/PageRender/index.js

@@ -1,4 +1,4 @@
 export { default as PageRenderView } from './PageRenderView';
-export { default as collapseElementsForTier } from './collapseElementsForTier';
+export { default as collapseElementsForTier, shouldSkipJunctionContinuationElement, shouldSkipSegmentationElement, shouldSkipSegmentationToken, findSegmentationGroupBounds, isTokenBearingCollapsed, } from './collapseElementsForTier';
 export { tokenRefToToken, default as isTokenRefVisible } from './tokenUtils';
 export * from './types';

package/dist/features/PageRender/style.scss

@@ -0,0 +1,109 @@
+.page-render-elements {
+  display: flex;
+  flex-flow: wrap;
+
+  .line-break {
+    width: 100%;
+    margin: 2px 0;
+    background-color: transparent;
+    border: none;
+
+    + .line-break {
+      margin: var(--spacing-100) 0;
+    }
+  }
+
+  .line-break-number {
+    position: relative;
+    left: calc(-1 * var(--spacing-150));
+    top: var(--spacing-075);
+    font-size: 0.7em;
+  }
+
+  .mark {
+    font-family: 'Georgia', serif;
+    cursor: pointer;
+    @include body-xmedium-1;
+    display: inline-flex;
+    height: var(--spacing-300);
+    padding: 0 var(--spacing-050);
+    margin-bottom: var(--spacing-050);
+    width: auto;
+    background-color: var(--layer-semantic-warning);
+    line-height: var(--spacing-300);
+
+    &.selected {
+      background-color: var(--layer-semantic-danger);
+      color: var(--text-primary);
+    }
+  }
+
+  .token {
+    font-family: 'Georgia', serif;
+    cursor: pointer;
+    @include body-xmedium-1;
+    display: inline-flex;
+    align-items: center;
+    height: var(--spacing-300);
+    line-height: var(--spacing-300);
+    min-height: 0;
+    padding: 0 var(--spacing-050);
+    margin-bottom: var(--spacing-050);
+    width: auto;
+
+    sup {
+      font-size: var(--spacing-150);
+      line-height: 0;
+      vertical-align: super;
+      margin-bottom: var(--spacing-100);
+    }
+
+    &.highlight {
+      background-color: var(--layer-semantic-warning);
+    }
+
+    &.edited {
+      border-bottom: 1px dashed var(--text-on-color-accent);
+    }
+
+    &.review {
+      background-color: color-mix(
+        in srgb,
+        var(--semantic-danger-70) 50%,
+        transparent
+      );
+    }
+
+    &.inconsistency {
+      border-bottom: 2px dashed var(--semantic-danger-70);
+    }
+
+    &.ignore {
+      opacity: 0.6;
+    }
+
+    &.comment {
+      border-bottom: 2px dashed var(--semantic-success-60);
+    }
+
+    &.selected {
+      background-color: var(--layer-semantic-danger);
+      color: var(--text-primary);
+    }
+
+    &.participant {
+      border-bottom-width: 1px;
+      border-bottom-style: solid;
+    }
+  }
+
+  .participant {
+    margin-right: var(--spacing-100);
+    border-radius: var(--radius-200);
+    padding: 0 var(--spacing-100);
+    background-color: var(--layer-hover-2);
+    border: 1px dashed var(--text-placeholder);
+    cursor: pointer;
+    height: var(--spacing-300);
+  }
+}

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

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import type { CSSProperties, ReactNode } from 'react';
 import type { Corpus } from '../../configs/types/Corpus';
 import type Document from '../../configs/types/Document';
 import type { Edition, Format, Split, Token } from '../../configs/types/Struct';
@@ -45,6 +45,20 @@ export type CollapsedPageRenderElement = {
     splitIdx?: number;
     key: string;
 };
+export type TokenClickSource = 'word' | 'sentence' | 'mark';
+export type TokenClickModifiers = {
+    ctrlKey: boolean;
+    altKey: boolean;
+    metaKey: boolean;
+};
+export type PageRenderTokenContext = {
+    isSplit: boolean;
+    isMark: boolean;
+    isCollapsedJunction: boolean;
+    splitIdx: number;
+    highlight: boolean;
+    selected: boolean;
+};
 export type PageRenderViewProps = {
     elements: PageRenderElement[];
     selectedTier: string;
@@ -53,10 +67,18 @@ export type PageRenderViewProps = {
     displayTags?: boolean;
     showLineNumbers?: boolean;
     highlightSentenceUid?: string;
+    activeTokenKey?: string;
+    selectedTokenKeys?: Set<string>;
+    tokenSelectionKey?: (ref: TokenRef) => string;
     getDisplayValue: (token: Token, splitIdx?: number) => ReactNode;
-    getTokenStyle?: (token: Token) => React.CSSProperties;
+    getTokenStyle?: (ref: TokenRef, token: Token, ctx: PageRenderTokenContext) => CSSProperties | undefined;
+    getTokenClassName?: (ref: TokenRef, token: Token, ctx: PageRenderTokenContext) => string | undefined;
     isTokenEdited?: (token: Token) => boolean;
     getParticipantName?: (code: string) => string;
-    getParticipantColor?: (code: string) => string;
-    onTokenClick?: (ref: TokenRef, splitIdx?: number) => void;
+    getParticipantColor?: (code: string) => string | undefined;
+    onTokenClick?: (ref: TokenRef, splitIdx: number | undefined, source: TokenClickSource, modifiers: TokenClickModifiers) => void;
+    onTokenHover?: (sentenceUid: string | undefined) => void;
+    onParticipantHover?: (code: string | undefined) => void;
+    wrapToken?: (ref: TokenRef, token: Token, content: ReactNode, ctx: PageRenderTokenContext) => ReactNode;
+    renderTokenSuffix?: (ref: TokenRef, token: Token, ctx: PageRenderTokenContext) => ReactNode;
 };

package/dist/features/index.d.ts

@@ -13,5 +13,5 @@ export type { SearchCriteria } from "./TreeView/TreeViewSearch/TreeViewSearch";
 export { default as CytoscapeMenuCanvas } from "./CytoscapeMenu/CytoscapeMenuCanvas";
 export { registerCytoscapeContextMenus, contextMenus } from "./CytoscapeMenu";
 export type { CytoscapeContextMenuOptions, MenuItemOption, ContextMenusInstance, } from "./CytoscapeMenu";
-export { PageRenderView, collapseElementsForTier, tokenRefToToken, isTokenRefVisible, } from "./PageRender";
-export type { PageRenderElement, PageRenderElementType, PageRenderViewProps, TokenRef, CollapsedPageRenderElement, } from "./PageRender";
+export { PageRenderView, collapseElementsForTier, shouldSkipJunctionContinuationElement, shouldSkipSegmentationElement, shouldSkipSegmentationToken, findSegmentationGroupBounds, isTokenBearingCollapsed, tokenRefToToken, isTokenRefVisible, } from "./PageRender";
+export type { PageRenderElement, PageRenderElementType, PageRenderViewProps, PageRenderTokenContext, TokenRef, CollapsedPageRenderElement, TokenClickSource, TokenClickModifiers, } from "./PageRender";

package/dist/features/index.js

@@ -9,4 +9,4 @@ export { default as SyntreesCytoscape } from "./TreeView/cytoscape/SyntreesCytos
 export { default as TreeViewSearch } from "./TreeView/TreeViewSearch/TreeViewSearch";
 export { default as CytoscapeMenuCanvas } from "./CytoscapeMenu/CytoscapeMenuCanvas";
 export { registerCytoscapeContextMenus, contextMenus } from "./CytoscapeMenu";
-export { PageRenderView, collapseElementsForTier, tokenRefToToken, isTokenRefVisible, } from "./PageRender";
+export { PageRenderView, collapseElementsForTier, shouldSkipJunctionContinuationElement, shouldSkipSegmentationElement, shouldSkipSegmentationToken, findSegmentationGroupBounds, isTokenBearingCollapsed, tokenRefToToken, isTokenRefVisible, } from "./PageRender";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tycho-components",
   "private": false,
-  "version": "0.37.0",
+  "version": "0.37.2",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {