@bento-core/query-bar 1.0.1-icdc.2 → 1.0.1-icdc.4

package/README.md

@@ -58,6 +58,16 @@ 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',
   },
 
   /* Component Helper Functions */

package/dist/assets/CopyIcon.svg

@@ -0,0 +1,3 @@
+<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

@@ -0,0 +1,68 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+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 QueryUrl = _ref => {
+  let {
+    classes,
+    filterItems,
+    localFind,
+    rootPath
+  } = _ref;
+  const [expand, setExpand] = (0, _react.useState)(false);
+  const toggleExpand = () => setExpand(!expand);
+  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 () => {
+    await navigator.clipboard.writeText(url);
+  };
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: classes.urlContainer
+  }, /*#__PURE__*/_react.default.createElement(_core.Button, {
+    onClick: toggleExpand,
+    className: classes.viewLinkToggleBtn
+  }, expand ? 'Hide Query URL' : 'Show Query URL'), expand && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_core.Link, {
+    target: "_blank",
+    href: url,
+    className: classes.link
+  }, /*#__PURE__*/_react.default.createElement("span", null, url)), /*#__PURE__*/_react.default.createElement(_core.Tooltip, {
+    title: "Copy to Clipboard",
+    className: classes.Tooltip
+  }, /*#__PURE__*/_react.default.createElement(_core.IconButton, {
+    onClick: copyUrl,
+    className: classes.copyIconBtn
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    src: _CopyIcon.default,
+    alt: "copy icon"
+  })))));
+};
+var _default = QueryUrl;
+exports.default = _default;

package/dist/generators/QueryBarGenerator.js

@@ -11,6 +11,7 @@ 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; }
@@ -37,9 +38,13 @@ 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 : _config.default.config.group;
-  const count = config && typeof config.count === 'string' ? config.count : _config.default.config.count;
+
+  // const group = config && typeof config.group === 'string'
+  //   ? config.group : DEFAULT_CONFIG.config.group;
+
   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;
@@ -78,7 +83,6 @@ const QueryBarGenerator = function QueryBarGenerator() {
           return facet;
         }
         const {
-          data,
           items
         } = facet;
         const itemKeys = Object.keys(items);
@@ -86,35 +90,25 @@ 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);
-          }
-        });
-        // return { ...facet, items: itemKeys };
+        // itemKeys.forEach((item) => {
+        //   if (data.findIndex((d) => d.group === item) < 0) {
+        //     itemKeys.splice(itemKeys.indexOf(item), 1);
+        //   }
+        // });
+
         /**
-        * 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
+        * commenting out line 89-93
+        * to display all the active filters in the query bar
+        * ICDC-3287
         */
-        // 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: displayItems
+          items: itemKeys
         });
       }).filter(facet => facet.items.length > 0);
       if ((mappedInputs.length || autocomplete.length || upload.length) <= 0) {
         return null;
       }
-      return /*#__PURE__*/_react.default.createElement("div", {
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
         className: classes.queryWrapper
       }, /*#__PURE__*/_react.default.createElement(_core.Button, {
         className: classes.clearQueryButton,
@@ -163,7 +157,12 @@ 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,10 +24,15 @@ var _default = {
      */
     group: 'group',
     /**
-     * key to access count value
+     * root path of bento app
      * @var {boolean}
      */
-    count: 'subjects'
+    rootPath: null,
+    /**
+     * display query URL
+     * @var {boolean}
+     */
+    viewQueryURL: false
   },
   /* Component Helper Functions */
   functions: {

package/dist/generators/styles.js

@@ -119,6 +119,42 @@ var _default = () => ({
     '&:hover': {
       cursor: 'pointer'
     }
+  },
+  urlContainer: {
+    marginTop: '10px'
+  },
+  link: {
+    lineBreak: 'anywhere',
+    fontFamily: 'Nunito',
+    fontSize: '12px',
+    fontWeight: '500',
+    lineHeight: '16px',
+    letterSpacing: '0em',
+    color: '#1D79A8',
+    backgroundColor: '#fff',
+    padding: '5px',
+    borderRadius: '5px',
+    marginLeft: '10px'
+  },
+  viewLinkToggleBtn: {
+    height: '20px',
+    fontFamily: 'Nunito',
+    fontSize: '12px',
+    fontWeight: '500',
+    lineHeight: '16px',
+    letterSpacing: '0em',
+    textAlign: 'left',
+    backgroundColor: '#1D79A8',
+    textTransform: 'none',
+    color: '#fff',
+    '&:hover': {
+      backgroundColor: '#1D79A8',
+      color: '#fff'
+    }
+  },
+  copyIconBtn: {
+    padding: '0px',
+    marginLeft: '10px'
   }
 });
 exports.default = _default;

package/package.json

@@ -1,17 +1,14 @@
 {
   "name": "@bento-core/query-bar",
-  "version": "1.0.1-icdc.2",
-  "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:",
+  "version": "1.0.1-icdc.4",
+  "description": "",
   "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": {
-    "type": "git",
-    "url": "git+https://github.com/CBIIT/bento-frontend.git"
-  },
+  "repository": "https://github.com/CBIIT/bento-frontend",
   "publishConfig": {
     "access": "public"
   },
@@ -20,17 +17,13 @@
     "clsx": "^1.2.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.0",
-    "react-redux": "^7.2.1"
+    "react-redux": "^7.2.1",
+    "@material-ui/icons": "^4.11.3"
   },
   "dependencies": {
     "@bento-core/facet-filter": "^1.0.0",
     "lodash": "^4.17.20"
   },
   "author": "CTOS Bento Team",
-  "license": "ISC",
-  "bugs": {
-    "url": "https://github.com/CBIIT/bento-frontend/issues"
-  },
-  "homepage": "https://github.com/CBIIT/bento-frontend#readme",
-  "devDependencies": {}
+  "license": "ISC"
 }

package/src/assets/CopyIcon.svg

@@ -0,0 +1,3 @@
+<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

@@ -0,0 +1,73 @@
+import React, { useState } from 'react';
+import {
+  Button,
+  IconButton,
+  Link,
+  Tooltip,
+} from '@material-ui/core';
+import CopyIcon from '../assets/CopyIcon.svg';
+
+const QueryUrl = ({
+  classes,
+  filterItems,
+  localFind,
+  rootPath,
+}) => {
+  const [expand, setExpand] = useState(false);
+  const toggleExpand = () => setExpand(!expand);
+
+  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 () => {
+    await navigator.clipboard.writeText(url);
+  };
+
+  return (
+    <div className={classes.urlContainer}>
+      <Button
+        onClick={toggleExpand}
+        className={classes.viewLinkToggleBtn}
+      >
+        { (expand) ? 'Hide Query URL' : 'Show Query URL'}
+      </Button>
+      {
+        (expand) && (
+          <>
+            <Link
+              target="_blank"
+              href={url}
+              className={classes.link}
+            >
+              <span>
+                {url}
+              </span>
+            </Link>
+            <Tooltip
+              title="Copy to Clipboard"
+              className={classes.Tooltip}
+            >
+              <IconButton onClick={copyUrl} className={classes.copyIconBtn}>
+                <img src={CopyIcon} alt="copy icon" />
+              </IconButton>
+            </Tooltip>
+          </>
+        )
+      }
+    </div>
+  );
+};
+
+export default QueryUrl;

package/src/generators/QueryBarGenerator.js

@@ -5,6 +5,7 @@ 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
@@ -23,15 +24,20 @@ 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 count = config && typeof config.count === 'string'
-    ? config.count : DEFAULT_CONFIG.config.count;
+  // const group = config && typeof config.group === 'string'
+  //   ? config.group : DEFAULT_CONFIG.config.group;
 
   const clearAll = functions && typeof functions.clearAll === 'function'
     ? functions.clearAll
@@ -83,35 +89,24 @@ export const QueryBarGenerator = (uiConfig = DEFAULT_CONFIG) => {
         .map((facet) => {
           if (facet.type !== CHECKBOX) { return facet; }
 
-          const { data, items } = facet;
+          const { 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);
-            }
-          });
-          // return { ...facet, items: itemKeys };
+          // itemKeys.forEach((item) => {
+          //   if (data.findIndex((d) => d.group === item) < 0) {
+          //     itemKeys.splice(itemKeys.indexOf(item), 1);
+          //   }
+          // });
+
           /**
-          * 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
+          * commenting out line 89-93
+          * to display all the active filters in the query bar
+          * ICDC-3287
           */
-          // 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 };
+          return { ...facet, items: itemKeys };
         })
         .filter((facet) => facet.items.length > 0);
 
@@ -120,131 +115,143 @@ 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) ? (
-              <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}
+        <>
+          <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>
-                  {(((upload.length > 0 ? 1 : 0) + autocomplete.length) > 1)
-                    ? <span className={classes.bracketsOpen}>(</span>
-                    : null}
-                  {upload.length && autocomplete.length ? (
-                    <>
-                      {' '}
+                  {/* Standalone case set button */}
+                  {(upload.length && !autocomplete.length)
+                    ? (
                       <span
-                        className={clsx(classes.filterCheckboxes, classes.localFind)}
+                        className={clsx(classes.filterCheckboxes, classes.localFindBackground)}
                         onClick={clearUpload}
                       >
                         INPUT CASE SET
                       </span>
-                      {' '}
-                    </>
-                  ) : null}
-                  {autocomplete.slice(0, noOfItems).map((d, idx) => (
-                    <>
+                    ) : 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>
+                    {(((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) && (
                       <span
-                        className={clsx(classes.filterCheckboxes, classes.facetSectionCases)}
-                        key={idx}
-                        onClick={() => deleteAutocompleteItem(d.title)}
+                        className={classes.collapseBtn}
+                        onClick={() => setExpand(!expand)}
                       >
-                        {d.title}
+                        {' LESS'}
                       </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}
+                    )}
+                    {(((upload.length > 0 ? 1 : 0) + autocomplete.length) > 1)
+                      ? <span className={classes.bracketsClose}>)</span>
+                      : null}
+                  </span>
                 </span>
-              </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}
+              ) : 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
                   classes={classes}
-                  onSectionClick={filter.type === CHECKBOX
-                    ? resetFacetSection
-                    : resetFacetSlider}
-                  onItemClick={filter.type === CHECKBOX
-                    ? resetFacetCheckbox
-                    : resetFacetSlider}
+                  localFind={localFind}
+                  filterItems={mappedInputs}
+                  rootPath={queryURLRootPath}
                 />
-              </span>
-            ))}
-          </span>
-        </div>
+              )
+            }
+          </div>
+        </>
       );
     }),
   };

package/src/generators/config.js

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

package/src/generators/styles.js

@@ -114,4 +114,40 @@ export default () => ({
       cursor: 'pointer',
     },
   },
+  urlContainer: {
+    marginTop: '10px',
+  },
+  link: {
+    lineBreak: 'anywhere',
+    fontFamily: 'Nunito',
+    fontSize: '12px',
+    fontWeight: '500',
+    lineHeight: '16px',
+    letterSpacing: '0em',
+    color: '#1D79A8',
+    backgroundColor: '#fff',
+    padding: '5px',
+    borderRadius: '5px',
+    marginLeft: '10px',
+  },
+  viewLinkToggleBtn: {
+    height: '20px',
+    fontFamily: 'Nunito',
+    fontSize: '12px',
+    fontWeight: '500',
+    lineHeight: '16px',
+    letterSpacing: '0em',
+    textAlign: 'left',
+    backgroundColor: '#1D79A8',
+    textTransform: 'none',
+    color: '#fff',
+    '&:hover': {
+      backgroundColor: '#1D79A8',
+      color: '#fff',
+    },
+  },
+  copyIconBtn: {
+    padding: '0px',
+    marginLeft: '10px',
+  },
 });