Adapt single dataset view to new model (#227)

Author: ac-jorellanaf

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "data-portal-ui",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "private": true,
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "~6.4.2",

package.json

@@ -26,11 +26,7 @@ const DatasetAccordion = (props: DataSetListProps) => {
     }
   };
 
-  if (
-    summary !== null &&
-    summary !== undefined &&
-    summaryMap.get(summary.accession) === null
-  ) {
+  if (summary && summaryMap.get(summary.accession) === null) {
     setSummaryMap(summaryMap.set(summary.accession, summary));
   }
 

src/components/browse/dataset/datasetAccordion/datasetAccordion.tsx

@@ -20,7 +20,7 @@ const DatasetFiles = (props: DataSetFilesProps) => {
           <p className="mb-0">
             <strong>File summary</strong>
           </p>
-          {props.files !== null ? (
+          {props.files ? (
             <div>
               <p className="mb-0">
                 <strong>{props.files.count}</strong> Files

src/components/browse/dataset/datasetAccordion/datasetSummary/datasetFiles.tsx

@@ -5,33 +5,30 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faBook } from "@fortawesome/free-solid-svg-icons";
 
 interface DataSetStudiesProps {
-  study: StudySummaryModel | null;
+  studies: StudySummaryModel | null;
 }
 
 /** Dataset summary section displays the studies of which the dataset is a part. */
 const DatasetStudies = (props: DataSetStudiesProps) => {
+  const stats = props.studies?.stats || { title: [], accession: [] };
   return (
     <DatasetDetailsLayout
       icon={<FontAwesomeIcon icon={faBook} />}
       content={
-        props.study !== null ? (
+        stats ? (
           <div>
             <p className="mb-0">
               <strong>Part of studies:&nbsp;</strong>
-              {props.study.stats.title !== null
-                ? props.study.stats.title.map((x) => (
-                    <span key={x}>{x}.&nbsp;</span>
-                  ))
-                : props.study.stats.accession.map((x) => (
-                    <span key={x}>{x}.&nbsp;</span>
-                  ))}
+              {stats.title
+                ? stats.title.map((x) => <span key={x}>{x}.&nbsp;</span>)
+                : stats.accession.map((x) => <span key={x}>{x}.&nbsp;</span>)}
             </p>
             <p className="mb-0">
               <strong>
                 Accession ID
-                {props.study.stats?.accession?.length > 1 ? "s" : ""}:
+                {stats.accession.length > 1 ? "s" : ""}:
               </strong>
-              {props.study.stats?.accession?.map((x) => (
+              {stats.accession.map((x) => (
                 <span className="mb-0 d-block" key={x}>
                   {x}
                 </span>

src/components/browse/dataset/datasetAccordion/datasetSummary/datasetStudies.tsx

@@ -26,16 +26,9 @@ const DatasetSummary = (props: DataSetDetailsProps) => {
   const handleClose = () => setShow(false);
 
   var dacFormLink: string | null = null;
-  /*if (props.details && props.details.has_data_access_policy.data_request_form) {
-    dacFormLink = props.details.has_data_access_policy.data_request_form;
-  }*/
 
   const handleOpen = () => {
-    setCopyEmail(
-      props.summary !== null && props.summary
-        ? props.summary.dac_email
-        : "[email protected]"
-    );
+    setCopyEmail(props.summary?.dac_email || "[email protected]");
     setShow(true);
   };
 
@@ -45,7 +38,7 @@ const DatasetSummary = (props: DataSetDetailsProps) => {
     <div className="fs-7">
       <div className="pe-0 px-0 px-md-2 pt-md-1">
         <div className="float-end ps-0 ps-md-4 ms-1">
-          {props.summary !== null && props.summary !== undefined ? (
+          {props.summary ? (
             <>
               <RequestAccessButton
                 accession={props.hit.content.accession}
@@ -112,11 +105,11 @@ const DatasetSummary = (props: DataSetDetailsProps) => {
             ))}
           </p>
         </div>
-        {props.summary !== null && props.summary !== undefined ? (
+        {props.summary ? (
           <div>
             <Row className="pt-3">
               <Col xs={12} md={6} lg={12} xl={6}>
-                <DatasetStudies study={props.summary.studies_summary} />
+                <DatasetStudies studies={props.summary.studies_summary} />
                 <DatasetSamples samples={props.summary.samples_summary} />
               </Col>
               <Col>

src/components/browse/dataset/datasetAccordion/datasetSummary/datasetSummary.tsx

@@ -36,30 +36,28 @@ const DatasetHeader = (props: DatasetHeaderProps) => {
     getData();
   }, []);
 
-  var listOfAllFacets: FacetModel[] | null = null;
-  if (searchResults !== null) {
-    if ((searchResults.hits && searchResults.hits.length > 0) || searchResults.count === -1) {
-      listOfAllFacets = searchResults.facets;
-    } else {
-      listOfAllFacets = [];
-    }
-  }
+  const listOfAllFacets: FacetModel[] =
+    searchResults &&
+    ((searchResults.hits && searchResults.hits.length > 0) ||
+      searchResults.count === -1)
+      ? searchResults.facets
+      : [];
 
   const getFilterParamsList = () => {
     let filterParamsList = [];
     let searchParams = props.searchParams.get("f");
-    if (searchParams !== undefined && searchParams !== null) {
+    if (searchParams) {
       let searchParamsList = searchParams.split(";");
       for (var item of searchParamsList) {
         const itemKey = item.split(":")[0];
         var itemPretty = itemKey + "|" + item.replace(":", ": ");
-        if (listOfAllFacets !== null) {
+        if (listOfAllFacets) {
           const findResult: FacetModel | undefined = listOfAllFacets.find(
             (x) => x.key === itemKey
           );
-          if (findResult !== undefined) {
+          if (findResult) {
             var facetName = findResult.name;
-            if (facetName !== undefined) {
+            if (facetName) {
               itemPretty =
                 findResult.key + "|" + facetName + ": " + item.split(":")[1];
             }

src/components/browse/dataset/datasetHeader.tsx

@@ -26,7 +26,7 @@ import { querySearchService } from "../../api/browse";
  */
 export const getFilterParams = (filterString: string | null) => {
   let facetFilterModelList: FacetFilterModel[] = [];
-  if (filterString != null) {
+  if (filterString) {
     let filterStringList = filterString.split(";");
     for (var item of filterStringList) {
       let filterItem: FacetFilterModel = {

src/components/browse/shared.ts

@@ -55,9 +55,8 @@ const SingleDatasetView = () => {
 
   const handleOpen = () => {
     setCopyEmail(
-      details !== null && details
-        ? details.data_access_policy.data_access_committee.email
-        : "[email protected]"
+      details?.data_access_policy?.data_access_committee?.email ||
+        "[email protected]"
     );
     setShow(true);
   };

src/components/browse/singleDatasetView/singleDatasetView.tsx

@@ -12,7 +12,7 @@ interface SingleDatasetViewAccordionProps {
 
 /** Section at the end of dataset details page consisting of three collapsible summary tables. */
 const SingleDatasetViewAccordion = (props: SingleDatasetViewAccordionProps) => {
-  const all_files = Object.keys(props.details)
+  const allFiles = Object.keys(props.details)
     .filter((key) => key.endsWith("_files"))
     .flatMap((key: string) => {
       const files = (props.details as any)[key];
@@ -21,12 +21,10 @@ const SingleDatasetViewAccordion = (props: SingleDatasetViewAccordionProps) => {
       return files.map((file: any) => ({ ...file, file_category }));
     });
 
-  const fileSize = all_files.reduce((a, c) => a + c.size, 0);
-
   let Tables: SDSVTableDefinition[] = [
     ExperimentsTable(props),
     SamplesTable(props),
-    FilesTable({ all_files }, fileSize),
+    FilesTable({ allFiles }),
   ];
 
   return (

src/components/browse/singleDatasetView/singleDatasetViewAccordion/singleDatasetViewAccordion.tsx

@@ -25,21 +25,17 @@ export const ExperimentsTable = (props: ExperimentsTableProps) => {
     order: 0,
   });
 
+  const experiments = props.details.sequencing_experiments || [];
+
   const experimentsTable: TableFields[] = [
     {
       header: "Experiment ID",
-      data:
-        props.details.sequencing_experiments !== undefined
-          ? props.details.sequencing_experiments?.map((x) => x.alias)
-          : [],
+      data: experiments.map((x) => x.alias),
       cssClasses: "w-25 text-wrap text-break",
     },
     {
       header: "Description",
-      data:
-        props.details.sequencing_experiments !== undefined
-          ? props.details.sequencing_experiments?.map((x) => x.description)
-          : [],
+      data: experiments?.map((x) => x.description),
       cssClasses: "text-wrap text-break",
     },
   ];
@@ -50,14 +46,9 @@ export const ExperimentsTable = (props: ExperimentsTableProps) => {
 
   const experimentsTableDef: SDSVTableDefinition = {
     table: experimentsTable,
-    buttonText:
-      props.details.sequencing_experiments !== null
-        ? "Experiment Summary (" +
-          (props.details.sequencing_experiments !== undefined
-            ? props.details.sequencing_experiments.length
-            : 0) +
-          " experiments)"
-        : "Experiment Summary",
+    buttonText: experiments
+      ? "Experiment Summary (" + experiments.length + " experiments)"
+      : "Experiment Summary (0 experiments)",
     sortDefinition: sortDefinition,
     setSortDefinition: setSortDefinition,
     sortedData: sortedData,

src/components/browse/singleDatasetView/singleDatasetViewAccordion/tables/experimentsTable.ts

@@ -6,17 +6,16 @@ import {
 } from "../../../../../utils/sortButton";
 
 interface FilesTableProps {
-  all_files: any[];
+  allFiles: any[];
 }
 
 /**
  * This function creates the schema for the file summary table,
  * which is one of three tables in the dataset details view.
  * @param props - Object containing the data and details.
- * @param fileSize - File size in bytes to be displayed on table
  * @returns The table definition object that includes table content, button text and definitions.
  */
-export const FilesTable = (props: FilesTableProps, fileSize: number) => {
+export const FilesTable = (props: FilesTableProps) => {
   const [sortDefinition, setSortDefinition] = useState<{
     key: number;
     order: number;
@@ -25,25 +24,27 @@ export const FilesTable = (props: FilesTableProps, fileSize: number) => {
     order: 0,
   });
 
+  const allFiles = props.allFiles || [];
+
   let filesTable: TableFields[] = [
     {
       header: "File ID",
-      data: props.all_files.map((x) => x.accession),
+      data: allFiles.map((x) => x.accession),
       cssClasses: "text-break",
     },
     {
       header: "File name",
-      data: props.all_files.map((x) => x.name),
+      data: allFiles.map((x) => x.name),
       cssClasses: "text-break",
     },
     {
       header: "File Type",
-      data: props.all_files.map((x) => x.format?.toUpperCase()),
+      data: allFiles.map((x) => x.format?.toUpperCase()),
       cssClasses: "",
     },
     {
       header: "File Origin",
-      data: props.all_files.map((x) => x.file_category),
+      data: allFiles.map((x) => x.file_category),
       cssClasses: "",
     },
   ];
@@ -54,10 +55,9 @@ export const FilesTable = (props: FilesTableProps, fileSize: number) => {
 
   const filesTableDef: SDSVTableDefinition = {
     table: filesTable,
-    buttonText:
-      props.all_files !== null
-        ? "File Summary (" + props.all_files.length + " files)"
-        : "File Summary",
+    buttonText: allFiles
+      ? "File Summary (" + allFiles.length + " files)"
+      : "File Summary (0 files)",
     sortDefinition: sortDefinition,
     setSortDefinition: setSortDefinition,
     sortedData: sortedData,

src/components/browse/singleDatasetView/singleDatasetViewAccordion/tables/filesTable.ts

@@ -25,36 +25,47 @@ export const SamplesTable = (props: SamplesTableProps) => {
     order: 0,
   });
 
+  const samples = props.details.samples || [];
+
   const samplesTable: TableFields[] = [
     {
       header: "Sample ID",
-      data: props.details.samples.map((x) => x.alias),
+      data: samples.map((x) => x.accession),
       cssClasses: "",
     },
     {
       header: "Description",
-      data: props.details.samples.map((x) => x.description),
+      data: samples.map((x) => x.description),
       cssClasses: "text-wrap text-break",
     },
     {
       header: "Status",
-      data: props.details.samples.map((x) => x.condition.case_control_status),
+      data: samples.map(
+        (x) => (x.case_control_status || "").toLowerCase() || "N/A"
+      ),
+      cssClasses: "text-capitalize",
+    },
+    {
+      header: "Sex",
+      data: samples.map((x) => (x.individual.sex || "").toLowerCase() || "N/A"),
       cssClasses: "text-capitalize",
     },
     {
       header: "Phenotype",
-      data: props.details.samples.map((x) =>
-        x.biospecimen.individual.phenotypic_features !== null
-          ? x.biospecimen.individual.phenotypic_features[0]
-          : "N/A"
+      data: samples.map(
+        (x) =>
+          (x.individual.phenotypic_features_terms || []).join(", ") || "N/A"
       ),
+      cssClasses: "text-wrap text-break",
+    },
+    {
+      header: "Biospecimen type",
+      data: samples.map((x) => x.biospecimen_type || "N/A"),
       cssClasses: "",
     },
     {
       header: "Tissue",
-      data: props.details.samples.map((x) =>
-        x.biospecimen !== null ? x.biospecimen.tissue : "N/A"
-      ),
+      data: samples.map((x) => x.biospecimen_tissue_term || "N/A"),
       cssClasses: "text-capitalize",
     },
   ];
@@ -65,10 +76,9 @@ export const SamplesTable = (props: SamplesTableProps) => {
 
   const samplesTableDef: SDSVTableDefinition = {
     table: samplesTable,
-    buttonText:
-      props.details.samples !== null
-        ? "Sample Summary (" + props.details.samples.length + " samples)"
-        : "Sample Summary",
+    buttonText: samples
+      ? "Sample Summary (" + samples.length + " samples)"
+      : "Sample Summary (0 samples)",
     sortDefinition: sortDefinition,
     setSortDefinition: setSortDefinition,
     sortedData: sortedData,