allow persist server settings

package.json

@@ -16,6 +16,7 @@
     "lodash": "^4.17.21",
     "npyjs": "^0.5.0",
     "pinia": "^2.1.7",
+    "pinia-plugin-persistedstate": "^3.2.1",
     "primevue": "^3.43.0",
     "vue": "^3.3.11"
   },

src/components/AdvanceSetting.vue

@@ -91,12 +91,12 @@
 
 <script>
 import { watch, ref } from 'vue'
-import { useStore } from '../stores/global'
+import { useServerStore } from '../stores/server'
 import { useParametersStore } from '../stores/parameters'
 
 export default {
   setup() {
-    const store = useStore()
+    const store = useServerStore()
     const parametersStore = useParametersStore()
     const serverURL = ref(store.serverUrl)
     const serviceId = ref(store.serviceId)

src/components/RunPanel.vue

@@ -104,6 +104,7 @@ import { ModelRunner } from "../modelRun";
 import { ImagejJsController } from "../viewerControl";
 import { useStore } from "../stores/global";
 import { useRunStore } from "../stores/run";
+import { useServerStore } from "../stores/server";
 import { useParametersStore } from "../stores/parameters";
 
 
@@ -115,6 +116,7 @@ export default {
     setup: () => {
         const store = useStore();
         const runStore = useRunStore();
+        const serverStore = useServerStore();
 
         const newIjWindow = ref(true)
         const waiting = ref(false);
@@ -245,19 +247,16 @@ export default {
         )
 
         watch(
-            () => (store.serverUrl, store.serviceId),
+            () => (serverStore.serverUrl, serverStore.serviceId),
             async () => {
                 const store = useStore();
+                const serverStore = useServerStore();
                 const runStore = useRunStore();
-                store.$patch({
-                    serverUrl: store.serverUrl,
-                    serviceId: store.serviceId,
-                });
                 const oldModelId = store.runner.modelId;
                 setInfoPanel("Initializing server...", true);
                 turnButtons(false);
                 try {
-                    const runner = new ModelRunner(store.serverUrl, store.serviceId);
+                    const runner = new ModelRunner(serverStore.serverUrl, serverStore.serviceId);
                     await runner.init();
                     await initModel(oldModelId, runner);
                     store.$patch({

src/main.js

@@ -6,10 +6,12 @@ import InputNumber from "primevue/inputnumber";
 import Dropdown from "primevue/dropdown";
 import InputText from "primevue/inputtext";
 import "primevue/resources/themes/saga-blue/theme.css";
+import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
 
 import App from "./App.vue";
 import { useStore } from "./stores/global";
 import { useParametersStore } from "./stores/parameters";
+import { useServerStore } from "./stores/server";
 import { setupStoreWatcher } from "./watcher";
 import { useRunStore, waitState, waitRunable } from "./stores/run";
 
@@ -165,14 +167,14 @@ async function createImjoyApi(api) {
     await waitRunable();
   }
   async function setServerSetting(serverUrl, serviceId) {
-    const globalStore = window.app.store.global;
+    const serverStore = window.app.store.server;
     const runStore = window.app.store.run;
     runStore.$patch({ serverInitialized: false });
-    if ((globalStore.serverUrl === serverUrl) && (globalStore.serviceId === serviceId)) {
+    if ((serverStore.serverUrl === serverUrl) && (serverStore.serviceId === serviceId)) {
       runStore.$patch({ serverInitialized: true });
       return;
     }
-    globalStore.$patch({
+    serverStore.$patch({
       serverUrl: serverUrl,
       serviceId: serviceId,
     });
@@ -217,13 +219,15 @@ app.component("Dropdown", Dropdown);
 app.component("InputText", InputText);
 
 const pinia = createPinia();
+pinia.use(piniaPluginPersistedstate);
 app.use(pinia);
 app.mount("#app");
 
 window.app.vue = app;
 
 window.app.store = {
   global: useStore(),
+  server: useServerStore(),
   parameters: useParametersStore(),
   run: useRunStore(),
 };

src/stores/global.js

@@ -3,8 +3,6 @@ import { loadCellposeRdf } from "../utils";
 
 export const useStore = defineStore("store", {
   state: () => ({
-    serverUrl: "https://ai.imjoy.io",
-    serviceId: "triton-client",
     runner: null,
     viewerControl: null,
     models: [],

src/stores/server.js

@@ -0,0 +1,10 @@
+
+import { defineStore } from "pinia";
+
+export const useServerStore = defineStore("server", {
+  state: () => ({
+    serverUrl: "https://ai.imjoy.io",
+    serviceId: "triton-client",
+  }),
+  persist: true,
+});