Miscfeatures

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

@@ -41,9 +41,9 @@
     "@emotion/styled": "^11.11.0",
     "@mui/icons-material": "^5.14.3",
     "@mui/lab": "^5.0.0-alpha.137",
-    "@mui/material": "^5.14.2",
-    "@types/node": "^20.5.0",
-    "@types/react": "^18.2.20",
+    "@mui/material": "^5.14.2",    
+    "@types/node": "^20.4.9",
+    "@types/react": "^18.2.19",
     "@types/react-dom": "18.2.7",
     "@weng-lab/psychscreen-ui-components": "^0.8.0-a.2",
     "@weng-lab/ts-ztable": "^4.0.1",
@@ -56,13 +56,16 @@
     "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",
     "react-dropzone": "^14.2.3",
     "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/applets/gene-expression/gene-autocomplete.tsx

@@ -8,7 +8,7 @@ import Grid2 from "@mui/material/Unstable_Grid2/Grid2"
 import { gene } from "./types"
 import { QueryResponse } from "../../../../types/types"
 import { Dispatch, SetStateAction } from "react"
-
+import Config from "../../../config.json"
 const GENE_AUTOCOMPLETE_QUERY = `
   query ($assembly: String!, $name_prefix: [String!], $limit: Int) {
     gene(assembly: $assembly, name_prefix: $name_prefix, limit: $limit) {
@@ -66,7 +66,7 @@ export default function GeneAutoComplete(props: {
   // gene list
   const onSearchChange = async (value: string) => {
     setOptions([])
-    const response = await fetch("https://ga.staging.wenglab.org/graphql", {
+    const response = await fetch(Config.API.GraphqlAPI, {
       method: "POST",
       body: JSON.stringify({
         query: GENE_AUTOCOMPLETE_QUERY,

screen2.0/src/app/page.tsx

@@ -2,7 +2,8 @@
 
 "use client"
 import { Typography } from "@mui/material"
-import MainSearch from "../common/components/MainSearch"
+
+import MainSearch from "../common/components/mainsearch/MainSearch"
 
 // Grid v2 isn't declared stable yet, but using it now as it's what MUI is currently developing out
 import Grid2 from "@mui/material/Unstable_Grid2/Grid2"

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

@@ -1,5 +1,6 @@
 import { ApolloClient, InMemoryCache } from "@apollo/client"
+import Config from "../../../config.json"
 export const client = new ApolloClient({
-  uri: "https://factorbook.api.wenglab.org/graphql",
+  uri: Config.API.CcreAPI,
   cache: new InMemoryCache(),
 })

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

@@ -1,20 +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"
 import { MainResultTableRows } from "./types"
 export const StyledTab = styled(Tab)(() => ({
   textTransform: "none",
 }))
 export const CcreSearch = (props: { mainQueryParams, ccrerows: MainResultTableRows, 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)
   }
@@ -45,13 +46,28 @@ export const CcreSearch = (props: { mainQueryParams, ccrerows: MainResultTableRo
             <MainResultsFilters mainQueryParams={props.mainQueryParams} byCellType={props.globals} />
           </Grid2>
           <Grid2 xs={12} lg={9}>
-            <MainResultsTable
-              rows={props.ccrerows}
-              tableTitle={`Searching ${props.mainQueryParams.chromosome} in ${
-                props.mainQueryParams.assembly
-              } from ${props.mainQueryParams.start.toLocaleString("en-US")} to ${props.mainQueryParams.end.toLocaleString("en-US")}`}
-              itemsPerPage={10}
-            />
+            <Tabs aria-label="basic tabs example" value={tabIndex} onChange={(_, val) => setTabIndex(val)}>
+              <StyledTab label="Table View" />
+              <StyledTab label="Genome Browser View" />
+
+            </Tabs>
+            {tabIndex === 1 && (
+              <GenomeBrowserView
+                gene={props.mainQueryParams.gene}
+                biosample={props.mainQueryParams.Biosample.biosample}
+                assembly={props.mainQueryParams.assembly}
+                coordinates={{ start: +props.mainQueryParams.start, end: +props.mainQueryParams.end, chromosome: props.mainQueryParams.chromosome }}
+              />
+            )}
+            {tabIndex === 0 && (
+              <MainResultsTable
+                rows={props.ccrerows}
+                tableTitle={`Searching ${props.mainQueryParams.chromosome} in ${
+                  props.mainQueryParams.assembly
+                } from ${props.mainQueryParams.start.toLocaleString("en-US")} to ${props.mainQueryParams.end.toLocaleString("en-US")}`}
+                itemsPerPage={10}
+              />
+            )}
           </Grid2>
         </Grid2>
       )}