Enhancement/files and links (#4995)

* Enhancement: Files & Links tab on patient view * add view option for Files & Links tab
cBioPortal · Sep 24, 2024 · 1dd45af · 1dd45af
1 parent 3ac91f9
commit 1dd45af
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 19 deletions.
diff --git a/src/pages/studyView/resources/FilesAndLinks.tsx b/src/pages/studyView/resources/FilesAndLinks.tsx
@@ -10,6 +10,7 @@ import { Else, If, Then } from 'react-if';
 import { WindowWidthBox } from '../../../shared/components/WindowWidthBox/WindowWidthBox';
 import LoadingIndicator from 'shared/components/loadingIndicator/LoadingIndicator';
 import {
+    getResourceViewUrlWithPathname,
     getSampleViewUrlWithPathname,
     getPatientViewUrlWithPathname,
 } from 'shared/api/urls';
@@ -86,6 +87,7 @@ function buildItemsAndResources(resourceData: {
                 typeOfResource: resource?.resourceDefinition?.displayName,
                 description: resource?.resourceDefinition?.description,
                 url: resource?.url,
+                resourceId: resource?.resourceId,
             }))
         )
         .value();
@@ -259,18 +261,41 @@ export class FilesAndLinks extends React.Component<IFilesLinksTable, {}> {
                     'Type Of Resource'
                 ),
                 render: (data: { [id: string]: string }) => {
+                    const path = `patient/openResource_${data.resourceId}`;
                     return (
                         <div>
-                            <a href={data.url} target="_blank">
+                            <a
+                                href={getResourceViewUrlWithPathname(
+                                    data.studyId,
+                                    path,
+                                    data.patientId
+                                )}
+                            >
+                                {data.typeOfResource}
+                            </a>
+                        </div>
+                    );
+                },
+            },
+
+            {
+                ...this.getDefaultColumnConfig('resourceUrl', ''),
+                render: (data: { [id: string]: string }) => {
+                    return (
+                        <div>
+                            <a
+                                href={data.url}
+                                style={{ fontSize: 10 }}
+                                target={'_blank'}
+                            >
                                 <i
                                     className={`fa fa-external-link fa-sm`}
                                     style={{
                                         marginRight: 5,
                                         color: 'black',
-                                        fontSize: 10,
                                     }}
                                 />
-                                {data.typeOfResource}
+                                Open in new window
                             </a>
                         </div>
                     );
@@ -287,7 +312,7 @@ export class FilesAndLinks extends React.Component<IFilesLinksTable, {}> {
             {
                 ...this.getDefaultColumnConfig(
                     'resourcesPerPatient',
-                    'Number of Resource Per Patient',
+                    'Resources per Patient',
                     true
                 ),
                 render: (data: { [id: string]: number }) => {

diff --git a/src/shared/api/urls.ts b/src/shared/api/urls.ts
@@ -139,6 +139,15 @@ export function getSampleViewUrlWithPathname(
     return buildCBioPortalPageUrl(pathname, { sampleId, studyId }, hash);
 }
 
+export function getResourceViewUrlWithPathname(
+    studyId: string,
+    pathname: string,
+    patientId: string
+) {
+    let caseId: string = `${patientId}`;
+    return buildCBioPortalPageUrl(pathname, { studyId, caseId });
+}
+
 export function getPatientViewUrl(
     studyId: string,
     caseId: string,

diff --git a/src/shared/components/resources/ResourceTab.tsx b/src/shared/components/resources/ResourceTab.tsx
@@ -115,14 +115,22 @@ export default class ResourceTab extends React.Component<
 
         return (
             <div>
-                <FeatureTitle
-                    title={
-                        this.currentResourceDatum.resourceDefinition.displayName
-                    }
-                    isLoading={false}
-                    className="pull-left"
-                    style={{ marginBottom: 10 }}
-                />
+                <div style={{ display: 'flex', alignItems: 'flex-end' }}>
+                    <FeatureTitle
+                        title={
+                            this.currentResourceDatum.resourceDefinition
+                                .displayName
+                        }
+                        isLoading={false}
+                        className="pull-left"
+                        style={{ marginBottom: 10 }}
+                    />
+                    <p style={{ marginLeft: 10 }}>
+                        {this.currentResourceDatum.sampleId
+                            ? this.currentResourceDatum.sampleId
+                            : this.currentResourceDatum.patientId}
+                    </p>
+                </div>
                 <div
                     style={{
                         width: '100%',

diff --git a/src/shared/components/resources/ResourceTable.tsx b/src/shared/components/resources/ResourceTable.tsx
@@ -9,6 +9,7 @@ export interface IResourceTableProps {
     resources: ResourceData[];
     isTabOpen: (resourceId: string) => boolean;
     openResource: (resource: ResourceData) => void;
+    sampleId?: React.ReactNode;
 }
 
 function icon(resource: ResourceData) {
@@ -45,7 +46,7 @@ function icon(resource: ResourceData) {
 }
 
 const ResourceTable = observer(
-    ({ resources, isTabOpen, openResource }: IResourceTableProps) => {
+    ({ resources, isTabOpen, openResource, sampleId }: IResourceTableProps) => {
         const resourceTable = useLocalObservable(() => ({
             get data() {
                 return _.sortBy(resources, r => r.resourceDefinition.priority);
@@ -56,6 +57,7 @@ const ResourceTable = observer(
             <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>
@@ -64,6 +66,7 @@ const ResourceTable = observer(
                 <tbody>
                     {resourceTable.data.map(resource => (
                         <tr>
+                            {sampleId && <td>{sampleId}</td>}
                             <td>
                                 <a onClick={() => openResource(resource)}>
                                     {icon(resource)}

diff --git a/src/shared/components/resources/SampleResourcesTable.tsx b/src/shared/components/resources/SampleResourcesTable.tsx
@@ -38,18 +38,21 @@ export default class SampleResourcesTable extends React.Component<
         return (
             <>
                 {this.data.map((datum, index) => {
+                    const sampleId = (
+                        <p className="blackHeader" style={{ margin: 0 }}>
+                            {datum.sample.sampleId}{' '}
+                            {this.props.sampleManager.getComponentForSample(
+                                datum.sample.sampleId
+                            )}
+                        </p>
+                    );
                     return (
                         <>
-                            <h5 className="blackHeader">
-                                Sample {datum.sample.sampleId}{' '}
-                                {this.props.sampleManager.getComponentForSample(
-                                    datum.sample.sampleId
-                                )}
-                            </h5>
                             <ResourceTable
                                 resources={datum.resources}
                                 isTabOpen={this.props.isTabOpen}
                                 openResource={this.props.openResource}
+                                sampleId={sampleId}
                             />
                             {index < this.data.length - 1 && (
                                 <hr style={{ marginTop: 20 }}></hr>