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/locales/jp.json

@@ -11,8 +11,15 @@
   "pages": {
     "screening": {
       "nodes": {
+        "base": {
+          "remove": "削除"
+        },
         "fetch_ToshoListed": {
           "title": "東証上場銘柄一覧"
+        },
+        "present_TableDisplay": {
+          "title": "銘柄一覧表示",
+          "open": "開く"
         }
       }
     }

src/pages/Screening.tsx

@@ -1,45 +0,0 @@
-import { useCallback } from "react";
-import { Background, Controls, ReactFlow, Node, useNodesState, useEdgesState, addEdge, Connection } from "@xyflow/react";
-import * as node from "./node/";
-
-import "@xyflow/react/dist/style.css";
-
-import { History, Impl as HistoryImpl } from "./context/History";
-
-const nodeTypes = {
-  fetch_ToshoListed: node.fetch.ToshoListed,
-};
-const initialNodes: Node[] = [
-  {id: "n1", type: "fetch_ToshoListed", position: {x:0, y:0}, data: {prime: true, standard: true, growth: true}},
-  {id: "n2", position: {x:0, y:100}, data: {label: "hi"}},
-  {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([]);
-
-  const onConnect = useCallback(
-    (connection: Connection) => setEdges((eds) => addEdge(connection, eds)),
-    []
-  );
-
-  return (
-    <History.Provider value={new HistoryImpl(setNodes)}>
-      <div style={{ position: "absolute", left: 0, right: 0, top: 0, bottom: 0 }}>
-        <ReactFlow
-          nodeTypes={nodeTypes}
-          nodes={nodes}
-          edges={edges}
-          onNodesChange={onNodesChange}
-          onEdgesChange={onEdgesChange}
-          onConnect={onConnect}
-          fitView
-        >
-          <Controls />
-          <Background />
-        </ReactFlow>
-      </div>
-    </History.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

@@ -0,0 +1,41 @@
+import { useTranslation } from "react-i18next";
+import { ReactNode, useContext, useCallback } from "react";
+import { NodeProps } from "@xyflow/react";
+
+import { BusContext } from "../Bus";
+
+import style from "./style.module.scss";
+
+type Params = {
+  title: ReactNode,
+  children: ReactNode,
+  node: NodeProps,
+};
+export default function Base(p: Params) {
+  const {t} = useTranslation();
+
+  const bus = useContext(BusContext);
+  if (bus === undefined) {
+    throw Error("bus is not installed");
+  }
+
+  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={onRemove} disabled={!p.node.deletable}>
+            {t("pages.screening.nodes.base.remove")}
+          </button>
+        </div>
+      </div>
+      <div className={style.body}>
+        {p.children}
+      </div>
+    </div>
+  );
+}

src/pages/Screening/node/fetch.tsx

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

src/pages/Screening/node/index.tsx

@@ -1,2 +1,3 @@
 export { default as Base } from "./Base";
 export * as fetch from "./fetch";
+export * as present from "./present";

src/pages/Screening/node/present.tsx

@@ -0,0 +1,18 @@
+import { useTranslation } from "react-i18next";
+import { Handle, NodeProps, Position } from "@xyflow/react";
+import Base from "./Base";
+
+export function TableDisplay(node: NodeProps) {
+  const {t} = useTranslation();
+  return (
+    <Base
+      node={node}
+      title={t("pages.screening.nodes.present_TableDisplay.title")}
+    >
+      <div>
+        <div><a href="#">{t("pages.screening.nodes.present_TableDisplay.open")}</a></div>
+      </div>
+      <Handle type="target" position={Position.Left}/>
+    </Base>
+  );
+}

src/pages/Screening/node/style.module.scss

@@ -0,0 +1,21 @@
+.node {
+  background-color: #FFF9E5;
+  border: 1px solid #4A9782;
+  border-radius: 0.5rem;
+  overflow: hidden;
+
+  .header {
+    background-color: #DCD0A8;
+    display: flex;
+    padding: 0 .5rem;
+    gap: 1rem;
+
+    .title {
+    }
+    .buttons {
+    }
+  }
+  .body {
+    padding: .5rem;
+  }
+}

src/pages/context/History.tsx

@@ -1,22 +0,0 @@
-import { Dispatch, SetStateAction, createContext } from "react";
-import { Node, } from "@xyflow/react";
-
-export interface Iface {
-  push(id: string, data: any): void,
-};
-
-export const History = createContext<Iface|undefined>(undefined);
-export default History;
-
-export class Impl implements Iface {
-  setNodes: Dispatch<SetStateAction<Node[]>>;
-
-  constructor(setNodes: Dispatch<SetStateAction<Node[]>>) {
-    this.setNodes = setNodes;
-  }
-  push(id: string, data: any): void {
-    this.setNodes(
-      (nds)=>nds.map((n)=>n.id == id? {...n, data: data}: n)
-    );
-  }
-};

src/pages/node/Base.tsx

@@ -1,14 +0,0 @@
-import { ReactNode } from "react";
-
-type Params = {
-  title: ReactNode,
-  children: ReactNode,
-};
-export default function Base(p: Params) {
-  return (
-    <div>
-      <div>{p.title}</div>
-      {p.children}
-    </div>
-  );
-}