Squiggle value menu additions

[OAGr]

• Added a "Log to console" menu option
• Added "Unfocus" menu option, where relevant
• Squiggle Output exports to window.squiggleOutput, for further debugging.

[changeset-bot]

🦋 Changeset detected

Latest commit: e00fd23

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 5 packages

Name	Type
@quri/squiggle-components	Patch
@quri/ui	Patch
vscode-squiggle	Patch
@quri/squiggle-lang	Patch
@quri/prettier-plugin-squiggle	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
quri-hub	✅ Ready (Inspect)	Visit Preview	Nov 21, 2023 2:28am
squiggle-components	✅ Ready (Inspect)	Visit Preview	Nov 21, 2023 2:28am
squiggle-website	✅ Ready (Inspect)	Visit Preview	Nov 21, 2023 2:28am

1 Ignored Deployment

Name	Status	Preview	Updated (UTC)
quri-ui	⬜️ Ignored (Inspect)	Visit Preview	Nov 21, 2023 2:28am

[sweep-ai]

Apply Sweep Rules to your PR?

• Apply: All docstrings and comments should be up to date.
• Apply: Ensure that all variables and functions have descriptive names.
• Apply: Avoid using unnecessary separators or extra characters in code.
• Apply: Use consistent indentation and spacing throughout the code.
• Apply: Ensure that all code is properly formatted and follows the style guide.
• Apply: Avoid using magic numbers or hard-coded values in the code.

[berekuk]

Great changes. window suggestion should be fixed before merge, and I don't care much about the second one, can be improved later.

[berekuk]

There can be multiple Squiggle components on any page, so maybe this shouldn't be enabled by default?

Two alternatives:

1. set this in onOutputChange prop that's passed to LeftPlaygroundPanel in SquigglePlayground (multiple playgrounds on a single page are rare)
2. pass it to SquigglePlayground in onOutputChange prop (we don't have onOutputChange prop in the playground yet because we merged your version with onExportsChange before I implemented VersionedSquiggleChart, but I think we agreed to change it later); then log it in docs playground and in Squiggle Hub

[OAGr]

How about this:
We do (1), and also, we set each playground to have it's own ID, that we use for it.
Like, window.squiggleOutput.[Playground_ID]

We can generate the ID with https://react.dev/reference/react/useId.

If we do that, we could also save the project, sourceId, code, and anything else, if we want.

[berekuk]

Yes, that's also an option.

OTOH, I've started to have doubts about the usefulness of this feature, compared to using built-in React dev tools:

I just tried it and it works; it's slightly hard to locate SquiggleViewer component because it doesn't have a name (I'm not sure why; we do forwardRef(function SquiggleViewer(...) {}) instead of forwardRef(() => ...), which should be enough), but other than that, it's quite convenient.

There's also right click -> "Store as global variable" action on individual props (hard to screenshot).

IIRC, until recently, Next.js obfuscated component names in production builds, but recently they changed it to look the same as in dev.

[OAGr]

It might not be very useful, but it seems pretty cheap. And the React dev tools are a browser extention - a fair bit more hacky.

This we could give to users for use.