Filter SampleMetadata and Tempo fields on Samples page via tabs (#139)

* Group SampleMetadata and Tempo fields under parent columns * Remove parent columns and add view tabs to Samples page * Make the Samples tabs a UI input to the generic SamplesList component * Add activeness indicator to the Samples tabs * Update Sample tabs and add a info tooltip
mskcc · Jun 25, 2024 · ad1daf3 · ad1daf3
1 parent 2b215af
commit ad1daf3
Show file tree

Hide file tree

Showing 5 changed files with 79 additions and 41 deletions.
diff --git a/frontend/src/components/RecordsList.tsx b/frontend/src/components/RecordsList.tsx
@@ -276,7 +276,7 @@ export default function RecordsList({
               })`
         }`}
         handleDownload={handleDownload}
-        customUI={customToolbarUI}
+        customUIRight={customToolbarUI}
       />
 
       <AutoSizer>

diff --git a/frontend/src/components/SamplesList.tsx b/frontend/src/components/SamplesList.tsx
@@ -47,6 +47,7 @@ interface ISampleListProps {
   sampleKeyForUpdate?: keyof Sample;
   userEmail?: string | null;
   setUserEmail?: Dispatch<SetStateAction<string | null>>;
+  customToolbarUI?: JSX.Element;
 }
 
 export default function SamplesList({
@@ -59,6 +60,7 @@ export default function SamplesList({
   sampleKeyForUpdate = "hasMetadataSampleMetadata",
   userEmail,
   setUserEmail,
+  customToolbarUI,
 }: ISampleListProps) {
   const { loading, error, data, startPolling, stopPolling, refetch } =
     useFindSamplesByInputValueQuery({
@@ -290,20 +292,18 @@ export default function SamplesList({
             : `${rowCount} matching samples`
         }
         handleDownload={() => setShowDownloadModal(true)}
-        customUI={
+        customUILeft={customToolbarUI}
+        customUIRight={
           changes.length > 0 ? (
             <>
-              <Col className={"text-end"}>
+              <Col md="auto">
                 <Button
                   className={"btn btn-secondary"}
                   onClick={handleDiscardChanges}
                   size={"sm"}
                 >
                   Discard Changes
-                </Button>
-              </Col>
-
-              <Col className={"text-start"}>
+                </Button>{" "}
                 <Button
                   className={"btn btn-success"}
                   disabled={alertContent === costCenterAlertContent}

diff --git a/frontend/src/pages/samples/SamplesPage.tsx b/frontend/src/pages/samples/SamplesPage.tsx
@@ -1,20 +1,27 @@
 import { PageHeader } from "../../shared/components/PageHeader";
 import SamplesList from "../../components/SamplesList";
 import {
+  ReadOnlyCohortSampleDetailsColumns,
   cohortSampleFilterWhereVariables,
   combinedSampleDetailsColumns,
   prepareCombinedSampleDataForAgGrid,
   sampleFilterWhereVariables,
 } from "../../shared/helpers";
 import { SampleWhere } from "../../generated/graphql";
+import { useState } from "react";
+import { Button } from "react-bootstrap";
+import _ from "lodash";
+import { InfoToolTip } from "../../shared/components/InfoToolTip";
 
 export default function SamplesPage() {
+  const [columnDefs, setColumnDefs] = useState(combinedSampleDetailsColumns);
+
   return (
     <>
       <PageHeader dataName={"samples"} />
 
       <SamplesList
-        columnDefs={combinedSampleDetailsColumns}
+        columnDefs={columnDefs}
         prepareDataForAgGrid={prepareCombinedSampleDataForAgGrid}
         refetchWhereVariables={(parsedSearchVals) => {
           return {
@@ -25,6 +32,35 @@ export default function SamplesPage() {
             }),
           } as SampleWhere;
         }}
+        customToolbarUI={
+          <>
+            <InfoToolTip>
+              These tabs change the fields displayed in the table below. "View
+              All" shows all fields, including both SampleMetadata and Tempo
+              fields.
+            </InfoToolTip>{" "}
+            <Button
+              onClick={() => {
+                setColumnDefs(combinedSampleDetailsColumns);
+              }}
+              size="sm"
+              variant="outline-secondary"
+              active={_.isEqual(columnDefs, combinedSampleDetailsColumns)}
+            >
+              View all
+            </Button>{" "}
+            <Button
+              onClick={() => {
+                setColumnDefs(ReadOnlyCohortSampleDetailsColumns);
+              }}
+              size="sm"
+              variant="outline-secondary"
+              active={_.isEqual(columnDefs, ReadOnlyCohortSampleDetailsColumns)}
+            >
+              Tempo fields
+            </Button>
+          </>
+        }
       />
     </>
   );

diff --git a/frontend/src/shared/components/InfoToolTip.tsx b/frontend/src/shared/components/InfoToolTip.tsx
@@ -0,0 +1,10 @@
+import { Tooltip } from "@material-ui/core";
+import InfoIcon from "@material-ui/icons/InfoOutlined";
+
+export function InfoToolTip({ children }: { children: React.ReactNode }) {
+  return (
+    <Tooltip title={<span style={{ fontSize: 12 }}>{children}</span>}>
+      <InfoIcon style={{ fontSize: 18, color: "grey" }} />
+    </Tooltip>
+  );
+}
diff --git a/frontend/src/shared/tableElements.tsx b/frontend/src/shared/tableElements.tsx
@@ -2,10 +2,9 @@ import { ApolloError } from "@apollo/client";
 import classNames from "classnames";
 import { Button, Col, Form, Row } from "react-bootstrap";
 import Spinner from "react-spinkit";
-import InfoIcon from "@material-ui/icons/InfoOutlined";
-import { Tooltip } from "@material-ui/core";
 import { DataName } from "./types";
 import { Dispatch, SetStateAction } from "react";
+import { InfoToolTip } from "./components/InfoToolTip";
 
 export function LoadingSpinner() {
   return (
@@ -23,6 +22,18 @@ export function ErrorMessage({ error }: { error: ApolloError }) {
   );
 }
 
+interface IToolbarProps {
+  dataName: DataName;
+  userSearchVal: string;
+  setUserSearchVal: Dispatch<SetStateAction<string>>;
+  handleSearch: () => void;
+  clearUserSearchVal: () => void;
+  matchingResultsCount: string;
+  handleDownload: () => void;
+  customUILeft?: JSX.Element;
+  customUIRight?: JSX.Element;
+}
+
 export function Toolbar({
   dataName,
   userSearchVal,
@@ -31,24 +42,12 @@ export function Toolbar({
   clearUserSearchVal,
   matchingResultsCount,
   handleDownload,
-  customUI,
-}: {
-  dataName: DataName;
-  userSearchVal: string;
-  setUserSearchVal: Dispatch<SetStateAction<string>>;
-  handleSearch: () => void;
-  clearUserSearchVal: () => void;
-  matchingResultsCount: string;
-  handleDownload: () => void;
-  customUI?: JSX.Element;
-}) {
+  customUILeft,
+  customUIRight,
+}: IToolbarProps) {
   return (
-    <Row
-      className={classNames(
-        "d-flex justify-content-between align-items-center tableControlsRow"
-      )}
-    >
-      <Col></Col>
+    <Row className={classNames("d-flex align-items-center tableControlsRow")}>
+      <Col>{customUILeft}</Col>
 
       <Col md="auto">
         <Form.Control
@@ -74,18 +73,11 @@ export function Toolbar({
       </Col>
 
       <Col md="auto" style={{ marginLeft: -15 }}>
-        <Tooltip
-          title={
-            <span style={{ fontSize: 12 }}>
-              After inputting your search query, click on &quot;Search&quot; or
-              press &quot;Enter&quot; to get your results. To bulk search, input
-              a list of values separated by spaces or commas (e.g. &quot;value1
-              value2 value3&quot;)
-            </span>
-          }
-        >
-          <InfoIcon style={{ fontSize: 18, color: "grey" }} />
-        </Tooltip>
+        <InfoToolTip>
+          After inputting your search query, click on "Search" or press "Enter"
+          to get your results. To bulk search, input a list of values separated
+          by spaces or commas (e.g. "value1 value2 value3")
+        </InfoToolTip>
       </Col>
 
       <Col md="auto" style={{ marginLeft: -15 }}>
@@ -100,11 +92,11 @@ export function Toolbar({
 
       <Col md="auto">{matchingResultsCount}</Col>
 
-      {customUI}
+      {customUIRight}
 
       <Col className={"text-end"}>
         <Button onClick={handleDownload} size={"sm"}>
-          Generate Report
+          Generate report
         </Button>
       </Col>
     </Row>