Skip to content

Commit

Permalink
fix: tabs
Browse files Browse the repository at this point in the history
  • Loading branch information
@pbullhove
pbullhove committed Feb 28, 2024
1 parent f9da377 commit 6d2d702
Show file tree
Hide file tree
Showing 2 changed files with 105 additions and 85 deletions.
188 changes: 104 additions & 84 deletions web/src/Components/Bridging/BridgeContainer.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,20 @@
import React, { useContext, useEffect, useState } from 'react'
import styled from 'styled-components'
import { Radio, TextField, Typography } from '@equinor/eds-core-react'
import { Radio, TextField, Typography, Tabs } 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 { findGraphData } from '../../Utils'
import { ErrorToast } from '../Common/Toast'

const InputWrapper = styled.div`
display: flex;
flex-direction: column;
justify-content: space-between;
background-color: white;
border-radius: 4px 0 4px 4px;
padding: 1rem;
`

const RadioWrapper = styled.div`
Expand All @@ -36,25 +38,29 @@ 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)
const [activeTab, setActiveTab] = useState(1)
const handleChange = index => {
setActiveTab(index)
}

// 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 +104,89 @@ export default ({ bridges, mode, setMode, bridgeValue, setValue }) => {
}

return (
<div style={{ display: 'flex' }}>
<InputWrapper>
<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}
/>
<div style={{ display: 'flex' }}>
<InputWrapper>
<Typography variant='h3'>Bridging options</Typography>
<div>Bridging based on:</div>
<RadioWrapper>
<Radio
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}
/>
<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="Average pore size/crack opening"
name="group"
value={BridgingOption.AVERAGE_PORESIZE}
onChange={bridgingOptionChange}
checked={mode === BridgingOption.AVERAGE_PORESIZE}
label='Max pore size/crack opening'
name='group'
value={BridgingOption.MAXIMUM_PORESIZE}
onChange={bridgingOptionChange}
checked={mode === BridgingOption.MAXIMUM_PORESIZE}
/>
<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"
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}
</Tooltip>
<Radio
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}
/>
</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}
/>
}

</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>}
</div>
)}
</div>
</InputWrapper>
<Tabs activeTab={activeTab} onChange={handleChange}>
<Tabs.List>
<Tabs.Tab>Cumulative</Tabs.Tab>
<Tabs.Tab>Relative</Tabs.Tab>
</Tabs.List>
<Tabs.Panels conditionalRender>
<Tabs.Panel key={1}>
<BridgeGraph bridges={bridges} sizeFractions={sizeFractions} />
</Tabs.Panel>
<Tabs.Panel key={2}>
<BridgeGraph bridges={bridges} sizeFractions={sizeFractions} />
</Tabs.Panel>
</Tabs.Panels>
</Tabs>
</div>
)
}
2 changes: 1 addition & 1 deletion web/src/Components/Bridging/BridgeGraph.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ export function BridgeGraph({ bridges, sizeFractions }) {
}, [bridges, sizeFractions])

return (
<div style={{ paddingLeft: '5%' }}>
<div>
<AreaChart data={graphData} margin={{ top: 5, right: 30, left: 20, bottom: 5 }} width={750} height={420}>
{/* Defines a gradient applied to the areaPlot to highlight selected particle size range*/}
<defs>
Expand Down

0 comments on commit 6d2d702

Please sign in to comment.