fix: tooltip bug fixes (#188)

* docs: update Vitepress

* fix: issue when setting `tooltip_histogram == False`

* Fix: tooltip issue with non-existing tooltip

* fix: `showHistogram()`

* fix: don't show static opacity in tooltip

* chore: rename for clarity

* fix: standardize NA handling with categorical data

Also, if categorical data contains NAs, we're going to assign gray as the color to it if the color map is set to auto.

* docs: update CHANGELOG.md

* docs: update CHANGELOG.md

CHANGELOG.md

@@ -1,3 +1,11 @@
+## v0.21.1
+
+- Feat: automatically assign gray to undefined/NA values for categorical data ([#186](https://github.com/flekschas/jupyter-scatter/issues/186))
+- Fix: properly undefined/NA values in categorical data ([#185](https://github.com/flekschas/jupyter-scatter/issues/185))
+- Fix: tooltip issue with non-existing tooltip ([#187](https://github.com/flekschas/jupyter-scatter/issues/187))
+- Fix: ensure `tooltip_histogram == False` works as expected
+- Fix: ensure a static opacity is not shown in the tooltip
+
 ## v0.21.0
 
 - Feat: add support for brush and rectangle lasso types.

docs/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "devDependencies": {
-    "vitepress": "^1.6.1"
+    "vitepress": "^1.6.3"
   },
   "scripts": {
     "start": "vitepress dev",

js/src/index.js

@@ -963,7 +963,7 @@ class JupyterScatterView {
       }
       if (property in TOOLTIP_OPTIONAL_VISUAL_PROPERTIES) {
         const encoding = this.model.get(`${property}_by`);
-        if (property === 'opacity' && encoding !== 'density') {
+        if (property === 'opacity' && encoding && encoding !== 'density') {
           continue;
         }
         if (property !== 'opacity' && encoding) {
@@ -1810,7 +1810,7 @@ class JupyterScatterView {
         d.textElement.textContent = d.format(value);
 
         if (this.showHistogram(d.property)) {
-          d.histogram?.draw(d.getHistogramKey(value));
+          d.histogram?.draw(d.getHistogramKey?.(value));
         }
       }
       if (event.preview) {
@@ -3237,14 +3237,24 @@ class JupyterScatterView {
   }
 
   showHistogram(property) {
-    const histograms = this.model.get('tooltip_histograms');
-    if (histograms === true) {
+    const hasHistogram = (
+      this.model.get(`${property}_histogram`) ||
+      this.model.get('tooltip_properties_non_visual_info')[property]?.histogram
+    );
+
+    if (!hasHistogram) {
+      return false;
+    }
+
+    const showHistogram = this.model.get('tooltip_histograms');
+
+    if (showHistogram === true) {
       return true;
     }
-    if (histograms === false) {
+    if (showHistogram === false) {
       return false;
     }
-    return histograms.includes(property);
+    return showHistogram.includes(property);
   }
 }
 

jscatter/color_maps.py

@@ -1,5 +1,8 @@
 from matplotlib.colors import to_rgba
 
+gray_light = to_rgba('#CCCCCC')
+gray_dark = to_rgba('#333333')
+
 okabe_ito = [
     to_rgba('#56B4E9'),  # sky blue
     to_rgba('#E69F00'),  # orange