tycho-components 0.1.0-SNAPSHOT-7 → 0.2.0-SNAPSHOT

package/dist/AppPicture/AppPicture.js

@@ -1,11 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useTranslation } from 'react-i18next';
+import { useEffect, useState } from 'react';
 import ImageUtils from '../functions/ImageUtils';
 import './style.scss';
-import { useState } from 'react';
 export default function AppPicture({ src, title, className, onClick, }) {
-    const { t } = useTranslation('header');
     const [empty, setEmpty] = useState(false);
+    useEffect(() => {
+        setEmpty(!src);
+    }, []);
     return (_jsx("div", { className: `app-picture-container ${empty ? 'empty' : ''}`, children: _jsx("img", { className: `${className} ${src ? '' : 'picture-placeholder'}`, src: ImageUtils.display(src), title: title, onClick: () => onClick && onClick(), onError: ({ currentTarget }) => {
                 setEmpty(true);
                 /* eslint-disable no-param-reassign */

package/dist/Comments/CommentAdd.d.ts

@@ -1,4 +1,4 @@
-import { User } from '../configs/User';
+import { User } from '../configs/types/User';
 import './style.scss';
 import { Comment } from './types/Comment';
 type Props = {

package/dist/Comments/types/CommentService.d.ts

@@ -1,4 +1,4 @@
-import { User } from '../../configs/User';
+import { User } from '../../configs/types/User';
 import { Comment, CommentRequest } from './Comment';
 declare function findNotifications(uid: string, mode: string): Promise<import("axios").AxiosResponse<Comment[], any>>;
 declare function findReadNotifications(uid: string, mode: string): Promise<import("axios").AxiosResponse<Comment[], any>>;

package/dist/Header/types/CorpusService.d.ts

@@ -1,4 +1,4 @@
-import { Corpus } from '../../configs/Corpus';
+import { Corpus } from '../../configs/types/Corpus';
 declare function available(): Promise<import("axios").AxiosResponse<Corpus[], any>>;
 declare const CorpusService: {
     available: typeof available;

package/dist/TreeView/TreeView.d.ts

@@ -0,0 +1,11 @@
+import { Struct } from '../configs/types/Struct';
+import './style.scss';
+type Props = {
+    struct: Struct;
+    expression?: string;
+    selector?: string;
+    onExpand?: () => void;
+    translations?: Record<string, string>;
+};
+export default function TreeView({ struct, expression, onExpand, selector, translations, }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/TreeView/TreeView.js

@@ -0,0 +1,104 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { faDiagramProject, faDownload, faExpand, faInfoCircle, faUpRightAndDownLeftFromCenter, } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { saveAs } from 'file-saver';
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import SentenceUtils from '../functions/SentenceUtils';
+import CytoscapeTreeConverter from './cytoscape/CytoscapeTreeConverter';
+import SyntreesCytoscape from './cytoscape/SyntreesCytoscape';
+import './style.scss';
+export default function TreeView({ struct, expression, onExpand, selector = 'canvas-tree', translations, }) {
+    const { t } = useTranslation('tree');
+    const [cy, setCy] = useState(null);
+    const [showInfo, setShowInfo] = useState(false);
+    const load = () => {
+        setCy(null);
+        const element = document.getElementById(selector);
+        if (element)
+            element.innerHTML = '';
+        if (!struct)
+            return;
+        const tree = new CytoscapeTreeConverter().execute(struct, showInfo);
+        tree &&
+            SyntreesCytoscape.init(selector, tree, (thisCy) => {
+                setCy(thisCy);
+            });
+    };
+    const downloadPsd = () => {
+        if (!expression)
+            return;
+        const blob = new Blob([expression], { type: 'text/plain;charset=utf-8' });
+        saveAs(blob, 'sentence.psd');
+    };
+    const generateImage = () => {
+        if (cy) {
+            saveAs(cy.jpg({ full: true }), 'tree.jpg');
+        }
+    };
+    const reset = () => {
+        if (cy) {
+            setTimeout(() => {
+                cy.fit();
+                cy.center();
+            }, 200);
+        }
+    };
+    const displayInfo = () => {
+        if (!cy || !struct)
+            return;
+        const newVal = !showInfo;
+        setShowInfo(newVal);
+        struct.tokens.forEach((token) => {
+            if (!token.ec) {
+                const leafId = token.p?.toString();
+                const newLabel = new CytoscapeTreeConverter().getLabelLeaf.call({ extraInfo: newVal }, token);
+                cy.$id(leafId).data('label', newLabel);
+            }
+        });
+    };
+    useEffect(() => {
+        load();
+    }, [struct]);
+    return (_jsxs("div", { className: "tree-view-container", children: [cy &&
+                getButtons(generateImage, reset, downloadPsd, displayInfo, onExpand, expression)
+                    .filter((btn) => btn.condition)
+                    .map((btn, i) => {
+                    const right = 12 + i * 44;
+                    return (_jsx("button", { className: "floating-button", type: "button", title: t(btn.title), onClick: btn.onClick, style: { right: `${right}px` }, children: _jsx(FontAwesomeIcon, { icon: btn.icon, className: btn.extraClass }) }, i));
+                }), _jsx("div", { id: selector, className: "canvas-tree" }), showInfo && (_jsxs("div", { className: "info", children: [_jsx("span", { children: SentenceUtils.getAsText(struct) }), translations &&
+                        Object.entries(translations).map(([k, v]) => (_jsxs("div", { className: "translation", children: [_jsxs("b", { children: [k, ":"] }), _jsx("span", { children: v })] }, k)))] }))] }));
+}
+const getButtons = (generateImage, reset, downloadPsd, displayInfo, onExpand, expression) => [
+    {
+        condition: true,
+        title: 'button.download.tree',
+        onClick: generateImage,
+        icon: faDownload,
+    },
+    {
+        condition: true,
+        title: 'button.recenter.tree',
+        onClick: reset,
+        icon: faExpand,
+    },
+    {
+        condition: !!expression,
+        title: 'button.download.penn',
+        onClick: downloadPsd,
+        icon: faDiagramProject,
+        extraClass: 'fa-rotate-90',
+    },
+    {
+        condition: !!onExpand,
+        title: 'button.expand.tree',
+        onClick: onExpand,
+        icon: faUpRightAndDownLeftFromCenter,
+    },
+    {
+        condition: true,
+        title: 'button.info',
+        onClick: displayInfo,
+        icon: faInfoCircle,
+    },
+];

package/dist/TreeView/cytoscape/Configuration.d.ts

@@ -0,0 +1,18 @@
+declare enum Location {
+    Top = "Top",
+    Left = "Left",
+    Bottom = "Bottom",
+    Right = "Right"
+}
+declare enum AlignmentInLevel {
+    Center = "Center",
+    TowardsRoot = "TowardsRoot",
+    AwayFromRoot = "AwayFromRoot"
+}
+declare class Configuration {
+    gapBetweenLevels: number;
+    gapBetweenNodes: number;
+    location: Location;
+    alignmentInLevel: AlignmentInLevel;
+}
+export { AlignmentInLevel, Configuration, Location };

package/dist/TreeView/cytoscape/Configuration.js

@@ -0,0 +1,22 @@
+var Location;
+(function (Location) {
+    Location["Top"] = "Top";
+    Location["Left"] = "Left";
+    Location["Bottom"] = "Bottom";
+    Location["Right"] = "Right";
+})(Location || (Location = {}));
+var AlignmentInLevel;
+(function (AlignmentInLevel) {
+    AlignmentInLevel["Center"] = "Center";
+    AlignmentInLevel["TowardsRoot"] = "TowardsRoot";
+    AlignmentInLevel["AwayFromRoot"] = "AwayFromRoot";
+})(AlignmentInLevel || (AlignmentInLevel = {}));
+class Configuration {
+    constructor() {
+        this.gapBetweenLevels = 50.0;
+        this.gapBetweenNodes = 50.0;
+        this.location = Location.Top;
+        this.alignmentInLevel = AlignmentInLevel.Center;
+    }
+}
+export { AlignmentInLevel, Configuration, Location };

package/dist/TreeView/cytoscape/CytoscapePositionCalculator.d.ts

@@ -0,0 +1,10 @@
+import NodeBounds from './NodeBounds';
+import { CytoscapeTreeCalculation } from './NodeCalculation';
+declare class CytoscapePositionCalculator {
+    calculatePositions(cytoscape: CytoscapeTreeCalculation): Map<string, NodeBounds>;
+    private convert;
+    private getChildren;
+    private addNode;
+    private order;
+}
+export default CytoscapePositionCalculator;

package/dist/TreeView/cytoscape/CytoscapePositionCalculator.js

@@ -0,0 +1,63 @@
+import TreeLayout from './TreeLayout';
+class CytoscapePositionCalculator {
+    calculatePositions(cytoscape) {
+        this.convert(cytoscape);
+        const layout = new TreeLayout(cytoscape.root);
+        return layout.getNodeBounds();
+    }
+    convert(cytoscape) {
+        this.order(cytoscape);
+        const root = cytoscape.root;
+        const mapNodes = new Map();
+        for (const node of cytoscape.nodes) {
+            mapNodes.set(node.id, node);
+        }
+        const rootKey = root.id;
+        if (rootKey)
+            for (const childKey of this.getChildren(cytoscape, rootKey)) {
+                this.addNode(cytoscape, mapNodes, childKey, root);
+            }
+    }
+    getChildren(cytoscape, key) {
+        // Gets all connected children IDs from the edges
+        const list = cytoscape.edges
+            .filter((e) => e.data.source === key)
+            .map((e) => e.data.target);
+        // Creates a new list to add the IDs in the order of the nodes
+        const children = [];
+        for (const node of cytoscape.nodes) {
+            if (!list.includes(node.id))
+                continue;
+            children.push(node.id);
+        }
+        return children;
+    }
+    addNode(cytoscape, mapNodes, key, fatherNode) {
+        const node = mapNodes.get(key);
+        if (!node)
+            return;
+        if (!fatherNode.children)
+            fatherNode.children = [];
+        fatherNode.children.push(node);
+        node.parent = fatherNode;
+        const children = this.getChildren(cytoscape, key);
+        if (children.length === 1 && children.includes(key))
+            return;
+        for (const child of children) {
+            this.addNode(cytoscape, mapNodes, child, node);
+        }
+    }
+    order(cytoscape) {
+        cytoscape.nodes.sort((nodeA, nodeB) => {
+            const valueA = nodeA.data.chunk ? nodeA.data.chunk.i : nodeA.data.token.p;
+            const valueB = nodeB.data.chunk ? nodeB.data.chunk.i : nodeB.data.token.p;
+            return valueA - valueB;
+        });
+        cytoscape.edges.sort((edge1, edge2) => {
+            const index1 = cytoscape.nodes.findIndex((node) => node.id === edge1.data.target);
+            const index2 = cytoscape.nodes.findIndex((node) => node.id === edge2.data.target);
+            return index1 - index2;
+        });
+    }
+}
+export default CytoscapePositionCalculator;

package/dist/TreeView/cytoscape/CytoscapeStylesheet.d.ts

@@ -0,0 +1,2 @@
+declare const stylesheet: Array<cytoscape.StylesheetCSS>;
+export default stylesheet;

package/dist/TreeView/cytoscape/CytoscapeStylesheet.js

@@ -0,0 +1,104 @@
+const stylesheet = [
+    {
+        selector: 'core',
+        style: {
+            'selection-box-color': '#ddd',
+            'selection-box-opacity': 0.65,
+            'selection-box-border-color': '#aaa',
+            'selection-box-border-width': 1,
+            'active-bg-color': 'black',
+            'active-bg-opacity': 0.15,
+        },
+    },
+    {
+        selector: 'node',
+        style: {
+            content: 'data(label)',
+            'background-color': '#FFF',
+            width: '50px',
+            height: '40px',
+            'text-wrap': 'wrap',
+            'text-max-width': 120,
+            'text-valign': 'center',
+            'text-halign': 'center',
+            'font-size': 18,
+            shape: 'rectangle',
+            cursor: 'pointer',
+        },
+    },
+    {
+        selector: 'node.highlight',
+        style: {
+            width: '100px',
+            'background-color': 'yellow',
+        },
+    },
+    {
+        selector: 'edge',
+        style: {
+            'control-point-distance': 30,
+            'control-point-weight': 0.5,
+            opacity: 0.9,
+            'overlay-padding': '3px',
+            'overlay-opacity': 0,
+            width: 1,
+        },
+    },
+    {
+        selector: ':selected',
+        style: {
+            'background-color': '#FFF',
+            'line-color': 'red',
+            'source-arrow-color': 'red',
+            'target-arrow-color': 'red',
+        },
+    },
+    {
+        selector: '.eh-handle',
+        style: {
+            'background-color': 'red',
+            width: 12,
+            height: 12,
+            shape: 'ellipse',
+            'overlay-opacity': 0,
+            'border-width': 12, // makes the handle easier to hit
+            'border-opacity': 0,
+        },
+    },
+    {
+        selector: '.eh-hover',
+        style: {
+            'background-color': 'red',
+        },
+    },
+    {
+        selector: '.eh-source',
+        style: {
+            'border-width': 2,
+            'border-color': 'red',
+        },
+    },
+    {
+        selector: '.eh-target',
+        style: {
+            'border-width': 2,
+            'border-color': 'red',
+        },
+    },
+    {
+        selector: '.eh-preview, .eh-ghost-edge',
+        style: {
+            'background-color': 'red',
+            'line-color': 'red',
+            'target-arrow-color': 'red',
+            'source-arrow-color': 'red',
+        },
+    },
+    {
+        selector: '.eh-ghost-edge.eh-preview-active',
+        css: {
+            opacity: 0,
+        },
+    },
+];
+export default stylesheet;

package/dist/TreeView/cytoscape/CytoscapeTreeConverter.d.ts

@@ -0,0 +1,29 @@
+import { Struct, Token } from '../../configs/types/Struct';
+import { CytoscapeTreeCalculation } from './NodeCalculation';
+declare class CytoscapeTreeConverter {
+    private ID_SPLITTER;
+    private extraInfo;
+    execute(struct: Struct, extraInfo: boolean): CytoscapeTreeCalculation | undefined;
+    getLabelLeaf(token: Token): string;
+    private validate;
+    private calculatePositions;
+    private checkLastTokenPosition;
+    private inflate;
+    private isEmptyCategoryInChunk;
+    private convertEmptyCategory;
+    private convertChunk;
+    private removeTemporaryEdges;
+    private generateChunkId;
+    private generateTokenId;
+    private generateLeafId;
+    private findParent;
+    private initTree;
+    private sortChunks;
+    private convertToken;
+    private getTokens;
+    private getLabelValue;
+    private getChunksByLevel;
+    private sortTokens;
+    private uuid;
+}
+export default CytoscapeTreeConverter;