# HG changeset patch
# User drewp@bigasterisk.com
# Date 1631428117 25200
# Node ID 24e8cd8fcdcd579854cc0a338d9299507f5af392
# Parent  ea559a84671417586db67efb8af743bac7ec852b
new grid layout in web ui

diff -r ea559a846714 -r 24e8cd8fcdcd service/mqtt_to_rdf/src/index.ts
--- a/service/mqtt_to_rdf/src/index.ts	Sat Sep 11 23:27:32 2021 -0700
+++ b/service/mqtt_to_rdf/src/index.ts	Sat Sep 11 23:28:37 2021 -0700
@@ -21,10 +21,6 @@
 //   return "(unknown)";
 // }
 
-interface Msg {
-  t: number;
-  msg: string;
-}
 interface GraphAtTime {
   t: number;
   n3: string;
@@ -36,10 +32,8 @@
 }
 interface Subscribed {
   topic: string;
-  recentMessages: Msg[];
-  recentParsed: GraphAtTime[];
-  recentConversions: GraphAtTime[];
-  currentMetrics: Metric[];
+  recentMessageGraphs: GraphAtTime[];
+  recentMetrics: Metric[];
   currentOutputGraph: GraphAtTime;
 }
 interface PageData {
@@ -81,13 +75,8 @@
     subscribed: [
       {
         topic: "top1",
-        recentMessages: [
-          { t: 123456, msg: "one" },
-          { t: 234567, msg: "two" },
-        ],
-        recentParsed: [{ t: 123, n3: ":a :b :c ." }],
-        recentConversions: [],
-        currentMetrics: [],
+        recentMessageGraphs: [],
+        recentMetrics: [],
         currentOutputGraph: { t: 1, n3: "(n3)" },
       },
     ],
@@ -97,23 +86,19 @@
     const d = this.pageData;
     const now = Date.now() / 1000;
     const ago = (t: number) => html`${Math.round(now - t)}s ago`;
-    const recentMsg = (m: Msg) => html` <div>${ago(m.t)} msg=${m.msg}</div> `;
     const topicItem = (t: Subscribed, index: number) =>
       html`<div class="topic" style="grid-column: 1; grid-row: ${index + 2}">
-        <span class="topic">${t.topic}</span>
-        ${t.recentMessages.map(recentMsg)}
+        <span class="topic">${t.topic} sticky this to graph column</span>
       </div>`;
 
-    const parsedMessage = (g: GraphAtTime) => html` <div class="graph">graph: ${g.n3}</div> `;
-    const parsedMessages = (t: Subscribed, index: number) =>
-      html` <div style="grid-column: 2; grid-row: ${index + 2}">${t.recentParsed.map(parsedMessage)}</div> `;
+    const parsedGraphAtTime = (g: GraphAtTime) => html` <div class="graph">graph: ${g.n3}</div> `;
+    const recentMessageGraphs = (t: Subscribed, index: number) =>
+      html` <div style="grid-column: 2; grid-row: ${index + 2}">${t.recentMessageGraphs.map(parsedGraphAtTime)}</div> `;
 
     const metric = (m: Metric) => html`<div>metrix ${m.name} ${JSON.stringify(m.labels)} = ${m.value}</div>`;
-    const conversions = (t: Subscribed, index: number) =>
-      html` <div style="grid-column: 3; grid-row: ${index + 2}">${t.recentConversions.map(parsedMessage)}</div> `;
-    const outputMetrics = (t: Subscribed, index: number) => html` <div style="grid-column: 4; grid-row: ${index + 2}">${t.currentMetrics.map(metric)}</div> `;
+    const outputMetrics = (t: Subscribed, index: number) => html` <div style="grid-column: 3; grid-row: ${index + 2}">${t.recentMetrics.map(metric)}</div> `;
     const outputGraph = (t: Subscribed, index: number) =>
-      html` <div style="grid-column: 5; grid-row: ${index + 2}">${parsedMessage(t.currentOutputGraph)}</div> `;
+      html` <div style="grid-column: 4; grid-row: ${index + 2}">${parsedGraphAtTime(t.currentOutputGraph)}</div> `;
     return html`
       <h1>mqtt_to_rdf</h1>
 
@@ -123,16 +108,13 @@
         <div class="hd" style="grid-row: 1; grid-column: 1">subscribed topics</div>
         ${d.subscribed.map(topicItem)}
 
-        <div class="hd" style="grid-row: 1; grid-column: 2">parsed message: rx stream of Graph</div>
-        ${d.subscribed.map(parsedMessages)}
+        <div class="hd" style="grid-row: 1; grid-column: 2">recent incoming messages</div>
+        ${d.subscribed.map(recentMessageGraphs)}
 
-        <div class="hd" style="grid-row: 1; grid-column: 3">conversions: rx stream (possible separate times from the previous) of Callable[[Graph], Graph]</div>
-        ${d.subscribed.map(conversions)}
-
-        <div class="hd" style="grid-row: 1; grid-column: 4">output metrics: prom collection according to converted graph</div>
+        <div class="hd" style="grid-row: 1; grid-column: 3">output metrics: prom collection according to converted graph</div>
         ${d.subscribed.map(outputMetrics)}
 
-        <div class="hd" style="grid-row: 1; grid-column: 5">output graph: PatchableGraph</div>
+        <div class="hd" style="grid-row: 1; grid-column: 4">output subgraph</div>
         ${d.subscribed.map(outputGraph)}
       </section>
     `;
diff -r ea559a846714 -r 24e8cd8fcdcd service/mqtt_to_rdf/src/style.styl
--- a/service/mqtt_to_rdf/src/style.styl	Sat Sep 11 23:27:32 2021 -0700
+++ b/service/mqtt_to_rdf/src/style.styl	Sat Sep 11 23:28:37 2021 -0700
@@ -33,5 +33,6 @@
   font-family: monospace
 
 .graph
-  white-space: pre-line
-  font-family: monospace
\ No newline at end of file
+  white-space: pre-wrap
+  font-family: monospace
+  border-top: 1px solid darkgreen
\ No newline at end of file