Compound dep tile style (#373)

Author: jessica-cheng

frontend/packages/portal-frontend/src/compound/components/tiles/TopDatasetDependencies.tsx

@@ -4,6 +4,7 @@ import { DependencyMeter } from "./DependencyMeter";
 import { toStaticUrl } from "@depmap/globals";
 import styles from "../../styles/CorrelationTile.scss";
 import { AssociatedFeatures } from "@depmap/types/src/Dataset";
+import { Tooltip } from "@depmap/common-components";
 
 interface TopDatasetDependencyProps {
   featureId: string;
@@ -25,13 +26,15 @@ export const TopDatasetDependencies: React.FC<TopDatasetDependencyProps> = ({
   const urlPrefix = window.location.origin;
   return (
     <div>
-      <h3 style={{ fontSize: "16px" }}>{dataType}</h3>
-      <table style={{ width: "100%" }}>
+      <h3 className={styles.tileDatasetTitle}>{dataType}</h3>
+      <table style={{ width: "100%", tableLayout: "fixed" }}>
         <thead>
           <tr>
-            <th />
-            <th>{featureType === "gene" ? "Gene" : "Compound"}</th>
-            <th>Correlation</th>
+            <th style={{ width: "15%" }} />
+            <th style={{ width: "45%" }}>
+              {featureType === "gene" ? "Gene" : "Compound"}
+            </th>
+            <th style={{ width: "40%" }}>Correlation</th>
           </tr>
         </thead>
         <tbody>
@@ -47,6 +50,7 @@ export const TopDatasetDependencies: React.FC<TopDatasetDependencyProps> = ({
                     Plot
                   </a>
                 </td>
+
                 <td className={styles.targetIconContainer}>
                   {geneTargets.includes(datasetCor.other_dimension_label) ? (
                     <img
@@ -57,14 +61,22 @@ export const TopDatasetDependencies: React.FC<TopDatasetDependencyProps> = ({
                   ) : (
                     <p style={{ paddingLeft: "12px" }} />
                   )}
-                  <a
-                    href={`${urlPrefix}/${featureType}/${datasetCor.other_dimension_label}`}
-                    target="_blank"
-                    rel="noopener noreferrer"
+                  <Tooltip
+                    id="correlated-gene-tooltip"
+                    content={datasetCor.other_dimension_label}
+                    placement="top"
                   >
-                    {datasetCor.other_dimension_label}
-                  </a>
+                    <a
+                      className={styles.ellipsisStyle}
+                      href={`${urlPrefix}/${featureType}/${datasetCor.other_dimension_label}`}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      {datasetCor.other_dimension_label}
+                    </a>
+                  </Tooltip>
                 </td>
+
                 <td>
                   <td style={{ paddingRight: "3rem" }}>
                     {datasetCor.correlation.toFixed(2)}

frontend/packages/portal-frontend/src/compound/components/tiles/TopRelatedCompounds.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import styles from "../../styles/CorrelationTile.scss";
 import { CorrelationBar } from "./CorrelationBar";
+import { Tooltip } from "@depmap/common-components";
 
 interface TopRelatedCompoundsProps {
   entityLabel: string;
@@ -45,36 +46,45 @@ export const TopRelatedCompounds = ({
           <tr>
             {dataTypes.flatMap((dataType) =>
               topGeneTargets.map((target) => (
-                <th
+                <Tooltip
                   key={`${dataType}-${target}`}
-                  className={`${styles.ellipsisStyle} ${styles.columnStyle}`}
-                  title={target} // Tooltip for full name
+                  id="top-gene-targets-tooltip"
+                  content={target}
+                  placement="top"
                 >
-                  {target}
-                </th>
+                  <th
+                    className={`${styles.ellipsisStyle} ${styles.columnStyle}`}
+                  >
+                    {target}
+                  </th>
+                </Tooltip>
               ))
             )}
           </tr>
         </thead>
         <tbody>
           {topCompoundCorrelates.map((compound) => (
             <tr key={compound}>
-              <td
-                className={`${styles.ellipsisStyle} ${styles.cellStyle}`}
-                title={compound} // hover for full name
+              <Tooltip
+                id="compound-name-tooltip"
+                content={compound}
+                placement="top"
               >
-                {compound === entityLabel ? (
-                  <b>{compound}</b>
-                ) : (
-                  <a
-                    href={`${urlPrefix}/compound/${compound}`}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                  >
-                    {compound}
-                  </a>
-                )}
-              </td>
+                <td className={`${styles.ellipsisStyle} ${styles.cellStyle}`}>
+                  {compound === entityLabel ? (
+                    <b>{compound}</b>
+                  ) : (
+                    <a
+                      href={`${urlPrefix}/compound/${compound}`}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      {compound}
+                    </a>
+                  )}
+                </td>
+              </Tooltip>
+
               {dataTypes.flatMap((dataType) =>
                 topGeneTargets.map((target) => (
                   <td

frontend/packages/portal-frontend/src/compound/hooks/useCorrelatedDependenciesData.ts

@@ -1,12 +1,12 @@
-import { breadboxAPI } from "@depmap/api";
+import { breadboxAPI, cached } from "@depmap/api";
 import { DatasetAssociations } from "@depmap/types/src/Dataset";
 import { useEffect, useState } from "react";
 
 function useCorrelatedDependenciesData(
   datasetId: string,
   compoundLabel: string
 ) {
-  const bapi = breadboxAPI;
+  const bapi = cached(breadboxAPI);
 
   const [error, setError] = useState(false);
   const [isLoading, setIsLoading] = useState(true);
@@ -15,7 +15,7 @@ function useCorrelatedDependenciesData(
     setCorrelationData,
   ] = useState<DatasetAssociations | null>(null);
   const [geneTargets, setGeneTargets] = useState<string[]>([]);
-  // TBD: I think we actually want to use "CRISPRGeneDependency" instead of Chronos_Combined
+
   const dataTypeToDatasetMap: Record<string, string> = {
     CRISPR: "Chronos_Combined",
     RNAi: "RNAi_merged",