Skip to content
This repository has been archived by the owner on Aug 1, 2024. It is now read-only.

Commit

Permalink
add more copy buttons
Browse files Browse the repository at this point in the history
  • Loading branch information
jeromedockes committed Jan 15, 2024
1 parent 1ef6075 commit b80db12
Show file tree
Hide file tree
Showing 4 changed files with 48 additions and 6 deletions.
33 changes: 31 additions & 2 deletions src/skrubview/_data/templates/base.css
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,14 @@
margin-block-end: var(--skrubview-tiny);
}

{{ report_id_selector }}.skrubview-report code {
overflow-wrap: anywhere;
}

{{ report_id_selector }}.skrubview-report pre {
margin: 0;
}

{{ report_id_selector }}.skrubview-report .skrubview-margin-r-s {
margin-inline-end: var(--skrubview-small);
}
Expand All @@ -23,6 +31,13 @@
margin-inline-end: var(--skrubview-tiny);
}

{{ report_id_selector }}.skrubview-report .skrubview-margin-v-t {
margin-block-start: var(--skrubview-tiny);
margin-block-end: var(--skrubview-tiny);
}



{{ report_id_selector }}.skrubview-report :is(td, th) {
padding: var(--skrubview-tiny);
}
Expand Down Expand Up @@ -82,8 +97,24 @@
max-width: var(--skrubview-max-content-width);
}

{{ report_id_selector }}.skrubview-report .skrubview-copybutton-grid {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: var(--skrubview-tiny);
padding-block-start: var(--skrubview-tiny);
padding-block-end: var(--skrubview-tiny);
}

{{ report_id_selector }}.skrubview-report .skrubview-copybutton-grid > * {
margin-block-start: 0;
margin-block-end: 0;
}

{{ report_id_selector }}.skrubview-report .skrubview-flex {
display: flex;
gap: var(--skrubview-tiny);
align-items: center;
}

{{ report_id_selector }}.skrubview-report .skrubview-ellided {
Expand Down Expand Up @@ -143,8 +174,6 @@
max-height: 10rem;
min-height: 1rem;
overflow: auto;
margin-block-start: var(--skrubview-tiny);
margin-block-end: var(--skrubview-tiny);
}

{{ report_id_selector }}.skrubview-report .skrubview-table-value-box {
Expand Down
6 changes: 5 additions & 1 deletion src/skrubview/_data/templates/column-summary.html
Original file line number Diff line number Diff line change
Expand Up @@ -54,9 +54,13 @@ <h3 class="skrubview-margin-r-t">
{% if plot_name == "value_counts_plot" %}
<details>
<summary>Most frequent values</summary>
<div class="skrubview-copybutton-grid">
{% for value in column.value_counts %}
<pre class="skrubview-box">{{ value }}</pre>
{% set val_id = "{}-freq-value-{}".format(col_id, loop.index0) %}
<pre class="skrubview-box" id="{{ val_id }}">{{ value }}</pre>
<button onclick='copyTextToClipboard("{{ val_id }}")'>📋</button>
{% endfor %}
</div>
</details>
{% endif %}
</div>
Expand Down
9 changes: 6 additions & 3 deletions src/skrubview/_data/templates/dataframe-table.html
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,10 @@
</table>
</div>
<div class="skrubview-flex">
<pre class="skrubview-box skrubview-table-value-box" id="{{ dataframe_id }}_value_box" data-shows-placeholder>
Select a cell to display its value
</pre>
{% set value_box_id="{}_value_box".format(dataframe_id) %}
{% set button_id="{}_copybutton".format(value_box_id) %}
<pre class="skrubview-box skrubview-table-value-box skrubview-margin-v-t" id="{{ value_box_id }}"
data-copybutton-id="{{ button_id }}"
data-shows-placeholder>Select a cell to display its value</pre>
<button onclick='copyTextToClipboard("{{ value_box_id }}")' id="{{ button_id }}" disabled autocomplete="off">📋</button>
</div>
6 changes: 6 additions & 0 deletions src/skrubview/_data/templates/skrubview.js
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,9 @@ function selectAllCols(reportId) {

function copyTextToClipboard(elementID) {
const elem = document.getElementById(elementID);
if (elem.hasAttribute("data-shows-placeholder")){
return;
}
elem.setAttribute("data-is-being-copied", "");
if (navigator.clipboard) {
navigator.clipboard.writeText(elem.textContent || "");
Expand Down Expand Up @@ -71,5 +74,8 @@ function displayValue(event) {
const displayBoxId = elem.dataset.displayBoxId;
const displayBox = document.getElementById(displayBoxId);
displayBox.removeAttribute("data-shows-placeholder");
if (displayBox.hasAttribute("data-copybutton-id")){
document.getElementById(displayBox.dataset.copybuttonId).removeAttribute("disabled");
}
displayBox.textContent = data;
}

0 comments on commit b80db12

Please sign in to comment.