Skip to content

Commit

Permalink
Merge branch 'design-system-workflow-card' into cde-design-system
Browse files Browse the repository at this point in the history
  • Loading branch information
@edlu77
edlu77 committed Oct 24, 2024
2 parents 02116c6 + 2250b90 commit c45e0f4
Show file tree
Hide file tree
Showing 11 changed files with 235 additions and 167 deletions.
24 changes: 0 additions & 24 deletions apps/cde-ui/src/app/components/file-upload/file-upload.component.scss
View file
Original file line number Diff line number Diff line change
@@ -1,28 +1,4 @@
:host {
// .upload-success {
// height: 2.5rem;
// display: flex;
// align-items: center;
// padding: 0 1rem;
// background: var(--sys-surface-container);
// gap: 0.5rem;
// border-radius: 1rem;
// font: var(--sys-label-large);

// .filename {
// display: flex;
// }

// .file-name {
// color: var(--sys-primary);
// }

// .remove-file {
// color: var(--sys-secondary);
// cursor: pointer;
// }
// }

hra-error-indicator {
margin-bottom: 2rem;
}
Expand Down
134 changes: 74 additions & 60 deletions apps/cde-ui/src/app/pages/create-visualization-page/create-visualization-page.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
<h1 class="title">Create a Cell Distance Visualization</h1>
</div>

<div class="card data-upload">
<hra-workflow-card class="card data-upload" [allowUpload]="true" [loadProgress]="nodeProgress">
<h2 class="header">
<hra-step-indicator class="step-number" [value]="1"></hra-step-indicator>
<span class="card-title">Upload Data</span>
Expand Down Expand Up @@ -84,15 +84,16 @@ <h2 class="header">
(loadStarted)="clearNodes()"
(loadCompleted)="setNodes($event[0])"
(loadCancelled)="clearNodes()"
(loadErrored)="nodesLoadError = $event"
(loadErrored)="nodesLoadError = $event; nodeProgress = 0"
[errorMessage]="nodesErrorMessage"
[errorActionMessage]="nodesErrorActionMessage"
(progress)="nodeProgress = $event"
#nodesFileUpload
>
</cde-file-upload>
</div>
</hra-workflow-card>

<div class="card organize-data" formGroupName="headers">
<hra-workflow-card class="card organize-data" formGroupName="headers">
<h2 class="header">
<hra-step-indicator class="step-number" [value]="2"></hra-step-indicator>
<span class="card-title">Organize Data</span>
Expand Down Expand Up @@ -200,9 +201,9 @@ <h2 class="header">
</mat-select>
</mat-form-field>
</div>
</div>
</hra-workflow-card>

<div class="card parameters" formGroupName="parameters">
<hra-workflow-card class="card parameters" formGroupName="parameters">
<h2 class="header">
<hra-step-indicator class="step-number" [value]="3"></hra-step-indicator>
<div class="card-title">Configure Parameters</div>
Expand Down Expand Up @@ -265,9 +266,9 @@ <h2 class="header">
<input matInput type="number" formControlName="pixelSizeZ" min="0" cdeMarkEmptyFormControl />
</mat-form-field>
</div>
</div>
</hra-workflow-card>

<div class="card metadata" formGroupName="metadata">
<hra-workflow-card class="card metadata" formGroupName="metadata">
<h2 class="header">
<hra-step-indicator class="step-number" [value]="4"></hra-step-indicator>
<div class="card-title">Optional: Add Metadata</div>
Expand All @@ -293,55 +294,66 @@ <h2 class="header">
</ng-template>
</h2>

<mat-form-field subscriptSizing="dynamic">
<mat-label>Visualization Title</mat-label>
<input matInput formControlName="title" cdeMarkEmptyFormControl />
</mat-form-field>

<mat-form-field subscriptSizing="dynamic">
<mat-label>Imaging Technology</mat-label>
<input matInput formControlName="technology" cdeMarkEmptyFormControl />
</mat-form-field>

<mat-form-field hraSelectSize="medium" subscriptSizing="dynamic">
<mat-label>Organ</mat-label>
<mat-select
disableRipple
formControlName="organ"
[panelClass]="['options-container', 'options-container-medium']"
cdeMarkEmptyFormControl
>
@for (organ of organs(); track organ) {
<mat-option [value]="organ">{{ organ.label | titlecase }}</mat-option>
}
</mat-select>
</mat-form-field>

<mat-form-field hraSelectSize="medium" subscriptSizing="dynamic">
<mat-label>Sex</mat-label>
<mat-select
disableRipple
formControlName="sex"
[panelClass]="['options-container', 'options-container-medium']"
cdeMarkEmptyFormControl
>
<mat-option value="Male">Male</mat-option>
<mat-option value="Female">Female</mat-option>
</mat-select>
</mat-form-field>

<mat-form-field subscriptSizing="dynamic">
<mat-label>Age</mat-label>
<input matInput type="number" formControlName="age" min="0" max="120" cdeMarkEmptyFormControl />
</mat-form-field>

<mat-form-field subscriptSizing="dynamic">
<mat-label>Thickness (µm)</mat-label>
<input matInput type="number" formControlName="thickness" min="0" cdeMarkEmptyFormControl />
</mat-form-field>
</div>
<div class="row">
<mat-form-field subscriptSizing="dynamic">
<mat-label>Visualization Title</mat-label>
<input matInput formControlName="title" cdeMarkEmptyFormControl />
</mat-form-field>

<mat-form-field subscriptSizing="dynamic">
<mat-label>Imaging Technology</mat-label>
<input matInput formControlName="technology" cdeMarkEmptyFormControl />
</mat-form-field>
</div>

<div class="row">
<mat-form-field hraSelectSize="medium" subscriptSizing="dynamic">
<mat-label>Organ</mat-label>
<mat-select
disableRipple
formControlName="organ"
[panelClass]="['options-container', 'options-container-medium']"
cdeMarkEmptyFormControl
>
@for (organ of organs(); track organ) {
<mat-option [value]="organ">{{ organ.label | titlecase }}</mat-option>
}
</mat-select>
</mat-form-field>

<mat-form-field hraSelectSize="medium" subscriptSizing="dynamic">
<mat-label>Sex</mat-label>
<mat-select
disableRipple
formControlName="sex"
[panelClass]="['options-container', 'options-container-medium']"
cdeMarkEmptyFormControl
>
<mat-option value="Male">Male</mat-option>
<mat-option value="Female">Female</mat-option>
</mat-select>
</mat-form-field>
</div>

<div class="row">
<mat-form-field subscriptSizing="dynamic">
<mat-label>Age</mat-label>
<input matInput type="number" formControlName="age" min="0" max="120" cdeMarkEmptyFormControl />
</mat-form-field>

<div class="color-config card" [class.custom]="useCustomColorMap">
<mat-form-field subscriptSizing="dynamic">
<mat-label>Thickness (µm)</mat-label>
<input matInput type="number" formControlName="thickness" min="0" cdeMarkEmptyFormControl />
</mat-form-field>
</div>
</hra-workflow-card>

<hra-workflow-card
class="color-config card"
[class.custom]="useCustomColorMap"
[allowUpload]="true"
[loadProgress]="colorProgress"
>
<h2 class="header">
<hra-step-indicator class="step-number" [value]="5"></hra-step-indicator>
<div class="card-title">Optional: Configure Colors</div>
Expand Down Expand Up @@ -413,17 +425,18 @@ <h2 class="header">
[options]="colorMapLoaderOptions"
(loadCompleted)="setCustomColorMap($event[0])"
(loadCancelled)="clearCustomColorMap()"
(loadErrored)="customColorMapLoadError = $event"
(loadErrored)="customColorMapLoadError = $event; colorProgress = 0"
[errorMessage]="colorErrorMessage"
[errorActionMessage]="colorErrorActionMessage"
(progress)="colorProgress = $event"
#customColorMapFileUpload
data-testid="color-map-upload"
>
</cde-file-upload>
}
</div>
</hra-workflow-card>

<div class="card visualize">
<hra-workflow-card class="card visualize">
<h2 class="header">
<hra-step-indicator class="step-number" [value]="6"></hra-step-indicator>
<div class="card-title">Visualize Cell Distance Data</div>
Expand Down Expand Up @@ -455,6 +468,7 @@ <h2 class="header">
}

<button
class="visualize-button"
mat-flat-button
hraCallToActionButton
hraPrimaryButton
Expand All @@ -466,6 +480,6 @@ <h2 class="header">
Visualize
<mat-icon class="material-symbols-rounded" iconPositionEnd>arrow_right_alt</mat-icon>
</button>
</div>
</hra-workflow-card>
</form>
<hra-footer></hra-footer>
Loading

0 comments on commit c45e0f4

Please sign in to comment.