trigo-web/app/src/views/MCTSAnalysisView.vue

<template>
	<div class="mcts-analysis-container">
		<h1>MCTS Analysis</h1>

		<div class="mcts-grid">
			<!-- Left sidebar: Control Panel -->
			<div class="control-panel">
				<h2>Controls</h2>

				<!-- Data Loader Section -->
				<section class="panel-section">
					<h3>Data Source</h3>
					<p class="info-text">
						Upload a TGN game file and its corresponding visit counts JSON to analyze MCTS
						behavior. Only 2D boards are supported.
					</p>
					<MCTSDataLoader />
				</section>

				<!-- Move Navigation Section -->
				<section class="panel-section">
					<h3>Navigation</h3>
					<MCTSMoveNavigation v-if="hasData" />
					<div v-else class="nav-placeholder">
						<p>Load data to enable navigation</p>
					</div>
				</section>

				<!-- Visualization Settings Section -->
				<section class="panel-section">
					<h3>Statistics</h3>
					<MCTSStatisticsPanel />
				</section>
			</div>

			<!-- Right content area -->
			<div class="content-area">
				<!-- Tree Visualization -->
				<div class="visualization-panel tree-panel">
					<h3>Search Tree</h3>
					<MCTSTreeVisualization />
				</div>

				<!-- Board Heatmap -->
				<div class="visualization-panel heatmap-panel">
					<h3>Board Heatmap</h3>
					<MCTSBoardHeatmap />
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from "vue";
import { useMCTSStore } from "@/stores/mctsStore";
import MCTSDataLoader from "@/components/mcts/MCTSDataLoader.vue";
import MCTSMoveNavigation from "@/components/mcts/MCTSMoveNavigation.vue";
import MCTSStatisticsPanel from "@/components/mcts/MCTSStatisticsPanel.vue";
import MCTSBoardHeatmap from "@/components/mcts/MCTSBoardHeatmap.vue";
import MCTSTreeVisualization from "@/components/mcts/MCTSTreeVisualization.vue";

const mctsStore = useMCTSStore();

const hasData = computed(() => mctsStore.hasData);

onMounted(() => {
	console.log("[MCTS Analysis] View mounted");
});
</script>

<style scoped lang="scss">
@use "@/styles/test-pages.scss" as *;

.mcts-analysis-container {
	@include test-page-container('dark');
	padding: 20px;

	h1 {
		margin: 0 0 20px 0;
		font-size: 28px;
		color: #e94560;
	}
}

.mcts-grid {
	display: grid;
	grid-template-columns: 320px 1fr;
	gap: 20px;
	min-height: calc(100vh - 80px);
}

/* ============================================================================
   Control Panel (Left Sidebar)
   ============================================================================ */

.control-panel {
	@include control-panel('dark');
}

.panel-section {
	@extend .panel-section;
}

.info-text {
	@extend .info-text;
	color: #a0a0a0;
}

.nav-placeholder {
	padding: 15px;
	background-color: #1a1a1a;
	border-radius: 4px;
	border: 1px dashed #404040;
	text-align: center;
	color: #606060;
	font-size: 12px;
}

/* ============================================================================
   Content Area (Right Side)
   ============================================================================ */

.content-area {
	display: grid;
	grid-template-rows: auto 1fr;
	gap: 20px;
	overflow: hidden;
}

.visualization-panel {
	@include test-section('dark');
	display: flex;
	flex-direction: column;
	min-height: 0;
	padding: 20px;

	h3 {
		margin: 0 0 15px 0;
		font-size: 18px;
		color: #4a90e2;
		flex-shrink: 0;
	}
}

.tree-panel {
	overflow: visible;
}

/* ============================================================================
   Responsive
   ============================================================================ */

@media (max-width: 1200px) {
	.mcts-grid {
		grid-template-columns: 280px 1fr;
	}
}

@media (max-width: 900px) {
	.mcts-grid {
		grid-template-columns: 1fr;
		grid-template-rows: auto 1fr;
		min-height: auto;
	}

	.control-panel {
		max-height: 400px;
	}

	.content-area {
		min-height: 800px;
		max-height: none;
	}
}
</style>