algomin/src/index.js

Algomin - Viszualizing Distributed Algorithms

import React from 'react';
import ReactDOM from 'react-dom';
import {Algomin} from "./Algomin";

/**
 * React class for local development
 */
class Base extends React.Component {

    constructor(props){
        super(props);

        this.state = {
        }
    }

    componentDidMount() {
        let algomin = new Algomin("algomin_root");
        algomin.reset();
        algomin.parseExpression("" +
                "Node1 = shape(x=40, y=10, w=7, h=10, label='Node1')\n" +
                "Node2 = shape(x=60, y=30, w=7, h=10, label='Node2')\n" +
                "Node3 = shape(x=50, y=60, w=7, h=10, label='Node3')\n" +
                "Node4 = shape(x=30, y=60, w=7, h=10, label='Node4')\n" +
                "Node5 = shape(x=20, y=30, w=7, h=10, label='Node5')\n" +
                "\n" +
                "Node1.sendMessage(target=Node2, message='1', speed=3000)\n" +
                "Node2.sendMessage(target=Node3, message='2', speed=3000)\n" +
                "Node3.sendMessage(target=Node4, message='3', speed=3000)\n" +
                "Node4.sendMessage(target=Node5, message='4', speed=3000)\n" +
                "Node5.sendMessage(target=Node1, message='5', speed=3000)\n" +
                "\n" +
                "wait(duration=3000)\n" +
                "\n" +
                "Node1.sendMessage(target=Node2, message='5', speed=3000)\n" +
                "\n" +
                "wait(duration=3000)\n" +
                "\n" +
                "Node2.sendMessage(target=Node3, message='5', speed=3000)\n" +
                "\n" +
                "wait(duration=3000)\n" +
                "\n" +
                "Node3.sendMessage(target=Node4, message='5', speed=3000)\n" +
                "\n" +
                "wait(duration=3000)\n" +
                "\n" +
                "Node4.sendMessage(target=Node5, message='5', speed=3000)\n" +
                "\n" +
                "wait(duration=6000)");
        algomin.start();
    }

    render() {
        return (
            <div
                id={"algomin_root"}
                style={{
                    width: "100%",
                    height: "99vh",
                    float: "left",
                    position: "relative"
                }}
            >
            </div>
        );
    }
}


ReactDOM.render(
  <React.StrictMode>
      <Base/>
  </React.StrictMode>,
  document.getElementById('root')
);