From 234e12350baa528c20f3adc992d538786944659c Mon Sep 17 00:00:00 2001
From: Maxime Quandalle <maxime@quandalle.com>
Date: Mon, 20 Apr 2020 11:46:13 +0200
Subject: [PATCH] Simplifie l'interface de la fonction makeJsx

---
 source/components/BarChart.tsx                |  1 -
 source/components/StackedBarChart.tsx         |  8 +--
 source/components/TargetSelection.css         | 23 +++-----
 source/components/TargetSelection.tsx         |  2 +-
 source/engine/evaluation.tsx                  | 10 ++--
 source/engine/mecanismViews/Allègement.js     |  5 +-
 source/engine/mecanismViews/Barème.tsx        |  2 +-
 source/engine/mecanismViews/Composantes.js    |  7 +--
 source/engine/mecanismViews/Grille.tsx        |  2 +-
 .../mecanismViews/InversionNumérique.js       |  7 +--
 source/engine/mecanismViews/Product.js        |  2 +-
 source/engine/mecanismViews/Recalcul.tsx      |  2 +-
 .../engine/mecanismViews/TauxProgressif.tsx   |  3 +-
 source/engine/mecanismViews/Variations.js     |  6 +--
 source/engine/{mecanisms.js => mecanisms.tsx} | 25 +++++----
 source/engine/mecanisms/arrondi.tsx           |  5 +-
 source/engine/mecanisms/durée.tsx             |  9 +---
 source/engine/mecanisms/encadrement.tsx       |  9 +---
 source/engine/mecanisms/operation.js          |  2 +-
 source/engine/parse.tsx                       |  3 +-
 source/engine/parseReference.js               | 16 +++---
 source/engine/parseRule.tsx                   |  8 +--
 source/engine/types.ts                        |  1 +
 source/engine/{uniroot.js => uniroot.ts}      | 53 ++++++-------------
 .../AideDéclarationIndépendant/config.yaml    |  5 +-
 .../AideDéclarationIndépendant/index.tsx      | 36 ++++++++-----
 .../mon-entreprise.fr/pages/Stats/Stats.tsx   | 16 ++++--
 27 files changed, 119 insertions(+), 149 deletions(-)
 rename source/engine/{mecanisms.js => mecanisms.tsx} (96%)
 rename source/engine/{uniroot.js => uniroot.ts} (67%)

diff --git a/source/components/BarChart.tsx b/source/components/BarChart.tsx
index d85309a4b..1c70f7d57 100644
--- a/source/components/BarChart.tsx
+++ b/source/components/BarChart.tsx
@@ -1,4 +1,3 @@
-import Value from 'Components/Value'
 import React, { useContext } from 'react'
 import emoji from 'react-easy-emoji'
 import { animated, config, useSpring } from 'react-spring'
diff --git a/source/components/StackedBarChart.tsx b/source/components/StackedBarChart.tsx
index bfc8c6bde..eb1bf3110 100644
--- a/source/components/StackedBarChart.tsx
+++ b/source/components/StackedBarChart.tsx
@@ -1,6 +1,6 @@
 import RuleLink from 'Components/RuleLink'
 import useDisplayOnIntersecting from 'Components/utils/useDisplayOnIntersecting'
-import { EvaluatedRule } from 'Engine/types'
+import { EvaluatedRule, Evaluation, Types } from 'Engine/types'
 import React from 'react'
 import { animated, useSpring } from 'react-spring'
 import { DottedName } from 'Rules'
@@ -83,7 +83,7 @@ export function roundedPercentages(values: Array<number>) {
 type StackedBarChartProps = {
 	data: Array<{
 		color?: string
-		value: number | undefined
+		value: Evaluation<Types>
 		legend: React.ReactNode
 		key: string
 	}>
@@ -93,7 +93,9 @@ export function StackedBarChart({ data }: StackedBarChartProps) {
 	const [intersectionRef, displayChart] = useDisplayOnIntersecting({
 		threshold: 0.5
 	})
-	const percentages = roundedPercentages(data.map(d => d.value ?? 0))
+	const percentages = roundedPercentages(
+		data.map(d => (typeof d.value === 'number' && d.value) || 0)
+	)
 	const dataWithPercentage = data.map((data, index) => ({
 		...data,
 		percentage: percentages[index]
diff --git a/source/components/TargetSelection.css b/source/components/TargetSelection.css
index ba864b014..8220cc04c 100644
--- a/source/components/TargetSelection.css
+++ b/source/components/TargetSelection.css
@@ -15,10 +15,13 @@
 	border-top: none;
 }
 
-#targetSelection .targets > li.small-target * {
-	font-size: 1rem;
+#targetSelection .targets > li.small-target {
+	font-size: 85%;
+}
+#targetSelection .targets > li.small-target .optionTitle a {
 	font-weight: normal;
 }
+
 #targetSelection .targets > li.small-target {
 	border-top: none;
 }
@@ -47,9 +50,6 @@
 
 #targetSelection .targets > li p {
 	margin: 0.2em 0 0;
-	font-style: italic;
-	opacity: 0.8;
-	line-height: 1.2rem;
 }
 
 #targetSelection li .header {
@@ -60,12 +60,9 @@
 	display: none;
 }
 
-#targetSelection .optionTitle {
-	font-size: 115%;
-	font-weight: 600;
-}
 #targetSelection .optionTitle a {
 	color: inherit;
+	font-weight: bold;
 	text-decoration: none;
 }
 #targetSelection .optionTitle a:hover,
@@ -74,12 +71,8 @@
 }
 
 @media (hover: none) {
-	#targetSelection .optionTitle {
-		border: 1px solid rgba(255, 255, 255, 0.3);
-		border-radius: 0.25em;
-		padding: 0.05em 0.4em;
-		font-size: 125%;
-		font-weight: 400;
+	#targetSelection .optionTitle a {
+		text-decoration: underline;
 	}
 }
 
diff --git a/source/components/TargetSelection.tsx b/source/components/TargetSelection.tsx
index 3df1f5638..214af06d5 100644
--- a/source/components/TargetSelection.tsx
+++ b/source/components/TargetSelection.tsx
@@ -173,7 +173,7 @@ let Header = ({ target }) => {
 						{hackyShowPeriod && ' ' + t('mensuel')}
 					</Link>
 				</span>
-				<p>{target.summary}</p>
+				<p className="ui__ notice">{target.summary}</p>
 			</span>
 		</span>
 	)
diff --git a/source/engine/evaluation.tsx b/source/engine/evaluation.tsx
index 6e96b5ea1..6d9999291 100644
--- a/source/engine/evaluation.tsx
+++ b/source/engine/evaluation.tsx
@@ -23,10 +23,8 @@ import {
 } from './temporal'
 import { ParsedRule, ParsedRules } from './types'
 
-export let makeJsx = node =>
-	typeof node.jsx == 'function'
-		? node.jsx(node.nodeValue, node.explanation, node.unit)
-		: node.jsx
+export let makeJsx = (node: EvaluatedNode): JSX.Element =>
+	typeof node.jsx == 'function' ? node.jsx(node) : <></>
 
 export let collectNodeMissing = node => node.missingVariables || {}
 
@@ -124,7 +122,9 @@ export const evaluateArrayWithFilter = (evaluationFilter, reducer, start) => (
 export let defaultNode = nodeValue => ({
 	nodeValue,
 	// eslint-disable-next-line
-	jsx: nodeValue => <span className="value">{nodeValue}</span>,
+	jsx: ({ nodeValue }: EvaluatedNode) => (
+		<span className="value">{nodeValue}</span>
+	),
 	isDefault: true
 })
 
diff --git a/source/engine/mecanismViews/Allègement.js b/source/engine/mecanismViews/Allègement.js
index 631c7e6e6..902fa8062 100644
--- a/source/engine/mecanismViews/Allègement.js
+++ b/source/engine/mecanismViews/Allègement.js
@@ -3,7 +3,10 @@ import React from 'react'
 import { makeJsx } from '../evaluation'
 import { Node } from './common'
 
-export default function Allègement(nodeValue, rawExplanation) {
+export default function Allègement({
+	nodeValue,
+	explanations: rawExplanation
+}) {
 	// Don't display attributes with default values
 	let explanation = map(k => (k && !k.isDefault ? k : null), rawExplanation)
 	return (
diff --git a/source/engine/mecanismViews/Barème.tsx b/source/engine/mecanismViews/Barème.tsx
index d21dd4d06..f70b0a9c1 100644
--- a/source/engine/mecanismViews/Barème.tsx
+++ b/source/engine/mecanismViews/Barème.tsx
@@ -6,7 +6,7 @@ import './Barème.css'
 import { Node, NodeValuePointer } from './common'
 import { parseUnit } from 'Engine/units'
 
-export default function Barème(nodeValue, explanation, unit) {
+export default function Barème({ nodeValue, explanation, unit }) {
 	return (
 		<Node classes="mecanism barème" name="barème" value={nodeValue} unit={unit}>
 			<ul className="properties">
diff --git a/source/engine/mecanismViews/Composantes.js b/source/engine/mecanismViews/Composantes.js
index 22eae557c..ccc7057dd 100644
--- a/source/engine/mecanismViews/Composantes.js
+++ b/source/engine/mecanismViews/Composantes.js
@@ -7,7 +7,7 @@ import { makeJsx } from '../evaluation'
 import { InlineMecanism, Node } from './common'
 import './Composantes.css'
 
-let Comp = function Composantes({ nodeValue, explanation, unit }) {
+export default function Composantes({ nodeValue, explanation, unit }) {
 	const { i18n } = useTranslation()
 
 	return (
@@ -70,8 +70,3 @@ let Comp = function Composantes({ nodeValue, explanation, unit }) {
 		</Node>
 	)
 }
-
-// eslint-disable-next-line
-export default (nodeValue, explanation, unit) => (
-	<Comp {...{ nodeValue, explanation, unit }} />
-)
diff --git a/source/engine/mecanismViews/Grille.tsx b/source/engine/mecanismViews/Grille.tsx
index d5192a7c2..7bcf367f2 100644
--- a/source/engine/mecanismViews/Grille.tsx
+++ b/source/engine/mecanismViews/Grille.tsx
@@ -3,7 +3,7 @@ import { BarèmeAttributes, TrancheTable } from './Barème'
 import './Barème.css'
 import { Node } from './common'
 
-export default function Grille(nodeValue, explanation, unit) {
+export default function Grille({ nodeValue, explanation, unit }) {
 	return (
 		<Node classes="mecanism barème" name="grille" value={nodeValue} unit={unit}>
 			<ul className="properties">
diff --git a/source/engine/mecanismViews/InversionNumérique.js b/source/engine/mecanismViews/InversionNumérique.js
index aaf3df448..31455db22 100644
--- a/source/engine/mecanismViews/InversionNumérique.js
+++ b/source/engine/mecanismViews/InversionNumérique.js
@@ -3,7 +3,7 @@ import React from 'react'
 import { Node } from './common'
 import './InversionNumérique.css'
 
-let Comp = function InversionNumérique({ nodeValue, explanation }) {
+export default function InversionNumérique({ nodeValue, explanation }) {
 	return (
 		<Node
 			classes="mecanism inversionNumérique"
@@ -50,8 +50,3 @@ let Comp = function InversionNumérique({ nodeValue, explanation }) {
 		</Node>
 	)
 }
-
-//eslint-disable-next-line
-export default (nodeValue, explanation) => (
-	<Comp {...{ nodeValue, explanation }} />
-)
diff --git a/source/engine/mecanismViews/Product.js b/source/engine/mecanismViews/Product.js
index 6a1e13f70..13179759c 100644
--- a/source/engine/mecanismViews/Product.js
+++ b/source/engine/mecanismViews/Product.js
@@ -4,7 +4,7 @@ import { Trans } from 'react-i18next'
 import { Node } from './common'
 import './InversionNumérique.css'
 
-export default function ProductView(nodeValue, explanation, unit) {
+export default function ProductView({ nodeValue, explanation, unit }) {
 	return (
 		// The rate and factor and threshold are given defaut neutral values. If there is nothing to explain, don't display them at all
 		<Node
diff --git a/source/engine/mecanismViews/Recalcul.tsx b/source/engine/mecanismViews/Recalcul.tsx
index e6bb08c0c..3728b2cf5 100644
--- a/source/engine/mecanismViews/Recalcul.tsx
+++ b/source/engine/mecanismViews/Recalcul.tsx
@@ -5,7 +5,7 @@ import { Trans } from 'react-i18next'
 import { DottedName } from 'Rules'
 import { Node } from './common'
 
-export default function Recalcul(nodeValue, explanation) {
+export default function Recalcul({ nodeValue, explanation }) {
 	return (
 		<Node
 			classes="mecanism recalcul"
diff --git a/source/engine/mecanismViews/TauxProgressif.tsx b/source/engine/mecanismViews/TauxProgressif.tsx
index 4259c8dda..2c5e0005e 100644
--- a/source/engine/mecanismViews/TauxProgressif.tsx
+++ b/source/engine/mecanismViews/TauxProgressif.tsx
@@ -3,9 +3,8 @@ import { Trans } from 'react-i18next'
 import { BarèmeAttributes, TrancheTable } from './Barème'
 import './Barème.css'
 import { Node, NodeValuePointer } from './common'
-import { Unit } from 'Engine/units'
 
-export default function TauxProgressif(nodeValue, explanation, unit: Unit) {
+export default function TauxProgressif({ nodeValue, explanation, unit }) {
 	return (
 		<Node
 			classes="mecanism barème"
diff --git a/source/engine/mecanismViews/Variations.js b/source/engine/mecanismViews/Variations.js
index 116e01f3f..6f805ca69 100644
--- a/source/engine/mecanismViews/Variations.js
+++ b/source/engine/mecanismViews/Variations.js
@@ -7,7 +7,7 @@ import { makeJsx } from '../evaluation'
 import { InlineMecanism, Node } from './common'
 import './Variations.css'
 
-let Comp = function Variations({ nodeValue, explanation, unit }) {
+export default function Variations({ nodeValue, explanation, unit }) {
 	let [expandedVariation, toggleVariation] = useState(null)
 	const { i18n } = useTranslation()
 	return (
@@ -107,7 +107,3 @@ let Comp = function Variations({ nodeValue, explanation, unit }) {
 		</Node>
 	)
 }
-// eslint-disable-next-line
-export default (nodeValue, explanation, unit) => (
-	<Comp {...{ nodeValue, explanation, unit }} />
-)
diff --git a/source/engine/mecanisms.js b/source/engine/mecanisms.tsx
similarity index 96%
rename from source/engine/mecanisms.js
rename to source/engine/mecanisms.tsx
index c6f5440c6..8fabae2f2 100644
--- a/source/engine/mecanisms.js
+++ b/source/engine/mecanisms.tsx
@@ -39,17 +39,19 @@ import Recalcul from './mecanismViews/Recalcul'
 import Somme from './mecanismViews/Somme'
 import uniroot from './uniroot'
 import { parseUnit } from './units'
+import { EvaluatedRule } from './types'
 
 export let mecanismOneOf = (recurse, k, v) => {
 	if (!is(Array, v)) throw new Error('should be array')
 
 	let explanation = map(recurse, v)
 
-	let jsx = (nodeValue, explanation) => (
+	let jsx = ({ nodeValue, explanation, unit }) => (
 		<Node
 			classes="mecanism conditions list"
 			name="une de ces conditions"
 			value={nodeValue}
+			unit={unit}
 		>
 			<ul>
 				{explanation.map((item, i) => (
@@ -95,11 +97,12 @@ export let mecanismAllOf = (recurse, k, v) => {
 
 	let explanation = map(recurse, v)
 
-	let jsx = (nodeValue, explanation) => (
+	let jsx = ({ nodeValue, explanation, unit }) => (
 		<Node
 			classes="mecanism conditions list"
 			name="toutes ces conditions"
 			value={nodeValue}
+			unit={unit}
 		>
 			<ul>
 				{explanation.map((item, i) => (
@@ -194,13 +197,15 @@ let evaluateInversion = (oldCache, situationGate, parsedRules, node) => {
 						const candidateNode = evaluateWithValue(x)
 						return (
 							candidateNode.nodeValue -
-							convertNodeToUnit(candidateNode.unit, inversedWith).nodeValue
+							// TODO: convertNodeToUnit migth return null or false
+							(convertNodeToUnit(candidateNode.unit, inversedWith)
+								.nodeValue as number)
 						)
 					},
 					node.explanation.negativeValuesAllowed ? -1000000 : 0,
 					100000000,
-					0.1, // tolerance
-					10 // number of iteration max
+					0.1,
+					10
 			  )
 
 	if (nodeValue === undefined) {
@@ -312,7 +317,7 @@ export let mecanismSum = (recurse, k, v) => {
 	return {
 		evaluate,
 		// eslint-disable-next-line
-		jsx: (nodeValue, explanation, unit) => (
+		jsx: ({ nodeValue, explanation, unit }: EvaluatedRule) => (
 			<Somme nodeValue={nodeValue} explanation={explanation} unit={unit} />
 		),
 		explanation,
@@ -520,11 +525,12 @@ export let mecanismMax = (recurse, k, v) => {
 	}
 	let evaluate = evaluateArray(max, Number.NEGATIVE_INFINITY)
 
-	let jsx = (nodeValue, explanation) => (
+	let jsx = ({ nodeValue, explanation, unit }) => (
 		<Node
 			classes="mecanism list maximum"
 			name="le maximum de"
 			value={nodeValue}
+			unit={unit}
 		>
 			<ul>
 				{explanation.map((item, i) => (
@@ -553,11 +559,12 @@ export let mecanismMin = (recurse, k, v) => {
 
 	let evaluate = evaluateArray(min, Infinity)
 
-	let jsx = (nodeValue, explanation) => (
+	let jsx = ({ nodeValue, explanation, unit }) => (
 		<Node
 			classes="mecanism list minimum"
 			name="le minimum de"
 			value={nodeValue}
+			unit={unit}
 		>
 			<ul>
 				{explanation.map((item, i) => (
@@ -614,7 +621,7 @@ export let mecanismSynchronisation = (recurse, k, v) => {
 	return {
 		explanation: { ...v, API: recurse(v.API) },
 		evaluate,
-		jsx: function Synchronisation(nodeValue, explanation) {
+		jsx: function Synchronisation({ explanation }) {
 			return (
 				<p>
 					Obtenu à partir de la saisie <SimpleRuleLink rule={explanation.API} />
diff --git a/source/engine/mecanisms/arrondi.tsx b/source/engine/mecanisms/arrondi.tsx
index 24df2d4c7..a798b7881 100644
--- a/source/engine/mecanisms/arrondi.tsx
+++ b/source/engine/mecanisms/arrondi.tsx
@@ -96,10 +96,7 @@ export default (recurse, k, v) => {
 	return {
 		explanation,
 		evaluate,
-		// eslint-disable-next-line
-		jsx: (nodeValue, explanation) => (
-			<MecanismRound nodeValue={nodeValue} explanation={explanation} />
-		),
+		jsx: MecanismRound,
 		category: 'mecanism',
 		name: 'arrondi',
 		type: 'numeric',
diff --git a/source/engine/mecanisms/durée.tsx b/source/engine/mecanisms/durée.tsx
index 20f29526b..5e925019f 100644
--- a/source/engine/mecanisms/durée.tsx
+++ b/source/engine/mecanisms/durée.tsx
@@ -69,14 +69,7 @@ export default (recurse, k, v) => {
 
 	return {
 		evaluate,
-		// eslint-disable-next-line
-		jsx: (nodeValue, explanation, unit) => (
-			<MecanismDurée
-				nodeValue={nodeValue}
-				explanation={explanation}
-				unit={unit}
-			/>
-		),
+		jsx: MecanismDurée,
 		explanation,
 		category: 'mecanism',
 		name: 'Durée',
diff --git a/source/engine/mecanisms/encadrement.tsx b/source/engine/mecanisms/encadrement.tsx
index 547a38157..0eac500a4 100644
--- a/source/engine/mecanisms/encadrement.tsx
+++ b/source/engine/mecanisms/encadrement.tsx
@@ -96,14 +96,7 @@ export default (recurse, k, v) => {
 
 	return {
 		evaluate,
-		// eslint-disable-next-line
-		jsx: (nodeValue, explanation, unit) => (
-			<MecanismEncadrement
-				nodeValue={nodeValue}
-				explanation={explanation}
-				unit={unit}
-			/>
-		),
+		jsx: MecanismEncadrement,
 		explanation,
 		category: 'mecanism',
 		name: 'encadrement',
diff --git a/source/engine/mecanisms/operation.js b/source/engine/mecanisms/operation.js
index 34048b5b5..cfea025e7 100644
--- a/source/engine/mecanisms/operation.js
+++ b/source/engine/mecanisms/operation.js
@@ -86,7 +86,7 @@ export default (k, operatorFunction, symbol) => (recurse, k, v) => {
 	let [node1, node2] = explanation
 	let unit = inferUnit(k, [node1.unit, node2.unit])
 
-	let jsx = (nodeValue, explanation, unit) => (
+	let jsx = ({ nodeValue, explanation, unit }) => (
 		<Node classes={'inlineExpression ' + k} value={nodeValue} unit={unit}>
 			<span className="nodeContent">
 				{(explanation[0].nodeValue !== 0 ||
diff --git a/source/engine/parse.tsx b/source/engine/parse.tsx
index a8604afde..a3428bfd4 100644
--- a/source/engine/parse.tsx
+++ b/source/engine/parse.tsx
@@ -44,6 +44,7 @@ import {
 	mecanismSynchronisation
 } from './mecanisms'
 import { parseReferenceTransforms } from './parseReference'
+import { EvaluatedRule } from './types'
 
 export const parse = (rules, rule, parsedRules) => rawNode => {
 	if (rawNode == null) {
@@ -240,7 +241,7 @@ const statelessParseFunction = {
 		nodeValue: v.nodeValue,
 		unit: v.unit,
 		// eslint-disable-next-line
-		jsx: (nodeValue, _, unit) => (
+		jsx: ({ nodeValue, unit }: EvaluatedRule) => (
 			<span className={v.type}>
 				{formatValue({
 					unit,
diff --git a/source/engine/parseReference.js b/source/engine/parseReference.js
index e1fe3722d..e5cb029bb 100644
--- a/source/engine/parseReference.js
+++ b/source/engine/parseReference.js
@@ -230,15 +230,13 @@ export let parseReference = (
 	return {
 		evaluate: evaluateReference(filter, rule.dottedName),
 		//eslint-disable-next-line react/display-name
-		jsx: (nodeValue, _, nodeUnit) => (
-			<>
-				<Leaf
-					className="variable filtered"
-					rule={parsedRules[dottedName]}
-					nodeValue={nodeValue}
-					unit={nodeUnit || parsedRules[dottedName]?.unit || unit}
-				/>
-			</>
+		jsx: ({ nodeValue, unit: nodeUnit }) => (
+			<Leaf
+				className="variable filtered"
+				rule={parsedRules[dottedName]}
+				nodeValue={nodeValue}
+				unit={nodeUnit || parsedRules[dottedName]?.unit || unit}
+			/>
 		),
 		name: partialReference,
 		category: 'reference',
diff --git a/source/engine/parseRule.tsx b/source/engine/parseRule.tsx
index 9d1788169..8b0b7f97e 100644
--- a/source/engine/parseRule.tsx
+++ b/source/engine/parseRule.tsx
@@ -85,7 +85,7 @@ export default function<Names extends string>(
 			parents.map(parent => {
 				let node = parse(rules, rule, parsedRules)(parent)
 
-				let jsx = (nodeValue, explanation) =>
+				let jsx = ({ nodeValue, explanation }) =>
 					nodeValue === null ? (
 						<div>Active seulement si {makeJsx(explanation)}</div>
 					) : nodeValue === true ? (
@@ -143,7 +143,7 @@ export default function<Names extends string>(
 
 			let child = parse(rules, rule, parsedRules)(value)
 
-			let jsx = (_nodeValue, explanation) => makeJsx(explanation)
+			let jsx = ({ explanation }) => makeJsx(explanation)
 
 			return {
 				evaluate,
@@ -205,7 +205,7 @@ export default function<Names extends string>(
 			}
 		},
 
-		jsx: (_nodeValue, { isDisabledBy }) => {
+		jsx: ({ explanation: { isDisabledBy } }) => {
 			return (
 				isDisabledBy.length > 0 && (
 					<>
@@ -248,7 +248,7 @@ let evolveCond = (dottedName, rule, rules, parsedRules) => value => {
 
 	let child = parse(rules, rule, parsedRules)(value)
 
-	let jsx = (nodeValue, explanation, unit) => (
+	let jsx = ({ nodeValue, explanation, unit }) => (
 		<Node
 			classes="ruleProp mecanism cond"
 			name={dottedName}
diff --git a/source/engine/types.ts b/source/engine/types.ts
index 288f5c843..70c998b8b 100644
--- a/source/engine/types.ts
+++ b/source/engine/types.ts
@@ -67,6 +67,7 @@ export type EvaluatedNode<
 	nodeValue: Evaluation<T>
 	explanation?: Object
 	isDefault?: boolean
+	jsx?: (node: EvaluatedNode) => JSX.Element
 	missingVariables: Partial<Record<Names, number>>
 } & (T extends number
 	? {
diff --git a/source/engine/uniroot.js b/source/engine/uniroot.ts
similarity index 67%
rename from source/engine/uniroot.js
rename to source/engine/uniroot.ts
index b621243b9..d396c3564 100644
--- a/source/engine/uniroot.js
+++ b/source/engine/uniroot.ts
@@ -8,32 +8,32 @@
  * Copyright (c) 2012 Borgar Thorsteinsson <borgar@borgar.net>
  * MIT License, http://www.opensource.org/licenses/mit-license.php
  *
- * @param {function} function for which the root is sought.
- * @param {number} the lower point of the interval to be searched.
- * @param {number} the upper point of the interval to be searched.
- * @param {number} the desired accuracy (convergence tolerance).
- * @param {number} the maximum number of iterations.
+ * @param {function} func function for which the root is sought.
+ * @param {number} lowerLimit the lower point of the interval to be searched.
+ * @param {number} upperLimit the upper point of the interval to be searched.
+ * @param {number} errorTol the desired accuracy (convergence tolerance).
+ * @param {number} maxIter the maximum number of iterations.
  * @returns an estimate for the root within accuracy.
  *
  */
 export default function uniroot(
-	func,
-	lowerLimit,
-	upperLimit,
-	errorTol,
-	maxIter
+	func: (x: number) => number,
+	lowerLimit: number,
+	upperLimit: number,
+	errorTol: number,
+	maxIter: number
 ) {
-	var a = lowerLimit,
+	let a = lowerLimit,
 		b = upperLimit,
 		c = a,
 		fa = func(a),
 		fb = func(b),
 		fc = fa,
-		tol_act, // Actual tolerance
-		new_step, // Step at this iteration
-		prev_step, // Distance from the last but one to the last approximation
-		p, // Interpolation step is calculated in the form p/q; division is delayed until the last moment
-		q
+		tol_act: number, // Actual tolerance
+		new_step: number, // Step at this iteration
+		prev_step: number, // Distance from the last but one to the last approximation
+		p: number, // Interpolation step is calculated in the form p/q; division is delayed until the last moment
+		q: number
 
 	errorTol = errorTol || 0
 	maxIter = maxIter || 1000
@@ -57,7 +57,7 @@ export default function uniroot(
 		// Decide if the interpolation can be tried
 		if (Math.abs(prev_step) >= tol_act && Math.abs(fa) > Math.abs(fb)) {
 			// If prev_step was large enough and was in true direction, Interpolatiom may be tried
-			var t1, cb, t2
+			let t1: number, cb: number, t2: number
 			cb = c - b
 			if (a === c) {
 				// If we have only two distinct points linear interpolation can only be applied
@@ -101,22 +101,3 @@ export default function uniroot(
 		}
 	}
 }
-
-/*
-var test_counter;
-function f1 (x) { test_counter++; return (Math.pow(x,2)-1)*x - 5; }
-function f2 (x) { test_counter++; return Math.cos(x)-x; }
-function f3 (x) { test_counter++; return Math.sin(x)-x; }
-function f4 (x) { test_counter++; return (x + 3) * Math.pow(x - 1, 2); }
-[
-  [f1, 2, 3],
-  [f2, 2, 3],
-  [f2, -1, 3],
-  [f3, -1, 3],
-  [f4, -4, 4/3]
-].forEach(function (args) {
-  test_counter = 0;
-  var root = uniroot.apply( pv, args );
-  ;;;console.log( 'uniroot:', args.slice(1), root, test_counter );
-})
-*/
diff --git a/source/sites/mon-entreprise.fr/pages/Gérer/AideDéclarationIndépendant/config.yaml b/source/sites/mon-entreprise.fr/pages/Gérer/AideDéclarationIndépendant/config.yaml
index a73ae3d23..72cd2ceb6 100644
--- a/source/sites/mon-entreprise.fr/pages/Gérer/AideDéclarationIndépendant/config.yaml
+++ b/source/sites/mon-entreprise.fr/pages/Gérer/AideDéclarationIndépendant/config.yaml
@@ -5,7 +5,8 @@ objectifs:
   - aide déclaration revenu indépendant 2019 . CFP
   - aide déclaration revenu indépendant 2019 . total charges sociales déductible
   - aide déclaration revenu indépendant 2019 . assiette sociale
+
 situation:
-  dirigeant: 'indépendant'
+  dirigeant: "'indépendant'"
   aide déclaration revenu indépendant 2019: true
-unités par défaut: ['€/an']
+unité par défaut: '€/an'
diff --git a/source/sites/mon-entreprise.fr/pages/Gérer/AideDéclarationIndépendant/index.tsx b/source/sites/mon-entreprise.fr/pages/Gérer/AideDéclarationIndépendant/index.tsx
index 975a9a864..988be69ff 100644
--- a/source/sites/mon-entreprise.fr/pages/Gérer/AideDéclarationIndépendant/index.tsx
+++ b/source/sites/mon-entreprise.fr/pages/Gérer/AideDéclarationIndépendant/index.tsx
@@ -26,6 +26,7 @@ import { CompanySection } from '../Home'
 import simulationConfig from './config.yaml'
 import { Results } from './Result'
 import { useNextQuestions } from 'Components/utils/useNextQuestion'
+import { Dot } from 'recharts'
 
 const lauchComputationWhenResultsInViewport = () => {
 	const dottedName = 'dirigeant . rémunération totale'
@@ -58,11 +59,13 @@ const lauchComputationWhenResultsInViewport = () => {
 export default function AideDéclarationIndépendant() {
 	const dispatch = useDispatch()
 	const rules = useContext(EngineContext).getParsedRules()
-
 	const company = useSelector(
 		(state: RootState) => state.inFranceApp.existingCompany
 	)
-	dispatch(setSimulationConfig(simulationConfig, true))
+	useEffect(() => {
+		dispatch(setSimulationConfig(simulationConfig, true))
+	}, [])
+
 	const {
 		resultsRef,
 		displayForm,
@@ -163,8 +166,9 @@ export default function AideDéclarationIndépendant() {
 							<SimpleField dottedName="entreprise . date de création" />
 							<SubSection dottedName="aide déclaration revenu indépendant 2019 . nature de l'activité" />
 							{/* PLNR */}
-							<SimpleField dottedName="dirigeant . indépendant . cotisations et contributions . cotisations . retraite complémentaire . taux spécifique PLNR" />
+							<SimpleField dottedName="entreprise . catégorie d'activité . débit de tabac" />
 							<SimpleField dottedName="dirigeant . indépendant . cotisations et contributions . cotisations . déduction tabac" />
+							<SimpleField dottedName="dirigeant . indépendant . cotisations et contributions . cotisations . retraite complémentaire . taux spécifique PLNR" />
 
 							<h2>
 								<Trans>Situation personnelle</Trans>
@@ -222,17 +226,18 @@ function SubSection({
 	const nextSteps = useNextQuestions()
 	const situation = useSelector(situationSelector)
 	const title = hideTitle ? null : ruleTitle
-	const subQuestions = Object.values(parsedRules).filter(
-		({ dottedName, question }) =>
-			Boolean(question) &&
-			dottedName.startsWith(sectionDottedName) &&
-			(Object.keys(situation).includes(dottedName) ||
-				nextSteps.includes(dottedName))
-	)
+	const subQuestions = [
+		...(Object.keys(situation) as Array<DottedName>),
+		...nextSteps
+	].filter(nextStep => {
+		const { dottedName, question } = parsedRules[nextStep]
+		return !!question && dottedName.startsWith(sectionDottedName)
+	})
+
 	return (
 		<>
 			{!!subQuestions.length && title && <h3>{title}</h3>}
-			{subQuestions.map(({ dottedName }) => (
+			{subQuestions.map(dottedName => (
 				<SimpleField key={dottedName} dottedName={dottedName} />
 			))}
 		</>
@@ -246,10 +251,11 @@ type SimpleFieldProps = {
 }
 function SimpleField({ dottedName, question, summary }: SimpleFieldProps) {
 	const dispatch = useDispatch()
-	const evaluatedRule = useEvaluation(dottedName)
+	const evaluatedRule = useEvaluation(dottedName, { useDefaultValues: false })
 	const rules = useContext(EngineContext).getParsedRules()
 	const value = useSelector(situationSelector)[dottedName]
 	const [currentValue, setCurrentValue] = useState(value)
+
 	const dispatchValue = useCallback(
 		value => {
 			dispatch(updateSituation(dottedName, value))
@@ -268,8 +274,10 @@ function SimpleField({ dottedName, question, summary }: SimpleFieldProps) {
 	useEffect(() => {
 		setCurrentValue(value)
 	}, [value])
-
-	if (!evaluatedRule.isApplicable) {
+	if (
+		evaluatedRule.isApplicable === false ||
+		evaluatedRule.isApplicable === null
+	) {
 		return null
 	}
 	return (
diff --git a/source/sites/mon-entreprise.fr/pages/Stats/Stats.tsx b/source/sites/mon-entreprise.fr/pages/Stats/Stats.tsx
index 5b73e8e21..37241b026 100644
--- a/source/sites/mon-entreprise.fr/pages/Stats/Stats.tsx
+++ b/source/sites/mon-entreprise.fr/pages/Stats/Stats.tsx
@@ -190,11 +190,19 @@ export default function Stats() {
 				<h2>Avis des visiteurs</h2>
 				<Indicators>
 					<Indicator
-						main={formatPercentage(stats.feedback.simulator)}
+						main={formatValue({
+							nodeValue: stats.feedback.simulator,
+							unit: '%',
+							language: 'fr'
+						})}
 						subTitle="Taux de satisfaction sur les simulateurs"
 					/>
 					<Indicator
-						main={formatPercentage(stats.feedback.content)}
+						main={formatValue({
+							nodeValue: stats.feedback.content,
+							unit: '%',
+							language: 'fr'
+						})}
 						subTitle="Taux de satisfaction sur le contenu"
 					/>
 				</Indicators>
@@ -315,7 +323,7 @@ function LineChartVisits({ periodicity }: LineChartVisitsProps) {
 				<YAxis
 					dataKey="visiteurs"
 					tickFormatter={tickItem =>
-						formatValue({ value: tickItem, language: 'fr' })
+						formatValue({ nodeValue: tickItem, language: 'fr' })
 					}
 				/>
 				{periodicity === 'daily' ? (
@@ -391,7 +399,7 @@ const CustomTooltip = ({
 				},
 				{
 					value: formatValue({
-						value: payload[0].payload.visiteurs,
+						nodeValue: payload[0].payload.visiteurs,
 						language: 'fr'
 					}),
 					unit: ' visiteurs'