changeset 1413:14802ffc9e44

clean up reasoning page Ignore-this: e365f3e50b7610c8e694b8641acdae2 darcs-hash:b483f397e3dbfcd574cf8a4a6a450f2893c303fd
author drewp <drewp@bigasterisk.com>
date Wed, 24 Jul 2019 01:02:31 -0700
parents 302063bfb8ff
children 1a277dba4cdc
files service/reasoning/index.html
diffstat 1 files changed, 49 insertions(+), 83 deletions(-) [+]
line wrap: on
line diff
--- a/service/reasoning/index.html	Wed Jul 24 00:36:16 2019 -0700
+++ b/service/reasoning/index.html	Wed Jul 24 01:02:31 2019 -0700
@@ -2,20 +2,10 @@
 <html>
   <head>
     <title>reasoning</title>
-    <meta charset="utf-8" />
+    <meta charset="utf-8">
     <script src="/lib/polymer/1.0.9/webcomponentsjs/webcomponents.min.js"></script>
     <script src="/lib/require/require-2.3.3.js"></script>
     <script src="/rdf/common_paths_and_ns.js"></script>
-    <script>
-     window.NS = {
-       room: "http://projects.bigasterisk.com/room/",
-       dev: "http://projects.bigasterisk.com/device/",
-       dcterms: "http://purl.org/dc/terms/",
-       rdfs: "http://www.w3.org/2000/01/rdf-schema#",
-       map: "http://bigasterisk.com/map#",
-       rdf: "http://www.w3.org/1999/02/22-rdf-syntax-ns#",
-     };
-    </script>
     <link rel="import" href="/rdf/streamed-graph.html">
     <link rel="import" href="/lib/polymer/1.0.9/polymer/polymer.html">
 
@@ -31,63 +21,47 @@
          font-family: 'Allerta', sans-serif;
          font-size: 12px;
      }
+     pre {
+         font-family: 'Allerta', sans-serif;
+     }
      a {
          color: #b1b1fd;
          text-shadow: 1px 1px 0px #0400ff94;
          text-decoration-color: #00007714;
      }
-     #subjectRequest {
-         width: 50em;
-     }
+
      .pane > h2 {
          background: #3f738a61;
          border-top-left-radius: 23px;
          border-top-right-radius: 23px;
          border-top: 3px solid #2a4b58;
          padding: 14px 0 5px 11px;
-
          margin-top:  10px;
      }
-     pre {
-         font-family: sans-serif;
-     }
-     pre div {
-         border-bottom: 1px solid #ccc;
-     }
-
-
 
      #out > section { background: #1d23314a; }
      #out2 > section { background: #4222134a; }
-         /* ]]> */
+     /* ]]> */
     </style>
     <link rel="import" href="/supdebug/bang/service-rows/main.html">
-
+    <link rel="import" href="/rdf/rdf-uri.html">
   </head>
   <body>
-
-    <link rel="import" href="/rdf/rdf-uri.html">
-
-
     <h1>reasoning service</h1>
     <div class="pane">
       <h2>Service</h2>
       <service-rows name-substrs="reasoning"></service-rows>
     </div>
 
-
-    <div  class="pane">
+    <div class="pane">
       <h2>Input</h2>
-
       <streamed-graph id="inGraph" url="/sse_collector/graph/home"></streamed-graph>
-      <div id="out"></div>
-      <script type="module" src="/rdf/streamed_graph_view.js"></script>
-
+      <div id="inGraphView"></div>
     </div>
 
-    <div  class="pane">
+    <div class="pane">
       <h2>Rules</h2>
-      <div style="">
+      <div>
         <pre id="rules"></pre>
       </div>
       <label><input id="auto" type="checkbox"> auto refresh</label>
@@ -96,7 +70,6 @@
       <script type="text/javascript">
        // <![CDATA[
        $(function () {
-
          function update() {
 	   $.get("rules", function (txt) {
 	     $("#rules").empty().text(txt);
@@ -115,57 +88,19 @@
       </script>
     </div>
 
-
-    <div  class="pane">
+    <div class="pane">
       <h2>Output</h2>
 
       <streamed-graph id="outGraph" url="graph/output/events"></streamed-graph>
-      <div id="out2"></div>
-
-
-      <script type="module">
-       import { render } from '/lib/lit-html/1.0.0/lit-html.js';
-       import { graphView } from '/rdf/browse/graphView.js';
-
-       const sg = document.querySelector('#outGraph');
-
-       const out = document.querySelector('#out2');
-       const startPainting = () => {
-         if (!sg.graph || !sg.graph.graph) {
-           setTimeout(startPainting, 100);
-           return;
-         }
-
-         let dirty = true;
-
-         const repaint = () => {
-           if (!dirty) {
-             return;
-           }
-           render(graphView(sg.graph.graph), out);
-           dirty = false;
-         };
-
-         sg.addEventListener('graph-changed', (ev) => {
-           dirty = true;
-           requestAnimationFrame(repaint);
-         });
-         repaint();
-       };
-       setTimeout(startPainting, 10);
-
-      </script>
-
-
+      <div id="outGraphView"></div>
     </div>
 
-    <div  class="pane">
-
+    <div class="pane">
       <h2>put outputs</h2>
       <style>
-       .recent2  { background: #ffff55; }
-       .recent10 { background: #ffff88; }
-       .recent60 { background: #ffffdd; }
+       .recent2  { background: #71710a; }
+       .recent10 { background: #40401c; }
+       .recent60 { background: #212116; }
        #putOutputs th, #putOutputs td { text-align: left; padding-left: 5px; }
       </style>
       <table id="putOutputs">
@@ -213,7 +148,38 @@
          });
        });
       </script>
-        </div>
+    </div>
+
+    <script type="module">
+     import { render } from '/lib/lit-html/1.0.0/lit-html.js';
+     import { graphView } from '/rdf/browse/graphView.js';
+
+     function keepGraphFresh(sg, outElem) {
+       const startPainting = () => {
+         if (!sg.graph || !sg.graph.graph) {
+           setTimeout(startPainting, 100);
+           return;
+         }
+         let dirty = true;
+         const repaint = () => {
+           if (!dirty) return;
+           render(graphView(sg.graph.graph), outElem);
+           dirty = false;
+         };
+
+         sg.addEventListener('graph-changed', (ev) => {
+           dirty = true;
+           requestAnimationFrame(repaint);
+         });
+         repaint();
+       };
+       setTimeout(startPainting, 10);
+     }
+     keepGraphFresh(document.querySelector('#inGraph'),
+                    document.querySelector('#inGraphView'));
+     keepGraphFresh(document.querySelector('#outGraph'),
+                    document.querySelector('#outGraphView'));
+    </script>
 
   </body>
 </html>