Published
Edited
May 3, 2020
1 fork
Insert cell
md`# Remnote Dagre Layout`
Insert cell
md`## Remnote get-by-ID API`
Insert cell
APIKEY = '23fb45232bcc0a718875ef6c0e326035' // TODO(ddohan): Deprecate this bot API key on test account
Insert cell

USERID = '8WfF3x3dP7ezp5cAJ'
Insert cell
ROOTID = 'nh8j6pZ5RDFDhfgQZ'
Insert cell
fetch_rem = (id, callback = (response) => { return response } ) => fetch("https://www.remnote.io/api/v0/get", {
body: JSON.stringify({
"apiKey": APIKEY,
"userId": USERID,
"remId": id,
}),
method: "POST",
}).then(response => {
return response.json();
}).then(callback);
Insert cell
fetch_rem(ROOTID,) // (response) => { return console.log(response) } )
Insert cell
sleep = (milliseconds) => {
return new Promise(resolve => setTimeout(resolve, milliseconds))
}

Insert cell
list = [1, 2, 3, 4]
Insert cell
doSomething = async () => {
for (const item of list) {
await sleep(2000)
console.log('🦄')
}
}
Insert cell
doSomething()
Insert cell
md`# Rem crawler`
Insert cell
Insert cell
md`# Process to Graph`
Insert cell
rems_to_graph = (rems, spacing = 100, jitter = 50, width = 5) => {
const graph = {edges: [], nodes: []}
let idx = 0
let y = 0
let x = 0
for (const rem of Object.values(rems)) {
x = x + spacing
if (idx % width == 0) {
y += spacing
x = 0
}
idx = idx + 1
const node = {
id: rem._id,
x: x + (Math.random() - 0.5) * jitter,
y: y + (Math.random() - 0.5) * jitter,
width: 80,
height: 80,
label: rem.name[0],
}
graph['nodes'].push(node)
for (const child_id of rem.children) {
const edgename = `${rem._id}_${child_id}`
const edge = {
id: edgename,
source: rem._id,
target: child_id,
//label: edgename,
}
graph['edges'].push(edge)
}
}
return graph
}
Insert cell
p = crawl_rem(ROOTID, 100) // Crawl
Insert cell
graph_dict = rems_to_graph(p, 20, 50) // Convert to visualizable graph
Insert cell
md `# Render Graph`
Insert cell
graph_dict.nodes
Insert cell
Insert cell
render_graph(graph_dict, {
type: 'dagre',
rankdir: 'LR', // The center of the graph by default
align: 'DL',
nodesep: 5,
ranksep: 30,
controlPoints: true,
})
Insert cell
md`# Edit Graph`
Insert cell
Insert cell
md`#CSS Style`
Insert cell
Insert cell
import { collapsedCSS } from "@j-f1/css-template-tag"
Insert cell
md`# Lib`
Insert cell
G6 = require("@antv/g6@3.4.1");
Insert cell
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more