Add shadow below pinned tracks

packages/core/util/index.ts

@@ -1308,6 +1308,24 @@ export function groupBy<T>(array: Iterable<T>, predicate: (v: T) => string) {
   return result
 }
 
+/**
+ * Partition an array into two arrays based on a condition. See
+ * {@link https://www.30secondsofcode.org/js/s/partition-array/}
+ */
+export function partition<T>(
+  array: T[],
+  callback: (value: T, currentIndex: number, originalArray: T[]) => boolean,
+) {
+  // eslint-disable-next-line unicorn/no-array-reduce
+  return array.reduce(
+    (acc, val, i, arr) => {
+      acc[callback(val, i, arr) ? 0 : 1].push(val)
+      return acc
+    },
+    [[] as T[], [] as T[]],
+  )
+}
+
 export function notEmpty<T>(value: T | null | undefined): value is T {
   return value !== null && value !== undefined
 }

plugins/linear-genome-view/src/LinearGenomeView/components/LinearGenomeView.tsx

@@ -2,7 +2,7 @@ import React, { lazy, useEffect, useRef } from 'react'
 import { Button, Paper, Typography } from '@mui/material'
 import { makeStyles } from 'tss-react/mui'
 import { LoadingEllipses, VIEW_HEADER_HEIGHT } from '@jbrowse/core/ui'
-import { getSession } from '@jbrowse/core/util'
+import { getSession, partition } from '@jbrowse/core/util'
 import { observer } from 'mobx-react'
 
 // icons
@@ -112,6 +112,11 @@ const LinearGenomeView = observer(({ model }: { model: LGV }) => {
     }
   }
 
+  const [pinnedTracks, unpinnedTracks] = partition(
+    tracks,
+    track => track.pinned,
+  )
+
   return (
     <div
       className={classes.rel}
@@ -138,21 +143,20 @@ const LinearGenomeView = observer(({ model }: { model: LGV }) => {
           <NoTracksActive model={model} />
         ) : (
           <>
-            <div
-              className={classes.pinnedTracks}
-              style={{ top: pinnedTracksTop }}
-            >
-              {tracks
-                .filter(track => track.pinned)
-                .map(track => (
+            {pinnedTracks.length ? (
+              <Paper
+                elevation={6}
+                className={classes.pinnedTracks}
+                style={{ top: pinnedTracksTop }}
+              >
+                {pinnedTracks.map(track => (
                   <TrackContainer key={track.id} model={model} track={track} />
                 ))}
-            </div>
-            {tracks
-              .filter(track => !track.pinned)
-              .map(track => (
-                <TrackContainer key={track.id} model={model} track={track} />
-              ))}
+              </Paper>
+            ) : null}
+            {unpinnedTracks.map(track => (
+              <TrackContainer key={track.id} model={model} track={track} />
+            ))}
           </>
         )}
       </TracksContainer>