refact: drs individual overview

src/components/explorer/ExplorerIndividualContent.js

@@ -12,6 +12,7 @@ import {
   useIsDataEmpty,
   useDeduplicatedIndividualBiosamples,
   useIndividualResources,
+  useIndividualViewableExperimentResults,
   explorerIndividualUrl,
 } from "./utils";
 
@@ -28,6 +29,10 @@ import IndividualInterpretations from "./IndividualInterpretations";
 import IndividualMedicalActions from "./IndividualMedicalActions";
 import IndividualMeasurements from "./IndividualMeasurements";
 
+import { useAppDispatch } from "@/store";
+import { getFileDownloadUrlsFromDrs, getIgvUrlsFromDrs } from "@/modules/drs/actions";
+import { guessFileType } from "@/utils/files";
+
 const MENU_STYLE = {
   marginLeft: "-24px",
   marginRight: "-24px",
@@ -62,6 +67,33 @@ const ExplorerIndividualContent = () => {
   const resourcesTuple = useIndividualResources(individual);
   const individualContext = useMemo(() => ({ individualID, resourcesTuple }), [individualID, resourcesTuple]);
 
+  const dispatch = useAppDispatch();
+
+  const biosamplesData = useDeduplicatedIndividualBiosamples(individual);
+
+  const allExperimentResults = useMemo(
+    () => biosamplesData.flatMap((b) => (b?.experiments ?? []).flatMap((e) => e?.experiment_results ?? [])),
+    [biosamplesData],
+  );
+
+  const viewableExperimentResultsForIgv = useIndividualViewableExperimentResults(individual);
+
+  useEffect(() => {
+    if (allExperimentResults.length > 0) {
+      const downloadableFiles = allExperimentResults.map((r) => ({
+        ...r,
+        file_format: r.file_format ?? guessFileType(r.filename),
+      }));
+      dispatch(getFileDownloadUrlsFromDrs(downloadableFiles)).catch(console.error);
+    }
+  }, [dispatch, allExperimentResults]);
+
+  useEffect(() => {
+    if (viewableExperimentResultsForIgv.length > 0) {
+      dispatch(getIgvUrlsFromDrs(viewableExperimentResultsForIgv)).catch(console.error);
+    }
+  }, [dispatch, viewableExperimentResultsForIgv]);
+
   const individualUrl = explorerIndividualUrl(individualID);
 
   const overviewPath = "overview";

src/components/explorer/IndividualExperiments.js

@@ -12,9 +12,7 @@ import {
   individualPropTypesShape,
   ontologyShape,
 } from "@/propTypes";
-import { getFileDownloadUrlsFromDrs } from "@/modules/drs/actions";
-import { useAppDispatch, useAppSelector } from "@/store";
-import { guessFileType } from "@/utils/files";
+import { useAppSelector } from "@/store";
 
 import { useDeduplicatedIndividualBiosamples } from "./utils";
 import { VIEWABLE_FILE_EXTENSIONS } from "@/components/display/FileDisplay";
@@ -305,8 +303,6 @@ const EXPERIMENT_COLUMNS = [
 ];
 
 const Experiments = ({ individual, handleExperimentClick }) => {
-  const dispatch = useAppDispatch();
-
   const { selectedExperiment } = useParams();
 
   useEffect(() => {
@@ -325,20 +321,6 @@ const Experiments = ({ individual, handleExperimentClick }) => {
   const biosamplesData = useDeduplicatedIndividualBiosamples(individual);
   const experimentsData = useMemo(() => biosamplesData.flatMap((b) => b?.experiments ?? []), [biosamplesData]);
 
-  useEffect(() => {
-    // retrieve any download urls if experiments data changes
-
-    const downloadableFiles = experimentsData
-      .flatMap((e) => e?.experiment_results ?? [])
-      .map((r) => ({
-        // enforce file_format property
-        ...r,
-        file_format: r.file_format ?? guessFileType(r.filename),
-      }));
-
-    dispatch(getFileDownloadUrlsFromDrs(downloadableFiles)).catch(console.error);
-  }, [dispatch, experimentsData]);
-
   return (
     <RoutedIndividualContentTable
       data={experimentsData}

src/components/explorer/IndividualTracks.js

@@ -11,7 +11,6 @@ import { SettingOutlined } from "@ant-design/icons";
 
 import { BENTO_PUBLIC_URL, BENTO_URL } from "@/config";
 import { individualPropTypesShape } from "@/propTypes";
-import { getIgvUrlsFromDrs } from "@/modules/drs/actions";
 import { setIgvPosition } from "@/modules/explorer/actions";
 import { useIgvGenomes } from "@/modules/explorer/hooks";
 import { useReferenceGenomes } from "@/modules/reference/hooks";
@@ -151,6 +150,7 @@ const IGV_JS_ANNOTATION_ALIASES = {
 const IndividualTracks = ({ individual }) => {
   const accessToken = useAccessToken();
 
+  const dispatch = useAppDispatch();
   const igvDivRef = useRef();
   const igvBrowserRef = useRef(null);
   const [creatingIgvBrowser, setCreatingIgvBrowser] = useState(false);
@@ -163,8 +163,6 @@ const IndividualTracks = ({ individual }) => {
     () => true, // We don't want to re-render anything when the position changes
   );
 
-  const dispatch = useAppDispatch();
-
   const referenceService = useService("reference");
   // Built-in igv.js genomes (with annotations):
   const { hasAttempted: igvGenomesAttempted, itemsByID: igvGenomesByID } = useIgvGenomes();
@@ -293,17 +291,6 @@ const IndividualTracks = ({ individual }) => {
     [dispatch],
   );
 
-  // retrieve urls on mount
-  useEffect(() => {
-    if (allTracks.length) {
-      // don't search if all urls already known
-      if (hasFreshUrls(allTracks, igvUrls)) {
-        return;
-      }
-      dispatch(getIgvUrlsFromDrs(allTracks)).catch(console.error);
-    }
-  }, [dispatch, allTracks, igvUrls]);
-
   // update access token whenever necessary
   useEffect(() => {
     if (BENTO_URL) {

src/components/explorer/utils.js

@@ -1,6 +1,9 @@
 import { useEffect, useMemo } from "react";
 import { fetchDatasetResourcesIfNecessary } from "@/modules/datasets/actions";
 import { useAppDispatch, useAppSelector } from "@/store";
+import { guessFileType } from "@/utils/files";
+
+const VIEWABLE_FORMATS_LOWER = ["bam", "cram", "bigbed", "maf", "bigwig", "vcf", "gvcf"];
 
 export const useDeduplicatedIndividualBiosamples = (individual) =>
   useMemo(
@@ -136,3 +139,26 @@ export const ontologyTermSorter = (k) => (a, b) => {
 };
 
 export const explorerIndividualUrl = (individualID) => `/data/explorer/individuals/${individualID}`;
+
+export const useIndividualViewableExperimentResults = (individual) => {
+  const biosamplesData = useDeduplicatedIndividualBiosamples(individual);
+  return useMemo(() => {
+    const experiments = biosamplesData.flatMap((b) => b?.experiments ?? []);
+    const vr = Object.values(
+      Object.fromEntries(
+        experiments
+          .flatMap((e) => e?.experiment_results ?? [])
+          .filter(
+            (expRes) =>
+              !!expRes.genome_assembly_id &&
+              VIEWABLE_FORMATS_LOWER.includes(expRes.file_format?.toLowerCase() ?? guessFileType(expRes.filename)),
+          )
+          .map((expRes) => {
+            const fileFormatLower = expRes.file_format?.toLowerCase() ?? guessFileType(expRes.filename);
+            return [expRes.filename, { ...expRes, fileFormatLower }];
+          }),
+      ),
+    ).sort((r1, r2) => (r1.fileFormatLower ?? "").localeCompare(r2.fileFormatLower ?? ""));
+    return vr;
+  }, [biosamplesData]);
+};