--- a/service/mqtt_to_rdf/src/index.ts	Sat Oct 23 13:21:06 2021 -0700
+++ b/service/mqtt_to_rdf/src/index.ts	Sat Oct 23 13:22:40 2021 -0700
@@ -40,6 +40,8 @@
   server: string;
   messagesSeen: number;
   subscribed: Subscribed[];
+  rules: string;
+  rulesInferred: string;
 }
 
 @customElement("mqtt-to-rdf-page")
@@ -80,43 +82,50 @@
         currentOutputGraph: { t: 1, n3: "(n3)" },
       },
     ],
+    rules: "",
+    rulesInferred: "",
   };
 
   render() {
     const d = this.pageData;
     const now = Date.now() / 1000;
     const ago = (t: number) => html`${Math.round(now - t)}s ago`;
-    const topicItem = (t: Subscribed, index: number) =>
-      html`<div class="topic" style="grid-column: 1; grid-row: ${index + 2}">
-        <span class="topic">${t.topic} sticky this to graph column</span>
-      </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> `;
+      html` <div style="grid-column: 1; grid-row: ${index + 2}">
+      <div>Topic: <span class="topic">${t.topic}</span></div>
+      ${t.recentMessageGraphs.map(parsedGraphAtTime)}
+      </div> `;
 
     const metric = (m: Metric) => html`<div>metrix ${m.name} ${JSON.stringify(m.labels)} = ${m.value}</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: 4; grid-row: ${index + 2}">${parsedGraphAtTime(t.currentOutputGraph)}</div> `;
+      html` <div style="grid-column: 2; grid-row: ${index + 2}">${parsedGraphAtTime(t.currentOutputGraph)}</div> `;
     return html`
       <h1>mqtt_to_rdf</h1>
 
       <section>connected to ${d.server}; messages received ${d.messagesSeen}</section>
 
       <div class="grid">
-        <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">recent incoming messages</div>
+        <div class="hd" style="grid-row: 1; grid-column: 1">recent incoming messages, by topic</div>
         ${d.subscribed.map(recentMessageGraphs)}
 
-        <div class="hd" style="grid-row: 1; grid-column: 3">output metrics: prom collection according to converted graph</div>
+        <div class="hd" style="grid-row: 1; grid-column: 2">output subgraph</div>
+        ${d.subscribed.map(outputGraph)}
+        
+        <div class="hd" style="grid-row: 1; grid-column: 3">output metrics: <br>prom collection according to<br> converted graph</div>
         ${d.subscribed.map(outputMetrics)}
+      </div>
 
-        <div class="hd" style="grid-row: 1; grid-column: 4">output subgraph</div>
-        ${d.subscribed.map(outputGraph)}
-      </section>
+      <table>
+        <tr>
+          <th>Rules input</th>
+          <td><textarea>${this.pageData.rules}</textarea></td>
+          <th>Rules inferred</tH>
+          <td><pre>${this.pageData.rulesInferred}</pre></td>
+        </tr>
+      </table>
     `;
   }
 }