Mercurial > code > home > repos > homeauto

<!DOCTYPE html>
<html>
  <head>
    <title>reasoning</title>
    <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>
    <link rel="import" href="/rdf/streamed-graph.html">
    <link rel="import" href="/lib/polymer/1.0.9/polymer/polymer.html">

    <meta name="mobile-web-app-capable" content="yes">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <style type="text/css" media="all">
     /* <![CDATA[ */
     @import url('https://fonts.googleapis.com/css?family=Allerta|Dosis|Jura&display=swap');
     body {
         background: black;
         color: white;
         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;
     }

     .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;
     }

     #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>
    <h1>reasoning service</h1>
    <div class="pane">
      <h2>Service</h2>
      <service-rows name-substrs="reasoning"></service-rows>
    </div>

    <div class="pane">
      <h2>Input</h2>
      <streamed-graph id="inGraph" url="/sse_collector/graph/home"></streamed-graph>
      <div id="inGraphView"></div>
    </div>

    <div class="pane">
      <h2>Rules</h2>
      <div>
        <pre id="rules"></pre>
      </div>
      <label><input id="auto" type="checkbox"> auto refresh</label>

      <script src="//bigasterisk.com/lib/jquery-2.0.3.min.js"></script>
      <script type="text/javascript">
       // <![CDATA[
       $(function () {
         function update() {
	   $.get("rules", function (txt) {
	     $("#rules").empty().text(txt);
	   });
         }
         function loop() {
	   update();
	   if ($("input#auto").is(":checked")) {
	     setTimeout(loop, 2000);
	   }
         }
         loop();
         $("input#auto").click(loop);
       });
       // ]]>
      </script>
    </div>

    <div class="pane">
      <h2>Output</h2>

      <streamed-graph id="outGraph" url="graph/output/events"></streamed-graph>
      <div id="outGraphView"></div>
    </div>

    <div class="pane">
      <h2>put outputs</h2>
      <style>
       .recent2  { background: #71710a; }
       .recent10 { background: #40401c; }
       .recent60 { background: #212116; }
       #putOutputs th, #putOutputs td { text-align: left; padding-left: 5px; }
      </style>
      <table id="putOutputs">
        <thead>
          <tr>
            <th>url</th>
            <th>numReq</th>
            <th>changed</th>
            <th>payload</th>
            <th>lastErr</th>
          </tr>
        </thead>
        <tbody id="putRows">
        </tbody>
      </table>
      <script>
       window.addEventListener('load', () => {
         const es = new EventSource('putOutputs');
         es.addEventListener('update', (ev) => {
           const rows = document.querySelector('#putRows');
           rows.innerHTML = '';
           JSON.parse(ev.data).puts.forEach((row) => {
             const tr = document.createElement('tr');
             for (let attr of [
               'urlAbbrev',
               'numRequests',
               'lastChangeTime',
               'payload',
               'lastErr',
             ]) {
               const td = document.createElement('td');
               let value = row[attr];
               if (attr == 'lastChangeTime') {
                 const secAgo = Math.round(Date.now() / 1000 - row.lastChangeTime);
                 value = `-${secAgo} sec`;
                 if (secAgo < 2) { tr.classList.add('recent2'); }
                 else if (secAgo < 10) { tr.classList.add('recent10'); }
                 else if (secAgo < 60) { tr.classList.add('recent60'); }
               }
               td.innerText = value;
               tr.appendChild(td);
             }
             rows.appendChild(tr);
           });
         });
       });
      </script>
    </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>
author	drewp <drewp@bigasterisk.com>
date	Sun, 24 Nov 2019 00:01:00 -0800
parents	14802ffc9e44
children	b87b6e9cedb2