Plots don't load until I force live refresh

Community Help
1

Sorry to ask another question so soon, but I’m running into a weird issue. When I compute data for my plot, the plots don’t load when the development server starts, but only when I change some code, save it, change it back again, and save it again.

This is what I’m working with:

The javascript section:

    import { DataMaker } from './DataMaker.js';

    const dataMaker = new dataMaker();

    const a = view(Inputs.range([0, 50], {label: html`a`, step: 0.1}));
    const b = view(Inputs.range([0, 1], {label: html`b`, step: 0.01}));
    const c = view(Inputs.range([0, 5], {label: html`c`, step: 0.05}));
    const data = dataMaker.data(a, b, c);

Then the HTML section:

Plot.plot({
            marks: [
                Plot.ruleY([0]),
                Plot.areaY(data, {x: "energy", y: "flux", curve: "step"}),
                Plot.lineY(data, {x: "energy", y: "flux", stroke: "red"})
            ]
        }
2

The view(…) function returns a generator. Are you passing the generators directly to your dataMaker.data(a, b, c) function? You haven’t shared the code, but probably you want to put the references to a, b, and c in a different code block from where you declared it so that they refer to the reactive value of the input rather than the generator. That way the data will be recomputed when the user interacts with the inputs.

Something like this:

```js
const a = view(Inputs.range([0, 50], {label: html`a`, step: 0.1}));
const b = view(Inputs.range([0, 1], {label: html`b`, step: 0.01}));
const c = view(Inputs.range([0, 5], {label: html`c`, step: 0.05}));
```
```js
import {DataMaker} from "./DataMaker.js";

const dataMaker = new dataMaker();
const data = dataMaker.data(a, b, c);
```

Then lastly your plot in another code block.

If you don’t want to create a new dataMaker every time a, b, or c changes, you could also write it this way:

```js
const a = view(Inputs.range([0, 50], {label: html`a`, step: 0.1}));
const b = view(Inputs.range([0, 1], {label: html`b`, step: 0.01}));
const c = view(Inputs.range([0, 5], {label: html`c`, step: 0.05}));
```
```js
import {DataMaker} from "./DataMaker.js";

const dataMaker = new dataMaker();
```
```js
const data = dataMaker.data(a, b, c);
```

See the Reactivity docs for more, and in particular note this line:

As with implicit await and promises, implicit iteration of generators only applies across code blocks, not within a code block.

3

I had found that page from a previous post here, sorry I should have mentioned. It didn’t work. For reference, this is what I’m seeing:

Screenshot 2024-05-07 at 8.33.15 PM
Screenshot 2024-05-07 at 8.33.15 PM744×640 2.81 KB

The DataMaker class just looks something like this:

export class DataMaker {
    constructor() {
    }

    data(a,b,c) {
        const n = 1000;
        const data = new Array(n);
        for (let i = 0; i < n; i++) {
            data[i] = {
                energy: i,
                flux: (a + b + c)*i
            };
        }
        data.columns = ['energy', 'flux'];
        return data;
    }
}

Hopefully, all this should constitute a MWE. I was able to reproduce the issue without all my (much longer) code.

Thanks!

4

Strange. It works for me. I created a file dataMaker.js with your class code in there, then created the following .md file:


```js
import { DataMaker } from "./dataMaker.js";
```

```js
const a = view(Inputs.range([0, 50], { label: html`a`, step: 0.1 }));
const b = view(Inputs.range([0, 1], { label: html`b`, step: 0.01 }));
const c = view(Inputs.range([0, 5], { label: html`c`, step: 0.05 }));
const dm = new DataMaker();
```

```js
const data = dm.data(a, b, c);
display(data);
```


```js
Plot.plot({
  marks: [
    Plot.ruleY([0]),
    Plot.areaY(data, { x: "energy", y: "flux", curve: "step" }),
    Plot.lineY(data, { x: "energy", y: "flux", stroke: "red" }),
  ],
})
```

image
image1604×1176 59.5 KB

5

Ok I figured out what the problem was, and it’s really strange. If I had two plots in my HTML section, but one was commented out, it did the thing. E.g. like this:

<div class="grid grid-cols-2">
    <div class="card">${
        resize((width) => Plot.plot({
            marks: [
                Plot.ruleY([0]),
                Plot.areaY(data, { x: "energy", y: "flux", curve: "step" }),
                Plot.lineY(data, { x: "energy", y: "flux", stroke: "red" }),
            ],
        }))
    }</div>
    <!-- <div class="card">${
        resize((width) => Plot.plot({
            marks: [
                Plot.ruleY([0]),
                Plot.areaY(data, { x: "energy", y: "flux", curve: "step" }),
                Plot.lineY(data, { x: "energy", y: "flux", stroke: "red" }),
            ],
        }))
    }</div> -->
</div>
6

Strange. Commenting out works for me. I wish I could figure out why it doesn’t work for you, but it seems like you are all set now?

7

Weird. But thank you for the help anyway!

8

For reference, there is an open issue about supporting “Commenting out code” — currently the code runs “inside the comment”, even though it can’t send its output to the page.