Group filter by collection

Fix gisaia/ARLAS-wui#383
gisaia · Feb 28, 2022 · 43a0c7e · 43a0c7e
1 parent 9f909ed
commit 43a0c7e
Show file tree

Hide file tree

Showing 8 changed files with 3,113 additions and 755 deletions.
diff --git a/projects/arlas-toolkit/src/lib/components/filters/filters.component.css b/projects/arlas-toolkit/src/lib/components/filters/filters.component.css
@@ -37,6 +37,7 @@
   font-size: 1.1em;
   font-style: normal;
   font-weight: 100;
+  height: 30px;
 }
 
 .count-chip {
@@ -46,7 +47,7 @@
   border-radius: 4px;
   height: 30px;
   display: flex;
-  border-left: 4px solid;
+  border-left: 4px solid !important;
   align-items: center;
 }
 
@@ -89,6 +90,7 @@
 .menu-chip{
   padding: 2px 5px 0 10px !important;
   font-weight: 200;
+  color: white;
 }
 
 .menu-chip-button{
@@ -97,29 +99,32 @@
   line-height: 28px;
   background: 0 0;
   border: none;
+  color: white;
 }
 
 .menu-chip-button:focus{
   outline: none;
 }
 
 .filter-chip__icon{
-  font-size: 20px;
-  width: 18px;
-  height: 18px;
+  font-size: 16px;
+  width: 14px !important;
+  height: 14px !important;
   padding-left: 2px;
   padding-right: 5px;
   float: left;
-  margin-top: -2px;
+  margin-top: 2px;
 }
 
 .filter-count {
   margin-left: 5px;
   margin-right: 10px;
   cursor: default;
   padding-top: 3px !important;
-  font-size: 1.3em;
-  font-weight: 400;
+  color: white;
+  font-size: 1.1em;
+  font-weight: 300;
+  height: 30px;
 }
 .filter-chip__label{
   vertical-align:middle;
@@ -129,6 +134,7 @@
   font-size:1em;
   height: 26px;
   float: left;
+  color: white;
 }
 
 .count-container {
@@ -152,6 +158,7 @@
 .value-unit {
   display: flex;
   align-items: center;
+  padding-right: 5px;
 }
 
 .value {
@@ -163,4 +170,4 @@
   font-weight: 100;
   font-size: 0.95em;
   color: #555;
-}
+}
diff --git a/projects/arlas-toolkit/src/lib/components/filters/filters.component.html b/projects/arlas-toolkit/src/lib/components/filters/filters.component.html
@@ -3,28 +3,28 @@
     <span class="home-filters-logo"><img *ngIf="logoUrl!==undefined" class="filters-logo" src="{{logoUrl}}"></span>
     <span class="home-chip--label" (click)="removeAllFilters()" matTooltip="{{ 'Clear all filters' | translate }}">
       {{title | translate}}</span>
-    <mat-icon class="filter-delimiter">keyboard_arrow_right</mat-icon>
     <ng-container *ngFor="let contributorId of collaborations; let index = index">
-      <mat-basic-chip class="filter-chip"
-        [style.color]="contributorId | getColorFilter:'color':backgroundColor:collaborationsMap "
-        [style.background-color]="contributorId | getColorFilter:'background':backgroundColor:collaborationsMap "
+      <mat-basic-chip class="filter-chip" *ngIf="contributorId === 'timeline'"
+        [style.color]="contributorId | getGlobalColorFilter:'color':color:backgroundColor:collaborationsMap "
+        [style.background-color]="contributorId | getGlobalColorFilter:'background':color:backgroundColor:collaborationsMap "
         (click)="changeCollaborationState(contributorId)"
-        [attr.title]="contributorId | getContributorLabel:contributors | translate | concatCollection:contributorId:contributors">
+        [matTooltip]="contributorId | getContributorLabel:contributors | translate">
         <mat-icon class="filter-chip__icon">{{contributorId | getCollaborationIcon :contributorsIcons }}</mat-icon>
         <mat-icon (click)="removeCollaboration(contributorId)" class="filter-chip__icon_close mat-icon material-icons">
           clear</mat-icon>
       </mat-basic-chip>
-      <mat-icon *ngIf="(index + 1) !== collaborations.size" class="filter-delimiter">keyboard_arrow_right</mat-icon>
     </ng-container>
   </mat-chip-list>
   <mat-chip-list class="counts-chips">
     <ng-container *ngFor="let c of countAll">
-      <mat-basic-chip class="count-chip" id="arlas-count" [style.borderColor]="c.color" *ngIf="!c.ignored">
+      <mat-basic-chip class="count-chip mat-elevation-z1" id="arlas-count" [style.borderColor]="c.color"
+        *ngIf="!c.ignored">
         <div class="count-container">
           <div *ngIf="c.hasCentroidPath" class="zoom" (click)="zoomToData(c.collection)"
             matTooltip="{{ 'Zoom to data' | translate }}">
             <mat-icon>filter_center_focus</mat-icon>
           </div>
+
           <div class="value-unit">
             <div class="value">
               {{c.count | formatNumber:NUMBER_FORMAT_CHAR}}
@@ -33,8 +33,22 @@
               {{c.unit | translate}}
             </div>
           </div>
+          <ng-container *ngFor="let contributorId of collaborations; let index = index">
+            <mat-basic-chip class="filter-chip"
+              *ngIf="c.collection === contributors.get(contributorId).collection && contributorId !== 'timeline'"
+              [style.color]="contributorId | getColorFilter:'color':collaborationsMap"
+              [style.background-color]="contributorId | getColorFilter:'background':collaborationsMap"
+              (click)="changeCollaborationState(contributorId)"
+              [matTooltip]="contributorId | getContributorLabel:contributors | translate">
+              <mat-icon class="filter-chip__icon">{{contributorId | getCollaborationIcon :contributorsIcons }}
+              </mat-icon>
+              <mat-icon (click)="removeCollaboration(contributorId)"
+                class="filter-chip__icon_close mat-icon material-icons">
+                clear</mat-icon>
+            </mat-basic-chip>
+          </ng-container>
         </div>
       </mat-basic-chip>
     </ng-container>
   </mat-chip-list>
-</div>
+</div>
diff --git a/projects/arlas-toolkit/src/lib/components/filters/filters.component.ts b/projects/arlas-toolkit/src/lib/components/filters/filters.component.ts
@@ -57,15 +57,28 @@ export class ConcatCollectionPipe implements PipeTransform {
 
 @Pipe({ name: 'getColorFilter' })
 export class GetColorFilterPipe implements PipeTransform {
-  public transform(value: string, type: string, backgroundColor, collaborationsMap: Map<string, Collaboration>): string {
+  public transform(value: string, type: string, collaborationsMap: Map<string, Collaboration>): string {
     const collaboration = collaborationsMap.get(value);
     if (type === 'color') {
-      return collaboration.enabled ? '#FFF' : '#BDBDBD';
+      return collaboration.enabled ? '#000' : '#BDBDBD';
+    } else if (type === 'background') {
+      return '#FFF';
+    }
+  }
+}
+
+@Pipe({ name: 'getGlobalColorFilter' })
+export class GetGlobalColorFilterPipe implements PipeTransform {
+  public transform(value: string, type: string, color, backgroundColor, collaborationsMap: Map<string, Collaboration>): string {
+    const collaboration = collaborationsMap.get(value);
+    if (type === 'color') {
+      return collaboration.enabled ? color : '#BDBDBD';
     } else if (type === 'background') {
       return collaboration.enabled ? backgroundColor : '#FFF';
     }
   }
 }
+
 @Pipe({ name: 'getCollaborationIcon' })
 export class GetCollaborationIconPipe implements PipeTransform {
   public transform(value: string, contributorsIcons: Map<string, string>): string {
@@ -96,7 +109,12 @@ export class FiltersComponent implements OnInit {
    * @Input : Angular
    * @description Background color of the filter bar
    */
-  @Input() public backgroundColor = '#000';
+  @Input() public backgroundColor = '#FFF';
+  /**
+   * @Input : Angular
+   * @description Color of the filter icon
+   */
+  @Input() public color = '#FFF';
   /**
    * @Input : Angular
    * @description Contributors identifier array which will be ignored from the filter summary
@@ -132,6 +150,7 @@ export class FiltersComponent implements OnInit {
   public collaborations: Set<string> = new Set<string>();
   public contributors: Map<string, Contributor>;
   public contributorsIcons: Map<string, string>;
+  public collaborationByCollection: Array<{ collection: string; collaborationId: string; }> = [];
   public countAll: CollectionCount[];
   public NUMBER_FORMAT_CHAR = 'NUMBER_FORMAT_CHAR';
   public collaborationsMap: Map<string, Collaboration>;
@@ -209,11 +228,11 @@ export class FiltersComponent implements OnInit {
             countsMap.set(c.collection, {
               collection: c.collection,
               count: c.count,
-              color: this.arlasColorService.getColor(c.collection),
+              color: this.arlasColorService.getColor(c.collection) + ' !important',
               hasCentroidPath: !!this.collectionToDescription.get(c.collection) &&
                 !!this.collectionToDescription.get(c.collection).centroid_path,
               unit: !!unit ? unit.unit : c.collection,
-              ignored: unit.ignored
+              ignored: !!unit ? unit.ignored : false
             });
           });
 

diff --git a/projects/arlas-toolkit/src/lib/shared.module.ts b/projects/arlas-toolkit/src/lib/shared.module.ts
@@ -69,7 +69,7 @@ import { ErrorModalModule } from './components/errormodal/errormodal.module';
 import { ExtendComponent } from './components/extend/extend.component';
 import {
   ConcatCollectionPipe, FiltersComponent, GetCollaborationIconPipe, GetColorFilterPipe,
-  GetContributorLabelPipe
+  GetContributorLabelPipe, GetGlobalColorFilterPipe
 } from './components/filters/filters.component';
 import { HistogramTooltipOverlayComponent } from './components/histogram-tooltip-overlay/histogram-tooltip-overlay.component';
 import { HistogramWidgetComponent } from './components/histogram-widget/histogram-widget.component';
@@ -227,6 +227,7 @@ export class CustomTranslateLoader implements TranslateLoader {
     FiltersComponent,
     GetTimeLabelPipe,
     GetColorFilterPipe,
+    GetGlobalColorFilterPipe,
     GetCollaborationIconPipe,
     ConcatCollectionPipe,
     GetContributorLabelPipe,

diff --git a/projects/arlas-toolkit/src/public-api.ts b/projects/arlas-toolkit/src/public-api.ts
@@ -45,7 +45,7 @@ export { Extend } from './lib/services/extend/model';
 export { ExtendLocalDatabase } from './lib/services/extend/extendLocalDatabase';
 export {
   ConcatCollectionPipe, FiltersComponent, GetCollaborationIconPipe, GetColorFilterPipe,
-  GetContributorLabelPipe
+  GetContributorLabelPipe, GetGlobalColorFilterPipe
 } from './lib/components/filters/filters.component';
 export { HistogramTooltipOverlayComponent } from './lib/components/histogram-tooltip-overlay/histogram-tooltip-overlay.component';
 export { HistogramWidgetComponent } from './lib/components/histogram-widget/histogram-widget.component';

diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -1 +1,4 @@
+<div style="margin-bottom: 10px;">
+  <arlas-filter [title]="'ARLAS tookit'" [backgroundColor]="'#FFF'"></arlas-filter>
+</div>
 <arlas-analytics-board [showSpinner]="true" [groups]="analytics" ></arlas-analytics-board>