Merge branch 'master' of github.com:CODAIT/text-extensions-for-pandas

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);
 }