From eb151ecbcf00cc01ebfa2491bf5aa4dba253c794 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maaria=20Wahlstr=C3=B6m?= Date: Wed, 13 Nov 2024 14:39:01 +0200 Subject: [PATCH 1/2] CSCFC4EMSCR-616 Construct tree without extra ROOT node --- .../common/components/schema-info/index.tsx | 2 +- .../schema-info/schema-tree/index.tsx | 13 +- .../schema-tree-renderer/index.tsx | 239 +----------------- 3 files changed, 11 insertions(+), 243 deletions(-) diff --git a/mscr-ui/src/common/components/schema-info/index.tsx b/mscr-ui/src/common/components/schema-info/index.tsx index b6baff4ce..4c5b3a07c 100644 --- a/mscr-ui/src/common/components/schema-info/index.tsx +++ b/mscr-ui/src/common/components/schema-info/index.tsx @@ -321,7 +321,7 @@ export default function SchemaInfo(props: { > {isTreeDataFetched && ( void; @@ -78,16 +78,7 @@ export default function SchemaTree({ defaultExpandIcon={} multiSelect > - - {Array.isArray(nodes.children) - ? nodes.children.map((node: RenderTree) => toTree(node, showQname)) - : null} - + {nodes.map((node: RenderTree) => toTree(node, showQname))} ); } diff --git a/mscr-ui/src/common/components/schema-info/schema-tree/schema-tree-renderer/index.tsx b/mscr-ui/src/common/components/schema-info/schema-tree/schema-tree-renderer/index.tsx index b7fc8b64b..f346c78eb 100644 --- a/mscr-ui/src/common/components/schema-info/schema-tree/schema-tree-renderer/index.tsx +++ b/mscr-ui/src/common/components/schema-info/schema-tree/schema-tree-renderer/index.tsx @@ -1,211 +1,4 @@ -import {RenderTree, RenderTreeOld} from '@app/common/interfaces/crosswalk-connection.interface'; - -// export default function MockupSchemaLoader(emptyTemplate: boolean): Promise { -// -// let allTreeNodes: RenderTreeOld[] = []; -// -// let currentTreeNode: RenderTreeOld = { -// idNumeric: 0, -// id: '0', -// name: '', -// isLinked: false, -// title: '', -// type: '', -// description: '', -// required: '', -// isMappable: '', -// parentName: '', -// jsonPath: '$schema', -// parentId: 0, -// children: [] -// }; -// -// let nodeId = 0; -// -// function increaseNodeNumber() { -// nodeId += 1; -// } -// -// function createTreeObject(object: string, value: string, parent: string, rootId: any, jsonPath: string) { -// currentTreeNode.jsonPath = jsonPath + '.' + object; -// currentTreeNode.idNumeric = nodeId; -// currentTreeNode.id = nodeId.toString(); -// currentTreeNode.parentId = rootId; -// currentTreeNode.name = object; -// currentTreeNode.title = value; -// currentTreeNode.parentName = parent; -// increaseNodeNumber(); -// } -// -// function walkJson(json_object: any, parent: any, rootId: number, jsonPath: string) { -// for (const obj in json_object) { -// if (typeof json_object[obj] === 'string') { -// //console.log(`leaf ${obj} = ${json_object[obj]}`); -// -// // OBJECT IS A LEAF LEVEL OBJECT -// currentTreeNode = { -// isLinked: false, -// idNumeric: 0, -// id: '0', -// name: '', -// title: '', -// type: 'string', -// description: '', -// required: '', -// parentId: 0, -// jsonPath, -// children: [] -// }; -// createTreeObject(obj, json_object[obj], parent, rootId, jsonPath); -// allTreeNodes.push(cloneDeep(currentTreeNode)); -// } else { -// // OBJECT HAS CHILDREN -// currentTreeNode = { -// isLinked: false, -// idNumeric: 0, -// id: '0', -// name: '', -// title: '', -// type: Array.isArray(json_object[obj]) ? 'array' : 'composite', -// description: '', -// required: '', -// parentId: 0, -// jsonPath, -// children: [] -// }; -// currentTreeNode.name = obj; -// currentTreeNode.parentName = parent; -// currentTreeNode.parentId = rootId; -// currentTreeNode.idNumeric = nodeId; -// currentTreeNode.id = nodeId.toString(); -// -// -// currentTreeNode.jsonPath = jsonPath + '.' + obj; -// increaseNodeNumber(); -// allTreeNodes.push(cloneDeep(currentTreeNode)); -// walkJson(json_object[obj], obj, nodeId - 1, currentTreeNode.jsonPath); -// } -// } -// return allTreeNodes; -// } -// -// -// function walkJsonOld(json_object: any, parent: any, rootId: number, jsonPath: string) { -// for (const obj in json_object) { -// if (typeof json_object[obj] === 'string') { -// //console.log(`leaf ${obj} = ${json_object[obj]}`); -// -// // OBJECT IS A LEAF LEVEL OBJECT -// currentTreeNode = { -// isLinked: false, -// idNumeric: 0, -// id: '0', -// name: '', -// title: '', -// type: 'string', -// description: '', -// required: '', -// parentId: 0, -// jsonPath, -// children: [] -// }; -// createTreeObject(obj, json_object[obj], parent, rootId, jsonPath); -// allTreeNodes.push(cloneDeep(currentTreeNode)); -// } else if (typeof json_object[obj] === 'boolean') { -// //console.log('!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! FOUND BOOLEAN', obj, json_object[obj], json_object); -// -// // OBJECT IS A LEAF LEVEL OBJECT -// currentTreeNode = { -// isLinked: false, -// idNumeric: 0, -// id: '0', -// name: '', -// title: '', -// type: json_object[obj].toString(), -// description: '', -// required: '', -// parentId: 0, -// jsonPath, -// children: [] -// }; -// createTreeObject(obj, json_object[obj], parent, rootId, jsonPath); -// allTreeNodes.push(cloneDeep(currentTreeNode)); -// } else { -// // OBJECT HAS CHILDREN -// currentTreeNode = { -// isLinked: false, -// idNumeric: 0, -// id: '0', -// name: '', -// title: '', -// type: Array.isArray(json_object[obj]) ? 'array' : 'composite', -// description: '', -// required: '', -// parentId: 0, -// jsonPath, -// children: [] -// }; -// currentTreeNode.name = obj; -// currentTreeNode.parentName = parent; -// currentTreeNode.parentId = rootId; -// currentTreeNode.idNumeric = nodeId; -// currentTreeNode.id = nodeId.toString(); -// -// -// currentTreeNode.jsonPath = jsonPath + '.' + obj; -// increaseNodeNumber(); -// allTreeNodes.push(cloneDeep(currentTreeNode)); -// walkJsonOld(json_object[obj], obj, nodeId - 1, currentTreeNode.jsonPath); -// } -// } -// return allTreeNodes; -// } -// -// function mergeAttributesToParent(inputNodes: RenderTreeOld[] | undefined) { -// if (inputNodes) { -// let outputNodes = inputNodes.map((parent: RenderTreeOld) => { -// if (parent.children) { -// let i = parent.children.length; -// while (i--) { -// // @ts-ignore -// if (parent.children[i] && parent.children[i].children.length > 0) { -// mergeAttributesToParent([parent.children[i]]); -// } -// if (parent.children[i].name === 'type') { -// parent.type = parent.children[i].title; -// //parent.children.splice(i, 1); -// } else if (parent.children[i].name === 'description') { -// parent.description = parent.children[i].title; -// //parent.children.splice(i, 1); -// } else if (parent.children[i].name === 'title') { -// parent.title = parent.children[i].title; -// //parent.children.splice(i, 1); -// } -// } -// } -// return parent; -// } -// ); -// return outputNodes; -// } -// } -// -// // Unused -// function reverseTreeChildren(inputNodes: RenderTreeOld[] | undefined) { -// if (inputNodes) { -// for (let i = 0; i < inputNodes.length; i += 1) { -// // @ts-ignore -// if (inputNodes[i].children.length > 1) { -// // @ts-ignore -// inputNodes[i].children = inputNodes[i].children.reverse() -// reverseTreeChildren(inputNodes[i].children); -// } -// } -// return inputNodes; -// } -// } -// } - +import { RenderTree } from '@app/common/interfaces/crosswalk-connection.interface'; let treeIndex = 0; @@ -217,14 +10,13 @@ function createRenderTree( ) { const retArray: RenderTree[] = []; for (const obj in input) { - treeIndex += 1; const newNode: RenderTree = { name: definitions[obj].title, qname: definitions[obj]?.qname ? definitions[obj]?.qname : 'empty', visualTreeId: treeIndex.toString(), id: obj.toString(), properties: definitions[obj], - elementPath: elementPath + '.' + obj.toString(), + elementPath: elementPath == '' ? obj.toString() : elementPath + '.' + obj.toString(), parentElementPath: elementPath, children: [], uri: definitions[obj]['@id'], @@ -234,48 +26,33 @@ function createRenderTree( //console.log('OBJ', obj, input[obj].keys, Object.keys(input[obj])); if (Object.keys(input[obj]).length > 0) { - // HAS CHILDREN + // HAS CHILDREN, OTHERWISE IS LEAF newNode.children = createRenderTree( input[obj], newNode.elementPath, definitions, idToNodeDictionary, ); - } else { - // IS LEAF } retArray.push(newNode); + treeIndex += 1; } return retArray; } export function generateTreeFromJson(jsonInput: any) { + // console.log('input-content-tree:', jsonInput.content.tree); const nodeIdToShallowNode: { [key: string]: RenderTree[] } = {}; - const treeRoot: RenderTree = { - name: 'ROOT', - qname: 'ROOT', - visualTreeId: '0', - id: 'ROOT', - properties: undefined, - uri: '', - elementPath: 'ROOT', - parentElementPath: undefined, - children: [], - }; - nodeIdToShallowNode['ROOT'] = [treeRoot]; const generatedTree = new Promise((resolve) => { const renderedTree = createRenderTree( jsonInput.content.tree, - 'ROOT', + '', jsonInput.content.definitions, nodeIdToShallowNode ); - const retTree: RenderTree[] = []; - treeRoot.children = renderedTree; - retTree.push(treeRoot); - // console.log('renderedTree', renderedTree); - resolve(retTree); + // console.log('renderedTree ', renderedTree); + resolve(renderedTree); }); return {generatedTree, nodeIdToShallowNode}; } From a5a961e9ed9d1546287f09d371441564e10ec5dc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maaria=20Wahlstr=C3=B6m?= Date: Thu, 21 Nov 2024 17:36:29 +0200 Subject: [PATCH 2/2] CSCFC4EMSCR-616 Change expanding behavior of schema tree --- .../common/components/schema-info/index.tsx | 21 ++++--------------- 1 file changed, 4 insertions(+), 17 deletions(-) diff --git a/mscr-ui/src/common/components/schema-info/index.tsx b/mscr-ui/src/common/components/schema-info/index.tsx index 4c5b3a07c..ef574a6f7 100644 --- a/mscr-ui/src/common/components/schema-info/index.tsx +++ b/mscr-ui/src/common/components/schema-info/index.tsx @@ -71,8 +71,6 @@ export default function SchemaInfo(props: { generatedTree.then((res) => { if (res) { setTreeDataOriginal(res); - // Expand tree when data is loaded - setPartlyExpanded(); setTreeData(res); setTreeDataFetched(true); setNodeIdToNodeDictionary(nodeIdToShallowNode); @@ -82,11 +80,6 @@ export default function SchemaInfo(props: { } }, [getSchemaDataIsSuccess, getSchemaData]); - // Expand tree when data is loaded - useEffect(() => { - setPartlyExpanded(); - }, [isTreeDataFetched]); - // Expand and select nodes when input changed (from mappings accordion) useEffect(() => { if (props.treeSelection) { @@ -108,22 +101,16 @@ export default function SchemaInfo(props: { setSelectedTreeNodes(selectedNodes); }, [treeSelectedArray, nodeIdToNodeDictionary]); - const setPartlyExpanded = () => { + const setFullyExpanded = () => { const nodeIdsToExpand: string[] = []; - treeData.forEach(({ children, id }) => { - if (children && children.length > 0) { - nodeIdsToExpand.push(id); - if (children.length === 1) { - nodeIdsToExpand.push(children[0].id); - } - } + Object.entries(nodeIdToNodeDictionary).map(([nodeId, node]) => { + if (node.some((n) => n.children.length > 0)) nodeIdsToExpand.push(nodeId); }); setTreeExpandedArray(nodeIdsToExpand); }; function clearTreeSearch() { setTreeSelectedArray([]); - setPartlyExpanded(); setSelectedTreeNodes([]); } @@ -148,7 +135,7 @@ export default function SchemaInfo(props: { const handleExpandClick = () => { if (treeExpandedArray.length === 0) { - setPartlyExpanded(); + setFullyExpanded(); } else { setTreeExpandedArray([]); }