Essai (sans succès) d'ajouter les variables liées dans la feuille de paie comparée

src/lib/components/impacts_view/test_cases_view/test_case_selected/compare_mode/LinkedVariables.svelte

+<script lang="ts">
+  import {
+    type Decomposition,
+    type EvaluationByName,
+  } from "$lib/decompositions"
+  import type { DisplayMode } from "$lib/displays"
+  import { billName, revaluationName, shared } from "$lib/shared.svelte"
+  import { variableSummaryByNameByReformName } from "$lib/variables"
+  import type {
+    DecompositionReference,
+    VariableByName,
+  } from "@openfisca/json-model"
+  import VariableValueChange from "$lib/components/impacts_view/ValueChange.svelte"
+  import {
+    isNullVariableValueByCalculationName,
+    variableValueByCalculationNameFromEvaluation,
+  } from "$lib/calculations.svelte"
+  import { newSimulationUrl } from "$lib/urls"
+  import { removeNegativeZero } from "$lib/values"
+
+  interface Props {
+    displayMode: DisplayMode
+    evaluationByNameArray: EvaluationByName[]
+    situationsToCompareIndex: number[]
+    variableSummaryByName: VariableByName
+    decomposition: Decomposition
+    visibleChildren: DecompositionReference[] | undefined
+  }
+
+  let {
+    displayMode,
+    evaluationByNameArray,
+    decomposition,
+    situationsToCompareIndex,
+    variableSummaryByName,
+    visibleChildren,
+  }: Props = $props()
+
+  const variableSummary =
+    billName === undefined
+      ? variableSummaryByName[displayMode.parametersVariableName!]
+      : variableSummaryByNameByReformName[billName][
+          displayMode.parametersVariableName!
+        ]
+
+  const linkedVariables = variableSummary.linked_other_variables
+
+  const deltaFormatter = (value: number): string =>
+    new Intl.NumberFormat("fr-FR", {
+      currency: "EUR",
+      maximumFractionDigits: 0,
+      minimumFractionDigits: 0,
+      signDisplay: "never",
+      style: "currency",
+    }).format(removeNegativeZero(value))
+</script>
+
+{#if linkedVariables !== undefined}
+  <div class="fond flex pr-4">
+    <!--Indentation pour chaque niveau de l'arbre, illustré par une bordure-->
+
+    <div
+      class="w-full border-dashed border-black"
+      class:border-l-0={!decomposition.open}
+      class:border-l-2={decomposition.open && visibleChildren !== undefined}
+      class:pl-0.5={!decomposition.open}
+    >
+      <div
+        class="mb-2 flex w-full grow flex-col justify-end lg:flex-row"
+        id="situation_{situationsToCompareIndex}_totalimpact"
+      >
+        <div class="flex w-full grow py-3 pl-5">
+          {#if linkedVariables !== undefined}
+            {@const linkedVariablesValueByCalculationName = linkedVariables.map(
+              (name) =>
+                variableValueByCalculationNameFromEvaluation(
+                  evaluationByNameArray[name],
+                  revaluationName,
+                  billName,
+                  shared.parametricReform,
+                ),
+            )}
+            {#if shared.showNulls || !linkedVariablesValueByCalculationName.every(isNullVariableValueByCalculationName)}
+              <ul
+                class="flex h-fit flex-col rounded-md border bg-white p-2 text-gray-800"
+              >
+                {#each linkedVariables as linkedVariableName, index}
+                  {@const linkedVariableValueByCalculationName =
+                    linkedVariablesValueByCalculationName[index]}
+                  {#if shared.showNulls || !isNullVariableValueByCalculationName(linkedVariableValueByCalculationName)}
+                    {@const linkedVariableSummary =
+                      billName === undefined
+                        ? variableSummaryByName[linkedVariableName]
+                        : variableSummaryByNameByReformName[billName][
+                            linkedVariableName
+                          ]}
+                    <li class="flex justify-between gap-2 text-sm">
+                      <a
+                        class="2xl:text-md max-w-32 cursor-pointer overflow-x-hidden text-ellipsis text-nowrap hover:underline sm:max-w-none lg:max-w-44 xl:max-w-none"
+                        href={newSimulationUrl({
+                          ...displayMode,
+                          parametersVariableName: linkedVariableName,
+                        })}
+                        data-sveltekit-noscroll
+                        ><span class="text-gray-600"
+                          >{linkedVariableSummary.short_label ??
+                            linkedVariableSummary.label ??
+                            linkedVariableName}&nbsp;:&nbsp;</span
+                        ></a
+                      >
+                      <VariableValueChange
+                        {evaluationByNameArray}
+                        name={linkedVariableName}
+                        valueByCalculationName={linkedVariableValueByCalculationName}
+                        inline
+                        bold
+                      />
+                    </li>
+                  {/if}
+                {/each}
+              </ul>
+            {/if}
+          {/if}
+        </div>
+      </div>
+    </div>
+  </div>
+{/if}
+
+<style lang="postcss">
+  .fond {
+    background-color: #ffffff;
+    /* Polka dots - Heropatterns.com échelle réduite */
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23A0A0A0' fill-opacity='0.4' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
+  }
+</style>

src/lib/components/impacts_view/test_cases_view/test_case_selected/compare_mode/PaySlipCompareView.svelte

@@ -18,6 +18,7 @@
   import type { Situation } from "$lib/situations"
   import { newSimulationUrl } from "$lib/urls"
   import { removeNegativeZero } from "$lib/values"
+  import LinkedVariables from "$lib/components/impacts_view/test_cases_view/test_case_selected/compare_mode/LinkedVariables.svelte"
 
   interface Props {
     displayMode: DisplayMode
@@ -585,7 +586,34 @@
                   </div>
                 {/if}
               </div>
+              <!--Affichage des variables liées s'il y en a-->
+              {#if displayMode.parametersVariableName !== undefined && decomposition.name === displayMode.parametersVariableName}
+                <LinkedVariables
+                  {displayMode}
+                  {evaluationByNameArray}
+                  {situationsToCompareIndex}
+                  {variableSummaryByName}
+                  {decomposition}
+                  {visibleChildren}
+                />
+              {/if}
+            {/each}
+            <!--Affichage des variables liées s'il y en a
+            {#each rows as { deltaAtVectorIndexArray }}
+              {#if displayMode.parametersVariableName !== undefined && decomposition.name === displayMode.parametersVariableName}
+                <LinkedVariables
+                  {deltaAtVectorIndexArray}
+                  {displayMode}
+                  {evaluationByNameArray}
+                  {situationsToCompareIndex}
+                  {variableSummaryByName}
+                  {decomposition}
+                  {depth}
+                  {visibleChildren}
+                />
+              {/if}
             {/each}
+          -->
           </div>
         </div>
       </div>