Bird's-eye view flowchart of event handlers across queries/components

One of the things that's beneficial with writing code (as opposed to using something like Retool, as awesome as it is) is that it's easier to get a bird's eye view of what's going on/how everything relates, and searching through code to find those relations is not only fast but pretty intuitive, at least for someone who's used to doing it. Even better is having some sort of UML diagram-thing that dynamically maps the architecture in a flow-chart-like way, but I don't do this myself unless it's something simple I whip up Whimsical.

However with Retool, I find myself constantly flipping between my many queries, components, and their respective event handlers, trying to assemble in my mind how they're chained together. I sometimes make quick flow charts to make sure that I'm not duplicating any queries that are already being triggered by another's onSuccess handler (or via the normal query event handlers), but it feels like walking around a cave with a candle, since I have to visit queries one by one, check components one by one, to figure out how certain actions are chained. Of course, designing things consistently and predictably from the ground up on my end makes introducing bugs less likely and this process less arduous, but things don't always go as planned, and changing how queries/events fire each other can become hairy business if I have to re-design certain action flows.

What I'd like to see (this is admittedly a big ask) is for Retool to provide a dynamic flowchart for how all my queries, their corresponding event handlers, and my components' event handlers (and perhaps even hard-coded triggers() inside JS queries) all relate to each other. That way it's easier to avoid duplicating certain logic/certain guards for specific actions firing, as well as knowing where the right place in the chain to insert a new event handler is.

Event handlers can't be chained in Retool (always run in parallel, unless I guess writing a script), which would solve some of the problem, but the real pain point is that even when I design the flow such that I'm using the right string of query event handlers/component event handlers to execute a full chain of actions, if any of that needs to be changed down the line, I have to methodically examine each query, component, and their event handlers to understand once again how everything is chained before making a change.

I realize you have to do something similar with code, but combing through code is much easier to solve the same problem then having to inspect every suspect component/query in a GUI. A flowchart would function as a map so I knew where exactly to dive in.

Please let me know if this makes sense or if I'm approaching the whole problem in a poor way!

1 Like

I really like this idea.

There have been many 4GL/RAD/low-code/no-code platforms over the decades that have (or have tried to) incorporated a UML/flowchart type of functionality.

I have only dabbled in them, but they appear to take on a more flowchart first approach which I think was part of their problem, unless they were severely domain constrained. A successful modern example is Unreal Engine.

But using a flowchart as an analysis tool seems like a much better use in my mind. Visual Studio (my main home when not in Retool) has this in its Enterprise version (never used it since I don't have the license) but a few add-ons exist which I really should try out.

Retool's Debug Console, ctrl-` (backtick), has a query dependency map, but it's format is only useful for simple apps which don't really need it.

Glad you think it'd be a nice idea too! And also thanks for letting me know that the Debug Console even exists, I actually had no idea. Unfortunately opening it bottlenecks my Retool editor and everything freezes (and I have no reason to believe it's my machine...) So when it finally loads I'll have to tool around.

I'd like to +1 this - I was actually considering creating new feature request, luckily I happened upon this one instead. This would be really helpful - and have it show you where things are breaking, or what type of data (string, object, or array) is being output.

I do think this would really help Retool up its game when it comes to helping folks debug.