Merge pull request #215 from PokkeFe/issue-202-interactive

SpanArray HTML rendering interactivity and view instance tools

Author: frreiss

text_extensions_for_pandas/jupyter.py

@@ -150,14 +150,14 @@ def pretty_print_html(column: Union["SpanArray", "TokenSpanArray"],
     show_offset_string = 'true' if show_offsets else 'false'
 
     return textwrap.dedent(f"""
+        <style class="span-array-css">
+            {textwrap.indent(style_text, '        ')}
+        </style>
         <script>
         {{
             {textwrap.indent(script_text, '        ')}
         }}
         </script>
-        <style>
-            {textwrap.indent(style_text, '        ')}
-        </style>
         <div class="span-array">
             If you're reading this message, your notebook viewer does not support Javascript execution. Try pasting the URL into a service like nbviewer.
         </div>

text_extensions_for_pandas/resources/span_array.css

@@ -1,51 +1,33 @@
 .span-array {
-    --thead-background-color: var(--jp-layout-color4, inherit);
-    --thead-text-color: var(--jp-ui-font-color4);
-    --tbody-background-color-1: var(--jp-layout-color2, inherit);
-    --tbody-background-color-2: var(--jp-layout-color1, inherit);
-    --tbody-background-color-hover: var(--jp-layout-color3, inherit);
-    --tbody-background-color-disabled: var(--jp-layout-color4, inherit);
+    --thead-background-color: var(--jp-layout-color1, inherit);
+    --thead-text-color: var(--jp-ui-font-color1, inherit);
+    --tbody-background-color-1: var(--jp-layout-color1, inherit);
+    --tbody-background-color-2: var(--jp-layout-color2, inherit);
+    --tbody-background-color-hover: var(--jp-rendermime-table-row-hover-background, var(--jp-layout-color3, inherit));
+    --tbody-background-color-disabled: var(--jp-layout-color4, #ccccd1);
     --tbody-text-color: var(--jp-ui-font-color0, inherit);
+    --tbody-text-color-disabled: var(--jp-ui-inverse-font-color0, #b3b3b9);
     --table-font-family: var(--jp-content-font-family, var(--fallback-font-family, inherit));
 
+    --table-control-background: rgba(0, 0, 0, 0.2);
+    --table-control-color: var(--jp-ui-font-color0);
+    --table-control-border: 1px solid rgba(0, 0, 0, 0.8);
+    --table-control-border-radius: 0.5em;
+
     --root-highlight: #a0c4ff;
     --nested-highlight: #ffadad;
     --hover-highlight: #ffd6a5;
 
     --inverted-background-color: #0B525B;
     --inverted-text-color: rgb(243, 243, 243);
-    --paragraph-border-color: transparent;
+    --paragraph-border-color: var(--jp-layout-color2, inherit);
 
     --fallback-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
 }
 
-/* These 2 CSS block sets variable overrides for JupyterLab's default themes */
-body[data-jp-theme-name="JupyterLab Dark"] .span-array {
-    --thead-background-color: #144552;
-    --thead-text-color: whitesmoke;
-    --tbody-background-color-1: #0B525B;
-    --tbody-background-color-2: #065A60;
-    --tbody-background-color-hover: #197072;
-    --tbody-background-color-disabled: #486669;
-    --tbody-text-color: rgb(243, 243, 243);
-    --paragraph-border-color: #1b1b1b;
-}
-
-body[data-jp-theme-name="JupyterLab Light"] .span-array {
-    --thead-background-color: #0d2025;
-    --thead-text-color: whitesmoke;
-    --tbody-background-color-1: #f0f0f0;
-    --tbody-background-color-2: #ececec;
-    --tbody-background-color-hover: #6fd9db;
-    --tbody-background-color-disabled: #9c9c9c;
-    --tbody-text-color: rgb(0, 0, 0);
-    --paragraph-border-color: #f1f1f1;
-}
-
 /* Table of span offsets */
 .span-array>.document>table {
     table-layout: auto;
-    border-radius: 1em 1em 0 0;
     overflow: hidden;
     width: 100%;
     border-collapse: collapse;
@@ -64,7 +46,6 @@ body[data-jp-theme-name="JupyterLab Light"] .span-array {
 
 .span-array>.document>table>tbody>tr:nth-child(2n+1) {
     background-color: var(--tbody-background-color-1);
-    color: var(--tbody-text-color);
 }
 
 .span-array>.document>table>tbody>tr:nth-child(2n) {
@@ -73,17 +54,74 @@ body[data-jp-theme-name="JupyterLab Light"] .span-array {
 
 .span-array>.document>table td {
     padding: 0.5em;
-    color: var(--tbody-text-color)
+    color: var(--tbody-text-color);
 }
 
 .span-array>.document>table tr>td:last-child, .span-array>.document>table tr>th:last-child {
     text-align: right;
+    width: 100%;
 }
 
 .span-array>.document>table tr>td:not(tr>td:last-child), .span-array>.document>table tr>th:not(tr>th:last-child) {
     text-align: left;
 }
 
+.span-array>.document>table tr.hover:nth-child(n), .span-array>.document>table tr.highlighted:nth-child(n) {
+    background-color: var(--tbody-background-color-hover);
+}
+
+.span-array>.document>table tr.disabled:nth-child(n), .span-array>.document>table tr.disabled.hover:nth-child(n) {
+    background-color: var(--tbody-background-color-disabled);
+}
+
+.span-array>.document>table tr.disabled:nth-child(n)>td, .span-array>.document>table tr.disabled.hover:nth-child(n)>td {
+    color: var(--tbody-text-color-disabled);
+}
+
+/* Table control buttons */
+
+.span-array>.document>table td:first-child {
+    vertical-align: center;
+}
+
+.span-array>.document>table td:first-child>div.sa-table-controls {
+    display: flex;
+    flex-direction: row;
+}
+
+.span-array>.document>table td:first-child button {
+    background-color: var(--table-control-background);
+    color: var(--table-control-color);
+    border: var(--table-control-border);
+    border-right: none;
+    border-radius: 0;
+    cursor: pointer;
+}
+
+.span-array>.document>table td:first-child button:first-child {
+    border-radius: var(--table-control-border-radius) 0 0 var(--table-control-border-radius);
+}
+
+.span-array>.document>table td:first-child button:last-child {
+    border-radius: 0 var(--table-control-border-radius) var(--table-control-border-radius) 0;
+    border-right: var(--table-control-border);
+}
+
+.span-array>.document>table td:first-child button[data-control="visibility"]:hover {
+    background-color: var(--root-highlight);
+    color: black;
+}
+
+.span-array>.document>table tr:not(tr.disabled) td:first-child button[data-control="highlight"]:hover {
+    background-color: var(--hover-highlight);
+    color: black;
+}
+
+.span-array>.document>table tr.highlighted:not(tr.disabled) td:first-child button[data-control="highlight"] {
+    background-color: var(--hover-highlight);
+    color: black;
+}
+
 /* Styling for spans within document context */
 .span-array>.document>p {
     border:1px solid var(--paragraph-border-color);
@@ -103,6 +141,7 @@ body[data-jp-theme-light="false"].span-array>.document>p {
 .span-array>.document>p mark {
     padding: 0.4em 0.4em;
     border-radius: 0.35em;
+    cursor: pointer;
 }
 
 .span-array>.document>p mark {
@@ -125,4 +164,9 @@ body[data-jp-theme-light="false"].span-array>.document>p {
     font-variant-caps: all-small-caps;
     margin-left: 8px;
     text-transform: uppercase;
+}
+
+.span-array>.document>p mark.hover, .span-array.span-array>.document>p mark>mark.hover, .span-array>.document>p mark.complex-set.hover, .span-array>.document>p mark.highlighted, .span-array>.document>p mark.complex-set.highlighted, .span-array.span-array>.document>p mark>mark.highlighted {
+    background: none;
+    background-color: var(--hover-highlight);
 }