Add learn-shiny article on custom components. #29

nstrayer · 2023-11-20T18:45:04Z

This is a fairly straightforward copying of the readme for the repo https://github.com/nstrayer/pyshiny-output-binding-example.

Adds a new article in the "In Depth" section of "Learn Shiny" that covers building a one-off javascript component for an app. Future work will add more info on packaging these custom components into a proper python package.

gshotwell

This is great overall, a couple of writing style things, but overall I think it looks good.

docs/custom-components.qmd

gshotwell · 2023-11-21T15:37:46Z

docs/custom-components.qmd

+);
+```
+
+This class has two methods that we need to implement: `find()` and `renderValue()`. The `find()` method is used to find the element that we want to render the table in. The `renderValue()` method is used to render the table in the element. After making that class we need to register it with Shiny so it can find and send data to instances of our output.


Suggested change

This class has two methods that we need to implement: `find()` and `renderValue()`. The `find()` method is used to find the element that we want to render the table in. The `renderValue()` method is used to render the table in the element. After making that class we need to register it with Shiny so it can find and send data to instances of our output.

This class has two methods that we need to implement: `find()` and `renderValue()`. The `find()` method is used to identify the element that will contain the rendered table. The `renderValue()` method is used to render the table in the element. After making that class we need to register it with Shiny so it can find and send data to instances of our output.

gshotwell · 2023-11-21T15:40:34Z

docs/custom-components.qmd

+
+### The `find()` method
+
+Now that we have the scaffolding setup, we can fill it in. Starting with the `find` method, this function is passed a `scope` object, which is a `JQuery` selection and should return the element you wish to render your output into.


This might have a bit too much passive voice, maybe something like :

"Now that we have the scaffolding setup we can start by filling in the find method. This function takes a scope object, which is a JQuery selection that should rereturn the element which will contain the output". I'm not sure if "contains the output" is the same as "render into".

gshotwell · 2023-11-21T15:41:30Z

docs/custom-components.qmd

+Shiny.outputBindings.register(...);
+```
+
+Note that we're using the class `".shiny-tabulator-output"` here to mark the element that we want to render the table in. This is the same class that we will use in our `output_tabulator()` function in our app's server code. You can use any valid css selector here, but it's common to use a descriptive class name like this.


Suggested change

Note that we're using the class `".shiny-tabulator-output"` here to mark the element that we want to render the table in. This is the same class that we will use in our `output_tabulator()` function in our app's server code. You can use any valid css selector here, but it's common to use a descriptive class name like this.

Note that we're using the class `".shiny-tabulator-output"` here to mark the element that we want to render the table in. This is the same class that we will use in our `output_tabulator()` function in our app's server code. You can use any valid css selector here, but it's common to use a class name which describes the output.

gshotwell · 2023-11-21T15:47:08Z

docs/custom-components.qmd

+    )
+```
+
+We use the `HTMLDependency` function to bind up the assets needed for tabulator that we made in the previous step and making sure that they're included in our app anytime the `output_tabulator()` function is called (but not more than once.)


I think we can include this in the callout

gshotwell · 2023-11-21T15:49:02Z

docs/custom-components.qmd

+
+`_meta` is a dictionary of metadata about the function that is being decorated. We don't use it in our example.
+
+`_fn` is the function that is being decorated. Aka the function that goes below the `@render_tabulator()` in your app's server code. In this case we are expecting that that function returns either a pandas dataframe or `None`.


Suggested change

`_fn` is the function that is being decorated. Aka the function that goes below the `@render_tabulator()` in your app's server code. In this case we are expecting that that function returns either a pandas dataframe or `None`.

`_fn` is the decorated function which appears below the `@render_tabulator()` decorator in your app's server code. In this case we are expecting the function to return either a pandas dataframe or `None`.

gshotwell · 2023-11-21T15:50:28Z

docs/custom-components.qmd

+...
+```
+
+`resolve_value_fn()` is a helper provided in `shiny.render.transformer` for resolving the value of a function that may or may not be async. This allows us to write our code in a way that is agnostic to how the user has written their render function.


Suggested change

`resolve_value_fn()` is a helper provided in `shiny.render.transformer` for resolving the value of a function that may or may not be async. This allows us to write our code in a way that is agnostic to how the user has written their render function.

`resolve_value_fn()` is a helper provided in `shiny.render.transformer` for resolving the value of a function that may or may not be async. This ensures that the function will work whether or not the end user has defined their render function asynchronously.

gshotwell · 2023-11-21T15:51:16Z

docs/custom-components.qmd

+
+`resolve_value_fn()` is a helper provided in `shiny.render.transformer` for resolving the value of a function that may or may not be async. This allows us to write our code in a way that is agnostic to how the user has written their render function.
+
+Next, we check to make sure that the value returned by the function is a dataframe. If it's not, we throw an error. This is not required, but it's good practice to do so.


Suggested change

Next, we check to make sure that the value returned by the function is a dataframe. If it's not, we throw an error. This is not required, but it's good practice to do so.

Next, we check to make sure that the value returned by the function is a dataframe. If it's not, we throw an error. This is not strictly required, but is a best practice.

gshotwell · 2023-11-21T15:52:40Z

docs/custom-components.qmd

+1. A javascript script that renders the element on the client side using the Tabulator library
+2. An `output_tabulator()` function for placing the element in your app's UI
+3. A `render_tabulator()` decorator for passing table data to the javascript code rendering the element on the server side
+


I think it would be nice here to have a mermaid diagram of how all the components work together and what they do.

nstrayer · 2023-12-12T15:52:39Z

I ended up bringing this article over in #46 to simplify things. Still using comments from review there though.

Add learn-shiny article on custom components.

0f2d1b7

nstrayer requested a review from gshotwell November 20, 2023 18:45

github-actions bot deployed to pr-29 November 20, 2023 18:52 View deployment

gshotwell suggested changes Nov 21, 2023

View reviewed changes

nstrayer closed this Dec 12, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Add learn-shiny article on custom components. #29

Add learn-shiny article on custom components. #29

Uh oh!

nstrayer commented Nov 20, 2023

Uh oh!

gshotwell left a comment

Uh oh!

Uh oh!

Uh oh!

gshotwell Nov 21, 2023

Uh oh!

gshotwell Nov 21, 2023

Uh oh!

gshotwell Nov 21, 2023

Uh oh!

gshotwell Nov 21, 2023

Uh oh!

gshotwell Nov 21, 2023

Uh oh!

gshotwell Nov 21, 2023

Uh oh!

gshotwell Nov 21, 2023

Uh oh!

gshotwell Nov 21, 2023

Uh oh!

nstrayer commented Dec 12, 2023

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

	This class has two methods that we need to implement: `find()` and `renderValue()`. The `find()` method is used to find the element that we want to render the table in. The `renderValue()` method is used to render the table in the element. After making that class we need to register it with Shiny so it can find and send data to instances of our output.
	This class has two methods that we need to implement: `find()` and `renderValue()`. The `find()` method is used to identify the element that will contain the rendered table. The `renderValue()` method is used to render the table in the element. After making that class we need to register it with Shiny so it can find and send data to instances of our output.


		### The `find()` method

		Now that we have the scaffolding setup, we can fill it in. Starting with the `find` method, this function is passed a `scope` object, which is a `JQuery` selection and should return the element you wish to render your output into.

	Note that we're using the class `".shiny-tabulator-output"` here to mark the element that we want to render the table in. This is the same class that we will use in our `output_tabulator()` function in our app's server code. You can use any valid css selector here, but it's common to use a descriptive class name like this.
	Note that we're using the class `".shiny-tabulator-output"` here to mark the element that we want to render the table in. This is the same class that we will use in our `output_tabulator()` function in our app's server code. You can use any valid css selector here, but it's common to use a class name which describes the output.


		`_meta` is a dictionary of metadata about the function that is being decorated. We don't use it in our example.

		`_fn` is the function that is being decorated. Aka the function that goes below the `@render_tabulator()` in your app's server code. In this case we are expecting that that function returns either a pandas dataframe or `None`.

	`_fn` is the function that is being decorated. Aka the function that goes below the `@render_tabulator()` in your app's server code. In this case we are expecting that that function returns either a pandas dataframe or `None`.
	`_fn` is the decorated function which appears below the `@render_tabulator()` decorator in your app's server code. In this case we are expecting the function to return either a pandas dataframe or `None`.

	`resolve_value_fn()` is a helper provided in `shiny.render.transformer` for resolving the value of a function that may or may not be async. This allows us to write our code in a way that is agnostic to how the user has written their render function.
	`resolve_value_fn()` is a helper provided in `shiny.render.transformer` for resolving the value of a function that may or may not be async. This ensures that the function will work whether or not the end user has defined their render function asynchronously.


		`resolve_value_fn()` is a helper provided in `shiny.render.transformer` for resolving the value of a function that may or may not be async. This allows us to write our code in a way that is agnostic to how the user has written their render function.

		Next, we check to make sure that the value returned by the function is a dataframe. If it's not, we throw an error. This is not required, but it's good practice to do so.

Add learn-shiny article on custom components. #29

Add learn-shiny article on custom components. #29

Uh oh!

Conversation

nstrayer commented Nov 20, 2023

Uh oh!

gshotwell left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

nstrayer commented Dec 12, 2023

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants