Differentiate hover and click action when using view

[farhanreynaldo]

Hi,

I previously asked in the Observable Forum regarding how to set a value when the user interacts with the plot. While the view function works, the value will be updated if the user hovers on the map.

How do I update the value only if the user clicks the map, not hovers on it? I want the hover action to only show the tooltip, not update the value.

Thank you so much!

[Fil]

See observablehq/plot#1832

[farhanreynaldo]

Thank you for the pointer! I found a working implementation in this Observable Notebook and modify the code to work in Observable Framework as follows:

const hover = view(Plot.plot({
  marks: [Plot.dot(cars, { x: "power (hp)", y: "economy (mpg)", tip: true })]
}))

const click = Generators.observe((notify) => {
  let lastValue = null;
  const listener = (e) => {
    // If e.detail is true, then this was a click (sticky) event.
    // If e.detail is false, then (this feels untidy) deselect if the value is null.
    if (e.sticky || (hover.value === null && lastValue !== null)) {
      lastValue = hover.value;
      notify(lastValue);
    }
  };
  hover.addEventListener("input", listener);
  notify(lastValue);
  return () => hover.removeEventListener("input", listener);
})

However, I got the RuntimeError: hover.addEventListener is not a function. Did I port the Observable Notebook code to Framework code incorrectly?

[Fil]

As mentioned in the docs:

the view function displays the given element and returns a corresponding value generator

hover is the value generator, while what you want to listen to is the input events on the chart. You could transform your code by naming the chart:

const chart = Plot.plot({
  marks: [Plot.dot(cars, { x: "power (hp)", y: "economy (mpg)", tip: true })]
});
const hover = view(chart);

and then listen to input events on chart

[farhanreynaldo]

Thank you, I managed to make it work with the following code:

const clickEvent = (plot) => Generators.observe((notify) => {
    const onClick = (e) => {
        notify(plot.value);
    };
    plot.addEventListener('click', onClick);
    return () => {
        plot.removeEventListener('click', onClick);
    };
});

How can I use the view (or the above clickEvent) function if the chart is in a div tag and inside a resize function? Here's my minimal working code:

function scatterPlot(width) {
  return Plot.plot({
  marks: [Plot.dot(cars, { x: "power (hp)", y: "economy (mpg)", tip: true })]
})};

<div class="grid grid-cols-1">
    <div class="card">${resize((width) => scatterPlot(width))}</div>
</div>

[Fil]

Short answer is, you can't use view in that case. However you can add an event listener to the top-level div. Let's add an id to make it easier to select:

<div id="chart" class="grid grid-cols-1">
    <div class="card">${resize((width) => scatterPlot(width))}</div>
</div>

then you can use:

const wrapper = document.getElementById("chart");
wrapper.addEventListener("input", (event) => console.log(event.target.value));

[farhanreynaldo]

I see, thank you!