22312045319

Committed 09 Feb 2026 03:26PM UTC coverage: 0.167%. First build

Build # 22312045319

Build Type

push

github

Committed by

web-flow

Commit Message

Merge pull request #490 from CBIIT/1.8.0

1.8.0 Release

Run Details

6 of 3680 branches covered (0.16%)

Branch coverage included in aggregate %.

0 of 925 new or added lines in 39 files covered. (0.0%)

10 of 5876 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());
      },
      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));
        }
      },
      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';	×
NEW 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	}
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
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	clearImportFrom: () => {
128	/*
129	const paramValue = {
130	'import_from': '',
131	};
132	// const queryStr = generateQueryStr(query, queryParams, paramValue);
133	// navigate(`/explore${queryStr}`, { replace: true });
134	dispatch(updateImportfrom(null, []));
135	},
136	clearUpload: () => {
137	/*
138	const paramValue = {
139	'u': '',
140	'u_fc': '',
141	'u_um': '',
142	};
143	// const queryStr = generateQueryStr(query, queryParams, paramValue);
144	// navigate(`/explore${queryStr}`, { replace: true });*/
145	dispatch(resetUploadData());	×
146	},
147	clearAutocomplete: () => {
148	/*
149	const paramValue = {
150	'p_id': ''
151	};
152	// const queryStr = generateQueryStr(query, queryParams, paramValue);
153	// navigate(`/explore${queryStr}`, { replace: true });*/
154	dispatch(updateAutocompleteData([]));	×
155	},
156	deleteAutocompleteItem: (title) => {
157	const { autocomplete } = localFind;	×
158	const newdata = [...autocomplete];	×
159	const index = newdata.findIndex((v) => v.title === title);	×
160
161	if (index > -1) {	×
162	newdata.splice(index, 1);	×
163	/*
164	const paramValue = {
165	'p_id': newdata.map((dt) => dt.title).join('\|')
166	};
167	// const queryStr = generateQueryStr(query, queryParams, paramValue);
168	// navigate(`/explore${queryStr}`, { replace: true });*/
169	dispatch(updateAutocompleteData(newdata));	×
170	}
171	},
172	resetFacetSection: (section) => {
NEW 173	const field = section.datafield;	×
NEW 174	let paramValue = {};	×
NEW 175	paramValue[field] = '';	×
176	// const queryStr = generateQueryStr(query, queryParams, paramValue);
177	// navigate(`/explore${queryStr}`, { replace: true });
178	dispatch(clearFacetSection(section));	×
179	},
180	resetFacetSlider: (section) => {
NEW 181	const field = section.datafield;	×
NEW 182	let paramValue = {};	×
183
184	// Check if this is an unknownAges entry
NEW 185	if (section.isUnknownAges) {	×
186	// For unknownAges entries, clear the unknownAges parameter
NEW 187	const unknownAgesField = `${section.parentDatafield}_unknownAges`;	×
NEW 188	paramValue[unknownAgesField] = '';	×
189
190	// const queryStr = generateQueryStr(query, queryParams, paramValue);
191	// navigate(`/explore${queryStr}`, { replace: true });
192
193	// Reset the unknownAges parameter in Redux state
NEW 194	store.dispatch({	×
195	type: 'UNKNOWN_AGES_CHANGED',
196	payload: {
197	datafield: section.parentDatafield,
198	unknownAges: 'include',
199	},
200	});
201	} else {
202	// For regular slider entries, clear the slider range
NEW 203	paramValue[field] = '';	×
204
205	// Also clear the corresponding unknownAges parameter if it exists
NEW 206	const unknownAgesField = `${field}_unknownAges`;	×
NEW 207	if (queryParams.includes(unknownAgesField)) {	×
NEW 208	paramValue[unknownAgesField] = '';	×
209	}
210
211	// const queryStr = generateQueryStr(query, queryParams, paramValue);
212	// navigate(`/explore${queryStr}`, { replace: true });
NEW 213	dispatch(clearSliderSection(section));	×
214	}
215	},
216	resetUnknownAges: (section) => {
NEW 217	const field = section.parentDatafield \|\| section.datafield.replace('_unknownAges', '');	×
NEW 218	const unknownAgesField = `${field}_unknownAges`;	×
NEW 219	let paramValue = {};	×
NEW 220	paramValue[unknownAgesField] = '';	×
221
222	// const queryStr = generateQueryStr(query, queryParams, paramValue);
223	// navigate(`/explore${queryStr}`, { replace: true });
224
225	// Reset the corresponding unknownAges parameter in Redux state
NEW 226	store.dispatch({	×
227	type: 'UNKNOWN_AGES_CHANGED',
228	payload: {
229	datafield: field,
230	unknownAges: 'include',
231	},
232	});
233	},
234	resetFacetCheckbox: (section, checkbox) => {
NEW 235	const field = section.datafield;	×
NEW 236	const items = section.items;	×
NEW 237	const idx = items.indexOf(checkbox);	×
NEW 238	if (idx > -1) {	×
NEW 239	items.splice(idx, 1);	×
240	}
NEW 241	let paramValue = {};	×
NEW 242	paramValue[field] = items.length > 0 ? items.join('\|') : '';	×
243	// const queryStr = generateQueryStr(query, queryParams, paramValue);
244	// navigate(`/explore${queryStr}`, { replace: true });
245	dispatch(toggleCheckBox({	×
246	datafield: section.datafield,
247	isChecked: false,
248	name: checkbox
249	}));
250	},
251	generateUrl,
252	},
253	customStyles,
254	});
255
256	return (	×
257	<ThemeProvider theme={createTheme(theme)}>
258	<Container
259	maxWidth="xl"
260	className="c3dc_query_bar"
261	>
262	<QueryBar
263	hasImportFrom={hasImportFrom}
264	statusReducer={mappedFilterState}
265	localFind={localFind}
266	/>
267	</Container>
268	</ThemeProvider>
269	);
270	};
271
272	const mapStateToProps = (state) => ({	×
273	hasImportFrom: state.inventoryReducer && state.inventoryReducer.importFromData && state.inventoryReducer.importFromData.length > 0,	×
274	statusReducer: state.statusReducer.filterState,
275	localFind: state.localFind,
276	unknownAgesState: state.statusReducer.unknownAgesState,
277	});	×
278
279	export default connect(mapStateToProps, null)(QueryBarView);

CBIIT / bento-c3dc-frontend / 22312045319

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