Merge pull request #3119 from quantified-uncertainty/default-autorun-…

…mode

Default Autorun Mode

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<SquigglePlaygroundProps> = (
     renderExtraDropdownItems,
     renderExtraModal,
     renderImportTooltip,
+    autorunMode: defaultAutorunMode = true,
     height = 500,
     ...defaultSettings
   } = props;
@@ -107,6 +109,7 @@ export const SquigglePlayground: React.FC<SquigglePlaygroundProps> = (
     sourceId: _sourceId,
     setup: { type: "projectFromLinker", linker },
     environment: settings.environment,
+    initialAutorunMode: defaultAutorunMode,
   });
 
   useEffect(() => {
@@ -160,32 +163,43 @@ export const SquigglePlayground: React.FC<SquigglePlaygroundProps> = (
     );
   };
 
-  const renderRight = () =>
-    simulation ? (
-      <ProjectContext.Provider
-        value={{ sourceId, onOpenExport: props.onOpenExport }}
-      >
-        <ViewerWithMenuBar
-          simulation={simulation}
-          // FIXME - this will cause viewer to be rendered twice on initial render
-          editor={leftPanelRef.current?.getEditor() ?? undefined}
-          playgroundSettings={settings}
-          ref={rightPanelRef}
-          useGlobalShortcuts={true}
-          xPadding={2}
-          randomizeSeed={() => {
-            randomizeSeed();
-            if (!autorunMode) {
-              runSimulation();
-            }
-          }}
-        />
-      </ProjectContext.Provider>
-    ) : (
-      <div className="grid place-items-center h-full">
-        <RefreshIcon className="animate-spin text-slate-400" size={24} />
-      </div>
-    );
+  const renderRight = () => {
+    if (simulation) {
+      return (
+        <ProjectContext.Provider
+          value={{ sourceId, onOpenExport: props.onOpenExport }}
+        >
+          <ViewerWithMenuBar
+            simulation={simulation}
+            // FIXME - this will cause viewer to be rendered twice on initial render
+            editor={leftPanelRef.current?.getEditor() ?? undefined}
+            playgroundSettings={settings}
+            ref={rightPanelRef}
+            useGlobalShortcuts={true}
+            xPadding={2}
+            randomizeSeed={() => {
+              randomizeSeed();
+              if (!autorunMode) {
+                runSimulation();
+              }
+            }}
+          />
+        </ProjectContext.Provider>
+      );
+    } else if (defaultAutorunMode === false) {
+      return (
+        <div className="grid place-items-center h-full">
+          <div className="text-gray-500 text-sm">{`Press the "Run" button (top left) to simulate`}</div>
+        </div>
+      );
+    } else {
+      return (
+        <div className="grid place-items-center h-full">
+          <RefreshIcon className="animate-spin text-slate-400" size={24} />
+        </div>
+      );
+    }
+  };
 
   return (
     <PlaygroundContext.Provider value={{ getLeftPanelElement }}>

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: {

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
+```

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",

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;

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?
 }

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 {

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<Props> = ({
               code
               version
               seed
+              autorunMode
+              sampleCount
+              xyPointLength
             }
           }
           exports {
@@ -237,6 +240,9 @@ export const EditSquiggleSnippetModel: FC<Props> = ({
           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<Props> = ({
     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<Props> = ({
   }
 
   playgroundProps.environment = {
-    sampleCount: SAMPLE_COUNT_DEFAULT,
+    sampleCount: content.sampleCount || SAMPLE_COUNT_DEFAULT,
+    xyPointLength: content.xyPointLength || XY_POINT_LENGTH_DEFAULT,
     seed: seed,
   };
 

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";

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",

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 }),
   }),
 });