Keep users informed
Some operations in applications may take a long time. For instance, loading data from an external source or running an algorithm on a large graph. In these situations, you want to keep your users informed by providing them with visual and meaningful feedback. The same applies when you iterate through a list. In that case, users want to receive visual updates on the processed items. Adding a progress indicator is a good solution in both situations.
A single node makes all the difference
Graphileon nodes are functions. The one in this example is a so-called HtmlView
, that displays an Html widget, inside of which we put a textarea, that is updated every time an incoming TRIGGER
is fired. You can use the TRIGGER payload to set the message that appears in the log. It has a batch TRIGGER
that points to itself to clear its contents.
If you want to add a progress indicator to your Graphileon configuration, you can add the function and the batch trigger by running the Cypher statement below against your application store.
// WARNING // The Cypher statement below does not take into account any existing data in the database // you are running it against. // It may cause conflicts (e.g. with existing constraints), or produce other undesired side effects // (e.g. change results of existing queries). // It is therefore highly recommended to create a backup of your graph database before // executing the statement. CREATE (_267152:`DUMP`:`IA_Function` { `#logEntries:evaluate`: 'full', `container.height`: '400', `$template`: ' <textarea style="height:95%; width:95%;" id="qvFPAgvR5dEcWHJH">{{#logEntries}} {{.}}{{/logEntries}} </textarea> <script> let $textarea = $(\'#qvFPAgvR5dEcWHJH\'); $textarea.scrollTop($textarea[0].scrollHeight); </script>', `container.closable`: 'true', `name`: 'Progress', `$area`: 'sidebar-right', `type`: 'HtmlView', `uuid`: 'd978f150-b529-11ea-a47d-0242f63b198c', `container.id`: 'progress', `#logEntries`: '[]', `$_instance`: 'progressView' }) CREATE (_267152)-[:`TRIGGER` { `action`: 'clear', `#logEntries:evaluate`: 'full', `type`: 'batch', `uuid`: 'e7e3e420-b529-11ea-a47d-0242f63b198c', `#logEntries`: '[]' }]->(_267152)
Triggers that point to the HtmlView
should update the contents of the log by putting properties on the trigger, like the ones below.
{ "$_update.add.logEntries": "'Data loading started at ' +now()", "$_update.add.logEntries:evaluate": "full" }
An interactive diagram that illustrates the approach is available here. To see it in action, watch the video below.