Update documentation for workflows and data mapping. (#47)

* Fix nav links.

* Update workflow docs.

* Update data mapping.

* Add request trigger.

* Fix webhook typo

Author: shawnmclean

docs/workflows/data_mapping.mdx

@@ -5,7 +5,93 @@ sidebar_label: Data Mapping
 slug: /workflows/data_mapping
 ---
 
-import Image from "@theme/IdealImage";
-import workflowImg from "./images/data-mapping-workflow.png";
+Steps can be configured by setting their property values. Property values can be configured to map data from previous step events or by setting the values directly.
 
-<Image height={600} img={workflowImg} />
+All steps will have access to a context containing a list of all the steps, their events, and the event data. This behavior allows you to pass data around, transform, make decisions, etc.
+
+## Context
+
+Accessing data on this context is done like this: `{{step-name.event-name.property}}` where:
+
+- `step-name` - The name you gave to a step.
+- `event-name` - The name of the event for that given step that was fired.
+- `property` - The property of the event data.
+
+:::info
+Context data are immutable and cannot be changed by any steps.
+:::
+
+## Dataflow
+
+We will use a simple example of a workflow to demonstrate how data flows between steps:
+
+![The stages of a Workflow](./images/data-mapping-workflow.png)
+
+The `ClickCounter` will keep track of how many times the user clicks a specified element. This step also exposes an `OnClick` event that will pass the counter to the next step.
+
+This event data has the following schema:
+
+```
+{
+  Counter: integer
+}
+```
+
+For the sake of showing how the Workflow builds the context, we will use 2 `ClickCounter` sequentially that will sent that data to a Webhook step.
+
+### Single Execution
+
+The following shows a data flow with the shape of the data being passed to each step when their events are fired:
+
+![Dataflow sequential](./images/data-mapping-execution-sequential.png)
+
+Take note of the schema:
+
+- When **ClickerA** is clicked, it passes a context of the following data:
+
+```json
+{
+  "ClickerA": {
+    "OnClick": {
+      "Counter": 1
+    }
+  }
+}
+```
+
+- When **ClickerB** is clicked, it passes the following:
+
+```json
+{
+  "ClickerA": {
+    "OnClick": {
+      "Counter": 1
+    }
+  },
+  "ClickerB": {
+    "OnClick": {
+      "Counter": 1
+    }
+  }
+}
+```
+
+The new event and its data was added to the context. So the webhook step now has access to both event data.
+
+### Multiple Executions
+
+The following shows a data flow where the event of a step **ClickerA** is fired twice:
+
+![Dataflow multiple](./images/data-mapping-execution-multiple.png)
+
+This dataflow tells us that **ClickerA** then **ClickerB** was clicked. This was repeated two times.
+
+Here we can see that the first try, the context that went to the webhook had `ClickerA.OnClick.Counter: 1`.
+On the second set of clicks, the context for **ClickerA** has changed to `ClickerA.OnClick.Counter: 2` but **ClickerB** hasn't changed. This is because all executions of other steps are disposed of when the event is fired twice.
+
+**ClickerA** was never disposed of, therefore the state changed and the context was updated.
+**ClickerB** was disposed of when **ClickerA** was clicked, so the second pass was a brand new step, which is why the counter value is still **1**.
+
+:::caution
+When an event is fired multiple times, all previously executed steps will be disposed of in favor of executing new steps.
+:::

docs/workflows/images/data-mapping-execution-multiple.png

@@ -4,17 +4,29 @@ title: Workflows Overview
 slug: /workflows
 ---
 
-import Image from "@theme/IdealImage";
-import workflowImg from "./images/workflow-example.png";
-
 Workflows make it easy to run various actions that should happen for an experiment. Workflows are made up of one or more steps that can be executed by one or more trigger events.
 
-<Image height={500} img={workflowImg} />
-
-### Triggers
+#### Triggers
 
 Triggers are a a list of events that occurs in the application to start the workflow. For example, a trigger can be configured to fire when the user clicks on an element on a specific page. Please see [Triggers Overview documentation](./workflows/triggers) for more details.
 
-### Steps
+#### Steps
 
 Steps are a set of actions that are executed after a workflow is triggered. Please see [Steps Overview documentation](./steps)
+
+### The stages of a Workflow
+
+You can build your own experiments by composing a workflow whose complexity can range from a simple painted door to complex multi-variance test that collects a wide variety of quantitative and qualitative metrics.
+
+The experiment below is configured to collect feedback when the checkout button is clicked on the checkout page.
+
+The workflow can be configured so that if the user has either canceled or submit the feedback, the default order behavior will continue.
+:::note
+This will work for navigating away with anchor tags or form submissions.
+:::
+
+![The stages of a Workflow](./images/workflow-example.png)
+
+The workflow above contains 2 triggers that must match before the workflow begins executing the steps. The two triggers represents clicking a specific element while on a specified page.
+
+The workflow contains 2 steps. A Microsurvey step that will complete the workflow if it is canceled or it will pass the collected data to a Webhook step. The webhook step will attempt to send this data to a url and will complete the workflow if the request failed or succeed.

docs/workflows/images/data-mapping-execution-sequential.png

@@ -25,6 +25,9 @@ The available triggers for elements are:
 
 1. `ElementClick`
 2. `ElementMouseOver`
+3. <a id="request-trigger-link" href="#">
+     Request Trigger
+   </a>
 
 ## Page Interactions
 

docs/workflows/images/data-mapping-workflow.png

@@ -15,8 +15,8 @@ module.exports = {
       "@docusaurus/plugin-ideal-image",
       {
         quality: 70,
-        max: 1030, // max resized image's size.
-        min: 640, // min resized image's size. if original is lower, use that size.
+        max: 640, // max resized image's size.
+        min: 400, // min resized image's size. if original is lower, use that size.
         steps: 2, // the max number of images generated between min and max (inclusive)
       },
     ],
@@ -40,19 +40,22 @@ module.exports = {
       },
       items: [
         {
-          href: "https://www.samelogic.com/docs/tutorials",
-          label: "Tutorials",
+          type: "doc",
           position: "left",
+          docId: "tutorials/getting-started",
+          label: "Tutorials",
         },
         {
-          href: "https://www.samelogic.com/docs/howto",
-          label: "How To Guides",
+          type: "doc",
           position: "left",
+          docId: "howto/getting-started",
+          label: "How To Guides",
         },
         {
-          href: "https://www.samelogic.com/docs/release-notes",
-          label: "Release Notes",
+          type: "doc",
           position: "left",
+          docId: "release_notes/releases",
+          label: "Release Notes",
         },
         {
           href: "https://www.samelogic.com",