Minor changes

mskcc · Jul 23, 2024 · 439d914 · 439d914
1 parent 8efc9ac
commit 439d914
Show file tree

Hide file tree

Showing 7 changed files with 27 additions and 32 deletions.
diff --git a/frontend/src/components/RecordsList.tsx b/frontend/src/components/RecordsList.tsx
@@ -1,7 +1,7 @@
 import AutoSizer from "react-virtualized-auto-sizer";
 import { Button, Container, Modal } from "react-bootstrap";
 import { Dispatch, SetStateAction, useCallback, useMemo, useRef } from "react";
-import { useNavigate } from "react-router-dom";
+import { useNavigate, useParams } from "react-router-dom";
 import { DownloadModal } from "./DownloadModal";
 import { buildTsvString } from "../utils/stringBuilders";
 import { AgGridReact } from "ag-grid-react";
@@ -27,7 +27,7 @@ import { PatientIdsTriplet } from "../pages/patients/PatientsPage";
 import { ErrorMessage, LoadingSpinner, Toolbar } from "../shared/tableElements";
 import { AgGridReact as AgGridReactType } from "ag-grid-react/lib/agGridReact";
 import { BreadCrumb } from "../shared/components/BreadCrumb";
-import { PageHeader } from "../shared/components/PageHeader";
+import { Title } from "../shared/components/Title";
 
 interface IRecordsListProps {
   colDefs: ColDef[];
@@ -52,7 +52,6 @@ interface IRecordsListProps {
   showDownloadModal: boolean;
   setShowDownloadModal: Dispatch<SetStateAction<boolean>>;
   handleDownload: () => void;
-  samplesQueryParam: string | undefined | any; // TODO
   prepareSamplesDataForAgGrid?: (samples: Sample[]) => any[];
   samplesColDefs: ColDef[];
   samplesParentWhereVariables: SampleWhere;
@@ -83,7 +82,6 @@ export default function RecordsList({
   showDownloadModal,
   setShowDownloadModal,
   handleDownload,
-  samplesQueryParam,
   prepareSamplesDataForAgGrid = prepareSampleMetadataForAgGrid,
   samplesColDefs,
   samplesParentWhereVariables,
@@ -102,6 +100,7 @@ export default function RecordsList({
 
   const grid = useRef<AgGridReactType>(null);
   const navigate = useNavigate();
+  const params = useParams();
 
   // note that we aren't using initial fetch
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -192,7 +191,7 @@ export default function RecordsList({
   return (
     <Container fluid>
       <BreadCrumb currPageTitle={dataName} />
-      <PageHeader title={dataName} />
+      <Title text={dataName} />
 
       {showDownloadModal && (
         <DownloadModal
@@ -262,7 +261,7 @@ export default function RecordsList({
         </Modal>
       )}
 
-      {samplesQueryParam && (
+      {Object.keys(params).length !== 0 && (
         <AutoSizer>
           {({ height, width }) => (
             <Modal show={true} dialogClassName="modal-90w" onHide={handleClose}>
@@ -272,10 +271,10 @@ export default function RecordsList({
                   <SamplesList
                     columnDefs={samplesColDefs}
                     prepareDataForAgGrid={prepareSamplesDataForAgGrid}
+                    parentDataName={dataName}
                     parentWhereVariables={samplesParentWhereVariables}
                     refetchWhereVariables={samplesRefetchWhereVariables}
                     setUnsavedChanges={setUnsavedChanges}
-                    exportFileName={`Samples of ${samplesQueryParam}.tsv`}
                     sampleKeyForUpdate={sampleKeyForUpdate}
                     userEmail={userEmail}
                     setUserEmail={setUserEmail}

diff --git a/frontend/src/components/SamplesList.tsx b/frontend/src/components/SamplesList.tsx
@@ -30,9 +30,10 @@ import { ErrorMessage, LoadingSpinner, Toolbar } from "../shared/tableElements";
 import styles from "./records.module.scss";
 import { getUserEmail } from "../utils/getUserEmail";
 import { openLoginPopup } from "../utils/openLoginPopup";
-import { PageHeader } from "../shared/components/PageHeader";
+import { Title } from "../shared/components/Title";
 import { BreadCrumb } from "../shared/components/BreadCrumb";
 import { useParams } from "react-router-dom";
+import { DataName } from "../shared/types";
 
 const POLLING_INTERVAL = 2000;
 const max_rows = 500;
@@ -45,9 +46,9 @@ interface ISampleListProps {
   columnDefs: ColDef[];
   prepareDataForAgGrid: (samples: Sample[]) => any[];
   setUnsavedChanges?: (unsavedChanges: boolean) => void;
+  parentDataName?: DataName;
   parentWhereVariables?: SampleWhere;
   refetchWhereVariables: (parsedSearchVals: string[]) => SampleWhere;
-  exportFileName?: string;
   sampleKeyForUpdate?: keyof Sample;
   userEmail?: string | null;
   setUserEmail?: Dispatch<SetStateAction<string | null>>;
@@ -57,10 +58,10 @@ interface ISampleListProps {
 export default function SamplesList({
   columnDefs,
   prepareDataForAgGrid,
+  parentDataName,
   parentWhereVariables,
   refetchWhereVariables,
   setUnsavedChanges,
-  exportFileName,
   sampleKeyForUpdate = "hasMetadataSampleMetadata",
   userEmail,
   setUserEmail,
@@ -130,7 +131,7 @@ export default function SamplesList({
 
   const samples = data?.samplesConnection?.edges.map((e) => e.node) as Sample[];
 
-  const popupPageHeader = useMemo(() => {
+  const popupParamId = useMemo(() => {
     if (parentWhereVariables && samples && params) {
       return getSamplePopupParamId(
         parentWhereVariables,
@@ -261,8 +262,15 @@ export default function SamplesList({
     <>
       <Container fluid>
         {!parentWhereVariables && <BreadCrumb currPageTitle="samples" />}
-        <PageHeader
-          title={[popupPageHeader, "samples"].filter(Boolean).join(" ")}
+        <Title
+          text={
+            popupParamId
+              ? `Viewing ${parentDataName?.slice(
+                  0,
+                  -1
+                )} ${popupParamId}'s samples`
+              : "samples"
+          }
         />
       </Container>
 
@@ -276,7 +284,11 @@ export default function SamplesList({
           onComplete={() => {
             setShowDownloadModal(false);
           }}
-          exportFileName={[popupPageHeader, "samples.tsv"]
+          exportFileName={[
+            parentDataName?.slice(0, -1),
+            popupParamId,
+            "samples.tsv",
+          ]
             .filter(Boolean)
             .join("_")}
         />

diff --git a/frontend/src/pages/cohorts/CohortsPage.tsx b/frontend/src/pages/cohorts/CohortsPage.tsx
@@ -140,7 +140,6 @@ export default function CohortsPage({
 
   const dataName = "cohorts";
   const sampleQueryParamFieldName = "cohortId";
-  const sampleQueryParamHeaderName = "Cohort ID";
   const sampleQueryParamValue = params[sampleQueryParamFieldName];
   const sampleKeyForUpdate = "hasTempoTempos";
   const defaultSort = [{ initialCohortDeliveryDate: SortDirection.Desc }];
@@ -170,10 +169,6 @@ export default function CohortsPage({
       setShowDownloadModal={setShowDownloadModal}
       handleDownload={() => setShowDownloadModal(true)}
       samplesColDefs={CohortSampleDetailsColumns}
-      samplesQueryParam={
-        sampleQueryParamValue &&
-        `${sampleQueryParamHeaderName} ${sampleQueryParamValue}`
-      }
       prepareSamplesDataForAgGrid={prepareSampleCohortDataForAgGrid}
       samplesParentWhereVariables={
         {

diff --git a/frontend/src/pages/patients/PatientsPage.tsx b/frontend/src/pages/patients/PatientsPage.tsx
@@ -240,7 +240,6 @@ export default function PatientsPage({
 
   const dataName = "patients";
   const sampleQueryParamFieldName = "smilePatientId";
-  const sampleQueryParamHeaderName = "Patient";
   const sampleQueryParamValue = params[sampleQueryParamFieldName];
 
   return (
@@ -267,10 +266,6 @@ export default function PatientsPage({
           setShowDownloadModal(true);
         }}
         samplesColDefs={SampleMetadataDetailsColumns}
-        samplesQueryParam={
-          sampleQueryParamValue &&
-          `${sampleQueryParamHeaderName} ${sampleQueryParamValue}`
-        }
         samplesParentWhereVariables={
           {
             OR: [

diff --git a/frontend/src/pages/requests/RequestsPage.tsx b/frontend/src/pages/requests/RequestsPage.tsx
@@ -67,7 +67,6 @@ export default function RequestsPage() {
 
   const dataName = "requests";
   const sampleQueryParamFieldName = "igoRequestId";
-  const sampleQueryParamHeaderName = "IGO Request ID";
   const sampleQueryParamValue = params[sampleQueryParamFieldName];
   const defaultSort = [{ importDate: SortDirection.Desc }];
 
@@ -87,10 +86,6 @@ export default function RequestsPage() {
       setShowDownloadModal={setShowDownloadModal}
       handleDownload={() => setShowDownloadModal(true)}
       samplesColDefs={SampleMetadataDetailsColumns}
-      samplesQueryParam={
-        sampleQueryParamValue &&
-        `${sampleQueryParamHeaderName} ${sampleQueryParamValue}`
-      }
       prepareSamplesDataForAgGrid={prepareSampleMetadataForAgGrid}
       samplesParentWhereVariables={
         {

diff --git a/...tend/src/shared/components/PageHeader.tsx → frontend/src/shared/components/Title.tsx b/...tend/src/shared/components/PageHeader.tsx → frontend/src/shared/components/Title.tsx
@@ -1,11 +1,11 @@
 import { Col, Row } from "react-bootstrap";
 import { buildSentenceCaseString } from "../../utils/stringBuilders";
 
-export function PageHeader({ title }: { title: string }) {
+export function Title({ text }: { text: string }) {
   return (
     <Row className="pagetitle">
       <Col>
-        <h1>{buildSentenceCaseString(title)}</h1>
+        <h1>{buildSentenceCaseString(text)}</h1>
       </Col>
     </Row>
   );

diff --git a/frontend/src/shared/helpers.tsx b/frontend/src/shared/helpers.tsx
@@ -1091,7 +1091,6 @@ export function getSamplePopupParamId(
   paramId: string
 ) {
   if (parentWhereVariables.OR?.[0].patientsHasSampleConnection_SOME) {
-    console.log(samples);
     const patient = samples[0].patientsHasSampleConnection?.edges?.[0]?.node;
 
     const cmoPatientId = patient.patientAliasesIsAlias.find(