Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

css for resources page #270

Merged
merged 1 commit into from
Dec 19, 2023
Merged

css for resources page #270

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 2 additions & 29 deletions client/src/components/account/Servers.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,34 +9,7 @@ import { removeBcoDb, groupsPermissions, groupInfo } from "../../slices/accountS
import AddServer from "./AddServer";
import { useNavigate } from "react-router-dom";

const useStyles = makeStyles({
bullet: {
display: "inline-block",
margin: "0 2px",
transform: "scale(0.8)",
},
serverCard: {
minWidth: 275,
minHeight: "250px",
maxWidth: "500px",
textAlign: "left",
marginBottom: 12,
marginTop: 12,
marginLeft: 12,
},
heightened: {
minHeight: "250px"
},
title: {
fontSize: "37px",
},
pos: {
marginBottom: 12,
},
});

export default function Servers() {
const classes = useStyles();
const dispatch = useDispatch()
const currentUser = useSelector((state) => state.account.user);
const bcodbs = currentUser.bcodbs
Expand Down Expand Up @@ -66,10 +39,10 @@ export default function Servers() {

return (
<Container elevation={2}>
<Typography className={classes.title}>BCO databases</Typography>
<Typography className={"Account-Servers-title"}>BCO databases</Typography>
{
bcodbs.map((database, index) => (
<Card key={index} className={classes.serverCard}>
<Card key={index} className={"Account-Servers-server-card"}>
<Button
variant="contained"
color="secondary"
Expand Down
9 changes: 8 additions & 1 deletion client/src/components/bcodbs/SearchResults.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -264,7 +264,14 @@ export default function EnhancedTable({bcodbInfo}) {
global.window.open(`${location}/viewer?${object_id}`, "_blank", "noopener,noreferrer")
}
if (state === "DRAFT") {
global.window.open(`${location}/builder?${object_id}`, "_blank", "noopener,noreferrer")
dispatch(getDraftBco(object_id))
.unwrap()
.catch((error) => {
console.log(error)
})
.then(() => {
global.window.open(`${location}/builder?${object_id}`)
})
}
}

Expand Down
32 changes: 3 additions & 29 deletions client/src/components/resources/Builder.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,45 +4,19 @@ import React from "react";
import {
Card,
CardActionArea,
// CardActions,
CardContent,
makeStyles,
Typography
} from "@material-ui/core";

// Routing to pages
import { Link as RouterLink } from "react-router-dom";

const useStyles = makeStyles({
root: {
minWidth: 275,
},
bullet: {
display: "inline-block",
margin: "0 2px",
transform: "scale(0.8)",
},
linkCard: {
minHeight: "300px",
textAlign: "center"
},
title: {
fontSize: "33px",
},
pos: {
marginBottom: 12,
},
});

export default function Builder() {
const classes = useStyles();
const logo = require("../../images/logo.png");

return (
<Card className={`${classes.root} ${classes.linkCard}`} elevation={2}>
<CardActionArea className={classes.linkCard} component={RouterLink} to="/builder">
<Card className="resources-root resources-linkcard" elevation={2}>
<CardActionArea className="resources-linkcard" component={RouterLink} to="/builder">
<CardContent>
<Typography className={classes.title}>
<Typography className="resources-title">
<img src={logo} height={100} alt="BCO logo" />
<br />
BioCompute Builder
Expand Down
33 changes: 3 additions & 30 deletions client/src/components/resources/DNAnexus.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,42 +9,15 @@ import {
Typography
} from "@material-ui/core";


const useStyles = makeStyles({
root: {
minWidth: 275,
},
bullet: {
display: "inline-block",
margin: "0 2px",
transform: "scale(0.8)"
},
linkCard: {
minHeight: "300px",
textAlign: "center"
},
supportCard: {
textAlign: "center",
marginBottom: 12
},
title: {
fontSize: "33px",
},
pos: {
marginBottom: 12,
},
});

export default function dnanexus() {
const classes = useStyles();
const dnanexuslogo = require("../../images/dnanexus.png");
const dnanexusLink = "https://hub.docker.com/r/bcodocker/bconexus";

return (
<Card className={`${classes.root} ${classes.supportCard}`} elevation={5}>
<CardActionArea onClick={() => window.open(dnanexusLink)}>
<Card className="resources-supportcard resources-root" elevation={5}>
<CardActionArea onClick={() => global.window.open(dnanexusLink)}>
<CardContent>
<Typography className={classes.title}>
<Typography className="resources-title">
<img src={dnanexuslogo} height={40} alt="DNAnexus logo" />
</Typography>
<Typography>
Expand Down
32 changes: 3 additions & 29 deletions client/src/components/resources/Galaxy.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,46 +5,20 @@ import {
Card,
CardActionArea,
CardContent,
makeStyles,
Typography
} from "@material-ui/core";

const useStyles = makeStyles({
root: {
minWidth: 275,
},
bullet: {
display: "inline-block",
margin: "0 2px",
transform: "scale(0.8)",
},
linkCard: {
minHeight: "250px",
textAlign: "center"
},
heightened: {
minHeight: "250px"
},
title: {
fontSize: "37px",
},
pos: {
marginBottom: 12,
},
});

export default function Galaxy() {
const classes = useStyles();

const hive = require("../../images/galaxy.png");
const aws = require("../../images/powered-by-aws.png");
const galaxyLink = ("https://usegalaxy.org/");

return (
<Card className={`${classes.root} ${classes.linkCard}`} elevation={2}>
<Card className="resources-supportcard resources-root" elevation={5}>
<CardContent>
<CardActionArea onClick={() => window.open(galaxyLink)}>
<Typography className={classes.title}>
<CardActionArea onClick={() => global.window.open(galaxyLink)}>
<Typography className="resources-title">
<img src={hive} height={65} alt="Galaxy logo" />
<br />
<img src={aws} height={35} alt="AWS logo" />
Expand Down
33 changes: 3 additions & 30 deletions client/src/components/resources/Hive.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,49 +4,22 @@ import React from "react";
import {
Card,
CardActionArea,
CardActions,
CardContent,
makeStyles,
Typography
} from "@material-ui/core";

const useStyles = makeStyles({
root: {
minWidth: 275,
},
bullet: {
display: "inline-block",
margin: "0 2px",
transform: "scale(0.8)",
},
supportCard: {
minHeight: "250px",
textAlign: "center"
},
heightened: {
minHeight: "250px"
},
title: {
fontSize: "37px",
},
pos: {
marginBottom: 12,
},
});

const hive = require("../../images/hive.png");
const aws = require("../../images/powered-by-aws.png");

const hiveLink = "https://hive.aws.biochemistry.gwu.edu/dna.cgi?cmd=main";

export default function Hive() {
const classes = useStyles();

return (
<Card className={`${classes.root} ${classes.supportCard}`} elevation={2}>
<Card className="resources-supportcard resources-root" elevation={5}>
<CardContent>
<CardActionArea onClick={() => window.open(hiveLink)}>
<Typography className={classes.title}>
<CardActionArea onClick={() => global.window.open(hiveLink)}>
<Typography className="resources-title">
<img src={hive} height={65} alt="HIVE logo" />
<br />
<img src={aws} height={35} alt="AWS logo" />
Expand Down
44 changes: 8 additions & 36 deletions client/src/components/resources/Packages.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,69 +5,41 @@ import {
Card,
CardActionArea,
CardContent,
makeStyles,
Typography
} from "@material-ui/core";
import cranLogo from "../../images/cran.png";
import gitLogo from "../../images/Octocat.png";

const useStyles = makeStyles({
bullet: {
display: "inline-block",
margin: "0 2px",
transform: "scale(0.8)"
},
linkCard: {
minHeight: "300px",
textAlign: "center"
},
supportCard: {
textAlign: "center",
marginBottom: 12
},
title: {
minWidth: 275,
fontSize: "33px"
},
subtitle: {
fontSize: "25px",
},
pos: {
marginBottom: 12,
},
});

export default function Packages() {
const classes = useStyles();
const bcotoolLink = "https://github.com/biocompute-objects/bcotool/tree/1.1.0";
const cranBCOLink = "https://cran.r-project.org/web/packages/biocompute/index.html";

return (
<Card className={classes.supportCard} elevation={5}>
<Typography className={classes.title}>
<Card className="resources-supportcard resources-root" elevation={5}>
<Typography className="resources-title">
Software Packages
<br />
</Typography>
<CardActionArea onClick={() => window.open(cranBCOLink)}>
<CardActionArea onClick={() => global.window.open(cranBCOLink)}>
<CardContent>
<Typography className={classes.subtitle}>
<Typography className="resources-subtitle">
<img src={cranLogo} height={25} alt="CRAN logo" />
CRAN biocompute
<br />
</Typography>
<Typography className={classes.bullet}>
<Typography className="resources-bullet">
Tools to create, validate, and export BioCompute Objects
</Typography>
</CardContent>
</CardActionArea>
<CardActionArea onClick={() => window.open(bcotoolLink)}>
<CardActionArea onClick={() => global.window.open(bcotoolLink)}>
<CardContent>
<Typography className={classes.subtitle}>
<Typography className="resources-subtitle">
<img src={gitLogo} height={25} alt="BCO logo" />
BCO Tool
<br />
</Typography>
<Typography className={classes.bullet}>
<Typography className="resources-bullet">
Command line tool to create, validate, and export BioCompute Objects
</Typography>
</CardContent>
Expand Down
34 changes: 12 additions & 22 deletions client/src/components/resources/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,8 @@ import {
Paper,
} from "@material-ui/core";

import Tsc from "./Tsc.js";
import CGC from "./CGC.js";
import Packages from "./Packages";
import Builder from "./Builder";
import Galaxy from "./Galaxy";
import Hive from "./Hive";
import Citations from "./Citations";
Expand Down Expand Up @@ -46,34 +44,26 @@ function DocView() {
<Paper>
<Container maxWidth={false}>
<Grid container justifyContent="space-around" spacing={3}>
<Grid item xs={12} sm={6} lg={4} xl={4}>
<Grid item xs={12} sm={6} lg={6} xl={6}>
<Dnanexus />
</Grid>
<Grid item xs={12} sm={6} lg={4} xl={4} >
<Grid item xs={12} sm={6} lg={6} xl={6}>
<CGC />
</Grid>
</Grid>
<Grid classes={classes.colored} container alignItems="space-around" spacing={3}>
<Grid item lg={4} sm={6} xl={4} xs={12}>
<Hive />
</Grid>
<Grid item lg={4} sm={6} xl={4} xs={12}>
<Packages />
</Grid>
<Grid item xs={12} sm={6} lg={4} xl={4}>
<CGC />
<Grid item lg={4} sm={6} xl={4} xs={12}>
<Galaxy />
</Grid>
{/* <Grid classes={classes.colored} container alignItems="stretch" spacing={3}> */}
{/* <Grid item lg={4} sm={6} xl={4} xs={12}>
<Hive />
</Grid> */}
{/* <Grid item lg={4} sm={6} xl={4} xs={12}>
<Packages />
</Grid> */}
{/* <Grid item lg={4} sm={6} xl={4} xs={12}>
<Galaxy />
</Grid> */}
{/* <Grid item lg={3} sm={6} xl={4} xs={12}>
<Tsc />
</Grid> */}
<Grid item xs={12} sm={12} lg={12} xl={12}>
<Citations />
</Grid>

{/* </Grid> */}

</Grid>
</Container>
</Paper>
Expand Down