syd 1.0.1__tar.gz → 1.1.0__tar.gz

{syd-1.0.1 → syd-1.1.0}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: syd
-Version: 1.0.1
+Version: 1.1.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>
@@ -47,7 +47,7 @@ Have you ever wanted to look through all your data really quickly interactively?
 
 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 guess what? That 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!
+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 guess what? That 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.
@@ -56,13 +56,9 @@ pip install syd
 ```
 
 ## Documentation
-The full documentation is available at [shareyourdata.readthedocs.io](https://shareyourdata.readthedocs.io/). It includes a quick start guide, a comprehensive tutorial, and an API reference for the different elements of Syd. If you have any questions or want to suggest improvements to the docs, please let us know on the [github issues page](https://github.com/landoskape/syd/issues)!
+The full documentation is available [here](https://shareyourdata.readthedocs.io/). It includes a quick start guide, a comprehensive tutorial, and an API reference for the different elements of Syd. If you have any questions or want to suggest improvements to the docs, please let us know on the [github issues page](https://github.com/landoskape/syd/issues)!
 
 ## Quick Start
-<!-- <div style="float: right; margin-left: 100px; margin-bottom: 10px;">
-    <img src="./docs/assets/viewer_screenshots/readme_example_gif.gif" alt="Syd" width="300" align="right"/>
-</div> -->
-
 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
@@ -82,12 +78,12 @@ viewer.add_float("amplitude", value=1.0, min=0.1, max=2.0)
 viewer.add_float("frequency", value=1.0, min=0.1, max=5.0)
 viewer.add_selection("color", value="red", options=["red", "blue", "green", "black"])
 
-# env = "browser" # for viewing in a web browser (accessible via an IP address)
-env = "notebook" # for viewing within a jupyter notebook
-viewer = viewer.deploy(env=env)
+viewer.show() # for viewing in a jupyter notebook
+# viewer.share() # for viewing in a web browser
 ```
 
 ![Quick Start Viewer](./docs/assets/viewer_screenshots/readme_example_gif.gif)
+
 ### More Examples
 We have several examples of more complex viewers with detailed explanations in the comments. Here are the links and descriptions to each of them:
 
@@ -101,7 +97,7 @@ We have several examples of more complex viewers with detailed explanations in t
 
 
 ### 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). Or, if you just want a quick example, check this out:
+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). Or, if you just want a quick and fast example, check this one out:
 ```python
 import numpy as np
 from matplotlib import pyplot as plt
@@ -122,15 +118,15 @@ def plot(state):
 # Since plot "knows" about the data variable, all you need to do is pass the plot
 # function to the syd viewer and it'll be able to access the data once deployed!
 viewer = make_viewer(plot)
-viewer.deploy(env="browser")
+viewer.show()
 ```
 
 ### Handling Hierarchical Callbacks
-Syd dramatically reduces the amount of work you need to do to build a GUI for viewing your data. However, it can still be a bit complicated to think about callbacks. Below is a quick demonstration, to try it yourself, check out the full example [here](examples/4-hierarchical_callbacks.ipynb).
+Syd dramatically reduces the amount of work you need to do to build a GUI for viewing your data. However, it can still be a bit complicated to think about callbacks. Below is a quick demonstration. To try it yourself, check out the full example [here](examples/4-hierarchical_callbacks.ipynb) or open it in colab [![Open In Colab](https://colab.research.google.com/assets/colab-badge.svg)](https://colab.research.google.com/github/landoskape/syd/blob/main/examples/4-hierarchical_callbacks.ipynb).
 
-For example, suppose your dataset is composed of electrophysiology recordings from 3 mice, where each mouse has a different number of sesssions, and each session has a different number of neurons. You want to build a viewer to choose the mouse, then choose the session, and then view a particular neuron from within that session. But the viewer will break if you try to index to session 5 for mouse 2 but mouse 2 only has 4 sessions!
+For example, suppose your dataset is composed of electrophysiology recordings from 3 mice, where each mouse has a different number of sesssions, and each session has a different number of neurons. You want to build a viewer to view a particular neuron from a particular session from a particular mouse. But the viewer will break if you try to index to session 5 for mouse 2 when mouse 2 has less than 5 sessions!
 
-This is where hierarchical callbacks come in. There's a straightforward pattern to handling this kind of situation that you can follow. You can write a callback for each **level** of the hierarchy. Then, each callback can call the next callback in the hierarchy. It looks like this: 
+This is where hierarchical callbacks come in. There's a straightforward pattern to handling this kind of situation that you can follow. You can write a callback for each **level** of the hierarchy. Then, each callback can **update** the state and call the next callback in the hierarchy once it's finished. It looks like this: 
 ```python
 import numpy as np
 from syd import Viewer # Much easier to build a Viewer class for hierarchical callbacks
@@ -141,19 +137,22 @@ class MouseViewer(Viewer):
 
         self.add_selection("mouse", options=list(mice_names))
 
-        # We don't know how many sessions or neurons to pick from yet!
+        # We don't know how many sessions or neurons to pick from yet,
+        # so just set the max to 1 for now.
         self.add_integer("session", min=0, max=1)
         self.add_integer("neuron", min=0, max=1)
         
-        # Any time the mouse changes, update the sessions to pick from
+        # Any time the mouse changes, update the sessions to pick from!
         self.on_change("mouse", self.update_mouse)
 
-        # Any time the session changes, update the neurons to pick from
+        # Any time the session changes, update the neurons to pick from!
         self.on_change("session", self.update_session)
 
         # Since we built callbacks for setting the range of the session
-        # and neuron parameters, we can use them here!
-        # To get the state, we can use self.state, which is the current
+        # and neuron parameters, we can use them here so the viewer is
+        # fully ready and up to date.
+
+        # To get the state, use self.state, which is the current
         # state of the viewer (in the init function, it'll just be the
         # default value for each parameter you've added already).
         self.update_mouse(self.state)
@@ -166,9 +165,13 @@ class MouseViewer(Viewer):
         self.update_integer("session", max=num_sessions - 1)
 
         # Now we need to update the neurons to choose from ....
-        # But! Updating the session parameter might trigger a change to the
-        # session value. So, instead of using the state dictionary that was
-        # passed into the function, we can get the ~NEW~ state dictionary like this:
+
+        # But! Updating the session parameter's max value might trigger a change
+        # to the current session value. This ~won't be reflected~ in the state 
+        # dictionary that was passed to this function.
+        
+        # So, we need to load the ~NEW~ state dictionary, which is always 
+        # accessible as self.state (or viewer.state if you're not using a class).
         new_state = self.state
 
         # Then perform the session update callback!
@@ -189,7 +192,7 @@ class MouseViewer(Viewer):
 
 # Now we can create a viewer and deploy it
 viewer = MouseViewer(["Mouse 1", "Mouse 2", "Mouse 3"])
-viewer.deploy(env="browser")
+viewer.show()
 ```
 
 ## License
@@ -216,7 +219,6 @@ black . # from the root directory of the repo
 
 ## 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
@@ -225,4 +227,6 @@ black . # from the root directory of the repo
 - 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.
-- [ ] Keep deploy() for backwards compatibility, but deprecate it in favor of show() and share() (for notebook and browser, respectively)
+- [ ] Idea for sharing: https://github.com/analyticalmonk/awesome-neuroscience, https://github.com/fasouto/awesome-dataviz
+- [ ] The handling of value in Selection parameters is kind of weird.... I think we need to think more about what to do for fails!!!!
+- [ ] Range parameters render poorly in browser mode. 

{syd-1.0.1 → syd-1.1.0}/README.md

@@ -17,7 +17,7 @@ Have you ever wanted to look through all your data really quickly interactively?
 
 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 guess what? That 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!
+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 guess what? That 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.
@@ -26,13 +26,9 @@ pip install syd
 ```
 
 ## Documentation
-The full documentation is available at [shareyourdata.readthedocs.io](https://shareyourdata.readthedocs.io/). It includes a quick start guide, a comprehensive tutorial, and an API reference for the different elements of Syd. If you have any questions or want to suggest improvements to the docs, please let us know on the [github issues page](https://github.com/landoskape/syd/issues)!
+The full documentation is available [here](https://shareyourdata.readthedocs.io/). It includes a quick start guide, a comprehensive tutorial, and an API reference for the different elements of Syd. If you have any questions or want to suggest improvements to the docs, please let us know on the [github issues page](https://github.com/landoskape/syd/issues)!
 
 ## Quick Start
-<!-- <div style="float: right; margin-left: 100px; margin-bottom: 10px;">
-    <img src="./docs/assets/viewer_screenshots/readme_example_gif.gif" alt="Syd" width="300" align="right"/>
-</div> -->
-
 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
@@ -52,12 +48,12 @@ viewer.add_float("amplitude", value=1.0, min=0.1, max=2.0)
 viewer.add_float("frequency", value=1.0, min=0.1, max=5.0)
 viewer.add_selection("color", value="red", options=["red", "blue", "green", "black"])
 
-# env = "browser" # for viewing in a web browser (accessible via an IP address)
-env = "notebook" # for viewing within a jupyter notebook
-viewer = viewer.deploy(env=env)
+viewer.show() # for viewing in a jupyter notebook
+# viewer.share() # for viewing in a web browser
 ```
 
 ![Quick Start Viewer](./docs/assets/viewer_screenshots/readme_example_gif.gif)
+
 ### More Examples
 We have several examples of more complex viewers with detailed explanations in the comments. Here are the links and descriptions to each of them:
 
@@ -71,7 +67,7 @@ We have several examples of more complex viewers with detailed explanations in t
 
 
 ### 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). Or, if you just want a quick example, check this out:
+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). Or, if you just want a quick and fast example, check this one out:
 ```python
 import numpy as np
 from matplotlib import pyplot as plt
@@ -92,15 +88,15 @@ def plot(state):
 # Since plot "knows" about the data variable, all you need to do is pass the plot
 # function to the syd viewer and it'll be able to access the data once deployed!
 viewer = make_viewer(plot)
-viewer.deploy(env="browser")
+viewer.show()
 ```
 
 ### Handling Hierarchical Callbacks
-Syd dramatically reduces the amount of work you need to do to build a GUI for viewing your data. However, it can still be a bit complicated to think about callbacks. Below is a quick demonstration, to try it yourself, check out the full example [here](examples/4-hierarchical_callbacks.ipynb).
+Syd dramatically reduces the amount of work you need to do to build a GUI for viewing your data. However, it can still be a bit complicated to think about callbacks. Below is a quick demonstration. To try it yourself, check out the full example [here](examples/4-hierarchical_callbacks.ipynb) or open it in colab [![Open In Colab](https://colab.research.google.com/assets/colab-badge.svg)](https://colab.research.google.com/github/landoskape/syd/blob/main/examples/4-hierarchical_callbacks.ipynb).
 
-For example, suppose your dataset is composed of electrophysiology recordings from 3 mice, where each mouse has a different number of sesssions, and each session has a different number of neurons. You want to build a viewer to choose the mouse, then choose the session, and then view a particular neuron from within that session. But the viewer will break if you try to index to session 5 for mouse 2 but mouse 2 only has 4 sessions!
+For example, suppose your dataset is composed of electrophysiology recordings from 3 mice, where each mouse has a different number of sesssions, and each session has a different number of neurons. You want to build a viewer to view a particular neuron from a particular session from a particular mouse. But the viewer will break if you try to index to session 5 for mouse 2 when mouse 2 has less than 5 sessions!
 
-This is where hierarchical callbacks come in. There's a straightforward pattern to handling this kind of situation that you can follow. You can write a callback for each **level** of the hierarchy. Then, each callback can call the next callback in the hierarchy. It looks like this: 
+This is where hierarchical callbacks come in. There's a straightforward pattern to handling this kind of situation that you can follow. You can write a callback for each **level** of the hierarchy. Then, each callback can **update** the state and call the next callback in the hierarchy once it's finished. It looks like this: 
 ```python
 import numpy as np
 from syd import Viewer # Much easier to build a Viewer class for hierarchical callbacks
@@ -111,19 +107,22 @@ class MouseViewer(Viewer):
 
         self.add_selection("mouse", options=list(mice_names))
 
-        # We don't know how many sessions or neurons to pick from yet!
+        # We don't know how many sessions or neurons to pick from yet,
+        # so just set the max to 1 for now.
         self.add_integer("session", min=0, max=1)
         self.add_integer("neuron", min=0, max=1)
         
-        # Any time the mouse changes, update the sessions to pick from
+        # Any time the mouse changes, update the sessions to pick from!
         self.on_change("mouse", self.update_mouse)
 
-        # Any time the session changes, update the neurons to pick from
+        # Any time the session changes, update the neurons to pick from!
         self.on_change("session", self.update_session)
 
         # Since we built callbacks for setting the range of the session
-        # and neuron parameters, we can use them here!
-        # To get the state, we can use self.state, which is the current
+        # and neuron parameters, we can use them here so the viewer is
+        # fully ready and up to date.
+
+        # To get the state, use self.state, which is the current
         # state of the viewer (in the init function, it'll just be the
         # default value for each parameter you've added already).
         self.update_mouse(self.state)
@@ -136,9 +135,13 @@ class MouseViewer(Viewer):
         self.update_integer("session", max=num_sessions - 1)
 
         # Now we need to update the neurons to choose from ....
-        # But! Updating the session parameter might trigger a change to the
-        # session value. So, instead of using the state dictionary that was
-        # passed into the function, we can get the ~NEW~ state dictionary like this:
+
+        # But! Updating the session parameter's max value might trigger a change
+        # to the current session value. This ~won't be reflected~ in the state 
+        # dictionary that was passed to this function.
+        
+        # So, we need to load the ~NEW~ state dictionary, which is always 
+        # accessible as self.state (or viewer.state if you're not using a class).
         new_state = self.state
 
         # Then perform the session update callback!
@@ -159,7 +162,7 @@ class MouseViewer(Viewer):
 
 # Now we can create a viewer and deploy it
 viewer = MouseViewer(["Mouse 1", "Mouse 2", "Mouse 3"])
-viewer.deploy(env="browser")
+viewer.show()
 ```
 
 ## License
@@ -186,7 +189,6 @@ black . # from the root directory of the repo
 
 ## 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
@@ -195,4 +197,6 @@ black . # from the root directory of the repo
 - 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.
-- [ ] Keep deploy() for backwards compatibility, but deprecate it in favor of show() and share() (for notebook and browser, respectively)
+- [ ] Idea for sharing: https://github.com/analyticalmonk/awesome-neuroscience, https://github.com/fasouto/awesome-dataviz
+- [ ] The handling of value in Selection parameters is kind of weird.... I think we need to think more about what to do for fails!!!!
+- [ ] Range parameters render poorly in browser mode. 

syd-1.1.0/syd/__init__.py

@@ -0,0 +1,3 @@
+__version__ = "1.1.0"
+
+from .viewer import make_viewer, Viewer

{syd-1.0.1 → syd-1.1.0}/syd/flask_deployment/deployer.py

@@ -48,7 +48,7 @@ class FlaskLayoutConfig:
     """Configuration for the Flask viewer layout."""
 
     controls_position: str = "left"  # Options are: 'left', 'top', 'right', 'bottom'
-    controls_width_percent: int = 30
+    controls_width_percent: int = 15
 
     def __post_init__(self):
         valid_positions = ["left", "top", "right", "bottom"]
@@ -73,12 +73,13 @@ class FlaskDeployer:
         viewer: Viewer,
         controls_position: str = "left",
         fig_dpi: int = 300,
-        controls_width_percent: int = 20,
+        controls_width_percent: int = 15,
         suppress_warnings: bool = True,
         debug: bool = False,
         host: str = "127.0.0.1",
         port: Optional[int] = None,
         open_browser: bool = True,
+        update_threshold: float = 1.0,
     ):
         """
         Initialize the Flask deployer.
@@ -107,10 +108,13 @@ class FlaskDeployer:
             Port for the server. If None, finds an available port (default: None).
         open_browser : bool, optional
             Whether to open the web application in a browser tab (default: True).
+        update_threshold : float, optional
+            Time in seconds to wait before showing the loading indicator (default: 1.0)
         """
         self.viewer = viewer
         self.suppress_warnings = suppress_warnings
         self._updating = False  # Flag to check circular updates
+        self.update_threshold = update_threshold  # Store update threshold
 
         # Flask specific configurations
         self.config = FlaskLayoutConfig(
@@ -167,12 +171,17 @@ class FlaskDeployer:
             }
             # Get the order of parameters
             param_order = list(self.viewer.parameters.keys())
-            # Also include the initial state
+            # Also include the initial state and configuration
             return jsonify(
                 {
                     "params": param_info,
                     "param_order": param_order,
                     "state": self.viewer.state,
+                    "config": {
+                        "controls_position": self.config.controls_position,
+                        "controls_width_percent": self.config.controls_width_percent,
+                        "update_threshold": self.update_threshold,
+                    },
                 }
             )
 

{syd-1.0.1 → syd-1.1.0}/syd/flask_deployment/static/css/styles.css

@@ -60,14 +60,14 @@ body {
 #controls-container {
     display: grid;
     grid-template-columns: 1fr;
-    gap: 10px;
+    gap: 5px;
 }
 
 /* Control groups */
 .control-group {
     display: flex;
     flex-direction: column;
-    padding: 10px;
+    padding: 7px;
     border: 1px solid #eee;
     border-radius: 4px;
     background-color: white;
@@ -76,7 +76,7 @@ body {
 
 .control-label {
     font-weight: 600;
-    margin-bottom: 10px;
+    margin-bottom: 0px;
     color: #333;
     text-transform: capitalize;
 }
@@ -87,7 +87,7 @@ input[type="number"] {
     padding: 8px 12px;
     border: 1px solid #ddd;
     border-radius: 4px;
-    font-size: 14px;
+    font-size: 12px;
     width: 100%;
     box-sizing: border-box;
 }
@@ -95,11 +95,11 @@ input[type="number"] {
 /* Range inputs */
 input[type="range"] {
     width: 100%;
-    height: 6px;
+    height: 12px;
     background: #ddd;
     border-radius: 3px;
     outline: none;
-    margin: 10px 0;
+    margin: 5px 0;
 }
 
 input[type="range"]::-webkit-slider-thumb {
@@ -194,7 +194,7 @@ button.active {
 .range-inputs {
     display: flex;
     justify-content: space-between;
-    margin-bottom: 10px;
+    margin-bottom: 5px;
 }
 
 .range-input {
@@ -204,7 +204,7 @@ button.active {
 
 .range-slider-container {
     position: relative;
-    margin: 10px 0;
+    margin: 5px 0;
     background: linear-gradient(to right,
         #ddd 0%,
         #ddd var(--min-pos, 0%),
@@ -277,4 +277,22 @@ button.active {
 
 .max-slider {
     z-index: 2;
+}
+
+#status-display {
+    margin-top: 10px;
+    margin-bottom: 3px;
+    padding: 8px;
+    border-radius: 4px;
+    background-color: #ffffff;
+    border: 1px solid #e5e7eb;
+}
+
+.status-message {
+    background-color: #e0e0e0;
+    color: #000;
+    padding: 2px 6px;
+    border-radius: 4px;
+    font-size: 90%;
+    margin-left: 8px;
 }

syd-1.1.0/syd/flask_deployment/static/css/viewer.css

@@ -0,0 +1,90 @@
+#viewer-container {
+    width: 100%;
+    max-width: 100%;
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    display: flex;
+}
+
+#controls-container {
+    padding: 15px;
+    box-sizing: border-box;
+    overflow-y: auto;
+    max-height: 100vh;
+}
+
+#plot-container {
+    padding: 15px;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+#plot-container img {
+    max-width: 100%;
+    height: auto;
+}
+
+.system-controls {
+    margin: 10px 0px;
+    padding: 10px;
+    background-color: #ffffff;
+    border: 1px solid #e5e7eb;
+    border-radius: 4px;
+}
+
+.parameter-controls {
+    padding: 10px;
+    background-color: #ffffff;
+    border: 1px solid #e5e7eb;
+    border-radius: 4px;
+}
+
+.section-header {
+    margin-bottom: 15px;
+    font-size: 16px;
+}
+
+/* Style all numeric controls consistently */
+.numeric-control {
+    display: flex;
+    align-items: center;
+}
+
+.numeric-control input[type="range"] {
+    flex: 1;
+    -webkit-appearance: none;
+    appearance: none;
+    height: 6px;
+    background: #ddd;
+    outline: none;
+    border-radius: 3px;
+}
+
+.numeric-control input[type="range"]::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 16px;
+    height: 16px;
+    background: #4a90e2;
+    cursor: pointer;
+    border-radius: 50%;
+}
+
+.numeric-control input[type="range"]::-moz-range-thumb {
+    width: 16px;
+    height: 16px;
+    background: #4a90e2;
+    cursor: pointer;
+    border-radius: 50%;
+    border: none;
+}
+
+.numeric-control input[type="number"] {
+    width: 60px;
+    padding: 1px 1px;
+    border: 1px solid #ddd;
+    border-radius: 1px;
+}