tycho-components 0.8.21 → 0.8.22

package/dist/TreeView/TreeView.d.ts

@@ -1,8 +1,8 @@
-import { Core } from 'cytoscape';
-import { Struct } from '../configs/types/Struct';
-import './style.scss';
+import { Core } from "cytoscape";
+import { Struct } from "../configs/types/Struct";
+import "./style.scss";
 type Props = {
-    struct: Struct;
+    struct?: Struct;
     expression?: string;
     selector?: string;
     translations?: Record<string, string>;

package/dist/TreeView/TreeView.js

@@ -1,18 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { saveAs } from 'file-saver';
-import html2canvas from 'html2canvas';
-import { useEffect, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { IconButton } from 'tycho-storybook';
-import AppPlaceholder from '../AppPlaceholder';
-import DateUtils from '../functions/DateUtils';
-import SentenceUtils from '../functions/SentenceUtils';
-import TreeViewSearch from './TreeViewSearch/TreeViewSearch';
-import CytoscapeTreeConverter from './cytoscape/CytoscapeTreeConverter';
-import SyntreesCytoscape from './cytoscape/SyntreesCytoscape';
-import './style.scss';
-export default function TreeView({ struct, expression, selector = 'canvas-tree', translations, wheelSensitivity, renderWithInfo = false, placeholder, cyRef, onClickExpression, onExpand, onReadyCustom, }) {
-    const { t } = useTranslation('tree');
+import { saveAs } from "file-saver";
+import html2canvas from "html2canvas";
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { IconButton } from "tycho-storybook";
+import AppPlaceholder from "../AppPlaceholder";
+import DateUtils from "../functions/DateUtils";
+import SentenceUtils from "../functions/SentenceUtils";
+import TreeViewSearch from "./TreeViewSearch/TreeViewSearch";
+import CytoscapeTreeConverter from "./cytoscape/CytoscapeTreeConverter";
+import SyntreesCytoscape from "./cytoscape/SyntreesCytoscape";
+import "./style.scss";
+export default function TreeView({ struct, expression, selector = "canvas-tree", translations, wheelSensitivity, renderWithInfo = false, placeholder, cyRef, onClickExpression, onExpand, onReadyCustom, }) {
+    const { t } = useTranslation("tree");
     const [cy, setCy] = useState(null);
     const [showInfo, setShowInfo] = useState(renderWithInfo);
     const [invalid, setInvalid] = useState();
@@ -27,7 +27,7 @@ export default function TreeView({ struct, expression, selector = 'canvas-tree',
         setCy(null);
         const element = document.getElementById(selector);
         if (element)
-            element.innerHTML = '';
+            element.innerHTML = "";
         if (!struct)
             return;
         let tree;
@@ -58,8 +58,8 @@ export default function TreeView({ struct, expression, selector = 'canvas-tree',
     const downloadPsd = () => {
         if (!expression)
             return;
-        const blob = new Blob([expression], { type: 'text/plain;charset=utf-8' });
-        saveAs(blob, 'sentence.psd');
+        const blob = new Blob([expression], { type: "text/plain;charset=utf-8" });
+        saveAs(blob, "sentence.psd");
     };
     const generateImage = () => {
         if (!cy)
@@ -68,13 +68,13 @@ export default function TreeView({ struct, expression, selector = 'canvas-tree',
         if (!cyContainer)
             return;
         html2canvas(cyContainer, {
-            backgroundColor: 'white',
+            backgroundColor: "white",
         }).then((canvas) => {
             canvas.toBlob((blob) => {
                 if (blob === null)
                     return;
-                saveAs(blob, 'tree.jpg');
-            }, 'image/jpeg', 1.0);
+                saveAs(blob, "tree.jpg");
+            }, "image/jpeg", 1.0);
         });
     };
     const reset = () => {
@@ -90,9 +90,9 @@ export default function TreeView({ struct, expression, selector = 'canvas-tree',
             if (!token.ec) {
                 const leafId = token.p?.toString();
                 const converter = new CytoscapeTreeConverter();
-                converter['extraInfo'] = extraInfo;
+                converter["extraInfo"] = extraInfo;
                 const newLabel = converter.getLabelLeaf(token);
-                thisCy.$id(leafId).data('label', newLabel);
+                thisCy.$id(leafId).data("label", newLabel);
             }
         });
     };
@@ -113,8 +113,8 @@ export default function TreeView({ struct, expression, selector = 'canvas-tree',
         setInvalid(undefined);
         load();
     }, [struct]);
-    if (invalid) {
-        return (_jsx(AppPlaceholder, { text: placeholder || t('placeholder.sentence.notparsed') }));
+    if (invalid || !struct) {
+        return (_jsx(AppPlaceholder, { text: placeholder || t("placeholder.sentence.notparsed") }));
     }
     return (_jsxs("div", { className: "tree-view-container", children: [_jsx("div", { className: "floating-buttons", children: cy &&
                     getButtons(generateImage, reset, onClickExpression || downloadPsd, toggleInfo, onExpand, expression, openSearchModal)
@@ -122,43 +122,43 @@ export default function TreeView({ struct, expression, selector = 'canvas-tree',
                         .map((btn, i) => {
                         return (_jsx(IconButton, { name: btn.icon, title: t(btn.title), onClick: btn.onClick, size: "small", mode: "ghost" }, i));
                     }) }), showSearchModal && cy && (_jsx(TreeViewSearch, { struct: struct, cy: cy, onClose: closeSearchModal, searchCriteria: searchCriteria, setSearchCriteria: setSearchCriteria })), _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))), struct.parsed && (_jsxs("span", { className: "date", children: [t('date.parsed'), ' ', DateUtils.formatDateTime(struct.parsed, 'dd/MM/yyyy HH:mm:ss')] }))] }))] }));
+                        Object.entries(translations).map(([k, v]) => (_jsxs("div", { className: "translation", children: [_jsxs("b", { children: [k, ":"] }), _jsx("span", { children: v })] }, k))), struct.parsed && (_jsxs("span", { className: "date", children: [t("date.parsed"), " ", DateUtils.formatDateTime(struct.parsed, "dd/MM/yyyy HH:mm:ss")] }))] }))] }));
 }
 const getButtons = (generateImage, reset, downloadPsd, toggleInfo, onExpand, expression, openSearchModal) => [
     {
         condition: true,
-        title: 'button.download.tree',
+        title: "button.download.tree",
         onClick: generateImage,
-        icon: 'download',
+        icon: "download",
     },
     {
         condition: true,
-        title: 'button.recenter.tree',
+        title: "button.recenter.tree",
         onClick: reset,
-        icon: 'fullscreen',
+        icon: "fullscreen",
     },
     {
         condition: !!expression,
-        title: 'button.download.penn',
+        title: "button.download.penn",
         onClick: downloadPsd,
-        icon: 'graph_4',
+        icon: "graph_4",
     },
     {
         condition: !!onExpand,
-        title: 'button.expand.tree',
+        title: "button.expand.tree",
         onClick: onExpand || (() => { }),
-        icon: 'open_in_full',
+        icon: "open_in_full",
     },
     {
         condition: true,
-        title: 'button.info',
+        title: "button.info",
         onClick: toggleInfo,
-        icon: 'info',
+        icon: "info",
     },
     {
         condition: true,
-        title: 'button.search',
+        title: "button.search",
         onClick: openSearchModal || (() => { }),
-        icon: 'search',
+        icon: "search",
     },
 ];

package/package.json

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