Animations (#1077)

argocd/base/statefulset.yaml

@@ -26,7 +26,7 @@ spec:
           # Note: use the *dev* version of the package here, so that
           # PRs can deploy `primer-service` container images that have
           # not yet been merged to `primer` `main`.
-          image: ghcr.io/hackworthltd/primer-service-dev:git-96236936906694bacf62c52cb718ba73e77c50ee
+          image: ghcr.io/hackworthltd/primer-service-dev:git-e8e9f14d326e82e0814a79185a1246327abc62f7
           ports:
             - containerPort: 8081
           env:

flake.nix

@@ -19,7 +19,7 @@
 
     # Note: don't override any of primer's Nix flake inputs, or else
     # we won't hit its binary cache.
-    primer.url = github:hackworthltd/primer/96236936906694bacf62c52cb718ba73e77c50ee;
+    primer.url = github:hackworthltd/primer/e8e9f14d326e82e0814a79185a1246327abc62f7;
 
     flake-parts.url = "github:hercules-ci/flake-parts";
   };

src/components/TreeReactFlow/Types.ts

@@ -124,6 +124,7 @@ export type PrimerNode<T = unknown> = {
   | { type: "primer-typedef-name"; data: PrimerTypeDefNameNodeProps }
   | { type: "primer-typedef-param"; data: PrimerTypeDefParamNodeProps }
   | { type: "primer-typedef-cons"; data: PrimerTypeDefConsNodeProps }
+  | { type: "primer-animation"; data: PrimerAnimationNodeProps }
 );
 
 export const primerNodeWith = <T>(n: PrimerNode, x: T): PrimerNode<T> =>
@@ -206,6 +207,11 @@ export type PrimerTypeDefConsNodeProps = {
   name: GlobalName;
 };
 
+/** Properties for an animation node. */
+export type PrimerAnimationNodeProps = {
+  contents: string;
+};
+
 /** Properties common to every type of node. */
 export type PrimerCommonNodeProps = {
   width: number;

src/components/TreeReactFlow/index.tsx

@@ -51,6 +51,7 @@ import {
   PrimerTypeDefNameNodeProps,
   NodeData,
   Padding,
+  PrimerAnimationNodeProps,
 } from "./Types";
 import { LayoutParams, layoutTree } from "./layoutTree";
 import {
@@ -444,6 +445,11 @@ const nodeTypes = {
       {handle("source", Position.Right)}
     </>
   ),
+  "primer-animation": ({
+    data,
+  }: {
+    data: PrimerAnimationNodeProps & PrimerCommonNodeProps;
+  }) => <img src={"data:img/gif;base64," + data.contents} />,
 };
 
 const edgeTypes = {
@@ -586,6 +592,23 @@ const makePrimerNode = async (
     case "PrimBody": {
       const hideLabel = hideLabels;
       const { fst: flavor, snd: prim } = node.body.contents;
+      if (prim.tag == "PrimAnimation") {
+        return [
+          {
+            id,
+            type: "primer-animation",
+            data: { contents: prim.contents, ...common },
+            zIndex,
+          },
+          (child, isRight) => ({
+            type: "primer",
+            data: { flavor },
+            className: flavorEdgeClasses(flavor),
+            ...edgeCommon(child, isRight),
+          }),
+          [],
+        ];
+      }
       const contents = (() => {
         switch (prim.tag) {
           case "PrimInt":
@@ -781,6 +804,18 @@ const makeSelectionFromNode = (
         },
       },
     };
+  } else if (node.type == "primer-animation") {
+    return {
+      tag: "SelectionDef",
+      contents: {
+        def: node.data.def,
+        node: {
+          nodeType: "BodyNode",
+          // This will always be an actual number, since these nodes have backend IDs.
+          meta: Number(node.id),
+        },
+      },
+    };
   } else {
     return makeSelectionFromNodeData(
       node.data.def,

src/primer-api/model/index.ts

@@ -64,6 +64,8 @@ export * from './paginatedMeta';
 export * from './paginatedSession';
 export * from './primCon';
 export * from './primConOneOf';
+export * from './primConOneOfFive';
+export * from './primConOneOfFiveTag';
 export * from './primConOneOfTag';
 export * from './primConOneOfThree';
 export * from './primConOneOfThreeTag';

src/primer-api/model/primCon.ts

@@ -7,5 +7,6 @@
  */
 import type { PrimConOneOf } from './primConOneOf';
 import type { PrimConOneOfThree } from './primConOneOfThree';
+import type { PrimConOneOfFive } from './primConOneOfFive';
 
-export type PrimCon = PrimConOneOf | PrimConOneOfThree;
+export type PrimCon = PrimConOneOf | PrimConOneOfThree | PrimConOneOfFive;

src/primer-api/model/primConOneOfFive.ts

@@ -0,0 +1,13 @@
+/**
+ * Generated by orval v6.19.1 🍺
+ * Do not edit manually.
+ * Primer backend API
+ * A backend service implementing a pedagogic functional programming language.
+ * OpenAPI spec version: 0.7
+ */
+import type { PrimConOneOfFiveTag } from './primConOneOfFiveTag';
+
+export type PrimConOneOfFive = {
+  contents: string;
+  tag: PrimConOneOfFiveTag;
+};

src/primer-api/model/primConOneOfFiveTag.ts

@@ -0,0 +1,15 @@
+/**
+ * Generated by orval v6.19.1 🍺
+ * Do not edit manually.
+ * Primer backend API
+ * A backend service implementing a pedagogic functional programming language.
+ * OpenAPI spec version: 0.7
+ */
+
+export type PrimConOneOfFiveTag = typeof PrimConOneOfFiveTag[keyof typeof PrimConOneOfFiveTag];
+
+
+// eslint-disable-next-line @typescript-eslint/no-redeclare
+export const PrimConOneOfFiveTag = {
+  PrimAnimation: 'PrimAnimation',
+} as const;