Build the Web-GUI interface for the Reference Point Method

[gialmisi]

What the Reference Point Method is

Using the method, a decision maker provides a reference point: a desired ("aspiration") value for each objective, for example, "I would like cost to be 100 and quality to be 0.9". The method returns feasible solutions closest to that wish. The user can then enter a new reference point and solve again. That submit -> see solutions -> adjust loop is the whole interaction. It is simpler than, e.g., synchronous NIMBUS: NIMBUS asks the user to classify every objective (improve / worsen / keep / etc.), whereas the reference point method just needs one reference point and a "Solve" button. So this is essentially "NIMBUS, but with a simpler input."

What already exists (so you don't rebuild it)

• Backend endpoint is done. A POST /method/rpm/solve is implemented in desdeo/api/routers/reference_point_method.py.
  • Request model RPMSolveRequest: problem_id, optional session_id / parent_state_id, optional scalarization_options / solver / solver_options, and preference: a ReferencePoint whose aspiration_levels is a {objective_symbol: number} map.
  • Response model RPMState: contains solver_results (the returned solution(s)) plus the options used. (See desdeo/api/models/reference_point_method.py.)
• Generated TypeScript client: done. The module src/lib/gen/endpoints/DESDEOFastAPI.ts already
  exports the callable solveSolutionsMethodRpmSolvePost(...) and the types
  RPMSolveRequest, RPMState, ReferencePoint, and ReferencePointAspirationLevels.
  (If anything is missing after a fresh pull, regenerate with npm run generate:client.)
• The method card already exists. src/routes/methods/initialize/+page.svelte lists a
  "Reference Point" method whose path is /interactive_methods/reference-point with
  preferencesType: ['reference point']. Clicking it currently leads nowhere because the
  route doesn't exist yet: creating that route is part of the task.
• All needed UI components exist, used by NIMBUS:
  • reference-point input: src/lib/components/custom/preferences-bar/
  • solution display: src/lib/components/custom/nimbus/solution-table.svelte,
    .../nimbus/utopia-map.svelte, and src/lib/components/custom/visualizations-panel/
  • page layout: src/lib/components/custom/method_layout/

What to do

1. Read the guide first: https://desdeo.readthedocs.io/en/latest/howtoguides/implementing_method_interfaces/. It explains the route file structure, the handler pattern (handlers.ts wraps the generated client; the page never calls the client directly), the +page.ts loader, and which shared components to reuse.
2. Run the web UI locally (webui/README.md). Open an existing problem and try the NIMBUS interface so you have seen the target user experience before copying it.
3. Create the route src/routes/interactive_methods/reference-point/. The folder name must match the path already referenced by the method card (/interactive_methods/reference-point). Copy the files from src/routes/interactive_methods/NIMBUS/ as a starting point and simplify.
4. Implement handlers.ts: a function that assembles an RPMSolveRequest (the problem_id, any session/parent-state ids, and a preference reference point whose aspiration_levels maps each objective's symbol to the user's chosen value) and calls solveSolutionsMethodRpmSolvePost, returning the RPMState.
5. Implement +page.ts (load the problem / problem list, following NIMBUS's loader) and
   +page.svelte:
   • a reference-point input, one numeric field per objective, reusing the preferences-bar components;
   • a Solve-button that calls the handler;
   • a solution display reusing the NIMBUS solution table / visualizations panel;
   • the iteration loop: after results show, let the user edit the reference point and solve again.
6. Confirm the wiring: the existing "Reference Point" card on the method-selection page should now open your page and run end-to-end.
7. Lint, type-check, and run the web-UI tests before opening the PR (see the web-UI scripts in webui/package.json).

Done when

• Selecting "Reference Point" from the method-selection page opens a working interface for the chosen problem.
• The user can enter a reference point (an aspiration level per objective), press Solve, and see the returned solution(s).
• The user can submit a new reference point and get new solutions (the interaction loop works).
• The new route follows the structure of the NIMBUS route and the guide, and the web-UI lint/tests pass.

Pointers

• Guide: https://desdeo.readthedocs.io/en/latest/howtoguides/implementing_method_interfaces/
• Template to copy: webui/src/routes/interactive_methods/NIMBUS/
• Backend: desdeo/api/routers/reference_point_method.py, desdeo/api/models/reference_point_method.py (endpoint POST /method/rpm/solve)
• Generated client + types: webui/src/lib/gen/endpoints/DESDEOFastAPI.ts (solveSolutionsMethodRpmSolvePost, RPMSolveRequest, RPMState, ReferencePoint); regenerate with npm run generate:client if needed.
• Method card (already present): webui/src/routes/methods/initialize/+page.svelte
• Reusable components: preferences-bar/, nimbus/solution-table.svelte, nimbus/utopia-map.svelte, method_layout/, visualizations-panel/
• Running the web UI: webui/README.md