Skip to content

Commit

Permalink
fix some warnings, lint
Browse files Browse the repository at this point in the history
  • Loading branch information
@hpratt
hpratt committed Aug 28, 2022
1 parent 086d5aa commit adf9c7f
Show file tree
Hide file tree
Showing 9 changed files with 154 additions and 144 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "psychscreen",
"version": "0.4.0",
"version": "0.4.1",
"private": true,
"homepage": "https://weng-lab.github.io/psychscreen",
"dependencies": {
Expand Down
2 changes: 1 addition & 1 deletion src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ export const PORTALS: [ string, React.FC ][] = [

const App: React.FC = () => {

const { width, height } = useViewportSize();
const { width } = useViewportSize();
const HomePage = useMemo( () => width >= 1280 ? WebHomePage : TabletHomePage, [ width ] );

return (
Expand Down
3 changes: 1 addition & 2 deletions src/web/HomePage/AboutUsPanel.tsx
View file

Large diffs are not rendered by default.

8 changes: 4 additions & 4 deletions src/web/HomePage/PortalsPanel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ const DiseaseTraitPortalPanel: React.FC<GridProps> = props => {
</Grid>
<Grid item sm={6}>
<Container style={{ marginLeft: "160px", marginTop: "111px", width: "508px", paddingLeft: "50px" }}>
<img src={DiseaseTrait} style={{ width: "100%" }} />
<img alt="Disease/Trait Portal" src={DiseaseTrait} style={{ width: "100%" }} />
</Container>
</Grid>
<Grid item sm={6}>
Expand Down Expand Up @@ -112,7 +112,7 @@ const GeneBCREPortalPanel: React.FC<GridProps> = props => (
</Grid>
<Grid item sm={4}>
<Container style={{ width: "508px", paddingLeft: "50px" }}>
<img src={GeneBCRE} style={{ width: "100%" }} />
<img alt="Gene bCRE portal" src={GeneBCRE} style={{ width: "100%" }} />
</Container>
</Grid>
</Grid>
Expand All @@ -122,7 +122,7 @@ const SNPQTLPortalPanel: React.FC<GridProps> = props => (
<Grid container {...props}>
<Grid item sm={6}>
<Container style={{ marginLeft: "160px", marginTop: "111px", width: "508px", paddingLeft: "100px" }}>
<img src={SNPQTL} style={{ width: "120%" }} />
<img alt="SNP/QTL Portal" src={SNPQTL} style={{ width: "120%" }} />
</Container>
</Grid>
<Grid item sm={6}>
Expand Down Expand Up @@ -208,7 +208,7 @@ const SingleCellPortalPanel: React.FC<GridProps> = props => (
</Grid>
<Grid item sm={4}>
<Container style={{ width: "508px", paddingLeft: "50px" }}>
<img src={SingleCell} style={{ width: "100%" }} />
<img alt="single cell portal" src={SingleCell} style={{ width: "100%" }} />
</Container>
</Grid>
</Grid>
Expand Down
51 changes: 28 additions & 23 deletions src/web/Portals/DiseaseTraitPortal/AssociatedSnpQtl.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,29 +3,34 @@ import { Grid, Container, GridProps } from '@mui/material';
import { Typography, Button } from '@zscreen/psychscreen-ui-components';
import DataTable from "./DataTable";

const SNP_QTL_ASSOCIATION_DATA = Array(10).fill({Chromosome: 'chr12',Position: 2236139,ID: 'rs1006737', 'In Regulatory Element?':'No'});
const SNP_QTL_ASSOCIATION_DATA = Array(10).fill({
Chromosome: 'chr12',
Position: 2236139,
ID: 'rs1006737',
'In Regulatory Element?': 'No'
});

const AssociatedSnpQtl = (props: GridProps) =>{
const [table, setTable] = useState<number>(1)
const AssociatedSnpQtl: React.FC<GridProps> = props => {
const [ table, setTable ] = useState<number>(1);
return (
<Grid container {...props}>
<Grid item sm={6}>
<Container style={{ marginTop: "30px", marginLeft: "130px", width: "800px" }}>
<Typography
type="body"
size="large"
style={{ fontSize: "16px", lineHeight: "24px", fontWeight: 400, letterSpacing: "0.3%", marginBottom: "16px" }}
>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean cursus turpis a orci volutpat, id congue leo laoreet. Nulla facilisi. Duis sit amet lorem faucibus, venenatis dui a, ultricies mi. In hac habitasse platea dictumst. Vestibulum ac laoreet tortor.
</Typography>
<Button style={{ marginTop: "30px" }} bvariant={table===1 ? "filled" : "outlined"} btheme="light" onClick={()=>{ setTable(1)}} >Table 1</Button>&nbsp;&nbsp;&nbsp;
<Button style={{ marginTop: "30px" }} bvariant={table===2 ? "filled" : "outlined"} btheme="light" onClick={()=>{ setTable(2)}} >Table 2</Button>&nbsp;&nbsp;&nbsp;
<br/>
<br/>
<DataTable style={{ width: "max-content" }} tabledata={SNP_QTL_ASSOCIATION_DATA}/>
</Container>
<Grid container {...props}>
<Grid item sm={6}>
<Container style={{ marginTop: "30px", marginLeft: "130px", width: "800px" }}>
<Typography
type="body"
size="large"
style={{ fontSize: "16px", lineHeight: "24px", fontWeight: 400, letterSpacing: "0.3%", marginBottom: "16px" }}
>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean cursus turpis a orci volutpat, id congue leo laoreet. Nulla facilisi. Duis sit amet lorem faucibus, venenatis dui a, ultricies mi. In hac habitasse platea dictumst. Vestibulum ac laoreet tortor.
</Typography>
<Button style={{ marginTop: "30px" }} bvariant={table===1 ? "filled" : "outlined"} btheme="light" onClick={()=>{ setTable(1)}} >Table 1</Button>&nbsp;&nbsp;&nbsp;
<Button style={{ marginTop: "30px" }} bvariant={table===2 ? "filled" : "outlined"} btheme="light" onClick={()=>{ setTable(2)}} >Table 2</Button>&nbsp;&nbsp;&nbsp;
<br/>
<br/>
<DataTable style={{ width: "max-content" }} tabledata={SNP_QTL_ASSOCIATION_DATA}/>
</Container>
</Grid>
</Grid>
</Grid>)
}

export default AssociatedSnpQtl;
);
};
export default AssociatedSnpQtl;
68 changes: 29 additions & 39 deletions src/web/Portals/DiseaseTraitPortal/DataTable.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import * as React from "react";
import React from "react";
import { styled } from "@mui/material/styles";
import Table from "@mui/material/Table";
import { TableProps as MUITableProps } from '@mui/material/Table';
Expand All @@ -8,50 +8,40 @@ import TableContainer from "@mui/material/TableContainer";
import TableHead from "@mui/material/TableHead";
import TableRow from "@mui/material/TableRow";


const StyledTableCell = styled(TableCell)(() => ({
border: "None",
paddingLeft: "16px",
textAlign: "center",
font: "Helvetica Neue"
border: "None",
paddingLeft: "16px",
textAlign: "center",
font: "Helvetica Neue"
}));

const StyledTableRow = styled(TableRow)(() => ({

root: {height: 10},
"&:nth-of-type(odd)": {
backgroundColor:"#F5F5F5"
}
root: {height: 10},
"&:nth-of-type(odd)": {
backgroundColor: "#F5F5F5"
}
}));

export type DataTableProps = MUITableProps & { tabledata: Array<Object> };

export type DataTableProps = MUITableProps & {tabledata: Array<Object>}

const DataTable = (props: DataTableProps ) => {
return (
const DataTable: React.FC<DataTableProps> = props => (
<TableContainer>
<Table aria-label="customized table" style={{width: "max-content"}}>
<TableHead >
<TableRow>
{Object.keys(props.tabledata[0]).map(t=>{
return <TableCell style={{textAlign:"center", fontWeight: "bold" ,border:"None"}}>{t}</TableCell>
})}
</TableRow>
</TableHead>
<TableBody>
{props.tabledata.map((row,i) => {
return(
<StyledTableRow key={i}>
{Object.values(row).map(v=>{
return <StyledTableCell> {v}</StyledTableCell>
})
}
</StyledTableRow>
)})}
</TableBody>
</Table>
<Table aria-label="customized table" style={{width: "max-content"}}>
<TableHead >
<TableRow>
{ Object.keys(props.tabledata[0]).map(t => (
<TableCell style={{ textAlign:"center", fontWeight: "bold", border:"None" }}>{t}</TableCell>
))}
</TableRow>
</TableHead>
<TableBody>
{ props.tabledata.map((row, i) => (
<StyledTableRow key={i}>
{ Object.values(row).map(v => <StyledTableCell>{v}</StyledTableCell>) }
</StyledTableRow>
))}
</TableBody>
</Table>
</TableContainer>
);
}

export default DataTable;
);
export default DataTable;
21 changes: 9 additions & 12 deletions src/web/Portals/DiseaseTraitPortal/DiseaseTrailDetails.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,10 @@ import GeneAssociations from "./GeneAssociations";
import AssociatedSnpQtl from "./AssociatedSnpQtl";

const DiseaseTraitDetails: React.FC<GridProps> = (props) => {
const {disease} = useParams()
const {disease} = useParams();
const navigate = useNavigate();

const [page, setPage] = useState<number>(0)
const [page, setPage] = useState<number>(0);
return (
<>
<AppBar
Expand Down Expand Up @@ -54,7 +54,7 @@ const DiseaseTraitDetails: React.FC<GridProps> = (props) => {

</Container>
</Grid>
{page===0 &&
{ page === 0 && (
<Grid item sm={12}>
<Container style={{ marginTop: "50px", marginLeft: "150px" }}>
<Typography
Expand Down Expand Up @@ -102,23 +102,20 @@ const DiseaseTraitDetails: React.FC<GridProps> = (props) => {
</Typography>
</Container>
</Grid>
}
{page===1 &&
)}
{ page === 1 && (
<Grid item sm={12}>
<GeneAssociations/>
</Grid>

}
{page===2 &&
)}
{ page === 2 && (
<Grid item sm={12}>
<AssociatedSnpQtl/>
</Grid>

}
)}
</Grid>
</>
);

}

export default DiseaseTraitDetails
export default DiseaseTraitDetails;
54 changes: 30 additions & 24 deletions src/web/Portals/DiseaseTraitPortal/GeneAssociations.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,30 +4,36 @@ import { Typography, Button } from '@zscreen/psychscreen-ui-components';
import DataTable from "./DataTable";
import { GridProps } from '@mui/material';

const GENE_ASSOCIATION_DATA = Array(10).fill({Symbol: 'DRD2','Overall Association Score': 0.60,'Genetic Associations': 'No Data', 'Text Mining':0.08, 'RNA Expression': 'No data'});
const GENE_ASSOCIATION_DATA = Array(10).fill({
Symbol: 'DRD2',
'Overall Association Score': 0.60,
'Genetic Associations': 'No Data',
'Text Mining': 0.08,
'RNA Expression': 'No data'
});

const GeneAssociations = (props: GridProps) =>{
const [table, setTable] = useState<number>(1)
const GeneAssociations: React.FC<GridProps> = props => {
const [ table, setTable ] = useState(1);
return (
<Grid container {...props}>
<Grid item sm={6}>
<Container style={{ marginTop: "50px", marginLeft: "150px", width: "800px" }}>
<Typography
type="body"
size="large"
style={{ fontSize: "16px", lineHeight: "24px", fontWeight: 400, letterSpacing: "0.3%", marginBottom: "16px" }}
>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean cursus turpis a orci volutpat, id congue leo laoreet. Nulla facilisi. Duis sit amet lorem faucibus, venenatis dui a, ultricies mi. In hac habitasse platea dictumst. Vestibulum ac laoreet tortor.
</Typography>
<Button bvariant={table===1 ? "filled" : "outlined"} btheme="light" onClick={()=>{ setTable(1)}} >Table 1</Button>&nbsp;&nbsp;&nbsp;
<Button bvariant={table===2 ? "filled" : "outlined"} btheme="light" onClick={()=>{ setTable(2)}} >Table 2</Button>&nbsp;&nbsp;&nbsp;
<br/>
<br/>
<DataTable style={{ width: "100%" }} tabledata={GENE_ASSOCIATION_DATA}/>

</Container>
<Grid container {...props}>
<Grid item sm={6}>
<Container style={{ marginTop: "50px", marginLeft: "150px", width: "800px" }}>
<Typography
type="body"
size="large"
style={{ fontSize: "16px", lineHeight: "24px", fontWeight: 400, letterSpacing: "0.3%", marginBottom: "16px" }}
>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean cursus turpis a orci volutpat, id congue leo laoreet. Nulla facilisi. Duis sit amet lorem faucibus, venenatis dui a, ultricies mi. In hac habitasse platea dictumst. Vestibulum ac laoreet tortor.
</Typography>
<Button bvariant={table===1 ? "filled" : "outlined"} btheme="light" onClick={()=>{ setTable(1)}} >Table 1</Button>&nbsp;&nbsp;&nbsp;
<Button bvariant={table===2 ? "filled" : "outlined"} btheme="light" onClick={()=>{ setTable(2)}} >Table 2</Button>&nbsp;&nbsp;&nbsp;
<br/>
<br/>
<DataTable style={{ width: "100%" }} tabledata={GENE_ASSOCIATION_DATA}/>

</Container>
</Grid>
</Grid>
</Grid>)
}

export default GeneAssociations;
);
};
export default GeneAssociations;
Loading

0 comments on commit adf9c7f

Please sign in to comment.