From b80db12369988494f2feae09362c85ad6d5a99cc Mon Sep 17 00:00:00 2001
From: Jerome Dockes <jerome@dockes.org>
Date: Mon, 15 Jan 2024 10:05:19 +0100
Subject: [PATCH] add more copy buttons

---
 src/skrubview/_data/templates/base.css        | 33 +++++++++++++++++--
 .../_data/templates/column-summary.html       |  6 +++-
 .../_data/templates/dataframe-table.html      |  9 +++--
 src/skrubview/_data/templates/skrubview.js    |  6 ++++
 4 files changed, 48 insertions(+), 6 deletions(-)

diff --git a/src/skrubview/_data/templates/base.css b/src/skrubview/_data/templates/base.css
index d14471d..6413c81 100644
--- a/src/skrubview/_data/templates/base.css
+++ b/src/skrubview/_data/templates/base.css
@@ -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);
 }
@@ -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);
 }
@@ -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 {
@@ -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 {
diff --git a/src/skrubview/_data/templates/column-summary.html b/src/skrubview/_data/templates/column-summary.html
index cc95d7e..d16955b 100644
--- a/src/skrubview/_data/templates/column-summary.html
+++ b/src/skrubview/_data/templates/column-summary.html
@@ -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>
diff --git a/src/skrubview/_data/templates/dataframe-table.html b/src/skrubview/_data/templates/dataframe-table.html
index 278c3dd..2fb41a3 100644
--- a/src/skrubview/_data/templates/dataframe-table.html
+++ b/src/skrubview/_data/templates/dataframe-table.html
@@ -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>
diff --git a/src/skrubview/_data/templates/skrubview.js b/src/skrubview/_data/templates/skrubview.js
index 0969bac..77ba2ea 100644
--- a/src/skrubview/_data/templates/skrubview.js
+++ b/src/skrubview/_data/templates/skrubview.js
@@ -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 || "");
@@ -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;
 }