reconstruct dirs

package-lock.json

@@ -12,6 +12,7 @@
         "@tauri-apps/plugin-opener": "^2",
         "@xyflow/react": "^12.8.2",
         "i18next": "^25.3.2",
+        "mitt": "^3.0.1",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-i18next": "^15.6.0"
@@ -2347,6 +2348,12 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/mitt": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.1.tgz",
+      "integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==",
+      "license": "MIT"
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",

package.json

@@ -14,6 +14,7 @@
     "@tauri-apps/plugin-opener": "^2",
     "@xyflow/react": "^12.8.2",
     "i18next": "^25.3.2",
+    "mitt": "^3.0.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-i18next": "^15.6.0"

src/App.tsx

@@ -1,6 +1,6 @@
 import "./App.scss";
 
-import Screening from "./pages/Screening";
+import Screening from "./pages/Screening/";
 
 function App() {
   return (

src/pages/Screening.tsx

@@ -1,67 +0,0 @@
-import { useCallback, useMemo } from "react";
-import { Background, Controls, Edge, ReactFlow, Node, useNodesState, useEdgesState, Connection } from "@xyflow/react";
-import * as node from "./node/";
-
-import "@xyflow/react/dist/style.css";
-
-import { Editor, Impl as EditorImpl } from "./context/Editor";
-
-const nodeTypes = {
-  fetch_ToshoListed: node.fetch.ToshoListed,
-  present_TableDisplay: node.present.TableDisplay,
-};
-const initialNodes: Node[] = [
-  {
-    id: "n1",
-    type: "fetch_ToshoListed",
-    position: {x:0, y:0},
-    data: {prime: true, standard: true, growth: true},
-    deletable: false,
-  },
-  {
-    id: "n2",
-    type: "present_TableDisplay",
-    position: {x:0, y:100},
-    data: {},
-  },
-  {
-    id: "n3",
-    position: {x:0, y:200},
-    data: {label: "hello"},
-  },
-];
-
-export default function Screening() {
-  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
-  const [edges, setEdges, onEdgesChange] = useEdgesState([] as Edge[]);
-
-  const editor = useMemo(()=>new EditorImpl(setNodes, setEdges, 100), []);
-
-  const onConnect = useCallback(
-    (conn: Connection)=>editor.connect(conn), []);
-  const onDisconnect = useCallback(
-    (conns: Edge[])=>editor.disconnect(conns.map((x)=>x as Connection)), []);
-  const onNodesDelete = useCallback(
-    (nodes: Node[])=>editor.remove(nodes.map((x)=>x.id)), []);
-
-  return (
-    <Editor.Provider value={editor}>
-      <div style={{ position: "absolute", left: 0, right: 0, top: 0, bottom: 0 }}>
-        <ReactFlow
-          nodeTypes={nodeTypes}
-          nodes={nodes}
-          edges={edges}
-          onNodesDelete={onNodesDelete}
-          onNodesChange={onNodesChange}
-          onEdgesDelete={onDisconnect}
-          onEdgesChange={onEdgesChange}
-          onConnect={onConnect}
-          fitView
-        >
-          <Controls />
-          <Background />
-        </ReactFlow>
-      </div>
-    </Editor.Provider>
-  );
-}

src/pages/Screening/Bus.tsx

@@ -0,0 +1,31 @@
+import { createContext } from "react";
+import { Node, Edge } from "@xyflow/react";
+import mitt, { Emitter } from "mitt";
+
+export type Events = {
+  // ---- editing request events (compo -> ?) ----
+  reqRemoveNode: string;
+  reqModifyNode: {id: string, data: any};
+
+  // ---- editing completion events (view -> ?) ----
+  onNodeAdded: Node;
+  onNodeRemoved: string;
+  onNodeModified: Node;
+
+  onEdgeAdded: Edge;
+  onEdgeRemoved: string;
+  onEdgeModified: Edge;
+
+  // ---- running events (emitted by runner) ----
+  onNodeReset: {id: string},
+  onNodePending: {id: string},
+  onNodeRunning: {id: string, symbols: string[], remaining: number | undefined},
+  onNodeAborted: {id: string, msg: string},
+  onNodeDone: {id: string},
+};
+
+export type Bus = Emitter<Events>;
+export default Bus;
+export const createBus = ()=> mitt<Events>();
+
+export const BusContext = createContext<Bus|undefined>(undefined);

src/pages/Screening/Runner.tsx

@@ -0,0 +1,80 @@
+import { Node } from "@xyflow/react";
+import Bus from "./Bus";
+import { Emitter } from "mitt";
+
+import nodes from "./node/";
+
+export interface Iface {
+};
+
+export class Impl implements Iface {
+  _bus: Bus;
+  _threads: Set<string>;
+
+  constructor(bus: Bus) {
+    this._bus     = bus;
+    this._threads = new Set();
+  }
+
+  _schedule(node: Node) {
+    this._threads.add(node.id);
+    run(this._bus, node).
+      finally(()=>this._threads.delete(node.id));
+  }
+};
+
+async function run(bus: Bus, node: Node) {
+  const [finisher, aborted] = makeFinisher();
+  const destroy = listenAll(bus, {
+    onNodeRemoved: (id)=>{ if (id===node.id) { finisher(); } },
+    onNodeModified: ({id})=>{ if (id===node.id) { finisher(); } },
+  });
+  try {
+    bus.emit("onNodePending", { id: node.id });
+    await execTask(bus, node, aborted.then(()=>{throw new Error("aborted")}));
+    bus.emit("onNodeDone", { id: node.id });
+  } catch (e: any) {
+    bus.emit("onNodeAborted", { id: node.id, msg: e });
+  } finally {
+    destroy();
+  }
+}
+
+async function execTask(bus: Bus, node: Node, aborted: Promise<void>) {
+  switch (node.type) {
+  case "fetch_ToshoListed":
+    const data: nodes.fetch.ToshoListedData = node.data;
+    data;
+    const sleep = new Promise(resolve => setTimeout(resolve, 1));
+    await Promise.race([sleep, aborted]);
+    bus.emit("onNodeRunning", { id: node.id, symbols: ["T/1234"], remaining: 32 });
+    break;
+  default:
+    throw Error("unknown node type: "+node.type);
+  }
+}
+
+function listenAll<E extends Record<string, unknown>>(
+  emitter: Emitter<E>,
+  listeners: {
+    [K in keyof E]?: (event: E[K]) => void;
+  }
+): () => void {
+  for (const key in listeners) {
+    const handler = listeners[key];
+    if (handler) emitter.on(key, handler);
+  }
+
+  return () => {
+    for (const key in listeners) {
+      const handler = listeners[key];
+      if (handler) emitter.off(key, handler);
+    }
+  };
+}
+
+function makeFinisher(): [()=>void, Promise<void>] {
+  let r!: (v: void) => void;
+  const p = new Promise<void>((x)=>r = x);
+  return [()=>r(), p];
+}

src/pages/Screening/index.tsx

@@ -0,0 +1,125 @@
+import { useCallback, useEffect, useMemo, useState } from "react";
+import {
+  Background,
+  Connection,
+  Controls,
+  Edge,
+  EdgeChange,
+  ReactFlow,
+  Node,
+  NodeChange,
+  addEdge,
+  applyNodeChanges,
+  applyEdgeChanges,
+} from "@xyflow/react";
+import * as node from "./node/";
+
+import "@xyflow/react/dist/style.css";
+
+import Bus, { createBus, BusContext, Events } from "./Bus";
+
+const nodeTypes = {
+  fetch_ToshoListed: node.fetch.ToshoListed,
+  present_TableDisplay: node.present.TableDisplay,
+};
+const initialNodes: Node[] = [
+  {
+    id: "n1",
+    type: "fetch_ToshoListed",
+    position: {x:0, y:0},
+    data: {prime: true, standard: true, growth: true},
+    deletable: false,
+  },
+  {
+    id: "n2",
+    type: "present_TableDisplay",
+    position: {x:0, y:100},
+    data: {},
+  },
+];
+
+export default function Screening() {
+  const bus = useMemo(createBus, []);
+
+  const [nodes, setNodes] = useState(initialNodes);
+  const [edges, setEdges] = useState([] as Edge[]);
+
+  listen(bus, "reqRemoveNode",
+         (id)=>setNodes((x)=>x.filter(y=>y.id!==id)));
+  listen(bus, "reqModifyNode",
+         ({id, data})=>setNodes((x)=>x.map(y => y.id===id? {...y, data: data}: y)));
+
+  const onEdgesDelete = useCallback(
+    (conns: Edge[])=>conns.map(x=>bus.emit("onEdgeRemoved", x.id)), [bus]);
+  const onNodesChange = useCallback((changes: NodeChange[])=>{
+    tellNodeChangesToBus(bus, changes);
+    setNodes((nds)=>applyNodeChanges(changes, nds));
+  }, [bus]);
+  const onEdgesChange = useCallback((changes: EdgeChange[])=>{
+    tellEdgeChangesToBus(bus, changes);
+    setEdges((eds)=>applyEdgeChanges(changes, eds));
+  }, [bus]);
+  const onConnect = useCallback((conn: Connection)=>{
+    bus.emit("onEdgeAdded", conn as Edge), [bus];
+    setEdges((eds)=>addEdge(conn, eds));
+  }, [bus]);
+
+  return (
+    <BusContext.Provider value={bus}>
+      <div style={{ position: "absolute", left: 0, right: 0, top: 0, bottom: 0 }}>
+        <ReactFlow
+          nodeTypes={nodeTypes}
+          nodes={nodes}
+          edges={edges}
+          onNodesChange={onNodesChange}
+          onEdgesDelete={onEdgesDelete}
+          onEdgesChange={onEdgesChange}
+          onConnect={onConnect}
+          fitView
+        >
+          <Controls />
+          <Background />
+        </ReactFlow>
+      </div>
+    </BusContext.Provider>
+  );
+}
+
+function listen<K extends keyof Events>(
+  bus: Bus,
+  name: K,
+  handler: (p: Events[K])=>void,
+): void {
+  useEffect(()=>{
+    bus.on(name, handler);
+    return ()=>bus.off(name, handler);
+  }, [bus, handler]);
+}
+
+function tellNodeChangesToBus(bus: Bus, changes: NodeChange[]) {
+  changes.
+    filter(x=>x.type==="add").
+    map(y=>bus.emit("onNodeAdded", y.item));
+  
+  changes.
+    filter(x=>x.type==="remove").
+    map(y=>bus.emit("onNodeRemoved", y.id));
+
+  changes.
+    filter(x=>x.type==="replace").
+    map(y=>bus.emit("onNodeModified", y.item));
+}
+
+function tellEdgeChangesToBus(bus: Bus, changes: EdgeChange[]) {
+  changes.
+    filter(x=>x.type==="add").
+    map(y=>bus.emit("onEdgeAdded", y.item));
+
+  changes.
+    filter(x=>x.type==="remove").
+    map(y=>bus.emit("onEdgeRemoved", y.id));
+
+  changes.
+    filter(x=>x.type==="replace").
+    map(y=>bus.emit("onEdgeModified", y.item));
+}

src/pages/Screening/node/Base.tsx

@@ -2,9 +2,9 @@ import { useTranslation } from "react-i18next";
 import { ReactNode, useContext, useCallback } from "react";
 import { NodeProps } from "@xyflow/react";
 
-import style from "./style.module.scss";
+import { BusContext } from "../Bus";
 
-import Editor from "../context/Editor";
+import style from "./style.module.scss";
 
 type Params = {
   title: ReactNode,
@@ -14,19 +14,21 @@ type Params = {
 export default function Base(p: Params) {
   const {t} = useTranslation();
 
-  const editor = useContext(Editor);
+  const bus = useContext(BusContext);
-  if (editor === undefined) {
+  if (bus === undefined) {
-    throw new Error("no editor context");
+    throw Error("bus is not installed");
   }
 
-  const onDelete = useCallback(()=>editor.remove([p.node.id]), [p.node]);
+  const onRemove = useCallback(
+    ()=>bus.emit("reqRemoveNode", p.node.id),
+    [p.node.id]);
 
   return (
     <div className={style.node}>
       <div className={style.header}>
         <div className={style.title}>{p.title}</div>
         <div className={style.buttons}>
-          <button onClick={onDelete} disabled={!p.node.deletable}>
+          <button onClick={onRemove} disabled={!p.node.deletable}>
             {t("pages.screening.nodes.base.remove")}
           </button>
         </div>

src/pages/Screening/node/fetch.tsx

@@ -3,7 +3,7 @@ import { useTranslation } from "react-i18next";
 import { Handle, Node, NodeProps, Position } from "@xyflow/react";
 import Base from "./Base";
 
-import Editor from "../context/Editor";
+import { BusContext } from "../Bus";
 
 export type ToshoListed = Node<{
   prime: boolean,
@@ -15,11 +15,15 @@ export function ToshoListed(node: NodeProps<ToshoListed>) {
 
   const {t} = useTranslation();
 
-  const editor = useContext(Editor);
+  const bus = useContext(BusContext);
-  if (editor === undefined) {
+  if (bus === undefined) {
-    throw new Error("no editor context");
+    throw Error("bus is not installed");
   }
 
+  const update =
+    (market: string, value: boolean)=>
+    bus.emit("reqModifyNode", {id: id, data: {[market]: value}});
+
   return (
     <Base
       node={node}
@@ -31,7 +35,7 @@ export function ToshoListed(node: NodeProps<ToshoListed>) {
             type="checkbox"
             name="prime"
             checked={data.prime}
-            onChange={(e)=>editor.modify(id, {...data, prime: e.target.checked})}
+            onChange={(e)=>update("prime", e.target.checked)}
           />
           {t("terms.toshoPrime")}
         </label></div>
@@ -40,7 +44,7 @@ export function ToshoListed(node: NodeProps<ToshoListed>) {
             type="checkbox"
             name="standard"
             checked={data.standard}
-            onChange={(e)=>editor.modify(id, {...data, standard: e.target.checked})}
+            onChange={(e)=>update("standard", e.target.checked)}
           />
           {t("terms.toshoStandard")}
         </label></div>
@@ -49,7 +53,7 @@ export function ToshoListed(node: NodeProps<ToshoListed>) {
             type="checkbox"
             name="growth"
             checked={data.growth}
-            onChange={(e)=>editor.modify(id, {...data, growth: e.target.checked})}
+            onChange={(e)=>update("growth", e.target.checked)}
           />
           {t("terms.toshoGrowth")}
         </label></div>

src/pages/Screening/node/present.tsx

@@ -8,7 +8,6 @@ export function TableDisplay(node: NodeProps) {
     <Base
       node={node}
       title={t("pages.screening.nodes.present_TableDisplay.title")}
-      removable={true}
     >
       <div>
         <div><a href="#">{t("pages.screening.nodes.present_TableDisplay.open")}</a></div>

src/pages/context/Editor.tsx

@@ -1,72 +0,0 @@
-import { Dispatch, SetStateAction, createContext } from "react";
-import { Connection, EdgeType, NodeType, addEdge } from "@xyflow/react";
-
-type Pos = {x: int, y: int,};
-
-export interface Iface {
-  add(type: string, pos: Pos, data: any): string;
-  remove(id: string[]): void;
-  modify(id: string, data: any): void;
-
-  connect(conn: Connection): void;
-  disconnect(conn: Connection[]): void;
-};
-
-export const Editor = createContext<Iface|undefined>(undefined);
-export default Editor;
-
-type SetNodes = Dispatch<SetStateAction<NodeType[]>>;
-type SetEdges = Dispatch<SetStateAction<EdgeType[]>>;
-export class Impl implements Iface {
-  _setNodes: SetNodes;
-  _setEdges: SetEdges;
-  _nextId: number = 0;
-
-  constructor(setNodes: SetNodes, setEdges: SetEdges, nextId: number = 0) {
-    this._setNodes = setNodes;
-    this._setEdges = setEdges;
-    this._nextId   = nextId;
-  }
-
-  add(type: string, pos: Pos, data: any): string {
-    const ret = this._genNextId();
-    this._setNodes((nds)=>[...nds, {
-      id: ret,
-      type: type,
-      pos: pos,
-      data: data,
-    }]);
-    return ret;
-  }
-  remove(ids: string[]): void {
-    this._setNodes((nds)=>nds.filter((x)=>!ids.includes(x.id)));
-  }
-  modify(id: string, data: any): void {
-    this._setNodes(
-      (nds)=>nds.map((n)=>n.id === id? {...n, data: data}: n)
-    );
-  }
-
-  connect(c: Connection): void {
-    this._setEdges((eds)=>addEdge({
-      ...c,
-      deletable: true,
-    }, eds));
-  }
-  disconnect(cs: Connection[]): void {
-    this._setEdges((eds)=>eds.filter((e)=>!cs.some(c=>matchEdgeAndConn(e, c))));
-  }
-
-  _genNextId(): number {
-    return "n"+(_nextId++);
-  }
-};
-
-function matchEdgeAndConn(e: Edge, c: Connection) {
-  return (
-    (e.source === c.source) &&
-      ((e.sourceHandle??null) == (c.sourceHandle??null)) &&
-      (e.target == c.target) &&
-      ((e.targetHandle??null) == (c.targetHandle??null))
-  );
-}