@appland/appmap 3.146.0 → 3.147.0

package/built/docs/setup-appmap-in-your-code-editor/generate-appmap-data-with-remote-recording.md

@@ -0,0 +1,112 @@
+---
+layout: docs
+title: Docs - AppMap in your Code Editor
+description: "Generate AppMap Data through remote recording for detailed HTTP request sequences. Install AppMap agent and follow steps for remote recording in various languages."
+name: Generate AppMap Data with Remote Recording
+step: 4
+setup-appmap-ide: true
+redirect_from: [/docs/your-first-15-minutes-with-appmap/generate-appmaps-with-remote-recording, /docs/setup-appmap-in-your-code-editor/generate-appmaps-with-remote-recording]
+---
+
+# Generate AppMap Data with Remote Recording
+
+Remote recording enables you to create an AppMap while interacting directly with your app through the UI or API.
+
+Some benefits of remote recording include:
+
+* **Named by you** When you finish creating a remote recording, you give it a name that makes sense to you. For example, you can name it for the user flow, or the ID number of the issue that you are trying to reproduce.
+* **Contains a sequence of requests** A remote recording AppMap contains the entire sequence of HTTP server requests that occur as you use the application.
+* **Contains both foreground and background work** A remote recording AppMap contains all threads of execution, not just the web server. So you can see background jobs, message queue activity, and other threads of activity along with the main HTTP server request.
+* **Ideal for sharing** When you reproduce a bug, security vulnerability, or performance problem in a remote recording AppMap, you can share it with colleagues so they can see exactly what the problem is. An AppMap contains much more information than the source code itself.
+
+The steps for creating a remote recording are:
+
+1. Start your application server with remote recording enabled:
+
+   * [Remote recording - Ruby](/docs/reference/appmap-ruby#remote-recording)
+   * [Remote recording - Python](/docs/reference/appmap-python#remote-recording)
+   * [Remote recording - Java (IntelliJ)](/docs/reference/jetbrains#running-a-java-application-with-appmap)
+   * [Remote recording - Java (VS Code)](/docs/reference/vscode#remote-recording)
+   * [Remote recording - Java (command line)](/docs/reference/appmap-java#remote-recording)
+   * [Remote recording - Node.js](/docs/reference/appmap-node#remote-recording)
+
+{% include vimeo.html id='916087968' %}
+
+---
+
+**In this video**  
+We generate AppMap Data with a remote recording of our application. You can remote record your application if your app doesn’t have complete test cases, or when you want to dive into a specific user interaction such as an API call or specific product functionality in your app.
+
+**Links mentioned**  
+[Rails Sample Application](https://github.com/land-of-apps/sample_app_6th_ed/tree/codespaces-devcontainer)  
+[Early Access to AppMap Analysis](/appmap-analysis)  
+[Detailed Remote Recording instructions for Rails](/docs/reference/appmap-ruby.html#remote-recording)  
+[Detailed Remote Recording instructions for Java](/docs/reference/appmap-java.html#remote-recording)
+
+---
+
+## Follow along
+
+In this tutorial we are going to generate AppMap Data with a remote recording of our application. You can remote record your application if your app doesn’t have complete test cases, or when you want to dive into a specific user interaction such as an API call or specific product functionality in your app.
+
+We are going to be using [a sample ruby on rails application](https://github.com/land-of-apps/sample_app_6th_ed/tree/codespaces-devcontainer), which is a basic Twitter clone. If you have followed the previous tutorials, you’ll have [AppMap installed, and have already generated AppMap Data for your test cases](/docs/setup-appmap-in-your-code-editor/generate-appmap-data-from-tests).
+
+## Install AppMap agent
+
+**NOTE:** If you're using JetBrains IntelliJ IDEA with Java, [follow these instructions](/docs/reference/jetbrains#remote-recording) to create AppMap Data using remote recording.
+
+We’re going to open the AppMap for Visual Studio Code extension and install the AppMap agent. Our installer will confirm that the project meets all the requirements necessary to create maps.
+
+<img class="video-screenshot" src="/assets/img/appmap-install.webp"/>
+
+We’ll run the AppMap installer, select `bundler`, since this is a Ruby on Rails project.
+
+<img class="video-screenshot" src="/assets/img/docs/first-fifteen-minutes/select-bundler.webp"/>
+
+You’ll see that the only changes thus far to our repository are the addition of an AppMap configuration file and the AppMap gem being added as a development dependency.
+
+<img class="video-screenshot" src="/assets/img/docs/first-fifteen-minutes/project-config-diff.webp"/>
+
+## Recording AppMap Diagrams
+
+Next, follow the on-screen instructions for recording AppMap Data. You'll receive one of the two following options.
+
+First, you may be instructed to run your application as you normally would. In this scenario, AppMap will automatically be enabled and each web request will generate a new AppMap.
+
+If you see this screen, follow along with [request recording AppMap Data](/docs/setup-appmap-in-your-code-editor/generate-appmap-data-with-request-recording).
+
+<img class="video-screenshot" src="/assets/img/appmap-record.webp"/>
+
+Otherwise, you'll be given a command to copy and paste into the terminal which will guide you through running your application with AppMap enabled.
+
+`npx @appland/appmap record`
+
+<img class="video-screenshot" src="/assets/img/docs/first-fifteen-minutes/record-command.webp"/>
+
+Before I run that command, I’m going to want to start my application locally and make sure I can connect to it. I’m going to open another terminal window and run:
+
+`bundle exec rails server`
+
+If you are remote recording a Java application or other language, please refer to the [AppMap documentation](/docs/recording-methods.html) for the relevant tutorials for those languages. With my app now running you can see that I can login to my app, navigate around, post a tweet, see users.
+
+We’ll now return to our console and run the `record` command. If I omit passing any options, I’ll be prompted to choose how to record the app. I’ll choose remote recording. AppMap will try to locate your running application locally, if your app is running in a container or elsewhere you may get an error. Simply follow the instructions to walk through the available configuration options to connect to your service.
+
+<img class="video-screenshot" src="/assets/img/docs/first-fifteen-minutes/select-remote-recording.webp"/>
+
+## Interact with Application
+
+Now that the agent is connected, we can hit enter to begin recording. Now, I can interact with my application, kick off a specific functional or integration test, or make any specific API calls to your application. I’m going to login and reset my password. It’s important to keep remote recordings focused on a specific function, and not include too many interactions in one single AppMap Data recording as they can grow large as recordings progress.
+
+When I am done interacting, I return back to the terminal and hit enter again to stop the recording. We’ll give this recording a name and then this AppMap will be opened within VS Code.
+
+<img class="video-screenshot" src="/assets/img/docs/first-fifteen-minutes/stop-remote-recording.webp"/>
+
+## Open AppMap Diagrams
+
+We’ll also receive a runtime analysis scan of this code path as well, which has identified a performance issue with an N+1 SQL query generating the main list of tweets. For early access to our AppMap runtime analysis [reach out to us](/appmap-analysis).
+
+<img class="video-screenshot" src="/assets/img/docs/first-fifteen-minutes/remote-recorded-appmap.webp"/>
+
+Finally, you'll see AppMap Data actually exists inside your temp directory in the AppMap folder. We don't recommend committing these to your project. They can grow your git repositories unnecessarily. But you can commit changes to your Gemfile and the appmap configuration file which will make the project available to other developers.
+
+<img class="video-screenshot" src="/assets/img/docs/first-fifteen-minutes/dont-commit-appmaps.webp"/>

package/built/docs/setup-appmap-in-your-code-editor/generate-appmap-data-with-request-recording.md

@@ -0,0 +1,77 @@
+---
+layout: docs
+title: Docs - AppMap in your Code Editor
+description: "Learn to use AppMap to configure your app to record AppMap Data of HTTP requests, easily sort and name them."
+name: Generate AppMap Data with Request Recording
+setup-appmap-ide: true
+redirect_from: [/docs/your-first-15-minutes-with-appmap/streaming-appmaps-with-request-recording, /docs/setup-appmap-in-your-code-editor/generate-appmaps-with-request-recording]
+step: 5
+---
+
+# Generate AppMap Data with Request Recording
+
+You can configure your application to record an AppMap of each HTTP server request.
+
+Some characteristics of request recording include:
+
+* **Named for the route** The name of each AppMap contains the HTTP request method and path, so you can see at a glance what request AppMap contains.
+* **Sortable by timestamp** In the AppMap extension, AppMap Data recorded from requests are sorted by timestamp, with newest AppMap Diagrams at the top. So you can see a chronology of the requests that your app is serving.
+
+For details on requests recording, see:
+
+- [Requests recording - Ruby](/docs/reference/appmap-ruby#requests-recording)
+- [Requests recording - Python](/docs/reference/appmap-python#requests-recording)
+- [Requests recording - Java](/docs/reference/appmap-java#requests-recording)
+
+{% include vimeo.html id='916048527' %}
+
+---
+
+**In this video**  
+We enable automatic recording of a Ruby on Rails application and stream AppMap Data into VS Code for each request as we interact with our application. Now available for Ruby on Rails applications, you can generate AppMap Diagrams for each request automatically by simply running your application locally and interacting or making API requests.
+
+**Links mentioned**  
+[Requests Recording](/docs/recording-methods.html#requests-recording)  
+[Requests Recording in Rails](/docs/reference/appmap-ruby#requests-recording)  
+[Requests Recording in Python](/docs/reference/appmap-python#requests-recording)  
+
+---
+
+## Follow along
+
+In this tutorial we are going to show you the latest way to generate AppMap Diagrams for your application, streaming AppMap Data for each request. 
+
+This feature is currently available for [Ruby on Rails](/docs/reference/appmap-ruby#requests-recording), as well as [Python](/docs/reference/appmap-python#requests-recording) applications that use Django or Flask.
+
+## Install AppMap agent
+
+You can add AppMap to your project now by simply clicking the automated installer. This automatically adds the AppMap libraries to your project and will run your projects’ package manager such as Bundler, Pip, Poetry, and others. 
+
+<img class="video-screenshot" src="/assets/img/docs/first-fifteen-minutes/streaming-appmap-1.webp"/>
+
+You could also skip the automated installer and add this to the top of your Gemfile in this Rails example. 
+
+```
+# This must be the first gem listed
+gem 'appmap', group: %i[test development]
+```
+
+With AppMap installed in this project, we can now start recording. You can record AppMap Diagrams by running your test cases, or by starting a remote recording of a user interaction. But now you can simply just start your project and AppMap will automatically record every request as it happens. 
+
+I will now start my rails application, this is our AppMap merch store based on the open source project Solidus. You will see AppMap is enabled by default for the development environment.  
+
+<img class="video-screenshot" src="/assets/img/docs/first-fifteen-minutes/streaming-appmap-2.webp"/>
+
+I can now interact with my application and AppMap Data will start to stream into my code editor.  We’ll highlight HTTP server requests, SQL Queries, and highlight important AppMap Diagrams.
+
+I can then open the AppMap Diagrams to see which packages and functions interact with my database for example. 
+
+And of course, AppMap will be continually alerting on performance and security issues for this project with AppMap Analysis. 
+
+<img class="video-screenshot" src="/assets/img/docs/first-fifteen-minutes/streaming-appmap-3.webp"/>
+
+With that we find an [authorization happening before authentication](/docs/reference/analysis-rules#authz-before-authn). This is the #1 security flaw on the OWASP Top Ten - and no other tool can detect it.
+
+<img class="video-screenshot" src="/assets/img/docs/first-fifteen-minutes/streaming-appmap-4.webp"/>
+
+Head over to [the Get AppMap page](/get-appmap) to get started with our VS Code or JetBrains extension and add AppMap to your project today.  

package/built/docs/setup-appmap-in-your-code-editor/how-appmap-works.md

@@ -0,0 +1,166 @@
+---
+layout: docs
+setup-appmap-ide: true
+title: Docs - AppMap in your Code Editor
+description: "Learn how AppMap works: recording agents for Java, Python, Ruby, and Node.js, configuration, recording methods, AppMap files, running in containers, and viewing AppMap Diagrams."
+step: 1
+name: How AppMap Works
+redirect_from: [/docs/your-first-15-minutes-with-appmap/what-is-appmap,/docs/your-first-15-minutes-with-appmap/ideal-projects,/docs/your-first-15-minutes-with-appmap/appmap-analysis,/docs/guides/how-appmap-works]
+---
+
+# How AppMap Works
+
+- [Language "agent"](#language-agent)
+- [appmap.yml configuration](#appmapyml-configuration)
+- [Recording methods](#recording-methods)
+- [About AppMap files](#about-appmap-files)
+- [Running in containers](#running-in-containers)
+- [Viewing AppMap Diagrams](#viewing-appmap-diagrams)
+
+## Language “agent”
+
+The AppMap process begins with the AppMap recording agent. This “agent” is a language-specific library - agents are available for Java, Python, Ruby and Node.js (Beta). You add the agent as a dependency of your project in the normal manner - via Maven, Gradle, Pip, Bundler, Yarn, etc. Then you configure your application to load the agent when the application runs. 
+
+
+<table class="table table-striped table-bordered">
+    <tr>
+        <th>Java</th>
+        <th>Python</th>
+        <th>Ruby</th>
+        <th>Node.js</th>
+    </tr>
+    <tr>
+        <td><code>-javaagent</code> JVM option </td>
+        <td>Django environment </td>
+        <td><code>test</code> and/or <code>development</code> bundle</td>
+        <td><code>npx appmap-node <i>yourapp</i></code></td> 
+    </tr>
+    <tr>
+        <td>Gradle plugin</td>
+        <td>Flask environment </td>
+        <td></td>
+        <td></td> 
+    </tr>
+        <tr>
+        <td>Maven plugin</td>
+        <td></td>
+        <td></td>
+        <td></td> 
+    </tr>
+</table>
+
+
+
+_Running application code with the AppMap agent enabled_
+
+AppMap is designed to record and display the code internals of your project, along with important I/O operations. Here’s a comparison of AppMap with other runtime code tools:
+
+<table class="table table-striped table-bordered">
+    <tr>
+        <th></th>
+        <th>AppMap </th>
+        <th>Profiler</th>
+        <th>Exception reporter</th>
+        <th>Debugger</th>
+        <th>APM / Telemetry</th>
+    </tr>
+    <tr>
+        <td>Primary focus</td>
+        <td>Your code<br> Parameters and return values<br> I/O<br> Log statements<br> Execution stack<br> Timing data<br> Exceptions</td>
+        <td>All code (your code + dependencies)<br> Execution stack<br> Timing data</td>
+        <td>Exceptions<br> Execution stack </td>
+        <td>All code<br> Parameters and return values<br> Execution stack<br> Exceptions</td>
+        <td>I/O<br> Log statements<br> Timing data<br> Your code (limited)</td>
+    </tr>
+    <tr>
+        <td>Environment</td>
+        <td>development, test, staging, CI</td>
+        <td>development, staging </td>
+        <td>staging, production</td>
+        <td>development</td>
+        <td>production</td>
+    </tr>
+</table>
+
+
+To summarize, AppMap is designed primarily to record _full details of your code_, including _parameters and return values_, as well as _I/O_ (especially _SQL_ and _HTTP client requests_), it includes _log statements_, the _execution stack_, _timing information_, and _exceptions_. It captures all of this with minimal configuration. It’s designed primarily for non-production environments.
+
+## appmap.yml configuration
+When you start your app with the AppMap agent enabled, it reads a configuration file called appmap.yml. This file serves several basic purposes. It tells the AppMap agent:
+
+* Which code to record
+* Where to write the AppMap Data.
+
+And it also tells other AppMap tools:
+* The project name
+* The language name
+* Where the AppMap Data is located
+
+**Note:** In most environments, a default appmap.yml will be auto-generated by the AppMap agent if none exists.
+
+### Specifying which code to record
+To get started, you just provide the top-level package names or directories containing the code you want to record. For a non-compiled language like Ruby, Python, or Node.js, it’s a directory list like `[ app]` or `[ src, lib ]`. For Java, it’s a package prefix like `org.mycorp`. 
+
+Going beyond this basic, initial configuration, you have fine-grained control over which code to record. You can choose to record selected dependency libraries or packages. You can also include or exclude specific packages, classes and/or functions. And you can apply custom “labels” to any function, in order to organize the code into functional groups and to facilitate reasoning and analysis.
+
+## Recording methods
+The AppMap agent can be enabled in any environment, and configured to record selected code. There are several variants of this basic model that are commonly used to acquire AppMap Data for specific use cases.
+
+### Test case recording
+AppMap provides specialized support for recording test cases. When you run your test cases in a supported framework (there are many - see the [language agent reference](/docs/reference) for details), a separate AppMap Diagram is created for each test case. AppMap Diagrams created from tests cases have some distinct features:
+
+* Each AppMap file is named for the test case, and stored in a folder called `$appmap_dir/$test_framework`
+* The test framework name and version are stored in the AppMap.
+* The test case name, file name and line number are stored in the AppMap.
+* The test status (`succeeded` or `failed`) and any test failure message are stored in the AppMap.
+
+Recording the test suite of an application is a good way to quickly obtain a lot of data about an application. And because test cases work the same way for each build, recording test cases is also a good way to compare the behavior of application code across versions.
+
+### Requests recording
+For web applications, AppMap can be configured to record an AppMap for each HTTP server request handled by the app. This is a great way to collect data interactively. Just start the application with the AppMap language agent enabled, and start interacting with the app - manually, or using QA scripts or an API testing tool like Postman. AppMap Data is generated continuously as the application handles requests.
+
+### Remote recording
+Remote recording is similar to requests recording, in that:
+* It’s for web applications
+* It makes AppMap Data as the application handles requests
+
+But unlike requests recording, you control the boundaries of the AppMap, each AppMap can contain more than one HTTP server request, and it will also contain non-HTTP activity such as background jobs. To start a remote recording, you send an HTTP command to the AppMap agent running inside your application’s web stack to start recording. From that point on, everything that happens inside the application is recorded, until you send the “stop” command.
+
+### Code block recording
+Some language agents enable you to make an AppMap by adding a simple code snippet to your code. This gives you total control over what’s recorded. The only downside of this is that you need access to the source code - which is not required by other recording methods.
+
+### Process recording
+Process recording is something of a last resort, when other recording methods aren’t available. When you run your application with process recording enabled, _everything_ that happens in the code (as configured by the appmap.yml) is recorded, from process startup to shutdown. 
+
+## About AppMap files
+AppMap Data is ordinary JSON files. As you record AppMap Data with test case recording, requests recording, or process recording, these JSON files are generated and written to the filesystem. The default location for AppMap Data is `tmp/appmap`, relative to the process working directory. Be sure that you know that the working directory of the application server is! You’ll need to know this to find and open your AppMap Diagrams.
+
+When you use remote recording, the HTTP “stop” command responds with the AppMap in the response payload. It’s up to the client to decide where to write the file. For example, you can start and stop a remote recording using cURL, and write the output of the “stop” command to a file of your choosing. 
+
+When you use code block recording, it’s up to you in your code snippet to write the AppMap to a file. Naturally, you can direct the data anywhere you please.
+
+AppMap files conform to the [AppMap specification](https://github.com/getappmap/appmap), which is freely available on GitHub. 
+
+## Running in containers
+You can make AppMap Data while running your application in a container. From the AppMap standpoint, there is really no difference between running in a container and running in any other environment. There are just a couple of basic considerations:
+* The AppMap file will be written to the filesystem of the container. To make it available to the host, you should either use a volume mount to the `$appmap_dir` (typically, `tmp/appmap`), or copy the AppMap Data out of the container after the recording is complete.
+* If you are using remote recording, your application web port should be exposed to the host, so that you can send the HTTP start and stop commands. You’ll need this anyway, in order to access your application’s web UI or API from the host.
+
+## Viewing AppMap Diagrams
+AppMap includes open-source UI tools to display AppMap Data as visual diagrams. Built-in diagrams include:
+
+* Dependency map
+* Sequence diagram
+* Trace view
+* Flame graph
+
+These diagrams are integrated together in the AppMap UI, and fully interactive. The data can be organized, selected, and filtered by the user. This makes the user interface much better suited for code investigation than a static diagram image. It’s also much more scalable, because the diagrams can be tuned to reveal specific information and hide extraneous data.
+
+### IDE extensions
+The AppMap extensions for VSCode and JetBrains include a file association for AppMap Data. Just click on an AppMap file, and it will be opened graphically in the code editor. The diagram is fully linked to source code within the IDE.
+
+### Hosting an AppMap viewer
+The AppMap Diagrams are published as an open source library on [NPM](https://www.npmjs.com/package/@appland/appmap). If you want to provide a centralized service to open AppMap Diagrams in the browser, you can just serve [appmap.html](https://www.npmjs.com/package/@appland/appmap?activeTab=code) from any web server. Provide a URL to the AppMap Data using the `appmap` parameter - for example: `http://myappmapserver/appmap.html?appmap=https://<appmap-url>`.
+
+### Exporting AppMap Data
+The AppMap sequence diagram can be exported to SVG or PlantUML. Consult the [diagrams reference](/docs/guides/using-appmap-diagrams.html#sequence-diagram) for details.

package/built/docs/setup-appmap-in-your-code-editor/index.md

@@ -0,0 +1,25 @@
+---
+layout: docs
+title: Docs - AppMap in your Code Editor
+description: "Learn to set up and navigate AppMap in your code editor efficiently. Explore features like generating AppMap Data from tests and remote recording."
+toc: true
+redirect_from: [/docs/your-first-15-minutes-with-appmap/, /docs/code-editor-extensions/,/docs/code-editor-extensions/appmap-for-vs-code, /docs/code-editor-extensions/appmap-for-jetbrains]
+---
+
+
+# Set Up AppMap in your Code Editor
+
+<p class="alert alert-info">
+If at any point you would like some help, <a href="/slack">join us in Slack</a>!
+You'll find the AppMap team there, along with other AppMap users.
+</p>
+
+* [How AppMap Works](/docs/setup-appmap-in-your-code-editor/how-appmap-works)
+* [Add AppMap to your Code Editor](/docs/setup-appmap-in-your-code-editor/add-appmap-to-your-code-editor)
+* [Generate AppMap Data from Tests](/docs/setup-appmap-in-your-code-editor/generate-appmap-data-from-tests)
+* [Generate AppMap Data with Remote Recording](/docs/setup-appmap-in-your-code-editor/generate-appmap-data-with-remote-recording)
+* [Generate AppMap Data with Request Recording](/docs/setup-appmap-in-your-code-editor/generate-appmap-data-with-request-recording)
+* [Navigating AppMap Diagrams](/docs/setup-appmap-in-your-code-editor/navigating-appmap-diagrams)
+* [Navigating Code Objects](/docs/setup-appmap-in-your-code-editor/navigating-code-objects)
+* [Runtime Analysis](/docs/setup-appmap-in-your-code-editor/appmap-analysis)
+* [Runtime Analysis](/docs/setup-appmap-in-your-code-editor/appmap-analysis)

package/built/docs/setup-appmap-in-your-code-editor/navigating-appmap-diagrams.md

@@ -0,0 +1,59 @@
+---
+layout: docs
+title: Docs - AppMap in your Code Editor
+description: "Learn to navigate AppMap Diagrams effectively. Discover Dependency and Trace views to enhance code understanding and execution analysis."
+name: Navigating AppMap Diagrams
+setup-appmap-ide: true
+step: 6
+redirect_from: [/docs/your-first-15-minutes-with-appmap/navigating-appmaps, /docs/setup-appmap-in-your-code-editor/navigating-appmaps]
+---
+
+# Navigating AppMap Diagrams
+
+{% include vimeo.html id='916048549' %}
+
+---
+
+**In this video**  
+We walk through how to navigate your AppMap Diagrams. We'll dive into the various sections of the AppMap view, such as the dependency view and the trace view. And we'll show you how to better understand your code execution by traversing your AppMap and how to link back to your code
+
+**Links mentioned**  
+[Rails Sample Application](https://github.com/land-of-apps/sample_app_6th_ed/tree/codespaces-devcontainer)  
+[Appland VS Code and JetBrains Extension](https://appmap.io/get-appmap)
+
+---
+
+## Follow along
+
+Welcome to AppMap. If you’ve been following along this tutorial, you should have AppMap Diagrams generated from either your [test cases](/docs/setup-appmap-in-your-code-editor/generate-appmap-data-from-tests.html) or from a [remote recording](/docs/setup-appmap-in-your-code-editor/generate-appmap-data-with-remote-recording.html). This tutorial assumes you have at least one AppMap created, but ideally more than one. As always you can clone this [sample project repository from Github](https://github.com/land-of-apps/sample_app_6th_ed/tree/codespaces-devcontainer) and follow along. 
+
+In this tutorial, we are going to dive into our AppMap Diagrams, show you how to navigate them and how to connect an AppMap back to your code. 
+
+We’ll start by opening the AppMap extension installed in our VS Code editor. You’ll see a listing of all your AppMap Diagrams in your left hand column. From here, we can select on an AppMap to open it. 
+
+<img class="video-screenshot" src="/assets/img/docs/first-fifteen-minutes/appmap-view.webp"/>
+
+There are 3 main sections to an AppMap. The left hand column will show you HTTP requests, labels, either automatically generated by AppMap or manually extended via simple code comments within your code base, a list of all the packages, classes, functions, and SQL queries associated with this AppMap. 
+
+You can search across all of these code objects within this AppMap in the search bar and you can click the link to open the test case that generated this AppMap.
+
+## Dependency View
+
+In the right hand section, you’ll see the Dependency view which shows a visual representation between the code objects, functions, and SQL queries. Click on the “information” icon to see a full legend for the code objects and data values. 
+
+<img class="video-screenshot" src="/assets/img/docs/first-fifteen-minutes/appmap-legend.webp"/>
+
+In the top section, you’ll see a filter icon, click on this icon to help you declutter and focus your AppMap, which is particularly useful for larger and more complex maps. You can hide any unlabeled function, or hide specific packages, classes, or functions. For example, if I wanted to hide all of my logging functions from this AppMap, I can simply search for the `package:logger` and hide this from my view. 
+
+
+<img class="video-screenshot" src="/assets/img/docs/first-fifteen-minutes/appmap-filter-view.webp"/>
+
+## Trace View
+
+If we click on one of the classes, such as `LoggedInHelper`, and select on the function, we can click on the event and go to the trace view of this AppMap. 
+
+The trace view shows a hierarchical tree structure of what happened within that particular web request. If I keep clicking on `caller` i will get to the root which is the http server request. I can see the controller and the return status. 
+
+<img class="video-screenshot" src="/assets/img/docs/first-fifteen-minutes/appmap-trace-view.webp"/>
+
+I can see the values of the variables, parameters, and return values as the code traversed this test case.

package/built/docs/setup-appmap-in-your-code-editor/navigating-code-objects.md

@@ -0,0 +1,67 @@
+---
+layout: docs
+title: Docs - AppMap in your Code Editor
+description: "Explore AppMap's Code Objects view to navigate code functions, HTTP requests, and SQL queries across all AppMap Diagrams."
+name: Navigating Code Objects
+setup-appmap-ide: true
+step: 7
+redirect_from: [/docs/your-first-15-minutes-with-appmap/navigating-code-objects]
+---
+
+# Navigating Code Objects
+{% include vimeo.html id='916048582' %}
+
+---
+
+**In this video**  
+Dive into the Code objects view, a high level view of code functions,  HTTP requests, and SQL queries across the entire set of your AppMap Diagrams and learn how to locate and navigate to an AppMap from code reference pins on your code functions. 
+
+**Links mentioned**  
+[Rails Sample Application](https://github.com/land-of-apps/sample_app_6th_ed/tree/codespaces-devcontainer)
+
+---
+## Follow along
+
+Welcome to AppMap, In this tutorial we will be diving into advanced navigation of AppMap Diagrams - the Code Objects view. We’ll answer the question, “What if I have a lot of AppMap Diagrams and I don’t know where exactly to look?” 
+
+In this view, we collect all the different code functions and  HTTP server requests and SQL queries all into one list. Every request, query, and function call that occurs anywhere in the whole set of AppMap Diagrams will be in this list. 
+
+## Code Objects View
+
+There are three sections to the Code Objects view. The first section is the Code view, this will show packages, classes, and functions, it will show the framework code as well as my code, essentially everything present within your AppMap Diagrams. We can click on a function to navigate directly to the code. In this example, I’ll navigate to my Application controllers, and view the Microposts controller. This will take me directly to the code for this function. This is a great way to see more comprehensively what you have across your code base. 
+
+<img class="video-screenshot" src="/assets/img/docs/first-fifteen-minutes/code-objects-view.webp"/>
+
+## HTTP Routes List
+
+In the HTTP Service request list, you can see basically a mini spec file showing you what routes are available across all of your AppMap Diagrams. 
+
+If this route only exists in a single AppMap, you’ll be taken directly to the AppMap for this request, but if the route exists in multiple diagrams you’ll get a VScode picker to choose which one to open. 
+
+Here is this route, and here it is shown in a trace view, and you’ll see the status code for that is 302 which is a redirect.
+
+<img class="video-screenshot" src="/assets/img/docs/first-fifteen-minutes/code-objects-trace-view.webp"/>
+
+## SQL Query List
+
+The final section of Code Objects is a list of all the SQL queries across your AppMap Diagrams. Just like before, if you click into it and it is unique across your AppMap set then you’ll be sent directly to the AppMap or the quick picker will prompt you to open one. 
+
+The code view is a handy way to navigate your code base, similar to the file view you’d get in VS Code except this code view will only show the code that participated in your test case recordings or remote recordings.
+
+But it’s more common to simply be navigating within the code itself. So what if you want to get to the AppMap Diagram from within the code?
+
+## Opening AppMap Diagrams from code object names
+
+The command “Open code object in AppMap” can be used to find and open all the AppMap Diagrams that contain a particular code object (package, class, or function name).
+
+<img class="video-screenshot" src="/assets/img/docs/first-fifteen-minutes/code-object-command-palette.webp"/>
+
+To get here in VS Code open the command palette. 
+
+On Mac:
+`Shift + Command + P`
+
+On Windows/Linux:
+`Ctrl + Shift + P`
+
+I can then search for the `UsersController#show` function - if it's in a single AppMap I’ll get taken directly to that AppMap. If it exists in more than one you’ll get the quick picker to choose which one you want.

package/built/docs/unused_for_now_index.html

@@ -0,0 +1,11 @@
+---
+layout: home
+title: AppMap - For Developers
+---
+
+<div id="home-body">
+
+  {% include docs/compact_hero.html %}
+
+  {% include contact_us_cta.html %}
+</div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appland/appmap",
-  "version": "3.146.0",
+  "version": "3.147.0",
   "description": "",
   "bin": "built/cli.js",
   "engines": {
@@ -22,7 +22,7 @@
     "build": "tsc && yarn build:html && yarn build:doc",
     "watch": "tsc --watch",
     "build:html": "ts-node esbuild.html.ts",
-    "build:doc": "cd ../../docs && rsync -av --include='appmap-overview.md' --include='navie/***' --include='diagrams/***' --include='get-started-with-appmap/***' --exclude='*' --delete . ../packages/cli/built/docs",
+    "build:doc": "rsync -av --delete ../../docs built/ && rm -f built/docs/reference/appmap-agent-js.md",
     "start": "ts-node src/cli.ts",
     "build-native": "yarn build && ./bin/build-native"
   },