diff --git a/samples/js/splore/src/layout.js b/samples/js/splore/src/layout.js index f958eded48..8ac4d2f8f5 100644 --- a/samples/js/splore/src/layout.js +++ b/samples/js/splore/src/layout.js @@ -13,7 +13,7 @@ type Props = { data: NodeGraph, onNodeClick: (e: MouseEvent, s: string) => void, tree: TreeNode, - nomsStore: string, + db: string, } export default function Layout(props: Props) : React.Element { @@ -21,7 +21,7 @@ export default function Layout(props: Props) : React.Element { const edges = []; const lookup = {}; - const spaceX = 75; + const spaceX = 100; const spaceY = 20; const paddingRight = 250; const getX = d => d.y * spaceX; @@ -56,7 +56,7 @@ export default function Layout(props: Props) : React.Element { canOpen={hasChildren} isOpen={!hasChildren || Boolean(treeNode.data.isOpen)} hash={hash} - nomsStore={props.nomsStore} + db={props.db} onClick={(e) => props.onNodeClick(e, treeNode.id)}/>); children.push(n); lookup[treeNode.id] = treeNode; diff --git a/samples/js/splore/src/main.js b/samples/js/splore/src/main.js index 4a3f9fecb2..0b2cc31a1e 100644 --- a/samples/js/splore/src/main.js +++ b/samples/js/splore/src/main.js @@ -9,25 +9,25 @@ import React from 'react'; import ReactDOM from 'react-dom'; import { Blob, + Collection, Database, Hash, HttpBatchStore, IndexedMetaSequence, invariant, + kindToString, List, - ListLeafSequence, Map, - MapLeafSequence, OrderedMetaSequence, Ref, Set, - SetLeafSequence, Struct, StructMirror, } from '@attic/noms'; -import type {StructFieldMirror} from '@attic/noms'; +import type {StructFieldMirror, Value} from '@attic/noms'; import {layout, TreeNode} from './buchheim.js'; import type {NodeGraph} from './buchheim.js'; +import {filesize} from 'humanize'; const data: NodeGraph = {nodes: {}, links: {}}; let rootHash: Hash; @@ -71,7 +71,7 @@ function load() { }; if (params.hash) { - const hash = Hash.parse(params.ref); + const hash = Hash.parse(params.hash); invariant(hash); setRootHash(hash); } else { @@ -84,7 +84,7 @@ function formatKeyString(v: any): string { v = v.targetHash; } if (v instanceof Hash) { - return v.toString().substring(5, 11); + return v.toString().substring(0, 10); } return String(v); @@ -100,7 +100,6 @@ function handleChunkLoad(hash: Hash, val: any, fromHash: ?string) { const kid = process(hash, formatKeyString(tuple.ref), id); if (kid) { data.nodes[kid].isOpen = true; - process(hash, tuple.ref, kid); } else { throw new Error('No kid id.'); @@ -135,51 +134,40 @@ function handleChunkLoad(hash: Hash, val: any, fromHash: ?string) { if (t === 'boolean' || t === 'number' || t === 'string') { data.nodes[id] = {name: String(val)}; - } else if (val instanceof Blob) { - data.nodes[id] = {name: `Blob (${val.length})`}; - } else if (val instanceof List) { - const sequence = val.sequence; - if (sequence instanceof ListLeafSequence) { - data.nodes[id] = {name: `List (${val.length})`}; - sequence.items.forEach(c => process(hash, c, id)); + } else if (val instanceof Collection) { + const {sequence} = val; + const ks = kindToString(val.type.kind); + const size = getSize(val); + if (sequence instanceof IndexedMetaSequence) { + const name = `${ks}Node (${size})`; + processMetaSequence(id, sequence, name); + } else if (sequence instanceof OrderedMetaSequence) { + const name = `${ks}Node (${size})`; + processMetaSequence(id, sequence, name); } else { - invariant(sequence instanceof IndexedMetaSequence); - processMetaSequence(id, sequence, 'ListNode'); - } - } else if (val instanceof Set) { - const sequence = val.sequence; - if (sequence instanceof SetLeafSequence) { - data.nodes[id] = {name: `Set (${val.size})`}; - sequence.items.forEach(c => process(hash, c, id)); - } else { - invariant(sequence instanceof OrderedMetaSequence); - processMetaSequence(id, sequence, 'SetNode'); - } - } else if (val instanceof Map) { - const sequence = val.sequence; - if (sequence instanceof MapLeafSequence) { - data.nodes[id] = {name: `Map (${val.size})`}; - sequence.items.forEach(entry => { - const [k, v] = entry; - // TODO: handle non-string keys - const kid = process(hash, k, id); - if (kid) { - data.nodes[kid].isOpen = true; - - process(hash, v, kid); - } else { - throw new Error('No kid id.'); - } - }); - } else { - invariant(sequence instanceof OrderedMetaSequence); - processMetaSequence(id, sequence, 'MapNode'); + const name = `${ks} (${size})`; + data.nodes[id] = {name}; + if (val instanceof Map) { + sequence.items.forEach(entry => { + const [k, v] = entry; + // TODO: handle non-string keys + const kid = process(hash, k, id); + if (kid) { + data.nodes[kid].isOpen = true; + process(hash, v, kid); + } else { + throw new Error('No kid id.'); + } + }); + } else { + sequence.items.forEach(c => process(hash, c, id)); + } } } else if (val instanceof Hash) { const refStr = val.toString(); data.nodes[id] = { canOpen: true, - name: refStr.substr(5, 6), + name: refStr.substr(0, 10), hash: val, }; } else if (val instanceof Struct) { @@ -257,9 +245,9 @@ class Prompt extends React.Component { defaultValue={params.token} placeholder='auth token' /> - @@ -269,13 +257,13 @@ class Prompt extends React.Component { _handleOnSubmit(e) { e.preventDefault(); - const {db, token, ref} = this.refs; + const {db, token, hash} = this.refs; let qs = '?db=' + db.value; if (token.value) { qs += '&token=' + token.value; } - if (ref.value) { - qs += '&ref=' + ref.value; + if (hash.value) { + qs += '&hash=' + hash.value; } window.history.pushState({}, undefined, qs); load(); @@ -290,6 +278,20 @@ function render() { const dt = new TreeNode(data, rootHash.toString(), null, 0, 0, {}); layout(dt); ReactDOM.render( - , + , renderNode); } + +function getSize(val: Value): string | number { + // This was extracted into a function to work around a bug in Flow. + if (val instanceof List) { + return val.length; + } + if (val instanceof Map || val instanceof Set) { + return val.size; + } + if (val instanceof Blob) { + return filesize(val.length); + } + throw new Error('unreachable'); +} diff --git a/samples/js/splore/src/node.js b/samples/js/splore/src/node.js index a0aec3563e..823a735113 100644 --- a/samples/js/splore/src/node.js +++ b/samples/js/splore/src/node.js @@ -20,7 +20,7 @@ type Props = { y: number, spaceX: number, hash: ?Hash, - nomsStore: string, + db: string, onClick: (e: MouseEvent, s: String) => void, }; @@ -54,7 +54,7 @@ export default class Node extends React.Component { let text = this.props.text; if (this.props.hash) { - const url = `${this.props.nomsStore}/ref/${this.props.hash.toString()}`; + const url = `/?db=${this.props.db}&hash=${this.props.hash.toString()}`; text = {text}; }