From 31ef317760e0b8f9a32c1659f385ce188753ed0d Mon Sep 17 00:00:00 2001 From: Ozzie Gooen Date: Sat, 23 Mar 2024 08:27:57 -0700 Subject: [PATCH 1/3] Simple example of hub changing default autorun mode --- .../components/src/components/SquigglePlayground/index.tsx | 3 +++ .../src/app/models/[owner]/[slug]/EditSquiggleSnippetModel.tsx | 1 + 2 files changed, 4 insertions(+) diff --git a/packages/components/src/components/SquigglePlayground/index.tsx b/packages/components/src/components/SquigglePlayground/index.tsx index 12114c4dff..ece80b48af 100644 --- a/packages/components/src/components/SquigglePlayground/index.tsx +++ b/packages/components/src/components/SquigglePlayground/index.tsx @@ -40,6 +40,7 @@ export type SquigglePlaygroundProps = { * So updates to it are completely ignored. */ defaultCode?: string; + defaultAutorunMode?: boolean; sourceId?: string; linker?: SqLinker; onCodeChange?(code: string): void; @@ -78,6 +79,7 @@ export const SquigglePlayground: React.FC = ( renderExtraDropdownItems, renderExtraModal, renderImportTooltip, + defaultAutorunMode, height = 500, ...defaultSettings } = props; @@ -107,6 +109,7 @@ export const SquigglePlayground: React.FC = ( sourceId: _sourceId, setup: { type: "projectFromLinker", linker }, environment: settings.environment, + initialAutorunMode: defaultAutorunMode, }); useEffect(() => { diff --git a/packages/hub/src/app/models/[owner]/[slug]/EditSquiggleSnippetModel.tsx b/packages/hub/src/app/models/[owner]/[slug]/EditSquiggleSnippetModel.tsx index 3b8614a839..380942a2cf 100644 --- a/packages/hub/src/app/models/[owner]/[slug]/EditSquiggleSnippetModel.tsx +++ b/packages/hub/src/app/models/[owner]/[slug]/EditSquiggleSnippetModel.tsx @@ -312,6 +312,7 @@ export const EditSquiggleSnippetModel: FC = ({ typeof squiggle.components.SquigglePlayground >[0] = { defaultCode, + defaultAutorunMode: false, sourceId: serializeSourceId({ owner: model.owner.slug, slug: model.slug, From 62a5e0160cd6f2f0f28016fd3c6e5a9752520172 Mon Sep 17 00:00:00 2001 From: Ozzie Gooen Date: Sat, 23 Mar 2024 13:12:15 -0700 Subject: [PATCH 2/3] First go at adding backend-saved autorun and other defaults --- .../components/SquigglePlayground/index.tsx | 4 +-- packages/hub/README.md | 32 ++++++++++++++++--- packages/hub/package.json | 1 + .../migration.sql | 5 +++ packages/hub/prisma/schema.prisma | 9 ++++-- packages/hub/schema.graphql | 3 ++ .../[slug]/EditSquiggleSnippetModel.tsx | 13 ++++++-- packages/hub/src/constants.ts | 1 + .../mutations/updateSquiggleSnippetModel.ts | 6 ++++ .../hub/src/graphql/types/ModelRevision.ts | 3 ++ 10 files changed, 64 insertions(+), 13 deletions(-) create mode 100644 packages/hub/prisma/migrations/20240323172615_squiggle_snippet_default_env/migration.sql diff --git a/packages/components/src/components/SquigglePlayground/index.tsx b/packages/components/src/components/SquigglePlayground/index.tsx index ece80b48af..dfab5161b3 100644 --- a/packages/components/src/components/SquigglePlayground/index.tsx +++ b/packages/components/src/components/SquigglePlayground/index.tsx @@ -40,7 +40,7 @@ export type SquigglePlaygroundProps = { * So updates to it are completely ignored. */ defaultCode?: string; - defaultAutorunMode?: boolean; + autorunMode?: boolean; sourceId?: string; linker?: SqLinker; onCodeChange?(code: string): void; @@ -79,7 +79,7 @@ export const SquigglePlayground: React.FC = ( renderExtraDropdownItems, renderExtraModal, renderImportTooltip, - defaultAutorunMode, + autorunMode: defaultAutorunMode = true, height = 500, ...defaultSettings } = props; diff --git a/packages/hub/README.md b/packages/hub/README.md index 56dac4dadf..583a170310 100644 --- a/packages/hub/README.md +++ b/packages/hub/README.md @@ -10,8 +10,12 @@ We don't have CI/CD for migrating the database in production yet. To deploy a migration to the production database: -- obtain the database connection string from Digital Ocean; -- run `DATABASE_URL=... prisma migrate deploy` locally. +1. obtain the database connection string from Digital Ocean; +2. Make sure `DATABASE_URL=YOUR_URL` is stored in an `.env` file at the root of this lib. +3. If developing on the migration, use `prisma migrate dev`. +4. If using production or fully migrating your `development` environment, use `prisma migrate deploy`. + +Note: Your `DATABASE_URL` for `development` likely looks something like, `postgres://postgres@localhost:5432/[db-name-here]` ## Changing the database @@ -20,11 +24,29 @@ To deploy a migration to the production database: ## Notes on changing the schema +Editing the schema is suprisingly annoying. Make sure to follow these specific steps. + 1. Edit `schema.prisma`, and edit the query/mutations functions. -2. Ensure the type has been added in `builder.prismaNode("NameHere", {...types` somewhere that gets read, somewhere in `/graphql/types`. -3. `schema.graphql` is autogenerated. Do not change it manually. -4. The Typescript language server will frequently get out of date when editing the schema. You can update use VS Code (control-shift-p) to force a restart. You might want to update the Prisma language server too. You can also just try to get everything right, run `pnpm run gen`, and reload files, sometimes that fixes things. +2. Run `pnpm run gen`, to generate new TS types for the prisma file. +3. Try adding the type has been added in `builder.prismaNode("NameHere", {...types` somewhere that gets read, somewhere in `/graphql/types`. It should not find the type with Typescript yet. This will be used to update `schema.graphql`. +4. Restart the Typescript Server `> Typescript: Restart TS Server`. If this option doesn't show, try changing tabs. Now, it should show up in `graphql/types/[your file]`. Now, you should see the correct types in `/graphql/types/`. +5. Run `pnpm run gen` again. +6. Check `schema.graphql`. After step 5, this should get updated. Do not change this file manually. + +The Typescript language server will frequently get out of date when editing the schema. You can update use VS Code (control-shift-p) to force a restart. You might want to update the Prisma language server too. You can also just try to get everything right, run `pnpm run gen`, and reload files, sometimes that fixes things. # Development notes [How to load GraphQL data in Next.js pages](/docs/relay-pages.md) + +# Development Env Variables + +There are some key environment variables you will need to use. Here's an example: + +``` +DATABASE_URL=postgres://postgres@localhost:5432/[your-db-name] +NEXTAUTH_URL=http://localhost:3001 +SENDGRID_KEY= +EMAIL_FROM=dev@squigglehub.org // doesn't matter too much. +ROOT_EMAILS=[your-email] // email of the root user on Squiggle Hub, to get extra permissions +``` diff --git a/packages/hub/package.json b/packages/hub/package.json index 6c5be45aee..42ea4a2961 100644 --- a/packages/hub/package.json +++ b/packages/hub/package.json @@ -3,6 +3,7 @@ "version": "0.1.0", "private": true, "scripts": { + "db:migrate:dev": "PRISMA_HIDE_UPDATE_MESSAGE=1 prisma migrate dev", "db:migrate": "PRISMA_HIDE_UPDATE_MESSAGE=1 prisma migrate deploy", "db:reset": "PRISMA_HIDE_UPDATE_MESSAGE=1 prisma migrate reset", "dev": "next dev -p 3001", diff --git a/packages/hub/prisma/migrations/20240323172615_squiggle_snippet_default_env/migration.sql b/packages/hub/prisma/migrations/20240323172615_squiggle_snippet_default_env/migration.sql new file mode 100644 index 0000000000..0df3602a0b --- /dev/null +++ b/packages/hub/prisma/migrations/20240323172615_squiggle_snippet_default_env/migration.sql @@ -0,0 +1,5 @@ +-- AlterTable +ALTER TABLE "SquiggleSnippet" ADD COLUMN "autorunMode" BOOLEAN, +ADD COLUMN "sampleCount" INTEGER, +ADD COLUMN "xyPointLength" INTEGER, +ALTER COLUMN "seed" DROP DEFAULT; diff --git a/packages/hub/prisma/schema.prisma b/packages/hub/prisma/schema.prisma index cdd6023fd6..f4fe3564f2 100644 --- a/packages/hub/prisma/schema.prisma +++ b/packages/hub/prisma/schema.prisma @@ -230,9 +230,12 @@ model ModelRevision { model SquiggleSnippet { id String @id @default(cuid()) - code String - version String - seed String + code String + version String + seed String + autorunMode Boolean? + sampleCount Int? + xyPointLength Int? revision ModelRevision? } diff --git a/packages/hub/schema.graphql b/packages/hub/schema.graphql index 7b1eb05dad..1c63a7b33c 100644 --- a/packages/hub/schema.graphql +++ b/packages/hub/schema.graphql @@ -668,10 +668,13 @@ interface SquiggleOutput { } type SquiggleSnippet implements Node { + autorunMode: Boolean code: String! id: ID! + sampleCount: Int seed: String! version: String! + xyPointLength: Int } input SquiggleSnippetContentInput { diff --git a/packages/hub/src/app/models/[owner]/[slug]/EditSquiggleSnippetModel.tsx b/packages/hub/src/app/models/[owner]/[slug]/EditSquiggleSnippetModel.tsx index 380942a2cf..9c7eae3ef9 100644 --- a/packages/hub/src/app/models/[owner]/[slug]/EditSquiggleSnippetModel.tsx +++ b/packages/hub/src/app/models/[owner]/[slug]/EditSquiggleSnippetModel.tsx @@ -31,7 +31,7 @@ import { import { EditModelExports } from "@/components/exports/EditModelExports"; import { ReactRoot } from "@/components/ReactRoot"; import { FormModal } from "@/components/ui/FormModal"; -import { SAMPLE_COUNT_DEFAULT } from "@/constants"; +import { SAMPLE_COUNT_DEFAULT, XY_POINT_LENGTH_DEFAULT } from "@/constants"; import { useAvailableHeight } from "@/hooks/useAvailableHeight"; import { useMutationForm } from "@/hooks/useMutationForm"; import { extractFromGraphqlErrorUnion } from "@/lib/graphqlHelpers"; @@ -153,6 +153,9 @@ export const EditSquiggleSnippetModel: FC = ({ code version seed + autorunMode + sampleCount + xyPointLength } } exports { @@ -237,6 +240,9 @@ export const EditSquiggleSnippetModel: FC = ({ code: formData.code, version, seed: seed, + autorunMode: content.autorunMode, + sampleCount: content.sampleCount, + xyPointLength: content.xyPointLength, }, relativeValuesExports: formData.relativeValuesExports, exports: formData.exports, @@ -312,7 +318,7 @@ export const EditSquiggleSnippetModel: FC = ({ typeof squiggle.components.SquigglePlayground >[0] = { defaultCode, - defaultAutorunMode: false, + autorunMode: content.autorunMode || true, sourceId: serializeSourceId({ owner: model.owner.slug, slug: model.slug, @@ -406,7 +412,8 @@ export const EditSquiggleSnippetModel: FC = ({ } playgroundProps.environment = { - sampleCount: SAMPLE_COUNT_DEFAULT, + sampleCount: content.sampleCount || SAMPLE_COUNT_DEFAULT, + xyPointLength: content.xyPointLength || XY_POINT_LENGTH_DEFAULT, seed: seed, }; diff --git a/packages/hub/src/constants.ts b/packages/hub/src/constants.ts index 4555d4d32a..d7560894f9 100644 --- a/packages/hub/src/constants.ts +++ b/packages/hub/src/constants.ts @@ -5,5 +5,6 @@ export const VERCEL_URL = process.env["NEXT_PUBLIC_VERCEL_URL"]; export const SAMPLE_COUNT_DEFAULT = 1000; +export const XY_POINT_LENGTH_DEFAULT = 1000; export const DEFAULT_SEED = "DEFAULT_SEED"; diff --git a/packages/hub/src/graphql/mutations/updateSquiggleSnippetModel.ts b/packages/hub/src/graphql/mutations/updateSquiggleSnippetModel.ts index c396a1ad5d..2668089fbd 100644 --- a/packages/hub/src/graphql/mutations/updateSquiggleSnippetModel.ts +++ b/packages/hub/src/graphql/mutations/updateSquiggleSnippetModel.ts @@ -36,6 +36,9 @@ const SquiggleSnippetContentInput = builder.inputType( code: t.string({ required: true }), version: t.string({ required: true }), seed: t.string({ required: true }), + autorunMode: t.boolean({ required: false }), + sampleCount: t.int({ required: false }), + xyPointLength: t.int({ required: false }), }), } ); @@ -146,6 +149,9 @@ builder.mutationField("updateSquiggleSnippetModel", (t) => code: input.content.code, version: input.content.version, seed: input.content.seed, + autorunMode: input.content.autorunMode ?? null, + sampleCount: input.content.sampleCount ?? null, + xyPointLength: input.content.xyPointLength ?? null, }, }, contentType: "SquiggleSnippet", diff --git a/packages/hub/src/graphql/types/ModelRevision.ts b/packages/hub/src/graphql/types/ModelRevision.ts index 7baed3f336..74b7d84beb 100644 --- a/packages/hub/src/graphql/types/ModelRevision.ts +++ b/packages/hub/src/graphql/types/ModelRevision.ts @@ -10,6 +10,9 @@ export const SquiggleSnippet = builder.prismaNode("SquiggleSnippet", { code: t.exposeString("code"), version: t.exposeString("version"), seed: t.exposeString("seed"), + autorunMode: t.exposeBoolean("autorunMode", { nullable: true }), + sampleCount: t.exposeInt("sampleCount", { nullable: true }), + xyPointLength: t.exposeInt("xyPointLength", { nullable: true }), }), }); From b8410818d3e6e996c941b2d6877db4e1a5f1fe46 Mon Sep 17 00:00:00 2001 From: Ozzie Gooen Date: Sat, 23 Mar 2024 14:24:26 -0700 Subject: [PATCH 3/3] Improved Squiggle Playground to not show spinner on load when autorun=false --- .../components/SquigglePlayground/index.tsx | 63 +++++++++++-------- .../stories/SquigglePlayground.stories.tsx | 10 +++ .../[slug]/EditSquiggleSnippetModel.tsx | 2 +- 3 files changed, 48 insertions(+), 27 deletions(-) diff --git a/packages/components/src/components/SquigglePlayground/index.tsx b/packages/components/src/components/SquigglePlayground/index.tsx index dfab5161b3..7a0bf2d577 100644 --- a/packages/components/src/components/SquigglePlayground/index.tsx +++ b/packages/components/src/components/SquigglePlayground/index.tsx @@ -163,32 +163,43 @@ export const SquigglePlayground: React.FC = ( ); }; - const renderRight = () => - simulation ? ( - - { - randomizeSeed(); - if (!autorunMode) { - runSimulation(); - } - }} - /> - - ) : ( -
- -
- ); + const renderRight = () => { + if (simulation) { + return ( + + { + randomizeSeed(); + if (!autorunMode) { + runSimulation(); + } + }} + /> + + ); + } else if (defaultAutorunMode === false) { + return ( +
+
{`Press the "Run" button (top left) to simulate`}
+
+ ); + } else { + return ( +
+ +
+ ); + } + }; return ( diff --git a/packages/components/src/stories/SquigglePlayground.stories.tsx b/packages/components/src/stories/SquigglePlayground.stories.tsx index 1f606d3962..fa02a707da 100644 --- a/packages/components/src/stories/SquigglePlayground.stories.tsx +++ b/packages/components/src/stories/SquigglePlayground.stories.tsx @@ -31,6 +31,16 @@ export const HeightAndScroll: Story = { }, }; +export const AutorunFalse: Story = { + name: "Autorun=false", + args: { + autorunMode: false, + defaultCode: + "List.upTo(1,10) -> map({|i| i to i + 1})" + new Array(100).join("\n"), + height: 400, + }, +}; + export const Slow: Story = { name: "Slow Code", args: { diff --git a/packages/hub/src/app/models/[owner]/[slug]/EditSquiggleSnippetModel.tsx b/packages/hub/src/app/models/[owner]/[slug]/EditSquiggleSnippetModel.tsx index 9c7eae3ef9..84fa91ebc9 100644 --- a/packages/hub/src/app/models/[owner]/[slug]/EditSquiggleSnippetModel.tsx +++ b/packages/hub/src/app/models/[owner]/[slug]/EditSquiggleSnippetModel.tsx @@ -318,7 +318,7 @@ export const EditSquiggleSnippetModel: FC = ({ typeof squiggle.components.SquigglePlayground >[0] = { defaultCode, - autorunMode: content.autorunMode || true, + autorunMode: content.autorunMode ?? true, sourceId: serializeSourceId({ owner: model.owner.slug, slug: model.slug,