How can I track the history of a view?

Community Help
1

I’d like to track the history of a view.

Basically, every time the value is changed, I’d like to store that in an array. This would allow me to

  1. Implement a goback / undo button for that input.

I made a notebook that implements it. It works, but it is hacky. I’d like advice on maybe a different way to implement this.

2

tagging @severo because I learned a lot and borrowed a lot from

@severo/inputs-setter

3

Good idea. I proposed a small change here: Observable. It moves the history from an external cell to an internal property. Currently, the API to access the history and move in it is by hand and does not dispatch events. The browser History interface might be a good source of influence to design a full API to navigate in the input history

Edit: well, here it is :point_down:

2 Likes
4

Cool idea! I just send you a few suggestions regarding a custom, self-contained input element. Not sure whether this if what you’re after though!

1 Like
5

@severo and @chrispahm Thank you both!

I incorporated both your suggestions. And now it is an importable with two versions.
v1: is @severo 's version, with .setValue() enabled.
v2: is @chrispahm 's version, with the redo and undo buttons as part of the viewof object

See updated:

(I’m marking this summary post as the current answer since I can’t mark both of yours as “solutions”.)

2 Likes
6

Next steps could be to:

  1. move from just number boxes to sliders and other inputs, like Inputs / Jeremy Ashkenas / Observable
  2. switch to the new Observable Inputs / Observable / Observable which are settable.
 function set(input, value) {
  input.value = value;
  input.dispatchEvent(new CustomEvent("input"));
}

see Synchronized Inputs / Observable / Observable

I’m not going to update them yet since I want to learn svg and d3 better first. But if anyone wants to, the framework and idea are covered in the notebooks here.

Thanks again to the contributors above!!!

1 Like