Looking for JQuery style web control to drill down a tree data structure [closed]

Closed. This question is seeking recommendations for books, tools, software libraries, and more. It does not meet Stack Overflow guidelines guidelines. It is not currently accepting answers.

---

We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.

Closed 8 years ago.

Improve this question

I'm looking for a JQuery-style javascript/CSS control that will allow the user to drill down into the workings of an expression.

For example, imagine we have the following expression:

  (2+3) × (4+5) + Max(22, 31, 16, 62, 40)

This would evaluate as follows:

   (((2+3)×(4+5))+Max(22, 31, 16, 62, 40))  
 ⇒ ((5×9)+62)  
 ⇒ (45+62)  
 ⇒ 107

I'd l开发者_如何学运维ike to present these intermediate steps in such a way that the user can drill down a particular evaluation branch to discover the inputs which produced a particular value.

I've toyed with the idea of manipulating the expression's workings into a tree structure, perhaps with intermediate evaluations inserted (shown in blue in the example). However, I'm concerned that the audience to which I'm aiming this software may find this a little intimidating.

e.g.

An alternative, friendlier representation could be to allow in-place drill down as shown in this example:

The expression initially looks like this:

User clicks the '107' button which changes the control to this:

User clicks the '62' button which changes the control to this:

Before I write my own control I thought there may be an existing control available that could be used for this purpose. Alternatively, I'd really appreciate any alternative suggestions for representing this data in a way that may be more intuitive.

---

I couldn't find a control that worked how I described above so I created one. The source is available at: http://github.com/Wheelies/expression-explorer

The control is initialized with a tree data structure which can be navigated by the user.

The expression (((2+3)×(4+5))+Max(20+2, 31, 16, 62, 40)) can be parsed into a tree which may be explored as follows:

User clicks the [107] button which changes the control to this:

[62] button is clicked which changes the control to this:

User now clicks [22]

Please note that expression parsing isn't handled by this control. Also, I haven't implemented the control as a true JQuery plugin yet