create annotations page (#2068)

* create annotations page and update meta/card

* add annotations content

* add annotation images

* remove reference to Annotations from Insights

Author: myronkaifung

pages/docs/features.mdx

@@ -8,6 +8,7 @@ import { Callout, Cards } from 'nextra/components'
 
 <Cards>
   <Cards.Card icon title="Alerts" href="/docs/features/alerts" />
+  <Cards.Card icon title="Annotations" href="/docs/features/annotations" />
   <Cards.Card icon title="Embeds" href="/docs/features/embeds" />
   <Cards.Card icon title="Chart Customization" href="/docs/features/chart-customization" />
   <Cards.Card icon title="Custom Buckets" href="/docs/features/custom-buckets" />

pages/docs/features/_meta.ts

@@ -1,5 +1,6 @@
 export default {
     "alerts": "Alerts",
+    "annotations": "Annotations",
     "embeds": "Embeds",
     "chart-customization": "Chart Customization",
     "custom-buckets": "Custom Buckets",

pages/docs/features/annotations.mdx

@@ -0,0 +1,77 @@
+import { Steps, Callout } from 'nextra/components'
+
+# Annotations
+
+## Overview
+
+Annotations add valuable context to your reports by linking notes to specific dates. Use them to highlight events such as product launches, marketing campaigns, or data anomalies, so viewers can clearly understand what influenced the metrics.
+
+You can view Annotations directly on time-series charts and in the Annotations side-panel across all reports.
+
+## Adding Annotations
+
+<Steps>
+
+{<h3>From a time-series Insights report, create Annotations from the bottom of the chart.</h3>}
+
+Charts with time intervals (such as line, stacked line, column, and stacked column charts) are time-series charts and support Annotations.
+
+Hover over the horizontal axis to locate the time interval, then click the “+” button to create an annotation for that point in time.
+
+![annotations1](/annotations1.png)
+
+{<h3>Alternatively, open the Annotations side panel to create an annotation.</h3>}
+
+Select the **Annotations** tab (above the query builder) and click the “+” button to add a new annotation.
+
+![annotations2](/annotations2.png)
+
+{<h3>Select a date and time, then enter a description.</h3>}
+
+Add one or more tags to categorize the annotation.
+
+![annotations3](/annotations3.png)
+
+<Callout type="info">
+    Use tags consistently (e.g., Launches, Outages, Holidays, and even Team names) so it is easy to filter and spot patterns.
+</Callout>
+
+</Steps>
+
+## Viewing Annotations
+
+Annotations appear as markers directly on the chart. Hover over a marker to view its details.
+
+For example, in the chart below, you can see 1 annotation in March, 4 in May, and 2 in July.
+
+![annotations4](/annotations4.png)
+
+### Annotations Side-panel
+
+Open the Annotations side panel (available in all reports) to view all annotations for your report's date range in one place. Select the **Annotations** tab (above the query builder) to open the side-panel.
+
+From the side panel, you can:
+- **Browse** all annotations within your report's date range.
+- **Hide/Show** annotations
+- **Sort** by date
+- **Filter** Annotations by tags
+
+![annotations5](/annotations5.png)
+
+When you save a report, Mixpanel also saves your current annotation filters. The report will then display only the annotations that match your selected tag filters.
+
+## Editing and Deleting Annotations
+
+Hover over any existing annotations to see available actions. Click on the "pencil" button to edit the description and add/remove tags. Click the "trash" button to delete the annotation.
+
+![annotations6](/annotations6.png)
+
+<Callout type="warning">
+    Annotations apply globally across the project. Any edits or deletions affect not only the current report but all reports in the project.
+</Callout>
+
+## Collaboration and Visibility
+
+- Anyone can create annotations and tags, and each annotation displays its creator.
+- Annotations are visible across all reports in the project.
+- Use tags and filters to control which annotations appear at the report level.

pages/docs/reports/insights.mdx

@@ -56,19 +56,19 @@ Depending on the type of behavior selected, Insights will default to a different
 
 ![Choose Measurement](/choose-measurement.png)
 
-You can save the metric you built and reuse them in other reports. Select the "..." button in the top right corner of the metric, then click "Save Metric". Note that saving a metric and saving a behavior is different; a saved behavior consists of the events/Funnels/Retention, while a saved metrics consists of the saved behavior and the measurements of the behavior.
+You can save the metric you built and reuse it in other reports. Select the "..." button in the top right corner of the metric, then click "Save Metric". Note that saving a metric and saving a behavior are different; a saved behavior consists of the events/Funnels/Retention, while a saved metric consists of the saved behavior and the measurements of the behavior.
 
 Learn more about [Saved Metrics and Behaviors](/docs/features/saved-metrics-and-behaviors).
 
 ### Step 3: Choose Filters
 
-Filters exclude unwanted data. In this case, we only care about events performed on the iOS platform. Therefore, add a "Operating System" filter, where OS equals "iOS". At this point, your query should look like this:
+Filters exclude unwanted data. In this case, we only care about events performed on the iOS platform. Therefore, add an "Operating System" filter, where OS equals "iOS". At this point, your query should look like this:
 
 ![Choose Filters](/choose-filters.png)
 
 ### Step 4: Choose Breakdowns
 
-Breakdowns segment data into groups. In this case, we want to count sign ups based on users in different cities. Therefore, add a "City" breakdown. At this point, your query should look like this:
+Breakdowns segment data into groups. In this case, we want to count sign-ups based on users in different cities. Therefore, add a "City" breakdown. At this point, your query should look like this:
 
 ![Choose Breakdowns](/choose-breakdowns.png)
 
@@ -303,19 +303,9 @@ Profile metrics allow you to access profile data and visualize your users with f
 
 ### Annotations
 
-To clarify the results in your Insights report, add detailed annotations directly to the line chart. Annotations are tied to a specific date on the chart, rather than a specific data point on the chart.
+To clarify the results in your Insights report, add detailed annotations directly to your time-series charts (such as line, stacked line, column, and stacked columns charts). Annotations are tied to a specific date on the chart, rather than a particular point of data on the chart.
 
-To add an annotation, hover your mouse over the point on the chart you want to annotate, and click the blue **+** button that appears. Enter a description for the annotation, such as a holiday that occurred on that day or the end date of your fiscal year, then click **Save**. If you accidentally selected the incorrect date on the chart, you can edit the date and time of the annotation in this window.
-
-![Annotations 1](/advanced-annotations-1.png)
-
-View an existing annotation by clicking on the number found at the bottom of a report. You will be able to see who submitted the annotation.
-
-![Annotations 2](/advanced-annotations-2.png)
-
-Hover the cursor over the annotation to edit or delete it. Click on the **pencil icon** to edit an annotation, or the **trash icon** to delete an annotation. Add additional annotations to the same date by clicking **Add annotation**.
-
-![Annotations 3](/advanced-annotations-3.png)
+Learn more about [Annotations](/docs/features/annotations).
 
 ### Measurements