1- import { useState , useEffect , Fragment } from ' react' ;
2- import Xarrow , { Xwrapper } from ' react-xarrows' ;
3- import styles from ' ./styles.module.css' ;
4- import Heading from ' @theme/Heading' ;
1+ import { useState , useEffect , Fragment } from " react" ;
2+ import Xarrow , { Xwrapper } from " react-xarrows" ;
3+ import styles from " ./styles.module.css" ;
4+ import Heading from " @theme/Heading" ;
55export default function TreeVisualization ( ) {
6- const [ array , setArray ] = useState ( ' 1,2,3,4,5,6,7' ) ;
7- const [ traversalType , setTraversalType ] = useState ( ' inorder' ) ;
6+ const [ array , setArray ] = useState ( " 1,2,3,4,5,6,7" ) ;
7+ const [ traversalType , setTraversalType ] = useState ( " inorder" ) ;
88 const [ activeNode , setActiveNode ] = useState ( null ) ;
99 const [ activePath , setActivePath ] = useState ( null ) ;
1010 const [ traversalSteps , setTraversalSteps ] = useState ( [ ] ) ;
@@ -14,9 +14,9 @@ export default function TreeVisualization() {
1414
1515 const generateTree = ( input ) => {
1616 const values = input
17- . split ( ',' )
17+ . split ( "," )
1818 . map ( ( v ) => v . trim ( ) )
19- . filter ( ( v ) => v !== '' )
19+ . filter ( ( v ) => v !== "" )
2020 . map ( Number ) ;
2121 const n = values . length ;
2222 if ( n === 0 ) return [ ] ;
@@ -27,9 +27,9 @@ export default function TreeVisualization() {
2727 const numNodesInLevel = Math . pow ( 2 , level ) ;
2828 const x = ( ( posInLevel + 0.5 ) / numNodesInLevel ) * 100 ;
2929 const y = height > 1 ? ( level / ( height - 1 ) ) * 90 + 5 : 50 ;
30- let language = ' javascript' ;
31- if ( level === 0 ) language = ' python' ;
32- else if ( level === height - 1 ) language = 'c' ;
30+ let language = " javascript" ;
31+ if ( level === 0 ) language = " python" ;
32+ else if ( level === height - 1 ) language = "c" ;
3333 let left = undefined ;
3434 let right = undefined ;
3535 if ( 2 * i + 1 < n ) left = values [ 2 * i + 1 ] ;
@@ -44,11 +44,11 @@ export default function TreeVisualization() {
4444 const traverse = ( nodeId ) => {
4545 const node = nodes . find ( ( n ) => n . id === nodeId ) ;
4646 if ( ! node ) return ;
47- if ( type === ' preorder' ) result . push ( node . id ) ;
47+ if ( type === " preorder" ) result . push ( node . id ) ;
4848 if ( node . left !== undefined ) traverse ( node . left ) ;
49- if ( type === ' inorder' ) result . push ( node . id ) ;
49+ if ( type === " inorder" ) result . push ( node . id ) ;
5050 if ( node . right !== undefined ) traverse ( node . right ) ;
51- if ( type === ' postorder' ) result . push ( node . id ) ;
51+ if ( type === " postorder" ) result . push ( node . id ) ;
5252 } ;
5353 if ( nodes . length > 0 ) {
5454 traverse ( nodes [ 0 ] . id ) ;
@@ -94,7 +94,7 @@ export default function TreeVisualization() {
9494 if ( ! node ) return styles . node ;
9595 const isActive = nodeId === activeNode ;
9696 return `${ styles . node } ${ styles [ `node-${ node . language } ] } ${
97- isActive ? styles . active : ''
97+ isActive ? styles . active : ""
9898 } `;
9999 } ;
100100
@@ -104,18 +104,18 @@ export default function TreeVisualization() {
104104 const childNode = tree . find ( ( n ) => n . id === toId ) ;
105105 if ( childNode ) {
106106 switch ( childNode . language ) {
107- case ' python'
108- return ' blue' ;
109- case ' javascript'
110- return ' yellow' ;
111- case 'c' :
112- return ' red' ;
107+ case " python"
108+ return " blue" ;
109+ case " javascript"
110+ return " yellow" ;
111+ case "c" :
112+ return " red" ;
113113 default :
114- return ' black' ;
114+ return " black" ;
115115 }
116116 }
117117 }
118- return ' black' ;
118+ return " black" ;
119119 } ;
120120
121121 return (
@@ -124,11 +124,11 @@ export default function TreeVisualization() {
124124 < Heading as = "h1" > Binary Tree Traversal Visualizer</ Heading >
125125 < p >
126126 This interactive tool demonstrates how binary tree traversals work.
127- The < span className = { styles [ ' blue-text' ] } > blue</ span > node is the root
127+ The < span className = { styles [ " blue-text" ] } > blue</ span > node is the root
128128 (Python),
129- < span className = { styles [ ' yellow-text' ] } > yellow</ span > nodes are
130- intermediate (JavaScript), and the{ ' ' }
131- < span className = { styles [ ' red-text' ] } > red</ span > nodes are leaves (C).
129+ < span className = { styles [ " yellow-text" ] } > yellow</ span > nodes are
130+ intermediate (JavaScript), and the{ " " }
131+ < span className = { styles [ " red-text" ] } > red</ span > nodes are leaves (C).
132132 Click "Execute Traversal" to see the animated traversal sequence.
133133 </ p >
134134 </ div >
@@ -161,7 +161,7 @@ export default function TreeVisualization() {
161161 </ button >
162162 </ div >
163163
164- < div className = { styles [ ' tree-container' ] } >
164+ < div className = { styles [ " tree-container" ] } >
165165 < Xwrapper >
166166 { tree . map ( ( node ) => (
167167 < Fragment key = { node . id } >
@@ -208,26 +208,26 @@ export default function TreeVisualization() {
208208 </ div >
209209
210210 < div className = { styles . sequence } >
211- < div className = { styles [ ' sequence-text' ] } >
212- Traversal Sequence:{ ' ' }
213- < span > { traversalSteps . slice ( 0 , currentStep + 1 ) . join ( ' → ' ) } </ span >
211+ < div className = { styles [ " sequence-text" ] } >
212+ Traversal Sequence:{ " " }
213+ < span > { traversalSteps . slice ( 0 , currentStep + 1 ) . join ( " → " ) } </ span >
214214 </ div >
215215 < div className = { styles . legend } >
216- < div className = { styles [ ' legend-item' ] } >
216+ < div className = { styles [ " legend-item" ] } >
217217 < div
218- className = { `${ styles [ ' legend-dot' ] } ${ styles [ ' legend-dot-python' ] } }
218+ className = { `${ styles [ " legend-dot" ] } ${ styles [ " legend-dot-python" ] } }
219219 > </ div >
220220 < span > Python (Root)</ span >
221221 </ div >
222- < div className = { styles [ ' legend-item' ] } >
222+ < div className = { styles [ " legend-item" ] } >
223223 < div
224- className = { `${ styles [ ' legend-dot' ] } ${ styles [ ' legend-dot-javascript' ] } }
224+ className = { `${ styles [ " legend-dot" ] } ${ styles [ " legend-dot-javascript" ] } }
225225 > </ div >
226226 < span > JavaScript (Middle)</ span >
227227 </ div >
228- < div className = { styles [ ' legend-item' ] } >
228+ < div className = { styles [ " legend-item" ] } >
229229 < div
230- className = { `${ styles [ ' legend-dot' ] } ${ styles [ ' legend-dot-c' ] } }
230+ className = { `${ styles [ " legend-dot" ] } ${ styles [ " legend-dot-c" ] } }
231231 > </ div >
232232 < span > C (Leaf)</ span >
233233 </ div >
0 commit comments