Bug fixes (#172)

* Tab Fix, Gene Exp fixes * Fix nested button error, other tab issue * Table titles, Rm empty about sections
weng-lab · Oct 30, 2023 · 54d84d7 · 54d84d7
1 parent 35548cc
commit 54d84d7
Show file tree

Hide file tree

Showing 5 changed files with 153 additions and 82 deletions.
diff --git a/screen2.0/src/app/about/page.tsx b/screen2.0/src/app/about/page.tsx
@@ -213,7 +213,7 @@ export default function About() {
             cell and tissue types are displayed here for each study.
           </Typography>
         </Grid2>
-        <Grid2 xs={12} id="tutorials">
+        {/* <Grid2 xs={12} id="tutorials">
           <Typography variant="h3">Tutorials</Typography>
         </Grid2>
         <Grid2 xs={12} id="api-documentation">
@@ -227,7 +227,7 @@ export default function About() {
         </Grid2>
         <Grid2 xs={12} id="contact-us">
           <Typography variant="h3">Contact Us</Typography>
-        </Grid2>
+        </Grid2> */}
       </Grid2>
     </main>
   )

diff --git a/screen2.0/src/app/search/ccredetails/gene-expression.tsx b/screen2.0/src/app/search/ccredetails/gene-expression.tsx
@@ -44,70 +44,108 @@ export function GeneExpression(props: {
   applet?: boolean
 }) {
   const [options, setOptions] = useState<string[]>([])
-  const [currentGene, setCurrentGene] = useState<string>(props.genes ? props.genes.distancePC[0].name : null)
+  const [currentHumanGene, setCurrentHumanGene] = useState<string>(props.genes ? props.genes.distancePC[0].name : "APOE")
+  const [currentMouseGene, setCurrentMouseGene] = useState<string>(props.genes ? props.genes.distancePC[0].name : "Emid1")
   const [biosamples, setBiosamples] = useState<string[]>(["cell line", "in vitro differentiated cells", "primary cell", "tissue"])
   const [group, setGroup] = useState<"byTissueMaxTPM" | "byExperimentTPM" | "byTissueTPM">("byTissueTPM")
   const [RNAtype, setRNAType] = useState<"all" | "polyA plus RNA-seq" | "total RNA-seq">("total RNA-seq")
   const [scale, setScale] = useState<"linearTPM" | "logTPM">("logTPM")
   const [replicates, setReplicates] = useState<"mean" | "all">("mean")
   const [assembly, setAssembly] = useState<"GRCh38" | "mm10">(props.assembly)
 
-  //Change RNA type back when switching between assemblies, wipe data
-  useEffect(() => {
-    if (props.applet) {
-      if (assembly === "GRCh38") {
-        setRNAType("total RNA-seq")
-      }
-      geneExpData = null
-      setCurrentGene(null)
-    }
-  }, [assembly])
-
-  console.log("current gene: " + currentGene)
+  //Fetch Gene info to get ID
+  const {
+    data: dataHumanGene,
+    loading: loadingHumanGene
+  } = useQuery(GENE_QUERY, {
+    variables: {
+      assembly: "grch38",
+      name: [currentHumanGene && currentHumanGene.toUpperCase()]
+    },
+    skip: !currentHumanGene,
+    fetchPolicy: "cache-and-network",
+    nextFetchPolicy: "cache-first",
+    client,
+  })
 
-  //Skip fetches when no gene selected
   //Fetch Gene info to get ID
   const {
-    data: data_gene,
-    loading: loading_gene
+    data: dataMouseGene,
+    loading: loadingMouseGene
   } = useQuery(GENE_QUERY, {
     variables: {
-      assembly: assembly.toLowerCase(),
-      name: [currentGene && assembly === "mm10" ? currentGene : currentGene?.toUpperCase()]
+      assembly: "mm10",
+      name: [currentMouseGene && currentMouseGene]
     },
-    skip: !currentGene,
+    skip: !currentMouseGene,
     fetchPolicy: "cache-and-network",
     nextFetchPolicy: "cache-first",
     client,
   })
 
   //Fetch Gene Exp data
   const {
-    data: data_geneexp,
-    loading: loading_geneexp
+    data: dataHumanExp,
+    loading: loadingHumanExp
   } = useQuery(GENE_EXP_QUERY, {
     variables: {
-      assembly: assembly,
-      gene_id: data_gene && data_gene.gene.length > 0 && data_gene.gene[0].id.split(".")[0],
-      accessions: assembly === "GRCh38" ? HUMAN_GENE_EXP : MOUSE_GENE_EXP
+      assembly: "GRCh38",
+      gene_id: dataHumanGene && dataHumanGene.gene.length > 0 && dataHumanGene.gene[0].id.split(".")[0],
+      accessions: HUMAN_GENE_EXP
     },
-    skip: !currentGene || !data_gene || (data_gene && data_gene.gene.length === 0),
+    skip: !currentHumanGene || !dataHumanGene || (dataHumanGene && dataHumanGene.gene.length === 0),
     fetchPolicy: "cache-and-network",
     nextFetchPolicy: "cache-first",
     client,
   })
 
-  //Gene expression Data
+  const {
+    data: dataMouseExp,
+    loading: loadingMouseExp
+  } = useQuery(GENE_EXP_QUERY, {
+    variables: {
+      assembly: "mm10",
+      gene_id: dataMouseGene && dataMouseGene.gene.length > 0 && dataMouseGene.gene[0].id.split(".")[0],
+      accessions: MOUSE_GENE_EXP
+    },
+    skip: !currentMouseGene || !dataMouseGene || (dataMouseGene && dataMouseGene.gene.length === 0),
+    fetchPolicy: "cache-and-network",
+    nextFetchPolicy: "cache-first",
+    client,
+  })
+
+  //Gene expression Data for chart
   //Filter it based on biosample types and RNA types selections
-  let geneExpData = (data_geneexp && data_geneexp.gene_dataset.length > 0) &&
+  let humanGeneExpData = (dataHumanExp && dataHumanExp.gene_dataset.length > 0) &&
     (RNAtype === "all" ?
-      data_geneexp.gene_dataset
+      dataHumanExp.gene_dataset
         .filter(d => biosamples.includes(d.biosample_type))
       :
-      data_geneexp.gene_dataset
+      dataHumanExp.gene_dataset
         .filter(d => biosamples.includes(d.biosample_type))
         .filter(r => r.assay_term_name === RNAtype))
 
+  let mouseGeneExpData = (dataMouseExp && dataMouseExp.gene_dataset.length > 0) &&
+    (RNAtype === "all" ?
+      dataMouseExp.gene_dataset
+        .filter(d => biosamples.includes(d.biosample_type))
+      :
+      dataMouseExp.gene_dataset
+        .filter(d => biosamples.includes(d.biosample_type))
+        .filter(r => r.assay_term_name === RNAtype))
+
+  //Handle assembly switch change (for applet only)
+  const handleAssemblyChange = (checked: boolean) => {
+    console.log("assembly change called with " + checked)
+    if (props.applet) {
+      checked ? setAssembly("mm10") : setAssembly("GRCh38")
+      //Switch back RNA type if going from mouse to human, as all data there is total
+      if (assembly === "GRCh38") {
+        setRNAType("total RNA-seq")
+      }
+    }
+  }
+
   //Set Gene list. Why is this wrapped in useEffect?
   useEffect(() => {
     if (props.genes) {
@@ -169,7 +207,7 @@ export function GeneExpression(props: {
     //Only reason that theme is used is to color buttons white
     <ThemeProvider theme={defaultTheme}>
       <Stack mb={3} direction="row" justifyContent={"space-between"}>
-        <Typography alignSelf={"flex-end"} variant={props.applet ? "h4" : "h5"}>{`${currentGene ? currentGene + " " : ""}Gene Expression Profiles by RNA-seq`}</Typography>
+        <Typography alignSelf={"flex-end"} variant={props.applet ? "h4" : "h5"}>{`${assembly === "GRCh38" ? currentHumanGene : currentMouseGene} Gene Expression Profiles by RNA-seq`}</Typography>
         <Stack direction="row" spacing={3}>
           <Button
             variant="contained"
@@ -181,7 +219,7 @@ export function GeneExpression(props: {
           </Button>
           <Button
             variant="contained"
-            href={"https://www.genecards.org/cgi-bin/carddisp.pl?gene=" + currentGene}
+            href={"https://www.genecards.org/cgi-bin/carddisp.pl?gene=" + `${assembly === "GRCh38" ? currentHumanGene : currentMouseGene}`}
             color="secondary"
             sx={{ minWidth: 125, minHeight: 50 }}
           >
@@ -202,18 +240,25 @@ export function GeneExpression(props: {
         {props.applet ?
           <Stack direction="row">
             <GenomeSwitch
-              // On switch change, change assembly and wipe data
-              onSwitchChange={(checked: boolean) => {
-                checked ? setAssembly("mm10") : setAssembly("GRCh38")
+              onSwitchChange={(checked: boolean) => handleAssemblyChange(checked)}
+            />
+            <GeneAutoComplete
+              assembly={assembly}
+              gene={assembly === "GRCh38" ? currentHumanGene : currentMouseGene}
+              setGene={(gene) => {
+                if (assembly === "GRCh38") {
+                  setCurrentHumanGene(gene)
+                } else {
+                  setCurrentMouseGene(gene)
+                }
               }}
             />
-            <GeneAutoComplete assembly={assembly} gene={currentGene} setGene={(gene) => setCurrentGene(gene)} />
           </Stack>
           :
-          <TextField label="Gene" sx={{ m: 1 }} select value={currentGene}>
+          <TextField label="Gene" sx={{ m: 1 }} select value={assembly === "GRCh38" ? currentHumanGene : currentMouseGene}>
             {options.map((option: string) => {
               return (
-                <MenuItem key={option} value={option} onClick={() => setCurrentGene(option)}>
+                <MenuItem key={option} value={option} onClick={() => assembly === "GRCh38" ? setCurrentHumanGene(option) : setCurrentMouseGene(option)}>
                   {option}
                 </MenuItem>
               )
@@ -298,32 +343,56 @@ export function GeneExpression(props: {
           <ToggleButton sx={{ textTransform: "none" }} value="all">Show Duplicates</ToggleButton>
         </ToggleButtonGroup>
         <Grid2 xs={12}>
-          {loading_gene || loading_geneexp ?
-            <Grid2 xs={12} md={12} lg={12}>
-              <LoadingMessage />
-            </Grid2>
+          {assembly === "GRCh38" ?
+            loadingHumanGene || loadingHumanExp ?
+              <Grid2 xs={12} md={12} lg={12}>
+                <LoadingMessage />
+              </Grid2>
+              :
+              humanGeneExpData ?
+                <PlotGeneExpression
+                  data={humanGeneExpData}
+                  range={{
+                    x: { start: 0, end: 4 },
+                    y: { start: 0, end: 0 },
+                  }}
+                  dimensions={{
+                    x: { start: 0, end: 650 },
+                    y: { start: 250, end: 0 },
+                  }}
+                  group={group}
+                  scale={scale}
+                  replicates={replicates}
+                />
+                :
+                <Typography variant="h5">
+                  Please Select a Gene
+                </Typography>
             :
-            geneExpData ?
-              <PlotGeneExpression
-                data={geneExpData}
-                range={{
-                  x: { start: 0, end: 4 },
-                  y: { start: 0, end: 0 },
-                }}
-                dimensions={{
-                  // x: { start: 125, end: 650 },
-                  x: { start: 0, end: 650 },
-                  y: { start: 250, end: 0 },
-                }}
-                // RNAtype={RNAtype}
-                group={group}
-                scale={scale}
-                replicates={replicates}
-              />
+            loadingMouseGene || loadingMouseExp ?
+              <Grid2 xs={12} md={12} lg={12}>
+                <LoadingMessage />
+              </Grid2>
               :
-              <Typography variant="h5">
-                Please Select a Gene
-              </Typography>
+              mouseGeneExpData ?
+                <PlotGeneExpression
+                  data={mouseGeneExpData}
+                  range={{
+                    x: { start: 0, end: 4 },
+                    y: { start: 0, end: 0 },
+                  }}
+                  dimensions={{
+                    x: { start: 0, end: 650 },
+                    y: { start: 250, end: 0 },
+                  }}
+                  group={group}
+                  scale={scale}
+                  replicates={replicates}
+                />
+                :
+                <Typography variant="h5">
+                  Please Select a Gene
+                </Typography>
           }
         </Grid2>
       </Grid2>

diff --git a/screen2.0/src/app/search/ccredetails/nearbygenomicfeatures.tsx b/screen2.0/src/app/search/ccredetails/nearbygenomicfeatures.tsx
@@ -208,7 +208,7 @@ export const NearByGenomicFeatures: React.FC<{
                     },
                   ]}
                   sortColumn={1}
-                  tableTitle="SNPs "
+                  tableTitle="SNPs"
                   rows={snps || []}
                   itemsPerPage={10}
                   searchable

diff --git a/screen2.0/src/app/search/ccresearch.tsx b/screen2.0/src/app/search/ccresearch.tsx
@@ -124,7 +124,8 @@ export const CcreSearch = (props: { mainQueryParams: MainQueryParams, globals })
 
     // If you're closing a tab to the right of what you're on:
     if (closedIndex > (page - 2)) {
-       // No action needed
+      //Close cCREs in URL
+      router.push(basePathname + '?' + createQueryString("accession", newOpencCREs.map((x) => x.ID).join(',')))
     }
     // If you're closing the tab you're on:
     if (closedIndex === (page - 2)) {
@@ -153,8 +154,9 @@ export const CcreSearch = (props: { mainQueryParams: MainQueryParams, globals })
     // If you're closing a tab to the left of what you're on: 
     if (closedIndex < (page - 2)) {
       // Page count -= 1 to keep tab position
+      // Remove selected cCRE from list
       setPage(page - 1)
-      router.push(basePathname + '?' + createQueryString("page", String(page - 1)))
+      router.push(basePathname + '?' + createQueryString("accession", newOpencCREs.map((x) => x.ID).join(','), "page", String(page - 1)))
     }
   }
 
@@ -241,8 +243,8 @@ export const CcreSearch = (props: { mainQueryParams: MainQueryParams, globals })
             value={page}
             onChange={handlePageChange}
           >
-            {/* Hidden empty icon button to keep tab height consistent */}
-            <StyledTab iconPosition="end" icon={<IconButton sx={{display: 'none'}}/>} value={0} label="Table View" />
+            {/* Hidden empty icon to keep tab height consistent */}
+            <StyledTab iconPosition="end" icon={<Box sx={{display: 'none'}}/>} value={0} label="Table View" />
             {!props.mainQueryParams.bed_intersect &&
               <StyledTab value={1} label="Genome Browser View" />
             }
@@ -253,9 +255,9 @@ export const CcreSearch = (props: { mainQueryParams: MainQueryParams, globals })
                   onClick={(event) => event.preventDefault} key={i} value={2 + i}
                   label={cCRE.ID}
                   icon={
-                    <IconButton onClick={(event) => { event.stopPropagation(); handleClosecCRE(cCRE.ID) }}>
+                    <Box onClick={(event) => { event.stopPropagation(); handleClosecCRE(cCRE.ID) }}>
                       <CloseIcon />
-                    </IconButton>
+                    </Box>
                   }
                   iconPosition="end" />
               )

diff --git a/screen2.0/src/common/components/ResponsiveAppBar.tsx b/screen2.0/src/common/components/ResponsiveAppBar.tsx
@@ -21,14 +21,18 @@ const pageLinks = [
     pageName: "About",
     link: "/about",
     dropdownID: "0",
-    subPages: [
-      { pageName: "Overview", link: "/about" },
-      { pageName: "Tutorials", link: "/about#tutorials" },
-      { pageName: "API Documentation", link: "/about#api-documentation" },
-      { pageName: "Versions", link: "/about#versions" },
-      { pageName: "UCSC Genome Browser", link: "/about#ucsc-genome-browser" },
-      { pageName: "Contact US", link: "/about#contact-us" },
-    ],
+    // subPages: [
+    //   { pageName: "Overview", link: "/about" },
+    //   { pageName: "Tutorials", link: "/about#tutorials" },
+    //   { pageName: "API Documentation", link: "/about#api-documentation" },
+    //   { pageName: "Versions", link: "/about#versions" },
+    //   { pageName: "UCSC Genome Browser", link: "/about#ucsc-genome-browser" },
+    //   { pageName: "Contact US", link: "/about#contact-us" },
+    // ],
+  },
+  {
+    pageName: "Downloads",
+    link: "/downloads",
   },
   {
     pageName: "Applets",
@@ -41,10 +45,6 @@ const pageLinks = [
      // { pageName: "Differential Gene Expression", link: "/applets/differential-gene-expression" },
     ],
   },
-  {
-    pageName: "Downloads",
-    link: "/downloads",
-  },
 ]
 
 function ResponsiveAppBar() {