diff --git a/application/frontend/src/pages/Explorer/explorer.scss b/application/frontend/src/pages/Explorer/explorer.scss index 9d94aab22..d910690e8 100644 --- a/application/frontend/src/pages/Explorer/explorer.scss +++ b/application/frontend/src/pages/Explorer/explorer.scss @@ -21,19 +21,40 @@ main#explorer-content { color: #0056b3; } - .search-field { - input { - font-size: 16px; - height: 32px; - width: 320px; + .search-field { + input { + font-size: 16px; + height: 32px; + width: 320px; margin-bottom: 10px; border-radius: 3px; border: 1px solid #858585; padding: 0 5px; color: #333333; - background-color: #ffffff; - } - } + background-color: #ffffff; + } + } + + .tree-actions { + display: flex; + gap: 10px; + margin-bottom: 14px; + + button { + height: 34px; + padding: 0 12px; + border: 1px solid #b1b0b0; + border-radius: 4px; + background: #ffffff; + color: #1a202c; + cursor: pointer; + font-size: 14px; + + &:hover { + background: #f4f6f8; + } + } + } #graphs-menu { display: flex; @@ -150,16 +171,20 @@ main#explorer-content { padding: 1rem; /* Reduce from 30px to prevent content touching edges */ - .search-field { - input { - width: 100%; - /* Expand from fixed 320px - overflows on small screens */ - } - } - - .item { - margin: 4px 4px 4px 1rem; - /* Reduce from 40px left margin on mobile */ + .search-field { + input { + width: 100%; + /* Expand from fixed 320px - overflows on small screens */ + } + } + + .tree-actions { + flex-wrap: wrap; + } + + .item { + margin: 4px 4px 4px 1rem; + /* Reduce from 40px left margin on mobile */ } } -} \ No newline at end of file +} diff --git a/application/frontend/src/pages/Explorer/explorer.tsx b/application/frontend/src/pages/Explorer/explorer.tsx index 64bee6566..a54e484c2 100644 --- a/application/frontend/src/pages/Explorer/explorer.tsx +++ b/application/frontend/src/pages/Explorer/explorer.tsx @@ -65,6 +65,32 @@ export const Explorer = () => { } }; + const collectExpandableIds = (nodes: TreeDocument[] = []): string[] => { + const ids: string[] = []; + + const visit = (node: TreeDocument | null) => { + if (!node) { + return; + } + const contains = (node.links || []).filter((link) => link.ltype === TYPE_CONTAINS); + if (contains.length > 0) { + ids.push(node.id); + contains.forEach((child) => visit(child.document)); + } + }; + + nodes.forEach((node) => visit(node)); + return ids; + }; + + const collapseAll = () => { + setCollapsedItems(collectExpandableIds(filteredTree || [])); + }; + + const expandAll = () => { + setCollapsedItems([]); + }; + useEffect(() => { if (dataTree.length) { const treeCopy = structuredClone(dataTree); @@ -136,11 +162,7 @@ export const Explorer = () => {

Open CRE Explorer

A visual explorer of Open Common Requirement Enumerations (CREs). Originally created by:{' '} - + Zeljko Obrenovic . @@ -151,6 +173,14 @@ export const Explorer = () => {

+
+ + +

Explore visually: