Minor cleanup

forum-network/src/classes/display/flowchart.js

@@ -5,7 +5,6 @@ export class Flowchart extends MermaidDiagram {
     super(box, logBox);
     this.direction = direction;
     this.init();
-    this.controlBox = this.box.addBox('Controls');
   }
 
   init() {

forum-network/src/classes/display/form.js

@@ -2,7 +2,7 @@ import { randomID } from '../../util/helpers.js';
 import { Box } from './box.js';
 
 export class FormElement extends Box {
-  constructor(name, form, opts) {
+  constructor(name, form, opts = {}) {
     const parentEl = opts.parentEl ?? form.el;
     super(name, parentEl, opts);
     this.form = form;
@@ -71,7 +71,7 @@ export class SubFormArray extends FormElement {
 export class SubForm extends FormElement {
   constructor(name, form, opts) {
     const parentEl = opts.subFormArray ? opts.subFormArray.el : form.el;
-    const subForm = form.document.form({ name, parentEl }).lastElement;
+    const subForm = form.document.form({ name, parentEl, tagName: 'div' }).lastElement;
     super(name, form, { ...opts, parentEl });
     this.subForm = subForm;
     if (opts.subFormArray) {
@@ -86,7 +86,7 @@ export class SubForm extends FormElement {
 
 export class Form extends Box {
   constructor(document, opts = {}) {
-    super(opts.name, opts.parentEl || document.el, { ...opts, tagName: 'form' });
+    super(opts.name, opts.parentEl || document.el, { tagName: 'form', ...opts });
     this.document = document;
     this.items = [];
     this.id = opts.id ?? `form_${randomID()}`;

forum-network/src/classes/display/mermaid.js

@@ -28,6 +28,7 @@ export class MermaidDiagram {
       },
       securityLevel: 'loose', // 'loose' so that we can use click events
       // logLevel: 'debug',
+      useMaxWidth: true,
     });
   }
 

forum-network/src/classes/display/scene-controls.js

@@ -6,7 +6,7 @@ class Button {
   }
 }
 
-export class Controls {
+export class SceneControls {
   constructor(parentBox) {
     this.disableAutoplayButton = new Button('Disable Auto-play', () => {
       const url = new URL(window.location.href);

forum-network/src/classes/display/scene.js

@@ -4,7 +4,7 @@ import { MermaidDiagram } from './mermaid.js';
 import { SequenceDiagram } from './sequence.js';
 import { Table } from './table.js';
 import { Flowchart } from './flowchart.js';
-import { Controls } from './controls.js';
+import { SceneControls } from './scene-controls.js';
 import { Box } from './box.js';
 import { Document } from './document.js';
 
@@ -33,8 +33,8 @@ export class Scene {
 
     if (!window.disableSceneControls) {
       this.topRail = new Box('Top rail', document.body, { prepend: true }).addClass('top-rail');
-      this.controlsBox = this.topRail.addBox('Controls').addClass('controls');
+      const controlsBox = this.topRail.addBox('SceneControls').addClass('scene-controls');
-      this.controls = new Controls(this.controlsBox);
+      this.controls = new SceneControls(controlsBox);
     }
   }
 

forum-network/src/classes/supporting/edge.js

@@ -77,8 +77,12 @@ export class Edge {
 
     const addEdgeForm = (edge) => {
       const { subForm } = form.subForm({ name: 'subform', subFormArray }).lastItem;
-      subForm.textField({ id: 'type', name: 'type', defaultValue: edge.type })
+      subForm.textField({
-        .textField({ id: 'weight', name: 'weight', defaultValue: edge.weight })
+        id: 'type', name: 'type', defaultValue: edge.type, required: true,
+      })
+        .textField({
+          id: 'weight', name: 'weight', defaultValue: edge.weight, required: true,
+        })
         .button({
           id: 'remove',
           name: 'Remove Edge Type',
@@ -99,7 +103,15 @@ export class Edge {
       .button({
         id: 'save',
         name: 'Save',
+        type: 'submit',
         cb: ({ form: { value: { edges } } }) => {
+          // Do validation
+          for (const { type, weight } of edges) {
+            if (type === null || weight === null) {
+              graph.errorDoc.remark('<pre>type and weight are required</pre>');
+              return;
+            }
+          }
           // Handle additions and updates
           for (const { type, weight } of edges) {
             graph.setEdgeWeight(type, from, to, weight);
@@ -111,6 +123,7 @@ export class Edge {
             }
           }
           graph.redraw();
+          graph.errorDoc.clear();
         },
       })
       .button({

forum-network/src/classes/supporting/vertex.js

@@ -107,20 +107,28 @@ export class Vertex {
           Object.assign(vertex, formValue);
           vertex.displayVertex();
         } else {
-          graph.addVertex(formValue.type, formValue.id, null, formValue.label);
+          const newVertex = graph.addVertex(formValue.type, formValue.id, null, formValue.label);
+          Object.assign(newVertex, formValue);
+          doc.clear();
+          Vertex.prepareEditorDocument(graph, doc, newVertex.id);
         }
         if (fullRedraw) {
           graph.redraw();
         }
-        if (!vertex) {
-          // This was a new vertex. Now let's edit.
-          doc.clear();
-          Vertex.prepareEditorDocument(graph, doc, formValue.id);
-        }
       },
     });
 
     if (vertex) {
+      form.button({
+        id: 'delete',
+        name: 'Delete Vertex',
+        cb: () => {
+          graph.deleteVertex(vertex.id);
+          graph.redraw();
+          graph.resetEditorDocument();
+        },
+      });
+
       doc.remark('<h3>New Edge</h3>', { parentEl: form.el });
       const { subForm } = form.subForm({ name: 'newEdge' }).lastItem;
       subForm.textField({ name: 'to' });
@@ -142,18 +150,6 @@ export class Vertex {
       cb: () => graph.resetEditorDocument(),
     });
 
-    if (vertex) {
-      form.button({
-        id: 'delete',
-        name: 'Delete Vertex',
-        cb: () => {
-          graph.deleteVertex(vertex.id);
-          graph.redraw();
-          graph.resetEditorDocument();
-        },
-      });
-    }
-
     return doc;
   }
 }

forum-network/src/classes/supporting/wdg.js

@@ -95,9 +95,10 @@ export class WeightedDirectedGraph {
     this.scene?.withSectionFlowchart();
     this.flowchart = this.scene?.lastFlowchart;
     if (this.editable) {
-      this.editorDoc = new Document('Controls', this.flowchart.controlBox.el);
+      this.editorDoc = new Document('WDGControls', this.flowchart.box.el);
       this.resetEditorDocument();
     }
+    this.errorDoc = new Document('WDGErrors', this.flowchart.box.el);
     return this;
   }
 

forum-network/src/index.css

@@ -42,7 +42,7 @@ a:visited {
   width: 100%;
   height: 0;
 }
-.controls {
+.scene-controls {
   position: relative;
   left: 150px;
 }
@@ -86,3 +86,6 @@ label > div {
 table {
   width: 100%;
 }
+form {
+  min-width: 20em;
+}

forum-network/src/tests/scripts/availability.test.js

@@ -4,7 +4,7 @@ import { Expert } from '../../classes/actors/expert.js';
 import { DAO } from '../../classes/dao/dao.js';
 import { Public } from '../../classes/actors/public.js';
 import { PostContent } from '../../classes/supporting/post-content.js';
-import { delayOrWait } from '../../classes/display/controls.js';
+import { delayOrWait } from '../../classes/display/scene-controls.js';
 import { mochaRun } from '../../util/helpers.js';
 
 const DELAY_INTERVAL = 100;

forum-network/src/tests/scripts/forum.test-util.js

@@ -3,7 +3,7 @@ import { Scene } from '../../classes/display/scene.js';
 import { Expert } from '../../classes/actors/expert.js';
 import { PostContent } from '../../classes/supporting/post-content.js';
 import { DAO } from '../../classes/dao/dao.js';
-import { delayOrWait } from '../../classes/display/controls.js';
+import { delayOrWait } from '../../classes/display/scene-controls.js';
 
 export class ForumTest {
   constructor(options) {

forum-network/src/tests/scripts/validation-pool.test.js

@@ -3,7 +3,7 @@ import { Scene } from '../../classes/display/scene.js';
 import { Expert } from '../../classes/actors/expert.js';
 import { PostContent } from '../../classes/supporting/post-content.js';
 import { DAO } from '../../classes/dao/dao.js';
-import { delayOrWait } from '../../classes/display/controls.js';
+import { delayOrWait } from '../../classes/display/scene-controls.js';
 import { mochaRun } from '../../util/helpers.js';
 
 const POOL_DURATION_MS = 100;