export default function ChangeTree()

in packages/@aws-c2a/web-app/src/AggregationsView/ChangeTree/index.tsx [30:80]
49 lines of code
4 McCabe index (conditional complexity)

export default function ChangeTree(): JSX.Element {
  const classes = useStyles();
  const [expanded, setExpanded] = useState(0);

  const { changeReport } = useContext(AppContext);

  const aggsPerRisk = groupArrayBy(changeReport.aggregations, (agg) => agg.characteristics.RISK);
  return (
    <Paper elevation={3} className={classes.root} id="aggs-tree-container">
      <CollapsableRow
        icon={<ErrorIcon/>}
        expanded={expanded === 0}
        stretchOnExpand
        onChange={(e, expand) => expand ? setExpanded(0) : setExpanded(-1)}
        title="High Risk Changes"
        content={
          <List disablePadding style={{width: '100%'}}>{
            renderAggs((aggsPerRisk.get(RuleRisk.High) ?? [{}])[0].subAggs ?? [])
          }</List>
        }
        color="#EA9B9A"
      />
      <CollapsableRow
        icon={<WarningIcon/>}
        expanded={expanded === 1}
        stretchOnExpand
        onChange={(e, expand) => expand ? setExpanded(1) : setExpanded(-1)}
        title="Unclassified Risk Changes"
        content={
          <List disablePadding style={{width: '100%'}}>{
            renderAggs((aggsPerRisk.get(RuleRisk.Unknown) ?? [{}])[0].subAggs ?? [])
          }</List>
        }
        color="#F5E48E"
      />
      <CollapsableRow
        icon={<InfoIcon/>}
        expanded={expanded === 2}
        stretchOnExpand
        onChange={(e, expand) => expand ? setExpanded(2) : setExpanded(-1)}
        title="Low Risk Changes"
        content={
          <List disablePadding style={{width: '100%'}}>{
            renderAggs((aggsPerRisk.get(RuleRisk.Low) ?? [{}])[0].subAggs ?? [])
          }</List>
        }
        color="#C1DEEC"
      />
    </Paper>
  );
}