Skip to content

Commit

Permalink
use expansion panel in sample metadata
Browse files Browse the repository at this point in the history
  • Loading branch information
@bhushankhope
bhushankhope committed Oct 23, 2024
1 parent cd9f014 commit 1733a37
Show file tree
Hide file tree
Showing 3 changed files with 131 additions and 137 deletions.
242 changes: 117 additions & 125 deletions libs/cde-visualization/src/lib/components/metadata/metadata.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,142 +1,134 @@
<mat-accordion displayMode="flat" hideToggle>
<mat-expansion-panel expanded #panel>
<mat-expansion-panel-header (click)="togglePanel($event, panel)">
<mat-panel-title class="title">
<button mat-icon-button hraIconButtonSize="large" [hraMicroTooltip]="panel.expanded ? 'Collapse' : 'Expand'">
<mat-icon class="expansion-indicator">{{ panel.expanded ? 'remove' : 'add' }}</mat-icon>
</button>
{{ metadata().sampleExtra ? 'Sample ' : '' }}Metadata
<button
mat-icon-button
[matMenuTriggerFor]="menu"
[hraIconButtonSize]="'large'"
aria-label="Icon to open nested menu"
hraMicroTooltip="More"
(click)="$event.stopPropagation()"
>
<mat-icon>more_vert</mat-icon>
</button>
<mat-menu #menu="matMenu" [class]="'metadata-overlay'">
<button
mat-menu-item
[matMenuTriggerFor]="infoSubMenu"
class="expanded"
matRipple
matRippleColor="#201E3D14"
(click)="$event.stopImmediatePropagation()"
>
<mat-icon>info</mat-icon>
<span>Info</span>
<mat-icon class="expand-arrow">arrow_right</mat-icon>
</button>
<button mat-menu-item (click)="toggleEmptyFields()">
<mat-icon>{{ showEmptyFields() ? 'visibility_off' : 'visibility' }}visibility</mat-icon>
{{ showEmptyFields() ? 'Hide' : 'Show' }} Unknown Metadata
</button>
<a
mat-menu-item
href="https://github.com/hubmapconsortium/hra-ui/blob/main/apps/cde-visualization-wc/EMBEDDING.md"
target="_blank"
rel="noopener noreferrer"
>
<mat-icon>code</mat-icon>
Embed App
</a>
<mat-menu #infoSubMenu="matMenu" [class]="'info-sub-menu'">
Visualization metadata for the sample dataset.
</mat-menu>
</mat-menu>
</mat-panel-title>
</mat-expansion-panel-header>
<div class="metadata-details">
<div>
@if (isFieldVisible('title')) {
<span>
{{ titleLabel() }}
</span>
<span>
@if (metadata().sampleExtra; as extra) {
<a
mat-button
hraButtonSize="small"
[attr.href]="extra.sampleUrl"
target="_blank"
rel="noreferrer noopener"
>{{ metadata().title }}</a
>
} @else {
<span>{{ metadata().title | defaultTo: 'Unknown' }}</span>
}
</span>
}
</div>
<div>
<span>Source Data</span>
<hra-expansion-panel [title]="'Sample Metadata'">
<hra-expansion-panel-actions>
<button
mat-icon-button
[matMenuTriggerFor]="menu"
[hraIconButtonSize]="'large'"
aria-label="Icon to open nested menu"
hraMicroTooltip="More"
(click)="$event.stopPropagation()"
>
<mat-icon>more_vert</mat-icon>
</button>
<mat-menu #menu="matMenu" [class]="'metadata-overlay'">
<button
mat-menu-item
[matMenuTriggerFor]="infoSubMenu"
class="expanded"
matRipple
matRippleColor="#201E3D14"
(click)="$event.stopImmediatePropagation()"
>
<mat-icon>info</mat-icon>
<span>Info</span>
<mat-icon class="expand-arrow">arrow_right</mat-icon>
</button>
<button mat-menu-item (click)="toggleEmptyFields()">
<mat-icon>{{ showEmptyFields() ? 'visibility_off' : 'visibility' }}visibility</mat-icon>
{{ showEmptyFields() ? 'Hide' : 'Show' }} Unknown Metadata
</button>
<a
mat-menu-item
href="https://github.com/hubmapconsortium/hra-ui/blob/main/apps/cde-visualization-wc/EMBEDDING.md"
target="_blank"
rel="noopener noreferrer"
>
<mat-icon>code</mat-icon>
Embed App
</a>
<mat-menu #infoSubMenu="matMenu" [class]="'info-sub-menu'">
Visualization metadata for the sample dataset.
</mat-menu>
</mat-menu>
</hra-expansion-panel-actions>
<div class="metadata-details">
<div>
@if (isFieldVisible('title')) {
<span>
{{ titleLabel() }}
</span>
<span>
@if (metadata().sampleExtra; as extra) {
<a
mat-button
hraButtonSize="small"
[attr.href]="extra.sourceDataUrl"
[attr.href]="extra.sampleUrl"
target="_blank"
rel="noreferrer noopener"
>{{ metadata().sourceData }}</a
>{{ metadata().title }}</a
>
} @else {
<span>{{ metadata().sourceData | defaultTo: 'Unknown' }}</span>
<span>{{ metadata().title | defaultTo: 'Unknown' }}</span>
}
</span>
</div>
@if (isFieldVisible('colorMap')) {
<div>
<span>Color Map</span>
<span>{{ metadata().colorMap | defaultTo: 'Default' }}</span>
</div>
}
@if (isFieldVisible('organ')) {
<div>
<span>Organ</span>
<span>{{ metadata().organ | defaultTo: 'Unknown' }}</span>
</div>
}
@if (isFieldVisible('technology')) {
<div>
<span>Technology</span>
<span>{{ metadata().technology | defaultTo: 'Unknown' }}</span>
</div>
}
@if (isFieldVisible('sex')) {
<div>
<span>Sex</span>
<span>{{ metadata().sex | defaultTo: 'Unknown' }}</span>
</div>
}
@if (isFieldVisible('age')) {
<div>
<span>Age</span>
<span>{{ metadata().age | defaultTo: 'Unknown' }}</span>
</div>
}
@if (isFieldVisible('thickness')) {
<div>
<span>Thickness (µm)</span>
<span>{{ metadata().thickness | defaultTo: 'Unknown' }}</span>
</div>
}
@if (isFieldVisible('pixelSize')) {
<div>
<span>Pixel Size (µm/pixel)</span>
<span>{{ metadata().pixelSize | defaultTo: 'Unknown' }}</span>
</div>
}
</div>
<div>
<span>Source Data</span>
<span>
@if (metadata().sampleExtra; as extra) {
<a
mat-button
hraButtonSize="small"
[attr.href]="extra.sourceDataUrl"
target="_blank"
rel="noreferrer noopener"
>{{ metadata().sourceData }}</a
>
} @else {
<span>{{ metadata().sourceData | defaultTo: 'Unknown' }}</span>
}
</span>
</div>
@if (isFieldVisible('colorMap')) {
<div>
<span>Color Map</span>
<span>{{ metadata().colorMap | defaultTo: 'Default' }}</span>
</div>
}
@if (isFieldVisible('organ')) {
<div>
<span>Creation Date</span>
<span>{{ formatCreationTimestamp(dateFormat) | defaultTo: 'Unknown' }}</span>
<span>Organ</span>
<span>{{ metadata().organ | defaultTo: 'Unknown' }}</span>
</div>
}
@if (isFieldVisible('technology')) {
<div>
<span>Creation Time</span>
<span>{{ formatCreationTimestamp(timeFormat) | defaultTo: 'Unknown' }}</span>
<span>Technology</span>
<span>{{ metadata().technology | defaultTo: 'Unknown' }}</span>
</div>
}
@if (isFieldVisible('sex')) {
<div>
<span>Sex</span>
<span>{{ metadata().sex | defaultTo: 'Unknown' }}</span>
</div>
}
@if (isFieldVisible('age')) {
<div>
<span>Age</span>
<span>{{ metadata().age | defaultTo: 'Unknown' }}</span>
</div>
}
@if (isFieldVisible('thickness')) {
<div>
<span>Thickness (µm)</span>
<span>{{ metadata().thickness | defaultTo: 'Unknown' }}</span>
</div>
}
@if (isFieldVisible('pixelSize')) {
<div>
<span>Pixel Size (µm/pixel)</span>
<span>{{ metadata().pixelSize | defaultTo: 'Unknown' }}</span>
</div>
}
<div>
<span>Creation Date</span>
<span>{{ formatCreationTimestamp(dateFormat) | defaultTo: 'Unknown' }}</span>
</div>
<div>
<span>Creation Time</span>
<span>{{ formatCreationTimestamp(timeFormat) | defaultTo: 'Unknown' }}</span>
</div>
</mat-expansion-panel>
</mat-accordion>
</div>
</hra-expansion-panel>
18 changes: 6 additions & 12 deletions libs/cde-visualization/src/lib/components/metadata/metadata.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
--mat-text-button-hover-state-layer-opacity: 0;
--mat-text-button-pressed-state-layer-opacity: 0;

.mat-expansion-panel {
hra-expansion-panel {
--mat-expansion-container-shape: 0;
--mat-expansion-header-expanded-state-height: auto;
--mat-expansion-header-collapsed-state-height: auto;
Expand All @@ -14,26 +14,20 @@
border-style: solid;
box-shadow: none;

.mat-expansion-panel-header {
padding: 0.5rem 0.75rem;

.title {
font: var(--sys-label-medium);
display: flex;
align-items: center;
gap: 0.25rem;
}
}

::ng-deep {
.mat-expansion-panel-body {
padding: 0 1rem;
}
}

::ng-deep .header {
margin: 0.5rem 0.75rem;
}

.metadata-details {
display: flex;
flex-direction: column;
margin: 0 0.75rem;
margin-bottom: 0.75rem;

> div {
Expand Down
8 changes: 8 additions & 0 deletions libs/cde-visualization/src/lib/components/metadata/metadata.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,11 @@ import { MatMenuModule } from '@angular/material/menu';
import { IconButtonSizeDirective } from '@hra-ui/design-system/icon-button';
import { MicroTooltipDirective } from '@hra-ui/design-system/micro-tooltip';
import { ButtonSizeDirective } from '@hra-ui/design-system/button';
import {
ExpansionPanelActionsComponent,
ExpansionPanelComponent,
ExpansionPanelHeaderContentComponent,
} from '@hra-ui/design-system/expansion-panel';

/** List of metadata fields that can be hidden */
const HIDABLE_FIELDS: (keyof Metadata)[] = [
Expand Down Expand Up @@ -53,6 +58,9 @@ export class DefaultToPipe implements PipeTransform {
IconButtonSizeDirective,
MicroTooltipDirective,
ButtonSizeDirective,
ExpansionPanelComponent,
ExpansionPanelActionsComponent,
ExpansionPanelHeaderContentComponent,
],
templateUrl: './metadata.component.html',
styleUrl: './metadata.component.scss',
Expand Down

0 comments on commit 1733a37

Please sign in to comment.