Merge pull request #2552 from GMOD/slightly_lighter_colors

Change border on non-cytoband OverviewScaleBar visible region back to blue and cytoband OverviewScaleBar to a little lighter fill
GMOD · Nov 30, 2021 · 9ba6b7b · 9ba6b7b
2 parents b90f78b + ac958f4
commit 9ba6b7b
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 8 deletions.
diff --git a/plugins/linear-genome-view/src/LinearGenomeView/components/LinearGenomeViewSvg.tsx b/plugins/linear-genome-view/src/LinearGenomeView/components/LinearGenomeViewSvg.tsx
@@ -177,7 +177,7 @@ const SVGHeader = ({ model }: { model: LGV }) => {
           <Cytobands overview={overview} assembly={assembly} block={block} />
           <rect
             stroke="red"
-            fill="rgb(255,0,0,0.3)"
+            fill="rgb(255,0,0,0.1)"
             width={Math.max(lastOverviewPx - firstOverviewPx, 0.5)}
             height={HEADER_OVERVIEW_HEIGHT - 1}
             x={firstOverviewPx}

diff --git a/plugins/linear-genome-view/src/LinearGenomeView/components/OverviewScaleBar.tsx b/plugins/linear-genome-view/src/LinearGenomeView/components/OverviewScaleBar.tsx
@@ -62,7 +62,7 @@ const useStyles = makeStyles(theme => {
       height: HEADER_OVERVIEW_HEIGHT,
       pointerEvents: 'none',
       zIndex: 100,
-      border: '1px solid red',
+      border: '1px solid',
     },
     overview: {
       height: HEADER_BAR_HEIGHT,
@@ -405,16 +405,18 @@ const ScaleBar = observer(
         coord: last.reversed ? last.start : last.end,
       }) || 0
 
+    const color = showCytobands ? '#f00' : scaleBarColor
+    const transparency = showCytobands ? 0.1 : 0.3
+
     return (
       <div className={classes.scaleBar}>
         <div
           className={classes.scaleBarVisibleRegion}
           style={{
             width: lastOverviewPx - firstOverviewPx,
             left: firstOverviewPx + cytobandOffset,
-            background: showCytobands
-              ? alpha('#f00', 0.3)
-              : alpha(scaleBarColor, 0.3),
+            background: alpha(color, transparency),
+            borderColor: color,
           }}
         />
         {/* this is the entire scale bar */}

diff --git a/...r-genome-view/src/LinearGenomeView/components/__snapshots__/LinearGenomeView.test.js.snap b/...r-genome-view/src/LinearGenomeView/components/__snapshots__/LinearGenomeView.test.js.snap
@@ -17,7 +17,7 @@ exports[`<LinearGenomeView /> renders one track, one region 1`] = `
         >
           <div
             class="makeStyles-scaleBarVisibleRegion"
-            style="width: 800px; left: 0px; background: rgba(121, 134, 203, 0.3);"
+            style="width: 800px; left: 0px; background: rgba(121, 134, 203, 0.3); border-color: #7986cb;"
           />
           <div
             class="makeStyles-scaleBarContig"
@@ -581,7 +581,7 @@ exports[`<LinearGenomeView /> renders two tracks, two regions 1`] = `
         >
           <div
             class="makeStyles-scaleBarVisibleRegion"
-            style="width: 580px; left: 0px; background: rgba(121, 134, 203, 0.3);"
+            style="width: 580px; left: 0px; background: rgba(121, 134, 203, 0.3); border-color: #7986cb;"
           />
           <div
             class="makeStyles-scaleBarContig"

diff --git a/...nome-view/src/JBrowseLinearGenomeView/__snapshots__/JBrowseLinearGenomeView.test.tsx.snap b/...nome-view/src/JBrowseLinearGenomeView/__snapshots__/JBrowseLinearGenomeView.test.tsx.snap
@@ -95,7 +95,7 @@ exports[`<JBrowseLinearGenomeView /> renders successfully 1`] = `
                 >
                   <div
                     class="makeStyles-scaleBarVisibleRegion"
-                    style="width: 267px; left: 0px; background: rgba(66, 119, 127, 0.3);"
+                    style="width: 267px; left: 0px; background: rgba(66, 119, 127, 0.3); border-color: rgb(66, 119, 127);"
                   />
                   <div
                     class="makeStyles-scaleBarContig"