From 5834f89882d879c024dee38e24f97a86b4933749 Mon Sep 17 00:00:00 2001 From: Ladd Hoffman Date: Sat, 28 Jan 2023 10:19:26 -0600 Subject: [PATCH] Improve forum graph rendering --- forum-network/src/classes/actor.js | 10 +++++---- forum-network/src/classes/box.js | 4 ---- forum-network/src/classes/forum.js | 33 ++++++++++++++++-------------- forum-network/src/classes/graph.js | 26 +++++++++++++++-------- forum-network/src/classes/scene.js | 10 ++++----- forum-network/src/tests/forum.html | 25 +++++++++++++++++++++- forum-network/src/util.js | 2 ++ 7 files changed, 73 insertions(+), 37 deletions(-) diff --git a/forum-network/src/classes/actor.js b/forum-network/src/classes/actor.js index 8556ef7..609cec4 100644 --- a/forum-network/src/classes/actor.js +++ b/forum-network/src/classes/actor.js @@ -1,3 +1,5 @@ +import { displayNumber } from '../util.js'; + export class Actor { constructor(name, scene) { this.name = name; @@ -60,8 +62,8 @@ export class Actor { } async setValue(label, value) { - if (typeof value === 'number' && value.toString().length > 6) { - value = value.toFixed(2); + if (typeof value === 'number') { + value = displayNumber(value); } let displayValue = this.values.get(label); if (!displayValue) { @@ -79,8 +81,8 @@ export class Actor { for (const [label, fn] of this.valueFunctions.entries()) { const displayValue = this.values.get(label); let value = fn(); - if (typeof value === 'number' && value.toString().length > 6) { - value = value.toFixed(2); + if (typeof value === 'number') { + value = displayNumber(value); } if (value !== displayValue.get()) { await this.scene.sequence.log(`note over ${this.name} : ${label} = ${value}`); diff --git a/forum-network/src/classes/box.js b/forum-network/src/classes/box.js index 654a7d9..0588f30 100644 --- a/forum-network/src/classes/box.js +++ b/forum-network/src/classes/box.js @@ -50,10 +50,6 @@ export class Box { return this; } - getInnerText() { - return this.el.innerText; - } - getId() { return this.el.id; } diff --git a/forum-network/src/classes/forum.js b/forum-network/src/classes/forum.js index 7f1bce1..c67008f 100644 --- a/forum-network/src/classes/forum.js +++ b/forum-network/src/classes/forum.js @@ -4,6 +4,7 @@ import { Action } from './action.js'; import { CryptoUtil } from './crypto.js'; import params from '../params.js'; import { ReputationHolder } from './reputation-holder.js'; +import { displayNumber } from '../util.js'; class Post extends Actor { constructor(forum, authorPublicKey, postContent) { @@ -13,6 +14,7 @@ class Post extends Actor { this.id = postContent.id ?? `post_${CryptoUtil.randomUUID()}`; this.authorPublicKey = authorPublicKey; this.value = 0; + this.initialValue = 0; this.citations = postContent.citations; this.title = postContent.title; const revaluationTotal = this.citations.reduce((total, { weight }) => total += Math.abs(weight), 0); @@ -24,6 +26,18 @@ class Post extends Actor { throw new Error('Each citation weight must be in the range [-1, 1]'); } } + + getLabel() { + return `${this.name} + + + + + + +
initial${displayNumber(this.initialValue)}
value${displayNumber(this.value)}
` + .replaceAll(/\n\s*/g, ''); + } } /** @@ -44,15 +58,9 @@ export class Forum extends ReputationHolder { async addPost(authorId, postContent) { const post = new Post(this, authorId, postContent); await this.actions.addPost.log(this, post); - this.posts.addVertex(post.id, post, post.title); - if (this.scene.flowchart) { - this.scene.flowchart.log(`${post.id} -- value --> ${post.id}_value[0]`); - } + this.posts.addVertex(post.id, post, post.getLabel()); for (const { postId: citedPostId, weight } of post.citations) { this.posts.addEdge('citation', post.id, citedPostId, { weight }); - if (this.scene.flowchart) { - this.scene.flowchart.log(`${post.id} -- ${weight} --> ${citedPostId}`); - } } return post.id; } @@ -68,9 +76,7 @@ export class Forum extends ReputationHolder { async setPostValue(post, value) { post.value = value; await post.setValue('value', value); - if (this.scene.flowchart) { - this.scene.flowchart.log(`${post.id}_value[${value}]`); - } + this.posts.setVertexLabel(post.id, post.getLabel()); } getTotalValue() { @@ -82,13 +88,10 @@ export class Forum extends ReputationHolder { }) { this.activate(); const initialValue = bench.reputation.valueOf(tokenId); - - if (this.scene.flowchart) { - this.scene.flowchart.log(`${postId}_initial_value[${initialValue}] -- initial value --> ${postId}`); - } - const post = this.getPost(postId); post.setStatus('Validated'); + post.initialValue = initialValue; + this.posts.setVertexLabel(post.id, post.getLabel()); // Store a reference to the reputation token associated with this post, // so that its value can be updated by future validated posts. diff --git a/forum-network/src/classes/graph.js b/forum-network/src/classes/graph.js index 075b933..29a8a7a 100644 --- a/forum-network/src/classes/graph.js +++ b/forum-network/src/classes/graph.js @@ -1,5 +1,6 @@ -export class Vertex { - constructor(data) { +class Vertex { + constructor(id, data) { + this.id = id; this.data = data; this.edges = { from: [], @@ -14,7 +15,7 @@ export class Vertex { } } -export class Edge { +class Edge { constructor(label, from, to, data) { this.from = from; this.to = to; @@ -23,8 +24,6 @@ export class Edge { } } -export class CategorizedEdges {} - export class Graph { constructor(scene) { this.scene = scene; @@ -42,7 +41,7 @@ export class Graph { if (this.vertices.has(id)) { throw new Error(`Vertex already exists with id: ${id}`); } - const vertex = new Vertex(data); + const vertex = new Vertex(id, data); this.vertices.set(id, vertex); if (this.scene && this.scene.flowchart) { this.scene.flowchart.log(`${id}[${label ?? id}]`); @@ -50,6 +49,12 @@ export class Graph { return this; } + setVertexLabel(id, label) { + if (this.scene && this.scene.flowchart) { + this.scene.flowchart.log(`${id}[${label}]`); + } + } + getVertex(id) { return this.vertices.get(id); } @@ -82,8 +87,13 @@ export class Graph { } const edge = new Edge(label, from, to, data); this.setEdge(label, from, to, edge); - this.getVertex(from).edges.from.push(edge); - this.getVertex(to).edges.to.push(edge); + const fromVertex = this.getVertex(from); + fromVertex.edges.from.push(edge); + const toVertex = this.getVertex(to); + toVertex.edges.to.push(edge); + if (this.scene && this.scene.flowchart) { + this.scene.flowchart.log(`${fromVertex.id} -- ${data.weight} --> ${toVertex.id}`); + } return this; } diff --git a/forum-network/src/classes/scene.js b/forum-network/src/classes/scene.js index 755a779..0035931 100644 --- a/forum-network/src/classes/scene.js +++ b/forum-network/src/classes/scene.js @@ -10,12 +10,12 @@ class MermaidDiagram { this.element = this.box.addBox('Element'); this.renderBox = this.box.addBox('Render'); this.box.addBox('Spacer').setInnerHTML(' '); - this.logBox = logBox; + this.logBoxPre = logBox.el.appendChild(document.createElement('pre')); this.inSection = 0; } async log(msg, render = true) { - this.logBox.addBox().setInnerHTML(msg).monospace(); + this.logBoxPre.textContent = `${this.logBoxPre.textContent}\n${msg}`; if (render) { await this.render(); } @@ -24,13 +24,13 @@ class MermaidDiagram { async render() { const render = async () => { - let innerText = this.logBox.getInnerText(); + let text = this.logBoxPre.textContent; for (let i = 0; i < this.inSection; i++) { - innerText += '\nend'; + text += '\nend'; } const graph = await mermaid.mermaidAPI.render( this.element.getId(), - innerText, + text, ); this.renderBox.setInnerHTML(graph); }; diff --git a/forum-network/src/tests/forum.html b/forum-network/src/tests/forum.html index 0a2d596..eecc4f0 100644 --- a/forum-network/src/tests/forum.html +++ b/forum-network/src/tests/forum.html @@ -113,7 +113,7 @@ forum, new PostContent({ hello: "y'all" }) .setTitle('Post 3') - .addCitation(postId2, -0.5), + .addCitation(postId1, -0.5), { fee: 100, duration: 1000, @@ -128,5 +128,28 @@ await pool3.evaluateWinningConditions(); await updateDisplayValuesAndDelay(); + await scene.endSection(); + await scene.startSection(); + + const { pool: pool4 } = await expert3.submitPostWithFee( + bench, + forum, + new PostContent({ hello: "y'all" }) + .setTitle('Post 4') + .addCitation(postId2, -0.5), + { + fee: 100, + duration: 1000, + tokenLossRatio: 1, + }, + ); + await updateDisplayValuesAndDelay(1000); + + // await expert1.stake(pool3, { position: true, amount 1}); + // await updateDisplayValuesAndDelay(); + + await pool4.evaluateWinningConditions(); + await updateDisplayValuesAndDelay(); + await scene.endSection(); diff --git a/forum-network/src/util.js b/forum-network/src/util.js index 68db951..e7cebe8 100644 --- a/forum-network/src/util.js +++ b/forum-network/src/util.js @@ -28,3 +28,5 @@ export const hexToRGB = (input) => { const b = parseInt(`${input[4]}${input[5]}`, 16); return { r, g, b }; }; + +export const displayNumber = (value) => (value.toString().length > 6 ? value.toFixed(2) : value);