FE-1895: Load Flow definitions from the graph in the frontend

apps/hash-ai-worker-ts/src/activities/flow-activities/generate-flow-run-name-activity.ts

@@ -1,8 +1,7 @@
 import {
-  automaticBrowserInferenceFlow,
-  manualBrowserInferenceFlow,
-} from "@local/hash-isomorphic-utils/flows/browser-plugin-flow-definitions";
-import { isGoalFlowDefinitionId } from "@local/hash-isomorphic-utils/flows/goal-flow-definitions";
+  flowDefinitionIds,
+  isGoalFlowDefinitionId,
+} from "@local/hash-isomorphic-utils/flows/flow-definition-ids";
 
 import { getFlowContext } from "../shared/get-flow-context.js";
 import { getLlmResponse } from "../shared/get-llm-response.js";
@@ -15,7 +14,7 @@ import type {
   AutomaticInferenceInputName,
   ManualInferenceInputName,
 } from "@local/hash-isomorphic-utils/flows/browser-plugin-flow-types";
-import type { GoalFlowInputName } from "@local/hash-isomorphic-utils/flows/goal-flow-definitions";
+import type { GoalFlowInputName } from "@local/hash-isomorphic-utils/flows/definitions/goal-flow-definitions";
 import type {
   FlowActionDefinitionId,
   FlowDefinition,
@@ -100,8 +99,8 @@ export const generateFlowRunName = async (
 
   if (
     [
-      automaticBrowserInferenceFlow.flowDefinitionId,
-      manualBrowserInferenceFlow.flowDefinitionId,
+      flowDefinitionIds.automaticBrowserInference,
+      flowDefinitionIds.manualBrowserInference,
     ].includes(flowDefinitionId)
   ) {
     const webPage = flowInputs[
@@ -114,7 +113,7 @@ export const generateFlowRunName = async (
     }
 
     return `${
-      flowDefinitionId === automaticBrowserInferenceFlow.flowDefinitionId
+      flowDefinitionId === flowDefinitionIds.automaticBrowserInference
         ? "Auto-analyze"
         : "Analyze"
     } webpage: ${webPage.url}`;

apps/hash-ai-worker-ts/src/activities/shared/get-flow-context.ts

@@ -18,7 +18,7 @@ import { graphApiClient } from "./graph-api-client.js";
 
 import type { EntityId, UserId, WebId } from "@blockprotocol/type-system";
 import type { ManualInferenceInputName } from "@local/hash-isomorphic-utils/flows/browser-plugin-flow-types";
-import type { GoalFlowInputName } from "@local/hash-isomorphic-utils/flows/goal-flow-definitions";
+import type { GoalFlowInputName } from "@local/hash-isomorphic-utils/flows/definitions/goal-flow-definitions";
 import type { RunAiFlowWorkflowParams } from "@local/hash-isomorphic-utils/flows/temporal-types";
 import type { FlowDataSources } from "@local/hash-isomorphic-utils/flows/types";
 import type { File } from "@local/hash-isomorphic-utils/system-types/shared";

apps/hash-api/src/ai/infer-entities-websocket/handle-infer-entities-request.ts

@@ -1,8 +1,5 @@
 import { getFlowRuns } from "@local/hash-backend-utils/flows";
-import {
-  automaticBrowserInferenceFlow,
-  manualBrowserInferenceFlow,
-} from "@local/hash-isomorphic-utils/flows/browser-plugin-flow-definitions";
+import { flowDefinitionIds } from "@local/hash-isomorphic-utils/flows/flow-definition-ids";
 
 import { FlowRunStatus } from "../../graphql/api-types.gen";
 
@@ -44,19 +41,19 @@ export const handleInferEntitiesRequest = async ({
     payload: { webId, ...flowInputs },
   } = message;
 
-  const { flowDefinitionId } =
+  const flowDefinitionId =
     message.type === "manual-inference-request"
-      ? manualBrowserInferenceFlow
-      : automaticBrowserInferenceFlow;
+      ? flowDefinitionIds.manualBrowserInference
+      : flowDefinitionIds.automaticBrowserInference;
 
   if (message.type === "automatic-inference-request") {
     const openFlowRuns = await getFlowRuns({
       authentication: { actorId: user.accountId },
       filters: {
         executionStatus: FlowRunStatus.Running,
         flowDefinitionIds: [
-          automaticBrowserInferenceFlow.flowDefinitionId,
-          manualBrowserInferenceFlow.flowDefinitionId,
+          flowDefinitionIds.automaticBrowserInference,
+          flowDefinitionIds.manualBrowserInference,
         ],
       },
       graphApiClient,

apps/hash-api/src/graph/ensure-system-graph-is-initialized/migrate-ontology-types/dev-flows.ts

@@ -1,7 +1,7 @@
 import {
   historicalFlightsFlow,
   scheduledFlightsFlow,
-} from "@local/hash-isomorphic-utils/flows/integration-flow-definitions";
+} from "@local/hash-isomorphic-utils/flows/definitions/integration-flow-definitions";
 
 import type { FlowDefinitionWithId } from "@local/hash-isomorphic-utils/flows/types";
 

apps/hash-api/src/graph/ensure-system-graph-is-initialized/migrate-ontology-types/seeded-flows.test.ts

@@ -1,11 +1,11 @@
 import { describe, expect, it } from "vitest";
 
-import * as browserPluginFlows from "@local/hash-isomorphic-utils/flows/browser-plugin-flow-definitions";
-import * as fileFlows from "@local/hash-isomorphic-utils/flows/file-flow-definitions";
-import * as frontendFlows from "@local/hash-isomorphic-utils/flows/frontend-flow-definitions";
-import * as ftseInvestorsFlows from "@local/hash-isomorphic-utils/flows/ftse-investors-flow-definition";
-import * as goalFlows from "@local/hash-isomorphic-utils/flows/goal-flow-definitions";
-import * as integrationFlows from "@local/hash-isomorphic-utils/flows/integration-flow-definitions";
+import * as browserPluginFlows from "@local/hash-isomorphic-utils/flows/definitions/browser-plugin-flow-definitions";
+import * as fileFlows from "@local/hash-isomorphic-utils/flows/definitions/file-flow-definitions";
+import * as frontendFlows from "@local/hash-isomorphic-utils/flows/definitions/frontend-flow-definitions";
+import * as ftseInvestorsFlows from "@local/hash-isomorphic-utils/flows/definitions/ftse-investors-flow-definition";
+import * as goalFlows from "@local/hash-isomorphic-utils/flows/definitions/goal-flow-definitions";
+import * as integrationFlows from "@local/hash-isomorphic-utils/flows/definitions/integration-flow-definitions";
 import { validateFlowDefinition } from "@local/hash-isomorphic-utils/flows/validate-flow-definition";
 
 import { devFlows } from "./dev-flows";

apps/hash-api/src/graph/ensure-system-graph-is-initialized/migrate-ontology-types/seeded-flows.ts

@@ -1,13 +1,13 @@
 import {
   automaticBrowserInferenceFlow,
   manualBrowserInferenceFlow,
-} from "@local/hash-isomorphic-utils/flows/browser-plugin-flow-definitions";
-import { inferMetadataFromDocumentFlow } from "@local/hash-isomorphic-utils/flows/file-flow-definitions";
+} from "@local/hash-isomorphic-utils/flows/definitions/browser-plugin-flow-definitions";
+import { inferMetadataFromDocumentFlow } from "@local/hash-isomorphic-utils/flows/definitions/file-flow-definitions";
 import {
   configureDashboardItemFlow,
   refineDashboardItemFlow,
-} from "@local/hash-isomorphic-utils/flows/frontend-flow-definitions";
-import { goalFlow } from "@local/hash-isomorphic-utils/flows/goal-flow-definitions";
+} from "@local/hash-isomorphic-utils/flows/definitions/frontend-flow-definitions";
+import { goalFlow } from "@local/hash-isomorphic-utils/flows/definitions/goal-flow-definitions";
 
 import type { FlowDefinitionWithId } from "@local/hash-isomorphic-utils/flows/types";
 

apps/hash-api/src/graphql/resolvers/knowledge/file/shared.ts

@@ -1,4 +1,4 @@
-import { inferMetadataFromDocumentFlow } from "@local/hash-isomorphic-utils/flows/file-flow-definitions";
+import { flowDefinitionIds } from "@local/hash-isomorphic-utils/flows/flow-definition-ids";
 import { generateUuid } from "@local/hash-isomorphic-utils/generate-uuid";
 
 import type { Entity, UserId, WebId } from "@blockprotocol/type-system";
@@ -42,7 +42,7 @@ export const triggerPdfAnalysisWorkflow = async ({
         },
       },
     },
-    flowDefinitionId: inferMetadataFromDocumentFlow.flowDefinitionId,
+    flowDefinitionId: flowDefinitionIds.inferMetadataFromDocument,
     flowInputs: {
       fileEntityId: { kind: "EntityId", value: entityId },
     },
@@ -58,7 +58,7 @@ export const triggerPdfAnalysisWorkflow = async ({
     taskQueue: "ai",
     args: [params],
     memo: {
-      flowDefinitionId: inferMetadataFromDocumentFlow.flowDefinitionId,
+      flowDefinitionId: flowDefinitionIds.inferMetadataFromDocument,
       userAccountId,
       webId,
     },

apps/hash-frontend/src/pages/@/[shortname]/shared/flow-visualizer.tsx

@@ -10,12 +10,10 @@ import { IconButton, Skeleton } from "@hashintel/design-system";
 import { deserializeSubgraph } from "@local/hash-graph-sdk/subgraph";
 import { actionDefinitions } from "@local/hash-isomorphic-utils/flows/action-definitions";
 import {
-  automaticBrowserInferenceFlow,
-  manualBrowserInferenceFlow,
-} from "@local/hash-isomorphic-utils/flows/browser-plugin-flow-definitions";
-import { inferMetadataFromDocumentFlow } from "@local/hash-isomorphic-utils/flows/file-flow-definitions";
+  flowDefinitionIds,
+  isGoalFlowDefinitionId,
+} from "@local/hash-isomorphic-utils/flows/flow-definition-ids";
 import { generateWorkerRunPath } from "@local/hash-isomorphic-utils/flows/frontend-paths";
-import { isGoalFlowDefinitionId } from "@local/hash-isomorphic-utils/flows/goal-flow-definitions";
 import {
   almostFullOntologyResolveDepths,
   currentTimeInstantTemporalAxes,
@@ -36,6 +34,7 @@ import { defaultBrowserPluginDomains } from "../../../goals/new.page/default-bro
 import { useFlowDefinitionsContext } from "../../../shared/flow-definitions-context";
 import { useFlowRunsContext } from "../../../shared/flow-runs-context";
 import { NotFound } from "../../../shared/not-found";
+import { useFlowDefinitionAtTime } from "../../../shared/use-flow-definitions";
 import { useFlowSchedules } from "../../../shared/use-flow-schedules";
 import { ActivityLog } from "./flow-visualizer/activity-log";
 import { DAG } from "./flow-visualizer/dag";
@@ -64,7 +63,12 @@ import type {
   ProposedEntityOutput,
 } from "./flow-visualizer/shared/types";
 import type { EntityRootType, Subgraph } from "@blockprotocol/graph";
-import type { EntityId, WebId } from "@blockprotocol/type-system";
+import type {
+  EntityId,
+  EntityUuid,
+  Timestamp,
+  WebId,
+} from "@blockprotocol/type-system";
 import type { Filter } from "@local/hash-graph-client";
 import type { HashEntity } from "@local/hash-graph-sdk/entity";
 import type {
@@ -167,9 +171,9 @@ const containerHeight = `calc(100vh - ${HEADER_HEIGHT}px)`;
 
 /** Flows that only the browser plugin or a file upload starts, because their inputs come from there. */
 const unrunnableDefinitionIds = [
-  manualBrowserInferenceFlow.flowDefinitionId,
-  automaticBrowserInferenceFlow.flowDefinitionId,
-  inferMetadataFromDocumentFlow.flowDefinitionId,
+  flowDefinitionIds.manualBrowserInference,
+  flowDefinitionIds.automaticBrowserInference,
+  flowDefinitionIds.inferMetadataFromDocument,
 ];
 
 export const FlowRunVisualizerSkeleton = () => (
@@ -207,6 +211,21 @@ export const FlowVisualizer = () => {
 
   const { selectedFlowRun } = useFlowRunsContext();
 
+  /**
+   * A run is drawn with the edition of its definition it executed: the one current when it started.
+   */
+  const {
+    flowDefinition: flowOfSelectedRun,
+    loading: flowOfSelectedRunLoading,
+  } = useFlowDefinitionAtTime({
+    flowDefinitionId: selectedFlowRun
+      ? (selectedFlowRun.flowDefinitionId as EntityUuid)
+      : null,
+    timestamp: selectedFlowRun
+      ? (selectedFlowRun.startedAt as Timestamp)
+      : null,
+  });
+
   const { schedulesByEntityUuid } = useFlowSchedules();
 
   /**
@@ -224,12 +243,18 @@ export const FlowVisualizer = () => {
 
   const selectedFlow = useMemo(
     () =>
-      flowDefinitions.find(
-        ({ flowDefinitionId }) =>
-          flowDefinitionId ===
-          (selectedFlowRun?.flowDefinitionId ?? selectedFlowDefinitionId),
-      ),
-    [flowDefinitions, selectedFlowDefinitionId, selectedFlowRun],
+      selectedFlowRun
+        ? flowOfSelectedRun
+        : flowDefinitions.find(
+            ({ flowDefinitionId }) =>
+              flowDefinitionId === selectedFlowDefinitionId,
+          ),
+    [
+      flowDefinitions,
+      flowOfSelectedRun,
+      selectedFlowDefinitionId,
+      selectedFlowRun,
+    ],
   );
 
   const selectedFlowDefinition = selectedFlow?.flowDefinition;
@@ -633,7 +658,7 @@ export const FlowVisualizer = () => {
   }, [runFlow, selectedFlowRun]);
 
   if (!selectedFlow || !selectedFlowDefinition) {
-    if (flowDefinitionsLoading) {
+    if (flowDefinitionsLoading || flowOfSelectedRunLoading) {
       return <FlowRunVisualizerSkeleton />;
     }
 

apps/hash-frontend/src/pages/@/[shortname]/shared/flow-visualizer/dag-slide.tsx

@@ -1,7 +1,7 @@
 import { Backdrop, Box, Slide, Stack } from "@mui/material";
 
 import { IconButton, XMarkRegularIcon } from "@hashintel/design-system";
-import { isGoalFlowDefinitionId } from "@local/hash-isomorphic-utils/flows/goal-flow-definitions";
+import { isGoalFlowDefinitionId } from "@local/hash-isomorphic-utils/flows/flow-definition-ids";
 
 import { DAG } from "./dag";
 import { Topbar } from "./topbar";

apps/hash-frontend/src/pages/@/[shortname]/shared/flow-visualizer/flow-run-sidebar.tsx

@@ -7,10 +7,7 @@ import {
   ClockRegularIcon,
   IconButton,
 } from "@hashintel/design-system";
-import {
-  isGoalFlowDefinitionId,
-  type GoalFlowInputName,
-} from "@local/hash-isomorphic-utils/flows/goal-flow-definitions";
+import { isGoalFlowDefinitionId } from "@local/hash-isomorphic-utils/flows/flow-definition-ids";
 
 import { Link } from "../../../../../shared/ui/link";
 import { useFlowRunsContext } from "../../../../shared/flow-runs-context";
@@ -23,6 +20,7 @@ import { flowSectionBorderRadius } from "./shared/styles";
 import type { FlowRun } from "../../../../../graphql/api-types.gen";
 import type { EdgesAndNodes } from "./shared/types";
 import type { EntityId, EntityUuid } from "@blockprotocol/type-system";
+import type { GoalFlowInputName } from "@local/hash-isomorphic-utils/flows/definitions/goal-flow-definitions";
 import type { PropsWithChildren } from "react";
 
 const SidebarSection = ({ children }: PropsWithChildren) => (

apps/hash-frontend/src/pages/@/[shortname]/shared/flow-visualizer/flow-run-sidebar/group-status.tsx

@@ -17,7 +17,12 @@ import type { EdgesAndNodes } from "../shared/types";
 
 export const GroupStatus = ({ graph }: { graph: EdgesAndNodes }) => {
   const groupStepsWithIds = useMemo(
-    () => graph.nodes.map((node) => ({ ...node, stepId: node.id })),
+    () =>
+      graph.nodes.map((node) => ({
+        ...node,
+        stepId: node.id,
+        parentStepId: node.parentNode,
+      })),
     [graph],
   );
 

apps/hash-frontend/src/pages/@/[shortname]/shared/flow-visualizer/outputs.tsx

@@ -9,7 +9,7 @@ import {
 } from "@blockprotocol/type-system";
 import { CheckRegularIcon, IconButton } from "@hashintel/design-system";
 import { HashEntity } from "@local/hash-graph-sdk/entity";
-import { isGoalFlowDefinitionId } from "@local/hash-isomorphic-utils/flows/goal-flow-definitions";
+import { isGoalFlowDefinitionId } from "@local/hash-isomorphic-utils/flows/flow-definition-ids";
 import { currentTimeInstantTemporalAxes } from "@local/hash-isomorphic-utils/graph-queries";
 
 import { getClosedMultiEntityTypesQuery } from "../../../../../graphql/queries/ontology/entity-type.queries";

apps/hash-frontend/src/pages/@/[shortname]/shared/flow-visualizer/swimlane.tsx

@@ -139,7 +139,8 @@ export const Swimlane = ({
   );
 
   const stepsWithIds = useMemo(
-    () => nodes.map((node) => ({ stepId: node.id })),
+    () =>
+      nodes.map((node) => ({ stepId: node.id, parentStepId: node.parentNode })),
     [nodes],
   );
 

apps/hash-frontend/src/pages/@/[shortname]/shared/flow-visualizer/swimlane/custom-node.tsx

@@ -3,6 +3,7 @@ import { formatDistance } from "date-fns";
 import { useEffect, useMemo, useState } from "react";
 
 import { ArrowRightRegularIcon } from "@hashintel/design-system";
+import { parseStepRunId } from "@local/hash-isomorphic-utils/flows/step-run-id";
 
 import { Button } from "../../../../../../shared/ui/button";
 import {
@@ -119,7 +120,8 @@ export const CustomNode = ({ data, id, selected }: NodeProps<NodeData>) => {
      */
     let browserInputRequest: ExternalInputRequest | undefined = undefined;
     for (const request of selectedFlowRun?.inputRequests ?? []) {
-      if (request.resolvedAt ?? request.stepId !== id) {
+      /* A request is raised by a step run, which inside a for-each is one of several runs of this node's step. */
+      if (request.resolvedAt ?? parseStepRunId(request.stepId).stepId !== id) {
         continue;
       }
       if (request.type === "human-input") {

apps/hash-frontend/src/pages/dashboard/hooks/use-dashboard-item-config.ts

@@ -5,10 +5,7 @@ import {
   getPrimaryChartType,
   normalizeStructuralQuery,
 } from "@local/hash-isomorphic-utils/dashboard-types";
-import {
-  configureDashboardItemFlow,
-  refineDashboardItemFlow,
-} from "@local/hash-isomorphic-utils/flows/frontend-flow-definitions";
+import { flowDefinitionIds } from "@local/hash-isomorphic-utils/flows/flow-definition-ids";
 import { getFlowRunById } from "@local/hash-isomorphic-utils/graphql/queries/flow.queries";
 import { systemPropertyTypes } from "@local/hash-isomorphic-utils/ontology-type-ids";
 
@@ -603,7 +600,7 @@ export const useDashboardItemConfig = ({
       // Start the flow
       const { data } = await startFlow({
         variables: {
-          flowDefinitionId: configureDashboardItemFlow.flowDefinitionId,
+          flowDefinitionId: flowDefinitionIds.configureDashboardItem,
           flowInputs: {
             userGoal: {
               kind: "Text",
@@ -721,7 +718,7 @@ export const useDashboardItemConfig = ({
 
         const { data } = await startFlow({
           variables: {
-            flowDefinitionId: refineDashboardItemFlow.flowDefinitionId,
+            flowDefinitionId: flowDefinitionIds.refineDashboardItem,
             flowInputs: {
               userGoal: { kind: "Text", value: initialGoal },
               refinementInstruction: {

apps/hash-frontend/src/pages/flows.page.tsx

@@ -3,8 +3,8 @@ import { formatDistanceToNowStrict } from "date-fns";
 import { memo, useMemo, useState } from "react";
 
 import { InfinityLightIcon } from "@hashintel/design-system";
+import { isGoalFlowDefinitionId } from "@local/hash-isomorphic-utils/flows/flow-definition-ids";
 import { generateFlowDefinitionPath } from "@local/hash-isomorphic-utils/flows/frontend-paths";
-import { isGoalFlowDefinitionId } from "@local/hash-isomorphic-utils/flows/goal-flow-definitions";
 
 import { getLayoutWithSidebar } from "../shared/layout";
 import { Link } from "../shared/ui/link";

apps/hash-frontend/src/pages/goals.page/goals-list.tsx

@@ -1,7 +1,7 @@
 import { Box } from "@mui/material";
 import { useMemo } from "react";
 
-import { isGoalFlowDefinitionId } from "@local/hash-isomorphic-utils/flows/goal-flow-definitions";
+import { isGoalFlowDefinitionId } from "@local/hash-isomorphic-utils/flows/flow-definition-ids";
 
 import { useAuthenticatedUser } from "../shared/auth-info-context";
 import { useFlowRunsContext } from "../shared/flow-runs-context";