Merge pull request #6 from ipfs-shipyard/feat/node-info

feat: add node info bar

Author: olizilla

package-lock.json

@@ -8,6 +8,7 @@
     "cytoscape-dagre": "^2.2.2",
     "ipfs": "^0.35.0",
     "ipfs-css": "^0.12.0",
+    "ipld-dag-pb": "^0.17.0",
     "parcel": "^1.12.3",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",

package.json

@@ -6,19 +6,23 @@ import Dag from './Dag'
 import { Buffer } from 'ipfs'
 import { ipfsAdd } from './lib/ipfs'
 import DropTarget from './DropTarget'
+import NodeInfo from './NodeInfo'
 
 export default function App () {
   const [files, setFiles] = useState([])
   const [chunker, setChunker] = useState('size-512')
+  const [rawLeaves, setRawLeaves] = useState(false)
   const [strategy, setStrategy] = useState('balanced')
   const [maxChildren, setMaxChildren] = useState(11)
   const [layerRepeat, setLayerRepeat] = useState(4)
   const [rootCid, setRootCid] = useState(null)
+  const [focusedNode, setFocusedNode] = useState(null)
 
   useEffect(() => {
     if (!files.length) return
-    ipfsAdd({ files, chunker, strategy, maxChildren, layerRepeat }).then(setRootCid)
-  }, [files, chunker, strategy, maxChildren, layerRepeat])
+    ipfsAdd({ files, chunker, rawLeaves, strategy, maxChildren, layerRepeat })
+      .then(setRootCid)
+  }, [files, chunker, rawLeaves, strategy, maxChildren, layerRepeat])
 
   const onFileChange = file => {
     const fileReader = new FileReader()
@@ -35,6 +39,7 @@ export default function App () {
     setMaxChildren(11)
     setLayerRepeat(4)
     setRootCid(null)
+    setFocusedNode(null)
   }
 
   return (
@@ -46,6 +51,8 @@ export default function App () {
         <Controls
           chunker={chunker}
           onChunkerChange={setChunker}
+          rawLeaves={rawLeaves}
+          onRawLeavesChange={setRawLeaves}
           strategy={strategy}
           onStrategyChange={setStrategy}
           maxChildren={maxChildren}
@@ -56,7 +63,16 @@ export default function App () {
       </div>
       <div className='flex-auto'>
         <DropTarget onFileDrop={onFileChange} className='h-100'>
-          {files.length ? <Dag rootCid={rootCid} /> : null}
+          {files.length ? (
+            <div className='flex flex-column h-100'>
+              <div className='flex-auto'>
+                <Dag rootCid={rootCid} onNodeFocus={setFocusedNode} />
+              </div>
+              <div className='flex-none'>
+                <NodeInfo info={focusedNode} />
+              </div>
+            </div>
+          ) : null}
         </DropTarget>
       </div>
     </div>

src/App.js

@@ -3,6 +3,8 @@ import React from 'react'
 export default function Controls ({
   chunker,
   onChunkerChange,
+  rawLeaves,
+  onRawLeavesChange,
   strategy,
   onStrategyChange,
   maxChildren,
@@ -25,6 +27,15 @@ export default function Controls ({
           <option value='size-262144'>26,2144 byte chunks</option>
         </select>
       </div>
+      <div className='mr3'>
+        <select
+          value={rawLeaves}
+          onChange={e => onRawLeavesChange(e.target.value === 'true')}
+          className='charcoal ba b--black-20 br1 pv1 ph2 db center focus-outline'>
+          <option value='false'>UnixFS leaves</option>
+          <option value='true'>Raw leaves</option>
+        </select>
+      </div>
       <div className='mr3'>
         <select
           value={strategy}

src/Controls.js

@@ -2,6 +2,8 @@ import React, { Component, createRef } from 'react'
 import cytoscape from 'cytoscape'
 import dagre from 'cytoscape-dagre'
 import UnixFs from 'ipfs-unixfs'
+import { DAGNode } from 'ipld-dag-pb'
+import { Buffer } from 'ipfs'
 import { getIpfs } from './lib/ipfs'
 import DagGraphOptions from './DagGraphOptions'
 
@@ -17,8 +19,10 @@ export default class Dag extends Component {
     this._updateGraph()
   }
 
-  componentDidUpdate () {
-    this._updateGraph()
+  componentDidUpdate (prevProps) {
+    if (prevProps.rootCid !== this.props.rootCid) {
+      this._updateGraph()
+    }
   }
 
   async _updateGraph () {
@@ -35,37 +39,71 @@ export default class Dag extends Component {
     const container = this._graphRoot.current
     const elements = Array.from(nodeMap.values())
 
-    this._graph = cytoscape({ elements, container, ...DagGraphOptions })
-    this._graph.layout(DagGraphOptions.layout).run()
+    const cy = this._graph = cytoscape({ elements, container, ...DagGraphOptions })
+
+    const focusElement = element => {
+      cy.nodes('.focused').removeClass('focused')
+      element.addClass('focused')
+      this.props.onNodeFocus(element.data())
+    }
+
+    cy.on('tapdragover', e => {
+      if (!this.props.onNodeFocus || e.target.group() !== 'nodes') return
+      focusElement(e.target)
+    })
+
+    cy.layout(DagGraphOptions.layout).run()
+
+    if (this.props.onNodeFocus) {
+      focusElement(cy.getElementById(rootCid))
+    }
   }
 
   async _getGraphNodes (cid, nodeMap = new Map()) {
     if (nodeMap.get(cid)) return
 
     const ipfs = await getIpfs()
     const { value: source } = await ipfs.dag.get(cid)
-
+    const classes = []
     let nodeData = {}
 
-    try {
-      // it's a unix system?
-      nodeData = UnixFs.unmarshal(source.data)
-    } catch (err) {
-      // dag-pb but not a unixfs.
-      console.log(err)
-    }
-
-    for (let i = 0; i < source.links.length; i++) {
-      await this._getGraphNodes(source.links[i].cid.toString(), nodeMap)
+    if (DAGNode.isDAGNode(source)) {
+      try {
+        // it's a unix system?
+        const unixfsData = UnixFs.unmarshal(source.data)
+        nodeData = {
+          type: 'unixfs',
+          isLeaf: Boolean(source.links.length),
+          length: (await ipfs.block.get(cid)).data.length,
+          unixfsData
+        }
+      } catch (err) {
+        // dag-pb but not a unixfs.
+        console.log(err)
+      }
+
+      for (let i = 0; i < source.links.length; i++) {
+        await this._getGraphNodes(source.links[i].cid.toString(), nodeMap)
+      }
+
+      if (!source.links.length) classes.push('leaf')
+      if (nodeData) classes.push('unixfs', nodeData.unixfsData.type)
+    } else if (Buffer.isBuffer(source)) {
+      classes.push('raw')
+      nodeData = { type: 'raw', isLeaf: true, length: source.length }
+    } else {
+      // TODO: What IPLD node is this? How to extract the links?
+      classes.push('leaf')
+      nodeData = { type: 'unknown', isLeaf: true }
     }
 
     nodeMap.set(cid, {
       group: 'nodes',
       data: { id: cid, ...nodeData },
-      classes: source.links.length ? [] : ['leaf']
+      classes
     })
 
-    source.links.forEach(link => {
+    ;(source.links || []).forEach(link => {
       nodeMap.set(cid + '->' + link.cid, {
         group: 'edges',
         data: { source: cid, target: link.cid.toString() }