Skip to content

Commit d007e90

Browse files
author
Alan Shaw
committed
fix: add missing file
1 parent 5e662f8 commit d007e90

File tree

1 file changed

+266
-0
lines changed

1 file changed

+266
-0
lines changed

‎src/NodeInfo.js

Lines changed: 266 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,266 @@
1+
import React, { Fragment } from 'react'
2+
3+
const NodeContainer = ({ children }) => (
4+
<div className='pa3' style={{ minHeight: 60 }}>{children}</div>
5+
)
6+
7+
const CidColumn = ({ cid }) => (
8+
<Fragment>
9+
<span className='f6 charcoal-muted'>CID</span><br />
10+
<a
11+
className='code charcoal hover-blue no-underline'
12+
href={`https://cid.ipfs.io/#${cid}`}
13+
target={cid}
14+
title='Inspect this CID'>
15+
{cid}
16+
</a><br />&nbsp;
17+
</Fragment>
18+
)
19+
20+
const UnixFsFileNode = ({ info }) => {
21+
return (
22+
<NodeContainer>
23+
<div className='flex flex-row items-center'>
24+
<div className='mr4 charcoal flex-auto'>
25+
<h1 className='f4 fw6'>
26+
<span className='dib br-100 bg-navy mr2 v-mid' style={{ width: 30, height: 30 }} />
27+
<span className='v-mid'>UnixFS File</span>
28+
</h1>
29+
</div>
30+
<div className='mr4 flex-auto'>
31+
<CidColumn cid={info.id} />
32+
</div>
33+
<div className='mr4 flex-auto'>
34+
<span title='Total bytes in this node'>
35+
{info.length} <span className='charcoal-muted'>bytes total</span>
36+
</span>
37+
</div>
38+
<div className='mr4 flex-auto'>
39+
<span title={`Bytes of data in this node (excluding UnixFS wrapper)`}>
40+
{info.unixfsData.data ? info.unixfsData.data.length : 0} <span className='charcoal-muted'>bytes data</span>
41+
</span>
42+
</div>
43+
<div className='mr4 flex-auto'>
44+
{info.unixfsData.blockSizes.length} <span className='charcoal-muted'>links</span>
45+
</div>
46+
</div>
47+
</NodeContainer>
48+
)
49+
}
50+
51+
const UnixFsFileLeafNode = ({ info }) => {
52+
return (
53+
<NodeContainer>
54+
<div className='flex flex-row items-center'>
55+
<div className='mr4 charcoal flex-auto'>
56+
<h1 className='f4 fw6'>
57+
<span className='dib bg-green-muted mr2 v-mid' style={{ width: 30, height: 30 }} />
58+
<span className='v-mid'>UnixFS File</span>
59+
</h1>
60+
</div>
61+
<div className='mr4 flex-auto'>
62+
<CidColumn cid={info.id} />
63+
</div>
64+
<div className='mr4 flex-auto'>
65+
<span title='Total bytes in this node'>
66+
{info.length} <span className='charcoal-muted'>bytes total</span>
67+
</span>
68+
</div>
69+
<div className='mr4 flex-auto'>
70+
<span title={`Bytes of data in this node (excluding UnixFS wrapper)`}>
71+
{info.unixfsData.data ? info.unixfsData.data.length : 0} <span className='charcoal-muted'>bytes data</span>
72+
</span>
73+
</div>
74+
<div className='mr4 flex-auto'>
75+
{info.unixfsData.blockSizes.length} <span className='charcoal-muted'>links</span>
76+
</div>
77+
</div>
78+
</NodeContainer>
79+
)
80+
}
81+
82+
const UnixFsDirNode = ({ info }) => {
83+
return (
84+
<NodeContainer>
85+
<div className='flex flex-row items-center'>
86+
<div className='mr4 charcoal flex-auto'>
87+
<h1 className='f4 fw6'>
88+
<span className='dib bg-charcoal br2 mr2 v-mid' style={{ width: 30, height: 30 }} />
89+
<span className='v-mid'>UnixFS Directory</span>
90+
</h1>
91+
</div>
92+
<div className='mr4 flex-auto'>
93+
<CidColumn cid={info.id} />
94+
</div>
95+
<div className='mr4 flex-auto'>
96+
<span title='Total bytes in this node'>
97+
{info.length} <span className='charcoal-muted'>bytes total</span>
98+
</span>
99+
</div>
100+
<div className='mr4 flex-auto'>
101+
<span title={`Bytes of data in this node (excluding UnixFS wrapper)`}>
102+
{info.unixfsData.data ? info.unixfsData.data.length : 0} <span className='charcoal-muted'>bytes data</span>
103+
</span>
104+
</div>
105+
</div>
106+
</NodeContainer>
107+
)
108+
}
109+
110+
const UnixFsHamtDirNode = ({ info }) => {
111+
return (
112+
<NodeContainer>
113+
<div className='flex flex-row items-center'>
114+
<div className='mr4 charcoal flex-auto'>
115+
<h1 className='f4 fw6'>
116+
<span className='dib bg-charcoal br2 mr2 v-mid' style={{ width: 30, height: 30 }} />
117+
<span className='v-mid'>UnixFS HAMT Directory</span>
118+
</h1>
119+
</div>
120+
<div className='mr4 flex-auto'>
121+
<CidColumn cid={info.id} />
122+
</div>
123+
<div className='mr4 flex-auto'>
124+
<span title='Total bytes in this node'>
125+
{info.length} <span className='charcoal-muted'>bytes total</span>
126+
</span>
127+
</div>
128+
<div className='mr4 flex-auto'>
129+
<span title={`Bytes of data in this node (excluding UnixFS wrapper)`}>
130+
{info.unixfsData.data ? info.unixfsData.data.length : 0} <span className='charcoal-muted'>bytes data</span>
131+
</span>
132+
</div>
133+
</div>
134+
</NodeContainer>
135+
)
136+
}
137+
138+
const UnixFsRawNode = ({ info }) => {
139+
return (
140+
<NodeContainer>
141+
<div className='flex flex-row items-center'>
142+
<div className='mr4 charcoal flex-auto'>
143+
<h1 className='f4 fw6'>
144+
<span className='dib bg-yellow mr2 v-mid' style={{ width: 30, height: 30 }} />
145+
<span className='v-mid'>UnixFS Raw</span>
146+
</h1>
147+
</div>
148+
<div className='mr4 flex-auto'>
149+
<CidColumn cid={info.id} />
150+
</div>
151+
<div className='mr4 flex-auto'>
152+
<span title='Total bytes in this node'>
153+
{info.length} <span className='charcoal-muted'>bytes total</span>
154+
</span>
155+
</div>
156+
<div className='mr4 flex-auto'>
157+
<span title={`Bytes of data in this node (excluding UnixFS wrapper)`}>
158+
{info.unixfsData.data ? info.unixfsData.data.length : 0} <span className='charcoal-muted'>bytes data</span>
159+
</span>
160+
</div>
161+
</div>
162+
</NodeContainer>
163+
)
164+
}
165+
166+
const UnixFsOtherNode = ({ info }) => {
167+
return (
168+
<NodeContainer>
169+
<div className='flex flex-row items-center'>
170+
<div className='mr4 charcoal flex-auto'>
171+
<h1 className='f4 fw6'>
172+
<span className='dib br-100 bg-navy mr2 v-mid' style={{ width: 30, height: 30 }} />
173+
<span className='v-mid'>UnixFS {info.unixfsData.type}</span>
174+
</h1>
175+
</div>
176+
<div className='mr4 flex-auto'>
177+
<CidColumn cid={info.id} />
178+
</div>
179+
<div className='mr4 flex-auto'>
180+
<span title='Total bytes in this node'>
181+
{info.length} <span className='charcoal-muted'>bytes total</span>
182+
</span>
183+
</div>
184+
<div className='mr4 flex-auto'>
185+
<span title={`Bytes of data in this node (excluding UnixFS wrapper)`}>
186+
{info.unixfsData.data ? info.unixfsData.data.length : 0} <span className='charcoal-muted'>bytes data</span>
187+
</span>
188+
</div>
189+
<div className='mr4 flex-auto'>
190+
{info.unixfsData.blockSizes.length} <span className='charcoal-muted'>links</span>
191+
</div>
192+
</div>
193+
</NodeContainer>
194+
)
195+
}
196+
197+
const RawNode = ({ info }) => {
198+
return (
199+
<NodeContainer>
200+
<div className='flex flex-row items-center'>
201+
<div className='mr4 charcoal flex-auto'>
202+
<h1 className='f4 fw6'>
203+
<span className='dib bg-red mr2 v-mid' style={{ width: 30, height: 30 }} />
204+
<span className='v-mid'>Raw Buffer</span>
205+
</h1>
206+
</div>
207+
<div className='mr4 flex-auto'>
208+
<CidColumn cid={info.id} />
209+
</div>
210+
<div className='mr4 flex-auto'>
211+
<span title='Total bytes in this node'>
212+
{info.length} <span className='charcoal-muted'>bytes total</span>
213+
</span>
214+
</div>
215+
<div className='mr4 flex-auto'>
216+
<span title={`Bytes of data in this node`}>
217+
{info.length} <span className='charcoal-muted'>bytes data</span>
218+
</span>
219+
</div>
220+
</div>
221+
</NodeContainer>
222+
)
223+
}
224+
225+
const UnknownNode = ({ info }) => {
226+
return (
227+
<NodeContainer>
228+
<div className='flex flex-row items-center'>
229+
<div className='mr4 charcoal flex-auto'>
230+
<h1 className='f4 fw6'>
231+
<span className='v-mid'>Unknown</span>
232+
</h1>
233+
</div>
234+
<div className='mr4 flex-auto'>
235+
<CidColumn cid={info.id} />
236+
</div>
237+
</div>
238+
</NodeContainer>
239+
)
240+
}
241+
242+
export default function NodeInfo ({ info }) {
243+
if (!info) return <NodeContainer />
244+
245+
let Node
246+
247+
if (info.type === 'unixfs') {
248+
if (info.unixfsData.type === 'file') {
249+
Node = info.isLeaf ? UnixFsFileNode : UnixFsFileLeafNode
250+
} else if (info.unixfsData.type === 'directory') {
251+
Node = UnixFsDirNode
252+
} else if (info.unixfsData.type === 'hamt-sharded-directory') {
253+
Node = UnixFsHamtDirNode
254+
} else if (info.unixfsData.type === 'raw') {
255+
Node = UnixFsRawNode
256+
} else { // I have never seen metadata or symlink nodes in the wild
257+
Node = UnixFsOtherNode
258+
}
259+
} else if (info.type === 'raw') {
260+
Node = RawNode
261+
} else {
262+
Node = UnknownNode
263+
}
264+
265+
return <Node info={info} />
266+
}

0 commit comments

Comments
 (0)