feat: add modelling layer
This commit is contained in:
qixinbo
@@ -10,6 +10,7 @@ import { Projects } from "./pages/Projects";
|
||||
import { Login } from "./pages/Login";
|
||||
import { ModelConfigs } from "./pages/ModelConfigs";
|
||||
import { DataSources } from "./pages/DataSources";
|
||||
import { Modeling } from "./pages/Modeling";
|
||||
import { useAuthStore } from "./store/authStore";
|
||||
|
||||
// Protected Route Component
|
||||
@@ -115,6 +116,14 @@ function App() {
|
||||
</MainLayout>
|
||||
</ProtectedRoute>
|
||||
} />
|
||||
|
||||
<Route path="/modeling/:id" element={
|
||||
<ProtectedRoute requireAdmin={true}>
|
||||
<MainLayout>
|
||||
<Modeling />
|
||||
</MainLayout>
|
||||
</ProtectedRoute>
|
||||
} />
|
||||
</Routes>
|
||||
</BrowserRouter>
|
||||
);
|
||||
|
||||
@@ -2,7 +2,7 @@ import { useState, useRef, useEffect } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { ScrollArea } from "@/components/ui/scroll-area";
|
||||
import { User, Loader2, Sparkles, ArrowUp, ChevronDown, Paperclip, Check, X, File as FileIcon, Square, Plus, Database, Wand2, Search, Zap, LayoutGrid, CheckCircle2, Table, XCircle } from "lucide-react";
|
||||
import { User, Loader2, Sparkles, ArrowUp, ChevronDown, Paperclip, Check, X, Square, Plus, Database, Wand2, Search, Zap, LayoutGrid, CheckCircle2, Table, XCircle } from "lucide-react";
|
||||
import { api } from "@/lib/api";
|
||||
import { type ChartSpec } from "@/store/visualizationStore";
|
||||
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
|
||||
@@ -70,7 +70,7 @@ interface SessionData {
|
||||
export function ChatInterface() {
|
||||
const [messages, setMessages] = useState<Message[]>([]);
|
||||
const [input, setInput] = useState("");
|
||||
const [selectedDataSource, setSelectedDataSource] = useState<string>("postgres-main");
|
||||
const [selectedDataSource, setSelectedDataSource] = useState<string>("");
|
||||
const [availableSkills, setAvailableSkills] = useState<Skill[]>([]);
|
||||
const [selectedSkillIds, setSelectedSkillIds] = useState<string[]>([]);
|
||||
const [isMenuOpen, setIsMenuOpen] = useState(false);
|
||||
@@ -104,6 +104,7 @@ export function ChatInterface() {
|
||||
|
||||
useEffect(() => {
|
||||
if (currentProject) {
|
||||
setSelectedDataSource("");
|
||||
fetchDataSources();
|
||||
}
|
||||
}, [currentProject]);
|
||||
@@ -114,14 +115,8 @@ export function ChatInterface() {
|
||||
const data = await api.get<Array<{id: number, name: string}>>(`/api/v1/datasources?project_id=${currentProject.id}`);
|
||||
const projectSources = data.map(d => ({ id: `ds:${d.id}`, name: d.name }));
|
||||
setAvailableDataSources(projectSources);
|
||||
|
||||
// Default select the first one if current selection is not in the list
|
||||
if (projectSources.length > 0) {
|
||||
if (!selectedDataSource.startsWith("ds:") || !projectSources.find(ds => ds.id === selectedDataSource)) {
|
||||
setSelectedDataSource(projectSources[0].id);
|
||||
}
|
||||
} else {
|
||||
setSelectedDataSource("upload"); // Default to upload if no data sources
|
||||
if (selectedDataSource && !projectSources.find(ds => ds.id === selectedDataSource)) {
|
||||
setSelectedDataSource("");
|
||||
}
|
||||
} catch (e) {
|
||||
console.error("Failed to fetch data sources", e);
|
||||
@@ -141,6 +136,8 @@ export function ChatInterface() {
|
||||
useEffect(() => {
|
||||
const fetchSessionData = async () => {
|
||||
setIsLoading(true);
|
||||
setSelectedDataSource("");
|
||||
setSelectedSkillIds([]);
|
||||
try {
|
||||
const data = await api.get<SessionData>(`/nanobot/sessions/${activeSessionKey}`);
|
||||
if (data.messages && data.messages.length > 0) {
|
||||
@@ -157,11 +154,6 @@ export function ChatInterface() {
|
||||
const restoredFile = data.metadata?.active_data_file || null;
|
||||
setActiveDataFile(restoredFile);
|
||||
setAttachedFile(null);
|
||||
if (restoredFile) {
|
||||
setSelectedDataSource("upload-main");
|
||||
} else if (selectedDataSource.startsWith("upload")) {
|
||||
setSelectedDataSource("postgres-main");
|
||||
}
|
||||
} catch (e) {
|
||||
console.error("Failed to fetch session messages", e);
|
||||
setMessages([]);
|
||||
@@ -245,7 +237,7 @@ export function ChatInterface() {
|
||||
};
|
||||
setAttachedFile(uploadedFile);
|
||||
setActiveDataFile(uploadedFile);
|
||||
setSelectedDataSource("upload-main");
|
||||
setSelectedDataSource("");
|
||||
await syncSessionFileContext(uploadedFile);
|
||||
} catch (error) {
|
||||
console.error("File upload error:", error);
|
||||
@@ -261,12 +253,37 @@ export function ChatInterface() {
|
||||
const handleRemoveFile = async () => {
|
||||
setAttachedFile(null);
|
||||
setActiveDataFile(null);
|
||||
if (selectedDataSource.startsWith("upload")) {
|
||||
setSelectedDataSource("postgres-main");
|
||||
}
|
||||
await syncSessionFileContext(null);
|
||||
};
|
||||
|
||||
const selectedDataSourceName = availableDataSources.find(ds => ds.id === selectedDataSource)?.name || "";
|
||||
const selectedSkills = availableSkills.filter(skill => selectedSkillIds.includes(skill.id));
|
||||
|
||||
const renderActiveSelections = () => {
|
||||
if (!selectedDataSource && selectedSkills.length === 0) return null;
|
||||
return (
|
||||
<div className="px-2 pt-2">
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{selectedDataSource ? (
|
||||
<div className="px-3 py-1.5 rounded-full text-xs border flex items-center gap-1.5 bg-blue-50 text-blue-700 border-blue-200">
|
||||
<Database className="h-3.5 w-3.5" />
|
||||
{`数据源：${selectedDataSourceName}`}
|
||||
</div>
|
||||
) : null}
|
||||
{selectedSkills.map((skill) => (
|
||||
<div
|
||||
key={skill.id}
|
||||
className="px-3 py-1.5 rounded-full text-xs border flex items-center gap-1.5 bg-orange-50 text-orange-700 border-orange-200"
|
||||
>
|
||||
<Wand2 className="h-3.5 w-3.5" />
|
||||
{`Skill：${skill.name}`}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const renderFileCard = () => {
|
||||
const file = attachedFile || activeDataFile;
|
||||
if (!file) return null;
|
||||
@@ -328,7 +345,7 @@ export function ChatInterface() {
|
||||
};
|
||||
|
||||
const handleSend = async () => {
|
||||
if (!input.trim() || isLoading) return;
|
||||
if (!input.trim() || isLoading || !selectedDataSource) return;
|
||||
|
||||
const newMessage: Message = { id: Date.now().toString(), role: 'user', content: input };
|
||||
setMessages(prev => [...prev, newMessage]);
|
||||
@@ -357,16 +374,9 @@ export function ChatInterface() {
|
||||
const token = localStorage.getItem("token");
|
||||
const effectiveModelId = selectedModelId || currentModel?.id || "";
|
||||
|
||||
// Correctly parse source from selectedDataSource (could be 'ds:ID', 'upload', or legacy 'postgres-main')
|
||||
let source = selectedDataSource;
|
||||
if (selectedDataSource.includes("-")) {
|
||||
source = selectedDataSource.split("-")[0];
|
||||
}
|
||||
let source = selectedDataSource;
|
||||
|
||||
const useUploadSource = Boolean(
|
||||
currentAttachedFile?.url?.startsWith("local://") ||
|
||||
(source === "upload" && activeDataFile?.url?.startsWith("local://"))
|
||||
);
|
||||
const useUploadSource = Boolean(currentAttachedFile?.url?.startsWith("local://"));
|
||||
if (useUploadSource) {
|
||||
source = "upload";
|
||||
}
|
||||
@@ -580,6 +590,7 @@ export function ChatInterface() {
|
||||
<div className="relative group">
|
||||
<div className="flex flex-col bg-white rounded-[26px] border border-zinc-200 shadow-[0_2px_12px_rgba(0,0,0,0.04)] transition-all duration-200">
|
||||
{renderFileCard()}
|
||||
{renderActiveSelections()}
|
||||
<div className="flex items-center pl-2 pr-2 py-2">
|
||||
<div className="flex items-center">
|
||||
<Popover open={isMenuOpen} onOpenChange={setIsMenuOpen}>
|
||||
@@ -615,26 +626,16 @@ export function ChatInterface() {
|
||||
{selectedDataSource === ds.id && <CheckCircle2 className="h-4 w-4 text-blue-500" />}
|
||||
</button>
|
||||
))}
|
||||
|
||||
<button
|
||||
onClick={() => {
|
||||
setSelectedDataSource('upload');
|
||||
fileInputRef.current?.click();
|
||||
setIsMenuOpen(false);
|
||||
}}
|
||||
className={cn(
|
||||
"w-full flex items-center justify-between px-3 py-2.5 rounded-xl text-sm transition-all duration-200",
|
||||
selectedDataSource === 'upload' || selectedDataSource === 'upload-main'
|
||||
? "bg-white text-zinc-900 shadow-sm ring-1 ring-zinc-200"
|
||||
: "text-zinc-600 hover:bg-white hover:shadow-sm"
|
||||
)}
|
||||
>
|
||||
<div className="flex items-center gap-2.5">
|
||||
<FileIcon className={cn("h-4 w-4", (selectedDataSource === 'upload' || selectedDataSource === 'upload-main') ? "text-blue-500" : "text-zinc-400")} />
|
||||
<span className="font-medium">本地文件上传</span>
|
||||
{selectedDataSource && (
|
||||
<div className="mt-2 pt-2 border-t border-zinc-100">
|
||||
<button
|
||||
onClick={() => setSelectedDataSource("")}
|
||||
className="w-full py-1.5 text-[11px] text-zinc-400 hover:text-zinc-600 transition-colors flex items-center justify-center gap-1"
|
||||
>
|
||||
清除已选
|
||||
</button>
|
||||
</div>
|
||||
{(selectedDataSource === 'upload' || selectedDataSource === 'upload-main') && <CheckCircle2 className="h-4 w-4 text-blue-500" />}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -652,26 +653,21 @@ export function ChatInterface() {
|
||||
<button
|
||||
key={skill.id}
|
||||
onClick={() => {
|
||||
setSelectedSkillIds(prev =>
|
||||
isSelected
|
||||
? prev.filter(id => id !== skill.id)
|
||||
setSelectedSkillIds((prev) =>
|
||||
isSelected
|
||||
? prev.filter((id) => id !== skill.id)
|
||||
: [...prev, skill.id]
|
||||
);
|
||||
}}
|
||||
className={cn(
|
||||
"w-full flex items-center justify-between px-3 py-2.5 rounded-xl text-sm transition-all duration-200 group/item",
|
||||
"w-full flex items-center justify-between px-3 py-2.5 rounded-xl text-sm transition-all duration-200",
|
||||
isSelected
|
||||
? "bg-zinc-50 text-zinc-900 ring-1 ring-zinc-100"
|
||||
: "text-zinc-600 hover:bg-zinc-50"
|
||||
? "bg-white text-zinc-900 shadow-sm ring-1 ring-zinc-200"
|
||||
: "text-zinc-600 hover:bg-white hover:shadow-sm"
|
||||
)}
|
||||
>
|
||||
<div className="flex flex-col items-start gap-0.5">
|
||||
<div className="flex items-center text-left">
|
||||
<span className="font-medium">{skill.name}</span>
|
||||
{skill.description && (
|
||||
<span className="text-[11px] text-zinc-400 line-clamp-1 group-hover/item:text-zinc-500">
|
||||
{skill.description}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{isSelected && <CheckCircle2 className="h-4 w-4 text-blue-500" />}
|
||||
</button>
|
||||
@@ -713,7 +709,7 @@ export function ChatInterface() {
|
||||
<div className="flex items-center gap-1">
|
||||
<button
|
||||
onClick={handleSend}
|
||||
disabled={isLoading || (!input.trim() && !attachedFile && !activeDataFile)}
|
||||
disabled={isLoading || !selectedDataSource || !input.trim()}
|
||||
className={cn(
|
||||
"flex items-center justify-center h-10 w-10 rounded-full transition-all duration-200",
|
||||
(input.trim() || attachedFile || activeDataFile) && !isLoading
|
||||
@@ -798,6 +794,7 @@ export function ChatInterface() {
|
||||
<div className="relative group max-w-4xl mx-auto">
|
||||
<div className="flex flex-col bg-white rounded-[26px] border border-zinc-200 shadow-[0_2px_12px_rgba(0,0,0,0.04)] transition-all duration-200">
|
||||
{renderFileCard()}
|
||||
{renderActiveSelections()}
|
||||
<div className="flex items-center pl-2 pr-2 py-2">
|
||||
<div className="flex items-center">
|
||||
<Popover open={isMenuOpen} onOpenChange={setIsMenuOpen}>
|
||||
@@ -833,26 +830,16 @@ export function ChatInterface() {
|
||||
{selectedDataSource === ds.id && <CheckCircle2 className="h-4 w-4 text-blue-500" />}
|
||||
</button>
|
||||
))}
|
||||
|
||||
<button
|
||||
onClick={() => {
|
||||
setSelectedDataSource('upload');
|
||||
fileInputRef.current?.click();
|
||||
setIsMenuOpen(false);
|
||||
}}
|
||||
className={cn(
|
||||
"w-full flex items-center justify-between px-3 py-2.5 rounded-xl text-sm transition-all duration-200",
|
||||
selectedDataSource === 'upload' || selectedDataSource === 'upload-main'
|
||||
? "bg-white text-zinc-900 shadow-sm ring-1 ring-zinc-200"
|
||||
: "text-zinc-600 hover:bg-white hover:shadow-sm"
|
||||
)}
|
||||
>
|
||||
<div className="flex items-center gap-2.5">
|
||||
<FileIcon className={cn("h-4 w-4", (selectedDataSource === 'upload' || selectedDataSource === 'upload-main') ? "text-blue-500" : "text-zinc-400")} />
|
||||
<span className="font-medium">本地文件上传</span>
|
||||
{selectedDataSource && (
|
||||
<div className="mt-2 pt-2 border-t border-zinc-100">
|
||||
<button
|
||||
onClick={() => setSelectedDataSource("")}
|
||||
className="w-full py-1.5 text-[11px] text-zinc-400 hover:text-zinc-600 transition-colors flex items-center justify-center gap-1"
|
||||
>
|
||||
清除已选
|
||||
</button>
|
||||
</div>
|
||||
{(selectedDataSource === 'upload' || selectedDataSource === 'upload-main') && <CheckCircle2 className="h-4 w-4 text-blue-500" />}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -870,26 +857,21 @@ export function ChatInterface() {
|
||||
<button
|
||||
key={skill.id}
|
||||
onClick={() => {
|
||||
setSelectedSkillIds(prev =>
|
||||
isSelected
|
||||
? prev.filter(id => id !== skill.id)
|
||||
setSelectedSkillIds((prev) =>
|
||||
isSelected
|
||||
? prev.filter((id) => id !== skill.id)
|
||||
: [...prev, skill.id]
|
||||
);
|
||||
}}
|
||||
className={cn(
|
||||
"w-full flex items-center justify-between px-3 py-2.5 rounded-xl text-sm transition-all duration-200 group/item",
|
||||
"w-full flex items-center justify-between px-3 py-2.5 rounded-xl text-sm transition-all duration-200",
|
||||
isSelected
|
||||
? "bg-zinc-50 text-zinc-900 ring-1 ring-zinc-100"
|
||||
: "text-zinc-600 hover:bg-zinc-50"
|
||||
? "bg-white text-zinc-900 shadow-sm ring-1 ring-zinc-200"
|
||||
: "text-zinc-600 hover:bg-white hover:shadow-sm"
|
||||
)}
|
||||
>
|
||||
<div className="flex flex-col items-start gap-0.5">
|
||||
<div className="flex items-center text-left">
|
||||
<span className="font-medium">{skill.name}</span>
|
||||
{skill.description && (
|
||||
<span className="text-[11px] text-zinc-400 line-clamp-1 group-hover/item:text-zinc-500">
|
||||
{skill.description}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{isSelected && <CheckCircle2 className="h-4 w-4 text-blue-500" />}
|
||||
</button>
|
||||
@@ -931,7 +913,7 @@ export function ChatInterface() {
|
||||
<div className="flex items-center gap-1">
|
||||
<button
|
||||
onClick={isLoading ? handleForceStop : handleSend}
|
||||
disabled={isLoading ? false : !input.trim()}
|
||||
disabled={isLoading ? false : !selectedDataSource || !input.trim()}
|
||||
className={cn(
|
||||
"flex items-center justify-center h-10 w-10 rounded-full transition-all duration-200",
|
||||
(input.trim() || isLoading)
|
||||
|
||||
@@ -2,7 +2,7 @@ import { useState, useEffect } from "react";
|
||||
import { api } from "@/lib/api";
|
||||
import { DataSourceForm, type DataSourceConfig } from "@/components/DataSourceForm";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Plus, Database, Pencil, Trash2, Loader2, FolderOpen, Info, ChevronLeft, FileText, Search } from "lucide-react";
|
||||
import { Plus, Database, Pencil, Trash2, Loader2, FolderOpen, Info, ChevronLeft, FileText, Search, Network } from "lucide-react";
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
|
||||
import { useAuthStore } from "@/store/authStore";
|
||||
import { useProjectStore } from "@/store/projectStore";
|
||||
@@ -216,9 +216,12 @@ export function DataSources() {
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<Button variant="ghost" size="icon" className="h-8 w-8 text-zinc-400 hover:text-zinc-600" onClick={() => handleEdit(ds)}>
|
||||
<Pencil className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button variant="ghost" size="icon" className="h-8 w-8 text-zinc-400 hover:text-blue-600" onClick={() => navigate(`/modeling/${ds.id}`)} title="Data Modeling">
|
||||
<Network className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button variant="ghost" size="icon" className="h-8 w-8 text-zinc-400 hover:text-zinc-600" onClick={() => handleEdit(ds)}>
|
||||
<Pencil className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button variant="ghost" size="icon" className="h-8 w-8 text-zinc-400 hover:text-red-600 hover:bg-red-50" onClick={() => handleDelete(ds.id!)}>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
|
||||
@@ -0,0 +1,514 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { useParams, useNavigate } from "react-router-dom";
|
||||
import { api } from "../lib/api";
|
||||
import { Button } from "../components/ui/button";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "../components/ui/card";
|
||||
import { Label } from "../components/ui/label";
|
||||
import { ScrollArea } from "../components/ui/scroll-area";
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "../components/ui/dialog";
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../components/ui/table";
|
||||
import { ArrowLeft, Table as TableIcon, Network } from "lucide-react";
|
||||
|
||||
interface RawSchema {
|
||||
[table: string]: { name: string; type: string }[];
|
||||
}
|
||||
|
||||
interface Column {
|
||||
name: string;
|
||||
type: string;
|
||||
isCalculated: boolean;
|
||||
relationship?: string;
|
||||
expression?: string;
|
||||
properties?: Record<string, unknown>;
|
||||
}
|
||||
|
||||
interface Model {
|
||||
name: string;
|
||||
columns: Column[];
|
||||
primaryKey?: string;
|
||||
properties?: Record<string, any>;
|
||||
}
|
||||
|
||||
interface Relationship {
|
||||
name: string;
|
||||
models: string[];
|
||||
joinType: string;
|
||||
condition: string;
|
||||
}
|
||||
|
||||
interface MDLManifest {
|
||||
catalog: string;
|
||||
schema: string;
|
||||
dataSource: string;
|
||||
models: Model[];
|
||||
relationships: Relationship[];
|
||||
}
|
||||
|
||||
interface ModelDetailResponse {
|
||||
model: {
|
||||
name: string;
|
||||
tableReference?: {
|
||||
table: string;
|
||||
schema?: string;
|
||||
catalog?: string;
|
||||
} | null;
|
||||
primaryKey?: string;
|
||||
properties?: Record<string, unknown>;
|
||||
columns: Column[];
|
||||
};
|
||||
relationships: {
|
||||
name: string;
|
||||
models: string[];
|
||||
joinType: string;
|
||||
condition: string;
|
||||
properties?: Record<string, unknown>;
|
||||
}[];
|
||||
preview_rows: Record<string, unknown>[];
|
||||
}
|
||||
|
||||
export function Modeling() {
|
||||
const { id } = useParams<{ id: string }>();
|
||||
const navigate = useNavigate();
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [schema, setSchema] = useState<RawSchema | null>(null);
|
||||
const [mdl, setMdl] = useState<MDLManifest | null>(null);
|
||||
const [selectedTables, setSelectedTables] = useState<string[]>([]);
|
||||
const [selectedColumns, setSelectedColumns] = useState<Record<string, string[]>>({});
|
||||
const [expandedTables, setExpandedTables] = useState<Record<string, boolean>>({});
|
||||
const [step, setStep] = useState<"select" | "view">("select");
|
||||
const [detailOpen, setDetailOpen] = useState(false);
|
||||
const [detailLoading, setDetailLoading] = useState(false);
|
||||
const [modelDetail, setModelDetail] = useState<ModelDetailResponse | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
fetchInitialData();
|
||||
}, [id]);
|
||||
|
||||
const initSelectionFromSchema = (schemaRes: RawSchema) => {
|
||||
const tableNames = Object.keys(schemaRes);
|
||||
const columnsMap: Record<string, string[]> = {};
|
||||
const expanded: Record<string, boolean> = {};
|
||||
for (const tableName of tableNames) {
|
||||
columnsMap[tableName] = schemaRes[tableName].map((c) => c.name);
|
||||
expanded[tableName] = true;
|
||||
}
|
||||
setSchema(schemaRes);
|
||||
setSelectedTables(tableNames);
|
||||
setSelectedColumns(columnsMap);
|
||||
setExpandedTables(expanded);
|
||||
};
|
||||
|
||||
const fetchSchemaOnly = async () => {
|
||||
const schemaRes = await api.get(`/api/v1/semantic/${id}/schema`) as RawSchema;
|
||||
initSelectionFromSchema(schemaRes);
|
||||
setStep("select");
|
||||
};
|
||||
|
||||
const fetchInitialData = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const mdlRes = await api.get(`/api/v1/semantic/${id}`) as any;
|
||||
if (mdlRes && mdlRes.models && mdlRes.models.length > 0) {
|
||||
setMdl(mdlRes as MDLManifest);
|
||||
setStep("view");
|
||||
} else {
|
||||
await fetchSchemaOnly();
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Failed to fetch modeling data:", error);
|
||||
try {
|
||||
await fetchSchemaOnly();
|
||||
} catch (e) {
|
||||
console.error("Failed to fetch schema:", e);
|
||||
}
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleGenerate = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const res = await api.post(`/api/v1/semantic/${id}/generate`, {
|
||||
selected_tables: selectedTables,
|
||||
selected_columns: Object.fromEntries(
|
||||
selectedTables.map((table) => [table, selectedColumns[table] ?? []])
|
||||
),
|
||||
}) as MDLManifest;
|
||||
setMdl(res);
|
||||
setStep("view");
|
||||
} catch (error) {
|
||||
console.error("Failed to generate MDL:", error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const toggleTable = (table: string) => {
|
||||
setSelectedTables((prev) =>
|
||||
prev.includes(table) ? prev.filter((t) => t !== table) : [...prev, table]
|
||||
);
|
||||
if (!schema) return;
|
||||
if (!selectedTables.includes(table) && (!selectedColumns[table] || selectedColumns[table].length === 0)) {
|
||||
setSelectedColumns((prev) => ({
|
||||
...prev,
|
||||
[table]: schema[table].map((c) => c.name),
|
||||
}));
|
||||
}
|
||||
};
|
||||
|
||||
const toggleColumn = (table: string, column: string) => {
|
||||
setSelectedColumns((prev) => {
|
||||
const current = prev[table] ?? [];
|
||||
const has = current.includes(column);
|
||||
const next = has ? current.filter((c) => c !== column) : [...current, column];
|
||||
return { ...prev, [table]: next };
|
||||
});
|
||||
setSelectedTables((prev) => {
|
||||
const exists = prev.includes(table);
|
||||
const current = selectedColumns[table] ?? [];
|
||||
const has = current.includes(column);
|
||||
const nextLen = has ? current.length - 1 : current.length + 1;
|
||||
if (nextLen <= 0) {
|
||||
return prev.filter((t) => t !== table);
|
||||
}
|
||||
if (!exists) {
|
||||
return [...prev, table];
|
||||
}
|
||||
return prev;
|
||||
});
|
||||
};
|
||||
|
||||
const toggleExpandTable = (table: string) => {
|
||||
setExpandedTables((prev) => ({ ...prev, [table]: !prev[table] }));
|
||||
};
|
||||
|
||||
const handleSelectAll = () => {
|
||||
if (!schema) return;
|
||||
const tableNames = Object.keys(schema);
|
||||
setSelectedTables(tableNames);
|
||||
setSelectedColumns(
|
||||
Object.fromEntries(
|
||||
tableNames.map((table) => [table, schema[table].map((c) => c.name)])
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
const handleClearAll = () => {
|
||||
setSelectedTables([]);
|
||||
setSelectedColumns({});
|
||||
};
|
||||
|
||||
const handleReselectTables = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
await fetchSchemaOnly();
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const openModelDetail = async (modelName: string) => {
|
||||
try {
|
||||
setDetailOpen(true);
|
||||
setDetailLoading(true);
|
||||
const detail = await api.get<ModelDetailResponse>(
|
||||
`/api/v1/semantic/${id}/models/${encodeURIComponent(modelName)}?limit=10`
|
||||
);
|
||||
setModelDetail(detail);
|
||||
} catch (error) {
|
||||
console.error("Failed to fetch model detail:", error);
|
||||
setModelDetail(null);
|
||||
} finally {
|
||||
setDetailLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return <div className="p-8 text-center">Loading modeling data...</div>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full bg-gray-50">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between px-6 py-4 bg-white border-b">
|
||||
<div className="flex items-center gap-4">
|
||||
<Button variant="ghost" size="icon" onClick={() => navigate("/datasources")}>
|
||||
<ArrowLeft className="w-5 h-5" />
|
||||
</Button>
|
||||
<div>
|
||||
<h1 className="text-xl font-semibold">Data Modeling</h1>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
DataSource ID: {id} • {step === "select" ? "Select Tables" : "Entity Relationship Diagram"}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{step === "view" && (
|
||||
<div className="flex gap-2">
|
||||
<Button variant="outline" onClick={handleReselectTables}>
|
||||
Reselect Tables
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="flex-1 overflow-hidden p-6">
|
||||
{step === "select" ? (
|
||||
<div className="max-w-4xl mx-auto h-full flex flex-col">
|
||||
<Card className="flex-1 flex flex-col overflow-hidden">
|
||||
<CardHeader>
|
||||
<CardTitle>Select tables to create data models</CardTitle>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Choose the tables you want to include in your semantic model.
|
||||
</p>
|
||||
</CardHeader>
|
||||
<CardContent className="flex-1 overflow-hidden flex flex-col">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div className="text-sm text-muted-foreground">
|
||||
{selectedTables.length} / {schema ? Object.keys(schema).length : 0} selected
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={handleSelectAll}
|
||||
>
|
||||
Select All
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={handleClearAll}
|
||||
>
|
||||
Clear
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ScrollArea className="flex-1 border rounded-md p-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{schema && Object.keys(schema).map((table) => (
|
||||
<div
|
||||
key={table}
|
||||
className={`p-3 rounded-lg border transition-colors ${
|
||||
selectedTables.includes(table)
|
||||
? "bg-primary/5 border-primary"
|
||||
: "bg-white hover:bg-gray-50"
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<div className="flex items-center space-x-3">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary"
|
||||
checked={selectedTables.includes(table)}
|
||||
onChange={() => toggleTable(table)}
|
||||
/>
|
||||
<Label className="cursor-pointer font-medium flex items-center gap-2">
|
||||
<TableIcon className="w-4 h-4 text-muted-foreground" />
|
||||
{table}
|
||||
</Label>
|
||||
</div>
|
||||
<Button variant="ghost" size="sm" onClick={() => toggleExpandTable(table)}>
|
||||
{expandedTables[table] ? "Hide Columns" : "Show Columns"}
|
||||
</Button>
|
||||
</div>
|
||||
{expandedTables[table] && (
|
||||
<div className="mt-3 max-h-48 overflow-auto border rounded-md bg-white">
|
||||
{schema[table].map((col) => (
|
||||
<label
|
||||
key={`${table}:${col.name}`}
|
||||
className="flex items-center justify-between px-3 py-2 border-b last:border-b-0 cursor-pointer hover:bg-gray-50"
|
||||
>
|
||||
<div className="flex items-center gap-2 min-w-0">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary"
|
||||
checked={(selectedColumns[table] ?? []).includes(col.name)}
|
||||
onChange={() => toggleColumn(table, col.name)}
|
||||
/>
|
||||
<span className="text-sm truncate">{col.name}</span>
|
||||
</div>
|
||||
<span className="text-[10px] font-mono text-muted-foreground ml-2">{col.type}</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
|
||||
<div className="pt-6 flex justify-end">
|
||||
<Button onClick={handleGenerate} disabled={selectedTables.length === 0}>
|
||||
Generate Model
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
) : (
|
||||
<div className="h-full flex gap-6">
|
||||
{/* Sidebar List */}
|
||||
<Card className="w-64 flex flex-col h-full">
|
||||
<CardHeader className="py-4 px-4 border-b">
|
||||
<CardTitle className="text-sm font-medium">Models ({mdl?.models.length})</CardTitle>
|
||||
</CardHeader>
|
||||
<ScrollArea className="flex-1">
|
||||
<div className="p-2 space-y-1">
|
||||
{mdl?.models.map((model) => (
|
||||
<div
|
||||
key={model.name}
|
||||
className="flex items-center gap-2 px-3 py-2 text-sm rounded-md hover:bg-gray-100 cursor-pointer"
|
||||
onClick={() => openModelDetail(model.name)}
|
||||
>
|
||||
<TableIcon className="w-4 h-4 text-muted-foreground" />
|
||||
<span className="truncate">{model.name}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</Card>
|
||||
|
||||
{/* Canvas Area (Simulated) */}
|
||||
<div className="flex-1 overflow-auto bg-slate-100 rounded-lg border p-8 relative">
|
||||
<div className="absolute inset-0 pointer-events-none"
|
||||
style={{
|
||||
backgroundImage: 'radial-gradient(#cbd5e1 1px, transparent 1px)',
|
||||
backgroundSize: '20px 20px'
|
||||
}}
|
||||
/>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 relative z-10">
|
||||
{mdl?.models.map((model) => (
|
||||
<Card key={model.name} className="shadow-md border-t-4 border-t-blue-500 min-w-[240px] cursor-pointer" onClick={() => openModelDetail(model.name)}>
|
||||
<CardHeader className="py-3 px-4 bg-gray-50 border-b flex flex-row items-center justify-between">
|
||||
<div className="font-semibold text-sm flex items-center gap-2">
|
||||
<TableIcon className="w-4 h-4 text-blue-500" />
|
||||
{model.name}
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="p-0">
|
||||
<div className="max-h-[300px] overflow-y-auto text-xs">
|
||||
{model.columns.map((col) => (
|
||||
<div key={col.name} className="flex justify-between py-2 px-4 border-b last:border-0 hover:bg-gray-50">
|
||||
<span className="font-medium">{col.name}</span>
|
||||
<span className="text-muted-foreground font-mono text-[10px]">{col.type}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{/* Show Relationships if any */}
|
||||
{mdl.relationships.filter(r => r.models.includes(model.name)).length > 0 && (
|
||||
<div className="bg-orange-50 p-2 border-t text-xs">
|
||||
<div className="font-semibold text-orange-700 mb-1 flex items-center gap-1">
|
||||
<Network className="w-3 h-3" /> Relationships
|
||||
</div>
|
||||
{mdl.relationships
|
||||
.filter(r => r.models.includes(model.name))
|
||||
.map(r => {
|
||||
const other = r.models.find(m => m !== model.name);
|
||||
return (
|
||||
<div key={r.name} className="text-orange-600 truncate" title={`${r.joinType} with ${other}`}>
|
||||
⟷ {other}
|
||||
</div>
|
||||
);
|
||||
})
|
||||
}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<Dialog open={detailOpen} onOpenChange={setDetailOpen}>
|
||||
<DialogContent className="sm:max-w-[1100px] max-h-[85vh] overflow-auto">
|
||||
<DialogHeader>
|
||||
<DialogTitle>{modelDetail?.model?.name ?? "Model Detail"}</DialogTitle>
|
||||
</DialogHeader>
|
||||
{detailLoading ? (
|
||||
<div className="py-8 text-center text-muted-foreground">Loading model detail...</div>
|
||||
) : !modelDetail ? (
|
||||
<div className="py-8 text-center text-muted-foreground">No metadata available.</div>
|
||||
) : (
|
||||
<div className="space-y-6">
|
||||
<div className="space-y-2">
|
||||
<div className="text-base font-semibold">Columns Metadata</div>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Name</TableHead>
|
||||
<TableHead>Type</TableHead>
|
||||
<TableHead>Description</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{modelDetail.model.columns.map((col) => (
|
||||
<TableRow key={col.name}>
|
||||
<TableCell>{col.name}</TableCell>
|
||||
<TableCell>{col.type}</TableCell>
|
||||
<TableCell>{String(col.properties?.description ?? "-")}</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<div className="text-base font-semibold">Relationships ({modelDetail.relationships.length})</div>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Name</TableHead>
|
||||
<TableHead>Models</TableHead>
|
||||
<TableHead>Type</TableHead>
|
||||
<TableHead>Condition</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{modelDetail.relationships.map((rel) => (
|
||||
<TableRow key={rel.name}>
|
||||
<TableCell>{rel.name}</TableCell>
|
||||
<TableCell>{rel.models.join(" ↔ ")}</TableCell>
|
||||
<TableCell>{rel.joinType}</TableCell>
|
||||
<TableCell>{rel.condition}</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<div className="text-base font-semibold">Data Preview (Top 10)</div>
|
||||
{modelDetail.preview_rows.length === 0 ? (
|
||||
<div className="text-sm text-muted-foreground">No preview data.</div>
|
||||
) : (
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
{Object.keys(modelDetail.preview_rows[0]).map((key) => (
|
||||
<TableHead key={key}>{key}</TableHead>
|
||||
))}
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{modelDetail.preview_rows.map((row, idx) => (
|
||||
<TableRow key={idx}>
|
||||
{Object.keys(modelDetail.preview_rows[0]).map((key) => (
|
||||
<TableCell key={key}>{String(row[key] ?? "")}</TableCell>
|
||||
))}
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user