DESDEO web-GUI progress and status

This issue is for tracking the development of DESDEO's web-based user interface, web web-GUI. There is a ton to do, and listing everything that needs to be done would be futile at this time. Therefore, only a fraction of the needed things will be listed, but tracking will be more accurate for what we currently have.

The web-GUI can be found in desdeo/webui. It has a README with instructions on how to run it.

What we have

• Logging in and out
• An OpenAPI SDK (client) that utilizes the models defined in DESDEO's web-API.
• Token management: access token is stored locally, refresh token in cookies.
• Some nice components, like a topbar. Basic navigation.
• Guards to allow only logged in users to access sites besides the login page.
• Basic listing of problems defined for a user.
• Basic skeleton for initializing an interactive method (selecting a problem and a method to solve it).
• Basic MathJSON integration for displaying mathematical expressions (though KaTeX fonts cannot be loaded, needs fixing).

What we need

• Many interactive components need to be ported from previous iterations of the interface.
• Interfaces pretty much for every interactive method we have available.
• Problem formulation.
• Better problem exploration.
• Role (which are available, but unused currently) specific views (i.e., an admin should be able to access a site that allows adding new users).
• Group-related stuff (as in, group decision-making).
• Add new problems from the GUI
• Archive of solutions (A page to explore multiple solutions saved by the user. It has not been designed yet )
• Modify/delete/download problem
• Sign-up/registering for new users
• Etc...

This is not an exhaustive list; it will be updated periodically.

--

List of UI Components

_All visualizations must be responsive (i.e., adapt automatically to container/page resizing). Outputs should be managed via callback functions. In the visualizations, use the color palette provided in [URL] for each objective function.

• Horizontal Bar
  Used to retrieve reference points or classification preferences.
  ✅ TODO: Improve responsiveness, handle outputs via callbacks, and validate numerical inputs.
  🔗 Latest version: [URL] Done, needs to be merged in the main branch

• Bar Charts
  Display individual solutions; can be either horizontal or vertical. Done by @giomara-larraga , to be added to the main branch
  🔗 Latest version: [URL]

• Bar Chart with Explanations
  Bar chart variant showing the contribution of each objective function. Includes buttons to select an objective to improve.
  🔗 Latest version: [URL]

• Parallel Coordinates Plot
  Used for visualizing sets of solutions.
  ✅ Should support selection, brushing, and display of preference data.
  🔗 Latest version: [URL]

• SCORE Bands
  Required for multiple projects.
  🔨 Currently being worked on by @giomara-larraga .

• Solutions Table
  Displays solution data from each iteration. Based on [URL].
  ✅ Should allow toggling between:

  • Objective function values
  • Decision variable values
  • Both
    ✅ Should support selection of one or more solutions.

• Preferences Bar
  Left sidebar for displaying preference-related information.
  ✅ Takes preference types as input and renders context-specific content.

• Explanations Bar
  Right sidebar for R-XIMO visualizations.
  🔗 Latest version: [URL 1] [URL 2]

• Petal Diagram
  🔗 Latest versions: [URL 1] [URL 2]

• Radar Chart
  🔗 Latest version: [URL]

• Navigation Bar
  🔗 Latest version: [URL]

• Map Visualization (UTOPIA)
  🔗 Latest version: [URL] <- Ask @juropo

Pages

• New/Modify Problem
  Interface to define a new problem and save it to the database.
  🚧 No design currently available.

• NIMBUS
  Interface for the NIMBUS method.
  ✅ Requires horizontal bar chart.
  🔗 Previous version: [URL]

• Group NIMBUS
  Extension of the NIMBUS interface for group usage.

• Explainable NIMBUS
  Enhanced NIMBUS with explanation features. (To do by @giomara-larraga )
  🔗 Previous version: [URL]

• NAUTILUS
  Interface based on the NAUTILUS method.
  🔗 Based on: [URL]

• Reference Point Method
  Interface for the reference point method.
  ✅ Requires horizontal bar chart.
  🔗 Previous version [URL] (it was not functional)

• EMO Methods
  General interface for Evolutionary Multiobjective Optimization methods.
  🔨 In progress (by @giomara-larraga ).
  🔗 Components from: [URL]

• NAUTILUS Navigator
  User interface for NAUTILUS navigator method.
  ✅ Requires navigation bar.
  🔗 Previous version: [URL]

• E-NAUTILUS
  Interface for the evolutionary NAUTILUS method.
  🔨 In progress (by @gialmisi ).

• Final Solution Page
  Unified page to display the final solution across all methods.
  ✅ Shows both decision variables and objective function values.
  🔗 Example in: [URL]

• Solutions Dashboard
  Page for analyzing solutions saved by the user.
  🚧 No design available.

• Help Page
  Includes links to documentation, contact details, etc.
  🚧 No design available.