3d:["$","title",null,{"children":"Custom Inspectors | Fabian Iwand | Observable"}] 43:T414,viewof filtered_value = { // Create the view's DOM element. Later on we'll attach the value // to the
element. const element = html`
Further to the right!`;
  // Create an Inspector instance for the element.
  const inspector = new Inspector(element);
  // Mark the output as "pending" (the gray bar to the left). Note that this will
  // only set a class on the element, but *not* replace its contents.
  inspector.pending();

  // We haven't defined element.value yet, so it's still undefined.
  // We'll only set it if our threshold of 50 is passed.
  if(example_value >= 50) {
    // Set the element's value property. This is what will be seen
    // when we reference "filtered_value" (without the viewof prefix).
    element.value = example_value;
    // Have the inspector show the value. This replaces the element's current
    // contents (i.e., the  element).
    // Note that we must set the cell's name explicitely.
    inspector.fulfilled(element.value, 'filtered_value');
  }
  
  return element;
}44:[]
41:{"id":"529808f2ee21ecf4","slug":"custom-inspectors","title":"Custom Inspectors","thumbnail":"352e8d572cea06ee26784c278683d353c012438e624105438f952566c6392bb2","access_level":"public","create_time":"$D2021-09-07T18:38:54.695Z","update_time":"$D2026-06-14T21:58:40.505Z","view_time":null,"first_public_time":"$D2022-09-09T08:37:21.987Z","has_unpublished_edits":null,"fork":false,"stars":38,"starred":false,"owner":{"type":"team","id":"898d35f8860c7f03","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":"starter_2024","bio":"Web dev and tinkerer."},"version":873,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"07362516b5994994","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":null,"bio":"Web dev and tinkerer."}],"members":[{"type":"individual","id":"07362516b5994994","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":null,"role":"editor"}],"comments":[{"id":"7b34ca90bcad39a1","reply_to_id":null,"content":"This notebook helped explain a behavior I encountered (see:  https://talk.observablehq.com/t/observable-cell-behavior-for-yield-ed-vs-return-ed-animated-svg-element/5590/2 )\n\nLook forward to seeing it formally published.","create_time":"$D2021-09-19T16:14:14.667Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"1d3988d482a8ec0f","login":"mariodelgadosr","name":"Mario Delgado ","avatar_url":"https://avatars-next.observableusercontent.com/2d2982ad09c4ca9dfd6570810ae00301e0db6ef798c4f7025ea03d4325d4807d","tier":null}}],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":5,"collection":{"id":"6d9c7f601029e6bf","slug":"widgets","title":"Widgets and helpers","owner":{"id":"898d35f8860c7f03","login":"mootari","name":"Fabian Iwand"}},"type":"notebook","body":{"titling":"auto","title":"Custom Inspectors","cells":[{"id":0,"value":"# Custom Inspectors\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":659,"value":"Observable's cells are pretty handy – we can throw data in them and inspect it:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":662,"value":"[{name: \"one\"}, {name: \"and two ...\"}, {name: \"and three!\"}]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":671,"value":"But when we don't have any data yet (because it hasn't been loaded yet, or because a selection has to be made first), all we see is:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":673,"value":"new Promise(()=>{})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":681,"value":"when what we actually want is to prompt the user:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":683,"value":"Please make a selection.","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":715,"value":"or to show the current progress:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":700,"value":" 23 of 42 entries loaded …","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":717,"value":"So ... how do we get both? **Let's find out!**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":725,"value":"*The notebook was originally created in response to [this forum thread](https://talk.observablehq.com/t/await-for-specific-cell-value/5508/9).*\n\n👋 *Questions? Suggestions? Leave a comment!*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":10,"value":"---\n\n## Part 1: Observable's Inspector","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"Any cell output gets passed through Observable's Inspector. The Inspector is responsible for displaying simple stuff like `name = \"foo\"` in a cell output, but also more complex representations like expandable arrays and objects. The decision is made roughly like this:\n\n### Elements ...\n\n1\\. If the value is an instance of [`Element`](https://developer.mozilla.org/en-US/docs/Web/API/Element), *and* has no parent element, then pass it through as the cell's output.\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"2\\. If the value is an element that *does* have a `parentElement`, then only show its object name. The reason is that an element can only exist in one place of the DOM. Passing it through would attach it to the cell's container element and thus remove it from its original position:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"my_element = {\n  // The element (only created once, then passed around by reference).\n  const element = html`I'm here!`;\n  // An infinite loop.\n  while(true) {\n    // Detach the element from whereever in the DOM it currently is.\n    element.remove();\n    // Output the element, which attaches it to the DOM.\n    yield element;\n    // Wait two seconds.\n    await Promises.tick(2000);\n  }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"This cell reruns whenever `my_element` produces a \"new\" value.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"{\n  // Wait a second.\n  await Promises.tick(1000);\n  // Detach the element from wherever in the DOM it currently is.\n  if(remove_element) my_element.remove();\n  // Output the element, which attaches it to the DOM.\n  yield my_element;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"Let's watch what happens if we *don't* remove the element before passing it to the Inspector. Toggle the checkbox and keep an eye on the cells above:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"viewof remove_element = Inputs.toggle({label: 'remove element', value: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"### ... And the rest\n\n3\\. For any other type of value the Inspector will build an HTML representation. In the case of a simple string value, the generated HTML is:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"my_var = \"my value\"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"### Using the Inspector directly\n\nThe Inspector is an open-source library. That means we get to load it into our notebook and play around with it ourselves!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"Inspector = (await import('https://esm.run/@observablehq/inspector')).Inspector","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"function inspect(value, name = null) {\n  // Create an empty element to attach the Inspector's HTML to.\n  const container = html``;\n  // Create a new Inspector instance and attach it to the container.\n  const inspector = new Inspector(container);\n  // Let the instance know that this is the new value that it should render.\n  inspector.fulfilled(value, name);\n\n  return container;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"inspect('my value', 'my_name')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":144,"value":"Of course we are more limited here, because the HTML element that our `inspect()` returns *becomes the cell's value*:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"my_inspection = inspect('my value', 'my_name')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"my_inspection","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":153,"value":"But let's not fret, because we can fix this by creating a view instead:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":157,"value":"viewof my_other_inspection = {\n  // Note that we have to pass in the name manually here.\n  const element = inspect('my value', 'my_other_inspection');\n  element.value = 'Hey, that\\'s not my value!';\n  return element;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":161,"value":"my_other_inspection","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"Remember: It's all just HTML and CSS, made to look a certain way.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"value":"{\n  let name = 'you got me ';\n  let value = 'going round ';\n  while(true) {\n    yield inspect(value, name);\n    await Promises.tick(200);\n    name = name.slice(1) + name.slice(0, 1);\n    value = value.slice(-1) + value.slice(0, -1);\n  }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":168,"value":"---\n## Part 2: Views and values\n\nLet's take a closer look at Observable's `viewof` macro. First, we create a view:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":245,"value":"viewof my_counter = Inputs.button('Count up')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":252,"value":"The `button()` widget gives us a button that increments the view's value by `1` on every click:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":248,"value":"my_counter","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":258,"value":"But `my_counter` is actually a *hidden* generator cell that is not directly visible in our notebook. Using `viewof` creates two cells (or \"variables\"):\n1. `\"viewof my_counter\"` (the space is part of the name), with the DOM element (the button) as its value,\n2. `\"my_counter\"`, a generator that is dependent on the `\"viewof my_counter\"` variable and yields a new value from the view's `.value` property whenever `\"viewof counter\"` fires a new `input` event^*.\n\nWe can reference the view's DOM element like any other cell, by including the `\"viewof \"` prefix in the name:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":264,"value":"viewof my_counter","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":268,"value":"We can also check its current value:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":271,"value":"viewof my_counter.value","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":275,"value":"### Dependent cells\n\nYou may have noticed that the value in the last cell never updates when you click the button. Let's take a closer look at that. *Note that we specify the widget option `{required: true}` so that the initial value will be `undefined` (we'll come back to that later).*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":282,"value":"viewof my_2nd_counter = Inputs.button('Count up', {required: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":283,"value":"viewof my_2nd_counter.value","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":286,"value":"my_2nd_counter","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":290,"value":"Click the button a few times, and note how the cell that references `\"my_2nd_counter\"` invalidates and updates on every click. Now rerun the cell that references `\"viewof my_2nd_counter.value\"`.\n\n`\"viewof my_2nd_counter\"` references the cell that contains the DOM element, but this cell never produces a *new* value. Therefore the cell containing `\"viewof my_2nd_counter.value\"` is never invalidated.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":379,"value":"\n### The generator\n\nYou may have also noticed that `\"my_2nd_counter\"` was shown as \"waiting\" until you clicked the button for the first time. As mentioned earlier, a view's value cell is a generator, more specifically a generator produced by  [`Generators.input()`](https://github.com/observablehq/stdlib#Generators_input), which is part of Observable's Standard Library.\n\n`Generators.input()` takes a DOM element as argument and produces a new value whenever an `input` event^* is dispatched. \n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":387,"value":"my_3rd_counter = Inputs.button('Count up')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":386,"value":"Generators.input(my_3rd_counter)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":392,"value":"Earlier we determined that cells with the `viewof` prefix can be referenced like any \"normal\" cell. Combined with `Generators.input()` we get:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":398,"value":"viewof my_4th_counter = Inputs.button('Count up')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":403,"value":"my_4th_counter","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":400,"value":"{\n  const output = html``;\n  yield output;\n  for await(const value of Generators.input(viewof my_4th_counter)) {\n    output.value = value;\n  }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":377,"value":"### A note about `undefined`\n\nIf an element's *initial* value is `undefined`, then `Generators.input()` will not yield that value. However, any subsequent value will be yielded, even if it is `undefined`.\n\nLet's take a last look at this behavior before moving on. Below you see a button whose value is always `undefined`:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":309,"value":"viewof button_undefined = {\n  const element = html`