Skip to content

Commit

Permalink
Add overview section to draft sources page
Browse files Browse the repository at this point in the history
  • Loading branch information
@Nateowami
Nateowami committed Jan 18, 2025
1 parent b837447 commit 615d115
Show file tree
Hide file tree
Showing 3 changed files with 246 additions and 35 deletions.
110 changes: 95 additions & 15 deletions ...e/ClientApp/src/app/translate/draft-generation/draft-sources/draft-sources.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<h1>Configure draft sources</h1>

@if (!loading) {
<mat-card>
<mat-card class="draft-sources-stepper">
<div class="step" [class.active]="step === 1">
<div class="step-header" matRipple (click)="step = 1">
<span class="step-title">Draft source</span>
Expand Down Expand Up @@ -81,18 +81,98 @@ <h1>Configure draft sources</h1>
</div>
</mat-card>
}
<ng-template #navigationButtons>
<div class="step-button-wrapper">
@if (step !== 1) {
<button mat-button (click)="step = step - 1"><mat-icon>navigate_before</mat-icon> Back</button>
}
@if (step !== 3) {
<button mat-flat-button color="primary" (click)="step = step + 1">
Next <mat-icon iconPositionEnd>navigate_next</mat-icon>
</button>
}
@if (step === 3) {
<button mat-flat-button color="primary" (click)="save()"><mat-icon>checkmark</mat-icon> Save & sync</button>
}
<div class="overview">
<ng-container *transloco="let t; read: 'confirm_draft_sources'">
<mat-card>
<mat-card-header>
<mat-card-title>{{ t("training_language_model") }}</mat-card-title>
</mat-card-header>
<mat-card-content class="training-data">
<div class="sources" (click)="step = 2" [class.active]="step === 2" matRipple>
<h3>Reference</h3>
@for (project of trainingSources; track $index) {
@if (project == null) {
<ng-container *ngTemplateOutlet="blankProject"></ng-container>
} @else {
<div class="project">
<span class="project-name">{{ project.name }}</span>
<span class="language-code">
{{ t("language_code") }} <strong>{{ project.writingSystem?.tag }}</strong>
</span>
</div>
}
}
</div>
<span class="arrow mirror-rtl"><mat-icon>arrow_right_alt</mat-icon></span>
<div class="targets" (click)="step = 3" [class.active]="step === 3" matRipple>
<h3>Translated project</h3>
@for (project of trainingTargets; track $index) {
<div class="project">
<span class="project-name">{{ project.name }}</span>
<span class="language-code">
{{ t("language_code") }} <strong>{{ project.writingSystem?.tag }}</strong>
</span>
</div>
}
</div>
</mat-card-content>
</mat-card>

<mat-card>
<mat-card-header>
<mat-card-title> Generate draft from language model </mat-card-title>
</mat-card-header>
<mat-card-content>
<div class="translation-data" (click)="step = 1" [class.active]="step === 1" matRipple>
<h3>Source</h3>
@for (project of draftingSources; track $index) {
@if (project == null) {
<ng-container *ngTemplateOutlet="blankProject"></ng-container>
} @else {
<div class="project">
<span class="project-name">{{ project.name }}</span>
<span class="language-code">
{{ t("language_code") }} <strong>{{ project.writingSystem?.tag }}</strong>
</span>
</div>
}
}
</div>
</mat-card-content>
</mat-card>

<app-notice mode="outline">
<strong>{{ t("incorrect_language_codes_reduce_quality") }}</strong>
<p>{{ t("how_to_change_language_codes") }}</p>
<mat-checkbox [checked]="languageCodesConfirmed" (change)="confirmationChanged($event)">{{
t("confirm_lang_codes_correct")
}}</mat-checkbox>
</app-notice>
</ng-container>

<div class="page-actions">
<button mat-button (click)="cancel()"><mat-icon>cancel</mat-icon> Cancel</button>

<button mat-flat-button color="primary" (click)="save()"><mat-icon>checkmark</mat-icon> Save & sync</button>
</div>
</ng-template>

<ng-template #blankProject>
<div class="project blank-project">
<span class="project-name">&nbsp;</span>
<span class="language-code">&nbsp;</span>
</div>
</ng-template>

<ng-template #navigationButtons>
<div class="step-button-wrapper">
@if (step !== 1) {
<button mat-button (click)="step = step - 1"><mat-icon>navigate_before</mat-icon> Back</button>
}
@if (step !== 3) {
<button mat-flat-button color="primary" (click)="step = step + 1">
Next <mat-icon iconPositionEnd>navigate_next</mat-icon>
</button>
}
</div>
</ng-template>
</div>
115 changes: 99 additions & 16 deletions ...e/ClientApp/src/app/translate/draft-generation/draft-sources/draft-sources.component.scss
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,16 @@
.config-sections {
display: flex;
flex-direction: column;
gap: 1rem;
$active-color: #edf5e9;
$active-hover-color: lighten($active-color, 4%);

:host {
display: grid;
grid-template-columns: auto 1fr;
grid-column-gap: 3em;
align-items: start;
}

.config-sections > * {
padding: 1rem;
border: 1px solid black;
h1 {
grid-column-start: 1;
grid-column-end: 3;
}

h1,
Expand All @@ -19,9 +23,8 @@ strong {
font-weight: 500;
}

mat-card {
max-width: 30em;
overflow: hidden;
.draft-sources-stepper {
width: 30em;
}

.step-header {
Expand All @@ -40,24 +43,25 @@ mat-card {
}

.step-header {
background-color: #eeeeee;
background-color: #eee;
cursor: pointer;
&:hover {
background-color: $active-hover-color;
}
}

.step-header,
.step-body {
padding: 1rem;
}

.step-body {
padding: 1rem;
}
.step:not(.active) .step-body {
display: none;
}

.step.active .step-header {
background-color: #edf5e9;
.step.active .step-header,
.overview .active {
background-color: $active-color;
}

.step:not(.active):not(:last-child) {
Expand All @@ -70,3 +74,82 @@ mat-card {
gap: 0.5rem;
justify-content: flex-end;
}

.overview {
display: flex;
flex-direction: column;
gap: 1em;
}

.overview mat-card-content {
display: flex;
gap: 1em;
padding-top: 1em;
}

.arrow mat-icon {
scale: 2;
}

.gap,
.arrow {
padding-inline: 2em;
}

.arrow {
display: flex;
align-items: center;
}

.project {
display: flex;
flex-direction: column;
row-gap: 0.25em;
}

.project-name {
font-size: 1.1em;
}

.language-code {
font-size: 0.9em;
}

.sources,
.targets,
.translation-data {
cursor: pointer;
border-radius: 16px;
padding: 1em;
display: flex;
flex-direction: column;
gap: 8px;
flex-basis: 50%;

&.active {
background: $active-color;
}
&:hover {
background: $active-hover-color;
}
}

.overview h3 {
margin: 0;
}

.blank-project > * {
background: #d9d9d9;
.project-name {
width: 70%;
}
.language-code {
width: 40%;
}
}

.page-actions {
display: flex;
gap: 1em;
justify-content: flex-end;
}
56 changes: 52 additions & 4 deletions ...ure/ClientApp/src/app/translate/draft-generation/draft-sources/draft-sources.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,21 +3,36 @@ import { Component, DestroyRef } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card';
import { MatCheckboxChange, MatCheckboxModule } from '@angular/material/checkbox';
import { MatRippleModule } from '@angular/material/core';
import { MatIconModule } from '@angular/material/icon';
import { TranslocoModule } from '@ngneat/transloco';
import { TranslateSource } from 'realtime-server/lib/esm/scriptureforge/models/translate-config';
import { of } from 'rxjs';
import { ActivatedProjectService } from '../../../../xforge-common/activated-project.service';
import { DataLoadingComponent } from '../../../../xforge-common/data-loading-component';
import { DialogService } from '../../../../xforge-common/dialog.service';
import { I18nService } from '../../../../xforge-common/i18n.service';
import { NoticeService } from '../../../../xforge-common/notice.service';
import { XForgeCommonModule } from '../../../../xforge-common/xforge-common.module';
import { ParatextService, SelectableProject } from '../../../core/paratext.service';
import { NoticeComponent } from '../../../shared/notice/notice.component';
import { DraftSource, DraftSourcesAsArrays, DraftSourcesService } from '../draft-sources.service';

@Component({
selector: 'app-draft-sources',
standalone: true,
imports: [MatButtonModule, MatIconModule, XForgeCommonModule, MatRippleModule, MatCardModule, CommonModule],
imports: [
MatButtonModule,
MatIconModule,
XForgeCommonModule,
MatRippleModule,
MatCardModule,
CommonModule,
TranslocoModule,
NoticeComponent,
MatCheckboxModule
],
templateUrl: './draft-sources.component.html',
styleUrl: './draft-sources.component.scss'
})
Expand All @@ -32,6 +47,9 @@ export class DraftSourcesComponent extends DataLoadingComponent {
projects?: SelectableProject[];
resources?: SelectableProject[];

languageCodesConfirmed = false;
changesMade = false;

get loading(): boolean {
return !this.isLoaded;
}
Expand Down Expand Up @@ -81,6 +99,7 @@ export class DraftSourcesComponent extends DataLoadingComponent {
private readonly paratextService: ParatextService,
private readonly i18n: I18nService,
private readonly draftSourcesService: DraftSourcesService,
private readonly dialogService: DialogService,
noticeService: NoticeService
) {
super(noticeService);
Expand Down Expand Up @@ -113,25 +132,54 @@ export class DraftSourcesComponent extends DataLoadingComponent {
return project == null ? '' : `${project.shortName} - ${project.name}`;
}

sourceSelected(array: any, index: any, paratextId: any): void {
const selectedProject =
sourceSelected(array: any, index: any, paratextId: string | undefined): void {
const selectedProject: SelectableProject | undefined =
this.projects?.find(p => p.paratextId === paratextId) ??
this.resources?.find(r => r.paratextId === paratextId) ??
null;

// The project select component will "select" the project we programmatically set, so prevent mistakenly indicating
// that the user made a change
if (selectedProject?.paratextId === array[index]?.paratextId) return;

this.changesMade = true;

if (selectedProject != null) {
array[index] = selectedProject;
this.languageCodesConfirmed = false;
} else {
array[index] = undefined;
}
}

confirmationChanged(event: MatCheckboxChange): void {
this.languageCodesConfirmed = event.checked;
}

get allowAddingATrainingSource(): boolean {
return this.trainingSources.length < 2 && this.trainingSources.every(s => s != null);
}

async cancel(): Promise<void> {
const leavePage =
!this.changesMade ||
(await this.dialogService.confirm(
of('Are you sure you want leave the page with unsaved changes?'),
of('Leave & discard changes'),
of('Stay on page')
));
if (leavePage) {
this.dialogService.message(of('Not implemented.'));
}
}

save(): void {
this.noticeService.showError('Save is not implemented');
if (!this.languageCodesConfirmed) {
this.dialogService.message(of('Please confirm that the language codes are correct before saving.'));
return;
}

this.dialogService.message(of('Saving is not yet implemented.'));

const sources: DraftSourcesAsArrays = {
trainingSources: this.trainingSources,
Expand Down

0 comments on commit 615d115

Please sign in to comment.