From 1b9dddcbf2db8a8fc7f643333588ccb69336112b Mon Sep 17 00:00:00 2001 From: Pim Hutting Date: Thu, 29 Jan 2026 14:57:45 +0100 Subject: [PATCH 1/6] chore: fixed a comment --- src/pages/MonitoringPage/MonitoringPage.module.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/MonitoringPage/MonitoringPage.module.css b/src/pages/MonitoringPage/MonitoringPage.module.css index 0603a03..b7f2651 100644 --- a/src/pages/MonitoringPage/MonitoringPage.module.css +++ b/src/pages/MonitoringPage/MonitoringPage.module.css @@ -1,8 +1,8 @@ -{/* +/* This program has been developed by students from the bachelor Computer Science at Utrecht University within the Software Project course. © Copyright Utrecht University (Department of Information and Computing Sciences) -*/} +*/ .dashboardContainer { display: grid; grid-template-columns: 2fr 1fr; /* Left = content, Right = logs */ From e3abf8c14a166cb533e7342c6da4494e4c92852a Mon Sep 17 00:00:00 2001 From: Pim Hutting Date: Thu, 29 Jan 2026 16:31:21 +0100 Subject: [PATCH 2/6] chore: removed curly brackets from css comments --- src/App.css | 4 ++-- src/components/Logging/Filters.module.css | 4 ++-- src/components/Logging/Logging.module.css | 4 ++-- src/components/TextField.module.css | 4 ++-- src/index.css | 4 ++-- src/pages/Home/Home.module.css | 4 ++-- .../MonitoringPage/components/ExperimentLogs.module.css | 5 +++++ src/pages/MonitoringPage/components/ExperimentLogs.tsx | 3 +++ src/pages/VisProgPage/VisProg.module.css | 4 ++-- .../visualProgrammingUI/components/PlanEditor.module.css | 4 ++-- .../components/RuleBasedHandle.module.css | 4 ++-- .../visualProgrammingUI/components/SaveLoadPanel.module.css | 4 ++-- .../visualProgrammingUI/components/WarningSidebar.module.css | 4 ++-- 13 files changed, 30 insertions(+), 22 deletions(-) diff --git a/src/App.css b/src/App.css index f05b2b1..1f4526b 100644 --- a/src/App.css +++ b/src/App.css @@ -1,8 +1,8 @@ -{/* +/* This program has been developed by students from the bachelor Computer Science at Utrecht University within the Software Project course. © Copyright Utrecht University (Department of Information and Computing Sciences) -*/} +*/ .logopepper { height: 8em; padding: 1.5em; diff --git a/src/components/Logging/Filters.module.css b/src/components/Logging/Filters.module.css index 3353866..d5566d8 100644 --- a/src/components/Logging/Filters.module.css +++ b/src/components/Logging/Filters.module.css @@ -1,8 +1,8 @@ -{/* +/* This program has been developed by students from the bachelor Computer Science at Utrecht University within the Software Project course. © Copyright Utrecht University (Department of Information and Computing Sciences) -*/} +*/ .filter-root { position: relative; display: flex; diff --git a/src/components/Logging/Logging.module.css b/src/components/Logging/Logging.module.css index 9b26530..4290277 100644 --- a/src/components/Logging/Logging.module.css +++ b/src/components/Logging/Logging.module.css @@ -1,8 +1,8 @@ -{/* +/* This program has been developed by students from the bachelor Computer Science at Utrecht University within the Software Project course. © Copyright Utrecht University (Department of Information and Computing Sciences) -*/} +*/ .logging-container { box-sizing: border-box; diff --git a/src/components/TextField.module.css b/src/components/TextField.module.css index 139a55c..4572bf1 100644 --- a/src/components/TextField.module.css +++ b/src/components/TextField.module.css @@ -1,8 +1,8 @@ -{/* +/* This program has been developed by students from the bachelor Computer Science at Utrecht University within the Software Project course. © Copyright Utrecht University (Department of Information and Computing Sciences) -*/} +*/ .text-field { border: 1px solid transparent; border-radius: 5pt; diff --git a/src/index.css b/src/index.css index ff4607f..e18926c 100644 --- a/src/index.css +++ b/src/index.css @@ -1,8 +1,8 @@ -{/* +/* This program has been developed by students from the bachelor Computer Science at Utrecht University within the Software Project course. © Copyright Utrecht University (Department of Information and Computing Sciences) -*/} +*/ :root { font-family: system-ui, Avenir, Helvetica, Arial, sans-serif; diff --git a/src/pages/Home/Home.module.css b/src/pages/Home/Home.module.css index 11499aa..9ec90e5 100644 --- a/src/pages/Home/Home.module.css +++ b/src/pages/Home/Home.module.css @@ -1,8 +1,8 @@ -{/* +/* This program has been developed by students from the bachelor Computer Science at Utrecht University within the Software Project course. © Copyright Utrecht University (Department of Information and Computing Sciences) -*/} +*/ .read_the_docs { color: #888; } diff --git a/src/pages/MonitoringPage/components/ExperimentLogs.module.css b/src/pages/MonitoringPage/components/ExperimentLogs.module.css index b25dffe..499e2ce 100644 --- a/src/pages/MonitoringPage/components/ExperimentLogs.module.css +++ b/src/pages/MonitoringPage/components/ExperimentLogs.module.css @@ -1,3 +1,8 @@ +/* +This program has been developed by students from the bachelor Computer Science at Utrecht +University within the Software Project course. +© Copyright Utrecht University (Department of Information and Computing Sciences) +*/ .logs { /* grid-area used in MonitoringPage.module.css */ grid-area: logs; diff --git a/src/pages/MonitoringPage/components/ExperimentLogs.tsx b/src/pages/MonitoringPage/components/ExperimentLogs.tsx index ff0d118..037e4df 100644 --- a/src/pages/MonitoringPage/components/ExperimentLogs.tsx +++ b/src/pages/MonitoringPage/components/ExperimentLogs.tsx @@ -1,3 +1,6 @@ +// This program has been developed by students from the bachelor Computer Science at Utrecht +// University within the Software Project course. +// © Copyright Utrecht University (Department of Information and Computing Sciences) import styles from "./ExperimentLogs.module.css"; import {LogMessages} from "../../../components/Logging/Logging.tsx"; import {useEffect, useMemo, useState} from "react"; diff --git a/src/pages/VisProgPage/VisProg.module.css b/src/pages/VisProgPage/VisProg.module.css index 05a5fc6..a6f7dc6 100644 --- a/src/pages/VisProgPage/VisProg.module.css +++ b/src/pages/VisProgPage/VisProg.module.css @@ -1,8 +1,8 @@ -{/* +/* This program has been developed by students from the bachelor Computer Science at Utrecht University within the Software Project course. © Copyright Utrecht University (Department of Information and Computing Sciences) -*/} +*/ /* editor UI */ .inner-editor-container { diff --git a/src/pages/VisProgPage/visualProgrammingUI/components/PlanEditor.module.css b/src/pages/VisProgPage/visualProgrammingUI/components/PlanEditor.module.css index 91e3f98..2c7a026 100644 --- a/src/pages/VisProgPage/visualProgrammingUI/components/PlanEditor.module.css +++ b/src/pages/VisProgPage/visualProgrammingUI/components/PlanEditor.module.css @@ -1,8 +1,8 @@ -{/* +/* This program has been developed by students from the bachelor Computer Science at Utrecht University within the Software Project course. © Copyright Utrecht University (Department of Information and Computing Sciences) -*/} +*/ .planDialog { overflow:visible; width: 80vw; diff --git a/src/pages/VisProgPage/visualProgrammingUI/components/RuleBasedHandle.module.css b/src/pages/VisProgPage/visualProgrammingUI/components/RuleBasedHandle.module.css index 963e46d..5b533be 100644 --- a/src/pages/VisProgPage/visualProgrammingUI/components/RuleBasedHandle.module.css +++ b/src/pages/VisProgPage/visualProgrammingUI/components/RuleBasedHandle.module.css @@ -1,8 +1,8 @@ -{/* +/* This program has been developed by students from the bachelor Computer Science at Utrecht University within the Software Project course. © Copyright Utrecht University (Department of Information and Computing Sciences) -*/} +*/ :global(.react-flow__handle.source){ border-radius: 100%; } diff --git a/src/pages/VisProgPage/visualProgrammingUI/components/SaveLoadPanel.module.css b/src/pages/VisProgPage/visualProgrammingUI/components/SaveLoadPanel.module.css index 3b1733b..ec9fb8f 100644 --- a/src/pages/VisProgPage/visualProgrammingUI/components/SaveLoadPanel.module.css +++ b/src/pages/VisProgPage/visualProgrammingUI/components/SaveLoadPanel.module.css @@ -1,8 +1,8 @@ -{/* +/* This program has been developed by students from the bachelor Computer Science at Utrecht University within the Software Project course. © Copyright Utrecht University (Department of Information and Computing Sciences) -*/} +*/ .save-load-panel { border-radius: 0 0 5pt 5pt; background-color: canvas; diff --git a/src/pages/VisProgPage/visualProgrammingUI/components/WarningSidebar.module.css b/src/pages/VisProgPage/visualProgrammingUI/components/WarningSidebar.module.css index 6134d7a..d992234 100644 --- a/src/pages/VisProgPage/visualProgrammingUI/components/WarningSidebar.module.css +++ b/src/pages/VisProgPage/visualProgrammingUI/components/WarningSidebar.module.css @@ -1,8 +1,8 @@ -{/* +/* This program has been developed by students from the bachelor Computer Science at Utrecht University within the Software Project course. © Copyright Utrecht University (Department of Information and Computing Sciences) -*/} +*/ .warnings-sidebar { min-width: auto; max-width: 340px; From 4395e44dbf0e0984567cc7aa0cac825fd03c0721 Mon Sep 17 00:00:00 2001 From: Twirre Meulenbelt <43213592+TwirreM@users.noreply.github.com> Date: Thu, 29 Jan 2026 17:40:49 +0100 Subject: [PATCH 3/6] feat: introduce backend url environment variable ref: N25B-352 --- .env.example | 2 ++ README.md | 8 ++++++++ src/components/Logging/useLogs.ts | 3 ++- src/config/api.ts | 11 +++++++++++ src/pages/ConnectedRobots/ConnectedRobots.tsx | 3 ++- src/pages/MonitoringPage/MonitoringPageAPI.ts | 12 +++++------- .../MonitoringPage/MonitoringPageComponents.tsx | 5 +++-- .../MonitoringPage/components/ExperimentLogs.tsx | 7 ++++--- src/pages/Robot/Robot.tsx | 5 +++-- src/pages/VisProgPage/VisProgLogic.ts | 5 +++-- src/vite-env.d.ts | 11 +++++++++++ test/components/Logging/useLogs.test.tsx | 3 ++- test/pages/monitoringPage/MonitoringPageAPI.test.ts | 5 +++-- test/pages/robot/Robot.test.tsx | 5 +++-- vite.config.ts | 3 +++ 15 files changed, 65 insertions(+), 23 deletions(-) create mode 100644 .env.example create mode 100644 src/config/api.ts create mode 100644 src/vite-env.d.ts diff --git a/.env.example b/.env.example new file mode 100644 index 0000000..dc6ef5b --- /dev/null +++ b/.env.example @@ -0,0 +1,2 @@ +# The location of the backend +VITE_API_BASE_URL=http://localhost:8000 diff --git a/README.md b/README.md index 47e2054..75becbe 100644 --- a/README.md +++ b/README.md @@ -28,6 +28,14 @@ npm run dev It should automatically reload when you save changes. +## Environment + +Copy `.env.example` to `.env.local` and adjust values as needed: + +```shell +cp .env.example .env.local +``` + ## Git Hooks To activate automatic linting, branch name checks and commit message checks, run: diff --git a/src/components/Logging/useLogs.ts b/src/components/Logging/useLogs.ts index 73016db..14de177 100644 --- a/src/components/Logging/useLogs.ts +++ b/src/components/Logging/useLogs.ts @@ -5,6 +5,7 @@ import {useCallback, useEffect, useRef, useState} from "react"; import {applyPriorityPredicates, type PriorityFilterPredicate} from "../../utils/priorityFiltering.ts"; import {cell, type Cell} from "../../utils/cellStore.ts"; +import { API_BASE_URL } from "../../config/api.ts"; type ExtraLevelName = 'LLM' | 'OBSERVATION' | 'ACTION' | 'CHAT'; @@ -210,7 +211,7 @@ export function useLogs(filterPredicates: Map) { // Only create one SSE connection for the lifetime of the hook. if (sseRef.current) return; - const es = new EventSource("http://localhost:8000/logs/stream"); + const es = new EventSource(`${API_BASE_URL}/logs/stream`); sseRef.current = es; es.onmessage = (event) => { diff --git a/src/config/api.ts b/src/config/api.ts new file mode 100644 index 0000000..44776d1 --- /dev/null +++ b/src/config/api.ts @@ -0,0 +1,11 @@ +declare const __VITE_API_BASE_URL__: string | undefined; + +const DEFAULT_API_BASE_URL = "http://localhost:8000"; + +const rawApiBaseUrl = + (typeof __VITE_API_BASE_URL__ !== "undefined" ? __VITE_API_BASE_URL__ : undefined) ?? + DEFAULT_API_BASE_URL; + +export const API_BASE_URL = rawApiBaseUrl.endsWith("/") + ? rawApiBaseUrl.slice(0, -1) + : rawApiBaseUrl; diff --git a/src/pages/ConnectedRobots/ConnectedRobots.tsx b/src/pages/ConnectedRobots/ConnectedRobots.tsx index bddfbd4..0f97e27 100644 --- a/src/pages/ConnectedRobots/ConnectedRobots.tsx +++ b/src/pages/ConnectedRobots/ConnectedRobots.tsx @@ -2,6 +2,7 @@ // University within the Software Project course. // © Copyright Utrecht University (Department of Information and Computing Sciences) import { useEffect, useState } from 'react' +import { API_BASE_URL } from '../../config/api.ts'; /** * Displays the current connection status of a robot in real time. @@ -25,7 +26,7 @@ export default function ConnectedRobots() { useEffect(() => { // Open a Server-Sent Events (SSE) connection to receive live ping updates. // We're expecting a stream of data like that looks like this: `data = False` or `data = True` - const eventSource = new EventSource("http://localhost:8000/robot/ping_stream"); + const eventSource = new EventSource(`${API_BASE_URL}/robot/ping_stream`); eventSource.onmessage = (event) => { // Expecting messages in JSON format: `true` or `false` diff --git a/src/pages/MonitoringPage/MonitoringPageAPI.ts b/src/pages/MonitoringPage/MonitoringPageAPI.ts index 1a9838c..cfad841 100644 --- a/src/pages/MonitoringPage/MonitoringPageAPI.ts +++ b/src/pages/MonitoringPage/MonitoringPageAPI.ts @@ -2,16 +2,14 @@ // University within the Software Project course. // © Copyright Utrecht University (Department of Information and Computing Sciences) import React, { useEffect } from 'react'; - -const API_BASE = "http://localhost:8000"; -const API_BASE_BP = API_BASE + "/button_pressed"; //UserInterruptAgent endpoint +import { API_BASE_URL } from '../../config/api.ts'; /** * HELPER: Unified sender function */ export const sendAPICall = async (type: string, context: string, endpoint?: string) => { try { - const response = await fetch(`${API_BASE_BP}${endpoint ?? ""}`, { + const response = await fetch(`${API_BASE_URL}/button_pressed${endpoint ?? ""}`, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ type, context }), @@ -76,7 +74,7 @@ export function useExperimentLogger(onUpdate?: (data: ExperimentStreamData) => v useEffect(() => { console.log("Connecting to Experiment Stream..."); - const eventSource = new EventSource(`${API_BASE}/experiment_stream`); + const eventSource = new EventSource(`${API_BASE_URL}/experiment_stream`); eventSource.onmessage = (event) => { try { @@ -112,7 +110,7 @@ export function useStatusLogger(onUpdate?: (data: ExperimentStreamData) => void }, [onUpdate]); useEffect(() => { - const eventSource = new EventSource(`${API_BASE}/status_stream`); + const eventSource = new EventSource(`${API_BASE_URL}/status_stream`); eventSource.onmessage = (event) => { try { const parsedData = JSON.parse(event.data); @@ -121,4 +119,4 @@ export function useStatusLogger(onUpdate?: (data: ExperimentStreamData) => void }; return () => eventSource.close(); }, []); -} \ No newline at end of file +} diff --git a/src/pages/MonitoringPage/MonitoringPageComponents.tsx b/src/pages/MonitoringPage/MonitoringPageComponents.tsx index ef4f561..42d5bee 100644 --- a/src/pages/MonitoringPage/MonitoringPageComponents.tsx +++ b/src/pages/MonitoringPage/MonitoringPageComponents.tsx @@ -4,6 +4,7 @@ import React, { useEffect, useState } from 'react'; import styles from './MonitoringPage.module.css'; import { sendAPICall } from './MonitoringPageAPI'; +import { API_BASE_URL } from '../../config/api.ts'; // --- GESTURE COMPONENT --- export const GestureControls: React.FC = () => { @@ -201,7 +202,7 @@ export const RobotConnected = () => { useEffect(() => { // Open a Server-Sent Events (SSE) connection to receive live ping updates. // We're expecting a stream of data like that looks like this: `data = False` or `data = True` - const eventSource = new EventSource("http://localhost:8000/robot/ping_stream"); + const eventSource = new EventSource(`${API_BASE_URL}/robot/ping_stream`); eventSource.onmessage = (event) => { // Expecting messages in JSON format: `true` or `false` @@ -232,4 +233,4 @@ export const RobotConnected = () => {

{connected ? "● Robot is connected" : "● Robot is disconnected"}

) -} \ No newline at end of file +} diff --git a/src/pages/MonitoringPage/components/ExperimentLogs.tsx b/src/pages/MonitoringPage/components/ExperimentLogs.tsx index ff0d118..99f3a26 100644 --- a/src/pages/MonitoringPage/components/ExperimentLogs.tsx +++ b/src/pages/MonitoringPage/components/ExperimentLogs.tsx @@ -14,6 +14,7 @@ import formatDuration from "../../../utils/formatDuration.ts"; import {create} from "zustand"; import Dialog from "../../../components/Dialog.tsx"; import delayedResolve from "../../../utils/delayedResolve.ts"; +import { API_BASE_URL } from "../../../config/api.ts"; /** * Local Zustand store for logging UI preferences. @@ -107,7 +108,7 @@ function DownloadScreen({filenames, refresh}: {filenames: string[] | null, refre return
    {filenames!.map((filename) => ( -
  1. {filename}
    2. +
  2. {filename}
    3. ))}
; })(); @@ -127,7 +128,7 @@ function DownloadButton() { const [filenames, setFilenames] = useState(null); async function getFiles(): Promise { - const response = await fetch("http://localhost:8000/api/logs/files"); + const response = await fetch(`${API_BASE_URL}/api/logs/files`); const files = await response.json(); files.sort(); return files; @@ -183,4 +184,4 @@ export default function ExperimentLogs() { ; -} \ No newline at end of file +} diff --git a/src/pages/Robot/Robot.tsx b/src/pages/Robot/Robot.tsx index 49dc120..80f4109 100644 --- a/src/pages/Robot/Robot.tsx +++ b/src/pages/Robot/Robot.tsx @@ -2,6 +2,7 @@ // University within the Software Project course. // © Copyright Utrecht University (Department of Information and Computing Sciences) import { useState, useEffect, useRef } from 'react' +import { API_BASE_URL } from '../../config/api.ts'; /** * Displays a live robot interaction panel with user input, conversation history, @@ -34,7 +35,7 @@ export default function Robot() { */ const sendMessage = async () => { try { - const response = await fetch("http://localhost:8000/message", { + const response = await fetch(`${API_BASE_URL}/message`, { method: "POST", headers: { "Content-Type": "application/json", @@ -60,7 +61,7 @@ export default function Robot() { * The connection resets whenever `conversationIndex` changes. */ useEffect(() => { - const eventSource = new EventSource("http://localhost:8000/sse"); + const eventSource = new EventSource(`${API_BASE_URL}/sse`); eventSource.onmessage = (event) => { try { diff --git a/src/pages/VisProgPage/VisProgLogic.ts b/src/pages/VisProgPage/VisProgLogic.ts index 696a8a7..b926f76 100644 --- a/src/pages/VisProgPage/VisProgLogic.ts +++ b/src/pages/VisProgPage/VisProgLogic.ts @@ -6,6 +6,7 @@ import orderPhaseNodeArray from "../../utils/orderPhaseNodes"; import useFlowStore from './visualProgrammingUI/VisProgStores'; import { NodeReduces } from './visualProgrammingUI/NodeRegistry'; import type { PhaseNode } from "./visualProgrammingUI/nodes/PhaseNode"; +import { API_BASE_URL } from "../../config/api.ts"; /** * Reduces the graph into its phases' information and recursively calls their reducing function @@ -28,7 +29,7 @@ export function runProgram() { const program = {phases} console.log(JSON.stringify(program, null, 2)); fetch( - "http://localhost:8000/program", + `${API_BASE_URL}/program`, { method: "POST", headers: {"Content-Type": "application/json"}, @@ -43,4 +44,4 @@ export function runProgram() { useProgramStore.getState().setProgramState(structuredClone(program)); }).catch(() => console.log("Failed to send program to the backend.")); console.log(program); -} \ No newline at end of file +} diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts new file mode 100644 index 0000000..5efb5ec --- /dev/null +++ b/src/vite-env.d.ts @@ -0,0 +1,11 @@ +/// + +interface ImportMetaEnv { + readonly VITE_API_BASE_URL?: string; +} + +interface ImportMeta { + readonly env: ImportMetaEnv; +} + +declare const __VITE_API_BASE_URL__: string | undefined; diff --git a/test/components/Logging/useLogs.test.tsx b/test/components/Logging/useLogs.test.tsx index d2272b8..de93019 100644 --- a/test/components/Logging/useLogs.test.tsx +++ b/test/components/Logging/useLogs.test.tsx @@ -6,6 +6,7 @@ import "@testing-library/jest-dom"; import {type LogRecord, useLogs} from "../../../src/components/Logging/useLogs.ts"; import {type cell, useCell} from "../../../src/utils/cellStore.ts"; import { StrictMode } from "react"; +import { API_BASE_URL } from "../../../src/config/api.ts"; jest.mock("../../../src/utils/priorityFiltering.ts", () => ({ applyPriorityPredicates: jest.fn((_log, preds: any[]) => @@ -83,7 +84,7 @@ describe("useLogs (unit)", () => { ); const es = (globalThis as any).__es as MockEventSource; expect(es).toBeTruthy(); - expect(es.url).toBe("http://localhost:8000/logs/stream"); + expect(es.url).toBe(`${API_BASE_URL}/logs/stream`); unmount(); expect(es.close).toHaveBeenCalledTimes(1); diff --git a/test/pages/monitoringPage/MonitoringPageAPI.test.ts b/test/pages/monitoringPage/MonitoringPageAPI.test.ts index 19afbdc..35377c6 100644 --- a/test/pages/monitoringPage/MonitoringPageAPI.test.ts +++ b/test/pages/monitoringPage/MonitoringPageAPI.test.ts @@ -10,6 +10,7 @@ import { useExperimentLogger, useStatusLogger } from '../../../src/pages/MonitoringPage/MonitoringPageAPI'; +import { API_BASE_URL } from '../../../src/config/api.ts'; // --- MOCK EVENT SOURCE SETUP --- // This mocks the browser's EventSource so we can manually 'push' messages to our hooks @@ -72,7 +73,7 @@ describe('MonitoringPageAPI', () => { await sendAPICall('test_type', 'test_ctx'); expect(globalThis.fetch).toHaveBeenCalledWith( - 'http://localhost:8000/button_pressed', + `${API_BASE_URL}/button_pressed`, expect.objectContaining({ method: 'POST', headers: { 'Content-Type': 'application/json' }, @@ -220,4 +221,4 @@ describe('MonitoringPageAPI', () => { expect(consoleSpy).toHaveBeenCalledWith('Status stream error:', expect.any(Error)); }); }); -}); \ No newline at end of file +}); diff --git a/test/pages/robot/Robot.test.tsx b/test/pages/robot/Robot.test.tsx index 2e872c7..d2bd07a 100644 --- a/test/pages/robot/Robot.test.tsx +++ b/test/pages/robot/Robot.test.tsx @@ -3,6 +3,7 @@ // © Copyright Utrecht University (Department of Information and Computing Sciences) import { render, screen, act, cleanup, fireEvent } from '@testing-library/react'; import Robot from '../../../src/pages/Robot/Robot'; +import { API_BASE_URL } from '../../../src/config/api.ts'; // Mock EventSource const mockInstances: MockEventSource[] = []; @@ -64,7 +65,7 @@ describe('Robot', () => { await act(async () => fireEvent.click(button)); expect(globalThis.fetch).toHaveBeenCalledWith( - 'http://localhost:8000/message', + `${API_BASE_URL}/message`, expect.objectContaining({ method: 'POST', headers: { 'Content-Type': 'application/json' }, @@ -83,7 +84,7 @@ describe('Robot', () => { ); expect(globalThis.fetch).toHaveBeenCalledWith( - 'http://localhost:8000/message', + `${API_BASE_URL}/message`, expect.objectContaining({ method: 'POST', headers: { 'Content-Type': 'application/json' }, diff --git a/vite.config.ts b/vite.config.ts index aa7de4f..b21d76a 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -4,6 +4,9 @@ import react from '@vitejs/plugin-react' // https://vite.dev/config/ export default defineConfig({ plugins: [react()], + define: { + __VITE_API_BASE_URL__: "import.meta.env.VITE_API_BASE_URL", + }, css: { modules: { localsConvention: "camelCase", From 179b8fd75b52b1ac7c00a0c10eadb1fa648f04b1 Mon Sep 17 00:00:00 2001 From: Twirre Meulenbelt <43213592+TwirreM@users.noreply.github.com> Date: Thu, 29 Jan 2026 17:42:13 +0100 Subject: [PATCH 4/6] chore: remove last curly brackets --- .../components/GestureValueEditor.module.css | 4 ++-- .../visualProgrammingUI/nodes/InferredBeliefNode.module.css | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/pages/VisProgPage/visualProgrammingUI/components/GestureValueEditor.module.css b/src/pages/VisProgPage/visualProgrammingUI/components/GestureValueEditor.module.css index 442c862..fbc39dd 100644 --- a/src/pages/VisProgPage/visualProgrammingUI/components/GestureValueEditor.module.css +++ b/src/pages/VisProgPage/visualProgrammingUI/components/GestureValueEditor.module.css @@ -1,8 +1,8 @@ -{/* +/* This program has been developed by students from the bachelor Computer Science at Utrecht University within the Software Project course. © Copyright Utrecht University (Department of Information and Computing Sciences) -*/} +*/ .gestureEditor { display: flex; flex-direction: column; diff --git a/src/pages/VisProgPage/visualProgrammingUI/nodes/InferredBeliefNode.module.css b/src/pages/VisProgPage/visualProgrammingUI/nodes/InferredBeliefNode.module.css index d6186ed..ea8b16c 100644 --- a/src/pages/VisProgPage/visualProgrammingUI/nodes/InferredBeliefNode.module.css +++ b/src/pages/VisProgPage/visualProgrammingUI/nodes/InferredBeliefNode.module.css @@ -1,8 +1,8 @@ -{/* +/* This program has been developed by students from the bachelor Computer Science at Utrecht University within the Software Project course. © Copyright Utrecht University (Department of Information and Computing Sciences) -*/} +*/ .operator-switch { display: inline-flex; align-items: center; From 55fa4f3a8b49bee742c8c23f556321df5a92d7cb Mon Sep 17 00:00:00 2001 From: Pim Hutting Date: Fri, 30 Jan 2026 12:42:24 +0100 Subject: [PATCH 5/6] chore: removed critical norm from UI --- .../visualProgrammingUI/nodes/NormNode.tsx | 27 ++++++++++++++++--- 1 file changed, 24 insertions(+), 3 deletions(-) diff --git a/src/pages/VisProgPage/visualProgrammingUI/nodes/NormNode.tsx b/src/pages/VisProgPage/visualProgrammingUI/nodes/NormNode.tsx index 1b4d200..86f05b8 100644 --- a/src/pages/VisProgPage/visualProgrammingUI/nodes/NormNode.tsx +++ b/src/pages/VisProgPage/visualProgrammingUI/nodes/NormNode.tsx @@ -1,6 +1,8 @@ // This program has been developed by students from the bachelor Computer Science at Utrecht // University within the Software Project course. // © Copyright Utrecht University (Department of Information and Computing Sciences) +import { useEffect } from "react"; +import type { EditorWarning } from "../components/EditorWarnings.tsx"; import { type NodeProps, Position, @@ -39,7 +41,7 @@ export type NormNode = Node */ export default function NormNode(props: NodeProps) { const data = props.data; - const {updateNodeData} = useFlowStore(); + const {updateNodeData, registerWarning, unregisterWarning} = useFlowStore(); const text_input_id = `norm_${props.id}_text_input`; const checkbox_id = `goal_${props.id}_checkbox`; @@ -51,6 +53,22 @@ export default function NormNode(props: NodeProps) { const setCritical = (value: boolean) => { updateNodeData(props.id, {...data, critical: value}); } + useEffect(() => { + const normText = data.norm || ""; + + const startsWithNumberWarning: EditorWarning = { + scope: { id: props.id }, + type: 'ELEMENT_STARTS_WITH_NUMBER', + severity: 'ERROR', + description: "Norms are not allowed to start with a number." + }; + + if (/^\d/.test(normText)) { + registerWarning(startsWithNumberWarning); + } else { + unregisterWarning(props.id, 'ELEMENT_STARTS_WITH_NUMBER'); + } + }, [data.norm, props.id, registerWarning, unregisterWarning]); return <> @@ -64,7 +82,10 @@ export default function NormNode(props: NodeProps) { placeholder={"Pepper should ..."} /> -
+ {/*There is no backend implementation yet of how critical norms would + be treated differently than normal norms. The commented code below shows + how you could add the UI side, if you wish to implement */} + {/*
) { checked={data.critical || false} onChange={(e) => setCritical(e.target.checked)} /> -
+
*/} {data.condition && (
From 72993b75768456f469d4d4b3c07956a6473e3f82 Mon Sep 17 00:00:00 2001 From: Pim Hutting Date: Fri, 30 Jan 2026 12:54:26 +0100 Subject: [PATCH 6/6] chore: removed critical norm from UI --- .../VisProgPage/visualProgrammingUI/nodes/NormNode.tsx | 10 ++++++---- .../visualProgrammingUI/nodes/NormNode.test.tsx | 5 +---- 2 files changed, 7 insertions(+), 8 deletions(-) diff --git a/src/pages/VisProgPage/visualProgrammingUI/nodes/NormNode.tsx b/src/pages/VisProgPage/visualProgrammingUI/nodes/NormNode.tsx index 86f05b8..5832401 100644 --- a/src/pages/VisProgPage/visualProgrammingUI/nodes/NormNode.tsx +++ b/src/pages/VisProgPage/visualProgrammingUI/nodes/NormNode.tsx @@ -49,10 +49,12 @@ export default function NormNode(props: NodeProps) { const setValue = (value: string) => { updateNodeData(props.id, {norm: value}); } - - const setCritical = (value: boolean) => { - updateNodeData(props.id, {...data, critical: value}); - } + //this function is commented out, because of lack of backend implementation. + //If you wish to set critical norms, in the UI side, you can uncomment and use this function. + + // const setCritical = (value: boolean) => { + // updateNodeData(props.id, {...data, critical: value}); + // } useEffect(() => { const normText = data.norm || ""; diff --git a/test/pages/visProgPage/visualProgrammingUI/nodes/NormNode.test.tsx b/test/pages/visProgPage/visualProgrammingUI/nodes/NormNode.test.tsx index 935ea55..bba51a6 100644 --- a/test/pages/visProgPage/visualProgrammingUI/nodes/NormNode.test.tsx +++ b/test/pages/visProgPage/visualProgrammingUI/nodes/NormNode.test.tsx @@ -699,15 +699,12 @@ describe('NormNode', () => { /> ); - const checkbox = screen.getByLabelText('Critical:'); - await user.click(checkbox); - await waitFor(() => { const state = useFlowStore.getState(); expect(state.nodes).toHaveLength(1); expect(state.nodes[0].id).toBe('norm-1'); expect(state.nodes[0].data.norm).toBe(''); - expect(state.nodes[0].data.critical).toBe(true); + }); });