Merge remote-tracking branch 'origin/main' into adjust_alpha

Author: cmdcolin

plugins/linear-comparative-view/src/LinearComparativeView/components/MinLengthSlider.tsx

@@ -1,12 +1,13 @@
 import { useEffect, useState } from 'react'
 
-import { Box, Slider, Tooltip, Typography } from '@mui/material'
+import { Box, Slider, Typography } from '@mui/material'
 import { observer } from 'mobx-react'
 import { makeStyles } from 'tss-react/mui'
 
+import SliderTooltip from './SliderTooltip'
+
 import type { LinearSyntenyDisplayModel } from '../../LinearSyntenyDisplay/model'
 import type { LinearComparativeViewModel } from '../model'
-import type { SliderValueLabelProps } from '@mui/material'
 
 const useStyles = makeStyles()({
   container: {
@@ -18,21 +19,6 @@ const useStyles = makeStyles()({
   },
 })
 
-function ValueLabelComponent(props: SliderValueLabelProps) {
-  const { children, open, value } = props
-  return (
-    <Tooltip
-      open={open}
-      enterTouchDelay={0}
-      placement="top"
-      title={value}
-      arrow
-    >
-      {children}
-    </Tooltip>
-  )
-}
-
 const MinLengthSlider = observer(function ({
   model,
 }: {
@@ -89,7 +75,7 @@ const MinLengthSlider = observer(function ({
         size="small"
         style={{ minWidth: 100 }}
         slots={{
-          valueLabel: ValueLabelComponent,
+          valueLabel: SliderTooltip,
         }}
       />
     </Box>

plugins/linear-comparative-view/src/LinearComparativeView/components/OpacitySlider.tsx

@@ -1,10 +1,11 @@
-import { Box, Slider, Tooltip, Typography } from '@mui/material'
+import { Box, Slider, Typography } from '@mui/material'
 import { observer } from 'mobx-react'
 import { makeStyles } from 'tss-react/mui'
 
+import SliderTooltip from './SliderTooltip'
+
 import type { LinearSyntenyDisplayModel } from '../../LinearSyntenyDisplay/model'
 import type { LinearComparativeViewModel } from '../model'
-import type { SliderValueLabelProps } from '@mui/material'
 
 const useStyles = makeStyles()({
   container: {
@@ -16,21 +17,6 @@ const useStyles = makeStyles()({
   },
 })
 
-function ValueLabelComponent(props: SliderValueLabelProps) {
-  const { children, open, value } = props
-  return (
-    <Tooltip
-      open={open}
-      enterTouchDelay={0}
-      placement="top"
-      title={value}
-      arrow
-    >
-      {children}
-    </Tooltip>
-  )
-}
-
 const OpacitySlider = observer(function ({
   model,
 }: {
@@ -82,7 +68,7 @@ const OpacitySlider = observer(function ({
         size="small"
         style={{ minWidth: 100 }}
         slots={{
-          valueLabel: ValueLabelComponent,
+          valueLabel: SliderTooltip,
         }}
         valueLabelFormat={(value: number) => sliderToAlpha(value).toFixed(3)}
       />

plugins/linear-comparative-view/src/LinearComparativeView/components/SliderTooltip.tsx

@@ -0,0 +1,18 @@
+import { Tooltip } from '@mui/material'
+
+import type { SliderValueLabelProps } from '@mui/material'
+
+export default function SliderTooltip(props: SliderValueLabelProps) {
+  const { children, open, value } = props
+  return (
+    <Tooltip
+      open={open}
+      enterTouchDelay={0}
+      placement="top"
+      title={value}
+      arrow
+    >
+      {children}
+    </Tooltip>
+  )
+}