misc features

screen2.0/next.config.js

@@ -41,6 +41,17 @@ const nextConfig = {
   trailingSlash: false,
   assetPrefix: assetPrefix,
   basePath: basePath,
+
+  webpack: (config, { isServer }) => {
+    if (!isServer) {
+        // don't resolve 'fs' module on the client to prevent this error on build --> Error: Can't resolve 'fs'
+        config.resolve.fallback = {
+            fs: false
+        }
+    }
+
+    return config;
+  }
 }
 
 module.exports = nextConfig

screen2.0/package.json

@@ -55,12 +55,15 @@
     "normalize.css": "^8.0.1",
     "only": "^0.0.2",
     "postcss": "8.4.27",
+    "queryz": "^0.0.3",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "server": "^1.0.38",
     "sharp": "^0.32.4",
     "tailwindcss": "3.3.3",
-    "typescript": "5.1.6"
+    "typescript": "5.1.6",
+    "umms-gb": "^3.9.13",
+    "uuid": "^9.0.0"
   },
   "devDependencies": {
     "file-loader": "^6.2.0",

screen2.0/src/app/search/ccredetails/linkedgenes.tsx

@@ -27,7 +27,7 @@ export const LinkedGenes: React.FC<{ accession: string; assembly: string }> = ({
   const { loading: loading_linked, data: data_linked } = useQuery(LINKED_GENES, {
     variables: {
       assembly,
-      accession,
+      accession: [accession],
     },
     fetchPolicy: "cache-and-network",
     nextFetchPolicy: "cache-first",

screen2.0/src/app/search/ccredetails/queries.ts

@@ -29,7 +29,7 @@ export const TOP_TISSUES = gql`
   }
 `
 export const LINKED_GENES = gql`
-  query ($assembly: String!, $accession: String!) {
+  query ($assembly: String!, $accession: [String]!) {
     linkedGenesQuery(assembly: $assembly, accession: $accession) {
       assembly
       accession

screen2.0/src/app/search/ccresearch.tsx

@@ -1,19 +1,21 @@
 "use client"
-import React, { useEffect } from "react"
+import React, { useEffect, useState } from "react"
 import { Tab, Tabs, Typography } from "@mui/material"
 import MainResultsTable from "../../common/components/MainResultsTable"
 import MainResultsFilters from "../../common/components/MainResultsFilters"
 import { CcreDetails } from "./ccredetails/ccredetails"
 import Grid2 from "../../common/mui-client-wrappers/Grid2"
 import { ReadonlyURLSearchParams, useSearchParams } from "next/navigation"
 import styled from "@emotion/styled"
+import { GenomeBrowserView } from "./gbview/genomebrowserview"
+
 export const StyledTab = styled(Tab)(() => ({
   textTransform: "none",
 }))
 export const CcreSearch = ({ mainQueryParams, ccrerows, globals, assembly }) => {
   const searchParams: ReadonlyURLSearchParams = useSearchParams()!
-  const [value, setValue] = React.useState(searchParams.get("accession") ? 1 : 0)
-
+  const [value, setValue] = useState(searchParams.get("accession") ? 1 : 0)
+  const [tabIndex, setTabIndex] = useState(0)
   const handleChange = (_, newValue: number) => {
     setValue(newValue)
   }
@@ -35,6 +37,7 @@ export const CcreSearch = ({ mainQueryParams, ccrerows, globals, assembly }) =>
       <Grid2 container spacing={3} sx={{ mt: "2rem", mb: "2rem" }}>
         <Grid2 xs={12} lg={12}>
           <Tabs aria-label="basic tabs example" value={value} onChange={handleChange}>
+
             <StyledTab label="cCRE Search Results" />
             {searchParams.get("accession") && <StyledTab label="cCRE Details" />}
           </Tabs>
@@ -46,13 +49,18 @@ export const CcreSearch = ({ mainQueryParams, ccrerows, globals, assembly }) =>
             <MainResultsFilters mainQueryParams={mainQueryParams} byCellType={globals} />
           </Grid2>
           <Grid2 xs={12} lg={9}>
-            <MainResultsTable
+            <Tabs aria-label="basic tabs example" value={tabIndex} onChange={(_,val)=>setTabIndex(val)}>
+              <StyledTab label="Genome Browser View" />
+              <StyledTab label="Table View" />              
+            </Tabs>
+            {tabIndex===0 && <GenomeBrowserView gene={mainQueryParams.gene} biosample={mainQueryParams.Biosample.biosample}  assembly={mainQueryParams.assembly} coordinates={{start: +mainQueryParams.start, end: +mainQueryParams.end, chromosome: mainQueryParams.chromosome}}/>}
+            {tabIndex===1 && <MainResultsTable
               rows={ccrerows}
               tableTitle={`Searching ${mainQueryParams.chromosome} in ${
                 mainQueryParams.assembly
               } from ${mainQueryParams.start.toLocaleString("en-US")} to ${mainQueryParams.end.toLocaleString("en-US")}`}
               itemsPerPage={10}
-            />
+            />}
           </Grid2>
         </Grid2>
       )}