Nautilus UI

src/lib/api.ts

@@ -34,7 +34,7 @@ export const backend: Backend = {
 //
 // TODO: Move this to a configuration file.
 //
-const baseURL = "http://localhost:5000";
+export const baseURL = "http://127.0.0.1:5000";
 
 /** A missing token is represented by `undefined`. */
 type Token = string | undefined;
@@ -65,7 +65,7 @@ function set_access_token(token: Token) {
   state.access_token.set(token);
 }
 
-function get_access_token() {
+export function get_access_token() {
   return get(state.access_token);
 }
 
@@ -481,3 +481,11 @@ export function is_point_of_length(value: unknown, n: number): value is Point {
 export function problem_has_finite_bounds(problem: Problem) {
   return is_point(problem.ideal_point) && is_point(problem.nadir_point);
 }
+
+export const methodHeaderText = writable({
+  boldPart: "",
+  italicPart: "",
+  moreInfo: "",
+  moreInfoText: "",
+});
+export const selectedProblem = writable({} as Problem);

src/lib/components/main/SelectMethod.svelte

@@ -12,6 +12,10 @@
     //   id: "nimbus",
     //   display: "NIMBUS",
     // },
+    {
+      id: "nautilus",
+      display: "NAUTILUS",
+    },
     {
       id: "reference_point_method",
       display: "Reference Point Method",

src/lib/components/main/Solve.svelte

@@ -5,20 +5,65 @@
   // Context API?
   //
 
-  import { login_status, LoginStatus } from "$lib/api";
-  import type { Problem } from "$lib/api";
+  import {
+    login_status,
+    LoginStatus,
+    methodHeaderText,
+    selectedProblem,
+    type Problem,
+  } from "$lib/api";
 
   export let problems: Problem[];
 
-  import { TabGroup, Tab } from "@skeletonlabs/skeleton";
-  import SelectProblem from "./SelectProblem.svelte";
-  import SelectMethod from "./SelectMethod.svelte";
-  import SolveProblem from "./SolveProblem.svelte";
+  import { goto } from "$app/navigation";
+  import { Tab, TabGroup } from "@skeletonlabs/skeleton";
   import GeneralError from "../util/undecorated/GeneralError.svelte";
+  import SelectMethod from "./SelectMethod.svelte";
+  import SelectProblem from "./SelectProblem.svelte";
 
   let tab = 0;
-  let selected_problem: Problem | undefined = undefined;
+  let selected_problem: Problem;
   let selected_method = "";
+
+  function goto_solve() {
+    console.log("selected_problem", selected_problem);
+
+    if (selected_method === "nimbus") {
+      methodHeaderText.set({
+        boldPart: "NIMBUS",
+        italicPart: "",
+        moreInfo: "",
+        moreInfoText: "",
+      });
+    } else if (selected_method === "nautilus") {
+      methodHeaderText.set({
+        boldPart: "NAUTILUS:",
+        italicPart:
+          "Trade-off-free method to approach Pareto optimal solutions using ranks or weights",
+        moreInfo: "https://desdeo.misitano.xyz",
+        moreInfoText: "More about NAUTILUS",
+      });
+
+      selectedProblem.set(selected_problem);
+    } else if (selected_method === "nautnavi") {
+      methodHeaderText.set({
+        boldPart: "NAUTILUS Navigator",
+        italicPart: "",
+        moreInfo: "",
+        moreInfoText: "",
+      });
+    } else {
+      methodHeaderText.set({
+        boldPart: "No method selected yet",
+        italicPart: "",
+        moreInfo: "",
+        moreInfoText: "",
+      });
+    }
+    console.log("selected_method", selected_method);
+
+    goto("/solve");
+  }
 </script>
 
 <TabGroup>
@@ -29,22 +74,15 @@
     >
   {/if}
   {#if selected_problem && selected_method}
-    <Tab bind:group={tab} name="solve_problem" value={2}
+    <Tab bind:group={tab} name="solve_problem" value={2} on:click={goto_solve}
       >3. Solve the problem</Tab
     >
   {/if}
 
   <svelte:fragment slot="panel">
     {#if tab === 0}
       <div class="mb-8">
-        Please select a problem. Then <button
-          class="anchor"
-          on:click={() => {
-            tab = 1;
-          }}
-          disabled={!selected_problem}
-          >continue to selecting a solution method</button
-        >.
+        Please select a problem. Then continue to selecting a solution method.
       </div>
       <SelectProblem
         {problems}
@@ -53,18 +91,9 @@
       />
     {:else if tab === 1 && selected_problem}
       <div class="mb-8">
-        Please select a solution method. Then <button
-          class="anchor"
-          on:click={() => {
-            tab = 2;
-          }}
-          disabled={!selected_problem || !selected_method}
-          >continue to solving the problem</button
-        >.
+        Please select a solution method. Then continue to solving the problem.
       </div>
       <SelectMethod problem={selected_problem} bind:selected_method />
-    {:else if tab === 2 && selected_problem && selected_method}
-      <SolveProblem problem={selected_problem} method={selected_method} />
     {:else}
       <GeneralError />
     {/if}

src/lib/components/main/stores.ts

@@ -0,0 +1,3 @@
+import { writable } from "svelte/store";
+
+export const methodNameStore = writable("");

src/lib/components/methods/nautilus/Button.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+  export let mode = "neutral"; // Default mode is neutral
+  export let disabled = false;
+  export let text: string;
+
+  // Function to determine the button color classes based on the mode
+  function determineColorClasses(mode: string) {
+    switch (mode) {
+      case "delete":
+      case "reset":
+        return "bg-red-500 hover:bg-red-600 text-sm font-medium";
+      case "neutral":
+      default:
+        return "bg-blue-500 hover:bg-blue-600 text-sm font-medium";
+    }
+  }
+
+  // Compute the color classes based on the mode
+  $: colorClasses = determineColorClasses(mode);
+</script>
+
+<button
+  on:click
+  {disabled}
+  class={`cursor-pointer rounded-md border-none px-5 py-2.5 text-white ${
+    disabled ? "cursor-not-allowed opacity-50" : "opacity-100"
+  } ${colorClasses}`}
+>
+  {text}
+</button>

src/lib/components/methods/nautilus/InfoBox.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  export let text: string;
+</script>
+
+<p class="instructions">{text}</p>
+
+<style>
+  .instructions {
+    text-align: justify;
+    box-shadow: none;
+    margin-bottom: 20px;
+    font-size: 14px;
+  }
+</style>