Improve demo flow: navigate after load, auto-select datasets

1. After loading demo data, navigate directly to the project page
2. RunView fetches project datasets and shows them in dropdowns
   instead of manual ID input
3. Auto-selects Xtrain/Ytrain by filename pattern so users can
   immediately launch analysis

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: eprifti

frontend/src/views/ProjectsView.vue

@@ -52,8 +52,11 @@
 
 <script setup>
 import { ref, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
 import axios from 'axios'
 
+const router = useRouter()
+
 const projects = ref([])
 const newName = ref('')
 const loading = ref(true)
@@ -84,8 +87,8 @@ async function fetchSamples() {
 async function loadSample(sampleId) {
   loadingSample.value = true
   try {
-    await axios.post(`/api/samples/${sampleId}/load`)
-    await fetchProjects()
+    const { data } = await axios.post(`/api/samples/${sampleId}/load`)
+    router.push(`/project/${data.project_id}`)
   } catch (e) {
     console.error('Failed to load sample:', e)
   } finally {

frontend/src/views/RunView.vue

@@ -7,11 +7,17 @@
       <section class="section">
         <h3>Data</h3>
         <div class="form-row">
-          <label>X dataset ID:
-            <input v-model="form.x_dataset_id" required placeholder="e.g., a1b2c3d4" />
+          <label>X (features):
+            <select v-model="form.x_dataset_id" required>
+              <option value="" disabled>Select X dataset</option>
+              <option v-for="d in datasets" :key="d.id" :value="d.id">{{ d.filename }}</option>
+            </select>
           </label>
-          <label>y dataset ID:
-            <input v-model="form.y_dataset_id" required placeholder="e.g., e5f6g7h8" />
+          <label>y (labels):
+            <select v-model="form.y_dataset_id" required>
+              <option value="" disabled>Select y dataset</option>
+              <option v-for="d in datasets" :key="d.id" :value="d.id">{{ d.filename }}</option>
+            </select>
           </label>
         </div>
         <div class="form-row">
@@ -100,13 +106,14 @@
 </template>
 
 <script setup>
-import { ref, reactive } from 'vue'
+import { ref, reactive, onMounted } from 'vue'
 import { useRoute } from 'vue-router'
 import axios from 'axios'
 
 const route = useRoute()
 const launching = ref(false)
 const jobId = ref(null)
+const datasets = ref([])
 
 const form = reactive({
   x_dataset_id: '',
@@ -142,6 +149,24 @@ const form = reactive({
   },
 })
 
+async function fetchDatasets() {
+  try {
+    const { data } = await axios.get(`/api/projects/${route.params.id}`)
+    datasets.value = data.datasets || []
+    // Auto-select X and Y by filename pattern
+    const xDs = datasets.value.find(d => /^X/i.test(d.filename) && /train/i.test(d.filename))
+      || datasets.value.find(d => /^X/i.test(d.filename))
+    const yDs = datasets.value.find(d => /^Y/i.test(d.filename) && /train/i.test(d.filename))
+      || datasets.value.find(d => /^Y/i.test(d.filename))
+    if (xDs) form.x_dataset_id = xDs.id
+    if (yDs) form.y_dataset_id = yDs.id
+  } catch (e) {
+    console.error('Failed to load datasets:', e)
+  }
+}
+
+onMounted(fetchDatasets)
+
 async function launch() {
   launching.value = true
   try {