Inputs and Plots are run even when condition is false

[dkrasne]

I'm trying to set up a situation where a plot is only created or displayed (I'd be fine with either, but the ultimate point is not to display it) if a certain condition is met. However, I keep running into problems, and it's either a bug or my lack of understanding of generators, promises, etc. But I think it's a bug. Since my code is complex, here's a very basic alternative that causes the same bug. (N.B. When it's a plot, not an Input, I can get it to work if I don't assign the plot to a variable, by embedding the plot creation inside a template literal -- but I'm going to need the value of the user-selected cell at a later point, so I need to assign it to a variable.)

Code block 1
```js
const testTF = false;
const testHtml = html`<div><p>${testTF}</p></div>`;
```

Code block 2
```js
if (testTF === true) {
	const testInput = html`<input type=range step=1 min=1 max=15>`;
	const n = view(testInput);
}
```

Code block 3
```js
if (testTF === false) {display(testHtml);} else {display(testInput);}
```

The way I understand flow logic, when testTF is set to false, testInput shouldn't be created, and the display(testInput) shouldn't be run. However, that's not exactly what's happening, as you can see in these screenshots:

testTF set to false:

testTF set to true:

If I take the creation of testInput out of a conditional, I also have a problem, because then it automatically displays at the point of its creation if that variable isn't invoked elsewhere:

testTF set to false:

testTF set to true:

Thanks in advance for the help!

[Fil]

Only variables created at the top-level of a code block are visible outside of it. You could maybe replace your second block with:

const testInput = testTF === true ? html`<input type=range step=1 min=1 max=15>` : null;
const n = testTF === true ? view(testInput) : null;

[dkrasne]

Thank you! I'll try that (in the toy example, and then try to replicate it in the real example). But the second part of my confusion still remains: in code block 3, why does the if/else statement read the else (and therefore produce an error message) even when the if statement is true?

[dkrasne]

Oh, also, that works fine for a one-liner, since it can be ternary. But is there any workaround for things that are on multiple lines or include if statements?

[Fil]

Sure: you can use let instead of const, and modify the values in the conditionals.

[dkrasne]

So I've managed to successfully define the plot elsewhere and then display it where I want, using a ternary expression. But I still can't get the view() working right.

Here's what I've got in my actual code (the plot is defined in a different cell):

```js
let bgColor = "#ccccff"; // this is a nice blue that works well
/* the following are attempts to make a more "papyrus"-like background that still contrasts with the lightest green */
/*
bgColor = "#ddcc88";
bgColor = "#daba91"; // taken from an actual papyrus pixel
bgColor = "#ccaf87"; // taken from an actual papyrus pixel
bgColor = "#d4b48c"; // average of the previous two colors
*/

if (intertextsArr.every(intxt => intxt.intxtCnt === 0)) {
	display(html`<p>Based on information currently in the database, there are no intertexts in the specified passage.</p>`)
} else {

display(

html`<p style="max-width:none; font-size:smaller;">Click on a cell to freeze the popup information. <b>Direct intertexts</b> are those where a scholar has suggested a direct link between the present word and a word in an earlier text. <b>Indirect intertexts</b> are intertexts at further remove (i.e., where a direct or indirect intertext refers to another, still earlier, passage). Currently, the project does not include intratexts (allusions to other passages within the same text).</p>

<p style="max-width:none; font-size:smaller;">Two caveats: absence of a word does not mean that there are no intertexts, just that they are not yet in the database; and lines appear in numeric order, even if editors agree that they should be transposed.</p></div>

<div class="grid grid-cols-2"><div class="card" style="background-color:${bgColor}; padding-top: 30px;">

<h2 style="padding-bottom: 10px;">${passageDetails.authorName}, <i>${passageDetails.workTitle}</i>, ${passageDetails.workSegName}: lines ${lineRange.firstLine}&ndash;${lineRange.lastLine}</h2>

${plotVar}
</div>
<div>
	<p>Eventually there will be a network visualization in this space.</p>

</div>
</div>`

)
}
```

If I add ${view(plotVar)} inside the <div> where the network will be, it just shows me [object AsyncGenerator]. But if I try to define it in a separate code block, even using a ternary expression, it blows everything up and moves the plot. What I actually need, and maybe there's a different way to go about this, is to grab the value of the highlighted cell so that I can use its values to pull in a network (that I haven't yet built).

[Fil]

view and display are not meant to be used in ${……} interpolation tags; but you can name your input widget. For example:

```js
const widget = Inputs.range(); // an HTML range input
const value = Generators.input(widget); // The async generator bound to the value of the widget
```

${widget}

Hello, ${value}.

In the example above Generators.input is identical to view, but it does not try to display the widget in that block (since it will be displayed in the interpolated Markdown).

https://observablehq.com/framework/reactivity

[dkrasne]

And would that work with Plot, as well as Input? (The Input in my original example was only for the sake of simple demonstration.) Thanks!

…

On Sat, Mar 15, 2025, 12:07 PM Philippe Rivière ***@***.***> wrote: view and display are not meant to be used in ${……} interpolation tags; but you can name your input widget. For example: ```jsconst widget = Inputs.range(); // an HTML range inputconst value = Generators.input(widget); // The async generator bound to the value of the widget``` ${widget} Hello, ${value}. In the example above Generators.input is identical to view, but it does not try to display the widget in that block (since it will be displayed in the interpolated Markdown). https://observablehq.com/framework/reactivity — Reply to this email directly, view it on GitHub <#1946 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/A3ALFGLHZW5PZUEB2IEGLTD2URF4DAVCNFSM6AAAAABZCRSRUOVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTENJRGA3DQNI> . You are receiving this because you authored the thread.Message ID: ***@***.*** com>

[Fil]

Yes. These are simply DOM elements.

[dkrasne]

Thanks so much! I'll be back if I run into any more snags (or start a new Q&A topic), but it looks promising so far! :)