Styling fixes

Improved styling of the Genome Browser view by reducing white space and reducing font sizes.
weng-lab · Jan 8, 2025 · 57b9b96 · 57b9b96
1 parent b912512
commit 57b9b96
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 15 deletions.
diff --git a/screen2.0/src/app/search/_newgbview/browser.tsx b/screen2.0/src/app/search/_newgbview/browser.tsx
@@ -150,20 +150,52 @@ export const Browser = ({ cCREClick, state, dispatch, coordinates, gene, biosamp
 
     return (
         <GQLWrapper>
-            <Grid container spacing={3} sx={{ mt: "1rem", mb: "1rem" }} ref={containerRef} justifyContent="center" alignItems="center">
-                <Grid size={{ xs: 12, lg: 12 }} style={{ display: "flex", justifyContent: "center", alignItems: "center" }}>
+            <Grid container spacing={3} sx={{ mt: "0rem", mb: "1rem" }} ref={containerRef} justifyContent="center" alignItems="center">
+                <Grid size={{ xs: 12, lg: 12 }} style={{ display: "flex", flexDirection: "column", justifyContent: "center", alignItems: "center", marginTop: "0px" }}>
+                    <h3 style={{ marginBottom: "0px", marginTop: "0px" }}>
+                        {coordinates.assembly} at {state.domain.chromosome}:{state.domain.start.toLocaleString()}-{state.domain.end.toLocaleString()}
+                    </h3>
                     <svg id="cytobands" width={"700px"} height={20}>
                         <GQLCytobands assembly={coordinates.assembly === "GRCh38" ? "hg38" : "mm10"} chromosome={coordinates.chromosome} currentDomain={state.domain} />
                     </svg>
-                    <h2>
-                        {coordinates.assembly} at {state.domain.chromosome}:{state.domain.start}-{state.domain.end}
-                    </h2>
                 </Grid>
                 <Grid size={{ xs: 12, lg: 12 }}>
-                    <Controls inputButtonComponent={<IconButton type="button" sx={{ color: "black", maxHeight: "100%" }}>
-                        <Search />
-                    </IconButton>
-                    } inputComponent={SearchInput(state.domain.chromosome + ":" + state.domain.start + "-" + state.domain.end)} buttonComponent={<Button variant="outlined" sx={{ minWidth: "0px" }} />} domain={state.domain} dispatch={dispatch} withInput style={{ paddingBottom: "4px" }} />
+                    <div style={{ width: "100%" }}>
+                        <Controls
+                            inputButtonComponent={
+                                <IconButton type="button" sx={{
+                                    color: "black",
+                                    maxHeight: "100%",
+                                    padding: "4px"
+                                }}>
+                                    <Search fontSize="small" />
+                                </IconButton>
+                            }
+                            inputComponent={SearchInput(state.domain.chromosome + ":" + state.domain.start + "-" + state.domain.end)}
+                            buttonComponent={
+                                <Button
+                                    variant="outlined"
+                                    sx={{
+                                        minWidth: "0px",
+                                        width: { xs: "100%", sm: "80%" },
+                                        maxWidth: "120px",
+                                        fontSize: "0.8rem",
+                                        padding: "4px 8px"
+                                    }}
+                                />
+                            }
+                            domain={state.domain}
+                            dispatch={dispatch}
+                            withInput
+                            style={{
+                                paddingBottom: "4px",
+                                display: "flex",
+                                flexWrap: "wrap",
+                                gap: "4px",
+                                width: "100%"
+                            }}
+                        />
+                    </div>
                     <GenomeBrowser width={"100%"} browserState={state} browserDispatch={dispatch} />
                 </Grid>
             </Grid >
@@ -182,15 +214,25 @@ function SearchInput(placeholder: string) {
                 inputLabel: {
                     shrink: true,
                     htmlFor: "region-input",
-                    style: { color: "black" },
+                    style: {
+                        color: "#000F9F",
+                        fontSize: "0.8rem"
+                    },
                 },
-                input: { style: { color: "#000F9F" } }
+                input: {
+                    style: {
+                        color: "#000F9F",
+                        fontSize: "0.8rem"
+                    }
+                }
             }}
             sx={{
-                mr: "1rem",
-                minWidth: "16rem",
+                mr: { xs: "0.5rem", sm: "0.5rem" },
+                minWidth: { xs: "100%", sm: "14rem" },
+                maxWidth: "250px",
                 fieldset: { borderColor: "#000F9F" },
-                height: "30px"
+                height: "30px",
+                mb: "5px"
             }}
             size="small"
         />

diff --git a/screen2.0/src/app/search/page.tsx b/screen2.0/src/app/search/page.tsx
@@ -519,7 +519,6 @@ export default function Search({ searchParams }: { searchParams: { [key: string]
     browserDispatch({ type: BrowserActionType.REMOVE_HIGHLIGHT, id: closedID })
     const newOpencCREs = opencCREs.filter((cCRE) => cCRE.ID != closedID)
 
-
     const closedPage = opencCREs.findIndex(x => x.ID === closedID) + numberOfDefaultTabs
     if (newOpencCREs.length === 0 && closedPage === page) {
       setPage(0)