From 7323f911c4239176ba008209ec62c11546a43f65 Mon Sep 17 00:00:00 2001 From: Mingfei Shao Date: Wed, 14 Jul 2021 15:40:43 -0500 Subject: [PATCH 1/2] fix: tag responsiveness and linting --- src/Discovery/Discovery.css | 10 ++++------ src/Discovery/Discovery.tsx | 6 +----- src/Discovery/DiscoveryActionBar.tsx | 22 ++++++++++++++-------- src/Discovery/DiscoveryListView.tsx | 4 ++-- src/Discovery/DiscoveryTagViewer.tsx | 28 ++++++++++++++++++++++------ 5 files changed, 43 insertions(+), 27 deletions(-) diff --git a/src/Discovery/Discovery.css b/src/Discovery/Discovery.css index 0c6011fb75..b9f428a254 100644 --- a/src/Discovery/Discovery.css +++ b/src/Discovery/Discovery.css @@ -94,7 +94,7 @@ } .discovery-header__tags-container { - flex: 1 0 auto; + flex: 1 1 auto; height: 90%; } @@ -109,9 +109,6 @@ .discovery-header__tags { width: 100%; - display: flex; - flex-direction: row; - justify-content: space-between; } .discovery-header__tag-group { @@ -140,10 +137,11 @@ } .discovery-header__tag-btn { - cursor: pointer; + white-space: pre-wrap; } .discovery-tag { + cursor: pointer; line-height: 18px; font-size: 10px; box-sizing: border-box; @@ -152,7 +150,7 @@ margin-bottom: 3px; } -.discovery-header__tag-btn:focus, .discovery-header__tag-btn:focus-within, .discovery-header__tag-btn:focus-visible { +.discovery-tag:focus, .discovery-tag:focus-within, .discovery-tag:focus-visible { box-shadow: 0 0 5px rgba(81, 203, 238, 1); } diff --git a/src/Discovery/Discovery.tsx b/src/Discovery/Discovery.tsx index 80c3f4ed2b..b3373f16dd 100644 --- a/src/Discovery/Discovery.tsx +++ b/src/Discovery/Discovery.tsx @@ -173,7 +173,6 @@ const filterByAdvSearch = (studies: any[], advSearchFilterState: FilterState, co interface Props { config: DiscoveryConfig studies: {__accessible: boolean, [any: string]: any}[] - history?: any // from React Router params?: {studyUID: string} // from React Router } @@ -325,7 +324,7 @@ const Discovery: React.FunctionComponent = (props: Props) => { role='button' tabIndex={0} aria-pressed={isSelected ? 'true' : 'false'} - className={`discovery-header__tag-btn discovery-tag ${isSelected ? 'discovery-tag--selected' : ''}`} + className={`discovery-tag ${isSelected ? 'discovery-tag--selected' : ''}`} aria-label={name} style={{ backgroundColor: isSelected ? color : 'initial', @@ -536,15 +535,12 @@ const Discovery: React.FunctionComponent = (props: Props) => { config={config} studies={props.studies} visibleResources={visibleResources} - filterState={filterState} - setFilterState={setFilterState} searchTerm={searchTerm} setPermalinkCopied={setPermalinkCopied} setModalData={setModalData} setModalVisible={setModalVisible} columns={columns} accessibleFieldName={accessibleFieldName} - history={props.history} selectedResources={selectedResources} setSelectedResources={setSelectedResources} /> diff --git a/src/Discovery/DiscoveryActionBar.tsx b/src/Discovery/DiscoveryActionBar.tsx index 94252e0c95..7edfd05596 100644 --- a/src/Discovery/DiscoveryActionBar.tsx +++ b/src/Discovery/DiscoveryActionBar.tsx @@ -21,7 +21,7 @@ interface User { } interface Props { config: DiscoveryConfig; - selectedResources: []; + selectedResources: any[]; exportingToWorkspace: boolean; setExportingToWorkspace: (boolean) => void; filtersVisible: boolean; @@ -29,7 +29,7 @@ interface Props { user: User, } -const handleDownloadManifestClick = (config: DiscoveryConfig, selectedResources: []) => { +const handleDownloadManifestClick = (config: DiscoveryConfig, selectedResources: any[]) => { const { manifestFieldName } = config.features.exportToWorkspace; if (!manifestFieldName) { throw new Error('Missing required configuration field `config.features.exportToWorkspace.manifestFieldName`'); @@ -40,8 +40,11 @@ const handleDownloadManifestClick = (config: DiscoveryConfig, selectedResources: if (study[manifestFieldName]) { if ('commons_url' in study && !(hostname.includes(study.commons_url))) { // PlanX addition to allow hostname based DRS in manifest download clients // like FUSE - manifest.push(...study[manifestFieldName].map((x) => ({ ...x, commons_url: ('commons_url' in x) ? - x.commons_url: study.commons_url }))); + manifest.push(...study[manifestFieldName].map((x) => ({ + ...x, + commons_url: ('commons_url' in x) + ? x.commons_url : study.commons_url, + }))); } else { manifest.push(...study[manifestFieldName]); } @@ -55,7 +58,7 @@ const handleDownloadManifestClick = (config: DiscoveryConfig, selectedResources: const handleExportToWorkspaceClick = async ( config: DiscoveryConfig, - selectedResources: [], + selectedResources: any[], setExportingToWorkspace: (boolean) => void, history: any, ) => { @@ -70,8 +73,11 @@ const handleExportToWorkspaceClick = async ( if (study[manifestFieldName]) { if ('commons_url' in study && !(hostname.includes(study.commons_url))) { // PlanX addition to allow hostname based DRS in manifest download clients // like FUSE - manifest.push(...study[manifestFieldName].map((x) => ({ ...x, commons_url: ('commons_url' in x) ? - x.commons_url: study.commons_url }))); + manifest.push(...study[manifestFieldName].map((x) => ({ + ...x, + commons_url: ('commons_url' in x) + ? x.commons_url : study.commons_url, + }))); } else { manifest.push(...study[manifestFieldName]); } @@ -105,7 +111,7 @@ const DiscoveryActionBar = (props: Props) => { { (props.config.features.advSearchFilters && props.config.features.advSearchFilters.enabled) && (