feat: reset app and move entries to hamburger menu

web/package.json

@@ -28,7 +28,7 @@
  "source-map-explorer": "^2.5.3"
  },
  "scripts": {
- "start": "export NODE_OPTIONS=--openssl-legacy-provider && react-scripts start",
+ "start": "export NODE_OPTIONS=--openssl-legacy-provider && WDS_SOCKET_PORT=80 react-scripts start",
  "build": "export NODE_OPTIONS=--openssl-legacy-provider && react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"

web/src/Components/Bridging/Graphs/BridgeGraph.tsx

@@ -19,8 +19,8 @@ const CustomTooltip = ({ active, payload, label }) => {
  <div style={{ backgroundColor: 'white', border: '1px solid gray', padding: '5px', borderRadius: '2px' }}>
  <div style={{ opacity: '50%' }}>{`Particle size : ${label}µm`}</div>
  <div style={{ marginTop: '15px' }}>
- {payload.map((graphData: any) => (
- <div style={{ color: graphData.color }}>{`${graphData.name}: ${graphData.value}%`}</div>
+ {payload.map((graphData: any, index: number) => (
+ <div key={index} style={{ color: graphData.color }}>{`${graphData.name}: ${graphData.value}%`}</div>
  ))}
  </div>
  </div>

web/src/Components/Combinations/CombinationCard.tsx

@@ -1,16 +1,15 @@
 import React, { useContext, useEffect, useState } from 'react'
-// @ts-ignore
-import { Button, Icon, Switch, Input, Tooltip, Divider } from '@equinor/eds-core-react'
+import { Button, Icon, Switch, Input, Tooltip } from '@equinor/eds-core-react'
 import CombinationTable from './CombinationTable'
 import styled from 'styled-components'
 import { Card } from './CardContainer'
 import { Bridge, Combination, GraphData, Product, Products } from '../../Types'
 import EditProducts from '../Common/EditProducts'
 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'
+import { edit, delete_to_trash } from '@equinor/eds-icons'
+import { toast } from 'react-toastify'
 
 const CardHeader = styled.div`
  display: flex;
@@ -82,6 +81,11 @@ export const CombinationCard = ({
  let newMass: number = 0
  let newDensity: number = 0
  Object.values(combination.values).forEach(prod => {
+ if (!allProducts[prod.id]) {
+ console.error(`Product with id '${prod.id}' not found in allProducts`)
+ toast.error(`Product with id '${prod.id}' not found. Try resetting the application data.`, { autoClose: false })
+ return
+ }
  newMass += allProducts[prod.id].sackSize * prod.value
  newDensity += prod.value
  })
@@ -102,7 +106,7 @@ export const CombinationCard = ({
  })
  .catch(error => {
  console.error('fetch error' + error)
- ErrorToast(`${error.response.data}`, error.response.status)
+ toast.error(`Failed to calculate bridge for combination '${combination.name}'`, { autoClose: false })
  })
  }, [combination, allProducts])
 

web/src/Components/Common/ErrorBoundary.tsx

@@ -0,0 +1,57 @@
+import { Icon, List, Typography } from '@equinor/eds-core-react'
+import { account_circle } from '@equinor/eds-icons'
+import { Component, ErrorInfo, ReactNode } from 'react'
+
+interface Props {
+ children?: ReactNode
+}
+
+interface State {
+ hasError: boolean
+}
+
+class ErrorBoundary extends Component<Props, State> {
+ constructor(props) {
+ super(props)
+ this.state = { hasError: false }
+ }
+ // public state: State = {
+ // hasError: false,
+ // }
+
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
+ static getDerivedStateFromError(_: Error): State {
+ // Update state so the next render will show the fallback UI.
+ return { hasError: true }
+ }
+
+ public componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+ console.error('Uncaught error:', error)
+ }
+
+ render() {
+ if (this.state.hasError) {
+ return (
+ <>
+ <Typography variant={'h3'}>Ops... Something went wrong 😞</Typography>
+ <Typography variant={'body_short'}>You should try the following:</Typography>
+ <List variant='numbered' style={{ lineHeight: '2.25rem' }}>
+ <List.Item>Refresh the page (F5)</List.Item>
+ <List.Item>
+ Resetting the application by clicking the <Icon data={account_circle} /> icon, and then{' '}
+ <i>&quot;reset application data&quot;</i>.
+ </List.Item>
+ <List.Item>
+ Contact technical support by email at{' '}
+ <a href={'mailto:fg_team_hermes@equinor.com'}>fg_team_hermes@equinor.com</a>
+ </List.Item>
+ </List>
+ </>
+ )
+ }
+
+ return this.props.children
+ }
+}
+
+export default ErrorBoundary

web/src/Components/Common/Toast.tsx

@@ -1,8 +1,6 @@
 import { toast } from 'react-toastify'
 import React from 'react'
 
-export const InfoToast = (msg: string) => toast.info(msg)
-export const WarningToast = (msg: string) => toast.warning(msg)
 export const ErrorToast = (msg: string, code?: number): any => {
  const title = <p>Error</p>
  const config: Object = { autoClose: 7000 }

web/src/Components/Navbar/ContactButton.tsx

@@ -7,11 +7,11 @@ export const ContactButton = () => {
  const [dialogOpen, setDialogOpen] = useState<boolean>(false)
 
  return (
- <>
- <Button variant='outlined' onClick={() => setDialogOpen(true)}>
+ <div>
+ <div onClick={() => setDialogOpen(true)} style={{ display: 'flex', alignItems: 'center' }}>
  <Icon data={comment_important} title='filter products' />
- Contact
- </Button>
+ <div style={{ paddingLeft: '15px' }}>Contact</div>
+ </div>
  <Dialog style={{ width: 'min-content' }} open={dialogOpen}>
  <Dialog.Header>
  <Dialog.Title>Contact and support</Dialog.Title>
@@ -32,6 +32,6 @@ export const ContactButton = () => {
  <Button onClick={() => setDialogOpen(false)}>Close</Button>
  </Dialog.Actions>
  </Dialog>
- </>
+ </div>
  )
 }

web/src/Components/Navbar/CreateProduct.tsx

@@ -1,12 +1,11 @@
 import React, { useContext, useState } from 'react'
 // @ts-ignore
-import { Button, Dialog, Icon, TextField, Table } from '@equinor/eds-core-react'
+import { Button, Dialog, Icon, Table, Tabs, TextField } from '@equinor/eds-core-react'
 
 import { ProductsAPI } from '../../Api'
 import styled from 'styled-components'
 import { ErrorToast } from '../Common/Toast'
-import { AuthContext } from 'react-oauth2-code-pkce'
-import { IAuthContext } from 'react-oauth2-code-pkce'
+import { AuthContext, IAuthContext } from 'react-oauth2-code-pkce'
 import { upload } from '@equinor/eds-icons'
 import { TNewProduct } from '../../Types'
 import { toast } from 'react-toastify'
@@ -30,7 +29,11 @@ const parseCumulativeProductCurve = (curve: string): number[][] => {
  return elements.map(element => parseFloat(element))
  })
 
- return parsedData
+ // Filter out bad input
+ return parsedData.filter(dataPoint => {
+ if (dataPoint.length !== 2) return false
+ return !Number.isNaN(dataPoint[0]) && !Number.isNaN(dataPoint[1])
+ })
 }
 
 export const RefreshButton = () => {
@@ -39,6 +42,7 @@ export const RefreshButton = () => {
  const { token }: IAuthContext = useContext(AuthContext)
  const [newProduct, setNewProduct] = useState<TNewProduct>()
  const [newProductData, setNewProductData] = useState<number[][]>([])
+ const [activeTab, setActiveTab] = useState<number>(0)
 
  const postProduct = () => {
  ProductsAPI.postProductsApi(token, { ...newProduct, productData: newProductData })
@@ -56,93 +60,113 @@ export const RefreshButton = () => {
  }
 
  return (
- <>
- <Button variant='outlined' onClick={() => setDialogOpen(true)}>
+ <div>
+ <div onClick={() => setDialogOpen(true)} style={{ display: 'flex', alignItems: 'center' }}>
  <Icon data={upload} title='refresh' />
- Create product
- </Button>
+ <div style={{ paddingLeft: '15px' }}>Create product</div>
+ </div>
  <Dialog open={dialogOpen} isDismissable={true} style={{ width: 'min-content' }}>
  <Dialog.Header>
  <Dialog.Title>Define a new product</Dialog.Title>
  </Dialog.Header>
  <Dialog.CustomContent style={{ display: 'flex', flexFlow: 'column', alignItems: 'center' }}>
- <div style={{ display: 'flex', flexDirection: 'column', padding: '0px', alignSelf: 'start' }}>
- <TextField
- style={{ padding: '10px 0' }}
- id='name'
- label='Product name'
- value={newProduct?.productName ?? ''}
- onChange={event => setNewProduct({ ...newProduct, productName: event.target.value })}
- />
- <TextField
- style={{ padding: '10px 0' }}
- id='supplier'
- label='Supplier name'
- value={newProduct?.productSupplier ?? ''}
- onChange={event => setNewProduct({ ...newProduct, productSupplier: event.target.value })}
- />
- </div>
- <div>
- <p>
- Paste the product's measured data values here. Make sure it's been parsed correctly by inspecting the
- table below before submitting.
- </p>
- <p>
- The format of the pasted data should be two numbers on each line (space or tab separated), where the first
- number is the fraction size in micron of the measuring point, and the other the cumulative volume
- percentage.
- </p>
- <p>
- The Optimizer requires each product to have 100 data points, from 0.01 - 3500 microns. If the data you
- provide is missing data, the values will be interpolated and extrapolated.
- </p>
- <TextField
- id='data'
- style={{ width: '500px', overflow: 'auto' }}
- placeholder='Paste the cumulative curve here'
- multiline
- rows={6}
- label='Cumulative fractions data'
- onChange={event => setNewProductData(parseCumulativeProductCurve(event.target.value))}
- />
- </div>
- <div style={{ maxHeight: '300px', overflow: 'auto', marginTop: '20px' }}>
- <Table>
- <Table.Head>
- <Table.Row>
- <Table.Cell>Index</Table.Cell>
- <Table.Cell>Fraction(micron)</Table.Cell>
- <Table.Cell>Cumulative</Table.Cell>
- </Table.Row>
- </Table.Head>
- {newProductData.map((dataPoint: any, index) => (
- <Table.Row key={index}>
- <Table.Cell>{index} </Table.Cell>
- <Table.Cell>{dataPoint[0]} </Table.Cell>
- <Table.Cell>{dataPoint[1]} </Table.Cell>
- </Table.Row>
- ))}
- </Table>
- </div>
+ <Tabs activeTab={activeTab} onChange={e => setActiveTab(e)}>
+ <Tabs.List>
+ <Tabs.Tab>Details</Tabs.Tab>
+ <Tabs.Tab>Verify</Tabs.Tab>
+ </Tabs.List>
+ <Tabs.Panels>
+ <Tabs.Panel>
+ <div style={{ display: 'flex', flexDirection: 'column', padding: '0px', alignSelf: 'start' }}>
+ <TextField
+ style={{ padding: '10px 0' }}
+ id='name'
+ label='Product name'
+ value={newProduct?.productName ?? ''}
+ onChange={event => setNewProduct({ ...newProduct, productName: event.target.value })}
+ />
+ <TextField
+ style={{ padding: '10px 0' }}
+ id='supplier'
+ label='Supplier name'
+ value={newProduct?.productSupplier ?? ''}
+ onChange={event => setNewProduct({ ...newProduct, productSupplier: event.target.value })}
+ />
+ </div>
+ <div>
+ <p>Paste the product's measured data values here.</p>
+ <p>
+ The format of the pasted data should be two numbers on each line (space or tab separated), where the
+ first number is the fraction size in micron of the measuring point, and the other the cumulative
+ volume percentage.
+ </p>
+ <p>
+ The Optimizer requires each product to have 100 data points, from 0.01 - 3500 microns. If the data
+ you provide is missing data, the values will be interpolated and extrapolated.
+ </p>
+ <TextField
+ id='data'
+ style={{ width: '500px', overflow: 'auto' }}
+ placeholder='Paste the cumulative curve here'
+ multiline
+ rows={6}
+ label='Cumulative fractions data'
+ onChange={event => setNewProductData(parseCumulativeProductCurve(event.target.value))}
+ />
+ </div>
+ </Tabs.Panel>
+ <Tabs.Panel>
+ <p>Verify that the data looks correct before submitting. Go back and correct the input if necessary.</p>
+ <div style={{ maxHeight: '300px', overflow: 'auto', marginTop: '20px' }}>
+ <Table>
+ <Table.Head>
+ <Table.Row>
+ <Table.Cell>Index</Table.Cell>
+ <Table.Cell>Fraction(micron)</Table.Cell>
+ <Table.Cell>Cumulative(%)</Table.Cell>
+ </Table.Row>
+ </Table.Head>
+ {newProductData.map((dataPoint: any, index) => (
+ <Table.Row key={index}>
+ <Table.Cell>{index} </Table.Cell>
+ <Table.Cell>{dataPoint[0]} </Table.Cell>
+ <Table.Cell>{dataPoint[1]} </Table.Cell>
+ </Table.Row>
+ ))}
+ </Table>
+ </div>
+ </Tabs.Panel>
+ </Tabs.Panels>
+ </Tabs>
  </Dialog.CustomContent>
  <Dialog.Actions style={{ width: 'fill-available', display: 'flex', justifySelf: 'normal' }}>
  <ButtonWrapper>
- <Button variant='outlined' onClick={() => setDialogOpen(false)} disabled={loading}>
- Cancel
- </Button>
- <Button
- disabled={loading || !newProductData || !newProduct?.productSupplier || !newProduct?.productName}
- onClick={() => {
- setLoading(true)
- postProduct()
- }}
- >
- Create
- </Button>
+ {activeTab === 0 ? (
+ <Button variant='outlined' onClick={() => setDialogOpen(false)} disabled={loading}>
+ Cancel
+ </Button>
+ ) : (
+ <Button variant='outlined' onClick={() => setActiveTab(0)}>
+ Back
+ </Button>
+ )}
+ {activeTab === 0 ? (
+ <Button onClick={() => setActiveTab(1)}>Next</Button>
+ ) : (
+ <Button
+ disabled={loading || !newProductData || !newProduct?.productSupplier || !newProduct?.productName}
+ onClick={() => {
+ setLoading(true)
+ postProduct()
+ }}
+ >
+ Create
+ </Button>
+ )}
  </ButtonWrapper>
  </Dialog.Actions>
  </Dialog>
- </>
+ </div>
  )
 }