added an example showing bidirectional binding between python/react for complex objects #9
Conversation
…or complex objects
There was a problem hiding this comment.
Nice example!
I am wondering:
When I use the first example and type
w.simple_dict["foo"] = 3000
into the next cell, it does not directly update the table, only after pressing the button the next time the value 3000 occurs.
However, when I type
w.simple_dict = {'foo':99, 'bar':99, 'baz':99}
in the next cell, all values are updated immediately without pressing the button again.
Why is that not the case?
| "\n", | ||
| " @observe('count')\n", | ||
| " def _observe_count(self, change):\n", | ||
| " new_val = self.count\n", |
There was a problem hiding this comment.
| " new_val = self.count\n", |
unused variable
| "\n", | ||
| " @observe('count')\n", | ||
| " def _observe_count(self, change):\n", | ||
| " new_val = self.count\n", |
There was a problem hiding this comment.
| " new_val = self.count\n", |
|
and one more observation: bar does not update to 3000 as well when I press the |
|
Note that trailets doesn’t detect mutations of objects, only assignment.
This reflect the Python language. Not something we can change I think.
On Fri, 28 Apr 2023 at 12:01, Jan-Hendrik Müller ***@***.***> wrote:
and one more observation:
when I change the parameter bar in the second example
z = UpdateDictFromReactWidget()
z.simple_dict["bar"] = 3000
bar does not update to 3000 as well when I press the increment bar button.
bar only gets the new value after pressing the times confetti button.
As before,
z.simple_dict = {'foo':2, 'bar':2, 'baz':2} updates everything
immediately.
—
Reply to this email directly, view it on GitHub
<#9 (comment)>, or
unsubscribe
<https://github.com/notifications/unsubscribe-auth/AANPEPL5QM443K3SS2XLYODXDOIONANCNFSM6AAAAAAXLGOXBM>
.
You are receiving this because you are subscribed to this thread.Message
ID: ***@***.***>
--
Maarten Breddels
Co-Founder of Widgetti <https://widgetti.io/>
Your partner for Jupyter- and data-apps
Tel: +31 6 2464 0838 <+31+6+24640838>
[image: Twitter] <https://twitter.com/maartenbreddels>[image: Github]
<https://github.com/maartenbreddels>[image: LinkedIn]
<https://linkedin.com/in/maartenbreddels>
|
Co-authored-by: Jan-Hendrik Müller <44469195+kolibril13@users.noreply.github.com>
Co-authored-by: Jan-Hendrik Müller <44469195+kolibril13@users.noreply.github.com>
| "outputs": [], | ||
| "source": [ | ||
| "class UpdateDictFromPythonWidget(ipyreact.ReactWidget):\n", | ||
| " #note that when we add these traitlets, they will automatically be made available to the react component\n", |
There was a problem hiding this comment.
| " #note that when we add these traitlets, they will automatically be made available to the react component\n", | |
| " #note that when we add these traits with sync=True, they will automatically be made available to the react component\n", |
| " @observe('count')\n", | ||
| " def _observe_count(self, change):\n", | ||
| " new_val = self.count\n", | ||
| " sd = self.simple_dict.copy()\n", |
There was a problem hiding this comment.
Maybe add a note saying that traitlets cannot detect mutations to a dict, and therefore we need to make a copy.
| " export const DictUpdate = ({fullDict, set_fullDict}) => {\n", | ||
| " return (<button onClick={() => {\n", | ||
| " console.log('dict update')\n", | ||
| " const newVal = {...fullDict};\n", |
There was a problem hiding this comment.
Also could use a comment here that we do a (shallow) copy so we don't mutate the original object, otherwise changes detection would go unnoticed.
This comment was marked as off-topic.
This comment was marked as off-topic.
maartenbreddels
force-pushed
the
master
branch
3 times, most recently
from
885d994
to
511a7ba
Compare
bi-directional binding between jupyter and python works... as long as you replace the entire object from both sides. As is react best practice.