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

Staging #54

Merged
merged 2 commits into from
Feb 20, 2025
Merged

Staging #54

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
990b781
update fonts and hovering
Naseem77 Feb 20, 2025
c760463
Merge pull request #53 from FalkorDB/update-fonts
Naseem77 Feb 20, 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
35 changes: 19 additions & 16 deletions ui/app/components/ContactUsSheet.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ export default function ContactUsSheet({ isOpen, setIsOpen }: ContactUsSheetProp
setTimeout(() => {
setIsOpen(false);
resetForm();
}, 1500);
}, 1000);
} else {
console.error("HubSpot Submission Error:", responseData);
}
Expand All @@ -100,22 +100,22 @@ export default function ContactUsSheet({ isOpen, setIsOpen }: ContactUsSheetProp
<SheetContent className="w-full max-w-md p-6">
{submitted ? (
<div className="flex flex-col items-center justify-center h-full">
<CheckCircleIcon className="w-20 h-20 text-green-500" />
<CheckCircleIcon className="w-20 h-20 text-green-500 font-fira" />
<p className="mt-4 text-lg font-semibold">Thank you, you&apos;re all set.</p>
<p className="text-gray-500">We’ll be in touch shortly!</p>
<p className="text-gray-500 font-fira">We’ll be in touch shortly!</p>
</div>
) : (
<>
<SheetHeader className="flex flex-col items-center mt-20">
<Image src={Logo} alt="FalkorDB Logo" width={150} height={40} className="mb-4" />
<SheetTitle className="text-center text-[1.45rem] font-bold">Let&apos;s talk about your use case</SheetTitle>
<SheetDescription className="text-center text-lg">Get a follow-up from FalkorDB</SheetDescription>
<SheetTitle className="text-center text-[1.4rem] font-bold font-space">Let&apos;s talk about your use case</SheetTitle>
<SheetDescription className="text-center text-lg font-fira">Get a follow-up from FalkorDB</SheetDescription>
</SheetHeader>
{step === 1 ? (
<div className="mt-10">
<h2 className="text-sm text-gray-500">STEP 1 OF 2</h2>
<p className="mt-2 text-[1.25rem] font-bold">What are you working on?</p>
<div className="mt-6 space-y-2">
<h2 className="text-sm text-gray-500 font-fira">STEP 1 OF 2</h2>
<p className="mt-2 text-[1.25rem] font-bold font-fira">What are you working on?</p>
<div className="mt-6 space-y-2 font-fira">
{[
"Already doing RAG",
"Wants to start using RAG",
Expand All @@ -131,44 +131,47 @@ export default function ContactUsSheet({ isOpen, setIsOpen }: ContactUsSheetProp
</div>
))}
</div>
<Button className="mt-6 w-full bg-black text-white py-2" onClick={() => setStep(2)} disabled={selectedOptions.length === 0}>
<Button className="mt-6 w-full bg-black text-white py-2 font-fira" onClick={() => setStep(2)} disabled={selectedOptions.length === 0}>
Next
</Button>
<p className="mt-4 text-xs text-gray-500 text-center">
<p className="mt-4 text-xs text-gray-500 text-center font-fira">
I agree that my submitted data is being collected and stored. <strong>We don&apos;t resell your data.</strong>
</p>
</div>
) : (
<div className="mt-6">
<h2 className="text-sm text-gray-500">STEP 2 OF 2</h2>
<p className="mt-2 text-lg font-bold">Let&apos;s get acquainted</p>
<div className="mt-4 space-y-4">
<h2 className="text-sm text-gray-500 font-fira">STEP 2 OF 2</h2>
<p className="mt-2 text-lg font-bold font-fira">Let&apos;s get acquainted</p>
<div className="mt-4 space-y-4 font-fira">
<Input
placeholder="Your Name"
value={formData.name}
onChange={(e) => setFormData((prev) => ({ ...prev, name: e.target.value }))}
required
/>
<Input
placeholder="Email"
type="email"
value={formData.email}
onChange={(e) => setFormData((prev) => ({ ...prev, email: e.target.value }))}
required
/>
<Input
placeholder="Company Name"
value={formData.company}
onChange={(e) => setFormData((prev) => ({ ...prev, company: e.target.value }))}
required
/>
</div>
<div className="mt-6 flex justify-between">
<div className="mt-6 flex justify-between font-fira">
<Button variant="secondary" onClick={() => setStep(1)}>
Back
</Button>
<Button className="bg-green-500 text-white py-2" onClick={handleSubmit} disabled={!formData.name || !isValidEmail(formData.email) || !formData.company}>
<Button className="bg-green-500 text-white py-2 font-fira" onClick={handleSubmit} disabled={!formData.name || !isValidEmail(formData.email) || !formData.company}>
Submit
</Button>
</div>
<p className="mt-4 text-xs text-gray-500 text-center">
<p className="mt-4 text-xs text-gray-500 text-center font-fira">
I agree that my submitted data is being collected and stored. <strong>We don&apos;t resell your data.</strong>
</p>
</div>
Expand Down
1 change: 1 addition & 0 deletions ui/app/components/HorizontalBarChart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,7 @@ const HorizontalBarChart: React.FC<HorizontalBarChartProps> = ({
label: chartLabel,
data: data.map((item) => item[dataKey]),
backgroundColor: backgroundColors,
hoverBackgroundColor: backgroundColors,
borderRadius: 8,
barThickness: "flex" as const,
categoryPercentage: 1.1,
Expand Down
6 changes: 3 additions & 3 deletions ui/app/components/VerticalBarChart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ const VerticalBarChart: React.FC<VerticalBarChartProps> = ({
align: "top" as const,
font: {
weight: "bold" as const,
family: "font-fira",
family: "Fira Code",
size: 18,
},
color: "grey",
Expand Down Expand Up @@ -100,7 +100,7 @@ const VerticalBarChart: React.FC<VerticalBarChartProps> = ({
ticks: {
font: {
size: 16,
family: 'font-fira',
family: 'Fira Code',
weight: "bold" as const
},
color: "#000",
Expand All @@ -118,7 +118,7 @@ const VerticalBarChart: React.FC<VerticalBarChartProps> = ({
ticks: {
font: {
size: 15,
family: "font-fira",
family: "Fira Code",
},
color: "#333",
// eslint-disable-next-line
Expand Down
31 changes: 16 additions & 15 deletions ui/app/components/dashboard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -203,6 +203,7 @@ export default function DashBoard() {
label: vendor,
data: histogram,
backgroundColor: getBarColor(vendor),
hoverBackgroundColor: getBarColor(vendor),
borderRadius: 8,
barPercentage: 0.95,
categoryPercentage: 0.8,
Expand Down Expand Up @@ -234,20 +235,23 @@ export default function DashBoard() {
label: `${vendor} P50`,
data: [p50, 0, 0],
backgroundColor: getBarColor(vendor),
hoverBackgroundColor: getBarColor(vendor),
stack: `${index}`,
borderRadius: 8,
},
{
label: `${vendor} P95`,
data: [0, p95, 0],
backgroundColor: getBarColor(vendor),
hoverBackgroundColor: getBarColor(vendor),
stack: `${index}`,
borderRadius: 8,
},
{
label: `${vendor} P99`,
data: [0, 0, p99],
backgroundColor: getBarColor(vendor),
hoverBackgroundColor: getBarColor(vendor),
stack: `${index}`,
borderRadius: 8,
},
Expand Down Expand Up @@ -339,14 +343,13 @@ export default function DashBoard() {
className="col-span-2 bg-muted/50 rounded-xl p-4 min-h-0 w-full flex flex-col items-center justify-between"
id="latency-chart"
>
<h2 className="text-2xl font-bold text-center">LATENCY</h2>
<p className="pb-1 text-gray-600 text-center">
<h2 className="text-2xl font-bold text-center font-space">LATENCY</h2>
<p className="pb-1 text-gray-600 text-center font-fira">
(LOWER IS BETTER)
</p>
<div className="pt-1 w-full border-b border-gray-400"></div>
<p className="text-lg font-semibold text-center mb-2">
<p className="text-lg font-semibold text-center mb-2 font-fira">
Superior Latency:{" "}
<span className="text-purple-600 font-bold">
<span className="text-[#FF66B3] font-bold">
{selectedOptions["Workload Type"]?.includes("concurrent")
? latencyStats
? `${Math.round(latencyStats.p99.ratio)}x`
Expand Down Expand Up @@ -384,14 +387,13 @@ export default function DashBoard() {
className="bg-muted/50 rounded-xl p-4 min-h-0 w-full flex flex-col items-center justify-between"
id="throughput-chart"
>
<h2 className="text-2xl font-bold text-center">THROUGHPUT</h2>
<p className="text-gray-600 text-center">
<h2 className="text-2xl font-bold text-center font-space">THROUGHPUT</h2>
<p className="text-gray-600 text-center font-fira">
(HIGHER IS BETTER)
</p>
<div className="pb-1 w-full border-b border-gray-400"></div>
<p className="pt-1 text-lg font-semibold text-center">
<p className="pt-1 text-lg font-semibold text-center font-fira">
Execute{" "}
<span className="text-purple-600 font-bold">
<span className="text-[#FF66B3] font-bold">
{throughputRatio ? throughputRatio : ""}x
</span>{" "}
more queries with the same hardware
Expand All @@ -414,13 +416,12 @@ export default function DashBoard() {
className="bg-muted/50 rounded-xl p-4 min-h-0 w-full flex flex-col items-center justify-between"
id="memory-chart"
>
<h2 className="text-2xl font-bold text-center">
<h2 className="text-2xl font-bold text-center font-space">
MEMORY USAGE
</h2>
<p className="text-gray-600 text-center">(LOWER IS BETTER)</p>
<div className="pb-1 w-full border-b border-gray-400"></div>
<p className="pt-1 text-lg font-semibold text-center">
<span className="text-purple-600 font-bold">
<p className="text-gray-600 text-center font-fira">(LOWER IS BETTER)</p>
<p className="pt-1 text-lg font-semibold text-center font-fira">
<span className="text-[#FF66B3] font-bold">
{memoryUsageRatio ? memoryUsageRatio : ""}x
</span>{" "}
Better performance, lower overall costs
Expand Down
Loading