Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ui adjustments #55

Open
wants to merge 3 commits into
base: staging
Choose a base branch
from
Open

ui adjustments #55

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
06c7d57
ui adjustments
Naseem77 Feb 23, 2025
f2b0069
update tests, fix lint errors
Naseem77 Feb 23, 2025
9abd8da
add GTM
Naseem77 Feb 23, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 15 additions & 0 deletions ui/app/GTM.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
"use client"

import { useEffect } from "react";
import TagManager from "react-gtm-module";

export default function GTM() {
useEffect(() => {
const gtmId = process.env.NEXT_PUBLIC_GTM_ID
if (gtmId) {
TagManager.initialize({ gtmId });
}
}, []);

return null;
}
4 changes: 2 additions & 2 deletions ui/app/components/VerticalBarChart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,8 +67,8 @@ const VerticalBarChart: React.FC<VerticalBarChartProps> = ({
align: "top" as const,
font: {
weight: "bold" as const,
family: "Fira Code",
size: 18,
family: chartId !== "single" ? "Fira Code" : undefined,
size: chartId !== "single" ? 18 : undefined,
},
color: "grey",
// eslint-disable-next-line
Expand Down
62 changes: 31 additions & 31 deletions ui/app/components/dashboard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,13 +27,13 @@ export default function DashBoard() {
const [selectedOptions, setSelectedOptions] = React.useState<
Record<string, string[]>
>({
"Workload Type": ["concurrent"],
"Workload Type": ["single"],
Vendors: ["falkordb", "neo4j"],
Clients: ["40"],
Throughput: ["2500"],
Hardware: ["arm"],
Queries: ["aggregate_expansion_4_with_filter"],
"Realistic Workload": ["1"],
// "Realistic Workload": ["1"],
});

const fetchData = useCallback(async () => {
Expand Down Expand Up @@ -206,7 +206,7 @@ export default function DashBoard() {
hoverBackgroundColor: getBarColor(vendor),
borderRadius: 8,
barPercentage: 0.95,
categoryPercentage: 0.8,
categoryPercentage: 0.9,
}));

if (filteredUnrealistic.length >= 2) {
Expand Down Expand Up @@ -274,29 +274,29 @@ export default function DashBoard() {
const throughputRatio =
minThroughput !== 0 ? Math.round(maxThroughput / minThroughput) : 0;

const memoryData = filteredResults.map((item) => {
const memoryValue = item.result["ram-usage"] ?? "0MB";
const match = memoryValue.match(/([\d.]+)([a-zA-Z]+)/);
if (match) {
const value = parseFloat(match[1]);
const unit = match[2].toUpperCase();
const memoryInMB = unit === "GB" ? value * 1024 : value;
return {
vendor: item.vendor,
memory: memoryInMB,
};
}

return {
vendor: item.vendor,
memory: 0,
};
});

const maxMemoryUsage = Math.max(...memoryData.map((item) => item.memory));
const minMemoryUsage = Math.min(...memoryData.map((item) => item.memory));
const memoryUsageRatio =
minMemoryUsage !== 0 ? Math.round(maxMemoryUsage / minMemoryUsage) : 0;
// const memoryData = filteredResults.map((item) => {
// const memoryValue = item.result["ram-usage"] ?? "0MB";
// const match = memoryValue.match(/([\d.]+)([a-zA-Z]+)/);
// if (match) {
// const value = parseFloat(match[1]);
// const unit = match[2].toUpperCase();
// const memoryInMB = unit === "GB" ? value * 1024 : value;
// return {
// vendor: item.vendor,
// memory: memoryInMB,
// };
// }

// return {
// vendor: item.vendor,
// memory: 0,
// };
// });

// const maxMemoryUsage = Math.max(...memoryData.map((item) => item.memory));
// const minMemoryUsage = Math.min(...memoryData.map((item) => item.memory));
// const memoryUsageRatio =
// minMemoryUsage !== 0 ? Math.round(maxMemoryUsage / minMemoryUsage) : 0;

useEffect(() => {
setGridKey((prevKey) => prevKey + 1);
Expand All @@ -318,7 +318,7 @@ export default function DashBoard() {
};

addOrReplaceChartData("throughputData", throughputData);
addOrReplaceChartData("memoryData", memoryData);
// addOrReplaceChartData("memoryData", memoryData);
addOrReplaceChartData("latencyData", latencyDataForRealistic);
}

Expand Down Expand Up @@ -384,10 +384,10 @@ export default function DashBoard() {
{selectedOptions["Workload Type"]?.includes("concurrent") && (
<>
<div
className="bg-muted/50 rounded-xl p-4 min-h-0 w-full flex flex-col items-center justify-between"
className="bg-muted/50 rounded-xl p-4 min-h-0 w-full flex flex-col items-center justify-between col-span-2"
id="throughput-chart"
>
<h2 className="text-2xl font-bold text-center font-space">THROUGHPUT</h2>
<h2 className="text-2xl font-bold text-center font-space">MAX THROUGHPUT</h2>
<p className="text-gray-600 text-center font-fira">
(HIGHER IS BETTER)
</p>
Expand All @@ -412,7 +412,7 @@ export default function DashBoard() {
</div>
</div>
</div>
<div
{/* <div
className="bg-muted/50 rounded-xl p-4 min-h-0 w-full flex flex-col items-center justify-between"
id="memory-chart"
>
Expand All @@ -439,7 +439,7 @@ export default function DashBoard() {
/>
</div>
</div>
</div>
</div> */}
</>
)}
<div className="col-span-2 bg-muted/50 rounded-xl flex items-center justify-center h-[50px]">
Expand Down
16 changes: 8 additions & 8 deletions ui/app/data/sideBarData.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import {
Cpu,
Users,
Activity,
BarChart,
// BarChart,
Search,
} from "lucide-react";
export const sidebarConfig: {
Expand Down Expand Up @@ -76,13 +76,13 @@ export const sidebarConfig: {
{ id: "single_vertex_read", label: "Read Vertex" },
],
},
{
title: "Realistic Workload",
description: "",
layout: "col",
icon: BarChart,
options: [{ id: "1", label: "100% Read / 0% Write" }],
},
// {
// title: "Realistic Workload",
// description: "",
// layout: "col",
// icon: BarChart,
// options: [{ id: "1", label: "100% Read / 0% Write" }],
// },
],
};

Expand Down
2 changes: 2 additions & 0 deletions ui/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import type { Metadata } from "next";
import "./globals.css";
import { Toaster } from "@/components/ui/toaster";
import GTM from "./GTM";

export const metadata: Metadata = {
title: "Benchmark by FalkorDB",
Expand All @@ -15,6 +16,7 @@ export default function RootLayout({
return (
<html lang="en">
<body>
<GTM />
{children}
<Toaster />
</body>
Expand Down
15 changes: 15 additions & 0 deletions ui/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 2 additions & 0 deletions ui/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@
"react": "^19.0.0",
"react-chartjs-2": "^5.3.0",
"react-dom": "^19.0.0",
"react-gtm-module": "^2.0.11",
"react-icons": "^5.4.0",
"react-resizable-panels": "^2.1.7",
"tailwind-merge": "^2.6.0",
Expand All @@ -44,6 +45,7 @@
"@types/node": "^20",
"@types/react": "^19",
"@types/react-dom": "^19",
"@types/react-gtm-module": "^2.0.4",
"eslint": "^9",
"eslint-config-next": "15.1.3",
"postcss": "^8.4.49",
Expand Down
8 changes: 8 additions & 0 deletions ui/tests/logic/POM/mainPage.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,10 @@ export default class NavBarComponent extends BasePage {
return this.page.locator("div[data-sidebar='content']");
}

private get sideBarWorkloadType(): (type: string) => Locator {
return (type: string) => this.page.locator("button", { hasText: type });
}

/* General Functionality */

async hoverOnSideBarHardware(item: string): Promise<void> {
Expand Down Expand Up @@ -131,6 +135,10 @@ export default class NavBarComponent extends BasePage {
await this.sideBarContent.evaluate((el) => el.scrollTo(0, el.scrollHeight));
}

async selectWorkloadType(type: string): Promise<void> {
await this.sideBarWorkloadType(type).click();
}

async isScrolledToBottomInSidebar(): Promise<boolean> {
return await this.sideBarContent.evaluate((el) => {
return el.scrollTop + el.clientHeight >= el.scrollHeight;
Expand Down
2 changes: 2 additions & 0 deletions ui/tests/tests/sideBar.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,7 @@ test.describe("SideBar tests", () => {
sideBarItems.forEach(({ item, expectedRes }) => {
test(`Verify ${item} selection updates the chart results`, async () => {
const sidebar = await browser.createNewPage(MainPage, urls.baseUrl);
await sidebar.selectWorkloadType("Concurrent");
const graphDetails = await sidebar.getGraphDetails();
await sidebar.clickOnSidebarSelection(item);
const updatedGraphDetails = await sidebar.getGraphDetails();
Expand Down Expand Up @@ -99,6 +100,7 @@ test.describe("SideBar tests", () => {
hoverItems.forEach(({ item, expectedRes }) => {
test(`Verify hover behavior for hardware item: ${item}`, async () => {
const sidebar = await browser.createNewPage(MainPage, urls.baseUrl);
await sidebar.selectWorkloadType("Concurrent");
await sidebar.hoverOnSideBarHardware(item);
expect(await sidebar.isHoverElementVisible()).toBe(expectedRes);
});
Expand Down
Loading