Skip to content

Commit

Permalink
Bugfix/hide empty tab (cBioPortal#4969)
Browse files Browse the repository at this point in the history 
* Fix: handle empty "Files and Links" tab in patient view

---------

Co-authored-by: alisman <lisman.aaron@gmail.com>
  • Loading branch information
@Nelliney @alisman @olzhasmukayev
2 people authored and olzhasmukayev committed Jan 16, 2025
1 parent a4252af commit d3c2424
Show file tree
Hide file tree
Showing 4 changed files with 99 additions and 46 deletions.
5 changes: 5 additions & 0 deletions src/pages/patientView/PatientViewPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -277,6 +277,11 @@ export class PatientViewPageInner extends React.Component<

@computed
get shouldShowResources(): boolean {
const tabId: string = this.urlWrapper.activeTabId;
if (tabId === 'filesAndLinks') {
return true;
}

if (this.pageStore.resourceIdToResourceData.isComplete) {
return _.some(
this.pageStore.resourceIdToResourceData.result,
Expand Down
37 changes: 19 additions & 18 deletions src/pages/patientView/PatientViewPageTabs.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -553,24 +553,25 @@ export function tabs(
</MSKTab>
);

tabs.push(
<MSKTab
key={4}
id={PatientViewPageTabs.FilesAndLinks}
linkText={RESOURCES_TAB_NAME}
hide={!pageComponent.shouldShowResources}
>
<div>
<ResourcesTab
store={pageComponent.patientViewPageStore}
sampleManager={
pageComponent.patientViewPageStore.sampleManager.result!
}
openResource={pageComponent.openResource}
/>
</div>
</MSKTab>
);
if (pageComponent.shouldShowResources)
tabs.push(
<MSKTab
key={4}
id={PatientViewPageTabs.FilesAndLinks}
linkText={RESOURCES_TAB_NAME}
>
<div>
<ResourcesTab
store={pageComponent.patientViewPageStore}
sampleManager={
pageComponent.patientViewPageStore.sampleManager
.result!
}
openResource={pageComponent.openResource}
/>
</div>
</MSKTab>
);

tabs.push(
<MSKTab
Expand Down
35 changes: 35 additions & 0 deletions src/pages/patientView/resources/ResourcesTab.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -118,6 +118,40 @@ export default class ResourcesTab extends React.Component<
},
});

readonly showNoResource = MakeMobxView({
await: () => [this.props.store.resourceIdToResourceData],
render: () => {
const shouldShowNoResource = () => {
if (this.props.store.resourceIdToResourceData.isComplete) {
return !_.some(
this.props.store.resourceIdToResourceData.result,
data => data.length > 0
);
}
return true;
};

if (shouldShowNoResource()) {
return (
<div className="resourcesSection">
<h4 className="blackHeader">
Resources for {this.props.store.patientId}
</h4>
<ResourceTable
resources={
this.props.store.studyResourceData.result!
}
isTabOpen={this.props.store.isResourceTabOpen}
openResource={this.props.openResource}
/>
</div>
);
} else {
return null;
}
},
});

render() {
return (
<div className="resourcesTab">
Expand All @@ -136,6 +170,7 @@ export default class ResourcesTab extends React.Component<
{this.patientResources.component}
{this.sampleResources.component}
{this.studyResources.component}
{this.showNoResource.component}
</div>
</div>
);
Expand Down
68 changes: 40 additions & 28 deletions src/shared/components/resources/ResourceTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,46 +53,58 @@ const ResourceTable = observer(
},
}));

return (
return resourceTable.data.length === 0 ? (
<p>There are no resources for this sample.</p>
) : (
<table className="simple-table table table-striped table-border-top">
<thead>
<tr>
{sampleId && <th>Sample ID</th>}
<th>Resource</th>
<th></th>
<th>Description</th>
{resourceTable.data.length > 0 && <th>Description</th>}
</tr>
</thead>
<tbody>
{resourceTable.data.map(resource => (
{resourceTable.data.length === 0 ? (
<tr>
{sampleId && <td>{sampleId}</td>}
<td>
<a onClick={() => openResource(resource)}>
{icon(resource)}
{resource.resourceDefinition.displayName ||
resource.url}
</a>
</td>
<td>
<a
href={resource.url}
style={{ fontSize: 10 }}
target={'_blank'}
>
<i
className={`fa fa-external-link fa-sm`}
style={{
marginRight: 5,
color: 'black',
}}
/>
Open in new window
</a>
<td colSpan={3} style={{ textAlign: 'center' }}>
There are no results
</td>
<td>{resource.resourceDefinition.description}</td>
</tr>
))}
) : (
resourceTable.data.map(resource => (
<tr>
{sampleId && <td>{sampleId}</td>}
<td>
<a onClick={() => openResource(resource)}>
{icon(resource)}
{resource.resourceDefinition
.displayName || resource.url}
</a>
</td>
<td>
<a
href={resource.url}
style={{ fontSize: 10 }}
target={'_blank'}
>
<i
className={`fa fa-external-link fa-sm`}
style={{
marginRight: 5,
color: 'black',
}}
/>
Open in new window
</a>
</td>
<td>
{resource.resourceDefinition.description}
</td>
</tr>
))
)}
</tbody>
</table>
);
Expand Down

0 comments on commit d3c2424

Please sign in to comment.