20442946860

Committed 22 Dec 2025 08:17PM UTC coverage: 0.168% (-0.007%) from 0.175%

Build # 20442946860

Build Type

push

github

Committed by

web-flow

Commit Message

Merge pull request #444 from CBIIT/C3DC-1936

C3DC-1936 Facet Kickout, Styling Update, Unknown Ages

Coverage Stats

6 of 3645 branches covered (0.16%)

Branch coverage included in aggregate %.

0 of 252 new or added lines in 12 files covered. (0.0%)

18 existing lines in 8 files now uncovered.

10 of 5864 relevant lines covered (0.17%)

0.09 hits per line

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

0.0

/src/pages/inventory/filterQueryBar/QueryBarView.js

import React from 'react';
import { connect, useDispatch } from 'react-redux';
import { 
  useLocation,
  //useNavigate
}  from "react-router-dom";
import { clearAllFilters, clearFacetSection, clearSliderSection, toggleCheckBox } from '@bento-core/facet-filter';
import { resetAllData, resetUploadData, updateAutocompleteData } from '@bento-core/local-find';
// import { updateImportfrom } from '../../../components/Inventory/InventoryState';
import store from '../../../store';
import { QueryBarGenerator } from '@bento-core/query-bar';
// import { generateQueryStr } from '@bento-core/util';
import { 
  facetsConfig, 
  queryParams, 
  //excludedParams, 
  ageRelatedParams 
} from '../../../bento/dashTemplate';
import { customStyles } from './QueryBarStyles';
import { Container, createTheme, ThemeProvider } from '@material-ui/core';
import theme from './QueryBarTheme';
import { generateUrl } from './QueryBarUtils';

/**
 * Generate the Explore Tab Query Bar
 *
 * @param {object} props
 * @param {object} props.data API search resultset
 * @param {object} props.statusReducer Facet Filter State
 * @param {object} props.localFind Local Find State
 * @param {object} props.unknownAgesState Unknown Ages State
 * @param {boolean} props.hasImportFrom Has Import From Data
 * @returns {JSX.Element}
 */
const QueryBarView = ({ data, statusReducer, localFind, unknownAgesState, hasImportFrom }) => {
  const dispatch = useDispatch();
  const query = new URLSearchParams(useLocation().search);
  // const navigate = useNavigate();

  const sectionOrder = facetsConfig.map((v) => v.datafield);

  // Create mapped filter state from regular facets
  const mappedFilterState = Object.keys(statusReducer || {}).map((facet) => {
    const config = facetsConfig.find((config) => config.datafield === facet);
    if (!config) {
      console.warn(`No configuration found for facet: ${facet}`);
      return null;
    }
    return {
      ...config,
      items: statusReducer[facet],
      data: data[config.apiForFiltering],
    };
  }).filter(Boolean);

  // Add unknownAges parameters to existing entries or create new ones
  // Check both Redux state and URL parameters for unknownAges
  ageRelatedParams.forEach(param => {
    let unknownAges = 'include'; // default value

    // First check Redux state
    if (unknownAgesState && unknownAgesState[param]) {
      unknownAges = unknownAgesState[param];
    }
    // If not in Redux state, check URL parameters for page load
    else {
      const unknownAgesParam = `${param}_unknownAges`;
      const urlUnknownAges = query.get(unknownAgesParam);
      if (urlUnknownAges) {
        unknownAges = urlUnknownAges;
      }
    }

    if (unknownAges && unknownAges !== 'include') {
      // Check if there's already an entry for this parameter (with range)
      const existingEntryIndex = mappedFilterState.findIndex(entry => entry.datafield === param);

      if (existingEntryIndex !== -1) {
        // Add unknownAges to existing entry
        mappedFilterState[existingEntryIndex].unknownAges = unknownAges;
      } else {
        // Create a new entry only if there's no range selected
        const config = facetsConfig.find((config) => config.datafield === param);
        if (config) {
          const unknownAgesItem = {
            ...config,
            datafield: `${param}_unknownAges`,
            label: config.label, // Use original label, let SliderFilter handle unknownAges formatting
            items: [unknownAges],
            data: data[config.apiForFiltering],
            isUnknownAges: true,
            parentDatafield: param,
            unknownAges: unknownAges,
          };
          mappedFilterState.push(unknownAgesItem);
        }
      }
    }
  });

  mappedFilterState.sort((a, b) => sectionOrder.indexOf(a.datafield) - sectionOrder.indexOf(b.datafield));

  const { QueryBar } = QueryBarGenerator({
    config: {
      maxItems: 2,
      displayAllActiveFilters: true,
      count: 'count',
      caseIDLabel: 'Participant IDs',
      rootPath: `${window.location.href}/`,
      viewQueryURL: true,
      queryUrlCharacterLimit: 70,
    },
    functions: {
      clearAll: () => {
        /*
        const paramValue = queryParams
          .filter((param) => !excludedParams.includes(param))
          .reduce((acc, param) => {
            acc[param] = '';
            return acc;
          }, {});
        // const queryStr = generateQueryStr(query, queryParams, paramValue);
        // navigate(`/explore${queryStr}`, { replace: true });*/
        dispatch(resetAllData());
        dispatch(clearAllFilters());

        // Reset unknownAges state to default values
        ageRelatedParams.forEach(param => {
          store.dispatch({
            type: 'UNKNOWN_AGES_CHANGED',
            payload: {
              datafield: param,
              unknownAges: 'include',
            },
          });
        });
      },
      clearImportFrom: () => {
        /*
        const paramValue = {
          'import_from': '',
        };
        // const queryStr = generateQueryStr(query, queryParams, paramValue);
        // navigate(`/explore${queryStr}`, { replace: true });
        dispatch(updateImportfrom(null, []));
      },
      clearUpload: () => {
        /*
        const paramValue = {
          'u': '',
          'u_fc': '',
          'u_um': '',
        };
        // const queryStr = generateQueryStr(query, queryParams, paramValue);
        // navigate(`/explore${queryStr}`, { replace: true });*/
        dispatch(resetUploadData());
      },
      clearAutocomplete: () => {
        /*
        const paramValue = {
          'p_id': ''
        };
        // const queryStr = generateQueryStr(query, queryParams, paramValue);
        // navigate(`/explore${queryStr}`, { replace: true });*/
        dispatch(updateAutocompleteData([]));
      },
      deleteAutocompleteItem: (title) => {
        const { autocomplete } = localFind;
        const newdata = [...autocomplete];
        const index = newdata.findIndex((v) => v.title === title);

        if (index > -1) {
          newdata.splice(index, 1);
          /*
          const paramValue = {
            'p_id': newdata.map((dt) => dt.title).join('|')
          };
          // const queryStr = generateQueryStr(query, queryParams, paramValue);
          // navigate(`/explore${queryStr}`, { replace: true });*/
          dispatch(updateAutocompleteData(newdata));
        }
      },
      resetFacetSection: (section) => {
        const field = section.datafield;
        let paramValue = {};
        paramValue[field] = '';
        // const queryStr = generateQueryStr(query, queryParams, paramValue);
        // navigate(`/explore${queryStr}`, { replace: true });
        dispatch(clearFacetSection(section));
      },
      resetFacetSlider: (section) => {
        const field = section.datafield;
        let paramValue = {};

        // Check if this is an unknownAges entry
        if (section.isUnknownAges) {
          // For unknownAges entries, clear the unknownAges parameter
          const unknownAgesField = `${section.parentDatafield}_unknownAges`;
          paramValue[unknownAgesField] = '';

          // const queryStr = generateQueryStr(query, queryParams, paramValue);
          // navigate(`/explore${queryStr}`, { replace: true });

          // Reset the unknownAges parameter in Redux state
          store.dispatch({
            type: 'UNKNOWN_AGES_CHANGED',
            payload: {
              datafield: section.parentDatafield,
              unknownAges: 'include',
            },
          });
        } else {
          // For regular slider entries, clear the slider range
          paramValue[field] = '';

          // Also clear the corresponding unknownAges parameter if it exists
          const unknownAgesField = `${field}_unknownAges`;
          if (queryParams.includes(unknownAgesField)) {
            paramValue[unknownAgesField] = '';
          }

          // const queryStr = generateQueryStr(query, queryParams, paramValue);
          // navigate(`/explore${queryStr}`, { replace: true });
          dispatch(clearSliderSection(section));

          // Reset the corresponding unknownAges parameter in Redux state
          if (queryParams.includes(unknownAgesField)) {
            store.dispatch({
              type: 'UNKNOWN_AGES_CHANGED',
              payload: {
                datafield: field,
                unknownAges: 'include',
              },
            });
          }
        }
      },
      resetUnknownAges: (section) => {
        const field = section.parentDatafield || section.datafield.replace('_unknownAges', '');
        const unknownAgesField = `${field}_unknownAges`;
        let paramValue = {};
        paramValue[unknownAgesField] = '';

        // const queryStr = generateQueryStr(query, queryParams, paramValue);
        // navigate(`/explore${queryStr}`, { replace: true });

        // Reset the corresponding unknownAges parameter in Redux state
        store.dispatch({
          type: 'UNKNOWN_AGES_CHANGED',
          payload: {
            datafield: field,
            unknownAges: 'include',
          },
        });
      },
      resetFacetCheckbox: (section, checkbox) => {
        const field = section.datafield;
        const items = section.items;
        const idx = items.indexOf(checkbox);
        if (idx > -1) {
          items.splice(idx, 1);
        }
        let paramValue = {};
        paramValue[field] = items.length > 0 ? items.join('|') : '';
        // const queryStr = generateQueryStr(query, queryParams, paramValue);
        // navigate(`/explore${queryStr}`, { replace: true });
        dispatch(toggleCheckBox({
          datafield: section.datafield,
          isChecked: false,
          name: checkbox
        }));
      },
      generateUrl,
    },
    customStyles,
  });

  return (
    <ThemeProvider theme={createTheme(theme)}>
      <Container
        maxWidth="xl"
        className="c3dc_query_bar"
      >
        <QueryBar
          hasImportFrom={hasImportFrom}
          statusReducer={mappedFilterState}
          localFind={localFind}
        />
      </Container>
    </ThemeProvider>
  );
};

const mapStateToProps = (state) => ({
  hasImportFrom: state.inventoryReducer && state.inventoryReducer.importFromData && state.inventoryReducer.importFromData.length > 0,
  statusReducer: state.statusReducer.filterState,
  localFind: state.localFind,
  unknownAgesState: state.statusReducer.unknownAgesState,
});

export default connect(mapStateToProps, null)(QueryBarView);

1	import React from 'react';	×
2	import { connect, useDispatch } from 'react-redux';	×
NEW 3	import {	×
4	useLocation,
5	//useNavigate
6	} from "react-router-dom";
7	import { clearAllFilters, clearFacetSection, clearSliderSection, toggleCheckBox } from '@bento-core/facet-filter';	×
8	import { resetAllData, resetUploadData, updateAutocompleteData } from '@bento-core/local-find';	×
9	// import { updateImportfrom } from '../../../components/Inventory/InventoryState';
NEW 10	import store from '../../../store';	×
11	import { QueryBarGenerator } from '@bento-core/query-bar';	×
12	// import { generateQueryStr } from '@bento-core/util';
NEW 13	import {	×
14	facetsConfig,
15	queryParams,
16	//excludedParams,
17	ageRelatedParams
18	} from '../../../bento/dashTemplate';
19	import { customStyles } from './QueryBarStyles';	×
20	import { Container, createTheme, ThemeProvider } from '@material-ui/core';	×
21	import theme from './QueryBarTheme';	×
22	import { generateUrl } from './QueryBarUtils';	×
23
24	/**
25	* Generate the Explore Tab Query Bar
26	*
27	* @param {object} props
28	* @param {object} props.data API search resultset
29	* @param {object} props.statusReducer Facet Filter State
30	* @param {object} props.localFind Local Find State
31	* @param {object} props.unknownAgesState Unknown Ages State
32	* @param {boolean} props.hasImportFrom Has Import From Data
33	* @returns {JSX.Element}
34	*/
NEW 35	const QueryBarView = ({ data, statusReducer, localFind, unknownAgesState, hasImportFrom }) => {	×
36	const dispatch = useDispatch();	×
NEW 37	const query = new URLSearchParams(useLocation().search);	×
38	// const navigate = useNavigate();
39
40	const sectionOrder = facetsConfig.map((v) => v.datafield);	×
41
42	// Create mapped filter state from regular facets
43	const mappedFilterState = Object.keys(statusReducer \|\| {}).map((facet) => {	×
44	const config = facetsConfig.find((config) => config.datafield === facet);	×
NEW 45	if (!config) {	×
NEW 46	console.warn(`No configuration found for facet: ${facet}`);	×
NEW 47	return null;	×
48	}
UNCOV 49	return {	×
50	...config,
51	items: statusReducer[facet],
52	data: data[config.apiForFiltering],
53	};
54	}).filter(Boolean);
55
56	// Add unknownAges parameters to existing entries or create new ones
57	// Check both Redux state and URL parameters for unknownAges
NEW 58	ageRelatedParams.forEach(param => {	×
NEW 59	let unknownAges = 'include'; // default value	×
60
61	// First check Redux state
NEW 62	if (unknownAgesState && unknownAgesState[param]) {	×
NEW 63	unknownAges = unknownAgesState[param];	×
64	}
65	// If not in Redux state, check URL parameters for page load
66	else {
NEW 67	const unknownAgesParam = `${param}_unknownAges`;	×
NEW 68	const urlUnknownAges = query.get(unknownAgesParam);	×
NEW 69	if (urlUnknownAges) {	×
NEW 70	unknownAges = urlUnknownAges;	×
71	}
72	}
73
NEW 74	if (unknownAges && unknownAges !== 'include') {	×
75	// Check if there's already an entry for this parameter (with range)
NEW 76	const existingEntryIndex = mappedFilterState.findIndex(entry => entry.datafield === param);	×
77
NEW 78	if (existingEntryIndex !== -1) {	×
79	// Add unknownAges to existing entry
NEW 80	mappedFilterState[existingEntryIndex].unknownAges = unknownAges;	×
81	} else {
82	// Create a new entry only if there's no range selected
NEW 83	const config = facetsConfig.find((config) => config.datafield === param);	×
NEW 84	if (config) {	×
NEW 85	const unknownAgesItem = {	×
86	...config,
87	datafield: `${param}_unknownAges`,
88	label: config.label, // Use original label, let SliderFilter handle unknownAges formatting
89	items: [unknownAges],
90	data: data[config.apiForFiltering],
91	isUnknownAges: true,
92	parentDatafield: param,
93	unknownAges: unknownAges,
94	};
NEW 95	mappedFilterState.push(unknownAgesItem);	×
96	}
97	}
98	}
99	});
100
UNCOV 101	mappedFilterState.sort((a, b) => sectionOrder.indexOf(a.datafield) - sectionOrder.indexOf(b.datafield));	×
102
103	const { QueryBar } = QueryBarGenerator({	×
104	config: {
105	maxItems: 2,
106	displayAllActiveFilters: true,
107	count: 'count',
108	caseIDLabel: 'Participant IDs',
109	rootPath: `${window.location.href}/`,
110	viewQueryURL: true,
111	queryUrlCharacterLimit: 70,
112	},
113	functions: {
114	clearAll: () => {
115	/*
116	const paramValue = queryParams
117	.filter((param) => !excludedParams.includes(param))
118	.reduce((acc, param) => {
119	acc[param] = '';
120	return acc;
121	}, {});
122	// const queryStr = generateQueryStr(query, queryParams, paramValue);
123	// navigate(`/explore${queryStr}`, { replace: true });*/
124	dispatch(resetAllData());	×
125	dispatch(clearAllFilters());	×
126
127	// Reset unknownAges state to default values
NEW 128	ageRelatedParams.forEach(param => {	×
NEW 129	store.dispatch({	×
130	type: 'UNKNOWN_AGES_CHANGED',
131	payload: {
132	datafield: param,
133	unknownAges: 'include',
134	},
135	});
136	});
137	},
138	clearImportFrom: () => {
139	/*
140	const paramValue = {
141	'import_from': '',
142	};
143	// const queryStr = generateQueryStr(query, queryParams, paramValue);
144	// navigate(`/explore${queryStr}`, { replace: true });
145	dispatch(updateImportfrom(null, []));
146	},
147	clearUpload: () => {
148	/*
149	const paramValue = {
150	'u': '',
151	'u_fc': '',
152	'u_um': '',
153	};
154	// const queryStr = generateQueryStr(query, queryParams, paramValue);
155	// navigate(`/explore${queryStr}`, { replace: true });*/
UNCOV 156	dispatch(resetUploadData());	×
157	},
158	clearAutocomplete: () => {
159	/*
160	const paramValue = {
161	'p_id': ''
162	};
163	// const queryStr = generateQueryStr(query, queryParams, paramValue);
164	// navigate(`/explore${queryStr}`, { replace: true });*/
UNCOV 165	dispatch(updateAutocompleteData([]));	×
166	},
167	deleteAutocompleteItem: (title) => {
168	const { autocomplete } = localFind;	×
169	const newdata = [...autocomplete];	×
170	const index = newdata.findIndex((v) => v.title === title);	×
171
172	if (index > -1) {	×
173	newdata.splice(index, 1);	×
174	/*
175	const paramValue = {
176	'p_id': newdata.map((dt) => dt.title).join('\|')
177	};
178	// const queryStr = generateQueryStr(query, queryParams, paramValue);
179	// navigate(`/explore${queryStr}`, { replace: true });*/
UNCOV 180	dispatch(updateAutocompleteData(newdata));	×
181	}
182	},
183	resetFacetSection: (section) => {
NEW 184	const field = section.datafield;	×
NEW 185	let paramValue = {};	×
NEW 186	paramValue[field] = '';	×
187	// const queryStr = generateQueryStr(query, queryParams, paramValue);
188	// navigate(`/explore${queryStr}`, { replace: true });
UNCOV 189	dispatch(clearFacetSection(section));	×
190	},
191	resetFacetSlider: (section) => {
NEW 192	const field = section.datafield;	×
NEW 193	let paramValue = {};	×
194
195	// Check if this is an unknownAges entry
NEW 196	if (section.isUnknownAges) {	×
197	// For unknownAges entries, clear the unknownAges parameter
NEW 198	const unknownAgesField = `${section.parentDatafield}_unknownAges`;	×
NEW 199	paramValue[unknownAgesField] = '';	×
200
201	// const queryStr = generateQueryStr(query, queryParams, paramValue);
202	// navigate(`/explore${queryStr}`, { replace: true });
203
204	// Reset the unknownAges parameter in Redux state
NEW 205	store.dispatch({	×
206	type: 'UNKNOWN_AGES_CHANGED',
207	payload: {
208	datafield: section.parentDatafield,
209	unknownAges: 'include',
210	},
211	});
212	} else {
213	// For regular slider entries, clear the slider range
NEW 214	paramValue[field] = '';	×
215
216	// Also clear the corresponding unknownAges parameter if it exists
NEW 217	const unknownAgesField = `${field}_unknownAges`;	×
NEW 218	if (queryParams.includes(unknownAgesField)) {	×
NEW 219	paramValue[unknownAgesField] = '';	×
220	}
221
222	// const queryStr = generateQueryStr(query, queryParams, paramValue);
223	// navigate(`/explore${queryStr}`, { replace: true });
NEW 224	dispatch(clearSliderSection(section));	×
225
226	// Reset the corresponding unknownAges parameter in Redux state
NEW 227	if (queryParams.includes(unknownAgesField)) {	×
NEW 228	store.dispatch({	×
229	type: 'UNKNOWN_AGES_CHANGED',
230	payload: {
231	datafield: field,
232	unknownAges: 'include',
233	},
234	});
235	}
236	}
237	},
238	resetUnknownAges: (section) => {
NEW 239	const field = section.parentDatafield \|\| section.datafield.replace('_unknownAges', '');	×
NEW 240	const unknownAgesField = `${field}_unknownAges`;	×
NEW 241	let paramValue = {};	×
NEW 242	paramValue[unknownAgesField] = '';	×
243
244	// const queryStr = generateQueryStr(query, queryParams, paramValue);
245	// navigate(`/explore${queryStr}`, { replace: true });
246
247	// Reset the corresponding unknownAges parameter in Redux state
NEW 248	store.dispatch({	×
249	type: 'UNKNOWN_AGES_CHANGED',
250	payload: {
251	datafield: field,
252	unknownAges: 'include',
253	},
254	});
255	},
256	resetFacetCheckbox: (section, checkbox) => {
NEW 257	const field = section.datafield;	×
NEW 258	const items = section.items;	×
NEW 259	const idx = items.indexOf(checkbox);	×
NEW 260	if (idx > -1) {	×
NEW 261	items.splice(idx, 1);	×
262	}
NEW 263	let paramValue = {};	×
NEW 264	paramValue[field] = items.length > 0 ? items.join('\|') : '';	×
265	// const queryStr = generateQueryStr(query, queryParams, paramValue);
266	// navigate(`/explore${queryStr}`, { replace: true });
UNCOV 267	dispatch(toggleCheckBox({	×
268	datafield: section.datafield,
269	isChecked: false,
270	name: checkbox
271	}));
272	},
273	generateUrl,
274	},
275	customStyles,
276	});
277
278	return (	×
279	<ThemeProvider theme={createTheme(theme)}>
280	<Container
281	maxWidth="xl"
282	className="c3dc_query_bar"
283	>
284	<QueryBar
285	hasImportFrom={hasImportFrom}
286	statusReducer={mappedFilterState}
287	localFind={localFind}
288	/>
289	</Container>
290	</ThemeProvider>
291	);
292	};
293
294	const mapStateToProps = (state) => ({	×
295	hasImportFrom: state.inventoryReducer && state.inventoryReducer.importFromData && state.inventoryReducer.importFromData.length > 0,	×
296	statusReducer: state.statusReducer.filterState,
297	localFind: state.localFind,
298	unknownAgesState: state.statusReducer.unknownAgesState,
UNCOV 299	});	×
300
301	export default connect(mapStateToProps, null)(QueryBarView);

CBIIT / bento-c3dc-frontend / 20442946860

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