wip: add cog visualiser

angular.json

@@ -371,7 +371,8 @@
   "schematics": {
     "@schematics/angular:component": {
       "prefix": "arlas",
-      "style": "scss"
+      "style": "scss",
+      "project": "arlas-wui"
     },
     "@schematics/angular:directive": {
       "prefix": "arlas"
@@ -383,4 +384,4 @@
       "setParserOptionsProject": true
     }
   }
-}
+}

package.json

@@ -8,6 +8,7 @@
     "serve-cloud": "ng serve --configuration=development-cloud",
     "postinstall": "patch-package --patch-dir node_modules/arlas-web-core/patches && patch-package --patch-dir node_modules/arlas-d3/patches",
     "start": "ng serve",
+    "start:iam": "ng serve --ssl --ssl-cert=$EXPLO_SSL_CERT --ssl-key=$EXPLO_SSL_KEY",
     "build-opensource-stats": "ng build arlas-wui --configuration production-opensource --aot --base-href='$ARLAS_WUI_BASE_HREF/' --stats-json --metafile=meta.json",
     "build-opensource": "ng build arlas-wui --configuration production-opensource --aot --base-href='$ARLAS_WUI_BASE_HREF/'",
     "build-opensource-lib": "ng build arlas-wui-opensource-lib",

src/app/app.module.ts

@@ -43,11 +43,7 @@ import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { RouterModule } from '@angular/router';
 import { TranslateLoader, TranslateModule, TranslateService } from '@ngx-translate/core';
-import {
-  HistogramModule,
-  ResultsModule, FormatNumberModule,
-  GetValueModule,
-} from 'arlas-web-components';
+import { FormatNumberModule, GetValueModule, HistogramModule, ResultsModule, } from 'arlas-web-components';
 import {
   ArlasCollectionService,
   ArlasConfigService,
@@ -86,6 +82,9 @@ import { ContributorService } from './services/contributors.service';
 import { ResultlistService } from './services/resultlist.service';
 import { ArlasWuiMapService } from '@services/map.service';
 import { LazyLoadImageHooks } from './tools/lazy-loader';
+import {
+  CogVisualisationManagerComponent
+} from '@components/map/cog-visualisation-manager/cog-visualisation-manager.component';
 
 
 @NgModule({
@@ -168,7 +167,8 @@ import { LazyLoadImageHooks } from './tools/lazy-loader';
     ArlasTaggerModule,
     LoginModule,
     LazyLoadImageModule,
-    ArlasMapModule
+    ArlasMapModule,
+    CogVisualisationManagerComponent
   ],
   providers: [
     VisualizeService,

src/app/components/arlas-map/arlas-map.component.html

@@ -48,6 +48,10 @@
       <arlas-rasters-manager></arlas-rasters-manager>
     </div>
 
+  <div class="arlas-cog-visualisation-manager">
+    <arlas-cog-visualisation-manager></arlas-cog-visualisation-manager>
+  </div>
+
     <arlas-map [id]="mapId" #map [dataSources]="mapDataSources" [redrawSource]="mapRedrawSources"
       [legendUpdater]="mapLegendUpdater" [visibilityUpdater]="mapVisibilityUpdater"
       [defaultBasemapStyle]="defaultBasemap"

src/app/components/arlas-map/arlas-map.component.scss

@@ -79,6 +79,15 @@
     }
   }
 
+  .arlas-cog-visualisation-manager {
+    position: absolute;
+    bottom: calc(
+      $sm-spacing + $map-scale-height
+    );
+    right: $sm-spacing;
+    z-index: 2;
+  }
+
   .arlas-map-action-container {
     position: absolute;
     right: calc($map-actions-width + $xs-border);
@@ -118,4 +127,12 @@
         + $sm-spacing + $map-actions-width);
     z-index: 1;
   }
-}
+}
+
+@media (max-width: 838px)  {
+  .arlas-cog-visualisation-manager {
+    bottom: calc(
+      $sm-spacing + $map-scale-height + $map-scale-height
+    )!important;
+  }
+}

src/app/components/map/cog-visualisation-manager/cog-visualisation-manager.component.html

@@ -0,0 +1,4 @@
+
+<mat-icon>delete</mat-icon>
+<arlas-result-cog-visualisation-shortcut [title]="'ndvi'" (click)="openModal()"></arlas-result-cog-visualisation-shortcut>
+

src/app/components/map/cog-visualisation-manager/cog-visualisation-manager.component.scss

@@ -0,0 +1,73 @@
+/*
+ * Licensed to Gisaïa under one or more contributor
+ * license agreements. See the NOTICE.txt file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Gisaïa licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+@import "../../../../styles/variables.scss";
+@import "../../../../styles/app/sizes.scss";
+@import "../../../../styles/app/mixin.scss";
+
+
+:host {
+  display: flex;
+  align-items: center;
+  height: $map-cog-visualisation-height;
+  padding: 0 $sm-spacing;
+  cursor: pointer;
+  box-shadow: none;
+  background-color: white;
+  @include box-border();
+
+  mat-icon {
+    font-size: 20px;
+    height: 20px;
+    width: 20px;
+    margin-right: $sm-margin;
+  }
+
+  & ::ng-deep {
+    .visualisation-picture {
+      height: 20px !important;
+      width: 20px !important;
+    }
+
+    .visualisation-info_title {
+      font-size: $sm-font-size !important;
+    }
+  }
+
+}
+
+.wrapper {
+  cursor: pointer;
+  width: $map-actions-width;
+  height: $map-actions-width;
+  margin-bottom: $sm-spacing;
+  @include box-border();
+  box-shadow: none;
+  padding: 0;
+  background-color: white;
+
+  .icon {
+    height: $map-actions-width;
+    width: $map-actions-width;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}

src/app/components/map/cog-visualisation-manager/cog-visualisation-manager.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CogVisualisationManagerComponent } from './cog-visualisation-manager.component';
+
+describe('CogVisualisationManagerComponent', () => {
+  let component: CogVisualisationManagerComponent;
+  let fixture: ComponentFixture<CogVisualisationManagerComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [CogVisualisationManagerComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(CogVisualisationManagerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/map/cog-visualisation-manager/cog-visualisation-manager.component.ts

@@ -0,0 +1,21 @@
+import { Component, inject } from '@angular/core';
+import { MatIcon } from '@angular/material/icon';
+import { ResultCogVisualisationShortcutComponent } from 'arlas-web-components';
+import { MatDialog } from '@angular/material/dialog';
+
+@Component({
+  selector: 'arlas-cog-visualisation-manager',
+  standalone: true,
+  imports: [
+    MatIcon,
+    ResultCogVisualisationShortcutComponent
+  ],
+  templateUrl: './cog-visualisation-manager.component.html',
+  styleUrl: './cog-visualisation-manager.component.scss'
+})
+export class CogVisualisationManagerComponent {
+  protected dialog = inject(MatDialog);
+  public openModal() {
+    // this.dialog.open(ResultCogVisualisationModalComponent);
+  }
+}

src/styles/variables.scss

@@ -32,6 +32,8 @@ $map-attributions-height: 20px;
 $map-scale-max-width: 100px;
 $map-scale-height: 22px;
 $map-settings-height: 91px;
+$map-cog-visualisation-height: 30px;
+$map-cog-visualisation-width: 60px;
 
 // Original size of 130px + sm-spacing
 $timeline-height: 135px;