@bento-core/query-bar 1.0.1-icdc.9 → 1.0.1-ins.1

package/README.md

@@ -58,30 +58,6 @@ const CONFIG = {
      * @var {number}
      */
     maxItems: 2,
-    /**
-     * overirdes maxItems to display all the active filter items
-     * @var {boolean}
-     */
-    displayAllActiveFilters: false,
-    /**
-     * key to access label text
-     * @var {boolean}
-     */
-    group: 'group',
-
-    /**
-     * root path of bento app {window.location.href} or react PUBLIC_URL
-     * PR (https://github.com/CBIIT/bento-icdc-frontend/pull/953)
-     * @var {string}
-     */
-    rootPath: null,
-    /**
-     * display query URL
-     * @var {boolean}
-     * PR (https://github.com/CBIIT/bento-icdc-frontend/pull/953)
-     */
-    viewQueryURL: false,
-
   },
 
   /* Component Helper Functions */
@@ -139,7 +115,6 @@ const CONFIG = {
      * @returns {void}
      */
     resetFacetSlider: (section) => {},
-    
   },
 };
 ```

package/dist/generators/QueryBarGenerator.js

@@ -11,7 +11,6 @@ var _clsx = _interopRequireDefault(require("clsx"));
 var _FilterMap = require("../components/FilterMap");
 var _styles = _interopRequireDefault(require("./styles"));
 var _config = _interopRequireDefault(require("./config"));
-var _QueryUrl = _interopRequireDefault(require("../components/QueryUrl"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -38,13 +37,9 @@ const QueryBarGenerator = function QueryBarGenerator() {
   } = _facetFilter.InputTypes;
   const styles = () => _objectSpread(_objectSpread({}, (0, _styles.default)()), customStyles);
   const maxItems = config && typeof config.maxItems === 'number' ? config.maxItems : _config.default.config.maxItems;
-  const queryURLRootPath = config && typeof config.rootPath === 'string' ? config.rootPath : _config.default.config.rootPath;
-  const viewQueryURL = config && typeof config.viewQueryURL === 'boolean' ? config.viewQueryURL : _config.default.config.viewQueryURL;
   const displayAllActiveFilters = config && typeof config.displayAllActiveFilters === 'boolean' ? config.displayAllActiveFilters : _config.default.config.displayAllActiveFilters;
-
-  // const group = config && typeof config.group === 'string'
-  //   ? config.group : DEFAULT_CONFIG.config.group;
-
+  const group = config && typeof config.group === 'string' ? config.group : _config.default.config.group;
+  const count = config && typeof config.count === 'string' ? config.count : _config.default.config.count;
   const clearAll = functions && typeof functions.clearAll === 'function' ? functions.clearAll : _config.default.functions.clearAll;
   const clearUpload = functions && typeof functions.clearUpload === 'function' ? functions.clearUpload : _config.default.functions.clearUpload;
   const clearAutocomplete = functions && typeof functions.clearAutocomplete === 'function' ? functions.clearAutocomplete : _config.default.functions.clearAutocomplete;
@@ -83,6 +78,7 @@ const QueryBarGenerator = function QueryBarGenerator() {
           return facet;
         }
         const {
+          data,
           items
         } = facet;
         const itemKeys = Object.keys(items);
@@ -90,25 +86,35 @@ const QueryBarGenerator = function QueryBarGenerator() {
 
         /* Find any SELECTED CHECKBOXES that do NOT have any data
          * and remove them from the list of selected checkboxes artificially */
-        // itemKeys.forEach((item) => {
-        //   if (data.findIndex((d) => d.group === item) < 0) {
-        //     itemKeys.splice(itemKeys.indexOf(item), 1);
-        //   }
-        // });
-
+        itemKeys.forEach(item => {
+          if (data.findIndex(d => d.group === item) < 0) {
+            itemKeys.splice(itemKeys.indexOf(item), 1);
+          }
+        });
+        // return { ...facet, items: itemKeys };
         /**
-        * commenting out line 89-93
-        * to display all the active filters in the query bar
-        * ICDC-3287
+        * Maintain consistant behavior with facet filter component
+        * Display the active filter items based on the count value
+        * Display active filter items in query bar only if count is greater than 0
+        * behavior similar to filter component
         */
+        // const { group, count } = config;
+        const displayItems = itemKeys.reduce((accumulator, item) => {
+          const itemList = data.filter(d => d[group] === item && d[count] > 0) || [];
+          if (itemList.length > 0) {
+            const labels = itemList.map(filter => filter[group]);
+            accumulator.push(labels);
+          }
+          return accumulator;
+        }, []);
         return _objectSpread(_objectSpread({}, facet), {}, {
-          items: itemKeys
+          items: displayItems
         });
       }).filter(facet => facet.items.length > 0);
       if ((mappedInputs.length || autocomplete.length || upload.length) <= 0) {
         return null;
       }
-      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+      return /*#__PURE__*/_react.default.createElement("div", {
         className: classes.queryWrapper
       }, /*#__PURE__*/_react.default.createElement(_core.Button, {
         className: classes.clearQueryButton,
@@ -125,7 +131,7 @@ const QueryBarGenerator = function QueryBarGenerator() {
       }, "INPUT CASE 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
-      }, "Case ID"), ' ', ' ', /*#__PURE__*/_react.default.createElement("span", {
+      }, "Case IDs"), ' ', ' ', /*#__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
@@ -157,12 +163,7 @@ const QueryBarGenerator = function QueryBarGenerator() {
         classes: classes,
         onSectionClick: filter.type === CHECKBOX ? resetFacetSection : resetFacetSlider,
         onItemClick: filter.type === CHECKBOX ? resetFacetCheckbox : resetFacetSlider
-      })))), viewQueryURL && queryURLRootPath && /*#__PURE__*/_react.default.createElement(_QueryUrl.default, {
-        classes: classes,
-        localFind: localFind,
-        filterItems: mappedInputs,
-        rootPath: queryURLRootPath
-      })));
+      })))));
     })
   };
 };

package/dist/generators/config.js

@@ -24,15 +24,10 @@ var _default = {
      */
     group: 'group',
     /**
-     * root path of bento app
+     * key to access count value
      * @var {boolean}
      */
-    rootPath: 'http://localhost:3010/',
-    /**
-     * display query URL
-     * @var {boolean}
-     */
-    viewQueryURL: true
+    count: 'subjects'
   },
   /* Component Helper Functions */
   functions: {

package/dist/generators/styles.js

@@ -92,10 +92,10 @@ var _default = () => ({
   localFindBackground: {
     backgroundColor: '#C0E9D7'
   },
-  facetSectionCases: {
+  facetSectionProjects: {
     color: '#10A075'
   },
-  facetSectionCasesBackground: {
+  facetSectionProjectsBackground: {
     backgroundColor: '#C0E9D7'
   },
   facetSectionFiles: {
@@ -119,123 +119,6 @@ var _default = () => ({
     '&:hover': {
       cursor: 'pointer'
     }
-  },
-  urlContainer: {
-    marginTop: '10px',
-    minHeight: '10px',
-    marginBottom: '10px'
-  },
-  link: {
-    lineBreak: 'anywhere',
-    overflow: 'hidden',
-    fontFamily: 'Nunito',
-    fontSize: '12px',
-    fontWeight: '500',
-    lineHeight: '16px',
-    letterSpacing: '0em',
-    padding: '5px',
-    borderRadius: '5px',
-    float: 'left',
-    color: '#1D79A8',
-    backgroundColor: '#fff',
-    maxWidth: '80%'
-  },
-  viewLink: {
-    margin: '0'
-  },
-  collapseLink: {
-    maxHeight: '1em',
-    display: 'block',
-    // display: '-webkit-box',
-    '-webkit-box-orient': 'vertical',
-    '-webkit-line-clamp': '1',
-    overflow: 'hidden'
-  },
-  expandLink: {
-    cursor: 'pointer'
-  },
-  expandLinkBtn: {
-    float: 'left',
-    '&:hover': {
-      cursor: 'pointer'
-    }
-  },
-  viewLinkToggleBtn: {
-    height: '20px',
-    marginRight: '10px',
-    fontFamily: 'Nunito',
-    fontSize: '12px',
-    fontWeight: '500',
-    lineHeight: '16px',
-    letterSpacing: '0em',
-    textAlign: 'left',
-    backgroundColor: '#1D79A8',
-    textTransform: 'none',
-    color: '#fff',
-    float: 'left',
-    '&:hover': {
-      backgroundColor: '#1D79A8',
-      color: '#fff'
-    }
-  },
-  urlView: {
-    float: 'left',
-    width: 'calc(100% - 13px)',
-    minWidth: '840px',
-    '@media (max-width: 2560px)': {
-      maxWidth: '1800px'
-    },
-    '@media (max-width: 2000px)': {
-      maxWidth: '1400px'
-    },
-    '@media (max-width: 1600px)': {
-      maxWidth: '1200px'
-    },
-    '@media (max-width: 1300px)': {
-      maxWidth: '1050px'
-    }
-  },
-  copyIconBtn: {
-    padding: '0px',
-    marginLeft: '10px',
-    float: 'left'
-  },
-  dialogBox: {
-    '& div.MuiBackdrop-root': {
-      backgroundColor: 'rgba(0, 0, 0, 0.2)'
-    },
-    '& div.MuiPaper-root': {
-      borderRadius: '20px',
-      border: '2px solid #1D79A8',
-      width: '430px',
-      backgroundColor: '#E8EFEF',
-      padding: '20px 0px 30px 0px',
-      '& .MuiDialogContent-root': {
-        fontFamily: 'Nunito',
-        fontSize: '14px',
-        fontWeight: '600',
-        lineHeight: '20px',
-        textAlign: 'center',
-        '& .MuiTypography-colorTextSecondary': {
-          color: '#000000'
-        }
-      },
-      '& .MuiDialogActions-root': {
-        '& button': {
-          width: '125px',
-          height: '38px',
-          borderRadius: '8px',
-          border: '1px solid #1A8CCB',
-          backgroundColor: '#1A8CCB',
-          color: '#fff',
-          fontFamily: 'Lato',
-          fontSize: '16px',
-          fontWeight: '400',
-          lineHeight: '16px',
-          margin: 'auto'
-        }
-      }
-    }
   }
 });
 exports.default = _default;

package/package.json

@@ -1,14 +1,17 @@
 {
   "name": "@bento-core/query-bar",
-  "version": "1.0.1-icdc.9",
-  "description": "",
+  "version": "1.0.1-ins.1",
+  "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:",
   "main": "dist/index.js",
   "scripts": {
     "build": "npm run lint && cross-env-shell rm -rf dist && NODE_ENV=production BABEL_ENV=es babel src --out-dir dist --copy-files",
     "test": "echo \"Error: no test specified\" && exit 1",
     "lint": "eslint src"
   },
-  "repository": "https://github.com/CBIIT/bento-frontend",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/CBIIT/bento-frontend.git"
+  },
   "publishConfig": {
     "access": "public"
   },
@@ -20,9 +23,14 @@
     "react-redux": "^7.2.1"
   },
   "dependencies": {
-    "@bento-core/facet-filter": "^1.0.0",
+    "@bento-core/facet-filter": "1.0.1-ins.0",
     "lodash": "^4.17.20"
   },
   "author": "CTOS Bento Team",
-  "license": "ISC"
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/CBIIT/bento-frontend/issues"
+  },
+  "homepage": "https://github.com/CBIIT/bento-frontend#readme",
+  "devDependencies": {}
 }

package/src/generators/QueryBarGenerator.js

@@ -1,11 +1,11 @@
 import React, { useState, useEffect } from 'react';
 import { withStyles, Button } from '@material-ui/core';
+// eslint-disable-next-line import/no-unresolved
 import { InputTypes } from '@bento-core/facet-filter';
 import clsx from 'clsx';
 import { Filter } from '../components/FilterMap';
 import DEFAULT_STYLES from './styles';
 import DEFAULT_CONFIG from './config';
-import QueryUrl from '../components/QueryUrl';
 
 /**
  * Generate a pre-configured Explore Query Bar component
@@ -24,20 +24,15 @@ export const QueryBarGenerator = (uiConfig = DEFAULT_CONFIG) => {
     ? config.maxItems
     : DEFAULT_CONFIG.config.maxItems;
 
-  const queryURLRootPath = config && typeof config.rootPath === 'string'
-    ? config.rootPath
-    : DEFAULT_CONFIG.config.rootPath;
-
-  const viewQueryURL = config && typeof config.viewQueryURL === 'boolean'
-    ? config.viewQueryURL
-    : DEFAULT_CONFIG.config.viewQueryURL;
-
   const displayAllActiveFilters = config && typeof config.displayAllActiveFilters === 'boolean'
     ? config.displayAllActiveFilters
     : DEFAULT_CONFIG.config.displayAllActiveFilters;
 
-  // const group = config && typeof config.group === 'string'
-  //   ? config.group : DEFAULT_CONFIG.config.group;
+  const group = config && typeof config.group === 'string'
+    ? config.group : DEFAULT_CONFIG.config.group;
+
+  const count = config && typeof config.count === 'string'
+    ? config.count : DEFAULT_CONFIG.config.count;
 
   const clearAll = functions && typeof functions.clearAll === 'function'
     ? functions.clearAll
@@ -89,24 +84,35 @@ export const QueryBarGenerator = (uiConfig = DEFAULT_CONFIG) => {
         .map((facet) => {
           if (facet.type !== CHECKBOX) { return facet; }
 
-          const { items } = facet;
+          const { data, items } = facet;
           const itemKeys = Object.keys(items);
           itemKeys.sort((a, b) => a.localeCompare(b));
 
           /* Find any SELECTED CHECKBOXES that do NOT have any data
            * and remove them from the list of selected checkboxes artificially */
-          // itemKeys.forEach((item) => {
-          //   if (data.findIndex((d) => d.group === item) < 0) {
-          //     itemKeys.splice(itemKeys.indexOf(item), 1);
-          //   }
-          // });
-
+          itemKeys.forEach((item) => {
+            if (data.findIndex((d) => d.group === item) < 0) {
+              itemKeys.splice(itemKeys.indexOf(item), 1);
+            }
+          });
+          // return { ...facet, items: itemKeys };
           /**
-          * commenting out line 89-93
-          * to display all the active filters in the query bar
-          * ICDC-3287
+          * Maintain consistant behavior with facet filter component
+          * Display the active filter items based on the count value
+          * Display active filter items in query bar only if count is greater than 0
+          * behavior similar to filter component
           */
-          return { ...facet, items: itemKeys };
+          // const { group, count } = config;
+          const displayItems = itemKeys.reduce((accumulator, item) => {
+            const itemList = data.filter((d) => (d[group] === item && d[count] > 0)) || [];
+            if (itemList.length > 0) {
+              const labels = itemList.map((filter) => filter[group]);
+              accumulator.push(labels);
+            }
+            return accumulator;
+          }, []);
+
+          return { ...facet, items: displayItems };
         })
         .filter((facet) => facet.items.length > 0);
 
@@ -115,143 +121,131 @@ export const QueryBarGenerator = (uiConfig = DEFAULT_CONFIG) => {
       }
 
       return (
-        <>
-          <div className={classes.queryWrapper}>
-            <Button
-              className={classes.clearQueryButton}
-              color="primary"
-              variant="outlined"
-              onClick={clearAll}
-            >
-              Clear Query
-            </Button>
-            <span className={classes.divider} />
-            <span className={classes.queryContainer}>
-              {/* Local Find Selections */}
-              {/* TODO: Refactor this into a separate component */}
-              {(autocomplete.length || upload.length) ? (
+        <div className={classes.queryWrapper}>
+          <Button
+            className={classes.clearQueryButton}
+            color="primary"
+            variant="outlined"
+            onClick={clearAll}
+          >
+            Clear Query
+          </Button>
+          <span className={classes.divider} />
+          <span className={classes.queryContainer}>
+            {/* Local Find Selections */}
+            {/* TODO: Refactor this into a separate component */}
+            {(autocomplete.length || upload.length) ? (
+              <span>
+                {/* Standalone case set button */}
+                {(upload.length && !autocomplete.length)
+                  ? (
+                    <span
+                      className={clsx(classes.filterCheckboxes, classes.localFindBackground)}
+                      onClick={clearUpload}
+                    >
+                      INPUT CASE SET
+                    </span>
+                  ) : null}
+                {autocomplete.length
+                  ? (
+                    <span>
+                      {' '}
+                      <span
+                        className={clsx(classes.filterName, classes.localFindBackground)}
+                        onClick={clearAutocomplete}
+                      >
+                        Case IDs
+                      </span>
+                      {' '}
+                      {' '}
+                      <span className={classes.operators}>
+                        {(autocomplete.length === 1 && !upload.length) ? 'IS ' : 'IN '}
+                      </span>
+                    </span>
+                  ) : null}
                 <span>
-                  {/* Standalone case set button */}
-                  {(upload.length && !autocomplete.length)
-                    ? (
+                  {(((upload.length > 0 ? 1 : 0) + autocomplete.length) > 1)
+                    ? <span className={classes.bracketsOpen}>(</span>
+                    : null}
+                  {upload.length && autocomplete.length ? (
+                    <>
+                      {' '}
                       <span
-                        className={clsx(classes.filterCheckboxes, classes.localFindBackground)}
+                        className={clsx(classes.filterCheckboxes, classes.localFind)}
                         onClick={clearUpload}
                       >
                         INPUT CASE SET
                       </span>
-                    ) : null}
-                  {autocomplete.length
-                    ? (
-                      <span>
-                        {' '}
-                        <span
-                          className={clsx(classes.filterName, classes.localFindBackground)}
-                          onClick={clearAutocomplete}
-                        >
-                          Case 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 ? (
-                      <>
-                        {' '}
-                        <span
-                          className={clsx(classes.filterCheckboxes, classes.localFind)}
-                          onClick={clearUpload}
-                        >
-                          INPUT CASE SET
-                        </span>
-                        {' '}
-                      </>
-                    ) : null}
-                    {autocomplete.slice(0, noOfItems).map((d, idx) => (
-                      <>
-                        <span
-                          className={clsx(classes.filterCheckboxes, classes.facetSectionCases)}
-                          key={idx}
-                          onClick={() => deleteAutocompleteItem(d.title)}
-                        >
-                          {d.title}
-                        </span>
-                        {idx === (noOfItems - 1) ? null : ' '}
-                      </>
-                    ))}
-                    {autocomplete.length > maxItems && (
-                      <>
-                        {
-                          displayAllActiveFilters
-                            ? (
-                              <span
-                                className={classes.expandBtn}
-                                onClick={() => setExpand(!expand)}
-                              >
-                                ...
-                              </span>
-                            )
-                            : '...'
-                          }
-                      </>
-                    )}
-                    {(expand && autocomplete.length > maxItems) && (
+                      {' '}
+                    </>
+                  ) : null}
+                  {autocomplete.slice(0, noOfItems).map((d, idx) => (
+                    <>
                       <span
-                        className={classes.collapseBtn}
-                        onClick={() => setExpand(!expand)}
+                        className={clsx(classes.filterCheckboxes, classes.facetSectionCases)}
+                        key={idx}
+                        onClick={() => deleteAutocompleteItem(d.title)}
                       >
-                        {' LESS'}
+                        {d.title}
                       </span>
-                    )}
-                    {(((upload.length > 0 ? 1 : 0) + autocomplete.length) > 1)
-                      ? <span className={classes.bracketsClose}>)</span>
-                      : null}
-                  </span>
+                      {idx === (noOfItems - 1) ? null : ' '}
+                    </>
+                  ))}
+                  {autocomplete.length > maxItems && (
+                    <>
+                      {
+                        displayAllActiveFilters
+                          ? (
+                            <span
+                              className={classes.expandBtn}
+                              onClick={() => setExpand(!expand)}
+                            >
+                              ...
+                            </span>
+                          )
+                          : '...'
+                        }
+                    </>
+                  )}
+                  {(expand && autocomplete.length > maxItems) && (
+                    <span
+                      className={classes.collapseBtn}
+                      onClick={() => setExpand(!expand)}
+                    >
+                      {' LESS'}
+                    </span>
+                  )}
+                  {(((upload.length > 0 ? 1 : 0) + autocomplete.length) > 1)
+                    ? <span className={classes.bracketsClose}>)</span>
+                    : null}
                 </span>
-              ) : null}
-
-              {/* Facet Sidebar Selections */}
-              {((autocomplete.length || upload.length) && mappedInputs.length)
-                ? <span className={classes.operators}> AND </span>
-                : null}
-              {mappedInputs.map((filter, index) => (
-                <span className={clsName(filter.section)}>
-                  <Filter
-                    index={index}
-                    type={filter.type}
-                    data={filter}
-                    maxItems={maxItems}
-                    displayAllActiveFilters={displayAllActiveFilters}
-                    classes={classes}
-                    onSectionClick={filter.type === CHECKBOX
-                      ? resetFacetSection
-                      : resetFacetSlider}
-                    onItemClick={filter.type === CHECKBOX
-                      ? resetFacetCheckbox
-                      : resetFacetSlider}
-                  />
-                </span>
-              ))}
-            </span>
-            {
-              (viewQueryURL && queryURLRootPath) && (
-                <QueryUrl
+              </span>
+            ) : null}
+
+            {/* Facet Sidebar Selections */}
+            {((autocomplete.length || upload.length) && mappedInputs.length)
+              ? <span className={classes.operators}> AND </span>
+              : null}
+            {mappedInputs.map((filter, index) => (
+              <span className={clsName(filter.section)}>
+                <Filter
+                  index={index}
+                  type={filter.type}
+                  data={filter}
+                  maxItems={maxItems}
+                  displayAllActiveFilters={displayAllActiveFilters}
                   classes={classes}
-                  localFind={localFind}
-                  filterItems={mappedInputs}
-                  rootPath={queryURLRootPath}
+                  onSectionClick={filter.type === CHECKBOX
+                    ? resetFacetSection
+                    : resetFacetSlider}
+                  onItemClick={filter.type === CHECKBOX
+                    ? resetFacetCheckbox
+                    : resetFacetSlider}
                 />
-              )
-            }
-          </div>
-        </>
+              </span>
+            ))}
+          </span>
+        </div>
       );
     }),
   };

package/src/generators/config.js

@@ -18,15 +18,10 @@ export default {
      */
     group: 'group',
     /**
-     * root path of bento app
+     * key to access count value
      * @var {boolean}
      */
-    rootPath: 'http://localhost:3010/',
-    /**
-     * display query URL
-     * @var {boolean}
-     */
-    viewQueryURL: true,
+    count: 'subjects',
   },
 
   /* Component Helper Functions */

package/src/generators/styles.js

@@ -86,10 +86,10 @@ export default () => ({
   localFindBackground: {
     backgroundColor: '#C0E9D7',
   },
-  facetSectionCases: {
+  facetSectionProjects: {
     color: '#10A075',
   },
-  facetSectionCasesBackground: {
+  facetSectionProjectsBackground: {
     backgroundColor: '#C0E9D7',
   },
   facetSectionFiles: {
@@ -114,121 +114,4 @@ export default () => ({
       cursor: 'pointer',
     },
   },
-  urlContainer: {
-    marginTop: '10px',
-    minHeight: '10px',
-    marginBottom: '10px',
-  },
-  link: {
-    lineBreak: 'anywhere',
-    overflow: 'hidden',
-    fontFamily: 'Nunito',
-    fontSize: '12px',
-    fontWeight: '500',
-    lineHeight: '16px',
-    letterSpacing: '0em',
-    padding: '5px',
-    borderRadius: '5px',
-    float: 'left',
-    color: '#1D79A8',
-    backgroundColor: '#fff',
-    maxWidth: '80%',
-  },
-  viewLink: {
-    margin: '0',
-  },
-  collapseLink: {
-    maxHeight: '1em',
-    display: 'block',
-    // display: '-webkit-box',
-    '-webkit-box-orient': 'vertical',
-    '-webkit-line-clamp': '1',
-    overflow: 'hidden',
-  },
-  expandLink: {
-    cursor: 'pointer',
-  },
-  expandLinkBtn: {
-    float: 'left',
-    '&:hover': {
-      cursor: 'pointer',
-    },
-  },
-  viewLinkToggleBtn: {
-    height: '20px',
-    marginRight: '10px',
-    fontFamily: 'Nunito',
-    fontSize: '12px',
-    fontWeight: '500',
-    lineHeight: '16px',
-    letterSpacing: '0em',
-    textAlign: 'left',
-    backgroundColor: '#1D79A8',
-    textTransform: 'none',
-    color: '#fff',
-    float: 'left',
-    '&:hover': {
-      backgroundColor: '#1D79A8',
-      color: '#fff',
-    },
-  },
-  urlView: {
-    float: 'left',
-    width: 'calc(100% - 13px)',
-    minWidth: '840px',
-    '@media (max-width: 2560px)': {
-      maxWidth: '1800px',
-    },
-    '@media (max-width: 2000px)': {
-      maxWidth: '1400px',
-    },
-    '@media (max-width: 1600px)': {
-      maxWidth: '1200px',
-    },
-    '@media (max-width: 1300px)': {
-      maxWidth: '1050px',
-    },
-  },
-  copyIconBtn: {
-    padding: '0px',
-    marginLeft: '10px',
-    float: 'left',
-  },
-  dialogBox: {
-    '& div.MuiBackdrop-root': {
-      backgroundColor: 'rgba(0, 0, 0, 0.2)',
-    },
-    '& div.MuiPaper-root': {
-      borderRadius: '20px',
-      border: '2px solid #1D79A8',
-      width: '430px',
-      backgroundColor: '#E8EFEF',
-      padding: '20px 0px 30px 0px',
-      '& .MuiDialogContent-root': {
-        fontFamily: 'Nunito',
-        fontSize: '14px',
-        fontWeight: '600',
-        lineHeight: '20px',
-        textAlign: 'center',
-        '& .MuiTypography-colorTextSecondary': {
-          color: '#000000',
-        },
-      },
-      '& .MuiDialogActions-root': {
-        '& button': {
-          width: '125px',
-          height: '38px',
-          borderRadius: '8px',
-          border: '1px solid #1A8CCB',
-          backgroundColor: '#1A8CCB',
-          color: '#fff',
-          fontFamily: 'Lato',
-          fontSize: '16px',
-          fontWeight: '400',
-          lineHeight: '16px',
-          margin: 'auto',
-        },
-      },
-    },
-  },
 });

package/dist/assets/CopyIcon.svg

@@ -1,3 +0,0 @@
-<svg width="16" height="19" viewBox="0 0 16 19" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 9.75715C13 10.0452 12.78 10.2714 12.5 10.2714H7.5C7.22 10.2714 7 10.0452 7 9.75715C7 9.46915 7.22 9.24287 7.5 9.24287H12.5C12.78 9.24287 13 9.46915 13 9.75715ZM12.5 11.3H7.5C7.22 11.3 7 11.5263 7 11.8143C7 12.1023 7.22 12.3286 7.5 12.3286H12.5C12.78 12.3286 13 12.1023 13 11.8143C13 11.5263 12.78 11.3 12.5 11.3ZM12.5 13.3572H7.5C7.22 13.3572 7 13.5834 7 13.8714C7 14.1594 7.22 14.3857 7.5 14.3857H12.5C12.78 14.3857 13 14.1594 13 13.8714C13 13.5834 12.78 13.3572 12.5 13.3572ZM16 8.21429V16.4429C16 17.5743 15.1 18.5 14 18.5H6C4.9 18.5 4 17.5743 4 16.4429V15.4143H2C0.9 15.4143 0 14.4886 0 13.3572V4.10001C0 2.96858 0.9 2.04286 2 2.04286H4.5C4.5 1.18915 5.17 0.500008 6 0.500008C6.83 0.500008 7.5 1.18915 7.5 2.04286H10C11.1 2.04286 12 2.96858 12 4.10001V6.15715H14C15.1 6.15715 16 7.08287 16 8.21429ZM6 6.15715H11V4.10001C11 3.53429 10.55 3.07144 10 3.07144H9V4.10001H3V3.07144H2C1.45 3.07144 1 3.53429 1 4.10001V13.3572C1 13.9229 1.45 14.3857 2 14.3857H4V8.21429C4 7.08287 4.9 6.15715 6 6.15715ZM15 8.21429C15 7.64858 14.55 7.18572 14 7.18572H6C5.45 7.18572 5 7.64858 5 8.21429V16.4429C5 17.0086 5.45 17.4714 6 17.4714H14C14.55 17.4714 15 17.0086 15 16.4429V8.21429Z" fill="#142D64"/>
-</svg>

package/dist/components/QueryUrl.js

@@ -1,127 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _clsx = _interopRequireDefault(require("clsx"));
-var _core = require("@material-ui/core");
-var _CopyIcon = _interopRequireDefault(require("../assets/CopyIcon.svg"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
-const ViewFullLinkComponent = _ref => {
-  let {
-    classes,
-    url,
-    maxWidth = 1200
-  } = _ref;
-  const linkRef = (0, _react.useRef)(null);
-  const [expandLink, setExpand] = (0, _react.useState)(false);
-
-  /**
-   * Compute url link width based on the windowsize
-   */
-  (0, _react.useEffect)(() => {
-    var _linkRef$current;
-    const urlWidth = linkRef === null || linkRef === void 0 ? void 0 : (_linkRef$current = linkRef.current) === null || _linkRef$current === void 0 ? void 0 : _linkRef$current.offsetWidth;
-    if (urlWidth > maxWidth / 2) {
-      setExpand(true);
-    }
-  }, []);
-  const expandUrl = () => {
-    setExpand(!expandLink);
-  };
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
-    ref: linkRef,
-    className: classes.link
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _clsx.default)(classes.viewLink, {
-      [classes.collapseLink]: expandLink
-    })
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: classes.urlView
-  }, url), expandLink && /*#__PURE__*/_react.default.createElement("span", {
-    className: classes.expandLinkBtn,
-    type: "button",
-    onClick: expandUrl
-  }, "..."))));
-};
-const QueryUrl = _ref2 => {
-  var _queryRef$current;
-  let {
-    classes,
-    filterItems,
-    localFind,
-    rootPath
-  } = _ref2;
-  const [display, setDisplay] = (0, _react.useState)(false);
-  const toggleDisplay = () => setDisplay(!display);
-  const [expand, setExpand] = (0, _react.useState)(false);
-  const [open, toggleOpen] = (0, _react.useState)(false);
-  const {
-    autocomplete = [],
-    upload
-  } = localFind;
-  const pathFilterParams = filterItems.reduce((acc, item) => {
-    const {
-      datafield,
-      items = []
-    } = item;
-    acc[datafield] = items;
-    return acc;
-  }, {});
-  const query = JSON.stringify(_objectSpread(_objectSpread({}, pathFilterParams), {}, {
-    autocomplete,
-    upload
-  }));
-  const url = encodeURI(rootPath.concat(query));
-  const copyUrl = async () => {
-    toggleOpen(!open);
-    await navigator.clipboard.writeText(url);
-  };
-  const queryRef = (0, _react.useRef)(null);
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
-    ref: queryRef,
-    className: classes.urlContainer
-  }, /*#__PURE__*/_react.default.createElement(_core.Button, {
-    onClick: toggleDisplay,
-    className: classes.viewLinkToggleBtn
-  }, display ? 'Hide Query URL' : 'Show Query URL'), display && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, expand ? /*#__PURE__*/_react.default.createElement("span", {
-    type: "button",
-    onClick: () => setExpand(!expand),
-    className: (0, _clsx.default)(classes.link, classes.viewLink, classes.expandLink)
-  }, url) : /*#__PURE__*/_react.default.createElement(ViewFullLinkComponent, {
-    url: url,
-    classes: classes,
-    maxWidth: queryRef === null || queryRef === void 0 ? void 0 : (_queryRef$current = queryRef.current) === null || _queryRef$current === void 0 ? void 0 : _queryRef$current.offsetWidth
-  }), /*#__PURE__*/_react.default.createElement(_core.Tooltip, {
-    arrow: true,
-    title: "Copy to Clipboard"
-  }, /*#__PURE__*/_react.default.createElement(_core.IconButton, {
-    onClick: copyUrl,
-    className: classes.copyIconBtn
-  }, /*#__PURE__*/_react.default.createElement("img", {
-    src: _CopyIcon.default,
-    alt: "copy icon"
-  }))))), /*#__PURE__*/_react.default.createElement(_core.Dialog, {
-    open: open,
-    "aria-labelledby": "alert-dialog-title",
-    "aria-describedby": "alert-dialog-description",
-    className: classes.dialogBox
-  }, /*#__PURE__*/_react.default.createElement(_core.DialogContent, {
-    className: classes.okText
-  }, /*#__PURE__*/_react.default.createElement(_core.DialogContentText, {
-    id: "alert-dialog-description"
-  }, "Your query URL has been copied!")), /*#__PURE__*/_react.default.createElement(_core.DialogActions, null, /*#__PURE__*/_react.default.createElement(_core.Button, {
-    onClick: () => toggleOpen(!open)
-  }, "OK"))));
-};
-var _default = QueryUrl;
-exports.default = _default;

package/src/assets/CopyIcon.svg

@@ -1,3 +0,0 @@
-<svg width="16" height="19" viewBox="0 0 16 19" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M13 9.75715C13 10.0452 12.78 10.2714 12.5 10.2714H7.5C7.22 10.2714 7 10.0452 7 9.75715C7 9.46915 7.22 9.24287 7.5 9.24287H12.5C12.78 9.24287 13 9.46915 13 9.75715ZM12.5 11.3H7.5C7.22 11.3 7 11.5263 7 11.8143C7 12.1023 7.22 12.3286 7.5 12.3286H12.5C12.78 12.3286 13 12.1023 13 11.8143C13 11.5263 12.78 11.3 12.5 11.3ZM12.5 13.3572H7.5C7.22 13.3572 7 13.5834 7 13.8714C7 14.1594 7.22 14.3857 7.5 14.3857H12.5C12.78 14.3857 13 14.1594 13 13.8714C13 13.5834 12.78 13.3572 12.5 13.3572ZM16 8.21429V16.4429C16 17.5743 15.1 18.5 14 18.5H6C4.9 18.5 4 17.5743 4 16.4429V15.4143H2C0.9 15.4143 0 14.4886 0 13.3572V4.10001C0 2.96858 0.9 2.04286 2 2.04286H4.5C4.5 1.18915 5.17 0.500008 6 0.500008C6.83 0.500008 7.5 1.18915 7.5 2.04286H10C11.1 2.04286 12 2.96858 12 4.10001V6.15715H14C15.1 6.15715 16 7.08287 16 8.21429ZM6 6.15715H11V4.10001C11 3.53429 10.55 3.07144 10 3.07144H9V4.10001H3V3.07144H2C1.45 3.07144 1 3.53429 1 4.10001V13.3572C1 13.9229 1.45 14.3857 2 14.3857H4V8.21429C4 7.08287 4.9 6.15715 6 6.15715ZM15 8.21429C15 7.64858 14.55 7.18572 14 7.18572H6C5.45 7.18572 5 7.64858 5 8.21429V16.4429C5 17.0086 5.45 17.4714 6 17.4714H14C14.55 17.4714 15 17.0086 15 16.4429V8.21429Z" fill="#142D64"/>
-</svg>

package/src/components/QueryUrl.js

@@ -1,156 +0,0 @@
-import React, { useState, useEffect, useRef } from 'react';
-import clsx from 'clsx';
-import {
-  Button,
-  IconButton,
-  Tooltip,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogContentText,
-} from '@material-ui/core';
-import CopyIcon from '../assets/CopyIcon.svg';
-
-const ViewFullLinkComponent = ({
-  classes,
-  url,
-  maxWidth = 1200,
-}) => {
-  const linkRef = useRef(null);
-  const [expandLink, setExpand] = useState(false);
-
-  /**
-   * Compute url link width based on the windowsize
-   */
-  useEffect(() => {
-    const urlWidth = linkRef?.current?.offsetWidth;
-    if (urlWidth > maxWidth / 2) {
-      setExpand(true);
-    }
-  }, []);
-
-  const expandUrl = () => {
-    setExpand(!expandLink);
-  };
-
-  return (
-    <>
-      <span ref={linkRef} className={classes.link}>
-        <span
-          className={clsx(classes.viewLink,
-            { [classes.collapseLink]: expandLink })}
-        >
-          <span className={classes.urlView}>
-            {url}
-          </span>
-          {(expandLink) && (
-            <span
-              className={classes.expandLinkBtn}
-              type="button"
-              onClick={expandUrl}
-            >
-              ...
-            </span>
-          )}
-        </span>
-      </span>
-    </>
-  );
-};
-
-const QueryUrl = ({
-  classes,
-  filterItems,
-  localFind,
-  rootPath,
-}) => {
-  const [display, setDisplay] = useState(false);
-  const toggleDisplay = () => setDisplay(!display);
-
-  const [expand, setExpand] = useState(false);
-
-  const [open, toggleOpen] = useState(false);
-
-  const { autocomplete = [], upload } = localFind;
-
-  const pathFilterParams = filterItems.reduce((acc, item) => {
-    const { datafield, items = [] } = item;
-    acc[datafield] = items;
-    return acc;
-  }, {});
-
-  const query = JSON.stringify({
-    ...pathFilterParams,
-    autocomplete,
-    upload,
-  });
-  const url = encodeURI(rootPath.concat(query));
-
-  const copyUrl = async () => {
-    toggleOpen(!open);
-    await navigator.clipboard.writeText(url);
-  };
-
-  const queryRef = useRef(null);
-
-  return (
-    <>
-      <div ref={queryRef} className={classes.urlContainer}>
-        <Button
-          onClick={toggleDisplay}
-          className={classes.viewLinkToggleBtn}
-        >
-          { (display) ? 'Hide Query URL' : 'Show Query URL'}
-        </Button>
-        {
-          (display) && (
-            <>
-              {(expand) ? (
-                <span
-                  type="button"
-                  onClick={() => setExpand(!expand)}
-                  className={clsx(classes.link, classes.viewLink, classes.expandLink)}
-                >
-                  {url}
-                </span>
-              ) : (
-                <ViewFullLinkComponent
-                  url={url}
-                  classes={classes}
-                  maxWidth={queryRef?.current?.offsetWidth}
-                />
-              )}
-              <Tooltip
-                arrow
-                title="Copy to Clipboard"
-              >
-                <IconButton onClick={copyUrl} className={classes.copyIconBtn}>
-                  <img src={CopyIcon} alt="copy icon" />
-                </IconButton>
-              </Tooltip>
-            </>
-          )
-        }
-      </div>
-      <Dialog
-        open={open}
-        aria-labelledby="alert-dialog-title"
-        aria-describedby="alert-dialog-description"
-        className={classes.dialogBox}
-      >
-        <DialogContent className={classes.okText}>
-          <DialogContentText id="alert-dialog-description">
-            Your query URL has been copied!
-          </DialogContentText>
-        </DialogContent>
-        <DialogActions>
-          <Button onClick={() => toggleOpen(!open)}>
-            OK
-          </Button>
-        </DialogActions>
-      </Dialog>
-    </>
-  );
-};
-
-export default QueryUrl;