Merge pull request #1932: Workaround 1Password browser extension bug

src/components/entropy/index.js

@@ -290,7 +290,12 @@ class Entropy extends React.Component {
           width={this.props.width}
           height={this.props.height}
         >
-          <g ref={(c) => { this.d3entropy = c; }} id="d3entropy"/>
+          {/* TODO: remove intermediate <g>s once the 1Password extension interference is resolved
+            * <https://github.com/nextstrain/auspice/issues/1919>
+            */}
+          <g><g><g><g>
+            <g ref={(c) => { this.d3entropy = c; }} id="d3entropy"/>
+          </g></g></g></g>
         </svg>
         {this.resetLayout(styles)}
         {this.entropyCountSwitch(styles)}

src/components/frequencies/index.js

@@ -126,7 +126,12 @@ class Frequencies extends React.Component {
             overflow: "visible"
           }}
         >
-          <g ref={(c) => { this.domRef = c; }} id="d3frequencies"/>
+          {/* TODO: remove intermediate <g>s once the 1Password extension interference is resolved
+            * <https://github.com/nextstrain/auspice/issues/1919>
+            */}
+          <g><g><g><g>
+            <g ref={(c) => { this.domRef = c; }} id="d3frequencies"/>
+          </g></g></g></g>
         </svg>
       </Card>
     );

src/components/map/map.js

@@ -176,7 +176,10 @@ class Map extends React.Component {
       this.state.responsive &&
       !this.state.d3DOMNode
     ) {
-      const d3DOMNode = select("#map svg").attr("id", "d3DemesTransmissions");
+      /* TODO: remove intermediate <g>s once the 1Password extension interference is resolved
+       * <https://github.com/nextstrain/auspice/issues/1919>
+       */
+      const d3DOMNode = select("#map svg").attr("id", "d3DemesTransmissions").append("g").append("g").append("g").append("g");
       this.setState({d3DOMNode});
     }
   }

src/components/measurements/measurementsD3.js

@@ -196,12 +196,13 @@ export const drawMeasurementsSVG = (ref, xAxisRef, svgData, handleClickOnGroupin
   // Do not draw SVG if there are no measurements
   if (groupedMeasurements && groupedMeasurements.length === 0) return;
 
-  const svg = select(ref);
-
   // The number of groups is the number of subplots, which determines the final SVG height
   const totalSubplotHeight = (layout.subplotHeight * groupedMeasurements.length);
   const svgHeight = totalSubplotHeight + layout.topPadding;
-  svg.attr("height", svgHeight);
+  /* TODO: remove intermediate <g>s once the 1Password extension interference is resolved
+   * <https://github.com/nextstrain/auspice/issues/1919>
+   */
+  const svg = select(ref).attr("height", svgHeight).append("g").append("g").append("g").append("g");
 
   // x-axis is in a different SVG element to allow sticky positioning
   drawStickyXAxis(xAxisRef, containerHeight, svgHeight, xScale, x_axis_label);

src/components/tree/phyloTree/change.ts

@@ -75,7 +75,7 @@ const svgSetters = {
 };
 
 
-type UpdateCall = (selection: Transition<SVGGElement, PhyloNode, SVGSVGElement | null, unknown>) => void;
+type UpdateCall = (selection: Transition<SVGGElement, PhyloNode, SVGGElement | null, unknown>) => void;
 
 
 /** createUpdateCall
@@ -111,7 +111,7 @@ function createUpdateCall(
 }
 
 const genericSelectAndModify = (
-  svg: Selection<SVGSVGElement | null, unknown, null, unknown>,
+  svg: Selection<SVGGElement | null, unknown, null, unknown>,
   treeElem: TreeElement,
   updateCall: UpdateCall,
   transitionTime: number,

src/components/tree/phyloTree/layouts.ts

@@ -310,6 +310,7 @@ export const setScales = function setScales(this: PhyloTreeType): void {
     this.yScale = scaleLinear();
   }
 
+  // TODO: access these from d3treeParent so they don't have to be set twice
   const width = parseInt(this.svg.attr("width"), 10);
   const height = parseInt(this.svg.attr("height"), 10);
   if (this.layout === "radial" || this.layout === "unrooted") {

src/components/tree/phyloTree/renderers.ts

@@ -29,8 +29,8 @@ export const render = function render(
   scatterVariables,
   measurementsColorGrouping,
 }: {
-  /** the svg into which the tree is drawn */
-  svg: Selection<SVGSVGElement | null, unknown, null, unknown>
+  /** the SVG element into which the tree is drawn */
+  svg: Selection<SVGGElement | null, unknown, null, unknown>
 
   /** the layout to be used, e.g. "rect" */
   layout: Layout

src/components/tree/phyloTree/types.ts

@@ -283,7 +283,7 @@ export interface PhyloTreeType {
   setScales: typeof layouts.setScales
   showTemporalSlice: typeof grid.showTemporalSlice
   strainToNode: Record<string, PhyloNode>
-  svg: Selection<SVGSVGElement | null, unknown, null, unknown>
+  svg: Selection<SVGGElement | null, unknown, null, unknown>
   timeLastRenderRequested?: number
   unrootedLayout: typeof layouts.unrootedLayout
   updateBranchLabels: typeof labels.updateBranchLabels

src/components/tree/tree.tsx

@@ -27,8 +27,8 @@ const rhsTreeId = "RIGHT";
 export class TreeComponent extends React.Component<TreeComponentProps, TreeComponentState> {
 
   domRefs: {
-    mainTree: SVGSVGElement | null;
-    secondTree: SVGSVGElement | null;
+    mainTree: SVGGElement | null;
+    secondTree: SVGGElement | null;
   };
   tangleRef?: Tangle;
   clearSelectedNode: (node: SelectedNode) => void;
@@ -186,12 +186,23 @@ export class TreeComponent extends React.Component<TreeComponentProps, TreeCompo
   }) {
     return (
       <svg
-        id={mainTree ? "MainTree" : "SecondTree"}
+        id="d3treeParent"
         style={{pointerEvents: "auto", cursor: "default", userSelect: "none"}}
         width={width}
         height={height}
-        ref={(c) => {mainTree ? this.domRefs.mainTree = c : this.domRefs.secondTree = c;}}
-      />
+      >
+        {/* TODO: remove intermediate <g>s once the 1Password extension interference is resolved
+          * <https://github.com/nextstrain/auspice/issues/1919>
+          */}
+        <g><g><g><g>
+          <g
+            id={mainTree ? "MainTree" : "SecondTree"}
+            width={width}
+            height={height}
+            ref={(c) => {mainTree ? this.domRefs.mainTree = c : this.domRefs.secondTree = c;}}
+          />
+        </g></g></g></g>
+      </svg>
     );
   }