fix #12 add table view for query result

app/graph/model.ts

@@ -67,6 +67,10 @@ export interface ExtractedData {
 export class Graph {
 
     private id: string;
+
+    private columns: string[];
+    private data: any[];
+
     private categories: Category[];
     private elements: any[];
 
@@ -77,6 +81,8 @@ export class Graph {
     private constructor(id: string, categories: Category[], elements: any[],
         categoriesMap: Map<String, Category>, nodesMap: Map<number, Node>, edgesMap: Map<number, Edge>) {
         this.id = id;
+        this.columns = [];
+        this.data = [];
         this.categories = categories;
         this.elements = elements;
         this.categoriesMap = categoriesMap;
@@ -96,6 +102,14 @@ export class Graph {
         return this.elements;
     }
 
+    get Columns(): string[] {
+        return this.columns;
+    }
+
+    get Data(): any[] {
+        return this.data;
+    }
+
     public static empty(): Graph {
         return new Graph("", [], [], new Map<String, Category>(), new Map<number, Node>(), new Map<number, Edge>())
     }
@@ -110,17 +124,14 @@ export class Graph {
     public extend(results: any): any[] {
 
         let newElements: any[] = []
-
-        let columns: string[] = []
-        let data: any[][] = []
         if (results?.data?.length) {
             if (results.data[0] instanceof Object) {
-                columns = Object.keys(results.data[0])
+                this.columns = Object.keys(results.data[0])
             }
-            data = results.data
+            this.data = results.data
         }
 
-        data.forEach((row: any[]) => {
+        this.data.forEach((row: any[]) => {
             Object.values(row).forEach((cell: any) => {
                 if (cell instanceof Object) {
                     if (cell.relationshipType) {

app/graph/page.tsx

@@ -11,7 +11,7 @@ import { Toolbar } from "./toolbar";
 import { Query, QueryState } from "./query";
 import { Labels } from "./labels";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { TableView } from "./tableview";
 
 cytoscape.use( fcose );
 
@@ -186,25 +186,7 @@ export default function Page() {
                                     <TabsTrigger value="graph">Graph</TabsTrigger>
                                 </TabsList>
                                 <TabsContent value="data" className="grow w-full">
-                                    <Table>
-                                        <TableCaption>A list of results</TableCaption>
-                                        <TableHeader>
-                                            <TableRow>
-                                                {/* <TableHead className="w-[100px]">Invoice</TableHead>
-                                                <TableHead>Status</TableHead>
-                                                <TableHead>Method</TableHead>
-                                                <TableHead className="text-right">Amount</TableHead> */}
-                                            </TableRow>
-                                        </TableHeader>
-                                        <TableBody>
-                                            <TableRow>
-                                                {/* <TableCell className="font-medium">INV001</TableCell>
-                                                <TableCell>Paid</TableCell>
-                                                <TableCell>Credit Card</TableCell>
-                                                <TableCell className="text-right">$250.00</TableCell> */}
-                                            </TableRow>
-                                        </TableBody>
-                                    </Table>
+                                    <TableView graph={graph} />
                                 </TabsContent>
                                                                 <TabsContent value="graph" className="grow w-full">
                                     <div className="h-full flex flex-col">

app/graph/tableview.tsx

@@ -0,0 +1,32 @@
+import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { Graph } from "./model";
+
+export function TableView(params: {graph: Graph}) {
+    return (
+        <Table>
+            <TableCaption>A list of results</TableCaption>
+            <TableHeader>
+                <TableRow>
+                    {
+                        params.graph.Columns.map((column, index) => {
+                            return (<TableHead key={index}>{column}</TableHead>)
+                        })
+                    }
+                </TableRow>
+            </TableHeader>
+            <TableBody>
+                {
+                    params.graph.Data.map((row, index) => {
+                        return (<TableRow key={index}>
+                            {
+                                Object.values(row).map((cell:any, index) => {
+                                    return (<TableCell key={index}>{JSON.stringify(cell)}</TableCell>)
+                                })
+                            }
+                        </TableRow>)
+                    })
+                }
+            </TableBody>
+        </Table>
+    )
+}