Modify ENTEx to show empty table with no data

weng-lab · Dec 11, 2024 · 2cdab3d · 2cdab3d
1 parent 18d977b
commit 2cdab3d
Showing 1 changed file with 88 additions and 94 deletions.
diff --git a/screen2.0/src/app/search/_ccredetails/entexdata.tsx b/screen2.0/src/app/search/_ccredetails/entexdata.tsx
@@ -33,120 +33,114 @@ query entexActiveAnnotationsQuery( $coordinates: GenomicRangeInput! ) {
 
 }`)
 
-export const ENTExData = (props: { accession, coordinates }) =>{
+export const ENTExData = (props: { accession, coordinates }) => {
     const { data, loading } = useQuery(ENTEx_QUERY, {
         variables: { accession: props.accession },
         fetchPolicy: "cache-and-network",
         nextFetchPolicy: "cache-first",
         client,
-      })
+    })
 
     const { data: entexActiveAnno, loading: entexActiveAnnoLoading } = useQuery(ENTEx_Active_Annotations_QUERY, {
         variables: { coordinates: props.coordinates },
         fetchPolicy: "cache-and-network",
         nextFetchPolicy: "cache-first",
         client,
-      })
+    })
 
     return (
         <Grid container spacing={3} sx={{ mt: "1rem", mb: "1rem" }}>
             {loading && <CircularProgress />}
-            {data && !loading && data.entexQuery.length>0  &&
+            {data && !loading &&
                 <Grid
                     size={{
                         xs: 12,
                         lg: 12
                     }}>
-                <DataTable
-                tableTitle={`ENTEx`}
-                columns={[
-                    {
-                        header: "Tissue",
-                        HeaderRender: () => <b>Tissue</b>,
-                        value: (row) => row.tissue.split("_").map(s=>s[0].toUpperCase()+s.slice(1)).join(" "),
-                    },
-                    {
-                        header: "Assay",
-                        HeaderRender: () => <b>Assay</b>,
-                        value: (row) => row.assay.replaceAll("_"," "),
-                    },
-                    {
-                        header: "Donor",
-                        HeaderRender: () => <b>Donor</b>,
-                        value: (row) => row.donor,
-                    },
-                    {
-                        header: "Hap 1 Count",
-                        HeaderRender: () => <b>Hap 1 Count</b>,
-                        value: (row) => row.hap1_count                
-                    },
-                    {
-                        header: "Hap 2 Count",
-                        HeaderRender: () => <b>Hap 2 Count</b>,
-                        value: (row) => row.hap2_count                
-                    },
-                    {
-                        header: "Hap 1 Allele Ratio",
-                        HeaderRender: () => <b>Hap 1 Allele Ratio</b>,
-                        value: (row) => row.hap1_allele_ratio.toFixed(2),
-                    },
-                    {
-                        header: "Experiment Accession",
-                        HeaderRender: () => <b>Experiment Accession</b>,
-                        value: (row) => row.experiment_accession,
-                        render: (row) => <CreateLink linkPrefix="https://www.encodeproject.org/experiments/" linkArg={row.experiment_accession} label={row.experiment_accession} underline="hover" />
-                    },
-                    {
-                        header: "p beta binom",
-                        HeaderRender: () => <b><i>p</i> Beta Binom</b>,
-                        value: (row) => row.p_betabinom.toFixed(2),
-                    },
-                    {
-                        header: "Imbalance Significance",
-                        HeaderRender: () => <b>Imbalance Significance</b>,
-                        value: (row) => row.imbalance_significance,
-                    }
-                ]}
-                rows={data.entexQuery || []}
-                sortColumn={5}
-                searchable
-                sortDescending
-                itemsPerPage={10}
-                />
-            </Grid> }
-            { !loading && data && data.entexQuery.length==0 && <Grid
-                size={{
-                    xs: 12,
-                    lg: 12
-                }}><Typography>No data available</Typography></Grid> }
-            {entexActiveAnno && !entexActiveAnnoLoading && entexActiveAnno.entexActiveAnnotationsQuery.length>0 && 
-            <Grid
-                size={{
-                    xs: 12,
-                    lg: 12
-                }}>
-            <DataTable
-            tableTitle={`ENTEx Active Annotations`}
-            columns={[
-                {
-                    header: "Tissue",
-                    HeaderRender: () => <b>Tissue</b>,
-                    value: (row) => row.tissue.split("_").map(s=>s[0].toUpperCase()+s.slice(1)).join(" "),
-                },
-                {
-                    header: "Supporting Assays",
-                    HeaderRender: () => <b>Supporting Assays</b>,
-                    value: (row) => row.assay_score.split("|").map(s=>s.split(":")[0]).join(", ")
-                }
-            ]}
-            rows={entexActiveAnno.entexActiveAnnotationsQuery || []}
-            sortColumn={0}
-            searchable
-            sortDescending
-            itemsPerPage={[10, 25, 100]}
-            />
-        </Grid> 
-
+                    <DataTable
+                        tableTitle={`ENTEx`}
+                        columns={[
+                            {
+                                header: "Tissue",
+                                HeaderRender: () => <b>Tissue</b>,
+                                value: (row) => row.tissue.split("_").map(s => s[0].toUpperCase() + s.slice(1)).join(" "),
+                            },
+                            {
+                                header: "Assay",
+                                HeaderRender: () => <b>Assay</b>,
+                                value: (row) => row.assay.replaceAll("_", " "),
+                            },
+                            {
+                                header: "Donor",
+                                HeaderRender: () => <b>Donor</b>,
+                                value: (row) => row.donor,
+                            },
+                            {
+                                header: "Hap 1 Count",
+                                HeaderRender: () => <b>Hap 1 Count</b>,
+                                value: (row) => row.hap1_count
+                            },
+                            {
+                                header: "Hap 2 Count",
+                                HeaderRender: () => <b>Hap 2 Count</b>,
+                                value: (row) => row.hap2_count
+                            },
+                            {
+                                header: "Hap 1 Allele Ratio",
+                                HeaderRender: () => <b>Hap 1 Allele Ratio</b>,
+                                value: (row) => row.hap1_allele_ratio.toFixed(2),
+                            },
+                            {
+                                header: "Experiment Accession",
+                                HeaderRender: () => <b>Experiment Accession</b>,
+                                value: (row) => row.experiment_accession,
+                                render: (row) => <CreateLink linkPrefix="https://www.encodeproject.org/experiments/" linkArg={row.experiment_accession} label={row.experiment_accession} underline="hover" />
+                            },
+                            {
+                                header: "p beta binom",
+                                HeaderRender: () => <b><i>p</i> Beta Binom</b>,
+                                value: (row) => row.p_betabinom.toFixed(2),
+                            },
+                            {
+                                header: "Imbalance Significance",
+                                HeaderRender: () => <b>Imbalance Significance</b>,
+                                value: (row) => row.imbalance_significance,
+                            }
+                        ]}
+                        rows={data?.entexQuery || []}
+                        sortColumn={5}
+                        searchable
+                        sortDescending
+                        itemsPerPage={10}
+                    />
+                </Grid>}
+            {entexActiveAnno && !entexActiveAnnoLoading && entexActiveAnno.entexActiveAnnotationsQuery.length > 0 &&
+                <Grid
+                    size={{
+                        xs: 12,
+                        lg: 12
+                    }}>
+                    <DataTable
+                        tableTitle={`ENTEx Active Annotations`}
+                        columns={[
+                            {
+                                header: "Tissue",
+                                HeaderRender: () => <b>Tissue</b>,
+                                value: (row) => row.tissue.split("_").map(s => s[0].toUpperCase() + s.slice(1)).join(" "),
+                            },
+                            {
+                                header: "Supporting Assays",
+                                HeaderRender: () => <b>Supporting Assays</b>,
+                                value: (row) => row.assay_score.split("|").map(s => s.split(":")[0]).join(", ")
+                            }
+                        ]}
+                        rows={entexActiveAnno.entexActiveAnnotationsQuery || []}
+                        sortColumn={0}
+                        searchable
+                        sortDescending
+                        itemsPerPage={[10, 25, 100]}
+                    />
+                </Grid>
             }
         </Grid>
     );