@bento-core/query-bar 1.0.1-ccdiintegrated.2 → 1.0.1-ccdiintegrated.3

package/README.md

@@ -84,12 +84,19 @@ const CONFIG = {
     clearAutocomplete: () => {},
 
     /**
-     * Delete a specific Local Find searchbox filter (case)
+     * Delete a specific Local Find searchbox filter item. The full
+     * autocomplete item object is passed (not just the title) so consumers
+     * can disambiguate between participant IDs and synonym/associated IDs
+     * that may share the same title.
      *
-     * @param {string} title
+     * @param {object} item       the full autocomplete item to remove
+     * @param {string} item.title the participant identifier
+     * @param {string} [item.type] 'associatedIds' for synonym entries, any
+     *                             other value for participant IDs
+     * @param {string} [item.synonym] synonym value (associated-IDs only)
      * @returns {void}
      */
-    deleteAutocompleteItem: (title) => {},
+    deleteAutocompleteItem: (item) => {},
 
     /**
      * Reset a specific facet section (e.g. Program)

package/dist/generators/QueryBarGenerator.js

@@ -101,26 +101,59 @@ const QueryBarGenerator = function QueryBarGenerator() {
         onClick: clearImportFrom
       }, "IMPORTED PARTICIPANT SET"), hasImportFrom && (mappedInputs.length || autocomplete.length || upload.length) ? /*#__PURE__*/_react.default.createElement("span", {
         className: classes.operators
-      }, " AND ") : null, autocomplete.length || upload.length ? /*#__PURE__*/_react.default.createElement("span", null, upload.length && !autocomplete.length ? /*#__PURE__*/_react.default.createElement("span", {
-        className: (0, _clsx.default)(classes.filterCheckboxes, classes.localFindBackground),
-        onClick: clearUpload
-      }, "INPUT PARTICIPANT SET") : null, autocomplete.length ? /*#__PURE__*/_react.default.createElement("span", null, ' ', /*#__PURE__*/_react.default.createElement("span", {
-        className: (0, _clsx.default)(classes.filterName, classes.localFindBackground),
-        onClick: clearAutocomplete
-      }, "Participant ID"), ' ', ' ', /*#__PURE__*/_react.default.createElement("span", {
+      }, " AND ") : null, (autocomplete.length || upload.length) > 0 && /*#__PURE__*/_react.default.createElement("span", null, (() => {
+        const participantItems = autocomplete.filter(i => i.type !== 'associatedIds');
+        const participantCount = upload.length + participantItems.length;
+        if (upload.length > 0 && participantItems.length === 0) {
+          return /*#__PURE__*/_react.default.createElement("span", {
+            className: (0, _clsx.default)(classes.filterCheckboxes, classes.localFindBackground),
+            onClick: clearUpload
+          }, "INPUT PARTICIPANT SET");
+        }
+        if (participantCount > 0) {
+          const operator = participantCount === 1 ? 'IS' : 'IN';
+          return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
+            className: (0, _clsx.default)(classes.filterName, classes.localFindBackground),
+            onClick: clearAutocomplete
+          }, "Participant ID"), /*#__PURE__*/_react.default.createElement("span", {
+            className: classes.operators
+          }, operator), operator === 'IN' && /*#__PURE__*/_react.default.createElement("span", {
+            className: classes.bracketsOpen
+          }, "("), upload.length > 0 && /*#__PURE__*/_react.default.createElement("span", {
+            className: (0, _clsx.default)(classes.filterCheckboxes, classes.localFind),
+            onClick: clearUpload
+          }, "INPUT PARTICIPANT SET"), participantItems.slice(0, maxItems).map((d, idx, arr) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
+            key: "pid-".concat(idx)
+          }, /*#__PURE__*/_react.default.createElement("span", {
+            className: (0, _clsx.default)(classes.filterCheckboxes, classes.facetSectionCases),
+            onClick: () => deleteAutocompleteItem(d)
+          }, d.title), idx < arr.length - 1 && ' ')), participantItems.length > maxItems && '...', operator === 'IN' && /*#__PURE__*/_react.default.createElement("span", {
+            className: classes.bracketsClose
+          }, ")"));
+        }
+        return null;
+      })(), (upload.length > 0 || autocomplete.some(i => i.type !== 'associatedIds')) && autocomplete.some(i => i.type === 'associatedIds') && /*#__PURE__*/_react.default.createElement("span", {
         className: classes.operators
-      }, autocomplete.length === 1 && !upload.length ? 'IS ' : 'IN ')) : null, /*#__PURE__*/_react.default.createElement("span", null, (upload.length > 0 ? 1 : 0) + autocomplete.length > 1 ? /*#__PURE__*/_react.default.createElement("span", {
-        className: classes.bracketsOpen
-      }, "(") : null, upload.length && autocomplete.length ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, ' ', /*#__PURE__*/_react.default.createElement("span", {
-        className: (0, _clsx.default)(classes.filterCheckboxes, classes.localFind),
-        onClick: clearUpload
-      }, "INPUT PARTICIPANT SET"), ' ') : null, autocomplete.slice(0, maxItems).map((d, idx) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
-        className: (0, _clsx.default)(classes.filterCheckboxes, classes.facetSectionCases),
-        key: idx,
-        onClick: () => deleteAutocompleteItem(d.title)
-      }, d.title), idx === maxItems - 1 ? null : ' ')), autocomplete.length > maxItems && '...', (upload.length > 0 ? 1 : 0) + autocomplete.length > 1 ? /*#__PURE__*/_react.default.createElement("span", {
-        className: classes.bracketsClose
-      }, ")") : null)) : null, (autocomplete.length || upload.length) && mappedInputs.length ? /*#__PURE__*/_react.default.createElement("span", {
+      }, "OR"), (() => {
+        const associatedItems = autocomplete.filter(i => i.type === 'associatedIds');
+        if (associatedItems.length === 0) return null;
+        const operator = associatedItems.length === 1 ? 'IS' : 'IN';
+        return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
+          className: (0, _clsx.default)(classes.filterName, classes.localFindAssociatedIdsBackground),
+          onClick: clearAutocomplete
+        }, "Synonym"), /*#__PURE__*/_react.default.createElement("span", {
+          className: classes.operators
+        }, operator), operator === 'IN' && /*#__PURE__*/_react.default.createElement("span", {
+          className: classes.bracketsOpen
+        }, "("), associatedItems.slice(0, maxItems).map((d, idx, arr) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
+          key: "aid-".concat(idx)
+        }, /*#__PURE__*/_react.default.createElement("span", {
+          className: (0, _clsx.default)(classes.filterCheckboxes, classes.localFindAssociatedIdsText),
+          onClick: () => deleteAutocompleteItem(d)
+        }, d.synonym), idx < arr.length - 1 && ' ')), associatedItems.length > maxItems && '...', operator === 'IN' && /*#__PURE__*/_react.default.createElement("span", {
+          className: classes.bracketsClose
+        }, ")"));
+      })()), (autocomplete.length || upload.length) && mappedInputs.length ? /*#__PURE__*/_react.default.createElement("span", {
         className: classes.operators
       }, " AND ") : null, mappedInputs.map((filter, index) => /*#__PURE__*/_react.default.createElement(_FilterMap.Filter, {
         index: index,

package/dist/generators/config.js

@@ -51,12 +51,20 @@ var _default = {
      */
     clearAutocomplete: () => {},
     /**
-     * Delete a specific Local Find searchbox filter (case)
+     * Delete a specific Local Find searchbox filter item.
+     * The full autocomplete item is passed (not just the title) so consumers
+     * can disambiguate between participant IDs and synonym/associated IDs that
+     * may share the same title.
      *
-     * @param {string} title
+     * @param {object} item the autocomplete item to remove
+     * @param {string} item.title the participant identifier
+     * @param {string} [item.type] either 'associatedIds' for synonym entries
+     *   or any other value (e.g. 'subjectIds', 'participantIds') for
+     *   participant IDs
+     * @param {string} [item.synonym] the synonym value (associated-IDs only)
      * @returns {void}
      */
-    deleteAutocompleteItem: title => {},
+    deleteAutocompleteItem: item => {},
     /**
      * Reset a specific facet section (e.g. Program)
      *

package/dist/generators/styles.js

@@ -124,46 +124,39 @@ var _default = () => ({
     backgroundColor: '#E1C9E140',
     border: '1px solid #646464'
   },
-  facetSectionGeneticanalysis: {
-    color: '#4555AB'
-  },
-  facetSectionGeneticanalysisBackground: {
-    backgroundColor: '#4555AB30',
-    border: '1px solid #646464'
-  },
   facetSectionTreatment: {
-    color: '#907642'
+    color: '#4555AB'
   },
   facetSectionTreatmentBackground: {
-    backgroundColor: '#F0DFBD40',
+    backgroundColor: '#4555AB30',
     border: '1px solid #646464'
   },
   facetSectionTreatmentresponse: {
-    color: '#A85348'
+    color: '#907642'
   },
   facetSectionTreatmentresponseBackground: {
-    backgroundColor: '#F8D7D240',
+    backgroundColor: '#F0DFBD40',
     border: '1px solid #646464'
   },
   facetSectionSurvival: {
-    color: '#1F6BBF'
+    color: '#A85348'
   },
   facetSectionSurvivalBackground: {
-    backgroundColor: '#CEDEF040',
+    backgroundColor: '#F8D7D240',
     border: '1px solid #646464'
   },
   facetSectionSamples: {
-    color: '#14A773'
+    color: '#1F6BBF'
   },
   facetSectionSamplesBackground: {
-    backgroundColor: '#DDEAE540',
+    backgroundColor: '#CEDEF040',
     border: '1px solid #646464'
   },
   facetSectionDatacategory: {
-    color: '#357288'
+    color: '#14A773'
   },
   facetSectionDatacategoryBackground: {
-    backgroundColor: '#E4ECE9',
+    backgroundColor: '#DDEAE540',
     border: '1px solid #646464'
   },
   facetSectionStudy: {
@@ -179,6 +172,12 @@ var _default = () => ({
   facetSectionSequencinglibraryBackground: {
     backgroundColor: '#E1C9E140',
     border: '1px solid #646464'
+  },
+  localFindAssociatedIdsBackground: {
+    backgroundColor: '#F6A700'
+  },
+  localFindAssociatedIdsText: {
+    color: '#B36B00'
   }
 });
 exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bento-core/query-bar",
-  "version": "1.0.1-ccdiintegrated.2",
+  "version": "1.0.1-ccdiintegrated.3",
   "description": "This package provides the Query Bar component that displays the current Facet Search and Local Find filters on the Dashboard/Explore page. It also provides the direct ability to reset all or some of the filters with the click of a button. It is designed to be implemented directly with the:",
   "homepage": "https://github.com/CBIIT/bento-frontend#readme",
   "bugs": {

package/src/generators/QueryBarGenerator.js

@@ -121,70 +121,120 @@ export const QueryBarGenerator = (uiConfig = DEFAULT_CONFIG) => {
             {hasImportFrom && (mappedInputs.length || autocomplete.length || upload.length)
               ? <span className={classes.operators}> AND </span>
               : null}
-            {(autocomplete.length || upload.length) ? (
+            {/* Section: Localfind Results */}
+            {(autocomplete.length || upload.length) > 0 && (
               <span>
-                {/* Standalone case set button */}
-                {(upload.length && !autocomplete.length)
-                  ? (
-                    <span
-                      className={clsx(classes.filterCheckboxes, classes.localFindBackground)}
-                      onClick={clearUpload}
-                    >
-                      INPUT PARTICIPANT SET
-                    </span>
-                  ) : null}
-                {autocomplete.length
-                  ? (
-                    <span>
-                      {' '}
-                      <span
-                        className={clsx(classes.filterName, classes.localFindBackground)}
-                        onClick={clearAutocomplete}
-                      >
-                        Participant ID
-                      </span>
-                      {' '}
-                      {' '}
-                      <span className={classes.operators}>
-                        {(autocomplete.length === 1 && !upload.length) ? 'IS ' : 'IN '}
-                      </span>
-                    </span>
-                  ) : null}
-                <span>
-                  {(((upload.length > 0 ? 1 : 0) + autocomplete.length) > 1)
-                    ? <span className={classes.bracketsOpen}>(</span>
-                    : null}
-                  {upload.length && autocomplete.length ? (
-                    <>
-                      {' '}
+                {/* Participant ID Section
+                  * Treats any autocomplete item that is not explicitly an
+                  * associated/synonym ID as a participant ID, so legacy items
+                  * (e.g. type === 'subjectIds') keep working alongside the new
+                  * synonym section. */}
+                {(() => {
+                  const participantItems = autocomplete.filter((i) => i.type !== 'associatedIds');
+                  const participantCount = upload.length + participantItems.length;
+
+                  if (upload.length > 0 && participantItems.length === 0) {
+                    return (
                       <span
-                        className={clsx(classes.filterCheckboxes, classes.localFind)}
+                        className={clsx(classes.filterCheckboxes, classes.localFindBackground)}
                         onClick={clearUpload}
                       >
                         INPUT PARTICIPANT SET
                       </span>
-                      {' '}
-                    </>
-                  ) : null}
-                  {autocomplete.slice(0, maxItems).map((d, idx) => (
+                    );
+                  }
+
+                  if (participantCount > 0) {
+                    const operator = participantCount === 1 ? 'IS' : 'IN';
+
+                    return (
+                      <>
+                        <span
+                          className={clsx(classes.filterName, classes.localFindBackground)}
+                          onClick={clearAutocomplete}
+                        >
+                          Participant ID
+                        </span>
+                        <span className={classes.operators}>{operator}</span>
+
+                        {operator === 'IN' && <span className={classes.bracketsOpen}>(</span>}
+
+                        {upload.length > 0 && (
+                          <span
+                            className={clsx(classes.filterCheckboxes, classes.localFind)}
+                            onClick={clearUpload}
+                          >
+                            INPUT PARTICIPANT SET
+                          </span>
+                        )}
+
+                        {participantItems.slice(0, maxItems).map((d, idx, arr) => (
+                          <React.Fragment key={`pid-${idx}`}>
+                            <span
+                              className={clsx(classes.filterCheckboxes, classes.facetSectionCases)}
+                              onClick={() => deleteAutocompleteItem(d)}
+                            >
+                              {d.title}
+                            </span>
+                            {idx < arr.length - 1 && ' '}
+                          </React.Fragment>
+                        ))}
+                        {participantItems.length > maxItems && '...'}
+                        {operator === 'IN' && <span className={classes.bracketsClose}>)</span>}
+                      </>
+                    );
+                  }
+
+                  return null;
+                })()}
+
+                {/* OR connector between Participant IDs (or upload) and Synonyms */}
+                {(upload.length > 0 || autocomplete.some((i) => i.type !== 'associatedIds'))
+                  && autocomplete.some((i) => i.type === 'associatedIds')
+                  && (<span className={classes.operators}>OR</span>)}
+
+                {/* Associated ID (Synonym) Section */}
+                {(() => {
+                  const associatedItems = autocomplete.filter((i) => i.type === 'associatedIds');
+                  if (associatedItems.length === 0) return null;
+
+                  const operator = associatedItems.length === 1 ? 'IS' : 'IN';
+
+                  return (
                     <>
                       <span
-                        className={clsx(classes.filterCheckboxes, classes.facetSectionCases)}
-                        key={idx}
-                        onClick={() => deleteAutocompleteItem(d.title)}
+                        className={clsx(
+                          classes.filterName,
+                          classes.localFindAssociatedIdsBackground,
+                        )}
+                        onClick={clearAutocomplete}
                       >
-                        {d.title}
+                        Synonym
                       </span>
-                      {idx === (maxItems - 1) ? null : ' '}
+                      <span className={classes.operators}>{operator}</span>
+                      {operator === 'IN' && <span className={classes.bracketsOpen}>(</span>}
+
+                      {associatedItems.slice(0, maxItems).map((d, idx, arr) => (
+                        <React.Fragment key={`aid-${idx}`}>
+                          <span
+                            className={clsx(
+                              classes.filterCheckboxes,
+                              classes.localFindAssociatedIdsText,
+                            )}
+                            onClick={() => deleteAutocompleteItem(d)}
+                          >
+                            {d.synonym}
+                          </span>
+                          {idx < arr.length - 1 && ' '}
+                        </React.Fragment>
+                      ))}
+                      {associatedItems.length > maxItems && '...'}
+                      {operator === 'IN' && <span className={classes.bracketsClose}>)</span>}
                     </>
-                  ))}
-                  {autocomplete.length > maxItems && '...'}
-                  {(((upload.length > 0 ? 1 : 0) + autocomplete.length) > 1)
-                    ? <span className={classes.bracketsClose}>)</span>
-                    : null}
-                </span>
+                  );
+                })()}
               </span>
-            ) : null}
+            )}
 
             {/* Facet Sidebar Selections */}
             {((autocomplete.length || upload.length) && mappedInputs.length)

package/src/generators/config.js

@@ -50,12 +50,20 @@ export default {
     clearAutocomplete: () => { },
 
     /**
-     * Delete a specific Local Find searchbox filter (case)
+     * Delete a specific Local Find searchbox filter item.
+     * The full autocomplete item is passed (not just the title) so consumers
+     * can disambiguate between participant IDs and synonym/associated IDs that
+     * may share the same title.
      *
-     * @param {string} title
+     * @param {object} item the autocomplete item to remove
+     * @param {string} item.title the participant identifier
+     * @param {string} [item.type] either 'associatedIds' for synonym entries
+     *   or any other value (e.g. 'subjectIds', 'participantIds') for
+     *   participant IDs
+     * @param {string} [item.synonym] the synonym value (associated-IDs only)
      * @returns {void}
      */
-    deleteAutocompleteItem: (title) => { },
+    deleteAutocompleteItem: (item) => { },
 
     /**
      * Reset a specific facet section (e.g. Program)

package/src/generators/styles.js

@@ -118,46 +118,39 @@ export default () => ({
     backgroundColor: '#E1C9E140',
     border: '1px solid #646464',
   },
-  facetSectionGeneticanalysis: {
-    color: '#4555AB',
-  },
-  facetSectionGeneticanalysisBackground: {
-    backgroundColor: '#4555AB30',
-    border: '1px solid #646464',
-  },
   facetSectionTreatment: {
-    color: '#907642',
+    color: '#4555AB',
   },
   facetSectionTreatmentBackground: {
-    backgroundColor: '#F0DFBD40',
+    backgroundColor: '#4555AB30',
     border: '1px solid #646464',
   },
   facetSectionTreatmentresponse: {
-    color: '#A85348',
+    color: '#907642',
   },
   facetSectionTreatmentresponseBackground: {
-    backgroundColor: '#F8D7D240',
+    backgroundColor: '#F0DFBD40',
     border: '1px solid #646464',
   },
   facetSectionSurvival: {
-    color: '#1F6BBF',
+    color: '#A85348',
   },
   facetSectionSurvivalBackground: {
-    backgroundColor: '#CEDEF040',
+    backgroundColor: '#F8D7D240',
     border: '1px solid #646464',
   },
   facetSectionSamples: {
-    color: '#14A773',
+    color: '#1F6BBF',
   },
   facetSectionSamplesBackground: {
-    backgroundColor: '#DDEAE540',
+    backgroundColor: '#CEDEF040',
     border: '1px solid #646464',
   },
   facetSectionDatacategory: {
-    color: '#357288',
+    color: '#14A773',
   },
   facetSectionDatacategoryBackground: {
-    backgroundColor: '#E4ECE9',
+    backgroundColor: '#DDEAE540',
     border: '1px solid #646464',
   },
   facetSectionStudy: {
@@ -174,4 +167,10 @@ export default () => ({
     backgroundColor: '#E1C9E140',
     border: '1px solid #646464',
   },
+  localFindAssociatedIdsBackground: {
+    backgroundColor: '#F6A700',
+  },
+  localFindAssociatedIdsText: {
+    color: '#B36B00',
+  },
 });