Skip to content

Commit 1aa487d

Browse files
nbonfilsnbonfils
committed
Add UI style
1 parent 670e1f7 commit 1aa487d

File tree

9 files changed

+357
-178
lines changed

9 files changed

+357
-178
lines changed

‎package-lock.json

+8-2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"name": "bibliograph2",
2+
"name": "bibliograph",
33
"version": "0.1.0",
44
"description": "",
55
"main": "src/index.js",
@@ -22,6 +22,7 @@
2222
"prettier": "^3.3.3"
2323
},
2424
"dependencies": {
25+
"@ajusa/lit": "^1.1.0",
2526
"file-saver": "^2.0.5",
2627
"graphology": "^0.25.4",
2728
"graphology-components": "^1.5.4",

‎src/components/progressbar.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,19 @@ import van from "vanjs-core";
22

33
const { div } = van.tags;
44

5-
const ProgressBar = (progressState) =>
5+
const ProgressBar = (progressState, label = "") =>
66
div(
77
{
88
class: "progress-container",
9-
style: "background-color: lightgray;width: 80%",
9+
style: "background-color: lightgray;width: 100%",
1010
},
1111
div(
1212
{
1313
class: "progress-bar",
1414
style: () =>
15-
`background-color: #2196F3;color: white;height: 24px;width: ${progressState.val}%`,
15+
`white-space: nowrap;overflow: visible;background-color: #2196F3;color: white;height: 24px;width: ${progressState.val}%`,
1616
},
17-
() => `${progressState.val}%`,
17+
() => `${label}${progressState.val}%`,
1818
),
1919
);
2020

‎src/index.css

+87-32
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,117 @@
1+
h1 {
2+
margin-top: 0px;
3+
}
4+
5+
h4 {
6+
color: #fa0;
7+
font-weight: bold;
8+
}
9+
10+
.center {
11+
text-align: center;
12+
}
13+
14+
.center-btn {
15+
display: block;
16+
margin: auto;
17+
}
18+
19+
.btn {
20+
font-weight: bold;
21+
margin: 0;
22+
border-radius: 10px;
23+
}
24+
25+
.btn:disabled {
26+
background-color: #ccc;
27+
}
28+
29+
.btn:disabled {
30+
opacity: 1;
31+
}
32+
33+
.credits {
34+
text-align: right;
35+
font-size: 0.8em;
36+
}
37+
38+
.flex-v {
39+
display: flex;
40+
flex-direction: column;
41+
}
42+
43+
.flex-h {
44+
display: flex;
45+
flex-direction: row;
46+
}
47+
48+
#sigma {
49+
border: 1px solid black;
50+
width: 70%;
51+
height: 75vh;
52+
}
53+
154
/* The switch - the box around the slider */
255
.switch {
3-
position: relative;
4-
display: inline-block;
5-
width: 60px;
6-
height: 34px;
56+
position: relative;
57+
display: block;
58+
width: 115px;
59+
height: 34px;
60+
margin: auto;
761
}
862

963
/* Hide default HTML checkbox */
1064
.switch input {
11-
opacity: 0;
12-
width: 0;
13-
height: 0;
65+
opacity: 0;
66+
width: 0;
67+
height: 0;
1468
}
1569

1670
/* The slider */
1771
.slider {
18-
position: absolute;
19-
cursor: pointer;
20-
top: 0;
21-
left: 0;
22-
right: 0;
23-
bottom: 0;
24-
background-color: #ccc;
25-
-webkit-transition: .4s;
26-
transition: .4s;
72+
position: absolute;
73+
cursor: pointer;
74+
top: 0;
75+
left: 0;
76+
right: 0;
77+
bottom: 0;
78+
background-color: #ccc;
79+
-webkit-transition: .4s;
80+
transition: .4s;
81+
margin: 0;
2782
}
2883

2984
.slider:before {
30-
position: absolute;
31-
content: "";
32-
height: 26px;
33-
width: 26px;
34-
left: 4px;
35-
bottom: 4px;
36-
background-color: white;
37-
-webkit-transition: .4s;
38-
transition: .4s;
85+
position: absolute;
86+
content: "";
87+
height: 26px;
88+
width: 26px;
89+
left: 4px;
90+
bottom: 4px;
91+
background-color: white;
92+
-webkit-transition: .4s;
93+
transition: .4s;
3994
}
4095

4196
input:checked + .slider {
42-
background-color: #2196F3;
97+
background-color: #2196F3;
4398
}
4499

45100
input:focus + .slider {
46-
box-shadow: 0 0 1px #2196F3;
101+
box-shadow: 0 0 1px #2196F3;
47102
}
48103

49104
input:checked + .slider:before {
50-
-webkit-transform: translateX(26px);
51-
-ms-transform: translateX(26px);
52-
transform: translateX(26px);
105+
-webkit-transform: translateX(80px);
106+
-ms-transform: translateX(80px);
107+
transform: translateX(80px);
53108
}
54109

55110
/* Rounded sliders */
56111
.slider.round {
57-
border-radius: 34px;
112+
border-radius: 34px;
58113
}
59114

60115
.slider.round:before {
61-
border-radius: 50%;
116+
border-radius: 50%;
62117
}

‎src/index.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import "@ajusa/lit/src/lit.css";
12
import "./index.css";
23

34
import van from "vanjs-core";
@@ -10,7 +11,7 @@ import Viz from "./pages/viz";
1011

1112
function App() {
1213
return Router({
13-
basename: "bibliograph2",
14+
basename: window.IS_PRODUCTION ? "bibliograph2" : "",
1415
routes: [
1516
{ path: "/", component: Start },
1617
{ path: "/search", component: Search },

‎src/pages/filters.js

+71-37
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,87 @@
1-
import ProgressBar from "@/components/progressbar";
21
import { corpus, filteredCorpus, filters } from "@/global_state";
3-
import { filterCorpus, filterCorpusProgress } from "@/lib/processing";
2+
import { filterCorpus } from "@/lib/processing";
3+
import { pageStyle } from "@/lib/utils";
44
import van from "vanjs-core";
55
import { navigate } from "vanjs-routing";
66

77
const { main, h1, p, div, h4, strong, span, input, button } = van.tags;
88

99
const Filters = () => {
10+
pageStyle(`
11+
.fields {
12+
flex-wrap: wrap;
13+
margin-top: 2em;
14+
justify-content: space-around;
15+
}
16+
.fields span {
17+
margin: 0;
18+
}
19+
.fields > div:first-child {
20+
margin: .5em 0;
21+
}
22+
.fields > div {
23+
width: calc(50% - 5em);
24+
}
25+
.fields input[type="range"] {
26+
width: 100%;
27+
}
28+
`);
1029
return main(
11-
h1("2. Set the Filters"),
30+
{ class: "c" },
31+
h1({ class: "center" }, "2. Set the Filters"),
1232
p(
1333
"Use the sliders to chose how many nodes of each type to included in your network based on the number of records in which they appears (it is recommended NOT to include references occurring in one record only)",
1434
),
15-
Object.entries(filters.val).map(([field, filter]) => {
16-
const value = van.state(filter.value);
17-
van.derive(() => (filter.value = value.val));
18-
return div(
19-
h4(field),
20-
div(
21-
"Keep the ",
22-
strong(() => filter.counts[value.val]),
23-
span(` ${field} `),
24-
span(field !== "works" ? "occurring in at least " : "with at least "),
25-
strong(() => filter.lowerBounds[value.val]),
26-
span(field !== "works" ? " records" : " citations"),
27-
),
28-
div(
29-
span({ style: "float: left" }, 0),
30-
span({ style: "float: right" }, filter.counts.at(-1)),
31-
),
32-
input({
33-
type: "range",
34-
min: 0,
35-
max: filter.counts.length - 1,
36-
value: value,
37-
oninput: (e) => (value.val = e.target.value),
38-
}),
39-
);
40-
}),
41-
ProgressBar(filterCorpusProgress),
42-
button({ onclick: () => navigate("/search") }, "1. Corpus"),
43-
button(
35+
div(
36+
{ class: "fields flex-h" },
37+
Object.entries(filters.val).map(([field, filter]) => {
38+
const value = van.state(filter.value);
39+
van.derive(() => (filter.value = value.val));
40+
return div(
41+
div(
42+
"Keep the ",
43+
strong(() => filter.counts[value.val]),
44+
h4({ style: "display: inline" }, ` ${field} `),
45+
span(
46+
field !== "works" ? "occurring in at least " : "with at least ",
47+
),
48+
strong(() => filter.lowerBounds[value.val]),
49+
span(field !== "works" ? " records" : " citations"),
50+
),
51+
div(
52+
span({ style: "float: left" }, 0),
53+
span({ style: "float: right" }, filter.counts.at(-1)),
54+
),
55+
input({
56+
type: "range",
57+
min: 0,
58+
max: filter.counts.length - 1,
59+
value: value,
60+
oninput: (e) => (value.val = e.target.value),
61+
}),
62+
);
63+
}),
64+
),
65+
// ProgressBar(filterCorpusProgress),
66+
div(
4467
{
45-
onclick: async () => {
46-
filteredCorpus.val = await filterCorpus(corpus.val, filters.val);
47-
navigate("/viz");
48-
},
68+
style:
69+
"display: flex;justify-content: space-evenly;width: 50%;margin: auto;",
4970
},
50-
"3. Graph",
71+
button(
72+
{ class: "btn", onclick: () => navigate("/search") },
73+
"<= 1. Corpus",
74+
),
75+
button(
76+
{
77+
class: "btn primary",
78+
onclick: async () => {
79+
filteredCorpus.val = await filterCorpus(corpus.val, filters.val);
80+
navigate("/viz");
81+
},
82+
},
83+
"3. Graph =>",
84+
),
5185
),
5286
);
5387
};

0 commit comments

Comments
 (0)