Merge pull request #2515 from quantified-uncertainty/ModelExports

Starting to add Model Exports

packages/components/src/components/DynamicSquiggleViewer.tsx

@@ -7,13 +7,15 @@ import { CodeEditorHandle } from "./CodeEditor.js";
 import { PartialPlaygroundSettings } from "./PlaygroundSettings.js";
 import { SquiggleViewerHandle } from "./SquiggleViewer/index.js";
 import { ErrorBoundary } from "./ErrorBoundary.js";
+import { SqValuePath } from "@quri/squiggle-lang";
 
 type Props = {
   squiggleOutput: SquiggleOutput | undefined;
   isRunning: boolean;
   showHeader?: boolean;
   localSettingsEnabled?: boolean;
   editor?: CodeEditorHandle;
+  rootPathOverride?: SqValuePath;
 } & PartialPlaygroundSettings;
 
 /* Wrapper for SquiggleViewer that shows the rendering stats and isRunning state. */
@@ -25,6 +27,7 @@ export const DynamicSquiggleViewer = forwardRef<SquiggleViewerHandle, Props>(
       showHeader = true,
       localSettingsEnabled,
       editor,
+      rootPathOverride,
       ...settings
     },
     viewerRef
@@ -43,6 +46,7 @@ export const DynamicSquiggleViewer = forwardRef<SquiggleViewerHandle, Props>(
             resultVariables={getResultVariables(squiggleOutput)}
             resultItem={getResultValue(squiggleOutput)}
             editor={editor}
+            rootPathOverride={rootPathOverride}
           />
         </ErrorBoundary>
       </div>

packages/components/src/components/SquiggleChart.tsx

@@ -10,11 +10,13 @@ import {
 import { DynamicSquiggleViewer } from "./DynamicSquiggleViewer.js";
 import { PartialPlaygroundSettings } from "./PlaygroundSettings.js";
 import { useRunnerState } from "../lib/hooks/useRunnerState.js";
+import { SqValuePath } from "@quri/squiggle-lang";
 
 type Props = {
   code: string;
   showHeader?: boolean;
   localSettingsEnabled?: boolean;
+  rootPathOverride?: SqValuePath; // Note: This should be static. We don't support rootPathOverride to change once set.
 } & (StandaloneExecutionProps | ProjectExecutionProps) &
   // `environment` is passed through StandaloneExecutionProps; this way we guarantee that it's not compatible with `project` prop
   Omit<PartialPlaygroundSettings, "environment">;
@@ -26,6 +28,7 @@ export const SquiggleChart: FC<Props> = memo(function SquiggleChart({
   project,
   continues,
   environment,
+  rootPathOverride,
   ...settings
 }) {
   // We go through runnerState to bump executionId on code changes;
@@ -45,6 +48,7 @@ export const SquiggleChart: FC<Props> = memo(function SquiggleChart({
 
   return (
     <DynamicSquiggleViewer
+      rootPathOverride={rootPathOverride}
       squiggleOutput={squiggleOutput}
       isRunning={isRunning}
       showHeader={showHeader}

packages/components/src/components/SquigglePlayground/index.tsx

@@ -22,6 +22,11 @@ import {
 } from "./LeftPlaygroundPanel/index.js";
 import { ResizableTwoPanelLayout } from "./ResizableTwoPanelLayout.js";
 
+export type ModelExport = {
+  variableName: string;
+  title?: string;
+};
+
 /*
  * We don't support `project` or `continues` in the playground.
  * First, because playground will support multi-file mode by itself.
@@ -37,6 +42,7 @@ export type SquigglePlaygroundProps = {
   sourceId?: string;
   linker?: SqLinker;
   onCodeChange?(code: string): void;
+  onExportsChange?(exports: ModelExport[]): void;
   /* When settings change */
   onSettingsChange?(settings: PlaygroundSettings): void;
   /* Height of the playground */
@@ -62,6 +68,7 @@ export const SquigglePlayground: React.FC<SquigglePlaygroundProps> = (
     defaultCode,
     linker,
     onCodeChange,
+    onExportsChange,
     onSettingsChange,
     renderExtraControls,
     renderExtraDropdownItems,
@@ -107,6 +114,19 @@ export const SquigglePlayground: React.FC<SquigglePlaygroundProps> = (
     isRunning: boolean;
   }>({ output: undefined, isRunning: false });
 
+  useEffect(() => {
+    const _output = output.output?.output;
+    if (_output && _output.ok) {
+      const exports = _output.value.exports;
+      const _exports: ModelExport[] = exports.entries().map((e) => {
+        return { variableName: e[0], title: e[1].title() };
+      });
+      onExportsChange && onExportsChange(_exports);
+    } else {
+      onExportsChange && onExportsChange([]);
+    }
+  }, [output, onExportsChange]);
+
   const leftPanelRef = useRef<LeftPlaygroundPanelHandle>(null);
   const rightPanelRef = useRef<SquiggleViewerHandle>(null);
 

packages/components/src/components/SquiggleViewer/ViewerProvider.tsx

@@ -227,22 +227,27 @@ export const ViewerProvider: FC<
     localSettingsEnabled: boolean;
     editor?: CodeEditorHandle;
     beginWithVariablesCollapsed?: boolean;
+    rootPathOverride?: SqValuePath;
   }>
 > = ({
   partialPlaygroundSettings,
   localSettingsEnabled,
   editor,
   beginWithVariablesCollapsed,
+  rootPathOverride,
   children,
 }) => {
   // can't store settings in the state because we don't want to rerender the entire tree on every change
+
   const localItemStateStoreRef = useRef<LocalItemStateStore>(
     beginWithVariablesCollapsed ? collapsedVariablesDefault : {}
   );
 
   const itemHandlesStoreRef = useRef<{ [k: string]: HTMLDivElement }>({});
 
-  const [focused, setFocused] = useState<SqValuePath | undefined>();
+  const [focused, setFocused] = useState<SqValuePath | undefined>(
+    rootPathOverride
+  );
 
   const globalSettings = useMemo(() => {
     return merge({}, defaultPlaygroundSettings, partialPlaygroundSettings);

packages/components/src/components/SquiggleViewer/index.tsx

@@ -20,7 +20,7 @@ import {
   useUnfocus,
   useViewerContext,
 } from "./ViewerProvider.js";
-import { extractSubvalueByPath, pathItemFormat } from "./utils.js";
+import { extractSubvalueByPath, pathIsEqual, pathItemFormat } from "./utils.js";
 
 export type SquiggleViewerHandle = {
   viewValuePath(path: SqValuePath): void;
@@ -32,37 +32,54 @@ export type SquiggleViewerProps = {
   resultItem: result<SqValue, SqError> | undefined;
   localSettingsEnabled?: boolean;
   editor?: CodeEditorHandle;
+  rootPathOverride?: SqValuePath;
 } & PartialPlaygroundSettings;
 
 const SquiggleViewerOuter = forwardRef<
   SquiggleViewerHandle,
   SquiggleViewerProps
->(function SquiggleViewerOuter({ resultVariables, resultItem }, ref) {
+>(function SquiggleViewerOuter(
+  { resultVariables, resultItem, rootPathOverride },
+  ref
+) {
   const { focused, dispatch, getCalculator } = useViewerContext();
   const unfocus = useUnfocus();
   const focus = useFocus();
 
   const navLinkStyle =
     "text-sm text-slate-500 hover:text-slate-900 hover:underline font-mono cursor-pointer";
 
-  const focusedNavigation = focused && (
+  const isFocusedOnRootPathOverride =
+    focused && rootPathOverride && pathIsEqual(focused, rootPathOverride);
+
+  // If we're focused on the root path override, we need to adjust the focused path accordingly when presenting the navigation, so that it begins with the root path intead. This is a bit confusing.
+  const rootPathFocusedAdjustment: number = rootPathOverride
+    ? rootPathOverride.items.length - 1
+    : 0;
+
+  const focusedNavigation = focused && !isFocusedOnRootPathOverride && (
     <div className="flex items-center mb-3 pl-1">
-      <span onClick={unfocus} className={navLinkStyle}>
-        {focused.root === "bindings" ? "Variables" : focused.root}
-      </span>
+      {!rootPathOverride && (
+        <>
+          <span onClick={unfocus} className={navLinkStyle}>
+            {focused.root === "bindings" ? "Variables" : focused.root}
+          </span>
+
+          <ChevronRightIcon className="text-slate-300" size={24} />
+        </>
+      )}
 
       {focused
         .itemsAsValuePaths({ includeRoot: false })
-        .slice(0, -1)
+        .slice(rootPathFocusedAdjustment, -1)
         .map((path, i) => (
-          <div key={i} className="flex items-center">
-            <ChevronRightIcon className="text-slate-300" size={24} />
+          <>
             <div onClick={() => focus(path)} className={navLinkStyle}>
-              {pathItemFormat(path.items[i])}
+              {pathItemFormat(path.items[i + rootPathFocusedAdjustment])}
             </div>
-          </div>
+            <ChevronRightIcon className="text-slate-300" size={24} />
+          </>
         ))}
-      <ChevronRightIcon className="text-slate-300" size={24} />
     </div>
   );
 
@@ -132,6 +149,7 @@ const innerComponent = forwardRef<SquiggleViewerHandle, SquiggleViewerProps>(
       resultItem,
       localSettingsEnabled = false,
       editor,
+      rootPathOverride,
       ...partialPlaygroundSettings
     },
     ref
@@ -142,10 +160,12 @@ const innerComponent = forwardRef<SquiggleViewerHandle, SquiggleViewerProps>(
         localSettingsEnabled={localSettingsEnabled}
         editor={editor}
         beginWithVariablesCollapsed={resultItem !== undefined && resultItem.ok}
+        rootPathOverride={rootPathOverride}
       >
         <SquiggleViewerOuter
           resultVariables={resultVariables}
           resultItem={resultItem}
+          rootPathOverride={rootPathOverride}
           ref={ref}
         />
       </ViewerProvider>

packages/components/src/components/SquiggleViewer/utils.ts

@@ -51,6 +51,10 @@ export function pathAsString(path: SqValuePath) {
   }
 }
 
+export function pathIsEqual(path1: SqValuePath, path2: SqValuePath) {
+  return pathAsString(path1) === pathAsString(path2);
+}
+
 export function pathToShortName(path: SqValuePath): string | undefined {
   if (isTopLevel(path)) {
     return topLevelName(path);

packages/components/src/lib/hooks/useSquiggle.ts

@@ -34,6 +34,7 @@ export type SquiggleArgs = {
 export type SquiggleOutput = {
   output: result<
     {
+      exports: SqDict;
       result: SqValue;
       bindings: SqDict;
     },

packages/components/src/stories/SquiggleChart/Basic.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
 import { SquiggleChart } from "../../components/SquiggleChart.js";
+import { SqValuePath } from "@quri/squiggle-lang";
 
 const meta = {
   component: SquiggleChart,
@@ -31,3 +32,20 @@ export const String: Story = {
     code: '"Lucky day!"',
   },
 };
+
+export const WithPathOverride: Story = {
+  name: "WithPathOverride",
+  args: {
+    code: `
+    export foo = {bar: {char: {baz: 10}}}
+    export bar = {baz: 20}
+  `,
+    rootPathOverride: new SqValuePath({
+      root: "bindings",
+      items: [
+        { type: "string", value: "foo" },
+        { type: "string", value: "bar" },
+      ],
+    }),
+  },
+};

packages/hub/README.md

@@ -13,6 +13,18 @@ To deploy a migration to the production database:
 - obtain the database connection string from Digital Ocean;
 - run `DATABASE_URL=... prisma migrate deploy` locally.
 
+## Changing the database
+
+1. Edit `schema.prisma`
+2. Run ``pnpm prisma migrate dev --name [migration-name-here]
+
+## Notes on changing the schema
+
+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.
+
 # Development notes
 
 [How to load GraphQL data in Next.js pages](/docs/relay-pages.md)

packages/hub/prisma/migrations/20231108220823_model_exports/migration.sql

@@ -0,0 +1,15 @@
+-- CreateTable
+CREATE TABLE "ModelExport" (
+    "id" TEXT NOT NULL,
+    "modelRevisionId" TEXT NOT NULL,
+    "variableName" TEXT NOT NULL,
+    "title" TEXT,
+
+    CONSTRAINT "ModelExport_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "ModelExport_modelRevisionId_variableName_key" ON "ModelExport"("modelRevisionId", "variableName");
+
+-- AddForeignKey
+ALTER TABLE "ModelExport" ADD CONSTRAINT "ModelExport_modelRevisionId_fkey" FOREIGN KEY ("modelRevisionId") REFERENCES "ModelRevision"("id") ON DELETE CASCADE ON UPDATE CASCADE;

packages/hub/prisma/schema.prisma

@@ -212,6 +212,7 @@ model ModelRevision {
   contentId       String?          @unique
 
   relativeValuesExports RelativeValuesExport[]
+  exports               ModelExport[]
 
   // required by Prisma, but unused since `model` field should point at the same entity
   currentRevisionModel Model? @relation("CurrentRevision")
@@ -228,6 +229,16 @@ model SquiggleSnippet {
   revision ModelRevision?
 }
 
+model ModelExport {
+  id              String        @id @default(cuid())
+  modelRevision   ModelRevision @relation(fields: [modelRevisionId], references: [id], onDelete: Cascade)
+  modelRevisionId String
+  variableName    String
+  title           String?
+
+  @@unique([modelRevisionId, variableName], name: "uniqueKey")
+}
+
 // Definitions are polymorphic, but organized differently from Models, without content types.
 // Reasoning: https://github.com/quantified-uncertainty/squiggle/issues/1828#issuecomment-1563596166
 model RelativeValuesDefinition {

packages/hub/schema.graphql

@@ -153,11 +153,19 @@ type ModelEdge {
   node: Model!
 }
 
+type ModelExport implements Node {
+  id: ID!
+  modelRevision: ModelRevision!
+  title: String
+  variableName: String!
+}
+
 type ModelRevision implements Node {
   author: User
   comment: String!
   content: ModelContent!
   createdAtTimestamp: Float!
+  exports: [ModelExport!]!
   forRelativeValues(input: ModelRevisionForRelativeValuesInput): RelativeValuesExport
   id: ID!
   model: Model!
@@ -371,6 +379,7 @@ union MutationUpdateRelativeValuesDefinitionResult = BaseError | UpdateRelativeV
 input MutationUpdateSquiggleSnippetModelInput {
   comment: String
   content: SquiggleSnippetContentInput!
+  exports: [SquiggleModelExportInput!]
   owner: String!
   relativeValuesExports: [RelativeValuesExportInput!]
   slug: String!
@@ -536,6 +545,11 @@ type SquiggleErrorOutput implements SquiggleOutput {
   isCached: Boolean!
 }
 
+input SquiggleModelExportInput {
+  title: String
+  variableName: String!
+}
+
 type SquiggleOkOutput implements SquiggleOutput {
   bindingsJSON: String!
   isCached: Boolean!