DOCSP-31519 Query Explain Plan UI Change (#528)

* DOCSP-31519 Query Explain Plan UI Change

* wording

* typos + learn more

* image sizing

* image sizing

* wording

* SO feedback

Author: ajhuh-mdb

source/images/compass/explain-tree.png

@@ -12,47 +12,69 @@ View Query Performance
    :depth: 1
    :class: singlecol
 
-The :guilabel:`Explain Plan` tab displays the execution plan for a
-query.
+To help you better understand the performance of your query, you can view 
+your query's explain plan. 
 
-To view the execution plan for a query filter, click on the collection
-on the left hand pane, then click :guilabel:`Explain Plan`.
+About This Task 
+---------------
 
-.. figure:: /images/compass/query-plan.png
-  :figwidth: 696px
-  :alt: Query plan
+On the :guilabel:`Explain Plan` modal, you can view the explain stages as a 
+:guilabel:`Visual Tree`, where each query operation appears as a node on the 
+tree. You can also view the explain details in raw JSON format by selecting 
+the :guilabel:`Raw Output` view.
 
-Visual Tree
------------
+The explain plan includes a :guilabel:`Query Performance Summary` with 
+information on the execution of your query such as: 
 
-You can view the explain stages in a tree format. Each stage of the
-pipeline appears as a node on the tree. This makes sharded cluster
-outputs easier to understand and visualize.
+- Execution time 
 
-.. figure:: /images/compass/explain-tree.png
-  :figwidth: 400px
-  :alt: Explain tree
+- The number of returned documents 
 
-Raw JSON
---------
+- The number of examined documents 
 
-You can also view the explain details in raw JSON format:
+- The number of examined index keys
 
-.. figure:: /images/compass/query-plan3.png
-  :figwidth: 600px
-  :alt: Query plan JSON
-
-To learn more about execution plans, see the
-:manual:`MongoDB documentation </tutorial/analyze-query-plan/>`.
-
-Limitations
------------
-
-- The :guilabel:`Explain Plan` tab is not available if you are connected
+.. note:: 
+  
+  The :guilabel:`Explain Plan` is not available if you are connected
   to :atlas:`Data Lake </data-lake>`.
 
-- The :guilabel:`Explain Plan` tab is not available for
-  :manual:`aggregation commands </aggregation/>`. Instead,
-  you can utilize the :manual:`.explain()
-  </reference/method/db.collection.explain>` method from :doc:`Embedded
-  MongoDB Shell </embedded-shell>` in |compass-short|.
+Steps 
+-----
+
+.. procedure:: 
+   :style: normal
+
+   .. step:: Click the Explain button
+
+      In the query bar, click the :guilabel:`Explain` button to open the 
+      modal.
+      
+      .. figure:: /images/compass/query-plan.png
+         :figwidth: 696px
+         :alt: Query plan
+
+   .. step:: Select a query operation
+      
+      By default, the explain stages are are shown as a :guilabel:`Visual Tree`.
+      Each query operation appears as a node on the tree.
+
+      For more detailed execution information about the query operation, click 
+      the corresponding node.
+
+      For example, the following explain plan provides detailed information on 
+      a query that filters for ``{ title : "Jurassic Park" }``:
+      
+      .. figure:: /images/compass/explain-tree.png
+         :alt: Detailed Visual Tree view
+         :figwidth: 696px
+         
+   .. step:: (Optional) Select the :guilabel:`Raw Output` view. 
+      
+      To view your full explain plan as raw JSON, select the 
+      :guilabel:`Raw Output` view. 
+
+Learn More
+----------
+
+- :manual:`Analyze Query Performance </tutorial/analyze-query-plan/>`