From 3ade3a6b5ced80533c7cad1f4e894208a4b74095 Mon Sep 17 00:00:00 2001
From: Vincent Fazio <vjf@users.noreply.github.com>
Date: Wed, 29 May 2024 18:27:20 +1000
Subject: [PATCH 1/2] AUS-4108 Restore bookmark functionality

---
 .../browsepanel/browsepanel.component.html    |  32 +++-
 src/app/browsepanel/browsepanel.component.ts  | 137 +++++++++++++-----
 .../activelayerspanel.component.ts            | 104 +++++++++----
 src/app/services/user/user-state.service.ts   |  18 ++-
 4 files changed, 217 insertions(+), 74 deletions(-)

diff --git a/src/app/browsepanel/browsepanel.component.html b/src/app/browsepanel/browsepanel.component.html
index 41a63a35..d2dcf249 100644
--- a/src/app/browsepanel/browsepanel.component.html
+++ b/src/app/browsepanel/browsepanel.component.html
@@ -1,19 +1,34 @@
 <!-- Menu toggle button -->
 <button class="btn browse-menu-button btn-auscope-primary" (click)="toggleBrowsePanel()">
     <em class="fa fa-bars" title="Browse featured layers"></em>&nbsp;Browse
+	  <em *ngIf="bShowBrowsePanel" class="fa fa-caret-up caret-icon"></em>
+	  <em *ngIf="!bShowBrowsePanel" class="fa fa-caret-down caret-icon"></em>
 </button>
 <span class="sidebar-toggle" (click)="toggleSidebar()">
-    <i class="fa fa-angle-left fa-5x" *ngIf="isSidebarOpen" title="Open active layers"></i>
+    <i class="fa fa-angle-left fa-5x" *ngIf="isSidebarOpen" title="Close active layers"></i>
     <i class="fa fa-angle-right fa-5x" *ngIf="!isSidebarOpen" title="Open active layers"></i>
 </span>
 <div *ngIf="bShowBrowsePanel" class="browse-menu">
 	<!-- Layer Groups column -->
 	<div class="container text-left browse-menu-col">
-		<a style="font-weight: bold">Featured Layer Groups</a>
+		<div style="font-weight: bold">Featured Layer Groups
+			<!-- 'Bookmarked only' check box -->
+			<div *ngIf="isUserLoggedIn()" style="display: inline-block" class="form-check">
+				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+				<input class="form-check-input" type="checkbox" value="" [(ngModel)]="showOnlyBookmarked" id="showBkMarkedDefault">
+				<label class="form-check-label" for="showBkMarkedDefault">
+					Bookmarked
+				</label>
+			</div>
+		</div>
+		<!-- Layer groups -->
 		<div class="row align-items-start" *ngFor="let layerGroup of layerGroupColumn | keyvalue">
-			<div class="col" (click)="selectGroup(layerGroup)">
+			<div *ngIf="!showOnlyBookmarked || layerGroupHasBookmarkedLayer(layerGroup.key)" class="col" (click)="selectGroup(layerGroup)">
 				<a>
-					<span class="truncate-grp" [ngClass]="{'enbolden': isGroupSelected(layerGroup)}" title="{{layerGroup.key}}">{{layerGroup.key}}</span>
+					<span class="truncate-grp" [ngClass]="{'enbolden': isGroupSelected(layerGroup)}" title="{{layerGroup.key}}">
+						<i *ngIf="layerGroupHasBookmarkedLayer(layerGroup.key)" class="ti-bookmark-alt bookmark-icon" title="This layer is bookmarked"></i>
+						{{layerGroup.key}}
+					</span>
 				</a>
 			</div>
 		</div>
@@ -24,10 +39,15 @@
 		<a *ngIf="!layerColumnHeader" style="font-weight: bold">Layers</a>
 		<a *ngIf="layerColumnHeader"><span style="font-weight: bold;" class="truncate-layer">{{layerColumnHeader}} Layers</span></a>
 		<div class="row align-items-start" *ngFor="let layer of layerColumn">
-			<div class="col" (click)="selectLayer(layer)">
+			<!-- Layers -->
+			<div *ngIf="!showOnlyBookmarked || checkLayerBookmarked(layer.id)" class="col" (click)="selectLayer(layer)">
 				<a>
-					<span class="truncate-layer" [ngClass]="{'enbolden': isLayerSelected(layer)}" title="{{layer.name}}">{{layer.name}}</span>
+					<span class="truncate-layer" [ngClass]="{'enbolden': isLayerSelected(layer)}" title="{{layer.name}}">
+						<i *ngIf="checkLayerBookmarked(layer.id)" class="ti-bookmark-alt bookmark-icon" title="This layer is bookmarked"></i>
+						{{layer.name}}
+					</span>
 				</a>
+				<!-- Add layer button -->
 				<button *ngIf="isLayerSelected(layer)" style="float:right; width:6em; padding:2px" class="btn btn-sm btn-success" type="button" title="Add layer" (click)="addLayer(layer)">
 					<i class="fa fa-plus-circle"></i>
 					&nbsp;Add
diff --git a/src/app/browsepanel/browsepanel.component.ts b/src/app/browsepanel/browsepanel.component.ts
index c10453e5..0b6c4cc7 100644
--- a/src/app/browsepanel/browsepanel.component.ts
+++ b/src/app/browsepanel/browsepanel.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, type OnDestroy } from '@angular/core';
+import { Component, OnInit, OnDestroy, AfterViewInit } from '@angular/core';
 import { LayerHandlerService, RenderStatusService } from '@auscope/portal-core-ui';
 import { UILayerModel } from '../menupanel/common/model/ui/uilayer.model';
 import { UILayerModelService } from 'app/services/ui/uilayer-model.service';
@@ -7,6 +7,8 @@ import { LayerManagerService } from 'app/services/ui/layer-manager.service';
 import { FilterService } from 'app/services/filter/filter.service';
 import { SidebarService } from 'app/portal/sidebar.service';
 import { Subscription } from 'rxjs';
+import { UserStateService } from 'app/services/user/user-state.service';
+import { AuthService } from 'app/services/auth/auth.service';
 
 
 @Component({
@@ -14,7 +16,7 @@ import { Subscription } from 'rxjs';
     templateUrl: './browsepanel.component.html',
     styleUrls: ['./browsepanel.component.scss']
 })
-export class BrowsePanelComponent implements OnInit, OnDestroy{
+export class BrowsePanelComponent implements OnInit, AfterViewInit, OnDestroy {
 
   public layerGroupColumn: {}; /* Holds the data structures for all layers and groups */
   public layerColumn: []; /* List of layers for a certain group */
@@ -24,6 +26,8 @@ export class BrowsePanelComponent implements OnInit, OnDestroy{
   public bShowBrowsePanel = false; /* If true menu panel is open */
   public isSidebarOpen = false; /* If true sidebar is open */
   public sidebarSubscription: Subscription;
+  public layerBookmarked = {}; /* Object stores which layers are bookmarked. key is layer id, value is boolean */
+  public showOnlyBookmarked = false; /* When true only bookmarked layers are shown in the browse menu */
 
   constructor(private layerHandlerService: LayerHandlerService,
       private layerManagerService: LayerManagerService,
@@ -31,48 +35,100 @@ export class BrowsePanelComponent implements OnInit, OnDestroy{
       private uiLayerModelService: UILayerModelService,
       private filterService: FilterService,
       private sidebarService: SidebarService,
+      private userStateService: UserStateService,
+      private authService: AuthService
       ) {
   }
-  toggleSidebar() {
+
+  /**
+   * Toggle sidebar
+   */
+  public toggleSidebar() {
     this.sidebarService.toggleSidebar();
   }
+
   /**
    * Initialise Component
    */
-    public ngOnInit() {
-      const me = this;
-      this.sidebarSubscription = this.sidebarService.isSidebarOpen$.subscribe(
-        isOpen => {
-          this.isSidebarOpen = isOpen;
-        }
-      );
-      // Initialise layers and groups in sidebar
-      this.layerHandlerService.getLayerRecord().subscribe(
-        response => {
-          me.layerGroupColumn = response;
-          // Loop over each group of layers
-          for (const group in me.layerGroupColumn) {
-            // Loop over each layer in a group
-            for (let layer_idx = 0; layer_idx < me.layerGroupColumn[group].length; layer_idx++) {
-  
-              // Initialise a list of cesium layers
-              me.layerGroupColumn[group][layer_idx].csLayers = [];
-              // Initialise UILayerModel
-              const uiLayerModel = new UILayerModel(me.layerGroupColumn[group][layer_idx].id, me.renderStatusService.getStatusBSubject(me.layerGroupColumn[group][layer_idx]));
-              me.uiLayerModelService.setUILayerModel(me.layerGroupColumn[group][layer_idx].id, uiLayerModel);
-  
-            }
+  public ngOnInit() {
+    const me = this;
+    this.sidebarSubscription = this.sidebarService.isSidebarOpen$.subscribe(
+      isOpen => {
+        this.isSidebarOpen = isOpen;
+      }
+    );
+    // Initialise layers and groups in sidebar
+    this.layerHandlerService.getLayerRecord().subscribe(
+      response => {
+        me.layerGroupColumn = response;
+        // Loop over each group of layers
+        for (const group in me.layerGroupColumn) {
+          // Loop over each layer in a group
+          for (let layer_idx = 0; layer_idx < me.layerGroupColumn[group].length; layer_idx++) {
+
+            // Initialise a list of cesium layers
+            me.layerGroupColumn[group][layer_idx].csLayers = [];
+            // Initialise UILayerModel
+            const uiLayerModel = new UILayerModel(me.layerGroupColumn[group][layer_idx].id, me.renderStatusService.getStatusBSubject(me.layerGroupColumn[group][layer_idx]));
+            me.uiLayerModelService.setUILayerModel(me.layerGroupColumn[group][layer_idx].id, uiLayerModel);
           }
-          Object.keys(me.layerGroupColumn).forEach(group => {
-            me.layerGroupColumn[group].sort((a, b) => a.name.localeCompare(b.name));
-          });
-      });
-    }
-    ngOnDestroy(): void {
-        if (this.sidebarSubscription) {
-          this.sidebarSubscription.unsubscribe();
+        }
+        // Sort alphabetically by group name
+        Object.keys(me.layerGroupColumn).forEach(group => {
+          me.layerGroupColumn[group].sort((a, b) => a.name.localeCompare(b.name));
+        });
+      }
+    );
+  }
+
+  /**
+   * Called after Angular has initialised the view
+   */
+  public ngAfterViewInit() {
+    const me = this;
+    this.userStateService.getBookmarks().subscribe(bookMarkList => {
+      me.layerBookmarked = {}
+      for (const bookMark of bookMarkList) {
+        me.layerBookmarked[bookMark.fileIdentifier] = true;
+      }
+    });
+  }
+
+  /**
+   * Check is user is currently logged in
+   *
+   * @returns true if user is logged in, false otherwise
+   */
+  public isUserLoggedIn(): boolean {
+    return this.authService.isLoggedIn;
+  }
+
+  /**
+   * See whether a layer group contains a layer that has been bookmarked by the user
+   *
+   * @param layerGroupKey the key (string) of the layer group
+   * @returns true iff the layer group contains a layer that has been bookmarked, false otherwise
+   */
+  public layerGroupHasBookmarkedLayer(layerGroupKey: string): boolean {
+    if (this.layerGroupColumn.hasOwnProperty(layerGroupKey)) {;
+      for (const layer of this.layerGroupColumn[layerGroupKey]) {
+        if (this.layerBookmarked?.hasOwnProperty(layer.id) && this.layerBookmarked[layer.id]) {
+          return true;
         }
       }
+    }
+    return false;
+  }
+
+  /**
+   * Called when component destroyed
+   */
+  ngOnDestroy(): void {
+    if (this.sidebarSubscription) {
+        this.sidebarSubscription.unsubscribe();
+    }
+  }
+
   /**
    * Select a group
    * 
@@ -138,11 +194,22 @@ export class BrowsePanelComponent implements OnInit, OnDestroy{
 
   /**
    * Is this group selected?
-   * 
+   *
    * @param layerGroup group
    * @returns true if this group is selected
    */
   public isGroupSelected(layerGroup: any) {
     return this.layerColumn === layerGroup.value;
   }
+
+  /**
+   * Checks if a layer has been bookmarked
+   *
+   * @param layerId layer id
+   * @returns boolean, true iff layer has been bookmarked
+   */
+
+  public checkLayerBookmarked(layerId: string) {
+    return this.layerBookmarked?.hasOwnProperty(layerId) && this.layerBookmarked[layerId];
+  }
 }
diff --git a/src/app/menupanel/activelayers/activelayerspanel.component.ts b/src/app/menupanel/activelayers/activelayerspanel.component.ts
index 369217e1..410ed5a0 100644
--- a/src/app/menupanel/activelayers/activelayerspanel.component.ts
+++ b/src/app/menupanel/activelayers/activelayerspanel.component.ts
@@ -45,7 +45,7 @@ export class ActiveLayersPanelComponent implements AfterViewInit {
   areLayersPolygonFiltered: boolean;
 
   // User bookmarks (if logged in and stored)
-  bookmarks: Bookmark[];
+  bookmarks: Bookmark[] = [];
   showingOnlyBookmarkedLayers = false;
   isSidebarOpen = false;
 
@@ -59,17 +59,31 @@ export class ActiveLayersPanelComponent implements AfterViewInit {
         this.areLayersPolygonFiltered = filterLayers;
       });
     }
-  toggleSidebar() {
+
+  /**
+   * Open or close sidebar
+   */
+  public toggleSidebar() {
     this.isSidebarOpen = !this.isSidebarOpen;
-    console.log(this.isSidebarOpen);
   }
-  openSidebar() {
+
+  /**
+   * Open sidebar
+   */
+  public openSidebar() {
     this.isSidebarOpen = true;
   }
 
-  closeSidebar() {
+  /**
+   * Close sidebar
+   */
+  public closeSidebar() {
     this.isSidebarOpen = false;
   }
+
+  /**
+   * Called after view is initialised
+   */
   public ngAfterViewInit() {
     const stateId = UtilitiesService.getUrlParameterByName('state');
     const me = this;
@@ -93,6 +107,16 @@ export class ActiveLayersPanelComponent implements AfterViewInit {
       // Load state layers in corresponding FilterPanels
       this.loadFilterPanelLayersFromState(layerStateObj);
     });
+
+    // Look for bookmarks, if there are any
+    this.userStateService.getBookmarks().subscribe({
+      next: (bookMarkList: Bookmark[]) => {
+        me.bookmarks = [];
+        for (const bookMark of bookMarkList) {
+            me.bookmarks.push(bookMark);
+        }
+      }
+  });
   }
 
   /**
@@ -150,6 +174,7 @@ export class ActiveLayersPanelComponent implements AfterViewInit {
 
   /**
    * Retrieve UILayerModel from the UILayerModelService
+   *
    * @param layerId ID of layer
    */
   public getUILayerModel(layerId: string): UILayerModel {
@@ -173,7 +198,8 @@ export class ActiveLayersPanelComponent implements AfterViewInit {
   }
 
   /**
-   * Determine if a layer hsould have an opacity slider
+   * Determine if a layer should have an opacity slider
+   *
    * @param layer the layer
    * @returns true if a layer should have an opacity slider, false otherwise
    */
@@ -183,6 +209,7 @@ export class ActiveLayersPanelComponent implements AfterViewInit {
 
   /**
    * Layer opacity slider change event
+   *
    * @param value slider change event
    * @param layer the layer object
    */
@@ -192,6 +219,9 @@ export class ActiveLayersPanelComponent implements AfterViewInit {
 
   /**
    * Split buttons will only be displayed if the split map is shown and the layer has started (or completed) rendering.
+   *
+   * @param layer the layer to show buttons on
+   * @returns boolean
    */
   public getShowSplitMapButtons(layer: LayerModel): boolean {
     return this.csMapService.getSplitMapShown() &&
@@ -225,7 +255,8 @@ export class ActiveLayersPanelComponent implements AfterViewInit {
   }
 
   /**
-   * Get the ImagerySplitrDirection of a layer as a string (template can't access SplitDirection)
+   * Get the ImagerySplitDirection of a layer as a string (template can't access SplitDirection)
+   *
    * @param layerId the ID of the layer
    */
   public getLayerSplitDirection(layerId: string): string {
@@ -253,7 +284,7 @@ export class ActiveLayersPanelComponent implements AfterViewInit {
   }
 
   /**
-   * open the modal that display the status of the render
+   * Open the modal that display the status of the render
    */
    public openStatusReport(uiLayerModel: UILayerModel) {
     this.bsModalRef = this.modalService.show(NgbdModalStatusReportComponent, {class: 'modal-lg'});
@@ -299,7 +330,7 @@ export class ActiveLayersPanelComponent implements AfterViewInit {
   }
 
   /**
-   * Check whether a legend is already being displayed for alyer
+   * Check whether a legend is already being displayed for layer
    *
    * @param layerId the ID of the layer
    * @returns true if a legend is being displayed for the supplied layer, false otherwise
@@ -310,6 +341,7 @@ export class ActiveLayersPanelComponent implements AfterViewInit {
 
   /**
    * Event fired when a LayerModel has been been dropped after being dragged
+   *
    * @param event the CdkDragDrop event
    */
   public layerDropped(event: CdkDragDrop<LayerModel[]>) {
@@ -350,6 +382,7 @@ export class ActiveLayersPanelComponent implements AfterViewInit {
 
   /**
    * Check to see if a layer is supported to be added to the map
+   *
    * @param layer layer to check
    * @returns true if supported layer, false otherwise
    */
@@ -358,7 +391,8 @@ export class ActiveLayersPanelComponent implements AfterViewInit {
    }
 
   /**
-  * Check to see if a layer is support downloading
+  * Check to see if a layer supports downloading
+  *
   * @param layer layer to check
   * @returns true if supported layer, false otherwise
   */
@@ -402,7 +436,8 @@ export class ActiveLayersPanelComponent implements AfterViewInit {
 
   /**
    * Returns true if any layer in a layer group is active
-   * "layerGroup" - an instance of this.layerGroups[key].value
+   * 
+   * @param layerGroupValue - an instance of this.layerGroups[key].value
    */
   public isLayerGroupActive(layerGroupValue): boolean {
     for (const layer of layerGroupValue) {
@@ -424,7 +459,7 @@ export class ActiveLayersPanelComponent implements AfterViewInit {
  /**
    * Display the record information dialog
    *
-   * @param cswRecord CSW record for information
+   * @param layer layer for information
    */
   public displayRecordInformation(layer: any) {
     if (layer) {
@@ -438,6 +473,12 @@ export class ActiveLayersPanelComponent implements AfterViewInit {
     }
   }
 
+  /**
+   * Returns true iff info panel is visible
+   *
+   * @param layerId layer id
+   * @returns true iff info panel is visible
+   */
   public isInfoPanelExpanded(layerId: string): boolean {
     if (this.getUILayerModel(layerId)) {
       return this.getUILayerModel(layerId).tabpanel.infopanel.expanded;
@@ -445,6 +486,12 @@ export class ActiveLayersPanelComponent implements AfterViewInit {
     return false;
   }
 
+  /**
+   * Returns true iff filter panel is visible
+   * 
+   * @param layerId layer id
+   * @returns true iff filter panel is visible
+   */
   public isFilterPanelExpanded(layerId: string): boolean {
     if (this.getUILayerModel(layerId)) {
       return this.getUILayerModel(layerId).tabpanel.filterpanel.expanded;
@@ -452,6 +499,12 @@ export class ActiveLayersPanelComponent implements AfterViewInit {
     return false;
   }
 
+  /**
+   * Returns true iff download panel is visible
+   * 
+   * @param layerId layer id
+   * @returns true iff download panel is visible
+   */
   public isDownloadPanelExpanded(layerId: string): boolean {
     if (this.getUILayerModel(layerId)) {
       return this.getUILayerModel(layerId).tabpanel.downloadpanel.expanded;
@@ -459,9 +512,9 @@ export class ActiveLayersPanelComponent implements AfterViewInit {
     return false;
   }
 
-   /** Check is user is currently logged in
+  /** Check if user is currently logged in
    *
-   * @returns true if user is logge din, false otherwise
+   * @returns true if user is logged in, false otherwise
    */
   public isUserLoggedIn(): boolean {
     return this.authService.isLoggedIn;
@@ -498,30 +551,18 @@ export class ActiveLayersPanelComponent implements AfterViewInit {
     return false;
   }
 
-  /**
-   * See whether a layer group contains a layer that has been bookmarked by the user
-   *
-   * @param layerGroupKey the key (string) of the layer group
-   * @returns true if the layer group ocntains a layer that has been bookmarked, false otherwise
-   */
-  public layerGroupHasBookmarkedLayer(layerGroupKey: string): boolean {
-    /*if (this.layerGroups[layerGroupKey]) {
-      for (const layer of this.layerGroups[layerGroupKey]) {
-        if (this.bookmarks?.find(b => b.fileIdentifier === layer.id)) {
-          return true;
-        }
-      }
-    }*/
-    return false;
-  }
-
   /**
    * Add a layer bookmark
    *
    * @param layerId layer ID
    */
   public addLayerBookmark(layerId: string) {
+    if (this.bookmarks?.find(b => b.fileIdentifier === layerId)) {
+      return;
+    }
     this.userStateService.addBookmark(layerId);
+    const bookmark: Bookmark = { 'fileIdentifier': layerId, serviceId: ''};
+    this.bookmarks.push(bookmark);
   }
 
   /**
@@ -531,6 +572,7 @@ export class ActiveLayersPanelComponent implements AfterViewInit {
    */
   public removeLayerBookmark(layerId: string) {
     this.userStateService.removeBookmark(layerId);
+    this.bookmarks = this.bookmarks?.filter(b => b.fileIdentifier !== layerId);
   }
 
 }
diff --git a/src/app/services/user/user-state.service.ts b/src/app/services/user/user-state.service.ts
index 7d3baa5a..54bf64bf 100644
--- a/src/app/services/user/user-state.service.ts
+++ b/src/app/services/user/user-state.service.ts
@@ -1,8 +1,8 @@
-import { Inject, Injectable } from '@angular/core';
+import { Injectable } from '@angular/core';
 import { Bookmark } from 'app/models/bookmark.model';
 import { PermanentLink } from 'app/models/permanentlink.model';
 import { BehaviorSubject, Observable, of, throwError } from 'rxjs';
-import { catchError, map, take } from 'rxjs/operators';
+import { catchError, map, take, tap } from 'rxjs/operators';
 import { User } from '../../models/user.model';
 import { AuscopeApiService } from '../api/auscope-api.service';
 import { CsMapService, ManageStateService, Polygon, UtilitiesService } from '@auscope/portal-core-ui';
@@ -80,7 +80,9 @@ export class UserStateService {
    * @param layerId layer ID
    */
   public addBookmark(layerId: string) {
+    // Add bookmark to db via API
     this.apiService.addBookmark(layerId).subscribe(newBookmarkId => {
+      // Update local bookmark list
       this.bookmarks.pipe(take(1)).subscribe(currentBookmarks => {
         if (!currentBookmarks.find(b => b.fileIdentifier === layerId)) {
           const newBookmark: Bookmark = {
@@ -89,6 +91,7 @@ export class UserStateService {
             serviceId: ''
           }
           currentBookmarks.push(newBookmark);
+          this._bookmarks.next(currentBookmarks);
         }
       });
     });
@@ -103,7 +106,9 @@ export class UserStateService {
     this.bookmarks.pipe(take(1)).subscribe(currentBookmarks => {
       const bm = currentBookmarks.find(b => b.fileIdentifier === layerId);
       if (bm) {
+        // Remove bookmark from db via API
         this.apiService.removeBookmark(bm.id).subscribe(() => {
+          // Update local bookmarks list
           const newBookmarks = currentBookmarks.filter(b => b.id !== bm.id);
           this._bookmarks.next(newBookmarks);
         });
@@ -111,6 +116,15 @@ export class UserStateService {
     });
   }
 
+  /**
+   * Gets bookmarks
+   *
+   * @returns observable of bookmark list
+   */
+  public getBookmarks(): Observable<Bookmark[]> {
+    return this.bookmarks;
+  }
+
   /**
    * Retrieve a list of map states associated with the user
    */

From 25414b52287b2e2606baee16cc6e49ce779f4cb2 Mon Sep 17 00:00:00 2001
From: "stuart.woodman" <stuart.woodman@csiro.au>
Date: Thu, 30 May 2024 10:41:41 +1000
Subject: [PATCH 2/2] Hard-code width of Featured Layer Groups browse menu
 column so Firefox doesn't push Bookmarked checkbox onto the next row.

---
 src/app/browsepanel/browsepanel.component.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/browsepanel/browsepanel.component.html b/src/app/browsepanel/browsepanel.component.html
index d2dcf249..6ab7c933 100644
--- a/src/app/browsepanel/browsepanel.component.html
+++ b/src/app/browsepanel/browsepanel.component.html
@@ -11,7 +11,7 @@
 <div *ngIf="bShowBrowsePanel" class="browse-menu">
 	<!-- Layer Groups column -->
 	<div class="container text-left browse-menu-col">
-		<div style="font-weight: bold">Featured Layer Groups
+		<div style="font-weight: bold; width: 22rem; margin-bottom: 10px;">Featured Layer Groups
 			<!-- 'Bookmarked only' check box -->
 			<div *ngIf="isUserLoggedIn()" style="display: inline-block" class="form-check">
 				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;