syd 1.0.2__py3-none-any.whl → 1.2.0__py3-none-any.whl

syd/__init__.py

@@ -1,11 +1,4 @@
-from typing import Callable, Optional
-from .viewer import Viewer
+__version__ = "1.2.0"
 
-__version__ = "1.0.2"
-
-
-def make_viewer(plot_func: Optional[Callable] = None):
-    viewer = Viewer()
-    if plot_func is not None:
-        viewer.set_plot(plot_func)
-    return viewer
+from .viewer import make_viewer, Viewer
+from .support import show_open_servers, close_servers

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/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;
 }

syd/flask_deployment/static/css/viewer.css

@@ -0,0 +1,48 @@
+#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;
+}

syd/flask_deployment/static/js/modules/api.js

@@ -0,0 +1,89 @@
+import { updateStatus } from './utils.js';
+import { initializeState, updateStateFromServer } from './state.js';
+import { updatePlot } from './plot.js';
+import { setUpdateThreshold } from './config.js';
+
+/**
+ * Fetch initial parameter information from the server.
+ * Initializes the state and gets configuration.
+ */
+export async function fetchInitialData() {
+    try {
+        const response = await fetch('/init-data');
+        if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        const data = await response.json();
+
+        setUpdateThreshold(data.config.update_threshold); // Set initial threshold
+        initializeState(data); // Initialize state
+
+        return data; // Return data in case the caller needs it
+    } catch (error) {
+        console.error('Error initializing viewer:', error);
+        updateStatus('Error initializing viewer');
+        throw error; // Re-throw the error to signal failure
+    }
+}
+
+/**
+ * Send parameter update to the server.
+ * @param {string} name - The name of the parameter.
+ * @param {*} value - The new value of the parameter.
+ * @param {boolean} [action=false] - Whether this is a button action.
+ */
+export async function updateParameterOnServer(name, value, action = false) {
+    try {
+        const response = await fetch('/update-param', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                name: name,
+                value: value,
+                action: action
+            }),
+        });
+        if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        return await response.json(); // Return the server response (likely includes updated state)
+    } catch (error) {
+        console.error('Error updating parameter:', error);
+        updateStatus('Error updating parameter');
+        throw error; // Re-throw error
+    }
+}
+
+/**
+ * Handles button click actions by sending to the server.
+ * @param {string} name - The name of the button parameter.
+ */
+export function handleButtonClick(name) {
+    const button = document.getElementById(`${name}-button`);
+    if (!button) return;
+
+    button.classList.add('active'); // Show button as active
+    updateStatus(`Processing ${name}...`);
+
+    updateParameterOnServer(name, null, true) // Send action=true
+        .then(data => {
+            button.classList.remove('active');
+            if (data.error) {
+                console.error('Error:', data.error);
+                updateStatus(`Error processing ${name}`);
+            } else {
+                // Update state with any changes from callbacks
+                updateStateFromServer(data.state, data.params);
+                // Update plot if needed (plot.js handles this now)
+                updatePlot();
+                updateStatus('Ready!');
+            }
+        })
+        .catch(error => {
+            button.classList.remove('active');
+            console.error('Error during button action:', error);
+            updateStatus(`Error processing ${name}`);
+        });
+}

syd/flask_deployment/static/js/modules/config.js

@@ -0,0 +1,22 @@
+export let updateThreshold = 1.0;  // Default update threshold
+
+// Config object parsed from HTML data attributes
+export const config = {
+    controlsPosition: document.getElementById('viewer-config')?.dataset.controlsPosition || 'left',
+    controlsWidthPercent: parseInt(document.getElementById('viewer-config')?.dataset.controlsWidthPercent || 20),
+    plotMarginPercent: parseInt(document.getElementById('viewer-config')?.dataset.plotMarginPercent || 15)
+};
+
+// Function to update threshold, needed by system controls
+export function setUpdateThreshold(value) {
+    updateThreshold = value;
+}
+
+// Function to update config values, needed by system controls
+export function setConfigValue(key, value) {
+    if (key in config) {
+        config[key] = value;
+    } else {
+        console.warn(`Attempted to set unknown config key: ${key}`);
+    }
+}