fix: filter annotations outside of the scope

Author: izadoesdev

apps/dashboard/components/charts/metrics-chart-with-annotations.tsx

@@ -1,13 +1,13 @@
 'use client';
 
 import { useMemo, useState } from 'react';
+import { toast } from 'sonner';
 import { MetricsChart } from './metrics-chart';
 import { EditAnnotationModal } from './edit-annotation-modal';
 import { trpc } from '@/lib/trpc';
-import { toast } from 'sonner';
 import { usePersistentState } from '@/hooks/use-persistent-state';
-import type { Annotation, ChartContext, CreateAnnotationData, AnnotationFormData } from '@/types/annotations';
 import { ANNOTATION_STORAGE_KEYS } from '@/lib/annotation-constants';
+import type { Annotation, ChartContext, CreateAnnotationData, AnnotationFormData } from '@/types/annotations';
 
 interface MetricsChartWithAnnotationsProps {
 	websiteId: string;
@@ -40,21 +40,20 @@ export function MetricsChartWithAnnotations({
 	onRangeSelect,
 	dateRange,
 }: MetricsChartWithAnnotationsProps) {
-	const createAnnotation = trpc.annotations.create.useMutation();
-	const updateAnnotation = trpc.annotations.update.useMutation();
-	const deleteAnnotation = trpc.annotations.delete.useMutation();
-	
 	const [editingAnnotation, setEditingAnnotation] = useState<Annotation | null>(null);
 	const [isEditing, setIsEditing] = useState(false);
 	const [showAnnotations, setShowAnnotations] = usePersistentState(
-		ANNOTATION_STORAGE_KEYS.visibility(websiteId), 
+		ANNOTATION_STORAGE_KEYS.visibility(websiteId),
 		true
 	);
-	
-	// Build chart context for fetching annotations
+
+	const createAnnotation = trpc.annotations.create.useMutation();
+	const updateAnnotation = trpc.annotations.update.useMutation();
+	const deleteAnnotation = trpc.annotations.delete.useMutation();
+
 	const chartContext = useMemo((): ChartContext | null => {
-		if (!dateRange || !data || data.length === 0) return null;
-		
+		if (!dateRange || !data?.length) return null;
+
 		return {
 			dateRange: {
 				start_date: dateRange.startDate.toISOString(),
@@ -65,8 +64,7 @@ export function MetricsChartWithAnnotations({
 		};
 	}, [dateRange, data]);
 
-	// Fetch annotations for this chart
-	const { data: annotations, refetch: refetchAnnotations } = trpc.annotations.list.useQuery(
+	const { data: allAnnotations, refetch: refetchAnnotations } = trpc.annotations.list.useQuery(
 		{
 			websiteId,
 			chartType: 'metrics' as const,
@@ -77,6 +75,23 @@ export function MetricsChartWithAnnotations({
 		}
 	);
 
+	const annotations = useMemo(() => {
+		if (!allAnnotations || !dateRange) return [];
+
+		const { startDate, endDate } = dateRange;
+
+		return allAnnotations.filter((annotation) => {
+			const annotationStart = new Date(annotation.xValue);
+			const annotationEnd = annotation.xEndValue ? new Date(annotation.xEndValue) : annotationStart;
+
+			return (
+				(annotationStart >= startDate && annotationStart <= endDate) ||
+				(annotationEnd >= startDate && annotationEnd <= endDate) ||
+				(annotationStart <= startDate && annotationEnd >= endDate)
+			);
+		});
+	}, [allAnnotations, dateRange]);
+
 	const handleCreateAnnotation = async (annotation: {
 		annotationType: 'range';
 		xValue: string;
@@ -86,13 +101,8 @@ export function MetricsChartWithAnnotations({
 		color: string;
 		isPublic: boolean;
 	}) => {
-		if (!websiteId) {
-			toast.error('Website ID is required');
-			return;
-		}
-
-		if (!chartContext) {
-			toast.error('Chart context is required');
+		if (!websiteId || !chartContext) {
+			toast.error('Missing required data for annotation creation');
 			return;
 		}
 
@@ -119,9 +129,7 @@ export function MetricsChartWithAnnotations({
 			},
 			error: (err) => {
 				console.error('Failed to create annotation:', err);
-				const errorMessage = err?.message || 'Failed to create annotation';
-				toast.error(`Failed to create annotation: ${errorMessage}`);
-				return errorMessage;
+				return err?.message || 'Failed to create annotation';
 			},
 		});
 
@@ -193,6 +201,7 @@ export function MetricsChartWithAnnotations({
 				onDeleteAnnotation={handleDeleteAnnotation}
 				showAnnotations={showAnnotations}
 				onToggleAnnotations={setShowAnnotations}
+				websiteId={websiteId}
 			/>
 
 			<EditAnnotationModal

apps/dashboard/components/charts/metrics-chart.tsx

@@ -1,4 +1,4 @@
-import { ChartLineIcon, EyeIcon, EyeSlashIcon } from '@phosphor-icons/react';
+import { ChartLineIcon, EyeIcon, EyeSlashIcon, XIcon } from '@phosphor-icons/react';
 import { useAtom } from 'jotai';
 import { useMemo, useState } from 'react';
 import {
@@ -13,16 +13,12 @@ import {
 	XAxis,
 	YAxis,
 } from 'recharts';
-import {
-	Card,
-	CardContent,
-	CardDescription,
-	CardHeader,
-	CardTitle,
-} from '@/components/ui/card';
 import { Switch } from '@/components/ui/switch';
 import { Label } from '@/components/ui/label';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { cn } from '@/lib/utils';
+import { usePersistentState } from '@/hooks/use-persistent-state';
+import { ANNOTATION_STORAGE_KEYS } from '@/lib/annotation-constants';
 import {
 	type ChartDataRow,
 	METRICS,
@@ -120,6 +116,7 @@ interface MetricsChartProps {
 	onDeleteAnnotation?: (id: string) => Promise<void>;
 	showAnnotations?: boolean;
 	onToggleAnnotations?: (show: boolean) => void;
+	websiteId?: string;
 }
 
 export function MetricsChart({
@@ -138,6 +135,7 @@ export function MetricsChart({
 	onDeleteAnnotation,
 	showAnnotations = true,
 	onToggleAnnotations,
+	websiteId,
 }: MetricsChartProps) {
 	const rawData = data || [];
 	const [refAreaLeft, setRefAreaLeft] = useState<string | null>(null);
@@ -146,6 +144,11 @@ export function MetricsChart({
 	const [popupPosition, setPopupPosition] = useState({ x: 0, y: 0 });
 	const [selectedDateRange, setSelectedDateRange] = useState<DateRangeState | null>(null);
 
+	const [tipDismissed, setTipDismissed] = usePersistentState(
+		websiteId ? ANNOTATION_STORAGE_KEYS.tipDismissed(websiteId) : 'chart-tip-dismissed',
+		false
+	);
+
 	const [visibleMetrics] = useAtom(metricVisibilityAtom);
 	const [, toggleMetric] = useAtom(toggleMetricAtom);
 
@@ -336,10 +339,17 @@ export function MetricsChart({
 						</div>
 					)}
 
-					{!refAreaLeft && annotations.length === 0 && (
+					{!refAreaLeft && annotations.length === 0 && !tipDismissed && (
 						<div className="absolute top-4 right-4 z-10">
-							<div className="bg-muted/80 backdrop-blur-sm border border-border/50 px-3 py-2 rounded-lg text-xs text-muted-foreground shadow-sm">
-								💡 Click or drag on chart to create annotations
+							<div className="bg-muted/80 backdrop-blur-sm border border-border/50 px-3 py-2 rounded-lg text-xs text-muted-foreground shadow-sm flex items-center gap-2">
+								<span>💡 Click or drag on chart to create annotations</span>
+								<button
+									onClick={() => setTipDismissed(true)}
+									className="text-muted-foreground hover:text-foreground transition-colors"
+									aria-label="Dismiss tip"
+								>
+									<XIcon size={12} />
+								</button>
 							</div>
 						</div>
 					)}

apps/dashboard/lib/annotation-constants.ts

@@ -54,4 +54,5 @@ export const CHART_ANNOTATION_STYLES = {
  */
 export const ANNOTATION_STORAGE_KEYS = {
 	visibility: (websiteId: string) => `chart-annotations-visible-${websiteId}`,
+	tipDismissed: (websiteId: string) => `chart-annotations-tip-dismissed-${websiteId}`,
 } as const;