Skip to content

Commit

Permalink
Merge pull request #54 from FalkorDB/staging
Browse files Browse the repository at this point in the history
Staging
  • Loading branch information
Naseem77 authored Feb 20, 2025
2 parents 5ff01c9 + c760463 commit c78cd7d
Show file tree
Hide file tree
Showing 4 changed files with 39 additions and 34 deletions.
35 changes: 19 additions & 16 deletions ui/app/components/ContactUsSheet.tsx
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
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
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
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

0 comments on commit c78cd7d

Please sign in to comment.