@bento-core/query-bar 1.0.1-icdc.24 → 1.0.1-icdc.25

package/CopyURL_README.md

@@ -0,0 +1,42 @@
+# DQB copy URL button Configuration
+
+```
+DashTemplateController.js
+
+export const setActiveFilterByPathQuery = (match) => {
+  const query = decodeURI(match.params.filterQuery || '');
+  const filterObject = JSON.parse(query);
+  const { autocomplete = [], upload = [], uploadMetadata } = filterObject;
+
+  const activeFilterValues = Object.keys(filterObject).reduce((curr, key) => {
+    if (Array.isArray(filterObject[key])) {
+      const activeFilters = filterObject[key].reduce((value, item) => ({
+        ...value,
+        [item]: true,
+      }), {});
+      return {
+        ...curr,
+        [key]: activeFilters,
+      };
+    }
+    return curr;
+  }, {});
+  store.dispatch(clearAllAndSelectFacet(activeFilterValues));
+  store.dispatch(updateAutocompleteData(autocomplete));
+  store.dispatch(updateUploadData(upload));
+  store.dispatch(updateUploadMetadata(uploadMetadata));
+};
+
+
+// redirect 
+if (match.params.filterQuery) {
+  setActiveFilterByPathQuery(match);
+  const redirectUrl = '/explore';
+  history.push(redirectUrl);
+}
+
+```
+
+# DQB copy URL button theme style
+
+``` https://github.com/CBIIT/bento-icdc-frontend/tree/v4.0.1/src/pages/dashboard/filterQueryBar```

package/README.md

@@ -63,6 +63,16 @@ const CONFIG = {
      * @var {boolean}
      */
     displayAllActiveFilters: false,
+    /**
+     * set root path for copy url (COPYURL_README)
+     * @var {boolean}
+     */
+    rootPath: `${window.location.href}/`,
+    /**
+     * display copy url button (COPYURL_README)
+     * @var {boolean}
+     */
+    viewQueryURL: true,
   },
 
   /* Component Helper Functions */

package/dist/components/QueryUrl.js

@@ -16,61 +16,15 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 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 [collapseLink, setCollapseLink] = (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) {
-      setCollapseLink(true);
-    }
-  }, []);
-  const expandUrl = () => {
-    setCollapseLink(false);
-  };
-  const collapseUrl = () => {
-    setCollapseLink(true);
-  };
-  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]: collapseLink
-    })
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _clsx.default)(classes.urlView, {
-      [classes.urlViewBtn]: !collapseLink
-    }),
-    type: "button",
-    onClick: collapseUrl
-  }, url), collapseLink && /*#__PURE__*/_react.default.createElement("span", {
-    className: classes.expandLinkBtn,
-    type: "button",
-    onClick: expandUrl
-  }, "..."))));
-};
-const QueryUrl = _ref2 => {
-  var _queryRef$current;
+const QueryUrl = _ref => {
   let {
     classes,
     filterItems,
     localFind = {},
     rootPath
-  } = _ref2;
+  } = _ref;
   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 pathFilterParams = filterItems.reduce((acc, item) => {
     const {
@@ -93,15 +47,10 @@ const QueryUrl = _ref2 => {
   }, /*#__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", {
+  }, display ? 'Hide Query URL' : 'Show Query URL'), display && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
     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, {
+    className: (0, _clsx.default)(classes.viewLink)
+  }, url), /*#__PURE__*/_react.default.createElement(_core.Tooltip, {
     arrow: true,
     title: "Copy to Clipboard"
   }, /*#__PURE__*/_react.default.createElement(_core.IconButton, {
@@ -127,48 +76,43 @@ const QueryUrl = _ref2 => {
 const styles = () => ({
   urlContainer: {
     display: 'flex',
-    marginTop: '10px',
+    marginTop: '3px',
     minHeight: '10px'
   },
-  link: {
-    lineBreak: 'anywhere',
+  viewLink: {
     overflow: 'hidden',
+    textOverflow: 'ellipsis',
     fontFamily: 'Nunito',
     fontSize: '12px',
     fontWeight: '500',
     lineHeight: '16px',
     letterSpacing: '0em',
-    padding: '5px',
+    padding: '2px 5px',
     borderRadius: '5px',
     float: 'left',
     color: '#1D79A8',
     backgroundColor: '#fff',
-    maxWidth: '80%'
-  },
-  viewLink: {
-    margin: '0'
+    margin: '0',
+    whiteSpace: 'nowrap',
+    wordBreak: 'break-all',
+    '@media (max-width: 2560px)': {
+      maxWidth: '1800px'
+    },
+    '@media (max-width: 2000px)': {
+      maxWidth: '1500px'
+    },
+    '@media (max-width: 1600px)': {
+      maxWidth: '1100px'
+    },
+    '@media (max-width: 1300px)': {
+      maxWidth: '900px'
+    }
   },
   urlViewBtn: {
     cursor: 'pointer'
   },
-  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: {
+    padding: '5px 10px 5px 10px',
     height: '20px',
     fontFamily: 'Nunito',
     fontSize: '12px',
@@ -181,28 +125,12 @@ const styles = () => ({
     color: '#fff',
     float: 'left',
     margin: '0px 10px 0px 0px',
+    whiteSpace: 'nowrap',
     '&: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',
     height: '20px',

package/dist/generators/QueryBarGenerator.js

@@ -106,7 +106,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

package/dist/generators/config.js

@@ -18,6 +18,15 @@ var _default = {
      * @var {boolean}
      */
     displayAllActiveFilters: false,
+    /**
+    * set root path for copy url
+    * @var {boolean}
+    */
+    rootPath: "".concat(window.location.href, "/"),
+    /**
+    * display copy url button
+    * @var {boolean}
+    */
     viewQueryURL: false
   },
   /* Component Helper Functions */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bento-core/query-bar",
-  "version": "1.0.1-icdc.24",
+  "version": "1.0.1-icdc.25",
   "description": "",
   "main": "dist/index.js",
   "scripts": {

package/src/components/QueryUrl.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useRef } from 'react';
 import clsx from 'clsx';
 import {
   Button,
@@ -12,62 +12,6 @@ import {
 } from '@material-ui/core';
 import CopyIcon from '../assets/CopyIcon.svg';
 
-const ViewFullLinkComponent = ({
-  classes,
-  url,
-  maxWidth = 1200,
-}) => {
-  const linkRef = useRef(null);
-  const [collapseLink, setCollapseLink] = useState(false);
-
-  /**
-   * Compute url link width based on the windowsize
-   */
-  useEffect(() => {
-    const urlWidth = linkRef?.current?.offsetWidth;
-    if (urlWidth > maxWidth / 2) {
-      setCollapseLink(true);
-    }
-  }, []);
-
-  const expandUrl = () => {
-    setCollapseLink(false);
-  };
-
-  const collapseUrl = () => {
-    setCollapseLink(true);
-  };
-
-  return (
-    <>
-      <span ref={linkRef} className={classes.link}>
-        <span
-          className={clsx(classes.viewLink,
-            { [classes.collapseLink]: collapseLink })}
-        >
-          <span
-            className={clsx(classes.urlView,
-              { [classes.urlViewBtn]: !collapseLink })}
-            type="button"
-            onClick={collapseUrl}
-          >
-            {url}
-          </span>
-          {(collapseLink) && (
-            <span
-              className={classes.expandLinkBtn}
-              type="button"
-              onClick={expandUrl}
-            >
-              ...
-            </span>
-          )}
-        </span>
-      </span>
-    </>
-  );
-};
-
 const QueryUrl = ({
   classes,
   filterItems,
@@ -77,8 +21,6 @@ const QueryUrl = ({
   const [display, setDisplay] = useState(false);
   const toggleDisplay = () => setDisplay(!display);
 
-  const [expand, setExpand] = useState(false);
-
   const [open, toggleOpen] = useState(false);
 
   const pathFilterParams = filterItems.reduce((acc, item) => {
@@ -112,21 +54,12 @@ const QueryUrl = ({
         {
           (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}
-                />
-              )}
+              <div
+                type="button"
+                className={clsx(classes.viewLink)}
+              >
+                {url}
+              </div>
               <Tooltip
                 arrow
                 title="Copy to Clipboard"
@@ -164,48 +97,43 @@ const QueryUrl = ({
 const styles = () => ({
   urlContainer: {
     display: 'flex',
-    marginTop: '10px',
+    marginTop: '3px',
     minHeight: '10px',
   },
-  link: {
-    lineBreak: 'anywhere',
+  viewLink: {
     overflow: 'hidden',
+    textOverflow: 'ellipsis',
     fontFamily: 'Nunito',
     fontSize: '12px',
     fontWeight: '500',
     lineHeight: '16px',
     letterSpacing: '0em',
-    padding: '5px',
+    padding: '2px 5px',
     borderRadius: '5px',
     float: 'left',
     color: '#1D79A8',
     backgroundColor: '#fff',
-    maxWidth: '80%',
-  },
-  viewLink: {
     margin: '0',
+    whiteSpace: 'nowrap',
+    wordBreak: 'break-all',
+    '@media (max-width: 2560px)': {
+      maxWidth: '1800px',
+    },
+    '@media (max-width: 2000px)': {
+      maxWidth: '1500px',
+    },
+    '@media (max-width: 1600px)': {
+      maxWidth: '1100px',
+    },
+    '@media (max-width: 1300px)': {
+      maxWidth: '900px',
+    },
   },
   urlViewBtn: {
     cursor: 'pointer',
   },
-  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: {
+    padding: '5px 10px 5px 10px',
     height: '20px',
     fontFamily: 'Nunito',
     fontSize: '12px',
@@ -218,28 +146,12 @@ const styles = () => ({
     color: '#fff',
     float: 'left',
     margin: '0px 10px 0px 0px',
+    whiteSpace: 'nowrap',
     '&: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',
     height: '20px',

package/src/generators/QueryBarGenerator.js

@@ -126,7 +126,7 @@ export const QueryBarGenerator = (uiConfig = DEFAULT_CONFIG) => {
                         className={clsx(classes.filterName, classes.localFindBackground)}
                         onClick={clearAutocomplete}
                       >
-                        Case ID
+                        Case IDs
                       </span>
                       {' '}
                       {' '}
@@ -187,6 +187,7 @@ export const QueryBarGenerator = (uiConfig = DEFAULT_CONFIG) => {
                 </span>
               </span>
             ) : null}
+
             {/* Facet Sidebar Selections */}
             {((autocomplete.length || upload.length) && mappedInputs.length)
               ? <span className={classes.operators}> AND </span>

package/src/generators/config.js

@@ -12,6 +12,15 @@ export default {
      * @var {boolean}
      */
     displayAllActiveFilters: false,
+    /**
+    * set root path for copy url
+    * @var {boolean}
+    */
+    rootPath: `${window.location.href}/`,
+    /**
+    * display copy url button
+    * @var {boolean}
+    */
     viewQueryURL: false,
   },