From a96781c7249791066297e8900054c11f5c4366e2 Mon Sep 17 00:00:00 2001 From: rogup Date: Thu, 2 May 2024 16:25:03 +0100 Subject: [PATCH] Refresh search results when sidebar is refreshed, and allow subclasses of BaseSidebarView to choose how much of the UI is refreshed, based on whether the panel changed --- src/map-app/app/presenter/sidebar.ts | 23 +++++++++-- src/map-app/app/presenter/sidebar/base.ts | 17 ++++++-- .../app/presenter/sidebar/initiatives.ts | 40 +------------------ src/map-app/app/state-manager.ts | 6 +-- src/map-app/app/view/map/marker.ts | 7 +--- src/map-app/app/view/sidebar/base.ts | 11 +++-- src/map-app/app/view/sidebar/directory.ts | 10 +++++ 7 files changed, 58 insertions(+), 56 deletions(-) diff --git a/src/map-app/app/presenter/sidebar.ts b/src/map-app/app/presenter/sidebar.ts index 461b8792..09891574 100644 --- a/src/map-app/app/presenter/sidebar.ts +++ b/src/map-app/app/presenter/sidebar.ts @@ -1,6 +1,7 @@ import { Dictionary } from '../../common-types'; import { EventBus } from '../../eventbus'; import { MapUI } from '../map-ui'; +import { Initiative } from '../model/initiative'; import { SidebarView } from '../view/sidebar'; import { BasePresenter } from './base'; import { AboutSidebarPresenter } from './sidebar/about'; @@ -63,7 +64,7 @@ export class SidebarPresenter extends BasePresenter { if (name !== undefined) { // If name is set, change the current sidebar and then refresh this.sidebarName = name; - this.children[this.sidebarName]?.refreshView(); + this.children[this.sidebarName]?.refreshView(true); } else { // Just refresh the currently showing sidebar. @@ -76,11 +77,13 @@ export class SidebarPresenter extends BasePresenter { return; // No sidebars? Can't do anything. } - this.children[this.sidebarName]?.refreshView(); + this.children[this.sidebarName]?.refreshView(false); } } showSidebar() { + // Refresh the view before showing + this.children[this.sidebarName ?? 'undefined']?.refreshView(true); this.view.showSidebar(); } @@ -97,6 +100,14 @@ export class SidebarPresenter extends BasePresenter { this.view.hideInitiativeSidebar(); } + populateInitiativeSidebar(initiative: Initiative, initiativeContent: string) { + this.view.populateInitiativeSidebar(initiative, initiativeContent); + } + + showInitiativeList() { + this.view.showInitiativeList(); + } + hideInitiativeList() { this.view.hideInitiativeList(); } @@ -112,7 +123,7 @@ export class SidebarPresenter extends BasePresenter { }); EventBus.Sidebar.showDirectory.sub(() => { this.changeSidebar("directory"); - this.view.showInitiativeList(); + this.showSidebar(); }); EventBus.Sidebar.showDatasets.sub(() => { this.changeSidebar("datasets"); @@ -121,8 +132,12 @@ export class SidebarPresenter extends BasePresenter { EventBus.Sidebar.showSidebar.sub(() => this.showSidebar()); EventBus.Sidebar.hideSidebar.sub(() => this.hideSidebar()); EventBus.Sidebar.hideInitiativeSidebar.sub(() => this.hideInitiativeSidebar()); + EventBus.Sidebar.showInitiativeList.sub(() => this.showInitiativeList()); EventBus.Sidebar.hideInitiativeList.sub(() => this.hideInitiativeList()); - EventBus.Initiatives.reset.sub(() => this.changeSidebar()); + EventBus.Initiatives.reset.sub(() => { + this.changeSidebar(); + this.hideInitiativeList(); + }); EventBus.Initiatives.loadComplete.sub(() => this.changeSidebar()); } diff --git a/src/map-app/app/presenter/sidebar/base.ts b/src/map-app/app/presenter/sidebar/base.ts index 97f182b6..3de55e08 100644 --- a/src/map-app/app/presenter/sidebar/base.ts +++ b/src/map-app/app/presenter/sidebar/base.ts @@ -17,10 +17,12 @@ export abstract class BaseSidebarPresenter extends BasePresenter { super(); } - // If the sidebar wants to do something more than to get its view to refresh when the history buttons have been used, then - // it should override this definition with its own: + /** + * If the sidebar wants to do something more than to get its view to refresh when the history + * buttons have been used, then it should override this definition with its own. + */ historyButtonsUsed(): void { - this.view.refresh(); + this.view.refresh(false); } deselectInitiatives(): void { @@ -49,6 +51,15 @@ export abstract class BaseSidebarPresenter extends BasePresenter { this.historyButtonsUsed(); } + /** + * Refreshes the sidebar view + * + * @param changed true if we changed to this sidebar, false if it was already showing and we're + * just refreshing it. + */ + refreshView(changed: boolean) { + this.view.refresh(changed); + } onInitiativeClicked(initiative: Initiative): void { EventBus.Map.initiativeClicked.pub(initiative); diff --git a/src/map-app/app/presenter/sidebar/initiatives.ts b/src/map-app/app/presenter/sidebar/initiatives.ts index 9ad9c902..23b58a2c 100644 --- a/src/map-app/app/presenter/sidebar/initiatives.ts +++ b/src/map-app/app/presenter/sidebar/initiatives.ts @@ -1,9 +1,8 @@ import { EventBus } from '../../../eventbus'; import { InitiativesSidebarView } from '../../view/sidebar/initiatives'; import { BaseSidebarPresenter } from './base'; -import { SearchResults } from '../../../search-results'; import { Initiative } from '../../model/initiative'; -import { compactArray, toString as _toString } from '../../../utils'; +import { toString as _toString } from '../../../utils'; import { SidebarPresenter } from '../sidebar'; export class InitiativesSidebarPresenter extends BaseSidebarPresenter { @@ -11,7 +10,6 @@ export class InitiativesSidebarPresenter extends BaseSidebarPresenter { _eventbusRegister(): void { EventBus.Marker.selectionToggled.sub(initiative => this.onMarkerSelectionToggled(initiative)); - EventBus.Initiative.searchedInitiativeClicked.sub(initiative => this.searchedInitiativeClicked(_toString(initiative.uri, undefined))); } constructor(readonly parent: SidebarPresenter) { @@ -27,44 +25,10 @@ export class InitiativesSidebarPresenter extends BaseSidebarPresenter { changeFilters(propName: string, value?: string) { this.parent.mapui.changeFilters(propName, value); } - - notifyShowInitiativeTooltip(initiative: Initiative) { - EventBus.Map.needToShowInitiativeTooltip.pub(initiative); - } - - notifyHideInitiativeTooltip(initiative: Initiative) { - EventBus.Map.needToHideInitiativeTooltip.pub(initiative); - } - - historyButtonsUsed() { - //console.log("sidebar/initiatives historyButtonsUsed"); - //console.log(lastContent); - //this.notifyMarkersNeedToShowNewSelection(lastContent); - this.view.refresh(); - } - - initClicked(initiative: Initiative) { - EventBus.Directory.initiativeClicked.pub(initiative); - if (window.outerWidth <= 800) { - EventBus.Directory.initiativeClickedHideSidebar.pub(initiative); - } - } - - onInitiativeMouseoverInSidebar(initiative: Initiative) { - this.notifyShowInitiativeTooltip(initiative); - } - onInitiativeMouseoutInSidebar(initiative: Initiative) { - this.notifyHideInitiativeTooltip(initiative); - } - onMarkerSelectionToggled(initiative: Initiative) { this.parent.mapui.toggleSelectInitiative(initiative); - this.view.refresh(); - } - - searchedInitiativeClicked(uri?: string) { - if (uri) this.view.onInitiativeClicked(uri); + this.view.refresh(false); } performSearch(text: string) { diff --git a/src/map-app/app/state-manager.ts b/src/map-app/app/state-manager.ts index 36480c76..62ee9736 100644 --- a/src/map-app/app/state-manager.ts +++ b/src/map-app/app/state-manager.ts @@ -59,7 +59,7 @@ export class AppState { static applyTextSearch(initiatives: Set, textSearch?: TextSearch): Set { if (!textSearch) return initiatives; - if (textSearch.willMatch()) + if (textSearch.isEmpty()) return initiatives; return filterSet(initiatives, textSearch.predicate); } @@ -120,7 +120,7 @@ export class AppState { } get hasTextSearch(): boolean { - return this.textSearch.willMatch(); + return !this.textSearch.isEmpty(); } addTextSearch(textSearch: TextSearch): AppStateChange|undefined { @@ -233,7 +233,7 @@ export class TextSearch { .trim(); // trim whitespace from front and back } - willMatch() { + isEmpty() { return this.normSearchText === ''; } } diff --git a/src/map-app/app/view/map/marker.ts b/src/map-app/app/view/map/marker.ts index c9a4d8c2..7108f7a6 100644 --- a/src/map-app/app/view/map/marker.ts +++ b/src/map-app/app/view/map/marker.ts @@ -119,16 +119,13 @@ export class MapMarkerView extends BaseView { this.presenter.notifySelectionToggled(this.presenter.initiative); } else { console.log(this.presenter.initiative); - // this.presenter.notifySelectionSet(this.initiative); - EventBus.Directory.initiativeClicked.pub(this.presenter.initiative); + EventBus.Map.initiativeClicked.pub(this.presenter.initiative); } } setUnselected(initiative: Initiative) { //close pop-up this.presenter.mapUI.map?.closePopup(); - //close information on the left hand side (for smaller screens) - EventBus.Sidebar.hideInitiative.pub(); //reset the map vars and stop the zoom event from triggering selectInitiative ({target}) method //change the color of an initiative with a location @@ -210,7 +207,7 @@ export class MapMarkerView extends BaseView { let deselectInitiative = (e: leaflet.LeafletEvent) => { if (factory.geoClusterGroup.getVisibleParent(marker) !== marker) { this.setUnselected(initiative); - EventBus.Directory.initiativeClicked.pub(undefined); // deselects + EventBus.Map.initiativeClicked.pub(undefined); // deselects factory.geoClusterGroup.off("animationend", deselectInitiative); } } diff --git a/src/map-app/app/view/sidebar/base.ts b/src/map-app/app/view/sidebar/base.ts index d22b26fb..ecbd3f4d 100644 --- a/src/map-app/app/view/sidebar/base.ts +++ b/src/map-app/app/view/sidebar/base.ts @@ -13,8 +13,6 @@ export abstract class BaseSidebarView extends BaseView { static readonly accordionClasses = "w3-bar-item w3-tiny w3-light-grey w3-padding-small" + BaseSidebarView.hoverColour; static readonly sectionClasses = "w3-bar-item w3-small w3-white w3-padding-small"; - - abstract readonly presenter: BaseSidebarPresenter; @@ -85,10 +83,17 @@ export abstract class BaseSidebarView extends BaseView { } } - refresh() { + /** + * Refreshes the sidebar view + * + * @param changed true if we changed to this sidebar, false if it was already showing and we're + * just refreshing it. + */ + refresh(changed: boolean) { this.loadFixedSection(); this.loadHistoryNavigation(); // back and forward buttons this.loadScrollableSection(); + this.refreshSearchResults(); } /** diff --git a/src/map-app/app/view/sidebar/directory.ts b/src/map-app/app/view/sidebar/directory.ts index fffc668d..8fc60af1 100644 --- a/src/map-app/app/view/sidebar/directory.ts +++ b/src/map-app/app/view/sidebar/directory.ts @@ -27,6 +27,16 @@ export class DirectorySidebarView extends BaseSidebarView { this.title = presenter.parent.mapui.labels.directory; } + refresh(changed: boolean) { + this.loadHistoryNavigation(); + if (changed) { + // only need to load these if we changed to the directory sidebar + this.loadFixedSection(); + this.loadScrollableSection(); + } + this.refreshSearchResults(); + } + populateFixedSelection(selection: d3Selection): void { const that = this;