feat(console): revamp map view (#6528)

This restores the new Console map view again, and will try to fix the previous issues with the missing connections. Fixes #6511, fixes #6459, fixes #6455.
winglang · May 24, 2024 · db0720d · db0720d
1 parent 7c2297f
commit db0720d
Show file tree

Hide file tree

Showing 51 changed files with 2,686 additions and 1,157 deletions.
diff --git a/apps/wing-console/console/design-system/src/row-input.tsx b/apps/wing-console/console/design-system/src/row-input.tsx
@@ -68,7 +68,7 @@ export const RowInput = memo(
           type === "checkbox" && [
             theme.focusInput,
             theme.bg4,
-            "w-4 h-4 dark:ring-offset-gray-800",
+            "w-4 h-4 dark:ring-offset-slate-800",
           ],
           type === "date" &&
             !value &&

diff --git a/apps/wing-console/console/server/src/router/app.ts b/apps/wing-console/console/server/src/router/app.ts
@@ -283,18 +283,21 @@ export const createAppRouter = () => {
       .input(
         z.object({
           edgeId: z.string(),
-          showTests: z.boolean().optional(),
         }),
       )
       .query(async ({ ctx, input }) => {
-        const { edgeId, showTests } = input;
+        const { edgeId } = input;
         const simulator = await ctx.simulator();
 
         const { tree } = simulator.tree().rawData();
         const nodeMap = buildConstructTreeNodeMap(shakeTree(tree));
 
-        const sourcePath = edgeId.split("->")[0]?.trim();
-        const targetPath = edgeId.split("->")[1]?.trim();
+        let [, sourcePath, _sourceInflight, , targetPath, targetInflight] =
+          edgeId.match(/^(.+?)#(.*?)#(.*?)#(.+?)#(.*?)#(.*?)$/i) ?? [];
+
+        targetPath = targetPath?.startsWith("#")
+          ? targetPath.slice(1)
+          : targetPath;
 
         const sourceNode = nodeMap.get(sourcePath);
         if (!sourceNode) {
@@ -312,39 +315,6 @@ export const createAppRouter = () => {
           });
         }
 
-        const connections = simulator.connections();
-
-        const inflights = sourceNode.display?.hidden
-          ? []
-          : connections
-              ?.filter(({ source, target, name }) => {
-                if (!isFoundInPath(sourceNode, nodeMap, source, true)) {
-                  return false;
-                }
-
-                if (!isFoundInPath(targetNode, nodeMap, target, true)) {
-                  return false;
-                }
-
-                if (name === "$inflight_init()") {
-                  return false;
-                }
-
-                if (
-                  !showTests &&
-                  (matchTest(sourceNode.path) || matchTest(targetNode.path))
-                ) {
-                  return false;
-                }
-
-                return true;
-              })
-              .map((connection) => {
-                return {
-                  name: connection.name,
-                };
-              }) ?? [];
-
         return {
           source: {
             id: sourceNode.id,
@@ -356,7 +326,13 @@ export const createAppRouter = () => {
             path: targetNode?.path ?? "",
             type: (targetNode && getResourceType(targetNode, simulator)) ?? "",
           },
-          inflights,
+          inflights: targetInflight
+            ? [
+                {
+                  name: targetInflight,
+                },
+              ]
+            : [],
         };
       }),
     "app.invalidateQuery": createProcedure.subscription(({ ctx }) => {
@@ -375,42 +351,17 @@ export const createAppRouter = () => {
         };
       });
     }),
-    "app.map": createProcedure
-      .input(
-        z
-          .object({
-            showTests: z.boolean().optional(),
-          })
-          .optional(),
-      )
-      .query(async ({ ctx, input }) => {
-        const simulator = await ctx.simulator();
+    "app.map": createProcedure.query(async ({ ctx }) => {
+      const simulator = await ctx.simulator();
 
-        const { tree } = simulator.tree().rawData();
-        const connections = simulator.connections();
-        const shakedTree = shakeTree(tree);
-        const nodeMap = buildConstructTreeNodeMap(shakedTree);
-        const nodes = [
-          createMapNodeFromConstructTreeNode(
-            shakedTree,
-            simulator,
-            input?.showTests,
-          ),
-        ];
-        const edges = uniqby(
-          createMapEdgesFromConnectionData(
-            nodeMap,
-            connections,
-            input?.showTests,
-          ),
-          (edge) => edge.id,
-        );
+      const { tree } = simulator.tree().rawData();
+      const connections = simulator.connections();
 
-        return {
-          nodes,
-          edges,
-        };
-      }),
+      return {
+        tree,
+        connections,
+      };
+    }),
     "app.state": createProcedure.query(async ({ ctx }) => {
       return ctx.appState();
     }),
@@ -591,45 +542,6 @@ export interface MapEdge {
   target: string;
 }
 
-function createMapEdgesFromConnectionData(
-  nodeMap: ConstructTreeNodeMap,
-  connections: NodeConnection[],
-  showTests = false,
-): MapEdge[] {
-  return [
-    ...connections
-      .filter((connection) => {
-        return connectionsBasicFilter(connection, nodeMap, showTests);
-      })
-      ?.map((connection: NodeConnection) => {
-        const source = getVisualNodePath(connection.source, nodeMap);
-        const target = getVisualNodePath(connection.target, nodeMap);
-        return {
-          id: `${source} -> ${target}`,
-          source,
-          target,
-        };
-      })
-      ?.filter(({ source, target }) => {
-        // Remove redundant connections to a parent resource if there's already a connection to a child resource.
-        if (
-          connections.some((connection) => {
-            if (
-              connection.source === source &&
-              connection.target.startsWith(`${target}/`)
-            ) {
-              return true;
-            }
-          })
-        ) {
-          return false;
-        }
-
-        return true;
-      }),
-  ].flat();
-}
-
 function getResourceType(
   node: Node | ConstructTreeNode,
   simulator: Simulator,