Remove unused callback function (#967)

* Refactor player loading and improve UI interactions for regression models

* Remove unnecessary assertion in 'initialize' test for nadaraya_watson

* Fix test

Author: ishii-norimi

js/platform/game/base.js

@@ -45,7 +45,7 @@ export default class GameManager {
 		playButton.type = 'button'
 		playButton.value = 'Play'
 		playButton.onclick = () => {
-			this._loadPlayer(playerSelects, p => {
+			this._loadPlayer(playerSelects).then(p => {
 				this.start(p)
 			})
 		}
@@ -59,22 +59,20 @@ export default class GameManager {
 		this._r.appendChild(resetButton)
 	}
 
-	_loadPlayer(players, cb) {
-		Promise.all(
+	_loadPlayer(players) {
+		return Promise.all(
 			players.map(p => {
 				if (p.name === 'manual') {
 					return null
 				} else if (loadedPlayer[p.name]) {
 					return new loadedPlayer[p.name](...p.params)
 				}
-				return new Promise(resolve => {
-					import(`./${p.name}.js`).then(obj => {
-						loadedPlayer[p.name] = obj.default
-						resolve(new loadedPlayer[p.name](...p.params))
-					})
+				return import(`./${p.name}.js`).then(obj => {
+					loadedPlayer[p.name] = obj.default
+					return new loadedPlayer[p.name](...p.params)
 				})
 			})
-		).then(cb)
+		)
 	}
 
 	terminate() {

js/view/gmm.js

@@ -99,7 +99,7 @@ export default function (platform) {
 		model = new GMR()
 	}
 	const plotter = new GMMPlotter(platform, svg, model, grayscale)
-	const fitModel = (doFit, cb) => {
+	const fitModel = doFit => {
 		if (mode === 'AD') {
 			if (doFit) model.fit(platform.trainInput)
 			const outliers = model.probability(platform.trainInput).map(v => {

js/view/isotonic.js

@@ -1,9 +1,11 @@
 import IsotonicRegression from '../../lib/model/isotonic.js'
+import Controller from '../controller.js'
 
-var dispIsotonic = function (elm, platform) {
-	const task = platform.task
-	const fitModel = cb => {
-		const dim = platform.datas.dimension
+export default function (platform) {
+	platform.setting.ml.usage = 'Click and add data point. Next, click "Fit" button.'
+	platform.setting.ml.require = { dimension: 1 }
+	const controller = new Controller(platform)
+	const fitModel = () => {
 		const model = new IsotonicRegression()
 		model.fit(
 			platform.trainInput.map(v => v[0]),
@@ -12,16 +14,5 @@ var dispIsotonic = function (elm, platform) {
 		platform.testResult(model.predict(platform.testInput(1).map(v => v[0])))
 	}
 
-	elm.append('input')
-		.attr('type', 'button')
-		.attr('value', 'Fit')
-		.on('click', () => fitModel())
-}
-
-export default function (platform) {
-	platform.setting.ml.usage = 'Click and add data point. Next, click "Fit" button.'
-	platform.setting.ml.require = {
-		dimension: 1,
-	}
-	dispIsotonic(platform.setting.ml.configElement, platform)
+	controller.input.button('Fit').on('click', () => fitModel())
 }

js/view/nadaraya_watson.js

@@ -1,47 +1,31 @@
 import NadarayaWatson from '../../lib/model/nadaraya_watson.js'
+import Controller from '../controller.js'
 
-var dispNadarayaWatson = function (elm, platform) {
+export default function (platform) {
+	platform.setting.ml.usage = 'Click and add data point. Next, click "Fit" button.'
 	platform.setting.ml.reference = {
 		title: 'Kernel regression (Wikipedia)',
 		url: 'https://en.wikipedia.org/wiki/Kernel_regression#Nadaraya%E2%80%93Watson_kernel_regression',
 	}
-	const fitModel = cb => {
-		const s = +sgm.property('value')
-		const auto = autoCheck.property('checked')
+	const controller = new Controller(platform)
+	const fitModel = () => {
+		const s = sgm.value
+		const auto = autoCheck.element.checked
 		const model = new NadarayaWatson(auto ? null : s)
 		model.fit(platform.trainInput, platform.trainOutput)
 		if (auto) {
-			sgm.property('value', model._s)
+			sgm.value = model._s
 		}
 
 		const pred = model.predict(platform.testInput(10))
 		platform.testResult(pred)
 	}
 
-	elm.append('span').text('auto')
-	const autoCheck = elm
-		.append('input')
-		.attr('type', 'checkbox')
-		.attr('name', 'auto')
-		.property('checked', true)
-		.on('change', () => {
-			sgm.property('disabled', autoCheck.property('checked'))
-		})
-	const sgm = elm
-		.append('input')
-		.attr('type', 'number')
-		.attr('name', 'sigma')
-		.attr('min', 0)
-		.attr('value', 0.1)
-		.attr('step', 0.01)
-		.property('disabled', true)
-	elm.append('input')
-		.attr('type', 'button')
-		.attr('value', 'Fit')
-		.on('click', () => fitModel())
-}
-
-export default function (platform) {
-	platform.setting.ml.usage = 'Click and add data point. Next, click "Fit" button.'
-	dispNadarayaWatson(platform.setting.ml.configElement, platform)
+	const autoCheck = controller.input({ type: 'checkbox', label: 'auto' }).on('change', () => {
+		sgm.element.disabled = autoCheck.element.checked
+	})
+	autoCheck.element.checked = true
+	const sgm = controller.input.number({ min: 0, value: 0.1, step: 0.01 })
+	sgm.element.disabled = true
+	controller.input.button('Fit').on('click', () => fitModel())
 }

js/view/pcr.js

@@ -1,11 +1,14 @@
 import PCR from '../../lib/model/pcr.js'
+import Controller from '../controller.js'
 
-var dispPCR = function (elm, platform) {
+export default function (platform) {
+	platform.setting.ml.usage = 'Click and add data point. Next, click "Fit" button.'
 	platform.setting.ml.reference = {
 		title: 'Principal component regression (Wikipedia)',
 		url: 'https://en.wikipedia.org/wiki/Principal_component_regression',
 	}
-	const fitModel = cb => {
+	const controller = new Controller(platform)
+	const fitModel = () => {
 		const dim = platform.datas.dimension
 		const model = new PCR()
 		model.fit(platform.trainInput, platform.trainOutput)
@@ -14,13 +17,5 @@ var dispPCR = function (elm, platform) {
 		platform.testResult(pred)
 	}
 
-	elm.append('input')
-		.attr('type', 'button')
-		.attr('value', 'Fit')
-		.on('click', () => fitModel())
-}
-
-export default function (platform) {
-	platform.setting.ml.usage = 'Click and add data point. Next, click "Fit" button.'
-	dispPCR(platform.setting.ml.configElement, platform)
+	controller.input.button('Fit').on('click', () => fitModel())
 }

js/view/pls.js

@@ -1,35 +1,28 @@
 import PLS from '../../lib/model/pls.js'
+import Controller from '../controller.js'
 
-var dispPLS = function (elm, platform) {
+export default function (platform) {
+	platform.setting.ml.usage = 'Click and add data point. Next, click "Fit" button.'
 	platform.setting.ml.reference = {
 		title: 'Partial least squares regression (Wikipedia)',
 		url: 'https://en.wikipedia.org/wiki/Partial_least_squares_regression',
 	}
-	const fitModel = cb => {
+	const controller = new Controller(platform)
+	const fitModel = () => {
 		const dim = platform.datas.dimension
-		const l = +elm.select('[name=l]').property('value')
-		const model = new PLS(l)
+		const model = new PLS(l.value)
 		model.init(platform.trainInput, platform.trainOutput)
 		model.fit()
 
 		const pred = model.predict(platform.testInput(dim === 1 ? 100 : 4))
 		platform.testResult(pred)
 	}
 
-	elm.append('span').text(' l = ')
-	elm.append('input')
-		.attr('type', 'number')
-		.attr('name', 'l')
-		.attr('min', 1)
-		.attr('max', platform.datas.dimension)
-		.attr('value', platform.datas.dimension)
-	elm.append('input')
-		.attr('type', 'button')
-		.attr('value', 'Fit')
-		.on('click', () => fitModel())
-}
-
-export default function (platform) {
-	platform.setting.ml.usage = 'Click and add data point. Next, click "Fit" button.'
-	dispPLS(platform.setting.ml.configElement, platform)
+	const l = controller.input.number({
+		label: ' l = ',
+		min: 1,
+		max: platform.datas.dimension,
+		value: platform.datas.dimension,
+	})
+	controller.input.button('Fit').on('click', () => fitModel())
 }

js/view/rmr.js

@@ -1,12 +1,15 @@
 import RepeatedMedianRegression from '../../lib/model/rmr.js'
+import Controller from '../controller.js'
 
-var dispRMR = function (elm, platform) {
+export default function (platform) {
+	platform.setting.ml.usage = 'Click and add data point. Next, click "Fit" button.'
+	platform.setting.ml.require = { dimension: 1 }
 	platform.setting.ml.reference = {
 		title: 'Repeated median regression (Wikipedia)',
 		url: 'https://en.wikipedia.org/wiki/Repeated_median_regression',
 	}
-	const fitModel = cb => {
-		const dim = platform.datas.dimension
+	const controller = new Controller(platform)
+	const fitModel = () => {
 		const model = new RepeatedMedianRegression()
 		model.fit(
 			platform.trainInput.map(v => v[0]),
@@ -15,16 +18,5 @@ var dispRMR = function (elm, platform) {
 		platform.testResult(model.predict(platform.testInput(1).map(v => v[0])))
 	}
 
-	elm.append('input')
-		.attr('type', 'button')
-		.attr('value', 'Fit')
-		.on('click', () => fitModel())
-}
-
-export default function (platform) {
-	platform.setting.ml.usage = 'Click and add data point. Next, click "Fit" button.'
-	platform.setting.ml.require = {
-		dimension: 1,
-	}
-	dispRMR(platform.setting.ml.configElement, platform)
+	controller.input.button('Fit').on('click', () => fitModel())
 }

tests/gui/view/isotonic.test.js

@@ -0,0 +1,39 @@
+import { getPage } from '../helper/browser'
+
+describe('regression', () => {
+	/** @type {Awaited<ReturnType<getPage>>} */
+	let page
+	beforeEach(async () => {
+		page = await getPage()
+		const taskSelectBox = page.locator('#ml_selector dl:first-child dd:nth-child(5) select')
+		await taskSelectBox.selectOption('RG')
+		const modelSelectBox = page.locator('#ml_selector .model_selection #mlDisp')
+		await modelSelectBox.selectOption('isotonic')
+	})
+
+	afterEach(async () => {
+		await page?.close()
+	})
+
+	test('initialize', async () => {
+		expect.assertions(0)
+		const methodMenu = page.locator('#ml_selector #method_menu')
+		const buttons = methodMenu.locator('.buttons')
+
+		const fitButton = buttons.locator('input[value=Fit]')
+		await fitButton.waitFor()
+	})
+
+	test('learn', async () => {
+		const methodMenu = page.locator('#ml_selector #method_menu')
+		const buttons = methodMenu.locator('.buttons')
+
+		const methodFooter = page.locator('#method_footer')
+		await expect(methodFooter.textContent()).resolves.toBe('')
+
+		const fitButton = buttons.locator('input[value=Fit]')
+		await fitButton.evaluate(el => el.click())
+
+		await expect(methodFooter.textContent()).resolves.toMatch(/^RMSE:[0-9.]+$/)
+	})
+})

tests/gui/view/nadaraya_watson.test.js

@@ -0,0 +1,40 @@
+import { getPage } from '../helper/browser'
+
+describe('regression', () => {
+	/** @type {Awaited<ReturnType<getPage>>} */
+	let page
+	beforeEach(async () => {
+		page = await getPage()
+		const taskSelectBox = page.locator('#ml_selector dl:first-child dd:nth-child(5) select')
+		await taskSelectBox.selectOption('RG')
+		const modelSelectBox = page.locator('#ml_selector .model_selection #mlDisp')
+		await modelSelectBox.selectOption('nadaraya_watson')
+	})
+
+	afterEach(async () => {
+		await page?.close()
+	})
+
+	test('initialize', async () => {
+		const methodMenu = page.locator('#ml_selector #method_menu')
+		const buttons = methodMenu.locator('.buttons')
+
+		const autoCheckbox = buttons.locator('input:nth-of-type(1)')
+		await expect(autoCheckbox.isChecked()).resolves.toBeTruthy()
+		const sgm = buttons.locator('input:nth-of-type(2)')
+		await expect(sgm.getAttribute('value')).resolves.toBe('0.1')
+	})
+
+	test('learn', async () => {
+		const methodMenu = page.locator('#ml_selector #method_menu')
+		const buttons = methodMenu.locator('.buttons')
+
+		const methodFooter = page.locator('#method_footer')
+		await expect(methodFooter.textContent()).resolves.toBe('')
+
+		const fitButton = buttons.locator('input[value=Fit]')
+		await fitButton.evaluate(el => el.click())
+
+		await expect(methodFooter.textContent()).resolves.toMatch(/^RMSE:[0-9.]+$/)
+	})
+})

tests/gui/view/pcr.test.js

@@ -0,0 +1,39 @@
+import { getPage } from '../helper/browser'
+
+describe('regression', () => {
+	/** @type {Awaited<ReturnType<getPage>>} */
+	let page
+	beforeEach(async () => {
+		page = await getPage()
+		const taskSelectBox = page.locator('#ml_selector dl:first-child dd:nth-child(5) select')
+		await taskSelectBox.selectOption('RG')
+		const modelSelectBox = page.locator('#ml_selector .model_selection #mlDisp')
+		await modelSelectBox.selectOption('pcr')
+	})
+
+	afterEach(async () => {
+		await page?.close()
+	})
+
+	test('initialize', async () => {
+		expect.assertions(0)
+		const methodMenu = page.locator('#ml_selector #method_menu')
+		const buttons = methodMenu.locator('.buttons')
+
+		const fitButton = buttons.locator('input[value=Fit]')
+		await fitButton.waitFor()
+	})
+
+	test('learn', async () => {
+		const methodMenu = page.locator('#ml_selector #method_menu')
+		const buttons = methodMenu.locator('.buttons')
+
+		const methodFooter = page.locator('#method_footer')
+		await expect(methodFooter.textContent()).resolves.toBe('')
+
+		const fitButton = buttons.locator('input[value=Fit]')
+		await fitButton.evaluate(el => el.click())
+
+		await expect(methodFooter.textContent()).resolves.toMatch(/^RMSE:[0-9.]+$/)
+	})
+})