feat: create product UI

api/src/calculators/fraction_interpolator.py

@@ -7,8 +7,6 @@
 
 def find_closest_bigger_index(array: list[float], target: float) -> int:
  index = bisect_left(array, target)
- if index == 0:
- raise ValueError("Failed to find closest biggest index")
  return index + 1
 
 
@@ -22,8 +20,6 @@ def fraction_interpolator_and_extrapolator(
 ) -> list[float]:
  sizes_dict = {size: 0 for size in zArray} # Populate size_dict with 0 values
  starting_index = find_closest_bigger_index(zArray, min(xArray)) - 1
- s = sum(yArray)
- print(f"Sum Y: {s}")
 
  for zIndex, z in enumerate(zArray[starting_index:]):
  if z < xArray[0]: # Don't extrapolate down from first measuring point

api/src/controllers/products.py

@@ -45,6 +45,14 @@ def products_get():
 
 def products_post(product_name: str, supplier_name: str, product_data: [[float, float]]) -> Response:
  product_id = sanitize_row_key(product_name)
+
+ for p in product_data:
+ if not len(p) == 2:
+ return Response("Invalid product data. Must be two valid numbers for each line", 400)
+
+ if not isinstance(p[0], float | int) or not isinstance(p[1], float | int):
+ return Response("Invalid product data. Must be two valid numbers for each line", 400)
+
  sizes = [p[0] for p in product_data]
  cumulative = [p[1] for p in product_data]
  table_entry = {

web/package.json

@@ -3,8 +3,8 @@
  "version": "0.1.0",
  "private": true,
  "dependencies": {
- "@equinor/eds-core-react": "^0.34.0",
- "@equinor/eds-icons": "^0.19.3",
+ "@equinor/eds-core-react": "^0.36.1",
+ "@equinor/eds-icons": "^0.21.0",
  "@equinor/eds-tokens": "^0.9.2",
  "axios": "^1.6.2",
  "react": "^18.2.0",

web/src/Api.ts

@@ -1,4 +1,5 @@
 import axios from 'axios'
+import { TNewProduct } from './Types'
 
 const BASE_PATH = '/api'
 
@@ -39,6 +40,9 @@ class ProductsApi {
  async getProductsApi(token: string) {
  return axios.get(`${BASE_PATH}/products`, { headers: { Authorization: `Bearer ${token}` } })
  }
+ async postProductsApi(token: string, newProduct: TNewProduct) {
+ return axios.post(`${BASE_PATH}/products`, newProduct, { headers: { Authorization: `Bearer ${token}` } })
+ }
 }
 
 class FractionsApi {

web/src/Components/Navbar/CreateProduct.tsx

@@ -0,0 +1,146 @@
+import React, { useContext, useState } from 'react'
+// @ts-ignore
+import { Button, Dialog, Icon, TextField, Table } 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 { upload } from '@equinor/eds-icons'
+import { TNewProduct } from '../../Types'
+
+const ButtonWrapper = styled.div`
+ display: flex;
+ justify-content: space-between;
+ width: 100%;
+`
+const parseCumulativeProductCurve = (curve: string): [[number, number]] => {
+ // Split the input string into lines using the newline character
+ const lines = curve.split('\n')
+
+ // Map each line into an array of two elements
+ const parsedData = lines.map(line => {
+ // Replace commas with periods to handle European-style decimals
+ const cleanLine = line.replace(/,/g, '.')
+ // Split each line by spaces or tabs to separate the numbers
+ const elements = cleanLine.split(/\s+|\t+/)
+ // Convert the string elements to numbers
+ return elements.map(element => parseFloat(element))
+ })
+
+ return parsedData
+}
+
+export const RefreshButton = () => {
+ const [dialogOpen, setDialogOpen] = useState<boolean>(false)
+ const [loading, setLoading] = useState<boolean>(false)
+ const { token }: IAuthContext = useContext(AuthContext)
+ const [newProduct, setNewProduct] = useState<TNewProduct>()
+ const [newProductData, setNewProductData] = useState<number[][]>([])
+
+ const postProduct = () => {
+ ProductsAPI.postProductsApi(token, { ...newProduct, productData: newProductData })
+ .then(() => {
+ setLoading(false)
+ window.location.reload()
+ })
+ .catch(error => {
+ ErrorToast(`${error.response.data}`, error.response.status)
+ console.error('fetch error' + error)
+ setLoading(false)
+ })
+ }
+
+ return (
+ <>
+ <Button variant='outlined' onClick={() => setDialogOpen(true)}>
+ <Icon data={upload} title='refresh' />
+ Create product
+ </Button>
+ <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>
+ </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>
+ </ButtonWrapper>
+ </Dialog.Actions>
+ </Dialog>
+ </>
+ )
+}
+
+export default RefreshButton

web/src/Components/Navbar/Navbar.tsx

@@ -3,6 +3,7 @@ import RefreshButton from './RefreshButton'
 import { ContactButton } from './ContactButton'
 import { info_circle } from '@equinor/eds-icons'
 import { StyledLink } from './styles'
+import CreateProduct from './CreateProduct'
 
 const Navbar = () => {
  return (
@@ -14,7 +15,7 @@ const Navbar = () => {
  <div
  style={{
  display: 'grid',
- gridTemplateColumns: 'repeat(3, fit-content(100%))',
+ gridTemplateColumns: 'repeat(4, fit-content(100%))',
  gap: '16px',
  }}
  >
@@ -30,6 +31,7 @@ const Navbar = () => {
  </Button>
  </StyledLink>
  </div>
+ <CreateProduct />
  <RefreshButton />
  <div>
  <ContactButton />

web/src/Types.ts

@@ -13,6 +13,12 @@ export interface Product {
  cumulative: Array<number> | null
 }
 
+export type TNewProduct = {
+ productName: string
+ productSupplier: string
+ productData: [[number, number]]
+}
+
 export interface Products {
  [id: string]: Product
 }