Skip to content

Commit 577b010

Browse files
anuragxxdanuragxxd
committed
fix: datasets ui
1 parent 12eb26e commit 577b010

2 files changed

Lines changed: 119 additions & 50 deletions

File tree

‎packages/ecc-client-ga4gh-drs/src/components/object/object.ts‎

Lines changed: 95 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -168,28 +168,80 @@ export class ECCClientGa4ghDrsObject extends LitElement {
168168

169169
return html`
170170
<div class="mb-6">
171-
<div class="w-full flex flex-col gap-2">
172-
<div class="flex flex-col md:flex-row md:items-center gap-2">
173-
<h2 class="text-xl truncate">
174-
${this.object.name || this.object.id}
175-
</h2>
176-
</div>
171+
<div class="w-full flex flex-col gap-3">
172+
<div
173+
class="flex flex-col gap-2 md:flex-row md:items-start md:justify-between"
174+
>
175+
<div class="flex flex-col gap-2">
176+
<div class="flex flex-col md:flex-row md:items-center gap-2">
177+
<h2 class="text-xl truncate">
178+
${this.object.name || this.object.id}
179+
</h2>
180+
</div>
181+
182+
<div class="flex flex-wrap gap-2 items-center">
183+
${this.object.mime_type
184+
? html`
185+
<ecc-utils-design-badge variant="outline">
186+
${this.object.mime_type}
187+
</ecc-utils-design-badge>
188+
`
189+
: ""}
190+
${this.object.version
191+
? html`
192+
<ecc-utils-design-badge variant="outline">
193+
v${this.object.version}
194+
</ecc-utils-design-badge>
195+
`
196+
: ""}
197+
</div>
198+
</div>
177199
178-
<div class="flex flex-wrap gap-2 items-center">
179-
${this.object.mime_type
180-
? html`
181-
<ecc-utils-design-badge variant="outline">
182-
${this.object.mime_type}
183-
</ecc-utils-design-badge>
184-
`
185-
: ""}
186-
${this.object.version
187-
? html`
188-
<ecc-utils-design-badge variant="outline">
189-
v${this.object.version}
190-
</ecc-utils-design-badge>
191-
`
192-
: ""}
200+
<div
201+
class="flex flex-row flex-wrap items-center gap-4 text-xs text-muted-foreground md:justify-end"
202+
>
203+
<div class="flex items-center gap-1.5">
204+
<svg
205+
class="h-3.5 w-3.5"
206+
viewBox="0 0 24 24"
207+
fill="none"
208+
stroke="currentColor"
209+
stroke-width="2"
210+
stroke-linecap="round"
211+
stroke-linejoin="round"
212+
aria-hidden="true"
213+
>
214+
<ellipse cx="12" cy="5" rx="9" ry="3"></ellipse>
215+
<path d="M3 5v14c0 1.66 4.03 3 9 3s9-1.34 9-3V5"></path>
216+
<path d="M3 12c0 1.66 4.03 3 9 3s9-1.34 9-3"></path>
217+
</svg>
218+
<span>
219+
Size
220+
${ECCClientGa4ghDrsObject.formatFileSize(this.object.size)}
221+
</span>
222+
</div>
223+
<div class="flex items-center gap-1.5">
224+
<svg
225+
class="h-3.5 w-3.5"
226+
viewBox="0 0 24 24"
227+
fill="none"
228+
stroke="currentColor"
229+
stroke-width="2"
230+
stroke-linecap="round"
231+
stroke-linejoin="round"
232+
aria-hidden="true"
233+
>
234+
<circle cx="12" cy="12" r="10"></circle>
235+
<path d="M12 6v6l4 2"></path>
236+
</svg>
237+
<span>
238+
Created
239+
${ECCClientGa4ghDrsObject.formatShortDate(
240+
this.object.created_time
241+
)}
242+
</span>
243+
</div>
244+
</div>
193245
</div>
194246
</div>
195247
</div>
@@ -258,7 +310,7 @@ export class ECCClientGa4ghDrsObject extends LitElement {
258310
<div class="mt-4">
259311
<div class="flex flex-col gap-4 text-sm">
260312
<div class="flex flex-col gap-2">
261-
<div class="font-bold text-base">Object Information</div>
313+
<div class="font-bold text-base">Dataset Information</div>
262314
<div class="flex flex-col gap-3">
263315
${this.object.description
264316
? html`
@@ -567,6 +619,18 @@ export class ECCClientGa4ghDrsObject extends LitElement {
567619
}
568620
}
569621

622+
private static formatShortDate(dateString: string): string {
623+
try {
624+
return new Date(dateString).toLocaleDateString(undefined, {
625+
month: "short",
626+
day: "numeric",
627+
year: "numeric",
628+
});
629+
} catch {
630+
return dateString;
631+
}
632+
}
633+
570634
render() {
571635
if (!this.baseUrl && !this.provider) {
572636
return html`
@@ -607,29 +671,29 @@ export class ECCClientGa4ghDrsObject extends LitElement {
607671
${this.renderObjectHeader()}
608672
609673
<ecc-utils-design-tabs
610-
default-value="overview"
674+
default-value="contents"
611675
class="part:mb-6 part:w-full"
612676
>
613677
<ecc-utils-design-tabs-list class="part:w-full">
614678
<ecc-utils-design-tabs-trigger
615-
value="overview"
679+
value="contents"
616680
class="part:flex-1 flex-1"
617-
>Overview</ecc-utils-design-tabs-trigger
681+
>Contents</ecc-utils-design-tabs-trigger
618682
>
619683
<ecc-utils-design-tabs-trigger
620-
value="contents"
684+
value="details"
621685
class="part:flex-1 flex-1"
622-
>Contents & Access</ecc-utils-design-tabs-trigger
686+
>Details</ecc-utils-design-tabs-trigger
623687
>
624688
</ecc-utils-design-tabs-list>
625689
626-
<ecc-utils-design-tabs-content value="overview">
627-
${this.renderOverviewTab()}
628-
</ecc-utils-design-tabs-content>
629-
630690
<ecc-utils-design-tabs-content value="contents">
631691
<slot name="contents"> ${this.renderContentsTab()} </slot>
632692
</ecc-utils-design-tabs-content>
693+
694+
<ecc-utils-design-tabs-content value="details">
695+
${this.renderOverviewTab()}
696+
</ecc-utils-design-tabs-content>
633697
</ecc-utils-design-tabs>
634698
</div>
635699
`;

‎packages/ecc-client-ga4gh-drs/src/components/objects-list/objects.ts‎

Lines changed: 24 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -374,18 +374,28 @@ export class ECCClientGa4ghDrsObjects extends LitElement {
374374
<div class="flex flex-col gap-4">
375375
${this.search
376376
? html`
377-
<div class="flex flex-wrap gap-4 items-end">
378-
<div class="flex-1 flex flex-col gap-1">
379-
<ecc-utils-design-label
380-
>Search Objects</ecc-utils-design-label
377+
<div class="mb-2 flex items-center gap-4">
378+
<div class="relative flex-1">
379+
<svg
380+
class="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground pointer-events-none"
381+
xmlns="http://www.w3.org/2000/svg"
382+
width="24"
383+
height="24"
384+
viewBox="0 0 24 24"
385+
fill="none"
386+
stroke="currentColor"
387+
stroke-width="2"
388+
stroke-linecap="round"
389+
stroke-linejoin="round"
381390
>
382-
<div class="flex">
383-
<ecc-utils-design-input
384-
class="part:w-full w-full"
385-
placeholder="Search by object name or ID..."
386-
@ecc-input-changed=${this.handleSearch}
387-
></ecc-utils-design-input>
388-
</div>
391+
<circle cx="11" cy="11" r="8" />
392+
<path d="m21 21-4.3-4.3" />
393+
</svg>
394+
<ecc-utils-design-input
395+
class="part:w-full part:pl-10 w-full"
396+
placeholder="Search datasets..."
397+
@ecc-input-changed=${this.handleSearch}
398+
></ecc-utils-design-input>
389399
</div>
390400
</div>
391401
`
@@ -404,7 +414,7 @@ export class ECCClientGa4ghDrsObjects extends LitElement {
404414
<ecc-utils-design-table-header>
405415
<ecc-utils-design-table-row>
406416
<ecc-utils-design-table-head class="w-6/12"
407-
>Object Info</ecc-utils-design-table-head
417+
>Name</ecc-utils-design-table-head
408418
>
409419
<ecc-utils-design-table-head class="w-2/12"
410420
>Size</ecc-utils-design-table-head
@@ -429,7 +439,7 @@ export class ECCClientGa4ghDrsObjects extends LitElement {
429439
colspan="5"
430440
class="part:text-center part:py-8 part:text-muted-foreground"
431441
>
432-
No objects found
442+
No datasets found
433443
</ecc-utils-design-table-cell>
434444
</ecc-utils-design-table-row>
435445
`;
@@ -438,7 +448,7 @@ export class ECCClientGa4ghDrsObjects extends LitElement {
438448
(object) => html`
439449
<ecc-utils-design-table-row>
440450
<ecc-utils-design-table-cell class="w-6/12">
441-
<div class="flex flex-col w-full">
451+
<div class="flex flex-col w-full my-1.5">
442452
<ecc-utils-design-button
443453
class="part:font-medium part:text-primary part:w-fit part:cursor-pointer part:p-0"
444454
variant="link"
@@ -453,11 +463,6 @@ export class ECCClientGa4ghDrsObjects extends LitElement {
453463
${object.description}
454464
</div>`
455465
: ""}
456-
${object.mime_type
457-
? html`<div class="text-xs text-muted-foreground">
458-
MIME: ${object.mime_type}
459-
</div>`
460-
: ""}
461466
</div>
462467
</ecc-utils-design-table-cell>
463468
<ecc-utils-design-table-cell class="w-2/12">

0 commit comments

Comments
 (0)