Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 456cea2

Browse files
jeromedockesjeromedockes
authored
Cleanup & misc improvements of TableReport (skrub-data#1023)
1 parent 7ae9985 commit 456cea2

45 files changed

Lines changed: 1224 additions & 724 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

skrub/_reporting/_interactions.py renamed to skrub/_reporting/_associations.py

File renamed without changes.

‎skrub/_reporting/_data/templates/base.css‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,7 @@
2121
--mediumg: #d0d0d0;
2222
--lightg: #f0f0f0;
2323

24-
/* the font stack is copied from github */
25-
--fontStack-monospace: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
24+
--fontStack-monospace: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, "DejaVu Sans Mono", Liberation Mono, monospace;
2625
--fontStack-sansSerif: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
2726
}
2827

@@ -43,7 +42,11 @@
4342
color: black;
4443
color-scheme: light;
4544
border-radius: var(--radius, 0);
46-
overflow: hidden;
45+
max-width: max-content;
46+
}
47+
48+
button > * {
49+
pointer-events: none;
4750
}
4851

4952
/* pure.css / Normalize.css overrides the default firefox blue ring around focussed */
@@ -113,10 +116,18 @@ dd {
113116
/* Generic utility classes */
114117
/* ----------------------- */
115118

116-
[data-not-visible] {
119+
:is([data-hidden], [data-excluded-by-column-filter]){
120+
display: none !important;
121+
}
122+
123+
[data-not-visible]{
117124
visibility: hidden;
118125
}
119126

127+
.wrap-long-name {
128+
overflow-wrap: anywhere;
129+
}
130+
120131
.margin-r-s {
121132
margin-inline-end: var(--small);
122133
}
@@ -188,11 +199,11 @@ dd {
188199
.flex-reverse {
189200
display: flex;
190201
flex-wrap: wrap-reverse;
202+
row-gap: var(--tiny);
191203
}
192204

193205
.space-between {
194206
justify-content: space-between;
195-
max-width: 125ch;
196207
}
197208

198209
.flex-wrap {
@@ -206,7 +217,7 @@ dd {
206217
}
207218

208219
#report .ellided {
209-
max-width: 100ch;
220+
max-width: 70ch;
210221
overflow: hidden;
211222
white-space: nowrap;
212223
text-overflow: ellipsis;
@@ -239,17 +250,6 @@ dd {
239250
color: red;
240251
}
241252

242-
/* .if-else provides a group of 2 elements that we can toggle to decide which is shown. */
243-
/* Used for example to show columns OR a message saying that none match the filter */
244-
245-
.if-else[data-predicate="false"] > :first-child{
246-
display: none;
247-
}
248-
249-
.if-else[data-predicate="true"] > :last-child{
250-
display: none;
251-
}
252-
253253
/* Misc tweaks */
254254
/* ----------- */
255255

‎skrub/_reporting/_data/templates/buttons.html‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{% macro copybutton(target) %}
2+
<button
3+
class="copybutton"
4+
type="button"
5+
onclick="copyButtonClick(event)"
6+
data-target-id="{{ target }}">
7+
{% include "icons/clipboard.svg" %}
8+
{% include "icons/check-lg.svg" %}
9+
<div class="copied-message">Copied!</div>
10+
</button>
11+
{% endmacro %}
12+
13+
{% macro closebutton() %}
14+
<button class="close-card-button"
15+
type="button"
16+
data-role="close-button">
17+
{% include "icons/x-lg.svg" %}
18+
</button>
19+
{% endmacro %}

skrub/_reporting/_data/templates/dataframe-interactions.html renamed to skrub/_reporting/_data/templates/column-associations.html

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,18 +5,18 @@
55
<table class="pure-table">
66
<thead>
77
<tr>
8-
<th>Column 1</th>
9-
<th>Column 2</th>
10-
<th><a href="https://en.wikipedia.org/wiki/Cram%C3%A9r%27s_V">Cramér's V</a></th>
8+
<th scope="col">Column 1</th>
9+
<th scope="col">Column 2</th>
10+
<th scope="col"><a href="https://en.wikipedia.org/wiki/Cram%C3%A9r%27s_V">Cramér's V</a></th>
1111
</tr>
1212
</thead>
1313
<tbody>
1414
{% for association in summary["top_associations"] %}
1515
<tr>
16-
<td>{{ association["left_column"] }}</td>
17-
<td>{{ association["right_column"] }}</td>
16+
<td class="ellided">{{ association["left_column"] }}</td>
17+
<td class="ellided">{{ association["right_column"] }}</td>
1818
<td
19-
{% if association["cramer_v"] is gt column_similarity_threshold %}
19+
{% if association["cramer_v"] is gt high_association_threshold %}
2020
class="critical"
2121
{%- endif -%}
2222
>

‎skrub/_reporting/_data/templates/column-filter.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<div class="wrapper" data-manager="InvisibleInAssociationsTabPanel">
2+
<label for="column-filter-select">Show: </label>
3+
<select data-manager="ColumnFilter"
4+
data-all-filters-base64="{{ base64_column_filters | safe }}"
5+
data-test="column-filter-select"
6+
autocomplete="off">
7+
{% for filter_name in column_filters %}
8+
<option value="{{ filter_name }}" {{ "selected" if filter_name == "all()" }}>
9+
{{ column_filters[filter_name]["display_name"] }}</option>
10+
{% endfor %}
11+
</select>
12+
</div>

‎skrub/_reporting/_data/templates/column-filters.html‎

Lines changed: 0 additions & 12 deletions
This file was deleted.

skrub/_reporting/_data/templates/dataframe-columns.css renamed to skrub/_reporting/_data/templates/column-summaries.css

Lines changed: 20 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
/* The column summary cards */
22
/* ------------------------ */
33

4-
/* Collection of column summary cards (as shown in the "columns" tab) */
5-
/* ------------------------------------------------------------------ */
4+
/* Collection of column summary cards (as shown in the "column summaries" tab) */
5+
/* --------------------------------------------------------------------------- */
66

77
.column-summary-group {
88
display: flex;
@@ -33,32 +33,6 @@
3333

3434
}
3535

36-
/* Hide the cards of constant columns when the corresponding box is checked */
37-
38-
#collapse-const-cols-check:checked ~ * .constant-column {
39-
display: none;
40-
}
41-
42-
/* Hide the card that aggregates info for all constant columns when the "collapse */
43-
/* constant columns" box is unchecked. */
44-
45-
#collapse-const-cols-check:not(:checked) ~ * .constant-columns-summary{
46-
display: none;
47-
}
48-
49-
50-
/* Hide cards of columns that do not match the filter (eg "all()", "numeric()", ...) */
51-
52-
.filterable-column[data-is-excluded-by-filter] {
53-
display: none;
54-
}
55-
56-
/* Also hide filtered columns that appear in the constant columns summary card */
57-
58-
.constant-columns-summary:not(:has(dt:not([data-is-excluded-by-filter]))){
59-
display: none;
60-
}
61-
6236

6337
/* Individual column summary cards */
6438
/* ------------------------------- */
@@ -76,12 +50,13 @@
7650

7751
display: flex;
7852
flex-wrap: wrap;
53+
justify-content: space-between;
54+
column-gap: 1ch;
7955

8056
padding: var(--tiny);
8157
margin-block-end: var(--tiny);
8258
background-color: var(--header-color, var(--lightg));
8359
border-block-end: 1px solid var(--mediumg);
84-
--checkbox-margin: var(--tiny);
8560
}
8661

8762
.card-header > * {
@@ -90,11 +65,8 @@
9065
font-size: var(--large);
9166
}
9267

93-
/* Used to float the dtype to the end of the header */
94-
95-
.float-end {
96-
margin-inline-start: auto;
97-
padding-inline-start: var(--tiny);
68+
.card-header input[type="checkbox"] {
69+
margin-right: var(--micro);
9870
}
9971

10072
.column-summary-content {
@@ -109,7 +81,7 @@
10981
--header-color: #ffffff;
11082
}
11183

112-
/* Grid of copy-pasteable boxes for a column's most frequent values */
84+
/* Grid of boxes with copybuttons for a column's most frequent values */
11385

11486
.copybutton-grid {
11587
display: flex;
@@ -125,54 +97,41 @@
12597
justify-self: left;
12698
}
12799

128-
.select-displayed-siblings ~ [data-option-value]:not([data-is-selected]) {
129-
display: none;
130-
}
131-
132100

133101
/* Aspects specific to the single card shown in the dataframe sample tab */
134102
/* --------------------------------------------------------------------- */
135103

136-
/* Hide all columns except the one that is active in the table */
104+
/* Hide the container when it is empty */
137105

138-
.column-summary-group.columns-in-sample-tab > .column-summary:not([data-is-selected-in-table]) {
106+
.columns-in-sample-tab:not(:has([data-role="sample-column"]:not([data-hidden]))) {
139107
display: none;
140108
}
141109

142110
/* The header has the same color as the selected cells in the table */
143111

144112
.columns-in-sample-tab .card-header {
113+
position: relative;
145114
background-color: var(--darkgreen);
146115
border-block-end: 1px solid var(--verydarkgreen);
116+
padding-right: 2.4rem;
147117
}
148118

149119
/* Button for closing the card / deselecting the column in the table */
150120

151-
.relative-pos {
152-
position: relative;
153-
}
154-
155121
.card .close-card-button {
156-
display: none;
157-
flex-direction: column;
158-
justify-content: center;
159-
align-items: center;
160-
position: absolute;
161-
top: -1rem;
162-
right: -1rem;
163-
width: 2rem;
164-
height: 2rem;
165-
padding: 0;
166-
border-radius: 1rem;
122+
height: 1.8rem;
123+
width: 1.8rem;
124+
125+
padding: var(--micro);
126+
border: none;
127+
border-radius: var(--radius);
167128
background: var(--darkgreen);
168-
border: 1px solid var(--verydarkgreen);
169-
}
170129

171-
.card:hover .close-card-button {
172-
display: flex;
130+
position: absolute;
131+
top: var(--tiny);
132+
right: var(--micro);
173133
}
174134

175135
.card .close-card-button:hover {
176-
display: flex;
177136
background: var(--verydarkgreen);
178137
}

‎skrub/_reporting/_data/templates/column-summaries.html‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
{% import "buttons.html" as buttons %}
2+
3+
<article class="wrapper"
4+
data-show-on="NON_EMPTY_COLUMN_FILTER_SELECTED"
5+
data-hide-on="EMPTY_COLUMN_FILTER_SELECTED">
6+
<div class="flex wrapper-vert">
7+
<div class="box">
8+
<pre id="selected-columns-display" data-manager="SelectedColumnsDisplay"></pre>
9+
{{ buttons.copybutton("selected-columns-display") }}
10+
</div>
11+
</div>
12+
<button type="button"
13+
class="margin-r-s"
14+
data-test="deselect-all-columns"
15+
data-manager="DeselectAllColumns">Deselect all</button>
16+
<button type="button"
17+
data-test="select-all-columns"
18+
data-manager="SelectAllVisibleColumns">Select all</button>
19+
20+
<div class="column-summary-group">
21+
{% for column in summary.columns %}
22+
{% set col_id="col_{}".format(loop.index0) %}
23+
{% include "column-summary.html" %}
24+
{% endfor %}
25+
</div>
26+
</article>
27+
28+
{% include "no-filter-matches.html" %}

0 commit comments

Comments
 (0)