Make anywidget more flexible

Author: saulshanabrook

package.json

@@ -1,6 +1,6 @@
 {
   "name": "egraph-visualizer",
-  "version": "1.0.3",
+  "version": "1.1.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/saulshanabrook/egraph-visualizer.git"

src/Visualizer.tsx

@@ -701,7 +701,7 @@ function LayoutFlow({
   );
 }
 
-function Visualizer({ egraph }: { egraph: string }) {
+function Visualizer({ egraph, height = null, resize = false }: { egraph: string; height?: string | null; resize?: boolean }) {
   const [outerElem, setOuterElem] = useState<HTMLDivElement | null>(null);
   const [innerElem, setInnerElem] = useState<HTMLDivElement | null>(null);
 
@@ -713,7 +713,7 @@ function Visualizer({ egraph }: { egraph: string }) {
     }
   }, [rootElem]);
   return (
-    <div className="w-full h-full" ref={setRootElem}>
+    <div className={`w-full ${resize ? "resize-y" : ""}`} style={{ height: height || "100%" }} ref={setRootElem}>
       {/* Hidden node to measure text size  */}
       <div className="invisible absolute">
         <ENode outerRef={setOuterElem} innerRef={setInnerElem} />

src/anywidget.tsx

@@ -1,25 +1,24 @@
-import { useSyncExternalStore } from "react";
 import { createRoot } from "react-dom/client";
 import "./index.css";
 import { DOMWidgetModel } from "@jupyter-widgets/base";
 import Visualizer from "./Visualizer.tsx";
-
-// eslint-disable-next-line react-refresh/only-export-components
-function ModelApp({ model }: { model: DOMWidgetModel }) {
-  const egraph: string = useSyncExternalStore(
-    (callback) => {
-      model.on("change:egraph", callback);
-      return () => model.off("change:egraph", callback);
-    },
-    () => model.get("egraph")
-  );
-  return <Visualizer egraph={egraph} />;
-}
+import { startTransition } from "react";
 
 function render({ model, el }: { el: HTMLElement; model: DOMWidgetModel }) {
   const root = createRoot(el);
-  root.render(<ModelApp model={model} />);
-  return () => root.unmount();
+  const height = model.has("height") ? model.get("height") : "600px";
+  function render() {
+    startTransition(() => {
+      root.render(<Visualizer egraph={model.get("egraph")} height={height} resize />);
+    });
+  }
+  render();
+  model.on("change:egraph", render);
+
+  return () => {
+    model.off("change:egraph", render);
+    root.unmount();
+  };
 }
 
 export default { render };