Merge pull request #1637 from 4dn-dcic/mobile_ux_updates

Mobile UX Updates

Author: utku-ozturk

deploy/post_deploy_testing/cypress/integration/04a_search_views_local.js

@@ -131,7 +131,7 @@ describe('Deployment/CI Search View Tests', function () {
                 .get('.search-results-container .search-result-row').then(($searchResultElems)=>{
                     expect($searchResultElems.length).to.be.greaterThan(0);
                 }).end()
-                .get('.above-results-table-row .results-count.box button.btn-xs').contains("Create New Configuration").click().end().wait(1000)
+                .get('.above-results-table-row .results-count.box button.btn-xs').contains("Create New").click().end().wait(1000)
                 .get('a.dropdown-item').contains('Tier 1').click().end();
 
             // set microscope conf. name

package-lock.json

@@ -107,7 +107,7 @@
     "micro-meta-app-react": "git+https:github.com/WU-BIMAC/MicroMetaApp-React#0.0.0.21",
     "@fortawesome/fontawesome-free": "^5.15.4",
     "@hms-dbmi-bgm/react-workflow-viz": "0.1.7",
-    "@hms-dbmi-bgm/shared-portal-components": "git+https:github.com/4dn-dcic/shared-portal-components#0.1.42",
+    "@hms-dbmi-bgm/shared-portal-components": "git+https:github.com/4dn-dcic/shared-portal-components#0.1.44",
     "auth0-lock": "^11.32.2",
     "d3": "^6.7.0",
     "date-fns": "^2.28.0",

package.json

@@ -1,7 +1,7 @@
 [tool.poetry]
 # Note: Various modules refer to this system as "encoded", not "fourfront".
 name = "encoded"
-version = "4.2.9"  # 4.0.0 introduced containerization
+version = "4.2.10"  # 4.0.0 introduced containerization
 description = "4DN-DCIC Fourfront"
 authors = ["4DN-DCIC Team <[email protected]>"]
 license = "MIT"

pyproject.toml

@@ -1,5 +1,6 @@
 import sys
 import uptime
+import re
 
 from collections import OrderedDict
 from dcicutils import lang_utils
@@ -13,6 +14,10 @@
 from .appdefs import APP_VERSION_REGISTRY_KEY, ITEM_INDEX_ORDER
 from .schema_formats import is_accession
 
+# for more information, visit http://detectmobilebrowsers.com/
+_IS_MOBILE_BROWSER_MATCH_B = re.compile(r"(android|bb\\d+|meego).+mobile|avantgo|bada\\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\\.(browser|link)|vodafone|wap|windows ce|xda|xiino", re.I|re.M)
+_IS_MOBILE_BROWSER_MATCH_V = re.compile(r"1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\\-(n|u)|c55\\/|capi|ccwa|cdm\\-|cell|chtm|cldc|cmd\\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\\-s|devi|dica|dmob|do(c|p)o|ds(12|\\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\\-|_)|g1 u|g560|gene|gf\\-5|g\\-mo|go(\\.w|od)|gr(ad|un)|haie|hcit|hd\\-(m|p|t)|hei\\-|hi(pt|ta)|hp( i|ip)|hs\\-c|ht(c(\\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\\-(20|go|ma)|i230|iac( |\\-|\\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\\/)|klon|kpt |kwc\\-|kyo(c|k)|le(no|xi)|lg( g|\\/(k|l|u)|50|54|\\-[a-w])|libw|lynx|m1\\-w|m3ga|m50\\/|ma(te|ui|xo)|mc(01|21|ca)|m\\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\\-2|po(ck|rt|se)|prox|psio|pt\\-g|qa\\-a|qc(07|12|21|32|60|\\-[2-7]|i\\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\\-|oo|p\\-)|sdk\\/|se(c(\\-|0|1)|47|mc|nd|ri)|sgh\\-|shar|sie(\\-|m)|sk\\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\\-|v\\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\\-|tdg\\-|tel(i|m)|tim\\-|t\\-mo|to(pl|sh)|ts(70|m\\-|m3|m5)|tx\\-9|up(\\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\\-|your|zeto|zte\\-", re.I|re.M)
+
 
 def includeme(config):
     config.include(health_check)
@@ -341,3 +346,18 @@ def carousel(self, request):
     })
     def app_version(self, registry):
         return registry.settings[APP_VERSION_REGISTRY_KEY]
+
+    @calculated_property(schema={
+        "title": "Is request initiated by a mobile device",
+        "description": "The calculation is based on request.user_agent that is not reliable source. It is for server-side rendering, passing as a prop is not recommended.",
+        "type": "boolean"
+    })
+    def is_mobile_browser(self, request):
+        if hasattr(request, 'user_agent') and request.user_agent is not None:
+            user_agent = request.user_agent
+            b = _IS_MOBILE_BROWSER_MATCH_B.search(user_agent)
+            v = _IS_MOBILE_BROWSER_MATCH_V.search(user_agent[0:4])
+            if b or v:
+                return True      
+        # fallback
+        return False

src/encoded/root.py

@@ -1710,6 +1710,7 @@ class BodyElement extends React.PureComponent {
         const appClass = slowLoad ? 'communicating' : 'done';
         const overlaysContainer = this.overlaysContainerRef.current;
         const isSelectPage = isSelectAction(currentAction) && this.memoized.isSearchPage(href);
+        const { is_mobile_browser: isMobileBrowser = false } = context;
 
         if (hasError) return this.renderErrorState();
 
@@ -1719,6 +1720,11 @@ class BodyElement extends React.PureComponent {
             windowWidth, windowHeight, isFullscreen, overlaysContainer
         };
 
+        const initialFields = [
+            isMobileBrowser ? 'experiments_in_set.biosample.biosource.biosource_type' : 'experiments_in_set.experiment_type.display_title',
+            'experiments_in_set.biosample.biosource.organism.name'
+        ];
+
         return (
             <body data-current-action={currentAction} onClick={onBodyClick} onSubmit={onBodySubmit} data-path={hrefParts.path}
                 data-pathname={hrefParts.pathname} className={this.bodyClassName()}>
@@ -1754,7 +1760,7 @@ class BodyElement extends React.PureComponent {
 
                             <div id="facet-charts-container" className="container">
                                 <FacetCharts {..._.pick(this.props, 'context', 'href', 'session', 'schemas', 'browseBaseState')}
-                                    {...{ windowWidth, windowHeight, navigate, isFullscreen }} />
+                                    {...{ windowWidth, windowHeight, navigate, isFullscreen, initialFields }} />
                             </div>
 
                             <ContentErrorBoundary canonical={canonical} href={href}>

src/encoded/static/components/app.js

@@ -337,7 +337,7 @@ const CreateNewConfigurationDropDownButton = React.memo(function (props) {
     const tierOptions = _.range(startTier, endTier + 1);
     return (
         <DropdownButton id="tier-selector" onSelect={handleChangeMicroscopeTier}
-            title="Create New Configuration" size="xs" disabled={disabled}>
+            title="Create New" size="xs" disabled={disabled}>
             {tierOptions.map((opt, i) => (
                 <DropdownItem key={opt} eventKey={opt} data-key={opt}>
                     {'Tier ' + opt}

src/encoded/static/components/browse/MicroscopySearchView.js

@@ -7,7 +7,7 @@ import _ from 'underscore';
 import memoize from 'memoize-one';
 import Modal from 'react-bootstrap/esm/Modal';
 
-import { console, ajax, JWT, typedefs, analytics } from '@hms-dbmi-bgm/shared-portal-components/es/components/util';
+import { console, ajax, JWT, typedefs, analytics, object } from '@hms-dbmi-bgm/shared-portal-components/es/components/util';
 import { display as dateTimeDisplay } from '@hms-dbmi-bgm/shared-portal-components/es/components/ui/LocalizedTime';
 import { uniqueFileCount, fileCountWithDuplicates } from './../SelectedFilesController';
 import { onLoginNavItemClick } from './../../../navigation/components/LoginNavItem';
@@ -208,9 +208,9 @@ class SelectedFilesDownloadModal extends React.PureComponent {
                 <Modal.Body>
                     <div className="important-notes-section">
                         <h4 className="mb-07 text-500">Important</h4>
-                        <ul className="mb-25">
+                        <ul>
                             <li className="mb-05">
-                                <span className="text-danger"><b>As of October 15, 2020</b>, you must include an <b>access key</b> in your cURL command for bulk downloads.</span>
+                                <span className="text-danger">You must include an <b>access key</b> in your cURL command for bulk downloads.</span>
                             </li>
                             <li className="mb-05">You can configure the access key in {session ? <a href={profileHref} target="_blank" rel="noopener noreferrer">your profile</a> : 'your profile'}, then use it in place of <em>{'<access_key_id>:<access_key_secret>'}</em>, below.</li>
                             {!session ?
@@ -225,7 +225,7 @@ class SelectedFilesDownloadModal extends React.PureComponent {
                     { /*session || */foundUnpublishedFiles ?
                         <div className="extra-notes-section">
                             <h4 className="mt-2 mb-07 text-500">Notes</h4>
-                            <ul className="mb-25">
+                            <ul className="mb-20">
                                 {/* { session ?
                                     <li className="mb-05">
                                         To download files which are not yet released, please include an <b>access key</b> in your cURL command which you can configure in <a href={profileHref} target="_blank" rel="noopener noreferrer">your profile</a>.
@@ -247,15 +247,15 @@ class SelectedFilesDownloadModal extends React.PureComponent {
                         </div> : null }
 
                     { foundUnpublishedFiles && !disclaimerAccepted?
-                        <button type="button" className="btn btn-info" onClick={this.handleAcceptDisclaimer}>
-                            <i className="icon icon-fw icon-check mr-05 fas"/>
+                        <button type="button" className="btn btn-info mr-1 mt-1 btn-block-xs-only" onClick={this.handleAcceptDisclaimer}>
+                            <i className="icon icon-fw icon-check fas mr-1"/>
                             I have read and understand the notes.
                         </button>
                         :
                         <SelectedFilesDownloadStartButton {...{ selectedFiles, suggestedFilename, context, action }} />
                     }
 
-                    <button type="reset" onClick={onHide} className="btn btn-outline-dark ml-05">Cancel</button>
+                    <button type="reset" onClick={onHide} className="btn btn-outline-dark mt-1 btn-block-xs-only">Cancel</button>
 
                 </Modal.Body>
             </Modal>
@@ -265,12 +265,19 @@ class SelectedFilesDownloadModal extends React.PureComponent {
 
 const ModalCodeSnippet = React.memo(function ModalCodeSnippet(props){
     const { filename, session } = props;
-    return (
-        <pre className="mb-15">
-            cut -f 1 <b>{ filename }</b> | tail -n +3 | grep -v ^# | xargs -n 1 curl -O -L
-            { session ? <code style={{ 'opacity' : 0.5 }}> --user <em>{'<access_key_id>:<access_key_secret>'}</em></code> : null }
+    const htmlValue = (
+        <pre className="mb-15 d-md-inline curl-command">
+            cut -f 1 <b>{filename}</b> | tail -n +3 | grep -v ^# | xargs -n 1 curl -O -L
+            {session ? <code style={{ 'opacity': 0.5 }}> --user <em>{'<access_key_id>:<access_key_secret>'}</em></code> : null}
         </pre>
     );
+    const plainValue = `cut -f 1 ${filename} | tail -n +3 | grep -v ^# | xargs -n 1 curl -O -L` + (session ? " --user <access_key_id>:<access_key_secret>" : '');
+    return (
+        <object.CopyWrapper value={plainValue} className="curl-command-wrapper" data-tip={'Click to copy'}
+            wrapperElement="div" iconProps={{ }}>
+            {htmlValue}
+        </object.CopyWrapper>
+    );
 });
 
 
@@ -320,12 +327,12 @@ const SelectedFilesDownloadStartButton = React.memo(function SelectedFilesDownlo
     }, [ selectedFiles, context ]);
 
     return (
-        <form method="POST" action={action} className="d-inline-block">
+        <form method="POST" action={action} className="d-inline-block d-block-xs-only">
             <input type="hidden" name="accession_triples" value={JSON.stringify(accessionTripleArrays)} />
             <input type="hidden" name="download_file_name" value={JSON.stringify(suggestedFilename)} />
-            <button type="submit" name="Download" className="btn btn-primary" onClick={onClick}
+            <button type="submit" name="Download" className="btn btn-primary mt-1 mr-1 btn-block-xs-only" onClick={onClick}
                 data-tip="Details for each individual selected file delivered via a TSV spreadsheet.">
-                <i className="icon icon-fw icon-file-alt fas"/>&nbsp; Download metadata for files
+                <i className="icon icon-fw icon-file-alt fas mr-1"/>Download metadata for files
             </button>
         </form>
     );