diff --git a/packages/components/src/components/SquigglePlayground/index.tsx b/packages/components/src/components/SquigglePlayground/index.tsx index 12114c4dff..7a0bf2d577 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; + autorunMode?: boolean; sourceId?: string; linker?: SqLinker; onCodeChange?(code: string): void; @@ -78,6 +79,7 @@ export const SquigglePlayground: React.FC = ( renderExtraDropdownItems, renderExtraModal, renderImportTooltip, + autorunMode: defaultAutorunMode = true, 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(() => { @@ -160,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/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 3b8614a839..84fa91ebc9 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,6 +318,7 @@ export const EditSquiggleSnippetModel: FC = ({ typeof squiggle.components.SquigglePlayground >[0] = { defaultCode, + autorunMode: content.autorunMode ?? true, sourceId: serializeSourceId({ owner: model.owner.slug, slug: model.slug, @@ -405,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 }), }), });