Ensure directory displays all categories after they are loaded

src/map-app/app/map-ui.ts

@@ -100,6 +100,7 @@ export class MapUI {
   onNewInitiatives() {
     const loadedInitiatives = this.dataServices.getAggregatedData().loadedInitiatives;
     this.stateManager.reset(loadedInitiatives);
+    this.refreshSidebar();
   }
 
   createPresenter(): MapPresenter {
@@ -186,7 +187,7 @@ export class MapUI {
 
   private refreshSidebar() {
     this.getSidebarPresenter(this).then((presenter) => {
-      presenter.changeSidebar();
+      presenter.refreshSidebar();
     });
   }
 
@@ -204,7 +205,6 @@ export class MapUI {
     if (initiative) {
       // Move the window to the right position first
       this.notifyMapNeedsToNeedsToSelectAndZoomOnInitiative(initiative);
-      this.refreshSidebar();
       // Populate the sidebar and highlight the intiative in the directory
       this.getSidebarPresenter(this).then((presenter) => {
         presenter.populateInitiativeSidebar(
@@ -220,8 +220,6 @@ export class MapUI {
         presenter.hideInitiativeSidebar();
       });
     }
-
-    this.refreshSidebar();
   }
 
   currentItem() {

src/map-app/app/presenter/map.ts

@@ -88,7 +88,7 @@ export class MapPresenter extends BasePresenter {
     console.log("onInitiativeComplete");
 
     // Call this last so map will have bounds set (else error!) 
-    this.mapUI.onNewInitiatives(); 
+    this.mapUI.onNewInitiatives();
   }
 
   private onInitiativeLoadMessage(error?: EventBus.Initiatives.DatasetError) {

src/map-app/app/presenter/sidebar.ts

@@ -48,10 +48,10 @@ export class SidebarPresenter extends BasePresenter {
       this.children.datasets = new DatasetsSidebarPresenter(this);
   }
 
-  // Changes or refreshes the sidebar
-  //
-  // @param name - the sidebar to change (needs to be one of the keys
-  // of this.sidebar)
+  /**
+   * Changes the sidebar
+   * @param name the sidebar to change (needs to be one of the keys of this.sidebar)
+   */
   changeSidebar(name?: string) {
     if (name !== undefined) {
       // Validate name
@@ -71,19 +71,39 @@ export class SidebarPresenter extends BasePresenter {
       // If nothing is showing, show the first. Or nothing, if none.
       if (!this.sidebarName) {
         const names = Object.keys(this.children);
-        if (names.length > 0)
+        if (names.length > 0) {
           this.sidebarName = names[0];
-        else
+          this.children[this.sidebarName]?.refreshView(true);
+        } else {
+          console.warn('No sidebars to show');
           return; // No sidebars? Can't do anything.
+        }
+      } else {
+        this.children[this.sidebarName]?.refreshView(false);
       }
-
-      this.children[this.sidebarName]?.refreshView(false);
+    }
+  }
+
+  /**
+   * Fully refresh the sidebar
+   */
+  refreshSidebar() {
+    if (!this.sidebarName) {
+      // If no sidebar is set, pick the first one
+      const names = Object.keys(this.children);
+      if (names.length > 0) {
+        this.sidebarName = names[0];
+        this.children[this.sidebarName]?.refreshView(true);
+      } else {
+        console.warn('No sidebars to show');
+        return; // No sidebars? Can't do anything.
+      }
+    } else {
+      this.children[this.sidebarName]?.refreshView(true);
     }
   }
 
   showSidebar() {
-    // Refresh the view before showing
-    this.children[this.sidebarName ?? 'undefined']?.refreshView(true);
     this.view.showSidebar();
   }
 
@@ -137,7 +157,6 @@ export class SidebarPresenter extends BasePresenter {
       this.changeSidebar();
       this.hideInitiativeList();
     });
-    EventBus.Initiatives.loadComplete.sub(() => this.changeSidebar());
   }
 
 }

src/map-app/app/view/sidebar.ts

@@ -102,25 +102,26 @@ export class SidebarView extends BaseView {
 
   showSidebar() {
     const sidebar = d3.select("#map-app-sidebar");
-    sidebar.on(
-      "transitionend",
-      (event: TransitionEvent) => {
-        const target = event.target as HTMLElement|undefined; // Seems to need coercion
-        if (!target || target?.className === "w3-btn") return;
-        if (event.propertyName === "transform") {
-            d3.select("#map-app-sidebar-button").on("click", () => this.hideSidebar());
-        }
-        this.updateSidebarWidth();
-      },
-      false
-    )
-      .classed("sea-sidebar-open", true);
+
+    if (!sidebar.classed("sea-sidebar-open")) {
+      sidebar.on(
+        "transitionend",
+        (event: TransitionEvent) => {
+          const target = event.target as HTMLElement|undefined; // Seems to need coercion
+          if (!target || target?.className === "w3-btn") return;
+          if (event.propertyName === "transform") {
+              d3.select("#map-app-sidebar-button").on("click", () => this.hideSidebar());
+          }
+          this.updateSidebarWidth();
+        },
+        false
+      )
+        .classed("sea-sidebar-open", true);
+    }
 
     if (!sidebar.classed("sea-sidebar-list-initiatives"))
       d3.select(".w3-btn").attr("title", this.presenter.mapui.labels.hideDirectory);
     d3.select("#map-app-sidebar i").attr("class", "fa fa-angle-left");
-
-    this.presenter.changeSidebar(); // Refresh the content of the sidebar
   }
 
   updateSidebarWidth() {
@@ -224,7 +225,7 @@ export class SidebarView extends BaseView {
       .append("button")
       .attr("class", "w3-button w3-border-0 ml-auto sidebar-button")
       .attr("title", `${this.presenter.mapui.labels.close} ${initiative.name}`)
-      .on("click", () => EventBus.Map.initiativeClicked.pub(undefined))
+      .on("click", this.hideInitiativeSidebar)
       .append("i")
       .attr("class", "fa " + "fa-times");
     initiativeContentElement

src/map-app/app/view/sidebar/base.ts

@@ -1,4 +1,4 @@
-// Set up the various sidebars
+import * as d3 from 'd3';
 import { BaseSidebarPresenter, NavigationCallback } from '../../presenter/sidebar/base';
 import {  BaseView  } from '../base';
 import { d3DivSelection, d3Selection } from '../d3-utils';
@@ -133,7 +133,13 @@ export abstract class BaseSidebarView extends BaseView {
         .attr("data-uid", _toString(initiative.uri))
         .classed(activeClass, true)
         .classed(nongeoClass, true)
-        .on("click", ()=> this.presenter.onInitiativeClicked(initiative))
+        .on("click", () => {
+          // Highlight the selected initiative in the list
+          d3.select(".sea-initiative-active").classed("sea-initiative-active", false);
+          d3.select('[data-uid="' + initiative.uri + '"]').classed("sea-initiative-active", true);
+
+          this.presenter.onInitiativeClicked(initiative);
+        })
         .on("mouseover", () => this.presenter.onInitiativeMouseoverInSidebar(initiative))
         .on("mouseout", () => this.presenter.onInitiativeMouseoutInSidebar(initiative));
     }
@@ -143,16 +149,19 @@ export abstract class BaseSidebarView extends BaseView {
     const labels = this.presenter.parent.mapui.labels;
 
     if (this.presenter.parent.showingDirectory()) {
+      const _this = this;
       container
         .append("button")
         // mobile only since these buttons already exist in the sidebar on larger screens
         .attr("class", "w3-button w3-border-0 mobile-only")
         .attr("title", labels.showDirectory)
         .on("click", function () {
-          EventBus.Map.clearFiltersAndSearch.pub();
+          if (_this.title !== labels.directory) {
+            EventBus.Map.clearFiltersAndSearch.pub();
+            EventBus.Markers.needToShowLatestSelection.pub([]);
+          }
           EventBus.Sidebar.hideInitiativeList.pub();
           EventBus.Sidebar.showDirectory.pub();
-          EventBus.Markers.needToShowLatestSelection.pub([]);
         })
         .append("i")
         .attr("class", "fa fa-bars");