Enhancement: Files & Links tab on patient view

cBioPortal · Sep 11, 2024 · 614fee5 · 614fee5
1 parent 9e0c76a
commit 614fee5
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 15 deletions.
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>