Introduce module alias

jest.config.js

@@ -4,6 +4,7 @@ module.exports = {
   watchPathIgnorePatterns: ['<rootDir>/boost-tests-', '<rootDir>/tmp/'],
   moduleNameMapper: {
     '\\.(scss|sass|css)$': 'identity-obj-proxy',
+    '^@/(.*)': ['<rootDir>/src/$1'],
   },
   testEnvironment: 'jsdom',
   transform: {

pages/_app.tsx

@@ -4,7 +4,7 @@ import { AppProps } from 'next/app'
 import CssBaseline from '@mui/material/CssBaseline'
 import { CacheProvider, EmotionCache } from '@emotion/react'
 import createEmotionCache from '../src/createEmotionCache'
-import { GlobalStateProvider } from '../src/context/global'
+import { GlobalStateProvider } from '@/context/global'
 
 // Client-side cache, shared for the whole session of the user in the browser.
 const clientSideEmotionCache = createEmotionCache()

pages/experiment/[experimentid].tsx

@@ -1,11 +1,11 @@
 import { useRouter } from 'next/router'
-import { ExperimentProvider } from '../../src/context/experiment'
-import TabbedExperiment from '../../src/components/experiment/tabbed-experiment'
-import Experiment from '../../src/components/experiment/experiment'
-import DebugExperiment from '../../src/components/experiment/debug-experiment'
-import { useGlobal } from '../../src/context/global'
-import LoadingExperiment from '../../src/components/experiment/loading-experiment'
-import JsonEditor from '../../src/components/json-editor/json-editor'
+import { ExperimentProvider } from '@/context/experiment'
+import TabbedExperiment from '@/components/experiment/tabbed-experiment'
+import Experiment from '@/components/experiment/experiment'
+import DebugExperiment from '@/components/experiment/debug-experiment'
+import { useGlobal } from '@/context/global'
+import LoadingExperiment from '@/components/experiment/loading-experiment'
+import JsonEditor from '@/components/json-editor/json-editor'
 
 export default function ExperimentContainer() {
   const router = useRouter()

pages/index.tsx

@@ -1,5 +1,5 @@
 import type { NextPage } from 'next'
-import Home from '../src/components/home/home'
+import Home from '@/components/home/home'
 
 const Index: NextPage = () => {
   return <Home />

src/components/data-points/data-points-reducer.test.ts

@@ -1,5 +1,5 @@
 import { dataPointsReducer, DataPointsState } from './data-points-reducer'
-import { TableDataRow } from '../../types/common'
+import { TableDataRow } from '@/types/common'
 
 describe('data points reducer', () => {
   const initialState: DataPointsState = {

src/components/data-points/data-points-reducer.ts

@@ -1,4 +1,4 @@
-import { TableDataRow } from '../../types/common'
+import { TableDataRow } from '@/types/common'
 
 interface EditRow {
   row: TableDataRow

src/components/data-points/data-points.tsx

@@ -1,6 +1,6 @@
 import { CircularProgress, IconButton, Box, Tooltip } from '@mui/material'
 import { useCallback, useEffect, useMemo, useReducer } from 'react'
-import { useGlobal } from '../../context/global'
+import { useGlobal } from '@/context/global'
 import {
   DataPointType,
   TableDataPoint,
@@ -10,7 +10,7 @@ import {
   CategoricalVariableType,
   DataPointTypeValue,
   ScoreVariableType,
-} from '../../types/common'
+} from '@/types/common'
 import { EditableTable } from '../editable-table/editable-table'
 import SwapVertIcon from '@mui/icons-material/SwapVert'
 import { TitleCard } from '../title-card/title-card'

src/components/details.tsx

@@ -1,5 +1,5 @@
 import { TextField } from '@mui/material'
-import { Info } from '../types/common'
+import { Info } from '@/types/common'
 import { TitleCard } from './title-card/title-card'
 
 type DetailsProps = {

src/components/download-csv-button.tsx

@@ -1,7 +1,7 @@
 import { IconButton, Tooltip } from '@mui/material'
-import { useExperiment } from '../context/experiment'
-import { dataPointsToCSV } from '../utility/converters'
-import { saveCSVToLocalFile } from '../utility/save-to-local-file'
+import { useExperiment } from '@/context/experiment'
+import { dataPointsToCSV } from '@/utility/converters'
+import { saveCSVToLocalFile } from '@/utility/save-to-local-file'
 import GetAppIcon from '@mui/icons-material/GetApp'
 
 interface DownloadCSVButtonProps {

src/components/editable-table/editable-table-collapsed-row.tsx

@@ -1,6 +1,6 @@
 import useStyles from './editable-table-collapsed-row.style'
 import { IconButton, TableCell, TableRow, Tooltip } from '@mui/material'
-import { TableDataRow } from '../../types/common'
+import { TableDataRow } from '@/types/common'
 import { EditableTableCell } from './editable-table-cell'
 import AddIcon from '@mui/icons-material/Add'
 import EditIcon from '@mui/icons-material/Edit'

src/components/editable-table/editable-table-expanded-row.tsx

@@ -9,7 +9,7 @@ import {
   TableHead,
   TableRow,
 } from '@mui/material'
-import { TableDataRow } from '../../types/common'
+import { TableDataRow } from '@/types/common'
 import { EditableTableCell } from './editable-table-cell'
 import { useState } from 'react'
 

src/components/editable-table/editable-table-row.tsx

@@ -1,4 +1,4 @@
-import { TableDataRow } from '../../types/common'
+import { TableDataRow } from '@/types/common'
 import { useState } from 'react'
 import { EditableTableExpandedRow } from './editable-table-expanded-row'
 import { EditableTableCollapsedRow } from './editable-table-collapsed-row'

src/components/editable-table/editable-table.tsx

@@ -6,7 +6,7 @@ import {
   TableHead,
   TableRow,
 } from '@mui/material'
-import { TableDataRow } from '../../types/common'
+import { TableDataRow } from '@/types/common'
 import { EditableTableRow } from './editable-table-row'
 import { getRowIndex, getRowId } from './editable-table-util'
 import useStyles from './editable-table.style'

src/components/experiment/configurationTab.tsx

@@ -1,11 +1,11 @@
 import { Grid } from '@mui/material'
-import { useExperiment } from '../../context/experiment'
-import { useGlobal } from '../../context/global'
+import { useExperiment } from '@/context/experiment'
+import { useGlobal } from '@/context/global'
 import {
   ValueVariableType,
   CategoricalVariableType,
   OptimizerConfig,
-} from '../../types/common'
+} from '@/types/common'
 import Details from '../details'
 import OptimizerModel from '../input-model/optimizer-model'
 import OptimizerConfigurator from '../optimizer-configurator'

src/components/experiment/dataEntryTab.tsx

@@ -1,6 +1,6 @@
 import { Grid } from '@mui/material'
-import { useExperiment } from '../../context/experiment'
-import { DataPointType } from '../../types/common'
+import { useExperiment } from '@/context/experiment'
+import { DataPointType } from '@/types/common'
 import DataPoints from '../data-points/data-points'
 import { ExperimentationGuide } from '../result-data/experimentation-guide'
 

src/components/experiment/debug-experiment.tsx

@@ -1,5 +1,5 @@
 import { Card, CardContent } from '@mui/material'
-import { useExperiment } from '../../context/experiment'
+import { useExperiment } from '@/context/experiment'
 
 export default function DebugExperiment() {
   const { state } = useExperiment()

src/components/experiment/experiment.tsx

@@ -15,28 +15,24 @@ import { Alert } from '@mui/material'
 import Details from '../details'
 import DataPoints from '../data-points/data-points'
 import { useStyles } from './experiment.style'
-import {
-  useExperiment,
-  runExperiment,
-  useSelector,
-} from '../../context/experiment'
+import { useExperiment, runExperiment, useSelector } from '@/context/experiment'
 import React, { useState } from 'react'
 import {
   ValueVariableType,
   CategoricalVariableType,
   OptimizerConfig,
   DataPointType,
-} from '../../types/common'
+} from '@/types/common'
 import LoadingExperiment from './loading-experiment'
 import { ExperimentationGuide } from '../result-data/experimentation-guide'
 import LoadingButton from '../loading-button/loading-button'
 import { Plots } from '../plots/plots'
-import { saveObjectToLocalFile } from '../../utility/save-to-local-file'
-import { useGlobal } from '../../context/global'
-import { UISizeValue } from '../../context/global'
-import { getSize } from '../../utility/ui-util'
+import { saveObjectToLocalFile } from '@/utility/save-to-local-file'
+import { useGlobal } from '@/context/global'
+import { UISizeValue } from '@/context/global'
+import { getSize } from '@/utility/ui-util'
 import { AlertColor } from '@mui/material'
-import { selectIsInitializing } from '../../context/experiment'
+import { selectIsInitializing } from '@/context/experiment'
 
 type SnackbarMessage = {
   message: string

src/components/experiment/tabbed-experiment.tsx

@@ -12,21 +12,17 @@ import Layout from '../layout/layout'
 import { Alert } from '@mui/material'
 import { TabContext, TabList, TabPanel } from '@mui/lab'
 import { useStyles } from './experiment.style'
-import {
-  useExperiment,
-  runExperiment,
-  useSelector,
-} from '../../context/experiment'
+import { useExperiment, runExperiment, useSelector } from '@/context/experiment'
 import React, { useState } from 'react'
 import LoadingExperiment from './loading-experiment'
 import LoadingButton from '../loading-button/loading-button'
 import { Plots } from '../plots/plots'
-import { saveObjectToLocalFile } from '../../utility/save-to-local-file'
-import { useGlobal } from '../../context/global'
+import { saveObjectToLocalFile } from '@/utility/save-to-local-file'
+import { useGlobal } from '@/context/global'
 import { ConfigurationTab } from './configurationTab'
 import { DataEntryTab } from './dataEntryTab'
-import { State } from '../../context/global'
-import { selectIsInitializing } from '../../context/experiment'
+import { State } from '@/context/global'
+import { selectIsInitializing } from '@/context/experiment'
 
 type SnackbarMessage = {
   message: string

src/components/home/home.tsx

@@ -20,8 +20,8 @@ import SystemUpdateAltIcon from '@mui/icons-material/SystemUpdateAlt'
 import ChevronRightIcon from '@mui/icons-material/ChevronRight'
 import DeleteIcon from '@mui/icons-material/Delete'
 import { buildPath, paths } from '../../../paths'
-import { ExperimentType } from '../../types/common'
-import { useGlobal } from '../../context/global'
+import { ExperimentType } from '@/types/common'
+import { useGlobal } from '@/context/global'
 import { v4 as uuid } from 'uuid'
 import { reducer } from './home-reducer'
 import { CreateOrOverwriteDialog } from '../create-or-overwrite-dialog/create-or-overwrite-dialog'

src/components/input-model/categorical-variable.tsx

@@ -4,8 +4,8 @@ import { useState, useCallback, useEffect } from 'react'
 import { useForm } from 'react-hook-form'
 import CategoricalVariableOptions from './categorical-variable-options'
 import { useStyles } from './categorical-variable.style'
-import { CategoricalVariableType } from '../../types/common'
-import { validation } from '../../utility/forms/validation'
+import { CategoricalVariableType } from '@/types/common'
+import { validation } from '@/utility/forms/validation'
 
 type CategoricalVariableProps = {
   isDisabled: boolean

src/components/input-model/optimizer-model.tsx

@@ -9,7 +9,7 @@ import {
   Typography,
   Tooltip,
 } from '@mui/material'
-import { CategoricalVariableType, ValueVariableType } from '../../types/common'
+import { CategoricalVariableType, ValueVariableType } from '@/types/common'
 import DeleteIcon from '@mui/icons-material/Delete'
 import VariableEditor from './variable-editor'
 import useStyles from './optimizer-model.style'

src/components/input-model/value-variable.tsx

@@ -2,10 +2,10 @@ import { Box, Button } from '@mui/material'
 import { useEffect, useMemo } from 'react'
 import { useForm } from 'react-hook-form'
 import useStyles from './value-variable.style'
-import { ValueVariableInputType, ValueVariableType } from '../../types/common'
-import { FormInputText } from '../../utility/forms'
-import { FormRadioGroup } from '../../utility/forms/form-radio-group'
-import { validation } from '../../utility/forms/validation'
+import { ValueVariableInputType, ValueVariableType } from '@/types/common'
+import { FormInputText } from '@/utility/forms'
+import { FormRadioGroup } from '@/utility/forms/form-radio-group'
+import { validation } from '@/utility/forms/validation'
 
 type ValueVariableProps = {
   isDisabled: boolean

src/components/input-model/variable-editor.tsx

@@ -3,7 +3,7 @@ import ValueVariable from './value-variable'
 import { Box, Tab, Tabs } from '@mui/material'
 import { useState, ChangeEvent } from 'react'
 import useStyles from './variable-editor.style'
-import { CategoricalVariableType, ValueVariableType } from '../../types/common'
+import { CategoricalVariableType, ValueVariableType } from '@/types/common'
 
 type VariableEditorProps = {
   isAddVariableDisabled: boolean

src/components/json-editor/json-editor.tsx

@@ -8,12 +8,12 @@ import {
   Typography,
 } from '@mui/material'
 import { ChangeEvent, useEffect, useState } from 'react'
-import { useExperiment } from '../../context/experiment'
+import { useExperiment } from '@/context/experiment'
 import useStyles from './json-editor.style'
-import { ExperimentType } from '../../types/common'
+import { ExperimentType } from '@/types/common'
 import CloseIcon from '@mui/icons-material/Close'
-import { useGlobal } from '../../context/global'
-import { errorMessage } from '../../utility'
+import { useGlobal } from '@/context/global'
+import { errorMessage } from '@/utility'
 
 type DisplayedResults = {
   id: string

src/components/layout/layout.tsx

@@ -9,7 +9,7 @@ import {
 } from '@mui/material'
 import Link from 'next/link'
 import useStyles from './layout.style'
-import { useGlobal } from '../../context/global'
+import { useGlobal } from '@/context/global'
 import { VersionInfo } from '../version-info'
 import { useState } from 'react'
 

src/components/optimizer-configurator.tsx

@@ -1,7 +1,7 @@
-import { OptimizerConfig } from '../types/common'
+import { OptimizerConfig } from '@/types/common'
 import { TitleCard } from './title-card/title-card'
 import { TextField } from '@mui/material'
-import { useGlobal } from '../context/global'
+import { useGlobal } from '@/context/global'
 
 type OptimizerConfiguratorProps = {
   config: OptimizerConfig

src/components/plots/plot-item.tsx

@@ -1,6 +1,6 @@
 import { Fragment } from 'react'
 import { Typography } from '@mui/material'
-import { useExperiment } from '../../context/experiment'
+import { useExperiment } from '@/context/experiment'
 import useStyles from './plot-item.style'
 
 interface PlotItemProps {

src/components/plots/plots.tsx

@@ -1,10 +1,10 @@
-import { useExperiment } from '../../context/experiment'
+import { useExperiment } from '@/context/experiment'
 import useStyles from './plots.style'
 import { TitleCard } from '../title-card/title-card'
 import { Tooltip, IconButton, Hidden } from '@mui/material'
 import ZoomOutMapIcon from '@mui/icons-material/ZoomOutMap'
-import { useGlobal } from '../../context/global'
-import { isUIBig } from '../../utility/ui-util'
+import { useGlobal } from '@/context/global'
+import { isUIBig } from '@/utility/ui-util'
 import { PlotList } from './plot-list'
 import { PlotItem } from './plot-item'
 

src/components/result-data/experimentation-guide.tsx

@@ -1,15 +1,15 @@
-import { useSelector } from '../../context/experiment'
+import { useSelector } from '@/context/experiment'
 import { Suggestions } from './suggestions'
 import { TitleCard } from '../title-card/title-card'
 import { Tooltip, IconButton, Hidden, Box } from '@mui/material'
 import ZoomOutMapIcon from '@mui/icons-material/ZoomOutMap'
-import { useGlobal } from '../../context/global'
-import { isUIBig } from '../../utility/ui-util'
+import { useGlobal } from '@/context/global'
+import { isUIBig } from '@/utility/ui-util'
 import useStyles from './experimentation-guide.style'
 import { SingleDataPoint } from './single-data-point'
 import { NextExperiments } from './next-experiments'
 import { InitializationProgress } from './initialization-progress'
-import { selectIsInitializing } from '../../context/experiment'
+import { selectIsInitializing } from '@/context/experiment'
 
 interface ResultDataProps {
   nextValues: string[][]

src/components/result-data/initialization-progress.tsx

@@ -6,7 +6,7 @@ import {
   Typography,
 } from '@mui/material'
 import CheckIcon from '@mui/icons-material/Check'
-import { useExperiment } from '../../context/experiment'
+import { useExperiment } from '@/context/experiment'
 import { useEffect, useState } from 'react'
 
 export const InitializationProgress = () => {

src/components/result-data/next-experiments.tsx

@@ -1,6 +1,6 @@
 import { Divider, Stack, TextField } from '@mui/material'
 import { ChangeEvent } from 'react'
-import { useExperiment } from '../../context/experiment'
+import { useExperiment } from '@/context/experiment'
 
 export const NextExperiments = () => {
   const {

src/components/summary-configuration/summary-configuration.tsx

@@ -16,9 +16,9 @@ import {
 import LensIcon from '@mui/icons-material/Lens'
 import Settings from '@mui/icons-material/Settings'
 import PanoramaFishEyeIcon from '@mui/icons-material/PanoramaFishEye'
-import { useExperiment } from '../../context/experiment'
+import { useExperiment } from '@/context/experiment'
 import useStyles from './summary-configuration.style'
-import { useGlobal } from '../../context/global'
+import { useGlobal } from '@/context/global'
 
 export const SummaryConfiguration = () => {
   const {

src/components/theme-selector/theme-selector.tsx

@@ -1,5 +1,5 @@
 import { Box, Button } from '@mui/material'
-import { useGlobal } from '../../context/global'
+import { useGlobal } from '@/context/global'
 import useStyles from './theme-selector.style'
 import { themes } from '../../theme/theme'
 

src/components/upload-csv-button.tsx

@@ -1,7 +1,7 @@
 import { IconButton, Input, Tooltip } from '@mui/material'
-import { useExperiment } from '../context/experiment'
-import { DataPointType } from '../types/common'
-import { csvToDataPoints } from '../utility/converters'
+import { useExperiment } from '@/context/experiment'
+import { DataPointType } from '@/types/common'
+import { csvToDataPoints } from '@/utility/converters'
 import PublishIcon from '@mui/icons-material/Publish'
 import { ChangeEvent } from 'react'