Skip to content

Commit 4c54288

Browse files
osamajandaliosama-oracle
osamajandali
authored and
osama-oracle
committed
Enhance Visualizer component with improved layout and styling; refactor DataTable for better readability and responsiveness; update Badge component color for outline variant.
1 parent 971804f commit 4c54288

File tree

3 files changed

+121
-55
lines changed

3 files changed

+121
-55
lines changed

‎src/components/Visualizer/index.tsx

Lines changed: 96 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -242,60 +242,118 @@ const Visualizer = ({ fileUrl }: { fileUrl: string }) => {
242242
</div>
243243

244244
<Drawer open={isDrawerOpen} onOpenChange={setIsDrawerOpen}>
245-
<DrawerContent>
246-
<DrawerHeader>
247-
<DrawerTitle>Component Details</DrawerTitle>
248-
<DrawerClose />
245+
<DrawerContent className="max-w-4xl mx-auto rounded-t-xl">
246+
<DrawerHeader className="border-b border-gray-100">
247+
<DrawerTitle className="text-xl font-bold text-primary">Component Details</DrawerTitle>
248+
<DrawerClose className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary" />
249249
</DrawerHeader>
250-
<ScrollArea className="h-[80vh]">
250+
<ScrollArea>
251251
{cellDetails && (
252-
<div className="p-4">
253-
{/* Add your drawer content here */}
252+
<div className="p-6 space-y-6">
253+
{/* Defaults Section */}
254254
{Object.keys(cellDetails.defaults).length > 0 && (
255-
<div>
256-
<Title>Defaults</Title>
257-
{Object.entries(cellDetails.defaults).map(([key, value]) => (
258-
<div key={key} className="p-1">
259-
<span className="font-bold">{key}: </span>
260-
<span>{value}</span>
255+
<Card className="overflow-hidden border border-gray-100 shadow-sm">
256+
<CardHeader className="bg-gray-50 py-3 px-4">
257+
<CardTitle className="text-md font-semibold text-primary flex items-center gap-2">
258+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="lucide lucide-settings">
259+
<path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"></path>
260+
<circle cx="12" cy="12" r="3"></circle>
261+
</svg>
262+
Defaults
263+
</CardTitle>
264+
</CardHeader>
265+
<CardContent className="p-4">
266+
<div className="grid grid-cols-1 gap-2">
267+
{Object.entries(cellDetails.defaults).map(([key, value]) => (
268+
<div key={key} className="flex justify-between items-center py-1 px-2 rounded hover:bg-gray-50">
269+
<span className="font-medium text-gray-700">{key}</span>
270+
<Badge variant="outline" className="font-mono">{value}</Badge>
271+
</div>
272+
))}
261273
</div>
262-
))}
263-
</div>
274+
</CardContent>
275+
</Card>
264276
)}
265277

278+
{/* Inputs Section */}
266279
{Object.keys(cellDetails.inputs).length > 0 && (
267-
<div>
268-
<Title>Inputs</Title>
269-
{Object.entries(cellDetails.inputs).map(([key, value]) => (
270-
<div key={key} className="p-1">
271-
<span className="font-bold">{key}: </span>
272-
<span>{value}</span>
280+
<Card className="overflow-hidden border border-gray-100 shadow-sm">
281+
<CardHeader className="bg-gray-50 py-3 px-4">
282+
<CardTitle className="text-md font-semibold text-primary flex items-center gap-2">
283+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="lucide lucide-arrow-down-right">
284+
<path d="M7 7L17 17"></path>
285+
<path d="M17 7V17H7"></path>
286+
</svg>
287+
Inputs
288+
</CardTitle>
289+
</CardHeader>
290+
<CardContent className="p-4">
291+
<div className="grid grid-cols-1 gap-2">
292+
{Object.entries(cellDetails.inputs).map(([key, value]) => (
293+
<div key={key} className="flex justify-between items-center py-1 px-2 rounded hover:bg-gray-50">
294+
<span className="font-medium text-gray-700">{key}</span>
295+
<Badge variant="outline" className="font-mono">{value}</Badge>
296+
</div>
297+
))}
273298
</div>
274-
))}
275-
</div>
299+
</CardContent>
300+
</Card>
276301
)}
277302

303+
{/* Pipeline Section */}
278304
{cellDetails.pipeline.length > 0 && (
279-
<div>
280-
<Title>Pipeline</Title>
281-
{cellDetails.pipeline.map((item, index) => (
282-
<div key={index} className="p-1">
283-
{item}
305+
<Card className="overflow-hidden border border-gray-100 shadow-sm">
306+
<CardHeader className="bg-gray-50 py-3 px-4">
307+
<CardTitle className="text-md font-semibold text-primary flex items-center gap-2">
308+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="lucide lucide-git-branch">
309+
<line x1="6" x2="6" y1="3" y2="15"></line>
310+
<circle cx="18" cy="6" r="3"></circle>
311+
<circle cx="6" cy="18" r="3"></circle>
312+
<path d="M18 9a9 9 0 0 1-9 9"></path>
313+
</svg>
314+
Pipeline
315+
</CardTitle>
316+
</CardHeader>
317+
<CardContent className="p-4">
318+
<div className="space-y-2">
319+
{cellDetails.pipeline.map((item, index) => (
320+
<div key={index} className="flex items-center gap-2">
321+
<div className="flex-shrink-0 w-6 h-6 rounded-full bg-primary-lighter flex items-center justify-center text-xs font-medium text-primary">
322+
{index + 1}
323+
</div>
324+
<div className="py-2 px-3 bg-gray-50 rounded-md font-mono text-sm flex-grow">
325+
{item}
326+
</div>
327+
</div>
328+
))}
284329
</div>
285-
))}
286-
</div>
330+
</CardContent>
331+
</Card>
287332
)}
288333

334+
{/* Outputs Section */}
289335
{Object.keys(cellDetails.outputs).length > 0 && (
290-
<div>
291-
<Title>Outputs</Title>
292-
{Object.entries(cellDetails.outputs).map(([key, value]) => (
293-
<div key={key} className="p-1">
294-
<span className="font-bold">{key}: </span>
295-
<span>{value}</span>
336+
<Card className="overflow-hidden border border-gray-100 shadow-sm">
337+
<CardHeader className="bg-gray-50 py-3 px-4">
338+
<CardTitle className="text-md font-semibold text-primary flex items-center gap-2">
339+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="lucide lucide-arrow-up-right">
340+
<path d="M7 17L17 7"></path>
341+
<path d="M7 7h10v10"></path>
342+
</svg>
343+
Outputs
344+
</CardTitle>
345+
</CardHeader>
346+
<CardContent className="p-4">
347+
<div className="grid grid-cols-1 gap-2">
348+
{Object.entries(cellDetails.outputs).map(([key, value]) => (
349+
<div key={key} className="flex justify-between items-center py-1 px-2 rounded hover:bg-gray-50">
350+
<span className="font-medium text-gray-700">{key}</span>
351+
<Badge variant="outline" className="font-mono">{value}</Badge>
352+
</div>
353+
))}
296354
</div>
297-
))}
298-
</div>
355+
</CardContent>
356+
</Card>
299357
)}
300358
</div>
301359
)}

‎src/components/Visualizer/table.tsx

Lines changed: 24 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import {
1717
TableRow,
1818
} from "@/components/ui/table";
1919
import { ChevronRight, ChevronDown, EyeIcon } from "lucide-react";
20+
import { cn } from "@/lib/utils";
2021

2122
interface IRow {
2223
Component: string;
@@ -154,15 +155,18 @@ const DataTable: React.FC<TableProps> = ({
154155
const isSelected = value === selectedNode?.name;
155156

156157
return (
157-
<div className={`flex items-center gap-2 ${isSelected ? "text-primary font-bold" : ""}`}>
158+
<div className={cn(
159+
"flex items-center gap-2",
160+
isSelected && "text-primary font-bold"
161+
)}>
158162
<div style={{ paddingLeft: `${row.depth * 32}px` }} className="flex items-center gap-2">
159163
{row.getCanExpand() ? (
160164
<button
161165
onClick={(e) => {
162166
e.stopPropagation();
163167
row.getToggleExpandedHandler()();
164168
}}
165-
className="focus:outline-none hover:bg-gray-100 rounded p-1"
169+
className="focus:outline-none hover:bg-muted/50 rounded p-1"
166170
>
167171
{row.getIsExpanded() ? (
168172
<ChevronDown size={16} />
@@ -181,7 +185,7 @@ const DataTable: React.FC<TableProps> = ({
181185
const path = getComponentPath(value as string);
182186
onNodeSelect(value as string, path, row.original.node);
183187
}}
184-
className="ml-2 hover:bg-gray-100 rounded p-1"
188+
className="ml-2 hover:bg-muted/50 rounded p-1"
185189
title="View in pie chart"
186190
>
187191
<EyeIcon size={16} />
@@ -194,9 +198,9 @@ const DataTable: React.FC<TableProps> = ({
194198
columnHelper.accessor("Total", {
195199
header: "Total",
196200
cell: (info) => {
197-
const value = info.getValue();
201+
const value = Number(info.getValue());
198202
if (showPercentages) {
199-
const total = rowData[0]?.Total || 1; // Use root total
203+
const total = Number(rowData[0]?.Total || 1); // Use root total
200204
return `${((value / total) * 100).toFixed(1)}%`;
201205
}
202206
return value.toFixed(4);
@@ -215,7 +219,7 @@ const DataTable: React.FC<TableProps> = ({
215219
const value = info.getValue();
216220
if (value === undefined || value === null) return "N/A";
217221
if (showPercentages) {
218-
const total = rowData[0]?.[`T${index + 1}`] || 1; // Use root total for the same timestamp
222+
const total = Number(rowData[0]?.[`T${index + 1}`] || 1); // Use root total for the same timestamp
219223
return `${((Number(value) / total) * 100).toFixed(1)}%`;
220224
}
221225
return Number(value).toFixed(4);
@@ -273,18 +277,18 @@ const DataTable: React.FC<TableProps> = ({
273277
}, [selectedNode, rowData, data]);
274278

275279
return (
276-
<div className="overflow-auto">
280+
<div className="w-full overflow-auto rounded-md border">
277281
<Table>
278282
<TableHeader>
279283
{table.getHeaderGroups().map((headerGroup) => (
280284
<TableRow key={headerGroup.id}>
281285
{headerGroup.headers.map((header) => (
282286
<TableHead
283287
key={header.id}
284-
className={`whitespace-nowrap ${header.id === "Component"
285-
? "sticky left-0 z-10 bg-primary-lightest-2 drop-shadow-md"
286-
: ""
287-
}`}
288+
className={cn(
289+
"whitespace-nowrap",
290+
header.id === "Component" && "sticky left-0 z-10 bg-primary-lightest-1 drop-shadow-md"
291+
)}
288292
>
289293
{flexRender(
290294
header.column.columnDef.header,
@@ -299,7 +303,9 @@ const DataTable: React.FC<TableProps> = ({
299303
{table.getRowModel().rows.map((row) => (
300304
<TableRow
301305
key={row.id}
302-
className={row.original.Component === selectedNode?.name ? "bg-primary-lighter" : ""}
306+
className={cn(
307+
row.original.Component === selectedNode?.name && "bg-primary-lighter"
308+
)}
303309
onClick={() => {
304310
const path = getComponentPath(row.original.Component);
305311
onNodeSelect(row.original.Component, path, row.original.node);
@@ -315,10 +321,12 @@ const DataTable: React.FC<TableProps> = ({
315321
return (
316322
<TableCell
317323
key={cell.id}
318-
className={`whitespace-nowrap ${cell.column.id === "Component"
319-
? "sticky left-0 z-10 bg-secondary-lightest-1 drop-shadow-md font-bold text-primary-dark"
320-
: "hover:bg-gray-100 cursor-pointer"
321-
} ${isHighlighted ? "bg-primary-lighter font-bold" : ""}`}
324+
className={cn(
325+
"whitespace-nowrap",
326+
cell.column.id === "Component" && "sticky left-0 z-10 bg-secondary-lightest-1 drop-shadow-md font-bold text-primary-dark",
327+
isHighlighted && "bg-primary-lighter font-bold",
328+
cell.column.id !== "Component" && "hover:bg-muted/50 cursor-pointer"
329+
)}
322330
>
323331
{flexRender(cell.column.columnDef.cell, cell.getContext())}
324332
</TableCell>

‎src/components/ui/badge.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ const badgeVariants = cva(
1414
"border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
1515
destructive:
1616
"border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
17-
outline: "text-foreground",
17+
outline: "text-primary-dark",
1818
},
1919
},
2020
defaultVariants: {

0 commit comments

Comments
 (0)