WIP: Rearrange React stuff

Author: bvisness

src/GraphViewer.ts

@@ -1,7 +1,9 @@
-import { Graph } from "./Graph.js";
-import type { BlockPtr, Func, Pass, SampleCounts } from "./iongraph.js";
 import { dequal } from "./dequal.js";
 import { E } from "./dom.js";
+import { Graph } from "./Graph.js";
+import type { BlockPtr, Func, Pass, SampleCounts } from "./iongraph.js";
+
+type KeyPasses = [number | null, number | null, number | null, number | null];
 
 export interface GraphViewerProps {
   func: Func,
@@ -10,8 +12,6 @@ export interface GraphViewerProps {
   sampleCounts?: SampleCounts,
 }
 
-type KeyPasses = [number | null, number | null, number | null, number | null];
-
 export class GraphViewer {
   func: Func;
   passNumber: number;
@@ -26,13 +26,13 @@ export class GraphViewer {
 
   constructor(root: HTMLElement, {
     func,
-    pass: propsPass = 0,
+    pass = 0,
 
     sampleCounts
   }: GraphViewerProps) {
     this.graph = null;
     this.func = func;
-    this.passNumber = propsPass;
+    this.passNumber = pass;
     this.sampleCounts = sampleCounts;
 
     this.keyPasses = [null, null, null, null];
@@ -79,7 +79,7 @@ export class GraphViewer {
       div.style.position = "relative";
     })
     this.sidebarLinks = func.passes.map((pass, i) => (
-      E("a", ["ig-link-normal", "ig-pv1", "ig-ph2", "ig-flex", "ig-g2",], a => {
+      E("a", ["ig-link-normal", "ig-pv1", "ig-ph2", "ig-flex", "ig-g2"], a => {
         a.href = "#";
         a.addEventListener("click", e => {
           e.preventDefault();
@@ -100,12 +100,12 @@ export class GraphViewer {
     ]);
     root.appendChild(this.container);
 
-    this.update();
-
     this.keydownHandler = this.keydownHandler.bind(this);
     this.tweakHandler = this.tweakHandler.bind(this);
     window.addEventListener("keydown", this.keydownHandler);
     window.addEventListener("tweak", this.tweakHandler);
+
+    this.update();
   }
 
   destroy() {

src/index-react.ts

@@ -1,2 +1,2 @@
 export * from "./index.js";
-export * from "./GraphViewer.js";
+export * from "./react-components.js";

src/react-components.tsx

@@ -0,0 +1,39 @@
+import { useRef, useEffect } from "react";
+
+import { GraphViewer } from "./GraphViewer.js";
+import { Func, SampleCounts } from "./iongraph.js";
+
+export interface GraphViewerReactProps {
+  func: Func,
+  pass?: number,
+  sampleCounts?: SampleCounts,
+
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+export function GraphViewerReact(props: GraphViewerReactProps) {
+  const root = useRef<HTMLDivElement>(null);
+  const graphViewer = useRef<GraphViewer | null>(null);
+
+  useEffect(() => {
+    if (graphViewer.current) {
+      graphViewer.current.destroy();
+      graphViewer.current = null;
+    }
+    if (root.current) {
+      graphViewer.current = new GraphViewer(root.current, {
+        func: props.func,
+        pass: props.pass,
+
+        sampleCounts: props.sampleCounts,
+      });
+    }
+
+    return () => {
+      graphViewer.current?.destroy();
+    };
+  }, [props.func, props.pass, props.sampleCounts]);
+
+  return <div ref={root} className={props.className} style={props.style} />
+};

www/main.tsx

@@ -1,9 +1,9 @@
-import { ChangeEvent, useEffect, useRef, useState } from 'react';
-import { createRoot } from 'react-dom/client';
+import { ChangeEvent, useEffect, useState } from "react";
+import { createRoot } from "react-dom/client";
 
-import { GraphViewer, GraphViewerProps } from '../src/GraphViewer.js';
-import { migrate, type IonJSON, type Func, type MIRBlock, type SampleCounts } from '../src/iongraph.js';
-import { assert, must } from '../src/utils.js';
+import { migrate, type IonJSON, type Func, type SampleCounts } from "../src/iongraph.js";
+import { GraphViewerReact } from "../src/react-components.js";
+import { must } from "../src/utils.js";
 
 export function renderWebUI(root: HTMLElement) {
   const reactRoot = createRoot(root);
@@ -150,7 +150,7 @@ function WebUI() {
     <MenuBar browse export ionjson={initialIonJSON} funcSelected={f => setFunc(f)} />
     {
       func && <div className="ig-relative ig-flex-basis-0 ig-flex-grow-1 ig-overflow-hidden">
-        <GraphViewer2
+        <GraphViewerReact
           func={func}
           pass={initialPass}
           sampleCounts={sampleCounts}
@@ -160,27 +160,6 @@ function WebUI() {
   </div >;
 }
 
-function GraphViewer2(props: GraphViewerProps) {
-  const root = useRef<HTMLDivElement>(null);
-  const graphViewer = useRef<GraphViewer | null>(null);
-
-  useEffect(() => {
-    if (graphViewer.current) {
-      graphViewer.current.destroy();
-      graphViewer.current = null;
-    }
-    if (root.current) {
-      graphViewer.current = new GraphViewer(root.current, props);
-    }
-
-    return () => {
-      graphViewer.current?.destroy();
-    };
-  });
-
-  return <div ref={root} />
-}
-
 interface StandaloneUIProps {
   ionjson: IonJSON,
 }
@@ -191,7 +170,7 @@ function StandaloneUI(props: StandaloneUIProps) {
     <MenuBar ionjson={props.ionjson} funcSelected={f => setFunc(f)} />
     {
       func && <div className="ig-relative ig-flex-basis-0 ig-flex-grow-1 ig-overflow-hidden">
-        <GraphViewer2
+        <GraphViewerReact
           func={func}
           pass={initialPass}
         />