Doc Visualization Updates

docs/introduction/overview.mdx

@@ -69,18 +69,21 @@ pip install codegen
 
 Codegen enables you to programmatically manipulate code with scale and precision.
 
-<Frame caption="Call graph visualization for modal/modal-client">
+<Frame caption="Call graph visualization for modal/modal-client/_Client">
 <iframe
   width="100%"
   height="500px"
   scrolling="no"
-  src={`https://codegen.sh/embedded/graph?id=299beefe-0207-43b6-bff3-6ca9036f62eb&zoom=0.5`}
+  src={`https://codegen.sh/embedded/graph?id=66e2e195-ceec-4935-876a-ed4cfc1731c7&zoom=0.5&targetNodeName=_Client`}
   className="rounded-xl"
   style={{
     backgroundColor: "#15141b",
   }}
 ></iframe>
 </Frame>
+<Info>
+View source code on [modal/modal-client](https://github.com/modal-labs/modal-client/blob/cbac0d80dfd98588027ecd21850152776be3ab82/modal/client.py#L70). View codemod on [codegen.sh](https://www.codegen.sh/codemod/66e2e195-ceec-4935-876a-ed4cfc1731c7/public/diff)
+</Info>
 
 Common use cases include:
 

docs/tutorials/codebase-visualization.mdx

@@ -150,25 +150,29 @@ create_downstream_call_trace(target_method)
 codebase.visualize(G)
 ```
 
-### Common Use Cases
-The call graph visualization is particularly useful for:
- - Understanding complex codebases
- - Planning refactoring efforts
- - Identifying tightly coupled components
- - Analyzing critical paths
- - Documenting system architecture
 
 ### Take a look
 <iframe
   width="100%"
   height="600px"
   scrolling="no"
-  src={`https://codegen.sh/embedded/graph?id=9a141c52-c0c2-4737-bdc3-5d164791d3b5&zoom=1&targetNodeName=SharingConfigurationViewSet.patch`}
+  src={`https://codegen.sh/embedded/graph?id=6a34b45d-c8ad-422e-95a8-46d4dc3ce2b0&zoom=1&targetNodeName=SharingConfigurationViewSet.patch`}
   className="rounded-xl "
   style={{
     backgroundColor: "#15141b",
   }}
 ></iframe>
+<Info>
+View on [codegen.sh](https://www.codegen.sh/codemod/6a34b45d-c8ad-422e-95a8-46d4dc3ce2b0/public/diff)
+</Info>
+
+### Common Use Cases
+The call graph visualization is particularly useful for:
+ - Understanding complex codebases
+ - Planning refactoring efforts
+ - Identifying tightly coupled components
+ - Analyzing critical paths
+ - Documenting system architecture
 
 ## Function Dependency Graph
 
@@ -240,12 +244,15 @@ codebase.visualize(G)
   width="100%"
   height="600px"
   scrolling="no"
-  src={`https://codegen.sh/embedded/graph?id=bb7b227b-cc89-4e92-b71f-fb0d6265eb3d&zoom=0.8&targetNodeName=get_query_runner`}
+  src={`https://codegen.sh/embedded/graph?id=39a36f0c-9d35-4666-9db7-12ae7c28fc17&zoom=0.8&targetNodeName=get_query_runner`}
   className="rounded-xl "
   style={{
     backgroundColor: "#15141b",
   }}
 ></iframe>
+<Info>
+View on [codegen.sh](https://www.codegen.sh/codemod/39a36f0c-9d35-4666-9db7-12ae7c28fc17/public/diff)
+</Info>
 
 ## Blast Radius visualization
 
@@ -337,21 +344,25 @@ G.add_node(target_func, color=COLOR_PALETTE.get("StartFunction"))
 # Build the visualization
 create_blast_radius_visualization(target_func)
 
-# Render reversed graph to show impact flow
-codebase.visualize(G.reverse())
+# Render graph to show impact flow
+# Note: a -> b means changes to a will impact b
+codebase.visualize(G)
 ```
 
 ### Take a look
 <iframe
   width="100%"
   height="600px"
   scrolling="no"
-  src={`https://codegen.sh/embedded/graph?id=347d349e-263b-481a-9601-1cd205b332b9&zoom=1&targetNodeName=export_asset`}
+  src={`https://codegen.sh/embedded/graph?id=d255db6c-9a86-4197-9b78-16c506858a3b&zoom=1&targetNodeName=export_asset`}
   className="rounded-xl "
   style={{
     backgroundColor: "#15141b",
   }}
 ></iframe>
+<Info>
+View on [codegen.sh](https://www.codegen.sh/codemod/d255db6c-9a86-4197-9b78-16c506858a3b/public/diff)
+</Info>
 
 ## What's Next?