feat: change layout in impact analysis page

Author: rebecamurillo

src/components/react/ImpactAnalysis/AnalysisConditionsFilter.tsx

@@ -26,22 +26,11 @@ export const AnalysisConditionsFilter: React.FC<
       <AnalysisSectionDivider
         step={1}
         title="Analysis Conditions"
-        subtitle="Select the analysis conditions: KPI group"
+        // subtitle="Select the analysis conditions: KPI group"
         description="The KPIs have been grouped by scope of interest"
       />
 
       <div className="mt-6 flex flex-col items-center gap-2 lg:gap-4 content-center">
-        <Tooltip
-          content="The impact levels reported by this assessment tool are algorithmic estimates derived from implemented measures and observed KPI changes. They serve as indicative values and may not exactly reflect real-world outcomes"
-          placement="top"
-          tooltipClassName="w-full"
-        >
-          <h4 className="text-center">
-            Available conditions for analysis
-            <QuestionMarkCircleIcon className="inline-block w-6 h-6 ml-1 text-warning" />
-          </h4>
-        </Tooltip>
-
         <CardFilter
           groups={kpiGroups.map((group) => ({
             id: group.id,

src/components/react/ImpactAnalysis/ImpactAnalysisDashboard.tsx

@@ -2,13 +2,17 @@ import React, { useState, useMemo } from "react";
 import { AnalysisConditionsFilter } from "./AnalysisConditionsFilter";
 import { MeasuresImpact } from "./MeasuresImpact";
 import { KpiVariations } from ".";
-import { PageNavigation } from "../ui/PageNavigation";
+import { Tabs } from "../ui";
 import type {
   IKpiGroup,
   IGroupAnalysisResult,
   IKpiVariationData,
   IJobRunOutputData,
 } from "../../../types";
+import { PageNavigation } from "../ui/PageNavigation";
+
+const MEASURES_TAB_ID = "measures-impact";
+const KPI_VARIATIONS_TAB_ID = "kpi-variations";
 
 interface ImpactAnalysisDashboardProps {
   kpiGroups: IKpiGroup[];
@@ -20,13 +24,11 @@ export const ImpactAnalysisDashboard: React.FC<
   ImpactAnalysisDashboardProps
 > = ({ kpiGroups, jobRunOutput, kpiVariationsData }) => {
   const [selectedGroupId, setSelectedGroupId] = useState<string | number>();
+  const [activeTabId, setActiveTabId] = useState<string>(MEASURES_TAB_ID);
 
   const handleGroupSelect = (groupId: string | number) => {
     setSelectedGroupId(groupId);
-    const element = document.getElementById("kpis-in-group");
-    if (element) {
-      element.scrollIntoView({ behavior: "smooth" });
-    }
+    setActiveTabId(MEASURES_TAB_ID);
   };
 
   const selectedGroup =
@@ -55,38 +57,75 @@ export const ImpactAnalysisDashboard: React.FC<
     return kpiVariationsData[String(selectedGroupId)] || null;
   }, [selectedGroupId, kpiVariationsData]);
 
-  // Navigation sections configuration
   const navigationSections = [
-    { id: "analysis-conditions-filter", label: "Conditions" },
-    { id: "measures-impact", label: "Measures" },
-    { id: "kpi-variations", label: "KPI Variations" },
+    { id: "how-to", label: "Information about the tool" },
+    { id: "impact-results", label: "Impact analysis results" },
   ];
 
-  return (
-    <div className="flex flex-col gap-6">
-      <section id="analysis-conditions-filter"></section>
-      <AnalysisConditionsFilter
-        kpiGroups={kpiGroups}
-        selectedGroupId={selectedGroupId}
-        onGroupSelect={handleGroupSelect}
-      />
+  const contentTabs = useMemo(
+    () => [
+      {
+        id: MEASURES_TAB_ID,
+        label: "Measures Impact",
+        content: (
+          <MeasuresImpact
+            selectedGroup={selectedGroup}
+            analysisResult={analysisResult}
+            kpiCount={selectedVariationsData?.allKpiVariations.length || 0}
+          />
+        ),
+      },
+      {
+        id: KPI_VARIATIONS_TAB_ID,
+        label: "KPI Variations",
+        content: (
+          <KpiVariations
+            selectedGroup={selectedGroup}
+            variationsData={selectedVariationsData}
+          />
+        ),
+      },
+    ],
+    [selectedGroup, analysisResult, selectedVariationsData],
+  );
 
-      <section id="measures-impact"></section>
-      <MeasuresImpact
-        selectedGroup={selectedGroup}
-        analysisResult={analysisResult}
-        kpiCount={selectedVariationsData?.allKpiVariations.length || 0}
-      />
+  const filterContent = (
+    <AnalysisConditionsFilter
+      kpiGroups={kpiGroups}
+      selectedGroupId={selectedGroupId}
+      onGroupSelect={handleGroupSelect}
+    />
+  );
 
-      <section id="kpi-variations"></section>
-      <KpiVariations
-        selectedGroup={selectedGroup}
-        variationsData={selectedVariationsData}
-      />
+  return (
+    <div className="space-y-6">
+      {/* Desktop: two-column grid — sticky sidebar + tabbed content */}
+      <div className="grid grid-cols-1 gap-6 lg:grid-cols-[350px_minmax(0,1fr)]">
+        <aside className="sticky lg:top-6 lg:self-start lg:max-h-[calc(100vh-3rem)] lg:overflow-y-auto pr-2">
+          {filterContent}
+        </aside>
+
+        <section className="min-w-0">
+          <div className="rounded-lg border border-gray-200 bg-white p-4 shadow-sm">
+            {selectedVariationsData ? (
+              <Tabs
+                key={activeTabId}
+                tabs={contentTabs}
+                defaultTabId={activeTabId}
+                onChange={setActiveTabId}
+              />
+            ) : (
+              <p className="text-gray-500">
+                Please select analysis conditions to view the results.
+              </p>
+            )}
+          </div>
+        </section>
+      </div>
 
       <PageNavigation
         sections={navigationSections}
-        disclaimer="Analysis results are based on the selected KPI group and living lab conditions"
+        disclaimer="The impact levels reported by this assessment tool are algorithmic estimates derived from implemented measures and observed KPI changes. They serve as indicative values and may not exactly reflect real-world outcomes."
       />
     </div>
   );

src/components/react/ImpactAnalysis/KpiVariations.tsx

@@ -22,11 +22,11 @@ export const KpiVariations: React.FC<KpiVariationsProps> = ({
     <AnalysisSectionDivider
       step={3}
       title="KPI Variations percentage"
-      subtitle={
-        "Observe and compare " +
-        selectedGroup?.name +
-        " KPIs variations among living labs"
-      }
+      // subtitle={
+      //   "Observe and compare " +
+      //   selectedGroup?.name +
+      //   " KPIs variations among living labs"
+      // }
       description={
         "Only Living Labs with enough data collected are included, for KPIs in the scope of " +
         selectedGroup?.name +

src/components/react/ImpactAnalysis/MeasuresImpact.tsx

@@ -27,7 +27,7 @@ export const MeasuresImpact: React.FC<MeasuresImpactProps> = ({
     <AnalysisSectionDivider
       step={2}
       title="Measures Impact"
-      subtitle="Analyse how implemented measures contributed to the KPIs variations"
+      // subtitle="Analyse how implemented measures contributed to the KPIs variations"
       description={
         "Estimation of the level of contribution for each measure to KPIs in the scope " +
         selectedGroup?.name +

src/components/react/ui/CardFilter.tsx

@@ -3,6 +3,7 @@ import type { IKpiDefinition } from "../../../types";
 import { KpiCard } from "../KpiCards";
 import { getUniqueParentKpis } from "../../../lib/helpers";
 import { InfoAlert } from "./InfoAlert";
+import { InfoCard } from "./InfoCard";
 
 interface CardFilterProps {
   groups: { id: string | number; name: string; kpis: IKpiDefinition[] }[];
@@ -39,20 +40,24 @@ export const CardFilter: React.FC<CardFilterProps> = ({
       <section id="kpis-in-group"></section>
       {selectedGroup && uniqueKpis.length > 0 && (
         <div className="mt-10">
-          <InfoAlert
-            variant="neutral"
+          <InfoCard
             title={"KPIs considered for group " + selectedGroup.name}
+            textAlign="left"
+            variant="light"
+            showIcon={false}
           >
-            <i>
-              We have collected data from the living labs from the following
-              KPIs in this group:{" "}
-            </i>
-            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+            <div className="grid grid-cols-1 mt-2">
               {uniqueKpis.map((kpi) => (
                 <KpiCard kpi={kpi} key={kpi.id} />
               ))}
+              <i>
+                Our platform has collected living lab's data from these KPIs,
+                which are in the scope of the selected group. The impact
+                analysis results are based on the variations observed in these
+                KPIs and the measures implemented in the living labs.
+              </i>
             </div>
-          </InfoAlert>
+          </InfoCard>
         </div>
       )}
     </div>

src/pages/tools/impact_analysis.astro

@@ -183,7 +183,7 @@ const methodologyContent = `
   ]}
   backHref="/"
 >
-  <div class="mx-auto px-1 py-8">
+  <div class="mx-auto px-1 py-8" id="how-to">
     <div class="mx-auto px-1 py-8 gap-y-4 flex flex-col">
       <!-- Info Section -->
       <InfoSection
@@ -192,11 +192,6 @@ const methodologyContent = `
         title="Impact Analysis Dashboard"
         description="Quantifying the effectiveness of mobility measures across Living Labs. This tool uses regression analysis to correlate the implementation of push/pull measures with changes in Key Performance Indicators (KPIs)."
       />
-      {
-        formattedDate && (
-          <p class="text-sm text-gray-500">Updated on {formattedDate}</p>
-        )
-      }
 
       <!-- Features Grid -->
       <FeaturesGrid features={impactAnalysisFeatures} />
@@ -228,12 +223,19 @@ const methodologyContent = `
           </p>
         </div>
       ) : (
-        <ImpactAnalysisDashboard
-          kpiGroups={kpiGroups}
-          jobRunOutput={jobRunOutput}
-          kpiVariationsData={kpiVariationsData}
-          client:load
-        />
+        <section id="impact-results">
+          {formattedDate && (
+            <p class="text-sm text-gray-500">
+              Results where updated on {formattedDate}
+            </p>
+          )}
+          <ImpactAnalysisDashboard
+            kpiGroups={kpiGroups}
+            jobRunOutput={jobRunOutput}
+            kpiVariationsData={kpiVariationsData}
+            client:load
+          />
+        </section>
       )
     }
   </div>