From 12bd29194452cf6cc9a2a83eb16648ba5bb36b22 Mon Sep 17 00:00:00 2001
From: Peter Bull Hove <peterbullhove@gmail.com>
Date: Wed, 28 Feb 2024 15:25:02 +0100
Subject: [PATCH] fix: vertical

---
 .../Components/Bridging/BridgeContainer.jsx   | 146 ++++++++++--------
 web/src/Components/Bridging/BridgeGraph.jsx   |   6 +-
 web/src/Pages/Main.tsx                        |   4 +-
 3 files changed, 85 insertions(+), 71 deletions(-)

diff --git a/web/src/Components/Bridging/BridgeContainer.jsx b/web/src/Components/Bridging/BridgeContainer.jsx
index bf6f5f8..c710f5a 100644
--- a/web/src/Components/Bridging/BridgeContainer.jsx
+++ b/web/src/Components/Bridging/BridgeContainer.jsx
@@ -2,17 +2,17 @@ import React, { useContext, useEffect, useState } from 'react'
 import styled from 'styled-components'
 import { Radio, TextField, Typography } from '@equinor/eds-core-react'
 import { FractionsAPI } from '../../Api'
-import { BridgingOption, CeramicDiscsValues } from "../../Enums"
+import { BridgingOption, CeramicDiscsValues } from '../../Enums'
 import { AuthContext } from 'react-oauth2-code-pkce'
-import BridgeGraph from "./BridgeGraph"
-import {Tooltip} from "../Common/Tooltip";
-import {findDValue, findGraphData} from "../../Utils";
+import BridgeGraph from './BridgeGraph'
+import { Tooltip } from '../Common/Tooltip'
+import { findDValue, findGraphData } from '../../Utils'
 import { ErrorToast } from '../Common/Toast'
 
 const InputWrapper = styled.div`
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
+  gap: 10px 5px; 
 `
 
 const RadioWrapper = styled.div`
@@ -36,25 +36,25 @@ export default ({ bridges, mode, setMode, bridgeValue, setValue }) => {
   const [bridgeValueHelperText, setBridgeValueHelperText] = useState(undefined)
   const [bridgeValueVariant, setBridgeValueVariant] = useState(undefined)
   const [optimalBridgeGraphData, setOptimalBridgeGraphData] = useState([])
-   const { token} = useContext(AuthContext)
+  const { token } = useContext(AuthContext)
 
   // Load size fractions once on first render
   useEffect(() => {
     FractionsAPI.getFractionsApi(token)
-        .then(response => {
-          setSizeFractions(response.data.size_fractions)
-        })
-        .catch(error => {
-          ErrorToast(`${error.response.data}`, error.response.status)
-          console.error('fetch error' + error)
-        })
+      .then(response => {
+        setSizeFractions(response.data.size_fractions)
+      })
+      .catch(error => {
+        ErrorToast(`${error.response.data}`, error.response.status)
+        console.error('fetch error' + error)
+      })
   }, [])
 
   useEffect(() => {
-      if (bridges["Bridge"].length && sizeFractions.length ) {
-      const x = (findGraphData(sizeFractions, {"Bridge": bridges["Bridge"]}))
+    if (bridges['Bridge'].length && sizeFractions.length) {
+      const x = findGraphData(sizeFractions, { Bridge: bridges['Bridge'] })
       setOptimalBridgeGraphData(x)
-        }
+    }
   }, [bridges, sizeFractions])
 
   function bridgingOptionChange(event) {
@@ -98,75 +98,89 @@ export default ({ bridges, mode, setMode, bridgeValue, setValue }) => {
   }
 
   return (
-      <div style={{ display: 'flex' }}>
+    <div style={{ display: 'flex' }}>
+      <div style={{backgroundColor: 'white', borderRadius: '4px', padding: '0.5rem'}}>
         <InputWrapper>
-          <Typography variant="h3">Bridging options</Typography>
+          <Typography variant='h3'>Bridging options</Typography>
           <span>Bridging based on:</span>
           <RadioWrapper>
             <Radio
-                label="Permeability"
-                name="group"
-                value={BridgingOption.PERMEABILITY}
-                onChange={bridgingOptionChange}
-                checked={mode === BridgingOption.PERMEABILITY}
+              label='Permeability'
+              name='group'
+              value={BridgingOption.PERMEABILITY}
+              onChange={bridgingOptionChange}
+              checked={mode === BridgingOption.PERMEABILITY}
             />
             <Radio
-                label="Average pore size/crack opening"
-                name="group"
-                value={BridgingOption.AVERAGE_PORESIZE}
-                onChange={bridgingOptionChange}
-                checked={mode === BridgingOption.AVERAGE_PORESIZE}
+              label='Average pore size/crack opening'
+              name='group'
+              value={BridgingOption.AVERAGE_PORESIZE}
+              onChange={bridgingOptionChange}
+              checked={mode === BridgingOption.AVERAGE_PORESIZE}
             />
-            <Tooltip text={'Max poresize/crack opening is the largest pore throat diameter or widest crack/aperture width (fracture width or screen slot opening)'}>
+            <Tooltip
+              text={
+                'Max poresize/crack opening is the largest pore throat diameter or widest crack/aperture width (fracture width or screen slot opening)'
+              }
+            >
               <Radio
-                label="Max pore size/crack opening"
-                name="group"
+                label='Max pore size/crack opening'
+                name='group'
                 value={BridgingOption.MAXIMUM_PORESIZE}
                 onChange={bridgingOptionChange}
                 checked={mode === BridgingOption.MAXIMUM_PORESIZE}
               />
             </Tooltip>
             <Radio
-                label="Ceramic Discs"
-                name="group"
-                value={BridgingOption.CERAMIC_DISCS}
-                onChange={bridgingOptionChange}
-                checked={mode === BridgingOption.CERAMIC_DISCS}
+              label='Ceramic Discs'
+              name='group'
+              value={BridgingOption.CERAMIC_DISCS}
+              onChange={bridgingOptionChange}
+              checked={mode === BridgingOption.CERAMIC_DISCS}
             />
           </RadioWrapper>
           <div style={{ width: '150px' }}>
-            {mode === BridgingOption.CERAMIC_DISCS ?
-                <div style={{display: 'flex', flexDirection: "column"}}>
-                  <label>Ceramic Discs Size</label>
-                  <StyledSelect onChange={event =>onBridgeValueChange(event.target.value)}>
-                    {CeramicDiscsValues.map((value, index)=>{
-                      return <option value={value} index={index+value}>{value}</option>
-                    })}
-                  </StyledSelect>
-                  <small style={{alignSelf: "flex-end"}}>microns</small>
-                </div>
-                :
-                <TextField
-                    label="Value"
-                    type="number"
-                    id="textfield-number"
-                    meta={unit}
-                    value={bridgeValue || 0}
-                    onChange={event=>onBridgeValueChange(event.target.value)}
-                    variant={bridgeValueVariant}
-                    helperText={bridgeValueHelperText}
-                />
-            }
-
+            {mode === BridgingOption.CERAMIC_DISCS ? (
+              <div style={{ display: 'flex', flexDirection: 'column' }}>
+                <label>Ceramic Discs Size</label>
+                <StyledSelect onChange={event => onBridgeValueChange(event.target.value)}>
+                  {CeramicDiscsValues.map((value, index) => {
+                    return (
+                      <option value={value} index={index + value}>
+                        {value}
+                      </option>
+                    )
+                  })}
+                </StyledSelect>
+                <small style={{ alignSelf: 'flex-end' }}>microns</small>
+              </div>
+            ) : (
+              <TextField
+                label='Value'
+                type='number'
+                id='textfield-number'
+                meta={unit}
+                value={bridgeValue || 0}
+                onChange={event => onBridgeValueChange(event.target.value)}
+                variant={bridgeValueVariant}
+                helperText={bridgeValueHelperText}
+              />
+            )}
           </div>
         </InputWrapper>
-        <BridgeGraph bridges={bridges} sizeFractions={sizeFractions}/>
-        {optimalBridgeGraphData.length > 0 && <div>
-          <p>Optimal bridge:</p>
-          <p>D10: {findDValue(optimalBridgeGraphData, 10, "Bridge")}µ</p>
-          <p>D50: {findDValue(optimalBridgeGraphData, 50, "Bridge")}µ</p>
-          <p>D90: {findDValue(optimalBridgeGraphData, 90, "Bridge")}µ</p>
-        </div>}
+        {optimalBridgeGraphData.length > 0 && (
+          <div style={{marginBlockStart: '3rem'}}>
+            <Typography variant='h3'>Optimal Bridge:</Typography>
+            <p>D10: {findDValue(optimalBridgeGraphData, 10, 'Bridge')}µ</p>
+            <p>D50: {findDValue(optimalBridgeGraphData, 50, 'Bridge')}µ</p>
+            <p>D90: {findDValue(optimalBridgeGraphData, 90, 'Bridge')}µ</p>
+          </div>
+        )}
+      </div>
+      <div>
+        <BridgeGraph bridges={bridges} sizeFractions={sizeFractions} />
+        <BridgeGraph bridges={bridges} sizeFractions={sizeFractions} />
       </div>
+    </div>
   )
 }
diff --git a/web/src/Components/Bridging/BridgeGraph.jsx b/web/src/Components/Bridging/BridgeGraph.jsx
index 8acc53b..c86d930 100644
--- a/web/src/Components/Bridging/BridgeGraph.jsx
+++ b/web/src/Components/Bridging/BridgeGraph.jsx
@@ -73,8 +73,8 @@ export function BridgeGraph({ bridges, sizeFractions }) {
   }, [bridges, sizeFractions])
 
   return (
-    <div style={{ paddingLeft: '5%' }}>
-      <AreaChart data={graphData} margin={{ top: 5, right: 30, left: 20, bottom: 5 }} width={750} height={420}>
+    <div>
+      <AreaChart data={graphData} margin={{ top: 5, right: 30, left: 20, bottom: 5 }} width={980} height={420}>
         {/* Defines a gradient applied to the areaPlot to highlight selected particle size range*/}
         <defs>
           <linearGradient id="particleArea">
@@ -96,7 +96,7 @@ export function BridgeGraph({ bridges, sizeFractions }) {
         />
         <YAxis type="number" domain={[0, 100]} ticks={[20, 40, 60, 80, 100]} allowDataOverflow />
         <Tooltip content={<CustomTooltip />} />
-        <Legend />
+        <Legend  verticalAlign='middle' align='right' width={150}/>
         {Object.entries(bridges).map(([name, cumulative], index) => (
           <Area
             type="monotone"
diff --git a/web/src/Pages/Main.tsx b/web/src/Pages/Main.tsx
index 5547f31..2ef92f6 100644
--- a/web/src/Pages/Main.tsx
+++ b/web/src/Pages/Main.tsx
@@ -18,8 +18,8 @@ import { info_circle, open_in_browser } from '@equinor/eds-icons'
 const Body = styled.div`
   display: flex;
   flex-direction: column;
-  padding-left: 3%;
-  padding-right: 3%;
+  padding-left: 1rem;
+  padding-right: 1rem;
   font-family: 'Equinor';
 `
 const StyledLink = styled.a`