[CORE-654] Allow filtering variants in IGV (#5420)

Co-authored-by: Eric Weitz <[email protected]>
Co-authored-by: Eric Weitz <[email protected]>

Author: calypsomatic

.pnp.cjs

@@ -62,6 +62,7 @@
     "react-textarea-autosize": "^8.5.2",
     "react-transition-group": "^4.4.5",
     "react-virtualized": "patch:react-virtualized@npm:^9.22.5#./.yarn/patches/react-virtualized-9.22.5.patch",
+    "simple-statistics": "^7.8.8",
     "use-memo-one": "^1.1.3",
     "uuid": "^8.3.2",
     "validate.js": "^0.13.1"

.yarn/cache/simple-statistics-npm-7.8.8-dcf5f873b9-8f98a857bc.zip

@@ -1,11 +1,12 @@
 import * as clipboard from 'clipboard-polyfill/text';
+import debounce from 'lodash/debounce';
 import _ from 'lodash/fp';
-import { Fragment, useRef, useState } from 'react';
+import { Fragment, useCallback, useEffect, useRef, useState } from 'react';
 import { div, h } from 'react-hyperscript-helpers';
 import { ButtonOutline, Link } from 'src/components/common';
 import { getUserProjectForWorkspace, parseGsUri } from 'src/components/data/data-utils';
 import { centeredSpinner, icon } from 'src/components/icons';
-import IGVAddTrackModal from 'src/components/IGVAddTrackModal';
+import IGVAddTrackModal from 'src/components/igv/IGVAddTrackModal';
 import { GoogleStorage, saToken } from 'src/libs/ajax/GoogleStorage';
 import colors from 'src/libs/colors';
 import { reportError, withErrorReporting } from 'src/libs/error';
@@ -16,9 +17,14 @@ import { knownBucketRequesterPaysStatuses, requesterPaysProjectStore } from 'src
 import * as Utils from 'src/libs/utils';
 import { RequesterPaysModal } from 'src/workspaces/common/requester-pays/RequesterPaysModal';
 
+import { buildFilter } from './IGVFilter';
 import IGVSessionModal from './IGVSessionModal';
 import { updateUrlWithSession, useIGVSessions } from './useIGVSessions';
 
+function getHasVariantFiles(files) {
+  return files.some((file) => file.filePath.includes('.vcf'));
+}
+
 function processUrl(url, isSignedUrl) {
   if (url && isGoogleURL(url) && isGoogleStorageURL(url) && isSignedUrl) {
     return translateGoogleCloudURL(url);
@@ -27,19 +33,195 @@ function processUrl(url, isSignedUrl) {
 }
 
 // format for selectedFiles prop: [{ filePath, indexFilePath, isSignedUrl } }]
-const IGVBrowser = ({ selectedFiles, refGenome: { genome, reference }, workspace, onDismiss, initialSession }) => {
+const IGVBrowser = ({ selectedFiles, refGenome: { genome, reference }, workspace, onDismiss, initialSession, onFilterPanelChange }) => {
   const [loadingIgv, setLoadingIgv] = useState(true);
   const [requesterPaysModal, setRequesterPaysModal] = useState(null);
   const [showAddTrackModal, setShowAddTrackModal] = useState(false);
   const [showSessionModal, setShowSessionModal] = useState(false);
   const [sessionAction, setSessionAction] = useState(null); // 'save' or 'load'
   const [sharingSession, setSharingSession] = useState(false);
+  const [filterPanelData, setFilterPanelData] = useState(null);
+  const currentFilterFunction = useRef(null);
+  const [tracksLoaded, setTracksLoaded] = useState(false);
+  const filterPanelDataRef = useRef(null); // Track current panel data
+
+  useEffect(() => {
+    filterPanelDataRef.current = filterPanelData;
+  }, [filterPanelData]);
+
+  const findVariantTrack = useCallback(() => {
+    if (!igvBrowser.current) return null;
+
+    for (const trackView of igvBrowser.current.trackViews) {
+      const track = trackView.track;
+
+      if (track.type?.toLowerCase() === 'variant' || track.format?.toLowerCase() === 'vcf' || track?.url?.toLowerCase().includes('.vcf')) {
+        return track;
+      }
+    }
+
+    return null;
+  }, []);
+
+  // When the user changes a filter, update the filter function on the variant track and refresh the view
+  const handleFilterChange = useCallback(
+    (selections, facets) => {
+      if (!igvBrowser.current) return;
+
+      const filterFunction = buildFilter(selections, facets);
+      currentFilterFunction.current = filterFunction;
+
+      const trackToFilter = findVariantTrack();
+
+      if (trackToFilter) {
+        trackToFilter.filter = filterFunction;
+
+        // Try to refresh the track view
+        const trackView = igvBrowser.current.trackViews.find((tv) => tv.track === trackToFilter);
+        if (trackView) {
+          trackView.repaintViews();
+        }
+      } else {
+        console.error('No variant track found for filtering');
+      }
+    },
+    [findVariantTrack]
+  );
+
+  // When the locus changes, either by moving to a different chromosome or zooming in,
+  // update the filter panel with the new features in view
+  // This triggers reinitialization of the filter panel with the new features
+  const debouncedHandleLocusChange = useRef(
+    debounce(() => {
+      const currentPanelData = filterPanelDataRef.current;
+
+      if (currentPanelData?.show) {
+        const trackToFilter = findVariantTrack();
+
+        if (trackToFilter && onFilterPanelChange) {
+          onFilterPanelChange({
+            ...currentPanelData,
+            isLoading: true,
+          });
+
+          let attempts = 0;
+          const maxAttempts = 20;
+
+          const checkFeaturesLoaded = () => {
+            const features = trackToFilter.getInViewFeatures();
+            attempts++;
+
+            if (features.length > 0 || attempts >= maxAttempts) {
+              const updatedPanelData = {
+                ...currentPanelData,
+                trackToFilter,
+                isInitialized: false,
+                currentFacets: [],
+                currentSelections: {},
+                isLoading: false,
+              };
+
+              setFilterPanelData(updatedPanelData);
+              onFilterPanelChange(updatedPanelData);
+            } else {
+              setTimeout(checkFeaturesLoaded, 100);
+            }
+          };
+
+          setTimeout(checkFeaturesLoaded, 100);
+        }
+      }
+    }, 500) // Wait 500ms after the last locus change
+  ).current;
+
+  const handleLocusChange = useCallback(() => {
+    debouncedHandleLocusChange();
+  }, [debouncedHandleLocusChange]);
+
+  // Cleanup debounced function on unmount
+  useEffect(() => {
+    return () => {
+      debouncedHandleLocusChange.cancel();
+    };
+  }, [debouncedHandleLocusChange]);
+
+  // When the filter panel is opened or closed, notify the parent component to remove/add it from the screen
+  // When closing, save the data in state so we can reuse it if reopening
+  const toggleFilterPanel = useCallback(
+    (show) => {
+      if (!onFilterPanelChange) return;
+
+      if (show) {
+        if (!igvBrowser.current) return;
+
+        const trackToFilter = findVariantTrack();
+        if (!trackToFilter) return;
+
+        const currentPanelData = filterPanelDataRef.current;
+
+        // If we already have filter panel data (reopening), reuse it
+        if (currentPanelData && !currentPanelData.show) {
+          const updatedPanelData = {
+            ...currentPanelData,
+            show: true,
+            trackToFilter,
+          };
+          setFilterPanelData(updatedPanelData);
+          onFilterPanelChange(updatedPanelData);
+          return;
+        }
+
+        // First time opening - create new panel data
+        const panelData = {
+          show: true,
+          trackToFilter,
+          onFilterChange: handleFilterChange,
+          onFacetsUpdate: (facets, selections) => {
+            setFilterPanelData((prev) => ({
+              ...prev,
+              currentFacets: facets,
+              currentSelections: selections,
+            }));
+          },
+          onClose: () => toggleFilterPanel(false),
+          currentSelections: {},
+          currentFacets: [],
+          isInitialized: false,
+          setIsInitialized: (value) => {
+            setFilterPanelData((prev) => (prev ? { ...prev, isInitialized: value } : null));
+          },
+          isLoading: false,
+        };
+
+        setFilterPanelData(panelData);
+        onFilterPanelChange(panelData);
+      } else {
+        // Closing - keep filterPanelData in state, just hide the panel
+        const currentPanelData = filterPanelDataRef.current;
+        if (currentPanelData) {
+          const hiddenPanelData = {
+            ...currentPanelData,
+            show: false,
+          };
+          setFilterPanelData(hiddenPanelData);
+        }
+        onFilterPanelChange({ show: false });
+      }
+    },
+    [handleFilterChange, onFilterPanelChange, findVariantTrack]
+  );
+
+  const handleDismiss = useCallback(() => {
+    setFilterPanelData(null); // Clear all filter state when IGV closes
+    onDismiss();
+  }, [onDismiss]);
 
   const containerRef = useRef();
   const igvLibrary = useRef();
   const igvBrowser = useRef();
   const signal = useCancellation();
 
+  const hasVariantFiles = getHasVariantFiles(selectedFiles);
   const hasSignedUrl = selectedFiles.some((file) => file.isSignedUrl);
 
   const {
@@ -106,29 +288,34 @@ const IGVBrowser = ({ selectedFiles, refGenome: { genome, reference }, workspace
       }
     }
 
-    _.forEach(({ name, url, indexURL, isSignedUrl }) => {
+    const loadTrackPromises = tracks.map(({ name, url, indexURL, isSignedUrl }) => {
       const [bucket] = parseGsUri(url);
       const userProjectParam = { userProject: knownBucketRequesterPaysStatuses.get()[bucket] ? userProject : undefined };
 
       // Omit residual URL parameters from access URLs resolved via DRS Hub
-      const simpleUrl = _.last(url.split('/')).split('?')[0];
+      const simpleUrl = url.split('/').at(-1).split('?')[0];
 
       const fullUrl = isSignedUrl ? url : Utils.mergeQueryParams(userProjectParam, url);
       const fullIndexUrl = isSignedUrl ? indexURL : indexURL && Utils.mergeQueryParams(userProjectParam, indexURL);
 
-      // Enable viewing features upon searching most genes, without needing to zoom several times
-      const visibilityWindow = 75_000;
+      // Enable viewing variants for a handful of genes (or a few CNVs), simultaneously;
+      // or enable viewing other features (e.g. reads) for almost any gene, without zoom
+      const isVcf = getHasVariantFiles([{ filePath: url }]);
+      const visibilityWindow = isVcf ? 500_000 : 75_000;
 
       const igvProcessedFullUrl = processUrl(fullUrl, isSignedUrl);
       const igvProcessedFullIndexUrl = processUrl(fullIndexUrl, isSignedUrl);
 
-      igvBrowser.current.loadTrack({
+      return igvBrowser.current.loadTrack({
         name: name || `${simpleUrl} (${url})`,
         url: igvProcessedFullUrl,
         indexURL: indexURL ? igvProcessedFullIndexUrl : undefined,
         visibilityWindow,
       });
-    }, tracks);
+    });
+
+    await Promise.all(loadTrackPromises);
+    setTracksLoaded(true);
   });
 
   const saveSession = async (sessionName) => {
@@ -195,6 +382,10 @@ const IGVBrowser = ({ selectedFiles, refGenome: { genome, reference }, workspace
 
         igv.setGoogleOauthToken(() => saToken(workspace.workspace.googleProject));
         igvBrowser.current = await igv.createBrowser(containerRef.current, options);
+        window.igvBrowser = igvBrowser.current;
+        // Update the facet widgets on locus change.  Changing the locus changes the features in view.  This can be
+        // relatively frequent,  many times a second if dragging the track.
+        igvBrowser.current.on('locuschange', handleLocusChange);
 
         const initialTracks = _.map(({ filePath, indexFilePath, isSignedUrl }) => {
           return { url: filePath, indexURL: indexFilePath, isSignedUrl };
@@ -214,12 +405,25 @@ const IGVBrowser = ({ selectedFiles, refGenome: { genome, reference }, workspace
 
     igvSetup();
 
-    return () => !!igvLibrary.current && igvLibrary.current.removeAllBrowsers();
+    return () => {
+      if (igvLibrary.current) {
+        // Remove event listeners before cleanup
+        igvLibrary.current.removeAllBrowsers();
+      }
+    };
   });
 
   return h(Fragment, [
     div({ style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '0.5rem 0.5rem 0' } }, [
-      h(Link, { onClick: onDismiss }, [icon('arrowLeft', { style: { marginRight: '1ch' } }), 'Back to data table']),
+      h(
+        Link,
+        {
+          onClick: () => {
+            handleDismiss();
+          },
+        },
+        [icon('arrowLeft', { style: { marginRight: '1ch' } }), 'Back to data table']
+      ),
       div({ style: { display: 'flex', gap: '0.5rem' } }, [
         h(
           ButtonOutline,
@@ -261,13 +465,26 @@ const IGVBrowser = ({ selectedFiles, refGenome: { genome, reference }, workspace
           },
           ['Add track']
         ),
+        hasVariantFiles
+          ? h(
+              ButtonOutline,
+              {
+                disabled: loadingIgv || !tracksLoaded,
+                onClick: () => {
+                  toggleFilterPanel(true);
+                },
+                style: { marginRight: '5px' },
+              },
+              ['Filter variants']
+            )
+          : null,
       ]),
     ]),
     div(
       {
         ref: containerRef,
         style: {
-          overflowY: 'auto',
+          overflowY: 'visible',
           padding: '10px 0',
           margin: 8,
           border: `1px solid ${colors.dark(0.25)}`,
@@ -284,7 +501,6 @@ const IGVBrowser = ({ selectedFiles, refGenome: { genome, reference }, workspace
           addTracks([track]);
         },
       }),
-
     showSessionModal &&
       h(IGVSessionModal, {
         action: sessionAction,