diff --git a/frontend/src/components/RecordsList.tsx b/frontend/src/components/RecordsList.tsx index 238846f8..76be421a 100644 --- 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>; 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(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 ( - + {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 index bae37921..fffd99a4 100644 --- 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 index 050a7adf..db0ea150 100644 --- 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 index 95b4bde4..10abe2af 100644 --- 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 index 8b792b41..869d6f8e 100644 --- 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/frontend/src/shared/components/PageHeader.tsx b/frontend/src/shared/components/Title.tsx similarity index 64% rename from frontend/src/shared/components/PageHeader.tsx rename to frontend/src/shared/components/Title.tsx index d635b45f..8758bbb0 100644 --- a/frontend/src/shared/components/PageHeader.tsx +++ b/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 index b1dbc8ad..77c44948 100644 --- 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(