stop coding for tonight

src/app/components/addition/addition.component.html

@@ -1,5 +1,5 @@
 <span class="add" [attr.data-edition]="editionLevel" [attr.data-place]="data.place" 
-    [evtHighlight]="highlightData" [evtEditorialConventionLayout]="editorialConventionData">
+    [evtHighlight]="highlightData"  [evtEditorialConventionLayout]="editorialConventionData">
     <evt-content-viewer *ngFor="let element of data.content" [content]="element" 
-        [editionLevel]="editionLevel" [itemsToHighlight]="itemsToHighlight"></evt-content-viewer>
+        [editionLevel]="editionLevel" [itemsToHighlight]="itemsToHighlight" [itemsLemsToHighlight]="itemsLemsToHighlight"></evt-content-viewer>
 </span>

src/app/components/components-mixins.ts

@@ -1,13 +1,17 @@
 import { Directive, Input } from '@angular/core';
 import { EditionLevelType, TextFlow } from '../app.config';
 import { HighlightData } from '../models/evt-models';
+import { HighlightDataLem } from '../models/evt-models';
 import { EntitiesSelectItem } from './entities-select/entities-select.component';
+import { LemsSelectItem } from './lems-select/lems-select.component';
 
 @Directive()
 // tslint:disable-next-line: directive-class-suffix
 export class Highlightable {
   @Input() highlightData: HighlightData;
+  @Input() highlightDataLem: HighlightDataLem;
   @Input() itemsToHighlight: EntitiesSelectItem[];
+  @Input() itemsLemsToHighlight: LemsSelectItem[];
 }
 
 @Directive()

src/app/components/content-viewer/content-viewer.component.ts

@@ -88,7 +88,7 @@ export class ContentViewerComponent implements OnDestroy {
         return {
           data,
           highlightData: this.getHighlightData(data, itemsToHighlight),
-          highlightDataLem: this.getHighlightDataLems (data, itemsLemsToHighlight),
+          highlightDataLem: this.getHighlightDataLem(data, itemsLemsToHighlight),
           itemsToHighlight,
           itemsLemsToHighlight,
           editionLevel,
@@ -140,10 +140,10 @@ export class ContentViewerComponent implements OnDestroy {
     };
   }
 
-  private getHighlightDataLems(data, ithlems: LemsSelectItem[]) {
+  private getHighlightDataLem(data, ithlems: LemsSelectItem[]) {
     return {
-      highlight: ithlems?.some(i => this.lemsSelectService.matchClassAndAttributes(i.value, data?.attributes ?? {}, data?.class)) ?? false,
-      highlightColor: this.lemsSelectService.getHighlightColor(data?.attributes ?? {}, data?.class, ithlems),
+      highlightLem: ithlems?.some(i => this.lemsSelectService.matchClassAndAttributes(i.value, data?.attributes ?? {}, data?.class)) ?? false,
+      highlightColorLem: this.lemsSelectService.getHighlightColor(data?.attributes ?? {}, data?.class, ithlems),
     };
   }
 

src/app/components/deletion/deletion.component.html

@@ -1,5 +1,5 @@
 <span class="del" [attr.data-edition]="editionLevel" [attr.data-rend]="data.rend" [evtHtmlAttributes]="data?.attributes"
-    [evtHighlight]="highlightData" [evtEditorialConventionLayout]="editorialConventionData">
+    [evtHighlight]="highlightData"  [evtEditorialConventionLayout]="editorialConventionData">
     <evt-content-viewer *ngFor="let element of data.content" [content]="element" [editionLevel]="editionLevel"
-        [itemsToHighlight]="itemsToHighlight"></evt-content-viewer>
+        [itemsToHighlight]="itemsToHighlight" [itemsLemsToHighlight]="itemsLemsToHighlight"></evt-content-viewer>
 </span>

src/app/components/generic-element/generic-element.component.html

@@ -1,3 +1,3 @@
 <evt-content-viewer class="genericElement {{data.class}}" [evtHtmlAttributes]="data?.attributes"
-	*ngFor="let el of data.content" [content]="el" [editionLevel]="editionLevel" [itemsToHighlight]="itemsToHighlight"
-	[evtHighlight]="highlightData" [textFlow]="textFlow"></evt-content-viewer>
+	*ngFor="let el of data.content" [content]="el" [editionLevel]="editionLevel" [itemsToHighlight]="itemsToHighlight" [itemsLemsToHighlight]="itemsLemsToHighlight"
+	[evtHighlight]="highlightData"  [textFlow]="textFlow"></evt-content-viewer>

src/app/components/lemmatized-entity-ref/lemmatized-entity-ref.component.html

@@ -1,9 +1,9 @@
 <span class="lemmatizedEntityRef {{ data.entityLemType }}" (click)="toggleLemEntityData($event)" [ngClass]="{
         opened: opened,
-        entityHighlight: (evtStatusService.currentLemmatizedEntityId$ | async) === data.entityLemId && !opened,
+        lemmaHighlight: (evtStatusService.currentLemmatizedEntityId$ | async) === data.entityLemId && !opened,
         noDetails: (availableLemEntities$ | async) === false
-    }" [evtHighlight]="highlightData" [evtHtmlAttributes]="data?.attributes">
-    <evt-content-viewer *ngFor="let element of data.content" [content]="element" [editionLevel]="editionLevel" [itemsToHighlight]="itemsToHighlight" [textFlow]="textFlow"></evt-content-viewer>
+    }"  [evtHtmlAttributes]="data?.attributes">
+    <evt-content-viewer *ngFor="let element of data.content" [content]="element" [editionLevel]="editionLevel" [itemsLemsToHighlight]="itemsLemsToHighlight" [textFlow]="textFlow"></evt-content-viewer>
 </span>
 <ng-container *ngIf="availableLemEntities$ | async">
     <div *ngIf="opened" class="lemmatizedEntityRefDetail {{ data.entityLemType }}">

src/app/components/lemmatized-entity-ref/lemmatized-entity-ref.component.scss

@@ -20,17 +20,23 @@
   &.lem {
     @include lemmatizedEntityRefColors(get-ne-color(lemBase), get-ne-color(lemMiddle), get-ne-color(lemDarker));
   }
+  &.w {
+    @include lemmatizedEntityRefColors(get-ne-color(lemBase), get-ne-color(lemMiddle), get-ne-color(lemDarker));
+  }
 }
 
 .lemmatizedEntityRefDetail {
   &.lem {
-    background: get-ne-color(personBase);
+    background: get-ne-color(lemBase);
+  }
+  &.w {
+    background: get-ne-color(lemBase);
   }
 }
 .not-found-msg {
   font-size: .9rem;
 }
 
-.entityHighlight {
-  background: #ffffcc !important;
+.lemmaHighlight {
+  background: #d4c9a8 !important;
 }

src/app/components/lemmatized-entity-ref/lemmatized-entity-ref.component.ts

@@ -18,23 +18,23 @@ export interface LemmatizedEntityRefComponent extends EditionlevelSusceptible, H
 export class LemmatizedEntityRefComponent {
   @Input() data: LemmatizedEntityRef;
   availableLemEntities$ = this.evtModelService.lemmatizedEntities$.pipe(
-    map(ne => ne.all.entities.length > 0),
+    map(ne => ne.all.lementities.length > 0),
   );
 
   entity$ = this.evtModelService.lemmatizedEntities$.pipe(
-    map(ne => ne.all.entities.find(e => e.id === this.data.entityLemId) || 'notFound'),
+    map(ne => ne.all.lementities.find(e => e.id === this.data.entityLemId) || 'notFound'),
   );
 
   public highlighted$ = this.lemsSelectService.selectedLemsItems$.pipe(
-    tap(items => {
+    tap(lemitems => {
       if (this.data) {
         this.data.class = this.data.class || '';
         this.data.attributes = this.data.attributes || {};
       }
 
-      return items;
+      return lemitems;
     }),
-    map(items => items.some(i => i && this.data &&
+    map(lemitems => lemitems.some(i => i && this.data &&
       this.lemsSelectService.matchClassAndAttributes(i.value, this.data.attributes, this.data.class))),
   );
 

src/app/components/lemmatized-entity-relation/lemmatized-entity-relation.component.ts

@@ -41,7 +41,7 @@ export class LemmatizedEntityRelationComponent {
     Observable<Array<{ id: string; entity: LemmatizedEntity; label: string }>> {
     return this.evtModelService.lemmatizedEntities$.pipe(
       map(ne => this.data[partIdsGroup].map(entityId => {
-        const entity = ne.all.entities.find(e => e.id === entityId);
+        const entity = ne.all.lementities.find(e => e.id === entityId);
 
         return {
           id: entityId,

src/app/components/lemmatized-entity/lemmatized-entity.component.scss

@@ -36,7 +36,7 @@
     }
 
     // &:hover:not(.active):not(.disabled) {
-    // //   background: #000;
+    //    background: ;
     // }
 
     &.disabled {
@@ -68,7 +68,7 @@
     }
 
     &:hover {
-      background: rgba(255, 255, 255, 0.8) !important;
+      background: rgba(167, 108, 108, 0.8) !important;
 
       .ne-occurrence-count {
         border: 1px solid #ccc;

src/app/components/lems-select/lems-select.component.html

@@ -11,24 +11,24 @@
         (change)="updateSelectedLemTypes($event)">
         <ng-template ng-header-tmp>
             <div class="lems-select-toolbar">
-                <div class="w-100 text-dark select-all-btn">
-                    <input id="select-all" type="checkbox" class="mr-2" (click)="toggleLemSelection()"
+                <div class="w-100 text-dark select-all-lems-btn">
+                    <input id="select-all-lems" type="checkbox" class="mr-2" (click)="toggleLemSelection()"
                         [checked]="selectedLemTypes?.length === lemsTypes.length"/>
-                    <label for="select-all" class="m-0">{{ 'selectLemsAll' | translate }}</label>
+                    <label for="select-all-lems" class="m-0">{{ 'selectLemsAll' | translate }}</label>
                 </div>
             </div>
         </ng-template>
-        <ng-template ng-multi-label-tmp let-items="items" let-clear="clear">
-            <ng-container *ngIf="items.length === 1">
-                <div class="ng-value" *ngFor="let item of items | slice:0:1">
-                    <evt-icon [iconInfo]="iconColor" [style.color]="item.color"></evt-icon>
-                    <span class="ng-value-label">{{item.label}}</span>
-                    <span class="ng-value-icon right" (click)="clear(item)" aria-hidden="true">×</span>
+        <ng-template ng-multi-label-tmp let-lemitems="lemitems" let-clear="clear">
+            <ng-container *ngIf="lemitems.length === 1">
+                <div class="ng-value" *ngFor="let lemitem of lemitems | slice:0:1">
+                    <evt-icon [iconInfo]="iconColor" [style.color]="lemitem.color"></evt-icon>
+                    <span class="ng-value-label">{{lemitem.label}}</span>
+                    <span class="ng-value-icon right" (click)="clear(lemitem)" aria-hidden="true">×</span>
                 </div>
             </ng-container>
-            <div class="ng-value" *ngIf="items.length > 1">
-                <span class="ng-value-label">{{items.length}} {{'selected' | translate}}</span>
+            <div class="ng-value" *ngIf="lemitems.length > 1">
+                <span class="ng-value-label">{{lemitems.length}} {{'selected' | translate}}</span>
             </div>
         </ng-template>
     </ng-select>  
-</ng-container>
+</ng-container>

src/app/components/lems-select/lems-select.component.scss

@@ -26,4 +26,5 @@
 
 .select-all-btn {
     cursor: pointer;
-}
+}
+

src/app/components/lems-select/lems-select.component.ts

@@ -4,12 +4,12 @@ import { EvtIconInfo } from '../../ui-components/icon/icon.component';
 
 export interface LemsSelectItemGroup {
   label: string;
-  items: LemsSelectItem[];
+  lemitems: LemsSelectItem[];
   disabled?: boolean;
 }
 export interface LemsSelectItem {
   label: string;
-  value: string; // This will be used to identify the items to be selected, by indicating tag name and attributes (for XML)
+  value: string; // This will be used to identify the lemitems to be selected, by indicating tag name and attributes (for XML)
   color?: string;
   disabled?: boolean;
 }
@@ -20,11 +20,11 @@ export interface LemsSelectItem {
   styleUrls: ['./lems-select.component.scss'],
 })
 export class LemsSelectComponent {
-  @Output() selectionLemChange: EventEmitter<LemsSelectItem[]> = new EventEmitter();
+  @Output() selectionChange: EventEmitter<LemsSelectItem[]> = new EventEmitter();
 
   lemsTypes: Array<LemsSelectItem & { group: string }> = (AppConfig.evtSettings.edition.lemsSelectItems || [])
     .filter(g => !g.disabled)
-    .reduce((x, y) => [...x, ...y.items.filter(i => !i.disabled).map(i => ({ ...i, group: y.label }))], []);
+    .reduce((x, y) => [...x, ...y.lemitems.filter(i => !i.disabled).map(i => ({ ...i, group: y.label }))], []);
 
   iconColor: EvtIconInfo = {
     icon: 'circle',
@@ -36,7 +36,7 @@ export class LemsSelectComponent {
 
   updateSelectedLemTypes(lemsTypes: LemsSelectItem[]) {
     if (Array.isArray(lemsTypes)) { // BUGFIX: There is a bug in ng-select change event and second time the parameter is an event
-      this.selectionLemChange.emit(lemsTypes);
+      this.selectionChange.emit(lemsTypes);
     }
   }
 
@@ -46,6 +46,6 @@ export class LemsSelectComponent {
     } else {
       this.selectedLemTypes = [];
     }
-    this.selectionLemChange.emit(this.selectedLemTypes);
+    this.selectionChange.emit(this.selectedLemTypes);
   }
 }

src/app/components/page/page.component.ts

@@ -3,6 +3,7 @@ import { BehaviorSubject, of } from 'rxjs';
 import { EditionLevel } from '../../app.config';
 import { Page } from '../../models/evt-models';
 import { EntitiesSelectItem } from '../entities-select/entities-select.component';
+import { LemsSelectItem } from '../lems-select/lems-select.component';
 
 @Component({
   selector: 'evt-page',
@@ -11,6 +12,7 @@ import { EntitiesSelectItem } from '../entities-select/entities-select.component
 })
 export class PageComponent {
   @Input() itemsToHighlight: EntitiesSelectItem[];
+  @Input() itemsLemsToHighlight: LemsSelectItem[];
   @Input() editionLevel: EditionLevel;
   @Input() textFlow: boolean;
 

src/app/directives/highlightlem.directive.ts

@@ -0,0 +1,26 @@
+import { Directive, ElementRef, Input } from '@angular/core';
+import { HighlightDataLem } from '../models/evt-models';
+
+@Directive({
+  selector: '[evtLemHighlight]',
+})
+export class HighlightLemDirective {
+
+  @Input('evtLemHighlight') set highlightDataLem(hd: HighlightDataLem) {
+    this.highlightLem(hd);
+  }
+
+  constructor(
+    private el: ElementRef,
+  ) {
+  }
+
+  private highlightLem(HighlightDataLem: HighlightDataLem) {
+    if (HighlightDataLem.highlightLem) {
+      this.el.nativeElement.classList.add('highlightlem');
+    } else {
+      this.el.nativeElement.classList.remove('highlightlem');
+    }
+    this.el.nativeElement.style.backgroundColor = HighlightDataLem && HighlightDataLem.highlightLem ? HighlightDataLem.highlightColorLem : '';
+  }
+}

src/app/main-menu/main-menu.component.ts

@@ -81,6 +81,18 @@ export class MainMenuComponent implements OnInit, OnDestroy {
         ),
         callback: () => this.openGlobalDialogLists(),
       },
+      {
+        id: 'openLemLists',
+        iconInfo: {
+          icon: 'clipboard-list',
+          additionalClasses: 'icon',
+        },
+        label: 'openLemLists',
+        enabled$: this.evtModelService.lemmatizedEntities$.pipe(
+          map(ne => this.editionConfig.showLists && ne.all.lementities.length > 0),
+        ),
+        callback: () => this.openGlobalDialogLists(),
+      },
       {
         id: 'bookmark',
         iconInfo: {

src/app/models/evt-models.ts

@@ -19,7 +19,10 @@ export interface HighlightData {
     highlight: boolean;
     highlightColor: string;
 }
-
+export interface HighlightDataLem  {
+    highlightLem: boolean;
+    highlightColorLem: string;
+}
 export class GenericElement {
     // tslint:disable-next-line: no-any
     type: Type<any>;
@@ -84,11 +87,11 @@ export interface NamedEntities {
 export interface LemmatizedEntities {
     all: {
         lemlists: LemmatizedEntitiesList[];
-        entities: LemmatizedEntity[];
+        lementities: LemmatizedEntity[];
     };
     lemmas: {
         lemlists: LemmatizedEntitiesList[];
-        entities: LemmatizedEntity[];
+        lementities: LemmatizedEntity[];
     };
     relations: Relation[];
 }

src/app/panels/text-panel/text-panel.component.html

@@ -16,14 +16,16 @@
                     [attr.data-id]="page.id"
                     [data]="page"
                     [textFlow]="textFlow"
-                    [itemsToHighlight]="itemsToHighlight$ | async"></evt-page>
+                    [itemsToHighlight]="itemsToHighlight$ | async"
+                    [itemsLemsToHighlight]="itemsLemsToHighlight$ | async"></evt-page>
             </ng-container>
             <evt-page *ngIf="(isMultiplePageFlow$ | async) === false"
                 [attr.data-id]="currentStatus.currentPage.id"
                 [data]="currentStatus.currentPage"
                 [editionLevel]="currentStatus.editionLevel"
                 [textFlow]="textFlow"
-                [itemsToHighlight]="itemsToHighlight$ | async"></evt-page>
+                [itemsToHighlight]="itemsToHighlight$ | async"
+                [itemsLemsToHighlight]="itemsLemsToHighlight$ | async"></evt-page>
         </ng-container>
     </div>
     <div secondary-content>
@@ -39,7 +41,8 @@
             [active]="secondaryContent === 'SEARCH_RESULTS'">
         </evt-button>
         <evt-entities-select (selectionChange)="itemsToHighlight$.next($event)"></evt-entities-select>
-        <evt-button *ngIf="enableProseVersesToggler"
+        <evt-lems-select (selectionChange)="itemsLemsToHighlight$.next($event)"></evt-lems-select>
+        <evt-button *ngIf="enableProseVersesToggler" 
             [iconLeft]="proseVersesTogglerIcon"
             [label]="textFlow | translate"
             additionalClasses="ml-1"

src/app/panels/text-panel/text-panel.component.ts

@@ -3,6 +3,7 @@ import { BehaviorSubject, combineLatest, Observable, Subject, Subscription } fro
 import { delay, distinctUntilChanged, filter, map, shareReplay, take } from 'rxjs/operators';
 import { AppConfig, EditionLevel, EditionLevelType, TextFlow } from '../../app.config';
 import { EntitiesSelectItem } from '../../components/entities-select/entities-select.component';
+import { LemsSelectItem } from '../../components/lems-select/lems-select.component';
 import { Page } from '../../models/evt-models';
 import { EVTModelService } from '../../services/evt-model.service';
 import { EVTStatusService } from '../../services/evt-status.service';
@@ -52,6 +53,7 @@ export class TextPanelComponent implements OnInit, OnDestroy {
   );
 
   public itemsToHighlight$ = new Subject<EntitiesSelectItem[]>();
+  public itemsLemsToHighlight$ = new Subject<LemsSelectItem[]>();
   public secondaryContent = '';
   private showSecondaryContent = false;
 

src/app/services/evt-model.service.ts

@@ -194,11 +194,11 @@ export class EVTModelService {
   );
 
   public readonly item$ = this.parsedLemLists$.pipe(
-    map(({ lemlists, entities }) => (this.lemmatizedEntitiesParser.getResultsByType(lemlists, entities, ['item', 'lem', 'w']))),
+    map(({ lemlists, lementities }) => (this.lemmatizedEntitiesParser.getResultsByType(lemlists, lementities, ['item', 'lem', 'w']))),
   );
 
   public readonly lemmas$ = this.parsedLemLists$.pipe(
-    map(({ lemlists, entities }) => (this.lemmatizedEntitiesParser.getResultsByType(lemlists, entities, ['item', 'lem', 'w']))),
+    map(({ lemlists, lementities }) => (this.lemmatizedEntitiesParser.getResultsByType(lemlists, lementities, ['item', 'lem', 'w']))),
   );
 
   public readonly lemmatizedEntities$: Observable<LemmatizedEntities> = combineLatest([
@@ -209,7 +209,7 @@ export class EVTModelService {
     map(([item, lemmas, relations]) => ({
       all: {
         lemlists: [...item.lemlists, ...lemmas.lemlists],
-        entities: [...item.entities],
+        lementities: [...item.lementities],
       },
       item,
       lemmas,

src/app/services/lems-select.service.ts

@@ -38,7 +38,7 @@ export class LemsSelectService {
 
   public getHighlightColor(attributesToCheck: Attributes, classNameToCheck: string, selectedLemsItems?: LemsSelectItem[]) {
     const lemsSelectItems = AppConfig.evtSettings.edition.lemsSelectItems
-      .reduce((i: LemsSelectItem[], g) => i.concat(g.items), [])
+      .reduce((i: LemsSelectItem[], g) => i.concat(g.lemitems), [])
       .reduce((x: LemsSelectItem[], y) => {
         const multiValues: LemsSelectItem[] = [];
         y.value.split(',').forEach(t => {
@@ -49,17 +49,17 @@ export class LemsSelectService {
       },      []);
 
     let bestMatch: LemsSelectItem & { score: number };
-    lemsSelectItems.forEach(item => {
+    lemsSelectItems.forEach(lemitem => {
       let score = 0;
-      score += this.matchClass(item.value, classNameToCheck) ? 1 : 0;
-      const attributes = this.getAttributesFromValue(item.value);
-      score += attributes.length && this.matchAttributes(item.value, attributesToCheck) ? 1 : 0;
+      score += this.matchClass(lemitem.value, classNameToCheck) ? 1 : 0;
+      const attributes = this.getAttributesFromValue(lemitem.value);
+      score += attributes.length && this.matchAttributes(lemitem.value, attributesToCheck) ? 1 : 0;
       if (score > 0 && selectedLemsItems) {
-        score += selectedLemsItems.find(i => i.value === item.value) ? 1 : 0;
+        score += selectedLemsItems.find(i => i.value === lemitem.value) ? 1 : 0;
       }
       if (score > 0 && (!bestMatch || bestMatch.score < score)) {
         bestMatch = {
-          ...item,
+          ...lemitem,
           score,
         };
       }

src/app/services/xml-parsers/lemmatized-entities-parser.service.ts

@@ -18,7 +18,7 @@ export class LemmatizedEntitiesParserService {
 
   public parseLemLists(document: XMLElement) {
     const lemListsToParse = getLemListsToParseTagNames();
-    const lemListParser = ParserRegister.get('evt-lemmatized-entities-list-parser');
+    const lemListParser = ParserRegister.get('evt-lemmatized-lementities-list-parser');
     // We consider only first level lists; inset lists will be considered
     const lemlists = Array.from(document.querySelectorAll<XMLElement>(lemListsToParse.toString()))
       .filter((lemlist) => !isNestedInElem(lemlist, lemlist.tagName))
@@ -26,15 +26,15 @@ export class LemmatizedEntitiesParserService {
 
     return {
       lemlists,
-      entities: lemlists.map(({ content }) => content).reduce((a, b) => a.concat(b), []),
+      lementities: lemlists.map(({ content }) => content).reduce((a, b) => a.concat(b), []),
       relations: lemlists.map(({ relations }) => relations).reduce((a, b) => a.concat(b), []),
     };
   }
 
-  public getResultsByType(lemlists: LemmatizedEntitiesList[], entities: LemmatizedEntity[], type: string[]) {
+  public getResultsByType(lemlists: LemmatizedEntitiesList[], lementities: LemmatizedEntity[], type: string[]) {
     return {
       lemlists: lemlists.filter(list => type.indexOf(list.lemmatizedEntityType) >= 0),
-      entities: entities.filter(entity => type.indexOf(entity.lemmatizedEntityType) >= 0),
+      lementities: lementities.filter(entity => type.indexOf(entity.lemmatizedEntityType) >= 0),
     };
   }
 

src/assets/config/edition_config.json

@@ -27,6 +27,12 @@
 			"enabled": true
 		}
 	},
+	"lemmatizedEntitiesLists": {
+		"lemmas": {
+			"defaultLabel": "Lem",
+			"enabled": true
+		}
+	},
 	"entitiesSelectItems": [
 		{
 			"label": "Named Entities",
@@ -49,19 +55,13 @@
 			]
 		}
 	],
-	"lemmatizedEntitiesLists": {
-		"lemmas": {
-			"defaultLabel": "Lems",
-			"enabled": true
-		}
-	},
 	"lemsSelectItems": [
 		{
 			"label": "Lemmatized Entities",
-			"items": [
+			"lemitems": [
 				{
 					"value": "w",
-					"label": "lemmas",
+					"label": "parola",
 					"color": "#ffcdd2"
 				},
 				{
@@ -71,7 +71,7 @@
 				},
 				{
 					"value": "lem",
-					"label": "lemmas",
+					"label": "lem",
 					"color": "#A5D6A7"
 				}
 			]

src/assets/scss/_colors.scss

@@ -36,8 +36,5 @@ $editionColors: (
 
 @function get-ne-color($key) {
     @return get-color(namedEntities $key);
-}
-
-// @function get-ne-color($key) {
-//     @return get-color(lemmatizedEntities $key);
-// }
+    @return get-color(lemmatizedEntities $key);
+}

src/styles.scss

@@ -58,6 +58,8 @@ body {
     font-size: 0.875rem;
     line-height: 1.5;
     border-radius: 0.2rem;
+    padding-left: 5px;
+    padding-right: 5px;
 
     .ng-select-container .ng-value-container .ng-placeholder {
         top: 0 !important;
@@ -73,6 +75,7 @@ body {
         min-height: 31px;
         vertical-align: middle;
         border: none;
+        padding-left: 5px;
 
         @include themify($themes) {
             background-color: themed("toolsBackground") !important;