Hack-fix labels on safari when scrolling

facebookresearch · Nov 4, 2021 · 42bb72b · 42bb72b
1 parent eaa37fc
commit 42bb72b
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 4 deletions.
diff --git a/src/component.tsx b/src/component.tsx
@@ -21,7 +21,7 @@ import { ErrorDisplay, HeaderBar } from "./header";
 import { HiPlotPluginData, DataProviderClass } from "./plugin";
 import { StaticDataProvider } from "./dataproviders/static";
 import { uncompress } from "./lib/compress";
-
+import { setupBrowserCompat } from "./lib/browsercompat";
 
 //@ts-ignore
 import LogoSVG from "../hiplot/static/logo.svg";
@@ -152,6 +152,7 @@ export function createDefaultPlugins(): PluginsMap {
 export class HiPlot extends React.Component<HiPlotProps, HiPlotState> {
     // React refs
     contextMenuRef = React.createRef<ContextMenu>();
+    rootRef = React.createRef<HTMLDivElement>();
 
     plugins_window_state: {[plugin: string]: any} = {};
 
@@ -322,6 +323,8 @@ export class HiPlot extends React.Component<HiPlotProps, HiPlotState> {
         this.callFilteredUidsHooks.cancel();
     }
     componentDidMount() {
+        setupBrowserCompat(this.rootRef.current);
+
         // Setup contextmenu when we right-click a parameter
         this.contextMenuRef.current.addCallback(this.columnContextMenu.bind(this), this);
 
@@ -532,7 +535,7 @@ export class HiPlot extends React.Component<HiPlotProps, HiPlotState> {
             };
         }.bind(this);
         return (
-        <div className={`hip_thm--${this.state.dark ? "dark" : "light"}`}>
+        <div ref={this.rootRef} className={`hip_thm--${this.state.dark ? "dark" : "light"}`}>
             <div className={style.hiplot}>
             <SelectedCountProgressBar {...controlProps} />
             <HeaderBar

diff --git a/src/lib/svghelpers.ts b/src/lib/svghelpers.ts
@@ -11,6 +11,7 @@ import { ParamDef } from "../infertypes";
 import style from "../hiplot.scss";
 import { ContextMenu } from "../contextmenu";
 
+
 function leftPos(anchor: string, w: number, minmax?: [number, number]): number {
     var left = {
         end: -w,
@@ -51,8 +52,7 @@ export function foCreateAxisLabel(pd: ParamDef, cm?: React.RefObject<ContextMenu
     var fo = document.createElementNS('http://www.w3.org/2000/svg',"foreignObject");
     const span = d3.select(fo).append("xhtml:div")
         .classed(style.tooltipContainer, true)
-        .classed(style.label, true)
-        .style("position", "fixed"); // BUGFIX for transforms in Safari (https://stackoverflow.com/questions/51313873/svg-foreignobject-not-working-properly-on-safari)
+        .classed(style.label, true);
     span.append("xhtml:span")
         .attr("class", pd.label_css)
         .classed("label-name", true)

diff --git a/src/parallel/parallel.tsx b/src/parallel/parallel.tsx
@@ -20,6 +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 } from "../lib/browsercompat";
 
 interface StringMapping<V> { [key: string]: V; };
 
@@ -612,6 +613,7 @@ export class ParallelPlot extends React.Component<ParallelPlotData, ParallelPlot
         .each(function(d: string) {
           d3.select(this).call(me.axis.scale(me.yscale[d]));
       });
+      me.updateAxisTitlesAnglesAndFontSize();
 
       // render data
       this.setState(function(prevState) { return { brush_count: prevState.brush_count + 1}; });
@@ -682,6 +684,9 @@ export class ParallelPlot extends React.Component<ParallelPlotData, ParallelPlot
       ));
       this.style.fontSize = newFontSize + "px";
       this.style.transform = "rotate(" + (360 - ROTATION_ANGLE_RADS * 180 / Math.PI) + "deg)";
+      if (IS_SAFARI) {
+        this.parentElement.style.position = "fixed";
+      }
       const fo = this.parentElement.parentElement as any as SVGForeignObjectElement;
       fo.setAttribute("y", -newFontSize + "");
     });