Doc Visualization Updates (#185)

# Motivation
- Links embedded visualizations to the code they visualize and the
codemod that generated them

# Content
changes to docs/introduction/overview.mdx and
docs/tutorials/codebase-visualization.mdx
# Testing
tested by running locally
# Please check the following before marking your PR as ready for review

- [x] I have added tests for my changes
- [x] I have updated the documentation or added new documentation as
needed
- [x] I have read and agree to the [Contributor License
Agreement](../CLA.md)

---------

Co-authored-by: codegen-bot <[email protected]>

Author: jemeza-codegen

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

@@ -11,6 +11,7 @@ iconType: "solid"
   width="100%"
   height="600px"
   scrolling="no"
+  loading="lazy"
   src={`https://codegen.sh/embedded/graph?id=347d349e-263b-481a-9601-1cd205b332b9&zoom=1&targetNodeName=export_asset`}
   className="rounded-xl "
   style={{
@@ -150,25 +151,30 @@ 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`}
+  loading="lazy"
+  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 +246,16 @@ 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`}
+  loading="lazy"
+  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 +347,26 @@ 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`}
+  loading="lazy"
+  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?
 

src/codegen/cli/commands/create/main.py

@@ -103,7 +103,6 @@ def create_command(session: CodegenSession, name: str, path: Path, description:
 
             # Write the function code
             codemod_path.write_text(code)
-       
 
     except (ServerError, ValueError) as e:
         raise click.ClickException(str(e))