Merge pull request #4 from ipfs-shipyard/feat/add-react

feat: add react

Author: olizilla

package-lock.json

@@ -9,9 +9,12 @@
     "ipfs": "^0.35.0",
     "ipfs-css": "^0.12.0",
     "parcel": "^1.12.3",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6",
     "tachyons": "^4.11.1"
   },
   "devDependencies": {
+    "babel-eslint": "^10.0.1",
     "standard": "^12.0.1"
   },
   "scripts": {
@@ -33,5 +36,8 @@
   "license": "MIT",
   "browserslist": [
     "last 2 Chrome versions"
-  ]
+  ],
+  "standard": {
+    "parser": "babel-eslint"
+  }
 }

package.json

@@ -0,0 +1,52 @@
+/* eslint-env browser */
+import React, { useState, useEffect } from 'react'
+import Header from './Header'
+import Controls from './Controls'
+import Dag from './Dag'
+import { Buffer } from 'ipfs'
+import { ipfsAdd } from './lib/ipfs'
+
+export default function App () {
+  const [files, setFiles] = useState([])
+  const [chunker, setChunker] = useState('size-512')
+  const [strategy, setStrategy] = useState('balanced')
+  const [maxChildren, setMaxChildren] = useState(11)
+  const [layerRepeat, setLayerRepeat] = useState(4)
+  const [rootCid, setRootCid] = useState(null)
+
+  useEffect(() => {
+    if (!files.length) return
+    ipfsAdd({ files, chunker, strategy, maxChildren, layerRepeat }).then(setRootCid)
+  }, [files, chunker, strategy, maxChildren, layerRepeat])
+
+  const onFileChange = file => {
+    const fileReader = new FileReader()
+    fileReader.onload = e => {
+      setFiles(files.concat({ path: file.name, content: Buffer.from(e.target.result) }))
+    }
+    fileReader.readAsArrayBuffer(file)
+  }
+
+  return (
+    <div className='avenir flex flex-column h-100'>
+      <div className='flex-none'>
+        <Header />
+      </div>
+      <div className='flex-none'>
+        <Controls
+          onFileChange={onFileChange}
+          chunker={chunker}
+          onChunkerChange={setChunker}
+          strategy={strategy}
+          onStrategyChange={setStrategy}
+          maxChildren={maxChildren}
+          onMaxChildrenChange={setMaxChildren}
+          layerRepeat={layerRepeat}
+          onLayerRepeatChange={setLayerRepeat} />
+      </div>
+      <div className='flex-auto'>
+        <Dag rootCid={rootCid} />
+      </div>
+    </div>
+  )
+}

src/App.js

@@ -0,0 +1,45 @@
+import React from 'react'
+
+export default function Controls ({
+  onFileChange,
+  chunker,
+  onChunkerChange,
+  strategy,
+  onStrategyChange,
+  maxChildren,
+  onMaxChildrenChange,
+  layerRepeat,
+  onLayerRepeatChange
+}) {
+  return (
+    <div className='pa3 bg-white'>
+      <input type='file' className='input avenir' onChange={e => onFileChange(e.target.files[0])} />
+      <select value={chunker} onChange={e => onChunkerChange(e.target.value)}>
+        <option value='size-32'>32 byte chunks</option>
+        <option value='size-512'>512 byte chunks</option>
+        <option value='size-1024'>1,024 byte chunks</option>
+        <option value='size-16384'>16,384 byte chunks</option>
+        <option value='size-262144'>26,2144 byte chunks</option>
+      </select>
+      <select value={strategy} onChange={e => onStrategyChange(e.target.value)}>
+        <option value='balanced'>Balanced DAG</option>
+        <option value='trickle'>Trickle DAG</option>
+        <option value='flat'>Flat DAG</option>
+      </select>
+      {['balanced', 'trickle'].includes(strategy) ? (
+        <select value={maxChildren} onChange={e => onMaxChildrenChange(parseInt(e.target.value))}>
+          <option value='11'>11 children max</option>
+          <option value='44'>44 children max</option>
+          <option value='174'>174 children max</option>
+        </select>
+      ) : null}
+      {strategy === 'trickle' ? (
+        <select value={layerRepeat} onChange={e => onLayerRepeatChange(parseInt(e.target.value))}>
+          <option value='1'>1 layer repeat</option>
+          <option value='4'>4 layer repeats</option>
+          <option value='16'>16 layer repeats</option>
+        </select>
+      ) : null}
+    </div>
+  )
+}

src/Controls.js

@@ -0,0 +1,81 @@
+import React, { Component, createRef } from 'react'
+import cytoscape from 'cytoscape'
+import dagre from 'cytoscape-dagre'
+import UnixFs from 'ipfs-unixfs'
+import { getIpfs } from './lib/ipfs'
+import DagGraphOptions from './DagGraphOptions'
+
+cytoscape.use(dagre)
+
+export default class Dag extends Component {
+  constructor () {
+    super()
+    this._graphRoot = createRef()
+  }
+
+  componentDidMount () {
+    this._updateGraph()
+  }
+
+  componentDidUpdate () {
+    this._updateGraph()
+  }
+
+  async _updateGraph () {
+    if (this._graph) this._graph.destroy()
+
+    const { rootCid } = this.props
+    if (!rootCid) return
+
+    const nodeMap = await this._getGraphNodes(rootCid)
+
+    // ...could have taken a while, did we get a new root node?
+    if (rootCid !== this.props.rootCid) return
+
+    const container = this._graphRoot.current
+    const elements = Array.from(nodeMap.values())
+
+    this._graph = cytoscape({ elements, container, ...DagGraphOptions })
+    this._graph.layout(DagGraphOptions.layout).run()
+  }
+
+  async _getGraphNodes (cid, nodeMap = new Map()) {
+    if (nodeMap.get(cid)) return
+
+    const ipfs = await getIpfs()
+    const { value: source } = await ipfs.dag.get(cid)
+
+    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)
+    }
+
+    nodeMap.set(cid, {
+      group: 'nodes',
+      data: { id: cid, ...nodeData },
+      classes: source.links.length ? [] : ['leaf']
+    })
+
+    source.links.forEach(link => {
+      nodeMap.set(cid + '->' + link.cid, {
+        group: 'edges',
+        data: { source: cid, target: link.cid.toString() }
+      })
+    })
+
+    return nodeMap
+  }
+
+  render () {
+    return <div ref={this._graphRoot} style={{ background: 'pink' }} className='h-100' />
+  }
+}

src/Dag.js

@@ -0,0 +1,47 @@
+export default {
+  layout: {
+    name: 'dagre',
+    rankSep: 80,
+    nodeSep: 1
+  },
+  style: [
+    {
+      selector: 'node',
+      style: {
+        shape: 'ellipse',
+        width: '14px',
+        height: '14px',
+        'background-color': '#244e66'
+      }
+    },
+    {
+      selector: '.leaf',
+      style: {
+        shape: 'square',
+        width: '14px',
+        height: '14px',
+        'background-color': '#28CA9F'
+      }
+    },
+    {
+      selector: 'edge',
+      style: {
+        'source-distance-from-node': 3,
+        'target-distance-from-node': 4,
+        'curve-style': 'bezier',
+        'control-point-weight': 0.5,
+        'width': 1,
+        'line-color': '#979797',
+        'line-style': 'dotted',
+        // 'target-label': 'data(index)',
+        'font-family': 'Consolas, monaco, monospace',
+        'font-size': '8px',
+        'target-text-margin-x': '-5px',
+        'color': '#ccc',
+        'target-text-margin-y': '-2px',
+        'text-halign': 'center',
+        'text-valign': 'bottom'
+      }
+    }
+  ]
+}

src/DagGraphOptions.js

@@ -0,0 +1,12 @@
+import React from 'react'
+
+export default function Header () {
+  return (
+    <header className='flex items-center pa3 bg-navy'>
+      <a href='https://ipfs.io' title='home' className='w-50'>
+        <img src='https://ipfs.io/images/ipfs-logo.svg' style={{ height: 50 }} />
+      </a>
+      <h1 className='w-50 ma0 tr f3 fw2 montserrat aqua'>DAG builder</h1>
+    </header>
+  )
+}