24211815732

Committed 09 Apr 2026 08:29PM UTC coverage: 0.115% (-0.04%) from 0.153%

Build # 24211815732

Build Type

Pull #504

github

Committed by

web-flow

Commit Message

Merge 0d7e2c537 into 850690c82

Pull Request Pull Request #504: C3DC 2146

Coverage Stats

6 of 5909 branches covered (0.1%)

Branch coverage included in aggregate %.

0 of 2221 new or added lines in 69 files covered. (0.0%)

31 existing lines in 7 files now uncovered.

10 of 7992 relevant lines covered (0.13%)

0.06 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

0.0

/src/pages/CohortAnalyzer/components/AddChartInlinePanel.js

import React, { useMemo } from 'react';
import { makeStyles } from '@material-ui/core';
import { ADD_CHART_DATA_TYPES, isAddChartDataTypeOnStrip } from '../config/cohortAnalyzerChartCatalog';
import { ChartTypeIcon, CHART_TYPE_OPTIONS } from '../HistogramPanel/chart/HistogramChartTypeIcons';

const useStyles = makeStyles(() => ({
  root: {
    flex: 1,
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'stretch',
    minHeight: 0,
    width: '100%',
  },
  header: {
    fontFamily: 'Poppins, sans-serif',
    fontSize: 14,
    fontWeight: 500,
    color: '#5C5C5C',
    margin: '0 0 8px',
  },
  divider: {
    height: 1,
    background: '#ADADAD',
    margin: '0 0 10px',
  },
  list: {
    listStyle: 'none',
    margin: 0,
    padding: 0,
    flex: 1,
    minHeight: 0,
    overflowY: 'auto',
  },
  listItem: {
    display: 'flex',
    alignItems: 'center',
    gap: 10,
    padding: '8px 4px',
    fontFamily: 'Poppins, sans-serif',
    fontSize: 13,
    color: '#1C2B33',
    cursor: 'pointer',
    borderBottom: '1px solid #EFEFEF',
    '&:last-child': {
      borderBottom: 'none',
    },
  },
  listItemDisabled: {
    cursor: 'not-allowed',
    color: '#9E9E9E',
    opacity: 0.5,
    filter: 'grayscale(1)',
    pointerEvents: 'none',
  },
  radioOuter: {
    width: 16,
    height: 16,
    borderRadius: '50%',
    border: '2px solid #ADADAD',
    flexShrink: 0,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
  },
  radioOuterSelected: {
    borderColor: '#18677A',
  },
  radioInner: {
    width: 8,
    height: 8,
    borderRadius: '50%',
    background: '#18677A',
  },
  hint: {
    fontFamily: 'Poppins, sans-serif',
    fontSize: 11,
    color: '#5C5C5C',
    margin: '0 0 10px',
  },
  step2Body: {
    flex: 1,
    display: 'flex',
    flexDirection: 'column',
    minHeight: 0,
    marginTop: 4,
  },
  chartGrid: {
    display: 'grid',
    gridTemplateColumns: '1fr 1fr',
    gap: 10,
    flex: 1,
    alignContent: 'start',
  },
  chartCard: {
    borderRadius: 6,
    border: '2px solid #18677A',
    background: '#E2F1F5',
    padding: '10px 8px',
    cursor: 'pointer',
    textAlign: 'center',
    fontFamily: 'Poppins, sans-serif',
    fontSize: 11,
    color: '#1C2B33',
    transition: 'box-shadow 0.15s ease',
    '&:hover': {
      boxShadow: '0 4px 12px rgba(24, 103, 122, 0.2)',
    },
  },
  chartLabel: {
    marginTop: 6,
    lineHeight: 1.3,
  },
}));

/**
 * In-strip add chart: step 1 pick data (click advances); step 2 pick chart (click adds).
 */
const AddChartInlinePanel = ({
  step,
  setStep,
  selectedCatalogId,
  setSelectedCatalogId,
  onCompleteWithChartType,
  existingStripKeys = [],
  selectedDatasets = [],
}) => {
  const classes = useStyles();

  const selectedEntry = useMemo(
    () => ADD_CHART_DATA_TYPES.find((e) => e.id === selectedCatalogId),
    [selectedCatalogId],
  );

  const handlePickDataType = (entry) => {
    if (!entry.available || !entry.datasetKey) return;
    if (isAddChartDataTypeOnStrip(entry, existingStripKeys, selectedDatasets)) return;
    if (entry.skipChartTypeStep) {
      onCompleteWithChartType(null, entry.id);
      return;
    }
    setSelectedCatalogId(entry.id);
    setStep(2);
  };

  return (
    <div className={classes.root}>
      <p className={classes.header}>
        {step === 1 ? 'Choose one:' : 'Choose chart type:'}
      </p>
      <div className={classes.divider} />

      {step === 1 && (
        <ul className={classes.list} role="listbox" aria-label="Chart data types">
          {ADD_CHART_DATA_TYPES.map((entry) => {
            const onStrip = isAddChartDataTypeOnStrip(entry, existingStripKeys, selectedDatasets);
            const disabled = !entry.available || !entry.datasetKey || onStrip;
            const selected = selectedCatalogId === entry.id;
            const disabledHint = (() => {
              if (!disabled) return null;
              if (
                entry.datasetKey === 'survivalAnalysis'
                && Array.isArray(selectedDatasets)
                && selectedDatasets.includes('survivalAnalysis')
              ) {
                return 'Already showing';
              }
              if (onStrip) return 'Already on chart';
              return 'Coming soon';
            })();
            return (
              <li
                key={entry.id}
                role="option"
                aria-selected={selected}
                aria-disabled={disabled}
                className={`${classes.listItem} ${disabled ? classes.listItemDisabled : ''}`}
                onClick={() => !disabled && handlePickDataType(entry)}
                onKeyDown={(ev) => {
                  if (disabled) return;
                  if (ev.key === 'Enter' || ev.key === ' ') {
                    ev.preventDefault();
                    handlePickDataType(entry);
                  }
                }}
                tabIndex={disabled ? -1 : 0}
              >
                <span
                  className={`${classes.radioOuter} ${selected ? classes.radioOuterSelected : ''}`}
                  aria-hidden
                >
                  {selected ? <span className={classes.radioInner} /> : null}
                </span>
                <span>{entry.label}</span>
                {disabledHint ? (
                  <span style={{ marginLeft: 'auto', fontSize: 10, color: '#9E9E9E' }}>
                    {disabledHint}
                  </span>
                ) : null}
              </li>
            );
          })}
        </ul>
      )}

      {step === 2 && (
        <div className={classes.step2Body}>
          <p className={classes.hint}>{selectedEntry ? selectedEntry.label : null}</p>
          <div className={classes.chartGrid} role="listbox" aria-label="Chart visualizations">
            {CHART_TYPE_OPTIONS.map(({ type, label }) => (
              <div
                key={type}
                role="option"
                aria-selected={false}
                tabIndex={0}
                className={classes.chartCard}
                onClick={() => {
                  if (selectedEntry && selectedEntry.datasetKey) {
                    onCompleteWithChartType(type);
                  }
                }}
                onKeyDown={(ev) => {
                  if (ev.key === 'Enter' || ev.key === ' ') {
                    ev.preventDefault();
                    if (selectedEntry && selectedEntry.datasetKey) {
                      onCompleteWithChartType(type);
                    }
                  }
                }}
              >
                <ChartTypeIcon type={type} size={40} />
                <div className={classes.chartLabel}>{label}</div>
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  );
};

export default AddChartInlinePanel;

NEW 1	import React, { useMemo } from 'react';	×
NEW 2	import { makeStyles } from '@material-ui/core';	×
NEW 3	import { ADD_CHART_DATA_TYPES, isAddChartDataTypeOnStrip } from '../config/cohortAnalyzerChartCatalog';	×
NEW 4	import { ChartTypeIcon, CHART_TYPE_OPTIONS } from '../HistogramPanel/chart/HistogramChartTypeIcons';	×
5
NEW 6	const useStyles = makeStyles(() => ({	×
7	root: {
8	flex: 1,
9	display: 'flex',
10	flexDirection: 'column',
11	alignItems: 'stretch',
12	minHeight: 0,
13	width: '100%',
14	},
15	header: {
16	fontFamily: 'Poppins, sans-serif',
17	fontSize: 14,
18	fontWeight: 500,
19	color: '#5C5C5C',
20	margin: '0 0 8px',
21	},
22	divider: {
23	height: 1,
24	background: '#ADADAD',
25	margin: '0 0 10px',
26	},
27	list: {
28	listStyle: 'none',
29	margin: 0,
30	padding: 0,
31	flex: 1,
32	minHeight: 0,
33	overflowY: 'auto',
34	},
35	listItem: {
36	display: 'flex',
37	alignItems: 'center',
38	gap: 10,
39	padding: '8px 4px',
40	fontFamily: 'Poppins, sans-serif',
41	fontSize: 13,
42	color: '#1C2B33',
43	cursor: 'pointer',
44	borderBottom: '1px solid #EFEFEF',
45	'&:last-child': {
46	borderBottom: 'none',
47	},
48	},
49	listItemDisabled: {
50	cursor: 'not-allowed',
51	color: '#9E9E9E',
52	opacity: 0.5,
53	filter: 'grayscale(1)',
54	pointerEvents: 'none',
55	},
56	radioOuter: {
57	width: 16,
58	height: 16,
59	borderRadius: '50%',
60	border: '2px solid #ADADAD',
61	flexShrink: 0,
62	display: 'flex',
63	alignItems: 'center',
64	justifyContent: 'center',
65	},
66	radioOuterSelected: {
67	borderColor: '#18677A',
68	},
69	radioInner: {
70	width: 8,
71	height: 8,
72	borderRadius: '50%',
73	background: '#18677A',
74	},
75	hint: {
76	fontFamily: 'Poppins, sans-serif',
77	fontSize: 11,
78	color: '#5C5C5C',
79	margin: '0 0 10px',
80	},
81	step2Body: {
82	flex: 1,
83	display: 'flex',
84	flexDirection: 'column',
85	minHeight: 0,
86	marginTop: 4,
87	},
88	chartGrid: {
89	display: 'grid',
90	gridTemplateColumns: '1fr 1fr',
91	gap: 10,
92	flex: 1,
93	alignContent: 'start',
94	},
95	chartCard: {
96	borderRadius: 6,
97	border: '2px solid #18677A',
98	background: '#E2F1F5',
99	padding: '10px 8px',
100	cursor: 'pointer',
101	textAlign: 'center',
102	fontFamily: 'Poppins, sans-serif',
103	fontSize: 11,
104	color: '#1C2B33',
105	transition: 'box-shadow 0.15s ease',
106	'&:hover': {
107	boxShadow: '0 4px 12px rgba(24, 103, 122, 0.2)',
108	},
109	},
110	chartLabel: {
111	marginTop: 6,
112	lineHeight: 1.3,
113	},
114	}));
115
116	/**
117	* In-strip add chart: step 1 pick data (click advances); step 2 pick chart (click adds).
118	*/
NEW 119	const AddChartInlinePanel = ({	×
120	step,
121	setStep,
122	selectedCatalogId,
123	setSelectedCatalogId,
124	onCompleteWithChartType,
125	existingStripKeys = [],	×
126	selectedDatasets = [],	×
127	}) => {
NEW 128	const classes = useStyles();	×
129
NEW 130	const selectedEntry = useMemo(	×
NEW 131	() => ADD_CHART_DATA_TYPES.find((e) => e.id === selectedCatalogId),	×
132	[selectedCatalogId],
133	);
134
NEW 135	const handlePickDataType = (entry) => {	×
NEW 136	if (!entry.available \|\| !entry.datasetKey) return;	×
NEW 137	if (isAddChartDataTypeOnStrip(entry, existingStripKeys, selectedDatasets)) return;	×
NEW 138	if (entry.skipChartTypeStep) {	×
NEW 139	onCompleteWithChartType(null, entry.id);	×
NEW 140	return;	×
141	}
NEW 142	setSelectedCatalogId(entry.id);	×
NEW 143	setStep(2);	×
144	};
145
NEW 146	return (	×
147	<div className={classes.root}>
148	<p className={classes.header}>
149	{step === 1 ? 'Choose one:' : 'Choose chart type:'}	×
150	</p>
151	<div className={classes.divider} />
152
153	{step === 1 && (	×
154	<ul className={classes.list} role="listbox" aria-label="Chart data types">
155	{ADD_CHART_DATA_TYPES.map((entry) => {
NEW 156	const onStrip = isAddChartDataTypeOnStrip(entry, existingStripKeys, selectedDatasets);	×
NEW 157	const disabled = !entry.available \|\| !entry.datasetKey \|\| onStrip;	×
NEW 158	const selected = selectedCatalogId === entry.id;	×
NEW 159	const disabledHint = (() => {	×
NEW 160	if (!disabled) return null;	×
NEW 161	if (	×
162	entry.datasetKey === 'survivalAnalysis'	×
163	&& Array.isArray(selectedDatasets)
164	&& selectedDatasets.includes('survivalAnalysis')
165	) {
NEW 166	return 'Already showing';	×
167	}
NEW 168	if (onStrip) return 'Already on chart';	×
NEW 169	return 'Coming soon';	×
170	})();
NEW 171	return (	×
172	<li
173	key={entry.id}
174	role="option"
175	aria-selected={selected}
176	aria-disabled={disabled}
177	className={`${classes.listItem} ${disabled ? classes.listItemDisabled : ''}`}	×
NEW 178	onClick={() => !disabled && handlePickDataType(entry)}	×
179	onKeyDown={(ev) => {
NEW 180	if (disabled) return;	×
NEW 181	if (ev.key === 'Enter' \|\| ev.key === ' ') {	×
NEW 182	ev.preventDefault();	×
NEW 183	handlePickDataType(entry);	×
184	}
185	}}
186	tabIndex={disabled ? -1 : 0}	×
187	>
188	<span
189	className={`${classes.radioOuter} ${selected ? classes.radioOuterSelected : ''}`}	×
190	aria-hidden
191	>
192	{selected ? <span className={classes.radioInner} /> : null}	×
193	</span>
194	<span>{entry.label}</span>
195	{disabledHint ? (
196	<span style={{ marginLeft: 'auto', fontSize: 10, color: '#9E9E9E' }}>	×
197	{disabledHint}
198	</span>
199	) : null}
200	</li>
201	);
202	})}
203	</ul>
204	)}
205
206	{step === 2 && (	×
207	<div className={classes.step2Body}>
208	<p className={classes.hint}>{selectedEntry ? selectedEntry.label : null}</p>	×
209	<div className={classes.chartGrid} role="listbox" aria-label="Chart visualizations">
210	{CHART_TYPE_OPTIONS.map(({ type, label }) => (
NEW 211	<div	×
212	key={type}
213	role="option"
214	aria-selected={false}
215	tabIndex={0}
216	className={classes.chartCard}
217	onClick={() => {
NEW 218	if (selectedEntry && selectedEntry.datasetKey) {	×
NEW 219	onCompleteWithChartType(type);	×
220	}
221	}}
222	onKeyDown={(ev) => {
NEW 223	if (ev.key === 'Enter' \|\| ev.key === ' ') {	×
NEW 224	ev.preventDefault();	×
NEW 225	if (selectedEntry && selectedEntry.datasetKey) {	×
NEW 226	onCompleteWithChartType(type);	×
227	}
228	}
229	}}
230	>
231	<ChartTypeIcon type={type} size={40} />
232	<div className={classes.chartLabel}>{label}</div>
233	</div>
234	))}
235	</div>
236	</div>
237	)}
238	</div>
239	);
NEW 240	};	×
241
242	export default AddChartInlinePanel;

CBIIT / bento-c3dc-frontend / 24211815732

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous