tycho-components 0.2.3-SNAPSHOT-6 → 0.2.3-SNAPSHOT-7

package/dist/TreeView/TreeView.d.ts

@@ -7,9 +7,9 @@ type Props = {
     selector?: string;
     translations?: Record<string, string>;
     wheelSensitivity?: number;
-    onRenderShowInfo?: boolean;
+    renderWithInfo?: boolean;
     onExpand?: () => void;
-    onReady?: (thisCy: Core) => void;
+    onReadyCustom?: (thisCy: Core) => void;
 };
-export default function TreeView({ struct, expression, selector, translations, wheelSensitivity, onRenderShowInfo, onExpand, onReady, }: Props): import("react/jsx-runtime").JSX.Element;
+export default function TreeView({ struct, expression, selector, translations, wheelSensitivity, renderWithInfo, onExpand, onReadyCustom, }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/TreeView/TreeView.js

@@ -10,10 +10,10 @@ import SentenceUtils from '../functions/SentenceUtils';
 import CytoscapeTreeConverter from './cytoscape/CytoscapeTreeConverter';
 import SyntreesCytoscape from './cytoscape/SyntreesCytoscape';
 import './style.scss';
-export default function TreeView({ struct, expression, selector = 'canvas-tree', translations, wheelSensitivity, onRenderShowInfo = false, onExpand, onReady, }) {
+export default function TreeView({ struct, expression, selector = 'canvas-tree', translations, wheelSensitivity, renderWithInfo = false, onExpand, onReadyCustom, }) {
     const { t } = useTranslation('tree');
     const [cy, setCy] = useState(null);
-    const [showInfo, setShowInfo] = useState(onRenderShowInfo);
+    const [showInfo, setShowInfo] = useState(renderWithInfo);
     const [invalid, setInvalid] = useState();
     const load = () => {
         setCy(null);
@@ -40,8 +40,8 @@ export default function TreeView({ struct, expression, selector = 'canvas-tree',
             wheelSensitivity,
             onReady: (thisCy) => {
                 setCy(thisCy);
-                onReady && onReady(thisCy);
-                onRenderShowInfo && displayInfo();
+                onReadyCustom && onReadyCustom(thisCy);
+                renderWithInfo && applyInfo(thisCy, struct, true);
             },
         });
     };
@@ -64,19 +64,22 @@ export default function TreeView({ struct, expression, selector = 'canvas-tree',
             }, 200);
         }
     };
-    const displayInfo = () => {
-        if (!cy || !struct)
-            return;
-        const newVal = !showInfo;
-        setShowInfo(newVal);
+    const applyInfo = (thisCy, struct, extraInfo) => {
         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);
+                const newLabel = new CytoscapeTreeConverter().getLabelLeaf.call({ extraInfo }, token);
+                thisCy.$id(leafId).data('label', newLabel);
             }
         });
     };
+    const toggleInfo = () => {
+        if (!cy || !struct)
+            return;
+        const newVal = !showInfo;
+        setShowInfo(newVal);
+        applyInfo(cy, struct, newVal);
+    };
     useEffect(() => {
         setInvalid(undefined);
         load();
@@ -85,7 +88,7 @@ export default function TreeView({ struct, expression, selector = 'canvas-tree',
         return _jsx(AppPlaceholder, { text: t('placeholder.sentence.notparsed') });
     }
     return (_jsxs("div", { className: "tree-view-container", children: [cy &&
-                getButtons(generateImage, reset, downloadPsd, displayInfo, onExpand, expression)
+                getButtons(generateImage, reset, downloadPsd, toggleInfo, onExpand, expression)
                     .filter((btn) => btn.condition)
                     .map((btn, i) => {
                     const right = 12 + i * 44;
@@ -93,7 +96,7 @@ export default function TreeView({ struct, expression, selector = 'canvas-tree',
                 }), _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')] }))] }))] }));
 }
-const getButtons = (generateImage, reset, downloadPsd, displayInfo, onExpand, expression) => [
+const getButtons = (generateImage, reset, downloadPsd, toggleInfo, onExpand, expression) => [
     {
         condition: true,
         title: 'button.download.tree',
@@ -122,7 +125,7 @@ const getButtons = (generateImage, reset, downloadPsd, displayInfo, onExpand, ex
     {
         condition: true,
         title: 'button.info',
-        onClick: displayInfo,
+        onClick: toggleInfo,
         icon: faInfoCircle,
     },
 ];

package/package.json

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