Add ability to toggle "Show track outlines" (#4497)

GMOD · Jul 26, 2024 · 04781e9 · 04781e9
1 parent b6b98a4
commit 04781e9
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 21 deletions.
diff --git a/plugins/linear-genome-view/src/LinearGenomeView/components/TrackContainer.tsx b/plugins/linear-genome-view/src/LinearGenomeView/components/TrackContainer.tsx
@@ -37,14 +37,15 @@ const TrackContainer = observer(function ({
 }) {
   const { classes } = useStyles()
   const display = track.displays[0]
-  const { draggingTrackId } = model
+  const { draggingTrackId, showTrackOutlines } = model
   const ref = useRef<HTMLDivElement>(null)
 
   return (
     <Paper
       ref={ref}
       className={classes.root}
-      variant="outlined"
+      variant={showTrackOutlines ? 'outlined' : undefined}
+      elevation={showTrackOutlines ? undefined : 0}
       onClick={event => {
         if (event.detail === 2 && !track.displays[0].featureIdUnderMouse) {
           const left = ref.current?.getBoundingClientRect().left || 0

diff --git a/plugins/linear-genome-view/src/LinearGenomeView/model.ts b/plugins/linear-genome-view/src/LinearGenomeView/model.ts
@@ -264,6 +264,16 @@ export function stateModelFactory(pluginManager: PluginManager) {
         colorByCDS: types.optional(types.boolean, () =>
           Boolean(JSON.parse(localStorageGetItem('lgv-colorByCDS') || 'false')),
         ),
+
+        /**
+         * #property
+         * color by CDS
+         */
+        showTrackOutlines: types.optional(types.boolean, () =>
+          Boolean(
+            JSON.parse(localStorageGetItem('lgv-showTrackOutlines') || 'true'),
+          ),
+        ),
       }),
     )
     .volatile(() => ({
@@ -560,6 +570,12 @@ export function stateModelFactory(pluginManager: PluginManager) {
       },
     }))
     .actions(self => ({
+      /**
+       * #action
+       */
+      setShowTrackOutlines(arg: boolean) {
+        self.showTrackOutlines = arg
+      },
       /**
        * #action
        */
@@ -1210,6 +1226,13 @@ export function stateModelFactory(pluginManager: PluginManager) {
                 onClick: () => self.setHideHeader(!self.hideHeader),
               },
 
+              {
+                label: 'Show track outlines',
+                type: 'checkbox',
+                checked: self.showTrackOutlines,
+                onClick: () =>
+                  self.setShowTrackOutlines(!self.showTrackOutlines),
+              },
               {
                 label: 'Show header overview',
                 type: 'checkbox',

diff --git a/plugins/wiggle/src/MultiDensityRenderer/MultiDensityRenderer.ts b/plugins/wiggle/src/MultiDensityRenderer/MultiDensityRenderer.ts
@@ -7,11 +7,9 @@ import { drawDensity } from '../drawDensity'
 export default class MultiXYPlotRenderer extends WiggleBaseRenderer {
   // @ts-expect-error
   async draw(ctx: CanvasRenderingContext2D, props: MultiArgs) {
-    const { bpPerPx, sources, regions, features } = props
-    const [region] = regions
+    const { sources, features } = props
     const groups = groupBy(features.values(), f => f.get('source'))
     const height = props.height / sources.length
-    const width = (region.end - region.start) / bpPerPx
     let feats = [] as Feature[]
     ctx.save()
     sources.forEach(source => {
@@ -21,11 +19,6 @@ export default class MultiXYPlotRenderer extends WiggleBaseRenderer {
         features,
         height,
       })
-      ctx.strokeStyle = 'rgba(200,200,200,0.8)'
-      ctx.beginPath()
-      ctx.moveTo(0, height)
-      ctx.lineTo(width, height)
-      ctx.stroke()
       ctx.translate(0, height)
       feats = feats.concat(reducedFeatures)
     })

diff --git a/plugins/wiggle/src/MultiLinearWiggleDisplay/components/WiggleDisplayComponent.tsx b/plugins/wiggle/src/MultiLinearWiggleDisplay/components/WiggleDisplayComponent.tsx
@@ -6,17 +6,17 @@ import { observer } from 'mobx-react'
 import { WiggleDisplayModel } from '../models/model'
 import YScaleBars from './YScaleBars'
 
-const MultiLinearWiggleDisplayComponent = observer(
-  (props: { model: WiggleDisplayModel }) => {
-    const { model } = props
+const MultiLinearWiggleDisplayComponent = observer(function (props: {
+  model: WiggleDisplayModel
+}) {
+  const { model } = props
 
-    return (
-      <div>
-        <BaseLinearDisplayComponent {...props} />
-        <YScaleBars model={model} />
-      </div>
-    )
-  },
-)
+  return (
+    <div>
+      <BaseLinearDisplayComponent {...props} />
+      <YScaleBars model={model} />
+    </div>
+  )
+})
 
 export default MultiLinearWiggleDisplayComponent