scitex 2.4.3__py3-none-any.whl → 2.5.0__py3-none-any.whl

scitex/vis/editor/flask_editor/renderer.py

@@ -0,0 +1,184 @@
+#!/usr/bin/env python3
+# -*- coding: utf-8 -*-
+# File: ./src/scitex/vis/editor/flask_editor/renderer.py
+"""Figure rendering for Flask editor."""
+
+from typing import Dict, Any, Tuple
+import base64
+import io
+
+import matplotlib
+matplotlib.use('Agg')
+import matplotlib.pyplot as plt
+from matplotlib.ticker import MaxNLocator
+from PIL import Image
+
+from .plotter import plot_from_csv
+from .bbox import extract_bboxes
+
+# mm to pt conversion factor
+MM_TO_PT = 2.83465
+
+
+def render_preview_with_bboxes(csv_data, overrides: Dict[str, Any], axis_fontsize: int = 7
+                               ) -> Tuple[str, Dict[str, Any], Dict[str, int]]:
+    """Render figure and return base64 PNG along with element bounding boxes.
+
+    Args:
+        csv_data: DataFrame containing CSV data
+        overrides: Dictionary with override settings
+        axis_fontsize: Default font size for axis labels
+
+    Returns:
+        tuple: (base64_image_data, bboxes_dict, image_size)
+    """
+    o = overrides
+
+    # Dimensions
+    dpi = o.get('dpi', 300)
+    fig_size = o.get('fig_size', [3.15, 2.68])
+
+    # Font sizes
+    axis_fontsize = o.get('axis_fontsize', 7)
+    tick_fontsize = o.get('tick_fontsize', 7)
+    title_fontsize = o.get('title_fontsize', 8)
+
+    # Line/axis thickness
+    linewidth_pt = o.get('linewidth', 0.57)
+    axis_width_pt = o.get('axis_width', 0.2) * MM_TO_PT
+    tick_length_pt = o.get('tick_length', 0.8) * MM_TO_PT
+    tick_width_pt = o.get('tick_width', 0.2) * MM_TO_PT
+    tick_direction = o.get('tick_direction', 'out')
+    x_n_ticks = o.get('x_n_ticks', o.get('n_ticks', 4))
+    y_n_ticks = o.get('y_n_ticks', o.get('n_ticks', 4))
+    hide_x_ticks = o.get('hide_x_ticks', False)
+    hide_y_ticks = o.get('hide_y_ticks', False)
+
+    transparent = o.get('transparent', True)
+
+    # Create figure
+    fig, ax = plt.subplots(figsize=fig_size, dpi=dpi)
+    _apply_background(fig, ax, o, transparent)
+
+    # Plot from CSV data
+    if csv_data is not None:
+        plot_from_csv(ax, csv_data, overrides, linewidth=linewidth_pt)
+    else:
+        ax.text(0.5, 0.5, "No plot data available\n(CSV not found)",
+               ha='center', va='center', transform=ax.transAxes,
+               fontsize=axis_fontsize)
+
+    # Apply labels
+    _apply_labels(ax, o, title_fontsize, axis_fontsize)
+
+    # Tick styling
+    _apply_tick_styling(ax, tick_fontsize, tick_length_pt, tick_width_pt, tick_direction,
+                        x_n_ticks, y_n_ticks, hide_x_ticks, hide_y_ticks)
+
+    # Apply grid, limits, spines
+    _apply_style(ax, o, axis_width_pt)
+
+    # Apply annotations
+    _apply_annotations(ax, o, axis_fontsize)
+
+    fig.tight_layout()
+
+    # Get element bounding boxes BEFORE saving (need renderer)
+    fig.canvas.draw()
+    renderer = fig.canvas.get_renderer()
+
+    # Save to buffer first to get actual image size
+    buf = io.BytesIO()
+    fig.savefig(buf, format='png', dpi=dpi, bbox_inches='tight', transparent=transparent)
+    buf.seek(0)
+
+    # Get actual saved image dimensions
+    img = Image.open(buf)
+    img_width, img_height = img.size
+    buf.seek(0)
+
+    # Get bboxes
+    bboxes = extract_bboxes(fig, ax, renderer, img_width, img_height)
+
+    img_data = base64.b64encode(buf.read()).decode('utf-8')
+    plt.close(fig)
+
+    return img_data, bboxes, {'width': img_width, 'height': img_height}
+
+
+def _apply_background(fig, ax, o, transparent):
+    """Apply background settings to figure."""
+    if transparent:
+        fig.patch.set_facecolor('none')
+        ax.patch.set_facecolor('none')
+    elif o.get('facecolor'):
+        fig.patch.set_facecolor(o['facecolor'])
+        ax.patch.set_facecolor(o['facecolor'])
+
+
+def _apply_labels(ax, o, title_fontsize, axis_fontsize):
+    """Apply title and axis labels."""
+    if o.get('title'):
+        ax.set_title(o['title'], fontsize=title_fontsize)
+    if o.get('xlabel'):
+        ax.set_xlabel(o['xlabel'], fontsize=axis_fontsize)
+    if o.get('ylabel'):
+        ax.set_ylabel(o['ylabel'], fontsize=axis_fontsize)
+
+
+def _apply_tick_styling(ax, tick_fontsize, tick_length_pt, tick_width_pt, tick_direction,
+                        x_n_ticks, y_n_ticks, hide_x_ticks, hide_y_ticks):
+    """Apply tick styling to axes."""
+    ax.tick_params(
+        axis='both',
+        labelsize=tick_fontsize,
+        length=tick_length_pt,
+        width=tick_width_pt,
+        direction=tick_direction,
+    )
+
+    if hide_x_ticks:
+        ax.xaxis.set_ticks([])
+        ax.xaxis.set_ticklabels([])
+    else:
+        ax.xaxis.set_major_locator(MaxNLocator(nbins=x_n_ticks))
+    if hide_y_ticks:
+        ax.yaxis.set_ticks([])
+        ax.yaxis.set_ticklabels([])
+    else:
+        ax.yaxis.set_major_locator(MaxNLocator(nbins=y_n_ticks))
+
+
+def _apply_style(ax, o, axis_width_pt):
+    """Apply grid, axis limits, and spine settings."""
+    if o.get('grid'):
+        ax.grid(True, linewidth=axis_width_pt, alpha=0.3)
+
+    if o.get('xlim'):
+        ax.set_xlim(o['xlim'])
+    if o.get('ylim'):
+        ax.set_ylim(o['ylim'])
+
+    if o.get('hide_top_spine', True):
+        ax.spines['top'].set_visible(False)
+    if o.get('hide_right_spine', True):
+        ax.spines['right'].set_visible(False)
+
+    for spine in ax.spines.values():
+        spine.set_linewidth(axis_width_pt)
+
+
+def _apply_annotations(ax, o, axis_fontsize):
+    """Apply text annotations to figure."""
+    for annot in o.get('annotations', []):
+        if annot.get('type') == 'text':
+            ax.text(
+                annot.get('x', 0.5),
+                annot.get('y', 0.5),
+                annot.get('text', ''),
+                transform=ax.transAxes,
+                fontsize=annot.get('fontsize', axis_fontsize),
+            )
+
+
+# EOF

scitex/vis/editor/flask_editor/templates/__init__.py

@@ -0,0 +1,33 @@
+#!/usr/bin/env python3
+# -*- coding: utf-8 -*-
+# File: ./src/scitex/vis/editor/flask_editor/templates/__init__.py
+"""Template components for Flask editor."""
+
+from .styles import CSS_STYLES
+from .scripts import JS_SCRIPTS
+from .html import HTML_BODY
+
+
+def build_html_template() -> str:
+    """Build the complete HTML template from components."""
+    return f'''<!DOCTYPE html>
+<html lang="en" data-theme="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>SciTeX Editor - {{{{ filename }}}}</title>
+    <style>
+{CSS_STYLES}
+    </style>
+</head>
+<body>
+{HTML_BODY}
+    <script>
+{JS_SCRIPTS}
+    </script>
+</body>
+</html>
+'''
+
+
+# EOF

scitex/vis/editor/flask_editor/templates/html.py

@@ -0,0 +1,295 @@
+#!/usr/bin/env python3
+# -*- coding: utf-8 -*-
+# File: ./src/scitex/vis/editor/flask_editor/templates/html.py
+"""HTML structure for the Flask editor UI."""
+
+HTML_BODY = '''
+<div class="container">
+    <div class="preview">
+        <div class="preview-wrapper">
+            <div class="preview-container" id="preview-container">
+                <img id="preview-img" src="" alt="Figure Preview">
+                <svg id="hover-overlay" class="hover-overlay"></svg>
+            </div>
+        </div>
+    </div>
+    <div class="controls">
+        <div class="controls-header">
+            <div>
+                <h1>SciTeX Editor</h1>
+                <div class="filename">{{ filename }}</div>
+            </div>
+            <button class="theme-toggle" onclick="toggleTheme()" title="Toggle light/dark mode">
+                <span id="theme-icon">&#9790;</span>
+            </button>
+        </div>
+
+        <div class="controls-body">
+            <!-- Labels Section -->
+            <div class="section" id="section-labels">
+                <div class="section-header section-toggle collapsed" onclick="toggleSection(this)">Labels</div>
+                <div class="section-content collapsed">
+                    <div class="field">
+                        <label>Title</label>
+                        <input type="text" id="title" placeholder="Figure title">
+                    </div>
+                    <div class="field-row">
+                        <div class="field">
+                            <label>X Label (Left)</label>
+                            <input type="text" id="xlabel" placeholder="X axis label">
+                        </div>
+                        <div class="field">
+                            <label>Y Label (Right)</label>
+                            <input type="text" id="ylabel" placeholder="Y axis label">
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Axis Limits Section -->
+            <div class="section" id="section-axis-limits">
+                <div class="section-header section-toggle collapsed" onclick="toggleSection(this)">Axis Limits</div>
+                <div class="section-content collapsed">
+                    <div class="field-row">
+                        <div class="field">
+                            <label>X (Left)</label>
+                            <div class="field-row" style="gap: 4px; margin-top: 4px;">
+                                <input type="number" id="xmin" step="any" placeholder="Min">
+                                <input type="number" id="xmax" step="any" placeholder="Max">
+                            </div>
+                        </div>
+                        <div class="field">
+                            <label>Y (Right)</label>
+                            <div class="field-row" style="gap: 4px; margin-top: 4px;">
+                                <input type="number" id="ymin" step="any" placeholder="Min">
+                                <input type="number" id="ymax" step="any" placeholder="Max">
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Traces Section -->
+            <div class="section" id="section-traces">
+                <div class="section-header section-toggle collapsed" onclick="toggleSection(this)">Traces</div>
+                <div class="section-content collapsed">
+                    <div class="traces-list" id="traces-list">
+                        <!-- Dynamically populated -->
+                    </div>
+                    <div class="field" style="margin-top: 10px;">
+                        <label>Default Line Width (pt)</label>
+                        <input type="number" id="linewidth" value="1.0" min="0.1" max="5" step="0.1">
+                    </div>
+                </div>
+            </div>
+
+            <!-- Legend Section -->
+            <div class="section" id="section-legend">
+                <div class="section-header section-toggle collapsed" onclick="toggleSection(this)">Legend</div>
+                <div class="section-content collapsed">
+                    <label class="checkbox-field">
+                        <input type="checkbox" id="legend_visible" checked>
+                        <span>Show Legend</span>
+                    </label>
+                    <div class="field">
+                        <label>Position</label>
+                        <select id="legend_loc" onchange="toggleCustomLegendPosition()">
+                            <option value="best">Best</option>
+                            <option value="upper right">Upper Right</option>
+                            <option value="upper left">Upper Left</option>
+                            <option value="lower right">Lower Right</option>
+                            <option value="lower left">Lower Left</option>
+                            <option value="center right">Center Right</option>
+                            <option value="center left">Center Left</option>
+                            <option value="upper center">Upper Center</option>
+                            <option value="lower center">Lower Center</option>
+                            <option value="center">Center</option>
+                            <option value="custom">Custom (Drag)</option>
+                        </select>
+                    </div>
+                    <div id="custom-legend-coords" class="field-row" style="display: none;">
+                        <div class="field">
+                            <label>X (0-1)</label>
+                            <input type="number" id="legend_x" value="0.5" min="0" max="1" step="0.01">
+                        </div>
+                        <div class="field">
+                            <label>Y (0-1)</label>
+                            <input type="number" id="legend_y" value="0.5" min="0" max="1" step="0.01">
+                        </div>
+                    </div>
+                    <label class="checkbox-field">
+                        <input type="checkbox" id="legend_frameon">
+                        <span>Show Frame</span>
+                    </label>
+                    <div class="field">
+                        <label>Font Size (pt)</label>
+                        <input type="number" id="legend_fontsize" value="6" min="4" max="16" step="1">
+                    </div>
+                </div>
+            </div>
+
+            <!-- Ticks Section -->
+            <div class="section" id="section-ticks">
+                <div class="section-header section-toggle collapsed" onclick="toggleSection(this)">Ticks</div>
+                <div class="section-content collapsed">
+                    <div class="field-row">
+                        <div class="field">
+                            <label>X (Left)</label>
+                            <label class="checkbox-field" style="margin-top: 4px;">
+                                <input type="checkbox" id="hide_x_ticks">
+                                <span>Hide</span>
+                            </label>
+                            <input type="number" id="x_n_ticks" value="4" min="2" max="10" step="1" placeholder="N Ticks" title="Number of ticks">
+                        </div>
+                        <div class="field">
+                            <label>Y (Right)</label>
+                            <label class="checkbox-field" style="margin-top: 4px;">
+                                <input type="checkbox" id="hide_y_ticks">
+                                <span>Hide</span>
+                            </label>
+                            <input type="number" id="y_n_ticks" value="4" min="2" max="10" step="1" placeholder="N Ticks" title="Number of ticks">
+                        </div>
+                    </div>
+                    <div class="field-row">
+                        <div class="field">
+                            <label>Font Size (pt)</label>
+                            <input type="number" id="tick_fontsize" value="7" min="4" max="16" step="1">
+                        </div>
+                        <div class="field">
+                            <label>Direction</label>
+                            <select id="tick_direction">
+                                <option value="out">Out</option>
+                                <option value="in">In</option>
+                                <option value="inout">Both</option>
+                            </select>
+                        </div>
+                    </div>
+                    <div class="field-row">
+                        <div class="field">
+                            <label>Tick Length (mm)</label>
+                            <input type="number" id="tick_length" value="0.8" min="0.1" max="3" step="0.1">
+                        </div>
+                        <div class="field">
+                            <label>Tick Width (mm)</label>
+                            <input type="number" id="tick_width" value="0.2" min="0.05" max="1" step="0.05">
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Style Section -->
+            <div class="section" id="section-style">
+                <div class="section-header section-toggle collapsed" onclick="toggleSection(this)">Style</div>
+                <div class="section-content collapsed">
+                    <label class="checkbox-field">
+                        <input type="checkbox" id="grid">
+                        <span>Show Grid</span>
+                    </label>
+                    <label class="checkbox-field">
+                        <input type="checkbox" id="hide_top_spine" checked>
+                        <span>Hide Top Spine</span>
+                    </label>
+                    <label class="checkbox-field">
+                        <input type="checkbox" id="hide_right_spine" checked>
+                        <span>Hide Right Spine</span>
+                    </label>
+                    <div class="field-row">
+                        <div class="field">
+                            <label>Axis Width (mm)</label>
+                            <input type="number" id="axis_width" value="0.2" min="0.05" max="1" step="0.05">
+                        </div>
+                        <div class="field">
+                            <label>Label Size (pt)</label>
+                            <input type="number" id="axis_fontsize" value="7" min="4" max="16" step="1">
+                        </div>
+                    </div>
+                    <div class="field">
+                        <label>Background Color</label>
+                        <div class="color-field">
+                            <input type="color" id="facecolor" value="#ffffff">
+                            <input type="text" id="facecolor_text" value="#ffffff" placeholder="#ffffff">
+                        </div>
+                    </div>
+                    <label class="checkbox-field">
+                        <input type="checkbox" id="transparent" checked>
+                        <span>Transparent Background</span>
+                    </label>
+                </div>
+            </div>
+
+            <!-- Dimensions Section -->
+            <div class="section" id="section-dimensions">
+                <div class="section-header section-toggle collapsed" onclick="toggleSection(this)">Dimensions</div>
+                <div class="section-content collapsed">
+                    <div class="field-row">
+                        <div class="field">
+                            <label>Width (inch)</label>
+                            <input type="number" id="fig_width" value="3.15" min="1" max="12" step="0.1">
+                        </div>
+                        <div class="field">
+                            <label>Height (inch)</label>
+                            <input type="number" id="fig_height" value="2.68" min="1" max="12" step="0.1">
+                        </div>
+                    </div>
+                    <div class="field">
+                        <label>DPI</label>
+                        <input type="number" id="dpi" value="300" min="72" max="600" step="1">
+                    </div>
+                </div>
+            </div>
+
+            <!-- Annotations Section -->
+            <div class="section" id="section-annotations">
+                <div class="section-header section-toggle collapsed" onclick="toggleSection(this)">Annotations</div>
+                <div class="section-content collapsed">
+                    <div class="field">
+                        <label>Text</label>
+                        <input type="text" id="annot-text" placeholder="Annotation text">
+                    </div>
+                    <div class="field-row">
+                        <div class="field">
+                            <label>X (0-1)</label>
+                            <input type="number" id="annot-x" value="0.5" min="0" max="1" step="0.05">
+                        </div>
+                        <div class="field">
+                            <label>Y (0-1)</label>
+                            <input type="number" id="annot-y" value="0.5" min="0" max="1" step="0.05">
+                        </div>
+                        <div class="field">
+                            <label>Size</label>
+                            <input type="number" id="annot-size" value="8" min="4" max="24" step="1">
+                        </div>
+                    </div>
+                    <button class="btn btn-secondary" onclick="addAnnotation()">Add Annotation</button>
+                    <div class="annotations-list" id="annotations-list"></div>
+                </div>
+            </div>
+
+            <!-- Actions Section -->
+            <div class="section">
+                <div class="section-header">Actions</div>
+                <div class="field-row" style="align-items: center; margin-bottom: 8px;">
+                    <div class="field" style="flex: 1;">
+                        <label>Auto-Update</label>
+                        <select id="auto_update_interval" onchange="setAutoUpdateInterval()">
+                            <option value="0">Off</option>
+                            <option value="500">Hot (0.5s)</option>
+                            <option value="1000">Fast (1s)</option>
+                            <option value="2000" selected>Normal (2s)</option>
+                            <option value="5000">Slow (5s)</option>
+                        </select>
+                    </div>
+                    <button class="btn btn-cta" onclick="updatePreview()" style="flex: 0; margin-left: 8px;">Update Now</button>
+                </div>
+                <button class="btn btn-primary" onclick="saveManual()" title="Ctrl+S">Save to .manual.json</button>
+                <button class="btn btn-secondary" onclick="resetOverrides()">Reset to Original</button>
+            </div>
+
+            <div class="status-bar" id="status">Ready</div>
+        </div>
+    </div>
+</div>
+'''
+
+
+# EOF