Fix metadata facet filters being blank (#4154)

plugins/data-management/src/HierarchicalTrackSelectorWidget/components/faceted/FacetFilter.tsx

@@ -55,25 +55,22 @@ function ExpandButton({
 const FacetFilter = observer(function ({
   column,
   vals,
-  width,
   model,
 }: {
   column: { field: string }
   vals: [string, number][]
-  width: number
   model: HierarchicalTrackSelectorModel
 }) {
   const { classes } = useStyles()
   const [visible, setVisible] = useState(true)
   const { faceted } = model
   const { filters } = faceted
+  const { field } = column
   return (
-    <FormControl key={column.field} className={classes.facet} style={{ width }}>
-      <div style={{ display: 'flex' }}>
-        <Typography>{column.field}</Typography>
-        <ClearButton
-          onClick={() => model.faceted.setFilter(column.field, [])}
-        />
+    <FormControl className={classes.facet} fullWidth>
+      <div>
+        <Typography component="span">{field}</Typography>
+        <ClearButton onClick={() => faceted.setFilter(field, [])} />
         <ExpandButton visible={visible} onClick={() => setVisible(!visible)} />
       </div>
       {visible ? (

plugins/data-management/src/HierarchicalTrackSelectorWidget/components/faceted/FacetFilters.tsx

@@ -1,17 +1,18 @@
 import React from 'react'
+import { observer } from 'mobx-react'
+
+// locals
 import FacetFilter from './FacetFilter'
 import { HierarchicalTrackSelectorModel } from '../../model'
-import { observer } from 'mobx-react'
+import { Row, getRowStr } from './util'
 
 const FacetFilters = observer(function ({
   rows,
   columns,
-  width,
   model,
 }: {
-  rows: Record<string, unknown>[]
+  rows: Row[]
   columns: { field: string }[]
-  width: number
   model: HierarchicalTrackSelectorModel
 }) {
   const { faceted } = model
@@ -41,7 +42,7 @@ const FacetFilters = observer(function ({
   for (const facet of ret) {
     const elt = uniqs.get(facet)!
     for (const row of currentRows) {
-      const key = `${row[facet] || ''}`
+      const key = getRowStr(facet, row)
       const val = elt.get(key)
       // we don't allow filtering on empty yet
       if (key) {
@@ -55,19 +56,19 @@ const FacetFilters = observer(function ({
     const filter = filters.get(facet)?.length
       ? new Set(filters.get(facet))
       : undefined
-    currentRows = currentRows.filter(row => {
-      return filter !== undefined ? filter.has(row[facet] as string) : true
-    })
+
+    currentRows = currentRows.filter(row =>
+      filter !== undefined ? filter.has(getRowStr(facet, row)) : true,
+    )
   }
 
   return (
     <div>
-      {facets.map(column => (
+      {facets.map(c => (
         <FacetFilter
-          key={column.field}
-          vals={[...uniqs.get(column.field)!]}
-          column={column}
-          width={width}
+          key={c.field}
+          vals={[...uniqs.get(c.field)!]}
+          column={c}
           model={model}
         />
       ))}

plugins/data-management/src/HierarchicalTrackSelectorWidget/components/faceted/FacetedSelector.tsx

@@ -46,7 +46,7 @@ const FacetedSelector = observer(function FacetedSelector({
   model: HierarchicalTrackSelectorModel
 }) {
   const { classes } = useStyles()
-  const { view, selection, faceted } = model
+  const { view, selection, shownTrackIds, faceted } = model
   const {
     rows,
     panelWidth,
@@ -61,7 +61,6 @@ const FacetedSelector = observer(function FacetedSelector({
   } = faceted
   const { pluginManager } = getEnv(model)
   const { ref, scrollLeft } = useResizeBar()
-  const tracks = view.tracks as AnyConfigurationModel[]
   const widthsDebounced = useDebounce(widths, 200)
 
   const columns = [
@@ -102,10 +101,6 @@ const FacetedSelector = observer(function FacetedSelector({
     })),
   ]
 
-  const shownTrackIds = new Set(
-    tracks.map(t => t.configuration.trackId as string),
-  )
-
   return (
     <>
       <FacetedHeader model={model} />
@@ -197,19 +192,8 @@ const FacetedSelector = observer(function FacetedSelector({
               onDrag={dist => faceted.setPanelWidth(panelWidth - dist)}
               className={classes.resizeHandle}
             />
-            <div
-              style={{
-                width: panelWidth,
-                overflowY: 'auto',
-                overflowX: 'hidden',
-              }}
-            >
-              <FacetFilters
-                model={model}
-                width={panelWidth - 10}
-                rows={rows}
-                columns={columns}
-              />
+            <div style={{ width: panelWidth }}>
+              <FacetFilters model={model} rows={rows} columns={columns} />
             </div>
           </>
         ) : null}

plugins/data-management/src/HierarchicalTrackSelectorWidget/components/faceted/util.ts

@@ -0,0 +1,13 @@
+export interface Row {
+  id: string
+  metadata?: Record<string, unknown>
+  [key: string]: unknown
+}
+
+export function getRowStr(facet: string, row: Row) {
+  return `${
+    (facet.startsWith('metadata.')
+      ? row.metadata?.[facet.replace('metadata.', '')]
+      : row[facet]) || ''
+  }`
+}

plugins/data-management/src/HierarchicalTrackSelectorWidget/facetedModel.ts

@@ -12,6 +12,7 @@ import {
 } from '@jbrowse/core/util'
 import { autorun, observable } from 'mobx'
 import { getRootKeys, findNonSparseKeys } from './facetedUtil'
+import { getRowStr } from './components/faceted/util'
 
 const nonMetadataKeys = ['category', 'adapter', 'description'] as const
 
@@ -119,20 +120,20 @@ export function facetedStateTreeF() {
       get rows() {
         const session = getSession(self)
         const { allTrackConfigurations, filterText } = self
-        // metadata is spread onto the object for easier access and sorting
-        // by the mui data grid (it's unable to sort by nested objects)
         return allTrackConfigurations
           .filter(conf => matches(filterText, conf, session))
           .map(track => {
-            const metadata = readConfObject(track, 'metadata')
             return {
               id: track.trackId as string,
               conf: track,
               name: getTrackName(track, session),
               category: readConfObject(track, 'category')?.join(', ') as string,
               adapter: readConfObject(track, 'adapter')?.type as string,
               description: readConfObject(track, 'description') as string,
-              metadata,
+              metadata: readConfObject(track, 'metadata') as Record<
+                string,
+                unknown
+              >,
             } as const
           })
       },
@@ -181,8 +182,7 @@ export function facetedStateTreeF() {
           .filter(f => f[1].length > 0)
           .map(([key, val]) => [key, new Set(val)] as const)
         return self.rows.filter(row =>
-          // @ts-expect-error
-          arrFilters.every(([key, val]) => val.has(row[key])),
+          arrFilters.every(([key, val]) => val.has(getRowStr(key, row))),
         )
       },
     }))

plugins/data-management/src/HierarchicalTrackSelectorWidget/model.ts

@@ -92,6 +92,17 @@ export default function stateTreeFactory(pluginManager: PluginManager) {
       favoritesCounter: 0,
     }))
     .views(self => ({
+      /**
+       * #getter
+       */
+      get shownTrackIds() {
+        return new Set<string>(
+          self.view?.tracks?.map(
+            (t: { configuration: { trackId: string } }) =>
+              t.configuration.trackId,
+          ),
+        )
+      },
       /**
        * #getter
        */