Bugfix/hide empty tab (#4969)

* Fix: handle empty "Files and Links" tab in patient view --------- Co-authored-by: alisman <[email protected]>
cBioPortal · Jan 10, 2025 · 040ae83 · 040ae83
1 parent c2f6554
commit 040ae83
Show file tree

Hide file tree

Showing 4 changed files with 99 additions and 46 deletions.
diff --git a/src/pages/patientView/PatientViewPage.tsx b/src/pages/patientView/PatientViewPage.tsx
@@ -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,

diff --git a/src/pages/patientView/PatientViewPageTabs.tsx b/src/pages/patientView/PatientViewPageTabs.tsx
@@ -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

diff --git a/src/pages/patientView/resources/ResourcesTab.tsx b/src/pages/patientView/resources/ResourcesTab.tsx
@@ -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">
@@ -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>
         );

diff --git a/src/shared/components/resources/ResourceTable.tsx b/src/shared/components/resources/ResourceTable.tsx
@@ -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>
         );