Merge pull request #221 from SocialChangeLab/impact-disclaimer

Impact disclaimer
SocialChangeLab · Sep 2, 2024 · 12df622 · 12df622
2 parents 62f20f0 + 2f56e8e
commit 12df622
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 2 deletions.
diff --git a/frontend-nextjs/src/app/(pages)/dashboard/page.tsx b/frontend-nextjs/src/app/(pages)/dashboard/page.tsx
@@ -4,6 +4,7 @@ import MediaCoverageChart from '@/components/MediaCoverageChart'
 import MediaSentimentChart from '@/components/MediaSentimentChart'
 import NewsletterFooterSection from '@/components/NewsletterFooterSection'
 import SectionHeadlineWithExplanation from '@/components/SectionHeadlineWithExplanation'
+import SizeOptimizationNoticeServer from '@/components/SizeOptimizationNotice.server'
 import TrendWithImpactChartWrapper from '@/components/TrendWithImpactChartWrapper'
 import { texts } from '@/utility/textUtil'
 
@@ -14,6 +15,7 @@ export const metadata = {
 export default function EventsPageWithSuspense() {
 	return (
 		<>
+			<SizeOptimizationNoticeServer />
 			<DashboardHelpBanner />
 			<SectionHeadlineWithExplanation
 				headline={texts.charts.protest_timeline.heading}

diff --git a/frontend-nextjs/src/components/TrendWithImpactChartWrapper.tsx b/frontend-nextjs/src/components/TrendWithImpactChartWrapper.tsx
@@ -4,12 +4,14 @@ import { texts } from '@/utility/textUtil'
 import useTopics from '@/utility/useTopics'
 import useElementSize from '@custom-react-hooks/use-element-size'
 import { AnimatePresence, motion } from 'framer-motion'
+import { AlertTriangle } from 'lucide-react'
 import dynamic from 'next/dynamic'
 import { type ReactNode, Suspense, useState } from 'react'
 import { ChartDocsDialog } from './ChartDocsDialog'
 import type { DataCreditLegendSource } from './DataCreditLegend'
 import InViewContainer from './InViewContainer'
 import TopicsLegend from './TopicsLegend'
+import { Alert, AlertDescription, AlertTitle } from './ui/alert'
 import { Button } from './ui/button'
 
 const LazyLoadedImpactChart = dynamic(
@@ -116,7 +118,16 @@ function TrendWithImpactChartWrapper({
 									{impactHeadline}
 								</h3>
 								<p className="text-sm text-grayDark">{impactDescription}</p>
-								<div className="xl:absolute bottom-2 right-0">
+								<Alert className="mt-2 px-2 py-1 flex-row flex items-baseline gap-4 xl:w-[calc(100%-12rem)]">
+									<AlertTitle className="inline-flex items-baseline gap-2 text-nowrap">
+										<AlertTriangle className="w-4 h-4 translate-y-0.5" />
+										{texts.charts.impact.disclaimer.title}
+									</AlertTitle>
+									<AlertDescription className="inline-block">
+										{texts.charts.impact.disclaimer.description}
+									</AlertDescription>
+								</Alert>
+								<div className="xl:absolute top-7 right-0">
 									<ChartDocsDialog helpSlug={impactHelpSlug} />
 								</div>
 							</div>

diff --git a/frontend-nextjs/src/utility/textUtil.tsx b/frontend-nextjs/src/utility/textUtil.tsx
@@ -214,7 +214,7 @@ const textsEnGB = {
 	},
 	charts: {
 		help: {
-			howToReadThis: 'How to read this',
+			howToReadThis: 'How to read this chart',
 			readInTheDocs: 'Read in the docs',
 			tabs: {
 				info: 'Info',
@@ -296,6 +296,11 @@ const textsEnGB = {
 				atLeast: 'At least',
 				noImpact: 'No impact',
 			},
+			disclaimer: {
+				title: 'Caution!',
+				description:
+					'The results shown below are flawed and for demo purposes only. We are still working on integrating  reliable and validated impact estimation methods.',
+			},
 			descriptions: {
 				unclearChange: ({ isSentiment, topicNode }: ImpactDescriptionProps) => (
 					<>
@@ -881,6 +886,10 @@ const textsXXX = {
 				atLeast: 'XXX',
 				noImpact: 'XXX',
 			},
+			disclaimer: {
+				title: 'XXX',
+				description: 'XXX',
+			},
 			descriptions: {
 				unclearChange: ({ isSentiment, topicNode }: ImpactDescriptionProps) => (
 					<>