syd 1.0.2__tar.gz → 1.2.0__tar.gz

{syd-1.0.2 → syd-1.2.0}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: syd
-Version: 1.0.2
+Version: 1.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>
@@ -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,7 +56,7 @@ 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
 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!).
@@ -78,9 +78,8 @@ 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
-env = "notebook" # for viewing within a jupyter notebook
-viewer.show()
+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)
@@ -202,7 +201,21 @@ This project is licensed under the GNU General Public License v3.0 - see the [LI
 
 ## Contributing
 
-Contributions are welcome! Here's how you can help:
+Contributions are welcome! If you have an idea for an improvement or a bug report, please let us know by opening an
+issue on the [github issues page](https://github.com/landoskape/syd/issues). You can also contribute code by submitting
+a pull request. Here are some guidelines for contributing:
+
+### 1. Reporting Bugs
+If you find a bug, (e.g. any error or strange behavior that is not expected), please let us know by opening an issue on the [github issues page](https://github.com/landoskape/syd/issues).
+
+### 2. Suggesting Features
+If you have an idea for a feature or improvement, please let tell us. Opening an issue on the [github issues page](https://github.com/landoskape/syd/issues).
+
+### 3. Improvements to the Documentation
+A package is only as good as its documentation. If you think the documentation is missing something, confusing, or could be improved in any way, please let us know by opening an issue on the [github issues page](https://github.com/landoskape/syd/issues).
+
+### 4. Contributing Code
+If you want to contribute code (good for you!), here's how you can do it:
 
 1. Fork the repository
 2. Create a new branch (`git checkout -b feature/amazing-feature`)
@@ -212,7 +225,7 @@ Contributions are welcome! Here's how you can help:
 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). Try to make the code coverage report improve or stay the same rather than decrease (right now the deployment system isn't covered by tests). I don't have any precommit hooks or anything so you're responsible for checking this yourself. You can process the code with black as follows:
+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). Try to make the code coverage report improve or stay the same rather than decrease (right now the deployment system isn't covered by tests). There aren't any precommit hooks or anything so you're responsible for checking this yourself. You can process the code with black as follows:
 ```bash
 pip install black
 black . # from the root directory of the repo
@@ -220,7 +233,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
@@ -228,4 +240,6 @@ black . # from the root directory of the repo
 - [ ] Consider "app_deployed" context for each deployer...
 - 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.
+  - [ ] Export full: export the viewer in a way that contains the data to give full functionality.
+- [ ] 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!!!!

{syd-1.0.2 → syd-1.2.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,7 +26,7 @@ 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
 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!).
@@ -48,9 +48,8 @@ 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
-env = "notebook" # for viewing within a jupyter notebook
-viewer.show()
+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)
@@ -172,7 +171,21 @@ This project is licensed under the GNU General Public License v3.0 - see the [LI
 
 ## Contributing
 
-Contributions are welcome! Here's how you can help:
+Contributions are welcome! If you have an idea for an improvement or a bug report, please let us know by opening an
+issue on the [github issues page](https://github.com/landoskape/syd/issues). You can also contribute code by submitting
+a pull request. Here are some guidelines for contributing:
+
+### 1. Reporting Bugs
+If you find a bug, (e.g. any error or strange behavior that is not expected), please let us know by opening an issue on the [github issues page](https://github.com/landoskape/syd/issues).
+
+### 2. Suggesting Features
+If you have an idea for a feature or improvement, please let tell us. Opening an issue on the [github issues page](https://github.com/landoskape/syd/issues).
+
+### 3. Improvements to the Documentation
+A package is only as good as its documentation. If you think the documentation is missing something, confusing, or could be improved in any way, please let us know by opening an issue on the [github issues page](https://github.com/landoskape/syd/issues).
+
+### 4. Contributing Code
+If you want to contribute code (good for you!), here's how you can do it:
 
 1. Fork the repository
 2. Create a new branch (`git checkout -b feature/amazing-feature`)
@@ -182,7 +195,7 @@ Contributions are welcome! Here's how you can help:
 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). Try to make the code coverage report improve or stay the same rather than decrease (right now the deployment system isn't covered by tests). I don't have any precommit hooks or anything so you're responsible for checking this yourself. You can process the code with black as follows:
+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). Try to make the code coverage report improve or stay the same rather than decrease (right now the deployment system isn't covered by tests). There aren't any precommit hooks or anything so you're responsible for checking this yourself. You can process the code with black as follows:
 ```bash
 pip install black
 black . # from the root directory of the repo
@@ -190,7 +203,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
@@ -198,4 +210,6 @@ black . # from the root directory of the repo
 - [ ] Consider "app_deployed" context for each deployer...
 - 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.
+  - [ ] Export full: export the viewer in a way that contains the data to give full functionality.
+- [ ] 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!!!!

syd-1.2.0/syd/__init__.py

@@ -0,0 +1,4 @@
+__version__ = "1.2.0"
+
+from .viewer import make_viewer, Viewer
+from .support import show_open_servers, close_servers

{syd-1.0.2 → syd-1.2.0}/syd/flask_deployment/deployer.py

@@ -6,7 +6,6 @@ from dataclasses import dataclass
 import matplotlib as mpl
 import matplotlib.pyplot as plt
 import io
-import time
 import webbrowser
 import threading
 import socket
@@ -20,7 +19,7 @@ from flask import (
     jsonify,
     render_template,
 )
-from werkzeug.serving import run_simple
+from werkzeug.serving import make_server
 
 # Use Deployer base class
 from ..viewer import Viewer
@@ -43,12 +42,61 @@ from ..support import ParameterUpdateWarning, plot_context
 mpl.use("Agg")
 
 
+class ServerManager:
+    def __init__(self):
+        self.servers: dict[int, "ServerThread"] = {}
+
+    def register_server(self, server: "ServerThread", port: int):
+        self.servers[port] = server
+
+    def close_app(self, port: int | None = None):
+        if port is None:
+            for server in self.servers.values():
+                server.shutdown()
+            self.servers.clear()
+        else:
+            if port in self.servers:
+                self.servers[port].shutdown()
+                del self.servers[port]
+
+
+server_manager = ServerManager()
+
+
+class ServerThread(threading.Thread):
+    def __init__(self, host: str, port: int, app, debug: bool):
+        super().__init__(daemon=True)
+        self.server = make_server(host, port, app, threaded=True)
+        self.port = port
+        self.debug = debug
+        self.ready = threading.Event()
+
+        num_open_servers = len(server_manager.servers)
+        if num_open_servers >= 10:
+            open_servers = "\n".join([f"{port}" for port in server_manager.servers])
+            print(
+                f"\nYou have {num_open_servers} open servers!\n"
+                f"Open servers:\n{open_servers}\n"
+                "You can close them with syd.close_servers() or a particular one with syd.close_servers(port).\n"
+                "To see a list, use: syd.show_open_servers()."
+            )
+
+    def run(self):
+        server_manager.register_server(self, self.port)
+        self.ready.set()
+        self.server.serve_forever()
+
+    def shutdown(self):
+        # Call this to stop the server cleanly
+        self.server.shutdown()
+
+
 @dataclass
 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 +121,14 @@ 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,
+        timeout_threshold: float = 10.0,
     ):
         """
         Initialize the Flask deployer.
@@ -107,10 +157,16 @@ 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)
+        timeout_threshold : float, optional
+            Time in seconds to wait for the browser to open (default: 10.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
+        self.timeout_threshold = timeout_threshold  # Store timeout threshold
 
         # Flask specific configurations
         self.config = FlaskLayoutConfig(
@@ -167,12 +223,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,
+                    },
                 }
             )
 
@@ -315,7 +376,6 @@ class FlaskDeployer:
         host: str = "127.0.0.1",
         port: Optional[int] = None,
         open_browser: bool = True,
-        **kwargs,
     ) -> None:
         """Starts the Flask development server."""
         if not self.app:
@@ -329,26 +389,59 @@ class FlaskDeployer:
         self.url = f"http://{self.host}:{self.port}"
         print(f" * Syd Flask server running on {self.url}")
 
-        if open_browser:
-
-            def open_browser_tab():
-                time.sleep(1.0)
-                webbrowser.open(self.url)
-
-            threading.Thread(target=open_browser_tab, daemon=True).start()
-
-        # Run the Flask server using Werkzeug's run_simple
-        # Pass debug status to run_simple for auto-reloading
-        run_simple(
-            self.host,
-            self.port,
-            self.app,
-            use_reloader=self.debug,
-            use_debugger=self.debug,
-            **kwargs,
-        )
+        # if open_browser:
+
+        #     def wait_until_responsive(url, timeout=self.timeout_threshold):
+        #         start_time = time.time()
+        #         while time.time() - start_time < timeout:
+        #             try:
+        #                 r = requests.get(url, timeout=0.5)
+        #                 if r.status_code == 200:
+        #                     return True
+        #             except requests.exceptions.RequestException:
+        #                 pass
+        #             time.sleep(0.1)
+        #         return False
+
+        #     def open_browser_tab_when_ready():
+        #         if wait_until_responsive(self.url):
+        #             out = webbrowser.open(self.url, new=1, autoraise=True)
+        #         else:
+        #             print(
+        #                 f"Could not open browser: server at {self.url} not responding."
+        #                 f"Increase the timeout_threshold to fix this! It's set to {self.timeout_threshold} seconds."
+        #                 "You can do this from viewer.show(timeout_threshold=...) or in the FlaskDeployer constructor."
+        #                 "Also, this is unexpected so please report this issue on GitHub."
+        #             )
+
+        #     threading.Thread(target=open_browser_tab_when_ready, daemon=True).start()
+
+        # # Run the Flask server using Werkzeug's run_simple
+        # # Pass debug status to run_simple for auto-reloading
+        # run_simple(
+        #     self.host,
+        #     self.port,
+        #     self.app,
+        #     use_reloader=False,
+        #     use_debugger=self.debug,
+        # )
+
+        # 1) Spin up the server thread
+        srv_thread = ServerThread(self.host, self.port, self.app, debug=self.debug)
+        srv_thread.start()
+
+        # 2) Wait for the socket‐bind event (not for an HTTP 200)
+        if not srv_thread.ready.wait(timeout=self.timeout_threshold):
+            print(
+                f"[!] Server did not bind within {self.timeout_threshold:.1f}s; it may already be in use."
+            )
+        else:
+            # 3) Now we know the app is truly listening; open a focused window
+            if open_browser:
+                webbrowser.open(self.url, new=1, autoraise=True)
 
-    # --- Overridden Methods ---
+        # 4) Keep the thread handle around so you can call srv_thread.shutdown()
+        self._server_thread = srv_thread
 
     def deploy(self) -> None:
         """
@@ -598,7 +691,7 @@ class FlaskDeployer:
             )
 
 
-def _find_available_port(start_port=5000, max_attempts=100):
+def _find_available_port(start_port=5000, max_attempts=1000):
     """
     Find an available port starting from start_port.
     (Identical to original)

{syd-1.0.2 → syd-1.2.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,38 +87,13 @@ 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;
 }
 
-/* Range inputs */
 input[type="range"] {
     width: 100%;
-    height: 6px;
-    background: #ddd;
-    border-radius: 3px;
-    outline: none;
-    margin: 10px 0;
-}
-
-input[type="range"]::-webkit-slider-thumb {
-    -webkit-appearance: none;
-    width: 18px;
-    height: 18px;
-    border-radius: 50%;
-    background: #3f51b5;
-    cursor: pointer;
-    border: 1px solid #2c3e90;
-}
-
-input[type="range"]::-moz-range-thumb {
-    width: 18px;
-    height: 18px;
-    border-radius: 50%;
-    background: #3f51b5;
-    cursor: pointer;
-    border: 1px solid #2c3e90;
 }
 
 /* Checkbox styling */
@@ -184,6 +159,49 @@ button.active {
     font-style: italic;
 }
 
+/* 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: 4px 1px;
+    border: 1px solid #ddd;
+    border-radius: 1px;
+    margin-left: 6px;
+}
+
 /* Range slider styles */
 .range-container {
     display: flex;
@@ -194,7 +212,7 @@ button.active {
 .range-inputs {
     display: flex;
     justify-content: space-between;
-    margin-bottom: 10px;
+    margin-bottom: 5px;
 }
 
 .range-input {
@@ -204,77 +222,92 @@ button.active {
 
 .range-slider-container {
     position: relative;
-    margin: 10px 0;
-    background: linear-gradient(to right,
+    margin: 10px 0 15px 0;
+    background: linear-gradient(
+        to right,
         #ddd 0%,
         #ddd var(--min-pos, 0%),
-        #3f51b5 var(--min-pos, 0%),
-        #3f51b5 var(--max-pos, 100%),
+        #4a90e2 var(--min-pos, 0%),
+        #4a90e2 var(--max-pos, 100%),
         #ddd var(--max-pos, 100%),
         #ddd 100%);
-    border-radius: 3px;
-    height: 18px;
+    border-radius: 4px;
+    height: 6px;
+    width: 100%;
 }
 
 .range-slider {
     position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
+    top: 0;
     left: 0;
     width: 100%;
-    pointer-events: none;
-    -webkit-appearance: none;
+    height: 100%;
     appearance: none;
-    background: transparent;
+    -webkit-appearance: none;
     cursor: pointer;
+    background: none;
     margin: 0;
-    height: 18px;
+    padding: 0;
+    pointer-events: none;
 }
 
 /* Transparent Track for Webkit */
-.range-slider::-webkit-slider-runnable-track {
+.range-slider-container .range-slider::-webkit-slider-runnable-track {
     background: transparent;
-    border: none;
-    border-radius: 3px;
+    border-radius: 2px;
+    height: 8px;
 }
 
 /* Transparent Track for Firefox */
-.range-slider::-moz-range-track {
+.range-slider-container .range-slider::-moz-range-track {
     background: transparent;
-    border: none;
-    border-radius: 3px;
+    border-radius: 2px;
+    height: 8px;
 }
 
-.range-slider.active {
-    z-index: 2;
-}
-
-.range-slider::-webkit-slider-thumb {
+.range-slider-container .range-slider::-webkit-slider-thumb {
     pointer-events: auto;
     -webkit-appearance: none;
-    appearance: none;
-    width: 18px;
-    height: 18px;
-    border-radius: 50%;
-    background: #3f51b5;
+    width: 16px;
+    height: 16px;
+    background: #4a90e2;
     cursor: pointer;
-    border: 1px solid #2c3e90;
+    border-radius: 50%;
+    margin-top: -4px; /* center on track */
 }
 
-.range-slider::-moz-range-thumb {
+.range-slider-container .range-slider::-moz-range-thumb {
     pointer-events: auto;
-    width: 18px;
-    height: 18px;
-    border-radius: 50%;
-    background: #3f51b5;
+    width: 16px;
+    height: 16px;
+    background: #4a90e2;
     cursor: pointer;
-    border: 1px solid #2c3e90;
+    border-radius: 50%;
+    margin-top: -4px; /* center on track */
 }
 
 .min-slider {
-    z-index: 1;
+    z-index: 5;
 }
 
 .max-slider {
-    z-index: 2;
+    z-index: 5;
+}
+
+#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;
 }