Gene Tea Terms Modal Copy Genes Button (#516)

Author: alimourey

frontend/packages/portal-frontend/src/geneTea/components/TopTermsTab/FindGenesMatchingTerm/Modal/CopyListButton/CopyListButton.scss

@@ -0,0 +1,17 @@
+.CopyListButton {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+
+  .copyButton {
+    cursor: pointer;
+  }
+
+  .successMessage {
+    color: #2e7d32;
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+    font-weight: 500;
+  }
+}

frontend/packages/portal-frontend/src/geneTea/components/TopTermsTab/FindGenesMatchingTerm/Modal/CopyListButton/CopyListButton.tsx

@@ -0,0 +1,69 @@
+import React, { useState } from "react";
+import { Button } from "react-bootstrap";
+import styles from "./CopyListButton.scss";
+
+interface CopyButtonProps {
+  items: string[];
+  title: string;
+  disabled: boolean;
+}
+
+const CopyListButton: React.FC<CopyButtonProps> = ({
+  items,
+  title,
+  disabled,
+}) => {
+  const [showSuccess, setShowSuccess] = useState(false);
+
+  const handleCopy = async () => {
+    try {
+      const listString = items.join(",");
+      await navigator.clipboard.writeText(listString);
+
+      // Show success message
+      setShowSuccess(true);
+
+      // Hide message after 3 seconds
+      setTimeout(() => {
+        setShowSuccess(false);
+      }, 3000);
+    } catch (err) {
+      console.error("Failed to copy: ", err);
+    }
+  };
+
+  return (
+    <div className={styles.CopyListButton}>
+      <Button
+        onClick={handleCopy}
+        bsStyle={"secondary"}
+        className={styles.copyButton}
+        disabled={disabled}
+      >
+        {title}
+      </Button>
+
+      {showSuccess && (
+        <span className={styles.successMessage}>
+          {/* Green Check Mark SVG */}
+          <svg
+            width="18"
+            height="18"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="3"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            style={{ marginRight: "4px" }}
+          >
+            <polyline points="20 6 9 17 4 12" />
+          </svg>
+          Copied genes to clipboard!
+        </span>
+      )}
+    </div>
+  );
+};
+
+export default CopyListButton;

frontend/packages/portal-frontend/src/geneTea/components/TopTermsTab/FindGenesMatchingTerm/Modal/ExcerptTable/ExcerptTable.tsx

@@ -1,10 +1,12 @@
-import React from "react";
+import React, { useMemo } from "react";
 import { Spinner } from "@depmap/common-components";
 import GeneTeaTerm from "@depmap/data-explorer-2/src/components/DataExplorerPage/components/plot/integrations/GeneTea/GeneTeaTerm";
 import { Alert, Button } from "react-bootstrap";
 import { useExcerptData } from "../../../../../hooks/useExcerptData";
 import PaginationControls from "./PaginationControls";
 import styles from "../../../../../styles/GeneTea.scss";
+import CopyListButton from "../CopyListButton/CopyListButton";
+import { useFetchGeneList } from "src/geneTea/hooks/useFetchGeneList";
 
 interface ExcerptTableProps {
   useTerms: boolean;
@@ -19,8 +21,12 @@ const ExcerptTable: React.FC<ExcerptTableProps> = ({
   termToMatchingGenesMap,
   useAllGenes,
 }: ExcerptTableProps) => {
+  const termToMatchingGenesObj = useMemo(() => {
+    return Object.fromEntries(termToMatchingGenesMap);
+  }, [termToMatchingGenesMap]);
+
   const {
-    isLoading,
+    isLoading: isDataLoading,
     error,
     pageData,
     totalPages,
@@ -32,8 +38,15 @@ const ExcerptTable: React.FC<ExcerptTableProps> = ({
     pageSize,
   } = useExcerptData(term, termToMatchingGenesMap, useAllGenes);
 
-  const isContentReady = pageData && !error && !isLoading;
-  const isTableVisible = isContentReady && Object.keys(pageData!).length > 0;
+  const { geneList, isLoading: isListLoading } = useFetchGeneList(
+    useTerms,
+    term,
+    [term],
+    termToMatchingGenesObj,
+    useAllGenes
+  );
+
+  const isLoading = isDataLoading || isListLoading;
 
   const renderTableBody = () => {
     if (!pageData) return null;
@@ -76,10 +89,17 @@ const ExcerptTable: React.FC<ExcerptTableProps> = ({
           <Button
             bsStyle="primary"
             bsSize="small"
+            disabled={isLoading}
             onClick={handleClickCreateTermContext}
           >
-            Save Term as Gene Context
+            {isLoading ? "Loading..." : "Save Term as Gene Context"}
           </Button>
+          <CopyListButton
+            key="excerpt-table-copy-button"
+            items={geneList}
+            title={"Copy Gene List"}
+            disabled={isLoading || geneList.length === 0}
+          />
         </div>
       )}
 
@@ -90,7 +110,7 @@ const ExcerptTable: React.FC<ExcerptTableProps> = ({
             <th>Excerpt</th>
           </tr>
         </thead>
-        {isTableVisible && renderTableBody()}
+        {renderTableBody()}
       </table>
 
       {isLoading && (

frontend/packages/portal-frontend/src/geneTea/components/TopTermsTab/FindGenesMatchingTerm/Modal/MatchingTermsModal.tsx

@@ -5,6 +5,8 @@ import styles from "../../../../styles/GeneTea.scss";
 import ExcerptTable from "./ExcerptTable/ExcerptTable";
 import TermGroupTabs from "./TermGroupTabs";
 import { useGeneContextCreation } from "../../../../hooks/useCreateGeneContext";
+import CopyListButton from "./CopyListButton/CopyListButton";
+import { useFetchGeneList } from "src/geneTea/hooks/useFetchGeneList";
 
 interface Props {
   termOrTermGroup: string;
@@ -25,28 +27,34 @@ function MatchingTermsModal({
 }: Props) {
   const [show, setShow] = useState(true);
 
-  const handleContextSaveComplete = useCallback(() => setShow(true), []);
+  const termToMatchingGenesObj = useMemo(() => {
+    return Object.fromEntries(termToMatchingGenesMap);
+  }, [termToMatchingGenesMap]);
 
-  // --- 1. SINGLE TERM CONTEXT CREATION ---
-  const handleClickCreateTermContext = useGeneContextCreation({
-    name: termOrTermGroup,
-    terms: useTerms ? [termOrTermGroup] : [],
-    termToMatchingGenesMap,
-    useAllGenes,
-    onComplete: handleContextSaveComplete,
-  });
+  const termsKey = useMemo(() => {
+    const terms = useTerms ? [termOrTermGroup] : termsWithinSelectedGroup || [];
+    return terms.join(",");
+  }, [useTerms, termOrTermGroup, termsWithinSelectedGroup]);
 
-  // --- 2. TERM GROUP CONTEXT CREATION ---
-  const handleClickCreateTermGroupContext = useGeneContextCreation({
+  const { geneList, isLoading } = useFetchGeneList(
+    useTerms,
+    termOrTermGroup,
+    termsWithinSelectedGroup,
+    termToMatchingGenesObj,
+    useAllGenes
+  );
+
+  const handleContextSaveComplete = useCallback(() => setShow(true), []);
+
+  const handleClickCreateContext = useGeneContextCreation({
     name: termOrTermGroup,
-    terms: termsWithinSelectedGroup || [], // Pass all terms in the group
-    termToMatchingGenesMap,
+    termsKey,
+    termToMatchingGenesObj,
     useAllGenes,
     onComplete: handleContextSaveComplete,
   });
 
   const modalBody = useMemo(() => {
-    // If not grouping terms
     if (useTerms || termsWithinSelectedGroup?.length === 1) {
       return (
         <ExcerptTable
@@ -58,7 +66,6 @@ function MatchingTermsModal({
       );
     }
 
-    // If grouping terms
     if (!termsWithinSelectedGroup || termsWithinSelectedGroup.length === 0) {
       return <div>No terms found for this group.</div>;
     }
@@ -85,20 +92,20 @@ function MatchingTermsModal({
         <Modal.Title>Excerpts for “{termOrTermGroup}”</Modal.Title>
       </Modal.Header>
       <Modal.Body className={styles.GeneTeaModal}>{modalBody}</Modal.Body>
-      <Modal.Footer>
+      <Modal.Footer className={styles.modalFooterRow}>
         <Button onClick={onClose}>Close</Button>
         <Button
           bsStyle="primary"
-          onClick={
-            useTerms
-              ? handleClickCreateTermContext
-              : handleClickCreateTermGroupContext
-          }
+          disabled={isLoading}
+          onClick={handleClickCreateContext}
         >
-          {useTerms
-            ? "Save as Gene Context"
-            : `Save Term Group as Gene Context`}
+          {useTerms ? "Save as Gene Context" : "Save Group as Gene Context"}
         </Button>
+        <CopyListButton
+          items={geneList}
+          title={"Copy Gene List"}
+          disabled={isLoading}
+        />
       </Modal.Footer>
     </Modal>
   );

frontend/packages/portal-frontend/src/geneTea/hooks/useCreateGeneContext.ts

@@ -1,18 +1,15 @@
 import { useCallback } from "react";
 import { DepMap } from "@depmap/globals";
-import { cached, legacyPortalAPI } from "@depmap/api";
+import { fetchGeneList } from "./utils";
 
 interface GeneContextCreationParams {
-  name: string; // termOrTermGroup
-  terms: string[]; // List of terms to fetch genes for
-  termToMatchingGenesMap: Map<string, string[]>;
+  name: string;
+  termsKey: string; // "term1,term2,term3"
+  termToMatchingGenesObj: Record<string, string[]>;
   useAllGenes: boolean;
   onComplete: () => void;
 }
 
-/**
- * Utility function to consolidate gene fetching and context saving logic.
- */
 const saveContext = async (
   contextName: string,
   geneList: string[],
@@ -30,34 +27,22 @@ const saveContext = async (
 
 export const useGeneContextCreation = ({
   name,
-  terms,
-  termToMatchingGenesMap,
+  termsKey,
+  termToMatchingGenesObj,
   useAllGenes,
   onComplete,
 }: GeneContextCreationParams) => {
   return useCallback(async () => {
-    let finalGenes: string[] = [];
+    const finalGenes = await fetchGeneList(
+      termsKey,
+      termToMatchingGenesObj,
+      useAllGenes
+    );
 
-    if (useAllGenes) {
-      // 1. Fetch genes from API
-      const allGenesData = await cached(
-        legacyPortalAPI
-      ).fetchGeneTeaGenesMatchingTermExperimental(terms, []);
-
-      // 2. Process fetched genes
-      finalGenes = Object.keys(allGenesData).flatMap(
-        (term) => allGenesData[term]?.split(" ") || []
-      );
-    } else if (terms.length === 1) {
-      finalGenes = termToMatchingGenesMap.get(terms[0]) || [];
-    } else {
-      // 2. If grouping terms
-      finalGenes = Array.from(
-        new Set(terms.flatMap((term) => termToMatchingGenesMap.get(term) || []))
-      );
+    if (finalGenes.length > 0) {
+      await saveContext(name, finalGenes, onComplete);
     }
 
-    // 3. Save the context
-    await saveContext(name, finalGenes, onComplete);
-  }, [name, terms, termToMatchingGenesMap, useAllGenes, onComplete]);
+    return finalGenes;
+  }, [name, termsKey, termToMatchingGenesObj, useAllGenes, onComplete]);
 };

frontend/packages/portal-frontend/src/geneTea/hooks/useFetchGeneList.ts

@@ -0,0 +1,42 @@
+import { useEffect, useState } from "react";
+import { fetchGeneList } from "./utils";
+
+export const useFetchGeneList = (
+  useTerms: boolean,
+  termOrTermGroup: string,
+  termsArray: string[] | null,
+  termToMatchingGenesObj: Record<string, string[]>,
+  useAllGenes: boolean
+) => {
+  const [geneList, setGeneList] = useState<string[]>([]);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+
+  const termsKey = useTerms ? termOrTermGroup : termsArray?.join(",") || "";
+
+  useEffect(() => {
+    const loadGenes = async () => {
+      if (!termsKey) {
+        setGeneList([]);
+        return;
+      }
+
+      setIsLoading(true);
+      try {
+        const finalGenes = await fetchGeneList(
+          termsKey,
+          termToMatchingGenesObj,
+          useAllGenes
+        );
+        setGeneList(finalGenes);
+      } catch (error) {
+        console.error(error);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    loadGenes();
+  }, [termsKey, termToMatchingGenesObj, useAllGenes]);
+
+  return { geneList, isLoading };
+};

frontend/packages/portal-frontend/src/geneTea/hooks/utils.ts

@@ -0,0 +1,29 @@
+import { cached, legacyPortalAPI } from "@depmap/api";
+
+export const fetchGeneList = async (
+  termsString: string,
+  termToMatchingGenesObj: Record<string, string[]>,
+  useAllGenes: boolean
+): Promise<string[]> => {
+  const terms = termsString ? termsString.split(",") : [];
+
+  if (terms.length === 0) return [];
+
+  if (useAllGenes) {
+    const allGenesData = await cached(
+      legacyPortalAPI
+    ).fetchGeneTeaGenesMatchingTermExperimental(terms, []);
+
+    return Object.keys(allGenesData).flatMap(
+      (term) => allGenesData[term]?.split(" ") || []
+    );
+  }
+
+  if (terms.length === 1) {
+    return termToMatchingGenesObj[terms[0]] || [];
+  }
+
+  return Array.from(
+    new Set(terms.flatMap((term) => termToMatchingGenesObj[term] || []))
+  );
+};