From 63210c6970728dad390fbf63ecde9e72b37a1f62 Mon Sep 17 00:00:00 2001 From: Paddy Mullen Date: Tue, 25 Apr 2023 11:50:01 -0400 Subject: [PATCH 1/3] added an example showing bidirectional binding between python/react for complex objects --- examples/DictUpdateExamples.ipynb | 130 ++++++++++++++++++++++++++++++ 1 file changed, 130 insertions(+) create mode 100644 examples/DictUpdateExamples.ipynb diff --git a/examples/DictUpdateExamples.ipynb b/examples/DictUpdateExamples.ipynb new file mode 100644 index 0000000..d736956 --- /dev/null +++ b/examples/DictUpdateExamples.ipynb @@ -0,0 +1,130 @@ +{ + "cells": [ + { + "cell_type": "code", + "execution_count": null, + "id": "aba8b4d5-199f-4fe0-97a2-5a2a3f43cbf2", + "metadata": {}, + "outputs": [], + "source": [ + "import ipyreact\n", + "from traitlets import Bool, Int, Dict, observe" + ] + }, + { + "cell_type": "code", + "execution_count": null, + "id": "b11af66b-f256-4441-8c38-0283866024bd", + "metadata": {}, + "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", + " simple_dict = Dict({'foo':5, 'bar':8, 'baz':10}).tag(sync=True)\n", + " count = Int(0).tag(sync=True)\n", + "\n", + " @observe('count')\n", + " def _observe_count(self, change):\n", + " new_val = self.count\n", + " sd = self.simple_dict.copy()\n", + " sd['foo'] += 1\n", + " self.simple_dict = sd\n", + "\n", + " _esm = \"\"\"\n", + " import confetti from \"canvas-confetti\";\n", + " import * as React from \"react\";\n", + " \n", + " export const DictView = ({fullDict}) => {\n", + " return (\n", + " \n", + " \n", + "
foobarbaz
{fullDict['foo']}{fullDict['bar']}{fullDict['baz']}
);\n", + " }\n", + "\n", + " export default function({on_count, debug, count, simple_dict}) {\n", + " return
\n", + " \n", + "
\n", + " };\"\"\"\n", + "w = UpdateDictFromPythonWidget()\n", + "w" + ] + }, + { + "cell_type": "code", + "execution_count": null, + "id": "88858dd6-b2dd-4ee9-a22f-3b4a6e698212", + "metadata": {}, + "outputs": [], + "source": [ + "class UpdateDictFromReactWidget(ipyreact.ReactWidget):\n", + " #note that when we add these traitlets, they will automatically be made available to the react component\n", + " simple_dict = Dict({'foo':5, 'bar':8, 'baz':10}).tag(sync=True)\n", + " count = Int(0).tag(sync=True)\n", + "\n", + " @observe('count')\n", + " def _observe_count(self, change):\n", + " new_val = self.count\n", + " sd = self.simple_dict.copy()\n", + " sd['foo'] += 1\n", + " self.simple_dict = sd\n", + "\n", + " @observe('simple_dict')\n", + " def _observe_simple_dict(self, change):\n", + " print(self.simple_dict)\n", + " _esm = \"\"\"\n", + " import confetti from \"canvas-confetti\";\n", + " import * as React from \"react\";\n", + " \n", + " export const DictView = ({fullDict}) => {\n", + " return (\n", + " \n", + " \n", + "
foobarbaz
{fullDict['foo']}{fullDict['bar']}{fullDict['baz']}
);\n", + " }\n", + "\n", + " export const DictUpdate = ({fullDict, set_fullDict}) => {\n", + " return ();\n", + " }\n", + "\n", + " export default function({on_count, debug, count, simple_dict, on_simple_dict}) {\n", + " return
\n", + " \n", + " \n", + "
\n", + " };\"\"\"\n", + "w = UpdateDictFromReactWidget()\n", + "w" + ] + } + ], + "metadata": { + "kernelspec": { + "display_name": "Python 3 (ipykernel)", + "language": "python", + "name": "python3" + }, + "language_info": { + "codemirror_mode": { + "name": "ipython", + "version": 3 + }, + "file_extension": ".py", + "mimetype": "text/x-python", + "name": "python", + "nbconvert_exporter": "python", + "pygments_lexer": "ipython3", + "version": "3.11.3" + } + }, + "nbformat": 4, + "nbformat_minor": 5 +} From cdfa21d2892da5e5b05703aa6ae65e166db679fc Mon Sep 17 00:00:00 2001 From: Paddy Mullen Date: Mon, 1 May 2023 08:53:33 -0400 Subject: [PATCH 2/3] Update examples/DictUpdateExamples.ipynb MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Jan-Hendrik Müller <44469195+kolibril13@users.noreply.github.com> --- examples/DictUpdateExamples.ipynb | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/DictUpdateExamples.ipynb b/examples/DictUpdateExamples.ipynb index d736956..b0ed584 100644 --- a/examples/DictUpdateExamples.ipynb +++ b/examples/DictUpdateExamples.ipynb @@ -8,7 +8,7 @@ "outputs": [], "source": [ "import ipyreact\n", - "from traitlets import Bool, Int, Dict, observe" + "from traitlets import Int, Dict, observe" ] }, { From b7ac4c06bfd51d0fff7afc2157725671b36e1aa8 Mon Sep 17 00:00:00 2001 From: Paddy Mullen Date: Mon, 1 May 2023 08:53:48 -0400 Subject: [PATCH 3/3] Update examples/DictUpdateExamples.ipynb MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Jan-Hendrik Müller <44469195+kolibril13@users.noreply.github.com> --- examples/DictUpdateExamples.ipynb | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/examples/DictUpdateExamples.ipynb b/examples/DictUpdateExamples.ipynb index b0ed584..18e66b7 100644 --- a/examples/DictUpdateExamples.ipynb +++ b/examples/DictUpdateExamples.ipynb @@ -101,8 +101,8 @@ " \n", " \n", " };\"\"\"\n", - "w = UpdateDictFromReactWidget()\n", - "w" + "z = UpdateDictFromReactWidget()\n", + "z" ] } ],