Skip to content

Commit

Permalink
fix : Responsive compare page
Browse files Browse the repository at this point in the history 
Signed-off-by: vishal mishra <vishal.mishra9470@gmail.com>
  • Loading branch information
@vishalmishraa
vishalmishraa committed Jun 25, 2024
1 parent a2fabb9 commit 623bb40
Show file tree
Hide file tree
Showing 4 changed files with 153 additions and 34 deletions.
56 changes: 29 additions & 27 deletions website/src/common/Macrobench.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,11 +19,12 @@ import PropTypes from 'prop-types';
import { Link } from "react-router-dom";
import { formatByte, fixed, secondToMicrosecond } from "../utils/Utils";
import {twMerge} from "tailwind-merge";
import { Table, TableBody, TableHead, TableHeader,TableRow, } from "../components/ui/table";

export default function Macrobench({ data, gitRef, commits }) {
return (
<div className="w-full border border-primary rounded-xl relative shadow-lg">
<div className="p-5 flex flex-col gap-y-3">
<div className="pt-2 pl-2 md:p-4 flex flex-col gap-y-3">
<h3 className="text-start text-3xl font-medium">{data.type}</h3>
<span className="flex gap-x-1">
Click
Expand All @@ -33,45 +34,46 @@ export default function Macrobench({ data, gitRef, commits }) {
>
here
</Link>
to see the query plans comparison for this benchmark.
to see the query plans comparison
<span className="hidden md:block">
for this benchmark.
</span>
</span>
<span className="md:hidden">
for this benchmark.
</span>
</div>

<table>
<thead>
<tr>
<th />
<th>
<Table className="text-base">
<TableHeader>
<TableRow>
<TableHead className="text-center">
<h1>{" "}</h1>
</TableHead>
<TableHead className="text-center">
<Link
target="_blank"
to={`https://github.com/vitessio/vitess/commit/${commits.old}`}
className="text-primary"
className="text-primary font-bold"
>
{gitRef.old || "Old"}
</Link>
</th>
<th>
</TableHead>
<TableHead className="text-center font-medium">
<Link
target="_blank"
to={`https://github.com/vitessio/vitess/commit/${commits.new}`}
className="text-primary"
className="text-primary font-bold"
>
{gitRef.new || "New"}
</Link>
</th>
<th>
<h4>P</h4>
</th>
<th>
<h4>Delta</h4>
</th>
<th>
<h4>Significant</h4>
</th>
</tr>
</thead>

<tbody>
</TableHead>
<TableHead className="text-center text-white font-bold"><h4>P</h4></TableHead>
<TableHead className="text-center text-white font-bold"><h4>Delta</h4></TableHead>
<TableHead className="text-center text-white font-bold "><h4>Significant</h4></TableHead>
</TableRow>
</TableHeader>
<TableBody>
<Row
title={"QPS Total"}
oldVal={data.result.total_qps.old}
Expand Down Expand Up @@ -200,8 +202,8 @@ export default function Macrobench({ data, gitRef, commits }) {
p={fixed(data.result.components_mem_stats_alloc_bytes.vttablet.p, 3)}
fmt={"memory"}
/>
</tbody>
</table>
</TableBody>
</Table>
</div>
);
}
Expand Down
117 changes: 117 additions & 0 deletions website/src/components/ui/table.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,117 @@
import * as React from "react"

import { cn } from "@/library/utils"

const Table = React.forwardRef<
HTMLTableElement,
React.HTMLAttributes<HTMLTableElement>
>(({ className, ...props }, ref) => (
<div className="relative w-full overflow-auto">
<table
ref={ref}
className={cn("w-full caption-bottom text-sm", className)}
{...props}
/>
</div>
))
Table.displayName = "Table"

const TableHeader = React.forwardRef<
HTMLTableSectionElement,
React.HTMLAttributes<HTMLTableSectionElement>
>(({ className, ...props }, ref) => (
<thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
))
TableHeader.displayName = "TableHeader"

const TableBody = React.forwardRef<
HTMLTableSectionElement,
React.HTMLAttributes<HTMLTableSectionElement>
>(({ className, ...props }, ref) => (
<tbody
ref={ref}
className={cn("[&_tr:last-child]:border-0", className)}
{...props}
/>
))
TableBody.displayName = "TableBody"

const TableFooter = React.forwardRef<
HTMLTableSectionElement,
React.HTMLAttributes<HTMLTableSectionElement>
>(({ className, ...props }, ref) => (
<tfoot
ref={ref}
className={cn(
"border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
className
)}
{...props}
/>
))
TableFooter.displayName = "TableFooter"

const TableRow = React.forwardRef<
HTMLTableRowElement,
React.HTMLAttributes<HTMLTableRowElement>
>(({ className, ...props }, ref) => (
<tr
ref={ref}
className={cn(
"border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
className
)}
{...props}
/>
))
TableRow.displayName = "TableRow"

const TableHead = React.forwardRef<
HTMLTableCellElement,
React.ThHTMLAttributes<HTMLTableCellElement>
>(({ className, ...props }, ref) => (
<th
ref={ref}
className={cn(
"h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
className
)}
{...props}
/>
))
TableHead.displayName = "TableHead"

const TableCell = React.forwardRef<
HTMLTableCellElement,
React.TdHTMLAttributes<HTMLTableCellElement>
>(({ className, ...props }, ref) => (
<td
ref={ref}
className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
{...props}
/>
))
TableCell.displayName = "TableCell"

const TableCaption = React.forwardRef<
HTMLTableCaptionElement,
React.HTMLAttributes<HTMLTableCaptionElement>
>(({ className, ...props }, ref) => (
<caption
ref={ref}
className={cn("mt-4 text-sm text-muted-foreground", className)}
{...props}
/>
))
TableCaption.displayName = "TableCaption"

export {
Table,
TableHeader,
TableBody,
TableFooter,
TableHead,
TableRow,
TableCell,
TableCaption,
}
8 changes: 4 additions & 4 deletions website/src/pages/ComparePage/ComparePage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ import useApiCall from "../../utils/Hook";
import Hero from "./components/Hero";
import Macrobench from "../../common/Macrobench";
import { CompareData } from '@/types'

export default function Compare() {
const urlParams = new URLSearchParams(window.location.search);

Expand Down Expand Up @@ -63,12 +63,12 @@ export default function Compare() {
)}

{!isMacrobenchLoading && !macrobenchTextLoading && compareData && compareData.length > 0 && (
<section className="flex flex-col items-center">
<h3 className="my-6 text-primary text-2xl">Macro Benchmarks</h3>
<section>
<h3 className="my-6 flex justify-center text-primary text-2xl">Macro Benchmarks</h3>
<div className="flex flex-col gap-y-20">
{compareData.map((macro, index) => {
return (
<div key={index}>
<div key={index} className="mb-20">
<Macrobench
data={macro}
gitRef={{
Expand Down
6 changes: 3 additions & 3 deletions website/src/pages/ComparePage/components/Hero.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,11 +20,11 @@ export default function Hero(props: { gitRef: any; setGitRef: any }) {
const { gitRef, setGitRef } = props;

return (
<section className="flex flex-col h-[32vh] pt-[8vh] justify-center items-center">
<section className="flex flex-col h-[32vh] pt-[2vh] md:pt-[8vh] justify-center items-center">
<h1 className="mb-3 text-front text-opacity-70">
Enter SHAs to compare commits
</h1>
<div className="flex overflow-hidden bg-gradient-to-br from-primary to-theme p-[2px] rounded-full">
<div className="flex overflow-hidden bg-gradient-to-br from-primary to-theme p-[1px] md:p-[2px] rounded-full">
<ComparisonInput
name="old"
className="rounded-l-full"
Expand Down Expand Up @@ -56,7 +56,7 @@ function ComparisonInput(props: {
name={name}
className={twMerge(
className,
"relative text-xl px-6 py-2 bg-background focus:border-none focus:outline-none border border-primary"
"relative md:text-xl text-center text-base md:px-6 md:py-2 py-1 bg-background focus:border-none focus:outline-none border border-primary"
)}
defaultValue={gitRef[name]}
placeholder={`${name} SHA`}
Expand Down

0 comments on commit 623bb40

Please sign in to comment.