refactor(analytics): Update component styles and enhance functionality

- Updated the `QuickLinks` component to improve layout and responsiveness.
- Enhanced the `MainNav` component with better spacing for items.
- Modified the `AnalyticsMainLayout` to ensure proper display of indicator names.
- Introduced a new utility function `filterSubIndicatorsForView` to manage sub-indicator visibility based on the selected view.
- Added tests for the new filtering logic to ensure correct behavior across different views.
- Improved styles for the analytics indicator title to handle overflow and maintain layout integrity.

Author: Abhishekfm

app/[locale]/components/analytics-quick-links.tsx

@@ -50,18 +50,20 @@ export const QuickLinks = () => {
       </div>
       <Carousel
         aria-roledescription="carousel"
-        className="flex w-full items-center justify-center gap-2 px-2 md:px-14"
+        className="flex w-full items-center gap-2 px-2 md:px-14"
         opts={{ align: 'start' }}
       >
         <div className="shrink-0 rounded-1 bg-surfaceDefault">
           <CarouselPrevious />
         </div>
-        <CarouselContent
-          aria-live="polite"
-          className={`w-full ${
-            stateLinks.length === 1 ? 'flex justify-center' : ''
-          }`}
-        >
+        <div className="min-w-0 flex-1">
+          <CarouselContent
+            aria-live="polite"
+            className={cn(
+              'w-full',
+              stateLinks.length === 1 && 'flex justify-center'
+            )}
+          >
           {stateLinks.map((item) => {
             const modules = item.modules ?? [];
             const multiModule = modules.length > 1;
@@ -139,31 +141,34 @@ export const QuickLinks = () => {
                     </div>
                   </Link>
                 ) : (
-                  <div className="relative flex h-40 w-full flex-col items-center gap-4 rounded-2 bg-surfaceSubdued p-4 shadow-elementCard">
+                  <div className="flex h-40 w-full flex-col rounded-2 bg-surfaceSubdued p-4 text-center shadow-elementCard">
                     <Text
                       variant="bodyMd"
                       fontWeight="semibold"
-                      className="absolute left-3 top-3 rounded-2 bg-basePureBlack px-3 py-1 text-surfaceDefault"
+                      className="w-fit rounded-2 bg-basePureBlack px-3 py-1 text-surfaceDefault"
                     >
                       {t('comingSoon')}
                     </Text>
-                    <Image
-                      src={item.icon}
-                      alt=""
-                      className={cn(
-                        'h-20 w-20 shrink-0 object-contain',
-                        styles.inactiveStateIcon
-                      )}
-                    />
-                    <Text variant="headingLg" fontWeight="bold">
-                      {stateName(item.slug, item.name)}
-                    </Text>
+                    <div className="flex min-h-0 flex-1 flex-col items-center justify-center gap-3">
+                      <Image
+                        src={item.icon}
+                        alt=""
+                        className={cn(
+                          'h-16 w-16 shrink-0 object-contain',
+                          styles.inactiveStateIcon
+                        )}
+                      />
+                      <Text variant="headingLg" fontWeight="bold">
+                        {stateName(item.slug, item.name)}
+                      </Text>
+                    </div>
                   </div>
                 )}
               </CarouselItem>
             );
           })}
-        </CarouselContent>
+          </CarouselContent>
+        </div>
         <div className="shrink-0 rounded-1 bg-surfaceDefault">
           <CarouselNext />
         </div>

components/analytics/analytics-layout.tsx

@@ -607,9 +607,11 @@ export function AnalyticsMainLayout() {
     timePeriodSelected,
   ]);
 
+  // Use the lockstep slug/metadata pair so the header never shows the raw slug
+  // of a newly selected indicator before its name has loaded.
   const indicatorName = getFactorNameBySlug(
     renderedIndicatorsData ?? mapIndicatorsData?.data?.indicators,
-    indicator
+    renderedIndicator
   );
 
   const viewTabs = ANALYTICS_VIEWS.filter((tabValue) =>
@@ -672,7 +674,11 @@ export function AnalyticsMainLayout() {
             }
           >
             <div className={styles.analyticsHeader}>
-              <Text as="h2" className={styles.analyticsIndicatorTitle}>
+              <Text
+                as="h2"
+                className={styles.analyticsIndicatorTitle}
+                title={indicatorName}
+              >
                 {indicatorName}
               </Text>
               <TabList className={styles.analyticsViewTabs}>

components/analytics/output-window.tsx

@@ -18,7 +18,7 @@ import { docsLink } from '@/config/site';
 import { getFactorIcon } from '@/lib/analytics/factor-icon';
 import { getFactorRole, isScoreIndicator } from '@/lib/analytics/factor-role';
 import { isRootRiskIndicator } from '@/lib/analytics/root-indicator';
-import { getFactorNameBySlug, getLatestDate } from '@/lib/analytics/utils';
+import { getFactorNameBySlug, getLatestDate, filterSubIndicatorsForView } from '@/lib/analytics/utils';
 import { GraphQL } from '@/lib/api';
 import { type JsonScalar } from '@/lib/types';
 import { cn, parsePeriodString } from '@/lib/utils';
@@ -304,6 +304,7 @@ export function OutputWindow({
                       data={data}
                       boundary={boundary}
                       indicator={indicator}
+                      view={view}
                       getDescription={getDescription}
                     />
                   </div>
@@ -512,6 +513,7 @@ export function OutputWindow({
                             data={data}
                             boundary={boundary}
                             indicator={indicator}
+                            view={view}
                             getDescription={getDescription}
                           />
                         </div>
@@ -532,12 +534,14 @@ function OtherFactorScores({
   data,
   boundary,
   indicator,
+  view,
   getDescription,
 }: {
   factorData: Indicator[] | undefined;
   data: JsonScalar;
   boundary: string;
   indicator: string;
+  view: string;
   getDescription: (slug: string) => string | null | undefined;
 }) {
   const clonedData = structuredClone(data);
@@ -547,12 +551,15 @@ function OtherFactorScores({
   delete clonedData['district'];
   delete clonedData['district-code'];
 
-  const FactorVariables = Object.keys(clonedData);
+  const FactorVariables = filterSubIndicatorsForView(
+    Object.keys(clonedData).filter(
+      (scoreType) => typeof data[scoreType] === 'object'
+    ),
+    view,
+    indicator
+  );
 
-  // TODO: Change the filteration to the factor specific structure for it to work with data having objects
-  return FactorVariables.filter(
-    (scoreType) => typeof data[scoreType] === 'object'
-  ).map((scoreType) => (
+  return FactorVariables.map((scoreType) => (
     <div key={scoreType} className=" flex items-center gap-4">
       {/* //change  */}
       {getFactorRole(scoreType) && (

components/analytics/styles.module.scss

@@ -191,7 +191,11 @@
 }
 
 .analyticsIndicatorTitle {
-  flex: none;
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
   font-weight: 600;
   font-size: 20px;
   line-height: 1.2;

components/main-nav.tsx

@@ -42,7 +42,7 @@ export function MainNav({ prefLangCookie }: { prefLangCookie: string }) {
             </div>
           </NavLink>
         </div>
-        <div className="flex">
+        <div className="flex items-center gap-3 sm:gap-5">
           {mainNav.length > 0 && (
             <div className="flex shrink-0 flex-wrap items-center gap-3 sm:gap-5">
               {mainNav.map((link) => (

lib/analytics/utils.ts

@@ -1,4 +1,5 @@
 import { type Indicator } from '@/config/graphql/analaytics-queries';
+import { getFactorRole } from '@/lib/analytics/factor-role';
 
 export function getFactorNameBySlug(
   factorData: Indicator[] | undefined,
@@ -8,6 +9,39 @@ export function getFactorNameBySlug(
   return factorName?.[0]?.name ?? slug;
 }
 
+/**
+ * Government-response sub-indicators can arrive as both monthly and FY-cumsum
+ * variants. Map/table should show only cumulative; chart only monthly.
+ * Other parent indicators (e.g. risk-score) are left unchanged.
+ */
+export function filterSubIndicatorsForView(
+  scoreTypes: string[],
+  view: string,
+  parentIndicator: string
+): string[] {
+  if (getFactorRole(parentIndicator) !== 'government-response') {
+    return scoreTypes;
+  }
+
+  const isMapLike = !view || view === 'map' || view === 'table';
+  const isChart = view === 'chart';
+
+  return scoreTypes.filter((scoreType) => {
+    const isCumsum = scoreType.endsWith('-fy-cumsum');
+
+    if (isMapLike) {
+      return !(!isCumsum && scoreTypes.includes(`${scoreType}-fy-cumsum`));
+    }
+
+    if (isChart) {
+      const monthlySlug = scoreType.replace(/-fy-cumsum$/, '');
+      return !(isCumsum && scoreTypes.includes(monthlySlug));
+    }
+
+    return true;
+  });
+}
+
 export function getUnitsBySlug(
   factorData: Indicator[] | undefined,
   slug: string
@@ -31,9 +65,7 @@ export const getLatestDate = (dateStrings: string[]) => {
     return new Date(parseInt(year, 10), parseInt(month, 10) - 1);
   });
 
-  const latestDate = new Date(
-    Math.max(...dates.map((date) => date.getTime()))
-  );
+  const latestDate = new Date(Math.max(...dates.map((date) => date.getTime())));
 
   const year = latestDate.getFullYear();
   const month = String(latestDate.getMonth() + 1).padStart(2, '0');