diff --git a/web/src/Components/Bridging/BridgeContainer.tsx b/web/src/Components/Bridging/BridgeContainer.tsx index 98ef4a5..2f5846a 100644 --- a/web/src/Components/Bridging/BridgeContainer.tsx +++ b/web/src/Components/Bridging/BridgeContainer.tsx @@ -76,7 +76,20 @@ export default ({ bridges, mode, setMode, bridgeValue, setValue }) => { } return ( -
+
+
+ + +
{ bridgeValueVariant={bridgeValueVariant} bridgeValueHelperText={bridgeValueHelperText} /> -
- - -
) } diff --git a/web/src/Components/Bridging/Graphs/BridgeGraph.tsx b/web/src/Components/Bridging/Graphs/BridgeGraph.tsx index 62a28a8..8b035b1 100644 --- a/web/src/Components/Bridging/Graphs/BridgeGraph.tsx +++ b/web/src/Components/Bridging/Graphs/BridgeGraph.tsx @@ -34,42 +34,44 @@ export function BridgeGraph({ yAxis, graphData, sizeFractions, bridges }: Bridge } return ( -
- - {/* Defines a gradient applied to the areaPlot to highlight selected particle size range*/} - - - - - - - - - - - - - - {Object.entries(bridges).map(([name, cumulative], index) => ( - + + + {/* Defines a gradient applied to the areaPlot to highlight selected particle size range*/} + + + + + + + + + + - ))} - + + + + {Object.entries(bridges).map(([name, cumulative], index) => ( + + ))} + +
) } diff --git a/web/src/Components/Bridging/InputContainer.tsx b/web/src/Components/Bridging/InputContainer.tsx index 19e4a38..116c2af 100644 --- a/web/src/Components/Bridging/InputContainer.tsx +++ b/web/src/Components/Bridging/InputContainer.tsx @@ -1,4 +1,4 @@ -import { Radio, TextField, Tooltip, Typography } from '@equinor/eds-core-react' +import { NativeSelect, Radio, TextField, Tooltip, Typography } from '@equinor/eds-core-react' import { InputWrapper, RadioWrapper, StyledSelect } from './styles' import { BridgingOption, CeramicDiscsValues } from '../../Enums' import { findDValue } from '../../Utils' @@ -27,7 +27,15 @@ const InputContainer = ({ bridgeValueHelperText, }: InputContainerProps) => { return ( -
+
Bridging options Bridging based on: @@ -70,8 +78,12 @@ const InputContainer = ({
{mode === BridgingOption.CERAMIC_DISCS ? (
- - onBridgeValueChange(event.target.value)}> + + onBridgeValueChange(event.target.value)} + id={'ceramic-disk-selector'} + label={''} + > {CeramicDiscsValues.map((value, index) => { return ( ) })} - + microns
) : ( @@ -97,7 +109,7 @@ const InputContainer = ({
{optimalBridgeGraphData.length > 0 && ( -
+
Optimal Bridge:

D10: {findDValue(optimalBridgeGraphData, 10, 'Bridge')} diff --git a/web/src/Components/Combinations/CardContainer.tsx b/web/src/Components/Combinations/CardContainer.tsx index 9464d76..368afc2 100644 --- a/web/src/Components/Combinations/CardContainer.tsx +++ b/web/src/Components/Combinations/CardContainer.tsx @@ -3,12 +3,12 @@ import React, { useContext, useEffect, useState } from 'react' import styled from 'styled-components' import CombinationCard from './CombinationCard' // @ts-ignore -import { Button } from '@equinor/eds-core-react' +import { Button, Icon } from '@equinor/eds-core-react' import { Bridge, Combinations } from '../../Types' -import Icon from '../../Icons' import { FractionsAPI } from '../../Api' import { ErrorToast } from '../Common/Toast' import { IAuthContext, AuthContext } from 'react-oauth2-code-pkce' +import { add } from '@equinor/eds-icons' export const Card = styled.div` margin: 10px; padding: 10px; @@ -123,8 +123,8 @@ export const CardContainer = ({ }) }} > - - Add combination + + New combination

diff --git a/web/src/Components/Combinations/CombinationCard.tsx b/web/src/Components/Combinations/CombinationCard.tsx index f9e29f3..0ef043a 100644 --- a/web/src/Components/Combinations/CombinationCard.tsx +++ b/web/src/Components/Combinations/CombinationCard.tsx @@ -1,6 +1,6 @@ import React, { useContext, useEffect, useState } from 'react' // @ts-ignore -import { Button, Icon, Switch, Input } from '@equinor/eds-core-react' +import { Button, Icon, Switch, Input, Tooltip, Divider } from '@equinor/eds-core-react' import CombinationTable from './CombinationTable' import styled from 'styled-components' import { Card } from './CardContainer' @@ -10,11 +10,13 @@ import { CombinationAPI } from '../../Api' import { ErrorToast } from '../Common/Toast' import { findDValue, findGraphData } from '../../Utils' import { IAuthContext, AuthContext } from 'react-oauth2-code-pkce' +import { edit, close, delete_to_trash } from '@equinor/eds-icons' const CardHeader = styled.div` display: flex; justify-content: space-between; align-items: self-end; + margin-bottom: 0.5rem; ` const CardSummation = styled.div` @@ -131,9 +133,11 @@ export const CombinationCard = ({
- + + + - + + + {Object.keys(enabledProducts).length ? (
diff --git a/web/src/Components/CombinationsWrapper.tsx b/web/src/Components/Combinations/CombinationsWrapper.tsx similarity index 95% rename from web/src/Components/CombinationsWrapper.tsx rename to web/src/Components/Combinations/CombinationsWrapper.tsx index e477ebf..0d5291b 100644 --- a/web/src/Components/CombinationsWrapper.tsx +++ b/web/src/Components/Combinations/CombinationsWrapper.tsx @@ -1,17 +1,17 @@ -import BridgeContainer from './Bridging/BridgeContainer' -import CardContainer from './Combinations/CardContainer' -import OptimizationContainer from './Optimization/OptimizationContainer' +import BridgeContainer from '../Bridging/BridgeContainer' +import CardContainer from './CardContainer' +import OptimizationContainer from '../Optimization/OptimizationContainer' import React, { ReactElement, useContext, useEffect, useState } from 'react' // @ts-ignore import { Accordion, Button } from '@equinor/eds-core-react' -import { BridgeAPI, CombinationAPI } from '../Api' +import { BridgeAPI, CombinationAPI } from '../../Api' // @ts-ignore import styled from 'styled-components' -import { BridgingOption } from '../Enums' -import { ErrorToast } from './Common/Toast' +import { BridgingOption } from '../../Enums' +import { ErrorToast } from '../Common/Toast' import { AuthContext, IAuthContext } from 'react-oauth2-code-pkce' -import { Bridge, Combination, Combinations, Products } from '../Types' -import useLocalStorage from '../Hooks' +import { Bridge, Combination, Combinations, Products } from '../../Types' +import useLocalStorage from '../../Hooks' const MainComponentsWrapper = styled.div` padding: 16px 0 16px 0; diff --git a/web/src/Components/ContactButton.tsx b/web/src/Components/ContactButton.tsx index 5aab355..8be1671 100644 --- a/web/src/Components/ContactButton.tsx +++ b/web/src/Components/ContactButton.tsx @@ -1,6 +1,7 @@ import React, { useState } from 'react' // @ts-ignore import { Button, Dialog, Icon } from '@equinor/eds-core-react' +import { comment_important } from '@equinor/eds-icons' export const ContactButton = () => { const [dialogOpen, setDialogOpen] = useState(false) @@ -8,7 +9,7 @@ export const ContactButton = () => { return ( <> diff --git a/web/src/Components/Optimization/OptimizationRunner.tsx b/web/src/Components/Optimization/OptimizationRunner.tsx index a2ced34..7faeeee 100644 --- a/web/src/Components/Optimization/OptimizationRunner.tsx +++ b/web/src/Components/Optimization/OptimizationRunner.tsx @@ -3,7 +3,7 @@ import PillInput, { Pill } from './PillInput' import { Weight, WeightOptions } from './WeightOptions' import React, { ReactElement, useContext, useState } from 'react' // @ts-ignore -import { Accordion, Button, CircularProgress, TextField, Typography, Dialog } from '@equinor/eds-core-react' +import { Accordion, Button, CircularProgress, TextField, Typography, Dialog, Icon } from '@equinor/eds-core-react' import { Products } from '../../Types' import styled from 'styled-components' import { Tooltip } from '../Common/Tooltip' @@ -11,12 +11,12 @@ import { ErrorToast } from '../Common/Toast' import { ParticleSizeContext } from '../../Context' import EditProducts from '../Common/EditProducts' import useLocalStorage from '../../Hooks' -import Icon from '../../Icons' import numberOfProductsFitnessFormulaImg from './FormulaPictures/NumberOfProductsFitnessFormula.png' import totalFitnessFormulaImg from './FormulaPictures/TotalFitnessFormula.png' import MassFitnessFormulaImg from './FormulaPictures/MassFitnessFormula.png' import BridgeFitnessFormulaImg from './FormulaPictures/BridgeFitnessFormula.png' import { AuthContext } from 'react-oauth2-code-pkce' +import { info_circle, play } from '@equinor/eds-icons' const { Actions, Title, CustomContent } = Dialog @@ -33,7 +33,9 @@ const Wrapper = styled.div` flex-direction: column; justify-content: space-between; min-height: 250px; - width: fit-content; + background-color: white; + border-radius: 0.5rem; + padding: 0.5rem; ` const InputWrapper = styled.div` @@ -98,60 +100,56 @@ const OptimizationRunner = ({ mode, value, handleUpdate, allProducts }: Optimiza return ( - - Optimizer +
+ Optimizer setDialogOpen(true)} /> - - - Formulas used in optimizer - - - - - - - - - - - - - - - - - - - -
Total fitness – weighted average: - Formula for total fitness -
Bridge fitness – standard deviation: - Formula for total fitness -
Mass fitness – deviation from desired mass: - Formula for total fitness -
Number of products fitness: - Formula for total fitness -
-
- - - -
- +
+ + + Formulas used in optimizer + + + + + + + + + + + + + + + + + + + +
Total fitness – weighted average: + Formula for total fitness +
Bridge fitness – standard deviation: + Formula for total fitness +
Mass fitness – deviation from desired mass: + Formula for total fitness +
Number of products fitness: + Formula for total fitness +
+
+ + + +
- - Pill - - Products
{Object.values(products).map((product: any) => { @@ -173,6 +174,10 @@ const OptimizationRunner = ({ mode, value, handleUpdate, allProducts }: Optimiza
+ + Pill + + @@ -264,9 +269,9 @@ const OptimizationRunner = ({ mode, value, handleUpdate, allProducts }: Optimiza
-
+
{loading && } diff --git a/web/src/Components/Optimization/styles.ts b/web/src/Components/Optimization/styles.ts new file mode 100644 index 0000000..e69de29 diff --git a/web/src/Components/RefreshButton.tsx b/web/src/Components/RefreshButton.tsx index 1dfdc3c..f4e1437 100644 --- a/web/src/Components/RefreshButton.tsx +++ b/web/src/Components/RefreshButton.tsx @@ -1,13 +1,13 @@ import React, { useContext, useState } from 'react' // @ts-ignore -import { Button, Dialog, CircularProgress } from '@equinor/eds-core-react' +import { Button, Dialog, CircularProgress, Icon } from '@equinor/eds-core-react' import { SyncAPI } from '../Api' import styled from 'styled-components' import { ErrorToast } from './Common/Toast' import { AuthContext } from 'react-oauth2-code-pkce' -import Icon from '../Icons' import { IAuthContext } from 'react-oauth2-code-pkce' +import { refresh } from '@equinor/eds-icons' const ButtonWrapper = styled.div` display: flex; @@ -36,7 +36,7 @@ export const RefreshButton = () => { return ( <> diff --git a/web/src/Components/Solution/SolutionData.tsx b/web/src/Components/Solution/SolutionData.tsx index 0098f7e..7378a39 100644 --- a/web/src/Components/Solution/SolutionData.tsx +++ b/web/src/Components/Solution/SolutionData.tsx @@ -1,13 +1,13 @@ import React, { ReactElement, useContext, useEffect, useState } from 'react' // @ts-ignore -import { Button, Typography, CircularProgress } from '@equinor/eds-core-react' +import { Button, Typography, CircularProgress, Icon } from '@equinor/eds-core-react' import styled from 'styled-components' import { ProductResult } from '../Optimization/OptimizationContainer' import { Products } from '../../Types' import { ReportAPI } from '../../Api' import { ErrorToast } from '../Common/Toast' -import Icon from '../../Icons' import { AuthContext } from 'react-oauth2-code-pkce' +import { save } from '@equinor/eds-icons' const LabelWrapper = styled.div` display: flex; @@ -124,7 +124,7 @@ const SolutionData = ({ products, optimizationData }: SolutionDataProps) => {
diff --git a/web/src/Icons.ts b/web/src/Icons.ts deleted file mode 100644 index 9ddf61b..0000000 --- a/web/src/Icons.ts +++ /dev/null @@ -1,17 +0,0 @@ -// @ts-ignore -import { Icon } from '@equinor/eds-core-react' -// @ts-ignore -import { comment_important, edit, filter_alt, info_circle, refresh, add_box, save, play } from '@equinor/eds-icons' - -Icon.add({ - play, - filter_alt, - info_circle, - refresh, - edit, - comment_important, - add_box, - save, -}) - -export default Icon diff --git a/web/src/Pages/Main.tsx b/web/src/Pages/Main.tsx index 2ef92f6..107ba95 100644 --- a/web/src/Pages/Main.tsx +++ b/web/src/Pages/Main.tsx @@ -7,7 +7,7 @@ import { Button, Icon, TopBar, Typography } from '@equinor/eds-core-react' import RefreshButton from '../Components/RefreshButton' import { ProductsAPI } from '../Api' -import CombinationsWrapper from '../Components/CombinationsWrapper' +import CombinationsWrapper from '../Components/Combinations/CombinationsWrapper' import { Products } from '../Types' import { ErrorToast } from '../Components/Common/Toast' import { AuthContext } from 'react-oauth2-code-pkce'