Playground style updates #3182

OAGr · 2024-04-15T23:05:31Z

(95% of this can be reviewed now, but still have some small adjustments to make)

…ggle * 'main' of https://github.com/quantified-uncertainty/squiggle: bundle outputs entire dist/ copy *.node during bundle

changeset-bot · 2024-04-15T23:05:35Z

🦋 Changeset detected

Latest commit: db6de0c

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

This PR includes changesets to release 7 packages

Name	Type
@quri/versioned-squiggle-components	Patch
@quri/squiggle-components	Patch
@quri/ui	Patch
vscode-squiggle	Patch
@quri/squiggle-lang	Patch
@quri/prettier-plugin-squiggle	Patch
@quri/squiggle-textmate-grammar	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 · 2024-04-15T23:05:41Z

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

Name	Status	Preview	Updated (UTC)
quri-hub	✅ Ready (Inspect)	Visit Preview	Apr 24, 2024 3:58pm
quri-ui	✅ Ready (Inspect)	Visit Preview	Apr 24, 2024 3:58pm
squiggle-components	✅ Ready (Inspect)	Visit Preview	Apr 24, 2024 3:58pm
squiggle-website	✅ Ready (Inspect)	Visit Preview	Apr 24, 2024 3:58pm

* style-updates-april-2024: Lint fix Adding codeBracketSquareIcon to variable card Make code bracket square icon an outline Refactors to variable versions bar Improving model card them, Entity Card Minor model updates Minor cleanup Quick first pass at new model cards

* style-updates-april-2024: Formatted Remove prettier-tailwind Added tailwind-prettier to root package.json More card cleanup

* style-updates-april-2024: Added keys, to fix linter Fixed breaking of components Badge -> EntityCardBadge rename Added interspersedMenuItems Applied prettier, with tailwind-prettier Added prettier-plugin-tailwindcss delete dockerfile

OAGr · 2024-04-17T20:38:25Z

packages/versioned-components/src/SquigglePlaygroundVersionPickerDropdown.tsx

+
+const CHANGELOG_URL = "https://www.squiggle-language.com/docs/Changelog";
+
+export const SquigglePlaygroundVersionPickerDropdown: FC<


I changed this from SquigglePlaygroundVersionPicker, so that it could be called with custom children. The playground/website want to call it with CSS based on the Playground, which gets messy when it's attempted to be coupled with this component directly.

I'm not sure I understand the problem, and I see issues with this new approach:

you had to duplicate more code in website and hub

I see that you import PlaygroundToolbarItem from @quri/squiggle-components in the website and in the hub, so it's unversioned, and not future-proof: when the playground design (e.g. toolbar background color or height) changes again, both website and hub would have to be updated somehow, and it might get messy

It's possible to export PlaygroundToolbarItem through versioned-components, but that's a headache.

The playground/website want to call it with CSS based on the Playground

If this is some technical issue that you encountered, maybe with Tailwind or with CSS inherited, maybe we can find another way to fix it?

* style-updates-april-2024: Minor cleanup <pre> tag in initial CodeSyntaxHighlighter

OAGr · 2024-04-17T20:53:53Z

TODO:

Change "Private Variables" to "All Variables"
Change "Exports" to "Exported Variables"
Maybe, later, show imports in the "All variables" list, as they sort of are variables.
Revert pill styling.

* main:

berekuk

General meta-level comments:

I understand that design is partially subjective, so I'm trying to limit my comments to the aspects that I think can be argued "objectively" (i.e., affect the usability in a way that I can describe), and this sometimes makes me to spell things out more than necessary, sorry about that
also some of my objections might be caused by old habits; so I expect that I might eventually update in the direction of "ok, this is actually fine/better than before and I overreacted" about some parts of these changes, but not all of them
- as an example, pre-0.9.0 triangles in the viewer look uglier to me now than they did at the time; OTOH, I still don't like how tiny the post-0.9.0 carets are
please just ignore my objections that you consider unfair/misguided; probably better to just proceed BDFL-style than spend much time looking for the middle ground, in this case

One more thing: there's a weird and quite annoying bug somewhere in this PR, that makes the first line in the editor to be unselectable. No idea why, maybe some invisible element from the toolbar bleeds into the editor area?

berekuk · 2024-04-25T17:57:13Z

packages/ui/src/icons/IconByName.tsx

+  Die4Icon,
+  Die5Icon,
+  Die6Icon,
+};


We can make this type-safe:

add as const, remove explicit Record type on top (but add satisfies Record<string, FC<IconProps>> to make sure that all values conform to the same interface)

extract name type with type IconName = keyof typeof allIconsMap

use that type instead of string in name: string below

berekuk · 2024-04-25T17:58:09Z

packages/ui/src/icons/IconByName.tsx

+  const IconComponent = findByName(name);
+
+  if (!IconComponent) {
+    return null;


Throw instead of returning null? (especially if we make things more type-safe, as I recommend above)

berekuk · 2024-04-25T18:14:04Z

packages/ui/src/components/Button.tsx

@@ -37,15 +37,15 @@ export const Button: FC<ButtonProps> = ({
      className={clsx(
        "border text-sm font-medium",
        theme === "primary"
-          ? "border-green-900 bg-green-700 text-white"
-          : "border-slate-300 bg-slate-100 text-gray-600",
+          ? "border-emerald-600 bg-emerald-500 text-white"


The old color was probably too dark, but this one is giving me a bit of eye strain. Can we boost it to emerald-600 by default?

The contrast is 2.53 (I had to patch HTML a bit to convince Chrome to show me the value).

The typical recommendation is 3:1:

https://m3.material.io/foundations/accessible-design/patterns

https://ux.stackexchange.com/a/131058

(reminder that we're both on macs; people with worse displays will have harder time with it)

berekuk · 2024-04-25T18:15:30Z

packages/ui/src/components/Button.tsx

-          ? "border-green-900 bg-green-700 text-white"
-          : "border-slate-300 bg-slate-100 text-gray-600",
+          ? "border-emerald-600 bg-emerald-500 text-white"
+          : "border-gray-300 bg-gray-50 text-gray-500",


Non-primary version is more readable for me, but gray-500 looks borderline disabled. Maybe it'll be ok in the context of other UI, I'm not sure.

berekuk · 2024-04-25T18:16:51Z

packages/ui/src/components/Button.tsx

        wide && "w-full",
-        size === "medium" && "h-8 rounded-md",
+        size === "medium" && "h-8 rounded-sm",


Glad to see that small and normal buttons have the similar style now.

berekuk · 2024-04-25T20:04:16Z

packages/hub/src/app/models/[owner]/[slug]/EditSquiggleSnippetModel.tsx

-          <SaveButton onSubmit={onSubmit} disabled={inFlight} />
+          <SaveButton
+            onSubmit={onSubmit}
+            disabled={inFlight || !codeHasChanged}


codeHasChanged is not enough, we also save the seed, environment, and other things.

Comparing all those properties might be a headache. (Ideally, all of them would be managed by react-hook-form, and then we could use form.formState.isDirty, but that's tricky with our current implementation)

There's a workaround where you could insert a new line, but that's hacky.

Also:

I've been hearing how disabling buttons on forms is a bad practice (I'm still not totally convinced, but that's a very common opinion).

The "Saved" toast appears in the far corner, so there's now no obvious feedback that the model was saved (that toast could be improved, but it'll take a while)

Proposal: instead of disabling, pass a flag that would toggle from theme: "primary" to theme: "default"?

berekuk · 2024-04-25T20:39:29Z

packages/components/src/components/SquiggleViewer/ValueViewer/WithContext.tsx

          )}
          onClick={handle.toggleCollapsed}
        >
-          <Icon size={13} />
+          <Icon size={9} />


The clickable area is now 16x9, while it was 16x13 in v0.9.3. If the icon is smaller now, is it possible to add vertical padding to the clickable div around it?

berekuk · 2024-04-25T20:51:48Z

packages/components/src/components/SquiggleViewer/ValueViewer/Title.tsx

          isFocusEnabled && "cursor-pointer hover:underline"
        )}
        onClick={() => isFocusEnabled && zoomIn(valuePath)}
      >
        {title}
      </div>
-      {showColon && <div className="font-mono text-gray-400">:</div>}


Lack of colon makes it harder to interpret the results:

In general, I'm concerned about optimizing UI by removing things that are visual cruft when you're an expert at the playground and understand which element is which, but that were very helpful for people who don't understand yet what's going on.

This specific case is minor, though, and I'd prefer that we wrap array indices in [] instead of using colons. Also it's less of a problem than this (which is a problem both in this PR and before):

berekuk · 2024-04-25T20:56:10Z

packages/ui/src/forms/styled/StyledToggle.tsx

+  onChange(newValue: boolean): void;
+};
+
+export function StyledToggle({


You don't use this anywhere and don't export it, was this intended for replacing "Autorun" in the future?

berekuk · 2024-04-26T18:05:49Z

packages/versioned-components/src/SquigglePlaygroundVersionPickerDropdown.tsx

+
+const CHANGELOG_URL = "https://www.squiggle-language.com/docs/Changelog";
+
+export const SquigglePlaygroundVersionPickerDropdown: FC<


I'm not sure I understand the problem, and I see issues with this new approach:

you had to duplicate more code in website and hub

I see that you import PlaygroundToolbarItem from @quri/squiggle-components in the website and in the hub, so it's unversioned, and not future-proof: when the playground design (e.g. toolbar background color or height) changes again, both website and hub would have to be updated somehow, and it might get messy

It's possible to export PlaygroundToolbarItem through versioned-components, but that's a headache.

The playground/website want to call it with CSS based on the Playground

If this is some technical issue that you encountered, maybe with Tailwind or with CSS inherited, maybe we can find another way to fix it?

OAGr added 7 commits April 15, 2024 13:45

Improving Playground styles, added IconByName in UI

d2a2114

Thinner chevron icons

5a3a655

Merge branch 'main' of https://github.com/quantified-uncertainty/squi…

d6abd41

…ggle * 'main' of https://github.com/quantified-uncertainty/squiggle: bundle outputs entire dist/ copy *.node during bundle

Light color changes

69eba71

Merged with squigglechart-path-fix

e341ca3

Better pass at version picker button

be4f0b3

green -> emerald

53be9aa

vercel bot deployed to Preview – quri-hub April 15, 2024 23:07 View deployment

OAGr changed the base branch from style-updates-april-2024 to main April 15, 2024 23:07

OAGr changed the base branch from main to style-updates-april-2024 April 15, 2024 23:08

OAGr changed the base branch from style-updates-april-2024 to main April 15, 2024 23:09

OAGr changed the base branch from main to style-updates-april-2024 April 15, 2024 23:09

vercel bot deployed to Preview – squiggle-website April 15, 2024 23:09 View deployment

vercel bot deployed to Preview – quri-ui April 15, 2024 23:10 View deployment

vercel bot deployed to Preview – squiggle-components April 15, 2024 23:20 View deployment

vercel bot deployed to Preview – squiggle-website April 15, 2024 23:22 View deployment

vercel bot deployed to Preview – quri-hub April 15, 2024 23:25 View deployment

vercel bot deployed to Preview – quri-ui April 15, 2024 23:26 View deployment

Merge branch 'style-updates-april-2024' into playground-style-updates

af1e68b

* style-updates-april-2024: Formatted Remove prettier-tailwind Added tailwind-prettier to root package.json More card cleanup

vercel bot deployed to Preview – quri-hub April 16, 2024 14:02 View deployment

vercel bot deployed to Preview – quri-ui April 16, 2024 18:51 View deployment

Ran formatter, fixed other linter errors

bdd8a67

vercel bot deployed to Preview – squiggle-components April 16, 2024 18:55 View deployment

vercel bot had a problem deploying to Preview – quri-hub April 16, 2024 18:57 Failure

vercel bot had a problem deploying to Preview – squiggle-website April 16, 2024 18:58 Failure

vercel bot deployed to Preview – quri-ui April 16, 2024 18:58 View deployment

vercel bot deployed to Preview – squiggle-website April 17, 2024 17:02 View deployment

vercel bot deployed to Preview – squiggle-components April 17, 2024 17:03 View deployment

Version picker cleanup

0cfd698

vercel bot deployed to Preview – quri-hub April 17, 2024 17:47 View deployment

vercel bot deployed to Preview – squiggle-website April 17, 2024 17:49 View deployment

OAGr commented Apr 17, 2024

View reviewed changes

OAGr marked this pull request as ready for review April 17, 2024 20:39

OAGr requested a review from berekuk as a code owner April 17, 2024 20:39

OAGr added 2 commits April 17, 2024 13:41

Merge branch 'style-updates-april-2024' into playground-style-updates

a80f79d

* style-updates-april-2024: Minor cleanup <pre> tag in initial CodeSyntaxHighlighter

Added changeset

59e7bc1

vercel bot deployed to Preview – squiggle-website April 17, 2024 20:44 View deployment

vercel bot deployed to Preview – squiggle-components April 17, 2024 20:45 View deployment

vercel bot deployed to Preview – quri-hub April 17, 2024 20:48 View deployment

Base automatically changed from style-updates-april-2024 to main April 17, 2024 22:05

Minor reversion and fixes

283f9b5

OAGr temporarily deployed to Preview April 24, 2024 15:43 — with GitHub Actions Inactive

vercel bot deployed to Preview – quri-ui April 24, 2024 15:44 View deployment

vercel bot deployed to Preview – quri-hub April 24, 2024 15:47 View deployment

Merge branch 'main' into playground-style-updates

0da0523

* main:

vercel bot deployed to Preview – squiggle-website April 24, 2024 15:49 View deployment

vercel bot deployed to Preview – squiggle-components April 24, 2024 15:50 View deployment

Added lint override for stories

db6de0c

OAGr temporarily deployed to Preview April 24, 2024 15:51 — with GitHub Actions Inactive

vercel bot deployed to Preview – squiggle-components April 24, 2024 15:53 View deployment

vercel bot deployed to Preview – quri-hub April 24, 2024 15:56 View deployment

vercel bot deployed to Preview – quri-ui April 24, 2024 15:56 View deployment

vercel bot deployed to Preview – squiggle-website April 24, 2024 15:58 View deployment

berekuk reviewed Apr 26, 2024

View reviewed changes

dependabot bot mentioned this pull request Jun 1, 2024

⬆️ Bump @headlessui/react from 1.7.19 to 2.0.4 #3288

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Playground style updates #3182

Playground style updates #3182

OAGr commented Apr 15, 2024 •

edited

Loading

changeset-bot bot commented Apr 15, 2024 •

edited

Loading

vercel bot commented Apr 15, 2024 •

edited

Loading

OAGr Apr 17, 2024

berekuk Apr 26, 2024

OAGr commented Apr 17, 2024 •

edited

Loading

berekuk left a comment

berekuk Apr 25, 2024

berekuk Apr 25, 2024

berekuk Apr 25, 2024

berekuk Apr 25, 2024

berekuk Apr 25, 2024

berekuk Apr 25, 2024

berekuk Apr 25, 2024

berekuk Apr 25, 2024

berekuk Apr 25, 2024

berekuk Apr 26, 2024


		const CHANGELOG_URL = "https://www.squiggle-language.com/docs/Changelog";

		export const SquigglePlaygroundVersionPickerDropdown: FC<

Playground style updates #3182

Are you sure you want to change the base?

Playground style updates #3182

Conversation

OAGr commented Apr 15, 2024 • edited Loading

changeset-bot bot commented Apr 15, 2024 • edited Loading

🦋 Changeset detected

vercel bot commented Apr 15, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

OAGr commented Apr 17, 2024 • edited Loading

berekuk left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

OAGr commented Apr 15, 2024 •

edited

Loading

changeset-bot bot commented Apr 15, 2024 •

edited

Loading

vercel bot commented Apr 15, 2024 •

edited

Loading

OAGr commented Apr 17, 2024 •

edited

Loading