tycho-components 0.40.6 → 0.40.8

package/dist/configs/Localization.js

@@ -11,6 +11,7 @@ import { HelpTexts } from "./localization/HelpTexts";
 import { HistoryTexts } from "./localization/HistoryTexts";
 import { ParametersTexts } from "./localization/ParametersTexts";
 import { SentenceTexts } from "./localization/SentenceTexts";
+import { ConlluGraphTexts } from "./localization/ConlluGraphTexts";
 import { TreeTexts } from "./localization/TreeTexts";
 import { UploadTexts } from "./localization/UploadTexts";
 function buildResources(namespaces) {
@@ -31,6 +32,7 @@ const CORE_NAMESPACES = {
 };
 const FEATURE_NAMESPACES = {
     comments: CommentsTexts,
+    'conllu-graph': ConlluGraphTexts,
     tree: TreeTexts,
     sentence: SentenceTexts,
     parameters: ParametersTexts,

package/dist/configs/localization/ConlluGraphTexts.d.ts

@@ -0,0 +1,35 @@
+export declare const ConlluGraphTexts: {
+    en: {
+        'button.tooltip.zoom.in': string;
+        'button.tooltip.zoom.out': string;
+        'button.tooltip.recenter': string;
+        'button.tooltip.download': string;
+        'popover.id': string;
+        'popover.form': string;
+        'popover.pos': string;
+        'popover.xpos': string;
+        'popover.lemma': string;
+    };
+    'pt-BR': {
+        'button.tooltip.zoom.in': string;
+        'button.tooltip.zoom.out': string;
+        'button.tooltip.recenter': string;
+        'button.tooltip.download': string;
+        'popover.id': string;
+        'popover.form': string;
+        'popover.pos': string;
+        'popover.xpos': string;
+        'popover.lemma': string;
+    };
+    it: {
+        'button.tooltip.zoom.in': string;
+        'button.tooltip.zoom.out': string;
+        'button.tooltip.recenter': string;
+        'button.tooltip.download': string;
+        'popover.id': string;
+        'popover.form': string;
+        'popover.pos': string;
+        'popover.xpos': string;
+        'popover.lemma': string;
+    };
+};

package/dist/configs/localization/ConlluGraphTexts.js

@@ -0,0 +1,35 @@
+export const ConlluGraphTexts = {
+    en: {
+        'button.tooltip.zoom.in': 'Zoom in',
+        'button.tooltip.zoom.out': 'Zoom out',
+        'button.tooltip.recenter': 'Recenter',
+        'button.tooltip.download': 'Download',
+        'popover.id': 'ID',
+        'popover.form': 'Form',
+        'popover.pos': 'POS tag',
+        'popover.xpos': 'XPOS tag',
+        'popover.lemma': 'Lemma',
+    },
+    'pt-BR': {
+        'button.tooltip.zoom.in': 'Aumentar zoom',
+        'button.tooltip.zoom.out': 'Diminuir zoom',
+        'button.tooltip.recenter': 'Recentralizar',
+        'button.tooltip.download': 'Baixar',
+        'popover.id': 'ID',
+        'popover.form': 'Forma',
+        'popover.pos': 'Etiqueta POS',
+        'popover.xpos': 'Etiqueta XPOS',
+        'popover.lemma': 'Lema',
+    },
+    it: {
+        'button.tooltip.zoom.in': 'Zoom avanti',
+        'button.tooltip.zoom.out': 'Zoom indietro',
+        'button.tooltip.recenter': 'Ricentra',
+        'button.tooltip.download': 'Scarica',
+        'popover.id': 'ID',
+        'popover.form': 'Forma',
+        'popover.pos': 'Etichetta POS',
+        'popover.xpos': 'Etichetta XPOS',
+        'popover.lemma': 'Lemma',
+    },
+};

package/dist/features/ConlluGraphViewer/ConlluGraphViewer.d.ts

@@ -0,0 +1,12 @@
+import '@svgdotjs/svg.panzoom.js';
+import { Conllu } from '../../configs/types/Conllu';
+import { ConlluViewerItem } from '../../functions/conllu/ConlluViewerGraph';
+import './style.scss';
+export type ConlluGraphViewerProps = {
+    conllu: Conllu;
+    editable?: boolean;
+    onConlluChange?: (conllu: Conllu) => void;
+    onTokenClick?: (item: ConlluViewerItem) => void;
+    className?: string;
+};
+export default function ConlluGraphViewer({ conllu, editable, onConlluChange, onTokenClick, className, }: ConlluGraphViewerProps): import("react").JSX.Element | null;

package/dist/features/ConlluGraphViewer/ConlluGraphViewer.js

@@ -0,0 +1,115 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Point, SVG as dotSVG } from '@svgdotjs/svg.js';
+import '@svgdotjs/svg.panzoom.js';
+import classNames from 'classnames';
+import { useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { IconButton } from 'tycho-storybook';
+import ConlluUtils from '../../functions/conllu/ConlluUtils';
+import ConlluViewerConverter from '../../functions/conllu/ConlluViewerConverter';
+import { conlluViewerConfigurations } from '../../functions/conllu/ConlluViewerConstants';
+import { drawDependencies, drawItems, drawMultis, } from './ConlluGraphViewerRenderer';
+import './style.scss';
+const ZOOM_FACTOR = 0.1;
+const ZOOM_STEP = 1.1;
+const DEFAULT_ZOOM = 1;
+const applyDefaultView = (svg, graph) => {
+    svg.viewbox(0, 0, graph.width, graph.height);
+    const fitZoom = svg.zoom();
+    const initialZoom = Math.min(DEFAULT_ZOOM, fitZoom);
+    svg.zoom(initialZoom, new Point(graph.width / 2, graph.height / 2));
+};
+export default function ConlluGraphViewer({ conllu, editable = false, onConlluChange, onTokenClick, className, }) {
+    const { t } = useTranslation('conllu-graph');
+    const svgRef = useRef(null);
+    const svgDotRef = useRef(null);
+    const [graph, setGraph] = useState();
+    const [activeItem, setActiveItem] = useState();
+    const [draggedDep, setDraggedDep] = useState(null);
+    const [dragOverItem, setDragOverItem] = useState(null);
+    const handleGenerateImage = () => {
+        if (!svgRef.current || !graph) {
+            throw new Error('SVG element not found');
+        }
+        const svg = svgDotRef.current;
+        const previousViewbox = svg?.viewbox();
+        svg?.viewbox(0, 0, graph.width, graph.height);
+        try {
+            ConlluUtils.generateImageFromSVG(svgRef.current);
+        }
+        finally {
+            if (svg && previousViewbox) {
+                svg.viewbox(previousViewbox.x, previousViewbox.y, previousViewbox.width, previousViewbox.height);
+            }
+        }
+    };
+    const handleZoomIn = () => {
+        const svg = svgDotRef.current;
+        if (!svg)
+            return;
+        svg.zoom(svg.zoom() * ZOOM_STEP);
+    };
+    const handleZoomOut = () => {
+        const svg = svgDotRef.current;
+        if (!svg)
+            return;
+        svg.zoom(svg.zoom() / ZOOM_STEP);
+    };
+    const handleRecenter = () => {
+        const svg = svgDotRef.current;
+        if (!svg || !graph)
+            return;
+        applyDefaultView(svg, graph);
+    };
+    useEffect(() => {
+        try {
+            setGraph(new ConlluViewerConverter().execute(conllu));
+        }
+        catch (err) {
+            console.error(err);
+            setGraph(undefined);
+        }
+    }, [conllu]);
+    useEffect(() => {
+        if (!graph || !svgRef.current)
+            return;
+        const svg = dotSVG(svgRef.current);
+        svg.panZoom({ zoomFactor: ZOOM_FACTOR });
+        applyDefaultView(svg, graph);
+        svgDotRef.current = svg;
+        return () => {
+            svg.panZoom(false);
+            svgDotRef.current = null;
+        };
+    }, [graph?.width, graph?.height]);
+    useEffect(() => {
+        const svg = svgDotRef.current;
+        if (!svg)
+            return;
+        svg.panZoom({
+            zoomFactor: ZOOM_FACTOR,
+            panning: draggedDep == null,
+        });
+    }, [draggedDep]);
+    if (!graph) {
+        return null;
+    }
+    const rendererProps = {
+        graph,
+        activeItem,
+        setActiveItem,
+        editable,
+        conllu,
+        onTokenClick,
+        ...(editable
+            ? {
+                onDependencyChange: onConlluChange,
+                draggedDep,
+                setDraggedDep,
+                dragOverItem,
+                setDragOverItem,
+            }
+            : {}),
+    };
+    return (_jsxs("div", { className: classNames('conllu-graph-viewer-container', className), children: [_jsxs("div", { className: "floating-buttons", children: [_jsx(IconButton, { name: "zoom_in", title: t('button.tooltip.zoom.in'), size: "small", mode: "ghost", onClick: handleZoomIn }), _jsx(IconButton, { name: "zoom_out", title: t('button.tooltip.zoom.out'), size: "small", mode: "ghost", onClick: handleZoomOut }), _jsx(IconButton, { name: "center_focus_weak", title: t('button.tooltip.recenter'), size: "small", mode: "ghost", onClick: handleRecenter }), _jsx(IconButton, { name: "download", title: t('button.tooltip.download'), size: "small", mode: "ghost", onClick: handleGenerateImage })] }), _jsxs("svg", { ref: svgRef, id: conlluViewerConfigurations.svgID, width: "100%", height: "100%", preserveAspectRatio: "xMidYMid meet", children: [drawDependencies(rendererProps), drawItems(rendererProps), drawMultis(rendererProps)] })] }));
+}

package/dist/features/ConlluGraphViewer/ConlluGraphViewerRenderer.d.ts

@@ -0,0 +1,25 @@
+import { ReactElement } from 'react';
+import { Conllu } from '../../configs/types/Conllu';
+import { ConlluViewerGraph, ConlluViewerItem } from '../../functions/conllu/ConlluViewerGraph';
+export type ConlluGraphViewerRendererProps = {
+    graph: ConlluViewerGraph;
+    activeItem: ConlluViewerItem | undefined;
+    setActiveItem: (item: ConlluViewerItem | undefined) => void;
+    editable?: boolean;
+    onDependencyChange?: (updatedConllu: Conllu) => void;
+    conllu: Conllu;
+    draggedDep?: {
+        depIndex: number;
+        variant: number;
+    } | null;
+    setDraggedDep?: (dep: {
+        depIndex: number;
+        variant: number;
+    } | null) => void;
+    dragOverItem?: number | null;
+    setDragOverItem?: (itemIndex: number | null) => void;
+    onTokenClick?: (item: ConlluViewerItem) => void;
+};
+export declare const drawDependencies: ({ graph, activeItem, editable, draggedDep, setDraggedDep, }: ConlluGraphViewerRendererProps) => ReactElement | null;
+export declare const drawItems: ({ graph, activeItem, setActiveItem, editable, onDependencyChange, conllu, dragOverItem, setDragOverItem, draggedDep, setDraggedDep, onTokenClick, }: ConlluGraphViewerRendererProps) => ReactElement | null;
+export declare const drawMultis: ({ graph, }: ConlluGraphViewerRendererProps) => ReactElement | null;

package/dist/features/ConlluGraphViewer/ConlluGraphViewerRenderer.js

@@ -0,0 +1,195 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Tooltip } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import ConlluUtils from '../../functions/conllu/ConlluUtils';
+import { calculateConlluTextWidth, throwConlluError, } from '../../functions/conllu/ConlluViewerConverter';
+import { conlluViewerConfigurations } from '../../functions/conllu/ConlluViewerConstants';
+import updateDependencyInConllu from '../../functions/conllu/updateDependencyInConllu';
+const PopoverItem = ({ item }) => {
+    const { t } = useTranslation('conllu-graph');
+    return (_jsx("table", { children: _jsxs("tbody", { children: [_jsxs("tr", { children: [_jsx("td", { children: t('popover.id') }), _jsx("td", { children: item.lineno + 1 })] }), _jsxs("tr", { children: [_jsx("td", { children: t('popover.form') }), _jsx("td", { children: item.word })] }), _jsxs("tr", { children: [_jsx("td", { children: t('popover.pos') }), _jsx("td", { children: item.postag })] }), _jsxs("tr", { children: [_jsx("td", { children: t('popover.xpos') }), _jsx("td", { children: item.xpostag })] }), _jsxs("tr", { children: [_jsx("td", { children: t('popover.lemma') }), _jsx("td", { children: item.lemma })] }), _jsx("tr", { children: _jsx("td", { colSpan: 2, children: item.attribs }) })] }) }));
+};
+export const drawDependencies = ({ graph, activeItem, editable = false, draggedDep, setDraggedDep, }) => {
+    const results = [];
+    for (let variant = 0; variant < 2; variant++) {
+        let e = 'n';
+        if (variant === 1) {
+            if (!graph.hasEnhanced) {
+                continue;
+            }
+            e = 'e';
+        }
+        const lines = [];
+        const arrows = [];
+        const whites = [];
+        const texts = [];
+        graph.dependencies.forEach((dep, i) => {
+            if (dep.rel[variant] === '') {
+                return;
+            }
+            let i1 = dep.end - 1;
+            let i2 = dep.headpos - 1;
+            if (dep.headpos === 0) {
+                i2 = i1;
+            }
+            let d1 = graph.items[i1].x2 - graph.items[i1].x1 - 20;
+            let x1 = graph.items[i1].x1 +
+                10 +
+                Math.floor(d1 * ConlluUtils.calculateAnchor(graph, i1, i2, dep.lvl));
+            let d2 = graph.items[i2].x2 - graph.items[i2].x1 - 20;
+            let x2 = graph.items[i2].x1 +
+                10 +
+                Math.floor(d2 * ConlluUtils.calculateAnchor(graph, i2, i1, dep.lvl));
+            let y1 = conlluViewerConfigurations.margin +
+                conlluViewerConfigurations.edgeFontSize +
+                conlluViewerConfigurations.edgeFontOffset +
+                conlluViewerConfigurations.lvlHeight * (graph.maxlvl + 1);
+            let y2 = conlluViewerConfigurations.margin +
+                conlluViewerConfigurations.edgeFontSize +
+                conlluViewerConfigurations.edgeFontOffset +
+                conlluViewerConfigurations.lvlHeight * (graph.maxlvl - dep.lvl);
+            if (dep.headpos === 0) {
+                y2 =
+                    conlluViewerConfigurations.margin +
+                        conlluViewerConfigurations.edgeFontSize +
+                        conlluViewerConfigurations.edgeFontOffset;
+                lines.push(_jsx("path", { className: `e${e}${dep.end} q${dep.end}q${dep.headpos}`, d: `M${x1} ${y1} L${x1} ${y2}` }, `deps_${i}`));
+            }
+            else {
+                lines.push(_jsx("path", { className: `e${e}${dep.end} e${e}${dep.headpos} q${dep.end}q${dep.headpos} ${ConlluUtils.isActiveDependency(dep, activeItem)
+                        ? 'active-line'
+                        : ''}`, d: `M${x1} ${y1} L${x1} ${y2 + conlluViewerConfigurations.edgeDrop} C${x1} ${y2} ${x1} ${y2} ${(x1 + x2) / 2} ${y2} C${x2} ${y2} ${x2} ${y2} ${x2} ${y2 + conlluViewerConfigurations.edgeDrop} L${x2} ${y1}` }, `deps_${i}`));
+            }
+            const isDragging = editable &&
+                draggedDep?.depIndex === i &&
+                draggedDep?.variant === variant;
+            const diamondSize = 6;
+            const diamondOffset = 8;
+            const angle = 90;
+            const diamondY = y1 - diamondOffset;
+            arrows.push(_jsxs("g", { children: [dep.headpos !== 0 && (_jsx("polygon", { className: `e${e}${dep.end} e${e}${dep.headpos} q${dep.end}q${dep.headpos} ${ConlluUtils.isActiveDependency(dep, activeItem)
+                            ? 'active-arrow'
+                            : ''} ${isDragging ? 'dragging' : ''}`, points: `${x2},${diamondY - diamondSize} ${x2 + diamondSize},${diamondY} ${x2},${diamondY + diamondSize} ${x2 - diamondSize},${diamondY}`, transform: `rotate(${angle} ${x2} ${diamondY})`, style: editable ? { cursor: 'grab' } : undefined, onMouseDownCapture: editable && setDraggedDep
+                            ? (e) => {
+                                if (e.button === 0) {
+                                    e.stopPropagation();
+                                    e.preventDefault();
+                                    const dragData = JSON.stringify({
+                                        depIndex: i,
+                                        variant,
+                                        end: dep.end,
+                                    });
+                                    const dragElement = document.createElement('div');
+                                    dragElement.style.position = 'absolute';
+                                    dragElement.style.left = '-9999px';
+                                    dragElement.setAttribute('data-dependency', dragData);
+                                    document.body.appendChild(dragElement);
+                                    setDraggedDep({ depIndex: i, variant });
+                                    const handleMouseUp = () => {
+                                        document.body.removeChild(dragElement);
+                                        setDraggedDep(null);
+                                        document.removeEventListener('mouseup', handleMouseUp);
+                                    };
+                                    document.addEventListener('mouseup', handleMouseUp);
+                                }
+                            }
+                            : undefined })), _jsx("path", { className: `e${e}${dep.end} e${e}${dep.headpos} q${dep.end}q${dep.headpos} ${ConlluUtils.isActiveDependency(dep, activeItem)
+                            ? 'active-arrow'
+                            : ''} ${isDragging ? 'dragging' : ''}`, d: `M${x1} ${y1} l3 -14 l-6 0 Z` })] }, `arrow-group-${i}_${variant}`));
+            const { w, h, l } = calculateConlluTextWidth(dep.rel[variant] + 'i', conlluViewerConfigurations.edgeFontSize, true);
+            whites.push(_jsx("rect", { x: `${(x1 + x2 - w) / 2 - conlluViewerConfigurations.edgeFontWhiteMargin}`, y: `${y2 -
+                    l -
+                    conlluViewerConfigurations.edgeFontOffset -
+                    conlluViewerConfigurations.edgeFontWhiteMargin}`, width: `${w + 2 * conlluViewerConfigurations.edgeFontWhiteMargin}`, height: `${h + 2 * conlluViewerConfigurations.edgeFontWhiteMargin}` }, `whites_${i}`));
+            texts.push(_jsx("text", { className: `l${e}${dep.end} l${e}${dep.headpos} p${dep.end}p${dep.headpos}`, x: (x1 + x2) / 2, y: y2 - conlluViewerConfigurations.edgeFontOffset, children: ConlluUtils.escapeHTML(dep.rel[variant]) }, `texts_${i}`));
+        });
+        results.push(_jsxs("g", { className: variant === 0 ? 'normal' : 'enhnaced', style: variant === 0 && graph.hasEnhanced
+                ? { visibility: 'hidden' }
+                : undefined, children: [_jsx("g", { fill: "none", stroke: "black", strokeWidth: "1", children: lines }), _jsx("g", { fill: "black", stroke: "black", strokeWidth: "1", children: arrows }), _jsx("g", { fill: conlluViewerConfigurations.edgeLblBackground, stroke: conlluViewerConfigurations.edgeLblBackground, strokeWidth: "1", opacity: conlluViewerConfigurations.edgeLblOpacity, children: whites }), _jsx("g", { fontFamily: conlluViewerConfigurations.font, fontSize: conlluViewerConfigurations.edgeFontSize, textAnchor: "middle", children: texts })] }, variant));
+    }
+    return results.length > 0 ? _jsx(_Fragment, { children: results }) : null;
+};
+export const drawItems = ({ graph, activeItem, setActiveItem, editable = false, onDependencyChange, conllu, dragOverItem, setDragOverItem, draggedDep, setDraggedDep, onTokenClick, }) => {
+    const items = graph.items.map((item, i) => {
+        const color = item.enhanced ? '#ffe0e0' : '';
+        const isTooltipOpen = activeItem && activeItem.lineno === item.lineno;
+        const isDragging = draggedDep !== null && draggedDep !== undefined;
+        return (_jsx(Tooltip, { placement: "bottom", open: !!isTooltipOpen, title: _jsx(PopoverItem, { item: item }), arrow: true, children: _jsxs("g", { className: "pointer", onMouseDownCapture: editable && isDragging
+                    ? (e) => {
+                        e.stopPropagation();
+                    }
+                    : undefined, onClick: () => {
+                    if (!editable || !isDragging) {
+                        onTokenClick?.(item);
+                    }
+                }, onMouseEnter: () => {
+                    setActiveItem(item);
+                    if (editable && isDragging && setDragOverItem) {
+                        setDragOverItem(i);
+                    }
+                }, onMouseLeave: () => {
+                    setActiveItem(undefined);
+                    if (editable && setDragOverItem) {
+                        setDragOverItem(null);
+                    }
+                }, onMouseUp: editable && isDragging
+                    ? (e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        setDragOverItem?.(null);
+                        const depIndex = draggedDep.depIndex;
+                        const variant = draggedDep.variant;
+                        const newHeadpos = item.end;
+                        if (onDependencyChange) {
+                            const updatedConllu = updateDependencyInConllu(conllu, graph, depIndex, newHeadpos, variant);
+                            onDependencyChange(updatedConllu);
+                        }
+                        setDraggedDep?.(null);
+                    }
+                    : undefined, children: [_jsx("rect", { className: `${ConlluUtils.isActiveItem(item, activeItem) ? 'active-item' : ''} ${editable && dragOverItem === i ? 'drag-over' : ''}`, x: item.x1, y: graph.offset, width: item.x2 - item.x1, height: conlluViewerConfigurations.nodeHeight, rx: "5", ry: "5", fill: color }), _jsx("text", { className: `item-postag ${item.enhanced ? 'enhanced' : ''}`, x: (item.x1 + item.x2) / 2, y: graph.offset +
+                            conlluViewerConfigurations.nodeTweek +
+                            conlluViewerConfigurations.nodeHeight / 4 +
+                            graph.lower, textAnchor: "middle", children: ConlluUtils.escapeHTML(item.postag) }, `texts_2_${i}`), _jsx("text", { className: `item-text ${item.enhanced ? 'enhanced' : ''}`, x: (item.x1 + item.x2) / 2, y: graph.offset -
+                            conlluViewerConfigurations.nodeTweek +
+                            (conlluViewerConfigurations.nodeHeight * 3) / 4 +
+                            graph.lower, textAnchor: "middle", children: ConlluUtils.escapeHTML(item.word) }, `texts_3_${i}`)] }) }, `items_${i}`));
+    });
+    return (_jsx("g", { fill: "#D0E0FF", stroke: "black", strokeWidth: "1", children: items }));
+};
+export const drawMultis = ({ graph, }) => {
+    const boxes = [];
+    const labels = [];
+    graph.multis.forEach((multi, i) => {
+        const aa = multi.id.split('-');
+        if (aa.length !== 2) {
+            throwConlluError(new Error(`Invalid range ${multi.id}`), multi.lineno);
+        }
+        let x1 = 0;
+        let x2 = 0;
+        let found1 = false;
+        let found2 = false;
+        graph.items.forEach((item) => {
+            if (aa[0] === item.here) {
+                x1 = item.x1;
+                found1 = true;
+            }
+            if (aa[1] === item.here) {
+                x2 = item.x2;
+                found2 = true;
+                return;
+            }
+        });
+        if (!(found1 && found2)) {
+            throwConlluError(new Error(`Invalid range ${multi.id}`), multi.lineno);
+        }
+        boxes.push(_jsx("rect", { x: x1, y: graph.offset +
+                conlluViewerConfigurations.nodeHeight +
+                conlluViewerConfigurations.multiSkip, width: x2 - x1, height: conlluViewerConfigurations.multiHeight, rx: "5", ry: "5" }, `boxes_${i}`));
+        labels.push(_jsx("text", { x: (x1 + x2) / 2, y: graph.offset +
+                conlluViewerConfigurations.nodeHeight +
+                conlluViewerConfigurations.multiSkip +
+                conlluViewerConfigurations.multiHeight / 2 +
+                graph.lower, children: ConlluUtils.escapeHTML(multi.word) }, `labels_${i}`));
+    });
+    return (_jsxs(_Fragment, { children: [_jsx("g", { fill: "#D0E0FF", stroke: "black", strokeWidth: "1", children: boxes }), _jsx("g", { fontFamily: conlluViewerConfigurations.font, fontSize: conlluViewerConfigurations.nodeFontSize, fontStyle: "italic", textAnchor: "middle", children: labels })] }));
+};

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

@@ -0,0 +1,2 @@
+export { default } from './ConlluGraphViewer';
+export type { ConlluGraphViewerProps } from './ConlluGraphViewer';

package/dist/features/ConlluGraphViewer/index.js

@@ -0,0 +1 @@
+export { default } from './ConlluGraphViewer';

package/dist/features/ConlluGraphViewer/style.scss

@@ -0,0 +1,73 @@
+.conllu-graph-viewer-container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  position: relative;
+  overflow: hidden;
+  background-color: white;
+
+  .floating-buttons {
+    position: absolute;
+    top: var(--spacing-100, 10px);
+    right: var(--spacing-100, 10px);
+    z-index: 1069;
+    display: flex;
+    gap: var(--spacing-50, 4px);
+  }
+
+  #canvas {
+    width: 100%;
+    height: 100%;
+    display: block;
+    background-color: white;
+
+    .item-postag {
+      fill: #000;
+      font-size: var(--font-size-body);
+    }
+
+    .item-text {
+      fill: #000;
+      font-size: var(--font-size-body);
+      font-style: italic;
+      font-weight: var(--font-weight-light);
+    }
+
+    .active-arrow {
+      stroke: var(--color-primary);
+      fill: var(--color-primary);
+      stroke-width: 3px;
+    }
+
+    .active-line {
+      stroke: var(--color-primary);
+      stroke-width: 3px;
+    }
+
+    .active-item {
+      stroke: var(--color-primary);
+      stroke-width: 3px;
+    }
+
+    .drag-over {
+      stroke: var(--color-success, #28a745);
+      stroke-width: 3px;
+      fill: rgba(40, 167, 69, 0.1);
+    }
+
+    .dragging {
+      opacity: 0.5;
+      cursor: grabbing !important;
+    }
+
+    g[style*='cursor: grab'] {
+      cursor: grab !important;
+    }
+
+    g[style*='cursor: grab']:active {
+      cursor: grabbing !important;
+    }
+  }
+}

package/dist/features/index.d.ts

@@ -5,6 +5,8 @@ export { default as CommentService } from "./Comments/CommentService";
 export { default as Parameters } from "./Parameters";
 export { default as SentenceView } from "./SentenceView";
 export { default as TreeView } from "./TreeView";
+export { default as ConlluGraphViewer } from "./ConlluGraphViewer";
+export type { ConlluGraphViewerProps } from "./ConlluGraphViewer";
 export { default as CytoscapeTreeConverter } from "./TreeView/cytoscape/CytoscapeTreeConverter";
 export type { CytoscapeTreeConverterOptions } from "./TreeView/cytoscape/CytoscapeTreeConverter";
 export { default as SyntreesCytoscape } from "./TreeView/cytoscape/SyntreesCytoscape";

package/dist/features/index.js

@@ -4,6 +4,7 @@ export { default as CommentService } from "./Comments/CommentService";
 export { default as Parameters } from "./Parameters";
 export { default as SentenceView } from "./SentenceView";
 export { default as TreeView } from "./TreeView";
+export { default as ConlluGraphViewer } from "./ConlluGraphViewer";
 export { default as CytoscapeTreeConverter } from "./TreeView/cytoscape/CytoscapeTreeConverter";
 export { default as SyntreesCytoscape } from "./TreeView/cytoscape/SyntreesCytoscape";
 export { default as TreeViewSearch } from "./TreeView/TreeViewSearch/TreeViewSearch";

package/dist/functions/conllu/ConlluUtils.d.ts

@@ -1,5 +1,6 @@
 import { EdgeDefinition, NodeDefinition, Position } from 'cytoscape';
 import { Conllu, ConlluToken, Struct } from '../../configs';
+import { ConlluViewerDependency, ConlluViewerGraph, ConlluViewerItem } from './ConlluViewerGraph';
 export type CytoscapeTree = {
     nodes: NodeDefinition[];
     edges: EdgeDefinition[];
@@ -16,5 +17,9 @@ declare const ConlluUtils: {
     deleteToken: (conllu: Conllu, tokenIndex: number) => Conllu;
     getConlluTranslationFromStruct: (struct: Struct | undefined, lang: string) => string;
     generateImageFromSVG: (svgElement: SVGSVGElement) => void;
+    isActiveDependency: (dep: ConlluViewerDependency, activeItem: ConlluViewerItem | undefined) => boolean;
+    isActiveItem: (item: ConlluViewerItem, activeItem: ConlluViewerItem | undefined) => boolean;
+    calculateAnchor: (graph: ConlluViewerGraph, i1: number, i2: number, lvl: number) => number;
+    escapeHTML: (str: string) => string;
 };
 export default ConlluUtils;

package/dist/functions/conllu/ConlluUtils.js

@@ -1,4 +1,49 @@
 import { saveAs } from 'file-saver';
+const escapeHTML = (str) => {
+    return str || '';
+    // return str.replace(/[&<>"'`]/g, (match) => {
+    //   const escapeMap: Record<string, string> = {
+    //     '&': '&amp;',
+    //     '<': '&lt;',
+    //     '>': '&gt;',
+    //     '"': '&quot;',
+    //     "'": '&#39;',
+    //     '`': '&#96;',
+    //   };
+    //   return escapeMap[match];
+    // });
+};
+const calculateAnchor = (graph, i1, i2, lvl) => {
+    const a = graph.anchors[i1];
+    if (a.length === 1) {
+        if (i1 < i2) {
+            return 0.75;
+        }
+        return 0.25;
+    }
+    let n = 0;
+    for (let i = 0; i < a.length; i++) {
+        const v = a[i];
+        if (v.dist === i2 - i1 && v.level === lvl) {
+            n = i;
+            break;
+        }
+    }
+    return (n + 0.5) / a.length;
+};
+const isActiveDependency = (dep, activeItem) => {
+    if (!activeItem)
+        return false;
+    return (dep.headpos === Number(activeItem.here) ||
+        dep.end === Number(activeItem.here));
+};
+const isActiveItem = (item, activeItem) => {
+    if (!activeItem)
+        return false;
+    return (activeItem.here === item.there ||
+        activeItem.there === item.here ||
+        activeItem.lineno === item.lineno);
+};
 const convertStructToConllu = (struct) => {
     return {
         uid: struct.uid,
@@ -267,5 +312,9 @@ const ConlluUtils = {
     deleteToken,
     getConlluTranslationFromStruct,
     generateImageFromSVG,
+    isActiveDependency,
+    isActiveItem,
+    calculateAnchor,
+    escapeHTML,
 };
 export default ConlluUtils;

package/dist/functions/conllu/updateDependencyInConllu.d.ts

@@ -0,0 +1,4 @@
+import { Conllu } from '../../configs/types/Conllu';
+import { ConlluViewerGraph } from './ConlluViewerGraph';
+declare const updateDependencyInConllu: (conllu: Conllu, graph: ConlluViewerGraph, depIndex: number, newHeadpos: number, variant: number) => Conllu;
+export default updateDependencyInConllu;

package/dist/functions/conllu/updateDependencyInConllu.js

@@ -0,0 +1,52 @@
+const updateDependencyInConllu = (conllu, graph, depIndex, newHeadpos, variant) => {
+    const dep = graph.dependencies[depIndex];
+    if (!dep)
+        return conllu;
+    const endItem = graph.items.find((item) => item.end === dep.end);
+    if (!endItem)
+        return conllu;
+    const tokenIndex = endItem.lineno;
+    const token = conllu.tokens[tokenIndex];
+    if (!token)
+        return conllu;
+    const updatedConllu = {
+        ...conllu,
+        tokens: [...conllu.tokens],
+    };
+    if (variant === 0) {
+        const newHeadItem = graph.items.find((item) => item.end === newHeadpos);
+        if (newHeadItem) {
+            updatedConllu.tokens[tokenIndex] = {
+                ...token,
+                head: newHeadItem.here,
+                deprel: dep.rel[0],
+            };
+        }
+    }
+    else {
+        const newHeadItem = graph.items.find((item) => item.end === newHeadpos);
+        if (newHeadItem) {
+            const enhancedDeps = graph.dependencies
+                .map((d, idx) => ({ dep: d, index: idx }))
+                .filter(({ dep }) => {
+                const depEndItem = graph.items.find((item) => item.end === dep.end);
+                return (depEndItem && depEndItem.lineno === tokenIndex && dep.rel[1] !== '');
+            });
+            const updatedDeps = enhancedDeps
+                .map(({ dep, index }) => {
+                if (index === depIndex) {
+                    return `${newHeadItem.here}:${dep.rel[1]}`;
+                }
+                const headItem = graph.items.find((item) => item.end === dep.headpos);
+                return headItem ? `${headItem.here}:${dep.rel[1]}` : '';
+            })
+                .filter(Boolean);
+            updatedConllu.tokens[tokenIndex] = {
+                ...token,
+                deps: updatedDeps.length > 0 ? updatedDeps.join('|') : '_',
+            };
+        }
+    }
+    return updatedConllu;
+};
+export default updateDependencyInConllu;

package/dist/functions/index.d.ts

@@ -11,5 +11,6 @@ export { default as UsabilityUtils } from './UsabilityUtils';
 export { conlluViewerConfigurations } from './conllu/ConlluViewerConstants';
 export { default as ConlluUtils } from './conllu/ConlluUtils';
 export { default as ConlluViewerConverter, calculateConlluTextWidth, throwConlluError, } from './conllu/ConlluViewerConverter';
+export { default as updateDependencyInConllu } from './conllu/updateDependencyInConllu';
 export type { ConlluViewerAnchor, ConlluViewerDependency, ConlluViewerGraph, ConlluViewerItem, ConlluViewerMulti, } from './conllu/ConlluViewerGraph';
 export { normalizeCorpusFromApi } from './normalizeCorpusFromApi';

package/dist/functions/index.js

@@ -10,4 +10,5 @@ export { default as UsabilityUtils } from './UsabilityUtils';
 export { conlluViewerConfigurations } from './conllu/ConlluViewerConstants';
 export { default as ConlluUtils } from './conllu/ConlluUtils';
 export { default as ConlluViewerConverter, calculateConlluTextWidth, throwConlluError, } from './conllu/ConlluViewerConverter';
+export { default as updateDependencyInConllu } from './conllu/updateDependencyInConllu';
 export { normalizeCorpusFromApi } from './normalizeCorpusFromApi';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tycho-components",
   "private": false,
-  "version": "0.40.6",
+  "version": "0.40.8",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {
@@ -48,6 +48,8 @@
   ],
   "dependencies": {
     "@hookform/resolvers": "^5.2.2",
+    "@svgdotjs/svg.js": "^3.2.4",
+    "@svgdotjs/svg.panzoom.js": "^2.1.2",
     "@tanstack/react-table": "^8.20.6",
     "classnames": "^2.5.1",
     "cytoscape": "^3.28.1",