Correlations: Docs update (#76508)

* First draft

* Update docs

* Update docs

* Fix a typo

* Update docs/sources/administration/correlations/use-correlations-editor-in-explore/index.md

Co-authored-by: Giordano Ricci <me@giordanoricci.com>

* Update docs/sources/administration/correlations/use-correlations-editor-in-explore/index.md

Co-authored-by: Giordano Ricci <me@giordanoricci.com>

* Update docs/sources/administration/correlations/use-correlations-editor-in-explore/index.md

Co-authored-by: Giordano Ricci <me@giordanoricci.com>

* Update docs/sources/administration/correlations/use-correlations-editor-in-explore/index.md

Co-authored-by: Giordano Ricci <me@giordanoricci.com>

* Update docs/sources/administration/correlations/use-correlations-editor-in-explore/index.md

Co-authored-by: Giordano Ricci <me@giordanoricci.com>

* Update docs/sources/administration/correlations/use-correlations-editor-in-explore/index.md

Co-authored-by: Giordano Ricci <me@giordanoricci.com>

* Update docs/sources/administration/correlations/use-correlations-editor-in-explore/index.md

Co-authored-by: Giordano Ricci <me@giordanoricci.com>

* Update docs/sources/administration/correlations/use-correlations-editor-in-explore/index.md

Co-authored-by: Giordano Ricci <me@giordanoricci.com>

* Fix linting

* Fix a typo

* Update how correlations works in logs panel

* Add more context to results field

---------

Co-authored-by: Giordano Ricci <me@giordanoricci.com>

docs/sources/administration/correlations/create-a-new-correlation/index.md

@@ -13,6 +13,25 @@ weight: 40
 
 Make sure you have permission to add new correlations. Only users with write permissions to data sources can define new correlations.
 
+## Create a correlation in Explore's Correlations Editor
+
+1. Go to Explore page.
+1. Select a data source that you would like to be [the source data source]({{< relref "/docs/grafana/latest/administration/correlations/correlation-configuration#source-data-source-and-result-field" >}}) for a new correlation.
+1. Run a query producing data in [a supported visualization]({{< relref "/docs/grafana/latest/administration/correlations/#correlations" >}}).
+1. Click "+ Add" button in the top toolbar and select "Add correlation" (you can also select "Correlations Editor" from the [Command Palette]({{< relref "/docs/grafana/latest/search/#command-palette" >}})).
+1. Explore is now in Correlations Editor mode indicated by a blue border and top bar. You can exit Correlations Editor using the Exit button in the top bar.
+1. The visualization is enriched with links allowing to create new correlations. Links are attached to the data that you can use to build a new query:
+   - Logs: links are displayed next to field values inside log details for each log row
+   - Table: every table cell is a link
+1. Click on a link to begin adding new correlation. Links are associated with a field that will be used as [a results field of a correlation]({{< relref "/docs/grafana/latest/administration/correlations/correlation-configuration" >}}). This means the correlation link will be created on the link you select once the correlation is saved.
+1. Explore opens a split view. Use the right pane to setup [the target query source of the correlation]({{< relref "/docs/grafana/latest/administration/correlations/correlation-configuration#target-query" >}}).
+1. Build target query using [variables syntax]({{< relref "/docs/grafana/latest/dashboards/variables/variable-syntax" >}}) with variables from the list provided at the top of the pane. The list contains sample values from the selected data row.
+1. Provide optional label and description. Label is used as the name of the link inside the visualization. It can contain variables.
+1. Click "Save" button in the top bar to save the correlation and exit Correlations Editor mode.
+1. The link used to create the correlation will be replaced with a data link in each row. The variables will be dynamically replaced with values from a selected row.
+
+Please check [an example]({{< relref "/docs/grafana/latest/administration/correlations/use-correlations-editor-in-explore" >}}) to see how to create a sample correlation using test data source.
+
 ## Create a correlation in Administration page
 
 1. Go to the Administration section in Grafana.

docs/sources/administration/correlations/use-correlations-editor-in-explore/index.md

@@ -0,0 +1,57 @@
+---
+labels:
+  products:
+    - enterprise
+    - oss
+title: Use Correlations Editor in Explore
+weight: 70
+---
+
+# Use Correlations Editor in Explore
+
+## Before you begin
+
+This example shows how to create a correlation using Correlations Editor in Explore.
+
+Correlations allow you to use results of one query to run a new query in any data source. In this example you will run a query that renders tabular data. The data will be used to run a different query that yields a graph result.
+
+Please make sure you have setup up [a test data source]({{< relref "/docs/grafana/latest/datasources/testdata/#testdata-data-source" >}}).
+
+## Create a new correlation
+
+1. Go to Explore.
+1. Select `test data source`.
+1. Click on "+ Add" dropdown and select "Add correlation" button.
+1. Explore is now in Correlations Editor mode indicated by a blue border.
+1. Select scenario: `CSV File`.
+1. Select file: `population_by_state.csv`.
+1. Note that each cell is a link that you can click on to start creating a new correlation.
+
+   {{< figure src="/static/img/docs/correlations/screenshot-correlations-editor-source-10.2.png" max-width="600px" caption="Selecting the source of a correlation" >}}
+
+1. Create new correlation that attaches a data link in the `State` column: click on any cell in the `State` column, e.g. "California".
+1. Explore opens in split view. Select the same data source you selected in the left pane.
+1. The helper above the query editor contains all available variables you can use the target query. Variables contain all data fields (table columns) from the selected row.
+1. Select Scenario: `CSV Metric Values`.
+1. In the Query Editor's `String Input` field provide variables with population values for each year: `${1980},${2000},${2020}`. This will generate a graph using variable values.
+1. In the Query Editor's `Alias` field, write `${State}`
+
+   {{< figure src="/static/img/docs/correlations/screenshot-correlations-editor-target-10.2.png" max-width="600px" caption="Setting up the target of a correlation" >}}
+
+1. Run a query to see that it produces a graph using sample values from the variables.
+1. Save the correlation using "Save" button in the top.
+
+## Test a newly created correlations
+
+1. Once the correlation is saved Explore will exit Correlations Editor automatically and re-rerun the query in the left pane.
+1. Click on a state name. Note how values from the row are inserted into the query on the right and the graph changes using the values for each row. The query is rerun with updates values every time you click on a state name.
+
+   {{< figure src="/static/img/docs/correlations/screenshot-correlations-example-link-10.2.png" max-width="600px" caption="Result of clicking on a data link" >}}
+
+You can apply the same steps to any data source. Correlations allow you to create links in visualizations to run dynamic queries based on selected data. In this example we used data returned by a query to build a new query generating different visualization using the same data source. However, you can create correlations between any data sources to create custom exploration flows.
+
+## Correlations in the logs panel
+
+Correlations links in the logs panel show slightly differently than the table panel. When you enter the Correlation Editor mode when looking at logs, you will need to expand a log line to see the button that serves as the correlation link.
+
+{{< figure src="/static/img/docs/correlations/screenshot-correlations-editor-logs-10.2.png" max-width="600px" caption="Logs panel in the Correlations Editor" >}}