Skip to content

Commit e1f9fb6

Browse files
Mikadowsangristan
Mikadows
authored and
angristan
committed
feat(ui): refactoring layout
leaderboard in panel and size of components
1 parent e750cf1 commit e1f9fb6

File tree

3 files changed

+148
-29
lines changed

3 files changed

+148
-29
lines changed

‎src/components/Benchmarks/BenchmarkDetail.tsx

Lines changed: 92 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Listbox, Transition } from '@headlessui/react';
1+
import { Dialog, Listbox, Transition } from '@headlessui/react';
22
import { CheckIcon, SelectorIcon } from '@heroicons/react/solid';
33
import Editor from '@monaco-editor/react';
44
import React, { Fragment, useRef, useState } from 'react';
@@ -13,6 +13,7 @@ import Header from '../Page/Header';
1313
import Page from '../Page/Page';
1414
import Leaderboard from '../leaderboard/Leaderboard';
1515
import { languagesList } from '../../assets/languages';
16+
import { XIcon } from '@heroicons/react/outline';
1617

1718
function classNames(...classes: string[]) {
1819
return classes.filter(Boolean).join(' ');
@@ -28,6 +29,7 @@ const BenchmarkDetail = ({
2829
match,
2930
}: RouteComponentProps<BenchmarkDetailParams>) => {
3031
const [selected, setSelected] = useState(languages[0]);
32+
const [open, setOpen] = useState(false);
3133

3234
//Get monaco instance to access code later
3335
const editorRef: any = useRef<null>(null);
@@ -103,15 +105,84 @@ const BenchmarkDetail = ({
103105
lastSubmission = lastSubmissionData.code;
104106
}
105107

108+
function openLeaderboardPanel() {
109+
setOpen(true);
110+
}
111+
106112
return (
107113
<Page>
114+
{/*Leaderboard side panel*/}
115+
<Transition.Root show={open} as={Fragment}>
116+
<Dialog
117+
as="div"
118+
static
119+
className="fixed inset-0 overflow-hidden"
120+
open={open}
121+
onClose={setOpen}
122+
>
123+
<div className="absolute inset-0 overflow-hidden">
124+
<Transition.Child
125+
as={Fragment}
126+
enter="ease-in-out duration-500"
127+
enterFrom="opacity-0"
128+
enterTo="opacity-100"
129+
leave="ease-in-out duration-500"
130+
leaveFrom="opacity-100"
131+
leaveTo="opacity-0"
132+
>
133+
<Dialog.Overlay className="absolute inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
134+
</Transition.Child>
135+
<div className="fixed inset-y-0 right-0 pl-10 max-w-full flex">
136+
<Transition.Child
137+
as={Fragment}
138+
enter="transform transition ease-in-out duration-500 sm:duration-700"
139+
enterFrom="translate-x-full"
140+
enterTo="translate-x-0"
141+
leave="transform transition ease-in-out duration-500 sm:duration-700"
142+
leaveFrom="translate-x-0"
143+
leaveTo="translate-x-full"
144+
>
145+
<div className="relative w-screen md:w-auto">
146+
<Transition.Child
147+
as={Fragment}
148+
enter="ease-in-out duration-500"
149+
enterFrom="opacity-0"
150+
enterTo="opacity-100"
151+
leave="ease-in-out duration-500"
152+
leaveFrom="opacity-100"
153+
leaveTo="opacity-0"
154+
>
155+
<div className="absolute top-0 left-0 -ml-8 pt-4 pr-2 flex sm:-ml-10 sm:pr-4">
156+
<button
157+
className="rounded-md text-gray-300 hover:text-white focus:outline-none focus:ring-2 focus:ring-white"
158+
onClick={() => setOpen(false)}
159+
>
160+
<span className="sr-only">Close panel</span>
161+
<XIcon className="h-6 w-6" aria-hidden="true" />
162+
</button>
163+
</div>
164+
</Transition.Child>
165+
<div className="h-full flex flex-col py-6 bg-white shadow-xl overflow-hidden">
166+
<div className="relative flex-1 px-4 sm:px-6">
167+
<Leaderboard
168+
benchmarkId={benchmarkData?.id ? benchmarkData.id : ''}
169+
/>
170+
</div>
171+
</div>
172+
</div>
173+
</Transition.Child>
174+
</div>
175+
</div>
176+
</Dialog>
177+
</Transition.Root>
178+
108179
<Header
109-
title={benchmarkData?.title || 'eee'}
180+
title={benchmarkData?.title || 'Failed to load benchmark'}
110181
button="Back"
111182
navTo="/benchmarks"
112183
/>
113-
<div className="flex p-4 overflow-hidden">
114-
<div className="grid flex-1">
184+
<div className="flex p-4 overflow-hidden ">
185+
<div className="grid w-2/5">
115186
<div className="pl-8 pr-8 border-4 border-dashed border-gray-200 rounded-lg h-96 p-4">
116187
<div className="flex justify-between">
117188
<h1 className="text-2xl pb-3">Subject</h1>
@@ -151,7 +222,7 @@ const BenchmarkDetail = ({
151222
>
152223
<Listbox.Options
153224
static
154-
className="absolute z-10 mt-1 w-full bg-white shadow-lg max-h-56 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm"
225+
className="absolute z-10 mt-1 w-full bg-white shadow-lg max-h-96 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm"
155226
>
156227
{languages.map((language) => (
157228
<Listbox.Option
@@ -214,17 +285,27 @@ const BenchmarkDetail = ({
214285
</div>
215286
</div>
216287
<ReactMarkdown>{benchmarkData?.subject || ''}</ReactMarkdown>
288+
<div className="flex">
289+
<button
290+
className="bg-blue-500 hover:bg-blue-700 text-white font-bold mt-2 py-2 px-4 rounded"
291+
onClick={openLeaderboardPanel}
292+
>
293+
See Leaderboard
294+
</button>
295+
</div>
217296
</div>
218297
</div>
219-
<div className="grid flex-1">
220-
<div className="bg-gray-500 rounded-lg h-96">
298+
<div className="grid w-3/5">
299+
<div className="bg-gray-500 h-96">
221300
<Editor
222301
onMount={handleEditorDidMount}
223302
height="100%"
224303
value={lastSubmission && lastSubmission}
225304
language={selected.name}
226305
/>
227-
<div className="grid justify-items-stretch">
306+
</div>
307+
<div className="grid justify-items-end">
308+
<div className="flex">
228309
<button
229310
className="justify-self-end bg-blue-500 hover:bg-blue-700 text-white font-bold mt-2 py-2 px-4 rounded"
230311
onClick={() => {
@@ -239,11 +320,12 @@ const BenchmarkDetail = ({
239320
Run code
240321
</button>
241322
</div>
242-
<div className="justify-self-start ml-10">{result && result}</div>
243323
</div>
244324
</div>
245-
<Leaderboard benchmarkId={benchmarkData?.id ? benchmarkData.id : ''} />
325+
326+
{/*<Leaderboard benchmarkId={benchmarkData?.id ? benchmarkData.id : ''} />*/}
246327
</div>
328+
<div className="justify-self-start ml-10">{result && result}</div>
247329
</Page>
248330
);
249331
};

‎src/components/Benchmarks/Result.tsx

Lines changed: 22 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -22,27 +22,30 @@ const Result: React.FC<LayoutProps> = ({
2222
lintScore,
2323
}) => {
2424
return (
25-
<div>
26-
<b>Status: </b>
27-
{status}
28-
<div className="flex justify-between">
29-
<b>Execution duration (μs): </b>
30-
<div
31-
className={
32-
execDuration == null || execDuration === 0
33-
? 'animate-pulse h w-48 bg-gray-800 rounded-lg text-white text-cente'
34-
: 'h w-48 bg-gray-800 rounded-lg text-white text-cente'
35-
}
36-
>
37-
{execDuration === 0 ? null : execDuration}
25+
<div className="flex">
26+
<div className="w-1/3">
27+
<ScoresComponent qualityScore={qualityScore} lintScore={lintScore} />
28+
</div>
29+
<div className="w-2/3">
30+
<b>Status: </b>
31+
{status}
32+
<div className="flex justify-between">
33+
<b>Execution duration (μs): </b>
34+
<div
35+
className={
36+
execDuration == null || execDuration === 0
37+
? 'animate-pulse h w-48 bg-gray-800 rounded-lg text-white text-cente'
38+
: 'h w-48 bg-gray-800 rounded-lg text-white text-cente'
39+
}
40+
>
41+
{execDuration === 0 ? null : execDuration}
42+
</div>
3843
</div>
44+
<OutputsComponent text={'Message'} value={message} />
45+
<OutputsComponent text={'Error'} value={error} />
46+
<OutputsComponent text={'Stdout'} value={stdout} />
47+
<OutputsComponent text={'Stderr'} value={stderr} />
3948
</div>
40-
<OutputsComponent text={'Message'} value={message} />
41-
<OutputsComponent text={'Error'} value={error} />
42-
<OutputsComponent text={'Stdout'} value={stdout} />
43-
<OutputsComponent text={'Stderr'} value={stderr} />
44-
45-
<ScoresComponent qualityScore={qualityScore} lintScore={lintScore} />
4649
</div>
4750
);
4851
};

‎src/components/leaderboard/Leaderboard.tsx

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -198,6 +198,34 @@ const Leaderboard: React.FC<LeaderboardProps> = ({ benchmarkId }) => {
198198
/>
199199
</div>
200200
</th>
201+
<th
202+
scope="col"
203+
className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
204+
onClick={() => setSortedField('lintScore')}
205+
>
206+
<div className="flex">
207+
Memory usage
208+
<img
209+
className="w-4 h-4 ml-2"
210+
alt="Sort by lint score"
211+
src="https://image.flaticon.com/icons/png/512/162/162735.png"
212+
/>
213+
</div>
214+
</th>
215+
<th
216+
scope="col"
217+
className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
218+
onClick={() => setSortedField('lintScore')}
219+
>
220+
<div className="flex">
221+
Exec time
222+
<img
223+
className="w-4 h-4 ml-2"
224+
alt="Sort by lint score"
225+
src="https://image.flaticon.com/icons/png/512/162/162735.png"
226+
/>
227+
</div>
228+
</th>
201229
</tr>
202230
</thead>
203231
<tbody className="bg-white divide-y divide-gray-200 ">
@@ -251,6 +279,12 @@ const Leaderboard: React.FC<LeaderboardProps> = ({ benchmarkId }) => {
251279
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
252280
{row.lintScore}
253281
</td>
282+
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
283+
{/*{row.lintScore}*/}
284+
</td>
285+
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
286+
{/*{row.lintScore}*/}
287+
</td>
254288
</tr>
255289
))
256290
: ''}

0 commit comments

Comments
 (0)