Logical Expression Visualizer

Question

I've developed a business rule engine that users can write rules in boolean syntax.

For example rules are: R1, R2, R3

Sample Expression: (R1 AND R2) OR R3

I want to visualize this expression. For example, visualization framework may display the expression in a tree view and insert colors.

Is there any javascript or any other code framework to achieve this? (Application is an ASP.NET application)

Answer 1

I can't help but answer this one even though my answer may not help you easily solve your problem. Back in 1998, my very first Javascript project was precisely a boolean expression visualizer.

The code is not available anywhere, so I can't share it. (I doubt even my former employer still has a copy.) And even it it was, it ran on IE4, 5.0 and 5.5; I don't think it was ever updated for IE6, and don't know if it ran there.

But I can still tell you the basic ideas, and even today, I'm still fairly proud of the results, although I know I would shudder to see the actual code.

Of course a boolean expression can easily be represented by a tree structure. Each non-leaf node was either an AND, an OR, or a NOT node in the tree, and the ANDs and ORs could have multiple children (so I represented ("A and B and C and D" as AND(A, B, C, D), not just as combinations of binary ANDs.) To display the data, I simply used nested boxes. ANDs ran horizontally, ORs ran vertically, with the keyword "and" and "or" repeated between the blocks. NOT was just a box in a box with the keyword "not" in the outer one.

My leaf nodes were associated with real data scenarios that the user could use for testing, so instead of just "A" and "B", they looked, for instance, like

age < 30
gender = 'F'
income > 40000

The user could enter sample data for fields age, gender, and income and the output would change to a red-green display to show whether each block of the expression, and of course the entire expression was true or false.

The fields to use were configurable, and the test cases were saved for future elaboration.

This was a very fun project, and it helped in communication between business people who were writing rules, and programmers who implemented them, groups who often had very different ideas of how one might use the word "and" in polite company. :-)

But the main points are that one very useful way to visualize boolean expression is with simple boxes: NOT is a box in a box, with word "not" in the outer one. ORs are boxes containing vertically grouped boxes with "or" in between, and ANDs are boxes containing horizontally grouped boxes with "and" in between. If you can actually assign truthy/falsey values to your primitives, then green for truthy boxes, red for falsey ones makes for a very compelling display.

...

But you'll have to write your own code. Sorry.