Remove duplicate sankey import code

Author: Erik van Velzen

frontend/components/IJzerboeren/Sankey/IronPowderProcessSankey.tsx

@@ -1,7 +1,7 @@
 
 import {SankeyLink} from "@/components/IJzerboeren/Sankey/link"
 import {FunctionComponent} from "react"
-import dynamic from "next/dynamic"
+import {IronPowderSankey} from "@/components/IJzerboeren/Sankey/dynamic-import"
 
 /**
  Wind + zon 100%
@@ -80,14 +80,8 @@ function* linkGenerator(includeLoss: boolean): Generator<SankeyLink> {
 
 const links = Array.from(linkGenerator(false))
 
-// This prevents an issue with server-side rendering
-const IronPowderSankey = dynamic(
-    () => import('../Sankey/Sankey').then(res => res.IronPowderSankey),
-    { ssr: false }
-)
-
 export const IronPowderProcessSankey: FunctionComponent = () => (
-    <IronPowderSankey links={links} maxWidth="" svgHeight={200} />
+    <IronPowderSankey links={links} maxWidth="" />
 )
 
 function ratio(input: number, ratio: number): [number, number] {

frontend/components/IJzerboeren/Sankey/Sankey.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import {FunctionComponent, useLayoutEffect, useMemo, useRef} from "react"
-import {uniq, uniqBy} from "lodash"
+import {uniq, uniqBy, merge} from "lodash"
 import { useRandomInt } from "@/utils/useRandomInt"
 import Plotly, {SankeyData} from "plotly.js-dist-min"
 import chroma from "chroma-js";
@@ -137,23 +137,23 @@ function doTransition(divId: string, oldLinks: SankeyLink[], newLinks: SankeyLin
 export const IronPowderSankey: FunctionComponent<{
     links: SankeyLink[]
     maxWidth?: string,
-    svgHeight?: number,
+    plotlyLayout?: Partial<Plotly.Layout>,
 }> = ({
     links,
     maxWidth = "50rem",
-    svgHeight = 600,
+    plotlyLayout = {},
 }) => {
     const divId = "sankey" + useRandomInt()
     const divRef = useRef<HTMLDivElement | null>(null)
 
     const previousLinks = useRef<SankeyLink[] | null>(null)
 
     const width = divRef.current?.clientWidth;
-    const layout = useMemo(() => ({
+    const layout = useMemo(() => (merge({
         ...plotlySankeyLayout,
         width,
         // height: svgHeight
-    }), [width]);
+    }, plotlyLayout)), [width]);
 
     useLayoutEffect(() => {
         if (previousLinks.current === null) {

frontend/components/IJzerboeren/Sankey/dynamic-import.ts

@@ -0,0 +1,7 @@
+import dynamic from "next/dynamic"
+
+// Importing like this prevents an issue with server-side rendering
+export const IronPowderSankey = dynamic(
+    () => import('../Sankey/Sankey').then(res => res.IronPowderSankey),
+    { ssr: false }
+)

frontend/components/IJzerboeren/Step1/Step1.tsx

@@ -2,17 +2,11 @@ import { KpiRow } from "@/components/IJzerboeren/KPIs/KpiRow"
 import {heatPumpKpis, heatPumpSankeyLinks} from "@/components/IJzerboeren/Step1/step-1-data"
 import {TwoColumnSimulationLayout} from "@/components/Blocks/SectionBlock/TwoColumn"
 import {FunctionComponent} from "react"
-import dynamic from 'next/dynamic'
 import {GelijktijdigheidKpi} from "@/components/IJzerboeren/KPIs/GelijktijdigheidKPI"
 import {LCOEVerwarmen} from "@/components/IJzerboeren/KPIs/LCOEVerwarmen"
 import {CO2EmissionKPI} from "@/components/IJzerboeren/KPIs/CO2EmissionKPI"
 import rawHtml from "@/components/RawHtml/RawHtml.module.css"
-
-// Importing like this prevents an issue with server-side rendering
-const IronPowderSankey = dynamic(
-    () => import('../Sankey/Sankey').then(res => res.IronPowderSankey),
-    { ssr: false }
-)
+import {IronPowderSankey} from "@/components/IJzerboeren/Sankey/dynamic-import"
 
 export const Step1: FunctionComponent = () => {
     return (

frontend/components/IJzerboeren/Step2/Step2.tsx

@@ -4,18 +4,12 @@ import {step2Data, Step2Outputs} from "@/components/IJzerboeren/Step2/step2-data
 import {useStateWithHistory} from "@/components/IJzerboeren/useStateWithHistory"
 import {TwoColumnSimulationLayout} from "@/components/Blocks/SectionBlock/TwoColumn"
 import {FunctionComponent} from "react"
-import dynamic from "next/dynamic"
 import {GelijktijdigheidKpi} from "@/components/IJzerboeren/KPIs/GelijktijdigheidKPI"
 import {LCOEVerwarmen} from "@/components/IJzerboeren/KPIs/LCOEVerwarmen"
 import {CO2EmissionKPI} from "@/components/IJzerboeren/KPIs/CO2EmissionKPI"
 import {HeatingType} from "@/components/IJzerboeren/HeatingType/heating-type"
 import rawHtml from "@/components/RawHtml/RawHtml.module.css"
-
-// This prevents an issue with server-side rendering
-const IronPowderSankey = dynamic(
-    () => import('../Sankey/Sankey').then(res => res.IronPowderSankey),
-    { ssr: false }
-)
+import {IronPowderSankey} from "@/components/IJzerboeren/Sankey/dynamic-import"
 
 export const Step2: FunctionComponent = () => {
     const [heatingType, previousHeatingType, setHeatingType] =

frontend/components/IJzerboeren/Step3/Step3.tsx

@@ -4,19 +4,13 @@ import {Step2Outputs} from "@/components/IJzerboeren/Step2/step2-data"
 import {useStateWithHistory} from "@/components/IJzerboeren/useStateWithHistory"
 import {TwoColumnSimulationLayout} from "@/components/Blocks/SectionBlock/TwoColumn"
 import {FunctionComponent} from "react"
-import dynamic from "next/dynamic"
 import {GelijktijdigheidKpi} from "@/components/IJzerboeren/KPIs/GelijktijdigheidKPI"
 import {LCOEVerwarmen} from "@/components/IJzerboeren/KPIs/LCOEVerwarmen"
 import {CO2EmissionKPI} from "@/components/IJzerboeren/KPIs/CO2EmissionKPI"
 import {step3Data} from "@/components/IJzerboeren/Step3/step3-data"
 import {HeatingType} from "@/components/IJzerboeren/HeatingType/heating-type"
 import rawHtml from "@/components/RawHtml/RawHtml.module.css"
-
-// This prevents an issue with server-side rendering
-const IronPowderSankey = dynamic(
-    () => import('../Sankey/Sankey').then(res => res.IronPowderSankey),
-    { ssr: false }
-)
+import {IronPowderSankey} from "@/components/IJzerboeren/Sankey/dynamic-import"
 
 export const Step3: FunctionComponent = () => {
     const [heatingType, previousHeatingType, setHeatingType] =