mirror of
https://github.com/james-m-jordan/morphik-core.git
synced 2025-05-09 19:32:38 +00:00
UI imp: wider kgraph viz screen
This commit is contained in:
Adityavardhan Agrawal
parent
a19ff3cc5a
commit
4f93300bf5
@ -1,6 +1,6 @@
|
||||
# DataBridge UI Component
|
||||
# Morphik UI Component
|
||||
|
||||
A modern React-based UI for DataBridge, built with Next.js and Tailwind CSS. This component provides a user-friendly interface for:
|
||||
A modern React-based UI for Morphik, built with Next.js and Tailwind CSS. This component provides a user-friendly interface for:
|
||||
- Document management and uploads
|
||||
- Interactive chat with your knowledge base
|
||||
- Real-time document processing feedback
|
||||
@ -10,7 +10,7 @@ A modern React-based UI for DataBridge, built with Next.js and Tailwind CSS. Thi
|
||||
|
||||
- Node.js 18 or later
|
||||
- npm or yarn package manager
|
||||
- A running DataBridge server
|
||||
- A running Morphik server
|
||||
|
||||
## Quick Start
|
||||
|
||||
@ -30,7 +30,7 @@ yarn dev
|
||||
|
||||
3. Open [http://localhost:3000](http://localhost:3000) in your browser
|
||||
|
||||
4. Connect to your DataBridge server using a URI from the `/local/generate_uri` endpoint
|
||||
4. Connect to your Morphik server using a URI from the `/local/generate_uri` endpoint
|
||||
|
||||
## Features
|
||||
|
||||
@ -82,4 +82,4 @@ We welcome contributions! Please feel free to submit a Pull Request.
|
||||
|
||||
## License
|
||||
|
||||
This project is part of DataBridge and is licensed under the MIT License.
|
||||
This project is part of Morphik and is licensed under the MIT License.
|
||||
|
||||
@ -14,8 +14,8 @@ const geistMono = localFont({
|
||||
});
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Create Next App",
|
||||
description: "Generated by create next app",
|
||||
title: "Morphik Dashboard",
|
||||
description: "Morphik - Knowledge Graph and RAG Platform",
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
|
||||
@ -17,7 +17,7 @@ import { Sidebar } from '@/components/ui/sidebar';
|
||||
import GraphSection from '@/components/GraphSection';
|
||||
import Image from 'next/image';
|
||||
|
||||
// API base URL - change this to match your DataBridge server
|
||||
// API base URL - change this to match your Morphik server
|
||||
const API_BASE_URL = 'http://localhost:8000';
|
||||
|
||||
interface Document {
|
||||
@ -63,7 +63,7 @@ interface BatchUploadError {
|
||||
error: string;
|
||||
}
|
||||
|
||||
const DataBridgeUI = () => {
|
||||
const MorphikUI = () => {
|
||||
const [activeSection, setActiveSection] = useState('documents');
|
||||
const [documents, setDocuments] = useState<Document[]>([]);
|
||||
const [selectedDocument, setSelectedDocument] = useState<Document | null>(null);
|
||||
@ -534,7 +534,6 @@ const DataBridgeUI = () => {
|
||||
/>
|
||||
|
||||
<div className="flex-1 overflow-auto p-6">
|
||||
<h1 className="text-3xl font-bold mb-6">DataBridge</h1>
|
||||
|
||||
{error && (
|
||||
<Alert variant="destructive" className="mb-4">
|
||||
@ -566,7 +565,7 @@ const DataBridgeUI = () => {
|
||||
<DialogHeader>
|
||||
<DialogTitle>Upload Document</DialogTitle>
|
||||
<DialogDescription>
|
||||
Upload a file or text to your DataBridge repository.
|
||||
Upload a file or text to your Morphik repository.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
@ -1202,8 +1201,7 @@ const DataBridgeUI = () => {
|
||||
{/* Graphs Section */}
|
||||
{activeSection === 'graphs' && (
|
||||
<div className="space-y-4">
|
||||
<div className="flex justify-between items-center">
|
||||
<h2 className="text-2xl font-bold mb-2">Knowledge Graphs</h2>
|
||||
<div className="flex justify-end items-center">
|
||||
{queryOptions.graph_name && (
|
||||
<Badge variant="outline" className="bg-blue-50 px-3 py-1">
|
||||
Current Query Graph: {queryOptions.graph_name}
|
||||
@ -1211,11 +1209,6 @@ const DataBridgeUI = () => {
|
||||
)}
|
||||
</div>
|
||||
|
||||
<p className="text-gray-600 mb-4">
|
||||
Knowledge graphs represent relationships between entities extracted from your documents.
|
||||
Use them to enhance your queries with structured information and improve retrieval quality.
|
||||
</p>
|
||||
|
||||
<GraphSection apiBaseUrl={API_BASE_URL} />
|
||||
</div>
|
||||
)}
|
||||
@ -1224,4 +1217,4 @@ const DataBridgeUI = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export default DataBridgeUI;
|
||||
export default MorphikUI;
|
||||
@ -333,7 +333,7 @@ const GraphSection: React.FC<GraphSectionProps> = ({ apiBaseUrl }) => {
|
||||
const renderVisualization = () => {
|
||||
if (!selectedGraph) {
|
||||
return (
|
||||
<div className="flex items-center justify-center h-[600px] border rounded-md">
|
||||
<div className="flex items-center justify-center h-[900px] border rounded-md">
|
||||
<div className="text-center p-8">
|
||||
<Network className="h-16 w-16 mx-auto mb-4 text-gray-400" />
|
||||
<h3 className="text-lg font-medium mb-2">No Graph Selected</h3>
|
||||
@ -373,11 +373,11 @@ const GraphSection: React.FC<GraphSectionProps> = ({ apiBaseUrl }) => {
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div ref={graphContainerRef} className="h-[600px]">
|
||||
<div ref={graphContainerRef} className="h-[900px]">
|
||||
<ForceGraphComponent
|
||||
data={prepareGraphData(selectedGraph)}
|
||||
width={graphContainerRef.current?.clientWidth || 800}
|
||||
height={600}
|
||||
height={900}
|
||||
showNodeLabels={showNodeLabels}
|
||||
showLinkLabels={showLinkLabels}
|
||||
/>
|
||||
@ -388,18 +388,24 @@ const GraphSection: React.FC<GraphSectionProps> = ({ apiBaseUrl }) => {
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex justify-between items-center">
|
||||
<h2 className="text-2xl font-bold flex items-center">
|
||||
<Network className="mr-2 h-6 w-6" />
|
||||
Knowledge Graphs
|
||||
</h2>
|
||||
{selectedGraph && (
|
||||
<div className="flex items-center">
|
||||
<Badge variant="outline" className="text-md px-3 py-1 bg-blue-50">
|
||||
Current Graph: {selectedGraph.name}
|
||||
</Badge>
|
||||
</div>
|
||||
)}
|
||||
<div className="space-y-2">
|
||||
<div className="flex justify-between items-center">
|
||||
<h2 className="text-2xl font-bold flex items-center">
|
||||
<Network className="mr-2 h-6 w-6" />
|
||||
Knowledge Graphs
|
||||
</h2>
|
||||
{selectedGraph && (
|
||||
<div className="flex items-center">
|
||||
<Badge variant="outline" className="text-md px-3 py-1 bg-blue-50">
|
||||
Current Graph: {selectedGraph.name}
|
||||
</Badge>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-gray-600">
|
||||
Knowledge graphs represent relationships between entities extracted from your documents.
|
||||
Use them to enhance your queries with structured information and improve retrieval quality.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Tabs defaultValue="list" value={activeTab} onValueChange={handleTabChange}>
|
||||
@ -584,7 +590,7 @@ const GraphSection: React.FC<GraphSectionProps> = ({ apiBaseUrl }) => {
|
||||
Create New Knowledge Graph
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Create a knowledge graph from documents in your collection to enhance your queries.
|
||||
Create a knowledge graph from documents in your Morphik collection to enhance your queries.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
|
||||
@ -24,7 +24,7 @@ export function Sidebar({ className, activeSection, onSectionChange, ...props }:
|
||||
{...props}
|
||||
>
|
||||
<div className="flex items-center justify-between p-4 border-b">
|
||||
{!isCollapsed && <h2 className="text-lg font-semibold">DataBridge</h2>}
|
||||
{!isCollapsed && <h2 className="text-lg font-semibold">Morphik</h2>}
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
{
|
||||
"name": "@databridge/ui",
|
||||
"name": "@morphik/ui",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"description": "Modern UI component for DataBridge - A powerful document processing and querying system",
|
||||
"author": "DataBridge Team",
|
||||
"description": "Modern UI component for Morphik - A powerful document processing and querying system",
|
||||
"author": "Morphik Team",
|
||||
"license": "MIT",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/databridge-org/databridge-core"
|
||||
"url": "https://github.com/morphik-org/morphik-core"
|
||||
},
|
||||
"scripts": {
|
||||
"dev": "next dev",
|
||||
@ -52,5 +52,6 @@
|
||||
"postcss": "^8",
|
||||
"tailwindcss": "^3.4.1",
|
||||
"typescript": "^5"
|
||||
}
|
||||
},
|
||||
"packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user