From e4566d1a45756b075593e6b7d4a096c432f9b1f2 Mon Sep 17 00:00:00 2001
From: Ladd Hoffman <ladd.hoffman@swarmsolutions.com>
Date: Thu, 5 Jan 2023 14:30:21 -0600
Subject: [PATCH] Show flowchart at top of page

---
 forum-network/src/classes/box.js   |  9 +++++++--
 forum-network/src/classes/scene.js | 17 +++++++++++------
 forum-network/src/index.css        |  4 ++++
 3 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/forum-network/src/classes/box.js b/forum-network/src/classes/box.js
index cb3af73..654a7d9 100644
--- a/forum-network/src/classes/box.js
+++ b/forum-network/src/classes/box.js
@@ -16,12 +16,17 @@ export class Box {
   }
 
   flex() {
-    this.el.classList.add('flex');
+    this.addClass('flex');
     return this;
   }
 
   monospace() {
-    this.el.classList.add('monospace');
+    this.addClass('monospace');
+    return this;
+  }
+
+  hidden() {
+    this.addClass('hidden');
     return this;
   }
 
diff --git a/forum-network/src/classes/scene.js b/forum-network/src/classes/scene.js
index 7e4be90..783a76c 100644
--- a/forum-network/src/classes/scene.js
+++ b/forum-network/src/classes/scene.js
@@ -4,13 +4,13 @@ import { Action } from './action.js';
 import { debounce } from '../util.js';
 
 class MermaidDiagram {
-  constructor(box) {
+  constructor(box, logBox) {
     this.box = box;
     this.container = this.box.addBox('Container');
     this.element = this.box.addBox('Element');
     this.renderBox = this.box.addBox('Render');
     this.box.addBox('Spacer').setInnerHTML('&nbsp;');
-    this.logBox = this.box.addBox('Log');
+    this.logBox = logBox;
   }
 
   async log(msg, render = true) {
@@ -40,7 +40,8 @@ export class Scene {
     this.box = rootBox.addBox(name);
     this.titleBox = this.box.addBox('Title').setInnerHTML(name);
     this.box.addBox('Spacer').setInnerHTML('&nbsp;');
-    this.displayValuesBox = this.box.addBox('Values');
+    this.topSection = this.box.addBox('Top section').flex();
+    this.displayValuesBox = this.topSection.addBox('Values');
     this.box.addBox('Spacer').setInnerHTML('&nbsp;');
     this.actors = new Set();
 
@@ -65,14 +66,18 @@ export class Scene {
 
   withSequenceDiagram() {
     const box = this.box.addBox('Sequence diagram');
-    this.sequence = new MermaidDiagram(box);
+    this.box.addBox('Spacer').setInnerHTML('&nbsp;');
+    const logBox = this.box.addBox('Sequence diagram text');
+    this.sequence = new MermaidDiagram(box, logBox);
     this.sequence.log('sequenceDiagram', false);
     return this;
   }
 
   withFlowchart(direction = 'BT') {
-    const box = this.box.addBox('Flowchart');
-    this.flowchart = new MermaidDiagram(box);
+    const box = this.topSection.addBox('Flowchart');
+    this.box.addBox('Spacer').setInnerHTML('&nbsp;');
+    const logBox = this.box.addBox('Flowchart text');
+    this.flowchart = new MermaidDiagram(box, logBox);
     this.flowchart.log(`graph ${direction}`, false);
     return this;
   }
diff --git a/forum-network/src/index.css b/forum-network/src/index.css
index 83daf58..a8f687b 100644
--- a/forum-network/src/index.css
+++ b/forum-network/src/index.css
@@ -32,3 +32,7 @@ a:visited {
 svg {
   width: 800px;
 }
+.hidden {
+  /* display: none; */
+  /* visibility: hidden; */
+}