syd 0.1.6__py3-none-any.whl → 0.1.7__py3-none-any.whl

syd/flask_deployment/static/js/viewer.js

@@ -0,0 +1,174 @@
+class SydViewer {
+    constructor(config) {
+        this.config = {
+            controlsPosition: 'left',
+            continuous: false,
+            updateInterval: 200,
+            ...config
+        };
+
+        this.form = document.getElementById('controls-form');
+        this.plot = document.getElementById('plot');
+        this.updateTimer = null;
+        this.setupEventListeners();
+        this.updatePlot();
+    }
+
+    setupEventListeners() {
+        // Handle all form input changes
+        this.form.addEventListener('input', (event) => {
+            const input = event.target;
+            if (input.dataset.continuous === 'true' || this.config.continuous) {
+                this.debounceUpdate(() => this.handleInputChange(input));
+            }
+        });
+
+        // Handle form changes for non-continuous updates
+        this.form.addEventListener('change', (event) => {
+            const input = event.target;
+            if (input.dataset.continuous !== 'true' && !this.config.continuous) {
+                this.handleInputChange(input);
+            }
+        });
+
+        // Handle button clicks
+        this.form.querySelectorAll('button[type="button"]').forEach(button => {
+            button.addEventListener('click', () => this.handleButtonClick(button));
+        });
+    }
+
+    debounceUpdate(callback) {
+        if (this.updateTimer) {
+            clearTimeout(this.updateTimer);
+        }
+        this.updateTimer = setTimeout(callback, this.config.updateInterval);
+    }
+
+    async handleInputChange(input) {
+        let value = this.getInputValue(input);
+        const name = input.name;
+
+        try {
+            const response = await fetch(`/update/${name}`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({ value }),
+            });
+
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+
+            await this.updatePlot();
+        } catch (error) {
+            console.error('Error updating parameter:', error);
+        }
+    }
+
+    async handleButtonClick(button) {
+        const name = button.name;
+        try {
+            const response = await fetch(`/update/${name}`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({ value: null }),
+            });
+
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+
+            await this.updatePlot();
+        } catch (error) {
+            console.error('Error handling button click:', error);
+        }
+    }
+
+    getInputValue(input) {
+        switch (input.type) {
+            case 'checkbox':
+                return input.checked;
+            case 'number':
+                return parseFloat(input.value);
+            case 'range':
+                if (input.name.endsWith('_low')) {
+                    const high = document.getElementById(input.id.replace('_low', '_high')).value;
+                    return [parseFloat(input.value), parseFloat(high)];
+                } else if (input.name.endsWith('_high')) {
+                    const low = document.getElementById(input.id.replace('_high', '_low')).value;
+                    return [parseFloat(low), parseFloat(input.value)];
+                }
+                return parseFloat(input.value);
+            case 'select-multiple':
+                return Array.from(input.selectedOptions).map(option => {
+                    const value = option.value;
+                    return !isNaN(value) ? parseFloat(value) : value;
+                });
+            default:
+                const value = input.value;
+                return !isNaN(value) ? parseFloat(value) : value;
+        }
+    }
+
+    async updatePlot() {
+        try {
+            const response = await fetch('/plot');
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+
+            const data = await response.json();
+            if (data.error) {
+                throw new Error(data.error);
+            }
+
+            this.plot.src = `data:image/png;base64,${data.image}`;
+        } catch (error) {
+            console.error('Error updating plot:', error);
+        }
+    }
+
+    async updateState() {
+        try {
+            const response = await fetch('/state');
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+
+            const state = await response.json();
+            this.syncFormWithState(state);
+        } catch (error) {
+            console.error('Error updating state:', error);
+        }
+    }
+
+    syncFormWithState(state) {
+        for (const [name, value] of Object.entries(state)) {
+            const input = this.form.elements[name];
+            if (!input) continue;
+
+            if (input.type === 'checkbox') {
+                input.checked = value;
+            } else if (input.type === 'select-multiple') {
+                Array.from(input.options).forEach(option => {
+                    option.selected = value.includes(option.value);
+                });
+            } else if (input.type === 'range' && Array.isArray(value)) {
+                const [low, high] = value;
+                document.getElementById(`param_${name}_low`).value = low;
+                document.getElementById(`param_${name}_high`).value = high;
+                document.querySelector(`output[for="param_${name}_low"]`).value = low;
+                document.querySelector(`output[for="param_${name}_high"]`).value = high;
+            } else {
+                input.value = value;
+                if (input.type === 'range') {
+                    document.querySelector(`output[for="${input.id}"]`).value = value;
+                }
+            }
+        }
+    }
+} 

syd/flask_deployment/templates/base.html

@@ -1,26 +1,29 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
-    <title>{% block title %}Interactive Viewer{% endblock %}</title>
-    {% for css in required_css %}
-    <link rel="stylesheet" href="{{ css }}">
-    {% endfor %}
-    <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
-    <style>
-        :root {
-            --controls-width: {{ config.controls_width_percent }}%;
-            --plot-width: {{ 100 - config.controls_width_percent }}%;
-        }
-        {{ custom_styles | safe }}
-    </style>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{% block title %}Syd Viewer{% endblock %}</title>
+    
+    <!-- Bootstrap CSS -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
+    
+    <!-- Custom CSS -->
+    <link href="{{ url_for('static', filename='css/viewer.css') }}" rel="stylesheet">
+    
+    {% block extra_head %}{% endblock %}
 </head>
 <body>
-    {% block content %}{% endblock %}
+    <div class="container-fluid p-0">
+        {% block content %}{% endblock %}
+    </div>
+
+    <!-- Bootstrap Bundle with Popper -->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
+    
+    <!-- Custom JavaScript -->
+    <script src="{{ url_for('static', filename='js/viewer.js') }}"></script>
     
-    {% for js in required_js %}
-    <script src="{{ js }}"></script>
-    {% endfor %}
-    <script src="{{ url_for('static', filename='js/components.js') }}"></script>
-    {% block scripts %}{% endblock %}
+    {% block extra_scripts %}{% endblock %}
 </body>
-</html>
+</html> 

syd/flask_deployment/templates/viewer.html

@@ -1,97 +1,51 @@
-# templates/viewer.html
-<!DOCTYPE html>
-<html>
-<head>
-    <title>Interactive Viewer</title>
-    {% for css in required_css %}
-    <link rel="stylesheet" href="{{ css }}">
-    {% endfor %}
-    <style>
-        {{ custom_styles | safe }}
-        .controls {
-            {% if config.is_horizontal %}
-            width: {{ config.controls_width_percent }}%;
-            float: left;
-            padding-right: 20px;
-            {% endif %}
-        }
-        .plot-container {
-            {% if config.is_horizontal %}
-            width: {{ 100 - config.controls_width_percent }}%;
-            float: left;
-            {% endif %}
-        }
-        #plot {
-            width: 100%;
-            height: auto;
-        }
-    </style>
-</head>
-<body>
-    <div class="container-fluid">
-        <div class="row">
-            <div class="controls">
-                {{ components_html | safe }}
-            </div>
-            <div class="plot-container">
-                <img id="plot" src="{{ initial_plot }}">
-            </div>
+{% extends "base.html" %}
+
+{% block extra_head %}
+<style>
+    :root {
+        --controls-width: {{ controls_width }}%;
+        --figure-width: {{ figure_width }}px;
+        --figure-height: {{ figure_height }}px;
+    }
+</style>
+{% endblock %}
+
+{% block content %}
+<div class="viewer-container {% if controls_position in ['left', 'right'] %}d-flex flex-row{% else %}d-flex flex-column{% endif %} h-100"
+     data-controls-position="{{ controls_position }}"
+     data-continuous="{{ continuous|default(false)|tojson }}">
+    {% if controls_position in ['left', 'top'] %}
+        <div class="controls-container {% if controls_position == 'left' %}w-controls{% else %}w-100{% endif %}">
+            <form id="controls-form" class="p-3">
+                {{ components|join('')|safe }}
+            </form>
         </div>
+    {% endif %}
+
+    <div class="plot-container {% if controls_position in ['left', 'right'] %}flex-grow-1{% else %}w-100{% endif %} d-flex justify-content-center align-items-center p-3">
+        <img id="plot" src="{% if initial_plot %}data:image/png;base64,{{ initial_plot }}{% endif %}" alt="Plot" class="img-fluid">
     </div>
-    
-    {% for js in required_js %}
-    <script src="{{ js }}"></script>
-    {% endfor %}
-    
-    <script>
-        function updateParameter(name, value) {
-            fetch('/update_parameter', {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify({name, value})
-            })
-            .then(response => response.json())
-            .then(data => {
-                if (data.error) {
-                    console.error(data.error);
-                    return;
-                }
-                // Update plot
-                document.getElementById('plot').src = data.plot;
-                // Apply any parameter updates
-                for (const [param, js] of Object.entries(data.updates)) {
-                    eval(js);
-                }
-            });
-        }
-        
-        function buttonClick(name) {
-            fetch('/button_click', {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify({name})
-            })
-            .then(response => response.json())
-            .then(data => {
-                if (data.error) {
-                    console.error(data.error);
-                    return;
-                }
-                // Update plot
-                document.getElementById('plot').src = data.plot;
-                // Apply any parameter updates
-                for (const [param, js] of Object.entries(data.updates)) {
-                    eval(js);
-                }
-            });
-        }
-        
-        // Initialize components
-        {{ components_init | safe }}
-    </script>
-</body>
-</html>
+
+    {% if controls_position in ['right', 'bottom'] %}
+        <div class="controls-container {% if controls_position == 'right' %}w-controls{% else %}w-100{% endif %}">
+            <form id="controls-form" class="p-3">
+                {{ components|join('')|safe }}
+            </form>
+        </div>
+    {% endif %}
+</div>
+{% endblock %}
+
+{% block extra_scripts %}
+<script>
+    // Initialize the viewer with configuration
+    document.addEventListener('DOMContentLoaded', function() {
+        const container = document.querySelector('.viewer-container');
+        window.viewer = new SydViewer({
+            controlsPosition: container.dataset.controlsPosition,
+            continuous: JSON.parse(container.dataset.continuous),
+            updateInterval: 200
+        });
+    });
+</script>
+{% endblock %} 

syd/flask_deployment/testing_principles.md

@@ -0,0 +1,300 @@
+# Testing Principles for SYD Flask Deployment
+
+## Overview
+
+Testing an interactive GUI application like the SYD Flask deployment presents unique challenges. While traditional test suites focus on programmatic API testing, interactive GUIs require a different approach that combines several testing methodologies. This document outlines a comprehensive testing strategy for the SYD Flask deployment.
+
+## Testing Pyramid for Interactive GUIs
+
+For the SYD Flask deployment, we recommend implementing a modified testing pyramid with the following layers:
+
+1. **Unit Tests** - Test isolated components and functions
+2. **Integration Tests** - Test interactions between components
+3. **API Tests** - Test Flask API endpoints
+4. **Headless Browser Tests** - Test GUI interactions programmatically
+5. **Visual Regression Tests** - Ensure UI appearance remains consistent
+6. **Manual Testing Checklists** - Structured human verification
+
+## 1. Unit Tests
+
+### What to Test
+- Individual Flask routes
+- Component HTML generation functions
+- Parameter update handlers
+- State synchronization logic
+- Plot generation utilities
+
+### Implementation Strategy
+```python
+import unittest
+from unittest import mock
+from syd.flask_deployment.deployer import FlaskDeployer
+from syd.flask_deployment.components import create_component
+
+class TestFlaskDeployerComponents(unittest.TestCase):
+    def setUp(self):
+        self.mock_viewer = mock.MagicMock()
+        self.deployer = FlaskDeployer(self.mock_viewer)
+        
+    def test_create_float_component(self):
+        mock_param = mock.MagicMock()
+        mock_param.name = "test_param"
+        mock_param.value = 5.0
+        component = create_component(mock_param)
+        self.assertIn("test_param", component.html)
+        self.assertIn("5.0", component.html)
+```
+
+## 2. Integration Tests
+
+### What to Test
+- Parameter creation to HTML rendering pipeline
+- Parameter update → state sync → component update flow
+- Plot generation and serving workflow
+
+### Implementation Strategy
+```python
+def test_parameter_update_state_sync():
+    # Create real viewer with test parameters
+    viewer = Viewer()
+    viewer.add_float('test_param', value=1.0, min_value=0, max_value=10)
+    
+    # Create deployer with this viewer
+    deployer = FlaskDeployer(viewer)
+    
+    # Update parameter and check if components reflect the change
+    deployer._handle_parameter_update('test_param', 5.0)
+    
+    # Verify component has updated
+    component = deployer.parameter_components['test_param']
+    self.assertEqual(component.value, 5.0)
+```
+
+## 3. API Tests
+
+### What to Test
+- All Flask endpoints (`/`, `/update/<name>`, `/state`, `/plot`)
+- Response formats and status codes
+- Error handling
+- Race conditions with concurrent requests
+
+### Implementation Strategy
+```python
+def test_update_parameter_endpoint():
+    viewer = Viewer()
+    viewer.add_float('test_param', value=1.0, min_value=0, max_value=10)
+    deployer = FlaskDeployer(viewer)
+    app = deployer.app
+    
+    with app.test_client() as client:
+        # Test successful update
+        response = client.post('/update/test_param', 
+                               json={'value': 5.0})
+        self.assertEqual(response.status_code, 200)
+        self.assertEqual(viewer.state['test_param'], 5.0)
+        
+        # Test parameter not found
+        response = client.post('/update/nonexistent', 
+                               json={'value': 5.0})
+        self.assertEqual(response.status_code, 404)
+```
+
+## 4. Headless Browser Tests
+
+### What to Test
+- User interactions with the web interface
+- Parameter widget interactions
+- UI updates in response to parameter changes
+- Plot refreshes
+
+### Implementation Strategy
+
+Use Selenium or Playwright to automate browser interactions:
+
+```python
+from selenium import webdriver
+from selenium.webdriver.common.by import By
+
+def test_slider_interaction():
+    # Start the Flask app in a separate thread
+    viewer = create_test_viewer()
+    deployer = FlaskDeployer(viewer)
+    thread = threading.Thread(target=deployer.app.run)
+    thread.daemon = True
+    thread.start()
+    
+    # Use Selenium to interact with the web interface
+    driver = webdriver.Chrome()
+    driver.get('http://localhost:5000')
+    
+    # Find a slider and interact with it
+    slider = driver.find_element(By.ID, 'param_amplitude')
+    slider.send_keys(webdriver.Keys.ARROW_RIGHT * 5)  # Increase value
+    
+    # Verify the plot updates
+    # This requires some way to detect that the plot has changed
+    # Could check the src attribute of the image element changes
+    time.sleep(1)  # Allow time for update
+    plot_src = driver.find_element(By.ID, 'plot').get_attribute('src')
+    self.assertTrue(len(plot_src) > 0)
+    
+    driver.quit()
+```
+
+## 5. Visual Regression Tests
+
+### What to Test
+- UI appearance remains consistent across changes
+- Components render correctly with different values
+- Layout adapts properly to different screen sizes
+
+### Implementation Strategy
+
+Use tools like Percy or BackstopJS to capture and compare screenshots:
+
+```python
+def test_visual_appearance():
+    # Set up test app with standard parameters
+    app = create_standard_test_app()
+    
+    # Use a tool like Percy
+    percy_snapshot(driver, 'Main view')
+    
+    # Change to different layout
+    driver.get('http://localhost:5000?controls_position=right')
+    percy_snapshot(driver, 'Right controls layout')
+    
+    # Test responsive views
+    driver.set_window_size(400, 800)  # Mobile size
+    percy_snapshot(driver, 'Mobile view')
+```
+
+## 6. Manual Testing Checklists
+
+For some aspects of interactive GUI applications, manual testing remains necessary. Create structured checklists for testers:
+
+```markdown
+# Manual Testing Checklist
+
+## Parameter Interactions
+- [ ] Sliders respond smoothly to mouse drag
+- [ ] Number inputs accept keyboard input
+- [ ] Range sliders correctly display and update both values
+- [ ] Toggles switch state when clicked
+- [ ] Dropdowns show all options and select correctly
+
+## Plot Updates
+- [ ] Plot updates immediately after parameter change when continuous=True
+- [ ] Plot updates only after interaction ends when continuous=False
+- [ ] Plot maintains aspect ratio when window is resized
+- [ ] No visual glitches during plot transitions
+
+## Layouts
+- [ ] Test all layouts: left, right, top, bottom
+- [ ] Verify responsive behavior on different screen sizes
+```
+
+## Automated Testing Framework
+
+To bring this all together, we recommend implementing a pytest-based testing framework:
+
+```python
+# conftest.py
+import pytest
+from syd import make_viewer
+import numpy as np
+import matplotlib.pyplot as plt
+
+@pytest.fixture
+def standard_test_viewer():
+    """Create a standard viewer for testing."""
+    viewer = make_viewer()
+    
+    def plot(state):
+        fig, ax = plt.subplots()
+        x = np.linspace(0, 10, 1000)
+        y = state['amplitude'] * np.sin(state['frequency'] * x)
+        ax.plot(x, y)
+        return fig
+        
+    viewer.set_plot(plot)
+    viewer.add_float('amplitude', value=1.0, min_value=0, max_value=2)
+    viewer.add_float('frequency', value=1.0, min_value=0.1, max_value=5)
+    
+    return viewer
+
+@pytest.fixture
+def flask_app(standard_test_viewer):
+    """Create a Flask app for testing."""
+    from syd.flask_deployment.deployer import FlaskDeployer
+    deployer = FlaskDeployer(standard_test_viewer)
+    return deployer.app
+```
+
+## Continuous Integration Setup
+
+Integrate these tests into a CI pipeline:
+
+```yaml
+# .github/workflows/flask-tests.yml
+name: Flask Deployment Tests
+
+on:
+  push:
+    paths:
+      - 'syd/flask_deployment/**'
+      - 'tests/flask/**'
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - name: Set up Python
+        uses: actions/setup-python@v2
+        with:
+          python-version: '3.9'
+      - name: Install dependencies
+        run: |
+          python -m pip install --upgrade pip
+          pip install -e ".[test]"
+      - name: Run unit and integration tests
+        run: pytest tests/flask/test_unit_integration.py
+      - name: Run API tests
+        run: pytest tests/flask/test_api.py
+      - name: Set up Chrome WebDriver
+        uses: browser-actions/setup-chrome@latest
+      - name: Run headless browser tests
+        run: pytest tests/flask/test_browser.py
+      - name: Upload visual test artifacts
+        uses: actions/upload-artifact@v2
+        with:
+          name: visual-test-results
+          path: tests/flask/visual/results
+```
+
+## Practical Implementation Plan
+
+For the SYD Flask deployment, we recommend implementing tests in this order:
+
+1. **Start with Unit Tests** - Focus on individual components and functions
+2. **Add API Tests** - Ensure all endpoints work correctly
+3. **Implement Integration Tests** - Test component interactions
+4. **Add Visual Testing** - Simple screenshot comparisons
+5. **Create Browser Tests** - For critical UI workflows
+
+## Testing Challenges and Solutions
+
+| Challenge | Solution |
+|-----------|----------|
+| Testing real-time updates | Use JavaScript triggers and MutationObserver in browser tests |
+| Asynchronous plot generation | Implement wait utilities with timeouts |
+| Visual inconsistencies across platforms | Use Percy or similar to handle cross-platform rendering |
+| Slow browser tests | Run only critical UI tests in CI, more comprehensive ones nightly |
+| Matplotlib backend differences | Mock or standardize backends during testing |
+
+## Conclusion
+
+Testing an interactive GUI like the SYD Flask deployment requires a multi-layered approach. By combining traditional unit and integration tests with specialized GUI testing tools, we can achieve good test coverage while still accommodating the unique challenges of interactive web applications. The most effective strategy is to automate as much as possible while maintaining a structured approach to manual testing for aspects that are difficult to verify programmatically.
+
+For the initial implementation of the testing framework, focus on establishing solid unit and API tests, as these will provide the foundation for more complex tests and help catch the most common issues early in the development process.

syd/notebook_deployment/__init__.py

@@ -1 +1 @@
-from .deployer import NotebookDeployment
+from .deployer import NotebookDeployer