mirror/gradio
2
0
Fork 0
mirror of https://github.com/gradio-app/gradio.git synced 2024-11-27 01:40:20 +08:00
Code Issues Packages Projects Releases Wiki Activity

Add a components - events matrix on the docs (#2921)

Browse Source 
* add components events matrix

* changelog
This commit is contained in:
Ali Abdalla 2023-01-03 17:45:09 +02:00 committed by GitHub
parent 58b1a074ba
commit d77b0702d1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 48 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@ -31,6 +31,7 @@ Progress indicator bar by [@aliabid94](https://github.com/aliabid94) in [PR 2750
## Documentation Changes:
* Added a Guide on using Google Sheets to create a real-time dashboard with Gradio's `DataFrame` and `LinePlot` component, by [@abidlabs](https://github.com/abidlabs) in [PR 2816](https://github.com/gradio-app/gradio/pull/2816)
* Add a components - events matrix on the docs by [@aliabd](https://github.com/aliabd) in [PR 2921](https://github.com/gradio-app/gradio/pull/2921)
## Testing and Infrastructure Changes:
No changes to highlight.

12
website/homepage/src/docs/__init__.py
View File

@ -53,19 +53,20 @@ def add_demos():
add_demos()
ordered_events = ["Change()", "Click()", "Submit()", "Edit()", "Clear()", "Play()", "Pause()", "Stream()", "Blur()", "Upload()"]
def add_supported_events():
for component in docs["component"]:
component["events"] = []
component["events-list"] = []
event_listener_props = dir(EventListener)
for listener in EventListener.__subclasses__():
if not issubclass(component["class"], listener):
continue
for prop in dir(listener):
if prop not in event_listener_props:
component["events"].append(prop + "()")
if component["events"]:
component["events"] = ", ".join(component["events"])
component["events-list"].append(prop + "()")
if component["events-list"]:
component["events"] = ", ".join(component["events-list"])
add_supported_events()
@ -142,6 +143,7 @@ def build(output_dir, jinja_env, gradio_wheel_url, gradio_version):
template = jinja_env.get_template("docs/template.html")
output = template.render(
docs=docs,
ordered_events=ordered_events,
find_cls=find_cls,
version="main",
gradio_version=gradio_version,
@ -165,7 +167,7 @@ def build_pip_template(version, jinja_env):
docs_files = os.listdir("src/docs")
template = jinja_env.get_template("docs/template.html")
output = template.render(
docs=docs, find_cls=find_cls, version="pip", gradio_version=version
docs=docs, find_cls=find_cls, version="pip", gradio_version=version, ordered_events=ordered_events
)
with open(f"src/docs/v{version}_template.html", "w+") as template_file:
template_file.write(output)

40
website/homepage/src/docs/template.html
View File

@ -256,6 +256,46 @@
our postprocessing will require from it.
</p>
<img src="/assets/img/dataflow.svg" class="mt-4">
<p class="mt-2 text-lg">
Components also come with certain events that they support. These are methods that are triggered with user actions.
Below is a table showing which events are supported for each component. All events are also listed (with parameters) in the component's docs.
</p>
<div class="max-h-96 overflow-y-scroll my-6">
<table class="table-fixed w-full leading-loose">
<thead class="text-center sticky top-0 ">
<tr>
<th class="p-3 bg-white w-1/5"></th>
<th class="p-3 font-normal bg-white border-t border-l">Change</th>
<th class="p-3 font-normal bg-white border-t">Click</th>
<th class="p-3 font-normal bg-white border-t">Submit</th>
<th class="p-3 font-normal bg-white border-t">Edit</th>
<th class="p-3 font-normal bg-white border-t">Clear</th>
<th class="p-3 font-normal bg-white border-t">Play</th>
<th class="p-3 font-normal bg-white border-t">Pause</th>
<th class="p-3 font-normal bg-white border-t">Stream</th>
<th class="p-3 font-normal bg-white border-t">Blur</th>
<th class="p-3 font-normal bg-white border-t border-r">Upload</th>
</tr>
</thead>
<tbody class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y">
{% for component in docs["component"] %}
<tr class="group hover:bg-gray-200/60">
<td class="p-3 w-1/5 bg-white">
{{ component["name"] }}
</td>
{% for event in ordered_events %}
<td class="p-3 text-gray-700 break-words text-center">
{% if event.lower() in component["events-list"] %}
<p class="text-orange-500">&#10003;</p>
{% else %}
<p class="text-gray-300 ">&#10005;</p>
{% endif %}
</td>
{% endfor %}
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% for component in docs["component"] %}
{% with obj=component, is_class=True, is_component=True, parent="gradio" %}