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

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/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)