Skip to content

Commit fd3f0d0

Browse files
anuragxxdanuragxxd
committed
fix: drs components
1 parent 731676d commit fd3f0d0

File tree

7 files changed

+160
-175
lines changed

7 files changed

+160
-175
lines changed

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

Lines changed: 149 additions & 150 deletions
Original file line numberDiff line numberDiff line change
@@ -366,164 +366,172 @@ export class ECCClientGa4ghDrsObject extends LitElement {
366366
`;
367367
}
368368

369-
private renderAccessMethodsTab() {
370-
if (
371-
!this.object ||
372-
!this.object.access_methods ||
373-
this.object.access_methods.length === 0
374-
) {
375-
return html`
376-
<div class="mt-4">
377-
<ecc-utils-design-card>
378-
<ecc-utils-design-card-content>
379-
<p class="text-muted-foreground">
380-
No access methods available for this object
381-
</p>
382-
</ecc-utils-design-card-content>
383-
</ecc-utils-design-card>
384-
</div>
385-
`;
386-
}
369+
private renderContentsTab() {
370+
if (!this.object) return html``;
387371

388-
return html`
389-
<div class="mt-4">
390-
<div class="space-y-4">
391-
${this.object.access_methods.map(
392-
(method) => html`
393-
<ecc-utils-design-card>
394-
<ecc-utils-design-card-content>
395-
<div class="flex flex-col gap-4">
396-
<div class="flex justify-between items-center">
397-
<div class="flex items-center gap-2">
398-
<ecc-utils-design-badge variant="default">
399-
${method.type.toUpperCase()}
400-
</ecc-utils-design-badge>
401-
${method.region
402-
? html`
403-
<ecc-utils-design-badge variant="outline">
404-
${method.region}
405-
</ecc-utils-design-badge>
406-
`
407-
: ""}
408-
</div>
409-
</div>
372+
const { object } = this; // Fix for TypeScript null checks
373+
const hasContents = object.contents && object.contents.length > 0;
374+
const hasAccessMethods =
375+
object.access_methods && object.access_methods.length > 0;
410376

411-
${method.access_url
412-
? html`
413-
<div>
414-
<strong>Direct URL:</strong>
415-
<div
416-
class="mt-1 p-2 bg-muted rounded font-mono text-sm break-all"
417-
>
418-
<a
419-
href="${method.access_url.url}"
420-
target="_blank"
421-
rel="noopener noreferrer"
422-
class="text-primary hover:underline"
423-
>
424-
${method.access_url.url}
425-
</a>
426-
</div>
427-
${method.access_url.headers &&
428-
method.access_url.headers.length > 0
429-
? html`
430-
<div class="mt-2">
431-
<strong>Headers:</strong>
432-
<ul class="mt-1 text-sm">
433-
${method.access_url.headers.map(
434-
(header) =>
435-
html`<li class="font-mono">
436-
${header}
437-
</li>`
438-
)}
439-
</ul>
440-
</div>
441-
`
442-
: ""}
443-
</div>
444-
`
445-
: ""}
446-
${method.access_id
447-
? html`
448-
<div>
449-
<strong>Access ID:</strong>
450-
<div class="mt-1 flex gap-2 items-center">
451-
<span class="font-mono text-sm"
452-
>${method.access_id}</span
453-
>
454-
<ecc-utils-design-button
455-
size="sm"
456-
variant="outline"
457-
?disabled=${this.loadingAccess[
458-
method.access_id
459-
]}
460-
@click=${() =>
461-
this.getAccessURL(method.access_id!)}
462-
>
463-
${this.loadingAccess[method.access_id]
464-
? "Loading..."
465-
: "Get Access URL"}
466-
</ecc-utils-design-button>
377+
return html`
378+
<div class="mt-4 space-y-6">
379+
<!-- Access Methods Section -->
380+
${hasAccessMethods
381+
? html`
382+
<div>
383+
<h3 class="text-lg font-semibold mb-4">Access Methods</h3>
384+
<div class="space-y-4">
385+
${object.access_methods!.map(
386+
(method) => html`
387+
<ecc-utils-design-card>
388+
<ecc-utils-design-card-content>
389+
<div class="flex flex-col gap-4">
390+
<div class="flex justify-between items-center">
391+
<div class="flex items-center gap-2">
392+
<ecc-utils-design-badge variant="default">
393+
${method.type.toUpperCase()}
394+
</ecc-utils-design-badge>
395+
${method.region
396+
? html`
397+
<ecc-utils-design-badge variant="outline">
398+
${method.region}
399+
</ecc-utils-design-badge>
400+
`
401+
: ""}
402+
</div>
467403
</div>
468-
${this.accessUrls[method.access_id]
404+
405+
${method.access_url
469406
? html`
470-
<div class="mt-2 p-2 bg-muted rounded">
471-
<strong>Access URL:</strong>
407+
<div>
408+
<strong>Direct URL:</strong>
472409
<div
473-
class="mt-1 font-mono text-sm break-all"
410+
class="mt-1 p-2 bg-muted rounded font-mono text-sm break-all"
474411
>
475412
<a
476-
href="${this.accessUrls[
477-
method.access_id
478-
].url}"
413+
href="${method.access_url.url}"
479414
target="_blank"
480415
rel="noopener noreferrer"
481416
class="text-primary hover:underline"
482417
>
483-
${this.accessUrls[method.access_id].url}
418+
${method.access_url.url}
484419
</a>
485420
</div>
421+
${method.access_url.headers &&
422+
method.access_url.headers.length > 0
423+
? html`
424+
<div class="mt-2">
425+
<strong>Headers:</strong>
426+
<ul class="mt-1 text-sm">
427+
${method.access_url.headers.map(
428+
(header) =>
429+
html`<li class="font-mono">
430+
${header}
431+
</li>`
432+
)}
433+
</ul>
434+
</div>
435+
`
436+
: ""}
437+
</div>
438+
`
439+
: ""}
440+
${method.access_id
441+
? html`
442+
<div>
443+
<strong>Access ID:</strong>
444+
<div class="mt-1 flex gap-2 items-center">
445+
<span class="font-mono text-sm"
446+
>${method.access_id}</span
447+
>
448+
<ecc-utils-design-button
449+
size="sm"
450+
variant="outline"
451+
?disabled=${this.loadingAccess[
452+
method.access_id
453+
]}
454+
@click=${() =>
455+
this.getAccessURL(method.access_id!)}
456+
>
457+
${this.loadingAccess[method.access_id]
458+
? "Loading..."
459+
: "Get Access URL"}
460+
</ecc-utils-design-button>
461+
</div>
462+
${this.accessUrls[method.access_id]
463+
? html`
464+
<div
465+
class="mt-2 p-2 bg-muted rounded"
466+
>
467+
<strong>Access URL:</strong>
468+
<div
469+
class="mt-1 font-mono text-sm break-all"
470+
>
471+
<a
472+
href="${this.accessUrls[
473+
method.access_id
474+
].url}"
475+
target="_blank"
476+
rel="noopener noreferrer"
477+
class="text-primary hover:underline"
478+
>
479+
${this.accessUrls[
480+
method.access_id
481+
].url}
482+
</a>
483+
</div>
484+
</div>
485+
`
486+
: ""}
486487
</div>
487488
`
488489
: ""}
489490
</div>
490-
`
491-
: ""}
492-
</div>
493-
</ecc-utils-design-card-content>
494-
</ecc-utils-design-card>
491+
</ecc-utils-design-card-content>
492+
</ecc-utils-design-card>
493+
`
494+
)}
495+
</div>
496+
</div>
495497
`
496-
)}
497-
</div>
498-
</div>
499-
`;
500-
}
501-
502-
private renderContentsTab() {
503-
if (
504-
!this.object ||
505-
!this.object.contents ||
506-
this.object.contents.length === 0
507-
) {
508-
return html`
509-
<div class="mt-4">
510-
<ecc-utils-design-card>
511-
<ecc-utils-design-card-content>
512-
<p class="text-muted-foreground">
513-
This object does not contain any bundle contents
514-
</p>
515-
</ecc-utils-design-card-content>
516-
</ecc-utils-design-card>
517-
</div>
518-
`;
519-
}
498+
: html`
499+
<div>
500+
<h3 class="text-lg font-semibold mb-4">Access Methods</h3>
501+
<ecc-utils-design-card>
502+
<ecc-utils-design-card-content>
503+
<p class="text-muted-foreground">
504+
No access methods available for this object
505+
</p>
506+
</ecc-utils-design-card-content>
507+
</ecc-utils-design-card>
508+
</div>
509+
`}
520510
521-
return html`
522-
<div class="mt-4">
523-
<div class="font-mono text-sm space-y-1">
524-
${this.object.contents.map((content) =>
525-
this.renderContentItem(content, 0)
526-
)}
511+
<!-- Bundle Contents Section -->
512+
<div>
513+
<h3 class="text-lg font-semibold mb-4">Bundle Contents</h3>
514+
${hasContents
515+
? html`
516+
<ecc-utils-design-card>
517+
<ecc-utils-design-card-content>
518+
<div class="font-mono text-sm space-y-1">
519+
${object.contents!.map((content) =>
520+
this.renderContentItem(content, 0)
521+
)}
522+
</div>
523+
</ecc-utils-design-card-content>
524+
</ecc-utils-design-card>
525+
`
526+
: html`
527+
<ecc-utils-design-card>
528+
<ecc-utils-design-card-content>
529+
<p class="text-muted-foreground">
530+
This object does not contain any bundle contents
531+
</p>
532+
</ecc-utils-design-card-content>
533+
</ecc-utils-design-card>
534+
`}
527535
</div>
528536
</div>
529537
`;
@@ -616,28 +624,19 @@ export class ECCClientGa4ghDrsObject extends LitElement {
616624
class="part:flex-1 flex-1"
617625
>Overview</ecc-utils-design-tabs-trigger
618626
>
619-
<ecc-utils-design-tabs-trigger
620-
value="access"
621-
class="part:flex-1 flex-1"
622-
>Access Methods</ecc-utils-design-tabs-trigger
623-
>
624627
<ecc-utils-design-tabs-trigger
625628
value="contents"
626629
class="part:flex-1 flex-1"
627-
>Contents</ecc-utils-design-tabs-trigger
630+
>Contents & Access</ecc-utils-design-tabs-trigger
628631
>
629632
</ecc-utils-design-tabs-list>
630633
631634
<ecc-utils-design-tabs-content value="overview">
632635
${this.renderOverviewTab()}
633636
</ecc-utils-design-tabs-content>
634637
635-
<ecc-utils-design-tabs-content value="access">
636-
${this.renderAccessMethodsTab()}
637-
</ecc-utils-design-tabs-content>
638-
639638
<ecc-utils-design-tabs-content value="contents">
640-
${this.renderContentsTab()}
639+
<slot name="contents"> ${this.renderContentsTab()} </slot>
641640
</ecc-utils-design-tabs-content>
642641
</ecc-utils-design-tabs>
643642
</div>

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,8 @@ import "@elixir-cloud/design/components/skeleton/index.js";
2020
* @property {number} pageSize - Number of objects per page
2121
* @property {boolean} search - Determines if the search field should be rendered
2222
* @property {DrsProvider} provider - Custom data provider (optional, overrides baseUrl)
23+
*
24+
* @fires ecc-objects-selected - Fired when an object is selected
2325
*/
2426
export class ECCClientGa4ghDrsObjects extends LitElement {
2527
static styles = [
@@ -132,7 +134,7 @@ export class ECCClientGa4ghDrsObjects extends LitElement {
132134
}
133135

134136
private handleObjectSelect(objectId: string): void {
135-
const event = new CustomEvent("ecc-drs-object-selected", {
137+
const event = new CustomEvent("ecc-objects-selected", {
136138
detail: { objectId },
137139
bubbles: true,
138140
composed: true,

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

Lines changed: 0 additions & 7 deletions
This file was deleted.

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

Lines changed: 0 additions & 7 deletions
This file was deleted.

‎packages/ecc-client-ga4gh-drs/src/events/ecc-drs-objects-changed.ts‎

Lines changed: 0 additions & 7 deletions
This file was deleted.

‎packages/ecc-client-ga4gh-drs/src/events/ecc-objects-selected.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
export type EccObjectsSelectedEvent = CustomEvent<Record<string, any>>;
2+
3+
declare global {
4+
interface GlobalEventHandlersEventMap {
5+
"ecc-objects-selected": EccObjectsSelectedEvent;
6+
}
7+
}

‎packages/ecc-client-ga4gh-drs/src/events/index.ts‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1 @@
1-
export type { EccDrsObjectAccessedEvent } from "./ecc-drs-object-accessed.js";
2-
export type { EccDrsObjectsChangedEvent } from "./ecc-drs-objects-changed.js";
3-
export type { EccDrsObjectSelectedEvent } from "./ecc-drs-object-selected.js";
1+
export type { EccObjectsSelectedEvent } from "./ecc-objects-selected.js";

0 commit comments

Comments
 (0)