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

package/README.md

@@ -68,6 +68,20 @@ const CONFIG = {
      * @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 */
@@ -125,6 +139,7 @@ const CONFIG = {
      * @returns {void}
      */
     resetFacetSlider: (section) => {},
+    
   },
 };
 ```

package/dist/components/QueryUrl.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 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 }; }
@@ -15,15 +16,55 @@ 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 QueryUrl = _ref => {
+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
-  } = _ref;
+  } = _ref2;
+  const [display, setDisplay] = (0, _react.useState)(false);
+  const toggleDisplay = () => setDisplay(!display);
   const [expand, setExpand] = (0, _react.useState)(false);
-  const toggleExpand = () => setExpand(!expand);
+  const [open, toggleOpen] = (0, _react.useState)(false);
   const {
     autocomplete = [],
     upload
@@ -42,18 +83,25 @@ const QueryUrl = _ref => {
   }));
   const url = encodeURI(rootPath.concat(query));
   const copyUrl = async () => {
+    toggleOpen(!open);
     await navigator.clipboard.writeText(url);
   };
-  return /*#__PURE__*/_react.default.createElement("div", {
+  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: toggleExpand,
+    onClick: toggleDisplay,
     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, {
+  }, 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, {
@@ -62,7 +110,18 @@ const QueryUrl = _ref => {
   }, /*#__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/dist/generators/QueryBarGenerator.js

@@ -125,7 +125,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 IDs"), ' ', ' ', /*#__PURE__*/_react.default.createElement("span", {
+      }, "Case ID"), ' ', ' ', /*#__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

@@ -27,12 +27,12 @@ var _default = {
      * root path of bento app
      * @var {boolean}
      */
-    rootPath: null,
+    rootPath: 'http://localhost:3010/',
     /**
      * display query URL
      * @var {boolean}
      */
-    viewQueryURL: false
+    viewQueryURL: true
   },
   /* Component Helper Functions */
   functions: {

package/dist/generators/styles.js

@@ -121,23 +121,48 @@ var _default = () => ({
     }
   },
   urlContainer: {
-    marginTop: '10px'
+    marginTop: '10px',
+    minHeight: '10px',
+    marginBottom: '10px'
   },
   link: {
     lineBreak: 'anywhere',
+    overflow: 'hidden',
     fontFamily: 'Nunito',
     fontSize: '12px',
     fontWeight: '500',
     lineHeight: '16px',
     letterSpacing: '0em',
-    color: '#1D79A8',
-    backgroundColor: '#fff',
     padding: '5px',
     borderRadius: '5px',
-    marginLeft: '10px'
+    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',
@@ -147,14 +172,70 @@ var _default = () => ({
     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'
+    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,6 +1,6 @@
 {
   "name": "@bento-core/query-bar",
-  "version": "1.0.1-icdc.7",
+  "version": "1.0.1-icdc.9",
   "description": "",
   "main": "dist/index.js",
   "scripts": {
@@ -17,8 +17,7 @@
     "clsx": "^1.2.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.0",
-    "react-redux": "^7.2.1",
-    "@material-ui/icons": "^4.11.3"
+    "react-redux": "^7.2.1"
   },
   "dependencies": {
     "@bento-core/facet-filter": "^1.0.0",

package/src/components/QueryUrl.js

@@ -1,20 +1,75 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
+import clsx from 'clsx';
 import {
   Button,
   IconButton,
-  Link,
   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 toggleExpand = () => setExpand(!expand);
+
+  const [open, toggleOpen] = useState(false);
 
   const { autocomplete = [], upload } = localFind;
 
@@ -32,41 +87,69 @@ const QueryUrl = ({
   const url = encodeURI(rootPath.concat(query));
 
   const copyUrl = async () => {
+    toggleOpen(!open);
     await navigator.clipboard.writeText(url);
   };
 
+  const queryRef = useRef(null);
+
   return (
-    <div className={classes.urlContainer}>
-      <Button
-        onClick={toggleExpand}
-        className={classes.viewLinkToggleBtn}
+    <>
+      <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}
       >
-        { (expand) ? 'Hide Query URL' : 'Show Query URL'}
-      </Button>
-      {
-        (expand) && (
-          <>
-            <Link
-              target="_blank"
-              href={url}
-              className={classes.link}
-            >
-              <span>
-                {url}
-              </span>
-            </Link>
-            <Tooltip
-              arrow
-              title="Copy to Clipboard"
-            >
-              <IconButton onClick={copyUrl} className={classes.copyIconBtn}>
-                <img src={CopyIcon} alt="copy icon" />
-              </IconButton>
-            </Tooltip>
-          </>
-        )
-      }
-    </div>
+        <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>
+    </>
   );
 };
 

package/src/generators/QueryBarGenerator.js

@@ -149,7 +149,7 @@ export const QueryBarGenerator = (uiConfig = DEFAULT_CONFIG) => {
                           className={clsx(classes.filterName, classes.localFindBackground)}
                           onClick={clearAutocomplete}
                         >
-                          Case IDs
+                          Case ID
                         </span>
                         {' '}
                         {' '}

package/src/generators/config.js

@@ -21,12 +21,12 @@ export default {
      * root path of bento app
      * @var {boolean}
      */
-    rootPath: null,
+    rootPath: 'http://localhost:3010/',
     /**
      * display query URL
      * @var {boolean}
      */
-    viewQueryURL: false,
+    viewQueryURL: true,
   },
 
   /* Component Helper Functions */

package/src/generators/styles.js

@@ -116,22 +116,47 @@ export default () => ({
   },
   urlContainer: {
     marginTop: '10px',
+    minHeight: '10px',
+    marginBottom: '10px',
   },
   link: {
     lineBreak: 'anywhere',
+    overflow: 'hidden',
     fontFamily: 'Nunito',
     fontSize: '12px',
     fontWeight: '500',
     lineHeight: '16px',
     letterSpacing: '0em',
-    color: '#1D79A8',
-    backgroundColor: '#fff',
     padding: '5px',
     borderRadius: '5px',
-    marginLeft: '10px',
+    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',
@@ -141,13 +166,69 @@ export default () => ({
     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',
+        },
+      },
+    },
   },
 });