@perspective-dev/viewer 4.0.0

package/src/rust/components/form/color_selector.rs

@@ -0,0 +1,54 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+// ┃ This file is part of the Perspective library, distributed under the terms ┃
+// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+use wasm_bindgen::JsCast;
+use web_sys::*;
+use yew::prelude::*;
+
+#[derive(Properties, PartialEq)]
+pub struct ColorProps {
+    pub color: String,
+    pub on_color: Callback<String>,
+    pub on_reset: Callback<()>,
+    pub is_modified: bool,
+
+    #[prop_or_default]
+    pub title: Option<String>,
+}
+
+#[function_component(ColorSelector)]
+pub fn color_component(props: &ColorProps) -> Html {
+    let oninput = use_callback(props.on_color.clone(), |event: InputEvent, deps| {
+        let color = event
+            .target()
+            .unwrap()
+            .unchecked_into::<HtmlInputElement>()
+            .value();
+        deps.emit(color);
+    });
+
+    let on_reset = use_callback(props.on_reset.clone(), |_: MouseEvent, on_reset| {
+        on_reset.emit(())
+    });
+
+    html! {
+        <>
+            <label id={props.title.as_deref().unwrap_or("color-label").to_owned()} />
+            <div class="color-gradient-container">
+                <input class="parameter" type="color" value={props.color.to_owned()} {oninput} />
+                if props.is_modified { <span class="reset-default-style" onclick={on_reset} /> } else {
+                    <span class="reset-default-style-disabled" />
+                }
+            </div>
+        </>
+    }
+}

package/src/rust/components/form/debug.rs

@@ -0,0 +1,253 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+// ┃ This file is part of the Perspective library, distributed under the terms ┃
+// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+use std::rc::Rc;
+
+use perspective_client::ExprValidationError;
+use wasm_bindgen::prelude::*;
+use yew::prelude::*;
+
+use crate::components::containers::trap_door_panel::TrapDoorPanel;
+use crate::components::form::code_editor::CodeEditor;
+use crate::components::style::LocalStyle;
+use crate::js::{MimeType, copy_to_clipboard, paste_from_clipboard};
+use crate::model::*;
+use crate::presentation::*;
+use crate::renderer::*;
+use crate::session::*;
+use crate::utils::*;
+use crate::*;
+
+#[derive(Properties, Clone, PartialEq)]
+pub struct DebugPanelProps {
+    pub session: Session,
+    pub renderer: Renderer,
+    pub presentation: Presentation,
+}
+
+derive_model!(Presentation, Renderer, Session for DebugPanelProps);
+
+impl DebugPanelProps {
+    fn set_text(&self, setter: UseStateSetter<Rc<String>>) {
+        let props = self.clone();
+        ApiFuture::spawn(async move {
+            let task = props.get_viewer_config();
+            let config = task.await?;
+            let json = JsValue::from_serde_ext(&config)?;
+            let js_string =
+                js_sys::JSON::stringify_with_replacer_and_space(&json, &JsValue::NULL, &2.into())?;
+
+            setter.set(Rc::new(js_string.as_string().unwrap()));
+            Ok(())
+        });
+    }
+
+    fn reset_callback(
+        &self,
+        text: UseStateSetter<Rc<String>>,
+        error: UseStateSetter<Option<ExprValidationError>>,
+        modified: UseStateSetter<bool>,
+    ) -> impl Fn(()) + use<> {
+        let props = self.clone();
+        move |_| {
+            error.set(None);
+            props.set_text(text.clone());
+            modified.set(false);
+        }
+    }
+}
+
+fn on_save(
+    props: &DebugPanelProps,
+    text: &Rc<String>,
+    error: &UseStateHandle<Option<ExprValidationError>>,
+    modified: &UseStateHandle<bool>,
+) {
+    clone!(props, text, error, modified);
+    ApiFuture::spawn(async move {
+        match serde_json::from_str(&text) {
+            Ok(config) => {
+                match props.restore_and_render(config, async { Ok(()) }).await {
+                    Ok(_) => {
+                        modified.set(false);
+                    },
+                    Err(e) => {
+                        modified.set(true);
+                        error.set(Some(ExprValidationError {
+                            error_message: JsValue::from(e)
+                                .as_string()
+                                .unwrap_or_else(|| "Failed to validate viewer config".to_owned()),
+                            line: 0_u32,
+                            column: 0,
+                        }));
+                    },
+                }
+                Ok(())
+            },
+            Err(err) => {
+                modified.set(true);
+                error.set(Some(ExprValidationError {
+                    error_message: err.to_string(),
+                    line: err.line() as u32 - 1,
+                    column: err.column() as u32 - 1,
+                }));
+
+                Ok(())
+            },
+        }
+    });
+}
+
+#[function_component(DebugPanel)]
+pub fn debug_panel(props: &DebugPanelProps) -> Html {
+    let expr = use_state_eq(|| Rc::new("".to_string()));
+    let error = use_state_eq(|| Option::<ExprValidationError>::None);
+    let select_all = use_memo((), |()| PubSub::default());
+    let modified = use_state_eq(|| false);
+    use_effect_with((expr.setter(), props.clone()), {
+        clone!(error, modified);
+        move |(text, props)| {
+            props.set_text(text.clone());
+            error.set(None);
+            let sub1 = props
+                .renderer()
+                .style_changed
+                .add_listener(props.reset_callback(
+                    text.clone(),
+                    error.setter(),
+                    modified.setter(),
+                ));
+
+            let sub2 = props
+                .renderer()
+                .reset_changed
+                .add_listener(props.reset_callback(
+                    text.clone(),
+                    error.setter(),
+                    modified.setter(),
+                ));
+
+            let sub3 = props
+                .session()
+                .view_config_changed
+                .add_listener(props.reset_callback(
+                    text.clone(),
+                    error.setter(),
+                    modified.setter(),
+                ));
+
+            || {
+                drop(sub1);
+                drop(sub2);
+                drop(sub3);
+            }
+        }
+    });
+
+    let oninput = use_callback(expr.setter(), {
+        clone!(modified);
+        move |x, expr| {
+            modified.set(true);
+            expr.set(x)
+        }
+    });
+
+    let onsave = use_callback((expr.clone(), error.clone(), props.clone()), {
+        clone!(modified);
+        move |_, (text, error, props)| on_save(props, text, error, &modified)
+    });
+
+    let oncopy = use_callback(
+        (expr.clone(), select_all.callback()),
+        move |_, (text, select_all)| {
+            select_all.emit(());
+            let options = web_sys::BlobPropertyBag::new();
+            options.set_type("text/plain");
+            let blob_txt = (JsValue::from((***text).clone())).clone();
+            let blob_parts = js_sys::Array::from_iter([blob_txt].iter());
+            let blob = web_sys::Blob::new_with_str_sequence_and_options(&blob_parts, &options);
+            ApiFuture::spawn(copy_to_clipboard(
+                async move { Ok(blob?) },
+                MimeType::TextPlain,
+            ));
+        },
+    );
+
+    let onapply = use_callback((expr.clone(), error.clone(), props.clone()), {
+        clone!(modified);
+        move |_, (text, error, props)| on_save(props, text, error, &modified)
+    });
+
+    let onreset = use_callback((expr.setter(), error.clone(), props.clone()), {
+        clone!(modified);
+        move |_, (text, error, props)| {
+            props.set_text(text.clone());
+            error.set(None);
+            modified.set(false);
+        }
+    });
+
+    let onpaste = use_callback((expr.clone(), error.clone(), props.clone()), {
+        clone!(modified);
+        move |_, (text, error, props)| {
+            clone!(text, error, props, modified);
+            ApiFuture::spawn(async move {
+                if let Some(x) = paste_from_clipboard().await {
+                    let x = Rc::new(x);
+                    modified.set(true);
+                    error.set(None);
+                    text.set(x.clone());
+                    on_save(&props, &x, &error, &modified);
+                }
+
+                Ok(())
+            });
+        }
+    });
+
+    html! {
+        <>
+            <LocalStyle href={css!("containers/tabs")} />
+            <LocalStyle href={css!("form/debug")} />
+            <div id="debug-panel-overflow">
+                <TrapDoorPanel id="debug-panel" class="sidebar_column">
+                    <div class="tab-gutter">
+                        <span class="tab selected">
+                            <div id="Debug" class="tab-title" />
+                            <div class="tab-border" />
+                        </span>
+                        <span class="tab tab-padding">
+                            <div class="tab-title" />
+                            <div class="tab-border" />
+                        </span>
+                    </div>
+                    <div id="debug-panel-editor">
+                        <CodeEditor
+                            expr={&*expr}
+                            disabled=false
+                            {oninput}
+                            {onsave}
+                            select_all={select_all.subscriber()}
+                            error={(*error).clone()}
+                        />
+                    </div>
+                    <div id="debug-panel-controls">
+                        <button disabled={!*modified} onclick={onapply}>{ "Apply" }</button>
+                        <button disabled={!*modified} onclick={onreset}>{ "Reset" }</button>
+                        <button onclick={oncopy}>{ "Copy" }</button>
+                        <button onclick={onpaste}>{ "Paste" }</button>
+                    </div>
+                </TrapDoorPanel>
+            </div>
+        </>
+    }
+}

package/src/rust/components/form/highlight.rs

@@ -0,0 +1,50 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+// ┃ This file is part of the Perspective library, distributed under the terms ┃
+// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+use yew::prelude::*;
+
+use crate::exprtk::{Cursor, Token};
+
+/// Highlight a token if the cursor overlaps an error.  This is not a
+/// `Component` because of the the lifetimes associated with `Cursor<'a>` etc.
+/// This makes the performance assumption that naively re-rendering is faster
+/// than allocating this data on the heap (plus a few copies), since virtually
+/// any update to the `CodeEditor` component will be an update to the parsed
+/// text.
+///
+/// TODO Validate this assumption with actual data.
+pub fn highlight<'a>(cursor: &mut Cursor<'a>, token: Token<'a>, position: u32) -> Html {
+    cursor.txt = token.content();
+    let is_auto = cursor.is_autocomplete(position);
+    let is_break = matches!(token, Token::Break(_));
+    let is_overlap = cursor.is_error();
+    let result = match (is_auto, is_overlap, is_break) {
+        (true, true, false) => html! {
+            <span ref={cursor.noderef.clone()} class="error_highlight">{ token }</span>
+        },
+        (false, true, false) => html! { <span class="error_highlight">{ token }</span> },
+        (true, false, false) => html! { <span ref={cursor.noderef.clone()}>{ token }</span> },
+        _ => token.to_html(),
+    };
+
+    if is_auto && matches!(token, Token::Symbol(_)) {
+        cursor.auto = Some(token.content().to_owned());
+    }
+
+    if matches!(token, Token::Break(_)) {
+        cursor.increment_line();
+    } else {
+        cursor.increment_column(token.content().len() as u32);
+    }
+
+    result
+}

package/src/rust/components/form/mod.rs

@@ -0,0 +1,29 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+// ┃ This file is part of the Perspective library, distributed under the terms ┃
+// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+//! A module for form controls (though form controls like `<Select>` which are
+//! also container elements should go in the `containers` module).
+//!
+//! Components in this module should not be imported from the `components`
+//! parent module directly.
+
+pub mod code_editor;
+pub mod color_range_selector;
+pub mod color_selector;
+pub mod debug;
+mod highlight;
+pub mod number_field;
+pub mod number_input;
+pub mod number_range_field;
+pub mod optional_field;
+
+pub mod select_field;

package/src/rust/components/form/number_field.rs

@@ -0,0 +1,72 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+// ┃ This file is part of the Perspective library, distributed under the terms ┃
+// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+use web_sys::{HtmlInputElement, InputEvent};
+use yew::{Callback, Properties, TargetCast, function_component, html};
+
+use crate::components::form::optional_field::OptionalField;
+
+#[derive(Properties, Debug, PartialEq, Clone)]
+pub struct NumberFieldProps {
+    pub label: String,
+    pub current_value: Option<f64>,
+    pub default: f64,
+    pub on_change: Callback<Option<f64>>,
+
+    #[prop_or_default]
+    pub disabled: bool,
+
+    #[prop_or_default]
+    pub min: Option<f64>,
+
+    #[prop_or_default]
+    pub max: Option<f64>,
+
+    #[prop_or_default]
+    pub step: Option<f64>,
+}
+
+#[function_component(NumberField)]
+pub fn number_field(props: &NumberFieldProps) -> yew::Html {
+    let parse_number_input = |event: InputEvent| {
+        Some(
+            event
+                .target_unchecked_into::<HtmlInputElement>()
+                .value_as_number(),
+        )
+    };
+
+    let number_input = html! {
+        <input
+            type="number"
+            class="parameter"
+            min={props.min.map(|val| val.to_string())}
+            max={props.max.map(|val| val.to_string())}
+            step={props.step.map(|val| val.to_string())}
+            value={props.current_value.unwrap_or(props.default).to_string()}
+            oninput={props.on_change.reform(parse_number_input)}
+        />
+    };
+
+    html! {
+        <div class="row">
+            <OptionalField
+                label={props.label.clone()}
+                on_check={props.on_change.reform(|_| None)}
+                checked={props.current_value.map(|val| val != props.default).unwrap_or_default()}
+                disabled={props.disabled}
+            >
+                { number_input }
+            </OptionalField>
+        </div>
+    }
+}

package/src/rust/components/form/number_input.rs

@@ -0,0 +1,45 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+// ┃ This file is part of the Perspective library, distributed under the terms ┃
+// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+use wasm_bindgen::*;
+use web_sys::*;
+use yew::prelude::*;
+
+#[derive(Properties, PartialEq)]
+pub struct NumberInputProps {
+    pub max_value: f64,
+    pub on_max_value: Callback<String>,
+}
+
+#[function_component(NumberInput)]
+pub fn number_input(props: &NumberInputProps) -> Html {
+    let oninput = props.on_max_value.reform(|event: InputEvent| {
+        event
+            .target()
+            .unwrap()
+            .unchecked_into::<HtmlInputElement>()
+            .value()
+    });
+
+    html! {
+        <>
+            <label>{ "Max" }</label>
+            <input
+                value={format!("{}", props.max_value)}
+                class="parameter"
+                type="number"
+                min="0"
+                {oninput}
+            />
+        </>
+    }
+}

package/src/rust/components/form/number_range_field.rs

@@ -0,0 +1,77 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+// ┃ This file is part of the Perspective library, distributed under the terms ┃
+// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+use web_sys::HtmlInputElement;
+use yew::{Callback, Properties, function_component, html, use_callback, use_node_ref};
+
+use crate::components::form::optional_field::OptionalField;
+
+#[derive(Properties, Debug, PartialEq, Clone)]
+pub struct NumberRangeFieldProps {
+    pub label: String,
+    pub current_value: Option<(f64, f64)>,
+    pub default: (f64, f64),
+    pub on_change: Callback<Option<(f64, f64)>>,
+
+    #[prop_or_default]
+    pub min: Option<f64>,
+
+    #[prop_or_default]
+    pub max: Option<f64>,
+
+    #[prop_or_default]
+    pub step: Option<f64>,
+}
+
+#[function_component(NumberRangeField)]
+pub fn number_range_field(props: &NumberRangeFieldProps) -> yew::Html {
+    let ref1 = use_node_ref();
+    let ref2 = use_node_ref();
+    let parse_number_input = use_callback(
+        (ref1.clone(), ref2.clone(), props.on_change.clone()),
+        |_, deps| {
+            deps.2.emit(Some((
+                deps.0.cast::<HtmlInputElement>().unwrap().value_as_number(),
+                deps.1.cast::<HtmlInputElement>().unwrap().value_as_number(),
+            )));
+        },
+    );
+
+    html! {
+        <OptionalField
+            label={props.label.clone()}
+            on_check={props.on_change.reform(|_| None)}
+            checked={props.current_value.map(|val| val != props.default).unwrap_or_default()}
+        >
+            <input
+                type="number"
+                class="parameter parameter-min"
+                ref={ref1}
+                min={props.min.map(|val| val.to_string())}
+                max={props.max.map(|val| val.to_string())}
+                step={props.step.map(|val| val.to_string())}
+                value={props.current_value.unwrap_or(props.default).0.to_string()}
+                oninput={parse_number_input.clone()}
+            />
+            <input
+                type="number"
+                class="parameter parameter-max"
+                ref={ref2}
+                min={props.min.map(|val| val.to_string())}
+                max={props.max.map(|val| val.to_string())}
+                step={props.step.map(|val| val.to_string())}
+                value={props.current_value.unwrap_or(props.default).1.to_string()}
+                oninput={parse_number_input}
+            />
+        </OptionalField>
+    }
+}

package/src/rust/components/form/optional_field.rs

@@ -0,0 +1,53 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+// ┃ This file is part of the Perspective library, distributed under the terms ┃
+// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+use yew::{Callback, Children, Html, MouseEvent, Properties, classes, function_component, html};
+
+#[derive(Properties, PartialEq)]
+pub struct OptionalFieldProps {
+    pub label: String,
+    pub on_check: Callback<MouseEvent>,
+    pub checked: bool,
+    pub children: Children,
+
+    #[prop_or(String::from("section"))]
+    pub class: String,
+
+    #[prop_or_default]
+    pub disabled: bool,
+}
+
+#[function_component(OptionalField)]
+pub fn optional_field(props: &OptionalFieldProps) -> Html {
+    html! {
+        <>
+            <label id={format!("{}-label", props.label)} />
+            <div
+                class={classes!(props.class.clone(), props.checked.then_some("is-default-value"))}
+            >
+                { props.children.clone() }
+                if props.checked {
+                    <span
+                        class="reset-default-style"
+                        onclick={props.on_check.clone()}
+                        id={format!("{}-checkbox", props.label)}
+                    />
+                } else {
+                    <span
+                        class="reset-default-style-disabled"
+                        id={format!("{}-checkbox", props.label)}
+                    />
+                }
+            </div>
+        </>
+    }
+}