Release updates (#98)

* Version number to 1.7.0

* Increases page size for bricks integrator

* Adds open issue button

* Disable upload existing project if no project attached

* Removes notification center initialization from role != engeneer

* No hover box on dashed line

* Not changeable text for uploaded attributes

* Active learning buttons and embeddings arrangement

* Console error removed

* Closing notifications modal when the link is clicked

* Remove function templates

* Top offset reduced on models downloaded page

* Top offset reduced on dropdown on embeddings

* Changed href to router link

* Added classifiers to bricks integration on attribute calculation page

* Labeling task as text in bricks integratior

* Release updates

Co-authored-by: Lina <lina.lumburovska@kern.ai>
Co-authored-by: JWittmeyer <jens.wittmeyer@onetask.ai>

Author: 3 people

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

@@ -1,7 +1,7 @@
 <div class="flex items-center">
     <div class="tooltip tooltip-left" data-tip="Open the bricks integrator">
         <label (click)="openBricksIntegrator()" id="bricks-integrator-open-button"
-            class="cursor-pointer bg-white text-gray-700 text-xs font-semibold  px-4 py-2 rounded-md border border-gray-300 hover:bg-gray-50 focus:outline-none">
+            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">
             Search in bricks
         </label>
     </div>
@@ -63,7 +63,7 @@
             <!-- Empty state, show/hide based on command palette state -->
             <ng-template [ngIf]="config.search.nothingMatches" [ngIfElse]="showResults">
 
-                <div class="py-14 px-6 text-center text-sm sm:px-14">
+                <div class="py-6 px-6 text-center text-sm">
                     <svg class="mx-auto h-6 w-6 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none"
                         viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
                         <path stroke-linecap="round" stroke-linejoin="round"
@@ -75,8 +75,21 @@
                             similarity search.</p>
                     </ng-template>
                     <ng-template #noResultsBackend>
-                        <p class="mt-4 font-semibold text-gray-900">No results found</p>
-                        <p class="mt-2 text-gray-500">No components found for this search term. Please try again.</p>
+                        <p class="mt-2 font-semibold text-gray-900">No results found</p>
+                        <p class="mt-2 text-gray-500">No components found for this search term.</p>
+                        <p class="mt-6 text-sm text-gray-500">Feel free to open an issue on GitHub if you think we
+                            should add it.</p>
+                        <a href="https://github.com/code-kern-ai/bricks/issues" target="_blank"
+                            rel="noopener noreferrer" type="button"
+                            class="mt-2 inline-flex items-center rounded-md border border-gray-300 bg-white px-3 py-2 text-sm font-medium leading-4 text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none"><svg
+                                xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-900 mr-2" width="24"
+                                height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
+                                stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                                <path
+                                    d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5">
+                                </path>
+                            </svg>Open an issue on GitHub</a>
                     </ng-template>
                 </div>
             </ng-template>
@@ -260,12 +273,7 @@
                 <label class="font-bold">Value</label>
                 <ng-template [ngIf]="codeParser.labelingTaskName">
                     <label class="text-sm col-start-1">Labeling Task</label>
-                    <kern-dropdown [dropdownOptions]="{
-                            optionArray:[],
-                            buttonCaption:codeParser.labelingTaskName,
-                            isDisabled:true
-                        }">
-                    </kern-dropdown>
+                    <span class="text-sm text-gray-500 font-normal">{{codeParser.labelingTaskName}}</span>
                 </ng-template>
                 <div class="contents" *ngFor="let v of codeParser.variables;let i = index">
                     <label class="text-sm col-start-1">{{v.displayName}}</label>

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

@@ -90,12 +90,21 @@ export class BricksIntegratorComponent implements OnInit, OnDestroy {
 
   private buildSearchUrl(): string {
     let url = BricksIntegratorComponent.httpBaseLinkFilter;
-    let filter = "";
-    if (this.moduleTypeFilter) filter += (filter == "" ? '?' : '&') + "filters[moduleType][$eq]=" + this.moduleTypeFilter;
-    if (this.executionTypeFilter) filter += (filter == "" ? '?' : '&') + "filters[executionType][$eq]=" + this.executionTypeFilter;
+    let filter = "?pagination[pageSize]=99999";
+    filter += this.extendUrl(this.moduleTypeFilter, "moduleType");
+    filter += this.extendUrl(this.executionTypeFilter, "executionType");
     return url + filter;
   }
 
+  private extendUrl(value: string, attribute: string): string {
+    if (!value) return "";
+    let filter = "";
+    const splitVal: string[] = value.split(',');
+    for (let i = 0; i < splitVal.length; i++) {
+      filter += "&filters[" + attribute + "][$eq]=" + splitVal[i].trim();
+    }
+    return filter;
+  }
 
   requestSearch(value: string = "") {
     this.config.search.requesting = true;

src/app/base/components/header/header.component.html

@@ -155,8 +155,11 @@
     </div>
 </header>
 
-<kern-modal [isOpen]="headerModals.notifications.open" [modalBoxStyle]="{'width':'45rem'}" closeButton="X"
-    (optionClicked)="headerModals.notifications.open = false">
-    <h1 class="text-lg text-gray-900 mb-2 font-bold text-center">Notification center</h1>
-    <kern-notification-center></kern-notification-center>
-</kern-modal>
+<ng-template [ngIf]="user?.role == 'ENGINEER'">
+    <kern-modal [isOpen]="headerModals.notifications.open" [modalBoxStyle]="{'width':'45rem'}" closeButton="X"
+        (optionClicked)="headerModals.notifications.open = false">
+
+        <h1 class="text-lg text-gray-900 mb-2 font-bold text-center">Notification center</h1>
+        <kern-notification-center (linkClicked)="headerModals.notifications.open = $event"></kern-notification-center>
+    </kern-modal>
+</ng-template>

src/app/base/components/notification-center/notification-center.component.html

@@ -89,7 +89,7 @@
     <div class="ml-3 w-full">
         <div class="flex">
             <h3 class="{{'text-sm font-medium text-' + textColor +'-800'}}"><a class="underline"
-                    href="{{ notificationTypeList[0].docs }}" target="_blank"
+                    href="{{ notificationTypeList[0].docs }}" target="_blank" (click)="linkClicked.emit(false)"
                     rel="noopener noreferrer">{{notificationTypeList[0].title}}</a>
                 ({{notificationTypeList[0].date}} <button *ngIf="notificationTypeList[0].projectId"
                     (click)="navigateToProjectPage(notificationTypeList[0])" class="underline">

src/app/base/components/notification-center/notification-center.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Component, OnInit, OnDestroy, Output, EventEmitter } from '@angular/core';
 import { NotificationApolloService } from 'src/app/base/services/notification/notification-apollo.service';
 import { ProjectApolloService } from 'src/app/base/services/project/project-apollo.service';
 import { Router } from '@angular/router';
@@ -34,6 +34,7 @@ export class NotificationCenterComponent implements OnInit, OnDestroy {
   setOutline: boolean = false;
   clickedNotificationId: string = null;
   static componentSingleton: NotificationCenterComponent = null;
+  @Output() linkClicked = new EventEmitter<boolean>();
 
   constructor(
     private auth: AuthApiService,
@@ -144,6 +145,7 @@ export class NotificationCenterComponent implements OnInit, OnDestroy {
 
   navigateToProjectPage(notification): void {
     this.router.navigate(['projects', notification.projectId, notification.page]);
+    this.linkClicked.emit(false);
   }
 
   switchExpandedState(notification) {

src/app/base/components/sidebar-pm/sidebar-pm.component.html

@@ -236,7 +236,7 @@
                 <div class="flex-shrink-0 flex py-6 justify-center">
                     <label data-tip="Version overview"
                         (click)="requestVersionOverview(); sideBarPmModals.versionOverview.open = true;"
-                        class="z-50 tooltip tooltip-right cursor-pointer select-none text-white flex items-center">v1.6.0
+                        class="z-50 tooltip tooltip-right cursor-pointer select-none text-white flex items-center">v1.7.0
                         <svg *ngIf="hasUpdates" xmlns="http://www.w3.org/2000/svg" data-tip="Newer version available"
                             class="icon icon-tabler icon-tabler-alert-circle inline-block text-yellow-700 tooltip tooltip-right align-top ml-1"
                             width="16" height="16" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"

src/app/model-download/components/model-download-component/model-download-component.component.html

@@ -210,10 +210,13 @@
                     (mouseleave)="setCurrentEmbeddingHandle(null)">
 
                     <label class="cursor-pointer label"
-                        [ngClass]="[checkIfModelIsDownloaded(modelHandle.configString) ? 'text-green-700' : '', k == downloadedModelsModals.addNewModel.indexSeparator ? 'line-separator' : '']"
+                        [ngClass]="[checkIfModelIsDownloaded(modelHandle.configString) ? 'text-green-700' : '']"
                         (click)="selectEmbeddingHandle(modelHandle,inputEmbeddingHandle)">
                         {{modelHandle.configString}}
                     </label>
+
+                    <hr class="my-1" *ngIf=" k == downloadedModelsModals.addNewModel.indexSeparator"
+                        (mouseenter)="setCurrentEmbeddingHandle(null)">
                 </li>
             </ul>
         </div>

src/app/model-download/components/model-download-component/model-download-component.component.scss

@@ -1,7 +1,11 @@
-.line-separator {
-    border-bottom: 1px gray dashed;
+hr {
+    border: none;
+    border-top: 1px dashed gray;
+    color: #fff;
+    background-color: #fff;
+    height: 1px;
 }
 
 .height-dropdown {
-    max-height: calc(100vh - 500px);
+    max-height: 45vh;
 }

src/app/model-download/components/model-download-component/model-download-component.component.ts

@@ -148,7 +148,7 @@ export class ModelDownloadComponentComponent implements OnInit {
     this.downloadedModelsModals.deleteModel.currentModelHandle = modelHandle;
     if (modelHandle) {
       const dataBoundingBox: DOMRect = listElement.getBoundingClientRect();
-      hoverBox.style.top = (dataBoundingBox.top) + "px"
+      hoverBox.style.top = (dataBoundingBox.top - 60) + "px"
       hoverBox.style.left = (dataBoundingBox.left + dataBoundingBox.width) + "px"
     }
   }

src/app/project-overview/components/project-overview/project-overview.component.html

@@ -293,7 +293,7 @@ <h2 class="text-3xl font-bold tracking-tight text-white sm:text-4xl">
                                             version in
                                             the cloud, as well as an enterprise solution for on-premises deployment.
                                         </p>
-                                        <a href="./users"
+                                        <a [routerLink]="['/users']"
                                             class="mt-8 inline-flex items-center rounded-md border border-transparent bg-white px-5 py-3 text-base font-medium text-indigo-600 shadow hover:bg-indigo-50">See
                                             our options</a>
                                     </div>

src/app/project-overview/components/project-overview/project-overview.component.ts

@@ -342,7 +342,7 @@ export class ProjectOverviewComponent implements OnInit, OnDestroy {
       dataSliceId
     ).pipe(first()).subscribe((labelDist) => {
       this.labelDistribution = this.matchAndMergeLabelDistributionData(labelDist);
-      this.graphsHaveValues = labelDist.length > 0;
+      this.graphsHaveValues = labelDist?.length > 0;
     });
   }
 
@@ -360,6 +360,7 @@ export class ProjectOverviewComponent implements OnInit, OnDestroy {
 
   private matchAndMergeLabelDistributionData(data) {
     let returnData = [];
+    if (!data) return returnData;
     data.forEach(e => {
       let found = returnData.find(x => x.labelId == e.id);
       if (!found) {
@@ -393,7 +394,7 @@ export class ProjectOverviewComponent implements OnInit, OnDestroy {
       labelingTaskId,
       dataSlice
     ).pipe(first()).subscribe((values) => {
-      this.confusionMatrix = values.map(e => {
+      this.confusionMatrix = values?.map(e => {
         return {
           counts: e.count_absolute,
           labelIdManual: e.label_name_manual == '@@OUTSIDE@@' ? 'Outside' : e.label_name_manual,

src/app/projects/components/create-new-attribute/create-new-attribute.component.html

@@ -122,7 +122,7 @@
                 <div class="text-sm leading-5 font-medium text-gray-700 inline-block mr-2">Editor</div>
                 <div class="flex flex-row flex-nowrap">
                     <kern-bricks-integrator (preparedCode)="codeFormCtrl.setValue($event);isInitial=false"
-                        moduleTypeFilter="generator">
+                        moduleTypeFilter="generator,classifier">
                     </kern-bricks-integrator>
                     <div class="tooltip tooltip-left" data-tip="See available libraries for this attribute calculation">
 

src/app/projects/components/project-settings/project-settings.component.html

@@ -105,7 +105,7 @@
                                     <td class="text-center px-3 py-2 text-sm text-gray-500">
                                         <button type="button"
                                             [routerLink]="['../attributes/' + attributeContainer.get('id').value]"
-                                            *ngIf="attributeContainer.get('userCreated').value"
+                                            *ngIf="attributeContainer.get('userCreated').value; else notChangeable"
                                             class="text-green-800 text-sm font-medium">
                                             <span class="leading-5">Details</span>
                                             <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 inline-block"
@@ -114,6 +114,9 @@
                                                     d="M13 7l5 5m0 0l-5 5m5-5H6" />
                                             </svg>
                                         </button>
+                                        <ng-template #notChangeable>
+                                            <label class="text-gray-500 italic">Not changeable</label>
+                                        </ng-template>
                                     </td>
                                 </tr>
                             </tbody>
@@ -967,7 +970,8 @@
                         (keydown.enter)="selectFirstUnhiddenEmbeddingHandle(inputEmbeddingHandle)"
                         (input)="checkEmbeddingHandles($event.target)">
                 </div>
-                <ul tabindex="0" class="p-2 w-full menu dropdown-content bg-base-100 shadow max-h-80 overflow-y-auto">
+                <ul tabindex="0"
+                    class="p-2 w-full menu dropdown-content bg-base-100 shadow height-dropdown overflow-y-auto">
                     <li #me *ngFor="let embeddingHandle of suggestions; let k = index"
                         [ngClass]="embeddingHandle.hidden || embeddingHandle.forceHidden?'hidden':null"
                         (mouseenter)="setCurrentEmbeddingHandle(embeddingHandle,hoverBox,me)"

src/app/projects/components/project-settings/project-settings.component.scss

@@ -35,4 +35,8 @@
 
 .rotate_transform_270 svg {
   transform: rotate(270deg);
+}
+
+.height-dropdown {
+  max-height: calc(45vh - 50px);
 }

src/app/projects/components/project-settings/project-settings.component.ts

@@ -684,7 +684,7 @@ export class ProjectSettingsComponent implements OnInit, OnDestroy, AfterViewIni
     this.settingModals.embedding.create.currentEmbeddingHandle = embeddingHandle;
     if (embeddingHandle) {
       const dataBoundingBox: DOMRect = listElement.getBoundingClientRect();
-      hoverBox.style.top = (dataBoundingBox.top) + "px"
+      hoverBox.style.top = (dataBoundingBox.top - 60) + "px"
       hoverBox.style.left = (dataBoundingBox.left + dataBoundingBox.width) + "px"
     }
   }

src/app/projects/components/projects/projects.component.html

@@ -1,5 +1,5 @@
 <div class="h-screen bg-gray-100 flex overflow-hidden">
-    <kern-sidebar-pm (firstName)="getFirstName($event)">
+    <kern-sidebar-pm (firstName)="setFirstName($event)">
     </kern-sidebar-pm>
     <!-- Content area -->
     <div class="h-full w-full flex-1 flex flex-col overflow-hidden">
@@ -349,7 +349,7 @@
 <kern-modal [isOpen]="projectsModals.uploadProject.open" closeButton="X" [modalBoxStyle]="{'width':'35rem'}"
     [acceptButton]="{
     closeAfterClick:false,
-    disabled:projectsModals.uploadProject.doingSomething,
+    disabled:projectsModals.uploadProject.doingSomething || !file,
     buttonCaption:'Upload'
 }" (optionClicked)="$event == 'CLOSE'?projectsModals.uploadProject.open = false:importExistingProject();">
     <h1 class="flex flex-grow justify-center text-lg text-gray-900 font-bold">Upload Project Data
@@ -359,7 +359,7 @@ <h1 class="flex flex-grow justify-center text-lg text-gray-900 font-bold">Upload
     </div>
     <div>
         <kern-upload *ngIf="projectsModals.uploadProject.open" [projectId]="null" [init]="true"
-            (fileAttached)="getFile($event)">
+            (fileAttached)="setFile($event)">
         </kern-upload>
     </div>
 </kern-modal>

src/app/projects/components/projects/projects.component.ts

@@ -313,11 +313,11 @@ export class ProjectsComponent implements OnInit, OnDestroy {
     }
   }
 
-  getFirstName(userName) {
+  setFirstName(userName) {
     this.user$ = userName;
   }
 
-  getFile(file: File) {
+  setFile(file: File) {
     this.file = file;
   }