@morscherlab/mld-sdk 0.9.3 → 0.9.5

package/src/composables/index.ts

@@ -95,9 +95,12 @@ export {
 } from './useExperimentSelector'
 export {
   formatExperimentDate,
+  datePresetToISO,
   EXPERIMENT_STATUS_OPTIONS,
   EXPERIMENT_STATUS_VARIANT_MAP,
   EXPERIMENT_STATUS_LABELS,
+  DATE_PRESET_OPTIONS,
+  SORT_OPTIONS,
 } from './experiment-utils'
 export {
   useExperimentData,

package/src/composables/useExperimentSelector.ts

@@ -1,6 +1,15 @@
 import { ref, reactive, computed, watch, onScopeDispose, type Ref, type ComputedRef } from 'vue'
 import { useApi } from './useApi'
-import type { ExperimentSummary, ExperimentListResponse, ExperimentFilters, PlatformContext } from '../types'
+import { datePresetToISO } from './experiment-utils'
+import type {
+  ExperimentSummary,
+  ExperimentListResponse,
+  ExperimentFilters,
+  ExperimentTypeOption,
+  ExperimentSortField,
+  PlatformContext,
+  SelectOption,
+} from '../types'
 
 function getPlatformContext(): PlatformContext | undefined {
   if (typeof window === 'undefined') return undefined
@@ -27,11 +36,20 @@ export interface UseExperimentSelectorReturn {
   error: Ref<string | null>
   page: Ref<number>
   hasMore: ComputedRef<boolean>
+  // Sort
+  sortKey: Ref<string>
+  // Filter options
+  experimentTypes: Ref<ExperimentTypeOption[]>
+  projects: Ref<SelectOption<string>[]>
+  // Grouped view
+  groupedByProject: ComputedRef<[string, ExperimentSummary[]][]>
+  // Methods
   fetch: () => Promise<void>
   loadMore: () => Promise<void>
   reset: () => void
   select: (experiment: ExperimentSummary) => void
   clear: () => void
+  fetchFilterOptions: () => Promise<void>
 }
 
 export function useExperimentSelector(
@@ -48,26 +66,62 @@ export function useExperimentSelector(
   const error = ref<string | null>(null)
   const page = ref(0)
 
+  // Sort: combined key like "created_at:desc"
+  const sortKey = ref<string>('created_at:desc')
+
+  // Filter option data (fetched once, cached)
+  const experimentTypes = ref<ExperimentTypeOption[]>([])
+  const projects = ref<SelectOption<string>[]>([])
+  let filterOptionsFetched = false
+
   const hasMore = computed(() => experiments.value.length < total.value)
 
+  const filters: ExperimentFilters = reactive({
+    search: undefined,
+    status: undefined,
+    project: undefined,
+    experimentType: undefined,
+    datePreset: undefined,
+  })
+
+  function parseSortKey(): { sortBy: ExperimentSortField; sortOrder: 'asc' | 'desc' } {
+    const [field, order] = sortKey.value.split(':')
+    return {
+      sortBy: (field || 'created_at') as ExperimentSortField,
+      sortOrder: (order || 'desc') as 'asc' | 'desc',
+    }
+  }
+
   async function fetchExperiments(): Promise<void> {
     isLoading.value = true
     error.value = null
     try {
       const params = new URLSearchParams()
-      // Priority: explicit option > platform context (single type) > no filter
+      // Priority: explicit option > platform context (single type) > filter dropdown > no filter
       const allowedTypes = getPlatformContext()?.allowedExperimentTypes
       const effectiveType = experimentType
         ?? (allowedTypes?.length === 1 ? allowedTypes[0] : undefined)
+        ?? filters.experimentType
+        ?? undefined
       if (effectiveType) params.set('experiment_type', effectiveType)
       if (filters.status) params.set('status', filters.status)
       if (filters.search) params.set('search', filters.search)
       if (filters.project) params.set('project', filters.project)
+
+      // Sort params
+      const { sortBy, sortOrder } = parseSortKey()
+      params.set('sort_by', sortBy)
+      params.set('sort_order', sortOrder)
+
+      // Date preset → created_after
+      if (filters.datePreset) {
+        params.set('created_after', datePresetToISO(filters.datePreset))
+      }
+
       params.set('limit', String(limit))
       params.set('skip', String(page.value * limit))
 
       const query = params.toString()
-      // Use absolute platform URL in integrated mode to bypass plugin's baseURL
       const base = platformBase ?? '/api'
       const url = `${base}/experiments${query ? `?${query}` : ''}`
       const data = await api.get<ExperimentListResponse>(url)
@@ -96,6 +150,32 @@ export function useExperimentSelector(
     }
   }
 
+  async function fetchFilterOptions(): Promise<void> {
+    if (filterOptionsFetched) return
+    filterOptionsFetched = true
+
+    const base = platformBase ?? '/api'
+    const [typesRes, projectsRes] = await Promise.allSettled([
+      api.get<Array<{ name: string; color?: string }>>(`${base}/experiments/experiment-types`),
+      api.get<Array<{ id: number; name: string }>>(`${base}/projects`),
+    ])
+
+    if (typesRes.status === 'fulfilled' && Array.isArray(typesRes.value)) {
+      experimentTypes.value = typesRes.value.map(t => ({
+        value: t.name,
+        label: t.name,
+        color: t.color,
+      }))
+    }
+
+    if (projectsRes.status === 'fulfilled' && Array.isArray(projectsRes.value)) {
+      projects.value = projectsRes.value.map(p => ({
+        value: p.name,
+        label: p.name,
+      }))
+    }
+  }
+
   async function loadMore(): Promise<void> {
     if (!hasMore.value || isLoading.value) return
     page.value++
@@ -118,13 +198,30 @@ export function useExperimentSelector(
     filters.search = undefined
     filters.status = undefined
     filters.project = undefined
+    filters.experimentType = undefined
+    filters.datePreset = undefined
+    sortKey.value = 'created_at:desc'
     page.value = 0
   }
 
-  const filters: ExperimentFilters = reactive({
-    search: undefined,
-    status: undefined,
-    project: undefined,
+  // Group experiments by project (client-side)
+  const groupedByProject = computed<[string, ExperimentSummary[]][]>(() => {
+    const groups = new Map<string, ExperimentSummary[]>()
+    for (const exp of experiments.value) {
+      const key = exp.project_name ?? exp.project ?? 'No project'
+      const list = groups.get(key)
+      if (list) {
+        list.push(exp)
+      } else {
+        groups.set(key, [exp])
+      }
+    }
+    // Sort alphabetically, "No project" last
+    return [...groups.entries()].sort(([a], [b]) => {
+      if (a === 'No project') return 1
+      if (b === 'No project') return -1
+      return a.localeCompare(b)
+    })
   })
 
   // Debounced watch on search filter
@@ -140,10 +237,12 @@ export function useExperimentSelector(
     },
   )
 
-  // Immediate watch on status/project filters (no debounce needed)
+  // Immediate watch on discrete filters and sort (cancel any pending search debounce)
   watch(
-    () => [filters.status, filters.project],
+    () => [filters.status, filters.project, filters.experimentType, filters.datePreset, sortKey.value],
     () => {
+      if (debounceTimer) clearTimeout(debounceTimer)
+      debounceTimer = null
       page.value = 0
       fetchExperiments()
     },
@@ -166,10 +265,15 @@ export function useExperimentSelector(
     error,
     page,
     hasMore,
+    sortKey,
+    experimentTypes,
+    projects,
+    groupedByProject,
     fetch: fetchExperiments,
     loadMore,
     reset,
     select,
     clear,
+    fetchFilterOptions,
   }
 }

package/src/index.ts

@@ -153,9 +153,12 @@ export {
   type UseExperimentSelectorReturn,
   // Experiment utilities
   formatExperimentDate,
+  datePresetToISO,
   EXPERIMENT_STATUS_OPTIONS,
   EXPERIMENT_STATUS_VARIANT_MAP,
   EXPERIMENT_STATUS_LABELS,
+  DATE_PRESET_OPTIONS,
+  SORT_OPTIONS,
   // Experiment data
   useExperimentData,
   type UseExperimentDataOptions,

package/src/stores/auth.ts

@@ -5,6 +5,8 @@ import type { AuthConfig, UserInfo } from '../types'
 const AUTH_TOKEN_KEY = 'mld-auth-token'
 const AUTH_EXPIRES_KEY = 'mld-auth-expires'
 
+const hasLocalStorage = typeof localStorage !== 'undefined' && typeof localStorage.getItem === 'function'
+
 export const useAuthStore = defineStore('mld-auth', () => {
   // State
   const token = ref<string | null>(null)
@@ -50,18 +52,20 @@ export const useAuthStore = defineStore('mld-auth', () => {
 
   // Actions
   function initialize() {
-    const storedToken = localStorage.getItem(AUTH_TOKEN_KEY)
-    const storedExpires = localStorage.getItem(AUTH_EXPIRES_KEY)
-
-    if (storedToken) {
-      token.value = storedToken
-
-      if (storedExpires) {
-        const expires = new Date(storedExpires)
-        if (expires > new Date()) {
-          tokenExpires.value = expires
-        } else {
-          clearToken()
+    if (hasLocalStorage) {
+      const storedToken = localStorage.getItem(AUTH_TOKEN_KEY)
+      const storedExpires = localStorage.getItem(AUTH_EXPIRES_KEY)
+
+      if (storedToken) {
+        token.value = storedToken
+
+        if (storedExpires) {
+          const expires = new Date(storedExpires)
+          if (expires > new Date()) {
+            tokenExpires.value = expires
+          } else {
+            clearToken()
+          }
         }
       }
     }
@@ -74,8 +78,10 @@ export const useAuthStore = defineStore('mld-auth', () => {
     const expires = new Date(Date.now() + expiresIn * 1000)
     tokenExpires.value = expires
 
-    localStorage.setItem(AUTH_TOKEN_KEY, accessToken)
-    localStorage.setItem(AUTH_EXPIRES_KEY, expires.toISOString())
+    if (hasLocalStorage) {
+      localStorage.setItem(AUTH_TOKEN_KEY, accessToken)
+      localStorage.setItem(AUTH_EXPIRES_KEY, expires.toISOString())
+    }
   }
 
   function clearToken() {
@@ -84,8 +90,10 @@ export const useAuthStore = defineStore('mld-auth', () => {
     username.value = null
     userInfo.value = null
 
-    localStorage.removeItem(AUTH_TOKEN_KEY)
-    localStorage.removeItem(AUTH_EXPIRES_KEY)
+    if (hasLocalStorage) {
+      localStorage.removeItem(AUTH_TOKEN_KEY)
+      localStorage.removeItem(AUTH_EXPIRES_KEY)
+    }
   }
 
   function setUserInfo(info: UserInfo) {

package/src/styles/components/experiment-selector-modal.css

@@ -6,7 +6,16 @@
   gap: 0.75rem;
 }
 
-/* Filter bar */
+/* Shared filter row layout */
+.mld-experiment-selector__filters-row,
+.mld-experiment-selector__filters-advanced {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+/* Keep old class name working for backwards compat */
 .mld-experiment-selector__filters {
   display: flex;
   gap: 0.5rem;
@@ -14,14 +23,76 @@
 
 .mld-experiment-selector__search {
   flex: 1;
-  min-width: 0;
+  min-width: 10rem;
 }
 
-.mld-experiment-selector__status-filter {
+.mld-experiment-selector__status-filter,
+.mld-experiment-selector__filter-select {
   flex-shrink: 0;
   width: 10rem;
 }
 
+/* "Filters" toggle button */
+.mld-experiment-selector__filters-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.375rem 0.625rem;
+  border: 1px solid var(--border-color);
+  border-radius: var(--mld-radius-sm);
+  background: var(--bg-primary);
+  color: var(--text-secondary);
+  font-size: 0.8125rem;
+  cursor: pointer;
+  white-space: nowrap;
+  position: relative;
+  transition: border-color 0.15s ease, color 0.15s ease;
+}
+
+.mld-experiment-selector__filters-toggle:hover {
+  border-color: var(--color-primary);
+  color: var(--text-primary);
+}
+
+.mld-experiment-selector__filters-toggle--active {
+  color: var(--color-primary);
+  border-color: var(--color-primary);
+}
+
+/* Active filter badge dot */
+.mld-experiment-selector__filters-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background-color: var(--color-primary, #3b82f6);
+  flex-shrink: 0;
+}
+
+/* Advanced filters row */
+.mld-experiment-selector__filters-advanced {
+  padding-top: 0.25rem;
+}
+
+/* Group toggle checkbox label */
+.mld-experiment-selector__group-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  font-size: 0.8125rem;
+  color: var(--text-secondary);
+  cursor: pointer;
+  white-space: nowrap;
+  user-select: none;
+  margin-left: auto;
+}
+
+.mld-experiment-selector__group-checkbox {
+  width: 14px;
+  height: 14px;
+  accent-color: var(--color-primary, #3b82f6);
+  cursor: pointer;
+}
+
 /* Loading skeleton */
 .mld-experiment-selector__skeleton {
   display: flex;
@@ -66,6 +137,60 @@
   border-radius: var(--mld-radius);
 }
 
+/* Project group header */
+.mld-experiment-selector__group-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  background-color: var(--bg-secondary, var(--bg-primary));
+  border: none;
+  cursor: pointer;
+  width: 100%;
+  text-align: left;
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+  transition: background-color 0.15s ease;
+}
+
+.mld-experiment-selector__group-header:hover {
+  background-color: var(--bg-hover);
+}
+
+.mld-experiment-selector__group-chevron {
+  flex-shrink: 0;
+  transition: transform 0.15s ease;
+}
+
+.mld-experiment-selector__group-chevron--collapsed {
+  transform: rotate(-90deg);
+}
+
+.mld-experiment-selector__group-name {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.mld-experiment-selector__group-count {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 1.25rem;
+  height: 1.25rem;
+  padding: 0 0.375rem;
+  border-radius: 999px;
+  background-color: var(--bg-tertiary, var(--border-color));
+  font-size: 0.6875rem;
+  font-weight: 500;
+  color: var(--text-muted);
+}
+
 /* Row */
 .mld-experiment-selector__row {
   display: flex;
@@ -134,3 +259,27 @@
   color: var(--text-muted);
   margin-top: 0.125rem;
 }
+
+/* Footer with clear selection */
+.mld-experiment-selector__footer {
+  display: flex;
+  justify-content: flex-start;
+  padding-top: 0.25rem;
+}
+
+.mld-experiment-selector__clear-btn {
+  padding: 0.25rem 0;
+  border: none;
+  background: none;
+  color: var(--text-muted);
+  font-size: 0.8125rem;
+  cursor: pointer;
+  text-decoration: underline;
+  text-decoration-color: transparent;
+  transition: color 0.15s ease, text-decoration-color 0.15s ease;
+}
+
+.mld-experiment-selector__clear-btn:hover {
+  color: var(--color-primary);
+  text-decoration-color: var(--color-primary);
+}

package/src/types/components.ts

@@ -604,6 +604,14 @@ export interface ResourceSpec {
 
 // Experiment selector types
 export type ExperimentStatus = 'planned' | 'ongoing' | 'completed'
+export type DatePreset = 'last_7_days' | 'last_30_days' | 'last_90_days'
+export type ExperimentSortField = 'created_at' | 'updated_at' | 'name' | 'status'
+
+export interface ExperimentTypeOption {
+  value: string
+  label: string
+  color?: string
+}
 
 export interface ExperimentSummary {
   id: number
@@ -613,6 +621,7 @@ export interface ExperimentSummary {
   experiment_type: string
   project?: string
   project_id?: number
+  project_name?: string
   notes?: string
   tags?: Record<string, unknown>
   created_at: string
@@ -629,6 +638,8 @@ export interface ExperimentFilters {
   search?: string
   status?: ExperimentStatus | null
   project?: string | null
+  experimentType?: string | null
+  datePreset?: DatePreset | null
 }
 
 // FitPanel types

package/src/types/index.ts

@@ -128,6 +128,9 @@ export type {
   MoleculeData,
   // Experiment selector types
   ExperimentStatus,
+  DatePreset,
+  ExperimentSortField,
+  ExperimentTypeOption,
   ExperimentSummary,
   ExperimentListResponse,
   ExperimentFilters,