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

syd/flask_deployment/deployer.py

@@ -0,0 +1,302 @@
+from typing import Dict, Any, Optional, List
+import warnings
+from functools import wraps
+from dataclasses import dataclass
+from contextlib import contextmanager
+from time import time
+import base64
+from io import BytesIO
+import threading
+import webbrowser
+from pathlib import Path
+
+from flask import Flask, render_template, jsonify, request, Response
+import matplotlib as mpl
+import matplotlib.pyplot as plt
+
+from ..parameters import ParameterUpdateWarning
+from ..viewer import Viewer
+from .components import BaseComponent, ComponentStyle, create_component
+
+
+@contextmanager
+def _plot_context():
+    plt.ioff()
+    try:
+        yield
+    finally:
+        plt.ion()
+
+
+def get_backend_type():
+    """
+    Determines the current matplotlib backend type and returns relevant info
+    """
+    backend = mpl.get_backend().lower()
+    if "agg" in backend:
+        return "agg"
+    elif "inline" in backend:
+        return "inline"
+    else:
+        # Force Agg backend for Flask
+        mpl.use("Agg")
+        return "agg"
+
+
+def debounce(wait_time):
+    """
+    Decorator to prevent a function from being called more than once every wait_time seconds.
+    """
+
+    def decorator(fn):
+        last_called = [0.0]  # Using list to maintain state in closure
+
+        @wraps(fn)
+        def debounced(*args, **kwargs):
+            current_time = time()
+            if current_time - last_called[0] >= wait_time:
+                fn(*args, **kwargs)
+                last_called[0] = current_time
+
+        return debounced
+
+    return decorator
+
+
+@dataclass
+class LayoutConfig:
+    """Configuration for the viewer layout."""
+
+    controls_position: str = "left"  # Options are: 'left', 'top', 'right', 'bottom'
+    figure_width: float = 8.0
+    figure_height: float = 6.0
+    controls_width_percent: int = 30
+    template_path: Optional[str] = None
+    static_path: Optional[str] = None
+
+    def __post_init__(self):
+        valid_positions = ["left", "top", "right", "bottom"]
+        if self.controls_position not in valid_positions:
+            raise ValueError(
+                f"Invalid controls position: {self.controls_position}. Must be one of {valid_positions}"
+            )
+
+    @property
+    def is_horizontal(self) -> bool:
+        return self.controls_position == "left" or self.controls_position == "right"
+
+
+class FlaskDeployer:
+    """
+    A deployment system for Viewer in Flask web applications.
+    Built around the parameter component system for clean separation of concerns.
+    """
+
+    def __init__(
+        self,
+        viewer: Viewer,
+        controls_position: str = "left",
+        figure_width: float = 8.0,
+        figure_height: float = 6.0,
+        controls_width_percent: int = 30,
+        continuous: bool = False,
+        suppress_warnings: bool = False,
+        host: str = "127.0.0.1",
+        port: int = 5000,
+        template_path: Optional[str] = None,
+        static_path: Optional[str] = None,
+    ):
+        self.viewer = viewer
+        self.config = LayoutConfig(
+            controls_position=controls_position,
+            figure_width=figure_width,
+            figure_height=figure_height,
+            controls_width_percent=controls_width_percent,
+            template_path=template_path,
+            static_path=static_path,
+        )
+        self.continuous = continuous
+        self.suppress_warnings = suppress_warnings
+        self.host = host
+        self.port = port
+
+        # Initialize containers
+        self.backend_type = get_backend_type()
+        self.parameter_components: Dict[str, BaseComponent] = {}
+        self.app = self._create_flask_app()
+
+        # Flag to prevent circular updates
+        self._updating = False
+
+        # Last figure to close when new figures are created
+        self._last_figure = None
+
+    def _create_flask_app(self) -> Flask:
+        """Create and configure the Flask application."""
+        template_path = self.config.template_path or str(
+            Path(__file__).parent / "templates"
+        )
+        static_path = self.config.static_path or str(Path(__file__).parent / "static")
+
+        app = Flask(__name__, template_folder=template_path, static_folder=static_path)
+
+        # Register routes
+        @app.route("/")
+        def index():
+            # Generate initial plot
+            initial_plot = self._generate_plot()
+            if initial_plot is not None:
+                buffer = BytesIO()
+                initial_plot.savefig(buffer, format="png", bbox_inches="tight")
+                buffer.seek(0)
+                initial_plot_data = base64.b64encode(buffer.getvalue()).decode()
+            else:
+                initial_plot_data = ""
+
+            return render_template(
+                "viewer.html",
+                components=self._get_component_html(),
+                controls_position=self.config.controls_position,
+                controls_width=self.config.controls_width_percent,
+                figure_width=self.config.figure_width,
+                figure_height=self.config.figure_height,
+                continuous=self.continuous,
+                initial_plot=initial_plot_data,
+            )
+
+        @app.route("/update/<name>", methods=["POST"])
+        def update_parameter(name: str):
+            if name not in self.viewer.parameters:
+                return jsonify({"error": f"Parameter {name} not found"}), 404
+
+            try:
+                value = request.json["value"]
+                self._handle_parameter_update(name, value)
+                return jsonify({"success": True})
+            except Exception as e:
+                return jsonify({"error": str(e)}), 400
+
+        @app.route("/state")
+        def get_state():
+            return jsonify(self.viewer.state)
+
+        @app.route("/plot")
+        def get_plot():
+            # Generate plot and convert to base64 PNG
+            figure = self._generate_plot()
+            if figure is None:
+                return jsonify({"error": "Failed to generate plot"}), 500
+
+            # Save plot to bytes buffer
+            buffer = BytesIO()
+            figure.savefig(buffer, format="png", bbox_inches="tight")
+            buffer.seek(0)
+            image_base64 = base64.b64encode(buffer.getvalue()).decode()
+
+            return jsonify({"image": image_base64})
+
+        return app
+
+    def _create_parameter_components(self) -> None:
+        """Create component instances for all parameters."""
+        style = ComponentStyle(
+            width="100%",
+            margin="10px 0",
+            description_width="auto",
+        )
+
+        for name, param in self.viewer.parameters.items():
+            component = create_component(
+                param,
+                continuous=self.continuous,
+                style=style,
+            )
+            self.parameter_components[name] = component
+
+    def _get_component_html(self) -> List[str]:
+        """Get HTML for all components."""
+        if not self.parameter_components:
+            self._create_parameter_components()
+        return [comp.html for comp in self.parameter_components.values()]
+
+    @debounce(0.2)
+    def _handle_parameter_update(self, name: str, value: Any) -> None:
+        """Handle updates to parameter values."""
+        if self._updating:
+            print(
+                "Already updating -- there's a circular dependency!"
+                "This is probably caused by failing to disable callbacks for a parameter."
+                "It's a bug --- tell the developer on github issues please."
+            )
+            return
+
+        try:
+            self._updating = True
+
+            # Optionally suppress warnings during parameter updates
+            with warnings.catch_warnings():
+                if self.suppress_warnings:
+                    warnings.filterwarnings("ignore", category=ParameterUpdateWarning)
+
+                component = self.parameter_components[name]
+                if component._is_action:
+                    parameter = self.viewer.parameters[name]
+                    parameter.callback(self.viewer.state)
+                else:
+                    self.viewer.set_parameter_value(name, value)
+
+                # Update any components that changed due to dependencies
+                self._sync_components_with_state(exclude=name)
+
+        finally:
+            self._updating = False
+
+    def _sync_components_with_state(self, exclude: Optional[str] = None) -> None:
+        """Sync component values with viewer state."""
+        for name, parameter in self.viewer.parameters.items():
+            if name == exclude:
+                continue
+
+            component = self.parameter_components[name]
+            if not component.matches_parameter(parameter):
+                component.update_from_parameter(parameter)
+
+    def _generate_plot(self) -> Optional[plt.Figure]:
+        """Generate the current plot."""
+        try:
+            with _plot_context():
+                figure = self.viewer.plot(self.viewer.state)
+
+            # Close the last figure if it exists to keep matplotlib clean
+            if self._last_figure is not None:
+                plt.close(self._last_figure)
+
+            self._last_figure = figure
+            return figure
+        except Exception as e:
+            print(f"Error generating plot: {e}")
+            return None
+
+    def deploy(self, open_browser: bool = True) -> None:
+        """
+        Deploy the viewer as a Flask web application.
+
+        Parameters
+        ----------
+        open_browser : bool, optional
+            Whether to automatically open the browser when deploying (default: True)
+        """
+        with self.viewer._deploy_app():
+            if open_browser:
+                # Open browser in a separate thread to not block
+                threading.Timer(
+                    1.0, lambda: webbrowser.open(f"http://{self.host}:{self.port}")
+                ).start()
+
+            # Start Flask app
+            self.app.run(
+                host=self.host,
+                port=self.port,
+                debug=False,  # Debug mode doesn't work well with matplotlib
+                use_reloader=False,  # Reloader causes issues with matplotlib
+            )

syd/flask_deployment/static/css/viewer.css

@@ -0,0 +1,82 @@
+/* General layout */
+html, body {
+    height: 100vh;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+}
+
+.viewer-container {
+    height: 100vh;
+    width: 100vw;
+}
+
+/* Controls container */
+.controls-container {
+    background-color: #f8f9fa;
+    border-right: 1px solid #dee2e6;
+    overflow-y: auto;
+}
+
+.w-controls {
+    width: var(--controls-width);
+}
+
+/* Plot container */
+.plot-container {
+    background-color: white;
+    min-height: 300px;
+}
+
+.plot-container img {
+    max-width: var(--figure-width);
+    max-height: var(--figure-height);
+    object-fit: contain;
+}
+
+/* Form controls */
+.form-control {
+    margin-bottom: 1rem;
+}
+
+.form-label {
+    font-weight: 500;
+    margin-bottom: 0.5rem;
+}
+
+/* Range inputs */
+input[type="range"] {
+    width: 100%;
+}
+
+output {
+    margin-left: 0.5rem;
+}
+
+/* Multiple select */
+select[multiple] {
+    height: auto;
+    min-height: 100px;
+}
+
+/* Button styling */
+.btn-primary {
+    width: 100%;
+    margin-bottom: 1rem;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+    .viewer-container {
+        flex-direction: column !important;
+    }
+
+    .controls-container {
+        width: 100% !important;
+        max-height: 40vh;
+    }
+
+    .plot-container {
+        height: 60vh;
+    }
+} 

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

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <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>
+    <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>
+    
+    {% block extra_scripts %}{% endblock %}
+</body>
+</html> 

syd/flask_deployment/templates/viewer.html

@@ -0,0 +1,51 @@
+{% 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>
+
+    {% 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 %}