@platforma-open/milaboratories.sequence-properties.ui 1.1.1 → 1.1.3

package/dist/index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta http-equiv="Content-Security-Policy" content="script-src 'self' blob:" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <script type="module" crossorigin src="./assets/index-D8ZGYda9.js"></script>
+    <script type="module" crossorigin src="./assets/index-B8olTeVZ.js"></script>
     <link rel="modulepreload" crossorigin href="./assets/chunk-DECur_0Z.js">
     <link rel="stylesheet" crossorigin href="./assets/index-WqWl6Tyy.css">
   </head>

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@platforma-open/milaboratories.sequence-properties.ui",
-  "version": "1.1.1",
+  "version": "1.1.3",
   "type": "module",
   "dependencies": {
+    "@platforma-sdk/model": "1.69.0",
     "@platforma-sdk/ui-vue": "1.69.0",
-    "@platforma-open/milaboratories.sequence-properties.model": "1.1.1"
+    "@platforma-open/milaboratories.sequence-properties.model": "1.1.2"
   },
   "devDependencies": {
     "@milaboratories/ts-builder": "1.3.2",

package/src/pages/MainPage.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { createPlDataTableStateV2, type PlRef } from "@platforma-sdk/model";
 import {
   PlAgDataTableV2,
   PlAlert,
@@ -10,12 +11,29 @@ import {
   PlSlideModal,
   usePlDataTableSettingsV2,
 } from "@platforma-sdk/ui-vue";
-import { ref } from "vue";
+import { ref, watch } from "vue";
 import { useApp } from "../app";
 
 const app = useApp();
 
 const logOpen = ref(false);
+const settingsOpen = ref(app.model.data.inputAnchor === undefined);
+
+watch(
+  () => app.model.outputs.isRunning,
+  (isRunning) => {
+    if (isRunning) settingsOpen.value = false;
+  },
+);
+
+// Setter, not a watch on `inputAnchor`. The SDK replaces the `data`
+// object on server patches (other-client edits, app reopen); a watcher
+// would fire on that replacement and reset tableState the user did
+// not touch. The setter runs only on the user's gesture.
+function setInput(ref?: PlRef) {
+  app.model.data.inputAnchor = ref;
+  app.model.data.tableState = createPlDataTableStateV2();
+}
 
 const tableSettings = usePlDataTableSettingsV2({
   model: () => app.model.outputs.propertiesTable,
@@ -32,18 +50,14 @@ const tableSettings = usePlDataTableSettingsV2({
           <PlMaskIcon24 name="file-logs" />
         </template>
       </PlBtnGhost>
+      <PlBtnGhost @click.stop="() => (settingsOpen = true)">
+        Settings
+        <template #append>
+          <PlMaskIcon24 name="settings" />
+        </template>
+      </PlBtnGhost>
     </template>
 
-    <PlDropdownRef
-      v-model="app.model.data.inputAnchor"
-      :options="app.model.outputs.inputOptions"
-      label="Input dataset"
-    >
-      <template #tooltip>
-        Peptide extraction or MiXCR clonotyping output. Modality is auto-detected.
-      </template>
-    </PlDropdownRef>
-
     <PlAlert
       v-for="(message, idx) in app.model.outputs.info?.messages ?? []"
       :key="idx"
@@ -60,6 +74,22 @@ const tableSettings = usePlDataTableSettingsV2({
     />
   </PlBlockPage>
 
+  <PlSlideModal v-model="settingsOpen" close-on-outside-click shadow>
+    <template #title>Settings</template>
+    <PlDropdownRef
+      :model-value="app.model.data.inputAnchor"
+      :options="app.model.outputs.inputOptions"
+      label="Input dataset"
+      clearable
+      required
+      @update:model-value="setInput"
+    >
+      <template #tooltip>
+        Peptide extraction or MiXCR clonotyping output. Modality is auto-detected.
+      </template>
+    </PlDropdownRef>
+  </PlSlideModal>
+
   <PlSlideModal v-model="logOpen" width="80%">
     <template #title>Processing Log</template>
     <PlLogView :log-handle="app.model.outputs.processingLog" />