tycho-components 0.40.1 → 0.40.2

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

@@ -0,0 +1,17 @@
+export declare const viewerConfigurations: {
+    readonly svgID: "canvas";
+    readonly font: "FreeSans, Arial, Helvetica, sans-serif";
+    readonly margin: 4;
+    readonly nodeFontSize: 16;
+    readonly edgeFontSize: 16;
+    readonly edgeFontOffset: 8;
+    readonly lvlHeight: 40;
+    readonly nodeHeight: 48;
+    readonly multiSkip: 4;
+    readonly multiHeight: 28;
+    readonly edgeFontWhiteMargin: 2;
+    readonly edgeDrop: 80;
+    readonly edgeLblBackground: "white";
+    readonly edgeLblOpacity: 0.9;
+    readonly nodeTweek: 2;
+};

package/dist/functions/conllu/ConlluViewerConstants.js

@@ -0,0 +1,17 @@
+export const viewerConfigurations = {
+    svgID: 'canvas',
+    font: 'FreeSans, Arial, Helvetica, sans-serif',
+    margin: 4,
+    nodeFontSize: 16,
+    edgeFontSize: 16,
+    edgeFontOffset: 8,
+    lvlHeight: 40,
+    nodeHeight: 48,
+    multiSkip: 4,
+    multiHeight: 28,
+    edgeFontWhiteMargin: 2,
+    edgeDrop: 80,
+    edgeLblBackground: 'white',
+    edgeLblOpacity: 0.9,
+    nodeTweek: 2,
+};

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

@@ -0,0 +1,33 @@
+import { Conllu } from '../../configs/types/Conllu';
+import { ConlluViewerGraph } from './ConlluViewerGraph';
+export declare const calculateTextWidth: (text: string, fontSize: number, bold: boolean) => {
+    w: number;
+    h: number;
+    l: number;
+};
+export declare const throwError: (err: Error, idx: number) => never;
+declare class ConlluViewerConverter {
+    private MIN_NODE_WIDTH;
+    private NODE_SPACING;
+    private MARGIN;
+    private NODE_FONT_SIZE;
+    private EDGE_FONT_SIZE;
+    private EDGE_FONT_OFFSET;
+    private LVL_HEIGHT;
+    private NODE_HEIGHT;
+    private MULTI_SKIP;
+    private MULTI_HEIGHT;
+    execute: (conllu: Conllu) => ConlluViewerGraph;
+    private calculateLower;
+    private calculateOffset;
+    private calculateHeight;
+    private calculateWidth;
+    private calculateAnchors;
+    private setDependenciesMaxLevel;
+    private calculateMaxLevel;
+    private calculateDependenciesLevel;
+    private relateDependencies;
+    private loadDependencies;
+    private load;
+}
+export default ConlluViewerConverter;

package/dist/functions/conllu/ConlluViewerConverter.js

@@ -0,0 +1,309 @@
+import { fontBaseSize, fontBoldAscent, fontBoldDescent, fontBoldSizes, fontRegularAscent, fontRegularDescent, fontRegularSizes, } from './ConlluFontsizes';
+export const calculateTextWidth = (text, fontSize, bold) => {
+    const { sizes, asc, desc } = bold
+        ? { sizes: fontBoldSizes, asc: fontBoldAscent, desc: fontBoldDescent }
+        : {
+            sizes: fontRegularSizes,
+            asc: fontRegularAscent,
+            desc: fontRegularDescent,
+        };
+    let w = 0;
+    for (const c of text) {
+        const i = c.charCodeAt(0);
+        let w1;
+        if (i >= sizes.length) {
+            w1 = fontBaseSize;
+        }
+        else {
+            w1 = sizes[i];
+        }
+        w += w1;
+    }
+    return {
+        w: Math.round((fontSize * w) / fontBaseSize),
+        h: Math.round((fontSize * (asc + desc)) / fontBaseSize),
+        l: Math.round((fontSize * asc) / fontBaseSize),
+    };
+};
+export const throwError = (err, idx) => {
+    console.error({ err, idx });
+    throw err;
+};
+class ConlluViewerConverter {
+    constructor() {
+        this.MIN_NODE_WIDTH = 80;
+        this.NODE_SPACING = 8;
+        this.MARGIN = 4;
+        this.NODE_FONT_SIZE = 16;
+        this.EDGE_FONT_SIZE = 16;
+        this.EDGE_FONT_OFFSET = 8;
+        this.LVL_HEIGHT = 40;
+        this.NODE_HEIGHT = 48;
+        this.MULTI_SKIP = 4;
+        this.MULTI_HEIGHT = 28;
+        this.execute = (conllu) => {
+            const graph = this.load(conllu);
+            this.loadDependencies(graph);
+            this.relateDependencies(graph);
+            graph.items.sort((a, b) => a.end - b.end);
+            this.calculateWidth(graph);
+            graph.dependencies.sort((a, b) => a.dist - b.dist);
+            this.calculateDependenciesLevel(graph);
+            this.calculateMaxLevel(graph);
+            this.setDependenciesMaxLevel(graph);
+            this.calculateAnchors(graph);
+            this.calculateHeight(graph);
+            this.calculateOffset(graph);
+            this.calculateLower(graph);
+            return graph;
+        };
+        this.calculateLower = (graph) => {
+            const { w, h, l: y } = calculateTextWidth('Xg', this.NODE_FONT_SIZE, false);
+            graph.lower = y / 2;
+        };
+        this.calculateOffset = (graph) => {
+            graph.offset =
+                this.MARGIN +
+                    this.EDGE_FONT_SIZE +
+                    this.EDGE_FONT_OFFSET +
+                    this.LVL_HEIGHT * (graph.maxlvl + 1);
+        };
+        this.calculateHeight = (graph) => {
+            let height = this.MARGIN +
+                this.EDGE_FONT_SIZE +
+                this.EDGE_FONT_OFFSET +
+                this.LVL_HEIGHT * (graph.maxlvl + 1) +
+                this.NODE_HEIGHT +
+                this.MARGIN;
+            if (graph.multis.length > 0) {
+                height += this.MULTI_HEIGHT + this.MULTI_SKIP;
+            }
+            graph.height = height;
+        };
+        this.calculateWidth = (graph) => {
+            let width = this.MARGIN;
+            graph.items.forEach((item, i) => {
+                if (item.end !== i + 1) {
+                    throwError(new Error(`Wrong index: ${item.end} != ${i + 1}`), item.lineno);
+                }
+                item.x1 = width;
+                const { w: w1 } = calculateTextWidth(item.postag + ' i', this.NODE_FONT_SIZE, false);
+                const { w: w2 } = calculateTextWidth(item.word + ' i', this.NODE_FONT_SIZE, false);
+                item.x2 = width + 24 + Math.max(this.MIN_NODE_WIDTH, w1, w2);
+                width = item.x2 + this.NODE_SPACING;
+            });
+            width -= this.NODE_SPACING;
+            width += this.MARGIN;
+            graph.width = width;
+        };
+        this.calculateAnchors = (graph) => {
+            graph.anchors.forEach((anchor, key) => {
+                anchor.forEach((a, i) => {
+                    if (a.dist === 0) {
+                        graph.anchors[key][i].level = graph.maxlvl;
+                    }
+                });
+            });
+            graph.anchors.forEach((anchor) => {
+                anchor.sort((a1, a2) => {
+                    if (a1.dist === 0)
+                        return a2.dist > 0 ? -1 : 1;
+                    if (a2.dist === 0)
+                        return a1.dist < 0 ? -1 : 1;
+                    if (a1.dist === a2.dist) {
+                        if (a1.dist < 0)
+                            return a1.level - a2.level;
+                        return a2.level - a1.level;
+                    }
+                    if (a1.dist < 0) {
+                        if (a2.dist > 0) {
+                            return -1;
+                        }
+                        return a1.dist < a2.dist ? 1 : -1;
+                    }
+                    if (a2.dist < 0) {
+                        return 1;
+                    }
+                    return a1.dist < a2.dist ? 1 : -1;
+                });
+            });
+        };
+        this.setDependenciesMaxLevel = (graph) => {
+            graph.dependencies.forEach((dep, i) => {
+                if (dep.headpos === 0) {
+                    graph.dependencies[i].lvl = graph.maxlvl;
+                }
+            });
+        };
+        this.calculateMaxLevel = (graph) => {
+            const maxlvl = graph.dependencies.reduce((max, dep) => Math.max(max, dep.lvl || 0), 0);
+            graph.maxlvl = graph.hasEnhanced ? maxlvl + 1 : maxlvl;
+        };
+        this.calculateDependenciesLevel = (graph) => {
+            const anchors = Array.from({ length: graph.items.length }, () => []);
+            const grid = Array.from({ length: graph.items.length }, () => Array(2 * graph.items.length).fill(false));
+            graph.dependencies.forEach((dep, i) => {
+                if (dep.headpos === 0) {
+                    anchors[dep.end - 1].push({ dist: 0, level: 0 });
+                    return;
+                }
+                let i1 = dep.end - 1;
+                let i2 = dep.headpos - 1;
+                if (i1 > i2) {
+                    [i1, i2] = [i2, i1];
+                }
+                let lvl = 0;
+                while (true) {
+                    let ok = true;
+                    for (let j = i1; j < i2; j++) {
+                        if (grid[j][lvl]) {
+                            ok = false;
+                            break;
+                        }
+                    }
+                    if (ok) {
+                        for (let j = i1; j < i2; j++) {
+                            grid[j][lvl] = true;
+                        }
+                        break;
+                    }
+                    lvl++;
+                }
+                graph.dependencies[i].lvl = lvl;
+                anchors[dep.end - 1].push({ dist: dep.headpos - dep.end, level: lvl });
+                anchors[dep.headpos - 1].push({
+                    dist: dep.end - dep.headpos,
+                    level: lvl,
+                });
+            });
+            graph.anchors = anchors;
+            graph.grid = grid;
+        };
+        this.relateDependencies = (graph) => {
+            for (let i = 0; i < graph.dependencies.length; i++) {
+                let d1 = graph.dependencies[i];
+                if (d1.rel[0] !== '') {
+                    for (let j = 0; j < graph.dependencies.length; j++) {
+                        if (i === j)
+                            continue;
+                        let d2 = graph.dependencies[j];
+                        if (d2.rel[1] !== '' &&
+                            d1.end === d2.end &&
+                            d1.headpos === d2.headpos &&
+                            d1.dist === d2.dist) {
+                            d1.rel[1] = d2.rel[1];
+                            graph.dependencies.splice(j, 1);
+                            if (j < i)
+                                i--;
+                            break;
+                        }
+                    }
+                }
+            }
+        };
+        this.loadDependencies = (graph) => {
+            const dependencies = [];
+            for (let i = 0; i < graph.items.length; i++) {
+                let item = graph.items[i];
+                let end = graph.positions[item.here];
+                item.end = end;
+                if (!item.enhanced) {
+                    let headpos = graph.positions[item.there];
+                    if (headpos === undefined) {
+                        console.error(`Unknown head position ${item.there}`, item.lineno);
+                    }
+                    else {
+                        dependencies.push({
+                            end,
+                            headpos,
+                            rel: [item.rel, ''],
+                            dist: Math.abs(end - headpos),
+                            lvl: 0,
+                        });
+                    }
+                }
+                if (item.deps !== '_') {
+                    const parts = item.deps?.split('|') ?? [];
+                    parts.forEach((part) => {
+                        const partsSplits = part.split(':', 2);
+                        if (partsSplits.length !== 2) {
+                            throwError(new Error(`Invalid dependency: ${part}`), item.lineno);
+                        }
+                        const headpos = graph.positions[partsSplits[0]];
+                        if (!headpos) {
+                            throwError(new Error(`Unknown head position ${partsSplits[0]}`), item.lineno);
+                        }
+                        dependencies.push({
+                            end: end,
+                            headpos: headpos,
+                            rel: ['', partsSplits[1]],
+                            dist: Math.abs(end - headpos),
+                            lvl: 0,
+                        });
+                        graph.hasEnhanced = true;
+                    });
+                }
+            }
+            graph.dependencies = dependencies;
+        };
+        this.load = (conllu) => {
+            const items = [];
+            const multis = [];
+            const positions = {
+                '0': 0,
+            };
+            let n = 0;
+            conllu.tokens.forEach((token, idx) => {
+                // TODO: how to calculate nColumns????
+                // if (token.id.includes('.') && token.deps === nColumns) {
+                if (token.id.includes('.')) {
+                    return;
+                }
+                if (token.id.includes('-')) {
+                    multis.push({
+                        id: token.id,
+                        word: token.form,
+                        lineno: idx,
+                    });
+                    return;
+                }
+                const item = {
+                    lineno: idx,
+                    here: token.id,
+                    word: token.form,
+                    lemma: token.lemma,
+                    postag: token.upos,
+                    xpostag: token.xpos,
+                    attribs: token.feats !== '_'
+                        ? token.feats?.replace(/\|/g, ', ').replace(/=/g, ': ')
+                        : '',
+                    there: token.head,
+                    rel: token.deprel,
+                    deps: token.deps,
+                    enhanced: token.id.includes('.'),
+                    end: 0,
+                    x1: 0,
+                    x2: 0,
+                };
+                items.push(item);
+                n++;
+                positions[token.id] = n;
+            });
+            return {
+                multis,
+                items,
+                positions,
+                hasEnhanced: false,
+                dependencies: [],
+                anchors: [[]],
+                grid: [[]],
+                width: 0,
+                height: 0,
+                maxlvl: 0,
+                offset: 0,
+                lower: 0,
+            };
+        };
+    }
+}
+export default ConlluViewerConverter;

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

@@ -0,0 +1,46 @@
+export type ConlluViewerGraph = {
+    hasEnhanced: boolean;
+    items: ConlluViewerItem[];
+    multis: ConlluViewerMulti[];
+    dependencies: ConlluViewerDependency[];
+    positions: Record<string, number>;
+    anchors: ConlluViewerAnchor[][];
+    grid: boolean[][];
+    width: number;
+    height: number;
+    maxlvl: number;
+    offset: number;
+    lower: number;
+};
+export type ConlluViewerItem = {
+    lineno: number;
+    here: string;
+    there: string;
+    enhanced: boolean;
+    word: string;
+    lemma: string;
+    postag: string;
+    xpostag: string;
+    attribs: string;
+    rel: string;
+    deps: string;
+    end: number;
+    x1: number;
+    x2: number;
+};
+export type ConlluViewerMulti = {
+    id: string;
+    word: string;
+    lineno: number;
+};
+export type ConlluViewerDependency = {
+    end: number;
+    headpos: number;
+    rel: string[];
+    dist: number;
+    lvl: number;
+};
+export type ConlluViewerAnchor = {
+    dist: number;
+    level: number;
+};

package/dist/functions/conllu/ConlluViewerGraph.js

@@ -0,0 +1 @@
+export {};

package/dist/functions/index.d.ts

@@ -1,3 +1,6 @@
+export { default as ConlluViewerConverter, calculateTextWidth, throwError, } from './conllu/ConlluViewerConverter';
+export { viewerConfigurations } from './conllu/ConlluViewerConstants';
+export type { ConlluViewerAnchor, ConlluViewerDependency, ConlluViewerGraph, ConlluViewerItem, ConlluViewerMulti, } from './conllu/ConlluViewerGraph';
 export { default as DateUtils } from './DateUtils';
 export { default as EditionTierUtils } from './EditionTierUtils';
 export { normalizeCorpusFromApi } from './normalizeCorpusFromApi';

package/dist/functions/index.js

@@ -1,3 +1,5 @@
+export { default as ConlluViewerConverter, calculateTextWidth, throwError, } from './conllu/ConlluViewerConverter';
+export { viewerConfigurations } from './conllu/ConlluViewerConstants';
 export { default as DateUtils } from './DateUtils';
 export { default as EditionTierUtils } from './EditionTierUtils';
 export { normalizeCorpusFromApi } from './normalizeCorpusFromApi';

package/package.json

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