Merge pull request #4363 from gblaih/resource-description-column

Resource table should display a column for resource description field

src/pages/patientView/resources/ResourcesTab.tsx

@@ -7,9 +7,9 @@ import { PatientViewPageStore } from '../clinicalInformation/PatientViewPageStor
 import { remoteData } from 'cbioportal-frontend-commons';
 import { ResourcesTableRowData } from '../../../shared/components/resources/ResourcesTableUtils';
 import { MakeMobxView } from '../../../shared/components/MobxView';
-import ResourceLink from '../../../shared/components/resources/ResourceLink';
 import _ from 'lodash';
 import { ResourceData } from 'cbioportal-ts-api-client';
+import ResourceTable from 'shared/components/resources/ResourceTable';
 
 export interface IResourcesTabProps {
     sampleManager: SampleManager | null;
@@ -75,16 +75,13 @@ export default class ResourcesTab extends React.Component<
                         <h4 className="blackHeader">
                             Patient Resources for {this.props.store.patientId}
                         </h4>
-                        {_.sortBy(
-                            this.props.store.patientResourceData.result!,
-                            r => parseFloat(r.resourceDefinition.priority)
-                        ).map(d => (
-                            <ResourceLink
-                                resource={d}
-                                isTabOpen={this.props.store.isResourceTabOpen}
-                                openResource={this.props.openResource}
-                            />
-                        ))}
+                        <ResourceTable
+                            resources={
+                                this.props.store.patientResourceData.result!
+                            }
+                            isTabOpen={this.props.store.isResourceTabOpen}
+                            openResource={this.props.openResource}
+                        />
                     </div>
                 );
             } else {
@@ -106,16 +103,13 @@ export default class ResourcesTab extends React.Component<
                             Study Resources for{' '}
                             {this.props.store.studies.result![0].name}
                         </h4>
-                        {_.sortBy(
-                            this.props.store.studyResourceData.result!,
-                            r => r.resourceDefinition.priority
-                        ).map(d => (
-                            <ResourceLink
-                                resource={d}
-                                isTabOpen={this.props.store.isResourceTabOpen}
-                                openResource={this.props.openResource}
-                            />
-                        ))}
+                        <ResourceTable
+                            resources={
+                                this.props.store.studyResourceData.result!
+                            }
+                            isTabOpen={this.props.store.isResourceTabOpen}
+                            openResource={this.props.openResource}
+                        />
                     </div>
                 );
             } else {

src/pages/studyView/resources/ResourcesTab.tsx

@@ -2,10 +2,10 @@ import * as React from 'react';
 import { observer } from 'mobx-react';
 import FeatureTitle from '../../../shared/components/featureTitle/FeatureTitle';
 import { MakeMobxView } from '../../../shared/components/MobxView';
-import ResourceLink from '../../../shared/components/resources/ResourceLink';
 import _ from 'lodash';
 import { StudyViewPageStore } from '../StudyViewPageStore';
 import { ResourceData } from 'cbioportal-ts-api-client';
+import ResourceTable from 'shared/components/resources/ResourceTable';
 
 export interface IResourcesTabProps {
     store: StudyViewPageStore;
@@ -35,16 +35,13 @@ export default class ResourcesTab extends React.Component<
                                     .result![0].name
                             }
                         </h4>
-                        {_.sortBy(
-                            this.props.store.studyResourceData.result!,
-                            r => parseFloat(r.resourceDefinition.priority)
-                        ).map(d => (
-                            <ResourceLink
-                                resource={d}
-                                isTabOpen={this.props.store.isResourceTabOpen}
-                                openResource={this.props.openResource}
-                            />
-                        ))}
+                        <ResourceTable
+                            resources={
+                                this.props.store.studyResourceData.result!
+                            }
+                            isTabOpen={this.props.store.isResourceTabOpen}
+                            openResource={this.props.openResource}
+                        />
                     </div>
                 );
             } else {

src/shared/components/resources/ResourceTable.tsx

@@ -0,0 +1,99 @@
+import * as React from 'react';
+import { observer } from 'mobx-react';
+import { getFileExtension } from './ResourcesTableUtils';
+import { ResourceData } from 'cbioportal-ts-api-client';
+import _ from 'lodash';
+import { useLocalObservable } from 'mobx-react-lite';
+
+export interface IResourceTableProps {
+    resources: ResourceData[];
+    isTabOpen: (resourceId: string) => boolean;
+    openResource: (resource: ResourceData) => void;
+}
+
+function icon(resource: ResourceData) {
+    let className = '';
+    const fileExtension = getFileExtension(resource.url);
+    switch (fileExtension) {
+        case 'pdf':
+            className = 'fa fa-file-pdf-o';
+            break;
+        case 'png':
+        case 'jpeg':
+        case 'jpg':
+        case 'gif':
+            className = 'fa fa-file-image-o';
+            break;
+        case 'm4a':
+        case 'flac':
+        case 'mp3':
+        case 'mp4':
+        case 'wav':
+            className = 'fa fa-file-audio-o';
+            break;
+    }
+    if (className) {
+        return (
+            <i
+                className={`${className} fa-sm`}
+                style={{ marginRight: 5, color: 'black' }}
+            />
+        );
+    } else {
+        return null;
+    }
+}
+
+const ResourceTable = observer(
+    ({ resources, isTabOpen, openResource }: IResourceTableProps) => {
+        const resourceTable = useLocalObservable(() => ({
+            get data() {
+                return _.sortBy(resources, r => r.resourceDefinition.priority);
+            },
+        }));
+
+        return (
+            <table className="simple-table table table-striped table-border-top">
+                <thead>
+                    <tr>
+                        <th>Resource</th>
+                        <th></th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {resourceTable.data.map(resource => (
+                        <tr>
+                            <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>
+        );
+    }
+);
+
+export default ResourceTable;

src/shared/components/resources/SampleResourcesTable.tsx

@@ -1,13 +1,12 @@
 import * as React from 'react';
 import { observer } from 'mobx-react';
-import { ResourceData, Sample } from 'cbioportal-ts-api-client';
-import LazyMobXTable, { Column } from '../lazyMobXTable/LazyMobXTable';
+import { ResourceData } from 'cbioportal-ts-api-client';
 import SampleManager from '../../../pages/patientView/SampleManager';
 import { computed, makeObservable } from 'mobx';
-import ResourceLink from './ResourceLink';
 import _ from 'lodash';
 import { ResourcesTableRowData } from './ResourcesTableUtils';
 import { stringListToIndexSet } from 'cbioportal-frontend-commons';
+import ResourceTable from './ResourceTable';
 
 export interface ISampleResourcesTableProps {
     data: ResourcesTableRowData[];
@@ -35,43 +34,30 @@ export default class SampleResourcesTable extends React.Component<
         );
     }
 
-    @computed get columns(): Column<ResourcesTableRowData>[] {
-        return [
-            {
-                name: 'Sample',
-                sortBy: datum => datum.sample.sampleId,
-                render: datum =>
-                    this.props.sampleManager.getComponentForSample(
-                        datum.sample.sampleId
-                    ) || <span>{datum.sample.sampleId}</span>,
-            },
-            {
-                name: 'Resources',
-                render: datum => (
-                    <>
-                        {_.sortBy(
-                            datum.resources,
-                            r => r.resourceDefinition.priority
-                        ).map(resource => (
-                            <ResourceLink
-                                resource={resource}
+    render() {
+        return (
+            <>
+                {this.data.map((datum, index) => {
+                    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}
                             />
-                        ))}
-                    </>
-                ),
-            },
-        ];
-    }
-
-    render() {
-        return (
-            <LazyMobXTable
-                columns={this.columns}
-                data={this.data}
-                showPagination={false}
-            />
+                            {index < this.data.length - 1 && (
+                                <hr style={{ marginTop: 20 }}></hr>
+                            )}
+                        </>
+                    );
+                })}
+            </>
         );
     }
 }