From b73d3a509d893c553c8817a1ea6c62bab772ea53 Mon Sep 17 00:00:00 2001
From: jschoi <jschoi@cuuva.com>
Date: Wed, 22 Oct 2025 19:05:42 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=EB=B9=84=EA=B5=90=EC=B0=BD=20=EC=8A=A4?=
 =?UTF-8?q?=ED=81=AC=EB=A1=A4=20=EC=88=98=EC=A0=95=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../atoms/organisms/CompareRunDialog.vue      | 293 ++++++++++--------
 1 file changed, 169 insertions(+), 124 deletions(-)

diff --git a/src/components/atoms/organisms/CompareRunDialog.vue b/src/components/atoms/organisms/CompareRunDialog.vue
index 05a748a..d8a7ba2 100644
--- a/src/components/atoms/organisms/CompareRunDialog.vue
+++ b/src/components/atoms/organisms/CompareRunDialog.vue
@@ -9,14 +9,14 @@ import {
 } from "vue";
 import Plotly from "plotly.js-dist-min";
 
-/** ===== Types ===== */
+/* ===== Types ===== */
 type MetricKV = { key: string; value: number };
 type RunDetailType = {
   info: any;
   data: { metrics: MetricKV[]; params?: any[]; tags?: any[] };
 };
 
-/** ===== Props / Emits ===== */
+/* ===== Props / Emits ===== */
 const props = withDefaults(
   defineProps<{
     modelValue: boolean;
@@ -46,7 +46,7 @@ const emit = defineEmits<{
   (e: "update:selectedMetricKeys", v: string[]): void;
 }>();
 
-/** ===== local refs ===== */
+/* ===== local refs ===== */
 const dialogOpen = computed({
   get: () => props.modelValue,
   set: (v: boolean) => emit("update:modelValue", v),
@@ -63,7 +63,7 @@ const selectedMetricKeysProxy = computed({
 const elCompare = ref<HTMLDivElement | null>(null);
 const loading = ref(false);
 
-/** ===== helpers ===== */
+/* ===== helpers ===== */
 const fmtNumber = (v: number | null, digits = 3) => {
   if (v == null || !Number.isFinite(v)) return "";
   const abs = Math.abs(v);
@@ -75,8 +75,8 @@ const fmtNumber = (v: number | null, digits = 3) => {
 const normalizeArray = (vals: (number | null)[]) => {
   const xs = vals.filter((v): v is number => Number.isFinite(v as number));
   if (xs.length === 0) return vals;
-  const min = Math.min(...xs),
-    max = Math.max(...xs);
+  const min = Math.min(...xs);
+  const max = Math.max(...xs);
   if (max === min) return vals.map((v) => (v == null ? v : 1));
   return vals.map((v) => (v == null ? v : (v - min) / (max - min)));
 };
@@ -86,7 +86,7 @@ const valueOf = (run: RunDetailType, key: string): number | null => {
   return Number.isFinite(m as number) ? Number(m) : null;
 };
 
-/** ===== derived ===== */
+/* ===== derived ===== */
 const compareRuns = computed<RunDetailType[]>(
   () =>
     selectedRunIdsProxy.value
@@ -109,7 +109,25 @@ const activeMetricKeys = computed<string[]>(() =>
     : commonMetricKeys.value,
 );
 
-/** ===== chart ===== */
+/* ===== responsive widths for horizontal scroll =====
+   - 그래프: 막대 개수에 비례해 내부 너비를 크게 잡아 가로 스크롤 허용
+   - 테이블: (메트릭 수 + Run 컬럼 1개) * 160px 정도로 최소 너비 설정
+*/
+const chartInnerWidth = computed(() => {
+  // byMetric: X축 = metric 개수, byRun: X축 = run 개수
+  const xCount =
+    props.compareChartMode === "byMetric"
+      ? activeMetricKeys.value.length
+      : compareRuns.value.length;
+  // 막대 간격 여유를 위해 140px씩, 최소 900px 확보
+  return Math.max(900, xCount * 140 + 240);
+});
+const tableInnerWidth = computed(() => {
+  const cols = 1 + activeMetricKeys.value.length; // Run 컬럼 + metric 수
+  return Math.max(900, cols * 160);
+});
+
+/* ===== chart ===== */
 const commonLayout: Partial<any> = {
   autosize: true,
   margin: { t: 28, r: 12, b: 56, l: 56 },
@@ -181,6 +199,7 @@ function drawCompareChart() {
       ? createTracesByMetric(metricKeys, runsData)
       : createTracesByRun(metricKeys, runsData);
 
+  // byMetric 모드에서 분산 큰 순으로 정렬(가독성)
   if (props.compareChartMode === "byMetric") {
     const varianceOrder = metricKeys
       .map((k, idx) => {
@@ -216,7 +235,7 @@ function drawCompareChart() {
   );
 }
 
-/** ===== load & watch ===== */
+/* ===== load & watch ===== */
 async function loadCompareData() {
   if (!dialogOpen.value) return;
   loading.value = true;
@@ -250,9 +269,9 @@ onBeforeUnmount(() => window.removeEventListener("resize", onResize));
 </script>
 
 <template>
-  <v-dialog v-model="dialogOpen" max-width="1000">
+  <!-- 가로도 넉넉히, 세로는 90vh 제한 -->
+  <v-dialog v-model="dialogOpen" max-width="80vw">
     <v-card class="rounded-lg overflow-hidden">
-      <!-- 헤더: Deploy Model 스타일 적용 -->
       <v-card-title
         class="text-white font-weight-bold text-h6"
         style="background-color: #1976d2"
@@ -260,128 +279,154 @@ onBeforeUnmount(() => window.removeEventListener("resize", onResize));
         Compare Runs
       </v-card-title>
 
-      <!-- 상단: 선택 섹션 -->
-      <v-card-text class="pa-6">
-        <v-row dense class="mb-2">
-          <v-col cols="12">
-            <v-subheader class="font-weight-medium mb-2"
-              >Select Runs</v-subheader
-            >
-            <v-autocomplete
-              v-model="selectedRunIdsProxy"
-              :items="items"
-              item-title="label"
-              item-value="value"
-              chips
-              multiple
-              closable-chips
-              variant="outlined"
-              density="comfortable"
-              hide-details
-              :disabled="loading"
-              placeholder="Select runs to compare"
-            />
-          </v-col>
-        </v-row>
+      <!-- 본문 전체에 세로 스크롤 -->
+      <div class="scroll-y">
+        <!-- 상단 선택 섹션 -->
+        <v-card-text class="pa-6">
+          <v-row dense class="mb-2">
+            <v-col cols="12">
+              <v-subheader class="font-weight-medium mb-2"
+                >Select Runs</v-subheader
+              >
+              <v-autocomplete
+                v-model="selectedRunIdsProxy"
+                :items="items"
+                item-title="label"
+                item-value="value"
+                chips
+                multiple
+                closable-chips
+                variant="outlined"
+                density="comfortable"
+                hide-details
+                :disabled="loading"
+                placeholder="Select runs to compare"
+              />
+            </v-col>
+          </v-row>
 
-        <v-expand-transition>
-          <v-alert
-            v-if="!loading && selectedRunIdsProxy.length < 2"
-            type="info"
-            variant="tonal"
-            density="compact"
-            class="mt-2"
-          >
-            2개 이상의 Run을 선택해 주세요.
-          </v-alert>
-        </v-expand-transition>
+          <v-expand-transition>
+            <v-alert
+              v-if="!loading && selectedRunIdsProxy.length < 2"
+              type="info"
+              variant="tonal"
+              density="compact"
+              class="mt-2"
+            >
+              2개 이상의 Run을 선택해 주세요.
+            </v-alert>
+          </v-expand-transition>
 
-        <v-row dense class="mt-4">
-          <v-col cols="12">
-            <v-subheader class="font-weight-medium mb-2">Metrics</v-subheader>
-            <v-autocomplete
-              v-model="selectedMetricKeysProxy"
-              :items="activeMetricKeys.length ? activeMetricKeys : []"
-              :menu-props="{ maxHeight: 360 }"
-              chips
-              multiple
-              closable-chips
-              variant="outlined"
-              density="comfortable"
-              hide-details
-              :disabled="loading || compareRuns.length === 0"
-              placeholder="Select metrics (empty = all common)"
-            />
-            <div class="d-flex align-center mt-2 ga-2">
-              <v-chip size="small" color="primary" variant="tonal">
-                Mode:
-                {{
-                  props.compareChartMode === "byMetric" ? "By Metric" : "By Run"
-                }}
-              </v-chip>
-              <v-chip size="small" color="secondary" variant="tonal">
-                {{ props.normalizeValues ? "Normalized" : "Raw values" }}
-              </v-chip>
-              <v-chip
-                v-if="props.baselineRunId"
-                size="small"
-                color="info"
-                variant="tonal"
-              >
-                Baseline: {{ props.baselineRunId }}
-              </v-chip>
-            </div>
-          </v-col>
-        </v-row>
-      </v-card-text>
+          <v-row dense class="mt-4">
+            <v-col cols="12">
+              <v-subheader class="font-weight-medium mb-2">Metrics</v-subheader>
+              <v-autocomplete
+                v-model="selectedMetricKeysProxy"
+                :items="activeMetricKeys.length ? activeMetricKeys : []"
+                :menu-props="{ maxHeight: 360 }"
+                chips
+                multiple
+                closable-chips
+                variant="outlined"
+                density="comfortable"
+                hide-details
+                :disabled="loading || compareRuns.length === 0"
+                placeholder="Select metrics (empty = all common)"
+              />
+              <div class="d-flex align-center mt-2 ga-2">
+                <v-chip size="small" color="primary" variant="tonal">
+                  Mode:
+                  {{
+                    props.compareChartMode === "byMetric"
+                      ? "By Metric"
+                      : "By Run"
+                  }}
+                </v-chip>
+                <v-chip size="small" color="secondary" variant="tonal">
+                  {{ props.normalizeValues ? "Normalized" : "Raw values" }}
+                </v-chip>
+                <v-chip
+                  v-if="props.baselineRunId"
+                  size="small"
+                  color="info"
+                  variant="tonal"
+                >
+                  Baseline: {{ props.baselineRunId }}
+                </v-chip>
+              </div>
+            </v-col>
+          </v-row>
+        </v-card-text>
 
-      <!-- 차트 & 테이블 섹션 (톤 카드로 감싸기) -->
-      <v-card-text class="pt-0 px-6 pb-2">
-        <v-card variant="tonal" class="mb-4">
-          <v-card-title class="py-2 px-4">Metrics (grouped bar)</v-card-title>
-          <v-divider />
-          <v-card-text class="px-4">
-            <div v-if="loading" class="my-2">
-              <v-progress-linear indeterminate />
-            </div>
-            <div ref="elCompare" style="width: 100%; height: 420px"></div>
-          </v-card-text>
-        </v-card>
+        <!-- 차트 (가로 스크롤) -->
+        <v-card-text class="pt-0 px-6 pb-2">
+          <v-card variant="tonal" class="mb-4">
+            <v-card-title class="py-2 px-4">Metrics (grouped bar)</v-card-title>
+            <v-divider />
+            <v-card-text class="px-4">
+              <div v-if="loading" class="my-2">
+                <v-progress-linear indeterminate />
+              </div>
+              <div class="scroll-x">
+                <div
+                  ref="elCompare"
+                  :style="{ width: chartInnerWidth + 'px', height: '420px' }"
+                />
+              </div>
+            </v-card-text>
+          </v-card>
 
-        <v-card variant="tonal">
-          <v-card-title class="py-2 px-4">Comparison Table</v-card-title>
-          <v-divider />
-          <v-card-text class="px-0">
-            <v-table density="comfortable">
-              <thead>
-                <tr>
-                  <th style="width: 28%">Run</th>
-                  <th v-for="k in activeMetricKeys" :key="k">{{ k }}</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr v-for="r in compareRuns" :key="r.info.run_id">
-                  <td class="text-no-wrap">
-                    {{ r.info.run_name || r.info.run_id }}
-                  </td>
-                  <td v-for="k in activeMetricKeys" :key="k">
-                    {{ r.data.metrics.find((m) => m.key === k)?.value ?? "—" }}
-                  </td>
-                </tr>
-              </tbody>
-            </v-table>
-          </v-card-text>
-        </v-card>
-      </v-card-text>
+          <!-- 테이블 (가로 스크롤) -->
+          <v-card variant="tonal">
+            <v-card-title class="py-2 px-4">Comparison Table</v-card-title>
+            <v-divider />
+            <v-card-text class="px-0">
+              <div class="scroll-x">
+                <div :style="{ minWidth: tableInnerWidth + 'px' }">
+                  <v-table density="comfortable">
+                    <thead>
+                      <tr>
+                        <th style="width: 28%">Run</th>
+                        <th v-for="k in activeMetricKeys" :key="k">{{ k }}</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      <tr v-for="r in compareRuns" :key="r.info.run_id">
+                        <td class="text-no-wrap">
+                          {{ r.info.run_name || r.info.run_id }}
+                        </td>
+                        <td v-for="k in activeMetricKeys" :key="k">
+                          {{
+                            r.data.metrics.find((m) => m.key === k)?.value ??
+                            "—"
+                          }}
+                        </td>
+                      </tr>
+                    </tbody>
+                  </v-table>
+                </div>
+              </div>
+            </v-card-text>
+          </v-card>
+        </v-card-text>
+      </div>
 
       <!-- 액션 -->
       <v-card-actions class="justify-end">
-        <v-btn variant="text" class="text-white" @click="dialogOpen = false">
-          CLOSE
-        </v-btn>
+        <v-btn variant="text" class="text-white" @click="dialogOpen = false"
+          >CLOSE</v-btn
+        >
       </v-card-actions>
     </v-card>
   </v-dialog>
 </template>
 
-<style scoped></style>
+<style scoped>
+.scroll-y {
+  max-height: 90vh; /* 다이얼로그 본문 세로 스크롤 */
+  overflow-y: auto;
+}
+.scroll-x {
+  overflow-x: auto; /* 가로 스크롤 */
+}
+</style>