Create a small tree structure

[maajdl]

Hello

I try to develop my first Streamlit app.
I would like the users to specify their need by creating some small tree-like structure.

The first example, “streams”, users typically would add a few items (<5) to the stream list by chosing:

• a type of stream (water, vapor, humid air, heat, …)
• a name (“fresh air”, “exhaust air”, …)

For each of these items, they would specify a few data (<5) according to their wish like:

• temperature
• quantity
• relative humidity
• …

The first solution that comes to me is to represent this in a small json structure.
It could be written by the user in a text_input widget and used to create the model.

Would you have some suggestions about how to develop this user interface?
Any json tree editor?
Using some widgets in a clever way?

Thanks?

Michel

[Caroline]

Hi @Michel,

Thank you for sharing with the Streamlit community!

I would recommend reading about st.text_area and st.text_input (to allow users to input text). You can also use st.json to display a JSON string.

If you’ve already explored these options, could you please provide more information about why they did not work for your use-case?

Best,

Caroline

[maajdl]

Thanks Caroline!

In the meanwhile, I realised that a grid (Ag-Grid probably) would be more convenient.
The data would be represented by a partially filled table.
And actually, the app would fill in the blanks!
Just like a SUDOKU solver, but for the thermodynamics of moist air !
In both case, the Pyomo package can solve the problem.

Ideally, the same grid should be used to provide the data and display the results.
The tricky point that remains then is the need for the user to mark which cells are data.
Changes to the data cells should then trigger changes in the other cells.

Any suggestion welcome!

Michel

[Caroline]

Hi @maajdl,

I’m not sure I quite understand what you mean by “the need for the user to mark which cells are data.” However, it sounds like you might be able to make use of a checkbox, a radio button, or a select box. I would recommend reading through our API reference for more options and syntax examples.

In terms of triggering changes in other cells based on changes to user input, you should be able to implement this using if statements that check whether the user inputs have been updated and accordingly update the other cells. Again, it’s a little tricky for me to make more specific recommendations without seeing what you’ve written so far in terms of code.

Happy to answer any follow-up questions.

Caroline

[maajdl]

Thanks anyway Caroline!
An example, in a Jupyter notebook would look like this:

ha = humid_air("ha", A=1, t=25, rh=0.10)
hb = heat("hb", H=5) 
hc = humid_air("hc")
hd = humid_air("hd", A=1, t=40, rh=0.20)
he = humid_air("he")
mixer1 = mixer(label="mixer1", ha=ha, hb=hb, hc=hc)
mixer2 = mixer("mixer2", hc, hd, he)    

model = flowsheet("flowsheet", mixer1, mixer2)
model.solve()
chart = chart101325.chart()
chart = chart.plotPoints([ha,hb,hc,hd,he])
chart = chart.plotDevices([mixer1,mixer2])

The results would be displayed as shown below this post.
Implementing in Streamlit means the user has to provide the data as a few cells in the table below instead of lines of code as above. You can check that the data provided in the code above can be found in the table below.
The number of streams (ha, hb, …) can be higher than 5, as well as the number of devices (mixer1, …).
There are 4 possible types of streams and at least 5 type of devices in this first version.
I will come back to this question a bit later …

Thanks,
Michel