fix: responsive container etc

equinor · Apr 3, 2024 · 5ed5354 · 5ed5354
1 parent 7f1d2fd
commit 5ed5354
Show file tree

Hide file tree

Showing 13 changed files with 162 additions and 144 deletions.
diff --git 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 (
-    <div style={{ display: 'flex', overflow: 'auto' }}>
+    <div style={{ overflow: 'auto' }}>
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          backgroundColor: 'white',
+          overflow: 'auto',
+          padding: '0.5rem',
+          borderRadius: '0.5rem',
+        }}
+      >
+        <CumulativeGraph bridges={bridges} sizeFractions={sizeFractions} />
+        <DistributionGraph bridges={bridges} sizeFractions={sizeFractions} />
+      </div>
       <InputContainer
         mode={mode}
         onBridgeOptionChange={onBridgeOptionChange}
@@ -87,10 +100,6 @@ export default ({ bridges, mode, setMode, bridgeValue, setValue }) => {
         bridgeValueVariant={bridgeValueVariant}
         bridgeValueHelperText={bridgeValueHelperText}
       />
-      <div style={{ display: 'flex', alignItems: 'center', backgroundColor: 'white' }}>
-        <CumulativeGraph bridges={bridges} sizeFractions={sizeFractions} />
-        <DistributionGraph bridges={bridges} sizeFractions={sizeFractions} />
-      </div>
     </div>
   )
 }
diff --git 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 (
-    <div style={{ backgroundColor: 'white', borderRadius: '0.5rem' }}>
-      <AreaChart data={graphData} margin={{ top: 5, right: 30, left: 20, bottom: 5 }} width={980} height={500}>
-        {/* Defines a gradient applied to the areaPlot to highlight selected particle size range*/}
-        <defs>
-          <linearGradient id='particleArea'>
-            <stop offset={particleFromPercentage} stopColor='transparent' />
-            <stop offset={particleFromPercentage} stopColor='#E2DCDC' />
-            <stop offset={particleToPercentage} stopColor='#E2DCDC' />
-            <stop offset={particleToPercentage} stopColor='transparent' />
-          </linearGradient>
-        </defs>
-        <CartesianGrid strokeDasharray='3 3' />
-        <XAxis
-          dataKey='size'
-          scale='log'
-          domain={[0.1, 10000]}
-          type='number'
-          ticks={[0.1, 1, 10, 100, 1000, 10000]}
-          label={{ value: 'particle size (\u00B5m)', position: 'center', offset: 0 }}
-          height={70}
-        />
-        <YAxis type='number' allowDataOverflow width={75} label={{ value: yAxis, angle: '270' }} />
-        <Tooltip />
-        <Legend verticalAlign='bottom' align='center' />
-        {Object.entries(bridges).map(([name, cumulative], index) => (
-          <Area
-            type='monotone'
-            dataKey={name}
-            stroke={graphColors[index % graphColors.length]}
-            key={name}
-            fill={(name === 'Bridge' && 'url(#particleArea)') || 'transparent'}
-            name={name}
-            strokeWidth={1.5}
+    <div style={{ backgroundColor: 'white', borderRadius: '0.5rem', width: '100%', height: '100%' }}>
+      <ResponsiveContainer width={'99%'} height={500}>
+        <AreaChart data={graphData} margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
+          {/* Defines a gradient applied to the areaPlot to highlight selected particle size range*/}
+          <defs>
+            <linearGradient id='particleArea'>
+              <stop offset={particleFromPercentage} stopColor='transparent' />
+              <stop offset={particleFromPercentage} stopColor='#E2DCDC' />
+              <stop offset={particleToPercentage} stopColor='#E2DCDC' />
+              <stop offset={particleToPercentage} stopColor='transparent' />
+            </linearGradient>
+          </defs>
+          <CartesianGrid strokeDasharray='3 3' />
+          <XAxis
+            dataKey='size'
+            scale='log'
+            domain={[0.1, 10000]}
+            type='number'
+            ticks={[0.1, 1, 10, 100, 1000, 10000]}
+            label={{ value: 'particle size (\u00B5m)', position: 'center', offset: 0 }}
+            height={70}
           />
-        ))}
-      </AreaChart>
+          <YAxis type='number' allowDataOverflow width={75} label={{ value: yAxis, angle: '270' }} />
+          <Tooltip />
+          <Legend verticalAlign='bottom' align='center' />
+          {Object.entries(bridges).map(([name, cumulative], index) => (
+            <Area
+              type='monotone'
+              dataKey={name}
+              stroke={graphColors[index % graphColors.length]}
+              key={name}
+              fill={(name === 'Bridge' && 'url(#particleArea)') || 'transparent'}
+              name={name}
+              strokeWidth={1.5}
+            />
+          ))}
+        </AreaChart>
+      </ResponsiveContainer>
     </div>
   )
 }

diff --git 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 (
-    <div style={{ backgroundColor: 'white', borderRadius: '4px', padding: '0.5rem' }}>
+    <div
+      style={{
+        backgroundColor: 'white',
+        borderRadius: '0.5rem',
+        padding: '0.5rem',
+        marginBlockStart: '1rem',
+        display: 'flex',
+      }}
+    >
       <InputWrapper>
         <Typography variant='h3'>Bridging options</Typography>
         <span>Bridging based on:</span>
@@ -70,16 +78,20 @@ const InputContainer = ({
         <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)}>
+              <label htmlFor='ceramic-disk-selector'>Ceramic Discs Size</label>
+              <NativeSelect
+                onChange={event => onBridgeValueChange(event.target.value)}
+                id={'ceramic-disk-selector'}
+                label={''}
+              >
                 {CeramicDiscsValues.map((value, index) => {
                   return (
                     <option value={value} key={index + value}>
                       {value}
                     </option>
                   )
                 })}
-              </StyledSelect>
+              </NativeSelect>
               <small style={{ alignSelf: 'flex-end' }}>microns</small>
             </div>
           ) : (
@@ -97,7 +109,7 @@ const InputContainer = ({
         </div>
       </InputWrapper>
       {optimalBridgeGraphData.length > 0 && (
-        <div style={{ marginBlockStart: '3rem', alignItems: 'center' }}>
+        <div style={{ marginInlineStart: '1rem' }}>
           <Typography variant='h3'>Optimal Bridge:</Typography>
           <p>
             D10: {findDValue(optimalBridgeGraphData, 10, 'Bridge')}

diff --git 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 = ({
             })
           }}
         >
-          <Icon name='add_box' title='add_box' />
-          Add combination
+          <Icon data={add} title='add_box' />
+          New combination
         </Button>
       </div>
     </>

diff --git 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 = ({
     <Card>
       <div>
         <CardHeader>
-          <Button variant='ghost_icon' onClick={() => setIsHeaderEditable(!isHeaderEditable)}>
-            <Icon name='edit' size={16} />
-          </Button>
+          <Tooltip title={isHeaderEditable ? 'Toggle edit off' : 'Edit combination title'}>
+            <Button variant='ghost_icon' onClick={() => setIsHeaderEditable(!isHeaderEditable)}>
+              <Icon data={edit} size={16} style={{ width: '40px' }} />
+            </Button>
+          </Tooltip>
           <Input
             id={`${combination.name}`}
             value={combinationName}
@@ -151,9 +155,11 @@ export const CombinationCard = ({
               }
             }}
           />
-          <Button variant='ghost_icon' color='danger' onClick={() => removeCombination(combination.name)}>
-            <Icon name='close' title='close' />
-          </Button>
+          <Tooltip title={'Delete combination'}>
+            <Button variant='ghost_icon' color='danger' onClick={() => removeCombination(combination.name)}>
+              <Icon data={delete_to_trash} title='close' style={{ width: '40px' }} />
+            </Button>
+          </Tooltip>
         </CardHeader>
         {Object.keys(enabledProducts).length ? (
           <div>

diff --git a/web/src/Components/CombinationsWrapper.tsx → ...ents/Combinations/CombinationsWrapper.tsx b/web/src/Components/CombinationsWrapper.tsx → ...ents/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
@@ -1,14 +1,15 @@
 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<boolean>(false)
 
   return (
     <>
       <Button variant='outlined' onClick={() => setDialogOpen(true)}>
-        <Icon name='comment_important' title='filter products' />
+        <Icon data={comment_important} title='filter products' />
         Contact
       </Button>
       <Dialog style={{ width: 'min-content' }} open={dialogOpen}>