Upload folder using huggingface_hub

.gitignore

@@ -0,0 +1,12 @@
+.eggs/
+dist/
+*.pyc
+__pycache__/
+*.py[cod]
+*$py.class
+__tmp/*
+*.pyi
+.mypycache
+.ruff_cache
+node_modules
+backend/**/templates/

README.md

@@ -1,12 +1,276 @@
----
-title: Gradio Msaplot
-emoji: 🦀
-colorFrom: gray
-colorTo: pink
-sdk: gradio
-sdk_version: 5.1.0
-app_file: app.py
-pinned: false
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+---
+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>
+
+
+
+

app.py

@@ -0,0 +1,16 @@
+
+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()

css.css

@@ -0,0 +1,157 @@
+html {
+	font-family: Inter;
+	font-size: 16px;
+	font-weight: 400;
+	line-height: 1.5;
+	-webkit-text-size-adjust: 100%;
+	background: #fff;
+	color: #323232;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	text-rendering: optimizeLegibility;
+}
+
+:root {
+	--space: 1;
+	--vspace: calc(var(--space) * 1rem);
+	--vspace-0: calc(3 * var(--space) * 1rem);
+	--vspace-1: calc(2 * var(--space) * 1rem);
+	--vspace-2: calc(1.5 * var(--space) * 1rem);
+	--vspace-3: calc(0.5 * var(--space) * 1rem);
+}
+
+.app {
+	max-width: 748px !important;
+}
+
+.prose p {
+	margin: var(--vspace) 0;
+	line-height: var(--vspace * 2);
+	font-size: 1rem;
+}
+
+code {
+	font-family: "Inconsolata", sans-serif;
+	font-size: 16px;
+}
+
+h1,
+h1 code {
+	font-weight: 400;
+	line-height: calc(2.5 / var(--space) * var(--vspace));
+}
+
+h1 code {
+	background: none;
+	border: none;
+	letter-spacing: 0.05em;
+	padding-bottom: 5px;
+	position: relative;
+	padding: 0;
+}
+
+h2 {
+	margin: var(--vspace-1) 0 var(--vspace-2) 0;
+	line-height: 1em;
+}
+
+h3,
+h3 code {
+	margin: var(--vspace-1) 0 var(--vspace-2) 0;
+	line-height: 1em;
+}
+
+h4,
+h5,
+h6 {
+	margin: var(--vspace-3) 0 var(--vspace-3) 0;
+	line-height: var(--vspace);
+}
+
+.bigtitle,
+h1,
+h1 code {
+	font-size: calc(8px * 4.5);
+	word-break: break-word;
+}
+
+.title,
+h2,
+h2 code {
+	font-size: calc(8px * 3.375);
+	font-weight: lighter;
+	word-break: break-word;
+	border: none;
+	background: none;
+}
+
+.subheading1,
+h3,
+h3 code {
+	font-size: calc(8px * 1.8);
+	font-weight: 600;
+	border: none;
+	background: none;
+	letter-spacing: 0.1em;
+	text-transform: uppercase;
+}
+
+h2 code {
+	padding: 0;
+	position: relative;
+	letter-spacing: 0.05em;
+}
+
+blockquote {
+	font-size: calc(8px * 1.1667);
+	font-style: italic;
+	line-height: calc(1.1667 * var(--vspace));
+	margin: var(--vspace-2) var(--vspace-2);
+}
+
+.subheading2,
+h4 {
+	font-size: calc(8px * 1.4292);
+	text-transform: uppercase;
+	font-weight: 600;
+}
+
+.subheading3,
+h5 {
+	font-size: calc(8px * 1.2917);
+	line-height: calc(1.2917 * var(--vspace));
+
+	font-weight: lighter;
+	text-transform: uppercase;
+	letter-spacing: 0.15em;
+}
+
+h6 {
+	font-size: calc(8px * 1.1667);
+	font-size: 1.1667em;
+	font-weight: normal;
+	font-style: italic;
+	font-family: "le-monde-livre-classic-byol", serif !important;
+	letter-spacing: 0px !important;
+}
+
+#start .md > *:first-child {
+	margin-top: 0;
+}
+
+h2 + h3 {
+	margin-top: 0;
+}
+
+.md hr {
+	border: none;
+	border-top: 1px solid var(--block-border-color);
+	margin: var(--vspace-2) 0 var(--vspace-2) 0;
+}
+.prose ul {
+	margin: var(--vspace-2) 0 var(--vspace-1) 0;
+}
+
+.gap {
+	gap: 0;
+}

requirements.txt

@@ -0,0 +1 @@
+gradio_msaplot

space.py

@@ -0,0 +1,149 @@
+
+import gradio as gr
+from app import demo as app
+import os
+
+_docs = {'MSAPlot': {'description': 'Creates a Multiple Sequence Alignment (MSA) plot component.', 'members': {'__init__': {'value': {'type': 'typing.Any | None', 'default': 'None', 'description': None}, 'label': {'type': 'str | None', 'default': 'None', 'description': None}, 'every': {'type': 'float | None', 'default': 'None', 'description': None}, 'show_label': {'type': 'bool | None', 'default': 'None', 'description': None}, 'container': {'type': 'bool', 'default': 'True', 'description': None}, 'scale': {'type': 'int | None', 'default': 'None', 'description': None}, 'min_width': {'type': 'int', 'default': '160', 'description': None}, 'visible': {'type': 'bool', 'default': 'True', 'description': None}, 'elem_id': {'type': 'str | None', 'default': 'None', 'description': None}, 'elem_classes': {'type': 'list[str] | str | None', 'default': 'None', 'description': None}, 'render': {'type': 'bool', 'default': 'True', 'description': None}, 'key': {'type': 'int | str | None', 'default': 'None', 'description': None}}, 'postprocess': {'value': {'type': 'MSAPlotData', 'description': "The output data received by the component from the user's function in the backend."}}, 'preprocess': {'return': {'type': 'MSAPlotData | None', 'description': "The preprocessed input data sent to the user's function in the backend."}, 'value': None}}, 'events': {'change': {'type': None, 'default': None, 'description': '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': {'type': None, 'default': None, 'description': 'Triggered when the plot is cleared.'}}}, '__meta__': {'additional_interfaces': {}}, 'MSAPlotData': {'description': 'Helper class that provides a standard way to create an ABC using\ninheritance.', 'members': {'__init__': {'data': {'type': 'typing.Any', 'default': 'None', 'description': None}}}, 'events': {}}}
+
+abs_path = os.path.join(os.path.dirname(__file__), "css.css")
+
+with gr.Blocks(
+    css=abs_path,
+    theme=gr.themes.Default(
+        font_mono=[
+            gr.themes.GoogleFont("Inconsolata"),
+            "monospace",
+        ],
+    ),
+) as demo:
+    gr.Markdown(
+"""
+# `gradio_msaplot`
+
+<div style="display: flex; gap: 7px;">
+<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>
+</div>
+
+MSAplot is customizable panels for plotting MSA, seqlogo, annotation, and consensus histograms.
+""", elem_classes=["md-custom"], header_links=True)
+    app.render()
+    gr.Markdown(
+"""
+## 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()
+
+```
+""", elem_classes=["md-custom"], header_links=True)
+
+
+    gr.Markdown("""
+## `MSAPlot`
+
+### Initialization
+""", elem_classes=["md-custom"], header_links=True)
+
+    gr.ParamViewer(value=_docs["MSAPlot"]["members"]["__init__"], linkify=[])
+
+
+    gr.Markdown("### Events")
+    gr.ParamViewer(value=_docs["MSAPlot"]["events"], linkify=['Event'])
+
+
+
+
+    gr.Markdown("""
+
+### 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 input:** Is passed, the preprocessed input data sent to the user's function in the backend.
+- **As output:** 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
+```
+""", elem_classes=["md-custom", "MSAPlot-user-fn"], header_links=True)
+
+
+    gr.Markdown("""
+## `MSAPlotData`
+
+### Initialization
+""", elem_classes=["md-custom"], header_links=True)
+
+    gr.ParamViewer(value=_docs["MSAPlotData"]["members"]["__init__"], linkify=[])
+
+
+
+
+
+
+
+    demo.load(None, js=r"""function() {
+    const refs = {};
+    const user_fn_refs = {};
+    requestAnimationFrame(() => {
+
+        Object.entries(user_fn_refs).forEach(([key, refs]) => {
+            if (refs.length > 0) {
+                const el = document.querySelector(`.${key}-user-fn`);
+                if (!el) return;
+                refs.forEach(ref => {
+                    el.innerHTML = el.innerHTML.replace(
+                        new RegExp("\\b"+ref+"\\b", "g"),
+                        `<a href="#h-${ref.toLowerCase()}">${ref}</a>`
+                    );
+                })
+            }
+        })
+
+        Object.entries(refs).forEach(([key, refs]) => {
+            if (refs.length > 0) {
+                const el = document.querySelector(`.${key}`);
+                if (!el) return;
+                refs.forEach(ref => {
+                    el.innerHTML = el.innerHTML.replace(
+                        new RegExp("\\b"+ref+"\\b", "g"),
+                        `<a href="#h-${ref.toLowerCase()}">${ref}</a>`
+                    );
+                })
+            }
+        })
+    })
+}
+
+""")
+
+demo.launch()

src/.gitignore

@@ -0,0 +1,12 @@
+.eggs/
+dist/
+*.pyc
+__pycache__/
+*.py[cod]
+*$py.class
+__tmp/*
+*.pyi
+.mypycache
+.ruff_cache
+node_modules
+backend/**/templates/

src/README.md

@@ -0,0 +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>
+
+
+
+

src/backend/gradio_msaplot/__init__.py

@@ -0,0 +1,4 @@
+
+from .msaplot import MSAPlot, MSAPlotData
+
+__all__ = ["MSAPlot", "MSAPlotData"]

src/backend/gradio_msaplot/msa.py

@@ -0,0 +1,339 @@
+import pandas as pd
+import matplotlib.pyplot as plt
+import matplotlib.patches as patches
+import matplotlib.transforms as transforms
+from matplotlib.transforms import Affine2D
+import math
+from matplotlib.patheffects import RendererBase
+import matplotlib.patheffects as PathEffects
+import seaborn as sns
+
+# Calculate the font size that match the unit length on x-axis or y-axis
+def CalculateFontsize(xlim, ylim, ax, fig, rows, cols, unit_scale=1):
+    # Get axis limits
+    axXlim = ax.get_xlim()
+    axYlim = ax.get_ylim()
+
+    # Get figure dimensions in pixels
+    fig_width, fig_height = fig.get_size_inches() * fig.dpi
+
+    # Get axis dimensions in pixels
+    bbox = ax.get_window_extent().transformed(fig.dpi_scale_trans.inverted())
+    ax_width, ax_height = bbox.width * fig.dpi, bbox.height * fig.dpi
+
+    # Calculate font size proportional to axis units
+    fontsize_x = unit_scale * ax_width / (axXlim[1] - axXlim[0]) / cols * (xlim[1] - xlim[0])
+    fontsize_y = 0.8 * unit_scale * ax_height / (axYlim[1] - axYlim[0]) / rows * (ylim[1] - ylim[0])
+
+    # Use the minimum of the two to keep the font size consistent
+    fontsize = min(fontsize_x, fontsize_y)
+
+    return fontsize
+
+
+def GetStartEnd(msa, start, end):
+    length = len(msa[0])
+    if (start == None):
+        start = 0
+    elif (start < 0):
+        start = length + start 
+    if (end == None):
+        end = length - 1 
+    elif (end < 0):
+        end = length + end 
+    return start, end
+
+
+def GetColorMap(preset = None, msa=None, color_order = None, palette = None):
+    color_map = {}
+    if preset in ["dna", "nuc", "nucleotide"]:
+        color_map['A'] = [0,1,0]
+        color_map['C'] = [1,165/255,0]
+        color_map['G'] = [1,0,0]
+        color_map['T'] = [0.5,0.5,1]
+    else:
+        if (color_order != None):
+            for i,c in enumerate(color_order):
+                color_map[c] = sns.color_palette(palette)[i]
+            
+        # The case some of the alphabet color is not specified in the order     
+        for a in msa:
+            for c in a:
+                if c not in color_map:
+                    size = len(color_map)
+                    color_map[c] = sns.color_palette(palette)[size]
+    
+    color_map['-'] = [1,1,1] # white
+    color_map['.'] = [1,1,1] # white
+    return color_map
+
+
+def DrawMSA(msa, seq_names = None, start = None, end = None,
+            axlim = None, color_map = None, palette=None, ax=None, fig=None,
+            show_char=True):
+    # Get the canvas attributes.
+    ax = ax or plt.gca()
+    
+    fig = fig or ax.get_figure()
+    renderer = fig.canvas.get_renderer()
+    
+    height = len(msa)
+    length = len(msa[0])
+    
+    # start, end: draw the [start,end] (both inclusive) region of the MSA
+    start, end = GetStartEnd(msa, start, end)
+    
+    if (axlim == None):
+        fontsize = CalculateFontsize(ax.get_xlim(), ax.get_ylim(), ax, fig, height, end - start + 1)
+    else:
+        fontsize = CalculateFontsize(axlim[0], axlim[1], ax, fig, height, end - start + 1)
+   
+    color_map = color_map or GetColorMap(msa=msa, color_order=None, palette=palette)
+    
+    lengthUnit = 1 / (end - start + 1)
+    heightUnit = 1 / height 
+    if (axlim != None):
+        lengthUnit = (axlim[0][1] - axlim[0][0]) / (end - start + 1)
+        heightUnit = (axlim[1][1] - axlim[1][0]) / height
+    
+    for i, a in enumerate(msa):
+        for j,c in enumerate(a[start:end+1]):
+            linewidth = min(2,fontsize/50)
+            if show_char:
+                text = ax.text(x=(j + 0.5)*lengthUnit, y=(i+0.5) * heightUnit, s=c, color="black",
+                    va="center_baseline", ha="center", fontsize=fontsize, 
+                    transform=ax.transAxes if axlim == None else ax.transData)
+                text.set_path_effects([PathEffects.withStroke(linewidth=linewidth, 
+                                                         foreground='w')])
+            ax.add_patch( patches.Rectangle(xy=(j * lengthUnit, i * heightUnit),
+                                           width = lengthUnit, height=heightUnit,
+                                          facecolor=color_map[c], linewidth=linewidth, edgecolor="white",
+                                          transform=ax.transAxes if axlim == None else ax.transData))
+    if (axlim == None):
+        ax.set_xlim(-0.5, end - start + 1 - 0.5)
+        ax.set_ylim(0-0.5, height-0.5)
+        
+        # Set the x ticks adaptively at point easy to count
+        ticks = []
+        tickLabels = []
+        
+        candidateSteps = [1,5,10,20,50,100,500,1000,5000,10000]
+        step = 1
+        for i,s in enumerate(candidateSteps):
+            if (s * 5 > end - start + 1):
+                if (i > 0):
+                    step = candidateSteps[i - 1]
+                break
+        
+        tickStart = (int)(start / step) * step + step - 1
+        if (tickStart != start):
+            ticks.append(0)
+            tickLabels.append(start+1)
+        for i in range(tickStart, end + 1, step):
+            if (i >= length):
+                break
+            ticks.append(i - start)
+            tickLabels.append(i+1)
+        if (tickLabels[-1] != min(length, end + 1)):
+            ticks.append(min(length - 1, end) - start)
+            tickLabels.append(min(length, end+1))
+        ax.set_xticks(ticks, tickLabels)
+        
+        # Set the y
+        ticks = []
+        tickLabels = []
+        for i in range(height):
+            ticks.append(i)
+            tickLabels.append(i if seq_names == None else seq_names[i])
+        ax.set_yticks(ticks, tickLabels)
+    ax.spines['top'].set_visible(False)
+    ax.spines['right'].set_visible(False)    
+    ax.spines['left'].set_visible(False)
+    ax.spines['bottom'].set_visible(False)
+    return ax, color_map
+
+def GetConsensus(msa, start = None, end = None):
+    start, end = GetStartEnd(msa, start, end)
+    consensus = []
+    consensusComposition = []
+    for j in range(start, end + 1):
+        composition = {}
+        if (j >= len(msa[0])):
+            consensus.append('')
+            consensusComposition.append({"":0})
+            continue
+            
+        for i,a in enumerate(msa):
+            if (a[j] not in composition):
+                composition[a[j]] = 0
+            composition[a[j]] += 1
+        result = ""
+        maxCnt = 0
+        for c in composition:
+            if (composition[c] > maxCnt):
+                maxCnt = composition[c]
+                result = c
+        consensus.append(result)
+        consensusComposition.append(composition)
+    return consensus, consensusComposition
+
+def SetConsensusAxTicks(consensus, consensusComposition, ax):
+    ticks = []
+    tickLabels = []
+    for i in range(len(consensus)):
+        ticks.append(i)
+        label = consensus[i]
+        for c in consensusComposition[i]:
+            if (c == label):
+                continue
+            if (consensusComposition[i][c] == consensusComposition[i][label]):
+                label = 'X'
+                break
+        tickLabels.append(label)
+    ax.set_xticks(ticks, tickLabels)
+
+def DrawConsensusHisto(msa, color = [0, 0, 1], color_map = None, start = None, end = None, ax=None):
+    ax = ax or plt.gca()
+    consensus, consensusComposition = GetConsensus(msa, start, end)
+    binHeight = []
+    colors = []
+    for i in range(len(consensus)):
+        if (sum(consensusComposition[i].values()) == 0):
+            binHeight.append(0)
+        else:
+            binHeight.append( consensusComposition[i][consensus[i]] / 
+                         sum(consensusComposition[i].values()) )
+        colors.append([1-binHeight[i] * (1-color[0]), 
+                       1-binHeight[i] * (1-color[1]), 
+                       1-binHeight[i] * (1-color[2])]) # color-base in blue
+    ax.bar(x=list(range(0, len(consensus))), height=binHeight, 
+           color = colors,
+           width=0.95)
+    ax.set(ylim=(0, 1))
+    ax.set(xlim=(-0.5, len(consensus)-0.5))
+    ax.spines['top'].set_visible(False)
+    ax.spines['right'].set_visible(False)
+    ax.spines['left'].set_visible(False)
+    ax.spines['bottom'].set_visible(False)
+    ax.get_yaxis().set_ticks([])
+    SetConsensusAxTicks(consensus, consensusComposition, ax)
+
+
+# Code from pyseqlogo for scale font to one direction
+class Scale(RendererBase):
+    """Scale alphabets using affine transformation"""
+
+    def __init__(self, sx, sy=None):
+        self._sx = sx
+        self._sy = sy
+
+    def draw_path(self, renderer, gc, tpath, affine, rgbFace):
+        affine = Affine2D().scale(self._sx, self._sy) + affine
+        renderer.draw_path(gc, tpath, affine, rgbFace)
+
+def CalculateEntropy(count):
+    s = sum(count)
+    if (s == 0):
+        return 0
+    return sum([-c/s * math.log2(c/s) for c in count])
+
+def DrawSeqLogo(msa, color_map, alphabet_size = None, start = None, end = None, ax=None):
+    ax = ax or plt.gca()
+    fig = ax.get_figure()
+    start, end = GetStartEnd(msa, start, end)
+    
+    alphabet_size = len(color_map) - 2 # 2 for "-" and "."
+    consensus, consensusComposition = GetConsensus(msa, start, end)
+
+    # Definition from https://en.wikipedia.org/wiki/Sequence_logo
+    # Search for appropriate height. 
+    r = []
+    adjuste = 1 / math.log(2) * (alphabet_size - 1) / (2 * len(msa[0]))
+    for i,c in enumerate(consensus):
+        entropy = CalculateEntropy(list(consensusComposition[i].values()))
+        r.append(math.log2(alphabet_size) - (entropy + adjuste))
+    
+    ax.set_xlim(-0.5, end-start+1-0.5)
+    ax.set_ylim(0, max(r))
+    
+    fontsize = CalculateFontsize(ax.get_xlim(), ax.get_ylim(), 
+                                 ax, fig, 1, end - start + 1)
+    
+    lengthUnit = 1
+    for i,c in enumerate(consensusComposition):
+        prevy = 0
+        totalCount = sum(list(c.values()))
+        if (totalCount == 0):
+            continue
+        for j,item in enumerate(sorted(c.items(), key=lambda x:x[1], reverse=True)):
+            k = item[0]
+            v = item[1]
+            text = ax.text(x=i * lengthUnit, y=prevy, s=k, fontsize=fontsize,
+               va="baseline", ha="center", color = (color_map[k] if (k not in ['.','-']) else [0,0,0]),
+               transform=ax.transData)
+            
+            height = v / totalCount * r[i]
+            tbox = text.get_window_extent(text._renderer).transformed(ax.transData.inverted())
+            scale = height / (tbox.y1 - prevy) 
+            #print(i, j, height, scale, tbox)
+            prevy = prevy + height 
+            text.set_path_effects([Scale(1.0, scale)])
+    ax.axis('off')
+    SetConsensusAxTicks(consensus, consensusComposition, ax)
+
+# Add the annotation for the sequence alignment
+#  annotations: a list of numbers like [['a',0,3]]: msa[0..3] (both inclusive) is annotated as the name 'a'
+def DrawAnnotation(msa, annotations, color_map=None,start = None, end = None, ax=None):
+    ax = ax or plt.gca()
+    fig = ax.get_figure()
+    start, end = GetStartEnd(msa, start, end)
+     
+    ax.set_xlim(start - 0.5, end + 0.5)
+    ax.set_ylim(0, 1)
+    fontsize = CalculateFontsize(ax.get_xlim(), ax.get_ylim(), ax, fig, 1, end - start + 1)
+    
+    for a in annotations:
+        text = ax.text(x=(a[1]+a[2])/2, y=0.5, s=a[0], fontsize=fontsize,
+                       va="center", ha="center", color="black", clip_on=True)
+        tbox = text.get_window_extent(text._renderer).transformed(ax.transData.inverted())
+        # Draw the bracket
+        ax.plot([a[1], a[1]], [0, 1], color="black", clip_on=True)
+        ax.plot([a[2], a[2]], [0, 1], color="black", clip_on=True)
+        ax.plot([a[1], tbox.x0], [0.5, 0.5], color="black", clip_on=True)
+        ax.plot([tbox.x1, a[2]], [0.5, 0.5], color="black", clip_on=True)
+
+    ax.axis('off')
+
+# Draw multipanel MSA
+def DrawComplexMSA(msa, panels=[], seq_names = None, panel_height_ratios=None, panel_params=None, 
+                   color_map=None, start=None, end=None, wrap=None, figsize=None):
+    color_map = color_map or GetColorMap(msa=msa)
+    start,end = GetStartEnd(msa, start,end)
+    wrap = wrap or (end - start + 1)
+    chunks = math.ceil((end - start + 1) / wrap)
+    
+    height_ratios = None
+    if (panel_height_ratios is None):
+        panel_height_ratios = []
+        for p in panels:
+            if (p == DrawMSA):
+                panel_height_ratios.append(len(msa))
+            elif (p == DrawAnnotation):
+                panel_height_ratios.append(0.5)
+            else:
+                panel_height_ratios.append(1)
+    height_ratios = panel_height_ratios * chunks
+    fig,axes = plt.subplots(len(panels) * chunks, 1, constrained_layout=True,
+                            figsize=figsize, height_ratios = height_ratios)
+    
+    axidx = 0
+    for i in range(start, end + 1, wrap):
+        for j,func in enumerate(panels):
+            extraParam = {}
+            if (panel_params is not None):
+                extraParam = panel_params[j].copy()
+            if func is DrawMSA:
+                extraParam['seq_names'] = seq_names
+            func(msa, color_map = color_map, start=i, end=i+wrap-1,ax=axes[axidx], **extraParam)
+            axidx += 1
+    return axes

src/backend/gradio_msaplot/msaplot.py

@@ -0,0 +1,201 @@
+from __future__ import annotations
+
+import json
+from typing import Any, List, Dict, Optional, Literal, ClassVar
+from gradio.components import Component
+from gradio.data_classes import FileData, GradioModel
+from gradio.events import Events, EventListener
+
+import matplotlib.pyplot as plt
+import io
+import base64
+
+# Import functions from msa.py
+from .msa import (
+    DrawMSA,
+    DrawConsensusHisto,
+    DrawSeqLogo,
+    DrawAnnotation,
+    DrawComplexMSA,
+    GetColorMap,
+)
+
+class MSAPlotData(GradioModel):
+    msa: List[str]
+    seq_names: Optional[List[str]] = None
+    start: Optional[int] = None
+    end: Optional[int] = None
+    color_map: Optional[Dict[str, List[float]]] = None
+    plot_type: Literal["msa", "consensus", "logo", "annotation", "complex"] = "msa"
+    panels: List[str] = ["msa"]
+    panel_height_ratios: Optional[List[float]] = None
+    panel_params: Optional[List[Dict[str, Any]]] = None
+    wrap: Optional[int] = None
+    figsize: Optional[List[float]] = None
+    annotations: Optional[List[List[Any]]] = None
+
+    EVENTS: ClassVar[List[Events | EventListener]] = [] 
+
+    def __init__(self, data: Any = None, **kwargs):
+        super().__init__(**kwargs)
+        if data is not None:
+            self.__dict__.update(data)
+            
+    @classmethod
+    def get_events(cls) -> Dict[str, Any]:
+        return {}  # MSAPlotData has no events
+
+    @classmethod
+    def get_description(cls) -> str:
+        return "Helper class for MSAPlot data"
+    
+class MSAPlot(Component):
+    """
+    Creates a Multiple Sequence Alignment (MSA) plot component.
+    """
+
+    # EVENTS = {
+    #     "change": None,
+    #     "clear": None
+    # }
+    EVENTS = [
+        Events.change,
+        EventListener("clear", doc="Triggered when the plot is cleared.")
+    ]
+
+    data_model = MSAPlotData
+    def __init__(
+        self,
+        value: Any | None = None,
+        *,
+        label: str | None = None,
+        every: float | None = None,
+        show_label: bool | None = None,
+        container: bool = True,
+        scale: int | None = None,
+        min_width: int = 160,
+        visible: bool = True,
+        elem_id: str | None = None,
+        elem_classes: list[str] | str | None = None,
+        render: bool = True,
+        key: int | str | None = None,
+    ):
+        super().__init__(
+            label=label,
+            every=every,
+            show_label=show_label,
+            container=container,
+            scale=scale,
+            min_width=min_width,
+            visible=visible,
+            elem_id=elem_id,
+            elem_classes=elem_classes,
+            render=render,
+            key=key,
+            value=value,
+        )
+
+    def preprocess(self, payload: MSAPlotData | None) -> MSAPlotData | None:
+        return payload
+
+    def postprocess(self, value: MSAPlotData) -> Dict[str, Any]:
+        if value is None:
+            return None
+
+        fig, ax = plt.subplots(figsize=value.figsize or (10, 5))
+
+        color_map = value.color_map or GetColorMap(msa=value.msa)
+
+        if value.plot_type == "msa":
+            DrawMSA(value.msa, seq_names=value.seq_names, start=value.start, end=value.end, color_map=color_map, ax=ax)
+        elif value.plot_type == "consensus":
+            DrawConsensusHisto(value.msa, color_map=color_map, start=value.start, end=value.end, ax=ax)
+        elif value.plot_type == "logo":
+            DrawSeqLogo(value.msa, color_map=color_map, start=value.start, end=value.end, ax=ax)
+        elif value.plot_type == "annotation":
+            if value.annotations:
+                DrawAnnotation(value.msa, value.annotations, color_map=color_map, start=value.start, end=value.end, ax=ax)
+            else:
+                raise ValueError("Annotations are required for annotation plot type")
+        elif value.plot_type == "complex":
+            panel_functions = {
+                "msa": DrawMSA,
+                "consensus": DrawConsensusHisto,
+                "logo": DrawSeqLogo,
+                "annotation": DrawAnnotation,
+            }
+            panels = [panel_functions[p] for p in value.panels]
+            DrawComplexMSA(
+                value.msa,
+                panels=panels,
+                seq_names=value.seq_names,
+                panel_height_ratios=value.panel_height_ratios,
+                panel_params=value.panel_params,
+                color_map=color_map,
+                start=value.start,
+                end=value.end,
+                wrap=value.wrap,
+                figsize=value.figsize,
+            )
+
+        buf = io.BytesIO()
+        plt.savefig(buf, format='png')
+        buf.seek(0)
+        img_base64 = base64.b64encode(buf.getvalue()).decode('utf-8')
+        plt.close(fig)
+
+        return {
+            "type": "matplotlib",
+            "plot": f"data:image/png;base64,{img_base64}",
+        }
+
+    def example_payload(self) -> Any:
+        return MSAPlotData(
+            msa=[
+                "ATGCATGC",
+                "ATG-ATGC",
+                "ATGCATGC",
+            ],
+            seq_names=["Seq1", "Seq2", "Seq3"],
+            plot_type="complex",
+            panels=["msa", "consensus", "logo"],
+        )
+
+    def example_value(self) -> Any:
+        return self.example_payload()
+
+    @classmethod
+    def get_events(cls) -> Dict[str, Any]:
+        return {event.value if isinstance(event, Events) else event.name: event.doc for event in cls.EVENTS}
+
+    @classmethod
+    def get_description(cls) -> str:
+        return "Creates a Multiple Sequence Alignment (MSA) plot component."
+      
+    def api_info(self) -> Dict[str, Any]:
+        return {
+            "type": "object",
+            "properties": {
+                "msa": {
+                    "type": "array",
+                    "items": {"type": "string"},
+                    "description": "List of sequences in the multiple sequence alignment",
+                },
+                "seq_names": {
+                    "type": "array",
+                    "items": {"type": "string"},
+                    "description": "List of sequence names",
+                },
+                "plot_type": {
+                    "type": "string",
+                    "enum": ["msa", "consensus", "logo", "annotation", "complex"],
+                    "description": "Type of plot to generate",
+                },
+                "panels": {
+                    "type": "array",
+                    "items": {"type": "string"},
+                    "description": "List of panels to include in a complex plot",
+                },
+            },
+            "required": ["msa"],
+        }   

src/demo/app.py

@@ -0,0 +1,16 @@
+
+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()

src/demo/css.css

@@ -0,0 +1,157 @@
+html {
+	font-family: Inter;
+	font-size: 16px;
+	font-weight: 400;
+	line-height: 1.5;
+	-webkit-text-size-adjust: 100%;
+	background: #fff;
+	color: #323232;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	text-rendering: optimizeLegibility;
+}
+
+:root {
+	--space: 1;
+	--vspace: calc(var(--space) * 1rem);
+	--vspace-0: calc(3 * var(--space) * 1rem);
+	--vspace-1: calc(2 * var(--space) * 1rem);
+	--vspace-2: calc(1.5 * var(--space) * 1rem);
+	--vspace-3: calc(0.5 * var(--space) * 1rem);
+}
+
+.app {
+	max-width: 748px !important;
+}
+
+.prose p {
+	margin: var(--vspace) 0;
+	line-height: var(--vspace * 2);
+	font-size: 1rem;
+}
+
+code {
+	font-family: "Inconsolata", sans-serif;
+	font-size: 16px;
+}
+
+h1,
+h1 code {
+	font-weight: 400;
+	line-height: calc(2.5 / var(--space) * var(--vspace));
+}
+
+h1 code {
+	background: none;
+	border: none;
+	letter-spacing: 0.05em;
+	padding-bottom: 5px;
+	position: relative;
+	padding: 0;
+}
+
+h2 {
+	margin: var(--vspace-1) 0 var(--vspace-2) 0;
+	line-height: 1em;
+}
+
+h3,
+h3 code {
+	margin: var(--vspace-1) 0 var(--vspace-2) 0;
+	line-height: 1em;
+}
+
+h4,
+h5,
+h6 {
+	margin: var(--vspace-3) 0 var(--vspace-3) 0;
+	line-height: var(--vspace);
+}
+
+.bigtitle,
+h1,
+h1 code {
+	font-size: calc(8px * 4.5);
+	word-break: break-word;
+}
+
+.title,
+h2,
+h2 code {
+	font-size: calc(8px * 3.375);
+	font-weight: lighter;
+	word-break: break-word;
+	border: none;
+	background: none;
+}
+
+.subheading1,
+h3,
+h3 code {
+	font-size: calc(8px * 1.8);
+	font-weight: 600;
+	border: none;
+	background: none;
+	letter-spacing: 0.1em;
+	text-transform: uppercase;
+}
+
+h2 code {
+	padding: 0;
+	position: relative;
+	letter-spacing: 0.05em;
+}
+
+blockquote {
+	font-size: calc(8px * 1.1667);
+	font-style: italic;
+	line-height: calc(1.1667 * var(--vspace));
+	margin: var(--vspace-2) var(--vspace-2);
+}
+
+.subheading2,
+h4 {
+	font-size: calc(8px * 1.4292);
+	text-transform: uppercase;
+	font-weight: 600;
+}
+
+.subheading3,
+h5 {
+	font-size: calc(8px * 1.2917);
+	line-height: calc(1.2917 * var(--vspace));
+
+	font-weight: lighter;
+	text-transform: uppercase;
+	letter-spacing: 0.15em;
+}
+
+h6 {
+	font-size: calc(8px * 1.1667);
+	font-size: 1.1667em;
+	font-weight: normal;
+	font-style: italic;
+	font-family: "le-monde-livre-classic-byol", serif !important;
+	letter-spacing: 0px !important;
+}
+
+#start .md > *:first-child {
+	margin-top: 0;
+}
+
+h2 + h3 {
+	margin-top: 0;
+}
+
+.md hr {
+	border: none;
+	border-top: 1px solid var(--block-border-color);
+	margin: var(--vspace-2) 0 var(--vspace-2) 0;
+}
+.prose ul {
+	margin: var(--vspace-2) 0 var(--vspace-1) 0;
+}
+
+.gap {
+	gap: 0;
+}

src/demo/requirements.txt

@@ -0,0 +1 @@
+gradio_msaplot

src/demo/space.py

@@ -0,0 +1,149 @@
+
+import gradio as gr
+from app import demo as app
+import os
+
+_docs = {'MSAPlot': {'description': 'Creates a Multiple Sequence Alignment (MSA) plot component.', 'members': {'__init__': {'value': {'type': 'typing.Any | None', 'default': 'None', 'description': None}, 'label': {'type': 'str | None', 'default': 'None', 'description': None}, 'every': {'type': 'float | None', 'default': 'None', 'description': None}, 'show_label': {'type': 'bool | None', 'default': 'None', 'description': None}, 'container': {'type': 'bool', 'default': 'True', 'description': None}, 'scale': {'type': 'int | None', 'default': 'None', 'description': None}, 'min_width': {'type': 'int', 'default': '160', 'description': None}, 'visible': {'type': 'bool', 'default': 'True', 'description': None}, 'elem_id': {'type': 'str | None', 'default': 'None', 'description': None}, 'elem_classes': {'type': 'list[str] | str | None', 'default': 'None', 'description': None}, 'render': {'type': 'bool', 'default': 'True', 'description': None}, 'key': {'type': 'int | str | None', 'default': 'None', 'description': None}}, 'postprocess': {'value': {'type': 'MSAPlotData', 'description': "The output data received by the component from the user's function in the backend."}}, 'preprocess': {'return': {'type': 'MSAPlotData | None', 'description': "The preprocessed input data sent to the user's function in the backend."}, 'value': None}}, 'events': {'change': {'type': None, 'default': None, 'description': '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': {'type': None, 'default': None, 'description': 'Triggered when the plot is cleared.'}}}, '__meta__': {'additional_interfaces': {}}, 'MSAPlotData': {'description': 'Helper class that provides a standard way to create an ABC using\ninheritance.', 'members': {'__init__': {'data': {'type': 'typing.Any', 'default': 'None', 'description': None}}}, 'events': {}}}
+
+abs_path = os.path.join(os.path.dirname(__file__), "css.css")
+
+with gr.Blocks(
+    css=abs_path,
+    theme=gr.themes.Default(
+        font_mono=[
+            gr.themes.GoogleFont("Inconsolata"),
+            "monospace",
+        ],
+    ),
+) as demo:
+    gr.Markdown(
+"""
+# `gradio_msaplot`
+
+<div style="display: flex; gap: 7px;">
+<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>
+</div>
+
+MSAplot is customizable panels for plotting MSA, seqlogo, annotation, and consensus histograms.
+""", elem_classes=["md-custom"], header_links=True)
+    app.render()
+    gr.Markdown(
+"""
+## 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()
+
+```
+""", elem_classes=["md-custom"], header_links=True)
+
+
+    gr.Markdown("""
+## `MSAPlot`
+
+### Initialization
+""", elem_classes=["md-custom"], header_links=True)
+
+    gr.ParamViewer(value=_docs["MSAPlot"]["members"]["__init__"], linkify=[])
+
+
+    gr.Markdown("### Events")
+    gr.ParamViewer(value=_docs["MSAPlot"]["events"], linkify=['Event'])
+
+
+
+
+    gr.Markdown("""
+
+### 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 input:** Is passed, the preprocessed input data sent to the user's function in the backend.
+- **As output:** 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
+```
+""", elem_classes=["md-custom", "MSAPlot-user-fn"], header_links=True)
+
+
+    gr.Markdown("""
+## `MSAPlotData`
+
+### Initialization
+""", elem_classes=["md-custom"], header_links=True)
+
+    gr.ParamViewer(value=_docs["MSAPlotData"]["members"]["__init__"], linkify=[])
+
+
+
+
+
+
+
+    demo.load(None, js=r"""function() {
+    const refs = {};
+    const user_fn_refs = {};
+    requestAnimationFrame(() => {
+
+        Object.entries(user_fn_refs).forEach(([key, refs]) => {
+            if (refs.length > 0) {
+                const el = document.querySelector(`.${key}-user-fn`);
+                if (!el) return;
+                refs.forEach(ref => {
+                    el.innerHTML = el.innerHTML.replace(
+                        new RegExp("\\b"+ref+"\\b", "g"),
+                        `<a href="#h-${ref.toLowerCase()}">${ref}</a>`
+                    );
+                })
+            }
+        })
+
+        Object.entries(refs).forEach(([key, refs]) => {
+            if (refs.length > 0) {
+                const el = document.querySelector(`.${key}`);
+                if (!el) return;
+                refs.forEach(ref => {
+                    el.innerHTML = el.innerHTML.replace(
+                        new RegExp("\\b"+ref+"\\b", "g"),
+                        `<a href="#h-${ref.toLowerCase()}">${ref}</a>`
+                    );
+                })
+            }
+        })
+    })
+}
+
+""")
+
+demo.launch()

src/frontend/Index.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+    import type { LoadingStatus } from "@gradio/statustracker";
+    import { Block } from "@gradio/atoms";
+    import { StatusTracker } from "@gradio/statustracker";
+    import type { Gradio } from "@gradio/utils";
+    import { Plot as PlotIcon } from "@gradio/icons";
+
+    export let gradio: Gradio<{
+        change: never;
+        clear: never;
+    }>;
+
+    export let value: {
+        type: string;
+        plot: string;
+    } | null = null;
+    export let elem_id = "";
+    export let elem_classes: string[] = [];
+    export let scale: number | null = null;
+    export let min_width: number | undefined = undefined;
+    export let loading_status: LoadingStatus | undefined = undefined;
+    export let mode: "static" | "interactive" = "interactive";
+    export let label: string | undefined = undefined;
+    export let show_label = true;
+    export let container = true;
+    export let visible = true;
+
+    $: src = value?.plot || "";
+</script>
+
+<Block
+    {visible}
+    {elem_id}
+    {elem_classes}
+    {scale}
+    {min_width}
+    allow_overflow={false}
+    padding={true}
+    {container}
+>
+    {#if show_label}
+        <label for={elem_id}>{label || "MSA Plot"}</label>
+    {/if}
+
+    {#if loading_status}
+        <StatusTracker
+            autoscroll={gradio.autoscroll}
+            i18n={gradio.i18n}
+            {...loading_status}
+        />
+    {/if}
+
+    {#if src}
+        <img {src} alt="MSA Plot" style="width: 100%; height: auto;" />
+    {:else}
+        <div class="placeholder">
+            <PlotIcon />
+            <p>{gradio.i18n("plot.no_plot")}</p>
+        </div>
+    {/if}
+</Block>
+
+<style>
+    .placeholder {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+        color: var(--color-text-subdued);
+    }
+</style>

src/frontend/gradio.config.js

@@ -0,0 +1,9 @@
+export default {
+  plugins: [],
+  svelte: {
+    preprocess: [],
+  },
+  build: {
+    target: "modules",
+  },
+};

src/frontend/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "gradio_msaplot",
+  "version": "0.7.1",
+  "description": "Gradio UI packages",
+  "type": "module",
+  "author": "",
+  "license": "ISC",
+  "private": false,
+  "dependencies": {
+    "@gradio/atoms": "0.9.0",
+    "@gradio/icons": "0.8.0",
+    "@gradio/statustracker": "0.8.1",
+    "@gradio/theme": "0.3.0",
+    "@gradio/utils": "0.7.0",
+    "@rollup/plugin-json": "^6.0.0",
+    "plotly.js-dist-min": "^2.10.1",
+    "vega": "^5.23.0",
+    "vega-embed": "^6.25.0",
+    "vega-lite": "^5.12.0"
+  },
+  "devDependencies": {
+    "@gradio/preview": "0.12.0"
+  },
+  "main": "./Index.svelte",
+  "main_changeset": true,
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "gradio": "./Index.svelte",
+      "svelte": "./dist/Index.svelte",
+      "types": "./dist/Index.svelte.d.ts"
+    },
+    "./base": {
+      "gradio": "./shared/Plot.svelte",
+      "svelte": "./dist/shared/Plot.svelte",
+      "types": "./dist/shared/Plot.svelte.d.ts"
+    }
+  },
+  "peerDependencies": {
+    "svelte": "^4.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/gradio-app/gradio.git",
+    "directory": "js/plot"
+  }
+}

src/frontend/shared/Plot.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+	//@ts-nocheck
+	import { Plot as PlotIcon } from "@gradio/icons";
+	import { Empty } from "@gradio/atoms";
+	import type { ThemeMode } from "js/core/src/components/types";
+	import type { Gradio, SelectData } from "@gradio/utils";
+
+	export let value;
+	export let colors: string[] = [];
+	export let theme_mode: ThemeMode;
+	export let caption: string;
+	export let bokeh_version: string | null;
+	export let show_actions_button: bool;
+	export let gradio: Gradio<{
+		select: SelectData;
+	}>;
+	export let x_lim: [number, number] | null = null;
+	export let _selectable: boolean;
+
+	let PlotComponent: any = null;
+	let _type = value?.type;
+
+	const plotTypeMapping = {
+		plotly: () => import("./plot_types/PlotlyPlot.svelte"),
+		bokeh: () => import("./plot_types/BokehPlot.svelte"),
+		altair: () => import("./plot_types/AltairPlot.svelte"),
+		matplotlib: () => import("./plot_types/MatplotlibPlot.svelte")
+	};
+
+	const is_browser = typeof window !== "undefined";
+
+	$: {
+		let type = value?.type;
+		if (type !== _type) {
+			PlotComponent = null;
+		}
+		if (type && type in plotTypeMapping && is_browser) {
+			plotTypeMapping[type]().then((module) => {
+				PlotComponent = module.default;
+			});
+		}
+	}
+</script>
+
+{#if value && PlotComponent}
+	<svelte:component
+		this={PlotComponent}
+		{value}
+		{colors}
+		{theme_mode}
+		{caption}
+		{bokeh_version}
+		{show_actions_button}
+		{gradio}
+		{_selectable}
+		{x_lim}
+		on:load
+		on:select
+	/>
+{:else}
+	<Empty unpadded_box={true} size="large"><PlotIcon /></Empty>
+{/if}

src/frontend/shared/plot_types/AltairPlot.svelte

@@ -0,0 +1,157 @@
+<script lang="ts">
+	//@ts-nocheck
+	import { set_config } from "./altair_utils";
+	import { onMount, onDestroy } from "svelte";
+	import type { TopLevelSpec as Spec } from "vega-lite";
+	import vegaEmbed from "vega-embed";
+	import type { Gradio, SelectData } from "@gradio/utils";
+	import type { View } from "vega";
+
+	export let value;
+	export let colors: string[] = [];
+	export let caption: string;
+	export let show_actions_button: bool;
+	export let gradio: Gradio<{
+		select: SelectData;
+	}>;
+	let element: HTMLElement;
+	let parent_element: HTMLElement;
+	let view: View;
+	export let _selectable: bool;
+
+	let computed_style = window.getComputedStyle(document.body);
+
+	let old_spec: Spec;
+	let spec_width: number;
+	$: plot = value?.plot;
+	$: spec = JSON.parse(plot) as Spec;
+	$: if (spec && spec.params && !_selectable) {
+		spec.params = spec.params.filter((param) => param.name !== "brush");
+	}
+	$: if (old_spec !== spec) {
+		old_spec = spec;
+		spec_width = spec.width;
+	}
+
+	$: if (value.chart) {
+		spec = set_config(spec, computed_style, value.chart as string, colors);
+	}
+	$: fit_width_to_parent =
+		spec.encoding?.column?.field ||
+		spec.encoding?.row?.field ||
+		value.chart === undefined
+			? false
+			: true; // vega seems to glitch with width when orientation is set
+
+	const get_width = (): number => {
+		return Math.min(
+			parent_element.offsetWidth,
+			spec_width || parent_element.offsetWidth
+		);
+	};
+	let resize_callback = (): void => {};
+	const renderPlot = (): void => {
+		if (fit_width_to_parent) {
+			spec.width = get_width();
+		}
+		vegaEmbed(element, spec, { actions: show_actions_button }).then(
+			function (result): void {
+				view = result.view;
+				resize_callback = () => {
+					view.signal("width", get_width()).run();
+				};
+
+				if (!_selectable) return;
+				const callback = (event, item): void => {
+					const brushValue = view.signal("brush");
+					if (brushValue) {
+						if (Object.keys(brushValue).length === 0) {
+							gradio.dispatch("select", {
+								value: null,
+								index: null,
+								selected: false
+							});
+						} else {
+							const key = Object.keys(brushValue)[0];
+							let range: [number, number] = brushValue[key].map(
+								(x) => x / 1000
+							);
+							gradio.dispatch("select", {
+								value: brushValue,
+								index: range,
+								selected: true
+							});
+						}
+					}
+				};
+				view.addEventListener("mouseup", callback);
+				view.addEventListener("touchup", callback);
+			}
+		);
+	};
+	let resizeObserver = new ResizeObserver(() => {
+		if (fit_width_to_parent && spec.width !== parent_element.offsetWidth) {
+			resize_callback();
+		}
+	});
+	onMount(() => {
+		renderPlot();
+		resizeObserver.observe(parent_element);
+	});
+	onDestroy(() => {
+		resizeObserver.disconnect();
+	});
+</script>
+
+<div data-testid={"altair"} class="altair layout" bind:this={parent_element}>
+	<div bind:this={element}></div>
+	{#if caption}
+		<div class="caption layout">
+			{caption}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.altair :global(canvas) {
+		padding: 6px;
+	}
+	.altair :global(.vega-embed) {
+		padding: 0px !important;
+	}
+	.altair :global(.vega-actions) {
+		right: 0px !important;
+	}
+	.layout {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		width: var(--size-full);
+		height: var(--size-full);
+		color: var(--body-text-color);
+	}
+	.altair {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		width: var(--size-full);
+		height: var(--size-full);
+	}
+	.caption {
+		font-size: var(--text-sm);
+		margin-bottom: 6px;
+	}
+	:global(#vg-tooltip-element) {
+		font-family: var(--font) !important;
+		font-size: var(--text-xs) !important;
+		box-shadow: none !important;
+		background-color: var(--block-background-fill) !important;
+		border: 1px solid var(--border-color-primary) !important;
+		color: var(--body-text-color) !important;
+	}
+	:global(#vg-tooltip-element .key) {
+		color: var(--body-text-color-subdued) !important;
+	}
+</style>

src/frontend/shared/plot_types/BokehPlot.svelte

@@ -0,0 +1,94 @@
+<script lang="ts">
+	//@ts-nocheck
+	import { onDestroy, createEventDispatcher } from "svelte";
+
+	export let value;
+	export let bokeh_version: string | null;
+	const div_id = `bokehDiv-${Math.random().toString(5).substring(2)}`;
+	const dispatch = createEventDispatcher<{ load: undefined }>();
+	$: plot = value?.plot;
+
+	async function embed_bokeh(_plot: Record<string, any>): void {
+		if (document) {
+			if (document.getElementById(div_id)) {
+				document.getElementById(div_id).innerHTML = "";
+			}
+		}
+		if (window.Bokeh) {
+			load_bokeh();
+			let plotObj = JSON.parse(_plot);
+			const y = await window.Bokeh.embed.embed_item(plotObj, div_id);
+			y._roots.forEach(async (p) => {
+				await p.ready;
+				dispatch("load");
+			});
+		}
+	}
+
+	$: loaded && embed_bokeh(plot);
+
+	const main_src = `https://cdn.bokeh.org/bokeh/release/bokeh-${bokeh_version}.min.js`;
+
+	const plugins_src = [
+		`https://cdn.pydata.org/bokeh/release/bokeh-widgets-${bokeh_version}.min.js`,
+		`https://cdn.pydata.org/bokeh/release/bokeh-tables-${bokeh_version}.min.js`,
+		`https://cdn.pydata.org/bokeh/release/bokeh-gl-${bokeh_version}.min.js`,
+		`https://cdn.pydata.org/bokeh/release/bokeh-api-${bokeh_version}.min.js`
+	];
+
+	let loaded = false;
+	async function load_plugins(): HTMLScriptElement[] {
+		await Promise.all(
+			plugins_src.map((src, i) => {
+				return new Promise((resolve) => {
+					const script = document.createElement("script");
+					script.onload = resolve;
+					script.src = src;
+					document.head.appendChild(script);
+					return script;
+				});
+			})
+		);
+
+		loaded = true;
+	}
+
+	let plugin_scripts = [];
+
+	function handle_bokeh_loaded(): void {
+		plugin_scripts = load_plugins();
+	}
+
+	function load_bokeh(): HTMLScriptElement {
+		const script = document.createElement("script");
+		script.onload = handle_bokeh_loaded;
+		script.src = main_src;
+		const is_bokeh_script_present = document.head.querySelector(
+			`script[src="${main_src}"]`
+		);
+		if (!is_bokeh_script_present) {
+			document.head.appendChild(script);
+		} else {
+			handle_bokeh_loaded();
+		}
+		return script;
+	}
+
+	const main_script = bokeh_version ? load_bokeh() : null;
+
+	onDestroy(() => {
+		if (main_script in document.children) {
+			document.removeChild(main_script);
+			plugin_scripts.forEach((child) => document.removeChild(child));
+		}
+	});
+</script>
+
+<div data-testid={"bokeh"} id={div_id} class="gradio-bokeh" />
+
+<style>
+	.gradio-bokeh {
+		display: flex;
+		justify-content: center;
+	}
+</style>

src/frontend/shared/plot_types/MatplotlibPlot.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	export let value;
+
+	$: plot = value?.plot;
+</script>
+
+<div data-testid={"matplotlib"} class="matplotlib layout">
+	<img
+		src={plot}
+		alt={`${value.chart} plot visualising provided data`}
+		on:load
+	/>
+</div>
+
+<style>
+	.layout {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		width: var(--size-full);
+		height: var(--size-full);
+		color: var(--body-text-color);
+	}
+	.matplotlib img {
+		object-fit: contain;
+	}
+</style>

src/frontend/shared/plot_types/PlotlyPlot.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+	//@ts-nocheck
+	import Plotly from "plotly.js-dist-min";
+	import { afterUpdate, createEventDispatcher } from "svelte";
+
+	export let value;
+
+	$: plot = value?.plot;
+
+	let plot_div;
+	let plotly_global_style;
+
+	const dispatch = createEventDispatcher<{ load: undefined }>();
+
+	function load_plotly_css(): void {
+		if (!plotly_global_style) {
+			plotly_global_style = document.getElementById("plotly.js-style-global");
+			const plotly_style_clone = plotly_global_style.cloneNode();
+			plot_div.appendChild(plotly_style_clone);
+			for (const rule of plotly_global_style.sheet.cssRules) {
+				plotly_style_clone.sheet.insertRule(rule.cssText);
+			}
+		}
+	}
+
+	afterUpdate(async () => {
+		load_plotly_css();
+
+		let plotObj = JSON.parse(plot);
+
+		// the docs aren't very good but this works
+		plotObj.config = plotObj.config || {};
+		plotObj.config.responsive = true;
+		plotObj.responsive = true;
+		plotObj.layout.autosize = true;
+
+		plotObj.layout.title
+			? (plotObj.layout.margin = { autoexpand: true })
+			: (plotObj.layout.margin = { l: 0, r: 0, b: 0, t: 0 });
+
+		Plotly.react(plot_div, plotObj.data, plotObj.layout, plotObj.config);
+		Plotly.Plots.resize(plot_div);
+
+		plot_div.on("plotly_afterplot", () => {
+			dispatch("load");
+		});
+	});
+</script>
+
+<div data-testid={"plotly"} bind:this={plot_div} />

src/frontend/shared/plot_types/altair_utils.ts

@@ -0,0 +1,111 @@
+import { colors as color_palette } from "@gradio/theme";
+import { get_next_color } from "@gradio/utils";
+import type { Config, TopLevelSpec as Spec } from "vega-lite";
+
+export function set_config(
+	spec: Spec,
+	computed_style: CSSStyleDeclaration,
+	chart_type: string,
+	colors: string[]
+): Spec {
+	let accentColor = computed_style.getPropertyValue("--color-accent");
+	let bodyTextColor = computed_style.getPropertyValue("--body-text-color");
+	let borderColorPrimary = computed_style.getPropertyValue(
+		"--border-color-primary"
+	);
+	let fontFamily = computed_style.fontFamily;
+	let titleWeight = computed_style.getPropertyValue(
+		"--block-title-text-weight"
+	) as "bold" | "normal" | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
+	const fontToPxVal = (font: string): number => {
+		return font.endsWith("px") ? parseFloat(font.slice(0, -2)) : 12;
+	};
+	let textSizeMd = fontToPxVal(computed_style.getPropertyValue("--text-md"));
+	let textSizeSm = fontToPxVal(computed_style.getPropertyValue("--text-sm"));
+	let config: Config = {
+		autosize: { type: "fit", contains: "padding" },
+		axis: {
+			labelFont: fontFamily,
+			labelColor: bodyTextColor,
+			titleFont: fontFamily,
+			titleColor: bodyTextColor,
+			tickColor: borderColorPrimary,
+			labelFontSize: textSizeSm,
+			gridColor: borderColorPrimary,
+			titleFontWeight: "normal",
+			titleFontSize: textSizeSm,
+			labelFontWeight: "normal",
+			domain: false,
+			labelAngle: 0
+		},
+		legend: {
+			labelColor: bodyTextColor,
+			labelFont: fontFamily,
+			titleColor: bodyTextColor,
+			titleFont: fontFamily,
+			titleFontWeight: "normal",
+			titleFontSize: textSizeSm,
+			labelFontWeight: "normal",
+			offset: 2
+		},
+		title: {
+			color: bodyTextColor,
+			font: fontFamily,
+			fontSize: textSizeMd,
+			fontWeight: titleWeight,
+			anchor: "middle"
+		},
+		view: {
+			stroke: borderColorPrimary
+		}
+	};
+	spec.config = config;
+	// @ts-ignore (unsure why the following are not typed in Spec)
+	let encoding: any = spec.encoding;
+	// @ts-ignore
+	let layer: any = spec.layer;
+	switch (chart_type) {
+		case "scatter":
+			spec.config.mark = { stroke: accentColor };
+			if (encoding.color && encoding.color.type == "nominal") {
+				encoding.color.scale.range = encoding.color.scale.range.map(
+					(_: string, i: number) => get_color(colors, i)
+				);
+			} else if (encoding.color && encoding.color.type == "quantitative") {
+				encoding.color.scale.range = ["#eff6ff", "#1e3a8a"];
+				encoding.color.scale.range.interpolate = "hsl";
+			}
+			break;
+		case "line":
+			spec.config.mark = { stroke: accentColor, cursor: "crosshair" };
+			layer.forEach((d: any) => {
+				if (d.encoding.color) {
+					d.encoding.color.scale.range = d.encoding.color.scale.range.map(
+						(_: any, i: any) => get_color(colors, i)
+					);
+				}
+			});
+			break;
+		case "bar":
+			spec.config.mark = { opacity: 0.8, fill: accentColor };
+			if (encoding.color) {
+				encoding.color.scale.range = encoding.color.scale.range.map(
+					(_: any, i: any) => get_color(colors, i)
+				);
+			}
+			break;
+	}
+	return spec;
+}
+
+function get_color(colors: string[], index: number): string {
+	let current_color = colors[index % colors.length];
+
+	if (current_color && current_color in color_palette) {
+		return color_palette[current_color as keyof typeof color_palette]?.primary;
+	} else if (!current_color) {
+		return color_palette[get_next_color(index) as keyof typeof color_palette]
+			.primary;
+	}
+	return current_color;
+}

src/pyproject.toml

@@ -0,0 +1,55 @@
+[build-system]
+requires = [
+  "hatchling",
+  "hatch-requirements-txt",
+  "hatch-fancy-pypi-readme>=22.5.0",
+]
+build-backend = "hatchling.build"
+
+[project]
+name = "gradio_msaplot"
+version = "0.0.1"
+description = "MSAplot is customizable panels for plotting MSA, seqlogo, annotation, and consensus histograms."
+readme = "README.md"
+license = "mit"
+requires-python = ">=3.6"
+authors = [{ name = "Joseph Pollack", email = "tonic@tonic-ai.com" }]
+keywords = ["gradio-custom-component", "gradio-template-Plot", "med", "medicine", "bio", "biology", "chem", "chemistry", "MSA", "multiple sequence alignment", "seqlogo", "annotation", "consensus histogram", "visualize"]
+# Add dependencies here
+dependencies = [
+  "gradio>=4.0,<6.0",
+  "seaborn>=0.9",
+  "matplotlib>=2.2.2"
+]
+classifiers = [
+  'Development Status :: 3 - Alpha',
+  'Operating System :: OS Independent',
+  'Programming Language :: Python :: 3',
+  'Programming Language :: Python :: 3 :: Only',
+  'Programming Language :: Python :: 3.8',
+  'Programming Language :: Python :: 3.9',
+  'Programming Language :: Python :: 3.10',
+  'Programming Language :: Python :: 3.11',
+  'Topic :: Scientific/Engineering',
+  'Topic :: Scientific/Engineering :: Artificial Intelligence',
+  'Topic :: Scientific/Engineering :: Visualization',
+]
+
+# The repository and space URLs are optional, but recommended.
+# Adding a repository URL will create a badge in the auto-generated README that links to the repository.
+# Adding a space URL will create a badge in the auto-generated README that links to the space.
+# This will make it easy for people to find your deployed demo or source code when they
+# encounter your project in the wild.
+
+[project.urls]
+repository = "https://github.com/Josephrp/GradioMSAPlot.git"
+space = "https://huggingface.co/spaces/seq-to-pheno/MSAPlot"
+
+[project.optional-dependencies]
+dev = ["build", "twine"]
+
+[tool.hatch.build]
+artifacts = ["/backend/gradio_msaplot/templates", "*.pyi"]
+
+[tool.hatch.build.targets.wheel]
+packages = ["/backend/gradio_msaplot"]