1- import { alpha , Box , CircularProgress } from ' @mui/material' ;
2- import { Code } from ' @mui/icons-material' ;
3- import { ExpandMore , ChevronRight } from ' @mui/icons-material' ;
4- import React , { SyntheticEvent , useContext , useEffect , useState } from ' react' ;
1+ import { alpha , Box , CircularProgress } from " @mui/material" ;
2+ import { Code } from " @mui/icons-material" ;
3+ import { ExpandMore , ChevronRight } from " @mui/icons-material" ;
4+ import React , { SyntheticEvent , useContext , useEffect , useState } from " react" ;
55import {
66 createClient ,
77 getReferenceTypes ,
88 getReferences ,
99 getProperties ,
1010 getReferenceCount ,
1111 getAstNodeInfo ,
12- } from ' service/language-service' ;
13- import { AstNodeInfo , FileInfo , Range } from ' @thrift-generated' ;
14- import { FileIcon , RefIcon } from ' components/custom-icon/custom-icon' ;
15- import { TabName } from ' enums/tab-enum' ;
16- import { AppContext } from ' global-context/app-context' ;
17- import { getFileInfo } from ' service/project-service' ;
18- import * as SC from ' ./styled-components' ;
19- import { convertSelectionRangeToString } from ' utils/utils' ;
20- import { useRouter } from ' next/router' ;
21- import { RouterQueryType } from ' utils/types' ;
22- import { useTranslation } from ' react-i18next' ;
23- import { referenceTypeArray } from ' enums/entity-types' ;
12+ } from " service/language-service" ;
13+ import { AstNodeInfo , FileInfo , Range } from " @thrift-generated" ;
14+ import { FileIcon , RefIcon } from " components/custom-icon/custom-icon" ;
15+ import { TabName } from " enums/tab-enum" ;
16+ import { AppContext } from " global-context/app-context" ;
17+ import { getFileInfo } from " service/project-service" ;
18+ import * as SC from " ./styled-components" ;
19+ import { convertSelectionRangeToString } from " utils/utils" ;
20+ import { useRouter } from " next/router" ;
21+ import { RouterQueryType } from " utils/types" ;
22+ import { useTranslation } from " react-i18next" ;
23+ import { referenceTypeArray } from " enums/entity-types" ;
2424
2525export const InfoTree = ( ) : JSX . Element => {
2626 const { t } = useTranslation ( ) ;
2727 const router = useRouter ( ) ;
2828 const appCtx = useContext ( AppContext ) ;
2929
30- const [ astNodeInfo , setAstNodeInfo ] = useState < AstNodeInfo | undefined > ( undefined ) ;
30+ const [ astNodeInfo , setAstNodeInfo ] = useState < AstNodeInfo | undefined > (
31+ undefined ,
32+ ) ;
3133 const [ properties , setProperties ] = useState < Map < string , string > > ( new Map ( ) ) ;
3234 const [ refTypes , setRefTypes ] = useState < Map < string , number > > ( new Map ( ) ) ;
3335 const [ refCounts , setRefCounts ] = useState < Map < string , number > > ( new Map ( ) ) ;
3436 const [ refs , setRefs ] = useState < Map < string , AstNodeInfo [ ] > > ( new Map ( ) ) ;
35- const [ fileUsages , setFileUsages ] = useState < Map < string , FileInfo [ ] > > ( new Map ( ) ) ;
37+ const [ fileUsages , setFileUsages ] = useState < Map < string , FileInfo [ ] > > (
38+ new Map ( ) ,
39+ ) ;
3640 const [ loadComplete , setLoadComplete ] = useState < boolean > ( false ) ;
3741 const [ expandedTreeNodes , setExpandedTreeNodes ] = useState < string [ ] > ( [ ] ) ;
3842
3943 useEffect ( ( ) => {
4044 if ( ! appCtx . languageNodeId ) return ;
4145 setLoadComplete ( false ) ;
46+ setAstNodeInfo ( undefined ) ;
47+ let cancelled = false ;
4248 const init = async ( ) => {
4349 const fileInfo = await getFileInfo ( appCtx . projectFileId ) ;
50+ if ( cancelled ) return ;
4451
4552 createClient ( appCtx . workspaceId , fileInfo ?. type ) ;
46- const initAstNodeInfo = await getAstNodeInfo ( appCtx . languageNodeId as string ) ;
47- if ( ! initAstNodeInfo ) return ;
53+ const initAstNodeInfo = await getAstNodeInfo (
54+ appCtx . languageNodeId as string ,
55+ ) ;
56+ if ( ! initAstNodeInfo || cancelled ) return ;
4857
4958 const initProps = await getProperties ( initAstNodeInfo . id as string ) ;
50- const initRefTypes = await getReferenceTypes ( initAstNodeInfo . id as string ) ;
59+ const initRefTypes = await getReferenceTypes (
60+ initAstNodeInfo . id as string ,
61+ ) ;
5162 const initRefCounts : typeof refCounts = new Map ( ) ;
5263 const initRefs : typeof refs = new Map ( ) ;
5364 const initFileUsages : typeof fileUsages = new Map ( ) ;
5465
5566 for ( const [ rType , rId ] of initRefTypes ) {
56- const refCount = await getReferenceCount ( initAstNodeInfo . id as string , rId ) ;
67+ if ( cancelled ) return ;
68+ const refCount = await getReferenceCount (
69+ initAstNodeInfo . id as string ,
70+ rId ,
71+ ) ;
5772 initRefCounts . set ( rType , refCount ) ;
5873
59- const refsForType = await getReferences ( initAstNodeInfo . id as string , rId , initAstNodeInfo . tags ?? [ ] ) ;
74+ const refsForType = await getReferences (
75+ initAstNodeInfo . id as string ,
76+ rId ,
77+ initAstNodeInfo . tags ?? [ ] ,
78+ ) ;
6079 initRefs . set ( rType , refsForType ) ;
6180
62- if ( rType === ' Caller' || rType === ' Usage' ) {
81+ if ( rType === " Caller" || rType === " Usage" ) {
6382 const fileInfos : FileInfo [ ] = [ ] ;
64- for ( const fId of [ ...new Set ( refsForType . map ( ( aInfo ) => aInfo . range ?. file as string ) ) ] ) {
83+ for ( const fId of [
84+ ...new Set ( refsForType . map ( ( aInfo ) => aInfo . range ?. file as string ) ) ,
85+ ] ) {
6586 const fInfo = await getFileInfo ( fId ) ;
6687 fileInfos . push ( fInfo as FileInfo ) ;
6788 }
@@ -71,24 +92,32 @@ export const InfoTree = (): JSX.Element => {
7192 }
7293 }
7394
95+ if ( cancelled ) return ;
7496 setAstNodeInfo ( initAstNodeInfo ) ;
7597 setProperties ( initProps ) ;
7698 setRefTypes ( initRefTypes ) ;
7799 setRefCounts ( initRefCounts ) ;
78100 setRefs ( initRefs ) ;
79101 setFileUsages ( initFileUsages ) ;
80102 } ;
81- init ( ) . then ( ( ) => setLoadComplete ( true ) ) ;
103+ init ( ) . finally ( ( ) => {
104+ if ( ! cancelled ) setLoadComplete ( true ) ;
105+ } ) ;
106+ return ( ) => {
107+ cancelled = true ;
108+ } ;
82109 } , [ appCtx . languageNodeId ] ) ;
83110
84111 const jumpToRef = async ( astNodeInfo : AstNodeInfo ) => {
85112 const fileId = astNodeInfo . range ?. file as string ;
86113 router . push ( {
87- pathname : ' /project' ,
114+ pathname : " /project" ,
88115 query : {
89116 ...router . query ,
90117 projectFileId : fileId ,
91- editorSelection : convertSelectionRangeToString ( astNodeInfo . range ?. range as Range ) ,
118+ editorSelection : convertSelectionRangeToString (
119+ astNodeInfo . range ?. range as Range ,
120+ ) ,
92121 activeTab : TabName . CODE . toString ( ) ,
93122 } as RouterQueryType ,
94123 } ) ;
@@ -97,25 +126,39 @@ export const InfoTree = (): JSX.Element => {
97126 return appCtx . languageNodeId && astNodeInfo ? (
98127 loadComplete ? (
99128 < SC . OuterContainer >
100- < SC . StyledDiv sx = { { display : 'flex' , alignItems : 'center' , gap : '5px' , marginBottom : '5px' } } >
129+ < SC . StyledDiv
130+ sx = { {
131+ display : "flex" ,
132+ alignItems : "center" ,
133+ gap : "5px" ,
134+ marginBottom : "5px" ,
135+ } }
136+ >
101137 < RefIcon refName = { astNodeInfo . symbolType as string } />
102138 < SC . StyledDiv
103139 onClick = { ( ) => jumpToRef ( astNodeInfo ) }
104140 sx = { {
105- fontWeight : 'bold' ,
106- cursor : 'pointer' ,
107- ':hover' : {
108- backgroundColor : ( theme ) => alpha ( theme . backgroundColors ?. secondary as string , 0.3 ) ,
141+ fontWeight : "bold" ,
142+ cursor : "pointer" ,
143+ ":hover" : {
144+ backgroundColor : ( theme ) =>
145+ alpha ( theme . backgroundColors ?. secondary as string , 0.3 ) ,
109146 } ,
110147 } }
111148 > { `${ astNodeInfo . symbolType } : ${ astNodeInfo . astNodeValue } ` } </ SC . StyledDiv >
112149 </ SC . StyledDiv >
113150 < SC . StyledDiv >
114151 { Array . from ( properties . keys ( ) ) . map ( ( name , idx ) => (
115- < SC . StyledDiv key = { idx } sx = { { display : 'flex' , alignItems : 'center' , gap : '5px' } } >
152+ < SC . StyledDiv
153+ key = { idx }
154+ sx = { { display : "flex" , alignItems : "center" , gap : "5px" } }
155+ >
116156 < RefIcon refName = { name } />
117157 < SC . StyledDiv >
118- < SC . StyledSpan sx = { { textDecoration : 'underline' } } > { name } :</ SC . StyledSpan > { properties . get ( name ) }
158+ < SC . StyledSpan sx = { { textDecoration : "underline" } } >
159+ { name } :
160+ </ SC . StyledSpan > { " " }
161+ { properties . get ( name ) }
119162 </ SC . StyledDiv >
120163 </ SC . StyledDiv >
121164 ) ) }
@@ -124,9 +167,12 @@ export const InfoTree = (): JSX.Element => {
124167 defaultExpandIcon = { < ChevronRight /> }
125168 defaultEndIcon = { < ChevronRight /> }
126169 defaultCollapseIcon = { < ExpandMore /> }
127- sx = { { width : ' max-content' , marginTop : ' 5px' } }
170+ sx = { { width : " max-content" , marginTop : " 5px" } }
128171 expanded = { expandedTreeNodes }
129- onNodeSelect = { ( _e : SyntheticEvent < Element , Event > , nodeIds : string | string [ ] ) => {
172+ onNodeSelect = { (
173+ _e : SyntheticEvent < Element , Event > ,
174+ nodeIds : string | string [ ] ,
175+ ) => {
130176 // Handle both single string and array of strings
131177 const nodeId = Array . isArray ( nodeIds ) ? nodeIds [ 0 ] : nodeIds ;
132178 if ( ! nodeId ) return ;
@@ -149,8 +195,9 @@ export const InfoTree = (): JSX.Element => {
149195 key = { refTypeIdx }
150196 icon = { < RefIcon refName = { type } /> }
151197 label = {
152- < SC . StyledDiv sx = { { fontSize : '0.85rem' } } >
153- { referenceTypeArray [ refTypes . get ( type ) as number ] } ({ refCounts . get ( type ) } )
198+ < SC . StyledDiv sx = { { fontSize : "0.85rem" } } >
199+ { referenceTypeArray [ refTypes . get ( type ) as number ] } (
200+ { refCounts . get ( type ) } )
154201 </ SC . StyledDiv >
155202 }
156203 >
@@ -161,26 +208,36 @@ export const InfoTree = (): JSX.Element => {
161208 key = { fileInfo . id }
162209 icon = { < FileIcon fileName = { fileInfo . name as string } /> }
163210 label = {
164- < SC . StyledDiv sx = { { fontSize : ' 0.85rem' } } >
211+ < SC . StyledDiv sx = { { fontSize : " 0.85rem" } } >
165212 { fileInfo . name } (
166- { refs . get ( type ) ?. filter ( ( aInfo ) => aInfo . range ?. file === fileInfo . id ) . length } )
213+ {
214+ refs
215+ . get ( type )
216+ ?. filter (
217+ ( aInfo ) => aInfo . range ?. file === fileInfo . id ,
218+ ) . length
219+ }
220+ )
167221 </ SC . StyledDiv >
168222 }
169223 >
170224 { refs
171225 . get ( type )
172226 ?. filter ( ( aInfo ) => aInfo . range ?. file === fileInfo . id )
173227 . map ( ( aInfo ) => (
174- < SC . Label key = { aInfo . id } onClick = { ( ) => jumpToRef ( aInfo ) } >
175- < Code sx = { { width : '20px' , height : '20px' } } />
228+ < SC . Label
229+ key = { aInfo . id }
230+ onClick = { ( ) => jumpToRef ( aInfo ) }
231+ >
232+ < Code sx = { { width : "20px" , height : "20px" } } />
176233 < SC . StyledDiv > { `${ aInfo . range ?. range ?. startpos ?. line } :${ aInfo . range ?. range ?. startpos ?. column } : ${ aInfo . astNodeValue } ` } </ SC . StyledDiv >
177234 </ SC . Label >
178235 ) ) }
179236 </ SC . StyledTreeItem >
180237 ) )
181238 : refs . get ( type ) ?. map ( ( aInfo ) => (
182239 < SC . Label key = { aInfo . id } onClick = { ( ) => jumpToRef ( aInfo ) } >
183- < Code sx = { { width : ' 20px' , height : ' 20px' } } />
240+ < Code sx = { { width : " 20px" , height : " 20px" } } />
184241 < SC . StyledDiv > { `${ aInfo . range ?. range ?. startpos ?. line } :${ aInfo . range ?. range ?. startpos ?. column } : ${ aInfo . astNodeValue } ` } </ SC . StyledDiv >
185242 </ SC . Label >
186243 ) ) }
@@ -189,13 +246,27 @@ export const InfoTree = (): JSX.Element => {
189246 </ SC . StyledTreeView >
190247 </ SC . OuterContainer >
191248 ) : (
192- < Box sx = { { display : 'flex' , justifyContent : 'center' , alignItems : 'center' , marginTop : '100px' } } >
249+ < Box
250+ sx = { {
251+ display : "flex" ,
252+ justifyContent : "center" ,
253+ alignItems : "center" ,
254+ marginTop : "100px" ,
255+ } }
256+ >
193257 < CircularProgress />
194258 </ Box >
195259 )
196260 ) : (
197- < SC . StyledDiv sx = { { display : 'flex' , justifyContent : 'center' , alignItems : 'center' , marginTop : '10px' } } >
198- { t ( 'infoTree.noNode' ) }
261+ < SC . StyledDiv
262+ sx = { {
263+ display : "flex" ,
264+ justifyContent : "center" ,
265+ alignItems : "center" ,
266+ marginTop : "10px" ,
267+ } }
268+ >
269+ { t ( "infoTree.noNode" ) }
199270 </ SC . StyledDiv >
200271 ) ;
201272} ;
0 commit comments