syd 0.1.7__py3-none-any.whl → 0.2.0__py3-none-any.whl

syd-0.2.0.dist-info/METADATA

@@ -0,0 +1,126 @@
+Metadata-Version: 2.4
+Name: syd
+Version: 0.2.0
+Summary: A Python package for making GUIs for data science easy.
+Project-URL: Homepage, https://github.com/landoskape/syd
+Author-email: Andrew Landau <andrew+tyler+landau+getridofthisanddtheplusses@gmail.com>
+License-Expression: GPL-3.0-or-later
+License-File: LICENSE
+Keywords: data-science,gui,interactive,jupyter,machine-learning,notebook,python
+Classifier: Development Status :: 4 - Beta
+Classifier: Intended Audience :: Developers
+Classifier: Intended Audience :: Science/Research
+Classifier: License :: OSI Approved :: GNU General Public License v3 or later (GPLv3+)
+Classifier: Operating System :: OS Independent
+Classifier: Programming Language :: Python :: 3.9
+Classifier: Programming Language :: Python :: 3.10
+Classifier: Programming Language :: Python :: 3.11
+Classifier: Programming Language :: Python :: 3.12
+Classifier: Programming Language :: Python :: 3.13
+Requires-Python: >=3.9
+Requires-Dist: flask
+Requires-Dist: ipykernel
+Requires-Dist: ipympl
+Requires-Dist: ipywidgets
+Requires-Dist: matplotlib
+Provides-Extra: test
+Requires-Dist: pytest-cov>=4.0.0; extra == 'test'
+Requires-Dist: pytest>=7.0.0; extra == 'test'
+Description-Content-Type: text/markdown
+
+# Syd
+
+[![PyPI version](https://badge.fury.io/py/syd.svg)](https://badge.fury.io/py/syd)
+[![Tests](https://github.com/landoskape/syd/actions/workflows/tests.yml/badge.svg)](https://github.com/landoskape/syd/actions/workflows/tests.yml)
+[![Documentation Status](https://readthedocs.org/projects/shareyourdata/badge/?version=stable)](https://shareyourdata.readthedocs.io/en/stable/?badge=stable)
+[![codecov](https://codecov.io/gh/landoskape/syd/branch/main/graph/badge.svg)](https://codecov.io/gh/landoskape/syd)
+[![Code style: black](https://img.shields.io/badge/code%20style-black-000000.svg)](https://github.com/psf/black)
+
+
+A package to help you share your data!
+
+Have you ever wanted to look through all your data really quickly interactively? Of course you have. Mo data mo problems, but only if you don't know what to do with it. And that's why Syd stands for show your data! 
+
+Syd is a system for creating a data viewing GUI that you can view in a jupyter notebook or in a web browser. And guess what? Since it can open in a web browser, you can even open it on any other computer on your local network! For example, your PI's computer. Gone are the days of single random examples that they make infinitely stubborn conclusions about. Now, you can look at all the examples, quickly and easily, on their computer. And that's why Syd stands for share your data!
+
+Okay, so what is it? Syd is an automated system to convert some basic python plotting code into an interactive GUI. This means you only have to think about _**what**_ you want to plot and _**which**_ parameters you want to be interactive. Syd handles all the behind-the-scenes action required to make an interface. And do you know what that means? It means you get to spend your time _thinking_ about your data, rather than writing code to look at it. And that's why Syd stands for Science, Yes! Dayummmm!
+
+## Installation
+It's easy, just use pip install. The dependencies are light so it should work in most environments.
+```bash
+pip install syd
+```
+
+## Quick Start
+This is an example of a sine wave viewer which is about as simple as it gets. You can choose which env to use - if you use ``env="notebook"`` then the GUI will deploy as the output of a jupyter cell (this only works in jupyter!). If you use ``env="browser"`` then the GUI will open a page in your default web browser and you can interact with the data there (works in jupyter notebooks and also from python scripts!).
+```python
+import matplotlib.pyplot as plt
+import numpy as np
+from syd import make_viewer
+def plot(viewer, state):
+    fig, ax = plt.subplots()
+    x = np.linspace(0, 10, 1000)
+    y = state['amplitude'] * np.sin(state['frequency'] * x)
+    ax.plot(x, y)
+    return fig
+        
+viewer = make_viewer()
+viewer.set_plot(plot)
+viewer.add_float('amplitude', value=1.0, min=0, max=2)
+viewer.add_float('frequency', value=1.0, min=0.1, max=5)
+
+# env = "browser" # for viewing in a web browser
+env = "notebook" # for viewing within a jupyter notebook
+viewer.deploy(env=env)
+```
+
+We have several examples of more complex viewers in the [examples](examples) folder. A good one to start with is the [simple example](examples/1-simple_example.ipynb) because this has detailed explanations of how to use the core elements of Syd. To see an example that showcases everything you can do with Syd, try [complex example](examples/2a-complex_example.ipynb). And to see what the same viewer looks like when written as a class, check out [subclass example](examples/2b-subclass_example.ipynb). This format is pretty useful when you want complex functionality - for example if you want to add extra supporting methods for processing data and updating parameters that require more complex logic or if your data processing requires some clever preprocessing to make plotting fast. 
+
+#### Data loading
+Thinking about how to get data into a Syd viewer can be non-intuitive. For some examples that showcase different ways to get your data into a Syd viewer, check out the [data loading example](examples/3-data_loading.ipynb).
+
+## Documentation
+
+Full documentation is available at [shareyourdata.readthedocs.io](https://shareyourdata.readthedocs.io/).
+
+## License
+
+This project is licensed under the GNU General Public License v3.0 - see the [LICENSE](LICENSE) file for details.
+
+## Contributing
+
+Contributions are welcome! Here's how you can help:
+
+1. Fork the repository
+2. Create a new branch (`git checkout -b feature/amazing-feature`)
+3. Make your changes
+4. Run the tests (`pytest`)
+5. Commit your changes (`git commit -m 'Add amazing feature'`)
+6. Push to the branch (`git push origin feature/amazing-feature`)
+7. Open a Pull Request online
+
+Please make sure to update tests as appropriate and adhere to the existing coding style (black, line-length=88, other style guidelines not capture by black, generally following pep8 guidelines).
+
+
+## To-Do List
+- Layout controls
+  - [ ] Improve the display and make it look better
+  - [ ] Add a "save" button that saves the current state of the viewer to a json file
+  - [ ] Add a "load" button that loads the viewer state from a json file
+  - [ ] Add a "freeze" button that allows the user to update state variables without updating the plot until unfreezing
+  - [ ] Add a window for capturing any error messages that might be thrown by the plot function. Maybe we could have a little interface for looking at each one (up to a point) and the user could press a button to throw an error for the traceback. 
+- [ ] Consider "app_deployed" context for each deployer...
+- [ ] Consider the error messages and if they can be more informative and less opaque -- especially when debugging (e.g. when we always get routed to the decorators that check things...)
+- Notebook deployment debouncer: 
+  - [ ] Probably make this dependent on whether the user is in %matplotlib widget mode or not
+  - [ ] Also probably make it dependent on whether the deployer is in continuous mode or not
+  - [ ] Potentially make the wait_time dynamic depending on how fast the plot method is and how frequently the no comm messages show up... (if we can catch them)
+- [ ] Consider adding a step to the integer parameter...
+- Idea for figure management:
+  - [ ] We could make fig=?, ax=? arguments optional for the plot function and add a
+    "recycle_figure: bool = False" flag be part of the deploy API. This way, an
+    advanced user that wants snappy responsivity or complex figure management can
+    do so, but the default is for the user to generate a new figure object each time.
+- Export options:
+  - [ ] Export lite: export the viewer as a HTML/Java package that contains an incomplete set of renderings of figures -- using a certain set of parameters.
+  - [ ] Export full: export the viewer in a way that contains the data to give full functionality.

syd-0.2.0.dist-info/RECORD

@@ -0,0 +1,19 @@
+syd/__init__.py,sha256=zvTnj6iGMWKHmfuwvTf6bt4A7laMPIJZgNmzVI7Ki3Y,250
+syd/parameters.py,sha256=8LUJz7YwaC1sHmf3q0SevxgT_x78vBBtIpkZbs-WrOU,43846
+syd/support.py,sha256=D-DbzyC1KfQlNYKGQTrDakPw2Yqqqa_Aqtk3bEIMYFw,5523
+syd/viewer.py,sha256=NiQ29y5Kgqfq66OF0Mx70bsm74o4WHeGS6XEbSk4avA,49118
+syd/flask_deployment/__init__.py,sha256=oEa9ttsX_uM27dGIhKKwgvVr-WsQYoD1tzahtRI4TMk,190
+syd/flask_deployment/deployer.py,sha256=ig7LBuIPNkydA31YQBlt0z6LrJzNFQLqyk0p3MexfGU,20518
+syd/flask_deployment/testing_principles.md,sha256=GyULM97sDeie8h3tSPoduOckdMNGyWuwm1RdHo5jzK0,10130
+syd/flask_deployment/static/__init__.py,sha256=ieWE8NKR-APw7h4Ge0ooZGk6wZrneSSs_1cMyTPbQSA,65
+syd/flask_deployment/static/css/styles.css,sha256=ADXqBfc9LaoteY44ZeUajoWluY6fMsh0aEPKtYYZSQM,4326
+syd/flask_deployment/static/js/viewer.js,sha256=LihDHzJBAs8KU6RREl4uN8KOhUibpydzWDRFWN9cz2g,22700
+syd/flask_deployment/templates/__init__.py,sha256=ieWE8NKR-APw7h4Ge0ooZGk6wZrneSSs_1cMyTPbQSA,65
+syd/flask_deployment/templates/index.html,sha256=CAk08WJQ95GcqGjcvXU2GwI7UfBLvyp0BMEUVz04MUQ,1593
+syd/notebook_deployment/__init__.py,sha256=0DZ-psAZBt6dx_a5Dc8wLK-rKTn8yDvTmQOcL6Le3l8,39
+syd/notebook_deployment/deployer.py,sha256=cURP4V3TU5LsB8EDZK_x6oqIqyQAMuojn1onwmf-9_s,11671
+syd/notebook_deployment/widgets.py,sha256=La-mFXyMRlGNgIZo3eWQ91NABVFBJMMLTL2zV5RK1pY,20060
+syd-0.2.0.dist-info/METADATA,sha256=MjOvWcKSGmPbiNjrY1zNHgqAHn_Jv482Gz5Lly50BBI,8025
+syd-0.2.0.dist-info/WHEEL,sha256=qtCwoSJWgHk21S1Kb4ihdzI2rlJ1ZKaIurTj_ngOhyQ,87
+syd-0.2.0.dist-info/licenses/LICENSE,sha256=YF6QR6Vjxcg5b_sYIyqkME7FZYau5TfEUGTG-0JeRK0,35129
+syd-0.2.0.dist-info/RECORD,,

syd/flask_deployment/components.py

@@ -1,510 +0,0 @@
-from abc import ABC, abstractmethod
-from typing import Any, Dict, Generic, List, TypeVar, Union, Callable, Optional
-from dataclasses import dataclass
-from html import escape
-
-from ..parameters import (
-    Parameter,
-    TextParameter,
-    SelectionParameter,
-    MultipleSelectionParameter,
-    BooleanParameter,
-    IntegerParameter,
-    FloatParameter,
-    IntegerRangeParameter,
-    FloatRangeParameter,
-    UnboundedIntegerParameter,
-    UnboundedFloatParameter,
-    ButtonAction,
-)
-
-T = TypeVar("T", bound=Parameter[Any])
-
-
-@dataclass
-class ComponentStyle:
-    """Style configuration for components."""
-
-    width: str = "auto"
-    margin: str = "3px 0px"
-    description_width: str = "initial"
-    input_class: str = "form-control"
-    label_class: str = "form-label"
-    container_class: str = "mb-3"
-
-
-class BaseComponent(Generic[T], ABC):
-    """
-    Abstract base class for all parameter components.
-
-    This class defines the common interface and shared functionality
-    for components that correspond to different parameter types.
-    """
-
-    _callbacks: List[Callable]
-    _is_action: bool = False
-    _value: Any
-    _id: str
-
-    def __init__(
-        self,
-        parameter: T,
-        continuous: bool = False,
-        style: Optional[ComponentStyle] = None,
-    ):
-        self._id = f"param_{parameter.name}"
-        self._value = parameter.value
-        self._callbacks = []
-        self._continuous = continuous
-        self._style = style or ComponentStyle()
-        self._html = self._create_html(parameter)
-
-    @abstractmethod
-    def _create_html(self, parameter: T) -> str:
-        """Create and return the appropriate HTML markup."""
-        pass
-
-    @property
-    def html(self) -> str:
-        """Get the HTML representation of the component."""
-        return self._html
-
-    @property
-    def value(self) -> Any:
-        """Get the current value of the component."""
-        return self._value
-
-    @value.setter
-    def value(self, new_value: Any) -> None:
-        """Set the value of the component."""
-        self._value = new_value
-        # In a real implementation, we'd use JavaScript to update the DOM
-        # This would be handled by the Flask app's frontend code
-
-    def matches_parameter(self, parameter: T) -> bool:
-        """Check if the component matches the parameter."""
-        return self.value == parameter.value
-
-    def update_from_parameter(self, parameter: T) -> None:
-        """Update the component from the parameter."""
-        try:
-            self.disable_callbacks()
-            self.extra_updates_from_parameter(parameter)
-            self.value = parameter.value
-        finally:
-            self.reenable_callbacks()
-
-    def extra_updates_from_parameter(self, parameter: T) -> None:
-        """Extra updates from the parameter."""
-        pass
-
-    def observe(self, callback: Callable) -> None:
-        """Register a callback for value changes."""
-        self._callbacks.append(callback)
-
-    def unobserve(self, callback: Callable) -> None:
-        """Unregister a callback."""
-        self._callbacks.remove(callback)
-
-    def reenable_callbacks(self) -> None:
-        """Reenable all callbacks."""
-        pass  # Handled by Flask routes and JavaScript
-
-    def disable_callbacks(self) -> None:
-        """Disable all callbacks."""
-        pass  # Handled by Flask routes and JavaScript
-
-
-class TextComponent(BaseComponent[TextParameter]):
-    """Component for text parameters."""
-
-    def _create_html(self, parameter: TextParameter) -> str:
-        return f"""
-        <div class="{self._style.container_class}">
-            <label for="{self._id}" class="{self._style.label_class}">{escape(parameter.name)}</label>
-            <input type="text" class="{self._style.input_class}" id="{self._id}" 
-                   name="{parameter.name}" value="{escape(str(parameter.value))}"
-                   style="width: {self._style.width}; margin: {self._style.margin};"
-                   data-continuous="{str(self._continuous).lower()}">
-        </div>
-        """
-
-
-class BooleanComponent(BaseComponent[BooleanParameter]):
-    """Component for boolean parameters."""
-
-    def _create_html(self, parameter: BooleanParameter) -> str:
-        checked = "checked" if parameter.value else ""
-        return f"""
-        <div class="{self._style.container_class}">
-            <div class="form-check">
-                <input type="checkbox" class="form-check-input" id="{self._id}"
-                       name="{parameter.name}" {checked}
-                       style="margin: {self._style.margin};"
-                       data-continuous="{str(self._continuous).lower()}">
-                <label class="form-check-label" for="{self._id}">
-                    {escape(parameter.name)}
-                </label>
-            </div>
-        </div>
-        """
-
-
-class SelectionComponent(BaseComponent[SelectionParameter]):
-    """Component for single selection parameters."""
-
-    def _create_html(self, parameter: SelectionParameter) -> str:
-        options_html = ""
-        for option in parameter.options:
-            selected = "selected" if option == parameter.value else ""
-            options_html += f'<option value="{escape(str(option))}" {selected}>{escape(str(option))}</option>'
-
-        return f"""
-        <div class="{self._style.container_class}">
-            <label for="{self._id}" class="{self._style.label_class}">{escape(parameter.name)}</label>
-            <select class="{self._style.input_class}" id="{self._id}" 
-                    name="{parameter.name}"
-                    style="width: {self._style.width}; margin: {self._style.margin};"
-                    data-continuous="{str(self._continuous).lower()}">
-                {options_html}
-            </select>
-        </div>
-        """
-
-    def matches_parameter(self, parameter: SelectionParameter) -> bool:
-        """Check if the component matches the parameter."""
-        return self.value == parameter.value and set(self._get_options()) == set(
-            parameter.options
-        )
-
-    def _get_options(self) -> List[Any]:
-        """Get current options from the HTML."""
-        # In a real implementation, this would parse the HTML
-        # For now, we'll just return an empty list
-        return []
-
-    def extra_updates_from_parameter(self, parameter: SelectionParameter) -> None:
-        """Extra updates from the parameter."""
-        # In a real implementation, this would update the options in the DOM
-        pass
-
-
-class MultipleSelectionComponent(BaseComponent[MultipleSelectionParameter]):
-    """Component for multiple selection parameters."""
-
-    def _create_html(self, parameter: MultipleSelectionParameter) -> str:
-        options_html = ""
-        for option in parameter.options:
-            selected = "selected" if option in parameter.value else ""
-            options_html += f'<option value="{escape(str(option))}" {selected}>{escape(str(option))}</option>'
-
-        return f"""
-        <div class="{self._style.container_class}">
-            <label for="{self._id}" class="{self._style.label_class}">{escape(parameter.name)}</label>
-            <select class="{self._style.input_class}" id="{self._id}" 
-                    name="{parameter.name}" multiple
-                    style="width: {self._style.width}; margin: {self._style.margin};"
-                    data-continuous="{str(self._continuous).lower()}">
-                {options_html}
-            </select>
-        </div>
-        """
-
-    def matches_parameter(self, parameter: MultipleSelectionParameter) -> bool:
-        """Check if the component matches the parameter."""
-        return set(self.value) == set(parameter.value) and set(
-            self._get_options()
-        ) == set(parameter.options)
-
-    def _get_options(self) -> List[Any]:
-        """Get current options from the HTML."""
-        # In a real implementation, this would parse the HTML
-        return []
-
-    def extra_updates_from_parameter(
-        self, parameter: MultipleSelectionParameter
-    ) -> None:
-        """Extra updates from the parameter."""
-        # In a real implementation, this would update the options in the DOM
-        pass
-
-
-class IntegerComponent(BaseComponent[IntegerParameter]):
-    """Component for integer parameters."""
-
-    def _create_html(self, parameter: IntegerParameter) -> str:
-        return f"""
-        <div class="{self._style.container_class}">
-            <label for="{self._id}" class="{self._style.label_class}">{escape(parameter.name)}</label>
-            <input type="range" class="{self._style.input_class}" id="{self._id}"
-                   name="{parameter.name}" value="{parameter.value}"
-                   min="{parameter.min_value}" max="{parameter.max_value}"
-                   style="width: {self._style.width}; margin: {self._style.margin};"
-                   data-continuous="{str(self._continuous).lower()}">
-            <output for="{self._id}">{parameter.value}</output>
-        </div>
-        """
-
-    def matches_parameter(self, parameter: IntegerParameter) -> bool:
-        """Check if the component matches the parameter."""
-        return (
-            self.value == parameter.value
-            and self._get_min() == parameter.min_value
-            and self._get_max() == parameter.max_value
-        )
-
-    def _get_min(self) -> int:
-        """Get minimum value from the HTML."""
-        return 0  # Placeholder
-
-    def _get_max(self) -> int:
-        """Get maximum value from the HTML."""
-        return 100  # Placeholder
-
-    def extra_updates_from_parameter(self, parameter: IntegerParameter) -> None:
-        """Extra updates from the parameter."""
-        # In a real implementation, this would update min/max in the DOM
-        pass
-
-
-class FloatComponent(BaseComponent[FloatParameter]):
-    """Component for float parameters."""
-
-    def _create_html(self, parameter: FloatParameter) -> str:
-        return f"""
-        <div class="{self._style.container_class}">
-            <label for="{self._id}" class="{self._style.label_class}">{escape(parameter.name)}</label>
-            <input type="range" class="{self._style.input_class}" id="{self._id}"
-                   name="{parameter.name}" value="{parameter.value}"
-                   min="{parameter.min_value}" max="{parameter.max_value}" step="{parameter.step}"
-                   style="width: {self._style.width}; margin: {self._style.margin};"
-                   data-continuous="{str(self._continuous).lower()}">
-            <output for="{self._id}">{parameter.value}</output>
-        </div>
-        """
-
-    def matches_parameter(self, parameter: FloatParameter) -> bool:
-        """Check if the component matches the parameter."""
-        return (
-            self.value == parameter.value
-            and self._get_min() == parameter.min_value
-            and self._get_max() == parameter.max_value
-            and self._get_step() == parameter.step
-        )
-
-    def _get_min(self) -> float:
-        """Get minimum value from the HTML."""
-        return 0.0  # Placeholder
-
-    def _get_max(self) -> float:
-        """Get maximum value from the HTML."""
-        return 1.0  # Placeholder
-
-    def _get_step(self) -> float:
-        """Get step value from the HTML."""
-        return 0.1  # Placeholder
-
-    def extra_updates_from_parameter(self, parameter: FloatParameter) -> None:
-        """Extra updates from the parameter."""
-        # In a real implementation, this would update min/max/step in the DOM
-        pass
-
-
-class IntegerRangeComponent(BaseComponent[IntegerRangeParameter]):
-    """Component for integer range parameters."""
-
-    def _create_html(self, parameter: IntegerRangeParameter) -> str:
-        low, high = parameter.value
-        return f"""
-        <div class="{self._style.container_class}">
-            <label for="{self._id}_low" class="{self._style.label_class}">{escape(parameter.name)}</label>
-            <div class="d-flex align-items-center">
-                <input type="range" class="{self._style.input_class}" id="{self._id}_low"
-                       name="{parameter.name}_low" value="{low}"
-                       min="{parameter.min_value}" max="{parameter.max_value}"
-                       style="width: {self._style.width}; margin: {self._style.margin};"
-                       data-continuous="{str(self._continuous).lower()}">
-                <output for="{self._id}_low">{low}</output>
-            </div>
-            <div class="d-flex align-items-center">
-                <input type="range" class="{self._style.input_class}" id="{self._id}_high"
-                       name="{parameter.name}_high" value="{high}"
-                       min="{parameter.min_value}" max="{parameter.max_value}"
-                       style="width: {self._style.width}; margin: {self._style.margin};"
-                       data-continuous="{str(self._continuous).lower()}">
-                <output for="{self._id}_high">{high}</output>
-            </div>
-        </div>
-        """
-
-    def matches_parameter(self, parameter: IntegerRangeParameter) -> bool:
-        """Check if the component matches the parameter."""
-        return (
-            self.value == parameter.value
-            and self._get_min() == parameter.min_value
-            and self._get_max() == parameter.max_value
-        )
-
-    def _get_min(self) -> int:
-        """Get minimum value from the HTML."""
-        return 0  # Placeholder
-
-    def _get_max(self) -> int:
-        """Get maximum value from the HTML."""
-        return 100  # Placeholder
-
-    def extra_updates_from_parameter(self, parameter: IntegerRangeParameter) -> None:
-        """Extra updates from the parameter."""
-        # In a real implementation, this would update min/max in the DOM
-        pass
-
-
-class FloatRangeComponent(BaseComponent[FloatRangeParameter]):
-    """Component for float range parameters."""
-
-    def _create_html(self, parameter: FloatRangeParameter) -> str:
-        low, high = parameter.value
-        return f"""
-        <div class="{self._style.container_class}">
-            <label for="{self._id}_low" class="{self._style.label_class}">{escape(parameter.name)}</label>
-            <div class="d-flex align-items-center">
-                <input type="range" class="{self._style.input_class}" id="{self._id}_low"
-                       name="{parameter.name}_low" value="{low}"
-                       min="{parameter.min_value}" max="{parameter.max_value}" step="{parameter.step}"
-                       style="width: {self._style.width}; margin: {self._style.margin};"
-                       data-continuous="{str(self._continuous).lower()}">
-                <output for="{self._id}_low">{low}</output>
-            </div>
-            <div class="d-flex align-items-center">
-                <input type="range" class="{self._style.input_class}" id="{self._id}_high"
-                       name="{parameter.name}_high" value="{high}"
-                       min="{parameter.min_value}" max="{parameter.max_value}" step="{parameter.step}"
-                       style="width: {self._style.width}; margin: {self._style.margin};"
-                       data-continuous="{str(self._continuous).lower()}">
-                <output for="{self._id}_high">{high}</output>
-            </div>
-        </div>
-        """
-
-    def matches_parameter(self, parameter: FloatRangeParameter) -> bool:
-        """Check if the component matches the parameter."""
-        return (
-            self.value == parameter.value
-            and self._get_min() == parameter.min_value
-            and self._get_max() == parameter.max_value
-            and self._get_step() == parameter.step
-        )
-
-    def _get_min(self) -> float:
-        """Get minimum value from the HTML."""
-        return 0.0  # Placeholder
-
-    def _get_max(self) -> float:
-        """Get maximum value from the HTML."""
-        return 1.0  # Placeholder
-
-    def _get_step(self) -> float:
-        """Get step value from the HTML."""
-        return 0.1  # Placeholder
-
-    def extra_updates_from_parameter(self, parameter: FloatRangeParameter) -> None:
-        """Extra updates from the parameter."""
-        # In a real implementation, this would update min/max/step in the DOM
-        pass
-
-
-class UnboundedIntegerComponent(BaseComponent[UnboundedIntegerParameter]):
-    """Component for unbounded integer parameters."""
-
-    def _create_html(self, parameter: UnboundedIntegerParameter) -> str:
-        return f"""
-        <div class="{self._style.container_class}">
-            <label for="{self._id}" class="{self._style.label_class}">{escape(parameter.name)}</label>
-            <input type="number" class="{self._style.input_class}" id="{self._id}"
-                   name="{parameter.name}" value="{parameter.value}"
-                   style="width: {self._style.width}; margin: {self._style.margin};"
-                   data-continuous="{str(self._continuous).lower()}">
-        </div>
-        """
-
-
-class UnboundedFloatComponent(BaseComponent[UnboundedFloatParameter]):
-    """Component for unbounded float parameters."""
-
-    def _create_html(self, parameter: UnboundedFloatParameter) -> str:
-        step = parameter.step if parameter.step is not None else "any"
-        return f"""
-        <div class="{self._style.container_class}">
-            <label for="{self._id}" class="{self._style.label_class}">{escape(parameter.name)}</label>
-            <input type="number" class="{self._style.input_class}" id="{self._id}"
-                   name="{parameter.name}" value="{parameter.value}" step="{step}"
-                   style="width: {self._style.width}; margin: {self._style.margin};"
-                   data-continuous="{str(self._continuous).lower()}">
-        </div>
-        """
-
-    def matches_parameter(self, parameter: UnboundedFloatParameter) -> bool:
-        """Check if the component matches the parameter."""
-        return self.value == parameter.value and self._get_step() == parameter.step
-
-    def _get_step(self) -> Optional[float]:
-        """Get step value from the HTML."""
-        return None  # Placeholder
-
-    def extra_updates_from_parameter(self, parameter: UnboundedFloatParameter) -> None:
-        """Extra updates from the parameter."""
-        # In a real implementation, this would update step in the DOM
-        pass
-
-
-class ButtonComponent(BaseComponent[ButtonAction]):
-    """Component for button parameters."""
-
-    _is_action: bool = True
-
-    def _create_html(self, parameter: ButtonAction) -> str:
-        return f"""
-        <div class="{self._style.container_class}">
-            <button type="button" class="btn btn-primary" id="{self._id}"
-                    name="{parameter.name}"
-                    style="width: {self._style.width}; margin: {self._style.margin};">
-                {escape(parameter.label)}
-            </button>
-        </div>
-        """
-
-    def matches_parameter(self, parameter: ButtonAction) -> bool:
-        """Check if the component matches the parameter."""
-        return True  # Buttons don't have a value to match
-
-    def extra_updates_from_parameter(self, parameter: ButtonAction) -> None:
-        """Extra updates from the parameter."""
-        # In a real implementation, this would update the button label in the DOM
-        pass
-
-
-def create_component(
-    parameter: Union[Parameter[Any], ButtonAction],
-    continuous: bool = False,
-    style: Optional[ComponentStyle] = None,
-) -> BaseComponent[Union[Parameter[Any], ButtonAction]]:
-    """Create the appropriate component for a parameter."""
-    component_map = {
-        TextParameter: TextComponent,
-        BooleanParameter: BooleanComponent,
-        SelectionParameter: SelectionComponent,
-        MultipleSelectionParameter: MultipleSelectionComponent,
-        IntegerParameter: IntegerComponent,
-        FloatParameter: FloatComponent,
-        IntegerRangeParameter: IntegerRangeComponent,
-        FloatRangeParameter: FloatRangeComponent,
-        UnboundedIntegerParameter: UnboundedIntegerComponent,
-        UnboundedFloatParameter: UnboundedFloatComponent,
-        ButtonAction: ButtonComponent,
-    }
-
-    for param_type, component_class in component_map.items():
-        if isinstance(parameter, param_type):
-            return component_class(parameter, continuous, style)
-
-    raise ValueError(f"No component available for parameter type: {type(parameter)}")