[🐛 BUG] Reading a data node changes the display of a table

[AlexandreSajus]

What went wrong? 🤔

When running https://github.com/Avaiga/demo-sap with 4.0.1.dev1, creating a new scenario will change the display of the input data node table from this:

To this:

The only way to fix this is by refreshing the page.

Can someone help me investigate? I tried isolating the issue, but I did not figure out a way.

Steps to Reproduce Issue

1. A code fragment
2. And/or configuration files or code
3. And/or Taipy GUI Markdown or HTML files

Browsers

Chrome

OS

Windows

Version of Taipy

4.0.1.dev1

Acceptance Criteria

• A unit test reproducing the bug is added.
• Any new code is covered by a unit tested.
• Check code coverage is at least 90%.
• The bug reporter validated the fix.
• Related issue(s) in taipy-doc are created for documentation and Release Notes are updated.

Code of Conduct

• I have checked the existing issues.
• I am willing to work on this issue (optional)

[AlexandreSajus]

Probably linked to #2082

[jrobinAV]

It should be tested on 4.0.1. and develop.

@AlexandreSajus did you test it?

[AlexandreSajus]

I'll test it

[AlexandreSajus]

Yes, this still happens both in 4.0.1 and develop

[jrobinAV]

@AlexandreSajus Thank you.

[FredLL-Avaiga]

@AlexandreSajus Can you create a small reproduction example ?

[FredLL-Avaiga]

Reading your code @AlexandreSajus , it looks like the table is not a datanode_viewer data rab but a simple Gui table.

[FredLL-Avaiga]

I tried to reproduce your issue with a simplified version of your code, but I don't see the behavior you're reporting

import typing as t

import pandas as pd

import taipy as tp
import taipy.gui.builder as tgb
from taipy.gui import Gui, State

item_codes = ["A00001", "A00003", "B10000", "P10003"]

item_descriptions = {
    "A00001": "J.B. Officeprint 1420",
    "A00002": "J.B. Officeprint 1111",
    "A00003": "J.B. Officeprint 1186",
    "B10000": "Printer Label",
    "P10003": "PC Set 1",
}

# Standard scenario inputs
inputs = pd.DataFrame(
    {
        "Item Code": item_codes,
        "Item Description": [item_descriptions[item] for item in item_codes],
        "Expectation Factor": [1, 1.2, 1, 1.5],
        "Production Time (days)": [5, 2, 3, 4],
        "Arrival Time (days)": [1, 2, 1, 1],
        "Minimal Stock": [100, 200, 150, 200],
    }
)

default_inputs = pd.DataFrame(
    {
        "Item Code": item_codes,
        "Item Description": [item_descriptions[item] for item in item_codes],
        "Expectation Factor": [1, 1, 1, 1],
        "Production Time (days)": [1, 1, 1, 1],
        "Arrival Time (days)": [1, 1, 1, 1],
        "Minimal Stock": [0, 0, 0, 0],
    }
)

inputs_cfg = tp.Config.configure_data_node("inputs")
recommendation_df_cfg = tp.Config.configure_data_node("recommendation_df")

def recommendation(inputs: pd.DataFrame) -> t.List[t.Union[dict, dict, pd.DataFrame]]:
    return [inputs]

recommendation_task_cfg = tp.Config.configure_task(
    "recommendation",
    function=recommendation,
    input=[inputs_cfg],
    output=[
        recommendation_df_cfg,
    ],
)

scenario_cfg = tp.Config.configure_scenario(
    id="scenario", task_configs=[recommendation_task_cfg]
)

def update_outputs(state: State) -> None:
    state.recommendation_df = state.scenario.recommendation_df.read()

def scenario_submitted(state: State, submittable: str, details: dict) -> None:
    """
    Apply changes to the app when a scenario is submitted.

    Args:
        state: State of the Taipy app.
    """
    if details["submission_status"] == "COMPLETED":
        update_outputs(state)


def change_scenario(state: State) -> None:
    """
    Update the app when the user selects a scenario.

    Args:
        state: State of the Taipy app.
    """
    if state.scenario.inputs.read() is None:
        state.scenario.inputs.write(default_inputs)
    state.inputs = state.scenario.inputs.read()
    update_outputs(state)

with tgb.Page() as page:
    tgb.text("# *Inventory Management* - Forecast **Scenarios**", mode="md")
    tgb.html("hr")

    with tgb.layout("20 80", columns__mobile="1"):
        with tgb.part("sidebar"):
            tgb.text("**Create** and select scenarios", mode="md")
            tgb.scenario_selector("{scenario}", on_change=change_scenario)

        with tgb.part("main"):
            tgb.text(
                """Change **parameters** to create different scenarios:
- **Expectation Factor**: how much more demand is expected compared to last month,
- **Production Time**: how many days it takes to produce the order,
- **Arrival Time**: how many days it takes to receive the order,
- **Minimal Stock**: the minimum stock level to maintain.""",
                mode="md",
            )
            tgb.html("br")
            tgb.table(
                data="{inputs}",
                editable=True,
                show_all=True,
                on_add=False,
                on_delete=False,
            )
            tgb.scenario(
                "{scenario}",
                show_sequences=False,
                expanded=False,
                on_submission_change=scenario_submitted,
            )

if __name__ == "__main__":
    tp.Orchestrator().run()

    scenario = tp.create_scenario(scenario_cfg)
    t.cast(tp.DataNode, scenario.inputs).write(inputs)
    input_dn = scenario.inputs
    tp.submit(scenario)

    Gui(page=page).run(title="2217 Datanode table change layout on scenario submit")

[FredLL-Avaiga]

I don't see, in your code, something that I would have removed and that could cause a table refresh...
Any hint @AlexandreSajus ?

[AlexandreSajus]

Reading your code @AlexandreSajus , it looks like the table is not a datanode_viewer data rab but a simple Gui table.

Yes this is intended

[AlexandreSajus]

I don't see, in your code, something that I would have removed and that could cause a table refresh... Any hint @AlexandreSajus ?

I don't know either. I spent a few hours trying to create a small reproducible code example, but it seemed to depend on multiple parts of the code, and I could not reproduce the issue in a smaller example. What is the protocol here? Should we close this one and reopen this if we get a similar issue later?

[FabienLelaquais]

@AlexandreSajus Can you please confirm this still happen (on the develop branch)?
Thx!

[AlexandreSajus]

@AlexandreSajus Can you please confirm this still happen (on the develop branch)? Thx!

Yes, I just tested it, it still happens on develop

[FredLL-Avaiga]

the table refresh is normal.
select a scenario => state.inputs = state.scenario.inputs.read() => table data is inputs

Now why is the table display impacted ? That is the question ... (as somebody said a few centuries ago)

[FredLL-Avaiga]

fun fact: if the browser is refreshed after the table has been impacted, then the table columns take the whole width and adding new scenario have no impact ...

[FredLL-Avaiga]

I found a simple replication code: 2 tables with the second one downloadable !!!

import taipy.gui.builder as tgb
from taipy.gui import Gui, State

inputs = {
        "Item Code": ["A00001", "A00002", "A00003", "B10000"],
        "Item Description": ["J.B. Officeprint 1420","J.B. Officeprint 1111","J.B. Officeprint 1186","Printer Label"],
        "Expectation Factor": [1, 1.2, 1, 1.5],
        "Production Time (days)": [5, 2, 3, 4],
        "Arrival Time (days)": [1, 2, 1, 1],
        "Minimal Stock": [100, 200, 150, 200],
    }

recommendations = {
        "Order Quantity": [100, 120],
        "Order Date": ["2021-01-01", "2021-01-01"],
        "Delivery Date": ["2021-01-06", "2021-01-03"],
        }

def on_action(state: State) -> None:
    state.refresh("inputs")


with tgb.Page() as page:
    tgb.button("Refresh data")

    tgb.table("{inputs}")
    tgb.table("{recommendations}", downloadable=True)


if __name__ == "__main__":
    Gui(page=page).run(title="2217 table refresh")

[FredLL-Avaiga]

simply clicking on the download button of the second table make the first table layout change ... 🥸
and the table do not render on download click !