Update README.md

README.md

@@ -1,276 +1,276 @@
----
-tags: [gradio-custom-component, Plot, med, medicine, bio, biology, chem, chemistry, MSA, multiple sequence alignment, seqlogo, annotation, consensus histogram, visualize]
-title: gradio_msaplot
-short_description: MSAplot is customizable panels for plotting MSA.
-colorFrom: blue
-colorTo: yellow
-sdk: gradio
-pinned: false
-app_file: demo/space.py
----
-
-# `gradio_msaplot`
-<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.0.1%20-%20orange"> <a href="https://github.com/Josephrp/GradioMSAPlot.git/issues" target="_blank"><img alt="Static Badge" src="https://img.shields.io/badge/Issues-white?logo=github&logoColor=black"></a> <a href="https://huggingface.co/spaces/seq-to-pheno/MSAPlot/discussions" target="_blank"><img alt="Static Badge" src="https://img.shields.io/badge/%F0%9F%A4%97%20Discuss-%23097EFF?style=flat&logoColor=black"></a>
-
-MSAplot is customizable panels for plotting MSA, seqlogo, annotation, and consensus histograms.
-
-## Installation
-
-```bash
-pip install gradio_msaplot
-```
-
-## Usage
-
-```python
-
-import gradio as gr
-from gradio_msaplot import MSAPlot, MSAPlotData
-import matplotlib
-matplotlib.use('Agg')
-
-example = MSAPlot().example_value()
-
-with gr.Blocks() as demo:
-    with gr.Row():
-        MSAPlot(label="Blank"),  # blank component
-        MSAPlot(value=example, label="Populated"),  # populated component
-
-
-if __name__ == "__main__":
-    demo.launch()
-
-```
-
-## `MSAPlot`
-
-### Initialization
-
-<table>
-<thead>
-<tr>
-<th align="left">name</th>
-<th align="left" style="width: 25%;">type</th>
-<th align="left">default</th>
-<th align="left">description</th>
-</tr>
-</thead>
-<tbody>
-<tr>
-<td align="left"><code>value</code></td>
-<td align="left" style="width: 25%;">
-
-```python
-typing.Any | None
-```
-
-</td>
-<td align="left"><code>None</code></td>
-<td align="left">None</td>
-</tr>
-
-<tr>
-<td align="left"><code>label</code></td>
-<td align="left" style="width: 25%;">
-
-```python
-str | None
-```
-
-</td>
-<td align="left"><code>None</code></td>
-<td align="left">None</td>
-</tr>
-
-<tr>
-<td align="left"><code>every</code></td>
-<td align="left" style="width: 25%;">
-
-```python
-float | None
-```
-
-</td>
-<td align="left"><code>None</code></td>
-<td align="left">None</td>
-</tr>
-
-<tr>
-<td align="left"><code>show_label</code></td>
-<td align="left" style="width: 25%;">
-
-```python
-bool | None
-```
-
-</td>
-<td align="left"><code>None</code></td>
-<td align="left">None</td>
-</tr>
-
-<tr>
-<td align="left"><code>container</code></td>
-<td align="left" style="width: 25%;">
-
-```python
-bool
-```
-
-</td>
-<td align="left"><code>True</code></td>
-<td align="left">None</td>
-</tr>
-
-<tr>
-<td align="left"><code>scale</code></td>
-<td align="left" style="width: 25%;">
-
-```python
-int | None
-```
-
-</td>
-<td align="left"><code>None</code></td>
-<td align="left">None</td>
-</tr>
-
-<tr>
-<td align="left"><code>min_width</code></td>
-<td align="left" style="width: 25%;">
-
-```python
-int
-```
-
-</td>
-<td align="left"><code>160</code></td>
-<td align="left">None</td>
-</tr>
-
-<tr>
-<td align="left"><code>visible</code></td>
-<td align="left" style="width: 25%;">
-
-```python
-bool
-```
-
-</td>
-<td align="left"><code>True</code></td>
-<td align="left">None</td>
-</tr>
-
-<tr>
-<td align="left"><code>elem_id</code></td>
-<td align="left" style="width: 25%;">
-
-```python
-str | None
-```
-
-</td>
-<td align="left"><code>None</code></td>
-<td align="left">None</td>
-</tr>
-
-<tr>
-<td align="left"><code>elem_classes</code></td>
-<td align="left" style="width: 25%;">
-
-```python
-list[str] | str | None
-```
-
-</td>
-<td align="left"><code>None</code></td>
-<td align="left">None</td>
-</tr>
-
-<tr>
-<td align="left"><code>render</code></td>
-<td align="left" style="width: 25%;">
-
-```python
-bool
-```
-
-</td>
-<td align="left"><code>True</code></td>
-<td align="left">None</td>
-</tr>
-
-<tr>
-<td align="left"><code>key</code></td>
-<td align="left" style="width: 25%;">
-
-```python
-int | str | None
-```
-
-</td>
-<td align="left"><code>None</code></td>
-<td align="left">None</td>
-</tr>
-</tbody></table>
-
-
-### Events
-
-| name | description |
-|:-----|:------------|
-| `change` | Triggered when the value of the MSAPlot changes either because of user input (e.g. a user types in a textbox) OR because of a function update (e.g. an image receives a value from the output of an event trigger). See `.input()` for a listener that is only triggered by user input. |
-| `clear` | Triggered when the plot is cleared. |
-
-
-
-### User function
-
-The impact on the users predict function varies depending on whether the component is used as an input or output for an event (or both).
-
-- When used as an Input, the component only impacts the input signature of the user function.
-- When used as an output, the component only impacts the return signature of the user function.
-
-The code snippet below is accurate in cases where the component is used as both an input and an output.
-
-- **As output:** Is passed, the preprocessed input data sent to the user's function in the backend.
-- **As input:** Should return, the output data received by the component from the user's function in the backend.
-
- ```python
- def predict(
-     value: MSAPlotData | None
- ) -> MSAPlotData:
-     return value
- ```
- 
-
-## `MSAPlotData`
-
-### Initialization
-
-<table>
-<thead>
-<tr>
-<th align="left">name</th>
-<th align="left" style="width: 25%;">type</th>
-<th align="left">default</th>
-<th align="left">description</th>
-</tr>
-</thead>
-<tbody>
-<tr>
-<td align="left"><code>data</code></td>
-<td align="left" style="width: 25%;">
-
-```python
-typing.Any
-```
-
-</td>
-<td align="left"><code>None</code></td>
-<td align="left">None</td>
-</tr>
-</tbody></table>
-
-
-
-
+---
+tags: [gradio-custom-component, Plot, med, medicine, bio, biology, chem, chemistry, MSA, multiple sequence alignment, seqlogo, annotation, consensus histogram, visualize]
+title: gradio_msaplot
+short_description: MSAplot is customizable panels for plotting MSA.
+colorFrom: blue
+colorTo: yellow
+sdk: gradio
+pinned: false
+app_file: space.py
+---
+
+# `gradio_msaplot`
+<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.0.1%20-%20orange"> <a href="https://github.com/Josephrp/GradioMSAPlot.git/issues" target="_blank"><img alt="Static Badge" src="https://img.shields.io/badge/Issues-white?logo=github&logoColor=black"></a> <a href="https://huggingface.co/spaces/seq-to-pheno/MSAPlot/discussions" target="_blank"><img alt="Static Badge" src="https://img.shields.io/badge/%F0%9F%A4%97%20Discuss-%23097EFF?style=flat&logoColor=black"></a>
+
+MSAplot is customizable panels for plotting MSA, seqlogo, annotation, and consensus histograms.
+
+## Installation
+
+```bash
+pip install gradio_msaplot
+```
+
+## Usage
+
+```python
+
+import gradio as gr
+from gradio_msaplot import MSAPlot, MSAPlotData
+import matplotlib
+matplotlib.use('Agg')
+
+example = MSAPlot().example_value()
+
+with gr.Blocks() as demo:
+    with gr.Row():
+        MSAPlot(label="Blank"),  # blank component
+        MSAPlot(value=example, label="Populated"),  # populated component
+
+
+if __name__ == "__main__":
+    demo.launch()
+
+```
+
+## `MSAPlot`
+
+### Initialization
+
+<table>
+<thead>
+<tr>
+<th align="left">name</th>
+<th align="left" style="width: 25%;">type</th>
+<th align="left">default</th>
+<th align="left">description</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td align="left"><code>value</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+typing.Any | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>label</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+str | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>every</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+float | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>show_label</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>container</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>scale</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+int | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>min_width</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+int
+```
+
+</td>
+<td align="left"><code>160</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>visible</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>elem_id</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+str | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>elem_classes</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+list[str] | str | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>render</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>key</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+int | str | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">None</td>
+</tr>
+</tbody></table>
+
+
+### Events
+
+| name | description |
+|:-----|:------------|
+| `change` | Triggered when the value of the MSAPlot changes either because of user input (e.g. a user types in a textbox) OR because of a function update (e.g. an image receives a value from the output of an event trigger). See `.input()` for a listener that is only triggered by user input. |
+| `clear` | Triggered when the plot is cleared. |
+
+
+
+### User function
+
+The impact on the users predict function varies depending on whether the component is used as an input or output for an event (or both).
+
+- When used as an Input, the component only impacts the input signature of the user function.
+- When used as an output, the component only impacts the return signature of the user function.
+
+The code snippet below is accurate in cases where the component is used as both an input and an output.
+
+- **As output:** Is passed, the preprocessed input data sent to the user's function in the backend.
+- **As input:** Should return, the output data received by the component from the user's function in the backend.
+
+ ```python
+ def predict(
+     value: MSAPlotData | None
+ ) -> MSAPlotData:
+     return value
+ ```
+ 
+
+## `MSAPlotData`
+
+### Initialization
+
+<table>
+<thead>
+<tr>
+<th align="left">name</th>
+<th align="left" style="width: 25%;">type</th>
+<th align="left">default</th>
+<th align="left">description</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td align="left"><code>data</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+typing.Any
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">None</td>
+</tr>
+</tbody></table>
+
+
+
+