Update to account for other class data

egraphs-good/egraph-serialize#23

Author: saulshanabrook

README.md

@@ -74,7 +74,7 @@ First install [Yarn](https://yarnpkg.com/getting-started/install), then run:
 
 ```sh
 yarn install
-yarn run [build|start|lint]
+yarn run [build|dev|lint]
 ```
 
 ## Releasing

examples/manual/homepage.json

@@ -37,5 +37,19 @@
       "eclass": "right",
       "children": ["2", "2"]
     }
+  },
+  "class_data": {
+    "top": {
+      "type": "int",
+      "": "baz, bar",
+      "other thing": "another label",
+      "third thing": "baz, bar",
+      "fourth thing": "another label"
+    },
+    "middle": {
+      "type": "int",
+      "": "baz, bar",
+      "other thing": "another label"
+    }
   }
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "egraph-visualizer",
-  "version": "2.1.2",
+  "version": "2.2.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/egraphs-good/egraph-visualizer.git"

src/Visualizer.tsx

@@ -52,12 +52,27 @@ import { Loading } from "./Loading";
 import { Slider, SliderOutput, SliderTack } from "./react-aria-components-tailwind-starter/src/slider";
 
 export function EClassNode({ data, selected }: NodeProps<FlowClass>) {
+  // Create one div per extra node
+  const extra_nodes = Object.entries(data.extra || {}).map(([key, value]) => (
+    <div
+      key={key}
+      className="truncate"
+      title={`${key}: ${value}`}
+      style={{ fontSize: 6 }}
+    >
+      {key != "" && <span className="pr-1 font-bold">{key}</span>}
+      <span>{value}</span>
+    </div>
+  ));
   return (
     <div
       className={`rounded-md border-dotted border-black h-full w-full ${selected ? "border-2" : "border"}`}
       style={{ backgroundColor: data.color! || "white" }}
       title={data.id}
     >
+      <div className="p-1 font-mono">
+        {...extra_nodes}
+      </div>
       <MyNodeToolbar type="class" id={data.id} />
       <Handle type="target" position={Position.Top} className="invisible" />
       <Handle type="source" position={Position.Bottom} className="invisible" />
@@ -84,7 +99,7 @@ export function ENode(
       {props?.outerRef ? <></> : <MyNodeToolbar type="node" id={props!.data!.id} />}
 
       <div
-        className={`font-mono text-xs truncate max-w-96 min-w-4 text-center ${subsumed ? "text-gray-300" : ""}`}
+        className={`font-mono text-base truncate max-w-96 min-w-6 text-center ${subsumed ? "text-gray-300" : ""}`}
         title={`${props?.data?.id}\n${props?.data?.label}`}
         ref={props?.innerRef}
       >
@@ -103,7 +118,7 @@ export function MyNodeToolbar(node: { type: "class" | "node"; id: string }) {
     <NodeToolbar position={Position.Top}>
       <button
         onClick={onClick}
-        className="rounded bg-white px-2 py-1 text-xs font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
+        className="rounded bg-white px-2 py-1 text-base font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
       >
         Filter
       </button>

src/layout.ts

@@ -28,18 +28,26 @@ const rootLayoutOptions = {
 // the number of pixels of padding between nodes and between nodes and their parents
 const nodePadding = 5;
 
-const classLayoutOptions = {
-  "elk.algorithm": "layered",
-  "elk.direction": "DOWN",
-  "elk.spacing.componentComponent": nodePadding.toString(),
-  "elk.spacing.nodeNode": nodePadding.toString(),
-  "elk.padding": `[top=${nodePadding},left=${nodePadding},bottom=${nodePadding},right=${nodePadding}]`,
-  "elk.spacing.portPort": "0",
-  // allow ports on e-class to be anywhere
-  // TODO: they only seem to appear on top side of nodes, figure out if there is a way to allow them
-  // to be on all sides if it would result in a better layout
-  portConstraints: "FREE",
-};
+/// amount of padding per extra class item
+const extra_padding = 8;
+function classLayoutOptions(n_extra: number) {
+  let top = nodePadding + n_extra * extra_padding;
+  if (n_extra > 0) {
+    top += 2;
+  }
+  return {
+    "elk.algorithm": "layered",
+    "elk.direction": "DOWN",
+    "elk.spacing.componentComponent": nodePadding.toString(),
+    "elk.spacing.nodeNode": nodePadding.toString(),
+    "elk.padding": `[top=${top},left=${nodePadding},bottom=${nodePadding},right=${nodePadding}]`,
+    "elk.spacing.portPort": "0",
+    // allow ports on e-class to be anywhere
+    // TODO: they only seem to appear on top side of nodes, figure out if there is a way to allow them
+    // to be on all sides if it would result in a better layout
+    portConstraints: "FREE",
+  };
+}
 
 // https://github.com/eclipse/elk/issues/1037#issuecomment-2122136560
 const interactiveOptions = {
@@ -83,6 +91,7 @@ export type FlowClass = Node<
   {
     color: string | null;
     id: string;
+    extra: { [key: string]: string };
     // selected?: boolean
   },
   "class"
@@ -275,10 +284,11 @@ function toELKNode(
   elkRoot.layoutOptions!["elk.aspectRatio"] = aspectRatio as unknown as string;
   for (const [classID, nodes] of classToNodes.entries()) {
     const elkClassID = `class-${classID}`;
+    const extra = class_data[classID] ? Object.fromEntries(Object.entries(class_data[classID]!).filter(([key]) => key !== "type")) : {};
     const elkClass: MyELKNode["children"][0] = {
       id: elkClassID,
-      data: { color: colors.get(class_data[classID]?.type)!, id: classID },
-      layoutOptions: classLayoutOptions,
+      data: { color: colors.get(class_data[classID]?.type)!, id: classID, extra },
+      layoutOptions: classLayoutOptions(Object.keys(extra).length),
       children: [],
       ports: mergeEdges
         ? []