syd 1.0.2__tar.gz → 1.1.0__tar.gz

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

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: syd
-Version: 1.0.2
+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,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)
@@ -220,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
@@ -228,4 +226,7 @@ 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!!!!
+- [ ] Range parameters render poorly in browser mode. 

{syd-1.0.2 → 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,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)
@@ -190,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
@@ -198,4 +196,7 @@ 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!!!!
+- [ ] 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.2 → 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.2 → 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;
+}

{syd-1.0.2 → syd-1.1.0}/syd/flask_deployment/static/js/viewer.js

@@ -2,21 +2,56 @@ let state = {};
 let paramInfo = {};
 let paramOrder = [];
 let isUpdating = false;
+let updateThreshold = 1.0;  // Default update threshold
+let loadingTimeout = null;  // Timeout for showing loading state
+let slowLoadingImage = null;  // Cache for slow loading image
 
 // Config object parsed from HTML data attributes
 const config = {
     controlsPosition: document.getElementById('viewer-config').dataset.controlsPosition || 'left',
-    controlsWidthPercent: parseInt(document.getElementById('viewer-config').dataset.controlsWidthPercent || 20)
+    controlsWidthPercent: parseInt(document.getElementById('viewer-config').dataset.controlsWidthPercent || 20),
+    plotMarginPercent: parseInt(document.getElementById('viewer-config').dataset.plotMarginPercent || 0)
 };
 
 // Initialize the viewer
 document.addEventListener('DOMContentLoaded', function() {
+    // Create main controls container if it doesn't exist
+    const mainContainer = document.getElementById('controls-container');
+    
+    // Create parameter controls section first
+    const paramControls = document.createElement('div');
+    paramControls.id = 'parameter-controls';
+    paramControls.className = 'parameter-controls';
+
+    // Add Parameters header
+    const paramHeader = document.createElement('div');
+    paramHeader.className = 'section-header';
+    paramHeader.innerHTML = '<b>Parameters</b>';
+    paramControls.appendChild(paramHeader);
+    
+    // Create system controls section
+    const systemControls = document.createElement('div');
+    systemControls.id = 'system-controls';
+    systemControls.className = 'system-controls';
+    
+    // Create status element
+    const statusElement = document.createElement('div');
+    statusElement.id = 'status-display';
+    statusElement.className = 'status-display';
+    systemControls.appendChild(statusElement);
+    updateStatus('Initializing...');
+
+    // Add sections to main container in the desired order
+    mainContainer.appendChild(paramControls);
+    mainContainer.appendChild(systemControls);
+
     // Fetch initial parameter information from server
     fetch('/init-data')
         .then(response => response.json())
         .then(data => {
             paramInfo = data.params;
             paramOrder = data.param_order;
+            updateThreshold = data.config.update_threshold;
             
             // Initialize state from parameter info
             for (const [name, param] of Object.entries(paramInfo)) {
@@ -25,23 +60,271 @@ document.addEventListener('DOMContentLoaded', function() {
             
             // Create UI controls for each parameter
             createControls();
+
+            // Create system controls if horizontal layout
+            if (config.controlsPosition === 'left' || config.controlsPosition === 'right') {
+                createSystemControls(systemControls);
+            }
             
             // Generate initial plot
             updatePlot();
+            updateStatus('Ready!');
         })
         .catch(error => {
             console.error('Error initializing viewer:', error);
+            updateStatus('Error initializing viewer');
         });
 });
 
+/**
+ * Create system controls (width and threshold)
+ */
+function createSystemControls(container) {
+    // Create controls width slider
+    const widthControl = createFloatController('controls_width', {
+        type: 'float',
+        value: config.controlsWidthPercent,
+        min: 10,
+        max: 50,
+        step: 1
+    });
+    widthControl.className = 'numeric-control system-control';
+    
+    // Add label for width control
+    const widthLabel = document.createElement('span');
+    widthLabel.className = 'control-label';
+    widthLabel.textContent = 'Controls Width %';
+    
+    const widthGroup = document.createElement('div');
+    widthGroup.className = 'control-group';
+    widthGroup.appendChild(widthLabel);
+    widthGroup.appendChild(widthControl);
+
+    // Create update threshold slider
+    const thresholdControl = createFloatController('update_threshold', {
+        type: 'float',
+        value: updateThreshold,
+        min: 0.1,
+        max: 10.0,
+        step: 0.1
+    });
+    thresholdControl.className = 'numeric-control system-control';
+    
+    // Add label for threshold control
+    const thresholdLabel = document.createElement('span');
+    thresholdLabel.className = 'control-label';
+    thresholdLabel.textContent = 'Update Threshold';
+    
+    const thresholdGroup = document.createElement('div');
+    thresholdGroup.className = 'control-group';
+    thresholdGroup.appendChild(thresholdLabel);
+    thresholdGroup.appendChild(thresholdControl);
+
+    // Create plot margin slider
+    const plotMarginControl = createFloatController('plot_margin', {
+        type: 'float',
+        value: config.plotMarginPercent,
+        min: 0,
+        max: 50, 
+        step: 1
+    });
+    plotMarginControl.className = 'numeric-control system-control';
+
+    // Add label for margin control
+    const marginLabel = document.createElement('span');
+    marginLabel.className = 'control-label';
+    marginLabel.textContent = 'Plot Margin %';
+
+    const marginGroup = document.createElement('div');
+    marginGroup.className = 'control-group';
+    marginGroup.appendChild(marginLabel);
+    marginGroup.appendChild(plotMarginControl);
+
+    // Add custom event listeners
+    // Width Control Listeners
+    const widthSlider = widthControl.querySelector('input[type="range"]');
+    const widthInput = widthControl.querySelector('input[type="number"]');
+    
+    widthSlider.addEventListener('input', function() { // Real-time update for number input
+        widthInput.value = this.value;
+    });
+
+    widthSlider.addEventListener('change', function() {
+        const width = parseFloat(this.value);
+        config.controlsWidthPercent = width;
+        
+        // Update the root containers using querySelector for classes
+        const rootContainer = document.querySelector('.viewer-container');
+        const controlsContainer = document.querySelector('.controls-container'); // Select the outer div by class
+        const plotContainer = document.querySelector('.plot-container');
+
+        if (rootContainer && controlsContainer && plotContainer) {
+            if (config.controlsPosition === 'left' || config.controlsPosition === 'right') {
+                controlsContainer.style.width = `${width}%`;
+                plotContainer.style.width = `${100 - width}%`;
+            }
+        }
+        
+        // Update the slider to match
+        widthSlider.value = width;
+    });
+
+    // Threshold Control Listeners
+    const thresholdSlider = thresholdControl.querySelector('input[type="range"]');
+    const thresholdInput = thresholdControl.querySelector('input[type="number"]');
+
+    thresholdSlider.addEventListener('input', function() { // Real-time update for number input
+        thresholdInput.value = this.value;
+    });
+
+    thresholdSlider.addEventListener('change', function() {
+        updateThreshold = parseFloat(this.value);
+        thresholdInput.value = updateThreshold; // Ensure input matches final value
+    });
+
+    // Plot Margin Control Listeners
+    const marginSlider = plotMarginControl.querySelector('input[type="range"]');
+    const marginInput = plotMarginControl.querySelector('input[type="number"]');
+    const plotContainer = document.querySelector('.plot-container');
+
+    // Function to apply margin and adjust size of the plot image
+    function applyPlotMargin(marginPercent) {
+        const plotImage = document.getElementById('plot-image'); // Get the image element
+        if (plotImage) {
+            const effectiveMargin = parseFloat(marginPercent); // Ensure it's a number
+            // Apply margin to the image
+            plotImage.style.margin = `${effectiveMargin}%`;
+            // Adjust width and height to account for the margin
+            plotImage.style.width = `calc(100% - ${2 * effectiveMargin}%)`;
+            plotImage.style.height = `calc(100% - ${2 * effectiveMargin}%)`;
+            // Reset container padding just in case
+            if (plotContainer) {
+                 plotContainer.style.padding = '0';
+            }
+            config.plotMarginPercent = effectiveMargin; // Update config
+        } else {
+            console.warn('Plot image element not found when applying margin.');
+        }
+    }
+
+    marginSlider.addEventListener('input', function() { // Real-time update for number input
+        marginInput.value = this.value;
+    });
+
+    marginSlider.addEventListener('change', function() {
+        const margin = parseFloat(this.value);
+        marginInput.value = margin; // Ensure input matches final value
+        applyPlotMargin(margin);
+    });
+
+    // Add wheel event listener to plot container for margin control
+    if (plotContainer) {
+        plotContainer.addEventListener('wheel', function(event) {
+            event.preventDefault(); // Prevent page scrolling
+
+            const currentValue = parseFloat(marginSlider.value);
+            const step = parseFloat(marginSlider.step) || 1;
+            const min = parseFloat(marginSlider.min);
+            const max = parseFloat(marginSlider.max);
+
+            let newValue;
+            if (event.deltaY < 0) {
+                // Scrolling up (or zoom in) -> decrease margin
+                newValue = currentValue - step;
+            } else {
+                // Scrolling down (or zoom out) -> increase margin
+                newValue = currentValue + step;
+            }
+
+            // Clamp the value within min/max bounds
+            newValue = Math.max(min, Math.min(max, newValue));
+
+            // Only update if the value actually changed
+            if (newValue !== currentValue) {
+                marginSlider.value = newValue;
+                marginInput.value = newValue;
+                applyPlotMargin(newValue);
+            }
+        }, { passive: false }); // Need passive: false to call preventDefault()
+    }
+
+    // Apply initial margin
+    applyPlotMargin(config.plotMarginPercent);
+
+    container.appendChild(widthGroup);
+    container.appendChild(thresholdGroup);
+    container.appendChild(marginGroup);
+}
+
+/**
+ * Create update threshold control
+ */
+function createUpdateThresholdControl() {
+    const container = document.createElement('div');
+    container.className = 'control-group';
+    
+    const label = document.createElement('span');
+    label.className = 'control-label';
+    label.textContent = 'Update Threshold';
+    
+    const input = document.createElement('input');
+    input.type = 'range';
+    input.min = '0.1';
+    input.max = '10.0';
+    input.step = '0.1';
+    input.value = updateThreshold;
+    input.className = 'update-threshold-slider';
+    
+    input.addEventListener('change', function() {
+        updateThreshold = parseFloat(this.value);
+    });
+    
+    container.appendChild(label);
+    container.appendChild(input);
+    return container;
+}
+
+/**
+ * Update the status display
+ */
+function updateStatus(message) {
+    const statusElement = document.getElementById('status-display');
+    if (statusElement) {
+        statusElement.innerHTML = `<b>Syd Controls</b> <span class="status-message">Status: ${message}</span>`;
+    }
+}
+
+/**
+ * Create and cache the slow loading image
+ */
+function createSlowLoadingImage() {
+    const canvas = document.createElement('canvas');
+    canvas.width = 1200;
+    canvas.height = 900;
+    const ctx = canvas.getContext('2d');
+    
+    // Fill background
+    ctx.fillStyle = '#ffffff';
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+    
+    // Add loading text
+    ctx.fillStyle = '#000000';
+    ctx.font = 'bold 16px Arial';
+    ctx.textAlign = 'center';
+    ctx.textBaseline = 'middle';
+    ctx.fillText('waiting for next figure...', canvas.width/2, canvas.height/2);
+    
+    return canvas.toDataURL();
+}
+
 /**
  * Create UI controls based on parameter types
  */
 function createControls() {
-    const controlsContainer = document.getElementById('controls-container');
+    const paramControls = document.getElementById('parameter-controls');
     
-    // Clear any existing controls
-    controlsContainer.innerHTML = '';
+    // Clear any existing parameter controls
+    paramControls.innerHTML = '';
     
     // Create controls for each parameter in the order specified by the viewer
     paramOrder.forEach(name => {
@@ -56,7 +339,7 @@ function createControls() {
         
         // Add to container
         if (controlGroup) {
-            controlsContainer.appendChild(controlGroup);
+            paramControls.appendChild(controlGroup);
         }
     });
 }
@@ -186,6 +469,10 @@ function createIntegerControl(name, param) {
     input.value = param.value;
     
     // Add event listeners
+    slider.addEventListener('input', function() {
+        input.value = this.value;
+    });
+    
     slider.addEventListener('change', function() {
         const value = parseInt(this.value, 10);
         input.value = value;
@@ -198,7 +485,7 @@ function createIntegerControl(name, param) {
             slider.value = value;
             updateParameter(name, value);
         } else {
-            this.value = state[name]; // Revert to current state
+            this.value = state[name];
         }
     });
     
@@ -211,6 +498,40 @@ function createIntegerControl(name, param) {
  * Create float control with slider and number input
  */
 function createFloatControl(name, param) {
+    // create a container with the slider and input
+    const container = createFloatController(name, param);
+    const slider = container.querySelector('input[type="range"]');
+    const input = container.querySelector('input[type="number"]');
+    
+    // Add event listeners
+    slider.addEventListener('input', function() {
+        input.value = this.value;
+    });
+
+    slider.addEventListener('change', function() {
+        const value = parseFloat(this.value);
+        input.value = value;
+        updateParameter(name, value);
+    });
+    
+    input.addEventListener('change', function() {
+        const value = parseFloat(this.value);
+        if (!isNaN(value) && value >= param.min && value <= param.max) {
+            slider.value = value;
+            updateParameter(name, value);
+        } else {
+            this.value = state[name]; // Revert to current state
+        }
+    });
+
+    return container;
+}
+
+/**
+ * Create float object with slider and number input
+ * Without the elements specific to "parameters"
+ */
+function createFloatController(name, param) {
     const container = document.createElement('div');
     container.className = 'numeric-control';
     
@@ -232,23 +553,7 @@ function createFloatControl(name, param) {
     input.step = param.step || 0.01;
     input.value = param.value;
     
-    // Add event listeners
-    slider.addEventListener('change', function() {
-        const value = parseFloat(this.value);
-        input.value = value;
-        updateParameter(name, value);
-    });
-    
-    input.addEventListener('change', function() {
-        const value = parseFloat(this.value);
-        if (!isNaN(value) && value >= param.min && value <= param.max) {
-            slider.value = value;
-            updateParameter(name, value);
-        } else {
-            this.value = state[name]; // Revert to current state
-        }
-    });
-    
+    // return the container with the slider and input
     container.appendChild(slider);
     container.appendChild(input);
     return container;
@@ -414,6 +719,34 @@ function createRangeControl(name, param, converter) {
     maxInput.value = param.value[1];
     
     // Add event listeners
+    // Input listeners for real-time updates of number inputs and gradient
+    minSlider.addEventListener('input', function() {
+        const minVal = converter(this.value);
+        const maxVal = converter(maxSlider.value);
+        if (minVal <= maxVal) {
+            minInput.value = minVal;
+        } else {
+            // Prevent slider crossing visually, update input to maxVal
+            this.value = maxVal; 
+            minInput.value = maxVal;
+        }
+        updateSliderGradient(minSlider, maxSlider, sliderContainer); // Update gradient
+    });
+
+    maxSlider.addEventListener('input', function() {
+        const minVal = converter(minSlider.value);
+        const maxVal = converter(this.value);
+        if (maxVal >= minVal) {
+            maxInput.value = maxVal;
+        } else {
+            // Prevent slider crossing visually, update input to minVal
+            this.value = minVal;
+            maxInput.value = minVal;
+        }
+        updateSliderGradient(minSlider, maxSlider, sliderContainer); // Update gradient
+    });
+
+    // Change listeners for updating state and triggering backend calls
     minSlider.addEventListener('change', function() {
         const minVal = converter(this.value);
         const maxVal = converter(maxSlider.value);
@@ -596,7 +929,9 @@ function updateParameter(name, value) {
     if (isUpdating) {
         return;
     }
-    
+    // Indicate status update
+    updateStatus('Updating ' + name + '...');
+
     // Update local state
     state[name] = value;
     
@@ -626,6 +961,9 @@ function updateParameter(name, value) {
     .catch(error => {
         console.error('Error:', error);
     });
+
+    // Indicate status update
+    updateStatus('Ready!');
 }
 
 /**
@@ -802,11 +1140,27 @@ function formatLabel(name) {
  * Update the plot with current state
  */
 function updatePlot() {
+    const plotImage = document.getElementById('plot-image');
+    if (!plotImage) return;
+
+    // Clear any existing loading timeout
+    if (loadingTimeout) {
+        clearTimeout(loadingTimeout);
+    }
+
+    // Show loading state after threshold
+    loadingTimeout = setTimeout(() => {
+        // Create slow loading image if not cached
+        if (!slowLoadingImage) {
+            slowLoadingImage = createSlowLoadingImage();
+        }
+        plotImage.src = slowLoadingImage;
+        plotImage.style.opacity = '0.5';
+    }, updateThreshold * 1000);
+
     // Build query string from state
     const queryParams = new URLSearchParams();
-    
     for (const [name, value] of Object.entries(state)) {
-        // Handle arrays and special types by serializing to JSON
         if (Array.isArray(value) || typeof value === 'object') {
             queryParams.append(name, JSON.stringify(value));
         } else {
@@ -816,16 +1170,26 @@ function updatePlot() {
     
     // Set the image source to the plot endpoint with parameters
     const url = `/plot?${queryParams.toString()}`;
-    const plotImage = document.getElementById('plot-image');
-    
-    // Show loading indicator
-    plotImage.style.opacity = 0.5;
     
     // Create a new image object
     const newImage = new Image();
     newImage.onload = function() {
+        // Clear loading timeout
+        if (loadingTimeout) {
+            clearTimeout(loadingTimeout);
+            loadingTimeout = null;
+        }
         plotImage.src = url;
         plotImage.style.opacity = 1;
     };
+    newImage.onerror = function() {
+        // Clear loading timeout
+        if (loadingTimeout) {
+            clearTimeout(loadingTimeout);
+            loadingTimeout = null;
+        }
+        updateStatus('Error loading plot');
+        plotImage.style.opacity = 1;
+    };
     newImage.src = url;
 } 

{syd-1.0.2 → syd-1.1.0}/syd/notebook_deployment/deployer.py

@@ -39,7 +39,6 @@ class NotebookDeployer:
         viewer: Viewer,
         controls_position: Literal["left", "top", "right", "bottom"] = "left",
         controls_width_percent: int = 20,
-        continuous: bool = False,
         suppress_warnings: bool = True,
         update_threshold: float = 1.0,
     ):
@@ -49,7 +48,6 @@ class NotebookDeployer:
         self._updating = False  # Flag to check circular updates
         self.controls_position = controls_position
         self.controls_width_percent = controls_width_percent
-        self.continuous = continuous
 
         # Initialize containers
         self.backend_type = get_backend_type()
@@ -117,7 +115,7 @@ class NotebookDeployer:
     def build_components(self) -> None:
         """Create widget instances for all parameters and equip callbacks."""
         for name, param in self.viewer.parameters.items():
-            widget = create_widget(param, continuous=self.continuous)
+            widget = create_widget(param)
             self.components[name] = widget
             callback = lambda _, n=name: self.handle_component_engagement(n)
             widget.observe(callback)

{syd-1.0.2 → syd-1.1.0}/syd/notebook_deployment/widgets.py

@@ -36,13 +36,15 @@ class BaseWidget(Generic[T, W], ABC):
     def __init__(
         self,
         parameter: T,
-        continuous: bool = False,
         width: str = "auto",
         margin: str = "3px 0px",
         description_width: str = "initial",
     ):
         self._widget = self._create_widget(
-            parameter, continuous, width, margin, description_width
+            parameter,
+            width,
+            margin,
+            description_width,
         )
         self._updating = False  # Flag to prevent circular updates
         # List of callbacks to remember for quick disabling/enabling
@@ -52,7 +54,6 @@ class BaseWidget(Generic[T, W], ABC):
     def _create_widget(
         self,
         parameter: T,
-        continuous: bool,
         width: str = "auto",
         margin: str = "3px 0px",
         description_width: str = "initial",
@@ -123,7 +124,6 @@ class TextWidget(BaseWidget[TextParameter, widgets.Text]):
     def _create_widget(
         self,
         parameter: TextParameter,
-        continuous: bool,
         width: str = "auto",
         margin: str = "3px 0px",
         description_width: str = "initial",
@@ -131,7 +131,7 @@ class TextWidget(BaseWidget[TextParameter, widgets.Text]):
         return widgets.Text(
             value=parameter.value,
             description=parameter.name,
-            continuous=continuous,
+            continuous=False,
             layout=widgets.Layout(width=width, margin=margin),
             style={"description_width": description_width},
         )
@@ -143,7 +143,6 @@ class BooleanWidget(BaseWidget[BooleanParameter, widgets.ToggleButton]):
     def _create_widget(
         self,
         parameter: BooleanParameter,
-        continuous: bool,
         width: str = "auto",
         margin: str = "3px 0px",
         description_width: str = "initial",
@@ -162,7 +161,6 @@ class SelectionWidget(BaseWidget[SelectionParameter, widgets.Dropdown]):
     def _create_widget(
         self,
         parameter: SelectionParameter,
-        continuous: bool,
         width: str = "auto",
         margin: str = "3px 0px",
         description_width: str = "initial",
@@ -198,7 +196,6 @@ class MultipleSelectionWidget(
     def _create_widget(
         self,
         parameter: MultipleSelectionParameter,
-        continuous: bool,
         width: str = "auto",
         margin: str = "3px 0px",
         description_width: str = "initial",
@@ -235,7 +232,6 @@ class IntegerWidget(BaseWidget[IntegerParameter, widgets.IntSlider]):
     def _create_widget(
         self,
         parameter: IntegerParameter,
-        continuous: bool,
         width: str = "auto",
         margin: str = "3px 0px",
         description_width: str = "initial",
@@ -247,7 +243,7 @@ class IntegerWidget(BaseWidget[IntegerParameter, widgets.IntSlider]):
             max=parameter.max,
             step=1,
             description=parameter.name,
-            continuous_update=continuous,
+            continuous_update=False,
             style={"description_width": description_width},
             layout=widgets.Layout(width=width, margin=margin),
         )
@@ -264,6 +260,10 @@ class IntegerWidget(BaseWidget[IntegerParameter, widgets.IntSlider]):
     def extra_updates_from_parameter(self, parameter: IntegerParameter) -> None:
         """Update the widget attributes from the parameter."""
         current_value = self._widget.value
+        if parameter.min > self._widget.max:
+            self._widget.max = parameter.min + 1
+        if parameter.max < self._widget.min:
+            self._widget.min = parameter.max - 1
         self._widget.min = parameter.min
         self._widget.max = parameter.max
         self.value = max(parameter.min, min(parameter.max, current_value))
@@ -275,7 +275,6 @@ class FloatWidget(BaseWidget[FloatParameter, widgets.FloatSlider]):
     def _create_widget(
         self,
         parameter: FloatParameter,
-        continuous: bool,
         width: str = "auto",
         margin: str = "3px 0px",
         description_width: str = "initial",
@@ -287,7 +286,7 @@ class FloatWidget(BaseWidget[FloatParameter, widgets.FloatSlider]):
             max=parameter.max,
             step=parameter.step,
             description=parameter.name,
-            continuous_update=continuous,
+            continuous_update=False,
             style={"description_width": description_width},
             layout=widgets.Layout(width=width, margin=margin),
         )
@@ -305,6 +304,10 @@ class FloatWidget(BaseWidget[FloatParameter, widgets.FloatSlider]):
     def extra_updates_from_parameter(self, parameter: FloatParameter) -> None:
         """Update the widget attributes from the parameter."""
         current_value = self._widget.value
+        if parameter.min > self._widget.max:
+            self._widget.max = parameter.min + 1
+        if parameter.max < self._widget.min:
+            self._widget.min = parameter.max - 1
         self._widget.min = parameter.min
         self._widget.max = parameter.max
         self._widget.step = parameter.step
@@ -317,7 +320,6 @@ class IntegerRangeWidget(BaseWidget[IntegerRangeParameter, widgets.IntRangeSlide
     def _create_widget(
         self,
         parameter: IntegerRangeParameter,
-        continuous: bool,
         width: str = "auto",
         margin: str = "3px 0px",
         description_width: str = "initial",
@@ -330,7 +332,7 @@ class IntegerRangeWidget(BaseWidget[IntegerRangeParameter, widgets.IntRangeSlide
             max=parameter.max,
             step=1,
             description=parameter.name,
-            continuous_update=continuous,
+            continuous_update=False,
             style={"description_width": description_width},
             layout=widgets.Layout(width=width, margin=margin),
         )
@@ -349,6 +351,10 @@ class IntegerRangeWidget(BaseWidget[IntegerRangeParameter, widgets.IntRangeSlide
     def extra_updates_from_parameter(self, parameter: IntegerRangeParameter) -> None:
         """Update the widget attributes from the parameter."""
         low, high = self._widget.value
+        if parameter.min > self._widget.max:
+            self._widget.max = parameter.min + 1
+        if parameter.max < self._widget.min:
+            self._widget.min = parameter.max - 1
         self._widget.min = parameter.min
         self._widget.max = parameter.max
         # Ensure values stay within bounds
@@ -363,7 +369,6 @@ class FloatRangeWidget(BaseWidget[FloatRangeParameter, widgets.FloatRangeSlider]
     def _create_widget(
         self,
         parameter: FloatRangeParameter,
-        continuous: bool,
         width: str = "auto",
         margin: str = "3px 0px",
         description_width: str = "initial",
@@ -376,7 +381,7 @@ class FloatRangeWidget(BaseWidget[FloatRangeParameter, widgets.FloatRangeSlider]
             max=parameter.max,
             step=parameter.step,
             description=parameter.name,
-            continuous_update=continuous,
+            continuous_update=False,
             style={"description_width": description_width},
             layout=widgets.Layout(width=width, margin=margin),
         )
@@ -396,6 +401,10 @@ class FloatRangeWidget(BaseWidget[FloatRangeParameter, widgets.FloatRangeSlider]
     def extra_updates_from_parameter(self, parameter: FloatRangeParameter) -> None:
         """Update the widget attributes from the parameter."""
         low, high = self._widget.value
+        if parameter.min > self._widget.max:
+            self._widget.max = parameter.min + 1
+        if parameter.max < self._widget.min:
+            self._widget.min = parameter.max - 1
         self._widget.min = parameter.min
         self._widget.max = parameter.max
         self._widget.step = parameter.step
@@ -411,7 +420,6 @@ class UnboundedIntegerWidget(BaseWidget[UnboundedIntegerParameter, widgets.IntTe
     def _create_widget(
         self,
         parameter: UnboundedIntegerParameter,
-        continuous: bool,
         width: str = "auto",
         margin: str = "3px 0px",
         description_width: str = "initial",
@@ -440,7 +448,6 @@ class UnboundedFloatWidget(BaseWidget[UnboundedFloatParameter, widgets.FloatText
     def _create_widget(
         self,
         parameter: UnboundedFloatParameter,
-        continuous: bool,
         width: str = "auto",
         margin: str = "3px 0px",
         description_width: str = "initial",
@@ -470,7 +477,6 @@ class ButtonWidget(BaseWidget[ButtonAction, widgets.Button]):
     def _create_widget(
         self,
         parameter: ButtonAction,
-        continuous: bool,
         width: str = "auto",
         margin: str = "3px 0px",
         description_width: str = "initial",
@@ -514,19 +520,32 @@ class ButtonWidget(BaseWidget[ButtonAction, widgets.Button]):
 
 def create_widget(
     parameter: Union[Parameter[Any], ButtonAction],
-    continuous: bool = False,
     width: str = "auto",
     margin: str = "3px 0px",
     description_width: str = "initial",
 ) -> BaseWidget[Union[Parameter[Any], ButtonAction], widgets.Widget]:
     """Create and return the appropriate widget for the given parameter.
 
-    Args:
-        parameter: The parameter to create a widget for
-        continuous: Whether to update the widget value continuously during user interaction
-        width: Width of the widget
-        margin: Margin of the widget
-        description_width: Width of the description label
+    Parameters
+    ----------
+    parameter : Union[Parameter[Any], ButtonAction]
+        The parameter to create a widget for.
+    width : str, optional
+        Width of the widget. Default is 'auto'.
+    margin : str, optional
+        Margin of the widget. Default is '3px 0px'.
+    description_width : str, optional
+        Width of the description label. Default is 'initial'.
+
+    Returns
+    -------
+    BaseWidget[Union[Parameter[Any], ButtonAction], widgets.Widget]
+        The appropriate widget instance for the given parameter type.
+
+    Raises
+    ------
+    ValueError
+        If no widget implementation exists for the given parameter type.
     """
     widget_map = {
         TextParameter: TextWidget,
@@ -562,7 +581,6 @@ def create_widget(
 
     return widget_class(
         parameter,
-        continuous,
         width=width,
         margin=margin,
         description_width=description_width,

{syd-1.0.2 → syd-1.1.0}/syd/viewer.py

@@ -12,6 +12,36 @@ NO_UPDATE = NoUpdate()
 NO_INITIAL_VALUE = NoInitialValue()
 
 
+def make_viewer(plot_func: Optional[Callable] = None) -> "Viewer":
+    """Create an empty viewer object.
+
+    Parameters
+    ----------
+    plot_func : Callable, optional
+        A function that takes a state dictionary and returns a matplotlib figure.
+
+    Returns
+    -------
+    viewer : Viewer
+        A new viewer object
+
+    Examples
+    --------
+    >>> from syd import make_viewer
+    >>> def plot(state):
+    >>>     ... generate figure, plot stuff ...
+    >>>     return fig
+    >>> viewer = make_viewer(plot)
+    >>> viewer.add_float('x', value=1.0, min=0, max=10)
+    >>> viewer.on_change('x', viewer.update_based_on_x)
+    >>> viewer.show()
+    """
+    viewer = Viewer()
+    if plot_func is not None:
+        viewer.set_plot(plot_func)
+    return viewer
+
+
 def validate_parameter_operation(
     operation: str,
     parameter_type: Union[ParameterType, ActionType],
@@ -216,7 +246,6 @@ class Viewer:
         self,
         controls_position: Literal["left", "top", "right", "bottom"] = "left",
         controls_width_percent: int = 20,
-        continuous: bool = False,
         suppress_warnings: bool = True,
         update_threshold: float = 1.0,
     ):
@@ -228,7 +257,6 @@ class Viewer:
             env="notebook",
             controls_position=controls_position,
             controls_width_percent=controls_width_percent,
-            continuous=continuous,
             suppress_warnings=suppress_warnings,
             update_threshold=update_threshold,
         )
@@ -427,9 +455,8 @@ class Viewer:
         try:
             self._in_callbacks = True
             if name in self.callbacks:
-                state = self.state
                 for callback in self.callbacks[name]:
-                    callback(state)
+                    callback(self.state)
         finally:
             self._in_callbacks = False
 

syd-1.0.2/syd/__init__.py

@@ -1,11 +0,0 @@
-from typing import Callable, Optional
-from .viewer import Viewer
-
-__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