diff --git a/web/src/Components/Solution/PerformanceRadar.tsx b/web/src/Components/Solution/PerformanceRadar.tsx
index bd07fd3b..aa6ec910 100644
--- a/web/src/Components/Solution/PerformanceRadar.tsx
+++ b/web/src/Components/Solution/PerformanceRadar.tsx
@@ -1,11 +1,11 @@
import { PolarAngleAxis, PolarGrid, PolarRadiusAxis, Radar, RadarChart } from 'recharts'
-import type { OptimizationData } from '../../Types'
+import type { OptimizationData } from '../../lib/types'
-interface IPerformanceRadar {
+type IPerformanceRadar = {
optimizationData: OptimizationData
}
-export const PerformanceRadar = ({ optimizationData }: IPerformanceRadar) => {
+export function PerformanceRadar({ optimizationData }: IPerformanceRadar) {
const performanceData = optimizationData.performance
const graphData = [
{
@@ -33,5 +33,3 @@ export const PerformanceRadar = ({ optimizationData }: IPerformanceRadar) => {
)
}
-
-export default PerformanceRadar
diff --git a/web/src/Components/Solution/SolutionBarChart.tsx b/web/src/Components/Solution/SolutionBarChart.tsx
index 08012028..0d27b547 100644
--- a/web/src/Components/Solution/SolutionBarChart.tsx
+++ b/web/src/Components/Solution/SolutionBarChart.tsx
@@ -1,10 +1,10 @@
import { PureComponent } from 'react'
import { Bar, BarChart, CartesianGrid, Legend, Tooltip, XAxis, YAxis } from 'recharts'
-import type { OptimizationData, Products } from '../../Types'
+import type { OptimizationData, Products } from '../../lib/types'
import type { ProductResult } from '../Optimization/OptimizationContainer'
-interface CustomizedAxisTickProps {
+type CustomizedAxisTickProps = {
x: number
y: number
payload: { value: number }
@@ -23,13 +23,13 @@ class CustomizedAxisTick extends PureComponent
{
}
}
-interface SolutionBarChartProps {
+type SolutionBarChartProps = {
products: Products
optimizationData: OptimizationData
}
-export const SolutionBarChart = ({ optimizationData, products }: SolutionBarChartProps) => {
- const graphData = () => {
+export function SolutionBarChart({ optimizationData, products }: SolutionBarChartProps) {
+ function getGraphData() {
return Object.values(optimizationData.products).map((productResult: ProductResult) => {
return {
name: products[productResult.id].title,
@@ -39,7 +39,7 @@ export const SolutionBarChart = ({ optimizationData, products }: SolutionBarChar
}
return (
-
+
)
}
-export default SolutionBarChart
diff --git a/web/src/Components/Solution/SolutionData.tsx b/web/src/Components/Solution/SolutionData.tsx
index fb5afc0d..064ad296 100644
--- a/web/src/Components/Solution/SolutionData.tsx
+++ b/web/src/Components/Solution/SolutionData.tsx
@@ -1,10 +1,10 @@
import { Button, CircularProgress, Icon, Typography } from '@equinor/eds-core-react'
import { save } from '@equinor/eds-icons'
-import { type ReactElement, useContext, useEffect, useState } from 'react'
-import { AuthContext } from 'react-oauth2-code-pkce'
+import { type ReactElement, useEffect, useState } from 'react'
import styled from 'styled-components'
-import { ReportAPI } from '../../Api'
-import type { OptimizationData, Products } from '../../Types'
+import { useUserContext } from '../../lib/contexts/user'
+import { useApi } from '../../lib/hooks/useApi'
+import type { OptimizationData, Products } from '../../lib/types'
import { ErrorToast } from '../Common/Toast'
import type { ProductResult } from '../Optimization/OptimizationContainer'
@@ -22,18 +22,18 @@ const Spacer = styled.div`
padding-bottom: 32px;
`
-interface SolutionDataProps {
+type SolutionDataProps = {
optimizationData: OptimizationData
products: Products
}
-interface DensitiesProps {
+type DensitiesProps = {
products: Products
productResults: Array
}
-const Densities = ({ products, productResults }: DensitiesProps): ReactElement => {
- const getSumOfDensities = () => {
+function Densities({ products, productResults }: DensitiesProps): ReactElement {
+ function getSumOfDensities() {
let sum = 0
Object.values(productResults).forEach((result) => {
sum += result.value
@@ -64,9 +64,10 @@ const Densities = ({ products, productResults }: DensitiesProps): ReactElement =
)
}
-const SolutionData = ({ products, optimizationData }: SolutionDataProps) => {
- const { tokenData, token } = useContext(AuthContext)
+export function SolutionData({ products, optimizationData }: SolutionDataProps) {
const [loading, setLoading] = useState(false)
+ const { createReport: postReport } = useApi()
+ const { user } = useUserContext()
useEffect(() => {
window.scrollTo(0, 999999)
@@ -84,11 +85,11 @@ const SolutionData = ({ products, optimizationData }: SolutionDataProps) => {
totalMass: optimizationData.totalMass,
products: optimizationData.products,
weighting: optimizationData.weighting,
- email: tokenData.upn || 'none',
- user: tokenData.name,
+ email: user?.email ?? '',
+ user: user?.name ?? '',
}
setLoading(true)
- ReportAPI.postReportApi(token, reportRequest)
+ postReport(reportRequest)
.then((res) => {
const link = document.createElement('a')
link.href = window.URL.createObjectURL(res.data)
@@ -134,5 +135,3 @@ const SolutionData = ({ products, optimizationData }: SolutionDataProps) => {
)
}
-
-export default SolutionVisualisations
diff --git a/web/src/Context.ts b/web/src/Context.ts
deleted file mode 100644
index 97b34938..00000000
--- a/web/src/Context.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { createContext } from 'react'
-
-interface ParticleRange {
- from: number
- to: number
- setRange: (range: number[]) => void
-}
-
-export const ParticleSizeContext = createContext
({
- from: 1,
- to: 1000,
- setRange: () => {},
-})
-
-export interface User {
- token: string
- email: string
- name: string
-}
diff --git a/web/src/Pages/Main.tsx b/web/src/Pages/Home.tsx
similarity index 55%
rename from web/src/Pages/Main.tsx
rename to web/src/Pages/Home.tsx
index 04ff98f0..aecd6dd4 100644
--- a/web/src/Pages/Main.tsx
+++ b/web/src/Pages/Home.tsx
@@ -1,14 +1,11 @@
-import { type ReactElement, useContext, useEffect, useState } from 'react'
-import { AuthContext } from 'react-oauth2-code-pkce'
-import type { IAuthContext } from 'react-oauth2-code-pkce'
-
+import { useEffect, useState } from 'react'
import styled from 'styled-components'
-
-import { ProductsAPI } from '../Api'
import { ErrorToast } from '../Components/Common/Toast'
-import Body from '../Components/MainBody'
-import Navbar from '../Components/Navbar/Navbar'
-import type { Products } from '../Types'
+import { MainBody } from '../Components/MainBody'
+import { Navbar } from '../Components/Navbar/Navbar'
+import { useAppInsights } from '../lib/applicationInsights'
+import { useApi } from '../lib/hooks/useApi'
+import type { Products } from '../lib/types'
const BodyWrapper = styled.div`
display: flex;
@@ -18,13 +15,14 @@ const BodyWrapper = styled.div`
font-family: 'Equinor';
`
-export default (): ReactElement => {
+export function Home() {
const [products, setProducts] = useState({})
- const { token }: IAuthContext = useContext(AuthContext)
+ const { getProducts } = useApi()
+ useAppInsights()
// On first render, fetch all products
useEffect(() => {
- ProductsAPI.getProductsApi(token)
+ getProducts()
.then((response) => {
setProducts(response.data)
})
@@ -38,7 +36,7 @@ export default (): ReactElement => {
<>
-
+
)
diff --git a/web/src/lib/applicationInsights.ts b/web/src/lib/applicationInsights.ts
new file mode 100644
index 00000000..80183b19
--- /dev/null
+++ b/web/src/lib/applicationInsights.ts
@@ -0,0 +1,32 @@
+import { ReactPlugin, useAppInsightsContext } from '@microsoft/applicationinsights-react-js'
+import { ApplicationInsights } from '@microsoft/applicationinsights-web'
+import { useRef } from 'react'
+
+const connectionString = import.meta.env.VITE_APPINSIGHTS_CON_STRING || ''
+
+export const reactPlugin = new ReactPlugin()
+export const appInsights = new ApplicationInsights({
+ config: {
+ connectionString: connectionString,
+ enableAutoRouteTracking: false,
+ maxBatchInterval: 0,
+ extensions: [reactPlugin],
+ },
+})
+
+if (connectionString) {
+ appInsights.loadAppInsights()
+} else {
+ console.error('Application Insights connection string is not defined')
+}
+
+export function useAppInsights() {
+ const hasTrackedInitialPageView = useRef(false)
+ const reactAppInsights = useAppInsightsContext()
+
+ if (!hasTrackedInitialPageView.current) {
+ reactAppInsights.trackPageView({ isLoggedIn: true })
+ reactAppInsights.trackEvent({ name: 'Main page load', properties: {} })
+ hasTrackedInitialPageView.current = true
+ }
+}
diff --git a/web/src/lib/constants/ceramicDiscSizes.ts b/web/src/lib/constants/ceramicDiscSizes.ts
new file mode 100644
index 00000000..d99f6935
--- /dev/null
+++ b/web/src/lib/constants/ceramicDiscSizes.ts
@@ -0,0 +1 @@
+export const ceramicDiscSizes = ['10', '12', '20', '40', '50', '55', '120'] as const
diff --git a/web/src/colors.ts b/web/src/lib/constants/colors.ts
similarity index 100%
rename from web/src/colors.ts
rename to web/src/lib/constants/colors.ts
diff --git a/web/src/lib/contexts/particle-size.tsx b/web/src/lib/contexts/particle-size.tsx
new file mode 100644
index 00000000..1f0e1213
--- /dev/null
+++ b/web/src/lib/contexts/particle-size.tsx
@@ -0,0 +1,46 @@
+import { createContext, useContext, useState } from 'react'
+
+type ParticleSizeContextType = {
+ from: number
+ to: number
+ range: [number, number]
+ setFrom: (from: number) => void
+ setTo: (to: number) => void
+ setRange: (range: [number, number]) => void
+}
+
+export const ParticleSizeContext = createContext(undefined)
+
+export function ParticleSizeContextProvider({ children }: { children: React.ReactNode }) {
+ const [from, setFrom] = useState(1.01)
+ const [to, setTo] = useState(1000)
+
+ const range = [from, to] as [number, number]
+ function setRange(range: [number, number]) {
+ setFrom(range[0])
+ setTo(range[1])
+ }
+
+ return (
+
+ {children}
+
+ )
+}
+
+export function useParticleSizeContext(): ParticleSizeContextType {
+ const context = useContext(ParticleSizeContext)
+ if (!context) {
+ throw new Error('useParticleSizeContext must be used within a ParticleSizeContextProvider')
+ }
+ return context
+}
diff --git a/web/src/lib/contexts/user.tsx b/web/src/lib/contexts/user.tsx
new file mode 100644
index 00000000..243a1abe
--- /dev/null
+++ b/web/src/lib/contexts/user.tsx
@@ -0,0 +1,41 @@
+import axios from 'axios'
+import { createContext, useContext, useEffect, useState } from 'react'
+
+type User = {
+ name: string
+ email: string
+ oid: string
+}
+
+type UserContextType = {
+ user: User | undefined
+}
+
+const UserContext = createContext(undefined)
+
+export function UserContextProvider({ children }: { children: React.ReactNode }) {
+ const [user, setUser] = useState(undefined)
+
+ useEffect(() => {
+ axios
+ .get('/api/me')
+ .then((res) => setUser(res.data))
+ .catch((error) => {
+ if (axios.isAxiosError(error) && error.response?.status === 401) {
+ window.location.href = '/oauth2/sign_in'
+ return
+ }
+ console.error('Failed to load current user:', error)
+ })
+ }, [])
+
+ return {children}
+}
+
+export function useUserContext(): UserContextType {
+ const context = useContext(UserContext)
+ if (!context) {
+ throw new Error('useUserContext must be used within a UserContextProvider')
+ }
+ return context
+}
diff --git a/web/src/Enums.ts b/web/src/lib/enums/BridgingOption.ts
similarity index 69%
rename from web/src/Enums.ts
rename to web/src/lib/enums/BridgingOption.ts
index 9dd34e85..25d1ece7 100644
--- a/web/src/Enums.ts
+++ b/web/src/lib/enums/BridgingOption.ts
@@ -4,5 +4,3 @@ export enum BridgingOption {
MAXIMUM_PORESIZE = 'MAXIMUM_PORESIZE',
CERAMIC_DISCS = 'CERAMIC_DISCS',
}
-
-export const CeramicDiscsValues = ['10', '12', '20', '40', '50', '55', '120']
diff --git a/web/src/lib/hooks/useApi.ts b/web/src/lib/hooks/useApi.ts
new file mode 100644
index 00000000..c6d400f9
--- /dev/null
+++ b/web/src/lib/hooks/useApi.ts
@@ -0,0 +1,54 @@
+import axios from 'axios'
+import type { BridgeApiRequest, OptimizationApiData, ProductValues, ReportApiRequest } from '../types'
+
+export function useApi() {
+ const BASE_PATH = '/api'
+
+ function apiPost(endpoint: string, data: T, responseType: 'blob' | 'json' = 'json') {
+ return axios.post(`${BASE_PATH}/${endpoint}`, data, {
+ responseType,
+ })
+ }
+
+ function apiGet(endpoint: string) {
+ return axios.get(`${BASE_PATH}/${endpoint}`)
+ }
+
+ function runOptimizer(data: OptimizationApiData) {
+ return apiPost('optimizer', data)
+ }
+
+ function calculateBridgeFromCombination(data: ProductValues[]) {
+ return apiPost('combination', data)
+ }
+
+ function createReport(data: ReportApiRequest) {
+ return apiPost('report', data, 'blob')
+ }
+
+ function calculateOptimalBridge(data: BridgeApiRequest) {
+ return apiPost('bridge', data)
+ }
+
+ function synchronizeSharepoint() {
+ return apiPost('sync', {})
+ }
+
+ function getProducts() {
+ return apiGet('products')
+ }
+
+ function getFractions() {
+ return apiGet('fractions')
+ }
+
+ return {
+ runOptimizer,
+ calculateBridgeFromCombination,
+ createReport,
+ calculateOptimalBridge,
+ synchronizeSharepoint,
+ getProducts,
+ getFractions,
+ }
+}
diff --git a/web/src/Hooks.tsx b/web/src/lib/hooks/useLocalStorage.ts
similarity index 77%
rename from web/src/Hooks.tsx
rename to web/src/lib/hooks/useLocalStorage.ts
index 4b8c1cc2..a3187795 100644
--- a/web/src/Hooks.tsx
+++ b/web/src/lib/hooks/useLocalStorage.ts
@@ -1,6 +1,6 @@
import { useState } from 'react'
-function useLocalStorage(key: string, initialValue: T): [T, (value: T) => void] {
+export function useLocalStorage(key: string, initialValue: T): [T, (value: T) => void] {
const [storedValue, setStoredValue] = useState(() => {
try {
const item = window.localStorage.getItem(key)
@@ -11,7 +11,7 @@ function useLocalStorage(key: string, initialValue: T): [T, (value: T) => voi
}
})
- const setValue = (value: T | ((val: T) => T)) => {
+ function setValue(value: T | ((val: T) => T)) {
try {
const valueToStore = value instanceof Function ? value(storedValue) : value
setStoredValue(valueToStore)
@@ -23,5 +23,3 @@ function useLocalStorage(key: string, initialValue: T): [T, (value: T) => voi
return [storedValue, setValue]
}
-
-export default useLocalStorage
diff --git a/web/src/Types.ts b/web/src/lib/types.ts
similarity index 74%
rename from web/src/Types.ts
rename to web/src/lib/types.ts
index 92633dc5..b8680ca7 100644
--- a/web/src/Types.ts
+++ b/web/src/lib/types.ts
@@ -1,6 +1,6 @@
-import type { Weight } from './Components/Optimization/WeightOptions'
+import type { Weight } from '../Components/Optimization/WeightOptions'
-export interface Product {
+export type Product = {
id: string
title: string
supplier: string
@@ -13,53 +13,53 @@ export interface Product {
cumulative: Array | null
}
-export interface Products {
+export type Products = {
[id: string]: Product
}
-export interface ProductValues {
+export type ProductValues = {
id: string
value: number
percentage: number
}
-export interface ProductsInCombination {
+export type ProductsInCombination = {
[id: string]: ProductValues
}
-export interface Combination {
+export type Combination = {
name: string
sacks: boolean
values: ProductsInCombination
cumulative: Array
}
-export interface Combinations {
+export type Combinations = {
[name: string]: Combination
}
-export interface Bridge {
+export type Bridge = {
[name: string]: Array
}
-export interface GraphData {
+export type GraphData = {
size: number
[name: string]: number
}
-export interface Performance {
+export type Performance = {
bridge: number
mass: number
products: number
}
-export interface Config {
+export type Config = {
iterations: number
mode: string
value: number
}
-export interface OptimizationData {
+export type OptimizationData = {
bridgeScore: number
chosenMass: number
chosenVolume: number
@@ -77,7 +77,7 @@ export interface OptimizationData {
weighting: Weight
}
-export interface OptimizationApiData {
+export type OptimizationApiData = {
request: string
name: string
iterations: number
@@ -91,7 +91,7 @@ export interface OptimizationApiData {
weights: Weight
}
-export interface ReportApiRequest {
+export type ReportApiRequest = {
fitness: number
curve: Array
pillVolume: number
@@ -106,7 +106,7 @@ export interface ReportApiRequest {
user: string
}
-export interface BridgeApiRequest {
+export type BridgeApiRequest = {
option: string
value: number
}
diff --git a/web/src/Utils.ts b/web/src/lib/utils/findDValue.ts
similarity index 62%
rename from web/src/Utils.ts
rename to web/src/lib/utils/findDValue.ts
index 390f4640..a5cd04da 100644
--- a/web/src/Utils.ts
+++ b/web/src/lib/utils/findDValue.ts
@@ -1,31 +1,4 @@
-import type { Bridge, GraphData, Product } from './Types'
-
-export function sortProducts(products: Array): Array {
- return products.sort((a, b) => {
- if (a.supplier > b.supplier) {
- return 1
- }
- if (a.supplier === b.supplier) {
- if (a.id > b.id) {
- return 1
- }
- return -1
- }
- return -1
- })
-}
-
-export function findGraphData(sizeFractions: number[], bridges: Bridge): GraphData[] {
- const newGraphData: GraphData[] = []
- sizeFractions.forEach((fraction, sizeIndex) => {
- const temp: GraphData = { size: fraction }
- Object.entries(bridges).forEach(([name, cumulative]) => {
- temp[name] = cumulative[sizeIndex]
- })
- newGraphData.push(temp)
- })
- return newGraphData
-}
+import type { GraphData } from '../types'
function linearInterpolation(yMin: number, yMax: number, xMin: number, xMax: number, targetY: number): number {
const increase = (yMax - yMin) / (xMax - xMin)
diff --git a/web/src/lib/utils/findGraphData.ts b/web/src/lib/utils/findGraphData.ts
new file mode 100644
index 00000000..ae2de530
--- /dev/null
+++ b/web/src/lib/utils/findGraphData.ts
@@ -0,0 +1,13 @@
+import type { Bridge, GraphData } from '../types'
+
+export function findGraphData(sizeFractions: number[], bridges: Bridge): GraphData[] {
+ const newGraphData: GraphData[] = []
+ sizeFractions.forEach((fraction, sizeIndex) => {
+ const temp: GraphData = { size: fraction }
+ Object.entries(bridges).forEach(([name, cumulative]) => {
+ temp[name] = cumulative[sizeIndex]
+ })
+ newGraphData.push(temp)
+ })
+ return newGraphData
+}
diff --git a/web/src/lib/utils/sortProducts.ts b/web/src/lib/utils/sortProducts.ts
new file mode 100644
index 00000000..b64947ee
--- /dev/null
+++ b/web/src/lib/utils/sortProducts.ts
@@ -0,0 +1,16 @@
+import type { Product } from '../types'
+
+export function sortProducts(products: Array): Array {
+ return products.sort((a, b) => {
+ if (a.supplier > b.supplier) {
+ return 1
+ }
+ if (a.supplier === b.supplier) {
+ if (a.id > b.id) {
+ return 1
+ }
+ return -1
+ }
+ return -1
+ })
+}
diff --git a/web/src/main.tsx b/web/src/main.tsx
index 21b1f28e..27de6e6c 100644
--- a/web/src/main.tsx
+++ b/web/src/main.tsx
@@ -1,22 +1,7 @@
import { createRoot } from 'react-dom/client'
import './index.css'
-import { AuthProvider, type TAuthConfig } from 'react-oauth2-code-pkce'
-import App from './App'
-
-const authConfig: TAuthConfig = {
- clientId: import.meta.env.VITE_CLIENT_ID || '',
- authorizationEndpoint: 'https://login.microsoftonline.com/3aa4a235-b6e2-48d5-9195-7fcf05b459b0/oauth2/v2.0/authorize',
- tokenEndpoint: 'https://login.microsoftonline.com/3aa4a235-b6e2-48d5-9195-7fcf05b459b0/oauth2/v2.0/token',
- redirectUri: window.location.origin,
- scope: import.meta.env.VITE_SCOPES,
- onRefreshTokenExpire: (event) =>
- window.confirm('Session expired. Refresh page to continue using the site?') && event.login(),
-}
+import { App } from './App'
const container = document.getElementById('root') as HTMLElement
const root = createRoot(container)
-root.render(
-
-
-
-)
+root.render()
diff --git a/web/src/react-app-env.d.ts b/web/src/react-app-env.d.ts
deleted file mode 100644
index 6431bc5f..00000000
--- a/web/src/react-app-env.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-///
diff --git a/web/tsconfig.json b/web/tsconfig.json
index f1443c44..be9ce51c 100644
--- a/web/tsconfig.json
+++ b/web/tsconfig.json
@@ -1,7 +1,7 @@
{
"include": ["src"],
"compilerOptions": {
- "strict": false,
+ "strict": true,
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
"target": "ES2020",
"useDefineForClassFields": true,
diff --git a/web/vite.config.ts b/web/vite.config.ts
index 522c2c03..43bf0bcd 100644
--- a/web/vite.config.ts
+++ b/web/vite.config.ts
@@ -16,7 +16,13 @@ export default defineConfig({
'img-src': ["'self'", 'data:'],
'object-src': ["'none'"],
'font-src': ["'self'", 'https://*.equinor.com'],
- 'connect-src': ["'self'", 'https://*.microsoftonline.com'],
+ 'frame-ancestors': ["'none'"],
+ 'connect-src': [
+ "'self'",
+ 'https://*.microsoftonline.com',
+ 'https://*.applicationinsights.azure.com',
+ 'https://*.monitor.azure.com',
+ ],
},
build: {
sri: true,
@@ -27,6 +33,12 @@ export default defineConfig({
server: {
port: 3000,
host: true,
+ watch: {
+ usePolling: process.env.USE_POLLING === 'true',
+ },
+ hmr: {
+ clientPort: process.env.HMR_CLIENT_PORT ? Number(process.env.HMR_CLIENT_PORT) : undefined,
+ },
},
build: {
outDir: 'build',