Fix SVG export compatibility by removing rgba strings (#3825)

GMOD · Jul 20, 2023 · 130aa25 · 130aa25
1 parent 612df29
commit 130aa25
Show file tree

Hide file tree

Showing 21 changed files with 297 additions and 319 deletions.
diff --git a/plugins/breakpoint-split-view/package.json b/plugins/breakpoint-split-view/package.json
@@ -39,6 +39,7 @@
     "@gmod/vcf": "^5.0.9",
     "@mui/icons-material": "^5.0.1",
     "@types/file-saver": "^2.0.1",
+    "color": "^3.1.3",
     "file-saver": "^2.0.0"
   },
   "peerDependencies": {

diff --git a/plugins/breakpoint-split-view/src/BreakpointSplitView/svgcomponents/SVGBackground.tsx b/plugins/breakpoint-split-view/src/BreakpointSplitView/svgcomponents/SVGBackground.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import { useTheme } from '@mui/material'
+import Color from 'color'
 
 export default function SVGBackground({
   width,
@@ -15,7 +16,7 @@ export default function SVGBackground({
     <rect
       width={width + shift * 2}
       height={height}
-      fill={theme.palette.background.default}
+      fill={Color(theme.palette.background.default).hex()}
     />
   )
 }
diff --git a/plugins/circular-view/package.json b/plugins/circular-view/package.json
@@ -39,6 +39,7 @@
     "@mui/icons-material": "^5.0.1",
     "@types/file-saver": "^2.0.0",
     "clone": "^2.1.2",
+    "color": "^3.1.3",
     "file-saver": "^2.0.0"
   },
   "peerDependencies": {

diff --git a/plugins/circular-view/src/CircularView/svgcomponents/SVGBackground.tsx b/plugins/circular-view/src/CircularView/svgcomponents/SVGBackground.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import { useTheme } from '@mui/material'
+import Color from 'color'
 
 export default function SVGBackground({
   width,
@@ -15,7 +16,7 @@ export default function SVGBackground({
     <rect
       width={width + shift * 2}
       height={height}
-      fill={theme.palette.background.default}
+      fill={Color(theme.palette.background.default).hex()}
     />
   )
 }
diff --git a/plugins/dotplot-view/package.json b/plugins/dotplot-view/package.json
@@ -42,6 +42,7 @@
     "@types/file-saver": "^2.0.1",
     "@types/normalize-wheel": "^1.0.0",
     "clone": "^2.1.2",
+    "color": "^3.1.3",
     "file-saver": "^2.0.0",
     "normalize-wheel": "^1.0.1",
     "react-popper": "^2.0.0"

diff --git a/plugins/dotplot-view/src/DotplotView/svgcomponents/SVGBackground.tsx b/plugins/dotplot-view/src/DotplotView/svgcomponents/SVGBackground.tsx
@@ -1,4 +1,5 @@
 import React from 'react'
+import Color from 'color'
 import { useTheme } from '@mui/material'
 
 export default function SVGBackground({
@@ -15,7 +16,7 @@ export default function SVGBackground({
       y={0}
       width={width}
       height={height}
-      fill={theme.palette.background.default}
+      fill={Color(theme.palette.background.default).hex()}
     />
   )
 }
diff --git a/plugins/linear-comparative-view/package.json b/plugins/linear-comparative-view/package.json
@@ -39,6 +39,7 @@
     "@mui/icons-material": "^5.0.1",
     "@popperjs/core": "^2.0.0",
     "clone": "^2.1.2",
+    "color": "^3.1.3",
     "copy-to-clipboard": "^3.3.1",
     "file-saver": "^2.0.0",
     "react-popper": "^2.0.0"

diff --git a/plugins/linear-comparative-view/src/LinearSyntenyView/svgcomponents/SVGBackground.tsx b/plugins/linear-comparative-view/src/LinearSyntenyView/svgcomponents/SVGBackground.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import { useTheme } from '@mui/material'
+import Color from 'color'
 
 export default function SVGBackground({
   width,
@@ -15,7 +16,7 @@ export default function SVGBackground({
     <rect
       width={width + shift * 2}
       height={height}
-      fill={theme.palette.background.default}
+      fill={Color(theme.palette.background.default).hex()}
     />
   )
 }
diff --git a/plugins/linear-genome-view/package.json b/plugins/linear-genome-view/package.json
@@ -44,6 +44,7 @@
     "@types/normalize-wheel": "^1.0.0",
     "clone": "^2.1.2",
     "clsx": "^1.0.4",
+    "color": "^3.1.3",
     "copy-to-clipboard": "^3.3.1",
     "file-saver": "^2.0.0",
     "material-ui-popup-state": "^5.0.0",

diff --git a/plugins/linear-genome-view/src/LinearGenomeView/svgcomponents/SVGBackground.tsx b/plugins/linear-genome-view/src/LinearGenomeView/svgcomponents/SVGBackground.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import { useTheme } from '@mui/material'
+import Color from 'color'
 
 export default function SVGBackground({
   width,
@@ -15,7 +16,7 @@ export default function SVGBackground({
     <rect
       width={width + shift * 2}
       height={height}
-      fill={theme.palette.background.default}
+      fill={Color(theme.palette.background.default).hex()}
     />
   )
 }
diff --git a/plugins/linear-genome-view/src/LinearGenomeView/svgcomponents/SVGHeader.tsx b/plugins/linear-genome-view/src/LinearGenomeView/svgcomponents/SVGHeader.tsx
@@ -2,6 +2,7 @@ import React from 'react'
 import { getSession } from '@jbrowse/core/util'
 import Base1DView from '@jbrowse/core/util/Base1DViewModel'
 import { useTheme } from '@mui/material'
+import Color from 'color'
 
 // locals
 import { LinearGenomeViewModel, HEADER_OVERVIEW_HEIGHT } from '..'
@@ -26,7 +27,7 @@ export default function SVGHeader({
   const assemblyName = assemblyNames.length > 1 ? '' : assemblyNames[0]
   const assembly = assemblyManager.get(assemblyName)
   const theme = useTheme()
-
+  const c = Color(theme.palette.text.primary).hex()
   const overview = Base1DView.create({
     displayedRegions: JSON.parse(JSON.stringify(displayedRegions)),
     interRegionPaddingWidth: 0,
@@ -55,15 +56,10 @@ export default function SVGHeader({
       ...last,
       coord: last.reversed ? last.start : last.end,
     }) || 0
-  const c = +showCytobands * cytobandHeight
+  const y = +showCytobands * cytobandHeight
   return (
     <g id="header">
-      <text
-        x={0}
-        y={fontSize}
-        fontSize={fontSize}
-        fill={theme.palette.text.primary}
-      >
+      <text x={0} y={0} dominantBaseline="hanging" fontSize={fontSize} fill={c}>
         {assemblyName}
       </text>
 
@@ -84,10 +80,10 @@ export default function SVGHeader({
         </g>
       ) : null}
 
-      <g transform={`translate(0 ${fontSize + c})`}>
+      <g transform={`translate(0 ${fontSize + y})`}>
         <SVGScalebar model={model} fontSize={fontSize} />
       </g>
-      <g transform={`translate(0 ${rulerHeight + c})`}>
+      <g transform={`translate(0 ${rulerHeight + y})`}>
         <SVGRuler model={model} fontSize={fontSize} />
       </g>
     </g>

diff --git a/plugins/linear-genome-view/src/LinearGenomeView/svgcomponents/SVGRuler.tsx b/plugins/linear-genome-view/src/LinearGenomeView/svgcomponents/SVGRuler.tsx
@@ -7,6 +7,7 @@ import { makeTicks } from '../util'
 
 import { LinearGenomeViewModel } from '..'
 import SVGRegionSeparators from './SVGRegionSeparators'
+import Color from 'color'
 
 type LGV = LinearGenomeViewModel
 
@@ -29,19 +30,20 @@ function Ruler({
 }) {
   const ticks = makeTicks(start, end, bpPerPx, major, minor)
   const theme = useTheme()
+  const c = Color(theme.palette.text.secondary).hex()
   return (
     <>
       {ticks.map(tick => {
         const x = (reversed ? end - tick.base : tick.base - start) / bpPerPx
         return (
           <line
-            key={tick.base}
+            key={'tick-' + tick.base}
             x1={x}
             x2={x}
             y1={0}
             y2={tick.type === 'major' ? 6 : 4}
             strokeWidth={1}
-            stroke={theme.palette.text.secondary}
+            stroke={c}
           />
         )
       })}
@@ -53,11 +55,11 @@ function Ruler({
                 (reversed ? end - tick.base : tick.base - start) / bpPerPx
               return (
                 <text
+                  key={`label-${tick.base}`}
                   x={x - 3}
                   y={7 + 11}
-                  key={`label-${tick.base}`}
                   fontSize={11}
-                  fill={theme.palette.text.primary}
+                  fill={c}
                 >
                   {getTickDisplayStr(tick.base + 1, bpPerPx)}
                 </text>
@@ -82,6 +84,7 @@ export default function SVGRuler({
   } = model
   const renderRuler = contentBlocks.length < 5
   const theme = useTheme()
+  const c = Color(theme.palette.text.primary).hex()
   return (
     <>
       <SVGRegionSeparators model={model} height={30} />
@@ -98,12 +101,7 @@ export default function SVGRuler({
             </defs>
             <g transform={`translate(${offset} 0)`}>
               <g clipPath={`url(#${clipid})`}>
-                <text
-                  x={4}
-                  y={fontSize}
-                  fontSize={fontSize}
-                  fill={theme.palette.text.primary}
-                >
+                <text x={4} y={fontSize} fontSize={fontSize} fill={c}>
                   {refName}
                 </text>
                 <g transform="translate(0 20)">

diff --git a/plugins/linear-genome-view/src/LinearGenomeView/svgcomponents/SVGScalebar.tsx b/plugins/linear-genome-view/src/LinearGenomeView/svgcomponents/SVGScalebar.tsx
@@ -1,6 +1,7 @@
 import React from 'react'
 import { getBpDisplayStr } from '@jbrowse/core/util'
 import { useTheme } from '@mui/material'
+import Color from 'color'
 import { LinearGenomeViewModel } from '..'
 
 type LGV = LinearGenomeViewModel
@@ -20,35 +21,21 @@ export default function SVGScalebar({
   const displayBp = getBpDisplayStr(totalBp)
   const x0 = Math.max(-offsetPx, 0)
   const x1 = x0 + totalWidthPx
+  const c = Color(theme.palette.text.secondary).hex()
+  const x = x0 + (x1 - x0) / 2
+  const y = fontSize
   return (
     <>
-      <line
-        x1={x0}
-        x2={x1}
-        y1={10}
-        y2={10}
-        stroke={theme.palette.text.secondary}
-      />
-      <line
-        x1={x0}
-        x2={x0}
-        y1={5}
-        y2={15}
-        stroke={theme.palette.text.secondary}
-      />
-      <line
-        x1={x1}
-        x2={x1}
-        y1={5}
-        y2={15}
-        stroke={theme.palette.text.secondary}
-      />
+      <line x1={x0} x2={x1} y1={10} y2={10} stroke={c} />
+      <line x1={x0} x2={x0} y1={5} y2={15} stroke={c} />
+      <line x1={x1} x2={x1} y1={5} y2={15} stroke={c} />
       <text
-        x={x0 + (x1 - x0) / 2}
-        y={fontSize * 2}
+        x={x}
+        y={y}
         textAnchor="middle"
+        dominantBaseline="hanging"
         fontSize={fontSize}
-        fill={theme.palette.text.primary}
+        fill={c}
       >
         {displayBp}
       </text>

diff --git a/...ts/jbrowse-web/src/tests/__image_snapshots__/breakpoint_split_view_snapshot.svg b/...ts/jbrowse-web/src/tests/__image_snapshots__/breakpoint_split_view_snapshot.svg
diff --git a/products/jbrowse-web/src/tests/__image_snapshots__/circular_snapshot.svg b/products/jbrowse-web/src/tests/__image_snapshots__/circular_snapshot.svg
diff --git a/products/jbrowse-web/src/tests/__image_snapshots__/dotplot_snapshot.svg b/products/jbrowse-web/src/tests/__image_snapshots__/dotplot_snapshot.svg
diff --git a/products/jbrowse-web/src/tests/__image_snapshots__/lgv_snapshot.svg b/products/jbrowse-web/src/tests/__image_snapshots__/lgv_snapshot.svg
diff --git a/products/jbrowse-web/src/tests/__image_snapshots__/synteny_snapshot.svg b/products/jbrowse-web/src/tests/__image_snapshots__/synteny_snapshot.svg
diff --git a/products/jbrowse-web/src/tests/__snapshots__/ExportSvg.test.tsx.snap b/products/jbrowse-web/src/tests/__snapshots__/ExportSvg.test.tsx.snap
diff --git a/products/jbrowse-web/src/tests/__snapshots__/ExportSvgBreakpointSplitView.test.tsx.snap b/products/jbrowse-web/src/tests/__snapshots__/ExportSvgBreakpointSplitView.test.tsx.snap