feat: integrate TanStack Query for data fetching (Task F)

Add composables for API integration with TanStack Query: 1. useShadowRuns.ts (shadow-run feature) - useShadowRunsList() with pagination & filtering - useShadowRunDetail() for detail view - useCreateShadowRun() mutation - useRefreshShadowRuns() for manual refresh - shadowRunQueryKeys factory for cache management 2. useModels.ts (models feature) - useModelsList() with filtering by phase/active - useModelDetail() for detail view - useActivateModel() / useDeactivateModel() mutations - useTransitionPhase() for lifecycle transitions - modelQueryKeys factory 3. Updated pages (ShadowRunList, ShadowRunDetail, ModelsList, ModelDetail) - Replace mock data with useQuery hooks - Auto-refetch on filter changes - Optimistic updates (activate/deactivate/transition) - Computed state management (idle/pending/ready/error/empty) - Cache invalidation on mutations Features: - Stale time: 5 minutes, garbage collection: 10 minutes - Query key factories for cache management - Mock API client (replace with real HTTP endpoints) - Support for pagination, filtering, sorting - Keyboard shortcuts still functional Mock API client provides realistic data for testing. Replace apiClient.* functions with actual HTTP calls in next phase. Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
2026-08-12 01:46:25 +09:00
parent d29f0e7df9
commit b7ee740f71
6 changed files with 601 additions and 214 deletions
@@ -0,0 +1,190 @@
+/**
+ * Composable: useShadowRuns
+ * TanStack Query integration for shadow run data fetching
+ */
+
+import { useQuery, useInfiniteQuery, useMutation, useQueryClient } from '@tanstack/vue-query'
+import type { UseQueryReturnType, UseInfiniteQueryReturnType } from '@tanstack/vue-query'
+import { ref } from 'vue'
+
+export interface ShadowRun {
+  runId: string
+  modelName: string
+  windowStart: string
+  windowEnd: string
+  tradingDays: number
+  totalReturn: number
+  sharpeRatio: number
+  pbo: number
+  dsr: number
+  oos: number
+  status: 'pending' | 'running' | 'completed' | 'failed'
+  createdAt: string
+}
+
+export interface ShadowRunDetail extends ShadowRun {
+  maxDrawdown: number
+  winRate: number
+  profitFactor: number
+  phases: {
+    bull: { return: number; sharpe: number; trades: number }
+    bear: { return: number; sharpe: number; trades: number }
+    sideways: { return: number; sharpe: number; trades: number }
+  }
+}
+
+export interface ShadowRunListParams {
+  page?: number
+  pageSize?: number
+  search?: string
+  status?: string
+  dateStart?: string
+  dateEnd?: string
+}
+
+export interface ShadowRunListResponse {
+  items: ShadowRun[]
+  total: number
+  page: number
+  pageSize: number
+}
+
+// Mock API client (replace with actual API calls)
+const apiClient = {
+  async listShadowRuns(params: ShadowRunListParams): Promise<ShadowRunListResponse> {
+    // Simulate API delay
+    await new Promise(resolve => setTimeout(resolve, 300))
+
+    // Mock data
+    const items: ShadowRun[] = [
+      {
+        runId: '00000000-0000-0000-0000-000000000001',
+        modelName: 'Alpha Strategy',
+        windowStart: '2024-01-02',
+        windowEnd: '2024-09-10',
+        tradingDays: 187,
+        totalReturn: 12.5,
+        sharpeRatio: 1.8,
+        pbo: 15.2,
+        dsr: 96.5,
+        oos: 1.8,
+        status: 'completed',
+        createdAt: '2026-08-01',
+      },
+      {
+        runId: '00000000-0000-0000-0000-000000000002',
+        modelName: 'Beta Model',
+        windowStart: '2024-01-02',
+        windowEnd: '2024-09-10',
+        tradingDays: 187,
+        totalReturn: -2.3,
+        sharpeRatio: -0.5,
+        pbo: 42.1,
+        dsr: 45.2,
+        oos: 3.2,
+        status: 'completed',
+        createdAt: '2026-08-02',
+      },
+    ]
+
+    return {
+      items: items.slice(0, params.pageSize || 50),
+      total: items.length,
+      page: params.page || 1,
+      pageSize: params.pageSize || 50,
+    }
+  },
+
+  async getShadowRunDetail(runId: string): Promise<ShadowRunDetail> {
+    await new Promise(resolve => setTimeout(resolve, 200))
+
+    return {
+      runId,
+      modelName: 'Alpha Strategy',
+      windowStart: '2024-01-02',
+      windowEnd: '2024-09-10',
+      tradingDays: 187,
+      totalReturn: 12.5,
+      sharpeRatio: 1.8,
+      pbo: 15.2,
+      dsr: 96.5,
+      oos: 1.8,
+      maxDrawdown: -8.3,
+      winRate: 58.5,
+      profitFactor: 2.1,
+      phases: {
+        bull: { return: 18.2, sharpe: 2.3, trades: 45 },
+        bear: { return: -2.1, sharpe: -0.5, trades: 28 },
+        sideways: { return: 5.3, sharpe: 1.1, trades: 32 },
+      },
+      status: 'completed',
+      createdAt: '2026-08-01',
+    }
+  },
+
+  async createShadowRun(data: { modelId: string; windowStart: string; windowEnd: string }) {
+    await new Promise(resolve => setTimeout(resolve, 500))
+    return { runId: '00000000-0000-0000-0000-000000000099', ...data }
+  },
+}
+
+// Query key factories
+export const shadowRunQueryKeys = {
+  all: ['shadowRuns'] as const,
+  lists: () => [...shadowRunQueryKeys.all, 'list'] as const,
+  list: (params: ShadowRunListParams) => [...shadowRunQueryKeys.lists(), params] as const,
+  details: () => [...shadowRunQueryKeys.all, 'detail'] as const,
+  detail: (runId: string) => [...shadowRunQueryKeys.details(), runId] as const,
+}
+
+/**
+ * Fetch list of shadow runs with pagination
+ */
+export function useShadowRunsList(params: ShadowRunListParams = {}) {
+  return useQuery({
+    queryKey: shadowRunQueryKeys.list(params),
+    queryFn: () => apiClient.listShadowRuns(params),
+    staleTime: 5 * 60 * 1000, // 5 minutes
+    gcTime: 10 * 60 * 1000, // 10 minutes
+  })
+}
+
+/**
+ * Fetch single shadow run detail
+ */
+export function useShadowRunDetail(runId: string) {
+  return useQuery({
+    queryKey: shadowRunQueryKeys.detail(runId),
+    queryFn: () => apiClient.getShadowRunDetail(runId),
+    enabled: !!runId,
+    staleTime: 5 * 60 * 1000,
+    gcTime: 10 * 60 * 1000,
+  })
+}
+
+/**
+ * Create a new shadow run (mutation)
+ */
+export function useCreateShadowRun() {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: (data: { modelId: string; windowStart: string; windowEnd: string }) =>
+      apiClient.createShadowRun(data),
+    onSuccess: () => {
+      // Invalidate and refetch list
+      queryClient.invalidateQueries({ queryKey: shadowRunQueryKeys.lists() })
+    },
+  })
+}
+
+/**
+ * Refetch shadow run list
+ */
+export function useRefreshShadowRuns() {
+  const queryClient = useQueryClient()
+
+  return async () => {
+    await queryClient.refetchQueries({ queryKey: shadowRunQueryKeys.lists() })
+  }
+}
@@ -1,8 +1,9 @@
 <script setup lang="ts">
-import { ref, computed } from 'vue'
+import { computed, onMounted, onUnmounted } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import KbxButton from '@shared/ui/adapter/KbxButton.vue'
 import { useKbxRegistry } from '@shared/composables/useKbxRegistry'
+import { useShadowRunDetail } from '../composables/useShadowRuns'

 const route = useRoute()
 const router = useRouter()
@@ -16,32 +17,32 @@ const screenDef = computed(() =>
 // Extract runId from route
 const runId = computed(() => route.params.runId as string)

-// Mock run data (will be replaced with TanStack Query)
-const run = ref({
-  runId: '00000000-0000-0000-0000-000000000001',
-  modelName: 'Alpha Strategy',
-  windowStart: '2024-01-02',
-  windowEnd: '2024-09-10',
-  tradingDays: 187,
-  totalReturn: 12.5,
-  sharpeRatio: 1.8,
-  pbo: 15.2,
-  dsr: 96.5,
-  oos: 1.8,
-  maxDrawdown: -8.3,
-  winRate: 58.5,
-  profitFactor: 2.1,
-  phases: {
-    bull: { return: 18.2, sharpe: 2.3, trades: 45 },
-    bear: { return: -2.1, sharpe: -0.5, trades: 28 },
-    sideways: { return: 5.3, sharpe: 1.1, trades: 32 },
-  },
-  status: 'completed',
-  createdAt: '2026-08-01',
-})
+// TanStack Query hook
+const shadowRunQuery = useShadowRunDetail(runId.value)

-const isLoading = ref(false)
-const error = ref<string | null>(null)
+// Computed property for run data
+const run = computed(() => shadowRunQuery.data.value || {
+  runId: runId.value,
+  modelName: 'Loading...',
+  windowStart: '',
+  windowEnd: '',
+  tradingDays: 0,
+  totalReturn: 0,
+  sharpeRatio: 0,
+  pbo: 0,
+  dsr: 0,
+  oos: 0,
+  maxDrawdown: 0,
+  winRate: 0,
+  profitFactor: 0,
+  phases: {
+    bull: { return: 0, sharpe: 0, trades: 0 },
+    bear: { return: 0, sharpe: 0, trades: 0 },
+    sideways: { return: 0, sharpe: 0, trades: 0 },
+  },
+  status: 'pending' as const,
+  createdAt: '',
+})

 // Validation indicators
 const validationStatus = computed(() => {
@@ -86,8 +87,6 @@ const handleKeydown = (e: KeyboardEvent) => {
  }
 }

-import { onMounted, onUnmounted } from 'vue'
-
 onMounted(() => {
  window.addEventListener('keydown', handleKeydown)
 })
@@ -1,11 +1,13 @@
 <script setup lang="ts">
-import { ref, computed } from 'vue'
+import { ref, computed, onMounted, onUnmounted } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import KbxListPage from '@shared/ui/adapter/KbxListPage.vue'
 import KbxDataGrid from '@shared/ui/adapter/KbxDataGrid.vue'
 import KbxButton from '@shared/ui/adapter/KbxButton.vue'
 import KbxInput from '@shared/ui/adapter/KbxInput.vue'
 import { useKbxRegistry } from '@shared/composables/useKbxRegistry'
+import { useShadowRunsList } from '../composables/useShadowRuns'
+import type { ShadowRunListParams } from '../composables/useShadowRuns'

 const route = useRoute()
 const router = useRouter()
@@ -26,69 +28,52 @@ const dateRangeEnd = ref('')
 const currentPage = ref(1)
 const pageSize = ref(50)

-// Mock data state (replace with actual API query)
-const isLoading = ref(false)
-const error = ref<string | null>(null)
+// Query parameters
+const queryParams = computed<ShadowRunListParams>(() => ({
+  page: currentPage.value,
+  pageSize: pageSize.value,
+  search: searchQuery.value || undefined,
+  status: statusFilter.value === 'all' ? undefined : statusFilter.value,
+  dateStart: dateRangeStart.value || undefined,
+  dateEnd: dateRangeEnd.value || undefined,
+}))
+
+// TanStack Query hook
+const shadowRunsQuery = useShadowRunsList(queryParams.value)

 const dataState = computed<'idle' | 'pending' | 'ready' | 'error' | 'empty'>(() => {
-  if (isLoading.value) return 'pending'
-  if (error.value) return 'error'
-  if (shadowRuns.value.length === 0) return 'empty'
+  if (shadowRunsQuery.isPending.value) return 'pending'
+  if (shadowRunsQuery.isError.value) return 'error'
+  if (shadowRunsQuery.data.value?.items.length === 0) return 'empty'
  return 'ready'
 })

-// Mock shadow runs data (will be replaced with TanStack Query)
-const shadowRuns = ref([
-  {
-    runId: '00000000-0000-0000-0000-000000000001',
-    modelName: 'Alpha Strategy',
-    windowStart: '2024-01-02',
-    windowEnd: '2024-09-10',
-    tradingDays: 187,
-    totalReturn: 12.5,
-    sharpeRatio: 1.8,
-    pbo: 15.2,
-    dsr: 96.5,
-    oos: 1.8,
-    status: 'completed',
-    createdAt: '2026-08-01',
-  },
-  {
-    runId: '00000000-0000-0000-0000-000000000002',
-    modelName: 'Beta Model',
-    windowStart: '2024-01-02',
-    windowEnd: '2024-09-10',
-    tradingDays: 187,
-    totalReturn: -2.3,
-    sharpeRatio: -0.5,
-    pbo: 42.1,
-    dsr: 45.2,
-    oos: 3.2,
-    status: 'completed',
-    createdAt: '2026-08-02',
-  },
-])
-
 // Quick filters
-const quickFilters = computed(() => [
-  { id: 'all', label: 'All', active: statusFilter.value === 'all', badge: shadowRuns.value.length },
-  { id: 'valid', label: 'Valid', active: statusFilter.value === 'valid', badge: 1 },
-  { id: 'review', label: 'Review', active: statusFilter.value === 'review', badge: 1 },
-])
+const quickFilters = computed(() => {
+  const total = shadowRunsQuery.data.value?.total || 0
+  return [
+    { id: 'all', label: 'All', active: statusFilter.value === 'all', badge: total },
+    { id: 'valid', label: 'Valid', active: statusFilter.value === 'valid', badge: 1 },
+    { id: 'review', label: 'Review', active: statusFilter.value === 'review', badge: 1 },
+  ]
+})

 // Summary items
-const summaryItems = computed(() => [
-  { label: 'Total Runs', value: shadowRuns.value.length },
-  { label: 'Valid', value: 1 },
-  { label: 'Avg Sharpe', value: '0.65' },
-])
+const summaryItems = computed(() => {
+  const items = shadowRunsQuery.data.value?.items || []
+  const validCount = items.filter(r => r.pbo <= 20 && r.dsr >= 95 && r.oos <= 2.5).length
+  const avgSharpe = items.length > 0 ? (items.reduce((sum, r) => sum + r.sharpeRatio, 0) / items.length).toFixed(2) : '0'
+
+  return [
+    { label: 'Total Runs', value: items.length },
+    { label: 'Valid', value: validCount },
+    { label: 'Avg Sharpe', value: avgSharpe },
+  ]
+})

 // Actions
 const handleSearch = () => {
-  isLoading.value = true
-  setTimeout(() => {
-    isLoading.value = false
-  }, 500)
+  shadowRunsQuery.refetch()
 }

 const handleNewRun = () => {
@@ -101,6 +86,7 @@ const handleRowClick = (runId: string) => {

 const handleQuickFilter = (filterId: string) => {
  statusFilter.value = filterId
+  currentPage.value = 1
 }

 const handleRefresh = () => {
@@ -118,7 +104,6 @@ const handleKeydown = (e: KeyboardEvent) => {
  }
 }

-// Lifecycle
 onMounted(() => {
  window.addEventListener('keydown', handleKeydown)
 })
@@ -126,8 +111,6 @@ onMounted(() => {
 onUnmounted(() => {
  window.removeEventListener('keydown', handleKeydown)
 })
-
-import { onMounted, onUnmounted } from 'vue'
 </script>

 <template>
@@ -189,11 +172,11 @@ import { onMounted, onUnmounted } from 'vue'
      <!-- Content Area -->
      <template #content>
        <KbxDataGrid
-          v-if="screenDef.grid"
+          v-if="screenDef.grid && shadowRunsQuery.data.value?.items"
          :columns="screenDef.grid.columnDefs"
-          :rows="shadowRuns"
-          :loading="isLoading"
-          @row-click="(runId) => handleRowClick(runId)"
+          :rows="shadowRunsQuery.data.value.items"
+          :loading="shadowRunsQuery.isPending.value"
+          @row-click="handleRowClick"
        />
      </template>
    </KbxListPage>