Dataop report titles (#1950)

jeromedockes · web-flow · commit bdeea856f470 · 2026-03-10T14:09:06.000+01:00
diff --git a/skrub/_data_ops/_inspection.py b/skrub/_data_ops/_inspection.py
@@ -169,7 +169,7 @@ def make_url(node):
     svg = draw_data_op_graph(data_op, url=make_url).svg.decode("utf-8")
     jinja_env = _get_jinja_env()
     index = jinja_env.get_template("index.html").render(
-        {"svg": svg, "node_status": node_status, "title": title}
+        {"svg": svg, "node_status": node_status, "report_title": title}
     )
     index_file = output_dir / "index.html"
     index_file.write_text(index, "utf-8")
@@ -222,6 +222,7 @@ def make_url(node):
             estimator_html_repr = None
         node_page = jinja_env.get_template("node.html").render(
             dict(
+                report_title=title,
                 total_n_nodes=len(g["nodes"]),
                 node_nb=i,
                 node_children=node_children,
diff --git a/skrub/_reporting/_data/templates/data_ops/data_ops.css b/skrub/_reporting/_data/templates/data_ops/data_ops.css
@@ -42,6 +42,10 @@ pre, code {
     flex-shrink: 0;
 }
 
+.fixed-report-title ~ .data_op-node-wrapper > .data_op-node > nav.main-nav {
+    padding-top: 30px;
+}
+
 .node-details {
     flex-grow: 1;
     flex-shrink: 1;
@@ -98,12 +102,25 @@ pre, code {
 .icon-button {
     position: absolute;
     left: 5px;
-    top: 5px;
+    top: 10px;
     padding: 2px;
     width: 24px;
     height: 24px;
 }
 
+.fixed-report-title {
+    position: absolute;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 90%;
+    left: 40px;
+    top: 5px;
+    padding: 2px;
+    padding-top: 0;
+    margin: 0;
+}
+
 .error-node polygon {
     stroke: red;
     stroke-width: 3;
diff --git a/skrub/_reporting/_data/templates/data_ops/index.html b/skrub/_reporting/_data/templates/data_ops/index.html
@@ -4,15 +4,15 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>run report</title>
+    <title>{{ report_title if report_title else "DataOp report" }}</title>
     <style>
      {% include "data_ops.css" %}
     </style>
 </head>
 
 <body>
-    {% if title %}
-        <h1>{{ title }}</h1>
+    {% if report_title %}
+        <h1>{{ report_title }}</h1>
     {% endif %}
     <p>
         Click on a node to display more information.
diff --git a/skrub/_reporting/_data/templates/data_ops/node.html b/skrub/_reporting/_data/templates/data_ops/node.html
@@ -4,7 +4,7 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>evaluation report</title>
+    <title>{{ report_title if report_title else "DataOp report" }}</title>
     <style>
      {% include "data_ops.css" %}
     </style>
@@ -13,6 +13,9 @@
 <body>
     <button type="button" class="icon-button"
         id="toggle-nav">{% include "icons/list.svg" %}</button>
+    {% if report_title %}
+    <h2 class="fixed-report-title">{{ report_title }}</h2>
+    {% endif %}
     <div class="data_op-node-wrapper">
         <div class="data_op-node">
             <nav class="main-nav" data-is-open>
@@ -21,9 +24,6 @@
             <div class="node-details" {{ "data-has-error" if error is not none }}
                 {{ "data-is-skipped" if (error is none) and (report is none) }}>
                 <h1>{{ node_nb }}: {{ node_repr }}</h1>
-                {% if node_name %}
-                <h2><samp>Name: {{ node_name }}</samp></h2>
-                {% endif %}
                 <nav class="mini-nav">
                     <ul>
                         <li>
@@ -41,6 +41,9 @@ <h2><samp>Name: {{ node_name }}</samp></h2>
                         </li>
                     </ul>
                 </nav>
+                {% if node_name %}
+                <h2><samp>Name: {{ node_name }}</samp></h2>
+                {% endif %}
                 <div>
                     {% if node_description %}
                     <h3>Description:</h3>
