Add q-score and quality description filters to STR readviz

Author: phildarnowsky-broad

browser/src/ShortTandemRepeatPage/ShortTandemRepeatAlleleSizeDistributionPlot.tsx

@@ -11,6 +11,12 @@ import { LegendOrdinal } from '@visx/legend'
 import { TooltipAnchor } from '@gnomad/ui'
 import { GNOMAD_POPULATION_NAMES, PopulationId } from '@gnomad/dataset-metadata/gnomadPopulations'
 import { colorByLabels } from './ShortTandemRepeatColorBySelect'
+import {
+  genotypeQualityKeys,
+  GenotypeQuality,
+  qualityDescriptionLabels,
+} from './qualityDescription'
+import { qScoreLabels, QScoreBin, qScoreKeys } from './qScore'
 
 // The 100% width/height container is necessary the component
 // to size to fit its container vs staying at its initial size.
@@ -35,32 +41,6 @@ export type ScaleType =
   | 'linear-truncated-1000'
   | 'log'
 
-export const genotypeQualityKeys = [
-  'low',
-  'medium-low',
-  'medium',
-  'medium-high',
-  'high',
-  'not-reviewed',
-] as const
-
-export type GenotypeQuality = (typeof genotypeQualityKeys)[number]
-
-export const qScoreKeys = [
-  '0',
-  '0.1',
-  '0.2',
-  '0.3',
-  '0.4',
-  '0.5',
-  '0.6',
-  '0.7',
-  '0.8',
-  '0.9',
-  '1',
-] as const
-
-export type QScoreBin = (typeof qScoreKeys)[number]
 export type ColorByValue = GenotypeQuality | QScoreBin | Sex | PopulationId | ''
 
 export type AlleleSizeDistributionItem = {
@@ -117,29 +97,6 @@ const colorMap: Record<ColorBy | '', Record<string, string>> = {
   },
 } as const
 
-const qualityDescriptionLabels: Record<GenotypeQuality, string> = {
-  low: 'Low',
-  'medium-low': 'Medium-low',
-  medium: 'Medium',
-  'medium-high': 'Medium-high',
-  high: 'High',
-  'not-reviewed': 'Not reviewed',
-}
-
-const qScoreLabels: Record<QScoreBin, string> = {
-  '0': '0 to 0.05',
-  '0.1': '0.05 to 0.15',
-  '0.2': '0.15 to 0.25',
-  '0.3': '0.25 to 0.35',
-  '0.4': '0.35 to 0.45',
-  '0.5': '0.45 to 0.55',
-  '0.6': '0.55 to 0.65',
-  '0.7': '0.65 to 0.75',
-  '0.8': '0.75 to 0.85',
-  '0.9': '0.85 to 0.95',
-  '1': '0.95 to 1',
-}
-
 const fixedLegendLabels: Partial<Record<ColorBy, Record<string, string>>> = {
   quality_description: qualityDescriptionLabels,
   q_score: qScoreLabels,

browser/src/ShortTandemRepeatPage/ShortTandemRepeatColorBySelect.tsx

@@ -41,9 +41,13 @@ const ShortTandemRepeatColorBySelect = ({
           }
         }}
       >
-        <option value="">None</option>
+        <option key="" value="">
+          None
+        </option>
         {Object.entries(colorByLabels).map(([key, label]) => (
-          <option value={key}>{label}</option>
+          <option key={key} value={key}>
+            {label}
+          </option>
         ))}
       </Select>
     </Label>

browser/src/ShortTandemRepeatPage/ShortTandemRepeatPage.tsx

@@ -16,8 +16,6 @@ import ShortTandemRepeatPopulationOptions from './ShortTandemRepeatPopulationOpt
 import ShortTandemRepeatColorBySelect from './ShortTandemRepeatColorBySelect'
 import ShortTandemRepeatAlleleSizeDistributionPlot, {
   ColorBy,
-  GenotypeQuality,
-  QScoreBin,
   Sex,
   ScaleType,
   AlleleSizeDistributionItem,
@@ -38,6 +36,8 @@ import {
 } from './shortTandemRepeatHelpers'
 import ShortTandemRepeatAdjacentRepeatSection from './ShortTandemRepeatAdjacentRepeatSection'
 import { PopulationId } from '@gnomad/dataset-metadata/gnomadPopulations'
+import { GenotypeQuality } from './qualityDescription'
+import { QScoreBin } from './qScore'
 
 type ShortTandemRepeatReferenceRegion = {
   chrom: string