Skip to content

Commit

Permalink
fix: vertical
Browse files Browse the repository at this point in the history
  • Loading branch information
@pbullhove
pbullhove committed Feb 28, 2024
1 parent f9da377 commit 12bd291
Show file tree
Hide file tree
Showing 3 changed files with 85 additions and 71 deletions.
146 changes: 80 additions & 66 deletions web/src/Components/Bridging/BridgeContainer.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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`
Expand All @@ -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) {
Expand Down Expand Up @@ -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>
)
}
6 changes: 3 additions & 3 deletions web/src/Components/Bridging/BridgeGraph.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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"
Expand Down
4 changes: 2 additions & 2 deletions web/src/Pages/Main.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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`
Expand Down

0 comments on commit 12bd291

Please sign in to comment.