Skip to content
This repository was archived by the owner on Mar 8, 2024. It is now read-only.

Commit 962a993

Browse files
JWittmeyerJWittmeyer
JWittmeyer
and
JWittmeyer
authored
Extends the bricks integrator (#101)
* Extends the bricks integrator * Small issues * adds pr comments * Adds version 1.7.1 tag Co-authored-by: JWittmeyer <jens.wittmeyer@onetask.ai>
1 parent d0c4ff9 commit 962a993

File tree

13 files changed

+447
-53
lines changed

13 files changed

+447
-53
lines changed

‎src/app/base/components/bricks-integrator/bricks-integrator.component.html

Lines changed: 132 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -242,6 +242,98 @@
242242
<pre class="text-sm overflow-x-auto">{{codeParser.errors.join("\n")}}</pre>
243243
</div>
244244
</ng-template>
245+
<ng-template
246+
[ngIf]="codeParser?.expected.expectedTaskLabels && codeParser.expected.expectedTaskLabels.length>0">
247+
<ng-template [ngIf]="codeParser.expected.labelWarning" [ngIfElse]="informLabels">
248+
<div class="bg-yellow-100 border border-yellow-400 text-yellow-700 px-4 py-3 rounded relative flex flex-col gap-y-2"
249+
role="alert">
250+
<div class="self-center flex flex-row flex-nowrap items-center -mt-1">
251+
<strong class="font-bold">Warning</strong>
252+
<svg class="h-5 w-5 text-yellow-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
253+
fill="currentColor" aria-hidden="true">
254+
<path fill-rule="evenodd"
255+
d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
256+
clip-rule="evenodd" />
257+
</svg>
258+
</div>
259+
<label class="text-sm -mt-1">Your selected task doesn't have all necessary
260+
labels:</label>
261+
<div class="flex flex-row gap-x-2 flex-wrap gap-2" style="max-width:30rem">
262+
<span class="text-sm inline-flex items-center"
263+
*ngFor="let label of codeParser.expected.expectedTaskLabels">
264+
<label [ngClass]="[label.backgroundColor, label.textColor, label.borderColor]"
265+
class="border inline-flex items-center px-2 py-0.5 rounded text-xs font-medium border">
266+
{{label.label}}
267+
<ng-template [ngIf]="label.exists" [ngIfElse]="labelMissing">
268+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
269+
stroke-width="1.5" stroke="currentColor" class="w-4 h-4 -mr-1 ml-1">
270+
<path stroke-linecap="round" stroke-linejoin="round"
271+
d="M4.5 12.75l6 6 9-13.5" />
272+
</svg>
273+
</ng-template>
274+
<ng-template #labelMissing>
275+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
276+
stroke-width="1.5" stroke="currentColor" class="w-4 h-4 -mr-1 ml-1">
277+
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
278+
</svg>
279+
</ng-template>
280+
</label>
281+
</span>
282+
</div>
283+
<div class="flex flex-row justify-center gap-x-1">
284+
<label (click)="codeParser.activeLabelMapping()"
285+
class="cursor-pointer bg-white text-gray-700 text-xs font-semibold whitespace-nowrap px-4 py-2 rounded-md border border-gray-300 hover:bg-gray-50 focus:outline-none">
286+
Map labels
287+
</label>
288+
<label *ngIf="codeParser.expected.canCreateTask" (click)="createNewLabelingTask()"
289+
class="cursor-pointer bg-white text-gray-700 text-xs font-semibold whitespace-nowrap px-4 py-2 rounded-md border border-gray-300 hover:bg-gray-50 focus:outline-none">
290+
Create new task
291+
</label>
292+
<label (click)="addMissingLabelsToTask()"
293+
class="cursor-pointer bg-white text-gray-700 text-xs font-semibold whitespace-nowrap px-4 py-2 rounded-md border border-gray-300 hover:bg-gray-50 focus:outline-none">
294+
Add missing labels ({{codeParser.expected.labelsToBeCreated}}x)
295+
</label>
296+
</div>
297+
298+
</div>
299+
</ng-template>
300+
<ng-template #informLabels>
301+
<div class="bg-blue-100 border border-blue-400 text-blue-700 px-4 py-3 rounded relative flex flex-col gap-y-2"
302+
role="alert">
303+
<div class="self-center flex flex-row flex-nowrap items-center -mt-1">
304+
<strong class="font-bold">Information</strong>
305+
<svg class="h-5 w-5 text-blue-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
306+
fill="currentColor" aria-hidden="true">
307+
<path fill-rule="evenodd"
308+
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
309+
clip-rule="evenodd" />
310+
</svg>
311+
</div>
312+
<label class="text-sm -mt-1">All necessary labels found in
313+
task:</label>
314+
<div class="flex flex-row flex-wrap gap-2" style="max-width:30rem">
315+
<span class="text-sm inline-flex items-center"
316+
*ngFor="let label of codeParser.expected.expectedTaskLabels">
317+
<label [ngClass]="[label.backgroundColor, label.textColor, label.borderColor]"
318+
class="border inline-flex items-center px-2 py-0.5 rounded text-xs font-medium border">
319+
{{label.label}}
320+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
321+
stroke-width="1.5" stroke="currentColor" class="w-4 h-4 -mr-1 ml-1">
322+
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
323+
</svg>
324+
</label>
325+
</span>
326+
</div>
327+
<div class="flex flex-row justify-center gap-x-1">
328+
<label (click)="codeParser.activeLabelMapping()"
329+
class="cursor-pointer bg-white text-gray-700 text-xs font-semibold whitespace-nowrap px-4 py-2 rounded-md border border-gray-300 hover:bg-gray-50 focus:outline-none">
330+
Map labels anyway
331+
</label>
332+
</div>
333+
</div>
334+
</ng-template>
335+
336+
</ng-template>
245337
<ng-template [ngIf]="codeParser?.globalComments && codeParser.globalComments.length>0">
246338
<div class="bg-blue-100 border border-blue-400 text-blue-700 px-4 py-3 rounded relative flex flex-col"
247339
role="alert">
@@ -268,13 +360,25 @@
268360
<ng-template #displaySelectionHelper>
269361

270362
<div class="grid grid-cols-3-max gap-x-2 gap-y-2 items-center pb-4 px-4">
363+
<ng-template [ngIf]="codeParser.labelingTaskName">
271364

365+
<label class="font-bold col-start-1">Labeling Task</label>
366+
<kern-dropdown [dropdownOptions]="{
367+
optionArray:codeParser.labelingTasks,
368+
buttonCaption:codeParser.labelingTaskName,
369+
emitIndex:true
370+
}" (optionClicked)="selectDifferentTask(codeParser.labelingTasks[$event].id)">
371+
</kern-dropdown>
372+
<div class="tooltip" data-tip="Switching a task will reset the integrator progress!">
373+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
374+
stroke="currentColor" class="w-6 h-6">
375+
<path stroke-linecap="round" stroke-linejoin="round"
376+
d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
377+
</svg>
378+
</div>
379+
</ng-template>
272380
<label class="font-bold">Variable</label>
273381
<label class="font-bold">Value</label>
274-
<ng-template [ngIf]="codeParser.labelingTaskName">
275-
<label class="text-sm col-start-1">Labeling Task</label>
276-
<span class="text-sm text-gray-500 font-normal">{{codeParser.labelingTaskName}}</span>
277-
</ng-template>
278382
<div class="contents" *ngFor="let v of codeParser.variables;let i = index">
279383
<label class="text-sm col-start-1">{{v.displayName}}</label>
280384
<ng-container class="contents" [ngTemplateOutlet]="variableSelect"
@@ -290,8 +394,31 @@
290394
<polyline points="11 12 12 12 12 16 13 16"></polyline>
291395
</svg>
292396
</div>
293-
294397
</div>
398+
<ng-template [ngIf]="codeParser.expected.labelMappingActive">
399+
<label class="font-bold col-start-1">Bricks label</label>
400+
<label class="font-bold">Refinery label</label>
401+
<div class="contents" *ngFor="let l of codeParser.expected.expectedTaskLabels;let i = index">
402+
<label class="text-sm col-start-1">{{l.label}}</label>
403+
<kern-dropdown [dropdownOptions]="{
404+
optionArray:codeParser.expected.availableLabels,
405+
buttonCaption:l.mappedLabel?l.mappedLabel:'Ignore',
406+
emitIndex:true
407+
}"
408+
(optionClicked)="codeParser.expected.expectedTaskLabels[i].mappedLabel = codeParser.expected.availableLabels[$event].name;codeParser.replaceVariables()">
409+
</kern-dropdown>
410+
<div class="tooltip" *ngIf="codeParser.expected.expectedTaskLabels[i].mappedLabel != null"
411+
data-tip="Clear">
412+
<svg (click)="codeParser.expected.expectedTaskLabels[i].mappedLabel = null;codeParser.replaceVariables()"
413+
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
414+
stroke="currentColor" class="w-6 h-6 cursor-pointer">
415+
<path stroke-linecap="round" stroke-linejoin="round"
416+
d="M9.75 9.75l4.5 4.5m0-4.5l-4.5 4.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
417+
</svg>
418+
</div>
419+
</div>
420+
</ng-template>
421+
295422
</div>
296423
</ng-template>
297424
<div class="w-full">

‎src/app/base/components/bricks-integrator/bricks-integrator.component.ts

Lines changed: 39 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11

22
import { HttpClient } from '@angular/common/http';
3-
import { Component, ElementRef, EventEmitter, Input, OnDestroy, OnInit, Output, ViewChild } from '@angular/core';
3+
import { Component, ElementRef, EventEmitter, Input, OnChanges, OnDestroy, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core';
44
import { ActivatedRoute } from '@angular/router';
55
import { timer } from 'rxjs';
66
import { first } from 'rxjs/operators';
@@ -35,6 +35,7 @@ export class BricksIntegratorComponent implements OnInit, OnDestroy {
3535
//for values
3636
@Input() labelingTaskId: string;
3737
@Output() preparedCode = new EventEmitter<string | any>();
38+
@Output() newTaskId = new EventEmitter<string>();
3839

3940
@ViewChild("searchInput") searchInput: ElementRef;
4041

@@ -47,12 +48,13 @@ export class BricksIntegratorComponent implements OnInit, OnDestroy {
4748
constructor(private http: HttpClient, private projectApolloService: ProjectApolloService, private knowledgeBaseApollo: KnowledgeBasesApolloService,
4849
private activatedRoute: ActivatedRoute,) {
4950
}
51+
5052
ngOnInit(): void {
5153
if (typeof this.forIde == 'string') this.forIde = isStringTrue(this.forIde);
5254
this.initConfig();
5355
this.codeParser = new BricksCodeParser(this);
5456
const projectId = findProjectIdFromRoute(this.activatedRoute)
55-
this.dataRequestor = new BricksDataRequestor(this.projectApolloService, this.knowledgeBaseApollo, projectId);
57+
this.dataRequestor = new BricksDataRequestor(this.projectApolloService, this.knowledgeBaseApollo, projectId, this);
5658
}
5759
ngOnDestroy(): void {
5860
this.dataRequestor.unsubscribeFromWebsocket();
@@ -277,4 +279,38 @@ export class BricksIntegratorComponent implements OnInit, OnDestroy {
277279
this.codeParser.replaceVariables();
278280
}
279281

280-
}
282+
createNewLabelingTask() {
283+
this.dataRequestor.createNewLabelingTask(this.config.api.data.data.attributes.name, this.codeParser.expected.expectedTaskLabels.map(x => x.label));
284+
}
285+
addMissingLabelsToTask() {
286+
if (!this.labelingTaskId) return;
287+
const missing = this.codeParser.expected.expectedTaskLabels.filter(x => !x.exists).map(x => x.label);
288+
this.dataRequestor.createMissingLabels(this.labelingTaskId, missing);
289+
}
290+
291+
selectDifferentTask(taskId: string) {
292+
if (this.labelingTaskId == taskId) {
293+
if (this.codeParser) this.codeParser.prepareCode();
294+
return;
295+
}
296+
297+
const currentTaskType = this.dataRequestor.getLabelingTaskAttribute(this.labelingTaskId, "taskType");
298+
const newTaskType = this.dataRequestor.getLabelingTaskAttribute(taskId, "taskType");
299+
this.labelingTaskId = taskId;
300+
if (currentTaskType != newTaskType) {
301+
this.moduleTypeFilter = newTaskType == 'MULTICLASS_CLASSIFICATION' ? 'classifier' : 'extractor'
302+
this.config.api.data = null;
303+
this.config.page = IntegratorPage.SEARCH;
304+
this.requestSearch();
305+
this.searchInput.nativeElement.value = "";
306+
this.searchInput.nativeElement.focus();
307+
} else {
308+
if (this.codeParser) this.codeParser.prepareCode();
309+
}
310+
311+
312+
if (this.newTaskId.observers.length > 0) this.newTaskId.emit(taskId);
313+
}
314+
315+
316+
}

0 commit comments

Comments
 (0)