fixes

apps/webservice/src/app/[workspaceSlug]/(targets)/targets/[targetId]/visualize/DepEdge.tsx

@@ -22,7 +22,7 @@ export const DepEdge: React.FC<EdgeProps> = ({
     targetPosition,
   });
 
-  const edgeLabel = capitalCase(String(label).replace("_", " "));
+  const edgeLabel = capitalCase(String(label).replace(/_/g, " "));
 
   return (
     <>

apps/webservice/src/app/[workspaceSlug]/(targets)/targets/[targetId]/visualize/ResourceVisualizationDiagram.tsx

@@ -2,12 +2,7 @@
 
 import type { RouterOutputs } from "@ctrlplane/api";
 import type * as SCHEMA from "@ctrlplane/db/schema";
-import type {
-  EdgeTypes,
-  NodeMouseHandler,
-  NodeTypes,
-  ReactFlowInstance,
-} from "reactflow";
+import type { EdgeTypes, NodeTypes, ReactFlowInstance } from "reactflow";
 import React, { useCallback, useEffect, useState } from "react";
 import { compact } from "lodash";
 import ReactFlow, {
@@ -55,9 +50,8 @@ const nodeTypes: NodeTypes = {
 };
 const edgeTypes: EdgeTypes = { default: DepEdge };
 
-const sleep = (ms: number) => new Promise((r) => setTimeout(r, ms));
-const useOnLayout = () => {
-  const { getNodes, fitView, setNodes, setEdges, getEdges } = useReactFlow();
+const useOnLayout = (setIsLayouted: (isLayouted: boolean) => void) => {
+  const { getNodes, setNodes, setEdges, getEdges } = useReactFlow();
   return useCallback(() => {
     const layouted = getLayoutedElementsDagre(
       getNodes(),
@@ -68,19 +62,15 @@ const useOnLayout = () => {
     );
     setNodes([...layouted.nodes]);
     setEdges([...layouted.edges]);
-
-    window.requestAnimationFrame(() => {
-      // hack to get it to center - we should figure out when the layout is done
-      // and then call fitView. We are betting that everything should be
-      // rendered correctly in 100ms before fitting the view.
-      sleep(100).then(() => fitView({ padding: 0.12, maxZoom: 1 }));
-    });
-  }, [getNodes, getEdges, setNodes, setEdges, fitView]);
+    setIsLayouted(true);
+  }, [getNodes, getEdges, setNodes, setEdges, setIsLayouted]);
 };
 
 export const ResourceVisualizationDiagram: React.FC<
   ResourceVisualizationDiagramProps
 > = ({ resource, relationships }) => {
+  const [isLayouted, setIsLayouted] = useState(false);
+  const [isViewFitted, setIsViewFitted] = useState(false);
   const { systems, provider } = relationships;
   const [nodes, _, onNodesChange] = useNodesState<{ label: string }>(
     compact([
@@ -112,7 +102,6 @@ export const ResourceVisualizationDiagram: React.FC<
           position: { x: 0, y: 0 },
         })),
       ),
-
       provider != null && {
         id: provider.id,
         type: NodeType.Provider,
@@ -138,7 +127,7 @@ export const ResourceVisualizationDiagram: React.FC<
       providerEdge,
     ]),
   );
-  const onLayout = useOnLayout();
+  const onLayout = useOnLayout(setIsLayouted);
 
   const [reactFlowInstance, setReactFlowInstance] =
     useState<ReactFlowInstance | null>(null);
@@ -148,17 +137,24 @@ export const ResourceVisualizationDiagram: React.FC<
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [reactFlowInstance]);
 
-  const onNodeClick: NodeMouseHandler = (event, node) => {
-    console.log(node);
-  };
+  useEffect(() => {
+    if (
+      reactFlowInstance != null &&
+      nodes.length &&
+      isLayouted &&
+      !isViewFitted
+    ) {
+      reactFlowInstance.fitView({ padding: 0.12, maxZoom: 1 });
+      setIsViewFitted(true);
+    }
+  }, [reactFlowInstance, nodes, isLayouted, isViewFitted]);
 
   return (
     <ReactFlow
       nodes={nodes}
       edges={edges}
       onNodesChange={onNodesChange}
       onEdgesChange={onEdgesChange}
-      onNodeClick={onNodeClick}
       fitView
       proOptions={{ hideAttribution: true }}
       deleteKeyCode={[]}

apps/webservice/src/app/[workspaceSlug]/(targets)/targets/[targetId]/visualize/page.tsx

@@ -8,10 +8,14 @@ export default async function VisualizePage({
 }: {
   params: { targetId: string };
 }) {
-  const resource = await api.resource.byId(targetId);
-  if (resource == null) return notFound();
-  const relationships = await api.resource.relationships(resource.id);
-  if (relationships == null) return notFound();
+  const resourceId = targetId;
+  const resourcePromise = api.resource.byId(resourceId);
+  const relationshipsPromise = api.resource.relationships(resourceId);
+  const [resource, relationships] = await Promise.all([
+    resourcePromise,
+    relationshipsPromise,
+  ]);
+  if (resource == null || relationships == null) return notFound();
 
   return (
     <ResourceVisualizationDiagramProvider

packages/api/src/router/target.ts

@@ -361,7 +361,7 @@ export const resourceRouter = createTRPCRouter({
         const matchedEnvironmentsPromises = s.environments.map(async (e) => {
           const matchedResource = await ctx.db.query.resource.findFirst({
             where: and(
-              eq(schema.resource.workspaceId, s.workspaceId),
+              eq(schema.resource.id, resource.id),
               schema.resourceMatchesMetadata(ctx.db, e.resourceFilter),
             ),
           });