feat: IPLD graph for explore page

package.json

@@ -20,6 +20,8 @@
  },
  "dependencies": {
  "cids": "^0.5.3",
+ "cytoscape": "^3.2.12",
+ "cytoscape-dagre": "^2.2.1",
  "enzyme": "^3.3.0",
  "enzyme-adapter-react-16": "^1.1.1",
  "file-extension": "^4.0.5",

src/App.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import { connect } from 'redux-bundler-react'
 import NavBar from './navigation/NavBar'
 import navHelper from 'internal-nav-helper'
-import IpldExploreForm from './ipld/IpldExploreForm'
+import IpldExploreForm from './explore/IpldExploreForm'
 import AsyncRequestLoader from './loader/AsyncRequestLoader'
 
 export class App extends Component {

src/bundles/explore.js

@@ -0,0 +1,43 @@
+import { createAsyncResourceBundle, createSelector } from 'redux-bundler'
+import { resolveIpldPath, quickSplitPath } from '../lib/path'
+
+// Find all the nodes and path boundaries traversed along a given path
+const bundle = createAsyncResourceBundle({
+ name: 'explore',
+ actionBaseType: 'EXPLORE',
+ getPromise: async (args) => {
+ const {store, getIpfs} = args
+ const hash = store.selectHash()
+ const path = hash.replace('/explore', '')
+ const {cidOrFqdn, rest} = quickSplitPath(path)
+ const {targetNode, canonicalPath, localPath, nodes, pathBoundaries} = await resolveIpldPath(getIpfs, cidOrFqdn, rest)
+ return {
+ path,
+ targetNode,
+ canonicalPath,
+ localPath,
+ nodes,
+ pathBoundaries
+ }
+ },
+ staleAfter: Infinity,
+ checkIfOnline: false
+})
+
+// Fetch the explore data when the address in the url hash changes.
+bundle.reactExploreFetch = createSelector(
+ 'selectExploreIsLoading',
+ 'selectExploreIsWaitingToRetry',
+ 'selectIpfsReady',
+ 'selectRouteInfo',
+ 'selectExplore',
+ (isLoading, isWaitingToRetry, ipfsReady, {url, params}, obj) => {
+ if (!isLoading && !isWaitingToRetry && ipfsReady && url.startsWith('/explore') && params.path) {
+ if (!obj || obj.path !== params.path) {
+ return { actionCreator: 'doFetchExplore' }
+ }
+ }
+ }
+)
+
+export default bundle

src/bundles/index.js

@@ -1,7 +1,7 @@
 import { composeBundles } from 'redux-bundler'
 
 import ipfsBundle from './ipfs'
-import objectBundle from './object'
+import exploreBundle from './explore'
 import appIdle from './app-idle'
 import peersBundle from './peers'
 import routesBundle from './routes'
@@ -11,7 +11,7 @@ import filesBundle from './files'
 export default composeBundles(
  appIdle({idleTimeout: 5000}),
  ipfsBundle,
- objectBundle,
+ exploreBundle,
  peersBundle,
  routesBundle,
  redirectsBundle,

src/bundles/routes.js

@@ -1,13 +1,13 @@
 import { createRouteBundle } from 'redux-bundler'
 import StatusPage from '../status/StatusPage'
 import FilesPage from '../files/FilesPage'
-import IpldPage from '../ipld/IpldPage'
+import ExplorePage from '../explore/ExplorePage'
 import PeersPage from '../peers/PeersPage'
 import SettingsPage from '../settings/SettingsPage'
 
 export default createRouteBundle({
  '/files': FilesPage,
- '/explore*': IpldPage,
+ '/explore*': ExplorePage,
  '/files*': FilesPage,
  '/peers': PeersPage,
  '/settings': SettingsPage,

src/components/cid/Cid.js

@@ -0,0 +1,34 @@
+import React from 'react'
+
+export function cidStartAndEnd (value) {
+ const chars = value.split('')
+ if (chars.length <= 9) return value
+ const start = chars.slice(0, 4).join('')
+ const end = chars.slice(chars.length - 4).join('')
+ return {
+ value,
+ start,
+ end
+ }
+}
+
+export function shortCid (value) {
+ const {start, end} = cidStartAndEnd(value)
+ return `${start}…${end}`
+}
+
+const Cid = ({value, title, style, ...props}) => {
+ style = Object.assign({}, {
+ textDecoration: 'none'
+ }, style)
+ const {start, end} = cidStartAndEnd(value)
+ return (
+ <abbr title={title || value} style={style} {...props}>
+ <span>{start}</span>
+ <span className='o-20'>…</span>
+ <span>{end}</span>
+ </abbr>
+ )
+}
+
+export default Cid

src/components/cid/Cid.stories.js

@@ -0,0 +1,17 @@
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+import { action } from '@storybook/addon-actions'
+import { checkA11y } from '@storybook/addon-a11y'
+import Cid from './Cid'
+
+storiesOf('CID', module)
+ .addDecorator(checkA11y)
+ .add('CID v0', () => (
+ <Cid className='db ma2 monospace' value={'QmYPNmahJAvkMTU6tDx5zvhEkoLzEFeTDz6azDCSNqzKkW'} onClick={action('click')} />
+ ))
+ .add('CID v1', () => (
+ <Cid className='db ma2 monospace' value={'zb2rhZMC2PFynWT7oBj7e6BpDpzge367etSQi6ZUA81EVVCxG'} onClick={action('click')} />
+ ))
+ .add('CID v1 sha3', () => (
+ <Cid className='db ma2 monospace' value={'zB7NbGN5wyfSbNNNwo3smZczHZutiWERdvWuMcHXTj393RnbhwsHjrP7bPDRPA79YWPbS69cZLWXSANcwUMmk4Rp3hP9Y'} onClick={action('click')} />
+ ))

src/explore/ExplorePage.js

@@ -0,0 +1,89 @@
+import React from 'react'
+import { Helmet } from 'react-helmet'
+import { connect } from 'redux-bundler-react'
+import CidInfo from './cid-info/CidInfo'
+import ObjectInfo from './object-info/ObjectInfo'
+import IpldGraph from './graph/IpldGraphCytoscape'
+import GraphCrumb from './graph-crumb/GraphCrumb'
+
+class ExplorePage extends React.Component {
+ constructor (props) {
+ super(props)
+ this.onLinkClick = this.onLinkClick.bind(this)
+ }
+
+ onLinkClick (link) {
+ const {doUpdateHash, explore} = this.props
+ const {nodes, pathBoundaries} = explore
+ const cid = nodes[0].cid
+ const basePath = pathBoundaries.map(p => p.path).join('/')
+ const path = basePath ? `${basePath}/${link.path}` : link.path
+ // Reliably derive the url from the data, rather than the current hash
+ const hash = `#/explore/${cid}/${path}`
+ doUpdateHash(hash)
+ }
+
+ render () {
+ const {explore} = this.props
+ if (!explore) return <StartExploringPage />
+ const {targetNode, localPath, nodes, pathBoundaries} = explore
+ const sourceNode = nodes[0]
+ return (
+ <div className='nl3 nt4'>
+ <Helmet>
+ <title>Explore - IPFS</title>
+ </Helmet>
+ {pathBoundaries && targetNode ? (
+ <GraphCrumb
+ className='ml4 mt2 mb3'
+ cid={sourceNode.cid}
+ pathBoundaries={pathBoundaries}
+ localPath={localPath} />
+ ) : null}
+ <div className='dt dt--fixed'>
+ <div className='dtc w-two-thirds pr3 v-top'>
+ {targetNode ? (
+ <ObjectInfo
+ style={{background: '#FBFBFB'}}
+ cid={targetNode.cid}
+ localPath={localPath}
+ size={targetNode.size}
+ links={targetNode.links}
+ data={targetNode.data}
+ type={targetNode.type}
+ onLinkClick={this.onLinkClick} />
+ ) : null}
+ </div>
+ <div className='dtc w-third v-top'>
+ {targetNode ? (
+ <div>
+ <CidInfo
+ style={{background: '#FBFBFB'}}
+ cid={targetNode.cid} />
+ <IpldGraph
+ style={{width: '100%', height: 300}}
+ path={targetNode.cid}
+ links={targetNode.links}
+ onNodeClick={this.onLinkClick} />
+ </div>
+ ) : null}
+ </div>
+ </div>
+ <h1 data-id='title'>IPLD</h1>
+ </div>
+ )
+ }
+}
+
+const StartExploringPage = () => {
+ return (
+ <div>
+ <Helmet>
+ <title>Explore - IPFS</title>
+ </Helmet>
+ <h1 data-id='title'>IPLD</h1>
+ </div>
+ )
+}
+
+export default connect('selectRouteParams', 'selectExploreIsLoading', 'selectExplore', 'selectHash', 'doUpdateHash', ExplorePage)