Skip to content

Commit 29f6e3c

Browse files
iris-liu0312iris-liu0312
authored
Merge pull request #17 from iris-liu0312/master
Bug Fixes, UI overhaul
2 parents 6533d33 + 527f143 commit 29f6e3c

13 files changed

Lines changed: 355 additions & 264 deletions

File tree

‎app.py‎

Lines changed: 194 additions & 135 deletions
Large diffs are not rendered by default.

‎static/package-lock.json‎

Lines changed: 13 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎static/package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "schema-interface",
3-
"version": "0.5.1",
3+
"version": "0.5.5",
44
"description": "Schema Curation Interface",
55
"private": true,
66
"scripts": {
@@ -29,6 +29,7 @@
2929
"dependencies": {
3030
"@emotion/react": "^11.7.1",
3131
"@emotion/styled": "^11.6.0",
32+
"@fontsource/roboto": "^4.5.3",
3233
"@material-ui/core": "^4.10.1",
3334
"@material-ui/icons": "^4.11.2",
3435
"@mui/icons-material": "^5.4.1",

‎static/src/App.js‎

Lines changed: 76 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
import React from "react";
2-
import { Row, Col } from 'reactstrap';
1+
import React from 'react';
32
import {
43
BrowserRouter as Router,
54
Routes,
@@ -9,52 +8,93 @@ import {
98

109
import Home from "./template/Home";
1110
import Viewer from "./template/Viewer";
12-
import logo from './public/logo.png'
11+
12+
import Button from '@mui/material/Button';
13+
import { ThemeProvider, createTheme } from '@mui/material/styles';
14+
import AppBar from '@mui/material/AppBar';
15+
import Toolbar from '@mui/material/Toolbar';
16+
import Typography from '@mui/material/Typography';
17+
18+
import IconButton from '@mui/material/IconButton';
1319
import GitHubIcon from '@mui/icons-material/GitHub';
1420
import HelpIcon from '@mui/icons-material/Help';
1521

16-
import './App.scss'
22+
import '@fontsource/roboto/300.css';
23+
import '@fontsource/roboto/400.css';
24+
import '@fontsource/roboto/500.css';
25+
import '@fontsource/roboto/700.css';
26+
import './App.scss';
27+
28+
// TODO make link hover not blue
29+
// TODO make logo not blurry as hell
30+
31+
const theme = createTheme({
32+
palette: {
33+
primary: {
34+
light: '#757ce8',
35+
main: '#3f50b5',
36+
dark: '#002884',
37+
contrastText: '#fff',
38+
},
39+
secondary: {
40+
light: '#ff7961',
41+
main: '#f44336',
42+
dark: '#ba000d',
43+
contrastText: '#000',
44+
},
45+
},
46+
});
1747

1848
export default function App() {
19-
return (
20-
<Router>
21-
<div className="App">
22-
<Row className="Header">
23-
<Col md="2" id="logo">
24-
<Link to="/">
25-
<img src={'/static'+ logo} alt="Curate" />
26-
</Link>
27-
</Col>
28-
<Col md="1" />
29-
<Col md="3" id="title" className="align-self-center">
30-
<div><h1>CURATE</h1></div>
31-
<div><h4 >Schema Curation Interface</h4></div>
32-
</Col>
33-
<Col md="5" className="align-self-center">
34-
<Row>
35-
<Col md="1" />
36-
<Col md="3" className="nav-items">
37-
<Link to="/viewer">Viewer</Link>
38-
</Col>
39-
<Col md="1" className="nav-items">
40-
<a target="_blank" href="https://github.com/cu-clear/schema-interface">
49+
return(
50+
<Router>
51+
<ThemeProvider theme={theme}>
52+
<AppBar position="static">
53+
<Toolbar className="menu">
54+
<Typography
55+
variant="h1"
56+
noWrap
57+
component="div"
58+
sx={{ flexGrow: 1, display: {xs: 'none', sm: 'block'} }}
59+
>
60+
<Button component={Link} to="/" color="inherit">Schema Curation Interface</Button>
61+
</Typography>
62+
<Typography
63+
variant="body1"
64+
noWrap
65+
component="div"
66+
sx={{ mt:1, mr:4 }}
67+
>
68+
<Button component={Link} to="/viewer">Viewer</Button>
69+
</Typography>
70+
<IconButton
71+
size="large"
72+
edge="start"
73+
color="inherit"
74+
sx={{ mr:2 }}
75+
>
76+
<a target="_blank" rel="noopener" href="https://github.com/cu-clear/schema-interface">
4177
<GitHubIcon />
4278
</a>
43-
</Col>
44-
<Col md="1" className="nav-items">
45-
<a target="_blank" href="https://chrysographes.notion.site/Schema-Curation-Manual-c17f79c7450246d3ad7796e43bebea1b">
79+
</IconButton>
80+
<IconButton
81+
size="large"
82+
edge="start"
83+
color="inherit"
84+
sx={{ mr:2 }}
85+
>
86+
<a target="_blank" rel="noopener" href="https://chrysographes.notion.site/Schema-Curation-Manual-c17f79c7450246d3ad7796e43bebea1b">
4687
<HelpIcon />
4788
</a>
48-
</Col>
49-
</Row>
50-
</Col>
51-
</Row>
89+
</IconButton>
90+
</Toolbar>
91+
</AppBar>
92+
</ThemeProvider>
5293

5394
<Routes>
5495
<Route exact path="/" element={<Home />}/>
5596
<Route exact path="/viewer" element={<Viewer />} />
5697
</Routes>
57-
</div>
58-
</Router>
59-
);
98+
</Router>
99+
)
60100
}

‎static/src/App.scss‎

Lines changed: 17 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,18 @@
1-
.App {
2-
font-family: Arial, Helvetica, sans-serif;
3-
height: max-content;
4-
width: 100vw;
5-
}
6-
7-
.Index{
8-
font-family: Arial, Helvetica, sans-serif;
9-
text-align: center;
1+
a {
2+
color: #ddd;
103
}
11-
12-
.Header {
13-
display: inline-flex;
14-
background-color: rgb(45, 46, 49);
15-
width: 100vw;
16-
height: 20vh;
17-
text-align: center;
18-
margin-left: 0 !important;
19-
20-
#logo {
21-
height: inherit;
22-
color: #ddd;
23-
24-
img {
25-
height: inherit;
26-
}
27-
}
28-
29-
#title {
30-
color: #ddd;
31-
}
32-
33-
.nav-items{
34-
text-align: center;
35-
}
36-
37-
a{
38-
color: #ddd;
39-
}
4+
.menu a {
5+
text-decoration: none;
6+
color: #fff;
7+
display: block;
408
}
419

42-
.shrink {
43-
height: 10vh;
10+
.menu a:hover {
11+
color: rgb(192, 219, 255);
4412
}
4513

46-
.row {
47-
width: inherit;
14+
.Index{
15+
text-align: center;
4816
}
4917

5018
#viewer {
@@ -108,11 +76,11 @@
10876
}
10977

11078
input.form-check-input {
111-
width: 15px;
112-
height: 15px;
113-
padding: 0;
114-
margin: 0;
115-
vertical-align: bottom;
116-
position: relative;
117-
top: -1px;
79+
width: 15px;
80+
height: 15px;
81+
padding: 0;
82+
margin: 0;
83+
vertical-align: bottom;
84+
position: relative;
85+
top: -1px;
11886
}

‎static/src/public/cy-style.json‎

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -36,9 +36,10 @@
3636
}
3737
},
3838
{
39-
"selector": "node[_type = 'participant']",
39+
"selector": "node[_type = 'entity']",
4040
"style": {
41-
"background-color": "#bcbcbc"
41+
"background-color": "#bcbcbc",
42+
"shape": "rectangle"
4243
}
4344
},
4445
{
@@ -100,6 +101,14 @@
100101
"width": "2vw"
101102
}
102103
},
104+
{
105+
"selector": "edge[_edge_type = 'relation']",
106+
"style": {
107+
"target-arrow-color": "#777",
108+
"line-color": "#777",
109+
"width": "2vw"
110+
}
111+
},
103112
{
104113
"selector": "edge[_edge_type = 'child_outlink']",
105114
"style": {
@@ -113,12 +122,6 @@
113122
"line-color": "#91a59f",
114123
"target-arrow-color": "#91a59f"
115124
}
116-
},
117-
{
118-
"selector": ".optional-before",
119-
"style": {
120-
"line-style": "dashed"
121-
}
122125
}
123126
],
124127
"layout": {

‎static/src/public/logoS.png‎

999 Bytes
Loading

0 commit comments

Comments
 (0)