From 3225693fb1f7370b4847e461970be1f16093a302 Mon Sep 17 00:00:00 2001
From: Caroline Bridge <cbridge@oicr.on.ca>
Date: Fri, 8 Mar 2024 10:32:38 -0500
Subject: [PATCH] Adds highlight to theme and border to overview scale bar to
 ensure visibility

---
 packages/core/ui/theme.ts                                   | 6 ++++++
 .../components/Highlight/OverviewHighlight.tsx              | 4 ++++
 .../src/LinearGenomeView/components/Highlight.tsx           | 4 ++--
 .../src/LinearGenomeView/components/OverviewHighlight.tsx   | 4 +++-
 4 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/packages/core/ui/theme.ts b/packages/core/ui/theme.ts
index c6c40878b1..34b8ca9553 100644
--- a/packages/core/ui/theme.ts
+++ b/packages/core/ui/theme.ts
@@ -7,6 +7,7 @@ declare module '@mui/material/styles/createPalette' {
   interface Palette {
     tertiary: Palette['primary']
     quaternary: Palette['primary']
+    highlight: Palette['primary']
     stopCodon?: string
     startCodon?: string
     bases: {
@@ -19,6 +20,7 @@ declare module '@mui/material/styles/createPalette' {
   interface PaletteOptions {
     tertiary?: PaletteOptions['primary']
     quaternary?: PaletteOptions['primary']
+    highlight?: PaletteOptions['primary']
     stopCodon?: string
     startCodon?: string
     bases?: {
@@ -45,6 +47,7 @@ function stockTheme() {
       secondary: { main: grape },
       tertiary: refTheme.palette.augmentColor({ color: { main: forest } }),
       quaternary: refTheme.palette.augmentColor({ color: { main: mandarin } }),
+      highlight: refTheme.palette.augmentColor({ color: { main: mandarin } }),
       stopCodon: '#e22',
       startCodon: '#3e3',
       bases: {
@@ -93,6 +96,7 @@ function getDarkStockTheme() {
       secondary: { main: grape },
       tertiary: refTheme.palette.augmentColor({ color: { main: forest } }),
       quaternary: refTheme.palette.augmentColor({ color: { main: mandarin } }),
+      highlight: refTheme.palette.augmentColor({ color: { main: mandarin } }),
       stopCodon: '#e22',
       startCodon: '#3e3',
       bases: {
@@ -127,6 +131,7 @@ function getDarkMinimalTheme() {
       secondary: { main: grey[800] },
       tertiary: refTheme.palette.augmentColor({ color: { main: grey[900] } }),
       quaternary: refTheme.palette.augmentColor({ color: { main: mandarin } }),
+      highlight: refTheme.palette.augmentColor({ color: { main: mandarin } }),
       stopCodon: '#e22',
       startCodon: '#3e3',
       bases: {
@@ -147,6 +152,7 @@ function getMinimalTheme() {
       secondary: { main: grey[800] },
       tertiary: refTheme.palette.augmentColor({ color: { main: grey[900] } }),
       quaternary: refTheme.palette.augmentColor({ color: { main: mandarin } }),
+      highlight: refTheme.palette.augmentColor({ color: { main: mandarin } }),
       stopCodon: '#e22',
       startCodon: '#3e3',
       bases: {
diff --git a/plugins/grid-bookmark/src/GridBookmarkWidget/components/Highlight/OverviewHighlight.tsx b/plugins/grid-bookmark/src/GridBookmarkWidget/components/Highlight/OverviewHighlight.tsx
index 1804f3c91a..d651920a56 100644
--- a/plugins/grid-bookmark/src/GridBookmarkWidget/components/Highlight/OverviewHighlight.tsx
+++ b/plugins/grid-bookmark/src/GridBookmarkWidget/components/Highlight/OverviewHighlight.tsx
@@ -83,6 +83,8 @@ const OverviewHighlight = observer(function OverviewHighlight({
                         left,
                         width,
                         background: highlight,
+                        borderLeft: `1px solid ${highlight}`,
+                        borderRight: `1px solid ${highlight}`,
                       }}
                     />
                   </Tooltip>
@@ -94,6 +96,8 @@ const OverviewHighlight = observer(function OverviewHighlight({
                       left,
                       width,
                       background: highlight,
+                      borderLeft: `1px solid ${highlight}`,
+                      borderRight: `1px solid ${highlight}`,
                     }}
                   />
                 )}
diff --git a/plugins/linear-genome-view/src/LinearGenomeView/components/Highlight.tsx b/plugins/linear-genome-view/src/LinearGenomeView/components/Highlight.tsx
index 060c3d144a..e5c6cabadf 100644
--- a/plugins/linear-genome-view/src/LinearGenomeView/components/Highlight.tsx
+++ b/plugins/linear-genome-view/src/LinearGenomeView/components/Highlight.tsx
@@ -26,7 +26,7 @@ const useStyles = makeStyles()(theme => ({
     height: '100%',
     position: 'absolute',
     overflow: 'hidden',
-    background: `${colord(theme.palette.quaternary?.main ?? 'goldenrod')
+    background: `${colord(theme.palette.highlight?.main ?? 'goldenrod')
       .alpha(0.35)
       .toRgbString()}`,
   },
@@ -36,7 +36,7 @@ const Highlight = observer(function Highlight({ model }: { model: LGV }) {
   const { classes } = useStyles()
   const [open, setOpen] = useState(false)
   const anchorEl = useRef(null)
-  const color = useTheme().palette.quaternary?.main ?? 'goldenrod'
+  const color = useTheme().palette.highlight?.main ?? 'goldenrod'
 
   const session = getSession(model) as SessionWithWidgets
 
diff --git a/plugins/linear-genome-view/src/LinearGenomeView/components/OverviewHighlight.tsx b/plugins/linear-genome-view/src/LinearGenomeView/components/OverviewHighlight.tsx
index ef2e8ed8ec..228123bc93 100644
--- a/plugins/linear-genome-view/src/LinearGenomeView/components/OverviewHighlight.tsx
+++ b/plugins/linear-genome-view/src/LinearGenomeView/components/OverviewHighlight.tsx
@@ -14,9 +14,11 @@ const useStyles = makeStyles()(theme => ({
   highlight: {
     height: '100%',
     position: 'absolute',
-    background: `${colord(theme.palette.quaternary?.main ?? 'goldenrod')
+    background: `${colord(theme.palette.highlight?.main ?? 'goldenrod')
       .alpha(0.35)
       .toRgbString()}`,
+    borderLeft: `1px solid ${theme.palette.highlight?.main ?? 'goldenrod'}`,
+    borderRight: `1px solid ${theme.palette.highlight?.main ?? 'goldenrod'}`,
   },
 }))