Skip to content

Commit 20549b7

Browse files
TataKKKLTataKKKL
committed
refactor live browser view, and add placeholder for lats and mcts
1 parent cb8cced commit 20549b7

File tree

5 files changed

+79
-31
lines changed

5 files changed

+79
-31
lines changed

‎visual-tree-search-app/components/LiveBrowserView.tsx‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import React from 'react';
2+
3+
interface LiveBrowserViewProps {
4+
liveBrowserUrl: string | null;
5+
splitPosition: number;
6+
}
7+
8+
const LiveBrowserView: React.FC<LiveBrowserViewProps> = ({ liveBrowserUrl, splitPosition }) => {
9+
return (
10+
<div
11+
className="absolute top-0 bottom-0 left-0 overflow-hidden bg-white dark:bg-slate-800 rounded-l-lg"
12+
style={{ width: `${splitPosition}%` }}
13+
>
14+
<div className="p-3 border-b border-slate-200 dark:border-slate-700 bg-gradient-to-r from-sky-50 to-white dark:from-slate-900 dark:to-slate-800">
15+
<h2 className="text-lg font-semibold text-sky-950 dark:text-sky-100 flex items-center">
16+
<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-2 text-cyan-500" viewBox="0 0 20 20" fill="currentColor">
17+
<path fillRule="evenodd" d="M4.083 9h1.946c.089-1.546.383-2.97.837-4.118A6.004 6.004 0 004.083 9zM10 2a8 8 0 100 16 8 8 0 000-16zm0 2c-.076 0-.232.032-.465.262-.238.234-.497.623-.737 1.182-.389.907-.673 2.142-.766 3.556h3.936c-.093-1.414-.377-2.649-.766-3.556-.24-.56-.5-.948-.737-1.182C10.232 4.032 10.076 4 10 4zm3.971 5c-.089-1.546-.383-2.97-.837-4.118A6.004 6.004 0 0115.917 9h-1.946zm-2.003 2H8.032c.093 1.414.377 2.649.766 3.556.24.56.5.948.737 1.182.233.23.389.262.465.262.076 0 .232-.032.465-.262.238-.234.498-.623.737-1.182.389-.907.673-2.142.766-3.556zm1.166 4.118c.454-1.147.748-2.572.837-4.118h1.946a6.004 6.004 0 01-2.783 4.118zm-6.268 0C6.412 13.97 6.118 12.546 6.03 11H4.083a6.004 6.004 0 002.783 4.118z" clipRule="evenodd" />
18+
</svg>
19+
Live Browser View
20+
</h2>
21+
</div>
22+
<div className="h-[calc(100%-48px)] w-full overflow-auto">
23+
{liveBrowserUrl ? (
24+
<iframe
25+
src={liveBrowserUrl}
26+
className="w-full h-full"
27+
title="Live Browser View"
28+
/>
29+
) : (
30+
<div className="h-full w-full flex items-center justify-center bg-gradient-to-r from-sky-50 to-white dark:from-slate-900 dark:to-slate-800 text-slate-500 dark:text-slate-400">
31+
<p>Browser view will appear here when search starts</p>
32+
</div>
33+
)}
34+
</div>
35+
</div>
36+
);
37+
};
38+
39+
export default LiveBrowserView;

‎visual-tree-search-app/components/Sidebar.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,13 +16,13 @@ const Sidebar = () => {
1616
icon: Home
1717
},
1818
{
19-
name: 'Playground',
20-
href: '/playground',
19+
name: 'MCTS',
20+
href: '/MCTSAgent',
2121
icon: LayoutDashboard
2222
},
2323
{
24-
name: 'D3 Playground',
25-
href: '/d3-playground',
24+
name: 'LATS',
25+
href: '/LATSAgent',
2626
icon: Network
2727
},
2828
{

‎visual-tree-search-app/pages/LATSAgent.tsx‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
const LATSAgent = () => {
2+
return (
3+
<div className="min-h-screen bg-gradient-to-br from-white to-gray-100 dark:from-gray-900 dark:to-black p-6">
4+
<div className="max-w-7xl mx-auto">
5+
<div className="mt-16 text-center">
6+
<h3 className="text-xl md:text-2xl font-bold text-gray-800 dark:text-white mb-4">
7+
Hello World
8+
</h3>
9+
</div>
10+
</div>
11+
</div>
12+
);
13+
};
14+
15+
export default LATSAgent;

‎visual-tree-search-app/pages/MCTSAgent.tsx‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
const MCTSAgent = () => {
2+
return (
3+
<div className="min-h-screen bg-gradient-to-br from-white to-gray-100 dark:from-gray-900 dark:to-black p-6">
4+
<div className="max-w-7xl mx-auto">
5+
<div className="mt-16 text-center">
6+
<h3 className="text-xl md:text-2xl font-bold text-gray-800 dark:text-white mb-4">
7+
Hello World
8+
</h3>
9+
</div>
10+
</div>
11+
</div>
12+
);
13+
};
14+
15+
export default MCTSAgent;

‎visual-tree-search-app/pages/SimpleSearchAgent.tsx‎

Lines changed: 6 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { useEffect, useRef, useState } from 'react';
33
import TreeReconstructor from "../components/TreeReconstructor_d3";
44
import ControlPanel from '../components/ControlPanel';
55
import MessageLogPanel from '../components/MessageLogPanel';
6+
import LiveBrowserView from '../components/LiveBrowserView';
67

78
// Define types for our messages
89
interface Message {
@@ -389,33 +390,11 @@ const TreeSearchPlayground = () => {
389390
{/* Main content area - Resizable Split View */}
390391
<div className="flex-1 px-4 mt-4 overflow-hidden">
391392
<div ref={splitPaneRef} className="relative h-[calc(100vh-270px)] rounded-lg overflow-hidden shadow-lg">
392-
{/* Browser View Container - Absolute positioned with percentage width */}
393-
<div
394-
className="absolute top-0 bottom-0 left-0 overflow-hidden bg-white dark:bg-slate-800 rounded-l-lg"
395-
style={{ width: `${splitPosition}%` }}
396-
>
397-
<div className="p-3 border-b border-slate-200 dark:border-slate-700 bg-gradient-to-r from-sky-50 to-white dark:from-slate-900 dark:to-slate-800">
398-
<h2 className="text-lg font-semibold text-sky-950 dark:text-sky-100 flex items-center">
399-
<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-2 text-cyan-500" viewBox="0 0 20 20" fill="currentColor">
400-
<path fillRule="evenodd" d="M4.083 9h1.946c.089-1.546.383-2.97.837-4.118A6.004 6.004 0 004.083 9zM10 2a8 8 0 100 16 8 8 0 000-16zm0 2c-.076 0-.232.032-.465.262-.238.234-.497.623-.737 1.182-.389.907-.673 2.142-.766 3.556h3.936c-.093-1.414-.377-2.649-.766-3.556-.24-.56-.5-.948-.737-1.182C10.232 4.032 10.076 4 10 4zm3.971 5c-.089-1.546-.383-2.97-.837-4.118A6.004 6.004 0 0115.917 9h-1.946zm-2.003 2H8.032c.093 1.414.377 2.649.766 3.556.24.56.5.948.737 1.182.233.23.389.262.465.262.076 0 .232-.032.465-.262.238-.234.498-.623.737-1.182.389-.907.673-2.142.766-3.556zm1.166 4.118c.454-1.147.748-2.572.837-4.118h1.946a6.004 6.004 0 01-2.783 4.118zm-6.268 0C6.412 13.97 6.118 12.546 6.03 11H4.083a6.004 6.004 0 002.783 4.118z" clipRule="evenodd" />
401-
</svg>
402-
Live Browser View
403-
</h2>
404-
</div>
405-
<div className="h-[calc(100%-48px)] w-full overflow-auto">
406-
{liveBrowserUrl ? (
407-
<iframe
408-
src={liveBrowserUrl}
409-
className="w-full h-full"
410-
title="Live Browser View"
411-
/>
412-
) : (
413-
<div className="h-full w-full flex items-center justify-center bg-gradient-to-r from-sky-50 to-white dark:from-slate-900 dark:to-slate-800 text-slate-500 dark:text-slate-400">
414-
<p>Browser view will appear here when search starts</p>
415-
</div>
416-
)}
417-
</div>
418-
</div>
393+
{/* Browser View Container */}
394+
<LiveBrowserView
395+
liveBrowserUrl={liveBrowserUrl}
396+
splitPosition={splitPosition}
397+
/>
419398

420399
{/* Resizable handle - Absolute positioned */}
421400
<div

0 commit comments

Comments
 (0)