Skip to content

Commit 928edfd

Browse files
author
Amy Chen
committed
remove changes, add new ones
1 parent e675bc6 commit 928edfd

File tree

9 files changed

+188
-40
lines changed

9 files changed

+188
-40
lines changed

‎src/server/Model/Cohort/AgeByGenderBucket.cs

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -11,11 +11,5 @@ public class AgeByGenderBucket
1111
public int Females { get; set; }
1212
public int Males { get; set; }
1313
public int Others { get; set; }
14-
public int Cisman { get; set;}
15-
public int Ciswoman { get; set;}
16-
public int Transwoman { get; set;}
17-
public int Transman { get; set;}
18-
public int Mab { get; set;}
19-
public int Fab { get; set;}
2014
}
2115
}

‎src/server/Model/Cohort/DemographicAggregator.cs

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -89,20 +89,12 @@ public DemographicStatistics Aggregate()
8989
AgeByGenderData = AgeBreakdown,
9090
LanguageByHeritageData = LanguageByHeritage,
9191
ReligionData = Religion,
92-
NihRaceEthnicityData = NihRaceEthnicity,
93-
TestData = null
92+
NihRaceEthnicityData = NihRaceEthnicity
9493
};
9594
}
9695

9796
readonly static string[] femaleSynonyms = { "f", "female" };
9897
readonly static string[] maleSynonyms = { "m", "male" };
99-
readonly static string[] cisWomanSynonyms = { "ciswoman", "cis-woman" };
100-
101-
102-
bool IsCisWoman(PatientDemographic patient)
103-
{
104-
return cisWomanSynonyms.Any(s => s.Equals(patient.Gender, StringComparison.InvariantCultureIgnoreCase));
105-
}
10698

10799
bool IsFemale(PatientDemographic patient)
108100
{
@@ -276,6 +268,11 @@ void aarp(int age)
276268
gender = GenderSplit.Right;
277269
increment = (bucket) => { bucket.Males++; };
278270
}
271+
else if (IsCisWoman(patient))
272+
{
273+
gender = new BinarySplit { Label = "ciswoman", Value = 0 };
274+
increment = (bucket) => { bucket.Ciswoman++; };
275+
}
279276

280277
var boxed = patient.Age;
281278
if (boxed.HasValue)
@@ -286,7 +283,7 @@ void aarp(int age)
286283
var bucket = AgeToBucket(age);
287284
increment(bucket);
288285
}
289-
286+
console.log("gender ? ", gender)
290287
if (gender != null)
291288
{
292289
gender.Value++;

‎src/ui-client/src/actions/cohort/count.ts

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -169,14 +169,20 @@ const getDemographics = () => {
169169
fetchDemographics(getState(), nr, queryId, cancelSource)
170170
.then(
171171
async demResponse => {
172+
173+
const cloneResponse = JSON.parse(JSON.stringify(demResponse));
172174

173175
// Make sure query hasn't been reset
174176
if (getState().cohort.count.state !== CohortStateType.LOADED) { return; }
175177
atLeastOneSucceeded = true;
178+
console.log(" original ", cloneResponse.data);
176179
const demographics = demResponse.data as DemographicDTO;
177-
console.log("original ", demResponse.data, " demo data ", demographics)
180+
console.log(" demo data ", demographics);
181+
const genders = [...new Set(demographics.patients.map(o => o.gender))];
182+
const genderData = Object.fromEntries(genders.map(gender => [gender, demographics.patients.filter(o => o.gender === gender).length]));
183+
console.log("genderData ", genderData)
178184

179-
dispatch(setNetworkVisualizationData(nr.id, demographics.statistics));
185+
dispatch(setNetworkVisualizationData(nr.id, {...demographics.statistics, patients: demographics.patients, genderData: genderData}));
180186
getPatientListFromNewBaseDataset(nr.id, demographics.patients, dispatch, getState);
181187

182188
if (demographics.columnNames) {

‎src/ui-client/src/components/Visualize/AgeByGender.tsx

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,10 +31,8 @@ export class AgeByGender extends React.PureComponent<Props> {
3131
const data: any[] = Object.keys(this.props.data.buckets)
3232
.map((d) => {
3333
const bucket = this.props.data.buckets[d];
34-
console.log("buckets ", bucket, " data ", this.props.data);
3534
if (bucket.females > max) { max = bucket.females; }
3635
if (bucket.males > max) { max = bucket.males; }
37-
if (bucket.others > max) { max = bucket.others}
3836
return {
3937
...bucket,
4038
label: d,

‎src/ui-client/src/components/Visualize/AggregateDemographics.tsx

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import { AgeByGender } from './AgeByGender';
1313
import { Binary } from './Binary';
1414
import { LanguageByHeritage } from './LanguageByHeritage';
1515
import { Religion } from './Religion';
16+
import { Gender} from './Gender';
1617
import { NihRaceEthnicityGenderTable } from './NihRaceEthnicityGenderTable';
1718

1819
export interface Props {
@@ -25,20 +26,27 @@ export default class AggregateDemographics extends React.PureComponent<Props> {
2526
private delayIncrementMs = 600;
2627

2728
public render() {
28-
const { ageByGenderData, binarySplitData, languageByHeritageData, religionData, nihRaceEthnicityData } = this.props.cohort.visualization.demographics;
29+
const { ageByGenderData, binarySplitData, languageByHeritageData, religionData, nihRaceEthnicityData, genderData } = this.props.cohort.visualization.demographics;
2930
const colWidth = this.props.width / 2;
3031
const getDelay = (i: number): number => i * this.delayIncrementMs;
3132

3233
return (
3334
<Container className="visualize-demographic-container aggregate" fluid={true}>
3435
<Row>
3536
<Col lg={6} md={12} className="visualization-agebygender-container">
36-
<SectionHeader headerText="Current Age By Gender" />
37+
{/* <SectionHeader headerText="Current Age By Gender" />
3738
<AgeByGender
3839
data={ageByGenderData}
3940
delay={getDelay(0)}
4041
height={this.props.height}
4142
width={colWidth}
43+
/> */}
44+
<SectionHeader headerText="Gender" />
45+
<Gender
46+
counts={genderData}
47+
delay={getDelay(0)}
48+
height={this.props.height}
49+
width={colWidth}
4250
/>
4351
</Col>
4452
<Col lg={6} md={12} className="visualization-ataglance-container">

‎src/ui-client/src/components/Visualize/Gender.tsx

Lines changed: 145 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,145 @@
1+
/* Copyright (c) 2022, UW Medicine Research IT, University of Washington
2+
* Developed by Nic Dobbins and Cliff Spital, CRIO Sean Mooney
3+
* This Source Code Form is subject to the terms of the Mozilla Public
4+
* License, v. 2.0. If a copy of the MPL was not distributed with this
5+
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
6+
*/
7+
8+
import React from "react";
9+
import {
10+
Bar,
11+
BarChart,
12+
ResponsiveContainer,
13+
XAxis,
14+
YAxis,
15+
LabelList,
16+
Cell,
17+
} from "recharts";
18+
import { visualizationConfig } from "../../config/visualization";
19+
import { PatientCountMap } from "../../models/cohort/DemographicDTO";
20+
21+
interface Props {
22+
counts: PatientCountMap;
23+
delay: number;
24+
height: number;
25+
width: number;
26+
}
27+
28+
interface State {
29+
showAll: boolean;
30+
useDelay: boolean;
31+
}
32+
33+
export class Gender extends React.PureComponent<Props, State> {
34+
private className = "visualization-gender";
35+
private maxWidth = 800;
36+
private defaultDataLength = 20;
37+
38+
public constructor(props: Props) {
39+
super(props);
40+
this.state = {
41+
showAll: false,
42+
useDelay: true,
43+
};
44+
}
45+
46+
public render() {
47+
const config = visualizationConfig.demographics.gender;
48+
const { height, width, counts, delay } = this.props;
49+
const { showAll, useDelay } = this.state;
50+
const c = this.className;
51+
const del = useDelay ? delay : 0;
52+
const w = width > this.maxWidth ? this.maxWidth : width;
53+
let data = Object.entries(counts)
54+
.map(([key, value]) => ({ key, value }))
55+
.sort((a, b) => (a.value > b.value ? 0 : 1));
56+
const len = data.length;
57+
58+
if (!showAll) {
59+
data = data.slice(0, this.defaultDataLength);
60+
}
61+
62+
console.log("data ", data);
63+
return (
64+
<div className={`${c}-column`} style={{ height, width: w }}>
65+
{/* Show all toggle */}
66+
{len > this.defaultDataLength && (
67+
<div className="visualization-showall-toggle">
68+
<span
69+
className={`visualization-showall false ${
70+
showAll ? "" : "selected"
71+
}`}
72+
onClick={this.handleShowAllToggleClick.bind(null, false)}
73+
>{`Show top ${this.defaultDataLength} only`}</span>
74+
<span
75+
className={`visualization-showall true ${
76+
showAll ? "selected" : ""
77+
}`}
78+
onClick={this.handleShowAllToggleClick.bind(null, true)}
79+
>{`Show all ${len}`}</span>
80+
</div>
81+
)}
82+
83+
{/* Chart */}
84+
<div style={{ height }}>
85+
<ResponsiveContainer>
86+
<BarChart
87+
data={data}
88+
margin={{ top: 30, right: 30, left: 10, bottom: 5 }}
89+
layout="vertical"
90+
>
91+
<XAxis type="number" allowDecimals={false} />
92+
<YAxis dataKey="key" type="category" interval={0} width={150} />
93+
<Bar
94+
animationBegin={del}
95+
barSize={config.barSize}
96+
dataKey="value"
97+
isAnimationActive={true}
98+
>
99+
{data.map((d, i) => (
100+
<Cell key={d.key} fill={this.color(i, config.colors)} />
101+
))}
102+
<LabelList
103+
dataKey="value"
104+
formatter={this.formatNumber}
105+
position="right"
106+
/>
107+
<LabelList
108+
dataKey="key"
109+
formatter={this.formatKey}
110+
position="left"
111+
/>
112+
</Bar>
113+
</BarChart>
114+
</ResponsiveContainer>
115+
</div>
116+
</div>
117+
);
118+
}
119+
120+
private formatNumber = (val: any) => val.toLocaleString();
121+
private formatKey = (val: string) => {
122+
const displayValue = {
123+
cisman: "cis-man",
124+
ciswoman: "cis-woman",
125+
transwoman: "trans-woman",
126+
transman: "trans-man",
127+
fab: "nonbinary/other FAB",
128+
mab: "nonbinary/other MAB",
129+
}[val];
130+
if (displayValue) return displayValue;
131+
return "other";
132+
};
133+
134+
private color = (i: number, colors: string[]): string => {
135+
const last = colors.length - 1;
136+
if (i <= last) {
137+
return colors[i];
138+
}
139+
return colors[i - Math.floor(i / last) * last - 1];
140+
};
141+
142+
private handleShowAllToggleClick = (showAll: boolean) => {
143+
this.setState({ showAll, useDelay: false });
144+
};
145+
}

‎src/ui-client/src/config/visualization.ts

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,12 @@ export const visualizationConfig = {
3636
colors: [ "rgb(31, 119, 180)", "rgb(174, 199, 232)", "rgb(255, 127, 14)", "rgb(255, 187, 120)", "rgb(44, 160, 44)", "rgb(152, 223, 138)", "rgb(214, 39, 40)", "rgb(255, 152, 150)",
3737
"rgb(148, 103, 189)", "rgb(197, 176, 213)", "rgb(140, 86, 75)", "rgb(196, 156, 148)", "rgb(227, 119, 194)", "rgb(247, 182, 210)", "rgb(127, 127, 127)", "rgb(199, 199, 199)",
3838
"rgb(188, 189, 34)", "rgb(219, 219, 141)", "rgb(23, 190, 207)", "rgb(158, 218, 229)"]
39-
}
39+
},
40+
gender: {
41+
barSize: 28,
42+
colors: [ "rgb(31, 119, 180)", "rgb(174, 199, 232)", "rgb(255, 127, 14)", "rgb(255, 187, 120)", "rgb(44, 160, 44)", "rgb(152, 223, 138)", "rgb(214, 39, 40)", "rgb(255, 152, 150)",
43+
"rgb(148, 103, 189)", "rgb(197, 176, 213)", "rgb(140, 86, 75)", "rgb(196, 156, 148)", "rgb(227, 119, 194)", "rgb(247, 182, 210)", "rgb(127, 127, 127)", "rgb(199, 199, 199)",
44+
"rgb(188, 189, 34)", "rgb(219, 219, 141)", "rgb(23, 190, 207)", "rgb(158, 218, 229)"]
45+
},
4046
}
4147
}

‎src/ui-client/src/models/cohort/DemographicDTO.ts

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -60,12 +60,6 @@ export interface AgeByGenderBucket {
6060
[key: string]: number;
6161
females: number;
6262
males: number;
63-
ciswoman: number;
64-
cisman: number;
65-
transman: number;
66-
transwoman: number;
67-
mab: number;
68-
fab: number;
6963
others: number;
7064
}
7165

‎src/ui-client/src/reducers/cohort/visualize.ts

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -14,17 +14,17 @@ export const defaultVisualizationState = (): VisualizationState => {
1414
demographics: {
1515
ageByGenderData: {
1616
buckets: {
17-
'1-9': { females: 0, males: 0, others: 0, cisman: 0, ciswoman: 0, transman: 0, transwoman: 0, fab: 0, mab: 0},
18-
'10-17': { females: 0, males: 0, others: 0, cisman: 0, ciswoman: 0, transman: 0, transwoman: 0, fab: 0, mab: 0},
19-
'18-24': { females: 0, males: 0, others: 0, cisman: 0, ciswoman: 0, transman: 0, transwoman: 0, fab: 0, mab: 0 },
20-
'25-34': { females: 0, males: 0, others: 0, cisman: 0, ciswoman: 0, transman: 0, transwoman: 0, fab: 0, mab: 0 },
21-
'35-44': { females: 0, males: 0, others: 0, cisman: 0, ciswoman: 0, transman: 0, transwoman: 0, fab: 0, mab: 0},
22-
'45-54': { females: 0, males: 0, others: 0, cisman: 0, ciswoman: 0, transman: 0, transwoman: 0, fab: 0, mab: 0 },
23-
'55-64': { females: 0, males: 0, others: 0, cisman: 0, ciswoman: 0, transman: 0, transwoman: 0, fab: 0, mab: 0 },
24-
'65-74': { females: 0, males: 0, others: 0, cisman: 0, ciswoman: 0, transman: 0, transwoman: 0, fab: 0, mab: 0},
25-
'75-84': { females: 0, males: 0, others: 0, cisman: 0, ciswoman: 0, transman: 0, transwoman: 0, fab: 0, mab: 0},
26-
'<1': { females: 0, males: 0, others: 0, cisman: 0, ciswoman: 0, transman: 0, transwoman: 0, fab: 0, mab: 0},
27-
'>84': { females: 0, males: 0, others: 0, cisman: 0, ciswoman: 0, transman: 0, transwoman: 0, fab: 0, mab: 0 }
17+
'1-9': { females: 0, males: 0, others: 0 },
18+
'10-17': { females: 0, males: 0, others: 0 },
19+
'18-24': { females: 0, males: 0, others: 0 },
20+
'25-34': { females: 0, males: 0, others: 0 },
21+
'35-44': { females: 0, males: 0, others: 0 },
22+
'45-54': { females: 0, males: 0, others: 0 },
23+
'55-64': { females: 0, males: 0, others: 0 },
24+
'65-74': { females: 0, males: 0, others: 0 },
25+
'75-84': { females: 0, males: 0, others: 0 },
26+
'<1': { females: 0, males: 0, others: 0 },
27+
'>84': { females: 0, males: 0, others: 0 }
2828
}
2929
},
3030
binarySplitData: [],

0 commit comments

Comments
 (0)