: react-simple-code-editor also mounts the
+ // raw value as the textarea's initial text node, so an unscoped
+ // screen.getByText(/weight/) matches both and throws "multiple elements".
+ expect(container.querySelector('pre')).toHaveTextContent('weight')
+ })
+
+ it('calls onChange when edited', () => {
+ const onChange = vi.fn()
+ render((
+ ({ value, symbols, onChange }, ref) => {
+ const lastSelection = useRef(value.length)
+
+ useImperativeHandle(ref, () => ({
+ insertAtCursor: (text: string) => {
+ const pos = lastSelection.current ?? value.length
+ onChange(value.slice(0, pos) + text + value.slice(pos))
+ },
+ }))
+
+ return (
+ highlight(code, symbols)}
+ padding={10}
+ onKeyUp={e => {
+ lastSelection.current =
+ (e.target as HTMLTextAreaElement).selectionStart ?? value.length
+ }}
+ onClick={e => {
+ lastSelection.current =
+ (e.target as HTMLTextAreaElement).selectionStart ?? value.length
+ }}
+ textareaId="score-function-input"
+ style={{
+ fontFamily: 'monospace',
+ fontSize: 16,
+ border: '1px solid rgba(0,0,0,0.23)',
+ borderRadius: 4,
+ minHeight: 48,
+ }}
+ />
+ )
+ }
+)
+ScoreFunctionField.displayName = 'ScoreFunctionField'
From 1fd6860d44d85d067d70fbba98e0d662fe4d86b9 Mon Sep 17 00:00:00 2001
From: Jack Ord
Date: Wed, 22 Jul 2026 14:42:05 +0000
Subject: [PATCH 10/60] feat(ui): add score-function playground with live
evaluation
---
.../score-function-playground.test.tsx | 37 +++++++++++
.../settings/score-function-playground.tsx | 61 +++++++++++++++++++
2 files changed, 98 insertions(+)
create mode 100644 packages/ui/src/features/data-points/settings/score-function-playground.test.tsx
create mode 100644 packages/ui/src/features/data-points/settings/score-function-playground.tsx
diff --git a/packages/ui/src/features/data-points/settings/score-function-playground.test.tsx b/packages/ui/src/features/data-points/settings/score-function-playground.test.tsx
new file mode 100644
index 00000000..faec63c7
--- /dev/null
+++ b/packages/ui/src/features/data-points/settings/score-function-playground.test.tsx
@@ -0,0 +1,37 @@
+import { describe, it, expect, afterEach } from 'vitest'
+import { render, screen, cleanup, fireEvent } from '@testing-library/react'
+import { ScoreFunctionPlayground } from './score-function-playground'
+
+afterEach(() => cleanup())
+
+describe('ScoreFunctionPlayground', () => {
+ it('shows empty state without a function', () => {
+ render(>({})
+
+ const symbols = useMemo(
+ () => (scoreFunction ? usedSymbols(scoreFunction.expression) : []),
+ [scoreFunction]
+ )
+
+ if (!scoreFunction || scoreFunction.expression.trim() === '') {
+ return (
+ No function added. Add a function to test it.
+ )
+ }
+
+ // Treat every used symbol as a response for the playground (factors are just
+ // numbers here). Build response values from the test inputs.
+ const testFn: ScoreFunctionType = {
+ expression: scoreFunction.expression,
+ variables: symbols.map(s => ({
+ name: s,
+ symbol: s,
+ source: 'response' as const,
+ })),
+ }
+ const values = symbols.map(s => ({ symbol: s, value: Number(inputs[s]) }))
+ const result = computeScore(testFn, values, [])
+
+ return (
+
+ {symbols.map(s => (
+ setInputs(prev => ({ ...prev, [s]: e.target.value }))}
+ />
+ ))}
+
+ Result
+
+ {result === undefined ? '—' : result}
+
+
+
+ )
+}
From 53d411cf4546149621f68df1b920a43345775174 Mon Sep 17 00:00:00 2001
From: Jack Ord
Date: Thu, 23 Jul 2026 06:16:39 +0000
Subject: [PATCH 11/60] feat(ui): rewrite score-function settings dialog wired
to experiment state
Co-Authored-By: Claude Opus 4.8 (1M context)
---
.../settings/data-points-settings.style.ts | 1 -
.../settings/data-points-settings.test.tsx | 80 ++++
.../settings/data-points-settings.tsx | 345 ++++++++++++------
.../settings/function-variables-table.tsx | 40 --
.../settings/function-variables.style.ts | 21 --
.../settings/function-variables.tsx | 81 ----
.../data-points/settings/playground.tsx | 15 -
7 files changed, 312 insertions(+), 271 deletions(-)
create mode 100644 packages/ui/src/features/data-points/settings/data-points-settings.test.tsx
delete mode 100644 packages/ui/src/features/data-points/settings/function-variables-table.tsx
delete mode 100644 packages/ui/src/features/data-points/settings/function-variables.style.ts
delete mode 100644 packages/ui/src/features/data-points/settings/function-variables.tsx
delete mode 100644 packages/ui/src/features/data-points/settings/playground.tsx
diff --git a/packages/ui/src/features/data-points/settings/data-points-settings.style.ts b/packages/ui/src/features/data-points/settings/data-points-settings.style.ts
index 9874c383..ae1ff1df 100644
--- a/packages/ui/src/features/data-points/settings/data-points-settings.style.ts
+++ b/packages/ui/src/features/data-points/settings/data-points-settings.style.ts
@@ -23,7 +23,6 @@ export const useStyles = makeStyles()(theme => ({
functionContainer: {
background: 'coral',
},
- functionVariablesContainer: {},
playgroundContainer: {
background: 'yellowgreen',
},
diff --git a/packages/ui/src/features/data-points/settings/data-points-settings.test.tsx b/packages/ui/src/features/data-points/settings/data-points-settings.test.tsx
new file mode 100644
index 00000000..5fa7e374
--- /dev/null
+++ b/packages/ui/src/features/data-points/settings/data-points-settings.test.tsx
@@ -0,0 +1,80 @@
+import { describe, it, expect, vi, afterEach } from 'vitest'
+import { render, screen, cleanup, fireEvent } from '@testing-library/react'
+import { DataPointsSettings } from './data-points-settings'
+
+// Minimal experiment-context mock exposing quality + cost score variables and a
+// spy dispatch.
+const dispatch = vi.fn()
+vi.mock('@boostv/process-optimizer-frontend-core', async importOriginal => {
+ const actual = await importOriginal>()
+ return {
+ ...actual,
+ useExperiment: () => ({
+ state: {
+ experiment: {
+ valueVariables: [
+ {
+ type: 'discrete',
+ name: 'Firing angle',
+ description: '',
+ min: 90,
+ max: 140,
+ enabled: true,
+ },
+ ],
+ categoricalVariables: [],
+ scoreVariables: [
+ {
+ name: 'quality',
+ label: 'Quality (0-5)',
+ description: '',
+ enabled: true,
+ },
+ { name: 'cost', label: 'Cost', description: '', enabled: true },
+ ],
+ },
+ },
+ dispatch,
+ }),
+ useSelector: () => true, // isMultiObjective
+ }
+})
+
+afterEach(() => {
+ cleanup()
+ dispatch.mockClear()
+})
+
+describe('DataPointsSettings', () => {
+ it('renders a tab per objective and a factor button', () => {
+ render(
+ {}}
+ onSave={() => {}}
+ />
+ )
+ expect(screen.getByRole('tab', { name: /quality/i })).toBeInTheDocument()
+ expect(screen.getByRole('tab', { name: /cost/i })).toBeInTheDocument()
+ expect(
+ screen.getByRole('button', { name: /firing angle/i })
+ ).toBeInTheDocument()
+ })
+
+ it('dispatches updateScoreFunction on save', () => {
+ render(
+ {}}
+ onSave={() => {}}
+ />
+ )
+ fireEvent.change(screen.getByRole('textbox'), {
+ target: { value: 'firingAngle/100' },
+ })
+ fireEvent.click(screen.getByRole('button', { name: /^save$/i }))
+ expect(dispatch).toHaveBeenCalledWith(
+ expect.objectContaining({ type: 'updateScoreFunction' })
+ )
+ })
+})
diff --git a/packages/ui/src/features/data-points/settings/data-points-settings.tsx b/packages/ui/src/features/data-points/settings/data-points-settings.tsx
index 42d8e6ec..1b41bccf 100644
--- a/packages/ui/src/features/data-points/settings/data-points-settings.tsx
+++ b/packages/ui/src/features/data-points/settings/data-points-settings.tsx
@@ -1,16 +1,21 @@
-import { Box, Tooltip, Button } from '@mui/material'
-import Tabs from '@mui/material/Tabs'
-import Tab from '@mui/material/Tab'
+import { Box, Tab, Tabs, Button, Tooltip, IconButton } from '@mui/material'
import SettingsIcon from '@mui/icons-material/Settings'
-import IconButton from '@mui/material/IconButton'
-import { useState } from 'react'
-import useStyles from './data-points-settings.style'
import HelpOutlineOutlinedIcon from '@mui/icons-material/HelpOutlineOutlined'
-import FormInputText from '@ui/common/forms/form-input'
-import { FormProvider, useForm } from 'react-hook-form'
+import { useMemo, useRef, useState } from 'react'
import { InfoBox } from '@ui/features/core'
import { parse } from 'mathjs'
-import { FunctionVariables } from '@ui/features/data-points/settings/function-variables'
+import {
+ useExperiment,
+ deriveSymbol,
+ type ScoreFunctionType,
+ type ScoreFunctionVariableType,
+} from '@boostv/process-optimizer-frontend-core'
+import useStyles from './data-points-settings.style'
+import {
+ ScoreFunctionField,
+ type ScoreFunctionFieldHandle,
+} from './score-function-field'
+import { ScoreFunctionPlayground } from './score-function-playground'
type DataPointsSettingsProps = {
tabs: string[]
@@ -18,33 +23,103 @@ type DataPointsSettingsProps = {
onSave: () => void
}
-export function DataPointsSettings(props: DataPointsSettingsProps) {
+export function DataPointsSettings({
+ onCancel,
+ onSave,
+}: DataPointsSettingsProps) {
const { classes } = useStyles()
- const { tabs, onCancel, onSave } = props
-
- const methods = useForm<{
- qualityFunction: string
- functionVariables: string[]
- newVariableName: string
- newVariable: string
- }>({
- defaultValues: {
- qualityFunction: '',
- functionVariables: [],
- newVariableName: '',
- newVariable: '',
- },
- mode: 'onSubmit',
- reValidateMode: 'onSubmit',
- })
-
- const [tabIndex, setTabIndex] = useState(0)
-
- const handleTabChange = (_event: React.SyntheticEvent, newValue: number) =>
- setTabIndex(newValue)
-
- const onSubmit = (data: { qualityFunction: string }) => {
- console.log('submit', data)
+ const {
+ state: { experiment },
+ dispatch,
+ } = useExperiment()
+ const [tabIndex, setTabIndex] = useState(0)
+
+ const enabledScores = useMemo(
+ () => experiment.scoreVariables.filter(sv => sv.enabled),
+ [experiment.scoreVariables]
+ )
+ const activeScore = enabledScores[tabIndex]
+
+ // Draft function per objective, seeded from the stored one.
+ const [drafts, setDrafts] = useState>(() =>
+ Object.fromEntries(
+ enabledScores.map(sv => [
+ sv.name,
+ sv.scoreFunction ?? { expression: '', variables: [] },
+ ])
+ )
+ )
+ const draft = activeScore ? drafts[activeScore.name] : undefined
+ const fieldRef = useRef(null)
+ const [addingResponse, setAddingResponse] = useState(false)
+ const [newResponseName, setNewResponseName] = useState('')
+
+ const numericFactors = experiment.valueVariables.filter(v => v.enabled)
+ const responseVars =
+ draft?.variables.filter(v => v.source === 'response') ?? []
+
+ const setDraft = (next: ScoreFunctionType) =>
+ activeScore && setDrafts(prev => ({ ...prev, [activeScore.name]: next }))
+
+ const symbols = draft?.variables.map(v => v.symbol) ?? []
+
+ const registerAndInsert = (variable: ScoreFunctionVariableType) => {
+ if (!draft) return
+ const exists = draft.variables.find(v => v.symbol === variable.symbol)
+ if (!exists)
+ setDraft({ ...draft, variables: [...draft.variables, variable] })
+ fieldRef.current?.insertAtCursor(variable.symbol)
+ }
+
+ const onClickFactor = (factorName: string) => {
+ const existingSymbols = draft?.variables.map(v => v.symbol) ?? []
+ const symbol = deriveSymbol(factorName, existingSymbols)
+ const already = draft?.variables.find(
+ v => v.source === 'factor' && v.factorName === factorName
+ )
+ registerAndInsert(
+ already ?? { name: factorName, symbol, source: 'factor', factorName }
+ )
+ }
+
+ const onAddResponse = () => {
+ if (!draft || newResponseName.trim() === '') return
+ const symbol = deriveSymbol(
+ newResponseName,
+ draft.variables.map(v => v.symbol)
+ )
+ setDraft({
+ ...draft,
+ variables: [
+ ...draft.variables,
+ { name: newResponseName, symbol, source: 'response' },
+ ],
+ })
+ setNewResponseName('')
+ setAddingResponse(false)
+ }
+
+ const expressionError = (() => {
+ if (!draft || draft.expression.trim() === '') return undefined
+ try {
+ parse(draft.expression)
+ return undefined
+ } catch (e) {
+ return `${e}`
+ }
+ })()
+
+ const onSaveClick = () => {
+ enabledScores.forEach(sv => {
+ const d = drafts[sv.name]
+ dispatch({
+ type: 'updateScoreFunction',
+ payload: {
+ scoreName: sv.name,
+ scoreFunction: d && d.expression.trim() !== '' ? d : undefined,
+ },
+ })
+ })
onSave()
}
@@ -56,90 +131,134 @@ export function DataPointsSettings(props: DataPointsSettingsProps) {