Add mouseover tooltip descriptions to the header of the VariantFeatur…

…eDetails sample/genotype table (#3187) Add FORMAT descriptions to sample/genotype table
GMOD · Sep 15, 2022 · 152d33d · 152d33d
1 parent 33c0970
commit 152d33d
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 32 deletions.
diff --git a/plugins/authentication/src/OAuthModel/model.tsx b/plugins/authentication/src/OAuthModel/model.tsx
@@ -155,7 +155,7 @@ const stateModelFactory = (configSchema: OAuthInternetAccountConfigModel) => {
           self.removeToken()
           let text = await response.text()
           try {
-            let obj = JSON.parse(text)
+            const obj = JSON.parse(text)
             if (obj.error === 'invalid_grant') {
               this.removeRefreshToken()
             }

diff --git a/plugins/variants/src/VariantFeatureWidget/VariantFeatureWidget.tsx b/plugins/variants/src/VariantFeatureWidget/VariantFeatureWidget.tsx
@@ -55,7 +55,11 @@ function VariantFeatureDetails(props: any) {
           locStrings={[`${feat.INFO.CHR2[0]}:${feat.INFO.END}`]}
         />
       ) : null}
-      <VariantSampleGrid feature={feat} {...props} />
+      <VariantSampleGrid
+        feature={feat}
+        {...props}
+        descriptions={descriptions}
+      />
     </Paper>
   )
 }

diff --git a/plugins/variants/src/VariantFeatureWidget/VariantSampleGrid.tsx b/plugins/variants/src/VariantFeatureWidget/VariantSampleGrid.tsx
@@ -10,47 +10,65 @@ import {
 
 import { DataGrid } from '@mui/x-data-grid'
 import { BaseCard } from '@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail'
+import { SimpleFeatureSerialized } from '@jbrowse/core/util/simpleFeature'
 
-export default function VariantSamples(props: any) {
-  const [filter, setFilter] = useState<any>({})
-  const [showFilters, setShowFilters] = useState(false)
-  const { feature } = props
+interface Entry {
+  sample: string
+  id: string
+  [key: string]: string
+}
 
-  const { samples = {} } = feature
-  const preFilteredRows: any = Object.entries(samples)
+export default function VariantSamples(props: {
+  feature: SimpleFeatureSerialized
+  descriptions: any
+}) {
+  const { feature, descriptions } = props
+  const [filter, setFilter] = useState<Record<string, string>>({})
+  const [showFilters, setShowFilters] = useState(false)
+  const { samples = {} } = feature as Record<
+    string,
+    Record<string, Record<string, unknown>>
+  >
+  const preFilteredRows = Object.entries(samples)
   if (!preFilteredRows.length) {
     return null
   }
+
   const infoFields = ['sample', ...Object.keys(preFilteredRows[0][1])].map(
     field => ({
       field,
+      description: descriptions.FORMAT?.[field]?.Description,
     }),
   )
+
   let error
-  let rows = []
+  let rows = [] as Entry[]
   const filters = Object.keys(filter)
 
   // catch some error thrown from regex
   // note: maps all values into a string, if this is not done rows are not
   // sortable by the data-grid
   try {
     rows = preFilteredRows
-      .map((row: any) => ({
-        ...Object.fromEntries(
-          Object.entries(row[1]).map(entry => [entry[0], String(entry[1])]),
-        ),
-        sample: row[0],
-        id: row[0],
-      }))
-      .filter((row: any) => {
-        return filters.length
+      .map(
+        row =>
+          ({
+            ...Object.fromEntries(
+              Object.entries(row[1]).map(entry => [entry[0], String(entry[1])]),
+            ),
+            sample: row[0],
+            id: row[0],
+          } as Entry),
+      )
+      .filter(row =>
+        filters.length
           ? filters.every(key => {
               const val = row[key]
               const currFilter = filter[key]
               return currFilter ? val.match(new RegExp(currFilter, 'i')) : true
             })
-          : true
-      })
+          : true,
+      )
   } catch (e) {
     error = e
   }
@@ -77,18 +95,16 @@ export default function VariantSamples(props: any) {
             include the first alternate allele e.g. 0|1 or 1|1, entering
             [1-9]\d* will find any non-zero allele e.g. 0|2 or 2/33
           </Typography>
-          {infoFields.map(({ field }) => {
-            return (
-              <TextField
-                key={`filter-${field}`}
-                placeholder={`Filter ${field}`}
-                value={filter[field] || ''}
-                onChange={event =>
-                  setFilter({ ...filter, [field]: event.target.value })
-                }
-              />
-            )
-          })}
+          {infoFields.map(({ field }) => (
+            <TextField
+              key={`filter-${field}`}
+              placeholder={`Filter ${field}`}
+              value={filter[field] || ''}
+              onChange={event =>
+                setFilter({ ...filter, [field]: event.target.value })
+              }
+            />
+          ))}
         </>
       ) : null}
       <div style={{ height: 600, width: '100%', overflow: 'auto' }}>