From bd7ee81f9e1e9438f06a7e3e57c04f725ae87748 Mon Sep 17 00:00:00 2001
From: Peter Bull Hove <peterbullhove@gmail.com>
Date: Fri, 5 Apr 2024 13:31:00 +0200
Subject: [PATCH] feat: hide bridge in relative graph

---
 .../Components/Bridging/BridgeContainer.tsx    | 10 ++++++++--
 .../Components/Bridging/Graphs/BridgeGraph.tsx | 15 +++++++++++----
 web/src/Components/Bridging/InputContainer.tsx | 18 ++++++------------
 web/src/Components/Bridging/styles.ts          |  3 ++-
 4 files changed, 27 insertions(+), 19 deletions(-)

diff --git a/web/src/Components/Bridging/BridgeContainer.tsx b/web/src/Components/Bridging/BridgeContainer.tsx
index cbe1bce..815051f 100644
--- a/web/src/Components/Bridging/BridgeContainer.tsx
+++ b/web/src/Components/Bridging/BridgeContainer.tsx
@@ -117,11 +117,17 @@ export default ({ bridges, mode, setMode, bridgeValue, setValue }: BridgeContain
         />
         <BridgeGraph
           graphData={cumulativeVolumeData}
-          yAxis={'Cumulative Volume (%)'}
+          yAxis={'Cumulative Frequency (Volume %)'}
           sizeFractions={sizeFractions}
           bridges={bridges}
         />
-        <BridgeGraph graphData={volumeData} yAxis={'Volume (%)'} sizeFractions={sizeFractions} bridges={bridges} />
+        <BridgeGraph
+          graphData={volumeData}
+          yAxis={'Relative Frequency (Volume %)'}
+          sizeFractions={sizeFractions}
+          bridges={bridges}
+          showBridge={false}
+        />
       </div>
     </div>
   )
diff --git a/web/src/Components/Bridging/Graphs/BridgeGraph.tsx b/web/src/Components/Bridging/Graphs/BridgeGraph.tsx
index de1a4a1..355577a 100644
--- a/web/src/Components/Bridging/Graphs/BridgeGraph.tsx
+++ b/web/src/Components/Bridging/Graphs/BridgeGraph.tsx
@@ -2,17 +2,18 @@ import React, { useContext, useEffect, useState } from 'react'
 import { Area, AreaChart, CartesianGrid, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts'
 import { ParticleSizeContext } from '../../../Context'
 import { findGraphData } from '../../../Utils'
-import { graphColors } from '../styles'
+import { bridgeColor, graphColors } from '../styles'
 import { Bridge, GraphData } from '../../../Types'
 
 type BridgeGraphProps = {
   yAxis: string
   graphData: GraphData[]
   sizeFractions: number[]
-  bridges: Bridge
+  bridges: Bridge | undefined
+  showBridge?: boolean
 }
 
-export function BridgeGraph({ yAxis, graphData, sizeFractions, bridges }: BridgeGraphProps) {
+export function BridgeGraph({ yAxis, graphData, sizeFractions, bridges, showBridge = true }: BridgeGraphProps) {
   const [particleFromPercentage, setParticleFromPercentage] = useState<string>('0%')
   const [particleToPercentage, setParticleToPercentage] = useState<string>('100%')
   const particleRange = useContext(ParticleSizeContext)
@@ -32,6 +33,10 @@ export function BridgeGraph({ yAxis, graphData, sizeFractions, bridges }: Bridge
     let percentage = (index / sizeFractions.length) * 100
     return `${percentage}%`
   }
+  if (!showBridge) {
+    const { Bridge, ...withoutBridge } = bridges
+    bridges = withoutBridge
+  }
 
   return (
     <div style={{ backgroundColor: 'white', borderRadius: '0.5rem', width: '100%', height: '100%' }}>
@@ -63,7 +68,9 @@ export function BridgeGraph({ yAxis, graphData, sizeFractions, bridges }: Bridge
             <Area
               type='monotone'
               dataKey={name}
-              stroke={graphColors[index % graphColors.length]}
+              stroke={
+                name === 'Bridge' ? bridgeColor : graphColors[(index - (showBridge ? 1 : 0)) % graphColors.length]
+              }
               key={name}
               fill={(name === 'Bridge' && 'url(#particleArea)') || 'transparent'}
               name={name}
diff --git a/web/src/Components/Bridging/InputContainer.tsx b/web/src/Components/Bridging/InputContainer.tsx
index 6e38040..dee2bb2 100644
--- a/web/src/Components/Bridging/InputContainer.tsx
+++ b/web/src/Components/Bridging/InputContainer.tsx
@@ -138,18 +138,12 @@ const InputContainer = ({
         >
           <Typography variant='h3'>Optimal Bridge:</Typography>
           <div style={{ marginInlineStart: '0.5rem' }}>
-            <p>
-              D10: {findDValue(optimalBridgeGraphData, 10, 'Bridge')}
-              {'\u00B5m'}
-            </p>
-            <p>
-              D50: {findDValue(optimalBridgeGraphData, 50, 'Bridge')}
-              {'\u00B5m'}
-            </p>
-            <p>
-              D90: {findDValue(optimalBridgeGraphData, 90, 'Bridge')}
-              {'\u00B5m'}
-            </p>
+            {[10, 50, 90].map(d => (
+              <p>
+                D{d}: {findDValue(optimalBridgeGraphData, d, 'Bridge')}
+                {'\u00B5m'}
+              </p>
+            ))}
           </div>
         </div>
       )}
diff --git a/web/src/Components/Bridging/styles.ts b/web/src/Components/Bridging/styles.ts
index 2a9b15f..b00cbf2 100644
--- a/web/src/Components/Bridging/styles.ts
+++ b/web/src/Components/Bridging/styles.ts
@@ -21,8 +21,9 @@ export const StyledSelect = styled.select`
   background-color: #ffffff;
 `
 
+export const bridgeColor = '#000000'
+
 export const graphColors = [
-  '#000000',
   '#ee2e89',
   '#21d0bb',
   '#2077d9',