Merge pull request #526 from weng-lab/updategb

Update Genome Browser to use new component library
weng-lab · Dec 20, 2024 · e17cacb · e17cacb
2 parents 1f1e41e + 0dd4bc5
commit e17cacb
Show file tree

Hide file tree

Showing 13 changed files with 7,120 additions and 9,607 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,7 @@
+{
+    "workbench.colorCustomizations": {
+        "activityBar.background": "#203212",
+        "titleBar.activeBackground": "#2D4619",
+        "titleBar.activeForeground": "#F8FCF6"
+    }
+}
diff --git a/screen2.0/Dockerfile b/screen2.0/Dockerfile
@@ -3,7 +3,7 @@ RUN apk add --no-cache libc6-compat
 WORKDIR /app
 
 COPY package.json ./
-RUN  yarn install --production
+RUN  yarn install --production --network-timeout=300000
 
 FROM node:18-alpine AS builder
 WORKDIR /app

diff --git a/screen2.0/package.json b/screen2.0/package.json
@@ -5,6 +5,7 @@
   "type": "module",
   "scripts": {
     "dev": "next dev",
+    "turbo": "next dev --turbo",
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
@@ -27,6 +28,8 @@
     "@visx/visx": "^3.12.0",
     "@weng-lab/psychscreen-ui-components": "^2.0.8",
     "@weng-lab/ts-ztable": "^4.0.1",
+    "@weng-lab/genomebrowser": "^0.0.13",
+    "autoprefixer": "10.4.20",
     "bpnet-ui": "^0.3.8",
     "graphql": "^16.9.0",
     "logots-react": "^0.2.0",

diff --git a/screen2.0/src/app/footer.tsx b/screen2.0/src/app/footer.tsx
@@ -21,7 +21,9 @@ export function Footer() {
         How to Cite the ENCODE Encyclopedia, the Registry of cCREs, and SCREEN:
       </Typography>
       <Typography variant="body2" color="text.secondary">
-        &quot;ENCODE Project Consortium, et al. Nature 2020.&quot;
+        <MuiLink color="inherit" href="https://www.nature.com/articles/s41586-020-2493-4">
+          &quot;ENCODE Project Consortium, et al. Nature 2020.&quot;
+        </MuiLink>
       </Typography>
     </Box>
   )

diff --git a/screen2.0/src/app/globals.css b/screen2.0/src/app/globals.css
@@ -371,3 +371,31 @@ template {
 }
 
 /* Footer component has embebed styled to set it's height and position */
+
+
+/* GenomeBrowser styling */
+.shift-button {
+  padding: 4px;
+  font-size: 12px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  border-radius: 4px;
+  background-color: white;
+}
+
+.shift-button:hover {
+  background-color: lightgray;
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
+}
+
+.zoom-button {
+  padding: 2px;
+  font-size: 12px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  border-radius: 4px;
+  background-color: white;
+}
+
+.zoom-button:hover {
+  background-color: gray;
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
+}
diff --git a/screen2.0/src/app/search/_gbview/ccretooltip.tsx b/screen2.0/src/app/search/_gbview/ccretooltip.tsx
@@ -1,9 +1,23 @@
 import { gql, useQuery } from "@apollo/client"
-import React, { useMemo } from "react"
+import React, { useEffect, useMemo } from "react"
 import { CircularProgress } from "@mui/material"
 import { client } from "../_ccredetails/client"
 import { GROUP_COLOR_MAP } from "../_ccredetails/utils"
 
+interface CCRETooltipProps {
+  assembly: string
+  name: string
+  biosample?: {
+    displayname?: string
+    dnase?: string
+    h3k4me3?: string
+    h3k27ac?: string
+    ctcf?: string
+    atac?: string
+    name?: string
+  }
+}
+
 const QUERY = gql`
   query cCRE_1($assembly: String!, $accession: [String!], $experiments: [String!]) {
     cCREQuery(assembly: $assembly, accession: $accession) {
@@ -34,52 +48,144 @@ const biosampleExperiments = (x) => [x.dnase, x.h3k4me3, x.h3k27ac, x.ctcf, x.at
 const MARKS = ["DNase", "H3K4me3", "H3K27ac", "CTCF", "ATAC"]
 const marks = (x) => [x.dnase, x.h3k4me3, x.h3k27ac, x.ctcf, x.atac].map((x, i) => x && MARKS[i]).filter((xx) => !!xx)
 
-const CCRETooltip = (props) => {
+const CCRETooltip: React.FC<CCRETooltipProps> = ({ assembly, name, biosample }) => {
   const experiments = useMemo(
-    () => (props.biosample ? biosampleExperiments(props.biosample) : ["dnase", "h3k4me3", "h3k27ac", "ctcf", "atac"]),
-    [props]
+    () => (biosample ? biosampleExperiments(biosample) : ["dnase", "h3k4me3", "h3k27ac", "ctcf", "atac"]),
+    [biosample]
   )
-  const { data, loading } = useQuery(props.biosample ? QUERY : MAXZ_QUERY, {
+
+  const { data, loading, error } = useQuery(biosample ? QUERY : MAXZ_QUERY, {
     variables: {
-      assembly: props.assembly,
-      accession: props.name,
+      assembly,
+      accession: name,
       experiments,
     },
     client,
   })
+
   return (
-    <div style={{ border: "1px solid", padding: "0.75em", background: "#ffffff" }}>
-      {loading || !data.cCREQuery[0] ? (
-        <CircularProgress />
-      ) : (
-        <>
-          <svg height={18}>
-            <rect width={10} height={10} y={3} fill={GROUP_COLOR_MAP.get(data.cCREQuery[0].group).split(":")[1] || "#8c8c8c"} />
-            <text x={16} y={12}>
-              {props.name}
-            </text>
-          </svg>
-          {GROUP_COLOR_MAP.get(data.cCREQuery[0].group).split(":")[0]}
-
-          <br/>
-          <br/>
-          Click for details about this cCRE
-          <br />
-          <br />
-          <strong>{props.biosample ? "Z-scores in " + props.biosample.name : "Max Z-scores across all biosamples:"}</strong>
-          <br />
-          {(props.biosample ? marks(props.biosample) : MARKS).map((x, i) => (
-            <React.Fragment key={i}>
-              <strong>{x}</strong>:{" "}
-              {props.biosample
-                ? data.cCREQuery[0].zScores.find((xx) => xx.experiment === experiments[i]).score.toFixed(2)
-                : data.cCREQuery[0][experiments[i]].toFixed(2)}
-              <br />
-            </React.Fragment>
-          ))}
-        </>
-      )}
+    <div style={{
+      border: "1px solid",
+      padding: "0.75em",
+      background: "#ffffff",
+      maxWidth: "400px",
+      width: "400px",
+      height: "auto",
+      minHeight: loading || !data?.cCREQuery?.[0] ? "40px" : "auto"
+    }}>
+      <div style={{
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "flex-start",
+        width: "400px",
+        alignItems: "baseline",
+        minHeight: "205px",
+        height: "auto",
+      }}>
+        {loading || !data?.cCREQuery?.[0] ? (
+          <CircularProgress />
+        ) : (
+          <div>
+            <svg height={18}>
+              <rect
+                width={10}
+                height={10}
+                y={3}
+                fill={GROUP_COLOR_MAP.get(data.cCREQuery[0].group)?.split(":")[1] || "#8c8c8c"}
+              />
+              <text x={16} y={12}>
+                {name}
+              </text>
+            </svg>
+            <div>{GROUP_COLOR_MAP.get(data.cCREQuery[0].group)?.split(":")[0]}</div>
+            Click for details about this cCRE
+            <br />
+            <p style={{ wordWrap: "break-word", whiteSpace: "normal" }}>
+              <strong>{biosample ? "Z-scores in " + biosample.displayname : "Max Z-scores across all biosamples:"}</strong>
+            </p>
+            {(biosample ? marks(biosample) : MARKS).map((x, i) => {
+              return (
+                <div key={i} style={{ display: "flex", flexDirection: "row", justifyContent: "left", width: "100%" }}>
+                  <strong>{x}</strong>:{" "}
+                  {biosample
+                    ? data.cCREQuery[0].zScores.find((xx) => xx.experiment === experiments[i]).score.toFixed(2)
+                    : data.cCREQuery[0][experiments[i]].toFixed(2)}
+                  <br />
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </div>
     </div>
   )
 }
 export default CCRETooltip
+
+// useEffect(() => {
+//   if (data?.cCREQuery?.[0]) {
+//     console.log('Data loaded:', data.cCREQuery[0]);
+//   }
+// }, [data]);
+
+// return (
+//   <div style={{
+//     border: "1px solid",
+//     padding: "0.75em",
+//     background: "#ffffff",
+//     maxWidth: "400px",
+//     width: "max-content",
+//     overflowY: "visible",
+//     whiteSpace: "normal",
+//     height: "auto",
+//     minHeight: loading || !data?.cCREQuery?.[0] ? "40px" : "auto"
+//   }}>
+//     <div style={{
+//       display: "flex",
+//       flexDirection: "column",
+//       justifyContent: "flex-start",
+//       width: "max-content",
+//       minWidth: "300px",
+//       alignItems: "baseline",
+//       height: "100%",
+//       transition: "all 0.2s ease-in-out"
+//     }}>
+//       {loading || !data?.cCREQuery?.[0] ? (
+//         <CircularProgress />
+//       ) : (
+//         <div>
+//           <svg height={18}>
+//             <rect
+//               width={10}
+//               height={10}
+//               y={3}
+//               fill={GROUP_COLOR_MAP.get(data.cCREQuery[0].group)?.split(":")[1] || "#8c8c8c"}
+//             />
+//             <text x={16} y={12}>
+//               {props.name}
+//             </text>
+//           </svg>
+//           <div>{GROUP_COLOR_MAP.get(data.cCREQuery[0].group)?.split(":")[0]}</div>
+
+//           <br />
+//           <br />
+//           Click for details about this cCRE
+//           <br />
+//           <br />
+//           <strong>{props.biosample ? "Z-scores in " + props.biosample.name : "Max Z-scores across all biosamples:"}</strong>
+//           <br />
+//           {(props.biosample ? marks(props.biosample) : MARKS).map((x, i) => {
+//             return (
+//               <div key={i} style={{ display: "flex", flexDirection: "row", justifyContent: "left", width: "100%" }}>
+//                 <strong>{x}</strong>:{" "}
+//                 {props.biosample
+//                   ? data.cCREQuery[0].zScores.find((xx) => xx.experiment === experiments[i]).score.toFixed(2)
+//                   : data.cCREQuery[0][experiments[i]].toFixed(2)}
+//                 <br />
+//               </div>
+//             );
+//           })}
+//         </div>
+//       )}
+//     </div>
+//   </div>