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

syd/__init__.py

@@ -1,3 +1,4 @@
-__version__ = "1.1.0"
+__version__ = "1.2.0"
 
 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,6 +42,55 @@ 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."""
@@ -80,6 +128,7 @@ class FlaskDeployer:
         port: Optional[int] = None,
         open_browser: bool = True,
         update_threshold: float = 1.0,
+        timeout_threshold: float = 10.0,
     ):
         """
         Initialize the Flask deployer.
@@ -110,11 +159,14 @@ class FlaskDeployer:
             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(
@@ -324,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:
@@ -338,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:
         """
@@ -607,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

@@ -92,33 +92,8 @@ input[type="number"] {
     box-sizing: border-box;
 }
 
-/* Range inputs */
 input[type="range"] {
     width: 100%;
-    height: 12px;
-    background: #ddd;
-    border-radius: 3px;
-    outline: none;
-    margin: 5px 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;
@@ -204,79 +222,76 @@ button.active {
 
 .range-slider-container {
     position: relative;
-    margin: 5px 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 {

syd/flask_deployment/static/css/viewer.css

@@ -45,46 +45,4 @@
 .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;
 }

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}`);
+    }
+}

syd/flask_deployment/static/js/modules/plot.js

@@ -0,0 +1,75 @@
+import { state } from './state.js';
+import { updateThreshold } from './config.js';
+import { updateStatus, createSlowLoadingImage } from './utils.js';
+
+let loadingTimeout = null; // Timeout for showing loading state
+
+/**
+ * Update the plot with current state
+ */
+export function updatePlot() {
+    const plotImage = document.getElementById('plot-image');
+    if (!plotImage) {
+        console.warn("Plot image element not found");
+        return;
+    }
+
+    // Clear any existing loading timeout
+    if (loadingTimeout) {
+        clearTimeout(loadingTimeout);
+        loadingTimeout = null; // Reset timeout variable
+    }
+
+    // Show loading state after threshold
+    loadingTimeout = setTimeout(() => {
+        const slowLoadingDataURL = createSlowLoadingImage(); // Get cached or create new
+        plotImage.src = slowLoadingDataURL;
+        plotImage.style.opacity = '0.5';
+        updateStatus('Generating plot...'); // Update status during loading
+    }, updateThreshold * 1000);
+
+    // Build query string from state
+    const queryParams = new URLSearchParams();
+    for (const [name, value] of Object.entries(state)) {
+        if (Array.isArray(value) || typeof value === 'object') {
+            // Ensure complex objects/arrays are properly stringified for URL
+            queryParams.append(name, JSON.stringify(value));
+        } else {
+            queryParams.append(name, value);
+        }
+    }
+
+    // Set the image source to the plot endpoint with parameters
+    const url = `/plot?${queryParams.toString()}`;
+
+    // Use an Image object to preload and handle load/error events
+    const newImage = new Image();
+
+    newImage.onload = function() {
+        // Clear loading timeout if it hasn't fired yet
+        if (loadingTimeout) {
+            clearTimeout(loadingTimeout);
+            loadingTimeout = null;
+        }
+        // Update the actual image source and reset opacity
+        plotImage.src = url;
+        plotImage.style.opacity = 1;
+        // Don't necessarily set status to Ready here, as state updates might happen
+        // Let the calling function (updateParameter or initial load) handle final status
+    };
+
+    newImage.onerror = function() {
+        // Clear loading timeout
+        if (loadingTimeout) {
+            clearTimeout(loadingTimeout);
+            loadingTimeout = null;
+        }
+        updateStatus('Error loading plot');
+        plotImage.style.opacity = 1; // Reset opacity even on error
+        // Optionally display an error image/message
+        // plotImage.src = 'path/to/error/image.png';
+    };
+
+    // Start loading the new image
+    newImage.src = url;
+}