diff --git a/browser/src/ShortTandemRepeatPage/ShortTandemRepeatAdjacentRepeatSection.tsx b/browser/src/ShortTandemRepeatPage/ShortTandemRepeatAdjacentRepeatSection.tsx index 08748f792..e4bc13f98 100644 --- a/browser/src/ShortTandemRepeatPage/ShortTandemRepeatAdjacentRepeatSection.tsx +++ b/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' diff --git a/browser/src/ShortTandemRepeatPage/ShortTandemRepeatAlleleSizeDistributionPlot.tsx b/browser/src/ShortTandemRepeatPage/ShortTandemRepeatAlleleSizeDistributionPlot.tsx index 4bdd77900..346ca39f8 100644 --- a/browser/src/ShortTandemRepeatPage/ShortTandemRepeatAlleleSizeDistributionPlot.tsx +++ b/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> = { '': { @@ -59,8 +92,7 @@ const colorMap: Record> = { '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 = { '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>> = { @@ -152,13 +183,20 @@ type Bin = Partial> & { fullFrequency: number } +const legendKeys: Record = { + 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 diff --git a/browser/src/ShortTandemRepeatPage/ShortTandemRepeatColorBySelect.tsx b/browser/src/ShortTandemRepeatPage/ShortTandemRepeatColorBySelect.tsx index fe633bd2a..053e4ef27 100644 --- a/browser/src/ShortTandemRepeatPage/ShortTandemRepeatColorBySelect.tsx +++ b/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; diff --git a/browser/src/ShortTandemRepeatPage/ShortTandemRepeatGenotypeDistributionBinDetails.tsx b/browser/src/ShortTandemRepeatPage/ShortTandemRepeatGenotypeDistributionBinDetails.tsx index 53d74d32d..a7a05a006 100644 --- a/browser/src/ShortTandemRepeatPage/ShortTandemRepeatGenotypeDistributionBinDetails.tsx +++ b/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 | '' diff --git a/browser/src/ShortTandemRepeatPage/ShortTandemRepeatPage.tsx b/browser/src/ShortTandemRepeatPage/ShortTandemRepeatPage.tsx index ec17bc540..2fea726b1 100644 --- a/browser/src/ShortTandemRepeatPage/ShortTandemRepeatPage.tsx +++ b/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. diff --git a/browser/src/ShortTandemRepeatPage/ShortTandemRepeatPopulationOptions.tsx b/browser/src/ShortTandemRepeatPage/ShortTandemRepeatPopulationOptions.tsx index 0b419fcd9..e232ad206 100644 --- a/browser/src/ShortTandemRepeatPage/ShortTandemRepeatPopulationOptions.tsx +++ b/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) { diff --git a/browser/src/ShortTandemRepeatPage/shortTandemRepeatHelpers.ts b/browser/src/ShortTandemRepeatPage/shortTandemRepeatHelpers.ts index de1da8ba4..b6dbc10a7 100644 --- a/browser/src/ShortTandemRepeatPage/shortTandemRepeatHelpers.ts +++ b/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 | '' diff --git a/browser/src/__factories__/ShortTandemRepeat.ts b/browser/src/__factories__/ShortTandemRepeat.ts index 716782eeb..522949e85 100644 --- a/browser/src/__factories__/ShortTandemRepeat.ts +++ b/browser/src/__factories__/ShortTandemRepeat.ts @@ -49,7 +49,7 @@ const shortTandemRepeatFactory = Factory.define(({ 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 },