deploy cozy code viewer

CrowdHailer · Jul 31, 2023 · b93cf3f · b93cf3f
1 parent 3fb7814
commit b93cf3f
Show file tree

Hide file tree

Showing 8 changed files with 832 additions and 1 deletion.
diff --git a/cozy/.gitignore b/cozy/.gitignore
@@ -0,0 +1,2 @@
+node_modules
+build
diff --git a/cozy/README.md b/cozy/README.md
@@ -0,0 +1,18 @@
+# Cozy
+
+Uses [CozoDB](https://github.com/cozodb/cozo) for graph queries
+
+```
+npm i -g rollup sirv
+
+(cd eyg; gleam run cli cozo ./saved/saved.json)
+cp wisdom/tmp.db.json cozy/build/db.json
+
+(cd cozy;
+  rollup --config rollup.config.mjs && \
+  cp index.html build/index.html && \
+  cp node_modules/cozo-lib-wasm/cozo_lib_wasm_bg.wasm build && \
+  
+  npx sirv ./build --dev --host 0.0.0.0 --port 5000
+)
+```
diff --git a/cozy/index.html b/cozy/index.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>view</title>
+    <script type="module" src="./bundle.js"></script>
+    <link
+      href="https://unpkg.com/[email protected]/dist/tailwind.min.css"
+      rel="stylesheet"
+    />
+    <link href="https://eyg.run/layout.css" rel="stylesheet" />
+    <link href="https://eyg.run/neo.css" rel="stylesheet" />
+  </head>
+  <body>
+    <div class="vstack">
+      <header class="cover max-w-3xl p-2">
+        <h1 class="text-2xl px-2">AST Query</h1>
+        <p>
+          Set up to run over all the full database of EYG source code;
+          <span id="count"></span>
+        </p>
+      </header>
+      <div class="expand cover max-w-3xl">
+        <form class="px-2" id="form">
+          <textarea
+            class="border-2 neo-shadow w-full"
+            rows="5"
+            id="query"
+            spellcheck="false"
+          >
+?[label] := *eav[id, 'label', label],
+*eav[id, 'expression', 'Let'],
+*eav[id, 'value', vid],
+*eav[valueId, 'expression', 'String'],
+valueId == vid</textarea
+          >
+          <div class="text-right">
+            <button
+              class="my-2 border-1 border-purple-500 purple-gradient neo-shadow px-2"
+              type="submit"
+            >
+              Run
+            </button>
+          </div>
+        </form>
+        <div class="px-2">
+          <div class="bg-gray-100 min-h-4 p-1" id="output"></div>
+        </div>
+        <div class="px-2">
+          <h3 class="text-lg">Examples</h3>
+          <p class="italic">Click to load</p>
+          <p class="mt-4">The name of all strings in let assignments</p>
+          <pre class="p-1 border cursor-pointer">
+?[label] := *eav[id, 'label', label],
+*eav[id, 'expression', 'Let'],
+*eav[id, 'value', vid],
+*eav[valueId, 'expression', 'String'],
+valueId == vid</pre
+          >
+          <p class="mt-4">Type of every expression assigned to a variable x</p>
+          <pre class="p-1 border cursor-pointer">
+?[vid, exp] := *eav[id, 'label', label],
+*eav[id, 'expression', 'Let'],
+*eav[id, 'value', vid],
+*eav[valueId, 'expression', exp],
+valueId == vid,
+label == 'x'</pre
+          >
+          <p class="mt-4">
+            The largest let statments order by number of AST nodes in the
+            assignment expression
+          </p>
+          <pre class="p-1 border cursor-pointer">
+parent[id, child] := *eav[id, 'expression', 'Let'],
+*eav[id, 'value', child] or *eav[id, 'then', child]
+
+?[x, label, d] := parent[x,y],*eav[x, 'label', label],
+d = y - x,
+d > 1
+:sort -d
+:limit 20</pre
+          >
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/cozy/main.mjs b/cozy/main.mjs
@@ -0,0 +1,73 @@
+// TODO ask in DB channel about loading triples
+// Have a pattern of building the front end and setting up a database
+// DB source toggles in the various pages ?source=yaml dir= dir not possible in web so instead ?source="./dfdf" workds for file or source can be postMessage
+import init, { CozoDb } from "cozo-lib-wasm";
+
+(async function main() {
+  await init();
+  let db = CozoDb.new();
+  let response = await fetch("./db.json");
+  let rows = await response.json();
+  let $count = document.getElementById("count");
+  $count.innerText = `${rows.length} triples`;
+  console.log(db.run(":create eav {e: Int, a: String, v: Any}", ""));
+  db.import_relations(
+    JSON.stringify({
+      eav: { headers: ["e", "a", "v"], rows: rows },
+    })
+  );
+
+  let $query = document.getElementById("query");
+  let $form = document.getElementById("form");
+  let $output = document.getElementById("output");
+  $form.onsubmit = function (event) {
+    event.preventDefault();
+    let { ok, headers, rows, message } = JSON.parse(db.run($query.value, ""));
+
+    $output.innerHTML = "";
+    if (ok) {
+      let table = document.createElement("table");
+      let thead = document.createElement("thead");
+      let tr = document.createElement("tr");
+      tr.classList.add("border-b");
+      tr.classList.add("border-black");
+      tr.classList.add("text-left");
+      headers.forEach((element) => {
+        let th = document.createElement("th");
+        th.innerText = element;
+        tr.append(th);
+      });
+      thead.append(tr);
+      table.append(thead);
+
+      let tbody = document.createElement("tbody");
+      rows.forEach((row) => {
+        let tr = document.createElement("tr");
+        tr.classList.add("border-b");
+
+        row.forEach((element) => {
+          let td = document.createElement("td");
+          td.innerText = element;
+          tr.append(td);
+        });
+        tbody.append(tr);
+      });
+      table.append(tbody);
+      $output.append(table);
+    } else {
+      let span = document.createElement("span");
+      span.classList.add("border-l-4");
+      span.classList.add("border-red-700");
+      span.classList.add("px-1");
+      span.classList.add("text-red-400");
+
+      span.innerHTML = message;
+      $output.append(span);
+    }
+  };
+  document.querySelectorAll("pre").forEach((element) => {
+    element.onclick = function (_event) {
+      $query.value = element.innerText;
+    };
+  });
+})();