tycho-components 0.3.7 → 0.4.0

package/dist/TreeView/TreeView.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { faDiagramProject, faDownload, faExpand, faInfoCircle, faUpRightAndDownLeftFromCenter, } from '@fortawesome/free-solid-svg-icons';
+import { faDiagramProject, faDownload, faExpand, faInfoCircle, faMagnifyingGlass, faUpRightAndDownLeftFromCenter, } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { saveAs } from 'file-saver';
 import html2canvas from 'html2canvas';
@@ -8,6 +8,7 @@ import { useTranslation } from 'react-i18next';
 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';
@@ -16,6 +17,13 @@ export default function TreeView({ struct, expression, selector = 'canvas-tree',
     const [cy, setCy] = useState(null);
     const [showInfo, setShowInfo] = useState(renderWithInfo);
     const [invalid, setInvalid] = useState();
+    const [showSearchModal, setShowSearchModal] = useState(false);
+    const [searchCriteria, setSearchCriteria] = useState({
+        syntacticCategory: [],
+        posTag: [],
+        emptyCategory: [],
+        wordValue: [],
+    });
     const load = () => {
         setCy(null);
         const element = document.getElementById(selector);
@@ -96,6 +104,12 @@ export default function TreeView({ struct, expression, selector = 'canvas-tree',
         setShowInfo(newVal);
         applyInfo(cy, struct, newVal);
     };
+    const openSearchModal = () => {
+        setShowSearchModal(true);
+    };
+    const closeSearchModal = () => {
+        setShowSearchModal(false);
+    };
     useEffect(() => {
         setInvalid(undefined);
         load();
@@ -104,15 +118,15 @@ export default function TreeView({ struct, expression, selector = 'canvas-tree',
         return (_jsx(AppPlaceholder, { text: placeholder || t('placeholder.sentence.notparsed') }));
     }
     return (_jsxs("div", { className: "tree-view-container", children: [cy &&
-                getButtons(generateImage, reset, onClickExpression || downloadPsd, toggleInfo, onExpand, expression)
+                getButtons(generateImage, reset, onClickExpression || downloadPsd, toggleInfo, onExpand, expression, openSearchModal)
                     .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 &&
+                }), 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')] }))] }))] }));
 }
-const getButtons = (generateImage, reset, downloadPsd, toggleInfo, onExpand, expression) => [
+const getButtons = (generateImage, reset, downloadPsd, toggleInfo, onExpand, expression, openSearchModal) => [
     {
         condition: true,
         title: 'button.download.tree',
@@ -144,4 +158,10 @@ const getButtons = (generateImage, reset, downloadPsd, toggleInfo, onExpand, exp
         onClick: toggleInfo,
         icon: faInfoCircle,
     },
+    {
+        condition: true,
+        title: 'button.search',
+        onClick: openSearchModal || (() => { }),
+        icon: faMagnifyingGlass,
+    },
 ];

package/dist/TreeView/TreeViewSearch/TreeViewSearch.d.ts

@@ -0,0 +1,18 @@
+import { Core } from 'cytoscape';
+import { Struct } from '../../configs/types/Struct';
+import './style.scss';
+export type SearchCriteria = {
+    syntacticCategory: string[];
+    posTag: string[];
+    emptyCategory: string[];
+    wordValue: string[];
+};
+type Props = {
+    struct: Struct;
+    cy: Core;
+    onClose: () => void;
+    searchCriteria: SearchCriteria;
+    setSearchCriteria: React.Dispatch<React.SetStateAction<SearchCriteria>>;
+};
+export default function TreeViewSearch({ struct, cy, onClose, searchCriteria, setSearchCriteria, }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/TreeView/TreeViewSearch/TreeViewSearch.js

@@ -0,0 +1,103 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import AppModal from '../../AppModal';
+import TreeViewSearchField from './TreeViewSearchField';
+import './style.scss';
+export default function TreeViewSearch({ struct, cy, onClose, searchCriteria, setSearchCriteria, }) {
+    const { t } = useTranslation('tree');
+    const [inputValues, setInputValues] = useState({
+        syntacticCategory: '',
+        posTag: '',
+        emptyCategory: '',
+        wordValue: '',
+    });
+    const addBadge = (type) => {
+        const value = inputValues[type].trim();
+        if (!value)
+            return;
+        setSearchCriteria((prev) => ({
+            ...prev,
+            [type]: [...prev[type], value],
+        }));
+        setInputValues((prev) => ({
+            ...prev,
+            [type]: '',
+        }));
+    };
+    const removeBadge = (type, index) => {
+        setSearchCriteria((prev) => ({
+            ...prev,
+            [type]: prev[type].filter((_, i) => i !== index),
+        }));
+    };
+    const performSearch = () => {
+        if (!cy || !struct)
+            return;
+        // Remove previous highlights
+        cy.nodes().removeClass('highlight');
+        cy.nodes().forEach((node) => {
+            const data = node.data();
+            // Check syntactic category (chunks)
+            if (data.chunk && searchCriteria.syntacticCategory.length > 0) {
+                const chunkCategory = data.chunk.t || '';
+                if (searchCriteria.syntacticCategory.some((cat) => chunkCategory.toLowerCase().includes(cat.toLowerCase()))) {
+                    node.addClass('highlight');
+                }
+            }
+            // Check POS tag (tokens)
+            if (data.token && searchCriteria.posTag.length > 0) {
+                const posTag = data.token.t || '';
+                if (searchCriteria.posTag.some((tag) => posTag.toLowerCase() === tag.toLowerCase() ||
+                    posTag.toLowerCase().includes(tag.toLowerCase()))) {
+                    node.addClass('highlight');
+                }
+            }
+            // Check empty category
+            if (data.token && searchCriteria.emptyCategory.length > 0) {
+                const isEmpty = data.token.ec === true;
+                const emptyValue = data.token.v;
+                if (searchCriteria.emptyCategory.some((ec) => {
+                    return ((emptyValue.toLowerCase() === ec.toLowerCase() ||
+                        emptyValue.toLowerCase().includes(ec.toLowerCase())) &&
+                        isEmpty);
+                })) {
+                    node.addClass('highlight');
+                }
+            }
+            // Check word value
+            if (data.token && searchCriteria.wordValue.length > 0) {
+                const wordValue = data.token.v || '';
+                if (searchCriteria.wordValue.some((val) => wordValue.toLowerCase().includes(val.toLowerCase()))) {
+                    node.addClass('highlight');
+                }
+            }
+        });
+        onClose();
+    };
+    const searchFields = [
+        {
+            key: 'syntacticCategory',
+            label: t('label.syntactic.category'),
+        },
+        {
+            key: 'posTag',
+            label: t('label.pos.tag'),
+        },
+        {
+            key: 'emptyCategory',
+            label: t('label.empty.category'),
+        },
+        {
+            key: 'wordValue',
+            label: t('label.word.value'),
+        },
+    ];
+    return (_jsx(AppModal, { title: t('button.search') || 'Search Tree', close: onClose, className: "tree-search-modal", confirm: performSearch, disableConfirm: searchCriteria.syntacticCategory.length === 0 &&
+            searchCriteria.posTag.length === 0 &&
+            searchCriteria.emptyCategory.length === 0 &&
+            searchCriteria.wordValue.length === 0, children: searchFields.map((field) => (_jsx(TreeViewSearchField, { label: field.label, value: inputValues[field.key], badges: searchCriteria[field.key], onValueChange: (value) => setInputValues((prev) => ({
+                ...prev,
+                [field.key]: value,
+            })), onAddBadge: () => addBadge(field.key), onRemoveBadge: (index) => removeBadge(field.key, index) }, field.key))) }));
+}

package/dist/TreeView/TreeViewSearch/TreeViewSearchField.d.ts

@@ -0,0 +1,11 @@
+import './style.scss';
+type Props = {
+    label: string;
+    value: string;
+    badges: string[];
+    onValueChange: (value: string) => void;
+    onAddBadge: () => void;
+    onRemoveBadge: (index: number) => void;
+};
+export default function TreeViewSearchField({ label, value, badges, onValueChange, onAddBadge, onRemoveBadge, }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/TreeView/TreeViewSearch/TreeViewSearchField.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation } from 'react-i18next';
+import './style.scss';
+import { Icon, IconButton, Tag } from 'tycho-storybook';
+export default function TreeViewSearchField({ label, value, badges, onValueChange, onAddBadge, onRemoveBadge, }) {
+    const { t } = useTranslation('tree');
+    const handleKeyPress = (e) => {
+        if (e.key === 'Enter') {
+            onAddBadge();
+        }
+    };
+    const renderTag = (value, idx) => {
+        return (_jsxs(_Fragment, { children: [_jsx("span", { children: value }), _jsx(Icon, { name: "close", size: "small", onClick: (e) => {
+                        onRemoveBadge(idx);
+                        e.stopPropagation();
+                    } })] }));
+    };
+    return (_jsxs("div", { className: "search-field", children: [_jsx("label", { children: label }), _jsxs("div", { className: "input-with-button", children: [_jsx("input", { type: "text", value: value, onChange: (e) => onValueChange(e.target.value), onKeyUp: handleKeyPress, placeholder: t('common:generic.placeholder') }), _jsx(IconButton, { onClick: onAddBadge, name: "add", size: "medium" })] }), _jsx("div", { className: "badges", children: badges.map((badge, index) => (_jsx(Tag, { text: renderTag(badge, index) }, index))) })] }));
+}

package/dist/TreeView/TreeViewSearch/style.scss

@@ -0,0 +1,49 @@
+.tree-search-modal {
+  .body {
+    min-width: 500px;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 24px;
+
+    .search-field {
+      margin-bottom: 0;
+
+      label {
+        display: block;
+        margin-bottom: 8px;
+        font-weight: 600;
+        color: var(--color-text-primary, #333);
+      }
+
+      .input-with-button {
+        display: flex;
+        gap: 8px;
+        margin-bottom: 8px;
+
+        input {
+          flex: 1;
+          padding: 8px 12px;
+          border: 1px solid var(--color-border-default, #ddd);
+          border-radius: var(--border-radius-button, 4px);
+          font-size: 14px;
+
+          &:focus {
+            outline: none;
+            border-color: var(--color-primary, #007bff);
+          }
+        }
+      }
+
+      .badges {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 8px;
+        margin-top: 8px;
+
+        .ds-icon {
+          cursor: pointer;
+        }
+      }
+    }
+  }
+}

package/dist/TreeView/style.scss

@@ -61,4 +61,121 @@
       color: red;
     }
   }
+
+  .tree-search-modal {
+    padding: 16px;
+    min-width: 500px;
+
+    .search-field {
+      margin-bottom: 24px;
+
+      label {
+        display: block;
+        margin-bottom: 8px;
+        font-weight: 600;
+        color: var(--color-text-primary, #333);
+      }
+
+      .input-with-button {
+        display: flex;
+        gap: 8px;
+        margin-bottom: 8px;
+
+        input {
+          flex: 1;
+          padding: 8px 12px;
+          border: 1px solid var(--color-border-default, #ddd);
+          border-radius: var(--border-radius-button, 4px);
+          font-size: 14px;
+
+          &:focus {
+            outline: none;
+            border-color: var(--color-primary, #007bff);
+          }
+        }
+
+        .add-badge-btn {
+          padding: 8px 16px;
+          background-color: var(--color-primary, #007bff);
+          color: white;
+          border: none;
+          border-radius: var(--border-radius-button, 4px);
+          cursor: pointer;
+          font-size: 14px;
+          white-space: nowrap;
+
+          &:hover {
+            background-color: var(--color-primary-dark, #0056b3);
+          }
+        }
+      }
+
+      .badges {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 8px;
+        margin-top: 8px;
+
+        .badge {
+          display: inline-flex;
+          align-items: center;
+          gap: 6px;
+          padding: 4px 12px;
+          background-color: var(--color-surface-secondary, #f0f0f0);
+          border: 1px solid var(--color-border-default, #ddd);
+          border-radius: 16px;
+          font-size: 13px;
+          color: var(--color-text-primary, #333);
+
+          .badge-remove {
+            cursor: pointer;
+            font-size: 12px;
+            color: var(--color-text-secondary, #666);
+            transition: color 0.2s;
+
+            &:hover {
+              color: var(--color-danger, #dc3545);
+            }
+          }
+        }
+      }
+    }
+
+    .search-actions {
+      display: flex;
+      justify-content: flex-end;
+      margin-top: 24px;
+      padding-top: 16px;
+      border-top: 1px solid var(--color-border-default, #ddd);
+
+      .search-btn {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 10px 20px;
+        background-color: var(--color-primary, #007bff);
+        color: white;
+        border: none;
+        border-radius: var(--border-radius-button, 4px);
+        cursor: pointer;
+        font-size: 14px;
+        font-weight: 600;
+
+        &:hover:not(:disabled) {
+          background-color: var(--color-primary-dark, #0056b3);
+        }
+
+        &:disabled {
+          background-color: var(--color-disabled, #ccc);
+          cursor: not-allowed;
+          opacity: 0.6;
+        }
+
+        svg {
+          width: 16px;
+          height: 16px;
+        }
+      }
+    }
+  }
 }

package/dist/configs/Localization.d.ts

@@ -157,6 +157,11 @@ export declare const commonResources: {
             'button.info': string;
             'placeholder.sentence.notparsed': string;
             'date.parsed': string;
+            'button.search': string;
+            'label.syntactic.category': string;
+            'label.pos.tag': string;
+            'label.empty.category': string;
+            'label.word.value': string;
         };
         sentence: {
             'label.word': string;
@@ -406,6 +411,11 @@ export declare const commonResources: {
             'button.info': string;
             'placeholder.sentence.notparsed': string;
             'date.parsed': string;
+            'button.search': string;
+            'label.syntactic.category': string;
+            'label.pos.tag': string;
+            'label.empty.category': string;
+            'label.word.value': string;
         };
         upload: {
             'label.dropzone': string;
@@ -638,6 +648,11 @@ export declare const commonResources: {
             'button.download.penn': string;
             'button.info': string;
             'date.parsed': string;
+            'button.search': string;
+            'label.syntactic.category': string;
+            'label.pos.tag': string;
+            'label.empty.category': string;
+            'label.word.value': string;
         };
         upload: {
             'label.dropzone': string;

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

@@ -7,6 +7,11 @@ export declare const TreeTexts: {
         'button.info': string;
         'placeholder.sentence.notparsed': string;
         'date.parsed': string;
+        'button.search': string;
+        'label.syntactic.category': string;
+        'label.pos.tag': string;
+        'label.empty.category': string;
+        'label.word.value': string;
     };
     'pt-BR': {
         'button.expand.tree': string;
@@ -16,6 +21,11 @@ export declare const TreeTexts: {
         'button.info': string;
         'placeholder.sentence.notparsed': string;
         'date.parsed': string;
+        'button.search': string;
+        'label.syntactic.category': string;
+        'label.pos.tag': string;
+        'label.empty.category': string;
+        'label.word.value': string;
     };
     it: {
         'button.expand.tree': string;
@@ -24,5 +34,10 @@ export declare const TreeTexts: {
         'button.download.penn': string;
         'button.info': string;
         'date.parsed': string;
+        'button.search': string;
+        'label.syntactic.category': string;
+        'label.pos.tag': string;
+        'label.empty.category': string;
+        'label.word.value': string;
     };
 };

package/dist/configs/localization/TreeTexts.js

@@ -7,6 +7,11 @@ export const TreeTexts = {
         'button.info': 'Display translations and glosses',
         'placeholder.sentence.notparsed': 'This sentence has not been parsed.',
         'date.parsed': 'Parsing executed at:',
+        'button.search': 'Search',
+        'label.syntactic.category': 'Syntactic Category',
+        'label.pos.tag': 'POS Tag',
+        'label.empty.category': 'Empty Category',
+        'label.word.value': 'Word',
     },
     'pt-BR': {
         'button.expand.tree': 'Expandir árvore',
@@ -16,6 +21,11 @@ export const TreeTexts = {
         'button.info': 'Mostrar traduções e glosas',
         'placeholder.sentence.notparsed': 'O parser não foi realizado nesta sentença.',
         'date.parsed': 'Parser executado às:',
+        'button.search': 'Buscar',
+        'label.syntactic.category': 'Categoria Sintática',
+        'label.pos.tag': 'Etiqueta POS',
+        'label.empty.category': 'Categoria Vazia',
+        'label.word.value': 'Palavra',
     },
     it: {
         'button.expand.tree': 'Espandi albero',
@@ -24,5 +34,10 @@ export const TreeTexts = {
         'button.download.penn': 'Scarica in formato Penn Tree',
         'button.info': 'Visualizza traduzioni e glosse',
         'date.parsed': 'Parser eseguito alle:',
+        'button.search': 'Cerca',
+        'label.syntactic.category': 'Categoria Sintattica',
+        'label.pos.tag': 'Etichetta POS',
+        'label.empty.category': 'Categoria Vuota',
+        'label.word.value': 'Parola',
     },
 };

package/package.json

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