feat: proper presentation for graph, w/events

paolobrasolin · May 1, 2023 · 7ba4780 · 7ba4780
1 parent f4ce5e3
commit 7ba4780
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 46 deletions.
diff --git a/src/web/controllers/graph_controller.ts b/src/web/controllers/graph_controller.ts
@@ -1,50 +1,56 @@
 import cytoscape, { Stylesheet } from "cytoscape";
-import { explore } from "../../lib/generation";
 
 import { Controller } from "@hotwired/stimulus";
-import { Composable, indicesToGenerator } from "../../lib/encoding";
+import { Composable, HumanGrammar, MachineGrammar } from "../../lib/encoding";
 
 const STYLE: Stylesheet[] = [
   {
     selector: "node",
     style: {
-      "background-color": "goldenrod",
-      width: "label",
-      height: "label",
-      "padding-top": "4",
-      "padding-bottom": "4",
-      "padding-left": "4",
-      "padding-right": "4",
-      shape: "round-rectangle",
-    },
-  },
-  {
-    selector: "node[label]",
-    style: {
-      label: "data(label)",
-      color: "white",
-      "font-size": "16",
-      "text-halign": "center",
-      "text-valign": "center",
+      // width: "label",
+      // height: "label",
+      // "padding-top": "2",
+      // "padding-bottom": "2",
+      // "padding-left": "4",
+      // "padding-right": "4",
+      "background-color": "darkgray",
+      width: "1em",
+      height: "1em",
+      shape: "ellipse",
+      "border-color": "white",
+      "border-width": ".4em",
     },
   },
+  // {
+  //   selector: "node[label]",
+  //   style: {
+  //     label: "data(label)",
+  //     // color: "black",
+  //     "font-size": "1em",
+  //     "text-halign": "center",
+  //     "text-valign": "center",
+  //   },
+  // },
   {
     selector: "edge",
     style: {
       "curve-style": "bezier",
       "target-arrow-shape": "triangle",
-      width: 1.6,
+      "target-arrow-color": "black",
+      width: 1,
     },
   },
   {
     selector: "edge[label]",
     style: {
       label: "data(label)",
-      "font-size": "12",
+      "font-size": "1em",
       "text-background-color": "white",
       "text-background-opacity": 1,
       "text-background-padding": "2px",
       "text-events": "yes",
+      "line-color": "black",
+      shape: "round-tag",
     },
   },
 ];
@@ -53,44 +59,53 @@ export default class extends Controller {
   static targets = ["container"];
   declare readonly containerTarget: HTMLDivElement;
 
-  connect() {
-    const bits = 2n;
-    const balParLangGenerators = [
-      indicesToGenerator([], [0b01n], bits),
-      indicesToGenerator([0b01n], [0b10n, 0b01n], bits),
-      indicesToGenerator([0b10n, 0b01n], [0b01n], bits),
-      indicesToGenerator([0b01n], [], bits),
-    ];
-    const start: Composable[] = [indicesToGenerator([], [], bits)];
-    const store = new Map<bigint, Set<bigint>>();
-    explore(start, store, 6n, balParLangGenerators, bits);
+  cy!: cytoscape.Core;
 
-    const cy = cytoscape({
+  connect() {
+    this.cy = cytoscape({
       container: this.containerTarget,
-      // elements: [{ data: { id: "a" } }, { data: { id: "b" } }],
       style: STYLE,
     });
+  }
+
+  disconnect() {}
+
+  ingestGraph({
+    detail: { graph, humanGrammar, machineGrammar },
+  }: CustomEvent<{
+    graph: Map<bigint, Map<bigint, [bigint, symbol, Composable]>>;
+    humanGrammar: HumanGrammar;
+    machineGrammar: MachineGrammar;
+  }>) {
+    this.cy.remove(this.cy.elements());
 
-    for (const k of store.keys()) {
-      const data = { id: k.toString(36), label: k.toString(2) };
-      cy.add({ data: data });
+    for (const k of graph.keys()) {
+      const data = {
+        id: k.toString(36),
+        label: null, // "●", // k.toString(2),
+      };
+      this.cy.add({ data });
     }
 
-    for (const [source, targets] of store.entries()) {
-      for (const target of targets) {
-        if (!store.has(target)) cy.add({ data: { id: target.toString(36) } });
+    for (const [source, targets] of graph.entries()) {
+      for (const [target, [off, s]] of targets) {
+        if (!graph.has(target))
+          this.cy.add({ data: { id: target.toString(36) } });
+
+        const sup = off
+          .toString()
+          .split("")
+          .map((d) => "⁰¹²³⁴⁵⁶⁷⁸⁹"[parseInt(d)]);
 
         const data = {
           source: source.toString(36),
           target: target.toString(36),
-          label: "01/0",
+          label: `${Symbol.keyFor(s)}${sup}`,
         };
-        cy.add({ data });
+        this.cy.add({ data });
       }
     }
 
-    cy.layout({ name: "cose" }).run();
+    this.cy.layout({ name: "cose", numIter: 10000 }).run();
   }
-
-  disconnect() {}
 }
diff --git a/src/web/controllers/main_controller.ts b/src/web/controllers/main_controller.ts
@@ -45,7 +45,15 @@ export default class extends Controller {
         .join(" ; ");
       return { value: i.toString(), label: label };
     });
+
     this.dispatch("optionsChanged", { detail: { options } });
+    this.dispatch("graphChanged", {
+      detail: {
+        graph: this.graphStore,
+        humanGrammar: this.humanGrammar,
+        machineGrammar: this.machineGrammar,
+      },
+    });
   }
 
   findPaths(

diff --git a/src/web/index.html b/src/web/index.html
@@ -35,6 +35,7 @@
 main:optionsChanged->list#ingestOptions
 list:selectionChanged->main#ingestSelection
 main:diagramChanged->diagram#ingestDiagram
+main:graphChanged->graph#ingestGraph
     ">
     <section role="tabpanel" id="diagram-tabpanel" aria-labelledby="diagram-tab" class="h-full">
       <div class="w-full h-full" data-diagram-target="container"></div>