Show subsumed nodes as grey

Author: saulshanabrook

package.json

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

src/Visualizer.tsx

@@ -73,15 +73,18 @@ export function ENode(
     }
   >
 ) {
+  const subsumed = props?.data?.subsumed || false;
   return (
     <div
-      className={`p-1 rounded-md outline bg-white outline-black h-full w-full ${props?.selected ? "outline-2" : "outline-1"}`}
+      className={`p-1 rounded-md outline bg-white ${subsumed ? "outline-gray-300" : "outline-black"} h-full w-full ${
+        props?.selected ? "outline-2" : "outline-1"
+      }`}
       ref={props?.outerRef}
     >
       {props?.outerRef ? <></> : <MyNodeToolbar type="node" id={props!.data!.id} />}
 
       <div
-        className="font-mono text-xs truncate max-w-96 min-w-4 text-center"
+        className={`font-mono text-xs truncate max-w-96 min-w-4 text-center ${subsumed ? "text-gray-300" : ""}`}
         title={`${props?.data?.id}\n${props?.data?.label}`}
         ref={props?.innerRef}
       >

src/layout.ts

@@ -60,6 +60,7 @@ type EGraphNode = {
   children?: EGraphNodeID[];
   eclass: EGraphClassID;
   cost: number;
+  subsumed?: boolean;
 };
 
 type EGraphClassData = {
@@ -88,6 +89,7 @@ export type FlowNode = Node<
   {
     label: string;
     id: string;
+    subsumed?: boolean;
     // selected?: boolean
   },
   "node"
@@ -290,7 +292,7 @@ function toELKNode(
       const elkNodeID = `node-${nodeID}`;
       const elkNode: MyELKNode["children"][0]["children"][0] = {
         id: elkNodeID,
-        data: { label: node.op, id: nodeID },
+        data: { label: node.op, id: nodeID, ...(node.subsumed ? { subsumed: true } : {}) },
         width: size.width,
         height: size.height,
         ports: [],