More organizing

Author: alimourey

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

@@ -0,0 +1,134 @@
+import React 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";
+
+interface ExcerptTableProps {
+  useTerms: boolean;
+  term: string;
+  termToMatchingGenesMap: Map<string, string[]>;
+  useAllGenes: boolean;
+}
+
+const ExcerptTable: React.FC<ExcerptTableProps> = ({
+  useTerms,
+  term,
+  termToMatchingGenesMap,
+  useAllGenes,
+}: ExcerptTableProps) => {
+  const {
+    isLoading,
+    error,
+    pageData,
+    totalPages,
+    currentPage,
+    handleNextPage,
+    handlePrevPage,
+    handleClickCreateTermContext,
+    totalMatchingGenes,
+    pageSize,
+  } = useExcerptData(term, termToMatchingGenesMap, useAllGenes);
+
+  const isContentReady = pageData && !error && !isLoading;
+  const isTableVisible = isContentReady && Object.keys(pageData!).length > 0;
+
+  const renderTableBody = () => {
+    if (!pageData) return null;
+
+    return (
+      <tbody>
+        {Object.entries(pageData).map(([gene, context]) => {
+          const html = context
+            .replace(/<a href/g, '<a target="_blank" href')
+            .replace(/ \| /g, "<br/><br/>");
+
+          return (
+            <tr key={gene}>
+              <td>
+                <a href={`../gene/${gene}`} target="_blank" rel="noreferrer">
+                  {gene}
+                </a>
+              </td>
+              <td>
+                {/* eslint-disable-next-line react/no-danger */}
+                <div dangerouslySetInnerHTML={{ __html: html }} />
+              </td>
+            </tr>
+          );
+        })}
+      </tbody>
+    );
+  };
+
+  return (
+    <div className={styles.tableWrapper}>
+      <p className={styles.tableParagraph}>
+        The term “
+        <GeneTeaTerm term={term} synonyms={[]} coincident={[]} />” is associated
+        with {totalMatchingGenes} of the selected genes.
+      </p>
+
+      {!useTerms && (
+        <div className={styles.saveAsContextButton}>
+          <Button
+            bsStyle="primary"
+            bsSize="small"
+            onClick={handleClickCreateTermContext}
+          >
+            Save Term as Gene Context
+          </Button>
+        </div>
+      )}
+
+      <table className="table">
+        <thead>
+          <tr>
+            <th>Gene</th>
+            <th>Excerpt</th>
+          </tr>
+        </thead>
+        {isTableVisible && renderTableBody()}
+      </table>
+
+      {isLoading && (
+        <div className={styles.geneTeaModalSpinner}>
+          <Spinner left="0px" position="static" />
+        </div>
+      )}
+
+      {error && (
+        <Alert bsStyle="danger">
+          There was a problem retrieving the excerpt(s) for this term/page.
+          Please try again!
+        </Alert>
+      )}
+
+      {!isLoading &&
+        !error &&
+        totalMatchingGenes > 0 &&
+        pageData &&
+        Object.keys(pageData).length === 0 && (
+          <Alert bsStyle="danger">
+            Could not find an excerpt for any gene on this page.
+          </Alert>
+        )}
+
+      {!isLoading && (
+        <PaginationControls
+          currentPage={currentPage}
+          totalPages={totalPages}
+          totalMatchingGenes={totalMatchingGenes}
+          pageSize={pageSize}
+          isLoading={isLoading}
+          handleNextPage={handleNextPage}
+          handlePrevPage={handlePrevPage}
+        />
+      )}
+    </div>
+  );
+};
+
+export default ExcerptTable;