feat(console): restrict map fade effect to node icons and titles (for…

… unrelated nodes) (#5822)
winglang · Mar 3, 2024 · b189bf4 · b189bf4
1 parent 05815e0
commit b189bf4
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 17 deletions.
diff --git a/apps/wing-console/console/ui/src/features/map-view.tsx b/apps/wing-console/console/ui/src/features/map-view.tsx
@@ -24,10 +24,12 @@ const Node = memo(
     node,
     depth,
     selected,
+    fade,
   }: {
     node: MapNode;
     depth: number;
     selected: boolean;
+    fade: boolean;
   }) => {
     return (
       <div className="h-full flex flex-col relative">
@@ -38,6 +40,7 @@ const Node = memo(
           open={node.children && node.children?.length > 0}
           selected={selected}
           resourceType={node.data?.type}
+          fade={fade}
           icon={(props) => (
             <ResourceIcon
               resourceType={node.data?.type}

diff --git a/apps/wing-console/console/ui/src/ui/elk-map-nodes.tsx b/apps/wing-console/console/ui/src/ui/elk-map-nodes.tsx
@@ -54,6 +54,7 @@ export interface ContainerNodeProps {
   open?: boolean;
   hideBottomBar?: boolean;
   selected?: boolean;
+  fade?: boolean;
   resourceType: BaseResourceSchema["type"] | undefined;
   depth: number;
   onClick?: () => void;
@@ -66,6 +67,7 @@ export const ContainerNode = memo(
     icon: Icon,
     hideBottomBar,
     selected,
+    fade,
     onClick,
     onMouseEnter,
     resourceType,
@@ -134,6 +136,7 @@ export const ContainerNode = memo(
                   {
                     [theme.border3]: !selected,
                     "border-sky-300 dark:border-sky-500": selected,
+                    "opacity-30": fade,
                   },
                 )}
               >
@@ -170,6 +173,7 @@ export const ContainerNode = memo(
                     selected && "text-sky-600 dark:text-sky-400",
                     "font-semibold",
                   ],
+                  { "opacity-30": fade },
                 )}
               >
                 {compilerNamed ? display?.title : props.name}

diff --git a/apps/wing-console/console/ui/src/ui/elk-map.tsx b/apps/wing-console/console/ui/src/ui/elk-map.tsx
@@ -4,7 +4,7 @@ import ELK, {
   ElkNode,
   LayoutOptions,
 } from "elkjs/lib/elk.bundled.js";
-import { AnimatePresence, motion } from "framer-motion";
+import { AnimatePresence } from "framer-motion";
 import {
   FC,
   Fragment,
@@ -50,6 +50,7 @@ export type NodeItemProps<T> = {
   node: Node<T>;
   depth: number;
   selected: boolean;
+  fade: boolean;
 };
 
 type Sizes = Record<string, { width: number; height: number }>;
@@ -100,7 +101,12 @@ const InvisibleNodeSizeCalculator = memo(
                 className={classNames("h-full relative")}
                 ref={(element) => (refs.current[node.id] = element)}
               >
-                <NodeItem node={node} depth={depth} selected={false} />
+                <NodeItem
+                  node={node}
+                  depth={depth}
+                  selected={false}
+                  fade={false}
+                />
               </div>
             </div>
 
@@ -349,30 +355,19 @@ const NodesContainer = memo(
     return (
       <>
         {nodeList.map((node) => (
-          <motion.div
+          // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+          <div
             key={node.id}
             className={classNames(
               "absolute origin-top",
               "transition-all",
               durationClass,
             )}
             style={{
-              translateX: node.offset.x,
-              translateY: node.offset.y,
+              transform: `translate(${node.offset.x}px, ${node.offset.y}px)`,
               width: `${node.width}px`,
               height: `${node.height}px`,
             }}
-            initial={{
-              opacity: 0,
-            }}
-            animate={{
-              opacity:
-                isHighlighted(node.id) || hasHighlightedEdge(node) ? 1 : 0.3,
-            }}
-            transition={{ ease: "easeOut", duration: 0.15 }}
-            exit={{
-              opacity: 0,
-            }}
             onClick={(event) => {
               // Stop the event from propagating to the background node.
               event.stopPropagation();
@@ -383,8 +378,9 @@ const NodesContainer = memo(
               node={node.data}
               depth={node.depth}
               selected={node.id === selectedNodeId}
+              fade={!isHighlighted(node.id) && !hasHighlightedEdge(node)}
             />
-          </motion.div>
+          </div>
         ))}
       </>
     );