@@ -2,62 +2,58 @@ function createTreeView(data) {
22 const ul = document . createElement ( 'ul' ) ;
33 ul . classList . add ( 'tree' ) ;
44
5- for ( const key in data ) {
6- if ( data . hasOwnProperty ( key ) ) {
7- const li = document . createElement ( 'li' ) ;
8-
9- if ( typeof data [ key ] === 'object' && ! Array . isArray ( data [ key ] ) && data [ key ] !== null && Object . keys ( data [ key ] ) . length > 0 ) {
10- const details = document . createElement ( 'details' ) ;
11- const summary = document . createElement ( 'summary' ) ;
12- summary . textContent = key ;
13- details . appendChild ( summary ) ;
14- details . appendChild ( createTreeView ( data [ key ] ) ) ;
15- li . appendChild ( details ) ;
16-
17- // Auto-expand first level
18- setTimeout ( ( ) => summary . click ( ) , 10 ) ;
19- } else if ( Array . isArray ( data [ key ] ) && data [ key ] . length > 0 ) {
20- const details = document . createElement ( 'details' ) ;
21- const summary = document . createElement ( 'summary' ) ;
22- summary . textContent = key ;
23- details . appendChild ( summary ) ;
24-
25- const nestedUl = document . createElement ( 'ul' ) ;
26- nestedUl . classList . add ( 'tree' ) ;
27- data [ key ] . forEach ( ( item , index ) => {
28- const nestedLi = document . createElement ( 'li' ) ;
29-
30- if ( typeof item === 'object' && item !== null ) {
31- const itemDetails = document . createElement ( 'details' ) ;
32- const itemSummary = document . createElement ( 'summary' ) ;
33- itemSummary . textContent = `Item ${ index + 1 } ` ;
34- itemDetails . appendChild ( itemSummary ) ;
35- itemDetails . appendChild ( createTreeView ( item ) ) ;
36- nestedLi . appendChild ( itemDetails ) ;
37- setTimeout ( ( ) => itemSummary . click ( ) , 10 ) ;
38- } else {
39- const span = document . createElement ( 'span' ) ;
40- span . className = 'tree-text' ;
41- span . textContent = item ;
42- nestedLi . appendChild ( span ) ;
43- }
44-
45- nestedUl . appendChild ( nestedLi ) ;
46- } ) ;
47-
48- details . appendChild ( nestedUl ) ;
49- li . appendChild ( details ) ;
50- setTimeout ( ( ) => summary . click ( ) , 10 ) ;
51- } else {
52- const span = document . createElement ( 'span' ) ;
53- span . className = 'tree-text' ;
54- span . textContent = `${ key } : ${ JSON . stringify ( data [ key ] ) } ` ;
55- li . appendChild ( span ) ;
56- }
57-
58- ul . appendChild ( li ) ;
5+ Object . entries ( data ) . forEach ( ( [ key , value ] ) => {
6+ const li = document . createElement ( 'li' ) ;
7+
8+ if ( typeof value === 'object' && ! Array . isArray ( value ) && value !== null && Object . keys ( value ) . length > 0 ) {
9+ const details = document . createElement ( 'details' ) ;
10+ details . open = true ;
11+ const summary = document . createElement ( 'summary' ) ;
12+ summary . textContent = key ;
13+ details . appendChild ( summary ) ;
14+ details . appendChild ( createTreeView ( value ) ) ;
15+ li . appendChild ( details ) ;
16+ } else if ( Array . isArray ( value ) && value . length > 0 ) {
17+ const details = document . createElement ( 'details' ) ;
18+ details . open = true ;
19+ const summary = document . createElement ( 'summary' ) ;
20+ summary . textContent = key ;
21+ details . appendChild ( summary ) ;
22+
23+ const nestedUl = document . createElement ( 'ul' ) ;
24+ nestedUl . classList . add ( 'tree' ) ;
25+ value . forEach ( ( item , index ) => {
26+ const nestedLi = document . createElement ( 'li' ) ;
27+
28+ if ( typeof item === 'object' && item !== null ) {
29+ const itemDetails = document . createElement ( 'details' ) ;
30+ itemDetails . open = true ;
31+ const itemSummary = document . createElement ( 'summary' ) ;
32+ itemSummary . textContent = `Item ${ index + 1 } ` ;
33+ itemDetails . appendChild ( itemSummary ) ;
34+ itemDetails . appendChild ( createTreeView ( item ) ) ;
35+ nestedLi . appendChild ( itemDetails ) ;
36+ } else {
37+ const span = document . createElement ( 'span' ) ;
38+ span . className = 'tree-text' ;
39+ span . textContent = item ;
40+ nestedLi . appendChild ( span ) ;
41+ }
42+
43+ nestedUl . appendChild ( nestedLi ) ;
44+ } ) ;
45+
46+ details . appendChild ( nestedUl ) ;
47+ li . appendChild ( details ) ;
48+ } else {
49+ const span = document . createElement ( 'span' ) ;
50+ span . className = 'tree-text' ;
51+ span . textContent = `${ key } : ${ JSON . stringify ( value ) } ` ;
52+ li . appendChild ( span ) ;
5953 }
60- }
54+
55+ ul . appendChild ( li ) ;
56+ } ) ;
6157
6258 return ul ;
6359}
@@ -92,11 +88,11 @@ function createNestedTree(data, serverUrl, imageName) {
9288 const summary = document . createElement ( "summary" ) ;
9389 summary . textContent = key ;
9490
91+ details . open = true ;
9592 details . appendChild ( summary ) ;
9693 details . appendChild ( createNestedTree ( value , serverUrl , imageName ) ) ;
9794
9895 li . appendChild ( details ) ;
99- setTimeout ( ( ) => summary . click ( ) , 10 ) ;
10096 } else {
10197 const span = document . createElement ( 'span' ) ;
10298 span . className = 'tree-text' ;
@@ -127,9 +123,9 @@ function createManifestTreeView(data, divId, serverUrl, imageName) {
127123 details . appendChild ( subTree ) ;
128124 }
129125
126+ details . open = true ;
130127 li . appendChild ( details ) ;
131128 ul . appendChild ( li ) ;
132- setTimeout ( ( ) => summary . click ( ) , 10 ) ;
133129 } ) ;
134130
135131 div . appendChild ( ul ) ;
@@ -140,17 +136,17 @@ document.addEventListener('DOMContentLoaded', function() {
140136 const dataEl = document . getElementById ( 'inspect-data' ) ;
141137 if ( ! dataEl ) return ;
142138
143- var type = dataEl . getAttribute ( 'data-type' ) ;
139+ const type = dataEl . getAttribute ( 'data-type' ) ;
144140
145141 if ( type === 'index' ) {
146- var manifestsEl = document . getElementById ( 'inspect-manifests' ) ;
147- var manifests = JSON . parse ( manifestsEl . value ) ;
148- var serverUrl = dataEl . getAttribute ( 'data-server-url' ) ;
149- var imageName = dataEl . getAttribute ( 'data-image-name' ) ;
142+ const manifestsEl = document . getElementById ( 'inspect-manifests' ) ;
143+ const manifests = JSON . parse ( manifestsEl . value ) ;
144+ const serverUrl = dataEl . getAttribute ( 'data-server-url' ) ;
145+ const imageName = dataEl . getAttribute ( 'data-image-name' ) ;
150146 createManifestTreeView ( manifests , "manifests-div" , serverUrl , imageName ) ;
151147 } else {
152- var configEl = document . getElementById ( 'inspect-config' ) ;
153- var manifestEl = document . getElementById ( 'inspect-manifest' ) ;
148+ const configEl = document . getElementById ( 'inspect-config' ) ;
149+ const manifestEl = document . getElementById ( 'inspect-manifest' ) ;
154150 if ( configEl && configEl . value ) {
155151 document . getElementById ( 'config-div' ) . appendChild ( createTreeView ( JSON . parse ( configEl . value ) ) ) ;
156152 }
0 commit comments