Show non-zero values of slider variable for other persons.

src/lib/components/test_cases/TestCaseView.svelte

@@ -77,6 +77,12 @@
 
   $: adultsCount = Object.keys(personSituation).length - childrenCount
 
+  $: sliderEntity =
+    slider === undefined ? undefined : entityByKey[slider.entity]
+
+  $: sliderEntitySituation =
+    sliderEntity === undefined ? undefined : situation[sliderEntity.key_plural]
+
   // $: updateSituation(year, adultes, enfants)
 
   function calculateTotal(
@@ -195,7 +201,7 @@
 
 <div class="place-self-start shadow-md w-full rounded-t-sm bg-white mb-5 ">
   <div
-    class="bg-gray-100 border border-gray-200 border-b-2 p-4 pb-2 h-36 rounded-t-md"
+    class="bg-gray-100 border border-gray-200 border-b-2 p-4 pb-2 rounded-t-md"
   >
     <div class="flex justify-between space-x-2">
       <h1 class="font-bold text-gray-600">{situation.title}</h1>
@@ -215,7 +221,7 @@
     </div>
     <div class="content-start grid grid-rows-1 mt-1">
       <!-- Element 1 de la grille-->
-      <div class="h-8 flex">
+      <div class="flex">
         <!--Composition du foyer-->
         <div class="flex space-x-2">
           <!-- Localité du cas type-->
@@ -247,23 +253,31 @@
             {variableSummaryByName[slider.name].ux_name ??
               variableSummaryByName[slider.name].label} /an :
           </span>
+          <ul class="flex-shrink-0">
+            {#each Object.entries(sliderEntitySituation ?? {}).sort( ([populationId1], [populationId2]) => populationId1.localeCompare(populationId2), ) as [populationId, population]}
+              {#if populationId === slider.id || getVariableValue(situation, slider.name, populationId) !== 0}
+                <li>
+                  <span class="text-xs text-gray-500">
+                    {population.name ?? populationId}
+                  </span>
                   <span
                     >{euroAmountFormatter.format(
-              getVariableValue(situation, slider.name, slider.id),
+                      getVariableValue(situation, slider.name, populationId),
                     )}</span
                   >
+                  {#if populationId === slider.id}
                     <label class="text-xs">
                       <input
                         checked={situation.slider !== undefined &&
                           situation.slider.entity === slider.entity &&
                           situation.slider.id === slider.id &&
                           situation.slider.name === slider.name}
-              on:click={() => toggleSlider(variableSummaryByName[slider.name])}
+                        on:click={() =>
+                          toggleSlider(variableSummaryByName[slider.name])}
                         type="radio"
                       />
                       Faire varier
                     </label>
-        </div>
                     {#if situation.slider !== undefined && situation.slider.entity === slider.entity && situation.slider.id === slider.id && situation.slider.name === slider.name}
                       <input
                         class="block mt-2 mx-2"
@@ -276,6 +290,12 @@
                       />
                     {/if}
                   {/if}
+                </li>
+              {/if}
+            {/each}
+          </ul>
+        </div>
+      {/if}
       <!--Identité de l'entreprise - Element 3 de la grid -->
       <!--
         <div class="flex h-8">