feat: make query params dynamic (#14)

It's handy to be able to copy/paste URL when query-params are updated
dynamically

crates/web-ui/src/components/buckets_chart.rs

@@ -5,10 +5,10 @@ use chart_js_rs::{
 };
 use std::collections::HashMap;
 
-use leptos::{component, create_effect, view, IntoView, ReadSignal, SignalWith};
+use leptos::{component, create_effect, view, IntoView, MaybeSignal, SignalWith};
 
 #[component]
-pub(crate) fn BucketsChart(buckets: ReadSignal<Buckets>) -> impl IntoView {
+pub(crate) fn BucketsChart(#[prop(into)] buckets: MaybeSignal<Buckets>) -> impl IntoView {
     let id = "buckets-chart";
 
     // re-render chart on `buckets` change

crates/web-ui/src/components/buckets_table.rs

@@ -1,14 +1,17 @@
 use crate::types::buckets::Buckets;
 use crate::types::units::Unit;
 use leptos::{
-    component, view, CollectView, IntoView, ReadSignal, SignalGet, SignalGetUntracked, SignalWith,
+    component, view, CollectView, IntoView, MaybeSignal, SignalGet, SignalGetUntracked, SignalWith,
 };
 use leptos_use::{use_intl_number_format, Notation, UseIntlNumberFormatOptions};
 use std::time::Duration;
 use ubyte::ToByteUnit;
 
 #[component]
-pub(crate) fn BucketsTable(buckets: ReadSignal<Buckets>, unit: ReadSignal<Unit>) -> impl IntoView {
+pub(crate) fn BucketsTable(
+    #[prop(into)] buckets: MaybeSignal<Buckets>,
+    #[prop(into)] unit: MaybeSignal<Unit>,
+) -> impl IntoView {
     let intl_float_format = use_intl_number_format(
         UseIntlNumberFormatOptions::default()
             .notation(Notation::Compact)

crates/web-ui/src/components/input/number_input.rs

@@ -2,15 +2,15 @@ use leptos::ev::Event;
 use leptos::wasm_bindgen::JsValue;
 use leptos::{
     component, create_signal, event_target_value, view, Callable, Callback, IntoAttribute,
-    IntoView, ReadSignal, SignalSet, SignalWith, WriteSignal,
+    IntoView, MaybeSignal, SignalSet, SignalSetter, SignalWith,
 };
 use std::fmt::{Debug, Display};
 use std::str::FromStr;
 
 #[component]
 pub(crate) fn NumberInput<T>(
-    #[prop(into)] get: ReadSignal<T>,
-    #[prop(into)] set: WriteSignal<T>,
+    #[prop(into)] get: MaybeSignal<T>,
+    #[prop(into)] set: SignalSetter<Option<T>>,
     #[prop(into, optional)] on_change: Option<Callback<Event>>,
     #[prop(into)] label: String,
     #[prop(optional)] min: Option<T>,
@@ -37,7 +37,7 @@ where
 
         match result {
             Ok(new_value) => {
-                set.set(new_value);
+                set.set(Some(new_value));
                 if let Some(callback) = on_change {
                     callback.call(ev);
                 }

crates/web-ui/src/components/input/select_input.rs

@@ -1,7 +1,7 @@
 use leptos::ev::Event;
 use leptos::{
-    component, event_target_value, view, Callable, Callback, CollectView, IntoView, ReadSignal,
-    SignalSet, SignalWith, WriteSignal,
+    component, event_target_value, view, Callable, Callback, CollectView, IntoView, MaybeSignal,
+    SignalSetter, SignalWith,
 };
 use std::fmt::Display;
 use std::str::FromStr;
@@ -12,8 +12,8 @@ pub(crate) trait SelectOption {
 
 #[component]
 pub(crate) fn SelectInput<T>(
-    #[prop(into)] get: ReadSignal<T>,
-    #[prop(into)] set: WriteSignal<T>,
+    #[prop(into)] get: MaybeSignal<T>,
+    #[prop(into)] set: SignalSetter<Option<T>>,
     #[prop(into)] options: Vec<T>,
     #[prop(into, optional)] on_change: Option<Callback<Event>>,
     #[prop(into)] label: String,
@@ -29,7 +29,7 @@ where
         };
         log::debug!("[select-input] new value is: {new_value}");
 
-        set.set(new_value);
+        set.set(Some(new_value));
         if let Some(callback) = on_change {
             callback.call(ev);
         }

crates/web-ui/src/pages/buckets_explorer_page.rs

@@ -3,38 +3,28 @@ use crate::components::buckets_table::BucketsTable;
 use crate::components::input::{NumberInput, SelectInput, SelectOption};
 use crate::types::buckets::Buckets;
 use crate::types::units::Unit;
-use leptos::{component, create_signal, view, IntoView, SignalGet, SignalGetUntracked, SignalSet};
-use leptos_router::use_query;
-use leptos_router::Params;
+use leptos::{
+    component, create_signal, view, IntoView, Signal, SignalGet, SignalGetUntracked, SignalSet,
+};
+use leptos_router::create_query_signal;
 use strum::IntoEnumIterator;
 
 const DEFAULT_INITIAL_VALUE: f64 = 1.0;
 const DEFAULT_FACTOR: f64 = 1.5;
 const DEFAULT_BUCKETS_NUM: u32 = 15;
 
-#[derive(leptos::Params, Default, Debug, Copy, Clone, PartialEq)]
-struct BucketsQueryParams {
-    initial_value: Option<f64>,
-    factor: Option<f64>,
-    buckets_num: Option<u32>,
-    unit: Option<Unit>,
-}
-
 #[component]
 pub(crate) fn BucketsExplorerPage() -> impl IntoView {
-    let query = use_query::<BucketsQueryParams>()
-        .get_untracked()
-        .unwrap_or_else(|e| {
-            log::debug!("Failed to parse query params: {e}, using default values instead");
-            Default::default()
-        });
+    let (initial_value, set_initial_value) = create_query_signal("initial_value");
+    let (factor, set_factor) = create_query_signal("factor");
+    let (buckets_num, set_buckets_num) = create_query_signal("buckets_num");
+    let (unit, set_unit) = create_query_signal("unit");
 
-    let (initial_value, set_initial_value) =
-        create_signal(query.initial_value.unwrap_or(DEFAULT_INITIAL_VALUE));
-    let (factor, set_factor) = create_signal(query.factor.unwrap_or(DEFAULT_FACTOR));
-    let (buckets_num, set_buckets_num) =
-        create_signal(query.buckets_num.unwrap_or(DEFAULT_BUCKETS_NUM));
-    let (unit, set_unit) = create_signal(query.unit.unwrap_or(Unit::Number));
+    // map optional query parameters to default values
+    let initial_value = Signal::from(move || initial_value.get().unwrap_or(DEFAULT_INITIAL_VALUE));
+    let factor = Signal::from(move || factor.get().unwrap_or(DEFAULT_FACTOR));
+    let buckets_num = Signal::from(move || buckets_num.get().unwrap_or(DEFAULT_BUCKETS_NUM));
+    let unit = Signal::from(move || unit.get().unwrap_or_default());
 
     let (buckets, set_buckets) = create_signal(Buckets::calculate(
         initial_value.get_untracked(),

crates/web-ui/src/types/units.rs

@@ -1,8 +1,9 @@
 use strum::{EnumIter, EnumString};
 
-#[derive(strum::Display, EnumString, EnumIter, Debug, Clone, Copy, PartialEq, Eq)]
+#[derive(strum::Display, EnumString, EnumIter, Default, Debug, Clone, Copy, PartialEq, Eq)]
 #[strum(serialize_all = "snake_case")]
 pub(crate) enum Unit {
+    #[default]
     Number,
     Bytes,
     Seconds,