feat: ux ui improvements on analysis charts

Author: rebecamurillo

src/components/AnalysisPageSections/MethodologyAccordion.astro

@@ -23,12 +23,12 @@ const { title, subtitle, content } = Astro.props;
             viewBox="0 0 24 24"
             stroke-width="1.5"
             stroke="currentColor"
-            class="w-5 h-5"
+            class="size-6"
           >
             <path
               stroke-linecap="round"
               stroke-linejoin="round"
-              d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z"
+              d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 5.25h.008v.008H12v-.008Z"
             ></path>
           </svg>
         </div>

src/components/MCDAADashboardPage.astro

@@ -21,7 +21,7 @@ import {
   MCDA_PERSPECTIVES,
   resolveMcdaPerspectiveLabel,
 } from "../lib/helpers";
-import { InfoAlert, InfoCard, RButton } from "./react";
+import { FAQAccordion, InfoAlert, InfoCard, RButton } from "./react";
 
 const { perspective, breadcrumbs, backHref } = Astro.props;
 const api = new ApiClient(Astro.request);
@@ -38,7 +38,9 @@ if (perspective) {
     pageBreadcrumbs.push({
       label: resolveMcdaPerspectiveLabel(perspective, MCDA_PERSPECTIVES),
     });
-    const latestRun = await api.getLatestJobRun(`mcda_analysis_${perspective}`);
+    const latestRun = await api.getLatestJobRun(
+      `mcda_analysis_qualitative_${perspective}`,
+    );
 
     if (latestRun) {
       formattedDate = formatDateWithTime(latestRun.created_at);
@@ -108,6 +110,39 @@ const howToUseSteps = [
       "Examine the PROMETHEE scores, rankings, and GAIA plane visualization to understand trade-offs and recommendations.",
   },
 ];
+
+const methodologyQuestions = [
+  {
+    question: "What is PROMETHEE?",
+    answer: `PROMETHEE (Preference Ranking Organisation METHod for Enrichment
+              Evaluations) is a Multi-Criteria Decision Analysis (MCDA) method
+              used to evaluate and rank alternatives when multiple, and sometimes conflicting, criteria must be considered simultaneously.
+              It handles both quantitative data (e.g. costs, travel times) and qualitative
+              factors (e.g. environmental impact, social acceptability), making it
+              well-suited for complex decisions like urban transport policy evaluation.
+              It also incorporates the diverse perspectives of multiple stakeholders
+              (citizens, businesses, public authorities) by building preference relations
+              between alternatives based on how each group values the criteria.`,
+  },
+  {
+    question: "What is GAIA?",
+    answer: `GAIA (Graphical Analysis for Interactive Assistance) is the
+              visual, interactive companion to PROMETHEE. It displays evaluation
+              results graphically on a GAIA plane, mapping both the policy
+              alternatives and the evaluation criteria together. This visual
+              representation helps stakeholders (regardless of their technical
+              background) better understand the analysis, communicate results,
+              and identify trade-offs and areas where preferences converge or
+              conflict.`,
+  },
+  {
+    question: "How to read the PROMETHEE-GAIA results?",
+    answer: `PROMETHEE-GAIA results combine two complementary outputs: PROMETHEE and GAIA.
+              Together, they allow users to quickly identify the strongest
+              policy options, understand key trade-offs, and assess the overall
+              robustness and consensus behind the recommended solutions.`,
+  },
+];
 ---
 
 <Layout role="visitor" breadcrumbs={pageBreadcrumbs} backHref={backHref}>
@@ -141,76 +176,20 @@ const howToUseSteps = [
     >
       <!-- How to Use Guide -->
       <HowToUseAccordion
-        title="How to use this tool"
+        title="How to use this tool ?"
         subtitle="3 simple steps to get started"
         steps={howToUseSteps}
       />
 
       <!-- Methodology -->
       <MethodologyAccordion
-        title="Understanding the Methodology"
+        title="Understanding the methodology"
         subtitle="Multi-criteria decision analysis approach with PROMETHEE and GAIA visualization"
         content=""
       >
-        <div class="grid grid-cols-1 md:grid-cols-3 gap-3 mt-2">
-          <InfoAlert title="What is PROMETHEE?" variant="question">
-            <p>
-              PROMETHEE (Preference Ranking Organisation METHod for Enrichment
-              Evaluations) is a Multi-Criteria Decision Analysis (MCDA) method
-              used to evaluate and rank alternatives when multiple, <i
-                >and sometimes conflicting,</i
-              > criteria must be considered simultaneously. <br />
-              It handles both quantitative data (e.g. costs, travel times) and qualitative
-              factors (e.g. environmental impact, social acceptability), making it
-              well-suited for complex decisions like urban transport policy evaluation.
-              It also incorporates the diverse perspectives of multiple stakeholders
-              (citizens, businesses, public authorities) by building preference relations
-              between alternatives based on how each group values the criteria.
-            </p>
-          </InfoAlert>
-          <InfoAlert title="What is GAIA?" variant="question">
-            <p>
-              GAIA (Graphical Analysis for Interactive Assistance) is the
-              visual, interactive companion to PROMETHEE. It displays evaluation
-              results graphically on a GAIA plane, mapping both the policy
-              alternatives and the evaluation criteria together. This visual
-              representation helps stakeholders — regardless of their technical
-              background — better understand the analysis, communicate results,
-              and identify trade-offs and areas where preferences converge or
-              conflict.
-            </p>
-          </InfoAlert>
-          <InfoAlert
-            title="How to read the PROMETHEE-GAIA results?"
-            className=""
-            variant="question"
-          >
-            <p>
-              PROMETHEE-GAIA results combine two complementary outputs:
-              <ul class="list-disc list-inside my-2">
-                <li class="text-sm">
-                  PROMETHEE provides a ranked order of alternatives, reflecting
-                  how well each performs across all weighted criteria and
-                  stakeholder preferences.
-                </li>
-                <li class="text-sm">
-                  The GAIA plane visually maps these alternatives alongside the
-                  criteria, revealing which policies excel in specific areas and
-                  where tensions between different objectives lie.
-                </li>
-              </ul>
-            </p>
-            <p>
-              Together, they allow users to quickly identify the strongest
-              policy options, understand key trade-offs, and assess the overall
-              robustness and consensus behind the recommended solutions.
-            </p>
-          </InfoAlert>
-          <InfoAlert
-            title="Pro tip for interpretation"
-            className="md:col-span-2"
-            variant="success"
-          >
+        <div class="grid grid-cols-1 gap-3 mt-2">
+          <FAQAccordion questions={methodologyQuestions} client:load />
+          <InfoAlert title="Pro tip for interpretation" variant="success">
             <p>
               Compare results across different perspectives to identify measures
               that work well for multiple stakeholders.
@@ -270,6 +249,50 @@ const howToUseSteps = [
           </div>
         </div>
       </MethodologyAccordion>
+
+      <MethodologyAccordion
+        title="How to interpret the results ?"
+        subtitle="Understanding Multi-Criteria Analysis outputs and model accuracy"
+        content=""
+      >
+        <p class="mb-4">
+          PROMETHEE-GAIA results combine two complementary outputs that work
+          together to support decision-making. PROMETHEE produces a ranked order
+          of the transport policy alternatives, reflecting how each city's
+          interventions perform across all weighted criteria and stakeholder
+          perspectives. A higher rank indicates a policy that better satisfies
+          the overall set of criteria as valued by the stakeholders involved.
+          The GAIA plane then brings a visual dimension to these rankings,
+          mapping both the policy alternatives and the evaluation criteria onto
+          a two-dimensional graph. On this plane, criteria pointing in similar
+          directions indicate aligned objectives, while criteria pointing in
+          opposite directions reveal trade-offs. Policies positioned close to a
+          criterion's axis perform well on that specific criterion. A decision
+          axis summarizes the overall PROMETHEE ranking direction, helping users
+          quickly identify the most globally preferred alternatives.
+        </p>
+        <p class="mb-6">Together, these two outputs allow users to:</p>
+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
+          <InfoCard
+            title="Rank Alternatives"
+            description="Compare transport policies based on their overall performance across all criteria and stakeholder groups"
+            showIcon={false}
+            textAlign="center"
+          />
+          <InfoCard
+            title="Identify Trade-offs"
+            description="Spot tensions between competing objectives (e.g. cost reduction vs. environmental impact) that cannot be simultaneously optimized"
+            showIcon={false}
+            textAlign="center"
+          />
+          <InfoCard
+            title="Explore Consensus"
+            description="Identify areas where different stakeholders' preferences align, supporting more inclusive and robust decision-making"
+            showIcon={false}
+            textAlign="center"
+          />
+        </div>
+      </MethodologyAccordion>
     </section>
 
     <!-- Dashboard Section -->

src/components/react/ImpactAnalysis/KpiGroupVariationCharts.tsx

@@ -45,6 +45,17 @@ export const KpiGroupVariationCharts: React.FC<
     labs.map((l) => l.id),
   );
 
+  const normalizeTransportMode = (mode?: string | null): string | null => {
+    if (!mode) return null;
+    const trimmed = mode.trim();
+    return trimmed.length > 0 ? trimmed : null;
+  };
+
+  const buildKpiModeKey = (kpiId: string, mode?: string | null): string => {
+    const normalizedMode = normalizeTransportMode(mode);
+    return normalizedMode ? `${kpiId}__${normalizedMode}` : kpiId;
+  };
+
   const chartsByName = new Map<string, KpiVariationChartData>();
   chartsByName.set(`Variation per Lab for all KPIs in ${groupName} group`, {
     labs,
@@ -68,39 +79,62 @@ export const KpiGroupVariationCharts: React.FC<
     ],
   });
 
-  const uniqueParentKpiIds = new Set<string>();
+  const chartGroups = new Map<
+    string,
+    {
+      parentName: string;
+      transportMode: string | null;
+      kpis: IKpiVariation[];
+    }
+  >();
+
   globalKpiVariations.forEach((kpi) => {
     const parentId = kpi.kpiParentId ?? kpi.kpiId;
-    uniqueParentKpiIds.add(parentId);
-  });
+    const parentName = kpi.kpiParentName ?? kpi.kpiName ?? "Unnamed KPI";
+    const transportMode = normalizeTransportMode(kpi.transportModeName);
+    const groupKey = `${parentId}__${transportMode ?? "no-mode"}`;
 
-  uniqueParentKpiIds.forEach((parentKpiId) => {
-    const kpisForParent = globalKpiVariations.filter((kpi) => {
-      // const pid = kpi.kpiParentId ?? kpi.kpiId;
-      return [kpi.kpiParentId, kpi.kpiId].includes(parentKpiId);
-    });
+    if (!chartGroups.has(groupKey)) {
+      chartGroups.set(groupKey, {
+        parentName,
+        transportMode,
+        kpis: [],
+      });
+    }
+
+    chartGroups.get(groupKey)!.kpis.push(kpi);
+  });
 
+  chartGroups.forEach((group) => {
     const kpiMap = new Map<string, IKpiVariation>();
-    for (const kpi of kpisForParent) {
-      if (!kpiMap.has(kpi.kpiId)) {
-        kpiMap.set(kpi.kpiId, kpi);
+    for (const kpi of group.kpis) {
+      const kpiModeKey = buildKpiModeKey(kpi.kpiId, kpi.transportModeName);
+      if (!kpiMap.has(kpiModeKey)) {
+        kpiMap.set(kpiModeKey, kpi);
       }
     }
 
     const kpis = Array.from(kpiMap.values())
       .map((globalKpi) => {
-        // Build variation by lab for this KPI
+        const globalMode = normalizeTransportMode(globalKpi.transportModeName);
+
+        // Build variation by lab for this KPI and transport mode
         const byLab: Record<string, number> = {};
         for (const lab of livingLabVariations) {
-          const labKpi = lab.kpis.find((k) => k.kpiId === globalKpi.kpiId);
+          const labKpi = lab.kpis.find(
+            (k) =>
+              k.kpiId === globalKpi.kpiId &&
+              normalizeTransportMode(k.transportModeName) === globalMode,
+          );
+
           byLab[lab.labId] = toPercent(
             labKpi?.ratioVariation,
             labKpi?.ratioVariationPercentage,
           );
         }
 
         return {
-          id: globalKpi.kpiId,
+          id: buildKpiModeKey(globalKpi.kpiId, globalKpi.transportModeName),
           name: globalKpi.kpiName,
           variation: {
             global: toPercent(
@@ -113,11 +147,11 @@ export const KpiGroupVariationCharts: React.FC<
       })
       .sort((a, b) => a.name.localeCompare(b.name));
 
-    const parentKpiName =
-      kpisForParent[0]?.kpiParentName ??
-      kpisForParent[0]?.kpiName ??
-      "Unnamed KPI";
-    chartsByName.set(parentKpiName, { labs, kpis });
+    const chartTitle = group.transportMode
+      ? `${group.parentName} (${group.transportMode})`
+      : group.parentName;
+
+    chartsByName.set(chartTitle, { labs, kpis });
   });
 
   //actions
@@ -169,7 +203,6 @@ export const KpiGroupVariationCharts: React.FC<
                 color={isSelected ? "primary" : "light"}
                 className="cursor-pointer border transition-all hover:shadow-md"
                 onClick={() => toggleLab(lab.id)}
-                title={lab.name}
               >
                 {displayName}
               </Badge>
@@ -187,7 +220,9 @@ export const KpiGroupVariationCharts: React.FC<
                 data={data}
                 selectedLabIds={selectedLabIds}
               />
-              <h3 className="text-center">Variations per KPI in {groupName} group</h3>
+              <h3 className="text-center">
+                Variations per KPI in {groupName} group
+              </h3>
             </div>
           ) : (
             <KpiVariationChart

src/components/react/ImpactAnalysis/MeasureImpactCard.tsx

@@ -17,9 +17,9 @@ export const MeasureImpactCard: React.FC<MeasureImpactCardProps> = ({
   const isPositive = coefficient >= 0;
 
   // Determine colors based on impact
-  const colorClasses = isPositive
-    ? "from-secondary/20 to-secondary/40 border-secondary text-secondary"
-    : "from-danger/20 to-danger/40 border-danger text-danger";
+  const colorClasses = ""; //isPositive
+  // ? "from-secondary/20 to-secondary/40 border-secondary text-dark"
+  // : "from-danger/20 to-danger/40 border-danger text-dark";
 
   const badgeClasses = isPositive
     ? "bg-secondary text-white"
@@ -42,7 +42,7 @@ export const MeasureImpactCard: React.FC<MeasureImpactCardProps> = ({
       </div>
 
       {/* Measure Name */}
-      <h5 className={`font-bold mb-2 pr-5 leading-tight`}>{measure.name}</h5>
+      <h6 className={`font-bold mb-2 pr-5 leading-tight`}>{measure.name}</h6>
 
       {/* Coefficient Value */}
       <div className="flex items-baseline gap-2 mb-2">