Add editable test case.

src/lib/TestCaseEdit.svelte

+<script lang="ts">
+  import { createEventDispatcher, tick } from "svelte"
+
+  import type { Situation } from "$lib/situations"
+
+  export let enfants = []
+  export let individus = [
+    {
+      salaire_de_base: 18655,
+    },
+  ]
+  export let year = 2021
+
+  const dispatch = createEventDispatcher()
+  let inited = false
+
+  $: updateSituation(year, individus, enfants)
+
+  function changeEnfantsCount(count: string): void {
+    const enfantsCount = parseInt(count)
+    if (enfantsCount === enfants.length) {
+      return
+    }
+    enfants = enfants.slice(0, Math.min(enfants.length, enfantsCount))
+    while (enfants.length < enfantsCount) {
+      enfants.push({
+        age: 1,
+      })
+    }
+  }
+
+  function changeEnfantVariable(index: number, key: "age", value: string) {
+    enfants = [...enfants]
+    enfants[index] = { ...enfants[index], [key]: parseInt(value) }
+  }
+
+  function changeIndividusCount(count: string): void {
+    const individusCount = parseInt(count)
+    if (individusCount === individus.length) {
+      return
+    }
+    individus = individus.slice(0, Math.min(individus.length, individusCount))
+    while (individus.length < individusCount) {
+      individus.push({
+        salaire_de_base: 0,
+      })
+    }
+  }
+
+  function changeIndividuVariable(
+    index: number,
+    key: "salaire_de_base",
+    value: string,
+  ) {
+    individus = [...individus]
+    individus[index] = { ...individus[index], [key]: parseInt(value) }
+  }
+
+  function updateSituation(year, individus, enfants) {
+    const situation: Situation = {
+      individus: Object.fromEntries([
+        ...individus.map((individu, index) => [
+          `Individu ${index + 1}`,
+          {
+            salaire_de_base: { [year]: individu.salaire_de_base },
+          },
+        ]),
+        ...enfants.map((enfant, index) => [
+          `Enfant ${index + 1}`,
+          {
+            age: { [`${year}-01`]: enfant.age },
+          },
+        ]),
+      ]),
+      menages: {
+        "Ménage 1": {
+          personne_de_reference: ["Individu 1"],
+          conjoint: individus
+            .slice(1)
+            .map((_individu, index) => `Individu ${index + 2}`),
+          enfants: enfants.map((enfants, index) => `Enfant ${index + 1}`),
+        },
+      },
+      familles: {
+        "Famille 1": {
+          parents: individus.map((_individu, index) => `Individu ${index + 1}`),
+          enfants: enfants.map((enfants, index) => `Enfant ${index + 1}`),
+        },
+      },
+      foyers_fiscaux: {
+        foyer_fiscal_1: {
+          declarants: individus.map(
+            (_individu, index) => `Individu ${index + 1}`,
+          ),
+          personnes_a_charge: enfants.map(
+            (enfants, index) => `Enfant ${index + 1}`,
+          ),
+        },
+      },
+    }
+    if (inited) {
+      dispatch("change", situation)
+    } else {
+      inited = true
+      tick()
+        .then(() => dispatch("change", situation))
+        .catch((err) => console.error(err))
+    }
+  }
+</script>
+
+<label>
+  Nombre d'individus
+  <input
+    max={2}
+    min={1}
+    on:change={({ target }) => changeIndividusCount(target.value)}
+    step="1"
+    type="number"
+    value={individus.length}
+  />
+</label>
+
+<ul>
+  {#each individus as individu, index}
+    <li>
+      <label>
+        Salaire annuel de base
+        <input
+          min={0}
+          on:change={({ target }) =>
+            changeIndividuVariable(index, "salaire_de_base", target.value)}
+          step="1"
+          type="number"
+          value={individu.salaire_de_base}
+        />
+      </label>
+    </li>
+  {/each}
+</ul>
+
+<label>
+  Nombre d'enfants
+  <input
+    max={20}
+    min={0}
+    on:change={({ target }) => changeEnfantsCount(target.value)}
+    step="1"
+    type="number"
+    value={enfants.length}
+  />
+</label>
+
+<ul>
+  {#each enfants as enfant, index}
+    <li>
+      <label>
+        Âge
+        <input
+          max={150}
+          min={-1}
+          on:change={({ target }) =>
+            changeEnfantVariable(index, "age", target.value)}
+          step="1"
+          type="number"
+          value={enfant.age}
+        />
+      </label>
+    </li>
+  {/each}
+</ul>

src/routes/calculations/index.svelte

-<script context="module" lang="ts">
-  // import type { LoadInput, LoadOutput } from "@sveltejs/kit/types.internal"
-
-  // import { decomposition, walkDecomposition } from "$lib/decompositions"
-  // import type { Situation } from "$lib/situations"
-
-  // // See https://github.com/cbenz/openfisca-interactive/blob/master/waterfall.ipynb
-  // const year = 2017
-  // const variablesDecomposition = Object.fromEntries(
-  //   [...walkDecomposition(decomposition)]
-  //     .filter(
-  //       (node) =>
-  //         ![
-  //           "aide_embauche_pme",
-  //           "aide_premier_salarie",
-  //           "allegement_fillon",
-  //           "cotisations_employeur",
-  //           "cotisations_salariales",
-  //           "cout_du_travail",
-  //           "crds_salaire",
-  //           "credit_impot_competitivite_emploi",
-  //           "csg_deductible_salaire",
-  //           "csg_imposable_salaire",
-  //           "irpp",
-  //           "minima_sociaux",
-  //           "ppa",
-  //           "ppe",
-  //           "prestations_sociales",
-  //           "revenus_nets_du_travail",
-  //           "rsa",
-  //           "salaire_de_base",
-  //           "salaire_imposable",
-  //           "salaire_net",
-  //           "salaire_super_brut",
-  //           "salaire_super_brut_hors_allegements",
-  //           "tehr",
-  //         ].includes(node.code),
-  //     )
-  //     .map((node) => [node.code, { [year]: null }]),
-  // )
-  // const situation: Situation = {
-  //   individus: {
-  //     Claude: {
-  //       salaire_de_base: {
-  //         [year]: 20000,
-  //       },
-  //     },
-  //     Dominique: {
-  //       salaire_de_base: {
-  //         [year]: 30000,
-  //       },
-  //     },
-  //     Camille: {},
-  //   },
-  //   menages: {
-  //     menage_1: {
-  //       personne_de_reference: ["Claude"],
-  //       conjoint: ["Dominique"],
-  //       enfants: ["Camille"],
-  //       ...variablesDecomposition,
-  //     },
-  //   },
-  //   familles: {
-  //     famille_1: {
-  //       parents: ["Claude", "Dominique"],
-  //       enfants: ["Camille"],
-  //     },
-  //   },
-  //   foyers_fiscaux: {
-  //     foyer_fiscal_1: {
-  //       declarants: ["Claude", "Dominique"],
-  //       personnes_a_charge: ["Camille"],
-  //     },
-  //   },
-  // }
-
-  // export async function load({ fetch }: LoadInput): Promise<LoadOutput> {
-  //   const url = "https://fr.openfisca.org/api/latest/calculate"
-  //   const res = await fetch(url, {
-  //     body: JSON.stringify(situation, null, 2),
-  //     headers: {
-  //       "Content-Type": "application/json",
-  //     },
-  //     method: "POST",
-  //   })
-
-  //   if (!res.ok) {
-  //     console.error(
-  //       `Error ${res.status} while calculating at ${url}\n${JSON.stringify(
-  //         situation,
-  //         null,
-  //         2,
-  //       )}\n\n${await res.text()}`,
-  //     )
-  //     return {
-  //       status: res.status,
-  //       error: new Error(`Could not load ${url}`),
-  //     }
-  //   }
-  //   return {
-  //     props: {
-  //       simulation: await res.json(),
-  //     },
-  //   }
-  // }
-</script>
-
 <script lang="ts">
   import Sockette from "sockette"
 
@@ -112,59 +5,31 @@
   import { session } from "$app/stores"
   import type { Decomposition } from "$lib/decompositions"
   import { decomposition as decompositionWithoutValue } from "$lib/decompositions"
-  // import type { Simulation } from "$lib/simulations"
   import type { Situation } from "$lib/situations"
+  import TestCaseEdit from "$lib/TestCaseEdit.svelte"
   import Waterfall from "$lib/Waterfall"
 
-  // export let simulation: Simulation
-
   let deltaByCode: { [code: string]: number } = {}
   let decomposition = updateDecompositionValues(
     decompositionWithoutValue as Decomposition,
     deltaByCode,
   )
-  const year = 2017
-  const situation: Situation = {
-    individus: {
-      Claude: {
-        salaire_de_base: {
-          [year]: 20000,
-        },
-      },
-      Dominique: {
-        salaire_de_base: {
-          [year]: 30000,
-        },
-      },
-      Camille: {},
-    },
-    menages: {
-      menage_1: {
-        personne_de_reference: ["Claude"],
-        conjoint: ["Dominique"],
-        enfants: ["Camille"],
-      },
-    },
-    familles: {
-      famille_1: {
-        parents: ["Claude", "Dominique"],
-        enfants: ["Camille"],
-      },
-    },
-    foyers_fiscaux: {
-      foyer_fiscal_1: {
-        declarants: ["Claude", "Dominique"],
-        personnes_a_charge: ["Camille"],
-      },
-    },
-  }
-
+  let situation: Situation | undefined = undefined
   let webSocket: Sockette | undefined = undefined
+  let webSocketOpen = false
+  let year = 2021
 
   $: if (browser) {
     openWebSocket()
   }
 
+  function changeSituation({ detail }) {
+    situation = detail
+    if (webSocketOpen) {
+      submit()
+    }
+  }
+
   function openWebSocket() {
     webSocket = new Sockette(
       new URL("ws", $session.apiWebSocketBaseUrl).toString(),
@@ -189,7 +54,12 @@
           }
         },
         // onopen: (event) => console.log("[WebSocket] Connected!", event),
-        onopen: () => submit(),
+        onopen: () => {
+          webSocketOpen = true
+          if (situation !== undefined) {
+            submit()
+          }
+        },
         // onreconnect: (event) =>
         //   console.log("[WebSocket] Reconnecting...", event),
         // onmaximum: (event) =>
@@ -202,11 +72,15 @@
   }
 
   function submit() {
+    if (situation === undefined) {
+      return
+    }
     deltaByCode = {}
     webSocket.send(
       JSON.stringify({
         decomposition,
         situation,
+        period: year.toString(),
       }),
     )
     webSocket.send(
@@ -252,9 +126,16 @@
   }
 </script>
 
-<pre>{JSON.stringify(situation)}</pre>
+<label class="block">
+  Année
+  <input max={2021} min={2013} step="1" type="number" bind:value={year} />
+</label>
+
+<TestCaseEdit on:change={changeSituation} {year} />
 
+<div>
   <button on:click={submit}>Simuler</button>
+</div>
 
 <Waterfall {decomposition} />
 <!-- <pre>{JSON.stringify(simulation, null, 2)}</pre> -->