better desktop safari, worse mobile

Author: mathematicalmichael

pyproject.toml

@@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name = "hiplot-mm"
-version = "0.0.3rc4"
+version = "0.0.3rc2"
 description = "High dimensional Interactive Plotting tool"
 readme = "README.md"
 license = "MIT"

src/lib/browsercompat.ts

@@ -5,29 +5,17 @@ export const IS_MOBILE_SAFARI = IS_SAFARI && IS_IOS;
 export const IS_MOBILE = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ||
     (navigator.maxTouchPoints > 0 && /Mobi|Android/i.test(navigator.userAgent));
 
-export function redrawObject(fo: SVGForeignObjectElement) {
+/**
+ * Safari has a bug where foreignObjects don't visually update when their parent's
+ * transform changes. This function forces a redraw by removing and re-adding them.
+ * Works on mobile Safari but not reliably on desktop Safari.
+ */
+export function redrawForeignObject(fo: SVGForeignObjectElement) {
     const parent = fo.parentNode;
     parent.removeChild(fo);
     parent.appendChild(fo);
-
-}
-export function redrawAllForeignObjectsIfSafari() {
-    if (!IS_SAFARI) {
-        return;
-    }
-    const fo = document.getElementsByTagName("foreignObject");
-    Array.from(fo).forEach(redrawObject);
 }
 
-export function setupBrowserCompat(root: HTMLDivElement) {
-    /**
-     * Safari has a lot of trouble with foreignObjects inside canvas. Especially when we apply rotations, etc...
-     * As it considers the parent of the objects inside the FO to be the canvas origin, and not the FO.
-     * See https://stackoverflow.com/questions/51313873/svg-foreignobject-not-working-properly-on-safari
-     * Applying the fix in the link above fixes their position upon scroll - we don't want that, so we
-     * manually force-redraw them upon scroll.
-     */
-    if (IS_SAFARI) {
-        root.addEventListener("wheel", redrawAllForeignObjectsIfSafari);
-    }
+export function setupBrowserCompat(_root: HTMLDivElement) {
+    // No browser-specific setup needed currently
 }

src/parallel/parallel.tsx

@@ -20,7 +20,7 @@ import { HiPlotPluginData } from "../plugin";
 import { ResizableH } from "../lib/resizable";
 import { Filter, FilterType, apply_filters } from "../filters";
 import { foDynamicSizeFitContent, foCreateAxisLabel } from "../lib/svghelpers";
-import { IS_SAFARI, IS_MOBILE_SAFARI, redrawAllForeignObjectsIfSafari } from "../lib/browsercompat";
+import { IS_SAFARI, redrawForeignObject } from "../lib/browsercompat";
 
 interface StringMapping<V> { [key: string]: V; };
 
@@ -163,7 +163,24 @@ export class ParallelPlot extends React.Component<ParallelPlotData, ParallelPlot
         g = g.transition();
       }
       g.attr("transform", function(this: ParallelPlot, p) { return "translate(" + this.position(p) + ")"; }.bind(this));
-      redrawAllForeignObjectsIfSafari();
+
+      // Safari: apply CSS transforms to foreignObjects during drag, redraw after
+      if (IS_SAFARI) {
+        if (this.state.dragging) {
+          const me = this;
+          this.dimensions_dom.each(function(dim: string) {
+            const fo = d3.select(this).select("foreignObject");
+            const delta = me.position(dim) - me.xscale(dim);
+            fo.style("transform", delta !== 0 ? `translateX(${delta}px)` : null);
+          });
+        } else {
+          // Not dragging - force redraw all foreignObjects to ensure correct position
+          this.dimensions_dom.selectAll("foreignObject").each(function() {
+            redrawForeignObject(this as SVGForeignObjectElement);
+          });
+        }
+      }
+
       this.update_ticks();
       this.updateAxisTitlesAnglesAndFontSize();
       // Notify parent of hidden columns count change (dimensions affects can_restore_axis)
@@ -378,9 +395,23 @@ export class ParallelPlot extends React.Component<ParallelPlotData, ParallelPlot
             me.setState({dimensions: new_dimensions});
           }
           me.dimensions_dom.attr("transform", function(d) { return "translate(" + me.position(d) + ")"; });
-          redrawAllForeignObjectsIfSafari();
+
+          // Safari doesn't update foreignObject positions when parent transforms change.
+          // Apply the position delta directly to each foreignObject as a CSS transform.
+          if (IS_SAFARI) {
+            me.dimensions_dom.each(function(dim: string) {
+              const fo = d3.select(this).select("foreignObject");
+              const delta = me.position(dim) - me.xscale(dim);
+              fo.style("transform", delta !== 0 ? `translateX(${delta}px)` : null);
+            });
+          }
         })
         .on("end", function(event, d: string) {
+          // Clear Safari CSS transforms from foreignObjects
+          if (IS_SAFARI) {
+            me.dimensions_dom.selectAll("foreignObject").style("transform", null);
+          }
+
           if (!me.state.dragging.dragging) {
             // no movement, invert axis
             var extent = invert_axis(d);
@@ -393,11 +424,16 @@ export class ParallelPlot extends React.Component<ParallelPlotData, ParallelPlot
               const element = this;
               me.setState({order: Array.from(me.state.dimensions), dragging: null}, function() {
                 // reorder axes
-                var drag: any = d3.select(this);
-                if (!IS_SAFARI) {
-                  drag = drag.transition();
+                const parentG = d3.select(element.parentElement.parentElement);
+                if (IS_SAFARI) {
+                  // Skip transition on Safari - it causes foreignObject positioning issues
+                  parentG.attr("transform", "translate(" + me.xscale(d) + ")");
+                  // Force redraw of the foreignObject to ensure correct position
+                  const fo = parentG.select("foreignObject").node() as SVGForeignObjectElement;
+                  if (fo) redrawForeignObject(fo);
+                } else {
+                  parentG.transition().attr("transform", "translate(" + me.xscale(d) + ")");
                 }
-                d3.select(element.parentElement.parentElement).attr("transform", "translate(" + me.xscale(d) + ")");
                 var extents = brush_extends();
                 extent = extents[d];
                 me.update_ticks(d, extent);