organize report in foldable sections

src/skrubview/_data/templates/base.css

@@ -1,4 +1,3 @@
-{% from "utils.j2" import report_id_selector %}
 :root {
     --skrubview-tiny: 0.5rem;
     --skrubview-small: 1.0rem;
@@ -7,6 +6,10 @@
     --skrubview-max-content-width: 45rem;
 }
 
+{{ report_id_selector }}.skrubview-report summary > * {
+    display: inline;
+}
+
 {{ report_id_selector }}.skrubview-report p {
     margin-block-start: var(--skrubview-tiny);
     margin-block-end: var(--skrubview-tiny);
@@ -48,22 +51,7 @@
     font: inherit;
 }
 
-{{ report_id_selector }}.skrubview-report details:not({{ "[" }} open {{ "]" }}) {
-    display: inline;
-}
-
-{{ report_id_selector }}.skrubview-report * + details:not({{ "[" }} open {{ "]" }}) {
-    margin-inline-start: var(--skrubview-tiny);
-}
-
-{{ report_id_selector }}.skrubview-report details{{ "[" }} open {{ "]" }} {
-    padding-block-end: var(--skrubview-tiny);
-}
-
-
-
 {{ report_id_selector }}.skrubview-report .skrubview-horizontal-scroll {
-    max-width: 100%;
     overflow-x: auto;
 }
 

src/skrubview/_data/templates/column-summary.html

@@ -1,8 +1,8 @@
 <div class="skrubview-card skrubview-column-summary {{"skrubview-constant-column" if column.value_is_constant else "" }}" id="{{ col_id }}" data-name-repr="{{ column.name.__repr__() }}">
     <div class="skrubview-card-header">
-        <h2>
+        <h3>
             <code class="skrubview-select-all">{{ column.name }}</code>
-        </h2>
+        </h3>
         <input class="dataview-select-column-checkbox" type="checkbox" onchange="updateColSelection(event)" data-column-id="{{ col_id }}" data-report-id="{{ report_id }}" />
         <code class="skrubview-float-end">{{ column.dtype }}</code>
     </div>

src/skrubview/_data/templates/dataframe-columns.css

@@ -1,4 +1,4 @@
-{% from "utils.j2" import compact_id, collapse_const_id, report_id_selector %}
+{% from "utils.j2" import compact_id, collapse_const_id %}
 
 {{ report_id_selector }}.skrubview-report .skrubview-float-end {
     margin-inline-start: auto;

src/skrubview/_data/templates/dataframe-columns.html

@@ -0,0 +1,47 @@
+<div class="skrubview-wrapper">
+    <details open="">
+        <summary><h2>Columns</h2></summary>
+    <div>
+        <p>Selected columns:</p>
+        <code class="dataview-selected-columns" id="{{ report_id }}-selected-columns"></code>
+        <p>
+            <button onclick='clearSelectedCols("{{ report_id }}")'>Clear</button>
+            <button onclick='selectAllCols("{{ report_id }}")'>Select all</button>
+            <button onclick='copyTextToClipboard("{{ report_id }}-selected-columns")'>📋</button>
+        </p>
+    </div>
+    {% if summary.n_constant_columns %}
+    <input type="checkbox" id="{{ collapse_const_id }}" checked="true" />
+    <label for="{{ collapse_const_id }}">Collapse constant columns</label>
+    {% endif %}
+
+    <input type="checkbox" id="{{ compact_id }}" checked="true" />
+    <label for="{{ compact_id }}">Compact display</label>
+
+    <div class="skrubview-column-summary-group">
+        {% if summary.n_constant_columns %}
+        <div class="skrubview-pseudocolumn skrubview-constant-columns-summary skrubview-card">
+            <div class="skrubview-card-header">
+                <h3>Constant columns</h3>
+            </div>
+            <div class="skrubview-wrapper skrubview-text">
+                <p>
+                <dl>
+                    {% for column in summary.columns %}
+                    {% if column.value_is_constant %}
+                    <dt class="skrubview-select-all">{{ column.name }}</dt>
+                    <dd>{{ column.constant_value.__repr__() }}</dd>
+                    {% endif %}
+                    {% endfor %}
+                </dl>
+                </p>
+            </div>
+        </div>
+        {% endif %}
+        {% for column in summary.columns %}
+        {% set col_id="{}_col_{}".format(report_id, loop.index0) %}
+        {% include "column-summary.html" %}
+        {% endfor %}
+    </div>
+    </details>
+</div>

src/skrubview/_data/templates/dataframe-sample.html

@@ -0,0 +1,13 @@
+<div class="skrubview-wrapper">
+    <details>
+        <summary><h2>Sample</h2></summary>
+        <h3>First 5 rows</h3>
+        <div class="skrubview-horizontal-scroll">
+            {{ summary.head_html | safe }}
+        </div>
+        <h3>Last 5 rows</h3>
+        <div class="skrubview-horizontal-scroll">
+            {{ summary.tail_html | safe }}
+        </div>
+    </details>
+</div>

src/skrubview/_data/templates/jupyter-reset.css

@@ -1,17 +1,19 @@
-#{{ report_id }}.skrubview-report dt {
+{% set report_id_selector="#{}".format(report_id) if report_id else "" %}
+
+{{ report_id_selector }}.skrubview-report dt {
     float: none;
     margin: 0;
     width: auto;
 }
 
-#{{ report_id }}.skrubview-report code {
+{{ report_id_selector }}.skrubview-report code {
     background-color: inherit;
     padding: 0;
     color: inherit;
     line-height: inherit;
 }
 
-#{{ report_id }}.skrubview-report h2 {
+{{ report_id_selector }}.skrubview-report :is(h2, h3) {
     line-height: inherit;
     font-weight: bold;
 }

src/skrubview/_data/templates/report.html

@@ -12,65 +12,8 @@ <h1>{{ summary.title }}</h1>
             <strong>{{ summary.n_rows }}</strong> rows, <strong>{{ summary.n_columns }}</strong> columns.
         </p>
     </div>
-    <div class="skrubview-wrapper">
-        <p>Selected columns:</p>
-        <code class="dataview-selected-columns" id="{{ report_id }}-selected-columns"></code>
-        <p>
-            <button onclick='clearSelectedCols("{{ report_id }}")'>Clear</button>
-            <button onclick='selectAllCols("{{ report_id }}")'>Select all</button>
-            <button onclick='copyTextToClipboard("{{ report_id }}-selected-columns")'>📋</button>
-        </p>
-    </div>
-    <div class="skrubview-wrapper">
-        <details>
-            <summary>First 5 rows</summary>
-            <div class="skrubview-horizontal-scroll">
-                {{ summary.head_html | safe }}
-            </div>
-        </details>
-
-        <details>
-            <summary>Last 5 rows</summary>
-            <div class="skrubview-horizontal-scroll">
-                {{ summary.tail_html | safe }}
-            </div>
-        </details>
-
-    </div>
-
-    {% if summary.n_constant_columns %}
-    <input type="checkbox" id="{{ collapse_const_id }}" checked="true" />
-    <label for="{{ collapse_const_id }}">Collapse constant columns</label>
-    {% endif %}
-
-    <input type="checkbox" id="{{ compact_id }}" checked="true" />
-    <label for="{{ compact_id }}">Compact display</label>
-
-    <div class="skrubview-column-summary-group">
-        {% if summary.n_constant_columns %}
-        <div class="skrubview-pseudocolumn skrubview-constant-columns-summary skrubview-card">
-            <div class="skrubview-card-header">
-                <h2>Constant columns</h2>
-            </div>
-            <div class="skrubview-wrapper skrubview-text">
-                <p>
-                <dl>
-                    {% for column in summary.columns %}
-                    {% if column.value_is_constant %}
-                    <dt class="skrubview-select-all">{{ column.name }}</dt>
-                    <dd>{{ column.constant_value.__repr__() }}</dd>
-                    {% endif %}
-                    {% endfor %}
-                </dl>
-                </p>
-            </div>
-        </div>
-        {% endif %}
-        {% for column in summary.columns %}
-        {% set col_id="{}_col_{}".format(report_id, loop.index0) %}
-        {% include "column-summary.html" %}
-        {% endfor %}
-    </div>
+    {% include "dataframe-sample.html" %}
+    {% include "dataframe-columns.html" %}
     <script>
         updateSelectedColsSnippet("{{ report_id }}");
     </script>

src/skrubview/_data/templates/skrubview.css

@@ -1,2 +1,4 @@
+{% set report_id_selector="#{}".format(report_id) if report_id else "" %}
+
 {% include "base.css" %}
 {% include "dataframe-columns.css" %}

src/skrubview/_data/templates/utils.j2

@@ -1,3 +1,2 @@
 {% set compact_id = "{}-compact-checkbox".format(report_id) %}
 {% set collapse_const_id = "{}-collapse-const-columns-checkbox".format(report_id) %}
-{% set report_id_selector="#{}".format(report_id) if report_id else "" %}