Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

CSCFC4EMSCR-616 Remove generated root node from UI #235

Merged
merged 2 commits into from
Nov 25, 2024
Merged

CSCFC4EMSCR-616 Remove generated root node from UI #235

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
eb151ec
CSCFC4EMSCR-616 Construct tree without extra ROOT node
maariaw Nov 13, 2024
a5a961e
CSCFC4EMSCR-616 Change expanding behavior of schema tree
maariaw Nov 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 5 additions & 18 deletions mscr-ui/src/common/components/schema-info/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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) {
Expand All @@ -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([]);
}

Expand All @@ -148,7 +135,7 @@ export default function SchemaInfo(props: {

const handleExpandClick = () => {
if (treeExpandedArray.length === 0) {
setPartlyExpanded();
setFullyExpanded();
} else {
setTreeExpandedArray([]);
}
Expand Down Expand Up @@ -321,7 +308,7 @@ export default function SchemaInfo(props: {
>
{isTreeDataFetched && (
<SchemaTree
nodes={treeData[0]}
nodes={treeData}
treeSelectedArray={treeSelectedArray}
treeExpanded={treeExpandedArray}
performTreeAction={performCallbackFromTreeAction}
Expand Down
13 changes: 2 additions & 11 deletions mscr-ui/src/common/components/schema-info/schema-tree/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ export default function SchemaTree({
showQname,
isSourceTree,
}: {
nodes: RenderTree;
nodes: RenderTree[];
treeSelectedArray: string[];
treeExpanded: string[];
performTreeAction: (action: string, nodeIds: string[]) => void;
Expand Down Expand Up @@ -78,16 +78,7 @@ export default function SchemaTree({
defaultExpandIcon={<ChevronRightIcon />}
multiSelect
>
<TreeItem
key={nodes.visualTreeId}
nodeId={nodes.id}
label={nodes.name}
className="linked-tree-item"
>
{Array.isArray(nodes.children)
? nodes.children.map((node: RenderTree) => toTree(node, showQname))
: null}
</TreeItem>
{nodes.map((node: RenderTree) => toTree(node, showQname))}
</TreeView>
);
}
239 changes: 8 additions & 231 deletions mscr-ui/src/common/components/schema-info/schema-tree/schema-tree-renderer/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,211 +1,4 @@
import {RenderTree, RenderTreeOld} from '@app/common/interfaces/crosswalk-connection.interface';

// export default function MockupSchemaLoader(emptyTemplate: boolean): Promise<RenderTree[] | undefined> {
//
// 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;

Expand All @@ -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'],
Expand All @@ -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<RenderTree[]>((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};
}
Loading