In-app notifications

[KennedyRichard]

This is something that's been on my mind for a long time but I never got to write about it here. Today, as I was writing a reply to another user regarding a different matter, it came to mind again, so I'm taking the opportunity to record it here and will also add it to the list of planned/requested features.

Nodezator performs a lot of silent checks during a normal usage session. Some of those checks produce notifications to give users feedback of some of their actions or to explain some behavior.

However, for now, the only way by which such notifications can reach the users are via printed text on the command line, when the users launched Nodezator from it.

For instance, if you type "3/0" (three divided by zero) in a int/float entry, it isn't allowed, naturally. Instead, the entry just reverts to the previous value. When this happens, the following message is printed in the command line: "From intfloat widget: division by zero".

Many other similar messages are printed in various different occasions. Another example is when the user attempts to connect 02 input sockets, since you can't connect an input socket to another one. When this happens, another message is printed is printed on the command line.

However, I want this information to be easily available in the app itself, because it is easier and more straightforward this way than to have to check the command line in another window.

Additionally, I want such notifications to appear in a subtle way. I don't want stuff to be popping up on the screen all the time. Instead, I'll probably use a little icon on the corner of the screen that shows notifications, just like icons in smartphones display a small bubble with the number of unseen notifications. Whenever the users want to read the notifications, they just need to click the icon and the messages are shown. Otherwise, the users can just ignore such notifications. This way the feature keeps its usefulness without being disruptive/distracting.

So that's the feature request.

I didn't think about the specifics but I believe this is enough information to give you an idea of the feature.

Part of it is actually already implemented. As some of you might have noticed, Nodezator has a "user log" that can be accessed in the menubar via the Help > Show user log option. The user log is usually empty but some notifications do get displayed there. For instance, whenever an error occurs when executing the node layout, the error is displayed there. Try executing a graph like this one below (dividing 1 by 0):

When it is executed, an error is displayed in a dialogue on the screen, but it is also recorded in the user log, so you can always inspect it later if you wish. I'm thinking of displaying the other notifications there as well when the user clicks the icon in the corner I mentioned earlier. Either there or on a similar dedicated notification interface, I'm still thinking about it.

[nrichards]

Currently

• The app has a realtime text shown at the bottom. "Usability" is the purpose given in the source code.
• Also there is a User Log. The purpose .. sorry I have not learned yet, TBD.
• There is a Custom STDOUT. Sorry I have not learned this yet either, TBD.
• And there is the STDOUT console. This includes uncategorized debug log messages, which may or may not be important to the user.

Impressions

• As a user, I am afraid to click on the Show User Log. I think it might be a rabbit-hole ... a place where I will become "stuck" cognitively, not knowing what to do with the data. I open the log and it might be empty.
  • Consider adding explanatory text when no data is available.

Proposal

• (I don't believe this is what you are thinking about:) For messages the user should read in order to benefit more from the app, use a well-known notification technique to indicate purpose of the notification
  • Red dots 🔴🔴 are used for user messages in many apps. These red dots show persistent notifications.
  • Following the trail of crumbs, the user would find a Show Notifications menu. Clicking this could pop up an HTSL or other Log text viewer.
  • Once the user has read these messages, the dots would disappear.
  • Example: See the mock-up for this, below.
• (This is relevant to your topic:) For messages around interaction-feedback, I do think a "Toast" style notification is worthwhile.
  • It is a temporary error which requires NO user interaction to correct. So it should not persist.
  • Example: https://toast-notification.webflow.io/ (click the button)
• For a persistent error, a Red X near to the GUI element that triggered the error, could be useful.
  • The X would "nag" or annoy the user until the error is corrected.
  • I do not have a use-case, or a mock-up.
• To repeat an earlier proposal, consider adding explanatory text to the Show User Log body when no data is available to explain the feature for curious users who have not yet triggered any log messages.

Resources

[KennedyRichard]

First of all, thank you for the time and effort not only to explain your points/proposal, but to prepare images showing it in more detail.

Regarding your proposal...

The Proposal of the trail of crumbs and toast look very appropriate. I'm 100% sold on the concept and explanation 👍 . I'll include such ideas in my implementation when tackling this (unless some practical reason prevents me from bring this design to fruition, but I can't think of any, I believe this is all super feasible). I'm just unsure about the exact placement of the red dots, but your suggestion is the best alternative so far.

The suggestion about adding explanatory text to the user log is something that hadn't crossed my mind and seems appropriate as well 👍, I'll do this as well.

The persistent red "X" near problematic GUI elements is something I'll consider as well, but like you I can't quite visualize it being that useful, specially since it could also add visual noise to the graph and be confused with the red "x" used to delete widgets. I'll ponder.

Clarifying the custom stdout

The custom stdout just represents content that would otherwise be printed to the command line but it is instead captured, stored and shown inside Nodezator.

This is how it can be done:

from io import StringIO
from contextlib import redirect_stdout

with StringIO() as custom_stdout:
    with redirect_stdout(custom_stdout):
        print("Hello, world!")

If you execute the code above, your command line will show nothing, despite the call to print a string. Instead, the printed content will be stored in the custom_stdout object.

You can try this yourself: instantiate a print() node, pass a string to it, then press F12 (or click the menubar command Graph > Execute graph). You can only see what is printed if you are running Nodezator from a command line, but if you don't have a command line opened, pressing Shift+F12 (or clicking the menubar command Graph > Execute with custom stdout) will catch the printed contents and display it in your screen immediately after executing the graph. You'll also be able to inspect the contents whenever you want by pressing Ctrl+j (or clicking the menubar command Help > Show custom stdout).

Maybe I should use replace the custom stdout name by another term, but I'm not sure about that, since it is how we call it in Python as well. That is, it is just a stream object created for the sole purpose of capturing the contents of the command line in order to display them inside Nodezator. This is why the context manager contextlib.redirect_stdout has its name. That is, rather than use the standard output, that is displayed in the command line, we use a custom output stream, which catches everything that is printed.

In case you are curious, this is an excerpt of the method that executes the graph with a custom stdout:

    def execute_with_custom_stdout(self):

        with StringIO() as custom_stdout:

            ###

            with redirect_stdout(custom_stdout):

                print("Graph execution triggered at UTC:" f" {datetime.utcnow()}")

                self.execute_graph()

                print()

The rest of the method is just me catching, storing and displaying the contents of the custom_stdout. The self.execute_graph is the regular execution of the graph that you get when you press F12.