@yz-social/civildefense.io 4.5.22 → 4.5.28

package/public/javascripts/alert.js

@@ -2,17 +2,20 @@ import * as L from 'leaflet';
 import { P2PWebNetwork } from './p2pWebNetwork.js';
 import { Int } from './translations.js';
 import { map, trackMap, showMessage } from './map.js';
-import { networkPromise, resetInactivityTimer, notificationsAllowed, tooltip, clickTip, openAbout, delay, osName } from './main.js';
+import { networkPromise, resetInactivityTimer, notificationsAllowed, tooltip, clickTip, getText, openAbout, delay, osName } from './main.js';
 import { consume } from './display.js';
 import { Hashtags } from './hashtags.js';
 import { Agent } from './agent.js';
 import { Conversation, Reply } from './conversation.js';
-import { alertTopic, topicRegion, topicCell, cellHex } from './versions.js';
-import { getContainingCells, getSubdivision, findCoverCellsByMinMaxLatLng } from './s2.js';
+import { alertTopic, topicRegion, cellHex, topicCell, topicTag } from './versions.js';
+import { getContainingCells, getSmallestCellId, getSubdivision, findCoverCellsByMinMaxLatLng, cellContains, pointFromLatLng, cellFromCellID } from './s2.js';
 const { localStorage, getComputedStyle, URL, URLSearchParams, domtoimage } = globalThis;
 
 
 export function getShareableURL(tag = null, tags = Hashtags.getSubscribe()) { // Answer a url that reflects application state.
+  // Regardless of whether an alert tag is given, the receiving user is always given a lat/lng:
+  // - To position their map with the same coverage as the sender
+  // - In case the alert has expired, rolled over, or included in an aggregate.
   const params = new URLSearchParams(location.search);
   const zoom = map.getZoom();
   const { lat, lng } = map.getCenter();
@@ -63,7 +66,9 @@ const ttl = 24 * 60 * 60e3; // 24 hours
 let openOnReceive = null;
 export function go({lat = null, lng = null, zoom = null, alert = null}) { // Go to specified location (if any) and open marker (if any).
   if (lat !== null && lng !== null) {
-    if (zoom) map.flyTo({lat, lng}, zoom);
+    lat = parseFloat(lat);
+    lng = parseFloat(lng);
+    if (zoom) map.flyTo({lat, lng}, parseFloat(zoom));
     else map.flyTo({lat, lng});
   }
   openOnReceive = null;
@@ -102,13 +107,294 @@ class AlertReply extends Reply {
 
 import { s2 } from 's2js';
 export class Alert extends Conversation { // A wrapper around L.marker
-  // When we resubscribe to different cells covering the same place, we will get the same
-  // sticky data. We don't want to change the marker. Fortunately, the publication to each
-  // of the cells (at different scales) are all published with the same data.
+  // For each hashtag, we subscribe to a set of non-overlapping cells at varying S2 levels that cover the current map.
+  // An Alert is made when a subscription handler fires, and it keeps information that is (mostly) true regardless of
+  // which cell brought it in. E.g., each alert has a bookkeeping tag that identifies that map-click, which is
+  // the same at all S2 levels, and forms the topic for replies to that alert. When the map changes and the subscriptions
+  // are updated, we try to re-use the same Alerts so that the markers don't flash and we don't create garbage.
+
+  // INSTANCE MANAGEMENT
+  // When there are "too many" instances in a cell (at any level), we replace the individual Alerts with a single larger aggregate.
+  // This allows us to handle any any quantity of Alerts in memory and visual clutter, and to not mislead users in the presence
+  // of publication topic "rollover". However, it greatly complicates insance management.
+
+  // Conversation.ensure is the subscription handler, and it keeps track of the instances by tag, initializing a new one if needed.
+  initialize({topic, payload, hashtag, tag, agent, issuedTime, ...rest}) { // Make appropriate instance for a new individual tag, or update aggregate.
+
+    const eventName = topic.name;
+    const subscriptions = this.constructor.subscriptions;
+    if (!Hashtags.isSubscribed(hashtag)) return null; // A subscribed event may have been in flight while unsubscribing. Caller destroys instance.
+    if (!subscriptions.hasOwnProperty(eventName)) return null; // An event may have been in flight while zooming or panning.
+    const now = Date.now(),
+	  expiration = issuedTime + ttl,
+          remaining = expiration - now;
+    if (remaining < 0) return null;  // Network shouldn't send us expired, but if it does, let its instance be destroyed.
+
+    let keep = this; // Instance to be kept as marker.
+    let aggregate = this.constructor.getAggregate(eventName); // If we already have one for this eventName
+
+    // Each new initialization gets counted, which may be more than the network rollover.
+    // We do not "back up" for deletions and expirations - i.e., subtract and possibly go back to individual alerts.
+    // Note that initialize() will not be called for an event handler that has a tag (msgId) the same as one we have already seen for a different cell scale.
+    subscriptions[eventName]++;
+    
+    if (aggregate) {
+      keep = null; // This new instance is superfluous. Tell ensure() to destroy it...
+      aggregate.lerp(eventName, payload.lat, payload.lng); // ...but nudge the existing aggregate towards us.
+    } else { // Does not exist yet
+      let {lat, lng, originalPosting} = payload;
+      lat = parseFloat(lat);
+      lng = parseFloat(lng);
+      if (this.constructor.cellCountOverLimit(eventName)) aggregate = this; // If now over, treat this marker as an aggregate.
+      const icon = this.constructor.makeIcon(hashtag, tag, aggregate);
+      const marker = this.marker = L.marker([lat, lng], {icon, autoPan: false}).addTo(map);
+      const region = P2PWebNetwork.regionCode(lat, lng);
+      hashtag = Hashtags.add(hashtag); // We already have it and are subscribing, but this updates our extended form if needed.
+      super.initialize({payload, hashtag, tag, agent, lat, lng, issuedTime, originalPosting, ...rest});
+      if (aggregate) {
+	// Destroy existing eventName markers and add their positions to the aggregate we are creating.
+	this.becomeAggregate(eventName);
+	this.constructor.clearEventMarkers(eventName, aggregate);
+      } else {
+	this.noteEventName(eventName);
+	marker.bindPopup('', {className: 'alert'}).on('popupopen', event => this.ensureContent(event.popup));
+	tooltip(marker.getElement(), Int`Show conversation for this ${hashtag} alert.`);
+	if (tag === openOnReceive) { // Bug! How can we handle URLs to an alert that has been aggregated?
+	  openOnReceive = false;
+	  this.openPopup();
+	}
+	networkPromise.then(async contact => { // Subscribe to replies to this tag, now that we have an alert for them to go to.
+	  contact.subscribe({eventName: tag, region, handler: data => this.ensure(data)});
+	});
+      }
+    }
+    const alert = aggregate || this;
+    alert.startExpiration('.alert-pin', remaining);
+    alert.showNotification({agent, issuedTime});
+    return keep;
+  }
+  update({topic, ts, ...rest}) { // Called when handling an existing Conversation. super confirms that nothing immutable has changed.
+    return super.update({...rest}); // topic and ts vary with level, and so must not be part of ensure/update checks.
+  }
+  async destroy(markerDelayMS = 400) { // Remove this Alert pin entirely, either through unpublish, expiration, or conversion of a cell to aggregate.
+    // We do not decrement Alert.subscriptions[this.eventName] and unaggregate into individual markers.
+    // That won't happen until the user completely unsubscribes from this cell and resubscribes (by toggle or map movement).
+    clearInterval(this['.alert-pin']);
+    clearInterval(this['.alert-commented']);
+    clearInterval(this.destroyer);
+    this.clearAvatars();
+    const {isAggregate, marker, tag, region} = this;
+    // Unsubscribe from replies.
+    if (!isAggregate) networkPromise?.then(async contact => contact.subscribe({eventName: tag, region, handler: null}));
+    this.cellBorder?.removeFrom(map);
+    super.destroy();
+    if (markerDelayMS) {
+      marker.closePopup();
+      marker.unbindPopup(); // It would be confusing if it happens to be open, or clicked on while being removed.
+      marker.setOpacity(0);
+      await P2PWebNetwork.delay(markerDelayMS);
+    }
+    marker.removeFrom(map);
+  }
+
+  static subscriptionQueue = Promise.resolve(); // Serialize updates so they don't overlap each other.
+  static async updateSubscriptions({newKeys, oldKeys, throttleMS = 20} = {}) { // Update current subscriptions.
+    // A value of {} passed for oldKeys is used to start things off fresh (i.e., without supressing subscription of any carry-overs).
+    return this.subscriptionQueue = this.subscriptionQueue.then(async () => {
+      oldKeys ||= this.subscriptions;
+      newKeys ||= this.subscriptionFromMap();
+
+      if (!newKeys) return; // e.g., wacky computation. Don't change anything.
+      const contact = await networkPromise;
+      const dropped = [], added = [];
+      if (!contact) { console.warn("No network through which to subscribe."); return; } // Does this ever happen? Why?
+      this.subscriptions = newKeys; // Before subscribing.
+      const subscribe = async (eventName, handler) => {
+	if (!eventName) console.log('sub to no eventName', {oldKeys, newKeys, dropped, added, handler});
+	const region = topicRegion(eventName);
+	if (handler) Agent.current?.trackPublicChanges(region); // Background. No need to await.
+	await contact.subscribe({eventName, region, handler}).then(() => throttleMS && P2PWebNetwork.delay(throttleMS));
+      };
+      for (const key in newKeys) oldKeys.hasOwnProperty(key) || added.push(key);
+      for (const key in oldKeys) newKeys.hasOwnProperty(key) || dropped.push(key);
+      console.log('updating subscriptions', {added, dropped, newKeys, oldKeys});
+
+      // Before subscribing, as that that may bring in an alert with the same tag as one being cleared.
+      if (this.aggregateLimit) {
+	// TODO: more efficient way?
+	new Set(added.map(topicTag)).forEach(tag => {
+	  const hasTag = topicName => topicTag(topicName) === tag;
+	  this.transferOrClearEventMarkers(added.filter(hasTag), dropped.filter(hasTag), newKeys, oldKeys);
+	});
+      }
+
+      for (const key of added) await subscribe(key, data => Alert.ensure(data));
+      for (const key of dropped) await subscribe(key, null);
+    });
+  }
+
+  // Instance Management Internals
+  // In general here, a key is an eventName - i.e., a string <mumble>:<cellID>:<hashtag>.
+  // newKeys/oldKeys are a map of the currently subscribed eventName and the count of events for that cell+hashtag
   static subscriptions = {}; // maps currently active eventNames (<mumble>:<cellID>:<hashtag>) to count of event received for it.
+  static aggregateLimit = parseInt(new URLSearchParams(location.search).get('max') || 100);  // How many individuals are allowed before we aggregate.
+  static MAX_MAP_ZOOM = 19; // If the map is already zoomed to this, there's no place else to go.
+  static cellCountOverLimit(eventName, countsDictionary = this.subscriptions) { // Have we received enough that we must show an aggregate?
+    return (countsDictionary[eventName] >= this.aggregateLimit) && (map.getZoom() < this.MAX_MAP_ZOOM);
+  }
+  static getAggregate(eventName) { // Answer the existing aggregate for this cell, if any.
+    return this.getItem(eventName); // While individual Alerts are stored in items/conversations by tag, the tag for aggregate is the eventName.
+  }
+  logAlert(label = '') { // For debugging, when an individual or aggregate marker is clicked, show the alert, cell, and count in console.
+    const {lat, lng, tag, eventName} = this;
+    console.warn(`${label} lat: ${lat}, lng: ${lng}, ${eventName}: ${this.constructor.subscriptions[eventName]}, ${tag}`);
+  }
+  noteEventName(eventName) { // Be a part of the specified grouping.
+    if (this.eventName === eventName) return;
+    this.eventName = eventName;
+    if (!this.isAggregate) return;
+    this.cellBorder?.removeFrom(map);
+    const cell = cellFromCellID(topicCell(eventName));
+    const radiansToDegrees = 180 / Math.PI;
+    const corners = Array.from({ length: 4 }, (_, i) => {
+      const point = cell.vertex(i);
+      const latLng = s2.LatLng.fromPoint(point);
+      return [latLng.lat * radiansToDegrees, latLng.lng * radiansToDegrees];
+    });
+    const border = this.cellBorder = L.polygon(corners, {color: this.constructor.md_sys_color_secondary, fillOpacity: 0.1});
+    border.addTo(map);
+  }
+  static md_sys_color_secondary = '#BD2E2F';
+  static forEachAlertOf(eventName, callback, alerts = this.items) { // Apply callback to each of alerts matching eventName.
+    // TODO? Record a cell's Alert's more efficiently, so that we don't have to cycle through everything.
+    alerts.forEach((alert, index, alerts) => (alert.eventName === eventName) && callback(alert, index, alerts));
+  }
+  static clearEventMarkers(eventName, aggregate = null, alerts = this.items) { // destroy each, but
+    // if aggregate is specified, keep the aggregate and average all position into the aggregate.
+    if (!aggregate) return this.forEachAlertOf(eventName, alert => alert.destroy(), alerts);
+    const eachExceptAggregate = cb => this.forEachAlertOf(eventName, alert => (alert === aggregate) || cb(alert), alerts);
+    let lat = aggregate.lat, lng = aggregate.lng, count = 1;
+    if (aggregate.eventName != eventName) { // Loading from another eventName. Keep existing weight.
+      count = this.subscriptions[aggregate.eventName];
+      lat *= count;
+      lng *= count;
+    }
+    eachExceptAggregate(alert => { lat += alert.lat; lng += alert.lng; count++; });
+    lat /=  count;
+    lng /= count;
+    return this.forEachAlertOf(eventName, alert => {
+      alert.reposition(lat, lng);
+      if (alert !== aggregate) alert.destroy(400); // May or may not be default. Half the translation transition time.
+    }, alerts);
+  }
+  becomeAggregate(eventName) { // Make an individual alert be an aggregate
+    const {tag, marker, hashtag, region} = this;
+    const element = marker.getElement();
+    const pin = element.querySelector('.alert-pin');
+    this.isAggregate = true;
+    pin.classList.toggle('aggregate', true); pin.classList.toggle('starting', true);
+    setTimeout(() => pin.classList.toggle('starting', false), 100);
+    marker.unbindPopup();
+    marker.off('click');
+    marker.on('click', event => {
+      this.logAlert();
+      this.constructor.zoomOn(this.lat, this.lng, hashtag);
+    });
+    tooltip(element, Int`Zoom in on multiple alerts in this area.`);
+    this.noteEventName(this.tag = eventName);
+    if (tag !== eventName) {
+      networkPromise.then(async contact => contact.subscribe({eventName: tag, region, handler: null})); // Unsubscribe from replies.
+      this.items = [];
+      clearInterval(this['.alert-commented']);
+      element.querySelector('.alert-commented').style = "opacity: 0;";
+      this.constructor.removeItem(tag);
+    }
+    this.constructor.setItem(eventName, this);
+  }
+  static handleAggregation(droppedEventName, addedEventName, newCounts, alerts) { // Return aggregate if over limit, setting it up if necessary. Else null.
+    // If over limit, converts an addedEventName Alert if needed and clears the rest, and then clears all droppedEventName Alerts.
+    if (!this.cellCountOverLimit(addedEventName, newCounts)) return null;
+    let aggregate = this.getAggregate(addedEventName);
+    if (!aggregate) { // If no existing aggregate:
+      aggregate = alerts.find(alert => alert.eventName === droppedEventName); // Pick a dropped individual to become aggregate. There will be one, by construction.
+      aggregate.becomeAggregate(addedEventName);
+      this.clearEventMarkers(addedEventName, aggregate, alerts); // Kill the rest, adding their positions to the aggregate.
+    }
+    return aggregate;
+  }
+  static transferOrClearEventMarkers(added, dropped, newCounts, oldCounts) { // Clear dropped alerts as necessary,
+    // but try to preserve (individual and aggregated) alerts so that the markers don't flash.
+    const addedCells = added.map(topicCell); // List of BigInt, in same order as added eventNames.
+    const alerts = this.items;
+    dropped.sort((a, b) => oldCounts[b] - oldCounts[a]);  // So that we always process aggregates before related individuals.
+    dropped.forEach(droppedEventName => {
+      const droppedCell = topicCell(droppedEventName);
+      // Whether zooming in or out, each dropped cell may have added cells that contain it, or vice versa.
+      // We don't have to worry about cells that are neither added nor dropped, because those will not overlap added or dropped.
+
+      // Find the one added cell (if any) that contains the dropped cell. (Typically when zooming out.)
+      const containerIndex = addedCells.findIndex(added => cellContains(added, droppedCell));
+      if (containerIndex >= 0) {
+	const addedContainingEventName = added[containerIndex];
+	newCounts[addedContainingEventName] += oldCounts[droppedEventName]; // It all goes to the container, which may have already started filling.
+	const aggregate = this.handleAggregation(droppedEventName, addedContainingEventName, newCounts, alerts);
+	if (aggregate) {
+	  this.clearEventMarkers(droppedEventName, aggregate, alerts); // Absorb the discarded. Their distinctiveness will be added to our own.
+	  return;
+	}
+	this.forEachAlertOf(droppedEventName, alert => alert.noteEventName(addedContainingEventName)); // Label the dropped individual alerts for new container.
+	return;
+      }
+
+      const aggregate = this.getAggregate(droppedEventName);
+      if (aggregate) { // We don't know how mucch of this will be included in any added subregion, and cannot reconstruct where they were.
+	aggregate.destroy();
+	return;
+      }
+
+      // Find the 0-4 added cells that are contained by the dropped cell. (Typically when zooming in.)
+      const addedSubCells = addedCells.filter(added => cellContains(droppedCell, added));
+      // We don't know how many oldCounts to distribute to each subcell, so we have to work with each dropped alert's location.
+      if (addedSubCells.length) {
+	const addedS2Cells = addedSubCells.map(cellFromCellID);
+	this.forEachAlertOf(droppedEventName, alert => {
+	  const point = pointFromLatLng(alert.lat, alert.lng);
+	  const addedS2Cell = addedS2Cells.find(cell => cell.containsPoint(point));
+	  if (addedS2Cell) {
+	    const includedIndex = addedCells.indexOf(addedS2Cell.id);
+	    const addedIncludedEventName = added[includedIndex];
+	    newCounts[addedIncludedEventName] += 1;
+	    if (this.handleAggregation(droppedEventName, addedIncludedEventName, newCounts, alerts)) return;
+	    alert.noteEventName(addedIncludedEventName); // Leave this alert in place, but label where it belongs.
+	  } else {
+	    alert.destroy(); // This alert is not within an added subcell.
+	  }
+	}, alerts);
+	return;
+      }
+
+      // Otherwise, no overlap, so clear the (individual and aggregate) markers of the dropped cell.
+      this.clearEventMarkers(droppedEventName);
+    });
+  }
+  lerp(eventName, additionaLatitude, additionalLongitude) { // Move this Alert towards this location, inversely weight by count in cell.
+    const count = this.constructor.subscriptions[eventName];
+    const k = 1 / count;
+    const k1 = 1 - k;
+    const {lat, lng} = this;
+    this.reposition(k1 * lat + k * additionaLatitude,
+		    k1 * lng + k * additionalLongitude);
+  }
+  reposition(lat, lng) { // Update the marker's position for new data.
+    this.lat = lat;
+    this.lng = lng;
+    this.marker.setLatLng([lat, lng]);
+    this.startExpiration('.alert-pin', Date.now() + ttl);
+  }
+
   // We do not record exactly where you were looking across sessions, but we do record the containing level 9 cell.
   static lastLevel9Cell = null; // S2 level 9 cells average a radius of about 10km ~ 6.5 miles.
-  static subscriptionFromMap() { // Generate {eventName => count} for current map bounds.
+  static subscriptionFromMap() { // Generate new subscriptions list ({eventName => count}) for current map bounds.
     const center = map.getCenter();
     const bounds = map.getBounds();
     const northEast = bounds.getNorthEast();
@@ -123,84 +409,54 @@ export class Alert extends Conversation { // A wrapper around L.marker
     });
     if (!newCells) return null;
     const newKeys = {};
-
-    newCells.forEach(cell => Hashtags.getSubscribe().forEach(hash => {
+    newCells.forEach(cell => Hashtags.getSubscribe().forEach(hash => { // Populate count with existing count (exctly carried over cell sizes), else 0.
       const eventName = alertTopic(cell, hash);
       newKeys[eventName] = this.subscriptions[eventName] || 0;
     }));
     // Record a zoomed-out cell id in case next session does not have geolocation services.
-    let level9Cell = getContainingCells(center.lat, center.lng)[9];
+    let level9Cell = getSmallestCellId(center.lat, center.lng, 9);
     if (level9Cell !== this.lastLevel9Cell) localStorage.setItem('level9Cell', this.lastLevel9Cell = level9Cell);
     return newKeys;
   }
-  static async updateSubscriptions({
-    oldKeys = this.subscriptions,
-    newKeys = this.subscriptionFromMap(),
-    throttleMS = 20
-  } = {}) { // Update current subscriptions.
-    // A value of {} passed for oldKeys is used to start things off fresh (i.e., without supressing subscription of any carry-overs).
-    if (!newKeys) return; // e.g., wacky computation. Don't change anything.
-    const contact = await networkPromise;
-    if (!contact) { console.warn("No network through which to subscribe."); return; } // Does this ever happen? Why?
-    this.subscriptions = newKeys; // Before subscribing.
-    const subscribe = async (key, handlerIn) => {
-      const handler = handlerIn && (properties => {
-	// When there are enough alerts within a topic, it rolls over and just reports the most recent number.
-	// When get near that count, we update the subscriptions such that the overloading topic is replaced
-	// with the topics for each of the four subcells that that make up the one with too many alerts.
-	// This repeats until we reach cells that are not rolling over.
-	const maxAlertsInCell = 900;
-	let count = ++newKeys[key];
-	handlerIn(properties);
-	if (count >= maxAlertsInCell) {
-	  let nextKeys = {};
-	  for (const old in newKeys) {
-	    if (old !== key) {
-	      nextKeys[old] = newKeys[old];
-	    } else {
-	      const cellTag = topicCell(key);
-	      const subdivisions = getSubdivision(cellTag);
-	      const topics = subdivisions.map(cellTag => alertTopic(cellTag, properties.hashtag));
-	      console.log('subdividing', key, 'into', topics);
-	      topics.forEach(topic => nextKeys[topic] = 0);
-	    }
-	  }
-	  this.updateSubscriptions({oldKeys: newKeys, newKeys: nextKeys, throttleMS});
-	}
-      });
-      const region = topicRegion(key);
-      Agent.current?.trackPublicChanges(region); // Background. No need to await.
-      await contact.subscribe({eventName: key, region, handler}).then(() => throttleMS && P2PWebNetwork.delay(throttleMS));
-    };
-    console.log('updating subscriptions', {newKeys, oldKeys});
-    // For each entry in the new subscription set that was not previously subscribed, subscribe now.
-    for (const key in newKeys) oldKeys.hasOwnProperty(key) || await subscribe(key, data => Alert.ensure(data));
-    // For each existing subscription, if it does not appear in the new set then unsubscribe.
-    for (const key in oldKeys) newKeys.hasOwnProperty(key) || await subscribe(key, null);
-  }
+
+  // PUBLISHING NEW ALERTS
+  // Each map click publishes to that point at each supported S2 level that contains it, so that any map display of
+  // non-overlapping cells will catch it. (Network subscriptions are much more expensive than publishing, and the app
+  // users watch more than they publish, so we minimize the number of subscriptions that a user has at any moment.)
+
+  // The app (not the network) restricts the user to publish up to maxPublish alerts over the last maxPublish minutes.
+  // I.e., one / minute, but allowing bursts up to maxPublish. After that, one can still publish, but kill the oldest.
+  // We keep enough data in memory that we can reproduce what to kill,m even if Alert has since scrolled off the map and been destroyed.
   static maxPublish = 5;
   static publishing = false;
-  static lastPublished = []; // Last published lat, lng, tag
+  static lastPublished = []; // Last published lat, lng, hashtag
   // Publish an alert to all applicable eventNames, canceling as required. Promises tag (msgId).
   static async publish({lat, lng,
 			originalPosting = undefined,
 			hashtag = Hashtags.getPublish(true),
-			payload = {lat, lng, originalPosting}, // If payload is null (cancels subject), lat & lng are still used to generate eventNames.
+			payload = {lat, lng, originalPosting}, // If payload is null (cancels tag), lat & lng are still used to generate eventNames.
 			cancel = undefined, // First unpublish the specified data, if any. Complicated default.
-			issuedTime = Date.now(), subject,
+			issuedTime = Date.now(), tag,
 			throttleMS = 0,
 			...rest
 		       }) {
-    // We call all the publishing at once and return subject, without waiting for each to occur.
+    // We call all the publishing at once and return tag, without waiting for each to occur.
     // However, the 'unpublishing' (if any) is invoked first.
     // To do this, we must hash the eventName ourselves.
-    //console.log('publish', {lat, lng, hashtag, payload, cancel, subject, issuedTime, rest});
+    //console.log('publish', {lat, lng, hashtag, payload, cancel, tag, issuedTime, rest});
     if (this.publishing) { console.log('skiping overlapping publish'); return null; } // do not stack them up.
     try {
       this.publishing = true;
+      const cells = getContainingCells(lat, lng);
+      const eventNames = cells.map(cell => alertTopic(cell, hashtag));
+      if (payload && eventNames.some(eventName => this.getAggregate(eventName))) { // Attemtpt to publish where we are showing an aggregate.
+	// There could already be an alert there, so zoom instead.
+	this.zoomOn(lat, lng, hashtag);
+	return null;
+      }
 
       const contact = await networkPromise; // subtle: The rest of this all happens synchronously, with any null payloads definitely first.
-      let oldCells = null, oldHash, oldSubject = null; // Recorded for logging, below.
+      let oldCells = null, oldHash, oldTag = null; // Recorded for logging, below.
       let lastFillIn;
       if (payload) {
 	lastFillIn = {lat, lng, hashtag, issuedTime};
@@ -213,55 +469,57 @@ export class Alert extends Conversation { // A wrapper around L.marker
 	}
       }
       if (cancel) {
-	const {lat, lng, hashtag, subject} = cancel;
+	const {lat, lng, hashtag, tag} = cancel;
 	oldCells = getContainingCells(lat, lng);
-	oldHash = hashtag; oldSubject = subject;
+	oldHash = hashtag; oldTag = tag;
 	const region = P2PWebNetwork.regionCode(lat, lng);
 	for (const cell of oldCells) {
 	  const eventName = alertTopic(cell, hashtag);
 	  // Note: we cannot unpublish replies by others, but they expire after a while anyway.
-	  await contact.publish({eventName, region, killTag: subject, payload: null});
+	  await contact.publish({eventName, region, killTag: tag, payload: null});
 	  throttleMS && await P2PWebNetwork.delay(throttleMS);
 	}
       }
 
-      const cells = getContainingCells(lat, lng);
       const region = P2PWebNetwork.regionCode(lat, lng);
-      for (const cell of cells) {
-	const eventName = alertTopic(cell, hashtag);
+      for (const eventName of eventNames) {
 	if (payload) {
 	  // The Axona message will be {hashtag, issuedTime, payload:{lat, lng, originalPosting}}
 	  // and when combined with the publisher's authorId will be unique to this user/time/hashtag,
 	  // and yet the same for each of the individual publications at the different s2 scales.
 	  const msgId = await contact.publish({eventName, region, payload, issuedTime, hashtag, ...rest});
-	  if (subject && subject !== msgId) throw new Error(`msgId is drifting: ${subject} => ${msgId}`);
-	  subject = msgId;
+	  if (tag && tag !== msgId) throw new Error(`msgId is drifting: ${tag} => ${msgId}`);
+	  tag = msgId;
 	  if (lastFillIn) {
-	    lastFillIn.subject = subject;
+	    lastFillIn.tag = tag;
 	    lastFillIn = null;
 	  }
 	} else {
-	  await contact.publish({eventName, region, killTag: subject, payload: null});
+	  await contact.publish({eventName, region, killTag: tag, payload: null});
 	  throttleMS && await P2PWebNetwork.delay(throttleMS);
 	}
       }
       if (!payload) {
-	const index = this.lastPublished.findIndex(past => past.subject === subject);
+	const index = this.lastPublished.findIndex(past => past.tag === tag);
 	if (index >= 0) this.lastPublished.splice(index, 1);
       }
-      console.log('Published', {cells, n: cells.length, region, hashtag, subject, payload, oldCells, oldHash, oldSubject});
-      return subject;
+      console.log('Published', {cells, n: cells.length, region, hashtag, tag, payload, oldCells, oldHash, oldTag});
+      return tag;
     } finally {
       this.publishing = false;
     }
   }
+  static zoomOn(lat, lng, hashtag = '', zoom = map.getZoom() + 1) {
+    if (hashtag) showMessage(Int`There are already at least ${this.aggregateLimit} alerts of type "${hashtag}" in the colored region. Zooming in to get a better look.`);
+    map.setZoomAround([lat, lng], zoom);
+  }
   
   static noMessage = Int`No additional information.`;
   static closePopup() { // Close any open popup.
     map.closePopup();
     Hashtags.closeSelector();
   }
-  static openPopup(alertTag) { // Open the marker specified by subject.
+  static openPopup(alertTag) { // Open the marker specified by tag.
     const wrapper = this.getItem(alertTag);
     wrapper?.openPopup() || (openOnReceive = alertTag);
   }
@@ -274,9 +532,10 @@ export class Alert extends Conversation { // A wrapper around L.marker
     }
     this.marker.openPopup();
   }
-  static makeIcon(hashtag) { // Return a Leaflet icon. TODO: are these cacheable and reusable?
+  static makeIcon(hashtag, tag, isAggregate = false) { // Return a Leaflet icon. 
+    // tag is handy for debugging. TODO: are these cacheable and reusable?
     return L.divIcon({
-      html: `<div class="alert-commented"></div><div class="alert-pin">${Hashtags.formatAlert(hashtag)}</div>`,
+      html: `<div class="alert-commented"></div><div class="alert-pin${isAggregate ? ' aggregate' : ''}" data-debug="${tag}">${Hashtags.formatAlert(hashtag)}</div>`,
       iconSize: [40, 40],
       popupAnchor: [0, 0],
       className: 'alert-marker'
@@ -286,12 +545,12 @@ export class Alert extends Conversation { // A wrapper around L.marker
     this.items.forEach(wrapper => {
       const { hashtag, marker, agent } = wrapper;
       if (hashtag !== canonicalHashtag) return;
-      const newIcon = this.makeIcon(extendedHashtag);
-      const popup = marker.getPopup();
+      const newIcon = this.makeIcon(extendedHashtag, wrapper.tag);
       marker.setIcon(newIcon);
       wrapper.hashtag = extendedHashtag;
       wrapper.needsRedisplay = true; // See comment for initializeHandlers. We need to clear and rebuild content on re-open.
-      if (!popup.isOpen()) return;
+      const popup = marker.getPopup();
+      if (!popup?.isOpen()) return; // Either an aggregate or closed.
       // Fix what's showing now without flashing everything. Make sure menu works.
       const popupAttribution = popup.getElement().querySelector('.attribution');
       const attributionActions = popupAttribution.lastElementChild;
@@ -300,45 +559,12 @@ export class Alert extends Conversation { // A wrapper around L.marker
       wrapper.initChangeHashtag(popupAttribution);
     });
   }
-  static async ensure({tag, topic, ts, issuedTime, ...rest}) { // Add marker at position with appropriate fade if not already present.
-    const alert = await super.ensure({tag, subject: tag, issuedTime, ...rest}); // Does not include topic or ts. fixme: get rid of subject. fixme: why is ts different?
-    if (!alert) return null;
-    // Regardless of initialize vs update, reset fader.
-    const now = Date.now(),
-	  expiration = issuedTime + ttl,
-          remaining = expiration - now;
-    if (remaining < 0) return alert?.destroy();  // Expired.
-    alert.startFader('.alert-pin', remaining); // From the new value of remaining, after marker is set in wrapper, regardless of popup/dirty state.
-    alert.destroyer = setTimeout(() => alert.destroy(), remaining);
-    return alert;
-  }
-  initialize({payload, hashtag, subject, agent, issuedTime, ...rest}) { // Set up the marker for a newly received alert.
-    if (!payload) return null; // Do not cache. E.g., Received a delete event without the initial creation.
-    if (!Hashtags.isSubscribed(hashtag)) return null; // A subscribed event may have been in flight while unsubscribing.
-    const icon = this.constructor.makeIcon(hashtag);
-    const {lat, lng, originalPosting} = payload;
-    const marker = this.marker = L.marker([lat, lng], {icon, autoPan: false}).addTo(map);
-    const region = P2PWebNetwork.regionCode(lat, lng);
-    hashtag = Hashtags.add(hashtag); // We already have it and are subscribing, but this updates our extended form if needed.
-    super.initialize({payload, hashtag, subject, agent, lat, lng, issuedTime, originalPosting, ...rest});
-
-    marker.bindPopup('', {className: 'alert'}).on('popupopen', event => this.ensureContent(event.popup));
-    tooltip(marker.getElement(), Int`Show conversation for this ${hashtag} alert.`);
-    if (subject === openOnReceive) {
-      openOnReceive = false;
-      this.openPopup();
-    }
-    // Subscribe to replies to this subject, now that we're set up to receive them.
-    networkPromise.then(async contact => {
-      contact.subscribe({eventName: subject, region, handler: data => this.ensure(data)});
-    });
-    this.showNotification({agent, issuedTime});
-    return this;
-  }
 
   needsRedisplay = true;
   ensureContent(popup = this.marker.getPopup()) { // Set content and handlers in popup if/as needed.
+    if (!popup) return;
     if (!popup.isOpen()) return;
+    this.logAlert();
     if (!this.needsRedisplay) {
       this.initializeHandlers(popup);
       return;
@@ -352,8 +578,14 @@ export class Alert extends Conversation { // A wrapper around L.marker
     delay(100).then(() => {
       this.marker.getPopup().update();
       this.initializeHandlers(popup);
+      this.teach('firstConversation');
+      if (Agent.isMine(this.agent)) this.teach('firstPublish');
     });
-    console.warn(`latitude: ${this.lat}, longitude: ${this.lng}`);
+  }
+  teach(classname) {
+    if (localStorage.getItem(classname)) return;
+    localStorage.setItem(classname, '1');
+    document.body.classList.toggle(classname, true);
   }
   clearAvatars(popup = this.marker?.getPopup()) {
     popup?.getElement()?.querySelectorAll('.correspondent[data-tag]')
@@ -365,6 +597,7 @@ export class Alert extends Conversation { // A wrapper around L.marker
     const replyButton = replyInput.querySelector('md-filled-icon-button');
     const replyAttachButton = replyInput.querySelector('md-tonal-icon-button');
     const fileChooser = popupElement.querySelector('input[type="file"]');
+    replyInput.onfocus = event => resetInactivityTimer();
     replyInput.oninput = event => {
       replyButton.removeAttribute('disabled');
       const input = event.currentTarget;
@@ -373,7 +606,7 @@ export class Alert extends Conversation { // A wrapper around L.marker
       input.rows = internalHighWater;
     };
     clickTip(replyButton, Int`Post your reply.`, event => this.postReply(event));
-    clickTip(replyAttachButton, Int`Attach a file to your reply.`, event => { resetInactivityTimer(); fileChooser.click(); });
+    clickTip(replyAttachButton, getText('.teach.attach'), event => { resetInactivityTimer(); fileChooser.click(); });
     fileChooser.onchange = event => {
       resetInactivityTimer();
       replyButton.removeAttribute('disabled');
@@ -388,9 +621,7 @@ export class Alert extends Conversation { // A wrapper around L.marker
       const isAvatar = correspondent.classList.contains('avatar');
       if (agent.addElement(correspondent, 'mixed', isAvatar ? 'avatar' : 'handle')) {
 	const isMine = Agent.isMine(tag);
-	clickTip(correspondent, isMine ?
-		 Int`Control how others see me.` :
-		 Int`Control how this person is labeled on my device.`,
+	clickTip(correspondent, getText((isMine ? '.firstPublish' : '.firstConversation') + ' .teach.correspondent'),
 		 event => {
 		   if (isMine) openAbout(event);
 		   else agent.describe(event);
@@ -409,20 +640,20 @@ export class Alert extends Conversation { // A wrapper around L.marker
     const shareable = popupElement.querySelectorAll('.share');
     for (const element of shareable) clickTip(element, element.closest('.reply') ?
 					      Int`Share though ${osName()} the text and attachments of this reply, with a link to open this alert.` :
-					      Int`Share through ${osName()} a link to open this alert.`, event => this.share(event));
+					      getText('.teach.share'), event => this.share(event));
   }
   initChangeHashtag(someParent) { // Init handler on the menu button, if any, as (re-) init of menu for open popup
     const changeHashtag = someParent.querySelector('.changeHashtag');
     if (!changeHashtag) return;
     const menu = document.getElementById('popoverMenu');
     menu.anchorElement = changeHashtag;
-    clickTip(changeHashtag, Int`Change the topic or delete your alert.`, event => {
+    clickTip(changeHashtag, getText('.teach.changeHashtag'), event => {
       consume(event);
       menu.open = !menu.open;
       menu.onclick = consume; // Must be onlick rather than addEventListener.
       const handler = event => {
 	menu.removeEventListener('close-menu', handler);
-	this.updatePost(event.detail.initiator.dataset.tag);
+	this.updatePost(event.detail.initiator.dataset.tag); // initiator is a hashtag menu item and dataset.tag is a hashtag.
       };
       menu.addEventListener('close-menu', handler); // Must be addEventListener because there's no onclosemenu.
     });
@@ -467,16 +698,16 @@ export class Alert extends Conversation { // A wrapper around L.marker
   ${actions}
 </div>`;
   }
-  updatePost(newTag) { // Republish under a different hashtag, or cancel altogether if no newTag (which is not allowed as a hashtag).
+  updatePost(newHashtag) { // Republish under a different hashtag, or cancel altogether if no newHashtag (which is not allowed as a hashtag).
     resetInactivityTimer();
-    const {lat, lng, hashtag, subject, issuedTime, originalPosting = issuedTime} = this;
-    console.log("updatePost", {newTag, lat, lng, hashtag, subject, issuedTime, originalPosting, self:this});
-    if (!newTag) return Alert.publish({lat, lng, subject, originalPosting, hashtag, payload: null, cancel: null}); // Remove post with null payload, cancel.
-    if (newTag === hashtag) return this.needsRedisplay = true;
-    const cancel = {lat, lng, subject, hashtag}; // Cancel old hashtag as we publish newTag, below.
-    Hashtags.setPublish(newTag);
+    const {lat, lng, hashtag, tag, issuedTime, originalPosting = issuedTime} = this;
+    console.log("updatePost", {newHashtag, lat, lng, hashtag, tag, issuedTime, originalPosting, self:this});
+    if (!newHashtag) return Alert.publish({lat, lng, tag, originalPosting, hashtag, payload: null, cancel: null}); // Remove post with null payload, cancel.
+    if (newHashtag === hashtag) return this.needsRedisplay = true;
+    const cancel = {lat, lng, tag, hashtag}; // Cancel old hashtag as we publish newHashtag, below.
+    Hashtags.setPublish(newHashtag);
     Hashtags.onchange({redisplaySubscribers: false, resetSubscriptions: false});
-    return Alert.publish({lat, lng, hashtag: newTag, originalPosting, cancel}); // Publish new alert w/cancellation.
+    return Alert.publish({lat, lng, hashtag: newHashtag, originalPosting, cancel}); // Publish new alert w/cancellation.
   }
 
   // Each reply is separately published by its author, and only they can modify/unpublish it.
@@ -484,7 +715,6 @@ export class Alert extends Conversation { // A wrapper around L.marker
     return AlertReply;
   }
   async ensure(data) { // Add or update reply for this reply.
-    data.subject = data.tag; //fixme
     const remaining = data.issuedTime + ttl - Date.now();
     if (remaining < 0) return null;
     const reply = await super.ensure(data);
@@ -507,13 +737,13 @@ export class Alert extends Conversation { // A wrapper around L.marker
     this.ensureContent();
     return reply;
   }
-  async postReply(event) { // Post a reply to this marker's subject, in response to a text-field change event.
+  async postReply(event) { // Post a reply to this marker's tag, in response to a text-field change event.
     resetInactivityTimer();
     event.stopPropagation();
     const button = event.target;
     const inputElement = button.parentElement;
     let payload = inputElement.value.trim();
-    const {subject, hashtag, lat, lng} = this;
+    const {tag, hashtag, lat, lng} = this;
     const region = P2PWebNetwork.regionCode(lat, lng);
     const files = inputElement.parentElement.querySelector('input[type="file"]').files;
     if (!payload && !files.length) return;
@@ -524,17 +754,17 @@ export class Alert extends Conversation { // A wrapper around L.marker
       const {topic:file, msgIds} = await contact.chunkifyBlob({blob: files[0], region});
       payload = {message: payload, file};
     }
-    await contact.publish({eventName: subject, region, payload}); // Publish the new reply.
+    await contact.publish({eventName: tag, region, payload}); // Publish the new reply.
     Agent.current.persistPublicMetadata();
   }
   deleteReply(replyElement) {
     resetInactivityTimer();
-    const {lat, lng, subject} = this;
+    const {lat, lng, tag} = this;
     const region = P2PWebNetwork.regionCode(lat, lng);
-    const killTag = replyElement.dataset.subject;
+    const killTag = replyElement.dataset.tag;
     networkPromise.then(async contact => {
       // We won't be here unless we are the signer.
-      await contact.publish({eventName: subject, region, killTag, payload: null});
+      await contact.publish({eventName: tag, region, killTag, payload: null});
       // IFF there's an attachment AND we're given msgIds by receiveChunkedBytes, then delete the attachment.
       const reply = this.getItem(killTag);
       const {attachmentTopic, msgIds = []} = reply?.payload || {};
@@ -546,7 +776,7 @@ export class Alert extends Conversation { // A wrapper around L.marker
       }
     });
   }
-  showNotification({issuedTime = this.issuedTime, body = '', agent = this.agent, alert = this.subject, lat = this.lat, lng = this.lng, hashtag = this.hashtag}) {
+  showNotification({issuedTime = this.issuedTime, body = '', agent = this.agent, alert = this.tag, lat = this.lat, lng = this.lng, hashtag = this.hashtag}) {
     // Give OS notification that comes back to here, unless act is us.
     // All notifications on the same alert (e.g., the post and each reply) have the same tag, so OS can collapse them.
     if (agent === Agent.tag || !notificationsAllowed()) return;
@@ -564,12 +794,12 @@ export class Alert extends Conversation { // A wrapper around L.marker
       registration.showNotification(hashtag, options);
     });
   }
-  // Each reply element is a DIV.reply with data-subject and data-text attributes that are used in sharing.
+  // Each reply element is a DIV.reply with data-tag and data-text attributes that are used in sharing.
   // It contains an attribution header with controls, zero or one attachments, and then the message text.
   // If present the attachment will be an A element with download attribute, surrounding either an IMG, A/V player, or an attachment icon followed by the file name.
   formatReplies() { // Answer HTML for the replies and input box.
     const { items, agent, originalPosting } = this;
-    const formatReply = ({subject, payload, ...rest}) => {
+    const formatReply = ({tag, payload, ...rest}) => {
       const {message = payload, file, name} = payload || {}; // Message text converts recognized urls to A/V players or links.
       let text = message
 	  .replace(/https?:\/\/\S+\.(mp3|aac|ogg|oga|opus|m4a|m3u8|m3u|mpu|mpd)$/ig, url => `<audio controls src="${url}" crossorigin="anonymous"></audio>`) // show audio urls as players
@@ -587,7 +817,7 @@ export class Alert extends Conversation { // A wrapper around L.marker
   </a>
 </div>`;
       const messageDisplay = message ? `<span class="message">${text}</span>` : '';
-      let dataAttributes = `data-subject="${subject}" data-text="${message}"`;
+      let dataAttributes = `data-tag="${tag}" data-text="${message}"`;
       if (file) dataAttributes += ` data-file="${file}" data-name="${name}"`;
       return `<div class="reply" ${dataAttributes}>${this.formatAttribution(rest)}${attachment}${messageDisplay}</div>`;
     };
@@ -608,18 +838,23 @@ export class Alert extends Conversation { // A wrapper around L.marker
 
   async share(event) { // Share reply or post
     resetInactivityTimer();
-    // TODO: Preserve attribution data. Maybe by including the subject reply tag in the url, and metadata in the text?
+    // TODO: Preserve attribution data. Maybe by including the tag reply tag in the url, and metadata in the text?
     const shareable = event.currentTarget.closest('[data-text]');
     const {text, file, name = 'unknown'} = shareable.dataset;
     const {lat, lng} = this;
     console.log('Share', shareable.dataset);
-    const url = getShareableURL(this.subject, [this.hashtag]).href;
+    const url = getShareableURL(this.tag, [this.hashtag]).href;
     let textBase = `New CivilDefense.io alert @${lat},${lng}`;
     const extendedText = text ? `${textBase}\n${text}` : textBase;
     const data = {text: extendedText, url};
     if (file) data.files = [await P2PWebNetwork.dataURL2blob(file, name)];
     share(data);
   }
+  startExpiration(selector, remaining) { // Setup or update fader and destroy-on-expiration.
+    clearTimeout(this.destroyer);
+    this.destroyer = setTimeout(() => this.destroy(), remaining);
+    this.startFader(selector, remaining);
+  }
   startFader(selector, remaining) { // Set up or update fader on the specified marker element, returning that element.
     const { marker } = this;
     const markerElement = marker.getElement();
@@ -644,15 +879,5 @@ export class Alert extends Conversation { // A wrapper around L.marker
     }, interval);
     return element;
   }
-  destroy() { // Remove this Alert pin entirely.
-    clearInterval(this['.alert-pin']);
-    clearInterval(this['.alert-commented']);
-    clearInterval(this.destroyer);
-    this.clearAvatars();
-    // Unsubscribe from replies.
-    networkPromise?.then(async contact => contact.subscribe({eventName: this.subject, region: this.region, handler: null}));
-    this.marker.removeFrom(map);
-    super.destroy();
-  }
 }
 globalThis.Alert = Alert; // for debugging