- Packaging - ideally,
react-formula-visualizer
should be packaged as a standalone npm react library. In the absence of npm lib, entirety of the component source is abstracted insideformula_visualizer
directory. - Component APIs/exports:
FormulaVisualizer
is the main exported component. This react component requires a single prop namedast
, which conforms to the typeFVExpression
.type
(s) are exported to the consumer for convenience.- A
useFVUtils
custom hook is exported for convenience as well. Hook provides utilities like ID generation and parsing formula.
- Component state management:
FormulaVisualizer
uses an internal React Context namedFVProvider
for its state management.- Inner workings of the context is abstracted from the consumer.
- MVP Features:
- Plaintext visualization - generate a formula string from the tree.
- Interactive visualization - syntax tree visualized as an interactive formula. Enables deletion of nodes from the tree through UI interactions. Invalid node deletions are highlighted.
- Unary Expression - sample data doesn't have any example of unary expression. Unary expression type are excluded from the implementation.
- String value - sample data doesn't have any example of string expression. String type are excluded from the implementation.
- Option 1. Using github bundle
- Clone repo
$: git clone react-formula-visualizer.bundle react-formula-visualizer
- Go to project directory
$: cd react-formula-visualizer
- Install project dependencies
$: yarn install
- Start project in local webserver
$: yarn start
- Skipped: Run unit test suite
$: yarn test
- Skipped: Production build version not tested
$: yarn build
- Option 2. Using source zip file
-
Download and unzip source zip file
-
Go to project directory
$: cd react-formula-visualizer
- Install project dependencies
$: yarn install
- Start project in local webserver
$: yarn start