reverting italic gene names

weng-lab · Jun 11, 2024 · 99db6b8 · 99db6b8
1 parent 6d2d9fb
commit 99db6b8
Show file tree

Hide file tree

Showing 12 changed files with 27 additions and 117 deletions.
diff --git a/screen2.0/src/app/_mainsearch/geneautocomplete.tsx b/screen2.0/src/app/_mainsearch/geneautocomplete.tsx
@@ -9,7 +9,7 @@ import { GENE_AUTOCOMPLETE_QUERY } from "./queries"
 import Config from "../../config.json"
 import { IconButton, Stack } from "@mui/material"
 import { Search } from "@mui/icons-material"
-import { alphabetMap } from "../search/_ccredetails/utils"
+
 type QueryResponse = [number, string[], any, [string, string, string, string, string, string][], string[]]
 
 export const GeneAutoComplete: React.FC<{ assembly: string, header?: boolean }> = (props) => {
@@ -121,13 +121,13 @@ export const GeneAutoComplete: React.FC<{ assembly: string, header?: boolean }>
 
           setInputValue(newInputValue)
         }}
-        noOptionsText={props.assembly === "mm10" ? `e.g., ${"Scml2".split("").map(s=>alphabetMap.get(s)).join("")},${"Dbt".split("").map(s=>alphabetMap.get(s)).join("")}` : `e.g., ${"SOX4".split("").map(s=>alphabetMap.get(s)).join("")},${"GAPDH".split("").map(s=>alphabetMap.get(s)).join("")}`}            
+        noOptionsText={props.assembly === "mm10" ? "e.g., Scml2, Dbt" : "e.g., SOX4, GAPDH"}            
         renderInput={(params) => (
           <TextField
             {...params}
             label="Enter a gene name"
             InputLabelProps={{ shrink: true, style: props.header ? {color: "white"} : { color: "black" } }}
-            placeholder={props.assembly === "mm10" ? `e.g., ${"Scml2".split("").map(s=>alphabetMap.get(s)).join("")},${"Dbt".split("").map(s=>alphabetMap.get(s)).join("")}` : `e.g., ${"SOX4".split("").map(s=>alphabetMap.get(s)).join("")},${"GAPDH".split("").map(s=>alphabetMap.get(s)).join("")}`}            
+            placeholder={props.assembly === "mm10" ? "e.g., Scml2, Dbt" :  "e.g., SOX4, GAPDH"}            
             fullWidth
             sx={{
               //Border at rest
@@ -151,7 +151,7 @@ export const GeneAutoComplete: React.FC<{ assembly: string, header?: boolean }>
               <Grid2 container alignItems="center">
                 <Grid2 sx={{ width: "100%" }}>
                   <Box component="span" sx={{ fontWeight: "regular" }}>
-                    <i>{option}</i>
+                    {option}
                   </Box>
                   {geneDesc && geneDesc.find((g) => g.name === option) && (
                     <Typography variant="body2" color="text.secondary">

diff --git a/screen2.0/src/app/applets/gene-expression/geneautocomplete.tsx b/screen2.0/src/app/applets/gene-expression/geneautocomplete.tsx
@@ -1,14 +1,12 @@
 "use client"
 import React, { useState, useEffect, useCallback } from "react"
-import { useRouter } from "next/navigation"
-import { Autocomplete, TextField, Box, Button, debounce, Typography, Stack, IconButton } from "@mui/material"
+import { Autocomplete, TextField, Box, debounce, Typography, Stack, IconButton } from "@mui/material"
 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"
 import { Add, Search } from "@mui/icons-material"
-import { alphabetMap } from "../../search/_ccredetails/utils"
 
 
 const GENE_AUTOCOMPLETE_QUERY = `
@@ -110,7 +108,7 @@ export default function GeneAutoComplete(props: {
         disablePortal
         freeSolo={true}
         id="gene-ids"
-        noOptionsText={props.assembly === "mm10" ? `e.g., ${"Scml2".split("").map(s=>alphabetMap.get(s)).join("")},${"Dbt".split("").map(s=>alphabetMap.get(s)).join("")}` : `e.g., ${"SOX4".split("").map(s=>alphabetMap.get(s)).join("")},${"GAPDH".split("").map(s=>alphabetMap.get(s)).join("")}`}            
+        noOptionsText={props.assembly === "mm10" ? "e.g., Scml2, Dbt" :  "e.g., SOX4, GAPDH"}            
         options={options}
         size="medium"
         sx={{ width: 200 }}
@@ -148,7 +146,7 @@ export default function GeneAutoComplete(props: {
               <Grid2 container alignItems="center">
                 <Grid2 sx={{ width: "calc(100% - 44px)" }}>
                   <Box component="span" sx={{ fontWeight: "regular" }}>
-                    <i>{opt}</i>
+                    {opt}
                   </Box>
                   {geneDesc && geneDesc.find((g) => g.name === opt) && (
                     <Typography variant="body2" color="text.secondary">

diff --git a/screen2.0/src/app/search/_ccredetails/geneexpression.tsx b/screen2.0/src/app/search/_ccredetails/geneexpression.tsx
@@ -3,7 +3,7 @@ import React, { useState } from "react"
 import { LoadingMessage } from "../../../common/lib/utility"
 import { PlotGeneExpression } from "../../applets/gene-expression/geneexpressionplot"
 import { useQuery } from "@apollo/experimental-nextjs-app-support/ssr"
-import { Button, Typography, Stack, TextField, MenuItem, FormControl, SelectChangeEvent, Checkbox, InputLabel, ListItemText, OutlinedInput, Select, ToggleButton, ToggleButtonGroup, FormLabel, Box } from "@mui/material"
+import { Button, Typography, Stack, MenuItem, FormControl, SelectChangeEvent, Checkbox, InputLabel, ListItemText, OutlinedInput, Select, ToggleButton, ToggleButtonGroup, FormLabel, Box } from "@mui/material"
 import Grid2 from "@mui/material/Unstable_Grid2/Grid2"
 import Image from "next/image"
 import { HUMAN_GENE_EXP, MOUSE_GENE_EXP } from "../../applets/gene-expression/const"
@@ -16,7 +16,6 @@ import { ReadonlyURLSearchParams, usePathname, useSearchParams, useRouter } from
 import ConfigureGBModal from "./configuregbmodal"
 import { ApolloQueryResult } from "@apollo/client"
 import { BIOSAMPLE_Data } from "../../../common/lib/queries"
-import { alphabetMap } from "./utils"
 
 /**
  * @todo
@@ -209,7 +208,7 @@ export function GeneExpression(props: {
         <Typography
           alignSelf={"flex-end"}
           variant={props.applet ? "h4" : "h5"}>
-          <i>{assembly === "GRCh38" ? currentHumanGene : currentMouseGene} </i> Gene Expression Profiles by RNA-seq
+          {assembly === "GRCh38" ? currentHumanGene : currentMouseGene} Gene Expression Profiles by RNA-seq
         </Typography>
         <Stack direction="row" spacing={3}>
           <Button
@@ -243,7 +242,7 @@ export function GeneExpression(props: {
               <InputLabel>Gene</InputLabel>
               <GeneAutoComplete
                 assembly={assembly}
-                gene={assembly === "GRCh38" ? currentHumanGene.split("").map(s=>alphabetMap.get(s)).join("") : currentMouseGene.split("").map(s=>alphabetMap.get(s)).join("")}
+                gene={assembly === "GRCh38" ? currentHumanGene : currentMouseGene}
                 setGene={(gene) => {
                   if (assembly === "GRCh38") {
                     setCurrentHumanGene(gene)
@@ -260,13 +259,13 @@ export function GeneExpression(props: {
           <Grid2>
             <InputLabel>Gene</InputLabel>
             <Select
-              value={assembly === "GRCh38" ? currentHumanGene.split("").map(s=>alphabetMap.get(s)).join("") : currentMouseGene.split("").map(s=>alphabetMap.get(s)).join("")}
+              value={assembly === "GRCh38" ? currentHumanGene : currentMouseGene}
               renderValue={(value) => (<Typography>{value}</Typography>)}
             >
               {props.genes.map((gene) => {
                 return (
                   <MenuItem sx={{ display: "block" }} key={gene.name} value={gene.name} onClick={() => assembly === "GRCh38" ? setCurrentHumanGene(gene.name) : setCurrentMouseGene(gene.name)}>
-                    <Typography><i>{gene.name}</i></Typography>
+                    <Typography>{gene.name}</Typography>
                     {gene?.linkedBy && <Typography variant="body2" color={"text.secondary"}>{gene.linkedBy.join(', ')}</Typography>}
                   </MenuItem>
                 )
@@ -331,7 +330,7 @@ export function GeneExpression(props: {
               aria-label="Scale"
               size="medium"
             >
-              <ToggleButton sx={{ textTransform: "none" }} value="logTPM">Log10(TPM + 1)</ToggleButton>
+              <ToggleButton sx={{ textTransform: "none" }} value="logTPM">Log<sub>10</sub>(TPM + 1)</ToggleButton>
               <ToggleButton sx={{ textTransform: "none" }} value="linearTPM">Linear TPM</ToggleButton>
             </ToggleButtonGroup>
           </Stack>

diff --git a/screen2.0/src/app/search/_ccredetails/linkedgenes.tsx b/screen2.0/src/app/search/_ccredetails/linkedgenes.tsx
@@ -5,7 +5,7 @@ import { useQuery } from "@apollo/client"
 import { LINKED_GENES, GENE_NAME } from "./queries"
 import Grid2 from "@mui/material/Unstable_Grid2/Grid2"
 import { DataTable } from "@weng-lab/psychscreen-ui-components"
-import { LoadingMessage, createGeneLink } from "../../../common/lib/utility"
+import { LoadingMessage, createLink } from "../../../common/lib/utility"
 
 type geneRow = {
   gene: string
@@ -80,7 +80,7 @@ export const LinkedGenes: React.FC<{ accession: string; assembly: string }> = ({
                   {
                     header: "Gene",
                     value: (row: geneRow) => row.gene,
-                    render: (row: geneRow) => createGeneLink("http://www.genecards.org/cgi-bin/carddisp.pl?gene=", row.gene),
+                    render: (row: geneRow) => createLink("http://www.genecards.org/cgi-bin/carddisp.pl?gene=", row.gene),
                   },
                   {
                     header: "Biosample",

diff --git a/screen2.0/src/app/search/_ccredetails/nearbygenomicfeatures.tsx b/screen2.0/src/app/search/_ccredetails/nearbygenomicfeatures.tsx
@@ -152,7 +152,7 @@ export const NearByGenomicFeatures: React.FC<{
                           variant="body2"
                           color="primary"
                         >
-                          <i>{row.name}</i>
+                          {row.name}
                         </Typography>,
                     },
                     {

diff --git a/screen2.0/src/app/search/_ccredetails/rampage.tsx b/screen2.0/src/app/search/_ccredetails/rampage.tsx
@@ -200,7 +200,7 @@ export default function Rampage(props: { genes: { name: string, linkedBy?: strin
               {props.genes.map((gene) => {
                 return (
                   <MenuItem sx={{ display: "block" }} key={gene.name} value={gene.name} onClick={() => setCurrentGene(gene.name)}>
-                    <Typography><i>{gene.name}</i></Typography>
+                    <Typography>{gene.name}</Typography>
                     {gene?.linkedBy && <Typography variant="body2" color={"text.secondary"}>{gene.linkedBy.join(', ')}</Typography>}
                   </MenuItem>
                 )

diff --git a/screen2.0/src/app/search/_ccredetails/tfintersection.tsx b/screen2.0/src/app/search/_ccredetails/tfintersection.tsx
@@ -96,7 +96,7 @@ export const TfIntersection: React.FC<{ assembly: string; coordinates: { chromos
                     value: (row) => row.name,
                     render: (row) => (
                       <Link href={`https://www.factorbook.org/tf/human/${row.name}/function`} rel="noopener noreferrer" target="_blank">
-                        <button><i>{row.name}</i></button>
+                        <button>{row.name}</button>
                       </Link>
                     ),
                   },

diff --git a/screen2.0/src/app/search/_ccredetails/utils.tsx b/screen2.0/src/app/search/_ccredetails/utils.tsx
@@ -194,74 +194,3 @@ export const GROUP_COLOR_MAP: Map<string, string> = new Map([
   ["zunclassified","zunclassified:#8c8c8c"]  
 ])
 
-//𝐴 𝐵                         𝑎 𝑏 𝑐 𝑑 𝑒 𝑓 𝑔 𝒽 𝑖 𝑗 𝑘 𝑙 𝑚 𝑛 𝑜 𝑝 𝑞 𝑟 𝑠 𝑡 𝑢 𝑣 𝑤 𝑥 𝑦 𝑧 𝟎 𝟏 𝟐 𝟑 𝟒 𝟓 𝟔 𝟕 𝟖 𝟗
-export const alphabetMap: Map<string, string> = new Map([
-["A","𝐴"],
-["B","𝐵"],
-["C","𝐶"],
-["D","𝐷"],
-["E","𝐸"],
-["F","𝐹"],
-["G","𝐺"],
-["H","𝐻"],
-["I","𝐼"],
-["J","𝐽"],
-["K","𝐾"],
-["L","𝐿"],
-["M","𝑀"],
-["N","𝑁"],
-["O","𝑂"],
-["P","𝑃"],
-["Q","𝑄"],
-["R","𝑅"],
-["S","𝑆"],
-["T","𝑇"],
-["U","𝑈"],
-["V","𝑉"],
-["W","𝑊"],
-["X","𝑋"],
-["Y","𝑌"],
-["Z","𝑍"],
-
-["a","𝑎"],
-["b","𝑏"],
-["c","𝑐"],
-["d","𝑑"],
-["e","𝑒"],
-["f","𝑓"],
-["g","𝑔"],
-["h","𝒽"],
-["i","𝑖"],
-["j","𝑗"],
-["k","𝑘"],
-["l","𝑙"],
-["m","𝑚"],
-["n","𝑛"],
-["o","𝑜"],
-["p","𝑝"],
-["q","𝑞"],
-["r","𝑟"],
-["s","𝑠"],
-["t","𝑡"],
-["u","𝑢"],
-["v","𝑣"],
-["w","𝑤"],
-["x","𝑥"],
-["y","𝑦"],
-["z","𝑧"],
-//          
-["0","𝟎"],
-["1","𝟏"],
-["2","𝟐"],
-["3","𝟑"],
-["4","𝟒"],
-["5","𝟓"],
-["6","𝟔"],
-["7","𝟕"],
-["8","𝟖"],
-["9","𝟗"]
-
-
-
-
-])
diff --git a/screen2.0/src/app/search/mainresultsfilters.tsx b/screen2.0/src/app/search/mainresultsfilters.tsx
@@ -261,8 +261,8 @@ export function MainResultsFilters(
                         props.setMainQueryParams({ ...props.mainQueryParams, gene: { ...props.mainQueryParams.gene, nearTSS: value === "tss" } })
                       }}
                     >
-                      <FormControlLabel value="overlappinggene" control={<Radio />} label={<><i>{props.mainQueryParams.gene.name}</i> gene body</>} />
-                      <FormControlLabel value="tss" control={<Radio />} label={<>Within distance of TSS of <i>{props.mainQueryParams.gene.name}</i></>}/>
+                      <FormControlLabel value="overlappinggene" control={<Radio />} label={<>{props.mainQueryParams.gene.name} gene body</>} />
+                      <FormControlLabel value="tss" control={<Radio />} label={<>Within distance of TSS of {props.mainQueryParams.gene.name}</>}/>
                     </RadioGroup>
                   </FormControl>
                 </Grid2>

diff --git a/screen2.0/src/app/search/mainresultstable.tsx b/screen2.0/src/app/search/mainresultstable.tsx
@@ -208,7 +208,7 @@ export function MainResultsTable(props: MainResultsTableProps) {
               <Typography variant="body2" color="primary" display="inline">
                 {Object.values(row.linkedGenes.distancePC).map((gene: { name: string }, i: number) => (
                   <a key={i} target="_blank" rel="noopener noreferrer" href={`/applets/gene-expression?assembly=${props.assembly}&gene=${gene.name}`}>
-                    {i < row.linkedGenes.distancePC.length - 1 ? <i>{`\u00A0${gene.name},\u00A0`}</i> : <i>{`\u00A0${gene.name}`}</i>}
+                    {i < row.linkedGenes.distancePC.length - 1 ? `\u00A0${gene.name},\u00A0` : `\u00A0${gene.name}`}
                   </a>
                 ))}
               </Typography>
@@ -220,7 +220,7 @@ export function MainResultsTable(props: MainResultsTableProps) {
               <Typography variant="body2" color="primary" display="inline">
                 {Object.values(row.linkedGenes.distanceAll).map((gene: { name: string }, i: number) => (
                   <a key={i} target="_blank" rel="noopener noreferrer" href={`/applets/gene-expression?assembly=${props.assembly}&gene=${gene.name}`}>
-                    {i < row.linkedGenes.distanceAll.length - 1 ? <i>{`\u00A0${gene.name},\u00A0`}</i> : <i>{`\u00A0${gene.name}`}</i>}
+                    {i < row.linkedGenes.distanceAll.length - 1 ? `\u00A0${gene.name},\u00A0` : `\u00A0${gene.name}`}
                   </a>
                 ))}
               </Typography>
@@ -239,7 +239,7 @@ export function MainResultsTable(props: MainResultsTableProps) {
                   .filter((name, index, self) => { return self.indexOf(name) === index })
                   .map((name: string, i: number, self: string[]) => (
                     <a key={i} target="_blank" rel="noopener noreferrer" href={`/applets/gene-expression?assembly=${props.assembly}&gene=${name}`}>
-                      {i < self.length - 1 ? <i>{`\u00A0${name},\u00A0`}</i> : <i>{`\u00A0${name}`}</i>}
+                      {i < self.length - 1 ? <>{`\u00A0${name},\u00A0`}</> : <>{`\u00A0${name}`}</>}
                     </a>
                   ))}
               </Typography>
@@ -258,7 +258,7 @@ export function MainResultsTable(props: MainResultsTableProps) {
                     .filter((name, index, self) => { return self.indexOf(name) === index })
                     .map((name: string, i: number, self: string[]) => (
                       <a key={i} target="_blank" rel="noopener noreferrer" href={`/applets/gene-expression?assembly=${props.assembly}&gene=${name}`}>
-                        {i < self.length - 1 ? <i>{`\u00A0${name},\u00A0`}</i> : <i>{`\u00A0${name}`}</i>}
+                        {i < self.length - 1 ? <>{`\u00A0${name},\u00A0`}</> : <>{`\u00A0${name}`}</>}
                       </a>
                     ))}
               </Typography>

diff --git a/screen2.0/src/app/search/page.tsx b/screen2.0/src/app/search/page.tsx
@@ -25,7 +25,6 @@ import { GeneExpression } from "./_ccredetails/geneexpression";
 import { LoadingMessage } from "../../common/lib/utility"
 import { Download } from "@mui/icons-material"
 import { ApolloQueryResult } from "@apollo/client"
-import { alphabetMap } from "./_ccredetails/utils"
 
 /**
  * @todo:
@@ -435,11 +434,11 @@ export default function Search({ searchParams }: { searchParams: { [key: string]
               }
               {mainQueryParams.gene.name &&
                 <StyledTab value={2} 
-                label={<p><i>{mainQueryParams.gene.name}</i> Gene Expression</p>}
+                label={`${mainQueryParams.gene.name} Gene Expression` }
                 />
               }
               {mainQueryParams.gene.name && mainQueryParams.coordinates.assembly.toLowerCase() !== "mm10" &&
-                <StyledTab value={3} label={<p><i>{mainQueryParams.gene.name}</i> RAMPAGE</p>} />
+                <StyledTab value={3} label={`${mainQueryParams.gene.name} RAMPAGE`} />
               }
 
               {/* Map opencCREs to tabs */}
@@ -547,7 +546,7 @@ export default function Search({ searchParams }: { searchParams: { [key: string]
                       mainQueryParams.gene.nearTSS ?
                         `cCREs within ${mainQueryParams.gene.distance / 1000}kb of TSSs of ${mainQueryParams.gene.name} - ${mainQueryParams.coordinates.chromosome}:${mainQueryParams.coordinates.start.toLocaleString("en-US")}-${mainQueryParams.coordinates.end.toLocaleString("en-US")}`
                         :
-                        `cCREs overlapping ${mainQueryParams.gene.name.split('').map(d=>alphabetMap.get(d)).join("")} - ${mainQueryParams.coordinates.chromosome}:${mainQueryParams.coordinates.start.toLocaleString("en-US")}-${mainQueryParams.coordinates.end.toLocaleString("en-US")}`
+                        `cCREs overlapping ${mainQueryParams.gene.name} - ${mainQueryParams.coordinates.chromosome}:${mainQueryParams.coordinates.start.toLocaleString("en-US")}-${mainQueryParams.coordinates.end.toLocaleString("en-US")}`
 
                       :
                       mainQueryParams.snp.rsID ?

diff --git a/screen2.0/src/common/lib/utility.tsx b/screen2.0/src/common/lib/utility.tsx
@@ -51,21 +51,6 @@ export const createLink = (url: string, id: string, label?: string) => {
   )
 }
 
-/**
- * Creates a hyperlink to the url + id with the id as the button
- * @param url
- * @param id string to be pasted at the end of the url
- * @returns link anchor to url + id
- */
- export const createGeneLink = (url: string, id: string, label?: string) => {
-  const link = url + id
-  return (
-    <Link href={link} rel="noopener noreferrer" target="_blank">
-      {label ? <button><i>{label}</i></button> : <button><i>{id}</i></button>}
-      {/* <button>{id}</button> */}
-    </Link>
-  )
-}
 
 /**
  * Returns loading wheel