Merge pull request #11 from riverqueue/bg-workflow-supervisorless-cha…

…nges

Workflow changes

api_handler.go

@@ -358,8 +358,7 @@ type StatesAndCountsResponse struct {
 }
 
 type WorkflowGetResponse struct {
-	Supervisor *RiverJob  `json:"supervisor"`
-	Tasks      []RiverJob `json:"tasks"`
+	Tasks []RiverJob `json:"tasks"`
 }
 
 func (a *apiHandler) WorkflowGet(rw http.ResponseWriter, req *http.Request) {
@@ -372,13 +371,10 @@ func (a *apiHandler) WorkflowGet(rw http.ResponseWriter, req *http.Request) {
 		return
 	}
 
-	const workflowSupervisorJobKind = "WorkflowSupervisor"
-
 	dbJobs, err := a.queries.JobListWorkflow(ctx, db.JobListWorkflowParams{
-		PaginationLimit:        1000,
-		PaginationOffset:       0,
-		WorkflowSupervisorKind: workflowSupervisorJobKind,
-		WorkflowID:             workflowID,
+		PaginationLimit:  1000,
+		PaginationOffset: 0,
+		WorkflowID:       workflowID,
 	})
 	if err != nil {
 		http.Error(rw, err.Error(), http.StatusInternalServerError)
@@ -393,14 +389,7 @@ func (a *apiHandler) WorkflowGet(rw http.ResponseWriter, req *http.Request) {
 	jobs := internalJobsToSerializableJobs(dbJobs)
 
 	resp := WorkflowGetResponse{}
-	if len(jobs) != 0 {
-		startIndex := 0
-		if jobs[0].Kind == workflowSupervisorJobKind {
-			resp.Supervisor = &jobs[0]
-			startIndex = 1
-		}
-		resp.Tasks = jobs[startIndex:]
-	}
+	resp.Tasks = jobs
 
 	if err = json.NewEncoder(rw).Encode(resp); err != nil {
 		http.Error(rw, err.Error(), http.StatusInternalServerError)

internal/db/query.sql

@@ -19,7 +19,6 @@ FROM
 WHERE
   metadata @> jsonb_build_object('workflow_id', @workflow_id::text)
 ORDER BY
-  kind = @workflow_supervisor_kind::text DESC,
   id ASC
 LIMIT @pagination_limit::integer
 OFFSET @pagination_offset::bigint;

ui/src/components/WorkflowDetail.tsx

@@ -6,7 +6,7 @@ type WorkflowDetailProps = {
 };
 
 export default function WorkflowDetail({ workflow }: WorkflowDetailProps) {
-  const { supervisor, tasks } = workflow;
+  const { tasks } = workflow;
   return (
     <>
       <header>
@@ -25,17 +25,15 @@ export default function WorkflowDetail({ workflow }: WorkflowDetailProps) {
             </div>
             <p className="ml-7 mt-2 text-base leading-6 text-slate-600 dark:text-slate-400">
               ID:{" "}
-              <span className="font-mono">
-                {supervisor.metadata.workflow_id}
-              </span>
+              <span className="font-mono">{tasks[0].metadata.workflow_id}</span>
               {/* {capitalize(job.state)} */}
             </p>
           </div>
         </div>
       </header>
 
-      <div className="mx-auto h-[32rem] w-full px-4 sm:px-6 lg:px-8">
-        <WorkflowDiagram supervisor={supervisor} tasks={tasks} />
+      <div className="mx-auto h-[calc(100%-9rem)] w-full">
+        <WorkflowDiagram tasks={tasks} />
       </div>
     </>
   );

ui/src/components/WorkflowDiagram.tsx

@@ -1,4 +1,4 @@
-import ReactFlow from "reactflow";
+import ReactFlow, { MiniMap } from "reactflow";
 import type { Edge, Node, NodeTypes, Position } from "reactflow";
 import dagre from "@dagrejs/dagre";
 
@@ -10,7 +10,6 @@ import { JobState } from "@services/types";
 import WorkflowNode, { WorkflowNodeData } from "@components/WorkflowNode";
 
 type WorkflowDetailProps = {
-  supervisor: JobWithKnownMetadata;
   tasks: JobWithKnownMetadata[];
 };
 
@@ -21,7 +20,7 @@ type nameToJobMap = {
 const dagreGraph = new dagre.graphlib.Graph();
 dagreGraph.setDefaultEdgeLabel(() => ({}));
 
-const nodeWidth = 250;
+const nodeWidth = 208;
 const nodeHeight = 180;
 
 const getLayoutedElements = (
@@ -35,7 +34,7 @@ const getLayoutedElements = (
     edgesep: 100,
     nodesep: 80,
     rankdir: direction,
-    ranksep: 80,
+    ranksep: 100,
   });
 
   nodes.forEach((node) => {
@@ -164,12 +163,15 @@ export default function WorkflowDiagram({ tasks }: WorkflowDetailProps) {
   return (
     <div className="size-full">
       <ReactFlow
+        defaultViewport={{ x: 32, y: 32, zoom: 1 }}
         edges={layoutedEdges}
         // fitView
         nodeTypes={nodeTypes}
         nodes={layoutedNodes}
         proOptions={{ hideAttribution: true }}
-      />
+      >
+        <MiniMap nodeStrokeWidth={3} pannable zoomable />
+      </ReactFlow>
     </div>
   );
 }

ui/src/components/WorkflowNode.tsx

@@ -18,7 +18,7 @@ const WorkflowNode = memo(
     const { hasDownstreamDeps, hasUpstreamDeps, job } = data;
 
     return (
-      <div className="w-60 overflow-hidden rounded-xl border-2 border-slate-200 bg-white dark:border-slate-700 dark:bg-slate-800">
+      <div className="w-52 overflow-hidden rounded-xl border-2 border-slate-200 bg-white dark:border-slate-700 dark:bg-slate-800">
         <Handle
           type="target"
           position={Position.Left}

ui/src/services/workflows.ts

@@ -7,12 +7,10 @@ import { JobFromAPI, JobWithKnownMetadata, apiJobToJob } from "@services/jobs";
 // string dates instead of Date objects and keys as snake_case instead of
 // camelCase.
 type WorkflowFromAPI = {
-  supervisor: JobFromAPI;
   tasks: JobFromAPI[];
 };
 
 export type Workflow = {
-  supervisor: JobWithKnownMetadata;
   tasks: JobWithKnownMetadata[];
 };
 
@@ -34,6 +32,5 @@ export const getWorkflow: QueryFunction<Workflow, GetWorkflowKey> = async ({
 };
 
 const apiWorkflowToWorkflow = (job: WorkflowFromAPI): Workflow => ({
-  supervisor: apiJobToJob(job.supervisor) as JobWithKnownMetadata,
   tasks: job.tasks.map(apiJobToJob) as JobWithKnownMetadata[],
 });