mangleframes 0.1.7__tar.gz → 0.1.8__tar.gz

{mangleframes-0.1.7 → mangleframes-0.1.8}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: mangleframes
-Version: 0.1.7
+Version: 0.1.8
 Classifier: Programming Language :: Python :: 3
 Classifier: Programming Language :: Rust
 Classifier: License :: OSI Approved :: MIT License

{mangleframes-0.1.7 → mangleframes-0.1.8}/pyproject.toml

@@ -4,7 +4,7 @@ build-backend = "maturin"
 
 [project]
 name = "mangleframes"
-version = "0.1.7"
+version = "0.1.8"
 description = "PySpark DataFrame viewer with modern web UI"
 requires-python = ">=3.11"
 license = { text = "MIT" }

{mangleframes-0.1.7 → mangleframes-0.1.8}/python/mangleframes/__init__.py

@@ -16,7 +16,7 @@ from .server import DataFrameServer
 if TYPE_CHECKING:
     from pyspark.sql import DataFrame
 
-__version__ = "0.1.7"
+__version__ = "0.1.8"
 __all__ = ["register", "unregister", "show", "cleanup"]
 
 _registry: dict[str, DataFrame] = {}

{mangleframes-0.1.7 → mangleframes-0.1.8}/viewer/static/app.js

@@ -1146,6 +1146,9 @@ function renderCoverageTimeline(result) {
 
     const frames = result.frames;
     const timeline = result.timeline;
+
+    // Add dense class for many buckets to reduce bar width
+    chart.classList.toggle('dense', timeline.length > 200);
     const buckets = timeline.map(t => t.bucket);
 
     // Create row for each frame

{mangleframes-0.1.7 → mangleframes-0.1.8}/viewer/static/style.css

@@ -787,6 +787,10 @@ details.drag-over {
     color: var(--text-muted);
 }
 
+#timeline-chart {
+    overflow-x: auto;
+}
+
 .timeline-legend {
     display: flex;
     gap: 16px;
@@ -834,22 +838,35 @@ details.drag-over {
     text-overflow: ellipsis;
     white-space: nowrap;
     flex-shrink: 0;
+    position: sticky;
+    left: 0;
+    background: var(--bg);
+    z-index: 1;
+    padding-right: 8px;
 }
 
 .timeline-bars {
     display: flex;
-    flex: 1;
     gap: 2px;
+    min-width: max-content;
 }
 
 .timeline-bar {
-    flex: 1;
+    width: 4px;
+    flex-shrink: 0;
     height: 20px;
     border-radius: 2px;
-    min-width: 4px;
     transition: opacity 0.15s;
 }
 
+#timeline-chart.dense .timeline-bar {
+    width: 2px;
+}
+
+#timeline-chart.dense .timeline-bars {
+    gap: 1px;
+}
+
 .timeline-bar:hover {
     opacity: 0.8;
 }