Skip to content

Commit 2bec22e

Browse files
dpetuncomputable
dpet
authored and
uncomputable
committed
analysis component styled
Analysis component - added styling and functionality
1 parent b1d2222 commit 2bec22e

File tree

6 files changed

+180
-39
lines changed

6 files changed

+180
-39
lines changed

‎index.html

+2-3
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,8 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>Simplicity Web IDE</title>
77

8-
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
9-
<link rel="stylesheet" href="{{ site.baseurl }}/css/font-awesome/css/all.min.css">
10-
<link data-trunk rel="sass" href="src/scss/style.scss" />
8+
<link data-trunk rel="sass" href="src/assets/style/style.scss" />
9+
<link data-trunk rel="copy-dir" href="src/assets/images" />
1110
</head>
1211
<body></body>
1312

‎src/assets/images/simplicity_logo.svg

+48
Loading

‎src/scss/helpers.scss ‎src/assets/style/helpers.scss

File renamed without changes.

‎src/scss/style.scss ‎src/assets/style/style.scss

+58-5
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,14 @@
11
@import 'helpers.scss';
22

3+
* {
4+
box-sizing: border-box;
5+
}
6+
37
body {
48
background-color: $background-dark;;
59
color: $text-white;
610
font-family: 'inter', sans-serif;
7-
11+
margin-bottom: 400px;
812
}
913

1014
h1, h2, h3, h4, h5, h6{
@@ -14,14 +18,24 @@ h1, h2, h3, h4, h5, h6{
1418
a {
1519
color: #7973F4;
1620
}
21+
1722
p {
1823
margin: 0;
1924
line-height: 1.5;
2025
}
26+
2127
.container{
2228
width: 800px;
2329
max-width: 100%;
24-
margin: 50px auto;
30+
margin: 0px auto 50px auto;
31+
}
32+
33+
.page-header {
34+
.header-icon {
35+
width: 300px;
36+
margin-top: -30px;
37+
margin-bottom: -30px;
38+
}
2539
}
2640

2741
// program input box
@@ -102,7 +116,7 @@ p {
102116
width: 100%;
103117
background-color: $background-dark;
104118
border: none;
105-
color: #55ccff;
119+
color: #88ddff;
106120
font-family: 'Roboto Mono';
107121
font-size: 12px;
108122
resize: none;
@@ -119,8 +133,47 @@ p {
119133
padding: 10px;
120134
background-color: $background-light;
121135

122-
.analysis-title {
123-
margin: 0;
136+
.analysis-header {
137+
.analysis-title {
138+
margin: 6px 0 14px 0;
139+
}
140+
.program-status{
141+
border: 1px dotted #00ff00;
142+
color: #00ff00;
143+
padding: 14px;
144+
font-size: 12px;
145+
min-width: 200px;
146+
margin-bottom: 8px;
147+
text-align: center;
148+
149+
&.is_error{
150+
border: 1px dotted #ff0000;
151+
color: #ff0000;
152+
}
153+
}
154+
}
155+
156+
.analysis-body {
157+
display: flex;
158+
flex-wrap: wrap;
159+
160+
161+
.analysis-item {
162+
display: flex;
163+
justify-content: space-between;
164+
flex: 0 0 50%;
165+
166+
border: 1px solid #3d3d3d;
167+
padding: 20px;
168+
background-color: $background-dark;
169+
170+
.analysis-item-label {
171+
color: $text-white;
172+
}
173+
.analysis-item-data {
174+
color: $text-grey;
175+
}
176+
}
124177
}
125178
}
126179

‎src/components/analysis.rs

+58-14
Original file line numberDiff line numberDiff line change
@@ -5,23 +5,30 @@ use std::sync::Arc;
55
use crate::util::Expression;
66

77
#[component]
8-
pub fn Analysis(program: Signal<Result<Arc<Expression>, String>>) -> impl IntoView {
8+
pub fn Analysis(
9+
program: Signal<Result<Arc<Expression>, String>>,
10+
run_result: ReadSignal<Option<Result<String, String>>>,
11+
) -> impl IntoView {
12+
let maybe_input = move || match (program.get(), run_result.get()) {
13+
(Ok(program), Some(run_result)) => Some((program, run_result)),
14+
_ => None,
15+
};
16+
917
view! {
10-
<div>
1118
{
12-
move || program.get().ok().map(|t| view! {
13-
<h2>Analysis</h2>
14-
<AnalysisInner expression=t/>
19+
move || maybe_input().map(|(program, run_result)| view! {
20+
<div>
21+
<AnalysisInner expression=program run_result=run_result/>
22+
</div>
1523
})
1624
}
17-
</div>
1825
}
1926
}
2027

2128
const MILLISECONDS_PER_WU: f64 = 0.5 / 1000.0;
2229

2330
#[component]
24-
fn AnalysisInner(expression: Arc<Expression>) -> impl IntoView {
31+
fn AnalysisInner(expression: Arc<Expression>, run_result: Result<String, String>) -> impl IntoView {
2532
let bounds = expression.bounds();
2633
// FIXME: Add conversion method to simplicity::Cost
2734
let milli_weight = u32::from_str(&bounds.cost.to_string()).unwrap();
@@ -32,12 +39,49 @@ fn AnalysisInner(expression: Arc<Expression>) -> impl IntoView {
3239
let max_bytes = bounds.extra_cells.div_ceil(8);
3340

3441
view! {
35-
<ul>
36-
<li>"Size: "{size}B</li>
37-
<li>"Virtual size: "{virtual_size}vB</li>
38-
<li>"Weight: "{weight}WU</li>
39-
<li>"Max runtime: "{max_milliseconds}ms</li>
40-
<li>"Max memory: "{max_bytes}B</li>
41-
</ul>
42+
<div class="analysis">
43+
<div class="flex analysis-header">
44+
<h2 class="analysis-title">Program Analysis</h2>
45+
<RunResult run_result=run_result/>
46+
</div>
47+
<div class="analysis-body">
48+
<div class="analysis-item">
49+
<div class="analysis-item-label">Size:</div>
50+
<div class="analysis-item-data">{size}B</div>
51+
</div>
52+
<div class="analysis-item">
53+
<div class="analysis-item-label">Virtual size:</div>
54+
<div class="analysis-item-data">{virtual_size}vB</div>
55+
</div>
56+
<div class="analysis-item">
57+
<div class="analysis-item-label">Maximum memory:</div>
58+
<div class="analysis-item-data">{max_bytes}B</div>
59+
</div>
60+
<div class="analysis-item">
61+
<div class="analysis-item-label">Weight:</div>
62+
<div class="analysis-item-data">{weight}WU</div>
63+
</div>
64+
<div class="analysis-item">
65+
<div class="analysis-item-label">Maximum runtime:</div>
66+
<div class="analysis-item-data">{max_milliseconds}ms</div>
67+
</div>
68+
</div>
69+
</div>
70+
}
71+
}
72+
73+
#[component]
74+
fn RunResult(run_result: Result<String, String>) -> impl IntoView {
75+
match run_result {
76+
Ok(success) => view! {
77+
<div class="program-status" class:is_error=false >
78+
{success}
79+
</div>
80+
},
81+
Err(error) => view! {
82+
<div class="program-status" class:is_error=true >
83+
{error}
84+
</div>
85+
},
4286
}
4387
}

‎src/components/app.rs

+14-17
Original file line numberDiff line numberDiff line change
@@ -10,15 +10,15 @@ use crate::util;
1010
#[component]
1111
pub fn App() -> impl IntoView {
1212
let (program_str, set_program_str) = create_signal("".to_string());
13-
let (run_success, set_run_success) = create_signal("".to_string());
13+
let (run_result, set_run_result) = create_signal::<Option<Result<String, String>>>(None);
1414
let (name, set_name) = create_signal::<Option<String>>(None);
1515

1616
let program = Signal::derive(move || util::program_from_string(&program_str.get()));
1717
let parse_error = move || program.get().err();
1818

1919
let update_program_str = move |s: String| {
2020
set_program_str.set(s);
21-
set_run_success.set("".to_string());
21+
set_run_result.set(None);
2222
set_name.set(None);
2323
};
2424
let run_program = move || {
@@ -28,17 +28,17 @@ pub fn App() -> impl IntoView {
2828
};
2929
let mut runner = Runner::for_program(program);
3030
match runner.run() {
31-
Ok(_) => {
32-
set_run_success.set("✅ Program success".to_string());
33-
}
34-
Err(error) => {
35-
set_run_success.set(format!("❌ {error}"));
36-
}
31+
Ok(_) => set_run_result.set(Some(Ok("Program success".to_string()))),
32+
Err(error) => set_run_result.set(Some(Err(error.to_string()))),
3733
}
3834
};
3935

4036
view! {
4137
<div class="input-page">
38+
<div class="page-header">
39+
<img class="header-icon" src="https://design.blockstream.com/assets/pages/simplicity/simplicity_logo_white_on_transparent_rgb.svg" />
40+
</div>
41+
4242
<div class="container center">
4343
<h1>Simfony IDE</h1>
4444
<p class="text-grey">
@@ -53,15 +53,11 @@ pub fn App() -> impl IntoView {
5353
" bytecode. Developers write Simfony, full nodes execute Simplicity."
5454
</p>
5555
</div>
56+
5657
<div class="container">
57-
<div class="status-notification">
58-
<pre>
59-
{parse_error}
60-
</pre>
61-
<p>
62-
{run_success}
63-
</p>
64-
</div>
58+
<pre>
59+
{parse_error}
60+
</pre>
6561

6662
<div class="program-input">
6763
<div class="program-input-header">
@@ -92,7 +88,8 @@ pub fn App() -> impl IntoView {
9288
</div>
9389
</div>
9490

95-
<Analysis program=program/>
91+
<Analysis program=program run_result=run_result/>
92+
9693
<Merkle program=program/>
9794
</div>
9895
</div>

0 commit comments

Comments
 (0)