Trigger a function from a radio input

Community Help
1

Is there a way to trigger a function from Inputs.radio

Inputs.button([
  [
    "Get range from variable",
    () => (mutable rangeValues = [rangeVariable.min, rangeVariable.max])
  ]
])

The pratical case is visible from WMS Leaflet map / Patrick Brockmann / Observable

I must admit that building an interface is not as easy as expected. Circular definitions,
use of mutable. I try…

2

I’ve just sent you a suggestion with a clearer dataflow (I think), not using mutable

3

Seems nice and simpler but not expected behaviour when “user choice” is requested.
The range is always from variable.

4

It seems to works for me. Maybe I didn’t understand the expectations?

5

When the range is user choice, changing of variable should not change the range used.

6

I can make another suggestion

viewof rangeValues = {
  const range0 = (this && rangeFrom === "user choice") ? this.value : rangeVariable
  return rangeSlider({
    min: Math.floor(rangeVariable[0] * 1.2),
    max: Math.ceil(rangeVariable[1] * 1.2),
    step: Math.abs(rangeVariable[1] - rangeVariable[0]) / 1000,
    value: range0,
    precision: 3,
    title: "",
    description: "Range"
  });
}

But it feels surprising because the three different variables don’t cover the same domains.

7

same domains ? Same range of values you mean ?
yes it could be.

I have solved the https self signed certificate issue.
I have coded from your suggestion:

viewof rangeValues = {
  const range0 =
    this && rangeFrom === "user choice" ? this.value : rangeVariable;
  return rangeSlider({
    min: Math.floor(range0[0] * 1.2),
    max: Math.ceil(range0[1] * 1.2),
    step: Math.abs(range0[1] - range0[0]) / 1000,
    value: range0,
    precision: 0,
    title: "",
    description: "Range"
  });
}

I think this is good now.

1 Like
8

Unfortunately. No.
The range0 is not correctly saved.

The typical sequence.
Load. Check “user choice”, then alternate between the 2 first variables (fossil and Terrestrial_flux).
The console shows that the range0 changes each times.
Don’t understand why.

9

The thing is that the <min, max> bracket is set as 1.2*range0[0] etc. This only works if range0[0] is negative and range0[1] positive. If that’s not the case, then the range is not included in the bracket, and the selection is restricted to the new bracket. Another thing is that the step changes each time, introducing small differences in the values.

Here’s a way to fix all these (I think):

viewof range = {
  const range0 =
    this && rangeFrom === "user choice" ? this.value : rangeVariable;
  console.log(range0);
  return rangeSlider({
    min: Math.min(range0[0], Math.floor(range0[0] * 1.2)),
    max: Math.max(range0[1], Math.ceil(range0[1] * 1.2)),
    step: 10 ** Math.floor(Math.log10(Math.abs(range0[1] - range0[0]) / 1000.0)),
    value: range0,
    precision: 1,
    title: "<div style='font-weight:normal;font-size: smaller;'>Range</div>"
  });
}
10

Hi,
This makes me mad…
Indeed there was a mistake into min and max calculs.

    min: Math.floor(range0[0] - Math.abs(range0[0]) * 0.2),
    max: Math.ceil(range0[1] + Math.abs(range0[1]) * 0.2),

should be correct.
But even with this and setting the step to a fix value, there
is a drift I do not understand.

Load the actual notebook, choose the “user choice” then alternate
between first 2 variables. The min, max moves since the range0 is not the
same. This is what puzzles me.

Ok you were ok with your solution. Adopted.
Step parameter needs to be integer I think otherwise there is a unexpected drift.

1 Like