Inter page communication

[mjmare]

I you may have guessed I'm trying to go beyond toy apps with JustPy. So I'm running into situations where I'm wondering how to solve them in the JustPythonic way.

I was wondering how to handle inter page communication.
In my app I have a shared main page that displays a list (say from a database). By pushing a button the user is directed to page with a form. The user enters data and on submit the new data is stored in the database and the user is redirected to the main page.
The main page (since it is already instantiated because of delete_flag=False) does not show the new data.

Now for the Q: how would the main page component be informed of the change?
Option 1: use query params. It seems that params added to the page.redirect (eg page.redirect = '/?cmd=submit') are detected.
Option 2: use global vars to the main page to call some method on the main page. Easily leads to circular references and requires implementation details of the target main page component by the form. Not ideal.
Option 3: let the form send some 'data added' event to other page components so that they can update themselves. I did not find a documented way to send events. I think an event system (something like blinker https://pythonhosted.org/blinker/) would be the solution that decouples components the most.

So what would you recommend?

[elimintz]

What you think of the idea to not have a shared page? Write a function that builds a page and returns it and use that function to create a new page for each request. You don't really need to have a standalone function for this, you can do it in the request but I personally find this method more clear.

In this way, there is no need for communication and the page is built with the correct list from the database each time it is accessed.

In the example below I use this method to show the time when a page is loaded but you would change that to accessing the database info.

import justpy as jp
import time

def create_page():
    # Have all the same stuff here
    wp = jp.WebPage()
    wp.d = jp.Div(classes='text-5xl m-1 p-1 bg-gray-300 font-mono', a=wp)
    return wp


def page_example():
    wp = create_page()
    # Update just the different stuff here, in your case load the data from database
    wp.d.text = time.strftime("%a, %d %b %Y, %H:%M:%S", time.localtime())
    return wp


jp.justpy(page_example)

[mjmare]

I think I was not clear. In your example you just have 1 page and use a function as a factory. That's fine. My point is: how can one page inform other pages that something interesting has happened?
In my example the form stores new information in a database. Only then it redirects to the main page. How could the main page (which might already be displayed in some browser windows) know something has happened? In my example it should reload its data from the database to pick up the changes.

[elimintz]

Just to be clear, you would like some dashboard that updates when the underlying data changes?

In the clock example https://justpy.io/tutorial/pushing_data/#clock this is done by having a background task that updates the pages. You could modify that to check if something has changed and then if it has, update the page.

[knoxvilledatabase]

@mjmare, you and I are building production apps and running into the same types of things. Outside of what @elimintz mentioned about the shared page (where you push data to the page regardless if its saved to the database), I have ran into the issue you mentioned about returning to the page with the updated data from the database. If you're not using a shared page, the function that submits and redirects the user back to the original page needs to save to the database then hit another function that re-queries the database for the latest change, then page.delete_components() and re-creates the page for the user. In some cases I have to use async await for this when updating fields on the same page from say a QDialog modal.

[elimintz]

I would like to understand this issue more so I can improve the framework to simplify the process. If either of you could please elaborate it would be much appreciated.

I don't quite understand the flow yet, A user fills a form updating some database and then what? Some other page the specific user has open is updated? All pages for all users are updated? Something else is updated?

[knoxvilledatabase]

@elimintz, I don't think it's a framework issue, it just has to do more with Python in general. In my case, I'm communicating directly to the Django ORM so I'm not doing ajax calls to an API:

1. The user fills out the form and clicks a submit button to submit to the database.
2. After submit, the redirect function is called back to the original page
3. The reloading of the page performs a wp.content.delete_components().
4. **Important: At this point the data from the database is stale because that instance in the database was updated so, before continuing, the database needs to be queried to get the updated database data.
5. New database query takes place so that the updated data is now loaded.
6. Page content is rebuilt using the new data from the database.

Now, all of the other users need to be notified that the data has changed. In my case, I'm going to use a notification icon (shared_div/shared component) at the top of the page to let the other users know the data has changed and they need to click here to get the latest data. I'm doing this instead of a shared page because of inline editing, popup modals, etc that are taking place inside my page, plus each user has different data on the page.

This has been something that is challenging to solve which is why I opened #59, the broadcast wp.update() issue.

[knoxvilledatabase]

@mjmare, it sounds like you are trying to have a redirect button within the shared_div which I don't think will work because it impacts all users, but if you can have the redirect button outside of the shared div you can redirect. This is a basic sample of how to redirect within a single page app with two shared pages and a shared notification_div and it doesn't impact other users, hope this helps:

import justpy as jp

shared_messaging_div = jp.Div(classes='m-2 h-1/2 border overflow-auto', delete_flag=False)
shared_feed_div = jp.Div(classes='m-2 h-1/2 border overflow-auto', delete_flag=False)
shared_notification_div = jp.Span(text='0', delete_flag=False)


class Messages(jp.QDiv):

    def __init__(self, **kwargs):
        super().__init__(**kwargs)
        panel_body = jp.QDiv(a=self)
        table = jp.Table(a=panel_body, text='Messages')
        tr = jp.Tr(a=table)
        td1 = jp.Td(a=tr)
        td2 = jp.Td(a=tr)
        self.message = jp.Textarea(placeholder='Enter message here', a=td1, debounce=500)
        jp.QBtn(
            a=td2,
            label='Send',
            color='positive',
            text_color='white',
            unelevated=True,
            classes="full-width",
            size='lg',
            click=self.send_message,
        )

    async def send_message(self, target, msg):
        await msg.page.run_javascript('console.log("hello")')
        if self.message.value:
            d = jp.Div(text=self.message.value)
            shared_messaging_div.add_component(d, 0)
            self.message.value = ''
            old_count = int(shared_notification_div.text)
            shared_notification_div.text = f"{old_count + 1}"
            await shared_notification_div.update()
            await shared_messaging_div.update()


class Feed(jp.QDiv):

    def __init__(self, **kwargs):
        super().__init__(**kwargs)
        panel_body = jp.QDiv(a=self, text='Feed')
        table = jp.Table(a=panel_body)
        tr = jp.Tr(a=table)
        td1 = jp.Td(a=tr)
        td2 = jp.Td(a=tr)

        self.message = jp.Textarea(placeholder='Whats on your mind?', a=td1, debounce=500)
        jp.QBtn(
            a=td2,
            label='Send',
            color='positive',
            text_color='white',
            unelevated=True,
            classes="full-width",
            size='lg',
            click=self.add_feed,
        )

    async def add_feed(self, target, msg):
        if self.message.value:
            d = jp.Div(text=self.message.value)
            shared_feed_div.add_component(d, 0)
            self.message.value = ''
            await shared_feed_div.update()


class DefaultLayout(jp.QuasarPage):
    template_file = 'quasar.html'

    def __init__(self, **kwargs):
        super().__init__(**kwargs)
        self.notification_div = jp.QDiv(a=self)
        jp.Span(text="Messages: ", a=self.notification_div)
        self.notification_div.add(shared_notification_div)
        outer_div = jp.QDiv(a=self)
        table = jp.Table(a=outer_div)
        tr = jp.Tr(a=table)
        self.left_nav_td = jp.Td(a=tr, style='vertical-align:top')
        right_hand_content_td = jp.Td(a=tr, style='vertical-align:top;width:500px;height:500px')
        self.content = jp.QDiv(a=right_hand_content_td, style='margin-left:25px')


def messages_and_feed_app():
    def messages(self, msg):
        msg.page.content.delete_components()
        Messages(a=msg.page.content)
        msg.page.content.add(shared_messaging_div)

    def feed(self, msg):
        msg.page.content.delete_components()
        Feed(a=msg.page.content)
        msg.page.content.add(shared_feed_div)

    wp = DefaultLayout()
    shared_messaging_div.add_page(wp)
    shared_feed_div.add_page(wp)
    shared_notification_div.add_page(wp)

    left_nav = jp.QDiv(a=wp.left_nav_td)
    jp.QBtn(
        a=left_nav,
        label='Messages',
        color='positive',
        text_color='white',
        unelevated=True,
        classes="full-width",
        style='margin-top:10px',
        click=messages,
    )

    jp.QBtn(
        a=left_nav,
        label='Feed',
        color='positive',
        text_color='white',
        unelevated=True,
        classes="full-width",
        style='margin-top:10px',
        click=feed,
    )

    class msg(object):
        page = wp

    messages(None, msg)
    return wp


jp.justpy(messages_and_feed_app)

[mjmare]

@elimintz, I don't think it's a framework issue, it just has to do more with Python in general. In my case, I'm communicating directly to the Django ORM so I'm not doing ajax calls to an API:

1. The user fills out the form and clicks a submit button to submit to the database.
2. After submit, the redirect function is called back to the original page
3. The reloading of the page performs a wp.content.delete_components().
4. **Important: At this point the data from the database is stale because that instance in the database was updated so, before continuing, the database needs to be queried to get the updated database data.
5. New database query takes place so that the updated data is now loaded.
6. Page content is rebuilt using the new data from the database.

This is indeed the scenario that I had in mind. I think this is, at its core a signalling problem. The form page needs to signal to the main page that something has happened (ie data was added to the database). If the the Main page would be notified of such event it could decide to update itself. If no signalling is in place it has no other option of polling the database, which is inefficient.

This is not at all specific to JustPy. All web applications and GUI applications face similar challenges.
That is why you often find event systems or publish/subscribe systems in GUI freamworks (PyQT events and the Blinker library come to mind). They also enable decoupling of pages/forms/windows/widgets: a component can handle events without knowing where they originate. Or it can handle some events and ignore others.
In traditional web apps one could use query params to signal some info to the next page. Or the Vue.js router supports passing data to the route.

So that's why I was wondering how to do this in JustPy. Since the application is composed of pages and components, that may or may not be shared, I think JustPy would benefit from some general event system.

Hope this helps a bit.

[WolfgangFahl]

I'd love to keep issue tracking for concrete milestone work so I am moving this to dicussions for the time being