synapse-sdk 1.0.0a98__py3-none-any.whl → 1.0.0b1__py3-none-any.whl

synapse_sdk/devtools/streamlit_app/utils/json_viewer.py

@@ -0,0 +1,197 @@
+"""Professional JSON viewer component."""
+
+import json
+from typing import Any, Dict, List, Union
+
+import streamlit as st
+from streamlit_ace import st_ace
+
+
+def format_json_value(value: Any, indent: int = 0) -> str:
+    """Format a JSON value for display."""
+    if isinstance(value, (dict, list)):
+        return json.dumps(value, indent=2)
+    elif isinstance(value, str):
+        return f'"{value}"'
+    elif value is None:
+        return 'null'
+    elif isinstance(value, bool):
+        return 'true' if value else 'false'
+    else:
+        return str(value)
+
+
+def render_json_compact(data: Union[Dict, List], title: str = None, expanded: bool = True):
+    """Render JSON data in a compact, professional format."""
+    if not data:
+        return
+
+    if title:
+        st.markdown(f'### {title}')
+
+    # Use code editor for better JSON display
+    json_str = json.dumps(data, indent=2, ensure_ascii=False)
+
+    # Calculate appropriate height based on content
+    lines = json_str.count('\n') + 1
+    height = min(max(100, lines * 20), 600)  # Min 100px, max 600px
+
+    st_ace(
+        value=json_str,
+        language='json',
+        theme='monokai',
+        key=f'json_viewer_{title}_{hash(json_str)}',
+        height=height,
+        auto_update=False,
+        font_size=13,
+        show_gutter=True,
+        show_print_margin=False,
+        wrap=False,
+        annotations=None,
+        readonly=True,
+    )
+
+
+def render_json_as_table(data: Dict, title: str = None):
+    """Render JSON data as a formatted table for key-value pairs."""
+    if not data:
+        return
+
+    if title:
+        st.markdown(f'### {title}')
+
+    # Create HTML table - use compact string to avoid rendering issues
+    html = (  # noqa: E501
+        '<style>'
+        '.json-table { width: 100%; border-collapse: collapse; font-family: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", monospace; font-size: 13px; margin: 10px 0; }'  # noqa: E501
+        '.json-table th { background-color: #2d2d2d; color: #f0f0f0; text-align: left; padding: 10px 15px; border-bottom: 2px solid #444; font-weight: 600; }'  # noqa: E501
+        '.json-table td { padding: 8px 15px; border-bottom: 1px solid #e0e0e0; vertical-align: top; }'
+        '.json-table tr:hover { background-color: #f8f9fa; }'
+        '.json-key { color: #0066cc; font-weight: 500; white-space: nowrap; width: 30%; }'
+        '.json-value { color: #333; word-break: break-word; }'
+        '.json-value-null { color: #999; font-style: italic; }'
+        '.json-value-bool { color: #d73a49; }'
+        '.json-value-number { color: #005cc5; }'
+        '.json-value-string { color: #032f62; }'
+        '.json-value-object { color: #6f42c1; font-family: "SF Mono", Monaco, monospace; font-size: 12px; background-color: #f6f8fa; padding: 4px 8px; border-radius: 3px; display: inline-block; max-width: 500px; overflow-x: auto; }'  # noqa: E501
+        '</style>'
+        '<table class="json-table">'
+        '<thead><tr><th>Key</th><th>Value</th></tr></thead>'
+        '<tbody>'
+    )
+
+    for key, value in data.items():
+        value_class = 'json-value'
+        value_str = ''
+
+        if value is None:
+            value_class = 'json-value-null'
+            value_str = 'null'
+        elif isinstance(value, bool):
+            value_class = 'json-value-bool'
+            value_str = str(value).lower()
+        elif isinstance(value, (int, float)):
+            value_class = 'json-value-number'
+            value_str = str(value)
+        elif isinstance(value, str):
+            value_class = 'json-value-string'
+            value_str = value
+        elif isinstance(value, (dict, list)):
+            value_class = 'json-value-object'
+            value_str = json.dumps(value, ensure_ascii=False)
+            if len(value_str) > 100:
+                value_str = json.dumps(value, indent=2, ensure_ascii=False)
+        else:
+            value_str = str(value)
+
+        html += f'<tr><td class="json-key">{key}</td><td class="{value_class}">{value_str}</td></tr>'
+
+    html += '</tbody></table>'
+
+    st.markdown(html, unsafe_allow_html=True)
+
+
+def render_json_tree(data: Union[Dict, List], title: str = None, max_depth: int = 3):
+    """Render JSON data as an expandable tree view."""
+    if not data:
+        return
+
+    if title:
+        st.markdown(f'### {title}')
+
+    def render_node(obj: Any, key: str = '', depth: int = 0):
+        """Recursively render JSON nodes."""
+        indent = '&nbsp;' * (depth * 20)
+
+        if isinstance(obj, dict):
+            if depth < max_depth:
+                with st.expander(f'{key or "Object"} ({len(obj)} items)', expanded=depth == 0):
+                    for k, v in obj.items():
+                        if isinstance(v, (dict, list)):
+                            render_node(v, k, depth + 1)
+                        else:
+                            st.markdown(
+                                f"<div style='font-family: monospace; font-size: 13px; padding: 2px 0;'>"
+                                f"<span style='color: #0066cc; font-weight: 500;'>{k}:</span> "
+                                f"<span style='color: #333;'>{format_json_value(v)}</span></div>",
+                                unsafe_allow_html=True,
+                            )
+            else:
+                st.code(json.dumps(obj, indent=2), language='json')
+
+        elif isinstance(obj, list):
+            if depth < max_depth:
+                with st.expander(f'{key or "Array"} [{len(obj)} items]', expanded=depth == 0):
+                    for i, item in enumerate(obj):
+                        render_node(item, f'[{i}]', depth + 1)
+            else:
+                st.code(json.dumps(obj, indent=2), language='json')
+
+        else:
+            st.markdown(
+                f"<div style='font-family: monospace; font-size: 13px; padding: 2px 0;'>"
+                f"{indent}<span style='color: #333;'>{format_json_value(obj)}</span></div>",
+                unsafe_allow_html=True,
+            )
+
+    render_node(data)
+
+
+def render_metrics_grid(metrics: Dict, title: str = 'Metrics'):
+    """Render metrics in a professional grid layout."""
+    if not metrics:
+        return
+
+    st.markdown(f'### {title}')
+
+    # Create columns based on number of metrics
+    num_metrics = len(metrics)
+    if num_metrics <= 3:
+        cols = st.columns(num_metrics)
+    elif num_metrics <= 6:
+        cols = st.columns(3)
+    else:
+        cols = st.columns(4)
+
+    for i, (key, value) in enumerate(metrics.items()):
+        col_idx = i % len(cols)
+        with cols[col_idx]:
+            # Format the value
+            if isinstance(value, float):
+                if value < 1:
+                    formatted_value = f'{value:.4f}'
+                else:
+                    formatted_value = f'{value:.2f}'
+            elif isinstance(value, dict):
+                formatted_value = f'{len(value)} items'
+            elif isinstance(value, list):
+                formatted_value = f'{len(value)} items'
+            else:
+                formatted_value = str(value)
+
+            # Display as metric
+            st.metric(
+                label=key.replace('_', ' ').title(),
+                value=formatted_value,
+                delta=None,
+            )

synapse_sdk/devtools/streamlit_app/utils/log_formatter.py

@@ -0,0 +1,38 @@
+"""Log formatting utilities."""
+
+import html
+import re
+
+
+def format_log_line(line: str, line_number: int) -> str:
+    """Format a log line with syntax highlighting and line numbers."""
+    # Clean the line
+    line = line.strip()
+    if not line:
+        return (
+            f'<div class="log-line"><span class="log-line-number">{line_number}</span>'
+            f'<div class="log-line-content"></div></div>'
+        )
+
+    # Escape HTML first
+    line = html.escape(line)
+
+    # Check for different log levels and patterns
+    if re.search(r'\b(error|exception|fail|fatal)\b', line, re.IGNORECASE):
+        css_class = 'log-error'
+    elif re.search(r'\b(warn|warning)\b', line, re.IGNORECASE):
+        css_class = 'log-warning'
+    elif re.search(r'\b(info|information)\b', line, re.IGNORECASE):
+        css_class = 'log-info'
+    elif re.search(r'\b(debug|trace)\b', line, re.IGNORECASE):
+        css_class = 'log-debug'
+    else:
+        css_class = ''
+
+    # Highlight timestamps (common patterns)
+    line = re.sub(r'(\d{4}-\d{2}-\d{2}[\sT]\d{2}:\d{2}:\d{2})', r'<span class="log-timestamp">\1</span>', line)
+
+    return (
+        f'<div class="log-line"><span class="log-line-number">{line_number}</span>'
+        f'<div class="log-line-content {css_class}">{line}</div></div>'
+    )

synapse_sdk/devtools/streamlit_app/utils/styles.py

@@ -0,0 +1,241 @@
+"""Styling constants and CSS for the Streamlit app."""
+
+CUSTOM_CSS = """
+<style>
+/* Global typography and spacing */
+* {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
+}
+
+/* Consistent button styling */
+.stButton > button {
+    border-radius: 6px;
+    font-weight: 500;
+    transition: all 0.2s ease;
+    padding: 0.5rem 1rem;
+}
+
+.stButton > button:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+
+/* Tab styling */
+.stTabs [data-baseweb="tab-list"] button [data-testid="stMarkdownContainer"] p {
+    font-size: 14px;
+    font-weight: 500;
+    letter-spacing: 0.3px;
+}
+.success-box {
+    padding: 1rem;
+    border-radius: 0.5rem;
+    background-color: #d4edda;
+    border: 1px solid #c3e6cb;
+    color: #155724;
+    margin: 1rem 0;
+}
+.error-box {
+    padding: 1rem;
+    border-radius: 0.5rem;
+    background-color: #f8d7da;
+    border: 1px solid #f5c6cb;
+    color: #721c24;
+    margin: 1rem 0;
+}
+.info-box {
+    padding: 1rem;
+    border-radius: 0.5rem;
+    background-color: #d1ecf1;
+    border: 1px solid #bee5eb;
+    color: #0c5460;
+    margin: 1rem 0;
+}
+.status-bar {
+    background-color: #f8f9fa;
+    border-radius: 0.5rem;
+    padding: 1rem;
+    margin: 1rem 0;
+    border: 1px solid #dee2e6;
+}
+.log-container {
+    background-color: #1e1e1e;
+    color: #d4d4d4;
+    font-family: 'Fira Code', 'Consolas', 'Monaco', 'Courier New', monospace;
+    font-size: 14px;
+    line-height: 1.4;
+    padding: 0;
+    border-radius: 0.5rem;
+    overflow-x: auto;
+    overflow-y: auto;
+    max-height: 400px;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+    border: 1px solid #3c3c3c;
+    display: flex;
+    flex-direction: column;
+}
+.log-line {
+    margin: 0;
+    padding: 0.2rem 1rem;
+    display: flex;
+    align-items: flex-start;
+    border-bottom: 1px solid #2a2a2a;
+}
+.log-line:hover {
+    background-color: #2a2a2a;
+}
+.log-line-number {
+    color: #858585;
+    font-size: 12px;
+    min-width: 40px;
+    text-align: right;
+    padding-right: 12px;
+    user-select: none;
+    flex-shrink: 0;
+}
+.log-line-content {
+    flex: 1;
+    word-break: break-word;
+}
+.log-error {
+    color: #f48771;
+    font-weight: bold;
+}
+.log-warning {
+    color: #dcdcaa;
+}
+.log-info {
+    color: #9cdcfe;
+}
+.log-debug {
+    color: #608b4e;
+}
+.log-timestamp {
+    color: #569cd6;
+}
+.stJson {
+    max-width: 100%;
+    overflow-x: auto;
+}
+/* Professional styling for code blocks */
+.stCodeBlock {
+    background-color: #1e1e1e !important;
+    border: 1px solid #3c3c3c !important;
+    border-radius: 6px !important;
+}
+/* Enhanced headers */
+h1, h2, h3 {
+    font-weight: 600 !important;
+    color: #1a1a1a !important;
+}
+/* Professional section spacing */
+.section-divider {
+    margin: 2rem 0;
+    border-bottom: 1px solid #e0e0e0;
+}
+/* Hide the Streamlit toolbar */
+.stAppToolbar {
+    visibility: hidden;
+}
+/* Alternative method to hide toolbar */
+[data-testid="stToolbar"] {
+    display: none !important;
+}
+/* Reduce top padding of main container */
+.stMainBlockContainer,
+.block-container {
+    padding-top: 1rem !important;
+    max-width: 100%;
+}
+/* Better tab styling */
+.stTabs [data-baseweb="tab-list"] {
+    gap: 4px;
+    background-color: transparent;
+    border-bottom: 2px solid #e9ecef;
+    padding: 0;
+}
+.stTabs [data-baseweb="tab"] {
+    padding: 10px 20px;
+    border-radius: 0;
+    background-color: transparent;
+    border-bottom: 3px solid transparent;
+    margin-bottom: -2px;
+}
+.stTabs [data-baseweb="tab-list"] button[aria-selected="true"] {
+    background-color: transparent;
+    border-bottom: 3px solid #007bff;
+    color: #007bff;
+}
+.stTabs [data-baseweb="tab"]:hover {
+    background-color: #f8f9fa;
+}
+
+/* Form styling */
+.stSelectbox > div > div {
+    border-radius: 6px;
+}
+.stTextInput > div > div > input {
+    border-radius: 6px;
+}
+.stTextArea > div > div > textarea {
+    border-radius: 6px;
+}
+
+/* Checkbox and radio styling */
+.stCheckbox > label > span {
+    font-size: 14px;
+}
+.stRadio > label {
+    font-size: 14px;
+}
+
+/* Metrics styling */
+.metric-container .metric-label {
+    font-size: 12px;
+    font-weight: 500;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    color: #6c757d;
+}
+
+/* Consistent spacing */
+.row-widget.stButton {
+    margin-top: 0.5rem;
+    margin-bottom: 0.5rem;
+}
+/* Also adjust the header spacing */
+.stAppHeader {
+    height: 0rem !important;
+}
+</style>
+"""
+
+
+def get_status_badge_html(status: str) -> str:
+    """Generate HTML for status badge with outline style."""
+    status = status.upper() if status else 'UNKNOWN'
+
+    color_map = {
+        'SUCCEEDED': '#28a745',
+        'RUNNING': '#007bff',
+        'PENDING': '#6c757d',
+        'FAILED': '#dc3545',
+        'STOPPED': '#6c757d',
+        'UNKNOWN': '#6c757d',
+    }
+
+    color = color_map.get(status, '#6c757d')
+
+    return f"""
+    <span style="
+        border: 1px solid {color};
+        color: {color};
+        padding: 4px 10px;
+        border-radius: 4px;
+        font-size: 12px;
+        font-weight: 500;
+        display: inline-block;
+        text-align: center;
+        min-width: 70px;
+    ">{status}</span>
+    """