Misc. fixes/improvements

Standardize vertex as label + list of properties, for rendering and editing
This commit is contained in:
Ladd Hoffman 2023-07-09 21:48:00 -05:00
parent 56132b2fec
commit 07370be4fa
10 changed files with 116 additions and 88 deletions

View File

@ -2,7 +2,6 @@ import { Action } from '../display/action.js';
import { CryptoUtil } from '../supporting/crypto.js'; import { CryptoUtil } from '../supporting/crypto.js';
import { ReputationHolder } from '../reputation/reputation-holder.js'; import { ReputationHolder } from '../reputation/reputation-holder.js';
import { EdgeTypes } from '../../util/constants.js'; import { EdgeTypes } from '../../util/constants.js';
import { displayNumber } from '../../util/helpers.js';
export class Expert extends ReputationHolder { export class Expert extends ReputationHolder {
constructor(dao, name, scene, options) { constructor(dao, name, scene, options) {
@ -30,15 +29,6 @@ export class Expert extends ReputationHolder {
return tokenValues.reduce((value, total) => total += value, 0); return tokenValues.reduce((value, total) => total += value, 0);
} }
getLabel() {
return `${this.name}
<table><tr>
<td>reputation</td>
<td>${displayNumber(this.getReputation())}</td>
</tr></table>`
.replaceAll(/\n\s*/g, '');
}
async initialize() { async initialize() {
this.reputationKey = await CryptoUtil.generateAsymmetricKey(); this.reputationKey = await CryptoUtil.generateAsymmetricKey();
// this.reputationPublicKey = await CryptoUtil.exportKey(this.reputationKey.publicKey); // this.reputationPublicKey = await CryptoUtil.exportKey(this.reputationKey.publicKey);

View File

@ -22,22 +22,15 @@ class Post extends Actor {
this.title = postContent.title; this.title = postContent.title;
} }
getLabel() {
return `${this.name}
<table><tr>
<td>initial</td>
<td>${displayNumber(this.initialValue)}</td>
</tr><tr>
<td>value</td>
<td>${displayNumber(this.value)}</td>
</tr></table>`
.replaceAll(/\n\s*/g, '');
}
async setValue(value) { async setValue(value) {
this.value = value; this.value = value;
await this.setDisplayValue('value', value); await this.setDisplayValue('value', value);
this.forum.graph.getVertex(this.id).setDisplayLabel(this.getLabel()); this.forum.graph.getVertex(this.id).setProperty('value', value).displayVertex();
}
setInitialValue(value) {
this.initialValue = value;
this.forum.graph.getVertex(this.id).setProperty('initialValue', value).displayVertex();
} }
} }
@ -62,7 +55,7 @@ export class Forum extends ReputationHolder {
async addPost(senderId, postContent) { async addPost(senderId, postContent) {
console.log('addPost', { senderId, postContent }); console.log('addPost', { senderId, postContent });
const post = new Post(this, senderId, postContent); const post = new Post(this, senderId, postContent);
this.graph.addVertex(VertexTypes.POST, post.id, post, post.getLabel()); this.graph.addVertex(VertexTypes.POST, post.id, post, post.name);
for (const { postId: citedPostId, weight } of post.citations) { for (const { postId: citedPostId, weight } of post.citations) {
// Special case: Incinerator // Special case: Incinerator
if (citedPostId === INCINERATOR_ADDRESS && !this.graph.getVertex(INCINERATOR_ADDRESS)) { if (citedPostId === INCINERATOR_ADDRESS && !this.graph.getVertex(INCINERATOR_ADDRESS)) {
@ -98,14 +91,13 @@ export class Forum extends ReputationHolder {
const post = postVertex.data; const post = postVertex.data;
post.setStatus('Validated'); post.setStatus('Validated');
post.initialValue = initialValue; post.initialValue = initialValue;
postVertex.setDisplayLabel(post.getLabel());
const addAuthorToGraph = (publicKey, weight, authorTokenId) => { const addAuthorToGraph = (publicKey, weight, authorTokenId) => {
// For graph display purposes, we want to use the existing Expert actors from the current scene. // For graph display purposes, we want to use the existing Expert actors from the current scene.
const author = this.scene.findActor(({ reputationPublicKey }) => reputationPublicKey === publicKey); const author = this.scene.findActor(({ reputationPublicKey }) => reputationPublicKey === publicKey);
author.setDisplayValue('reputation', () => author.getReputation()); author.setDisplayValue('reputation', () => author.getReputation());
const authorVertex = this.graph.getVertex(publicKey) const authorVertex = this.graph.getVertex(publicKey)
?? this.graph.addVertex(VertexTypes.AUTHOR, publicKey, author, author.getLabel(), { ?? this.graph.addVertex(VertexTypes.AUTHOR, publicKey, author, author.name, {
hide: author.options.hide, hide: author.options.hide,
}); });
this.graph.addEdge( this.graph.addEdge(
@ -161,15 +153,15 @@ export class Forum extends ReputationHolder {
} else { } else {
this.dao.reputation.transferValueFrom(tokenId, authorTokenId, amount); this.dao.reputation.transferValueFrom(tokenId, authorTokenId, amount);
} }
await author.computeDisplayValues(); await author.computeDisplayValues((label, value) => authorVertex.setProperty(label, value));
authorVertex.setDisplayLabel(author.getLabel()); authorVertex.displayVertex();
} }
} }
const senderVertex = this.graph.getVertex(post.senderId); const senderVertex = this.graph.getVertex(post.senderId);
const { data: sender } = senderVertex; const { data: sender } = senderVertex;
await sender.computeDisplayValues(); await sender.computeDisplayValues((label, value) => senderVertex.setProperty(label, value));
senderVertex.setDisplayLabel(sender.getLabel()); senderVertex.displayVertex();
// Transfer ownership of the minted tokens to the authors // Transfer ownership of the minted tokens to the authors
for (const authorEdge of postVertex.getEdges(EdgeTypes.AUTHOR, true)) { for (const authorEdge of postVertex.getEdges(EdgeTypes.AUTHOR, true)) {

View File

@ -83,10 +83,16 @@ export class Actor {
return this; return this;
} }
async computeDisplayValues() { /**
* @param {(label: string, value) => {}} cb
*/
async computeDisplayValues(cb) {
for (const [label, fn] of this.valueFunctions.entries()) { for (const [label, fn] of this.valueFunctions.entries()) {
const value = fn(); const value = fn();
await this.setDisplayValue(label, value); await this.setDisplayValue(label, value);
if (cb) {
cb(label, value);
}
} }
} }

View File

@ -4,7 +4,8 @@ import { randomID } from '../../util/helpers.js';
export class Box { export class Box {
constructor(name, parentEl, options = {}) { constructor(name, parentEl, options = {}) {
this.name = name; this.name = name;
this.el = document.createElement('div'); const { tagName = 'div' } = options;
this.el = document.createElement(tagName);
this.el.box = this; this.el.box = this;
const id = options.id ?? randomID(); const id = options.id ?? randomID();
this.el.id = `${parentEl.id}_box_${id}`; this.el.id = `${parentEl.id}_box_${id}`;

View File

@ -1,30 +1,29 @@
import { randomID } from '../../util/helpers.js'; import { randomID } from '../../util/helpers.js';
import { Box } from './box.js'; import { Box } from './box.js';
const updateValuesOnEventTypes = ['keyup', 'mouseup'];
export class FormElement extends Box { export class FormElement extends Box {
constructor(name, form, opts) { constructor(name, form, opts) {
const parentEl = opts.parentEl ?? form.el; const parentEl = opts.parentEl ?? form.el;
super(name, parentEl, opts); super(name, parentEl, opts);
this.form = form; this.form = form;
this.id = opts.id ?? name; this.id = opts.id ?? name;
this.includeInOutput = opts.includeInOutput ?? true; const { cb, cbEventTypes = ['change'], cbOnInit = false } = opts;
const { cb } = opts;
if (cb) { if (cb) {
updateValuesOnEventTypes.forEach((eventType) => this.el.addEventListener(eventType, () => { cbEventTypes.forEach((eventType) => this.el.addEventListener(eventType, () => {
cb(this, { initializing: false }); cb(this, { initializing: false });
})); }));
if (cbOnInit) {
cb(this, { initializing: true }); cb(this, { initializing: true });
} }
} }
}
} }
export class Button extends FormElement { export class Button extends FormElement {
constructor(name, form, opts) { constructor(name, form, opts) {
super(name, form, opts); super(name, form, { ...opts, cbEventTypes: ['click'] });
this.button = document.createElement('button'); this.button = document.createElement('button');
this.button.setAttribute('type', 'button'); this.button.setAttribute('type', opts.type ?? 'button');
this.button.innerHTML = name; this.button.innerHTML = name;
this.button.disabled = !!opts.disabled; this.button.disabled = !!opts.disabled;
this.el.appendChild(this.button); this.el.appendChild(this.button);
@ -77,7 +76,6 @@ export class SubForm extends FormElement {
this.subForm = subForm; this.subForm = subForm;
if (opts.subFormArray) { if (opts.subFormArray) {
opts.subFormArray.subForms.push(this); opts.subFormArray.subForms.push(this);
this.includeInOutput = false;
} }
} }
@ -88,10 +86,12 @@ export class SubForm extends FormElement {
export class Form extends Box { export class Form extends Box {
constructor(document, opts = {}) { constructor(document, opts = {}) {
super(opts.name, opts.parentEl || document.el, opts); super(opts.name, opts.parentEl || document.el, { ...opts, tagName: 'form' });
this.document = document; this.document = document;
this.items = []; this.items = [];
this.id = opts.id ?? `form_${randomID()}`; this.id = opts.id ?? `form_${randomID()}`;
// Action should be handled by a submit button
this.el.onsubmit = () => false;
} }
button(opts) { button(opts) {
@ -124,11 +124,11 @@ export class Form extends Box {
} }
get value() { get value() {
return this.items.reduce((result, { id, value, includeInOutput }) => { return this.items.reduce((obj, { id, value }) => {
if (includeInOutput && value !== undefined) { if (value !== undefined) {
result[id] = value; obj[id] = value;
} }
return result; return obj;
}, {}); }, {});
} }
} }

View File

@ -55,7 +55,8 @@ export class Edge {
this.graph.flowchart?.log(`${this.from.id} --- ${this.getFlowchartNode()} --> ${this.to.id}`); this.graph.flowchart?.log(`${this.from.id} --- ${this.getFlowchartNode()} --> ${this.to.id}`);
this.graph.flowchart?.log(`class ${Edge.getCombinedKey(this)} edge`); this.graph.flowchart?.log(`class ${Edge.getCombinedKey(this)} edge`);
if (this.graph.editable && !this.installedClickCallback) { if (this.graph.editable && !this.installedClickCallback) {
this.graph.flowchart?.log(`click ${Edge.getCombinedKey(this)} WDGHandler${this.graph.index} "Edit Edge"`); this.graph.flowchart?.log(`click ${Edge.getCombinedKey(this)} WDGHandler${this.graph.index} \
"Edit Edge ${this.from.id} -> ${this.to.id}"`);
this.installedClickCallback = true; this.installedClickCallback = true;
} }
} }
@ -72,20 +73,19 @@ export class Edge {
id: 'to', name: 'to', defaultValue: to, disabled: true, id: 'to', name: 'to', defaultValue: to, disabled: true,
}); });
doc.remark('<h4>Edge Types</h4>', { parentEl: form.el });
const subFormArray = form.subFormArray({ id: 'edges', name: 'edges' }).lastItem; const subFormArray = form.subFormArray({ id: 'edges', name: 'edges' }).lastItem;
const addEdgeForm = (edge) => { const addEdgeForm = (edge) => {
const { subForm } = form.subForm({ name: 'subform', subFormArray }).lastItem; const { subForm } = form.subForm({ name: 'subform', subFormArray }).lastItem;
doc.remark('<br/>', { parentEl: subForm.el }); subForm.textField({ id: 'type', name: 'type', defaultValue: edge.type })
subForm.textField({ id: 'type', name: 'type', defaultValue: edge.type }); .textField({ id: 'weight', name: 'weight', defaultValue: edge.weight })
subForm.textField({ id: 'weight', name: 'weight', defaultValue: edge.weight }); .button({
subForm.button({
id: 'remove', id: 'remove',
name: 'Remove Edge Type', name: 'Remove Edge Type',
cb: (_, { initializing }) => { cb: () => subFormArray.remove(subForm),
if (initializing) return;
subFormArray.remove(subForm);
},
}); });
doc.remark('<br>', { parentEl: subForm.el });
}; };
for (const edge of graph.getEdges(null, from, to)) { for (const edge of graph.getEdges(null, from, to)) {
@ -95,23 +95,19 @@ export class Edge {
form.button({ form.button({
id: 'add', id: 'add',
name: 'Add Edge Type', name: 'Add Edge Type',
cb: (_, { initializing }) => { cb: () => addEdgeForm(new Edge(graph, null, graph.getVertex(from), graph.getVertex(to))),
if (initializing) return;
addEdgeForm(new Edge(graph, null, graph.getVertex(from), graph.getVertex(to)));
},
}) })
.button({ .button({
id: 'save', id: 'save',
name: 'Save', name: 'Save',
cb: ({ form: { value } }, { initializing }) => { cb: ({ form: { value: { edges } } }) => {
if (initializing) return;
// Handle additions and updates // Handle additions and updates
for (const { type, weight } of value.edges) { for (const { type, weight } of edges) {
graph.setEdgeWeight(type, from, to, weight); graph.setEdgeWeight(type, from, to, weight);
} }
// Handle removals // Handle removals
for (const edge of graph.getEdges(null, from, to)) { for (const edge of graph.getEdges(null, from, to)) {
if (!value.edges.find(({ type }) => type === edge.type)) { if (!edges.find(({ type }) => type === edge.type)) {
graph.deleteEdge(edge.type, from, to); graph.deleteEdge(edge.type, from, to);
} }
} }
@ -121,10 +117,7 @@ export class Edge {
.button({ .button({
id: 'cancel', id: 'cancel',
name: 'Cancel', name: 'Cancel',
cb: (_, { initializing }) => { cb: () => doc.clear(),
if (initializing) return;
doc.clear();
},
}); });
} }
} }

View File

@ -1,15 +1,19 @@
import { displayNumber } from '../../util/helpers.js';
export class Vertex { export class Vertex {
constructor(graph, type, id, data, options = {}) { constructor(graph, type, id, data, options = {}) {
this.graph = graph; this.graph = graph;
this.type = type; this.type = type;
this.id = id; this.id = id;
this.data = data; this.data = data;
this.label = options.label ?? this.id;
this.options = options; this.options = options;
this.edges = { this.edges = {
from: [], from: [],
to: [], to: [],
}; };
this.installedClickCallback = false; this.installedClickCallback = false;
this.properties = new Map();
} }
reset() { reset() {
@ -22,18 +26,28 @@ export class Vertex {
); );
} }
setDisplayLabel(label) { setProperty(key, value) {
this.label = label; this.properties.set(key, value);
this.displayVertex(); return this;
} }
displayVertex() { displayVertex() {
if (this.options.hide) { if (this.options.hide) {
return; return;
} }
this.graph.flowchart?.log(`${this.id}[${this.label}]`);
let html = `${this.label}`;
html += '<table>';
for (const [key, value] of this.properties.entries()) {
const displayValue = typeof value === 'number' ? displayNumber(value) : value;
html += `<tr><td>${key}</td><td>${displayValue}</td></tr>`;
}
html += '</table>';
html = html.replaceAll(/\n\s*/g, '');
this.graph.flowchart?.log(`${this.id}[${html}]`);
if (this.graph.editable && !this.installedClickCallback) { if (this.graph.editable && !this.installedClickCallback) {
this.graph.flowchart?.log(`click ${this.id} WDGHandler${this.graph.index} "Edit Vertex"`); this.graph.flowchart?.log(`click ${this.id} WDGHandler${this.graph.index} "Edit Vertex ${this.id}"`);
this.installedClickCallback = true; this.installedClickCallback = true;
} }
} }
@ -44,24 +58,50 @@ export class Vertex {
if (!vertex) { if (!vertex) {
throw new Error(`Could not find WDG Vertex ${vertexId}`); throw new Error(`Could not find WDG Vertex ${vertexId}`);
} }
doc.remark('<h3>Edit Vertex</h3>');
const form = doc.form().lastElement; const form = doc.form().lastElement;
doc.remark('<h3>Edit Vertex</h3>', { parentEl: form.el });
form form
.textField({ .textField({
id: 'id', name: 'id', defaultValue: vertex.id, id: 'id', name: 'id', defaultValue: vertex.id,
}) })
.textField({ id: 'type', name: 'type', defaultValue: vertex.type }) .textField({ id: 'type', name: 'type', defaultValue: vertex.type })
.textField({ id: 'label', name: 'label', defaultValue: vertex.label }) .textField({ id: 'label', name: 'label', defaultValue: vertex.label });
doc.remark('<h4>Properties</h4>', { parentEl: form.el });
const subFormArray = form.subFormArray({ id: 'properties', name: 'properties' }).lastItem;
const addPropertyForm = (key, value) => {
const { subForm } = form.subForm({ name: 'subform', subFormArray }).lastItem;
subForm.textField({ id: 'key', name: 'key', defaultValue: key })
.textField({ id: 'value', name: 'value', defaultValue: value })
.button({
id: 'remove',
name: 'Remove Property',
cb: () => subFormArray.remove(subForm),
});
doc.remark('<br>', { parentEl: subForm.el });
};
for (const [key, value] of vertex.properties.entries()) {
addPropertyForm(key, value);
}
form.button({
id: 'add',
name: 'Add Property',
cb: () => addPropertyForm('', ''),
})
.button({ .button({
id: 'save', id: 'save',
name: 'Save', name: 'Save',
cb: ({ form: { value } }, { initializing }) => { type: 'submit',
if (initializing) return; cb: ({ form: { value: formValue } }) => {
let fullRedraw = false; let fullRedraw = false;
if (value.id && value.id !== vertex.id) { if (formValue.id !== vertex.id) {
fullRedraw = true; fullRedraw = true;
} }
Object.assign(vertex, value); // TODO: preserve data types of properties
formValue.properties = new Map(formValue.properties.map(({ key, value }) => [key, value]));
Object.assign(vertex, formValue);
vertex.displayVertex(); vertex.displayVertex();
if (fullRedraw) { if (fullRedraw) {
graph.redraw(); graph.redraw();
@ -71,10 +111,7 @@ export class Vertex {
.button({ .button({
id: 'cancel', id: 'cancel',
name: 'Cancel', name: 'Cancel',
cb: (_, { initializing }) => { cb: () => doc.clear(),
if (initializing) return;
doc.clear();
},
}); });
return doc; return doc;
} }

View File

@ -103,9 +103,9 @@ export class WeightedDirectedGraph {
if (this.vertices.has(id)) { if (this.vertices.has(id)) {
throw new Error(`Vertex already exists with id: ${id}`); throw new Error(`Vertex already exists with id: ${id}`);
} }
const vertex = new Vertex(this, type, id, data, options); const vertex = new Vertex(this, type, id, data, { ...options, label });
this.vertices.set(id, vertex); this.vertices.set(id, vertex);
vertex.setDisplayLabel(label ?? id); vertex.displayVertex();
return vertex; return vertex;
} }

View File

@ -83,3 +83,6 @@ label > div {
display: inline-block; display: inline-block;
min-width: 50px; min-width: 50px;
} }
table {
width: 100%;
}

View File

@ -27,7 +27,13 @@ describe('Document > Form > TextField', () => {
dv.set(value); dv.set(value);
}; };
form.textField({ id: 'input1', name: 'Input 1', cb: updateFieldValueDisplay }); form.textField({
id: 'input1',
name: 'Input 1',
cb: updateFieldValueDisplay,
cbEventTypes: ['keydown', 'keyup'],
cbOnInit: true,
});
doc.remark('Hmm...!'); doc.remark('Hmm...!');
}); });
// it('can exist within a graph', () => { // it('can exist within a graph', () => {