Designer and developer.
Published
Edited
Jul 14, 2021
1 star
repoAndBranch = "MetaFam/XP/gh-pages"
//failing due to missing CORS headers??
//weightedGraph = loadWeightedGraph(repoAndBranch);
viewof userPicker = {
const options = ledger
.accounts()
.map(a => '<option value="' + a.identity.name + '" />');
let form = html`<form><i>Participant</i><br /><input name=user autocomplete="off" list='participants' placeholder="Begin typing a name" />
<datalist id="participants" >${options}</datalist></form>`;
form.oninput = () => {
form.value = form.user.value;
};
form.oninput();
return form;
}
viewof intervalPicker = {
const options = credGraph
.intervals()
.reverse()
.map(
i =>
`<option value="${i.startTimeMs}" >${new Date(i.startTimeMs)}</option>`
);
let form = html`<form><i>Interval</i><br /><select name=interval autocomplete="off" list='list' placeholder="" />
<datalist id="list" >${options}</datalist></form>`;
form.oninput = () => {
form.value = parseInt(form.interval.value) || null;
};
form.oninput();
return form;
}
nodes = credGraph ? Array.from(credGraph.nodes()) : null
edges = credGraph ? Array.from(credGraph.edges()) : null
formatDescription = str =>
md`${str
// .replaceAll(/\[(.*)\](?<!\(http.*)\((\S*)\)/g, (a, b, c) => {
// console.log(c);
// return `<a href="${c}">${b}</a>`;
// })
.replaceAll('\n', ' ')
.replace(
/Participant epoch for (.*) starting (.*) ms past epoch/,
(a, b, c) => {
return `Participant Week for **${
ledger.account(b).identity.name
}** starting **${new Date(parseInt(c)).toDateString()}**`;
}
)
.replace(/Epoch accumulator starting (.*)/, (a, b) => {
return `Week Accumulator **(aka Cred Earned)** starting starting **${new Date(
parseInt(b)
).toDateString()}**`;
})
.replace(/^🌱$/, (a, b) => {
return `🌱 (aka Seed Node)`;
})}`
rowFromEdge = e => {
const parts = nodeModule.toParts(e.node.address);
return html`<tr><td><input type="checkbox" value=${JSON.stringify(
parts
)}></td><td><strong>${e.incomingCred.toFixed(2)}</strong></td><td>${
parts[1]
}</td><td>${parts[2]}</td><td>${formatDescription(
e.node.description
)}</td></tr>\n`;
}
credTable = {
let wrapper = {};
const generate = nodeA => {
let node = edgeMapAndUpgradedNodes.upgradedNodes.get(
nodeModule.fromParts(JSON.parse(nodeA))
);
console.log(nodeA);
let totalIn = 0;
let input = inEdges(node).map(e => {
totalIn += e.incomingCred;
return rowFromEdge(e);
});
let totalOut = 0;
let output = outEdges(node).map(e => {
totalOut += e.incomingCred;
return rowFromEdge(e);
});
let currentNode = html`<table><tr><td>${
nodeModule.toParts(node.address)[0]
}</td><td>${
nodeModule.toParts(node.address)[1]
}</td><td>${formatDescription(node.description)}</td></tr></table>`;
const headers =
"<tr><th>Focus</th><th>Cred</th><th>Type</th><th>Subtype</th><th>Description</th></tr>";
const form = html`<form>
<style>table, th, td {
border: 1px solid black;
padding: 0px 5px 0px 5px;
}
input[type='checkbox'] {
-webkit-appearance:none;
width:20px;
height:20px;
background:white;
border-radius:1px;
border:2px solid #555;
}
input[type='checkbox']:checked {
background: #abd;
}</style>
<h2>Current node</h2>
${currentNode}
<h2>Incoming Cred</h2>
Total: ${totalIn.toFixed(2)}
<table>
${headers}
${input}
</table>
<br/><br/><br/>
<h2>Outgoing Cred</h2>
Total: ${totalOut.toFixed(2)}
<table>
${headers}
${output}
</table>
<br/>
</form>`;
form.oninput = e => (form.innerHTML = generate(e.target.value).innerHTML);
return form;
};
if (!participantNode) return html``;
return generate(JSON.stringify(nodeModule.toParts(participantNode.address)));
}
nodeModule = sc.core.address.makeAddressModule({
name: "NodeAddress",
nonce: "N",
otherNonces: new Map().set("E", "EdgeAddress")
})
edgeModule = sc.core.address.makeAddressModule({
name: "EdgeAddress",
nonce: "E",
otherNonces: new Map().set("N", "NodeAddress"),
})
async function loadLedger(repoAndBranch) {
if (!repoAndBranch) return null;
const ledgerFile = `https://raw.githubusercontent.com/${repoAndBranch}/data/ledger.json`;
const ledgerRaw = await (await fetch(ledgerFile)).text();
try {
return sc.ledger.ledger.Ledger.parse(ledgerRaw);
} catch {
return null;
}
}
async function loadCredGraph(repoAndBranch) {
if (!repoAndBranch) return null;
const base = `https://raw.githubusercontent.com/${repoAndBranch}/`;
const instance = sc.instance.readInstance.getNetworkReadInstance(base);
try {
return instance.readCredGraph();
} catch (e) {
return e;
}
}
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.
