LinkedVariables.svelte

<script lang="ts">
  import {
    isChildOrDescendant,
    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 "./VariableValueChange.svelte"
  import { iterToDepth } from "$lib/iterators"
  import {
    isNullVariableValueByCalculationName,
    variableValueByCalculationNameFromEvaluation,
  } from "$lib/calculations.svelte"
  import { newSimulationUrl } from "$lib/urls"

  interface Props {
    displayMode: DisplayMode
    evaluationByName: EvaluationByName
    situationIndex: number
    variableSummaryByName: VariableByName
    decomposition: Decomposition
    depth: number
    visibleChildren: DecompositionReference[] | undefined
  }

  let {
    displayMode,
    evaluationByName,
    situationIndex,
    variableSummaryByName,
    decomposition,
    depth,
    visibleChildren,
  }: Props = $props()

  const variableSummary =
    billName === undefined
      ? variableSummaryByName[displayMode.parametersVariableName!]
      : variableSummaryByNameByReformName[billName][
          displayMode.parametersVariableName!
        ]

  const linkedVariablesList =
    variableSummary !== undefined
      ? [
          variableSummary.linked_output_variables?.filter(
            (variableName) =>
              !variableSummary.linked_added_variables?.includes(variableName),
          ),
          variableSummary.linked_other_variables?.filter(
            (variableName) =>
              !variableSummary.linked_added_variables?.includes(variableName) &&
              !variableSummary.linked_output_variables?.includes(variableName),
          ),
        ].filter((value) => value !== undefined && value.length > 0)
      : undefined
</script>

{#if linkedVariablesList !== undefined && linkedVariablesList.length > 0}
  <div class="fond flex px-4">
    <!--Indentation pour chaque niveau de l'arbre, illustré par une bordure-->
    {#each iterToDepth(depth)}
      <div
        class={`min-h-full border-l-2 bg-white pl-1 pr-2 ${