diff --git a/desktop/plugins/sections/src/Tree.tsx b/desktop/plugins/sections/src/Tree.tsx index ddef0f8c6..e5029b8c2 100644 --- a/desktop/plugins/sections/src/Tree.tsx +++ b/desktop/plugins/sections/src/Tree.tsx @@ -82,6 +82,7 @@ type TreeData = Array<{ type Props = { data: TreeData | SectionComponentHierarchy; nodeClickHandler: (node: any) => void; + selectedNodeIndexPath?: number[]; }; type State = { @@ -192,7 +193,20 @@ export default class extends PureComponent { }); // find the root node - return tree.find((node) => !node.attributes.parent); + const root = tree.find((node) => !node.attributes.parent); + + // Highlight the selected node + if (this.props.selectedNodeIndexPath && root) { + let cursor = root; + this.props.selectedNodeIndexPath.forEach((idx) => { + cursor = cursor.children[idx]; + }); + cursor.nodeSvgShape.shapeProps.strokeWidth = 2; + cursor.nodeSvgShape.shapeProps.stroke = colors.red; + cursor.nodeSvgShape.shapeProps.fill = colors.redTint; + } + + return root; }; treeFromHierarchy = (data: SectionComponentHierarchy): Object => { diff --git a/desktop/plugins/sections/src/index.tsx b/desktop/plugins/sections/src/index.tsx index 56d8fe1ee..2508f2a49 100644 --- a/desktop/plugins/sections/src/index.tsx +++ b/desktop/plugins/sections/src/index.tsx @@ -270,6 +270,7 @@ export function Component() { generation={focusedTreeGeneration} focusedChangeSet={focusedChangeSet} setSelectedTreeNode={setSelectedTreeNode} + selectedNodeIndexPath={focusInfo?.treeNodeIndexPath} /> {focusedTreeGeneration && ( @@ -308,6 +309,7 @@ function TreeHierarchy({ generation, focusedChangeSet, setSelectedTreeNode, + selectedNodeIndexPath, }: { generation: TreeGeneration | null; focusedChangeSet: @@ -315,6 +317,7 @@ function TreeHierarchy({ | null | undefined; setSelectedTreeNode: (node: any) => void; + selectedNodeIndexPath?: number[]; }) { const onNodeClicked = useMemo( () => (targetNode: any) => { @@ -342,13 +345,20 @@ function TreeHierarchy({ if (generation && generation.tree && generation.tree.length > 0) { // Display component tree hierarchy, if any - return ; + return ( + + ); } else if (focusedChangeSet && focusedChangeSet.section_component_hierarchy) { // Display section component hierarchy for specific changeset return ( ); } else {