fixup: fixed order for keys

Author: phildarnowsky-broad

browser/src/ShortTandemRepeatPage/ShortTandemRepeatAdjacentRepeatSection.tsx

@@ -5,7 +5,8 @@ import { Modal, Select } from '@gnomad/ui'
 import ControlSection from '../VariantPage/ControlSection'
 
 import ShortTandemRepeatPopulationOptions from './ShortTandemRepeatPopulationOptions'
-import { ShortTandemRepeatAdjacentRepeat, ScaleType, Sex, ColorBy } from './ShortTandemRepeatPage'
+import { ShortTandemRepeatAdjacentRepeat } from './ShortTandemRepeatPage'
+import { ScaleType, Sex, ColorBy } from './ShortTandemRepeatAlleleSizeDistributionPlot'
 import ShortTandemRepeatAlleleSizeDistributionPlot from './ShortTandemRepeatAlleleSizeDistributionPlot'
 import ShortTandemRepeatGenotypeDistributionPlot from './ShortTandemRepeatGenotypeDistributionPlot'
 import ShortTandemRepeatGenotypeDistributionBinDetails from './ShortTandemRepeatGenotypeDistributionBinDetails'

browser/src/ShortTandemRepeatPage/ShortTandemRepeatAlleleSizeDistributionPlot.tsx

@@ -9,15 +9,8 @@ import { AnyD3Scale } from '@visx/scale'
 import { LegendOrdinal } from '@visx/legend'
 
 import { TooltipAnchor } from '@gnomad/ui'
-import {
-  AlleleSizeDistributionItem,
-  ColorBy,
-  ColorByValue,
-  GenotypeQuality,
-  QScoreBin,
-  ScaleType,
-} from './ShortTandemRepeatPage'
 import { GNOMAD_POPULATION_NAMES } from '@gnomad/dataset-metadata/gnomadPopulations'
+import { PopulationId } from '@gnomad/dataset-metadata/gnomadPopulations'
 
 // The 100% width/height container is necessary the component
 // to size to fit its container vs staying at its initial size.
@@ -35,6 +28,46 @@ const BarWithHoverEffect = styled(Bar)`
   }
 `
 
+export type ScaleType = 'linear' | 'linear-truncated' | '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',
+  '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 = {
+  repunit_count: number
+  frequency: number
+  colorByValue: ColorByValue
+}
+
+export type Sex = 'XX' | 'XY'
+
+export type ColorBy = 'quality_description' | 'q_score' | 'population' | 'sex'
+
 const defaultColor = '#73ab3d'
 const colorMap: Record<ColorBy | '', Record<string, string>> = {
   '': {
@@ -59,8 +92,7 @@ const colorMap: Record<ColorBy | '', Record<string, string>> = {
     '0.7': '#99ff66',
     '0.8': '#66ff99',
     '0.9': '#33ffcc',
-    '1.0': '#00ff00',
-    '': defaultColor,
+    '1': '#00ff00',
   },
   sex: {
     XX: '#F7C3CC',
@@ -100,8 +132,7 @@ const qScoreLabels: Record<QScoreBin, string> = {
   '0.7': '0.6 < q ≤ 0.7',
   '0.8': '0.7 < q ≤ 0.8',
   '0.9': '0.8 < q ≤ 0.9',
-  '1.0': '0.9 < q ≤ 1.0',
-  '': 'Not reviewed',
+  '1': '0.9 < q ≤ 1',
 }
 
 const fixedLegendLabels: Partial<Record<ColorBy, Record<string, string>>> = {
@@ -152,13 +183,20 @@ type Bin = Partial<Record<ColorByValue, number>> & {
   fullFrequency: number
 }
 
+const legendKeys: Record<ColorBy, string[]> = {
+  quality_description: [...genotypeQualityKeys],
+  q_score: [...qScoreKeys],
+  sex: ['XX', 'XY'],
+  population: ['nfe', 'afr', 'fin', 'amr', 'ami', 'asj', 'eas', 'mid', 'oth', 'sas'],
+}
+
 const LegendFromColorBy = ({ colorBy }: { colorBy: ColorBy | '' }) => {
   if (colorBy === '') {
     return null
   }
 
-  const keys = Object.keys(colorMap[colorBy])
-  const labels = legendLabels(colorBy, keys)
+  const keys = legendKeys[colorBy]
+  const labels = legendLabels(colorBy, [...keys])
   const colors = keys.map((key) => colorMap[colorBy][key])
   const scale = scaleOrdinal().domain(labels).range(colors)
   return <LegendOrdinal scale={scale} direction="row" />

browser/src/ShortTandemRepeatPage/ShortTandemRepeatColorBySelect.tsx

@@ -2,7 +2,7 @@ import React, { Dispatch, SetStateAction } from 'react'
 import styled from 'styled-components'
 
 import { Select } from '@gnomad/ui'
-import { ColorBy, ScaleType } from './ShortTandemRepeatPage'
+import { ColorBy, ScaleType } from './ShortTandemRepeatAlleleSizeDistributionPlot'
 
 const Label = styled.label`
   padding-right: 1em;

browser/src/ShortTandemRepeatPage/ShortTandemRepeatGenotypeDistributionBinDetails.tsx

@@ -5,11 +5,13 @@ import { List, ListItem } from '@gnomad/ui'
 import {
   ShortTandemRepeat,
   ShortTandemRepeatAdjacentRepeat,
-  Sex,
   GenotypeDistributionItem,
 } from './ShortTandemRepeatPage'
+
 import { getSelectedGenotypeDistribution } from './shortTandemRepeatHelpers'
 
+import { Sex } from './ShortTandemRepeatAlleleSizeDistributionPlot'
+
 type Props = {
   shortTandemRepeatOrAdjacentRepeat: ShortTandemRepeat | ShortTandemRepeatAdjacentRepeat
   selectedPopulation: string | ''

browser/src/ShortTandemRepeatPage/ShortTandemRepeatPage.tsx

@@ -14,7 +14,14 @@ import ShortTandemRepeatAssociatedDiseasesTable from './ShortTandemRepeatAssocia
 import ShortTandemRepeatAttributes from './ShortTandemRepeatAttributes'
 import ShortTandemRepeatPopulationOptions from './ShortTandemRepeatPopulationOptions'
 import ShortTandemRepeatColorBySelect from './ShortTandemRepeatColorBySelect'
-import ShortTandemRepeatAlleleSizeDistributionPlot from './ShortTandemRepeatAlleleSizeDistributionPlot'
+import ShortTandemRepeatAlleleSizeDistributionPlot, {
+  ColorBy,
+  GenotypeQuality,
+  QScoreBin,
+  Sex,
+  ScaleType,
+  AlleleSizeDistributionItem,
+} from './ShortTandemRepeatAlleleSizeDistributionPlot'
 import ShortTandemRepeatGenotypeDistributionPlot, {
   Bin as GenotypeBin,
 } from './ShortTandemRepeatGenotypeDistributionPlot'
@@ -38,38 +45,6 @@ type ShortTandemRepeatReferenceRegion = {
   stop: number
 }
 
-export type GenotypeQuality =
-  | 'low'
-  | 'medium-low'
-  | 'medium'
-  | 'medium-high'
-  | 'high'
-  | 'not-reviewed'
-export type QScoreBin =
-  | '0.0'
-  | '0.1'
-  | '0.2'
-  | '0.3'
-  | '0.4'
-  | '0.5'
-  | '0.6'
-  | '0.7'
-  | '0.8'
-  | '0.9'
-  | '1.0'
-  | ''
-export type ColorByValue = GenotypeQuality | QScoreBin | Sex | PopulationId | ''
-
-export type AlleleSizeDistributionItem = {
-  repunit_count: number
-  frequency: number
-  colorByValue: ColorByValue
-}
-
-export type Sex = 'XX' | 'XY'
-
-export type ColorBy = 'quality_description' | 'q_score' | 'population' | 'sex'
-
 export type AlleleSizeDistributionCohort = {
   ancestry_group: PopulationId
   sex: Sex
@@ -168,8 +143,6 @@ type ShortTandemRepeatPageProps = {
   shortTandemRepeat: ShortTandemRepeat
 }
 
-export type ScaleType = 'linear' | 'linear-truncated' | 'log'
-
 // Stacked bar plots only make sense when the y scale factor stays constant
 // throughout, so log scale is only allowed when there's only one bar per
 // column, that is, when not breaking down the data into subsets.

browser/src/ShortTandemRepeatPage/ShortTandemRepeatPopulationOptions.tsx

@@ -5,7 +5,7 @@ import { Select } from '@gnomad/ui'
 
 import { PopulationId, GNOMAD_POPULATION_NAMES } from '@gnomad/dataset-metadata/gnomadPopulations'
 
-import { Sex } from './ShortTandemRepeatPage'
+import { Sex } from './ShortTandemRepeatAlleleSizeDistributionPlot'
 
 const Wrapper = styled.div`
   @media (max-width: 600px) {

browser/src/ShortTandemRepeatPage/shortTandemRepeatHelpers.ts

@@ -1,16 +1,18 @@
 import {
-  ColorBy,
-  GenotypeQuality,
-  Sex,
   ShortTandemRepeat,
-  AlleleSizeDistributionItem,
   AlleleSizeDistributionCohort,
   GenotypeDistributionCohort,
   GenotypeDistributionItem,
   ShortTandemRepeatAdjacentRepeat,
-  ColorByValue,
 } from './ShortTandemRepeatPage'
 
+import {
+  ColorBy,
+  Sex,
+  ColorByValue,
+  AlleleSizeDistributionItem,
+} from './ShortTandemRepeatAlleleSizeDistributionPlot'
+
 type AlleleSizeDistributionParams = {
   selectedPopulation: string | ''
   selectedSex: Sex | ''

browser/src/__factories__/ShortTandemRepeat.ts

@@ -49,7 +49,7 @@ const shortTandemRepeatFactory = Factory.define<ShortTandemRepeat>(({ params, as
         short_allele_repunit: 'ACCA',
         long_allele_repunit: 'GATA',
         quality_description: 'high',
-        q_score: '1.0',
+        q_score: '1',
         distribution: [
           { short_allele_repunit_count: 8, long_allele_repunit_count: 9, frequency: 15 },
           { short_allele_repunit_count: 8, long_allele_repunit_count: 10, frequency: 19 },