Fixes Diagrama del autómata. Poner el dibujo. Que se vaya poniendo en…

… rojo. #9

front/package.json

@@ -8,6 +8,7 @@
     "@reactour/tour": "^3.1.1",
     "antd": "^5.10.0",
     "atomize": "^1.0.28",
+    "mermaid": "^10.6.0",
     "monaco-editor": "^0.44.0",
     "react": "^18.0.0",
     "react-animation": "^1.2.2",

front/src/components/NumberBaseInput.tsx

@@ -15,7 +15,7 @@ const getFormatted = (number: number, newBase: Base) => {
   const targetBase = bases.find(({ base }) => base === newBase);
   if (!targetBase) return "";
 
-  const value = prefixes[newBase] + number.toString(targetBase.radix);
+  const value = prefixes[newBase] + number.toString(targetBase.radix).toUpperCase();
   return value;
 };
 

front/src/lib/i18n/en.json

@@ -106,5 +106,6 @@
   "status.runningTooLong": "The program has been running for too long. (remember that it could be that an infinite loop has been reached) What do you want to do?",
   "invalidNumber": "Invalid number",
   "breakpointReached": "Breakpoint reached",
-  "cannotSetBreakpoint": "You cannot set a breakpoint there"
+  "cannotSetBreakpoint": "You cannot set a breakpoint there",
+  "automata.label": "Automata"
 }

front/src/lib/i18n/es.json

@@ -106,5 +106,6 @@
   "status.runningTooLong": "El programa lleva ejecutandose demasiado tiempo. (recuerda que podría ser que se ha alcanzado un bucle infinito) ¿Qué quieres hacer?",
   "invalidNumber": "Número inválido",
   "breakpointReached": "Se ha alcanzado un breakpoint",
-  "cannotSetBreakpoint": "No puedes poner un breakpoint ahí"
+  "cannotSetBreakpoint": "No puedes poner un breakpoint ahí",
+  "automata.label": "Autómata"
 }

front/src/pages/CPUTable/components/AutomataNode.tsx

@@ -0,0 +1,97 @@
+
+
+import React from "react";
+import { unsubscribeToUIUpdates } from "../../../lib/core";
+import { Row, Col, Text } from "atomize";
+import { subscribeToUIUpdates, getCore } from "../../../lib/core/index";
+
+import I18n from "../../../components/i18n";
+import mermaid from "mermaid";
+
+const baseDiagram = `stateDiagram-v2
+    classDef yellowFill fill:#f0c40094,color:black,font-weight:bold,stroke-width:2px,stroke:yellow
+    classDef orangeBorder stroke:orange,stroke-width:2px,stroke-dasharray:5
+
+    [*] --> S0
+    S0 --> S1 : XXX
+    S11 --> S1 : XXX
+    S10 --> S0 : XXX
+    S2 --> S6 : XXX
+    S6 --> S7 : 00X
+    S9 --> S0 : XXX
+    S7 --> S0 : XXX
+    S6 --> S9 : 01X
+    S1 --> S2 : 0XX
+    S2 --> S10 : 10X
+    S1 --> S11 : 111
+`;
+
+async function renderAutomata(node: Element, text: string = baseDiagram) {
+    node.removeAttribute("data-processed");
+    node.innerHTML = text;
+    await mermaid.run().catch(e => e); // ignore errors
+}
+
+export default function AutomataNode({ data }: { data: any }) {
+    const mermaidContainerRef = React.useRef<HTMLDivElement>(null);
+
+    async function onUIUpdate(this: any) {
+        const nextStateNumber = getCore().get_next_state();
+        const currentStateNumber = getCore().get_state();
+
+        const diagramTxt = `${baseDiagram}\n    class S${currentStateNumber} yellowFill\n    class S${nextStateNumber} orangeBorder`;
+
+        if (mermaidContainerRef.current) {
+            await renderAutomata(mermaidContainerRef.current, diagramTxt);
+        }
+    }
+
+   async function initialize() {
+        mermaid.initialize({
+            startOnLoad: false,
+            theme: "default",
+        });
+        mermaid.contentLoaded();
+
+        if (mermaidContainerRef.current) {
+            await renderAutomata(mermaidContainerRef.current);
+        }
+    }
+
+    React.useEffect(() => {
+        subscribeToUIUpdates(onUIUpdate);
+        initialize();
+
+        return () => {
+            unsubscribeToUIUpdates(onUIUpdate);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+
+    return (
+        <div
+            style={{
+                height: data.height || 300,
+                overflow: "auto",
+                width: data.width || 220,
+                padding: 8,
+                backgroundColor: "#f5f5f5",
+            }}
+            className="pretty-shadow"
+        >
+            <Row>
+                <Col size="100%">
+                    <Text tag="h4" textSize="display4">
+                        <I18n k={data.labelKey} />
+                    </Text>
+                </Col>
+            </Row>
+            <Row>
+                <Col size="100%">
+                    <div className="mermaid" ref={mermaidContainerRef}></div>
+                </Col>
+            </Row>
+        </div>
+    );
+}

front/src/pages/CPUTable/constants/nodes.tsx

@@ -138,8 +138,7 @@ const nodes: Node[] = [
   },
   {
     id: "variables",
-    // position: { x: -260, y: 54 },
-    position: { x: 100, y: -323 },
+    position: { x: 100, y: 120 },
     type: "variablesNode",
     data: {
       labelKey: "variables.label",
@@ -189,5 +188,16 @@ const nodes: Node[] = [
       getFunction: "get_data_bus",
     },
   },
+  {
+    id: "automata",
+    position: { x: 100, y: -323 },
+    draggable: false,
+    type: "automataNode",
+    data: {
+      labelKey: "automata.label",
+      width: 300,
+      height: 416
+    },
+  },
 ];
 export default nodes;

front/src/pages/CPUTable/index.tsx

@@ -39,6 +39,7 @@ import I18n from "../../components/i18n";
 import { useTour } from "@reactour/tour";
 import { getStoredValue, setStoredValue } from "../../lib/storage";
 import VariablesNode from "./components/VariablesNode";
+import AutomataNode from "./components/AutomataNode";
 
 const { Header, Sider, Content, Footer } = Layout;
 
@@ -54,6 +55,7 @@ const nodeTypes: NodeTypes = {
   cycleTimeNode: CycleTimeNode as unknown as ReactNode,
   aluNode: ALUNode as unknown as ReactNode,
   riNode: RINode as unknown as ReactNode,
+  automataNode: AutomataNode as unknown as ReactNode,
 };
 
 function CPUTable({ hidden }: { hidden: boolean }) {