Visualizer.js

export const FormulaVisualizer = (props) => {
    return <div>{renderNode(props.formulaSyntaxTree)}</div>;
}

const ExpressionNode = (props) => {
    return <div className="expressionNode">{props.children}</div>;
}

const renderNode = (node) => {
    switch (node.type) {
        case "NUMBER":
            return <NumberNode node={node}/>;
        case "VARIABLE":
            return <VariableNode node={node}/>;
        case "MULTIPLICATION"
            return <MultiplicationNode node={node}/>;
        case "PAREN":
            return <ParenthesisNode node={node}>;
        case "FUNCTION":
            return <FunctionNode node={node}/>;
        case "DIVISION":
            return <DivisionNode node={node}/>;
        case "SUBTRACTION":
            return <SubtractionNode node={node}/>;
        case "ADDITION":
            return <AdditionNode node={node}/>;
        case "PI":
            return <PiNode node={node}/>
    }
    return <div>TO BE IMPLEMENTED</div>;
}


const AdditionNode = (props) => {
    return <ExpressionNode>{renderNode(props.node.left)} + {renderNode(props.node.right)}</ExpressionNode>;
}


const SubtractionNode = (props) => {
    return <ExpressionNode>TO BE IMPLEMENTED</ExpressionNode>;
}

const MultiplicationNode = (props) => {
    return <ExpressionNode>{renderNode(props.node.left)} * {renderNode(props.node.right)}</ExpressionNode>;
}

const DivisionNode = (props) => {
    return <ExpressionNode>{renderNode(props.node.left)} / {renderNode(props.node.right)}</ExpressionNode>;
}

const ParenthesisNode = (props) => {
    return <ExpressionNode>({renderNode(props.node.expression)})</ExpressionNode>;
}

const FunctionNode = (props) => {
    return <ExpressionNode>{props.node.name}({ props.node.arguments.map( (argument) => ({renderNode(argument)})) })</ExpressionNode>;
}

const PiNode = (props) => {
    // Inside formula-parser.js, under NUMBER is the sstructures for E, PI which are basically {"type": ..., "value": Math.E | Math.PI}
    return <ExpressionNode>{props.node.value}</ExpressionNode>;
}

const NumberNode = (props) => {
    return <ExpressionNode>{props.node.value}</ExpressionNode>;
}

const StringNode = (props) => {
    // There's no string type defined in the formula-parser
    return <ExpressionNode>TO BE IMPLEMENTED</ExpressionNode>;
}

const VariableNode = (props) => {
    return <ExpressionNode>{props.node.name}</ExpressionNode>;
}